/* =================================================================
   Kestrel Exams — shared engine styles (app-core)
   Extracted unchanged from the former per-app inline <style> block.
   Per-exam brand variables here are overridable defaults: each thin
   shell (app/, app-nclex/, ...) supplies its own small inline <style>
   AFTER the <link> to this file, overriding just:
     :root{--brand;--brand-dark;--brand-tint;--on-brand-tint}
     [data-theme="dark"]{ same four }
     #splash{background:...}  and  #splash .go{color:...}
   so first paint is already branded before engine.js runs.
   ================================================================= */
:root{
  --brand:#C8102E; --brand-dark:#9E0C24; --brand-tint:#FBEAEC; --on-brand-tint:#9E0C24;
  --ink:#23272E; --body:#3A3F47; --slate:#5C6069;
  --page:#F5F6F8; --card:#FFFFFF; --line:#E4E6EA; --line-2:#EEF0F3;
  --good:#1E8E5A; --good-tint:#EAF5EF; --good-ink:#1B5E3F;
  --amber:#E8A400; --amber-tint:#FCF3DD;
  --miss:#D64545; --miss-tint:#FBECEC; --miss-ink:#8A2B2B;
  --radius:12px; --tabh:64px; --fs:16px;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}
[data-theme="dark"]{
  --brand:#E4243C; --brand-dark:#B51C30; --brand-tint:#2A171A; --on-brand-tint:#F3A9B2;
  --ink:#E8EAED; --body:#C5C9D0; --slate:#9AA0AA;
  --page:#15171C; --card:#1E2127; --line:#2C313A; --line-2:#262A31;
  --good:#35B27C; --good-tint:#16241D; --good-ink:#7FD3AB;
  --amber:#E8B23A; --amber-tint:#2A2413;
  --miss:#E0605F; --miss-tint:#2A1717; --miss-ink:#E9938F;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,select:focus-visible,[tabindex]:focus-visible,.opt:focus-visible,.switch:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:8px}
.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}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--page);color:var(--body);font-size:var(--fs);line-height:1.5;min-height:100dvh;-webkit-font-smoothing:antialiased;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.view{flex:1;padding:16px 16px calc(var(--tabh) + 24px);display:none}
.view.active{display:block}
.brandbar{display:flex;align-items:center;gap:10px;padding:14px 16px 6px;position:sticky;top:0;background:var(--page);z-index:5}
.mark{width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:700;flex:0 0 auto}
.mark svg{width:20px;height:20px}
.brandbar h1{font-size:16px;margin:0;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.brandbar p{margin:0;font-size:11px;color:var(--slate)}
.grow{flex:1}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--slate);display:grid;place-items:center;cursor:pointer}
.iconbtn.sharebtn{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(16,17,20,.18)}
.iconbtn.sharebtn:hover{filter:brightness(.92)}
.iconbtn.sharebtn:active{transform:translateY(1px)}
.exitbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 9px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--body);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.exitbtn:hover{border-color:var(--brand);color:var(--brand)}
.exitbtn svg{width:16px;height:16px}
/* Keep Exit/progress reachable in long sessions — sticks just under the brandbar.

   The bar MUST read as a bar. Its background is --page, and so is the background of
   every <pre> code listing, so without an edge the two are the same colour: a long
   code block scrolling underneath looked sliced in half, and the question card's own
   border was cut by an invisible band. Reported from the Java app, where the tall
   listings make it obvious, but it affected every pack.

   The hairline plus the short downward shadow are what say "content passes under
   here". Do not remove them without giving the bar some other visible edge. */
#v-quiz .qhead:first-of-type{position:sticky;top:54px;z-index:4;background:var(--card);
  padding:8px 0;margin:0 -16px;padding-left:16px;padding-right:16px;
  border-bottom:1px solid var(--line);box-shadow:0 6px 10px -7px rgba(16,22,34,.30)}
#v-quiz.session-paused .qhead:first-of-type{opacity:1;pointer-events:auto}
#v-results .results-exit{position:sticky;top:54px;z-index:4;background:var(--card);
  padding:8px 0;margin:0 -16px;padding-left:16px;padding-right:16px;
  border-bottom:1px solid var(--line);box-shadow:0 6px 10px -7px rgba(16,22,34,.30)}
