/* =================================================================
   MC2 Viewfinder Trainer 2.0
   Layout: TOP BAR / PROMPT STRIP / VIEWFINDER / FEEDBACK STRIP / EXPOSE
   The prompt + feedback strips fill the blank space above and below
   the square viewfinder, providing video-game-style instruction.
   ================================================================= */

:root {
  /* ====================================================================
     MC2 Visual Language tokens (v1.0, 2026)
     Source of truth: MC2-Visual-Language-Guidelines.html
     Applied to APP CHROME ONLY.  HUD inside #viewfinder keeps its own
     device-faithful color set below.
     ==================================================================== */

  /* Brand — Azure */
  --brand-primary:        #595CFF;
  --brand-primary-hover:  #4A4DEB;
  --brand-primary-press:  #3E41D6;
  --brand-primary-soft:   #8B8EFF;
  --brand-primary-tint:   #E8E9FF;
  --on-brand:             #FFFFFF;

  /* Neutrals — cool ramp */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F6F6F8;
  --neutral-100:  #ECECF1;
  --neutral-200:  #D6D6DD;
  --neutral-300:  #B8B8C0;
  --neutral-400:  #9A9AA3;
  --neutral-500:  #7B7B85;
  --neutral-600:  #5C5C66;
  --neutral-700:  #3F3F47;
  --neutral-800:  #2A2A30;
  --neutral-900:  #18181C;
  --neutral-1000: #000000;

  /* Status — exactly one meaning each */
  --success:       #2EA660;
  --success-soft:  #D9F1E3;
  --warning:       #E87047;
  --warning-soft:  #FBE2D7;
  --critical:      #E63A2E;
  --critical-soft: #FAD5D2;
  --info:          #595CFF;
  --info-soft:     #E8E9FF;

  /* Semantic — DARK surface (the trainer is the on-device-style theme:
     "the device app defaults to dark to reduce eye strain in dim imaging
     suites and to make the X-ray image the brightest object on screen") */
  --bg-base:        #0F0F13;
  --bg-sunken:      #0A0A0D;
  --bg-raised:      #18181C;
  --bg-overlay:     rgba(0, 0, 0, 0.65);
  --text-primary:   #FFFFFF;
  --text-secondary: #B8B8C0;
  --text-tertiary:  #7B7B85;
  --text-on-brand:  #FFFFFF;
  --border-subtle:  #2A2A30;
  --border-default: #3F3F47;
  --border-strong:  #5C5C66;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* Spacing — 8pt baseline */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Elevation — dark theme variants */
  --elev-1: 0 1px 2px rgba(0,0,0,0.40);
  --elev-2: 0 4px 12px rgba(0,0,0,0.50);
  --elev-3: 0 12px 28px rgba(0,0,0,0.60);
  --elev-4: 0 24px 60px rgba(0,0,0,0.70);
  --elev-focus: 0 0 0 3px var(--brand-primary-soft);

  /* Motion */
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    360ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* Type */
  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ====================================================================
     HUD device-state colors — DO NOT change.  Used inside #viewfinder
     for cassette state, mode shield, SSD bg, kV/mAs pill fills, etc. —
     must stay faithful to the real MC2 device colors.
     ==================================================================== */
  --green:        #3DB06B;
  --green-dim:    #2a7a4d;
  --orange:       #EE6C4D;
  --collim:       #077B51;
  --red:          #ff4757;
  --amber:        #ffb302;

  /* ====================================================================
     Legacy aliases — keep so old class names that still reference these
     don't break while we migrate.  Map to canonical tokens.
     ==================================================================== */
  --bg-0:             var(--bg-base);
  --bg-1:             var(--bg-sunken);
  --bg-2:             var(--bg-raised);
  --text:             var(--text-primary);
  --text-dim:         var(--text-secondary);
  --text-soft:        var(--text-secondary);
  --pill-stroke:      var(--border-subtle);
  --oxos-blue:        var(--brand-primary);
  --oxos-blue-soft:   var(--brand-primary-soft);
  --oxos-blue-dim:    rgba(89, 92, 255, 0.14);
  --oxos-blue-edge:   var(--border-default);
  --oxos-slate:       var(--bg-base);
  --oxos-slate-2:     var(--bg-raised);
  --oxos-text-faded:  var(--text-tertiary);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: var(--bg-base); color: var(--text-primary);
  font-family: var(--ff-sans);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; touch-action: none;
  user-select: none; -webkit-user-select: none;
}

.hidden { display: none !important; }

/* ===================================================================
   MC2 Type scale — used across chrome.  Values match the guideline.
   =================================================================== */
.t-eyebrow {
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--text-secondary);
}
.t-display { font-size: 56px; line-height: 64px; letter-spacing: -0.02em; font-weight: 700; margin: 0; }
.t-h1      { font-size: 40px; line-height: 48px; letter-spacing: -0.015em; font-weight: 700; margin: 0; }
.t-h2      { font-size: 32px; line-height: 40px; letter-spacing: -0.01em; font-weight: 700; margin: 0; }
.t-h3      { font-size: 24px; line-height: 32px; font-weight: 600; margin: 0; }
.t-h4      { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; }
.t-lg      { font-size: 18px; line-height: 26px; font-weight: 400; }
.t-body    { font-size: 16px; line-height: 24px; font-weight: 400; }
.t-sm      { font-size: 14px; line-height: 20px; font-weight: 400; }
.t-cap     { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-tertiary); }
.t-mono    { font-family: var(--ff-mono); font-size: 14px; line-height: 20px; font-weight: 500; }
@media (max-width: 700px) {
  .t-display { font-size: 36px; line-height: 44px; }
  .t-h1      { font-size: 32px; line-height: 40px; }
  .t-h2      { font-size: 26px; line-height: 34px; }
}

