/* ============================================================================
   astrabay — practice surface ("Star Fix" skin)
   Same tokens as the live homepage (index.html :root). Day = pale chart paper,
   night = night watch. No external assets, system fonts only, motion <=200ms.

   This file styles ONLY the shell. The SAT reading engine is copied verbatim
   from windlume (lib/sat-engine.js) and keeps its own class names — the rules
   below simply re-dress those classes in astrabay tokens.
   ========================================================================== */

/* --- tokens (mirror of index.html) -------------------------------------- */
:root{
  --paper:#f3eee4; --ink:#1a2233; --ink-soft:#4b5568; --rule:#cfc6b4;
  --accent:#1b3a6b; --accent-2:#b07d2b; --ring:#e8c07a;
  --card:#fbf8f1; --card-edge:#ddd3c0;
  --wash:#eee7d8;              /* hover / selected wash */
  --ok:#2c6440; --ok-wash:#e7efe6;
  --bad:#9e3a2c; --bad-wash:#f7e7e2;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC",sans-serif;
  --navh:56px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0e1730; --ink:#e9edf6; --ink-soft:#a8b4cc; --rule:#26324f;
    --accent:#8fb4ef; --accent-2:#e8c07a; --ring:#e8c07a;
    --card:#141f3c; --card-edge:#25325a;
    --wash:#1b2745;
    --ok:#8fd0a6; --ok-wash:#16261e;
    --bad:#f0a097; --bad-wash:#2b1a1a;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0e1730; --ink:#e9edf6; --ink-soft:#a8b4cc; --rule:#26324f;
  --accent:#8fb4ef; --accent-2:#e8c07a; --ring:#e8c07a;
  --card:#141f3c; --card-edge:#25325a;
  --wash:#1b2745;
  --ok:#8fd0a6; --ok-wash:#16261e;
  --bad:#f0a097; --bad-wash:#2b1a1a;
  color-scheme:dark;
}

/* --- reset / base ------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17.5px;line-height:1.7;letter-spacing:.005em;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
::selection{background:var(--wash);color:var(--ink)}

/* chart-paper edge ticks along the very top (homepage motif) */
body::before{
  content:"";position:fixed;inset:0 0 auto;height:12px;z-index:60;pointer-events:none;
  background-image:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 48px);
  background-size:auto 12px;background-repeat:repeat-x;opacity:.34;
}

.ab-wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* --- top bar ------------------------------------------------------------ */
.ab-top{
  position:sticky;top:0;z-index:50;height:var(--navh);
  display:flex;align-items:center;gap:14px;
  background:color-mix(in srgb,var(--paper) 93%,transparent);
  -webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--rule);
}
.ab-top .ab-wrap{display:flex;align-items:center;gap:14px;width:100%}
.ab-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:660;font-size:17px;letter-spacing:-.012em}
.ab-brand svg{width:26px;height:26px;color:var(--accent)}
.ab-brand b{font-weight:660}
.ab-brand span{color:var(--accent-2)}
.ab-back{
  margin-left:auto;text-decoration:none;color:var(--ink-soft);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .16s ease,border-color .16s ease;
}
.ab-back:hover,.ab-back:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
.ab-theme{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;
  border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--ink-soft);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:color .16s ease,border-color .16s ease;
}
.ab-theme:hover{color:var(--ink);border-color:var(--accent)}
.ab-theme-dot{width:9px;height:9px;border-radius:50%;border:1px solid currentColor;
  background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%)}
.ab-theme[aria-pressed="true"] .ab-theme-dot{background:currentColor}

/* --- page head ---------------------------------------------------------- */
.ab-head{padding:44px 0 26px}
.ab-eyebrow{
  margin:0 0 12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-2);
}
.ab-head h1{margin:0;font-size:clamp(32px,5vw,46px);line-height:1.06;letter-spacing:-.022em;font-weight:660}
.ab-head h1 em{font-style:normal;color:var(--accent)}
.ab-head .ab-lede{margin:14px 0 0;max-width:64ch;color:var(--ink-soft);font-size:17px;line-height:1.65}
.ab-meta{
  margin:16px 0 0;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px 18px;
}
.ab-meta b{font-weight:600;color:var(--ink)}

