/* Read & Reflow — tool styles. Tokens only (light + dark inherit from the theme).
   Motion: global reduced-motion gate in main.css; keyframes (kpRise, menuIn,
   kpFadeDown, editorOverlayIn/Out, editorBoxIn/Out) reused from the vocabulary,
   never invented. The shell mirrors .outline-overlay / .outline-editor. */

/* ── Scanned-PDF notice (mirrors .outline-notice; entrance rides .kp-enter) ── */
.read-notice { text-align: center; padding: 28px 24px; }
.read-notice h3 { margin: 0 0 8px; color: var(--text); }
.read-notice p { margin: 0 auto 8px; max-width: 54ch; color: var(--text-soft); line-height: 1.5; }
.read-notice p a { color: var(--primary); font-weight: 600; }
.read-notice-hint { color: var(--text-mute); font-size: .82rem; font-variant-numeric: tabular-nums; }
.read-notice-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

/* ── View-first "Opening…" veil (OS open-with): give the otherwise-empty card a
      tall, centered loading area while the reader mounts, so nothing flashes. ── */
.card.read-opening { min-height: 60vh; }

/* ── Lazy "Reading" build (a view-first open defers reflow until first asked) ── */
.read-lazy { padding: 40px 24px; text-align: center; color: var(--text-mute); font-size: .9rem; }
.read-lazy-notice { padding: 32px 24px; text-align: center; }
.read-lazy-notice p { margin: 0 auto; max-width: 52ch; color: var(--text-soft); line-height: 1.5; }
.read-lazy-notice a { color: var(--primary); font-weight: 600; }

/* ══ Full-screen reader shell (the canonical editor family overlay) ══ */
.read-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 10, 16, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  animation: editorOverlayIn .2s ease;
}
.read-editor {
  /* Full-window edge-to-edge — no max-width cap, no card chrome. */
  background: var(--bg-elev);
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  box-shadow: none;
  animation: editorBoxIn .32s cubic-bezier(.2, .7, .3, 1);
}
.read-overlay.closing { animation: editorOverlayOut .2s ease forwards; pointer-events: none; }
.read-overlay.closing .read-editor { animation: editorBoxOut .2s ease forwards; }
@media (prefers-reduced-motion: reduce) {
  .read-overlay, .read-overlay.closing,
  .read-editor, .read-overlay.closing .read-editor { animation: none; }
}