/* MC2 Status pill — color + dot + word, never color alone */
.mc2-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.06); color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}
.mc2-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-tertiary);
  flex: 0 0 8px;
}
.mc2-status.info    { background: rgba(89,92,255,0.14);  color: var(--brand-primary-soft);  border-color: rgba(89,92,255,0.30); }
.mc2-status.info    .dot { background: var(--brand-primary); }
.mc2-status.success { background: rgba(46,166,96,0.16);  color: #B5E6CC;  border-color: rgba(46,166,96,0.35); }
.mc2-status.success .dot { background: var(--success); }
.mc2-status.warning { background: rgba(232,112,71,0.14); color: #FFC7B0; border-color: rgba(232,112,71,0.35); }
.mc2-status.warning .dot { background: var(--warning); }
.mc2-status.critical{ background: rgba(230,58,46,0.14); color: #FFB8B3; border-color: rgba(230,58,46,0.35); }
.mc2-status.critical .dot { background: var(--critical); animation: mc2-pulse 1.4s var(--ease-in-out) infinite; }
@keyframes mc2-pulse { 50% { transform: scale(1.6); opacity: 0.6; } }

/* ===================================================================
   START SCREEN — Tutorial vs Play
   =================================================================== */
/* ===================================================================
   BOOT SCREEN — OXOS animation on black
   =================================================================== */
#boot-screen {
  position: fixed; inset: 0; z-index: 70;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
#boot-video {
  width: min(70vw, 70vh);
  height: auto;
  max-width: 460px;
  background: #000;
  display: block;
}

/* ===================================================================
   WELCOME SCREEN — title, tap to begin (MC2 type scale)
   =================================================================== */
#welcome-screen {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg-base);
  color: var(--text-primary);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: max(env(safe-area-inset-top, 0px), var(--s-8)) var(--s-6)
          max(env(safe-area-inset-bottom, 0px), var(--s-8));
  cursor: pointer;
}
.welcome-inner {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  max-width: 520px; width: 100%;
  gap: var(--s-3);
}
#welcome-screen h1 {
  margin: 0;
  /* MC2 t-h1 (40/48 -1.5%, 700) at desktop, scales down on phone */
  font-size: 40px; line-height: 48px;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--text-primary);
}
@media (max-width: 700px) {
  #welcome-screen h1 { font-size: 32px; line-height: 40px; }
}
.welcome-sub {
  color: var(--text-secondary);
  font-size: 18px; line-height: 26px;
  font-weight: 400;
  margin: var(--s-3) 0 var(--s-10) 0;
  max-width: 440px;
}
@media (max-width: 700px) {
  .welcome-sub { font-size: 16px; line-height: 24px; margin-bottom: var(--s-8); }
}
/* Ghost pill — Porsche/OXOS restraint over a solid CTA.  The whole
   screen is tappable, so the pill is just a visual anchor that says
   "do something" without shouting. */
.welcome-cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-sans);
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-primary-soft);
  background: transparent;
  padding: 13px 28px;
  border: 1px solid rgba(89,92,255,0.45);
  border-radius: var(--r-pill);
  animation: welcome-pulse 2s var(--ease-in-out) infinite;
}
@keyframes welcome-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1);    box-shadow: 0 0 0 0 rgba(89,92,255,0); }
  50%      { opacity: 1;   transform: scale(1.02); box-shadow: 0 0 0 8px rgba(89,92,255,0.10); }
}
.welcome-credit {
  flex: 0 0 auto;
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--s-6);
}
.welcome-credit strong {
  color: var(--text-secondary);
  font-weight: 700;
}

/* ===================================================================
   START SCREEN — route picker (Tutorial / Play / Simulated Exam)
   MC2 Visual Language: dark surface, canonical card spec, restrained
   blue (only the primary "Start Tutorial" CTA is solid Azure).
   =================================================================== */
#start-screen {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg-base);
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(env(safe-area-inset-top, 0px), var(--s-6)) var(--s-5)
          max(env(safe-area-inset-bottom, 0px), var(--s-6));
}
.start-inner {
  max-width: 760px; width: 100%;
  margin: auto;  /* conditional center; top-aligned when content > viewport */
  display: flex; flex-direction: column;
  gap: var(--s-8);
}

/* Three confident horizontal tiles, stacked vertically.  Porsche/OXOS
   energy: bold typography, generous whitespace, single arrow indicator
   on the right.  No bullet lists, no separate CTA buttons — the entire
   tile is the action. */
.route-tiles {
  display: flex; flex-direction: column;
  gap: var(--s-3);
}

.route-tile {
  position: relative;
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-6);
  color: var(--text-primary);
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-5);
  cursor: pointer;
  box-shadow: var(--elev-1);
  overflow: hidden;
  font-family: var(--ff-sans);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
