/* ==========================================================================
   Draco EMT Prep — design system
   Implements DESIGN.md. Consistency is a feature.
   Fonts: the stack names Inter first, but no Inter files are served yet (self-hosting waits on the owner), so visitors
   see their system UI font (San Francisco on Apple devices, Segoe UI on Windows). No font CDN: the CSP is self-only.
   Colors: components use the tokens below; :root[data-theme="dark"] (Dark theme section) redefines them.
   ========================================================================== */

:root{
  --navy:#1e3a5f; --navy-dark:#0f2439; --navy-deep:#0a1628; --navy-light:#2c5282;
  /* Draco Learning-matched accents */
  --dl-navy:#0a1628; --dl-navy2:#0f2439;
  --dl-sky1:#38bdf8; --dl-sky2:#7dd3fc; --dl-sky3:#a5f3fc;
  --sky:var(--dl-sky1);
  --gradient-primary:linear-gradient(135deg,#1e3a5f 0%,#2c5282 100%);
  --gradient-primary-hover:linear-gradient(135deg,#12263f 0%,#1e3a5f 100%);   /* the primary button's hover */
  --gradient-dark:linear-gradient(135deg,#12263f 0%,#1e3a5f 100%);
  --gradient-topbar:linear-gradient(180deg,#0a1628 0%,#0f2439 100%);
  --gradient-hero:linear-gradient(160deg,rgba(8,18,33,.96) 0%,rgba(13,30,50,.92) 55%,rgba(16,36,57,.9) 100%);
  --gradient-teal:linear-gradient(135deg,#0e7490 0%,#155e75 100%);
  --gradient-steel:linear-gradient(135deg,#334966 0%,#22344d 100%);      /* secondary buttons */
  --gradient-steel-dark:linear-gradient(135deg,#2a3e57 0%,#1a2942 100%);
  --gradient-meter:var(--gradient-primary);   /* progress-bar fills */
  --band-solid:#0a1628;   /* the footer, admin sidebar, flashcard ring center and exam camera box; in dark also the narrow-screen menu and the skip link */
  --text:#1a2332; --muted:#5a6b82; --faint:#5d6d82; --heading:var(--navy-dark);
  --bg:#ffffff; --bg-soft:#f5f7fa; --surface:#ffffff; --surface-2:#f5f7fa; --input-bg:#ffffff;
  --border:#e2e8f0; --border-strong:#cbd6e2;
  --field-border:#7b8ba0; --focus:#2c5282;   /* 2.13.1: form fields and focus rings at 3:1 or better (were 1.3:1 and 2.8:1) */
  /* Links (2.22.6). --link: navigation and standalone links. --link-text: a link inside running text, 3:1 or more
     against the text around it and 4.5:1 or more on the background (WCAG 1.4.1, technique G183). In secondary (muted)
     text a lighter blue can't reach 3:1 against the grey, so there the link is the darker navy. */
  --link:var(--navy); --link-hover:var(--navy-dark); --ink-accent:var(--navy-light);
  --link-text:#2d70b4; --link-text-muted:var(--navy-deep); --link-muted-deco:none;
  --accent-fill:var(--navy);   /* selected states: a chosen answer, a checked pill, the current filter */
  --track:#e6ecf3; --meter:var(--navy);   /* progress tracks and ring fills */
  --mist:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);
  /* Status: --ok/--no fill a badge behind white text; *-text is status text on the page or on its *-bg tint. Always
     paired with an icon and words. */
  --ok:#198754; --no:#b02a37;
  --ok-text:#155d3a; --ok-bg:#eaf5ef; --ok-line:#bfe3cd;
  --no-text:#8a2029; --no-bg:#fbeaec; --no-line:#f0c4ca;
  --info-bg:#eef3f8; --info-line:#cfe0ee;
  /* Light-mode values kept from before 2.22.6 so light mode looks the same (owner, 2026-10-06); each one passes AA
     where it is used (DESIGN.md). Dark mode maps them to the semantic tokens above. */
  --ok-ink:#2b7c4f; --ok-mark:#2f8f5a; --ok-edge:#3f8f5f; --ok-tint:#e7f5ec;   /* green text, ring/edge, chosen-answer edge, badge tint */
  --no-ink:#9a3b3b; --no-tint:#fbeef0;                                         /* flagged numbers, red answer tint */
  --track-soft:var(--bg-soft); --ring-track:#e3ecf5;                           /* flashcard tracks, score-ring tracks */
  --star:#0ea5e9;   /* a filled rating star */
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-head:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --shadow-card:0 4px 16px rgba(10,22,40,.05);
  --on-accent:#fff; --shadow-bar:0 -6px 18px rgba(10,22,40,.08);   /* text on an accent fill; a sticky bottom bar's shadow (2.25.33) */
  --shadow-btn:0 2px 6px rgba(0,0,0,.12);
  --radius:8px; --radius-card:16px;
  --h-btn:44px; --h-btn-lg:52px; --h-btn-sm:36px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body); color:var(--text); background:var(--bg);
  line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased;
}
/* Headings top out at 700, the type scale's heaviest weight (2.22.6; was 800). */
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; color:var(--heading); line-height:1.15; letter-spacing:-.02em; margin:0 0 .5em}
h1{font-size:2.5rem; letter-spacing:-.025em; line-height:1.08} h2{font-size:1.9rem; letter-spacing:-.02em; line-height:1.14} h3{font-size:1.35rem; letter-spacing:-.012em}
p{margin:0 0 1rem}
img{max-width:100%; height:auto}
/* Safety net: an inline icon SVG with no width/height attribute defaults to 1em
   (never full-page) even if its own class rule hasn't loaded. Class rules override. */
svg:not([width]):not([height]){width:1em; height:1em}

/* Links — navy, never underlined (owner's standing policy, 2.25.8) */
a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-hover); text-decoration:none}
/* 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); it changes color on hover, and keyboard focus shows the focus ring. Component
   links (buttons, chips, cards, navigation) 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}
:where(main) :where(p, label, dd, ul:not([class]) > li, ol:not([class]) > li) a:not([class]):hover{color:var(--link-hover)}
/* Secondary (muted) text: the darker navy in light; in dark no color reaches 3:1 against grey text, so the weight carries it. */
:where(.lead, .text-muted, .admin-help, .oauth-consent, .gcs-upsell, .sim-muted, .price-terms){
  --link-text:var(--link-text-muted); --link-text-deco:var(--link-muted-deco)}

/* Accessibility: skip link + visible keyboard focus */
.skip-link{position:absolute; left:-9999px; top:0; z-index:1000; background:var(--navy-dark); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 0; font-weight:600}
.skip-link:focus{left:0}
[data-theme="dark"] .skip-link{background:var(--band-solid)}
a:focus-visible, button:focus-visible, .profile-btn:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--focus); outline-offset:1px}

.container{max-width:1140px; margin:0 auto; padding:0 20px}
.section{padding:56px 0}
.section--soft{background:var(--bg-soft)}
.text-center{text-align:center}
.lead{font-size:1.15rem; color:var(--muted)}
.text-muted{color:var(--muted)}

/* ---------- Buttons: strict uniformity ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--h-btn); padding:0 22px;
  font-family:var(--font-body); font-size:.98rem; font-weight:500; line-height:1;
  color:#fff; background:var(--gradient-primary);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--radius);
  box-shadow:var(--shadow-btn); cursor:pointer; text-decoration:none;
  transition:background .15s ease; white-space:nowrap;
}
.btn:hover{background:var(--gradient-primary-hover); color:#fff; text-decoration:none}
.btn:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.btn--lg{height:var(--h-btn-lg); padding:0 30px; font-size:1.05rem}
.btn--sm{position:relative; height:var(--h-btn-sm); padding:0 16px; font-size:.9rem}
.btn--sm::after{content:""; position:absolute; inset:-4px 0}   /* 36px button, 44px target */
.btn--block{display:flex; width:100%}
.btn[disabled],.btn.is-disabled{opacity:.55; cursor:not-allowed}

/* Secondary / outline — same dimensions, white ground → fills navy on hover */
/* Secondary button — steel gradient (NEVER white); same height as primary */
.btn--outline{
  color:#fff; background:var(--gradient-steel); border:1px solid rgba(255,255,255,.18); box-shadow:var(--shadow-btn);
}
.btn--outline:hover{color:#fff; background:var(--gradient-steel-dark); border-color:rgba(255,255,255,.18)}

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:26px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ box-shadow:0 14px 34px rgba(13,58,92,.13); border-color:#d3deea}
[data-theme="dark"] .card:hover{border-color:var(--border-strong)}
/* Feature card with a gradient icon medallion + accent */
.feature-icon{
  width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--gradient-primary);box-shadow:0 6px 16px rgba(26,79,122,.28);margin-bottom:14px;
}
.feature-icon svg{width:26px;height:26px;color:#fff;stroke:currentColor;fill:none;stroke-width:2}
.card h3{margin-bottom:8px}

/* Banner feature cards — gradient header + body, with depth */
.feature-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:0 8px 26px rgba(13,58,92,.12); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease}
.feature-card:hover{ box-shadow:0 20px 46px rgba(13,58,92,.20)}
.feature-card__banner{background:var(--gradient-dark); padding:16px 22px; display:flex; align-items:center; gap:13px;
  border-bottom:3px solid var(--navy-light); box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.feature-card__banner h3{margin:0; color:#fff; font-size:1.2rem; text-shadow:0 1px 2px rgba(0,0,0,.35)}
.feature-card__icon{width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.18); display:inline-flex; align-items:center; justify-content:center; flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.feature-card__icon svg{width:21px; height:21px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.feature-card__body{padding:20px 22px 24px; color:var(--muted); line-height:1.6}
.feature-card__body p{margin:0}
[data-theme="dark"] .feature-card__banner{border-bottom-color:var(--accent-fill)}   /* the band itself turns neutral with --gradient-dark */

/* Eyebrow label + centered section heading with accent */
.eyebrow{display:inline-block;font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-accent);margin-bottom:10px}
.section-head{margin:0 auto 40px;text-align:center}
.section-head h2{font-size:2rem;max-width:none}         /* heading uses available width — wraps only when it must */
.section-head p, .section-head .lead{max-width:640px;margin-left:auto;margin-right:auto}  /* keep body copy readable */
.section-head .accent, .accent-rule{width:64px;height:4px;border-radius:4px;background:var(--gradient-primary);margin:14px auto 0}

/* ---------- Navbar ---------- */
.site-header{background:var(--gradient-topbar); box-shadow:0 4px 18px rgba(10,22,40,.28);
  position:sticky; top:0; z-index:100; border-bottom:1px solid rgba(255,255,255,.07)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; height:74px;
  max-width:none; padding-left:22px; padding-right:28px}
.nav .btn{box-shadow:0 4px 12px rgba(0,0,0,.18)}
.brand{display:flex; align-items:center; gap:13px}
/* Full emblem logo (badge + wordmark baked in) */
.brand__emblem{height:54px; width:auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.30))}
.brand--footer .brand__emblem{height:80px}
/* Header lockup: white dragon icon + maroon/gold wordmark image */
.brand img.brand__wordmark{height:58px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.brand img{height:46px; width:auto; display:block; filter:drop-shadow(0 3px 5px rgba(0,0,0,.40))}
/* Vertical separator between the dragon and the wordmark (like the brand lockup) */
.brand__sep{flex:none; width:2px; height:40px; border-radius:2px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 22%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.65) 78%, rgba(255,255,255,0) 100%);
  box-shadow:0 0 4px rgba(0,0,0,.35)}
/* Two-line stacked wordmark: small "DRACO" over bold "EMT Prep", left-aligned, with depth */
.brand__mark{display:flex; flex-direction:column; line-height:1; text-align:left}
.brand__mark-top{font-family:var(--font-head); font-size:.74rem; letter-spacing:.38em; text-transform:uppercase; font-weight:700;
  color:#eaf1f8; margin-bottom:4px; text-shadow:0 1px 2px rgba(0,0,0,.45)}
.brand__mark-main{font-family:var(--font-head); font-size:1.5rem; font-weight:700; letter-spacing:.01em;
  background:linear-gradient(180deg,#ffffff 0%, #dfe8f2 55%, #b9c7d8 100%); -webkit-background-clip:text; background-clip:text;
  color:#fff; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
/* "EMT" colorized sky-blue within the wordmark (overrides the parent's clipped gradient fill). */
.brand__mark-emt{-webkit-text-fill-color:#38bdf8; color:#38bdf8; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
/* Footer lockup: same as the header, a touch larger for the corporate footer. */
.brand--footer .brand__icon{height:54px}
.brand--footer .brand__sep{height:46px}
.brand--footer .brand__mark-top{font-size:.8rem}
.brand--footer .brand__mark-main{font-size:1.7rem}
.brand__name{color:#fff; font-family:var(--font-head); font-size:1.2rem; font-weight:700} /* legacy, admin */
.nav{display:flex; align-items:center; gap:22px}
.nav a{color:rgba(255,255,255,.9); font-weight:500}
.nav a:hover{color:#fff}
.nav .btn{color:#fff}
/* Narrow-screen menu button: a stroke icon in a 44px target (2.22.6; was a text character). */
.nav-toggle{display:none; width:44px; height:44px; padding:0; place-items:center; background:none; border:0; border-radius:10px;
  color:#fff; cursor:pointer}
.nav-toggle svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}

/* ---------- Forms ---------- */
.form-group{margin-bottom:16px}
label{display:block; font-weight:600; margin-bottom:6px; color:var(--heading)}
.input, input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=url], input[type=search], input[type=date], select, textarea{
  width:100%; height:44px; padding:0 12px; font-size:1rem; font-family:var(--font-body);
  color:var(--text); background:var(--input-bg); border:1px solid var(--field-border); border-radius:var(--radius);
}
textarea{height:auto;padding:10px 12px}
textarea{height:auto; padding:10px 12px; min-height:120px}
.input:focus, input:focus, select:focus, textarea:focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 2px var(--focus)}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}  /* honeypot */
/* Radio/checkbox groups: a <fieldset>/<legend> ties the caption to the group for screen readers,
   styled to look identical to a .form-group + <label>. */
fieldset.form-group{border:0; padding:0; margin:0 0 16px; min-inline-size:auto}
fieldset.form-group > legend{display:block; font-weight:600; margin-bottom:6px; color:var(--heading); padding:0; font-size:1rem}

/* ---------- Flash / alerts (navy + neutral; no forbidden colors) ---------- */
.flash{padding:12px 16px; border-radius:var(--radius); margin-bottom:16px; border:1px solid var(--border)}
.flash--success{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-text)}
.flash--error{background:var(--no-bg); border-color:var(--no-line); color:var(--no-text)}
.flash--info{background:var(--info-bg); border-color:var(--info-line); color:var(--heading)}
.flash a{font-weight:600; text-decoration:none}   /* in a message box the text and the link blue are close: the weight sets the link apart */

/* ---------- Quiz correct/incorrect (ONLY sanctioned red/green; icon+text too) ---------- */
.answer--correct{border-color:var(--ok); background:var(--ok-bg)}
.answer--incorrect{border-color:var(--no); background:var(--no-bg)}

/* ---------- Pricing cards: equal height, button pinned to the bottom (symmetry) ---------- */
.price-card{display:flex; flex-direction:column; height:100%}
.price-card .price-figure{margin:8px 0}
.price-card .price-desc{color:var(--muted)}
.price-card .btn{margin-top:auto}   /* auto top-margin pushes the button to the bottom edge on every card */
/* Featured (Monthly) — the plan we promote hardest */
.price-grid{align-items:stretch}   /* equal-height cards so buttons align */
.price-card--featured{position:relative;border:2px solid var(--accent-fill);box-shadow:0 22px 50px -20px rgba(13,58,92,.45);padding-top:34px}
.price-card .price-note{margin-top:8px;margin-bottom:0}
.price-card__ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gradient-primary);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;box-shadow:0 4px 10px rgba(13,58,92,.32);white-space:nowrap}
.price-note{color:var(--muted);font-size:.78rem;margin:10px 0 0}
@media(max-width:820px){.price-card--featured{transform:none}}
/* Institutional / education band */
.edu-band{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:44px;
  background:var(--gradient-dark);border-radius:18px;padding:30px 34px;box-shadow:0 20px 46px -22px rgba(13,58,92,.5)}
.edu-band::after{content:"";position:absolute;right:0;bottom:0;left:0;height:110px;pointer-events:none;
  background:url('/assets/images/tex-ecg.svg') repeat-x left center;background-size:auto 110px;opacity:.15;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 100%);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 100%)}
