/* reader/serial.css — THE SERIAL template: chapters that drop like episodes.
   Magazine opener band per chapter (accent tint, oversized Literata numeral —
   the variable font's opsz axis gives the display cut free), a 44px sticky
   micro-header that NEVER hides (title · chapter n/N · thin chapter-progress
   line), end-of-episode cards with a book-progress ring, an episode-list TOC
   overlay with per-chapter progress, a right meta rail on wide screens and
   landscape phones (standing rule: landscape phone = FULL desktop), and the
   audiobook collapsing into the micro-header as a strip while playing.
   Consumes ONLY themes.css tokens (spec §A3). */

:root { --rdt-topbar: 44px; --rdt-meta: 264px; --rdt-bleed: 0px; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.rd-body { overflow-x: clip; }

/* ---------- micro-header — whisper-thin, never hides (serial readers navigate constantly) ---------- */
.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.6rem; padding-left: calc(0.6rem + env(safe-area-inset-left));
  padding-right: calc(0.6rem + env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid var(--rd-rule);
}
.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.92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.rd-book-author { display: none; }              /* 44px carries title · n/N · progress, nothing else */
.rd-iconbtn {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 0.4rem;
  border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--ink);
  cursor: pointer; font-family: inherit; font-size: 0.9rem;
}
.rd-iconbtn:hover { background: var(--rd-surface); }
.rd-iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* controls v2: the 44px micro-header carries the full six-icon cluster on every
   width; the icons are compact and the book title yields (truncates) so the
   cluster + chapter number fit even a 360px phone. */
.rd-topbar .rd-iconbtn { min-width: 30px; height: 32px; padding: 0 0.2rem; }
.rd-mh-chn {
  font-size: 0.68rem; letter-spacing: 0.12em; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; padding: 0 0.5rem 0 0.4rem;
  border-right: 1px solid var(--rd-rule); margin-right: 0.3rem;
}
.rd-mh-chn:empty { border-right: none; margin-right: 0; padding: 0; }
/* thin chapter-progress line painted along the micro-header's bottom edge */
.rd-mh-prog {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  pointer-events: none; background: transparent;
}
.rd-mh-prog span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, var(--bg)), var(--accent));
}
/* the whole-page progress bar is the Scroll's device — the Serial's header line is per-chapter */
.rd-progress { display: none; }

/* ---------- the column (measure user-adjustable 34/39/44 via the shared controls) ---------- */
.rd-reading { padding-top: var(--rdt-topbar); min-height: 100vh; }
.rd-article {
  max-width: var(--rd-measure); margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2rem) 6rem;
  padding-bottom: calc(6rem + env(safe-area-inset-bottom));
}
.rd-sec { margin: 0; }

/* ---------- the episode title-plate — the Serial's SIGNATURE ---------- */
/* An art-directed magazine opener, not a gray band: full-bleed tinted field
   (--rdt-bleed re-centers it beside the meta rail), content LEFT-aligned on
   the prose column, and the oversized Literata numeral set as a cropped
   OUTLINE figure bleeding off the plate's lower right. Each episode walks one
   step along a small hue arc around the theme accent (SSR stamps data-ep-tint
   0–5); browsers without relative color simply keep the plain accent. */
.rd-opener { margin: 0 calc(50% - 50vw + var(--rdt-bleed)) 2.6rem; }
.rd-opener-band {
  --ep-accent: var(--accent);
  position: relative; overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--ep-accent) 26%, var(--rd-rule));
  background:
    radial-gradient(46rem 18rem at 82% 112%, color-mix(in srgb, var(--ep-accent) 11%, transparent), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ep-accent) 14%, var(--bg)),
      color-mix(in srgb, var(--ep-accent) 6%, var(--bg)) 74%,
      var(--bg));
  padding: calc(var(--rdt-topbar) + clamp(1.9rem, 6vh, 3.4rem)) clamp(1.1rem, 4vw, 2rem) clamp(1.7rem, 5vh, 2.6rem);
}
@supports (color: oklch(from red l c h)) {
  .rd-opener-band { --ep-accent: oklch(from var(--accent) l c calc(h + var(--ep-shift, 0deg))); }
}
.rd-opener[data-ep-tint='0'] { --ep-shift: -24deg; }
.rd-opener[data-ep-tint='1'] { --ep-shift: -12deg; }
.rd-opener[data-ep-tint='2'] { --ep-shift: 0deg; }
.rd-opener[data-ep-tint='3'] { --ep-shift: 10deg; }
.rd-opener[data-ep-tint='4'] { --ep-shift: 20deg; }
.rd-opener[data-ep-tint='5'] { --ep-shift: 30deg; }
/* overflow:clip on the body (the numeral's positioned containing block) makes
   the cropped numeral BULLETPROOF: it is clipped by its own containing block on
   every engine, so it can never contribute a single px to document width and
   drag the fixed bars wide. The band keeps its own overflow:hidden for the tint
   gradients. body.rd-body's overflow-x:clip is the outer belt for the full-bleed. */
