/* Tokens from DESIGN.md. Gold is data only: live level, saved state, key-question dot, progress fill. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/inter-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/playfair-display-400-latin.woff2') format('woff2'); }

:root {
  --ground: #141414;
  --surface: #1c1c1c;
  --raised: #242424;
  --outline: #4a4a4a;
  --outline-hover: #6a6a6a;
  --field-border: #3a3a3a;
  --rule: #262626;
  --ink: #f4f2ed;
  --text-2: #b4b4b4;
  --meta: #949494;
  --gold: #c9a84c;
  --rec: #e5484d;
  --error: #ff7b72;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-title: 'Playfair Display', Georgia, serif;
  --fs-meta: 13px;
  --fs-body: 15px;
  --fs-q: 17px;
  --fs-h2: 22px;
  --fs-title: 32px;
}
@media (max-width: 600px) { :root { --fs-title: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
/* Tabular figures only on timers, counts and dates (their own rules); typed text and hints read exactly as typed. */
input, textarea, input::placeholder, textarea::placeholder, .hint { font-variant-numeric: normal; font-feature-settings: normal; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.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; }
.col { max-width: 760px; margin: 0 auto; padding: 0 16px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Wordmark */
.wm { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: var(--fs-meta); line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.wm-rule { display: block; width: 1px; height: 14px; background: var(--gold); }
.wm-client { display: block; margin-top: 2px; font-size: 12px; line-height: 1.2; color: var(--text-2); }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 10; background: var(--ground); border-bottom: 1px solid transparent; } /* taste-skill-ignore: DESIGN.md specifies this rule only when content scrolls under the bar */
.bar.scrolled { border-bottom-color: var(--rule); }
.bar-in { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.progress { text-align: right; min-width: 110px; }
.progress-count { display: block; font-size: var(--fs-meta); color: var(--text-2); }
.progress-track { display: block; height: 2px; margin-top: 6px; background: var(--raised); }
.progress-fill { display: block; height: 2px; width: 0; background: var(--gold); }
@media (prefers-reduced-motion: no-preference) { .progress-fill { transition: width 240ms ease-out; } }

main { padding-bottom: 8px; }
.gate { padding: 96px 0; font-size: var(--fs-q); color: var(--text-2); }
.gate.err { color: var(--error); }

/* Intro */
.intro { padding-top: 56px; }
.title { font: 400 var(--fs-title)/1.15 var(--font-title); letter-spacing: 0; color: var(--ink); }
.person { margin-top: 8px; color: var(--text-2); }
.intro-copy { margin-top: 28px; display: grid; gap: 16px; max-width: 62ch; }
.tips { margin-top: 20px; display: grid; gap: 12px; max-width: 62ch; }
.tips li { color: var(--text-2); }
.dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.tips .dot { vertical-align: middle; margin: 0 2px; position: relative; top: -1px; }
.tips .tick-s { display: inline-block; width: 12px; height: 12px; color: var(--gold); vertical-align: middle; margin: 0 2px; position: relative; top: -1px; }
.intro-act { margin-top: 28px; }
.sections { margin-top: 40px; }
.sections-label { font-size: var(--fs-meta); color: var(--meta); margin-bottom: 8px; }
.sections ol { display: grid; grid-template-columns: 1fr; column-gap: 32px; }
@media (min-width: 768px) { .sections ol { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), 40px); } }
.sections a { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; color: var(--ink); text-decoration: none; font-size: var(--fs-body); font-weight: 400; }
.sections li:nth-child(n+2) { border-top: 1px solid var(--rule); } /* taste-skill-ignore: the order specifies a 1px #262626 rule between section rows */
@media (min-width: 768px) { .sections li.col-first { border-top: 0; } }
@media (hover: hover) and (pointer: fine) { .sections a:hover .sec-name { text-decoration: underline; text-underline-offset: 3px; } }
.sec-count { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--meta); font-variant-numeric: tabular-nums; }
.sec-count.has { color: var(--ink); }
.sec-count .tick-s, .done-mark .tick-s { width: 12px; height: 12px; color: var(--gold); flex: none; }