/* On a dark page a light-tinted shadow is invisible; deepen it instead. */
[data-theme="dark"] #v-quiz .qhead:first-of-type,
[data-theme="dark"] #v-results .results-exit{box-shadow:0 6px 12px -7px rgba(0,0,0,.65)}

/* The first line of a question must never start life underneath the sticky bar when
   the engine scrolls a new question into view. 54px brandbar + ~50px qhead + air. */
#v-quiz .qcard,#v-quiz .qtext{scroll-margin-top:118px}
.iconbtn svg{width:18px;height:18px}
.iconbtn.sharebtn svg{width:20px;height:20px}
.app-updates{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;font-weight:700}
.app-updates a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:3px}
.app-updates a:hover{color:var(--brand)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
h2.sec{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin:18px 2px 8px;font-weight:600}
.muted{color:var(--slate);font-size:13px}
.mode{display:flex;gap:13px;align-items:center;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px;margin-bottom:11px;cursor:pointer;transition:border-color .15s,transform .05s;font:inherit;color:inherit}
.mode:active{transform:scale(.99)}
.mode:hover{border-color:var(--brand)}
.mode .mi{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
.mode .mi svg{width:22px;height:22px}
.mode .mt{flex:1}
.mode .mt b{display:block;color:var(--ink);font-size:15px;font-weight:600}
.mode .mt span{font-size:12.5px;color:var(--slate)}
.mode .chev{color:var(--slate)}
.mi.study{background:var(--good-tint);color:var(--good)}
.mi.exam{background:var(--brand-tint);color:var(--brand)}
.mi.review{background:var(--amber-tint);color:var(--amber)}
.field{font-size:12px;color:var(--slate);margin:12px 2px 6px;display:block;font-weight:500}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-width:52px;padding:9px 8px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--body);font:inherit;font-size:13px;cursor:pointer}
.seg button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.domchecks{display:flex;flex-wrap:wrap;gap:7px}
.domchk{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:12.5px;background:var(--card);color:var(--body);cursor:pointer;user-select:none;transition:border-color .12s,background .12s}
.domchk input{accent-color:var(--brand);width:15px;height:15px;margin:0;flex:0 0 auto}
.domchk:hover{border-color:var(--brand)}
.domchk.on{border-color:var(--brand);background:var(--brand-tint);color:var(--on-brand-tint);font-weight:600}
/* Section-grouped topic picker. Applies ONLY when engine.js adds .grouped —
   a pack without a section tier keeps the original single wrapping flex row
   above, untouched. Sections are separated by a rule rather than boxed, so the
   picker stays a list of chips and does not read as nested cards. */
