/**
 * css/shell/library.css
 * My Library screen: search, type filters, sort, and the saved-document rows.
 *
 * The list is rendered from the app's own store (window.LibraryStore) and every
 * action goes back through window.Library, so this file is presentation only.
 *
 * Dependencies: css/shell/tokens.css, css/shell/screens.css.
 */

/* ============================================================
   SEARCH
   ============================================================ */
.ts-search {
  position: relative;
  margin-bottom: 0.75rem;
}
.ts-search svg {
  position: absolute;
  top: 50%; left: 0.875rem;
  width: 1.125rem; height: 1.125rem;
  margin-top: -0.5625rem;
  color: var(--ts-text-dim);
  pointer-events: none;
}
.ts-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 0.875rem 0.875rem 2.75rem;
  border: 1px solid var(--ts-border);
  border-radius: 0.625rem;
  background: var(--ts-surface);
  color: var(--ts-text);
  /* 16px minimum, or Android Chrome zooms the page when the field is focused. */
  font-size: 1rem;
  font-family: inherit;
}
.ts-search input::placeholder { color: var(--ts-text-faint); }

/* ============================================================
   FILTERS + SORT
   ============================================================ */
.ts-filterbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* The chips scroll rather than wrap: the set is built from the types actually
   in the library, so it can be longer than the design's three. */
.ts-chips {
  flex: 1 1 auto;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ts-chips::-webkit-scrollbar { display: none; }

.ts-chip {
  flex: none;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ts-border);
  border-radius: 999px;
  background: transparent;
  color: var(--ts-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-chip.active {
  background: var(--ts-accent);
  border-color: var(--ts-accent);
  color: var(--ts-accent-ink);
  font-weight: 700;
}

.ts-sort {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--ts-border);
  border-radius: 0.5rem;
}
.ts-sort svg { width: 1rem; height: 1rem; color: var(--ts-text-dim); }
.ts-sort select {
  border: 0;
  background: transparent;
  color: var(--ts-text);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
}
.ts-sort select option { color: #111; }

/* ============================================================
   LIST HEADING
   ============================================================ */
.ts-lib-heading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}
/* Pushes the sort control to the right of the heading row. */
.ts-lib-heading .ts-sort { margin-left: auto; }
.ts-lib-heading-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ts-text);
}
.ts-lib-count {
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--ts-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--ts-text-dim);
}

/* ============================================================
   DOCUMENT ROWS
   ============================================================ */
.ts-lib-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}
.ts-lib-row + .ts-lib-row { border-top: 1px solid var(--ts-border-soft); }

/* Folded-corner file badge: the notch is a triangle cut from the top-right. */
.ts-lib-badge {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 2.75rem; height: 3.25rem;
  padding-bottom: 0.375rem;
  border-radius: 0.25rem;
  background: #4b5563;
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
}
.ts-lib-badge[data-type="docx"] { background: #2563eb; }
.ts-lib-badge[data-type="pdf"]  { background: #dc2626; }
.ts-lib-badge[data-type="epub"] { background: #16a34a; }
.ts-lib-badge[data-type="txt"],
.ts-lib-badge[data-type="md"],
.ts-lib-badge[data-type="rtf"],
.ts-lib-badge[data-type="html"] { background: #6b7280; }

.ts-lib-main { flex: 1 1 auto; min-width: 0; }

.ts-lib-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ts-text);
  line-height: 1.3;
  /* Exported filenames are frequently one long underscore_joined token with
     no break opportunity; without this the clamp shows a single truncated
     line instead of wrapping to the two it is allowed. */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ts-lib-meta {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--ts-text-dim);
}

.ts-lib-foot {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
}
.ts-lib-bar {
  flex: 1 1 auto;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--ts-track);
  overflow: hidden;
}
.ts-lib-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ts-icon);
}
.ts-lib-status {
  flex: none;
  font-size: 0.8125rem;
  color: var(--ts-text-dim);
}

.ts-lib-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.ts-lib-open {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--ts-icon);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-lib-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--ts-text-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-lib-kebab svg { width: 1.25rem; height: 1.25rem; }

/* ============================================================
   EMPTY
   ============================================================ */
.ts-lib-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--ts-text-dim);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ============================================================
   CROSS-DEVICE SYNC STRIP

   Sits above the search field because it is a statement about the whole
   list, not a control that filters it. Deliberately quiet: sync is
   background work that succeeds almost always, so the resting state is a
   single dim line, and only a failure raises its voice.
   ============================================================ */
.ts-sync {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius-sm);
  background: var(--ts-surface);
}

.ts-sync-icon {
  display: inline-flex;
  flex: none;
  color: var(--ts-text-dim);
}
.ts-sync-icon svg { width: 1.25rem; height: 1.25rem; }

.ts-sync-text {
  flex: 1 1 auto;
  min-width: 0;          /* lets the detail line ellipsis instead of pushing */
  line-height: 1.25;
}
.ts-sync-state {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ts-text);
}
.ts-sync-sub {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--ts-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-sync-btn {
  flex: none;
  /* 44px tall: this is a real touch target sharing a row with text. */
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--ts-border);
  border-radius: 0.5rem;
  background: var(--ts-surface-2);
  color: var(--ts-text);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-sync-btn:active:not(:disabled) { background: var(--ts-surface-3); }
.ts-sync-btn:disabled { opacity: 0.45; cursor: default; }

/* The on/off switch for syncing, beside "Sync now". Sized as a real touch
   target, like the button it sits next to: this is the control that decides
   whether the library leaves the phone, so it must not be a 12px tick box. */
.ts-sync-switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0 0.5rem;
  color: var(--ts-text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-sync-switch input {
  width: 2.25rem;
  height: 1.375rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--ts-accent, #22c55e);
}

/* ---- per-state tone --------------------------------------------------- */
.ts-sync[data-tone="ok"] .ts-sync-icon    { color: var(--ts-accent-text); }
.ts-sync[data-tone="busy"] .ts-sync-icon  { color: var(--ts-accent-text); }
.ts-sync[data-tone="error"] {
  border-color: var(--ts-danger);
  background: rgba(248, 113, 113, 0.08);
}
.ts-sync[data-tone="error"] .ts-sync-icon,
.ts-sync[data-tone="error"] .ts-sync-state { color: var(--ts-danger); }

/* Spin only while a round trip is actually in flight. */
.ts-sync[data-tone="busy"] .ts-sync-icon svg { animation: ts-sync-spin 1.1s linear infinite; }
@keyframes ts-sync-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ts-sync[data-tone="busy"] .ts-sync-icon svg { animation: none; }
}