/* ==========================================================================
   Draco EMT Prep — PHONE experience (2.9.24)
   A separate design for phones — app-like, thumb-first — not the desktop page resized.
   Loaded only by views/phone/*. Mirrors the native iOS app's look: navy app bar,
   bottom tab bar, card surfaces, full-screen focused practice.
   ========================================================================== */
:root{
  --navy:#1e3a5f; --navy-dark:#0f2439; --navy-deep:#0a1628; --navy-light:#2c5282;
  --sky:#38bdf8; --sky-2:#7dd3fc; --sky-3:#a5f3fc; --sky-ink:#0369a1;
  --bg:#f2f5f9; --surface:#ffffff; --surface-2:#f6f8fb; --text:#132030; --muted:#56667a; --faint:#5d6d82;
  /* 2.13.1 contrast: --faint text 4.8:1 or better (was 2.8:1); form fields and focus rings 3:1 or better (were 1.3:1 and 1.7:1) */
  --field:#7b8ba0; --focus:#0369a1;
  --border:#dfe6ee; --hair:rgba(15,36,57,.08); --tint:#eaf2fa;
  --ok:#157347; --ok-bg:#e7f4ec; --ok-line:#9bd1b2; --no:#b02a37; --no-bg:#fbeaec; --no-line:#eab0b7;
  --accent:#1e3a5f; --on-accent:#fff;
  --on-status:#fff;              /* text on a filled --ok/--no badge */
  --ring-in:var(--navy-deep);    /* the score ring's inner disc */
  /* A link inside running text (2.22.6): 3:1 or more against the text around it where a color can, 4.5:1 or more on the
     background, and weight 600; never underlined (2.25.8). In secondary (muted) text, the darker navy. */
  --link-text:#2d70b4; --link-text-muted:var(--navy-deep); --link-muted-deco:none;
  --grad-bar:linear-gradient(180deg,#0a1628 0%,#10263f 100%);
  --grad-primary:linear-gradient(135deg,#1e3a5f 0%,#2c5282 100%);
  --grad-hero:linear-gradient(160deg,#0a1628 0%,#12304f 60%,#1b4570 100%);
  --grad-sky:linear-gradient(135deg,#38bdf8 0%,#7dd3fc 100%);
  --radius:18px; --radius-md:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(10,22,40,.05),0 8px 24px -10px rgba(10,22,40,.16);
  --shadow-lg:0 18px 40px -18px rgba(10,22,40,.45);
  --bar-h:56px; --tabs-h:60px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
/* Dark (2.22.6, owner's rule of 2026-10-06): iOS-style neutral black and grey surfaces, with blue only as an accent
   (links, focus rings, primary buttons, selected states, the "EMT" wordmark). On the surfaces: text 15.3:1, muted
   7.7:1, faint 5.9:1, field edges 4.1:1, accent 10.2:1. */
[data-theme="dark"]{
  --bg:#000000; --surface:#1c1c1e; --surface-2:#2c2c2e; --text:#f2f2f7; --muted:#aeaeb2; --faint:#98989f;
  --field:#7c7c82; --focus:#7dd3fc;
  --border:#38383a; --hair:rgba(255,255,255,.08); --tint:var(--surface-2);
  --ok:#52c483; --ok-bg:rgba(21,115,71,.20); --ok-line:rgba(82,196,131,.45); --no:#ef8a8a; --no-bg:rgba(176,42,55,.20); --no-line:rgba(239,138,138,.45);
  --accent:#7dd3fc; --on-accent:#0a1628; --on-status:#111214;
  --link-text:#4189c8; --link-text-muted:var(--sky-2); --link-muted-deco:none;
  --ring-in:#161618;
  --grad-bar:linear-gradient(180deg,#161618 0%,#161618 100%);
  --grad-hero:linear-gradient(160deg,#161618 0%,#1c1c1e 100%);
  --grad-primary:linear-gradient(135deg,#245d92 0%,#2f6fa6 100%);   /* white text 5.3:1 or better */
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px -12px rgba(0,0,0,.6);
  --shadow-lg:0 18px 40px -18px rgba(0,0,0,.75);
  color-scheme:dark;
}
[data-theme="dark"] .m-card--hero{border:1px solid var(--border)}
[data-theme="dark"] .m-hero{border-bottom:1px solid var(--border)}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--font);min-height:100dvh;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
svg{flex:none}
a{color:var(--sky-ink);text-decoration:none}
/* :where() keeps this as weak as the light rule, so a component's own color wins in dark too (2.22.6: at 0,1,1 it
   turned every link-button, list row and tab sky blue, and hid the text of the sky buttons). */
:where([data-theme="dark"]) a{color:var(--sky-2)}
/* A link inside running text (2.22.6; never underlined since 2.25.8, the owner's standing policy): a link with no class
   of its own in a paragraph, a label, a definition or a plain list takes --link-text and weight 600, the non-color cue
   WCAG 1.4.1 asks for (technique G182); keyboard focus shows the focus ring. Component links (rows, buttons, chips,
   tabs) carry a class and keep their own look. */
:where(main) :where(p, label, dd, ul:not([class]) > li, ol:not([class]) > li) a:not([class]){
  color:var(--link-text);font-weight:600;text-decoration:none}
/* Secondary (muted) text: the darker navy in light; in dark no color reaches 3:1 against grey text, so the weight carries it. */
:where(.m-muted, .m-lead, .m-hint, .m-legal, .oauth-consent, .gcs-upsell, .sim-muted){
  --link-text:var(--link-text-muted);--link-text-deco:var(--link-muted-deco)}
/* Dark, on the --surface-2 tints the in-text blue would fall under 4.5:1, so a link there is sky (weight 600 as everywhere). */
[data-theme="dark"] :where(.m-card--tint, .m-q__scenario, .flash--info, .m-sheet){--link-text:var(--sky-2)}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.2;letter-spacing:-.015em;color:var(--text)}
p{margin:0 0 12px}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;font-size:16px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Keep the focused control clear of the fixed top bar and tab bar (WCAG 2.4.11), 2.13.1 */
html{scroll-padding-top:calc(var(--bar-h) + var(--safe-t) + 12px);scroll-padding-bottom:calc(var(--tabs-h) + var(--safe-b) + 16px)}
html:has(.m-app--focus){scroll-padding-bottom:calc(120px + var(--safe-b))}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--navy-dark);color:#fff;padding:10px 14px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- App bar ---------- */
.m-bar{position:sticky;top:0;z-index:60;background:var(--grad-bar);color:#fff;
  padding:var(--safe-t) calc(8px + var(--safe-r)) 0 calc(8px + var(--safe-l));
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 18px -12px rgba(0,0,0,.6)}
.m-bar__row{height:var(--bar-h);display:flex;align-items:center;gap:6px}
.m-bar__brand{display:flex;align-items:center;gap:9px;color:#fff;padding:6px 8px;border-radius:12px;min-height:44px}
.m-bar__brand img{width:32px;height:32px}
.m-bar__word{display:flex;flex-direction:column;line-height:1}
.m-bar__word small{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:3px}
.m-bar__word b{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-.01em}
.m-bar__word b span{color:var(--sky)}
.m-bar__title{flex:1;min-width:0;font:600 17px/1.2 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:4px}
.m-bar__spacer{flex:1}
.m-iconbtn{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:#fff;border-radius:12px;cursor:pointer}
.m-iconbtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-iconbtn:active{background:rgba(255,255,255,.12)}
.m-bar__link{color:#fff;font-weight:600;font-size:15px;padding:0 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:12px}
.m-bar__link--pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);height:36px;min-height:36px;border-radius:999px;font-size:14px}
.m-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;
  background:var(--grad-sky);color:var(--navy-deep);overflow:hidden}
.m-avatar img{width:100%;height:100%;object-fit:cover}

/* ---------- Page ---------- */
.m-page{padding:16px calc(16px + var(--safe-r)) 28px calc(16px + var(--safe-l));max-width:640px;margin:0 auto}
.m-app--tabs .m-page{padding-bottom:calc(var(--tabs-h) + var(--safe-b) + 28px)}
.m-h1{font-size:28px;font-weight:700;margin:6px 2px 6px}
.m-h2{font-size:20px;font-weight:700;margin:26px 2px 10px}
.m-h3{font-size:17px;font-weight:700;margin:0 0 6px}
.m-lead{color:var(--muted);font-size:15.5px;margin:0 2px 14px}
.m-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-ink);margin:0 2px 6px}
[data-theme="dark"] .m-eyebrow{color:var(--sky-2)}
.m-muted{color:var(--muted)}
.m-small{font-size:13.5px}
.m-center{text-align:center}
.m-stack>*+*{margin-top:12px}
.m-gap{height:12px}

/* ---------- Cards & lists ---------- */
.m-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border:1px solid var(--hair)}
.m-card+.m-card{margin-top:12px}
.m-card--flat{box-shadow:none}
.m-card--hero{background:var(--grad-hero);color:#fff;border:0;position:relative;overflow:hidden}
.m-card--hero h1,.m-card--hero h2,.m-card--hero h3{color:#fff}
.m-card--hero .m-muted{color:rgba(255,255,255,.78)}
.m-card--tint{background:var(--tint);box-shadow:none;border-color:transparent}
.m-list{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--hair);overflow:hidden}
.m-row{display:flex;align-items:center;gap:13px;min-height:58px;padding:11px 14px;color:var(--text);border-top:1px solid var(--hair);
  background:transparent;width:100%;text-align:left;border-left:0;border-right:0;border-bottom:0;cursor:pointer}
.m-list>.m-row:first-child,.m-list>form:first-child .m-row{border-top:0}
.m-row:active{background:var(--surface-2)}
.m-row__ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--grad-primary);color:#fff;flex:none}
.m-row__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-row__ico--sky{background:var(--grad-sky);color:var(--navy-deep)}
.m-row__ico--ok{background:linear-gradient(135deg,#1f7a4d,#2b9a63)}
/* Missed Questions: the brand navy like every other mode (the brown and gold were off-palette), 2.13.0 */
.m-row__ico--warn{background:var(--grad-primary)}
.m-row__body{flex:1;min-width:0}
.m-row__title{font-weight:600;font-size:16px;line-height:1.3;display:block}
.m-row__sub{color:var(--muted);font-size:13.5px;line-height:1.35;display:block;margin-top:2px}
.m-row__end{color:var(--faint);display:flex;align-items:center;gap:6px;font-size:14px}
.m-row__end svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.m-row--danger .m-row__title{color:var(--no)}
.m-badge{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--no);color:var(--on-status);font-size:12px;font-weight:700;display:inline-grid;place-items:center}
.m-badge--soft{background:var(--tint);color:var(--accent)}

/* Settings rows that expand into a form (details/summary styled as list rows) */
.m-set{border-top:1px solid var(--hair)}
.m-list>.m-set:first-child{border-top:0}
.m-set>summary{list-style:none}
.m-set>summary::-webkit-details-marker{display:none}
.m-set>summary.m-row{border-top:0}
.m-row__end svg{transition:transform .2s ease}
.m-set[open]>summary .m-row__end svg{transform:rotate(90deg)}
.m-set__body{padding:4px 16px 18px}

/* ---------- Buttons ---------- */
.m-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;padding:0 20px;border-radius:14px;border:0;
  font:500 16.5px/1 var(--font);color:#fff;background:var(--grad-primary);cursor:pointer;text-decoration:none;
  box-shadow:0 8px 18px -10px rgba(15,36,57,.7);transition:filter .15s ease,box-shadow .15s ease}
.m-btn:active{filter:brightness(.92)}
.m-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.m-btn--sky{background:var(--grad-sky);color:var(--navy-deep);box-shadow:0 10px 22px -12px rgba(56,189,248,.8)}
.m-btn--ghost{background:transparent;color:var(--accent);box-shadow:none}
.m-btn--outline{background:var(--surface);color:var(--accent);box-shadow:none;border:1.5px solid var(--border)}
.m-btn--on-dark{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:none}
.m-btn--danger{background:linear-gradient(135deg,#9a2530,#b02a37)}
.m-btn--sm{position:relative;min-height:40px;font-size:14.5px;border-radius:12px;padding:0 14px;width:auto}
.m-btn--sm::after{content:"";position:absolute;inset:-2px 0}   /* 40px button, 44px target */
.m-btn[disabled],.m-btn.is-disabled{opacity:.45;pointer-events:none;box-shadow:none}
.m-btn-row{display:flex;gap:10px}
.m-btn-row>.m-btn{flex:1;padding:0 14px}
/* The primary action gets the room its longer label needs ("Quick Practice" beside "All Modes"), 2.13.0 */
.m-btn-row>.m-btn:first-child:not(:last-child){flex:1.45}
/* Dark: the primary fill comes from --grad-primary (2.22.6; the separate override is gone). */

/* ---------- Forms ---------- */
.m-form .m-field{margin-bottom:14px}
.m-field label,.m-label{display:block;font-size:14px;font-weight:600;color:var(--muted);margin:0 2px 6px}
.m-input,.m-form input[type=text],.m-form input[type=email],.m-form input[type=password],.m-form input[type=tel],.m-form input[type=number],.m-form select,.m-form textarea{
  width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--field);background:var(--surface);color:var(--text);
  outline:none;-webkit-appearance:none;appearance:none}
.m-form textarea{min-height:120px;resize:vertical}
.m-form input:focus,.m-form select:focus,.m-form textarea:focus,.m-input:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus)}
.m-check{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;margin:4px 2px 14px;cursor:pointer}
.m-check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent);flex:none}
.m-hint{font-size:13px;color:var(--muted);margin:6px 2px 0}
.m-divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:13px;margin:18px 0}
.m-divider::before,.m-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:52px!important}
.pw-toggle{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--muted);border-radius:10px}
.pw-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;border-radius:14px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);font-weight:500;font-size:16px;margin-bottom:10px}
.oauth-btn svg,.oauth-btn img{width:20px;height:20px}
.otp-field{position:relative}
.otp-field__input{width:100%;min-height:58px;text-align:center;font:700 26px/1 ui-monospace,Menlo,monospace;letter-spacing:.45em;border-radius:14px;
  border:1.5px solid var(--border);background:var(--surface);color:var(--text)}
