@charset "utf-8";
/**
 * OS3 site layer — built on top of "The Monospace Web" (src/index.css).
 * Adds: accent, top nav + hints, hero/typewriter, redaction reveal,
 * cards, status ticker, footer. All on the 1.20rem monospace grid,
 * light/dark adaptive, and prefers-reduced-motion safe.
 **/

/* Force the light (white) theme regardless of OS dark-mode preference.
   These load after index.css, so they win. */
:root {
  --text-color: #000;
  --text-color-alt: #666;
  --background-color: #fff;
  --background-color-alt: #eee;
  --page-max-width: 100%;
  --page-gutter: 3ch;
  --copy-max-width: 106ch;
  --pillar-max-width: 88ch;
  --nav-font-size: 1.15rem;
  --nav-gap: 3ch;
  /* one restrained accent — signal orange */
  --accent: #c2410c;
  --accent-dim: color-mix(in srgb, var(--accent) 45%, var(--background-color));
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #000;
    --text-color-alt: #666;
    --background-color: #fff;
    --background-color-alt: #eee;
    --accent: #c2410c;
    --accent-dim: color-mix(in srgb, var(--accent) 45%, #fff);
  }
}

/* Links pick up the accent on hover, base stays monochrome. */
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* No auto-hyphenation — the base theme turns it on, which mangles words
   ("mod-els") and emails ("...robotics.-com"). Cleaner to wrap whole words. */
p, a, li, .lede {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
}

/* The theme adds margin-top to every adjacent sibling (* + *). Cancel it
   inside the flex rows we build so items stay top-aligned. */
.site-nav > * + *,
.foot-grid > * + *,
.legal > * + *,
.yc > * + *,
.cards > * + *,
.history-transfer * + *,
.history-perimeter * + *,
.history-index * + *,
.footage-wall * + *,
.footage-instructions * + *,
nav button + button {
  margin-top: 0;
}

/* card row */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--line-height) 1ch;
  margin: 0 0 var(--line-height);
}
.cards > .card {
  flex: 1 1 22ch;
}

/* ----------------------------------------------------------------- NAV */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--nav-gap);
  font-size: var(--nav-font-size);
  margin: 0 0 var(--line-height);
  padding-bottom: var(--line-height);
  border-bottom: var(--border-thickness) solid var(--text-color);
  line-height: calc(var(--line-height) * 1.5);
}
.site-nav a {
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  margin: 0;
}
.site-nav a::before {
  content: "/ ";
  color: var(--text-color-alt);
}
.site-nav a:first-child::before {
  content: "";
}
.site-nav a.current {
  color: var(--accent);
}
.site-nav a.current::after {
  content: " ◂";
  color: var(--accent);
}
.site-nav a:hover {
  color: var(--accent);
}

/* live hint line driven by data-hint on nav links */
.nav-hint {
  min-height: var(--line-height);
  margin: 0 0 calc(var(--line-height) * 1.5);
  color: var(--text-color-alt);
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-hint::before {
  content: "> ";
  color: var(--accent);
}

/* --------------------------------------------------------------- HERO */
.hero {
  margin: calc(var(--line-height) * 3) 0 calc(var(--line-height) * 2);
}

.home-page .nav-hint {
  margin-bottom: var(--line-height);
}
.home-page .hero {
  margin: calc(var(--line-height) * 1.25) 0 var(--line-height);
}
.humans-page .nav-hint,
.footage-page .nav-hint,
.robot-page .nav-hint,
.deploy-page .nav-hint {
  margin-bottom: var(--line-height);
}
.humans-page .humans-stage {
  margin-top: 0;
}
.humans-page .page-intro,
.footage-page .page-intro {
  margin-top: calc(var(--line-height) * 1.25);
}
.home-page .close {
  margin-top: var(--line-height);
}
.home-page > p:not([class]) {
  margin-top: calc(var(--line-height) / 2);
  margin-bottom: calc(var(--line-height) / 2);
}
.home-page .pillars {
  margin-top: calc(var(--line-height) / 2);
  margin-bottom: var(--line-height);
}
.home-page .pillars p {
  margin-bottom: calc(var(--line-height) / 4);
}

/* one-line intro under a heading */
.lede {
  color: var(--text-color);
  font-size: 1.3rem;
  line-height: calc(var(--line-height) * 1.5);
  margin: 0 0 calc(var(--line-height) * 2);
}

/* minimal numbered statements (replaces heavy cards) */
.pillars {
  margin: 0 0 calc(var(--line-height) * 2);
}
.pillars p {
  margin: 0 0 calc(var(--line-height) / 2);
  padding-left: 3ch;
  text-indent: -3ch; /* hanging indent so wrapped lines align under the text */
}
.idx {
  color: var(--accent);
  font-weight: var(--font-weight-bold);
  margin-right: 1ch;
}
.hero .kicker {
  color: var(--text-color-alt);
  text-transform: uppercase;
  letter-spacing: 0.1ch;
  margin: 0;
}
.hero-type {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  line-height: calc(2 * var(--line-height));
  margin: 0;
  white-space: pre-wrap;
}
.cursor {
  color: var(--accent);
  animation: os3-blink 1.1s steps(1) infinite;
}
@keyframes os3-blink {
  50% { opacity: 0; }
}

/* ------------------------------------------------------------ REDACTED */
.redacted {
  background: var(--text-color);
  color: var(--text-color);
  border-radius: 1px;
  cursor: help;
  transition: background 0.12s, color 0.12s;
  outline: none;
}
.redacted:hover,
.redacted:focus-visible {
  background: transparent;
  color: var(--text-color);
  box-shadow: inset 0 calc(var(--border-thickness) * -1) 0 var(--accent);
}

/* ---------------------------------------------------- deploy form bits */
.hp { display: none !important; }
.form-status {
  color: var(--text-color-alt);
  min-height: var(--line-height);
  margin: 0 0 var(--line-height);
}
/* center the submit button even though the form fields are left-aligned */
#deploy-form nav {
  text-align: center;
}
/* the lede right above the form was leaving a bigger gap than the one below
   it — match the top gap to the bottom */
