/* ============================================================================
   VivaPrep — calm clinical study app
   Style: Micro-interactions · Type: Figtree / Noto Sans
   ========================================================================== */

/* ---- Tokens: light (default) ---- */
:root{
  --primary:#3B74D5; --primary-600:#2F5FB8; --on-primary:#FFFFFF;
  --teal:#0E8F84; --success:#0F9269; --success-bg:#ECFBF4;
  --danger:#D65050; --danger-bg:#FDF3F3; --warn:#C77A1E;
  --bg:#F4F7FC; --surface:#FFFFFF; --surface-2:#EDF2FA;
  --fg:#121E31; --muted:#57687F; --faint:#8695A9;
  --border:#E2EAF4; --border-strong:#CCD9E8;
  --ring:rgba(59,116,213,.34);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --shadow-md:0 4px 12px rgba(16,24,40,.10),0 2px 4px rgba(16,24,40,.06);
  --shadow-lg:0 18px 40px rgba(16,24,40,.16);
  --radius:16px; --radius-sm:12px; --radius-lg:22px;
  /* Mobile-first spacing — scaled up on wider screens further down */
  --sp-1:4px; --sp-2:8px; --sp-3:10px; --sp-4:14px; --sp-5:18px; --sp-6:26px; --sp-7:36px;
  --gutter:14px;          /* page side padding */
  --card-pad:16px;        /* inner padding of content cards */
  --font:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-alt:'Noto Sans',var(--font);
  --maxw:640px;
  --dur:220ms; --ease:cubic-bezier(.22,.61,.36,1);
}
/* ---- Tokens: dark ---- */
:root[data-theme="dark"]{
  --primary:#7FA8F0; --primary-600:#9FC0F7; --on-primary:#0A1120;
  --teal:#3FCBBB; --success:#43C795; --success-bg:#0C2A22;
  --danger:#F08A8A; --danger-bg:#2E1A1A; --warn:#E5AC55;
  --bg:#0B111C; --surface:#131C2B; --surface-2:#1A2436;
  --fg:#E9EFF8; --muted:#A3B1C6; --faint:#74839A;
  --border:#232F44; --border-strong:#31405A;
  --ring:rgba(127,168,240,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 18px rgba(0,0,0,.45);
  --shadow-lg:0 20px 44px rgba(0,0,0,.55);
}

*{box-sizing:border-box; min-width:0}
/* Do NOT put overflow-x:hidden on html/body — it turns them into scroll
   containers and breaks momentum touch scrolling on iOS. Horizontal overflow is
   prevented at source instead (overflow-wrap below, .tbl-wrap, stacked blocks),
   with overflow-x:clip on .app as a backstop — clip does not create a scroll
   container, so vertical scrolling is unaffected. */
html,body{margin:0;padding:0}
/* Long medical terms and formulas must never push the layout sideways */
h1,h2,h3,p,li,td,th,span,div{overflow-wrap:anywhere; word-break:normal}
body{
  font-family:var(--font); background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh; line-height:1.55; letter-spacing:.005em;
  -webkit-overflow-scrolling:touch;
}
h1,h2,h3{line-height:1.2; margin:0; font-weight:700; letter-spacing:-.01em}
p{margin:0}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
svg{width:20px; height:20px; flex:none}
:focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:8px}
.mono{font-variant-numeric:tabular-nums}

/* ---- App shell ---- */
.app{max-width:var(--maxw); margin:0 auto; min-height:100dvh; position:relative;
  overflow-x:clip;
  padding-bottom:calc(24px + env(safe-area-inset-bottom))}

/* ---- Top bar ---- */
.topbar{position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:var(--sp-3);
  padding:calc(env(safe-area-inset-top) + 10px) var(--gutter) 10px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar .grow{flex:1; min-width:0}
/* Single line + ellipsis: a wrapping title was pushing the bar taller on phones */
.topbar h1{font-size:16.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .sub{font-size:12px; color:var(--muted); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.iconbtn{width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  color:var(--fg); background:var(--surface); border:1px solid var(--border);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease)}
.iconbtn:active{transform:scale(.92)}
.iconbtn svg{width:22px; height:22px}
.back{padding:0 4px}

/* ---- Views ---- */
.view{padding:var(--sp-4) var(--gutter) 0; animation:viewIn var(--dur) var(--ease)}
@keyframes viewIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal)}
.lead{color:var(--muted); font-size:14.5px; margin-top:6px}
.section-title{font-size:13px; font-weight:700; color:var(--faint);
  text-transform:uppercase; letter-spacing:.06em; margin:var(--sp-6) 0 var(--sp-3)}

