/* XSCAPE flight HUD
 *
 * This file is intentionally standalone. It owns the cockpit information
 * architecture and uses semantic signals rather than a decorative accent.
 * Load it after the legacy presentation sheets while the rest of the visual
 * system is migrated.
 */

:root {
  --hud-ground: var(--x-color-ground, oklch(11% .022 232));
  --hud-surface: var(--x-color-surface-1, oklch(15% .026 232));
  --hud-surface-raised: var(--x-color-surface-2, oklch(20% .03 232));
  --hud-ink: var(--x-color-ink, oklch(95% .018 210));
  --hud-muted: var(--x-color-muted, oklch(76% .028 215));
  --hud-dim: var(--x-color-dim, oklch(63% .03 220));
  --hud-line: var(--x-color-line, oklch(45% .038 220 / .76));
  --hud-line-soft: var(--x-color-line-soft, oklch(38% .03 220 / .58));
  --hud-cyan: var(--x-signal-navigation, oklch(86% .12 210));
  --hud-cyan-dim: oklch(72% .08 210);
  --hud-amber: var(--x-signal-objective, oklch(84% .14 76));
  --hud-amber-dim: oklch(72% .09 76);
  --hud-green: var(--x-signal-ready, oklch(82% .12 154));
  --hud-red: var(--x-signal-danger, oklch(73% .16 27));
  --hud-violet: var(--x-signal-route, oklch(75% .11 300));
  --hud-display: var(--x-font-display, 'Xscape VT323', monospace);
  --hud-mono: var(--x-font-body, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  --hud-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Keep the canvas readable while the instrument layer is active. */
#hud .xscape-hud-shell {
  position: absolute;
  inset: 0;
  color: var(--hud-ink);
  font-family: var(--hud-mono);
  pointer-events: none;
  isolation: isolate;
}

#hud .xscape-hud-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, oklch(9% .024 230 / .84), transparent 18% 77%, oklch(8% .022 230 / .72)),
    linear-gradient(90deg, oklch(8% .022 230 / .28), transparent 22% 78%, oklch(8% .022 230 / .18));
}

#hud .flight-control-bar {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(260px, 1fr) minmax(130px, 180px) auto;
  gap: 0;
  min-height: 82px;
  padding: 13px 22px 12px;
  border-bottom: 1px solid var(--hud-line);
  background: linear-gradient(180deg, oklch(11% .03 230 / .96), oklch(11% .03 230 / .74) 70%, transparent);
  pointer-events: none;
}

#hud .flight-id,
#hud .flight-depth,
#hud .mission-console {
  min-width: 0;
  padding: 0 18px;
}

#hud .flight-id {
  display: grid;
  align-content: center;
  gap: 6px;
  padding-left: 0;
  border-right: 1px solid var(--hud-line-soft);
}

#hud .hud-kicker,
#hud .rail-label {
  display: block;
  color: var(--hud-dim);
  font: 600 9px/1.2 var(--hud-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

#hud .flight-id strong {
  color: var(--hud-ink);
  font: 400 22px/1 var(--hud-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}

#hud .flight-link {
  min-height: 12px;
  color: var(--hud-cyan-dim);
  font: 600 9px/1.2 var(--hud-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

#hud .mission-console {
  display: grid;
  align-content: center;
  gap: 5px;
  border-right: 1px solid var(--hud-line-soft);
}

#hud .mission-console > span:not(.hud-kicker) {
  min-width: 0;
  overflow: hidden;
  color: var(--hud-ink);
  font: 400 19px/1 var(--hud-display);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

#hud .mission-console small {
  display: block;
  max-width: 72ch;
  overflow: hidden;
  color: var(--hud-muted);
  font: 11px/1.35 var(--hud-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#hud .mission-console .bounty-hud {
  color: var(--hud-amber);
  font: 600 9px/1.2 var(--hud-mono);
  letter-spacing: .08em;
}

#hud .flight-depth {
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 5px;
  text-align: right;
}

#hud .flight-depth strong {
  color: var(--hud-cyan);
  font: 400 29px/1 var(--hud-display);
  letter-spacing: .13em;
}