.deploy-page h2 + .lede {
  margin-bottom: var(--line-height);
}

/* ---------------------------------------------- work-in-progress note */
.wip {
  border: var(--border-thickness) dashed var(--accent);
  color: var(--text-color);
  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
  margin: 0 0 var(--line-height);
  text-align: left;
}

/* vertical (9:16) YouTube Short embed */
.short-embed {
  max-width: 340px;
  margin: var(--line-height) auto 0;
  aspect-ratio: 9 / 16;
  border: var(--border-thickness) solid var(--text-color);
}
.short-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------ SHARED PAGE INTRO */
.page-intro {
  margin: calc(var(--line-height) * 2) auto calc(var(--line-height) * 1.5);
  max-width: var(--copy-max-width);
}
.page-intro .kicker {
  color: var(--text-color-alt);
  letter-spacing: 0.1ch;
  margin: 0;
}
.page-intro h2 {
  font-size: 1.6rem;
  line-height: calc(var(--line-height) * 2);
  margin: 0;
}
.page-intro .lede {
  margin-top: calc(var(--line-height) / 2);
  margin-bottom: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------------------------------------------------------- HUMANS PAGE */
.history-transfer {
  width: min(100%, 126ch);
  margin: calc(var(--line-height) * 2) auto var(--line-height);
  border: var(--border-thickness) solid var(--text-color);
  text-align: left;
}
.transfer-header,
.transfer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2ch;
  min-height: calc(var(--line-height) * 2);
  padding: calc(var(--line-height) / 2) 1ch;
  background: var(--background-color);
}
.transfer-header {
  border-bottom: var(--border-thickness) solid var(--text-color);
}
.transfer-header h2 {
  margin: 0;
}
.transfer-direction {
  color: var(--accent);
  white-space: nowrap;
}
.transfer-footer {
  border-top: var(--border-thickness) solid var(--text-color);
  color: var(--text-color-alt);
  font-size: 0.82rem;
}
.transfer-bay {
  position: relative;
  height: clamp(430px, 58vw, 540px);
  min-height: 430px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--background-color-alt);
  background-image:
    linear-gradient(color-mix(in srgb, var(--text-color-alt) 20%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text-color-alt) 20%, transparent) 1px, transparent 1px);
  background-size: 2ch var(--line-height);
}
.transfer-bay::before {
  content: "AUTHORIZED PERSONNEL / AUTONOMOUS CARGO";
  position: absolute;
  top: calc(var(--line-height) / 2);
  left: 50%;
  z-index: 1;
  color: var(--text-color-alt);
  font-size: 0.72rem;
  letter-spacing: 0.08ch;
  transform: translateX(-50%);
  white-space: nowrap;
}
.history-dock {
  position: absolute;
  top: calc(var(--line-height) * 2);
  bottom: calc(var(--line-height) * 5);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: calc(var(--line-height) / 2);
  width: clamp(92px, 20%, 230px);
  padding: calc(var(--line-height) * 1.25) 1ch calc(var(--line-height) / 2);
  border: var(--border-thickness) dashed var(--text-color-alt);
  background: color-mix(in srgb, var(--background-color) 92%, transparent);
}
.history-dock-left {
  left: 1ch;
}
.history-dock-right {
  right: 1ch;
}
.dock-label {
  position: absolute;
  top: calc(var(--line-height) / 4);
  left: 1ch;
  color: var(--text-color-alt);
  font-size: 0.7rem;
}
.history-card {
  display: flex;
  flex: 0 0 calc(25% - 0.45rem);
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  padding: calc(var(--line-height) / 3) 0.7ch;
  border: var(--border-thickness) solid #111;
  background: #fff;
  color: #111;
  box-shadow: 0.35ch 0.35ch 0 color-mix(in srgb, var(--accent) 60%, transparent);
  overflow: hidden;
}
.history-card img {
  width: 100%;
  height: 100%;
  max-height: calc(var(--line-height) * 2.6);
  object-fit: contain;
  padding: 0;
}
.history-card-ucsd {
  flex-direction: column;
  gap: calc(var(--line-height) / 5);
}
.history-card-ucsd img {
  height: auto;
  max-height: calc(var(--line-height) * 1.9);
}
.history-unit-label {
  color: #182b49;
  font-size: clamp(0.48rem, 0.8vw, 0.68rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.18ch;
}
.history-card.is-in-transit {
  flex: 0 0 auto;
  width: 100%;
  height: calc(var(--line-height) * 2.7);
  box-shadow: 0 0 0 var(--border-thickness) var(--accent);
}
.transfer-copy {
  position: absolute;
  top: calc(var(--line-height) * 2);
  bottom: calc(var(--line-height) * 2.5);
  left: 25%;
  right: 25%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--line-height);
  padding: calc(var(--line-height) * 1.5) 2ch;
  border: calc(var(--border-thickness) * 3) double var(--text-color);
  background: var(--background-color);
  text-align: center;
}
.transfer-copy::before,
.transfer-copy::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2ch;
  background: var(--background-color);
}
.transfer-copy::before {
  right: 100%;
}
.transfer-copy::after {
  left: 100%;
}
.transfer-copy p {
  margin: 0;
  font-size: clamp(1rem, 2.1vw, 1.8rem);
  line-height: calc(var(--line-height) * 1.5);
}
.transfer-copy > span:last-child {
  color: var(--text-color-alt);
  line-height: calc(var(--line-height) * 1.2);
}
.transfer-copy-index {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.1ch;
}
.transfer-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--line-height) * 2);
  z-index: 1;
  border-top: calc(var(--border-thickness) * 3) double var(--text-color);
}
.transfer-rail::after {
  content: "════════════════════════════════════════════════════════════════════════════════";
  position: absolute;
  top: calc(var(--line-height) / 3);
  left: 0;
  right: 0;
  color: var(--text-color-alt);
  overflow: hidden;
  white-space: nowrap;
}
.history-runner {
  position: absolute;
  bottom: calc(var(--line-height) * 2.2);
  left: 0;
  z-index: 2;
  width: clamp(72px, 9vw, 104px);
  text-align: center;
  will-change: transform;
}
.runner-cargo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(var(--line-height) * 3);
  transform: translateY(calc(var(--line-height) / 2));
  transition: transform 0.2s ease;
}
.runner-robot {
  display: inline-block;
  margin: 0;
  color: var(--text-color);
  font-size: clamp(0.65rem, 1.15vw, 0.9rem);
  line-height: 1;
  text-align: left;
  filter: drop-shadow(0.2ch 0.2ch 0 var(--background-color));
}
.history-runner.is-lifting .runner-cargo {
  transform: translateY(0);
}
.history-runner.is-carrying .runner-robot {
  color: var(--accent);
}
.history-runner.is-static {
  left: 50%;
  opacity: 0.72;
  transform: translateX(-50%) !important;
}
.history-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--line-height) / 2) 3ch;
  width: min(100%, var(--copy-max-width));
  margin: 0 auto calc(var(--line-height) * 2);
  color: var(--text-color-alt);
  font-size: 0.9rem;
}
.history-index > span {
  white-space: nowrap;
}

