/* Quiz-specific colors only — shared palette (--bg/--surface/--ink/--muted/
   --line/--accent) comes from base.css. Success/danger/warning here are
   functional feedback (right/wrong, weak/strong), kept muted rather than
   folded into the one structural accent, per accessible-minimal-design. */
:root{--success:#3F6B4F;--success-bg:#F1F6F2;--danger:#9A3B3B;--danger-bg:#FBF2F2;--warning:#8A6A2F;--warning-bg:#FAF5EA}
:root[data-theme="dark"]{--success:#7FC79A;--success-bg:#1C2E22;--danger:#E08585;--danger-bg:#2E1C1C;--warning:#E0C070;--warning-bg:#2E2718}
*{box-sizing:border-box}
body{margin:0;min-height:100vh}
/* Top padding is intentionally modest — the hero right above this now
   provides most of the separation itself via its own (much larger)
   bottom padding, so this isn't stacking a second big gap on top of it. */
.wrap{max-width:1400px;margin:auto;padding:40px 48px 160px}
/* Active-round focus mode (enterQuizMode() in quiz.js) hides the hero,
   which normally provides the gap down to .wrap via its own much larger
   bottom padding (see that comment above) — without it the quiz card
   would sit right under the nav bar. This stands in only while that's
   true, generous enough that it reads as deliberate breathing room, not
   a layout accident. */
.wrap.quiz-focus-pad{padding-top:140px}
.badge{white-space:nowrap;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;font-weight:600;color:var(--muted)}

.layout{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
.main{min-width:0;display:grid;gap:28px}
.sidebar{display:flex;flex-direction:column;gap:18px;position:sticky;top:20px;align-self:start}

.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:0 2px}
.sidebar-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.sidebar-toggle{color:var(--muted)}
.sidebar-toggle:hover{background:var(--line);color:var(--ink)}
.sidebar-toggle .icon-eye-off{display:none}
.layout.sidebar-hidden .sidebar-toggle .icon-eye{display:none}
.layout.sidebar-hidden .sidebar-toggle .icon-eye-off{display:block}
#sidebarContent{display:flex;flex-direction:column;gap:18px}
.layout.sidebar-hidden #sidebarContent{display:none}
.layout.sidebar-hidden{grid-template-columns:1fr auto}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px}
.stat b{display:block;font-size:1.3rem;font-weight:600}
.stat span{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
/* The raw X/XX behind a percentage stat (Overall Accuracy) — same weight
   as the label below it, not the bold stat number, so the percentage
   stays the one thing your eye lands on first. */
.stat-sub{font-size:.8rem;font-weight:400;color:var(--muted)}

.progress{height:6px;background:var(--line);border-radius:999px;overflow:hidden}
#bar{height:100%;width:0;background:var(--accent);transition:width .2s ease}

.card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px}
.category{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--accent);font-weight:600}
h2{font-size:1.25rem;font-weight:600;margin:8px 0 18px}

/* Generous vertical room around the question itself — the actual focal
   point of the whole page — rather than it just being one more flush
   element at the top of the card like everything else. */
.qhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:44px 0 60px}
.qhead h2{margin:8px 0 0;flex:1}

/* Question N of 10, as a bar instead of (or alongside) the plain text
   counter — the accent color ties it to the rest of the site's themed
   controls (including a custom accent color, see account.php) rather than
   being a flat neutral progress indicator. */
.qprogress{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:14px}
.qprogress b{display:block;height:100%;background:var(--accent);transition:width .25s ease}

.history-card{margin-top:28px}
.history-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.history-row:last-child{border-bottom:0}
.history-date{color:var(--ink)}
.history-score{display:flex;align-items:center;gap:10px;font-weight:600}
.history-score .history-raw{color:var(--muted);font-weight:400;font-size:.88rem}

.landing-card{text-align:center;padding:36px 26px}
.landing-card .actions{justify-content:center;margin-top:20px}
.landing-card #startQuiz{padding:13px 28px;font-size:1rem}
.landing-details{text-align:left;max-width:560px;margin:0 auto}
/* No native marker (hidden below) reads as "not interactive" on its own —
   this chevron is the one visual cue that the summary expands, since the
   text alone doesn't say so. */
.landing-details summary{cursor:pointer;color:var(--muted);font-size:.9rem;list-style:none;display:flex;align-items:center;gap:8px}
.landing-details summary::-webkit-details-marker{display:none}
.landing-details summary::after{content:'';flex-shrink:0;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s ease}
.landing-details[open] summary::after{transform:rotate(-135deg)}
.landing-details summary strong{color:var(--ink)}
.landing-details[open] summary{margin-bottom:4px}
.hint-btn{flex:0 0 auto;width:26px;height:26px;margin-top:9px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-weight:700;line-height:1;cursor:pointer}
.hint-btn:hover{border-color:var(--accent);color:var(--accent)}
.hint-box{margin:0 0 16px;padding:10px 14px;border-radius:8px;background:var(--warning-bg);color:var(--ink);font-size:.88rem;line-height:1.5}

.options{display:grid;gap:10px}
.opt{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:13px 15px;text-align:left;font:inherit;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--accent);background:var(--bg)}
.opt.correct{border-color:var(--success);background:var(--success-bg)}
.opt.wrong{border-color:var(--danger);background:var(--danger-bg)}
.opt.selected{border-color:var(--accent);background:var(--bg)}
.opt:disabled{cursor:default}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* Extra room above, clearly separating these from the answer options right
   above them — otherwise Back/Skip/Next read as just one more option in
   the list. Back stays left; Skip+Next are grouped on the right so the
   "move forward" actions sit together regardless of which one applies. */
.quiz-actions{margin-top:52px;justify-content:space-between;align-items:center}
.actions-right{display:flex;gap:14px;align-items:center}
button.primary,button.secondary{border:1px solid var(--line);border-radius:8px;padding:11px 15px;font:inherit;font-weight:500;cursor:pointer}
.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.primary:hover{background:color-mix(in srgb, var(--accent) 88%, black)}
.secondary{background:var(--surface);color:var(--ink)}
.secondary:hover{background:var(--bg)}
.link-btn{background:none;border:0;padding:11px 2px;font:inherit;font-weight:500;color:var(--muted);text-decoration:underline;cursor:pointer}
.link-btn:hover{color:var(--ink)}

.hidden{display:none!important}
.results h2{font-size:1.5rem}
.scorebig{font-size:3rem;font-weight:600;line-height:1}
.pass{color:var(--success)}
/* Results screen: much more room between each major block (score ->
   breakdown -> recommendations -> plan builder -> plan -> review list ->
   actions) than the default .review/.reco margins give elsewhere, so each
   one reads as its own section instead of a running list. */
.review{margin-top:36px;display:grid;gap:8px}
.row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.weak{color:var(--warning)}
.fine{color:var(--success)}
.note{margin-top:18px;color:var(--muted);font-size:.88rem;line-height:1.6}
.topline{display:flex;justify-content:space-between;gap:12px;align-items:center}
.counter{color:var(--muted);font-weight:500}
.results-subhead{margin:52px 0 4px}
.results-actions{margin-top:44px}

.mastery{padding:18px}
.masteryHead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.masteryList{display:grid;gap:12px;margin-top:14px}
.mrow{display:grid;grid-template-columns:1fr auto;gap:8px 10px;align-items:center;font-size:.86rem}
.mrow .mname{cursor:help;border-bottom:1px dotted var(--line)}
.mn{color:var(--muted);font-weight:500}
.mbar{grid-column:1/-1;height:6px;background:var(--line);border-radius:999px;overflow:hidden}
.mbar b{display:block;height:100%;background:var(--accent)}
.mbar.weak b{background:var(--warning)}

.reco{margin-top:36px;padding:14px 16px;border-radius:10px;border:1px solid var(--line);background:var(--warning-bg)}
.reco b{color:var(--warning)}
.reco ul{margin:8px 0 0;padding-left:20px}
.reco li{margin:4px 0}
.reco a{color:var(--accent)}
.reco.ok{background:var(--success-bg)}
.reco.ok b{color:var(--success)}