.domchecks.grouped{display:block}
.domchecks.grouped>.domchk{margin:0 0 12px}
.domgroup{border-top:1px solid var(--line-2);padding-top:11px;margin-bottom:12px}
.domgroup:last-child{margin-bottom:0}
.domsec{display:inline-flex;align-items:center;gap:7px;padding:1px 0;font-size:12.5px;font-weight:600;color:var(--body);cursor:pointer;user-select:none}
.domsec input{accent-color:var(--brand);width:15px;height:15px;margin:0;flex:0 0 auto}
.domsec.on,.domsec.part{color:var(--brand-dark)}
.domsec em{font-style:normal;font-size:11px;color:var(--slate);margin-left:5px;font-variant-numeric:tabular-nums}
.domgroup-b{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.alllink{text-align:center;font-size:12.5px;margin:14px 0 0}
.alllink a{color:var(--slate);text-decoration:underline}
.alllink a:hover{color:var(--brand)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:11px;border:1px solid transparent;background:var(--brand);color:#fff;font:inherit;font-weight:600;font-size:15px;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.sec{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--slate)}
.btn.line{background:var(--card);border-color:var(--brand);color:var(--brand)}
.btn svg{width:17px;height:17px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btnrow{display:flex;gap:10px}
.btnrow .btn{width:auto;flex:1}
.qhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.chip{background:var(--brand-tint);color:var(--on-brand-tint);font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.chip.n{background:var(--line-2);color:var(--slate)}
.prog{height:6px;background:var(--line-2);border-radius:999px;overflow:hidden;flex:1}
.prog > i{display:block;height:100%;background:var(--brand);width:0;transition:width .2s}
.timer{font-variant-numeric:tabular-nums;color:var(--slate);font-size:13px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.timer svg{width:14px;height:14px}
.qtext{color:var(--ink);font-size:16px;font-weight:400;line-height:1.55;margin:6px 0 14px;white-space:pre-wrap}
.qmedia{margin:-2px 0 15px}.qmedia.hidden{display:none}.qfigure{margin:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--page)}.qfigure img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;background:#fff}.qfigure figcaption{padding:9px 11px;color:var(--slate);font-size:12px;line-height:1.45;border-top:1px solid var(--line)}
pre{background:var(--page);border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--ink);white-space:pre}
.opts{display:flex;flex-direction:column;gap:9px}

/* ---- matrix (grid) items -------------------------------------------
   Horizontally scrollable on narrow screens rather than shrunk: a grid
   squeezed under ~340px stops being tappable. Row headers stay pinned so
   the row stays identifiable while scrolling across columns. */
.matrix{width:100%;border-collapse:collapse;margin:2px 0 4px;font-size:.95rem;display:block;overflow-x:auto}
.matrix caption{text-align:left;padding:0 0 8px;color:var(--muted);font-size:.86rem}
.matrix th,.matrix td{border:1px solid var(--line);padding:10px 12px;text-align:center;vertical-align:middle}
.matrix thead th{background:var(--card2);font-weight:650;font-size:.86rem;line-height:1.25}
.matrix tbody th[scope=row]{text-align:left;font-weight:500;min-width:170px;position:sticky;left:0;background:var(--card);z-index:1}
.matrix .mx-corner{background:var(--card2);min-width:170px;position:sticky;left:0;z-index:2}
.matrix td input[type=radio]{width:22px;height:22px;accent-color:var(--accent);cursor:pointer;margin:0}
.matrix td input[type=radio]:disabled{cursor:default}
/* Review state is carried by the Result column in words. Colour here is a
   secondary cue only — never the sole signal. */
.matrix td.correct{background:var(--okBg,rgba(46,125,50,.13))}
.matrix td.wrong{background:var(--badBg,rgba(198,40,40,.13))}
.matrix .mx-state{text-align:left;font-size:.84rem;line-height:1.35;min-width:150px}
.matrix.locked tbody th[scope=row]{color:var(--muted)}
@media (max-width:520px){
  .matrix th,.matrix td{padding:8px 9px}
  .matrix tbody th[scope=row],.matrix .mx-corner{min-width:135px}
}
.opt{display:flex;gap:11px;align-items:flex-start;padding:13px;border:1.5px solid var(--line);border-radius:11px;background:var(--card);cursor:pointer;transition:border-color .12s,background .12s;font:inherit;color:inherit;text-align:left;width:100%;white-space:normal}
.opt:hover{border-color:var(--brand)}
.opt .key{width:25px;height:25px;border-radius:7px;background:var(--line-2);color:var(--slate);display:grid;place-items:center;font-size:12px;font-weight:600;flex:0 0 auto}
.opt .otext{flex:1;font-size:14px;color:var(--body);padding-top:2px}
.opt .res{width:18px;flex:0 0 auto;display:grid;place-items:center}
.opt .res svg{width:18px;height:18px}
.opt.sel{border-color:var(--brand);background:var(--brand-tint)}
.opt.sel .key{background:var(--brand);color:#fff}
.opt.correct{border-color:var(--good);background:var(--good-tint)}
.opt.correct .key{background:var(--good);color:#fff}
.opt.correct .otext{color:var(--good-ink)}
.opt.wrong{border-color:var(--miss);background:var(--miss-tint)}
.opt.wrong .key{background:var(--miss);color:#fff}
.opt.wrong .otext{color:var(--miss-ink)}
.opt.locked{pointer-events:none}
/* Per-option review state, shown only after an answer is locked. Spec section
   10 requires each selected/keyed/mismatched state to be exposed IN TEXT, not
   by colour or icon alone — the check/x glyphs are aria-hidden and colour is
   not perceivable by every learner. Inherits the option's colour so it reads
   as part of that row rather than as new chrome. */
.optstate{display:block;margin-top:3px;font-size:11.5px;font-weight:600;letter-spacing:.01em;opacity:.85}
.explain{margin-top:13px;padding:13px;border-radius:10px;background:var(--page);border:1px solid var(--line)}
.explain .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);margin-bottom:4px}
.explain p{margin:0 0 8px;font-size:13.5px;color:var(--body)}
.explain .rat{font-size:12.5px;color:var(--slate);margin:5px 0}
.explain .rat b{color:var(--ink)}
.qbar{display:flex;gap:9px;margin-top:15px;align-items:center}
.flagbtn{width:46px;height:46px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--slate);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.flagbtn svg{width:19px;height:19px}
.flagbtn.on{color:var(--amber);border-color:var(--amber);background:var(--amber-tint)}
.navtoggle{display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--body);font:inherit;font-size:13px;cursor:pointer;margin-top:10px}
.navtoggle .nc{margin-left:auto;color:var(--ink);font-weight:600;font-size:12px}
.navtoggle .cv{display:inline-flex;color:var(--slate);transition:transform .15s}
.navtoggle .cv svg{width:16px;height:16px}
.navtoggle.open .cv{transform:rotate(180deg)}
.navgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:6px;margin-top:8px}
.navgrid button{height:32px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--body);font:inherit;font-size:11px;cursor:pointer;position:relative;padding:0}
.navgrid button.answered{background:var(--brand);border-color:var(--brand);color:#fff}
.navgrid button.marked{border-color:var(--amber);border-width:2px}
.navgrid button.cur{outline:2px solid var(--ink);outline-offset:1px}
.scorewrap{text-align:center;padding:6px 0}
.bignum{font-size:44px;font-weight:700;color:var(--ink);line-height:1.1}
.verdict{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;padding:6px 14px;border-radius:999px;margin-top:6px}
.verdict.pass{background:var(--good-tint);color:var(--good-ink)}
.verdict.fail{background:var(--miss-tint);color:var(--miss-ink)}
.bars{display:flex;flex-direction:column;gap:10px}
.barrow{font-size:13px}
.barrow .top{display:flex;justify-content:space-between;margin-bottom:4px;color:var(--body)}
.barrow .top b{color:var(--ink);font-weight:600}
.track{height:8px;background:var(--line-2);border-radius:999px;overflow:hidden}
.track > i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.track > i.g{background:var(--good)}
.track > i.a{background:var(--amber)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{background:var(--page);border-radius:10px;padding:12px}
.stat .n{font-size:22px;font-weight:700;color:var(--ink)}
.stat .l{font-size:12px;color:var(--slate)}
.gauge{display:flex;align-items:center;gap:14px}
.gauge svg{width:88px;height:88px;flex:0 0 auto}
.gauge .gt b{display:block;font-size:19px;color:var(--ink);font-weight:700}
.gauge .gt span{font-size:12.5px;color:var(--slate)}
.trend{display:flex;align-items:flex-end;gap:6px;height:96px;padding-top:6px}
.trend .tb{flex:1;background:var(--brand);border-radius:5px 5px 0 0;min-height:4px;position:relative}
.trend .tb.g{background:var(--good)} .trend .tb.a{background:var(--amber)} .trend .tb.r{background:var(--miss)}
.trend .tb span{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--slate)}
.revrow{border:1px solid var(--line);border-radius:11px;padding:13px;margin-bottom:10px}
.revrow .rh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}
.pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.pill.ok{background:var(--good-tint);color:var(--good-ink)} .pill.no{background:var(--miss-tint);color:var(--miss-ink)}
.pill.fl{background:var(--amber-tint);color:var(--amber)}
.setrow{display:flex;align-items:center;justify-content:space-between;padding:13px 2px;border-bottom:1px solid var(--line-2)}
.setrow:last-child{border-bottom:none}
.setrow .sl b{display:block;color:var(--ink);font-size:14px;font-weight:500}
.setrow .sl span{font-size:12px;color:var(--slate)}
.switch{width:46px;height:27px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;flex:0 0 auto;transition:background .15s;border:none;padding:0}
.switch.on{background:var(--brand)}
.switch i{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on i{left:22px}
.tabs{position:fixed;bottom:0;left:0;right:0;height:calc(var(--tabh) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--line);display:flex;z-index:10}
.tabs .inner{max-width:520px;margin:0 auto;width:100%;display:flex}
.tab{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--slate);font:inherit;font-size:10.5px;cursor:pointer;padding:8px 0}
.tab svg{width:22px;height:22px}
.tab.on{color:var(--brand);font-weight:600}
.disclaim{font-size:11px;color:var(--slate);line-height:1.55;padding:8px 4px 0}
.disclaim.ai{color:var(--body)}
.empty{text-align:center;color:var(--slate);padding:30px 10px;font-size:14px}
.empty svg{width:40px;height:40px;opacity:.4;margin-bottom:8px}
.hidden{display:none!important}
#splash{position:fixed;inset:0;z-index:200;background:linear-gradient(160deg,#C8102E 0%,#9E0C24 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 26px;transition:opacity .45s ease}
#splash.hide{opacity:0;pointer-events:none}
#splash .splash-core{display:flex;flex-direction:column;align-items:center;transform:translateY(clamp(42px,9vh,90px))}
#splash .smark{width:74px;height:74px;border-radius:20px;background:rgba(255,255,255,.14);display:grid;place-items:center;margin-bottom:14px}
#splash .smark svg{width:48px;height:48px;color:#fff}
#splash .seyebrow{font-size:10px;font-weight:700;letter-spacing:.24em;color:#fff;opacity:1;margin-bottom:3px}
#splash .smark span{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.02em}
#splash h1{font-size:28px;font-weight:800;color:#fff;margin:0;letter-spacing:-.02em;line-height:1.1}
#splash .tag{font-size:12px;color:#fff;opacity:1;margin:6px 0 18px}
#splash .spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#splash .go{margin-top:18px;background:#fff;color:#9E0C24;border:none;border-radius:10px;padding:10px 18px;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
#splash .foot{position:absolute;left:24px;right:24px;bottom:calc(18px + env(safe-area-inset-bottom));font-size:10px;line-height:1.5;color:#fff;opacity:1;max-width:420px;margin:0 auto}
#splash .foot .ai{font-weight:500;margin-bottom:6px}
@media (max-height:650px){#splash .splash-core{transform:translateY(32px)}#splash .foot{font-size:9px;bottom:12px}}
@media (prefers-reduced-motion: reduce){#splash{transition:none}#splash .spin{animation:none}}
.reportbtn{background:none;border:none;color:var(--slate);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;padding:6px}
.reportbtn:hover{color:var(--brand)}

/* NCLEX Simulator setup is hidden behind its pack-level feature flag. */
.sim-brand{margin:0 -14px 14px;padding-top:4px}.sim-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px;margin-bottom:13px}.sim-kicker{margin:0 0 10px;color:var(--slate);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.sim-presets{display:grid;gap:8px}.sim-preset{width:100%;display:block;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--body);font:inherit;cursor:pointer}.sim-preset:hover,.sim-preset.on{border-color:var(--brand);background:var(--brand-tint)}.sim-preset b{display:block;color:var(--ink);font-size:14px}.sim-preset span{display:block;margin-top:3px;color:var(--slate);font-size:12px;line-height:1.4}.sim-boundary{margin:12px 0 0;padding:10px 11px;border-left:3px solid var(--brand);background:var(--page);border-radius:0 8px 8px 0;color:var(--body);font-size:12px;line-height:1.45}.sim-row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line-2)}.sim-row:last-child{border-bottom:0}.sim-row>div{min-width:0}.sim-row b,.sim-field>b,.sim-format>b{display:block;color:var(--ink);font-size:13px;font-weight:650}.sim-row span,.sim-field>span{display:block;margin-top:2px;color:var(--slate);font-size:12px;line-height:1.4}.sim-edit-domains{width:auto;padding:8px 12px;font-size:12px;flex:0 0 auto}.sim-field{padding:12px 0;border-bottom:1px solid var(--line-2)}.sim-seg-wrap{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.sim-seg{min-width:58px;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:8px 9px;color:var(--body);font:inherit;font-size:12px;cursor:pointer}.sim-seg.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}.sim-static{display:inline-block;margin:0!important;padding:5px 8px;border-radius:999px;background:var(--brand-tint);color:var(--on-brand-tint)!important;font-size:11px!important;font-weight:700;white-space:nowrap}.sim-advanced{margin-top:13px;border:1px solid var(--line);border-radius:10px;background:var(--card)}.sim-advanced summary{cursor:pointer;padding:12px 13px;color:var(--ink);font-weight:650;font-size:13px}.sim-advanced-inner{padding:0 13px 13px}.sim-format{display:flex;flex-direction:column;gap:7px;padding:10px 0 13px;border-bottom:1px solid var(--line-2)}.sim-format label{color:var(--slate);font-size:12px}.sim-format input{accent-color:var(--brand)}.sim-format input:disabled{opacity:1}.sim-format p,.sim-local{margin:4px 0 0;color:var(--slate);font-size:11.5px;line-height:1.45}.sim-actions{margin-top:14px}.pause-notice{margin:0 0 12px;padding:11px 12px;border:1px solid var(--amber);border-radius:10px;background:var(--amber-tint);color:var(--body);font-size:12px}.pause-notice b{display:block;color:var(--ink)}.pause-notice span{display:block;margin-top:2px}.session-paused #qDomain,.session-paused #qText,.session-paused #qMedia,.session-paused #qOpts,.session-paused #qFeedback,.session-paused .qbar,.session-paused #qReport,.session-paused #examNavWrap{opacity:.48;pointer-events:none;user-select:none}.session-paused #qPause{opacity:1;pointer-events:auto}
html[data-kestrel-reduced-motion="true"] *,html[data-kestrel-reduced-motion="true"] *::before,html[data-kestrel-reduced-motion="true"] *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}