.rd-opener-body { position: relative; overflow: clip; max-width: var(--rd-measure); margin: 0 auto; text-align: left; }
.rd-opener-num {
  position: absolute; right: -0.04em; bottom: -0.42em; z-index: 0;
  font-family: var(--rd-font-book); font-optical-sizing: auto; font-weight: 260;
  font-size: clamp(6.5rem, 21vw, 12.5rem); line-height: 1;
  color: color-mix(in srgb, var(--ep-accent) 26%, transparent);
  font-variant-numeric: lining-nums; pointer-events: none; user-select: none; -webkit-user-select: none;
}
/* outline cut where stroking is supported — the engraved magazine figure */
@supports (-webkit-text-stroke: 1px red) {
  .rd-opener-num {
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ep-accent) 46%, transparent);
  }
}
.rd-opener-eyebrow, .rd-opener-title, .rd-opener-meta, .rd-opener-listen { position: relative; z-index: 1; }
.rd-opener-eyebrow {
  text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 0.66rem; color: color-mix(in srgb, var(--ep-accent) 62%, var(--ink));
}
.rd-opener-title {
  font-family: var(--rd-serif); font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(1.75rem, 5.4vw, 2.7rem); line-height: 1.08; text-wrap: balance;
  max-width: 20ch; margin: 0.32em 0 0; color: var(--ink);
}
.rd-opener-meta {
  display: flex; justify-content: flex-start; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.05rem;
}
.rd-badge {
  font-family: var(--rd-sans); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid color-mix(in srgb, var(--ep-accent, var(--accent)) 30%, var(--rd-rule));
  border-radius: 999px; padding: 0.28rem 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rd-badge[hidden] { display: none; }
.rd-opener-listen {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem;
  font-family: var(--rd-sans); font-size: 0.85rem; font-weight: 600; color: var(--bg);
  background: var(--ep-accent, var(--accent)); border: 1px solid transparent; border-radius: 999px;
  padding: 0.55rem 1.25rem; cursor: pointer; white-space: nowrap;
}
.rd-opener-listen::before {
  content: ''; width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor;
}
.rd-opener-listen:hover { background: color-mix(in srgb, var(--ep-accent, var(--accent)) 86%, var(--ink)); }
.rd-opener-listen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-opener-listen[hidden] { display: none; }
/* frontmatter/backmatter: a quiet plate — no numeral, calmer tint, tighter */
.rd-opener[data-ep-plain] .rd-opener-band {
  border-bottom-color: var(--rd-rule);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--bg)), var(--bg));
  padding: calc(var(--rdt-topbar) + 1.6rem) clamp(1.1rem, 4vw, 2rem) 1.4rem;
}
.rd-opener[data-ep-plain] .rd-opener-title { font-size: clamp(1.4rem, 4vw, 1.9rem); }

/* ---------- end-of-episode card — compact, one action ---------- */
.rd-epcard {
  margin: 2.6rem 0 3.8rem; text-align: center; font-family: var(--rd-sans);
  display: grid; justify-items: center; gap: 0.7rem;
}
.rd-ring { display: block; }
.rd-ring-track { fill: none; stroke: var(--rd-rule); stroke-width: 4; }
.rd-ring-fill { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.rd-ring-pct {
  fill: var(--muted); font-family: var(--rd-sans); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* the ring rides INSIDE the link — the whole card is the one tap target */
.rd-epcard-next {
  display: inline-flex; align-items: center; gap: 0.9rem; text-decoration: none;
  padding: 0.6rem 1.35rem 0.6rem 0.7rem;
  border: 1px solid var(--rd-rule); border-radius: 18px; background: var(--rd-surface);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.rd-epcard-next:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--rd-dim) 80%, transparent);
}
.rd-epcard-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-epcard-next .rd-ring { width: 48px; height: 48px; flex: none; }
.rd-epcard-next-stack { display: grid; gap: 0.18rem; text-align: left; min-width: 0; }
.rd-epcard-next-label {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.rd-epcard-next-title {
  font-family: var(--rd-serif); font-style: italic; font-weight: 600; font-size: 1.14rem;
  line-height: 1.25; color: var(--accent); text-wrap: balance; max-width: 24ch;
}
.rd-epcard-fin {
  margin: 0; font-family: var(--rd-serif); font-style: italic; font-size: 1.15rem; color: var(--muted);
}
/* Continue-listening surfaces ONLY while the player is open — the reader taps it;
   the end-of-chapter sleep stop is never overridden by autoplay */
.rd-epcard-listen { display: none; }
:root[data-rd-player-open] .rd-epcard-listen:not([hidden]) {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--rd-sans); font-size: 0.78rem; font-weight: 600; color: var(--accent);
  background: transparent; border: 1px solid var(--rd-rule); border-radius: 999px;
  padding: 0.4rem 1rem; cursor: pointer;
}
.rd-epcard-listen:hover { border-color: var(--accent); }
.rd-epcard-listen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-epcard-note {
  max-width: 34rem; font-family: var(--rd-serif); font-style: italic; font-size: 0.95rem;
  color: var(--muted); line-height: 1.55;
}
.rd-epcard-note[hidden], .rd-epcard .gate-slot[hidden] { display: none; }

