/* ============================================================================
NurseVerdict — Shared Design System (v2 — unified across all 4 phases)
Originally extracted from Phase 2 (MCQ exam simulator) + Phase 3 (rapid
revision), then used to build Phase 1 and Phase 4. This v2 pass folds in
two things that were flagged-but-not-done in the original extraction:
1. High-contrast mode now covers EVERY semantic token (purple/orange/red
and all the "-ink" text-safe variants), not just the original five
(maroon/gold/teal/coral/blue). Previously purple/orange/red content
went nearly invisible in high-contrast mode since they still rendered
with low-contrast light-theme colors.
2. The dyslexia-friendly font is now loaded by default (not an opt-in
per-phase `@import`), since all 4 phases now expose the toggle.
WHAT THIS FILE IS: the app-shell visual layer — tokens, header/nav chrome,
buttons, cards, chips, popovers, inputs, focus/touch-target rules, motion.
WHAT THIS FILE IS NOT: question/flashcard rendering, exam-integrity/print
features, or anything tied to one phase's specific content model. Those
stay local to each phase's own nurseverdict-phaseN.css.
Load this BEFORE a phase's own stylesheet so phase-specific rules can
still override anything here on equal specificity:
============================================================================ */
/* ---------------------------------------------------------------------------
Fonts — loaded via / in each
page's own , ahead of this stylesheet, not by @import here. An
@import blocks the browser from discovering the font request until AFTER
it's already fetched and parsed this whole file; a in lets
the browser discover and start the font request immediately, in parallel
with everything else. Same four families, same weights, same
display=swap — only when the request starts changed, not what loads.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
Design tokens — light theme (default)
--------------------------------------------------------------------------- */
:root{
/* surfaces + text */
--paper:#F5F6F8; --panel:#FFFFFF; --line:#E1E4EA; --ink:#1A1F2E;
--muted:#5A6472; /* WCAG-fixed value — the old #6B7280 sat at 4.47:1 on
--paper, just under AA's 4.5:1 floor for normal text.
This resolves to 5.55:1. Used everywhere now. */
/* brand */
--maroon:#7A1F3D; --maroon-dark:#5C1730;
--maroon-ink:#7A1F3D; /* text-safe variant, same convention as gold-ink/teal-drug-ink/red-ink
below -- in light mode this equals --maroon itself, since a dark
color as text on a light surface was never the problem; it only
needs to diverge in dark mode (see that block) */
/* semantic accents — each pairs with a light background tint; several also
have a themed "ink" (text-safe) variant for coloring text/labels sitting
directly on a tinted or neutral background rather than a solid fill. */
--gold:#C9971C; --gold-bg:#FBF1D8; --gold-ink:#8A6A10;
--teal:#1E8F72; --teal-bg:#E4F4EE; --teal-drug-ink:#0E7C6E;
--coral:#D8503A; --coral-bg:#FBEAE6;
--blue:#2F6FA8; --blue-bg:#E7EFF7;
--purple:#5B3FA3; --purple-bg:#F1EDFA;
--orange:#C06A1E; --orange-bg:#FCEEDD;
--red:#B5222A; --red-bg:#FBE9E9; --red-ink:#B5222A;
--navy-ink:#1A2A4F; --amber-ink:#8A5A00;
--eval-ok-ink:#156B54; --eval-bad-ink:#B23F26;
/* tinted surface for .group-header.accent */
--section-bg:#F6EAEF;
/* type */
--font-display:'Libre Caslon Text', Georgia, serif;
--font-ui:'Inter', system-ui, sans-serif;
--font-mono:'JetBrains Mono', monospace;
/* legacy compatibility: earlier Phase 3/4 CSS multiplied some font-sizes by
var(--scale). All 4 phases now scale via the html.fs-sm/md/lg classes
below instead (see "Text size control"), so this stays fixed at 1 — a
harmless no-op for anything that still references it. */
--scale:1;
}
html[data-theme="dark"]{
--paper:#14161C; --panel:#1C1F27; --line:#2C303B; --ink:#EDEEF2; --muted:#9099A8;
--gold-bg:#3A2E10; --gold-ink:#E8C468;
--teal-bg:#0F2A20; --teal-drug-ink:#4FBFA0;
--coral-bg:#3A1A14; --blue-bg:#122436;
--purple-bg:#241C3A; --orange-bg:#3A2712; --red-bg:#3A1414; --red-ink:#FF6B6B;
--navy-ink:#B9C6DE; --amber-ink:#F0C674;
--eval-ok-ink:#4FCFA5; --eval-bad-ink:#FF8A70;
--section-bg:#2A1620;
/* --maroon deliberately NOT overridden here -- it stays #7A1F3D,
inherited from :root, exactly as it was before this was investigated.
White text on that value is 10.04:1 (excellent) wherever --maroon is a
BACKGROUND FILL (hero banners, buttons, active tabs, table headers) --
that was never the accessibility problem, and brightening it here
(an earlier version of this fix did exactly that) repainted every one
of those large surfaces pink and, measured, actually dropped white-on-
maroon contrast from 10.04:1 to 3.15:1 -- a regression for normal-size
text, traded for a fix to a completely different problem.
--maroon-ink below is that actual fix: the same #E06B90 value, but
scoped to the many places --maroon was ALSO being used as small
foreground text/borders/links sitting directly on --panel/--paper
(5.24:1 / 5.75:1, genuinely passes AA) -- which is where the original,
real bug lived (1.64:1 / 1.80:1 -- essentially unreadable). Same
-ink pattern already used for gold/teal/red/navy/amber above; maroon
just never got its own dark-mode split until this. */
--maroon-ink:#E06B90;
}
/* High-contrast accessibility mode — token-level only. Now covers every
accent + ink token (light/dark theme both leave gaps here otherwise). */
html.contrast-high{
--paper:#000; --panel:#0A0A0A; --line:#fff; --ink:#fff; --muted:#EDEDED;
--maroon:#FF6B9E; --maroon-dark:#FF6B9E; --maroon-ink:#FF6B9E; --gold:#FFD400; --gold-bg:#3A2E00;
--teal:#3DFFC2; --teal-bg:#00382A; --coral:#FF7A5C; --coral-bg:#3A1206;
--blue:#7EC1FF; --blue-bg:#062038;
--purple:#C9A4FF; --purple-bg:#241542;
--orange:#FFB454; --orange-bg:#3A2400;
--red:#FF5C5C; --red-bg:#3A0808; --red-ink:#FF5C5C;
--gold-ink:#FFD400; --teal-drug-ink:#3DFFC2;
--navy-ink:#CFE6FF; --amber-ink:#FFC24B;
--eval-ok-ink:#3DFFC2; --eval-bad-ink:#FF5C5C;
--section-bg:#24081A;
}
/* Dyslexia-friendly font toggle. Apply html.font-dyslexic to . */
html.font-dyslexic body{ font-family:'Atkinson Hyperlegible', var(--font-ui); letter-spacing:.01em; }
/* ---------------------------------------------------------------------------
Base reset
--------------------------------------------------------------------------- */
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-ui); line-height:1.55; transition:background .2s, color .2s;}
button{font-family:var(--font-ui);}
mark{background:var(--gold); color:#3A2C05; padding:0 2px; border-radius:2px;}
/* App shell. max-width and display differ by phase on purpose (P2's quiz
layout wants 1120px + column flex for its sidebar; P3/P1's reading list
wants a tighter 900-960px, no flex) — set in each phase's own stylesheet. */
.frame{margin:0 auto; min-height:100vh;}
/* Keyboard focus — one global rule so any interactive element in any phase
gets a visible focus ring for free, with no per-class maintenance. */
:focus-visible{outline:2px solid var(--maroon-ink); outline-offset:2px;}
/* ---------------------------------------------------------------------------
Header / brandbar
One structure for all 4 phases: a .brand-block (brand name + optional
.chapter-name line, + optional streak display) opposite a .util-right
control cluster (chapters popover + settings popover).
--------------------------------------------------------------------------- */
/* Full-bleed fix: .brandbar renders as the first child inside .frame, and
.frame is width-capped + centered per phase (900-1120px, margin:0 auto).
Without this, the header is trapped in that same narrow centered column
instead of spanning the viewport like .site-nav does on every other page
-- on any screen wider than the phase's max-width you'd see bare page
background on both sides of the header. The negative-margin pair below
cancels out .frame's centering offset regardless of which max-width the
current phase uses, so this one rule fixes all four phases at once. */
header.brandbar{background:var(--maroon); color:#fff; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; width:auto; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:12px clamp(16px, 6vw, 96px);}
/* ---------------------------------------------------------------------------
Premium content gate (phase1-4.html) — full-screen cover shown while each
phase's Firestore-backed chapters are loading (see the bootstrap wrapper
at the end of each phase file's own script, and
shared/nurseverdict-phase-content.js for the fetch/access logic).
--------------------------------------------------------------------------- */
.nv-gate{position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:var(--paper); padding:24px;}
.nv-gate-box{max-width:420px; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:32px 28px; box-shadow:0 10px 30px rgba(0,0,0,.10);}
.nv-gate-spinner{width:32px; height:32px; margin:0 auto 16px; border:3px solid var(--line); border-top-color:var(--maroon-ink); border-radius:50%; animation:nvGateSpin .8s linear infinite;}
@keyframes nvGateSpin{to{transform:rotate(360deg);}}
.nv-gate-title{margin:0 0 8px; font-family:var(--font-display); font-size:22px; color:var(--ink);}
.nv-gate-msg{margin:0; color:var(--muted); font-size:15px; line-height:1.5;}
.nv-gate-actions{display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap;}
.nv-gate-actions a{display:inline-block; padding:10px 20px; border-radius:8px; font-weight:600; text-decoration:none; font-size:14px; min-height:44px; box-sizing:border-box; line-height:24px;}
.nv-gate-actions a.primary{background:var(--maroon); color:#fff;}
.nv-gate-actions a.secondary{background:transparent; color:var(--maroon-ink); border:1px solid var(--maroon-ink);}
@media (prefers-reduced-motion: reduce){.nv-gate-spinner{animation:none; border-top-color:var(--maroon-ink);}}
.brand-block{min-width:0;}
.brand{font-family:var(--font-display); font-weight:700; font-size:1.1rem;}
.brand a{color:inherit; text-decoration:none;}
.brand a:hover{text-decoration:underline;}
.brand .sub{display:inline; font-family:var(--font-ui); font-size:.65rem; color:#E9C9D3; text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin-left:7px;}
.chapter-name{font-size:.76rem; color:#F3D9E1; margin-top:3px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Positioning context for popovers (chapter picker, settings). Covers every
wrapper name any phase uses. */
.util-left, .util-right, .chapters-wrap{display:flex; gap:8px; align-items:center; flex-wrap:wrap; position:relative;}
/* A second, neutral bar above/below the brandbar — for phases that use a
two-tier header layout (controls on --paper instead of on maroon). */
.util-bar{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 20px; position:relative; z-index:20;}
/* ---------------------------------------------------------------------------
Icon buttons
Default = neutral surface, for use on --panel/--paper (e.g. a .util-bar).
Add .on-brand when the button sits directly on the maroon header — the
neutral colors are unreadable straight on maroon, and vice versa.
--------------------------------------------------------------------------- */
.icon-btn{background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:6px; min-width:44px; min-height:44px; padding:0 12px; cursor:pointer; font-size:.8rem; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap;}
.icon-btn:hover{border-color:var(--maroon-ink);}
.icon-btn.on-brand{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff;}
.icon-btn.on-brand:hover{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.35);}
.text-size-ctrl{display:flex; gap:3px;}
/* ---------------------------------------------------------------------------
Popovers — chapter picker + settings
chapter-pop defaults to right-aligned (matches a trigger in .util-right /
.chapters-wrap); add .align-left if the trigger sits on the left.
--------------------------------------------------------------------------- */
.chapter-pop, .settings-pop{position:absolute; top:48px; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.28); display:none; z-index:40;}
.chapter-pop.open, .settings-pop.open{display:block;}
.chapter-pop h4, .settings-pop h4{margin:0 0 8px; padding:0 4px; font-size:.68rem; text-transform:uppercase; color:var(--muted); letter-spacing:.5px;}
.chapter-pop{right:0; padding:10px; width:280px; max-height:360px; overflow-y:auto;}
.chapter-pop.align-left{left:0; right:auto;}
.chapter-item{display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left; padding:11px 10px; min-height:44px; border-radius:8px; border:1px solid transparent; background:none; cursor:pointer; font-family:var(--font-ui); font-size:.85rem; color:var(--ink); margin-bottom:4px;}
.chapter-item:hover{background:var(--paper);}
.chapter-item.active{border-color:var(--maroon-ink); background:var(--coral-bg);}
.chapter-item-locked{text-decoration:none; opacity:.75;}
.chapter-item-locked:hover{background:var(--gold-bg); opacity:1;}
.chapter-item-locked .ci-count{color:var(--gold-ink); font-weight:700;}
.ci-title{font-weight:600;}
.ci-tag{font-size:.6rem; font-weight:700; background:var(--maroon); color:#fff; padding:2px 6px; border-radius:10px; margin-left:6px;}
.ci-count{font-size:.72rem; color:var(--muted); font-family:var(--font-mono); white-space:nowrap; margin-left:10px;}
.settings-pop{right:0; padding:14px; width:230px;}
/* Equal-width joined toggle group (Theme / Text size / Accessibility rows
inside the settings popover) — the one settings UI used by all 4 phases. */
.seg{display:flex; gap:4px; margin-bottom:12px;}
.seg button{flex:1; min-height:44px; padding:6px 4px; font-size:.72rem; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:5px; cursor:pointer;}
.seg button.active{background:var(--maroon); color:#fff; border-color:var(--maroon);}
/* ---------------------------------------------------------------------------
Collapsible filters panel — a "Filters ▾" toggle that reveals an
on-demand panel (tag chips, section-jump) instead of showing everything
always-on. Identical need/markup in Phase 3 and Phase 4; shared here
instead of duplicated.
--------------------------------------------------------------------------- */
.filters-toggle{flex:0 0 auto; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-size:.78rem; font-weight:700; cursor:pointer; white-space:nowrap;}
.filters-toggle.has-active{border-color:var(--maroon-ink); color:var(--maroon-ink);}
.filters-panel{display:none; padding-top:10px;}
.filters-panel.open{display:block;}
/* ---------------------------------------------------------------------------
Chapter table of contents — a dedicated, always-reachable "jump to
section" list. Originated in Phase 1; Phase 3 and 4 use it too now.
--------------------------------------------------------------------------- */
.toc-toggle{display:flex; align-items:center; gap:10px; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 16px; cursor:pointer; font-family:var(--font-ui); font-size:.85rem; font-weight:700; color:var(--ink); margin:0 0 10px; min-height:44px;}
.toc-toggle .toc-toggle-icon{font-size:1.1rem;}
.toc-toggle .toc-toggle-count{margin-left:auto; font-weight:400; color:var(--muted); font-size:.76rem;}
.toc-toggle .toc-chevron{transition:transform var(--dur) var(--ease); color:var(--muted);}
.toc-toggle.open .toc-chevron{transform:rotate(180deg);}
.toc-list{display:flex; flex-direction:column; gap:8px; margin-bottom:16px; overflow:hidden; max-height:0; transition:max-height var(--dur-slow) var(--ease);}
.toc-list.open{max-height:3000px;}
.toc-item{display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:11px 16px; text-align:left; cursor:pointer; width:100%; min-height:44px; font-family:var(--font-ui);}
.toc-item:hover{border-color:var(--maroon-ink); transform:translateX(3px);}
.toc-num{flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--paper); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:.8rem; color:var(--muted);}
.toc-item.complete .toc-num{background:var(--teal); border-color:var(--teal); color:#fff;}
.toc-info{flex:1; min-width:0;}
.toc-title{font-weight:700; font-size:.86rem; color:var(--ink); font-family:var(--font-display); line-height:1.35;}
.toc-meta{font-size:.7rem; color:var(--muted); margin-top:4px; display:flex; align-items:center; gap:7px;}
.toc-meta .toc-bar{flex:0 0 54px; height:4px; background:var(--line); border-radius:2px; overflow:hidden;}
.toc-meta .toc-bar-fill{height:100%; background:var(--teal); border-radius:2px; transition:width var(--dur-slow) var(--ease);}
.toc-chevron-right{flex:0 0 auto; color:var(--muted); font-size:1.2rem;}
/* ---------------------------------------------------------------------------
Sticky "you are here" section indicator — the ONE thing that stays
pinned while scrolling a long list; search/filters scroll away normally.
Clickable: jumps back up to the table of contents to pick a different
section without needing to scroll all the way up by hand.
--------------------------------------------------------------------------- */
.current-section-bar{
display:none; position:sticky; top:0; z-index:25; width:100%; text-align:left;
align-items:center; gap:8px; background:var(--maroon); color:#fff; border:none;
padding:10px 16px; font-family:var(--font-display); font-weight:700; font-size:.82rem;
cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.current-section-bar.show{display:flex;}
.current-section-bar::after{content:"Tap to jump \u2192"; margin-left:auto; font-family:var(--font-ui); font-weight:600; font-size:.68rem; opacity:.8;}
/* ---------------------------------------------------------------------------
Clickable tag legend — tap a color chip to filter directly, instead of
opening a separate filter panel first. Multi-select: several can be
active at once.
--------------------------------------------------------------------------- */
.legend-chip{border:2px solid transparent; cursor:pointer; font-family:var(--font-ui); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.legend-chip:hover{transform:translateY(-1px);}
.legend-chip.active{border-color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.18); transform:translateY(-1px);}
/* ---------------------------------------------------------------------------
Pill-style filter/segmented buttons (.filter-bar .seg-inline)
--------------------------------------------------------------------------- */
.filter-bar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}
.filter-bar .seg-inline{display:flex; gap:4px; flex-wrap:wrap;}
.filter-bar .seg-inline button{font-size:.72rem; padding:0 14px; min-height:44px; border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:20px; cursor:pointer;}
.filter-bar .seg-inline button.active{background:var(--maroon); color:#fff; border-color:var(--maroon);}
.filter-bar select{font-size:.75rem; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink);}
/* ---------------------------------------------------------------------------
Chips / tags
.chip = translucent, for use on colored surfaces (hero banners, streaks).
.type-chip = solid, for use on neutral surfaces; add .filterable for the
clickable/44px-target version used in tag filters.
--------------------------------------------------------------------------- */
.chip{background:rgba(255,255,255,.14); border-radius:20px; padding:5px 13px; font-size:.75rem; display:inline-flex; align-items:center; gap:5px;}
.type-chip{font-size:.65rem; font-weight:700; text-transform:uppercase; padding:3px 9px; border-radius:20px; background:var(--panel); color:var(--muted); border:1px solid var(--line); display:inline-flex; align-items:center; gap:5px;}
.type-chip.filterable{cursor:pointer; min-height:44px; padding:0 12px; white-space:nowrap; flex:0 0 auto;}
.type-chip.filterable .sw{width:8px; height:8px; border-radius:2px; display:inline-block;}
.type-chip.active{color:#fff; border-color:transparent;}
/* ---------------------------------------------------------------------------
KPI stat cards
--------------------------------------------------------------------------- */
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px;}
.kpi-row.auto{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px 14px; text-align:center;}
.kpi .v{font-family:var(--font-mono); font-size:1.2rem; font-weight:700;}
.kpi .l{font-size:.65rem; color:var(--muted); text-transform:uppercase; margin-top:2px;}
.kpi.crit .v{color:var(--coral);}
.kpi.gold .v{color:var(--gold-ink);}
.kpi.done .v{color:var(--teal);}
/* ---------------------------------------------------------------------------
Progress bar
Bare .compare-track/.compare-fill = a single thin progress bar. Nest
inside .compare-row for a labeled multi-bar comparison chart.
--------------------------------------------------------------------------- */
.compare-track{background:var(--paper); border-radius:4px; height:9px; overflow:hidden; border:1px solid var(--line);}
.compare-fill{height:100%; border-radius:4px; background:var(--teal); transition:width .3s ease;}
.compare-row{display:flex; align-items:center; gap:12px; margin-bottom:9px; font-size:.82rem;}
.compare-row .lbl{width:100px; flex-shrink:0; color:var(--muted); font-weight:600;}
.compare-row .compare-track{flex:1; height:16px;}
.compare-row .val{width:46px; text-align:right; font-family:var(--font-mono); font-weight:700;}
/* ---------------------------------------------------------------------------
General control button
--------------------------------------------------------------------------- */
button.ctrl{font-size:.8rem; font-weight:600; padding:0 15px; min-height:44px; border-radius:5px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; white-space:nowrap;}
button.ctrl:hover{background:var(--paper);}
button.ctrl.primary{background:var(--maroon); color:#fff; border-color:var(--maroon);}
button.ctrl.primary:hover{background:var(--maroon-dark);}
button.ctrl.mark{color:var(--gold); border-color:var(--gold);}
button.ctrl:disabled{opacity:.4; cursor:not-allowed;}
/* Plain underlined text-action button (e.g. "Reset progress", "Clear filters") */
.link-btn{border:none; background:none; color:var(--maroon-ink); font-size:.7rem; font-weight:700; text-decoration:underline; cursor:pointer; padding:4px;}
/* ---------------------------------------------------------------------------
Text input
--------------------------------------------------------------------------- */
input[type="text"], input[type="search"]{padding:10px 12px; min-height:44px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-family:var(--font-ui); font-size:.88rem; min-width:0;}
.name-row{display:flex; gap:8px;}
.name-row input{flex:1;}
/* ---------------------------------------------------------------------------
Collapsible group / accordion
Base = plain/neutral treatment, works for any grouped list. For a more
prominent "section navigator" look, add .group-header.accent.
--------------------------------------------------------------------------- */
.group-block{margin-bottom:10px;}
.group-header{display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:11px 16px; min-height:44px; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--ink); text-align:left;}
.group-header .count{font-weight:400; color:var(--muted); font-size:.78rem;}
.group-header .chev{transition:transform .15s; color:var(--muted);}
.group-header.open .chev{transform:rotate(90deg);}
.group-header.accent{background:var(--section-bg); border-left:4px solid var(--maroon-ink); border-radius:8px 0 0 8px; font-family:var(--font-display);}
.group-body{display:none; padding-top:8px;}
.group-body.open{display:block;}
/* ---------------------------------------------------------------------------
Toast (ephemeral status message) — one shared look for all 4 phases.
--------------------------------------------------------------------------- */
.toast-msg{position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:8px; font-size:.8rem; font-weight:600; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:9999; max-width:88%; text-align:center;}
.toast-msg.show{opacity:1; transform:translateX(-50%) translateY(0);}
/* ---------------------------------------------------------------------------
Modal system — replaces native confirm()/alert() everywhere so dialogs
look and behave consistently (and reliably — some in-app browsers/webviews
block native dialogs). Originated in Phase 2; now shared.
--------------------------------------------------------------------------- */
.modal-overlay{position:fixed; inset:0; background:rgba(10,12,16,.55); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:10000; padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px 26px; max-width:440px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.35);}
.modal-box h3{margin:0 0 10px; font-family:var(--font-display); font-size:1.15rem;}
.modal-box p{margin:0 0 8px; font-size:.88rem; color:var(--muted); line-height:1.55;}
.modal-box .modal-stats{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0;}
.modal-box .modal-stats span{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:.76rem; font-family:var(--font-mono);}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}
.modal-actions button{padding:9px 18px; border-radius:8px; font-size:.85rem; font-weight:600; cursor:pointer; border:1px solid var(--line); background:var(--paper); color:var(--ink);}
.modal-actions button.primary{background:var(--maroon); border-color:var(--maroon); color:#fff;}
/* ---------------------------------------------------------------------------
Empty state
--------------------------------------------------------------------------- */
.empty-state{text-align:center; padding:50px 20px; color:var(--muted);}
.empty-state .big{font-size:2rem; margin-bottom:8px;}
/* ---------------------------------------------------------------------------
Motion system — consistent, short, interruptible transitions on anything
that changes state, respecting prefers-reduced-motion throughout.
--------------------------------------------------------------------------- */
:root{ --dur:.18s; --dur-slow:.28s; --ease:cubic-bezier(.4,0,.2,1); }
.icon-btn, button.ctrl, .chapter-card, .type-chip, .filter-bar .seg-inline button,
.seg button, .chapter-item, .link-btn, .concept-card, .diff-pill{
transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
color var(--dur) var(--ease), transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.icon-btn:active, button.ctrl:active, .type-chip:active, .chapter-card:active,
.filter-bar .seg-inline button:active, .seg button:active{ transform:scale(.96); }
.chapter-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
@keyframes nv-pop{ 0%{transform:scale(1);} 40%{transform:scale(1.18);} 100%{transform:scale(1);} }
@keyframes nv-fade-up{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
@keyframes nv-slide-up-sheet{ from{transform:translateY(100%);} to{transform:translateY(0);} }
@keyframes nv-spin{ to{ transform:rotate(360deg); } }
.pop-anim{ animation:nv-pop .32s var(--ease); }
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
/* ---------------------------------------------------------------------------
Text-size control — root font-size classes. rem units cascade
automatically, so this needs zero per-element wiring. This is the ONE
text-size mechanism for all 4 phases (some phases previously used a
`--scale` CSS-variable multiplier instead; that approach is retired —
see nurseverdict-phaseN.css files, which were converted to plain rem).
--------------------------------------------------------------------------- */
html.fs-sm{font-size:14px;}
html.fs-md{font-size:16px;}
html.fs-lg{font-size:18px;}
/* ---------------------------------------------------------------------------
Reading-progress bar + back-to-top — a small shared affordance for any
phase with a long scrolling view (used on Phase 1, 3, 4's list/reading
screens; harmless/inert if a phase never triggers it).
--------------------------------------------------------------------------- */
.read-progress{position:fixed; top:0; left:0; height:3px; background:var(--teal); z-index:300; width:0%; transition:width .1s linear;}
.back-to-top{position:fixed; right:18px; bottom:18px; width:48px; height:48px; border-radius:50%; background:var(--maroon); color:#fff; border:none; box-shadow:0 6px 18px rgba(0,0,0,.25); cursor:pointer; font-size:1.2rem; display:flex; align-items:center; justify-content:center; z-index:150; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);}
.back-to-top:hover{background:var(--maroon-dark);}
.read-time{font-size:.72rem; color:var(--muted); display:inline-flex; align-items:center; gap:4px;}