/* ══════════════════════════════════════════════════════════════════════════
   EM-CPs stylesheet — read this first
   ──────────────────────────────────────────────────────────────────────────
   This file is append-only: each design-system release adds a layer and nothing
   is ever removed, so the LAST rule in the file always wins. Layers, in order:

     v3    base tokens, typography, buttons, topbar, sidebar, stage   (~line 1)
     v4    cross-browser hardening and fallbacks                      (~3377)
     v4.1  inset/sticky/gap fallbacks                                 (~3882)
     v4.2  ECG schematic figures                                      (~3896)
     v5    clinical clean                                             (~6170)
     v5.1  tighten and unify                                          (~6659)
     v6    modern polish, depth                                       (~6770)
     iOS27 bottom tab bar, liquid glass, accordions, shift view       (~7710)
     print final overrides                                            (end of file)

   Why there is no @layer yet: layering is the right end state, but @layer
   REVERSES the precedence of !important — in an earlier layer wins. Source order
   makes the last one win. This file still carries 984 of them, so wrapping the
   ascending sections in layers would silently invert every one. Measured, not
   assumed: stripping all 984 changes 513 computed values across the sampled
   views (header labels go from display:block to flex, 10.56px to 11.04px).

   The !important are not mechanical to remove either. Stripping the first 24
   rules that carry them looks clean on screen, but it restores every transition
   under prefers-reduced-motion and shifts print typography — 9,477 changed
   values once those media states are compared. They are holding up real
   conflicts, so removing one means resolving the rules it is fighting, rule by
   rule. Verify any attempt with:
     node dev/style-snapshot.js /tmp/base.json
     node dev/style-snapshot.js /tmp/after.json --diff /tmp/base.json
   which compares every element across six views in three media states
   (screen, reduced-motion, print) and exits non-zero on any change.
   dev/important-batch.js enumerates the affected rules by index.

   Consequences to keep in mind when editing here:
     • A selector is often declared in several layers. Change the LAST one.
     • ~980 !important declarations are load-bearing; grep the selector before
       removing one, or a later layer silently wins.
     • 24 @media print blocks are deliberately left where they are. Gathering
       them at the end would be tidier, but several screen layers set display
       with !important and would then be overridden on paper. tests/style-audit
       .test.js asserts the print result so any move must be verified first.
     • z-index scale (do not invent new values; keep the tab bar between the
       topbar and the drawer):
         stage content < 90 topbar | 100 ios-tabbar | 105 side-backdrop
         110 sidebar | 150 results-pop | 400 toast | 500 ecg-lightbox
         600 skip-link | 1000 disclaimer-overlay  (native <dialog> = top layer)
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════ EM-CPs Design System v3 — Professional Medical Grade ══════════ */
/* Self-hosted variable UI face. One file covers the whole weight range the
   design system asks for (--font-weight-body 500 … --font-weight-title 800), so
   headings render in a true 800 instead of a synthesised bold. `swap` keeps
   first paint on the system stack, which matters on a slow hospital link. */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/PlusJakartaSans-Variable.ttf?v=20260928-outline-r1") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
    scroll-padding-top: calc(var(--topbar-h, 73px) + 12px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Variable font: let the face pick its optical size per point size. */
    font-optical-sizing: auto;
    font-size: calc(16px * var(--type-scale, 1));
}

:root {
    --type-scale: 1;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 9999px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    --touch-target: 44px;
    --transition-fast: 150ms;
    --transition-base: 220ms;
    --transition-smooth: 280ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Light Theme — neutral clinical surfaces (accent-agnostic) */
    --bg: #f7faf9;
    --ink: #0f241e;
    --ink-soft: #4a635a;
    --line: #dbe6e1;
    --line-subtle: #ebf2ef;
    --card: #ffffff;
    --card-elevated: #ffffff;
    --card-rgb: 255, 255, 255;
    --card-elevated-rgb: 255, 255, 255;
    /* Default accent: emerald (light) */
    --brand: #0b3d2e;
    --brand-2: #105944;
    --accent: #0f9d76;
    --accent-2: #2dd4a8;
    --accent-light: #e6f7f2;
    --accent-rgb: 15, 157, 118;
    --shadow-rgb: 16, 89, 68;
    --on-fill: #ffffff;
    --on-mark: #05241a;
    --mark-1: #2dd4a8;
    --mark-2: #0f9d76;
    --gold: #d97706;
    --gold-bg: #fffbeb;
    --critical: #dc2626;
    --critical-bg: #fef2f2;
    --critical-line: #fecaca;
    --emergent: #ea580c;
    --emergent-bg: #fff7ed;
    --emergent-line: #fed7aa;
    --common: #16a34a;
    --common-bg: #f0fdf4;
    --common-line: #bbf7d0;
    --topbar-bg: rgba(247, 250, 249, 0.82);
    --foot-bg: #edf3f0;
    --hover-line: #a0d9c5;
    --home-hover: #f0f8f4;
    --ov-job-bg: linear-gradient(135deg, #f0fbf6 0%, #e8f6f0 100%);
    --ov-job-line: #bfe8d8;
    --rf-box-bg: #fff8f8;
    --rf-box-line: #fca5a5;
    --rf-mid-bg: #fff7ed;
    --rf-mid-ink: #c2410c;
    --pearls-bg: #f0fdf7;
    --pearls-line: #bbf7d0;
    --pitfalls-bg: #fffbeb;
    --pitfalls-line: #fde68a;
    --pitfalls-ink: #92400e;
    --shadow-sm: 0 1px 3px rgba(15, 36, 30, 0.05), 0 1px 2px rgba(15, 36, 30, 0.03);
    --shadow: 0 4px 12px rgba(15, 36, 30, 0.06), 0 1px 3px rgba(15, 36, 30, 0.03);
    --shadow-lg: 0 10px 28px rgba(15, 36, 30, 0.08), 0 4px 10px rgba(15, 36, 30, 0.05);
    --shadow-float: 0 18px 42px rgba(15, 36, 30, 0.14);
    --side-w: 268px;
    --grad-brand: linear-gradient(135deg, #0b3d2e 0%, #115c46 55%, #0f9d76 100%);
    --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Liquid Glass tokens (iOS 27) */
    --glass-blur-sm: 12px;
    --glass-blur-md: 20px;
    --glass-blur-lg: 28px;
    --glass-saturate: 180%;
    --glass-bg-primary: rgba(255, 255, 255, 0.78);
    --glass-bg-card: rgba(255, 255, 255, 0.65);
    --glass-bg-pill: rgba(0, 0, 0, 0.04);
    /* The tab bar floats over ECG paper and its numeric labels. Frosted glass
       there blurs a QRS complex behind a nav control, which is a misread risk, so
       the bar keeps only a slight tint and stays effectively opaque. */
    --glass-bg-bar: rgba(255, 255, 255, 0.97);
    --glass-border-subtle: rgba(0, 0, 0, 0.07);
    --glass-border-highlight: rgba(255, 255, 255, 0.85);
    --surface-1: rgba(0, 0, 0, 0.03);
    --surface-2: rgba(0, 0, 0, 0.05);
    /* Sidebar — always dark, tinted per accent (emerald default) */
    --side-bg-1: #093326;
    --side-bg-2: #0c4232;
    --side-bg-3: #082a20;
    --side-ink: #eafaf3;
    --side-muted: #d1eee3;
    --side-sub: #9ccfbd;
    --side-label: #8acbb6;
    /* Chevron glyph for sidebar group disclosure (drawn as a mask so it
       inherits the current text colour in every accent). */
    --side-caret-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 5l7 7-7 7z'/%3E%3C/svg%3E");
    --side-note: #84beab;
    --side-scroll: #1a5e4a;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --glass-bg-primary: rgba(15, 23, 42, 0.75);
    --glass-bg-card: rgba(30, 41, 59, 0.45);
    --glass-bg-pill: rgba(255, 255, 255, 0.06);
    --glass-bg-bar: rgba(11, 17, 15, 0.97);
    --glass-border-subtle: rgba(255, 255, 255, 0.08);
    --glass-border-highlight: rgba(255, 255, 255, 0.18);
    --surface-1: rgba(255, 255, 255, 0.04);
    --surface-2: rgba(255, 255, 255, 0.08);
    --bg: #0b110f;
    --ink: #edf7f3;
    --ink-soft: #9bb5ab;
    --line: #1c2f28;
    --line-subtle: #14231d;
    --card: #111e18;
    --card-elevated: #162720;
    --card-rgb: 17, 30, 24;
    --card-elevated-rgb: 22, 39, 32;
    --brand: #6ee7b7;
    --brand-2: #34d399;
    --accent: #2dd4a8;
    --accent-2: #10b981;
    --accent-light: rgba(var(--accent-rgb), 0.14);
    --accent-rgb: 45, 212, 168;
    --shadow-rgb: 45, 212, 168;
    --on-fill: #05241a;
    --gold: #fbbf24;
    --gold-bg: rgba(251, 191, 36, 0.14);
    --critical: #f87171;
    --critical-bg: #2d1414;
    --critical-line: #5c2222;
    --emergent: #fb923c;
    --emergent-bg: #2d1d12;
    --emergent-line: #5c381a;
    --common: #4ade80;
    --common-bg: #122818;
    --common-line: #225230;
    --topbar-bg: rgba(11, 17, 15, 0.82);
    --foot-bg: #0d1714;
    --hover-line: #2e5f50;
    --home-hover: #162a22;
    --ov-job-bg: linear-gradient(135deg, #132b22 0%, #0f221b 100%);
    --ov-job-line: #244d3f;
    --rf-box-bg: #241313;
    --rf-box-line: #6b2828;
    --rf-mid-bg: #291c10;
    --rf-mid-ink: #fdba74;
    --pearls-bg: #122920;
    --pearls-line: #234f3e;
    --pitfalls-bg: #262010;
    --pitfalls-line: #54441e;
    --pitfalls-ink: #fde68a;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-float: 0 20px 48px rgba(0, 0, 0, 0.75);
    --grad-brand: linear-gradient(135deg, #093829 0%, #0d4a37 55%, #106e53 100%);
}

/* ══════════ Accent themes — user-selectable, light + dark ══════════
   Severity (critical/emergent/common), gold, pitfalls stay fixed for
   clinical meaning. Only brand/accent + tinted surfaces change. */

/* ——— Emerald (default green) explicit ——— */
html[data-accent="emerald"] {
    --brand: #0b3d2e; --brand-2: #105944; --accent: #0f9d76; --accent-2: #2dd4a8;
    --accent-light: #e6f7f2; --accent-rgb: 15, 157, 118; --shadow-rgb: 16, 89, 68;
    --on-fill: #ffffff; --on-mark: #05241a; --mark-1: #2dd4a8; --mark-2: #0f9d76;
    --bg: #f7faf9; --ink: #0f241e; --ink-soft: #4a635a; --line: #dbe6e1; --line-subtle: #ebf2ef;
    --topbar-bg: rgba(247, 250, 249, 0.82); --foot-bg: #edf3f0;
    --hover-line: #a0d9c5; --home-hover: #f0f8f4;
    --ov-job-bg: linear-gradient(135deg, #f0fbf6 0%, #e8f6f0 100%); --ov-job-line: #bfe8d8;
    --grad-brand: linear-gradient(135deg, #0b3d2e 0%, #115c46 55%, #0f9d76 100%);
    --side-bg-1: #093326; --side-bg-2: #0c4232; --side-bg-3: #082a20;
    --side-muted: #d1eee3; --side-sub: #9ccfbd; --side-label: #8acbb6; --side-note: #84beab; --side-scroll: #1a5e4a;
}
html[data-theme="dark"][data-accent="emerald"] {
    --brand: #6ee7b7; --brand-2: #34d399; --accent: #2dd4a8; --accent-2: #10b981;
    --accent-light: rgba(var(--accent-rgb), 0.14); --accent-rgb: 45, 212, 168; --shadow-rgb: 45, 212, 168;
    --on-fill: #05241a;
    --bg: #0b110f; --ink: #edf7f3; --ink-soft: #9bb5ab; --line: #1c2f28; --line-subtle: #14231d;
    --card: #111e18; --card-elevated: #162720; --card-rgb: 17, 30, 24; --card-elevated-rgb: 22, 39, 32;
    --topbar-bg: rgba(11, 17, 15, 0.82); --foot-bg: #0d1714;
    --hover-line: #2e5f50; --home-hover: #162a22;
    --ov-job-bg: linear-gradient(135deg, #132b22 0%, #0f221b 100%); --ov-job-line: #244d3f;
    --grad-brand: linear-gradient(135deg, #093829 0%, #0d4a37 55%, #106e53 100%);
}

/* ——— Ocean (clinical blue) ——— */
html[data-accent="ocean"] {
    --brand: #0b2e5e; --brand-2: #1d4fa1; --accent: #2563eb; --accent-2: #60a5fa;
    --accent-light: #eff6ff; --accent-rgb: 37, 99, 235; --shadow-rgb: 29, 79, 161;
    --on-fill: #ffffff; --on-mark: #081a38; --mark-1: #60a5fa; --mark-2: #2563eb;
    --bg: #f6f8fc; --ink: #0f1c33; --ink-soft: #475a77; --line: #d8e1ee; --line-subtle: #e9eff7;
    --topbar-bg: rgba(246, 248, 252, 0.82); --foot-bg: #e9edf4;
    --hover-line: #a4c3ef; --home-hover: #f0f5fe;
    --ov-job-bg: linear-gradient(135deg, #f0f5fd 0%, #e6effe 100%); --ov-job-line: #bfd4f5;
    --grad-brand: linear-gradient(135deg, #0b2e5e 0%, #1a4fa0 55%, #2563eb 100%);
    --side-bg-1: #0a2247; --side-bg-2: #12365f; --side-bg-3: #081a36;
    --side-muted: #d3e3f8; --side-sub: #a9c6ee; --side-label: #8fb4e8; --side-note: #7fa5d8; --side-scroll: #1e4a7a;
}
html[data-theme="dark"][data-accent="ocean"] {
    --brand: #93c5fd; --brand-2: #60a5fa; --accent: #60a5fa; --accent-2: #2563eb;
    --accent-light: rgba(96, 165, 250, 0.14); --accent-rgb: 96, 165, 250; --shadow-rgb: 96, 165, 250;
    --on-fill: #081a38;
    --bg: #0b1019; --ink: #e8eef8; --ink-soft: #94a5bd; --line: #1c283c; --line-subtle: #141d2d;
    --card: #111a28; --card-elevated: #162234; --card-rgb: 17, 26, 40; --card-elevated-rgb: 22, 34, 52;
    --topbar-bg: rgba(11, 16, 25, 0.82); --foot-bg: #0c1424;
    --hover-line: #2b5078; --home-hover: #152236;
    --ov-job-bg: linear-gradient(135deg, #12233a 0%, #0e1c2f 100%); --ov-job-line: #23405f;
    --grad-brand: linear-gradient(135deg, #0a2050 0%, #153a7d 55%, #1d4fb0 100%);
}

/* ——— Violet ——— */
html[data-accent="violet"] {
    --brand: #2e1a6b; --brand-2: #5b34c4; --accent: #7c3aed; --accent-2: #a78bfa;
    --accent-light: #f5f3ff; --accent-rgb: 124, 58, 237; --shadow-rgb: 91, 52, 196;
    --on-fill: #ffffff; --on-mark: #1e1048; --mark-1: #a78bfa; --mark-2: #7c3aed;
    --bg: #f8f6fc; --ink: #1b1430; --ink-soft: #5b4f75; --line: #e2dcf0; --line-subtle: #eeebf7;
    --topbar-bg: rgba(248, 246, 252, 0.82); --foot-bg: #ece8f4;
    --hover-line: #c4b0f0; --home-hover: #f3effe;
    --ov-job-bg: linear-gradient(135deg, #f4f0fd 0%, #ece5fd 100%); --ov-job-line: #d3c4f5;
    --grad-brand: linear-gradient(135deg, #2e1a6b 0%, #5b34c4 55%, #7c3aed 100%);
    --side-bg-1: #1e1247; --side-bg-2: #2f1f6b; --side-bg-3: #190f3d;
    --side-muted: #ddd2f8; --side-sub: #bdaef0; --side-label: #ab94ec; --side-note: #9a86d6; --side-scroll: #4a3690;
}
html[data-theme="dark"][data-accent="violet"] {
    --brand: #c4b5fd; --brand-2: #a78bfa; --accent: #a78bfa; --accent-2: #7c3aed;
    --accent-light: rgba(167, 139, 250, 0.14); --accent-rgb: 167, 139, 250; --shadow-rgb: 167, 139, 250;
    --on-fill: #1e1048;
    --bg: #0f0d1a; --ink: #ece7f8; --ink-soft: #a59abf; --line: #27213d; --line-subtle: #1c172e;
    --card: #161226; --card-elevated: #1c1830; --card-rgb: 22, 18, 38; --card-elevated-rgb: 28, 24, 48;
    --topbar-bg: rgba(15, 13, 26, 0.82); --foot-bg: #120f1e;
    --hover-line: #4d3c80; --home-hover: #221c38;
    --ov-job-bg: linear-gradient(135deg, #1e1836 0%, #181430 100%); --ov-job-line: #3d2f63;
    --grad-brand: linear-gradient(135deg, #21134f 0%, #3a2490 55%, #5b34c4 100%);
}

/* ——— Rose (refined berry — clearly distinct from critical red) ——— */
html[data-accent="rose"] {
    --brand: #58122d; --brand-2: #9d174d; --accent: #be185d; --accent-2: #f472b6;
    --accent-light: #fdf2f8; --accent-rgb: 190, 24, 93; --shadow-rgb: 157, 23, 77;
    --on-fill: #ffffff; --on-mark: #38081a; --mark-1: #f472b6; --mark-2: #be185d;
    --bg: #faf5f7; --ink: #30111b; --ink-soft: #714e59; --line: #ebd8df; --line-subtle: #f5e8ed;
    --topbar-bg: rgba(250, 245, 247, 0.82); --foot-bg: #f4e9ee;
    --hover-line: #ee9fb9; --home-hover: #fdf2f5;
    --ov-job-bg: linear-gradient(135deg, #fdf2f5 0%, #fce7ef 100%); --ov-job-line: #f3bdd0;
    --grad-brand: linear-gradient(135deg, #58122d 0%, #9d174d 55%, #be185d 100%);
    --side-bg-1: #3b0c1e; --side-bg-2: #58122d; --side-bg-3: #2d0716;
    --side-muted: #f6d2df; --side-sub: #efa5bf; --side-label: #e691b0; --side-note: #d47898; --side-scroll: #7a2644;
}
html[data-theme="dark"][data-accent="rose"] {
    --brand: #fbcfe8; --brand-2: #f472b6; --accent: #f472b6; --accent-2: #db2777;
    --accent-light: rgba(244, 114, 182, 0.14); --accent-rgb: 244, 114, 182; --shadow-rgb: 244, 114, 182;
    --on-fill: #38081a;
    --bg: #140d12; --ink: #fae8f0; --ink-soft: #c299a9; --line: #391f2a; --line-subtle: #29151e;
    --card: #1f1219; --card-elevated: #271720; --card-rgb: 31, 18, 25; --card-elevated-rgb: 39, 23, 32;
    --topbar-bg: rgba(20, 13, 18, 0.82); --foot-bg: #190e14;
    --hover-line: #722d46; --home-hover: #2f1522;
    --ov-job-bg: linear-gradient(135deg, #2b131f 0%, #220f18 100%); --ov-job-line: #5b2138;
    --grad-brand: linear-gradient(135deg, #480c25 0%, #76123d 55%, #9d174d 100%);
}

/* ——— Amber (warm honey/bronze — clearly distinct from emergent orange) ——— */
html[data-accent="amber"] {
    --brand: #4a2800; --brand-2: #8a4805; --accent: #b45309; --accent-2: #f59e0b;
    --accent-light: #fefbeb; --accent-rgb: 180, 83, 9; --shadow-rgb: 138, 72, 5;
    --on-fill: #ffffff; --on-mark: #381e00; --mark-1: #f59e0b; --mark-2: #b45309;
    --bg: #faf6ef; --ink: #312108; --ink-soft: #705f45; --line: #e8dbc3; --line-subtle: #f3ebd8;
    --topbar-bg: rgba(250, 246, 239, 0.82); --foot-bg: #f1ecde;
    --hover-line: #e5c183; --home-hover: #fef8ec;
    --ov-job-bg: linear-gradient(135deg, #fdf7eb 0%, #fbedd4 100%); --ov-job-line: #ecd0a0;
    --grad-brand: linear-gradient(135deg, #4a2800 0%, #8a4805 55%, #b45309 100%);
    --side-bg-1: #2e1a03; --side-bg-2: #482806; --side-bg-3: #241402;
    --side-muted: #f3dfbe; --side-sub: #e6be87; --side-label: #dcad6c; --side-note: #c5934f; --side-scroll: #694519;
}
html[data-theme="dark"][data-accent="amber"] {
    --brand: #fde68a; --brand-2: #f59e0b; --accent: #fbbf24; --accent-2: #d97706;
    --accent-light: rgba(251, 191, 36, 0.14); --accent-rgb: 251, 191, 36; --shadow-rgb: 251, 191, 36;
    --on-fill: #381e00;
    --bg: #131008; --ink: #faf0da; --ink-soft: #c1ab80; --line: #362e1a; --line-subtle: #262012;
    --card: #1c170e; --card-elevated: #241e12; --card-rgb: 28, 23, 14; --card-elevated-rgb: 36, 30, 18;
    --topbar-bg: rgba(19, 16, 8, 0.82); --foot-bg: #161206;
    --hover-line: #695328; --home-hover: #29200f;
    --ov-job-bg: linear-gradient(135deg, #251e0e 0%, #1e180b 100%); --ov-job-line: #54411a;
    --grad-brand: linear-gradient(135deg, #381e00 0%, #683704 55%, #8a4805 100%);
}

/* ——— Teal (cyan) ——— */
html[data-accent="teal"] {
    --brand: #07333b; --brand-2: #0c6a82; --accent: #0891b2; --accent-2: #22d3ee;
    --accent-light: #e6fbf8; --accent-rgb: 8, 145, 178; --shadow-rgb: 12, 106, 130;
    --on-fill: #ffffff; --on-mark: #052e33; --mark-1: #22d3ee; --mark-2: #0891b2;
    --bg: #f4f8f8; --ink: #0e2326; --ink-soft: #4a6668; --line: #d6e4e5; --line-subtle: #e6eeee;
    --topbar-bg: rgba(244, 248, 248, 0.82); --foot-bg: #e6efef;
    --hover-line: #8fd4e0; --home-hover: #eefafa;
    --ov-job-bg: linear-gradient(135deg, #effafa 0%, #e2f5f7 100%); --ov-job-line: #b3e0e8;
    --grad-brand: linear-gradient(135deg, #07333b 0%, #0e6b7a 55%, #0891b2 100%);
    --side-bg-1: #07333b; --side-bg-2: #0c4f5a; --side-bg-3: #052025;
    --side-muted: #c9eaf2; --side-sub: #93d0dc; --side-label: #7cc4d4; --side-note: #6aafbe; --side-scroll: #155e6a;
}
html[data-theme="dark"][data-accent="teal"] {
    --brand: #a5f3fc; --brand-2: #22d3ee; --accent: #22d3ee; --accent-2: #0891b2;
    --accent-light: rgba(34, 211, 238, 0.14); --accent-rgb: 34, 211, 238; --shadow-rgb: 34, 211, 238;
    --on-fill: #052e33;
    --bg: #0b1214; --ink: #e3f4f5; --ink-soft: #91afb1; --line: #1c2e32; --line-subtle: #142326;
    --card: #111e21; --card-elevated: #16262a; --card-rgb: 17, 30, 33; --card-elevated-rgb: 22, 38, 42;
    --topbar-bg: rgba(11, 18, 20, 0.82); --foot-bg: #0b1516;
    --hover-line: #2c5f5c; --home-hover: #122826;
    --ov-job-bg: linear-gradient(135deg, #102724 0%, #0c1f1e 100%); --ov-job-line: #1f4a48;
    --grad-brand: linear-gradient(135deg, #052e33 0%, #0b4a4f 55%, #0e6b7a 100%);
}

/* ─────────── Typography & Base Resets ─────────── */
body {
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.55;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: background-color var(--transition-smooth) ease, color var(--transition-smooth) ease;
}

html[data-weight="bold"] {
    --font-weight-body: 500;
    --font-weight-title: 800;
}
html:not([data-weight="bold"]) {
    --font-weight-body: 400;
    --font-weight-title: 700;
}

body { font-weight: var(--font-weight-body, 400); }
strong, b, h1, h2, h3, h4, h5, h6, .brand-text strong, .btn, .chip, .home-btn {
    font-weight: var(--font-weight-title, 700);
}

button {
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

a, button, select, input, textarea, [role="button"], [tabindex] {
    touch-action: manipulation;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}
:focus:not(:focus-visible) {
    outline: none;
}

.skip-link {
    position: fixed;
    left: 16px;
    top: -80px;
    z-index: 600;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--on-fill);
    font-weight: 800;
    text-decoration: none;
    font-size: 0.88rem;
    box-shadow: var(--shadow-lg);
    transition: top var(--transition-smooth) var(--ease-out);
}
.skip-link:focus { top: 16px; }

.noscript {
    margin: 20px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink);
}

::selection { background: rgba(var(--accent-rgb), 0.32); color: inherit; }
::-moz-selection { background: rgba(var(--accent-rgb), 0.32); color: inherit; }

/* ─────────── Scrollbars (accent-tinted) ─────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--hover-line);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

* { scrollbar-width: thin; scrollbar-color: var(--hover-line) transparent; }
html[data-theme="dark"] { scrollbar-color: var(--ov-job-line) transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--ov-job-line);
    border-color: var(--bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--hover-line); }

/* ─────────── Sidebar (accent-tinted, always dark) ─────────── */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--side-w);
    background: linear-gradient(180deg, var(--side-bg-1) 0%, var(--side-bg-2) 50%, var(--side-bg-3) 100%);
    color: var(--side-ink);
    z-index: 110;
    display: flex;
    flex-direction: column;
    padding: max(18px, env(safe-area-inset-top, 18px)) 14px calc(16px + env(safe-area-inset-bottom, 16px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--side-scroll) transparent;
    -webkit-overflow-scrolling: touch;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.28);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--side-scroll); border-radius: var(--radius-full); }

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px 18px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    min-height: var(--touch-target);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast) ease;
}
.brand:hover { background: rgba(255, 255, 255, 0.06); }
.brand:active { background: rgba(255, 255, 255, 0.1); }
.brand:hover .brand-mark { transform: scale(1.05) rotate(-2deg); }

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--mark-1) 0%, var(--mark-2) 100%);
    color: var(--on-mark);
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: -0.5px;
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.38);
    transition: transform var(--transition-smooth) var(--ease-spring), box-shadow var(--transition-base) ease;
}
.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.brand-text strong {
    display: block;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.brand-text span {
    font-size: 0.72rem;
    color: var(--side-sub);
    line-height: 1.3;
    font-weight: 500;
}

.side-group { margin-bottom: 12px; }
.side-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--side-label);
    padding: 8px 10px 4px;
    line-height: 1.4;
}
.side-list { display: flex; flex-direction: column; gap: 3px; }
.side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--side-muted);
    font-size: 0.86rem;
    font-weight: 600;
    border: 1px solid transparent;
    width: 100%;
    text-align: left;
    background: none;
    font-family: inherit;
    min-height: var(--touch-target);
    transition: background var(--transition-fast) ease, transform var(--transition-fast) ease, color var(--transition-fast) ease;
}
.side-item i.ico {
    font-style: normal;
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.side-item:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
    transform: translateX(3px);
}
.side-item:active {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(1px);
}
.side-item.active {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.24) 0%, rgba(var(--accent-rgb), 0.12) 100%);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: #ffffff;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--accent-2), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.side-item.side-home {
    margin-bottom: 6px;
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.32);
    background: rgba(var(--accent-rgb), 0.14);
}

.side-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.side-btn {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
    color: var(--side-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    min-height: var(--touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.side-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}
.side-btn:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.98);
}
.install-btn:hover { background: rgba(var(--accent-rgb), 0.3); }

.side-note {
    font-size: 0.65rem;
    color: var(--side-note);
    margin-top: 12px;
    line-height: 1.5;
    text-align: center;
}

.side-backdrop {
    position: fixed;
    inset: 0;
    z-index: 105;
    background: rgba(6, 18, 14, 0.65);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-smooth) var(--ease-out);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.side-backdrop.show { opacity: 1; pointer-events: auto; }

/* ─────────── Main Layout ─────────── */
.main {
    margin-left: var(--side-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─────────── Topbar ─────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: max(10px, env(safe-area-inset-top, 10px)) 24px 10px;
    background: var(--topbar-bg);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    transition: background-color var(--transition-smooth) ease, border-color var(--transition-smooth) ease;
}

.burger { display: none; }
.tools-toggle {
    display: none;
    height: var(--touch-target);
    min-height: var(--touch-target);
    min-width: var(--touch-target);
    padding: 0 12px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--brand-2);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.tools-toggle:hover {
    border-color: var(--accent);
    background: var(--home-hover);
    color: var(--brand-2);
}
.tools-toggle:active {
    transform: scale(0.96);
}
.tools-toggle[aria-expanded="true"] {
    background: var(--brand-2);
    color: #ffffff;
    border-color: var(--brand-2);
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.25);
}
html[data-theme="dark"] .tools-toggle[aria-expanded="true"] {
    background: var(--accent);
    color: var(--on-fill);
    border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.3);
}

.topbar-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ─────────── General Buttons ─────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--ink);
    min-height: var(--touch-target);
    padding: 0 16px;
    transition: background var(--transition-fast) ease,
                border-color var(--transition-fast) ease,
                color var(--transition-fast) ease,
                box-shadow var(--transition-fast) ease,
                transform var(--transition-fast) ease;
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}
.btn:hover {
    border-color: var(--accent);
    background: var(--home-hover);
    color: var(--brand-2);
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* Home & Utility Topbar Buttons */
.home-btn {
    flex: none;
    height: var(--touch-target);
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--line);
    background: var(--card);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--brand-2);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.home-btn:hover {
    border-color: var(--accent);
    background: var(--home-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.home-btn:active { transform: scale(0.96); }
.home-btn.on-home {
    background: var(--brand-2);
    color: #ffffff;
    border-color: var(--brand-2);
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.25);
}
html[data-theme="dark"] .home-btn.on-home {
    background: var(--accent);
    color: var(--on-fill);
    border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.3);
}

.home-btn .header-icon {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1;
}
.home-btn .header-label { font-size: 0.82rem; }

.utility-btn { color: var(--ink); }

.icon-btn {
    border: 1.5px solid var(--line);
    background: var(--card);
    border-radius: var(--radius-md);
    width: var(--touch-target);
    height: var(--touch-target);
    font-size: 1.15rem;
    cursor: pointer;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.icon-btn:hover {
    border-color: var(--accent);
    background: var(--home-hover);
    color: var(--brand-2);
}
.icon-btn:active { transform: scale(0.94); }

/* Severity Filter Chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
    border: 1.5px solid var(--line);
    background: var(--card);
    border-radius: var(--radius-full);
    padding: 6px 13px;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--ink-soft);
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--hover-line);
    color: var(--ink);
}
.chip:active { transform: scale(0.97); }
.chip.active {
    color: #ffffff;
    font-weight: 800;
    border-color: transparent;
}
.chip-all.active {
    background: var(--brand-2);
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.25);
}
html[data-theme="dark"] .chip-all.active {
    background: var(--accent);
    color: var(--on-fill);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}
.chip-critical.active {
    background: #b91c1c;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}
.chip-emergent.active {
    background: #c2410c;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
}
.chip-common.active {
    background: #15803d;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}
html[data-theme="dark"] .chip-critical.active,
html[data-theme="dark"] .chip-emergent.active,
html[data-theme="dark"] .chip-common.active {
    /* Severity keeps fixed clinical meaning — neutral dark text on bright bg */
    color: #101613;
}
html[data-theme="dark"] .chip-critical.active { background: var(--critical); }
html[data-theme="dark"] .chip-emergent.active { background: var(--emergent); }
html[data-theme="dark"] .chip-common.active { background: var(--common); }

/* Reading Preference Tools */
.pref-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}
.pref-btn {
    height: var(--touch-target);
    min-width: var(--touch-target);
    padding: 0 10px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--line);
    background: var(--card);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.pref-btn:hover {
    border-color: var(--accent);
    background: var(--home-hover);
    color: var(--brand-2);
}
.pref-btn:active { transform: scale(0.94); }
.pref-btn[aria-pressed="true"] {
    background: var(--brand-2);
    color: #ffffff;
    border-color: var(--brand-2);
}
html[data-theme="dark"] .pref-btn[aria-pressed="true"] {
    background: var(--accent);
    color: var(--on-fill);
    border-color: var(--accent);
}
.pref-scale {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ink-soft);
    min-width: 2.8em;
    text-align: center;
}

/* ─────────── Accent color picker (user-selectable app theme) ─────────── */
.accent-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 4px 6px 4px 10px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}
.accent-label {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}
.accent-dots { display: flex; align-items: center; gap: 4px; }
.accent-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--dot, var(--accent));
    cursor: pointer;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65), var(--shadow-sm);
    transition: transform var(--transition-fast) ease, border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
    touch-action: manipulation;
}
.accent-dot:hover { transform: scale(1.12); border-color: var(--accent); }
.accent-dot:active { transform: scale(0.94); }
.accent-dot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.accent-dot[aria-pressed="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent), var(--shadow-sm);
    transform: scale(1.08);
}
html[data-theme="dark"] .accent-dot {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), var(--shadow-sm);
}
html[data-theme="dark"] .accent-dot[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent), var(--shadow-sm);
}
.accent-dot[data-accent="emerald"] { --dot: #0f9d76; }
.accent-dot[data-accent="ocean"] { --dot: #2563eb; }
.accent-dot[data-accent="violet"] { --dot: #7c3aed; }
.accent-dot[data-accent="rose"] { --dot: #be185d; }
.accent-dot[data-accent="amber"] { --dot: #b45309; }
.accent-dot[data-accent="teal"] { --dot: #0891b2; }

/* ─────────── Search Experience ─────────── */
.searchwrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    max-width: 440px;
    min-height: var(--touch-target);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.searchwrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18), var(--shadow);
}
.search-ico {
    opacity: 0.6;
    font-size: 0.95rem;
    flex-shrink: 0;
}
#searchInput {
    border: none;
    outline: none;
    background: none;
    width: 100%;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--ink);
    min-width: 0;
    line-height: 1.4;
}
#searchInput::placeholder { color: var(--ink-soft); opacity: 0.8; }
#searchInput::-webkit-search-cancel-button { display: none; }

.search-clear-btn {
    border: 0;
    background: var(--bg);
    color: var(--ink-soft);
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all var(--transition-fast) ease;
}
.search-clear-btn:hover { background: var(--line); color: var(--ink); }
.search-clear-btn:active { transform: scale(0.9); }

.search-kbd {
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink-soft);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: inherit;
    flex-shrink: 0;
}

.results-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    max-height: 400px;
    overflow-y: auto;
    z-index: 150;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    animation: popIn 0.18s var(--ease-out) both;
}
@keyframes popIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.res-item {
    display: flex;
    width: 100%;
    padding: 10px 14px;
    cursor: pointer;
    border: 0;
    border-bottom: 1px solid var(--line-subtle);
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    min-height: var(--touch-target);
    align-items: center;
    gap: 12px;
    transition: background var(--transition-fast) ease;
}
.res-item:last-child { border-bottom: none; }
.res-item:hover, .res-item.active {
    background: var(--home-hover);
}
.res-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: var(--ov-job-bg);
    color: var(--brand-2);
}
.res-ico .mono-ico {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}
.res-ico .emoji-ico {
    font-size: 1.15rem;
}
.res-body {
    flex: 1;
    min-width: 0;
}
.res-item .r-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--brand-2);
}
.res-item .r-sub {
    font-size: 0.74rem;
    color: var(--ink-soft);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.res-item .r-tag {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    flex-shrink: 0;
}

/* ─────────── Stage & Foot ─────────── */
.stage {
    flex: 1;
    padding: var(--space-2xl) clamp(16px, 4vw, 48px) var(--space-3xl);
    outline: none;
    scroll-padding-top: calc(var(--topbar-h, 73px) + 12px);
}
.foot {
    padding: var(--space-xl) clamp(16px, 4vw, 48px) var(--space-2xl);
    color: var(--ink-soft);
    font-size: 0.76rem;
    border-top: 1px solid var(--line);
    background: var(--foot-bg);
}
.foot p {
    max-width: 960px;
    line-height: 1.6;
}

/* ─────────── Toast Notification ─────────── */
.toast {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--card);
    color: var(--ink);
    border: 1.5px solid var(--accent);
    font-size: 0.84rem;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: var(--radius-full);
    z-index: 400;
    opacity: 0;
    transition: transform var(--transition-smooth) var(--ease-spring), opacity var(--transition-smooth) ease;
    box-shadow: var(--shadow-float);
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ─────────── Home Hero (accent gradient, neutral white text fits all accents) ─────────── */
.hero {
    background: var(--grad-brand);
    border-radius: var(--radius-xl);
    color: #ffffff;
    padding: var(--space-2xl) clamp(20px, 4.5vw, 48px);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.hero::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.35) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.hero h1 {
    font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #ffffff;
}
.hero p {
    max-width: 780px;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.94rem;
    line-height: 1.55;
}

/* ─────────── Study Dashboard (Home) ─────────── */
.study-dashboard {
    margin: 0 0 var(--space-xl);
    padding: 20px 24px;
    border: 1.5px solid var(--ov-job-line);
    border-radius: var(--radius-lg);
    background: var(--ov-job-bg);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
}
.study-kicker, .resus-kicker, .case-practice-head > span, .shift-kicker, .study-page-head > span {
    display: block;
    color: var(--accent);
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.study-dashboard h2 {
    font-size: 1.1rem;
    margin-top: 2px;
    color: var(--ink);
}
.study-dashboard p {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    max-width: 580px;
}
.study-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.study-stat {
    min-width: 86px;
    padding: 9px 12px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    text-align: center;
    min-height: var(--touch-target);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.study-stat:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.study-stat:active { transform: scale(0.97); }
.study-stat strong {
    color: var(--brand-2);
    font-size: 1.1rem;
    line-height: 1.2;
}
.study-stat span {
    color: var(--ink-soft);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}
.study-stat.accent {
    background: var(--brand-2);
    border-color: var(--brand-2);
    box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.25);
}
.study-stat.accent strong, .study-stat.accent span { color: #ffffff; }
html[data-theme="dark"] .study-stat.accent {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
}
html[data-theme="dark"] .study-stat.accent strong,
html[data-theme="dark"] .study-stat.accent span { color: var(--on-fill); }

/* ─────────── Patient Context Chips ─────────── */
.patient-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    overflow-x: auto;
    padding: 4px 0 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.patient-filter::-webkit-scrollbar { display: none; }
.patient-filter > span {
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-right: 4px;
}
.patient-chip {
    flex: none;
    padding: 7px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--card);
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.patient-chip:hover {
    border-color: var(--hover-line);
    color: var(--ink);
    transform: translateY(-1px);
}
.patient-chip:active { transform: scale(0.97); }
.patient-chip.active {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.25);
}
html[data-theme="dark"] .patient-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-fill);
}