/* --------------------------------------------------------- FOOTAGE PAGE */
.footage-wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: clamp(58px, 5.7vw, 78px);
  gap: 1ch;
  width: min(100%, 138ch);
  margin: calc(var(--line-height) * 2) auto var(--line-height);
  text-align: left;
}
.footage-feature {
  grid-column: span 8;
  grid-row: span 8;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: calc(var(--border-thickness) * 2) solid var(--text-color);
  background: var(--background-color);
  overflow: hidden;
}
.feature-header,
.feature-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2ch;
  flex: 0 0 auto;
  padding: calc(var(--line-height) / 2) 1ch;
}
.feature-header {
  min-height: calc(var(--line-height) * 2);
  border-bottom: var(--border-thickness) solid var(--text-color);
  color: var(--text-color-alt);
  font-size: 0.8rem;
}
#feature-pin-state {
  color: var(--accent);
}
.feature-viewport {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: calc(var(--line-height) / 2) 1ch;
  background:
    linear-gradient(45deg, #151515 25%, transparent 25%) 0 0 / 2ch 2ch,
    linear-gradient(45deg, transparent 75%, #151515 75%) 0 0 / 2ch 2ch,
    linear-gradient(45deg, transparent 75%, #151515 75%) 1ch -1ch / 2ch 2ch,
    linear-gradient(45deg, #151515 25%, #050505 25%) 1ch -1ch / 2ch 2ch;
  overflow: hidden;
}
.feature-frame {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  max-width: 100%;
  max-height: 100%;
  border: var(--border-thickness) solid #fff;
  background: #050505;
  color: #fff;
  overflow: hidden;
}
.feature-frame iframe,
.feature-frame img,
.feature-frame video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  padding: 0;
}
.feature-loading {
  margin: auto;
  color: #aaa;
}
.feature-footer {
  min-height: calc(var(--line-height) * 3);
  border-top: var(--border-thickness) solid var(--text-color);
}
.feature-footer > div {
  min-width: 0;
}
.feature-footer h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feature-code {
  color: var(--text-color-alt);
  font-size: 0.72rem;
}
.feature-note {
  margin: calc(var(--line-height) * 0.25) 0 0;
  color: var(--text-color-alt);
  font-size: 0.82rem;
  line-height: var(--line-height);
}
.feature-note:empty {
  display: none;
}
.feature-placeholder {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: var(--line-height);
  min-width: 0;
  padding: var(--line-height) 2ch;
  text-align: center;
}
.feature-placeholder > strong {
  color: var(--accent);
  font-size: clamp(0.72rem, 1.5vw, 1rem);
  letter-spacing: 0.08ch;
}
.diagnostic {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2ch;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.diagnostic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.05) 3px,
    rgba(255, 255, 255, 0.05) 4px
  );
  pointer-events: none;
}
.diagnostic-scan {
  position: absolute;
  top: -20%;
  left: 0;
  right: 0;
  height: 16%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  animation: diagnostic-scan 4.2s linear infinite;
}
@keyframes diagnostic-scan {
  to { transform: translateY(750%); }
}
.diagnostic-robot,
.diagnostic-readout {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #eee;
  font-size: clamp(0.55rem, 1.2vw, 0.9rem);
  line-height: 1.25;
}
.diagnostic-readout {
  color: #aaa;
  white-space: pre-wrap;
}
.diagnostic-compact {
  grid-template-columns: 1fr;
  gap: 0;
  padding: calc(var(--line-height) / 2) 1ch;
}
.diagnostic-compact .diagnostic-robot {
  color: var(--accent);
  font-size: clamp(0.45rem, 0.8vw, 0.68rem);
}
.diagnostic-compact .diagnostic-readout {
  font-size: clamp(0.42rem, 0.65vw, 0.6rem);
  overflow: hidden;
}
.footage-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  padding: 0;
  border: var(--border-thickness) solid var(--text-color);
  background: var(--background-color);
  color: var(--text-color);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.footage-tile:hover,
.footage-tile:focus-visible,
.footage-tile.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 var(--border-thickness) var(--accent);
  outline: none;
}
.footage-tile:hover {
  transform: translateY(calc(var(--border-thickness) * -1));
}
.footage-tile.is-pinned::after {
  content: "PINNED";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  padding: 0 0.5ch;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
}
.tile-wide {
  grid-column: span 4;
  grid-row: span 3;
}
.tile-tall {
  grid-column: span 3;
  grid-row: span 4;
}
.tile-square {
  grid-column: span 3;
  grid-row: span 3;
}
.tile-slim {
  grid-column: span 2;
  grid-row: span 4;
}
.tile-screen {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
  background: #050505;
  color: #fff;
  overflow: hidden;
}
.tile-screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}
.tile-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: calc(var(--line-height) * 2);
  height: calc(var(--line-height) * 2);
  border: var(--border-thickness) solid #fff;
  background: rgba(0, 0, 0, 0.78);
  color: var(--accent);
  transform: translate(-50%, -50%);
}
.tile-label {
  display: flex;
  justify-content: flex-start;
  gap: 1ch;
  flex: 0 0 auto;
  padding: calc(var(--line-height) / 3) 0.7ch;
  border-top: var(--border-thickness) solid var(--text-color);
  font-size: clamp(0.55rem, 0.75vw, 0.7rem);
  line-height: 1.1;
}
.tile-label > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-label > span:last-child {
  color: var(--text-color-alt);
  white-space: nowrap;
}
.footage-instructions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--line-height) / 2) 3ch;
  width: min(100%, var(--copy-max-width));
  margin: var(--line-height) auto calc(var(--line-height) * 2);
  color: var(--text-color-alt);
  font-size: 0.78rem;
}