/* --- toolbar ------------------------------------------------------------ */
.ab-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:12px 0 16px;border-bottom:1px solid var(--rule);margin-bottom:22px;
}
.ab-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ab-stats{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-left:auto;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft)}

.ab-btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  border:1px solid var(--card-edge);border-radius:999px;background:var(--card);color:var(--ink);
  font-size:14px;font-weight:600;letter-spacing:-.004em;cursor:pointer;white-space:nowrap;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.ab-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--wash)}
.ab-btn:disabled{opacity:.45;cursor:not-allowed}
.ab-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--card)}
:root[data-theme="dark"] .ab-btn--primary{color:#0e1730}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ab-btn--primary{color:#0e1730}
}
.ab-btn--primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink)}
.ab-btn--ghost{background:transparent}
.ab-btn--sm{padding:7px 13px;font-size:13.5px}
.ab-toolbar .ab-btn[aria-pressed="true"],.ab-toolbar .ab-btn.is-on{
  border-color:var(--accent);color:var(--accent);background:var(--wash);
}
.ab-timer{
  font-family:var(--mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:.06em;color:var(--accent);padding:0 4px;
}
.ab-timer.low{color:var(--bad)}

/* --- in-flow ask panels (engine sets .show) ----------------------------- */
.askbar{
  display:none;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 18px;padding:13px 16px;
  border:1px solid var(--card-edge);border-left:2px solid var(--accent-2);
  border-radius:10px;background:var(--card);color:var(--ink);
  font-size:14.5px;line-height:1.5;
}
.askbar.show{display:flex}
.askbar .askmsg{flex:1 1 240px;color:var(--ink)}
.askbar button{
  padding:8px 14px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);
  color:var(--card);font-size:13px;font-weight:600;cursor:pointer;
}
.askbar button.no{background:transparent;color:var(--accent);border-color:var(--rule)}
.askbar button:hover{opacity:.9}

/* --- question card ------------------------------------------------------ */
#qcard{min-width:0}
/* The engine injects .qcard.setitem children in set mode; in the single-card
   modes (wrong-answer review, full module) it writes straight into #qcard, so
   the container itself has to carry the card surface there. */
#qcard:not(:empty):not(:has(.setitem)){
  background:var(--card);border:1px solid var(--card-edge);border-radius:14px;
  padding:26px 26px 22px;margin:0 0 22px;
}
@media (max-width:720px){
  #qcard:not(:empty):not(:has(.setitem)){padding:20px 16px 18px;border-radius:12px}
}
.qcard{
  position:relative;background:var(--card);border:1px solid var(--card-edge);
  border-radius:14px;padding:26px 26px 22px;margin:0 0 22px;min-width:0;
}
.qcard::before{
  content:"";position:absolute;inset:0 0 auto;height:6px;border-radius:14px 14px 0 0;
  background-image:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 9px);
  opacity:.65;
}
.qnum{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.qnum .tag{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.02em;text-transform:none;
  color:var(--accent);background:var(--wash);border:1px solid var(--card-edge);
  border-radius:999px;padding:2px 9px;font-weight:600;
}

.split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:26px;align-items:start}
.pane-passage{position:sticky;top:calc(var(--navh) + 58px);align-self:start;max-height:calc(100vh - var(--navh) - 78px);overflow-y:auto;min-width:0}
.pane-questions{min-width:0}

.passage{
  border-left:2px solid var(--rule);
  padding:2px 0 2px 18px;
  color:var(--ink-soft);font-size:17px;line-height:1.75;
  max-width:66ch;
}
.passage p{margin:0 0 .9em}
.passage br{line-height:1.75}

.stem{margin:0 0 16px;font-size:18px;line-height:1.62;color:var(--ink);font-weight:480}
.stem .u,.passage .u{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--accent-2)}