/* ─────────── Home Groups & Cards ─────────── */
.home-group { margin-bottom: var(--space-2xl); }
.group-title {
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 6px 2px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}
.group-title span {
    font-size: 0.7rem;
    letter-spacing: 0;
    font-weight: 800;
    color: var(--brand-2);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    padding: 2px 9px;
}
.empty-filter {
    color: var(--ink-soft);
    padding: 20px 4px;
    font-size: 0.9rem;
}
.cp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.cp-card {
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 22px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    width: 100%;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-smooth) var(--ease-out),
                box-shadow var(--transition-smooth) ease,
                border-color var(--transition-smooth) ease;
    min-height: var(--touch-target);
    display: flex;
    flex-direction: column;
    will-change: transform;
    contain: layout style;
}
.cp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--grad-brand);
    opacity: 0;
    transition: opacity var(--transition-smooth) ease;
}
.cp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--hover-line);
}
.cp-card:hover::before { opacity: 1; }
.cp-card:active { transform: translateY(-1px) scale(0.99); }
.cp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cp-card .cp-ico {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 6px;
}
.cp-card h3 {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ink);
}
.cp-card p {
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin-top: 4px;
    line-height: 1.45;
    flex: 1;
}
.cp-card .cp-count {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 0.68rem;
    font-weight: 800;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    border-radius: var(--radius-full);
    padding: 3px 9px;
}
.cp-reviewed {
    display: inline-block;
    margin-top: 10px;
    color: var(--brand-2);
    font-size: 0.7rem;
    font-weight: 800;
}
.cp-saved {
    display: inline-block;
    margin: 8px 0 0;
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 800;
}

/* ─────────── Presentation Hero ─────────── */
.cp-hero {
    border-radius: var(--radius-xl);
    padding: 28px clamp(20px, 3.5vw, 40px);
    margin-bottom: var(--space-lg);
    background: var(--grad-brand);
    color: #ffffff;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.cp-hero .cp-ico-lg { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
.cp-hero h1 {
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #ffffff;
}
.cp-hero .tag {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.92rem;
    margin-top: 4px;
    line-height: 1.45;
}
.back-btn {
    min-height: var(--touch-target);
    padding: 8px 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--brand-2);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.back-btn:hover {
    border-color: var(--accent);
    background: var(--home-hover);
    transform: translateY(-1px);
}
.back-btn:active { transform: scale(0.96); }

.cp-hero .back-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--radius-full);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.cp-hero .back-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ─────────── Fast Case Orientation Rail ─────────── */
.case-rail {
    display: grid;
    grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.9fr);
    gap: 14px;
    align-items: center;
    margin: 0 0 var(--space-lg);
    padding: 16px 20px;
    border: 1.5px solid var(--ov-job-line);
    border-radius: var(--radius-lg);
    background: var(--ov-job-bg);
    box-shadow: var(--shadow-sm);
}
.case-rail-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--brand-2);
}
.case-rail-title > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: rgba(var(--accent-rgb), 0.16);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.case-rail-title strong {
    display: block;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--ink);
}
.case-rail-title small {
    display: block;
    margin-top: 1px;
    color: var(--ink-soft);
    font-size: 0.72rem;
}
.case-steps {
    display: flex;
    gap: 8px;
    list-style: none;
}
.case-steps li {
    flex: 1;
    min-width: 0;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--ink);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.04);
}
html[data-theme="dark"] .case-steps li {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.06);
}
.case-steps li > span {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border-radius: var(--radius-full);
    background: var(--brand-2);
    color: #ffffff;
    font-size: 0.64rem;
    font-weight: 900;
    vertical-align: top;
}
html[data-theme="dark"] .case-steps li > span {
    background: var(--accent);
    color: var(--on-fill);
}
.case-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}
.case-action {
    border: 1.5px solid var(--ov-job-line);
    background: var(--card);
    color: var(--brand-2);
    border-radius: var(--radius-full);
    padding: 6px 12px;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.case-action:hover {
    border-color: var(--accent);
    background: var(--home-hover);
    transform: translateY(-1px);
}
.case-action:active { transform: scale(0.96); }
.case-action.primary {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: #ffffff;
}
html[data-theme="dark"] .case-action.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-fill);
}

/* ─────────── Quick Cards (Resus, Pivots, Plan, Loop) ─────────── */
.resus-card, .management-pivots, .personal-plan, .learning-loop {
    margin: 0 0 var(--space-lg);
    padding: 20px 24px;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1.5px solid var(--line);
    box-shadow: var(--shadow);
}
.resus-card h2, .management-pivots h2, .personal-plan h2, .learning-head h2 {
    margin-top: 2px;
    font-size: 1.05rem;
    color: var(--ink);
}
.resus-card > div > p, .personal-plan > div > p {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--ink-soft);
    line-height: 1.45;
}
.resus-grid > div, .pivot-grid > div {
    padding: 13px 15px;
    border-radius: var(--radius-md);
    background: var(--bg);
    border: 1px solid var(--line);
}
.resus-grid strong, .pivot-grid span {
    display: block;
    color: var(--brand-2);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.resus-grid p, .pivot-grid p {
    margin-top: 5px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink);
}
.pivot-title > span {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--brand-2);
    font-weight: 900;
    font-size: 1.1rem;
}
.pivot-title p { color: var(--ink-soft); font-size: 0.78rem; }

.personal-plan {
    background: var(--ov-job-bg);
    border-color: var(--ov-job-line);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 20px;
}
.personal-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.save-topic {
    padding: 8px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.save-topic:hover { border-color: var(--accent); }
.save-topic:active { transform: scale(0.97); }
.save-topic.active {
    color: #854d0e;
    background: var(--gold-bg);
    border-color: var(--gold);
}
html[data-theme="dark"] .save-topic.active { color: #fbbf24; }

.review-status, #noteStatus {
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 700;
}
.personal-plan label, .personal-plan textarea, .note-actions { grid-column: 1 / -1; }
.personal-plan label {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.personal-plan textarea {
    width: 100%;
    resize: vertical;
    padding: 12px 14px;
    border: 1.5px solid var(--ov-job-line);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 0.84rem;
    transition: border-color var(--transition-fast) ease;
}
.personal-plan textarea:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.note-actions { display: flex; align-items: center; gap: 10px; }

/* ─────────── Learning Loop / Rapid Recall ─────────── */
.learning-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.learning-head p {
    max-width: 700px;
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}
.review-btn {
    flex: none;
    border: 1.5px solid var(--ov-job-line);
    border-radius: var(--radius-full);
    background: var(--card);
    color: var(--brand-2);
    padding: 8px 16px;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 900;
    cursor: pointer;
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.review-btn:hover { border-color: var(--accent); }
.review-btn:active { transform: scale(0.96); }
.review-btn[aria-pressed="true"] {
    border-color: var(--brand-2);
    background: var(--brand-2);
    color: #ffffff;
}
html[data-theme="dark"] .review-btn[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-fill);
}

.recall-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.recall-card {
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg);
}
.recall-card > span {
    display: block;
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.recall-card p {
    min-height: 2.7em;
    margin: 6px 0 10px;
    color: var(--ink);
    font-size: 0.84rem;
    line-height: 1.45;
}
.reveal-btn {
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--brand-2);
    padding: 7px 12px;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.reveal-btn:hover { border-color: var(--accent); background: var(--home-hover); }
.reveal-btn:active { transform: scale(0.96); }
.reveal-answer {
    margin-top: 10px;
    padding: 11px 13px;
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--ov-job-bg);
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.5;
    animation: fadeIn 0.2s var(--ease-out) both;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─────────── Section Cards (Collapsible Accordions) ─────────── */
.section-card {
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 18px;
    overflow: hidden;
    scroll-margin-top: calc(var(--topbar-h, 73px) + 12px);
    contain: layout style;
    transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.sec-heading {
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    display: block;
}

.sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 22px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--ink);
    text-align: left;
    min-height: var(--touch-target);
    transition: background var(--transition-fast) ease;
}
.sec-head:hover { background: var(--bg); }
.sec-head .sec-ico {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: rgba(var(--accent-rgb), 0.14);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.sec-head .arrow {
    margin-left: auto;
    transition: transform var(--transition-smooth) var(--ease-out);
    color: var(--ink-soft);
    font-size: 0.82rem;
}
.section-card.closed .arrow { transform: rotate(-90deg); }
.sec-body { padding: 4px 22px 20px; }
.section-card.closed .sec-body { display: none; }
.section-card.section-focus,
.ecg-pattern.section-focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2), var(--shadow-lg);
}

.sec-body ul { list-style: none; }
.sec-body > ul > li {
    padding: 8px 0 8px 24px;
    position: relative;
    font-size: 0.88rem;
    border-bottom: 1px dashed var(--line);
    line-height: 1.55;
}
.sec-body > ul > li:last-child { border-bottom: none; }
.sec-body > ul > li::before {
    content: '▸';
    position: absolute;
    left: 4px;
    color: var(--accent);
    font-weight: 800;
}
.sec-body strong { color: var(--brand-2); }
.plain-list li {
    padding: 6px 0 6px 22px;
    position: relative;
    font-size: 0.82rem;
    border-bottom: 1px dashed var(--line);
    list-style: none;
    line-height: 1.5;
}
.plain-list li:last-child { border-bottom: none; }
.plain-list li::before {
    content: '▸';
    position: absolute;
    left: 4px;
    color: var(--accent);
    font-weight: 800;
}

/* ─────────── Overview (How to Think) ─────────── */
.ov { padding: 4px 0 2px; }
.ov-job {
    background: var(--ov-job-bg);
    border: 1px solid var(--ov-job-line);
    border-left: 5px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--brand-2);
    line-height: 1.4;
    margin-bottom: 16px;
}
.ov-kicker {
    display: block;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}
.ov-steps {
    list-style: none;
    display: grid;
    gap: 9px;
    margin: 0 0 16px;
}
.ov-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 11px 14px;
}
.ov-n {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: var(--grad-brand);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 800;
}
.ov-s {
    font-size: 0.88rem;
    line-height: 1.5;
    padding-top: 2px;
    color: var(--ink);
}
.ov-prose p {
    font-size: 0.88rem;
    color: var(--ink-soft);
    line-height: 1.6;
}
.ov-prose p + p { margin-top: 8px; }

/* ─────────── Don’t Miss DX Cards ─────────── */
.dx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}
.dx-card {
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    padding: 15px 17px;
    border-left-width: 5px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-smooth) var(--ease-out),
                box-shadow var(--transition-smooth) ease;
}
.dx-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.dx-card.sev-critical {
    border-left-color: var(--critical);
    background: var(--critical-bg);
}
.dx-card.sev-emergent {
    border-left-color: var(--emergent);
    background: var(--emergent-bg);
}
.dx-card.sev-common {
    border-left-color: var(--common);
    background: var(--common-bg);
}
.dx-card h3, .dx-card h4 {
    font-size: 0.94rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    line-height: 1.3;
}
.dx-card.sev-critical h3, .dx-card.sev-critical h4 { color: var(--critical); }
.dx-card.sev-emergent h3, .dx-card.sev-emergent h4 { color: var(--emergent); }
.dx-card.sev-common h3, .dx-card.sev-common h4 { color: var(--common); }
.dx-card .sev-tag {
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    color: #ffffff;
}
.dx-card.sev-critical .sev-tag { background: var(--critical); }
.dx-card.sev-emergent .sev-tag { background: var(--emergent); }
.dx-card.sev-common .sev-tag { background: var(--common); }
.dx-card .dx-key {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--ink);
    line-height: 1.45;
}

/* ─────────── Clusters & Workup ─────────── */
.cluster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}
.cluster {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 13px 15px;
}
.cluster h3, .cluster h4 {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-2);
    margin-bottom: 6px;
}
.cluster p {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--ink);
}

.wu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.wu-col {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.wu-col h3, .wu-col h4 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-2);
    margin-bottom: 8px;
}
.wu-col ul { list-style: none; }
.wu-col li {
    font-size: 0.82rem;
    padding: 5px 0 5px 18px;
    position: relative;
    line-height: 1.5;
}
.wu-col li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--accent);
    font-weight: 900;
}

/* ─────────── Interactive Red Flag Checklist ─────────── */
.rf-box {
    background: var(--rf-box-bg);
    border: 1.5px dashed var(--rf-box-line);
    border-radius: var(--radius-md);
    padding: 18px;
}
.rf-tools {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: -2px 0 10px;
}
.rf-clear {
    border: 1.5px solid var(--rf-box-line);
    border-radius: var(--radius-full);
    background: var(--card);
    color: var(--ink-soft);
    padding: 5px 12px;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.rf-clear:hover {
    border-color: var(--critical);
    color: var(--critical);
    background: var(--critical-bg);
}
.rf-clear:active { transform: scale(0.96); }

.rf-banner {
    display: none;
    margin-bottom: 14px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.86rem;
    font-weight: 800;
    animation: fadeIn 0.25s var(--ease-out) both;
}
.rf-banner.show { display: block; }
.rf-banner.level-high {
    background: var(--critical);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}
.rf-banner.level-mid {
    background: var(--rf-mid-bg);
    color: var(--rf-mid-ink);
    border: 1px solid var(--rf-box-line);
}
.rf-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast) ease;
}
.rf-item:hover { background: rgba(220, 38, 38, 0.06); }
.rf-item input {
    width: 20px;
    height: 20px;
    accent-color: var(--critical);
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.rf-item span {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--ink);
}
.rf-item:has(input:checked) { background: rgba(220, 38, 38, 0.1); }
.rf-item input:checked + span {
    color: var(--critical);
    font-weight: 800;
}
.rf-progress {
    height: 8px;
    background: #fee2e2;
    border-radius: var(--radius-full);
    margin-top: 14px;
    overflow: hidden;
}
html[data-theme="dark"] .rf-progress { background: #3d1c1c; }
.rf-progress i {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f87171, var(--critical));
    border-radius: var(--radius-full);
    transition: width var(--transition-smooth) var(--ease-out);
}

/* ─────────── Disposition ─────────── */
.disp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.disp-col {
    border-radius: var(--radius-md);
    padding: 15px 17px;
    border: 1.5px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.disp-col h3, .disp-col h4 {
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.disp-col.d-discharge { background: var(--common-bg); border-color: var(--common-line); }
.disp-col.d-discharge h3, .disp-col.d-discharge h4 { color: var(--common); }
.disp-col.d-admit { background: var(--emergent-bg); border-color: var(--emergent-line); }
.disp-col.d-admit h3, .disp-col.d-admit h4 { color: var(--emergent); }
.disp-col.d-icu { background: var(--critical-bg); border-color: var(--critical-line); }
.disp-col.d-icu h3, .disp-col.d-icu h4 { color: var(--critical); }
.disp-col ul { list-style: none; }
.disp-col li {
    font-size: 0.82rem;
    padding: 4px 0 4px 16px;
    position: relative;
    line-height: 1.5;
    color: var(--ink);
}
.disp-col li::before {
    content: '›';
    position: absolute;
    left: 4px;
    font-weight: 900;
    color: var(--ink-soft);
}

/* ─────────── Pearls & Pitfalls ─────────── */
.pp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.pp-box {
    border-radius: var(--radius-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}
.pp-box h3, .pp-box h4 {
    font-size: 0.88rem;
    margin-bottom: 8px;
}
.pp-box.pearls {
    background: var(--pearls-bg);
    border: 1.5px solid var(--pearls-line);
}
.pp-box.pearls h3, .pp-box.pearls h4 { color: var(--brand-2); }
.pp-box.pitfalls {
    background: var(--pitfalls-bg);
    border: 1.5px solid var(--pitfalls-line);
}
.pp-box.pitfalls h3, .pp-box.pitfalls h4 { color: var(--pitfalls-ink); }
.pp-box li {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink);
}

.refs { font-size: 0.8rem; color: var(--ink-soft); list-style: none; padding: 2px 0; }
.refs li { border-bottom: 1px solid var(--line-subtle) !important; padding: 8px 0 8px 22px !important; position: relative; line-height: 1.5; }
.refs li:last-child { border-bottom: none !important; }
.refs li::before {
    content: "" !important;
    position: absolute;
    left: 4px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-2);
    opacity: 0.7;
}

/* ─────────── Related & Pagers ─────────── */
.related { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 4px; }
.related-chip {
    border: 1.5px solid var(--line);
    background: var(--card);
    border-radius: var(--radius-full);
    padding: 7px 14px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--brand-2);
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.related-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--hover-line);
}
.related-chip:active { transform: scale(0.97); }
.ecg-entry:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
}
.ecg-entry:active { transform: scale(0.99); }
.ecg-entry span:not(.ecg-entry-ico) { flex: 1; min-width: 0; }
.ecg-entry strong {
    display: block;
    font-size: 0.95rem;
    color: var(--brand-2);
}
.ecg-entry small {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    color: var(--ink-soft);
}
.ecg-entry b { color: var(--accent); font-size: 0.9rem; }

.ecg-subhead {
    margin-top: 8px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
    max-width: 46rem;
}
.ecg-step-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--space-lg);
}
.ecg-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 12px 6px 8px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.ecg-step-chip span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--grad-brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}
.ecg-step-chip:hover { border-color: var(--accent); background: var(--home-hover); }

.ecg-killers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin: 0 0 var(--space-lg);
}
.ecg-killer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: var(--touch-target);
    padding: 10px 12px;
    border: 1.5px solid var(--critical-line);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--critical-bg);
    color: var(--ink);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.ecg-killer strong { font-size: 0.78rem; line-height: 1.3; }
.ecg-killer small { font-size: 0.68rem; color: var(--ink-soft); }
.ecg-killer:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.ecg-summary {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin: 0 0 10px;
    line-height: 1.5;
}
.ecg-details { list-style: none; }
.ecg-details > li.ecg-sub {
    padding-left: 36px;
    font-size: 0.82rem;
    color: var(--ink);
}
.ecg-details > li.ecg-sub::before { content: '–'; color: var(--ink-soft); }
.ecg-pp { margin-top: 12px; }
.ecg-pp p { font-size: 0.82rem; line-height: 1.55; color: var(--ink); }

.ecg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.ecg-pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.ecg-pattern {
    border: 1.5px solid var(--line);
    border-left-width: 5px;
    border-radius: var(--radius-md);
    padding: 14px 16px 16px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}
.ecg-pattern.sev-critical { border-left-color: var(--critical); }
.ecg-pattern.sev-emergent { border-left-color: var(--emergent); }
.ecg-pattern.sev-common { border-left-color: var(--common); }
.ecg-pattern header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.ecg-pattern h3 {
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--ink);
}
.ecg-tagline {
    font-size: 0.76rem;
    color: var(--ink-soft);
    margin: 4px 0 10px;
}
.ecg-pattern p, .ecg-action, .ecg-caution, .ecg-leads {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-top: 8px;
    color: var(--ink);
}
.ecg-cat {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
.ecg-action {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--accent-light);
    border: 1px solid var(--ov-job-line);
}
.ecg-caution {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--pitfalls-bg);
    border: 1px solid var(--pitfalls-line);
    color: var(--pitfalls-ink);
}

.pager {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.pager-btn {
    border: 1.5px solid var(--line);
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 11px 18px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--ink);
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.pager-btn:hover {
    border-color: var(--hover-line);
    background: var(--home-hover);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
.pager-btn:active { transform: scale(0.97); }

/* ─────────── Study Page & Case Practice ─────────── */
.study-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    border-bottom: 1.5px solid var(--line);
}
.study-tabs button {
    padding: 10px 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-fast) ease;
}
.study-tabs button:hover { color: var(--ink); }
.study-tabs button.active {
    border-color: var(--accent);
    color: var(--brand-2);
}
.study-tabs span {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--critical);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 900;
}

.study-page, .case-practice {
    max-width: 920px;
    padding: clamp(20px, 3.5vw, 36px);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow);
}
.study-page-head .back-btn { margin-bottom: 18px; }
.study-page-head h1 { margin-top: 4px; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.02em; color: var(--ink); }

.study-topic-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 24px;
}
.study-topic {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    min-height: var(--touch-target);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.study-topic:hover {
    border-color: var(--accent);
    background: var(--home-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.study-topic:active { transform: scale(0.98); }
.study-topic > span { font-size: 1.3rem; flex-shrink: 0; }
.study-topic div { flex: 1; min-width: 0; }
.study-topic strong { font-size: 0.86rem; display: block; color: var(--ink); }
.study-topic small { margin-top: 2px; color: var(--ink-soft); font-size: 0.7rem; display: block; }
.study-topic b { color: var(--accent); font-size: 1.1rem; }
.study-empty {
    margin-top: 24px;
    padding: 24px;
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--ink-soft);
    font-size: 0.86rem;
    text-align: center;
}

.case-practice-head h2 {
    margin-top: 4px;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    letter-spacing: -0.02em;
    color: var(--ink);
}
.case-practice-head p { margin-top: 6px; color: var(--ink-soft); font-size: 0.84rem; }
.case-prompt, .case-answer {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--ov-job-bg);
    border: 1.5px solid var(--ov-job-line);
}
.case-prompt strong, .case-answer strong {
    color: var(--brand-2);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.case-prompt p, .case-answer p { margin-top: 6px; font-size: 0.86rem; line-height: 1.55; }

.quiz-question {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg);
}
.quiz-question legend {
    padding: 0 6px;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ink);
}
.quiz-question legend span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--brand-2);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 900;
}
.quiz-options { display: grid; gap: 8px; margin-top: 10px; }
.quiz-option {
    padding: 11px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
    min-height: var(--touch-target);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) ease;
}
.quiz-option:hover {
    border-color: var(--accent);
    background: var(--home-hover);
    transform: translateY(-1px);
}
.quiz-option:active { transform: scale(0.98); }
.quiz-option.correct {
    border-color: var(--common);
    background: var(--common-bg);
    color: var(--common);
    font-weight: 800;
}
.quiz-option.incorrect {
    border-color: var(--critical);
    background: var(--critical-bg);
    color: var(--critical);
}
.quiz-feedback {
    min-height: 1.4em;
    margin-top: 8px;
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 700;
}
.study-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ─────────── Shift View ─────────── */
.shift-topline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto 14px;
    max-width: 1140px;
}
.shift-topline label {
    margin-left: auto;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.shift-topline select {
    max-width: 280px;
    padding: 8px 12px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 0.8rem;
    min-height: var(--touch-target);
    box-shadow: var(--shadow-sm);
}
.shift-topline select:focus { border-color: var(--accent); outline: none; }
.shift-sheet {
    max-width: 1140px;
    margin: 0 auto;
    padding: clamp(18px, 3.5vw, 32px);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-lg);
}
.shift-sheet-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}
.shift-sheet-head h1 { margin-top: 3px; font-size: clamp(1.5rem, 3.2vw, 2.2rem); letter-spacing: -0.02em; color: var(--ink); }
.shift-sheet-head p { margin-top: 4px; color: var(--ink-soft); font-size: 0.86rem; }
.shift-warning {
    margin: 18px 0;
    padding: 11px 15px;
    border-radius: var(--radius-md);
    background: var(--pitfalls-bg);
    border: 1.5px solid var(--pitfalls-line);
    color: var(--pitfalls-ink);
    font-size: 0.76rem;
    font-weight: 800;
}
.shift-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.shift-grid section {
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--line);
    background: var(--bg);
}
.shift-grid h2 {
    margin-bottom: 10px;
    color: var(--brand-2);
    font-size: 0.88rem;
}
.shift-grid li, .shift-grid p {
    margin: 6px 0 0 16px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink);
}
.shift-grid li small { color: var(--ink-soft); }
.shift-red {
    border-color: var(--rf-box-line) !important;
    background: var(--rf-box-bg) !important;
}
.shift-red h2 { color: var(--critical); }
.shift-disposition { grid-column: 1 / -1; }
.shift-disposition > div {
    display: inline-block;
    vertical-align: top;
    width: min(48%, 460px);
    margin: 4px 1.5% 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    background: var(--card);
}
.shift-disposition p { margin-left: 0; }

/* ─────────── Screen Reader Only ─────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─────────── Responsive Media Queries ─────────── */
@media (max-width: 1700px) and (min-width: 921px) {
    .topbar { flex-wrap: wrap; }
    .topbar-tools { order: 1; }
    .searchwrap { order: 2; flex: 1 0 100%; max-width: none; }
}

@media (max-width: 920px) {
    .sidebar {
        transform: translateX(-105%);
        transition: transform var(--transition-smooth) var(--ease-out);
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-float);
    }
    .main { margin-left: 0; }
    .burger { display: inline-flex; }
    .tools-toggle { display: inline-flex; }

    .topbar {
        display: grid;
        grid-template-columns: 44px 44px 44px 44px 44px 1fr;
        gap: 8px;
        padding: max(10px, env(safe-area-inset-top, 10px)) 16px 10px;
    }
    .burger { grid-column: 1; grid-row: 1; }
    .home-btn {
        grid-column: 2;
        grid-row: 1;
        width: 44px;
        min-width: 44px;
        padding: 0;
        overflow: hidden;
        display: grid;
        place-items: center;
        font-size: 1rem;
    }
    .home-btn .header-label { display: none; }
    .home-btn .header-icon { margin: 0; }
    .utility-btn {
        display: grid;
        width: 44px;
        min-width: 44px;
        padding: 0;
        font-size: 1rem;
        place-items: center;
    }
    #studyBtn { grid-column: 3; grid-row: 1; }
    #shiftBtn { grid-column: 4; grid-row: 1; }
    #ecgBtn { grid-column: 5; grid-row: 1; }
    .tools-toggle {
        grid-column: 6;
        grid-row: 1;
        justify-self: end;
        min-width: 44px;
    }
    .searchwrap {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        position: relative;
    }

    .topbar-tools {
        display: none;
        grid-column: 1 / -1;
        grid-row: 3;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
        background: var(--card);
        border: 1.5px solid var(--line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        margin-top: 4px;
        animation: popIn 0.2s var(--ease-out) both;
    }
    .topbar-tools.open {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        min-width: 0;
    }
    .chips {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .chip {
        width: 100%;
        justify-content: center;
        padding-inline: 10px;
        white-space: nowrap;
    }
    .pref-tools {
        justify-content: center;
        width: 100%;
    }
    .accent-tools {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }

    .case-rail { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
    .case-steps { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .case-actions { grid-column: auto; justify-content: flex-start; }
    .learning-loop { padding: 18px; }
    .learning-head { align-items: stretch; flex-direction: column; }
    .review-btn { align-self: flex-start; }
    .recall-grid { grid-template-columns: 1fr; }
    .pp-grid { grid-template-columns: 1fr; }
    .study-dashboard { align-items: stretch; flex-direction: column; padding: 18px; }
    .study-stats { justify-content: stretch; }
    .study-stat { flex: 1; }
    .resus-grid, .pivot-grid { grid-template-columns: 1fr; }
    .personal-plan { grid-template-columns: 1fr; }
    .personal-controls { align-items: flex-start; }

    .shift-topline { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start; }
    .shift-topline .back-btn { justify-self: start; }
    .shift-topline label { margin: 4px 0 0; }
    .shift-topline select { width: 100%; max-width: none; min-width: 0; }
    .shift-sheet-head { flex-direction: column; }
    .shift-grid { grid-template-columns: 1fr; }
    .shift-disposition { grid-column: auto; }
    .shift-disposition > div { display: block; width: 100%; margin: 6px 0 0; }
    .stage { padding: 20px 16px 36px; }
    .ecg-pattern-grid, .ecg-killers { grid-template-columns: 1fr; }
    /* The seven steps are far wider than a phone. Scrolling alone is not enough:
       snap, a trailing fade and hidden scrollbar make it read as intentional. */
    .ecg-step-nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%); }
    .ecg-step-nav.at-end { -webkit-mask-image: none; mask-image: none; }
    .ecg-step-nav::-webkit-scrollbar { display: none; }
    .ecg-step-chip { flex: none; scroll-snap-align: start; }
}

@media (max-width: 480px) {
    .home-btn { padding: 0; }
    .tools-toggle .header-label { display: none; }
    .tools-toggle { width: 44px; min-width: 44px; padding: 0; }
    .case-action { flex: 1; text-align: center; justify-content: center; }
    .study-tabs { overflow-x: auto; }
    .study-actions { flex-direction: column; }
    .study-actions .btn, .study-actions .back-btn, .study-actions .rf-clear, .study-actions .review-btn { width: 100%; justify-content: center; }
    .cp-hero .back-btn {
        position: static;
        margin-bottom: 14px;
        display: inline-flex;
    }
    .cp-grid { grid-template-columns: 1fr; }
    .chips { grid-template-columns: 1fr 1fr; }
    .dx-grid, .study-topic-list { grid-template-columns: minmax(0, 1fr); }
    .pref-tools {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-width: 0;
        max-width: 100%;
    }
    .pref-btn { width: 100%; min-width: 0; padding-inline: 4px; }
    .pref-scale { min-width: 0; }
}

@media (max-width: 360px) {
    .topbar { grid-template-columns: 40px 40px 40px 40px 40px 1fr; gap: 6px; }
    .home-btn, .tools-toggle, .icon-btn, .utility-btn { width: 40px; min-width: 40px; }
    .searchwrap { padding-inline: 10px; }
    #searchInput { font-size: 0.82rem; }
}

/* ─────────── Print Optimization (accent-aware, always light for paper) ─────────── */
@media print {
    .sidebar, .topbar, .toast, .side-backdrop, .back-btn, .home-btn, .pref-tools, .accent-tools, .case-rail,
    .sec-head .arrow, .pager, .related, .rf-tools, .shift-topline, .study-tabs, .study-actions,
    .personal-controls, .note-actions, .reveal-btn, .ecg-filters, .ecg-step-nav, .step-rail-meter, .ecg-killers, .ecg-entry { display: none !important; }
    /* A modal dialog is not document content: the first-run notice and the
       enlarged ECG dialog must never end up on paper. */
    .disclaimer-overlay, .explorer-dialog { display: none !important; }
    .main { margin: 0; }
    .section-card { break-inside: avoid; box-shadow: none; border-color: #ddd; }
    .sec-body { display: block !important; }
    .section-card.closed .sec-body { display: block; }
    .reveal-answer { display: block !important; }
    html { font-size: 14px !important; }
    html, html[data-theme="dark"] {
        --bg: #fff; --ink: #111; --ink-soft: #444; --line: #ddd; --card: #fff;
        --topbar-bg: #fff; --foot-bg: #fff;
        --ov-job-bg: #f4f7f6; --ov-job-line: #cde9de;
        --critical-bg: #fef2f2; --emergent-bg: #fff7ed; --common-bg: #f0fdf4;
        --pearls-bg: #f0fbf6; --pitfalls-bg: #fdf6ec;
    }
    /* Force light readable brand per chosen accent when printing from dark mode */
    html[data-accent="emerald"], html[data-accent="emerald"][data-theme="dark"] { --brand: #0b3d2e; --brand-2: #115743; --accent: #0f9d76; }
    html[data-accent="ocean"], html[data-accent="ocean"][data-theme="dark"] { --brand: #0b2e5e; --brand-2: #1d4fa1; --accent: #2563eb; }
    html[data-accent="violet"], html[data-accent="violet"][data-theme="dark"] { --brand: #2e1a6b; --brand-2: #5b34c4; --accent: #7c3aed; }
    html[data-accent="rose"], html[data-accent="rose"][data-theme="dark"] { --brand: #5c0f22; --brand-2: #a51c3a; --accent: #e11d48; }
    html[data-accent="amber"], html[data-accent="amber"][data-theme="dark"] { --brand: #4d2405; --brand-2: #9a4a0a; --accent: #d97706; }
    html[data-accent="teal"], html[data-accent="teal"][data-theme="dark"] { --brand: #07333b; --brand-2: #0c6a82; --accent: #0891b2; }
    html:not([data-accent]) { --brand: #0b3d2e; --brand-2: #115743; --accent: #0f9d76; }
    body { background: #fff; color: #111; }
    .cp-card, .dx-card, .wu-col, .disp-col, .resus-card, .management-pivots, .ecg-pattern { break-inside: avoid; }
}

/* ─────────── Reduced Motion ─────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─────────── High Contrast & Forced Colors ─────────── */
@media (forced-colors: active) {
    .btn, .chip, .home-btn, .side-item, .cp-card, .dx-card, .section-card {
        border: 1.5px solid ButtonText;
    }
    .chip.active, .home-btn.on-home {
        background: Highlight;
        color: HighlightText;
    }
    .cp-card::before { background: Highlight; }
}

/* ─────────── Landscape Mobile ─────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .stage { padding: 12px clamp(14px, 2.5vw, 28px); }
    .hero { padding: 18px clamp(16px, 2.5vw, 30px); margin-bottom: 14px; }
    .cp-hero { padding: 18px clamp(16px, 2.5vw, 28px); margin-bottom: 12px; }
    .section-card { margin-bottom: 12px; }
    .sec-head { padding: 12px 16px; }
    .sec-body { padding: 2px 16px 14px; }
}

/* ─────────── Educational Disclaimer Dialog ─────────── */
.disclaimer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(4, 14, 10, 0.82);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    display: grid;
    place-items: center;
    padding: 20px;
    overflow-y: auto;
    animation: fadeInOverlay 0.25s var(--ease-out) both;
}
.disclaimer-overlay[hidden] {
    display: none !important;
}
@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

.disclaimer-modal {
    width: 100%;
    max-width: 580px;
    background: var(--card);
    border: 2px solid var(--accent);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    padding: 28px clamp(20px, 4vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: springModal 0.35s var(--ease-spring) both;
    position: relative;
}
@keyframes springModal {
    from { opacity: 0; transform: translateY(24px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.disclaimer-header {
    text-align: center;
}
.disclaimer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--gold-bg);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.disclaimer-header h2 {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.25;
}
.disclaimer-sub {
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-top: 6px;
    line-height: 1.45;
}

.disclaimer-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.disclaimer-callout {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--ov-job-bg);
    border: 1px solid var(--ov-job-line);
    border-left: 4px solid var(--accent);
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--brand-2);
}
.disclaimer-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.disclaimer-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--bg);
    border: 1px solid var(--line);
}
.disclaimer-points .point-ico {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.disclaimer-points strong {
    display: block;
    font-size: 0.82rem;
    color: var(--ink);
}
.disclaimer-points p {
    font-size: 0.76rem;
    color: var(--ink-soft);
    margin-top: 2px;
    line-height: 1.45;
}

.disclaimer-agree-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--line);
    background: var(--bg);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}
.disclaimer-agree-label:hover {
    border-color: var(--accent);
    background: var(--home-hover);
}
.disclaimer-agree-label input {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.disclaimer-agree-label span {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ink);
    font-weight: 600;
}
.disclaimer-agree-label:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-light);
}
.disclaimer-agree-label input:checked + span {
    color: var(--brand-2);
    font-weight: 800;
}

.disclaimer-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.disclaimer-btn {
    width: 100%;
    padding: 13px 20px;
    border-radius: var(--radius-md);
    border: 0;
    background: var(--brand-2);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.35);
    transition: all var(--transition-fast) ease;
}
html[data-theme="dark"] .disclaimer-btn {
    background: var(--accent);
    color: var(--on-fill);
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35);
}
.disclaimer-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--shadow-rgb), 0.45);
}
.disclaimer-btn:active:not(:disabled) {
    transform: scale(0.98);
}
.disclaimer-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.disclaimer-btn .btn-arrow {
    font-size: 1.1rem;
    transition: transform var(--transition-fast) ease;
}
.disclaimer-btn:hover:not(:disabled) .btn-arrow {
    transform: translateX(4px);
}

.disclaimer-link-btn {
    margin-top: 6px;
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--side-muted);
}

/* ══════════ EM-CPs UI/UX Hardening v4 — cross-browser, buttons, responsive ══════════
   Layered AFTER base styles so it safely overrides without rewriting v3.
   Targets: Chrome / Edge / Firefox / Safari (macOS, iOS, Android), PWA standalone,
   keyboard, touch, screen-reader, print/PDF, reduced-motion, forced-colors. */

/* ── 1. Cross-browser base ── */
html {
  font-size: 16px; /* fallback for browsers without var()/calc */
  font-size: calc(16px * var(--type-scale, 1));
  color-scheme: light;
}
body {
  min-height: 100vh; /* fallback */
  min-height: 100svh;
  min-height: 100dvh;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.main {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}
/* Button / form normalization for Safari, Firefox, old Edge */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
button::-moz-focus-inner, input::-moz-focus-inner, select::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
}
img, svg { max-width: 100%; }
a { color: inherit; }

/* Focus: visible ring with fallback for browsers without :focus-visible */
:focus { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
@supports not selector(:focus-visible) {
  :focus { outline: 2px solid var(--accent); outline-offset: 3px; }
}
/* High-visibility keyboard focus for all interactive controls */
.home-btn:focus-visible, .utility-btn:focus-visible, .icon-btn:focus-visible,
.chip:focus-visible, .pref-btn:focus-visible,
.tools-toggle:focus-visible, .side-item:focus-visible, .side-btn:focus-visible,
.cp-card:focus-visible, .sec-head:focus-visible, .back-btn:focus-visible,
.pager-btn:focus-visible, .related-chip:focus-visible, .quiz-option:focus-visible,
.study-topic:focus-visible, .study-stat:focus-visible, .patient-chip:focus-visible,
.case-action:focus-visible, .reveal-btn:focus-visible, .review-btn:focus-visible,
.save-topic:focus-visible, .rf-clear:focus-visible, .search-clear-btn:focus-visible,
.res-item:focus-visible, .disclaimer-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.22), var(--shadow-sm);
}

/* ── 2. Professional button system ── */
/* Shared pressable behaviour */
.home-btn, .utility-btn, .icon-btn, .tools-toggle,
.btn, .back-btn, .chip, .pref-btn,
.side-btn, .side-item, .cp-card, .study-stat, .patient-chip,
.case-action, .reveal-btn, .review-btn, .save-topic, .rf-clear,
.related-chip, .pager-btn, .quiz-option, .study-topic,
.search-clear-btn, .res-item, .disclaimer-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Disabled / aria-disabled unified */
button:disabled, button[disabled], button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--shadow-sm);
}
.quiz-option:disabled { opacity: 1; cursor: default; }
.quiz-option.correct:disabled, .quiz-option.incorrect:disabled { opacity: 1; }
/* Prevent text overflow on small screens for all pill buttons */
.chip, .patient-chip, .related-chip, .case-action,
.home-btn, .back-btn, .pager-btn, .review-btn {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Consistent hover lift only on devices that can hover */
@media (hover: hover) and (pointer: fine) {
  .home-btn:hover, .pager-btn:hover, .related-chip:hover,
  .study-topic:hover, .quiz-option:not(:disabled):hover {
    transform: translateY(-1px);
  }
  .cp-card:hover { transform: translateY(-4px); }
}
@media (hover: none) {
  .home-btn:hover, .cp-card:hover, .chip:hover, .patient-chip:hover,
  .related-chip:hover, .pager-btn:hover { transform: none; }
}
/* Active nav state for Study / Shift / ECG (mirrors .on-home) */
.home-btn.active-nav {
  background: var(--brand-2);
  color: #fff;
  border-color: var(--brand-2);
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb),0.25);
}
html[data-theme="dark"] .home-btn.active-nav {
  background: var(--accent);
  color: var(--on-fill);
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(var(--accent-rgb),0.3);
}
/* Ensure utility icons align perfectly */
.home-btn .header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  line-height: 1;
  flex: none;
}