/* ── Toolbar (single row; mirrors .outline-tb-meta) ── */
.read-tb {
  display: flex;
  align-items: center;
  gap: 6px 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
/* title + progress share one baseline row so the info block is a single line tall
   (was stacked, which cost a whole extra row of chrome — precious on phones).
   margin-right:auto pushes the tools + Close to the right edge (Close is a direct
   child of .read-tb now, so it can sit on the title row on mobile — see below). */
.read-tb-info { display: flex; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; margin-right: auto; }
.read-tb-info strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.read-progress { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.read-tb-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.read-tb-tools .btn { display: inline-flex; align-items: center; gap: 6px; }
/* "⋯ More" overflow is phone-only: desktop has room for Print + Save inline. */
.read-more { display: none; }
.read-more-btn { padding: 5px 7px; }
/* "Use a tool" shows its full label on desktop; the leading grid glyph only appears
   when the label is collapsed on phones (see the mobile block). */
.read-tb .continue-more-ico { display: none; }
.read-size { display: inline-flex; gap: 2px; align-items: center; }
.read-tools-reflow, .read-tools-pdf { display: inline-flex; align-items: center; gap: 8px; }

/* Reading ⇄ Page segmented toggle */
.read-viewtoggle {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.read-vt-btn {
  appearance: none;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.read-vt-btn:hover { color: var(--text); }
.read-vt-btn.rv-on { background: var(--bg-elev); color: var(--primary); box-shadow: var(--shadow-sm); }
.read-vt-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* PDF-view pager */
.read-pager { display: inline-flex; align-items: center; gap: 4px; }
.read-pager-lbl { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 4.5em; text-align: center; }
.read-pager-input {
  width: 2.4em;
  appearance: none;
  -moz-appearance: textfield;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 2px 3px;
  transition: border-color .15s, box-shadow .15s;
}
.read-pager-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 116, 144, .15); }
.read-pager .btn[disabled] { opacity: .4; cursor: default; }
.read-tb-tools [data-act="fit"] { min-width: 3.6em; }

/* ── Reading surface ── */
.read-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;   /* pinch inside the reader means "text size", not zoom */
  background: var(--bg);
  position: relative;
}
.read-article {
  max-width: 65ch;
  margin: 0 auto;
  padding: 28px 22px 90px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  animation: kpRise .4s cubic-bezier(.2, .7, .3, 1);
  overflow-wrap: break-word;
}
.read-article.read-serif { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; }
/* measure presets (the toolbar Narrow/Cozy/Wide cycle) — all within the readable
   45–90ch band; the default 65ch above is "cozy". ch is font-relative, so the line
   always holds the same character count at any text size — that's deliberate. */
.read-article.read-measure-narrow { max-width: 56ch; }
.read-article.read-measure-wide { max-width: 78ch; }
.read-p { margin: 0 0 1em; }
/* inline emphasis carried over from the PDF's own fonts */
.read-article strong { font-weight: 700; }
.read-article em { font-style: italic; }
.read-h { line-height: 1.25; margin: 1.5em 0 .55em; clear: both; }
.read-h1 { font-size: 1.5em; }
.read-h2 { font-size: 1.3em; }
.read-h3 { font-size: 1.15em; }
.read-h4 { font-size: 1.02em; }
.read-list { margin: 0 0 1em; padding-left: 1.4em; }
.read-list li { margin: 0 0 .4em; }
.read-panchor { display: inline-block; width: 0; height: 0; overflow: hidden; }

/* Find highlights: every match gets a soft amber wash; the current one is solid */
.read-find-hit { background: rgba(250, 204, 21, .42); color: inherit; border-radius: 2px; }
.read-find-current {
  background: #f59e0b;
  color: #1a1205;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .55);
  border-radius: 2px;
}

/* figures: narrow images float so text wraps around them; wide ones go full measure */
.read-fig { margin: 6px 0 12px; }
.read-fig img { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--border); }
.read-fig-left { float: left; max-width: 46%; margin: 4px 20px 10px 0; }
.read-fig-right { float: right; max-width: 46%; margin: 4px 0 10px 20px; }
.read-fig-wide { clear: both; margin: 18px 0; }

/* ── Detected tables: scroll inline, tap to enlarge ── */
.read-table-wrap {
  clear: both;
  position: relative;
  margin: 14px 0 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  cursor: zoom-in;
  transition: border-color .15s, box-shadow .15s;
}
.read-table-wrap:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.read-table-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.read-table {
  border-collapse: collapse;
  width: 100%;
  font-size: .9em;
  font-variant-numeric: tabular-nums;
}
.read-table th, .read-table td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.read-table th { font-weight: 700; background: var(--bg-soft, rgba(127,127,127,.06)); }
.read-table-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: sticky;
  left: 0;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-mute);
  border-top: 1px dashed var(--border);
}
.read-table-hint svg { flex-shrink: 0; }

/* full-screen enlarge modal (modalIn / modalOut, gated for reduced motion) */
.read-tablemodal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 3vw;
  background: rgba(15, 23, 42, .55);
  animation: editorOverlayIn .16s ease-out;
}
.read-tablemodal-card {
  display: flex;
  flex-direction: column;
  max-width: 96vw;
  max-height: 92vh;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalIn .18s ease-out;
}
.read-tablemodal.closing { animation: editorOverlayOut .16s ease-in forwards; }
.read-tablemodal.closing .read-tablemodal-card { animation: modalOut .14s ease-in forwards; }
.read-tablemodal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid var(--border);
}
.read-tablemodal-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute); }
.read-tablemodal-scroll { overflow: auto; -webkit-overflow-scrolling: touch; padding: 4px; }
.read-tablemodal-scroll .read-table { font-size: 1em; }
.read-tablemodal-scroll .read-table th, .read-tablemodal-scroll .read-table td { padding: 8px 14px; }
@media (prefers-reduced-motion: reduce) {
  .read-tablemodal, .read-tablemodal.closing,
  .read-tablemodal-card, .read-tablemodal.closing .read-tablemodal-card { animation: none; }
}

