/* reader-overlays.css — modal/overlay UI for the manga reader:
   - Chapter list slide-in panel (☰ button in top-bar)
   - Settings popover (gear button)
   - Onboarding modal (first-open Start fresh / Resume / From…) */

/* ── Auto-archive Undo toast (Phase 128) — shown after finishing a completed
   series. Fixed bottom-center pill with an Undo action. ── */
.reader-archive-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px);
  z-index:1200; display:flex; align-items:center; gap:14px;
  max-width:calc(100vw - 32px);
  padding:11px 16px; border-radius:10px;
  background:#1c1f29; color:#e6e9f0; border:1px solid #2a3040;
  box-shadow:0 8px 28px rgba(0,0,0,.32);
  font-family:'Inter',sans-serif; font-size:13px;
  opacity:0; transition:opacity .2s ease, transform .2s ease; pointer-events:none;
}
.reader-archive-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.reader-archive-toast .rat-msg{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader-archive-toast .rat-undo{
  flex:0 0 auto; background:transparent; border:none; cursor:pointer;
  color:#8fb0ff; font-weight:700; font-size:13px; font-family:inherit;
  text-transform:uppercase; letter-spacing:.04em;
}
.reader-archive-toast .rat-undo:hover{ color:#b9cdff; }

/* ── Chapter list overlay (☰ in reader top-bar) ───────────────── */
.reader-chapter-list{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:90vw;background:#1c1f29;color:#e6e9f0;border-left:1px solid #2a3040;display:flex;flex-direction:column;z-index:1100;box-shadow:-8px 0 24px rgba(0,0,0,.35);font-family:'Inter',sans-serif;animation:reader-cl-slide .18s ease-out}
@keyframes reader-cl-slide{from{transform:translateX(100%)}to{transform:translateX(0)}}

/* Panel + body: make the panel fill the overlay (column-flex) so the
   header takes its natural height and the body absorbs the rest with
   `overflow-y:auto`. Without these rules the body never had a
   bounded height, so long chapter lists overflowed the overlay
   silently and the user couldn't scroll. */
.reader-chapter-list .chapter-list-panel{display:flex;flex-direction:column;height:100%;width:100%;min-height:0}
/* overflow-x:hidden suppresses any stray horizontal scrollbar from
   row-internal overflow (e.g. long subtitle without word breaks).
   The body should never scroll horizontally — only vertically. */
.reader-chapter-list .chapter-list-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:6px 0;min-height:0}
.reader-chapter-list .chapter-list-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:8px 16px 6px;gap:10px}
/* Single-line header: "<N> chapters · <M> offline". The total reads
   as the primary count (white-weight 600); the green offline count
   is the visual accent telling the user how much they've saved. */
.reader-chapter-list .chapter-list-counts{font-size:13px;color:#a8b1c5;line-height:1.3;font-weight:500}
.reader-chapter-list .chapter-list-count-total{color:#e6e9f0;font-weight:600}
.reader-chapter-list .chapter-list-count-offline{color:#7ed99a;font-weight:600}
.reader-chapter-list .chapter-list-count-sep{color:#5a6172;font-weight:400}
.reader-chapter-list .chapter-list-close{background:transparent;border:none;color:#a8b1c5;font-size:14px;cursor:pointer;padding:4px 8px;border-radius:4px;flex-shrink:0}
.reader-chapter-list .chapter-list-close:hover{background:#2a3040;color:#fff}

/* Phase 13f / 42 — chips row directly below the chapter-info row.
   No standalone section wrapper — sits flat under the header,
   sharing the panel's bg. Restricted is the first chip (red lock
   pill) when active; warn-tier adapter tags follow (red / orange);
   plain chips fill the rest. Dark-theme palette tuned for the
   overlay's #1c1f29 chrome. */
.reader-chapter-list .reader-tags{
  flex:0 0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  padding:0 16px 10px;
}
.reader-chapter-list .reader-tag{
  font-size:10px;line-height:1.2;
  padding:2px 7px;
  background:#2a3040;
  color:#d4d8e3;
  border:1px solid #3a4258;
  border-radius:6px;
  white-space:nowrap;font-weight:500;
}
.reader-chapter-list .reader-tag-warn-red,
.reader-chapter-list .reader-tag-restricted{
  background:#cc1e1e;color:#fff;border-color:#cc1e1e;font-weight:600;
}
.reader-chapter-list .reader-tag-warn-orange{
  background:#e48020;color:#fff;border-color:#e48020;font-weight:600;
}
/* Phase 51 — synopsis / byline / status block above the tag chips
   row in the chapter-list overlay header. Maurice's locked decision
   2026-05-02: synopsis sets expectations first; tags become the last
   visual chrome before the chapter list. The whole block is
   suppressed when the adapter has no `details` populated yet.
   Sub-rows (alt title / byline / status / synopsis) are independently
   suppressed when their data is absent. */
.reader-chapter-list .reader-synopsis-block{
  flex:0 0 auto;
  display:flex; flex-direction:column; gap:6px;
  padding:0 16px 8px;
  color:#cdd2de;
  font-size:11.5px; line-height:1.45;
}
.reader-chapter-list .reader-synopsis-alt-title{
  color:#a3aab9;
  font-style:italic;
}
.reader-chapter-list .reader-synopsis-alt-label{
  color:#7a8194; font-style:normal; font-weight:500;
  margin-right:2px;
}
/* Phase 51 iteration 2026-05-02 — byline now renders one row per
   .reader-byline-line; author and artist each get their own row
   when both are populated. No nowrap / no truncate. */
.reader-chapter-list .reader-byline{
  color:#cdd2de;
  display:flex; flex-direction:column; gap:2px;
}
.reader-chapter-list .reader-byline-line{
  word-break:break-word;
}
.reader-chapter-list .reader-byline-label{color:#8c93a4;font-weight:400}
/* Legacy separator class — kept for backward compat. */
.reader-chapter-list .reader-byline-sep{color:#5a6172;margin:0 2px}
.reader-chapter-list .reader-status-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:10.5px; line-height:1.2;
}
/* Phase 51 iteration 2026-05-02 — status + demographic pills now
   match the Phase 42 chip border-radius (6px) instead of 9px. */
.reader-chapter-list .reader-status{
  display:inline-block;
  padding:2px 7px; border-radius:6px;
  font-size:10.5px; font-weight:600; letter-spacing:.2px;
  border:1px solid;
}
.reader-chapter-list .reader-status-ongoing  {background:#2a3040;color:#d4d8e3;border-color:#3a4258}
.reader-chapter-list .reader-status-completed{background:#1f4a2e;color:#cfe9d6;border-color:#2f6b40}
.reader-chapter-list .reader-status-hiatus   {background:#5a3a14;color:#fbd9a8;border-color:#7a5020}
.reader-chapter-list .reader-status-cancelled{background:#5a1d1d;color:#f5cfcf;border-color:#7a2828}
/* Phase 51 iteration 2026-05-02 — year now renders as a pill on
   the chapter-list overlay too (matches the /settings tile
   treatment). Dark-theme palette mirrors .reader-status-ongoing
   so it sits cleanly inside the existing overlay chrome. */
.reader-chapter-list .reader-year{
  display:inline-block;
  padding:2px 7px; border-radius:6px;
  font-size:10.5px; font-weight:600; letter-spacing:.2px;
  background:#2a3040; color:#d4d8e3; border:1px solid #3a4258;
}
.reader-chapter-list .reader-demographic{
  display:inline-block;
  padding:2px 7px; border-radius:6px;
  font-size:10.5px; font-weight:500;
  background:#3a2e18; color:#fbd9a8; border:1px solid #5a4a28;
}
/* Phase 65 — language badge in the chapter-list overlay header.
   Neutral slate pill, matches the year pill palette so the row
   reads as a coherent meta-data cluster without adding new colour. */
.reader-chapter-list .reader-languages{
  display:inline-block;
  padding:2px 7px; border-radius:6px;
  font-size:10.5px; font-weight:600; letter-spacing:.4px;
  background:#1e2535; color:#8b95b0; border:1px solid #2e3a52;
}
/* Synopsis text — collapsed-by-default at 3 lines via CSS line-clamp.
   Adding `.reader-synopsis-expanded` removes the clamp. The "Show
   more" toggle is rendered only when the synopsis is longer than the
   long-threshold (~500 chars) — see _readerSynopsisBlockHtml. */
.reader-chapter-list .reader-synopsis-text{
  color:#cdd2de;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  /* Fallback hard cap for engines without -webkit-line-clamp:
     line-height 1.45 × 11.5px × 3 ≈ 50px, round to 52. */
  max-height:52px;
}
.reader-chapter-list .reader-synopsis-expanded .reader-synopsis-text{
  -webkit-line-clamp:unset;
  max-height:none;
}
.reader-chapter-list .reader-synopsis-toggle{
  align-self:flex-start;
  background:transparent;
  border:none;
  color:#9aa7c2;
  font-family:inherit;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2px;
  padding:2px 0 0;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.reader-chapter-list .reader-synopsis-toggle:hover{color:#cdd2de}

/* Phase 11g iteration — "Retry all (N)" header button. Visible
   only when at least one chapter is marked broken; click clears
   the whole broken set for this section. Same brown accent as the
   per-row retry chip but slightly bigger since it's a header action. */
.reader-chapter-list .chapter-list-retry-all{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  background:transparent;
  border:1px solid #f0d4a8;
  border-radius:5px;
  color:#f0d4a8;
  font-size:11px;
  font-weight:600;
  font-family:inherit;
  line-height:1.3;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  flex-shrink:0;
  transition:background .12s, color .12s;
}
.reader-chapter-list .chapter-list-retry-all:hover{background:#7a4d2a;color:#fff}

/* Phase 51 iteration 2026-05-02 — manual ↻ Refresh button at the top
   of the chapter list. Always visible (unlike retry-all which is
   conditional). Sized + chromed like retry-all for consistency, but
   uses the neutral slate palette so it doesn't compete visually with
   the warning-colored retry-all when both are present. */
.reader-chapter-list .chapter-list-refresh{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  background:transparent;
  border:1px solid #3a4258;
  border-radius:5px;
  color:#cdd2de;
  font-size:11px;
  font-weight:600;
  font-family:inherit;
  line-height:1.3;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  flex-shrink:0;
  transition:background .12s, color .12s, border-color .12s;
}
.reader-chapter-list .chapter-list-refresh:hover{
  background:#2a3040; color:#fff; border-color:#5a6172;
}
.reader-chapter-list .chapter-list-refresh[disabled]{
  opacity:.6; cursor:wait;
}
/* Spin the icon while a refresh is in flight. */
.reader-chapter-list .chapter-list-refresh-icon{
  display:inline-block;
  font-size:13px; line-height:1;
  transition:transform .2s;
}
.reader-chapter-list .chapter-list-refresh.is-refreshing .chapter-list-refresh-icon{
  animation:readerRefreshSpin 1s linear infinite;
}
@keyframes readerRefreshSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .reader-chapter-list .chapter-list-refresh.is-refreshing .chapter-list-refresh-icon{
    animation:none;
  }
}

.reader-chapter-list .reader-cl-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #2a3040;flex-shrink:0}
.reader-chapter-list .reader-cl-head h4{margin:0;font-size:14px;font-weight:600;color:#e6e9f0}
.reader-chapter-list .reader-cl-close{background:transparent;border:none;color:#a8b1c5;font-size:14px;cursor:pointer;padding:4px 8px;border-radius:4px}
.reader-chapter-list .reader-cl-close:hover{background:#2a3040;color:#fff}
.reader-chapter-list .reader-cl-body{flex:1;overflow-y:auto;padding:6px 0}

.reader-chapter-list .reader-cl-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 16px;background:transparent;border:none;color:#e6e9f0;font-family:inherit;font-size:13px;text-align:left;cursor:pointer;border-left:3px solid transparent;transition:background .12s}
.reader-chapter-list .reader-cl-row:hover{background:#2a3040}
.reader-chapter-list .reader-cl-row.is-current{background:#283460;border-left-color:#5a7be0;color:#fff}
.reader-chapter-list .reader-cl-row.is-current:hover{background:#324476}
.reader-chapter-list .reader-cl-row.is-lastread{border-left-color:#7a8aa8}
.reader-chapter-list .reader-cl-row.is-broken{opacity:.5}
.reader-chapter-list .reader-cl-row.is-pinned{border-left-color:#3aa166}

.reader-chapter-list .reader-cl-num{font-weight:600;flex-shrink:0;min-width:60px}
.reader-chapter-list .reader-cl-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;color:#a8b1c5}
.reader-chapter-list .reader-cl-row.is-current .reader-cl-title{color:#dde3f2}
.reader-chapter-list .reader-cl-group{font-size:10px;background:#2a3040;color:#a8b1c5;padding:2px 6px;border-radius:3px;flex-shrink:0;font-weight:500}

.reader-chapter-list .reader-cl-tag{font-size:10px;font-weight:600;padding:2px 7px;border-radius:3px;background:#5a7be0;color:#fff;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em}
.reader-chapter-list .reader-cl-tag.is-warn{background:#7a4d2a;color:#f0d4a8}
.reader-chapter-list .reader-cl-pin-badge{background:#1f6b3d;color:#d2f5dd}

@media (max-width: 600px){
  .reader-chapter-list{width:100vw;max-width:100vw;border-left:none}
}

/* Chapter list rows emitted by reader.js _openChapterList. The JS uses
   `chapter-row` / `chapter-tag` / `chapter-line` etc. classes (parallel
   set to the `reader-cl-*` classes above) — these are the active ones
   the overlay actually renders. tag-current / tag-last / tag-broken /
   tag-removed live here. */
/* Phase 11g — magazine-style row layout. The poster takes visual
   primacy at ~80×120 (2:3 aspect, the standard manga cover ratio),
   chapter line + subtitle sit to its right with a more generous
   typographic rhythm, and tags wrap to a row below indented past
   the poster. The pin button stays absolute-positioned at the
   right edge; the row's `padding-right` reserves space for it. */
.reader-chapter-list .chapter-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  column-gap:14px;
  row-gap:6px;
  width:100%;
  padding:12px 16px;
  background:transparent;
  color:#e6e9f0;
  font-family:inherit;
  font-size:13px;
  text-align:left;
  cursor:pointer;
  border-left:3px solid transparent;
  transition:background .12s;
}
.reader-chapter-list .chapter-row > .chapter-poster{order:0;flex:0 0 auto}
/* Top-align the chapter line so the chapter # sits flush with the
   top of the poster (was align-self:center, which floated it
   vertically and pushed the subtitle off-rhythm). */
.reader-chapter-list .chapter-row > .chapter-line{order:1;flex:1 1 0;min-width:0;align-self:flex-start;padding-right:8px}
/* The pin button is appended inside .chapter-line (offline.js
   handles this), so it doesn't need row-level flex placement —
   it stacks naturally below the subtitle inside the line column.
   `.chapter-tags` block-row is no longer emitted (all status tags
   live inline in `.chapter-headline` next to chapter #). */
.reader-chapter-list .chapter-poster{
  /* Bumped 80→100 (+25%). Aspect 2:3 → 100×150. */
  width:100px;
  aspect-ratio:2/3;
  height:auto;
  object-fit:cover;
  background:#2a3040;
  border-radius:6px;
  display:block;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.reader-chapter-list .chapter-poster.chapter-poster-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#5a6172;
  font-size:36px;
  height:150px;
}
/* Failed poster (page-0 fetch 404/502) — greyed-out book + a "404" label so
   it reads as "couldn't load" rather than a plain no-cover chapter. */
.reader-chapter-list .chapter-poster.chapter-poster-failed{
  flex-direction:column;
  gap:4px;
  font-size:0;            /* kill stray whitespace; children set their own size */
}
.reader-chapter-list .chapter-poster-failed .cpf-glyph{
  font-size:30px;
  filter:grayscale(1);
  opacity:.45;
}
.reader-chapter-list .chapter-poster-failed .cpf-code{
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:#6b7280;
}
.reader-chapter-list .chapter-row:hover{background:#2a3040}
.reader-chapter-list .chapter-row.current{background:#283460;border-left-color:#5a7be0;color:#fff}
.reader-chapter-list .chapter-row.current:hover{background:#324476}
.reader-chapter-list .chapter-row.broken{opacity:.5}
/* Phase 24b — upstream-removed rows now flag with a warm amber bg +
   yellow border-left accent instead of a subtle opacity drop. The
   opacity treatment was easy to miss when the row's normal hover/
   selected background already varied; the colour change reads as
   "warning" at a glance. broken-AND-upstream-removed compounds the
   broken opacity on top of the amber tint so both states stay
   readable. */
.reader-chapter-list .chapter-row.upstream-removed{
  background:rgba(240,214,128,.16);
  border-left-color:#f0d680;
}
.reader-chapter-list .chapter-row.upstream-removed:hover{background:rgba(240,214,128,.24)}
.reader-chapter-list .chapter-row.upstream-removed.broken{opacity:.55}
/* Magazine-style typography: chapter number reads as a small
   prominent label (heavy weight, slight letter-spacing), subtitle
   wraps onto its own line below in a softer color so the row
   reads "headline + subhead" rather than "chip + ellipsis". */
.reader-chapter-list .chapter-line{display:flex;flex-direction:column;gap:4px;flex-wrap:wrap;line-height:1.35}
/* `chapter-headline` is the top row inside .chapter-line — chapter
   number + descriptive status tags (last read, unavailable, removed
   upstream) + the offline-reading pin button (appended by
   offline.js). The "current" tag is NOT rendered here; it lives
   inline right before the chapter title (subtitle text) one row
   below, anchoring the "you are here" marker against the title. */
.reader-chapter-list .chapter-headline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Title row: [current tag] + subtitle text, baseline-aligned so
   the small uppercase "current" pill sits visually with the
   subtitle text. Subtitle still gets `-webkit-line-clamp:2` from
   its own rule below. */
.reader-chapter-list .chapter-title-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.reader-chapter-list .chapter-title-row > .chapter-tag.tag-current{flex:0 0 auto}
.reader-chapter-list .chapter-title-row > .chapter-subtitle{flex:1 1 auto;min-width:0}
.reader-chapter-list .chapter-num{font-weight:700;font-size:15px;color:#e6e9f0;letter-spacing:.01em}
.reader-chapter-list .chapter-subtitle{font-size:13px;font-weight:400;color:#a8b1c5;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.reader-chapter-list .chapter-group{font-size:10px;background:#2a3040;color:#a8b1c5;padding:2px 6px;border-radius:3px;flex-shrink:0;font-weight:500}
.reader-chapter-list .chapter-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.reader-chapter-list .chapter-tag{font-size:10px;font-weight:600;padding:2px 7px;border-radius:3px;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em;background:#5a7be0;color:#fff}
.reader-chapter-list .chapter-tag.tag-current{background:#5a7be0;color:#fff}
.reader-chapter-list .chapter-tag.tag-last{background:#3a4a6e;color:#dde3f2}
.reader-chapter-list .chapter-tag.tag-broken{background:#7a4d2a;color:#f0d4a8}
/* Phase 24b — upstream-removed tag. Grey/muted to telegraph "this
   chapter is gone from the source" without alarming the user — broken
   chapters (tag-broken, brown) are local cache misses; this one is
   a permanent upstream change. The pages still load if they're cached. */
.reader-chapter-list .chapter-tag.tag-removed{background:#3a4154;color:#a8b1c5}
/* Phase 11g iteration — retry button shown next to `unavailable`
   tag when a chapter has been auto-marked broken from a failed
   load. Visually slimmer than the offline-reading pin button —
   it's a one-shot action, not a persistent toggle. Click clears
   the broken flag + navigates to the chapter. */
.reader-chapter-list .chapter-retry-btn{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 8px;
  background:transparent;
  border:1px solid #f0d4a8;
  border-radius:4px;
  color:#f0d4a8;
  font-size:10px;
  font-weight:600;
  font-family:inherit;
  line-height:1.4;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:background .12s, color .12s;
}
.reader-chapter-list .chapter-retry-btn:hover{background:#7a4d2a;color:#fff}
/* Phase 11e — "saved offline" pin badge. Replaced by Phase 11f's
   per-row icon button (.chapter-pin-btn) below; legacy text-tag
   styling kept for back-compat in case anything still emits it. */
.reader-chapter-list .chapter-tag.tag-pinned{background:#1f6b3d;color:#d2f5dd}
/* Phase 11c-i follow-up — page count rendered on its own line below
   the chapter number, spelled out ("24 pages"). Muted grey so it
   reads as supplementary info; hidden when the adapter doesn't
   provide a count (RCO at the moment). */
.reader-chapter-list .chapter-pagecount{
  display:block;
  margin-top:2px;
  font-size:11px;
  font-weight:500;
  color:#8a93a6;
  line-height:1.3;
}
.reader-chapter-list .chapter-row.current .chapter-pagecount{color:#cdd7e8}
/* Phase 11c-i follow-up — "all N pages read" variant. Soft green so
   the chapter list lets the user see at-a-glance which chapters are
   completed vs in-progress vs untouched. */
.reader-chapter-list .chapter-pagecount.chapter-pagecount-done{color:#7ac896}
.reader-chapter-list .chapter-row.current .chapter-pagecount.chapter-pagecount-done{color:#a8e0bc}

/* ── Phase 11f — Offline View UX polish ── */

/* Per-row pin toggle. Phase 11g iteration — sits inline inside
   `.chapter-headline` next to the chapter # and other status tags
   ([current], [unavailable], etc.). Sized to match the visual
   rhythm of those tags but with a slightly heavier border so it
   reads as a button (clickable) rather than a status pill. */
.reader-chapter-list .chapter-row{position:relative}
.reader-chapter-list .chapter-pin-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  width:auto;
  padding:2px 8px;
  background:transparent;
  border:1px solid #5a6172;
  border-radius:4px;
  color:#a8b1c5;
  font-size:10px;
  font-weight:600;
  font-family:inherit;
  line-height:1.4;
  cursor:pointer;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.04em;
  transition:background .12s, border-color .12s, color .12s, opacity .12s;
}
.reader-chapter-list .chapter-pin-btn:hover{background:#2a3040;border-color:#7a8aa8;color:#e6e9f0}
.reader-chapter-list .chapter-pin-btn.is-saved{background:#1f6b3d;border-color:#2a8350;color:#d2f5dd}
.reader-chapter-list .chapter-pin-btn.is-saved:hover{background:#2a8350;border-color:#3aa166}
.reader-chapter-list .chapter-pin-btn.is-saving{
  cursor:wait;
  animation:reader-pin-pulse 1s ease-in-out infinite;
  border-color:#7a8aa8;
}
.reader-chapter-list .chapter-pin-btn:disabled{cursor:wait}
@keyframes reader-pin-pulse{
  0%, 100%{opacity:.55}
  50%{opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .reader-chapter-list .chapter-pin-btn.is-saving{animation:none;opacity:.7}
}

/* Saved-row visual emphasis: green left-border (mirrors the current /
   last-read accents already in place) so the saved state is visible
   without scanning to the icon. */
.reader-chapter-list .chapter-row.is-pinned{border-left-color:#2a8350}

/* The Phase-11f "Save next 10" bulk button was removed per user
   request 2026-04-29 — per-row toggles cover the use case without
   adding header chrome. The .chapter-list-bulk-pin styles are gone
   alongside the JS that injected it. */
.reader-chapter-list .chapter-list-empty{padding:24px 16px;color:#7a8aa8;font-size:13px;text-align:center}

/* ───────── Phase 50c — chapter list as a poster GRID ─────────
   Convert the vertical row list into a poster grid like the offline / read
   modals: each card is the chapter cover (page 0) with a bottom scrim showing
   "Ch. N" + page progress; tap a card to jump there. Pure restyle of the
   existing .chapter-row markup (poster + .chapter-line) — no JS change. The
   380px panel fits 3 columns cleanly on both mobile and desktop. These rules
   come last, so they override the earlier list-row layout. */
.reader-chapter-list .chapter-list-body{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px; padding:10px 12px; align-content:start;
}
/* Card height is reserved with the classic padding-bottom ratio hack
   (content-box so the padding ADDS height) — bulletproof regardless of
   aspect-ratio quirks, grid track sizing, or whether the lazy cover has
   loaded. 150% = 2:3 portrait. The "border" is an inset box-shadow so it
   doesn't affect the box math. */
.reader-chapter-list .chapter-row{
  display:block; position:relative; overflow:hidden;
  box-sizing:content-box;
  width:100%; height:0; padding:0 0 150% 0; gap:0;
  background:#11141c; border:none; border-radius:6px;
  box-shadow:inset 0 0 0 2px #2a3040;
}
.reader-chapter-list .chapter-row:hover{ background:#11141c; box-shadow:inset 0 0 0 2px #3a4258; }
.reader-chapter-list .chapter-row.current,
.reader-chapter-list .chapter-row.current:hover{ background:#11141c; box-shadow:inset 0 0 0 2px #5a7be0; }
.reader-chapter-list .chapter-row.broken{ opacity:.55; }
.reader-chapter-list .chapter-row.upstream-removed,
.reader-chapter-list .chapter-row.upstream-removed:hover{ background:#11141c; box-shadow:inset 0 0 0 2px #7a5020; }
/* Cover fills the reserved card box. */
.reader-chapter-list .chapter-row > .chapter-poster{
  position:absolute; inset:0; width:100%; height:100%; min-height:0;
  object-fit:cover; object-position:top; border-radius:0;
}
.reader-chapter-list .chapter-row > .chapter-poster.chapter-poster-fallback{
  display:flex; align-items:center; justify-content:center; font-size:30px;
}
/* Text → bottom scrim overlay. */
.reader-chapter-list .chapter-row > .chapter-line{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; gap:1px; flex-wrap:nowrap;
  padding:5px 6px 4px;
  background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.reader-chapter-list .chapter-row .chapter-headline{ gap:4px; }
.reader-chapter-list .chapter-row .chapter-num{ font-size:12px; font-weight:700; color:#fff; }
.reader-chapter-list .chapter-row .chapter-pagecount{ font-size:10px; color:#cdd2de; margin:0; }
/* Subtitle + verbose tags don't fit a small card — drop them; the cover +
   "current" border + dimmed-broken state carry the status. Keep the
   "unavailable" badge + retry so broken chapters stay recoverable. */
.reader-chapter-list .chapter-row .chapter-title-row{ display:none; }
.reader-chapter-list .chapter-row .chapter-tag.tag-last,
.reader-chapter-list .chapter-row .chapter-tag.tag-removed{ display:none; }
.reader-chapter-list .chapter-row .chapter-tag{ font-size:9px; padding:1px 5px; }
.reader-chapter-list .chapter-row .chapter-retry-btn{ font-size:9px; padding:1px 5px; }

/* ── Settings panel (gear in reader top-bar) ─────────────────── */
/* Phase 11g iteration — top/left position is computed at open-time
   in manga/settings.js to anchor the panel just below the gear
   button (so the modal lands where the user just clicked, not at a
   far corner of the screen). CSS only owns the size + chrome. */
.reader-settings-panel{position:fixed;background:#fff;border:1px solid #d9dce6;border-radius:10px;padding:0;box-shadow:0 12px 36px rgba(0,0,0,.18);z-index:1000;min-width:280px;font-family:'Inter',sans-serif}
.reader-settings-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eef0f7}
.reader-settings-head h4{margin:0;font-size:14px;font-weight:600;color:#1c2030}
.reader-settings-head .reader-settings-close{background:transparent;border:none;color:#5a6172;font-size:16px;cursor:pointer;padding:2px 6px}
.reader-settings-head .reader-settings-close:hover{color:#1c2030}
.reader-settings-section{border:none;padding:12px 16px;margin:0}
.reader-settings-section legend{font-size:12px;font-weight:600;color:#5a6172;padding:0;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.reader-settings-radio{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:13px;cursor:pointer;border-radius:4px}
.reader-settings-radio:hover{background:#f5f6fa}
.reader-settings-direction{width:100%;padding:7px 9px;border:1px solid #d9dce6;border-radius:5px;font-size:13px;background:#fff;font-family:inherit}
.reader-settings-help{font-size:11px;color:#8a93a6;margin-top:6px;line-height:1.4}
/* Phase 50a — on phones the gear panel becomes a full-width bottom sheet
   (overrides the JS-computed anchor position set inline at open time). */
@media (max-width: 600px){
  .reader-settings-panel{
    top:auto !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important; min-width:0; max-height:75vh; overflow-y:auto;
    border-radius:14px 14px 0 0;
  }
}

/* ── Onboarding modal (first-open Start fresh / Resume / From…) ── */
.reader-onboarding-modal{position:fixed;inset:0;background:rgba(15,18,24,.55);display:flex;align-items:center;justify-content:center;z-index:1100;animation:onboarding-fade-in .15s ease}
@keyframes onboarding-fade-in{from{opacity:0}to{opacity:1}}

.reader-onboarding-card{background:#fff;padding:32px 36px;border-radius:14px;max-width:520px;width:calc(100% - 48px);box-shadow:0 20px 80px rgba(0,0,0,.35);font-family:'Inter',sans-serif}
.reader-onboarding-card h3{margin:0 0 6px;font-size:22px;color:#1c2030}
.reader-onboarding-card > p{margin:0 0 22px;color:#5a6172;font-size:14px}

.reader-onboarding-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.reader-onboarding-actions .reader-btn{background:#2945d6;color:#fff;padding:14px 18px;font-size:14px;text-align:left;font-family:inherit;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:background .15s;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.reader-onboarding-actions .reader-btn:hover{background:#1f36ac}
.reader-onboarding-actions .reader-btn strong{font-weight:600;font-size:15px}
.reader-onboarding-actions .reader-btn small{font-size:12px;opacity:.75;font-weight:400}

.reader-onboarding-from{display:flex;align-items:flex-end;gap:8px;padding-top:20px;border-top:1px solid #eef0f7;flex-wrap:wrap}
.reader-onboarding-from label{flex:1;min-width:200px;font-size:13px;color:#1c2030;font-weight:500;display:block}
.reader-onboarding-from input{display:block;width:100%;padding:9px 11px;margin-top:6px;border:1px solid #d9dce6;border-radius:6px;font-size:14px;font-family:inherit}
.reader-onboarding-from input:focus{outline:2px solid #2945d6;outline-offset:-1px}
.reader-onboarding-from .reader-btn{background:#2945d6;color:#fff;padding:9px 18px;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-family:inherit;font-size:13px;transition:background .15s}
.reader-onboarding-from .reader-btn:hover{background:#1f36ac}
.reader-onboarding-from-error{flex:1 1 100%;color:#c62828;font-size:12px;margin-top:6px}

@media (prefers-reduced-motion: reduce){
  .reader-onboarding-modal{animation:none}
}