/* ---------- TOC — a panel that SPAWNS UNDER the contents button (reader-core.js
   anchors + viewport-clamps it via --rd-rail-mode:anchor); a full-height left
   drawer on portrait phones. The centered values below are the no-JS fallback. ---------- */
.rd-rail {
  --rd-rail-mode: anchor;
  position: fixed; top: 8vh; left: 50%; z-index: 46;
  transform: translateX(-50%) translateY(6px);
  width: min(460px, calc(100vw - 32px)); max-height: 76vh;
  background: var(--bg); border: 1px solid var(--rd-rule); border-radius: 16px;
  padding: 0.5rem 0.5rem 0.9rem;
  box-shadow: 0 24px 70px -24px color-mix(in srgb, var(--rd-dim) 90%, transparent);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  /* razor-thin scrollbar (standing rule) */
  scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent;
}
:root[data-rd-rail='open'] .rd-rail { opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(-50%); }
/* portrait phone: full-height left drawer with a dismiss scrim */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait) {
  .rd-rail {
    --rd-rail-mode: drawer;
    top: 0; bottom: 0; left: 0; right: auto; height: 100%;
    transform: translateX(-104%); width: min(320px, 86vw); max-height: none;
    border-radius: 0; border: none; border-right: 1px solid var(--rd-rule);
    transition: transform 0.22s ease, opacity 0.18s ease, visibility 0.18s;
  }
  :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);
  }
}
.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: grid; grid-template-columns: 24px 1fr auto; align-items: center;
  column-gap: 0.55rem; row-gap: 0.3rem; width: 100%; text-align: left;
  padding: 0.5rem 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 { min-width: 0; }
/* per-episode progress + read/listened checks (serial.js appends these) */
.rd-toc-done { display: inline-flex; gap: 0.25rem; align-items: center; color: var(--accent); }
.rd-toc-done svg { display: block; }
.rd-toc-done [hidden] { display: none; }
.rd-toc-prog {
  grid-column: 2 / -1; display: block; height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden;
}
.rd-toc-prog i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; }

