/* QuizHub design system.
   Idea: exam stationery, used for meaning. Blue ballpoint = actions. Highlighter = what you chose / where you are.
   Red pen = a problem. Tick green = done. Pencil grey = secondary text. Everything else stays quiet paper and ink.
   Type: Atkinson Hyperlegible Next (letters that cannot be mistaken for each other: I l 1, O 0) and its Mono for codes.
   Phones first: one column, 44px targets, no sideways scrolling. */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url("fonts/AtkinsonHyperlegibleNext.825fabef695f.woff2") format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url("fonts/AtkinsonHyperlegibleMono.387c8dcba3be.woff2") format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --paper: #F4F6F4;
  --sheet: #FFFFFF;
  --ink: #1B2230;
  --pencil: #596372;
  --rule: #DCE1DB;
  --rule-strong: #BFC7BD;
  --control: #7A857D;   /* borders of things you type in or pick: 3.6:1 against the page */
  --ballpoint: #2A3FC8;
  --ballpoint-dark: #1E2F9E;
  --ballpoint-wash: #E9ECFB;
  --marker: #FFE066;
  --marker-wash: #FFF5C7;
  --redpen: #BC3328;
  --redpen-wash: #FBE9E7;
  --tick: #1B7A4B;
  --tick-wash: #E3F3EA;

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --gutter: 1rem;
  --r-control: 8px;
  --r-sheet: 14px;
  --lift: 0 1px 0 rgba(27, 34, 48, .04), 0 10px 30px rgba(27, 34, 48, .12);
  --font: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
@media (min-width: 48em) { :root { --gutter: 1.5rem; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 var(--s3); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem); }
h2, h1.h2 { font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 var(--s3); max-width: 68ch; }
small, .small { font-size: .875rem; }
a { color: var(--ballpoint); text-underline-offset: .18em; }
a:hover { color: var(--ballpoint-dark); }
img, svg { max-width: 100%; }
code, kbd, pre, .mono { font-family: var(--mono); }
code { background: var(--sheet); border: 1px solid var(--rule); border-radius: 5px; padding: .08em .35em; font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; }
::selection { background: var(--marker); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ballpoint); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: var(--s3); top: -4rem; background: var(--ink); color: #fff; padding: var(--s2) var(--s4); border-radius: var(--r-control); z-index: 100; }
.skip-link:focus { top: var(--s3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--pencil); }

/* ---------- layout ---------- */
.main-content { min-height: 60vh; }
.page, .container { width: 100%; max-width: 72rem; margin-inline: auto; padding: var(--s5) var(--gutter) var(--s7); }
.page--narrow { max-width: 40rem; }
.stack > * + * { margin-top: var(--s4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.grow { flex: 1 1 auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s5); }
.page-head h1, .page-head h2 { margin: 0; }
.sheet, .auth-form-container {
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet);
  padding: clamp(1.1rem, 4vw, 2rem);
}
.auth-form-container { max-width: 30rem; margin: var(--s5) auto 0; }
.auth-form-container > h2:first-child { margin-bottom: var(--s2); }
.auth-link { margin-top: var(--s5); font-size: .95rem; color: var(--pencil); }