.opts{display:flex;flex-direction:column;gap:8px}
.opt{
  display:flex;gap:10px;align-items:flex-start;text-align:left;flex-wrap:wrap;
  padding:11px 14px;border:1px solid var(--card-edge);border-radius:10px;
  background:var(--paper);color:var(--ink);font-size:16px;line-height:1.55;
  cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.opt:hover:not(.locked){border-color:var(--accent);background:var(--wash)}
.opt .k{font-family:var(--mono);font-weight:600;color:var(--accent);min-width:20px;font-size:14px;padding-top:2px}
.opt > span:not(.k){flex:1 1 0;min-width:0}
.opt.sel{border-color:var(--accent);background:var(--wash);box-shadow:inset 0 0 0 1px var(--accent)}
.opt.locked{cursor:default}
.opt.correct{border-color:var(--ok);background:var(--ok-wash)}
.opt.wrong{border-color:var(--bad);background:var(--bad-wash)}
.opt.answer-revealed{border-color:var(--ok);background:var(--ok-wash)}
.opt.is-yours::after,.opt.answer-revealed::after{
  content:"";margin-left:auto;padding:2px 8px;border-radius:999px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid currentColor;align-self:center;
}
.opt.is-yours::after{content:"Your answer";color:var(--ink-soft)}
.opt.wrong.is-yours::after{content:"Your answer \2717";color:var(--bad)}
.opt.answer-revealed::after{content:"Correct \2713";color:var(--ok)}
.opt.is-yours.answer-revealed::after{content:"Correct \2713"}

.pickfoot{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.chkbtn{
  padding:9px 18px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);
  color:var(--card);font-size:14px;font-weight:600;cursor:pointer;
}
.chkbtn:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink)}

.grid-in{display:flex;gap:8px;align-items:center;margin:0 0 10px;flex-wrap:wrap}
.grid-in input{
  flex:1 1 180px;max-width:260px;padding:9px 12px;border:1px solid var(--card-edge);
  border-radius:8px;background:var(--paper);color:var(--ink);font-size:16px;
}
.grid-in input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.grid-in button{
  padding:9px 16px;border-radius:999px;border:1px solid var(--accent);
  background:transparent;color:var(--accent);font-size:14px;font-weight:600;cursor:pointer;
}

/* answer key + explanation */
.anskey{
  margin-top:16px;padding:8px 14px;border-radius:999px;border:1px dashed var(--card-edge);
  background:transparent;color:var(--ink-soft);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.anskey:hover{color:var(--accent);border-color:var(--accent);background:var(--wash)}
.anskey.on{color:var(--accent);border-style:solid;border-color:var(--accent);background:var(--wash)}

.explain{display:none;margin-top:14px;padding:14px 16px;border-radius:10px;
  background:var(--paper);border:1px solid var(--card-edge);
  font-size:15.5px;line-height:1.65;color:var(--ink-soft)}
.explain.show{display:block}
.explain .verdict{font-weight:700;font-size:15px;margin-bottom:6px;color:var(--ink)}
.explain .verdict.good{color:var(--ok)}
.explain .verdict.bad{color:var(--bad)}
.explain b{color:var(--ink);font-weight:640}
.explain .cn{border-top:1px dashed var(--rule);margin-top:10px;padding-top:10px}
/* the engine writes a couple of colours inline (sky blue accent, slate body);
   pull them back into the chart palette without touching the engine */
.explain div[style]{color:var(--ink-soft)!important;border-color:var(--rule)!important}
.done div[style]{color:var(--ink-soft)!important}

/* inline "reveal?" confirmation (replaces windlume's fixed bottom bar) */
.ab-keyask{
  margin-top:10px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--accent-2);background:var(--wash);
  font-size:14.5px;line-height:1.5;
}
.ab-keyask-msg{margin:0 0 10px;color:var(--ink)}
.ab-keyask-act{display:flex;gap:8px;flex-wrap:wrap}
.ab-keyask .ab-btn--sm{background:var(--card)}