/* =================================================================
   ADAPTIVE LAYER — added 2026-08-11
   -----------------------------------------------------------------
   Ported from the Cruising Costs v1.7.8 pattern. Before this block the
   engine was a fixed 520px phone column with a single content
   breakpoint, so tablets and desktops rendered a narrow strip and
   large phones wasted their width.

   Four mechanisms, in the order they matter:
     1. --kx-shell    fluid container width, widened by breakpoint.
     2. clamp()       type and spacing scale with the viewport instead
                      of stepping at one breakpoint.
     3. --kx-vh       real visible height from visualViewport (set by
                      engine.js). 100dvh still lies on iOS while the
                      keyboard is open; this does not.
     4. 16px controls on phones — iOS Safari force-zooms any focused
                      control whose text renders below 16px. Fixing the
                      font is the accessible fix; user-scalable=no is
                      not, and would break pinch-zoom.

   This layer only overrides; no earlier rule was rewritten, so it can
   be removed wholesale to revert.
   ================================================================= */
:root{
  --kx-shell:520px;              /* content column width  */
  --kx-gut:16px;                 /* horizontal gutter     */
  --kx-vh:100dvh;                /* replaced at runtime by engine.js */
}

/* ---- 1. Fluid shell -------------------------------------------- */
.app{max-width:var(--kx-shell);min-height:var(--kx-vh)}
.tabs .inner{max-width:var(--kx-shell)}
.view{padding:clamp(12px,2.2vw,22px) var(--kx-gut) calc(var(--tabh) + 24px)}
.brandbar{padding:clamp(12px,2vw,18px) var(--kx-gut) 6px}
/* The sticky quiz/results headers bleed to the gutter with a hardcoded
   -16px margin. Once --kx-gut grows past 16px that bleed no longer
   reaches the edge, leaving a pale stripe beside the sticky bar. */