/* Subtle vertical accent bar that grows on hover — Porsche detail */
.route-tile::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 0;
  background: var(--brand-primary);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  transition: height var(--dur-base) var(--ease-out);
}
.route-tile:hover {
  background: #1F1F25;
  border-color: var(--border-default);
  box-shadow: var(--elev-3);
}
.route-tile:hover::before { height: 56px; }
.route-tile:hover .tile-arrow { transform: translateX(4px); color: var(--brand-primary-soft); }
.route-tile:active {
  transform: scale(0.995);
  box-shadow: var(--elev-1);
  transition-duration: var(--dur-instant);
}
.route-tile:focus-visible {
  outline: none;
  box-shadow: var(--elev-2), var(--elev-focus);
}

.tile-body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }

/* Eyebrow row: "01 · Guided" — mono number + sans kind, in a single line */
.tile-eyebrow {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: var(--s-3);
}
.tile-num {
  font-family: var(--ff-mono);
  color: var(--brand-primary-soft);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.tile-kind { color: var(--text-secondary); }

/* The hero — big confident title, like a section head on oxos.com */
.tile-title {
  margin: 0;
  font-size: 32px; line-height: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.tile-sub {
  margin: 0;
  font-size: 14px; line-height: 20px;
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 38ch;
}

/* Stars under tile-sub for the Tutorial tile (if rendered) */
.tile-stars {
  margin-top: var(--s-2);
  font-size: 13px; letter-spacing: 2px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

/* Animated arrow on the right — the affordance */
.tile-arrow {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  color: var(--text-tertiary);
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

/* v25.1: tile-cta* removed — tiles are now the affordance themselves. */

/* Mobile: stack tiles vertically when too narrow, tighten density so the
   page fits the viewport without needing to scroll on most phones. */
@media (max-width: 520px) {
  .start-inner { gap: var(--s-6); }
  .route-tile { padding: var(--s-5); }
  .tile-title { font-size: 28px; line-height: 34px; }
  .tile-sub { font-size: 13px; line-height: 18px; }
  .tile-eyebrow { font-size: 11px; margin-bottom: var(--s-2); }
}

/* Canonical card-flat style.  Print is supportive content, not the
   primary action — neutral fill, no brand color. */
.print-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  text-align: left;
}
.print-card-title {
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--s-3);
}
.print-card-text {
  margin: 0 0 var(--s-4) 0;
  font-size: 14px; line-height: 20px;
  color: var(--text-secondary);
}
.print-card-text strong {
  color: var(--text-primary);
  font-weight: 600;
}
/* Secondary button — keeps blue restraint (Tutorial CTA is the primary) */
.print-download {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  font-family: var(--ff-sans);
  font-size: 14px; line-height: 20px;
  font-weight: 600;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.print-download::before {
  content: '\2193';
  font-size: 16px; line-height: 1;
  font-weight: 700;
  color: var(--text-secondary);
}
.print-download:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--border-strong);
}
.print-download:active { background: rgba(255,255,255,0.14); }

.credit {
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-tertiary);
  margin: var(--s-4) 0 0 0;
  text-align: center;
}
.credit strong {
  color: var(--text-secondary);
  font-weight: 700;
}

/* ===================================================================
   SIMULATED EXAM — section / view / detail screens (MC2 dark surface)
   =================================================================== */
