/* THE_YARD — styles */

:root {
  --pods-orange: #E87722;
  --pods-orange-bright: #FF8C2A;
  /* Steel scale — shifted slightly toward navy/blue so panels read as
     industrial steel-blue rather than the previous near-black base. Orange
     stays as the single warm accent. */
  --steel-900: #08111C;
  --steel-800: #0E1826;
  --steel-700: #15222F;
  --steel-600: #1C2A39;
  --steel-500: #2A3949;
  --steel-400: #4B5C70;
  --steel-300: #7B8898;
  --steel-200: #A8B3C0;
  --steel-100: #D9DFE7;
  --blueprint: #5BB8F7;
  --blueprint-dim: #1F5E82;
  --terminal-green: #6DFF8C;
  --terminal-amber: #FFB627;
  --warning: #FF4444;
  --paint-white: #F4EFE6;
  /* Tour overlay tokens — single source so palette tweaks propagate. */
  --tour-bg: rgba(12, 22, 34, 0.96);
  --tour-border: rgba(91, 184, 247, 0.45);
  --tour-accent: var(--pods-orange);

  --font-mono: ui-monospace, "JetBrains Mono", "Menlo", "Consolas", monospace;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-stencil: "Anton", "Oswald", "Bebas Neue", "Impact", sans-serif;

  /* Motion tokens — one canonical premium curve for heavyweight cinematic
     transitions (panel opens, intel card reveals, link card hovers) and
     one quicker curve for HUD-level interactions where snappiness matters
     more than weight. Use these instead of hard-coding cubic-beziers in
     new rules so the motion language stays unified. */
  --ease-cinematic: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-hud:       cubic-bezier(0.2, 0.85, 0.25, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1c2c44;
  color: var(--paint-white);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
}
@media (hover: none) {
  .cursor { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

#root, #scene-root {
  position: fixed;
  inset: 0;
}

/* ─────────── BOOT SEQUENCE ─────────── */
.boot {
  position: fixed; inset: 0;
  background: var(--steel-900);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 1000;
  font-family: var(--font-mono);
  color: var(--terminal-green);
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: default;
}
.boot-lines {
  width: min(560px, 80vw);
  text-align: left;
}
.boot-line { opacity: 0; }
.boot-cursor {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--terminal-green);
  vertical-align: -2px;
  animation: blink 1s steps(2) infinite;
  margin-left: 2px;
}
.boot-prompt {
  margin-top: 24px;
  color: var(--paint-white);
  font-size: 12px;
  opacity: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.boot-prompt button {
  background: var(--pods-orange);
  color: var(--steel-900);
  border: none;
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  cursor: pointer;
  margin-left: 12px;
  text-transform: uppercase;
  transition: filter .15s;
}
.boot-prompt button:hover { filter: brightness(1.15); }
.boot-prompt button:focus-visible {
  outline: 2px solid var(--terminal-green);
  outline-offset: 3px;
}
.boot-prompt-text { display: inline-block; }
.boot-skip {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--steel-400);
  text-transform: uppercase;
}
.boot-brand {
  font-family: var(--font-stencil);
  font-size: 38px;
  letter-spacing: 0.14em;
  color: var(--pods-orange);
  margin-bottom: 28px;
  text-align: center;
  line-height: 1;
}
.boot-brand span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steel-300);
  letter-spacing: 0.4em;
}
/* Instant-clarity tagline — sits between the brand and the boot trace so the
   first thing the visitor reads is what the site is, not what's loading. */
.boot-tagline {
  margin: -14px 0 24px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--steel-100);
  max-width: 360px;
}

@keyframes blink { 50% { opacity: 0; } }

/* ─────────── STATIC / WEBGL FALLBACK ─────────── */
.fallback-screen {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(10,13,16,.92), rgba(10,13,16,.98)),
    radial-gradient(circle at 50% 20%, rgba(232,119,34,.14), transparent 42%),
    var(--steel-900);
  color: var(--paint-white);
  cursor: default;
}
.fallback-card {
  width: min(560px, 100%);
  border: 1px solid rgba(232,119,34,.42);
  background: linear-gradient(180deg, rgba(18,22,27,.94), rgba(10,13,16,.96));
  box-shadow: 0 24px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  padding: clamp(24px, 5vw, 38px);
}
.fallback-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pods-orange);
  margin-bottom: 14px;
}
.fallback-card h1 {
  font-family: var(--font-stencil);
  font-size: clamp(34px, 7vw, 56px);
  line-height: .94;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.fallback-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel-100);
  max-width: 48ch;
}
.fallback-id {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(160,170,181,.18);
  font-family: var(--font-mono);
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-300) !important;
}
.fallback-card button {
  margin-top: 22px;
  border: 1px solid rgba(109,255,140,.7);
  background: var(--pods-orange);
  color: var(--steel-900);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 11px 18px;
  cursor: pointer;
}
.fallback-card button:hover { filter: brightness(1.08); }
.fallback-card button:focus-visible {
  outline: 2px solid var(--terminal-green);
  outline-offset: 3px;
}

/* ─────────── HUD ─────────── */
.hud {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-100);
}
.hud > * { pointer-events: auto; }

.hud-corner {
  position: absolute;
  padding: 14px 18px;
  display: flex; gap: 16px;
  align-items: center;
  background: linear-gradient(180deg, rgba(10,13,16,.85), rgba(10,13,16,0));
}
.hud-corner.tl { top: 0; left: 0; }
.hud-corner.tr { top: 0; right: 0; background: linear-gradient(180deg, rgba(10,13,16,.85), rgba(10,13,16,0)); }
.hud-corner.bl { bottom: 0; left: 0; background: linear-gradient(0deg, rgba(10,13,16,.85), rgba(10,13,16,0)); padding-bottom: 18px;}
.hud-corner.br { bottom: 0; right: 0; background: linear-gradient(0deg, rgba(10,13,16,.85), rgba(10,13,16,0)); padding-bottom: 18px;}

.hud-logo {
  font-family: var(--font-stencil);
  font-size: 22px;
  letter-spacing: 0.1em;
  color: var(--pods-orange);
  line-height: 1;
}
.hud-logo small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--steel-300);
  letter-spacing: 0.3em;
  margin-top: 2px;
}

/* operator identity card */
.operator-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  font-family: var(--font-mono);
  line-height: 1.15;
  padding: 4px 14px 4px 12px;
  border-left: 3px solid var(--pods-orange);
  min-width: 220px;
}
.op-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* Subtle operator portrait — small framed headshot in the HUD card.
   Quiet treatment (low saturation, slight desaturate, soft border) so
   the world stays cinematic and the card stays operator-style, not
   social-network-style. */
.op-portrait {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  align-self: center;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(8, 13, 20, 0.85);
  border: 1px solid rgba(232, 119, 34, 0.35);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
.op-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.78) brightness(0.96);
  display: block;
}
.op-portrait-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45) 100%),
    repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.018) 2px, rgba(255, 255, 255, 0.018) 3px);
}
@media (max-width: 720px) {
  .op-portrait { width: 32px; height: 32px; }
}
.op-id {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--steel-400);
  margin-bottom: 4px;
}
.op-id-tag { color: var(--steel-300); }
.op-id-num { color: var(--pods-orange); font-weight: 700; }
.op-name {
  font-family: var(--font-stencil);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--paint-white);
}
.op-role {
  font-size: 10px;
  color: var(--pods-orange);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}
.op-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--steel-300);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 2px;
}
.op-sub .op-dot {
  width: 6px;
  height: 6px;
  background: var(--terminal-green);
  border-radius: 50%;
  animation: pulse 2s infinite;
  display: inline-block;
}

.hud-meta { display: flex; gap: 14px; align-items: center; }
.hud-meta .dot {
  width: 8px; height: 8px;
  background: var(--terminal-green);
  border-radius: 50%;
  animation: pulse 2s infinite;
  display: inline-block;
  margin-right: 6px;
}
.hud-meta .hud-status {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--terminal-green);
}
.hud-meta .hud-mode {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--blueprint);
}
.hud-meta .hud-bay {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--pods-orange);
}
.hud-meta .hud-divider {
  width: 1px;
  height: 16px;
  background: var(--steel-500);
  opacity: 0.55;
  margin: 0 4px;
}
.hud-bl-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hud-bl-tag {
  color: var(--steel-300);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hud-bl-line {
  font-size: 14px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  color: var(--paint-white);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hud-bl-title { font-weight: 600; }
.hud-bl-sep { color: var(--steel-500); }
.hud-bl-summary {
  color: var(--steel-300);
  font-size: 12.5px;
  font-weight: 400;
}
.hud-year-k {
  color: var(--steel-300);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
}
.hud-year-v {
  color: var(--blueprint);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109,255,140, .6); }
  50% { box-shadow: 0 0 0 6px rgba(109,255,140, 0); }
}

.hud-coords {
  color: var(--blueprint);
  font-variant-numeric: tabular-nums;
}

/* progress bar (yard map) — hidden in favor of MiniMap */
.yard-map {
  display: none;
}

/* (legacy single-line hint replaced by .controls-dock — keep selector
    available so any cached HTML stays harmless) */
.hud-hint { display: none; }

/* ─────────── CONTROLS HINT (default state) ─────────── */
/* Default state: a single quiet line that tells new visitors what to do.
   Advanced controls are tucked behind a toggle so the bottom bar stays clean. */
.controls-hint {
  position: fixed;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(10,13,16,.62);
  border: 1px solid rgba(83, 105, 130, 0.35);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--steel-100);
  z-index: 9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  max-width: min(720px, calc(100vw - 360px));
  white-space: nowrap;
  transition: opacity .2s ease, border-color .2s ease;
}
.controls-hint .ch-primary {
  color: var(--paint-white);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.controls-hint .ch-sep { color: var(--steel-500); }
.controls-hint .ch-secondary {
  color: var(--steel-300);
  letter-spacing: 0.1em;
}
.controls-hint .ch-toggle {
  background: transparent;
  border: 1px solid var(--steel-600);
  color: var(--steel-200);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  margin-left: 6px;
  cursor: pointer;
  transition: all .22s cubic-bezier(.2, .85, .25, 1);
}
.controls-hint .ch-toggle:hover {
  border-color: var(--pods-orange);
  color: var(--paint-white);
}
.controls-hint.is-open { border-color: rgba(232,119,34,.4); }

/* ─────────── CONTROLS DOCK (advanced — opens above hint) ─────────── */
.controls-dock {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(10,13,16,.86);
  border: 1px solid var(--steel-600);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  color: var(--steel-200);
  text-transform: uppercase;
  z-index: 9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
  max-width: min(920px, calc(100vw - 360px));
  white-space: nowrap;
  animation: controls-rise .36s cubic-bezier(.2, .85, .25, 1);
}
@keyframes controls-rise {
  from { transform: translateX(-50%) translateY(6px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}
.cd-title {
  color: var(--paint-white);
  font-weight: 700;
  letter-spacing: 0.2em;
  padding-right: 2px;
}
.cd-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cd-label {
  color: var(--pods-orange);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.18em;
  border-right: 1px solid var(--steel-600);
  padding-right: 9px;
}
.cd-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--steel-200);
}
.cd-key kbd {
  background: var(--steel-700);
  border: 1px solid var(--steel-500);
  border-bottom-width: 2px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--paint-white);
}
.cd-divider {
  width: 1px;
  height: 22px;
  background: var(--steel-600);
}
.controls-toggle { display: none; }
.hud-hint .keys {
  display: inline-flex; gap: 6px; margin-right: 8px;
}
.hud-hint .hh-sep { margin: 0 10px; color: var(--steel-500); }
.hud-hint kbd {
  background: var(--steel-700);
  border: 1px solid var(--steel-500);
  border-bottom-width: 2px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paint-white);
}

/* ─────────── CUSTOM CURSOR ─────────── */
.cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width .2s, height .2s;
}
.cursor svg { width: 100%; height: 100%; }
.cursor.hover { width: 44px; height: 44px; }

/* ─────────── TERMINAL ─────────── */
.terminal-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(10,13,16,.92);
  border-top: 1px solid var(--steel-600);
  font-family: var(--font-mono);
  z-index: 50;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: height .3s cubic-bezier(.2,.8,.2,1);
}
.terminal-bar.collapsed { height: 32px; }
.terminal-bar.expanded { height: 320px; }

.terminal-header {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--steel-300);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--steel-700);
}
.terminal-header .lights { display: flex; gap: 6px; margin-right: 14px; }
.terminal-header .lights span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--steel-500);
}
.terminal-header .lights span:nth-child(1) { background: #FF5F57; }
.terminal-header .lights span:nth-child(2) { background: #FEBC2E; }
.terminal-header .lights span:nth-child(3) { background: #28C840; }
.terminal-header .title { flex: 1; }
.terminal-header .toggle { color: var(--terminal-green); }

.terminal-body {
  height: calc(100% - 32px);
  display: flex; flex-direction: column;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--paint-white);
  line-height: 1.55;
}
.terminal-output {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
}
.terminal-output::-webkit-scrollbar { width: 6px; }
.terminal-output::-webkit-scrollbar-thumb { background: var(--steel-500); }

.term-line { white-space: pre-wrap; word-break: break-word; }
.term-line.user { color: var(--paint-white); }
.term-line.user::before { content: "$ "; color: var(--pods-orange); font-weight: 700; }
.term-line.out { color: var(--steel-100); }
.term-line.ok { color: var(--terminal-green); }
.term-line.err { color: var(--warning); }
.term-line.dim { color: var(--steel-300); }
.term-line.head { color: var(--blueprint); }

.terminal-input-row {
  display: flex; gap: 8px;
  align-items: center;
  padding-top: 6px;
  border-top: 1px dashed var(--steel-700);
  margin-top: 6px;
}
.terminal-input-row .prompt {
  color: var(--pods-orange);
  font-weight: 700;
}
.terminal-input-row input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--paint-white);
  font-family: var(--font-mono);
  font-size: 12px;
  caret-color: var(--terminal-green);
}

/* ─────────── CONTAINER PANEL (open) ─────────── */
.panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  justify-content: center;
  pointer-events: none;
  cursor: default;
}
.panel-bg {
  position: absolute;
  inset: 0;
  background: rgba(5,7,10,.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: auto;
  opacity: 0;
  transition: opacity .35s;
}
.panel.open .panel-bg { opacity: 1; }

.panel-card {
  position: relative;
  width: min(1100px, 92vw);
  height: min(680px, 84vh);
  margin: auto;
  background: var(--steel-800);
  border: 1px solid var(--steel-500);
  pointer-events: auto;
  overflow: hidden;
  transform: translateY(28px) scale(.965);
  opacity: 0;
  transition:
    transform .58s var(--ease-cinematic),
    opacity .42s ease-out;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  will-change: transform, opacity;
}
/* v2 case-study layout — single scrollable column. */
.panel-card.cp-card-v2 {
  width: min(960px, 92vw);
  height: min(820px, 88vh);
  display: block;
  background: var(--steel-900);
  border: 1px solid var(--steel-600);
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(232,119,34,.06) inset;
  position: relative;
}
/* Cinematic vignette — faint corner darkening that frames the manifest
   like a photographed industrial document. Pure overlay, no impact on
   content layout. The slow accent drift adds a sub-conscious sense of
   ambient depth without pulling focus. */
.panel-card.cp-card-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background:
    radial-gradient(ellipse at top left,     rgba(0,0,0,.32) 0%, transparent 32%),
    radial-gradient(ellipse at top right,    rgba(0,0,0,.32) 0%, transparent 32%),
    radial-gradient(ellipse at bottom left,  rgba(0,0,0,.38) 0%, transparent 36%),
    radial-gradient(ellipse at bottom right, rgba(0,0,0,.38) 0%, transparent 36%);
  mix-blend-mode: multiply;
}
.panel-card.cp-card-v2::before {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--cp-accent, #E87722) 6%, transparent) 0%,
      transparent 38%);
  animation: cp-ambient-drift 24s ease-in-out infinite alternate;
  opacity: 0.85;
}
@keyframes cp-ambient-drift {
  0%   { transform: translate(-3%, -2%); }
  100% { transform: translate(3%, 2%);   }
}
@media (prefers-reduced-motion: reduce) {
  .panel-card.cp-card-v2::before { animation: none; }
}
.panel.open .panel-card { transform: translateY(0) scale(1); opacity: 1; }

.panel-strip {
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--pods-orange) 0 16px,
    var(--steel-900) 16px 32px
  );
}
.panel-head {
  display: flex;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--steel-600);
  background: var(--steel-700);
  gap: 24px;
}
.panel-stencil {
  font-family: var(--font-stencil);
  font-size: 56px;
  line-height: .85;
  color: var(--paint-white);
  letter-spacing: 0.04em;
  -webkit-text-stroke: 1px var(--steel-900);
  text-shadow:
    1px 1px 0 var(--steel-900),
    2px 2px 0 var(--steel-900);
  filter: blur(.3px);
  opacity: .9;
}
.panel-title {
  flex: 1;
}
.panel-title .label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel-300);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.panel-title h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.panel-title .summary {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--steel-200);
  margin-top: 6px;
  letter-spacing: 0.05em;
}
.panel-close {
  background: transparent;
  border: 1px solid var(--steel-500);
  color: var(--steel-100);
  width: 36px; height: 36px;
  font-family: var(--font-mono);
  font-size: 14px;
  cursor: pointer;
  transition: all .22s cubic-bezier(.2, .85, .25, 1);
}
.panel-close:hover { background: var(--warning); border-color: var(--warning); color: white; transform: scale(1.04); }
.panel-close:active { transform: scale(0.96); transition: transform 0.06s ease; }
.panel-close:focus-visible { outline: 2px solid var(--pods-orange); outline-offset: 2px; }

.panel-body {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
.panel-body .col {
  padding: 28px 32px;
  overflow-y: auto;
}
.panel-body .col + .col {
  border-left: 1px solid var(--steel-600);
  background: var(--steel-900);
}
.panel-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel-100);
  margin-bottom: 12px;
}
.panel-body p:first-child {
  font-size: 17px;
  color: var(--paint-white);
}

.stat-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  padding: 10px 0;
  border-bottom: 1px dashed var(--steel-600);
  font-family: var(--font-mono);
  font-size: 12px;
}
.stat-row .k { color: var(--steel-300); letter-spacing: 0.15em; }
.stat-row .v { color: var(--paint-white); }

.panel-body h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--blueprint);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 18px 0 10px;
}
.panel-body h3:first-child { margin-top: 0; }

.link-list { display: flex; flex-direction: column; gap: 6px; }
.link-list a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--terminal-green);
  text-decoration: none;
  letter-spacing: 0.05em;
  border: 1px solid var(--steel-600);
  padding: 8px 12px;
  display: inline-flex;
  justify-content: space-between;
  transition: all .22s cubic-bezier(.2, .85, .25, 1);
}
.link-list a:hover { background: var(--terminal-green); color: var(--steel-900); border-color: var(--terminal-green); }
.link-list a::after { content: "→"; }

/* tabs */
.panel-tabs {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--steel-600);
  background: var(--steel-900);
  padding: 0 28px;
}
.panel-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 12px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--steel-300);
  cursor: pointer;
  transition: all .14s;
}
.panel-tab:hover { color: var(--paint-white); }
.panel-tab.active {
  color: var(--terminal-green);
  border-bottom-color: var(--terminal-green);
}

.panel-corner-tag {
  position: absolute;
  top: 12px; right: 56px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--steel-400);
  padding: 4px 8px;
  border: 1px solid var(--steel-600);
  background: rgba(0,0,0,0.4);
  border-radius: 2px;
}

.panel-stencil-wrap {
  position: relative;
  flex-shrink: 0;
}
.panel-stencil-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--terminal-green), transparent 70%);
  opacity: 0.18;
  filter: blur(14px);
  z-index: -1;
  animation: glow-pulse 3.2s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.12; transform: scale(1); }
  50% { opacity: 0.24; transform: scale(1.1); }
}

/* ─────────── CONTAINER PANEL — CASE STUDY V2 ─────────── */
.panel-card.cp-card-v2 { --cp-accent: var(--pods-orange); }
.cp-card-v2 .panel-strip {
  background: repeating-linear-gradient(
    -45deg,
    var(--cp-accent) 0 16px,
    var(--steel-900) 16px 32px
  );
}
.cp-close-fixed {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 5;
  background: rgba(10,13,16,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* HERO ─────────────────────────────────────────────────── */
.cp-hero {
  position: relative;
  height: clamp(220px, 34vh, 300px);
  overflow: hidden;
  border-bottom: 1px solid var(--steel-700);
  background: linear-gradient(180deg, var(--cp-tone-1, #1a1f28), var(--cp-tone-2, #0a0d10));
  animation: cp-hero-in .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cp-hero-in {
  from { opacity: 0; transform: scale(1.02); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
.cp-hero-art,
.cp-hero::before,
.cp-hero::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cp-hero::before, .cp-hero::after { content: ""; }
.cp-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92) brightness(.96);
}
.cp-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,16,0) 28%, rgba(10,13,16,.55) 75%, rgba(10,13,16,.92) 100%);
  pointer-events: none;
  z-index: 2;
}
.cp-hero-content {
  position: absolute;
  left: 40px;
  right: 64px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-stencil-hero {
  position: absolute;
  right: 28px;
  top: 4px;
  font-family: var(--font-stencil);
  font-size: clamp(140px, 22vw, 220px);
  font-weight: 700;
  line-height: .85;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.05);
  -webkit-text-stroke: 1px rgba(255,255,255,.08);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.cp-hero .cp-bay-line {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--steel-300);
  text-transform: uppercase;
}
.cp-hero .cp-bay { color: var(--cp-accent); font-weight: 700; }
.cp-hero .cp-dot { color: var(--steel-500); }
.cp-hero .cp-year { color: var(--steel-200); }
.cp-hero .cp-status {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  margin-left: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.24em;
  border: 1px solid currentColor;
  background: rgba(0,0,0,.45);
}
.cp-hero .cp-status::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 8px;
  box-shadow: 0 0 6px currentColor;
}
.cp-hero .cp-status.status-live      { color: var(--terminal-green); }
.cp-hero .cp-status.status-beta      { color: var(--blueprint); }
.cp-hero .cp-status.status-finalist  { color: var(--terminal-amber); }
.cp-hero .cp-status.status-incoming  { color: var(--pods-orange); }
.cp-hero .cp-status.status-archived  { color: var(--steel-300); }

.cp-hero .cp-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--paint-white);
  margin-top: 4px;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.cp-hero .cp-tagline {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--steel-100);
  letter-spacing: 0.04em;
  line-height: 1.5;
  max-width: 64ch;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* HERO — per-project visual signatures (CSS-only, no images required) */