/* ── 3. Topbar cross-browser + sticky fallback ── */
.topbar {
  position: -webkit-sticky;
  position: sticky;
}
/* If backdrop-filter unsupported, use solid background */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--card); }
  .toast { background: var(--card); }
  .cp-hero .back-btn { background: rgba(255,255,255,0.28); }
}
.topbar-tools { min-width: 0; }
/* Prevent search from collapsing too small on desktop */
.searchwrap { min-width: 180px; }
#searchInput { min-width: 0; }
/* Search dropdown must stay inside viewport on all browsers */
.results-pop {
  left: 0; right: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── 4. Sidebar: visibility fallback for no-inert browsers ── */
@media (max-width: 920px) {
  .sidebar {
    visibility: hidden;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
  }
  .sidebar.open {
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@media (min-width: 921px) {
  .sidebar { visibility: visible; }
}
/* Sidebar focus: hide scrollbars cleanly, keep scroll */
.sidebar {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── 5. Stage readability: constrain line length on ultra-wide ── */
.stage > * {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.stage > .shift-topline, .stage > .shift-sheet { max-width: 1140px; }
.stage > .study-page, .stage > .case-practice { max-width: 920px; margin-left: auto; margin-right: auto; }

/* ── 6. :has() fallback — JS toggles .is-checked alongside :checked ── */
.rf-item.is-checked { background: rgba(220,38,38,0.10); }
.rf-item.is-checked span { color: var(--critical); font-weight: 800; }
.disclaimer-agree-label.is-checked {
  border-color: var(--accent);
  background: var(--accent-light);
}
.disclaimer-agree-label.is-checked span { color: var(--brand-2); font-weight: 800; }
@supports selector(:has(*)) {
  /* native :has rules from v3 remain authoritative */
}

/* ── 7. Clamp() fallbacks for older browsers ── */
.hero h1 { font-size: 1.7rem; font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
.cp-hero h1 { font-size: 1.6rem; font-size: clamp(1.45rem, 2.8vw, 2rem); }
.study-page-head h1, .case-practice-head h2 { font-size: 1.5rem; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.shift-sheet-head h1 { font-size: 1.7rem; font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
.stage { padding: 32px 24px 40px; padding: var(--space-2xl) clamp(16px, 4vw, 48px) var(--space-3xl); }
.hero, .cp-hero { padding-left: 24px; padding-right: 24px; }

/* ── 8. Grid fallbacks: flex when grid unsupported ── */
@supports not (display: grid) {
  .cp-grid, .dx-grid, .cluster-grid, .wu-grid, .disp-grid,
  .resus-grid, .pivot-grid, .recall-grid, .pp-grid,
  .study-topic-list, .shift-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .cp-grid > *, .dx-grid > *, .cluster-grid > *, .wu-grid > *,
  .disp-grid > *, .resus-grid > *, .pivot-grid > *,
  .recall-grid > *, .pp-grid > *, .shift-grid > * {
    flex: 1 1 260px;
    min-width: 0;
  }
  .case-rail, .case-steps { display: block; }
  .case-steps li { margin-bottom: 8px; }
}
.ecg-hero::after {
  content: '';
  position: absolute;
  right: -50px; top: -50px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.32) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.ecg-hero h1 { font-size: 1.6rem; font-size: clamp(1.45rem, 2.8vw, 2rem); letter-spacing: -0.02em; line-height: 1.2; color: #fff; position: relative; z-index: 1; }
.ecg-hero .tag { color: rgba(255,255,255,0.86); font-size: 0.92rem; margin-top: 6px; line-height: 1.5; position: relative; z-index: 1; }
.ecg-hero .back-btn {
  position: absolute; top: 20px; right: 20px;
  background: rgba(255,255,255,0.16); color: #fff;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ecg-hero .back-btn:hover { background: rgba(255,255,255,0.28); }
.ecg-firstpass, .ecg-redflags, .ecg-steps-card, .ecg-patterns, .ecg-pearls-pitfalls {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  padding: 20px 24px;
}
.ecg-firstpass h2, .ecg-redflags h2, .ecg-steps-card h2, .ecg-patterns h2 { font-size: 1.05rem; color: var(--ink); margin-top: 2px; }
.ecg-redflags h2 { color: var(--critical); }
.ecg-firstpass ol, .ecg-redflags ul { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.ecg-firstpass li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 11px 14px; font-size: 0.86rem; line-height: 1.5;
}
.ecg-firstpass .ov-n { flex: none; }
.ecg-redflags li {
  font-size: 0.84rem; line-height: 1.5; padding: 8px 0 8px 24px; position: relative;
  border-bottom: 1px dashed var(--line); color: var(--ink);
}
.ecg-redflags li:last-child { border-bottom: none; }
.ecg-redflags li::before {
  content: ""; position: absolute; left: 4px; top: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--critical); box-shadow: 0 0 0 3px var(--critical-bg);
}
.ecg-step-head:hover { background: var(--home-hover); }
.ecg-step-head .sec-ico {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  display: grid; place-items: center; flex: none;
  background: rgba(var(--accent-rgb),0.14); font-size: 1.05rem;
}
.ecg-step-head .arrow { margin-left: auto; color: var(--ink-soft); font-size: 0.82rem; transition: transform 280ms cubic-bezier(0.16,1,0.3,1); }
.ecg-step.closed .arrow { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.ecg-step.closed .ecg-step-body { display: none; }
.ecg-step-body ul { list-style: none; }
.ecg-step-body li { font-size: 0.85rem; line-height: 1.6; padding: 7px 0 7px 24px; position: relative; border-bottom: 1px dashed var(--line); color: var(--ink); }
.ecg-step-body li:last-child { border-bottom: none; }
.ecg-step-body li::before { content: '▸'; position: absolute; left: 4px; color: var(--accent); font-weight: 800; }
.ecg-pattern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 14px; }
.ecg-pattern {
  border: 1.5px solid var(--line); border-radius: var(--radius-md);
  padding: 15px 17px; border-left-width: 5px; background: var(--card);
  box-shadow: var(--shadow-sm);
}
.ecg-pattern.sev-critical { border-left-color: var(--critical); background: var(--critical-bg); }
.ecg-pattern.sev-emergent { border-left-color: var(--emergent); background: var(--emergent-bg); }
.ecg-pattern h4 { font-size: 0.92rem; line-height: 1.3; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ecg-pattern.sev-critical h4 { color: var(--critical); }
.ecg-pattern.sev-emergent h4 { color: var(--emergent); }
.ecg-pattern dl { margin-top: 10px; display: grid; gap: 6px; font-size: 0.8rem; line-height: 1.5; }
.ecg-pattern dt { font-weight: 800; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-2); }
.ecg-pattern dd { color: var(--ink); }
.ecg-pattern dd + dt { margin-top: 4px; }
.ecg-refs li { border-bottom: 1px solid var(--line-subtle) !important; padding: 8px 0 8px 22px !important; position: relative; list-style: none; line-height: 1.5; }
.ecg-refs li:last-child { border-bottom: none !important; }
.ecg-refs li::before {
  content: "" !important;
  position: absolute;
  left: 4px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-2);
  opacity: 0.7;
}

/* ── 10. Toast, dialog, search polish for small screens ── */
.toast {
  max-width: min(90vw, 560px);
  overflow-wrap: anywhere;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.disclaimer-modal {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.disclaimer-overlay { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.search-kbd { -webkit-user-select: none; user-select: none; }
@media (max-width: 480px) {
  .search-kbd { display: none; }
  .toast { font-size: 0.8rem; padding: 10px 18px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .disclaimer-modal { padding: 22px 18px; gap: 14px; }
  .ecg-hero .back-btn, .cp-hero .back-btn { position: static; margin-bottom: 14px; }
  .ecg-firstpass, .ecg-redflags, .ecg-steps-card, .ecg-patterns { padding: 16px; }
  .ecg-pattern-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── 11. Responsive topbar FIX — include ECG in mobile grid ── */
@media (max-width: 920px) {
  .topbar {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 44px 44px 44px 44px 44px 1fr;
    grid-template-columns: 44px 44px 44px 44px 44px 1fr;
  }
  .burger { -ms-grid-column: 1; grid-column: 1; grid-row: 1; }
  #homeBtn { -ms-grid-column: 2; grid-column: 2; grid-row: 1; }
  #studyBtn { -ms-grid-column: 3; grid-column: 3; grid-row: 1; }
  #shiftBtn { -ms-grid-column: 4; grid-column: 4; grid-row: 1; }
  #ecgBtn { -ms-grid-column: 5; grid-column: 5; grid-row: 1; }
  .tools-toggle { -ms-grid-column: 6; grid-column: 6; grid-row: 1; }
  #homeBtn, #studyBtn, #shiftBtn, #ecgBtn {
    width: 44px; min-width: 44px; padding: 0;
    overflow: hidden; display: grid; place-items: center; font-size: 1rem;
  }
  #homeBtn .header-label, #studyBtn .header-label,
  #shiftBtn .header-label, #ecgBtn .header-label { display: none; }
  #homeBtn .header-icon, #studyBtn .header-icon,
  #shiftBtn .header-icon, #ecgBtn .header-icon { margin: 0; }
}
@media (max-width: 360px) {
  .topbar { -ms-grid-columns: 40px 40px 40px 40px 40px 1fr; grid-template-columns: 40px 40px 40px 40px 40px 1fr; gap: 6px; }
  #homeBtn, #studyBtn, #shiftBtn, #ecgBtn, .tools-toggle, .icon-btn, .burger { width: 40px; min-width: 40px; }
}
/* Desktop: keep nav compact, search flexible, tools right */
@media (min-width: 921px) {
  .topbar { flex-wrap: wrap; }
  #homeBtn, #studyBtn, #shiftBtn, #ecgBtn { flex: none; }
  .searchwrap { flex: 1 1 220px; }
  .topbar-tools { flex: 0 1 auto; }
}

/* ── 12. Print: include ECG, keep clinical tables intact ── */
@media print {
  .ecg-hero { background: #fff !important; color: #111 !important; border: 1px solid #ddd; box-shadow: none; }
  .ecg-hero h1, .ecg-hero .tag { color: #111 !important; }
  .ecg-firstpass, .ecg-redflags, .ecg-steps-card, .ecg-patterns, .ecg-step { box-shadow: none; break-inside: avoid; }
  .ecg-step-body, .ecg-step.closed .ecg-step-body { display: block !important; }
  .ecg-pattern { break-inside: avoid; box-shadow: none; }
  .tools-toggle, #studyBtn, #shiftBtn, #ecgBtn, #homeBtn, .burger { display: none !important; }
}

/* ── 13. Motion + contrast ── */
@media (prefers-reduced-motion: reduce) {
  .ecg-step-head .arrow, .cp-card::before, .toast, .disclaimer-modal, .results-pop { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .ecg-hero, .hero, .cp-hero { forced-color-adjust: none; }
  .ecg-pattern, .ecg-step, .ecg-firstpass, .ecg-redflags { border: 1.5px solid ButtonText; }
}
/* Ensure text remains readable when scaled to 140% */
.personal-plan textarea, #searchInput, .shift-topline select {
  max-width: 100%;
}

/* ── 14. Scrollbars + iOS momentum (accent-tinted) ── */
.results-pop, .side-list, .stage, .disclaimer-modal {
  scrollbar-width: thin;
  scrollbar-color: var(--hover-line) transparent;
}
.patient-filter { scrollbar-width: none; }
.patient-filter::-webkit-scrollbar { display: none; }

/* ── 15. Long medical terms: never break layout ── */
.cp-card h3, .dx-card h3, .dx-card h4, .ecg-pattern h3, .ecg-pattern h4, .sec-head span, .shift-grid h2,
.cluster h3, .cluster h4, .wu-col h3, .wu-col h4, .study-topic strong {
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
.sec-body, .ecg-step-body, .case-prompt p, .case-answer p, .ov-s {
  overflow-wrap: break-word;
}

/* ── EM Pocket phone layout: a calmer, thumb-friendly reading surface ── */
@media (max-width: 600px) {
  /* 46px overflowed the header's 44px grid row and shaved the top bar; the row
     is 44px, so the shared target must not exceed it. */
  :root { --touch-target: 44px; }

  .topbar {
    grid-template-columns: repeat(6, minmax(40px, 1fr));
    gap: 6px;
    padding: max(8px, env(safe-area-inset-top, 8px)) 12px 9px;
  }
  .burger, #homeBtn, #studyBtn, #shiftBtn, #ecgBtn, .tools-toggle {
    width: 100%;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    border-radius: 12px;
  }
  .searchwrap {
    min-height: 48px;
    margin-top: 2px;
    padding: 7px 12px;
    border-radius: 14px;
  }
  #searchInput { font-size: 0.9rem; }
  .topbar-tools {
    gap: 10px;
    margin-top: 0;
    padding: 12px;
    border-radius: 14px;
  }
  .chips { gap: 6px; }
  .chip {
    min-height: 44px;
    padding-inline: 6px;
    font-size: 0.72rem;
  }
  .pref-tools {
    padding: 4px;
    border-radius: 12px;
    background: var(--bg);
  }
  .pref-btn { min-height: 42px; }

  .stage { padding: 18px 12px 30px; }
  .foot { padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .hero, .cp-hero, .ecg-hero { border-radius: 16px; }
  .hero { padding: 20px 18px; margin-bottom: 14px; }
  .hero h1 { font-size: 1.55rem; line-height: 1.18; }
  .hero-badges { gap: 6px; margin-top: 14px; }
  .hbadge { padding: 5px 8px; font-size: 0.67rem; }
  .ecg-entry { margin-bottom: 14px; border-radius: 16px; }
  .study-dashboard { margin-bottom: 16px; padding: 16px; border-radius: 16px; }
  .patient-filter { margin-bottom: 16px; padding-bottom: 6px; }
  .home-group { margin-bottom: 24px; }
  .group-title { margin-bottom: 10px; }
  .cp-grid { gap: 10px; }
  .cp-card { min-height: 128px; padding: 16px 18px; border-radius: 16px; }
  .cp-card .cp-ico { font-size: 1.7rem; margin-bottom: 4px; }
  .cp-card h3 { font-size: 1rem; }
  .cp-card .cp-count { top: 12px; right: 12px; }
}

/* ══════════ v4.1 final cross-browser fallbacks (inset, sticky, gap) ══════════ */
.sidebar { top: 0; right: auto; bottom: 0; left: 0; }
.side-backdrop, .disclaimer-overlay { top: 0; right: 0; bottom: 0; left: 0; }
.topbar { top: 0; }
/* Ensure sticky works everywhere */
@supports not (position: sticky) {
  .topbar { position: relative; }
}
/* Flex gap fallback: add breathing room when gap unsupported (old Safari) */
@supports not (gap: 8px) {
  .topbar > * + * { margin-left: 10px; }
  .chips > * + *, .patient-filter > * + *, .study-stats > * + * { margin-left: 6px; }
}

/* ══════════ v4.2 ECG schematic figures — professional, theme-aware, print-safe ══════════ */
.ecg-fig {
  margin: 12px 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ecg-media {
  background-color: var(--card);
  background-image:
    linear-gradient(to right, var(--line-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-subtle) 1px, transparent 1px),
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
  padding: 6px 6px 2px;
}
.ecg-svg-wrap { line-height: 0; }
.ecg-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}
/* Step 5 is a dense evidence map, not a short rhythm strip: never shrink its labels into illegibility. */
.ecg-fig[data-ecg-fig="ischemia-map"] .ecg-svg { max-height: 830px !important; }
.ecg-trace {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ecg-trace-wide { stroke-width: 2.2; }
.ecg-trace-faint { opacity: 0.45; }
.ecg-marker {
  stroke: var(--critical);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  opacity: 0.9;
}
.ecg-label {
  font-family: inherit;
  font-size: 9px;
  font-size: calc(9px * var(--type-scale, 1));
  font-weight: 700;
  fill: var(--ink-soft);
}
.ecg-label-b { font-weight: 800; fill: var(--ink); font-size: 9.5px; }
.ecg-box { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.ecg-fig figcaption {
  padding: 8px 12px;
  border-top: 1px solid var(--line-subtle);
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 0.76rem;
  line-height: 1.45;
}
.ecg-schem {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  margin-right: 6px;
  border-radius: var(--radius-full);
  background: var(--accent-light);
  border: 1px solid var(--ov-job-line);
  color: var(--brand-2);
  vertical-align: 1px;
}
html[data-theme="dark"] .ecg-schem { color: var(--accent); }
.ecg-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #fff;
}
@media (max-width: 480px) {
  .ecg-media { padding: 4px 4px 0; }
  .ecg-svg { max-height: 180px; }
  .ecg-fig figcaption { font-size: 0.72rem; padding: 7px 10px; }
}
@media print {
  .ecg-fig { box-shadow: none; break-inside: avoid; border-color: #bbb; }
  .ecg-media { background: #fff !important; }
  .ecg-trace { stroke: #111 !important; }
  .ecg-label { fill: #444 !important; }
  .ecg-label-b { fill: #111 !important; }
  .ecg-marker { stroke: #b91c1c !important; }
  .ecg-box { fill: #fff !important; stroke: #bbb !important; }
  .ecg-fig figcaption { background: #f6f6f6 !important; color: #333 !important; }
}
@media (forced-colors: active) {
  .ecg-trace { stroke: ButtonText; }
  .ecg-label, .ecg-label-b { fill: ButtonText; }
  .ecg-marker { stroke: Highlight; }
  .ecg-box { fill: Canvas; stroke: ButtonText; }
  .ecg-fig { border: 1.5px solid ButtonText; }
}

/* v4.3 ECG accuracy helpers */
.ecg-lead { font-weight: 800; fill: var(--ink); font-size: 10px; font-size: calc(10px * var(--type-scale, 1)); }
.ecg-j { fill: var(--critical); stroke: #fff; stroke-width: 0.8; }
html[data-theme="dark"] .ecg-j { stroke: #05241a; }
@media print { .ecg-j { fill: #b91c1c !important; stroke: #fff !important; } }
@media (forced-colors: active) { .ecg-j { fill: Highlight; stroke: Canvas; } }

/* v4.4 ECG clarity + modern + interactive (LITFL-inspired, original art) */
.ecg-trace { stroke-width: 2.4; }
.ecg-trace-wide { stroke-width: 2.6; }
.ecg-marker { stroke-width: 1.4; }
.ecg-j { r: 2.6; }
.ecg-svg text, .ecg-label {
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.ecg-media { padding: 8px 8px 4px; }
.ecg-fig { transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease; }
@media (hover: hover) and (pointer: fine) {
  .ecg-fig:hover { border-color: var(--accent); box-shadow: var(--shadow); }
}
/* Toolbar */
.ecg-tools {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-subtle);
  background: var(--card);
  align-items: center;
}
.ecg-tool {
  min-height: 40px;
  padding: 6px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--ink);
  font: inherit; font-size: 0.76rem; font-weight: 800;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: all 150ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ecg-tool:hover { border-color: var(--accent); background: var(--home-hover); transform: translateY(-1px); }
.ecg-tool:active { transform: scale(0.97); }
.ecg-tool[aria-pressed="true"] { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
html[data-theme="dark"] .ecg-tool[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-fill); }
/* Annotation toggle */
.ecg-fig.hide-anno .ecg-marker,
.ecg-fig.hide-anno circle.ecg-j,
.ecg-fig.hide-anno .ecg-sthl,
.ecg-fig.hide-anno text.ecg-label:not(.ecg-lead) { display: none; }
.ecg-fig.show-compare .ecg-normal-ref { display: block; }
.ecg-litfl { margin-top: 10px; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5; }
.ecg-litfl a { color: var(--brand-2); font-weight: 800; }
/* Lightbox (enlarge) */
.ecg-lightbox {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 500;
  background: rgba(4,14,10,0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding: 20px;
  overflow-y: auto;
}
.ecg-lightbox[hidden] { display: none !important; }
.ecg-lightbox-card {
  width: 100%; max-width: 760px;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.ecg-lightbox-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.ecg-lightbox-head strong { font-size: 0.95rem; }
.ecg-lightbox-close {
  min-height: 44px; padding: 8px 18px;
  border-radius: var(--radius-md); border: 1.5px solid var(--line);
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer;
}
.ecg-lightbox-close:hover { border-color: var(--accent); }
.ecg-lightbox-media {
  background-color: var(--card);
  background-image:
    linear-gradient(to right, var(--line-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-subtle) 1px, transparent 1px),
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
  padding: 10px;
}
.ecg-lightbox-media .ecg-svg { max-height: none; }
.ecg-lightbox-cap { padding: 10px 16px 16px; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.5; }
@media (max-width: 480px) {
  .ecg-tool { flex: 1; justify-content: center; }
  .ecg-lightbox { padding: 12px; }
}
@media print {
  .ecg-fig[data-sel] .ecg-marker, .ecg-fig[data-sel] text.ecg-label[data-wave], .ecg-fig[data-sel] circle.ecg-j { opacity: 1 !important; }
  .ecg-tools, .ecg-lightbox { display: none !important; }
  .ecg-fig.hide-anno .ecg-marker,
  .ecg-fig.hide-anno circle.ecg-j,
  .ecg-fig.hide-anno .ecg-sthl,
  .ecg-fig.hide-anno text.ecg-label:not(.ecg-lead) { display: block !important; }
  .ecg-normal-ref { display: none !important; }
}
@media (forced-colors: active) {
  .ecg-tool, .ecg-lightbox-card { border: 1.5px solid ButtonText; }
  .ecg-normal-trace { stroke: Highlight; }
  .ecg-normal-box { stroke: Highlight; fill: Canvas; }
}
@media (prefers-reduced-motion: reduce) {
  .ecg-fig, .ecg-tool { transition: none !important; }
}

/* v4.5 ECG paper — classic high-contrast printout, always light for realism */
.ecg-media {
  background-color: #ffffff;
  background-image:
    linear-gradient(to right, rgba(244,120,130,0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,120,130,0.22) 1px, transparent 1px),
    linear-gradient(to right, rgba(230,80,95,0.42) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230,80,95,0.42) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
  border-bottom: 1px solid #f0b6bc;
}
.ecg-svg.ecg-paper { max-height: 340px; }
.ecg-svg.ecg-tall { max-height: 460px; }
.ecg-svg.ecg-case-12lead { max-height: 320px; }
/* Keep the conventional 3 × 4 + rhythm-strip layout readable on a phone. */
@media (max-width: 700px) { .ecg-svg.ecg-case-12lead { max-height: 260px; } }
@media (max-width: 700px) { .ecg-svg.ecg-tall { max-height: 300px; } }
/* Phones: let wide ECG figures pan horizontally instead of shrinking to
   unreadable size. min-width keeps annotation text near 9px at 360px. */
@media (max-width: 700px) {
  .ecg-media { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ecg-media .ecg-svg-wrap { min-width: 0; }
  .ecg-media .ecg-svg-wrap .ecg-svg { max-height: none; }
}
.ecg-paper .ecg-trace { stroke: #111111; }
.ecg-paper .ecg-rhythm { stroke-width: 2; opacity: 0.95; }
.ecg-paper .ecg-label { fill: #374151; stroke: #ffffff; }
.ecg-paper .ecg-lead { fill: #111111; }
.ecg-paper .ecg-marker { stroke: #dc2626; }
.ecg-paper .ecg-j { fill: #dc2626; stroke: #ffffff; }
.ecg-paper .ecg-box { fill: #ffffff; stroke: #d1d5db; }
.ecg-paper .ecg-sep { stroke: #e5a0a7; stroke-width: 1; stroke-dasharray: 6 4; }
.ecg-paper .ecg-normal-trace { stroke: #16a34a; }
.ecg-paper .ecg-normal-box { fill: #ffffff; stroke: #16a34a; }
.ecg-lightbox-media {
  background-color: #ffffff;
  background-image:
    linear-gradient(to right, rgba(244,120,130,0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,120,130,0.22) 1px, transparent 1px),
    linear-gradient(to right, rgba(230,80,95,0.42) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230,80,95,0.42) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
}
@media (max-width: 700px) {
  .ecg-svg.ecg-paper { max-height: 240px; }
}
.ecg-hit:hover { fill: rgba(var(--accent-rgb),0.28); stroke: var(--accent); stroke-width: 2; }
.ecg-hit:focus, .ecg-hit:focus-visible { fill: rgba(var(--accent-rgb),0.32); stroke: var(--accent); stroke-width: 2.5; outline: none; }
@media (forced-colors: active) { .ecg-hit:hover, .ecg-hit:focus { fill: Highlight; stroke: HighlightText; } }
.ecg-sec { fill: var(--ink-soft); }
.ecg-paper .ecg-sec { fill: #9ca3af; }

/* v4.7 wave inspector (Step 1 pilot) */
.ecg-hotzone { fill: transparent; stroke: none; pointer-events: all; }
.ecg-hot { cursor: pointer; outline: none; }
/* Hit areas remain interactive but never paint a second selection outline.
   Hover/focus/click all drive the single SVG finding ellipse. */
.ecg-hot:is(:hover, :focus, :focus-visible, .on) .ecg-hotzone,
.ecg-paper .ecg-hot:is(:hover, :focus, :focus-visible, .on) .ecg-hotzone { fill: transparent; stroke: none; }
.ecg-inspector {
  padding: 9px 14px;
  border-top: 1px solid var(--line-subtle);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.5;
  min-height: 48px;
}
.ecg-inspector strong { color: var(--brand-2); }
html[data-theme="dark"] .ecg-inspector strong { color: var(--accent); }
@media print { .ecg-inspector { display: none !important; } .ecg-hotzone { display: none !important; } }
.ecg-paper .ecg-legend-ring { stroke: #059669; }
.ecg-lightbox .ecg-hotzone { pointer-events: none; }
.ecg-lightbox .ecg-hot { cursor: default; }
/* v4.8 linked annotations: tapped wave keeps its red lines, others dim */
.ecg-fig .ecg-marker, .ecg-fig text.ecg-label[data-wave] { transition: opacity 150ms ease; }
.ecg-fig[data-sel="cal"] .ecg-marker:not([data-wave="cal"]) { opacity: 0.12; }
.ecg-fig[data-sel="cal"] text.ecg-label[data-wave]:not([data-wave="cal"]) { opacity: 0.12; }
.ecg-fig[data-sel="cal"] circle.ecg-j:not([data-wave="cal"]) { opacity: 0.12; }
.ecg-fig[data-sel="p"] .ecg-marker:not([data-wave="p"]) { opacity: 0.12; }
.ecg-fig[data-sel="p"] text.ecg-label[data-wave]:not([data-wave="p"]) { opacity: 0.12; }
.ecg-fig[data-sel="p"] circle.ecg-j:not([data-wave="p"]) { opacity: 0.12; }
.ecg-fig[data-sel="pr"] .ecg-marker:not([data-wave="pr"]) { opacity: 0.12; }
.ecg-fig[data-sel="pr"] text.ecg-label[data-wave]:not([data-wave="pr"]) { opacity: 0.12; }
.ecg-fig[data-sel="pr"] circle.ecg-j:not([data-wave="pr"]) { opacity: 0.12; }
.ecg-fig[data-sel="qrs"] .ecg-marker:not([data-wave="qrs"]) { opacity: 0.12; }
.ecg-fig[data-sel="qrs"] text.ecg-label[data-wave]:not([data-wave="qrs"]) { opacity: 0.12; }
.ecg-fig[data-sel="qrs"] circle.ecg-j:not([data-wave="qrs"]) { opacity: 0.12; }
.ecg-fig[data-sel="st"] .ecg-marker:not([data-wave="st"]) { opacity: 0.12; }
.ecg-fig[data-sel="st"] text.ecg-label[data-wave]:not([data-wave="st"]) { opacity: 0.12; }
.ecg-fig[data-sel="st"] circle.ecg-j:not([data-wave="st"]) { opacity: 0.12; }
.ecg-fig[data-sel="t"] .ecg-marker:not([data-wave="t"]) { opacity: 0.12; }
.ecg-fig[data-sel="t"] text.ecg-label[data-wave]:not([data-wave="t"]) { opacity: 0.12; }
.ecg-fig[data-sel="t"] circle.ecg-j:not([data-wave="t"]) { opacity: 0.12; }
.ecg-fig[data-sel="qt"] .ecg-marker:not([data-wave="qt"]) { opacity: 0.12; }
.ecg-fig[data-sel="qt"] text.ecg-label[data-wave]:not([data-wave="qt"]) { opacity: 0.12; }
.ecg-fig[data-sel="qt"] circle.ecg-j:not([data-wave="qt"]) { opacity: 0.12; }
.ecg-fig[data-sel="rr"] .ecg-marker:not([data-wave="rr"]) { opacity: 0.12; }
.ecg-fig[data-sel="rr"] text.ecg-label[data-wave]:not([data-wave="rr"]) { opacity: 0.12; }
.ecg-fig[data-sel="rr"] circle.ecg-j:not([data-wave="rr"]) { opacity: 0.12; }
.ecg-fig[data-sel="inf"] .ecg-marker:not([data-wave="inf"]) { opacity: 0.12; }
.ecg-fig[data-sel="inf"] text.ecg-label[data-wave]:not([data-wave="inf"]) { opacity: 0.12; }
.ecg-fig[data-sel="inf"] circle.ecg-j:not([data-wave="inf"]) { opacity: 0.12; }
.ecg-fig[data-sel="mirror"] .ecg-marker:not([data-wave="mirror"]) { opacity: 0.12; }
.ecg-fig[data-sel="mirror"] text.ecg-label[data-wave]:not([data-wave="mirror"]) { opacity: 0.12; }
.ecg-fig[data-sel="mirror"] circle.ecg-j:not([data-wave="mirror"]) { opacity: 0.12; }
.ecg-fig[data-sel="hyperacute"] .ecg-marker:not([data-wave="hyperacute"]) { opacity: 0.12; }
.ecg-fig[data-sel="hyperacute"] text.ecg-label[data-wave]:not([data-wave="hyperacute"]) { opacity: 0.12; }
.ecg-fig[data-sel="hyperacute"] circle.ecg-j:not([data-wave="hyperacute"]) { opacity: 0.12; }
.ecg-fig[data-sel="hyperk"] .ecg-marker:not([data-wave="hyperk"]) { opacity: 0.12; }
.ecg-fig[data-sel="hyperk"] text.ecg-label[data-wave]:not([data-wave="hyperk"]) { opacity: 0.12; }
.ecg-fig[data-sel="hyperk"] circle.ecg-j:not([data-wave="hyperk"]) { opacity: 0.12; }
.ecg-fig[data-sel="ischa"] .ecg-marker:not([data-wave="ischa"]) { opacity: 0.12; }
.ecg-fig[data-sel="ischa"] text.ecg-label[data-wave]:not([data-wave="ischa"]) { opacity: 0.12; }
.ecg-fig[data-sel="ischa"] circle.ecg-j:not([data-wave="ischa"]) { opacity: 0.12; }
.ecg-fig[data-sel="wellens"] .ecg-marker:not([data-wave="wellens"]) { opacity: 0.12; }
.ecg-fig[data-sel="wellens"] text.ecg-label[data-wave]:not([data-wave="wellens"]) { opacity: 0.12; }
.ecg-fig[data-sel="wellens"] circle.ecg-j:not([data-wave="wellens"]) { opacity: 0.12; }
.ecg-fig[data-sel="dewinter"] .ecg-marker:not([data-wave="dewinter"]) { opacity: 0.12; }
.ecg-fig[data-sel="dewinter"] text.ecg-label[data-wave]:not([data-wave="dewinter"]) { opacity: 0.12; }
.ecg-fig[data-sel="dewinter"] circle.ecg-j:not([data-wave="dewinter"]) { opacity: 0.12; }
.ecg-fig[data-sel="sgSte"] .ecg-marker:not([data-wave="sgSte"]) { opacity: 0.12; }
.ecg-fig[data-sel="sgSte"] text.ecg-label[data-wave]:not([data-wave="sgSte"]) { opacity: 0.12; }
.ecg-fig[data-sel="sgSte"] circle.ecg-j:not([data-wave="sgSte"]) { opacity: 0.12; }
.ecg-fig[data-sel="sgStd"] .ecg-marker:not([data-wave="sgStd"]) { opacity: 0.12; }
.ecg-fig[data-sel="sgStd"] text.ecg-label[data-wave]:not([data-wave="sgStd"]) { opacity: 0.12; }
.ecg-fig[data-sel="sgStd"] circle.ecg-j:not([data-wave="sgStd"]) { opacity: 0.12; }
.ecg-fig[data-sel="sgDis"] .ecg-marker:not([data-wave="sgDis"]) { opacity: 0.12; }
.ecg-fig[data-sel="sgDis"] text.ecg-label[data-wave]:not([data-wave="sgDis"]) { opacity: 0.12; }
.ecg-fig[data-sel="sgDis"] circle.ecg-j:not([data-wave="sgDis"]) { opacity: 0.12; }
.ecg-fig[data-sel="ant"] .ecg-marker:not([data-wave="ant"]) { opacity: 0.12; }
.ecg-fig[data-sel="ant"] text.ecg-label[data-wave]:not([data-wave="ant"]) { opacity: 0.12; }
.ecg-fig[data-sel="ant"] circle.ecg-j:not([data-wave="ant"]) { opacity: 0.12; }
.ecg-fig[data-sel="post"] .ecg-marker:not([data-wave="post"]) { opacity: 0.12; }
.ecg-fig[data-sel="post"] text.ecg-label[data-wave]:not([data-wave="post"]) { opacity: 0.12; }
.ecg-fig[data-sel="post"] circle.ecg-j:not([data-wave="post"]) { opacity: 0.12; }
.ecg-fig[data-sel="narrow"] .ecg-marker:not([data-wave="narrow"]) { opacity: 0.12; }
.ecg-fig[data-sel="narrow"] text.ecg-label[data-wave]:not([data-wave="narrow"]) { opacity: 0.12; }
.ecg-fig[data-sel="narrow"] circle.ecg-j:not([data-wave="narrow"]) { opacity: 0.12; }
.ecg-fig[data-sel="wide"] .ecg-marker:not([data-wave="wide"]) { opacity: 0.12; }
.ecg-fig[data-sel="wide"] text.ecg-label[data-wave]:not([data-wave="wide"]) { opacity: 0.12; }
.ecg-fig[data-sel="wide"] circle.ecg-j:not([data-wave="wide"]) { opacity: 0.12; }
.ecg-fig[data-sel="psinus"] .ecg-marker:not([data-wave="psinus"]) { opacity: 0.12; }
.ecg-fig[data-sel="psinus"] text.ecg-label[data-wave]:not([data-wave="psinus"]) { opacity: 0.12; }
.ecg-fig[data-sel="psinus"] circle.ecg-j:not([data-wave="psinus"]) { opacity: 0.12; }
.ecg-fig[data-sel="axis"] .ecg-marker:not([data-wave="axis"]) { opacity: 0.12; }
.ecg-fig[data-sel="axis"] text.ecg-label[data-wave]:not([data-wave="axis"]) { opacity: 0.12; }
.ecg-fig[data-sel="axis"] circle.ecg-j:not([data-wave="axis"]) { opacity: 0.12; }
.ecg-fig[data-sel="reg"] .ecg-marker:not([data-wave="reg"]) { opacity: 0.12; }
.ecg-fig[data-sel="reg"] text.ecg-label[data-wave]:not([data-wave="reg"]) { opacity: 0.12; }
.ecg-fig[data-sel="reg"] circle.ecg-j:not([data-wave="reg"]) { opacity: 0.12; }
.ecg-fig[data-sel="v1"] .ecg-marker:not([data-wave="v1"]) { opacity: 0.12; }
.ecg-fig[data-sel="v1"] text.ecg-label[data-wave]:not([data-wave="v1"]) { opacity: 0.12; }
.ecg-fig[data-sel="v1"] circle.ecg-j:not([data-wave="v1"]) { opacity: 0.12; }
.ecg-fig[data-sel="v5"] .ecg-marker:not([data-wave="v5"]) { opacity: 0.12; }
.ecg-fig[data-sel="v5"] text.ecg-label[data-wave]:not([data-wave="v5"]) { opacity: 0.12; }
.ecg-fig[data-sel="v5"] circle.ecg-j:not([data-wave="v5"]) { opacity: 0.12; }
.ecg-fig[data-sel="chambers"] .ecg-marker:not([data-wave="chambers"]) { opacity: 0.12; }
.ecg-fig[data-sel="chambers"] text.ecg-label[data-wave]:not([data-wave="chambers"]) { opacity: 0.12; }
.ecg-fig[data-sel="chambers"] circle.ecg-j:not([data-wave="chambers"]) { opacity: 0.12; }
.ecg-fig[data-sel="lowv"] .ecg-marker:not([data-wave="lowv"]) { opacity: 0.12; }
.ecg-fig[data-sel="lowv"] text.ecg-label[data-wave]:not([data-wave="lowv"]) { opacity: 0.12; }
.ecg-fig[data-sel="lowv"] circle.ecg-j:not([data-wave="lowv"]) { opacity: 0.12; }
.ecg-fig[data-sel] .ecg-marker[data-wave] { stroke-width: 2.2; }
@media (prefers-reduced-motion: reduce) { .ecg-fig .ecg-marker, .ecg-fig text.ecg-label[data-wave], .ecg-fig circle.ecg-j { transition: none !important; } }
/* v4.9 wave buttons below ECG */
.ecg-wavebtns { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-subtle); background: var(--card); }
.ecg-wavebtn { min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-full); background: var(--bg); color: var(--ink); font: inherit; font-size: 0.76rem; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: all 150ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ecg-wavebtn:hover { border-color: var(--accent); background: var(--home-hover); transform: translateY(-1px); }
.ecg-wavebtn:active { transform: scale(0.97); }
.ecg-wavebtn[aria-pressed="true"] { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
html[data-theme="dark"] .ecg-wavebtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-fill); }
@media (max-width: 480px) { .ecg-wavebtn { flex: 1 1 30%; padding: 6px 8px; } }
@media print { .ecg-wavebtns { display: none !important; } }
@media (forced-colors: active) { .ecg-wavebtn { border: 1.5px solid ButtonText; } }
@media (prefers-reduced-motion: reduce) { .ecg-wavebtn { transition: none !important; } }
.ecg-axis-ok { fill: rgba(var(--accent-rgb),0.14); stroke: none; }
.ecg-axis-line { stroke: var(--ink); stroke-width: 1.5; }
.ecg-paper .ecg-axis-ok { fill: rgba(22,163,74,0.12); }
@media print { .ecg-axis-ok { fill: #e6f7f2 !important; } .ecg-axis-line { stroke: #111 !important; } }
@media (forced-colors: active) { .ecg-axis-ok { fill: Canvas; stroke: ButtonText; } .ecg-axis-line { stroke: ButtonText; } }
/* v4.11 night-mode: paper stays light, so no theme-ink paint inside it */
.ecg-paper .ecg-label-b { fill: #111111; stroke: #ffffff; }
.ecg-paper .ecg-axis-line { stroke: #111111; }
/* v4.12 label readability: halo blobs on scaled SVG in Chromium — use bare dark glyphs like real printouts */
.ecg-svg text, .ecg-svg .ecg-label, .ecg-svg .ecg-lead, .ecg-svg .ecg-label-b {
  paint-order: normal;
  stroke: none;
}
.ecg-paper .ecg-label { fill: #1f2937; }
.ecg-paper .ecg-lead, .ecg-paper .ecg-label-b { fill: #111111; }
.ecg-svg .ecg-label { font-size: 10.5px; font-size: calc(10.5px * var(--type-scale, 1)); }
.ecg-svg .ecg-lead, .ecg-svg .ecg-label-b { font-size: 12px; font-size: calc(12px * var(--type-scale, 1)); }
@media print {
  .ecg-paper .ecg-label { fill: #1f2937 !important; }
  .ecg-paper .ecg-lead, .ecg-paper .ecg-label-b { fill: #111111 !important; }
}
@media (forced-colors: active) {
  .ecg-svg text { stroke: none; }
}

/* ── Small-screen containment: keep every app surface inside the viewport ── */
@media (max-width: 600px) {
  html, body, .main, .topbar, .stage, .stage > *, .foot {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .main { margin-left: 0; }
  .sidebar {
    width: min(88vw, 320px);
    max-width: calc(100vw - env(safe-area-inset-right, 0px));
    padding: max(14px, env(safe-area-inset-top, 14px)) 12px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .side-list, .side-footer, .brand-text, .side-item, .side-btn { min-width: 0; }
  .side-item, .side-btn { overflow-wrap: anywhere; }

  .topbar > * { min-width: 0; }
  .topbar-tools, .chips, .pref-tools { max-width: 100%; min-width: 0; }
  .topbar-tools.open { overflow: hidden; }
  .pref-tools { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pref-btn, .pref-scale { min-width: 0; }
  .section-card, .sec-head, .sec-body, .cp-hero, .hero, .ecg-hero,
  .study-dashboard, .personal-plan, .shift-sheet, .shift-topline,
  .ecg-pattern, .ecg-fig, .ecg-media { min-width: 0; max-width: 100%; }
}

@media (max-width: 360px) {
  .topbar {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    padding-inline: 8px;
  }
  .burger, #homeBtn, #studyBtn, #shiftBtn, #ecgBtn, .tools-toggle {
    min-width: 0;
    width: 100%;
    height: 44px;
    min-height: 44px;
  }
  .tools-toggle .header-label { display: none; }
  .sidebar { width: min(92vw, 300px); }
  .stage { padding-inline: 10px; }
  .hero, .cp-hero, .ecg-hero { padding-left: 16px; padding-right: 16px; }
  .chip { font-size: 0.68rem; }
}

/* v5.0 ECG engine 12-lead (Phase 1): paper grid lives inside the SVG so paper
   and waveform stay geometrically locked. Container only provides readable
   horizontal scroll on phones; engine SVG is self-styled (always light paper)
   and needs no theme overrides. */
.ecg-svg.ecg-engine-12lead { max-height: 560px; }
.ecg-fig .ecg-svg.ecg-engine-12lead { width: 100%; height: auto; }
@media (max-width: 700px) {
  .ecg-media .ecg-svg-wrap:has(.ecg-engine-12lead) { min-width: 0; }
  .ecg-svg.ecg-engine-12lead { max-height: none; min-width: 0; }
}
@media print {
  .ecg-svg.ecg-engine-12lead { max-height: none; }
}

/* ECG audit: paper and signal share SVG units. Schematics have no pseudo-scale. */
.ecg-media, .ecg-lightbox-media { background: #fff; }
.ecg-fig .ecg-svg.ecg-calibrated { max-height: none; }
.ecg-fig:has(.ecg-calibrated) .ecg-svg-wrap { min-width: 0; }
.ecg-fig:has(.ecg-calibrated) .ecg-media { overflow-x: auto; }
.ecg-calibrated .ecg-panel-heading { font: 600 13px ui-monospace, SFMono-Regular, Consolas, monospace; fill: #17212b; }
.ecg-calibrated .ecg-panel-tick { font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; fill: #475569; }
.ecg-calibrated .ecg-signal { stroke: #17212b; stroke-width: 1.25; }
.ecg-reference { display: none; fill: none; stroke: #2563eb; stroke-width: 1.25; stroke-dasharray: 5 3; }
.show-reference .ecg-reference { display: block; }
.hide-anno .ecg-annotation, .hide-labels .ecg-annotation,
.hide-labels .ecg-marker, .hide-labels .ecg-label:not(.ecg-lead) { display: none; }
.ecg-workbench .ecg-lightbox-card { max-width: 1200px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.ecg-workbench .ecg-lightbox-head { position: sticky; top: 0; z-index: 2; background: var(--card); }
.ecg-workbench-tools, .ecg-caliper-inputs { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ecg-workbench-tools label, .ecg-caliper-inputs label { display: grid; gap: 4px; font-size: .75rem; color: var(--ink-soft); }
.ecg-workbench-tools select, .ecg-workbench-tools button, .ecg-caliper-inputs input { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--card); color: var(--ink); font: inherit; }
.ecg-caliper-inputs input { width: 140px; }
.ecg-workbench-tools button { cursor: pointer; font-size: .8rem; }
.ecg-workbench-tools button[aria-pressed="true"] { background: var(--accent); color: #10261c; }
.ecg-workbench-tools :focus-visible, .ecg-caliper-inputs :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ecg-workbench-paper { max-height: 58dvh; overflow: auto; background: white; padding: 12px; }
.ecg-workbench-canvas { min-width: 0; }
.ecg-workbench-canvas .ecg-svg { max-height: none !important; width: 100%; height: auto; }
.ecg-workbench-canvas.is-measuring { cursor: crosshair; touch-action: none; }
.ecg-workbench .ecg-hotzone { pointer-events: none; }
.ecg-calipers line { stroke: #7c3aed; stroke-width: 1; stroke-dasharray: 3 2; }
.ecg-calipers circle { fill: #7c3aed; stroke: white; stroke-width: 2; cursor: grab; }
.ecg-calipers text { fill: #5b21b6; font: bold 14px system-ui, sans-serif; paint-order: stroke; stroke: white; stroke-width: 3; }
.ecg-measurement { margin: 0; padding: 10px 16px; font-size: .85rem; line-height: 1.5; }
.ecg-measurement:empty { display: none; }
.ecg-caliper-inputs[hidden] { display: none; }
.ecg-fig figcaption { line-height: 1.55; }
@media (max-width: 600px) {
  .ecg-workbench { padding: 4px; }
  .ecg-workbench .ecg-lightbox-card { max-height: calc(100dvh - 8px); }
  .ecg-workbench-tools { gap: 6px; padding: 10px; }
  .ecg-workbench-paper { max-height: 48dvh; }
}
@media print {
  .ecg-fig:has(.ecg-calibrated) .ecg-svg-wrap { min-width: 0; }
  .ecg-fig:has(.ecg-calibrated) .ecg-media { overflow: visible; }
  .ecg-annotation { display: block !important; }
  .ecg-reference { display: none !important; }
  .ecg-workbench { display: none !important; }
}
.ecg-tool[hidden] { display: none !important; }

/* Fit the whole tracing first; zoom is an explicit viewer action. */
.ecg-fig .ecg-media { overflow: hidden; padding: 6px; }
.ecg-fig .ecg-svg-wrap { width: 100%; min-width: 0; max-width: 720px; margin-inline: auto; }
.ecg-fig .ecg-media .ecg-svg { width: 100%; min-width: 0; height: auto; max-height: none !important; }
.ecg-workbench .ecg-lightbox-card { min-width: 0; }
.ecg-workbench-canvas .ecg-svg { min-width: 0; }
.ecg-workbench-tools label { min-width: 0; }
.ecg-workbench-tools select { width: 100%; min-width: 0; max-width: 100%; }
.ecg-workbench-tools .ecg-diagnosis { flex: 1 1 100%; grid-column: 1 / -1; font-size: .85rem; }
.ecg-findings { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ecg-findings > strong { font-size: .85rem; }
.ecg-finding-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ecg-finding-buttons button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--card); font: inherit; font-size: .8rem; cursor: pointer; }
.ecg-finding-buttons button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ecg-finding-detail { margin: 10px 0 0; font-size: .85rem; line-height: 1.55; }
.ecg-finding-marks, .ecg-inline-marks { pointer-events: none; }
.ecg-finding-marks ellipse, .ecg-inline-marks { fill: rgba(220,38,38,.035); stroke: #dc2626; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ecg-guided-target { fill: transparent; stroke: none; cursor: pointer; pointer-events: all; }
.ecg-guided-target:focus-visible { outline: none; stroke: none; }
@media (forced-colors: active) { .ecg-finding-marks ellipse, .ecg-inline-marks { stroke: Highlight; fill: none; forced-color-adjust: none; } }
.ecg-settings { border-bottom: 1px solid var(--line); }
.ecg-settings summary { min-height: 44px; padding: 12px 16px; font-size: .8rem; cursor: pointer; }
.ecg-calipers .ecg-caliper-hit { fill: transparent; stroke: none; }
.ecg-calibrated .ecg-panel-heading { font-size: 20px; }
.ecg-calibrated .ecg-panel-tick { font-size: 17px; }
.ecg-panel-select { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; font-size: .85rem; }
.ecg-panel-select select { min-width: 0; width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; color: var(--ink); background: var(--card); font: inherit; }
.ecg-fig .ecg-svg { overflow: hidden; }
.ecg-fig[data-ecg-fig="normal-12lead"] .ecg-media { overflow-x: auto; }
.ecg-fig[data-ecg-fig="normal-12lead"] .ecg-svg-wrap { min-width: 920px; max-width: none; }
.ecg-workbench-paper:has(.ecg-engine-12lead) .ecg-workbench-canvas { min-width: 920px; }
.ecg-workbench-paper { max-height: none; overflow-x: auto; overflow-y: hidden; }
.ecg-workbench .ecg-lightbox-close, .ecg-tool, .ecg-wavebtn, .ecg-step-chip { min-height: 44px; }
@media print {
  .ecg-panel-select { display: none; }
  .ecg-fig[data-ecg-fig="normal-12lead"] .ecg-svg-wrap { min-width: 0; }
}
@media (max-width: 700px) {
  .case-actions:has(#openDynamicEcg) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-actions:has(#openDynamicEcg) .case-action { min-width: 0; min-height: 44px; white-space: normal; }
  .ecg-pattern-grid { grid-template-columns: minmax(0, 1fr); }
  .ecg-pattern { padding: 12px; }
  .ecg-fig { margin-block: 10px; }
  .ecg-fig .ecg-media { padding: 4px; }
  .ecg-workbench-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .ecg-workbench-tools button, .ecg-workbench-tools select { padding: 7px; font-size: .72rem; }
  .ecg-workbench-paper { padding: 6px; }
  .ecg-caliper-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
  .ecg-caliper-inputs input { width: 100%; min-width: 0; }
}

/* Student interface: neutral reading surfaces and one consistent navigation hierarchy. */
html[data-theme][data-accent] {
  --bg: #f6f7f9; --card: #fff; --card-elevated: #fff;
  --ink: #202b38; --ink-soft: #647181; --line: #dfe4e9; --line-subtle: #edf0f3;
  --topbar-bg: #fff; --foot-bg: #f6f7f9; --home-hover: #f0f4f4; --hover-line: #bdcbc9;
  --ov-job-bg: #f2f6f5; --ov-job-line: #dbe6e2;
  --shadow-sm: 0 1px 2px rgba(20,35,50,.025); --shadow: 0 2px 8px rgba(20,35,50,.035);
  --shadow-lg: 0 10px 30px rgba(20,35,50,.08); --shadow-float: 0 14px 40px rgba(20,35,50,.13);
  --side-w: 248px; --radius-xl: 16px; --radius-lg: 14px; --radius-md: 10px;
  --side-muted: #536271; --side-sub: #758190; --side-label: #687585; --side-note: #768291;
  --pearls-bg: #f3f8f5; --pearls-line: #deebe3; --pitfalls-bg: #fffbf3; --pitfalls-line: #ede3cf;
}
html[data-theme="dark"][data-accent] {
  --bg: #111720; --card: #19222d; --card-elevated: #202b38;
  --ink: #e3e9f0; --ink-soft: #a1adbc; --line: #2c3745; --line-subtle: #25303d;
  --topbar-bg: #151d27; --foot-bg: #111720; --home-hover: #222e3b; --hover-line: #52646a;
  --ov-job-bg: #1b2a30; --ov-job-line: #34434b;
  --shadow-sm: none; --shadow: none; --shadow-lg: 0 10px 30px rgba(0,0,0,.16); --shadow-float: 0 14px 40px rgba(0,0,0,.3);
  --side-muted: #aeb9c7; --side-sub: #8a99ab; --side-label: #93a1b3; --side-note: #8a99ab;
  --pearls-bg: #1b2928; --pearls-line: #30433d; --pitfalls-bg: #2b2823; --pitfalls-line: #454034;
}
html[data-theme="light"][data-accent="emerald"] { --brand: #235c50; --brand-2: #235c50; --accent: #287263; --accent-2: #438575; --accent-rgb: 40,114,99; --on-fill: #fff; }
html[data-theme="dark"][data-accent="emerald"] { --brand: #9bcdbf; --brand-2: #9bcdbf; --accent: #8dc5b5; --accent-2: #8dc5b5; --accent-rgb: 141,197,181; --on-fill: #152923; }
html[data-weight="bold"] { --font-weight-body: 500; --font-weight-title: 650; }
html:not([data-weight="bold"]) { --font-weight-body: 400; --font-weight-title: 600; }
.ui-icon { width: 19px; height: 19px; display: block; flex: none; }
body { line-height: 1.65; }
body button { box-shadow: none; }
.main .stage { width: 100%; max-width: 1120px; margin-inline: auto; padding: 36px 40px 48px; }
.sidebar { background: var(--card); color: var(--ink); border-right: 1px solid var(--line); box-shadow: none; padding: 22px 16px 16px; }
.sidebar > .brand, .sidebar > .side-list, .sidebar > .side-footer { flex-shrink: 0; }
.brand { padding: 2px 8px 24px; gap: 10px; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-2); color: var(--on-fill); font-size: .94rem; font-weight: 700; box-shadow: none; }
.brand-text strong { color: var(--ink); font-size: .96rem; font-weight: 650; }
.brand-text span { font-size: .65rem; }
.brand:hover .brand-mark { transform: none; }
.side-list { gap: 6px; }
.side-item { min-height: 44px; padding: 10px 12px; font-size: .81rem; font-weight: 500; border-radius: 8px; }
.side-item .ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--ov-job-bg); color: var(--brand-2); font-style: normal; }
/* Hybrid mono icons: original emoji kept in data.js for rollback, rendered as stroke SVG via app.js iconFor(). */
.side-item .ico .mono-ico { width: 16px; height: 16px; }
.side-item:hover { transform: none; background: var(--home-hover); color: var(--ink); }
.side-item.side-home { margin-bottom: 0; background: none; border-color: transparent; color: var(--ink); }
.side-item.active, .side-item.side-home.active { background: var(--ov-job-bg); border-color: transparent; color: var(--brand-2); box-shadow: inset 3px 0 0 var(--accent); }
.side-group { margin: 6px 0 0; }
/* The global marker reset also removes the disclosure triangle from sidebar
   groups, so a closed group looks like dead text. Restore a chevron that
   rotates with the open state. */
.side-group > summary {
    min-height: 44px;
    padding: 12px 8px;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--side-label);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    border-radius: 9px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.side-group > summary::-webkit-details-marker { display: none; }
.side-group > summary::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    opacity: .65;
    -webkit-mask-image: var(--side-caret-mask);
    mask-image: var(--side-caret-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.side-group[open] > summary::before { transform: rotate(90deg); }
.side-group > summary:hover { background: rgba(255, 255, 255, 0.06); color: #d2dce3; }
.side-group[open] > summary { color: var(--ink); }
.side-group .side-item { padding-left: 20px; }
.side-footer { border-color: var(--line); padding-top: 12px; margin-top: auto; }
.side-btn { justify-content: flex-start; padding-inline: 10px; font-weight: 500; border-color: transparent; background: transparent; }
.side-btn:hover { background: var(--home-hover); color: var(--ink); border-color: transparent; }
.side-note { font-size: .67rem; line-height: 1.6; }
.topbar { display: grid; grid-template-columns: 44px minmax(180px,1fr) auto auto; gap: 18px; padding: 14px 32px; background: var(--topbar-bg); box-shadow: none; border-bottom: 1px solid var(--line-subtle); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.topbar > .burger { display: flex; grid-column: 1; grid-row: 1; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink-soft); align-items: center; justify-content: center; cursor: pointer; }
.primary-nav { display: flex; align-items: center; gap: 3px; grid-column: 3; grid-row: 1; }
.primary-nav .home-btn { width: auto; min-width: 0; height: 44px; padding: 0 11px; font-size: .8rem; font-weight: 550; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; gap: 7px; box-shadow: none; }
.primary-nav #homeBtn, .primary-nav #studyBtn, .primary-nav #shiftBtn, .primary-nav #ecgBtn { grid-column: auto; grid-row: auto; width: auto; min-width: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; padding: 0 11px; }
.primary-nav #homeBtn .header-label, .primary-nav #studyBtn .header-label, .primary-nav #shiftBtn .header-label, .primary-nav #ecgBtn .header-label { display: inline; font-size: inherit; }
.primary-nav .home-btn:hover { transform: none; color: var(--ink); background: var(--home-hover); box-shadow: none; }
.primary-nav .home-btn.active-nav, html[data-theme="dark"] .primary-nav .home-btn.active-nav { background: var(--ov-job-bg); color: var(--brand-2); border-color: transparent; box-shadow: none; }
.topbar > .searchwrap { grid-column: 2; grid-row: 1; width: 100%; max-width: 460px; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); box-shadow: none; margin: 0; }
#searchInput { font-size: .84rem; }
.search-ico { opacity: 1; color: var(--ink-soft); }
.topbar > .tools-toggle { display: flex; grid-column: 4; grid-row: 1; min-width: 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink-soft); box-shadow: none; }
.tools-toggle .header-label { display: none; }
.topbar > .topbar-tools { display: none; position: absolute; left: auto; top: calc(100% + 8px); right: 24px; width: 380px; max-width: calc(100vw - 24px); padding: 18px; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-float); }
.topbar > .topbar-tools.open { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.topbar-tools .chips { justify-content: space-between; flex-wrap: wrap; }
.topbar-tools .pref-scale { font-size: 13px; white-space: nowrap; }
.topbar-tools .pref-tools { justify-content: center; background: var(--bg); border-radius: 8px; padding: 4px; }
.topbar-tools .accent-tools { border: 0; padding: 0; background: transparent; justify-content: center; }
.pref-btn, .chip, .patient-chip { box-shadow: none; font-weight: 550; border-width: 1px; border-radius: 8px; }
.accent-dot { width: 34px; height: 34px; }
.home-intro { padding: 8px 0 26px; max-width: 760px; margin-inline: 0; }
.home-eyebrow, .home-intro > span { color: var(--brand-2); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.home-intro h1 { font-size: clamp(1.8rem,3vw,2.6rem); letter-spacing: -.035em; line-height: 1.16; margin: 10px 0 12px; max-width: 650px; font-weight: 650; }
.home-intro p { color: var(--ink-soft); max-width: 58ch; font-size: .96rem; line-height: 1.65; }
.home-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; color: var(--ink-soft); font-size: .73rem; }
.home-meta span + span::before { content: "·"; margin-right: 14px; opacity: .6; }
.home-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.home-actions button { min-height: 44px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 16px; background: var(--card); color: var(--ink); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.home-actions button:first-child { background: var(--brand-2); border-color: var(--brand-2); color: var(--on-fill); }
.study-dashboard.study-dashboard-compact { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; padding: 18px 22px; margin: 0 0 32px; gap: 20px; }
.study-dashboard-compact h2 { font-size: .95rem; font-weight: 600; margin: 0; }
.study-dashboard-compact .study-kicker { display: none; }
.study-dashboard-compact p { font-size: .79rem; }
.study-dashboard-compact .study-stats { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.study-dashboard-compact .study-stat:first-child { border-left: 0; }
.study-dashboard-compact .study-stat:last-child strong { font-size: .95rem; color: var(--brand-2); }
.study-dashboard-compact .study-stat { min-width: 96px; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 6px 14px; background: none; box-shadow: none; transform: none; }
.study-dashboard-compact .study-stat strong { color: var(--ink); font-weight: 600; font-size: 1.2rem; }
.study-dashboard-compact .study-stat span { color: var(--ink-soft); font-size: .72rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.study-dashboard-compact .study-stat.accent, html[data-theme="dark"] .study-dashboard-compact .study-stat.accent { background: var(--ov-job-bg); border: 0; border-radius: 8px; box-shadow: none; }
.study-dashboard-compact .study-stat.accent strong, .study-dashboard-compact .study-stat.accent span { color: var(--brand-2); }
.library-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.library-head h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.library-head p, .library-head > span { font-size: .8rem; color: var(--ink-soft); }
.library-filters { margin: 0; padding: 0; }
.library-filters[open] { flex-basis: 100%; }
.library-head:has(.library-filters[open]) { flex-wrap: wrap; }
.library-filters > summary { cursor: pointer; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-soft); font-size: .78rem; }
.library-filters .patient-filter { flex-wrap: wrap; margin: 10px 0 0; overflow: visible; }
.home-group { margin-bottom: 30px; }
.group-title { font-size: .86rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; text-transform: none; margin: 0 0 12px; }
.group-title span { border: 0; background: var(--line-subtle); color: var(--ink-soft); padding: 1px 7px; font-weight: 500; }
.cp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.cp-grid .cp-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: auto auto; align-content: center; align-items: center; gap: 6px 12px; min-height: 106px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: var(--shadow-sm); transition: transform var(--transition-fast) var(--ease-out), box-shadow var(--transition-fast) ease, border-color var(--transition-fast) ease, background var(--transition-fast) ease; }
.cp-grid .cp-card::before { display: none; }
.cp-grid .cp-card:hover { transform: translateY(-2px); background: var(--card); border-color: var(--hover-line); box-shadow: var(--shadow); }
/* Medical SVG icon tile */
.cp-card .cp-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 6px; border-radius: 12px; background: var(--ov-job-bg); grid-column: 1; grid-row: 1; justify-self: start; margin: 0; flex: none; transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease; }
.cp-card .cp-ico .mono-ico { width: 20px; height: 20px; }
.cp-card .cp-ico .color-ico { width: 30px; height: 30px; }
.cp-grid .cp-card:hover .cp-ico { transform: scale(1.08) translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.cp-hero .cp-ico-lg { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; padding: 9px; border-radius: 16px; background: var(--ov-job-bg); border: 1px solid var(--line); margin-bottom: 12px; box-shadow: var(--shadow-sm); flex: none; }
.cp-hero .cp-ico-lg .mono-ico { width: 26px; height: 26px; }
.cp-hero .cp-ico-lg .color-ico { width: 40px; height: 40px; }
.cp-grid .cp-card h3 { grid-column: 2; grid-row: 1; margin: 0; padding: 0; color: var(--ink); font-weight: 600; font-size: .97rem; line-height: 1.4; }
.cp-grid .cp-card p { grid-column: 2 / -1; grid-row: 2; margin: 0; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }
.cp-grid .cp-card .cp-count { position: static; grid-column: 3; grid-row: 1; align-self: center; color: var(--ink-soft); background: var(--line-subtle); border: 1px solid var(--line); border-radius: 9999px; padding: 2px 8px; font-size: .68rem; font-weight: 550; white-space: nowrap; transition: border-color var(--transition-fast) ease, color var(--transition-fast) ease; }
.cp-grid .cp-card:hover .cp-count { border-color: var(--hover-line); color: var(--brand-2); }
.cp-grid .cp-reviewed, .cp-grid .cp-saved { position: static; grid-column: 2 / -1; color: var(--brand-2); font-size: .7rem; margin: 2px 0 0; }
.cp-hero { background: transparent; border: 0; box-shadow: none; padding: 0 0 26px; margin-bottom: 0; border-radius: 0; }
.cp-hero::before, .cp-hero::after { display: none; }
.cp-hero h1 { color: var(--ink); font-size: clamp(1.7rem,3vw,2.3rem); line-height: 1.2; letter-spacing: -.03em; font-weight: 650; }
.cp-hero .tag, .cp-hero .ecg-subhead { color: var(--ink-soft); font-size: .96rem; max-width: 70ch; line-height: 1.65; }
.cp-hero .back-btn { position: static; display: inline-flex; border: 0; background: none; color: var(--ink-soft); padding: 0; margin: 0 0 14px; min-height: 36px; font-size: .77rem; font-weight: 500; box-shadow: none; }
.case-rail { display: block; border: 1px solid var(--ov-job-line); border-left: 3px solid var(--accent); background: var(--ov-job-bg); padding: 20px 24px; border-radius: 12px; box-shadow: none; margin-bottom: 20px; }
.case-rail-title { margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
/* Hybrid: mono bolt tile. Rollback: restore `display:none`. */
.case-rail-title > span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: rgba(var(--accent-rgb), 0.14); color: var(--brand-2); }
.case-rail-title > span .mono-ico { width: 18px; height: 18px; }
.case-rail-title strong { font-size: .98rem; font-weight: 600; color: var(--ink); }
.case-rail-title small { font-size: .75rem; color: var(--ink-soft); }
.case-steps { display: grid; grid-template-columns: 1fr; gap: 8px; }
.case-steps li { font-size: .86rem; line-height: 1.6; padding: 0; background: none; border: 0; }
.case-steps li > span { background: transparent; color: var(--brand-2); font-size: .78rem; width: 22px; height: auto; border: 0; }
.case-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.case-action, .case-action.primary { min-height: 44px; flex: 0 1 auto; border: 1px solid var(--line); color: var(--ink); background: var(--card); border-radius: 8px; font-weight: 550; font-size: .77rem; padding: 8px 12px; box-shadow: none; white-space: normal; }
.breadcrumbs { display: flex; align-items: center; gap: 5px; margin: 0 0 10px; font-size: .78rem; color: var(--ink-soft); }
.crumb-group { color: var(--ink-soft); }
.crumb-sep { color: var(--ink-soft); opacity: .55; }
.crumb-current { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.presentation-study-group { scroll-margin-top: 140px; }
.medication-safety { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; font-size: .82rem; color: var(--ink-soft); }
.medication-safety summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 550; }
.medication-safety p + p { margin-top: 8px; }
.clinical-safety-note { margin-top: 16px; color: var(--ink-soft); font-size: .8rem; }
.presentation-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.section-jump { min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font: inherit; font-size: .79rem; font-weight: 500; padding: 8px 11px; cursor: pointer; }
.section-jump:hover { color: var(--brand-2); background: var(--ov-job-bg); }
.section-card { border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); margin-bottom: 14px; overflow: hidden; background: var(--card); transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease; }
.section-card:hover { border-color: var(--hover-line); }
.sec-head { padding: 18px 22px; min-height: 62px; background: var(--card); border: 0; gap: 10px; color: var(--ink); font-size: 1rem; font-weight: 600; }
/* ── iOS 18 squircle badge for section headers ── */
.sec-head .sec-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: none;
    background: var(--surface-2, rgba(0, 0, 0, 0.05));
    color: var(--brand-2);
    transition: transform var(--transition-fast) ease, background var(--transition-fast) ease;
}
.sec-head .sec-ico .mono-ico,
.sec-head .sec-ico svg {
    width: 17px;
    height: 17px;
    display: block;
    stroke: currentColor;
    stroke-width: 2.1;
}
.sec-head .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-soft);
    margin-left: auto;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background var(--transition-fast) ease;
}
.sec-head .arrow .sec-chevron,
.sec-head .arrow svg {
    width: 14px;
    height: 14px;
    display: block;
    stroke: currentColor;
}
/* ── Distinct per-presentation icons (each subject keeps its own emoji) + mono system chrome ── */
.mono-ico { display: block; flex: none; }
.color-ico { display: block; width: 100%; height: 100%; flex: none; }
.emoji-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 1.25em; line-height: 1.25; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0; vertical-align: middle; }
.cp-ico .mono-ico, .cp-ico-lg .mono-ico, .side-item .ico .mono-ico, .case-rail-title .mono-ico, .study-topic-ico .mono-ico { stroke: currentColor; }
.cp-ico .emoji-ico { font-size: 1.35rem; }
.cp-ico-lg .emoji-ico { font-size: 1.9rem; }
.side-item .ico .emoji-ico { font-size: 1.05rem; }
.study-topic-ico .emoji-ico { font-size: 1.1rem; }
.related-chip .emoji-ico { margin-right: 4px; }
.side-item .ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 4px; flex: none; border-radius: 8px; font-style: normal; }
.side-item .ico .color-ico { width: 19px; height: 19px; }
.study-topic-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 5px; flex: none; border-radius: 10px; background: var(--ov-job-bg); }
.study-topic-ico .mono-ico { width: 17px; height: 17px; }
.study-topic-ico .color-ico { width: 24px; height: 24px; }
.related-chip .mono-ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.chip-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 2px; flex: none; border-radius: 6px; }
.chip-ico .color-ico { width: 16px; height: 16px; }
.res-ico .color-ico { width: 22px; height: 22px; }

/* ── Category Pod Themes ── */
[data-cat] { transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease; }
[data-cat="cardio"] { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border: 1px solid rgba(239, 68, 68, 0.45); box-shadow: 0 2px 6px rgba(239, 68, 68, 0.12); }
[data-cat="pulm"] { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); border: 1px solid rgba(14, 165, 233, 0.45); box-shadow: 0 2px 6px rgba(14, 165, 233, 0.12); }
[data-cat="neuro"] { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); border: 1px solid rgba(139, 92, 246, 0.45); box-shadow: 0 2px 6px rgba(139, 92, 246, 0.12); }
[data-cat="gi"] { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid rgba(245, 158, 11, 0.45); box-shadow: 0 2px 6px rgba(245, 158, 11, 0.12); }
[data-cat="gu"] { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); border: 1px solid rgba(249, 115, 22, 0.45); box-shadow: 0 2px 6px rgba(249, 115, 22, 0.12); }
[data-cat="infect"] { background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%); border: 1px solid rgba(244, 63, 94, 0.45); box-shadow: 0 2px 6px rgba(244, 63, 94, 0.12); }
[data-cat="toxic"] { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 1px solid rgba(34, 197, 94, 0.45); box-shadow: 0 2px 6px rgba(34, 197, 94, 0.12); }
[data-cat="trauma"] { background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%); border: 1px solid rgba(220, 38, 38, 0.5); box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15); }
[data-cat="peds"] { background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%); border: 1px solid rgba(20, 184, 166, 0.45); box-shadow: 0 2px 6px rgba(20, 184, 166, 0.12); }
[data-cat="obgyn"] { background: linear-gradient(135deg, #fae8ff 0%, #f5d0fe 100%); border: 1px solid rgba(217, 70, 239, 0.45); box-shadow: 0 2px 6px rgba(217, 70, 239, 0.12); }
[data-cat="msk"] { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); border: 1px solid rgba(100, 116, 139, 0.4); box-shadow: 0 2px 6px rgba(100, 116, 139, 0.1); }
[data-cat="ent"] { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border: 1px solid rgba(16, 185, 129, 0.45); box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12); }
[data-cat="derm"] { background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%); border: 1px solid rgba(251, 113, 133, 0.45); box-shadow: 0 2px 6px rgba(251, 113, 133, 0.12); }
[data-cat="airway"] { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); border: 1px solid rgba(249, 115, 22, 0.5); box-shadow: 0 2px 6px rgba(249, 115, 22, 0.15); }
[data-cat="psych"] { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); border: 1px solid rgba(99, 102, 241, 0.45); box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12); }
[data-cat="endocrine"] { background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%); border: 1px solid rgba(234, 179, 8, 0.45); box-shadow: 0 2px 6px rgba(234, 179, 8, 0.12); }
[data-cat="environ"] { background: linear-gradient(135deg, #e0f2fe 0%, #fed7aa 100%); border: 1px solid rgba(14, 165, 233, 0.4); box-shadow: 0 2px 6px rgba(14, 165, 233, 0.1); }
[data-cat="ecg"] { background: linear-gradient(135deg, #fee2e2 0%, #ccfbf1 100%); border: 1px solid rgba(239, 68, 68, 0.45); box-shadow: 0 2px 6px rgba(239, 68, 68, 0.12); }
[data-cat="learn"] { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border: 1px solid rgba(59, 130, 246, 0.45); box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12); }
[data-cat="home"], [data-cat="generic"] { background: var(--ov-job-bg); border: 1px solid var(--line); }


/* Clinical system hue, shared by cards, group headings and the hero cap.
   Derived from the existing [data-cat] themes so there is one source. */
[data-cat="cardio"] { --cat: 239, 68, 68; }
[data-cat="pulm"] { --cat: 14, 165, 233; }
[data-cat="neuro"] { --cat: 139, 92, 246; }
[data-cat="gi"] { --cat: 245, 158, 11; }
[data-cat="gu"] { --cat: 249, 115, 22; }
[data-cat="infect"] { --cat: 244, 63, 94; }
[data-cat="toxic"] { --cat: 34, 197, 94; }
[data-cat="trauma"] { --cat: 220, 38, 38; }
[data-cat="peds"] { --cat: 20, 184, 166; }
[data-cat="obgyn"] { --cat: 217, 70, 239; }
[data-cat="msk"] { --cat: 100, 116, 139; }
[data-cat="ent"] { --cat: 16, 185, 129; }
[data-cat="derm"] { --cat: 251, 113, 133; }
[data-cat="airway"] { --cat: 249, 115, 22; }
[data-cat="psych"] { --cat: 99, 102, 241; }
[data-cat="endocrine"] { --cat: 234, 179, 8; }
[data-cat="environ"] { --cat: 14, 165, 233; }
[data-cat="ecg"] { --cat: 239, 68, 68; }
[data-cat="learn"] { --cat: 59, 130, 246; }
[data-cat="home"] { --cat: 100, 116, 139; }
[data-cat="generic"] { --cat: 100, 116, 139; }

/* Dark mode category luminances */
html[data-theme="dark"] [data-cat="cardio"] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.24) 0%, rgba(185, 28, 28, 0.16) 100%); border-color: rgba(239, 68, 68, 0.42); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2); }
html[data-theme="dark"] [data-cat="pulm"] { background: linear-gradient(135deg, rgba(14, 165, 233, 0.24) 0%, rgba(2, 132, 199, 0.16) 100%); border-color: rgba(56, 189, 248, 0.42); box-shadow: 0 2px 8px rgba(14, 165, 233, 0.2); }
html[data-theme="dark"] [data-cat="neuro"] { background: linear-gradient(135deg, rgba(139, 92, 246, 0.24) 0%, rgba(109, 40, 217, 0.16) 100%); border-color: rgba(167, 139, 250, 0.42); box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2); }
html[data-theme="dark"] [data-cat="gi"] { background: linear-gradient(135deg, rgba(245, 158, 11, 0.24) 0%, rgba(180, 83, 9, 0.16) 100%); border-color: rgba(251, 191, 36, 0.42); box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2); }
html[data-theme="dark"] [data-cat="gu"] { background: linear-gradient(135deg, rgba(249, 115, 22, 0.24) 0%, rgba(194, 65, 12, 0.16) 100%); border-color: rgba(251, 146, 60, 0.42); box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2); }
html[data-theme="dark"] [data-cat="infect"] { background: linear-gradient(135deg, rgba(244, 63, 94, 0.24) 0%, rgba(190, 18, 60, 0.16) 100%); border-color: rgba(251, 113, 133, 0.42); box-shadow: 0 2px 8px rgba(244, 63, 94, 0.2); }
html[data-theme="dark"] [data-cat="toxic"] { background: linear-gradient(135deg, rgba(34, 197, 94, 0.24) 0%, rgba(21, 128, 61, 0.16) 100%); border-color: rgba(74, 222, 128, 0.42); box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2); }
html[data-theme="dark"] [data-cat="trauma"] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.28) 0%, rgba(153, 27, 27, 0.18) 100%); border-color: rgba(239, 68, 68, 0.46); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25); }
html[data-theme="dark"] [data-cat="peds"] { background: linear-gradient(135deg, rgba(20, 184, 166, 0.24) 0%, rgba(15, 118, 110, 0.16) 100%); border-color: rgba(45, 212, 191, 0.42); box-shadow: 0 2px 8px rgba(20, 184, 166, 0.2); }
html[data-theme="dark"] [data-cat="obgyn"] { background: linear-gradient(135deg, rgba(217, 70, 239, 0.24) 0%, rgba(162, 28, 175, 0.16) 100%); border-color: rgba(232, 121, 249, 0.42); box-shadow: 0 2px 8px rgba(217, 70, 239, 0.2); }
html[data-theme="dark"] [data-cat="msk"] { background: linear-gradient(135deg, rgba(148, 163, 184, 0.22) 0%, rgba(71, 85, 105, 0.16) 100%); border-color: rgba(148, 163, 184, 0.38); box-shadow: 0 2px 8px rgba(100, 116, 139, 0.15); }
html[data-theme="dark"] [data-cat="ent"] { background: linear-gradient(135deg, rgba(16, 185, 129, 0.24) 0%, rgba(5, 150, 105, 0.16) 100%); border-color: rgba(52, 211, 153, 0.42); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2); }
html[data-theme="dark"] [data-cat="derm"] { background: linear-gradient(135deg, rgba(244, 63, 94, 0.22) 0%, rgba(225, 29, 72, 0.16) 100%); border-color: rgba(251, 113, 133, 0.38); box-shadow: 0 2px 8px rgba(244, 63, 94, 0.18); }
html[data-theme="dark"] [data-cat="airway"] { background: linear-gradient(135deg, rgba(249, 115, 22, 0.26) 0%, rgba(194, 65, 12, 0.18) 100%); border-color: rgba(249, 115, 22, 0.46); box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25); }
html[data-theme="dark"] [data-cat="psych"] { background: linear-gradient(135deg, rgba(99, 102, 241, 0.24) 0%, rgba(67, 56, 202, 0.16) 100%); border-color: rgba(129, 140, 248, 0.42); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2); }
html[data-theme="dark"] [data-cat="endocrine"] { background: linear-gradient(135deg, rgba(234, 179, 8, 0.24) 0%, rgba(161, 98, 7, 0.16) 100%); border-color: rgba(250, 204, 21, 0.42); box-shadow: 0 2px 8px rgba(234, 179, 8, 0.2); }
html[data-theme="dark"] [data-cat="environ"] { background: linear-gradient(135deg, rgba(14, 165, 233, 0.22) 0%, rgba(249, 115, 22, 0.18) 100%); border-color: rgba(56, 189, 248, 0.38); box-shadow: 0 2px 8px rgba(14, 165, 233, 0.18); }
html[data-theme="dark"] [data-cat="ecg"] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.26) 0%, rgba(20, 184, 166, 0.18) 100%); border-color: rgba(248, 113, 113, 0.42); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.22); }
html[data-theme="dark"] [data-cat="learn"] { background: linear-gradient(135deg, rgba(59, 130, 246, 0.24) 0%, rgba(29, 78, 216, 0.16) 100%); border-color: rgba(96, 165, 250, 0.42); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); }
html[data-theme="dark"] [data-cat="home"], html[data-theme="dark"] [data-cat="generic"] { background: var(--ov-job-bg); border: 1px solid var(--line); }
/* Severity dots replace 🔴🟠🟢 emoji — text label preserved for a11y/print. */
.sev-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink-soft); }
.sev-critical > h4 .sev-dot, .sev-dot.sev-critical, .dx-card.sev-critical h3, .dx-card.sev-critical h4 .sev-dot { background: var(--critical); }
.sev-emergent > h4 .sev-dot, .sev-dot.sev-emergent, .dx-card.sev-emergent h3, .dx-card.sev-emergent h4 .sev-dot { background: var(--emergent); }
.sev-common > h3, .sev-common > h4 .sev-dot, .sev-dot.sev-common, .dx-card.sev-common h3, .dx-card.sev-common h4 .sev-dot { background: var(--common); }
.ecg-pattern header .sev-tag { display: inline-flex; align-items: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; }
.chip .sev-dot { width: 8px; height: 8px; }
.pref-btn .mono-ico { width: 16px; height: 16px; }
.theme-ico { display: inline-flex; }
.theme-ico .mono-ico { width: 16px; height: 16px; }
/* Disclaimer + point icons: mono tiles (replaces ⚠️🩺⚖️📚 colorful emoji). */
.badge-icon, .point-ico { display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.badge-icon .mono-ico, .point-ico .mono-ico { width: 18px; height: 18px; }
.point-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--ov-job-bg); color: var(--brand-2); }
.sec-body { padding: 0 22px 22px; border-top: 0; }
.section-card.closed .sec-head { background: var(--card); }
.cluster, .wu-col { border: 0; background: var(--bg); border-radius: 8px; padding: 15px 16px; box-shadow: none; }
.cluster h3, .cluster h4, .wu-col h3, .wu-col h4 { font-size: .88rem; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }
.cluster p, .wu-col li, .disp-col li, .plain-list li, .dx-key, .rf-item { font-size: .86rem; line-height: 1.65; }
.dx-card, .dx-card.sev-critical, .dx-card.sev-emergent, .dx-card.sev-common { background: var(--card); box-shadow: none; border-width: 1px; border-left-width: 3px; border-radius: 8px; padding: 15px 16px; }
.dx-card h3, .dx-card h4 { font-size: .88rem; line-height: 1.5; font-weight: 600; }
.sev-tag { font-size: .64rem; font-weight: 600; letter-spacing: 0; }
.rf-box { border-radius: 9px; padding: 16px; }
.rf-item { border-radius: 7px; padding: 11px 12px; }
.pp-box { border-radius: 9px; border-width: 1px; }
.learning-loop, .personal-plan, .resus-card, .management-pivots { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; margin: 24px 0; padding: 22px; }
.learning-kicker, .study-kicker, .resus-kicker, .ov-kicker { font-size: .67rem; font-weight: 600; letter-spacing: .06em; }
.recall-card, .resus-grid > div, .pivot-grid > div { border: 0; border-radius: 8px; background: var(--bg); }
.study-tabs button span { background: var(--line-subtle); color: var(--ink-soft); font-weight: 550; }
.back-btn, .shift-sheet .review-btn, .personal-plan .save-topic { border: 1px solid var(--line); border-radius: 8px; color: var(--brand-2); background: var(--card); font-weight: 550; box-shadow: none; }
.study-tabs { border-bottom: 1px solid var(--line); padding: 0 0 12px; margin-bottom: 28px; gap: 6px; }
.study-tabs button { border: 0; background: transparent; border-radius: 8px; padding: 10px 16px; font-size: .83rem; font-weight: 550; min-height: 44px; }
.study-tabs button.active, html[data-theme="dark"] .study-tabs button.active { background: var(--ov-job-bg); color: var(--brand-2); box-shadow: none; }
.study-page, .case-practice { border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: none; }
.study-page-head, .case-practice-head { background: transparent; color: var(--ink); border-bottom: 1px solid var(--line); }
.study-page-head h1, .case-practice-head h1, .case-practice-head h2 { color: var(--ink); font-size: 1.65rem; letter-spacing: -.025em; font-weight: 600; }
.study-page-head p, .case-practice-head p { color: var(--ink-soft); font-size: .88rem; line-height: 1.65; }
.study-empty { text-align: center; padding: 44px 24px; color: var(--ink-soft); font-size: .9rem; }
.study-topic, .quiz-option { border-width: 1px; border-radius: 9px; box-shadow: none; font-weight: 500; }
.quiz-question { padding-block: 22px; border: 0; background: var(--bg); border-radius: 9px; }
.quiz-question legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; }
.quiz-question legend + .quiz-options { clear: both; }
.quiz-question legend span { background: var(--ov-job-bg); color: var(--brand-2); font-weight: 600; }
.quiz-question legend { font-weight: 600; font-size: .96rem; }
.quiz-option { min-height: 48px; font-size: .85rem; line-height: 1.6; }
.shift-topline { gap: 12px; margin-bottom: 22px; }
.shift-topline select { border-width: 1px; border-radius: 9px; min-height: 44px; background: var(--card); font-weight: 500; }
.shift-sheet { padding: 26px; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.shift-sheet-head h1 { font-weight: 600; letter-spacing: -.025em; }
.shift-warning { background: var(--bg); color: var(--ink-soft); border: 0; border-radius: 8px; padding: 12px 14px; line-height: 1.6; }
.shift-grid { gap: 22px; }
.shift-grid section { background: var(--bg); border: 0; border-radius: 9px; padding: 18px; }
.shift-grid .shift-red { border-left: 3px solid var(--critical); }
.shift-grid h2 { font-size: .94rem; font-weight: 600; }
.shift-grid li, .shift-grid p { font-size: .86rem; line-height: 1.65; }
.ecg-step-nav { padding: 0 0 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.ecg-step-chip { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; font-weight: 500; }
.ecg-step-chip span { background: var(--ov-job-bg); color: var(--brand-2); box-shadow: none; }
.ecg-pattern-index { margin: 18px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.ecg-pattern-index > summary { min-height: 48px; cursor: pointer; padding: 12px 18px; font-size: .9rem; font-weight: 550; }
.ecg-pattern-index .ecg-killers { padding: 0 18px 18px; }
.ecg-killer, .ecg-pattern { box-shadow: none; border-radius: 10px; }
.ecg-fig { border-radius: 10px; }
.ecg-tool, .ecg-wavebtn { box-shadow: none; font-weight: 550; border-width: 1px; border-radius: 8px; }
.foot { border-top: 1px solid var(--line); color: var(--ink-soft); background: var(--foot-bg); padding: 24px 40px; }
.foot p { max-width: 1000px; margin-inline: auto; font-size: .72rem; line-height: 1.7; }
@media (max-width: 1160px) and (min-width: 921px) {
  .topbar { padding-inline: 22px; gap: 10px; grid-template-columns: 44px minmax(120px,1fr) auto auto; }
  .primary-nav .home-btn { padding-inline: 8px; }
  /* Hybrid fix: keep header SVG visible on tablet — was `display:none` (bug). */
  .primary-nav .ui-icon { display: block; width: 17px; height: 17px; }
}
/* Narrow tablet (921–1000px): icon-only nav so burger + search + tools never clip. Labels return above 1000px. */
@media (max-width: 1000px) and (min-width: 921px) {
  .primary-nav #homeBtn .header-label, .primary-nav #studyBtn .header-label, .primary-nav #shiftBtn .header-label, .primary-nav #ecgBtn .header-label, .primary-nav #explorerBtn .header-label { display: none; }
  .primary-nav #homeBtn, .primary-nav #studyBtn, .primary-nav #shiftBtn, .primary-nav #ecgBtn, .primary-nav #explorerBtn { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .topbar > .searchwrap { max-width: none; }
}
@media (max-width: 920px) {
  .main .stage { padding: 28px 24px 40px; }
  .topbar { grid-template-columns: 44px minmax(0,1fr) 44px; grid-template-rows: 44px 44px; padding: max(10px,env(safe-area-inset-top)) 20px 8px; gap: 8px 10px; }
  .topbar > .burger { display: flex; grid-column: 1; grid-row: 1; box-sizing: border-box; width: 44px; min-width: 44px; height: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ink-soft); border-radius: 8px; box-shadow: none; align-items: center; justify-content: center; }
  .topbar > .searchwrap { grid-column: 2; grid-row: 1; max-width: none; box-sizing: border-box; height: 44px; min-height: 44px; }
  .topbar > .tools-toggle { grid-column: 3; grid-row: 1; border: 0; box-sizing: border-box; height: 44px; min-height: 44px; max-height: 44px; }
  .topbar > .primary-nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; width: 100%; }
  .topbar > .primary-nav #homeBtn { grid-column: 1; grid-row: 1; }
  .topbar > .primary-nav #studyBtn { grid-column: 2; grid-row: 1; }
  .topbar > .primary-nav #shiftBtn { grid-column: 3; grid-row: 1; }
  .topbar > .primary-nav #ecgBtn { grid-column: 4; grid-row: 1; }
  .topbar > .primary-nav #explorerBtn { grid-column: 5; grid-row: 1; }
  .primary-nav #homeBtn, .primary-nav #studyBtn, .primary-nav #shiftBtn, .primary-nav #ecgBtn { width: 100%; padding: 0 6px; font-size: min(.75rem,13px); }
  .primary-nav .home-btn { justify-content: center; padding: 0 6px; height: 44px; min-height: 44px; width: 100%; font-size: .8rem; }
  .primary-nav .home-btn .header-label { display: inline; }
  .topbar > .topbar-tools { right: 12px; width: 360px; max-width: calc(100vw - 24px); }
  .study-dashboard-compact { flex-wrap: wrap; }
  .cp-hero { padding: 0 0 22px; }
}
@media (max-width: 600px) {
  .main .stage { padding: 24px 16px 36px; }
  .topbar { padding-inline: 12px; gap: 6px; }
  .primary-nav .ui-icon { width: 16px; height: 16px; }
  .primary-nav .home-btn { font-size: .75rem; gap: 5px; }
  .topbar > .searchwrap { min-height: 44px; border-radius: 8px; padding: 8px 10px; }
  #searchInput { font-size: .8rem; }
  .search-kbd { display: none; }
  .home-intro { padding: 0 0 24px; }
  .home-intro h1 { font-size: 1.9rem; margin-top: 9px; }
  .home-intro p { font-size: .9rem; }
  .home-actions { margin-top: 18px; gap: 8px; }
  .home-actions button { padding-inline: 13px; font-size: .79rem; }
  .study-dashboard.study-dashboard-compact { padding: 16px; gap: 14px; margin-bottom: 26px; }
  .study-dashboard-compact .study-stats { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .study-dashboard-compact .study-stat { min-width: 0; padding: 7px 4px; }
  .study-dashboard-compact .study-stat:first-child { border-left: 0; }
  .study-dashboard-compact .study-stat strong { font-size: 1.1rem; }
  .study-dashboard-compact .study-stat span { font-size: .7rem; }
  .library-head { flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  .library-head h2 { font-size: 1.17rem; }
  .library-filters { margin: 8px 0 10px; }
  .cp-grid { grid-template-columns: minmax(0,1fr); gap: 9px; }
  .cp-grid .cp-card { min-height: 96px; padding: 16px; border-radius: 12px; gap: 4px 10px; }
  .cp-grid .cp-card h3 { font-size: .93rem; }
  .cp-grid .cp-card p { font-size: .77rem; }
  .cp-card .cp-ico { width: 38px; height: 38px; border-radius: 10px; padding: 5px; }
  .cp-card .cp-ico .mono-ico { width: 17px; height: 17px; }
  .cp-card .cp-ico .color-ico { width: 26px; height: 26px; }
  .group-title { font-size: .82rem; }
  .cp-hero h1 { font-size: 1.8rem; }
  .cp-hero .tag { font-size: .9rem; }
  .case-rail { padding: 16px; }
  .case-steps li { font-size: .83rem; }
  .case-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .case-action { width: 100%; font-size: .75rem; }
  .presentation-toc { gap: 2px; margin-bottom: 18px; padding-bottom: 12px; }
  .section-jump { font-size: .75rem; padding: 7px 9px; }
  .sec-head { padding: 16px; font-size: .95rem; min-height: 60px; }
  .sec-body { padding: 0 16px 18px; }
  .cluster p, .wu-col li, .disp-col li, .plain-list li, .dx-key, .rf-item { font-size: .84rem; }
  .dx-grid, .cluster-grid, .wu-grid, .disp-grid { grid-template-columns: minmax(0,1fr); }
  .dx-card h3, .dx-card h4 { display: flex; flex-wrap: wrap; gap: 4px 8px; }
  .learning-loop, .personal-plan { padding: 18px; }
  .study-tabs { gap: 4px; margin-bottom: 22px; }
  .study-tabs button { padding-inline: 10px; font-size: .77rem; }
  .study-page-head h1, .case-practice-head h1 { font-size: 1.5rem; }
  .shift-sheet { padding: 18px; }
  .shift-grid { gap: 14px; }
  .shift-grid section { padding: 16px; }
  .foot { padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .cp-grid .cp-card { transition: none; } }
@media print {
  .primary-nav, .presentation-toc, .breadcrumbs, .home-actions, .library-filters, .ecg-pattern-index { display: none !important; }
  .main .stage { padding: 0; max-width: none; }
  .cp-hero, .section-card, .study-page, .case-practice, .shift-sheet, .shift-grid section { background: #fff !important; color: #111 !important; box-shadow: none !important; }
  .cp-hero h1, .cp-hero .tag { color: #111 !important; }
}

/* Preserve legibility of ECG lettering rather than shrinking a full paper to phone width. */
.ecg-fig .ecg-media { overflow-x: auto; }
.ecg-fig .ecg-svg-wrap { min-width: 560px; }
.ecg-media:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ecg-workbench-paper:has(.ecg-case-12lead) .ecg-workbench-canvas { min-width: 640px; }
.ecg-comparison { padding: 12px; border: 1px solid var(--line); border-radius: 10px; margin-block: 12px; }
.ecg-comparison h4 { margin: 0 0 10px; }
.ecg-comparison dt { font-weight: 700; margin-top: 10px; }
.ecg-comparison dd { margin: 4px 0 0; line-height: 1.6; }
.evidence-note { line-height: 1.6; font-size: .85rem; }
@media print {
  .ecg-fig .ecg-svg-wrap { min-width: 0 !important; }
  .ecg-fig .ecg-media { overflow: visible; }
}

.ecg-paper-help { margin: 0; padding: 8px 16px; font-size: .75rem; color: var(--ink-soft); }

/* ECG paper remains pink in both themes; its grid lives with the signal in SVG. */
.ecg-media, .ecg-lightbox-media, .ecg-workbench-paper { background: #fff1f2; }
.ecg-svg.ecg-paper { background-color: #fff1f2; }
.ecg-decorative-paper { pointer-events: none; }
.primary-nav #explorerBtn { display: flex; width: auto; min-width: 0; grid-column: auto; grid-row: auto; }
.primary-nav #explorerBtn .header-label { display: inline; }
.ecg-explorer { --ex-border: var(--line); padding-bottom: 24px; }
.explorer-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 24px; }
.explorer-heading h1 { margin: 3px 0 8px; font-size: clamp(1.8rem,3vw,2.6rem); letter-spacing: -.04em; color: var(--ink); }
.explorer-heading p:not(.explorer-kicker) { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.explorer-kicker { margin: 0 0 6px; font-size: .67rem; letter-spacing: .14em; font-weight: 750; color: var(--brand-2); }
.ex-button { border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); padding: 10px 14px; min-height: 44px; font: inherit; font-size: .8rem; cursor: pointer; }
.ex-button:hover { border-color: var(--brand-2); }
.ex-primary, .ex-button[aria-pressed="true"] { background: var(--brand); color: var(--on-fill); border-color: var(--brand); }
.explorer-heading > .ex-button { flex-shrink: 0; background: var(--brand); color: var(--on-fill); }
.explorer-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; }
.explorer-controls label { display: grid; gap: 6px; font-size: .75rem; color: var(--ink-soft); min-width: 0; }
.explorer-controls label:first-child { flex: 1; min-width: 220px; }
.explorer-controls select { min-height: 44px; font: inherit; font-size: .85rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; min-width: 0; width: 100%; }
.explorer-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 16px; align-items: start; }
.explorer-sheet { min-width: 0; border: 1px solid #e9bbc1; border-radius: 12px; overflow: hidden; background: #fff1f2; }
.explorer-paper-hint { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px 14px; font-size: .72rem; color: #713d47; border-bottom: 1px solid #e9bbc1; }
.explorer-paper-hint span { color: #805660; }
.explorer-paper { overflow: auto; max-height: 70vh; background: #fff1f2; }
.explorer-canvas { min-width: 720px; }
.explorer-canvas .ecg-svg { width: 100%; height: auto; max-height: none !important; display: block; }
.explorer-caption { margin: 0; padding: 10px 14px; color: #805660; font-size: .7rem; line-height: 1.5; }
.explorer-findings { padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.handover-fallback { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px; background: var(--card); }
.handover-fallback label { display: block; margin-bottom: 8px; font-size: .82rem; font-weight: 650; color: var(--ink); }
.handover-fallback textarea { width: 100%; min-height: 120px; font: inherit; font-size: .8rem; line-height: 1.55; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; }
.findings-header { display: flex; align-items: center; gap: 12px; min-width: 0; }
.findings-header > div { min-width: 0; }
.findings-header .explorer-kicker { margin-bottom: 4px; }
.findings-header h2 { margin: 0; }
.explorer-findings h2 { margin: 6px 0 12px; color: var(--ink); font-size: 1.2rem; line-height: 1.4; }
.explorer-findings > p:not(.explorer-kicker) { color: var(--ink-soft); font-size: .85rem; line-height: 1.65; }
.explorer-findings h3 { font-size: .8rem; margin: 24px 0 12px; }
.explorer-findings h3 span { font-size: .72rem; color: var(--ink-soft); margin-left: 6px; }
.explorer-finding-list { display: grid; gap: 6px; max-height: 265px; overflow: auto; padding: 2px; }
.explorer-finding-list button { display: flex; align-items: baseline; gap: 9px; min-height: 44px; padding: 9px; border: 1px solid transparent; background: transparent; color: var(--ink); border-radius: 8px; text-align: left; font: inherit; font-size: .79rem; cursor: pointer; line-height: 1.45; }
.explorer-finding-list button > span { color: var(--ink-soft); font-size: .65rem; }
.explorer-finding-list button[aria-pressed="true"] { background: var(--ov-job-bg); border-color: var(--brand-2); }
.explorer-explanation { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .83rem; line-height: 1.65; }
.explorer-explanation p { color: var(--ink-soft); margin: 8px 0 12px; }
.explorer-guide-link { display: inline-block; margin-top: 18px; font-size: .78rem; }
.explorer-answer { display: grid; gap: 8px; font-size: .8rem; margin: 16px 0; }
.explorer-answer textarea { width: 100%; resize: vertical; min-height: 90px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; color: var(--ink); background: var(--card); }
.ecg-explorer :focus-visible, .explorer-dialog :focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; }
.explorer-dialog { width: calc(100vw - 32px); max-width: 1600px; max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink); overflow: auto; }
.explorer-dialog::backdrop { background: rgba(15,30,27,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.explorer-dialog .explorer-heading { position: sticky; top: -24px; background: var(--bg); padding-block: 12px; z-index: 2; }
.explorer-dialog .explorer-paper { max-height: 70dvh; }
@media (max-width: 1100px) { .explorer-layout { grid-template-columns: minmax(0,1fr); } .explorer-findings { order: 0; } .explorer-finding-list { display: flex; flex-wrap: wrap; max-height: 150px; } .explorer-findings h3 { margin-top: 12px; } }
@media (max-width: 700px) {
  .topbar > .primary-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .primary-nav #explorerBtn { width: 100%; justify-content: center; padding-inline: 3px; font-size: .75rem; }
  .primary-nav .ui-icon { display: block; width: 18px; height: 18px; }
  .explorer-heading { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .explorer-controls { padding: 12px; gap: 8px; }
  .explorer-controls label:first-child { flex-basis: 100%; min-width: 0; }
  .explorer-findings { padding: 16px; }
  .explorer-dialog { width: calc(100vw - 8px); max-height: calc(100dvh - 8px); padding: 12px; border-radius: 12px; }
  .explorer-dialog .explorer-heading { top: -12px; }
  .explorer-dialog .explorer-heading h1 { font-size: 1.3rem; }
  .explorer-dialog .explorer-heading > div > p { display: none; }
  .explorer-dialog .explorer-heading { flex-direction: row; align-items: center; }
}
@media print { .explorer-controls, .explorer-heading > button, .explorer-finding-list, .explorer-explanation button { display: none; } .explorer-layout { display: block; } .explorer-canvas { min-width: 0; width: 100% !important; } .explorer-paper { max-height: none; overflow: visible; } .explorer-dialog { display: none; } .ecg-media { background: #fff1f2 !important; } }

.explorer-explanation { border-top: 0; border-left: 3px solid #dc2626; border-radius: 0 8px 8px 0; padding: 12px; background: var(--ov-job-bg); }

.explorer-clinical-stem { padding: 16px; border-left: 4px solid var(--accent, #187469); background: var(--card); border-radius: 8px; }
.explorer-source { font-size: .78rem; line-height: 1.5; margin-top: 16px; }

/* Student reading and practice. A single hierarchy across learning tools. */
[hidden] { display: none !important; }
.student-intro { padding: 20px; margin: 16px 0 24px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.student-start { padding: 20px; margin: 16px 0 24px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow-sm); }
.student-start h2 { font-size: 1.25rem; margin: 6px 0 10px; }
.student-actions, .confidence-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.student-actions a, .confidence button, .study-actions button, #saveNote { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; font: inherit; font-size: .9rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.student-actions a:hover { border-color: var(--accent); }
.student-actions a:first-child { border-color: var(--brand-2); font-weight: 600; }
.confidence button[aria-pressed="true"] { background: var(--ov-job-bg); border-color: var(--brand-2); }
.confidence-status, .explorer-source { color: var(--ink-soft); font-size: .85rem; }
.student-glossary { margin-top: 12px; }
.student-glossary summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.student-glossary dl { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
.student-glossary dt { font-weight: 700; }.student-glossary dd { margin: 4px 0 0; }
.case-practice > label { display: grid; gap: 8px; margin: 12px 0; }.case-practice select { max-width: 100%; min-height: 44px; padding: 10px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.quiz-feedback:not(:empty) { padding: 16px; margin-top: 12px; background: var(--ov-job-bg); border-radius: 8px; line-height: 1.65; }.quiz-feedback summary { cursor: pointer; padding: 10px 0; }.quiz-feedback p { margin: 8px 0; }
.case-complete { margin: 20px 0; padding: 20px; border: 1px solid var(--brand-2); border-radius: 12px; }
/* A bare word with the disclosure marker removed reads as a stray label rather
   than a control, and 40px was below the 44px tap guidance. Give it a real
   button affordance: icon, label, chevron and a full-height target. */
.context-filters { position: relative; }
.context-filters > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 600;
    list-style: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.context-filters > summary::-webkit-details-marker { display: none; }
.context-filters > summary:hover { background: var(--home-hover); border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
.context-filters .cf-ico { width: 17px; height: 17px; flex: none; }
.context-filters .cf-caret { width: 15px; height: 15px; flex: none; opacity: .6; transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); }
.context-filters[open] > summary { background: rgba(var(--accent-rgb), 0.13); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--brand-2); }
.context-filters[open] > summary .cf-caret { transform: rotate(180deg); }
.context-filters .chips {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 40;
    padding: 12px;
    width: 260px;
    /* The phone guard below clamps every .chips to 100% of its containing block.
       This panel is absolutely positioned and intentionally wider than its own
       trigger, so it needs its own ceiling or the severity choices collapse into
       an unusable sliver. */
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 24px #0002;
}
.theme-details { padding: 12px; }.theme-details summary { cursor: pointer; }.theme-details .accent-tools { padding-top: 16px; }
.dx-card .sev-dot { display: none; }.dx-card { border-left-width: 1px; }.dx-card h3, .dx-card h4 { color: var(--ink); }.dx-card .sev-tag { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); font-size: .7rem; }
.dx-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.dx-key, .cluster p, .ov-prose { font-size: .96rem; line-height: 1.7; }.ov-prose { max-width: 75ch; }
.explorer-canvas { min-width: 0; }.explorer-detail { margin: 0 0 14px; }.explorer-detail > p { font-size: .78rem; margin: 0 0 8px; }.explorer-detail svg { display: block; width: 100%; height: 180px; max-height: 180px !important; background: #fff1f2; border: 1px solid #d98a92; border-radius: 6px; }
.explorer-explanation { scroll-margin-top: 130px; }.explorer-finding-list { max-height: none; overflow: visible; }.explorer-confidence { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.disclaimer-modal { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); overflow: hidden; }.disclaimer-header, .disclaimer-footer { flex-shrink: 0; }.disclaimer-body { overflow-y: auto; min-height: 0; }.disclaimer-footer { background: var(--card); border-top: 1px solid var(--line); padding: 14px 20px; }
@media(max-width:1100px){.explorer-finding-list { display: grid; max-height: none; }.explorer-detail svg { height: 170px; }.explorer-layout { gap: 14px; }}
@media(max-width:700px){
 .primary-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }.primary-nav .header-label { font-size: .69rem; white-space: normal; line-height: 1.2; }.primary-nav button { min-height: 44px; padding: 6px 3px; }
 .context-filters { grid-row: 1; grid-column: 3; }.context-filters summary { padding: 10px 4px; font-size: .7rem; }.context-filters .chips { right: -36px; }
 .student-intro, .student-start { padding: 16px; }.student-actions a { flex: 1 1 100%; }.dx-grid { grid-template-columns: 1fr; }
 .explorer-heading { margin-bottom: 10px; gap: 8px; }.explorer-heading h1 { font-size: 1.45rem; }.explorer-heading .explorer-kicker, .explorer-heading > div > p:last-child { display: none; }.explorer-heading .ex-button { min-height: 38px; padding: 8px 12px; }.explorer-controls { padding: 10px; margin-bottom: 10px; gap: 6px; }.explorer-controls .ex-button, .explorer-controls select { min-height: 40px; font-size: .8rem; padding: 8px; }.explorer-controls label:first-child { flex-basis: 100%; }.explorer-paper-hint { padding: 8px 10px; }.explorer-paper-hint span { display: none; }.explorer-caption { font-size: .76rem; line-height: 1.5; }
 .disclaimer-header { padding: 14px 18px; }.disclaimer-header h2 { font-size: 1.1rem; }.disclaimer-badge { display: none; }.disclaimer-body { padding: 12px 18px; }.disclaimer-footer { padding: 12px 18px; }
}
.context-filters { grid-column: auto; grid-row: auto; }.student-intro .context-filters .chips { left: 0; right: auto; }.student-safety { padding: 12px 16px; border-left: 3px solid var(--brand-2); background: var(--card); line-height: 1.6; }.reference-firstpass { margin-bottom: 20px; }.reference-firstpass > summary { padding: 12px 0; cursor: pointer; font-weight: 600; }
@media(max-width:700px){.home-intro { padding-top: 10px; padding-bottom: 10px; }.home-intro h1 { font-size: 1.7rem; }.student-start { margin-top: 10px; }.context-filters summary { font-size: .85rem; }}
.explorer-options { position: relative; min-width: 120px; }.explorer-options summary { cursor: pointer; padding: 12px; font-size: .85rem; }.explorer-options[open] { padding: 8px; border: 1px solid var(--line); border-radius: 8px; }.explorer-options label { margin: 6px 0; }.weak-areas summary { padding: 12px 0; cursor: pointer; font-weight: 600; }.weak-areas li { margin: 10px 0; }
@media(max-width:700px){.explorer-heading { flex-direction: row; align-items: center; }.explorer-controls { align-items: center; }.explorer-options { min-width: 0; }.explorer-options summary { padding: 10px 6px; }.explorer-heading .ex-button { font-size: .76rem; }.explorer-controls label:first-child { flex-basis: 100%; }.explorer-options label:first-child { min-width: 130px; }}
html[data-theme="light"][data-accent] { --side-sub: #647181; --side-note: #647181; }
.ecg-workbench-tools button[aria-pressed="true"] { background: var(--brand-2); color: var(--on-fill); }

/* Theme-safe states and intrinsic sizing on narrow screens. */
.quiz-question { min-inline-size: 0; }
.quiz-options, .quiz-option { min-width: 0; overflow-wrap: anywhere; }
.ecg-filters .chip.active { background: var(--brand-2); color: var(--on-fill); }
.dx-card:is(.sev-critical,.sev-emergent,.sev-common) h3, .dx-card:is(.sev-critical,.sev-emergent,.sev-common) h4 { color: var(--ink); }
.dx-card:is(.sev-critical,.sev-emergent,.sev-common) .sev-tag { background: transparent; color: var(--ink-soft); }
.group-title span { color: var(--ink); }
html[data-theme="light"] .ecg-pattern.sev-emergent h4 { color: #9a3412; }
html[data-theme="light"] .ecg-pattern.sev-critical h4 { color: #b91c1c; }
html[data-theme="light"] .disp-col.d-discharge h3, .disp-col.d-discharge h4,
html[data-theme="light"] .quiz-option.correct { color: #166534; }
html[data-theme="light"] .quiz-option.incorrect { color: #b91c1c; }
.case-practice > label { grid-template-columns: minmax(0,1fr); min-width: 0; }
.case-practice select { width: 100%; min-width: 0; }

.study-tabs button span { color: var(--ink); }
html[data-theme="light"] .disp-col.d-admit h3, .disp-col.d-admit h4 { color: #9a3412; }
html[data-theme="light"] .disp-col.d-icu h3, .disp-col.d-icu h4 { color: #b91c1c; }

/* Keep all five navigation icons and labels visible on phones. */
@media (max-width: 700px) {
  .topbar { grid-template-rows: minmax(44px,auto) minmax(64px,auto); row-gap: 12px; align-items: stretch; }
  .topbar > .primary-nav > :is(#homeBtn,#studyBtn,#shiftBtn,#ecgBtn,#explorerBtn) {
    padding: 4px 2px;
    font-size: min(.69rem,12px);
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: auto;
    min-height: 64px;
    min-width: 0;
  }
  .topbar > .primary-nav > :is(#homeBtn,#studyBtn,#shiftBtn,#ecgBtn,#explorerBtn) .header-label {
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4em;
    line-height: 1.2;
    text-align: center;
  }
}

@media (min-width: 701px) and (max-width: 920px) {
  .topbar { grid-template-rows: minmax(44px,auto) minmax(44px,auto); row-gap: 12px; }
}

/* Use two rows before the desktop search and navigation become crowded. */
@media (min-width: 921px) and (max-width: 1160px) {
  .topbar { grid-template-columns: minmax(0,1fr) 44px; grid-template-rows: auto auto; row-gap: 12px; }
  .topbar > .searchwrap { grid-column: 1; grid-row: 1; max-width: none; }
  .topbar > .tools-toggle { grid-column: 2; grid-row: 1; }
  .topbar > .primary-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
  .topbar > .primary-nav > :is(#homeBtn,#studyBtn,#shiftBtn,#ecgBtn,#explorerBtn) { width: auto; padding: 8px; min-height: 44px; height: auto; }
  .topbar > .primary-nav > :is(#homeBtn,#studyBtn,#shiftBtn,#ecgBtn,#explorerBtn) .header-label { display: inline; }
}
.ecg-fig { border-color: var(--line); box-shadow: 0 3px 16px rgba(20,60,50,.04); }
.ecg-fig .ecg-toolbar { padding: 10px 12px; }
.ecg-fig .ecg-inspector { line-height: 1.65; }
.explorer-heading { margin-bottom: 16px; }
.explorer-heading h1 { letter-spacing: -.035em; }
.explorer-heading > div > p:last-child { max-width: 55ch; }
.explorer-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 14px; background: var(--ov-job-bg); border: 1px solid var(--line); border-radius: 14px; }
.explorer-progress > div { flex: 1; min-width: 160px; display: grid; gap: 6px; }
.explorer-progress strong { font-size: .86rem; }
.explorer-progress small { color: var(--ink-soft); font-size: .73rem; }
.explorer-progress progress { width: min(100%,320px); height: 6px; accent-color: var(--brand); }
.explorer-controls { border: 0; padding: 12px 0; background: transparent; gap: 10px; }
.explorer-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 20px; }
.explorer-findings { max-height: calc(100dvh - 110px); overflow: auto; position: sticky; top: 95px; padding: 18px; }
.explorer-findings h2 { font-size: 1.12rem; }
.explorer-explanation { background: var(--ov-job-bg); margin: 16px 0; }
.explorer-detail svg { height: 195px; max-height: 195px !important; }
.explorer-finding-list button { transition: background .16s ease, border-color .16s ease; }
.explorer-finding-list button:hover { background: var(--ov-job-bg); }
.explorer-learning-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); }
.explorer-learning-actions .ex-button { flex: 1 1 140px; font-size: .77rem; }
.explorer-learning-actions [aria-pressed="true"] { color: var(--on-fill); background: var(--brand); }
.explorer-layout.has-comparison { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 300px; }
.explorer-comparison { min-width: 0; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.explorer-comparison h3 { margin: 0 0 8px; font-size: 1rem; }
.explorer-comparison p { font-size: .78rem; line-height: 1.6; color: var(--ink-soft); }
.explorer-reference-paper { overflow: auto; background: #fff1f2; border: 1px solid #e9bbc1; border-radius: 6px; }
.explorer-reference-canvas svg { display: block; width: 100%; height: auto; max-height: none !important; }
.explorer-cursor { stroke: #176c9c; stroke-width: 2; vector-effect: non-scaling-stroke; fill: none; pointer-events: none; }
.explorer-location-feedback { min-height: 2em; font-weight: 600; }
.explorer-practice-feedback { padding: 12px; border-radius: 8px; background: var(--ov-job-bg); font-size: .8rem; }
.explorer-explanation, .ecg-inline-marks { animation: ecg-selection-in .18s ease-out; }
@keyframes ecg-selection-in { from { opacity: .4; } to { opacity: 1; } }
@media(max-width:1400px){.explorer-layout.has-comparison { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }.has-comparison .explorer-findings { grid-column: 1 / -1; position: static; max-height: none; }}
@media(max-width:1100px){.explorer-layout { grid-template-columns: minmax(0,1fr); }.explorer-findings { position: static; max-height: none; }.explorer-explanation { scroll-margin-top: 90px; }}
@media(max-width:700px){.explorer-layout.has-comparison { grid-template-columns: minmax(0,1fr); }.explorer-progress { padding: 12px; gap: 8px; }.explorer-progress .ex-button { flex: 1; font-size: .78rem; }.explorer-progress > div { flex-basis: 100%; }.explorer-controls { padding-block: 8px; }.explorer-detail svg { height: 175px; }.explorer-comparison { padding: 10px; }.ecg-hero { padding-block: 18px; }}
@media(prefers-reduced-motion:reduce){.explorer-explanation,.ecg-inline-marks { animation: none; }.explorer-finding-list button { transition: none; }}
@media print {.explorer-progress,.explorer-learning-actions,.explorer-cursor { display: none; }.explorer-findings { position: static; max-height: none; overflow: visible; }}
/* Keep the overview above the fold; comparison papers share equal column widths. */
.explorer-heading h1 { font-size: 1.8rem; margin-block: 4px; }
.explorer-heading .explorer-kicker { margin-bottom: 4px; }
.explorer-heading > div > p:last-child { margin-block: 6px; font-size: .86rem; }
.explorer-progress { padding: 10px 14px; margin-bottom: 8px; }
.explorer-progress > div { grid-template-columns: auto minmax(70px,150px); align-items: center; gap: 5px 12px; }
.explorer-progress small { grid-column: 1 / -1; }
.explorer-comparison { padding: 0; overflow: hidden; }
.explorer-comparison h3,.explorer-comparison > p { padding-inline: 14px; }
.explorer-comparison h3 { padding-top: 12px; }
.explorer-reference-paper { border-inline: 0; border-radius: 0; }
@media(max-width:700px){.explorer-heading h1 { font-size: 1.4rem; }.explorer-progress > div { grid-template-columns: auto minmax(60px,1fr); }.explorer-progress strong { font-size: .78rem; }}
.main .stage:has(> .ecg-explorer) { max-width: 1600px; padding: 20px 24px 36px; }
.explorer-heading { margin-block: 0 12px; }
.explorer-heading .explorer-kicker { display: none; }
.explorer-heading h1 { font-size: 1.6rem; }
.explorer-progress > div { grid-template-columns: max-content minmax(70px,150px); justify-content: start; }
.explorer-controls { margin-bottom: 12px; }
@media(max-width:700px){.main .stage:has(> .ecg-explorer) { padding: 14px 10px 24px; }.explorer-progress > div { grid-template-columns: auto minmax(50px,1fr); justify-content: stretch; }}
@media(min-width:1101px){.explorer-findings .explorer-explanation { position: sticky; top: 0; z-index: 1; background: var(--card); box-shadow: 0 5px 12px rgba(20,60,50,.05); }.has-comparison .explorer-findings .explorer-explanation { position: static; }}
.explorer-sheet > .explorer-explanation { margin: 0; padding: 14px; background: var(--card); border-left: 3px solid var(--brand); border-radius: 0; }
.explorer-sheet { scroll-margin-top: 90px; }
.has-comparison .explorer-paper-hint { min-height: 44px; align-items: center; }

/* ── Fixed headers: brand + footer pinned, presentation list scrolls ──
   Rollback: delete this block to restore whole-sidebar scrolling. */
.sidebar { overflow: hidden; }
.sidebar > .brand { flex: none; }
.sidebar > .side-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--side-scroll) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 8px;
}
.side-list::-webkit-scrollbar { width: 4px; }
.side-list::-webkit-scrollbar-thumb { background: var(--side-scroll); border-radius: var(--radius-full); }
.sidebar > .side-footer { flex: none; }
/* ── Sidebar content: counts + feedback link ── */
.side-count {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--side-muted);
    white-space: nowrap;
}
.side-item .side-count { margin-left: auto; }
.side-group .side-count { margin-left: 6px; vertical-align: 1px; }
a.side-btn { text-decoration: none; }
.foot a { color: var(--brand-2); }
/* Topbar stays pinned on scroll (reinforces base sticky rule across overrides). */
.topbar { position: -webkit-sticky; position: sticky; top: 0; }

/* ── Collapsible sidebar: toggle from topbar (desktop) or side-head (drawer) ──
   State lives on <html class="sidebar-collapsed">, persisted in em-cps-prefs.
   Rollback: delete from here to the end of this block. */
.side-head { display: flex; align-items: center; gap: 8px; }
.side-head .brand { flex: 1 1 auto; min-width: 0; padding-bottom: 18px; }
.collapse-btn {
    flex: none;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
    color: var(--side-muted);
    cursor: pointer;
}
.collapse-btn:hover { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
.collapse-btn .ui-icon { width: 19px; height: 19px; display: block; }
@media (min-width: 921px) {
  .sidebar { transition: transform var(--transition-smooth) var(--ease-out), visibility 0s; }
  html.sidebar-collapsed .sidebar { -webkit-transform: translateX(-105%); transform: translateX(-105%); box-shadow: none; visibility: hidden; transition: transform var(--transition-smooth) var(--ease-out), visibility 0s .3s; }
  html.sidebar-collapsed .main { margin-left: 0; }
}
.has-comparison .explorer-paper-hint span { display: none; }

/* ECG learning flow: optional guidance, one page scroll, and controls near the tracing. */
.explorer-path { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 16px; }
.explorer-path summary, .explorer-checklist summary { cursor: pointer; font-size: .88rem; font-weight: 650; min-height: 28px; }
.explorer-path summary span { display: inline-block; margin-left: 8px; color: var(--ink-soft); font-size: .76rem; font-weight: 400; }
.explorer-path > p, .explorer-path li p, .explorer-path-current, .explorer-practice-status, .explorer-checklist > p, .explorer-hint p { font-size: .82rem; line-height: 1.6; color: var(--ink-soft); }
.explorer-path ol { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; padding: 0; list-style-position: inside; }
.explorer-path li { padding: 14px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.explorer-path li strong { font-size: .88rem; }.explorer-path li p { margin-block: 8px; }
.explorer-path li small { display: block; font-size: .73rem; line-height: 1.5; color: var(--ink-soft); }
.explorer-path li .ex-button { margin-top: 12px; width: 100%; }
.explorer-path-current { border-left: 3px solid var(--brand); padding: 10px 14px; background: var(--card); border-radius: 8px; }
.explorer-path-current .ex-button { margin: 8px 0 0 10px; }
.explorer-controls { scroll-margin-top: 150px; }
.explorer-findings { position: static; max-height: none; overflow: visible; }
.explorer-findings .explorer-explanation { position: static; box-shadow: none; }
.explorer-finding-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.explorer-finding-nav .ex-button { font-size: .78rem; padding-inline: 9px; }.explorer-finding-nav span { white-space: nowrap; color: var(--ink-soft); font-size: .75rem; }
.explorer-checklist { border: 1px solid var(--line); padding: 12px; border-radius: 10px; margin-block: 14px; }
.explorer-checklist label { display: grid; gap: 6px; font-size: .8rem; margin-block: 12px; }
.explorer-checklist textarea { box-sizing: border-box; width: 100%; min-width: 0; resize: vertical; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; line-height: 1.5; }
.explorer-hint { margin-block: 14px; }.explorer-hint p { padding: 10px; background: var(--ov-job-bg); border-radius: 8px; }
.explorer-whole { min-height: 44px; font-size: .78rem; padding: 8px 12px; }
.explorer-canvas .ecg-finding-marks [data-region] { pointer-events: all; cursor: pointer; }
.explorer-canvas .ecg-finding-marks [data-region]:focus-visible { outline: none; stroke: var(--brand); stroke-width: 4; fill: rgba(20,100,80,.12); }
@media(max-width:700px){.explorer-path { padding: 12px; }.explorer-path summary span { display: block; margin: 6px 0 0; }.explorer-path ol { grid-template-columns: minmax(0,1fr); }.explorer-path-current .ex-button { display: block; margin-left: 0; }.explorer-findings { padding: 14px; }}
@media print{.explorer-path,.explorer-path-current,.explorer-finding-nav,.explorer-hint,.explorer-whole { display: none; }}
.explorer-canvas .ecg-finding-marks [aria-pressed="true"] { stroke-width: 4; fill: rgba(220,38,38,.09); }
.explorer-finding-chooser { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.explorer-finding-chooser summary { cursor: pointer; min-height: 28px; font-size: .82rem; font-weight: 600; }
.explorer-finding-chooser .explorer-finding-list { margin-top: 8px; }
.explorer-path summary, .explorer-checklist summary, .explorer-finding-chooser summary { box-sizing: border-box; min-height: 44px; padding-block: 8px; }

/* Optional learning depth: compact disclosure, no hidden clinical sections. */
.guided-reasoning{margin-top:16px;border:1px solid var(--line,#ccd3dc);border-radius:12px;background:var(--card,#fff);color:var(--ink,#172536)}
.guided-reasoning>summary{padding:14px 16px;cursor:pointer;font-weight:700;min-height:44px}
.guided-inner{padding:0 16px 16px}
.guided-levels{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.guided-levels button{font:inherit;min-height:44px;padding:8px 16px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;cursor:pointer}
.guided-levels button[aria-pressed="true"]{background:var(--ink,#172536);color:var(--card,#fff)}
.guided-prompts{padding-left:24px;margin:12px 0}
.guided-prompts li{padding:8px 0 12px}
.guided-prompts li p{margin:0 0 6px}
.guided-prompts a{display:inline-block;padding:8px 0;text-underline-offset:3px}
.guided-footnote,.guided-save{font-size:.85rem;line-height:1.5}
.guided-save:empty{display:none}
.guided-reasoning :focus-visible{outline:3px solid var(--accent,#2563eb);outline-offset:3px}

/* Learning workspace: shared layouts for cases, visual interpretation and team preparation. */
.workspace-entry,.workspace-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin:24px 0}
.workspace-entry>a,.workspace-card{display:flex;flex-direction:column;justify-content:space-between;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);min-width:0;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.workspace-entry>a{text-decoration:none}
.workspace-entry>a:hover,.workspace-card[href]:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.workspace-entry span{display:block;color:var(--ink-soft);font-size:.85rem;margin-bottom:10px}
.workspace-entry strong{display:block;font-size:1.15rem;line-height:1.35}
.workspace-entry p{margin-top:10px;color:var(--ink-soft);line-height:1.55}
.workspace-entry b{display:inline-flex;align-items:center;gap:4px;margin-top:14px;color:var(--accent);font-size:.9rem;font-weight:600}
.learning-workspace{max-width:1120px;margin:0 auto;color:var(--ink)}
.learning-workspace h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.2;margin:12px 0}
.workspace-lead{color:var(--ink-soft);line-height:1.6;max-width:70ch}
.workspace-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0;border-bottom:1px solid var(--line);padding-bottom:12px}
.workspace-tabs a,.workspace-actions a,.workspace-actions button,.learning-workspace button,.backup-label{font:inherit;display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:var(--card);text-decoration:none;cursor:pointer}
.workspace-tabs a[aria-current="page"],.learning-workspace .workspace-primary{background:var(--ink);color:var(--card);border-color:var(--ink)}
.workspace-body h2{font-size:1.35rem;line-height:1.4;margin:0 0 12px}
.workspace-body h3{font-size:1.05rem;line-height:1.4;margin:10px 0}
.workspace-body p{line-height:1.65;margin:10px 0}
.workspace-body ul,.workspace-body ol{padding-left:24px}
.workspace-body li{line-height:1.6;margin:10px 0}
.workspace-card[href]{text-decoration:none}
.workspace-card>span:last-child{display:block;margin-top:16px;text-decoration:underline;text-underline-offset:4px}
.workspace-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0}
.workspace-callout,.case-update,.workspace-feedback,.workspace-result{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--card);margin:20px 0}
.workspace-feedback{border-inline-start:4px solid var(--accent)}
.workspace-step,.workspace-media-label{font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.learning-workspace .quiz-options{display:grid;gap:10px;margin:16px 0}
.learning-workspace .quiz-option{text-align:left;line-height:1.5;white-space:normal;width:100%}
.learning-workspace .quiz-option:disabled{opacity:1;cursor:default}
.learning-workspace summary,.reassessment-guide summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:650}
.workspace-source{margin-top:24px;border-top:1px solid var(--line);padding-top:8px;font-size:.88rem;overflow-wrap:anywhere}
.workspace-source p{color:var(--ink-soft)}
.workspace-source a,.workspace-body a:not(.workspace-card):not(.workspace-tabs a){text-underline-offset:4px}
.workspace-card svg{display:block;width:100%;height:auto;margin:16px 0}
.workspace-card figcaption{font-size:.92rem;line-height:1.5}
.workspace-ecg svg{background:#fff4f5}
.gas-values>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.gas-values dd{font-weight:700}
.learning-workspace select{font:inherit;display:block;max-width:100%;width:100%;padding:12px;margin:12px 0;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px}
.workspace-progress-list{list-style:none;padding:0!important}
.workspace-progress-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}
.workspace-progress-list span{font-size:.85rem;color:var(--ink-soft)}
.backup-label{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:100%}
.backup-label input{max-width:100%;width:100%;font:inherit}
.reassessment-guide{margin-top:18px;border-top:1px solid var(--line);padding-top:8px}
.reassessment-guide ol{padding-left:24px}
.reassessment-guide li{margin:12px 0;line-height:1.6}
.reassessment-guide a{display:inline-block;margin:8px 18px 8px 0;min-height:44px;padding:10px 0}
.learning-workspace :focus-visible,.workspace-entry a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.workspace-card,.workspace-entry>a,.workspace-callout,.workspace-result,.workspace-feedback,.case-update{padding:16px}.workspace-tabs a{flex:1 1 42%;justify-content:center;font-size:.9rem}.learning-workspace .quiz-question{padding:0}.workspace-grid{gap:12px}.study-workspace-links a{flex:1 1 45%}}
@media print{.workspace-tabs,.workspace-actions,.workspace-entry{display:none}.workspace-card,.workspace-callout{break-inside:avoid}.workspace-card svg{max-height:350px}}

/* Compact learning detail pages and accessible recorded-waveform controls. */
.workspace-detail>h1{font-size:1.15rem;margin:8px 0}
.workspace-detail>.workspace-lead,.workspace-detail>.study-kicker{display:none}
.workspace-detail>.workspace-tabs{margin:14px 0 20px}
.workspace-session-note{font-size:.85rem;color:var(--ink-soft)}
.workspace-readiness{border:1px solid var(--line);border-radius:12px;padding:16px;margin:24px 0;min-width:0}
.workspace-readiness legend{font-weight:700;padding:0 8px}
.workspace-readiness label{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;line-height:1.5}
.workspace-readiness input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.recording-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0}
.recording-controls label{font-weight:600}
.recording-scroll{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fffafa}
.recording-scroll svg{display:block;width:100%;min-width:500px;height:auto}
.guided-examples{margin:16px 0;border-top:1px solid var(--line)}
.guided-examples summary{min-height:44px;padding-block:12px;cursor:pointer}
@media(max-width:600px){.learning-workspace>.study-kicker{display:none}.learning-workspace h1{font-size:1.6rem}.workspace-detail h1{font-size:1rem}.workspace-tabs{margin:16px 0}.recording-controls{grid-template-columns:1fr 1fr}.recording-controls label:first-child{grid-column:1/-1}}
/* Count badges retain the new shape with stronger text contrast. */
.cp-grid .cp-card .cp-count{color:var(--ink)}
.learning-workspace #caseFilter{max-width:420px}
.learning-workspace h1:focus,.learning-workspace h2:focus,.workspace-feedback h3:focus{outline:none}
@media(max-width:360px){.topbar>.primary-nav{grid-template-columns:1fr 1fr 1.3fr 1fr 1.2fr}}

/* ══════════════════════════════════════════════════════════════════
   Clinical priority hierarchy
   Every section card used to render at one identical weight, so a
   clinician under time pressure had to read each heading to find the
   actionable ones. Each card already carries a stable `data-section`
   key, so priority is expressed here in CSS alone — no markup, script
   or behaviour change, and no effect on which sections start open.

   Tier 1  dont-miss, red-flags ....... act now  (critical rail + tint)
   Tier 2  how-to-think .............. frame it  (brand rail + tint)
   Tier 3  references, ecg-related ... look it up (quiet, recedes)
   Tier 4  everything else ............ neutral working set
   ══════════════════════════════════════════════════════════════════ */
.section-card {
    --tier: var(--line);
    --tier-w: 3px;
}
.section-card[data-section="dont-miss"],
.section-card[data-section="red-flags"] {
    --tier: var(--critical);
    --tier-w: 5px;
}
.section-card[data-section="how-to-think"] {
    --tier: var(--accent);
    --tier-w: 4px;
}
.section-card[data-section="references"],
.section-card[data-section="ecg-related"] {
    --tier: var(--line-subtle);
    --tier-w: 2px;
}

/* Rail is drawn inside the head so existing padding and the card's
   overflow:hidden keep rounding it at the corners. */
.sec-head { position: relative; }
.sec-head::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--tier-w);
    background: var(--tier);
}

/* Act-now sections read first even when collapsed or hovered. */
.section-card[data-section="dont-miss"] .sec-head,
.section-card[data-section="red-flags"] .sec-head {
    background: var(--critical-bg);
}
.section-card[data-section="dont-miss"] .sec-head:hover,
.section-card[data-section="red-flags"] .sec-head:hover { background: var(--critical-bg); }
.section-card[data-section="how-to-think"] .sec-head {
    background: var(--accent-light);
}
.section-card[data-section="how-to-think"] .sec-head:hover { background: var(--accent-light); }

/* Tier 1 titles carry more weight than the working set. */
.sec-head > span:not(.sec-ico):not(.arrow) { letter-spacing: -.01em; }
.section-card[data-section="dont-miss"] .sec-head > span:not(.sec-ico):not(.arrow),
.section-card[data-section="red-flags"] .sec-head > span:not(.sec-ico):not(.arrow) {
    font-size: 1.04rem;
    font-weight: 700;
}

/* Disclosure control reads as a control, not a stray glyph. */
.sec-head .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--line-subtle);
    color: var(--ink-soft);
    font-size: .55rem;
    opacity: 1;
}
.sec-head:hover .arrow { background: var(--hover-line); }

/* Lookup tier recedes so it never competes with clinical guidance. */
.section-card[data-section="references"] .sec-head,
.section-card[data-section="ecg-related"] .sec-head { color: var(--ink-soft); }
.section-card[data-section="references"] .sec-head > span:not(.sec-ico):not(.arrow) { font-weight: 550; }

/* ── "First 5 minutes" reads as the entry point ──────────────────
   The rail already carried an accent edge but sat at the same optical
   weight as the cards around it. It is the one block a clinician should
   land on first, so it gets a tinted field, a numbered run and a step
   counter instead of a bare digit. */
.case-rail {
    border-left-width: 4px;
    padding: 22px 26px;
    background: linear-gradient(100deg, var(--ov-job-bg) 0%, var(--card) 62%);
}
.case-rail-title { align-items: center; margin-bottom: 14px; }
.case-rail-title strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.case-rail-title > span {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.18);
}
.case-steps { gap: 10px; }
.case-steps li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 0 12px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--card);
    border: 1px solid var(--line-subtle);
}
.case-steps li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--brand-2);
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .case-rail { padding: 18px; }
    .case-steps li { padding: 8px 10px; gap: 0 10px; }
}

/* ── Reading progress ────────────────────────────────────────────
   A presentation runs to ten or more collapsible sections. This is a
   passive position cue only: aria-hidden, no pointer events, and it
   never intercepts a click on the content beneath it. */
.read-progress {
    pointer-events: none;
    position: sticky;
    top: var(--topbar-h, 73px);
    z-index: 6;
    height: 3px;
    margin-bottom: 14px;
    border-radius: 9999px;
    background: var(--line-subtle);
    overflow: hidden;
}
.read-progress > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    transition: width var(--transition-fast) linear;
}
@media (prefers-reduced-motion: reduce) {
    .read-progress > i { transition: none; }
}
@media print {
    .read-progress { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Wide-screen presentation shell
   A presentation is a long single column: approach, don't-miss, red
   flags, history, exam, workup, disposition, pearls, notes, related,
   references. The horizontal chip row gave a map but scrolled away
   within a screen of reading, so on a wide viewport the map is pinned
   beside the content and follows the reader.

   Narrow viewports keep the original single column and the original
   chip row untouched — the rail is simply not rendered into view.
   ══════════════════════════════════════════════════════════════════ */
.main .stage:has(> .pres-layout) { max-width: 1180px; }

.pres-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 24px;
    align-items: start;
}
.pres-rail-wrap { display: none; }
.pres-main { min-width: 0; }

@media (min-width: 960px) {
    .pres-layout { grid-template-columns: 214px minmax(0, 1fr); }
    .pres-rail-wrap {
        display: block;
        position: sticky;
        top: calc(var(--topbar-h, 73px) + 16px);
        max-height: calc(100vh - var(--topbar-h, 73px) - 32px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-inline-end: 4px;
    }
    /* The chip row is redundant once the rail is on screen. */
    .pres-main > .presentation-toc { display: none; }
}

.pres-rail {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0 8px;
}
.pres-rail-label {
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 0 10px 10px;
    border-bottom: 1px solid var(--line-subtle);
    margin-bottom: 7px;
}
.rail-jump {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    text-align: start;
    line-height: 1.35;
    cursor: pointer;
    transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
}
.rail-jump:hover { background: var(--home-hover); color: var(--ink); }
.rail-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line);
    transition: background var(--transition-fast) ease, transform var(--transition-fast) var(--ease-out);
}
.rail-jump.current {
    background: var(--ov-job-bg);
    color: var(--ink);
    font-weight: 650;
}
.rail-jump.current .rail-dot {
    background: var(--accent);
    transform: scale(1.5);
}
.rail-critical .rail-dot { background: var(--critical-line); }
.rail-critical.current { color: var(--critical); }
.rail-critical.current .rail-dot { background: var(--critical); }
.rail-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
    .rail-jump, .rail-dot { transition: none; }
}
@media print {
    .pres-rail-wrap { display: none !important; }
    .pres-main > .presentation-toc { display: none !important; }
}

/* ── Opening statement ───────────────────────────────────────────
   Every presentation opened as loose text on the page background, so
   the first thing a clinician saw carried no visual anchor. The hero
   is now a tinted panel drawn from the theme accent, which already
   follows the chosen accent theme — so this adds weight without
   inventing a second colour source. */
.cp-hero {
    position: relative;
    margin-bottom: 22px;
    padding: 24px 26px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent-rgb), 0.02) 62%, transparent 100%),
        var(--card);
    overflow: hidden;
}
.cp-hero::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}
.cp-hero h1 {
    font-size: clamp(1.85rem, 3.6vw, 2.6rem);
    line-height: 1.14;
    letter-spacing: -.032em;
    font-weight: 700;
}
.cp-hero .tag {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 62ch;
    margin-top: 8px;
}
.cp-hero .cp-ico-lg {
    width: 62px;
    height: 62px;
    border-radius: 17px;
    margin-bottom: 14px;
}
.cp-hero .cp-ico-lg .color-ico { width: 42px; height: 42px; }
.cp-hero .back-btn { margin-bottom: 12px; }

@media (max-width: 600px) {
    .cp-hero { padding: 20px 18px 18px; border-radius: var(--radius-md); }
    .cp-hero h1 { font-size: 1.7rem; }
    .cp-hero .tag { font-size: .92rem; }
    .cp-hero .cp-ico-lg { width: 52px; height: 52px; border-radius: 14px; }
    .cp-hero .cp-ico-lg .color-ico { width: 34px; height: 34px; }
}

/* ── Home opening statement ──────────────────────────────────────
   Same panel language as the presentation hero so the two screens
   read as one product, and the library below gets a clearer hierarchy:
   the system heading is a labelled rule rather than loose uppercase. */
.home-intro {
    position: relative;
    max-width: none;
    margin-bottom: 26px;
    padding: 26px 28px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent-rgb), 0.02) 60%, transparent 100%),
        var(--card);
    overflow: hidden;
}
.home-intro::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}
.home-intro h1 {
    font-size: clamp(1.95rem, 3.4vw, 2.7rem);
    font-weight: 700;
    max-width: 22ch;
    margin: 10px 0 12px;
}
.home-intro p { max-width: 56ch; font-size: 1rem; }
.home-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--line-subtle);
    font-size: .78rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ink-soft);
}
.group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
.group-title > span { font-variant-numeric: tabular-nums; color: var(--ink-soft); opacity: .75; }

.cp-grid .cp-card h3 { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.cp-grid .cp-card p { line-height: 1.55; }

@media (max-width: 600px) {
    .home-intro { padding: 20px 18px 18px; border-radius: var(--radius-md); }
    .home-intro h1 { font-size: 1.75rem; }
    .home-intro p { font-size: .92rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Clinical system identity
   The palette for the 17 systems was already defined but spent on a 44px
   icon tile, so every card read as the same grey box with a coloured
   square in it. Each card now carries a wash of its own system hue, and
   the group heading picks up the dominant hue of the systems beneath it.
   The wash is deliberately faint (7% at the top, gone by 70%) so a screen
   of cards reads as calm colour families rather than confetti.
   ══════════════════════════════════════════════════════════════════ */
.cp-grid .cp-card {
    background: linear-gradient(180deg, rgba(var(--cat, 100, 116, 139), 0.075) 0%, var(--card) 68%);
    border-color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 22%, var(--line));
}
.cp-grid .cp-card:hover {
    background: linear-gradient(180deg, rgba(var(--cat, 100, 116, 139), 0.13) 0%, var(--card) 72%);
    border-color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 40%, var(--line));
}
.cp-grid .cp-card .cp-ico {
    box-shadow: 0 2px 8px color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 22%, transparent);
}
/* Title picks up a trace of the system so scanning a row is faster. */
.cp-grid .cp-card h3 { color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 30%, var(--ink)); }

.home-group { margin-top: 32px; }
.group-title { color: var(--ink); }
.group-title::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: rgb(var(--cat, 100, 116, 139));
    transform: rotate(45deg);
}

html[data-theme="dark"] .cp-grid .cp-card {
    background: linear-gradient(180deg, rgba(var(--cat, 100, 116, 139), 0.16) 0%, var(--card) 70%);
    border-color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 26%, var(--line));
}
html[data-theme="dark"] .cp-grid .cp-card:hover {
    background: linear-gradient(180deg, rgba(var(--cat, 100, 116, 139), 0.24) 0%, var(--card) 74%);
    border-color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 44%, var(--line));
}
html[data-theme="dark"] .cp-grid .cp-card h3 { color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 26%, var(--ink)); }

/* The hero and the first-minutes rail take the topic's clinical system hue,
   so one colour identifies a presentation from the library card through to
   the page it opens. */
.cp-hero {
    background:
        linear-gradient(180deg, rgba(var(--cat, 15, 157, 118), 0.13) 0%, rgba(var(--cat, 15, 157, 118), 0.03) 60%, transparent 100%),
        var(--card);
    border-color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 24%, var(--line));
}
.cp-hero::after {
    background: linear-gradient(90deg, rgb(var(--cat, 15, 157, 118)) 0%, color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 55%, var(--accent-2)) 100%);
}
.cp-hero h1 { color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 22%, var(--ink)); }
.cp-hero .cp-ico-lg { box-shadow: 0 3px 12px color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 26%, transparent); }

.case-rail {
    background: linear-gradient(100deg, rgba(var(--cat, 15, 157, 118), 0.10) 0%, var(--card) 64%);
    border-color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 26%, var(--line));
    border-left-color: rgb(var(--cat, 15, 157, 118));
}
.case-steps li > span {
    background: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 16%, transparent);
    color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 72%, var(--ink));
}
.case-rail-title > span { background: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 16%, transparent); }
.case-rail-title > span .mono-ico { color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 70%, var(--ink)); }

.pres-rail.current, .rail-jump.current {
    background: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 10%, transparent);
}
.rail-jump.current .rail-dot { background: rgb(var(--cat, 15, 157, 118)); }
.rail-critical.current .rail-dot { background: var(--critical); }

html[data-theme="dark"] .cp-hero {
    background:
        linear-gradient(180deg, rgba(var(--cat, 15, 157, 118), 0.20) 0%, rgba(var(--cat, 15, 157, 118), 0.05) 62%, transparent 100%),
        var(--card);
}
html[data-theme="dark"] .case-rail { background: linear-gradient(100deg, rgba(var(--cat, 15, 157, 118), 0.16) 0%, var(--card) 66%); }
html[data-theme="dark"] .case-steps li > span { background: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 24%, transparent); }

/* ══════════════════════════════════════════════════════════════════
   Shift view — the emergency screen
   This is the view opened mid-shift, so it was the least designed
   surface in the app: five identical grey boxes. It now reads as an
   ordered protocol, with the two "act now" steps carrying the critical
   colour and the sheet carrying the topic's clinical system hue.
   ══════════════════════════════════════════════════════════════════ */
.shift-sheet {
    border-color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 26%, var(--line));
    background:
        linear-gradient(180deg, rgba(var(--cat, 15, 157, 118), 0.08) 0%, transparent 34%),
        var(--card);
}
.shift-sheet-head h1 { color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 20%, var(--ink)); }
.shift-kicker { color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 78%, var(--ink-soft)); }

.shift-grid { gap: 16px; }
.shift-grid section {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
}
.shift-grid section > h2 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    margin: 0 0 12px;
    font-size: .95rem;
    font-weight: 650;
    color: var(--ink);
    letter-spacing: -.01em;
}
.shift-step-n {
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(var(--cat, 15, 157, 118), 0.14);
    color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 78%, var(--ink));
    font-size: .92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.shift-grid section > ol,
.shift-grid section > ul,
.shift-grid section > div { grid-column: 2; }
.shift-grid section > ol { margin: 0; }
.shift-grid section > ul { margin: 0; }
.shift-grid section > div + div { margin-top: 10px; }
.shift-grid section > div strong { display: block; font-size: .85rem; color: var(--ink); margin-bottom: 3px; }
.shift-grid section > div p { font-size: .82rem; }

/* The two steps that mean "stop and act". */
.shift-grid .shift-red,
.shift-grid .shift-crit {
    background: var(--critical-bg);
    border-color: color-mix(in srgb, var(--critical) 34%, var(--line));
    border-left: 4px solid var(--critical);
}
.shift-grid .shift-red .shift-step-n,
.shift-grid .shift-crit .shift-step-n {
    background: var(--critical);
    color: #fff;
}
.shift-grid .shift-red h2,
.shift-grid .shift-crit h2 { color: var(--critical); }
.shift-grid .shift-red li,
.shift-grid .shift-crit li { color: var(--ink); }
.shift-grid .shift-red li::before,
.shift-grid .shift-crit li::before { background: var(--critical); }

.shift-grid > section:not(.shift-red):not(.shift-crit) .shift-step-n {
    background: rgba(var(--cat, 15, 157, 118), 0.14);
}
.shift-disposition > div {
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--line-subtle);
}

html[data-theme="dark"] .shift-sheet { background: linear-gradient(180deg, rgba(var(--cat, 15, 157, 118), 0.14) 0%, transparent 36%), var(--card); }

/* ══════════════════════════════════════════════════════════════════
   Study & Learn workspaces
   Both were flat white panels with a heading and a form. They now share
   the panel language used elsewhere (capped panel, tinted heading) and
   the empty states carry an icon so a blank queue reads as intentional
   rather than broken. No topic hue here on purpose — these workspaces
   span every clinical system, so a single colour would be a lie.
   ══════════════════════════════════════════════════════════════════ */
.study-page,
.case-practice,
.learning-workspace {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.07) 0%, transparent 220px),
        var(--card);
}
.study-page::before,
.case-practice::before,
.learning-workspace::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}
.study-page-head,
.case-practice-head { padding-top: 24px; }
.study-page-head h1,
.case-practice-head h1,
.case-practice-head h2 { letter-spacing: -.03em; }

