/* ============================================================
   SCREEN: LIBRARY  (#screen-library)
   A real, searchable book COLLECTION — the warm, candle-lit shelf.
   js/screens/library.js builds, inside #library-inner:
     • a quiet search field + Recent / Title / Progress sort control,
     • the full shelf as tactile design-system cards (badge + title +
       author + amber progress track + meta), each one tap to resume,
     • a real empty state routing to Add,
     • the legacy folder-scan tool, DEMOTED into a collapsible
       "Add a whole folder" card below the shelf.
   Every rule is scoped under #screen-library. Red = errors only.
   No new palette, no new fonts — composes the foundation tokens.
   ============================================================ */

/* ---- Screen rhythm: generous, library-like vertical air between the
   search, the shelf, and the bulk-import card. ---- */
#screen-library .screen-inner { gap: var(--s4); }
#screen-library #library-inner { display: flex; flex-direction: column; gap: var(--s4); }

/* ============================================================
   TOOLBAR — a quiet search field + a sort segmented control.
   ============================================================ */
#screen-library .lib-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* Search field: leans on the foundation input base, with a leading glyph and
   a touch more presence. Amber focus, never red. */
#screen-library .lib-search {
  position: relative;
  flex: 1 1 200px;
  min-width: 0;
}
#screen-library .lib-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--faint);
  pointer-events: none;
  display: grid;
  place-items: center;
  transition: color var(--tap);
}
#screen-library .lib-search-icon svg { width: 17px; height: 17px; }
#screen-library .lib-search-input {
  width: 100%;
  min-height: 40px;
  padding: 10px 14px 10px 38px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--fs-body);
  outline: none;
  transition: border-color var(--tap), box-shadow var(--tap), background var(--tap);
}
#screen-library .lib-search-input::placeholder { color: var(--faint); }
#screen-library .lib-search-input:focus {
  border-color: var(--accent-2);
  box-shadow: var(--focus-ring);
  background: var(--panel-2);
}
#screen-library .lib-search:focus-within .lib-search-icon { color: var(--accent-2); }

/* Sort segmented control: composes .ds-seg, sized to sit beside the search. */
#screen-library .lib-sort { flex: 0 0 auto; }
#screen-library .lib-sort .lib-sort-btn {
  /* .ds-seg > button already resets the global button fill; tune the rhythm. */
  padding: 7px 13px;
  font-size: 12.5px;
  white-space: nowrap;
}
#screen-library .lib-sort .lib-sort-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================
   COLLECTION — the shelf. A column of tactile book cards.
   Each card composes .ds-card + .ds-tappable; the screen owns its OWN
   container/item classes (.lib-collection > .lib-item) so it never
   collides with Home's #libraryList delegated handler.
   ============================================================ */
#screen-library .lib-collection {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

#screen-library .lib-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
}
/* Stagger the entrance subtly so the shelf "lights up" on screen show. */
#screen-library.active .lib-item { animation: ds-rise var(--spring) both; }
#screen-library.active .lib-item:nth-child(2) { animation-delay: 28ms; }
#screen-library.active .lib-item:nth-child(3) { animation-delay: 56ms; }
#screen-library.active .lib-item:nth-child(4) { animation-delay: 84ms; }
#screen-library.active .lib-item:nth-child(n+5) { animation-delay: 112ms; }

/* Format badge chip — composes .ds-chip; anchored to the card's start. */
#screen-library .lib-item .lib-item-badge {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  font-weight: 700;
}

#screen-library .lib-item .lib-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#screen-library .lib-item .lib-item-title {
  font-family: "Literata", Georgia, serif;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
}
#screen-library .lib-item .lib-item-author {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Slim amber progress track — composes .ds-track, made a touch slimmer than
   the hero so the list reads light. */
#screen-library .lib-item .lib-item-track {
  height: 6px;
  margin-top: 1px;
}

#screen-library .lib-item .lib-item-meta {
  font-size: var(--fs-cap);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

/* The trailing chevron — a quiet affordance that says "tap to open". */
#screen-library .lib-item .lib-item-go {
  flex: 0 0 auto;
  color: var(--faint);
  display: grid;
  place-items: center;
  transition: color var(--tap), transform var(--spring);
}
#screen-library .lib-item .lib-item-go svg { width: 20px; height: 20px; }
#screen-library .lib-item:hover .lib-item-go { color: var(--accent-2); transform: translateX(2px); }

