/* questions.html — the unified Question bank (UPSC_UI_BUILD_BRIEF.md).
Layout only: every colour, font and radius comes from the semantic tokens in ui.css
("2026-11 THEME"), so the dark theme works without a second palette here. */
.qb-page{ background:var(--color-bg); color:var(--color-text); overflow-x:hidden; }
.qb{ font-family:var(--font-ui); font-size:16px; line-height:1.55; }
.qb *, .qb *::before, .qb *::after{ box-sizing:border-box; }
.qb:focus{ outline:none; }
.qb-ic{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.qb-ic.sm{ width:18px; height:18px; }
/* ---- heading + search ---- */
.qb-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-4); }
.qb-titles{ min-width:0; }
/* ---- the one filter row ---- */
.qb-fwrap{ margin-bottom:var(--space-3); }
.qb-filters{ margin-bottom:0; }
.qb-f{ min-width:0; }
.qb-filters .sel{ min-width:150px; max-width:260px; border-color:var(--color-control-border); text-overflow:ellipsis; }
.qb-filters #qb-exam{ min-width:190px; font-weight:600; }
.qb-filters .sel:disabled{ opacity:.6; cursor:not-allowed; }
.qb-reset{ min-height:44px; }
.qb-ctx{ color:var(--color-primary); font-weight:600; font-size:15px; text-decoration:none; padding:10px 4px; margin-left:6px; }
.qb-ctx:hover{ text-decoration:underline; }
.qb-ctx[hidden]{ display:none; }
.qb-fbtn, .qb-fdone, .qb-fexam{ display:none; }
/* inline notices (locked year, search scope, jump undo) + content.js banners */
.qb-notes:empty{ display:none; }
.qb-note{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; background:var(--color-revisit-soft); color:var(--color-text);
border:1px solid var(--color-border); border-left:3px solid var(--color-revisit); border-radius:var(--radius-control);
padding:10px 14px; margin:0 0 var(--space-3); font-size:14.5px; line-height:1.5; }
.qb-note.info{ background:var(--color-surface); border-left-color:var(--color-primary); }
.qb-note .qb-na{ margin-left:auto; display:flex; gap:var(--space-2); align-items:center; }
.qb-note a, .qb-note .linkbtn{ color:var(--color-primary); font-weight:600; text-decoration:none; font-size:14.5px; padding:6px 4px; }
.qb-note .qb-nx{ background:none; border:0; color:var(--color-text-muted); cursor:pointer; min-width:36px; min-height:36px; border-radius:var(--radius-control); font-size:18px; line-height:1; }
.qb-note .qb-nx:hover{ color:var(--color-text); }
.qb .lockbar{ border-radius:var(--radius-control); margin:0 0 var(--space-3); }
/* ---- workspace ---- */
.qb-work{ display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); gap:20px; align-items:start; }
.qb-listpane{ position:sticky; top:calc(var(--appbar-h) + 16px); display:flex; flex-direction:column; overflow:hidden;
height:calc(100vh - var(--appbar-h) - 32px); height:calc(100dvh - var(--appbar-h) - 32px); min-height:420px; }
.qb-lhead{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-4) var(--space-3) var(--space-6); border-bottom:1px solid var(--color-border); flex:none; flex-wrap:wrap; }
.qb-lhead h2{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--color-text); }
.qb-total{ color:var(--color-text-muted); font-size:15px; }
.qb-sort{ margin-left:auto; min-width:0; font-size:15px; }
.qb-list{ position:relative; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:var(--space-2) var(--space-2) var(--space-2) var(--space-2); }
.qb-list:focus{ outline:none; }
.qb-list::-webkit-scrollbar{ width:10px; }
.qb-list::-webkit-scrollbar-thumb{ background:var(--color-control-border); border-radius:999px; border:3px solid var(--color-surface); }
.qb-list::-webkit-scrollbar-track{ background:transparent; }
.qb-rows{ list-style:none; margin:0; padding:0; }
.qb-rows > li + li{ border-top:1px solid var(--color-border); }
.qb-lfoot{ flex:none; border-top:1px solid var(--color-border); padding:var(--space-3) var(--space-6); font-size:14px; color:var(--color-text-muted); }
.qb-row{ display:grid; grid-template-columns:24px 44px minmax(0,1fr) auto; column-gap:var(--space-3); row-gap:2px; width:100%; text-align:left;
background:transparent; border:0; border-left:3px solid transparent; border-radius:var(--radius-control); padding:14px 12px 14px 13px; margin:0;
font:inherit; color:var(--color-text); cursor:pointer; transition:background-color .15s, border-color .15s; }
.qb-row:hover{ background:var(--color-raised); }
.qb-row[aria-current="true"]{ background:var(--color-primary-soft); border-left-color:var(--color-primary); border-radius:0 var(--radius-control) var(--radius-control) 0; }
.qb-row:focus-visible{ outline-offset:-2px!important; }
.qb-rst-ic{ grid-row:1 / span 2; align-self:start; margin-top:1px; color:var(--color-text-muted); display:inline-flex; }
.qb-rst-ic.ok{ color:var(--color-success); }
.qb-rst-ic.bad{ color:var(--color-danger); }
.qb-rst-ic.rev{ color:var(--color-revisit); }
.qb-rnum{ grid-row:1; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.qb-rmeta{ grid-row:1; display:flex; gap:6px; flex-wrap:wrap; align-items:center; min-width:0; }
.qb-chip{ display:inline-flex; align-items:center; padding:1px 9px; border-radius:999px; background:var(--color-sunken); color:var(--color-text); font-size:13px; font-weight:500; line-height:1.6; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qb-row[aria-current="true"] .qb-chip{ background:var(--color-surface); }
.qb-rst{ grid-row:1; grid-column:4; justify-self:end; font-size:14px; font-weight:500; white-space:nowrap; color:var(--color-text-muted); display:flex; gap:8px; align-items:center; }
.qb-rst .ok{ color:var(--color-success); font-weight:600; }
.qb-rst .bad{ color:var(--color-danger); font-weight:600; }
.qb-rst .rev{ color:var(--color-revisit); font-weight:600; }
.qb-rst .view{ color:var(--color-primary); font-weight:600; }
.qb-rst .bk{ color:var(--color-primary); display:inline-flex; }
.qb-rtx{ grid-row:2; grid-column:3 / span 2; font-size:15.5px; line-height:1.5; color:var(--color-text);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.qb-rtx mark, .qb-stem mark{ background:var(--mark-bg, var(--color-revisit-soft)); color:inherit; border-radius:2px; padding:0 1px; }
.qb-empty, .qb-err{ padding:var(--space-8) var(--space-6); text-align:center; color:var(--color-text-muted); }
.qb-empty b, .qb-err b{ display:block; color:var(--color-text); font-size:17px; margin-bottom:6px; }
.qb-empty .btn-s, .qb-err .btn-s{ margin-top:var(--space-4); }
.qb-skel{ padding:16px 14px; border-top:1px solid var(--color-border); }
.qb-skel:first-child{ border-top:0; }
.qb-skel i{ display:block; height:12px; border-radius:6px; background:var(--color-sunken); margin:8px 0; }
.qb-skel i:nth-child(1){ width:40%; } .qb-skel i:nth-child(2){ width:92%; } .qb-skel i:nth-child(3){ width:70%; }
.qb-more{ padding:12px; text-align:center; font-size:14px; color:var(--color-text-muted); }
/* ---- the selected question card ---- */
.qb-detail{ min-width:0; }
.qb-back{ display:none; }
.qb-card{ padding:var(--space-6); overflow:visible; }
.qb-chead{ display:flex; gap:var(--space-3) var(--space-4); align-items:flex-start; justify-content:space-between; flex-wrap:wrap; margin-bottom:var(--space-4); }
.qb-cid{ min-width:0; flex:1 1 220px; }
.qb-ident{ margin:0; font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--color-text); }
.qb-ctopic{ margin:2px 0 0; font-size:14px; color:var(--color-text-muted); }
.qb-cact{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.qb-aibtn{ border-radius:999px; min-height:44px; padding:0 16px; }
.qb-aibtn .qb-ic{ color:var(--color-primary); }
.qb-ib{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:var(--color-surface); color:var(--color-text);
border:1px solid var(--color-border); border-radius:var(--radius-control); cursor:pointer; transition:background-color .15s, border-color .15s, color .15s; }
.qb-ib:hover{ border-color:var(--color-control-border); }
.qb-ib:disabled{ opacity:.45; cursor:not-allowed; }
.qb-ib[aria-pressed="true"]{ background:var(--color-primary-soft); border-color:var(--color-primary); color:var(--color-primary); }
.qb-ib[aria-pressed="true"] .qb-ic{ fill:currentColor; }
.qb-ib.rev[aria-pressed="true"]{ background:var(--color-revisit-soft); border-color:var(--color-revisit); color:var(--color-revisit); }
.qb-pos{ font-size:14px; color:var(--color-text-muted); white-space:nowrap; padding:0 4px; font-variant-numeric:tabular-nums; }
.qb-sep{ width:1px; height:28px; background:var(--color-border); margin:0 2px; }
.qb-stemwrap{ background:var(--color-primary-soft); border-radius:var(--radius-control); padding:var(--space-4) var(--space-4); margin:0 0 var(--space-4); }
.qb-stem{ font-size:22px; font-weight:600; line-height:1.45; color:var(--color-text); overflow-wrap:anywhere; }
.qb-stem.long{ font-size:17.5px; font-weight:500; line-height:1.6; }
.qb-stem p{ margin:0 0 8px; } .qb-stem p:last-child{ margin-bottom:0; }
.qb-stem ul, .qb-stem ol{ margin:6px 0 8px 24px; } .qb-stem li{ margin:3px 0; }
.qb-stem table, .qb-ans table, .qb-analysis table{ border-collapse:collapse; width:100%; margin:12px 0; font-size:15px; display:block; overflow-x:auto; }
.qb-stem th, .qb-stem td, .qb-ans th, .qb-ans td, .qb-analysis th, .qb-analysis td{ border:1px solid var(--color-border); padding:7px 10px; text-align:left; vertical-align:top; }
.qb-stem th, .qb-ans th, .qb-analysis th{ background:var(--color-sunken); font-weight:600; }
.qb-stem img, .qb-ans img, .qb-analysis img{ max-width:100%; height:auto; }
.qb-stem, .qb-analysis, .qb-ans{ overflow-x:auto; }
.katex-display{ margin:10px 0!important; overflow-x:auto; overflow-y:hidden; max-width:100%; padding:4px 2px; }
.qb-meta-line{ font-size:14px; margin:8px 0 0; color:var(--color-primary); font-weight:600; }
.qb-revnote{ font-size:14px; margin:10px 0 0; color:var(--color-text); background:var(--color-revisit-soft); border-left:3px solid var(--color-revisit); border-radius:var(--radius-control); padding:8px 12px; }
.qb-prior{ font-size:14px; color:var(--color-text-muted); margin:0 0 var(--space-3); display:flex; align-items:center; gap:6px; }
/* CSAT passage */
.qb-dir{ font-size:14px; font-weight:600; color:var(--color-text-muted); margin:0 0 6px; white-space:pre-line; }
.qb-pass{ background:var(--color-raised); border:1px solid var(--color-border); border-left:3px solid var(--color-control-border); border-radius:var(--radius-control);
padding:14px 16px; margin:0 0 var(--space-4); font-size:16px; line-height:1.65; }
.qb-pass p{ margin:0 0 9px; } .qb-pass p:last-child{ margin:0; }
.qb-pl{ font-size:13px; font-weight:600; color:var(--color-text-muted); margin:0 0 6px; }
/* MCQ options: a native radio group, each row a large target */
.qb-opts{ border:0; margin:0 0 var(--space-4); padding:0; min-width:0; }
.qb-optrow{ display:flex; align-items:stretch; gap:var(--space-2); margin-bottom:var(--space-2); }
.qb-opt{ flex:1; min-width:0; display:flex; align-items:center; gap:var(--space-3); min-height:52px; padding:10px 14px; cursor:pointer;
background:var(--color-surface); border:1px solid var(--color-control-border); border-radius:var(--radius-control); font-size:17px; line-height:1.5;
transition:background-color .15s, border-color .15s, box-shadow .15s; }
.qb-opt:hover{ background:var(--color-raised); }
.qb-opt input{ width:20px; height:20px; margin:0; flex:none; accent-color:var(--color-primary); cursor:pointer; }
.qb-opt input:focus-visible{ outline:2px solid var(--color-primary)!important; outline-offset:3px; }
.qb-opt.is-sel, .qb-opt:has(input:checked){ border-color:var(--color-primary); background:var(--color-primary-soft); box-shadow:inset 0 0 0 1px var(--color-primary); }
.qb-letter{ flex:none; width:30px; height:30px; border-radius:999px; background:var(--color-sunken); color:var(--color-text); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; text-transform:uppercase; }
.qb-otx{ flex:1; min-width:0; overflow-wrap:anywhere; }
.qb-otx p{ margin:0; }
.qb-otag{ flex:none; font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.qb-opts .qb-opt.is-correct.is-correct{ border-color:var(--color-success); background:var(--color-primary-soft); box-shadow:inset 0 0 0 1px var(--color-success); }
.qb-opt.is-correct .qb-letter{ background:var(--color-success); color:var(--color-on-primary); }
.qb-opt.is-correct .qb-otag{ color:var(--color-success); }
.qb-opts .qb-opt.is-wrong.is-wrong{ border-color:var(--color-danger); background:var(--color-danger-soft); box-shadow:inset 0 0 0 1px var(--color-danger); }
.qb-opt.is-wrong .qb-letter{ background:var(--color-danger); color:var(--color-surface); }
.qb-opt.is-wrong .qb-otag{ color:var(--color-danger); }
.qb-opts.done .qb-opt{ cursor:default; }
.qb-opts.done .qb-opt:not(.is-correct):not(.is-wrong){ opacity:.75; }
.qb-optrow.struck .qb-opt{ opacity:.5; }
.qb-optrow.struck .qb-otx{ text-decoration:line-through; }
.qb-elim{ flex:none; width:44px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-muted); border-radius:var(--radius-control); cursor:pointer; font-size:14px; font-weight:700; }
.qb-elim:hover{ color:var(--color-danger); border-color:var(--color-danger); }
.qb-elim[aria-pressed="true"]{ color:var(--color-danger); border-color:var(--color-danger); background:var(--color-danger-soft); }
.qb-opts.done .qb-elim{ display:none; }
.qb-conf{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin:0 0 var(--space-4); font-size:15px; color:var(--color-text-muted); }
.qb-conf .qb-cl{ margin-right:var(--space-2); }
.qb-cpill{ min-height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--color-control-border); background:var(--color-surface); color:var(--color-text); font:500 15px var(--font-ui); cursor:pointer; transition:background-color .15s, border-color .15s; }
.qb-cpill:hover{ border-color:var(--color-primary); }
.qb-cpill[aria-pressed="true"]{ background:var(--color-primary); border-color:var(--color-primary); color:var(--color-on-primary); }
.qb-actions{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin:0 0 var(--space-2); }
.qb-actions .btn-p.is-off{ opacity:.55; cursor:not-allowed; }
.qb-actions .btn-p{ min-width:180px; min-height:48px; font-size:16px; }
.qb-hint{ font-size:14px; color:var(--color-text-muted); margin:0 0 var(--space-4); }
.qb-verdict{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:600; font-size:16px; padding:10px 14px; border-radius:var(--radius-control); margin:0 0 var(--space-4); }
.qb-verdict.ok{ background:var(--color-primary-soft); color:var(--color-success); }
.qb-verdict.no{ background:var(--color-danger-soft); color:var(--color-danger); }
.qb-verdict.warn{ background:var(--color-revisit-soft); color:var(--color-revisit); }
.qb-filed{ margin-left:4px; font-size:14px; font-weight:500; color:var(--color-text); }
/* accordions (Explanation / My notes) */
.qb-acc{ border:1px solid var(--color-border); border-radius:var(--radius-control); margin:0 0 var(--space-3); background:var(--color-surface); }
.qb-acch{ display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:52px; padding:10px 16px; background:none; border:0; text-align:left; cursor:pointer;
font:600 17px var(--font-ui); color:var(--color-text); border-radius:var(--radius-control); }
.qb-acch .chev{ transition:transform .18s; color:var(--color-text); }
.qb-acch[aria-expanded="false"] .chev{ transform:rotate(-90deg); }
.qb-acch[aria-disabled="true"]{ cursor:default; }
.qb-acch .qb-accm{ margin-left:auto; font-size:14px; font-weight:400; font-style:italic; color:var(--color-text-muted); }
.qb-accb{ padding:0 16px 16px; }
.qb-accb[hidden]{ display:none; }
/* explanation content (ported from prelims.html) */
.qb-analysis{ font-size:16px; line-height:1.65; }
.qb-analysis p{ margin:8px 0; }
.qb-analysis ul, .qb-analysis ol{ margin:8px 0 8px 22px; } .qb-analysis li{ margin:4px 0; }
.qb-analysis h4.ah{ font-size:16px; font-weight:600; margin:16px 0 6px; padding-bottom:4px; border-bottom:1px solid var(--color-border); }
.qb-analysis hr{ border:0; border-top:1px dashed var(--color-border); margin:14px 0; }
.qb-analysis blockquote{ border-left:3px solid var(--color-primary); background:var(--color-raised); margin:10px 0; padding:6px 14px; }
.qb-analysis code{ background:var(--color-sunken); padding:1px 5px; border-radius:4px; font-size:14px; }
.qb-drule, .qb-emove{ margin:12px 0; padding:11px 14px; border-radius:var(--radius-control); border:1px solid var(--color-border); border-left:4px solid var(--color-primary); background:var(--color-raised); }
.qb-emove{ border-left-color:var(--color-control-border); }
.qb-drule b, .qb-emove b{ display:block; font-size:13px; font-weight:700; color:var(--color-primary); margin-bottom:4px; }
.qb-emove b{ color:var(--color-text-muted); }
.qb-drule span{ font-weight:600; }
details.qb-asec{ border-top:1px solid var(--color-border); margin:12px 0 0; }
details.qb-asec summary{ cursor:pointer; list-style:none; font-weight:600; font-size:16px; padding:12px 2px; min-height:44px; display:flex; align-items:center; gap:8px; }
details.qb-asec summary::-webkit-details-marker{ display:none; }
details.qb-asec summary::before{ content:"\25B8"; color:var(--color-text-muted); transition:transform .15s; display:inline-block; }
details.qb-asec[open] summary::before{ transform:rotate(90deg); }
.qb-related{ margin-top:16px; border-top:1px dashed var(--color-border); padding-top:10px; }
.qb-related h4{ font-size:13px; font-weight:700; color:var(--color-text-muted); margin:0 0 6px; }
.qb-related button{ display:block; width:100%; text-align:left; background:none; border:0; padding:8px 0; font:15px var(--font-ui); color:var(--color-text); cursor:pointer; }
.qb-related button:hover{ color:var(--color-primary); }
.qb-loading{ color:var(--color-text-muted); padding:12px 0; }
/* CSAT reveal */
.route{ border:1px solid var(--color-border); border-radius:var(--radius-control); overflow:hidden; margin:12px 0; }
.route h5{ margin:0; padding:10px 14px; font-size:15px; font-weight:700; background:var(--color-revisit-soft); color:var(--color-text); border-bottom:1px solid var(--color-border); }
.route .rb{ padding:12px 14px; font-size:15.5px; line-height:1.6; }
.route .rb + .rb{ border-top:1px dashed var(--color-border); }
.route .rlab{ font-weight:600; }
.secs{ float:right; font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; color:var(--color-revisit); background:var(--color-revisit-soft); border-radius:9px; padding:1px 9px; margin-left:8px; }
.rnone{ color:var(--color-text-muted); font-style:italic; }
.verd{ display:inline-block; padding:3px 11px; border-radius:10px; font-size:13px; font-weight:700; }
.verd.take{ background:var(--color-primary-soft); color:var(--color-success); }
.verd.tif{ background:var(--color-revisit-soft); color:var(--color-revisit); }
.verd.skip{ background:var(--color-danger-soft); color:var(--color-danger); }
.nosol{ padding:13px 15px; background:var(--color-raised); border:1px dashed var(--color-border); border-radius:var(--radius-control); color:var(--color-text-muted); }
.cs2 .sec{ padding:13px 15px; border-top:1px dashed var(--color-border); font-size:15.5px; line-height:1.65; }
.cs2 .sec:first-of-type{ border-top:0; }
.cs2 .lab{ display:block; font-size:13px; font-weight:700; color:var(--color-text-muted); margin:0 0 6px; }
.cs2 .demand{ font-size:16px; font-weight:700; }
.cs2 .says{ background:var(--color-raised); border-left:3px solid var(--color-control-border); padding:10px 13px; border-radius:0 6px 6px 0; }
.cs2 .quote{ font-style:italic; color:var(--color-text-muted); }
.cs2 ol.steps{ margin:0; padding:0 0 0 4px; list-style:none; counter-reset:st; }
.cs2 ol.steps li{ counter-increment:st; position:relative; padding:0 0 13px 34px; }
.cs2 ol.steps li::before{ content:counter(st); position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:var(--color-primary); color:var(--color-on-primary); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.cs2 .do{ display:block; font-weight:600; }
.cs2 .whyy{ display:block; margin-top:3px; font-size:14.5px; color:var(--color-text-muted); }
.cs2 table.opts2{ width:100%; border-collapse:collapse; font-size:15px; }
.cs2 table.opts2 td{ padding:9px 10px; border-top:1px solid var(--color-border); vertical-align:top; }
.cs2 table.opts2 tr:first-child td{ border-top:0; }
.cs2 table.opts2 .ol{ width:34px; font-weight:600; } .cs2 table.opts2 .ov{ width:26px; font-weight:700; }
.cs2 tr.ok{ background:var(--color-primary-soft); } .cs2 tr.ok .ov{ color:var(--color-success); } .cs2 tr.no .ov{ color:var(--color-danger); }
.cs2 .stv{ margin:0 0 9px; } .cs2 .stv .vv{ font-weight:700; font-size:13px; }
.cs2 .stv .vv.valid{ color:var(--color-success); } .cs2 .stv .vv.invalid{ color:var(--color-danger); }
.cs2 .take{ background:var(--color-raised); border-top:1px solid var(--color-border); padding:12px 15px; }
.cs2 .foot{ padding:9px 15px; border-top:1px solid var(--color-border); font-size:14px; color:var(--color-text-muted); }
/* ---- descriptive (Mains / Optional): decode, write, self-check, model answer ---- */
.qb-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 0; }
.qb-caseq{ border-left:3px solid var(--color-control-border); padding:2px 0 2px 14px; margin:0 0 var(--space-4); font-size:16px; line-height:1.65; }
.qb-step{ margin:0 0 var(--space-4); }
.qb-stephd{ display:flex; align-items:center; gap:10px; width:100%; min-height:48px; text-align:left; padding:10px 14px; cursor:pointer;
background:var(--color-raised); border:1px solid var(--color-control-border); border-radius:var(--radius-control); font:600 16px var(--font-ui); color:var(--color-text); }
.qb-stephd .chev{ margin-left:auto; transition:transform .18s; }
.qb-stephd[aria-expanded="false"] .chev{ transform:rotate(-90deg); }
.qb-stepnote{ font-size:14px; color:var(--color-text-muted); margin:8px 2px; }
.qb .decode{ margin-top:8px; border-left-color:var(--color-primary); }
.qb-wlabel{ display:block; font-weight:600; font-size:17px; margin:0 0 8px; }
.qb-answerbox{ width:100%; min-height:160px; border:1px solid var(--color-control-border); border-radius:var(--radius-control); padding:12px 14px;
font:400 16px/1.6 var(--font-ui); background:var(--color-surface); color:var(--color-text); resize:vertical; }
.qb-answerbox:focus{ border-color:var(--color-primary); }
.qb-wc{ position:sticky; bottom:0; font-size:14px; font-weight:600; color:var(--color-text-muted); text-align:right; padding:6px 0; background:var(--color-surface); margin:0 0 6px; }
.qb-wc.at{ color:var(--color-revisit); } .qb-wc.over{ color:var(--color-danger); }
.wlnote{ font-size:14px; font-weight:600; color:var(--color-danger); margin:0 0 8px; text-align:right; }
.qb-editbar{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin:0 0 var(--space-3); }
.qb-note-s{ font-size:14px; color:var(--color-text-muted); }
.aivbtn{ min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--color-primary)!important; background:var(--color-surface)!important; color:var(--color-primary)!important; font:600 15px var(--font-ui)!important; cursor:pointer; }
.qb-ans{ font-size:16px; line-height:1.7; margin:0 0 var(--space-4); }
.qb-ans[hidden]{ display:none; }
.qb-ans p, .qb-ans li, .qb-ans blockquote, .qb-ans h2, .qb-ans h3, .qb-ans h4, .qb-ans .mdsub{ max-width:42em; }
.qb-ans h2, .qb-ans h3, .qb-ans h4{ font-weight:600; margin:20px 0 6px; line-height:1.35; }
.qb-ans h2{ font-size:19px; border-bottom:1px solid var(--color-border); padding-bottom:5px; }
.qb-ans h3{ font-size:17px; } .qb-ans h4{ font-size:16px; }
.qb-ans p{ margin:10px 0; }
.qb-ans .mdsub{ font-weight:600; margin:16px 0 4px; }
.qb-ans ul, .qb-ans ol{ margin:8px 0 8px 22px; } .qb-ans li{ margin:4px 0; }
.qb-ans hr{ border:0; border-top:1px dashed var(--color-border); margin:14px 0; }
.qb-ans blockquote{ border-left:3px solid var(--color-control-border); margin:10px 0; padding:2px 0 2px 14px; }
.qb-ans code{ background:var(--color-sunken); padding:1px 5px; border-radius:4px; font-size:14px; }
.qb-subhd{ font-size:14px; font-weight:700; color:var(--color-text-muted); margin:16px 0 6px; }
.youranswer{ border-left:3px solid var(--color-control-border); padding:2px 0 2px 14px; white-space:pre-wrap; margin:8px 0; }
.covnote{ font-size:16px; font-weight:600; margin:10px 0 4px; line-height:1.6; }
.estimate{ font-size:14px; color:var(--color-text-muted); margin:0 0 8px; }
.checklist{ margin-bottom:8px; }
.ckitem{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--color-border); font-size:16px; line-height:1.55; cursor:pointer; }
.ckitem:last-child{ border-bottom:0; }
.ckbox{ width:22px; height:22px; border:1px solid var(--color-control-border); border-radius:4px; flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--color-text-muted); background:var(--color-surface); margin-top:1px; }
.ckitem.on .ckbox{ background:var(--color-success); border-color:var(--color-success); color:var(--color-on-primary); }
.ckitem.part .ckbox{ background:var(--color-revisit-soft); border-color:var(--color-revisit); color:var(--color-revisit); }
.ckitem .cktx{ color:var(--color-text-muted); } .ckitem.on .cktx, .ckitem.part .cktx{ color:var(--color-text); font-weight:600; }
.ckst{ font-size:12.5px; font-weight:600; color:var(--color-text-muted); white-space:nowrap; }
.ckitem.on .ckst{ color:var(--color-success); } .ckitem.part .ckst{ color:var(--color-revisit); }
.qb-tabs{ display:flex; flex-wrap:wrap; margin:16px 0 4px; border-bottom:1px solid var(--color-border); }
.qb-tab{ appearance:none; font:600 15px var(--font-ui); padding:10px 16px; min-height:44px; border:0; border-bottom:3px solid transparent; margin-bottom:-1px; background:none; color:var(--color-text-muted); cursor:pointer; }
.qb-tab[aria-selected="true"]{ color:var(--color-primary); border-bottom-color:var(--color-primary); }
.qb-panel[hidden]{ display:none; }
/* My notes */
.qb-nform textarea{ width:100%; min-height:90px; border:1px solid var(--color-control-border); border-radius:var(--radius-control); padding:10px 12px; font:400 16px/1.5 var(--font-ui); background:var(--color-surface); color:var(--color-text); resize:vertical; }
.qb-nrow{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-2); flex-wrap:wrap; }
.qb-nmsg{ font-size:14px; color:var(--color-success); font-weight:600; }
.qb-nmsg.err{ color:var(--color-danger); }
.qb-nlist{ list-style:none; margin:var(--space-3) 0 0; padding:0; }
.qb-nlist li{ border-top:1px solid var(--color-border); padding:10px 0; font-size:15px; white-space:pre-wrap; overflow-wrap:anywhere; }
.qb-nlist time{ display:block; font-size:13px; color:var(--color-text-muted); white-space:normal; }
.qb-nhead{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); white-space:normal; }
.qb-ndel{ flex:none; min-height:36px; padding:0 12px; border-radius:var(--radius-control); border:1px solid transparent; background:transparent; color:var(--color-danger); font:600 14px var(--font-ui); cursor:pointer; }
.qb-ndel:hover{ border-color:var(--color-danger); }
.qb-nconf{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); padding:8px 10px; border-radius:var(--radius-control); background:var(--color-danger-soft); white-space:normal; font-size:14px; }
.qb-nconf[hidden]{ display:none; }
.qb-nconf span{ flex:1 1 180px; }
.qb-ndanger{ color:var(--color-danger); border-color:var(--color-danger); }
.qb-nall{ font-size:14px; color:var(--color-primary); font-weight:600; text-decoration:none; }
.qb-placeholder{ padding:var(--space-12) var(--space-6); text-align:center; color:var(--color-text-muted); }
.qb-placeholder b{ display:block; color:var(--color-text); font-size:18px; margin-bottom:6px; }
#expans:not(:empty), #disc:not(:empty){ margin-top:var(--space-4); }
/* ---- medium + small screens: browse view, then a full-width detail view ---- */
@media (max-width:1023px){
.qb-work{ display:block; }
.qb-listpane{ position:relative; top:auto; height:calc(100dvh - var(--appbar-h) - 140px); min-height:380px; }
.qb-detail{ display:none; }
body.qb-open .qb-listpane{ display:none; }
body.qb-open .qb-detail{ display:block; }
body.qb-open .qb-head, body.qb-open .qb-fwrap, body.qb-open .qb-notes, body.qb-open .lockbar{ display:none; }
.qb-back{ display:inline-flex; margin:0 0 var(--space-3) -8px; padding:0 8px; color:var(--color-primary); font-weight:600; }
}
@media (max-width:760px){
.qb-head{ align-items:stretch; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-3); }
.qb-fbtn{ display:inline-flex; min-height:44px; }
.qb-fexam{ display:inline-block; margin-left:var(--space-3); font-weight:600; font-size:15px; color:var(--color-text); vertical-align:middle; }
.qb-fbtn[aria-expanded="true"]{ border-color:var(--color-primary); color:var(--color-primary); }
.qb-filters{ display:none; }
body.qb-filtopen .qb-filters{ display:flex; flex-direction:column; align-items:stretch; gap:var(--space-3); margin-top:var(--space-3);
padding:var(--space-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
body.qb-filtopen .qb-filters .sel{ width:100%; max-width:none; min-width:0; font-size:16px; }
body.qb-filtopen .qb-reset{ align-self:flex-start; }
body.qb-filtopen .qb-fdone{ display:inline-flex; width:100%; }
.qb-lhead{ padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
.qb-lhead h2{ font-size:19px; }
.qb-lfoot{ padding:var(--space-3) var(--space-4); }
.qb-row{ grid-template-columns:20px auto minmax(0,1fr); padding:12px 8px 12px 9px; column-gap:var(--space-2); }
.qb-rnum{ grid-column:2; }
.qb-rmeta{ grid-column:3; }
.qb-rst{ grid-row:3; grid-column:2 / span 2; justify-self:start; font-size:13.5px; }
.qb-rtx{ grid-column:2 / span 2; font-size:15px; }
.qb-card{ padding:var(--space-4); }
.qb-stem{ font-size:19px; } .qb-stem.long{ font-size:16.5px; }
.qb-stemwrap{ padding:var(--space-3); }
.qb-opt{ font-size:16px; padding:10px 12px; }
.qb-acch{ font-size:16px; }
.qb-cact{ width:100%; }
.qb-cact .qb-aibtn{ flex:1 1 auto; }
}
@media (max-width:400px){
.qb-sep{ display:none; }
.qb-filters #qb-exam{ min-width:0; }
}
@media (prefers-reduced-motion:reduce){
.qb-row, .qb-opt, .qb-ib, .qb-acch .chev, .qb-stephd .chev{ transition:none; }
}
/* the hidden attribute must beat the display rules above */
.qb [hidden]{ display:none!important; }