/* The practice pages, on top of the app's own palette in style.css. Only the
   quiz needs new paint; everything else is inherited so the pages read as the
   same product. Right and wrong get their own hue per theme rather than one
   tinted twice: a mint that reads as correct at night reads as sickly on
   paper. */
:root{
  --right:#5FD9A8; --right-bg:#132A25; --right-hair:#2E6B57;
  --wrong:#FF8A93; --wrong-bg:#2C161C; --wrong-hair:#7A3742;
  --chip:#101A28;
}
@media (prefers-color-scheme: light){
  :root{
    --right:#0F6A48; --right-bg:#E7F5EE; --right-hair:#9CCBB5;
    --wrong:#A81F32; --wrong-bg:#FBEAEC; --wrong-hair:#DFA9B1;
    --chip:#F1EADB;
  }
}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.crumbs{
  font:500 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--muted);margin-bottom:22px;
}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--cyan);text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.45;margin:0 4px}

/* The landing page makes each table its own scroll container
   (`display:block; overflow-x:auto` in style.css), which leaves the row
   hairlines sized to the content instead of reaching the panel edge. Here
   .table-wrap owns the scrolling, so the table goes back to being a table. */
table{border-collapse:collapse;width:100%;font-size:15px;display:table;margin:0}
.table-wrap{
  overflow-x:auto;border:1px solid var(--hair);border-radius:14px;
  margin:20px 0;box-shadow:var(--sh-panel);background:var(--surface);
}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--hair)}
th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--muted)}
td:last-child{font-weight:500}

.fineprint{font-size:13px;color:var(--muted);margin-top:-8px}

/* Quiz ------------------------------------------------------------------ */
.quiz{list-style:none;padding:0;margin:22px 0 0;counter-reset:q}
.q{
  background:var(--surface);border:1px solid var(--hair);border-radius:16px;
  padding:18px 18px 14px;margin-bottom:16px;box-shadow:var(--sh-panel),var(--sh-inset);
}
.stem{font-weight:500;line-height:1.5;margin-bottom:14px;display:flex;gap:10px;align-items:baseline}
.qn{
  flex:none;font:600 12px/20px ui-monospace,SFMono-Regular,Menlo,monospace;
  min-width:22px;height:20px;text-align:center;border-radius:6px;
  background:var(--chip);color:var(--muted);border:1px solid var(--hair);
}
.opts{list-style:none;padding:0;margin:0}
.opts li{margin:0 0 8px}
.opt{
  display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  font:inherit;color:var(--ink);cursor:pointer;
  background:var(--chip);border:1px solid var(--hair);border-radius:11px;
  padding:11px 13px;transition:border-color .14s,background .14s,transform .14s;
}
.opt:hover:not([disabled]){border-color:var(--cyan);transform:translateY(-1px)}
.opt[disabled]{cursor:default}
.ltr{
  flex:none;font:600 12px/18px ui-monospace,SFMono-Regular,Menlo,monospace;
  width:18px;height:18px;text-align:center;border-radius:5px;
  background:var(--hair);color:var(--ink);
}
.otx{flex:1}

.opt.is-right{background:var(--right-bg);border-color:var(--right-hair)}
.opt.is-right .ltr{background:var(--right);color:var(--bg-top)}
.opt.is-wrong{background:var(--wrong-bg);border-color:var(--wrong-hair)}
.opt.is-wrong .ltr{background:var(--wrong);color:var(--bg-top)}
.opt.is-dim{opacity:.55}

.ans{
  margin-top:12px;border-top:1px solid var(--hair);padding-top:11px;
}
.ans summary{
  cursor:pointer;font:500 13px/1.4 inherit;color:var(--cyan);
  list-style:none;padding:2px 0;
}
.ans summary::-webkit-details-marker{display:none}
.ans summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.ans[open] summary::before{content:"▾ "}
.ans .key{font-weight:600;color:var(--right);margin-bottom:8px}
.ans .why{font-size:15px;line-height:1.6;margin-bottom:8px}
.cite{
  font:500 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--muted);margin:0;padding:7px 10px;border-radius:8px;
  background:var(--chip);border:1px solid var(--hair);display:inline-block;
}
/* Once an answer has been chosen the disclosure has nothing left to hide, so
   the control goes away rather than sitting there doing nothing. */
.q.is-done .ans summary{display:none}
.q.is-done .ans{border-top-color:var(--hair)}

/* The score sticks to the bottom while the answers are still being read, so
   it is a layer over the content rather than a panel in it: translucent, with
   a real blur behind it and a shadow in both themes. A solid card here would
   read as flat paint sitting on top of the page. */
.score{
  position:sticky;bottom:14px;margin:22px 0 8px;text-align:center;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--hair);border-radius:16px;
  padding:18px;box-shadow:var(--sh-card),var(--sh-inset);
}
@supports not (backdrop-filter:blur(1px)){
  .score{background:var(--surface)}
}
/* Room to scroll the last answer clear of the bar once it is up. */
body:has(.score:not([hidden])) .wrap{padding-bottom:150px}
.score-n{font:600 26px/1.2 inherit;letter-spacing:-.02em;margin-bottom:6px}
.score p{margin-bottom:10px}
.again{
  font:500 14px/1 inherit;color:var(--ink);cursor:pointer;
  background:var(--chip);border:1px solid var(--hair);border-radius:10px;padding:11px 16px;
}
.again:hover{border-color:var(--cyan)}

/* Hub ------------------------------------------------------------------- */
.tracks{list-style:none;padding:0;margin:26px 0}
.tcard{margin-bottom:11px}
.tcard a{
  display:block;text-decoration:none;color:var(--ink);
  background:var(--surface);border:1px solid var(--hair);border-radius:14px;
  padding:15px 17px;box-shadow:var(--sh-panel),var(--sh-inset);
  transition:border-color .14s,transform .14s;
}
.tcard a:hover{border-color:var(--cyan);transform:translateY(-2px)}
.tc-name{display:block;font-weight:600;letter-spacing:-.01em;margin-bottom:3px}
.tc-meta{display:block;font-size:13px;color:var(--muted)}

.others{padding-left:20px}
.others li{margin-bottom:6px}

@media (prefers-reduced-motion:reduce){
  .opt,.tcard a{transition:none}
  .opt:hover:not([disabled]),.tcard a:hover{transform:none}
}