.exam-screen {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg-base);
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: max(env(safe-area-inset-top, 0px), var(--s-5)) var(--s-5)
          max(env(safe-area-inset-bottom, 0px), var(--s-5));
}
.exam-screen-inner {
  max-width: 760px; width: 100%;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--s-4);
}
.exam-screen-header {
  display: flex; align-items: center; gap: var(--s-4);
  padding-bottom: var(--s-1);
}
/* Icon-button per MC2 spec — secondary fill, neutral */
.exam-back {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: var(--ff-sans);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.exam-back:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--border-strong);
}
.exam-back:active { transform: scale(0.96); }
.exam-screen-title { flex: 1; min-width: 0; }
.exam-overline {
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--s-1);
}
.exam-screen-title h2 {
  margin: 0;
  font-size: 24px; line-height: 32px;
  font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* Section / view list rows — canonical card-flat, 64px tablet row height
   scaled down for phone.  Neutral fill; brand color only on hover hint. */
.exam-section-list,
.exam-view-list {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.exam-section-row,
.exam-view-row {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  color: var(--text-primary);
  text-align: left;
  display: flex; align-items: center; gap: var(--s-3);
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
  font-family: var(--ff-sans);
  min-height: 64px;
}
.exam-section-row:hover,
.exam-view-row:hover {
  background: #1F1F25;
  border-color: var(--border-default);
  box-shadow: var(--elev-2);
}
.exam-section-row:active,
.exam-view-row:active { transform: scale(0.995); }

.exam-section-row-text { flex: 1; min-width: 0; }
.exam-section-row-title {
  font-size: 18px; line-height: 26px;
  font-weight: 600;
  color: var(--text-primary);
}
.exam-section-row-sub {
  font-size: 14px; line-height: 20px;
  color: var(--text-secondary);
  margin-top: 2px;
}
/* Status-pill style count badge — MC2 .badge.accent */
.exam-section-row-count {
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--brand-primary-soft);
  background: rgba(89,92,255,0.14);
  border: 1px solid rgba(89,92,255,0.30);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-family: var(--ff-sans);
}
.exam-section-row-arrow,
.exam-view-row-arrow {
  color: var(--text-tertiary);
  font-size: 20px;
}

.exam-view-row-text { flex: 1; min-width: 0; }
.exam-view-row-anatomy {
  font-size: 18px; line-height: 26px;
  font-weight: 600;
  color: var(--text-primary);
}
.exam-view-row-projection {
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Exam detail card — canonical raised card, elev-2 */
.exam-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  box-shadow: var(--elev-2);
}
.exam-card-illus {
  position: relative;
  /* v28.4: bump preview viewer from 220px to 360px so the cassette+anatomy
     actually reads at a glance.  Mobile bumped from 180px to 300px below. */
  width: 100%; aspect-ratio: 1 / 1;
  max-width: 360px; align-self: center;
  /* v28.5: light neutral preview background (matches Figma cassette card).
     v28.9: nudged to the cool app neutral. */
  background: #F1F4F9;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.exam-card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: none;  /* shown by JS once the matching variant loads */
  /* v28.15: padding 14px → 4px so more of the viewer is actual image. */
  padding: 4px;
}
.exam-card-img.active { display: block; }
/* A/B toggle — small icon-button cluster, neutral fill */
.exam-card-toggle {
  position: absolute;
  bottom: var(--s-3); right: var(--s-3);
  display: flex; gap: 2px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill);
  padding: 3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.exam-card-toggle-btn {
  width: 32px; height: 28px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-family: var(--ff-sans);
  font-size: 12px; line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.exam-card-toggle-btn.active {
  background: var(--brand-primary);
  color: var(--on-brand);
}
.exam-card-toggle-btn:hover:not(.active) { color: var(--text-primary); }
.exam-card-illus-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  color: var(--oxos-text-faded);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  text-align: center;
}
.placeholder-cassette {
  width: 60%; aspect-ratio: 1 / 1;
  border: 2px solid rgba(171,209,255,0.25);
  border-radius: 14px;
  position: relative;
}
.placeholder-cassette::before,
.placeholder-cassette::after {
  content: ''; position: absolute;
  background: rgba(171,209,255,0.25);
}
.placeholder-cassette::before {
  left: -8px; top: 35%; width: 8px; height: 30%;
  border-radius: 4px 0 0 4px;
}
.placeholder-cassette::after {
  right: -8px; top: 35%; width: 8px; height: 30%;
  border-radius: 0 4px 4px 0;
}

/* v28.5: tightened gaps + smaller measurements so Start Exam fits above the
   fold without scrolling on a phone. */
.exam-card-specs { display: flex; flex-direction: column; gap: var(--s-2); }

.spec-section { display: flex; flex-direction: column; gap: var(--s-2); }
/* MC2 eyebrow */
.spec-section-label {
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Stat: small eyebrow label over large MONO value (measured value rule) */
.spec-stat {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
}
.spec-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.spec-label {
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-tertiary);
}
.spec-value {
  font-family: var(--ff-mono);
  /* v28.5: 26px → 22px, frees ~18px per row × 2 rows = ~36px vertical. */
  font-size: 22px; line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.spec-divider {
  height: 1px;
  background: var(--border-subtle);
}

/* Mode tab group — neutral fill + brand only on active */
.spec-mode-tabs {
  display: flex; gap: 4px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 4px;
}
.spec-mode-tab {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  /* v28.5: tighter tab pad — saves ~6px vertical. */
  padding: 7px 12px;
  font-family: var(--ff-sans);
  font-size: 13px; line-height: 18px;
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.spec-mode-tab.active {
  background: var(--brand-primary);
  color: var(--on-brand);
  box-shadow: var(--elev-1);
}
.spec-mode-tab:hover:not(.active) { color: var(--text-primary); background: rgba(255,255,255,0.05); }
/* v28.15: notes now sit at the TOP of the exam card (above the preview).
   Compact 1-line eyebrow style. */
.exam-notes {
  font-size: 11px; line-height: 14px;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-2) 0;
  letter-spacing: 0.04em;
}
.exam-notes::before { content: '* '; color: var(--text-tertiary); }

/* Start Exam — MC2 canonical primary button XL (the single primary action) */
.exam-start-btn {
  /* v28.5: smaller margin-top, shorter button so it fits without scroll. */
  margin-top: var(--s-1);
  background: var(--brand-primary);
  border: 0;
  border-radius: var(--r-md);
  color: var(--on-brand);
  padding: var(--s-2) var(--s-6);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  box-shadow: var(--elev-2);
  font-family: var(--ff-sans);
  font-weight: 600;
  min-height: 48px;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.exam-start-icon { width: 22px; height: 22px; }
.exam-start-label {
  font-size: 16px; line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.exam-start-btn:hover {
  background: var(--brand-primary-hover);
  box-shadow: var(--elev-3);
}
.exam-start-btn:active {
  background: var(--brand-primary-press);
  transform: scale(0.985);
  box-shadow: var(--elev-1);
}

@media (max-width: 520px) {
  .exam-screen-title h2 { font-size: 20px; line-height: 26px; }
  /* v28.15: tighter card padding + slightly smaller preview on phone. */
  .exam-card { padding: var(--s-3); gap: var(--s-1); }
  .exam-card-illus { max-width: 280px; }
  .exam-card-specs { gap: var(--s-2); }
  .spec-value { font-size: 24px; }
  .spec-section-label { font-size: 11px; }
  .spec-label { font-size: 11px; }
  .exam-start-btn { min-height: 52px; padding: var(--s-2) var(--s-5); margin-top: 0; }
  .exam-start-label { font-size: 15px; letter-spacing: 0.02em; }
  .exam-start-icon { width: 22px; height: 22px; }
  .exam-screen-inner { gap: var(--s-3); }
}

/* ===================================================================
   APP SHELL — top bar / prompt / viewfinder / feedback / EXPOSE
   =================================================================== */
#app {
  position: fixed; inset: 0;
  background: var(--bg-0);
  display: flex; flex-direction: column; align-items: center;
  padding: max(env(safe-area-inset-top, 0px), 8px) 14px max(env(safe-area-inset-bottom, 0px), 14px);
  gap: 8px;
}

/* TOP BAR */
#top-bar {
  width: 100%; max-width: 520px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
/* MC2 icon-button — neutral secondary, 40px webapp default */
.icon-btn {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.icon-btn:hover { background: rgba(255,255,255,0.10); border-color: var(--border-strong); }
.icon-btn:active { background: rgba(255,255,255,0.14); transform: scale(0.96); }
/* MC2 status pill — info variant: color + dot + word */
.level-pill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(89,92,255,0.14);
  border: 1px solid rgba(89,92,255,0.30);
  color: var(--brand-primary-soft);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-family: var(--ff-sans);
  font-size: 12px; line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  max-width: 60vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.level-pill::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-primary);
  flex: 0 0 8px;
}

/* PROMPT STRIP — above the viewfinder */
#prompt-strip {
  width: 100%; max-width: 520px;
  flex: 1 1 0;
  min-height: 56px;
  max-height: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 8px; text-align: center;
}
/* MC2 eyebrow — chrome step label */
.prompt-step {
  /* v26.1: hidden — the level pill in the top bar already shows this. */
  display: none;
}
.prompt-text {
  font-family: var(--ff-sans);
  font-size: clamp(16px, 4.2vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: var(--s-1);
}
.prompt-hint {
  font-size: 14px; line-height: 20px;
  color: var(--text-secondary);
}

/* VIEWFINDER (square, derived from v1 layout) */
#viewfinder {
  position: relative;
  width: 100%; max-width: 520px;
  aspect-ratio: 1 / 1;
  margin: 4px;
  overflow: hidden;
  background: var(--bg-0);
  flex-shrink: 0;
  border-radius: 4px;
  box-shadow: 0 0 0 5px rgba(255,179,2,0.7);
  transition: box-shadow 200ms;
}
#viewfinder.armed     { box-shadow: 0 0 0 5px var(--green); }
#viewfinder.blocked   { box-shadow: 0 0 0 5px var(--red); }
#viewfinder.searching { box-shadow: 0 0 0 5px rgba(255,179,2,0.7); }

#lcd {
  position: absolute;
  left: 1.11%; top: 1.11%; right: 1.11%; bottom: 1.11%;
  background: var(--bg-0); overflow: hidden; z-index: 1;
}
#video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--bg-0); z-index: 1;
}
#cassette-img {
  position: absolute; left: 0; top: 0;
  width: 720px; height: 720px;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
  z-index: 2;
}
/* v20: photo back to fully opaque since the video is no longer warped.
   With the cassette overlay anchored to the marker's actual screen
   position, the photo sits directly over the marker and there's no need
   to bleed the video through it. */
