/* reader/scroll.css — THE SCROLL template: one quiet column, nothing between
   you and the words. Whisper chrome: a 2px progress bar + a live reading
   meter (hairline · numeric % · minutes left — the konsensus-blog pattern),
   a thin top bar that hides on scroll-down and returns on scroll-up, the TOC
   as a slim side rail on desktop/landscape (razor-thin scrollbar + cracked-
   open fold, standing rule) folding to a centered overlay on phones,
   chapter-end cards as the ONLY interruption, and the audiobook as a floating
   pill bottom-center. The ARC's ascetic sibling — where the Classic frames,
   the Scroll disappears. Consumes ONLY themes.css tokens (spec §A2). */

:root { --rdt-topbar: 48px; --rdt-rail: 248px; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- whisper top bar — thin, translucent, hides on scroll-down ---------- */
.rd-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--rdt-topbar); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0 0.7rem; padding-left: calc(0.7rem + env(safe-area-inset-left));
  padding-right: calc(0.7rem + env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid var(--rd-rule);
  transition: transform 0.25s ease;
}
:root[data-rd-bar='hidden'] .rd-topbar { transform: translateY(-105%); }
/* overlays pin the bar — the reader must always see where the panel came from */
:root[data-rd-rail='open'] .rd-topbar { transform: none; }
/* landscape phone = FULL desktop (standing rule): the bar stays put — unless
   the reader explicitly asked for zen (zen owns the chrome then) */
@media (orientation: landscape) and (max-height: 540px) {
  :root:not([data-rd-zen]) .rd-topbar { transform: none !important; }
}
.rd-topbar-left, .rd-topbar-right { display: flex; align-items: center; gap: 0.2rem; min-width: 0; }
.rd-book { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; padding: 0 0.3rem; }
.rd-book-title {
  font-family: var(--rd-serif); font-style: italic; font-weight: 600; font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.rd-book-author {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 519px) { .rd-book-author { display: none; } }
.rd-iconbtn {
  display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 0.4rem;
  border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ink);
  cursor: pointer; font-family: inherit; font-size: 0.92rem;
}
.rd-iconbtn:hover { background: var(--rd-surface); }
.rd-iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* controls v2: A− A+ live in the visible cluster on every template */

/* ---------- reading progress — 2px whisper line ---------- */
.rd-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.rd-progress span { display: block; height: 100%; width: 0; background: var(--accent); }

/* ---------- the live meter — hairline · numeric % · minutes left (the
   konsensus-blog reading meter, worn as a quiet pill). Docked bottom-left:
   on desktop it reads as the rail's footer, on phones it stands alone,
   balancing the zen pill's corner. Never interactive. ---------- */
.rd-meter {
  position: fixed; left: calc(12px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 48;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--rd-sans); font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid var(--rd-rule); border-radius: 999px; padding: 0.34rem 0.75rem;
  pointer-events: none; transition: opacity 0.35s ease;
}
.rd-meter-bar { width: 56px; height: 2px; border-radius: 1px; background: var(--rd-rule); overflow: hidden; }
.rd-meter-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 1px; }
.rd-meter-pct { color: var(--ink); font-weight: 600; }
.rd-meter-left[hidden] { display: none; }
@media (max-width: 519px) { .rd-meter-left { display: none; } }
/* tiny screens: the pill player owns the bottom edge while listening */
@media (max-width: 767px) {
  body:has(.rd-player:not([hidden])) .rd-meter { opacity: 0; visibility: hidden; }
}