.cp-hero[data-theme="cortex"]   { --cp-tone-1: #1a1428; --cp-tone-2: #0c0816; }
.cp-hero[data-theme="cortex"]::before {
  background:
    radial-gradient(circle at 18% 32%, rgba(180,160,230,.5), transparent 14%),
    radial-gradient(circle at 70% 56%, rgba(150,130,210,.45), transparent 12%),
    radial-gradient(circle at 45% 78%, rgba(200,180,240,.35), transparent 10%),
    radial-gradient(circle at 86% 22%, rgba(130,110,190,.4), transparent 9%),
    radial-gradient(circle at 30% 60%, rgba(170,150,220,.3), transparent 8%);
}
.cp-hero[data-theme="cortex"]::after {
  background-image: radial-gradient(rgba(255,255,255,.32) 1.4px, transparent 1.8px);
  background-size: 28px 28px;
  opacity: .35;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}

.cp-hero[data-theme="mygui"]    { --cp-tone-1: #08251a; --cp-tone-2: #03130b; }
.cp-hero[data-theme="mygui"]::before {
  background:
    linear-gradient(rgba(109,255,140,.08) 1px, transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg, rgba(109,255,140,.08) 1px, transparent 1px) 0 0/40px 100%;
}
.cp-hero[data-theme="mygui"]::after {
  background:
    linear-gradient(90deg, rgba(109,255,140,.5) 0 3px, transparent 3px) 8% 28%/120px 100% no-repeat,
    linear-gradient(90deg, rgba(109,255,140,.45) 0 3px, transparent 3px) 30% 50%/200px 100% no-repeat,
    linear-gradient(90deg, rgba(109,255,140,.4) 0 3px, transparent 3px) 58% 38%/160px 100% no-repeat,
    linear-gradient(90deg, rgba(109,255,140,.55) 0 3px, transparent 3px) 78% 62%/100px 100% no-repeat;
  opacity: .8;
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}

.cp-hero[data-theme="potentia"] { --cp-tone-1: #122c46; --cp-tone-2: #050e18; }
.cp-hero[data-theme="potentia"]::before {
  background: radial-gradient(ellipse at 78% 50%, rgba(91,168,217,.45), transparent 38%);
}
.cp-hero[data-theme="potentia"]::after {
  /* iOS-y horizontal bars */
  background:
    linear-gradient(rgba(255,255,255,.18) 4px, transparent 4px) 70% 28%/200px 4px no-repeat,
    linear-gradient(rgba(255,255,255,.14) 4px, transparent 4px) 70% 42%/160px 4px no-repeat,
    linear-gradient(rgba(255,255,255,.12) 4px, transparent 4px) 70% 56%/220px 4px no-repeat,
    linear-gradient(rgba(255,255,255,.1) 4px, transparent 4px) 70% 70%/140px 4px no-repeat;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.cp-hero[data-theme="yuth"]     { --cp-tone-1: #2a0e10; --cp-tone-2: #120607; }
.cp-hero[data-theme="yuth"]::before {
  background:
    conic-gradient(from 30deg at 28% 50%, rgba(191,67,66,.35), transparent 22%),
    conic-gradient(from 200deg at 72% 50%, rgba(220,90,90,.3), transparent 18%);
}
.cp-hero[data-theme="yuth"]::after {
  background-image: linear-gradient(45deg, rgba(255,255,255,.07) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.07) 75%);
  background-size: 30px 30px;
  opacity: .35;
}

.cp-hero[data-theme="pods"]     { --cp-tone-1: #1f1108; --cp-tone-2: #0a0503; }
.cp-hero[data-theme="pods"]::before {
  background:
    linear-gradient(180deg, rgba(232,119,34,.6) 0 38px, transparent 38px) 12% 38%/110px 50px no-repeat,
    linear-gradient(180deg, rgba(232,119,34,.45) 0 32px, transparent 32px) 32% 58%/95px 40px no-repeat,
    linear-gradient(180deg, rgba(255,180,80,.5) 0 36px, transparent 36px) 55% 35%/130px 45px no-repeat,
    linear-gradient(180deg, rgba(232,119,34,.4) 0 28px, transparent 28px) 80% 60%/85px 36px no-repeat;
}
.cp-hero[data-theme="pods"]::after {
  background: repeating-linear-gradient(-45deg, rgba(232,119,34,.07) 0 12px, transparent 12px 24px);
}

.cp-hero[data-theme="intro"]    { --cp-tone-1: #0a0d10; --cp-tone-2: #050708; }
.cp-hero[data-theme="intro"]::before {
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(109,255,140,.07) 7px 8px);
}
.cp-hero[data-theme="intro"]::after {
  background:
    linear-gradient(90deg, rgba(109,255,140,.7) 0 8px, transparent 8px) 7% 32%/8px 12px no-repeat,
    linear-gradient(90deg, rgba(109,255,140,.45) 0 80px, transparent 80px) 12% 32%/80px 1.5px no-repeat,
    linear-gradient(90deg, rgba(109,255,140,.45) 0 130px, transparent 130px) 7% 50%/130px 1.5px no-repeat,
    linear-gradient(90deg, rgba(109,255,140,.45) 0 180px, transparent 180px) 7% 68%/180px 1.5px no-repeat;
}

.cp-hero[data-theme="guelph"], .cp-hero[data-theme="sec"] {
  --cp-tone-1: #19243a; --cp-tone-2: #080d18;
}
.cp-hero[data-theme="guelph"]::before, .cp-hero[data-theme="sec"]::before {
  background-image:
    linear-gradient(rgba(91,168,217,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,168,217,.18) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, #000, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
}
.cp-hero[data-theme="guelph"]::after, .cp-hero[data-theme="sec"]::after {
  background: radial-gradient(circle at 50% 70%, rgba(91,168,217,.25), transparent 40%);
}

/* METRICS ─────────────────────────────────────────────── */
.cp-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--steel-700);
  background: linear-gradient(180deg, var(--steel-800), var(--steel-900));
  animation: cp-rise .55s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: .12s;
}
.cp-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-right: 1px solid var(--steel-700);
  position: relative;
}
.cp-metric:last-child { border-right: 0; }
.cp-metric::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--cp-accent);
  opacity: 0;
  transition: opacity .2s;
}
.cp-metric:hover::before { opacity: .7; }
.cp-metric-v {
  font-family: var(--font-stencil);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--paint-white);
  line-height: 1;
}
.cp-metric-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--steel-300);
  text-transform: uppercase;
}
.cp-metric.is-status .cp-metric-v {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--cp-accent);
}

/* SECTIONS — editorial rhythm. Sections alternate between full-width
   (system blocks) and constrained measure (narrative), with a quiet
   left accent line that only appears on narrative sections. Reads as
   a real dossier layout, not a stack of identical cards. */
.cp-sections > .cp-section:nth-child(odd) .cp-section-body {
  max-width: 70ch;
}
.cp-sections > .cp-section:nth-child(even) {
  position: relative;
  padding-left: 18px;
}
.cp-sections > .cp-section:nth-child(even)::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 60%, transparent), transparent);
}
.cp-section + .cp-section {
  border-top: 1px dashed var(--steel-700);
  padding-top: 24px;
}

/* LINK CARDS — icon + label + arrow */
.cp-link-card {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 12px;
}
.cp-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--terminal-green);
}
.cp-link-card:hover .cp-link-icon { color: var(--steel-900); }

/* PROJECT IDENTITY tint — subtle accent thread */
.panel-card.cp-card-v2 .cp-section-num { color: var(--cp-accent); }
.panel-card.cp-card-v2 .cp-footer-pulse .op-dot { background: var(--cp-accent); }

.cp-scroll {
  position: relative;
  height: calc(100% - 14px); /* below the panel-strip */
  overflow-y: auto;
  scroll-behavior: smooth;
}
.cp-scroll::-webkit-scrollbar { width: 8px; }
.cp-scroll::-webkit-scrollbar-track { background: transparent; }
.cp-scroll::-webkit-scrollbar-thumb {
  background: var(--steel-600);
  border-radius: 0;
}
.cp-scroll::-webkit-scrollbar-thumb:hover { background: var(--pods-orange); }

/* DOSSIER CASE STUDY LAYOUT */
.panel-card.cp-card-v2 {
  width: min(1120px, 94vw);
}
/* HERO — editorial, single-column. The old two-column hero put a big
   container-ID plate against the title which read as "label + chrome."
   Now the hero gives the title primary visual real-estate and pushes the
   plate to a compact horizontal meta-strip at the foot of the hero so
   the page opens as a confident operating file, not a dashboard. */
.cp-dossier-hero {
  position: relative;
  min-height: clamp(280px, 36vh, 360px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  padding: 56px clamp(28px, 5vw, 72px) 30px;
  overflow: hidden;
  border-bottom: 1px solid var(--steel-700);
  background:
    linear-gradient(160deg, rgba(10,13,16,.94) 0%, rgba(10,13,16,.42) 50%, rgba(10,13,16,.78) 100%),
    linear-gradient(180deg, var(--cp-tone-1, #182330), var(--cp-tone-2, #080b10));
}
.panel.panel-deploy .cp-dossier-hero {
  min-height: clamp(340px, 42vh, 440px);
  padding: 72px clamp(48px, 6vw, 96px) 36px;
}
@media (min-width: 1280px) {
  .panel.panel-deploy .cp-dossier-hero {
    padding: 88px clamp(64px, 7vw, 112px) 44px;
  }
}
.panel.panel-deploy .cp-dossier-title {
  font-size: clamp(56px, 6.2vw, 104px);
  letter-spacing: -0.02em;
}
.panel.panel-deploy .cp-dossier-summary {
  max-width: 64ch;
  font-size: clamp(17px, 1.5vw, 22px);
}
.cp-dossier-hero::before,
.cp-dossier-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cp-dossier-hero::before {
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .62;
}
.cp-dossier-hero::after {
  background:
    radial-gradient(circle at 74% 30%, color-mix(in srgb, var(--cp-accent) 34%, transparent), transparent 32%),
    linear-gradient(180deg, transparent 0%, rgba(10,13,16,.78) 100%);
}
.cp-dossier-hero[data-theme="cortex"]       { --cp-tone-1: #1a1428; --cp-tone-2: #090712; }
.cp-dossier-hero[data-theme="mygui"]        { --cp-tone-1: #08251a; --cp-tone-2: #03130b; }
.cp-dossier-hero[data-theme="potentia"]     { --cp-tone-1: #122c46; --cp-tone-2: #050e18; }
.cp-dossier-hero[data-theme="yuth"]         { --cp-tone-1: #2a0e10; --cp-tone-2: #120607; }
.cp-dossier-hero[data-theme="pods"]         { --cp-tone-1: #241308; --cp-tone-2: #090503; }
.cp-dossier-hero[data-theme="intro"]        { --cp-tone-1: #151a20; --cp-tone-2: #050708; }
.cp-dossier-hero[data-theme="guelph"],
.cp-dossier-hero[data-theme="sec"]          { --cp-tone-1: #19243a; --cp-tone-2: #080d18; }
.cp-dossier-hero[data-theme="scholarscope"] { --cp-tone-1: #0c1e3d; --cp-tone-2: #04091a; }
.cp-dossier-hero[data-theme="algoviz"]      { --cp-tone-1: #1b0f33; --cp-tone-2: #08051a; }

/* PER-BAY HERO MOTIFS
   Each motif is a quiet ambient layer painted behind the copy. Reads as
   the room's environmental DNA, not decoration. Every motif respects
   prefers-reduced-motion (no transforms there). Motifs sit at z-index 0
   while copy/plate sit at z-index 2, so they never compete for the eye. */
.cp-dossier-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.42;
  overflow: hidden;
}

/* MyGUI · voice / waveform pulse — soft horizontal waveform that breathes */
.cp-dossier-motif[data-motif="mygui"] {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(11, 110, 79, 0.32) 0%, transparent 55%),
    repeating-linear-gradient(
      90deg,
      rgba(149, 232, 199, 0.04) 0 2px,
      transparent 2px 6px
    );
}
.cp-dossier-motif[data-motif="mygui"]::before {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  top: 56%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(149, 232, 199, 0.55) 18%,
    rgba(149, 232, 199, 0.9) 50%,
    rgba(149, 232, 199, 0.55) 82%,
    transparent 100%);
  filter: blur(0.6px);
  animation: motif-wave 7.5s ease-in-out infinite alternate;
  opacity: 0.5;
}
.cp-dossier-motif[data-motif="mygui"]::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  top: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(149, 232, 199, 0.6), transparent);
  filter: blur(1.2px);
  animation: motif-wave 9.5s ease-in-out infinite alternate-reverse;
  opacity: 0.35;
}
@keyframes motif-wave {
  0%   { transform: translateY(-8px) scaleY(1); }
  100% { transform: translateY(8px) scaleY(1.5); }
}

/* Cortex · neural graph hint — distant constellation of nodes */
.cp-dossier-motif[data-motif="cortex"] {
  background:
    radial-gradient(circle at 22% 28%, rgba(140, 91, 230, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 36%, rgba(140, 91, 230, 0.45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 58% 70%, rgba(140, 91, 230, 0.35) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 12% 78%, rgba(140, 91, 230, 0.3) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 82%, rgba(140, 91, 230, 0.4) 0 1.5px, transparent 2.5px),
    radial-gradient(ellipse at 50% 50%, rgba(140, 91, 230, 0.18) 0%, transparent 60%);
}
.cp-dossier-motif[data-motif="cortex"]::before {
  content: "";
  position: absolute;
  inset: 12% 18%;
  background-image:
    linear-gradient(to right, rgba(140, 91, 230, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 91, 230, 0.1) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  animation: motif-pulse 11s ease-in-out infinite;
  opacity: 0.6;
}
@keyframes motif-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

/* Potentia · life-score pulse — single low rhythm bar */
.cp-dossier-motif[data-motif="potentia"] {
  background:
    radial-gradient(circle at 70% 40%, rgba(27, 73, 101, 0.45) 0%, transparent 55%),
    linear-gradient(0deg, rgba(27, 73, 101, 0.2), transparent 60%);
}
.cp-dossier-motif[data-motif="potentia"]::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  bottom: 24%;
  height: 56px;
  background: repeating-linear-gradient(
    90deg,
    rgba(91, 184, 247, 0.45) 0 2px,
    transparent 2px 24px
  );
  -webkit-mask-image: linear-gradient(to right, transparent, black 18%, black 82%, transparent);
  mask-image: linear-gradient(to right, transparent, black 18%, black 82%, transparent);
  animation: motif-pulse 6.5s ease-in-out infinite;
  opacity: 0.6;
}

/* PODS · dispatch / route arrows */
.cp-dossier-motif[data-motif="pods"] {
  background:
    linear-gradient(105deg, rgba(232, 119, 34, 0.16) 0%, transparent 32%, transparent 68%, rgba(232, 119, 34, 0.16) 100%),
    repeating-linear-gradient(105deg,
      rgba(232, 119, 34, 0.05) 0 1px,
      transparent 1px 28px);
}
.cp-dossier-motif[data-motif="pods"]::before {
  content: "→  →  →  →  →  →  →  →  →";
  position: absolute;
  left: -8%; right: -8%;
  top: 50%;
  font-family: var(--font-mono);
  font-size: 28px;
  letter-spacing: 0.35em;
  color: rgba(232, 119, 34, 0.22);
  white-space: nowrap;
  transform: translateY(-50%);
  animation: motif-dispatch 16s linear infinite;
}
@keyframes motif-dispatch {
  0%   { transform: translate(-12%, -50%); }
  100% { transform: translate(12%, -50%); }
}

/* SEC · network nodes radiating from a center */
.cp-dossier-motif[data-motif="sec"] {
  background:
    radial-gradient(circle at 50% 50%, rgba(91, 184, 247, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 25%, rgba(91, 184, 247, 0.4) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 80% 30%, rgba(91, 184, 247, 0.4) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 30% 75%, rgba(91, 184, 247, 0.35) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 76% 78%, rgba(91, 184, 247, 0.4) 0 1.5px, transparent 2.5px);
}
.cp-dossier-motif[data-motif="sec"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, rgba(91, 184, 247, 0.1) 0 1px, transparent 1px 60px),
    linear-gradient(-45deg, rgba(91, 184, 247, 0.1) 0 1px, transparent 1px 60px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 65%);
  mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 65%);
  opacity: 0.55;
}

/* Guelph · academic ruled paper feel */
.cp-dossier-motif[data-motif="guelph"] {
  background:
    repeating-linear-gradient(180deg,
      transparent 0 33px,
      rgba(91, 168, 217, 0.08) 33px 34px);
}
.cp-dossier-motif[data-motif="guelph"]::before {
  content: "";
  position: absolute;
  left: 14%;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(232, 119, 34, 0.45);
}

/* YUTH · branching pathways from a single root */
.cp-dossier-motif[data-motif="yuth"] {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(191, 67, 66, 0.25) 0%, transparent 55%);
}
.cp-dossier-motif[data-motif="yuth"]::before {
  content: "";
  position: absolute;
  inset: 8% 12%;
  background:
    linear-gradient(180deg, rgba(191, 67, 66, 0.45) 0 1px, transparent 1px 100%),
    linear-gradient(115deg, rgba(191, 67, 66, 0.3) 0 1px, transparent 1px 100%),
    linear-gradient(65deg, rgba(191, 67, 66, 0.3) 0 1px, transparent 1px 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  opacity: 0.55;
}

/* ScholarScope · indexed academic columns */
.cp-dossier-motif[data-motif="scholarscope"] {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(31, 111, 235, 0.22) 0%, transparent 60%),
    repeating-linear-gradient(90deg,
      rgba(31, 111, 235, 0.06) 0 1px,
      transparent 1px 48px);
}
.cp-dossier-motif[data-motif="scholarscope"]::before {
  content: "";
  position: absolute;
  inset: 16% 8% 18%;
  background:
    linear-gradient(180deg, rgba(31, 111, 235, 0.45) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, transparent 0 5px, rgba(31, 111, 235, 0.25) 5px 6px, transparent 6px 14px);
  background-size: 100% 14px;
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 35%, transparent 80%);
  mask-image: linear-gradient(90deg, black 0%, black 35%, transparent 80%);
  opacity: 0.7;
}

/* AlgoViz · sorting bars */
.cp-dossier-motif[data-motif="algoviz"] {
  background:
    radial-gradient(ellipse at 70% 50%, rgba(140, 91, 230, 0.2) 0%, transparent 55%);
}
.cp-dossier-motif[data-motif="algoviz"]::before {
  content: "";
  position: absolute;
  bottom: 12%;
  left: 8%; right: 8%;
  height: 60%;
  background:
    linear-gradient(to top, rgba(140, 91, 230, 0.55) 0%, transparent 22%),
    repeating-linear-gradient(90deg,
      rgba(140, 91, 230, 0.32) 0 8px,
      transparent 8px 18px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
  opacity: 0.5;
  animation: motif-pulse 5.5s ease-in-out infinite;
}

/* Intro · zone-map quiet — minimal grid suggesting the world layout */
.cp-dossier-motif[data-motif="intro"] {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 40px);
}
.cp-dossier-motif[data-motif="intro"]::before {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  top: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 119, 34, 0.5) 25%, rgba(232, 119, 34, 0.6) 50%, rgba(232, 119, 34, 0.5) 75%, transparent);
}

/* Reduced motion — kill the motif animations but keep the static motif */
@media (prefers-reduced-motion: reduce) {
  .cp-dossier-motif[data-motif="mygui"]::before,
  .cp-dossier-motif[data-motif="mygui"]::after,
  .cp-dossier-motif[data-motif="cortex"]::before,
  .cp-dossier-motif[data-motif="potentia"]::before,
  .cp-dossier-motif[data-motif="pods"]::before,
  .cp-dossier-motif[data-motif="algoviz"]::before {
    animation: none;
  }
}

/* WALL PROJECTION — the project logo sits as a large, projected
   watermark behind the hero copy, like a brand mark stamped on the back
   wall of the room. Z-index 2 puts it ABOVE the radial accent gradient
   (::after, z-index auto) so the project tint no longer washes the mark
   out; copy/plate ride at z-index 3 so they always stay on top.
   No mix-blend-mode — straight opacity reads as projection without
   dropping dark logo elements into the background. */
.cp-dossier-wallmark {
  position: absolute;
  right: clamp(-20px, -2vw, -6px);
  top: 50%;
  width: clamp(300px, 38vw, 520px);
  height: clamp(300px, 38vw, 520px);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  opacity: 0.58;
  filter: contrast(1.08) brightness(1.04) saturate(0.95);
  /* Gentle directional fade — the top-right corner softens into the room
     so the mark feels projected rather than pasted. Center stays fully
     opaque so the brand is unmistakable. */
  -webkit-mask-image: radial-gradient(ellipse at 28% 52%, #000 56%, rgba(0,0,0,0.86) 80%, rgba(0,0,0,0.38) 100%);
          mask-image: radial-gradient(ellipse at 28% 52%, #000 56%, rgba(0,0,0,0.86) 80%, rgba(0,0,0,0.38) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: wallmark-flicker 9.5s ease-in-out infinite;
}
.panel.panel-deploy .cp-dossier-wallmark {
  width: clamp(340px, 46vw, 640px);
  height: clamp(340px, 46vw, 640px);
  opacity: 0.64;
}
.cp-dossier-wallmark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Project-tinted glow — gives the logo a sense of warm projection light
     bouncing off the back wall without overpowering. */
  filter: drop-shadow(0 0 28px color-mix(in srgb, var(--cp-accent) 52%, transparent));
}
/* Copy/plate must stay above the wallmark — bumped from z-index 2 to 3
   to keep the title legible now that the mark is fully visible. */
.cp-dossier-copy,
.cp-dossier-plate { z-index: 3; }

/* Quiet, slow projector flicker — never strobes, never reads as a glitch. */
@keyframes wallmark-flicker {
  0%, 100% { opacity: var(--wm-base, 0.58); }
  47%      { opacity: calc(var(--wm-base, 0.58) * 0.95); }
  52%      { opacity: calc(var(--wm-base, 0.58) * 1.04); }
  56%      { opacity: var(--wm-base, 0.58); }
}
.panel.panel-deploy .cp-dossier-wallmark { --wm-base: 0.64; }
@media (prefers-reduced-motion: reduce) {
  .cp-dossier-wallmark { animation: none; }
}
@media (max-width: 720px) {
  .cp-dossier-wallmark {
    width: clamp(220px, 60vw, 320px);
    height: clamp(220px, 60vw, 320px);
    right: -4%;
    opacity: 0.42;
  }
}

.cp-dossier-copy,
.cp-dossier-plate {
  position: relative;
  z-index: 3;
}
.cp-dossier-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.cp-dossier-copy .cp-bay-line {
  margin-bottom: 4px;
}
.cp-dossier-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -0.01em;
  color: var(--paint-white);
  text-shadow: 0 12px 34px rgba(0,0,0,.55);
}
.cp-dossier-summary {
  max-width: 56ch;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.48;
  color: var(--steel-100);
  margin-top: 4px;
}
/* CONTAINER ID STRIP — horizontal meta-strip at the foot of the hero.
   The old vertical badge took the right column and competed with the
   title for visual weight. The new strip reads as a real shipping label
   stamped across the bottom of the document: pulse · code · class · bay,
   with a quiet barcode tail. Stays inside the hero, never dominates. */
.cp-dossier-plate {
  align-self: stretch;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 38%, var(--steel-700));
  background:
    linear-gradient(180deg, rgba(8,11,14,.78), rgba(8,11,14,.92)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 14px);
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
  position: relative;
  overflow: hidden;
}
.cp-dossier-plate::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--cp-accent) 70%, transparent) 50%, transparent 100%);
  opacity: 0.75;
  pointer-events: none;
}
.cp-plate-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 14px;
  border-right: 1px dashed var(--steel-700);
}
.cp-plate-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cp-accent);
  box-shadow: 0 0 10px var(--cp-accent);
  animation: cp-plate-pulse 2.2s ease-in-out infinite;
}
@keyframes cp-plate-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.05); }
}
.cp-plate-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--steel-200);
}
.cp-plate-status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cp-accent);
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 55%, var(--steel-700));
  background: color-mix(in srgb, var(--cp-accent) 10%, transparent);
}
.cp-plate-body {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.cp-plate-stencil {
  font-family: var(--font-stencil);
  font-size: clamp(28px, 3vw, 36px);
  line-height: .85;
  color: var(--cp-accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--cp-accent) 28%, transparent);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.cp-plate-meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  gap: 0 28px;
  min-width: 0;
}
.cp-plate-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-plate-meta-k {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel-400);
}
.cp-plate-meta-v {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--paint-white);
  text-transform: uppercase;
}
.cp-plate-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px dashed var(--steel-700);
}
.cp-plate-bars {
  font-family: "Libre Barcode 39", var(--font-mono);
  font-size: 24px;
  line-height: .8;
  color: var(--paint-white);
  opacity: .58;
}
.cp-plate-foot-id {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel-300);
}
@media (max-width: 740px) {
  .cp-dossier-plate {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }
  .cp-plate-header,
  .cp-plate-footer {
    border: 0;
    padding: 0;
  }
  .cp-plate-meta {
    grid-template-columns: repeat(2, auto);
    gap: 8px 18px;
  }
}