.edu-band__body,.edu-band__cta{position:relative;z-index:1}
.edu-band .eyebrow{color:rgba(255,255,255,.82)}
.edu-band h3{color:#fff;margin:6px 0 8px;font-size:1.5rem}
.edu-band__body{max-width:640px}
.edu-band__body p{color:rgba(255,255,255,.9);margin:0;line-height:1.6}
.edu-band__body strong{color:#fff}
.edu-band__cta{display:flex;flex-direction:column;gap:10px;flex:none}
.edu-band__cta .btn--outline{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)}
.edu-band__cta .btn--outline:hover{background:rgba(255,255,255,.26);color:#fff;border-color:rgba(255,255,255,.5)}
@media(max-width:720px){.edu-band__cta{width:100%}.edu-band__cta .btn{width:100%}}

/* ---------- Auth cards (login / register / contact / verify / reset) ---------- */
.auth-card{max-width:468px; margin:0 auto; padding:36px 32px 30px; position:relative;
  border-radius:16px; box-shadow:0 20px 54px rgba(13,58,92,.16); border:1px solid var(--border)}
/* Auth-card brand: the header wordmark on a navy chip, so it reads identically to the site header. */
.auth-card::before{content:""; display:block; width:256px; height:92px; margin:0 auto 18px; border-radius:16px;
  background:url('/assets/images/lockup-dark.svg?v=1') center/204px no-repeat, linear-gradient(135deg,#0d3a5c 0%,#1a4f7a 100%);
  box-shadow:0 10px 24px rgba(26,79,122,.34), inset 0 1px 0 rgba(255,255,255,.25)}
.auth-card h1{font-size:1.55rem; margin-bottom:4px}
.auth-page main{min-height:62vh}
.auth-page .section--soft{padding:48px 0 64px}

/* Social sign-in buttons + remember row + divider */
.oauth-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:48px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:500; font-family:var(--font-body);
  font-size:.95rem; cursor:pointer; text-decoration:none; margin-bottom:10px; box-shadow:0 1px 2px rgba(13,58,92,.06);
  transition:background .15s ease, border-color .15s ease}
.oauth-btn:hover{background:var(--bg-soft); color:var(--text); border-color:var(--border-strong)}
.oauth-btn svg{width:20px; height:20px; flex:none}
.oauth-btn--apple{background:#000; color:#fff; border-color:#000}
.oauth-btn--apple:hover{background:#141414; color:#fff}
.oauth-divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.78rem; margin:16px 0; text-transform:uppercase; letter-spacing:.06em}
.oauth-divider::before, .oauth-divider::after{content:""; flex:1; height:1px; background:var(--border)}
.remember-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:-2px 0 16px}
.remember-row label{font-weight:400; display:flex; gap:8px; align-items:center; margin:0}
.remember-row a{font-size:.9rem}

/* Segmented one-time-code field (admin 2FA). Base = a clean centered single input (works with no JS);
   JS enhances it into 6 symmetric cells overlaid by a transparent input. */
.otp-field{position:relative; width:100%; max-width:312px; margin:0 auto}
.otp-field__input{width:100%; height:60px; text-align:center; font-family:var(--font-head); font-weight:700;
  font-size:1.6rem; letter-spacing:.5em; text-indent:.5em; caret-color:var(--ink-accent)}
.otp-field__cells{display:none}
/* enhanced */
.otp-field.is-enhanced .otp-field__cells{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.otp-field.is-enhanced .otp-field__cells span{height:60px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:1.6rem; color:var(--text);
  background:var(--input-bg); border:2px solid var(--border); border-radius:12px; transition:border-color .12s, box-shadow .12s}
.otp-field.is-enhanced .otp-field__cells span.is-filled{border-color:var(--ink-accent)}
.otp-field.is-enhanced .otp-field__cells span.is-active{border-color:var(--dl-sky1); box-shadow:0 0 0 3px rgba(56,189,248,.22)}
.otp-field.is-enhanced .otp-field__input{position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  opacity:0; letter-spacing:normal; text-indent:0; cursor:pointer}
[data-theme="dark"] .oauth-btn:hover{background:var(--surface-2)}
[data-theme="dark"] .oauth-btn--apple{border-color:var(--border-strong)}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff; padding:88px 0 120px;
  background:
    radial-gradient(1100px 480px at 50% -12%, rgba(56,189,248,.18), transparent 60%),
    linear-gradient(160deg,#0a1628 0%, #0d2136 52%, #102a44 100%);
}
/* Star of Life emblem — premium 3D render, left side, blended into the hero */
.hero-logo,.hero-sol{position:absolute;top:50%;transform:translateY(-50%);width:260px;height:260px;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.42}
.hero-logo{left:28px;background-image:url('/assets/images/draco_w.png');opacity:.26}
.hero-sol{right:28px;background-image:url('/assets/images/hero-star.png')}
.hero > .container{position:relative;z-index:1}
@media(max-width:1050px){.hero-logo,.hero-sol{width:210px;height:210px;opacity:.34}.hero-logo{left:10px}.hero-sol{right:10px}}
@media(max-width:760px){.hero-logo,.hero-sol{display:none}}

/* Home intro ("What is Draco EMT Prep") */
.narrow-copy{max-width:840px}
.intro-lead{font-size:1.08rem;line-height:1.75;color:var(--text);margin:0 0 18px}
.check-list{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:13px 30px}
.check-list li{position:relative;padding-left:32px;color:var(--text);line-height:1.5}
.check-list li::before{content:"";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"),var(--gradient-primary);
  background-repeat:no-repeat;background-position:center;box-shadow:0 2px 6px rgba(26,79,122,.28)}
@media(max-width:620px){.check-list{grid-template-columns:1fr}}

/* Credibility band — "Built by EMS professionals" */
.creds{position:relative;overflow:hidden;background:var(--gradient-dark);color:#fff}
.creds::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:url('/assets/images/tex-ecg.svg') repeat-x left center;background-size:auto 120px;opacity:.13;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.creds > .container{position:relative;z-index:1}
.creds .eyebrow{color:rgba(255,255,255,.82)}
.creds h2{color:#fff}
.creds .section-head .accent{background:rgba(255,255,255,.5)}
.creds__copy{max-width:820px;margin:0 auto}
.creds__copy p{color:rgba(255,255,255,.9);font-size:1.05rem;line-height:1.7}
.creds__copy strong{color:#fff}
.cred-stats{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:34px}
.cred-stat{flex:1 1 220px;max-width:280px;text-align:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:22px 20px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cred-stat__n{font-family:var(--font-head);font-size:1.7rem;font-weight:700;color:#fff;line-height:1.1}
.cred-stat__l{color:rgba(255,255,255,.82);font-size:.92rem;margin-top:6px}
.hero h1{color:#fff; font-size:2.75rem; letter-spacing:-.01em; text-shadow:0 2px 18px rgba(0,0,0,.18)}
.hero .lead{color:rgba(255,255,255,.92); font-size:1.2rem; max-width:860px; margin-left:auto; margin-right:auto}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.hero .btn{box-shadow:0 8px 22px rgba(0,0,0,.22)}
/* The primary action on a navy ground: the sky gradient with navy text, as on the phone site and in the iOS app
   (2.12.3; the navy button all but disappeared on the navy hero). */
.btn--sky{background:linear-gradient(90deg,#38bdf8,#7dd3fc); color:var(--navy-deep); border-color:transparent}
.btn--sky:hover{background:linear-gradient(90deg,#4cc6fa,#90dbfd); color:var(--navy-deep)}
.hero .btn--sky{box-shadow:0 10px 26px -10px rgba(56,189,248,.75)}
.hero .btn--outline{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.hero .btn--outline:hover{background:rgba(255,255,255,.24); color:#fff}
/* trust strip under hero buttons */
.hero-note{margin-top:18px; font-size:.9rem; color:rgba(255,255,255,.8)}
.hero-note .tick{width:14px;height:14px;fill:none;stroke:#cfe0ee;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-right:3px}

/* Draco Learning-matched hero pieces */
.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 13px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.9);
  font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px}
.hero__badge svg{width:15px;height:15px;fill:none;stroke:var(--dl-sky2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero h1 .grad{background:linear-gradient(110deg,#38bdf8 0%,#7dd3fc 30%,#a5f3fc 50%,#7dd3fc 70%,#38bdf8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero__stats{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 44px;margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);max-width:820px;margin-left:auto;margin-right:auto}
.hero__stat{text-align:center;min-width:96px}
.hero__stat b{display:block;font-family:var(--font-head);font-weight:700;font-size:1.75rem;color:#fff;line-height:1;letter-spacing:-.01em}
.hero__stat span{display:block;margin-top:6px;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.6)}
/* Signature wave divider into the section below. The wave is a mask filled with the page color, so it matches the
   page in both themes (2.22.6: it was always white, a white strip under the hero in dark mode). */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:64px;z-index:2;pointer-events:none;background:var(--bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,46 C260,6 560,6 720,26 C900,48 1180,58 1440,30 L1440,64 L0,64 Z'/%3E%3C/svg%3E") bottom center/100% 64px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,46 C260,6 560,6 720,26 C900,48 1180,58 1440,30 L1440,64 L0,64 Z'/%3E%3C/svg%3E") bottom center/100% 64px no-repeat}
@media(max-width:760px){.hero__stats{gap:14px 26px}.hero__stat b{font-size:1.4rem}}

/* ---------- Footer ---------- */
.site-footer{background:var(--band-solid); color:rgba(255,255,255,.82); padding:34px 0 14px; margin-top:48px}
.site-footer h5{color:#fff; font-family:var(--font-body); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 9px}
.footer-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:16px 26px}
.footer-grid p{margin:0 0 5px; font-size:.88rem; line-height:1.35}
.footer-brand p{font-size:.9rem; line-height:1.55}
.site-footer a{color:rgba(255,255,255,.82)}
.site-footer a:hover{color:#fff}
.footer-brand img{height:32px; margin-bottom:10px}
.footer-social{display:flex; gap:9px; margin-top:12px}
.footer-social span{ /* real icons present, NO links for now */
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14); display:inline-flex; align-items:center; justify-content:center;
  color:#fff; cursor:default; transition:background .15s ease, transform .15s ease;
}
.footer-social span:hover{background:rgba(255,255,255,.16);}
.footer-social svg{width:15px; height:15px; fill:currentColor; display:block}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:20px; padding-top:12px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.82rem; color:rgba(255,255,255,.65)}
.footer-bottom a{color:rgba(255,255,255,.75)}
.version-badge{background:rgba(255,255,255,.12); color:#fff; padding:2px 8px; border-radius:6px; font-size:.75rem}
.legal-disclaimer{font-size:.76rem; color:rgba(255,255,255,.55); margin-top:10px; line-height:1.45}
/* Links inside the footer's running text: on the dark band no link color can stand 3:1 apart from the text around it,
   so they are white and weight 600 (never underlined, 2.25.8). The column links are a list of links, not running text. */
.footer-brand p a, .legal-disclaimer a{color:#fff; font-weight:600; text-decoration:none}

/* reCAPTCHA v3 badge is shown (v3 is invisible/no-checkbox; the floating badge is the visible proof + Google's required disclosure). */
/* Hide the floating reCAPTCHA badge (v3 still runs). Google's required attribution
   text is kept in the site footer, which satisfies their branding terms. */
.grecaptcha-badge{visibility:hidden !important}

/* Toast notifications — upper-right, on-theme, self-closing */
.toast-container{position:fixed;top:18px;right:18px;z-index:2000;display:flex;flex-direction:column;gap:10px;max-width:360px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-left:4px solid var(--accent-fill);border-radius:10px;padding:12px 14px;
  box-shadow:0 14px 34px -10px rgba(13,58,92,.4);font-size:.9rem;line-height:1.45;
  transform:translateX(120%);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.toast.is-in{transform:translateX(0);opacity:1}
.toast--success{border-left-color:var(--ok)}
.toast--error{border-left-color:var(--no)}
.toast--info{border-left-color:var(--ink-accent)}
.toast__icon{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.toast--success .toast__icon{color:var(--ok)}.toast--error .toast__icon{color:var(--no)}.toast--info .toast__icon{color:var(--ink-accent)}
.toast__msg{flex:1}
/* Close: a 44px target (2.22.6; was 20px), 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 -12px -12px -4px;padding:0;
  background:none;border:none;border-radius:8px;color:var(--muted);cursor:pointer}
.toast__close:hover{color:var(--heading)}

/* Confetti (celebration) — on-brand colors only */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:1500;overflow:hidden}
.quiz-result__cheer{margin:0 0 4px;font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:#1a6fa8;letter-spacing:.01em}
[data-theme="dark"] .quiz-result__cheer{color:var(--ink-accent)}
.confetti-piece{position:absolute;top:-24px;border-radius:2px;opacity:.95;animation:confetti-fall linear forwards}
@keyframes confetti-fall{0%{transform:translateY(-24px) rotate(0);opacity:1}100%{transform:translateY(106vh) rotate(720deg);opacity:.9}}

/* Quiz results */
.quiz-result{max-width:560px;margin:0 auto;text-align:center}
.quiz-result__ring{--pct:0;width:150px;height:150px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--meter) calc(var(--pct)*1%), var(--ring-track) 0)}
.quiz-result__ring-inner{width:118px;height:118px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center}
.quiz-result__pct{font-family:var(--font-head);font-size:2.1rem;font-weight:700;color:var(--heading);line-height:1}
.quiz-result__sub{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* ===== Student dashboard ===== */
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.dash-head h1{margin:0}
.dash-sub{color:var(--muted);margin:4px 0 0}
.dash-head__actions{display:flex;gap:8px}
.dash-freebar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0;
  background:linear-gradient(135deg,#eef4fa,#e6eef8);border:1px solid #d5e2f0;border-radius:10px;padding:12px 16px;font-size:.92rem}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;align-items:start}
.dash-grid--hero{grid-template-columns:1.3fr 1fr}
@media(max-width:820px){.dash-grid,.dash-grid--hero{grid-template-columns:1fr}}
/* Onboarding */
.dash-welcome{display:grid;grid-template-columns:1.5fr 1fr;overflow:hidden;margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card)}
.dash-welcome__body{padding:28px 30px}
.dash-welcome__body h2{margin:6px 0 8px}
.onboard-steps{list-style:none;padding:0;margin:20px 0 24px;display:flex;flex-direction:column;gap:14px}
.onboard-steps li{display:flex;gap:14px;align-items:flex-start}
.onboard-steps__n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gradient-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 4px 10px rgba(26,79,122,.3)}
.onboard-steps li div{line-height:1.5}
.dash-welcome__aside{background:var(--gradient-dark);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px;text-align:center}
.dash-welcome__aside p{color:rgba(255,255,255,.85);font-size:.9rem;margin:0}
.dash-welcome__ring{width:130px;height:130px;border-radius:50%;border:8px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:2.6rem;font-weight:700;color:rgba(255,255,255,.5)}
@media(max-width:720px){.dash-welcome{grid-template-columns:1fr}}
/* Readiness hero */
.readiness-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.readiness-ring{--pct:0;width:150px;height:150px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--meter) calc(var(--pct)*1%), var(--ring-track) 0)}
.readiness-ring__inner{width:118px;height:118px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center}
.readiness-ring__n{font-family:var(--font-head);font-size:2rem;font-weight:700;color:var(--heading);line-height:1}
.readiness-ring__l{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.readiness-hero__body{flex:1;min-width:220px}
.readiness-cov{display:flex;align-items:center;gap:10px;margin:12px 0 8px;font-size:.82rem;color:var(--muted)}
.readiness-cov .mastery-bar{flex:1}
.readiness-caveat{font-size:.8rem;color:var(--muted);margin:0}
.dash-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dash-focus{display:flex;flex-direction:column;gap:8px}
.dash-focus__item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--border);border-radius:9px;background:var(--bg-soft);font-weight:600;color:var(--heading)}
.dash-focus__item:hover{background:#e9f0f8;color:var(--heading)}
[data-theme="dark"] .dash-focus__item:hover{background:var(--info-bg)}
.dash-focus__pct{background:var(--gradient-primary);color:#fff;border-radius:6px;padding:2px 9px;font-size:.8rem}
.dash-app{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:18px;
  background:var(--gradient-dark);border-radius:14px;padding:22px 26px;box-shadow:0 16px 36px -18px rgba(13,58,92,.5)}
.dash-app h3{color:#fff;margin:0 0 4px}
.dash-app p{color:rgba(255,255,255,.88);margin:0;max-width:52ch}
.dash-app .store-badges{margin-top:0}
@media(max-width:640px){.dash-app{justify-content:center;text-align:center}}
.dash-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.study-domains{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.study-domain{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--navy-light);border-radius:10px;padding:15px 17px;box-shadow:var(--shadow-card)}
.study-domain__body h4{margin:0 0 3px;font-size:1rem}
.study-domain__body p{margin:0;color:var(--muted);font-size:.82rem}
.dash-mode{display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;box-shadow:var(--shadow-card);color:inherit;transition:transform .12s,box-shadow .12s}
.dash-mode:hover{box-shadow:0 12px 26px -12px rgba(13,58,92,.3);color:inherit}
.dash-mode.is-off{opacity:.55;pointer-events:none}
.dash-mode__icon{width:42px;height:42px;border-radius:10px;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.dash-mode__icon svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dash-mode h4{margin:0 0 4px;font-size:1.05rem}
.dash-mode p{margin:0;color:var(--muted);font-size:.88rem}

/* ---------- Admin console ---------- */
.admin-topbar{background:var(--gradient-dark);color:#fff}
.admin-topbar .container{display:flex;align-items:center;gap:24px;height:58px}
.admin-topbar .brand__name{font-size:1.05rem}
.admin-topbar nav{display:flex;gap:18px;margin-left:auto;align-items:center}
.admin-topbar nav a{color:rgba(255,255,255,.9)}
.admin-topbar nav a:hover{color:#fff}
.admin-main{padding:28px 0;min-height:70vh}
.data-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid #b9c8da;border-radius:10px;overflow:hidden;box-shadow:0 4px 16px -4px rgba(13,58,92,.18);font-size:.9rem}
.data-table th,.data-table td{padding:9px 13px;text-align:left;border-bottom:1px solid #d3deea}
.data-table th{background:var(--navy-dark);font-weight:600;color:#fff;letter-spacing:.01em;white-space:nowrap}
.data-table tbody tr:nth-child(odd){background:var(--surface)}
.data-table tbody tr:nth-child(even){background:#e4ecf6}
.data-table tbody tr:hover{background:#d5e3f2}
.data-table tr:last-child td{border-bottom:0}
/* Table standard: no wrap, sortable headers, truncate + popup, page controls */
.data-table td{white-space:nowrap}
.data-table th.th-sortable{cursor:pointer;user-select:none;position:relative;padding-right:22px}
.data-table th.th-sortable::after{content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);
  border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid rgba(255,255,255,.4)}
.data-table th.th-sortable:hover::after{border-bottom-color:rgba(255,255,255,.75)}
.data-table th.th-sortable[data-sort="asc"]::after{border-bottom:5px solid #fff;border-top:0}
.data-table th.th-sortable[data-sort="desc"]::after{border-top:5px solid #fff;border-bottom:0}
.td-more{position:relative;display:inline-grid;place-items:center;vertical-align:middle;min-width:24px;height:24px;margin-left:2px;padding:0 4px;
  border:0;border-radius:3px;background:none;font:inherit;line-height:1;color:var(--link);cursor:pointer}
/* "Show full text": a dots icon (2.22.6; was a text ellipsis), a 44px hit area around the 24px button, and the site's
   3px focus ring (it used to remove the outline, leaving a 1.07:1 background change). */
.td-more::after{content:"";position:absolute;inset:-10px}
.td-more svg{width:16px;height:16px;fill:currentColor}
.td-more:hover{background:var(--bg-soft)}
.td-more:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.table-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:10px 2px 0;font-size:.85rem}
.table-controls__info{color:var(--muted)}
.table-controls__size{color:var(--muted);display:flex;align-items:center;gap:6px}
.table-controls__size select{height:30px;padding:2px 8px;width:auto}
/* Truncation popup */
.td-popup-overlay{position:fixed;inset:0;background:rgba(10,28,45,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.td-popup{background:var(--surface);border-radius:12px;max-width:560px;width:100%;max-height:80vh;overflow:auto;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.5);position:relative;padding:24px 26px}
/* Close: a stroke icon in a 44px target (2.22.6; was a text character); the text starts below it. */
.td-popup__close{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:44px;height:44px;padding:0;
  background:none;border:none;border-radius:10px;color:var(--muted);cursor:pointer}
.td-popup__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.td-popup__close:hover{color:var(--heading)}
.td-popup__body{white-space:pre-wrap;word-break:break-word;color:var(--text);line-height:1.6;font-size:.95rem;margin-top:26px}
.pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.75rem;font-weight:600}
.pill--draft{background:var(--info-bg);color:var(--heading)}
.pill--in_review{background:#e6edf5;color:#3b5876}   /* navy-neutral (no forbidden amber) */
.pill--published{background:var(--ok-bg);color:var(--ok-text)}
.pill--retired{background:#f1f3f5;color:var(--muted)}   /* 2.22.6: #6c757d was 4.2:1 */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:var(--shadow-card)}
.stat-card .n{font-size:1.9rem;font-weight:700;color:var(--heading);font-family:var(--font-head)}
.stat-card .l{color:var(--muted);font-size:.85rem}
.option-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-soft)}
.option-row .oc{margin-top:12px}
.admin-form label{margin-top:10px}
.admin-help{font-size:.82rem;color:var(--muted);margin:2px 0 0}
/* Red status text: --no in light (6.5:1 on white), --no-text in dark (where --no is 3.7:1). */
.text-no,.text-no:hover{color:var(--no)}
[data-theme="dark"] .text-no,[data-theme="dark"] .text-no:hover{color:var(--no-text)}
/* Inline icons (never emoji) */
.ico-yes{width:15px;height:15px;fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.ico-no{color:var(--muted)}
.ico-check-sm,.ico-x-sm,.ico-clock{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}

/* ---------- Admin console (v1.29 — sidebar layout) ---------- */
body.admin{background:var(--bg-soft)}
.admin-layout{display:flex;align-items:stretch;min-height:74vh}
.admin-sidebar{width:214px;flex:none;background:var(--band-solid);color:rgba(255,255,255,.72);padding:18px 12px;transition:width .18s ease}
.admin-sidebar nav{position:sticky;top:14px}
.admin-sidebar__top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 12px}
.admin-sidebar__toggle{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);cursor:pointer;transition:background .15s}
.admin-sidebar__toggle:hover{background:rgba(255,255,255,.16);color:#fff}
.admin-sidebar__toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
/* Collapsed: icon-only rail; content expands */
.admin-layout.is-collapsed .admin-sidebar{width:60px;padding:18px 8px}
.admin-layout.is-collapsed .admin-sidebar__label{display:none}
.admin-layout.is-collapsed .admin-sidebar__top{justify-content:center;padding:2px 0 12px}
.admin-layout.is-collapsed .admin-sidebar__toggle svg{transform:rotate(180deg)}
.admin-layout.is-collapsed .admin-navlink{justify-content:center;padding:10px 0}
.admin-layout.is-collapsed .admin-navlink span{display:none}
.admin-sidebar__label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:700;padding:2px 12px 12px}
.admin-navlink{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;color:rgba(255,255,255,.74);font-weight:600;font-size:.92rem;margin-bottom:2px}
.admin-navlink svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.admin-navlink:hover{background:rgba(255,255,255,.08);color:#fff}
.admin-navlink.is-active{background:var(--gradient-primary);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.admin-content{flex:1;min-width:0;padding:24px 30px 44px;max-width:100%}
body.admin .site-footer{margin-top:0} /* sidebar flush to footer, no gap — footer itself is identical to every other page */

.admin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
/* Uniform admin typography across ALL admin pages (regardless of wrapper markup) */
.admin-content h1{font-size:1.5rem;letter-spacing:-.01em;line-height:1.2;margin:0 0 16px}
.admin-content .admin-head h1{margin:0}
.admin-content h2{font-size:1.15rem;margin:0 0 12px}
.admin-content h3{font-size:1rem;letter-spacing:0;margin:0 0 12px}
.admin-head__actions{display:flex;gap:8px}
.admin-back{display:inline-block;color:var(--muted);font-size:.85rem;font-weight:600;margin-bottom:6px}
.admin-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-accent);font-weight:700;margin:22px 0 10px}

/* Compact KPI tiles — dense, accent-edged, not space-wasting */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.kpi{display:block;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--navy-light);
  border-radius:10px;padding:13px 15px;box-shadow:var(--shadow-card);transition:transform .12s,box-shadow .12s;color:inherit}
a.kpi:hover{box-shadow:0 10px 22px -12px rgba(13,58,92,.3);color:inherit}
.kpi__n{font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--heading);line-height:1.1}
.kpi__l{color:var(--text);font-weight:600;font-size:.82rem;margin-top:2px}
.kpi__sub{color:var(--muted);font-size:.72rem;margin-top:3px}
.kpi--accent{background:var(--gradient-dark);border-color:transparent;border-left-color:#4f97cc}
.kpi--accent .kpi__n,.kpi--accent .kpi__l{color:#fff}
.kpi--accent .kpi__sub{color:rgba(255,255,255,.82)}
.kpi--flag{border-left-color:#b04a4a}
.kpi--flag .kpi__n{color:var(--no-ink)}

/* Stat tiles — icon + value + label, uniform & clear */
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.stat-tile{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:13px 15px;box-shadow:var(--shadow-card);color:inherit}
a.stat-tile:hover{border-color:var(--navy-light);box-shadow:0 8px 18px -10px rgba(13,58,92,.4);color:inherit}
.stat-tile__icon{width:40px;height:40px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#eaf1f8;color:var(--link)}
.stat-tile__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stat-tile__icon--ok{background:#e7f3ec;color:#1c7a46}
.stat-tile__icon--flag{background:#f7e9e9;color:#a13a3a}
[data-theme="dark"] .stat-tile__icon{background:var(--info-bg)}
[data-theme="dark"] .stat-tile__icon--ok{background:var(--ok-bg);color:var(--ok-text)}
[data-theme="dark"] .stat-tile__icon--flag{background:var(--no-bg);color:var(--no-text)}
.stat-tile__n{font-family:var(--font-head);font-size:1.4rem;font-weight:700;color:var(--heading);line-height:1.05}
.stat-tile__l{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-top:2px}
.stat-tile__sub{font-size:.72rem;color:var(--muted);margin-top:1px}
/* Chart cards */
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-card)}
.chart-card h3{font-size:1rem;margin:0 0 12px}
.chart-card__canvas{position:relative;height:250px}
.chart-card__canvas--sm{height:220px}
/* Dense metric strip (legacy) */
.metric-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.metric{display:block;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:11px 13px;box-shadow:var(--shadow-card);color:inherit;position:relative}
a.metric:hover{border-color:var(--navy-light);box-shadow:0 6px 14px -8px rgba(13,58,92,.35);color:inherit}
.metric__n{font-family:var(--font-head);font-size:1.4rem;font-weight:700;color:var(--heading);line-height:1.05}
.metric__l{font-size:.68rem;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.metric__sub{font-size:.7rem;color:var(--muted);margin-top:2px}
.metric--accent{background:var(--gradient-dark);border-color:transparent}
.metric--accent .metric__n{color:#fff}.metric--accent .metric__l,.metric--accent .metric__sub{color:rgba(255,255,255,.8)}
.metric--flag .metric__n{color:var(--no-ink)}
.admin-cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:16px;align-items:start}
[data-theme="dark"] .metric--accent{background:linear-gradient(135deg,#2b2d31,#3a3d42)}   /* a raised grey tile, above the page's surfaces */
.admin-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;align-items:start}
.admin-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;box-shadow:0 8px 24px -14px rgba(13,58,92,.30);margin-top:26px}
.admin-panel h3{font-size:1.08rem;font-family:var(--font-head);color:var(--heading);margin:0 0 16px;padding-bottom:13px;border-bottom:1px solid var(--border)}
.kpi-grid + .admin-panel,.admin-head + .kpi-grid{margin-top:22px}
.admin-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}
.admin-filters input,.admin-filters select{height:38px;max-width:260px}
.admin-form .form-row{display:flex;gap:12px;flex-wrap:wrap}
.admin-form .form-row .form-group{flex:1;min-width:160px}
.table-wrap{overflow-x:auto}
.row--blocked td{background:rgba(154,59,59,.05)!important}
.btn--danger{background:linear-gradient(135deg,#8f3a3a,#b04a4a);border-color:transparent}
.btn--danger:hover{background:linear-gradient(135deg,#7d3131,#8f3a3a)}
.mini-bar{display:inline-block;width:96px;height:8px;border-radius:6px;background:var(--bg-soft);vertical-align:middle;overflow:hidden;border:1px solid var(--border)}
.mini-bar span{display:block;height:100%;background:var(--gradient-primary)}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:8px}
.bar-chart__col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bar-chart__bar{width:100%;max-width:34px;min-height:2px;border-radius:5px 5px 0 0;background:var(--gradient-primary)}
.bar-chart__bar--alt{background:linear-gradient(135deg,#2d6a9f,#4f97cc)}
.bar-chart__x{font-size:.68rem;color:var(--muted);margin-top:5px}

/* Pagination */
.pagination{display:flex;gap:6px;align-items:center;justify-content:center;margin:18px 0 0;flex-wrap:wrap}
.pagination a,.pagination span{padding:6px 12px;border-radius:7px;border:1px solid var(--border);background:var(--surface);font-size:.88rem;font-weight:600;color:var(--link)}
.pagination a:hover{background:var(--bg-soft)}
.pagination .is-current{background:var(--gradient-primary);color:#fff;border-color:transparent}
.pagination .is-disabled{color:var(--muted);opacity:.5;pointer-events:none}
.pagination__info{color:var(--muted);font-weight:500;border:none;background:none}

/* Narrow screens (2.14.11): the sidebar becomes one row of tabs that scrolls sideways. The collapse button has no
   job here, and a desktop "collapsed" choice mustn't hide the labels. */
@media(max-width:900px){.admin-layout{flex-direction:column}
  .admin-sidebar,.admin-layout.is-collapsed .admin-sidebar{width:auto;position:static;max-height:none;padding:8px 10px}
  .admin-sidebar__top{display:none}
  .admin-sidebar nav{position:static;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .admin-sidebar nav::-webkit-scrollbar{display:none}
  /* A soft fade on the right edge says there is more to swipe to; the spacer keeps the last tab clear of it. */
  .admin-sidebar nav{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .admin-sidebar nav::after{content:"";flex:0 0 22px}
  .admin-navlink,.admin-layout.is-collapsed .admin-navlink{flex:none;margin-bottom:0;padding:9px 12px;justify-content:flex-start;white-space:nowrap;scroll-snap-align:start}
  .admin-layout.is-collapsed .admin-navlink span{display:inline}
  .admin-layout.is-collapsed .admin-navlink__badge{position:static;margin-left:6px}
  .admin-content{padding:20px}}
@media(max-width:820px){.admin-cols{grid-template-columns:1fr}}

/* Admin control (2.16.0): danger zone, checkbox lines, field groups, key/value read-outs, status chips, notices. */
.admin-panel--danger{border-color:rgba(176,42,55,.35);border-top:3px solid var(--no)}
.admin-panel--danger h3{color:var(--no-text)}
.admin-check{display:flex;gap:8px;align-items:center;font-weight:500;margin:10px 0 0;cursor:pointer}
.admin-check input{width:auto;height:auto;margin:0}
.admin-check[hidden],[data-comp-date][hidden],[data-access-fields][hidden]{display:none!important}
.admin-fieldset{border:1px solid var(--border);border-radius:10px;padding:10px 14px 12px;margin:14px 0 0}
.admin-fieldset legend{font-weight:600;font-size:.9rem;padding:0 6px;color:var(--heading)}
.data-table.kv-table th{width:34%;text-align:left;font-weight:600;background:transparent;color:var(--muted);vertical-align:top;white-space:nowrap}
.data-table.kv-table td{white-space:normal}
.data-table.kv-table td,.data-table.kv-table th{padding:7px 10px}
[data-theme="dark"] .data-table.kv-table th{background:transparent;color:var(--muted)}
.status-chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.status-chips a{padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);font-size:.85rem;font-weight:600;color:var(--link);text-decoration:none}
.status-chips a.is-current{background:var(--gradient-primary);color:#fff;border-color:transparent}
.admin-notice{border:1px solid var(--border);border-left:4px solid var(--navy-light);border-radius:10px;background:var(--bg-soft);padding:12px 16px;margin:16px 0 0}
.admin-notice--ok{border-left-color:var(--ok)}
.admin-notice--warn{border-left-color:var(--no)}
.admin-notice strong{color:var(--heading)}
.admin-orig{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--border);color:var(--muted);font-size:.86rem;white-space:pre-wrap}
.qopt__move{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;padding:0}
.qopt__move svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.qopt__move:hover{color:var(--link);border-color:var(--navy-light)}
.qopt__move:disabled{opacity:.35;cursor:default}

/* ---------- Soft section depth ---------- */
.section--soft{position:relative;background:linear-gradient(180deg,#f5f7fa 0%, #eef2f7 100%); border-top:1px solid #e9eef4; border-bottom:1px solid #e9eef4}
/* faint topographic contours — abstract texture, barely-there */
.section--soft::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url('/assets/images/tex-contours.svg') repeat;background-size:600px 380px;opacity:.9}
.section--soft > .container{position:relative;z-index:1}
.section{position:relative}

/* ---------- Abstract texture utilities ---------- */
.tex-ecg-band{position:relative;overflow:hidden}
.tex-ecg-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:url('/assets/images/tex-ecg.svg') repeat-x left center;background-size:auto 120px;opacity:.14;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

/* ---------- Quiz ---------- */
.quiz-wrap{max-width:760px}
.quiz-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:30px 32px}
.quiz-top{margin-bottom:26px}
.quiz-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.quiz-meta__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.quiz-meta__count{color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.quiz-domain-pill{background:var(--bg-soft);color:var(--heading);font-size:.8rem;font-weight:600;padding:3px 12px;border-radius:20px}
[data-theme="dark"] .quiz-domain-pill{background:rgba(255,255,255,.07)}
.quiz-progress{height:7px;border-radius:8px;background:var(--track);overflow:hidden}
.quiz-progress__bar{height:100%;background:var(--gradient-meter);border-radius:8px;transition:width .3s ease}
.quiz-scenario{background:var(--surface-2);border-left:4px solid var(--navy-light);border-radius:8px;padding:14px 16px;margin:0 0 18px;color:var(--text)}
/* The stem: the scenario as ordinary text, then the question asked in the heading face (2.12.3). */
.quiz-stem{margin:0 0 24px;color:var(--text)}
/* Long unbroken strings (a URL, a drug name with slashes) wrap instead of pushing the page sideways (2.13.1). */
.quiz-stem,.quiz-option,.quiz-scenario,.rationale-box{overflow-wrap:anywhere}
.quiz-stem__lead{font-size:1.1rem;line-height:1.65;margin:0 0 12px}
.quiz-stem__ask{font-family:var(--font-head);font-size:1.32rem;line-height:1.4;color:var(--heading);margin:0}
.quiz-stem__ask--plain{font-family:var(--font-body);font-size:1.1rem;font-weight:400;line-height:1.65;color:var(--text)}
.quiz-option{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:12px;cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
.quiz-option:hover{border-color:var(--navy-light);box-shadow:0 6px 18px rgba(26,79,122,.10)}
.quiz-option input{position:absolute;opacity:0;width:0;height:0}
.quiz-option__letter{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--muted);background:var(--surface);transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.quiz-option:not(.quiz-option--correct):not(.quiz-option--incorrect):has(input:checked){border-color:var(--accent-fill);box-shadow:0 6px 18px rgba(26,79,122,.14);background:var(--bg-soft)}
.quiz-option:not(.quiz-option--correct):not(.quiz-option--incorrect):has(input:checked) .quiz-option__letter{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.quiz-option__body{flex:1;padding-top:3px}
.quiz-option--correct{border-color:var(--ok);background:#eef7f1}
[data-theme="dark"] .quiz-option--correct{background:var(--ok-bg)}
.quiz-option--correct .quiz-option__letter{background:var(--ok);border-color:var(--ok);color:#fff}
.quiz-option--incorrect{border-color:var(--no);background:var(--no-tint)}
.quiz-option--incorrect .quiz-option__letter{background:var(--no);border-color:var(--no);color:#fff}
.quiz-tag{display:inline-block;margin-left:8px;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:20px;vertical-align:middle}
.quiz-tag--ok{background:var(--ok);color:#fff}
.quiz-tag--no{background:var(--no);color:#fff}
.quiz-option__why{display:block;margin-top:6px;font-size:.9rem;color:var(--muted);line-height:1.5}
[data-theme="dark"] .quiz-option__letter{background:transparent}
@media(max-width:560px){.quiz-card{padding:22px 18px}.quiz-stem__ask{font-size:1.2rem}}
.rationale-box{margin-top:18px;padding:18px 20px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);line-height:1.7}
.rationale-box--ok{border-left:5px solid var(--ok)}
.rationale-box--no{border-left:5px solid var(--no)}
.rationale-box__head{font-weight:700;margin:0 0 8px;font-family:var(--font-head)}
.rationale-box--ok .rationale-box__head{color:var(--ok-text)}
.rationale-box--no .rationale-box__head{color:var(--no-text)}
.quiz-timer{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums}

/* ---------- Progress / readiness (dashboard) ---------- */
.readiness{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.readiness__ring{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  background:conic-gradient(var(--ink-accent) calc(var(--pct)*1%), var(--track) 0);}
[data-theme="dark"] .readiness__ring{background:conic-gradient(var(--meter) calc(var(--pct)*1%), var(--track) 0)}
.readiness__ring span{width:84px;height:84px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--heading)}
.readiness__band{display:inline-block;padding:4px 14px;border-radius:20px;font-weight:700;font-size:.85rem}
.band-start{background:var(--info-bg);color:var(--heading)} .band-keep{background:var(--no-tint);color:var(--no-text)}
.band-building{background:var(--info-bg);color:#3b5876} .band-ontrack{background:#e7f1ea;color:#1c6b43} .band-strong{background:#e2f0e8;color:var(--ok-text)}
[data-theme="dark"] .band-building{color:var(--ink-accent)}
[data-theme="dark"] .band-ontrack,[data-theme="dark"] .band-strong{background:var(--ok-bg);color:var(--ok-text)}
.mastery-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mastery-row .lbl{flex:none;width:210px;font-size:.9rem;color:var(--text)}
.mastery-bar{flex:1;height:12px;border-radius:8px;background:var(--track);overflow:hidden}
.mastery-bar span{display:block;height:100%;border-radius:8px;background:var(--gradient-meter)}
.mastery-row .val{flex:none;width:74px;text-align:right;font-size:.85rem;color:var(--muted)}
.stat-chip{display:inline-flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow-card)}
.stat-chip .n{font-family:var(--font-head);font-size:1.7rem;font-weight:700;color:var(--heading)}
.stat-chip .l{font-size:.8rem;color:var(--muted)}

/* ---------- Profile menu (header dropdown) ---------- */
.profile-menu{position:relative}
.profile-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  color:#fff;height:40px;padding:0 10px 0 6px;border-radius:22px;cursor:pointer;font-weight:500;font-family:var(--font-body);font-size:.92rem}
.profile-btn:hover{background:rgba(255,255,255,.18)}
.profile-btn .avatar{width:28px;height:28px;border-radius:50%;background:var(--gradient-primary);display:inline-flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.profile-btn .caret{display:inline-flex;opacity:.85}
.profile-btn .caret svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.profile-dropdown{position:absolute;right:0;top:50px;min-width:230px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 14px 36px rgba(13,58,92,.22);padding:8px;display:none;z-index:200}
.profile-menu.open .profile-dropdown{display:block}
.profile-dropdown a,.profile-dropdown button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 12px;border-radius:8px;color:var(--text);background:none;border:0;font-size:.94rem;cursor:pointer;font-family:var(--font-body);text-decoration:none}
.profile-dropdown a:hover,.profile-dropdown button:hover{background:var(--bg-soft);color:var(--heading)}
.profile-dropdown .pm-head{padding:8px 12px 10px}
.profile-dropdown .pm-head strong{display:block;color:var(--heading);font-family:var(--font-head)}
.profile-dropdown .pm-head span{font-size:.8rem;color:var(--muted)}
.profile-dropdown .divider{height:1px;background:var(--border);margin:6px 0}

/* ---------- Dark theme ----------
   Owner's rule (2026-10-06): neutral grey and black surfaces, with blue only as an accent (links, focus rings, primary
   buttons, selected states, info markers, the "EMT" wordmark). Surfaces lighten to show elevation: the page --bg,
   soft sections --bg-soft, cards --surface, boxes inside a card (table heads, rationale and timer boxes) --surface-2.
   Text and status colors pass WCAG AA on every one of them (ratios in DESIGN.md). One rule per element (2.22.6: the
   duplicate table-head, outline-button, table-border and cell-border rules are merged). */
:root[data-theme="dark"]{
  --text:#e8e9ec; --muted:#a4a9b1; --faint:#8f949c; --heading:#f2f3f5;
  --bg:#0e0f11; --bg-soft:#131417; --surface:#191a1d; --surface-2:#222428; --input-bg:#121316;
  --border:#2e3035; --border-strong:#3a3d42; --field-border:#6e737c; --focus:#7dd3fc;
  --link:#8cc4ef; --link-hover:#b4d8f4; --ink-accent:#8cc4ef;
  --link-text:#4189c8; --link-text-muted:var(--link); --link-muted-deco:none;
  --accent-fill:#2f6fa6; --track:#2e3035; --meter:#5aa3d6;
  --no:#c84641;
  --ok-text:#5cc98c; --ok-bg:#14261c; --ok-line:#1e4a33;
  --no-text:#f0898f; --no-bg:#2d191c; --no-line:#5a2a33;
  --info-bg:#222428; --info-line:#3d5868;
  --ok-ink:var(--ok-text); --ok-mark:var(--ok-text); --ok-edge:var(--ok); --ok-tint:var(--ok-bg);   /* --ok-mark: the flashcard ring is 6.4:1 on its track (--ok was 2.9:1) */
  --no-ink:var(--no-text); --no-tint:var(--no-bg);
  --track-soft:var(--track); --ring-track:var(--track);
  /* Primary buttons and fills: white text at 5.3:1 or better (6.9:1 at the dark end); hover 4.7:1 or better. */
  --gradient-primary:linear-gradient(135deg,#245d92 0%,#2f6fa6 100%);
  --gradient-primary-hover:linear-gradient(135deg,#2a68a0 0%,#3478b2 100%);
  --gradient-meter:linear-gradient(135deg,#3a83bd,#5aa3d6);
  /* Bands (header, footer, hero, call-to-action panels): near-black, set off by a 1px --border line. */
  --gradient-dark:linear-gradient(135deg,#111214 0%,#16171a 100%);
  --gradient-topbar:linear-gradient(180deg,#111214 0%,#16171a 100%);
  --band-solid:#16171a;
  --shadow-card:0 4px 16px rgba(0,0,0,.35);
  --shadow-bar:0 -6px 18px rgba(0,0,0,.45);
}
[data-theme="dark"] .site-header{border-bottom-color:var(--border)}
[data-theme="dark"] .site-footer{border-top:1px solid var(--border)}
[data-theme="dark"] .hero{background:linear-gradient(160deg,#111214 0%,#16171a 100%)}
[data-theme="dark"] .creds{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
[data-theme="dark"] :is(.edu-band, .dash-app, .review-nudge, .study-focus, .fc-overall, .faq-cta){border:1px solid var(--border)}
@media (max-width:768px){[data-theme="dark"] .nav{background:var(--band-solid);border-bottom:1px solid var(--border)}}
[data-theme="dark"] .auth-card::before{background:url('/assets/images/lockup-dark.svg?v=1') center/204px no-repeat, var(--gradient-dark);
  box-shadow:0 10px 24px rgba(0,0,0,.4), inset 0 0 0 1px var(--border)}
[data-theme="dark"] .section--soft{background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%);border-color:var(--surface)}
[data-theme="dark"] .dash-freebar{background:var(--surface-2);border-color:var(--border)}
[data-theme="dark"] .dash-freebar--trial{background:var(--ok-bg);border-color:var(--ok-line)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,[data-theme="dark"] .input{background:var(--input-bg);color:var(--text);border-color:var(--field-border)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--faint)}
[data-theme="dark"] .data-table{border-color:var(--border-strong)}
[data-theme="dark"] .data-table th{background:var(--surface-2);color:var(--heading)}
[data-theme="dark"] .data-table td{border-color:var(--border)}
[data-theme="dark"] .data-table tbody tr:nth-child(odd){background:var(--surface)}
[data-theme="dark"] .data-table tbody tr:nth-child(even){background:var(--surface-2)}
[data-theme="dark"] .data-table tbody tr:hover{background:var(--border)}
[data-theme="dark"] .pill--in_review{background:var(--info-bg);color:var(--ink-accent)}
[data-theme="dark"] .pill--retired{background:var(--surface-2);color:var(--muted)}
[data-theme="dark"] .lead strong{color:var(--heading)}
[data-theme="dark"] .accent,[data-theme="dark"] .accent-rule{background:var(--gradient-meter)}
[data-theme="dark"] .version-badge{background:rgba(255,255,255,.16)}
[data-theme="dark"] .stars{color:var(--border-strong)}
/* Shadows are black in dark: the light theme's navy-tinted ones read as a blue glow on a dark page. */
[data-theme="dark"] :is(.toast, .price-card--featured, .price-lead-card, .edu-band, .dash-app, .auth-card, .profile-dropdown){box-shadow:0 14px 34px -12px rgba(0,0,0,.65)}
/* On the --surface-2 boxes the in-text link blue would be 4.2:1, so a link there is the brighter --link (weight 600 as everywhere). */
[data-theme="dark"] :where(.rationale-box, .quiz-scenario, .flash--info, .dash-freebar, .item-instr){--link-text:var(--link)}
/* Buttons: the primary fill comes from --gradient-primary; variants (sky, danger, flashcard grades) keep their own. */
[data-theme="dark"] .btn{border-color:rgba(255,255,255,.22);box-shadow:0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18)}
[data-theme="dark"] .btn--outline{background:transparent;color:var(--text);border-color:var(--field-border)}
[data-theme="dark"] .btn--outline:hover{background:var(--gradient-primary);color:#fff;border-color:transparent}
/* Admin: monochrome, with status edges kept. */
[data-theme="dark"] body.admin,[data-theme="dark"] .admin-content{background:var(--bg)}
[data-theme="dark"] .admin-sidebar{border-right:1px solid var(--border)}
[data-theme="dark"] .kpi{border-left-color:var(--border-strong)}
[data-theme="dark"] .kpi--good{border-left-color:var(--ok)}
[data-theme="dark"] .kpi--flag{border-left-color:var(--no)}
[data-theme="dark"] .kpi--accent{background:linear-gradient(135deg,#2b2d31,#3a3d42);border-left-color:var(--ink-accent)}   /* a raised grey tile */
[data-theme="dark"] .err-trace{background:var(--input-bg);border:1px solid var(--border);color:var(--text)}

/* ---------- App Store badge (promo; not yet linked) ---------- */
.appstore-badge{display:inline-flex; align-items:center; gap:11px; background:#000; color:#fff;
  border:1px solid rgba(255,255,255,.28); border-radius:11px; padding:9px 18px; text-decoration:none;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  box-shadow:0 6px 18px rgba(0,0,0,.28); cursor:pointer; transition:background .15s ease}
.appstore-badge:hover{color:#fff; background:#141414}
.appstore-badge__apple{width:27px; height:27px; flex:none; fill:#fff}
.appstore-badge__text{display:flex; flex-direction:column; line-height:1.05; text-align:left}
.appstore-badge__text small{font-size:.64rem; font-weight:400; letter-spacing:.02em; opacity:.95}
.appstore-badge__text strong{font-size:1.18rem; font-weight:600; letter-spacing:.01em}
.appstore-soon{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-accent); margin-top:8px}
.hero .appstore-soon{color:rgba(255,255,255,.85)}

/* "Study on the go" — compact card matching the site's card language;
   navy gradient CTA tile on the right supplies the brand accent (no giant floating panel) */
.go-band{overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card)}
.go-band__body{padding:28px 32px}
.go-band__body .eyebrow{margin-bottom:8px}
.go-band__body h2{margin:0 0 10px}
.go-band__lead{color:var(--muted); font-size:1rem; line-height:1.6; margin:0; max-width:none}
.go-band__chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; justify-content:center}
.go-chip{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600;
  color:var(--heading); background:var(--bg-soft); border:1px solid var(--border); padding:6px 13px; border-radius:999px}
.go-chip svg{width:14px; height:14px; flex:none; fill:none; stroke:var(--ink-accent); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.go-band__cta{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:28px; text-align:center; background:var(--gradient-primary); position:relative; overflow:hidden}
.go-band__cta::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(240px 140px at 50% 0%, rgba(255,255,255,.18), transparent 70%)}
.go-band__phone{width:60px; height:auto; position:relative; fill:none; stroke:rgba(255,255,255,.9);
  stroke-width:2; stroke-linejoin:round}
/* Store badges — official Apple App Store + Google Play artwork (unlinked until launch) */
.store-badges{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; align-items:center}
.go-band .store-badges, .dash-app .store-badges{justify-content:center}
.store-badge-img{height:44px; width:auto; display:inline-block}
.store-badge-img[src$=".png"]{height:64px} /* Google's badge carries built-in padding — scale to match Apple visually */
.go-band__cta .appstore-badge{position:relative; border-color:rgba(255,255,255,.42); box-shadow:0 10px 24px rgba(0,0,0,.32)}
@media(max-width:680px){.go-band{grid-template-columns:1fr} .go-band__body{padding:26px 24px} .go-band__cta{padding:22px 24px; flex-direction:row}}

/* Home pricing comparison — Draco hero card above, competitors below (smaller) */
.price-lead-card{position:relative; max-width:430px; margin:8px auto 0; text-align:center;
  background:var(--surface); border:2px solid var(--accent-fill); border-radius:18px; padding:36px 30px 30px;
  box-shadow:0 24px 54px -20px rgba(13,58,92,.5)}
.price-lead-card__ribbon{position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--gradient-primary); color:#fff; font-size:.65rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 12px; border-radius:999px; box-shadow:0 4px 10px rgba(13,58,92,.32); white-space:nowrap}
.price-lead-card__name{font-family:var(--font-head); font-size:1.15rem; font-weight:700; color:var(--heading)}
.price-lead-card__figure{font-family:var(--font-head); font-size:3rem; font-weight:700; color:var(--heading); line-height:1.04; margin:6px 0 0}
.price-lead-card__figure span{font-size:1.05rem; font-weight:600; color:var(--muted)}
.price-lead-card__annual{margin-top:4px; font-size:.9rem; color:var(--muted)}
.price-lead-card__annual strong{color:var(--heading); font-weight:700}
.price-lead-card__desc{color:var(--muted); margin:12px auto 22px; max-width:36ch; line-height:1.55}
.price-compare-label{text-align:center; color:var(--muted); font-weight:600; margin:36px 0 18px}
.price-compare-row{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; max-width:720px; margin:0 auto}
.price-mini{flex:1 1 180px; max-width:220px; text-align:center; background:var(--surface);
  border:1px solid var(--border); border-radius:14px; padding:20px 18px}
.price-mini__name{font-weight:600; color:var(--muted); font-size:.95rem}
.price-mini__figure{font-family:var(--font-head); font-size:1.5rem; color:var(--text); margin-top:4px}
.price-mini__figure span{font-size:.85rem; color:var(--muted)}
.price-mini__mult{margin-top:9px; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-accent)}
/* Pricing comparison table: our row, tinted (2.22.6: was an inline light hex, unreadable in dark). */
.compare-row--ours{background:var(--info-bg)}

/* ---------- Stripe badge (footer trust) ---------- */
.stripe-badge{display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.72); font-size:.82rem}
.stripe-badge svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2}
.stripe-badge strong{color:#a9b8ff; font-weight:700; letter-spacing:.01em}  /* Stripe indigo, allowed */

/* ---------- Responsive ---------- */
/* Resources (2026-10-17): between the phone menu and a wide window the bar holds one more link than before, so the
   links sit closer and About steps out (the footer lists it). The phone menu (768px and under) keeps every link. */
@media (min-width:769px) and (max-width:1100px){
  .nav{gap:16px}
  .nav > a[href="/about.php"]{display:none}
}
@media (min-width:769px) and (max-width:860px){ .nav{gap:11px} }
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .nav{display:none; position:absolute; top:66px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--navy-dark); padding:8px 0}
  .nav.open{display:flex}
  .nav a{padding:12px 20px; width:100%}
  .nav-toggle{display:grid}
  .site-header .container{position:relative}
  h1{font-size:1.85rem}
  .footer-grid{grid-template-columns:1fr}
}

/* ---- Star rating input (review.php) ---- */
/* Stars in page order 1 to 5 (2.13.1: the reversed order made the arrow keys run backwards). A star is filled when
   it is the chosen one or comes before it; while hovering, the stars up to the pointer. Empty stars are 3.5:1. */
.star-input{display:inline-flex;gap:4px}
.star-input input{position:absolute;opacity:0;width:0;height:0}
.star-input label{cursor:pointer;color:#7b8ba0;line-height:0;transition:color .12s ease}
.star-input label svg{fill:currentColor}
.star-input input:checked + label,
.star-input label:has(~ input:checked){color:var(--star)}
.star-input:hover label{color:#7b8ba0}
.star-input:hover label:hover,
.star-input:hover label:has(~ label:hover){color:var(--star)}
.star-input input:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
/* static display stars */
.stars{display:inline-flex;gap:2px;color:#e0e5ec;line-height:0}
.stars svg{fill:currentColor}
.stars .on{color:var(--star)}

/* ---- Home reviews band ---- */
.reviews-band{background:var(--bg-soft)}
.reviews-head{text-align:center;max-width:640px;margin:0 auto 8px}
.reviews-agg{display:inline-flex;align-items:center;gap:10px;margin-top:6px;color:var(--muted);font-weight:600}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.review-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px 20px 18px;display:flex;flex-direction:column}
.review-card .stars{margin-bottom:10px}
.review-card h4{font-family:var(--font-head);margin:0 0 6px;font-size:1.06rem;color:var(--heading)}
.review-card p{margin:0 0 14px;color:var(--text);line-height:1.55;font-size:.96rem}
.review-card .review-by{margin-top:auto;color:var(--muted);font-size:.86rem;font-weight:600}
@media (max-width:860px){.review-grid{grid-template-columns:1fr}}

/* ---- Review nudge (dashboard) ---- */
.review-nudge{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  background:var(--gradient-dark);color:#fff;border-radius:var(--radius-card);padding:16px 20px;box-shadow:var(--shadow-card);margin-bottom:18px}
.review-nudge .rn-txt{display:flex;align-items:center;gap:12px}
.review-nudge .rn-star{flex:0 0 auto;fill:var(--star)}
.review-nudge .rn-txt strong{display:block;font-family:var(--font-head);font-size:1.05rem}
.review-nudge .rn-txt span{color:rgba(255,255,255,.82);font-size:.9rem}
.review-nudge .rn-act{display:flex;gap:10px;align-items:center}
/* "Not Now": a text button (weight 600, never underlined since 2.25.8); 2.22.6 moved its inline reset here and added a
   hit area so the target is 44px tall without changing the layout. */
.review-nudge .rn-later{position:relative;padding:0;border:0;background:none;color:rgba(255,255,255,.9);font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer}
.review-nudge .rn-later::after{content:"";position:absolute;inset:-14px -4px}

/* ============ Admin question editor (question-edit.php) ============ */
.qedit-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.qedit-head__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qedit-idtag{color:var(--muted);font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}
.qedit-form{margin-top:4px}
/* sticky action bar */
.qedit-actions{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:12px 16px;margin-bottom:18px}
.qedit-actions__save,.qedit-actions__end{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* layout */
.qedit-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr);gap:18px;align-items:start}
.qedit-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.qedit-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:78px}
.qedit-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.qedit-panel-head h3{margin:0;font-family:var(--font-head);font-size:1.08rem;color:var(--heading)}
.qedit-label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px;color:var(--text)}
.qedit-label:first-of-type{margin-top:0}
.qedit-req{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--link);background:#e7eef6;border-radius:5px;padding:1px 7px;margin-left:6px;vertical-align:1px}
[data-theme="dark"] .qedit-req{background:var(--info-bg)}
.qedit-inline-field{display:flex;align-items:center;gap:8px}
.qedit-inline-field label{font-weight:600;font-size:.85rem;color:var(--muted);margin:0}
.qedit-inline-field select{min-width:180px}
.qedit-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* options */
.qopt-list{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.qopt{border:1px solid var(--border);border-radius:12px;background:var(--bg-soft);padding:12px 14px 14px;transition:border-color .15s ease, box-shadow .15s ease}
.qopt:has(.oc:checked){border-color:var(--ok-edge);box-shadow:0 0 0 1px var(--ok-edge) inset;background:#f2f9f4}
[data-theme="dark"] .qopt:has(.oc:checked){background:var(--ok-bg)}
.qopt__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.qopt__correct{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-weight:600;font-size:.86rem;
  background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:4px 12px 4px 10px;user-select:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.qopt__correct input{width:auto;height:auto;margin:0;accent-color:var(--ok-edge)}
.qopt:has(.oc:checked) .qopt__correct{border-color:var(--ok-edge);color:#2b6b45;background:var(--ok-tint)}
[data-theme="dark"] .qopt:has(.oc:checked) .qopt__correct{color:var(--ok-text)}
.qopt__num{color:var(--muted);font-size:.82rem;font-weight:600}
.qopt__remove{margin-left:auto;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.qopt__remove svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.qopt__remove:hover{color:#b5303a;border-color:#e0b4b8;background:var(--no-tint)}
[data-theme="dark"] .qopt__remove:hover{color:var(--no-text);border-color:var(--no-line)}
.qopt textarea + textarea{margin-top:8px}
/* scope confirm */
.qedit-scope__box{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.9rem;line-height:1.5;color:var(--text)}
.qedit-scope__box input{width:auto;height:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--accent-fill)}
/* TinyMCE frame polish + fallback textarea styling before init */
.qedit-form textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font:inherit;background:var(--surface);color:var(--text);min-height:80px}
.qedit-form .tox-tinymce{border-radius:8px!important;border-color:var(--border)!important}
@media (max-width:900px){ .qedit-grid{grid-template-columns:1fr} .qedit-side{position:static} }

/* ============ Admin usage analytics ============ */
.kpi--good{border-left-color:var(--ok-mark)}
.kpi--good .kpi__n{color:var(--ok-ink)}
.qa-h2{font-family:var(--font-head);font-size:1.15rem;color:var(--heading);margin:26px 0 12px}
/* The "active but not improving" notice: the info marker in both themes (2.22.6: dark mode used amber, a forbidden
   color). */
.qa-alert{display:flex;gap:12px;align-items:flex-start;border-left:4px solid var(--ink-accent);background:var(--info-bg)}
.qa-alert svg{fill:none;stroke:var(--ink-accent);stroke-width:2;flex:0 0 auto;margin-top:1px}
.qa-alert strong{color:var(--heading)}
/* trend badge */
.trend{display:inline-block;font-weight:700;font-size:.82rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.trend--up{color:var(--ok-text)}.trend--down{color:var(--no-text)}.trend--flat{color:var(--muted)}.trend--na{color:#4f5f75}
[data-theme="dark"] .trend--na{color:var(--muted)}
/* Flagged rows (a student active but not improving): the site's warning color, the --no tint with a left edge
   (2.22.6: was amber/cream, a forbidden color). */
.data-table tr.row--flag > td{background:var(--no-bg)!important}
.data-table tr.row--flag > td:first-child{box-shadow:inset 3px 0 0 var(--no)}
/* weekly accuracy sparkline */
.spark{display:flex;align-items:flex-end;gap:6px;height:110px;padding:6px 2px 0}
.spark__col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.spark__bar{width:100%;max-width:34px;background:var(--gradient-meter);border-radius:4px 4px 0 0;min-height:4px}
.spark__x{font-size:.72rem;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}

/* ============ Flashcards ============ */
/* --- Overall summary (deck picker) --- */
.fc-overall{display:flex;align-items:center;gap:18px;background:var(--gradient-dark);color:#fff;border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:18px 22px;margin-bottom:24px}
.fc-overall__ring{--pct:0;flex:0 0 auto;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#7fd3a0 calc(var(--pct)*1%), rgba(255,255,255,.16) 0);}
.fc-overall__ring>span{width:46px;height:46px;border-radius:50%;background:var(--band-solid);display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:#fff}
.fc-overall__ring small{font-size:.6em;font-weight:700;opacity:.8}
.fc-overall__txt{display:flex;flex-direction:column;gap:2px}
.fc-overall__txt strong{font-family:var(--font-head);font-size:1.15rem}
.fc-overall__txt span{color:rgba(255,255,255,.8);font-size:.9rem}

/* --- Deck cards --- */
.fc-decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.fc-deck{display:flex;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:20px;text-decoration:none;color:var(--text);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.fc-deck:hover{box-shadow:0 12px 30px rgba(13,58,92,.17);border-color:var(--navy-light)}
.fc-deck__icon{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--bg-soft);color:var(--link)}
.fc-deck__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fc-deck.is-mastered .fc-deck__icon{background:var(--ok-tint);color:var(--ok-ink)}
[data-theme="dark"] .fc-deck__icon{background:rgba(255,255,255,.06)}
.fc-deck__main{flex:1;min-width:0;display:flex;flex-direction:column}
.fc-deck__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fc-deck__top h3{margin:0;font-family:var(--font-head);font-size:1.12rem;color:var(--heading)}
.fc-deck__count{color:var(--muted);font-size:.8rem;font-weight:600;white-space:nowrap}
.fc-deck__badge{display:inline-flex;align-items:center;gap:4px;background:var(--ok-tint);color:var(--ok-ink);font-size:.72rem;font-weight:700;
  padding:2px 8px;border-radius:20px;white-space:nowrap}
.fc-deck__badge svg{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fc-deck p{color:var(--muted);font-size:.9rem;margin:6px 0 14px;line-height:1.5;flex:1}
.fc-deck__meter{height:7px;border-radius:5px;background:var(--track-soft);overflow:hidden}
.fc-deck__meter>span{display:block;height:100%;background:var(--gradient-meter);border-radius:5px;transition:width .3s ease}
.fc-deck.is-mastered .fc-deck__meter>span{background:linear-gradient(135deg,#339a63,#2b8253)}
.fc-deck__foot{margin-top:8px;color:var(--muted);font-size:.8rem;font-weight:600}

/* --- Study view --- */
.fc-study__wrap{max-width:660px}
.fc-study-head{text-align:center;margin-bottom:20px}
.fc-back{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-weight:600;font-size:.85rem;text-decoration:none}
.fc-back svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fc-back:hover{color:var(--link)}
.fc-study-head h1{margin:8px 0 0}
.fc-bar{margin-bottom:14px}
.fc-bar__track{height:8px;border-radius:6px;background:var(--track-soft);overflow:hidden}
.fc-bar__track>span{display:block;height:100%;width:0;background:var(--gradient-meter);border-radius:6px;transition:width .3s ease}
.fc-bar__meta{display:flex;justify-content:space-between;margin-top:7px;color:var(--muted);font-size:.82rem;font-weight:600}

.fc-opts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.fc-pill-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  border:1px solid var(--border);background:var(--surface);border-radius:22px;padding:7px 14px;font-size:.86rem;font-weight:500;color:var(--muted);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.fc-pill-toggle input{position:absolute;opacity:0;width:0;height:0}
.fc-pill-toggle::before{content:"";width:15px;height:15px;border-radius:5px;border:1.5px solid var(--border);display:inline-block;transition:background-color .15s ease,border-color .15s ease}
.fc-pill-toggle:has(input:checked){border-color:var(--navy-light);color:var(--heading);background:var(--bg-soft)}
.fc-pill-toggle:has(input:checked)::before{background:var(--accent-fill);border-color:var(--accent-fill);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.fc-opts__reset{margin-left:auto}
.fc-textbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);font-weight:500;font-size:.84rem;cursor:pointer;padding:6px}
.fc-textbtn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc-textbtn:hover{color:#b23b43}
[data-theme="dark"] .fc-textbtn:hover{color:var(--no-text)}

/* --- The card --- */
.fcard{perspective:1800px;cursor:pointer;outline:none}
.fcard__inner{position:relative;width:100%;min-height:230px;transition:transform .55s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.fcard.is-flipped .fcard__inner{transform:rotateY(180deg)}
.fcard:focus-visible .fcard__inner{box-shadow:0 0 0 3px var(--focus);border-radius:18px}
.fcard__face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border-radius:18px;padding:38px 30px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:0 10px 30px rgba(13,58,92,.13)}
.fcard__front{border-top:4px solid #97a2b0}
.fcard__back{border-top:4px solid var(--ok-mark);transform:rotateY(180deg)}
.fcard__label{position:absolute;top:16px;left:20px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.fcard__label--ans{color:var(--ok-text)}
.fcard__badge{position:absolute;top:14px;right:16px;font-size:.72rem;font-weight:700;color:var(--muted);
  background:var(--bg-soft);border-radius:20px;padding:3px 10px;font-variant-numeric:tabular-nums}
.fcard__text{font-family:var(--font-head);font-size:1.85rem;line-height:1.28;font-weight:700;color:var(--heading)}
.fcard__text--def{font-family:var(--font-body);font-size:1.14rem;font-weight:500;line-height:1.6;max-width:46ch;color:var(--text)}
.fcard__cue{position:absolute;bottom:16px;left:0;right:0;font-size:.76rem;color:var(--muted);letter-spacing:.02em}

/* --- Actions --- */
.fc-actions{margin-top:22px;min-height:52px;display:flex;justify-content:center}
.fc-reveal{min-width:220px}
.fc-grade{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.fc-grade__q{font-family:var(--font-head);font-weight:700;color:var(--heading);font-size:1.02rem}
.fc-grade__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fc-grade[hidden],.fc-stage[hidden],.fc-done[hidden],.fc-reveal[hidden]{display:none!important}
.fc-grade .btn{min-width:190px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(0,0,0,.06)}
.fc-grade .btn svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fc-grade__again{background:linear-gradient(135deg,#6b7686,#515b68);color:#fff}
.fc-grade__again:hover{background:linear-gradient(135deg,#5c6675,#434c58);color:#fff}
.fc-grade__got{background:linear-gradient(135deg,#339a63,#2b8253);color:#fff}
.fc-grade__got:hover{background:linear-gradient(135deg,#2d8a58,#246e46);color:#fff}
.fc-keyhint{text-align:center;color:var(--muted);font-size:.8rem;margin-top:16px}
.fc-keyhint kbd{background:var(--bg-soft);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-family:var(--font-body);font-size:.78rem;color:var(--text)}

/* --- Completion --- */
.fc-done{text-align:center;padding:24px 0}
.fc-done__ring{position:relative;width:134px;height:134px;margin:0 auto 16px}
.fc-done__ring svg{width:134px;height:134px;transform:rotate(-90deg)}
.fc-done__ring .ring-bg{fill:none;stroke:var(--track-soft);stroke-width:9}
.fc-done__ring .ring-fg{fill:none;stroke:var(--ok-mark);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .7s ease}
.fc-done__pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-head);font-size:1.7rem;font-weight:700;color:var(--heading)}
.fc-done h2{margin:0 0 6px}
.fc-done__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.fc-howto{max-width:64ch;margin:10px auto 0;color:var(--muted);font-size:.92rem;line-height:1.55}
.fc-howto strong{color:var(--text)}
@media(max-width:560px){.fcard__text{font-size:1.5rem}.fc-grade__btns{flex-direction:column;width:100%}.fc-grade .btn{width:100%}.fc-reveal{width:100%}}

/* ============ Reusable modal ============ */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(10,28,48,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto}
.modal-overlay[hidden]{display:none!important}
.modal{background:var(--surface);color:var(--text);border-radius:16px;box-shadow:0 24px 60px rgba(5,20,40,.4);
  width:100%;max-width:560px;animation:modalIn .18s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal__head h3{margin:0;font-family:var(--font-head);font-size:1.18rem;color:var(--heading)}
.modal__close{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--muted);cursor:pointer;flex:0 0 auto;position:relative}
.modal__close::after{content:"";position:absolute;inset:-5px}   /* 34px button, 44px target */
.modal__close svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.modal__close:hover{color:var(--link);border-color:var(--navy-light)}
.modal__body{padding:20px 22px;max-height:64vh;overflow-y:auto}
.modal__foot{display:flex;justify-content:flex-end;gap:12px;padding:16px 22px;border-top:1px solid var(--border);background:var(--bg-soft);border-radius:0 0 16px 16px}
.modal--wide{max-width:640px}
.modal .tox-tinymce{border-radius:8px!important;border-color:var(--border)!important}
/* Add-record bar under admin tables */
.sd-addbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
/* Accent admin panel (e.g. the "Create a School" form) — subtle tinted card, not plain white */
.admin-panel--accent{background:linear-gradient(180deg,var(--bg-soft),var(--surface));border-top:3px solid var(--accent-fill)}

/* ============ Breadcrumbs (site-wide) ============ */
.breadcrumbs-bar{padding:16px 0 0}
.breadcrumbs-bar--admin{padding:0 0 16px}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:0;padding:0}
.breadcrumbs li{display:inline-flex;align-items:center;gap:2px;font-size:.85rem;font-weight:600}
.breadcrumbs a{color:var(--muted);text-decoration:none;padding:2px 2px;border-radius:5px;transition:color .12s ease}
.breadcrumbs a:hover{color:var(--link)}
.breadcrumbs li[aria-current] span{color:var(--heading)}
.breadcrumbs .crumb-sep{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.55;margin:0 2px}

/* ============ Study hub (study.php) ============ */
.study-h{font-family:var(--font-head);font-size:1.15rem;color:var(--heading);margin:14px 0 16px}
/* Clear separation between major sections */
.study-section{margin-top:48px}
.study-divider{height:1px;background:var(--border);border:0;margin:48px 0 0}
/* Focus recommendation banner */
.study-focus{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--gradient-dark);color:#fff;
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px 24px;margin-bottom:6px}
.study-focus__icon{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center}
.study-focus__icon svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7}
.study-focus__body{flex:1;min-width:200px;display:flex;flex-direction:column;gap:1px}
.study-focus__eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.75)}
.study-focus__body strong{font-family:var(--font-head);font-size:1.2rem}
.study-focus__body span:last-child{color:rgba(255,255,255,.85);font-size:.92rem}
.study-focus .btn{background:linear-gradient(135deg,var(--dl-sky1),#0ea5e9);color:#06283c;border:0;font-weight:500}
.study-focus .btn:hover{background:linear-gradient(135deg,#7dd3fc,var(--dl-sky1));color:#06283c}
/* Missed-count badge on the mode card */
.dash-mode__badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;
  background:var(--no);color:#fff;font-size:.72rem;font-weight:700;vertical-align:2px}
/* Study map */
.study-maphead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:28px 0 14px}
.study-maphead .study-h{margin:0}
.study-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.study-card{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--border);border-radius:12px;
  padding:16px 18px;box-shadow:var(--shadow-card)}
.study-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.study-card__head h4{margin:0;font-size:1.02rem;color:var(--heading)}
.study-card__pct{font-family:var(--font-head);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.study-card__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:11px}
.study-card__meta{color:var(--muted);font-size:.82rem;font-weight:600}
/* strength coloring */
.study-card--weak{border-left-color:var(--no)}
.study-card--weak .study-card__pct{color:var(--no)}
.mastery-bar--weak span{background:linear-gradient(135deg,#c2454e,#a5313a)}
.study-card--ok{border-left-color:var(--navy-light)}
.study-card--ok .study-card__pct{color:var(--link)}
.study-card--strong{border-left-color:var(--ok)}
.study-card--strong .study-card__pct{color:var(--ok)}
.mastery-bar--strong span{background:linear-gradient(135deg,#3aa06a,#2b8253)}
.study-card--new .study-card__pct,.study-card--none .study-card__pct{color:var(--faint)}
[data-theme="dark"] .study-card--weak .study-card__pct{color:var(--no-text)}
[data-theme="dark"] .study-card--strong .study-card__pct{color:var(--ok-text)}
/* Topic pills */
.study-topics{display:flex;flex-wrap:wrap;gap:10px}
.study-topic{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:22px;padding:8px 8px 8px 15px;text-decoration:none;color:var(--text);font-weight:600;font-size:.9rem;
  box-shadow:var(--shadow-card);transition:border-color .15s ease,transform .12s ease}
.study-topic:hover{border-color:var(--navy-light);color:var(--text)}
.study-topic span{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:20px;background:var(--bg-soft);color:var(--muted);font-size:.78rem}

/* ============ Study hub v2 (professional layout) ============ */
.study-page .container{max-width:1000px}
/* Mode cards — deliberate 3-column grid so 6 cards = clean 2×3 */
.study-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.study-mode{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:20px;box-shadow:0 6px 20px -10px rgba(13,58,92,.25);color:inherit;text-decoration:none;
  transition:transform .13s ease,box-shadow .13s ease,border-color .13s ease}
.study-mode:hover{box-shadow:0 16px 32px -14px rgba(13,58,92,.4);border-color:var(--navy-light);color:inherit}
.study-mode.is-off{opacity:.6;pointer-events:none;box-shadow:none}
.study-mode__icon{width:44px;height:44px;border-radius:11px;background:var(--gradient-primary);display:grid;place-items:center;margin-bottom:14px}
.study-mode__icon svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.study-mode__meta{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-accent)}
.study-mode h4{margin:5px 0 8px;font-family:var(--font-head);font-size:1.12rem;color:var(--heading)}
.study-mode p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
[data-theme="dark"] .study-mode{box-shadow:none}
@media(max-width:760px){.study-modes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.study-modes{grid-template-columns:1fr}}

/* Study map — a single panel with full-width domain rows (no grid gaps) */
.study-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:0 6px 20px -10px rgba(13,58,92,.25);overflow:hidden}
.study-panel__head{padding:18px 22px;border-bottom:1px solid var(--border)}
.study-panel__head h3{margin:0;font-family:var(--font-head);font-size:1.12rem;color:var(--heading)}
.study-panel__head p{margin:4px 0 0;color:var(--muted);font-size:.88rem;line-height:1.5;max-width:70ch}
.domain-list{list-style:none;margin:0;padding:0}
.domain-row{display:grid;grid-template-columns:minmax(150px,1.15fr) minmax(120px,2fr) 96px auto;align-items:center;gap:18px;
  padding:15px 22px;border-bottom:1px solid var(--border);grid-template-areas:"name bar stat btn"}
.domain-row:last-child{border-bottom:0}
.domain-row:hover{background:var(--bg-soft)}
.domain-row__name{grid-area:name;font-weight:700;color:var(--heading);display:flex;align-items:center;gap:10px}
.domain-row__name::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--border);flex:0 0 auto}
.domain-row--weak .domain-row__name::before{background:var(--no)}
.domain-row--ok .domain-row__name::before{background:var(--ink-accent)}
.domain-row--strong .domain-row__name::before{background:var(--ok)}
.domain-row__bar{grid-area:bar}
.domain-row__stat{grid-area:stat;text-align:right;line-height:1.15}
.domain-row__stat strong{display:block;font-family:var(--font-head);font-size:1.02rem;font-variant-numeric:tabular-nums;color:var(--heading)}
.domain-row__stat span{font-size:.72rem;color:var(--muted);font-weight:600}
.domain-row--weak .domain-row__stat strong{color:var(--no)}
[data-theme="dark"] .domain-row--weak .domain-row__stat strong{color:var(--no-text)}
.domain-row--strong .domain-row__stat strong{color:var(--ok-text)}
.domain-row .btn{grid-area:btn}
@media(max-width:640px){
  .domain-row{grid-template-columns:1fr auto;grid-template-areas:"name stat" "bar bar" "btn btn";gap:10px 14px}
  .domain-row .btn{justify-self:start}
}

/* ============ Admin header logo hugs the left (above sidebar) ============ */
body.admin .site-header .container{max-width:none;padding-left:22px;padding-right:28px}

/* ============ Admin school detail ============ */
.sd-head{align-items:flex-start}
.sd-head__id{display:flex;align-items:center;gap:16px}
.sd-logo{width:56px;height:56px;object-fit:contain;border:1px solid var(--border);border-radius:12px;background:#fff;flex:0 0 auto}
.sd-logo--none{display:grid;place-items:center;color:var(--muted);background:var(--bg-soft)}
.sd-logo--none svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sd-inst{display:flex;align-items:center;gap:10px}
.sd-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--border)}
.sd-avatar--none{display:grid;place-items:center;background:var(--gradient-primary);color:#fff;font-weight:700;font-size:.85rem;font-family:var(--font-head)}

/* Header avatar as uploaded photo */
.profile-btn .avatar--img{object-fit:cover;background:none;box-shadow:none;border:1px solid rgba(255,255,255,.35)}

/* File upload selected-file confirmation */
.file-note{margin-top:8px;font-size:.85rem;font-weight:600;color:var(--ok-ink)}

/* ============ FAQ (faq.php) ============ */
.faq-list{margin:8px 0 0;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--heading)}
.faq-item summary::-webkit-details-marker{display:none}
/* A visible 3px focus ring of its own (2.22.6: only the browser's thin default showed). Drawn inside: the card clips. */
.faq-item summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:14px}
.faq-item summary svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--ink-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item summary:hover{color:var(--link)}
.faq-answer{padding:0 20px 20px;color:var(--text)}
.faq-answer p{margin:0;line-height:1.7}
.faq-domains{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.faq-domains li{display:flex;justify-content:space-between;gap:14px;padding:9px 14px;background:var(--bg-soft);border:1px solid var(--border);border-radius:9px}
.faq-domains li b{color:var(--link);font-variant-numeric:tabular-nums}
.faq-cta{margin-top:36px;text-align:center;padding:32px 24px;border-radius:16px;
  background:var(--gradient-topbar);color:#fff;box-shadow:0 14px 34px rgba(10,22,40,.28)}
.faq-cta h2{color:#fff;margin:0 0 6px}
.faq-cta p{color:rgba(255,255,255,.85);margin:0 0 16px}

/* Trial variant of the dashboard status bar — positive tone */
.dash-freebar--trial{background:linear-gradient(135deg,rgba(25,135,84,.10),rgba(25,135,84,.04));border-color:rgba(25,135,84,.32)}

/* Admin readiness distribution bars */
.readydist{display:flex;flex-direction:column;gap:8px}
.readydist__row{display:flex;align-items:center;gap:12px}
.readydist__label{flex:0 0 180px}
.readydist__bar{flex:1;height:10px;border-radius:6px;background:var(--bg-soft);border:1px solid var(--border);overflow:hidden}
.readydist__bar>span{display:block;height:100%;background:var(--gradient-meter);border-radius:6px}
.readydist__n{flex:0 0 40px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--heading)}

/* ============ CAT adaptive exam (cat.php) ============ */
.cat-proctor{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-bottom:18px;
  padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--gradient-topbar);color:#fff;box-shadow:var(--shadow-card)}
.cat-proctor__cam{position:relative;width:120px;height:76px;border-radius:10px;overflow:hidden;background:var(--band-solid);flex:0 0 auto;border:1px solid rgba(255,255,255,.15)}
.cat-proctor__cam video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cat-proctor__camoff{position:absolute;inset:0;display:grid;place-items:center;font-size:.72rem;color:rgba(255,255,255,.6)}
.cat-proctor__rec{position:absolute;top:6px;left:6px;display:flex;align-items:center;gap:5px;font-size:.65rem;font-weight:700;letter-spacing:.1em;color:#fff}
.cat-proctor__rec{background:rgba(10,22,40,.55);padding:2px 6px;border-radius:6px;letter-spacing:.04em;text-transform:none}
.cat-proctor__meta{text-align:right;flex:1}
.cat-proctor__timer{font-family:var(--font-head);font-weight:700;font-size:1.8rem;line-height:1;font-variant-numeric:tabular-nums}
.cat-proctor__label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:4px}
.cat-verdict{display:flex;align-items:center;gap:20px;padding:22px;border-radius:16px;margin-top:12px;
  background:var(--bg-soft);border:1px solid var(--border)}
.cat-verdict__score{font-family:var(--font-head);font-weight:700;font-size:3rem;line-height:1;width:96px;height:96px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--gradient-primary)}
.cat-verdict--keep .cat-verdict__score,.cat-verdict--borderline .cat-verdict__score{background:linear-gradient(135deg,#64748b,#475569)}
.cat-verdict--likely .cat-verdict__score,.cat-verdict--ontrack .cat-verdict__score{background:linear-gradient(135deg,#198754,#146c43)}
.cat-verdict__label{font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:var(--heading)}
.cat-domains{display:flex;flex-direction:column;gap:8px}
.cat-domrow{display:flex;align-items:center;gap:12px}
.cat-domrow__name{flex:0 0 200px}
.cat-domrow__bar{flex:1;height:10px;border-radius:6px;background:var(--bg-soft);border:1px solid var(--border);overflow:hidden}
.cat-domrow__bar>span{display:block;height:100%;background:var(--gradient-meter)}
.cat-domrow__pc{flex:0 0 44px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.quiz-scenario{background:var(--surface-2);border-left:3px solid var(--navy-light);padding:12px 14px;border-radius:8px;margin-bottom:14px}

/* ============ EMT Skills library (skills.php) ============ */
.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:14px}
.skill-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:var(--shadow-card);transition:transform .16s,box-shadow .16s,border-color .16s}
.skill-card:hover{box-shadow:0 12px 28px rgba(10,22,40,.12);border-color:var(--navy-light)}
.skill-card h3{margin:0 0 6px;font-size:1.12rem}
.skill-card p{margin:0 0 12px;color:var(--muted);font-size:.92rem;line-height:1.5}
.skill-card__go{font-weight:700;color:var(--link);font-size:.9rem}
.skill-why{background:var(--bg-soft);border-left:3px solid var(--navy-light);border-radius:8px;padding:14px 16px;margin-top:14px}
.skill-why h3{margin:0 0 6px;font-size:1.05rem}
.skill-why p{margin:0;line-height:1.6}
.skill-steps{list-style:none;counter-reset:sk;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:12px}
.skill-steps li{counter-increment:sk;position:relative;padding:14px 16px 14px 56px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-card)}
.skill-steps li::before{content:counter(sk);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--gradient-primary);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.95rem}
.skill-steps li strong{display:block;color:var(--heading);margin-bottom:2px}
.skill-steps li span{color:var(--muted)}
.skill-video-soon{margin-top:24px;padding:20px;border:1px dashed var(--border);border-radius:12px;text-align:center;background:var(--bg-soft)}
.skill-video-soon p{margin:6px 0 0;color:var(--muted)}

/* ============ Admin error console (admin/errors.php) ============ */
.err-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.err-item{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.err-item--resolved{opacity:.6}
.err-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px}
.err-item summary::-webkit-details-marker{display:none}
.err-item summary:hover{background:var(--bg-soft)}
.err-type{font-weight:700;color:var(--heading);font-size:.85rem;flex:0 0 auto}
.err-msg{flex:1;color:var(--text);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.err-when{flex:0 0 auto;color:var(--muted);font-size:.8rem}
.err-detail{padding:4px 16px 16px;border-top:1px solid var(--border)}
.err-detail__msg{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;background:var(--bg-soft);border-radius:8px;padding:10px 12px;margin:12px 0;white-space:pre-wrap;word-break:break-word}
.err-meta{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;margin:0 0 8px;font-size:.86rem}
.err-meta dt{color:var(--muted);font-weight:600}
.err-meta dd{margin:0;word-break:break-word}
.err-trace{background:#0f1b28;color:#cfe0f0;border-radius:8px;padding:12px;font-size:.78rem;line-height:1.5;overflow-x:auto;max-height:320px;white-space:pre-wrap;word-break:break-word}
.err-resolved-tag{color:var(--ok-ink);font-weight:600;font-size:.85rem;margin-right:10px}
/* Awareness badge on the admin Errors nav item */
.admin-navlink__badge{margin-left:auto;background:var(--no);color:#fff;font-size:.68rem;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px;min-width:18px;text-align:center}
.admin-layout.is-collapsed .admin-navlink__badge{position:absolute;top:6px;right:6px;margin:0}

/* ---------- Technology-Enhanced Items (order / category) ---------- */
.item-instr{color:var(--muted);font-size:.9rem;margin:0 0 10px}
.item-order,.item-cat{display:flex;flex-direction:column;gap:10px;margin:4px 0 8px}
.item-order__row,.item-cat__row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.item-order__body,.item-cat__body{flex:1;min-width:0}
.item-pos{width:66px;height:40px;flex:none}
.item-cat__sel{width:190px;height:40px;flex:none}
.item-pos-badge{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--gradient-primary);color:#fff;font-weight:700;font-size:.95rem}
.item-cat__ans{flex:none;text-align:right;color:var(--heading);font-size:.95rem}
.item-yourans{color:var(--muted);font-style:italic;font-weight:400}
.item-order__row.is-ok,.item-cat__row.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.item-order__row.is-no,.item-cat__row.is-no{border-color:var(--no);background:var(--no-bg)}
@media(max-width:560px){.item-cat__row{flex-wrap:wrap}.item-cat__sel{width:100%}}

/* ==========================================================================
   Review 2026-09-26 — accessibility + polish (UX review findings)
   ========================================================================== */
/* The [hidden] attribute must beat component display rules (the passkey buttons). */
.oauth-btn[hidden], .btn[hidden]{display:none!important}

/* Visible keyboard focus on card-style answer options and pill toggles (their inputs are visually hidden). */
.quiz-option:has(input:focus-visible){outline:3px solid var(--focus); outline-offset:2px}
.fc-pill-toggle:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:2px}

/* Content card grids (marketing pages) — the column count lives in a class, so the phone rule can win. */
.card-grid{display:grid; gap:24px; align-items:stretch}
.card-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card-grid p{font-size:.95rem; line-height:1.55}
@media (max-width:768px){ .card-grid--2, .card-grid--3, .price-grid{grid-template-columns:1fr} }

/* Build-list / matching instructions read as "this question works differently". */
.item-instr{display:flex; align-items:flex-start; gap:10px; color:var(--heading); font-size:.92rem; font-weight:500;
  background:#eef4fa; border:1px solid #d6e4f1; border-radius:10px; padding:10px 12px; margin:0 0 12px}
[data-theme="dark"] .item-instr{background:var(--info-bg);border-color:var(--info-line)}
.item-instr__ico{flex:none; width:18px; height:18px; margin-top:1px; fill:none; stroke:var(--ink-accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.item-order--reveal .item-instr{background:none; border:0; padding:0; font-weight:600}
.item-pos, .item-cat__sel{height:var(--h-btn)}

/* Password show / hide toggle (added by main.js to every password field). */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:48px}
.pw-toggle{position:absolute; top:50%; right:6px; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center;
  border:0; background:none; color:var(--muted); border-radius:8px; cursor:pointer}
.pw-toggle::after{content:""; position:absolute; inset:-4px}   /* 36px button, 44px target */
.pw-toggle svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pw-toggle:hover{color:var(--link)}
.pw-toggle:focus-visible{outline:2px solid var(--focus); outline-offset:1px}

/* Contrast: white text clears 4.5:1 across the whole "got it" button and on the Correct tag. */
.fc-grade__got{background:linear-gradient(135deg,#2b8253,#1f6b44)}
.fc-grade__got:hover{background:linear-gradient(135deg,#246e46,#1a5c3a)}
.quiz-tag--ok{background:#157347}


/* Visually hidden, still read by assistive technology. */
.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}

/* Reduced motion: no confetti, flips, lifts, or pulsing. */
@media (prefers-reduced-motion: reduce){
  .confetti, .confetti-piece{animation:none!important; display:none!important}
  .fcard__inner{transition:none!important}
  .card, .feature-card, .study-mode, .fc-deck, .quiz-option{transition:none!important}
  .cat-proctor__rec span{animation:none!important; opacity:1}
  .toast{transition:opacity .15s!important; transform:none!important}
  .modal{animation:none!important}
}

/* Hero headline wraps into balanced lines (no orphaned word on narrow screens). */
.hero h1{text-wrap:balance}

/* Site-version switch (Phone / Tablet / Desktop) in the footer — 2.9.24 */
.dev-switch{font-size:.8rem;color:rgba(255,255,255,.7)}
.dev-switch a{color:var(--dl-sky2);font-weight:600;text-decoration:none}   /* sky links; the current view is white and bold */
.dev-switch__cur{font-weight:700;color:#fff}
/* Renewal and refund terms under the price cards (2.12.3). */
.price-terms{max-width:760px;margin:22px auto 0;text-align:center;color:var(--muted);font-size:.9rem;line-height:1.6}
/* 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}
/* The annual plan's saving, on its own line under the price (2.12.3). */
.price-save{display:inline-block;margin:0 0 10px;padding:3px 12px;border-radius:20px;background:var(--bg-soft);color:var(--heading);font-size:.82rem;font-weight:700}


/* Printing a skill sheet (2.13.1): just the sheet, in black on white, without the site's navigation. */
@media print{
  .site-header,.site-footer,.breadcrumbs-bar,.skip-link,#toast-container,.cookie-banner,.btn{display:none!important}
  body{background:#fff;color:#000}
  .skill-steps li{break-inside:avoid}
  a{color:#000;text-decoration:none}
}

/* Today's Plan (2.14.0) */
.plan-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.plan-steps a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;color:var(--text);background:var(--bg-soft)}
.plan-steps a:hover{border-color:var(--navy-light)}
.plan-steps span{color:var(--muted);font-size:.92rem}

/* Timed-set briefing, Set Review and Practice History (2.14.2) */
.brief-rules{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.brief-rules li{position:relative;padding-left:26px;line-height:1.6}
.brief-rules li::before{content:"";position:absolute;left:4px;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--ink-accent)}
.review-wrap{max-width:880px}
.review-head{margin-bottom:18px}
.review-head h1{margin:0 0 4px}
.review-head__when{color:var(--muted);margin:0 0 16px}
.review-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:0}
.review-stats div{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--bg-soft)}
.review-stats dt{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.review-stats dd{margin:2px 0 0;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.review-filter{display:flex;gap:8px;margin-top:16px}
.review-filter a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--border);color:var(--text);font-weight:500;text-decoration:none;position:relative}
.review-filter a::after{content:"";position:absolute;inset:-4px 0}   /* 36px pill, 44px target */
.review-filter a span{color:var(--muted);font-weight:500}
.review-filter a[aria-current]{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.review-filter a[aria-current] span{color:rgba(255,255,255,.85)}
.review-item{margin-bottom:16px;scroll-margin-top:90px}
.review-item__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:12px}
.review-item__head h2{margin:0;font-size:1.15rem}
.review-item__head .quiz-tag{margin-left:0}
.review-item__topic{color:var(--muted);font-size:.9rem;margin-left:auto}
.review-note{color:var(--muted);font-size:.92rem;margin:12px 0 0}
.review-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.quiz-option--static{cursor:default}
.quiz-option--static:hover{box-shadow:none}
.quiz-option--static:not(.quiz-option--correct):not(.quiz-option--incorrect):hover{border-color:var(--border)}
.history-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.history-row{display:flex;align-items:center;gap:16px;padding:14px 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:0 2px 8px rgba(13,58,92,.06)}
a.history-row:hover{border-color:var(--navy-light)}
.history-row__main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.history-row__name{font-weight:700}
.history-row__meta{color:var(--muted);font-size:.9rem}
.history-row__score{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:3.5ch;text-align:right}
.history-row__go{font-weight:700;color:var(--ink-accent)}
.history-pages{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px;color:var(--muted)}
@media (max-width:640px){.history-row{flex-wrap:wrap}.history-row__go{width:100%}}

/* Home page sample question (2.14.4) */
.sample-q{padding:28px}
.sample-q__meta{color:var(--muted);font-size:.9rem;margin:0 0 10px}
.sample-q__opts{border:0;margin:14px 0 0;padding:0}
.sample-q__actions{margin-top:6px}
.sample-q__verdict{margin:16px 0 0;padding:12px 16px;border-radius:12px;font-weight:700;border:1px solid}
.sample-q__verdict:focus{outline:none}
.sample-q__verdict--ok{color:var(--ok-text);background:var(--ok-bg);border-color:#b9dcc8}
.sample-q__verdict--no{color:#8a1f2b;background:#fbecee;border-color:#efc3c9}
[data-theme="dark"] .sample-q__verdict--ok{border-color:var(--ok-line)}
[data-theme="dark"] .sample-q__verdict--no{color:var(--no-text);background:var(--no-bg);border-color:var(--no-line)}
.sample-q__after{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.sample-q__after p{margin:0 0 14px;color:var(--muted)}
/* The sample's explanations, tags and verdict stay hidden until it is checked: component rules set display, which
   would otherwise override the hidden attribute (2.14.5). */
form[data-sample] [hidden]{display:none!important}

/* 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:90px}
.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::before{content:"\00B7";margin-right:10px}
.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,#patient{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);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{scroll-margin-top:90px}   /* clears the sticky 74px site header when the review scrolls into view */
.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}}

/* Instructor Tools menu group (2.25.0; includes/instructor_tools.php): NREMT Review and Games under one label in the admin
   and instructor sidebars. Expanded: a small uppercase label (55% white on the band: 5.9:1) under a hairline. Collapsed:
   the hairline alone shows; the label stays in the accessibility tree. At 900 px or less: an inline label with a divider
   inside the sideways-scrolling strip. */
/* The band's own focus ring (2.25.0): --focus on the navy band was 2.28:1 and vanished on the active link; sky is 10.9:1
   on the band and 4.8:1 on the active link. The top label rises to the group label's 55% white (it was 42%: 4.06:1). The
   menu scrolls inside itself when it is taller than the window, so Instructor Tools is never out of reach. */
.admin-sidebar :focus-visible{outline-color:var(--dl-sky2)}
.admin-sidebar__label{color:rgba(255,255,255,.55)}
@media(min-width:901px){.admin-sidebar nav{max-height:calc(100dvh - 28px);overflow-y:auto;scrollbar-width:thin}}
.admin-navgroup{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.admin-navgroup__label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700;padding:2px 12px 8px}
.admin-layout.is-collapsed .admin-navgroup__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){
  .admin-navgroup{display:flex;align-items:center;gap:4px;flex:none;margin:0 0 0 6px;padding:0 0 0 10px;border-top:0;border-left:1px solid rgba(255,255,255,.18)}
  .admin-navgroup__label,.admin-layout.is-collapsed .admin-navgroup__label{position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible;white-space:nowrap;padding:0 6px 0 0}
}

/* ==========================================================================
   Action feedback: busy states (2.25.45; main.js initActionFeedback / window.emtpBusy). The button that sent a form
   shows a spinner and its busy label, keeping its own colors (it is working, not unavailable); the form's other buttons
   dim and wait; a thin sky bar along the top of the window says the next page is on its way; a long job (an import, a
   batch of emails) also gets a working panel over the page. The spinner is the text's own color; everything else is a
   token. Reduced motion: nothing turns or slides (the spinner and the top bar hold still, the panel has no bar), and the words still say it is working.
   ========================================================================== */
:root{--busy-scrim:rgba(10,28,48,.42); --busy-bar:var(--dl-sky1); --busy-shadow:0 24px 60px rgba(5,20,40,.35)}
:root[data-theme="dark"]{--busy-scrim:rgba(0,0,0,.6); --busy-shadow:0 24px 60px 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}   /* a tile or tag that keeps its words */
.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:.55; cursor:progress}
.busy-failed{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--no) !important}
.busy-bar{position:fixed; top:0; left:0; right:0; height:3px; z-index:2100; 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:1900; display:flex; align-items:center; justify-content:center; padding:16px;
  background:var(--busy-scrim); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); cursor:progress;
  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:20px 22px;
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:12px; box-shadow:var(--busy-shadow)}
.busy-panel__spin{font-size:22px; color:var(--ink-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-head); font-weight:600; font-size:1.05rem; line-height:1.35; color:var(--heading)}
.busy-panel__detail{margin:0; font-size:.92rem; line-height:1.5; color:var(--muted)}
.busy-panel__track{position:relative; height:4px; margin-top:14px; border-radius:999px; overflow:hidden; background:var(--track)}
.busy-panel__track::before{background:var(--meter)}
@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}
}