#v-quiz .qhead:first-of-type,#v-results .results-exit{
  margin-left:calc(var(--kx-gut) * -1);margin-right:calc(var(--kx-gut) * -1);
  padding-left:var(--kx-gut);padding-right:var(--kx-gut)}

/* ---- 2. Fluid type --------------------------------------------- */
.qtext{font-size:clamp(16px,1.05vw + 14px,20px);line-height:1.55}
.opt .otext{font-size:clamp(14px,.55vw + 13px,16.5px)}
.opt{padding:clamp(13px,1.1vw,17px)}
.opt .key{width:clamp(25px,1.6vw + 21px,30px);height:clamp(25px,1.6vw + 21px,30px)}
.card{padding:clamp(16px,1.5vw,22px)}
.stat .n{font-size:clamp(22px,2vw + 16px,30px)}
.mode{padding:clamp(15px,1.4vw,20px)}
.btn{padding:clamp(13px,1.1vw,16px);font-size:clamp(15px,.4vw + 14px,17px)}
.brandbar h1{font-size:clamp(16px,.6vw + 14px,20px)}

/* ---- 3. Phone: keyboard-stable height + no iOS zoom ------------- */
@media (max-width:760px){
  /* Any control whose text is under 16px triggers iOS Safari's zoom on
     focus. Applies to real inputs only — .seg/.domchk are buttons. */
  input,select,textarea{font-size:16px}
  .app{min-height:var(--kx-vh)}
  /* While the software keyboard is up, drop the fixed tab bar out of
     the way instead of letting it float over the field being typed in. */
  body.kx-keyboard-open .tabs{display:none}
  body.kx-keyboard-open .view{padding-bottom:24px}
}

