/* the meantime quiz: player site
   design: "Meantime Round" (claude design, turn 1, panel 1a). cream ground on
   every round, the round's colour as accent. square corners, hairline rules,
   archivo for display, dm mono for labels and buttons, a highlighter stroke
   behind the rule and each revealed answer. */

:root {
  --g1: #B9B4F2;  /* periwinkle */
  --g2: #9CDCBA;  /* mint */
  --g3: #F5C09A;  /* apricot */
  --g4: #9BCDEE;  /* sky */
  --g5: #F7BCB9;  /* rose */
  --g6: #EDE28E;  /* butter */
  --g7: #A9BED2;  /* steel */
  --steel: #93A9BD;
  --teal: #1B3F44;
  --cream: #F4F0E7;
  --ink: #17181B;
  --ink-muted: #6b6960;
  --ink-soft: #5f5d55;
  --hairline: #ddd7c7;
  --dots: #cdc7b7;
  --underline: #b9b3a2;
  --marker: #ECFF3F;
  --a1: #6E62C7; --a2: #1f4a35; --a3: #B86A2A; --a4: #2F7EAE; --a5: #B8484D; --a6: #7A6612; --a7: #2F4A63;
  --s1: #3F3A78; --s2: #2A5A42; --s3: #6B4426; --s4: #2B4F66; --s5: #6A3235; --s6: #55490D; --s7: #24384B;
  --teal-card: #2A5257; --teal-track: #48737A; --teal-border: #4F7A80; --teal-muted: #B7C9CB; --teal-sub: #A9C5C7;
  --caption: var(--ink-muted);

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-meta: 'DM Mono', 'SFMono-Regular', Menlo, monospace;

  --ground: var(--cream);
  --accent: var(--ink);
  --sub: var(--ink-muted);
  --fg: var(--ink);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.45;
  transition: background-color 230ms ease-out, color 230ms ease-out;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  body, .btn, .row, .screen, .stroke { transition: none !important; animation: none !important; }
}