/* DOSSIER GRID — full width single column.
   The old 1fr/360px split read as a permanent right sidebar that flattened
   the page into "report + chrome." Now sections breathe at full width and
   the aside intel rail sits below the body as a horizontal cluster so the
   page reads as an editorial dossier instead of a dashboard. */
.cp-dossier-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 56px clamp(28px, 5vw, 88px) 24px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 1280px) {
  .panel.panel-deploy .cp-dossier-grid {
    gap: 40px;
    padding: 72px clamp(48px, 6vw, 112px) 36px;
    max-width: 1240px;
  }
}
@media (max-width: 980px) {
  .cp-dossier-grid {
    gap: 24px;
    padding: 32px 24px 16px;
  }
}
.cp-dossier-grid .cp-sections {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cp-dossier-grid .cp-section {
  padding: 22px 22px 20px;
  border: 1px solid var(--steel-700);
  background:
    linear-gradient(180deg, rgba(26,31,38,.92), rgba(18,22,27,.92)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  border-radius: 2px;
}
.cp-dossier-grid .cp-section + .cp-section {
  border-top: 1px solid var(--steel-700);
  padding-top: 22px;
}
.cp-dossier-grid .cp-section-body {
  padding-left: 0;
  margin-top: 12px;
}
.cp-dossier-grid .cp-section-head {
  margin-bottom: 4px;
}
.cp-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.cp-impact-card {
  min-height: 112px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  background: rgba(10,13,16,.52);
  border: 1px solid var(--steel-700);
  border-left: 3px solid var(--blueprint);
}
.cp-impact-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--blueprint);
  text-transform: uppercase;
}
.cp-impact-v {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.45;
  color: var(--paint-white);
}
/* INTEL RAIL — formerly a sticky right sidebar, now a horizontal cluster
   that sits below the main body. Reads as a row of operations cards
   (manifest · stack · system map) rather than a fixed sidebar. Wraps
   gracefully on smaller widths. */
.cp-aside {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-self: stretch;
  margin-top: 8px;
}
.cp-aside::before {
  content: "// INTEL RAIL";
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--steel-400);
  text-transform: uppercase;
  padding: 6px 0 2px;
  border-top: 1px solid var(--steel-700);
  display: block;
}
.cp-aside-card {
  border: 1px solid var(--steel-700);
  background: rgba(10,13,16,.62);
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
  animation: cp-aside-rise 0.55s var(--ease-cinematic) backwards;
}
.cp-aside-card:nth-child(1) { animation-delay: 0.08s; }
.cp-aside-card:nth-child(2) { animation-delay: 0.14s; }
.cp-aside-card:nth-child(3) { animation-delay: 0.20s; }
.cp-aside-card:nth-child(4) { animation-delay: 0.26s; }
.cp-aside-card:nth-child(5) { animation-delay: 0.32s; }
@keyframes cp-aside-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-aside-card { animation: none; }
}
.cp-aside-title {
  padding: 12px 14px;
  border-bottom: 1px solid var(--steel-700);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cp-accent);
}
.cp-aside .cp-manifest {
  border: 0;
  background: transparent;
  grid-template-columns: 1fr;
}
.cp-aside .cp-manifest-row {
  border-right: 0;
}
.cp-signal-list {
  list-style: none;
  counter-reset: signal;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cp-signal-list li {
  counter-increment: signal;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--steel-700);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.45;
  color: var(--steel-100);
}
.cp-signal-list li:last-child { border-bottom: 0; }
.cp-signal-list li::before {
  content: counter(signal, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--steel-300);
}
.cp-status.status-active { color: var(--terminal-green); }

@media (max-width: 900px) {
  .cp-dossier-hero {
    gap: 16px;
    padding: 38px 28px 24px;
  }
  .cp-plate-stencil { font-size: 30px; }
  .cp-plate-bars { font-size: 22px; }
}

/* ─────────── DOSSIER ACTION BAR ───────────
   External routes (live site, app store, repo, demo) lifted above the fold
   so a hurried reader can jump out without scrolling the dossier. Industrial
   chip language — flat plates with chevron arrows and a hazard-style top
   stripe in the project accent color — so the bar reads as operations
   dispatch rather than a generic SaaS button row. */
.cp-action-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  padding: 14px clamp(28px, 5vw, 72px) 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 6%, rgba(10,13,16,.85)) 0%, rgba(10,13,16,.92) 100%);
  border-top: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--steel-700));
  border-bottom: 1px solid var(--steel-700);
  font-family: var(--font-mono);
  isolation: isolate;
  z-index: 4;
}
.cp-action-bar::before {
  /* Hazard-style accent stripe — a 2px slice in the project color that
     anchors the bar to the hero above. Reads as "this strip is part of the
     dossier header, not a generic toolbar." */
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--cp-accent) 0%,
    var(--cp-accent) 40%,
    transparent 40%,
    transparent 50%,
    var(--cp-accent) 50%,
    var(--cp-accent) 90%,
    transparent 90%
  );
  background-size: 28px 100%;
  opacity: .68;
  pointer-events: none;
}
.panel.panel-deploy .cp-action-bar {
  padding-left: clamp(48px, 6vw, 96px);
  padding-right: clamp(48px, 6vw, 96px);
}
.cp-action-tag {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cp-accent) 70%, var(--steel-300));
  white-space: nowrap;
  flex: 0 0 auto;
}
.cp-action-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.cp-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--steel-800);
  border: 1px solid var(--steel-600);
  border-left: 3px solid var(--cp-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paint-white);
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform .22s var(--ease-cinematic),
    background .22s ease,
    color .18s ease,
    border-color .22s ease,
    box-shadow .22s ease;
  cursor: pointer;
}
.cp-action-chip:hover {
  background: var(--cp-accent);
  color: var(--steel-900);
  border-color: var(--cp-accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}
.cp-action-chip:active {
  transform: translateY(0);
  transition-duration: .08s;
}
.cp-action-chip:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}
.cp-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-accent);
}
.cp-action-chip:hover .cp-chip-icon { color: var(--steel-900); }
.cp-chip-label { font-weight: 600; }
.cp-chip-arrow {
  font-size: 13px;
  font-weight: 700;
  opacity: .75;
  margin-left: 2px;
}
/* Per-kind tint hint — the live-site chip in the project accent, repo/resume
   in a steel neutral so the primary action stands out without arms-race. */
.cp-action-chip.cp-chip-site { border-left-color: var(--cp-accent); }
.cp-action-chip.cp-chip-app  { border-left-color: var(--terminal-green); }
.cp-action-chip.cp-chip-app  .cp-chip-icon { color: var(--terminal-green); }
.cp-action-chip.cp-chip-app:hover { background: var(--terminal-green); color: var(--steel-900); }
.cp-action-chip.cp-chip-app:hover .cp-chip-icon { color: var(--steel-900); }
.cp-action-chip.cp-chip-repo { border-left-color: var(--steel-300); }
.cp-action-chip.cp-chip-repo .cp-chip-icon { color: var(--steel-300); }
.cp-action-chip.cp-chip-resume { border-left-color: var(--blueprint); }
.cp-action-chip.cp-chip-resume .cp-chip-icon { color: var(--blueprint); }
.cp-action-chip.cp-chip-resume:hover { background: var(--blueprint); color: var(--steel-900); }
.cp-action-chip.cp-chip-resume:hover .cp-chip-icon { color: var(--steel-900); }
.cp-action-chip.cp-chip-demo { border-left-color: var(--terminal-amber); }
.cp-action-chip.cp-chip-demo .cp-chip-icon { color: var(--terminal-amber); }
/* Universal contact chip — rendered as a button (not anchor) so the
   dispatch line opens via the scene rather than a hard navigation. */
button.cp-action-chip {
  font: inherit;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.cp-action-chip.cp-chip-contact {
  border-left-color: var(--pods-orange);
  background: color-mix(in srgb, var(--pods-orange) 14%, var(--steel-800));
}
.cp-action-chip.cp-chip-contact .cp-chip-icon { color: var(--pods-orange); }
.cp-action-chip.cp-chip-contact:hover {
  background: var(--pods-orange);
  color: var(--steel-900);
  border-color: var(--pods-orange);
}
.cp-action-chip.cp-chip-contact:hover .cp-chip-icon { color: var(--steel-900); }
@media (max-width: 720px) {
  .cp-action-bar {
    padding: 12px 20px;
    gap: 10px 12px;
  }
  .cp-action-tag { font-size: 9px; letter-spacing: .18em; }
  .cp-action-chip {
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: .12em;
  }
}

@media (max-width: 720px) {
  .cp-dossier-hero {
    min-height: auto;
    padding: 28px 20px 22px;
  }
  .cp-dossier-title {
    font-size: clamp(32px, 11vw, 46px);
  }
  .cp-dossier-summary {
    font-size: 15px;
  }
  .cp-plate-label,
  .cp-plate-foot-id {
    font-size: 8px;
    letter-spacing: .18em;
  }
  .cp-plate-stencil {
    font-size: 26px;
  }
  .cp-plate-meta-v {
    font-size: 10.5px;
  }
  .cp-dossier-grid {
    padding: 24px 18px 10px;
    gap: 20px;
  }
  .cp-dossier-grid .cp-section {
    padding: 16px;
  }
  .cp-section-label {
    letter-spacing: .18em;
  }
  .cp-impact-grid {
    grid-template-columns: 1fr;
  }
  .cp-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cp-metric {
    padding: 14px;
  }
  .cp-metric-v {
    font-size: 18px;
  }
  /* Mobile hero: trim chrome, keep the document feeling intentional.
     Title scales to viewport; plate footer compresses to one line. */
  .cp-dossier-hero {
    padding: 26px 18px 20px;
    min-height: auto;
  }
  .panel.panel-deploy .cp-dossier-hero {
    padding: 32px 20px 22px;
  }
  .cp-dossier-title {
    font-size: clamp(34px, 10vw, 50px);
    line-height: 0.98;
  }
  .panel.panel-deploy .cp-dossier-title {
    font-size: clamp(38px, 11vw, 56px);
  }
  .cp-dossier-summary {
    font-size: 14.5px;
    line-height: 1.5;
  }
  .panel.panel-deploy .cp-dossier-summary {
    font-size: 15px;
  }
  .cp-dossier-identity {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .cp-evidence-inline {
    margin-top: 12px;
    gap: 6px;
  }
  .cp-evidence-inline .cp-evidence-row {
    font-size: 9px;
    padding: 4px 8px 4px 7px;
    letter-spacing: 0.14em;
  }
  /* Mobile intel rail: stack single column at narrow widths */
  .cp-aside {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Mobile operator margin: tighter padding, single column */
  .cp-operator-margin {
    padding: 18px 20px 16px;
  }
  /* Wallmark stays out of the way at the bottom corner */
  .cp-dossier-wallmark {
    top: auto;
    bottom: -6%;
    right: -12%;
    transform: none;
    opacity: 0.07;
  }
  /* Tour panel reads as bottom-sheet on mobile, not a centered modal */
  .tour-card {
    max-width: 100%;
    border-radius: 0;
  }
}

/* HEADER */
.cp-header {
  position: relative;
  padding: 36px 56px 28px 40px;
  background: linear-gradient(180deg, var(--steel-800) 0%, var(--steel-900) 100%);
  border-bottom: 1px solid var(--steel-700);
}
.cp-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pods-orange), transparent);
  opacity: 0.45;
}
.cp-stencil-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}
.cp-stencil {
  font-family: var(--font-stencil);
  font-size: 84px;
  line-height: .85;
  color: var(--paint-white);
  letter-spacing: 0.04em;
  -webkit-text-stroke: 1px var(--steel-900);
  text-shadow: 1px 1px 0 var(--steel-900), 2px 2px 0 var(--steel-900), 3px 3px 0 rgba(0,0,0,.35);
  opacity: .92;
  filter: blur(.25px);
}
.cp-meta-col { display: flex; flex-direction: column; gap: 6px; }
.cp-bay-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--steel-300);
  text-transform: uppercase;
}
.cp-bay { color: var(--pods-orange); font-weight: 700; }
.cp-dot { color: var(--steel-500); }
.cp-year { color: var(--steel-200); }
.cp-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  border: 1px solid currentColor;
  background: rgba(0,0,0,.35);
}
.cp-status.status-live          { color: var(--terminal-green); }
.cp-status.status-beta          { color: var(--blueprint); }
.cp-status.status-private-beta  { color: var(--blueprint); }
.cp-status.status-finalist      { color: var(--terminal-amber); }
.cp-status.status-incoming      { color: var(--pods-orange); }
.cp-status.status-archived      { color: var(--steel-300); }
.cp-status::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  margin-right: 8px;
  box-shadow: 0 0 6px currentColor;
}
.cp-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--paint-white);
  margin-top: 6px;
}
.cp-tagline {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--steel-200);
  letter-spacing: 0.04em;
  line-height: 1.5;
  max-width: 64ch;
  margin-top: 6px;
}

/* BANNER (optional image) */
.cp-banner {
  margin: 0;
  border-bottom: 1px solid var(--steel-700);
  background: var(--steel-900);
  position: relative;
  overflow: hidden;
}
.cp-banner img {
  display: block;
  width: 100%;
  height: clamp(180px, 32vh, 320px);
  object-fit: cover;
  filter: saturate(.92) brightness(.96);
}
.cp-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10,13,16,.55) 100%);
  pointer-events: none;
}

/* SECTIONS */
.cp-sections {
  padding: 28px 40px 8px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.cp-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: cp-rise .72s cubic-bezier(.16,.84,.24,1) both;
}
.cp-section:nth-child(1) { animation-delay: .06s; }
.cp-section:nth-child(2) { animation-delay: .15s; }
.cp-section:nth-child(3) { animation-delay: .23s; }
.cp-section:nth-child(4) { animation-delay: .31s; }
.cp-section:nth-child(5) { animation-delay: .39s; }
.cp-section:nth-child(6) { animation-delay: .47s; }
.cp-section:nth-child(7) { animation-delay: .54s; }
@keyframes cp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cp-section-head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: center;
}
.cp-section-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.cp-section-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paint-white);
  font-weight: 600;
}
.cp-section-rule {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--steel-600), transparent);
}
.cp-section-body { padding-left: 28px; }

/* Deploy-variant typography craft — wider canvas earns slightly larger
   body, longer measure, and tighter rhythm so the dossier reads like a
   document, not a column. Numbers and labels lift a touch for hierarchy. */
.panel.panel-deploy .cp-section-num { font-size: 12px; letter-spacing: 0.22em; }
.panel.panel-deploy .cp-section-label { font-size: 11.5px; letter-spacing: 0.28em; }
.panel.panel-deploy .cp-paragraph {
  font-size: 16.5px;
  line-height: 1.78;
  max-width: 72ch;
}
.panel.panel-deploy .cp-paragraph:first-child {
  font-size: 18px;
  line-height: 1.66;
}
.panel.panel-deploy .cp-paragraph.cp-why {
  font-size: 18.5px;
  line-height: 1.6;
  padding-left: 18px;
}
.panel.panel-deploy .cp-list li {
  font-size: 15.5px;
  line-height: 1.66;
  max-width: 70ch;
}
.panel.panel-deploy .cp-dossier-grid .cp-sections { gap: 28px; }
.panel.panel-deploy .cp-dossier-grid .cp-section { padding: 28px 28px 26px; }
.panel.panel-deploy .cp-section + .cp-section { padding-top: 28px; }

.cp-paragraph {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--steel-100);
  margin-bottom: 12px;
  max-width: 66ch;
  letter-spacing: 0.005em;
}
.cp-paragraph:first-child { color: var(--paint-white); font-size: 16.5px; line-height: 1.65; }
.cp-paragraph:last-child { margin-bottom: 0; }
/* "Why it matters" — outcome-focused lead-in. Slightly larger, white,
   italic-leaning weight so it reads like a kicker rather than body text. */
.cp-paragraph.cp-why {
  font-size: 17px;
  line-height: 1.55;
  color: var(--paint-white);
  letter-spacing: 0.005em;
  border-left: 2px solid var(--pods-orange);
  padding-left: 14px;
  margin-bottom: 0;
}

.cp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--steel-100);
  max-width: 66ch;
  letter-spacing: 0.005em;
}
.cp-bullet {
  display: inline-block;
  width: 6px; height: 6px;
  margin-top: 8px;
  background: var(--terminal-green);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(109,255,140,.35);
}
.cp-list-checks li { font-size: 13.5px; color: var(--steel-200); }
.cp-list-checks .cp-check {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--blueprint);
  font-size: 14px;
  line-height: 1.55;
}
.cp-list-todo li {
  color: var(--steel-200);
}
.cp-list-todo .cp-check {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--warning);
  font-size: 13px;
  line-height: 1.55;
}

/* STACK tags */
.cp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.cp-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  background: var(--steel-800);
  border: 1px solid var(--steel-600);
  color: var(--steel-100);
  position: relative;
}
.cp-tag::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--terminal-amber);
  margin-right: 8px;
  vertical-align: 1px;
}

/* MANIFEST callout */
.cp-manifest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border: 1px solid var(--steel-700);
  background: var(--steel-800);
}
.cp-manifest-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  padding: 12px 14px;
  border-right: 1px solid var(--steel-700);
  border-bottom: 1px solid var(--steel-700);
  font-family: var(--font-mono);
  font-size: 12px;
}
.cp-manifest-row:last-child { border-bottom: 0; }
.cp-manifest-k {
  color: var(--steel-300);
  letter-spacing: 0.18em;
  font-size: 9px;
  text-transform: uppercase;
}
.cp-manifest-v { color: var(--paint-white); }

/* LINKS */
.cp-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.cp-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--steel-800);
  border: 1px solid var(--steel-600);
  border-left: 3px solid var(--terminal-green);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--paint-white);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition:
    transform .22s var(--ease-cinematic),
    background .22s ease,
    color .18s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}
.cp-link-card:hover {
  background: var(--terminal-green);
  color: var(--steel-900);
  border-left-color: var(--steel-900);
  transform: translate(2px, -1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
}
.cp-link-card:active {
  transform: translate(2px, 0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32);
  transition-duration: 0.08s;
}
.cp-link-arrow { font-weight: 700; opacity: .8; }
.cp-link-label { text-transform: uppercase; letter-spacing: 0.16em; }

/* AUX image */
.cp-image-aux {
  margin: 0;
  border: 1px solid var(--steel-700);
  background: var(--steel-800);
}
.cp-image-aux img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}

/* PROJECT VISUAL — sits directly under the hero so every panel reads like a
   product page. When a real banner image is supplied via data.images[0] the
   block becomes a <img>; otherwise the themed CSS art carries it. */
.cp-visual {
  position: relative;
  margin: 0;
  border-bottom: 1px solid var(--steel-700);
  background: var(--steel-900, #0a0d10);
  overflow: hidden;
  height: clamp(180px, 22vh, 240px);
}
/* When a real photograph is supplied, give the visual block more vertical
   room and a documentary treatment — subtle vignette + accent rim so the
   image reads as archival footage in the dossier rather than a stretched
   thumbnail. */
.cp-visual.has-image {
  background: #050709;
  height: clamp(280px, 38vh, 460px);
}
.cp-visual.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 38%, transparent 55%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, transparent 0%, transparent 62%, rgba(10,13,16,.62) 100%);
  z-index: 1;
}
.cp-visual.has-image::before {
  /* Top-edge accent rim — picks up the project color so the photo reads
     as fastened to the dossier, not a free-floating jpeg. */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--cp-accent) 75%, transparent) 18%,
    color-mix(in srgb, var(--cp-accent) 75%, transparent) 82%,
    transparent 100%);
  z-index: 2;
}
.cp-visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.cp-visual-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 70% 30%, color-mix(in srgb, var(--cp-accent) 26%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--cp-tone-1, #182330) 0%, var(--cp-tone-2, #080b10) 100%);
}
.cp-visual-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .6;
  pointer-events: none;
}
.cp-visual-stencil {
  position: absolute;
  right: -8px;
  top: -22px;
  font-family: var(--font-stencil);
  font-size: clamp(180px, 28vw, 280px);
  line-height: 1;
  color: color-mix(in srgb, var(--cp-accent) 18%, transparent);
  letter-spacing: -0.02em;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.cp-visual-content {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start;
  padding: 20px 32px;
  max-width: 60%;
}
.cp-visual-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cp-accent, var(--pods-orange));
  background: rgba(10,13,16,.55);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 38%, var(--steel-600));
  padding: 4px 10px;
}
.cp-visual-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--paint-white);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.cp-visual-stack {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--steel-200);
  text-transform: uppercase;
}
.cp-visual-corners span {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--cp-accent);
  opacity: .55;
}
.cp-visual-corners span:nth-child(1) { top: 10px; left: 10px;  border-right: 0; border-bottom: 0; }
.cp-visual-corners span:nth-child(2) { top: 10px; right: 10px; border-left: 0;  border-bottom: 0; }
.cp-visual-corners span:nth-child(3) { bottom: 10px; left: 10px;  border-right: 0; border-top: 0; }
.cp-visual-corners span:nth-child(4) { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; }

/* CRT scanline overlay for the procedural visual fallback — sits between
   the grid and the content so the block reads as a working monitor instead
   of a flat placeholder. Stays under 12% intensity to never compete. */