/* ---------------------------------------- HUMANS: STORY + FOOTER TRANSFER */
.humans-story {
  width: min(100%, 96ch);
  margin: calc(var(--line-height) * 2) auto;
  padding: calc(var(--line-height) * 2) 3ch;
  border: calc(var(--border-thickness) * 3) double var(--text-color);
  text-align: left;
}
.humans-story-index {
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.1ch;
}
.humans-story h2 {
  margin: calc(var(--line-height) / 2) 0 var(--line-height);
  font-size: 1.7rem;
  line-height: calc(var(--line-height) * 2);
}
.humans-story-lede {
  font-size: 1.3rem;
  line-height: calc(var(--line-height) * 1.5);
}
.humans-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1ch;
  margin: calc(var(--line-height) * 2) 0;
}
.humans-story-grid p {
  margin: 0;
  padding: var(--line-height) 1ch;
  border: var(--border-thickness) solid var(--text-color);
}
.humans-story-close {
  margin: 0;
  color: var(--text-color-alt);
}

.history-transfer-compact {
  width: 100%;
  margin: calc(var(--line-height) * 3) 0 0;
}
.history-transfer-compact .transfer-header,
.history-transfer-compact .transfer-footer {
  min-height: calc(var(--line-height) * 1.5);
  padding-top: calc(var(--line-height) / 4);
  padding-bottom: calc(var(--line-height) / 4);
  font-size: 0.68rem;
}
.history-transfer-compact .transfer-header h2 {
  font-size: 0.68rem;
}
.history-transfer-compact .transfer-bay {
  height: calc(var(--line-height) * 7);
  min-height: calc(var(--line-height) * 7);
}
.history-transfer-compact .transfer-bay::before {
  content: "TEAM HISTORY / AUTONOMOUS CARGO";
  top: calc(var(--line-height) / 4);
  font-size: 0.56rem;
}
.history-transfer-compact .history-dock {
  top: calc(var(--line-height) * 1.25);
  bottom: calc(var(--line-height) * 2.6);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35ch;
  width: 29%;
  padding: calc(var(--line-height) * 0.8) 0.45ch 0.35ch;
}
.history-transfer-compact .dock-label {
  top: 0.08rem;
  left: 0.5ch;
  font-size: 0.52rem;
}
.history-transfer-compact .history-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0.15rem 0.25ch;
  box-shadow: none;
}
.history-transfer-compact .history-card img {
  max-height: calc(var(--line-height) * 1.4);
}
.history-transfer-compact .history-card-ucsd {
  gap: 0;
}
.history-transfer-compact .history-card-ucsd img {
  max-height: var(--line-height);
}
.history-transfer-compact .history-unit-label {
  font-size: 0.36rem;
}
.history-transfer-compact .history-card.is-in-transit {
  width: 100%;
  height: calc(var(--line-height) * 1.8);
}
.history-transfer-compact .transfer-copy {
  top: calc(var(--line-height) * 1.25);
  bottom: calc(var(--line-height) * 2.6);
  left: 31%;
  right: 31%;
  padding: 0 0.5ch;
  border-width: var(--border-thickness);
}
.history-transfer-compact .transfer-copy > span {
  color: var(--text-color-alt);
  font-size: clamp(0.48rem, 0.9vw, 0.68rem);
  text-align: center;
}
.history-transfer-compact .transfer-copy::before,
.history-transfer-compact .transfer-copy::after {
  width: 1ch;
}
.history-transfer-compact .transfer-rail {
  bottom: calc(var(--line-height) * 1.6);
}
.history-transfer-compact .history-runner {
  bottom: calc(var(--line-height) * 1.75);
  width: clamp(48px, 6vw, 70px);
}
.history-transfer-compact .runner-cargo {
  height: calc(var(--line-height) * 1.9);
}
.history-transfer-compact .runner-robot {
  font-size: clamp(0.42rem, 0.75vw, 0.58rem);
}

/* -------------------------------------- FOOTAGE: MONITOR + MOVING LOG RAIL */
.footage-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 300px);
  gap: 1ch;
  width: min(100%, 132ch);
  height: min(70vh, 720px);
  min-height: 570px;
  margin: calc(var(--line-height) * 2) auto var(--line-height);
  text-align: left;
}
.footage-console .footage-feature {
  grid-column: auto;
  grid-row: auto;
  height: 100%;
}
.footage-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: var(--border-thickness) solid var(--text-color);
  background: var(--background-color);
  overflow: hidden;
}
.footage-rail-header {
  display: flex;
  justify-content: space-between;
  gap: 1ch;
  flex: 0 0 auto;
  padding: calc(var(--line-height) / 2) 0.7ch;
  border-bottom: var(--border-thickness) solid var(--text-color);
  color: var(--text-color-alt);
  font-size: 0.65rem;
}
.footage-rail-viewport {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.7ch;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--accent) var(--background-color-alt);
  scrollbar-width: thin;
}
.footage-rail-track {
  display: flex;
  flex-direction: column;
  gap: 0.7ch;
}
.footage-rail-item {
  flex: 0 0 150px;
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  min-height: 150px;
}
.footage-rail-item:hover {
  transform: none;
}
.footage-rail-item .tile-label {
  font-size: 0.6rem;
}
.footage-console .feature-viewport {
  min-height: 0;
}

/* ----------------------------------------------------------- TERMINAL */
.terminal {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
  margin: 0 0 var(--line-height);
}
.terminal .ln {
  margin: 0;
}
.terminal .ln::before {
  content: "$ ";
  color: var(--accent);
}
.terminal .out {
  color: var(--text-color-alt);
  margin: 0;
}

/* -------------------------------------------------------------- CARDS */
.card {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
  margin: 0;
  outline: none;
  transition: box-shadow 0.15s;
}
.card:hover,
.card:focus-within {
  box-shadow: inset 0 calc(var(--border-thickness) * -1) 0 var(--accent);
}
.card h3 {
  margin: 0 0 calc(var(--line-height) / 2);
}
.card .lead {
  margin: 0;
}
.card .reveal {
  color: var(--text-color-alt);
  opacity: 0;
  margin: calc(var(--line-height) / 2) 0 0;
  transition: opacity 0.2s;
}
.card:hover .reveal,
.card:focus-within .reveal {
  opacity: 1;
}
.card .idx {
  color: var(--accent);
  font-weight: var(--font-weight-bold);
}

/* ------------------------------------------------------------ STATUS */
.status {
  color: var(--text-color-alt);
  margin: var(--line-height) 0;
}
.status .dot {
  color: var(--accent);
  animation: os3-blink 1.8s steps(1) infinite;
}

/* ------------------------------------------------------------- FOOTER */
.site-footer {
  margin-top: calc(var(--line-height) * 4);
  padding-top: var(--line-height);
  padding-bottom: var(--line-height);
  border-top: calc(var(--border-thickness) * 3) double var(--text-color);
  color: var(--text-color-alt);
}
.site-footer a { color: var(--text-color); }
.site-footer .made {
  color: var(--text-color);
  font-weight: var(--font-weight-medium);
  margin: 0 0 calc(var(--line-height) / 2);
}
.site-footer .foot-links {
  margin: 0 0 calc(var(--line-height) / 2);
}
.site-footer .yc {
  margin: var(--line-height) 0 0;
}
.site-footer .yc-badge {
  margin: 0 0.3ch;
}
.site-footer .yc img {
  height: 2em;
  width: auto;
  display: inline-block;
}
.site-footer .legal {
  margin: var(--line-height) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 2ch;
}
.site-footer .quiet a { color: var(--text-color-alt); }

.debug-toggle-label {
  display: block;
  text-align: right;
  color: var(--text-color-alt);
  font-size: 0.85em;
  margin: var(--line-height) 0 0;
}

/* --------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .cursor,
  .status .dot { animation: none; }
  .card .reveal { opacity: 1; transition: none; }
  .redacted { transition: none; }
  .diagnostic-scan { animation: none; top: 45%; }
  .footage-tile { transition: none; }
  .footage-tile:hover { transform: none; }
}

/* =============== responsive canvas, centered content =============== */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  max-width: var(--page-max-width);
  text-align: center;
  padding: 0 var(--page-gutter); /* header box sits flush against the top */
}

/* mobile-only meta dossier (shown via the small-screen rules below) */
.header-meta {
  display: none;
}

.site-nav { justify-content: center; }
.nav-hint { text-align: center; }

