/* SpaceX Vehicle Center — HUD styles
   Tokens: warm-dark surfaces, one amber accent (used for "approximate" marks, the active
   vehicle and the ruler), IBM Plex Sans for text and IBM Plex Mono for figures. */
:root {
  --surface: #0f1012;
  --surface-raised: rgba(20, 21, 24, 0.86);
  /* Panels are frosted glass over the scene rather than opaque slabs: the vehicles are the
     subject, and a translucent, blurred panel with soft rounded corners reads as a layer over
     them instead of a box cut out of the frame. */
  /* 0.88, not 0.72: over a white sky or a cloud the panel is the text's background, and at 0.72
     even the muted grey fell to 2.7:1 there (WCAG AA asks 4.5:1). */
  --surface-solid: rgba(18, 20, 24, 0.88);
  --surface-line: rgba(236, 233, 226, 0.12);
  --surface-hover: rgba(236, 233, 226, 0.07);
  --radius-panel: 16px;
  --radius-ctl: 10px;
  --shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glass: blur(14px) saturate(140%);
  --ink: #ece9e2;
  /* Both hold 4.5:1 on the worst case, a panel over white (#2e3034): muted 5.8:1, faint 4.8:1.
     Faint was #6c6963, 3.4:1 on the solid surface and 1.4:1 over a bright sky. */
  --ink-muted: #b0aca4;
  --ink-faint: #a09c94;
  --accent: #d7a24a;
  --accent-quiet: rgba(215, 162, 74, 0.14);
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; overflow: hidden; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
button { font: inherit; color: inherit; }
kbd { font-family: var(--font-mono); font-size: 0.72em; padding: 1px 5px; border: 1px solid var(--surface-line); border-bottom-width: 2px; border-radius: 4px; color: var(--ink-muted); }
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--surface-line); }
a:hover { border-bottom-color: var(--accent); }
.eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.hidden { display: none !important; }

/* Header */
.hud-header { position: absolute; top: 24px; left: 24px; width: 232px; padding: 14px 16px 16px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel); }
.title { margin: 6px 0 2px; font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
.subtitle { color: var(--ink-muted); font-size: 0.86rem; line-height: 1.35; }

/* Vehicle rail */
.rail { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; width: 232px; padding: 6px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel); }
.rail-item { display: grid; grid-template-columns: 22px 1fr auto; align-items: baseline; gap: 12px; width: 100%; padding: 8px 10px; background: transparent; border: 0; border-radius: var(--radius-ctl); text-align: left; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); }
.rail-item:hover { background: var(--surface-hover); }
.rail-item.active { background: var(--accent-quiet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.rail-index { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); }
.rail-item.active .rail-index { color: var(--accent); }
.rail-name { font-weight: 500; }
.rail-h { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rail-h small { font-size: 0.74rem; color: var(--ink-faint); }
.rail-overview { margin-top: 8px; position: relative; }
.rail-overview::before { content: ""; position: absolute; left: 10px; right: 10px; top: -5px; height: 1px; background: var(--surface-line); }

/* Data sheet */
.sheet { position: absolute; right: 24px; top: 24px; width: 380px; max-height: calc(100vh - 232px); overflow: auto; padding: 16px 20px 20px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel); scrollbar-width: thin; scrollbar-color: var(--surface-line) transparent; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); }
.sheet.collapsed { max-height: 56px; overflow: hidden; }
.sheet.collapsed > :not(.sheet-head) { visibility: hidden; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.icon-btn { width: 28px; height: 28px; border: 1px solid var(--surface-line); border-radius: 50%; background: transparent; cursor: pointer; line-height: 1; }
.icon-btn:hover { border-color: var(--ink-muted); }
.summary { margin: 0 0 16px; font-size: 0.9rem; color: var(--ink-muted); line-height: 1.5; }
.specs { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 16px; }
.specs dt { padding-top: 8px; font-size: 0.78rem; color: var(--ink-muted); }
.specs dd { margin: 0; padding: 2px 0 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--surface-line); }
.specs .val { font-family: var(--font-mono); font-size: 0.86rem; font-variant-numeric: tabular-nums; line-height: 1.4; }
/* The source chip is what makes a figure a citation, so it has to be legible: it was ink-faint
   on a hairline border, and on the frosted panel it all but vanished. */
.chip { flex: none; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(236, 233, 226, 0.22); color: var(--ink-muted); background: rgba(236, 233, 226, 0.04); }
.chip-approx { color: var(--accent); border-color: var(--accent); background: var(--accent-quiet); font-size: 0.8rem; padding: 0 6px; }
.approx { margin: 0 0 16px; font-size: 0.84rem; color: var(--ink-muted); }
.approx summary { cursor: pointer; color: var(--ink); font-weight: 500; }
.approx summary::marker { color: var(--accent); }
.approx ul { margin: 8px 0 0; padding-left: 18px; }
.approx li { margin-bottom: 6px; }
.sources ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 0.8rem; }
.sources li { margin-top: 4px; }

/* Presets */
/* Site map. Under the data-sheet bar; when the sheet is open it would sit beneath it, so it
   steps aside, and in the overview (no sheet) it takes the corner. */
