/* ============================================================================
   NurseVerdict Phase 2 — Chapter Question Bank (MCQ exam simulator)
   Phase-specific layer only. Loads AFTER nurseverdict-shared.css and reuses
   its tokens, header/nav chrome, popovers, buttons, inputs, KPI cards,
   progress bars, filter bar, group accordion, and modal system throughout.

   (v2 note: this file used to carry its own copy of the tokens, header,
   icon buttons, settings popover, KPI cards, progress bars, filter bar,
   group accordion, and modal system — all of that is now in
   nurseverdict-shared.css and has been removed from here to avoid drift.
   A few of those local versions used a smaller touch target than the 44px
   shared components use (icon buttons, .seg buttons, .ctrl buttons,
   .group-header) — dropping the local overrides picks up that fix for
   free. The chapter/quiz header markup also changed to use the shared
   .brand-block/.chapter-name structure instead of cramming the chapter
   title into .brand with a middot — see the HTML for that change.)
   ============================================================================ */

.frame{max-width:1120px; display:flex; flex-direction:column;}

/* ===== LANDING ===== */
.landing{padding:10px 26px 50px;}
.landing-hero{background:var(--maroon); color:#fff; border-radius:14px; padding:32px 34px; margin-bottom:22px;}
.platform-mark{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#E9C9D3; opacity:.85; margin-bottom:10px;}
.landing-hero h1{font-family:var(--font-display); font-size:1.7rem; margin:0 0 6px;}
.landing-hero .sub{color:#E9C9D3; font-size:.85rem;}
.landing-hero .meta-chips{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}

.last-attempt{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-bottom:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.last-attempt .l{font-size:.8rem; color:var(--muted);}
.last-attempt .v{font-family:var(--font-mono); font-weight:700; font-size:1.1rem;}
.history-strip{display:flex; gap:6px; margin-top:6px;}
.history-strip .h-bar{width:20px; border-radius:2px; background:var(--teal);}

.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px;}
.mode-card{background:var(--panel); border:2px solid var(--line); border-radius:12px; padding:20px 22px; cursor:pointer; transition:border-color .12s;}
.mode-card:hover{border-color:var(--maroon-ink);}
.mode-card.selected{border-color:var(--maroon-ink); background:linear-gradient(180deg, var(--panel), var(--gold-bg));}
.mode-card h3{font-family:var(--font-display); font-size:1.15rem; margin:0 0 6px;}
.mode-card p{font-size:.82rem; color:var(--muted); margin:0;}
.mode-card .tag{display:inline-block; margin-top:10px; font-size:.68rem; font-weight:700; text-transform:uppercase; padding:3px 9px; border-radius:20px; background:var(--gold-bg); color:#8A6A10;}

.sub-options{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:22px;}
.sub-options h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin:0 0 12px;}
.toggle-line{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.toggle-line:last-child{margin-bottom:0;}
.toggle-line .label{font-size:.88rem;}
.toggle-line .desc{font-size:.72rem; color:var(--muted); margin-top:2px;}
.switch{width:40px; height:22px; background:var(--line); border-radius:12px; position:relative; cursor:pointer; flex-shrink:0;}
.switch.on{background:var(--teal);}
.switch .knob{width:18px; height:18px; background:#fff; border-radius:50%; position:absolute; top:2px; left:2px; transition:left .15s;}
.switch.on .knob{left:20px;}

.instructions{background:var(--gold-bg); border:1px solid #EBDBA8; border-radius:10px; padding:16px 20px; margin-bottom:22px; font-size:.85rem;}
html[data-theme="dark"] .instructions{border-color:#4A3A15;}
.instructions h4{margin:0 0 8px; font-size:.78rem; text-transform:uppercase; letter-spacing:.4px;}
.instructions ul{margin:0; padding-left:18px;}
.instructions li{margin-bottom:4px;}

.name-row{gap:10px; margin-bottom:22px;}
.start-btn{width:100%; padding:15px; border:none; border-radius:10px; background:var(--maroon); color:#fff; font-weight:700; font-size:1rem; cursor:pointer; font-family:var(--font-display);}
.start-btn:hover{background:var(--maroon-dark);}
.start-btn:disabled{opacity:.4; cursor:not-allowed; background:var(--maroon);}

/* ===== QUIZ ===== */
.timer-cluster{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.timer-box{background:rgba(255,255,255,.12); border-radius:8px; padding:6px 13px; text-align:center;}
.timer-box .l{font-size:.6rem; text-transform:uppercase; color:#E9C9D3; letter-spacing:.5px;}
.timer-box .v{font-family:var(--font-mono); font-weight:700; font-size:1rem;}
.timer-box .v.crit{color:#FFB3A8; animation:pulseCrit 1s infinite;}
.timer-box .v.warn{color:#FFD873;}
@keyframes pulseCrit{ 0%,100%{opacity:1;} 50%{opacity:.45;} }
.marks-box{font-family:var(--font-mono); font-size:.85rem; background:rgba(255,255,255,.12); padding:6px 13px; border-radius:8px;}
.submit-btn{background:var(--gold); color:#3A2C05; border:none; border-radius:6px; padding:9px 16px; font-weight:700; font-size:.8rem; cursor:pointer;}

.strip{padding:8px 26px; font-size:.75rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line);}
.strip.practice{background:var(--blue-bg); color:#2A4E6E;}
.strip.test{background:var(--gold-bg); color:#6B5510;}

.body-row{display:flex; flex:1;}
main.q-panel{flex:2.3; background:var(--panel); padding:26px 30px;}
main.q-panel.with-palette{border-right:1px solid var(--line);}
.q-meta{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.q-num{font-family:var(--font-mono); font-size:.85rem; color:var(--muted); font-weight:600;}
.tag-row{display:flex; gap:8px;}
.stopwatch-chip{font-family:var(--font-mono); font-size:.72rem; color:var(--muted); background:var(--paper); border:1px solid var(--line); padding:3px 9px; border-radius:20px;}

.stem{font-size:1.05rem; line-height:1.6; margin-bottom:20px;}
.stem .instr{display:block; font-size:.78rem; color:var(--muted); margin-top:8px; font-style:italic;}

.opt-row{display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:6px; padding:13px 16px; margin-bottom:9px; cursor:pointer;}
.opt-row:hover{border-color:var(--maroon-ink);}
.opt-row.picked{border-color:var(--maroon-ink); background:var(--gold-bg);}
.opt-row.review-correct{border-color:var(--teal); background:var(--teal-bg);}
.opt-row.review-wrong{border-color:var(--coral); background:var(--coral-bg);}
.opt-row .lt{font-weight:700; font-family:var(--font-mono); color:var(--muted); min-width:16px;}
.opt-row kbd{background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:1px 6px; font-family:var(--font-mono); font-size:.68rem; color:var(--muted);}
.opt-row.locked-input{opacity:.55; cursor:not-allowed;}
.opt-row.locked-input:hover{border-color:var(--line);}
.locked-note{font-size:.72rem; color:var(--muted); margin-top:8px; font-style:italic;}

.confidence-block{margin-top:16px; padding-top:16px; border-top:1px dashed var(--line);}
.confidence-block .lbl{font-size:.75rem; color:var(--muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px;}
.conf-row{display:flex; gap:8px;}
.conf-btn{flex:1; padding:10px 6px; border:2px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-size:.78rem; font-weight:600; cursor:pointer;}
.conf-btn[data-c="Guessing"].chosen{border-color:var(--gold); background:var(--gold-bg);}
.conf-btn[data-c="Somewhat sure"].chosen{border-color:var(--blue); background:var(--blue-bg);}
.conf-btn[data-c="Confident"].chosen{border-color:var(--teal); background:var(--teal-bg);}

.nav-bar{display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); flex-wrap:wrap; gap:10px;}
.nav-bar .grp{display:flex; gap:8px; flex-wrap:wrap;}

.feedback{margin-top:16px; border-top:1px dashed var(--line); padding-top:14px;}
.feedback .headline{font-family:var(--font-display); font-weight:700; margin-bottom:6px;}
.feedback .headline.win{color:var(--teal);} .feedback .headline.lose{color:var(--coral);}
table.vt{width:100%; border-collapse:collapse; font-size:.85rem; margin-top:8px;}
table.vt th{background:var(--maroon); color:#fff; text-align:left; padding:8px 10px; font-size:.65rem; text-transform:uppercase;}
table.vt td{padding:8px 10px; border-top:1px solid var(--line);}
table.vt tr.vc{background:var(--teal-bg);}
table.vt tr.vw{background:var(--coral-bg);}
table.vt tr.vc td:nth-child(2){color:var(--teal); font-weight:700;}
table.vt tr.vw td:nth-child(2){color:var(--coral); font-weight:700;}

.match-intro{margin-bottom:10px;}
table.match-tbl{width:100%; table-layout:fixed; border-collapse:collapse; font-size:.88rem; margin:10px 0 14px;}
table.match-tbl th{width:50%; padding:8px 12px; text-align:left; font-size:.7rem; text-transform:uppercase; color:#fff;}
table.match-tbl th:first-child{background:var(--maroon);}
table.match-tbl th:last-child{background:var(--teal);}
table.match-tbl td{width:50%; padding:8px 12px; border-top:1px solid var(--line); border-left:1px solid var(--line); vertical-align:top; word-wrap:break-word;}
.vt-wrap, .match-tbl-wrap{overflow-x:auto; margin-bottom:10px; border-radius:8px; border:1px solid var(--line);}
table.match-tbl td:first-child{border-left:none;}
table.match-tbl tr:nth-child(even) td{background:var(--paper);}
table.match-tbl .mk{font-weight:700; color:var(--muted); margin-right:6px;}

.drug-box{border-left:4px solid var(--purple); background:var(--purple-bg); border-radius:4px; padding:12px 16px; margin-top:12px; font-size:.85rem;}
.drug-box .db-title{font-weight:700; color:var(--purple); margin-bottom:6px;}
.drug-box .dbf{margin:4px 0;}
.drug-box .dbf .lbl{font-weight:700; margin-right:4px;}
.drug-box .dbf.class .lbl{color:var(--teal);}
.drug-box .dbf.nursing .lbl{color:var(--ink);}
.drug-box .dbf.side_effects .lbl{color:var(--red);}
.drug-box .dbf.contraindicated .lbl{color:var(--coral);}
.drug-box .dbf.hold_if .lbl{color:var(--orange);}
/* Shared case-scenario block shown above the stem of the first question in a CASE SET */
.vignette-box{border-left:4px solid var(--teal); background:var(--teal-bg); border-radius:4px; padding:12px 16px; margin-bottom:12px; font-size:.9rem; line-height:1.5;}
.vignette-label{font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; color:var(--teal); margin-bottom:6px;}
.note{margin-top:10px; padding:10px 13px; border-radius:8px; font-size:.8rem; background:var(--gold-bg);}

aside.palette{width:250px; background:var(--paper); padding:20px 16px;}
.palette h3{font-size:.7rem; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:0 0 10px;}
.sec-label{font-size:.68rem; color:var(--muted); margin:10px 0 6px; text-transform:uppercase; display:flex; justify-content:space-between;}
.p-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-bottom:6px;}
.p-cell{aspect-ratio:1; width:100%; max-width:44px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.75rem; font-weight:700; cursor:pointer; color:#fff; position:relative;}
.p-cell.unvisited{background:#C7CCD6; color:#4A5568;}
.p-cell.not-answered{background:var(--coral);}
.p-cell.answered{background:var(--teal);}
.p-cell.marked{background:var(--gold); color:#3d2e00;}
.p-cell.answered-marked{background:var(--gold); box-shadow:inset 0 0 0 2px var(--teal);}
.p-cell.current{outline:2px solid var(--maroon-ink); outline-offset:2px;}
.p-cell.locked{background:#8B93A3; cursor:not-allowed; opacity:.6;}
.legend{display:flex; flex-direction:column; gap:6px; font-size:.7rem; color:var(--muted); margin:14px 0;}
.legend .dot{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:6px;}
.marking-box{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:12px; font-size:.74rem;}
.marking-box .row{display:flex; justify-content:space-between; margin-bottom:5px;}

/* ===== RESULTS ===== */
.result-wrap{padding:26px 32px 60px; max-width:1120px; margin:0 auto;}
.sc-hero{background:var(--maroon); color:#fff; border-radius:12px; padding:26px 28px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;}
.sc-hero .marks{font-family:var(--font-display); font-size:2.3rem; font-weight:700;}
.sc-hero .cap{font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; color:#E9C9D3; margin-top:2px;}
.sc-hero .block .n{font-family:var(--font-mono); font-size:1.3rem; font-weight:700; color:var(--gold);}
.sc-actions{display:flex; gap:8px; flex-wrap:wrap;}

.section-title{font-family:var(--font-display); font-size:1.05rem; margin:26px 0 4px;}
.section-desc{font-size:.78rem; color:var(--muted); margin-bottom:12px;}

.chart-card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px 22px; margin-bottom:18px;}
.disclaimer{font-size:.66rem; color:var(--muted); font-style:italic; margin-top:8px;}

.conf-matrix{display:grid; grid-template-columns:110px repeat(2,1fr); gap:8px; align-items:center;}
.conf-matrix .h{font-size:.68rem; text-transform:uppercase; color:var(--muted); text-align:center; font-weight:700;}
.conf-matrix .rlbl{font-size:.78rem; font-weight:600; text-align:right; padding-right:6px;}
.conf-cell{border-radius:8px; padding:12px; text-align:center; border:1px solid var(--line);}
.conf-cell .n{font-family:var(--font-mono); font-size:1.3rem; font-weight:700;}
.conf-cell .l{font-size:.65rem; color:var(--muted);}
.conf-cell.flag{border-color:var(--coral); background:var(--coral-bg);}
.conf-cell.lucky{border-color:var(--gold); background:var(--gold-bg);}
.conf-cell.good{border-color:var(--teal); background:var(--teal-bg);}
.insight-box{margin-top:14px; padding:12px 14px; border-radius:8px; font-size:.82rem; background:var(--coral-bg); border:1px solid #F0C6C0;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.bar-row{display:flex; align-items:center; gap:8px; margin-bottom:7px; font-family:var(--font-mono); font-size:.72rem;}
.bar-row .lbl{width:70px; color:var(--muted); flex-shrink:0;}
.bar-track{flex:1; background:var(--paper); border-radius:3px; height:14px;}
.bar-fill{height:100%; border-radius:3px;}
.bar-row .val{width:36px; text-align:right; color:var(--muted);}

.weak-list .w-item{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border:1px solid var(--line); border-radius:8px; margin-bottom:7px; font-size:.82rem; cursor:pointer;}
.weak-list .w-item .flag{font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:20px;}
.flag.overconf{background:var(--coral-bg); color:var(--coral);}
.flag.lucky{background:var(--gold-bg); color:#8A6A10;}
.flag.wrong{background:var(--coral-bg); color:var(--coral);}

.review-item{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:15px 18px; margin-bottom:9px; cursor:pointer;}
.review-item .rh{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;}
.review-item .rh .status{font-size:.65rem; font-weight:700; text-transform:uppercase; padding:3px 9px; border-radius:20px;}
.status.correct{background:var(--teal-bg); color:var(--teal);}
.status.wrong{background:var(--coral-bg); color:var(--coral);}
.status.skipped{background:var(--paper); color:var(--muted);}
.conf-pill{font-size:.62rem; padding:2px 8px; border-radius:20px; background:var(--paper); color:var(--muted);}
.review-detail{display:none; margin-top:12px; border-top:1px solid var(--line); padding-top:12px;}
.review-detail.open{display:block;}

.history-panel{margin-top:24px;}
.hist-row{display:flex; justify-content:space-between; padding:9px 14px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; font-size:.8rem;}

.resume-banner{background:var(--blue-bg); border:1px solid #BFD6EE; border-radius:10px; padding:14px 18px; margin-bottom:18px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:.85rem; color:#2A4E6E;}
.resume-banner .btns{display:flex; gap:8px;}
.filter-bar{margin:10px 0 14px;}

.bookmark-star{background:none; border:none; cursor:pointer; font-size:1rem; color:var(--line); padding:0 4px;}
.bookmark-star.on{color:var(--gold);}

.cutoff-banner{margin-top:10px; padding:11px 15px; border-radius:8px; font-size:.85rem; font-weight:600;}
.cutoff-banner.pass{background:var(--teal-bg); color:var(--teal);}
.cutoff-banner.fail{background:var(--coral-bg); color:var(--coral);}

.trend-wrap{margin-top:8px;}

/* ===== exam integrity (Test Mode) ===== */
body.exam-lock .stem, body.exam-lock .options, body.exam-lock .stem *, body.exam-lock .options *{
  user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
  -webkit-touch-callout:none; /* stops the iOS/Android long-press "Copy / Search Google for…" popup */
}
.integrity-toast{
  display:none; position:fixed; top:16px; left:50%; transform:translateX(-50%);
  max-width:min(560px,90%); text-align:center; padding:12px 20px; border-radius:9px;
  font-family:var(--font-ui); font-size:.82rem; font-weight:600; color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.28); z-index:9999;
}
.integrity-toast.warn{background:var(--coral);}
.integrity-toast.stop{background:var(--maroon-dark);}
.integrity-toast.info{background:var(--ink); color:var(--paper);}
.violation-badge{font-family:var(--font-mono); font-size:.7rem; background:rgba(255,255,255,.14); padding:3px 9px; border-radius:20px;}

/* ===== HIGH CONTRAST + DYSLEXIA-FRIENDLY (phase-2-specific refinements —
   the base token overrides now live in nurseverdict-shared.css) ===== */
html.contrast-high .landing-hero{ background:#000; border:2px solid #fff; }
html.contrast-high .mode-card, html.contrast-high .chart-card, html.contrast-high .last-attempt, html.contrast-high .panel, html.contrast-high .q-panel, html.contrast-high .palette{ border-width:2px !important; }
html.font-dyslexic .stem{ line-height:1.75; }

/* ===== FULLSCREEN RE-ENTRY LOCK ===== */
.fs-lock-overlay{ position:fixed; inset:0; background:rgba(10,12,16,.92); display:none; align-items:center; justify-content:center; z-index:10001; text-align:center; padding:20px; }
.fs-lock-overlay.open{ display:flex; }
.fs-lock-box{ max-width:420px; color:#fff; }
.fs-lock-box h3{ font-family:var(--font-display); font-size:1.3rem; margin:0 0 10px; }
.fs-lock-box p{ font-size:.86rem; color:#C9C9D3; margin:0 0 20px; }
.fs-lock-box button{ background:var(--maroon); color:#fff; border:none; border-radius:9px; padding:12px 26px; font-size:.9rem; font-weight:700; cursor:pointer; }

/* ===== DASHBOARD / STREAK ===== */
.dash-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:22px; }
.dash-card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.dash-card .v{ font-family:var(--font-mono); font-weight:700; font-size:1.25rem; }
.dash-card .l{ font-size:.72rem; color:var(--muted); margin-top:2px; }
.streak-chip{ display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.14); border-radius:20px; padding:5px 13px; font-size:.75rem; }
.due-review-banner{ background:var(--blue-bg); border:1px solid var(--blue); border-radius:10px; padding:12px 16px; margin-bottom:18px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:.85rem; }
.progress-ring-wrap{ position:relative; width:44px; height:44px; flex:0 0 auto; }
.quick-actions-row{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 22px; }
.quick-actions-row .ctrl{ font-size:.78rem; }

/* ===== HEATMAP ===== */
.heatmap-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin-top:10px; }
.heat-tile{ border-radius:9px; padding:10px 12px; color:#fff; }
.heat-tile .t{ font-size:.72rem; font-weight:700; opacity:.95; }
.heat-tile .p{ font-family:var(--font-mono); font-size:1.05rem; font-weight:700; margin-top:2px; }

/* ===== STREAK TOAST (celebratory — distinct from the neutral shared .toast-msg) ===== */
.streak-toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(0); background:var(--gold); color:#3A2E00; font-weight:700; padding:10px 20px; border-radius:30px; font-size:.85rem; box-shadow:0 10px 24px rgba(0,0,0,.25); z-index:9999; display:none; }
.streak-toast.show{ display:block; }

/* ===== DELTA / COMPARE ===== */
.delta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.delta-pill{ padding:6px 12px; border-radius:20px; font-size:.78rem; font-weight:700; font-family:var(--font-mono); }
.delta-pill.up{ background:var(--teal-bg); color:var(--teal); }
.delta-pill.down{ background:var(--coral-bg); color:var(--coral); }
.delta-pill.flat{ background:var(--paper); color:var(--muted); }

@media (max-width:820px){
  .body-row{flex-direction:column;}
  main.q-panel.with-palette{border-right:none; border-bottom:1px solid var(--line);}
  aside.palette{width:100%; padding:16px 14px;}
  .mode-grid{grid-template-columns:1fr;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  /* Question palette: on a full-width mobile sidebar, a fixed 5-column grid stretches
     each box to 60-90px+ (since 1fr columns scale with the container). Instead, size
     boxes to a fixed 34-40px touch target and let the grid auto-fill as many columns
     as actually fit the screen width — this keeps boxes compact and roughly doubles
     how many fit per row on phones, cutting scroll length in test mode significantly. */
  .p-grid{grid-template-columns:repeat(auto-fill,minmax(34px,40px)); gap:6px; justify-content:start;}
  .p-cell{max-width:40px; font-size:.7rem;}
  .sec-label{margin:12px 0 5px;}
  /* table.match-tbl real fix (Blueprint Section 3, deferred at Step 8): the table
     is table-layout:fixed with two hard 50%-width columns, so it never actually
     overflows its container on a narrow screen -- .match-tbl-wrap's overflow-x:auto
     had nothing to scroll, it just cramped/wrapped text inside the fixed split.
     Below this same breakpoint, drop the table grid and stack each row's two cells
     as full-width blocks instead. This is layout-only, not a markup change: each
     row already pairs Column A's item with its Column B match at the same index
     (see template_phase2.html / nurseverdict-admin-phaselib.js), so a stacked
     "A, then its match" pair reads exactly as correctly as the side-by-side
     version, just without the wrapping. */
  table.match-tbl, table.match-tbl tbody, table.match-tbl tr{display:block; width:100%;}
  table.match-tbl thead{display:none;}
  table.match-tbl tr{border-top:1px solid var(--line);}
  table.match-tbl tr:first-child{border-top:none;}
  table.match-tbl td{display:block; width:100%; border-top:none !important; padding:8px 12px 8px 14px;}
  /* Column headers are hidden above, so recover the A/B color cue as a left accent
     border per cell instead of repeating a colored bar on every row. */
  table.match-tbl td:first-child{border-left:4px solid var(--maroon) !important;}
  table.match-tbl td:last-child{border-left:4px solid var(--teal) !important; padding-top:6px;}
}
@media (max-width:380px){
  .p-grid{grid-template-columns:repeat(auto-fill,minmax(30px,36px)); gap:5px;}
  .p-cell{max-width:36px; font-size:.66rem;}
}
/* ===== HEADER ON A SMALLER SCREEN (U10 fix pass) =====
   In Test Mode the right-hand cluster holds four things (Answered, Warnings, Section time, Settings). That cluster may not shrink (.util-right is
   flex-shrink:0 in the shared sheet, so a popover can never be squeezed), so on a screen under about 900px wide it took all the room and the title
   column collapsed to 0px: on a phone the chapter name stacked one letter per line (a header 1,300px tall) and the Settings button ended up past
   the edge of the maroon bar, on the page background, where its white text could not be seen. Here the cluster is dissolved into the header's own
   row layout instead: the title and the Settings button share the first row, and the chips get a row of their own underneath. The markup is the
   same, nothing here applies above 900px (a laptop looks exactly as before), and the Phase 1, 3 and 4 headers are not touched (their cluster is small). */
@media (max-width:900px){
  header.brandbar{flex-wrap:wrap; align-items:center; column-gap:10px; row-gap:0;}
  header.brandbar .brand-block{flex:1 1 0; min-width:0;}
  header.brandbar .util-right{display:contents;}
  header.brandbar .util-right > .icon-btn{order:2; flex:0 0 auto; align-self:flex-start;}
  header.brandbar .util-right > .timer-cluster{order:3; flex:1 1 100%; min-width:0;}
  header.brandbar .timer-cluster > *{margin-top:8px;} /* the gap lives on the chips, so an empty cluster (practice, no stopwatch or streak) adds no height */
}
@media (max-width:640px){
  .timer-cluster{gap:6px;}
  .marks-box{font-size:.75rem; padding:5px 7px;}
  .violation-badge{font-size:.66rem; padding:3px 7px;}
  .timer-box{padding:4px 7px;}
  .timer-box .l{font-size:.55rem;}
  .timer-box .v{font-size:.95rem;}
}
@media print{
  .util-bar, .sc-actions, .icon-btn, .filter-bar, .resume-banner{display:none !important;}
  .review-detail{display:block !important;}
  .group-body{display:block !important;}
  .group-header .chev{display:none;}
  body{background:#fff;}
}
@media print{
  body.print-target-active *{ visibility:hidden; }
  body.print-target-active .print-scorecard, body.print-target-active .print-scorecard *{ visibility:visible; }
  body.print-target-active .print-scorecard{ position:absolute; left:0; top:0; width:100%; padding:20px; }
  .no-print{ display:none !important; }
}