.cp-visual-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 2px,
    rgba(255,255,255,0.018) 2px,
    rgba(255,255,255,0.018) 3px
  );
  mix-blend-mode: screen;
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .cp-visual-scanlines { display: none; }
  /* Keep the world dim subtle when reduced motion is on — no blur, just opacity. */
  body.is-dossier-open .hud,
  body.is-dossier-open .terminal-bar,
  body.is-dossier-open .filter-bar,
  body.is-dossier-open .yard-map,
  body.is-dossier-open .minimap,
  body.is-dossier-open .quick-dock,
  body.is-dossier-open .zone-chip {
    filter: none;
    opacity: 0.4;
  }
}

/* Embedded system feed — small terminal-style log block in the lower-right
   corner of the procedural visual. Reads as the panel showing live ops. */
.cp-visual-feed {
  position: absolute;
  bottom: 14px;
  right: 16px;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px 8px;
  padding: 8px 12px;
  background: rgba(5, 8, 12, 0.62);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--steel-700));
  font-family: var(--font-mono);
  max-width: 60%;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.cp-visual-feed .cp-feed-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cp-accent, var(--pods-orange));
  box-shadow: 0 0 8px var(--cp-accent, var(--pods-orange));
  animation: cp-feed-pulse 2.4s ease-in-out infinite;
  align-self: center;
}
@keyframes cp-feed-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
.cp-visual-feed .cp-feed-k {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cp-accent, var(--pods-orange));
  opacity: 0.78;
  font-weight: 700;
}
.cp-visual-feed .cp-feed-line {
  grid-column: 1 / -1;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-100);
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-visual-feed .cp-feed-line:nth-child(3) { opacity: 0.92; }
.cp-visual-feed .cp-feed-line:nth-child(4) { opacity: 0.66; }
.cp-visual-feed .cp-feed-line:nth-child(5) { opacity: 0.5; }
@media (max-width: 720px) {
  .cp-visual-feed { display: none; }
}
@media (max-width: 720px) {
  .cp-visual { height: clamp(140px, 24vh, 180px); }
  .cp-visual-content { padding: 14px 18px; max-width: 80%; }
  .cp-visual-stencil { font-size: clamp(120px, 40vw, 220px); right: -4px; top: -10px; }
}

/* Quick scan — recruiter strip directly under the visual block. Single
   row of role / year / key systems with a one-line outcome below. The
   strip earns its place by being first, not loud — quiet borders, mono
   labels, no animation. */
.cp-quickscan {
  border-bottom: 1px solid var(--steel-700);
  background:
    linear-gradient(180deg, rgba(232, 119, 34, 0.025), transparent),
    var(--steel-900);
  padding: 16px 40px 18px;
}
.panel.panel-deploy .cp-quickscan { padding: 22px 64px 22px; }
@media (min-width: 1280px) {
  .panel.panel-deploy .cp-quickscan { padding: 22px 96px 22px; }
}
.cp-quickscan .cp-qs-row {
  display: flex;
  align-items: stretch;
  gap: 32px;
  flex-wrap: wrap;
}
.cp-quickscan .cp-qs-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cp-quickscan .cp-qs-cell-narrow { min-width: 80px; }
.cp-quickscan .cp-qs-cell-stack { flex: 1 1 320px; min-width: 240px; }
.cp-quickscan .cp-qs-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel-300);
  font-weight: 700;
}
.cp-quickscan .cp-qs-v {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--paint-white);
  letter-spacing: 0.005em;
  line-height: 1.3;
}
.cp-quickscan .cp-qs-v-stack {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--steel-100);
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.cp-quickscan .cp-qs-outcome {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(232, 119, 34, 0.18);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: baseline;
}
.cp-quickscan .cp-qs-outcome .cp-qs-k {
  color: var(--cp-accent, var(--pods-orange));
  opacity: 0.85;
}
.cp-quickscan .cp-qs-out-v {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--steel-100);
  max-width: 78ch;
}
.panel.panel-deploy .cp-quickscan .cp-qs-out-v {
  font-size: 15.5px;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .cp-quickscan { padding: 14px 18px 16px; }
  .cp-quickscan .cp-qs-row { gap: 18px; }
  .cp-quickscan .cp-qs-cell-stack { flex: 1 1 100%; }
  .cp-quickscan .cp-qs-v { font-size: 13.5px; }
  .cp-quickscan .cp-qs-v-stack { font-size: 11px; }
  .cp-quickscan .cp-qs-out-v { font-size: 13.5px; }
}

/* Operator margin — handwritten-feel sign-off block at the close of each
   dossier. Lives between the body grid and the footer so the page
   closes on a personal beat rather than a system stamp. */
.cp-operator-margin {
  position: relative;
  margin: 16px auto 0;
  padding: 22px 28px 18px;
  max-width: 880px;
  border-top: 1px dashed var(--steel-700);
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 28px,
      rgba(255, 255, 255, 0.012) 28px,
      rgba(255, 255, 255, 0.012) 29px
    );
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px 18px;
  align-items: baseline;
}
.cp-operator-margin .com-stamp {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cp-accent, var(--pods-orange));
  opacity: 0.78;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 32%, var(--steel-700));
  padding: 3px 8px;
}
.cp-operator-margin .com-text {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.62;
  font-style: italic;
  color: var(--steel-100);
  letter-spacing: 0.005em;
  margin: 0;
  max-width: 64ch;
}
.cp-operator-margin .com-sig {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel-300);
  letter-spacing: 0.2em;
  align-self: end;
  padding-bottom: 1px;
}
.panel.panel-deploy .cp-operator-margin {
  padding: 28px 48px 22px;
}
.panel.panel-deploy .cp-operator-margin .com-text {
  font-size: 16px;
}
@media (max-width: 720px) {
  .cp-operator-margin {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 18px 14px;
  }
  .cp-operator-margin .com-sig { justify-self: end; }
}

/* FOOTER */
.cp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px 28px 40px;
  margin-top: 8px;
  border-top: 1px dashed var(--steel-700);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--steel-400);
}
.cp-footer-meta {
  flex: 1;
  text-align: center;
  color: var(--steel-300);
  opacity: 0.72;
  font-size: 9px;
  letter-spacing: 0.28em;
}
@media (max-width: 720px) {
  .cp-footer-meta { display: none; }
}
.cp-footer-pulse { display: inline-flex; align-items: center; gap: 8px; color: var(--steel-300); }
.cp-footer-pulse .op-dot {
  width: 6px; height: 6px; background: var(--pods-orange);
  border-radius: 50%; display: inline-block;
}

/* MOBILE */
@media (max-width: 720px) {
  .panel-card.cp-card-v2 { width: 96vw; height: 92vh; }
  .cp-header { padding: 22px 56px 18px 18px; }
  .cp-stencil { font-size: 56px; }
  .cp-stencil-row { gap: 16px; }
  .cp-title { font-size: 28px; }
  .cp-tagline { font-size: 12px; }
  .cp-sections { padding: 20px 18px; gap: 22px; }
  .cp-section-body { padding-left: 0; }
  .cp-section-head { gap: 8px; }
  .cp-bay-line { font-size: 9px; letter-spacing: 0.2em; }
  .cp-paragraph { font-size: 14px; }
  .cp-list li { font-size: 13px; }
  .cp-link-grid { grid-template-columns: 1fr; }
  .cp-footer { padding: 14px 18px 22px; }

  /* Operator-tablet polish — touch targets, hit areas, scroll feel.
     The dossier on phones is the primary surface, so it earns extra
     ergonomic care. */
  .panel.panel-deploy .panel-card,
  .panel.panel-deploy .panel-card.cp-card-v2 {
    height: 100dvh;
    width: 100vw;
    border-radius: 0;
  }
  .panel.panel-deploy .cp-dossier-grid {
    padding: 22px 18px 18px;
    gap: 22px;
  }
  .panel.panel-deploy .cp-paragraph {
    font-size: 15px;
    line-height: 1.66;
  }
  .panel.panel-deploy .cp-paragraph:first-child { font-size: 15.5px; }
  .panel.panel-deploy .cp-list li { font-size: 14px; line-height: 1.55; }
  /* Wider, thumb-friendly close target */
  .cp-close-fixed {
    width: 44px !important;
    height: 44px !important;
    top: 14px !important;
    right: 14px !important;
  }
  /* Nav strip — convert to two-row layout with bigger taps */
  .cp-nav {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
  }
  .cp-nav-btn,
  .cp-nav-back {
    min-height: 40px;
  }
  /* Smoother momentum scroll on iOS */
  .cp-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

.story-p {
  animation: story-rise .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes story-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.col-manifest {
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  align-content: start;
}

.col-links { padding: 28px 32px; }
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--steel-900);
  border: 1px solid var(--steel-600);
  border-left: 3px solid var(--terminal-green);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
  color: var(--paint-white);
  transition: all .18s;
}
.link-card:hover {
  background: var(--terminal-green);
  color: var(--steel-900);
  border-left-color: var(--steel-900);
  transform: translateX(2px);
}
.link-arrow {
  font-size: 16px;
  font-weight: 700;
  opacity: 0.7;
}

/* ─────────── DIVE FLASH ─────────── */
.dive-flash {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  overflow: hidden;
  animation: dive-fade 1.0s ease-out forwards;
}
@keyframes dive-fade {
  0% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}
.dive-door {
  position: absolute;
  top: 0; height: 100%;
  width: 50.2%;
  background: linear-gradient(180deg, #232b35 0%, #14181f 50%, #232b35 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.7);
}
.dive-door::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid var(--pods-orange);
  opacity: 0.7;
}
.dive-door-l {
  left: 0;
  animation: door-open-l 0.8s cubic-bezier(.7,.05,.3,1) forwards;
  border-right: 1px solid var(--pods-orange);
}
.dive-door-r {
  right: 0;
  animation: door-open-r 0.8s cubic-bezier(.7,.05,.3,1) forwards;
  border-left: 1px solid var(--pods-orange);
}
@keyframes door-open-l {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes door-open-r {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.dive-scan {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--terminal-green), transparent);
  box-shadow: 0 0 24px var(--terminal-green);
  opacity: 0.85;
  animation: dive-scan-y 0.85s cubic-bezier(.4,.1,.4,1) forwards;
}
@keyframes dive-scan-y {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.dive-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.7) 100%);
  animation: dive-vignette-pulse 1s ease-out forwards;
}
@keyframes dive-vignette-pulse {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}
.dive-corners {
  position: absolute; inset: 32px;
  pointer-events: none;
}
.dive-corners span {
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--terminal-green);
  animation: dive-corner-in .55s cubic-bezier(.2,.8,.2,1) both;
}
.dive-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.dive-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; animation-delay: .05s; }
.dive-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; animation-delay: .1s; }
.dive-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; animation-delay: .15s; }
@keyframes dive-corner-in {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
.dive-stamp {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--terminal-green);
  text-shadow: 0 0 12px var(--terminal-green);
  animation: dive-stamp-pulse 0.9s ease-out forwards;
}
@keyframes dive-stamp-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); letter-spacing: 0.2em; }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1); letter-spacing: 0.4em; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); letter-spacing: 0.5em; }
}

/* ─────────── DEBUG SCENE ─────────── */
.debug-scene .panel-card { background: var(--steel-900); }
.debug-scene .panel-strip {
  background: repeating-linear-gradient(-45deg, var(--warning) 0 16px, var(--steel-900) 16px 32px);
}
.debug-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  height: 100%;
  font-family: var(--font-mono);
}
.debug-code {
  background: #000;
  padding: 24px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.7;
  border-right: 1px solid var(--steel-600);
}
.debug-code .ln {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background .15s;
  color: var(--steel-200);
}
.debug-code .ln:hover { background: rgba(255,255,255,.04); }
.debug-code .ln .num { color: var(--steel-400); text-align: right; user-select: none; }
.debug-code .ln.bug { color: var(--warning); }
.debug-code .ln.bug .num { color: var(--warning); }
.debug-code .ln.picked.right { background: rgba(109,255,140,.12); color: var(--terminal-green); }
.debug-code .ln.picked.wrong { background: rgba(255,68,68,.16); color: var(--warning); animation: shake .3s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.debug-side {
  padding: 24px;
  display: flex; flex-direction: column;
  gap: 16px;
  background: var(--steel-800);
}
.debug-side .stack-trace {
  background: #000;
  border-left: 3px solid var(--warning);
  padding: 12px 14px;
  font-size: 11px;
  color: var(--steel-100);
  line-height: 1.6;
}
.debug-side .stack-trace .e { color: var(--warning); font-weight: 700; }
.debug-side .stack-trace .m { color: var(--steel-200); }
.debug-side .stack-trace .at { color: var(--steel-400); }
.debug-prompt {
  font-size: 12px;
  color: var(--steel-300);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.debug-result {
  padding: 14px;
  font-size: 12px;
  border: 1px solid var(--steel-600);
  background: var(--steel-900);
}
.debug-result.ok { border-color: var(--terminal-green); color: var(--terminal-green); }
.debug-result.bad { border-color: var(--warning); color: var(--warning); }

/* ─────────── CONTACT (manifest) ─────────── */
.manifest {
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  height: 100%;
  overflow-y: auto;
}
.manifest h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--steel-300);
  text-transform: uppercase;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--steel-600);
  padding-bottom: 8px;
}
.manifest label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steel-300);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.manifest input, .manifest textarea, .manifest select {
  width: 100%;
  background: var(--steel-900);
  border: 1px solid var(--steel-500);
  color: var(--paint-white);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 12px;
  margin-bottom: 14px;
  outline: none;
  transition: border-color .15s;
}
.manifest input:focus, .manifest textarea:focus, .manifest select:focus { border-color: var(--pods-orange); }
.manifest textarea { resize: vertical; min-height: 110px; }
.manifest .dispatch-route-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px dashed var(--steel-500);
  border-left: 2px solid var(--pods-orange);
  background: rgba(232, 119, 34, 0.04);
  border-radius: 2px;
}
.manifest .drn-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--pods-orange);
  text-transform: uppercase;
}
.manifest .drn-line {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--paint-white);
  line-height: 1.5;
}
.manifest .drn-target {
  color: var(--blueprint);
  font-weight: 700;
  word-break: break-all;
}
.manifest .drn-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steel-300);
  letter-spacing: 0.04em;
}
.manifest .ship-btn {
  background: var(--pods-orange);
  color: var(--steel-900);
  border: none;
  padding: 14px 24px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  transition: filter .15s, transform .15s;
  border-radius: 2px;
}
.manifest .ship-btn:not(.is-success):not(.is-sending):hover { filter: brightness(1.15); transform: translateY(-1px); }
.manifest .ship-btn:active { transform: translateY(0); }
.manifest .ship-btn.is-sending {
  background: var(--steel-600);
  color: var(--steel-100);
  cursor: progress;
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.manifest .ship-btn.is-sending::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 100%);
  animation: ship-btn-scan 1.2s linear infinite;
}
@keyframes ship-btn-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}
/* Dispatch — honest delivery states (Web3Forms). State reads from the
   button + route-note; the old rotated "QUEUED/SENT" stamp is gone so
   nothing competes with the CTA or implies a delivery that didn't happen. */
.manifest .ship-btn.is-retry {
  background: var(--terminal-amber);
  color: var(--steel-900);
}
.manifest .ship-btn.is-success {
  background: var(--terminal-green);
  color: var(--steel-900);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: drn-state-in .3s ease-out;
}
.manifest .ship-btn-alt {
  margin-top: 10px;
  background: transparent;
  color: var(--steel-100);
  border: 1px solid var(--steel-500);
  transition: filter .15s, transform .15s, border-color .15s, color .15s;
}
.manifest .ship-btn-alt:hover {
  border-color: var(--blueprint);
  color: var(--paint-white);
}
.manifest .dispatch-route-note.drn-success {
  border-color: rgba(109, 255, 140, 0.42);
  border-left-color: var(--terminal-green);
  background: rgba(109, 255, 140, 0.06);
  animation: drn-state-in .28s ease-out;
}
.manifest .dispatch-route-note.drn-success .drn-tag { color: var(--terminal-green); }
.manifest .dispatch-route-note.drn-error {
  border-color: rgba(255, 182, 39, 0.42);
  border-left-color: var(--terminal-amber);
  background: rgba(255, 182, 39, 0.06);
  animation: drn-state-in .28s ease-out;
}
.manifest .dispatch-route-note.drn-error .drn-tag { color: var(--terminal-amber); }
.manifest .drn-err {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: var(--warning);
  opacity: 0.9;
  margin-top: 2px;
  word-break: break-word;
}
@keyframes drn-state-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────── HIDDEN BAY ─────────── */
.hidden-flash {
  position: fixed; inset: 0;
  background: var(--pods-orange);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  animation: flash 1s ease-out;
}
@keyframes flash {
  0% { opacity: .8; }
  100% { opacity: 0; }
}

/* ─────────── responsive ─────────── */
@media (max-width: 720px) {
  .col-manifest { grid-template-columns: 1fr; }
  .manifest { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .manifest .dispatch-route-note { padding: 10px 12px; }
  .panel-stencil { font-size: 36px; }
  .panel-title h1 { font-size: 22px; }
  .hud-corner { padding: 10px 12px; font-size: 9px; }
  .hud-corner .hud-meta > span { display: none; }
  .hud-corner .hud-meta > span.keep { display: inline-flex; }
  .hud-meta .hud-divider { display: none; }
  .hud-logo { font-size: 16px; }
  .yard-map { font-size: 8px; padding: 6px 10px; }
  .yard-map .bay { width: 12px; }
  .minimap { transform: scale(0.78); transform-origin: bottom left; bottom: 60px; }
  .minimap-route { padding-top: 4px; }
  .minimap-route .mr-row { font-size: 8px; letter-spacing: 0.12em; }
  .filter-bar {
    font-size: 9px; padding: 6px 8px;
    gap: 4px;
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .fb-pill { padding: 3px 7px; font-size: 9px; flex-shrink: 0; }
  .controls-hint {
    bottom: 50px;
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    font-size: 9px;
  }
  .controls-hint .ch-secondary { display: none; }
  .controls-hint .ch-sep { display: none; }
  .controls-dock {
    position: fixed;
    bottom: 100px;
    left: 12px; right: 12px;
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    max-width: none;
    white-space: normal;
  }
  .cd-divider { display: none; }
  .cd-group { flex-wrap: wrap; gap: 8px; }
  .cd-label { border-right: 0; padding-right: 0; }
  .operator-card { min-width: 0; padding: 4px 10px; }
  .op-name { font-size: 14px; }
  .op-role { font-size: 9px; letter-spacing: 0.16em; }
  .op-sub { font-size: 8px; letter-spacing: 0.14em; }
  .op-id { font-size: 8px; letter-spacing: 0.22em; }
  .panel-card { width: 96vw; height: 90vh; }
  .panel-head { padding: 12px 14px; gap: 12px; }
  .panel-tabs { padding: 0 12px; }
  .panel-body .col { padding: 18px 16px; }
}
@media (max-width: 480px) {
  .hud-hint .sep-md { display: none; }
  .hud-hint .opt-md { display: none; }
}

/* ─────────── minimap ─────────── */
.minimap {
  position: fixed;
  bottom: 80px;
  left: 16px;
  z-index: 11;
  background: rgba(10, 13, 16, .82);
  border: 1px solid var(--steel-500);
  padding: 8px 10px 6px;
  font-family: var(--font-mono);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}
.minimap-header {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 6px;
}
.mm-title { color: var(--pods-orange); font-weight: 700; }
.mm-coords { color: var(--steel-300); font-size: 8px; }
.minimap-svg {
  display: block;
  cursor: crosshair;
}
.minimap-foot {
  margin-top: 4px;
  font-size: 8px;
  color: var(--steel-400);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
/* Fixed-height status slot — the hover readout and the route-progress bar
   are different heights; pinning the slot stops the whole minimap resizing
   (the "jump") as the cursor moves on and off markers. */
.minimap-status {
  margin-top: 6px;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px dashed rgba(91, 184, 247, 0.18);
}
.minimap-route {
  width: 100%;
  padding: 4px 2px;
}
.minimap-route .mr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.minimap-route .mr-k { color: var(--steel-300); font-weight: 600; }
.minimap-route .mr-v {
  color: var(--terminal-green);
  font-family: var(--font-mono);
  font-weight: 700;
}
.minimap-route .mr-track {
  height: 3px;
  background: rgba(91, 184, 247, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.minimap-route .mr-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--terminal-green), #FFB627);
  border-radius: 2px;
  transition: width .5s cubic-bezier(.2,.85,.25,1);
  box-shadow: 0 0 8px rgba(109, 255, 140, 0.4);
}
.minimap:hover { box-shadow: 0 8px 30px rgba(0,0,0,.7), 0 0 0 1px rgba(232,119,34,.35) inset; }

/* Minimap hover readout — surfaces zone or bay context whenever the visitor
   scans the map. Replaces the route progress strip while a hover is active. */
.minimap-readout {
  width: 100%;
  padding: 6px 8px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  background: linear-gradient(180deg, rgba(232, 119, 34, 0.04) 0%, transparent 100%);
  animation: mm-readout-in .2s ease-out;
}
@keyframes mm-readout-in {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}
.minimap-readout .mmr-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mr-color, var(--pods-orange));
  box-shadow: 0 0 8px var(--mr-color, var(--pods-orange));
  flex-shrink: 0;
}
.minimap-readout .mmr-k {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-300);
  font-weight: 700;
}
.minimap-readout .mmr-v {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mr-color, var(--paint-white));
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.minimap-readout .mmr-sub {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-200);
  opacity: 0.78;
  margin-left: 14px;
}

/* ─────────── filter bar ─────────── */
.filter-bar {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 13, 16, .82);
  border: 1px solid var(--steel-500);
  padding: 6px 10px;
  z-index: 11;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.fb-label {
  color: var(--steel-300);
  text-transform: uppercase;
  margin-right: 4px;
  font-weight: 700;
}
.fb-pill {
  background: transparent;
  border: 1px solid var(--steel-600);
  color: var(--steel-200);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all .22s cubic-bezier(.2, .85, .25, 1);
}
.fb-pill:hover {
  border-color: var(--pill-color, var(--paint-white));
  color: var(--pill-color, var(--paint-white));
}
.fb-pill.active {
  background: var(--pill-color, var(--pods-orange));
  border-color: var(--pill-color, var(--pods-orange));
  color: #0a0d10;
}
/* Showcase mode (any active filter): bar lifts slightly so it is clear the
   yard is being actively curated rather than a passive sort being applied. */
.filter-bar.is-active {
  box-shadow: 0 8px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(232,119,34,.18) inset;
  border-color: rgba(232,119,34,.35);
}
.filter-bar.is-active .fb-label { color: var(--pods-orange); }

