/*
  Setpiece, the 2D entry page. Second pass: the marks are down.

  Convention avoided: a white rounded panel with pill buttons, the blue grid
  floor, and inside this family the cyan hologram (thin lines, glass, glow on
  everything). Also the text-left image-right hero.
  Metaphor: a stage with the work lights off. Each performer has a mark on the
  floor in their own colour of spike tape, and the controls hang on a
  blacked-out flag beside the set.

  The ground is black cloth, never grey and never glass, because only true dark
  lets a colour read as light. On paper the set keeps its own black flag for
  the same reason: tape on a pale floor does not read.
  One tape colour belongs to one actor, because that is what the colours on a
  real floor mean. The row of four marks is the only place they appear.
  Yellow marks what is selected and red marks recording, because light means live.
  A thing that presses is a block with an edge and a thing that informs is
  plain chalk, because the reader has to know what is pressable at a glance.
  The live stage is the page's one object, because evidence beats illustration.

  Tokens: .design/manifest.json, second_pass.tokens. Laws: .design/brand/CHARTER.md
*/

@font-face {
  font-family: "Big Shoulders Stencil";
  src: url("/ui/fonts/BigShouldersStencil.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Big Shoulders";
  src: url("/ui/fonts/BigShoulders.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/ui/fonts/SchibstedGrotesk.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

/* Every colour on the page is named here and nowhere else. */
:root {
  /* The stage: floor, the floor one step lit, the floor where light catches it. */
  --cloth: #1b1411;
  --block: #2a211c;
  --seam: #5a4b3d;
  --chalk: #f6f7ef;
  --chalk-dust: #c7c7b7;
  /* Spike tape. One colour, one actor. */
  --tape-a: #e49a4f;
  --tape-b: #5ca0cb;
  --tape-c: #e8719f;
  --tape-d: #6cc47c;
  /* Live states. */
  --selected: #d6e13c;
  --recording: #e0352b;
  /* The storyboard page, for the light theme. */
  --paper: #f5f6e5;
  --paper-ink: #1e232b;
  --pencil: #585752;
  --paper-rule: #c7c7b7;

  --ground: var(--cloth);
  --ink: var(--chalk);
  --ink-muted: var(--chalk-dust);
  --rule: var(--seam);
  --flag: transparent;
  --haze-opacity: 0.045;
  --haze-blend: screen;

  --display: "Big Shoulders Stencil", "Arial Narrow", sans-serif;
  --label: "Big Shoulders", "Arial Narrow", sans-serif;
  --text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --base: 17px;
  --s1: 1.333rem;
  --s2: 1.777rem;
  --unit: 4px;
  --pad: calc(var(--unit) * 8);
  --label-col: 2.6rem;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: dark;
  accent-color: var(--selected);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: var(--paper);
    --ink: var(--paper-ink);
    --ink-muted: var(--pencil);
    --rule: var(--paper-rule);
    --flag: var(--cloth);
    --haze-opacity: 0.05;
    --haze-blend: multiply;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: var(--paper);
  --ink: var(--paper-ink);
  --ink-muted: var(--pencil);
  --rule: var(--paper-rule);
  --flag: var(--cloth);
  --haze-opacity: 0.05;
  --haze-blend: multiply;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: var(--base); scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--selected); color: var(--cloth); }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.16em; }
a:hover { color: var(--ink); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* The nap of the cloth: one fixed layer, under everything. */
.haze {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--haze-opacity);
  mix-blend-mode: var(--haze-blend);
  z-index: 0;
}

.top, main, .foot { position: relative; z-index: 1; }

/* The small header, the loud stencil title and the stripe: the not-found page uses these. */
.top {
  display: flex;
  align-items: flex-end;
  padding: calc(var(--unit) * 6) var(--pad) 0;
  max-width: 1240px;
  margin: 0 auto;
}
.top .wordmark img { display: block; width: 136px; height: auto; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .top .wordmark img { content: url("/wordmark-ink.svg"); }
}
:root[data-theme="light"] .top .wordmark img { content: url("/wordmark-ink.svg"); }
h1 {
  font-family: var(--display);
  font-weight: 900;
  font-optical-sizing: auto;
  font-size: clamp(2.4rem, 4.2vw, 3.2rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: -2px 0 calc(var(--unit) * 5);
  text-transform: uppercase;
  text-wrap: balance;
}
.stripe {
  height: 14px;
  background: repeating-linear-gradient(45deg, var(--ink) 0 14px, var(--ground) 14px 28px);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--cloth) 3%, var(--cloth) 99%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--cloth) 3%, var(--cloth) 99%, transparent);
}

main { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }

/* The first view: the set on its flag to the left, bleeding off the top and
   the left of the window; what to do about it to the right. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(288px, 368px);
  column-gap: calc(var(--unit) * 10);
  padding: calc(var(--unit) * 6) 0 calc(var(--unit) * 10);
}

.flag {
  position: relative;
  z-index: 0;
  align-self: start;
  container-type: inline-size;
  padding: 0 calc(var(--unit) * 7) calc(var(--unit) * 6) 0;
  color: var(--chalk);
}
.flag::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -200px 0 0 -100vw;
  background: var(--flag);
}
.flag :focus-visible { outline-color: var(--chalk); }

/* The one loud line. The name stands on the top edge of the stage and the
   tail of its p hangs over into the picture. */
.band {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 58% minmax(0, 1fr);
  column-gap: calc(var(--unit) * 6);
  align-items: end;
  margin-bottom: calc(var(--unit) * 2);
}
.band .wordmark { display: block; color: var(--chalk); border-radius: 2px; }
.band .wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -6.974%;
  overflow: visible;
  pointer-events: none;
}
.wordmark .letters { fill: currentColor; }
.wordmark .ball { fill: var(--selected); }
.band h1 {
  font-family: var(--text);
  font-weight: 640;
  font-size: clamp(0.94rem, 3.8cqi, var(--s2));
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: none;
  margin: 0 0 -0.22em;
  max-width: 12em;
}

.stage {
  position: relative;
  z-index: 1;
  border: 2px solid var(--seam);
  border-radius: 2px;
  background: var(--block);
  overflow: hidden;
}
#scene-container { width: 100%; aspect-ratio: 16 / 9; position: relative; }
#scene-container canvas { display: block; width: 100% !important; height: 100% !important; }

/* While the set is built: the chalk drawing of it, and the call for what is happening.
   The stripe is this screen's one clapper stripe, until the slate's own takes over.
   The thread is busy for seconds at a time here, so only transform moves: the browser
   carries that by itself. Nothing animates on the way out. */
.loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(calc(var(--unit) * 2), 5cqi, calc(var(--unit) * 12));
  padding: clamp(calc(var(--unit) * 2), 3cqi, calc(var(--unit) * 7)) clamp(calc(var(--unit) * 3), 7cqi, calc(var(--unit) * 18));
  background: var(--cloth);
  color: var(--chalk);
}
.loader[hidden] { display: none; }
.loader-art { height: 100%; aspect-ratio: 83 / 88; overflow: hidden; }
.loader-art img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.09); }
.loader-call { min-width: 0; max-width: 30rem; }
.loader .field { min-height: 0; flex-wrap: wrap; gap: 0 calc(var(--unit) * 3); }
.loader .value { color: var(--chalk); white-space: normal; }
.loader-track {
  height: 14px;
  margin-top: calc(var(--unit) * 2);
  background: var(--block);
  overflow: hidden;
}
.loader-fill {
  height: 100%;
  overflow: hidden;
  transform: translateX(-92%);
  transition: transform 6s cubic-bezier(0.16, 0.7, 0.2, 1);
  will-change: transform;
}
.loader-stripe {
  width: calc(100% + 40px);
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Crect width='40' height='14' fill='%231b1411'/%3E%3Cpath d='M0 14 8 0H28L20 14Z' fill='%23f6f7ef'/%3E%3C/svg%3E") left center / 40px 14px repeat-x;
  animation: loader-run 1.4s linear infinite;
  will-change: transform;
}
@keyframes loader-run { to { transform: translateX(-40px); } }
.loader-note {
  margin: calc(var(--unit) * 2) 0 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--chalk-dust);
}
.loader-note[hidden] { display: none; }
.loader .block { margin-top: calc(var(--unit) * 3); align-items: center; justify-content: center; text-decoration: none; color: var(--chalk); }
.when-failed, .when-stopped { display: none; }
:root[data-load="failed"] .when-failed { display: block; }
:root[data-load="failed"] .when-stopped, :root[data-load="stuck"] .when-stopped { display: inline-flex; }
:root[data-load="failed"] .when-loading, :root[data-load="failed"] #loader-note, :root[data-load="failed"] #enter-xr { display: none; }
@media (prefers-reduced-motion: reduce) {
  .loader-fill { transition: none; }
  .loader-stripe { animation: none; }
}
@container (max-width: 520px) {
  .loader { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .loader-art { height: auto; width: 100%; max-height: 100%; }
  .loader-note { font-size: 0.8rem; }
  .loader-track { margin-top: var(--unit); }
}
.strip[inert] { opacity: 0.45; }

/* The floor in front of the set: who has a mark, and where each of them is looking. */
.floor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 calc(var(--unit) * 6);
  margin-top: calc(var(--unit) * 2);
}
.field { display: flex; align-items: center; gap: calc(var(--unit) * 3); min-height: 44px; }
.label {
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--chalk-dust);
  white-space: nowrap;
}
/* One label column, so the first mark and the first lens start on the same line. */
.floor > .field:first-child > .label, .strip > .field > .label { flex: none; width: var(--label-col); }
.value { font-family: var(--label); font-weight: 700; font-size: 1.12rem; white-space: nowrap; }
.unit { font-family: var(--label); font-weight: 700; font-size: 0.88rem; color: var(--chalk-dust); }

