/* Shared chrome and every renderer's presentation.
   Mobile first. Nothing here depends on hover; every control is at least 44px. */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  /* Stop a scrolled drill from rubber-banding the whole page on iOS. */
  overscroll-behavior: contain;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--s0)/1.55 var(--sans);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: contain;
  /* Nothing may push the page sideways. */
  overflow-x: hidden;
}

:where(a) { color: var(--accent); }
:where(button, a, select, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--panel); color: var(--ink); padding: 12px 16px;
  border: 2px solid var(--focus); border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ layout */

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad-right) calc(var(--pad-bottom) + var(--tabbar) + 24px) var(--pad-left);
}

header.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding-top: var(--pad-top);
}
.top-in {
  display: flex; align-items: center; gap: 10px;
  max-width: var(--shell); margin: 0 auto;
  padding: 8px var(--pad-right) 10px var(--pad-left);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 650; letter-spacing: .2px; min-width: 0;
  /* It is a link back to the pack picker, so it has to be thumb-sized too. */
  min-height: var(--tap); padding-right: 6px;
  color: inherit; text-decoration: none;
}
.brand .mark {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--accent); color: var(--on-accent);
  font: 600 var(--s-1)/1 var(--mono);
}
.brand .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-spacer { flex: 1 1 auto; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: var(--s-2); color: var(--ink-2); white-space: nowrap;
}
.chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* The last five minutes of a timed paper. Colour is not the only signal — the
   clock is already counting down in plain figures. */
.chip.is-low { border-color: var(--bad); color: var(--bad); }
.chip.is-low b { color: var(--bad); }

/* ------------------------------------------------------------------ buttons */

.btn, .icon-btn {
  min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent);
  font: 600 var(--s-1)/1.2 var(--sans);
  cursor: pointer;
  transition: filter .12s ease;
}
.btn:disabled, .icon-btn:disabled { opacity: .45; cursor: default; }
.btn-quiet { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn-danger { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.icon-btn {
  min-width: var(--tap); padding: 8px;
  background: var(--panel); color: var(--ink); border-color: var(--line);
  font-size: var(--s0);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn-row .btn { flex: 1 1 auto; }
@media (min-width: 600px) { .btn-row .btn { flex: 0 0 auto; } }

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 14px 0;
}
.card > h2 { font-size: var(--s1); margin: 0 0 8px; }
.card > h3 { font-size: var(--s0); margin: 18px 0 6px; }
.muted { color: var(--ink-2); }
.kicker {
  font: 600 var(--s-2)/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 6px;
}
.lede { color: var(--ink-2); margin: 0 0 14px; }

/* Any table, anywhere, scrolls inside its own box rather than widening the page. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
.tablewrap table { border-collapse: collapse; min-width: 460px; font-size: var(--s-1); }
.tablewrap th, .tablewrap td {
  border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top;
}
.tablewrap th { background: var(--panel-2); }

/* --------------------------------------------------------------- pack grid */

.grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid { grid-template-columns: 1fr 1fr; } }

.tile {
  display: block; width: 100%; text-align: left;
  background: var(--panel); color: inherit;
  border: 1px solid var(--line); border-left: 4px solid var(--pack-accent, var(--accent));
  border-radius: var(--radius); padding: 14px; cursor: pointer;
  min-height: var(--tap);
}
.tile h3 { margin: 0 0 4px; font-size: var(--s1); }
.tile p { margin: 0; color: var(--ink-2); font-size: var(--s-1); }
.tile .tile-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
  font-size: var(--s-2); color: var(--ink-3);
}
.badge {
  display: inline-block; min-width: 22px; padding: 1px 7px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: 600 var(--s-2)/1.6 var(--sans); text-align: center;
}
.badge-quiet { background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); }

/* -------------------------------------------------------------- the drill */

.qhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.qhead .qprog { flex: 1 1 auto; min-width: 0; }
.bar { height: 6px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }

.tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag {
  font-size: var(--s-2); padding: 3px 8px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent;
}
.tag-quiet { background: var(--panel-2); color: var(--ink-2); border-color: var(--line); }

.prompt { font-size: var(--s1); font-weight: 560; margin: 4px 0 14px; }
.item-note {
  background: var(--panel-2); border-left: 3px solid var(--line);
  padding: 9px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-2); font-size: var(--s-1); margin: 0 0 14px;
}

