/* © 2026 William C. Chesher. All Rights Reserved.
   kablam - the base skin and the student door

   THE TOKENS ARE SET BY THE SERVER, per theme, on :root (app.py::page). Nothing here
   hardcodes a colour; a theme swap is a token swap and no rule below has to know.

   THE MOTION CONTRACT, in one place so no surface can quietly invent its own curve:
     --ease  cubic-bezier(.2,0,.2,1)   the house default, 24 uses in sfhsbta site.css
     --enter cubic-bezier(.16,1,.3,1)  entrances only
     --fast  140ms                     the house default duration, 20 uses
   NOTHING BOUNCES. No overshoot easing anywhere in these files. The audience is fifteen,
   and an overshoot is the fastest way to make a tool read as built for eight-year-olds. */

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

html, body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  /* The browser chrome bar appearing mid-question must not resize the layout under a
     thumb that is already moving toward a button (3.6). */
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; }

/* The mono face is the INSTRUMENT, never the voice: numbers, codes and labels only. */
.meta, .hint, .step, code, .bnum, .brank { font-family: "JetBrains Mono", ui-monospace, monospace; }
.meta, .hint { color: var(--muted); font-size: 13px; letter-spacing: .02em; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.brand { font-size: clamp(38px, 9vw, 72px); margin: 0 0 24px; }
.bang { color: var(--accent); }

.door {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  /* 16px side gutter, generous and uneven vertically -- nothing is centred in a box it
     does not fill. */
  padding: 32px 16px 15vh;
  max-width: 520px; margin: 0 auto;
}

.joinform { display: flex; flex-direction: column; gap: 10px; }
label { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

input[type="text"], input[type="password"], input[type="number"], input:not([type]), textarea, select {
  font: inherit; font-size: 20px;
  background: rgba(255,255,255,.05);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.14);   /* a hairline, not a box */
  border-radius: 10px;
  padding: 14px 16px;
  width: 100%;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
#code { font-family: "JetBrains Mono", monospace; font-size: 32px; letter-spacing: .22em; text-align: center; }

button, .big {
  font: inherit; font-weight: 600; font-size: 18px;
  background: var(--accent); color: var(--surface);
  border: 0; border-radius: 10px;
  /* 48px minimum target: a thumb, one-handed, under a timer. */
  padding: 15px 22px; min-height: 52px;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
button:active { transform: scale(.985); }        /* weight, not springiness */
button:disabled { opacity: .35; cursor: default; }
button.quiet { background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,.14); }
button.danger { color: var(--wrong); }

.bad { color: var(--wrong); font-weight: 600; }
.good { color: var(--correct); font-weight: 600; }

/* ---- the avatar grid ---- */
.avatars { border: 0; padding: 0; margin: 8px 0 0; }
.avatars legend { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.av { display: inline-block; }
.av input { position: absolute; opacity: 0; }
.av span {
  display: block; padding: 4px; border-radius: 12px;
  border: 1px solid transparent;
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.av input:checked + span { border-color: var(--accent); transform: scale(1.06); }
.av input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  /* A REAL reduced path, not a disabled one: state still changes, it just arrives rather
     than travels. Vestibular sensitivity is common and this is a room of children. */
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ---- team mode: one device, one team ---- */
.named { display: flex; gap: 8px; align-items: stretch; }
.named input { flex: 1; }
.reroll { flex: none; font-size: 14px; padding: 0 14px; min-height: 0;
  background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,.16); }
.reroll:hover { color: var(--accent); border-color: var(--accent); }
.members { border: 0; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.members legend { font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); }
.members legend .hint { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.member { font-size: 17px; padding: 11px 14px; }