/* Charcoal stage (neutral, so color is judged the same for everyone) with a single
   signal color that only marks what the rater picks. */
:root {
  color-scheme: dark;
  --bg: #121212;
  --raise: #1c1c1c;
  --raise-2: #272727;
  --line: #303030;
  --text: #f4f3ef;
  --text-2: #aaa9a3;
  --text-3: #6c6b66;
  --signal: #ffd23f;
  --ink: #17140a;
  --ok: #5ccf8f;
  --warn: #f2a33a;
  --err: #ff6b5b;
  --ui: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --pad: 24px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 15px/1.45 var(--ui); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
p, h1, h2 { margin: 0; }

kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 6px; background: var(--raise-2); color: var(--text-2);
  font: 600 12px/1 var(--ui);
}

.boot { position: fixed; inset: 0; display: grid; place-items: center; opacity: .5; }
.boot.error { opacity: 1; color: var(--err); font-size: 15px; padding: 24px; text-align: center; }

/* Buttons ------------------------------------------------------------------ */
.go {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 30px; border: 0; border-radius: 14px;
  background: var(--signal); color: var(--ink); font-weight: 700; font-size: 17px;
  transition: transform .08s, filter .15s;
}
.go:hover { filter: brightness(1.07); }
.go:active { transform: translateY(1px); }
.go:disabled { opacity: .5; cursor: default; }
.go kbd { background: rgba(0,0,0,.12); color: rgba(0,0,0,.6); }
.go.small { height: 46px; padding: 0 22px; font-size: 16px; border-radius: 999px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--raise);
  font-weight: 600; font-size: 16px; transition: background .12s, border-color .12s, color .12s;
}
.pill:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--raise-2); }
.pill[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.pill[aria-pressed="true"] kbd { background: rgba(0,0,0,.12); color: rgba(0,0,0,.6); }
.pill:disabled { opacity: .3; cursor: default; }
.pill.quiet { background: transparent; }
.round {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--raise);
  color: var(--text-2); font-weight: 700; font-size: 16px;
}
.round:hover { color: var(--text); background: var(--raise-2); }
.round.small { width: 30px; height: 30px; font-size: 12px; }
.round svg { width: 13px; height: 13px; fill: currentColor; }
.text-btn { padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--text-3); font-size: 13px; font-weight: 600; }
.text-btn:hover { color: var(--text); background: var(--raise-2); }

/* Start and done ------------------------------------------------------------ */
#view-start, #view-done { min-height: 100dvh; display: grid; place-items: center; padding: 32px 18px; }
.start-wrap { width: min(600px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.teaser { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 40px; }
.teaser figure {
  position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 14px; background: #000;
  outline: 3px solid transparent; outline-offset: 5px; animation: pick 3.6s ease-in-out infinite;
}
.teaser figure:last-of-type { animation-delay: 1.8s; }
.teaser video { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.teaser b { position: absolute; left: 12px; bottom: 6px; font: 900 40px/1 var(--display); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.teaser figure:last-of-type b { left: auto; right: 12px; }
.vs { font: 800 20px/1 var(--display); text-transform: uppercase; color: var(--text-3); }
@keyframes pick {
  0%, 8% { outline-color: transparent; }
  14%, 40% { outline-color: var(--signal); }
  48%, 100% { outline-color: transparent; }
}
#view-start h1, #view-done h1 { font: 900 clamp(46px, 8vw, 76px)/.92 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.sub { margin-top: 12px; color: var(--text-2); font-size: 17px; }
.start-form { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.code-field {
  display: flex; align-items: center; gap: 4px; height: 54px; padding: 0 8px 0 18px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--raise); cursor: text;
}
.code-field span { color: var(--text-3); font-size: 13px; font-weight: 600; margin-right: 6px; }
.code-field input {
  width: 128px; border: 0; background: none; outline: none;
  font-weight: 700; font-size: 18px; letter-spacing: .1em; text-transform: uppercase;
}
.error { min-height: 1.4em; margin-top: 10px; color: var(--err); font-size: 14px; }
.notice { margin-top: 6px; color: var(--text-3); font-size: 12.5px; max-width: 440px; }
.notice code { color: var(--text-2); letter-spacing: .08em; font: 600 13px var(--ui); }

.done-strip { flex: none; width: 100%; height: 10px; margin: 30px 0; }
.after { width: 100%; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.after > p { color: var(--text-2); font-size: 14px; }
.chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--text-2); font-weight: 600; font-size: 14px; }
.chip:hover { color: var(--text); }
.chip[aria-checked="true"] { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.feedback { display: flex; gap: 8px; margin-top: 18px; }
.feedback input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--raise); outline: none; }
.feedback input:focus { border-color: var(--text-3); }

/* Study ---------------------------------------------------------------------
   Prompt, videos, A/B row and answers form one group centered on the screen;
   app.js sizes the videos to whatever height that group leaves free. */
.study { height: 100dvh; display: flex; flex-direction: column; padding: 18px var(--pad) 16px; }
.corner { position: fixed; top: 16px; right: 18px; z-index: 5; display: flex; align-items: center; gap: 14px; }
.net-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6;
  padding: 8px 14px; border-radius: 999px; background: #3a2a10; color: var(--warn); font-size: 14px; font-weight: 600;
}
.net-banner.error { background: #3a1512; color: var(--err); }
@keyframes blink { 50% { opacity: .25; } }
.composition { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.prompt {
  width: min(100%, var(--stage-w, 1000px)); align-self: center; padding: 0 48px;
  text-align: center; font-size: clamp(19px, 1.7vw, 25px); font-weight: 500; line-height: 1.3; text-wrap: balance;
}
.prompt::before { content: "\201C"; color: var(--text-3); }
.prompt::after { content: "\201D"; color: var(--text-3); }

.stage { position: relative; flex: none; height: var(--stage-h, 300px); display: flex; justify-content: center; align-items: center; gap: 22px; }
.clip {
  position: relative; flex: none; width: var(--clip-w, 480px); height: var(--clip-h, 280px);
  border-radius: 14px; background: #000; cursor: pointer;
  outline: 3px solid transparent; outline-offset: 5px; transition: outline-color .15s;
}
.clip video { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.stage.loading video { opacity: 0; }
.stage.lean-a #clip-a, .stage.lean-b #clip-b { outline-color: rgba(255, 210, 63, .55); }
.stage.lean-tie .clip { outline-color: rgba(255, 210, 63, .35); outline-style: dashed; }
.letter { display: none; }
.stage-error {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; text-align: center;
  background: rgba(18,18,18,.94); color: var(--text-2); z-index: 2;
}
.stage-error div { display: flex; gap: 8px; justify-content: center; }

.under { width: min(100%, var(--stage-w, 1000px)); align-self: center; display: grid; grid-template-columns: 1fr minmax(0, 520px) 1fr; align-items: center; gap: 16px; }
.tag { font: 900 34px/1 var(--display); color: var(--text-2); }
.tag-b { justify-self: end; }
.transport { display: flex; align-items: center; gap: 10px; }
.scrubber { flex: 1; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.scrubber::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--text-2) var(--fill, 0%), var(--line) var(--fill, 0%)); }
.scrubber::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line); }
.scrubber::-moz-range-progress { height: 3px; background: var(--text-2); }
.scrubber::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%; background: var(--text); border: 0; }
.scrubber::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--text); border: 0; }
.speed[aria-pressed="true"] { background: var(--text); color: var(--bg); }