/* ---- Hero (home) ---- */
.hero{border-radius:var(--radius-lg); padding:var(--sp-5) var(--card-pad);
  background:linear-gradient(140deg,var(--primary),var(--teal));
  color:#fff; box-shadow:var(--shadow-md); position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.hero h2{font-size:22px; color:#fff}
.hero p{margin-top:8px; color:rgba(255,255,255,.9); font-size:14.5px; max-width:34ch}
.hero-row{display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-4)}
.hero-ring{--p:0; width:64px; height:64px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(#fff calc(var(--p)*1%), rgba(255,255,255,.28) 0)}
.hero-ring i{width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--primary),var(--teal)); color:#fff; font-weight:800; font-size:15px; font-style:normal}
.hero-tx b{font-size:21px; display:block; color:#fff; letter-spacing:-.01em; line-height:1.15}
.hero-tx span{font-size:12.5px; color:rgba(255,255,255,.88)}
@media (min-width:420px){
  .hero-ring{width:74px; height:74px}
  .hero-ring i{width:60px; height:60px; font-size:17px}
  .hero-tx b{font-size:24px}
}

/* ---- Section blocks (home) ---- */
.sec{margin-top:var(--sp-6)}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.sec-name{font-size:13.5px; font-weight:800; color:var(--fg); letter-spacing:-.01em}
.sec-count{font-size:12px; font-weight:700; color:var(--success)}
.sec-count.soon{color:var(--faint); border:1px solid var(--border-strong); border-radius:999px; padding:2px 9px}

.soon-card{display:flex; align-items:center; gap:var(--sp-3); background:var(--surface);
  border:1px dashed var(--border-strong); border-radius:var(--radius); padding:var(--sp-4); box-shadow:var(--shadow-sm)}
.soon-ic{width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  color:var(--faint); background:var(--surface-2)}
.soon-title{font-weight:700; font-size:14.5px; color:var(--muted)}
.soon-sub{font-size:12.5px; color:var(--faint); margin-top:2px; line-height:1.45}

.more-card{display:flex; align-items:center; gap:10px; margin-top:var(--sp-1);
  padding:12px var(--sp-4); border:1px dashed var(--border-strong); border-radius:var(--radius);
  color:var(--faint); font-size:12.5px; line-height:1.4; background:transparent}
.more-card svg{width:18px; height:18px}

/* ---- Chapter card complete state ---- */
.chapter-card.is-done{border-color:color-mix(in srgb,var(--success) 40%,var(--border))}
.chapter-card.is-done .badge{background:linear-gradient(140deg,var(--success),var(--teal))}
.done-badge{width:44px; height:44px; flex:none; display:grid; place-items:center; color:var(--success)}
.done-badge svg{width:30px; height:30px}

/* ---- Mark-complete button (chapter menu) ---- */
.done-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  margin-top:var(--sp-4); min-height:54px; border-radius:16px; font-weight:700; font-size:15px;
  border:1.5px dashed var(--border-strong); background:var(--surface); color:var(--muted);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease)}
.done-btn:active{transform:scale(.98)}
.done-btn svg{width:22px; height:22px}
.done-btn.is-done{background:var(--success); border-style:solid; border-color:var(--success); color:#fff}

/* ---- Chapter cards ---- */
.card-list{display:flex; flex-direction:column; gap:var(--sp-3)}
.chapter-card{display:flex; align-items:center; gap:var(--sp-3);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:13px var(--sp-4) 13px 13px; box-shadow:var(--shadow-sm); width:100%; text-align:left;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.chapter-card:active{transform:scale(.98)}
.chapter-card:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong)}
.chapter-card .badge{width:42px; height:42px; border-radius:13px; flex:none;
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px;
  background:linear-gradient(140deg,var(--primary),var(--teal))}