/* page-boundary gutter mark — quiet divider with the original page number */
.read-pagemark {
  display: flex;
  align-items: center;
  gap: 10px;
  clear: both;
  margin: 18px 0;
  color: var(--text-mute);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.read-pagemark::before, .read-pagemark::after { content: ''; flex: 1; border-top: 1px solid var(--border); opacity: .7; }

.read-footnote {
  clear: both;
  font-size: .82em;
  color: var(--text-soft);
  border-top: 1px solid var(--border);
  margin: 0 0 1em;
  padding-top: .5em;
}

/* ── Contents drawer (menuIn entrance / kpFadeDown exit) ── */
.read-toc {
  position: absolute;
  top: 58px;
  right: 12px;
  bottom: 12px;
  width: min(330px, 86vw);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
  animation: menuIn .18s cubic-bezier(.2, .7, .3, 1);
}
.read-toc.closing { animation: kpFadeDown .18s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .read-toc, .read-toc.closing { animation: none; } }
.read-toc-hd {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.read-toc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.read-toc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 7px 10px 7px calc(10px + (var(--lvl, 1) - 1) * 14px);
  transition: background-color .15s, box-shadow .15s;
}
.read-toc-row:hover { background: var(--bg-soft); }
.read-toc-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.read-toc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.read-toc-pg { color: var(--text-mute); font-size: 11px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.read-toc-empty { padding: 18px 14px; color: var(--text-soft); font-size: 13px; }

/* ── Find bar (slides in under the toolbar; WAAPI fade from the shell) ── */
.read-findbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.read-findbar-ico { color: var(--text-mute); flex-shrink: 0; }
.read-find-input {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 6px 10px;
  transition: border-color .15s, box-shadow .15s;
}
.read-find-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 116, 144, .15); }
.read-find-count { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 4em; text-align: right; }
.read-find-count.read-find-none { color: var(--danger, #dc2626); }
.read-find-nav { display: inline-flex; gap: 2px; }

/* ── Workspace find bar (ws-findbar) ─────────────────────────────────────── */
.ws-findbar { flex-shrink: 0; }
.ws-findbar[hidden] { display: none; }
/* Animation is WAAPI in read-pdf-find.js, gated by prefers-reduced-motion. */

/* ── Actual-PDF view (the Page toggle target) ── */
.read-body[hidden], .read-pdf[hidden] { display: none; }
.read-pdf {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: none;   /* we own touch: pinch zooms the page only, never the site viewport */
  background: var(--bg);
  background-image: linear-gradient(rgba(120, 124, 134, .10), rgba(120, 124, 134, .10));
  position: relative;
  cursor: grab;
  /* Flex column with `align-items: safe center` centers the page stack horizontally while
     it fits, but falls back to start (left) alignment once a zoomed page is wider than the
     viewport — so the horizontal overflow stays REACHABLE by scroll. A plain block scroller
     (or `margin: 0 auto` on the stack) instead center-clips the overflow with equal negative
     margins, making the left side unscrollable and snapping the page back to center on
     pinch-release ("the page moves around and doesn't stay where I leave it"). */
  display: flex;
  flex-direction: column;
  align-items: safe center;
}
.read-pdf:focus { outline: none; }   /* it holds keyboard focus for ←/→ nav; the pages are the cue */
.read-pdf.read-pdf-panning { cursor: grabbing; user-select: none; }
.read-pdf-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;            /* page-gap; viewer math is rect-based so any value is fine */
  padding: 16px;
  /* The scroller (.read-pdf) is a flex column with `align-items: safe center`, so the
     stack is centered while it fits and left-aligned (scroll-reachable) once a zoomed
     page overflows the width — the stack itself just shrink-wraps its widest cell. */
  animation: kpRise .4s cubic-bezier(.2, .7, .3, 1);
}
.read-pdf-page {
  position: relative;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 14px rgba(8, 10, 16, .22);
  /* A zoom resizes every cell via inline width/height; that resize MUST be instant so the
     pinch-commit can read the true post-zoom geometry in the same frame and anchor the
     focal point. The reduced-motion reset (`*{transition-duration:.01ms!important}`) would
     otherwise put a tiny transition on width/height — long enough that the commit measures
     the OLD size and mis-places the page (it snaps a frame later). transition-property:none
     isn't overridden by that !important duration, so this wins. The crisp re-render, not a
     size tween, is what makes the zoom feel smooth. */
  transition: none;
}
.read-pdf-canvas { display: block; border-radius: 2px; position: relative; z-index: 0; }
/* Text layer: transparent selectable spans over the canvas. */
.read-pdf-textlayer {
  position: absolute; inset: 0; overflow: hidden; line-height: 1;
  z-index: 1; opacity: 1; mix-blend-mode: normal; user-select: text;
  pointer-events: none;
}
.read-pdf-textlayer > span {
  position: absolute; white-space: pre; transform-origin: 0 0;
  color: transparent; cursor: text; pointer-events: auto;
}
.read-pdf-textlayer ::selection { background: rgba(14, 116, 144, .35); }
/* pdf.js end-of-content catch (see read-pdf-text.js bindSelectionCatch). Normally a
   zero-height sliver at the very bottom (inset:100% 0 0), behind the spans (z-index:-1).
   pointer-events:auto so it participates in selection hit-testing — like the spans, it
   re-enables itself inside the pointer-events:none layer. While selecting, .active drops
   its top to the click point so the gaps below resolve to following text, not an earlier
   span. The inline top set in JS overrides the .active top:0 fallback. */
.read-pdf-textlayer .read-pdf-eoc {
  display: block; position: absolute; inset: 100% 0 0;
  z-index: -1; cursor: default; user-select: none; pointer-events: auto;
}
.read-pdf-textlayer .read-pdf-eoc.active { top: 0; }
@media (prefers-reduced-motion: reduce) { .read-pdf-stack { animation: none; } }
/* The minimap rail is the scroll affordance in Page view — drop the native scrollbar
   so it doesn't sit awkwardly under the rail. (Drag-to-pan still covers any overflow.) */
.read-pdf { scrollbar-width: none; }
.read-pdf::-webkit-scrollbar { width: 0; height: 0; }

/* ── Page-view minimap rail (read-pdf-minimap.js) ──────────────────────────────
   A thin right-edge spine of page thumbnails with a viewport box, click/drag-scrub,
   and a cursor-following hover preview. Sits over the right edge of .read-pdf as a
   sibling so it never scrolls; tucked under the Contents drawer (z 5). */
.read-mini {
  position: absolute;
  top: 58px; right: 0; bottom: 0;          /* initial fallback; JS pins top/height to the scroller's box in layout() */
  width: 24px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 3px;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  cursor: pointer;
  overflow: hidden;         /* safety net — the spine is sized to ~70%, never spills the rail */
  touch-action: none;       /* we own the gesture: tap jumps, drag scrubs */
  animation: menuIn .2s cubic-bezier(.2, .7, .3, 1);
}
.read-mini-track {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.read-mini-cell {
  flex: 0 0 auto;
  /* visible gray sliver when blank (long docs skip thumbnails); a loaded thumbnail
     paints over it via background-image */
  background-color: color-mix(in srgb, var(--text) 26%, transparent);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 1px;
  box-shadow: 0 0 0 .5px rgba(8, 10, 16, .22);
  pointer-events: none;
  transition: box-shadow .15s;
}
.read-mini-cur { box-shadow: 0 0 0 1.5px var(--primary); }
.read-mini-vp {
  position: absolute;
  left: 0; right: 0;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border: 1.5px solid var(--primary);
  border-radius: 3px;
  pointer-events: none;
}
.read-mini-preview {
  position: absolute;
  right: 32px;
  z-index: 6;
  display: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.read-mini-preview-show { display: block; animation: menuIn .14s cubic-bezier(.2, .7, .3, 1); }
.read-mini-preview img { display: none; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.read-mini-preview-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 9px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .74));
  color: #fff;
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .read-mini, .read-mini-preview-show { animation: none; }
}

/* ── Mobile (portrait phones) ── */
@media (max-width: 760px) {
  .read-overlay { padding: 0; }
  .read-editor { height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
  /* Two deterministic rows: [ title+%  ·  Reading/Page  ·  ✕ ] over [ tools ]. The
     Reading/Page toggle and Close both ride the title row (where the ellipsizing
     title always yields space) so neither can wrap off the end of the tool row — the
     failure the flex layout kept hitting on narrow phones, worst in Page view where
     the tool row also carries zoom + pager. With the toggle lifted out, the tool row
     carries only zoom/pager (or A±/Serif) + Find + Contents and fits a single line. */
  .read-tb {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 8px; row-gap: 8px;
    padding: 8px 10px;
  }
  .read-tb-info { grid-column: 1; grid-row: 1; margin-right: 0; }
  .read-tb-info strong { max-width: none; min-width: 0; }
  .read-viewtoggle { grid-column: 2; grid-row: 1; }
  .read-close { grid-column: 3; grid-row: 1; justify-self: end; }
  .read-tb-tools { grid-column: 1 / -1; grid-row: 2; gap: 4px; }
  .read-toc-lbl, .read-close-lbl, .read-find-lbl { display: none; }
  .read-tb-tools .btn-sm { padding: 5px 7px; }     /* trim width, keep height for tap targets */
  .read-tools-reflow, .read-tools-pdf { gap: 6px; }
  /* a phone viewport (~43ch) is narrower than even the Narrow preset, so the
     measure cycle is a no-op there — drop it to keep the tool row one line */
  .read-tb-tools [data-act="measure"] { display: none; }
  /* Phone: Print + Save move into the "⋯ More" overflow so the tool row stays one
     line; the labelled buttons were what pushed it to wrap. */
  .read-more { display: inline-flex; }
  .read-tb-tools > [data-act="print"], .read-tb-tools > [data-act="save"] { display: none; }
  /* Collapse "Use a tool" to its grid glyph — it's the widest control, and dropping
     its label is what lets Serif stay inline with the row still one line. */
  .read-tb .continue-more-lbl { display: none; }
  .read-tb .continue-more-ico { display: inline-block; }
  /* Page view: the +/- zoom buttons are redundant on touch (pinch-zoom + drag-pan
     work), so drop them and keep the Width/Page fit toggle — frees the pager room. */
  .read-tb-tools [data-act="zoom-in"], .read-tb-tools [data-act="zoom-out"] { display: none; }
  .read-article { padding: 20px 16px 80px; }
  .read-fig-left, .read-fig-right { max-width: 52%; }
  /* the page view fills the phone; pages still float in a quiet gray field */
  .read-pdf-stack { padding: 8px; gap: 10px; }
  .read-vt-btn { padding: 4px 8px; font-size: 11px; }
  .read-pager-lbl { min-width: 3.8em; font-size: 11px; }
}

/* ── Short viewport (phone landscape) ── the max-width rule above misses landscape
   (≈891px wide), where vertical space is scarcest. Go icon-only + compact so the
   whole toolbar collapses to a single row beside the title. */
@media (max-height: 520px) {
  .read-tb { padding: 6px 12px; gap: 4px 10px; }
  .read-toc-lbl, .read-close-lbl, .read-find-lbl { display: none; }
  .read-tb-tools { gap: 6px; }
  .read-tb-tools .btn-sm { padding: 5px 9px; }
  .read-article { padding: 16px 18px 70px; }
}

/* ── OCR text-cleanup affordances ─────────────────────────────────────────────
   Themes via the global tokens (like every other .read-* rule) so light/dark flip
   automatically. kpRise/kpFadeDown/menuIn entrances are applied inline in
   read-shell.js and gated there on prefers-reduced-motion. */

/* OCR-corrected words: faint dotted underline, tap to audit. */
.read-fix {
  text-decoration: underline dotted;
  text-decoration-color: var(--text-mute);
  text-underline-offset: 3px;
  cursor: help;
  border-radius: 2px;
  transition: background-color .15s, text-decoration-color .15s;
}
.read-fix:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); text-decoration-color: var(--primary); }
.read-fix:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Popover: raw OCR token + revert. menuIn entrance handled inline in JS. */
.read-fix-pop {
  position: absolute; z-index: 60; max-width: 280px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  padding: 10px 12px; font-size: .85rem; line-height: 1.4;
  display: flex; flex-direction: column; gap: 8px;
}
.read-fix-pop-label { color: var(--text-soft); }
.read-fix-pop-label em { color: var(--text); font-style: italic; font-weight: 600; }
.read-fix-pop-revert {
  align-self: flex-start; border: 1px solid var(--border); background: transparent;
  color: var(--primary); font-weight: 600; font-size: .82rem;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.read-fix-pop-revert:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.read-fix-pop-revert:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* One-time "n words tidied up" note above the article. kpRise/kpFadeDown inline in JS. */
.read-cleannote {
  display: flex; align-items: center; gap: 12px;
  margin: 0 auto 14px; max-width: 60ch;
  background: color-mix(in srgb, var(--primary) 7%, var(--card));
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; color: var(--text-soft); font-size: .86rem; line-height: 1.4;
}
.read-cleannote-txt { flex: 1; }
.read-cleannote-x {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: none; background: transparent;
  color: var(--text-mute); cursor: pointer; border-radius: 6px;
  transition: background-color .15s, color .15s;
}
.read-cleannote-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.read-cleannote-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }