/* Reader — the OpenStax reading surface.
 *
 * Loaded AFTER css/site.css and only by the two reader pages. Everything
 * here reads the shared tokens (--paper, --ink, --rule, --accent); nothing
 * redefines them, so the site theme toggle governs this module too.
 *
 * The reading surface is deliberately plainer than the rest of the site:
 * the point is exposure to the text, so the text is the only thing with
 * contrast. Chrome sits at --ink-3 and gets out of the way.
 */

/* ── library ── */
.bookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 26px 0; }
.bookcard { border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); padding: 18px 20px; }
.bookcard h3 { margin: 0 0 4px; font-size: 1.1rem; }
.bookcard .bmeta { color: var(--ink-3); font-size: 0.85rem; }
.bookcard .bauth { color: var(--ink-2); font-size: 0.85rem; margin: 6px 0 10px; }
.bookcard .chaps { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 10px; display: none; }
.bookcard.open .chaps { display: block; }
.chaprow { display: flex; gap: 10px; align-items: baseline; padding: 5px 2px; border-bottom: 1px dotted var(--rule); }
.chaprow:last-child { border-bottom: 0; }
.chaprow .cno { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); min-width: 2.2em; text-align: right; }
.chaprow .ctitle { flex: 1 1 auto; }
.chaprow .cwords { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; }
.chaprow.read .ctitle::after { content: " ✓"; color: var(--ok); }
.btn {
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink-2);
  border-radius: 6px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 0.88rem;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); font-weight: 600; }
.resume { border: 1px solid var(--accent); background: var(--accent-bg); border-radius: 8px; padding: 12px 16px; margin: 20px 0; }

/* ── reader chrome ── */
.readbar {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  border: 1px solid var(--rule); background: var(--panel);
  border-radius: 10px; padding: 10px 14px; margin: 14px 0 18px;
  font-size: 0.88rem; color: var(--ink-2);
}
.readbar .grp { display: flex; gap: 6px; align-items: center; }
.readbar label { color: var(--ink-3); white-space: nowrap; }
.readbar input[type=range] { width: 110px; accent-color: var(--accent); vertical-align: middle; }
.readbar .val { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); min-width: 3.4em; }
.readbar .sep { flex: 1 1 0; }

.chapnav { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 4px 0 10px; }
.chapnav h1 { font-size: 1.35rem; margin: 0; flex: 1 1 20ch; }
.chapnav .pageno { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-3); }
/* A <select> sizes itself to its WIDEST option, and these are full chapter
   titles — "Introduction to the Nursing Profession: Evolution, Theories,
   and Practice" pushed the page to 592px inside a 375px phone viewport and
   the whole document scrolled sideways. min-width:0 is the half that
   matters: without it a flex item refuses to shrink below its intrinsic
   width and max-width alone does nothing. */
.chapnav select {
  flex: 1 1 12ch; min-width: 0; max-width: 100%;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink-2);
  border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 0.88rem;
}

/* ── the surface ──
   --rsize / --rlead / --rfont are set from JS by the preference controls, so
   the text scales without a stylesheet rewrite. */
.surface {
  --rsize: 1.12rem; --rlead: 1.7; --rfont: var(--serif); --rtrack: 0;
  max-width: var(--measure); margin: 0 auto;
}
.surface.wide { max-width: none; }
.prose { font-family: var(--rfont); font-size: var(--rsize); line-height: var(--rlead); letter-spacing: var(--rtrack); }
.prose p { margin: 0 0 1em; }
.prose .u-figure, .prose .u-table {
  color: var(--ink-3); font-size: 0.92em; border-left: 2px solid var(--rule);
  padding-left: 12px; font-family: var(--sans);
}
/* Footnotes — the OpenRN books cite at the foot of nearly every page. They
   stay on the page they were printed on, set small and quiet, and they are
   out of the timed stream: a citation fired one word at a time is the fastest
   way to lose a sentence. */
.prose .u-note {
  color: var(--ink-3); font-size: 0.8em; font-family: var(--sans);
  line-height: 1.5; margin-top: 1.4em; padding-top: 0.6em;
  border-top: 1px solid var(--rule);
}
.prose .u-note + .u-note { margin-top: 0; padding-top: 0; border-top: 0; }
.prose .u-feature {
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: 6px; padding: 12px 16px; margin: 0 0 1em; background: var(--panel);
}
.prose .flabel {
  display: block; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 5px;
}
.prose .s { cursor: pointer; }
.prose .s:hover { background: var(--accent-bg); }
.prose .s.here { background: var(--accent-bg); box-shadow: inset 0 -2px 0 var(--accent); }
.prose .w.now { background: var(--accent); color: var(--paper); border-radius: 3px; }
.bion { font-weight: 700; }

/* Shelf headings on the library page — one per curriculum. */
.shelfhead { font-size: 1.3rem; margin: 34px 0 4px; }
.shelfhead:first-of-type { margin-top: 22px; }
.shelfsub { margin: 0 0 14px; }

/* Dyslexia-friendly: no webfont is vendored (no third-party asset on a
   static site), so this is the spacing half of the intervention plus
   whatever sans the device has — honest label, real effect. */
.surface.dys { --rfont: 'OpenDyslexic', 'Comic Sans MS', Verdana, sans-serif; --rtrack: 0.03em; }
.surface.dys .prose { word-spacing: 0.16em; }
.surface.dys .prose p { margin-bottom: 1.25em; }

/* ── timed stages (chunked / RSVP) ── */
.stage {
  border: 1px solid var(--rule); border-radius: 10px; background: var(--panel);
  min-height: 44vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; margin-bottom: 16px; position: relative; overflow: hidden;
}
.stage .guide { position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); }
.stage .guide.top { top: calc(50% - 1.9em); }
.stage .guide.bot { top: calc(50% + 1.9em); }
.chunkbox {
  font-family: var(--rfont); font-size: clamp(1.3rem, 4.2vw, 2.1rem); line-height: 1.35;
  text-align: center; max-width: 22ch; color: var(--ink);
}
.rsvpbox {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  font-family: var(--rfont); font-size: clamp(1.6rem, 6vw, 3rem);
  width: 100%; max-width: 30ch;
}
.rsvpbox .pre { text-align: right; }
.rsvpbox .orp { color: var(--alert); }
.rsvpbox .post { text-align: left; }
.rsvpbox.noorp { display: block; text-align: center; }
.rsvpbox.noorp .orp { color: inherit; }

.playrow { display: flex; gap: 10px; align-items: center; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.playrow .big { font-size: 1rem; padding: 8px 22px; }
.progress { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; margin: 0 0 14px; }
.progress > i { display: block; height: 100%; background: var(--accent); width: 0; }
.ctxline { color: var(--ink-3); font-size: 0.88rem; text-align: center; margin: 0 0 14px; max-width: var(--measure); margin-inline: auto; }

.pagerow { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: 20px 0 0; flex-wrap: wrap; }

/* The licence notice is part of the reading surface, not a footer: it is
   mounted on every render, in every mode. It has NO collapsed state on
   purpose — hiding it is a licence failure, not a layout preference. */
.surface .ox-attrib { margin-top: 26px; }

@media (max-width: 640px) {
  .readbar { font-size: 0.84rem; gap: 8px 12px; }
  .readbar input[type=range] { width: 84px; }
  .stage { min-height: 38vh; }
}

/* ── page audio: the printed page, spoken ── */
.pageaudio { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* The sheet is the page image plus its overlay. `position: relative` on the
   wrapper and percentage geometry on the boxes is what lets the highlight
   track the paragraph at ANY rendered width — the numbers are fractions of
   the PDF rectangle, so nothing is recomputed when the image resizes. */
.sheet { position: relative; line-height: 0; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: #fff; }
.sheet img { width: 100%; height: auto; display: block; }
.overlay { position: absolute; inset: 0; }
.overlay .hl {
  position: absolute; border-radius: 3px; cursor: pointer;
  outline: 1px solid transparent; transition: background 120ms, outline-color 120ms;
}
.overlay .hl:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); outline-color: var(--accent); }
.overlay .hl.on {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  outline: 2px solid var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.cuelist { list-style: none; margin: 0; padding: 0; max-height: 78vh; overflow-y: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--panel); }
.cuelist li { padding: 9px 12px; border-bottom: 1px solid var(--rule); font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.cuelist li:last-child { border-bottom: 0; }
.cuelist li:hover { background: var(--accent-bg); }
.cuelist li.on { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); color: var(--ink); }
.ck {
  display: inline-block; margin-right: 7px; padding: 1px 6px; border-radius: 4px;
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--rule); color: var(--ink-3); vertical-align: 1px;
}
/* The authored cue kinds — the ones a fallback page never produces. */
.ck.figure, .ck.open, .ck.resume, .ck.close, .ck.head { background: var(--accent); color: var(--paper); }

.tag { font-family: var(--mono); font-size: 0.74rem; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--rule); color: var(--ink-3); }
.tag.ok { border-color: var(--accent); color: var(--accent); }
.tag.warn { border-color: var(--alert); color: var(--alert); }

@media (max-width: 900px) {
  .pageaudio { grid-template-columns: 1fr; }
  .cuelist { max-height: 42vh; }
}