/* ---------- right meta rail — ≥1024px + landscape phone (= full desktop, standing rule) ---------- */
.rd-meta {
  display: none; position: fixed; top: var(--rdt-topbar); right: 0; bottom: 0; z-index: 40;
  width: var(--rdt-meta);
  background: color-mix(in srgb, var(--ink) 3%, var(--bg));
  /* cracked-open fold, mirrored for a right-hand rail (standing rule) */
  border-left: 1px solid var(--rd-rule);
  box-shadow: inset 13px 0 16px -15px color-mix(in srgb, var(--rd-dim) 45%, transparent);
  padding: 0.8rem 0.7rem 3rem 1rem;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.rd-meta:hover, .rd-meta:focus-within { scrollbar-color: color-mix(in srgb, var(--rd-dim) 60%, transparent) transparent; }
.rd-meta::-webkit-scrollbar { width: 12px; background: transparent; }
.rd-meta::-webkit-scrollbar-track, .rd-meta::-webkit-scrollbar-corner { background: transparent; border: 0; }
.rd-meta::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
.rd-meta::-webkit-scrollbar-thumb {
  background-color: transparent; background-clip: padding-box;
  border: 3px solid transparent; border-radius: 999px; min-height: 40px;
}
.rd-meta:hover::-webkit-scrollbar-thumb, .rd-meta:focus-within::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--rd-dim) 60%, transparent);
}
.rd-meta-head {
  padding: 0.2rem 0.4rem 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-meta-list { display: grid; gap: 2px; }
/* rail typography, disciplined: a notch smaller than the overlay, finer chips
   and hairline progress — the rail is peripheral vision, not a second page */
.rd-meta .rd-toc-item { font-size: 0.85rem; padding: 0.42rem 0.5rem; column-gap: 0.5rem; }
.rd-meta .rd-toc-num { width: 21px; height: 21px; font-size: 0.66rem; border-radius: 5px; }
.rd-meta .rd-toc-prog { height: 2px; }
.rd-meta-about, .rd-meta-buy { margin-top: 1.2rem; }
.rd-meta-about[hidden], .rd-meta-buy[hidden] { display: none; }
@media (min-width: 1024px), (orientation: landscape) and (max-height: 540px) {
  .rd-meta { display: block; }
  .rd-reading { margin-right: var(--rdt-meta); }
  body.rd-body { --rdt-bleed: calc(var(--rdt-meta) / 2); }
  /* the overlay TOC is redundant beside the rail, but stays reachable (contents button) */
}
@media (hover: none) {
  .rd-meta { scrollbar-width: auto; scrollbar-color: auto; scrollbar-gutter: auto; }
  .rd-meta::-webkit-scrollbar { width: 0; height: 0; }
}

/* controls v2 retired the floating prefs fab + the More panel — every control
   lives in the visible micro-header cluster now. */
.rd-pop {
  position: fixed; right: calc(14px + env(safe-area-inset-right));
  bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 70;
  width: min(340px, calc(100vw - 24px)); max-height: 72vh; 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; }
@media (min-width: 1024px), (orientation: landscape) and (max-height: 540px) {
  .rd-pop { right: calc(var(--rdt-meta) + 14px); }
}

/* ---------- resume chip ---------- */
.rd-resume {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 64;
  display: flex; align-items: center; gap: 0.1rem;
  background: color-mix(in srgb, var(--bg) 94%, 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.15rem 0.3rem 0.15rem 0.2rem;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--rd-dim) 85%, transparent);
}
.rd-resume[hidden] { display: none; }
.rd-resume-go {
  font-family: var(--rd-serif); font-style: italic; font-size: 0.88rem; color: var(--accent);
  background: transparent; border: none; cursor: pointer; padding: 0.4rem 0.5rem 0.4rem 0.8rem;
  white-space: nowrap;
}
.rd-resume-x {
  font-family: var(--rd-sans); font-size: 1rem; color: var(--muted);
  background: transparent; border: none; cursor: pointer; padding: 0.3rem 0.55rem; border-radius: 50%;
}
.rd-resume-x:hover, .rd-resume-go:hover { color: var(--ink); }
.rd-resume-go:focus-visible, .rd-resume-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 999px; }

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

/* ---------- audiobook — playing state collapses into the micro-header strip ---------- */
.rd-player {
  top: var(--rdt-topbar); bottom: auto; z-index: 49;
  display: flex; flex-direction: column;
}
.rd-player[hidden] { display: none; }
.rdp-bar {
  order: 1; border-top: none; border-bottom: 1px solid var(--rd-rule);
  padding: 0.15rem 0.6rem; min-height: 40px;
  padding-left: calc(0.6rem + env(safe-area-inset-left));
  padding-right: calc(0.6rem + env(safe-area-inset-right));
}
/* the strip: play/pause · −15/+30 · time left — the chapter title already sits
   in the micro-header, and the scrubber below IS the chapter progress */
.rdp-ch { display: none; }
.rdp-btn { min-width: 36px; height: 36px; }
.rdp-scrub { order: 2; top: -6px; }
/* the strip's scrubber IS the chapter-progress line (Overcast pattern) — keep it
   visible in mini, and drop the shared hairline that would double it */
.rd-player:not([data-rd-expanded]) .rdp-scrub { display: block; }
.rdp-line { display: none; }
.rdp-sheet {
  position: fixed; top: calc(var(--rdt-topbar) + 46px); bottom: auto; right: 10px; margin-bottom: 0;
}
/* the strip pushes the page down instead of padding the bottom */
:root[data-rd-player-open] body.rd-tpl-serial { padding-bottom: 0; }
:root[data-rd-player-open] body.rd-tpl-serial .rd-reading { padding-top: calc(var(--rdt-topbar) + 48px); }
:root[data-rd-player-open] body.rd-tpl-serial .rd-meta { top: calc(var(--rdt-topbar) + 46px); }

/* ---------- responsive ---------- */
@media (max-width: 639px) {
  .rd-article { padding-left: 1rem; padding-right: 1rem; }
  .rd-mh-chn { padding: 0 0.2rem; }
}