/* 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;
}
.access-card { background: #fff; border: 2px solid #b3261e; padding: 16px 18px; margin: 14px 0; }
.access-card h3 { margin: 0 0 6px; color: #b3261e; font-size: 19px; }
.access-card p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; }
.access-card .ap-item { border: 1px solid var(--line, #d7e3f2); margin-bottom: 6px; }
.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; }
/* Dashboard stat tiles — Mix design (Zeeshan, 2026-11-06): Option A accent
   tiles + Option C progress bars, scoped to the dashboard grid only. */
.dash-stats .stat-card { border-top: 6px solid #0b4c9c; padding-top: 14px; }
.dash-stats .stat-num { color: #1a1a1a; margin-top: 4px; }
.dash-stats .stat-cap { font-weight: 700; }
.dash-stats .sa1 { border-top-color: #0b4c9c; } .dash-stats .sa1 .stat-cap { color: #0b4c9c; }
.dash-stats .sa2 { border-top-color: #0a56b4; } .dash-stats .sa2 .stat-cap { color: #0a56b4; }
.dash-stats .sa3 { border-top-color: #1e7d46; } .dash-stats .sa3 .stat-cap { color: #1e7d46; }
.dash-stats .sa4 { border-top-color: #b97d0a; } .dash-stats .sa4 .stat-cap { color: #b97d0a; }
.dash-stats .sa5 { border-top-color: #0b4c9c; background: #e9f2fc; } .dash-stats .sa5 .stat-cap { color: #0b4c9c; }
.dash-stats .stat-bar { height: 8px; background: #e9f2fc; margin-top: 10px; text-align: left; }
.dash-stats .stat-bar i { display: block; height: 100%; background: #0a56b4; width: 0; }
.dash-stats .stat-bar.avg i { background: #1e7d46; }
.dash-stats .stat-note { font-size: 12px; color: #5a6b7f; margin-top: 6px; }
.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; }
.cat-verdict.incomplete { background: #eef1f6; color: #5b6472; border-color: #c9d2e0; }
.cat-verdict.undetermined { background: #eef1f6; color: #5b6472; border-color: #c9d2e0; }
.beta-disclaimer { background: #fdf3d8; border: 2px solid #d9a514; border-radius: 6px; color: #5f4a00; font-size: 15px; line-height: 1.55; padding: 14px 16px; margin: 0 0 14px; }
/* 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); }
.perf-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef2f7; flex-wrap: wrap; }
.perf-row:last-child { border-bottom: none; }
.perf-name { flex: 1 1 150px; font-weight: 600; }
.perf-bar { flex: 0 0 130px; height: 10px; background: #e9eef5; border-radius: 5px; overflow: hidden; }
.perf-bar i { display: block; height: 100%; background: #0a56b4; }
.perf-bar i.weak { background: #d97706; }
.perf-meta { color: #5b6b7f; font-size: 13px; }
.perf-chart { width: 100%; height: auto; display: block; }
.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;
  /* Horizontal drags across an option are strike gestures, not scrolls
     (vertical page scroll still works via pan-y). */
  touch-action: pan-y;
}
.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: 17px; padding: 7px 9px; margin: -7px -3px -7px 0; flex: 0 0 auto; cursor: pointer;
}
.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; }
.selectn-counter { font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.selectn-counter.at-cap { color: #b3261e; }
mark { background: var(--hl); }
/* The Question ID row is player chrome, not question content — it is
   not selectable, so it can never take (or appear to keep) a highlight. */
.qid-row, #qidLabel { user-select: none; -webkit-user-select: none; }
/* Always-on highlight (UWorld-style): drag-selecting text in the stem,
   prompt or chart highlights it with no mode toggle. Option text is NOT
   selectable (2026-11-06): the pointer strike gestures own option drags,
   and a text selection forming there was the root of "dragging chooses
   the answer / hard to cross off". */
mark.user-hl { background: var(--hl); }
.opt-text { user-select: none; -webkit-user-select: none; }
.option { -webkit-touch-callout: none; }

/* 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 { display: block; width: 100%; height: auto; margin: 2px 0; }
.exhibit-cap { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.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 tables in the UWorld scheme (Zeeshan, 2026-11-04): solid
   blue header band with white text, tinted label column, zebra rows. */
.trend-table th { background: var(--blue); color: #fff; font-weight: bold; }
.trend-table thead th:first-child { background: var(--blue-dark); }
.trend-label { font-weight: bold; background: var(--blue-light); color: var(--blue-dark); }
.trend-table tbody tr:nth-child(even) td { background: #f5f8fd; }
.trend-table tbody tr:nth-child(even) td.trend-label { background: #dcebfb; }
.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); }
/* Matrix softening (Zeeshan, 2026-11-07): softer appeal like the reference
   players — pale blue header instead of the solid band, zebra rows in white /
   faint blue, lighter grid lines, and a gentle tint on the chosen cell.
   Colors only; layout, corners and grading states unchanged. The row/cell
   guards keep these off the post-submit grading colors. */
.matrix-table th { background: #dcebfb; color: var(--blue-dark); border: 1px solid #cfdff2; }
.matrix-table td { border-color: #d9e4f2; }
.matrix-table tbody tr:not(.mx-row-ok):not(.mx-row-bad):nth-child(even) td:not(.mx-correct):not(.mx-wrong) { background: #f5f8fd; }
.matrix-table tr:not(.mx-row-ok):not(.mx-row-bad) td:not(.mx-correct):not(.mx-wrong):has(input:checked) { background: #e2eefc; }
.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; }
/* The bow tie itself (Zeeshan, 2026-11-04): the five slots ARE the
   bow tie — wedge wings pinching toward a hexagonal knot, the
   UWorld layout, diagram first and choice banks below. clip-path
   shapes each tile (it clips borders too, so the edge is drawn with
   a shape-following drop-shadow). Text centers inside its tile,
   wrapped or not, on desktop and mobile alike. */
.bowtie-diagram { display: grid; grid-template-columns: 1fr minmax(168px, .92fr) 1fr; gap: 8px 12px; align-items: stretch; padding: 4px 2px 2px; }
.bt-col { display: flex; flex-direction: column; gap: 10px; }
.bt-col-title { font-weight: bold; color: var(--blue-dark); text-align: center; font-size: 14px; min-height: 34px; display: flex; align-items: flex-start; justify-content: center; }
.bt-slot {
  flex: 1; min-height: 78px; padding: 12px 20px;
  display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted);
  font-size: 14.5px; line-height: 1.32; cursor: pointer; background: #e9f0fa;
  filter: drop-shadow(0 0 1px #7d90b4) drop-shadow(0 1px 1px rgba(11, 76, 156, .16));
}
.bt-slot.side-left.pos-0 { clip-path: polygon(0 0, 100% 18%, 100% 100%, 0 100%); }
.bt-slot.side-left.pos-1 { clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); }
.bt-slot.side-right.pos-0 { clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); }
.bt-slot.side-right.pos-1 { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 82%); }
.bt-slot.side-center { clip-path: polygon(11% 0, 89% 0, 100% 50%, 89% 100%, 11% 100%, 0 50%); }
.bt-slot.filled { color: var(--ink); background: var(--blue-light); font-weight: bold; }
.bt-slot.center-slot { min-height: 118px; }
.bt-slot.correct-slot { background: var(--ok-bg); color: var(--ink); }
.bt-slot.wrong-slot { background: var(--bad-bg); color: var(--ink); }
.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;
}
/* Rationale teaching figures (pilot, 2026-11-07): original annotated
   diagrams served from /assets/figures/, rendered by showRationale when
   rationale.figures is present. Squared corners + pale/navy frame to
   match the player; caption in small gray-navy under a pale rule. */
.rat-fig {
  margin: 12px 0 4px; padding: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.rat-fig img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.rat-fig figcaption {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--blue-light);
  font-size: 13px; line-height: 1.45; color: #44586e;
}
/* FNP Method rationale (Step 5, §2.3a): the Method block (Steps 1–2)
   and the eliminating-clue callouts inside the per-distractor teaching. */
.method-block {
  background: #eef4fc; border: 1px solid var(--blue-light); border-radius: var(--radius);
  padding: 11px 13px; margin: 12px 0 4px;
}
.method-h { font-weight: bold; font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--blue, #0a56b4); margin-bottom: 6px; }
.method-step { margin: 7px 0; }
.method-step-n { font-weight: bold; font-size: 13.5px; color: #0a56b4; }
.method-step p { margin: 2px 0 0; }
.clue-callout {
  background: #fdf1f1; border-left: 4px solid #c0392b; border-radius: 4px;
  padding: 7px 10px; margin: 6px 0 4px; font-size: 14px; line-height: 1.45;
}
.clue-label {
  display: block; font-weight: bold; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.8px; color: #c0392b; margin-bottom: 2px;
}
.flip-line { font-size: 13.5px; color: #44586e; font-style: italic; margin: 2px 0 6px; }
/* Image load-failure fallback (Step 6): alt text stands in for the image. */
.img-fallback {
  border: 1px dashed #94a7bd; border-radius: var(--radius); background: #f4f7fb;
  color: #44586e; padding: 14px; font-size: 14px; line-height: 1.45; margin: 2px 0;
}
/* Mock exam card rows (Step 5). */
.mock-def-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.mock-def-row:last-child { border-bottom: none; }
.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 lists: true aligned columns (Zeeshan, 2026-11-06) — number,
   result, marked, topic, type/meta and the Review button each hold
   their column on every row; the marked cell is reserved even when
   empty so nothing shifts. */
.review-row {
  display: grid; grid-template-columns: 34px 102px 96px minmax(140px, 1fr) minmax(180px, 1.4fr) 96px;
  gap: 8px 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #edf0f5;
}
.review-row .status-chip { display: inline-block; min-width: 84px; text-align: center; }
.review-row > .mini-btn { width: 100%; }
.review-row.marked-row { grid-template-columns: 34px 102px minmax(140px, 1fr) minmax(160px, 1.2fr) auto auto auto; }
.review-row.marked-row > .mini-btn { width: auto; }
/* Previous Tests: true columns (Zeeshan, 2026-11-04) — date, score,
   test name, details and action each in their own aligned column
   instead of one wrapping flex row. */
.hist-row { display: grid; grid-template-columns: 118px 112px minmax(150px, 1.1fr) minmax(190px, 1.5fr) 112px; gap: 8px 14px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #edf0f5; }
.hist-score .status-chip { display: inline-block; min-width: 76px; text-align: center; }
.hist-action .primary-btn { width: 100%; }
.hist-action .status-chip { display: block; text-align: center; }
.hist-row.clickable { cursor: pointer; }
.hist-row.clickable:hover { background: var(--blue-light); }
.hist-head { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.hist-date { font-weight: bold; white-space: nowrap; }
.hist-name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-meta { color: var(--muted); font-size: 13.5px; }
.hist-action { justify-self: end; text-align: right; }
@media (max-width: 720px) {
  .hist-row { grid-template-columns: 88px 84px 1fr 96px; }
  .hist-row > :nth-child(4) { display: none; }
  .review-row { grid-template-columns: 34px 102px 96px 1fr 96px; }
  .review-row > :nth-child(5) { display: none; }
  .review-row.marked-row { grid-template-columns: 34px 102px 1fr auto auto auto; }
  .review-row.marked-row > :nth-child(4) { display: none; }
}
.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; }
  /* The bow tie keeps its shape on phones — narrower tiles, smaller
     type, tighter padding, never stacked. */
  .bowtie-diagram { grid-template-columns: 1fr .88fr 1fr; gap: 6px 7px; }
  .bt-col { gap: 7px; }
  .bt-col-title { font-size: 12px; min-height: 30px; }
  .bt-slot { min-height: 66px; padding: 9px 13px; font-size: 12.5px; }
  .bt-slot.center-slot { min-height: 96px; }
  .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; }
/* Voice-set media cards — bottom of the rationale (owner, 2026-11-04:
   podcast icon + tidy bottom placement). Squared corners per house style. */
.media-links { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 11px; }
.media-links-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.media-card { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid #c9def7; padding: 9px 12px 9px 9px; margin-bottom: 7px; text-decoration: none; color: inherit; }
.media-card:hover { border-color: var(--blue); background: var(--blue-light); }
.media-ic { flex: 0 0 36px; width: 36px; height: 36px; background: var(--navy, #0b4c9c); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.media-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-play { position: absolute; right: 2px; bottom: 2px; background: rgba(11, 76, 156, .92); color: #fff; font-size: 9px; line-height: 1.5; padding: 0 4px; }
.media-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.media-kicker { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.media-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.media-arrow { flex: 0 0 auto; font-size: 20px; color: var(--muted); }

/* ---- My Study Plan (in-app planner, 2026-11-04) ---- */
.sp-hint { color: var(--muted); font-size: 13.5px; margin: 8px 0 0; }
.sp-programs { display: inline-flex; gap: 8px; }
.sp-prog { border: 1.5px solid #cfdff2; background: #f4f8fd; color: #5a6b7f; padding: 9px 22px; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; border-radius: 999px; transition: all .15s ease; }
.sp-prog:hover { border-color: #0b4c9c; color: #0b4c9c; }
.sp-prog.active { background: #0b4c9c; border-color: #0b4c9c; color: #fff; font-weight: bold; box-shadow: 0 3px 8px rgba(11, 76, 156, .28); }
.sp-avail-label { display: block; font-size: 13px; font-weight: bold; color: var(--blue-dark); margin: 16px 0 6px; }
.sp-week { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-day { border: 1px solid var(--line); padding: 8px 10px; min-width: 86px; }
.sp-day.on { border-color: var(--blue); background: var(--blue-light); }
.sp-check { display: flex; gap: 6px; align-items: center; font-weight: bold; font-size: 13.5px; margin: 0 0 6px; color: var(--ink); }
.sp-hours { display: flex; gap: 5px; align-items: center; margin: 0; font-weight: normal; }
.sp-hours input { width: 58px; padding: 6px 7px; border: 1px solid var(--line); background: #fff; font: inherit; }
.sp-rec { border-top: 4px solid var(--blue-dark); }
.sp-rec-btn { display: inline-block; text-decoration: none; padding: 11px 18px; }
.sp-spot { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.sp-spot.danger { border-color: var(--bad); background: var(--bad-bg); }
.sp-spot-label { display: block; font-size: 11.5px; font-weight: bold; letter-spacing: 1.5px; color: var(--muted); }
.sp-spot-date { font-size: 21px; color: var(--blue-dark); }
.sp-spot small { color: var(--muted); max-width: 520px; }
.sp-summary { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-bottom: 12px; }
.sp-summary b { color: var(--blue-dark); font-size: 17px; }
.sp-print { margin-left: auto; }
.sp-week { margin-bottom: 20px; overflow-x: auto; }
.sp-week-title { font-weight: 700; color: #0b4c9c; font-size: 15px; margin-bottom: 6px; }
.wk-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wk-table th { background: #0b4c9c; color: #fff; font-size: 12px; padding: 6px 4px; text-align: center; }
.wk-table td { border: 1px solid #e3ecf7; vertical-align: top; padding: 9px 8px; font-size: 11.5px; min-height: 90px; background: #fff; }
.wk-sess { font-weight: 700; color: #0b4c9c; font-size: 12.5px; margin-bottom: 4px; }
.wk-line { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 5px; line-height: 1.35; }
.wk-box { flex: none; width: 13px; height: 13px; border: 1.6px solid #33506e; border-radius: 4px; margin-top: 1px; background: #fff; }
.wk-ev { font-weight: 700; font-size: 10.5px; letter-spacing: .4px; padding: 2px 5px; margin-top: 5px; color: #fff; background: #0b4c9c; }
.wk-ev.cat { background: #b3261e; }
.wk-ev.tut { background: #b97d0a; }
.wk-ev.test { background: #1a1a1a; }
.wk-rest { color: #b6c3d2; }
@page wkland { size: landscape; margin: 10mm; }
@media print {
  .sp-week { page: wkland; break-after: page; overflow: visible; }
  .sp-week:last-child { break-after: auto; }
}
/* Segment icons (Zeeshan, 2026-11-06): the watch icon is a YouTube-style
   play button — rounded rectangle, red, white triangle; the questions
   icon is a pencil (do the questions), not a question mark. */
/* Print-only compact checklist (screen-hidden; print shows it alone). */
.sp-printlist { display: none; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
.pl-line > span:last-child { min-width: 0; overflow-wrap: break-word; }
.pl-sess, .pl-date, .pl-ev { overflow-wrap: break-word; }
.pl-head { font-size: 17px; font-weight: 800; color: #0b4c9c; margin-bottom: 2px; }
.pl-sub { font-size: 11.5px; color: #5a6b7f; margin-bottom: 12px; }
.pl-day { break-inside: avoid; margin-bottom: 13px; }
.pl-date { font-size: 13.5px; font-weight: 800; color: #10243e; border-bottom: 2px solid #0b4c9c; padding-bottom: 3px; margin-bottom: 6px; }
.pl-sess { font-size: 12.5px; font-weight: 700; color: #0b4c9c; margin: 7px 0 3px; }
.pl-line { display: flex; align-items: center; gap: 7px; font-size: 12px; margin: 3px 0 3px 2px; }
.pl-box { flex: none; width: 13px; height: 13px; border: 1.6px solid #5a6b7f; border-radius: 3.5px; }
.pl-ev { font-size: 12.5px; font-weight: 800; margin: 6px 0; }
.pl-ev.cat { color: #1e7d46; }
.pl-ev.live { color: #0b4c9c; }
.pl-ev.tut { color: #b97d0a; }
.pl-ev.test { color: #fff; background: #1a1a1a; display: inline-block; padding: 3px 9px; border-radius: 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.seg-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 15px; border-radius: 5px; font-size: 9px; font-weight: 800; margin-right: 2px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.seg-ico.watch { background: #ff0000; color: #fff; }
.seg-ico.do { background: #ffd23f; color: #1a1a1a; } /* No. 2 pencil: yellow tile, black pencil */
.sp2-line.seg { display: flex; align-items: center; gap: 7px; margin: 3px 0; }
.wk-line .seg-ico { width: 18px; height: 13px; font-size: 8px; }
.sp2-tutlist { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.sp2-tutchip { background: #e9f2fc; border: 1px solid #0b4c9c; color: #0b4c9c; font-size: 13px; font-weight: 700; padding: 4px 6px 4px 10px; }
.sp2-tutdel { background: none; border: none; color: #b3261e; font-size: 15px; font-weight: 700; cursor: pointer; padding: 0 2px; }
.sp-cal-month { margin-bottom: 18px; }
.sp-cal-title { font-weight: 700; color: #0b4c9c; font-size: 15px; margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5a6b7f; text-align: center; padding: 2px 0; }
.cal-cell { border: 1px solid #d7e3f2; min-height: 62px; padding: 4px 5px; font-size: 11px; }
.cal-cell.empty { border-color: transparent; }
.cal-cell.is-test { background: #fdf3d8; border-color: #b97d0a; }
.cal-d { font-weight: 700; font-size: 12px; color: #1a1a1a; }
.cal-s { display: block; color: #0b4c9c; font-weight: 700; margin-top: 2px; }
.cal-s.done { color: #1e7d46; }
.cal-e { display: block; font-weight: 700; font-size: 10px; letter-spacing: .5px; padding: 1px 4px; margin-top: 2px; color: #fff; background: #0b4c9c; }
.cal-e.cat { background: #b3261e; }
.cal-e.tut { background: #b97d0a; }
.cal-e.test { background: #1a1a1a; }
@media (max-width: 760px) { .cal-cell { min-height: 48px; } .cal-e { font-size: 8.5px; } }
.sp2-days { display: flex; gap: 8px; margin-top: 6px; }
.sp2-day { flex: 1 1 0; border: 1.5px solid #cfdff2; background: #f4f8fd; color: #5a6b7f; font-weight: 700; font-size: 14px; padding: 11px 4px; cursor: pointer; border-radius: 12px; text-align: center; transition: all .15s ease; }
.sp2-day:hover { border-color: #0b4c9c; color: #0b4c9c; transform: translateY(-1px); }
.sp2-day.on { background: #0b4c9c; border-color: #0b4c9c; color: #fff; box-shadow: 0 3px 8px rgba(11, 76, 156, .28); }
.sp2-progress { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin: 14px 0 10px; font-size: 15px; }
.sp2-msg { border-left: 6px solid #0a56b4; background: #e9f2fc; padding: 11px 14px; font-size: 14.5px; line-height: 1.5; margin-bottom: 14px; }
.sp2-msg.ok { border-left-color: var(--ok); background: var(--ok-bg); }
.sp2-msg.warn { border-left-color: var(--warn); background: #fdf3d8; }
.sp2-msg.danger { border-left-color: var(--bad); background: var(--bad-bg); }
.sp2-sess { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #0b4c9c; }
.sp2-line { margin: 5px 0; }
.sp2-chip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; padding: 2px 7px; margin-right: 7px; vertical-align: 2px; background: #0b4c9c; color: #fff; }
.sp2-chip.do { background: #e9f2fc; color: #0b4c9c; border: 1px solid #0b4c9c; }
.sp2-chip.cat { background: var(--bad); }
.sp2-remind { background: #e9f2fc; border: 1px dashed #0a56b4; padding: 9px 12px; font-size: 13.5px; margin: 8px 0; }
.sp-status { display: flex; flex-wrap: wrap; gap: 10px 34px; align-items: center; border-top: 6px solid var(--ok); }
.sp-status.warn { border-top-color: var(--warn); }
.sp-status.danger { border-top-color: var(--bad); }
.sp-status-msg { flex: 1; min-width: 260px; }
.sp-status-main { font-size: 15.5px; font-weight: 700; }
.sp-status.ok .sp-status-main { color: var(--ok); }
.sp-status.warn .sp-status-main { color: var(--warn); }
.sp-status.danger .sp-status-main { color: var(--bad); }
.sp-status-line { font-size: 14px; margin-top: 3px; }
.sp-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.sp-st { border: 1px solid var(--line); border-top: 6px solid var(--blue-dark); padding: 10px 8px 12px; text-align: center; }
.sp-st-cap { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--blue-dark); }
.sp-st-num { font-size: 22px; font-weight: 700; margin-top: 3px; }
.sp-stats-foot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-top: 12px; }
.sp-incl { font-size: 13.5px; color: var(--muted); }
.sp-incl b { color: var(--blue-dark); }
@media (max-width: 760px) { .sp-stats { grid-template-columns: 1fr 1fr; } }
.sp-banner { padding: 11px 13px; font-size: 14.5px; line-height: 1.5; margin-top: 10px; border: 1px solid var(--line); border-left: 6px solid var(--blue); }
.sp-banner.ok { background: var(--ok-bg); border-color: var(--ok); border-left: 6px solid var(--ok); }
.sp-banner.warn { background: #fdf3d8; border-color: var(--warn); border-left: 6px solid var(--warn); }
.sp-banner.danger { background: var(--bad-bg); border-color: var(--bad); border-left: 6px solid var(--bad); }
.sp-banner.info { background: var(--blue-light); border-color: var(--blue); }
.sp-day-card { padding: 14px 18px; }
.sp-day-head { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 6px; }
.sp-day-num { font-size: 12px; letter-spacing: 1.5px; color: var(--muted); }
.sp-day-num b { color: var(--blue-dark); font-size: 15px; }
.sp-day-date { font-weight: bold; color: var(--blue-dark); }
.sp-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.sp-row:last-child { border-bottom: none; }
.sp-row.done .sp-task { opacity: .55; }
.sp-row.done h4 { text-decoration: line-through; }
.sp-task { flex: 1; min-width: 0; }
.sp-task h4 { margin: 3px 0 4px; font-size: 16px; }
.sp-task p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #333; }
.sp-meta { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.sp-badge { font-weight: bold; letter-spacing: .5px; padding: 2px 8px; font-size: 11.5px; background: var(--blue-light); color: var(--blue-dark); }
.sp-badge.practice { background: #e3f4ea; color: var(--ok); }
.sp-badge.review { background: #fdf3d8; color: var(--warn); }
.sp-badge.cat { background: var(--blue-dark); color: #fff; }
.sp-badge.tutoring { background: #efe6fb; color: #5b2ea6; }
.sp-badge.live { background: var(--bad); color: #fff; }
.sp-event { background: #fbfcfe; }
.sp-done input { width: 19px; height: 19px; margin-top: 4px; cursor: pointer; }
.sp-howto p { margin: 6px 0 0; line-height: 1.55; font-size: 14.5px; }

/* Print: the study plan becomes a clean paper calendar (Print / Save
   PDF). App chrome and the plan controls drop away; day cards keep
   together; done checkboxes stay as tick boxes. */
@media print {
  .sidebar, .mobile-topbar, .sp-noprint { display: none !important; }
  .app-shell { display: block; }
  body { background: #fff; }
  #view-study-plan .page-wrap { max-width: none; padding: 0; }
  #view-study-plan .card { break-inside: avoid; box-shadow: none; }
  .sp-row { break-inside: avoid; }
  .sp-cal-month { break-inside: avoid; }
  /* Print = the compact date-list checklist ONLY (Zeeshan, 2026-11-06):
     screen sections, the month calendar and the weekly grid stay off paper. */
  #spBody > *:not(.sp-printlist) { display: none !important; }
  .sp-printlist { display: block !important; }
  .sp-weekwrap { box-shadow: none; border: none; padding: 0; }
}

/* ---- My test date bar (outcome capture, Pillar 1) ---- */
.td-slim { padding: 12px 16px; margin-bottom: 14px; }
.td-slim .td-intro { margin: 0; }
.td-intro { margin: 2px 0 10px; }
.td-remind { margin: 2px 0 10px; font-weight: 700; color: #0b4c9c; }
.td-quote { margin: 10px 0 0; font-style: italic; color: #0b4c9c; }
.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; }