/* ==========================================================================
   BC EMR/PCP Exam Prep — design system
   "Clinical editorial": serif display, restrained petrol accent, layered
   surfaces, full dark mode. Built for long bilingual study sessions.
   ========================================================================== */

:root {
  /* ---- type ---- */
  --font-display: ui-serif, "Iowan Old Style", "Source Serif Pro", Charter, Georgia,
                  "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- spacing scale ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  /* ---- light theme ---- */
  --bg: #f4f5f3;
  --bg-tint: #eceeea;
  --surface: #fffefc;
  --surface-2: #f8f8f6;
  --ink: #17201f;
  --ink-2: #4d5a58;
  --ink-3: #8b9794;
  --line: #e2e5e0;
  --line-strong: #cdd2cb;

  --accent: #0d5c5c;          /* deep petrol */
  --accent-hover: #0a4a4a;
  --accent-soft: #e3efee;
  --accent-ink: #0a4a4a;

  --emr: #1d4ed8;
  --emr-soft: #e4ebfb;
  --pcp: #0d5c5c;
  --pcp-soft: #e3efee;

  --red: #a8322b;   --red-soft: #fbe9e7;
  --yellow: #9a6414; --yellow-soft: #fbf0dd;
  --green: #2b6b40;  --green-soft: #e6f2e9;
  --dgreen: #1e5230;

  --shadow-sm: 0 1px 2px rgba(23, 32, 31, .05);
  --shadow: 0 1px 2px rgba(23, 32, 31, .05), 0 6px 20px -8px rgba(23, 32, 31, .13);
  --shadow-lg: 0 2px 4px rgba(23, 32, 31, .05), 0 16px 40px -12px rgba(23, 32, 31, .2);
  --ring: 0 0 0 3px rgba(13, 92, 92, .18);

  --ease: cubic-bezier(.32, .72, .35, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0d1211;
  --bg-tint: #131a19;
  --surface: #161d1c;
  --surface-2: #1b2322;
  --ink: #e8ece9;
  --ink-2: #a3b0ad;
  --ink-3: #6f7c79;
  --line: #26302e;
  --line-strong: #35413e;

  --accent: #5fbfb4;
  --accent-hover: #7ad0c5;
  --accent-soft: #17302e;
  --accent-ink: #8ad8cd;

  --emr: #7aa2f7;  --emr-soft: #1a2340;
  --pcp: #5fbfb4;  --pcp-soft: #17302e;

  --red: #e88b82;   --red-soft: #331a18;
  --yellow: #ddb072; --yellow-soft: #2f2417;
  --green: #7cc394;  --green-soft: #16291d;
  --dgreen: #9bd4ac;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -10px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 20px 48px -14px rgba(0, 0, 0, .8);
  --ring: 0 0 0 3px rgba(95, 191, 180, .25);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1211; --bg-tint: #131a19; --surface: #161d1c; --surface-2: #1b2322;
    --ink: #e8ece9; --ink-2: #a3b0ad; --ink-3: #6f7c79;
    --line: #26302e; --line-strong: #35413e;
    --accent: #5fbfb4; --accent-hover: #7ad0c5; --accent-soft: #17302e; --accent-ink: #8ad8cd;
    --emr: #7aa2f7; --emr-soft: #1a2340; --pcp: #5fbfb4; --pcp-soft: #17302e;
    --red: #e88b82; --red-soft: #331a18; --yellow: #ddb072; --yellow-soft: #2f2417;
    --green: #7cc394; --green-soft: #16291d; --dgreen: #9bd4ac;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -10px rgba(0,0,0,.7);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 20px 48px -14px rgba(0,0,0,.8);
    --ring: 0 0 0 3px rgba(95,191,180,.25);
    color-scheme: dark;
  }
}

/* EMR track: the whole UI takes the EMR blue instead of the PCP petrol,
   so the two tracks are distinguishable at a glance on every page. */