/* hue classes: rounds keep the cream ground and take their colour as accent */
body.hue-periwinkle { --accent: var(--a1); --sub: var(--s1); }
body.hue-mint       { --accent: var(--a2); --sub: var(--s2); }
body.hue-apricot    { --accent: var(--a3); --sub: var(--s3); }
body.hue-sky        { --accent: var(--a4); --sub: var(--s4); }
body.hue-rose       { --accent: var(--a5); --sub: var(--s5); }
body.hue-butter     { --accent: var(--a6); --sub: var(--s6); }
body.hue-steel      { --accent: var(--a7); --sub: var(--s7); }
body.hue-teal       { --ground: var(--teal); --fg: var(--cream); --sub: var(--teal-sub); --caption: var(--teal-muted); --marker: #F4F1E8; --accent: var(--g3); }
body.hue-cream      { --ground: var(--cream); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
input { font: inherit; color: inherit; border-radius: 0; }

/* the column. phone width on mobile, centred on anything larger */
.screen {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(32px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.screen.hub { gap: 18px; }
@media (min-width: 700px) {
  .screen { padding-top: 48px; padding-bottom: 48px; }
}

/* type */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.meta { font-family: var(--font-meta); font-weight: 400; }
.wordmark { font-size: 27px; line-height: 1; letter-spacing: -0.035em; padding-top: 2px; }
.brand { display: flex; align-items: center; gap: 10px; }
/* the mark: never scaled below 24px here, so the full cut with the smile is
   right. clear space is half the star's width, which the topbar gap gives. */
.brand .star { display: block; width: 32px; height: 32px; flex: none; }
.h-title { font-size: 56px; line-height: 0.92; letter-spacing: -0.03em; text-wrap: pretty; overflow-wrap: anywhere; }
.h-title.long { font-size: 44px; }
.h-sentence { font-size: 34px; line-height: 1.02; letter-spacing: -0.03em; text-wrap: pretty; }
.eyebrow { font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.rule-text { margin: 2px 0 0; font-size: 19px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.date { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.shape { font-size: 11.5px; color: var(--ink-muted); }
.caption { font-family: var(--font-meta); font-size: 10.5px; text-align: center; color: var(--caption); }
.helper { font-size: 14px; line-height: 1.4; }
.muted { color: var(--ink-muted); }

/* header */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.topbar .col { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.pill {
  font-family: var(--font-meta); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--ink); padding: 6px 11px 7px; white-space: nowrap;
}
.pill.fill { background: var(--ink); color: var(--cream); }
.pill.invert { background: var(--cream); color: var(--ink); box-shadow: none; }
.pill.rule {
  font-size: 12px; letter-spacing: 0; text-transform: none; padding: 10px 14px; align-self: flex-start;
  line-height: 1.3; white-space: normal;
}
body.hue-teal .pill { box-shadow: inset 0 0 0 1px var(--teal-border); }
body.hue-teal .pill.rule { color: var(--teal-muted); }
.nav { font-family: var(--font-meta); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
body.hue-teal .nav { color: var(--teal-muted); }

.stack { display: flex; flex-direction: column; gap: 12px; }
.stack.tight { gap: 10px; }
.title-block { display: flex; flex-direction: column; gap: 12px; }

/* hub rows */
.rows { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; width: 100%; text-align: left;
  color: var(--ink); transition: transform 120ms ease-out;
}
.row:active { transform: scale(0.99); }
.row .num { font-family: var(--font-meta); font-size: 11px; width: 22px; flex: 0 0 22px; white-space: nowrap; padding-top: 2px; }
.row .body { flex: 1 1 auto; min-width: 0; }
.row .title { display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 22px; line-height: 1.1; }
.row .sub { display: block; font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 5px; }
.row .arrow { font-family: var(--font-meta); font-size: 13px; white-space: nowrap; }
.row.h1 { background: var(--g1); } .row.h1 .sub, .row.h1 .num { color: var(--s1); }
.row.h2 { background: var(--g2); } .row.h2 .sub, .row.h2 .num { color: var(--s2); }
.row.h3 { background: var(--g3); } .row.h3 .sub, .row.h3 .num { color: var(--s3); }
.row.h4 { background: var(--g4); } .row.h4 .sub, .row.h4 .num { color: var(--s4); }
.row.h5 { background: var(--g5); } .row.h5 .sub, .row.h5 .num { color: var(--s5); }
.row.h6 { background: var(--g6); } .row.h6 .sub, .row.h6 .num { color: var(--s6); }
.row.h7 { background: var(--g7); } .row.h7 .sub, .row.h7 .num { color: var(--s7); }
.row.bonus { background: var(--steel); color: var(--ink); } .row.bonus .sub, .row.bonus .num { color: #2f3d49; }
.row.done .arrow { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.row.faded { opacity: 0.55; }

/* the question list: hairline rows on the ground, no card */
.card, .cards { display: flex; flex-direction: column; gap: 0; }
.qrow, .mini, .ncard {
  display: flex; flex-direction: column; gap: 0; padding: 20px 0; border-top: 1px solid var(--hairline);
}
.qrow > .panel, .mini > .panel, .ncard > .panel, .ncard > .answer-line { margin-top: 14px; }
.qrow .qhead, .mini .qhead, .ncard .qhead { display: flex; gap: 14px; align-items: flex-start; }
.clip .qhead { display: flex; flex-direction: column; gap: 14px; }
.qrow .n, .mini .n, .ncard .n {
  flex: 0 0 auto; font-family: var(--font-meta); font-size: 11px; line-height: 1.6; color: var(--accent); padding-top: 3px; min-width: 19px;
}
.qrow .q, .mini .q, .ncard .q { flex: 1 1 auto; min-width: 0; }
.qrow .q p, .mini .q p, .ncard .q p { margin: 0; font-size: 22px; line-height: 1.16; font-weight: 500; letter-spacing: -0.015em; text-wrap: pretty; }
.mini.fake { outline: 0; }
.mini.picked .q p { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.ncard .answer-line { display: flex; align-items: center; gap: 10px; }
.ncard .answer-line { padding-left: 33px; }
.answer-line input {
  flex: 1 1 auto; min-width: 0; height: 36px; border: 0; border-bottom: 1.5px dotted var(--dots);
  background: transparent; font-family: var(--font-meta); font-size: 15px; padding: 0 2px;
}
.answer-line input:focus { outline: none; border-bottom-color: var(--ink); }
.answer-line .unit { font-family: var(--font-meta); font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.answer-line input:disabled { color: var(--ink); opacity: 1; -webkit-text-fill-color: var(--ink); }

/* answers, revealed */
.ans { display: flex; flex-direction: column; gap: 12px; }
.ans .a { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); }
.ans .lines { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-meta); font-size: 10.5px; line-height: 1.5; color: var(--ink-muted); }
.ans .also, .ans .src, .ans .delta, .ans .range { font-family: var(--font-meta); font-size: 10.5px; line-height: 1.5; color: var(--ink-muted); }
.ans .src a { text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; }
.ans .delta.close, .ans .range { color: var(--accent); }
.verdict { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); }

/* the highlighter: one rough stroke per line box, swiped in */
.hl { position: relative; display: inline-block; }
.hl .t { position: relative; }
body.hue-teal .hl .t { color: var(--ink); }
body.hue-teal .rule-text .hl { padding: 0 2px; }
.stroke {
  position: absolute; pointer-events: none; background: var(--marker); border-radius: 3px;
  animation: swipe 430ms cubic-bezier(.22,.85,.28,1) both;
}
@keyframes swipe { from { clip-path: inset(-30% 101% -30% -2%); } to { clip-path: inset(-30% -4% -30% -2%); } }

/* per-question reveal, answer, then the button row */
.fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 240ms ease-out, opacity 200ms ease-out; }
.fold.on { grid-template-rows: 1fr; opacity: 1; }
.fold-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 0 0 33px; }
.clip .fold-in { padding-left: 0; }
@media (prefers-reduced-motion: reduce) { .fold { transition: none; } }

.qb { -webkit-tap-highlight-color: transparent; }
.panel { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 33px; width: 100%; }
.clip .panel { padding-left: 0; }
.mini.qb .panel:empty { display: none; }

.reveal, .chip {
  font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0 16px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--ink);
  transition: transform 120ms ease-out, background-color 160ms ease-out, color 160ms ease-out;
}
.reveal:active, .chip:active { transform: scale(0.97); }
.reveal.open { background: transparent; color: var(--ink); }
.reveal.pick { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--dots); }
.reveal.pick.on { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--ink); color: var(--cream); }
.reveal.pick:disabled { opacity: 0.4; }
.reveal.round { width: 100%; height: 58px; font-size: 11px; margin-top: 20px; }
.markbar { display: contents; }
.chip { background: transparent; color: var(--ink); }
.chip.on { background: var(--ink); color: var(--cream); }
body.hue-teal .reveal { background: var(--cream); color: var(--ink); box-shadow: none; }
body.hue-teal .reveal.open { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--teal-border); }
body.hue-teal .chip { color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--teal-border); }
body.hue-teal .chip.on { background: var(--cream); color: var(--ink); box-shadow: none; }

/* bonus clips */
.clip { background: var(--teal-card); padding: 18px; display: flex; flex-direction: column; gap: 14px; color: var(--cream); }
.clip .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.clip .label { font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.clip .len { font-family: var(--font-meta); font-size: 10.5px; color: var(--teal-muted); white-space: nowrap; }
.clip .body { display: flex; align-items: center; gap: 14px; }
.clip .play {
  width: 52px; height: 52px; color: var(--ink); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 18px;
}
.clip .track { display: block; height: 4px; background: var(--teal-track); }
.clip .col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.clip .ladder-wrap { display: flex; flex-direction: column; gap: 10px; }
.clip .ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.clip .rung { appearance: none; border: 0; padding: 12px 0 10px; cursor: pointer; background: var(--teal-track); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1;
  transition: transform 120ms ease-out, background-color 200ms; }
.clip .rung .pts { font-family: var(--font-meta); font-weight: 400; font-size: 10.5px; color: var(--teal-muted); }
.clip .rung:hover { transform: translateY(-1px); }
.clip .rung.playing { background: var(--g4); color: var(--ink); }
.clip .rung.playing .pts { color: var(--ink-muted); }
.clip .rung.used { background: var(--teal-card); color: var(--teal-muted); box-shadow: inset 0 0 0 1px var(--teal-border); }
.c1 .rung.playing { background: var(--g3); } .c2 .rung.playing { background: var(--g2); }
.clip .track i { display: block; height: 100%; width: 0; background: var(--g4); }
.c1 .track i { background: var(--g3); } .c2 .track i { background: var(--g2); }
.clip .offer-row { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-meta); font-size: 11.5px; color: var(--teal-muted); }
.clip .offer-row .note { color: var(--g5); }
.attrib { font-family: var(--font-meta); font-size: 11px; color: var(--teal-sub); margin: 4px 0 0; }
.clip img { width: 100%; display: block; }
.clip .ans .a { color: var(--ink); font-size: 26px; }
.clip .ans .a .hl { padding: 0 2px; }
.clip .ans .also, .clip .ans .src { color: var(--teal-muted); }
.c1 .label { color: var(--g3); } .c1 .play { background: var(--g3); }
.c2 .label { color: var(--g2); } .c2 .play { background: var(--g2); }
.clip.qb { gap: 0; }
.clip.qb > .helper { margin-top: 10px; }
.clip.qb .panel { margin-top: 14px; }

/* footer + buttons */
.foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--hairline); }
body.hue-teal .foot { border-top-color: var(--teal-border); }
.foot-row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.foot-row .q { font-family: var(--font-meta); font-size: 10.5px; color: var(--ink-muted); }
.this-round { display: flex; flex-direction: column; gap: 6px; }
.this-round .line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.this-round .k { font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.this-round .v { display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto; }
.this-round .v b { font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: -0.03em; line-height: 1; }
.this-round .v span { font-family: var(--font-meta); font-size: 11px; color: var(--ink-muted); }
body.hue-teal .this-round .k, body.hue-teal .this-round .v span { color: var(--teal-muted); }
.btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 58px; text-align: center;
  background: var(--ink); color: var(--cream);
  font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.015em;
  transition: transform 120ms ease-out;
}
.btn:active { transform: scale(0.98); }
.btn.invert { background: var(--cream); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
body.hue-teal .btn.ghost { color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--teal-border); }
.btn[disabled] { opacity: 0.5; cursor: default; }