/* ---------- top bar ---------- */
.topbar { background: var(--sheet); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; }
.topbar__inner { max-width: 72rem; margin-inline: auto; padding: var(--s2) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; min-height: 3.5rem; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: 1.2rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand:hover { color: var(--ink); }
.brand__mark { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--marker); position: relative; flex: none; }
.brand__mark::after { content: ''; position: absolute; left: 36%; top: 18%; width: 24%; height: 48%; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.menu-button { display: none; }
.site-menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); width: 100%; padding-bottom: var(--s2); }
.site-menu a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 600; padding: var(--s2) 0; }
.site-menu a:not(.btn):hover { color: var(--ballpoint); text-decoration: underline; text-underline-offset: .25em; }
.topbar:not(.has-menu) .site-menu { width: auto; margin-left: auto; padding-bottom: 0; gap: var(--s4); }
.site-menu__user { display: inline-flex; align-items: center; gap: var(--s2); color: var(--pencil); font-size: .95rem; }
.site-menu form { margin: 0; }
.logout-btn { font: inherit; font-weight: 600; background: none; border: 0; padding: var(--s2) 0; color: var(--redpen); cursor: pointer; text-decoration: underline; text-underline-offset: .25em; min-height: 44px; }
.role-badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: .1em .65em; border-radius: 999px; border: 1px solid transparent; }
.role-badge.admin { background: var(--ink); color: #fff; }
.role-badge.staff { background: var(--ballpoint-wash); color: var(--ballpoint-dark); border-color: #C9D0F5; }
.role-badge.pending { background: var(--marker-wash); color: #5B4700; border-color: #EBD36B; }
/* On phones the signed-in menu folds behind a button (without JavaScript it simply stays open). */
@media (max-width: 47.99em) {
  .js .has-menu .menu-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); font: inherit; font-weight: 600; background: var(--paper); color: var(--ink); border: 1.5px solid var(--rule-strong); border-radius: var(--r-control); cursor: pointer; }
  .js .has-menu .site-menu { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s2) 0 var(--s3); border-top: 1px solid var(--rule); }
  .js .has-menu .site-menu.is-open { display: flex; }
  .js .has-menu .site-menu a:not(.btn), .js .has-menu .site-menu .logout-btn, .js .has-menu .site-menu__user { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); min-height: 48px; display: flex; align-items: center; }
  .js .has-menu .site-menu form { display: flex; }
  .js .has-menu .site-menu .logout-btn { border-bottom: 0; }
}
@media (min-width: 48em) {
  .site-menu { width: auto; padding-bottom: 0; margin-left: auto; gap: var(--s5); }
}