/* ---- No-results line (active search with zero matches). Calm, not an error. */
#screen-library .lib-noresults {
  text-align: center;
  padding: var(--s5) var(--s4);
  color: var(--muted);
}
#screen-library .lib-noresults-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
#screen-library .lib-noresults-sub { font-size: var(--fs-body); color: var(--faint); }

/* ============================================================
   EMPTY STATE — composes .ds-empty; the warm invite to add a first book.
   ============================================================ */
#screen-library .ds-empty { padding-block: var(--s7); }

/* ============================================================
   BULK IMPORT — the legacy folder-scan tool (.lib-scan), DEMOTED into a
   collapsible "Add a whole folder" card below the shelf. The real scan
   elements + IDs are untouched; we only restyle their container.
   ============================================================ */
#screen-library .lib-scan-card {
  padding: 0;
  overflow: hidden;
}

/* The collapsed summary row: a quiet, tappable header. */
#screen-library .lib-scan-summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--tap);
}
#screen-library .lib-scan-summary::-webkit-details-marker { display: none; }
#screen-library .lib-scan-summary:hover { background: var(--panel-2); }
#screen-library .lib-scan-summary-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  color: var(--accent-2);
}
#screen-library .lib-scan-summary-icon svg { width: 19px; height: 19px; }
#screen-library .lib-scan-summary-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
#screen-library .lib-scan-summary-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text);
}
#screen-library .lib-scan-summary-caret {
  flex: 0 0 auto;
  color: var(--faint);
  display: grid;
  place-items: center;
  transition: transform var(--spring);
}
#screen-library .lib-scan-summary-caret svg { width: 20px; height: 20px; }
#screen-library .lib-scan-card[open] .lib-scan-summary-caret { transform: rotate(180deg); }

/* The expanded scan tool body: padded, sitting on a faintly recessed panel so
   it reads as a secondary station distinct from the shelf above. */
#screen-library .lib-scan-card .lib-scan {
  width: 100%;
  margin: 0;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: 0 var(--s4) var(--s4);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--s4);
}

/* Intro copy (now plain language) — calm and quiet. */
#screen-library .lib-scan > .hint:first-of-type {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 56ch;
}

/* The button row: full-width, wraps gracefully on 390px. */
#screen-library .lib-scan > .row { flex-wrap: wrap; gap: 10px; }
#screen-library .lib-scan > .row > button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 11px 16px;
}
/* "Pick folder & scan" is the primary entry of this secondary tool: confident
   accent fill. Rescan / rename stay quiet ghosts. */
#screen-library .lib-scan #scanLibraryBtn {
  flex: 1 1 100%;
  background: var(--grad-accent);
  color: var(--on-accent);
  border: none;
  font-weight: 650;
  box-shadow: var(--shadow-sm);
}
#screen-library .lib-scan #scanLibraryBtn:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(235, 165, 61, 0.30);
}
#screen-library .lib-scan #rescanLibraryBtn,
#screen-library .lib-scan #renameLibraryBtn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600;
}
#screen-library .lib-scan #rescanLibraryBtn:hover,
#screen-library .lib-scan #renameLibraryBtn:hover {
  background: var(--elevate);
  border-color: var(--accent-2);
  filter: none;
}

/* Scan-in-progress hint: a soft accent status, not an error. */
#screen-library #libraryScanProgress:not(:empty) {
  margin: 0;
  padding: 10px 14px;
  background: var(--accent-2-soft);
  border: 1px solid color-mix(in srgb, var(--accent-2) 28%, transparent);
  border-radius: var(--radius-sm);
  color: var(--accent-2-strong);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   SCAN RESULTS — the plan/summary table the folder scan renders into
   #libraryScanResults. Carried over from the prior styling so a scan's
   output stays calm and scannable inside the demoted card.
   ============================================================ */
#screen-library .scan-summary {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: var(--s3);
}
#screen-library .scan-summary > .totals {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
#screen-library .scan-summary > .totals b { color: var(--text); font-weight: 700; font-size: 16px; }
#screen-library .scan-summary > .totals b:nth-of-type(-n+3) { color: var(--accent-2-strong); }

#screen-library .scan-summary .pace-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex-wrap: wrap;
}
#screen-library .scan-summary .pace-row label {
  color: var(--faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  flex: 0 0 64px;
}
#screen-library .scan-summary .pace-row input[type=number],
#screen-library .scan-summary .pace-row select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color var(--tap), box-shadow var(--tap);
}
#screen-library .scan-summary .pace-row select {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
#screen-library .scan-summary .pace-row input[type=number] { width: 96px; flex: 0 0 auto; }
#screen-library .scan-summary .pace-row input[type=number]:focus,
#screen-library .scan-summary .pace-row select:focus {
  border-color: var(--accent-2);
  box-shadow: var(--focus-ring);
}
#screen-library .scan-summary .pace-row .small-btn {
  flex: 0 0 auto;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--tap), color var(--tap), border-color var(--tap);
}
#screen-library .scan-summary .pace-row .small-btn:hover {
  background: var(--elevate);
  color: var(--text);
  border-color: var(--accent-2);
  filter: none;
}
#screen-library .scan-summary .eta {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#screen-library .scan-summary .eta b { color: var(--text); font-weight: 650; }

#screen-library .scan-summary > details > summary,
#screen-library #scanScheduleSummary {
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-size: 12.5px;
  padding: 8px 0 10px;
  user-select: none;
  transition: color var(--tap);
}
#screen-library .scan-summary > details > summary:hover { color: var(--text); }
#screen-library .scan-summary > details > summary::-webkit-details-marker { display: none; }
#screen-library .scan-summary > details > summary::before {
  content: "›";
  display: inline-block;
  margin-right: 8px;
  color: var(--faint);
  transition: transform var(--spring);
}
#screen-library .scan-summary > details[open] > summary::before { transform: rotate(90deg); }

#screen-library .scan-table {
  margin-top: 4px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
#screen-library .scan-table .scan-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title author" "meta meta";
  gap: 2px 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  align-items: baseline;
  transition: background var(--tap);
}
#screen-library .scan-table .scan-row:last-child { border-bottom: none; }
#screen-library .scan-table .scan-row .t {
  grid-area: title;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#screen-library .scan-table .scan-row .a {
  grid-area: author;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  text-align: right;
  align-self: baseline;
}
#screen-library .scan-table .scan-row .m {
  grid-area: meta;
  color: var(--faint);
  font-size: 11.5px;
  white-space: normal;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
#screen-library .scan-table .scan-row-click { cursor: pointer; }
#screen-library .scan-table .scan-row-click:hover { background: var(--panel); }
#screen-library .scan-table .scan-row-click:active { background: var(--panel-2); }
#screen-library .scan-table .scan-row-err .t { color: var(--accent); }
#screen-library .scan-table .scan-row-missing { opacity: 0.65; }
#screen-library .scan-table .scan-row.selected {
  background: color-mix(in srgb, var(--orp) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--orp);
}
#screen-library .scan-table .scan-row.selected:hover {
  background: color-mix(in srgb, var(--orp) 20%, transparent);
}
#screen-library .scan-table .scan-badge {
  display: inline-block;
  font-size: 10.5px;
  line-height: 1.4;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  margin-right: 7px;
  vertical-align: middle;
  font-weight: 650;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
#screen-library .scan-table .scan-badge.inprog {
  background: color-mix(in srgb, var(--orp) 18%, transparent);
  color: var(--orp);
  border: 1px solid color-mix(in srgb, var(--orp) 55%, transparent);
}
#screen-library .scan-table .scan-badge.done {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent);
}
#screen-library .scan-table .scan-badge.unread {
  background: var(--panel-2);
  color: var(--faint);
  border: 1px solid var(--border);
}
#screen-library .scan-table .scan-badge.missing {
  background: var(--danger-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
#screen-library .scan-table .scan-series {
  margin-left: 8px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  font-style: italic;
}

/* Genuine failures — red tint permitted (real errors). */
#screen-library .scan-failures {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
#screen-library .scan-failures summary { cursor: pointer; font-size: 13px; font-weight: 600; }
#screen-library .scan-failures .scan-failure-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#screen-library .scan-failures .scan-failure {
  font-size: 12px;
  padding: 8px 10px;
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent);
}
#screen-library .scan-failures .scan-failure .t { color: var(--text); word-break: break-word; margin-bottom: 3px; }
#screen-library .scan-failures .scan-failure .m {
  color: var(--muted);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
}
#screen-library .rec-basis {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

/* Error line (folder-scan failures surfaced inline) — red, errors only. */
#screen-library .lib-scan > .err { color: var(--accent); font-size: 13px; }

/* ============================================================
   WIDER SCREENS — let the shelf breathe; give the plan table room.
   ============================================================ */
@media (min-width: 600px) {
  #screen-library .lib-item { gap: var(--s4); padding: 20px; }
  #screen-library .scan-summary { padding: 20px; }
  #screen-library .scan-table .scan-row {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "title author meta";
    align-items: baseline;
    gap: 14px;
    padding: 10px 16px;
  }
  #screen-library .scan-table .scan-row .a { text-align: left; }
  #screen-library .scan-table .scan-row .m { white-space: nowrap; text-align: right; }
}

/* ============================================================
   CATALOGUE GRID — the collection renders as generated covers (cv-* classes,
   global from screen-home.css) laid out in a grid, like Home. Overrides the
   old text-row .lib-item styling. (js/screens/library.js renderShelf.)
   ============================================================ */
#screen-library #library-collection {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#screen-library .lib-item.lib-cover {
  display: block; padding: 0; margin: 0; border: none; background: none;
  border-radius: 12px; box-shadow: none; cursor: pointer;
  transition: transform var(--spring);
  -webkit-tap-highlight-color: transparent;
}
#screen-library .lib-item.lib-cover:hover { transform: translateY(-3px); border: none; box-shadow: none; }
#screen-library .lib-item.lib-cover:active { transform: translateY(0) scale(0.985); }
#screen-library .lib-item.lib-cover:focus-visible { outline: none; box-shadow: var(--focus-ring); }


/* Sort segmented control: make the ACTIVE option obviously gold (was too subtle). */
#screen-library .lib-sort-btn { color: var(--muted); }
#screen-library .lib-sort-btn.active { background: var(--elevate); color: var(--accent-2-strong); box-shadow: var(--shadow-sm); }

/* ============================================================
   COVER-WALL REDESIGN — the library reads as a wall of book posters with a
   "Continue reading" hero, an Up-Next rail, faceted filters, and a Want-to-Read
   shelf. Built by js/screens/library.js. Composes the foundation tokens only;
   red = errors. One locked poster aspect ratio (3/4) across the whole wall.
   ============================================================ */

/* ---- CONTINUE-READING HERO (#library-hero) — a tall cover beside the resume
        action, with the measured "≈ N min left at your pace" headline. -------- */
#screen-library .lib-hero {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  padding: 16px;
  background:
    radial-gradient(130% 95% at 0% 0%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 58%),
    var(--grad-card);
  cursor: pointer;
  transition: transform var(--spring), box-shadow var(--spring), border-color var(--tap);
  -webkit-tap-highlight-color: transparent;
}
#screen-library .lib-hero:hover { transform: translateY(-2px); box-shadow: var(--shadow-panel); }
#screen-library .lib-hero:active { transform: translateY(0) scale(0.994); }
#screen-library .lib-hero:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#screen-library .lib-hero-cover { flex: 0 0 92px; }
#screen-library .lib-hero-cover .cv-art { width: 92px; }
#screen-library .lib-hero-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
}
#screen-library .lib-hero-title {
  font-family: "Literata", Georgia, serif;
  font-size: 22px; font-weight: 700; line-height: 1.14; color: var(--text);
  letter-spacing: -0.02em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#screen-library .lib-hero-author {
  font-size: 13px; font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#screen-library .lib-hero-track { height: 8px; margin-top: 2px; }
#screen-library .lib-hero-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px;
}
#screen-library .lib-hero-meta {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 500; color: var(--faint);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#screen-library .lib-hero-cta {
  flex: 0 0 auto; width: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 16px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 700;
  box-shadow: 0 5px 16px rgba(235, 165, 61, 0.28);
}
#screen-library .lib-hero-cta-icon { display: inline-flex; align-items: center; transition: transform var(--spring); }
#screen-library .lib-hero-cta-icon svg { width: 16px; height: 16px; }
#screen-library .lib-hero:hover .lib-hero-cta-icon { transform: translateX(2px); }
/* On a phone the foot stacks so the full measured meta (min left · % · words)
   shows instead of being truncated by the Resume button. */
@media (max-width: 600px) {
  #screen-library .lib-hero-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  #screen-library .lib-hero-meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
  #screen-library .lib-hero-cta { align-self: flex-start; }
}

/* ---- FACETS — Genre / Series / Format selects beside the sort control. ------ */
#screen-library .lib-facets {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  flex: 1 1 100%;
}
#screen-library .lib-facet {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1 1 auto; min-width: 0;
}
#screen-library .lib-facet-cap {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--faint); flex: 0 0 auto;
}
#screen-library .lib-facet-sel {
  flex: 1 1 auto; min-width: 0;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 7px 28px 7px 12px; font: inherit; font-size: 12.5px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color var(--tap), box-shadow var(--tap);
}
#screen-library .lib-facet-sel:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--focus-ring); }