/* Sections */
.block { margin-top: 96px; scroll-margin-top: 64px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.block-h { font: 600 var(--fs-h2)/1.25 var(--font-ui); color: var(--ink); }
.block-count { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.block-count .tick-s { width: 12px; height: 12px; color: var(--gold); flex: none; align-self: center; }
.block-p { margin-top: 6px; color: var(--text-2); }
.rows { margin-top: 20px; display: grid; gap: 8px; }

.q { position: relative; background: var(--surface); border-radius: 12px; padding: 20px; }
.q.dump { background: var(--raised); margin-top: 16px; }
.q-key { position: absolute; left: 7px; top: 29px; }
.q-text { font-size: var(--fs-q); line-height: 1.45; color: var(--ink); }
.q.dump .q-text { font-weight: 600; }
.q-help { margin-top: 4px; color: var(--text-2); }

/* Recorder: fixed slots so the pills never move between states */
.rec { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "pills status"; column-gap: 16px; align-items: start; }
.rec-pills { grid-area: pills; display: flex; gap: 8px; align-items: center; height: 40px; }
.rec-status { grid-area: status; min-height: 40px; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); flex-wrap: wrap; }
.rec-main { width: 104px; padding: 0; flex: none; }
.silence { flex: 1 1 100%; font-size: var(--fs-meta); color: var(--text-2); }
.silence-m { display: none; margin: 0; }
.status-empty { display: none; font-size: var(--fs-meta); color: var(--meta); }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); flex: none; }
.timer { font-size: var(--fs-body); min-width: 4ch; font-variant-numeric: tabular-nums; }
.bars { display: flex; align-items: center; gap: 2px; height: 24px; width: 158px; flex: none; }
.bars i { display: block; width: 3px; height: 24px; background: var(--outline); transform: scaleY(0.1667); transform-origin: center; border-radius: 1px; }
.bars i.on { background: var(--gold); }
.level { display: none; height: 4px; width: 158px; background: var(--outline); flex: none; }
.level i { display: block; height: 4px; width: 0; background: var(--gold); }
.reduce .bars { display: none; }
.reduce .level { display: block; }
.saving-line { position: relative; overflow: hidden; display: block; width: 120px; height: 2px; background: #2e2e2e; flex: none; }
.saving-line i { display: block; height: 2px; width: 0; background: var(--gold); }
.saving-line.indet i { position: absolute; left: 0; top: 0; width: 40px; animation: slide 1.2s linear infinite; }
@keyframes slide { from { transform: translateX(-40px); } to { transform: translateX(120px); } }
@media (prefers-reduced-motion: reduce) { .saving-line.indet i { animation: none; width: 60px; } }
.tick { width: 16px; height: 16px; flex: none; color: var(--gold); }
@media (prefers-reduced-motion: no-preference) { .tick, .saved-in { animation: fade-in 160ms ease-out; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.saved-text { color: var(--ink); }
.err-text { color: var(--error); }
.err-sub { color: var(--text-2); }
.meta { margin-top: 10px; font-size: var(--fs-meta); color: var(--meta); font-variant-numeric: tabular-nums; }
.note { margin-top: 10px; font-size: var(--fs-meta); color: var(--text-2); }

/* Pills */
.pill { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--outline); background: transparent; color: var(--ink); font-size: var(--fs-body); font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .pill:hover { border-color: var(--outline-hover); } }
.pill:active { transform: scale(0.98); }
.pill-primary { background: var(--ink); border-color: var(--ink); color: var(--ground); padding: 0 22px; }
.rec-main.pill-primary { padding: 0; }
@media (hover: hover) and (pointer: fine) { .pill-primary:hover { border-color: var(--ink); background: #ffffff; } }
.pill[disabled] { color: #6a6a6a; border-color: #2e2e2e; background: transparent; cursor: default; }
.pill-sm { height: 32px; padding: 0 16px; font-size: var(--fs-meta); }
.textbtn { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--fs-meta); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .textbtn:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 600px) {
  .pill { height: 44px; }
  .pill-sm { height: 32px; }
  .rec { grid-template-columns: 1fr; grid-template-areas: "status" "pills"; row-gap: 8px; }
  .silence-d { display: none !important; }
  .silence-m { display: block; margin-top: 4px; }
  .rec-status { min-height: 24px; }
  .rec-pills { height: 44px; }
  .rec-pills .pill { flex: 1 1 0; width: auto; }
  .rec-main { width: auto; }
  .status-empty { display: inline; }
}

/* Written answers */
.fields { margin-top: 24px; display: grid; gap: 24px; }
.field { position: relative; }
.field label { display: block; color: var(--ink); font-size: var(--fs-q); font-weight: 400; line-height: 1.4; }
.hint { margin-top: 4px; font-size: var(--fs-meta); color: var(--meta); }
.field textarea, .field input, .gate-form input { display: block; width: 100%; margin-top: 8px; background: var(--raised); border: 1px solid var(--field-border); border-radius: 8px; padding: 12px; color: var(--ink); line-height: 1.5; font-size: var(--fs-q); }
.field textarea { min-height: 72px; resize: none; overflow: hidden; }
.field input { height: 48px; padding-block: 0; }
.field-foot { height: 20px; justify-content: flex-end; display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); line-height: 1; color: var(--meta); font-variant-numeric: tabular-nums; }
.field-foot .tick-s { width: 12px; height: 12px; color: var(--gold); }

/* Finish */
.finish { background: var(--surface); border-radius: 12px; padding: 24px; }
.finish-line { margin-top: 6px; color: var(--text-2); max-width: 62ch; }
.finish-meta { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: var(--fs-meta); color: var(--meta); font-variant-numeric: tabular-nums; }
.finish-meta .dot { margin-right: 2px; vertical-align: middle; position: relative; top: -1px; }
.nowrap { white-space: nowrap; }
/* one shared link style: 1px #4a4a4a underline, 3px offset, #f4f2ed on hover */
.linkbtn, .help a, .back a, .back-more a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--outline); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .linkbtn:hover, .help a:hover, .back a:hover, .back-more a:hover { text-decoration-color: var(--ink); } }
.linkbtn { appearance: none; background: none; border: 0; padding: 0; margin-top: 8px; cursor: pointer; font-size: var(--fs-meta); }
.finish-act { margin-top: 20px; }
.sent { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sent .tick-s { width: 12px; height: 12px; color: var(--gold); flex: none; margin-top: 6px; }

/* Room */
.back { margin-top: 20px; font-size: var(--fs-meta); }
.back-more { margin-top: 16px; font-size: var(--fs-body); }
.back-foot { margin-top: 16px; }
.back + .gate { padding-top: 48px; }
.room-intro { padding-top: 56px; }
.room-copy { margin-top: 20px; max-width: 60ch; color: var(--ink); }
.room-items { margin-top: 48px; }
.items { display: grid; gap: 8px; }
.item { background: var(--surface); border-radius: 12px; padding: 24px; display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: center; }
.item-title { font: 600 var(--fs-q)/1.35 var(--font-ui); color: var(--ink); }
.item-text { margin-top: 6px; color: var(--text-2); max-width: 60ch; }
.item-meta { margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--meta); font-variant-numeric: tabular-nums; }
.item-meta:empty { display: none; }
.item-meta .tick-s { width: 12px; height: 12px; color: var(--gold); flex: none; }
a.pill { text-decoration: none; }
.item-player { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 8px; background: var(--ground); }
.item-video > .item-meta { grid-column: 1 / -1; margin-top: -8px; }
.group-label { font-size: var(--fs-meta); color: var(--meta); margin: 0 0 8px; }
.group-label-2 { margin-top: 24px; }
main.room-main { padding-bottom: 0; }
/* Room: the visible gap from the last card to the wordmark is 96px, so the footer drops its own top padding here. */
main.room-main ~ .foot { padding-top: 0; }
.pill .ext { width: 14px; height: 14px; margin-left: 6px; color: var(--text-2); flex: none; }
@media (max-width: 600px) {
  .room-intro { padding-top: 40px; }
  .item { grid-template-columns: 1fr; }
  .item-act a.pill { width: 100%; }
}

/* Footer */
.foot { margin-top: 96px; padding-top: 32px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.help { margin-top: 16px; color: var(--text-2); }
.foot .privacy { margin-top: 12px; font-size: var(--fs-meta); color: var(--meta); max-width: 62ch; }

/* Admin */
.bar-tools { display: flex; align-items: center; gap: 8px; }
.gate-intro { margin-top: 8px; color: var(--text-2); }
.gate-form { margin-top: 24px; display: grid; gap: 24px; max-width: 420px; }
.gate-form input::placeholder { color: #6a6a6a; opacity: 1; }
.keywrap { position: relative; }
.keywrap input { padding-right: 72px; }
.keytoggle { position: absolute; right: 12px; top: 0; height: 100%; display: flex; align-items: center; margin-top: 0; }
.gate-act .pill { width: 168px; }
.gate-err { margin-top: 8px; font-size: var(--fs-body); }
.gate-form label { display: block; font-size: var(--fs-body); color: var(--ink); }
.a-top { padding-top: 40px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title dl" "status status" "toggle toggle"; align-items: center; }
.a-title { grid-area: title; font: 400 28px/1.15 var(--font-title); color: var(--ink); }
.a-dl { grid-area: dl; }
.a-status { grid-area: status; margin-top: 16px; display: flex; align-items: center; gap: 6px; color: var(--text-2); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.a-status .tick-s { width: 12px; height: 12px; color: var(--gold); flex: none; }
.a-toggle { grid-area: toggle; margin-top: 24px; display: flex; gap: 4px; }
.a-toggle .textbtn { height: 28px; padding: 0 12px; border-radius: 999px; color: var(--meta); font-size: var(--fs-meta); }
.a-toggle .textbtn[aria-pressed="true"] { background: var(--raised); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .a-toggle .textbtn:hover { text-decoration: none; color: var(--ink); } }
@media (max-width: 600px) {
  .a-top { grid-template-columns: 1fr; grid-template-areas: "title" "status" "dl" "toggle"; }
  .a-status { margin-top: 8px; }
  .a-dl { margin-top: 16px; justify-self: start; }
}
.a-block { margin-top: 64px; }
.takes { margin-top: 12px; display: grid; gap: 0; }
.take { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 36px; }
.take-info { flex: 1 1 200px; font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums; }
.latest { color: var(--gold); margin-right: 8px; }
.unans { position: relative; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 6px 20px; }
.unans .q-key { top: 14px; }
.unans .q-text { font-size: var(--fs-body); color: var(--text-2); }
.unans .na { font-size: var(--fs-meta); color: var(--meta); white-space: nowrap; }
.text-block { margin-top: 6px; white-space: pre-wrap; color: var(--ink); }
.a-field + .a-field { margin-top: 20px; }
.a-label { color: var(--text-2); }
.empty { margin-top: 6px; color: var(--meta); font-size: var(--fs-meta); }
@media (max-width: 600px) {
  .a-block .rows { gap: 12px; }
  .unans { display: block; padding: 0 20px; }
  .unans .q-key { top: 8px; }
  .unans .na { display: block; margin-top: 4px; white-space: normal; }
  .takes { gap: 12px; }
  .take { gap: 8px 12px; }
  .take-info { flex: 1 1 100%; }
}