:root[data-track="emr"] {
  --accent: #1d4ed8; --accent-hover: #1e40af; --accent-soft: #e4ebfb; --accent-ink: #1e40af;
  --ring: 0 0 0 3px rgba(29, 78, 216, .18);
}
:root[data-theme="dark"][data-track="emr"] {
  --accent: #7aa2f7; --accent-hover: #9ab8fa; --accent-soft: #1a2340; --accent-ink: #a8c0fb;
  --ring: 0 0 0 3px rgba(122, 162, 247, .25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-track="emr"] {
    --accent: #7aa2f7; --accent-hover: #9ab8fa; --accent-soft: #1a2340; --accent-ink: #a8c0fb;
    --ring: 0 0 0 3px rgba(122, 162, 247, .25);
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* background lives on <html>, not <body>: a body background is propagated to
   the canvas and some engines then fail to repaint it when the custom
   property behind it changes at runtime (theme toggle) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  background: transparent;
  color: var(--ink);
  line-height: 1.62;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* deliberately not transitioned: browsers may not repaint a transitioned
     property when only the custom property behind it changes, which leaves
     the old theme colour painted after a runtime toggle */
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.011em; line-height: 1.25; }
h1 { font-size: clamp(1.55rem, 4vw, 2.1rem); }
h2 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
h3 { font-size: 1.03rem; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------------- top bar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--ink); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .02em; box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .brand-mark, :root:not([data-theme="light"]) .brand-mark { color: #08201f; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .brand-mark { color: #fff; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-family: var(--font-display); font-size: .95rem; font-weight: 600; }
.brand-text small { color: var(--ink-3); font-size: .7rem; letter-spacing: .02em; }
.topbar-controls { display: flex; align-items: center; gap: var(--s2); }
.track-switch {
  display: flex; background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 3px;
}
.track-switch button {
  padding: 5px 15px; border-radius: var(--radius-pill); font-weight: 600; font-size: .8rem;
  color: var(--ink-3); letter-spacing: .03em; transition: all .2s var(--ease);
}
.track-switch button:hover { color: var(--ink-2); }
.track-switch button.active-emr { background: var(--emr); color: #fff; box-shadow: var(--shadow-sm); }
.track-switch button.active-pcp { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .track-switch button.active-emr,
:root[data-theme="dark"] .track-switch button.active-pcp { color: #08201f; }
.lang-btn, .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 12px; min-height: 34px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 600; background: var(--surface); color: var(--ink-2);
  transition: all .2s var(--ease);
}
.lang-btn:hover, .icon-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.icon-btn { padding: 7px; width: 34px; }
.icon-btn .icon { width: 17px; height: 17px; }
/* narrow phones: the wordmark yields so brand + track + lang + theme still fit */
@media (max-width: 430px) {
  .topbar { padding: var(--s3) var(--s3); gap: var(--s2); }
  .brand-text { display: none; }
  .track-switch button { padding: 5px 11px; min-height: 30px; }
  .lang-btn { padding: 7px 9px; }
}
:root[data-theme="dark"] .icon-sun, :root:not([data-theme="light"]) .icon-sun { display: none; }
:root[data-theme="light"] .icon-sun { display: block; }
:root[data-theme="light"] .icon-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .icon-sun { display: block; }
  :root:not([data-theme="dark"]) .icon-moon { display: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-moon { display: block; }
}
:root[data-theme="dark"] .icon-moon { display: block; }

/* ---------------- layout ---------------- */
.view-root { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: var(--s5) var(--s4) 96px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--s5); margin-bottom: var(--s4);
}
.card h2 { margin-bottom: var(--s2); }
.card h3 { margin: var(--s4) 0 var(--s2); }
/* phones: thinner page and card margins, so text gets the width (24+16px a side left ~280px of a 360px screen) */
@media (max-width: 480px) {
  .view-root { padding-left: var(--s3); padding-right: var(--s3); }
  .card { padding: var(--s4); }
}
.muted { color: var(--ink-2); font-size: .93rem; }
.tiny { color: var(--ink-3); font-size: .76rem; letter-spacing: .01em; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 660px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* bilingual pairing: English leads, Chinese is a quieter companion line */
.bi-en { font-weight: 450; }
.bi-zh { color: var(--ink-2); font-size: .9em; margin-top: 3px; letter-spacing: .01em; }
.lang-en .bi-zh { display: none; }
.lang-zh .bi-en { display: none; }
.lang-zh .bi-zh { color: inherit; font-size: 1em; margin-top: 0; }
/* chrome outside #view (nav, footer) follows the same switch via the root attribute */
:root[data-lang="en"] .t-zh, :root[data-lang="en"] .t-both { display: none; }
:root[data-lang="zh"] .t-en, :root[data-lang="zh"] .t-both { display: none; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem;
  background: var(--accent); color: #fff; text-align: center; letter-spacing: .005em;
  box-shadow: var(--shadow-sm); transition: all .18s var(--ease);
}
:root[data-theme="dark"] .btn:not(.ghost):not(.secondary) { color: #08201f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:not(.ghost):not(.secondary) { color: #08201f; } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .btn:not(.ghost):not(.secondary) { color: #fff; } }
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow); color: #fff; }
:root[data-theme="dark"] .btn:not(.ghost):not(.secondary):hover { color: #08201f; }
.btn:active { transform: translateY(0); }
.btn.secondary { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
.btn.secondary:hover { background: color-mix(in srgb, var(--accent-soft) 82%, var(--accent)); color: var(--accent-ink); }
.btn.ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.btn.danger { background: var(--red); color: #fff; }
.btn.danger:hover { background: color-mix(in srgb, var(--red) 85%, #000); color: #fff; }
.btn.big { width: 100%; padding: 14px; font-size: .98rem; }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.btn-row { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }

/* ---------------- pills & badges ---------------- */
.pill {
  display: inline-flex; align-items: center; padding: 3px 11px; border-radius: var(--radius-pill);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pill.emr { background: var(--emr-soft); color: var(--emr); }
.pill.pcp { background: var(--pcp-soft); color: var(--pcp); }
.pill.rtc { background: var(--red-soft); color: var(--red); }
.pill.nonrtc { background: var(--green-soft); color: var(--green); }
.pill.trauma { background: var(--red-soft); color: var(--red); }
.pill.medical { background: var(--accent-soft); color: var(--accent-ink); }
.pill.gray { background: var(--bg-tint); color: var(--ink-3); border: 1px solid var(--line); }

/* ---------------- home ---------------- */
.hero { text-align: center; padding: var(--s7) var(--s4); }
.hero h1 { margin-bottom: var(--s3); }
.hero > .muted { max-width: 46ch; margin: 0 auto; }
.track-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s6); text-align: left; }
@media (max-width: 660px) { .track-choice { grid-template-columns: 1fr; } }
.track-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5);
  background: var(--surface); transition: all .25s var(--ease);
}
.track-card::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: 0;
  transition: opacity .25s var(--ease);
}
.track-card.emr::after { background: var(--emr); }
.track-card.pcp::after { background: var(--accent); }
.track-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.track-card:hover::after { opacity: 1; }
.track-card.emr:hover { border-color: color-mix(in srgb, var(--emr) 40%, var(--line)); }
.track-card.pcp:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.track-card h3 { font-size: 1.22rem; margin: var(--s2) 0 var(--s2); }

.pillar-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s4); }
@media (max-width: 760px) { .pillar-row { grid-template-columns: 1fr; } }
.pillar {
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4);
  background: var(--surface); display: flex; flex-direction: column; gap: var(--s2);
  transition: all .22s var(--ease);
}
.pillar:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.pillar .p-head { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-display);
  font-weight: 600; font-size: 1.02rem; }
.pillar .p-ico { display: inline-flex; color: var(--accent); }
.pillar .p-ico .icon { width: 19px; height: 19px; }
.pillar .p-facts {
  font-size: .78rem; color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s2) var(--s3);
  line-height: 1.5;
}
.pillar .btn { margin-top: auto; }

.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: none; padding-bottom: 0; }
.step:first-child { padding-top: var(--s2); }
.step-num {
  flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------- quiz ---------------- */
.q-wrap { max-width: 720px; margin: 0 auto; }
.q-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: var(--s2); margin-bottom: var(--s3); }
.q-timer {
  font-variant-numeric: tabular-nums; font-family: var(--font-mono);
  font-weight: 600; font-size: 1rem; padding: 5px 13px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.q-timer.warn { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 45%, var(--line)); background: var(--yellow-soft); }
