/* NCLEX High Yield — QBank student app.
   Design system (locked): boards blue #0a56b4, SQUARE corners (0–2px),
   Arial/Helvetica (Pearson VUE / NCSBN stack), fully responsive. */
:root {
  --blue: #0a56b4;
  --blue-dark: #0b4c9c;
  --blue-light: #e9f2fc;
  --ink: #1a1a1a;
  --muted: #5b6472;
  --line: #c9d2e0;
  --bg: #eef1f6;
  --card: #ffffff;
  --ok: #177245;
  --ok-bg: #e3f4ea;
  --bad: #b3232a;
  --bad-bg: #fbe7e8;
  --warn: #9a6a00;
  --hl: #ffe873;
  --radius: 2px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; font-size: 16px; }

/* ================= Brand ================= */
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  background: var(--blue); color: #fff; font-weight: bold;
  padding: 8px 10px; border-radius: var(--radius); letter-spacing: 1px; font-size: 15px;
}
.brand-text { display: flex; flex-direction: column; color: #fff; line-height: 1.15; }
.brand-text.dark { color: var(--ink); }
.brand-name { font-weight: bold; font-size: 15px; }
.brand-sub { font-size: 12px; opacity: .85; letter-spacing: 2px; text-transform: uppercase; }

/* ================= App shell: sidebar + content ================= */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; flex: 0 0 236px; background: var(--blue-dark); color: #fff;
  display: flex; flex-direction: column; gap: 18px; padding: 18px 14px;
  position: sticky; top: 0; height: 100vh; z-index: 60;
}
.side-brand { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.25); }
.side-brand .brand-mark { background: #fff; color: var(--blue); }
.side-nav { display: flex; flex-direction: column; gap: 6px; }
.side-link {
  background: transparent; border: 1px solid transparent; color: #fff; text-align: left;
  padding: 11px 12px; font-size: 15px; border-radius: var(--radius); width: 100%;
}
.side-link:hover { background: rgba(255,255,255,.12); }
.side-link.active { background: #fff; color: var(--blue); font-weight: bold; }
a.side-link { display: block; text-decoration: none; box-sizing: border-box; }
.badge {
  background: #fff; color: var(--blue); border-radius: var(--radius); font-size: 12px;
  padding: 0 6px; margin-left: 4px; font-weight: bold;
}
.badge:empty { display: none; }
.side-link.active .badge { background: var(--blue); color: #fff; }
.side-user { margin-top: auto; border-top: 1px solid rgba(255,255,255,.25); padding-top: 12px; }
.side-user-email { font-size: 13px; word-break: break-all; }
.side-user-scope { font-size: 12px; opacity: .85; margin: 2px 0 8px; }
.shell-main { flex: 1; min-width: 0; }
.sidebar-scrim { position: fixed; inset: 0; background: rgba(10,20,40,.45); z-index: 55; }
.mobile-topbar {
  display: none; background: var(--blue); color: #fff; padding: 8px 12px;
  align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50;
}
.mobile-title { font-weight: bold; letter-spacing: 1px; }

/* ================= Generic page furniture ================= */
.page-wrap { max-width: 1060px; margin: 0 auto; padding: 22px 18px 48px; }
.page-wrap.narrow { max-width: 520px; padding-top: 8vh; }
.page-title { font-size: 27px; margin: 0 0 4px; color: var(--blue-dark); }
.page-sub { color: var(--muted); margin: 0 0 20px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin-bottom: 18px;
}
/* Previous Tests is its own page behind the sidebar link under
   Create Test — not a list on the dashboard (Zeeshan, Nov 2). */
#view-history .review-row { flex-wrap: wrap; row-gap: 4px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-title { font-size: 17px; margin: 0 0 10px; color: var(--blue-dark); }
/* Access countdown pill (dashboard top-right) + extend/upgrade menu. */
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 20px; }
.dash-head .page-sub { margin: 0; }
.access-pill {
  position: relative;
  display: flex; align-items: stretch; background: var(--blue-dark); color: #fff;
  border-radius: var(--radius); box-shadow: 0 4px 14px rgba(11, 76, 156, .28);
}
.access-pill.urgent { background: var(--bad); box-shadow: 0 4px 14px rgba(179, 35, 42, .3); }
.ap-days { text-align: center; padding: 9px 15px; border-right: 1px solid rgba(255, 255, 255, .35); line-height: 1; align-self: center; }
.ap-days span { font-size: 30px; font-weight: 800; }
.ap-days small { display: block; font-size: 10px; font-weight: bold; letter-spacing: .6px; text-transform: uppercase; margin-top: 3px; opacity: .85; }
.ap-side { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.ap-through { font-size: 12.5px; opacity: .92; white-space: nowrap; }
.ap-btn {
  background: #fff; color: var(--blue-dark); border: none; border-radius: var(--radius);
  padding: 6px 12px; font-size: 13px; font-weight: bold; cursor: pointer; white-space: nowrap;
}
.ap-btn:hover { background: var(--blue-light); }
.ap-menu-wrap { position: relative; }
.ap-menu {
  position: absolute; right: 0; top: calc(100% + 6px); width: 320px; max-width: 88vw;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(11, 76, 156, .25); padding: 8px; z-index: 60;
}
.ap-group { font-size: 11px; font-weight: bold; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); padding: 8px 8px 4px; }
.ap-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 8px; color: var(--ink); text-decoration: none; border-radius: var(--radius); font-size: 14px;
}
.ap-item:hover { background: var(--blue-light); }
.ap-item strong { color: var(--blue-dark); white-space: nowrap; }
.ap-item-main small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; line-height: 1.35; }
.ap-note { font-size: 12px; color: var(--muted); padding: 2px 8px 6px; }
/* QBANK20 promo treatment — Free Access users only (app.js promoEligible) */
.ap-promo-banner {
  background: #fdf3d7; border: 1px solid #e3c565; color: #7a5b00;
  font-size: 12.5px; font-weight: bold; line-height: 1.4;
  border-radius: var(--radius); padding: 8px 10px; margin: 2px 0 4px;
}
.ap-item-promo { background: #fff8e1; border: 1px solid #e3c565; margin-top: 6px; }
.ap-item-promo:hover { background: #fdf3d7; }
.ap-off {
  background: #f0b429; color: #4d3800; font-size: 10.5px; font-weight: 800;
  letter-spacing: .4px; padding: 2px 6px; border-radius: 2px; vertical-align: 2px; white-space: nowrap;
}
.ap-price { text-align: right; white-space: nowrap; }
.ap-price s { color: var(--muted); font-weight: normal; font-size: 13px; margin-right: 6px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.primary-btn {
  background: var(--blue); color: #fff; border: 1px solid var(--blue); border-radius: var(--radius);
  padding: 11px 22px; font-size: 16px; font-weight: bold;
}
.primary-btn:hover { background: var(--blue-dark); }
.primary-btn.wide { width: 100%; }
.secondary-btn {
  background: #fff; color: var(--blue); border: 1px solid var(--blue); border-radius: var(--radius);
  padding: 10px 18px; font-size: 15px; font-weight: bold;
}
.secondary-btn:disabled { opacity: .45; cursor: default; }
.mini-btn {
  background: none; border: none; color: var(--blue); font-size: 13px; padding: 2px 4px; text-decoration: underline;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field.grow { flex: 1; }
.field label { font-size: 13px; font-weight: bold; color: var(--muted); }
.field input[type="email"], .field input[type="text"], .field input[type="number"], .search-input {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; background: #fff; width: 100%;
}
.demo-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.susp-head { color: var(--navy, #0b4c9c); font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.login-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.login-note a { color: var(--action); }
.login-card { padding: 28px; }
.login-brand { margin-bottom: 16px; }
.login-brand .brand-mark { background: var(--blue); color: #fff; }
.login-msg { background: var(--ok-bg); color: var(--ok); padding: 10px 12px; border-radius: var(--radius); margin-top: 14px; }
.login-err { background: var(--bad-bg); color: var(--bad); padding: 10px 12px; border-radius: var(--radius); margin-top: 14px; }
.qid-msg { background: var(--blue-light); color: var(--blue-dark); padding: 10px 12px; border-radius: var(--radius); margin-top: 14px; font-size: 14px; }
.qid-msg.err { background: var(--bad-bg); color: var(--bad); }

/* Topic-search results under the QID boxes: one tappable row per match. */
.qid-results { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.qid-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; cursor: pointer; font: inherit; width: 100%;
}
.qid-row:hover { border-color: var(--blue); }
.qid-row.locked { opacity: .65; }
.qid-row-id { font-weight: 700; color: var(--blue-dark); font-size: 13px; white-space: nowrap; }
.qid-row-topic { font-weight: 600; font-size: 13.5px; }
.qid-row-meta { color: var(--muted); font-size: 12.5px; }
.qid-row-seen { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.qid-row.locked .qid-row-seen { color: var(--muted); font-weight: 500; }

/* ================= Dashboard ================= */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.stat-card { text-align: center; }
.stat-num { font-size: 34px; font-weight: bold; color: var(--blue); }
.stat-cap { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.dash-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ================= Create Test ================= */
.toggle-row { display: flex; gap: 34px; flex-wrap: wrap; }
.toggle-item { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 300px; }
.toggle-label { font-weight: bold; }
.toggle-desc { color: var(--muted); font-size: 13px; max-width: 460px; }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; flex: 0 0 50px; margin-top: 2px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; background: #aab4c4; border-radius: var(--radius); transition: .15s; cursor: pointer;
}
.slider:before {
  content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; transition: .15s;
}
.switch input:checked + .slider { background: var(--blue); }
.switch input:checked + .slider:before { transform: translateX(22px); }
.pool-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pool-chip {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; cursor: pointer;
  background: #fff; font-size: 15px; display: inline-flex; align-items: center; gap: 6px;
}
.pool-chip:has(input:checked) { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: bold; }
.check-list { display: flex; flex-direction: column; }
.check-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 6px; cursor: pointer; border-bottom: 1px solid #edf0f5;
}
.check-item:hover { background: var(--blue-light); }
.check-item input { width: 18px; height: 18px; accent-color: var(--blue); }
.check-count { color: var(--muted); font-size: 13px; margin-left: auto; }
/* Count pill (UWorld/Bootcamp row format, NHY colors): pale blue chip. */
.count-pill {
  background: var(--blue-light); color: var(--blue); border-radius: var(--radius);
  font-size: 12.5px; font-weight: bold; padding: 1px 8px; white-space: nowrap;
}
.check-item .count-pill { margin-left: auto; }
/* Create-Test tabs (Practice | Adaptive) */
.mode-tabs { display: flex; margin-bottom: 14px; border-bottom: 2px solid var(--blue); }
.mode-tab {
  background: #dde6f2; border: 1px solid var(--line); border-bottom: none;
  padding: 10px 22px; font: inherit; font-size: 15.5px; cursor: pointer; color: var(--blue-dark);
}
.mode-tab.on { background: var(--blue); color: #fff; font-weight: bold; }
.mode-tab:disabled { opacity: .6; cursor: default; }
.soon-tag {
  font-size: 11px; background: #fff; color: var(--blue); border-radius: var(--radius);
  padding: 0 5px; margin-left: 7px; font-weight: bold; vertical-align: 2px;
}
/* Checkbox rows with count pills (Question Bank / Question Type) */
.bank-rows { display: flex; flex-direction: column; }
.bank-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 6px;
  border-bottom: 1px solid #edf0f5; cursor: pointer; font-size: 15.5px;
}
.bank-row:hover { background: var(--blue-light); }
.bank-row input { width: 18px; height: 18px; accent-color: var(--blue); }
.bank-row .count-pill { margin-left: auto; }
.num-slider { flex: 1; min-width: 140px; accent-color: var(--blue); }
/* Brand logo (asset supplied by the owner 2026-10-31) */
.login-brand { display: block; text-align: center; margin-bottom: 10px; }
.login-logo { width: 100%; max-width: 330px; height: auto; }
.login-product {
  color: var(--blue-dark); font-weight: bold; letter-spacing: 4px;
  font-size: 14px; margin-top: 2px; text-transform: uppercase;
}
.side-brand { background: #fff; padding: 14px 16px 10px; display: block; border-bottom: none; border-radius: 16px; box-shadow: 0 6px 18px rgba(3, 18, 44, .35); }
.side-qid { border-top: 1px solid rgba(255,255,255,.25); padding-top: 14px; }
.side-qid-form label { display: block; font-size: 12px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 7px; }
.side-qid-row { display: flex; gap: 6px; }
.side-qid-row input { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 14px; }
.side-qid-row input::placeholder { color: rgba(255,255,255,.55); }
.side-qid-btn { background: #fff; color: var(--blue-dark); border: none; font-weight: bold; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.side-qid-btn:hover { background: rgba(255,255,255,.85); }
.side-qid-note { color: rgba(255,255,255,.65); font-size: 12px; margin: 8px 0 0; }
.side-qid .qid-msg { margin-top: 10px; font-size: 13px; }
.side-logo { width: 100%; height: auto; display: block; }
.side-product {
  display: block; text-align: center; color: var(--blue-dark); font-weight: bold;
  letter-spacing: 4px; font-size: 12px; margin-top: 5px; text-transform: uppercase;
}
/* Feedback modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(6, 26, 54, .55);
  display: flex; align-items: center; justify-content: center; z-index: 95; padding: 16px;
}
.modal-card {
  background: #fff; border-radius: var(--radius); border-top: 4px solid var(--blue);
  width: 100%; max-width: 520px; padding: 20px; box-shadow: 0 18px 50px rgba(6, 26, 54, .35);
}
.modal-card textarea {
  width: 100%; font: inherit; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: var(--radius); resize: vertical;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
/* CAT mode: the exam chrome — no going back, no palette, no marking */
#view-player.cat-mode #prevBtn, #view-player.cat-mode #markBtn,
#view-player.cat-mode #paletteBtn, #view-player.cat-mode #submitBtn { display: none; }
.cat-rules { margin: 8px 0 8px 20px; font-size: 15px; line-height: 1.55; }
.cat-rules li { margin-bottom: 7px; }
.cat-verdict {
  font-size: 27px; font-weight: bold; text-align: center; padding: 20px 16px;
  border-radius: var(--radius); margin-bottom: 14px; border: 2px solid var(--line);
}
.cat-verdict.high { background: #e2f4e5; color: #14632a; border-color: #2e9e4f; }
.cat-verdict.near { background: #fdf3d8; color: #7a5b00; border-color: #d9a514; }
.cat-verdict.low { background: #fbe7e4; color: #8c2b1d; border-color: #cf4b36; }
/* Simulated CPR (per-area placement vs the passing standard) */
.cpr-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 6px 0 10px; }
.cpr-table th, .cpr-table td { text-align: left; padding: 8px 8px; border-bottom: 1px solid #edf0f5; vertical-align: top; }
.cpr-table th { color: var(--blue-dark); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.band-chip { display: inline-block; padding: 2px 9px; border-radius: var(--radius); font-weight: bold; font-size: 13px; white-space: nowrap; }
.band-chip.above { background: #e2f4e5; color: #14632a; }
.band-chip.near { background: #fdf3d8; color: #7a5b00; }
.band-chip.below { background: #fbe7e4; color: #8c2b1d; }
.cpr-sub { color: var(--blue-dark); font-size: 15.5px; margin: 16px 0 2px; }
.cpr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cpr-scroll .cpr-table { min-width: 540px; }
.cpr-items summary { cursor: pointer; font-weight: bold; color: var(--blue); padding: 8px 0; }
.cpr-item { padding: 6px 2px; border-bottom: 1px solid #edf0f5; font-size: 14px; }
/* Simulated CPR — official-document presentation: masthead + one
   "Test Plan Area Performance" table (Client Needs block, then
   Clinical Judgment block). Bands only, no scores or counts. */
.cpr-masthead { border-bottom: 2px solid var(--blue-dark); padding-bottom: 8px; margin: 4px 0 10px; }
.cpr-masthead-title { font-size: 19px; font-weight: bold; color: var(--blue-dark); text-transform: uppercase; letter-spacing: .4px; }
.cpr-masthead-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cpr-table-title { font-size: 15.5px; color: var(--ink); text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 6px; }
.cpr-table.cpr-report { border: 1px solid var(--line); margin: 6px 0 12px; }
.cpr-table.cpr-report th { background: var(--blue-dark); color: #fff; font-size: 12.5px; padding: 8px 10px; border-bottom: none; }
.cpr-table.cpr-report td { padding: 8px 10px; }
.cpr-report .cpr-block td { background: var(--blue-light); color: var(--blue-dark); font-weight: bold; text-transform: uppercase; letter-spacing: .6px; font-size: 13px; padding: 7px 10px; }
.cpr-report .cpr-overall td { font-weight: bold; }
.cpr-band { font-weight: bold; text-transform: uppercase; font-size: 13px; letter-spacing: .3px; }
.cpr-band.above { color: var(--ok); }
.cpr-band.near { color: var(--warn); }
.cpr-band.below { color: var(--bad); }
.cpr-band.none { color: var(--muted); font-weight: normal; text-transform: none; letter-spacing: 0; }
.review-row.clickable { cursor: pointer; }
.review-row.clickable:hover { background: var(--blue-light); }
.sys-row { border-bottom: 1px solid #edf0f5; }
.sys-row > .sys-head { display: flex; align-items: center; }
.sys-row .check-item { border-bottom: none; }
.check-item.grow { flex: 1; }
.exp-btn {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 13px; width: 26px; height: 30px; padding: 0; flex: none;
}
.exp-btn:hover { color: var(--blue); }
.topic-list {
  margin: 0 0 6px 34px; max-height: 260px; overflow-y: auto;
  border-left: 2px solid #edf0f5; padding-left: 8px;
}
.topic-item { font-size: 13.5px; padding: 5px 6px; }
.search-input { margin-bottom: 8px; }
.start-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.start-row .primary-btn { padding: 11px 26px; }
#numQuestions { width: 130px; }

/* ================= Player chrome ================= */
#view-player { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); }
.player-bar {
  background: var(--blue); color: #fff; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; position: sticky; top: 0; z-index: 40;
}
.player-center { flex: 1; text-align: center; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot-sep { margin: 0 6px; opacity: .6; }
.player-right { display: flex; align-items: center; gap: 8px; }
.timer { font-weight: bold; font-variant-numeric: tabular-nums; font-size: 16px; }
.timer.low { color: #ffb3b8; }
.bar-btn {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius); padding: 7px 11px; font-size: 14px;
}
.bar-btn:hover { background: rgba(255,255,255,.22); }
.bar-btn.danger { background: var(--bad); border-color: var(--bad); font-weight: bold; }
.bar-btn.on { background: #fff; color: var(--blue); font-weight: bold; }
.case-banner {
  background: var(--blue-dark); color: #fff; text-align: center; font-size: 14px;
  padding: 6px 10px; letter-spacing: .3px;
}
.toolbar {
  background: #fff; border-bottom: 1px solid var(--line); display: flex; gap: 6px; align-items: center;
  padding: 6px 12px; overflow-x: auto; position: sticky; top: 45px; z-index: 39;
}
.tool-btn {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 7px 11px; font-size: 14px; white-space: nowrap;
}
.tool-btn:hover { background: var(--blue-light); }
.tool-btn.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.toolbar-spacer { flex: 1; }
/* Zoom in/out control — scales the whole question + chart stage. */
.zoom-ctl { display: inline-flex; gap: 4px; align-items: center; }
.zoom-ctl .tool-btn { min-width: 40px; font-weight: 700; text-align: center; }
.zoom-ctl .tool-btn:disabled { opacity: .4; cursor: default; }

.player-body {
  display: grid; grid-template-columns: 1fr;
  flex: 1; align-items: stretch; width: 100%; max-width: 1500px; margin: 0 auto;
  zoom: var(--qz, 1);
}
@supports not (zoom: 1) {
  .player-body { font-size: calc(16px * var(--qz, 1)); }
  .chart-content { font-size: calc(15px * var(--qz, 1)); }
}
/* Chart visible (case layout): chart left, question right. */
.player-body.has-chart { grid-template-columns: minmax(340px, 42%) 1fr; }
/* Reviewing a case question: three-wide — chart | question | rationale
   docked right, UWorld-style (Zeeshan, Nov 3). Stacks on narrow screens. */
.player-body.has-chart.split { grid-template-columns: minmax(280px, 30%) minmax(0, 1fr) minmax(320px, 36%); }
@media (max-width: 1100px) {
  .player-body.has-chart.split { grid-template-columns: 1fr; }
  .player-body.has-chart.split .rationale { position: static; max-height: none; }
}
/* Rationale revealed with no chart: half/half split, rationale scrolls. */
.player-body.split { grid-template-columns: 1fr 1fr; }
.player-body.split .rationale {
  margin-top: 0; position: sticky; top: 96px; align-self: start;
  max-height: calc(100vh - 150px); overflow-y: auto;
}
.chart-panel {
  background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column;
  min-height: 0; max-height: calc(100vh - 150px); position: sticky; top: 96px;
}
.chart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: #f5f7fb;
}
.chart-title { font-weight: bold; color: var(--blue-dark); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.chart-tabs { display: flex; overflow-x: auto; border-bottom: 2px solid var(--blue); }
.chart-tab {
  background: #eef1f6; border: 1px solid var(--line); border-bottom: none; border-radius: 0;
  padding: 9px 12px; font-size: 13.5px; white-space: nowrap; color: var(--blue-dark);
}
.chart-tab.active { background: var(--blue); color: #fff; font-weight: bold; }
.chart-content { padding: 14px; overflow-y: auto; font-size: 15px; }
.chart-show {
  margin: 12px; align-self: flex-start; background: #fff; border: 1px solid var(--blue); color: var(--blue);
  border-radius: var(--radius); padding: 9px 14px; font-weight: bold;
}
.question-pane { padding: 20px 24px 26px; min-width: 0; background: var(--bg); }
.qid-label { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
/* Question ID on the left, a labeled Text size (zoom) control on the right —
   present on every question so students can always enlarge the writing. */
.qid-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.zoom-ctl { display: inline-flex; align-items: center; gap: 4px; }
.zoom-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.directions-bar {
  background: var(--blue-light); border-left: 5px solid var(--blue); color: var(--blue-dark);
  font-weight: bold; padding: 10px 13px; margin-bottom: 14px; font-size: 15.5px;
}
.stem { white-space: pre-wrap; margin-bottom: 12px; }
.question-prompt { font-weight: bold; margin-bottom: 16px; white-space: pre-wrap; }
.player-footer {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff;
  border-top: 1px solid var(--line); position: sticky; bottom: 0; z-index: 40;
}
.player-footer .primary-btn, .player-footer .secondary-btn { min-height: 46px; }
.save-state { flex: 1; text-align: center; color: var(--muted); font-size: 13px; }

/* ================= Options + renderers ================= */
.option {
  display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; margin-bottom: 9px; cursor: pointer; position: relative;
}
.option:hover { border-color: var(--blue); }
.option.selected { background: var(--blue-light); border-color: var(--blue); }
.option input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--blue); flex: 0 0 19px; }
.opt-letter { font-weight: bold; }
.opt-text { flex: 1; }
.option.struck .opt-text { text-decoration: line-through; opacity: .55; }
.option.locked { cursor: default; }
.option.correct { background: var(--ok-bg); border-color: var(--ok); }
.option.incorrect { background: var(--bad-bg); border-color: var(--bad); }
.strike-btn {
  background: none; border: none; color: var(--muted); font-size: 16px; padding: 0 2px; flex: 0 0 auto;
}
.strike-btn:hover { color: var(--bad); }
.opt-tag { font-size: 12px; font-weight: bold; padding: 2px 7px; border-radius: var(--radius); align-self: center; }
.opt-tag.ok { background: var(--ok); color: #fff; }
.opt-tag.bad { background: var(--bad); color: #fff; }
.renderer-note { color: var(--muted); font-size: 14px; }
mark { background: var(--hl); padding: 0 1px; }
/* Always-on highlight (UWorld-style): drag-selecting text in the stem,
   prompt or chart highlights it with no mode toggle; option text must
   stay selectable so the drag-across-an-option strikethrough gesture
   can form a selection. */
mark.user-hl { background: var(--hl); }
.opt-text { user-select: text; -webkit-user-select: text; }

/* Highlight: in-text findings inside the chart */
.hl-span {
  background: #fdf6cf; border-bottom: 2px solid #d8c95a; cursor: pointer; padding: 0 1px;
}
.hl-span:hover { background: #ffdc4d; }
.hl-span.on { background: var(--hl); border-bottom: 2px solid var(--warn); font-weight: bold; }
.hl-span.hl-correct { background: #bfe6cc; border-bottom: 2px solid var(--ok); font-weight: bold; }
.hl-span.hl-wrong { background: #f6c6c9; border-bottom: 2px solid var(--bad); text-decoration: line-through; }
.hl-span.hl-missed { background: transparent; border: 2px dashed var(--ok); font-weight: bold; }
.hl-extra { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; line-height: 2; }
.hl-extra-title { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

.exhibit-text { line-height: 1.5; }
.exhibit-head { font-weight: bold; color: var(--blue-dark); margin: 12px 0 4px; }
.exhibit-text > .exhibit-head:first-child { margin-top: 0; }
.exhibit-line { margin: 0 0 3px; }
.exhibit-gap { height: 7px; }
.exhibit-img { max-width: 100%; border: 1px solid var(--line); }
.exhibit-cap { color: var(--muted); font-size: 13px; }
.exhibit-table, .trend-table, .matrix-table { border-collapse: collapse; width: 100%; }
.exhibit-table td, .trend-table td, .trend-table th {
  border: 1px solid var(--line); padding: 6px 9px; font-size: 14.5px; text-align: left;
}
.trend-table th { background: var(--blue-light); color: var(--blue-dark); }
.trend-label { font-weight: bold; background: #f5f7fb; }
.matrix-scroll { overflow-x: auto; }
.matrix-table th { background: var(--blue); color: #fff; padding: 9px; font-size: 14px; }
.matrix-table td { border: 1px solid var(--line); padding: 8px; text-align: center; background: #fff; }
.matrix-table td.mx-row-text { text-align: left; }
.matrix-table input { width: 19px; height: 19px; accent-color: var(--blue); }
.mx-cell.mx-correct { background: #bfe6cc; }
.mx-cell.mx-wrong { background: #f6c6c9; }
.matrix-table tr.mx-row-ok td { background: var(--ok-bg); }
.matrix-table tr.mx-row-bad td { background: var(--bad-bg); }
.matrix-table tr.mx-row-ok td.mx-correct, .matrix-table tr.mx-row-bad td.mx-correct { background: #bfe6cc; }
.matrix-table tr.mx-row-bad td.mx-wrong { background: #f6c6c9; }
.mx-mark { font-weight: bold; margin-left: 5px; font-size: 15px; vertical-align: middle; }
.mx-mark.ok { color: var(--ok); }
.mx-mark.bad { color: var(--bad); }

.cloze-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; line-height: 2.1; }
.cloze-select {
  border: 1px solid var(--blue); border-radius: var(--radius); padding: 6px; margin: 0 4px;
  background: #fff; max-width: 100%;
}
.entry-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.entry-input { border: 1px solid var(--blue); border-radius: var(--radius); padding: 10px; width: 220px; max-width: 70%; }
.entry-unit { font-weight: bold; margin-left: 8px; }

.ordered-list { display: flex; flex-direction: column; gap: 8px; }
.ordered-row {
  display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 12px;
}
.ord-num {
  background: var(--blue); color: #fff; font-weight: bold; width: 27px; height: 27px; flex: 0 0 27px;
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius);
}
.ord-btns { margin-left: auto; display: flex; gap: 4px; }
.ord-btns button { border: 1px solid var(--line); background: #fff; border-radius: var(--radius); width: 32px; height: 32px; }

/* Bow-Tie: choice banks grouped on top, the diagram below */
.bowtie-wrap { display: flex; flex-direction: column; gap: 16px; }
.bt-banks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bt-pool { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.bt-pool-title { font-weight: bold; color: var(--blue-dark); font-size: 13.5px; margin-bottom: 8px; }
.bt-chips { display: flex; flex-direction: column; gap: 6px; }
.bt-chip {
  border: 1px solid var(--blue); background: #fff; color: var(--ink); border-radius: var(--radius);
  padding: 9px 10px; font-size: 14.5px; text-align: left; min-height: 44px;
}
.bt-chip:hover:not(:disabled) { background: var(--blue-light); }
.bt-chip.used { opacity: .38; }
.bowtie-diagram { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
.bt-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bt-arrow { color: var(--blue); font-size: 22px; line-height: 1; }
.bt-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bt-col.center-col { border: 2px solid var(--blue); min-width: 190px; }
.bt-col-title { font-weight: bold; color: var(--blue-dark); text-align: center; font-size: 14px; }
.bt-slot {
  border: 2px dashed #93a5c4; border-radius: var(--radius); min-height: 52px; padding: 9px;
  display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted);
  font-size: 14.5px; cursor: pointer; background: #f8fafd;
}
.bt-slot.filled { border-style: solid; border-color: var(--blue); color: var(--ink); background: var(--blue-light); font-weight: bold; }
.bt-slot.center-slot { min-height: 64px; }
.bt-slot.correct-slot { background: var(--ok-bg); border-color: var(--ok); }
.bt-slot.wrong-slot { background: var(--bad-bg); border-color: var(--bad); }
.bt-hint { color: var(--muted); font-size: 13.5px; margin: 0; }

/* ================= Rationale ================= */
.rationale {
  margin-top: 20px; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--blue);
  border-radius: var(--radius); padding: 16px 18px;
}
.rationale.verdict-correct { border-left-color: var(--ok); }
.rationale.verdict-incorrect { border-left-color: var(--bad); }
.rationale h3 { margin: 14px 0 5px; font-size: 15.5px; color: var(--blue-dark); }
.rationale p { margin: 0 0 8px; white-space: pre-wrap; line-height: 1.55; }
.rationale ul { margin: 0; padding-left: 20px; }
.rationale li { margin-bottom: 5px; }
/* Rationale header: verdict left, ID-5 type badge right — the badge is a
   distinct violet so the question type stands apart from the blue UI. */
.rat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.id5-badge {
  background: #6d28d9; color: #fff; font-size: 12px; font-weight: bold;
  letter-spacing: .7px; text-transform: uppercase; white-space: nowrap;
  padding: 5px 10px; border-radius: var(--radius);
}
.rat-h { display: flex; align-items: center; gap: 8px; color: var(--ink) !important; margin: 18px 0 7px !important; }
.rat-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; flex: 0 0 21px; border-radius: var(--radius);
  color: #fff; font-size: 12.5px; font-weight: bold;
}
.rat-ic.ok { background: var(--ok); }
.rat-ic.bad { background: var(--bad); }
.correct-line {
  background: var(--ok-bg); border: 1px solid var(--ok); border-radius: var(--radius);
  padding: 9px 12px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 3px;
}
.correct-line-label { font-size: 11.5px; font-weight: bold; text-transform: uppercase; letter-spacing: .8px; color: var(--ok); }
.correct-opt { font-size: 15px; }
.rat-list { list-style: none; margin: 0; padding: 0 !important; }
.rat-list li {
  background: #fbfcfe; border: 1px solid var(--line); border-left: 3px solid #d5dde8;
  border-radius: var(--radius); padding: 8px 11px; margin-bottom: 7px; line-height: 1.5;
}
.rat-list li strong { color: var(--blue-dark); }
.verdict { font-size: 19px; font-weight: bold; }
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--bad); }
.score-breakdown {
  background: var(--blue-light); color: var(--blue-dark); padding: 8px 11px; border-radius: var(--radius);
  margin-top: 9px; font-size: 14.5px;
}
.bottom-line {
  background: #fff8d6; border: 1px solid #e3d67c; border-radius: var(--radius); padding: 11px 13px; margin-top: 13px;
}
.bottom-line span { display: block; font-weight: bold; font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--warn); margin-bottom: 3px; }
.id5-line {
  font-weight: bold; font-size: 13.5px; color: #6d28d9;
  background: #f1eafd; border: 1px solid #cdbcf3; border-radius: var(--radius); padding: 7px 11px; margin-top: 11px;
}
.rationale-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }
.meta-chip { background: #eef1f6; border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 9px; font-size: 12.5px; color: var(--muted); }

/* ================= Results ================= */
.results-top { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.score-circle {
  width: 128px; height: 128px; flex: 0 0 128px; border-radius: 50%; border: 9px solid var(--ok);
  display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff;
}
.score-circle.mid { border-color: var(--warn); }
.score-circle.low { border-color: var(--bad); }
.score-pct { font-size: 31px; font-weight: bold; }
.score-cap { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.results-meta { display: flex; flex-direction: column; gap: 7px; font-size: 16px; }
.results-meta span { color: var(--muted); margin-left: 5px; }
.bar-row { display: grid; grid-template-columns: 170px 1fr 48px; gap: 10px; align-items: center; padding: 4.5px 0; font-size: 14.5px; }
.bar-track { background: #e6ebf3; height: 15px; border-radius: var(--radius); overflow: hidden; }
.bar-fill { background: var(--blue); height: 100%; }
.bar-fill.good { background: var(--ok); }
.bar-fill.bad { background: var(--bad); }
.bar-val { text-align: right; font-weight: bold; }
.bank-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 2px; border-bottom: 1px solid #e6ebf3; font-size: 14.5px; }
.bank-head { padding-top: 0; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bank-name { color: var(--ink); }
.bank-count { font-weight: bold; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bank-ngn { font-weight: normal; color: var(--muted); }
.bank-total { border-top: 2px solid var(--line); border-bottom: none; }
.bank-total .bank-name { font-weight: bold; }
.perf-right { display: flex; align-items: baseline; gap: 14px; }
.perf-detail { color: var(--muted); font-size: 13.5px; font-weight: normal; white-space: nowrap; }
.bp-row { display: grid; grid-template-columns: 1fr 118px 74px 64px 62px; gap: 10px; align-items: baseline; padding: 7px 2px; border-bottom: 1px solid #e6ebf3; font-size: 14.5px; }
.bp-head { padding-top: 0; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bp-name { color: var(--ink); }
.bp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-ngn { color: var(--muted); }
.bp-score { font-weight: bold; }
.bp-total { border-top: 2px solid var(--line); border-bottom: none; font-weight: bold; }
.review-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-bottom: 1px solid #edf0f5; flex-wrap: wrap;
}
.review-qnum { font-weight: bold; color: var(--muted); min-width: 26px; }
.review-topic { font-weight: bold; }
.review-type { color: var(--muted); font-size: 13.5px; }
.status-chip { font-size: 12.5px; font-weight: bold; padding: 3px 9px; border-radius: var(--radius); }
.status-chip.ok { background: var(--ok-bg); color: var(--ok); }
.status-chip.bad { background: var(--bad-bg); color: var(--bad); }
.status-chip.mark { background: #fff3cd; color: var(--warn); }

/* ================= Popups + palette drawer ================= */
.popup {
  position: fixed; top: 84px; right: 16px; width: 300px; max-width: calc(100vw - 24px); background: #fff;
  border: 1px solid var(--blue); border-radius: var(--radius); z-index: 100;
  box-shadow: 0 10px 34px rgba(8, 30, 70, .28); padding: 13px;
}
.popup.wide { width: 430px; }
.popup-head { display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: var(--blue-dark); margin-bottom: 10px; }
.popup-close { background: none; border: none; font-size: 16px; color: var(--muted); }
.calc-display {
  background: #10243f; color: #d9f99d; font-size: 25px; text-align: right; padding: 9px 12px;
  border-radius: var(--radius); margin-bottom: 9px; font-variant-numeric: tabular-nums; min-height: 48px; word-break: break-all;
}
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-btn { border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 11px 0; font-size: 17px; }
.calc-btn.op { background: var(--blue-light); }
.calc-btn.eq { background: var(--blue); color: #fff; font-weight: bold; }
.lab-scroll { max-height: 56vh; overflow-y: auto; }
.lab-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.lab-table td { border-bottom: 1px solid #edf0f5; padding: 5px 7px; }
.lab-table .lab-section td { background: var(--blue-light); font-weight: bold; color: var(--blue-dark); }
.drawer-scrim { position: fixed; inset: 0; background: rgba(10,20,40,.45); z-index: 90; }
.palette-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 88vw; background: #fff; z-index: 95;
  box-shadow: 6px 0 28px rgba(8,30,70,.25); padding: 16px; overflow-y: auto;
}
.index-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 12px; align-items: center; }
.index-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.idx-cell {
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 9px 0;
  font-size: 14.5px; text-align: center;
}
.idx-cell.sm { display: inline-block; width: 17px; height: 17px; padding: 0; vertical-align: -3px; }
.idx-cell.answered { background: var(--blue); color: #fff; border-color: var(--blue); }
.idx-cell.is-marked { box-shadow: inset 0 0 0 2px var(--warn); }
.idx-cell.current { outline: 3px solid var(--blue-dark); outline-offset: 1px; font-weight: bold; }
.idx-cell.is-case { border-bottom: 4px solid var(--blue); }

/* ================= Responsive: tablet ================= */
@media (max-width: 1024px) {
  .player-body.has-chart { grid-template-columns: minmax(300px, 44%) 1fr; }
  .bt-banks { grid-template-columns: 1fr 1fr; }
}

/* ================= Responsive: phone (UWorld/Bootcamp app pattern) ====
   Single column; compact sticky top bar; chart becomes a collapsible
   tabbed card ABOVE the question; palette is a slide-over; options are
   full-width thumb rows; Previous/Next live in a sticky bottom bar;
   nothing scrolls horizontally at the page level. */
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: auto; transform: translateX(-105%);
    transition: transform .18s ease; box-shadow: 6px 0 28px rgba(8,30,70,.3);
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-topbar { display: flex; }
  .page-wrap { padding: 16px 12px 40px; }
  .two-col { grid-template-columns: 1fr; }
  /* Dashboard stats on phones: compact 2-up tiles, not five full-width
     cards stacked down the screen (Zeeshan, Nov 2 — they ate the whole
     first screen). Access-through spans the bottom row. */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 12px 6px; }
  .stat-num { font-size: 23px; }
  .stat-cap { font-size: 10.5px; letter-spacing: .5px; }
  .stat-grid .stat-card:last-child { grid-column: 1 / -1; }
  /* Extend/Upgrade menu on phones: anchor it to the access pill's left
     edge instead of the button, so it can never slide off the left of
     the screen (Zeeshan screenshot, Nov 2). The pill hugs the left
     page margin on mobile, and the width is capped to the viewport. */
  .ap-menu-wrap { position: static; }
  .ap-menu { left: 0; right: auto; width: min(340px, calc(100vw - 24px)); max-width: none; }
  .start-row .primary-btn { width: 100%; }
  #numQuestions { width: 100%; }

  .player-center { font-size: 13.5px; text-align: left; }
  .player-center .dot-sep, #testNameLabel { display: none; }
  .bar-btn-label { display: none; }
  .player-bar { padding: 7px 8px; gap: 6px; }
  .toolbar { top: 41px; padding: 5px 8px; }
  .player-body, .player-body.has-chart, .player-body.split { display: block; max-width: none; }
  .player-body.split .rationale { position: static; max-height: none; margin-top: 20px; }
  .chart-panel {
    position: static; max-height: none; border-right: none; border-bottom: 2px solid var(--blue);
    margin: 10px 10px 0;
  }
  .chart-content { max-height: 46vh; overflow-y: auto; }
  .chart-show { margin: 10px 10px 0; }
  .question-pane { padding: 14px 12px 18px; }
  .option { padding: 13px 11px; }
  .option input { width: 22px; height: 22px; flex-basis: 22px; }
  .bt-banks { grid-template-columns: 1fr; }
  .bowtie-diagram { grid-template-columns: 1fr; }
  .bt-mid { flex-direction: row; justify-content: center; }
  .bt-arrow { transform: rotate(90deg); }
  .bt-col.center-col { min-width: 0; width: 100%; }
  .bar-row { grid-template-columns: 118px 1fr 44px; font-size: 13.5px; }
  /* Progress table on phones: the header words (Questions / Answered /
     Left / Score) are wider than their numeric columns at 12px and, being
     nowrap, ran together across the row (Zeeshan screenshot, Nov 2). Give
     the word columns real room, shrink the header type, and let the
     system-name column shrink/wrap instead of pushing the grid wide. */
  .bp-row { grid-template-columns: minmax(0, 1fr) 64px 68px 42px 48px; gap: 6px; font-size: 13px; }
  .bp-head { font-size: 10.5px; letter-spacing: .02em; }
  .bp-name { min-width: 0; }
  .bp-ngn { display: none; }
  .popup { top: auto; bottom: 70px; right: 8px; left: 8px; width: auto; }
  .results-top { gap: 16px; }
}

/* Lecture tie-in line under the rationale's bottom line */
.go-deeper { margin-top: 12px; background: var(--blue-light); border: 1px solid #c9def7; padding: 10px 12px; font-size: 14px; }
.go-deeper a { color: var(--blue); font-weight: 600; }

/* ---- My Test Day card (outcome capture, Pillar 1) ---- */
.td-intro { margin: 2px 0 10px; }
.td-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.td-row .field input[type="date"], .td-row .field input[type="number"] {
  padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.td-row .field input[type="number"] { width: 90px; }
.td-choice.selected { border-color: var(--blue); background: var(--blue-light); color: var(--blue-dark); font-weight: bold; }
.td-msg { color: var(--bad); font-size: 13px; margin: 8px 0 0; }
.td-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--blue); font-size: 13.5px; text-decoration: underline;
}
/* Subjects/Systems heads: Select all / Clear all sit with the title on the
   left (Zeeshan, 2026-11-03), not pushed to the far right. */
.card-head.head-left { justify-content: flex-start; }
.card-head.head-left .card-title { margin-bottom: 0; }
/* ID-5 card: one-line "what this type is" hint inside each type row. */
.id5-hint { color: #5a6b82; font-size: 12.5px; font-style: italic; }