/* The signature device, once: a T of tape per actor, torn square at the ends. */
.marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--unit) calc(var(--unit) * 5); }
.mark {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 2);
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.12rem;
  white-space: nowrap;
  animation: lay 240ms var(--ease) backwards;
}
.mark-a { color: var(--tape-a); }
.mark-b { color: var(--tape-b); animation-delay: 90ms; }
.mark-c { color: var(--tape-c); animation-delay: 180ms; }
.mark-d { color: var(--tape-d); animation-delay: 270ms; }
.tee { display: block; width: 40px; height: auto; flex: none; fill: currentColor; }
.mark-a .tee { rotate: -3deg; }
.mark-b .tee { rotate: 2deg; }
.mark-c .tee { rotate: -1.5deg; }
.mark-d .tee { rotate: 2.5deg; }
@keyframes lay {
  from { opacity: 0; transform: translateY(-6px); }
}
.eyes { margin-left: auto; }
.marks-note {
  flex-basis: 100%;
  margin: 0;
  color: var(--chalk-dust);
  font-size: 0.85rem;
  line-height: 1.4;
  text-wrap: pretty;
}
/* A narrow flag stacks its fields in one label column: marks, what they mean, eyes. */
@container (max-width: 700px) {
  .eyes { margin-left: 0; flex-basis: 100%; order: 3; }
  .eyes > .label { flex: none; width: var(--label-col); }
  .marks-note { order: 2; margin-top: var(--unit); }
}

/* Lens and take. Everything here presses, so everything here is a block. */
.take-note { margin: 0; padding-left: calc(var(--label-col) + var(--unit) * 3); }
.take-note[hidden] { display: none; }
.strip { display: grid; row-gap: calc(var(--unit) * 2); margin-top: calc(var(--unit) * 3); }
.lenses { display: flex; gap: var(--unit); }
.strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--unit) * 2);
  padding-left: calc(var(--label-col) + var(--unit) * 3);
}
.lens, .block {
  font: 600 1rem/1.2 var(--text);
  color: var(--chalk);
  background: var(--block);
  border: 2px solid var(--seam);
  border-radius: 2px;
  min-height: 44px;
  padding: 0 calc(var(--unit) * 4);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease), transform 120ms var(--ease);
}
.lens { font: 700 1.12rem/1 var(--label); min-width: 44px; padding: 0 calc(var(--unit) * 1.5); }
.lens:hover, .block:hover { border-color: var(--chalk-dust); }
.lens:active, .block:active { transform: translateY(1px); }
.lens[aria-pressed="true"] { background: var(--selected); border-color: var(--selected); color: var(--cloth); }
.record[aria-pressed="true"] {
  background: var(--recording);
  border-color: var(--recording);
  color: var(--chalk);
  font-weight: 700;
  font-size: 1.1rem;
}
.block:disabled { color: var(--chalk-dust); border-style: dashed; cursor: progress; }
.block:disabled:hover { border-color: var(--seam); }
.block:disabled:active { transform: none; }