/* ---- UP-NEXT + WANT-TO-READ horizontal rails. ------------------------------- */
#screen-library .lib-rail-section { display: flex; flex-direction: column; gap: 10px; }
#screen-library .lib-rail-head { display: flex; align-items: baseline; gap: 8px; }
#screen-library .lib-rail-count {
  font-size: 11px; font-weight: 700; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
/* Explains WHY these books are here (series gaps you partly own) so the shelf
   reads as intentional, not a random list. */
#screen-library .lib-rail-note {
  margin: 2px 0 10px;
  font-size: 12px; line-height: 1.4; color: var(--muted); max-width: 60ch;
}
#screen-library .lib-rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 104px;
  gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
#screen-library .lib-rail-card {
  scroll-snap-align: start; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--spring);
}
#screen-library .lib-rail-card:hover { transform: translateY(-3px); }
#screen-library .lib-rail-card:active { transform: translateY(0) scale(0.985); }
#screen-library .lib-rail-card:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 12px; }
#screen-library .lib-rail-cover { position: relative; }
#screen-library .lib-rail-cover .cv-art { width: 104px; }
#screen-library .lib-rail-title {
  font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#screen-library .lib-rail-sub {
  font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The "wanted" heart on a Want-to-Read card — gold, tap to remove. A
   DsIconButton (.ds-icon-btn in markup): the visible badge stays a compact 28px
   corner chip, but a transparent ::after expands the TAP target to the 44px
   minimum so touch never misses the small chip. Only context-specific look
   (position, dark blur chip, gold tint, danger wash) lives here. */
#screen-library .lib-rail-heart {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  min-width: 0; min-height: 0; width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px);
  color: var(--accent-2-strong);
}
#screen-library .lib-rail-heart::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: var(--hit-target); height: var(--hit-target);
}
#screen-library .lib-rail-heart svg { width: 15px; height: 15px; }
#screen-library .lib-rail-heart:hover { background: var(--danger-soft); color: var(--accent); }

/* ============================================================
   THE WALL — a responsive grid of book posters. One locked aspect ratio.
   ============================================================ */
#screen-library #library-collection.lib-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 12px;
}
#screen-library .lib-tile {
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--spring);
  /* The wall can hold the WHOLE scanned folder (thousands of tiles). Let the
     browser skip layout + paint for tiles scrolled off-screen; `auto` remembers
     each tile's real rendered height so the scrollbar stays accurate. This is
     what keeps scrolling a large library smooth. */
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}
#screen-library .lib-tile:hover { transform: translateY(-3px); }
#screen-library .lib-tile:active { transform: translateY(0) scale(0.985); }
#screen-library .lib-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 12px; }
#screen-library .lib-tile-cover { position: relative; }
/* The silver progress hairline along the foot of every cover. */
#screen-library .lib-tile-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 3px;
  background: rgba(0, 0, 0, 0.4); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
  overflow: hidden;
}
#screen-library .lib-tile-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--progress-dim), var(--progress-light));
}
/* Remove control, hover/touch revealed at the cover's top-left. A DsIconButton
   (.ds-icon-btn .ds-icon-btn--danger in markup): compact 28px corner chip with a
   transparent ::after expanding the tap target to the 44px minimum. */
#screen-library .lib-tile-remove {
  position: absolute; top: 6px; left: 6px; z-index: 4;
  min-width: 0; min-height: 0; width: 28px; height: 28px;
  /* No backdrop-filter here: this chip repeats on every wall tile, and a blur
     layer per tile (thousands of them) is a scroll-paint killer. A solid scrim
     reads the same over cover art. */
  background: rgba(0, 0, 0, 0.62);
  color: rgba(255, 255, 255, 0.85);
}
#screen-library .lib-tile-remove::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: var(--hit-target); height: var(--hit-target);
}
#screen-library .lib-tile-title {
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#screen-library .lib-tile-author {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#screen-library .lib-tile-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums;
}
#screen-library .lib-tile-meta-text {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (min-width: 600px) {
  #screen-library #library-collection.lib-wall { grid-template-columns: repeat(4, 1fr); }
  #screen-library .lib-rail { grid-auto-columns: 120px; }
  #screen-library .lib-rail-cover .cv-art { width: 120px; }
  #screen-library .lib-hero-cover { flex-basis: 104px; }
  #screen-library .lib-hero-cover .cv-art { width: 104px; }
}
@media (min-width: 860px) {
  #screen-library #library-collection.lib-wall { grid-template-columns: repeat(5, 1fr); }
}