/* --- set navigation ----------------------------------------------------- */
.setnav{
  position:sticky;top:var(--navh);z-index:30;
  display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow-x:auto;
  margin:0 0 18px;padding:9px 2px;border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--paper) 95%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  scrollbar-width:thin;
}
.setnav-lbl{
  flex:none;margin-right:4px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.snbtn{
  flex:none;width:27px;height:27px;padding:0;border-radius:6px;
  border:1px solid var(--card-edge);background:var(--card);color:var(--ink-soft);
  font-family:var(--mono);font-size:11.5px;font-weight:600;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.snbtn:hover{border-color:var(--accent);color:var(--accent)}
.snbtn.done{background:var(--wash);color:var(--ink);border-color:var(--rule)}
.snbtn.right{background:var(--ok-wash);border-color:var(--ok);color:var(--ok)}
.snbtn.wrong{background:var(--bad-wash);border-color:var(--bad);color:var(--bad)}
.setnav-meta{
  flex:none;margin-left:auto;padding-left:10px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.08em;color:var(--ink-soft);white-space:nowrap;
}
/* on narrow screens the strip scrolls sideways; fade its edge so the clipped
   number reads as "more to the right" rather than a layout bug */
@media (max-width:980px){
  .setnav{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  }
}
/* #pos already reports the set size, so the strip can drop this label before
   it runs out of room and starts clipping (the row must stay one line tall,
   because the sticky passage pane is offset from the bar height). */
@media (max-width:1400px){ .setnav-meta{display:none} }
.setfoot{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 8px}

/* --- prev / next + progress -------------------------------------------- */
.navbtns{display:flex;gap:10px;margin:18px 0 0}
.nbtn{
  padding:10px 20px;border-radius:999px;border:1px solid var(--card-edge);
  background:var(--card);color:var(--ink);font-size:14.5px;font-weight:600;cursor:pointer;
  transition:border-color .16s ease,color .16s ease;
}
.nbtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.nbtn:disabled{opacity:.4;cursor:not-allowed}
.nbtn.primary{margin-left:auto;background:var(--accent);border-color:var(--accent);color:var(--card)}
.nbtn.primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink)}
.rbar{margin:16px 0 0;height:3px;border-radius:2px;background:var(--rule);overflow:hidden}
.rbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s ease}

/* --- done panel --------------------------------------------------------- */
.done{text-align:center;padding:10px 0 4px}
.done h2{margin:0 0 8px;font-size:24px;letter-spacing:-.01em}
.done .big{font-family:var(--mono);font-size:40px;font-weight:600;color:var(--accent);letter-spacing:-.02em;margin:6px 0}
.done div{color:var(--ink-soft)}

/* --- footer ------------------------------------------------------------- */
.ab-foot{
  margin:56px 0 0;padding:22px 0 40px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
.ab-foot a{text-decoration:none;border-bottom:1px solid transparent}
.ab-foot a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* --- focus & motion ----------------------------------------------------- */
:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}

/* --- responsive --------------------------------------------------------- */
@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:18px}
  .pane-passage{position:static;max-height:none;overflow:visible}
  .passage{font-size:17px}
}
@media (max-width:720px){
  body{font-size:17px}
  .ab-wrap{padding:0 16px}
  .ab-head{padding:30px 0 18px}
  .ab-head .ab-lede{font-size:16px}
  .qcard{padding:20px 16px 18px;border-radius:12px}
  .stem{font-size:17px}
  .opt{font-size:15.5px;padding:10px 12px}
  .explain{font-size:15px;padding:12px 13px}
  .ab-toolbar{gap:8px;padding-bottom:12px}
  .ab-btn{padding:8px 13px;font-size:13.5px}
  .ab-stats{margin-left:0;width:100%;font-size:11px}
  .ab-back{font-size:10px}
  .ab-brand{font-size:15.5px}
  .ab-brand svg{width:23px;height:23px}
  .setnav{top:var(--navh)}
  .setnav-meta{margin-left:0}
  .passage{font-size:16.5px;padding-left:14px}
}
@media (max-width:420px){
  .ab-back span{display:none}
  .ab-theme{padding:5px 9px}
}