@media (max-width: 1120px) {
  .filter-bar {
    top: 100px;
    max-width: calc(100vw - 24px);
  }
  .controls-dock {
    display: none;
    position: fixed;
    bottom: 52px;
    left: 12px;
    right: 12px;
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    max-width: none;
    white-space: normal;
  }
  .controls-dock.mobile-open { display: flex; }
  .cd-title {
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--steel-700);
  }
  .cd-divider { display: none; }
  .cd-group { flex-wrap: wrap; gap: 8px; }
  .cd-label { border-right: 0; padding-right: 0; min-width: 92px; }
  .controls-toggle {
    display: flex;
    position: fixed;
    bottom: 46px;
    right: 14px;
    width: auto;
    min-width: 42px;
    height: 36px;
    padding: 0 12px;
    background: rgba(10,13,16,.86);
    border: 1px solid var(--steel-500);
    color: var(--pods-orange);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 12;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* ─────────── HUD contact dispatch button ─────────── */
.hud-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232, 119, 34, .12);
  border: 1px solid var(--pods-orange);
  color: var(--pods-orange);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition: background .24s cubic-bezier(.2, .85, .25, 1), transform .24s cubic-bezier(.2, .85, .25, 1);
}
.hud-contact:hover {
  background: var(--pods-orange);
  color: #0a0d10;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(232, 119, 34, 0.28);
}
.hud-contact:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition-duration: .08s;
}

/* ─────────── ROUTE COMPLETE BEAT (WOW moment) ─────────── */
.route-beat {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  opacity: 0;
  transition: opacity .55s cubic-bezier(.2, .85, .25, 1);
}
.route-beat.is-shown { opacity: 1; }
.route-beat .rb-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10, 13, 16, 0.32) 0%, rgba(10, 13, 16, 0.82) 70%, rgba(8, 11, 14, 0.92) 100%),
    linear-gradient(180deg, rgba(232, 119, 34, 0.08), transparent 60%);
  pointer-events: none;
}
.route-beat .rb-card {
  position: relative;
  min-width: min(540px, 92vw);
  max-width: 560px;
  padding: 36px 40px 28px;
  background:
    linear-gradient(180deg, rgba(14, 24, 38, 0.96), rgba(8, 17, 28, 0.96));
  border: 1px solid rgba(232, 119, 34, 0.42);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(232, 119, 34, 0.08) inset,
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(232, 119, 34, 0.12);
  transform: translateY(12px) scale(0.985);
  transition: transform .55s cubic-bezier(.2, .85, .25, 1.05);
}
.route-beat.is-shown .rb-card { transform: translateY(0) scale(1); }
.route-beat .rb-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: repeating-linear-gradient(-45deg, var(--pods-orange) 0 14px, #0a0d12 14px 28px);
  border-radius: 4px 4px 0 0;
}
.route-beat .rb-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--pods-orange);
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 700;
}
.route-beat .rb-pulse {
  width: 8px;
  height: 8px;
  background: var(--terminal-green);
  border-radius: 50%;
  animation: rb-pulse 1.4s ease-in-out infinite;
}
@keyframes rb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109, 255, 140, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(109, 255, 140, 0); }
}
.route-beat .rb-headline {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--paint-white);
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.route-beat .rb-sub {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--steel-200);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}
.route-beat .rb-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.route-beat .rb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: rgba(10, 13, 16, 0.6);
  border: 1px solid var(--steel-500);
  color: var(--steel-100);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: all .22s cubic-bezier(.2, .85, .25, 1);
}
.route-beat .rb-btn:hover {
  border-color: var(--pods-orange);
  color: var(--paint-white);
  transform: translateY(-1px);
}
.route-beat .rb-btn.primary {
  background: var(--pods-orange);
  border-color: var(--pods-orange);
  color: #0a0d10;
}
.route-beat .rb-btn.primary:hover {
  background: var(--pods-orange-bright);
  border-color: var(--pods-orange-bright);
  box-shadow: 0 6px 16px rgba(232, 119, 34, 0.35);
}
.route-beat .rb-btn-arrow { font-size: 14px; line-height: 1; }
.route-beat .rb-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.route-beat .rb-tick {
  width: 14px;
  height: 4px;
  background: var(--terminal-green);
  opacity: 0.75;
  border-radius: 1px;
}
.route-beat .rb-foot-k {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--steel-300);
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .route-beat .rb-card { padding: 26px 22px 20px; }
  .route-beat .rb-headline { font-size: 22px; }
  .route-beat .rb-actions { flex-direction: column; }
  .route-beat .rb-btn { width: 100%; justify-content: center; }
}

/* ─────────── HUD ambience toggle ─────────── */
.hud-audio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(10,13,16,.6);
  border: 1px solid var(--steel-500);
  color: var(--steel-200);
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition: all .22s cubic-bezier(.2, .85, .25, 1);
}
.hud-audio:hover {
  border-color: var(--blueprint);
  color: var(--paint-white);
  background: rgba(91, 184, 247, 0.08);
  transform: translateY(-1px);
}
.hud-audio:active { transform: translateY(0); transition-duration: .08s; }
.hud-audio.is-on {
  color: var(--terminal-green);
  border-color: rgba(109, 255, 140, 0.55);
  background: rgba(109, 255, 140, 0.05);
}
.hud-audio.is-on .ha-icon { animation: ha-pulse 2.4s ease-in-out infinite; }
.hud-audio .ha-icon { flex-shrink: 0; opacity: .85; }
@keyframes ha-pulse {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; }
}
@media (max-width: 720px) {
  .hud-audio .ha-k { display: none; }
  .hud-audio { padding: 4px 7px; }
}
.hud-contact .hc-arrow {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1;
}

/* ─────────── Dispatch bot speech bubble ─────────── */
.bot-prompt {
  position: fixed;
  z-index: 12;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  animation: bp-rise .56s cubic-bezier(.2, .9, .25, 1.08);
  transition: transform .24s cubic-bezier(.2, .85, .25, 1);
}
.bot-prompt.clicked {
  animation: bp-click .28s ease forwards;
}
.bp-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--terminal-green);
  box-shadow: 0 0 8px var(--terminal-green);
  vertical-align: middle;
  animation: bp-pulse 1.4s ease-in-out infinite;
}
@keyframes bp-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.35); }
}
@keyframes bp-click {
  0%   { transform: translate(-50%, -100%) scale(1); }
  35%  { transform: translate(-50%, -106%) scale(1.04); }
  100% { transform: translate(-50%, -94%)  scale(.92); opacity: 0; }
}
.bot-prompt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(10, 13, 16, .92);
  border-right: 1px solid var(--pods-orange);
  border-bottom: 1px solid var(--pods-orange);
}
.bp-cta-btn {
  display: block;
  text-align: left;
  background: rgba(10, 13, 16, .92);
  border: 1px solid var(--pods-orange);
  color: var(--paint-white);
  padding: 12px 36px 12px 14px;
  font-family: var(--font-mono);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .55), 0 0 0 1px rgba(232, 119, 34, .2);
  transition: transform .26s cubic-bezier(.2, .85, .25, 1), box-shadow .26s cubic-bezier(.2, .85, .25, 1), border-color .26s cubic-bezier(.2, .85, .25, 1);
  min-width: 210px;
}
.bp-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .7), 0 0 0 1px rgba(232, 119, 34, .55);
  border-color: var(--terminal-green);
}
.bp-tag {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--terminal-green);
  margin-bottom: 4px;
}
.bp-line {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--paint-white);
  margin-bottom: 2px;
}
.bp-sub {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--steel-300);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.bp-cta {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--pods-orange);
  text-transform: uppercase;
  font-weight: 700;
}
.bp-cta span { margin-left: 4px; }
.bp-dismiss {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--steel-300);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease;
}
.bp-dismiss:hover { color: var(--paint-white); }

@keyframes bp-rise {
  0%   { opacity: 0; transform: translate(-50%, -85%); }
  100% { opacity: 1; transform: translate(-50%, -100%); }
}

@media (max-width: 1120px) {
  .hud-contact { display: none; }
  .bot-prompt { transform: translate(-50%, -100%) scale(0.92); }
}
@media (max-width: 720px) {
  /* On phones the bubble can crowd the filter bar at the top of the
     screen — pull it down a touch and shrink so it stays a hint, not a
     wall. The bp-sub line goes silent to keep the bubble compact. */
  .bot-prompt { transform: translate(-50%, -100%) scale(0.84); }
  .bp-cta-btn { min-width: 180px; padding: 10px 30px 10px 12px; }
  .bp-line { font-size: 16px; }
  .bp-sub { display: none; }
}

/* ─────────── OPERATOR BRIEFING (onboarding) ─────────── */
.briefing {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  animation: brf-fade .42s cubic-bezier(.2, .85, .25, 1);
}
.briefing.closing { animation: brf-fade-out .32s cubic-bezier(.4, 0, .2, 1) forwards; }
.briefing-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,13,16,.45), rgba(10,13,16,.78));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.briefing-card {
  position: relative;
  width: min(520px, 92vw);
  background: rgba(12, 16, 22, .96);
  border: 1px solid var(--pods-orange);
  padding: 22px 26px 24px;
  font-family: var(--font-mono);
  color: var(--paint-white);
  box-shadow: 0 28px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(232,119,34,.18);
  animation: brf-rise .54s cubic-bezier(.2,.85,.25,1.04);
}
.briefing-strip {
  position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--pods-orange) 0 12px, #0a0d10 12px 24px);
}
.briefing-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 10px;
}
.briefing-tag {
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--terminal-green);
  display: inline-flex; align-items: center; gap: 8px;
}
.briefing-x {
  background: transparent; border: 1px solid var(--steel-500);
  color: var(--steel-200); width: 26px; height: 26px;
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: all .22s cubic-bezier(.2, .85, .25, 1);
}
.briefing-x:hover { background: var(--warning); border-color: var(--warning); color: white; }
.briefing-title {
  font-family: var(--font-display);
  font-size: 26px; letter-spacing: 0.04em;
  margin: 4px 0 4px;
  color: var(--paint-white);
}
.briefing-sub {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.55;
  color: var(--steel-100);
}
/* Identity signal — quiet line that grounds the portfolio in a person, not
   just a system. Sits between the lead copy and the action row. */
.briefing-origin {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-300);
  display: flex; align-items: center; gap: 8px;
}
.briefing-origin::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--pods-orange);
  display: inline-block;
}
.briefing-steps {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.briefing-steps li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  background: rgba(20,28,40,.55);
  border-left: 2px solid var(--blueprint);
}
.briefing-steps .bs-num {
  font-family: var(--font-stencil);
  color: var(--pods-orange);
  font-size: 16px; letter-spacing: 0.06em;
  min-width: 22px;
}
.briefing-steps .bs-body {
  font-size: 12px; line-height: 1.55; color: var(--steel-100);
}
.briefing-steps b { color: var(--paint-white); font-weight: 700; }
.briefing-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
.briefing-secondary {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.briefing-btn {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 10px 14px;
  background: rgba(20,28,40,.7);
  border: 1px solid var(--steel-500);
  color: var(--steel-100);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em;
  font-weight: 700; text-transform: uppercase;
  cursor: pointer;
  transition: all .24s cubic-bezier(.2, .85, .25, 1);
}
.briefing-btn:hover {
  border-color: var(--pods-orange);
  color: var(--paint-white);
  transform: translateY(-1px);
}
.briefing-btn.primary {
  background: var(--pods-orange);
  border-color: var(--pods-orange);
  color: #0a0d10;
}
.briefing-btn.primary:hover { background: #ff8a3a; }
/* Hero CTA — visually dominant primary action. Gradient panel, larger type,
   keyboard-style arrow flush right so the path forward is unambiguous. */
.briefing-btn-hero {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  font-size: 14px; letter-spacing: 0.18em;
  background: linear-gradient(135deg, var(--pods-orange) 0%, #ff8a3a 100%);
  box-shadow: 0 6px 18px rgba(232,119,34,.32), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.briefing-btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232,119,34,.42), 0 0 0 1px rgba(255,255,255,.14) inset;
}
.briefing-btn-hero .bb-arrow {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1;
}
.briefing-foot {
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--steel-300); text-transform: uppercase;
}
@keyframes brf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes brf-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes brf-rise {
  0%   { transform: translateY(14px) scale(.98); opacity: 0; }
  100% { transform: translateY(0) scale(1);      opacity: 1; }
}

/* ─────────── FILTER TOAST ─────────── */
/* Brief acknowledgement when a filter fires. Plain language so picking a
   filter feels like a system response, not a state toggle in the UI. */
.filter-toast {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(10, 13, 16, .82);
  border: 1px solid color-mix(in srgb, var(--pods-orange) 45%, var(--steel-600));
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paint-white);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
  animation: filter-toast-in .42s cubic-bezier(.2, .85, .25, 1);
}
.filter-toast .ft-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pods-orange);
  box-shadow: 0 0 8px var(--pods-orange);
  animation: ft-pulse 1.4s ease-in-out infinite;
}
.filter-toast .ft-text { white-space: nowrap; }
@keyframes filter-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes ft-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.35); }
}
@media (max-width: 1120px) {
  /* Filter bar already drops to top:100px on narrow screens — push toast
     below it so the two never stack on the same row. */
  .filter-toast { top: 156px; }
}
@media (max-width: 720px) {
  .filter-toast { font-size: 10px; padding: 5px 10px; letter-spacing: 0.12em; }
}

/* ─────────── QUICK ACTIONS (top-right cluster) ─────────── */
.quick-actions {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 11;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  pointer-events: auto;
  max-width: min(640px, calc(100vw - 32px));
}
.qa-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(10,13,16,.78);
  border: 1px solid var(--steel-500);
  color: var(--steel-100);
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: all .22s cubic-bezier(.2, .85, .25, 1);
}
.qa-btn:hover {
  border-color: var(--pods-orange);
  color: var(--paint-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.32);
}
.qa-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition-duration: .08s;
}
.qa-btn.primary {
  background: rgba(232,119,34,.16);
  border-color: var(--pods-orange);
  color: var(--pods-orange);
}
.qa-btn.primary:hover {
  background: var(--pods-orange);
  color: #0a0d10;
}
.qa-icon {
  flex-shrink: 0;
  opacity: 0.85;
}
.qa-btn:hover .qa-icon { opacity: 1; }
.qa-arrow { font-family: var(--font-display); font-size: 12px; line-height: 1; }

/* DISPATCH — the primary action. Filled, not ghost: it reads as the one
   thing to do. Industrial language (hazard-stripe edge, dispatch-bay tag,
   stencil arrow) keeps it native to the yard, not a generic SaaS button. */
.qa-dispatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 17px;
  background: linear-gradient(135deg, var(--pods-orange) 0%, var(--pods-orange-bright) 100%);
  border: none;
  color: #0a0d10;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(232, 119, 34, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform .2s cubic-bezier(.2,.85,.25,1), box-shadow .2s cubic-bezier(.2,.85,.25,1), filter .2s;
}
.qa-dispatch::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 7px;
  background: repeating-linear-gradient(-45deg, #0a0d10 0 4px, transparent 4px 8px);
  opacity: 0.45;
}
.qa-dispatch:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 9px 24px rgba(232, 119, 34, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}
.qa-dispatch:active { transform: translateY(0); transition-duration: .08s; }
.qa-dispatch .qad-arrow {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
}
.qa-dispatch .qad-k { white-space: nowrap; }
.qa-dispatch .qad-bay {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 5px;
  background: rgba(10, 13, 16, 0.24);
  border-radius: 1px;
}

@media (max-width: 980px) {
  .quick-actions {
    top: 12px;
    right: 12px;
    gap: 5px;
    max-width: calc(100vw - 24px);
  }
  .qa-btn { padding: 5px 9px; font-size: 9px; letter-spacing: 0.12em; }
  .qa-dispatch { padding: 5px 11px 5px 15px; font-size: 9px; }
}
@media (max-width: 720px) {
  .quick-actions {
    top: 10px;
    right: 10px;
    gap: 4px;
  }
  .qa-btn { padding: 4px 8px; font-size: 8px; letter-spacing: 0.1em; }
  .qa-icon { width: 10px; height: 10px; }
  .qa-dispatch { padding: 4px 9px 4px 13px; font-size: 8px; letter-spacing: 0.1em; }
  .qa-dispatch .qad-bay { display: none; }
}

/* ─────────── CONTAINER PANEL — prev/next nav ─────────── */
.cp-nav {
  position: absolute;
  top: 12px; left: 14px;
  display: flex; gap: 6px;
  z-index: 4;
  pointer-events: auto;
}
.cp-nav-btn,
.cp-nav-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(10,13,16,.7);
  border: 1px solid var(--steel-500);
  color: var(--steel-100);
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: all .22s cubic-bezier(.2, .85, .25, 1);
}
.cp-nav-btn:hover,
.cp-nav-back:hover {
  border-color: var(--pods-orange);
  color: var(--paint-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(232, 119, 34, 0.18) inset;
}
.cp-nav-btn:active,
.cp-nav-back:active {
  transform: translateY(0);
  background: rgba(232, 119, 34, 0.06);
  transition: all 0.06s ease;
}
.cp-nav-btn:focus-visible,
.cp-nav-back:focus-visible {
  outline: 2px solid var(--pods-orange);
  outline-offset: 2px;
}
.cp-nav-meta {
  display: flex; flex-direction: column; gap: 1px; line-height: 1.05;
}
.cp-nav-prev .cp-nav-meta { align-items: flex-start; }
.cp-nav-next .cp-nav-meta { align-items: flex-end; }
.cp-nav-k { font-size: 9px; color: var(--steel-300); letter-spacing: 0.22em; }
.cp-nav-v { font-size: 10px; color: var(--paint-white); letter-spacing: 0.06em; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-nav-arrow { font-family: var(--font-display); font-size: 14px; line-height: 1; }
/* Position indicator — "03 / 08". Sits flush with the nav row so the operator
   always knows where they are inside the manifest sequence. */
.cp-nav-position {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 4px;
  padding: 5px 10px;
  font-family: var(--font-stencil);
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--paint-white);
  background: rgba(10,13,16,.7);
  border: 1px solid var(--steel-500);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cp-pos-cur   { color: var(--pods-orange); font-weight: 700; }
.cp-pos-sep   { color: var(--steel-500); margin: 0 1px; }
.cp-pos-total { color: var(--steel-200); }

@media (max-width: 720px) {
  .cp-nav { top: 10px; left: 8px; gap: 4px; }
  .cp-nav-btn { padding: 4px 8px; }
  .cp-nav-v { display: none; }
  .cp-nav-back .cp-nav-k { display: none; }
  .cp-nav-position { padding: 4px 8px; font-size: 12px; }
}

/* ─────────── SIGNATURE CTA (idle dispatch hail) ─────────── */
.signature-cta {
  position: fixed;
  bottom: 118px;
  right: 22px;
  z-index: 13;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .55s cubic-bezier(.2, .85, .25, 1),
    transform .55s cubic-bezier(.2, .85, .25, 1);
}
.signature-cta.shown { opacity: 1; transform: translateY(0); }
.signature-cta.closing { opacity: 0; transform: translateY(8px); transition: opacity .36s cubic-bezier(.4, 0, .2, 1), transform .36s cubic-bezier(.4, 0, .2, 1); }
.sc-card {
  position: relative;
  width: 320px;
  background: rgba(10, 13, 16, .94);
  border: 1px solid var(--pods-orange);
  border-left-width: 3px;
  padding: 14px 36px 14px 16px;
  font-family: var(--font-mono);
  color: var(--paint-white);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(232,119,34,.2);
}
/* Completion variant — different visual register from the routine conversion
   prompt so "you finished the tour" lands as a moment, not a re-prompt. */
.signature-cta.is-completion .sc-card {
  border-color: var(--terminal-green, #6DFF8C);
  box-shadow: 0 22px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(109,255,140,.32), 0 0 38px rgba(109,255,140,.14);
  transform: translateY(-2px);
}
.signature-cta.is-completion .sc-tag { color: var(--terminal-green, #6DFF8C); }
/* Completion vignette — a quiet radial dim that pulls focus toward the card
   without dimming the whole yard. Pointer-events off so it never intercepts
   interaction; positioned full-viewport but anchored to where the card sits
   (bottom-right) so the falloff is asymmetric and readable. */
.signature-cta.is-completion .sc-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60vw 60vh at calc(100% - 180px) calc(100% - 200px),
    rgba(10, 13, 16, 0) 0%,
    rgba(10, 13, 16, 0.32) 45%,
    rgba(10, 13, 16, 0.55) 100%
  );
  animation: sc-vignette-in .8s cubic-bezier(.2, .85, .25, 1);
}
@keyframes sc-vignette-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sc-tag {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--terminal-green);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.sc-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terminal-green);
  box-shadow: 0 0 8px var(--terminal-green);
  animation: sc-pulse 1.4s ease-in-out infinite;
}
@keyframes sc-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.35); }
}
.sc-line {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.sc-sub {
  font-size: 11px;
  color: var(--steel-200);
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 12px;
}
.sc-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sc-btn {
  flex: 1 1 auto;
  padding: 8px 12px;
  background: rgba(20,28,40,.7);
  border: 1px solid var(--steel-500);
  color: var(--steel-100);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  font-weight: 700; text-transform: uppercase;
  cursor: pointer;
  transition: all .22s cubic-bezier(.2, .85, .25, 1);
}
.sc-btn:hover {
  border-color: var(--pods-orange);
  color: var(--paint-white);
  transform: translateY(-1px);
}
.sc-btn.primary {
  background: var(--pods-orange);
  border-color: var(--pods-orange);
  color: #0a0d10;
}
.sc-btn.primary:hover { background: #ff8a3a; }
.sc-x {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--steel-300);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease;
}
.sc-x:hover { color: var(--paint-white); }
@media (max-width: 720px) {
  /* Sit above the minimap (bottom: 60px + scaled height) and the controls
     toggle, with the quick-actions column squeezed alongside. Full-width on
     phones so the dispatch hail reads cleanly. */
  .signature-cta { bottom: 168px; right: 10px; left: 10px; }
  .sc-card { width: auto; padding: 12px 32px 12px 14px; }
  .sc-line { font-size: 16px; }
  .sc-sub { font-size: 10px; }
}

/* ─────────── CONTACT (BAY-09) — direct routes ─────────── */
.contact-routes-wrap {
  padding: 14px 28px 6px;
  border-top: 1px dashed var(--steel-500);
}
.contact-routes-title {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.28em;
  color: var(--steel-300);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.contact-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 0 0 8px;
}
.contact-route {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(20,28,40,.55);
  border: 1px solid var(--steel-500);
  color: var(--steel-100);
  text-decoration: none;
  font-family: var(--font-mono);
  transition: all .22s cubic-bezier(.2, .85, .25, 1);
}
.contact-route:hover:not(.is-pending) {
  border-color: var(--pods-orange);
  color: var(--paint-white);
  transform: translateY(-1px);
}
.contact-route.is-pending {
  opacity: 0.7;
  cursor: default;
}
.cr-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--blueprint);
}
.cr-meta {
  display: flex; flex-direction: column; flex: 1; min-width: 0;
}
.cr-label {
  font-size: 9px; letter-spacing: 0.22em;
  color: var(--steel-300); text-transform: uppercase;
}
.cr-value {
  font-size: 11px;
  color: var(--paint-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-route.is-pending .cr-value {
  color: var(--warning);
}
.cr-arrow {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--pods-orange);
  margin-left: 4px;
}
.contact-route.is-pending .cr-arrow {
  color: var(--steel-400);
}

/* ─────────── SPRINT 20 ADDITIONS ─────────── */

/* QuickActions — START TOUR variant */
.qa-btn.qa-tour {
  background: linear-gradient(180deg, rgba(91,184,247,.18), rgba(91,184,247,.06));
  border-color: rgba(91,184,247,.55);
  color: var(--blueprint);
}
.qa-btn.qa-tour:hover {
  background: linear-gradient(180deg, rgba(91,184,247,.32), rgba(91,184,247,.12));
  border-color: var(--blueprint);
}

/* OperatorBriefing — guided walkthrough primary button */
.briefing-btn-tour {
  background: linear-gradient(180deg, var(--pods-orange), #c45f17);
  border-color: var(--pods-orange);
  color: #0a0d10;
}
.briefing-btn-hero.secondary {
  background: rgba(91,184,247,.08);
  border-color: rgba(91,184,247,.4);
  color: var(--blueprint);
}
.briefing-btn-hero.secondary:hover {
  background: rgba(91,184,247,.18);
  border-color: var(--blueprint);
}

/* DebugScene — optional skip button */
.debug-skip {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--steel-500);
  color: var(--steel-100);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: all .18s ease;
}
.debug-skip:hover {
  border-color: var(--pods-orange);
  color: var(--pods-orange);
  background: rgba(232,119,34,.08);
}

/* ContainerPanel — dossier title row + logo support. Logo sits as an
   "operator badge" — minimal industrial frame, no rounded corners, the
   brand mark reads cleanly without competing with the title. */
.cp-dossier-titleRow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0;
}
.cp-dossier-logo {
  width: 62px;
  height: 62px;
  object-fit: contain;
  background: rgba(248, 248, 244, 0.96);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 38%, var(--steel-700));
  padding: 8px;
  flex: 0 0 auto;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 -2px 0 0 color-mix(in srgb, var(--cp-accent) 48%, transparent) inset;
}
.panel.panel-deploy .cp-dossier-logo {
  width: 76px;
  height: 76px;
  padding: 10px;
}
@media (max-width: 720px) {
  .cp-dossier-logo { width: 44px; height: 44px; padding: 6px; }
  .panel.panel-deploy .cp-dossier-logo { width: 54px; height: 54px; padding: 7px; }
}

/* HoverTooltip — world-anchored "Open BAY-XX · TITLE" tag.
   Sits well above the container top (JS lifts an extra 32px on top of the
   CSS -100% translate) so the chip never overlaps neighbouring containers'
   stencils. Operator-UI chip language: compact pill, monospaced bay code,
   display-typeface title, outline CTA, soft cinematic motion. */
.hover-tip {
  position: fixed;
  z-index: 70;
  transform: translate(-50%, -100%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background:
    linear-gradient(180deg, rgba(12,22,34,0.96) 0%, rgba(8,17,28,0.94) 100%);
  border: 1px solid color-mix(in srgb, var(--blueprint) 60%, rgba(255,255,255,0.05));
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paint-white);
  max-width: min(340px, 38vw);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.04) inset;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
          backdrop-filter: blur(8px) saturate(1.1);
  animation: ht-pop .32s cubic-bezier(.16, .9, .22, 1);
  will-change: transform, opacity;
}
/* Leader — small triangular notch in the chip border, anchoring the
   tooltip to the container below it. Matches the chip's gradient/blur
   so the chip reads as one continuous operator UI element. */
.hover-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  background: rgba(8,17,28,0.96);
  border-right: 1px solid color-mix(in srgb, var(--blueprint) 60%, rgba(255,255,255,0.05));
  border-bottom: 1px solid color-mix(in srgb, var(--blueprint) 60%, rgba(255,255,255,0.05));
  transform: translateX(-50%) rotate(45deg);
}
.hover-tip .ht-arrow {
  color: var(--pods-orange);
  font-size: 14px;
  line-height: 1;
  margin-right: 2px;
}
.hover-tip .ht-bay {
  color: var(--blueprint);
  font-weight: 700;
}
.hover-tip .ht-sep {
  color: var(--steel-400);
}
.hover-tip .ht-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
}
.hover-tip .ht-cta {
  /* S25 restraint pass — was a solid orange pill which read as a button
     even though hovering is the activation. Outline-only badge keeps the
     affordance present without competing with the title. */
  margin-left: 8px;
  padding: 2px 6px;
  background: transparent;
  color: var(--pods-orange);
  border: 1px solid rgba(232, 119, 34, 0.55);
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
@keyframes ht-pop {
  from { opacity: 0; transform: translate(-50%, -90%) scale(0.96); }
  60%  { opacity: 1; transform: translate(-50%, -102%) scale(1.02); }
  to   { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
@media (hover: none) { .hover-tip { display: none; } }

/* TourMode — guided walkthrough overlay */
.tour {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  padding: 0 16px 64px;
}
.tour-card {
  pointer-events: auto;
  width: min(560px, calc(100vw - 32px));
  background: var(--tour-bg);
  border: 1px solid var(--tour-border);
  border-radius: 6px;
  padding: 18px 20px 16px;
  box-shadow: 0 24px 56px rgba(0,0,0,.55);
  font-family: var(--font-display);
  color: var(--paint-white);
  position: relative;
  animation: tour-rise .26s ease-out;
}
@keyframes tour-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Graceful tour dismissal — Finish / Skip fade the card out instead of
   cutting abruptly. The camera and final-step context are left in place. */
.tour.is-closing { animation: tour-fade-out .24s ease forwards; }
@keyframes tour-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.tour-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.tour-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--pods-orange);
  text-transform: uppercase;
}
.tour-progress {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel-200);
}
.tour-progress .tour-pos { color: var(--paint-white); font-weight: 700; }
.tour-progress .tour-sep { margin: 0 4px; color: var(--steel-400); }
.tour-x {
  background: transparent;
  border: 1px solid var(--steel-500);
  color: var(--steel-100);
  width: 26px;
  height: 26px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.tour-x:hover { color: var(--pods-orange); border-color: var(--pods-orange); }
.tour-title {
  margin: 4px 0 6px;
  font-family: var(--font-stencil);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--paint-white);
}
.tour-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel-100);
  margin-bottom: 14px;
}
.tour-rail {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.tour-pip {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--steel-700);
  transition: background .18s ease;
}
.tour-pip.is-done { background: rgba(91,184,247,.55); }
.tour-pip.is-active { background: var(--pods-orange); }
.tour-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.tour-btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--steel-500);
  color: var(--steel-100);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: all .18s ease;
}
.tour-btn:hover:not(:disabled) {
  border-color: var(--blueprint);
  color: var(--blueprint);
}
.tour-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tour-btn.primary {
  margin-left: auto;
  background: var(--pods-orange);
  border-color: var(--pods-orange);
  color: #0a0d10;
  font-weight: 700;
}
.tour-btn.primary:hover {
  background: var(--pods-orange-bright);
  border-color: var(--pods-orange-bright);
  color: #0a0d10;
}
.tour-btn.tour-resume {
  border-color: rgba(91,184,247,.55);
  color: var(--blueprint);
}
.tour-btn.tour-resume:hover {
  background: rgba(91,184,247,.14);
  border-color: var(--blueprint);
}
@media (max-width: 640px) {
  .tour { padding: 0 12px 24px; }
  .tour-title { font-size: 20px; }
  .tour-body { font-size: 13px; }
  .tour-btn { padding: 8px 10px; font-size: 10px; }
  .tour-btn.primary { margin-left: 0; }
}

/* ───────────────── SPRINT 21 ADDITIONS ───────────────── */

/* ─── Panel: docked side variant ─── */
/* The panel transitions from "centered modal" to "right-side command board"
   so the yard stays visible on the left. Backdrop drops to a quiet shade
   instead of a full blackout, preserving the world. */
.panel.panel-dock {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
.panel.panel-dock .panel-bg {
  background: linear-gradient(
    90deg,
    rgba(8, 17, 28, 0.05) 0%,
    rgba(8, 17, 28, 0.18) 38%,
    rgba(8, 17, 28, 0.45) 100%
  );
}
.panel.panel-dock .panel-card {
  width: min(720px, 62vw);
  max-width: none;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
  border-left: 1px solid rgba(91, 184, 247, 0.32);
  box-shadow: -28px 0 48px rgba(0, 0, 0, 0.45);
  animation: panel-dock-in 0.34s cubic-bezier(0.22, 0.85, 0.3, 1);
}
@keyframes panel-dock-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@media (max-width: 880px) {
  .panel.panel-dock .panel-card {
    width: 100vw;
    border-left: none;
    border-top: 1px solid rgba(91, 184, 247, 0.32);
  }
}

/* ─── Panel: deploy variant — cinematic full-bleed manifest ─── */
/* Replaces the right-side dock for project bays. Reads as a deployed
   container manifest unsealing in front of the operator: full-bleed frame
   with corner brackets, blackout backdrop, longer reveal animation. */
.panel.panel-deploy {
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.panel.panel-deploy .panel-bg {
  background:
    radial-gradient(ellipse at center, rgba(8, 13, 20, 0.74) 0%, rgba(2, 4, 7, 0.94) 100%),
    radial-gradient(circle at 50% 110%, rgba(232, 119, 34, 0.05), transparent 60%);
  -webkit-backdrop-filter: blur(10px) saturate(0.82);
  backdrop-filter: blur(10px) saturate(0.82);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), backdrop-filter .55s ease;
}
/* While the dossier is mounted, dim the rest of the world chrome a touch
   so the manifest reads as the controlled focus. Body class is set by
   app.jsx via the existing panel mount path. Keeps the chrome visible
   but no longer competing for attention. */
body.is-dossier-open .hud,
body.is-dossier-open .terminal-bar,
body.is-dossier-open .filter-bar,
body.is-dossier-open .yard-map,
body.is-dossier-open .minimap,
body.is-dossier-open .quick-dock,
body.is-dossier-open .zone-chip {
  opacity: 0.34;
  filter: blur(0.6px);
  transition: opacity .45s ease, filter .45s ease;
  pointer-events: none;
}
.panel.panel-deploy .panel-card {
  width: min(1480px, 95vw);
  max-width: none;
  height: min(940px, 92vh);
  max-height: 92vh;
  margin: 0;
  border-radius: 2px;
  border: 1px solid rgba(232, 119, 34, 0.22);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(232, 119, 34, 0.08) inset,
    0 0 120px rgba(232, 119, 34, 0.04);
  animation: panel-deploy-in 0.82s cubic-bezier(0.16, 0.84, 0.24, 1);
  display: block;
  background: var(--steel-900);
}
@keyframes panel-deploy-in {
  0%   { transform: translateY(36px) scale(0.982); opacity: 0; clip-path: inset(10% 6% 10% 6%); }
  35%  { opacity: 0.7; }
  72%  { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
  100% { transform: translateY(0) scale(1); opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}
.panel.panel-deploy .panel-card.cp-card-v2 {
  width: min(1480px, 95vw);
  height: min(940px, 92vh);
}
/* Cinematic frame brackets — sit between the backdrop and the card so the
   manifest reads as a deployed object the operator is inspecting. */
.panel-deploy-frame {
  position: absolute;
  inset: 16px;
  pointer-events: none;
  z-index: 101;
  animation: pdf-fade-in 0.9s ease 0.32s both;
}
@keyframes pdf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pdf-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(232, 119, 34, 0.55);
}
.pdf-tl { top: 0;    left: 0;    border-right: none; border-bottom: none; }
.pdf-tr { top: 0;    right: 0;   border-left: none;  border-bottom: none; }
.pdf-bl { bottom: 0; left: 0;    border-right: none; border-top: none; }
.pdf-br { bottom: 0; right: 0;   border-left: none;  border-top: none; }
.pdf-tag {
  position: absolute;
  top: -1px;
  left: 32px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(232, 119, 34, 0.78);
  background: var(--steel-900);
  padding: 0 8px;
  transform: translateY(-50%);
}
@media (max-width: 1100px) {
  .panel.panel-deploy { padding: 12px; }
  .panel.panel-deploy .panel-card,
  .panel.panel-deploy .panel-card.cp-card-v2 {
    width: 96vw;
    height: 92vh;
  }
  .panel-deploy-frame { inset: 8px; }
}
@media (max-width: 720px) {
  .panel.panel-deploy { padding: 6px; }
  .panel.panel-deploy .panel-card,
  .panel.panel-deploy .panel-card.cp-card-v2 {
    width: 100vw;
    height: 100vh;
    border: none;
    border-top: 1px solid rgba(232, 119, 34, 0.32);
  }
  .panel-deploy-frame { display: none; }
}

/* Identity tag line under the dossier title */
.cp-dossier-identity {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cp-accent, var(--pods-orange));
  margin: 4px 0 6px;
  opacity: 0.92;
}

/* Per-bay visual signature — sits as a quiet decorative element on the
   dossier hero so each project has its own DNA. Each signature is pure CSS
   and respects prefers-reduced-motion via the global rule already in place. */
.cp-signature {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  /* S25 restraint pass — signatures sat at 0.55 which was readable but
     slightly competed with the panel content. 0.42 keeps the motion
     legible while letting the copy own the eye. */
  opacity: 0.42;
}
.cp-dossier-hero { position: relative; }
.cp-sig {
  position: absolute;
  inset: 0;
  display: block;
}

/* Cortex — neural net pulse */
.cp-sig-neural::before,
.cp-sig-neural::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(94, 84, 142, 0.6);
  animation: sig-pulse 3.2s ease-in-out infinite;
}
.cp-sig-neural::before { top: 30%; right: 20%; width: 90px; height: 90px; }
.cp-sig-neural::after  { top: 50%; right: 50%; width: 50px; height: 50px; animation-delay: 0.8s; }
@keyframes sig-pulse {
  0%   { transform: scale(0.6); opacity: 0; }
  50%  { transform: scale(1.0); opacity: 0.9; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Potentia — life-score ring */
.cp-sig-pulse {
  background:
    radial-gradient(circle at 70% 50%,
      rgba(27, 73, 101, 0.7) 0,
      rgba(27, 73, 101, 0) 60%);
}
.cp-sig-pulse::after {
  content: "";
  position: absolute;
  top: 36%; right: 28%;
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 2px solid rgba(91, 184, 247, 0.7);
  animation: sig-ring 2.4s ease-in-out infinite;
}
@keyframes sig-ring {
  0%, 100% { transform: scale(0.9); opacity: 0.4; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* MyGUI — scan lines */
.cp-sig-scanlines {
  background: repeating-linear-gradient(
    0deg,
    rgba(11, 110, 79, 0.18) 0px,
    rgba(11, 110, 79, 0.18) 2px,
    transparent 2px,
    transparent 6px
  );
  animation: sig-scan 6s linear infinite;
}
@keyframes sig-scan {
  0%   { background-position-y: 0; }
  100% { background-position-y: 60px; }
}

/* PODS — dispatch sweep */
.cp-sig-dispatch::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    180deg,
    rgba(232, 119, 34, 0) 0%,
    rgba(232, 119, 34, 0.32) 50%,
    rgba(232, 119, 34, 0) 100%
  );
  height: 12px;
  animation: sig-dispatch 3s ease-in-out infinite;
}
@keyframes sig-dispatch {
  0%   { top: 0; opacity: 0; }
  20%  { opacity: 0.9; }
  100% { top: 100%; opacity: 0; }
}

/* YUTH — branching paths */
.cp-sig-branching::before,
.cp-sig-branching::after {
  content: "";
  position: absolute;
  background: rgba(191, 67, 66, 0.55);
}
.cp-sig-branching::before {
  top: 50%; right: 50%;
  width: 60px; height: 1px;
  transform: rotate(-22deg);
}
.cp-sig-branching::after {
  top: 50%; right: 30%;
  width: 80px; height: 1px;
  transform: rotate(28deg);
  animation: sig-branch 4s ease-in-out infinite;
}
@keyframes sig-branch {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Generic signatures — used for chapters / contact / debug so every hero
   still has SOMETHING happening. Kept quiet. */
.cp-sig-yard,
.cp-sig-academic,
.cp-sig-network,
.cp-sig-warning,
.cp-sig-manifest,
.cp-sig-default {
  background:
    repeating-linear-gradient(45deg,
      rgba(91, 184, 247, 0.06) 0,
      rgba(91, 184, 247, 0.06) 6px,
      transparent 6px, transparent 14px);
}
.cp-sig-warning {
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 68, 68, 0.18) 0,
      rgba(255, 68, 68, 0.18) 8px,
      transparent 8px, transparent 16px);
}

/* ─── MISSION BRIEFING ─── */
.mission-briefing {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at center,
    rgba(13, 24, 38, 0.78) 0%,
    rgba(6, 10, 18, 0.96) 70%
  );
  animation: mb-fade-in 0.4s ease-out;
  font-family: var(--font-display);
}
.mission-briefing.is-closing {
  animation: mb-fade-out 0.24s ease-in forwards;
}
@keyframes mb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mb-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; transform: scale(0.985); }
}
.mb-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.mb-stage-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(91,184,247,0.06) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg, rgba(91,184,247,0.06) 1px, transparent 1px) 0 0/64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
}
.mb-stage-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 1200px; height: 1200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(232,119,34,0.07) 0%,
    rgba(91,184,247,0.04) 30%,
    transparent 60%
  );
  filter: blur(40px);
  animation: mb-breathe 6s ease-in-out infinite;
}
@keyframes mb-breathe {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
}
.mb-stage-rail {
  position: absolute;
  bottom: 12vh; left: 50%;
  transform: translateX(-50%);
  width: min(800px, 70vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent, rgba(232,119,34,0.55), transparent
  );
}
.mb-card {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: min(720px, 88vw);
  padding: 0 24px;
  animation: mb-rise 0.6s cubic-bezier(0.22, 0.85, 0.3, 1);
}
@keyframes mb-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mb-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 7px 14px;
  background: rgba(8, 17, 28, 0.72);
  border: 1px solid rgba(91, 184, 247, 0.45);
  border-radius: 4px;
}
.mb-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pods-orange);
}
.mb-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pods-orange);
  box-shadow: 0 0 8px var(--pods-orange);
  animation: mb-pulse 1.6s ease-in-out infinite;
}
@keyframes mb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.84); }
}
.mb-id {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--steel-200);
}
.mb-title {
  font-family: var(--font-stencil);
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1.0;
  color: var(--paint-white);
  margin: 6px 0 22px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
.mb-sub {
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.6;
  color: var(--steel-100);
  margin: 0 auto 6px;
  max-width: 560px;
}
.mb-sub-quiet { color: var(--steel-200); margin-bottom: 32px; }
.mb-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(420px, 80vw);
  padding: 14px 22px;
  background: rgba(8, 17, 28, 0.78);
  border: 1px solid rgba(91, 184, 247, 0.4);
  color: var(--paint-white);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s ease;
}
.mb-btn:hover {
  background: rgba(15, 30, 48, 0.92);
  border-color: var(--blueprint);
  transform: translateY(-1px);
}
.mb-btn.primary {
  background: var(--pods-orange);
  border-color: var(--pods-orange);
  color: #0a0d10;
  font-weight: 700;
}
.mb-btn.primary:hover {
  background: var(--pods-orange-bright);
  border-color: var(--pods-orange-bright);
  color: #0a0d10;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 119, 34, 0.35);
}
.mb-btn.mb-btn-resume {
  border-color: rgba(232, 119, 34, 0.55);
  color: var(--pods-orange);
}
.mb-btn-arrow {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.mb-foot {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--steel-400);
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .mb-card { padding: 0 16px; }
  .mb-meta { gap: 10px; padding: 6px 10px; margin-bottom: 16px; }
  .mb-title { margin-bottom: 14px; }
  .mb-sub { font-size: 13px; }
  .mb-sub-quiet { margin-bottom: 22px; }
  .mb-btn { font-size: 11px; padding: 12px 18px; }
}

/* ─── OPERATOR DOSSIER ─── */
.dossier-panel .panel-card {
  --cp-accent: var(--pods-orange);
}
.dossier-card {
  background: linear-gradient(180deg, rgba(13, 24, 40, 0.98), rgba(8, 17, 28, 0.99));
}
.dossier-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 32px 36px 48px;
  scrollbar-color: var(--steel-500) transparent;
}
.dossier-scroll::-webkit-scrollbar { width: 6px; }
.dossier-scroll::-webkit-scrollbar-thumb { background: var(--steel-500); border-radius: 3px; }

.dossier-hero {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(91, 184, 247, 0.18);
  margin-bottom: 26px;
}
.dossier-tag {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--pods-orange);
  text-transform: uppercase;
  margin-bottom: 18px;
  border: 1px solid rgba(232, 119, 34, 0.32);
  background: rgba(232, 119, 34, 0.035);
  border-radius: 2px;
}
.dossier-tag .dt-label { font-weight: 700; }
.dossier-tag .dt-sep { color: rgba(232, 119, 34, 0.42); }
.dossier-tag .dt-class { color: var(--steel-200); }
.dossier-tag .dt-id { color: var(--blueprint); font-weight: 700; }
@media (max-width: 540px) {
  .dossier-tag {
    font-size: 9px;
    letter-spacing: 0.16em;
    padding: 5px 9px;
  }
  .dossier-tag .dt-sep { display: none; }
}
.dossier-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
}
.dossier-callsign {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--steel-300);
  margin-bottom: 6px;
}
.dossier-h1 {
  font-family: var(--font-stencil);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--paint-white);
  line-height: 1.05;
  margin-bottom: 8px;
}
.dossier-role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel-200);
}
.dossier-mission {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(91, 184, 247, 0.08);
  border: 1px solid rgba(91, 184, 247, 0.32);
  border-radius: 3px;
  min-width: 220px;
}
.dossier-mission-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--blueprint);
  text-transform: uppercase;
}
.dossier-mission-v {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--paint-white);
}
.dossier-headline {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--steel-100);
  max-width: 600px;
}
.dossier-section {
  margin-bottom: 26px;
}
.dossier-h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--steel-100);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.dossier-num {
  color: var(--pods-orange);
  font-size: 12px;
}
.dossier-p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--steel-100);
  max-width: 620px;
}
.dossier-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
}
.dossier-chip {
  padding: 5px 11px;
  background: rgba(8, 17, 28, 0.7);
  border: 1px solid rgba(91, 184, 247, 0.3);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel-100);
  letter-spacing: 0.04em;
}
.dossier-chip-skill {
  border-color: rgba(232, 119, 34, 0.3);
  color: var(--paint-white);
}

/* Other Builds / Archive — quiet logo strip on the operator dossier so
   side projects with no full bay still register as real work. Logos
   sit on a near-white card so brand marks designed for light backgrounds
   read correctly against the steel hue of the dossier. */
.dossier-archive-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-300);
  opacity: 0.72;
  margin: 0 0 12px;
}
.dossier-archive {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.dossier-archive-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(8, 17, 28, 0.55);
  border: 1px solid var(--steel-700);
  border-radius: 3px;
}
.dossier-archive-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(248, 248, 244, 0.94);
  border-radius: 6px;
  border: 1px solid rgba(91, 184, 247, 0.18);
  flex: 0 0 auto;
  padding: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.dossier-archive-logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.dossier-archive-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dossier-archive-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--paint-white);
  letter-spacing: 0.005em;
}
.dossier-archive-note-row {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-300);
  opacity: 0.8;
}
.dossier-projects {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dossier-project {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(8, 17, 28, 0.7);
  border: 1px solid rgba(91, 184, 247, 0.18);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.dossier-project:hover {
  border-color: var(--pods-orange);
  background: rgba(15, 30, 48, 0.85);
  transform: translateX(2px);
}
.dossier-project-bay {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  flex: 0 0 auto;
  min-width: 64px;
}
.dossier-project-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.dossier-project-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--paint-white);
}
.dossier-project-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--steel-300);
  text-transform: uppercase;
}
.dossier-project-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--pods-orange);
  padding: 2px 8px;
  border: 1px solid rgba(232, 119, 34, 0.4);
  border-radius: 2px;
}
.dossier-project-arrow {
  color: var(--steel-300);
  font-size: 16px;
  margin-left: 4px;
}
.dossier-deploy {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dossier-deploy-row {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(91, 184, 247, 0.14);
}
.dossier-deploy-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--blueprint);
  min-width: 140px;
}
.dossier-deploy-v {
  font-size: 13px;
  color: var(--steel-100);
}
.dossier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(91, 184, 247, 0.18);
}
.dossier-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(8, 17, 28, 0.7);
  border: 1px solid rgba(91, 184, 247, 0.4);
  color: var(--paint-white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.18s ease;
}
.dossier-btn:hover {
  background: rgba(15, 30, 48, 0.9);
  border-color: var(--blueprint);
}
.dossier-btn.primary {
  background: var(--pods-orange);
  border-color: var(--pods-orange);
  color: #0a0d10;
  font-weight: 700;
}
.dossier-btn.primary:hover {
  background: var(--pods-orange-bright);
  border-color: var(--pods-orange-bright);
}
.db-arrow { font-size: 14px; opacity: 0.85; }

/* RESUME ACCESS — archival access button with a brief retrieval beat.
   When idle: an offset shipping label, stamped sub-line, scannable bars.
   When accessing: a pulsing scan animation reads as "operator file
   retrieved" before the new tab actually opens. The ~720ms delay sits
   inside the perception of intent, never feels slow. */
.resume-access-btn {
  position: relative;
  overflow: hidden;
  padding: 14px 20px;
  letter-spacing: 0.22em;
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px),
    var(--pods-orange);
  border: 1px solid var(--pods-orange-bright);
  box-shadow:
    0 8px 24px rgba(232, 119, 34, 0.22),
    0 0 0 1px rgba(0,0,0,.15) inset;
}
.resume-access-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform: translateX(-130%);
  pointer-events: none;
  transition: transform 0.6s var(--ease-cinematic, cubic-bezier(.2,.85,.25,1));
}
.resume-access-btn:hover::before { transform: translateX(130%); }
.resume-access-btn.is-accessing {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 14px),
    color-mix(in srgb, var(--pods-orange) 78%, #1a0d04);
  cursor: progress;
}
.resume-access-btn.is-accessing::before {
  transform: translateX(0%);
  animation: rab-scan 0.9s linear infinite;
}
@keyframes rab-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.rab-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #0a0d10;
  box-shadow: 0 0 8px rgba(0,0,0,.6);
  animation: rab-pulse 0.9s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes rab-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.05); }
}
.rab-arrow { letter-spacing: 0.2em; }
@media (prefers-reduced-motion: reduce) {
  .resume-access-btn::before { transition: none; }
  .resume-access-btn.is-accessing::before { animation: none; }
  .rab-pulse { animation: none; }
}

@media (max-width: 640px) {
  .dossier-scroll { padding: 22px 18px 36px; }
  .dossier-row { flex-direction: column; gap: 14px; }
  .dossier-mission { min-width: 0; width: 100%; }
}

/* ─── QUICK ACCESS DOCK ─── */
.quick-dock {
  position: fixed;
  right: 16px;
  bottom: 70px;
  z-index: 80;
  font-family: var(--font-mono);
  pointer-events: auto;
}
@media (max-width: 720px) {
  .quick-dock { right: 12px; bottom: 84px; }
}
.qd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(8, 17, 28, 0.92);
  border: 1px solid rgba(91, 184, 247, 0.42);
  color: var(--blueprint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.qd-toggle:hover {
  background: rgba(15, 30, 48, 0.96);
  border-color: var(--blueprint);
  color: var(--paint-white);
}
.qd-toggle-arrow { color: var(--pods-orange); }
.qd-tray {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 280px;
  background: rgba(8, 17, 28, 0.97);
  border: 1px solid rgba(91, 184, 247, 0.32);
  border-radius: 4px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
  animation: qd-rise 0.22s ease-out;
}
@keyframes qd-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qd-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qd-group-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  color: var(--steel-300);
  padding: 0 8px;
  margin-bottom: 2px;
}
.qd-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--steel-100);
  font-family: var(--font-mono);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.14s ease;
}
.qd-item:hover {
  background: rgba(15, 30, 48, 0.7);
  border-color: rgba(91, 184, 247, 0.3);
}
.qd-item.primary {
  background: rgba(232, 119, 34, 0.12);
  border-color: rgba(232, 119, 34, 0.5);
}
.qd-item.primary:hover {
  background: rgba(232, 119, 34, 0.22);
  border-color: var(--pods-orange);
}
.qd-item-k {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--paint-white);
}
.qd-item.primary .qd-item-k { color: var(--pods-orange); }
.qd-item-v {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--steel-300);
}

/* ─── ZONE CHIP ─── */
.zone-chip {
  position: fixed;
  left: 16px;
  bottom: 318px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: rgba(8, 17, 28, 0.88);
  border: 1px solid var(--zc-color, var(--blueprint));
  border-left-width: 3px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--paint-white);
  pointer-events: none;
}
@media (max-width: 880px) {
  .zone-chip { display: none; }
}
.zc-dot {
  width: 6px; height: 6px;
  background: var(--zc-color, var(--blueprint));
  border-radius: 50%;
  box-shadow: 0 0 6px var(--zc-color, var(--blueprint));
}
.zc-k { color: var(--steel-300); }
.zc-v {
  color: var(--paint-white);
  font-weight: 700;
  letter-spacing: 0.18em;
}
.zc-sub { color: var(--steel-300); font-size: 9px; }

/* ─── TOUR upgrades: narration + vignette ─── */
.tour-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(6, 10, 18, 0.42) 100%
  );
  animation: tour-vig 0.5s ease-out;
}
@keyframes tour-vig {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.tour-narration {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blueprint);
  margin-bottom: 8px;
}
.tour-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blueprint);
  box-shadow: 0 0 6px var(--blueprint);
  animation: mb-pulse 1.6s ease-in-out infinite;
}
.tour-btn.tour-dossier {
  border-color: rgba(232, 119, 34, 0.5);
  color: var(--pods-orange);
}
.tour-btn.tour-dossier:hover {
  background: rgba(232, 119, 34, 0.12);
  border-color: var(--pods-orange);
}

/* ───────────────── SPRINT 22 ADDITIONS ───────────────── */

/* ─── MISSION BRIEFING — hierarchy rework ─── */
/* Primary action is dominant: larger padding, accent fill, hint label above
   the action, gentle attention pulse on the arrow. Secondary is the same
   width but quieter (outline + hover). Tertiary collapses to text links. */
.mb-btn-primary {
  flex-direction: column;
  align-items: stretch;
  width: min(460px, 84vw);
  padding: 18px 24px;
  gap: 6px;
  text-align: left;
}
.mb-btn-primary .mb-btn-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(10, 13, 16, 0.7);
  text-transform: uppercase;
}
.mb-btn-primary .mb-btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.mb-btn-primary .mb-btn-arrow {
  font-size: 20px;
  animation: mb-arrow-nudge 2.6s ease-in-out infinite;
}
@keyframes mb-arrow-nudge {
  0%, 70%, 100% { transform: translateX(0); }
  85%          { transform: translateX(4px); }
}
.mb-btn-secondary {
  width: min(460px, 84vw);
  background: transparent;
  border-color: rgba(91, 184, 247, 0.42);
  color: var(--steel-100);
}
.mb-btn-secondary:hover {
  background: rgba(15, 30, 48, 0.7);
  border-color: var(--blueprint);
  color: var(--paint-white);
}
.mb-tertiary {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--steel-300);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.mb-link {
  background: transparent;
  border: 0;
  padding: 4px 2px;
  color: var(--steel-200);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease;
}
.mb-link:hover { color: var(--pods-orange); }
.mb-link-sep { color: var(--steel-500); }

/* ─── HUMAN NOTE — quiet hand-written marginalia ─── */
.cp-dossier-human {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--steel-100);
  font-style: italic;
  max-width: 580px;
  padding-left: 12px;
  border-left: 2px solid rgba(232, 119, 34, 0.55);
}
.cp-human-mark {
  display: inline-block;
  margin-right: 8px;
  color: var(--pods-orange);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ─── SAFE IMAGE — fade-in reveal ─── */
.safe-img {
  opacity: 0;
  transform: scale(1.012);
  transition: opacity 0.45s ease, transform 0.6s ease;
}
.safe-img.is-loaded {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .safe-img { transition: none; transform: none; }
}

/* ─── OPERATOR DOSSIER — DEPLOYMENT TIMELINE ─── */
.dossier-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.dossier-tl-row {
  display: grid;
  grid-template-columns: 64px 18px 1fr;
  align-items: flex-start;
  gap: 0;
  padding: 10px 0;
  position: relative;
}
.dossier-tl-year {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--pods-orange);
  padding-top: 1px;
}
.dossier-tl-year.is-cont { color: transparent; }
.dossier-tl-rail {
  position: relative;
  width: 18px;
  align-self: stretch;
}
.dossier-tl-rail::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: -20px;
  width: 1px;
  background: linear-gradient(180deg, rgba(232, 119, 34, 0.5), rgba(91, 184, 247, 0.25));
}
.dossier-tl-rail::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--steel-800);
  border: 2px solid var(--pods-orange);
}
.dossier-tl-row:last-child .dossier-tl-rail::before { display: none; }
.dossier-tl-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
}
.dossier-tl-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--paint-white);
  letter-spacing: 0.02em;
}
.dossier-tl-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--steel-200);
}
@media (max-width: 640px) {
  .dossier-tl-row {
    grid-template-columns: 50px 14px 1fr;
  }
}

/* ─── CINEMATIC MODE — soften chrome during tour ─── */
/* While the tour is active the host sets `body.is-cinematic`. CSS uses that
   to dim the non-essential surfaces so the tour card and the world own the
   eye. Pointer events stay disabled on the dimmed surfaces so the operator
   doesn't accidentally trigger something they can't see clearly. */
body.is-cinematic .quick-actions,
body.is-cinematic .quick-dock,
body.is-cinematic .filter-bar,
body.is-cinematic .minimap,
body.is-cinematic .hover-tip,
body.is-cinematic .bot-prompt,
body.is-cinematic .signature-cta,
body.is-cinematic .filter-toast,
body.is-cinematic .controls-hint,
body.is-cinematic .controls-dock,
body.is-cinematic .zone-chip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
/* HUD operator card and identity stay — the visitor is part of the moment,
   but identity grounding remains. The HUD inner panels still soften. */
body.is-cinematic .hud-corner.tr,
body.is-cinematic .hud-corner.bl,
body.is-cinematic .hud-corner.br {
  opacity: 0.35;
  transition: opacity 0.4s ease;
}
body.is-cinematic .yard-map { opacity: 0; pointer-events: none; }

/* ─── BUILD REVEAL TOAST ─── */
.build-reveal {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -8px);
  z-index: 220;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.build-reveal.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}
.br-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 28px;
  background: rgba(8, 17, 28, 0.94);
  border: 1px solid var(--pods-orange);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(232, 119, 34, 0.15) inset,
    0 18px 36px rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono);
  text-align: center;
}
.br-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--pods-orange);
}
.br-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pods-orange);
  box-shadow: 0 0 6px var(--pods-orange);
  animation: mb-pulse 1.4s ease-in-out infinite;
}
.br-line {
  font-family: var(--font-stencil);
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--paint-white);
  margin-top: 2px;
}
.br-sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--steel-200);
}
@media (max-width: 640px) {
  .build-reveal { top: 14%; width: 92vw; }
  .br-frame { padding: 10px 16px; }
  .br-line { font-size: 18px; }
}

/* ─── FINAL MOMENT VIGNETTE ─── */
.final-moment {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  animation: fm-in 0.6s ease-out;
}
@keyframes fm-in { from { opacity: 0; } to { opacity: 1; } }
/* Graceful exit — the final-moment vignette fades instead of hard-unmounting
   (a darkening-to-clear pop was the abrupt "cut" felt on tour finish). */
.final-moment.is-closing { animation: fm-out .34s ease forwards; }
@keyframes fm-out { from { opacity: 1; } to { opacity: 0; } }
.fm-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at center,
      transparent 36%,
      rgba(232, 119, 34, 0.05) 60%,
      rgba(6, 10, 18, 0.46) 100%
    );
}
.fm-line {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  width: min(640px, 88vw);
}
.fm-narration {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--pods-orange);
  text-transform: uppercase;
  opacity: 0.86;
}
.fm-tagline {
  font-family: var(--font-stencil);
  font-size: clamp(28px, 5vw, 52px);
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--paint-white);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
@media (max-width: 640px) {
  .fm-line { top: 12%; }
}

/* ─── MISSION BRIEFING — subtle ambient world life behind the card ─── */
/* Two additional, purely decorative layers on the briefing backdrop. They
   live inside `.mb-stage` already (grid + glow + rail). Adding distant
   floodlight sweep + dispatch flicker as zero-cost CSS so the world reads
   as operational even before the visitor sees the 3D yard. */
.mb-stage::before,
.mb-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}
.mb-stage::before {
  /* Slow floodlight sweep across the lower third — the "yard is being lit" beat. */
  left: -10%;
  bottom: 22%;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 119, 34, 0.05) 30%,
    rgba(232, 119, 34, 0.55) 50%,
    rgba(232, 119, 34, 0.05) 70%,
    transparent 100%);
  filter: blur(6px);
  animation: mb-flood 11s ease-in-out infinite;
  opacity: 0.7;
}
@keyframes mb-flood {
  0%   { transform: translateX(-30%); opacity: 0; }
  20%  { opacity: 0.85; }
  60%  { opacity: 0.5; }
  100% { transform: translateX(40%); opacity: 0; }
}
.mb-stage::after {
  /* Dispatch flicker — single faint blue beacon top-right that pulses irregularly. */
  top: 18%;
  right: 12%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(91, 184, 247, 0.85);
  box-shadow: 0 0 12px rgba(91, 184, 247, 0.6);
  animation: mb-beacon 5.2s ease-in-out infinite;
}
@keyframes mb-beacon {
  0%, 100% { opacity: 0.2; }
  6%       { opacity: 0.95; }
  10%      { opacity: 0.3; }
  16%      { opacity: 0.9; }
  22%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-stage::before,
  .mb-stage::after { animation: none; }
}

/* ─── PROJECT PERSONALITY — strengthened motion language ─── */
/* Each project's signature already lives on the dossier hero. Sprint 22
   makes the motion language a touch more distinct so each project is
   recognizable from its decoration alone. Kept gentle to respect perf and
   prefers-reduced-motion. */

/* Cortex — add a second pulse + a connecting line so the neural net reads
   as a network, not a single ring. */
.cp-sig-neural::before { animation-duration: 3.6s; }
.cp-sig-neural::after  { animation-duration: 4.2s; animation-delay: 1.2s; }

/* Potentia — slow up/down "heartbeat" layered over the ring so the biometric
   rhythm reads physically. */
.cp-sig-pulse::before {
  content: "";
  position: absolute;
  top: 36%; right: 28%;
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 1px dashed rgba(91, 184, 247, 0.4);
  animation: sig-ring 3.8s ease-in-out infinite reverse;
}

/* MyGUI — UI scan bar that moves perpendicular to the scanlines so the
   automation routing feels alive. */
.cp-sig-scanlines::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11, 110, 79, 0.7), transparent);
  animation: sig-bar 3.4s ease-in-out infinite;
}
@keyframes sig-bar {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(48px); opacity: 1; }
}

/* PODS — overlay a second sweep, offset so the dispatch signal feels
   continuous rather than periodic. */
.cp-sig-dispatch::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 100%; height: 8px;
  background: linear-gradient(180deg,
    transparent, rgba(232, 119, 34, 0.22), transparent);
  animation: sig-dispatch 3.6s ease-in-out infinite;
  animation-delay: 1.4s;
}

/* YUTH — give the existing ::after a slower counterpoint so the two
   branches breathe out of phase (multi-path routing rather than one line). */
.cp-sig-branching::before { animation: sig-branch 5.2s ease-in-out infinite; animation-delay: 0.4s; }

/* ───────────────── SPRINT 23 ADDITIONS ───────────────── */

/* ─── PANEL EVIDENCE STRIP ───
   Small operations-log under the human note. Reads as live telemetry from
   the project (e.g. "WORKFLOW ROUTING · LIVE"). Designed to look like
   captured signal, not marketing copy. */
.cp-evidence {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 580px;
}
/* HORIZONTAL EVIDENCE — operations chips that read as a single live ticker
   strip across the bottom of the hero copy. Wraps gracefully and breathes
   with the title rather than stacking vertically. */
.cp-evidence-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  max-width: none;
  margin-top: 18px;
}
.cp-evidence-inline .cp-evidence-row {
  background: rgba(8, 17, 28, 0.65);
  border-left-width: 2px;
  padding: 6px 12px 6px 10px;
}
.cp-evidence-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: rgba(8, 17, 28, 0.55);
  border-left: 2px solid var(--cp-accent, var(--blueprint));
  border-radius: 0 2px 2px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--steel-100);
  text-transform: uppercase;
}
.cp-evidence-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terminal-green);
  box-shadow: 0 0 6px rgba(109, 255, 140, 0.65);
  flex: 0 0 auto;
}
.cp-evidence-row:nth-child(2) .cp-evidence-dot {
  background: var(--blueprint);
  box-shadow: 0 0 6px rgba(91, 184, 247, 0.6);
}
.cp-evidence-row:nth-child(3) .cp-evidence-dot {
  background: var(--pods-orange);
  box-shadow: 0 0 6px rgba(232, 119, 34, 0.5);
}
.cp-evidence-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .cp-evidence-row { font-size: 9.5px; padding: 4px 8px; }
}

/* ─── OPERATOR DOSSIER — HEADSHOT + MISSION RECORD ─── */
.dossier-portrait-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}
.dossier-portrait {
  position: relative;
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(91,184,247,0.12), rgba(8,17,28,0.6));
  box-shadow: 0 0 0 1px rgba(91, 184, 247, 0.4);
}
.dossier-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dossier-portrait-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(91, 184, 247, 0.32);
  /* corner ticks so the portrait reads as an operator ID card, not a stock
     avatar — kept thin enough to disappear at low DPI. */
  background:
    linear-gradient(90deg, var(--pods-orange) 8px, transparent 8px 100%, var(--pods-orange) 100%) top left / 12px 1px no-repeat,
    linear-gradient(0deg, var(--pods-orange) 8px, transparent 8px 100%, var(--pods-orange) 100%) top left / 1px 12px no-repeat,
    linear-gradient(90deg, var(--pods-orange) 8px, transparent 8px 100%, var(--pods-orange) 100%) top right / 12px 1px no-repeat,
    linear-gradient(0deg, var(--pods-orange) 8px, transparent 8px 100%, var(--pods-orange) 100%) top right / 1px 12px no-repeat;
}
@media (max-width: 640px) {
  .dossier-portrait { width: 64px; height: 64px; }
  .dossier-portrait-wrap { gap: 12px; }
}

.dossier-record {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding: 6px 12px;
  background: rgba(8, 17, 28, 0.6);
  border-left: 2px solid var(--pods-orange);
  border-radius: 0 2px 2px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.dossier-record-k {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--pods-orange);
  text-transform: uppercase;
}
.dossier-record-v {
  color: var(--steel-100);
}

/* ─── VISITED-BAY STATE — environmental memory ─── */
/* Yard Index (HUD bottom strip) — visited bays get a quiet green tick so
   returning visitors see what they've already opened. Kept very subtle so
   it never competes with the active/hovered states. */
.yard-map .bay.visited:not(.active):not(.hovered) {
  position: relative;
}
.yard-map .bay.visited:not(.active):not(.hovered)::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--terminal-green);
  opacity: 0.75;
  box-shadow: 0 0 4px rgba(109, 255, 140, 0.55);
}

/* ─── MOBILE POLISH — operator tablet readability ─── */
@media (max-width: 720px) {
  /* Tighter mission briefing on small screens — keep the primary
     button readable, drop redundant whitespace. */
  .mb-meta { flex-wrap: wrap; }
  .mb-sub { padding: 0 8px; }
  .mb-btn-primary { padding: 14px 18px; }
  .mb-btn-primary .mb-btn-hint { font-size: 8px; }
  .mb-btn-primary .mb-btn-row { font-size: 12px; }
  /* Operator Dossier on touch — scroll padding reduced so the deployment
     timeline fills the viewport, headshot inline with name. */
  .dossier-scroll { padding-top: 18px; }
  .dossier-row { flex-direction: column; align-items: flex-start; }
  .dossier-mission { width: 100%; }
  /* Quick dock slim row on tablets so it never crowds the QuickActions. */
  .qd-toggle { padding: 8px 12px; font-size: 9px; }
  .qd-tray { width: min(86vw, 320px); }
}

/* ───────────────── SPRINT 24 ADDITIONS ───────────────── */

/* ─── PANEL · PINNED MANIFEST TREATMENT ─── */
/* CpVisual now reads as a tacked-up operational document. Tape marks are
   CSS pseudos so we don't add any assets; manifest strip is a tight ID row
   at the top so the image feels filed, not floated. */