#cassette-img.show { opacity: 1; }

/* v25.2: Simulated Exam anatomy overlay — rendered as <img> so the
   Figma outside-mask outlines resolve.  Sized 720x720 to match the
   cassette image, then matrix3d-warped to land over the detector active
   area.  iOS rendering hints (translateZ + backface-visibility) reduce
   matrix3d softness. */
#exam-anatomy-img {
  position: absolute; left: 0; top: 0;
  width: 720px; height: 720px;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
  object-fit: contain;            /* preserve anatomy aspect inside the box */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
  z-index: 4;                     /* above cassette (z=2) + overlay (z=3) */
}
#exam-anatomy-img.show { opacity: 1; }
#overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
}

/* HUD chrome */
#vf-base {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
}
#ssd-bg {
  position: absolute; right: 0; top: 0;
  width: 21.94%; height: 6.94%;
  z-index: 6; pointer-events: none;
}
.pill-fill {
  position: absolute;
  width: 6.39%; height: 1.53%;
  z-index: 6; pointer-events: none;
  display: none;
}
.pill-fill.on { display: block; }
#kv-slot-1 { left: 2.78%; top: 96.53%; }
#kv-slot-2 { left: 9.31%; top: 96.53%; }
#kv-slot-3 { left: 15.69%; top: 96.53%; }
#kv-slot-4 { left: 22.22%; top: 96.53%; }
#kv-slot-5 { left: 28.61%; top: 96.53%; }
#mas-slot-1 { left: 64.72%; top: 96.53%; }
#mas-slot-2 { left: 71.25%; top: 96.53%; }
#mas-slot-3 { left: 77.64%; top: 96.53%; }
#mas-slot-4 { left: 84.03%; top: 96.53%; }
#mas-slot-5 { left: 90.56%; top: 96.53%; }
#mode-shield {
  position: absolute;
  left: 37.78%; top: 89.03%;
  width: 24.17%; height: 9.43%;
  z-index: 6; pointer-events: none;
}
.value-overlay {
  position: absolute; color: #fff; font-weight: 800;
  font-variant-numeric: tabular-nums;
  pointer-events: none; z-index: 7; text-align: center;
}
#ssd-value {
  right: 0; top: 0; height: 6.94%; width: 21.94%;
  font-size: clamp(13px, 2.6vw, 18px); letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding-right: 14px;
}
#ssd-value::before { content: 'SSD'; color: #fff; font-size: 0.85em; }
#ssd-value::after  {
  content: ''; width: 1px; height: 50%;
  background: rgba(255,255,255,0.85); align-self: center; order: 0;
}
#ssd-value > * { order: 0; }
#kv-value {
  left: 0; bottom: 4.5%; width: 41.67%;
  text-align: center; color: #fff;
  font-size: clamp(20px, 4.5vw, 30px);
}
#mas-value {
  right: 0; bottom: 4.5%; width: 41.53%;
  text-align: center; color: #fff;
  font-size: clamp(18px, 4vw, 28px);
}
#mode-value {
  display: flex; align-items: center; justify-content: center; line-height: 1;
  left: 37.78%; top: 91.5%; width: 24.17%;
  text-align: center; color: #fff;
  font-size: clamp(16px, 3.6vw, 24px); font-weight: 800;
}
#sid-readout {
  position: absolute;
  left: 89.6%; width: 7.5%; height: 4.86%;
  background: rgba(0,0,0,0.85); color: #fff;
  border-radius: 4px; font-weight: 800;
  font-size: clamp(11px, 2.4vw, 16px);
  display: flex; align-items: center; justify-content: center;
  transition: top 80ms ease-out, background 200ms;
  z-index: 8;
}
#sid-readout.good { background: var(--green); color: #042312; }
#sid-readout.bad  { background: var(--red);   color: #fff; }