.minimap { position: absolute; right: 24px; top: 92px; width: 216px; padding: 10px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel); }
.minimap svg { display: block; width: 196px; height: auto; overflow: visible; }
.sheet.hidden ~ .minimap { top: 24px; }
.sheet:not(.collapsed):not(.hidden) ~ .minimap { display: none; }
.map-apron { fill: rgba(236, 233, 226, 0.14); }
.map-road { fill: rgba(236, 233, 226, 0.06); }
.map-pad { fill: rgba(236, 233, 226, 0.16); }
.map-plant { fill: rgba(236, 233, 226, 0.08); stroke: rgba(236, 233, 226, 0.18); stroke-width: 0.8; }
.map-tower { fill: var(--ink-muted); }
.map-stop { cursor: pointer; }
.map-stop circle { fill: rgba(18, 20, 24, 0.92); stroke: var(--ink-muted); stroke-width: 1.4; transition: stroke var(--dur-fast), fill var(--dur-fast); }
.map-stop text { fill: var(--ink); font-family: var(--font-mono); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.map-stop:hover circle, .map-stop:focus-visible circle { stroke: var(--ink); }
.map-stop:focus { outline: none; }
.map-stop.active circle { fill: var(--accent); stroke: var(--accent); }
.map-stop.active text { fill: #16130d; }
.map-camera { fill: color-mix(in srgb, var(--accent) 38%, transparent); stroke: var(--accent); stroke-width: 1; pointer-events: none; }
body.is-flying .minimap, body.is-orbital .minimap { display: none; }
@media (max-width: 1100px), (max-height: 600px) { .minimap { display: none; } }
.presets { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: min(720px, 46vw); padding: 6px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel); scrollbar-width: none; }
.presets::-webkit-scrollbar { display: none; }
.preset { padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-size: 0.84rem; color: var(--ink-muted); transition: color var(--dur-fast), border-color var(--dur-fast); }
.preset:hover { color: var(--ink); background: var(--surface-hover); }
.preset.active { color: var(--ink); background: var(--accent-quiet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }

/* Tools */
.tools { position: absolute; right: 24px; bottom: 28px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 280px; padding: 6px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel); }
.tool { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: transparent; border: 0; border-radius: var(--radius-ctl); font-size: 0.82rem; color: var(--ink-muted); cursor: pointer; user-select: none; }
.tool input[type="checkbox"] { accent-color: var(--accent); margin: 0; }
.tool input[type="range"] { width: 90px; accent-color: var(--accent); }
.tool-btn { background: rgba(236, 233, 226, 0.03); border: 1px solid var(--surface-line); border-radius: var(--radius-ctl); }
.tool-btn:hover { color: var(--ink); border-color: var(--ink-muted); background: var(--surface-hover); }
#hud.fly #mode-btn, #hud.walk #walk-btn { color: var(--accent); border-color: var(--accent); }

/* Scale bar */
.scale { position: absolute; left: 24px; bottom: 28px; display: flex; flex-direction: column; gap: 6px; padding: 26px 14px 10px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel); }
.scale-bar { position: relative; height: 10px; border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0 0 3px 3px; width: 120px; transition: width 120ms linear; }
.scale-bar span { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.74rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scale-info { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* Labels (CSS2D) */
.label { display: flex; align-items: center; gap: 0; transform: translate(0, -50%); pointer-events: none; white-space: nowrap; }
.label-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.label-leader { width: 16px; height: 1px; background: var(--accent); opacity: 0.9; flex: none; }
.label-text { padding: 3px 9px; background: rgba(15, 16, 18, 0.78); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; font-size: 0.74rem; color: var(--ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.label.is-culled { visibility: hidden; }
.ruler-label { font-family: var(--font-mono); font-size: 0.76rem; color: var(--accent); white-space: nowrap; transform: translate(4px, 0);
  /* A dark halo all round, not a drop shadow: amber on a white sky dropped under 2:1 contrast. */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.8); }
.ruler-top { font-size: 0.9rem; font-weight: 500; transform: translate(0, 0); }

/* Help */
.help { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 9, 11, 0.55); }
.help-card { width: min(640px, 92vw); padding: 24px 28px 28px; background: var(--surface-raised); border: 1px solid var(--surface-line); border-radius: 20px; box-shadow: var(--shadow-panel); backdrop-filter: blur(10px); }
.help table { width: 100%; margin: 12px 0 8px; border-collapse: collapse; font-size: 0.9rem; }
.help td { padding: 8px 0; border-bottom: 1px solid var(--surface-line); vertical-align: top; }
.help td:first-child { width: 120px; color: var(--ink-muted); font-family: var(--font-mono); font-size: 0.8rem; }
.help em { font-style: normal; color: var(--ink); }
.help-note { font-size: 0.84rem; color: var(--ink-muted); margin: 8px 0 16px; }
/* Quick guide: first steps, then one card per way of moving, the one in use marked. */
.help-card.guide { width: min(980px, 94vw); max-height: 92vh; overflow-y: auto; }
.guide-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.guide-title { margin: 4px 0 0; font-size: 1.35rem; font-weight: 600; }
.guide-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 14px; padding: 0; list-style: none; counter-reset: step; }
.guide-start li { counter-increment: step; position: relative; padding: 10px 12px 10px 40px; border-radius: 12px; background: var(--accent-quiet); font-size: 0.9rem; line-height: 1.4; }
.guide-start li::before { content: counter(step); position: absolute; left: 12px; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #17130c; font: 600 0.78rem/20px var(--font-mono); text-align: center; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.guide-sec { padding: 10px 14px 12px; border: 1px solid var(--surface-line); border-radius: 12px; }
.guide-sec h3 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.guide-sec dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin: 0; font-size: 0.84rem; line-height: 1.35; }
.guide-sec dt { color: var(--ink-muted); font-family: var(--font-mono); font-size: 0.76rem; white-space: nowrap; }
.guide-sec dd { margin: 0; }
.guide-here { display: none; margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #17130c; font: 600 0.68rem/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
#hud:not(.walk):not(.fly) .guide-sec[data-mode="orbit"],
#hud.walk .guide-sec[data-mode="walk"],
#hud.fly .guide-sec[data-mode="fly"],
body.is-flying .guide-sec[data-mode="launch"] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-quiet); }
#hud:not(.walk):not(.fly) .guide-sec[data-mode="orbit"] .guide-here,
#hud.walk .guide-sec[data-mode="walk"] .guide-here,
#hud.fly .guide-sec[data-mode="fly"] .guide-here,
body.is-flying .guide-sec[data-mode="launch"] .guide-here { display: inline-block; }
/* Flying the F-16, its card is the one in use (the launch's would light up too: it flies). */
#hud.is-f16 .guide-sec[data-mode] { border-color: var(--surface-line); background: transparent; }
#hud.is-f16 .guide-sec[data-mode] .guide-here { display: none; }
#hud.is-f16 .guide-sec[data-mode="f16"] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-quiet); }
#hud.is-f16 .guide-sec[data-mode="f16"] .guide-here { display: inline-block; }
#hud.is-gt3 .guide-sec[data-mode] { border-color: var(--surface-line); background: transparent; }
#hud.is-gt3 .guide-sec[data-mode] .guide-here { display: none; }
#hud.is-gt3 .guide-sec[data-mode="gt3"] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-quiet); }
#hud.is-gt3 .guide-sec[data-mode="gt3"] .guide-here { display: inline-block; }
@media (max-width: 1100px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
.btn { padding: 8px 18px; border: 1px solid var(--surface-line); border-radius: 999px; background: transparent; cursor: pointer; }
.btn:hover { border-color: var(--ink-muted); }

/* Loading */
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--surface); z-index: 10; transition: opacity 600ms var(--ease-out); }
#loading.done { opacity: 0; pointer-events: none; }
#loading.error .loading-text { color: #e07a5f; }
.loading-card { width: min(420px, 88vw); }
.loading-title { margin: 8px 0 20px; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; }
.loading-track { height: 4px; background: var(--surface-line); overflow: hidden; border-radius: 999px; }
.loading-fill { height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0.02); transition: transform 300ms var(--ease-out); }
.loading-text { margin-top: 10px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); }