.study-tabs { margin-top: 4px; }
.study-tabs button.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }

.study-empty,
.empty-filter {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 52px 28px;
    text-align: center;
    color: var(--ink-soft);
}
.study-empty::before,
.empty-filter::before {
    content: "";
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.12);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.learning-loop,
.personal-plan,
.study-dashboard {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    background: var(--card);
}
.recording-controls,
.study-actions { gap: 10px; }

.quiz-question legend { color: var(--ink); }
.quiz-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: rgba(var(--accent-rgb), 0.07);
}
.quiz-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.study-topic { transition: border-color var(--transition-fast) ease, background var(--transition-fast) ease; }
.study-topic:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }

.personal-plan textarea,
.study-page select,
.case-practice select {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}

/* ══════════════════════════════════════════════════════════════════
   Chrome: topbar, sidebar, dialogs
   The last surfaces a reader meets. Nothing here changes behaviour —
   only edge definition, depth and the first-run disclaimer, which is
   the first thing a new user ever sees and was an unstyled box.
   ══════════════════════════════════════════════════════════════════ */
.topbar { box-shadow: 0 1px 0 var(--line-subtle); }
.topbar::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
    opacity: .5;
    pointer-events: none;
}

.sidebar { box-shadow: 1px 0 0 var(--line-subtle); }
.side-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: .85;
}
.side-item { transition: background var(--transition-fast) ease, color var(--transition-fast) ease; }
.side-count {
    font-variant-numeric: tabular-nums;
    font-size: .68rem;
    color: var(--ink-soft);
    background: var(--line-subtle);
    border-radius: 9999px;
    padding: 1px 7px;
}