/* teams */
.team { padding: 16px 0; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: 12px; }
.team .name { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team .total { font-family: var(--font-meta); font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 34px; height: 34px; box-shadow: inset 0 0 0 1.5px var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.stepper .v { font-family: var(--font-meta); font-size: 14px; min-width: 20px; text-align: center; }
.team-form { display: flex; gap: 8px; }
.team-form input { flex: 1 1 auto; min-width: 0; background: transparent; color: var(--ink); border: 0; box-shadow: inset 0 0 0 1.5px var(--ink); padding: 0 14px; height: 44px; font-size: 15px; }
.team-form input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.team-form button { flex: 0 0 auto; background: var(--ink); color: var(--cream); padding: 0 18px; height: 44px; font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.team .x { font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding: 6px 0; }
.scores { display: flex; flex-direction: column; gap: 8px; }
.scores-head { font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.tally { display: flex; flex-direction: column; }
.tally .qrow { flex-direction: row; align-items: baseline; padding: 14px 0; gap: 12px; }
.tally .name { flex: 1 1 auto; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 20px; }
.tally .pts { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; font-size: 28px; }
.tally .of { font-family: var(--font-meta); font-size: 11px; color: var(--ink-muted); margin-left: 6px; }

/* editions list */
.list-link { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--hairline); }

.empty { font-size: 14px; color: var(--ink-muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* header score + round strip */
.row-r { display: flex; align-items: center; gap: 8px; }
.pill.score { display: inline-flex; align-items: baseline; gap: 5px; font-size: 10px; letter-spacing: 0.1em; padding: 6px 11px 7px; background: var(--ink); color: var(--cream); box-shadow: none; }
.pill.score b { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: -0.02em; }
.pill.score .sn { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
body.hue-teal .pill.score { background: var(--cream); color: var(--ink); }
.strip { display: flex; gap: 5px; align-items: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.rs {
  flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); background: transparent;
  opacity: 0.6; transition: opacity 150ms ease-out, transform 120ms ease-out;
}
.rs:active { transform: scale(0.94); }
.rs.h1 { background: var(--g1); } .rs.h2 { background: var(--g2); } .rs.h3 { background: var(--g3); } .rs.h4 { background: var(--g4); } .rs.h5 { background: var(--g5); } .rs.h6 { background: var(--g6); } .rs.h7 { background: var(--g7); }
.rs.bonus { background: var(--steel); }
.rs.home, .rs.end { font-family: var(--font-meta); font-size: 13px; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--dots); opacity: 1; }
.rs.done { opacity: 0.85; }
.rs.cur { opacity: 1; box-shadow: inset 0 0 0 2px var(--ink); }
body.hue-teal .rs.home, body.hue-teal .rs.end { color: var(--teal-muted); box-shadow: inset 0 0 0 1px var(--teal-border); }
body.hue-teal .rs.bonus { background: var(--cream); }
body.hue-teal .rs.cur { box-shadow: inset 0 0 0 2px var(--cream); }

/* ------------------------------------------------------------------ chrome
   in-app dialogs, notices and toasts. ROADMAP phase 9. no browser dialog is
   used anywhere in this app, so these carry every decision and every error. */

.sheet {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(23, 24, 27, 0);
  transition: background-color 200ms ease-out;
}
.sheet.on { background: rgba(23, 24, 27, 0.42); }
.sheet-panel {
  width: 100%; max-width: 520px;
  background: var(--cream); color: var(--ink);
  padding: 14px 22px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -1px 0 var(--ink);
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.sheet.on .sheet-panel { transform: translateY(0); }
.sheet-grip { width: 42px; height: 3px; background: var(--dots); margin: 0 auto 18px; }
.sheet-title { font-size: 27px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 8px; }
.sheet-body { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 20px; }
.sheet-acts { display: flex; flex-direction: column; gap: 9px; }
.sheet-acts .btn { height: 54px; font-size: 18px; }
.btn.danger { background: #8E2F33; color: var(--cream); }

.notice {
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  padding: 16px 18px; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}
.notice.error { box-shadow: inset 0 0 0 1.5px #8E2F33; }
.notice-t { font-size: 14px; color: var(--ink-soft); }
.notice.error .notice-t { color: #8E2F33; }
.notice-a {
  flex: 0 0 auto; font-family: var(--font-meta); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  padding: 8px 12px; box-shadow: inset 0 0 0 1.5px var(--ink);
}

.toast {
  position: fixed; left: 50%; z-index: 70;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 14px);
  background: var(--ink); color: var(--cream);
  font-family: var(--font-meta); font-size: 11px; letter-spacing: 0.08em;
  padding: 11px 18px; pointer-events: none;
  opacity: 0; transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------- accounts
   ROADMAP phase 8. email only, no password. */

.auth-form { display: flex; flex-direction: column; gap: 10px; }
.field {
  width: 100%; height: 54px; background: transparent; color: var(--ink);
  border: 0; box-shadow: inset 0 0 0 1.5px var(--ink);
  padding: 0 16px; font-size: 16px; font-family: var(--font-body);
}
.field:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--ink); }
.field::placeholder { color: var(--dots); }
.field.code {
  font-family: var(--font-meta); font-size: 26px; letter-spacing: 0.34em;
  text-align: center; padding-right: 0;
}
.field-err { font-family: var(--font-meta); font-size: 10.5px; color: #8E2F33; min-height: 14px; }

.pill.status {
  background: transparent; color: var(--ink-muted);
  box-shadow: inset 0 0 0 1.5px var(--dots);
  font-size: 9.5px; white-space: nowrap;
}
.topbar .row-r { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

/* ------------------------------------------- interstitials and the grid
   ROADMAP phase 10. a beat before each round, and answered-vs-unanswered
   across the whole edition. */

.screen.inter { justify-content: flex-start; }
.inter-mid {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  padding: 30px 0; cursor: pointer;
}
.inter-blurb {
  font-size: 16px; color: var(--ink-soft); margin: 14px 0 0; max-width: 30ch;
}

.grid-wrap { display: flex; flex-direction: column; gap: 9px; }
.qgrid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}
.gcell {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-meta); font-size: 10.5px; color: var(--ink-muted);
  box-shadow: inset 0 0 0 1.5px var(--hairline); background: transparent;
}
.gcell.g-right { background: var(--ink); color: var(--cream); box-shadow: none; }
.gcell.g-wrong { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
@media (max-width: 380px) { .qgrid { grid-template-columns: repeat(5, 1fr); } }

/* ------------------------------------------------------------- the archive
   ROADMAP phase 15. this week gets the room, the back catalogue gets a row of
   dates. an archive play scores the same and never reaches the leaderboard of
   the week it was live. */

.live-tile {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px 20px; margin-top: 4px;
  background: var(--g1); color: var(--ink); text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.live-tile:active { transform: scale(0.995); }
.lt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lt-top .meta { font-size: 10.5px; }
.lt-sentence {
  font-size: 27px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.08;
}
.lt-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lt-foot .meta { font-size: 10.5px; }
.lt-state { color: var(--s1); }
.lt-go {
  display: flex; align-items: center; justify-content: center;
  height: 54px; margin-top: 4px;
  background: var(--ink); color: var(--cream);
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  letter-spacing: -0.015em;
}
.lt-free {
  font-size: 10.5px; text-align: center; color: var(--s1);
}

.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
@media (max-width: 380px) { .arch-grid { grid-template-columns: repeat(2, 1fr); } }
.arch {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 12px; color: var(--ink); text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}
.arch.started { box-shadow: inset 0 0 0 1.5px var(--ink); }
.arch.locked { opacity: 0.6; }
.arch:active { opacity: 0.6; }
.arch-no { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.arch-date { font-size: 10px; color: var(--ink-muted); }
.arch-state { font-size: 10px; color: var(--ink-muted); margin-top: 4px; }
.arch.started .arch-state { color: var(--ink); }

/* the archive list while it loads. never a spinner on its own. */
.skel-list { display: flex; flex-direction: column; }
.skel-row {
  height: 78px; border-top: 1px solid var(--hairline);
  background: linear-gradient(90deg, transparent, rgba(205,199,183,0.22), transparent);
  background-size: 200% 100%;
  animation: skel 1.3s ease-in-out infinite;
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-row { animation: none; } }

/* locked rows and the picker's section heading */
.meta.section {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: 22px;
}
.row.locked { opacity: 0.62; }
.row.locked .title { text-decoration: none; }

button.pill.status { cursor: pointer; font-family: var(--font-meta); }
button.pill.status:active { opacity: 0.6; }

/* ------------------------------------------------------------------ modes
   ROADMAP phases 10 and 12. three ways to play the same 35 questions. */

.modes { display: flex; flex-direction: column; gap: 7px; margin-top: 22px; }
.mode {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px 16px; background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}
.mode.on { box-shadow: inset 0 0 0 2px var(--ink); }
.mode:disabled { opacity: 1; }
.modes.locked .mode { box-shadow: inset 0 0 0 1.5px var(--dots); }
.mode-n {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.02em;
}
/* no tick. the border already says which one is chosen, and a glyph tacked
   onto the end of a heading sits at the wrong weight next to Archivo. */
.mode-b { font-size: 13px; color: var(--ink-soft); }
.modes .q { font-family: var(--font-meta); font-size: 10.5px; color: var(--ink-muted); margin-top: 4px; }

/* the written test's answer line */
.qb.test { padding-bottom: 18px; }
.answer-line { display: flex; gap: 7px; align-items: stretch; margin-top: 10px; }
.answer-in {
  flex: 1 1 auto; min-width: 0; height: 46px; font-size: 16px;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.answer-in:disabled { box-shadow: inset 0 0 0 1.5px var(--dots); color: var(--ink-muted); }
.answer-line .reveal { flex: 0 0 auto; width: auto; padding: 0 16px; height: 46px; }
.callbar { display: flex; gap: 7px; margin-top: 10px; }
.callbar .chip { flex: 1 1 0; }

/* ----------------------------------------------------------------- results
   ROADMAP phase 11. the walkthrough, the leaderboard, and the percentages
   with their 30-response gate. */

.namebox { display: flex; flex-direction: column; gap: 7px; margin-top: 22px; }
.namebox .q { font-family: var(--font-meta); font-size: 10.5px; color: var(--ink-muted); }

.card.pad { padding: 20px 18px; box-shadow: inset 0 0 0 1.5px var(--hairline); }
.display.h-sentence.small { font-size: 24px; letter-spacing: -0.035em; }

.walk { display: flex; flex-direction: column; }
.wrow {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 0; border-top: 1px solid var(--hairline);
}
.wmark {
  flex: 0 0 auto; width: 18px; text-align: center;
  font-family: var(--font-meta); font-size: 14px; color: var(--ink-muted);
}
.wrow.got .wmark { color: var(--ink); }
.wbody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wq { font-size: 14.5px; color: var(--ink-soft); }
.wa {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em;
}
.wfoot { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pct { font-family: var(--font-meta); font-size: 10.5px; color: var(--ink); }
.pct.none { color: var(--ink-muted); }
.wfoot .src { font-family: var(--font-meta); font-size: 10.5px; color: var(--ink-muted); }

.rare { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.rare .wrow:first-of-type { border-top: 1px solid var(--hairline); }

.lrow {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--hairline);
}
.lpos { flex: 0 0 auto; width: 22px; font-size: 11px; color: var(--ink-muted); }
.lname {
  flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-weight: 600;
  font-size: 17px; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lrow.me { background: var(--marker); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.lscore { flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.lscore .of { font-family: var(--font-meta); font-weight: 400; font-size: 10.5px; color: var(--ink-muted); margin-left: 4px; }
.nav.reset { align-self: flex-start; margin-top: 2px; }

/* ----------------------------------------------------------------- profile
   who you are, what you have used, and every play you have made. */

.savestate { font-family: var(--font-meta); font-size: 10.5px; color: var(--ink-muted); }
.savestate.unsaved { color: #8E2F33; }

.prow {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 15px 0; border-top: 1px solid var(--hairline);
}
.pl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pno { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.pmeta { font-size: 10.5px; color: var(--ink-muted); }
.pr { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.pscore { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.pscore .of { font-family: var(--font-meta); font-weight: 400; font-size: 10.5px; color: var(--ink-muted); margin-left: 4px; }
.pstate { font-size: 10px; white-space: nowrap; }
.pstate.in { color: var(--ink); }
.pstate.part { color: var(--ink-muted); }
.pstate.none { color: var(--ink-muted); }

/* the saved name on the hub: a line, not a field that never goes away */
.namerow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink); text-decoration: none;
}
.namerow:active { opacity: 0.6; }
.nameval { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.namerow .meta { font-size: 10.5px; color: var(--ink-muted); white-space: nowrap; }

/* the wordmark goes home */
a.brand { text-decoration: none; color: inherit; }
a.brand:active { opacity: 0.6; }

/* ---------------------------------------------------------- the override
   ROADMAP phase 13. "no, i had this right", in the written test only. The
   mark flips on the spot; the row is feedback for Noah and the player is
   never told about it again. */

.wgiven { font-family: var(--font-meta); font-size: 10.5px; color: var(--ink-muted); }
.wgiven.miss { color: #8E2F33; }
.chip.claim {
  align-self: flex-start; margin-top: 8px; height: 36px; padding: 0 14px;
  font-size: 10.5px; box-shadow: inset 0 0 0 1.5px var(--ink);
}
.q.claimed {
  align-self: flex-start; margin-top: 8px;
  font-family: var(--font-meta); font-size: 10.5px; color: var(--ink);
}

/* the venue code field: read off a card, typed at a bar */
.field.code[maxlength="8"] { letter-spacing: 0.22em; font-size: 24px; }