@media (max-width: 1100px) {
  .sheet { width: 320px; }
  .rail-item { width: 200px; }
}
.dock { display: none; }
.dock-btn {
  min-height: 44px; min-width: 44px; padding: 0 8px;
  background: var(--surface-solid); color: var(--ink); border: 1px solid var(--surface-line);
  border-radius: var(--radius-ctl); font-size: 0.78rem; cursor: pointer;
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
}
.dock-btn[aria-expanded="true"], .dock-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
#hud.is-clean .hud-header,
#hud.is-clean .rail,
#hud.is-clean .sheet,
#hud.is-clean .presets,
#hud.is-clean .tools,
#hud.is-clean .minimap,
#hud.is-clean .scale { display: none !important; }
#hud.is-clean .dock {
  display: flex; position: absolute; left: 50%; bottom: 12px;
  transform: translateX(-50%); gap: 6px; z-index: 6;
}

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

/* Keyboard focus was invisible: the HUD is fully operable from the keyboard (1 to as many
   exhibits as there are, 0, F, G, L, P, R, T, H) but nothing showed where focus was.
   :focus-visible only paints for keyboard users, so pointer users see no change. */
:where(button, input, a, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Annotations whose line of sight passes through the vehicle: kept in the layout (so the
   callout order stays stable) but not drawn. At 14 % they printed as ghost text across the
   hull in front of them — "Trunk · radiator" over the Dragon's solar cells — which reads as a
   rendering fault, not as "this is on the far side". They fade back as the camera comes round. */
.label.is-occluded { opacity: 0; pointer-events: none; }
.label { transition: opacity var(--dur-fast) linear; }

/* ---- Launch sequence ---------------------------------------------------------------- */
.tool-launch { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, var(--surface-line)); }
.tool-launch:hover { border-color: var(--accent); }
.tool-btn.is-live,
.tool-launch.is-live { background: color-mix(in srgb, var(--accent) 22%, var(--surface-raised)); border-color: var(--accent); color: var(--ink); }