.otp-field__cells{display:none}

/* ---------- Flash + toasts (toasts are created by main.js) ---------- */
.flash{padding:12px 14px;border-radius:12px;margin:0 0 12px;font-size:15px;border:1px solid var(--border);background:var(--surface)}
.flash--error{background:var(--no-bg);border-color:var(--no-line);color:var(--no)}
.flash--success{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.flash--info{background:var(--tint);border-color:transparent;color:var(--text)}
.flash a{font-weight:600;text-decoration:none}   /* a link in a message box: weight 600, never underlined (2.25.8) */
.toast-container{position:fixed;left:12px;right:12px;top:calc(var(--safe-t) + 10px);z-index:3000;display:flex;flex-direction:column;gap:8px;pointer-events:none;align-items:center}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:100%;max-width:460px;background:var(--surface);color:var(--text);
  border:1px solid var(--hair);border-left:4px solid var(--accent);border-radius:14px;padding:12px 12px 12px 14px;box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease}
.toast.is-in{opacity:1;transform:none}
.toast--success{border-left-color:var(--ok)}.toast--error{border-left-color:var(--no)}.toast--info{border-left-color:var(--sky)}
.toast__icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.toast--success .toast__icon{color:var(--ok)}.toast--error .toast__icon{color:var(--no)}.toast--info .toast__icon{color:var(--sky-ink)}
[data-theme="dark"] .toast--info .toast__icon{color:var(--sky-2)}
.toast__msg{flex:1;font-size:14.5px;line-height:1.4}
/* Close: a 44px target (2.22.6; was 28px), pulled into the toast's padding so the toast keeps its size. */
.toast__close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-12px -10px -12px -4px;padding:0;border:0;border-radius:10px;
  background:none;color:var(--faint);cursor:pointer}