#hud .flight-depth b {
  overflow: hidden;
  max-width: 18ch;
  color: var(--hud-muted);
  font: 600 9px/1.2 var(--hud-mono);
  letter-spacing: .12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

#hud .flight-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 16px;
  pointer-events: auto;
}

#hud .flight-actions button,
#hud .action-dock button {
  min-height: 44px;
  border: 1px solid var(--hud-line);
  border-radius: 0;
  background: oklch(15% .026 232 / .92);
  color: var(--hud-muted);
  font-family: var(--hud-mono);
  transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out, transform 140ms var(--hud-ease);
}

#hud .flight-actions button:hover:not(:disabled),
#hud .flight-actions button:focus-visible,
#hud .action-dock button:hover:not(:disabled),
#hud .action-dock button:focus-visible {
  border-color: var(--hud-cyan-dim);
  background: oklch(22% .038 232 / .96);
  color: var(--hud-ink);
}

#hud .flight-actions #touch-satchel {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 130px;
  padding: 7px 10px;
  text-align: left;
}

#hud .flight-actions #touch-satchel svg {
  width: 22px;
  height: 22px;
  color: var(--hud-cyan);
}

#hud .flight-actions #touch-satchel span {
  display: grid;
  gap: 3px;
}

#hud .flight-actions #touch-satchel b,
#hud .flight-actions #touch-satchel small {
  font-family: var(--hud-mono);
  white-space: nowrap;
}

#hud .flight-actions #touch-satchel b {
  color: var(--hud-ink);
  font-size: 9px;
  letter-spacing: .12em;
}

#hud .flight-actions #touch-satchel small {
  color: var(--hud-cyan-dim);
  font-size: 9px;
}

#hud .flight-actions .field-help,
#hud .flight-actions .pause-button {
  width: 44px;
  min-width: 44px;
  padding: 0;
  font: 400 19px/1 var(--hud-display);
}

#hud .systems-rail {
  position: absolute;
  top: 108px;
  left: 22px;
  display: grid;
  width: 228px;
  border: 1px solid var(--hud-line);
  background: linear-gradient(90deg, oklch(11% .03 232 / .94), oklch(11% .03 232 / .64) 72%, transparent);
  pointer-events: none;
}

#hud .systems-rail section {
  display: grid;
  gap: 8px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--hud-line-soft);
}

#hud .systems-rail section:last-child {
  border-bottom: 0;
}

#hud .vital-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--hud-muted);
  font: 600 10px/1.25 var(--hud-mono);
  letter-spacing: .05em;
}

#hud .vital-label b {
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#hud .vital-label > span {
  flex: none;
  color: var(--hud-green);
  font-variant-numeric: tabular-nums;
}

#hud .health-track {
  height: 8px;
  padding: 1px;
  overflow: hidden;
  border: 1px solid var(--hud-line);
  background: oklch(10% .028 232);
}

#hud .health-track > div {
  height: 100%;
  background: var(--hud-green);
  box-shadow: 0 0 12px oklch(82% .12 154 / .4);
  transform-origin: left center;
  transition: transform 180ms var(--hud-ease), background 180ms ease-out;
}

#hud .run-resources {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--hud-muted);
  font: 10px/1.25 var(--hud-mono);
}

#hud .resource-module .run-resources span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#hud .resource-module .run-resources span::after {
  color: var(--hud-cyan-dim);
  content: '●';
  font-size: 7px;
}

#hud .rail-status strong {
  color: var(--hud-cyan);
  font: 400 17px/1 var(--hud-display);
  letter-spacing: .08em;
}

#hud .action-dock {
  position: absolute;
  inset: auto 22px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--hud-line);
  pointer-events: none;
}

#hud .action-dock .keybinds {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  max-width: 520px;
  color: var(--hud-dim);
  font: 9px/1.25 var(--hud-mono);
  pointer-events: none;
}

#hud .keybinds span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