/* ---------- buttons ---------- */
.btn, .btn-view, .btn-secondary, .btn-primary, .btn-create, .btn-danger, .btn-login, .btn-start {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 46px; padding: .55rem 1.15rem; font: inherit; font-weight: 600; line-height: 1.2; text-align: center;
  border-radius: var(--r-control); border: 1.5px solid var(--rule-strong); background: var(--sheet); color: var(--ink);
  text-decoration: none; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s;
}
.btn:hover, .btn-view:hover, .btn-secondary:hover, .btn-login:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.btn-create, .btn-primary, .btn-start { background: var(--ballpoint); border-color: var(--ballpoint); color: #fff; }
.btn-create:hover, .btn-primary:hover, .btn-start:hover { background: var(--ballpoint-dark); border-color: var(--ballpoint-dark); color: #fff; }
.btn-danger { background: var(--sheet); border-color: var(--redpen); color: var(--redpen); }
.btn-danger:hover { background: var(--redpen); color: #fff; border-color: var(--redpen); }
.btn:disabled, .btn-create:disabled, button:disabled { opacity: .55; cursor: not-allowed; }
.btn-small { min-height: 38px; padding: .3rem .8rem; font-size: .92rem; }
.btn-block { width: 100%; }
form .btn-create, form .btn-primary { margin-top: var(--s2); }

/* ---------- forms ---------- */
.simple-form { display: grid; gap: var(--s4); }
.simple-form .btn-create { justify-self: start; }
.form-field { display: grid; gap: var(--s1); }
.form-field > label, label.field-label { font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"],
input[type="file"], input:not([type]), select, textarea {
  width: 100%; min-height: 46px; padding: .55rem .8rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--sheet); border: 1.5px solid var(--control); border-radius: var(--r-control);
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ballpoint); outline: 3px solid var(--ballpoint-wash); outline-offset: 0; }
input:disabled, select:disabled, textarea:disabled { background: #E7EAE6; color: #868E88; cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--ballpoint); flex: none; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; gap: var(--s2); align-items: flex-start; }
.help-text { color: var(--pencil); font-size: .875rem; }
.error, .errorlist { color: var(--redpen); font-weight: 600; font-size: .95rem; margin: 0; padding: 0; list-style: none; }
.error { border-left: 3px solid var(--redpen); padding-left: var(--s3); }
.password-field { position: relative; }
.password-field input { padding-right: 4.5rem; }
.password-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 .7rem; font: inherit; font-size: .875rem; font-weight: 600; color: var(--ballpoint); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.password-toggle:hover { background: var(--ballpoint-wash); }
.form-footer { display: flex; justify-content: flex-end; font-size: .95rem; }
.simple-form input:disabled + .password-toggle, .simple-form button:disabled { cursor: not-allowed; }

ul, ol { padding-left: 1.25rem; margin: var(--s2) 0; }
li + li { margin-top: var(--s1); }
.steps, .rows, .choices, .messages, .site-menu { padding-left: 0; }
dl.facts { margin: 0 0 var(--s6); border-top: 1px solid var(--rule); }
dl.facts > div { display: grid; grid-template-columns: 1fr; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
dl.facts dt { color: var(--pencil); font-size: .92rem; }
dl.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 40em) { dl.facts > div { grid-template-columns: 11rem 1fr; } }
.qr { display: block; margin: var(--s3) 0; background: #fff; padding: var(--s2); border: 1px solid var(--rule); border-radius: var(--r-control); }
.key, .codes { font-family: var(--mono); letter-spacing: .04em; }
.key { display: block; margin-top: var(--s2); font-size: 1.05rem; padding: var(--s2) var(--s3); overflow-wrap: anywhere; }
.codes { background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: var(--r-control); padding: var(--s4); font-size: 1.15rem; line-height: 1.9; margin: 0; }
input.mono { font-family: var(--mono); letter-spacing: .08em; }
.auth-link .logout-btn { padding-left: 0; }

/* ---------- notices ---------- */
.notice, .message, .info-box { padding: var(--s3) var(--s4); border-left: 4px solid var(--ballpoint); background: var(--ballpoint-wash); border-radius: 0 var(--r-control) var(--r-control) 0; }
.notice > :last-child, .message > :last-child { margin-bottom: 0; }
.page > .notice { margin-bottom: var(--s5); }
.notice--warn { border-left-color: #C9A400; background: var(--marker-wash); }
.notice--quiet { background: none; border-left-color: var(--rule-strong); color: var(--pencil); font-size: .92rem; padding-block: var(--s1); }
.notice--error { border-left-color: var(--redpen); background: var(--redpen-wash); }
.notice--ok { border-left-color: var(--tick); background: var(--tick-wash); }
.messages { list-style: none; margin: 0; padding: var(--s3) var(--gutter) 0; max-width: 72rem; margin-inline: auto; display: grid; gap: var(--s2); }

/* ---------- lists of things ---------- */
.rows { border-top: 1px solid var(--rule); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.row__main { flex: 1 1 14rem; min-width: 0; }
.row__title { font-weight: 700; font-size: 1.1rem; margin: 0; overflow-wrap: anywhere; }
.row__meta { color: var(--pencil); margin: 0; font-size: .95rem; }
.row__action { flex: none; }
.chip { display: inline-flex; align-items: center; gap: .4em; font-size: .85rem; font-weight: 600; padding: .12em .7em; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule-strong); color: var(--ink); white-space: nowrap; }
.chip--live { background: var(--tick-wash); border-color: #A9D8BC; color: var(--tick); }
.chip--wait { background: var(--marker-wash); border-color: #EBD36B; color: #5B4700; }
.chip--bad { background: var(--redpen-wash); border-color: #EBB4AE; color: var(--redpen); }
.chip--done { color: var(--pencil); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: var(--r-sheet); background: var(--sheet); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
th { font-weight: 700; color: var(--pencil); font-size: .92rem; white-space: nowrap; background: var(--paper); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }

/* ---------- numbers ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6); margin: var(--s4) 0; }
.stat-card, .stat { min-width: 6rem; }
.stat-value { display: block; font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { display: block; color: var(--pencil); font-size: .92rem; }

/* ---------- public home ---------- */
.hero { display: grid; gap: var(--s6); padding: var(--s6) 0 var(--s5); align-items: center; }
.hero h1 { max-width: 16ch; }
.hero p { font-size: 1.1rem; }
@media (min-width: 52em) { .hero { grid-template-columns: 1.1fr .9fr; gap: var(--s7); padding: var(--s7) 0; } }
.sample { background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: var(--r-sheet); padding: var(--s5); max-width: 26rem; justify-self: center; width: 100%; }
.sample__q { font-weight: 700; margin: 0 0 var(--s4); }
.two-up { display: grid; gap: var(--s6); margin-top: var(--s5); }
@media (min-width: 48em) { .two-up { grid-template-columns: 1fr 1fr; } }
.steps { list-style: none; padding: 0; margin: var(--s3) 0 0; counter-reset: step; display: grid; gap: var(--s4); }
.steps li { counter-increment: step; position: relative; padding-left: 2.6rem; margin: 0; min-height: 1.7rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: .05em; font-weight: 700; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--marker); display: grid; place-items: center; font-size: .9rem; }

/* ---------- answer sheet: lettered bubbles (the one memorable thing) ---------- */
.choices { display: grid; gap: var(--s2); counter-reset: opt; margin: 0; padding: 0; list-style: none; }
.choice {
  counter-increment: opt; display: flex; align-items: center; gap: var(--s3); min-height: 54px; padding: .5rem var(--s3);
  border: 1.5px solid var(--control); border-radius: var(--r-control); background: var(--sheet); cursor: pointer;
  position: relative; overflow: hidden; transition: border-color .12s;
}
.choice::before {
  content: counter(opt, upper-alpha); flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--ink);
  display: grid; place-items: center; font-weight: 700; font-size: .95rem; background: var(--sheet); position: relative; z-index: 1;
}
.choice:hover { border-color: var(--ink); }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.choice.is-picked, .choice:has(input:checked) { border-color: var(--ink); background: var(--marker-wash); }
.choice.is-picked::before, .choice:has(input:checked)::before { background: var(--ink); color: #fff; }
.choice:has(input:focus-visible) { outline: 3px solid var(--ballpoint); outline-offset: 2px; }
.choice.is-picked::after, .choice:has(input:checked)::after { content: ''; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--marker); transform-origin: left; animation: swipe .22s ease-out; }
@keyframes swipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- taking an exam ---------- */
.exam-wrap { max-width: 62rem; margin-inline: auto; padding: 0 var(--gutter) var(--s7); display: grid; gap: var(--s5); }
.exam-main { min-width: 0; }
@media (min-width: 52em) {
  .exam-wrap { grid-template-columns: minmax(0, 1fr) 16rem; align-items: start; gap: var(--s6); }
  .exam-side { position: sticky; top: var(--s4); padding-top: var(--s4); }
}
.exam-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; background: var(--paper); border-bottom: 1px solid var(--rule); margin-bottom: var(--s4); }
.exam-bar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* anchored to the ids because the page's script rewrites these elements' class names */
#timer { flex: none; font-family: var(--mono); font-weight: 600; font-size: 1.4rem; font-variant-numeric: tabular-nums; padding: .05em .7em; border-radius: 999px; background: var(--sheet); border: 1.5px solid var(--rule-strong); }
#timer.none { font-family: var(--font); font-size: .95rem; color: var(--pencil); padding: .3em .9em; }
#timer.low { color: var(--redpen); border-color: var(--redpen); background: var(--redpen-wash); }
.exam-section { margin: 0; color: var(--pencil); font-size: .92rem; font-weight: 600; }
.exam-progress { margin: 0 0 var(--s3); color: var(--pencil); font-size: .92rem; }
.q-text { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); line-height: 1.35; margin-bottom: var(--s4); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 60ch; }
.options { display: grid; gap: var(--s2); counter-reset: opt; }
.opt {
  counter-increment: opt; display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; min-height: 54px;
  padding: .55rem var(--s3); font: inherit; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--control);
  border-radius: var(--r-control); cursor: pointer; position: relative; overflow: hidden; transition: border-color .12s;
}
.opt::before { content: counter(opt, upper-alpha); flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-weight: 700; font-size: .95rem; background: var(--sheet); }
.opt:hover { border-color: var(--ink); }
.opt.selected { border-color: var(--ink); background: var(--marker-wash); }
.opt.selected::before { background: var(--ink); color: #fff; }
.opt.selected::after { content: ''; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--marker); transform-origin: left; animation: swipe .22s ease-out; }
.nav-row { display: flex; gap: var(--s2); justify-content: space-between; margin-top: var(--s4); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--pencil); }
.btn-quiet:hover { background: var(--paper); border-color: var(--rule-strong); color: var(--ink); }
@media (max-width: 51.99em) {
  .nav-row { position: sticky; bottom: 0; z-index: 10; background: var(--paper); padding: var(--s3) 0; border-top: 1px solid var(--rule); margin-top: var(--s5); }
  .nav-row .btn { flex: 1 1 0; padding-inline: var(--s2); }
}
#save-state { margin: var(--s2) 0 0; color: var(--pencil); font-size: .875rem; min-height: 1.4em; }
#save-state.bad { color: var(--redpen); font-weight: 600; }
.palette { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.pal-title { flex: 0 0 100%; margin: var(--s2) 0 0; font-size: .85rem; font-weight: 700; color: var(--pencil); }
.pal { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; border: 1.5px solid var(--control); background: var(--sheet); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.pal:hover { border-color: var(--ink); }
.pal.answered { background: var(--tick-wash); border-color: var(--tick); color: var(--tick); }
.pal.current { background: var(--marker); border-color: var(--ink); color: var(--ink); }

/* full-screen messages during an exam (the page switches them on and off) */
.overlay { position: fixed; inset: 0; z-index: 60; align-items: center; justify-content: center; text-align: center; padding: var(--s5); background: rgba(244, 246, 244, .97); }
.overlay--soft { z-index: 50; background: rgba(244, 246, 244, .6); backdrop-filter: blur(8px); }
.overlay-card { max-width: 30rem; background: var(--sheet); border-radius: var(--r-sheet); padding: var(--s6) var(--s5); box-shadow: var(--lift); }
.skeleton { filter: blur(10px); opacity: .6; max-width: 44rem; margin: var(--s7) auto; padding: 0 var(--gutter); pointer-events: none; user-select: none; }
.skeleton div { height: 18px; background: var(--rule-strong); border-radius: 6px; margin: 14px 0; }
.countdown { font-family: var(--mono); font-size: clamp(2.5rem, 12vw, 4.5rem); font-weight: 600; margin: 0; min-height: 1.2em; }
.countdown:empty { display: none; }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* before you join: a list whose bullets echo the answer bubbles */
.rules { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s3); }
.rules li { position: relative; padding-left: 1.6rem; margin: 0; }
.rules li::before { content: ''; position: absolute; left: 0; top: .5em; width: .75rem; height: .75rem; border-radius: 50%; background: var(--marker); border: 1.5px solid var(--ink); }
.answers li { margin-bottom: var(--s3); }
.score { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin: var(--s2) 0 var(--s4); }
.device strong { font-family: var(--mono); letter-spacing: .06em; }

/* ---------- teacher pages ---------- */
.gap-top { margin-top: var(--s6); }
summary { cursor: pointer; padding: .6rem 0; }
summary::marker { color: var(--ballpoint); }
details.bank-set, details.pick-set { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--r-control); padding: .1rem var(--s4) var(--s3); }
details.bank-set[open] > summary, details.pick-set[open] > summary { border-bottom: 1px solid var(--rule); margin-bottom: var(--s3); }
details.bank-set ol { padding-left: 1.4rem; }
details.bank-set ol > li { margin-bottom: var(--s4); }
details.bank-set ul { list-style: none; padding-left: 0; margin-top: var(--s1); color: var(--pencil); }
details.bank-set ul strong { color: var(--tick); }
.bank-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-start; margin: var(--s3) 0; }
.bank-row > details { flex: 1 1 22rem; min-width: 0; }
.bank-actions { display: flex; gap: var(--s2); }
.bank-actions form { margin: 0; }
.pick-bar { position: sticky; top: 3.6rem; z-index: 5; background: var(--paper); padding: var(--s2) 0; border-bottom: 1px solid var(--rule); font-weight: 600; }
.pick-set { margin: var(--s2) 0; }
.pick-section { border: 1px solid var(--rule); border-radius: var(--r-control); padding: var(--s2) var(--s3) var(--s3); margin: var(--s3) 0; }
.pick-section legend { padding: 0 var(--s2); }
.pick-section legend a { margin-left: var(--s3); }
.pick-item { display: flex; gap: var(--s2); align-items: flex-start; padding: .45rem 0; }
.pick-item label { font-weight: 400; }
.pick-no { color: var(--pencil); min-width: 2ch; }

.live-facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); list-style: none; padding: 0; margin: var(--s3) 0; }
.live-facts li { margin: 0; }
.linkbox { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s2); }
.linkbox code { flex: 1 1 18rem; padding: .55rem .8rem; background: var(--paper); overflow-wrap: anywhere; user-select: all; }