/* Tutorial L4: target SID marker drawn on the same gauge bar */
#sid-target-marker {
  position: absolute;
  left: 89.0%;
  width: 8.5%;
  height: 1.5%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(255,179,2,0.65);
  border-radius: 2px;
  pointer-events: none;
  transition: top 100ms ease-out, background 200ms;
  z-index: 7; /* one below #sid-readout so the live pill rides over it */
}
#sid-target-marker::after {
  content: 'TARGET';
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--amber);
  white-space: nowrap;
}
#sid-target-marker.hit {
  background: var(--green);
  box-shadow: 0 0 10px rgba(61,176,107,0.8);
}
#sid-target-marker.hit::after { color: var(--green); }

/* Crosshair */
#crosshair {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 7; will-change: transform;
}
#external-cross, #center-cross {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; opacity: 1; filter: none !important;
}
#external-cross { width: 25.56vmin; max-width: 25.56vh; aspect-ratio: 1 / 1; }
#center-cross   { width:  4.72vmin; max-width:  4.72vh; aspect-ratio: 1 / 1; }
#external-cross.hidden, #center-cross.hidden { display: none; }

/* Tutorial-only HUD layering: hide chrome features until taught */
#viewfinder.layer-aim       #vf-base,
#viewfinder.layer-aim       #ssd-bg,
#viewfinder.layer-aim       #ssd-value,
#viewfinder.layer-aim       #kv-value,
#viewfinder.layer-aim       #mas-value,
#viewfinder.layer-aim       #mode-shield,
#viewfinder.layer-aim       #mode-value,
#viewfinder.layer-aim       #sid-readout,
#viewfinder.layer-aim       .pill-fill,
#viewfinder.layer-aim       #external-cross,
#viewfinder.layer-aim       .tap-zone,
#viewfinder.layer-center    #vf-base,
#viewfinder.layer-center    #ssd-bg,
#viewfinder.layer-center    #ssd-value,
#viewfinder.layer-center    #kv-value,
#viewfinder.layer-center    #mas-value,
#viewfinder.layer-center    #mode-shield,
#viewfinder.layer-center    #mode-value,
#viewfinder.layer-center    #sid-readout,
#viewfinder.layer-center    .pill-fill,
#viewfinder.layer-center    #external-cross,
#viewfinder.layer-center    .tap-zone,
#viewfinder.layer-perp      #vf-base,
#viewfinder.layer-perp      #ssd-bg,
#viewfinder.layer-perp      #ssd-value,
#viewfinder.layer-perp      #kv-value,
#viewfinder.layer-perp      #mas-value,
#viewfinder.layer-perp      #mode-shield,
#viewfinder.layer-perp      #mode-value,
#viewfinder.layer-perp      #sid-readout,
#viewfinder.layer-perp      .pill-fill,
#viewfinder.layer-perp      .tap-zone,
#viewfinder.layer-sid       #ssd-bg,
#viewfinder.layer-sid       #ssd-value,
#viewfinder.layer-sid       #kv-value,
#viewfinder.layer-sid       #mas-value,
#viewfinder.layer-sid       #mode-shield,
#viewfinder.layer-sid       #mode-value,
#viewfinder.layer-sid       .pill-fill,
#viewfinder.layer-sid       .tap-zone {
  display: none !important;
}

/* Tutorial target marker (ghost ring at level objective) */
.tutorial-target {
  position: absolute; left: 50%; top: 50%;
  width: 22%; height: 22%;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255,179,2,0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,179,2,0.18) inset;
  pointer-events: none;
  z-index: 4;
  animation: pulse 1.6s ease-in-out infinite;
}
.tutorial-target.locked {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(61,176,107,0.25) inset;
  animation: none;
}
@keyframes pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.0); }
  50%      { opacity: 1.0;  transform: translate(-50%, -50%) scale(1.06); }
}