#hud .keybinds kbd,
#hud .interact-prompt kbd {
  padding: 4px 6px;
  border: 1px solid var(--hud-line);
  border-radius: 0;
  background: oklch(14% .028 232 / .9);
  color: var(--hud-ink);
  font: 10px/1 var(--hud-mono);
}

#hud .action-dock .abilities {
  display: flex;
  gap: 6px;
  pointer-events: auto;
}

#hud .action-dock .abilities button {
  position: relative;
  display: grid;
  width: 100px;
  min-height: 64px;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 12px 8px 9px;
  text-align: center;
}

#hud .action-dock .abilities button:first-child {
  border-bottom-color: var(--hud-green);
}

#hud .action-dock .abilities button:nth-child(2) {
  border-bottom-color: var(--hud-amber);
}

#hud .action-dock .abilities button:nth-child(3) {
  border-bottom-color: var(--hud-cyan);
}

#hud .action-dock .abilities button:disabled {
  opacity: .52;
}

#hud .action-dock .abilities b {
  color: var(--hud-ink);
  font: 600 10px/1 var(--hud-mono);
  letter-spacing: .12em;
}

#hud .action-dock .abilities small {
  color: var(--hud-muted);
  font: 9px/1 var(--hud-mono);
}

#hud .action-dock .abilities kbd {
  position: absolute;
  top: -13px;
  left: 9px;
  padding: 3px 5px;
  color: var(--hud-muted);
  font-size: 9px;
}

#hud .interact-prompt {
  position: absolute;
  bottom: 142px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(460px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid var(--hud-amber);
  border-radius: 0;
  background: oklch(14% .032 232 / .96);
  box-shadow: 0 10px 34px oklch(5% .02 232 / .5), 0 0 20px oklch(84% .14 76 / .12);
  color: var(--hud-amber);
  font: 600 11px/1.3 var(--hud-mono);
  letter-spacing: .05em;
  pointer-events: auto;
  transform: translateX(-50%);
}

#hud .interact-prompt .interaction-progress {
  width: 21px;
  height: 21px;
  flex: none;
}

#hud .interact-prompt .interact-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#hud .interact-prompt .interact-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#hud .interact-prompt small {
  overflow: hidden;
  color: var(--hud-muted);
  font: 9px/1.3 var(--hud-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#hud .interact-prompt.is-working {
  border-color: var(--hud-cyan);
  color: var(--hud-cyan);
}

#hud .boss-vitals {
  position: absolute;
  bottom: 142px;
  left: 50%;
  width: min(340px, calc(100vw - 48px));
  text-align: center;
  transform: translateX(-50%);
}

#hud .boss-vitals span {
  color: var(--hud-red);
  font: 600 11px/1.2 var(--hud-mono);
  letter-spacing: .18em;
}

#hud .boss-vitals > div {
  height: 6px;
  margin-top: 9px;
  background: oklch(18% .04 27);
}

#hud .boss-vitals i {
  display: block;
  height: 100%;
  background: var(--hud-red);
  box-shadow: 0 0 14px oklch(73% .16 27 / .35);
}

/* Shared treatment for errors and system interruptions. */
#overlay .xscape-console,
#overlay .transaction-panel {
  border: 1px solid var(--hud-line);
  border-radius: 0;
  background: linear-gradient(145deg, oklch(18% .032 232 / .98), oklch(10% .025 232 / .98));
  box-shadow: 0 24px 80px oklch(4% .02 232 / .75), inset 0 1px oklch(95% .02 210 / .08);
}

#overlay .xscape-console .console-stamp,
#overlay .transaction-panel .console-stamp {
  color: var(--hud-dim);
  font: 600 9px/1.2 var(--hud-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

#overlay .xscape-console > header,
#overlay .transaction-panel .transaction-copy {
  border-bottom-color: var(--hud-line-soft);
  background: linear-gradient(90deg, oklch(86% .12 210 / .08), transparent 68%);
}

#overlay .xscape-console > header h2,
#overlay .transaction-panel h2 {
  color: var(--hud-ink);
  font: 400 clamp(32px, 4.2vw, 62px) / .9 var(--hud-display);
  letter-spacing: .02em;
}

#overlay .xscape-console > header .eyebrow {
  color: var(--hud-cyan-dim);
}

#overlay .xscape-console .close-button,
#overlay .transaction-panel .transaction-close {
  border: 1px solid var(--hud-line);
  border-radius: 0;
  background: transparent;
  color: var(--hud-muted);
}

#overlay .xscape-console .close-button:hover,
#overlay .transaction-panel .transaction-close:hover {
  border-color: var(--hud-cyan);
  color: var(--hud-cyan);
}

#overlay .xscape-console > .panel-footer,
#overlay .transaction-panel .transaction-actions {
  border-top-color: var(--hud-line-soft);
  background: oklch(9% .025 232 / .88);
}

#overlay .xscape-console > .panel-footer button,
#overlay .transaction-panel .transaction-actions button {
  border: 1px solid var(--hud-line);
  border-radius: 0;
  background: transparent;
  color: var(--hud-muted);
}

#overlay .xscape-console > .panel-footer button.primary,
#overlay .transaction-panel .transaction-actions button.primary {
  border-color: var(--hud-amber);
  background: var(--hud-amber);
  color: oklch(18% .035 76);
  box-shadow: 0 0 22px oklch(84% .14 76 / .16);
}

#overlay .xscape-console > .panel-footer button.primary:hover,
#overlay .transaction-panel .transaction-actions button.primary:hover {
  background: oklch(90% .12 76);
}

@media (max-width: 960px) {
  #hud .flight-control-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 100px;
    padding: 11px 15px 10px;
  }

  #hud .flight-id {
    border-right: 0;
    padding: 0;
  }

  #hud .flight-id strong { font-size: 18px; }
  #hud .flight-link { font-size: 8px; }
  #hud .flight-depth { display: none; }

  #hud .mission-console {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 8px 0 0;
    border-top: 1px solid var(--hud-line-soft);
    border-right: 0;
  }

  #hud .mission-console > span:not(.hud-kicker) { font-size: 16px; }
  #hud .flight-actions { padding-left: 8px; }
  #hud .flight-actions #touch-satchel { min-width: 44px; width: 44px; justify-content: center; padding: 0; }
  #hud .flight-actions #touch-satchel span { display: none; }
  #hud .systems-rail { top: 122px; left: 15px; width: min(210px, calc(100% - 30px)); }
  #hud .systems-rail section { padding: 10px 11px; }
  #hud .action-dock { inset: auto 15px 12px; gap: 10px; }
  #hud .action-dock .keybinds { display: none; }
  #hud .action-dock .abilities { margin-left: auto; }
  #hud .action-dock .abilities button { width: 78px; min-height: 58px; }
  #hud .interact-prompt { bottom: 132px; }
  #hud .boss-vitals { bottom: 132px; }
}

@media (max-width: 520px) {
  #hud .flight-id strong { font-size: 17px; }
  #hud .flight-actions .field-help,
  #hud .flight-actions .pause-button { width: 40px; min-width: 40px; }
  #hud .systems-rail { top: 117px; width: 184px; }
  #hud .systems-rail .rail-status { display: none; }
  #hud .action-dock .abilities { gap: 4px; }
  #hud .action-dock .abilities button { width: 72px; min-height: 56px; padding-inline: 4px; }
  #hud .action-dock .abilities b { font-size: 9px; }
  #hud .interact-prompt { bottom: 122px; max-width: calc(100vw - 24px); }
  #hud .boss-vitals { bottom: 122px; }
}

@media (prefers-reduced-motion: reduce) {
  #hud .health-track > div,
  #hud .flight-actions button,
  #hud .action-dock button { transition: none; }
}

/* Release visual contract. This is the final layer over the legacy sheets while
 * individual screens migrate to the shared instrument vocabulary. */
:root {
  --font-display: var(--x-font-display) !important;
  --font-ui: var(--x-font-body) !important;
  --ink: var(--x-color-void) !important;
  --ground: var(--x-color-ground) !important;
  --panel: var(--x-color-surface-1) !important;
  --text: var(--x-color-ink) !important;
  --muted: var(--x-color-muted) !important;
  --border: var(--x-color-line) !important;
  --line: var(--x-color-line-soft) !important;
  --gold: var(--x-signal-objective) !important;
  --green: var(--x-signal-ready) !important;
  --red: var(--x-signal-danger) !important;
  --brand-ground: var(--x-color-ground) !important;
  --brand-face: var(--x-color-surface-1) !important;
  --brand-paper: var(--x-color-ink) !important;
  --brand-muted: var(--x-color-muted) !important;
  --brand-edge: var(--x-color-line) !important;
  --brand-corner: var(--x-signal-navigation) !important;
}

body {
  background: var(--x-color-void) !important;
  color: var(--x-color-ink) !important;
  font-family: var(--x-font-body) !important;
}

/* The command rail uses graphite hardware, with cyan for live navigation and
 * amber reserved for a decision. No inactive control is painted as an accent. */
.site-navigation .site-sidebar,
.site-navigation .site-menu-bar {
  border-color: var(--x-color-line) !important;
  background: linear-gradient(180deg, oklch(16% .028 232 / .98), oklch(9% .024 232 / .98)) !important;
  box-shadow: 0 20px 60px oklch(4% .02 232 / .55) !important;
  backdrop-filter: blur(14px);
}
.site-navigation .site-nav-group h2,
.site-navigation .site-nav-footer,
.site-page-label {
  color: var(--x-color-dim) !important;
}
.site-navigation .site-nav .nav-destinations a {
  border-color: transparent !important;
  color: var(--x-color-muted) !important;
  border-radius: 0 !important;
}
.site-navigation .site-nav .nav-destinations a:hover,
.site-navigation .site-nav .nav-destinations a:focus-visible {
  border-color: var(--x-signal-navigation) !important;
  background: oklch(86% .12 210 / .08) !important;
  color: var(--x-color-ink) !important;
}
.site-navigation .site-nav .nav-destinations a[aria-current="page"] {
  border-color: var(--x-signal-navigation) !important;
  background: oklch(86% .12 210 / .13) !important;
  color: var(--x-color-ink) !important;
  box-shadow: inset 0 1px var(--x-signal-navigation), 0 0 24px oklch(86% .12 210 / .12) !important;
}
.site-navigation .site-menu-bar button,
.site-sidebar-head > [data-nav-toggle] {
  border-color: var(--x-color-line) !important;
  border-radius: 0 !important;
  background: var(--x-color-surface-2) !important;
  color: var(--x-color-muted) !important;
}

/* Dialogs are deliberate mode changes, but read as instrument bays rather
 * than a purple generic overlay. */
#overlay.modal,
#overlay.transaction,
#overlay.satchel {
  background: oklch(6% .023 232 / .97) !important;
  backdrop-filter: blur(12px) !important;
}
#overlay.modal .modal-shade {
  background:
    linear-gradient(90deg, oklch(86% .12 210 / .055) 1px, transparent 1px),
    linear-gradient(0deg, oklch(86% .12 210 / .035) 1px, transparent 1px),
    radial-gradient(circle at 76% 12%, oklch(86% .12 210 / .12), transparent 34%),
    oklch(6% .023 232 / .92) !important;
  background-size: 32px 32px, 32px 32px, auto, auto !important;
}
#overlay.modal > .xscape-console,
#overlay.transaction > .transaction-panel,
#overlay.satchel > .satchel-panel {
  border: 1px solid var(--x-color-line) !important;
  border-radius: 0 !important;
  background: linear-gradient(145deg, oklch(18% .03 232 / .98), oklch(9% .023 232 / .99)) !important;
  box-shadow: 0 28px 90px oklch(4% .02 232 / .72), inset 0 1px oklch(95% .018 210 / .1) !important;
}
#overlay.modal > .xscape-console::before,
#overlay.transaction > .transaction-panel::before,
#overlay.satchel > .satchel-panel::before {
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, oklch(86% .12 210 / .05) 1px, transparent 1px),
    linear-gradient(0deg, oklch(86% .12 210 / .035) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  opacity: .8;
}
#overlay .xscape-console > header,
#overlay .transaction-panel .transaction-copy,
#overlay.satchel .satchel-panel > header {
  border-bottom-color: var(--x-color-line-soft) !important;
  background: linear-gradient(90deg, oklch(86% .12 210 / .09), transparent 72%) !important;
}
#overlay .xscape-console > header h2,
#overlay .transaction-panel h2,
#overlay.satchel .satchel-panel > header h2 {
  color: var(--x-color-ink) !important;
  font-family: var(--x-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 0 24px oklch(86% .12 210 / .18) !important;
}
#overlay .xscape-console .eyebrow,
#overlay .xscape-console .console-stamp,
#overlay .transaction-panel .console-stamp,
#overlay.satchel .satchel-floor,
#overlay.satchel .satchel-panel::after {
  color: var(--x-signal-navigation) !important;
}
#overlay .xscape-console .console-radar {
  border-color: var(--x-signal-navigation) !important;
  border-radius: 0 !important;
  background: radial-gradient(circle, var(--x-color-ink) 0 2px, transparent 3px), conic-gradient(from 0deg, oklch(86% .12 210 / .45), transparent 32%, transparent) !important;
  box-shadow: 0 0 20px oklch(86% .12 210 / .28) !important;
}
#overlay .xscape-console .close-button,
#overlay .transaction-panel .transaction-close,
#overlay.satchel .satchel-panel > header .close-button {
  border: 1px solid var(--x-color-line) !important;
  border-radius: 0 !important;
  background: var(--x-color-surface-2) !important;
  color: var(--x-color-ink) !important;
  box-shadow: none !important;
}
#overlay .xscape-console .close-button:hover,
#overlay .transaction-panel .transaction-close:hover,
#overlay.satchel .satchel-panel > header .close-button:hover {
  border-color: var(--x-signal-navigation) !important;
  color: var(--x-signal-navigation) !important;
}
#overlay .xscape-console > .panel-body,
#overlay.satchel .satchel-bag,
#overlay.satchel .satchel-detail {
  background: transparent !important;
}
#overlay .xscape-console > .panel-body p,
#overlay .transaction-panel p,
#overlay.satchel .satchel-panel p {
  color: var(--x-color-muted) !important;
}
#overlay .xscape-console > .panel-footer,
#overlay .transaction-panel .transaction-actions,
#overlay.satchel .satchel-panel .satchel-footer {
  border-top-color: var(--x-color-line-soft) !important;
  background: oklch(8% .024 232 / .94) !important;
}
#overlay .xscape-console > .panel-footer button,
#overlay .transaction-panel .transaction-actions button,
#overlay.satchel .satchel-panel .satchel-footer button {
  border: 1px solid var(--x-color-line) !important;
  border-radius: 0 !important;
  background: var(--x-color-surface-2) !important;
  color: var(--x-color-muted) !important;
  box-shadow: none !important;
}
#overlay .xscape-console > .panel-footer button:hover:not(:disabled),
#overlay .transaction-panel .transaction-actions button:hover:not(:disabled),
#overlay.satchel .satchel-panel .satchel-footer button:hover:not(:disabled) {
  border-color: var(--x-signal-navigation) !important;
  background: oklch(86% .12 210 / .12) !important;
  color: var(--x-color-ink) !important;
}
#overlay .xscape-console > .panel-footer button.primary,
#overlay .transaction-panel .transaction-actions button.primary,
#overlay.satchel .satchel-panel .satchel-footer button.primary {
  border-color: var(--x-signal-objective) !important;
  background: var(--x-signal-objective) !important;
  color: oklch(18% .035 76) !important;
  box-shadow: 0 0 24px oklch(84% .14 76 / .18) !important;
}
#overlay .xscape-console :is(.summary-grid > div, .blessings button, .item-card, .wallet-note, .vault-banner, .vault-pending),
#overlay.satchel .satchel-panel :is(.relic-slot, .empty-equipment) {
  border-color: var(--x-color-line) !important;
  border-radius: 0 !important;
  background: oklch(14% .027 232 / .88) !important;
  box-shadow: inset 0 1px oklch(95% .018 210 / .05) !important;
}

/* Habitat base and fabrication bay use the same system vocabulary as flight.
 * The information architecture stays intact, while the old purple treatment
 * is replaced by graphite surfaces and state colors. */
#overlay.camp,
#overlay.forge {
  background: var(--x-color-void) !important;
  color: var(--x-color-ink) !important;
}
#overlay.camp .camp-shell,
#overlay.forge .workshop {
  background:
    linear-gradient(90deg, oklch(86% .12 210 / .035) 1px, transparent 1px),
    linear-gradient(0deg, oklch(86% .12 210 / .022) 1px, transparent 1px),
    linear-gradient(145deg, oklch(14% .028 232 / .98), oklch(7% .022 232 / .99)) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
}
#overlay.camp .camp-top,
#overlay.camp .loadout-label,
#overlay.camp .weapon-detail,
#overlay.camp .preparation-skin,
#overlay.camp .practice-entry,
#overlay.camp .camp-secondary-actions,
#overlay.camp .camp-bottom,
#overlay.forge .workshop > header,
#overlay.forge .tabs,
#overlay.forge .workshop > footer {
  border-color: var(--x-color-line-soft) !important;
}
#overlay.camp .edition,
#overlay.camp .xscape-loadout-kicker,
#overlay.camp .camp-storage,
#overlay.camp .camp-character,
#overlay.camp .entry-note,
#overlay.camp .loadout-label > span:last-child,
#overlay.camp .weapon-profile,
#overlay.camp .weapon-check,
#overlay.camp .camp-note > p,
#overlay.camp .weapon-copy small,
#overlay.forge .section-line,
#overlay.forge .inventory-tools label,
#overlay.forge .camp-storage-note,
#overlay.forge .workshop > footer {
  color: var(--x-color-muted) !important;
}
#overlay.camp .camp-main h1,
#overlay.camp .camp-note h2,
#overlay.forge .workshop h2,
#overlay.forge .relic-meta b,
#overlay.forge .item-detail h3 {
  color: var(--x-color-ink) !important;
  font-family: var(--x-font-display) !important;
  font-weight: 400 !important;
  text-shadow: 0 0 22px oklch(86% .12 210 / .14) !important;
}
#overlay.camp .camp-main h1 em { color: var(--x-signal-navigation) !important; }
#overlay.camp .weapon-picker,
#overlay.camp .camp-note,
#overlay.forge .camp-inventory,
#overlay.forge .item-detail {
  border-color: var(--x-color-line-soft) !important;
  background: oklch(10% .024 232 / .58) !important;
}
#overlay.camp .weapon-picker::before {
  color: var(--x-signal-navigation) !important;
  border-color: var(--x-color-line-soft) !important;
}
#overlay.camp .weapon-choice {
  border: 0 !important;
  border-bottom: 1px solid var(--x-color-line-soft) !important;
  border-radius: 0 !important;
  color: var(--x-color-muted) !important;
  background: transparent !important;
}
#overlay.camp .weapon-choice:hover,
#overlay.camp .weapon-choice:focus-visible {
  border-color: var(--x-signal-navigation) !important;
  background: oklch(86% .12 210 / .08) !important;
  color: var(--x-color-ink) !important;
}
#overlay.camp .weapon-choice.chosen {
  border: 1px solid var(--x-signal-objective) !important;
  background: oklch(84% .14 76 / .1) !important;
  color: var(--x-color-ink) !important;
}
#overlay.camp .weapon-choice.chosen .weapon-index,
#overlay.camp .weapon-choice.chosen .weapon-profile,
#overlay.camp .weapon-choice.chosen .weapon-check { color: var(--x-signal-objective) !important; }
#overlay.camp .weapon-index,
#overlay.camp .weapon-profile,
#overlay.camp .weapon-check { color: var(--x-color-dim) !important; }
#overlay.camp .weapon-glyph {
  border-color: var(--x-color-line) !important;
  background: var(--x-color-surface-2) !important;
  color: var(--x-signal-navigation) !important;
}
#overlay.camp .camp-actions > .large,
#overlay.forge .item-detail .detail-actions button.primary {
  border-color: var(--x-signal-objective) !important;
  background: var(--x-signal-objective) !important;
  color: oklch(18% .035 76) !important;
  box-shadow: 0 0 28px oklch(84% .14 76 / .18) !important;
}
#overlay.camp .camp-actions > .large:hover,
#overlay.camp .camp-actions > .large:focus-visible {
  background: oklch(90% .12 76) !important;
}
#overlay.camp .camp-secondary-actions > *,
#overlay.camp .preparation-skin button,
#overlay.camp .practice-entry button,
#overlay.forge .tabs button,
#overlay.forge .item-detail .detail-actions button,
#overlay.forge .camp-inventory .inventory-tools select {
  border-color: var(--x-color-line) !important;
  background: transparent !important;
  color: var(--x-color-muted) !important;
  border-radius: 0 !important;
}
#overlay.camp .camp-secondary-actions > *:hover,
#overlay.camp .preparation-skin button:hover,
#overlay.camp .practice-entry button:hover,
#overlay.forge .tabs button:hover,
#overlay.forge .tabs button.active,
#overlay.forge .item-detail .detail-actions button:hover {
  border-color: var(--x-signal-navigation) !important;
  background: oklch(86% .12 210 / .09) !important;
  color: var(--x-color-ink) !important;
}
#overlay.forge .camp-relic-grid .relic-slot,
#overlay.forge .camp-relic-grid .relic-glyph,
#overlay.forge .camp-relic-portrait {
  border-color: var(--x-color-line-soft) !important;
  background: oklch(11% .024 232 / .8) !important;
}
#overlay.forge .camp-relic-grid .relic-slot:hover,
#overlay.forge .camp-relic-grid .relic-slot[aria-pressed="true"] {
  background: oklch(86% .12 210 / .08) !important;
  box-shadow: inset 0 1px var(--x-signal-navigation) !important;
}
#overlay.forge .camp-equipped-mark { color: var(--x-signal-ready) !important; }

/* Compact recovery alert. Routine connectivity loss belongs in the telemetry
 * layer, where the player can see the frozen run behind it. */
#notices .system-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(600px, calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid var(--x-signal-danger);
  border-radius: 0;
  background: linear-gradient(105deg, oklch(28% .07 27 / .97), oklch(11% .028 232 / .98) 58%);
  box-shadow: 0 14px 42px oklch(4% .02 232 / .6), 0 0 24px oklch(73% .16 27 / .14);
  color: var(--x-color-ink);
  text-align: left;
  pointer-events: auto;
  animation: system-alert-in 180ms var(--x-ease-instrument);
}
#notices .system-alert-signal {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--x-signal-danger);
  color: var(--x-signal-danger);
}
#notices .system-alert-signal span { width: 8px; height: 8px; background: currentColor; box-shadow: 0 0 12px currentColor; }
#notices .system-alert-copy { min-width: 0; display: grid; gap: 3px; }
#notices .system-alert-kicker { color: var(--x-signal-danger); font: 600 9px/1.2 var(--x-font-body); letter-spacing: .16em; }
#notices .system-alert-copy strong { overflow: hidden; font: 400 21px/1 var(--x-font-display); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
#notices .system-alert-copy p { margin: 0; overflow: hidden; color: var(--x-color-muted); font: 10px/1.35 var(--x-font-body); text-overflow: ellipsis; white-space: nowrap; }
#notices .system-alert-action { min-height: 40px; padding: 9px 13px; border: 1px solid var(--x-signal-objective); border-radius: 0; background: var(--x-signal-objective); color: oklch(18% .035 76); font: 600 9px/1 var(--x-font-body); letter-spacing: .1em; }
#notices .system-alert-action:hover { filter: brightness(1.06); }
@keyframes system-alert-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 520px) {
  #notices .system-alert { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; }
  #notices .system-alert-action { grid-column: 1 / -1; width: 100%; }
  #notices .system-alert-copy p { white-space: normal; }
}