/* ---------- the one column — tight vertical rhythm, measure-clamped ---------- */
.rd-reading {
  padding-top: calc(var(--rdt-topbar) + 4px); min-height: 100vh;
  /* zen recenters the column when the rail exhales (desktop rule below) */
  transition: margin-left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.rd-article {
  max-width: var(--rd-measure); margin: 0 auto;
  padding: clamp(1.3rem, 3.5vw, 2.6rem) clamp(1.1rem, 4vw, 2rem) 4.5rem;
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}
.rd-sec { margin: 0; }

/* chapter head — quieter than the Classic: no drop caps, a hairline instead of
   the accent rule; the words carry the page */
.rd-chapter-head { margin: 0 0 1.6rem; text-align: center; }
.rd-chapter-eyebrow { text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.66rem; color: var(--muted); }
.rd-chapter-title {
  font-family: var(--rd-serif); font-weight: 600; font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1.12; margin: 0.35rem 0 0.5rem; letter-spacing: -0.01em; text-wrap: balance;
}
.rd-chapter-rule { width: 44px; height: 1px; background: var(--rd-rule); margin: 1.3rem auto 0; border: none; }
.rd-chapter-rule::before { content: none; }

/* ---------- chapter-end card — the ONLY interruption (spec §A2), compact:
   the chapter transition is a breath, not a blank page ---------- */
.rd-endcard { margin: 2.3rem 0 2.9rem; text-align: center; font-family: var(--rd-sans); }
.rd-endcard-fleuron { color: var(--muted); font-size: 1rem; letter-spacing: 0.5em; text-indent: 0.5em; }
.rd-endcard-pct {
  margin: 0.7rem 0 0.35rem; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.rd-endcard-next {
  display: inline-block; font-family: var(--rd-serif); font-style: italic; font-size: 1.12rem;
  color: var(--accent); text-decoration: none; padding: 0.35rem 0.9rem;
  border: 1px solid transparent; border-radius: 999px;
  max-width: min(100%, 30ch); text-wrap: balance; line-height: 1.3;
}
.rd-endcard-next:hover { border-color: var(--rd-rule); background: var(--rd-surface); }
.rd-endcard-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-endcard .gate-slot[hidden] { display: none; }

/* ---------- TOC — a slim side rail on desktop/landscape, a centered overlay
   on phones. Desktop base: full-height left rail with the cracked-open fold;
   the top bar + progress whisper + reading column all start after it, so the
   bar's hide-on-scroll leaves a clean standing column. Collapses under the
   same query as the Classic (portrait ≤899px, or ≤639px) — landscape phone =
   FULL desktop (standing rule). ---------- */
.rd-topbar { left: var(--rdt-rail); }
.rd-progress { left: var(--rdt-rail); }
.rd-reading { margin-left: var(--rdt-rail); }
/* the rail is already standing — the Contents toggle earns its place only in
   zen (where the peeked bar is the way back to the TOC) */
:root:not([data-rd-zen]) [data-rd-contents] { display: none; }
.rd-rail {
  --rd-rail-mode: fixed;
  position: fixed; top: 0; bottom: 0; left: 0; width: var(--rdt-rail); z-index: 44;
  background: color-mix(in srgb, var(--ink) 2%, var(--bg));
  border-right: 1px solid var(--rd-rule);
  box-shadow: inset -13px 0 16px -15px color-mix(in srgb, var(--rd-dim) 45%, transparent);
  padding: 0.55rem 0.5rem 3.6rem; padding-left: calc(0.5rem + env(safe-area-inset-left));
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease 0.08s;
  /* razor-thin scrollbar (standing rule) */
  scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.rd-rail:hover, .rd-rail:focus-within { scrollbar-color: color-mix(in srgb, var(--rd-dim) 60%, transparent) transparent; }
.rd-rail::-webkit-scrollbar { width: 12px; background: transparent; }
.rd-rail::-webkit-scrollbar-track, .rd-rail::-webkit-scrollbar-corner { background: transparent; border: 0; }
.rd-rail::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
.rd-rail::-webkit-scrollbar-thumb {
  background-color: transparent; background-clip: padding-box;
  border: 3px solid transparent; border-radius: 999px; min-height: 40px;
}
.rd-rail:hover::-webkit-scrollbar-thumb, .rd-rail:focus-within::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--rd-dim) 60%, transparent);
}
@media (hover: none) {
  .rd-rail { scrollbar-width: auto; scrollbar-color: auto; scrollbar-gutter: auto; }
  .rd-rail::-webkit-scrollbar { width: 0; height: 0; }
}
.rd-rail-head {
  padding: 0.5rem 0.6rem 0.6rem; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted); border-bottom: 1px solid var(--rd-rule); margin-bottom: 0.4rem;
}
.rd-toc-item {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left;
  padding: 0.42rem 0.6rem; border: none; border-radius: 9px; background: transparent;
  color: var(--ink); cursor: pointer; font-family: inherit; font-size: 0.9rem; line-height: 1.25;
}
.rd-toc-item:hover { background: var(--rd-surface); }
.rd-toc-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rd-toc-item.active { background: var(--rd-surface); box-shadow: inset 2px 0 0 var(--accent); }
.rd-toc-num {
  flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--rd-rule);
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; color: var(--muted);
}
.rd-toc-item.active .rd-toc-num { border-color: var(--accent); color: var(--accent); }
.rd-toc-kind-frontmatter .rd-toc-num, .rd-toc-kind-backmatter .rd-toc-num { border: none; }
.rd-toc-label { flex: 1; min-width: 0; }