/* Level-complete — canonical MC2 modal (elev-4, raised bg, dimmed overlay) */
.level-complete {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--bg-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 12;
  text-align: center;
  padding: var(--s-6);
  animation: lcIn var(--dur-base) var(--ease-out);
}
@keyframes lcIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1.0); }
}
.lc-stars {
  font-size: 28px; letter-spacing: 6px;
  color: var(--brand-primary-soft);
  margin-bottom: var(--s-4);
  font-weight: 500;
}
.lc-title {
  /* MC2 t-h3 — 24/32 600 */
  font-size: 24px; line-height: 32px;
  font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: var(--s-2);
  color: var(--text-primary);
}
.lc-sub {
  /* MC2 t-eyebrow */
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0 var(--s-6);
  margin-bottom: var(--s-6);
}
/* Primary action — Continue is the single primary affordance here */
.lc-continue {
  background: var(--brand-primary);
  color: var(--on-brand);
  border: 0;
  border-radius: var(--r-md);
  padding: 14px 24px;
  min-height: 48px;
  font-family: var(--ff-sans);
  font-size: 16px; line-height: 24px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--elev-2);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.lc-continue:hover { background: var(--brand-primary-hover); box-shadow: var(--elev-3); }
.lc-continue:active {
  background: var(--brand-primary-press);
  transform: scale(0.98);
  box-shadow: var(--elev-1);
}
/* Secondary — ghost button */
.lc-retry {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 12px 20px;
  margin-bottom: var(--s-3);
  font-family: var(--ff-sans);
  font-size: 14px; line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.lc-retry:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-strong);
}
.lc-retry:active { transform: scale(0.98); }

.tap-zone {
  position: absolute; bottom: 0; height: 11%;
  background: transparent; pointer-events: auto;
  z-index: 9; cursor: pointer;
}
#tap-kv   { left: 0;       width: 41.67%; }
#tap-mode { left: 37.78%;  width: 24.44%; height: 9.5%; }
#tap-mas  { right: 0;      width: 41.53%; }

#flash {
  position: absolute; inset: 0; background: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity 80ms ease-out; z-index: 10;
}
#flash.on { opacity: 1; }

.interlock {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 9%;
  background: rgba(255,71,87,0.95); color: #fff;
  border-radius: 8px; padding: 5px 10px;
  font-size: clamp(11px, 2vw, 13px); font-weight: 700;
  text-align: center; max-width: 60%;
  pointer-events: none; z-index: 8;
}
.badge-detect {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px; padding: 14px 18px;
  text-align: center; font-size: 13px; color: #fff;
  max-width: 60%; pointer-events: none; z-index: 9;
}
.badge-detect .big { font-size: 32px; margin-bottom: 6px; }

/* FEEDBACK STRIP — below the viewfinder */
#feedback-strip {
  width: 100%; max-width: 520px;
  flex: 1 1 0;
  min-height: 60px;
  max-height: 110px;
  padding: 4px 8px;
  display: flex; flex-direction: column; gap: 6px;
}

