/* Tokens and basics shared by the practice page and the admin page. */
:root {
  --bg: #f1f3f6;
  --surface: #ffffff;
  --ink: #14171d;
  --ink-2: #3b414d;
  --muted: #676e7b;
  --line: #d9dde4;
  --line-strong: #9aa1ad;
  --accent: #ffc629;
  --accent-soft: rgba(255, 198, 41, 0.5);
  --on-accent: #14171d;
  --on-state: #ffffff;
  --good: #16794a;
  --good-soft: #e0f2e7;
  --near: #a85400;
  --near-soft: #fcecd6;
  --bad: #c2342c;
  --bad-soft: #fbe4e2;
  --info: #2554b0;
  --info-soft: #e4ebf9;
  --shadow: 0 1px 2px rgba(20, 23, 29, 0.06), 0 8px 24px rgba(20, 23, 29, 0.07);
  --display: "League Gothic", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1015;
    --surface: #171a21;
    --ink: #eceef2;
    --ink-2: #c4c9d2;
    --muted: #939aa7;
    --line: #2a2f39;
    --line-strong: #505765;
    --accent-soft: rgba(255, 198, 41, 0.26);
    --on-state: #0e1015;
    --good: #54c98a;
    --good-soft: rgba(84, 201, 138, 0.14);
    --near: #f0a34c;
    --near-soft: rgba(240, 163, 76, 0.15);
    --bad: #ff7d74;
    --bad-soft: rgba(255, 125, 116, 0.14);
    --info: #8db1f7;
    --info-soft: rgba(141, 177, 247, 0.14);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1015;
  --surface: #171a21;
  --ink: #eceef2;
  --ink-2: #c4c9d2;
  --muted: #939aa7;
  --line: #2a2f39;
  --line-strong: #505765;
  --accent-soft: rgba(255, 198, 41, 0.26);
  --on-state: #0e1015;
  --good: #54c98a;
  --good-soft: rgba(84, 201, 138, 0.14);
  --near: #f0a34c;
  --near-soft: rgba(240, 163, 76, 0.15);
  --bad: #ff7d74;
  --bad-soft: rgba(255, 125, 116, 0.14);
  --info: #8db1f7;
  --info-soft: rgba(141, 177, 247, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); }
button { font-family: inherit; touch-action: manipulation; }
:where(button, input):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wrap { max-width: 760px; margin-inline: auto; padding-inline: 20px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.eyebrow {
  margin: 0;
  font: 600 12px/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
kbd {
  display: inline-block;
  padding: 2px 6px 1px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: 600 0.82em/1.2 var(--sans);
  white-space: nowrap;
}

.primary, .secondary {
  appearance: none;
  border-radius: 12px;
  cursor: pointer;
  font: 700 17px/1 var(--sans);
  padding: 16px 22px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.primary {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.primary:hover { transform: translateY(-1px); }
.primary:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18); }
.secondary { border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font-weight: 600; }
.secondary:hover { border-color: var(--ink); }
:where(.primary, .secondary):disabled { opacity: 0.55; cursor: default; transform: none; }
a { color: inherit; }