/* Design tokens and the browser defaults the design takes over.
   The world: a cinema lobby at night and the screening room behind it. Lacquer-black ground, poster cases
   trimmed with a hairline of brass, marquee white only on the lit letter board, ticket orange for the one
   action under the eye. Barlow Condensed for marquee letters, poster titles and billing; Barlow for words;
   Overpass Mono for every figure. Colour comes from the pictures, all rendered on our own GPU. */

@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass Mono";
  src: url("../fonts/overpass-mono-latin-wght.woff2") format("woff2-variations"), url("../fonts/overpass-mono-latin-wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* surfaces, darkest to lightest: the stage floor, the flight cases, the wall when it is dark */
  --ground: #0d0c0b;
  --panel: #121110;
  --raised: #1b1917;
  --hover: #232020;
  --pressed: #2b2824;
  --screen: #050504;
  --surface-tint: rgb(255 255 255 / 0.04);

  /* lines: gaffer-tape hairlines divide regions; a control's own edge must read at 3:1 */
  --line: #211f1c;
  --line-strong: #2e2b27;
  --control-line: #6f6962;
  --control-line-hover: #887f76;
  --grid-line: rgb(235 232 227 / 0.07);
  --on-media-line: rgb(235 232 227 / 0.32);

  /* text: tape white and its quieter steps */
  --text: #ebe8e3;
  --text-2: #aba59d;
  --text-3: #908a82;
  --on-media: #f4f1ec;

  /* the one accent, safety orange: ring, selection and the path (--accent), fills with dark marks on them
     (--accent-fill + --on-accent), links (--accent-text), washes (--accent-soft) */
  --accent: #ff7a1a;
  --accent-fill: #ff7a1a;
  --accent-fill-hover: #ff8c3c;
  --accent-fill-press: #ee6c0e;
  --accent-text: #ffa35f;
  --accent-soft: rgb(255 122 26 / 0.16);
  --on-accent: #141311;

  /* state: a pass is brass (the lobby has no green: colour comes from the pictures), amber is waiting, drift or
     replay, red is failed; each always says so in words too */
  --green: #cdb07a;
  --amber: #e9c43a;
  --red: #f0625f;
  --danger-fill: #b8373a;
  --danger-fill-hover: #a52f32;
  --on-fill: #ffffff; /* marks on a danger fill and the thumb of a switch that is on */
  --green-soft: rgb(205 176 122 / 0.13);
  --amber-soft: rgb(233 196 58 / 0.14);
  --red-soft: rgb(240 98 95 / 0.14);

  /* the lobby: brass trim on the poster cases, the ink of letters hung on a lit board, the card stock of a lobby card */
  --brass: #a8895a;
  --brass-hi: #d6b77f;
  --marquee-ink: #1a1511;
  --card-stock: #ebe3d2;
  --card-ink: #221c16;
  --card-ink-2: #5a5045;
  --mat: #050403;
  --case-shadow: 0 22px 38px -14px rgb(0 0 0 / 0.75), 0 6px 12px -6px rgb(0 0 0 / 0.6);
  --lobby-gutter: clamp(16px, 4vw, 56px);

  /* overlays on footage */
  --scrim: rgb(5 5 4 / 0.78);
  --scrim-strong: rgb(5 5 4 / 0.92);

  /* type: Barlow for words, Overpass Mono for every figure (timecode, coordinates, seeds, hashes, counts) */
  --font: "Barlow", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Barlow Condensed", "Barlow", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Overpass Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --w-regular: 400;
  --w-medium: 500;
  --w-strong: 600;
  --lh-tight: 1.2;
  --lh-body: 1.45;
  --track-caps: 0.08em;

  /* space: an 8 point grid with a 4 point half step */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* equipment edges: small radii, tape chips instead of pills */
  --radius-s: 3px;
  --radius-m: 4px;
  --radius-pill: 3px;
  --control-h: 32px;

  --shadow-float: 0 12px 28px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.4);

  --rail-w: 64px;
  --topbar-h: 48px;
  --dock-w: 340px;

  --z-dock: 20;
  --z-float: 30;
  --z-menu: 40;
  --z-skip: 60;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-base: 180ms;

  /* -- the stock -------------------------------------------------------------------------------
     Three materials, kept apart and never blended. Lacquer is furniture (the ramp above); emulsion is
     footage; card stock is the one light surface and carries anything that asserts a fact. The grain
     is a rendered plate laid over every room, so the whole app sits in one projector's light rather
     than on a flat field. */
  /* until the GPU session renders ov-grain.webp this is drawn noise; the plate replaces this one line */
  --plate-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 1 1 0 -1.15 1 1 1 0 -1.15 1 1 1 0 -1.15 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-size: 160px;
  --grain-opacity: 0.045;

  /* keykode: the micro-type film stock carries along its sprocket edge. Every frame in the app prints
     its own serial, seed and hash in this, so a picture here is never separable from its proof. */
  --fs-keykode: 8px;
  --track-keykode: 0.1em;
  --keykode-ink: rgb(235 232 227 / 0.46);
  --keykode-tick: rgb(255 122 26 / 0.62);
  --keykode-gutter: 15px;

  /* perforation: the one divider. A printed object's edge is die-cut, not a 1px border. The mask is a
     row of holes punched out of the edge; --perf-pitch is the distance between their centres. */
  --perf-pitch: 13px;
  --perf-r: 3.5px;
}

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100%;
  background: var(--ground);
  color: var(--text);
  font: var(--w-regular) var(--fs-md) / var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-color: currentColor;
}

[hidden] {
  display: none !important;
}

/* The parts the browser draws take the palette too. */
::selection {
  background: var(--accent);
  color: var(--on-accent);
}
input,
textarea {
  caret-color: var(--accent);
}
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--accent-fill);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-s);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--control-line);
  background-clip: content-box;
  border: 3px solid transparent;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-button {
  display: none;
}

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

/* figures: every number on the stage is tabular mono, so readouts never jitter */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.mono {
  font-family: var(--mono);
  font-size: max(var(--fs-xs), 0.92em);
  font-variant-numeric: tabular-nums;
}
/* a camera-report label: small, tracked capitals */
.caps {
  font-size: var(--fs-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon.lg {
  width: 20px;
  height: 20px;
}
.icon.sm {
  width: 14px;
  height: 14px;
}

/* motion held: reduced motion by its media query, and data saver (which has none) by :root.hold-still, which main.js sets
   from holdStill() for both. Every animation and transition collapses to its end state, with no delay */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}
:root.hold-still *,
:root.hold-still *::before,
:root.hold-still *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
/* a view transition, should one start while held; its own rule, so a browser without them keeps the rules above */
:root.hold-still::view-transition-group(*),
:root.hold-still::view-transition-old(*),
:root.hold-still::view-transition-new(*) {
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
}