.roster { list-style: none; padding: 0; margin: var(--s2) 0 var(--s4); display: grid; gap: var(--s1); grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.roster li { margin: 0; padding: .4rem .75rem; border-radius: var(--r-control); border-left: 4px solid var(--rule-strong); background: var(--sheet); }
.roster .is-absent { color: var(--pencil); background: transparent; border-left-color: var(--rule); }
.roster .is-lobby { background: var(--tick-wash); border-left-color: var(--tick); }
.roster .is-answering { background: var(--marker-wash); border-left-color: #C9A400; }
.roster .is-frozen { background: var(--redpen-wash); border-left-color: var(--redpen); }
.roster .is-submitted { background: var(--ballpoint-wash); border-left-color: var(--ballpoint); }

.panel { border: 1.5px solid var(--rule-strong); border-radius: var(--r-sheet); padding: var(--s4); margin: var(--s4) 0; background: var(--sheet); }
.panel > h3:first-child { margin-top: 0; }
.panel--bad { border-color: var(--redpen); background: var(--redpen-wash); }
.panel--warn { border-color: #C9A400; background: var(--marker-wash); }
.panel__item { border-top: 1px solid rgba(27, 34, 48, .15); padding: var(--s3) 0 0; margin-top: var(--s3); }
.tool { margin: 0; padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.tool > h3 { margin-bottom: var(--s2); }
.simple-form.tool { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.tool .help-text { flex: 1 1 100%; }
.tool label, .inline-form label { display: grid; gap: .25rem; font-weight: 600; }
.tool select { width: auto; min-width: 11rem; max-width: 100%; }
.simple-form.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.inline-form select, .inline-form input[type="number"] { width: auto; min-width: 9rem; max-width: 100%; }
.log { list-style: none; padding: 0; margin: var(--s2) 0 var(--s4); }
.log li { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); margin: 0; }

.table-wrap--sticky th:first-child, .table-wrap--sticky td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--rule); }
.table-wrap--sticky td:first-child { background: var(--sheet); font-weight: 600; }
.table-wrap--sticky th:first-child { background: var(--paper); }

.review { list-style: none; counter-reset: q; padding: 0; margin: var(--s3) 0; }
.review li { counter-increment: q; position: relative; padding: var(--s3) 0 var(--s3) 2.8rem; margin: 0; border-bottom: 1px solid var(--rule); display: grid; gap: .1rem; }
.review li::before { content: counter(q); position: absolute; left: 0; top: var(--s3); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; border: 1.5px solid var(--rule-strong); background: var(--sheet); }
.review .is-correct::before { background: var(--tick-wash); border-color: var(--tick); color: var(--tick); }
.review .is-wrong::before { background: var(--redpen-wash); border-color: var(--redpen); color: var(--redpen); }
.review__q { font-weight: 600; }
.review__state { font-weight: 700; font-size: .92rem; color: var(--pencil); }
.review .is-correct .review__state { color: var(--tick); }
.review .is-wrong .review__state { color: var(--redpen); }
.review__line { color: var(--pencil); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}