.disclaimer-modal {
    border-radius: var(--radius-lg);
    border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
    box-shadow: var(--shadow-float);
    overflow: hidden;
}
.disclaimer-modal > header,
.disclaimer-modal .modal-head {
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), transparent);
    border-bottom: 1px solid var(--line-subtle);
}
.toast { border-radius: var(--radius-md); }

.results-pop {
    border-radius: var(--radius-md);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    box-shadow: var(--shadow-lg);
}
.ecg-fig, .ecg-workbench-paper {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}
.ecg-step-chip[aria-current="true"],
.ecg-step-chip.active {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: rgba(var(--accent-rgb), 0.10);
}

/* ══════════════════════════════════════════════════════════════════
   Design System v5 — Clinical Clean
   A single appended layer. Delete it and the product returns to v4.

   Direction: quiet clinical reading surfaces (cool neutral paper,
   near-black ink, one emerald accent), a flat dark navigation spine,
   and category colour spent only on the 44px icon tile — never on a
   whole section, card or layout wrapper.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ──────────────────────────────────────────────── */
html[data-theme][data-accent] {
    --bg: #f4f6f8;
    --card: #fff;
    --card-elevated: #fff;
    --ink: #0f1720;
    --ink-soft: #5c6975;
    --line: #e3e8ed;
    --line-subtle: #edf0f3;
    --topbar-bg: rgba(255, 255, 255, 0.86);
    --foot-bg: #f4f6f8;
    --home-hover: #f1f4f7;
    --hover-line: #c9d3db;
    --ov-job-bg: #eef2f5;
    --ov-job-line: #dfe6ec;
    --shadow-sm: 0 1px 2px rgba(13, 28, 44, 0.05);
    --shadow: 0 4px 14px rgba(13, 28, 44, 0.07);
    --shadow-md: 0 8px 22px rgba(13, 28, 44, 0.09);
    --shadow-lg: 0 14px 34px rgba(13, 28, 44, 0.10);
    --shadow-float: 0 18px 44px rgba(13, 28, 44, 0.16);
    --topbar-h: 73px;
}
html[data-theme="dark"][data-accent] {
    --bg: #0d131a;
    --card: #141b23;
    --card-elevated: #1a232c;
    --ink: #e8eef4;
    --ink-soft: #9aa8b6;
    --line: #26313d;
    --line-subtle: #1e2733;
    --topbar-bg: rgba(16, 22, 29, 0.88);
    --foot-bg: #0d131a;
    --home-hover: #1b242e;
    --hover-line: #465666;
    --ov-job-bg: #1a242e;
    --ov-job-line: #2a3743;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.36);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.45);
    --shadow-float: 0 18px 44px rgba(0, 0, 0, 0.52);
    --topbar-h: 73px;
}
html[data-theme="light"][data-accent="emerald"] {
    --brand: #10554a;
    --brand-2: #146b5c;
    --accent: #0f7f6a;
    --accent-2: #16a088;
    --accent-rgb: 15, 127, 106;
    --on-fill: #fff;
}
html[data-theme="dark"][data-accent="emerald"] {
    --brand: #7ad9c3;
    --brand-2: #7ad9c3;
    --accent: #4ecfb4;
    --accent-2: #4ecfb4;
    --accent-rgb: 78, 207, 180;
    --on-fill: #062420;
}