.chapter-card{overflow:hidden}
.chapter-card .cc-body{flex:1; min-width:0; overflow:hidden}
.chapter-card .cc-title{overflow:hidden}
.chapter-card .cc-title{font-weight:700; font-size:15.5px}
.chapter-card .cc-sub{font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ring{--p:0; width:44px; height:44px; flex:none; display:grid; place-items:center;
  border-radius:50%; font-size:11px; font-weight:700; color:var(--muted);
  background:conic-gradient(var(--success) calc(var(--p)*1%), var(--surface-2) 0)}
.ring i{width:34px; height:34px; border-radius:50%; background:var(--surface);
  display:grid; place-items:center; font-style:normal}

.locked{opacity:.6}
.coming{font-size:11px; color:var(--faint); border:1px dashed var(--border-strong);
  padding:2px 8px; border-radius:999px}

/* ---- Chapter menu tiles ---- */
.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3)}
.mode-tile{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--sp-4) var(--sp-4) var(--sp-5); box-shadow:var(--shadow-sm);
  text-align:left; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.mode-tile:active{transform:scale(.97)}
.mode-tile:hover{box-shadow:var(--shadow-md)}
.mode-tile .mi{width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  margin-bottom:var(--sp-3); color:var(--on-primary)}
.mode-tile .mi svg{width:22px;height:22px}
.mode-tile h3{font-size:16px}
.mode-tile p{font-size:12.5px; color:var(--muted); margin-top:3px}
.tile-flash .mi{background:var(--primary)}
.tile-quiz .mi{background:var(--teal)}
.tile-case .mi{background:var(--warn)}
.tile-ref .mi{background:#7C3AED}

/* ---- Flashcard ---- */
.deck-wrap{padding-top:var(--sp-2)}
.progress-row{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4)}
.pbar{flex:1; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.pbar i{display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--teal));
  border-radius:999px; transition:width var(--dur) var(--ease)}
.pcount{font-size:12.5px; color:var(--muted); font-weight:600; min-width:52px; text-align:right}


.deck-actions{display:flex; gap:var(--sp-3); margin-top:var(--sp-4)}
.btn{flex:1; height:52px; border-radius:16px; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--border); background:var(--surface); color:var(--fg);
  box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease)}
.btn:active{transform:scale(.96)}
.btn svg{width:20px;height:20px}
.btn-review{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,var(--border))}
.btn-known{color:#fff; background:var(--success); border-color:var(--success)}
.btn-primary{color:var(--on-primary); background:var(--primary); border-color:var(--primary); box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent; box-shadow:none}

/* ---- Summary concept cards ---- */
.scard-list{display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-4)}
.scard{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:14px var(--card-pad) 16px;
  border-left:4px solid var(--primary); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.scard.done{border-left-color:var(--success)}
.scard-head{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.scard-no{width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center;
  font-size:13px; font-weight:800; color:var(--on-primary); background:var(--primary)}
.scard.done .scard-no{background:var(--success)}
.scard-head h3{flex:1; font-size:16px; line-height:1.3}
/* 36px visual chip; ::after widens the tap area to 44px without moving anything */
.scheck{width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center;
  color:var(--faint); background:var(--surface-2); border:1px solid var(--border); position:relative;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease)}
.scheck::after{content:""; position:absolute; inset:-4px; border-radius:14px}
.scheck:active{transform:scale(.9)}
.scheck svg{width:18px; height:18px}
.scard.done .scheck{background:var(--success); color:#fff; border-color:var(--success)}
.scard-points{margin:0; padding-left:17px; display:flex; flex-direction:column; gap:9px}
.scard-points li{font-size:14.5px; line-height:1.6; padding-left:1px}
.scard-points li::marker{color:var(--teal)}

/* ---- Inline text treatment (bold / value / highlight) ---- */
.scard-points b, .explain b, .steps b, .answer b, .stem b{font-weight:800; color:var(--fg)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  padding:1.5px 6px; border-radius:7px; color:var(--primary-600);
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 18%,transparent)}
/* box-decoration-break keeps a highlight tidy when it wraps across lines */
mark{background:color-mix(in srgb,var(--warn) 20%,transparent); color:inherit;
  padding:1px 3px; border-radius:5px; font-weight:600;
  -webkit-box-decoration-break:clone; box-decoration-break:clone}

/* ---- Infographic blocks inside summary cards ---- */
.viz{margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px dashed var(--border)}
.viz-t{font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); margin-bottom:10px}

