:root {
  color-scheme: light;
  /* Light theme: clean neutral grays, GitHub-class contrast */
  --bg:#F6F8FA;
  --bg-deep:#FFFFFF;
  --card:#FFFFFF;
  --tile:#F6F8FA;
  --tile-hi:#EBEEF2;
  --sel:#DCE7FA;
  --line:#BEC6CE;
  --txt:#1F2328;
  --head:#0D1117;
  --mut:#59636E;
  --mut2:#8B949E;
  --acc:#0969DA;
  --acc-ink:#FFFFFF;
  --good:#177245;
  --bad:#CF222E;
  --warn:#9A6700;
  --gold:#866A0C;
  --good-bg:#DDF4E3;
  --bad-bg:#FFEBE9;
  --warn-bg:#FFF8C5;
  --expl-bg:#F6F8FA;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* Dark theme: layered slate surfaces, desaturated periwinkle accent */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:#1D2026;
  --bg-deep:#14161B;
  --card:#262A33;
  --tile:#2E3440;
  --tile-hi:#383F4D;
  --sel:#31405F;
  --line:#5A6272;
  --txt:#DBDEE1;
  --head:#F2F3F5;
  --mut:#A3AAB4;
  --mut2:#6E7681;
  --acc:#8B9CF5;
  --acc-ink:#14161B;
  --good:#3FB950;
  --bad:#FF7B72;
  --warn:#D29922;
  --gold:#E3B341;
  --good-bg:#1E3327;
  --bad-bg:#33262B;
  --warn-bg:#2A2113;
  --expl-bg:#23262E;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--acc);color:var(--acc-ink);padding:8px 16px;border-radius:8px;z-index:1000;font-weight:600}
.skip-link:focus{top:10px;outline:2px solid var(--acc);outline-offset:2px}
dialog#welcomeModal{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(24px,6vw,90px);border:0;background:var(--bg);color:var(--txt)}
#welcomeModal::backdrop{background:var(--bg)}
.exam-welcome{max-width:1050px;margin:5vh auto}
.exam-welcome h1{font-size:clamp(28px,4vw,46px);line-height:1.2;letter-spacing:-1px}
.cert-group{margin:32px 0}
.cert-group h2{font-size:20px;margin:0;border-bottom:1px solid var(--line);padding-bottom:8px}
.exam-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
.exam-choice{min-width:0;padding:22px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:18px;line-height:1.6}
.exam-choice .exam-name{display:block;font-size:24px;line-height:1.35;margin-top:20px;font-weight:700;color:var(--head)}
.exam-choice .exam-sub{display:block}
.exam-choice .exam-action{display:inline-block;margin-top:8px;padding:0;border:0;background:none;color:var(--acc);font:inherit;font-weight:700;text-align:left;text-decoration:none;cursor:pointer}
.exam-choice .exam-action:hover{text-decoration:underline}
.exam-choice .exam-action:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.exam-choice:hover,.exam-choice:focus-within{border-color:var(--acc);background:var(--tile)}
.exam-choice.current-exam{border-color:var(--good);box-shadow:0 0 0 1px var(--good)}
.cert-status{display:block;margin-top:8px;padding:8px 10px;border-left:3px solid var(--warn);background:var(--bg-deep);font-size:13px}
#pickerError{color:var(--bad)}
#pickerError:empty{display:none}
#pickerClose{float:right}
.topbar{flex-wrap:wrap}
@media(max-width:700px){.exam-grid{grid-template-columns:1fr}.exam-welcome{margin:0}nav#nav{flex-wrap:wrap}.brand{flex:1 1 0;max-width:100%}}
button:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
select:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
body{margin:0;color:var(--txt);font:16px/1.6 var(--font);background:var(--bg)}
.topbar{position:sticky;top:0;z-index:5;display:flex;gap:16px;align-items:center;padding:10px 18px;background:var(--bg-deep);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:700;color:var(--head);letter-spacing:.2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:baseline;gap:10px}
.active-cert{font-size:12px;font-weight:500;letter-spacing:0;color:var(--mut);border-left:1px solid var(--line);padding-left:10px;min-width:0;overflow:hidden;text-overflow:ellipsis}
nav#nav{display:flex;gap:8px}nav#nav button{background:transparent;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}
nav#nav button.active{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:700}
#themeToggle{background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 8px;cursor:pointer;color:var(--txt);display:flex;align-items:center;justify-content:center}
#themeToggle:hover{border-color:var(--acc)}
#themeToggle:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.pill{background:var(--bad);color:#fff;border-radius:10px;padding:0 7px;font-size:12px;margin-left:4px}
[data-theme="dark"] .pill{color:#14161B}
/* Gamification header stats (XP / streak / level). Plain spans like the
   Cloud Quest topbar: no layout shift when numbers grow. */
.game-stats{display:flex;gap:12px;align-items:center;margin-left:auto;color:var(--txt);font-size:14px;white-space:nowrap}
.game-stats b{font-variant-numeric:tabular-nums}
.level-badge{background:var(--acc);color:var(--acc-ink);border-radius:8px;padding:2px 8px;font-size:12px;font-weight:700;letter-spacing:.4px}
.view{max-width:1020px;margin:12px auto;padding:0 14px}
.build-footer{max-width:1020px;margin:8px auto 20px;padding:0 14px;text-align:right}
.build-footer a{color:inherit}
.hidden{display:none!important}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid2>*{min-width:0}@media(max-width:800px){.grid2{grid-template-columns:minmax(0,1fr)}}
h2{margin:0 0 8px;color:var(--head);letter-spacing:.2px}h3{margin:10px 0 4px;color:var(--head)}
.muted{color:var(--mut)}.small{font-size:12.5px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.frow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.frow>label{min-width:0}
.spacer{flex:1}
button{background:var(--tile-hi);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 13px;cursor:pointer;font-family:inherit}
button:hover{border-color:var(--mut2)}
button.primary{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:700}
button.secondary{background:transparent;color:var(--txt);border:1px solid var(--line)}
button.secondary:hover{border-color:var(--acc)}
button.secondary.active{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
select,input[type=search],input[type=number]{background:var(--tile);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-family:inherit;font-size:16px}
select{max-width:100%}
/* Long-form reading: 17.5px / 1.7 / ~68ch (research: comprehension rises to ~18px) */
.stem{font-size:17.5px;line-height:1.7;background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px;max-width:76ch}
/* Policy JSON and other <pre> blocks (30 bank questions): scroll in place,
   never spill past the card. Same pattern as the wide-table fix below. */
.stem pre,#flashWhy pre,#flashOverall pre,#labFeedback pre,#examReviewList pre,.opts pre{display:block;overflow-x:auto;max-width:100%;font-family:var(--mono);font-size:13.5px;line-height:1.6;background:var(--bg-deep);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:8px 0;white-space:pre}
details.overall{margin-top:8px}
details.overall>summary{cursor:pointer;font-weight:700;font-size:15px;color:var(--head)}
.stem p{margin:.5em 0}.stem ol,.stem ul{margin:.5em 0;padding-left:22px}.stem li{margin:.3em 0}
.stem code,.opts code,#flashWhy code,#labFeedback code{font-family:var(--mono);background:var(--tile);color:var(--acc);padding:1px 6px;border-radius:6px;font-size:.86em}
[data-theme="dark"] .stem code,[data-theme="dark"] .opts code,[data-theme="dark"] #flashWhy code,[data-theme="dark"] #labFeedback code{color:#9ECBFF}
.stem img,#flashWhy img,#flashOverall img,#labFeedback img,#examReviewList img{max-width:100%;border:1px solid var(--line);border-radius:8px;margin:8px 0}
/* Diagrams downscaled to card width get unreadable text: tap to zoom.
   The overlay shows the image near native size, scrollable + pinch-zoomable. */
.stem img,#flashWhy img,#flashOverall img,#labFeedback img,#examReviewList img{cursor:zoom-in}
#imgLightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.88);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px;cursor:zoom-out}
#imgLightbox img{max-width:none;max-height:none;border-radius:8px;background:#fff}
#imgLightbox .lb-hint{position:fixed;top:10px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(0,0,0,.6);padding:4px 12px;border-radius:12px;pointer-events:none}
/* Tutor explanations contain wide <table>s — scroll them in place instead of
   breaking the card layout on narrow screens. */
.stem table,#flashWhy table,#flashOverall table,#labFeedback table,#examReviewList table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse}
.stem th,.stem td,#flashWhy th,#flashWhy td,#flashOverall th,#flashOverall td,#labFeedback th,#labFeedback td,#examReviewList th,#examReviewList td{border:1px solid var(--line);padding:6px 10px;text-align:left;font-size:14px}
.stem th,#flashWhy th,#flashOverall th,#labFeedback th,#examReviewList th{background:var(--bg-deep)}
/* Tutor HTML sometimes omits spaces around inline links; restore word gaps */
#flashOverall a::before,#examReviewList a::before,#labFeedback a::before{content:" "}
#flashOverall a::after,#examReviewList a::after,#labFeedback a::after{content:" "}
/* Long AWS docs URLs are unbroken strings — break them instead of spilling
   the card (seen on security-marek-t4-q41 at 360px: 530px page overflow). */
#flashDocs a,#flashOverall a,#examReviewList a,#labFeedback a,.docs a{overflow-wrap:anywhere}
.opts{display:grid;gap:6px}
/* Long unbroken option text (ARNs, URLs, JSON) must wrap instead of
   forcing question cards past the viewport on phones. */
.opt{overflow-wrap:anywhere}
.opt-body{min-width:0}
.opt{background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;font-size:15px}
.opt:hover{border-color:var(--acc)}
.opt:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.opt.sel{border-color:var(--acc);background:var(--sel)}
.opt .tag{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:0 6px;margin-left:8px;color:var(--mut)}
.readiness{font-size:44px;font-weight:800;color:var(--head)}.bar{height:10px;background:var(--bg-deep);border:1px solid var(--line);border-radius:6px;margin:8px 0}.bar>div{height:100%;width:0;background:var(--good);border-radius:6px;transition:width .4s ease}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}.stats b{display:block;font-size:20px}.stats span{color:var(--mut);font-size:12px}
@media(max-width:600px){.stats{grid-template-columns:1fr 1fr}}
.dbar{margin:6px 0}.dbar .t{display:flex;justify-content:space-between;font-size:13px}.dbar .o{height:8px;background:var(--bg-deep);border:1px solid var(--line);border-radius:5px}.dbar .i{height:100%;background:var(--acc);border-radius:5px;transition:width .4s ease}
.loop li{margin:4px 0}
.timer{font-variant-numeric:tabular-nums;font-weight:700;background:var(--bg-deep);border:1px solid var(--line);border-radius:8px;padding:5px 12px;color:var(--head)}
.timer.low{color:var(--bad);border-color:var(--bad);background:var(--tile);background:color-mix(in srgb, var(--bad) 10%, var(--tile))}
.sticky{position:sticky;top:57px;background:var(--card);padding:8px 0;z-index:3}
/* A wrapped (taller) topbar would overlap the sticky bar — let it scroll away. */
@media(max-width:700px){.sticky{position:static}}
.rate button{font-weight:700}
.docs{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.docs h3{margin:0 0 6px;font-size:14px}
.docs ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.docs li{min-width:0}
.docs li a{display:flex;align-items:center;gap:8px;background:var(--tile);border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--acc);font-size:13px;text-decoration:none;overflow:hidden}
.docs li a:hover{border-color:var(--acc)}
.docs li a svg{flex:none}
.docs li a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.error{background:var(--tile);background:color-mix(in srgb, var(--bad) 12%, var(--tile));border:1px solid var(--bad);border-radius:10px;padding:12px;margin:12px auto;max-width:1020px}
.spinner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 8px 32px #00000030}
.spinner-ring{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.expl{border-left:3px solid var(--line);padding:8px 12px;margin:8px 0;background:var(--expl-bg);border-radius:0 8px 8px 0;font-size:15px;line-height:1.65}
.expl.good{border-color:var(--good)}.expl.bad{border-color:var(--bad)}
.expl.good .opt-letter.mini{background:var(--good-bg);color:var(--good);border-color:var(--good)}
.expl.bad .opt-letter.mini{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.trap{display:inline-block;background:var(--tile);background:color-mix(in srgb, var(--warn) 15%, var(--tile));color:var(--txt);border:1px solid var(--warn);border-radius:6px;font-size:12px;padding:0 8px;margin:4px 0}

/* ---------- Playcards stage (Duolingo/Quizlet-style focus card) ---------- */
.pc-progress{height:8px;background:var(--bg-deep);border:1px solid var(--line);border-radius:99px;margin:2px 0 12px;overflow:hidden}
.pc-progress>div{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--good));transition:width .45s ease}
.pc-top{margin-bottom:4px}
/* Controls live on their own row, pinned right via the spacer, so varying
   card meta (domain length, memory chip) can never shift the buttons. */
.pc-controls{margin-bottom:12px}
/* Action buttons travel as one unit: they wrap to the next line together,
   never stranding Reshuffle alone when a long domain chip fills the row. */
.pc-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;margin-left:auto}
/* Long domain/source names truncate with ellipsis (full text on hover)
   instead of pushing the buttons off the row. */
#flashMeta{flex:1 1 auto;min-width:0}
#flashMeta .chip{max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.chip{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:99px;padding:1px 10px;margin:1px 3px 1px 0;color:var(--mut);background:var(--bg-deep)}
.chip.dom{color:var(--acc);border-color:var(--acc)}
.chip.multi{color:var(--warn);border-color:var(--warn)}
.chip.danger{color:var(--bad);border-color:var(--bad);font-weight:700}
.chip.new{color:var(--good);border-color:var(--good)}
.chip.mem.hi{color:var(--good);border-color:var(--good)}
.chip.mem.mid{color:var(--warn);border-color:var(--warn)}
.chip.mem.low{color:var(--bad);border-color:var(--bad)}
.chip.streak{color:var(--gold);border-color:var(--gold);font-weight:700}
.pc-stage{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
@media(max-width:700px){.pc-stage{padding:14px}.exam-choice{padding:18px}}
.pc-stage.slide{animation:slidein .32s ease}
@keyframes slidein{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.pc-q{font-size:18px;line-height:1.7}
.pc-opts{margin-top:4px}
.opts .opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);transition:transform .12s ease,border-color .12s,box-shadow .12s,background .12s}
.opts .opt:hover{transform:translateY(-1px);border-color:var(--acc);background:var(--tile-hi)}
.opts .opt.sel{border-color:var(--acc);background:var(--sel);box-shadow:0 0 0 1px var(--acc)}
/* Verdict backgrounds must beat .sel: picked tiles keep .sel when revealed. */
.opts .opt.right{border-color:var(--good);background:var(--good-bg);box-shadow:none}
.opts .opt.wrong{border-color:var(--bad);background:var(--bad-bg);box-shadow:none}
.opts .opt.locked{cursor:default}.opts .opt.locked:hover{transform:none}
.opt-letter{flex:0 0 30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;background:var(--bg-deep);border:1px solid var(--line);color:var(--mut)}
.opt-letter.mini{flex:none;display:inline-flex;width:24px;height:24px;font-size:12px;border-radius:7px;vertical-align:-6px;margin-right:2px}
.opt.sel .opt-letter{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.opts .opt.right .opt-letter{background:var(--good);color:#FFFFFF;border-color:var(--good)}
.opts .opt.wrong .opt-letter{background:var(--bad);color:#FFFFFF;border-color:var(--bad)}
[data-theme="dark"] .opts .opt.right .opt-letter{color:#04140b}
[data-theme="dark"] .opts .opt.wrong .opt-letter{color:#2a0808}
.opt-body{flex:1}.opt-key{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:0 6px}
/* Touch devices have no keyboard: key badges are noise there. */
@media (hover:none){.opt-key{display:none}}
/* Touch targets: minimum comfortable tap height where it doesn't distort desktop. */
@media (hover:none){
  nav#nav button{padding:10px 14px}
  .question-nav-btn{padding:10px 4px}
  .pagination button{padding:10px 14px}
}
.opt.right{animation:pop .3s ease}
.opt.wrong{animation:shake .3s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.verdict{font-weight:700;font-size:16px;border-radius:10px;padding:8px 12px;margin:12px 0 6px}
.verdict.good{background:var(--good-bg);color:var(--good);border:1px solid var(--good)}
.verdict.bad{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad)}
#flashAnswer.rise{animation:rise .3s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rate-dock{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.rate-dock .rate{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
@media(max-width:560px){.rate-dock .rate{grid-template-columns:1fr 1fr}}
.rate-dock .rate button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;font-size:14px}
.rate-dock .rate button span{font-size:11.5px;color:var(--mut);font-weight:400}
.rate-dock .rate button.primary span{color:var(--acc-ink)}
button.big{font-size:16px;padding:11px 26px;border-radius:12px}
.hint{margin:10px 2px 0}
kbd{font-family:inherit;background:var(--bg-deep);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 6px;font-size:11.5px;color:var(--mut)}

/* Exam run filters */
.exam-run-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.exam-run-filters .frow{gap:8px}

/* Question navigator */
.question-navigator{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:12px;margin:12px -14px -14px;border-radius:0 0 12px 12px;z-index:10}
.question-navigator-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:6px;max-height:120px;overflow-y:auto}
.question-nav-btn{padding:6px 4px;border:1px solid var(--line);border-radius:6px;background:var(--bg-deep);color:var(--txt);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.question-nav-btn:hover{border-color:var(--acc)}
.question-nav-btn.correct{background:var(--tile);background:color-mix(in srgb, var(--good) 18%, var(--tile));border-color:var(--good);color:var(--good)}
/* L10: incorrect vs merely unanswered must not look identical. */
.question-nav-btn.incorrect{background:var(--tile);background:color-mix(in srgb, var(--bad) 18%, var(--tile));border-color:var(--bad);color:var(--bad)}
.question-nav-btn.unanswered{border-style:dashed;color:var(--mut)}
.question-nav-btn.flagged{background:var(--tile);background:color-mix(in srgb, var(--warn) 18%, var(--tile));border-color:var(--warn);color:var(--warn)}

/* Pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.pagination button{padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg-deep);color:var(--txt);cursor:pointer}
.pagination button:hover:not(:disabled){border-color:var(--acc)}
.pagination button.active{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.pagination button:disabled{opacity:.4;cursor:not-allowed}

/* Per-question timer */
.question-time{font-variant-numeric:tabular-nums;font-size:12px;color:var(--mut);font-family:var(--mono)}

/* Undo toast */
.undo-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 16px;box-shadow:0 8px 24px #00000040;box-shadow:0 8px 24px color-mix(in srgb, var(--txt) 15%, transparent);z-index:1000;display:flex;gap:12px;align-items:center;animation:slideUp .25s ease}
.undo-toast button{padding:6px 12px;border-radius:6px;cursor:pointer}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* Mark for review in flashcards */
#flashMarkReview{margin-left:auto}

/* Focus sessions, confidence, batch mode */
.session-bar{margin-bottom:8px}
.session-bar input[type="number"]{width:64px}
#focusClock{font-variant-numeric:tabular-nums}
#goalRingWrap{display:inline-flex;gap:6px;align-items:center}
.conf-row{gap:8px;align-items:center;flex-wrap:wrap}
#confSure.on{border-color:var(--good);color:var(--good)}
#confUnsure.on{border-color:var(--warn);color:var(--warn)}
#focusViewBtn[aria-pressed="true"]{border-color:var(--acc);color:var(--acc)}
.note{margin-top:8px;padding:8px 12px;border-left:3px solid var(--acc);background:var(--bg-deep);border-radius:0 8px 8px 0;font-size:14px}
.note-edit{margin-top:10px}
.note-edit textarea{width:100%;box-sizing:border-box;margin-top:4px;background:var(--bg-deep);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;font-size:14px}
/* Distraction-light focus view: only the card survives. The Focus view button
   itself stays visible — it is the way back out (plus F / Esc). */
body.focus-mode #nav,body.focus-mode #switchExam,body.focus-mode #themeToggle,
body.focus-mode #flashStreak,body.focus-mode .pc-controls label,body.focus-mode .hint,
body.focus-mode .session-bar label,body.focus-mode #sessStart,body.focus-mode #sessCustom{ display:none }
body.focus-mode .pc-stage{box-shadow:0 0 0 2px var(--acc)}
#breakOverlay,#sessSummary{padding:0;border:0;background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 48px #00000040;max-width:440px;max-height:calc(100dvh - 40px);overflow:auto}
#breakOverlay::backdrop,#sessSummary::backdrop{background:rgba(0,0,0,.5)}
#breakOverlay .help-content,#sessSummary .help-content{padding:24px}
#breakOverlay .timer{font-size:28px;margin:8px 0}

/* Mistake Lab filters */
.mistake-lab-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px;padding:8px 0;border-bottom:1px solid var(--line)}

/* Shortcuts help dialog */
#shortcutsHelp{max-width:520px;max-height:calc(100dvh - 40px);overflow:auto;padding:0;border:0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 48px #00000040}
#shortcutsHelp::backdrop{background:rgba(0,0,0,.5);background:color-mix(in srgb, var(--txt) 15%, transparent)}
#shortcutsHelp .help-content{padding:24px}
#shortcutsHelp h2{margin:0 0 16px;font-size:20px;color:var(--head)}
#shortcutsHelp dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px;line-height:1.6}
#shortcutsHelp dt{font-family:var(--mono);font-size:12px;color:var(--acc);white-space:nowrap}
#shortcutsHelp dd{margin:0;color:var(--txt)}
#shortcutsHelp button{margin-top:16px;width:100%}

/* Respect reduced-motion preferences: disable decorative animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Printouts: content only, no app chrome. */
@media print {
  .topbar,.game-stats,.session-bar,.pc-controls,.pc-top,.conf-row,.rate-dock,.hint,
  .exam-run-filters,.sticky,.question-navigator,.pagination,.row,
  .undo-toast,#breakOverlay,#sessSummary,#welcomeModal{display:none!important}
  .view{max-width:none}
  .card,.pc-stage{box-shadow:none}
  .stem,.opt,.expl{break-inside:avoid}
}

/* L56: prevent sticky topbar overlap when jumping to anchor (scroll-margin-top) */
[id] { scroll-margin-top: 64px; }

/* L57: small text in selects/inputs — don't go below 14px for legibility */
select,input[type=search],input[type=number]{font-size:max(14px,1rem);}

/* L58: radio/checkbox labels clickable — better UX for filter checkboxes */
label > input[type=checkbox], label > input[type=radio] { margin-right: 6px; }
label > input[type=checkbox]:focus-visible, label > input[type=radio]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }

/* L59: focus ring always visible — even on rate buttons that steal focus */
button:focus-visible, .opt:focus-visible, .rate button:focus-visible, .question-nav-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* L60: small utility — hide labels that exist only for a11y (sr-only already used) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }