/* =============================================================
   Apogee — mission-control console styling
   Aesthetic direction: ARCHITECTURE.md §9
   Retro-futuristic telemetry console × modern aerospace dashboard.
   ============================================================= */

/* ── Palette & tokens (single source for the look) ──────────── */
:root {
  /* Background field */
  --bg:            #0a0c10;
  --bg-raised:     #0e1118;
  --bg-panel:      #11151d;
  --bg-inset:      #0c0f15;

  /* Accents (§9): amber primary, cyan secondary, green ok, red anomaly */
  --amber:         #ff9e2c;
  --amber-dim:     #b9701a;
  --amber-glow:    rgba(255, 158, 44, 0.35);
  --cyan:          #46d6e0;
  --cyan-dim:      #2a8c95;
  --green:         #58e08a;
  --red:           #ff5a52;

  /* Lines & text */
  --line:          rgba(120, 150, 180, 0.14);
  --line-strong:   rgba(120, 150, 180, 0.28);
  --text:          #d6dde6;
  --text-dim:      #7f8b9a;
  --text-faint:    #545f6e;

  /* Type (§9) */
  --font-display:  'Chakra Petch', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;
  --font-body:     'IBM Plex Sans', system-ui, sans-serif;

  /* Rhythm */
  --gap:           14px;
  --radius:        4px;
  --bar-h:         68px;
  --ticker-h:      40px;
}

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

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  overflow: hidden;            /* the console owns the viewport */
  -webkit-font-smoothing: antialiased;
}

/* =============================================================
   Background layers: starfield + grid (§9)
   Pure CSS so the engine modules stay empty stubs for this step.
   ============================================================= */

.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(255, 158, 44, 0.06), transparent 60%),
    radial-gradient(900px 600px at 12% 110%, rgba(70, 214, 224, 0.05), transparent 60%),
    var(--bg);
  pointer-events: none;
  overflow: hidden;
}

/* Three parallax star layers built from tiled radial-gradient dots. */
.stars {
  position: absolute;
  inset: -50%;
  background-repeat: repeat;
}
.stars--far {
  background-image:
    radial-gradient(1px 1px at 40px 60px,  #ffffff88, transparent),
    radial-gradient(1px 1px at 130px 200px, #ffffff66, transparent),
    radial-gradient(1px 1px at 220px 90px,  #ffffff55, transparent),
    radial-gradient(1px 1px at 300px 260px, #ffffff77, transparent);
  background-size: 360px 360px;
  opacity: 0.5;
  animation: drift 240s linear infinite;
}
.stars--mid {
  background-image:
    radial-gradient(1.4px 1.4px at 80px 120px,  #cfe6ff, transparent),
    radial-gradient(1.4px 1.4px at 240px 40px,  #ffe9c2, transparent),
    radial-gradient(1.4px 1.4px at 180px 300px, #ffffff, transparent);
  background-size: 320px 320px;
  opacity: 0.7;
  animation: drift 160s linear infinite reverse, twinkle 6s ease-in-out infinite;
}
.stars--near {
  background-image:
    radial-gradient(2px 2px at 60px 220px,  #ffd9a8, transparent),
    radial-gradient(2px 2px at 280px 160px, #bfe9ff, transparent);
  background-size: 480px 480px;
  opacity: 0.85;
  animation: drift 110s linear infinite;
}

/* Faint mission-control grid (§9) */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, #000 55%, transparent 100%);
  opacity: 0.6;
}

/* Slow CRT scanline sweep — subtle telemetry texture */
.scanline {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 158, 44, 0.025) 50%,
    transparent 100%
  );
  background-size: 100% 6px;
  opacity: 0.5;
  mix-blend-mode: screen;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-180px, -120px, 0); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 0.4; }
}

/* =============================================================
   Console shell layout
   ============================================================= */

.console {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: grid;
  grid-template-rows: var(--bar-h) auto 1fr var(--ticker-h);
  gap: var(--gap);
  padding: var(--gap);
  max-width: 1280px;
  margin: 0 auto;
}
/* Ops phases (5-7) show the phase chip as an extra content row; add a track for
   it so the chip doesn't displace the 1fr panels area. Toggled by render(). */
.console--ops { grid-template-rows: var(--bar-h) auto auto 1fr var(--ticker-h); }

/* ── Status bar (§9) ────────────────────────────────────────── */
.statusbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-panel));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 8px 30px rgba(0, 0, 0, 0.5);
}

.statusbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}
.statusbar__logo {
  font-size: 26px;
  color: var(--amber);
  text-shadow: 0 0 14px var(--amber-glow);
  line-height: 1;
}
.statusbar__id { display: flex; flex-direction: column; }
.statusbar__company {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 1.5px;
  color: var(--text);
}
.statusbar__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-faint);
}

.statusbar__metrics {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.metric__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.metric__value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.metric__value--amber { color: var(--amber); text-shadow: 0 0 12px var(--amber-glow); }
.metric__value--cyan  { color: var(--cyan); }
.metric__unit {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 1px;
}

/* ADVANCE MONTH button — disabled in this shell (§9) */
.advance-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--bg);
  background: linear-gradient(180deg, var(--amber), var(--amber-dim));
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.08s ease, filter 0.18s ease;
}
.advance-btn__chevron { font-size: 16px; }
.advance-btn:not(:disabled):hover {
  box-shadow: 0 0 20px var(--amber-glow), 0 0 40px var(--amber-glow);
  filter: brightness(1.08);
}
.advance-btn:not(:disabled):active { transform: translateY(1px); }
.advance-btn:disabled {
  cursor: not-allowed;
  color: var(--text-faint);
  background: var(--bg-inset);
  border-color: var(--line-strong);
  letter-spacing: 2px;
}

/* ── Tabs (§9) ──────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
}
/* In early phases (1–4) the operational tabs are hidden via [hidden]; an explicit
   display above would otherwise defeat the attribute (§11 dashboard). */
.tabs[hidden] { display: none; }
.tab {
  flex: 0 0 auto;
  padding: 11px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-bottom: 2px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.tab:hover { color: var(--text); background: var(--bg-raised); }
.tab--active {
  color: var(--amber);
  border-color: var(--line-strong);
  border-bottom-color: var(--amber);
  background: var(--bg-raised);
  text-shadow: 0 0 10px var(--amber-glow);
}

/* ── Panels ─────────────────────────────────────────────────── */
.panels {
  position: relative;
  min-height: 0;
}
.panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-inset));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel[hidden] { display: none; }

.panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.012);
}
.panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 2.5px;
  color: var(--text);
}
.panel__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin-left: auto; /* pin hint + the guide '?' to the right of the header */
}

.panel__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.5px;
}
.panel__empty p { margin: 0; }
.panel__empty-glyph {
  font-size: 34px;
  color: var(--line-strong);
  opacity: 0.7;
}

/* Scrollable body for populated panels (e.g. the contracts list) */
.panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.panel__body.contracts {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

/* Thin telemetry scrollbar */
.panel__body::-webkit-scrollbar { width: 10px; }
.panel__body::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ── Contract cards (§3, §4, §9) ────────────────────────────── */
.contract {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--cyan-dim);
  border-radius: var(--radius);
  transition: border-color 0.16s ease, transform 0.08s ease;
}
.contract:hover { border-left-color: var(--cyan); }

.contract__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contract__client {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--text);
}

.badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
}
.badge--agency     { color: var(--cyan); border-color: var(--cyan-dim); }
.badge--commercial { color: var(--amber); border-color: var(--amber-dim); }
.badge--flagship {
  margin-left: auto;
  color: var(--bg);
  background: var(--amber);
  border-color: var(--amber);
}
/* Rush job (depth #2): tight deadline + premium. Sits at the right edge. */
.badge--rush {
  margin-left: auto;
  color: var(--red);
  border-color: var(--red);
}
.badge--flagship + .badge--rush { margin-left: 0; } /* flagship already took the gap */

.contract__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-faint);
}
.stat__v {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Deliverability read (depth #2): build+launch time vs. the deadline. */
.contract__deliver {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 8px 0 2px;
}
.deliver--deliverable { color: var(--green); }
.deliver--tight       { color: var(--amber); }
.deliver--cant        { color: var(--red); }

/* Bid control */
.contract__bid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 8px 10px;
  align-items: end;
}
.bid__field { display: flex; flex-direction: column; gap: 4px; }
.bid__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
}
.bid__rocket,
.bid__price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 7px 9px;
}
.bid__price { width: 100%; }
.bid__rocket:focus,
.bid__price:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 2px var(--amber-glow);
}

.bid__readout {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  padding: 2px 1px;
}
.bid__margin { font-weight: 600; }
.margin--pos { color: var(--green); }
.margin--neg { color: var(--red); }

.btn {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 9px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: box-shadow 0.16s ease, filter 0.16s ease, transform 0.08s ease;
}
.btn--amber {
  color: var(--bg);
  background: linear-gradient(180deg, var(--amber), var(--amber-dim));
  border: 1px solid var(--amber);
}
.btn--amber:hover { box-shadow: 0 0 16px var(--amber-glow); filter: brightness(1.06); }
.btn--amber:active { transform: translateY(1px); }
.btn--ghost {
  grid-column: auto;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover { color: var(--red); border-color: var(--red); }

/* Pending-bid state — visually distinct from an open card (§4 prompt) */
.contract__bid--placed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(70, 214, 224, 0.06);
  border: 1px dashed var(--cyan-dim);
  border-radius: 3px;
}
.contract__bid--placed .placed__info { display: flex; flex-direction: column; gap: 2px; }
.placed__tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--cyan);
}
.placed__val {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
}
.contract--pending { border-left-color: var(--cyan); }

.contract__bid--blocked {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  padding: 9px 0 2px;
}

/* A card with a placed bid gets the cyan accent rail */
.contract:has(.contract__bid--placed) { border-left-color: var(--cyan); }

/* ── Operations / mission cards (§5) ────────────────────────── */
.panel__body.operations {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.mission {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--amber-dim);
  border-radius: var(--radius);
}
.mission--ready {
  border-left-color: var(--green);
  box-shadow: 0 0 0 1px rgba(88, 224, 138, 0.12), 0 0 24px rgba(88, 224, 138, 0.06);
}
.mission__top { display: flex; align-items: center; gap: 10px; }
.mission__client {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}
.badge--ready    { color: var(--green); border-color: var(--green); }
.badge--building { color: var(--amber); border-color: var(--amber-dim); }
.badge--grounded { color: var(--red); border-color: var(--red); }

/* Grounded mission (§3 depth): can't launch until return-to-flight. */
.mission--grounded { border-left-color: var(--red); box-shadow: 0 0 0 1px rgba(255, 90, 82, 0.12); }
.mission__grounded {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  background: rgba(255, 90, 82, 0.06);
  border: 1px solid rgba(255, 90, 82, 0.3);
  border-radius: var(--radius);
}
.grounded__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--red);
}
.grounded__detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* Build progress bar */
.mission__progress { display: flex; flex-direction: column; gap: 6px; }
.progress__bar {
  height: 6px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.progress__bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber));
  transition: width 0.4s ease;
}
.progress__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

/* Ready-to-launch control */
.mission__launch {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.launch__odds {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.odds__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.odds__v {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.odds--high { color: var(--green); }
.odds--mid  { color: var(--amber); }
.odds--low  { color: var(--red); }
.launch__stake {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-faint);
}
.btn--launch {
  color: var(--bg);
  background: linear-gradient(180deg, var(--green), #2f9e5c);
  border: 1px solid var(--green);
  letter-spacing: 3px;
}
.btn--launch:hover {
  box-shadow: 0 0 18px rgba(88, 224, 138, 0.4);
  filter: brightness(1.06);
}
.btn--launch:active { transform: translateY(1px); }

/* ── Launch sequence overlay (§9) — the high-impact moment ───── */
.launch-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 60%, rgba(10, 12, 16, 0.86), rgba(5, 6, 9, 0.97));
  backdrop-filter: blur(3px);
  animation: overlay-in 0.35s ease forwards;
}
.launch-overlay.closing { animation: overlay-out 0.5s ease forwards; }
@keyframes overlay-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlay-out { to { opacity: 0; } }

.launch-scene {
  position: relative;
  width: min(440px, 86vw);
  height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.launch-readout { margin-top: 8px; }
.launch-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--text);
}
.launch-reliability {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--amber);
  margin-top: 4px;
}

/* The sky: rocket sits on the pad, then ascends */
.launch-sky {
  position: absolute;
  inset: 70px 0 0 0;
  overflow: hidden;
}
.launch-pad {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 120px;
  height: 3px;
  background: var(--line-strong);
  transform: translateX(-50%);
}
.launch-vehicle {
  position: absolute;
  left: 50%;
  bottom: 31px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.launch-rocket {
  font-size: 44px;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}
.launch-flame {
  width: 10px;
  height: 0;
  background: linear-gradient(180deg, var(--amber), transparent);
  border-radius: 0 0 50% 50%;
  filter: blur(1px);
}

/* Countdown number */
.launch-count {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  color: var(--amber);
  text-shadow: 0 0 30px var(--amber-glow);
}
.launch-count.pop { animation: count-pop 0.65s ease; }
@keyframes count-pop {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
}

/* Phase: ignition flame + ascent */
.launch-overlay[data-phase="ascent"] .launch-flame { animation: flame 0.25s steps(2) infinite; }
.launch-overlay[data-phase="ascent"] .launch-vehicle {
  animation: ascent 1.4s cubic-bezier(0.5, 0, 0.8, 0.4) forwards;
}
@keyframes flame {
  from { height: 14px; opacity: 0.8; }
  to   { height: 24px; opacity: 1; }
}
@keyframes ascent {
  0%   { bottom: 31px; }
  100% { bottom: 420px; }
}

/* Result reveal */
.launch-result {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.launch-overlay[data-phase="success"] .launch-result,
.launch-overlay[data-phase="partial"] .launch-result,
.launch-overlay[data-phase="failure"] .launch-result {
  animation: result-in 0.4s ease forwards;
}
@keyframes result-in {
  from { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.result-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 2px;
}
.result--ok      { color: var(--green); text-shadow: 0 0 24px rgba(88, 224, 138, 0.5); }
.result--fail    { color: var(--red); text-shadow: 0 0 24px rgba(255, 90, 82, 0.5); }
/* Partial hop (§14.2): "successful failure" — amber, vehicle dims slightly. */
.result--partial { color: #ffc24b; text-shadow: 0 0 24px rgba(255, 194, 75, 0.5); }
.launch-overlay[data-phase="partial"] .launch-vehicle { opacity: 0.6; }
.result-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-top: 8px;
}
/* Grounding note under an anomaly result (§3 depth). */
.result-sub--ground { color: var(--red); font-weight: 600; margin-top: 4px; }

/* Anomaly flash for a failure */
.launch-overlay[data-phase="failure"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255, 90, 82, 0.35), transparent 60%);
  animation: anomaly-flash 0.5s ease;
  pointer-events: none;
}
@keyframes anomaly-flash {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}

/* Ascent speed lines — faint vertical streaks rushing past during the climb */
.launch-sky::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 22px,
    rgba(190, 220, 255, 0.18) 22px,
    rgba(190, 220, 255, 0.18) 26px
  );
  opacity: 0;
}
.launch-overlay[data-phase="ascent"] .launch-sky::before {
  opacity: 1;
  animation: speedlines 0.4s linear infinite;
}
@keyframes speedlines {
  from { background-position-y: 0; }
  to   { background-position-y: 48px; }
}

/* Success: a soft green bloom from the horizon */
.launch-overlay[data-phase="success"] .launch-sky {
  background: radial-gradient(circle at 50% 80%, rgba(88, 224, 138, 0.18), transparent 60%);
}

/* Anomaly: kick the whole scene */
.launch-overlay[data-phase="failure"] .launch-scene { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .launch-overlay, .launch-overlay.closing { animation: none; }
  .launch-vehicle, .launch-count.pop, .launch-flame, .launch-scene { animation: none; }
  .launch-sky::before { animation: none; opacity: 0; }
  .launch-result { opacity: 1; }
}

/* ── R&D tab (§6) ───────────────────────────────────────────── */
.panel__body.rnd {
  display: block; /* override the grid default; lay out as stacked sections */
}
.rnd__control {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.rnd__active-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--cyan);
}
.rnd__active-nums {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}
.rnd__active-none {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-faint);
}
.progress__bar.big { height: 9px; }
/* Experience progress uses the cyan accent to distinguish it from funding (amber) */
.progress__bar--xp > span { background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); }

.rnd__xp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.rnd__xp-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
/* Category chip (R1.2): tags each tech by what it does — Propulsion / Cost /
   Reliability / Payload — so the player can read the tree at a glance. */
.tech__cat {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.85;
}
.tech__cat--propulsion  { color: var(--cyan); }
.tech__cat--cost        { color: var(--green); }
.tech__cat--reliability { color: var(--amber); }
.tech__cat--payload     { color: var(--cyan-dim); }
.tech__cat--other       { color: var(--text-dim); }
/* The concrete "what this buys you" gloss under the headline effect (R1.2). */
.tech__note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  line-height: 1.35;
}
/* Which frontier rocket feeds an engine tech's XP gate (R1.3). */
.tech__xp-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan-dim);
}

.rnd__budget {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.budget__slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  background: var(--line-strong);
  outline: none;
}
.budget__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--bg);
  box-shadow: 0 0 8px var(--amber-glow);
  cursor: pointer;
}
.budget__slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--bg);
  cursor: pointer;
}
.budget__slider:disabled { opacity: 0.4; }
.budget__value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  min-width: 78px;
  text-align: right;
}

.rnd__tree {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.tech {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.16s ease, transform 0.08s ease;
}
.tech__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.tech__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
}
.tech__cost {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
}
.tech__effect {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.35;
}
.tech__req {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}
.tech__status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  margin-top: 2px;
}
.tech__status--owned     { color: var(--green); }
.tech__status--developing { color: var(--cyan); }
.tech__status--available { color: var(--amber); }
.tech__status--locked    { color: var(--text-faint); }

/* States — statuses emitted by techCard: owned / developing / available / locked / buyable. */
.tech--owned    { border-left-color: var(--green); opacity: 0.8; }
.tech--developing { border-left-color: var(--cyan); }   /* §6 — committed, counting down */
.tech--available { border-left-color: var(--amber); }   /* unaffordable/blocked — not interactive */
.tech--locked   { opacity: 0.5; }

/* §6 — research dev-progress bar on the developing node. */
.tech__progress { height: 4px; background: rgba(70,214,224,0.15); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.tech__progress-fill { display: block; height: 100%; background: var(--cyan); transition: width 0.3s ease; }
/* §6 — buyable = affordable & purchasable; these are the ONLY interactive nodes. */
.tech--buyable {
  border-left-color: var(--cyan);
  cursor: pointer;
}
.tech--buyable:hover { border-color: var(--cyan-dim); border-left-color: var(--cyan); transform: translateY(-1px); }
.tech--buyable:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(70,214,224,0.35); }

/* §6 — R&D tree branch grouping. */
.rnd__branch { margin-bottom: 18px; }
.rnd__branch-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 8px 2px;
}
.rnd__nodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

/* §6 — RP HUD line in the control section. */
.rnd__hud {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.rnd__rp {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

/* §18 — factory research-gate warning hint. */
.venture-foot--warn { color: var(--amber); opacity: 1; }

/* ── Standings tab (§7) ─────────────────────────────────────── */
.panel__body.standings {
  display: block;
  padding: 14px;
}
.standing {
  display: grid;
  grid-template-columns: 44px 1fr 120px 70px 90px 80px;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.standing--head {
  border: none;
  margin-bottom: 2px;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 1.5px;
}
.standing--head .standing__score,
.standing--head .standing__cell { color: var(--text-faint); }
.standing__rank { color: var(--text-dim); font-weight: 600; }
.standing__name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.standing__cell { color: var(--text-dim); text-align: right; }
.standing__score {
  text-align: right;
  font-weight: 600;
  color: var(--amber);
}
.standing__tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--bg);
  background: var(--cyan);
  padding: 2px 5px;
  border-radius: 2px;
}
.standing--you {
  border-color: var(--cyan-dim);
  border-left: 2px solid var(--cyan);
  background: rgba(70, 214, 224, 0.06);
}

/* ── Modal overlays: end-of-month summary, victory, game-over (§2, §7) ─ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(5, 6, 9, 0.78);
  backdrop-filter: blur(3px);
  animation: overlay-in 0.25s ease forwards;
  padding: 20px;
}
.modal {
  width: min(420px, 92vw);
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-panel));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  padding: 22px;
  text-align: center;
  animation: result-in 0.3s ease forwards;
}
.modal__ribbon {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--bg);
  background: var(--green);
  padding: 4px 14px;
  border-radius: 2px;
  margin-bottom: 12px;
}
.modal__ribbon--fail { background: var(--red); }
.modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 14px;
}
.modal__rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  margin-bottom: 16px;
}
.modal__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
}
.modal__row span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.modal__row--net {
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-weight: 600;
}
.modal__note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 16px;
}
.modal--victory { border-color: var(--green); box-shadow: 0 0 40px rgba(88, 224, 138, 0.18); }
.modal--gameover { border-color: var(--red); box-shadow: 0 0 40px rgba(255, 90, 82, 0.18); }
.modal__btn { width: 100%; }

/* Event disruption modal (§3 depth): amber attention, stacked option buttons. */
.modal__ribbon--event { background: var(--amber); }
.modal--event { border-color: var(--amber-dim); box-shadow: 0 0 40px var(--amber-glow); }
.event-options { display: flex; flex-direction: column; gap: 8px; }
.event-option { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal { animation: none; }
}

/* First-run intro modal (§9) */
.modal--intro {
  width: min(520px, 94vw);
  text-align: left;
  padding: 26px;
}
.intro__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 4px;
  color: var(--amber);
  text-shadow: 0 0 22px var(--amber-glow);
  text-align: center;
}
.intro__tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 16px;
}
.intro__lede {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 14px;
}
.intro__steps {
  margin: 0 0 18px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}
.intro__steps b { color: var(--cyan); font-family: var(--font-display); letter-spacing: 1px; }
.intro__field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.intro__field > span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.intro__input {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 10px 12px;
}
.intro__input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 2px var(--amber-glow);
}

/* Tooltip affordance: elements with a title get the help cursor + dotted hint */
.has-tip { cursor: help; }
.metric.has-tip:hover .metric__label { color: var(--cyan); }
.launch__odds[title], .bid__readout[title] { cursor: help; }

/* ── Mission-log ticker (§9) ────────────────────────────────── */
.ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 0 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.ticker__tag {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--bg);
  background: var(--cyan);
  padding: 5px 10px;
  border-radius: 2px;
}
.ticker__track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker__content {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  animation: ticker 42s linear infinite;
}
.ticker__item { letter-spacing: 0.4px; }
.ticker__sep { color: var(--amber); opacity: 0.6; }

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* content is duplicated → seamless */
}

/* =============================================================
   Staggered panel-reveal animation on load (§9)
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .stars, .ticker__content, .scanline { animation: none; }
}

/* ── Narrow viewports (informs the eventual iOS layout, §9) ──── */
@media (max-width: 880px) {
  .statusbar {
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 12px 16px;
    height: auto;
  }
  .statusbar__brand { min-width: 0; }
  .statusbar__metrics { margin-left: 0; gap: 14px 18px; flex-wrap: wrap; }
  .advance-btn { margin-left: auto; }
  .console { grid-template-rows: auto auto 1fr var(--ticker-h); }
  .console--ops { grid-template-rows: auto auto auto 1fr var(--ticker-h); }

  /* Tabs scroll horizontally rather than wrapping awkwardly */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; }
}

@media (max-width: 560px) {
  :root { --bar-h: auto; }
  body { font-size: 14px; }
  .console { padding: 10px; gap: 10px; }

  /* One card per row everywhere */
  .panel__body.contracts,
  .panel__body.operations,
  .rnd__tree { grid-template-columns: 1fr; }

  .statusbar__metrics { gap: 10px 14px; }
  .metric__value { font-size: 16px; }
  .advance-btn { width: 100%; justify-content: center; }

  /* Standings: drop the launches column, tighten widths */
  .standing { grid-template-columns: 32px 1fr 84px 48px 64px; gap: 6px; padding: 9px 10px; font-size: 12px; }
  .standing__cell:nth-child(5) { display: none; } /* LAUNCHES */
  .standing--head .standing__cell:nth-child(5) { display: none; }

  .rnd__budget { grid-template-columns: 1fr; gap: 6px; }
  .budget__value { text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Early game (phases 1–4) dashboard — ARCHITECTURE.md §11–§15
 * ════════════════════════════════════════════════════════════════════════ */
.early {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-right: 4px;
}
.early[hidden] { display: none; }

/* §14.3 Phase-4 HYBRID view: the early-game host (orbital maiden + fundraising/milestones)
   and the active operational panel are shown together. Without this, each takes height:100%
   of the fixed `.panels` row and they stack — pushing the second off-screen, which can't be
   scrolled to (the console owns the viewport; body overflow is hidden). Here they share the
   row: the maiden host on top (capped + internally scrollable), the active panel filling the
   rest (its body scrolls as usual). */
.panels--hybrid {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: 0;
}
.panels--hybrid > .early {
  height: auto;
  flex: 0 1 auto;
  max-height: 40%; /* the contract board (the active bidding area) keeps the larger share; host scrolls */
}
.panels--hybrid > .panel {
  height: auto;
  flex: 1 1 0;
  min-height: 0;
}

.phase-head {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--amber);
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-panel));
  border-radius: var(--radius);
  padding: 14px 16px;
}
.phase-head__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber-glow);
}
.phase-head__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 2px 0 4px;
  color: var(--text);
}
.phase-head__blurb { margin: 0; color: var(--text-dim); font-size: 13px; max-width: 54ch; }

.phase-exit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-width: 250px;
}
.phase-exit--ready { border-color: var(--green); border-style: solid; box-shadow: 0 0 16px rgba(88, 224, 138, 0.18); }
.phase-exit__title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.phase-exit--ready .phase-exit__title { color: var(--green); }
.phase-exit__req { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.phase-exit__req.ok { color: var(--green); }

.early-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
@media (max-width: 760px) { .early-grid { grid-template-columns: 1fr; } }

.ecard {
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-inset));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ecard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.ecard__head h3 { font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; color: var(--cyan); margin: 0; }
.ecard__sub, .ecard__lock { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 1px; }
.ecard__lock { color: var(--amber); }
.ecard__muted { color: var(--text-faint); font-size: 12px; font-family: var(--font-mono); }
.ecard__field { display: flex; flex-direction: column; gap: 6px; }
.ecard__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--text-faint); }
.ecard__stats { display: flex; gap: 18px; flex-wrap: wrap; }
.ecard__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ecard .btn { grid-column: auto; }
.ecard .btn--ghost:hover { color: var(--cyan); border-color: var(--cyan-dim); }
.ecard .btn[disabled] { opacity: 0.4; cursor: not-allowed; box-shadow: none; filter: none; }
.ecard .court { font-size: 11px; padding: 7px 9px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-dim);
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.chip:hover:not([disabled]) { color: var(--cyan); border-color: var(--cyan-dim); }
.chip--on { color: var(--bg); background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(70, 214, 224, 0.3); }
.chip[disabled] { opacity: 0.45; cursor: default; }
.chip--on[disabled] { opacity: 1; } /* keep the locked-in choice readable */

.pbar { height: 8px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.pbar__fill { height: 100%; background: linear-gradient(90deg, var(--amber-dim), var(--amber)); box-shadow: 0 0 10px var(--amber-glow); transition: width 0.25s ease; }

.offer { border: 1px solid var(--amber-dim); border-radius: var(--radius); padding: 10px 12px; background: rgba(255, 158, 44, 0.06); display: flex; flex-direction: column; gap: 8px; }
.offer__lead { font-family: var(--font-display); font-size: 12px; letter-spacing: 1px; color: var(--amber); }
.offer__terms { font-family: var(--font-mono); font-size: 12px; color: var(--text); }

.round { display: flex; gap: 10px; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--text); padding: 2px 0; }
.round__dil { color: var(--text-faint); }

.ms { border-left: 2px solid var(--line-strong); padding: 6px 0 6px 10px; }
.ms__top { display: flex; justify-content: space-between; gap: 8px; }
.ms__label { font-size: 13px; color: var(--text); }
.ms__status { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--text-dim); white-space: nowrap; }
.ms__meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.ms--done { border-left-color: var(--green); }
.ms--done .ms__status { color: var(--green); }
.ms--forfeited { border-left-color: var(--red); opacity: 0.72; }
.ms--forfeited .ms__status { color: var(--red); }

/* Phase-2 subsystem choice options (§14.1) */
.subopts { display: flex; flex-direction: column; gap: 6px; }
.subopt { text-align: left; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; white-space: normal; }
.subopt b { font-family: var(--font-display); letter-spacing: 0.5px; color: var(--text); }
.subopt__mods { display: block; color: var(--text-faint); }
.subopt--mini { display: inline-block; font-size: 10px; padding: 4px 7px; }
.subopt--on { color: var(--bg); background: var(--cyan); border-color: var(--cyan); }

/* ── CREWED FLIGHT tab (§17) ─────────────────────────────────── */
/* Button modifiers used only here (the base .btn lives above): a compact inline
   variant for per-system Fund, and a red-edged danger variant for LAUNCH CREW. */
.btn--small { grid-column: auto; font-size: 10px; letter-spacing: 1px; padding: 5px 9px; color: var(--text-dim); background: transparent; border: 1px solid var(--line-strong); }
.btn--small:hover { color: var(--cyan); border-color: var(--cyan-dim); }
.btn--danger { grid-column: auto; color: var(--bg); background: linear-gradient(180deg, var(--red), #c4423b); border: 1px solid var(--red); }
.btn--danger:hover { box-shadow: 0 0 16px rgba(255, 90, 82, 0.4); filter: brightness(1.06); }
.btn--danger:active { transform: translateY(1px); }

.crew-gate { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.crew-gate__lede { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.crew-gate .btn--amber { grid-column: auto; }

.crew-systems, .crew-campaign {
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-inset));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--gap);
}
.crew-systems__title, .crew-campaign__title {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; color: var(--cyan);
  margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.crew-campaign__title { color: var(--amber); }

.crew-sys { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.crew-sys:last-of-type { border-bottom: none; }
.crew-sys__name { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.5px; color: var(--text); }
.crew-sys__cost { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.crew-sys.is-done .crew-sys__name { color: var(--green); }
.crew-sys.is-done .crew-sys__cost { color: var(--green); }
.crew-sys .btn--amber { grid-column: auto; }

.crew-campaign__progress { margin: 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; color: var(--text); }
.crew-campaign__verdict { font-family: var(--font-display); font-size: 14px; letter-spacing: 1px; margin: 0; }
.crew-campaign__verdict--won { color: var(--green); }
.crew-campaign__verdict--lost { color: var(--red); }

.crew-hint { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); line-height: 1.5; }
.crew-hint--ok { color: var(--green); }
.crew-hint--warn { color: var(--amber); }

/* ── §18 Space Ventures (SPACE CO. tab) ───────────────────────────── */
.venture-topnote { font-size: .75rem; opacity: .75; margin-bottom: .55rem; }
.venture-focus { color: var(--amber); font-weight: 600; }
.venture-strip { display: flex; gap: 1rem; flex-wrap: wrap; padding: .75rem 1rem; margin-bottom: 1.1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-inset); }
.venture-strip > div { display: flex; flex-direction: column; }
.venture-strip__k { font-size: .7rem; letter-spacing: .04em; opacity: .65; text-transform: uppercase; }
.venture-strip__v { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.venture-strip__founder { margin-left: auto; text-align: right; }
.venture-strip__founder .venture-strip__v { color: var(--amber); font-weight: 600; }
.venture-section { margin-bottom: 1.4rem; }
.venture-section__bar { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin: 0 0 .55rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.venture-section__title { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.venture-section__meta { font-size: .72rem; opacity: .6; }
.venture-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: .6rem; }
.venture-card { display: flex; flex-direction: column; gap: .45rem; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-inset); }
.venture-card.is-active { border-color: rgba(245,179,1,.35); }
.venture-card__head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.venture-card__sub { font-size: .72rem; opacity: .65; white-space: nowrap; }
.venture-foot { font-size: .72rem; opacity: .78; line-height: 1.35; }
.venture-cta { font-size: .78rem; line-height: 1.4; margin: .15rem 0 0; padding: .45rem .55rem; border-left: 2px solid var(--amber); background: rgba(245,179,1,.07); border-radius: 4px; }
.venture-prod { display: flex; flex-direction: column; gap: .35rem; margin-top: .15rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.venture-prod__k { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; opacity: .55; }
.venture-steps { display: flex; align-items: center; gap: .25rem; font-size: .6rem; letter-spacing: .03em; text-transform: uppercase; }
.venture-steps i { opacity: .3; font-style: normal; }
.venture-step { opacity: .38; }
.venture-step.is-on { opacity: 1; color: var(--amber); }
.venture-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.venture-actions .is-active { color: var(--amber); border-color: var(--amber); }
.venture-ma { margin-top: .7rem; font-size: .85rem; }
.venture-ma summary { cursor: pointer; opacity: .8; }
.venture-ma__row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.venture-gauge { height: 7px; border-radius: 4px; background: var(--bg-inset); border: 1px solid var(--line); overflow: hidden; margin: .15rem 0 .1rem; }
.venture-gauge__fill { height: 100%; background: linear-gradient(90deg, var(--amber-dim), var(--amber)); transition: width .4s ease; }
.venture-market__stats { display: flex; flex-direction: column; gap: .2rem; font-size: .73rem; opacity: .85; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; font-size: .72rem; padding: .12rem .45rem; border-radius: 4px; background: rgba(255,255,255,.06); }
.tag--ok { color: #6ee7a8; } .tag--locked { opacity: .6; }
.mission--deploy { border-left: 2px solid var(--amber); }

/* ── Guide pop-ups (UI onboarding) ─────────────────────────────── */
.modal--guide {
  width: min(500px, 94vw);
  text-align: left;
  padding: 24px 26px;
  border-color: var(--cyan);
  box-shadow: 0 0 40px rgba(94, 214, 232, 0.16);
}
.modal__ribbon--guide { background: var(--cyan); }
.guide__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--cyan);
  margin-bottom: 6px;
}
.guide__what {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 14px;
}
.guide__goal {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  background: rgba(94, 214, 232, 0.08);
  border-left: 2px solid var(--cyan);
  padding: 8px 12px;
  border-radius: 2px;
  margin-bottom: 14px;
}
.guide__goal span {
  color: var(--cyan);
  font-weight: 600;
  letter-spacing: 1px;
  margin-right: 4px;
}
.guide__steps {
  margin: 0 0 16px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
}
.guide__steps li::marker { color: var(--cyan); font-family: var(--font-mono); }
.guide__tip {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 18px;
}
.guide__tip b {
  color: var(--amber);
  font-family: var(--font-display);
  letter-spacing: 1px;
  margin-right: 6px;
}

/* Round '?' help buttons on the phase-head, phase chip, and panel headers. */
.phase-head__help,
.phase-chip__help,
.panel__help {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.phase-head__help:hover,
.phase-chip__help:hover,
.panel__help:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 10px rgba(94, 214, 232, 0.25);
}
.phase-head__help { margin-left: 8px; vertical-align: middle; }
.panel__help { margin-left: 10px; align-self: center; }

/* Operational-phase chip (phases 5-7). */
.phase-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--gap);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius);
  background: rgba(94, 214, 232, 0.05);
  width: fit-content;
}
.phase-chip[hidden] { display: none; }
.phase-chip__name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--cyan);
}