.mission {
  position: absolute; left: 24px; bottom: 28px;
  width: min(440px, calc(100vw - 48px));
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 12px;
  background: var(--surface-solid); border: 1px solid var(--surface-line);
  border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  box-shadow: var(--shadow-panel);
}
.mission.hidden { display: none; }
.mission-plot { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.mission-plot svg { width: 100%; height: 64px; display: block; border-radius: 6px; background: rgba(236, 233, 226, 0.03); }
.mission-plot figcaption { display: flex; gap: 14px; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.mission-plot .mp-ship::before, .mission-plot .mp-booster::before { content: ""; display: inline-block; width: 12px; height: 2px; margin-right: 6px; vertical-align: middle; }
.mission-plot .mp-ship::before { background: var(--accent); }
.mission-plot .mp-booster::before { background: #8fb3d9; }
.mission-plot .mp-scale { margin-left: auto; text-transform: none; letter-spacing: 0.02em; }
.mp-line-ship { fill: none; stroke: var(--accent); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.mp-line-booster { fill: none; stroke: #8fb3d9; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.mp-tick { stroke: rgba(236, 233, 226, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mp-cursor { stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.mission-head { display: flex; align-items: baseline; gap: 14px; }
.mission-clock { font-family: var(--font-mono); font-size: 1.28rem; font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: 0.02em; }
.mission-phase { font-size: 0.84rem; color: var(--accent); letter-spacing: 0.03em; }
.mission-head { flex-wrap: wrap; row-gap: 2px; }
.mission-fold { margin-left: auto; width: 28px; height: 28px; font-size: 1rem; line-height: 1; align-self: center; color: var(--ink); }
.mission.is-compact .mission-kind, .mission.is-compact .mission-telemetry,
.mission.is-compact .mission-plot, .mission.is-compact .mission-note { display: none; }
.mission-next { flex-basis: 100%; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-muted); font-variant-numeric: tabular-nums; min-height: 1em; }
/* Two vehicles side by side, as the webcast carries them: engine dial, name, speed, altitude. */
.mission-telemetry { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-veh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mt-engines { width: 46px; height: 46px; flex: none; }
.mt-engines circle { fill: rgba(236, 233, 226, 0.08); stroke: rgba(236, 233, 226, 0.34); stroke-width: 0.12; transition: fill 0.12s; }
.mt-engines circle.on { fill: #ffd28a; stroke: #fff1d6; }
.mt-read { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mt-name { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.mt-name em { font-style: normal; color: var(--accent); letter-spacing: 0.02em; margin-left: 4px; text-transform: none; }
.mt-row { display: flex; align-items: baseline; gap: 6px; }
.mt-row i { font-style: normal; font-size: 0.74rem; color: var(--ink-faint); width: 4.6em; flex: none; }
.mt-row b { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.mission-sound { font-size: 0.78rem; padding: 5px 12px; cursor: pointer; background: transparent; color: var(--ink-muted); border: 1px solid var(--surface-line); border-radius: 999px; margin-left: auto; }
.mission-sound.active { color: var(--ink); border-color: var(--accent); }
/* Milestone callout: a caption over the picture as each event is reached, then gone. */
.callout {
  position: absolute; left: 50%; top: 16vh; transform: translate(-50%, -6px);
  padding: 6px 16px; border-radius: 999px; pointer-events: none;
  font-size: 0.86rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
  background: color-mix(in srgb, var(--surface-solid) 78%, transparent); border: 1px solid var(--surface-line);
  opacity: 0; transition: opacity 0.35s, transform 0.35s; white-space: nowrap; z-index: 5;
}
.callout.is-on { opacity: 1; transform: translate(-50%, 0); }
/* A sentence rather than a milestone name: wrapped, in sentence case, as a card. */
.callout.is-long { white-space: normal; text-transform: none; letter-spacing: 0; width: min(560px, 80vw); border-radius: 14px; padding: 10px 18px; text-align: center; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .callout { transition: none; } }
@media (max-width: 520px) {
  .mt-veh { gap: 6px; }
  .mt-engines { width: 34px; height: 34px; }
  .mt-row i { display: none; }
  .mt-row b { font-size: 0.82rem; }
  .callout { font-size: 0.74rem; letter-spacing: 0.12em; top: 14vh; }
}
.mission-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.mission-pause, .mission-restart, .mission-cam { font-size: 0.78rem; padding: 5px 12px; min-height: 28px; cursor: pointer; background: transparent; color: var(--ink-muted); border: 1px solid var(--surface-line); border-radius: 999px; }
.mission-pause kbd, .mission-cam kbd { margin-left: 4px; }
.mission-cam.active { color: var(--ink); border-color: var(--accent); }
.mission-pause.active { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.mission-pause:hover, .mission-restart:hover { color: var(--ink); border-color: var(--ink-muted); }
/* The profile doubles as the timeline. */
.mission-plot svg { cursor: pointer; touch-action: none; }
/* Touch: the transport controls were 34 × 27 px; WCAG 2.2 asks for at least 24 px and a
   finger wants more. */
.mission-speeds { display: inline-flex; gap: 2px; }
.mission-speeds button {
  font-family: var(--font-mono); font-size: 0.76rem; padding: 4px 9px; min-height: 26px; cursor: pointer;
  background: transparent; color: var(--ink-faint);
  border: 1px solid var(--surface-line); border-radius: 999px;
}
.mission-speeds button.active { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.mission-abort { font-size: 0.78rem; padding: 5px 12px; cursor: pointer; background: transparent; color: var(--ink-muted); border: 1px solid var(--surface-line); border-radius: 999px; }
.mission-abort:hover { color: var(--ink); border-color: var(--ink-muted); }
.mission-kind { margin: 2px 0 6px; font-size: 0.76rem; line-height: 1.35; color: var(--ink-muted); }
.mission-note { margin: 0; font-size: 0.76rem; line-height: 1.45; color: var(--ink-muted); }
.mission-note summary { cursor: pointer; color: var(--accent); }
.mission-note p { max-height: 22vh; overflow: auto; margin: 6px 0 0; }
/* The scale bar occupies the same corner and means little while chasing a rocket, so the
   mission panel takes the corner for the duration. */
body.is-flying .scale { display: none; }
/* The preset row is a list of views of a vehicle on its mount; none of them mean anything
   while it is 50 km up, and the panel needs the corner. */
body.is-flying .presets { display: none; }
body.is-flying .rail { display: none; }

@media (max-width: 1600px) {
  .presets { left: 280px; right: 340px; transform: none; width: auto; max-width: none; overflow: visible; justify-content: flex-start; }
  .preset { flex: 0 0 auto; white-space: nowrap; }
}


/* The flight-profile plot is a luxury on short screens: a phone held sideways has 390 px for
   the header, the mission panel and the scene. */
@media (max-height: 560px) { .mission-plot { display: none; } }

/* First-visit tips, top centre, in the gap between the header and the data sheet. Same glass
   as the HUD. */
.coach {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px;
  width: max-content; max-width: min(660px, calc(100vw - 620px));
  padding: 10px 44px 10px 18px; font-size: 0.85rem; color: var(--ink-muted);
  background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  animation: coach-in var(--dur-base) var(--ease-out) both;
}
.coach b { color: var(--ink); font-weight: 600; }
.coach-close {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-muted); cursor: pointer;
}
.coach-close:hover { background: var(--surface-hover); color: var(--ink); }
@keyframes coach-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Below 1100 px there is no gap wide enough for the tips that does not touch the data sheet
   or the tool panel, so they are left out rather than overlap. */
@media (max-width: 1100px) { .coach { display: none; } }
@media (prefers-reduced-motion: reduce) { .coach { animation: none; } }

/* Guided tour caption: what the stop shows, and where the figure comes from. Top centre,
   between the header and the data sheet. */
.tour-card {
  /* Between the header (right edge 256 px) and the collapsed data sheet (380 px wide at the
     right), centred in what is left and never wider than a comfortable line. */
  position: absolute; top: 24px; left: 280px; right: 428px; margin: 0 auto; max-width: 460px; padding: 12px 16px;
  background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel);
}
.tour-text { margin: 6px 0 6px; font-size: 0.86rem; line-height: 1.45; color: var(--ink); }
.tour-src { font-size: 0.76rem; color: var(--ink-muted); }
/* Tablet: the collapsed sheet is 320 px wide here and leaves no room beside the header, so
   the caption goes under the sheet, right of the vehicle rail. */
@media (max-width: 1100px) {
  .tour-card { top: 96px; left: 280px; right: 24px; max-width: none; }
}
body.is-touring .coach { display: none; }

/* ?perf readout: small, out of the way, never taking pointer input. */
.perf-meter {
  position: fixed; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 50; pointer-events: none;
  font-family: var(--font-mono); font-size: 11px; color: #e8e6e0; background: rgba(12, 14, 18, 0.82);
  padding: 3px 8px; border-radius: 6px; white-space: pre; max-width: calc(100vw - 16px); overflow: hidden; text-overflow: ellipsis; line-height: 1.5;
}

/* Desktop only. On a phone or a small window the page says so once, and still runs. */
.desktop-note {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40;
  width: min(420px, calc(100vw - 32px)); padding: 18px 20px; text-align: left;
  background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel); color: var(--ink); font-size: 0.9rem; line-height: 1.45;
}
.desktop-note button { margin-top: 12px; }
.loading-note { margin-top: 12px; font-size: 0.78rem; color: var(--ink-muted); }

/* Re-entry chapter: the ship alone; the booster column goes. */
.mission.is-reentry .mt-booster,
.mission.is-reentry .mp-booster { display: none; }

/* F-16 flight: the HUD over the scene and the flight's bar (ui/f16Hud.js). While the airplane
   flies, the museum's panels step aside; the guide and the notices stay. */
#hud.is-f16 > *:not(.f16-bar):not(.help):not(.callout) { display: none !important; }
/* The Porsche's drive (ui/gt3Hud.js) takes the same treatment: its bar reuses the flight's styles. */
#hud.is-gt3 > *:not(.f16-bar):not(.help):not(.callout) { display: none !important; }
.f16-hud { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.f16-hud.hidden { display: none; }
.f16-bar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: min(820px, calc(100vw - 32px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px 6px;
  background: var(--surface-solid); border: 1px solid var(--surface-line);
  border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  box-shadow: var(--shadow-panel); font-size: 0.82rem;
}
.f16-bar .eyebrow { flex: 1; font-size: 0.68rem; }
.f16-btn { padding: 3px 9px; background: transparent; border: 1px solid var(--surface-line); border-radius: var(--radius-ctl); cursor: pointer; font-size: 0.8rem; color: inherit; }
.f16-btn:hover { background: var(--surface-hover); }
.f16-btn[aria-pressed="true"] { background: var(--accent-quiet); border-color: var(--accent); }
.f16-keys { flex-basis: 100%; margin: 0; font-size: 0.7rem; color: var(--ink-faint); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f16-keys kbd { margin-right: 1px; }
.f16-msgs { flex-basis: 100%; list-style: none; margin: 0; padding: 0; min-height: 1.3em; font-size: 0.8rem; color: var(--accent); display: flex; gap: 14px; flex-wrap: wrap; }
.f16-result {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); width: min(520px, calc(100vw - 32px));
  padding: 14px 18px; background: var(--surface-solid); border: 1px solid var(--surface-line);
  border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel);
}
.f16-result b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.f16-result span { display: block; margin-top: 8px; color: var(--ink-muted); font-size: 0.8rem; }
.f16-result.hidden, .f16-bar.hidden { display: none; }
.f16-bar .f16-full { display: none; }
.f16-bar:not(.is-assist) .f16-easy { display: none; }
.f16-bar:not(.is-assist) .f16-full { display: block; }

/* Text for a screen reader only: the drive's and the flight's telemetry (audit H25). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- Cybertruck Lab (ui/cybertruckLab.js): the Cybertruck on its own, over the site ---- */
body.cybertruck-lab-open #hud, body.cybertruck-lab-open #labels { display: none; }
#cybertruck-lab { position: fixed; inset: 0; z-index: 40; color: var(--ink); font-family: var(--font-sans); --ctl-panel: 320px; }
#cybertruck-lab.hidden, #cybertruck-lab .hidden { display: none !important; }
#cybertruck-lab .ctl-stage { position: absolute; inset: 0; touch-action: none; cursor: grab; }
#cybertruck-lab .ctl-stage:active { cursor: grabbing; }
#cybertruck-lab .ctl-head { position: absolute; top: 24px; left: 24px; right: calc(var(--ctl-panel) + 48px); display: flex; align-items: flex-start; gap: 14px; pointer-events: none; }
#cybertruck-lab .ctl-head > * { pointer-events: auto; }
#cybertruck-lab .ctl-back { padding: 9px 14px; min-height: 40px; color: var(--ink); background: var(--surface-solid); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); cursor: pointer; font: inherit; font-size: 13px; }
#cybertruck-lab .ctl-title { pointer-events: none; min-width: 0; }
#cybertruck-lab .ctl-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
#cybertruck-lab .ctl-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; }
#cybertruck-lab[data-env="exterior"] .ctl-name, #cybertruck-lab[data-env="exterior"] .ctl-title .eyebrow, #cybertruck-lab[data-env="exterior"] .ctl-sub { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); color: #f4f6f8; }
#cybertruck-lab .ctl-note { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); max-width: min(520px, calc(100vw - 48px)); padding: 10px 14px; font-size: 13px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-left: 2px solid var(--accent); border-radius: var(--radius-ctl); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); pointer-events: none; z-index: 2; }
/* Panel: systems, parts, data. */
#cybertruck-lab .ctl-panel { position: absolute; top: 24px; right: 24px; bottom: 24px; width: var(--ctl-panel); display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel); }
#cybertruck-lab .ctl-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-ctl); }
#cybertruck-lab .ctl-tab, #cybertruck-lab .ctl-seg-btn { padding: 7px 8px; min-height: 32px; color: var(--ink-muted); background: none; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12.5px; white-space: nowrap; }
#cybertruck-lab .ctl-tab[aria-pressed="true"], #cybertruck-lab .ctl-seg-btn[aria-pressed="true"] { color: var(--ink); background: var(--accent-quiet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
#cybertruck-lab .ctl-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
#cybertruck-lab .ctl-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--surface-line) transparent; }
#cybertruck-lab .ctl-pane-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--ink-muted); margin: 2px 2px 10px; }
#cybertruck-lab .ctl-link { background: none; border: 0; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
#cybertruck-lab .ctl-systems { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#cybertruck-lab .ctl-chip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding: 8px 9px; min-height: 44px; text-align: left; color: var(--ink); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--surface-line); border-radius: var(--radius-ctl); cursor: pointer; font: inherit; font-size: 12px; line-height: 1.25; }
#cybertruck-lab .ctl-chip small { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }
#cybertruck-lab .ctl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
#cybertruck-lab .ctl-chip[aria-pressed="false"] { color: var(--ink-faint); background: none; }
#cybertruck-lab .ctl-chip[aria-pressed="false"] .ctl-dot { background: none; box-shadow: inset 0 0 0 1.5px var(--c); }
#cybertruck-lab .ctl-search { width: 100%; box-sizing: border-box; padding: 9px 11px; margin-bottom: 8px; color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--surface-line); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; }
#cybertruck-lab .ctl-group { border-top: 1px solid var(--surface-line); }
#cybertruck-lab .ctl-group summary { display: flex; justify-content: space-between; padding: 9px 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); cursor: pointer; }
#cybertruck-lab .ctl-n { font-family: var(--font-mono); font-weight: 400; color: var(--ink-faint); }
#cybertruck-lab .ctl-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; padding: 1px 4px; border-radius: 8px; }
#cybertruck-lab .ctl-item:hover, #cybertruck-lab .ctl-item.is-selected { background: var(--surface-hover); }
#cybertruck-lab .ctl-item.is-selected .ctl-item-name { color: var(--accent); }
#cybertruck-lab .ctl-item.is-hidden .ctl-item-name { color: var(--ink-faint); text-decoration: line-through; }
#cybertruck-lab .ctl-item-name { text-align: left; background: none; border: 0; padding: 6px 0; color: var(--ink); font: inherit; font-size: 12.5px; line-height: 1.3; cursor: pointer; }
#cybertruck-lab .ctl-eye { background: none; border: 0; color: var(--ink-muted); cursor: pointer; font-size: 13px; padding: 4px; }
#cybertruck-lab .ctl-eye[aria-pressed="false"] { color: var(--ink-faint); opacity: 0.45; }
#cybertruck-lab .ctl-fid, #cybertruck-lab .ctl-pill { font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; }
#cybertruck-lab .fid-V { color: #6fd39b; }
#cybertruck-lab .fid-R { color: #7fb2ff; }
#cybertruck-lab .fid-A { color: var(--accent); }
#cybertruck-lab .ctl-data-lead, #cybertruck-lab .ctl-data-note { font-size: 12px; line-height: 1.45; color: var(--ink-muted); margin: 2px 2px 10px; }
#cybertruck-lab .ctl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#cybertruck-lab .ctl-table th { text-align: right; font-weight: 600; color: var(--ink-muted); padding: 4px 3px; border-bottom: 1px solid var(--surface-line); }
#cybertruck-lab .ctl-table td { padding: 5px 3px; border-bottom: 1px solid color-mix(in srgb, var(--surface-line) 55%, transparent); }
#cybertruck-lab .ctl-table td.num { text-align: right; font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }
#cybertruck-lab .ctl-table tr.is-measured td:nth-child(3) { color: var(--accent); }
#cybertruck-lab .ctl-fid-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; }
#cybertruck-lab .ctl-fid-box { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 1px solid currentColor; border-radius: var(--radius-ctl); font-size: 11px; }
#cybertruck-lab .ctl-fid-box b { font-family: var(--font-mono); font-size: 16px; }
#cybertruck-lab .ctl-data-h { margin: 14px 2px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
#cybertruck-lab .ctl-toggles .ctl-seg-btn { flex: 1 1 0; }
#cybertruck-lab .ctl-sources { list-style: none; margin: 0; padding: 0; font-size: 11.5px; line-height: 1.45; }
#cybertruck-lab .ctl-sources li { margin: 4px 2px; }
/* The selected part's card. */
#cybertruck-lab .ctl-info { position: absolute; top: 112px; left: 24px; width: min(320px, calc(100vw - var(--ctl-panel) - 96px)); max-height: calc(100vh - 360px); overflow-y: auto; padding: 14px 16px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-left: 2px solid var(--accent); border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel); }
#cybertruck-lab .ctl-info-top { display: flex; justify-content: space-between; align-items: center; }
#cybertruck-lab .ctl-x { background: none; border: 0; color: var(--ink-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; }
#cybertruck-lab .ctl-info-title { margin: 8px 0 2px; font-size: 16px; font-weight: 600; line-height: 1.3; }
#cybertruck-lab .ctl-info-name { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); word-break: break-all; }
#cybertruck-lab .ctl-info-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 10px 0; font-size: 12.5px; }
#cybertruck-lab .ctl-info-dl dt { color: var(--ink-muted); }
#cybertruck-lab .ctl-info-dl dd { margin: 0; }
#cybertruck-lab .ctl-info-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); margin: 0 0 10px; }
#cybertruck-lab .ctl-info-acts { display: flex; gap: 6px; flex-wrap: wrap; }
#cybertruck-lab .ctl-info-acts button, #cybertruck-lab .ctl-dock button.tool { padding: 7px 11px; min-height: 34px; color: var(--ink); cursor: pointer; font: inherit; font-size: 12.5px; white-space: nowrap; }
/* The dock: views, the explosion and its stages. */
#cybertruck-lab .ctl-dock { position: absolute; left: 24px; right: calc(var(--ctl-panel) + 48px); bottom: 24px; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel); }
#cybertruck-lab .ctl-views { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#cybertruck-lab .ctl-views button { padding: 6px 10px; min-height: 30px; color: var(--ink-muted); cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; }
#cybertruck-lab .ctl-views button.is-active { color: var(--ink); background: var(--accent-quiet); }
#cybertruck-lab .ctl-dock-row { display: flex; align-items: center; gap: 8px; }
#cybertruck-lab .ctl-explode { flex: 1 1 auto; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; font-weight: 600; }
#cybertruck-lab .ctl-explode output { font-family: var(--font-mono); font-weight: 400; color: var(--ink-muted); }
#cybertruck-lab .ctl-explode input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); height: 22px; margin: 0; }
#cybertruck-lab .ctl-sys-select { max-width: 190px; padding: 7px 8px; min-height: 34px; color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--surface-line); border-radius: var(--radius-ctl); font: inherit; font-size: 12.5px; }
#cybertruck-lab .ctl-sys-select option { background: #16181c; }
#cybertruck-lab .ctl-play[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-quiet); }
#cybertruck-lab .ctl-stages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
#cybertruck-lab .ctl-stage-chip { position: relative; overflow: hidden; display: flex; gap: 6px; align-items: center; padding: 6px 8px; min-height: 32px; text-align: left; color: var(--ink-muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--surface-line); border-radius: 8px; cursor: pointer; font: inherit; font-size: 11.5px; line-height: 1.2; }
#cybertruck-lab .ctl-stage-chip::before { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--k, 0)); }
#cybertruck-lab .ctl-stage-chip b { font-family: var(--font-mono); color: var(--ink-faint); }
#cybertruck-lab .ctl-stage-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cybertruck-lab .ctl-stage-chip.is-on { color: var(--ink); }
#cybertruck-lab .ctl-stage-chip[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
#cybertruck-lab .ctl-status { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Scene settings, above the dock's Scene button. */
#cybertruck-lab .ctl-pop { position: absolute; right: calc(var(--ctl-panel) + 48px); bottom: 210px; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; min-width: 300px; background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-panel); }
#cybertruck-lab .ctl-pop-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-muted); }
#cybertruck-lab .ctl-seg { display: flex; gap: 3px; padding: 3px; background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-ctl); grid-column: 2 / -1; }
#cybertruck-lab .ctl-seg-btn { flex: 1 1 auto; }
#cybertruck-lab .ctl-amp { accent-color: var(--accent); width: 100%; }
#cybertruck-lab .ctl-amp-out { font-family: var(--font-mono); font-size: 11.5px; }
#cybertruck-lab .ctl-loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11, 12, 14, 0.72); z-index: 3; }
#cybertruck-lab :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1180px) {
  #cybertruck-lab { --ctl-panel: 280px; }
  #cybertruck-lab .ctl-stage-chip span { display: none; }
  #cybertruck-lab .ctl-stages { grid-template-columns: repeat(6, auto); justify-content: start; }
}

/* ?perf=log: the measurement's result, to copy or download (main.js). */
.perf-log { position: fixed; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 48px)); display: flex; flex-direction: column; gap: 10px; padding: 16px; color: var(--ink); background: var(--surface-solid); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); font-family: var(--font-sans); }
.perf-log textarea { height: 320px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--surface-line); border-radius: var(--radius-ctl); resize: vertical; }
.perf-log a { text-decoration: none; }

/* Photo mode (ui/photoMode.js, key O). */
.photo { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 260px; padding: 12px 14px;
  background: rgba(20, 22, 26, 0.88); color: #e8e6e1; border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px; font: 12px/1.4 Inter, system-ui, sans-serif; transition: opacity 0.2s; }
.photo.hidden { display: none; }
.photo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.photo-title { font-weight: 600; letter-spacing: 0.02em; }
.photo-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 6px 0; }
.photo-row input { grid-column: 1 / -1; width: 100%; }
.photo-row output { font-variant-numeric: tabular-nums; color: #c9b27c; }
.photo-check { display: flex; gap: 6px; align-items: center; margin: 8px 0; }
.photo-btns { display: flex; gap: 6px; }
.photo-btns .tool-btn { flex: 1; }
.photo-note { margin: 8px 0 0; color: #9a978f; font-size: 11px; }
body.photo-ui-off #hud, body.photo-ui-off #labels { visibility: hidden; }
body.photo-ui-off .photo { opacity: 0.22; }
body.photo-ui-off .photo:hover, body.photo-ui-off .photo:focus-within { opacity: 1; }

/* The Guide's sound settings (main.js, sim/ambience.js). */
.help-sound { display: grid; gap: 6px; margin-top: 4px; }
.help-sound-row { display: flex; gap: 8px; align-items: center; }
.help-sound-row input[type="range"] { flex: 1; max-width: 180px; }
.help-sound-row output { font-variant-numeric: tabular-nums; min-width: 3.5em; }
.photo-row select { grid-column: 1 / -1; width: 100%; background: #1d2026; color: inherit; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 3px 4px; }