/* confidence — chosen before answering, so it is a prediction not a post-mortem */
.conf { margin: 0 0 14px; }
.conf-head { font-size: var(--s-2); color: var(--ink-3); margin-bottom: 6px; }
.conf-row { display: flex; gap: 8px; }
.conf-row button {
  flex: 1 1 0; min-height: var(--tap); padding: 8px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--ink-2);
  font: 600 var(--s-2)/1.3 var(--sans); cursor: pointer;
}
.conf-row button.is-on {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.locked-hint { font-size: var(--s-2); color: var(--ink-3); margin: 10px 0 0; }

/* options — mcq, tf, assign(letters) */
.options { display: grid; gap: 8px; }
.option, .assign-option, .order-choice, .bucket-choice {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  min-height: var(--tap); padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--ink);
  font: var(--s0)/1.4 var(--sans); cursor: pointer;
}
.option-key, .assign-num, .order-num {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 6px; background: var(--panel); border: 1px solid var(--line);
  font: 600 var(--s-2)/1 var(--mono); color: var(--ink-3);
}
.option-text { flex: 1 1 auto; min-width: 0; }

.is-correct { border-color: var(--ok) !important; background: var(--ok-soft) !important; }
.is-wrong   { border-color: var(--bad) !important; background: var(--bad-soft) !important; }
.is-dim     { opacity: .5; }
.is-picked  { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
button.is-correct, button.is-wrong { color: var(--ink); }

/* assign — bins and keypad */
.assign { display: grid; gap: 8px; }
.assign-bins .assign-option { align-items: flex-start; padding: 13px 12px; }
.assign-body { display: grid; gap: 2px; min-width: 0; }
.assign-detail { font-size: var(--s-2); color: var(--ink-3); }
.assign-keypad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 520px) { .assign-keypad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.assign-keypad .assign-option { flex-direction: column; align-items: flex-start; gap: 2px; }
.assign-code { font: 700 var(--s1)/1.1 var(--mono); color: var(--accent); }

.stimulus {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px; margin-bottom: 14px;
}
.stimulus-field { min-width: 0; }
.stimulus-right { text-align: right; }
.stimulus-label {
  display: block; font: 600 var(--s-2)/1 var(--mono);
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.stimulus-value { display: block; font-weight: 600; margin-top: 3px; }
.stimulus-big { font: 700 var(--s2)/1.15 var(--mono); color: var(--accent); }

/* bucket */
.bucket { display: grid; gap: 10px; }
.bucket-row {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px; background: var(--panel-2);
  display: grid; gap: 8px; grid-template-columns: 1fr auto; align-items: center;
}
.bucket-item { grid-column: 1 / -1; font-size: var(--s-1); }
.bucket-choices { display: flex; gap: 6px; grid-column: 1; }
.bucket-choice { flex: 1 1 0; justify-content: center; font-size: var(--s-2); padding: 8px 4px; }
.bucket-mark { grid-column: 2; font-weight: 700; width: 1.2em; text-align: center; }
.bucket-row.is-correct, .bucket-row.is-wrong { background: var(--panel-2) !important; }

/* order */
.order-cols { display: grid; gap: 14px; }
@media (min-width: 680px) { .order-cols { grid-template-columns: 1fr 1fr; } }
.order-head { font-size: var(--s-2); color: var(--ink-3); margin-bottom: 6px; }
.order-pool { display: grid; gap: 8px; }
.order-choice { align-items: flex-start; }
.order-body { display: grid; gap: 2px; min-width: 0; }
.order-detail, .order-note { font-size: var(--s-2); color: var(--ink-3); }
.order-note { color: var(--bad); }
.order-picked { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.order-picked li {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 11px; background: var(--panel-2);
}
.order-afterword { margin-top: 16px; background: var(--panel-2); border-radius: var(--radius-sm); padding: 12px; }
.afterword-head { font-size: var(--s-2); color: var(--ink-3); margin-bottom: 8px; }
.afterword-row { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.afterword-row:first-of-type { border-top: 0; }

/* match */
.match { display: grid; gap: 10px; }
.match-row {
  display: grid; gap: 6px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2);
}
@media (min-width: 560px) { .match-row { grid-template-columns: 1fr 1fr; align-items: center; } }
.match-right { display: flex; align-items: center; gap: 8px; }
.match-select {
  flex: 1 1 auto; min-height: var(--tap); width: 100%;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink); font: var(--s-1)/1.3 var(--sans);
}
.match-mark { font-weight: 700; width: 1.2em; text-align: center; }
.match-row.is-correct, .match-row.is-wrong { background: var(--panel-2) !important; }

/* numeric */
.numeric-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.numeric-input {
  flex: 1 1 140px; min-height: var(--tap); min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--ink);
  font: 600 var(--s1)/1.2 var(--mono);
}
.numeric-unit { font: 600 var(--s0)/1 var(--mono); color: var(--ink-2); }
.numeric-tolerance, .numeric-hint { font-size: var(--s-2); color: var(--ink-3); margin: 8px 0 0; }

/* card */
.card-back {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px; margin-bottom: 4px;
}
.card-back-text { font-size: var(--s1); font-weight: 560; }
.card-back-detail { margin-top: 6px; font-size: var(--s-1); color: var(--ink-2); }

/* deck toggles */
.deck-row {
  display: flex; gap: 10px; align-items: flex-start;
  min-height: var(--tap); padding: 9px 0; cursor: pointer;
  border-top: 1px solid var(--line-soft);
}
.deck-row:first-of-type { border-top: 0; }
.deck-row input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--accent); }