.hold-meter {
  position: relative;
  height: 30px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--pill-stroke);
  border-radius: 8px;
  overflow: hidden;
}
.hold-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--green-dim), var(--green));
  transition: width 120ms ease-out, background 200ms;
}
.hold-fill.warn  { background: linear-gradient(90deg, #c08800, var(--amber)); }
.hold-fill.fail  { background: linear-gradient(90deg, #aa2233, var(--red)); }
.hold-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.rep-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 4px 2px;
}
.rep-dots {
  display: flex; gap: 6px; flex-shrink: 0;
}
.rep-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--pill-stroke);
  background: transparent;
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.rep-dot.done {
  background: var(--green);
  border-color: var(--green);
  transform: scale(1.05);
}
.feedback-label {
  flex: 1; text-align: right;
  font-size: 12px; font-weight: 600;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  transition: color 180ms, transform 180ms;
}
.feedback-label.flash {
  color: var(--green);
  transform: scale(1.04);
}

.live-readouts {
  display: flex; gap: 8px; justify-content: center;
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.readout {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--pill-stroke);
  border-radius: 6px;
  padding: 3px 8px;
}
.readout.ok    { color: var(--green); border-color: rgba(61,176,107,0.4); }
.readout.warn  { color: var(--amber); border-color: rgba(255,179,2,0.4); }
.readout.bad   { color: var(--red);   border-color: rgba(255,71,87,0.4); }
.readout .lbl  { color: var(--text-dim); margin-right: 4px; font-size: 10px; letter-spacing: 1px; }

/* BOTTOM ROW */
#bottom-row {
  width: 100%; max-width: 520px;
  display: flex; gap: 10px; justify-content: center;
  flex-shrink: 0;
}
/* MC2 secondary button — neutral, used for Skip Lesson */
.secondary-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  border-radius: var(--r-md);
  padding: 12px 20px;
  min-height: 48px;
  font-family: var(--ff-sans);
  font-size: 14px; line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.secondary-btn:hover { background: rgba(255,255,255,0.10); border-color: var(--border-strong); }
.secondary-btn:active { background: rgba(255,255,255,0.14); transform: scale(0.98); }
/* ===================================================================
   EXAM REFERENCE CARD (HUD chrome) — compact recommended-settings
   reference shown only during Simulated Exam.  Live-updates on mode tap.
   Canonical card-flat, mono for measured values.
   =================================================================== */
#exam-ref-card {
  width: 100%; max-width: 460px;
  margin-bottom: 4px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 8px 12px;
  display: flex; flex-direction: column;
  gap: 6px;
  box-shadow: var(--elev-1);
  flex-shrink: 0;
}
.exam-ref-head {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
}
.exam-ref-overline {
  font-size: 10px; line-height: 14px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-tertiary);
}
.exam-ref-name {
  flex: 1; min-width: 0;
  font-size: 14px; line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Mode chip — info status mini */
.exam-ref-mode {
  font-size: 10px; line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--brand-primary-soft);
  background: rgba(89,92,255,0.14);
  border: 1px solid rgba(89,92,255,0.30);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
.exam-ref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.exam-ref-stat {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.exam-ref-label {
  font-size: 10px; line-height: 14px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-tertiary);
}
/* MONO — measured values rule */
.exam-ref-value {
  font-family: var(--ff-mono);
  font-size: 18px; line-height: 1.1;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* EXPOSE — the single most important action in the trainer.
   MC2 canonical: btn.xl (the largest variant, 88+ px tablet, scaled down
   to fit phone).  Default ("not ready") = neutral secondary.  Armed = the
   green safety semantic, the only place green appears in chrome.
   Critical confirmation — keep the brand discipline of "blue is for
   ready/interactive UI" and "green is for safe-to-fire". */
.trigger {
  pointer-events: auto;
  flex: 1; max-width: 460px;
  min-height: 60px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--ff-sans);
  font-size: 18px; line-height: 26px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--elev-1);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.trigger.armed {
  background: rgba(46,166,96,0.18);
  border-color: var(--success);
  color: #B5E6CC;
  box-shadow: 0 0 0 3px rgba(46,166,96,0.20),
              var(--elev-2);
}
.trigger:active { transform: scale(0.98); }


/* ===================================================================
   v26: CAPTURE SCREEN — shown after EXPOSE in exam mode.
   Square detector area, anatomy cropped to collimation rect, X-ray
   styling, Retake / Approve actions.
   =================================================================== */
#capture-screen {
  position: fixed; inset: 0; z-index: 65;
  background: var(--bg-base);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: max(env(safe-area-inset-top, 0px), var(--s-6)) var(--s-5)
          max(env(safe-area-inset-bottom, 0px), var(--s-6));
  animation: captureIn var(--dur-base) var(--ease-out);
}
@keyframes captureIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1.0); }
}
.capture-inner {
  width: 100%; max-width: 520px;
  display: flex; flex-direction: column;
  align-items: center; gap: var(--s-5);
}
.capture-meta { text-align: center; }
.capture-overline {
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-primary-soft);
  margin-bottom: var(--s-2);
}
.capture-name {
  font-size: 24px; line-height: 32px;
  font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* The square detector frame — black ground, anatomy over it, collim mask. */
.capture-frame {
  position: relative;
  width: min(85vw, 460px);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border-default);
  box-shadow: var(--elev-3);
  background: #000;
}
/* Detector base — the radiograph "background" */
.capture-detector {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, #18181c 0%, #050507 100%);
}
/* Anatomy positioned to fill the active area (the whole frame).  We give
   it an X-ray look: brightness 0 + invert = pure white silhouette of the
   blue outline, then a subtle blue tint so it still reads as "OXOS". */
.capture-anatomy {
  /* v28.8: JS now positions this absolutely with width/height/left/top
     computed from cassetteMeta, so the radiograph anatomy matches HUD
     scale exactly.  No object-fit / no padding here — both interfere. */
  position: absolute;
  /* X-ray pass: brand-blue stroke → white-on-black with a faint glow */
  filter: brightness(0) invert(1)
          drop-shadow(0 0 1px rgba(171,209,255,0.6))
          drop-shadow(0 0 6px rgba(89,92,255,0.30));
}
/* v28.10: single SVG overlay covers the frame, with a bowed-pillow cutout
   matching the HUD collimator shape (drawCollimationPillow).  Replaces
   the v26 4-strip mask system. */
.capture-collim-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* v26 legacy — still present in older builds; safe to keep as no-op. */
.capture-mask {
  position: absolute;
  background: rgba(0, 0, 0, 0.86);
  pointer-events: none;
}
/* The bright outline showing where the collimator cropped to. */
.capture-collim-outline {
  position: absolute;
  border: 1px solid rgba(171,209,255,0.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  pointer-events: none;
}

.capture-info {
  font-family: var(--ff-mono);
  font-size: 12px; line-height: 16px;
  color: var(--text-tertiary);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.capture-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  width: 100%;
  max-width: 460px;
}
.capture-btn {
  font-family: var(--ff-sans);
  font-weight: 600;
  min-height: 56px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.capture-retake {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}
.capture-retake:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-strong);
}
.capture-retake:active { transform: scale(0.98); }
.capture-approve {
  background: var(--brand-primary);
  border: 0;
  color: var(--on-brand);
  box-shadow: var(--elev-2);
}
.capture-approve:hover { background: var(--brand-primary-hover); box-shadow: var(--elev-3); }
.capture-approve:active { background: var(--brand-primary-press); transform: scale(0.98); }