/* Beside the set, on the ground: what it is, the one filled button, and what you leave with. */
.copy { padding-top: 2px; }
.pitch { margin-bottom: calc(var(--unit) * 9); }
.lede { font-size: 1.18rem; line-height: 1.42; margin: 0 0 calc(var(--unit) * 6); text-wrap: pretty; max-width: 42ch; }
.actions { display: grid; gap: calc(var(--unit) * 3); }
.primary {
  font: 600 1.06rem/1.2 var(--text);
  color: var(--ground);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: calc(var(--unit) * 3) calc(var(--unit) * 6);
  min-height: 56px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), transform 120ms var(--ease);
}
.primary:hover { background: var(--ink-muted); border-color: var(--ink-muted); color: var(--ground); }
.primary:active { transform: translateY(1px); }
.primary[aria-busy="true"], .primary:disabled { background: var(--ink-muted); border-color: var(--ink-muted); cursor: progress; }
/* Three lines held, because this line changes while the headset is asked. */
.hint { margin: 0; min-height: 4.2em; color: var(--ink-muted); font-size: 0.9rem; line-height: 1.4; text-wrap: pretty; }
.try { margin: 0 0 calc(var(--unit) * 4); color: var(--ink-muted); font-size: 0.9rem; line-height: 1.4; text-wrap: pretty; }

/* The storyboard: six frames, numbered until snapped. */
.board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--unit) * 2);
}
.board li {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--pencil);
  background: var(--paper);
  color: var(--pencil);
  border-radius: 2px;
  overflow: hidden;
}
.board li.filled { border: 1px solid var(--rule); }
.board img { display: block; width: 100%; height: 100%; object-fit: cover; }
.board .n {
  position: absolute;
  left: 6px;
  top: 3px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--pencil);
}
.board .filled .n { color: var(--chalk); text-shadow: 0 0 3px var(--cloth); }
.board .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 6px 3px;
  font-family: var(--label);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--chalk);
  background: color-mix(in srgb, var(--cloth) 82%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shotlist { margin-top: calc(var(--unit) * 4); }
.shotlist .label { color: var(--ink-muted); }
.shotlist .label span { color: var(--ink); margin-left: var(--unit); }
.shotlist ol { list-style: none; margin: var(--unit) 0 0; padding: 0; font-size: 0.85rem; line-height: 1.5; }
.shotlist li { display: grid; grid-template-columns: 1.4em 1fr; gap: calc(var(--unit) * 2); border-top: 1px solid var(--rule); padding: 3px 0; }
.shotlist li .i { font-family: var(--label); font-weight: 700; color: var(--ink-muted); }
.shotlist li.empty { display: block; color: var(--ink-muted); border-top-color: transparent; padding-top: 0; }

.foot {
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--unit) * 6) var(--pad) calc(var(--unit) * 10);
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 0.92rem;
}
.foot p { margin: 0 0 calc(var(--unit) * 2); max-width: 70ch; text-wrap: pretty; }
.foot .small { font-size: 0.85rem; }

@media (max-width: 900px) {
  :root { --pad: calc(var(--unit) * 4); }
  .top .wordmark img { width: 104px; }
  .hero { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--unit) * 7); padding-top: calc(var(--unit) * 4); }
  .flag { padding-right: 0; padding-bottom: calc(var(--unit) * 5); }
  .flag::before { right: calc(var(--pad) * -1); }
  .band { grid-template-columns: 60% minmax(0, 1fr); column-gap: calc(var(--unit) * 4); }
  /* The tall picture ends in empty dark under the table edge; the frame clips that strip. */
  #scene-container { aspect-ratio: 4 / 5; margin-bottom: -30%; }
  .lenses { flex: 1; }
  .lens { flex: 1 1 0; min-width: 0; padding: 0; }
  .strip-actions { display: grid; grid-template-columns: 1fr 1fr; padding-left: 0; }
  .take-note { padding-left: 0; }
  .copy { padding-top: 0; }
  .lede { max-width: none; }
}

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