.cp-manifest {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(91, 184, 247, 0.18);
  background: rgba(8, 17, 28, 0.6);
}
.cp-manifest-tape {
  position: absolute;
  z-index: 4;
  width: 38px;
  height: 14px;
  background: rgba(232, 119, 34, 0.28);
  border: 1px solid rgba(232, 119, 34, 0.45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.cp-tape-tl {
  top: -7px;
  left: 22px;
  transform: rotate(-8deg);
}
.cp-tape-tr {
  top: -7px;
  right: 22px;
  transform: rotate(7deg);
}
.cp-manifest-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  background: rgba(6, 12, 20, 0.92);
  border-bottom: 1px solid rgba(91, 184, 247, 0.32);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-200);
  pointer-events: none;
}
.cp-manifest-strip-k {
  color: var(--pods-orange);
  font-weight: 700;
}
.cp-manifest-strip-v {
  color: var(--paint-white);
  font-weight: 700;
  letter-spacing: 0.18em;
}
.cp-manifest-strip-bars {
  flex: 1;
  text-align: center;
  font-family: 'Libre Barcode 39', var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--steel-300);
  opacity: 0.7;
  overflow: hidden;
}
.cp-manifest-strip-id {
  color: var(--steel-300);
  font-size: 8px;
  letter-spacing: 0.18em;
}
/* Push the existing visual content down so the manifest strip doesn't overlap */
.cp-manifest .cp-visual-img,
.cp-manifest .cp-visual-art {
  margin-top: 22px;
}
@media (max-width: 720px) {
  .cp-manifest-strip { padding: 4px 10px; font-size: 8px; }
  .cp-manifest-strip-bars { display: none; }
  .cp-manifest-tape { display: none; }
  .cp-manifest .cp-visual-img,
  .cp-manifest .cp-visual-art { margin-top: 18px; }
}

/* ─── PANEL · SECTION MODULARITY ─── */
/* Each CpSection already has a numbered head + rule. S24 adds a quiet
   separator strip BETWEEN sections so the document reads as filed blocks
   rather than continuous webpage content. Achieved via :not(:first-child)
   margin + a left rail of dashes so each section reads as a deployment rail
   row. Kept subtle — never a visible divider line. */
.cp-section + .cp-section {
  margin-top: 22px;
  padding-top: 18px;
  background-image: linear-gradient(
    90deg,
    rgba(91, 184, 247, 0.18) 0,
    rgba(91, 184, 247, 0.18) 6px,
    transparent 6px,
    transparent 12px);
  background-repeat: repeat-x;
  background-size: 12px 1px;
  background-position: top left;
}
.cp-section-head {
  /* tightened — was visually loose in some browsers at higher dpr */
  padding-bottom: 6px;
}

/* ─── RESTRAINT PASS · S24 ─── */
/* Slow the mission briefing floodlight sweep further so it reads as ambient
   atmosphere instead of motion. Beacon flicker quieted too — quieter beats
   per cycle. */
@keyframes mb-flood {
  0%   { transform: translateX(-30%); opacity: 0; }
  20%  { opacity: 0.55; }
  60%  { opacity: 0.32; }
  100% { transform: translateX(40%); opacity: 0; }
}
.mb-stage::before {
  animation-duration: 22s;
  opacity: 0.5;
}
.mb-stage::after {
  animation-duration: 7.8s;
}
@keyframes mb-beacon {
  0%, 100% { opacity: 0.18; }
  8%       { opacity: 0.65; }
  14%      { opacity: 0.22; }
  22%      { opacity: 0.55; }
  30%      { opacity: 0.24; }
}
/* Idle-mode FilterBar — softens when not interacted with so the overview
   reads as composition first, UI second. Hover restores full opacity. */
.filter-bar:not(.is-active):not(:hover) {
  opacity: 0.72;
  transition: opacity 0.5s ease;
}
.filter-bar:hover { opacity: 1; }
/* Quiet Yard Index — was full opacity, now drifts toward idle on non-hover */
.yard-map:not(:hover) {
  opacity: 0.86;
  transition: opacity 0.4s ease;
}

/* ─── MOBILE · OPERATOR TABLET ─── */
@media (max-width: 720px) {
  /* Hide the minimap entirely on phones — the tablet view doesn't need a
     top-down map. Already gated, reinforced here. */
  .minimap { display: none !important; }
  /* Yard Index becomes a compact horizontal scroll strip rather than a grid */
  .yard-map {
    bottom: 12px;
    right: 12px;
    left: 12px;
    padding: 6px 10px;
  }
  /* Tighter HUD operator card so it doesn't crowd the mission briefing */
  .operator-card { padding: 8px 10px; }
  .op-name { font-size: 12px; }
  /* Dossier portrait row stacks; mission strip becomes full-width */
  .dossier-portrait-wrap { width: 100%; }
  .dossier-headline { font-size: 13px; }
  /* Quick dock pinned to bottom edge so it never collides with the HUD */
  .quick-dock {
    bottom: 72px;
  }
  .quick-dock.is-open .qd-tray {
    width: min(92vw, 320px);
  }
  /* Make sure the panel-dock card slides up from the bottom on mobile,
     not in from the right — feels native on touch. */
  .panel.panel-dock .panel-card {
    border-top: 1px solid rgba(91, 184, 247, 0.4);
    border-left: none;
    animation: panel-dock-in-mobile 0.34s cubic-bezier(0.22, 0.85, 0.3, 1);
  }
  @keyframes panel-dock-in-mobile {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}
@media (max-width: 480px) {
  /* Tighter cinematic moments on phones */
  .build-reveal { top: 12%; }
  .fm-tagline { font-size: 26px; }
  .fm-line { top: 10%; padding: 0 16px; }
}


/* ───────────────── SPRINT 25 ADDITIONS ───────────────── */

/* Global focus ring — keyboard accessibility for every actionable surface
   that doesn't already declare its own. Uses :focus-visible so mouse users
   never see the ring, only keyboard navigation does. Orange to match the
   accent without competing with hover states. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--pods-orange);
  outline-offset: 3px;
  border-radius: 2px;
}
.mb-btn:focus-visible,
.qd-toggle:focus-visible,
.qd-item:focus-visible,
.tour-btn:focus-visible,
.dossier-btn:focus-visible,
.qa-btn:focus-visible {
  outline-offset: 4px;
}

/* ───────────────── SPRINT 26 ADDITIONS ───────────────── */

/* Dossier hero on phones — stack is dense (bay line / title / identity tag /
   summary / human note / evidence). Slight type-scale + spacing tightening
   so the hero clears the viewport without making the visitor scroll three
   times to reach the case-study body. */
@media (max-width: 720px) {
  .cp-dossier-title { font-size: 28px; line-height: 1.05; }
  .cp-dossier-identity { font-size: 10px; letter-spacing: 0.18em; }
  .cp-dossier-summary { font-size: 13px; line-height: 1.5; }
  .cp-dossier-human { font-size: 11px; padding-left: 10px; }
  .cp-evidence-row { font-size: 9.5px; padding: 4px 8px; letter-spacing: 0.14em; }
  .cp-bay-line { font-size: 10px; flex-wrap: wrap; gap: 6px; }
}

/* Phone-tight ContainerPanel padding so the docked sheet uses the full
   viewport efficiently instead of feeling boxed-in. */
@media (max-width: 720px) {
  .panel.panel-dock .panel-card .cp-scroll { padding: 14px 16px 28px; }
  .panel.panel-dock .panel-card .cp-nav { padding: 10px 12px; }
}

/* ─────────────────────────────────────────────────────────────────────
   CpDiagram — small per-signature SVG schematic in the intel column.
   Each pod gets a custom diagram that reads as an operational system
   map: graph for Cortex, flow for PODS, scanlines for MyGUI, etc.
   Strokes use cp-accent; animations are slow + observed, never loud.
   ───────────────────────────────────────────────────────────────────── */
.cp-diagram-card .cp-aside-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cp-diagram-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--steel-300);
  padding: 2px 6px;
  border: 1px solid var(--steel-700);
  background: rgba(8,11,14,.5);
}
.cp-diagram-body {
  position: relative;
  padding: 10px 12px 12px;
  background:
    radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--cp-accent) 7%, transparent) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 14px);
}
.cp-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 120;
  color: var(--cp-accent, var(--pods-orange));
  overflow: visible;
}

/* Common primitives shared across diagram types */
.cp-svg-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  opacity: 0.5;
  animation: cp-diag-link-pulse 4.6s ease-in-out infinite;
}
.cp-svg-node {
  fill: rgba(15, 20, 26, 0.85);
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: 0.85;
  animation: cp-diag-node-breath 4.2s ease-in-out infinite;
}
.cp-svg-node.is-core {
  fill: color-mix(in srgb, currentColor 30%, rgba(8,11,14,0.9));
  stroke-width: 1.3;
  filter: drop-shadow(0 0 4px currentColor);
}
.cp-svg-axis {
  stroke: var(--steel-700);
  stroke-width: 0.8;
}
.cp-svg-track {
  stroke: var(--steel-700);
  stroke-width: 1.2;
}
.cp-svg-track-dash {
  stroke: currentColor;
  stroke-width: 0.9;
  stroke-dasharray: 4 6;
  opacity: 0.7;
  animation: cp-diag-dash 3.8s linear infinite;
}
@keyframes cp-diag-link-pulse {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 0.78; }
}
@keyframes cp-diag-node-breath {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}
@keyframes cp-diag-dash {
  to { stroke-dashoffset: -40; }
}

/* DISPATCH flow */
.cp-svg-stop {
  fill: rgba(15, 20, 26, 0.85);
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: 0.85;
}
.cp-svg-stop-label {
  font-family: var(--font-mono);
  font-size: 7px;
  fill: var(--steel-300);
  text-anchor: middle;
  letter-spacing: 0.05em;
}
.cp-svg-shuttle {
  fill: currentColor;
  filter: drop-shadow(0 0 5px currentColor);
  animation: cp-diag-shuttle 5.4s cubic-bezier(0.6, 0.05, 0.4, 0.95) infinite;
}
@keyframes cp-diag-shuttle {
  0%   { transform: translateX(0);     opacity: 0.95; }
  90%  { transform: translateX(160px); opacity: 0.95; }
  92%  { opacity: 0; }
  100% { transform: translateX(0);     opacity: 0; }
}

/* SCANLINES feed */
.cp-svg-scanline {
  stroke: currentColor;
  stroke-width: 0.8;
  opacity: 0.55;
  stroke-dasharray: 36 12;
  animation: cp-diag-scan 4s linear infinite;
}
@keyframes cp-diag-scan {
  to { stroke-dashoffset: -48; }
}

/* NETWORK hub */
.cp-svg-network .cp-svg-link { stroke-width: 0.9; }

/* BRANCHING tree */
.cp-svg-leaf {
  fill: rgba(15, 20, 26, 0.85);
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: 0.85;
  animation: cp-diag-node-breath 4.2s ease-in-out infinite;
}

/* PULSE wave */
.cp-svg-wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cp-svg-pulse-dot {
  fill: currentColor;
  filter: drop-shadow(0 0 4px currentColor);
  animation: cp-diag-pulse 4.2s linear infinite;
}
@keyframes cp-diag-pulse {
  0%   { transform: translateX(0);     opacity: 0; }
  6%   { opacity: 1; }
  92%  { transform: translateX(200px); opacity: 1; }
  100% { transform: translateX(200px); opacity: 0; }
}

/* ACADEMIC progression */
.cp-svg-tick {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.6;
}
.cp-svg-tick-label {
  font-family: var(--font-mono);
  font-size: 6.5px;
  fill: var(--steel-300);
  text-anchor: middle;
  letter-spacing: 0.05em;
}

/* YARD map (intro / lab / contact) */
.cp-svg-zone {
  fill: rgba(15, 20, 26, 0.7);
  stroke: var(--steel-700);
  stroke-width: 0.8;
  animation: cp-diag-zone-breath 5.8s ease-in-out infinite;
}
.cp-svg-zone.is-build {
  stroke: currentColor;
  stroke-width: 1.1;
}
.cp-svg-zone-label {
  font-family: var(--font-mono);
  font-size: 7px;
  fill: var(--steel-300);
  text-anchor: middle;
  letter-spacing: 0.05em;
}
@keyframes cp-diag-zone-breath {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-svg-link, .cp-svg-node, .cp-svg-leaf, .cp-svg-track-dash,
  .cp-svg-scanline, .cp-svg-shuttle, .cp-svg-pulse-dot, .cp-svg-zone,
  .cp-svg-tick {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   OPS CONSOLE — dense operational widget anchoring the panel between
   the visual block and the long-form sections. Replaces the dead-space
   the procedural-art card used to occupy with three real modules:
   live signal cells, terminal-style system feed, and a deployment chip
   strip. Reads as the system the project ACTUALLY runs on, not a card.
   ───────────────────────────────────────────────────────────────────── */
.cp-ops-console {
  position: relative;
  padding: 22px 64px 26px;
  background:
    linear-gradient(180deg, rgba(8,11,14,.96) 0%, rgba(10,13,16,.92) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 18px);
  border-bottom: 1px solid var(--steel-700);
  overflow: hidden;
}

/* Slow vertical signal-sweep — a faint accent-colored beam that drifts
   left-to-right across the console once every ~14s. Reads as a system
   refresh pulse without competing with the content. */
.cp-ops-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28%;
  left: -32%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--cp-accent) 8%, transparent) 40%,
    color-mix(in srgb, var(--cp-accent) 14%, transparent) 50%,
    color-mix(in srgb, var(--cp-accent) 8%, transparent) 60%,
    transparent 100%);
  filter: blur(8px);
  animation: cp-ops-sweep 14s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.55;
}
@keyframes cp-ops-sweep {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(520%); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-ops-sweep { animation: none; opacity: 0; }
}
.panel.panel-deploy .cp-ops-console {
  padding: 24px 96px 28px;
}
@media (max-width: 980px) {
  .cp-ops-console { padding: 18px 28px 22px; }
  .panel.panel-deploy .cp-ops-console { padding: 18px 28px 22px; }
}
.cp-ops-console::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cp-accent) 12%, transparent), transparent 35%);
}
.cp-ops-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  grid-auto-rows: min-content;
  gap: 14px;
  max-width: 1380px;
  margin: 0 auto;
}
.cp-ops-block-signal { grid-column: 1; grid-row: 1; }
.cp-ops-block-feed   { grid-column: 2; grid-row: 1; }
.cp-ops-block-stack  { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 820px) {
  .cp-ops-grid { grid-template-columns: 1fr; }
  .cp-ops-block-signal,
  .cp-ops-block-feed,
  .cp-ops-block-stack { grid-column: 1; grid-row: auto; }
}
.cp-ops-block {
  border: 1px solid var(--steel-700);
  background:
    linear-gradient(180deg, rgba(15,19,24,.86), rgba(10,13,16,.92));
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.025) inset;
  overflow: hidden;
}
.cp-ops-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(20,25,32,.85), rgba(12,16,20,.85)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 10px);
  border-bottom: 1px dashed var(--steel-700);
}
.cp-ops-head-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cp-accent, var(--pods-orange));
  opacity: 0.95;
  font-weight: 600;
}
.cp-ops-head-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel-300);
}
.cp-ops-head-bars {
  letter-spacing: .12em;
  color: color-mix(in srgb, var(--cp-accent) 80%, var(--steel-200));
  opacity: 0.85;
}
.cp-ops-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cp-accent, var(--pods-orange));
  box-shadow: 0 0 9px var(--cp-accent, var(--pods-orange));
  animation: cp-ops-pulse 2.6s ease-in-out infinite;
}
@keyframes cp-ops-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* LIVE SIGNAL — key/value cells styled like a status panel */
.cp-ops-cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--steel-700);
  padding: 1px;
}
.cp-ops-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(8,11,14,.78);
  min-height: 56px;
  animation: cp-ops-cell-in 0.55s var(--ease-cinematic) backwards;
}
@keyframes cp-ops-cell-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@media (prefers-reduced-motion: reduce) {
  .cp-ops-cell { animation: none; }
}
.cp-ops-cell-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cp-accent) 25%, var(--steel-300));
  font-weight: 600;
}
.cp-ops-cell-v {
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--paint-white);
  line-height: 1.32;
  font-weight: 600;
}

/* SYSTEM FEED — terminal-style tail. The newest row gets a brief slide
   + opacity entrance so the feed reads as actively ticking. Older rows
   fade slightly to give the tail visual weight. */
.cp-ops-feed-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}
.cp-ops-feed-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--steel-100);
  border-bottom: 1px dashed color-mix(in srgb, var(--steel-700) 60%, transparent);
  transition: opacity 0.4s ease-out;
}
.cp-ops-feed-row:nth-child(1) { opacity: 0.55; }
.cp-ops-feed-row:nth-child(2) { opacity: 0.78; }
.cp-ops-feed-row:nth-child(3) { opacity: 0.92; }
.cp-ops-feed-row:nth-child(4) { opacity: 1; }
.cp-ops-feed-row.is-newest {
  animation: cp-ops-feed-new 0.5s var(--ease-cinematic);
}
@keyframes cp-ops-feed-new {
  0%   { opacity: 0; transform: translateY(-3px); }
  35%  { opacity: 0.55; }
  100% { opacity: 1; transform: translateY(0);   }
}
@media (prefers-reduced-motion: reduce) {
  .cp-ops-feed-row.is-newest { animation: none; }
}
.cp-ops-feed-row:last-child { border-bottom: 0; }
.cp-ops-feed-time {
  color: var(--steel-300);
  font-size: 10px;
  letter-spacing: .08em;
  opacity: 0.85;
}
.cp-ops-feed-arrow {
  color: var(--cp-accent, var(--pods-orange));
  opacity: 0.7;
}
.cp-ops-feed-line {
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-ops-feed-cursor .cp-ops-feed-line { color: var(--steel-300); opacity: .8; }
.cp-ops-cursor {
  display: inline-block;
  color: var(--cp-accent, var(--pods-orange));
  animation: cp-ops-blink 1.05s steps(2, start) infinite;
  font-weight: 700;
}
@keyframes cp-ops-blink {
  0%, 50% { opacity: 0.95; }
  51%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-ops-cursor { animation: none; opacity: 0.7; }
  .cp-ops-pulse  { animation: none; opacity: 0.7; }
  .cp-plate-pulse { animation: none; opacity: 0.7; }
}

/* DEPLOYMENT — tech chip strip */
.cp-ops-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px 14px;
}
.cp-ops-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: rgba(8,11,14,.7);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 22%, var(--steel-700));
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-100);
  white-space: nowrap;
}
.cp-ops-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cp-accent, var(--pods-orange));
  box-shadow: 0 0 5px var(--cp-accent, var(--pods-orange));
  opacity: 0.75;
  animation: cp-ops-chip-flicker 5.6s ease-in-out infinite;
}
/* Stagger flicker phase across chips so the deployment row reads as
   independently monitored systems rather than a synchronized strobe. */
.cp-ops-chip:nth-child(2)  .cp-ops-chip-dot { animation-delay: 0.4s;  animation-duration: 6.2s; }
.cp-ops-chip:nth-child(3)  .cp-ops-chip-dot { animation-delay: 1.1s;  animation-duration: 5.0s; }
.cp-ops-chip:nth-child(4)  .cp-ops-chip-dot { animation-delay: 1.8s;  animation-duration: 5.8s; }
.cp-ops-chip:nth-child(5)  .cp-ops-chip-dot { animation-delay: 2.4s;  animation-duration: 6.6s; }
.cp-ops-chip:nth-child(6)  .cp-ops-chip-dot { animation-delay: 3.0s;  animation-duration: 5.4s; }
.cp-ops-chip:nth-child(7)  .cp-ops-chip-dot { animation-delay: 3.6s;  animation-duration: 6.0s; }
.cp-ops-chip:nth-child(8)  .cp-ops-chip-dot { animation-delay: 4.2s;  animation-duration: 5.2s; }
@keyframes cp-ops-chip-flicker {
  0%, 100% { opacity: 0.72; box-shadow: 0 0 5px var(--cp-accent, var(--pods-orange)); }
  46%      { opacity: 0.72; box-shadow: 0 0 5px var(--cp-accent, var(--pods-orange)); }
  50%      { opacity: 1;    box-shadow: 0 0 9px var(--cp-accent, var(--pods-orange)); }
  54%      { opacity: 0.72; box-shadow: 0 0 5px var(--cp-accent, var(--pods-orange)); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-ops-chip-dot { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   INTEL PANEL — richer right-column cards. Architecture (system bullets
   with hash IDs), Timeline (deployment milestones with a NOW marker),
   plus the existing Manifest + Operating Notes cards. The glyph in the
   title slot keeps every card readable as a system widget.
   ───────────────────────────────────────────────────────────────────── */
.cp-intel-card .cp-aside-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Subtle tactile hover on intel cards — the card "lifts" toward the
   visitor by 1px and the border edge accents subtly. Reads as physical
   weight rather than animated decoration. */
.cp-intel-card {
  transition:
    transform 0.32s var(--ease-cinematic),
    border-color 0.32s ease,
    box-shadow 0.32s ease;
  will-change: transform;
}
.cp-intel-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cp-accent) 28%, var(--steel-700));
  box-shadow:
    0 16px 38px rgba(0,0,0,.32),
    0 0 0 1px color-mix(in srgb, var(--cp-accent) 10%, transparent) inset;
}
@media (prefers-reduced-motion: reduce) {
  .cp-intel-card { transition: none; }
  .cp-intel-card:hover { transform: none; }
}

/* Panel nav buttons — slight depth on hover, tactile press on active.
   The existing transform animation read flat; this version adds a small
   shadow growth so the button feels like it's being pressed in. */
.cp-nav-btn {
  transition:
    transform 0.18s var(--ease-cinematic),
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.cp-nav-btn:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);
}
.cp-nav-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.32);
  transition-duration: 0.08s;
}
.cp-intel-glyph {
  width: 6px;
  height: 6px;
  background: var(--cp-accent, var(--pods-orange));
  box-shadow: 0 0 6px var(--cp-accent, var(--pods-orange));
  opacity: 0.85;
  transform: rotate(45deg);
}
.cp-arch-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.cp-arch-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 9px 14px;
  border-bottom: 1px dashed color-mix(in srgb, var(--steel-700) 60%, transparent);
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--steel-100);
}
.cp-arch-row:last-child { border-bottom: 0; }
.cp-arch-hash {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--steel-300);
  text-transform: uppercase;
}
.cp-arch-line { letter-spacing: 0.005em; }
.cp-timeline-list {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
  position: relative;
}
.cp-timeline-list::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 18px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cp-accent) 32%, transparent) 0%,
    color-mix(in srgb, var(--cp-accent) 8%, transparent) 100%);
}
.cp-timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px 56px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--steel-100);
}
.cp-timeline-node {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 8px;
  background: var(--steel-700);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, var(--steel-600));
  position: relative;
  z-index: 2;
}
.cp-timeline-row.is-now .cp-timeline-node {
  background: var(--cp-accent, var(--pods-orange));
  box-shadow: 0 0 8px var(--cp-accent, var(--pods-orange));
  border-color: var(--cp-accent, var(--pods-orange));
}
.cp-timeline-tag {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel-300);
}
.cp-timeline-row.is-now .cp-timeline-tag {
  color: var(--cp-accent, var(--pods-orange));
  font-weight: 700;
}
.cp-timeline-text { font-family: var(--font-display); font-size: 12px; line-height: 1.4; }

/* Mobile collapse — intel cards stack to 2-up grid (already handled by
   .cp-aside @media 900). At 720 they go 1-up. */
@media (max-width: 720px) {
  .cp-ops-cells { grid-template-columns: 1fr; }
  .cp-arch-row { grid-template-columns: 32px 1fr; padding: 8px 10px; font-size: 12px; }
  .cp-timeline-row { grid-template-columns: 22px 50px 1fr; padding: 7px 10px 7px 6px; }
}