/* phones / portrait tablets: the rail folds into a full-height left drawer that
   slides out from under the contents button (dismiss scrim behind it) */
@media (max-width: 899px) and (orientation: portrait), (max-width: 639px) {
  .rd-topbar { left: 0; }
  .rd-progress { left: 0; }
  .rd-reading { margin-left: 0; }
  :root:not([data-rd-zen]) [data-rd-contents] { display: inline-grid; }
  .rd-rail {
    --rd-rail-mode: drawer;
    top: 0; bottom: 0; left: 0; right: auto; height: 100%; z-index: 46;
    transform: translateX(-104%); width: min(320px, 86vw); max-height: none;
    background: var(--bg); border: none; border-right: 1px solid var(--rd-rule); border-radius: 0;
    padding: 0.55rem 0.5rem 3.6rem; padding-left: calc(0.5rem + env(safe-area-inset-left));
    box-shadow: 0 14px 40px -16px color-mix(in srgb, var(--rd-dim) 80%, transparent);
    transition: transform 0.22s ease;
  }
  :root[data-rd-rail='open'] .rd-rail { transform: none; }
  :root[data-rd-rail='open'] body::after {
    content: ''; position: fixed; inset: 0; z-index: 45;
    background: color-mix(in srgb, var(--ink) 24%, transparent);
  }
}

/* ---------- Aa panel — deliberately minimal (3 controls + accessibility link) ---------- */
.rd-pop {
  position: fixed; top: calc(var(--rdt-topbar) + 8px); right: 12px; z-index: 70;
  width: min(330px, calc(100vw - 24px)); max-height: 76vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--rd-rule); border-radius: 14px;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 14px 40px -16px color-mix(in srgb, var(--rd-dim) 80%, transparent);
}
.rd-pop[hidden] { display: none; }

/* ---------- empty book ---------- */
.rd-empty { text-align: center; color: var(--muted); padding: 18vh 1rem; font-family: var(--rd-serif); font-style: italic; }

/* ---------- audiobook — floating pill bottom-center, expanding to a card ---------- */
.rd-player {
  left: 50%; right: auto; bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.rd-player[hidden] { display: none; }
.rdp-bar {
  border: 1px solid var(--rd-rule); border-radius: 999px;
  padding: 0.3rem 0.85rem 0.3rem 0.45rem;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 12px 34px -14px color-mix(in srgb, var(--rd-dim) 85%, transparent);
  gap: 0.4rem;
}
/* cover dot · controls · time-left — the pill reading order */
.rdp-bar::before {
  content: ''; order: 0; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--accent) 55%, var(--bg)), var(--accent));
  border: 1px solid var(--rd-rule);
}
.rdp-ctls { order: 1; }
.rdp-info { order: 2; flex: none; }
/* collapsed pill: time-left only — the chapter title lives in the expanded card */
.rd-player:not([data-rd-expanded]) .rdp-ch { display: none; }
/* the whole-book scrubber shows above the pill on every template (grab it to jump
   anywhere in the book); the cover dot keeps the pill's identity */
.rdp-line { display: none; }
/* expanded: card above, then the scrubber, then the pill (flex column order) */
.rdp-sheet {
  position: static; order: -2; margin-bottom: 0;
  width: min(420px, calc(100vw - 24px));
}
.rdp-scrub { order: -1; width: min(380px, calc(100vw - 48px)); margin: 0; }
.rd-player[data-rd-expanded] .rdp-info { flex: 1; min-width: 0; }