/* ---- 4. Breakpoints: let the shell breathe --------------------- */
@media (min-width:600px){
  :root{--kx-shell:600px;--kx-gut:22px}
}
@media (min-width:900px){
  :root{--kx-shell:760px;--kx-gut:28px}
  /* Two-up the summary tiles and the option list once there is room. */
  .stats{grid-template-columns:repeat(4,1fr)}
  .navgrid{grid-template-columns:repeat(auto-fill,minmax(38px,1fr))}
}
@media (min-width:1200px){
  :root{--kx-shell:860px;--kx-gut:32px}
  .qfigure img{max-height:520px}
}

/* Short landscape phones: reclaim vertical space from the splash and
   the tab bar rather than letting the question scroll off. */
@media (max-height:560px) and (orientation:landscape){
  :root{--tabh:52px}
  .view{padding-top:8px}
  .brandbar{padding-top:8px}
}

/* Wide + tall: pin the exam nav grid beside the question instead of
   pushing it below the fold. */
@media (min-width:1000px) and (min-height:700px){
  .navgrid{grid-template-columns:repeat(auto-fill,minmax(34px,1fr))}
}

/* =================================================================
   Numeric entry (format: numeric-entry) — added 2026-08-11
   -----------------------------------------------------------------
   The field is 16px and stays 16px on phones. Anything smaller makes
   iOS Safari zoom the page on focus, and the accessible fix for that
   is the font size, not user-scalable=no.

   Rendered as type="text" + inputmode="decimal" rather than
   type="number", so "5/2" and "5*sqrt(2)" survive being typed and no
   spinner arrows invite nudging a maths answer up and down.
   ================================================================= */
.numwrap{display:block}
.numlabel{display:block;margin:0 0 7px;color:var(--slate);font-size:13px;font-weight:600}
.numrow{display:flex;align-items:center;gap:9px}
.numinput{
  flex:1;min-width:0;
  padding:13px 14px;
  border:1.5px solid var(--line);border-radius:11px;
  background:var(--card);color:var(--ink);
  font:inherit;font-size:16px;                 /* do not drop below 16px */
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.numinput::placeholder{color:var(--slate);opacity:.75}
.numinput:focus{outline:3px solid var(--brand);outline-offset:2px;border-color:var(--brand)}
.numinput:disabled{background:var(--page);color:var(--body);opacity:1}
.numunit{flex:0 0 auto;color:var(--slate);font-size:15px;font-weight:600}
.numhelp{margin:8px 2px 0;color:var(--slate);font-size:12px;line-height:1.45}
.numsubmit{margin-top:13px}