.q-timer.crit { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, var(--line)); background: var(--red-soft); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.q-text { font-size: 1.04rem; margin-bottom: var(--s4); line-height: 1.6; }
.opt {
  display: flex; gap: var(--s3); align-items: flex-start; width: 100%; text-align: left;
  padding: 13px 15px; margin-bottom: var(--s2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  transition: all .16s var(--ease);
}
.opt:hover { border-color: var(--accent); background: var(--surface-2); transform: translateX(2px); }
.opt .opt-key {
  flex: 0 0 26px; height: 26px; border-radius: 7px; background: var(--bg-tint);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem; color: var(--ink-2); transition: all .16s var(--ease);
}
.opt:hover .opt-key { border-color: var(--accent); color: var(--accent); }
.opt.picked { border-color: var(--accent); background: var(--accent-soft); }
.opt.picked .opt-key { background: var(--accent); color: #fff; border-color: var(--accent); }
.opt.correct { border-color: var(--green); background: var(--green-soft); }
.opt.correct .opt-key { background: var(--green); color: #fff; border-color: var(--green); }
.opt.wrong { border-color: var(--red); background: var(--red-soft); }
.opt.wrong .opt-key { background: var(--red); color: #fff; border-color: var(--red); }
.explain {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--s3) var(--s4);
  margin-top: var(--s3); font-size: .93rem;
}
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; margin: var(--s3) 0; }
.q-grid button {
  padding: 8px 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); font-size: .78rem; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums; transition: all .14s var(--ease);
}
.q-grid button:hover { border-color: var(--ink-3); color: var(--ink); }
.q-grid button.answered { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.q-grid button.flagged { border-color: var(--yellow); color: var(--yellow); }
.q-grid button.current { outline: 2px solid var(--ink); outline-offset: 1px; }
.q-grid button.res-ok { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.q-grid button.res-bad { background: var(--red-soft); color: var(--red); border-color: var(--red); }

/* score report */
.score-hero { text-align: center; padding: var(--s6) var(--s4); }
.score-big {
  font-family: var(--font-display); font-size: clamp(2.8rem, 9vw, 3.6rem); font-weight: 600;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1;
  margin-bottom: var(--s3);
}
.score-big.pass { color: var(--green); }
.score-big.fail { color: var(--red); }
.area-bar { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.area-bar:last-child { border: none; }
.area-tag {
  flex: 0 0 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums;
}
.area-meter { flex: 1; height: 7px; border-radius: var(--radius-pill); background: var(--bg-tint); overflow: hidden; }
.area-meter i { display: block; height: 100%; border-radius: var(--radius-pill); transition: width .6s var(--ease); }
.band-red .area-tag { background: var(--red-soft); color: var(--red); }        .band-red .area-meter i { background: var(--red); }
.band-yellow .area-tag { background: var(--yellow-soft); color: var(--yellow); } .band-yellow .area-meter i { background: var(--yellow); }
.band-lgreen .area-tag { background: var(--green-soft); color: var(--green); }   .band-lgreen .area-meter i { background: var(--green); }
.band-dgreen .area-tag { background: color-mix(in srgb, var(--green-soft) 70%, var(--green)); color: var(--dgreen); }
.band-dgreen .area-meter i { background: var(--dgreen); }

/* ---------------- scenario player ---------------- */
.phase-track { display: flex; gap: 5px; overflow-x: auto; padding-bottom: var(--s2); margin-bottom: var(--s4);
  scrollbar-width: thin; }
.phase-track::-webkit-scrollbar { height: 3px; }
.phase-track::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.phase-track .ph {
  flex: 0 0 auto; padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  font-size: .7rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; transition: all .2s var(--ease);
}
.phase-track .ph.done { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.phase-track .ph.now { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.sc-info {
  background: var(--yellow-soft); border: 1px solid color-mix(in srgb, var(--yellow) 28%, var(--line));
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4); margin-bottom: var(--s4);
}
.sc-info .sc-label { font-size: .66rem; font-weight: 700; color: var(--yellow);
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: var(--s1); }
.chk {
  display: flex; gap: var(--s3); align-items: flex-start; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--s2);
  background: var(--surface); cursor: pointer; transition: all .16s var(--ease);
}
.chk:hover { border-color: var(--line-strong); }
.chk input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--green); flex: 0 0 auto; }
.chk .chk-w {
  margin-left: auto; flex: 0 0 auto; font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 9px; border-radius: var(--radius-pill); background: var(--red-soft); color: var(--red);
}
.chk.done { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); background: var(--green-soft); }
.timer-bar {
  position: sticky; top: 66px; z-index: 50; display: flex; gap: var(--s3); align-items: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3); margin-bottom: var(--s4); flex-wrap: wrap;
  font-variant-numeric: tabular-nums; box-shadow: var(--shadow-sm);
}
.timer-bar b { font-family: var(--font-mono); font-size: .95rem; }
.deduct-list li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0;
  border-bottom: 1px solid var(--line); font-size: .89rem; }
.deduct-list li:last-child { border-bottom: none; }
.deduct-list b { font-variant-numeric: tabular-nums; }
.vitals-table { width: 100%; border-collapse: collapse; font-size: .86rem; margin: var(--s2) 0; }
.vitals-table th, .vitals-table td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.vitals-table th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.vitals-table td { font-variant-numeric: tabular-nums; }
/* scenario sheet — the school's layout: a banded heading per section, label | value rows, vitals one row per set */
.sh-sec { margin: 0 0 var(--s4); }
.sh-head { background: var(--yellow-soft); border-left: 4px solid var(--yellow); color: var(--ink); font-weight: 700;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; margin-bottom: var(--s2); }
.sh-narr { margin: 0 0 var(--s2); }
.sh-rows { display: grid; grid-template-columns: minmax(92px, 32%) 1fr; gap: 7px 14px; margin: 0; }
.sh-rows dt { font-weight: 600; font-size: .85rem; color: var(--ink-2); }
.sh-rows dd { margin: 0; font-size: .9rem; min-width: 0; }
@media (min-width: 760px) { .sh-two { grid-template-columns: minmax(110px, 15%) 1fr minmax(110px, 15%) 1fr; } }
.sh-note { margin-top: var(--s2); font-size: .8rem; color: var(--ink-2); background: var(--surface-2); border-radius: 4px; padding: 6px 10px; }
.sh-note > b { display: block; color: var(--yellow); text-transform: uppercase; font-size: .66rem; letter-spacing: .08em; margin-bottom: 2px; }
.sh-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--s2) 0; }
.sh-vitals { border-collapse: collapse; font-size: .82rem; width: 100%; min-width: 600px; font-variant-numeric: tabular-nums; }
.sh-vitals th, .sh-vitals td { border: 1px solid var(--line-strong, var(--line)); padding: 6px 8px; text-align: center; vertical-align: middle; }
.sh-vitals th { background: var(--surface-2); font-weight: 600; white-space: nowrap; }
.sh-vitals td.sh-when { text-align: left; min-width: 140px; }
@media print {
  .topbar, header, nav, .bottom-nav, .no-print, .back-link, footer { display: none !important; }
  .sh-sheet { border: none; box-shadow: none; }
  .sh-sec { break-inside: avoid; }
}
textarea.pcr-box {
  width: 100%; min-height: 150px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4); font: inherit; font-size: .93rem; resize: vertical;
  background: var(--surface); color: var(--ink); transition: border-color .18s var(--ease);
}
textarea.pcr-box:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }

/* flashcards */
.flash {
  min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: var(--s6) var(--s5); background: var(--surface); cursor: pointer;
  transition: all .25s var(--ease); box-shadow: var(--shadow);
}
.flash:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.flash .flash-hint { color: var(--ink-3); font-size: .78rem; margin-top: var(--s3); }
.flash.revealed { border-color: var(--red); background: var(--red-soft); }

/* ---------------- lists & study ---------------- */
.list-wrap { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: var(--s4); overflow: hidden; background: var(--surface); }
.list-item {
  display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left;
  padding: 14px var(--s4); border-bottom: 1px solid var(--line); background: transparent;
  transition: background .16s var(--ease);
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--surface-2); }
.li-arrow { margin-left: auto; color: var(--ink-3); font-size: 1.1rem; transition: transform .18s var(--ease); }
.list-item:hover .li-arrow { transform: translateX(3px); color: var(--accent); }
.detail-section { margin-bottom: var(--s4); }
.detail-section h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin-bottom: var(--s2); font-weight: 700; }
.detail-section ul { padding-left: var(--s5); }
.detail-section li { margin-bottom: 5px; font-size: .93rem; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s4);
  font-weight: 600; font-size: .86rem; color: var(--ink-2); }
.back-link:hover { color: var(--accent); }
.search-box {
  width: 100%; padding: 11px var(--s4); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: .93rem; margin-bottom: var(--s3); background: var(--surface); color: var(--ink);
}
.search-box:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.rubric-w { font-weight: 700; padding: 2px 8px; border-radius: 6px; font-size: .72rem;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.rubric-w.w100 { background: var(--ink); color: var(--surface); }
.rubric-w.wbig { background: var(--red-soft); color: var(--red); }
.rubric-w.wmid { background: var(--yellow-soft); color: var(--yellow); }
.rubric-w.wsm { background: var(--bg-tint); color: var(--ink-2); border: 1px solid var(--line); }
details.acc { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--s2);
  background: var(--surface); overflow: hidden; transition: border-color .18s var(--ease); }
details.acc:hover { border-color: var(--line-strong); }
details.acc[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
details.acc summary { padding: 13px var(--s4); font-weight: 600; font-size: .93rem; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: var(--s2); }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "›"; margin-left: auto; color: var(--ink-3); font-size: 1.25rem;
  line-height: 1; transition: transform .2s var(--ease); }
details.acc[open] summary::after { transform: rotate(90deg); }
details.acc .acc-body { padding: 0 var(--s4) var(--s4); }
/* passage attached to a linked question set */
details.acc.passage { border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: var(--surface-2); margin-bottom: var(--s3); }
details.acc.passage summary { color: var(--accent-ink); }
details.acc.passage .vitals-table { margin: 0; }
details.acc.passage .vitals-table th { width: 38%; background: var(--surface); }

/* progress dashboard */
.stat-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.stat { flex: 1 1 96px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s3); text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat span { font-size: .68rem; color: var(--ink-3); letter-spacing: .02em; }

/* ---------------- bottom nav ---------------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px; color: var(--ink-3); transition: color .18s var(--ease); position: relative; }
.bottom-nav a::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; background: var(--accent); border-radius: 2px; transition: width .22s var(--ease);
}
.bottom-nav a.active { color: var(--accent); }
.bottom-nav a.active::before { width: 26px; }
.bottom-nav .nav-ico { display: inline-flex; }
.bottom-nav .nav-ico .icon { width: 20px; height: 20px; }
.bottom-nav .nav-label { font-size: .66rem; text-align: center; line-height: 1.25; letter-spacing: .01em; }
@media (min-width: 900px) {
  .bottom-nav { position: sticky; top: 66px; bottom: auto; border-top: none; border-bottom: 1px solid var(--line);
    max-width: 860px; margin: 0 auto; width: 100%; border-radius: 0; }
  .bottom-nav a { flex-direction: row; gap: 7px; padding: 11px 0; justify-content: center; }
  .bottom-nav a::before { top: auto; bottom: 0; }
  .bottom-nav .nav-label { font-size: .8rem; }
  .bottom-nav .nav-label br { display: none; }
  .view-root { padding-bottom: var(--s6); }
}

/* ---------------- footer ---------------- */
.site-footer { max-width: 860px; margin: 0 auto; padding: var(--s5) var(--s4) 110px;
  color: var(--ink-3); font-size: .72rem; line-height: 1.7; border-top: 1px solid var(--line); }
.site-footer a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.site-footer a:hover { color: var(--accent); }
.align-note { margin-top: var(--s2); opacity: .78; }
@media (min-width: 900px) { .site-footer { padding-bottom: var(--s6); } }

/* ---------------- utility ---------------- */
.hidden { display: none !important; }
.tag-count { margin-left: auto; background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 2px 10px; font-size: .72rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.notice {
  background: var(--yellow-soft); border: 1px solid color-mix(in srgb, var(--yellow) 25%, var(--line));
  color: var(--ink); border-radius: var(--radius-sm); padding: var(--s3) var(--s4);
  font-size: .87rem; margin-bottom: var(--s3);
}
.progress-outer { height: 6px; border-radius: var(--radius-pill); background: var(--bg-tint);
  overflow: hidden; margin-top: var(--s2); }
.progress-outer i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }

/* page transition */
.view-root > * { animation: rise .34s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ---- chapter review v2 ---- */
.pt-list { margin: 0; padding-left: 20px; }
.pt-list li { margin: 7px 0; }
.pt-list li.pt-hard { list-style: none; margin-left: -20px; padding: 6px 10px 6px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.hard-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.hard-table td, .hard-table th { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.hard-table th { background: var(--accent-soft); color: var(--accent); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bc-alert { border: 1.5px solid var(--red); border-radius: var(--radius, 12px); padding: 14px 16px; margin: var(--s2, 12px) 0; background: color-mix(in srgb, var(--red) 6%, transparent); }
.bc-alert h4 { margin: 0 0 10px; color: var(--red); }
.bc-alert-item { margin: 10px 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.bc-alert-item:first-of-type { border-top: 0; }
.bc-cols { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 5px; }
@media (min-width: 640px) { .bc-cols { grid-template-columns: 1fr 1fr; } }
.bc-tag { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill, 99px); margin-right: 6px; vertical-align: 2px; }
.bc-tag.book { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.bc-tag.bc { background: var(--red); color: #fff; }

/* chapter v2 polish: mobile table wrap + in-page nav */
@media (max-width: 640px) {
  /* break between words only: the column grows to the longest word instead of splitting "Dexametha-sone" */
  .hard-table th { white-space: normal; overflow-wrap: break-word; }
  /* portal medications: name over use, full width (two columns left the name ~90px wide) */
  .meds-table, .meds-table tbody, .meds-table tr, .meds-table th, .meds-table td { display: block; }
  .meds-table th { width: auto !important; border-bottom: 0; }
  .meds-table tr + tr th { margin-top: 6px; }
}
.sec-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s2) 0; }
.sec-toc a { font-size: .76rem; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-2); text-decoration: none; background: var(--surface-2); }
.sec-toc a:hover { border-color: var(--accent); color: var(--accent); }
.to-top { position: fixed; right: 14px; bottom: 76px; z-index: 40; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font-size: 1.1rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.14); opacity: 0; pointer-events: none; transition: opacity .25s; }
.to-top.show { opacity: 1; pointer-events: auto; }

/* ---------------- AI examiner ---------------- */
.ex-chat { max-height: 52vh; min-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 10px 0; }
.ex-line { padding: 8px 11px; border-radius: 12px; max-width: 92%; font-size: .93rem; line-height: 1.45; }
.ex-line .ex-who { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.ex-line .ex-who i { font-style: normal; font-weight: 500; margin-left: 6px; }
.ex-line.candidate { align-self: flex-end; background: var(--accent-soft); color: var(--ink); border-bottom-right-radius: 4px; }
.ex-line.examiner { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ex-line.patient { align-self: flex-start; background: var(--yellow-soft); border-bottom-left-radius: 4px; }
.ex-line.partner { align-self: flex-start; background: var(--green-soft); border-bottom-left-radius: 4px; }
.ex-input { display: flex; gap: 8px; align-items: stretch; }
.ex-input textarea { flex: 1; resize: vertical; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; }
.pcr-field { display: block; margin: 10px 0; }
.pcr-field span { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-3); letter-spacing: .03em; margin-bottom: 4px; }
.pcr-field textarea { width: 100%; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; }
.ex-sec { margin: 14px 0 6px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ex-row { padding: 8px 0; border-top: 1px solid var(--line); }
.ex-row-h { display: flex; align-items: baseline; gap: 8px; }
.ex-w { margin-left: auto; font-weight: 700; color: var(--red); }
.ex-ev { margin-top: 4px; font-size: .8rem; color: var(--ink-2); padding-left: 10px; border-left: 2px solid var(--line-strong); }
.ex-ev i { color: var(--ink-3); font-style: normal; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.ex-mic { padding: 0 14px; font-size: 1.15rem; }
.ex-mic.listening { background: var(--red-soft); border-color: var(--red); color: var(--red); animation: exPulse 1s ease-in-out infinite; }
@keyframes exPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(168, 50, 43, .35); } 50% { box-shadow: 0 0 0 8px rgba(168, 50, 43, 0); } }
.ex-conv { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin: 0 0 8px; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 600; background: var(--bg-tint); color: var(--ink-2); border: 1px solid var(--line); }
.ex-conv.listening { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.ex-conv.speaking { background: var(--yellow-soft); color: var(--yellow); border-color: var(--yellow); }
.ex-conv-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.ex-conv.listening .ex-conv-dot { animation: exPulse 1s ease-in-out infinite; }
.ex-conv.thinking .ex-conv-dot { animation: exBlink 1s steps(2) infinite; }
@keyframes exBlink { 50% { opacity: .2; } }
.ex-silent { align-self: flex-end; font-size: .72rem; color: var(--ink-3); margin: -4px 4px 6px 0; text-align: right; }

/* ---------------- PCP Classroom (study/classroom) ---------------- */
.cls-intro p { margin: 6px 0; }
.cls-unit { margin-top: var(--s4); }
.cls-unit h3 { font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 2px var(--s2); }
.cls-lesson[disabled] { opacity: .55; cursor: default; }
.cls-lesson.done .tag-count { color: var(--green); border-color: var(--green); }
.cls-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cls-start h2 { margin: 6px 0 10px; }
.cls-start ul { margin: 0 0 var(--s4); padding-left: 20px; }
/* each slide's bar is 8px, but the button around it is 22px tall so a finger can hit it */
.cls-progress { display: flex; gap: 3px; margin: -7px 0 calc(var(--s3) - 7px); }
.cls-progress button { flex: 1; height: 22px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.cls-progress button::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 8px; border-radius: 4px; background: var(--line-strong); }
.cls-progress button.done::before { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.cls-progress button.cur::before { background: var(--accent); }
.cls-progress button.q::before { outline: 2px solid var(--yellow); outline-offset: -2px; }
.cls-stage { min-height: 340px; font-size: 1.06rem; line-height: 1.55; }
.cls-stage h2 { font-size: 1.45rem; line-height: 1.25; margin: 4px 0 12px; text-wrap: balance; }
.cls-meta { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cls-body { display: grid; gap: 10px; min-width: 0; }
.cls-body p { margin: 0; }
.cls-body .lead { font-size: 1.1rem; }
.cls-body .big { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.3; font-weight: 600; }
.cls-body .big b { color: var(--red); }
.cls-body .bul, .cls-body .steps { margin: 0; padding-left: 22px; display: grid; gap: 7px; }
.cls-body .bul li::marker, .cls-body .steps li::marker { color: var(--red); font-weight: 700; }
.cls-body .big-list li { font-size: 1.1rem; }
.cls-body li.ok { color: var(--green); }
.cls-body .note { background: var(--yellow-soft); border-radius: var(--radius-sm); padding: 10px 12px; font-size: .95rem; }
.cls-body .src { color: var(--ink-3); font-size: .8rem; }
.cls-body .next { color: var(--accent); font-weight: 700; }
.cls-body .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cls-body .cell { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 8px; display: grid; gap: 2px; text-align: center; min-width: 0; }
.cls-body .cell .k { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--red); }
.cls-body .cell em { font-style: normal; font-size: .78rem; color: var(--ink-3); }
.cls-body .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cls-body .flow span { background: var(--accent-soft); border-radius: 8px; padding: 6px 10px; font-size: .95rem; }
.cls-body .flow i { font-style: normal; color: var(--accent); font-weight: 700; }
.cls-body .tbl { border-collapse: collapse; width: 100%; font-size: 1rem; }
.cls-body .tbl th, .cls-body .tbl td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cls-body .tbl th { font-size: .74rem; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.cls-body .stages { display: grid; gap: 8px; }
.cls-body .st { border-radius: var(--radius-sm); padding: 10px 12px; display: grid; grid-template-columns: 8.5em 1fr; gap: 0 10px; align-items: baseline; }
.cls-body .st b { grid-row: span 2; font-family: var(--font-display); font-size: 1.05rem; }
.cls-body .st em { font-style: normal; font-size: .9rem; color: var(--ink-2); }
.cls-body .s1 { background: var(--green-soft); } .cls-body .s2 { background: var(--yellow-soft); } .cls-body .s3 { background: var(--red-soft); }
.cls-body .bc { background: var(--red-soft); border-radius: var(--radius-sm); padding: 12px 12px 12px 30px; }
.cls-body .vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cls-body .vs > div { border-radius: var(--radius-sm); padding: 12px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.cls-body .vs .emr { background: var(--emr-soft); } .cls-body .vs .pcp { background: var(--pcp-soft); }
.cls-body .vs h4 { margin: 0; font-family: var(--font-body); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.cls-body .vs .emr h4 { color: var(--emr); } .cls-body .vs .pcp h4 { color: var(--pcp); }
.cls-body .vs ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .95rem; }
.cls-opts { display: grid; gap: 8px; margin-bottom: 10px; }
.cls-opt { text-align: left; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; font: inherit; font-size: 1.02rem; color: var(--ink); display: flex; gap: 10px; cursor: pointer; }
.cls-opt b { color: var(--accent); min-width: 1.2em; }
.cls-opt[disabled] { cursor: default; }
.cls-opt.right { border-color: var(--green); background: var(--green-soft); }
.cls-opt.wrong { border-color: var(--red); background: var(--red-soft); }
.cls-explain { border-left: 4px solid var(--green); background: var(--green-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 12px; margin: 0; }
.cls-panel h4 { margin: 0 0 6px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cls-tx { white-space: pre-wrap; font-size: 1rem; line-height: 1.6; }
.cls-card-a { margin: 10px 0; padding: 12px 14px; border-left: 3px solid var(--accent); }
.cls-body-zh { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--line-strong); font-size: .95rem; line-height: 1.6; white-space: pre-wrap; }
.cls-zh { font-size: .95rem; }
.cls-links { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }
.cls-links a { word-break: break-word; }
.cls-links .cls-todo { list-style: none; margin-left: -18px; }
.cls-links .cls-todo input { vertical-align: middle; margin-right: 4px; }
details.cls-panel > summary { cursor: pointer; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cls-zh { font-size: .95rem; }
.cls-bar { position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 59;
  display: flex; justify-content: center; align-items: center; gap: 4px; padding: 8px 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); }
.cls-bar button { background: transparent; border: 0; color: var(--ink); border-radius: var(--radius-pill); min-width: 44px; height: 44px; padding: 0 8px; font: inherit; font-size: .85rem; cursor: pointer; }
.cls-bar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.cls-bar .cls-play { background: var(--accent); color: #fff; width: 54px; height: 54px; font-size: 1.1rem; }
body.cls-playing .view-root { padding-bottom: 170px; }
@media (min-width: 900px) { .cls-bar { bottom: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); } body.cls-playing .view-root { padding-bottom: 110px; } }
@media (max-width: 420px) { .cls-body .grid3, .cls-body .vs { grid-template-columns: 1fr; } .cls-stage h2 { font-size: 1.28rem; }
  /* a quiz question is a sentence, not a title: smaller, so the options start on the first screen */
  .cls-stage h2:has(+ .cls-opts) { font-size: 1.1rem; line-height: 1.35; }
  /* seven controls (PCP classroom) must fit a 320–360px bar */
  .cls-bar { gap: 2px; padding: 8px 4px; }
  .cls-bar button { min-width: 38px; padding: 0 6px; font-size: .8rem; } }
.cls-q { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px; resize: vertical; margin-bottom: 8px; }
.cls-q:focus { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
#clsAns:not(:empty) { margin: 10px 0 6px; padding: 10px 12px; background: var(--accent-soft); border-radius: var(--radius-sm); }
.cls-body .tbl td.n0 { background: color-mix(in srgb, #16a34a 22%, transparent); text-align: center; }
.cls-body .tbl td.n1 { background: color-mix(in srgb, #eab308 28%, transparent); text-align: center; }
.cls-body .tbl td.n2 { background: color-mix(in srgb, #f97316 32%, transparent); text-align: center; }
.cls-body .tbl td.n3 { background: color-mix(in srgb, #dc2626 38%, transparent); text-align: center; font-weight: 600; }

/* AET class picture slides (slide.visual): infographic components; [data-at] parts fade in with the narration */
.cls-visual { --vb: color-mix(in srgb, var(--accent) 10%, var(--surface)); --vl: color-mix(in srgb, var(--accent) 35%, var(--line)); margin-top: 6px; font-size: 1rem; line-height: 1.45; }
.cls-visual .v-off { opacity: 0; transform: translateY(8px); }
.cls-visual [data-at] { transition: opacity .45s ease, transform .45s ease; }
.cls-visual svg.lucide { width: 22px; height: 22px; stroke-width: 2; vertical-align: -4px; color: var(--accent); flex: none; }
.cls-visual .v-hero { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--vb); margin-bottom: 10px; }
.cls-visual .v-hero svg.lucide { width: 44px; height: 44px; }
.cls-visual .v-hero b { font-size: 1.15rem; display: block; }
.cls-visual .v-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.cls-visual .v-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--vl); background: var(--surface); }
.cls-visual .v-card > b { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.cls-visual .v-card.v-red { border-color: #dc2626; background: color-mix(in srgb, #dc2626 8%, var(--surface)); }
.cls-visual .v-card.v-green { border-color: #16a34a; background: color-mix(in srgb, #16a34a 8%, var(--surface)); }
.cls-visual .v-card.v-amber { border-color: #d97706; background: color-mix(in srgb, #d97706 8%, var(--surface)); }
.cls-visual .v-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.cls-visual .v-step { flex: 1 1 140px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--vb); border: 1px solid var(--vl); }
.cls-visual .v-step .v-n { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: .8rem; display: grid; place-items: center; }
.cls-visual .v-arrow { align-self: center; color: var(--ink-3); font-size: 1.3rem; }
.cls-visual .v-big { display: flex; gap: 10px; flex-wrap: wrap; }
.cls-visual .v-num { flex: 1 1 150px; padding: 12px 14px; border-radius: 12px; background: var(--vb); text-align: center; }
.cls-visual .v-num b { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.cls-visual .v-num span { font-size: .9rem; color: var(--ink-2); }
.cls-visual .v-scale { display: flex; gap: 4px; margin: 8px 0; }
.cls-visual .v-scale > div { flex: 1; text-align: center; padding: 10px 4px; border-radius: 8px; color: #fff; font-weight: 600; font-size: .92rem; }
.cls-visual .b-green { background: #15803d; } .cls-visual .b-amber { background: #b45309; } .cls-visual .b-orange { background: #c2410c; }
.cls-visual .b-red { background: #b91c1c; } .cls-visual .b-blue { background: #1d4ed8; } .cls-visual .b-grey { background: #4b5563; }
.cls-visual .v-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.cls-visual .v-col { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--vl); }
.cls-visual .v-col > b { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.cls-visual .v-do { border-color: #16a34a; } .cls-visual .v-do > b { color: #15803d; }
.cls-visual .v-dont { border-color: #dc2626; } .cls-visual .v-dont > b { color: #b91c1c; }
.cls-visual ul { margin: 4px 0; padding-left: 20px; } .cls-visual li { margin: 3px 0; }
.cls-visual .v-tbl { border-collapse: collapse; width: 100%; font-size: .95rem; }
.cls-visual .v-tbl th, .cls-visual .v-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cls-visual .v-tbl th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.cls-visual .v-tbl td.n0 { background: color-mix(in srgb, #16a34a 22%, transparent); text-align: center; }
.cls-visual .v-tbl td.n1 { background: color-mix(in srgb, #eab308 28%, transparent); text-align: center; }
.cls-visual .v-tbl td.n2 { background: color-mix(in srgb, #f97316 32%, transparent); text-align: center; }
.cls-visual .v-tbl td.n3 { background: color-mix(in srgb, #dc2626 38%, transparent); text-align: center; font-weight: 600; }
.cls-visual .v-tag { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: .75rem; font-weight: 700; color: #fff; margin-right: 6px; vertical-align: 1px; }
.cls-visual .t-mod { background: #7c3aed; } .cls-visual .t-bc { background: #0369a1; } .cls-visual .t-exam { background: #b45309; }
.cls-visual .v-time { display: flex; flex-direction: column; border-left: 3px solid var(--vl); margin-left: 8px; }
.cls-visual .v-time > div { position: relative; padding: 4px 0 10px 16px; }
.cls-visual .v-time > div::before { content: ""; position: absolute; left: -8px; top: 9px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); }
.cls-visual .v-time b { color: var(--accent); margin-right: 6px; }
.cls-visual .v-zh { color: var(--ink-3); font-size: .88rem; }
.cls-visual .v-note { margin-top: 10px; padding: 8px 12px; border-left: 4px solid var(--accent); background: var(--vb); border-radius: 0 10px 10px 0; font-size: .95rem; }
.cls-vt { margin-top: 8px; }
.cls-visual .v-chart th, .cls-visual .v-chart td { padding: 4px 3px; font-size: .78rem; line-height: 1.2; text-align: center; }
.cls-visual .v-chart th:first-child { text-align: left; font-size: .7rem; letter-spacing: 0; }
.cls-visual .v-card > span, .cls-visual .v-col > span { display: block; }

/* NEWS2 trainer (src/news2drill.js) */
.n2-tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.n2-tabs .on { outline: 2px solid var(--accent); }
.n2-score { margin-left: auto; }
.n2-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--vl); background: var(--surface); }
.n2-val { font-size: 2rem; font-weight: 700; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.n2-pts { display: flex; gap: 6px; }
.n2-p { width: 44px; height: 40px; border-radius: 10px; border: 1px solid var(--vl); background: var(--surface); color: var(--ink); font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.n2-p.sel { background: var(--accent); color: #fff; border-color: var(--accent); }
.n2-p.right, .n2-l.right { background: #15803d; color: #fff; border-color: #15803d; }
.n2-p.wrong, .n2-l.wrong { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.n2-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.n2-row span { font-variant-numeric: tabular-nums; }
.n2-why { grid-column: 1 / -1; }
.n2-why:empty { display: none; }
.n2-pt { margin-bottom: 4px; }
.n2-lv { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 6px; }
.n2-lv .tiny { width: 100%; }
.n2-l.on { outline: 2px solid var(--accent); }
.n2-fb:empty { display: none; }
.n2-fb { margin-top: 8px; }
.cls-visual .v-scale > div.n2-hit { outline: 3px solid var(--ink); outline-offset: 1px; transform: scale(1.06); }
.n2-goal { font-weight: 700; color: #15803d; }
#clsDrill { margin-top: 12px; }
@media (max-width: 480px) {
  .n2-row .n2-p { width: 36px; height: 36px; font-size: .95rem; }
  .n2-row .n2-pts { gap: 4px; }
  .n2-row > div:first-child { font-size: .92rem; }
}

/* AET class list: each weekend folds (details.cls-wkd), a W1–W17 row jumps to one */
.cls-wkd { margin-top: var(--s3); scroll-margin-top: 76px; }
.cls-wkd > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 0; }
.cls-wkd > summary::-webkit-details-marker { display: none; }
.cls-wkd > summary::after { content: "›"; margin-left: auto; color: var(--ink-3); font-size: 1.5rem; line-height: 1; transition: transform .2s var(--ease); }
.cls-wkd[open] > summary { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cls-wkd[open] > summary::after { transform: rotate(90deg); }
.cls-wk-h { display: grid; gap: 2px; min-width: 0; }
.cls-wk-tools { padding: 10px 2px 2px; }
.cls-how { margin-top: 8px; }
.cls-how > summary { cursor: pointer; font-size: .85rem; color: var(--accent); font-weight: 600; }
.cls-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.cls-jump > button[data-jump] { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.cls-jump > button.fin { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.cls-jump > button.cur { background: var(--accent); border-color: var(--accent); color: #fff; }
.cls-jump #foldAll { margin-left: auto; }

/* story lessons: the 中 / EN / 中英 switch and bilingual text (#view[data-tl]) */
#view[data-tl="en"] .l-zh, #view[data-tl="zh"] .l-en { display: none; }
#view[data-tl="both"] .l-zh { display: block; font-size: .84em; font-weight: 400; opacity: .78; margin-top: 1px; }
#view[data-tl="both"] .l-zh.inl { display: inline; margin-left: .35em; }
.cls-visual .v-scale .l-zh { opacity: .92; }
.cls-tl { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; vertical-align: middle; margin-left: 8px; }
.cls-tl button { border: 0; background: transparent; padding: 6px 12px; font-size: .95rem; color: var(--ink-2); cursor: pointer; font-weight: 700; min-width: 40px; }
.cls-tl button.on { background: var(--accent); color: #fff; }
.cls-meta-r { display: inline-flex; align-items: center; white-space: nowrap; }
.cls-tl button { white-space: nowrap; }
@media (max-width: 360px) { .cls-tl { margin-left: 6px; } .cls-tl button { padding: 6px 8px; min-width: 32px; } }
.cls-start-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cls-start-top .cls-tl { flex-shrink: 0; margin-left: auto; }   /* a long kicker pushes the switch to its own line, never squeezes it */

/* story lessons: the illustrated diagram (GPT Image) on top of a slide */
.cls-fig { margin: 4px 0 12px; }
.cls-fig-in { overflow: hidden; border-radius: 14px; aspect-ratio: 3 / 2; background: #fff; border: 1px solid var(--line); }
.cls-fig img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cls-fig figcaption { font-size: .9rem; color: var(--ink-2); margin-top: 6px; font-style: italic; }

/* AET 精讲 (condensed book) rendered in the player: the textbook chapter classes in site colours, both themes */
.cls-book { line-height: 1.7; font-size: 1.02rem; }
.cls-book .chap-k { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }
.cls-book h1 { font-size: 1.4rem; margin: 4px 0 14px; padding-left: 12px; border-left: 4px solid var(--accent); line-height: 1.3; }
.cls-book h1 .en, .cls-book h2 .en { display: block; font-size: .78rem; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.cls-book h2 { font-size: 1.15rem; margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1.5px solid var(--accent); }
.cls-book h3 { font-size: 1.02rem; margin: 14px 0 6px; }
.cls-book p { margin: 0 0 8px; }
.cls-book ul, .cls-book ol { margin: 0 0 8px; padding-left: 22px; }
.cls-book li { margin-bottom: 4px; }
.cls-book .why, .cls-book .goals, .cls-book .ex, .cls-book .tip, .cls-book .trap, .cls-book .answers, .cls-book .say, .cls-book .mn, .cls-book .fail { border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.cls-book .why { background: color-mix(in srgb, #e0b553 16%, var(--bg-tint)); }
.cls-book .why b:first-child, .cls-book .trap b:first-child, .cls-book .answers b:first-child, .cls-book .goals b:first-child { display: block; margin-bottom: 4px; }
.cls-book .goals { background: var(--accent-soft); }
.cls-book .ex { border-left: 4px solid #e0b553; background: color-mix(in srgb, #e0b553 10%, var(--bg-tint)); border-radius: 0 8px 8px 0; }
.cls-book .lab { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: #a16207; margin-bottom: 4px; }
.cls-book .note { display: block; font-size: .9rem; color: var(--ink-2, var(--ink-3)); margin-top: 4px; }
.cls-book .tip { background: var(--bg-tint); font-size: .95rem; }
.cls-book .say { border: 1.5px solid var(--accent); }
.cls-book .say .lab { color: var(--accent); }
.cls-book .say .e { margin: 6px 0 0; font-style: italic; }
.cls-book .say .z { margin: 0 0 6px; font-size: .92rem; color: var(--ink-2, var(--ink-3)); }
.cls-book .trap { background: color-mix(in srgb, #b91c1c 10%, var(--bg-tint)); }
.cls-book .trap ul { margin: 0; }
.cls-book .fail { border-left: 4px solid #b91c1c; background: color-mix(in srgb, #b91c1c 9%, var(--bg-tint)); border-radius: 0 8px 8px 0; }
.cls-book .fail b { color: #dc2626; }
.cls-book .answers { background: color-mix(in srgb, #15803d 12%, var(--bg-tint)); font-size: .95rem; }
.cls-book .mn { border: 2px dashed var(--accent); text-align: center; }
.cls-book .mn b { display: block; font-size: .72rem; letter-spacing: .1em; color: var(--accent); }
.cls-book .flag { display: inline-block; font-size: .8rem; line-height: 1.4; color: #92400e; background: color-mix(in srgb, #e0b553 22%, var(--bg-tint)); border-radius: 4px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }
:root[data-theme="dark"] .cls-book .flag { color: #fcd34d; }
:root[data-theme="dark"] .cls-book .lab { color: #fbbf24; }
.cls-book table.t { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 8px 0 12px; line-height: 1.45; display: block; overflow-x: auto; }
.cls-book table.t th, .cls-book table.t td { border: 1px solid var(--line-strong); padding: 5px 8px; text-align: left; vertical-align: top; }
.cls-book table.t th { background: var(--accent-soft); font-size: .82rem; }
.cls-book .steps5 { display: grid; gap: 6px; margin: 6px 0 10px; }
.cls-book .steps5 div { background: var(--accent-soft); border-radius: 6px; padding: 6px 10px; }
.cls-book .steps5 b { display: inline-block; min-width: 7em; color: var(--accent); }
.cls-book .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 12px; }
.cls-book .card-grid div { border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 10px; font-size: .92rem; line-height: 1.45; }
.cls-book .card-grid div > b:first-child { display: block; color: var(--accent); font-size: .74rem; letter-spacing: .08em; }
@media (max-width: 520px) { .cls-book .card-grid { grid-template-columns: 1fr; } .cls-book { font-size: 1rem; } }
/* the brief's chapter chips, the folded reference lessons, the school quiz Q→A */
.cls-plan { display: grid; gap: 6px; }
.cls-plan-row { display: flex; gap: 6px; }
.cls-plan-row .main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line-strong)); background: var(--accent-soft); color: var(--accent-ink); font: inherit; text-align: left; cursor: pointer; }
.cls-plan-row .main:hover { background: color-mix(in srgb, var(--accent-soft) 82%, var(--accent)); }
.cls-plan-row .n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.cls-plan-row .lab { flex: 1; min-width: 0; font-weight: 600; }
.cls-plan-row .lab small { font-weight: 400; font-size: .8rem; opacity: .8; margin-left: 4px; }
.cls-plan-row .meta { flex: none; font-size: .8rem; opacity: .8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cls-plan-row .side { flex: none; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.cls-plan-row .side:hover { background: var(--surface-2); color: var(--ink); }
.cls-plan-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.cls-plan-opt .k { font-size: .78rem; color: var(--ink-3); margin-right: 2px; }
.cls-plan-opt button { font: inherit; font-size: .8rem; padding: 4px 11px; min-height: 30px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); cursor: pointer; }
.cls-plan-opt button:hover { background: var(--surface-2); color: var(--ink); }
.cls-ref { margin-top: 10px; }
.cls-ref-h { font-size: .9rem; font-weight: 600; color: var(--ink-2, var(--ink-3)); padding: 10px 4px 2px; border-top: 1px dashed var(--line-strong); }
.cls-book-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.cls-book-nav button { font-size: .8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-tint); color: inherit; cursor: pointer; min-height: 30px; }
.cls-book-nav button.cur { background: var(--accent); color: #fff; border-color: var(--accent); }
.cls-book-nav button.read { border-color: #16a34a; color: #16a34a; }
.cls-qa { border-bottom: 1px solid var(--line); }
.cls-qa > summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.cls-qa > p { margin: 0 0 10px; padding-left: 14px; border-left: 3px solid var(--accent); color: var(--ink-2, var(--ink-3)); }