/* ── 2 · Flat dark navigation spine ────────────────────────────
   The sidebar carries its own custom properties so every rule that
   already paints it with --ink, --line, --ov-job-bg or --brand-2
   re-renders correctly without touching a single child selector. */
html[data-theme][data-accent] .sidebar {
    --bg: #0f171d;
    --card: #0f171d;
    --ink: #dbe4ea;
    --ink-soft: #9aa8b3;
    --line: rgba(255, 255, 255, 0.09);
    --line-subtle: rgba(255, 255, 255, 0.06);
    --hover-line: rgba(255, 255, 255, 0.18);
    --home-hover: rgba(255, 255, 255, 0.06);
    --ov-job-bg: rgba(255, 255, 255, 0.07);
    --ov-job-line: rgba(255, 255, 255, 0.12);
    --brand-2: #57d1b6;
    --accent: #42c9ac;
    --accent-2: #42c9ac;
    --accent-rgb: 66, 201, 172;
    --side-muted: #8b99a4;
    --side-sub: #77858f;
    --side-label: #6a7883;
    --side-note: #74828d;
    background: #0f171d;
    color: var(--ink);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: none;
}
html[data-theme] .side-item { color: #96a4af; }
html[data-theme] .side-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #f2f6f9;
    transform: translateX(2px);
}
html[data-theme] .side-item:active {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(1px);
}
html[data-theme] .side-item.side-home {
    color: #cfe9e2;
    background: rgba(66, 201, 172, 0.10);
    border-color: rgba(66, 201, 172, 0.22);
}
html[data-theme] .side-item.active,
html[data-theme] .side-item.side-home.active {
    background: rgba(66, 201, 172, 0.15);
    border-color: rgba(66, 201, 172, 0.30);
    color: #6ee7c9;
    font-weight: 650;
    box-shadow: inset 3px 0 0 #42c9ac;
}
/* Category pods must never paint a border or glow on a nav glyph. */
html [data-cat].ico { border: 0; box-shadow: none; }
html[data-theme] .side-group > summary { color: #6c7b86; }
html[data-theme] .side-group[open] > summary { color: #d2dce3; }
html[data-theme] .side-label { color: #66757f; }
html[data-theme] .side-note { color: #6d7c87; }

/* ── 3 · Topbar ───────────────────────────────────────────────
   Grid columns and paddings are deliberately left alone: six media
   queries re-place them at 1160/1100/920/700/600/360px. */
.topbar {
    background: var(--topbar-bg);
    border-bottom-color: var(--line);
    box-shadow: none;
}
.topbar > .burger {
    border-color: transparent;
    background: transparent;
    color: var(--ink-soft);
    border-radius: 10px;
}
.topbar > .burger:hover { background: var(--home-hover); color: var(--ink); border-color: transparent; }
.topbar > .tools-toggle {
    border-color: transparent;
    background: transparent;
    color: var(--ink-soft);
    border-radius: 10px;
}
.topbar > .tools-toggle:hover { background: var(--home-hover); color: var(--ink); border-color: transparent; }
.topbar > .searchwrap {
    background: var(--bg);
    border-color: var(--line);
    border-radius: 10px;
    box-shadow: none;
}
.topbar > .searchwrap:focus-within {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}
html[data-theme] .primary-nav .home-btn {
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-weight: 550;
    border-radius: 9px;
    box-shadow: none;
}
html[data-theme] .primary-nav .home-btn:hover { background: var(--home-hover); color: var(--ink); }
html[data-theme] .primary-nav .home-btn.active-nav,
html[data-theme="dark"] .primary-nav .home-btn.active-nav {
    background: rgba(var(--accent-rgb), 0.13);
    color: var(--brand-2);
    border-color: transparent;
    box-shadow: none;
}
.topbar > .context-filters > summary {
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    border-radius: 9px;
    font-weight: 550;
}
.topbar > .context-filters > summary:hover { background: var(--home-hover); color: var(--ink); }
.topbar > .context-filters[open] > summary { background: rgba(var(--accent-rgb), 0.13); color: var(--brand-2); }
.topbar > .topbar-tools {
    background: var(--card);
    border-color: var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-float);
}

/* ── 4 · Clinical system identity lives on the tile ────────────
   [data-cat] used to publish a candy gradient, a coloured border and
   a glow onto every element that carries the attribute — including
   <section class="home-group">, .pres-layout and .cp-hero, so whole
   screens rendered as tinted panels. The hue now rides the 44px icon
   tile and the shift step rule only. */
html[data-theme] [data-cat] { box-shadow: none; }
html[data-theme] [data-cat].home-group,
html[data-theme] [data-cat].pres-layout,
html[data-theme] [data-cat].cp-hero {
    background: transparent;
    border: 0;
    box-shadow: none;
}
html[data-theme] [data-cat].cp-ico,
html[data-theme] [data-cat].cp-ico-lg,
html[data-theme] [data-cat].study-topic-ico,
html[data-theme] [data-cat].chip-ico,
html[data-theme] [data-cat].res-ico {
    background: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 13%, transparent);
    border: 1px solid color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 26%, transparent);
    box-shadow: none;
}
html[data-theme] [data-cat].shift-sheet {
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 3px solid rgb(var(--cat, 15, 157, 118));
    box-shadow: var(--shadow-sm);
}
/* Cards go neutral; the system colour returns only as the hover edge. */
html[data-theme] .cp-grid .cp-card {
    background: var(--card);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}
html[data-theme] .cp-grid .cp-card:hover {
    background: var(--card);
    border-color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 42%, var(--line));
    box-shadow: var(--shadow-md);
}
html[data-theme] .cp-grid .cp-card h3 { color: var(--ink); }
html[data-theme] .cp-grid .cp-card .cp-ico { box-shadow: none; }
html[data-theme] .cp-grid .cp-card .cp-count {
    background: transparent;
    border-color: var(--line);
    color: var(--ink-soft);
}
html[data-theme] .cp-grid .cp-card:hover .cp-count {
    color: var(--brand-2);
    border-color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 45%, var(--line));
}