/* ---------- Sheets + dialogs (main.js confirm dialog uses .modal-overlay/.modal) ---------- */
.modal-overlay{position:fixed;inset:0;z-index:2500;background:rgba(5,12,24,.52);display:flex;align-items:flex-end;justify-content:center;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal{width:100%;max-width:560px;background:var(--surface);color:var(--text);border-radius:22px 22px 0 0;
  padding-bottom:var(--safe-b);box-shadow:0 -18px 40px -20px rgba(0,0,0,.5);animation:m-sheet-in .24s ease both;max-height:88dvh;overflow:auto}
@keyframes m-sheet-in{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.modal__head{padding:18px 20px 6px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal__head::before{content:"";position:absolute;left:50%;transform:translateX(-50%);margin-top:-12px;width:38px;height:5px;border-radius:3px;background:var(--border)}
.modal__head h3{font-size:19px}
.modal__body{padding:6px 20px 12px;font-size:15.5px;color:var(--muted)}
.modal__foot{display:flex;flex-direction:column-reverse;gap:10px;padding:10px 20px 18px}
.modal__foot .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;border-radius:14px;border:0;font-weight:500;font-size:16px;
  color:#fff;background:var(--grad-primary)}
.modal__foot .btn--outline{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.modal__close{display:none}
.m-sheet .m-sheet__panel{width:100%;max-width:560px;background:var(--surface);border-radius:22px 22px 0 0;padding:10px 12px calc(14px + var(--safe-b));
  box-shadow:0 -18px 40px -20px rgba(0,0,0,.5);animation:m-sheet-in .24s ease both;max-height:90dvh;overflow:auto}
.m-sheet__grab{width:38px;height:5px;border-radius:3px;background:var(--border);margin:4px auto 12px}
.m-sheet__head{display:flex;align-items:center;gap:12px;padding:4px 8px 12px}
.m-sheet__head b{display:block;font-size:17px}
.m-sheet__head span{color:var(--muted);font-size:13.5px}
.m-sheet .m-list{box-shadow:none;background:var(--surface-2)}
.m-sheet .m-btn{margin-top:10px}

/* ---------- Bottom tab bar ---------- */
.m-tabs{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:repeat(4,1fr);
  height:calc(var(--tabs-h) + var(--safe-b));padding:0 var(--safe-r) var(--safe-b) var(--safe-l);
  background:var(--surface);background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  border-top:1px solid var(--hair)}
.m-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--faint);font-size:11px;font-weight:500;letter-spacing:.01em;min-height:44px}
.m-tab svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.m-tab[aria-current="page"]{color:var(--navy)}
[data-theme="dark"] .m-tab[aria-current="page"]{color:var(--sky-2)}
.m-tab[aria-current="page"] svg{stroke-width:2.3}

/* ---------- Footer ---------- */
.m-foot{padding:22px calc(18px + var(--safe-r)) calc(24px + var(--safe-b)) calc(18px + var(--safe-l));background:var(--navy-deep);color:rgba(255,255,255,.78);font-size:13.5px;margin-top:24px}
.m-app--tabs .m-foot{padding-bottom:calc(var(--tabs-h) + var(--safe-b) + 22px)}
.m-foot a{color:#fff}
.m-foot__brand{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#fff}
.m-foot__brand img{width:34px;height:34px}
.m-foot__links{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:14px 0}
.m-foot__links a{display:flex;align-items:center;min-height:40px}
.m-foot__legal{font-size:12px;line-height:1.55;color:rgba(255,255,255,.6);margin:12px 0}
.m-foot__legal a{color:#fff;font-weight:600;text-decoration:none}
/* The footer blurb's link: on the dark band no link color stands 3:1 apart from the text, so it is white, weight 600. */
.foot-blurb a{color:#fff;font-weight:600;text-decoration:none}
.m-foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:12px;color:rgba(255,255,255,.62);border-top:1px solid rgba(255,255,255,.1);padding-top:12px}
.dev-switch{font-size:12.5px;color:rgba(255,255,255,.7)}
.dev-switch a{color:var(--dl-sky2, #7dd3fc);font-weight:600;text-decoration:none;display:inline-block;padding:6px 2px}
.dev-switch__cur{font-weight:700;color:#fff}
.m-appfoot{padding:8px 18px calc(var(--tabs-h) + var(--safe-b) + 18px);text-align:center;font-size:12px;color:var(--faint)}
.m-appfoot .dev-switch{color:var(--faint)}
.m-appfoot .dev-switch a{color:var(--muted)}
.m-appfoot .dev-switch__cur{color:var(--text)}
.store-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.store-row img{height:44px;width:auto}
.store-row img[src$=".png"]{height:64px;margin:-10px 0}

/* ---------- Meters, rings, stats, chips ---------- */
.m-meter{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--hair)}
.m-meter>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2c5282,#38bdf8)}
.m-meter--weak>span{background:linear-gradient(90deg,#9a2530,#d05a64)}
.m-meter--ok>span{background:linear-gradient(90deg,#1e3a5f,#4f97cc)}
.m-meter--strong>span{background:linear-gradient(90deg,#1f7a4d,#52c483)}
.m-ring{--p:0;width:118px;height:118px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--sky) calc(var(--p)*1%),rgba(255,255,255,.14) 0)}
.m-ring__in{width:94px;height:94px;border-radius:50%;background:var(--ring-in);display:grid;place-items:center;text-align:center}
.m-ring__val{font:700 28px/1 var(--font-display);color:#fff;font-variant-numeric:tabular-nums}
.m-ring__lab{font-size:11px;color:rgba(255,255,255,.7);margin-top:3px;letter-spacing:.04em;text-transform:uppercase}
.m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.m-stat{background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--hair);box-shadow:var(--shadow);padding:12px 10px;text-align:center}
.m-stat b{display:block;font:700 22px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.m-stat span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.m-chips{display:flex;flex-wrap:wrap;gap:8px}
.m-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border-radius:999px;background:var(--surface);border:1px solid var(--border);
  color:var(--text);font-size:14px;font-weight:500}
.m-chip small{color:var(--faint);font-weight:500}
.m-chip--on-dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.m-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--accent)}
.m-hscroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:4px 16px 10px;scrollbar-width:none}
.m-hscroll::-webkit-scrollbar{display:none}
.m-hscroll>*{scroll-snap-align:start;flex:0 0 84%}

/* ---------- Marketing ---------- */
.m-hero{background:var(--grad-hero);color:#fff;padding:26px 20px 30px;margin:0 0 4px;position:relative;overflow:hidden}
.m-hero::after{content:"";position:absolute;right:-60px;top:-40px;width:230px;height:230px;opacity:.16;
  background:url('/assets/images/star-of-life.svg') center/contain no-repeat}
.m-hero__tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#e2f3ff}
.m-hero h1{color:#fff;font-size:32px;font-weight:700;line-height:1.08;margin:14px 0 10px;text-wrap:balance}
.m-hero h1 em{font-style:normal;background:linear-gradient(110deg,#38bdf8,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-hero p{color:rgba(255,255,255,.82);font-size:16px;margin:0 0 18px}
.m-hero .m-btn+.m-btn{margin-top:10px}
.m-trust{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:rgba(255,255,255,.75)}
.m-trust span{display:inline-flex;align-items:center;gap:6px}
.m-trust svg{width:16px;height:16px;fill:none;stroke:var(--sky);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.m-feature{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--hair);padding:18px}
.m-feature__ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--grad-primary);color:#fff;margin-bottom:12px}
.m-feature__ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-feature h3{font-size:17.5px;margin-bottom:6px}
.m-feature p{color:var(--muted);font-size:15px;margin:0}
.m-steps{counter-reset:s;list-style:none;margin:0;padding:0}
.m-steps li{counter-increment:s;display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--hair)}
.m-steps li:first-child{border-top:0}
.m-steps li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--grad-sky);color:var(--navy-deep);font-weight:700;display:grid;place-items:center;flex:none}
.m-steps b{display:block;margin-bottom:2px}
.m-steps span{color:var(--muted);font-size:14.5px}
.m-price{position:relative}
.m-price--featured{border:2px solid var(--navy)}
[data-theme="dark"] .m-price--featured{border-color:var(--sky)}
.m-price__ribbon{position:absolute;top:-11px;left:16px;background:var(--grad-primary);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.m-price__amt{font:700 34px/1 var(--font-display);margin:6px 0 4px;font-variant-numeric:tabular-nums}
.m-price__amt small{font-size:15px;font-weight:600;color:var(--muted)}
.m-checks{list-style:none;padding:0;margin:10px 0 14px}
.m-checks li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:15px}
.m-checks svg{width:18px;height:18px;margin-top:3px;fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.m-acc{background:var(--surface);border-radius:var(--radius);border:1px solid var(--hair);box-shadow:var(--shadow);overflow:hidden}
.m-acc details{border-top:1px solid var(--hair)}
.m-acc details:first-child{border-top:0}
.m-acc summary{list-style:none;display:flex;align-items:center;gap:10px;justify-content:space-between;min-height:56px;padding:12px 16px;font-weight:600;cursor:pointer}
.m-acc summary::-webkit-details-marker{display:none}
.m-acc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);flex:none;margin-top:-4px;transition:transform .2s ease}
.m-acc details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.m-acc .m-acc__body{padding:0 16px 16px;color:var(--muted);font-size:15px}
.m-acc .faq-domains{list-style:none;padding:0;margin:10px 0}
.m-acc .faq-domains li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair);color:var(--text)}
.m-acc .faq-domains b{font-variant-numeric:tabular-nums}
.m-cta-bar{position:sticky;bottom:0;z-index:40;padding:10px 16px calc(10px + var(--safe-b));background:var(--surface);background:color-mix(in srgb,var(--surface) 90%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--hair);transition:transform .25s ease,opacity .25s ease}
.m-cta-bar.is-hidden{transform:translateY(110%);opacity:0;pointer-events:none}
.m-legal h1{font-size:26px;margin:4px 0 4px}
.m-legal h3{font-size:17.5px;margin:22px 0 8px}
.m-legal ul{padding-left:20px}
.m-legal h2{font-size:18px;margin:22px 2px 8px}
.m-legal p,.m-legal li{color:var(--muted);font-size:15px}
.m-legal ul{padding-left:20px}

.m-more>summary{display:inline-flex;align-items:center;min-height:40px;color:var(--sky-ink);font-weight:600;cursor:pointer;list-style:none}
[data-theme="dark"] .m-more>summary{color:var(--sky-2)}
.m-more>summary::-webkit-details-marker{display:none}
.m-more[open]>summary{display:none}

/* ---------- Practice / quiz (focus mode) ---------- */
.m-app--focus{background:var(--bg)}
.m-qbar{position:sticky;top:0;z-index:60;background:var(--grad-bar);color:#fff;padding:var(--safe-t) calc(6px + var(--safe-r)) 0 calc(6px + var(--safe-l))}
.m-qbar__row{height:var(--bar-h);display:flex;align-items:center;gap:6px}
.m-qbar__count{flex:1;font:600 16px/1.2 var(--font-display);text-align:center}
.m-qbar__count small{display:block;font:500 12px/1.2 var(--font);color:rgba(255,255,255,.7);margin-top:2px}
.m-timer{min-width:74px;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
.m-timer svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.m-timer.is-low{background:rgba(239,138,138,.3)}
.m-qprog{height:4px;background:rgba(255,255,255,.14)}
.m-qprog>span{display:block;height:100%;background:var(--grad-sky);border-radius:0 4px 4px 0;transition:width .3s ease}
.m-q{padding:16px calc(16px + var(--safe-r)) calc(110px + var(--safe-b)) calc(16px + var(--safe-l));max-width:640px;margin:0 auto}
.m-q__meta{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.m-q__type{font-size:12.5px;color:var(--muted);font-weight:600}
.m-q__scenario{background:var(--tint);border-radius:14px;padding:12px 14px;font-size:15.5px;margin-bottom:12px}
.m-q__stem{font:500 18px/1.5 var(--font);margin:0 2px 16px;color:var(--text)}
/* The scenario as ordinary text, then the question asked, emphasized (2.12.3; em-sized so tablet.css scales both). */
.m-q__lead{font-size:.94em;font-weight:400;line-height:1.55;margin:0 0 10px}
.m-q__ask{font-weight:700;margin:0}
.m-q__ask--plain{font-weight:400}
.m-q__instr{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:11px 13px;margin-bottom:12px;font-size:14.5px;color:var(--muted)}
.m-q__instr svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--sky-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
[data-theme="dark"] .m-q__instr svg{stroke:var(--sky-2)}
.m-opts{display:flex;flex-direction:column;gap:10px}
.m-opt{position:relative;display:flex;gap:13px;align-items:flex-start;min-height:58px;padding:14px 14px 14px 12px;border-radius:16px;
  background:var(--surface);border:2px solid var(--border);box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.m-opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.m-opt__key{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:14.5px;
  background:var(--surface-2);border:1.5px solid var(--border);color:var(--muted)}
.m-opt--multi .m-opt__key{border-radius:9px}
.m-opt__body{flex:1;min-width:0;font-size:16px;line-height:1.45;padding-top:4px}
.m-opt:has(input:checked){border-color:var(--navy);background:var(--tint)}
[data-theme="dark"] .m-opt:has(input:checked){border-color:var(--sky)}
.m-opt:has(input:checked) .m-opt__key{background:var(--navy);border-color:var(--navy);color:#fff}
[data-theme="dark"] .m-opt:has(input:checked) .m-opt__key{background:var(--sky);border-color:var(--sky);color:var(--navy-deep)}
.m-opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.m-opt.is-correct{border-color:var(--ok);background:var(--ok-bg)}
.m-opt.is-correct .m-opt__key{background:var(--ok);border-color:var(--ok);color:var(--on-status)}
.m-opt.is-wrong{border-color:var(--no);background:var(--no-bg)}
.m-opt.is-wrong .m-opt__key{background:var(--no);border-color:var(--no);color:var(--on-status)}
.m-opt.is-dim{opacity:.72;box-shadow:none}
.m-opt__tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin:6px 0 0}
.m-opt__tag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.m-opt.is-correct .m-opt__tag{color:var(--ok)}.m-opt.is-wrong .m-opt__tag{color:var(--no)}
.m-opt__why{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--muted)}
/* Build-list (order) */
.m-order{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.m-order__item{display:flex;align-items:center;gap:10px;background:var(--surface);border:2px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
  padding:10px 8px 10px 10px;touch-action:pan-y;transition:transform .12s ease,box-shadow .12s ease}
.m-order__item.is-lift{box-shadow:var(--shadow-lg);border-color:var(--sky);transform:scale(1.015);z-index:2;position:relative}
.m-order__num{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--grad-primary);color:#fff}
.m-order__body{flex:1;min-width:0;font-size:15.5px;line-height:1.4}
.m-order__ctl{display:flex;flex-direction:column;gap:2px}
.m-order__ctl button{width:44px;height:34px;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;display:grid;place-items:center;color:var(--text)}
.m-order__ctl button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.m-order__ctl button:disabled{opacity:.35}
.m-order__grip{width:28px;align-self:stretch;display:grid;place-items:center;color:var(--faint);cursor:grab;touch-action:none}
.m-order__grip svg{width:18px;height:24px;fill:currentColor}
.m-order__item.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.m-order__item.is-no{border-color:var(--no);background:var(--no-bg)}
.m-order__item.is-ok .m-order__num{background:var(--ok);color:var(--on-status)}.m-order__item.is-no .m-order__num{background:var(--no);color:var(--on-status)}
.m-order__note{display:block;font-size:13px;color:var(--no);font-weight:600;margin-top:3px}
/* Matching (category) */
.m-cat{display:flex;flex-direction:column;gap:10px}
.m-cat__item{background:var(--surface);border:2px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:13px 13px 12px}
.m-cat__text{font-size:15.5px;line-height:1.45;margin-bottom:10px}
.m-cat__buckets{display:flex;flex-wrap:wrap;gap:8px}
.m-bucket{position:relative;display:inline-flex}
.m-bucket input{position:absolute;opacity:0;width:1px;height:1px}
.m-bucket span{display:inline-flex;align-items:center;min-height:40px;padding:8px 13px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface-2);
  font-size:14px;font-weight:600;line-height:1.25;color:var(--text);cursor:pointer}
.m-bucket input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
[data-theme="dark"] .m-bucket input:checked+span{background:var(--sky);border-color:var(--sky);color:var(--navy-deep)}
.m-bucket input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.m-cat__item.is-set{border-color:var(--navy-light)}
.m-cat__item.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.m-cat__item.is-no{border-color:var(--no);background:var(--no-bg)}
.m-cat__ans{font-size:14px;font-weight:700}
.m-cat__item.is-ok .m-cat__ans{color:var(--ok)}.m-cat__item.is-no .m-cat__ans{color:var(--no)}
.m-cat__ans em{font-style:normal;font-weight:500;color:var(--muted)}
/* Feedback + rationale */
.m-feedback{display:flex;gap:12px;align-items:center;border-radius:16px;padding:14px 15px;margin:0 0 14px;font-weight:700;font-size:17px}
.m-feedback svg{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.m-feedback small{display:block;font-weight:500;font-size:13.5px;opacity:.85}
.m-feedback--ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.m-feedback--no{background:var(--no-bg);color:var(--no);border:1px solid var(--no-line)}
.m-rationale{margin-top:14px;background:var(--surface);border-radius:var(--radius);border:1px solid var(--hair);box-shadow:var(--shadow);padding:16px}
.m-rationale h3{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-ink);margin-bottom:8px;display:flex;align-items:center;gap:8px}
[data-theme="dark"] .m-rationale h3{color:var(--sky-2)}
.m-rationale h3 svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.m-rationale__text{font-size:16px;line-height:1.6}
.m-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:12px calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l));
  background:var(--bg);background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--hair)}
.m-actionbar__inner{max-width:640px;margin:0 auto}
.m-actionbar .m-hint{text-align:center;margin:0 0 8px}
/* Results */
.m-result{text-align:center;padding:10px 4px 4px}
.m-result .m-ring{margin:6px auto 14px;width:148px;height:148px}
.m-result .m-ring__in{width:118px;height:118px}
.m-result .m-ring__val{font-size:36px}
.m-result h1{font-size:26px;margin-bottom:6px}
.m-result__cheer{margin:14px 0 2px;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--sky-ink)}
[data-theme="dark"] .m-result__cheer{color:var(--sky-2)}

/* ---------- Flashcards ---------- */
.m-fc{perspective:1400px;margin:6px 0 16px}
.m-fc__card{position:relative;min-height:320px;border-radius:22px;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.m-fc__card.is-flipped{transform:rotateY(180deg)}
.m-fc__face{position:absolute;inset:0;border-radius:22px;padding:22px 20px;display:flex;flex-direction:column;justify-content:center;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--surface);border:1px solid var(--hair);box-shadow:var(--shadow)}
.m-fc__face--back{transform:rotateY(180deg);border-top:5px solid #2b8253}
.m-fc__face--front{border-top:5px solid #5b6b80}
.m-fc__label{position:absolute;top:16px;left:18px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.m-fc__label--ans{color:#2b8253}   /* 4.8:1 on the white card; in dark the brighter --ok (it was an inline color, 3.6:1 in dark) */
[data-theme="dark"] .m-fc__label--ans{color:var(--ok)}
.m-fc__count{position:absolute;top:14px;right:16px}
.m-fc__text{font:700 22px/1.35 var(--font-display);text-align:center}
.m-fc__face--back .m-fc__text{font:500 17px/1.55 var(--font);text-align:left}
.m-fc__cue{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:13px;color:var(--faint)}
.m-fc__grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-fc__grade .m-btn--learn{background:linear-gradient(135deg,#475569,#5b6b80)}
.m-fc__grade .m-btn--got{background:linear-gradient(135deg,#1f6b44,#2b8253)}

@media (min-width:430px){ .m-hero h1{font-size:35px} }
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .m-fc__card{transition:none!important}
}

/* reCAPTCHA badge hidden; the required notice is shown as text on every protected form (footer or .m-recaptcha-note). */
.grecaptcha-badge{visibility:hidden!important}
.m-recaptcha-note{font-size:12px;color:var(--faint);text-align:center;margin:12px 4px 0}
.m-recaptcha-note a{color:var(--link-text-muted);font-weight:600;text-decoration:none}
/* Consent under the Google and Apple buttons (2.12.3). */
.oauth-consent{font-size:.8rem;line-height:1.5;color:var(--muted);text-align:center;margin:6px 4px 12px}

/* Long unbroken strings wrap instead of pushing the page sideways (2.13.1). */
.m-q__stem,.m-opt,.m-q__scenario,.m-rationale{overflow-wrap:anywhere}

/* Timed-set briefing, Set Review and Practice History (2.14.2) */
.m-brief{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.m-brief li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.m-brief li>svg{flex:0 0 22px;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-chip[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.m-chip[aria-current] small{color:inherit;opacity:.85}
.m-review{margin-top:14px;scroll-margin-top:calc(var(--bar-h) + 12px)}
.m-review__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.m-review__n{font:700 17px/1.3 var(--font-display);margin:0}
.m-verdict{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:4px 10px 4px 8px;border-radius:999px}
.m-verdict svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.m-verdict--ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.m-verdict--no{background:var(--no-bg);color:var(--no);border:1px solid var(--no-line)}
.m-sample [data-sample-verdict]{margin:14px 0 0}
.m-sample [data-sample-verdict]:focus{outline:none}
form[data-sample] [hidden]{display:none!important}   /* see style.css (2.14.5) */

/* Glasgow Coma Scale trainer (2.15.0): shared by the desktop, phone and tablet layouts. */
.gcs{--gcs-ok:#157347;--gcs-ok-bg:#e7f4ec;--gcs-no:#b02a37;--gcs-no-bg:#fbeaec;--gcs-accent:#0369a1}
[data-theme="dark"] .gcs{--gcs-ok:#52c483;--gcs-ok-bg:rgba(21,115,71,.2);--gcs-no:#ef8a8a;--gcs-no-bg:rgba(176,42,55,.2);--gcs-accent:#7dd3fc}
.gcs-head h1{margin:4px 0 6px}
.gcs-lead{color:var(--muted);margin:0 0 8px}
.gcs-stats{font-size:.92rem;margin:0 0 16px;color:var(--text)}
.gcs-stats span{color:var(--muted)}
.gcs-case{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin:0 0 16px}
.gcs-case__meta{margin:0 0 10px;font-size:.9rem;color:var(--muted);font-weight:600}
.gcs-chip{display:inline-block;margin-right:6px;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--gcs-accent);border:1px solid currentColor}
.gcs-case__text{margin:0;font-size:1.05rem;line-height:1.6;color:var(--text)}
.gcs-part{border:1px solid var(--border);border-radius:14px;padding:12px 14px 6px;margin:0 0 14px;background:var(--surface)}
.gcs-part legend{font-weight:700;padding:0 6px;color:var(--text)}
.gcs-option{display:flex;align-items:flex-start;gap:10px;padding:10px 8px;border-radius:10px;cursor:pointer;min-height:44px}
.gcs-option:hover{background:rgba(3,105,161,.06)}
.gcs-option input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--gcs-accent)}
.gcs-option__n{flex:none;min-width:30px;text-align:center;font-weight:700;color:var(--gcs-accent)}
.gcs-option__label{color:var(--text)}
.gcs-option__label small{color:var(--muted);font-size:.85em}
.gcs-option:has(input:checked){background:rgba(3,105,161,.1);outline:2px solid var(--gcs-accent);outline-offset:-2px}
.gcs-option--nt .gcs-option__n{font-size:.85rem}
.gcs-form button{width:100%;margin-top:4px}
.gcs-result__head{margin:4px 0 6px}
.gcs-result{scroll-margin-top:70px}
.gcs-result__head--ok{color:var(--gcs-ok)}
.gcs-result__head--no{color:var(--text)}
.gcs-result__report{margin:0 0 14px;font-size:1.05rem}
.gcs-result__report span{color:var(--muted);font-size:.95rem}
.gcs-verdict{border-radius:12px;padding:12px 14px;margin:0 0 10px;border:1px solid var(--border);background:var(--surface)}
.gcs-verdict--ok{border-color:var(--gcs-ok);background:var(--gcs-ok-bg)}
.gcs-verdict--no{border-color:var(--gcs-no);background:var(--gcs-no-bg)}
.gcs-verdict__top{display:flex;align-items:center;gap:8px;margin:0 0 4px;color:var(--text)}
.gcs-verdict__icon svg{width:18px;height:18px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;display:block}
.gcs-verdict--ok .gcs-verdict__icon svg{stroke:var(--gcs-ok)}
.gcs-verdict--no .gcs-verdict__icon svg{stroke:var(--gcs-no)}
.gcs-verdict__you{margin:0 0 4px;font-weight:600;color:var(--gcs-no)}
.gcs-verdict__why{margin:0;color:var(--text);line-height:1.55}
.gcs-teach{border-left:4px solid var(--gcs-accent);background:var(--surface);border-radius:10px;padding:12px 14px;margin:14px 0 16px;border-top:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.gcs-teach strong{color:var(--gcs-accent)}
.gcs-teach p{margin:4px 0 0;color:var(--text);line-height:1.55}
.gcs-result form button{width:100%}
.gcs-upsell{margin:16px 0 0;font-size:.92rem;color:var(--muted);text-align:center}
.gcs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Patient Scenarios (2.17.0): catalog, call and debrief, all layouts. Append to style.css and phone.css. ===== */
.sim{--sim-ok:#157347;--sim-ok-bg:#e7f4ec;--sim-no:#b02a37;--sim-no-bg:#fbeaec;--sim-tint:#eaf2fa;--sim-accent:#1e3a5f}
:root[data-theme="dark"] .sim{--sim-ok:#52c483;--sim-ok-bg:#13301f;--sim-no:#ef8a8a;--sim-no-bg:#3a1a1f;--sim-tint:var(--surface-2);--sim-accent:#7dd3fc}   /* neutral tint (2.22.6; was navy) */
.sim-head{margin:0 0 18px}
.sim-head h1{margin:4px 0 6px;overflow-wrap:break-word}
.skc-meta-case{flex-basis:100%}
.sim-head__meta{margin:0;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sim-clock{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--sim-tint);color:var(--text);border-radius:999px;padding:4px 12px}
.sim-lead{color:var(--muted);max-width:62ch}
.sim-muted{color:var(--muted);font-size:.92rem}
.sim-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.sim-grid--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.sim-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}
@media (max-width:900px){.sim-grid,.sim-grid--even{grid-template-columns:1fr}.sim-side{position:static}}
/* Wider screens: the panel stays in view. The partner and the vital signs stay put, and the action menu scrolls on its
   own, so every group is reachable however long the call runs. */
@media (min-width:901px){
  .sim-side{max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px)}
  .sim-side > .sim-status,.sim-side > .sim-vitals,.sim-side > .sim-end{flex:none;margin-bottom:0}
  .sim-side > .sim-actions{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 10px 10px;margin:-2px -10px 0}
}
.sim-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:0 1px 2px rgba(10,22,40,.06),0 8px 22px rgba(10,22,40,.07);margin:0 0 14px}
.sim-card h2{font-size:1.05rem;margin:0 0 10px}
.sim-card__band{margin:-16px -18px 12px!important;padding:10px 18px;background:var(--sim-tint);color:var(--sim-accent);font-size:.78rem!important;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:16px 16px 0 0}
.sim-card p{margin:0 0 6px;line-height:1.55}
.sim-feed h2{font-size:1.15rem;margin:18px 0 10px}
.sim-feed__list{list-style:none;margin:0;padding:6px 14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 22px rgba(10,22,40,.06)}
.sim-feed__item{display:grid;grid-template-columns:44px 26px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.sim-feed__item:first-child{border-top:0}
.sim-feed__time{font-size:.82rem;font-weight:700;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;padding-top:2px}
.sim-feed__icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sim-tint)}
.sim-feed__icon svg{width:15px;height:15px;fill:none;stroke:var(--sim-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sim-feed__item--event .sim-feed__icon{background:var(--sim-ok-bg)} .sim-feed__item--event .sim-feed__icon svg{stroke:var(--sim-ok)}
.sim-feed__item--refused .sim-feed__icon{background:var(--sim-no-bg)} .sim-feed__item--refused .sim-feed__icon svg{stroke:var(--sim-no)}
.sim-feed__body{line-height:1.5;font-size:.95rem}
#latest{scroll-margin-top:90px}
.sim-status p{margin:0 0 4px}
.sim-vitals__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 8px}
.sim-vitals__grid div{background:var(--bg-soft, var(--surface-2, #f5f7fa));border-radius:10px;padding:8px 6px;text-align:center}
.sim-vitals__grid dt{font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.03em}
.sim-vitals__grid dd{margin:2px 0 0;font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}
.sim-vitals h2 small{font-weight:600;color:var(--muted);font-size:.8rem}
.sim-actions h2{margin:0 0 4px;font-size:1.05rem}
.sim-group{border:1px solid var(--border);border-radius:12px;margin:8px 0;background:var(--surface)}
.sim-group summary{cursor:pointer;padding:10px 14px;font-weight:700;list-style:none;display:flex;justify-content:space-between}
.sim-group summary::after{content:"";width:14px;height:14px;align-self:center;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat} .sim-group[open] summary::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat}
.sim-group ul{list-style:none;margin:0;padding:0 10px 8px}
.sim-act{display:flex;align-items:center;gap:8px;padding:7px 4px;border-top:1px solid var(--border);flex-wrap:wrap}
.sim-act > span{flex:1 1 150px;font-size:.93rem}
.sim-act--off > span{color:var(--muted)}
.sim-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;white-space:nowrap;border-radius:999px;border:0;background:var(--gradient-primary, linear-gradient(135deg,#1e3a5f 0%,#2c5282 100%));color:#fff;font-weight:500;font-size:.88rem;cursor:pointer;text-decoration:none;box-shadow:0 2px 6px rgba(10,22,40,.18)}
.sim-btn{position:relative}
.sim-btn::after{content:"";position:absolute;inset:-4px 0}   /* 36px button, 44px target */
.sim-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.sim-btn--alt{background:var(--surface);color:var(--sim-accent);border:1.5px solid var(--sim-accent);box-shadow:none}
:root[data-theme="dark"] .sim-btn{background:#0ea5e9;color:#0a1628}
:root[data-theme="dark"] .sim-btn--alt{background:transparent;color:#7dd3fc;border-color:#7dd3fc}
.sim-dest{flex:1 1 200px;display:flex;min-width:0}
.sim-dest select{min-height:36px;border-radius:10px;border:1px solid var(--field-border, var(--border));background:var(--input-bg, var(--surface));color:var(--text);padding:0 8px;width:100%;min-width:0}
.sim-link{background:none;border:0;color:var(--link-text, var(--link));font-weight:600;text-decoration:none;cursor:pointer;padding:8px 0;font-size:.9rem}
.sim-outcome{border-radius:16px;padding:16px 20px;margin:0 0 16px;border:1px solid var(--border)}
.sim-outcome h2{margin:0 0 4px;font-size:1.3rem}
.sim-outcome p{margin:0}
.sim-outcome--ok{background:var(--sim-ok-bg);border-color:var(--sim-ok)} .sim-outcome--ok h2{color:var(--sim-ok)}
.sim-outcome--no{background:var(--sim-no-bg);border-color:var(--sim-no)} .sim-outcome--no h2{color:var(--sim-no)}
.sim-outcome--mid{background:var(--sim-tint);border-color:var(--sim-accent)}
.sim-list{margin:0;padding-left:18px} .sim-list li{margin:0 0 6px} .sim-harm{color:var(--sim-no)}
.sim-checks{list-style:none;margin:0;padding:0}
.sim-check{position:relative;padding:4px 0 6px 26px}
.sim-check::before{position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.sim-check--ok::before{content:"";background:var(--sim-ok-bg)} .sim-check--ok::after{background:var(--sim-ok);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.sim-check--no::before{content:"";background:var(--sim-no-bg)} .sim-check--no::after{background:var(--sim-no);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/12px no-repeat}
.sim-check--skip::before{content:"";background:var(--bg-soft, var(--surface-2))} .sim-check--skip::after{background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat}
/* 2.20.2: the glyph is a masked stroke icon on ::after, over the circle on ::before (no Unicode characters as icons). */
.sim-check::after{content:"";position:absolute;left:0;top:3px;width:18px;height:18px}
.sim-check p{margin:4px 0 0;color:var(--muted);font-size:.9rem}
.sim-checks--small .sim-check{font-size:.9rem}
.sim-tag{display:inline-block;margin:0 6px 2px 0;padding:1px 8px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px}
.sim-tag--ok{background:var(--sim-ok-bg);color:var(--sim-ok)} .sim-tag--no{background:var(--sim-no-bg);color:var(--sim-no)}
.sim-timing{margin:0}
.sim-timing div{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding:6px 0}
.sim-timing div:first-child{border-top:0}
.sim-timing dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.sim-teach ul{margin:8px 0 10px;padding-left:18px} .sim-teach li{margin:0 0 6px}
.sim-again{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.sim-cat{font-size:1.2rem;margin:22px 0 10px}
.sim-cards{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sim-item{display:flex;align-items:center;gap:14px;margin:0}
.sim-item__body{flex:1 1 auto;min-width:0}
.sim-item__body h3{margin:0 0 4px;font-size:1.05rem}
.sim-item__body p{margin:0}
.sim-item--locked{opacity:.85}
.sim-last{font-size:.88rem;font-weight:600;margin-top:4px!important}
.sim-last--ok{color:var(--sim-ok)} .sim-last--mid{color:var(--sim-accent)}
@media (max-width:560px){.sim-item{flex-direction:column;align-items:stretch}.sim-item__go .sim-btn{width:100%}}

/* ===== Mass-Casualty Triage (2.19.0): the drill and the results; shares the .sim-* card system ===== */
.tri{--tri-green:#157347;--tri-yellow:#f2c230;--tri-red:#b02a37;--tri-black:#1b1f24}
.tri-progress{height:6px;border-radius:999px;background:var(--sim-tint);overflow:hidden;margin:10px 0 0}
.tri-progress span{display:block;height:100%;background:linear-gradient(90deg,#1e3a5f,#38bdf8);border-radius:999px}
.tri-scene summary{cursor:pointer;font-weight:700;list-style:none}
.tri-scene summary::after{content:" +";color:var(--muted)} .tri-scene[open] summary::after{content:" –"}
.tri-scene p{margin:10px 0 0}
.tri-patient__text{font-size:1.05rem;line-height:1.6}
.tri-revealed{background:var(--sim-tint);border-radius:10px;padding:8px 12px;margin:8px 0 0!important;font-weight:600}
.tri-h{font-size:1rem;margin:18px 0 8px}
.tri-steps{display:flex;flex-wrap:wrap;gap:8px}
.tri-form{margin:0 0 18px}
.tri-tags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:640px){.tri-tags{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tri-tag{min-height:56px;border-radius:14px;border:0;font-weight:500;font-size:.98rem;cursor:pointer;color:#fff;box-shadow:0 2px 8px rgba(10,22,40,.18)}
.tri-tag--minor{background:var(--tri-green)} .tri-tag--delayed{background:var(--tri-yellow);color:#1b1f24}
.tri-tag--immediate{background:var(--tri-red)} .tri-tag--expectant{background:var(--tri-black)}
.tri-tag:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}
:root[data-theme="dark"] .tri-tag--expectant{background:#000;box-shadow:0 0 0 1px #4a5568 inset}
.tri-tagged ol,.tri-results{list-style:none;margin:0;padding:0}
.tri-tagged li{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--border)} .tri-tagged li:first-child{border-top:0}
.tri-dot{width:12px;height:12px;border-radius:50%;flex:none}
.tri-dot--minor{background:var(--tri-green)} .tri-dot--delayed{background:var(--tri-yellow)} .tri-dot--immediate{background:var(--tri-red)} .tri-dot--expectant{background:var(--tri-black);box-shadow:0 0 0 1px #8a94a3}
.tri-result{padding:12px 0;border-top:1px solid var(--border)} .tri-result:first-child{border-top:0}
.tri-result h3{margin:0 0 6px;font-size:1rem}
.tri-result p{margin:4px 0}
.tri-result__tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tri-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:700;color:#fff}
.tri-pill--minor{background:var(--tri-green)} .tri-pill--delayed{background:var(--tri-yellow);color:#1b1f24} .tri-pill--immediate{background:var(--tri-red)}
.tri-pill--expectant{background:var(--tri-black)} .tri-pill--none{background:#8a94a3}

/* ===== NREMT Skills Checklists (2.20.0): the list, the live checklist and the result; built on the .sim-* tokens.
   The same block is in style.css (desktop) and phone.css (phone and tablet). ===== */
/* Text and glyphs on a filled status color: the page surface (white in light, the dark surface in dark). */
/* The checklist's script hides controls with the hidden attribute; a class display rule (.sim-btn is inline-flex) would
   otherwise override it (2.21.1). */
.skc [hidden]{display:none!important}
.skc{--skc-on:var(--surface);--skc-field:var(--field-border, var(--field));--skc-soft:var(--surface-2, var(--bg-soft))}
.skc-ico{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.skc-code{display:inline-block;font-family:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;font-size:.76rem;font-weight:700;letter-spacing:.02em;background:var(--sim-tint);color:var(--sim-accent);border-radius:6px;padding:2px 7px;vertical-align:2px}
.skc-group-title{font-size:1.25rem;margin:26px 0 2px}
.skc-group-copy{margin:0 0 12px!important}
.skc-howto h2{margin:0 0 10px}
.skc-howto__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.skc-howto__list li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.skc-howto__list .skc-ico{color:var(--sim-accent);margin-top:2px}
.skc-attrib{font-size:.85rem;color:var(--muted);margin:22px 0 0;line-height:1.55}
.skc-facts{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.skc-facts li{background:var(--sim-tint);border-radius:999px;padding:4px 12px;font-size:.88rem;color:var(--text)}
.skc-facts strong{font-variant-numeric:tabular-nums;color:var(--sim-accent)}
.skc-links{margin-top:10px!important}
.skc-links a{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.skc-recent{margin-top:6px!important}
.skc-mode{border:0;padding:0;margin:0 0 14px;min-width:0}
.skc-mode legend{font-weight:700;padding:0;margin:0 0 4px}
.skc-mode__opt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);margin-top:8px;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.skc-mode__opt:has(input:checked){border-color:var(--sim-accent);background:var(--sim-tint)}
.skc-mode__opt input{margin-top:4px;accent-color:var(--sim-accent);width:18px;height:18px;flex:0 0 auto}
.skc-mode__opt strong{display:block}
.skc-mode__opt span{font-size:.92rem;color:var(--muted)} .skc-mode__opt strong{color:var(--text)}
.skc-mode[disabled] .skc-mode__opt{cursor:default;opacity:.7}
.skc-sec{padding-bottom:10px}
.skc-sec .sim-card__band,.skc-crit .sim-card__band{display:flex;align-items:center;gap:8px}
.skc-step{position:relative;margin:0 -6px;padding:2px 0;border-top:1px solid var(--border)}
.skc-sec .sim-card__band + .skc-step,.skc-sec .sim-card__band + .sim-muted + .skc-step{border-top:0}
/* A legend sits on its fieldset's top border and hides it, so the divider above a scaled line is drawn separately. */
fieldset.skc-step{border:0;padding:2px 0;min-width:0}
fieldset.skc-step::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px solid var(--border)}
.skc-item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:48px;padding:8px 10px;border-radius:12px;cursor:pointer;transition:background-color .15s ease}
.skc-item:hover{background:var(--skc-soft)}
.skc-item input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.skc-box{width:24px;height:24px;border-radius:7px;border:2px solid var(--skc-field);display:flex;align-items:center;justify-content:center;background:var(--surface);transition:background-color .15s ease,border-color .15s ease}
.skc-box .skc-ico{width:16px;height:16px;stroke:var(--skc-on);stroke-width:3;opacity:0}
.skc-item input:checked + .skc-box{background:var(--sim-ok);border-color:var(--sim-ok)}
.skc-item input:checked + .skc-box .skc-ico{opacity:1}
.skc-item:has(input:checked){background:var(--sim-ok-bg)}
.skc-item input:focus-visible + .skc-box{outline:3px solid var(--focus);outline-offset:2px}
.skc-item--crit input:checked + .skc-box{background:var(--sim-no);border-color:var(--sim-no)}
.skc-item--crit:has(input:checked){background:var(--sim-no-bg)}
.skc-item--part{margin-left:14px}
.skc-item.is-locked{cursor:not-allowed;opacity:.5}
.skc-item.is-locked:hover{background:none}
.skc-text{line-height:1.45}
.skc-pts{min-width:28px;padding:2px 8px;border-radius:999px;background:var(--sim-tint);color:var(--sim-accent);font-size:.8rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.skc-group__head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;margin:6px 0 2px!important;padding:6px 10px 0;width:100%;box-sizing:border-box}
.skc-hint{margin:2px 10px 8px!important;font-size:.88rem}
.skc-seg{display:flex;flex-wrap:nowrap;max-width:340px;margin:0 10px 6px;border:1.5px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.skc-seg label{position:relative;cursor:pointer;flex:1 1 0;min-width:0}
.skc-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.skc-seg span{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;font-weight:500;font-variant-numeric:tabular-nums;border-left:1px solid var(--border);transition:background-color .15s ease,color .15s ease}
.skc-seg label:first-child span{border-left:0}
.skc-seg input:checked + span{background:var(--sim-accent);color:var(--skc-on)}
.skc-seg input:focus-visible + span{outline:3px solid var(--focus);outline-offset:-3px}
.skc-seg input:disabled + span{opacity:.5;cursor:not-allowed}
.skc-tip{margin:0 10px 8px 50px}
.skc-step--group .skc-tip,.skc-scale .skc-tip{margin-left:10px}
.skc-tip summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--muted);list-style:none;min-height:32px}
.skc-tip summary::-webkit-details-marker{display:none}
.skc-tip summary:hover{color:var(--sim-accent)}
.skc-tip p{margin:2px 0 4px!important;font-size:.92rem;color:var(--text);background:var(--skc-soft);border-radius:10px;padding:10px 12px}
.skc-crit .sim-card__band{color:var(--sim-no);background:var(--sim-no-bg)}
.skc-bar{position:sticky;bottom:12px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:8px 0 18px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg, var(--shadow-card))}
.skc-bar__clock{display:flex;align-items:center;gap:10px}
.skc-bar__score{flex:1 1 180px;margin:0!important;font-variant-numeric:tabular-nums}
.skc-bar__score strong{font-size:1.15rem;color:var(--text)}
.skc-bar__score.is-passing strong{color:var(--sim-ok)}
.skc-bar__finish{margin-left:auto}
.skc-bar .m-btn{width:auto;min-height:48px}
.sim-clock.is-low{background:var(--sim-no-bg);color:var(--sim-no)}
.sim-clock.is-up{background:var(--sim-no);color:var(--skc-on)}
.sim-clock .skc-ico{width:1em;height:1em}
.skc-outcome{display:flex;gap:14px;align-items:flex-start}
.skc-outcome__ico{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sim-no);color:var(--skc-on)}
.sim-outcome--ok .skc-outcome__ico{background:var(--sim-ok)}
.skc-outcome__ico .skc-ico{width:22px;height:22px;stroke-width:2.6}
.skc-why-list{list-style:none;margin:0;padding:0}
.skc-why-list li{display:grid;gap:3px;padding:10px 0;border-top:1px solid var(--border);line-height:1.5}
.skc-why-list li:first-child{border-top:0;padding-top:2px}
.skc-lost{color:var(--sim-no);font-weight:700;font-variant-numeric:tabular-nums;margin-left:4px}
.skc-whole summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center}
.skc-whole h3{font-size:1rem;margin:16px 0 4px}
.skc-scored{list-style:none;margin:0;padding:0}
.skc-scored__row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:7px 0;border-top:1px solid var(--border)}
.skc-scored__row:first-child{border-top:0}
.skc-scored__ico{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}
.skc-scored__ico .skc-ico{width:14px;height:14px;stroke-width:3}
.skc-scored__row--ok .skc-scored__ico{background:var(--sim-ok-bg);color:var(--sim-ok)}
.skc-scored__row--mid .skc-scored__ico,.skc-scored__row--no .skc-scored__ico{background:var(--sim-no-bg);color:var(--sim-no)}
.skc-scored__parts{display:block;font-size:.86rem;color:var(--muted)}
.skc-off{color:var(--sim-no)}
.skc-scored__pts{font-weight:700;font-variant-numeric:tabular-nums}
.skc-runs{list-style:none;margin:0;padding:0}
.skc-runs a{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--border);color:var(--text);min-height:44px}
.skc-runs li:first-child a{border-top:0}
.skc-runs li[aria-current] a{font-weight:700}
.skc-runs__date{min-width:74px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Skills Checklists for solo practice (2.22.0): the required-step marker, the practice patient, findings that open
   by themselves, Check Yourself and the bar's actions. Tokens only. */
.skc-item{grid-template-columns:28px minmax(0,1fr) auto auto}
.skc-item .skc-pts{grid-column:4}
.skc-req{display:inline-flex;align-items:center;color:var(--sim-no)}
.skc-req .skc-ico{width:16px;height:16px}
.skc-solo .sim-muted .skc-req{vertical-align:-.15em}
.skc-case-pick{list-style:none;margin:10px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.skc-case-pick a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;text-decoration:none;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.skc-case-pick a:hover{border-color:var(--sim-accent)}
.skc-case-pick a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skc-case-pick a[aria-current]{border-color:var(--sim-accent);background:var(--sim-tint);color:var(--sim-accent)}
.skc-case-pick a[aria-disabled="true"]:not([aria-current]){opacity:.55;cursor:not-allowed}
.skc-dispatch{margin:8px 0 0!important;padding:12px 14px;border-radius:12px;background:var(--skc-soft);line-height:1.55}
.skc-cue,.skc-find{margin:6px 10px 8px 50px;border-radius:10px;background:var(--sim-tint);border-left:3px solid var(--sim-accent);font-size:.93rem}
.skc-sec > .skc-cue{margin:8px 0}
.skc-step--group .skc-find,.skc-scale .skc-find{margin-left:24px}
.skc-find[data-pending]{display:none}
.skc-cue summary,.skc-find summary{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;cursor:pointer;font-weight:700;color:var(--sim-accent);list-style:none}
.skc-cue summary:focus-visible,.skc-find summary:focus-visible,.skc-answer summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
.skc-cue summary::-webkit-details-marker,.skc-find summary::-webkit-details-marker,.skc-answer summary::-webkit-details-marker{display:none}
.skc-cue > p,.skc-find > p{margin:0!important;padding:0 12px 10px;color:var(--text);line-height:1.5}
.skc-answer{margin:0 12px 10px}
.skc-answer summary{display:inline-flex;align-items:center;min-height:36px;cursor:pointer;font-weight:600;font-size:.88rem;color:var(--muted);list-style:none}
.skc-answer p{margin:0!important;padding:8px 10px;border-radius:8px;background:var(--surface)}
.skc-check h3{font-size:1rem;margin:18px 0 4px}
.skc-check:focus{outline:none}
.skc-check__time{margin:8px 0 0!important;padding:10px 12px;border-radius:10px;background:var(--sim-no-bg);color:var(--sim-no);font-weight:600}
.skc-unchecked{list-style:none;margin:6px 0 0;padding:0}
.skc-unchecked li{border-top:1px solid var(--border)}
.skc-unchecked li:first-child{border-top:0}
.skc-unchecked > li > label{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 4px;cursor:pointer;line-height:1.45}
.skc-unchecked > li > label > input{width:20px;height:20px;accent-color:var(--sim-ok);flex:0 0 auto}
/* A scaled step left at 0, with its own 0-N control (2.22.2) */
.skc-unchecked__scale{padding:10px 4px}
.skc-unchecked__scale fieldset{border:0;margin:0;padding:0;min-width:0}
.skc-unchecked__scale legend{padding:0;margin:0 0 8px;line-height:1.45}
.skc-unchecked__scale .skc-seg{margin:0}
.skc-expected dl{margin:6px 0 0}
.skc-expected dt{font-weight:700;margin-top:10px}
.skc-expected dd{margin:2px 0 0;line-height:1.55}
.skc-auto{list-style:none;margin:6px 0 4px;padding:0}
.skc-auto li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px 10px;padding:10px 12px;margin-top:6px;border-radius:10px;background:var(--sim-no-bg)}
.skc-auto li strong{grid-column:2;color:var(--sim-no)}
.skc-auto li span:not(.skc-auto__ico){grid-column:2;font-size:.9rem}
.skc-auto__ico{grid-row:1 / span 2;color:var(--sim-no);display:flex;padding-top:2px}
.skc-crit__note{margin:0 10px 8px 50px!important;font-size:.86rem}
.skc-bar__actions{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto}
.skc-bar__actions .skc-bar__finish{margin-left:0}
.skc-auto-why{color:var(--sim-no);font-weight:600;font-size:.92rem}
@media (max-width:560px){
  .skc-cue,.skc-find{margin-left:10px}
  .skc-crit__note{margin-left:10px!important}
  .skc-bar__actions{flex:1 1 100%}
  .skc-bar__actions .skc-bar__finish,.skc-bar__actions .sim-btn{flex:1 1 auto}
}
@media (max-width:560px){
  .skc-bar{padding:10px 12px}
  .skc-bar__finish{flex:1 1 100%;margin-left:0}
  .skc-tip{margin-left:10px}
  .skc-item{grid-template-columns:26px minmax(0,1fr) auto;gap:10px;padding:8px}
}
.m-app--tabs .skc-bar{bottom:calc(var(--tabs-h) + var(--safe-b) + 10px)}
@media (prefers-reduced-motion:reduce){.skc-item,.skc-box,.skc-seg span,.skc-mode__opt{transition:none}}

/* ---------- Action feedback: busy states (2.25.45; main.js initActionFeedback / window.emtpBusy) ----------
   The phone and tablet layouts' copy of style.css's busy states, in this file's tokens: the button that sent a form
   shows a spinner and its busy label in its own colors; the form's other buttons dim and wait; a thin sky bar along the
   top says the next page is on its way; a long job also gets a working panel. Reduced motion: nothing turns or slides (this file stops every animation then). */
:root{--busy-scrim:rgba(5,12,24,.45); --busy-bar:var(--sky)}
[data-theme="dark"]{--busy-scrim:rgba(0,0,0,.6)}
.busy-spin{display:inline-block;flex:none;box-sizing:border-box;width:1em;height:1em;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;vertical-align:-.15em;animation:busy-spin .75s linear infinite}
@keyframes busy-spin{to{transform:rotate(360deg)}}
.is-busy,form[aria-busy="true"]{cursor:progress}
.is-busy .busy-spin + .busy-label{white-space:nowrap}
:not(.btn):not(.m-btn).is-busy > .busy-spin{margin-right:.45em}
.is-busy--icon > svg{display:none}
.is-busy.is-busy.is-busy[aria-disabled]{opacity:1}   /* over page rules that dim [aria-disabled] (chapters.css, skills-check.css) */
.is-busy-peer{opacity:.5;cursor:progress}
.busy-failed{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--no)!important}
.busy-bar{position:fixed;top:var(--safe-t);left:0;right:0;height:3px;z-index:3100;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .2s ease}
.busy-bar.is-on{opacity:1}
.busy-bar::before,.busy-panel__track::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  border-radius:0 3px 3px 0;animation:busy-slide 1.15s ease-in-out infinite}
.busy-bar::before{background:var(--busy-bar)}
@keyframes busy-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.busy-panel{position:fixed;inset:0;z-index:2900;display:flex;align-items:center;justify-content:center;
  padding:16px calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  background:var(--busy-scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
.busy-panel.is-on{opacity:1}
.busy-panel__card{display:flex;align-items:flex-start;gap:14px;width:100%;max-width:440px;padding:18px 18px 20px;
  background:var(--surface);color:var(--text);border:1px solid var(--hair);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.busy-panel__spin{font-size:22px;color:var(--accent);margin-top:2px;border-width:2.5px}
.busy-panel__text{flex:1;min-width:0}
.busy-panel__title{margin:0 0 4px;font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.3;color:var(--text)}
.busy-panel__detail{margin:0;font-size:14.5px;line-height:1.45;color:var(--muted)}
.busy-panel__track{position:relative;height:4px;margin-top:14px;border-radius:999px;overflow:hidden;background:var(--border)}
.busy-panel__track::before{background:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .busy-spin{animation:none}   /* it holds still (the site's rule: no turning or pulsing); its words say it is working */
  .busy-bar::before{animation:none;width:100%;opacity:.7}
  .busy-panel__track{display:none}   /* a bar that holds still would read as finished */
  .busy-bar,.busy-panel{transition:none}
}