/* readable centered columns for body copy */
.lede,
.pillars,
body > p:not([class]),
.thesis,
.closer,
.close,
form,
details {
  width: 100%;
}
.lede {
  max-width: var(--copy-max-width);
  margin-left: auto;
  margin-right: auto;
}
.pillars {
  max-width: var(--pillar-max-width);
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto;
  text-align: left;
  font-size: 1.1rem;
}
.pillars p {
  padding-left: 0;
  text-indent: 0;
  white-space: nowrap;
}
body > p:not([class]) {
  max-width: var(--copy-max-width);
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1rem;
}
.thesis {
  max-width: var(--copy-max-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(var(--line-height) * 3);
  font-size: 1.1rem;
}
.closer,
.close {
  font-size: 1.4rem;
  line-height: calc(var(--line-height) * 1.5);
  max-width: var(--copy-max-width);
  margin: calc(var(--line-height) * 2) auto 0;
}

/* center blocks, keep their internals readable */
figure { text-align: center; }
figure pre { display: inline-block; text-align: left; }
table:not(.header) {
  max-width: 84ch;
  margin-left: auto;
  margin-right: auto;
}
form {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
details {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.site-footer .legal { justify-content: center; }

body > .site-footer {
  margin-top: auto;
}

/* YC badge as a CSS background — keeps index.js's media-grid logic off it */
.yc-badge {
  display: inline-block;
  width: 1.7em;
  height: 1.7em;
  background: url("../assets/yc-logo.svg") center / contain no-repeat;
  vertical-align: middle;
}

/* =============== night ops: soft dark theme (not pure black) =============== */
html.theme-dark {
  --text-color: #e9e7e3;
  --text-color-alt: #9b978f;
  --background-color: #1b1b1d;
  --background-color-alt: #27272a;
  --accent: #ef7d3c;
  --accent-dim: color-mix(in srgb, var(--accent) 45%, #1b1b1d);
}

/* theme toggle: the "3" in the OS3 wordmark flips day / night ops */
.t3 {
  color: var(--accent);
  cursor: pointer;
  outline: none;
}
.t3:hover,
.t3:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--border-thickness);
}

/* =============== small screens =============== */
@media screen and (max-width: 900px) {
  :root {
    --page-max-width: 96ch;
    --page-gutter: 2ch;
    --copy-max-width: 92ch;
    --pillar-max-width: 88ch;
  }

  .footage-wall {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 70px;
  }
  .footage-feature {
    grid-column: span 6;
    grid-row: span 8;
  }
  .tile-wide { grid-column: span 3; }
  .tile-tall { grid-column: span 2; }
  .tile-square { grid-column: span 2; }
  .tile-slim { grid-column: span 2; }

  .transfer-copy {
    left: 24%;
    right: 24%;
    padding-left: 1ch;
    padding-right: 1ch;
  }
}

@media screen and (max-width: 560px) {
  :root {
    --page-max-width: 100%;
    --page-gutter: 1ch;
    --copy-max-width: 100%;
    --pillar-max-width: 100%;
  }

  /* centered + capped columns read badly on a narrow screen — go left-aligned,
     full-width, and let the content breathe edge-to-edge. */
  body {
    text-align: left;
  }
  .lede,
  .pillars,
  body > p:not([class]),
  .thesis,
  .closer,
  .close,
  form,
  details,
  table:not(.header) {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .site-nav {
    justify-content: flex-start;
    gap: 0 1.5ch;
    font-size: 1rem;
  }
  .nav-hint {
    text-align: left;
  }
  /* hero scales down so it doesn't wrap awkwardly */
  .hero-type {
    font-size: 1.6rem;
    line-height: calc(1.5 * var(--line-height));
  }
  /* phone: hide the desktop dossier table and render the whole header as ONE
     continuous .header-meta box — wordmark on top, then label | value rows
     with dividers. */
  .header {
    display: none;
  }
  .header-meta {
    display: block;
    border: var(--border-thickness) solid var(--text-color);
    margin: 0 0 var(--line-height);
  }
  .header-meta > * + * {
    margin-top: 0;
  }
  .hm-title {
    padding: var(--line-height) 1ch calc(var(--line-height) / 2);
  }
  .hm-mark {
    display: block;
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    line-height: calc(2 * var(--line-height));
  }
  .hm-sub {
    display: block;
    color: var(--text-color-alt);
  }
  .hm-row {
    display: flex;
    border-top: var(--border-thickness) solid var(--text-color);
  }
  .hm-row > * + * {
    margin-top: 0;
  }
  .hm-k {
    flex: 0 0 11ch;
    padding: calc(var(--line-height) / 2) 1ch;
    border-right: var(--border-thickness) solid var(--text-color);
    color: var(--text-color-alt);
    text-transform: uppercase;
    font-size: 0.85em;
  }
  .hm-v {
    flex: 1 1 auto;
    min-width: 0;
    padding: calc(var(--line-height) / 2) 1ch;
    overflow-wrap: break-word;
  }
  /* stack the two-up form fields instead of cramming them side by side */
  .grid {
    flex-direction: column;
  }
  .grid > * {
    flex: 1 1 auto;
    width: 100%;
  }
  /* ASCII diagrams: use the full width and scale to fit so they're not clipped */
  figure {
    margin-left: 0;
    margin-right: 0;
  }
  figure pre {
    font-size: clamp(7px, 2.5vw, 13px);
    line-height: 1.2;
  }
  /* footer identity stacks onto its own lines, centered, with breathing room */
  .site-footer {
    text-align: center;
  }
  .yc-item {
    display: block;
    margin-top: calc(var(--line-height) / 2);
  }
  .yc-item:first-child {
    margin-top: 0;
  }
  .yc-sep {
    display: none;
  }

  .page-intro {
    margin-top: var(--line-height);
  }
  .page-intro h2 {
    font-size: 1.25rem;
    line-height: calc(var(--line-height) * 1.5);
  }

  .history-transfer {
    margin-top: var(--line-height);
  }
  .transfer-header,
  .transfer-footer {
    align-items: flex-start;
    font-size: 0.72rem;
  }
  .transfer-header h2 {
    font-size: 0.72rem;
  }
  .transfer-bay {
    height: 440px;
    min-height: 440px;
  }
  .transfer-bay::before {
    content: "AUTONOMOUS CARGO";
  }
  .history-dock {
    top: calc(var(--line-height) * 1.7);
    bottom: calc(var(--line-height) * 5.2);
    width: 27%;
    padding-left: 0.5ch;
    padding-right: 0.5ch;
    gap: calc(var(--line-height) / 3);
  }
  .history-dock-left {
    left: 0.5ch;
  }
  .history-dock-right {
    right: 0.5ch;
  }
  .history-card {
    padding-left: 0.35ch;
    padding-right: 0.35ch;
    box-shadow: 0.2ch 0.2ch 0 color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .transfer-copy {
    top: calc(var(--line-height) * 1.7);
    bottom: calc(var(--line-height) * 2.6);
    left: 29%;
    right: 29%;
    gap: calc(var(--line-height) / 2);
    padding: var(--line-height) 0.5ch;
  }
  .transfer-copy p {
    font-size: 0.78rem;
    line-height: var(--line-height);
  }
  .transfer-copy > span:last-child {
    font-size: 0.62rem;
    line-height: 1.35;
  }
  .transfer-copy-index {
    font-size: 0.52rem;
  }
  .history-runner {
    width: 68px;
  }
  .runner-cargo {
    height: calc(var(--line-height) * 2.5);
  }
  .runner-robot {
    font-size: 0.58rem;
  }
  .history-index {
    justify-content: flex-start;
    gap: calc(var(--line-height) / 3) 2ch;
  }

  .footage-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 82px;
    margin-top: var(--line-height);
  }
  .footage-feature {
    grid-column: span 2;
    grid-row: span 7;
  }
  .tile-wide,
  .tile-tall,
  .tile-square,
  .tile-slim {
    grid-column: span 1;
    grid-row: span 3;
  }
  .tile-wide:nth-of-type(odd),
  .tile-square:nth-of-type(even) {
    grid-column: span 2;
  }
  .feature-header {
    min-height: calc(var(--line-height) * 1.5);
  }
  .feature-footer {
    min-height: calc(var(--line-height) * 2.5);
  }
  .feature-footer h2 {
    font-size: 0.82rem;
  }
  .diagnostic {
    gap: 1ch;
  }
  .footage-instructions {
    justify-content: flex-start;
  }
}

@media screen and (max-width: 700px) {
  .humans-story {
    margin-top: var(--line-height);
    padding: calc(var(--line-height) * 1.25) 1.25ch;
  }
  .humans-story h2 {
    font-size: 1.25rem;
    line-height: calc(var(--line-height) * 1.5);
  }
  .humans-story-lede {
    font-size: 1.05rem;
    line-height: calc(var(--line-height) * 1.25);
  }
  .humans-story-grid {
    grid-template-columns: 1fr;
    margin: var(--line-height) 0;
  }

  .history-transfer-compact {
    margin-top: calc(var(--line-height) * 2);
  }
  .history-transfer-compact .transfer-header,
  .history-transfer-compact .transfer-footer {
    align-items: center;
    font-size: 0.58rem;
  }
  .history-transfer-compact .transfer-header h2 {
    font-size: 0.58rem;
  }
  .history-transfer-compact .transfer-bay {
    height: calc(var(--line-height) * 7);
    min-height: calc(var(--line-height) * 7);
  }
  .history-transfer-compact .transfer-bay::before {
    content: "AUTONOMOUS CARGO";
  }
  .history-transfer-compact .history-dock {
    top: calc(var(--line-height) * 1.25);
    bottom: calc(var(--line-height) * 2.6);
    width: 31%;
    padding: calc(var(--line-height) * 0.8) 0.2ch 0.25ch;
    gap: 0.15ch;
  }
  .history-transfer-compact .history-dock-left {
    left: 0.35ch;
  }
  .history-transfer-compact .history-dock-right {
    right: 0.35ch;
  }
  .history-transfer-compact .history-card {
    padding: 0.08rem 0.1ch;
    box-shadow: none;
  }
  .history-transfer-compact .history-card img {
    max-height: var(--line-height);
  }
  .history-transfer-compact .history-unit-label {
    display: none;
  }
  .history-transfer-compact .transfer-copy {
    top: calc(var(--line-height) * 1.25);
    bottom: calc(var(--line-height) * 2.6);
    left: 33%;
    right: 33%;
    gap: 0;
    padding: 0 0.2ch;
  }
  .history-transfer-compact .transfer-copy > span:last-child {
    font-size: 0.42rem;
    line-height: 1.2;
  }
  .history-transfer-compact .history-runner {
    width: 46px;
  }
  .history-transfer-compact .runner-cargo {
    height: calc(var(--line-height) * 1.65);
  }
  .history-transfer-compact .runner-robot {
    font-size: 0.38rem;
  }

  .footage-console {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    margin-top: var(--line-height);
  }
  .footage-console .footage-feature {
    flex: 0 0 min(72vh, 650px);
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    min-height: 540px;
  }
  .footage-rail {
    flex: 0 0 auto;
    width: 100%;
    height: 190px;
  }
  .footage-rail-viewport {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .footage-rail-track {
    flex-direction: row;
    width: max-content;
    height: 100%;
  }
  .footage-rail-item {
    flex: 0 0 220px;
    width: 220px;
    height: 100%;
    min-height: 0;
  }
  .footage-rail-item .tile-screen {
    min-height: 0;
  }
}

/* --------------------------------------- HUMANS: PAGE-PERIMETER TRANSPORT */
.humans-stage {
  position: relative;
  min-height: clamp(500px, 58vh, 650px);
  padding: 0 clamp(130px, 10vw, 160px) var(--line-height);
}
.humans-stage .page-intro,
.humans-stage .humans-copy,
.humans-stage .pillars {
  position: relative;
  z-index: 1;
}
.humans-stage .humans-copy {
  width: 100%;
  max-width: var(--copy-max-width);
  margin-right: auto;
  margin-left: auto;
  font-size: 1.1rem;
}
.history-perimeter {
  --history-dock-gap: calc(var(--line-height) / 5);
  --history-dock-width: clamp(96px, 9vw, 124px);
  --history-card-width: 100%;
  --history-card-height: calc(var(--line-height) * 2.5);
  --history-card-basis: var(--history-card-height);
  --history-card-border-thickness: 1px;
  --history-card-padding: calc(var(--line-height) / 4) 0.55ch;
  --history-card-logo-height: calc(var(--line-height) * 1.8);
  --history-card-ucsd-logo-height: calc(var(--line-height) * 1.25);
  --history-cargo-card-height: calc(var(--line-height) * 2.25);
  --history-runner-width: clamp(70px, 7vw, 96px);
  --history-runner-cargo-height: calc(var(--line-height) * 2.5);
  --history-runner-font-size: clamp(0.52rem, 0.8vw, 0.68rem);
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
}
.history-perimeter::before,
.history-perimeter::after {
  display: none;
}
.perimeter-dock {
  position: absolute;
  top: calc(var(--line-height) / 2);
  bottom: calc(var(--line-height) * 2);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--history-dock-gap);
  width: var(--history-dock-width);
  overflow: visible;
}
.perimeter-dock-left {
  left: 1ch;
  right: auto;
  align-items: stretch;
}
.perimeter-dock-right {
  right: 1ch;
  left: auto;
  align-items: stretch;
}
.history-perimeter .history-card {
  flex: 0 0 var(--history-card-basis);
  width: var(--history-card-width);
  max-width: var(--history-card-width);
  height: var(--history-card-height);
  padding: var(--history-card-padding);
  border-width: var(--history-card-border-thickness);
  box-shadow: none;
}
.history-perimeter .history-card img {
  max-height: var(--history-card-logo-height);
}
.history-perimeter .history-card-ucsd {
  gap: 0;
}
.history-perimeter .history-card-ucsd img {
  max-height: var(--history-card-ucsd-logo-height);
}
.history-perimeter .history-unit-label {
  font-size: 0.42rem;
}
.history-perimeter .history-card.is-in-transit {
  width: 100%;
  max-width: 100%;
  height: var(--history-cargo-card-height);
}
.perimeter-runner {
  top: 0;
  bottom: auto;
  left: 0;
  z-index: 4;
  width: var(--history-runner-width);
}
.perimeter-runner .runner-cargo {
  height: var(--history-runner-cargo-height);
}
.perimeter-runner .runner-robot {
  font-size: var(--history-runner-font-size);
}
.perimeter-runner.is-static {
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) !important;
}

/* ------------------------------------------------ FOOTAGE: SPARSE DATA RAIL */
.footage-rail-track {
  min-height: calc(100% + 5rem);
}
.footage-rail-track::after {
  content: "";
  display: block;
  flex: 0 0 5rem;
}
.footage-rail-track:empty {
  min-width: 100%;
  background:
    linear-gradient(color-mix(in srgb, var(--text-color-alt) 12%, transparent) 1px, transparent 1px);
  background-size: 100% var(--line-height);
}

@media screen and (max-width: 700px) {
  .humans-stage {
    min-height: 700px;
    padding: 0 0 calc(var(--line-height) * 13);
  }
  .humans-stage .page-intro {
    margin-top: calc(var(--line-height) * 1.25);
  }
  .humans-stage .humans-copy {
    font-size: 1rem;
  }
  .humans-stage .pillars p {
    white-space: normal;
  }
  .history-perimeter {
    --history-dock-gap: calc(var(--line-height) / 4);
    --history-dock-width: clamp(96px, 36vw, 128px);
    --history-card-width: 100%;
    --history-card-height: calc(var(--line-height) * 1.8);
    --history-card-basis: var(--history-card-height);
    --history-card-padding: 0.1rem 0.35ch;
    --history-card-logo-height: calc(var(--line-height) * 1.12);
    --history-card-ucsd-logo-height: calc(var(--line-height) * 0.95);
    --history-cargo-card-height: calc(var(--line-height) * 2);
    --history-runner-width: clamp(50px, 14vw, 58px);
    --history-runner-cargo-height: calc(var(--line-height) * 2.15);
    --history-runner-font-size: clamp(0.38rem, 1.7vw, 0.45rem);
  }
  .perimeter-dock {
    top: auto;
    bottom: calc(var(--line-height) * 4.8);
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--history-dock-gap);
    width: var(--history-dock-width);
    height: calc(var(--line-height) * 8.2);
  }
  .perimeter-dock-left {
    left: 0.5ch;
    right: auto;
  }
  .perimeter-dock-right {
    right: 0.5ch;
    left: auto;
  }
  .history-perimeter .history-unit-label {
    display: none;
  }

  .footage-rail-track {
    min-width: calc(100% + 8rem);
    min-height: 100%;
  }
  .footage-rail-track::after {
    flex: 0 0 8rem;
    height: 100%;
  }
}

/* ---- lab page ---- */
.day-grid {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--line-height) / 2) 2ch;
  margin: calc(var(--line-height) / 2) 0 var(--line-height);
}
.day-chip {
  white-space: nowrap;
}
select {
  border: var(--border-thickness) solid var(--text-color);
  background: var(--background-color);
  color: var(--text-color);
  font: inherit;
  width: 100%;
  padding:
    calc(var(--line-height) / 2 - var(--border-thickness))
    calc(1ch - var(--border-thickness));
}
.lab-note {
  border: var(--border-thickness) dashed var(--accent);
  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
  margin: 0 0 var(--line-height);
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
#lab-form nav {
  text-align: center;
}
#lab-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--line-height);
}
.choice-row {
  display: flex;
  gap: 3ch;
  flex-wrap: wrap;
  margin: 0 0 var(--line-height);
}
.choice-row label {
  white-space: nowrap;
}
#drop-closed[hidden] {
  display: none;
}

/* header: give the right-hand info stack (version/updated/lab) real width —
   the title cell was hoarding all the empty space on wide screens */
table.header th { white-space: nowrap; }
table.header tr > td:last-child { min-width: 18ch; }

/* lab form rhythm: every field on its own line with breathing room,
   and the pitch textarea gets full width under its label */
#lab-form > label { display: block; margin: 0 0 var(--line-height); }
#lab-form .grid label { margin: 0; }
#lab-form label textarea {
  display: block;
  width: 100%;
  margin-top: calc(var(--line-height) / 2);
}
#lab-form label select { margin-top: calc(var(--line-height) / 2); }