.ask { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.ask-side { display: flex; justify-content: flex-end; }
.ask-side.right { justify-content: flex-start; align-self: end; gap: 8px; }
.go[aria-disabled="true"] { opacity: .4; cursor: default; filter: none; }
.pill.quiet:disabled { opacity: .35; cursor: default; }
.watch-box { display: grid; gap: 8px; justify-items: end; color: var(--text-2); font-size: 14px; font-weight: 600; }
.watch { width: 150px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.watch div { height: 100%; width: 0; background: var(--signal); }

.matrix { display: grid; grid-template-columns: auto repeat(var(--choices, 3), 84px); align-items: center; gap: 6px 8px; }
.matrix .head { text-align: center; color: var(--text-3); font-size: 13px; font-weight: 600; }
.matrix .head b { font: 900 22px/1 var(--display); color: var(--text-2); margin: 0 4px; vertical-align: -2px; }
.matrix .head kbd { min-width: 20px; height: 20px; font-size: 11px; }
.row-label {
  position: relative; display: flex; align-items: center; gap: 10px; padding-right: 10px; color: var(--text-2);
  font-size: 16px; font-weight: 600; white-space: nowrap; transition: color .15s;
}
.row-label svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.row-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: none; }
.row-label:hover { color: var(--text); }
.row-label[data-hint]:hover::after {
  content: attr(data-hint); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  width: 260px; padding: 10px 12px; border-radius: 10px; background: var(--raise-2); color: var(--text);
  font-size: 13.5px; font-weight: 500; line-height: 1.4; white-space: normal; text-align: left; z-index: 4; pointer-events: none;
}
.row-label.missing { color: var(--signal); }
.row-label.missing::before { background: var(--signal); }
.cell {
  height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--raise);
  font-weight: 700; font-size: 15px; color: var(--text-3);
  transition: background .12s, border-color .12s, color .12s;
}
.cell { color: var(--text-2); }
.cell:hover:not([aria-disabled="true"]):not([aria-pressed="true"]) { background: var(--raise-2); color: var(--text); border-color: #474747; }
.cell[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.cell[aria-pressed="true"]:hover { filter: brightness(1.06); }
.cell[aria-disabled="true"] { opacity: .3; cursor: not-allowed; }
.cell.missing { border-color: var(--signal); }
.watch-box.nudge { animation: nudge .45s ease; }
@keyframes nudge { 30% { transform: translateX(-6px); color: var(--signal); } 60% { transform: translateX(4px); } }
.hint { max-width: 520px; margin: 10px auto 0; color: var(--text-2); font-size: 14px; text-align: center; }

.film { flex: none; display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.counter { min-width: 64px; font: 800 20px/1 var(--display); letter-spacing: .03em; color: var(--text-2); }
.strip { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 10px; }
.strip i { border-radius: 2px; background: var(--raise-2); transition: background .3s; }
.strip i.is-done { background: var(--signal); }
.strip i.is-now { background: var(--text); animation: blink 1.4s ease-in-out infinite; }
.done-strip i { background: var(--signal); }

/* Tour ---------------------------------------------------------------------- */
.coach { position: fixed; inset: 0; z-index: 30; }
.coach-hole {
  position: fixed; pointer-events: none; border-radius: 18px; box-shadow: 0 0 0 200vmax rgba(0,0,0,.6);
  outline: 2px solid var(--signal);
  transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease;
}
.coach-pop {
  position: fixed; width: min(380px, calc(100vw - 24px)); pointer-events: auto;
  padding: 16px 16px 14px; border-radius: 16px; background: var(--signal); color: var(--ink);
  font-weight: 600; font-size: 16px; line-height: 1.35; box-shadow: 0 18px 50px rgba(0,0,0,.45);
  transition: top .35s ease, left .35s ease;
}
.coach-pop kbd { background: rgba(0,0,0,.14); color: var(--ink); }
.coach-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; }
.coach-foot span { opacity: .6; margin: 0 4px 0 auto; font-weight: 600; }
.coach-btn { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--signal); font-weight: 700; font-size: 14px; }
.coach-btn.quiet { background: rgba(0,0,0,.1); color: var(--ink); }
.coach-btn:hover { filter: brightness(1.15); }
.coach-link { height: 34px; padding: 0 10px; border: 1px solid rgba(0,0,0,.25); border-radius: 999px; background: none; color: var(--ink); font-weight: 600; font-size: 13px; }
.coach-link:hover { background: rgba(0,0,0,.08); }

/* Help ---------------------------------------------------------------------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.6); }
.sheet { width: min(100%, 520px); max-height: 88dvh; overflow: auto; padding: 22px; border-radius: 20px; background: var(--raise); }
.help-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.help-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.help-list .step { cursor: default; color: var(--text); }
.help-list strong { display: block; font-weight: 700; }
.help-list span { color: var(--text-2); font-size: 14px; }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 20px; color: var(--text-3); font-size: 13px; }
.sheet-foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; color: var(--text-3); font-size: 13px; }
.sheet-foot code { color: var(--text); font: 700 14px var(--ui); letter-spacing: .08em; }
.sheet-foot .go { margin-left: auto; }

/* Phones --------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --pad: 14px; }
  .study { height: auto; min-height: 100dvh; position: relative; }
  .corner { position: absolute; top: 14px; right: 14px; }
  .composition { justify-content: flex-start; gap: 14px; }
  .prompt { font-size: 17px; padding: 0 40px 0 0; text-align: left; }
  .stage { height: auto; }
  .stage { flex-direction: column; gap: 14px; }
  .clip { width: 100%; height: auto; aspect-ratio: var(--ratio, 16 / 9); }
  .letter { display: block; position: absolute; left: 10px; top: 6px; font: 900 30px/1 var(--display); text-shadow: 0 2px 10px rgba(0,0,0,.7); }
  .under { grid-template-columns: 1fr; }
  .tag, .keys, .matrix kbd { display: none; }
  .ask { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  .ask-side, .ask-side.right { justify-content: center; }
  .watch-box { justify-items: center; }
  .matrix { grid-template-columns: auto repeat(var(--choices, 3), 58px); gap: 6px; }
  .row-label { font-size: 14px; white-space: normal; }
  .teaser { gap: 8px; margin-bottom: 28px; }
  .teaser b { font-size: 30px; }
  .counter { font-size: 17px; min-width: 52px; }
}