/* ── 5 · Home ───────────────────────────────────────────────── */
.home-intro {
    position: relative;
    max-width: none;
    margin-bottom: 30px;
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
.home-intro::after { display: none; }
.home-intro > span, .home-eyebrow {
    color: var(--accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
}
.home-intro h1 {
    font-size: clamp(2.05rem, 3.8vw, 2.9rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.04em;
    max-width: 17ch;
    margin: 14px 0 16px;
}
.home-intro p {
    font-size: 1.03rem;
    line-height: 1.6;
    max-width: 52ch;
    color: var(--ink-soft);
}
.home-actions { margin-top: 26px; gap: 10px; }
.home-actions button {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 18px;
    background: var(--card);
    color: var(--ink);
    font-size: .86rem;
    font-weight: 600;
}
.home-actions button:first-child {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: var(--on-fill);
    box-shadow: var(--shadow-sm);
}
.home-actions button:hover { border-color: var(--hover-line); box-shadow: var(--shadow-sm); }
.home-actions button:first-child:hover { background: var(--brand-2); border-color: var(--brand-2); box-shadow: var(--shadow); }
.home-meta {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    gap: 8px 24px;
    font-size: .76rem;
    color: var(--ink-soft);
}
.home-group { margin-top: 34px; margin-bottom: 8px; }
.group-title {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--ink);
}
.group-title::after { background: var(--line); }
.group-title > span {
    background: var(--ov-job-bg);
    border: 0;
    color: var(--ink-soft);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: 0;
    opacity: 1;
}
.library-head h2 { font-weight: 700; letter-spacing: -.025em; }
.library-filters > summary { border-radius: 9px; }

/* ── 6 · Supporting home panels ─────────────────────────────── */
.workspace-entry > a, .workspace-card {
    background: var(--card);
    border-color: var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.workspace-entry > a:hover, .workspace-card[href]:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: var(--shadow-md);
}
.student-start {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.student-start h2 { font-weight: 700; letter-spacing: -.02em; }
.study-dashboard.study-dashboard-compact {
    background: var(--card);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}

/* ── 7 · Presentation ───────────────────────────────────────── */
.breadcrumbs { font-size: .77rem; font-weight: 550; margin-bottom: 14px; }
.crumb-group { color: var(--brand-2); }
.cp-hero { margin-bottom: 26px; }
.cp-hero h1 { font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.cp-hero .tag { line-height: 1.6; }
.cp-hero .back-btn {
    min-height: 34px;
    gap: 6px;
    font-size: .77rem;
    font-weight: 550;
    color: var(--ink-soft);
    border-radius: 8px;
}
.cp-hero .back-btn:hover { background: var(--home-hover); color: var(--brand-2); }
.pres-rail {
    padding: 6px 6px 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.pres-rail-label { padding: 8px 8px 9px; margin-bottom: 6px; border-bottom: 1px solid var(--line-subtle); letter-spacing: .1em; }
.rail-jump { min-height: 34px; padding: 7px 9px; font-size: .8rem; border-radius: 9px; }
.rail-jump.current {
    background: rgba(var(--accent-rgb), 0.13);
    color: var(--brand-2);
    font-weight: 650;
}
.section-card {
    border-color: var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.section-card:hover { border-color: var(--hover-line); box-shadow: var(--shadow); }
.sec-head { font-weight: 600; letter-spacing: -.005em; }
.case-rail {
    background: rgba(var(--accent-rgb), 0.07);
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    border-left: 4px solid var(--accent);
    border-radius: 14px;
    box-shadow: none;
}
.case-rail-title strong { font-weight: 700; }

/* ── 8 · Shift, practice, ECG ───────────────────────────────── */
.shift-sheet-head h1 { font-weight: 700; letter-spacing: -.03em; }
.shift-grid section {
    background: var(--card);
    border-color: var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}
.shift-grid .shift-red, .shift-grid .shift-crit { box-shadow: var(--shadow-sm); }
.study-topic, .study-topic-ico { transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease; }
.results-pop {
    background: var(--card);
    border-color: var(--line);
    box-shadow: var(--shadow-float);
}
.toast {
    background: var(--card);
    border-color: var(--line);
    box-shadow: var(--shadow-float);
}
dialog, .modal, .disclaimer-modal {
    box-shadow: var(--shadow-float);
}

/* ── 9 · Dark mode ──────────────────────────────────────────── */
html[data-theme="dark"] [data-cat].cp-ico,
html[data-theme="dark"] [data-cat].cp-ico-lg,
html[data-theme="dark"] [data-cat].study-topic-ico,
html[data-theme="dark"] [data-cat].chip-ico,
html[data-theme="dark"] [data-cat].res-ico {
    background: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 26%, transparent);
    border-color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 40%, transparent);
}
html[data-theme="dark"] .case-rail { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.34); }
html[data-theme="dark"] .home-actions button:first-child { box-shadow: none; }
html[data-theme="dark"] .section-card:hover { box-shadow: none; }

/* ── 10 · Responsive reconciliation ───────────────────────────
   Every property set above that is also re-set inside an existing
   media query has to be re-stated here, or this later layer would
   silently win at mobile widths. */
@media (max-width: 700px) {
    .home-intro h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); margin-top: 10px; }
    .home-intro p { font-size: .95rem; }
}
@media (max-width: 600px) {
    .home-intro { padding: 0 0 22px; border-radius: 0; }
    .home-actions { margin-top: 18px; gap: 8px; }
    .home-actions button { padding-inline: 14px; font-size: .82rem; }
    .group-title { font-size: .78rem; margin-bottom: 12px; }
    .cp-hero { margin-bottom: 20px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .cp-hero { margin-bottom: 12px; }
}

/* ── 11 · Print ─────────────────────────────────────────────── */
@media print {
    html[data-theme][data-accent],
    html[data-theme="dark"][data-accent] {
        --bg: #fff;
        --card: #fff;
        --ink: #111;
        --ink-soft: #444;
        --line: #ddd;
        --line-subtle: #e6e6e6;
        --topbar-bg: #fff;
        --foot-bg: #fff;
        --home-hover: transparent;
        --hover-line: #ddd;
        --ov-job-bg: #f4f7f6;
        --ov-job-line: #cde9de;
        --shadow-sm: none;
        --shadow: none;
        --shadow-md: none;
        --shadow-lg: none;
        --shadow-float: none;
    }
    html[data-theme="light"][data-accent="emerald"],
    html[data-theme="dark"][data-accent="emerald"] {
        --brand: #0b3d2e;
        --brand-2: #115743;
        --accent: #0f9d76;
        --accent-rgb: 15, 157, 118;
        --on-fill: #fff;
    }
    html[data-theme][data-accent] .sidebar { background: #fff; }
    html[data-theme] [data-cat].cp-ico,
    html[data-theme] [data-cat].cp-ico-lg { background: transparent; border-color: #ccc; }
    html[data-theme] [data-cat].shift-sheet { border-top-color: #111; }
}

/* ══════════════════════════════════════════════════════════════════
   Design System v5.1 — Tighten & Unify
   ──────────────────────────────────────────────────────────────────
   Two changes, both reversible by deleting this block:
   1 · TIGHTEN  the vertical bulk that made long screens feel loose.
        Every property touched here is re-declared at the breakpoints
        where it is already re-set (920 / 700 / 600) plus print, so no
        earlier media query is silently clobbered.
        Touch targets (min-height 44px) are never reduced.
   2 · UNIFY    the twenty category hues to the single accent already
        chosen in the topbar, so a screen reads as one calm colour
        rather than confetti. Colour stays a faint tint, a dot and a
        1px edge — never a filled panel.
   ════════════════════════════════════════════════════════════════ */

/* ── 1 · One accent instead of twenty category hues ───────────── */
html[data-theme][data-accent] [data-cat] { --cat: var(--accent-rgb); }

/* The accent stays quiet where the old category hue was loud. */
html[data-theme] .cp-grid .cp-card:hover {
    border-color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 30%, var(--line));
}
html[data-theme] .cp-grid .cp-card:hover .cp-count {
    border-color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 34%, var(--line));
}
.case-steps li > span { color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 56%, var(--ink)); }
.case-rail-title > span .mono-ico { color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 54%, var(--ink)); }
.shift-kicker { color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 60%, var(--ink-soft)); }
html[data-theme="dark"] [data-cat].cp-ico,
html[data-theme="dark"] [data-cat].cp-ico-lg,
html[data-theme="dark"] [data-cat].study-topic-ico,
html[data-theme="dark"] [data-cat].chip-ico,
html[data-theme="dark"] [data-cat].res-ico {
    background: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 20%, transparent);
    border-color: color-mix(in srgb, rgb(var(--cat, 100, 116, 139)) 32%, transparent);
}

/* ── 2 · Tighten — desktop base ───────────────────────────────── */
.main .stage { padding: 28px 32px 32px; }
.main .stage:has(> .ecg-explorer) { padding: 18px 22px 28px; }
.foot { padding: 14px 32px; }

.home-intro { padding: 2px 0 0; margin-bottom: 20px; }
.home-intro h1 { margin: 10px 0 12px; }
.home-actions { margin-top: 16px; gap: 8px; }
.home-meta { margin-top: 16px; padding-top: 10px; gap: 8px 20px; }
.home-group { margin-top: 24px; margin-bottom: 6px; }
.group-title { margin-bottom: 10px; gap: 10px; }
.workspace-entry { margin: 16px 0; }

.student-start { padding: 16px; margin: 12px 0 18px; }
.student-intro { padding: 16px; margin: 12px 0 18px; }
.student-actions { margin: 8px 0; gap: 8px; }

.breadcrumbs { margin-bottom: 10px; }
.cp-hero { padding: 16px clamp(16px, 3vw, 26px) 18px; margin-bottom: 18px; }
.section-card { margin-bottom: 10px; }
.sec-head { padding: 14px 20px; min-height: 54px; gap: 10px; }
.sec-body { padding: 0 20px 16px; }
.case-rail { padding: 16px 22px; margin-bottom: 14px; gap: 12px; }
.cp-grid { gap: 8px; }
.cp-grid .cp-card { padding: 14px 16px; min-height: 90px; gap: 4px 10px; }

.pres-rail { padding: 5px 5px 6px; }
.pres-rail-label { padding: 6px 8px 7px; margin-bottom: 4px; }
.rail-jump { padding: 6px 8px; gap: 8px; }
.pres-layout { gap: 0 24px; }

.study-page { padding: clamp(16px, 3vw, 28px); }
.study-page-head { padding-top: 18px; }
.shift-sheet { padding: clamp(16px, 3vw, 24px); }

.side-item { padding: 8px 12px; }
.side-label { padding: 6px 10px 4px; }
.side-list { gap: 4px; }
.chips { gap: 5px; }
.chip { padding: 5px 11px; }

/* ── 3 · Tighten — mirrored breakpoints ─────────────────────────
   Each block restates only the properties that an earlier media query
   also sets at that width, with the tightened value for that width. */
@media (max-width: 920px) {
    .main .stage { padding: 20px 20px 26px; }
    .chips { gap: 5px; }
    .cp-hero { padding: 14px clamp(14px, 2.5vw, 20px) 16px; margin-bottom: 16px; }
    .case-rail { padding: 14px 18px; gap: 10px; }
}
@media (max-width: 700px) {
    .main .stage:has(> .ecg-explorer) { padding: 12px 12px 24px; }
    .student-start { padding: 14px; margin-top: 8px; }
    .student-intro { padding: 14px; }
}
@media (max-width: 600px) {
    .main .stage { padding: 15px 14px 22px; }
    .foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .home-intro { padding: 0 0 16px; margin-bottom: 16px; }
    .home-actions { margin-top: 12px; gap: 8px; }
    .group-title { margin-bottom: 8px; }
    .cp-hero { padding: 13px 14px 14px; margin-bottom: 13px; }
    .sec-head { padding: 12px 14px; min-height: 52px; }
    .sec-body { padding: 0 14px 13px; }
    .case-rail { padding: 13px 15px; }
    .cp-grid { gap: 7px; }
    .cp-grid .cp-card { padding: 12px 14px; min-height: 84px; gap: 3px 8px; }
    .shift-sheet { padding: 15px; }
}
@media print {
    .main .stage { padding: 0; }
    .main .stage:has(> .ecg-explorer) { padding: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   Design System v6 — Modern Polish, Depth & Clinical Elegance
   ──────────────────────────────────────────────────────────────────
   Elevates EM Pocket to a world-class, modern clinical reference:
   1 · Refined surface tokens & multi-stop ambient shadows.
   2 · Glassmorphic sticky topbar with segmented primary navigation.
   3 · Spotlight-style search bar with mechanical kbd badge & smooth popup.
   4 · Inspiring home hero with live status pulse & interactive pathway cards.
   5 · High-impact clinical presentation view with priority rail hierarchy.
   6 · Distinct diagnostic cards (Critical, Emergent, Common) with crisp rails.
   7 · Responsive touch ergonomics & springy tactile micro-feedback.
   ════════════════════════════════════════════════════════════════ */

:root {
    --shadow-xs: 0 1px 2px rgba(15, 36, 30, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 36, 30, 0.06), 0 1px 2px rgba(15, 36, 30, 0.04);
    --shadow-md: 0 4px 14px -2px rgba(15, 36, 30, 0.08), 0 2px 6px -1px rgba(15, 36, 30, 0.04);
    --shadow-lg: 0 10px 28px -4px rgba(15, 36, 30, 0.10), 0 4px 10px -2px rgba(15, 36, 30, 0.05);
    --shadow-float: 0 18px 48px -6px rgba(15, 36, 30, 0.16), 0 8px 18px -4px rgba(15, 36, 30, 0.08);
}

html[data-theme="dark"] {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.55), 0 2px 8px -1px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.65), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
    --shadow-float: 0 20px 52px -6px rgba(0, 0, 0, 0.8), 0 8px 24px -4px rgba(0, 0, 0, 0.5);
}

/* ── Topbar & Modern Nav ── */
.topbar {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--line);
    transition: background-color var(--transition-smooth) ease, border-color var(--transition-smooth) ease;
}

@media (min-width: 1161px) {
    .primary-nav {
        background: color-mix(in srgb, var(--ink) 4%, transparent);
        border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
        border-radius: 12px;
        padding: 2px;
        gap: 2px;
    }
    .primary-nav .home-btn {
        border-radius: 9px;
        font-weight: 600;
        transition: all 0.16s ease;
    }
    .primary-nav .home-btn:hover {
        background: color-mix(in srgb, var(--ink) 6%, transparent);
        color: var(--ink);
    }
    .primary-nav .home-btn.active-nav,
    html[data-theme="dark"] .primary-nav .home-btn.active-nav {
        background: var(--card);
        color: var(--brand-2);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--brand-2) 20%, transparent);
        font-weight: 700;
    }
    html[data-theme="dark"] .primary-nav .home-btn.active-nav {
        background: var(--card-elevated);
        color: var(--accent);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--accent-rgb), 0.35);
    }
}

/* ── Search Bar Finesse ── */
.topbar > .searchwrap {
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 11px;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease, background-color var(--transition-fast) ease;
}
.topbar > .searchwrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16), var(--shadow-sm);
    background: var(--card);
}
.search-kbd {
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 6px;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.search-clear-btn {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    border: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.15s ease;
}
.search-clear-btn:hover {
    background: color-mix(in srgb, var(--ink) 16%, transparent);
    color: var(--ink);
}

/* ── Search Results Popover ── */
.results-pop {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-float);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    padding: 6px;
}
.res-item {
    border-radius: 10px;
    border-bottom: 0;
    margin-bottom: 2px;
    padding: 8px 12px;
    transition: background-color var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.res-item:hover, .res-item.active {
    background: var(--home-hover);
    transform: translateX(2px);
}
.r-tag {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--brand-2);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
html[data-theme="dark"] .r-tag {
    color: var(--accent);
}

/* ── Reading Settings Panel ── */
.topbar > .topbar-tools {
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-float);
    padding: 16px;
}
.topbar-tools .pref-tools {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.pref-btn {
    border-radius: 7px;
    border: 0;
    background: transparent;
    box-shadow: none;
    transition: all var(--transition-fast) ease;
}
.pref-btn:hover {
    background: var(--home-hover);
    color: var(--ink);
}
.accent-dot {
    width: 30px;
    height: 30px;
    transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.accent-dot:hover {
    transform: scale(1.14);
}
.accent-dot[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
    transform: scale(1.08);
}

/* ── Home Hero Elevation ── */
.home-intro > span.study-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    color: var(--brand-2);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
html[data-theme="dark"] .home-intro > span.study-kicker {
    color: var(--accent);
}
.home-intro > span.study-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    flex-shrink: 0;
}
.home-intro h1 {
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--ink);
}
.home-intro p {
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.6;
}
.home-actions button:first-child {
    background: linear-gradient(135deg, var(--brand-2) 0%, var(--accent) 100%);
    border: 0;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.35);
    transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.home-actions button:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--shadow-rgb), 0.45);
}
.home-actions button:first-child:active {
    transform: translateY(0) scale(0.98);
}
.home-actions button:not(:first-child) {
    background: var(--card);
    border: 1.5px solid var(--line);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-fast) ease, border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.home-actions button:not(:first-child):hover {
    border-color: var(--accent);
    background: var(--home-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.home-actions button:not(:first-child):active {
    transform: translateY(0) scale(0.98);
}
.home-meta {
    gap: 8px 14px;
}
.home-meta span {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    font-weight: 600;
    color: var(--ink-soft);
}
#offlineStatus::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    display: inline-block;
    margin-right: 6px;
    box-shadow: 0 0 6px #16a34a;
}

/* ── Workspace Entry Cards (01, 02, 03) ── */
.workspace-entry > a {
    position: relative;
    padding: 22px 24px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.workspace-entry > a::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.workspace-entry > a:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    box-shadow: var(--shadow-md);
}
.workspace-entry > a:hover::before {
    opacity: 1;
}
.workspace-entry span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    color: var(--brand-2);
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
html[data-theme="dark"] .workspace-entry span {
    color: var(--accent);
}
.workspace-entry strong {
    font-size: 1.16rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.workspace-entry p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-top: 8px;
}

/* ── Study Dashboard Compact ── */
.study-dashboard.study-dashboard-compact {
    border-radius: 16px;
    border: 1.5px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    padding: 14px 18px;
}
.study-dashboard-compact .study-stat {
    border-radius: 10px;
    padding: 8px 14px;
    transition: background-color var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.study-dashboard-compact .study-stat:hover {
    background: var(--home-hover);
    transform: translateY(-1px);
}
.study-dashboard-compact .study-stat:active {
    transform: scale(0.97);
}
.study-dashboard-compact .study-stat strong {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.study-dashboard-compact .study-stat span {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ink-soft);
}

/* ── Presentation Cards Grid & Card ── */
.cp-grid {
    gap: 12px;
}
.cp-grid .cp-card {
    border: 1.5px solid var(--line);
    border-radius: 15px;
    padding: 16px 18px;
    min-height: 98px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.cp-grid .cp-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    box-shadow: var(--shadow-md);
}
.cp-grid .cp-card:active {
    transform: scale(0.985);
}
.cp-card .cp-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}
.cp-grid .cp-card:hover .cp-ico {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.2);
}
.cp-grid .cp-card h3 {
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.cp-grid .cp-card .cp-count {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    color: var(--ink-soft);
}
.cp-grid .cp-card:hover .cp-count {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    color: var(--brand-2);
}
html[data-theme="dark"] .cp-grid .cp-card:hover .cp-count {
    color: var(--accent);
}
.cp-grid .cp-reviewed, .cp-grid .cp-saved {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
html[data-theme="dark"] .cp-grid .cp-reviewed,
html[data-theme="dark"] .cp-grid .cp-saved {
    color: var(--accent);
}

/* ── Section Cards (Clinical Presentation Detail) ── */
.section-card {
    border: 1.5px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    background: var(--card);
    transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.section-card:hover {
    border-color: var(--hover-line);
    box-shadow: var(--shadow);
}
.sec-head {
    font-weight: 700;
    letter-spacing: -0.015em;
    font-size: 1.02rem;
    padding: 16px 22px;
    min-height: 56px;
}
.sec-head .arrow {
    transition: transform 0.2s ease;
    font-size: 0.75rem;
    font-weight: 800;
}
.section-card.closed .sec-head .arrow {
    transform: rotate(-90deg);
}

/* ── Diagnostic Cards inside Don't Miss ── */
.dx-card {
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: 16px 18px;
    background: var(--card);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.dx-card:hover {
    transform: translateX(3px);
    border-color: var(--hover-line);
}
.dx-card.sev-critical {
    border-left: 4px solid var(--critical);
    background: color-mix(in srgb, var(--critical) 4%, var(--card));
}
.dx-card.sev-emergent {
    border-left: 4px solid var(--emergent);
    background: color-mix(in srgb, var(--emergent) 4%, var(--card));
}
.dx-card.sev-common {
    border-left: 4px solid var(--common);
    background: color-mix(in srgb, var(--common) 4%, var(--card));
}
.dx-card h3, .dx-card h4 {
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.4;
    color: var(--ink);
}
.sev-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
}

/* ── Red Flag Items Checklist ── */
.rf-box {
    border-radius: 14px;
    border: 1.5px solid var(--critical-line);
    background: color-mix(in srgb, var(--critical) 3%, var(--card));
    padding: 18px;
}
.rf-item {
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--card);
    padding: 12px 14px;
    margin-bottom: 6px;
    transition: all 0.15s ease;
    cursor: pointer;
}
.rf-item:hover {
    border-color: var(--critical-line);
    background: var(--home-hover);
}
.rf-item:has(input:checked) {
    background: color-mix(in srgb, var(--critical) 8%, var(--card));
    border-color: var(--critical);
    font-weight: 650;
}
.rf-tools button {
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.78rem;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* ── Pearls & Pitfalls ── */
.pp-box.pearls {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
    border-left: 4px solid var(--accent);
    padding: 18px 20px;
}
.pp-box.pitfalls {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
    background: color-mix(in srgb, var(--gold) 6%, var(--card));
    border-left: 4px solid var(--gold);
    padding: 18px 20px;
}

/* ── Disposition Columns ── */
.disp-col {
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: 16px 18px;
    background: var(--card);
    box-shadow: var(--shadow-xs);
}
.disp-col.d-discharge {
    border-left: 4px solid #16a34a;
    background: color-mix(in srgb, #16a34a 5%, var(--card));
}
.disp-col.d-admit {
    border-left: 4px solid #ea580c;
    background: color-mix(in srgb, #ea580c 5%, var(--card));
}
.disp-col.d-icu {
    border-left: 4px solid #dc2626;
    background: color-mix(in srgb, #dc2626 5%, var(--card));
}
.disp-col h3, .disp-col h4 {
    font-weight: 750;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

/* ── Back button in Hero ── */
.cp-hero .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}
.cp-hero .back-btn:hover {
    background: var(--home-hover);
    color: var(--brand-2);
    border-color: var(--hover-line);
    transform: translateX(-2px);
}

/* ── Disclaimer Modal Finesse ── */
.disclaimer-overlay {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.disclaimer-modal {
    border-radius: 20px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-float);
    background: var(--card);
}
.disclaimer-btn {
    background: linear-gradient(135deg, var(--brand-2) 0%, var(--accent) 100%);
    border-radius: 12px;
    font-weight: 750;
    font-size: 0.95rem;
    box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.35);
    transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.disclaimer-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(var(--shadow-rgb), 0.45);
}
.disclaimer-btn:not(:disabled):active {
    transform: scale(0.98);
}

/* ══════════════════════════════════════════════════════════════════
   iOS 18 Standard — Unified Layouts, Squircles & Tactile Refinement
   ══════════════════════════════════════════════════════════════════ */
.sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    font-weight: 700;
    letter-spacing: -0.015em;
    font-size: 1.02rem;
    padding: 14px 20px;
    min-height: 56px;
    background: var(--card);
    border: none;
    text-align: start;
    cursor: pointer;
    color: var(--ink);
    transition: background var(--transition-fast) ease;
}
.sec-head:hover {
    background: var(--home-hover);
}
.sec-head .sec-title {
    flex: 1;
    min-width: 0;
}
.sec-head .sec-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: none;
    background: var(--surface-2, rgba(0, 0, 0, 0.05));
    color: var(--brand-2);
    transition: transform var(--transition-fast) ease, background var(--transition-fast) ease;
}
.sec-head .sec-ico svg {
    width: 17px;
    height: 17px;
    display: block;
    stroke: currentColor;
    stroke-width: 2.1;
}

/* iOS 18 squircle semantic tints */
.section-card[data-section="dont-miss"] .sec-ico {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.section-card[data-section="red-flags"] .sec-ico,
.section-card[data-section="ecg-red-flags"] .sec-ico {
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
}
.section-card[data-section="how-to-think"] .sec-ico,
.section-card[data-section="ecg-how"] .sec-ico {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}
.section-card[data-section="history"] .sec-ico {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}
.section-card[data-section="exam"] .sec-ico {
    background: rgba(20, 184, 166, 0.12);
    color: #0d9488;
}
.section-card[data-section="workup"] .sec-ico {
    background: rgba(168, 85, 247, 0.12);
    color: #9333ea;
}
.section-card[data-section="disposition"] .sec-ico {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.section-card[data-section="pearls-pitfalls"] .sec-ico {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}
.section-card[data-section="see-also"] .sec-ico,
.section-card[data-section="references"] .sec-ico,
.section-card[data-section="ecg-patterns"] .sec-ico,
.section-card[data-section="ecg-references"] .sec-ico,
.section-card[data-section="ecg-related"] .sec-ico {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}
html[data-theme="dark"] .section-card[data-section="dont-miss"] .sec-ico {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}
html[data-theme="dark"] .section-card[data-section="red-flags"] .sec-ico,
html[data-theme="dark"] .section-card[data-section="ecg-red-flags"] .sec-ico {
    background: rgba(244, 63, 94, 0.22);
    color: #fda4af;
}
html[data-theme="dark"] .section-card[data-section="how-to-think"] .sec-ico,
html[data-theme="dark"] .section-card[data-section="ecg-how"] .sec-ico {
    background: rgba(99, 102, 241, 0.22);
    color: #a5b4fc;
}
html[data-theme="dark"] .section-card[data-section="history"] .sec-ico {
    background: rgba(14, 165, 233, 0.22);
    color: #7dd3fc;
}
html[data-theme="dark"] .section-card[data-section="exam"] .sec-ico {
    background: rgba(20, 184, 166, 0.22);
    color: #5eead4;
}
html[data-theme="dark"] .section-card[data-section="workup"] .sec-ico {
    background: rgba(168, 85, 247, 0.22);
    color: #d8b4fe;
}
html[data-theme="dark"] .section-card[data-section="disposition"] .sec-ico {
    background: rgba(16, 185, 129, 0.22);
    color: #6ee7b7;
}
html[data-theme="dark"] .section-card[data-section="pearls-pitfalls"] .sec-ico {
    background: rgba(245, 158, 11, 0.22);
    color: #fde047;
}
html[data-theme="dark"] .section-card[data-section="see-also"] .sec-ico,
html[data-theme="dark"] .section-card[data-section="references"] .sec-ico,
html[data-theme="dark"] .section-card[data-section="ecg-patterns"] .sec-ico,
html[data-theme="dark"] .section-card[data-section="ecg-references"] .sec-ico,
html[data-theme="dark"] .section-card[data-section="ecg-related"] .sec-ico {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

/* ── Rotating Chevron ── */
.sec-head .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-soft);
    margin-left: auto;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background var(--transition-fast) ease;
}
.sec-head .arrow .sec-chevron,
.sec-head .arrow svg {
    width: 14px;
    height: 14px;
    display: block;
    stroke: currentColor;
}
.section-card.closed .sec-head .arrow {
    transform: rotate(-90deg);
}

/* ── Save Topic Button & Badge ── */
.save-topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-fast) ease;
}
.save-topic:hover {
    border-color: var(--hover-line);
    background: var(--home-hover);
}
.save-topic:active {
    transform: scale(0.97);
}
.save-topic.active {
    color: #d97706;
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.35);
}
html[data-theme="dark"] .save-topic.active {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.45);
}
.save-topic .save-ico {
    display: block;
    flex: none;
}
.save-topic .save-ico.filled {
    color: #f59e0b;
}
.cp-saved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #d97706;
}
.cp-saved .save-ico.filled {
    width: 13px;
    height: 13px;
    color: #f59e0b;
}

/* ── Harmonized Grouped Sheet Surfaces & Rhythm ── */
.shift-sheet,
.study-page,
.learning-workspace {
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    padding: clamp(18px, 3vw, 28px);
}
.shift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.shift-grid section {
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--bg);
    padding: 16px 18px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
}
.shift-grid section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.96rem;
    font-weight: 750;
    margin-bottom: 12px;
}
.shift-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--brand-2);
    font-size: 0.76rem;
    font-weight: 750;
    flex: none;
}
.shift-grid section.shift-red {
    border-left: 4px solid var(--critical);
    background: color-mix(in srgb, var(--critical) 4%, var(--card));
}
.shift-grid section.shift-red .shift-step-n {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.shift-grid section.shift-crit {
    border-left: 4px solid var(--emergent);
    background: color-mix(in srgb, var(--emergent) 4%, var(--card));
}
.shift-grid section.shift-crit .shift-step-n {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}
.shift-grid section.shift-disposition {
    border-left: 4px solid var(--common);
    background: color-mix(in srgb, var(--common) 4%, var(--card));
}

/* ── Content grids optimal filling without wasted space ── */
.cluster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.cluster {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    padding: 14px 16px;
    box-shadow: var(--shadow-xs);
}
.wu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.wu-col {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    padding: 14px 16px;
    box-shadow: var(--shadow-xs);
}
.disp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.pp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

/* ══════════════════════════════════════════════════════════════════
   Apple iOS 27 Design System — Refractive Liquid Glass & Haptics
   ──────────────────────────────────────────────────────────────────
   Ultra-modern floating glassmorphism, continuous squircle curvature,
   chromatic aura glow, isolated navigation hierarchy, and tactile feel.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Isolated Top Navigation Row ── */
.cp-hero-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 12px;
    padding: 2px 2px;
}
.ios-nav-back,
.cp-hero-nav .back-btn,
.study-page-head .back-btn,
.shift-topline .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px 7px 11px;
    border-radius: 999px;
    background: rgba(var(--card-rgb, 255, 255, 255), 0.72);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    backdrop-filter: blur(24px) saturate(190%);
    border: 1px solid var(--line);
    color: var(--brand-2);
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    margin: 0;
}
.ios-nav-back .ios-back-ico,
.back-btn .ios-back-ico {
    flex: none;
    color: currentColor;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ios-nav-back:hover,
.cp-hero-nav .back-btn:hover,
.study-page-head .back-btn:hover,
.shift-topline .back-btn:hover {
    background: var(--card);
    border-color: var(--hover-line);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.ios-nav-back:hover .ios-back-ico,
.back-btn:hover .ios-back-ico {
    transform: translateX(-2px);
}
.ios-nav-back:active,
.back-btn:active {
    transform: scale(0.96);
}

/* ── 2. Unified Hero Card: Refractive Liquid Glass ── */
.cp-hero {
    position: relative;
    margin-bottom: 22px;
    padding: 24px 28px 22px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(140deg,
        rgba(var(--cat-rgb, var(--accent-rgb)), 0.15) 0%,
        rgba(var(--cat-rgb, var(--accent-rgb)), 0.03) 50%,
        rgba(var(--card-rgb, 255, 255, 255), 0.85) 90%),
        var(--card);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 28%, var(--line));
    box-shadow:
        0 16px 42px -10px rgba(var(--cat-rgb, var(--accent-rgb)), 0.24),
        0 2px 8px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.cp-hero::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, rgb(var(--cat, 15, 157, 118)) 0%, color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 55%, var(--accent-2)) 100%);
    opacity: 0.9;
}
html[data-theme="dark"] .cp-hero {
    background: linear-gradient(140deg,
        rgba(var(--cat-rgb, var(--accent-rgb)), 0.22) 0%,
        rgba(var(--cat-rgb, var(--accent-rgb)), 0.06) 55%,
        rgba(26, 30, 36, 0.85) 95%),
        var(--card);
    border-color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 40%, rgba(255, 255, 255, 0.15));
    box-shadow:
        0 18px 46px -10px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

/* ── 3. Hero Content Geometry: Squircle + Title Integration ── */
.cp-hero-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
}
.cp-hero .cp-ico-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    margin: 0;
    flex: none;
    border-radius: 18px;
    background: linear-gradient(135deg,
        rgba(var(--cat-rgb, var(--accent-rgb)), 0.28) 0%,
        rgba(var(--cat-rgb, var(--accent-rgb)), 0.12) 100%);
    border: 1px solid color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 45%, transparent);
    box-shadow:
        0 8px 22px -3px rgba(var(--cat-rgb, var(--accent-rgb)), 0.36),
        inset 0 1px 1px rgba(255, 255, 255, 0.65);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cp-hero:hover .cp-ico-lg {
    transform: scale(1.05) rotate(-1deg);
}
.cp-hero .cp-ico-lg .color-ico,
.cp-hero .cp-ico-lg .mono-ico {
    width: 36px;
    height: 36px;
}
.cp-hero-text {
    flex: 1;
    min-width: 0;
}
.cp-hero-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.cp-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(var(--cat-rgb, var(--accent-rgb)), 0.15);
    color: var(--brand-2);
    border: 1px solid rgba(var(--cat-rgb, var(--accent-rgb)), 0.30);
}
.cp-cat-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.cp-hero h1 {
    font-size: clamp(1.7rem, 4vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.038em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0;
}
.cp-hero .tag {
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
    max-width: 70ch;
}
.cp-hero .ecg-subhead {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-top: 6px;
}

/* ── 4. Student Learning & Quick Action Glass Bar ── */
.student-intro {
    border-radius: 20px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06) 0%, var(--card) 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
    padding: 18px 22px;
    margin: 16px 0 20px;
}
.student-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 14px;
    flex-wrap: wrap;
}
.student-actions strong {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    font-weight: 750;
    margin-right: 2px;
}
.student-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 650;
    text-decoration: none;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease;
}
.student-actions a:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.student-actions a:active {
    transform: scale(0.97);
}
.student-actions a:first-of-type {
    background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.38);
}
.student-actions a:first-of-type:hover {
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.48);
}

/* ── 5. Responsive Perfection for Mobile (e.g. 438px) ── */
@media (max-width: 600px) {
    .cp-hero {
        padding: 16px 18px;
        border-radius: 18px;
        margin-bottom: 16px;
    }
    .cp-hero-inner {
        gap: 14px;
        margin-bottom: 10px;
    }
    .cp-hero .cp-ico-lg {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }
    .cp-hero .cp-ico-lg .color-ico,
    .cp-hero .cp-ico-lg .mono-ico {
        width: 32px;
        height: 32px;
    }
    .cp-hero h1 {
        font-size: 1.58rem;
    }
    .cp-hero .tag {
        font-size: 0.90rem;
    }
    .student-actions a {
        flex: 1 1 calc(50% - 6px);
        min-height: 42px;
        padding-inline: 12px;
        text-align: center;
        font-size: 0.84rem;
    }
    .ios-nav-back,
    .cp-hero-nav .back-btn {
        min-height: 36px;
        padding: 5px 13px 5px 9px;
        font-size: 0.80rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Apple iOS 27 Complete System — Harmonizing All 5 Header Pages
   ──────────────────────────────────────────────────────────────────
   1 · Topbar & Primary Nav (Segmented Glass Island)
   2 · Page 1: Presentations (Home Hero, Entry Cards & Library)
   3 · Page 2: Practice (Simulated Clinical Workspace & Study Page)
   4 · Page 3: ECG Guide (Step Navigation, Rail & Patterns)
   5 · Page 4: ECG Explorer (Floating Glass Controls & Paper Canvas)
   6 · Page 5: Shift View (Focused Liquid Glass Clinical Sheet)
   ══════════════════════════════════════════════════════════════════ */

/* ── I. Topbar & Primary Navigation (Segmented Glass Island) ── */
.topbar {
    background: rgba(var(--card-rgb, 255, 255, 255), 0.76) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    border-bottom: 1px solid var(--line) !important;
}
html[data-theme="dark"] .topbar {
    background: rgba(18, 21, 26, 0.78) !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
/* Desktop Primary Nav (Horizontal Glass Segmented Island) */
@media (min-width: 921px) {
    .primary-nav {
        display: inline-flex !important;
        align-items: center !important;
        background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
        border-radius: 999px !important;
        padding: 3px !important;
        gap: 3px !important;
    }
    .primary-nav .home-btn {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        padding: 7px 14px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        color: var(--ink-soft) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;
        gap: 6px !important;
        width: auto !important;
        height: auto !important;
        min-height: 38px !important;
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .primary-nav .home-btn .header-label {
        display: inline !important;
    }
    .primary-nav .home-btn:hover {
        background: color-mix(in srgb, var(--ink) 6%, transparent) !important;
        color: var(--ink) !important;
        transform: translateY(-1px);
    }
    .primary-nav .home-btn:active {
        transform: scale(0.96) !important;
    }
    .primary-nav .home-btn.active-nav,
    .primary-nav .home-btn[aria-current="page"],
    html[data-theme] .primary-nav .home-btn.active-nav {
        background: var(--card) !important;
        color: var(--brand-2) !important;
        border-color: color-mix(in srgb, var(--brand-2) 24%, transparent) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--brand-2) 20%, transparent) !important;
        font-weight: 750 !important;
    }
    html[data-theme="dark"] .primary-nav .home-btn.active-nav,
    html[data-theme="dark"] .primary-nav .home-btn[aria-current="page"] {
        background: var(--card-elevated, #242930) !important;
        color: var(--accent) !important;
        border-color: rgba(var(--accent-rgb), 0.35) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--accent-rgb), 0.35) !important;
        font-weight: 750 !important;
    }
}

/* Mobile & Tablet Primary Nav (iOS 27 Liquid Glass 5-Column Segmented Tab Bar) */
@media (max-width: 920px) {
    .topbar {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        grid-template-rows: 44px auto !important;
        padding: max(10px, env(safe-area-inset-top, 10px)) 12px 10px !important;
        gap: 8px 8px !important;
        align-items: center !important;
    }
    .topbar > .burger {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
        color: var(--ink) !important;
        box-shadow: none !important;
        padding: 0 !important;
        cursor: pointer !important;
    }
    .topbar > .searchwrap {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        max-width: none !important;
        margin: 0 !important;
    }
    .topbar > .tools-toggle {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
        color: var(--ink) !important;
        box-shadow: none !important;
        padding: 0 !important;
        cursor: pointer !important;
    }
    .topbar > .tools-toggle .header-label {
        display: none !important;
    }
    .topbar > .primary-nav {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: color-mix(in srgb, var(--ink) 5%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
        border-radius: 16px !important;
        padding: 3px !important;
        gap: 2px !important;
        align-items: stretch !important;
        -webkit-backdrop-filter: blur(20px) !important;
        backdrop-filter: blur(20px) !important;
    }
    .topbar > .primary-nav > :is(#homeBtn, #studyBtn, #shiftBtn, #ecgBtn, #explorerBtn),
    .primary-nav .home-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 52px !important;
        padding: 4px 1px !important;
        border-radius: 12px !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        color: var(--ink-soft) !important;
        box-shadow: none !important;
        cursor: pointer !important;
        flex: 1 1 0% !important;
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .topbar > .primary-nav .ui-icon {
        display: block !important;
        width: 19px !important;
        height: 19px !important;
        flex: none !important;
        stroke-width: 1.8 !important;
    }
    .topbar > .primary-nav .header-label {
        display: block !important;
        font-size: min(0.66rem, 11px) !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.01em !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .topbar > .primary-nav > :is(#homeBtn, #studyBtn, #shiftBtn, #ecgBtn, #explorerBtn):active {
        transform: scale(0.95) !important;
    }
    .topbar > .primary-nav > :is(#homeBtn, #studyBtn, #shiftBtn, #ecgBtn, #explorerBtn).active-nav,
    .topbar > .primary-nav > :is(#homeBtn, #studyBtn, #shiftBtn, #ecgBtn, #explorerBtn)[aria-current="page"],
    html[data-theme] .topbar > .primary-nav > :is(#homeBtn, #studyBtn, #shiftBtn, #ecgBtn, #explorerBtn).active-nav {
        background: var(--card) !important;
        color: var(--brand-2) !important;
        border-color: color-mix(in srgb, var(--brand-2) 24%, transparent) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--brand-2) 20%, transparent) !important;
        font-weight: 750 !important;
    }
    html[data-theme="dark"] .topbar > .primary-nav > :is(#homeBtn, #studyBtn, #shiftBtn, #ecgBtn, #explorerBtn).active-nav,
    html[data-theme="dark"] .topbar > .primary-nav > :is(#homeBtn, #studyBtn, #shiftBtn, #ecgBtn, #explorerBtn)[aria-current="page"] {
        background: var(--card-elevated, #242930) !important;
        color: var(--accent) !important;
        border-color: rgba(var(--accent-rgb), 0.35) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--accent-rgb), 0.35) !important;
        font-weight: 750 !important;
    }
}

/* ── II. Page 1: Presentations (Home Hero & Entry Cards) ── */
.home-intro {
    position: relative !important;
    margin-bottom: 26px !important;
    padding: clamp(24px, 4vw, 36px) clamp(22px, 4vw, 38px) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: linear-gradient(140deg,
        rgba(var(--accent-rgb), 0.14) 0%,
        rgba(var(--accent-rgb), 0.03) 50%,
        rgba(var(--card-rgb, 255, 255, 255), 0.88) 95%),
        var(--card) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)) !important;
    box-shadow:
        0 18px 46px -10px rgba(var(--accent-rgb), 0.22),
        0 2px 8px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.home-intro::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset-block-start: 0 !important;
    inset-inline: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%) !important;
    opacity: 0.9 !important;
}
html[data-theme="dark"] .home-intro {
    background: linear-gradient(140deg,
        rgba(var(--accent-rgb), 0.22) 0%,
        rgba(var(--accent-rgb), 0.05) 55%,
        rgba(26, 30, 36, 0.88) 95%),
        var(--card) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, rgba(255, 255, 255, 0.15)) !important;
    box-shadow:
        0 18px 46px -10px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}