/* Range bar: low | normal | high */
.rng{display:flex; gap:5px; align-items:stretch}
.rng-b{flex:1; border-radius:11px; padding:9px 5px; text-align:center;
  border:1.5px solid var(--border); background:var(--surface-2); min-width:0}
.rng-v{display:block; font-weight:800; font-size:13px; font-variant-numeric:tabular-nums;
  white-space:nowrap}
.rng-l{display:block; font-size:10.5px; line-height:1.3; margin-top:3px; color:var(--muted);
  hyphens:auto}
@media (min-width:420px){
  .rng{gap:6px}
  .rng-b{padding:10px 8px}
  .rng-v{font-size:14px}
  .rng-l{font-size:11px}
}
.rng-b.tone-low{border-color:color-mix(in srgb,#3B82F6 45%,var(--border));
  background:color-mix(in srgb,#3B82F6 12%,transparent)}
.rng-b.tone-low .rng-v{color:#2563EB}
.rng-b.tone-ok{border-color:color-mix(in srgb,var(--success) 45%,var(--border));
  background:color-mix(in srgb,var(--success) 12%,transparent)}
.rng-b.tone-ok .rng-v{color:var(--success)}
.rng-b.tone-high{border-color:color-mix(in srgb,var(--danger) 45%,var(--border));
  background:color-mix(in srgb,var(--danger) 12%,transparent)}
.rng-b.tone-high .rng-v{color:var(--danger)}
:root[data-theme="dark"] .rng-b.tone-low .rng-v{color:#93B4FF}

/* Comparison — stacked on phones (readable), side-by-side once there's room */
.cmp{display:grid; grid-template-columns:1fr; gap:8px}
@media (min-width:520px){ .cmp{grid-template-columns:1fr 1fr} }
.cmp-c{border-radius:12px; padding:11px 12px; border:1.5px solid var(--border); background:var(--surface-2); min-width:0}
.cmp-a{border-color:color-mix(in srgb,var(--primary) 40%,var(--border));
  background:color-mix(in srgb,var(--primary) 8%,transparent)}
.cmp-b{border-color:color-mix(in srgb,var(--teal) 40%,var(--border));
  background:color-mix(in srgb,var(--teal) 8%,transparent)}
.cmp-h{font-weight:800; font-size:13.5px; line-height:1.25}
.cmp-a .cmp-h{color:var(--primary-600)}
.cmp-b .cmp-h{color:var(--teal)}
.cmp-s{font-size:11px; color:var(--muted); margin-top:2px}
.cmp-c ul{margin:8px 0 0; padding-left:15px; display:flex; flex-direction:column; gap:5px}
.cmp-c li{font-size:12.5px; line-height:1.45}
.cmp-c li::marker{color:var(--faint)}

/* Flow chain */
.flw{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.flw-s{font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border)}
.flw-a{color:var(--teal); font-weight:800}

/* ---- Line diagrams -------------------------------------------------------
   Diagrams are inline SVG authored in the content files. They carry no colour
   of their own: every stroke and fill comes from a .dg-* class below, which
   reads the theme tokens, so light and dark both work with no second drawing.
   Strokes use non-scaling-stroke so they stay crisp at any width.          */
.dg-wrap{border-radius:var(--radius-sm); border:1.5px solid var(--border);
  background:var(--surface-2); padding:10px 8px; overflow:hidden}
.dg{display:block; width:100%; height:auto; max-height:52vh; margin:0 auto}
.dg-cap{font-size:11.5px; line-height:1.45; color:var(--muted); margin-top:8px}

.dg [stroke]{vector-effect:non-scaling-stroke}
.dg-o{fill:none; stroke:var(--border-strong); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.dg-o2{fill:none; stroke:var(--faint); stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round}
.dg-dash{fill:none; stroke:var(--faint); stroke-width:1.2; stroke-dasharray:4 3;
  stroke-linecap:round}
.dg-fill{fill:var(--surface); stroke:var(--border-strong); stroke-width:1.6;
  stroke-linejoin:round}
.dg-p{fill:none; stroke:var(--primary); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.dg-pf{fill:color-mix(in srgb,var(--primary) 22%,transparent);
  stroke:var(--primary); stroke-width:1.6; stroke-linejoin:round}
.dg-t{fill:none; stroke:var(--teal); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.dg-tf{fill:color-mix(in srgb,var(--teal) 22%,transparent);
  stroke:var(--teal); stroke-width:1.6; stroke-linejoin:round}
.dg-d{fill:none; stroke:var(--danger); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.dg-df{fill:color-mix(in srgb,var(--danger) 20%,transparent);
  stroke:var(--danger); stroke-width:1.6; stroke-linejoin:round}
.dg-w{fill:color-mix(in srgb,var(--warn) 24%,transparent);
  stroke:var(--warn); stroke-width:1.6; stroke-linejoin:round}
.dg-sol{fill:var(--border-strong); stroke:none}
.dg-pd{fill:var(--primary); stroke:none}

.dg text{font-family:var(--font); fill:var(--muted); font-size:9px;
  font-weight:600; letter-spacing:.01em}
.dg .dg-lb{fill:var(--fg); font-weight:800; font-size:9.5px}
.dg .dg-lp{fill:var(--primary-600); font-weight:800}
.dg .dg-lt{fill:var(--teal); font-weight:800}
.dg .dg-ld{fill:var(--danger); font-weight:800}
.dg .dg-sm{font-size:8px; font-weight:600; fill:var(--faint)}
@media (min-width:420px){ .dg text{font-size:8.5px} }

/* Formula card */
.fml{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; font-weight:600; line-height:1.7; text-align:center; white-space:pre-line;
  padding:12px 10px; border-radius:12px; color:var(--fg);
  background:linear-gradient(140deg,color-mix(in srgb,var(--primary) 10%,transparent),
    color-mix(in srgb,var(--teal) 10%,transparent));
  border:1.5px solid color-mix(in srgb,var(--primary) 22%,var(--border));
  overflow-x:auto}
.fml-lg{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:9px; justify-content:center}
.fml-lg span{font-size:11.5px; color:var(--muted)}
.fml-lg b{color:var(--fg); font-weight:700}

/* ---- "Not in the book" attribution badge ---- */
.bb{display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:9px 11px;
  border-radius:11px; font-size:11.5px; line-height:1.45;
  color:var(--muted); background:color-mix(in srgb,var(--warn) 9%,transparent);
  border:1px dashed color-mix(in srgb,var(--warn) 38%,var(--border))}
.bb-ic{flex:none; color:var(--warn); display:grid; place-items:center}
.bb-ic svg{width:15px; height:15px}
.bb-tx b{color:var(--warn); font-weight:800}
/* The source name is a link — tappable straight from the card */
.bb-src{color:var(--primary-600); font-weight:700; text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px;
  display:inline; padding:2px 0}
.bb-src svg{width:12px; height:12px; display:inline-block; vertical-align:-1px; margin-left:4px}
.bb-src:active{opacity:.6}

/* ---- Sources row on the chapter menu ---- */
.src-row{display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  margin-top:var(--sp-4); padding:13px var(--sp-4); border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease)}
.src-row:active{transform:scale(.98)}
.src-row-tx{flex:1; min-width:0}
.src-row-t{display:block; font-weight:700; font-size:14.5px}
.src-row-s{display:block; font-size:12px; color:var(--muted); margin-top:1px}
.src-row .chev{color:var(--faint)}

/* ---- Sources screen ---- */
.src-book{display:flex; align-items:flex-start; gap:var(--sp-3); margin-top:var(--sp-5);
  padding:var(--sp-4); border-radius:var(--radius); background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-sm)}
.src-ic{width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center;
  color:var(--primary-600); background:color-mix(in srgb,var(--primary) 10%,transparent)}
.src-ic.book{color:var(--teal); background:color-mix(in srgb,var(--teal) 12%,transparent)}
.src-ic svg{width:19px; height:19px}
.src-tx{flex:1; min-width:0}
.src-l{display:block; font-weight:700; font-size:14px; line-height:1.35}
.src-u{display:block; font-size:12px; color:var(--muted); margin-top:3px; line-height:1.45}
.src-url{display:block; font-size:11.5px; color:var(--primary-600); margin-top:4px; font-weight:600}
.src-list{display:flex; flex-direction:column; gap:var(--sp-3)}
.src{display:flex; align-items:flex-start; gap:var(--sp-3); text-decoration:none; color:inherit;
  padding:var(--sp-4); border-radius:var(--radius); background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.src:active{transform:scale(.98)}
.src:hover{border-color:var(--border-strong)}
.src-go{flex:none; color:var(--faint); align-self:center}
.src-go svg{width:17px; height:17px}
.src-note{margin-top:var(--sp-4); font-size:12.5px; line-height:1.6; color:var(--muted);
  padding:var(--sp-4); border-radius:12px; background:var(--surface-2)}

/* ---- Quiz ---- */
.quiz-q{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--card-pad); box-shadow:var(--shadow-sm)}
.quiz-q .qn{font-size:12px; font-weight:700; color:var(--teal); letter-spacing:.05em; text-transform:uppercase}
.quiz-q .qbody{font-size:18px; font-weight:600; margin-top:var(--sp-3); line-height:1.4}
.opts{display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-5)}
.opt{display:flex; align-items:center; gap:var(--sp-3); text-align:left; width:100%;
  padding:12px var(--sp-4); border-radius:14px; border:1.5px solid var(--border);
  background:var(--surface); font-size:14.5px; min-height:52px;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease)}
.opt:active{transform:scale(.98)}
.opt .kbd{width:28px; height:28px; flex:none; border-radius:8px; background:var(--surface-2);
  display:grid; place-items:center; font-weight:700; font-size:13px; color:var(--muted)}
.opt.correct{border-color:var(--success); background:var(--success-bg)}
.opt.correct .kbd{background:var(--success); color:#fff}
.opt.wrong{border-color:var(--danger); background:var(--danger-bg)}
.opt.wrong .kbd{background:var(--danger); color:#fff}
.opt.dim{opacity:.55}
.opt:disabled{cursor:default}
.explain{margin-top:var(--sp-4); padding:var(--sp-4); border-radius:14px;
  background:var(--surface-2); border:1px solid var(--border); font-size:14px; line-height:1.55;
  animation:viewIn var(--dur) var(--ease)}
.explain b{color:var(--primary-600)}

.result{text-align:center; padding:var(--sp-7) var(--sp-5)}
.result .score{font-size:54px; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--primary),var(--teal)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent}
.result p{color:var(--muted); margin-top:8px}

/* ---- Cases ---- */
.case{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:var(--sp-3)}
.case-head{padding:var(--sp-4); width:100%; text-align:left; display:flex; align-items:center; gap:var(--sp-3)}
.case-head .ct{flex:1}
.case-head h3{font-size:15.5px}
.case-head .chev{transition:transform var(--dur) var(--ease); color:var(--muted)}
.case.open .chev{transform:rotate(90deg)}
.case-body{padding:0 var(--card-pad) var(--sp-4)}
.stem{background:var(--surface-2); border-radius:12px; padding:12px; font-size:13.5px; line-height:1.6}
.qline{font-weight:700; margin:var(--sp-4) 0 var(--sp-2); font-size:14.5px}
.reveal{margin-top:var(--sp-2)}
.steps{list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{position:relative; padding:10px 0 10px 34px; font-size:14px; line-height:1.55;
  border-bottom:1px dashed var(--border)}
.steps li:last-child{border-bottom:none}
.steps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:9px;
  width:24px; height:24px; border-radius:8px; background:var(--primary); color:var(--on-primary);
  display:grid; place-items:center; font-size:12px; font-weight:700}
.answer{margin-top:var(--sp-4); padding:var(--sp-4); border-radius:14px; font-size:14px; line-height:1.55;
  background:var(--success-bg); border:1px solid color-mix(in srgb,var(--success) 30%,var(--border))}
.answer b{color:var(--success)}

/* ---- Quick reference ---- */
.qr{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:var(--card-pad); margin-bottom:var(--sp-4)}
.qr h3{font-size:16px; margin-bottom:var(--sp-4); display:flex; align-items:center; gap:8px}
.qr h3 .dot{width:10px; height:10px; border-radius:3px; background:var(--teal)}
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px; min-width:280px}
.tbl th,.tbl td{padding:9px 10px; text-align:left; border-bottom:1px solid var(--border)}
.tbl th{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint)}
.tbl td:first-child{font-weight:600}
.tbl td:not(:first-child){font-variant-numeric:tabular-nums; color:var(--muted)}
.fx{display:flex; flex-direction:column; gap:2px}
.fx-row{display:flex; flex-direction:column; padding:10px 0; border-bottom:1px solid var(--border)}
.fx-row:last-child{border-bottom:none}
.fx-row .k{font-size:13px; font-weight:600}
.fx-row .v{font-size:13.5px; color:var(--teal); font-family:var(--font-alt);
  font-variant-numeric:tabular-nums; margin-top:3px}
.mn{display:flex; flex-direction:column; gap:var(--sp-2)}
.mn-row{display:flex; align-items:baseline; gap:var(--sp-3)}
.mn-row .l{width:26px; height:26px; flex:none; border-radius:8px; background:var(--primary);
  color:var(--on-primary); font-weight:800; display:grid; place-items:center; font-size:13px}
.mn-row .t{font-size:14px}
.note{margin-top:var(--sp-3); font-size:12.5px; color:var(--muted); font-style:italic}
.qsteps{list-style:none; margin:0; padding:0}
.qsteps li{padding:9px 0; font-size:14px; line-height:1.5; border-bottom:1px dashed var(--border); color:var(--fg)}
.qsteps li:last-child{border-bottom:none}

/* ---- Bottom nav ---- */
.bottomnav{position:fixed; left:0; right:0; bottom:0; z-index:50;
  max-width:var(--maxw); margin:0 auto; display:flex;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border)}
.navitem{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 0; color:var(--faint); font-size:11px; font-weight:600; min-height:52px;
  border-radius:12px; transition:color var(--dur) var(--ease)}
.navitem svg{width:24px; height:24px}
.navitem.active{color:var(--primary)}
.navitem:active{transform:scale(.94)}

/* ---- Empty state ---- */
.empty{text-align:center; padding:var(--sp-7) var(--sp-5); color:var(--muted)}
.empty svg{width:48px; height:48px; color:var(--faint); margin-bottom:var(--sp-3)}

/* ---- Toast ---- */
.toast{position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px); z-index:80; opacity:0;
  background:var(--fg); color:var(--bg); padding:10px 18px; border-radius:999px;
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .flash-inner{transition:none}
}
/* ---- Scale up from the mobile baseline ---------------------------------- */

/* Larger phones (iPhone 12/13/14/15, most Androids) */
@media (min-width:400px){
  :root{ --gutter:16px; --card-pad:18px;
         --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px; --sp-7:42px; }
  .topbar h1{font-size:18px}
  .scard-points li{font-size:15px}
  .fml{font-size:13.5px; padding:14px 12px}
  .stem{font-size:14px; padding:var(--sp-4)}
}

/* Small tablets and up: roomier, and comparisons go side-by-side */
@media (min-width:560px){
  :root{ --gutter:22px; --card-pad:22px; --radius:18px; --radius-lg:26px; }
  .view{padding-top:var(--sp-5)}
  .scard{padding:var(--sp-4) var(--card-pad) var(--sp-5)}
  .scard-points li{font-size:15.5px}
  .quiz-q .qbody{font-size:19px}
  .fml{font-size:14.5px}
}

/* Very small phones (e.g. 320px) — keep everything from touching the edges */
@media (max-width:339px){
  .mode-grid{grid-template-columns:1fr}
  .rng{flex-direction:column}
  .rng-b{display:flex; align-items:baseline; gap:8px; text-align:left; padding:8px 10px}
  .rng-l{margin-top:0}
  .hero-row{gap:var(--sp-3)}
}

/* Landscape phones: don't waste vertical space on the sticky bar */
@media (max-height:480px) and (orientation:landscape){
  .topbar{padding-top:calc(env(safe-area-inset-top) + 6px); padding-bottom:6px}
  .hero{padding:var(--sp-4) var(--card-pad)}
}