/* feedback */
.expl {
  margin-top: 14px; padding: 12px 13px;
  border-radius: var(--radius-sm); border-left: 4px solid var(--line);
  background: var(--panel-2);
}
.expl.ok { border-left-color: var(--ok); background: var(--ok-soft); }
.expl.no { border-left-color: var(--bad); background: var(--bad-soft); }
.verdict { font-weight: 700; margin-bottom: 6px; }
.cite {
  margin-top: 8px; font: var(--s-2)/1.45 var(--mono); color: var(--ink-2);
  overflow-wrap: anywhere;
}
.sched-note { margin-top: 8px; font-size: var(--s-2); color: var(--ink-3); }

/* results */
.score-big { font: 700 var(--s3)/1.1 var(--sans); }
.result-row {
  display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft);
  font-size: var(--s-1);
}
.result-row:first-of-type { border-top: 0; }
.result-mark { flex: none; font-weight: 700; width: 1.2em; }

/* banners — service worker updates and the one-time migration report */
.update-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 12px 0 0; padding: 11px 13px;
  border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: var(--radius-sm); font-size: var(--s-1);
}
.update-bar > span { flex: 1 1 220px; min-width: 0; }
.update-bar.bad { border-color: var(--bad); background: var(--bad-soft); }
@media print { .update-bar { display: none !important; } }

/* notice */
.notice {
  border: 1px solid var(--warn); background: var(--warn-soft); color: var(--ink);
  border-radius: var(--radius-sm); padding: 11px 13px; margin: 12px 0; font-size: var(--s-1);
}
.notice.bad { border-color: var(--bad); background: var(--bad-soft); }

/* ------------------------------------------------------------ bottom tabs */

nav.tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  max-width: var(--shell); margin: 0 auto;
  padding: 0 var(--pad-right) 10px var(--pad-left);
}
nav.tabs a {
  min-height: var(--tap); display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-2); text-decoration: none; font: 600 var(--s-1)/1 var(--sans);
}
nav.tabs a[aria-current="page"] {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}

@media (max-width: 599px) {
  :root { --tabbar: calc(56px + env(safe-area-inset-bottom)); }
  nav.tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    flex-wrap: nowrap; justify-content: space-around; gap: 0;
    padding: 4px var(--pad-right) calc(4px + env(safe-area-inset-bottom)) var(--pad-left);
    background: var(--panel); border-top: 1px solid var(--line);
  }
  nav.tabs a {
    flex: 1 1 0; flex-direction: column; gap: 2px; justify-content: center;
    border: 0; background: none; border-radius: var(--radius-sm);
    font-size: var(--s-2); text-align: center; min-width: 0;
  }
  nav.tabs a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  nav.tabs .tab-icon { font-size: 1.1rem; line-height: 1; }
}

/* ------------------------------------------------------------------- print */

@media print {
  header.top, nav.tabs, .btn, .icon-btn, .conf, .skip, .no-print { display: none !important; }
  :root { --bg: #fff; --panel: #fff; --panel-2: #fff; --ink: #000; --ink-2: #333; --ink-3: #555;
          --line: #999; --line-soft: #ccc; --shadow: none; --tabbar: 0px; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; margin: 8pt 0; }
  .tablewrap { overflow: visible; }
  .tablewrap table { min-width: 0; width: 100%; }
  .result-row { break-inside: avoid; }
  .print-only { display: block !important; }
}
.print-only { display: none; }