.home-intro > span.study-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 4px 13px !important;
    border-radius: 999px !important;
    background: rgba(var(--accent-rgb), 0.15) !important;
    color: var(--brand-2) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.28) !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}
.home-intro > span.study-kicker::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    box-shadow: 0 0 8px var(--accent) !important;
}
.home-intro h1 {
    font-size: clamp(2rem, 4vw, 2.9rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.12 !important;
    color: var(--ink) !important;
    margin: 12px 0 14px !important;
    max-width: 20ch !important;
}
.home-intro p {
    font-size: 1.02rem !important;
    line-height: 1.62 !important;
    color: var(--ink-soft) !important;
    max-width: 58ch !important;
    margin: 0 0 20px !important;
}
.home-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 18px !important;
    flex-wrap: wrap !important;
}
.home-actions .home-start {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 46px !important;
    padding: 10px 24px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 100%) !important;
    color: #fff !important;
    font-size: 0.90rem !important;
    font-weight: 700 !important;
    border: 0 !important;
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.38) !important;
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
}
.home-actions .home-start:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.48) !important;
}
.home-actions .home-start:active {
    transform: scale(0.96) !important;
}
.home-actions .home-ecg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 46px !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    background: rgba(var(--card-rgb, 255, 255, 255), 0.72) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    font-size: 0.90rem !important;
    font-weight: 650 !important;
    box-shadow: var(--shadow-xs) !important;
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, border-color 0.15s ease !important;
}
.home-actions .home-ecg:hover {
    background: var(--card) !important;
    border-color: var(--hover-line) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-sm) !important;
}
.home-actions .home-ecg:active {
    transform: scale(0.96) !important;
}
.home-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px 12px !important;
    margin-top: 20px !important;
    padding-top: 14px !important;
    border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent) !important;
    flex-wrap: wrap !important;
}
.home-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    background: rgba(var(--card-rgb, 255, 255, 255), 0.60) !important;
    border: 1px solid var(--line) !important;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
    color: var(--ink-soft) !important;
    backdrop-filter: blur(12px) !important;
}

/* ── 3 Workspace Entry Pathway Cards ── */
.workspace-entry {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    margin: 22px 0 28px !important;
}
.workspace-entry > a {
    display: block !important;
    padding: 22px 24px !important;
    border-radius: 20px !important;
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-sm) !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.2s ease !important;
}
.workspace-entry > a:hover {
    transform: translateY(-3px) scale(1.008) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: var(--hover-line) !important;
}
.workspace-entry > a:active {
    transform: scale(0.98) !important;
}
.workspace-entry > a > span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    background: rgba(var(--accent-rgb), 0.12) !important;
    color: var(--brand-2) !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}
.workspace-entry > a > strong {
    display: block !important;
    font-size: 1.15rem !important;
    font-weight: 750 !important;
    letter-spacing: -0.025em !important;
    color: var(--ink) !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}
.workspace-entry > a > p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: var(--ink-soft) !important;
    margin: 0 !important;
}

/* ── III. Page 2: Practice & Learning Workspace ── */
.learning-workspace,
.study-page {
    max-width: 1040px !important;
    margin: 0 auto !important;
}
@media (min-width: 921px) {
    .learning-workspace,
    .study-page {
        border-radius: 24px !important;
        background: linear-gradient(140deg,
            rgba(var(--accent-rgb), 0.08) 0%,
            rgba(var(--accent-rgb), 0.02) 50%,
            rgba(var(--card-rgb, 255, 255, 255), 0.88) 95%),
            var(--card) !important;
        -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
        backdrop-filter: blur(28px) saturate(200%) !important;
        border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)) !important;
        box-shadow:
            0 18px 46px -10px rgba(var(--accent-rgb), 0.16),
            0 2px 8px rgba(0, 0, 0, 0.03),
            inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        padding: clamp(24px, 4vw, 36px) !important;
    }
    html[data-theme="dark"] .learning-workspace,
    html[data-theme="dark"] .study-page {
        background: linear-gradient(140deg,
            rgba(var(--accent-rgb), 0.18) 0%,
            rgba(var(--accent-rgb), 0.04) 55%,
            rgba(26, 30, 36, 0.88) 95%),
            var(--card) !important;
        border-color: color-mix(in srgb, var(--accent) 35%, rgba(255, 255, 255, 0.12)) !important;
        box-shadow:
            0 18px 46px -10px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
    }
}
@media (max-width: 920px) {
    .learning-workspace,
    .study-page {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}
.workspace-hero-nav {
    margin-bottom: 12px !important;
}
.workspace-tabs,
.study-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 4px !important;
    padding: 4px !important;
    background: color-mix(in srgb, var(--ink) 5%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
    border-radius: 14px !important;
    margin: 14px 0 20px !important;
}
.workspace-tabs::-webkit-scrollbar,
.study-tabs::-webkit-scrollbar {
    display: none !important;
}
.workspace-tabs a,
.study-tabs button {
    flex: 1 1 0% !important;
    min-width: max-content !important;
    padding: 9px 16px !important;
    border-radius: 11px !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    color: var(--ink-soft) !important;
    text-decoration: none !important;
    border: 0 !important;
    background: transparent !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
}
.workspace-tabs a:hover,
.study-tabs button:hover {
    color: var(--ink) !important;
}
.workspace-tabs a:active,
.study-tabs button:active {
    transform: scale(0.96) !important;
}
.workspace-tabs a[aria-current="page"],
.study-tabs button.active,
.study-tabs button[aria-current="page"] {
    background: var(--card) !important;
    color: var(--brand-2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--brand-2) 18%, transparent) !important;
    font-weight: 750 !important;
}
html[data-theme="dark"] .workspace-tabs a[aria-current="page"],
html[data-theme="dark"] .study-tabs button.active,
html[data-theme="dark"] .study-tabs button[aria-current="page"] {
    background: var(--card-elevated, #242930) !important;
    color: var(--accent) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--accent-rgb), 0.3) !important;
}

/* Practice Filter Bar & Session Note */
.workspace-filter-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 16px 0 10px !important;
}
.workspace-filter-bar .filter-label {
    font-size: 0.76rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--ink-soft) !important;
    white-space: nowrap !important;
}
.workspace-filter-bar .select-wrap {
    position: relative !important;
    flex: 1 !important;
    max-width: 260px !important;
}
.workspace-filter-bar select {
    width: 100% !important;
    padding: 9px 36px 9px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    background: var(--card) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s ease !important;
}
.workspace-filter-bar select:focus {
    border-color: var(--brand-2) !important;
    outline: none !important;
}
.workspace-filter-bar .select-arrow {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    pointer-events: none !important;
    stroke: var(--ink-soft) !important;
}
.workspace-session-note {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 0.76rem !important;
    color: var(--ink-soft) !important;
    margin: 6px 0 18px !important;
    line-height: 1.4 !important;
}
.workspace-session-note .ui-icon {
    width: 15px !important;
    height: 15px !important;
    flex: none !important;
    stroke: var(--brand-2) !important;
}

/* Practice Evolving Case Cards */
.workspace-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 14px !important;
    margin: 14px 0 24px !important;
}
@media (max-width: 700px) {
    .workspace-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .workspace-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    .workspace-filter-bar .select-wrap {
        max-width: 100% !important;
    }
}
.workspace-card {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 20px !important;
    border: 1px solid var(--line) !important;
    background: rgba(var(--card-rgb, 255, 255, 255), 0.85) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    padding: 18px 20px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    min-width: 0 !important;
}
html[data-theme="dark"] .workspace-card {
    background: rgba(26, 30, 36, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.workspace-card:hover {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, var(--brand-2) 35%, var(--line)) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}
.workspace-card:active {
    transform: scale(0.98) !important;
}
.workspace-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}
.workspace-card .study-kicker {
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.06em !important;
    color: var(--brand-2) !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    background: rgba(var(--accent-rgb), 0.12) !important;
    margin: 0 !important;
}
.workspace-card .case-badge {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: var(--ink-soft) !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--ink) 6%, transparent) !important;
    white-space: nowrap !important;
}
.workspace-card .case-badge.badge-progress {
    background: rgba(var(--accent-rgb), 0.15) !important;
    color: var(--brand-2) !important;
    font-weight: 700 !important;
}
.workspace-card .case-badge.badge-done {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #059669 !important;
    font-weight: 700 !important;
}
.workspace-card h2 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--ink) !important;
    margin: 4px 0 6px !important;
    line-height: 1.35 !important;
}
.workspace-card .case-desc {
    font-size: 0.82rem !important;
    color: var(--ink-soft) !important;
    line-height: 1.45 !important;
    margin: 0 0 14px !important;
}
.workspace-card .case-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--line) !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    color: var(--brand-2) !important;
}
.workspace-card .case-cta .cta-label {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}
.workspace-card .case-cta .cta-arrow {
    transition: transform 0.2s ease !important;
    font-size: 0.95rem !important;
}
.workspace-card:hover .cta-arrow {
    transform: translateX(3px) !important;
}
.workspace-card > span:last-child {
    text-decoration: none !important;
}

/* ── IV. Page 3: ECG Guide (Step Slider & Rails) ── */
/* The seven-step method is 1938px wide in a ~367px column, so it must scroll.
   Without a fade and a counter the remaining steps are simply invisible: the
   rail needs to look scrollable and state how much is left. */
.ecg-step-nav {
    display: flex !important;
    gap: 5px !important;
    padding: 5px !important;
    background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
    border-radius: 999px !important;
    margin: 16px 0 22px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Fade the trailing edge so a cut-off chip reads as "more", not as a bug. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.ecg-step-nav::-webkit-scrollbar {
    display: none;
}
.ecg-step-nav.at-end {
    -webkit-mask-image: none;
    mask-image: none;
}
.ecg-step-chip {
    padding: 7px 16px !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--ink-soft) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
}

/* Progress meter: shows how much of the step rail is still off-screen. */
.step-rail-meter {
    height: 3px;
    margin: -14px 6px 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    overflow: hidden;
}
.step-rail-meter > i {
    display: block;
    height: 100%;
    width: 22%;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 55%, transparent);
    transition: width 0.25s ease;
}
.ecg-step-chip:hover {
    background: var(--card) !important;
    color: var(--brand-2) !important;
    border-color: var(--line) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
.ecg-step-chip:active {
    transform: scale(0.96) !important;
}

/* ── V. Page 4: ECG Explorer (Glass Controls & Waveform Paper) ── */
.explorer-controls {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    border-radius: 18px !important;
    background: rgba(var(--card-rgb, 255, 255, 255), 0.78) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 16px !important;
}
.explorer-controls select {
    border-radius: 12px !important;
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    color: var(--ink) !important;
}
.ex-button {
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-weight: 650 !important;
    font-size: 0.82rem !important;
    border: 1px solid var(--line) !important;
    background: var(--card) !important;
    color: var(--ink) !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-xs) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
}
.ex-button:hover {
    transform: translateY(-1px) !important;
    border-color: var(--hover-line) !important;
    box-shadow: var(--shadow-sm) !important;
}
.ex-button:active {
    transform: scale(0.96) !important;
}
.ex-primary,
.explorer-heading > .ex-button {
    background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.35) !important;
}

/* ── VI. Page 5: Shift View (Focused Liquid Glass Sheet) ── */
.shift-sheet {
    border-radius: 24px !important;
    background: linear-gradient(140deg,
        rgba(var(--cat-rgb, var(--accent-rgb)), 0.15) 0%,
        rgba(var(--cat-rgb, var(--accent-rgb)), 0.03) 50%,
        rgba(var(--card-rgb, 255, 255, 255), 0.88) 95%),
        var(--card) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1px solid color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 30%, var(--line)) !important;
    box-shadow:
        0 18px 46px -10px rgba(var(--cat-rgb, var(--accent-rgb)), 0.24),
        0 2px 8px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    padding: clamp(22px, 4vw, 36px) !important;
}
html[data-theme="dark"] .shift-sheet {
    background: linear-gradient(140deg,
        rgba(var(--cat-rgb, var(--accent-rgb)), 0.22) 0%,
        rgba(var(--cat-rgb, var(--accent-rgb)), 0.05) 55%,
        rgba(26, 30, 36, 0.88) 95%),
        var(--card) !important;
    border-color: color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 40%, rgba(255, 255, 255, 0.15)) !important;
    box-shadow:
        0 18px 46px -10px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}
.shift-topline {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap !important;
}
.shift-topline select {
    border-radius: 12px !important;
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: var(--ink) !important;
}
.shift-warning {
    border-radius: 14px !important;
    background: rgba(var(--accent-rgb), 0.10) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.24) !important;
    color: var(--ink) !important;
    padding: 12px 18px !important;
    font-size: 0.84rem !important;
    font-weight: 550 !important;
    margin-bottom: 18px !important;
}
.shift-grid section {
    border-radius: 18px !important;
    border: 1px solid var(--line) !important;
    background: var(--card) !important;
    padding: 18px 20px !important;
    box-shadow: var(--shadow-xs) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.shift-grid section:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-sm) !important;
}
.shift-step-n {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 0.80rem !important;
}

/* ── VII. Mobile UX Refinement (Apple iOS 27 Ergonomics & Space Optimization) ── */
@media (max-width: 700px) {
    /* Stage & general viewports */
    .main .stage {
        padding: 14px 12px 32px !important;
        max-width: 100% !important;
    }

    /* Presentations (Home) */
    .home-intro {
        padding: 20px 16px !important;
        border-radius: 20px !important;
        margin-bottom: 18px !important;
    }
    .home-intro h1 {
        font-size: clamp(1.5rem, 5.5vw, 1.95rem) !important;
        line-height: 1.25 !important;
        margin: 10px 0 !important;
    }
    .home-intro p {
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
    }
    .home-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 18px !important;
    }
    .home-actions .home-cta,
    .home-actions .home-secondary-btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 48px !important;
        font-size: 0.88rem !important;
        border-radius: 14px !important;
    }
    .home-intro-stats {
        gap: 6px !important;
        margin-top: 16px !important;
        flex-wrap: wrap !important;
    }
    .home-intro-stat {
        font-size: 0.76rem !important;
        padding: 4px 10px !important;
    }

    /* Clinical presentation cards */
    .cp-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .cp-grid .cp-card {
        padding: 14px 16px !important;
        border-radius: 16px !important;
        min-height: 80px !important;
    }
    .cp-card .cp-ico {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
    }

    /* Topic Presentation detail view */
    .cp-hero {
        padding: 16px 14px !important;
        border-radius: 18px !important;
        margin-bottom: 14px !important;
    }
    .cp-hero-nav {
        margin-bottom: 12px !important;
    }
    .ios-nav-back {
        min-height: 42px !important;
        padding: 6px 14px !important;
        font-size: 0.84rem !important;
        border-radius: 999px !important;
    }
    .cp-hero h1 {
        font-size: clamp(1.45rem, 5vw, 1.85rem) !important;
        margin: 6px 0 !important;
    }
    .presentation-toc {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding-bottom: 6px !important;
        margin-bottom: 16px !important;
    }
    .presentation-toc::-webkit-scrollbar {
        display: none !important;
    }
    .section-jump {
        flex-shrink: 0 !important;
        padding: 7px 12px !important;
        font-size: 0.78rem !important;
        border-radius: 10px !important;
    }
    .section-card {
        border-radius: 16px !important;
        margin-bottom: 14px !important;
    }
    .sec-head {
        padding: 14px 16px !important;
        min-height: 52px !important;
        font-size: 0.95rem !important;
    }
    .sec-body {
        padding: 0 16px 16px !important;
    }

    /* Page 2: Practice workspace */
    .learning-workspace {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .study-page,
    .case-practice {
        border-radius: 18px !important;
        padding: 16px !important;
    }
    .quiz-options {
        display: grid !important;
        gap: 10px !important;
    }
    .quiz-option {
        min-height: 52px !important;
        padding: 12px 16px !important;
        border-radius: 14px !important;
        font-size: 0.88rem !important;
        font-weight: 550 !important;
        border: 1.5px solid var(--line) !important;
        background: var(--card) !important;
        color: var(--ink) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
        text-align: left !important;
        cursor: pointer !important;
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .quiz-option:active {
        transform: scale(0.98) !important;
    }
    .quiz-option.correct {
        background: rgba(16, 185, 129, 0.12) !important;
        border-color: #10b981 !important;
        color: #047857 !important;
        font-weight: 700 !important;
    }
    html[data-theme="dark"] .quiz-option.correct {
        background: rgba(16, 185, 129, 0.20) !important;
        color: #34d399 !important;
    }
    .quiz-option.incorrect {
        background: rgba(239, 68, 68, 0.12) !important;
        border-color: #ef4444 !important;
        color: #b91c1c !important;
        font-weight: 700 !important;
    }
    html[data-theme="dark"] .quiz-option.incorrect {
        background: rgba(239, 68, 68, 0.20) !important;
        color: #f87171 !important;
    }
    .case-update {
        border-radius: 16px !important;
        border: 1px solid var(--line) !important;
        border-left: 4px solid var(--brand-2) !important;
        background: var(--card) !important;
        padding: 16px 18px !important;
        margin: 14px 0 18px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    }
    .case-update strong {
        display: block !important;
        font-size: 0.76rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        color: var(--brand-2) !important;
        margin-bottom: 6px !important;
    }
    .workspace-feedback {
        border-radius: 16px !important;
        border: 1px solid var(--line) !important;
        border-left: 4px solid var(--brand-2) !important;
        background: var(--card) !important;
        padding: 18px !important;
        margin: 16px 0 !important;
    }
    .workspace-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 48px !important;
        padding: 12px 24px !important;
        border-radius: 14px !important;
        background: var(--brand) !important;
        color: var(--on-fill) !important;
        font-size: 0.90rem !important;
        font-weight: 700 !important;
        border: none !important;
        cursor: pointer !important;
        width: 100% !important;
        margin-top: 14px !important;
        box-shadow: 0 4px 14px rgba(var(--brand-rgb), 0.25) !important;
    }

    /* Page 3: ECG Guide */
    .ecg-hero {
        padding: 18px 16px !important;
        border-radius: 18px !important;
    }
    .ecg-step {
        border-radius: 16px !important;
        margin-bottom: 12px !important;
    }
    .ecg-wavebtns {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .ecg-wavebtn {
        flex: 1 1 30% !important;
        min-height: 42px !important;
        font-size: 0.78rem !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
    }

    /* Page 4: ECG Explorer */
    .explorer-heading h1 {
        font-size: 1.4rem !important;
    }
    .explorer-controls {
        padding: 12px !important;
        border-radius: 14px !important;
        gap: 8px !important;
    }
    .explorer-findings {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    /* Page 5: Shift View */
    .shift-sheet {
        padding: 16px 14px !important;
        border-radius: 18px !important;
    }
    .shift-topline {
        padding: 14px !important;
        border-radius: 14px !important;
    }
    .shift-grid section {
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }
}

/* ══════════ Apple iOS 27 Liquid Glass Bottom Tab Bar ══════════ */
.ios-tabbar {
    display: none;
}

@media (max-width: 920px) {
    .ios-tabbar {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* Sits above stage content and the topbar (90) but below every modal layer:
           side-backdrop 105, sidebar 110, toast 400, ecg-lightbox 500, skip-link 600,
           disclaimer-overlay 1000. Raising this value lets the bar float over
           blocking dialogs. */
        z-index: 100 !important;
        padding: 6px 12px calc(8px + env(safe-area-inset-bottom, 12px)) !important;
        pointer-events: none !important;
    }

    .ios-tabbar-inner {
        pointer-events: auto !important;
        max-width: 440px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-around;
            background: var(--glass-bg-bar);
        /* A light blur only: enough to soften scrolling content behind the bar
           without turning clinical tracings into a smear. */
        -webkit-backdrop-filter: blur(10px) saturate(120%);
        backdrop-filter: blur(10px) saturate(120%);
        border: 1px solid var(--glass-border-subtle, rgba(255, 255, 255, 0.1));
        box-shadow: 0 10px 36px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(255, 255, 255, 0.12) inset;
        border-radius: 26px;
        padding: 4px 6px;
        position: relative;
    }

    .tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 48px;
        padding: 5px 2px 3px;
        background: transparent;
        border: 0;
        color: var(--ink-soft);
        font-family: inherit;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        cursor: pointer;
        position: relative;
        transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1), color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        border-radius: 18px;
    }

    .tabbar-item:active {
        transform: scale(0.92);
    }

    .tabbar-icon {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
        transition: stroke 0.15s ease, transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1);
    }

    .tabbar-label {
        line-height: 1.1;
        transition: color 0.15s ease;
        white-space: nowrap;
    }

    /* "Presentations" is the widest label. Let the items shrink below their
       min-content width, then trim the type a little on the narrowest phones so
       no label wraps or spills outside the glass bar. */
    @media (max-width: 360px) {
        .tabbar-item {
            min-width: 0;
        }
        .tabbar-label {
            font-size: 0.58rem;
            letter-spacing: -0.02em;
        }
    }

    .tabbar-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        bottom: 2px;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* Active State */
    .tabbar-item.active,
    .tabbar-item.on-home {
        color: var(--accent) !important;
    }

    .tabbar-item.active .tabbar-icon,
    .tabbar-item.on-home .tabbar-icon {
        stroke: var(--accent) !important;
        transform: translateY(-1px);
    }

    .tabbar-item.active .tabbar-dot,
    .tabbar-item.on-home .tabbar-dot {
        background: var(--accent) !important;
        box-shadow: 0 0 6px var(--accent);
    }

    /* Shrink mobile topbar to single row: burger + search + settings */
    .topbar {
        grid-template-rows: 44px !important;
        min-height: auto !important;
        padding-bottom: 6px !important;
    }

    .topbar > .primary-nav {
        display: none !important;
    }

    /* Avoid content hidden behind tab bar */
    .main .stage {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 16px)) !important;
        scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 16px)) !important;
    }

    .foot {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 16px)) !important;
    }

    /* Float toasts above tab bar */
    .toast, #toast {
        bottom: calc(76px + env(safe-area-inset-bottom, 16px)) !important;
    }
}

@media print {
    .ios-tabbar {
        display: none !important;
    }
    /* A printed page box is narrower than 920px, so the mobile block above also
       matches in print and its !important tab-bar clearance would otherwise add
       blank space to the last sheet. Cancel it here. */
    .main .stage,
    .foot {
        padding-bottom: 0 !important;
    }
}

/* ══════════ Apple iOS 27 Liquid Glass Accordions & Glow ══════════ */
details > summary {
    list-style: none;
    position: relative;
    transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease;
    -webkit-tap-highlight-color: transparent;
}

details > summary::-webkit-details-marker {
    display: none;
}

.cp-card details > summary::after,
.guided-reasoning > summary::after,
.reference-firstpass > summary::after,
.ecg-pattern-index > summary::after,
.student-glossary > summary::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--transition-smooth) var(--ease-spring);
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.65;
}

.cp-card details[open] > summary::after,
.guided-reasoning[open] > summary::after,
.reference-firstpass[open] > summary::after,
.ecg-pattern-index[open] > summary::after,
.student-glossary[open] > summary::after {
    transform: rotate(45deg);
    opacity: 1;
}

.rf-box,
.ecg-redflags {
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.08), 0 0 1px rgba(220, 38, 38, 0.25) !important;
    backdrop-filter: blur(12px) !important;
}

.rf-item.is-checked,
.rf-item:has(input:checked) {
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.12) !important;
}

/* ══════════ Phase 3: Practice & Evolving Decisions Glass ══════════ */
.study-tabs,
.workspace-tabs {
    display: flex !important;
    background: var(--glass-bg-pill, rgba(0, 0, 0, 0.05)) !important;
    border: 1px solid var(--glass-border-subtle, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 14px !important;
    padding: 3px !important;
    gap: 2px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.study-tabs button,
.workspace-tabs a {
    flex: 1 1 auto !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    border-radius: 11px !important;
    border: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--ink-soft) !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
    white-space: nowrap !important;
}

.study-tabs button.active,
.workspace-tabs a.active,
.workspace-tabs a[aria-current="page"] {
    background: var(--card) !important;
    color: var(--ink) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

.workspace-stepper-wrap {
    margin: 12px 0 16px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--glass-bg-pill, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--glass-border-subtle, rgba(255, 255, 255, 0.08));
}

.stepper-track {
    height: 5px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}

.stepper-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.workspace-step {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--ink-soft);
    margin: 0 !important;
}

.workspace-result {
    border-radius: 18px !important;
    background: var(--glass-bg-card, rgba(30, 41, 59, 0.45)) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border-subtle, rgba(255, 255, 255, 0.1)) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    padding: 22px !important;
}

/* ══════════ Phase 5: Shift View High-Acuity Bands & Handover ══════════ */
.shift-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.shift-head-actions .handover-btn,
.shift-head-actions .review-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
    font-family: inherit;
    text-decoration: none;
    line-height: 1.2;
}

.shift-head-actions .handover-btn {
    color: var(--on-fill);
    background: var(--brand);
    border: 1px solid var(--brand);
    box-shadow: 0 2px 10px rgba(var(--brand-rgb, var(--accent-rgb)), 0.25);
}

.shift-head-actions .handover-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--brand-rgb, var(--accent-rgb)), 0.35);
}

.shift-head-actions .review-btn {
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
}

.shift-head-actions .review-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

html[data-theme="dark"] .shift-head-actions .review-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--ink);
}

.shift-head-actions .handover-btn:active,
.shift-head-actions .review-btn:active {
    transform: scale(0.96);
}

.shift-grid .shift-red {
    border-left: 4px solid var(--critical) !important;
    background: color-mix(in srgb, var(--critical) 5%, var(--card)) !important;
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.06) !important;
}

.shift-grid .shift-crit {
    border-left: 4px solid var(--emergent) !important;
    background: color-mix(in srgb, var(--emergent) 5%, var(--card)) !important;
}

.shift-grid .shift-disposition {
    border-left: 4px solid var(--common) !important;
    background: color-mix(in srgb, var(--common) 5%, var(--card)) !important;
}

/* ══════════════════════════════════════════════════════════════
   iOS 27 Liquid Glass: Native Emoji Badges & Practice Overhaul
   ══════════════════════════════════════════════════════════════ */
.ios-emoji-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1.45rem;
    font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cp-card:hover .ios-emoji-badge {
    transform: scale(1.12);
}
.cp-hero .cp-ico-lg .ios-emoji-badge {
    font-size: 2.1rem;
}
.sec-ico .ios-emoji-badge,
.sec-badge {
    font-size: 1.25rem;
}
.chip-ico .ios-emoji-badge {
    font-size: 0.95rem;
}
.side-item .ico .ios-emoji-badge {
    font-size: 1.15rem;
}
.res-ico .ios-emoji-badge {
    font-size: 1.15rem;
}
.study-topic-ico .ios-emoji-badge {
    font-size: 1.35rem;
}

/* Practice Filter Bar & Segmented Chips */
.workspace-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 12px;
    gap: 12px;
    flex-wrap: wrap;
}
.practice-filter-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px;
    max-width: 100%;
}
.practice-filter-chips::-webkit-scrollbar {
    display: none;
}
.practice-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--glass-card-bg, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--glass-card-border, rgba(255, 255, 255, 0.14));
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.practice-chip:hover {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.practice-chip.active {
    background: var(--brand-2, #0071e3);
    color: #ffffff !important;
    border-color: var(--brand-2, #0071e3);
    box-shadow: 0 4px 14px rgba(var(--accent-rgb, 0, 113, 227), 0.35);
    font-weight: 700;
}
html[data-theme="dark"] .practice-chip.active {
    background: var(--brand) !important;
    color: var(--on-fill) !important;
    border-color: var(--brand) !important;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35) !important;
}

/* Practice Case Cards */
.practice-case-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--glass-card-bg, var(--card));
    border: 1px solid var(--glass-card-border, var(--line));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--glass-card-shadow, var(--shadow-sm));
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
    color: inherit;
}
.practice-case-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}
.practice-case-card:active {
    transform: scale(0.985);
}
html[data-theme="dark"] .practice-case-card {
    background: rgba(26, 30, 36, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .practice-case-card:hover {
    border-color: rgba(var(--accent-rgb), 0.45) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5) !important;
}
.practice-domain-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.practice-card-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    font-size: 1.3rem;
    flex: none;
}
.evolving-case-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.practice-hero-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    font-size: 1.9rem;
    flex: none;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb, 0, 113, 227), 0.15);
}
.evolving-case-header h2 {
    margin: 0;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 750;
    letter-spacing: -0.02em;
}

/* Quiz Options tactile styling */
.evolving-case .quiz-options {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}
.evolving-case .quiz-option {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 13px 16px;
    border-radius: 14px;
    background: var(--card);
    border: 1.5px solid var(--line);
    font-size: 0.95rem;
    line-height: 1.4;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    width: 100%;
    color: var(--ink);
    box-shadow: var(--shadow-xs, 0 1px 3px rgba(0,0,0,0.04));
}
.evolving-case .option-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-weight: 750;
    font-size: 0.85rem;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink);
    flex: none;
    transition: all 0.18s ease;
}
.evolving-case .option-label {
    flex: 1;
    min-width: 0;
}
.evolving-case .quiz-option:hover:not(:disabled) {
    border-color: var(--brand-2, #0071e3);
    background: color-mix(in srgb, var(--brand-2, #0071e3) 6%, var(--card));
    transform: translateX(3px);
}
.evolving-case .quiz-option:hover:not(:disabled) .option-pill {
    background: var(--brand-2, #0071e3);
    color: #ffffff;
}
html[data-theme="dark"] .evolving-case .quiz-option:hover:not(:disabled) {
    border-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 10%, var(--card)) !important;
}
html[data-theme="dark"] .evolving-case .quiz-option:hover:not(:disabled) .option-pill {
    background: var(--accent) !important;
    color: var(--on-fill) !important;
}
.evolving-case .quiz-option.correct {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.12) !important;
    color: var(--ink) !important;
}
.evolving-case .quiz-option.correct .option-pill {
    background: #10b981 !important;
    color: #ffffff !important;
}
.evolving-case .quiz-option.incorrect {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: var(--ink) !important;
}
.evolving-case .quiz-option.incorrect .option-pill {
    background: #ef4444 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .evolving-case .quiz-option.correct {
    background: rgba(16, 185, 129, 0.22) !important;
    border-color: #34d399 !important;
    color: #34d399 !important;
}
html[data-theme="dark"] .evolving-case .quiz-option.correct .option-pill {
    background: #10b981 !important;
    color: #0b1a13 !important;
}
html[data-theme="dark"] .evolving-case .quiz-option.incorrect {
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: #f87171 !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .evolving-case .quiz-option.incorrect .option-pill {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* Debrief Result Header */
.result-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.result-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    font-size: 1.5rem;
    flex: none;
}
.result-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 750;
}

/* ══════════════════════════════════════════════════════════════════
   Apple iOS 27 Liquid Glass — Badges, Shift View & ECG Explorer
   ══════════════════════════════════════════════════════════════════ */

/* Universal Emoji Badges & Alignment */
.btn-emoji {
    display: inline-block;
    margin-inline-end: 6px;
    font-size: 1.05rem;
    vertical-align: middle;
    line-height: 1;
}

.chip-emoji {
    display: inline-block;
    margin-inline-end: 6px;
    font-size: 1rem;
    vertical-align: middle;
}

.stat-emoji {
    font-size: 1.4rem;
    margin-bottom: 4px;
    display: block;
    line-height: 1.1;
}

.group-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 1.15rem;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    margin-inline-end: 8px;
    flex: none;
    vertical-align: middle;
}

.sec-badge-sm {
    display: inline-block;
    font-size: 1.15rem;
    margin-inline-end: 8px;
    vertical-align: middle;
    line-height: 1;
}

/* Shift View iOS 27 Styling */
.shift-head-main {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.shift-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 2.1rem;
    background: linear-gradient(135deg, rgba(var(--cat-rgb, var(--accent-rgb)), 0.28) 0%, rgba(var(--cat-rgb, var(--accent-rgb)), 0.10) 100%);
    border: 1.5px solid color-mix(in srgb, rgb(var(--cat, 15, 157, 118)) 45%, transparent);
    box-shadow: 0 8px 20px -4px rgba(var(--cat-rgb, var(--accent-rgb)), 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.65);
    flex: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shift-sheet:hover .shift-hero-badge {
    transform: scale(1.06) rotate(-2deg);
}

.shift-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-2);
    margin-bottom: 4px;
}

.shift-step-badge {
    display: inline-block;
    font-size: 1.2rem;
    margin-inline: 4px 6px;
    vertical-align: middle;
}

.shift-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.shift-select-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    flex: none;
}

.warning-badge {
    display: inline-block;
    font-size: 1.3rem;
    margin-inline-end: 8px;
    vertical-align: middle;
}

.shift-actions button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 650;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.shift-actions button:hover {
    transform: translateY(-1px);
}

.shift-actions button:active {
    transform: scale(0.97);
}

/* ECG Explorer iOS 27 Styling */
.explorer-heading-main {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.explorer-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 2rem;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0.08) 100%);
    border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 8px 20px -4px rgba(var(--accent-rgb), 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.65);
    flex: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.explorer-heading-main:hover .explorer-hero-badge {
    transform: scale(1.06) rotate(-2deg);
}

.finding-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.45rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    flex: none;
    box-shadow: var(--shadow-xs);
}

.progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-weight: 700;
}

.progress-head h4, .path-head h4, .checklist-head h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.96rem;
    font-weight: 750;
}

.case-finding-head h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 750;
    color: var(--ink);
}

@media (max-width: 600px) {
    .shift-hero-badge,
    .explorer-hero-badge,
    .practice-hero-badge {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 1.7rem;
    }
    .shift-head-main,
    .explorer-heading-main {
        gap: 12px;
    }
}

/* ══════════ Night Mode (Dark Theme) & Layout Fit Polish ══════════ */
html[data-theme="dark"] .shift-hero-badge,
html[data-theme="dark"] .explorer-hero-badge,
html[data-theme="dark"] .practice-hero-badge {
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.30) 0%, rgba(var(--accent-rgb), 0.10) 100%) !important;
    border-color: color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, 0.12)) !important;
}

html[data-theme="dark"] .shift-select-badge,
html[data-theme="dark"] .finding-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .shift-grid section.shift-crit .shift-step-n {
    background: rgba(249, 115, 22, 0.22) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .shift-grid section.shift-red .shift-step-n {
    background: rgba(239, 68, 68, 0.22) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .shift-disposition > div {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .case-update,
html[data-theme="dark"] .workspace-feedback {
    background: rgba(26, 30, 36, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-left-color: var(--accent) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .workspace-feedback details {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .workspace-stepper-wrap {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .stepper-track {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Home & Universal Glass Dark Theme Surfaces & Contrast */
html[data-theme="dark"] .home-meta span {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--ink) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .home-actions .home-ecg {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--ink) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .home-actions .home-ecg:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: var(--accent) !important;
    color: var(--ink) !important;
}

html[data-theme="dark"] .home-actions .home-start {
    color: var(--on-fill) !important;
    font-weight: 750 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .explorer-controls {
    background: rgba(26, 30, 36, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] .ex-primary,
html[data-theme="dark"] .explorer-heading > .ex-button {
    color: var(--on-fill) !important;
    font-weight: 750 !important;
}

html[data-theme="dark"] .ios-nav-back,
html[data-theme="dark"] .cp-hero-nav .back-btn,
html[data-theme="dark"] .study-page-head .back-btn,
html[data-theme="dark"] .shift-topline .back-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--brand) !important;
}

html[data-theme="dark"] .ios-nav-back:hover,
html[data-theme="dark"] .cp-hero-nav .back-btn:hover,
html[data-theme="dark"] .study-page-head .back-btn:hover,
html[data-theme="dark"] .shift-topline .back-btn:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: var(--accent) !important;
}

html[data-theme="dark"] .workspace-card .case-badge.badge-done {
    background: rgba(74, 222, 128, 0.18) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .workspace-card .case-badge.badge-progress {
    color: var(--brand) !important;
}

/* Mobile Fit Refinements */
.shift-select-wrap {
    max-width: 100%;
}

.shift-select-wrap select {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 680px) {
    .shift-topline {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .shift-select-wrap {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .shift-select-wrap select {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: none !important;
    }
}







/* ══════════ Print: final overrides ══════════
   Several layout layers use !important on display, and narrow paper (A5, or a
   phone's own "Print to PDF" at ~390px) matches the max-width: 920/700px blocks
   too. This block is last so it wins on order as well as on !important. */
@media print {
    .ecg-step-nav,
    .step-rail-meter,
    .ios-tabbar {
        display: none !important;
    }
}