.qmap{margin:4px 0 16px}
.qmap iframe{width:100%;height:280px;border:1px solid var(--line);border-radius:10px;display:block;background:var(--bg)}
.qmap .cap{font-size:.78rem;color:var(--muted);margin-top:6px}

.revlist{display:grid;gap:14px;margin-top:14px}
/* Generous internal padding — each reviewed question is its own small
   "card" to read carefully, not a dense list row. */
.revitem{padding:22px 24px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.revitem.bad{background:var(--danger-bg)}
.revitem.ok{background:var(--success-bg)}
.revhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.revbadge{font-weight:600;white-space:nowrap}
.revitem.ok .revbadge{color:var(--success)}
.revitem.bad .revbadge{color:var(--danger)}
.revq{font-weight:500}
/* Your answer / correct answer as their own labeled rows (not one run-on
   sentence) — correct answer only renders at all when the question was
   missed, see renderReview() in quiz.js. */
.revanswers{margin:16px 0;padding:12px 14px;border-radius:8px;background:var(--bg);display:grid;gap:8px}
.revans-row{display:flex;justify-content:space-between;gap:12px;font-size:.92rem}
.revans-label{color:var(--muted);flex-shrink:0}
.revans-value{color:var(--ink);font-weight:500;text-align:right}
.revans-row--correct .revans-label,.revans-row--correct .revans-value{color:var(--success)}
.revexp{font-size:.88rem;color:var(--muted);line-height:1.6}
.revref{font-size:.8rem;color:var(--muted);margin-top:10px}
.sync-note{font-size:.78rem;color:var(--muted);margin-top:6px}

.promo-card{margin-bottom:28px}
.promo-card h2{font-size:1.1rem}
.promo-benefits{list-style:none;padding:0;margin:10px 0;display:grid;gap:7px;font-size:.9rem}
.promo-benefits li{padding-left:26px;position:relative}
.promo-benefits li:before{content:"✓";color:var(--success);font-weight:700;position:absolute;left:0}
.promo-warning{font-size:.85rem;color:var(--warning);margin:8px 0 0;line-height:1.6}
.promo-card .btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.promo-card .btn{display:inline-block;padding:9px 16px;border-radius:8px;text-decoration:none;font-weight:500;font-size:.9rem;border:1px solid var(--line);color:var(--ink)}
.promo-card .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.guest-note{margin-top:24px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--warning-bg);color:var(--warning);font-size:.88rem;line-height:1.6}
.guest-note a{color:var(--accent);text-decoration:underline}

/* Highlighted — this is what actually personalizes the study plan below
   it to the person's real test date, easy to miss as a plain inline row. */
.plan-builder-box{margin-top:36px;padding:20px 22px;border-radius:12px;border:1px solid var(--accent);background:color-mix(in srgb, var(--accent) 7%, var(--surface))}
.plan-builder-head strong{color:var(--ink);font-size:1.02rem}
.plan-builder-head p{margin:4px 0 0;color:var(--muted);font-size:.88rem;line-height:1.5}
.plan-builder{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:.88rem;color:var(--muted)}
.plan-builder input{width:60px;padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.plan-table{width:100%;border-collapse:collapse;margin-top:28px;font-size:.88rem}
.plan-table th,.plan-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.plan-table th{font-size:.74rem;text-transform:uppercase;color:var(--muted)}
.plan-table a{color:var(--accent)}

@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{position:static}.layout.sidebar-hidden{grid-template-columns:1fr}}
@media(max-width:650px){.wrap{padding:24px 20px 70px}.badge{display:inline-block;margin-top:12px}.stats{grid-template-columns:repeat(2,1fr)}.card{padding:20px}.mrow{grid-template-columns:1fr auto}}
@media(max-width:480px){.wrap{padding:20px 16px 56px}.card{padding:16px}}