/* ---------- zen — distraction-free reading (the Scroll's signature moment) ----------
   Entering zen the chrome EXHALES, in order: the top bar drifts up and
   dissolves, the progress whisper fades a beat later, the column takes one
   slow settling breath, and the return pill surfaces last — an orchestrated
   exit, never a display:none blink. prefers-reduced-motion collapses every
   step to instant (themes.css global kill). Hovering the top edge (or
   tabbing into the bar) peeks the UI back; ESC or the pill returns fully.
   scroll.js only flips :root[data-rd-zen] / [data-rd-zenpeek]. */
:root[data-rd-zen] .rd-topbar {
  transform: translateY(-105%); opacity: 0; pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease 0.08s;
}
:root[data-rd-zen] .rd-progress { opacity: 0; transition: opacity 0.5s ease 0.18s; }
/* the live meter fades with the progress whisper, returns with the peek */
:root[data-rd-zen] .rd-meter { opacity: 0; transition: opacity 0.5s ease 0.18s; }
:root[data-rd-zen][data-rd-zenpeek] .rd-meter,
:root[data-rd-zen][data-rd-rail='open'] .rd-meter { opacity: 1; transition-delay: 0s; }
/* desktop/landscape: the TOC rail exhales left with the bar and the column
   takes the whole stage — gliding to true center on the same breath; the
   peeked bar's Contents button (returned in zen) slides the rail back in as
   an overlay. Scoped to the rail-visible media state so the phone overlay's
   own choreography stands untouched. */
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) {
  :root[data-rd-zen] .rd-rail { transform: translateX(-104%); opacity: 0; pointer-events: none; }
  :root[data-rd-zen][data-rd-rail='open'] .rd-rail { transform: none; opacity: 1; pointer-events: auto; }
  :root[data-rd-zen] .rd-reading { margin-left: 0; }
  :root[data-rd-zen] .rd-topbar { left: 0; }
  :root[data-rd-zen] .rd-progress { left: 0; }
}
/* an active listening session stays reachable but recedes to a whisper */
:root[data-rd-zen] .rd-player { opacity: 0.35; transition: opacity 0.45s ease 0.25s; }
:root[data-rd-zen] .rd-player:hover, :root[data-rd-zen] .rd-player:focus-within { opacity: 1; transition-delay: 0s; }
:root[data-rd-zen] .rd-article { animation: rd-zen-settle 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes rd-zen-settle { from { transform: translateY(9px); } to { transform: none; } }
/* the peek: a 28px top-edge zone re-reveals the UI while hovered */
.rd-zenpeek { display: none; }
:root[data-rd-zen] .rd-zenpeek { display: block; position: fixed; top: 0; left: 0; right: 0; height: 28px; z-index: 66; }
:root[data-rd-zen][data-rd-zenpeek] .rd-topbar,
:root[data-rd-zen] .rd-topbar:hover,
:root[data-rd-zen][data-rd-rail='open'] .rd-topbar {
  transform: none; opacity: 1; pointer-events: auto; transition-delay: 0s, 0s;
}
:root[data-rd-zen][data-rd-zenpeek] .rd-progress,
:root[data-rd-zen][data-rd-rail='open'] .rd-progress { opacity: 1; transition-delay: 0s; }
/* the return pill — quiet corner, surfaces after the chrome has left */
.rd-zenexit {
  position: fixed; right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 66;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--rd-sans); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--rd-rule); border-radius: 999px; padding: 0.42rem 0.85rem;
  cursor: pointer; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s, color 0.2s ease;
}
:root[data-rd-zen] .rd-zenexit { opacity: 0.6; visibility: visible; transform: none; transition-delay: 0.55s; }
:root[data-rd-zen] .rd-zenexit:hover, :root[data-rd-zen] .rd-zenexit:focus-visible { opacity: 1; color: var(--ink); transition-delay: 0s; }
.rd-zenexit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-zenexit svg { flex: none; }
@media (max-width: 419px) { .rd-zenexit-label { display: none; } }

/* ---------- responsive — the column is inherently one-size; tighten small screens ---------- */
@media (max-width: 639px) {
  .rd-article { padding-left: 1rem; padding-right: 1rem; }
}