@charset "UTF-8";
/**
 * Dev CSS entry → dist/css/screen.css
 * Shared chrome in _screenCore; debug-only styles in _screenDevOverlays.
 */
/**
 * Shared app chrome CSS for dev and production.
 * Entries: screen.scss (core + dev overlays), screen.prod.scss (core only).
 * Both always compile to dist/css/screen.css (see builder/gulpfile.js).
 */
/* Intro seed morphing buttons (boot.js / services/fullscreen.js) */
.mw-intro-seed-actions {
  position: fixed;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
  overflow: hidden;
}

.mw-intro-btn {
  position: absolute;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.6rem;
  height: 2.15rem;
  padding: 0 1.15rem;
  margin: 0;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ui-text-color, #f4f0fa);
  background: rgba(8, 6, 14, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--ui-radius-lg, 0.5rem);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.mw-intro-btn--primary {
  border-color: rgba(214, 186, 255, 0.55);
  background: rgba(14, 10, 22, 0.88);
}

.mw-intro-btn:hover,
.mw-intro-btn:focus-visible {
  outline: none;
  background: rgba(14, 10, 22, 0.92);
  border-color: rgba(214, 186, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(196, 160, 255, 0.35), 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 16px rgba(186, 140, 255, 0.3);
  transform: translate(-50%, -50%) scale(1.03);
}

.mw-intro-btn--primary:hover,
.mw-intro-btn--primary:focus-visible {
  border-color: rgba(214, 186, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(196, 160, 255, 0.5), 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 22px rgba(186, 140, 255, 0.45);
}

.mw-intro-btn-label {
  display: inline-block;
  white-space: nowrap;
  transition: opacity 0.1s ease;
}

.mw-intro-btn.is-collapsing {
  pointer-events: none;
  min-width: 0 !important;
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: transparent !important;
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.95), 0 0 24px 8px rgba(214, 186, 255, 0.85) !important;
  transform: translate(-50%, -50%) scale(1) !important;
  will-change: transform, width, height, border-radius, box-shadow;
  transition: width 0.42s cubic-bezier(0.2, 0.8, 0.25, 1), height 0.42s cubic-bezier(0.2, 0.8, 0.25, 1), min-width 0.42s cubic-bezier(0.2, 0.8, 0.25, 1), padding 0.42s cubic-bezier(0.2, 0.8, 0.25, 1), border-radius 0.42s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.42s ease;
}

.mw-intro-btn.is-collapsing .mw-intro-btn-label {
  opacity: 0 !important;
  transition: opacity 0.08s ease;
}

.mw-intro-btn.is-done {
  opacity: 0 !important;
  visibility: hidden;
}

@media (max-width: 600px) {
  .mw-intro-btn {
    min-width: 6.2rem;
    height: 2rem;
    padding: 0 0.85rem;
    font-size: 0.7rem;
  }
}
/* Initial fullscreen offer (services/fullscreen.js) — early, above load chrome. */
.mw-fullscreen-prompt {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(0.75rem + env(safe-area-inset-top, 0px)) calc(0.75rem + env(safe-area-inset-right, 0px)) calc(0.75rem + var(--mw-vv-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px)) calc(0.75rem + env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, #000 42%, transparent);
  pointer-events: auto;
}

.mw-fullscreen-prompt__panel {
  width: min(18rem, 100%);
  border: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--ui-background) 94%, transparent);
  color: var(--ui-text-color);
  box-shadow: var(--ui-shadow-panel);
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  backdrop-filter: blur(6px);
}

.mw-fullscreen-prompt__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.mw-fullscreen-prompt__body {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ui-text-color) 82%, transparent);
}

.mw-fullscreen-prompt__actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.1rem;
}

.mw-fullscreen-prompt__btn {
  appearance: none;
  border: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-input-background-active);
  color: var(--ui-text-color);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.42rem 0.65rem;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.mw-fullscreen-prompt__btn--primary {
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (hover: hover) {
  .mw-fullscreen-prompt__btn:hover {
    background: var(--ui-fill-hover);
    border-color: var(--ui-focus-ring);
  }
}
.mw-fullscreen-prompt__btn:focus-visible {
  outline: 0.125rem solid var(--ui-focus-ring);
  outline-offset: 0.1rem;
}

@media (max-width: 1024px), (max-aspect-ratio: 10/9), ((max-height: 540px) and (max-width: 1280px)) {
  .mw-fullscreen-prompt__panel {
    width: min(12.5rem, 100%);
    padding: 0.45rem 0.55rem;
    gap: 0.32rem;
  }
  .mw-fullscreen-prompt__title {
    font-size: 0.64rem;
  }
  .mw-fullscreen-prompt__body {
    font-size: 0.54rem;
  }
  .mw-fullscreen-prompt__btn {
    font-size: 0.56rem;
    padding: 0.32rem 0.45rem;
  }
}
/* UI tokens in rem (1rem = root font-size; default browser ~16px). */
:root {
  /* BodyLabels + services/browser.js setzen --mw-dpr bei Resize; Startwert bis zum ersten Sync. */
  --mw-dpr: 1;
  --mw-coarse-pointer: 0;
  --ui-background: rgba(60, 60, 60, 0.5);
  /* Weicheres Gelb wie Flyout-Rand (statt #fb0). */
  --ui-accent: rgb(242, 223, 176);
  --ui-accent-line: rgba(242, 223, 176, 0.45);
  /* Innen-Trenner (z. B. Body-Control-Leiste), gleiche Stärke wie Außenrahmen wahrnehmbar */
  --ui-divider: color-mix(in srgb, var(--ui-accent-line) 65%, transparent);
  --ui-focus-ring: rgba(242, 223, 176, 0.65);
  /* Dezent, einheitlich für Hover-Zeilen + Fokus im Suchfeld */
  --ui-fill-hover: rgba(255, 255, 255, 0.07);
  --ui-fill-focus-soft: rgba(255, 255, 255, 0.09);
  --ui-radius-lg: 0.5rem;
  --ui-shadow-panel: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.28);
  --ui-border-width: 0.125rem;
  --ui-border: var(--ui-border-width) solid var(--ui-accent-line);
  --ui-border-disabled: 0.125rem solid #555;
  --ui-text-color: var(--ui-accent);
  --ui-text-color-disabled: #555;
  --ui-padding: 0.9375rem;
  --ui-input-background: transparent;
  --ui-input-background-active: rgba(60, 60, 60, 0.5);
  --ui-input-margin: 0 0 0.625rem;
  --ui-input-width: 11.25rem;
  --ui-input-padding: 0.3125rem;
  --ui-select-background-active: transparent;
}

/* Shared dark overlay scrollbars (BodyControl flyout, AP target list, …). */
.mw-dark-scroll {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(186, 198, 220, 0.32) rgba(6, 8, 14, 0.92);
}
.mw-dark-scroll::-webkit-scrollbar {
  width: 0.5rem;
}
.mw-dark-scroll::-webkit-scrollbar-track {
  background: rgba(6, 8, 14, 0.92);
}
.mw-dark-scroll::-webkit-scrollbar-thumb {
  background: rgba(186, 198, 220, 0.32);
  border-radius: 0.25rem;
  border: 0.1rem solid rgba(6, 8, 14, 0.92);
}
.mw-dark-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(186, 198, 220, 0.48);
}
.mw-dark-scroll::-webkit-scrollbar-corner {
  background: rgba(6, 8, 14, 0.92);
}

html {
  font-size: calc(100% / var(--mw-browser-zoom, 1));
}

/*
 * Kompaktes Layout: leichte Root-Schrift-Anhebung mit DPR (Touch-Lesbarkeit).
 * Früher 0.38× — wirkte mit rem-UI zu groß; 0.1× hält ~16–19px Basis bei DPR 1–3.
 */
@media (max-width: 1024px), (max-aspect-ratio: 10/9), ((max-height: 540px) and (max-width: 1280px)) {
  html {
    font-size: calc(16px * (1 + 0.1 * min(2, max(0, var(--mw-dpr) - 1))) / var(--mw-browser-zoom, 1));
  }
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-500.woff2") format("woff2");
}
html,
body {
  margin: 0;
  padding: 0;
  /* Layout viewport — canvas/overlays follow --mw-vv-* (visual viewport box). */
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: #000;
  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
  /*
   * Single source of truth for selection: no per-panel user-select rules.
   * Blocks drag-select during mouse-steer / orbit pan. Form fields opt in below.
   */
  -webkit-user-select: none;
  user-select: none;
}

body {
  font-size: 1rem;
  line-height: 1.35;
}

/* Editable controls must remain selectable / caret-friendly. */
input,
textarea,
select,
[contenteditable=true] {
  -webkit-user-select: text;
  user-select: text;
}

/*
 * Chrome Android (also “desktop site” + Bluetooth keyboard) auto-zooms the
 * visual viewport onto focused fields whose computed font-size is < 16px and
 * often never un-zooms (reload keeps the tab scale). Floor all text fields.
 */
html :is(input:not([type]),
input[type=text],
input[type=search],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
input[type=url],
textarea,
select) {
  font-size: max(16px, 1em) !important;
}

.hide {
  display: none;
}

input,
select {
  background: var(--ui-input-background);
  border: var(--ui-border);
  color: var(--ui-text-color);
  margin: var(--ui-input-margin);
  padding: var(--ui-input-padding);
  width: var(--ui-input-width);
  font: inherit;
}

input:focus,
select:focus {
  background: var(--ui-input-background-active);
  border: var(--ui-border);
}

select {
  width: calc(var(--ui-input-width) + var(--ui-input-padding) * 2 + var(--ui-border-width) * 2);
}

select,
::picker(select) {
  border-radius: 0;
  appearance: base-select;
}

option {
  background: #000;
  color: var(--ui-text-color);
}

option:hover {
  background: #333;
}

button {
  background: var(--ui-input-background);
  border: var(--ui-border);
  color: var(--ui-text-color);
  margin: var(--ui-input-margin);
  padding: var(--ui-input-padding);
  font: inherit;
}

button:disabled,
input:disabled,
select:disabled {
  border: var(--ui-border-disabled);
  color: var(--ui-text-color-disabled);
}

button:active,
button.enabled {
  border-color: #f00;
  color: #f00;
}

label {
  display: block;
  font-size: 0.75rem;
}

.ui .disabled {
  color: var(--ui-text-color-disabled);
  border-color: var(--ui-border-disabled);
}

.speed-control {
  border: var(--ui-border);
  padding: var(--ui-padding);
  color: var(--ui-text-color);
  background: var(--ui-background);
  width: 33%;
  min-width: 12.5rem;
  position: fixed;
  top: 0.9375rem;
  right: 0.9375rem;
}

.speed-control input {
  width: 100%;
}

.tooltip {
  position: fixed;
  z-index: 1300;
  color: #fff;
  pointer-events: none;
  font-size: 0.75rem;
}

.tooltip-content.orbit-hover {
  background: color-mix(in srgb, #121820 88%, transparent);
  border: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  padding: 0.28rem 0.45rem;
  line-height: 1.25;
  white-space: nowrap;
}

.orbit-hover-name {
  font-weight: 600;
}

.orbit-hover-when {
  opacity: 0.88;
  font-variant-numeric: tabular-nums;
}

@keyframes calc-spin {
  to {
    transform: rotate(360deg);
  }
}
.maneuver-control {
  color: var(--ui-text-color);
  position: fixed;
  bottom: calc(5rem + var(--mw-vv-inset-bottom, 0px));
  left: 0.9375rem;
  min-width: fit-content;
  max-width: max-content;
  z-index: 1090;
}

.minimized .maneuver-control .collapsible-area {
  display: none !important;
}

.minimized .maneuver-control .hint,
.minimized .maneuver-control .description,
.minimized .maneuver-control .maneuver,
.minimized .maneuver-control .target-selection,
.minimized .maneuver-control .execute,
.minimized .maneuver-control .countdown {
  display: none !important;
}

.maneuver-control[hidden] {
  display: none !important;
}

body.mw-target-orbit-planning .maneuver-control {
  display: none !important;
}

body.mw-maneuver-mode .cockpit-ui-ap-toggle,
body.mw-maneuver-mode .cockpit-ui-ap-run,
body.mw-maneuver-mode .cockpit-ui-trade-info,
body.mw-maneuver-mode .cockpit-ui-trade-open {
  display: none !important;
}

.maneuver-control .description {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  opacity: 0.9;
}

.maneuver-control .maneuver {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.55rem;
}

.maneuver-control .dv-row {
  display: grid;
  grid-template-columns: 4.6rem minmax(3.5rem, 1fr) auto;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
}

.maneuver-control .dv-label {
  opacity: 0.8;
}

.maneuver-control .dv-value {
  font-variant-numeric: tabular-nums;
}

.maneuver-control .dv-unit {
  opacity: 0.6;
  font-size: 0.65rem;
}

.maneuver-control .dv-edit {
  position: relative;
  min-height: 1.2rem;
}

.maneuver-control input[type=number],
.maneuver-control select {
  height: 1.2rem;
  font: inherit;
  font-size: 1em !important;
  padding: 0 0.2rem;
  box-sizing: border-box;
  margin: 0;
  width: 4rem;
}

.maneuver-control .dv-row .dv-input {
  display: none;
}

.maneuver-control .dv-row:hover .dv-value,
.maneuver-control .dv-row:focus-within .dv-value {
  display: none;
}

.maneuver-control .dv-row:hover .dv-input,
.maneuver-control .dv-row:focus-within .dv-input {
  display: block;
}

.maneuver-control .time-row {
  grid-template-columns: 4.6rem minmax(3.5rem, 1fr) auto;
}

.maneuver-control .time-row .s {
  display: block;
}

.maneuver-gizmo-layer {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--mw-vvw, 100vw);
  height: var(--mw-vvh, 100dvh);
  pointer-events: none;
  z-index: 1120;
}

.maneuver-gizmo-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(8, 12, 20, 0.85);
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
  /* Position via left/top (no transition). Scale/filter only on hover/drag. */
  scale: 1;
  transition: scale 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.15s ease-out;
}

.maneuver-gizmo-handle:hover {
  scale: 1.6;
  filter: brightness(1.35) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

.maneuver-gizmo-handle:active,
.maneuver-gizmo-handle.is-dragging {
  cursor: grabbing;
  scale: 1.4;
  filter: brightness(1.2);
}

.maneuver-gizmo-handle.prograde {
  background: #ffe066;
}

.maneuver-gizmo-handle.retrograde {
  background: #c9a227;
}

.maneuver-gizmo-handle.normal {
  background: #c080ff;
}

.maneuver-gizmo-handle.antinormal {
  background: #6a3aa0;
}

.maneuver-gizmo-handle.radial {
  background: #55e0ff;
}

.maneuver-gizmo-handle.antiradial {
  background: #1a7a90;
}

.maneuver-gizmo-handle.time {
  width: 16px;
  height: 16px;
  background: #e8f0ff;
  border: 2px solid #8aa4c8;
}

.maneuver-control .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ui-background);
  padding: 0;
  border: var(--ui-border);
  height: 1.4rem;
}

.maneuver-control .head-left {
  display: flex;
  align-items: center;
  height: 100%;
}

.maneuver-control .head-left > span.title-text {
  padding: 0 0.4rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
}

.maneuver-control .head .next,
.maneuver-control .head .prev {
  cursor: pointer;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.maneuver-control .head .prev {
  border-right: 0.0625rem solid var(--ui-border-color);
}

.maneuver-control .head .next {
  border-left: 0.0625rem solid var(--ui-border-color);
}

.maneuver-control .head-tools {
  display: flex;
  gap: 0.2rem;
  padding: 0 0.2rem;
  align-items: center;
}

.maneuver-control .head-tools button {
  padding: 0 0.3rem;
  height: 1.1rem;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.maneuver-control .collapsible-area {
  border: var(--ui-border);
  padding: var(--ui-padding);
  background: var(--ui-background);
  margin-top: 0.2rem;
}

.maneuver-control .execute-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.maneuver-control button.execute {
  flex: 1;
  height: 1.4rem;
  font-size: 0.75rem;
  padding: 0;
  margin: 0;
}

.maneuver-control .countdown {
  font-size: 0.75rem;
  white-space: nowrap;
}

.maneuver-control button.calculate {
  width: 5rem;
  height: 1.2rem;
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  --calc-progress: 0%;
  background: linear-gradient(to right, rgba(255, 187, 0, 0.28) 0%, rgba(255, 187, 0, 0.28) var(--calc-progress), transparent var(--calc-progress), transparent 100%), var(--ui-input-background);
}

.maneuver-control button.calculate.loading::after {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-left: 0.375rem;
  border: 0.125rem solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -0.3125rem;
  margin-top: -0.3125rem;
  animation: calc-spin 0.8s linear infinite;
}

.maneuver-control .orbit-height {
  width: calc(var(--ui-input-width) - 5.3125rem);
}

/* Map: active-body name, top-left. Click/focus → underline + list below. */
.body-control {
  position: fixed;
  left: calc(0.75rem + env(safe-area-inset-left, 0px));
  top: calc(0.65rem + var(--mw-vv-inset-top, 0px));
  right: auto;
  bottom: auto;
  /* Above map AP/Cargo/Trade (1268) and the AP drop (1280). */
  z-index: 1294;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text-color);
  box-shadow: none;
  width: max-content;
  min-width: 0;
  max-width: min(22rem, 100vw - 8rem);
  box-sizing: border-box;
  pointer-events: auto;
}

.body-control-head {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
}

.body-control .body-search {
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 4rem;
  max-width: 100%;
  margin: 0;
  padding: 0 0 0.12rem;
  border: 0;
  border-bottom: 0.125rem solid transparent;
  border-radius: 0;
  box-sizing: border-box;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: inherit;
  background: transparent;
  outline: none;
  min-height: 0;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.body-control .body-search::placeholder {
  color: inherit;
  opacity: 0.45;
  font-weight: 600;
}

.body-control.is-editing .body-search,
.body-control .body-search:focus {
  border-bottom-color: color-mix(in srgb, var(--ui-text-color) 82%, transparent);
  text-shadow: none;
  cursor: text;
}

@media (hover: hover) {
  .body-control:not(.is-editing) .body-search:hover {
    border-bottom-color: color-mix(in srgb, var(--ui-text-color) 70%, transparent);
    cursor: pointer;
  }
}
.body-flyout-toggle {
  appearance: none;
  flex: 0 0 1.55rem;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  opacity: 0.9;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
  -webkit-tap-highlight-color: transparent;
}

.body-flyout-toggle[hidden] {
  display: none !important;
}

.body-flyout-toggle-icon {
  width: 0.9rem;
  height: 0.9rem;
  display: block;
  transform: rotate(180deg);
  shape-rendering: geometricPrecision;
}

.body-flyout-toggle-icon path {
  fill: currentColor;
}

@media (hover: hover) {
  .body-flyout-toggle:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
  }
}
.body-flyout-toggle:focus-visible {
  outline: 0.1rem solid color-mix(in srgb, var(--ui-text-color) 50%, transparent);
  outline-offset: 0.05rem;
}

.body-control-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 0.35rem);
  right: auto;
  bottom: auto;
  width: max-content;
  min-width: 12rem;
  max-width: min(22rem, 100vw - 1.5rem);
  /* Remaining viewport under the name (do not use 100% — parent height is auto). */
  max-height: calc(100dvh - 0.65rem - var(--mw-vv-inset-top, 0px) - 2.4rem - 0.45rem - var(--mw-vv-inset-bottom, 0px) - env(safe-area-inset-bottom, 0px));
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, #05070c 72%, transparent);
  box-shadow: none;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  backdrop-filter: blur(8px);
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(186, 198, 220, 0.32) rgba(6, 8, 14, 0.92);
}
.body-control-popover::-webkit-scrollbar {
  width: 0.5rem;
}
.body-control-popover::-webkit-scrollbar-track {
  background: rgba(6, 8, 14, 0.92);
}
.body-control-popover::-webkit-scrollbar-thumb {
  background: rgba(186, 198, 220, 0.32);
  border-radius: 0.25rem;
  border: 0.1rem solid rgba(6, 8, 14, 0.92);
}
.body-control-popover::-webkit-scrollbar-thumb:hover {
  background: rgba(186, 198, 220, 0.48);
}
.body-control-popover::-webkit-scrollbar-corner {
  background: rgba(6, 8, 14, 0.92);
}

.body-control-popover[hidden] {
  display: none !important;
}

.body-control-tree {
  --mw-body-tree-indent: 12px;
  padding: 0.2rem 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  min-height: 0;
  min-width: 100%;
  width: max-content;
  box-sizing: border-box;
}

.body-tree-empty {
  padding: 0.4rem 0.55rem;
  font-size: 0.72rem;
  opacity: 0.75;
  line-height: 1.35;
}

.body-tree-row {
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
  min-height: 1.7rem;
  padding: 0.05rem 0.3rem 0.05rem 0;
  padding-left: calc(var(--tree-depth, 0) * var(--mw-body-tree-indent, 12px) + 0.1rem);
}

.body-tree-row.is-active {
  background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
}

.body-tree-row.is-kb-highlight {
  outline: 0.1rem solid color-mix(in srgb, var(--ui-text-color) 45%, transparent);
  outline-offset: -0.1rem;
}

.body-tree-tw {
  flex: 0 0 1.7rem;
  width: 1.7rem;
  min-width: 1.7rem;
  min-height: 1.7rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1;
  border-radius: 0;
  opacity: 0.88;
  -webkit-tap-highlight-color: transparent;
}

.body-tree-tw:not(.is-leaf) {
  cursor: pointer;
}

.body-tree-tw.is-leaf {
  cursor: default;
  pointer-events: auto;
  visibility: visible;
}

.body-tree-select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.7rem;
  display: flex;
  align-items: center;
  padding: 0.1rem 0.35rem;
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.body-tree-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  letter-spacing: 0.01em;
}

@media (hover: hover) {
  .body-tree-tw:not(.is-leaf):hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .body-tree-row:has(.body-tree-select:hover) {
    background: var(--ui-fill-hover);
  }
  .body-tree-row.is-active:has(.body-tree-select:hover) {
    background: color-mix(in srgb, var(--ui-accent) 22%, transparent);
  }
}
.body-tree-tw:focus-visible,
.body-tree-select:focus-visible {
  outline: 0.1rem solid color-mix(in srgb, var(--ui-text-color) 50%, transparent);
  outline-offset: 0.05rem;
}

@media (max-width: 1024px), (max-aspect-ratio: 10/9) {
  .body-control {
    left: calc(0.55rem + env(safe-area-inset-left, 0px));
    top: calc(0.5rem + var(--mw-vv-inset-top, 0px));
    max-width: min(18rem, 100vw - 5.5rem);
  }
  .body-control .body-search {
    font-size: 1rem;
  }
  .body-control-popover {
    max-width: min(18rem, 100vw - 1.2rem);
    max-height: calc(100dvh - 0.5rem - var(--mw-vv-inset-top, 0px) - 2.15rem - 0.4rem - var(--mw-vv-inset-bottom, 0px) - env(safe-area-inset-bottom, 0px));
  }
}
.camera-ui {
  position: fixed;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  /* Above session chips (1260) so zoom stays clickable in map sessions. */
  z-index: 1270;
  width: 2.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text-color);
  box-shadow: none;
  padding: 0;
  display: grid;
  grid-template-rows: 2.25rem minmax(11rem, 38vh) 2.25rem;
  gap: 0.4rem;
  pointer-events: auto;
  --camera-zoom-track-len: min(38vh, 17rem);
}

/** Stats sit under the BodyControl name (top-left). */
.camera-ui-focus-text {
  position: fixed;
  left: calc(0.75rem + env(safe-area-inset-left, 0px));
  top: calc(0.65rem + var(--mw-vv-inset-top, 0px) + 1.88rem);
  bottom: auto;
  width: min(28rem, 100vw - 8rem);
  z-index: 1240;
  color: var(--ui-text-color);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}

.camera-ui-focus-name {
  display: none;
}

.camera-ui-focus-stats {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.62rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--ui-text-color) 88%, transparent);
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.camera-ui-distance {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: var(--ui-text-color);
  white-space: nowrap;
}

.camera-ui-zoom-btn {
  width: 2.25rem;
  height: 2.25rem;
  justify-self: center;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-background) 55%, transparent);
  color: var(--ui-text-color);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-ui-zoom-btn:active {
  background: color-mix(in srgb, var(--ui-background) 78%, white 8%);
}

.camera-ui-zoom-track-wrap {
  position: relative;
  height: 100%;
  width: 100%;
  border: 0;
}

.camera-ui-zoom-slider {
  position: absolute;
  inset: 0;
  cursor: ns-resize;
  touch-action: none;
}

.camera-ui-zoom-track {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 0.16rem;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.camera-ui-zoom-fill {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 0.16rem;
  height: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-text-color) 48%, transparent);
}

.camera-ui-zoom-thumb {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  border: 0;
  background: color-mix(in srgb, var(--ui-text-color) 92%, transparent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.camera-ui-zoom-slider:focus-visible .camera-ui-zoom-thumb {
  box-shadow: 0 0 0 2px rgba(24, 40, 66, 0.85), 0 0 0 4px rgba(79, 148, 255, 0.45);
}

.camera-ui-distance {
  position: absolute;
  right: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.68rem;
  line-height: 1.15;
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1024px), (max-aspect-ratio: 10/9) {
  .camera-ui {
    right: 0.25rem;
    /* Sit a bit lower so Map/Cockpit session chips (top-right) do not steal hits. */
    top: 54%;
    width: 2.1rem;
    grid-template-rows: 2.1rem minmax(11rem, 38vh) 2.1rem;
    gap: 0.35rem;
    --camera-zoom-track-len: min(38vh, 16rem);
    z-index: 1270;
  }
  .camera-ui-focus-text {
    left: calc(0.55rem + env(safe-area-inset-left, 0px));
    top: calc(0.5rem + var(--mw-vv-inset-top, 0px) + 1.68rem);
    width: min(22rem, 100vw - 5.5rem);
    gap: 0.08rem;
  }
  .camera-ui-zoom-btn {
    width: 2.1rem;
    height: 2.1rem;
  }
  .camera-ui-focus-stats {
    font-size: 0.52rem;
  }
  .camera-ui-distance {
    right: calc(100% + 0.45rem);
    max-width: 5.7rem;
  }
}
/**
 * Cockpit chrome layout tokens.
 * --cockpit-frame-border is set on :root from JS (0 outside cockpit, 20px/5px in cockpit).
 */
:root {
  --cockpit-frame-border: 0px;
  /* Gap inside the bezel (after frame border). */
  --cockpit-ui-gap: 0.75rem;
  /* Slightly tighter bottom so side stacks sit near the rim without looking sparse. */
  --cockpit-ui-gap-bottom: 0.4rem;
}

.cockpit-ui-btn[hidden] {
  display: none !important;
}

.cockpit-ui-btn {
  appearance: none;
  border: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-input-background-active);
  color: var(--ui-text-color);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .cockpit-ui-btn:hover:not(:disabled) {
    background: var(--ui-fill-hover);
    border-color: var(--ui-focus-ring);
  }
}
.cockpit-ui-btn:focus-visible {
  outline: 0.125rem solid var(--ui-focus-ring);
  outline-offset: 0.125rem;
}

.cockpit-ui-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--ui-text-color-disabled);
  border-color: var(--ui-border-disabled);
}

.cockpit-ui-btn--primary {
  width: 100%;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.72rem;
  padding: 0.4rem 0.65rem;
}

/*
 * Shared inset past the cockpit bezel (--cockpit-frame-border + --cockpit-ui-gap*).
 * Map mode forces frame-border to 0px via JS.
 */
/* Map / Cockpit toggle — upper right (below FPS strip). Never stretch full height. */
.cockpit-ui-session-controls {
  position: fixed;
  right: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.75rem) + env(safe-area-inset-right, 0px));
  top: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.75rem) + var(--mw-vv-inset-top, 0px));
  bottom: auto;
  width: max-content;
  max-width: min(16rem, 100vw - 5rem);
  height: auto;
  box-sizing: border-box;
  z-index: 1260;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 0;
  pointer-events: auto;
}

/** Kartenansicht: Session-Chips bleiben oben rechts (nicht strecken — Zoom-Control freilassen). */
.cockpit-ui-session-controls.cockpit-ui-session-controls--map {
  /* Map: frame border is 0; keep the same gap token. */
  right: calc(var(--cockpit-ui-gap, 0.75rem) + env(safe-area-inset-right, 0px));
  top: calc(var(--cockpit-ui-gap, 0.75rem) + var(--mw-vv-inset-top, 0px));
  bottom: auto;
  height: auto;
}

.cockpit-ui-session-controls[hidden] {
  display: none !important;
}

.cockpit-ui-view-toggle,
.cockpit-ui-ship-list-toggle,
.cockpit-ui-set-target {
  width: 100%;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cockpit-ui-ship-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.cockpit-ui-ship-list[hidden] {
  display: none !important;
}

.cockpit-ui-ship-list > .cockpit-ui-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  font-size: 0.78rem;
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
}

.cockpit-ui-ship-list > .cockpit-ui-btn.is-current {
  border-color: color-mix(in srgb, #9fc5ff 70%, var(--ui-accent-line));
}

.mw-structure-editor {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.mw-structure-editor[hidden] {
  display: none !important;
}

.mw-structure-editor-card {
  width: min(28rem, 100vw - 2rem);
  padding: 0.9rem 1rem 1rem;
  border: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: rgba(8, 10, 16, 0.92);
  color: var(--ui-text-color);
  box-shadow: var(--ui-shadow-panel);
}

.mw-structure-editor-title,
.mw-structure-editor-note,
.mw-structure-editor-status {
  margin: 0 0 0.55rem;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
}

.mw-structure-editor-title {
  font-weight: 600;
}

.mw-structure-editor-note,
.mw-structure-editor-status {
  font-size: 0.78rem;
  opacity: 0.9;
}

.mw-structure-editor-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.2rem;
}

.mw-structure-editor-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.2rem;
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mw-structure-editor-cell.is-shaft {
  background: rgba(214, 186, 255, 0.35);
}

.mw-structure-editor-cell.is-marked {
  background: rgba(110, 160, 255, 0.45);
}

.mw-structure-editor-cell.is-cursor {
  outline: 2px solid #f4e2a8;
  outline-offset: 1px;
}

.cockpit-ui-set-target[hidden] {
  display: none !important;
}

.cockpit-ui-thrust-panel[hidden] {
  display: none !important;
}

.cockpit-ui-orient-panel[hidden] {
  display: none !important;
}

.cockpit-ui-rendezvous-panel[hidden] {
  display: none !important;
}

.cockpit-ui-rendezvous-panel {
  border: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-background);
  color: var(--ui-text-color);
  box-shadow: var(--ui-shadow-panel);
  padding: 0.55rem 0.65rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow: hidden;
}

.cockpit-ui-rendezvous-toggle {
  width: 100%;
  text-align: center;
}

.cockpit-ui-rendezvous-toggle--active {
  border-color: var(--ui-focus-ring);
  background: color-mix(in srgb, var(--ui-accent) 22%, var(--ui-input-background-active));
  font-weight: 600;
}

.cockpit-ui-rendezvous-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cockpit-ui-rendezvous-standoff-label {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--ui-text-color) 90%, transparent);
}

/**
 * Left stack: Autopilot + orientation 2×2.
 * Inset by cockpit frame so controls sit inside the bezel, not under it.
 */
.cockpit-ui-left-controls {
  position: fixed;
  left: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.75rem) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap-bottom, 0.4rem) + var(--mw-vv-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
  /* Above mobile stick (1265) so AP toggle stays visible and clickable. */
  z-index: 1268;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  width: max-content;
  max-width: min(42rem, 100vw - 1.5rem);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  /* The stack is only a layout box. Empty padding must not eat map drags. */
  pointer-events: none;
  /* AP drop is absolutely positioned and may extend outside the stack box. */
  overflow: visible;
}

.cockpit-ui-left-controls[hidden] {
  display: none !important;
}

/* Map: sit on the bottom edge. The 8.25rem inset is cockpit-stick only. */
.cockpit-ui-left-controls.cockpit-ui-left-controls--map {
  bottom: calc(var(--cockpit-ui-gap-bottom, 0.4rem) + var(--mw-vv-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
}

.cockpit-ui-ap-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  position: relative;
  /* Drop sits above toggle; keep panel above orientation siblings. */
  z-index: 2;
}

.cockpit-ui-ap-meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.06rem;
  min-width: 0;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.cockpit-ui-ap-meta[hidden] {
  display: none !important;
}

.cockpit-ui-ap-meta-target,
.cockpit-ui-ap-meta-standoff {
  font-size: 0.62rem;
  line-height: 1.2;
  color: color-mix(in srgb, var(--ui-text-color) 88%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}

.cockpit-ui-ap-meta-target {
  font-weight: 600;
  color: color-mix(in srgb, #ffc878 88%, var(--ui-text-color));
}

.cockpit-ui-ap-main-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.28rem;
  min-width: 0;
}

.cockpit-ui-ap-main-row[hidden] {
  display: none !important;
}

.cockpit-ui-ap-toggle {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cockpit-ui-ap-run {
  flex: 0 0 auto;
  width: auto;
  min-width: 2.6rem;
  text-align: center;
}

/* Navigation / AP / Cargo / Trade and Cockpit / Map / Back-to-ship share one size. */
.cockpit-ui-ap-main-row > .cockpit-ui-btn,
.cockpit-ui-session-controls > .cockpit-ui-btn {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.4rem 0.65rem 0.48rem;
  min-height: 2.2rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Idle = start (green), running = stop (red). */
.cockpit-ui-ap-run:not(:disabled):not(.is-active):not(.is-confirm) {
  border-color: color-mix(in srgb, #6ecf9a 55%, var(--ui-accent-line));
  color: color-mix(in srgb, #c6f3d8 62%, var(--ui-text-color));
}

.cockpit-ui-ap-run.is-active {
  border-color: rgba(255, 90, 90, 0.85);
  background: color-mix(in srgb, rgba(180, 40, 40, 0.55) 70%, var(--ui-input-background-active));
  color: #ffc8c8;
}

.cockpit-ui-ap-run.is-confirm {
  border-color: rgba(255, 200, 80, 0.9);
  background: color-mix(in srgb, rgba(160, 110, 20, 0.55) 70%, var(--ui-input-background-active));
  color: #ffe9a8;
  min-width: 3.2rem;
}

.cockpit-ui-ap-toggle.is-open:not(:disabled) {
  border-color: var(--ui-focus-ring);
}

.cockpit-ui-ap-toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/**
 * Full-width single-row AP bar at cockpit bottom (borderless).
 * [search + flyout] | [standoff + range] | [Start] | [×]
 */
.cockpit-ui-ap-drop {
  position: fixed;
  left: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.75rem) + env(safe-area-inset-left, 0px));
  right: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.75rem) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap-bottom, 0.4rem) + var(--mw-vv-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
  top: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  /* Above ap-meta so the target flyout covers Target/Standoff. */
  z-index: 4;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.85rem;
  max-height: none;
  padding: 0.2rem 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  overflow: visible;
  pointer-events: none;
}

.cockpit-ui-ap-panel,
.cockpit-ui-ap-main-row,
.cockpit-ui-ap-search-col,
.cockpit-ui-ap-standoff-row,
.cockpit-ui-ap-orbit-cluster,
.cockpit-ui-ap-orbit-commit,
.cockpit-ui-ap-orbit-lower,
.cockpit-ui-ap-orbit-row,
.cockpit-ui-ap-orbit-top,
.cockpit-ui-ap-orbit-tools {
  pointer-events: none;
}

/* Safari does not hit children of a pointer-events:none box unless the
   control itself opts back in. The session chip is only as wide as its buttons. */
.cockpit-ui-left-controls :is(button, input, select, textarea, a),
.cockpit-ui-ap-drop :is(button, input, select, textarea, a),
.cockpit-ui-ap-drop .cockpit-ui-ap-results,
.cockpit-ui-session-controls,
.cockpit-ui-session-controls > .cockpit-ui-btn {
  pointer-events: auto;
}

.cockpit-ui-ap-drop[hidden] {
  display: none !important;
}

.cockpit-ui-ap-search-col {
  position: relative;
  flex: 1.1 1 0;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  z-index: 5;
  height: auto;
  min-height: 0;
}

.cockpit-ui-ap-search-col[hidden] {
  display: none !important;
}

/* Match BodyControl name field (underline, no box) — flyout opens upward.
   Two-class selectors beat global `input` / `input:focus` box chrome. */
.cockpit-ui-ap-drop .cockpit-ui-ap-search {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0 0 0.12rem;
  border: 0;
  border-bottom: 0.125rem solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text-color);
  -webkit-text-fill-color: var(--ui-text-color);
  caret-color: var(--ui-text-color);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  position: relative;
  z-index: 2;
  min-width: 0;
  outline: none;
  box-shadow: none;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.cockpit-ui-ap-drop .cockpit-ui-ap-search::placeholder {
  color: var(--ui-text-color);
  -webkit-text-fill-color: var(--ui-text-color);
  opacity: 0.45;
  font-weight: 600;
}

.cockpit-ui-ap-drop .cockpit-ui-ap-search:focus,
.cockpit-ui-ap-drop.is-search-focused .cockpit-ui-ap-search {
  background: transparent;
  border: 0;
  border-bottom: 0.125rem solid color-mix(in srgb, var(--ui-text-color) 82%, transparent);
  box-shadow: none;
  outline: none;
  color: var(--ui-text-color);
  -webkit-text-fill-color: var(--ui-text-color);
  caret-color: var(--ui-text-color);
  text-shadow: none;
  cursor: text;
}

@media (hover: hover) {
  .cockpit-ui-ap-drop .cockpit-ui-ap-search:hover {
    border-bottom-color: color-mix(in srgb, var(--ui-text-color) 70%, transparent);
  }
}
/** Flyout above search — BodyControl popover look, opening up. */
.cockpit-ui-ap-results {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 0.2rem);
  top: auto;
  width: max-content;
  min-width: 12rem;
  max-width: min(22rem, 100vw - 1.5rem);
  max-height: min(22rem, 100dvh - 7.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0.2rem 0 0.3rem;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, #05070c 72%, transparent);
  box-shadow: none;
  backdrop-filter: blur(8px);
  z-index: 8;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  -webkit-overflow-scrolling: touch;
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(186, 198, 220, 0.32) rgba(6, 8, 14, 0.92);
}
.cockpit-ui-ap-results::-webkit-scrollbar {
  width: 0.5rem;
}
.cockpit-ui-ap-results::-webkit-scrollbar-track {
  background: rgba(6, 8, 14, 0.92);
}
.cockpit-ui-ap-results::-webkit-scrollbar-thumb {
  background: rgba(186, 198, 220, 0.32);
  border-radius: 0.25rem;
  border: 0.1rem solid rgba(6, 8, 14, 0.92);
}
.cockpit-ui-ap-results::-webkit-scrollbar-thumb:hover {
  background: rgba(186, 198, 220, 0.48);
}
.cockpit-ui-ap-results::-webkit-scrollbar-corner {
  background: rgba(6, 8, 14, 0.92);
}

.cockpit-ui-ap-results[hidden] {
  display: none !important;
}

.cockpit-ui-ap-drop.is-search-focused .cockpit-ui-ap-results {
  max-height: min(28rem, 100dvh - 7rem);
}

.cockpit-ui-ap-result {
  appearance: none;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text-color);
  font: inherit;
  font-size: inherit;
  text-align: left;
  min-height: 1.7rem;
  padding: 0.1rem 0.55rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.cockpit-ui-ap-result:hover,
.cockpit-ui-ap-result.is-selected {
  background: var(--ui-fill-hover);
}

.cockpit-ui-ap-result.is-selected {
  background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
}

.cockpit-ui-ap-result.is-keyboard-active {
  outline: 0.1rem solid color-mix(in srgb, var(--ui-text-color) 45%, transparent);
  outline-offset: -0.1rem;
}

@media (hover: hover) {
  .cockpit-ui-ap-result.is-selected:hover {
    background: color-mix(in srgb, var(--ui-accent) 22%, transparent);
  }
}
.cockpit-ui-ap-result--empty {
  cursor: default;
  opacity: 0.65;
}

.cockpit-ui-ap-selected {
  display: none !important;
}

.cockpit-ui-ap-standoff-row {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 2.15rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0.22rem;
  transform: translateY(3px);
}

.cockpit-ui-ap-standoff-row[hidden] {
  display: none !important;
}

/* Orbit-height slider replaces standoff; never stack both thumbs. */
.cockpit-ui-ap-drop:has(.cockpit-ui-ap-orbit-row:not([hidden])) .cockpit-ui-ap-standoff-row {
  display: none !important;
}

.cockpit-ui-ap-standoff-val {
  flex: 0 0 auto;
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--ui-text-color) 90%, transparent);
  white-space: nowrap;
  line-height: 1.2;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.75);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cockpit-ui-ap-standoff-row .cockpit-ui-thrust-range {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  height: 1.25rem;
  box-sizing: border-box;
  margin: 0;
}

.cockpit-ui-ap-orbit-row {
  flex: 1.5 1 0;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 2.15rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0.22rem;
  transform: translateY(3px);
}

.cockpit-ui-ap-orbit-row[hidden] {
  display: none !important;
}

.cockpit-ui-ap-orbit-top {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  overflow: hidden;
}

.cockpit-ui-ap-orbit-height-label {
  flex: 0 0 auto;
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--ui-text-color) 75%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.cockpit-ui-ap-orbit-height-input {
  flex: 0 0 auto;
  width: 4.8rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  box-sizing: border-box;
  font-family: monospace, monospace;
  font-size: 0.78rem;
  color: #00d8ff;
  background: rgba(8, 14, 24, 0.85);
  border: 1px solid rgba(0, 216, 255, 0.4);
  border-radius: 2px;
  text-align: right;
}
.cockpit-ui-ap-orbit-height-input:focus {
  outline: none;
  border-color: #00ffff;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.45);
}
.cockpit-ui-ap-orbit-height-input::-webkit-inner-spin-button, .cockpit-ui-ap-orbit-height-input::-webkit-outer-spin-button {
  opacity: 0.4;
}

.cockpit-ui-ap-orbit-unit {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--ui-text-color) 70%, transparent);
  margin-right: 0.4rem;
}

.cockpit-ui-ap-orbit-stats {
  flex: 1 1 0;
  font-family: monospace, monospace;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--ui-text-color) 88%, transparent);
  white-space: nowrap;
  line-height: 1.2;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cockpit-ui-ap-orbit-slider {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 1.25rem;
  box-sizing: border-box;
  margin: 0;
}

/* Start / Close: content-sized, same control height as the row. */
.cockpit-ui-ap-drop .cockpit-ui-ap-start,
.cockpit-ui-ap-drop .cockpit-ui-ap-close {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 2.15rem;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1;
  padding: 0 0.75rem;
  font-size: 0.78rem;
  transform: translateY(5px);
}

.cockpit-ui-ap-orbit-cluster {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}

.cockpit-ui-ap-orbit-cluster[hidden] {
  display: none !important;
}

.cockpit-ui-ap-orbit-commit {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.22rem;
}

.cockpit-ui-ap-orbit-commit[hidden] {
  display: none !important;
}

.cockpit-ui-ap-orbit-lower {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem 0.45rem;
}

.cockpit-ui-ap-orbit-tools {
  flex: 0 0 auto;
  align-self: flex-end;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.22rem;
}

.cockpit-ui-ap-orbit-tools[hidden] {
  display: none !important;
}

.cockpit-ui-ap-drop .cockpit-ui-ap-orbit-tool {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  min-width: 2.15rem;
  max-width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  box-sizing: border-box;
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 500;
}

.cockpit-ui-ap-drop .cockpit-ui-ap-orbit-tool[hidden] {
  display: none !important;
}

.cockpit-ui-ap-drop .cockpit-ui-ap-orbit-cement {
  color: color-mix(in srgb, #8ef0b4 70%, var(--ui-text-color));
}

.cockpit-ui-ap-drop .cockpit-ui-ap-orbit-cancel {
  color: color-mix(in srgb, #ff9a8a 75%, var(--ui-text-color));
}

/* Map: left-aligned, but not so wide that tool buttons clip off-screen. */
.cockpit-ui-ap-drop.cockpit-ui-ap-drop--map {
  right: auto;
  width: max-content;
  max-width: calc(100vw - 1.2rem);
}

.cockpit-ui-ap-drop.cockpit-ui-ap-drop--map .cockpit-ui-ap-orbit-row {
  flex: 1 1 12rem;
  width: min(22rem, 50vw);
  max-width: min(22rem, 50vw);
  min-width: 8rem;
}

.cockpit-ui-ap-drop .cockpit-ui-ap-close {
  min-width: 2rem;
  padding: 0 0.45rem;
  font-size: 1.15rem;
  font-weight: 500;
}

/**
 * While the AP target menu is open: hide competing cockpit chrome.
 * Autopilot open-toggle is hidden in JS; close lives inside the bar.
 */
body.cockpit-ap-menu-open .cockpit-ui-ap-toggle,
body.cockpit-ap-menu-open .cockpit-ui-ap-run,
body.cockpit-ap-menu-open .cockpit-ui-ap-main-row,
body.cockpit-ap-menu-open .cockpit-ui-orient-panel,
body.cockpit-ap-menu-open .cockpit-ui-right-controls,
body.cockpit-ap-menu-open .cockpit-ui-mobile-stick,
body.cockpit-ap-menu-open .cockpit-ui-orbit-radar-frame,
body.cockpit-ap-menu-open .cockpit-ui-readout,
body.cockpit-ap-menu-open .cockpit-ui-collision-warning,
body.cockpit-ap-menu-open .cockpit-ui-session-controls,
body.cockpit-ap-menu-open .cockpit-ui-crosshair,
body.cockpit-ap-menu-open .cockpit-ui-nav-cluster,
body.cockpit-ap-menu-open .cockpit-ui-steer-intensity-ring,
body.cockpit-ap-menu-open .cockpit-ui-steer-pointer-ring {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
body.cockpit-ap-menu-open {
  /* Target readout stays above the bar; flyout (higher drop z-index) covers it. */
}
body.cockpit-ap-menu-open .cockpit-ui-ap-meta {
  visibility: visible;
  pointer-events: none;
  opacity: 1;
  margin-bottom: 3.4rem;
  z-index: 1;
}
body.cockpit-ap-menu-open {
  /* Map: keep Back-to-ship / Cockpit in the upper right. */
}
body.cockpit-ap-menu-open .cockpit-ui-session-controls.cockpit-ui-session-controls--map {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
body.cockpit-ap-menu-open .cockpit-ui-session-controls.cockpit-ui-session-controls--map > .cockpit-ui-btn {
  pointer-events: auto !important;
}

.cockpit-ui-orient-panel {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text-color);
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: visible;
  width: max-content;
  max-width: min(9rem, 100vw - 1.5rem);
  pointer-events: auto;
}

.cockpit-ui-orient-panel .cockpit-ui-thrust-label {
  display: none;
}

/* 2×2: Free | Pro / Target | Retro */
.cockpit-ui-orient-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.28rem;
}

.cockpit-ui-orient-btn {
  padding: 0.38rem 0.45rem;
  font-size: 0.72rem;
  text-align: center;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
}

.cockpit-ui-orient-btn--active {
  border-color: var(--ui-focus-ring);
  background: color-mix(in srgb, var(--ui-accent) 22%, var(--ui-input-background-active));
  font-weight: 600;
}

.cockpit-ui-orient-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/**
 * Right cockpit stack: accel setter, Q/E roll, Pro/Retro burn, Hold latch.
 * Transparent shell — only controls are visible. Inset by cockpit frame.
 */
.cockpit-ui-right-controls {
  position: fixed;
  right: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.75rem) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap-bottom, 0.4rem) + var(--mw-vv-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 1262;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  width: max-content;
  max-width: min(9.5rem, 100vw - 1.5rem);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.cockpit-ui-right-controls[hidden] {
  display: none !important;
}

.cockpit-ui-thrust-panel {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text-color);
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  overflow: visible;
  min-width: 7.5rem;
}

.cockpit-ui-thrust-label {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ui-text-color) 85%, transparent);
  text-align: center;
}

.cockpit-ui-burn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.28rem;
}

.cockpit-ui-burn-btn {
  padding: 0.42rem 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  min-width: 0;
}

.cockpit-ui-burn-btn.is-held,
.cockpit-ui-burn-btn.is-active {
  border-color: var(--ui-focus-ring);
  background: color-mix(in srgb, var(--ui-accent) 22%, var(--ui-input-background-active));
}

.cockpit-ui-burn-btn--pro.is-active,
.cockpit-ui-burn-btn--pro.is-held {
  background: color-mix(in srgb, rgba(80, 220, 140, 0.35) 50%, var(--ui-input-background-active));
}

.cockpit-ui-burn-btn--retro.is-active,
.cockpit-ui-burn-btn--retro.is-held {
  background: color-mix(in srgb, rgba(255, 120, 100, 0.35) 50%, var(--ui-input-background-active));
}

.cockpit-ui-burn-latch {
  padding: 0.35rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.cockpit-ui-burn-latch.is-active {
  border-color: var(--ui-focus-ring);
  background: color-mix(in srgb, var(--ui-accent) 22%, var(--ui-input-background-active));
}

/* Plain readout; only the temporary input looks editable (is-editing). */
.cockpit-ui-thrust-value {
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  font: 0.78rem monospace;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ui-accent);
  text-align: center;
  line-height: 1.25;
  min-height: 1.2em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cockpit-ui-thrust-value:disabled,
.cockpit-ui-thrust-value.is-readonly,
.cockpit-ui-thrust-value:disabled:focus,
.cockpit-ui-thrust-value:disabled:focus-visible,
.cockpit-ui-thrust-value.is-readonly:focus,
.cockpit-ui-thrust-value.is-readonly:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  cursor: default;
  opacity: 0.9;
  color: var(--ui-accent);
}

.cockpit-ui-thrust-value:focus-visible:not(:disabled):not(.is-readonly) {
  outline: 0.1rem solid var(--ui-focus-ring);
  outline-offset: 0.1rem;
  border-radius: 0.2rem;
}

.cockpit-ui-thrust-value-input {
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  appearance: none;
  font: 0.78rem monospace;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.25;
  color: var(--ui-text-color);
  background: var(--ui-input-background-active);
  border: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  padding: 0.28rem 0.4rem;
}

.cockpit-ui-thrust-value-input.is-editing,
.cockpit-ui-thrust-value-input:not([hidden]) {
  display: block;
}

.cockpit-ui-thrust-value-input:focus {
  outline: 0.1rem solid var(--ui-focus-ring);
  outline-offset: 0.05rem;
}

.cockpit-ui-thrust-range {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  accent-color: var(--ui-accent);
  cursor: pointer;
}

.cockpit-ui-thrust-step-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

.cockpit-ui-thrust-step {
  padding: 0.28rem 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/** Top-center under cockpit frame rim — same inner gap as side stacks. */
.cockpit-ui-readout {
  position: fixed;
  top: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.75rem) + var(--mw-vv-inset-top, 0px));
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 32;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  pointer-events: none;
  font: 0.75rem monospace;
  color: var(--ui-text-color);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 0;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  width: min(max-content, 100vw - 2 * var(--cockpit-frame-border, 0px) - 2 * var(--cockpit-ui-gap, 0.75rem));
  max-width: calc(100vw - 2 * var(--cockpit-frame-border, 0px) - 2 * var(--cockpit-ui-gap, 0.75rem));
  box-sizing: border-box;
  text-align: center;
  overflow: visible;
}

/* Nested under .cockpit-ui-readout — same type style as Altitude/Speed lines. */
.cockpit-ui-autopilot-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: inherit;
}

.cockpit-ui-autopilot-status[hidden] {
  display: none !important;
}

/* AP status is outside the nav-hud grid — keep a normal row (not display:contents). */
.cockpit-ui-autopilot-status__line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.45rem;
  width: 100%;
  max-width: 100%;
}

.cockpit-ui-autopilot-status__line .cockpit-ui-readout-val {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  max-width: 100%;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
}

.cockpit-ui-autopilot-status__rcs {
  width: fit-content;
  margin-top: 0.06rem;
  padding: 0;
  border: none;
  color: #9de6ff;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-shadow: 0 0 6px rgba(80, 205, 255, 0.65);
  white-space: nowrap;
}

.cockpit-ui-autopilot-status__rcs[hidden] {
  display: none !important;
}

/** Mobile attitude stick — bottom-left, always visible while usable. */
.cockpit-ui-mobile-stick {
  position: fixed;
  left: calc(0.75rem + env(safe-area-inset-left, 0px));
  bottom: calc(0.75rem + var(--mw-vv-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 1265;
  touch-action: none;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}

.cockpit-ui-mobile-stick[hidden] {
  display: none !important;
}

.cockpit-ui-mobile-stick.is-disabled {
  opacity: 0.32;
  pointer-events: none;
  filter: grayscale(0.35);
}

.cockpit-ui-mobile-stick__base {
  position: relative;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid rgba(140, 220, 255, 0.38);
  background: color-mix(in srgb, rgba(8, 16, 28, 0.55) 88%, transparent);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35), inset 0 0 12px rgba(106, 168, 215, 0.08);
  pointer-events: auto;
}

.cockpit-ui-mobile-stick__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid rgba(180, 235, 255, 0.55);
  background: color-mix(in srgb, rgba(120, 200, 255, 0.35) 70%, transparent);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: background 0.08s ease;
}

.cockpit-ui-mobile-stick__knob.is-active {
  background: color-mix(in srgb, rgba(160, 230, 255, 0.55) 75%, transparent);
  border-color: rgba(200, 245, 255, 0.75);
}

/* Below altitude/speed/target readout (not over it). */
.cockpit-ui-collision-warning {
  position: fixed;
  left: 50%;
  top: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.75rem) + 5.5rem + var(--mw-vv-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 34;
  display: block;
  pointer-events: none;
  border-radius: var(--ui-radius-lg);
  border: 1px solid rgba(255, 72, 72, 0.85);
  background: color-mix(in srgb, rgba(48, 8, 8, 0.92) 88%, transparent);
  box-shadow: 0 0 12px rgba(255, 40, 40, 0.35), var(--ui-shadow-panel);
  padding: 0.28rem 0.75rem 0.32rem;
  color: #ff6868;
  font: 0.78rem monospace;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.55);
}

.cockpit-ui-collision-warning[hidden] {
  display: none !important;
}

.cockpit-ui-target-hud {
  display: none !important;
}

.cockpit-ui-target-hud[hidden] {
  display: none !important;
}

.cockpit-ui-target-hud__label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 200, 120, 0.85);
}

.cockpit-ui-target-hud__name {
  font-weight: 700;
  color: #ffc878;
}

.cockpit-ui-target-hud__dist {
  color: color-mix(in srgb, #9fe3ff 92%, #ffc878);
}

/**
 * Two-column readout: labels | values, left-aligned, shared column gap.
 * `.readout-line` uses display:contents so keys/vals form one grid.
 */
.cockpit-ui-nav-hud {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content);
  column-gap: 0.55rem;
  row-gap: 0.1rem;
  align-items: baseline;
  justify-content: center;
  justify-items: start;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.cockpit-ui-readout-line {
  display: contents;
}

.cockpit-ui-readout-key {
  color: color-mix(in srgb, var(--ui-text-color) 72%, transparent);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.65rem;
  white-space: nowrap;
  text-align: left;
}

.cockpit-ui-readout-val {
  color: var(--ui-accent);
  white-space: nowrap;
  min-width: 0;
  max-width: min(70vw, 36rem);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

/** AP/PE — stay with altitude value; no mid-chunk wrap when space allows. */
.cockpit-ui-readout-chunk {
  display: inline;
  white-space: nowrap;
}

/** Full-viewport cockpit chrome (border/vignette; display toggled in JS). */
.cockpit-ui-frame {
  --cockpit-frame-border: 20px;
  position: fixed;
  inset: 0;
  z-index: 31;
  pointer-events: none;
  border: var(--cockpit-frame-border) solid rgba(10, 16, 26, 0.7);
  box-shadow: inset 0 0 0 2px rgba(120, 170, 220, 0.35), inset 0 0 80px rgba(0, 0, 0, 0.7);
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.55) 100%);
}

.cockpit-ui-crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
}

.cockpit-ui-crosshair__bar {
  position: absolute;
  background: rgba(140, 220, 255, 0.92);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.95), 0 0 1px rgba(255, 255, 255, 0.45);
  border-radius: 1px;
}

.cockpit-ui-crosshair__bar--h {
  left: -13px;
  top: -1px;
  width: 26px;
  height: 2px;
}

.cockpit-ui-crosshair__bar--v {
  left: -1px;
  top: -13px;
  width: 2px;
  height: 26px;
}

.cockpit-ui-crosshair__dot {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(200, 240, 255, 0.95);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

/**
 * Cockpit orbit mini-radar — horizontally centered.
 * Size is set only by JS (--cockpit-radar-size + inline width/height), incl. 25vh cap on resize.
 */
.cockpit-ui-orbit-radar-frame {
  position: fixed;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  bottom: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap-bottom, 0.4rem) + var(--mw-vv-inset-bottom, 0px));
  width: var(--cockpit-radar-size, 220px);
  height: var(--cockpit-radar-size, 220px);
  transform: none;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 32;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(106, 168, 215, 0.42);
  box-shadow: 0 0 8px rgba(106, 168, 215, 0.22), inset 0 0 14px rgba(106, 168, 215, 0.06);
}

.cockpit-ui-orbit-radar-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.cockpit-ui-orbit-radar-frame[hidden] {
  display: none !important;
}

/** Attitude stick: full-deflection ring (cheap border only; no shadows/gradients). */
.cockpit-ui-steer-intensity-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  /* ~half-transparent cyan; single solid border is the cheapest feedback path */
  border: 1px solid rgba(140, 220, 255, 0.28);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.cockpit-ui-steer-intensity-ring[hidden] {
  display: none !important;
}

/** Attitude stick: reticle at pointer (cursor hidden while held). */
.cockpit-ui-steer-pointer-ring {
  position: absolute;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
  box-sizing: border-box;
  border: 1.5px solid rgba(180, 235, 255, 0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
}

.cockpit-ui-steer-pointer-ring[hidden] {
  display: none !important;
}

/*
 * Compact cockpit chrome (phone / short landscape). Same query as browser.MOBILE_LAYOUT_QUERY.
 * ~1/4 linear scale vs desktop defaults — desktop rem sizes were drowning the viewport.
 */
@media (max-width: 1024px), (max-aspect-ratio: 10/9), ((max-height: 540px) and (max-width: 1280px)) {
  .cockpit-ui-btn {
    font-size: 0.58rem;
    padding: 0.32rem 0.45rem;
  }
  .cockpit-ui-btn--primary {
    font-size: 0.56rem;
    padding: 0.28rem 0.45rem;
  }
  /* Top-right only — never set bottom here (would stretch over the zoom strip). */
  .cockpit-ui-session-controls,
  .cockpit-ui-session-controls.cockpit-ui-session-controls--map {
    top: calc(1.1rem + var(--mw-vv-inset-top, 0px));
    right: calc(0.45rem + env(safe-area-inset-right, 0px));
    bottom: auto;
    height: auto;
    min-width: 0;
    /* Leave room for camera zoom strip on the right. */
    max-width: min(11rem, 100vw - 3.25rem - env(safe-area-inset-right, 0px));
    gap: 0.22rem;
  }
  .cockpit-ui-rendezvous-panel {
    padding: 0.28rem 0.35rem 0.3rem;
    gap: 0.18rem;
  }
  .cockpit-ui-right-controls {
    --cockpit-ui-gap: 0.55rem;
    --cockpit-ui-gap-bottom: 0.35rem;
    right: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.55rem) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap-bottom, 0.35rem) + var(--mw-vv-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
    max-width: min(7.2rem, 100vw - 1rem);
    gap: 0.22rem;
  }
  .cockpit-ui-thrust-panel {
    min-width: 0;
    gap: 0.12rem;
  }
  .cockpit-ui-thrust-label,
  .cockpit-ui-rendezvous-standoff-label {
    font-size: 0.48rem;
  }
  .cockpit-ui-thrust-value {
    font-size: 0.55rem;
  }
  .cockpit-ui-thrust-step {
    padding: 0.18rem 0.1rem;
    font-size: 0.65rem;
  }
  .cockpit-ui-burn-btn {
    padding: 0.32rem 0.2rem;
    font-size: 0.72rem;
  }
  .cockpit-ui-burn-latch {
    padding: 0.26rem 0.3rem;
    font-size: 0.52rem;
  }
  .cockpit-ui-left-controls {
    --cockpit-ui-gap: 0.55rem;
    --cockpit-ui-gap-bottom: 0.35rem;
    left: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.55rem) + env(safe-area-inset-left, 0px));
    /* Extra clearance above virtual stick so orientation grid does not collide. */
    bottom: calc(var(--cockpit-frame-border, 0px) + 8.25rem + var(--mw-vv-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 1.1rem);
    gap: 0.35rem;
    z-index: 1268;
  }
  .cockpit-ui-left-controls.cockpit-ui-left-controls--map {
    bottom: calc(var(--cockpit-ui-gap-bottom, 0.35rem) + var(--mw-vv-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
  }
  .cockpit-ui-ap-drop {
    --cockpit-ui-gap: 0.55rem;
    --cockpit-ui-gap-bottom: 0.35rem;
    left: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.55rem) + env(safe-area-inset-left, 0px));
    right: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.55rem) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap-bottom, 0.35rem) + var(--mw-vv-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
    padding: 0.15rem 0;
    gap: 0.65rem;
    z-index: 1280;
  }
  .cockpit-ui-ap-meta-target,
  .cockpit-ui-ap-meta-standoff {
    font-size: 0.5rem;
    max-width: 8.5rem;
  }
  .cockpit-ui-ap-run {
    min-width: 2.6rem;
  }
  .cockpit-ui-ap-search-col,
  .cockpit-ui-ap-standoff-row {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
  }
  .cockpit-ui-ap-standoff-row {
    min-height: 2rem;
  }
  .cockpit-ui-ap-search-col {
    min-height: 0;
    align-items: stretch;
  }
  .cockpit-ui-ap-drop .cockpit-ui-ap-search {
    min-height: 0;
    font-size: 1rem;
  }
  .cockpit-ui-ap-results {
    max-height: min(16rem, 100dvh - 8rem);
    max-width: min(18rem, 100vw - 1.2rem);
  }
  .cockpit-ui-ap-drop.is-search-focused .cockpit-ui-ap-results {
    max-height: min(20rem, 100dvh - 7.5rem);
  }
  .cockpit-ui-ap-standoff-val {
    font-size: 0.66rem;
  }
  .cockpit-ui-ap-drop .cockpit-ui-ap-start,
  .cockpit-ui-ap-drop .cockpit-ui-ap-close {
    height: 2rem;
    font-size: 0.7rem;
    padding: 0 0.55rem;
    width: auto;
    flex: 0 0 auto;
  }
  .cockpit-ui-ap-drop .cockpit-ui-ap-orbit-tool {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 0.95rem;
  }
  .cockpit-ui-ap-drop.cockpit-ui-ap-drop--map {
    left: calc(0.4rem + env(safe-area-inset-left, 0px));
    right: calc(0.4rem + env(safe-area-inset-right, 0px));
    width: auto;
    max-width: none;
    flex-wrap: wrap;
    gap: 0.35rem 0.4rem;
    align-items: flex-end;
  }
  .cockpit-ui-ap-drop.cockpit-ui-ap-drop--map .cockpit-ui-ap-orbit-cluster {
    flex: 1 1 100%;
    max-width: 100%;
    order: -1;
  }
  .cockpit-ui-ap-drop.cockpit-ui-ap-drop--map .cockpit-ui-ap-orbit-row {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .cockpit-ui-ap-orbit-slider {
    max-width: none;
  }
  .cockpit-ui-ap-orbit-height-input {
    width: 3.8rem;
    height: 1.25rem;
    font-size: 0.7rem;
  }
  .cockpit-ui-ap-orbit-stats {
    font-size: 0.65rem;
  }
  .cockpit-ui-ap-drop .cockpit-ui-ap-close {
    font-size: 1rem;
    padding: 0 0.35rem;
  }
  .cockpit-ui-ap-toggle {
    padding: 0.36rem 0.5rem 0.42rem;
  }
  .cockpit-ui-orient-panel {
    max-width: min(7.5rem, 100vw - 1.5rem);
    padding: 0;
    gap: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .cockpit-ui-orient-btn {
    padding: 0.28rem 0.35rem;
    font-size: 0.55rem;
    min-width: 0;
  }
  .cockpit-ui-orient-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem;
  }
  .cockpit-ui-ap-main-row > .cockpit-ui-btn,
  .cockpit-ui-session-controls > .cockpit-ui-btn {
    font-size: 0.74rem;
    line-height: 1;
    padding: 0.36rem 0.55rem 0.42rem;
    min-height: 2.05rem;
  }
  .cockpit-ui-readout {
    --cockpit-ui-gap: 0.55rem;
    top: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.55rem) + var(--mw-vv-inset-top, 0px));
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    gap: 0.08rem;
    font: 0.52rem monospace;
    padding: 0;
    width: min(max-content, 100vw - 2 * var(--cockpit-frame-border, 0px) - 2 * var(--cockpit-ui-gap, 0.55rem));
    max-width: calc(100vw - 2 * var(--cockpit-frame-border, 0px) - 2 * var(--cockpit-ui-gap, 0.55rem));
    background: none;
  }
  .cockpit-ui-nav-hud {
    min-width: 0;
    width: max-content;
    max-width: 100%;
    column-gap: 0.4rem;
    row-gap: 0.06rem;
  }
  .cockpit-ui-readout-key {
    font-size: 0.48rem;
    letter-spacing: 0.04em;
  }
  .cockpit-ui-readout-val {
    white-space: nowrap;
    max-width: min(72vw, 28rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cockpit-ui-autopilot-status__line .cockpit-ui-readout-val {
    font-size: 0.8rem;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .cockpit-ui-autopilot-status__rcs {
    font-size: 0.45rem;
  }
  .cockpit-ui-collision-warning {
    top: calc(var(--cockpit-frame-border, 0px) + var(--cockpit-ui-gap, 0.55rem) + 4.25rem + var(--mw-vv-inset-top, 0px));
    padding: 0.14rem 0.4rem 0.16rem;
    font: 0.5rem monospace;
  }
  .cockpit-ui-frame {
    --cockpit-frame-border: 5px;
    border-width: var(--cockpit-frame-border);
    box-shadow: inset 0 0 0 1px rgba(120, 170, 220, 0.3), inset 0 0 28px rgba(0, 0, 0, 0.55);
  }
  .cockpit-ui-crosshair__bar--h {
    left: -5px;
    top: 0;
    width: 10px;
    height: 1px;
  }
  .cockpit-ui-crosshair__bar--v {
    left: 0;
    top: -5px;
    width: 1px;
    height: 10px;
  }
  .cockpit-ui-crosshair__dot {
    left: -1px;
    top: -1px;
    width: 2px;
    height: 2px;
  }
  .cockpit-ui-steer-pointer-ring {
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-width: 1px;
  }
  .cockpit-ui-orbit-radar-frame {
    /* Defaults if JS vars lag one frame; JS sets --cockpit-radar-size to 56px. */
    --cockpit-radar-size: 56px;
    --cockpit-radar-bottom: 8px;
    box-shadow: 0 0 4px rgba(106, 168, 215, 0.2), inset 0 0 6px rgba(106, 168, 215, 0.05);
  }
}
/* —— Compact trade desk (spot only, keyboard-first) —— */
.cockpit-ui-trade-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: max(0.4rem, env(safe-area-inset-top)) max(0.4rem, env(safe-area-inset-right)) max(0.4rem, env(safe-area-inset-bottom)) max(0.4rem, env(safe-area-inset-left));
  background: rgba(4, 8, 14, 0.72);
  backdrop-filter: blur(5px);
  box-sizing: border-box;
}

.cockpit-ui-trade-overlay[hidden] {
  display: none !important;
}

.cockpit-ui-trade-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem 0.4rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(160, 190, 220, 0.32);
  background: color-mix(in srgb, rgba(12, 18, 28, 0.97) 90%, #0a1018);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  color: #e8f0f8;
  box-sizing: border-box;
  overflow: hidden;
}

.cockpit-ui-trade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cockpit-ui-trade-ship-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
}

.cockpit-ui-trade-ship-select {
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.2;
  padding: 0.1rem 0;
  max-width: min(16rem, 55vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  color: #e8f2fc;
  /* Multi-ship switch later: add border / button chrome when interactive. */
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
  opacity: 1;
  filter: none;
}

/* When multi-ship switching is wired, toggle this class on the label/button. */
.cockpit-ui-trade-ship-select.is-switchable {
  border: 1px solid rgba(160, 190, 220, 0.35);
  border-radius: 0.28rem;
  padding: 0.22rem 0.5rem;
  background: rgba(20, 32, 48, 0.55);
  cursor: pointer;
}

.cockpit-ui-trade-ship-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 12rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #b8cce0;
  line-height: 1.25;
}

.cockpit-ui-trade-ship-nav {
  color: #d0e4f8;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cockpit-ui-trade-ship-cargo {
  opacity: 0.88;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cockpit-ui-trade-header-right {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
}

.cockpit-ui-trade-close {
  min-width: 1.85rem;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
}

.cockpit-ui-trade-hint {
  font-size: 0.65rem;
  opacity: 0.72;
  line-height: 1.25;
  flex-shrink: 0;
}

.cockpit-ui-trade-pane {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.cockpit-ui-trade-table-wrap {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid rgba(140, 170, 200, 0.2);
  border-radius: 0.28rem;
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(186, 198, 220, 0.32) rgba(6, 8, 14, 0.92);
}
.cockpit-ui-trade-table-wrap::-webkit-scrollbar {
  width: 0.5rem;
}
.cockpit-ui-trade-table-wrap::-webkit-scrollbar-track {
  background: rgba(6, 8, 14, 0.92);
}
.cockpit-ui-trade-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(186, 198, 220, 0.32);
  border-radius: 0.25rem;
  border: 0.1rem solid rgba(6, 8, 14, 0.92);
}
.cockpit-ui-trade-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(186, 198, 220, 0.48);
}
.cockpit-ui-trade-table-wrap::-webkit-scrollbar-corner {
  background: rgba(6, 8, 14, 0.92);
}

.cockpit-ui-trade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
}

.cockpit-ui-trade-table th,
.cockpit-ui-trade-table td {
  padding: 0.28rem 0.35rem;
  text-align: left;
  border-bottom: 1px solid rgba(120, 150, 180, 0.12);
  vertical-align: middle;
}

.cockpit-ui-trade-table th {
  position: sticky;
  top: 0;
  background: rgba(16, 24, 36, 0.98);
  font-weight: 650;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.88;
  z-index: 1;
}

.cockpit-ui-trade-table tbody tr:hover {
  background: rgba(60, 100, 150, 0.1);
}

.cockpit-ui-trade-table tbody tr.is-focused {
  background: rgba(70, 130, 200, 0.22);
  outline: 1px solid rgba(120, 180, 255, 0.45);
  outline-offset: -1px;
}

.cockpit-ui-trade-col-sell.is-gain {
  color: #8fe3b0;
}

.cockpit-ui-trade-col-sell.is-loss {
  color: #ff9a90;
}

.cockpit-ui-trade-info-row.is-lot {
  padding-left: 0.85rem;
  opacity: 0.82;
  font-size: 0.7rem;
}

.cockpit-ui-map-station-market {
  position: fixed;
  z-index: 1288;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: 20rem;
  max-width: min(20rem, 100vw - 1rem);
  max-height: min(72vh, 36rem);
  overflow: visible;
  pointer-events: auto;
  color: var(--ui-text-color);
}

.cockpit-ui-map-station-market[hidden] {
  display: none !important;
}

.cockpit-ui-map-station-market-title {
  font-family: monospace;
  font-size: 12px;
  font-weight: 400;
  color: #a8aeb8;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px 4px 0 0;
  padding: 0;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.85);
  pointer-events: auto;
  width: 100%;
  min-width: 0;
}

.cockpit-ui-map-station-market .cockpit-ui-trade-pane,
.cockpit-ui-map-station-market .cockpit-ui-trade-footer {
  pointer-events: auto;
  min-width: 0;
}

.cockpit-ui-map-station-market .cockpit-ui-trade-pane {
  flex: 1 1 auto;
  min-height: 0;
}

.cockpit-ui-map-station-market .cockpit-ui-trade-table {
  table-layout: auto;
  width: 100%;
}

.cockpit-ui-map-station-market .cockpit-ui-trade-table-wrap {
  background: color-mix(in srgb, var(--ui-background, #101820) 72%, transparent);
  backdrop-filter: blur(10px);
  border-radius: 0;
  min-height: 8.75rem;
  max-height: min(42vh, 18rem);
}

.cockpit-ui-map-station-market .cockpit-ui-trade-sort-row {
  top: auto;
  bottom: 0;
  transform: translateY(calc(100% + 0.1rem));
}

.cockpit-ui-map-station-market .cockpit-ui-trade-footer {
  min-width: 0;
  max-width: 100%;
  padding: 0.28rem 0.35rem 0.4rem;
  background: color-mix(in srgb, var(--ui-background, #101820) 72%, transparent);
  backdrop-filter: blur(10px);
  border-radius: 0 0 0.28rem 0.28rem;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

.cockpit-ui-map-station-market .cockpit-ui-trade-footer-info {
  font-size: 0.62rem;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.3;
}

.cockpit-ui-map-station-market .cockpit-ui-trade-footer-info.is-stacked {
  min-height: 0;
}

.cockpit-ui-map-station-market .cockpit-ui-trade-footer-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}

.cockpit-ui-map-station-market .cockpit-ui-trade-footer-k {
  flex: 0 0 auto;
  min-width: 4.4rem;
  opacity: 0.75;
}

.cockpit-ui-map-station-market .cockpit-ui-trade-footer-v {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.cockpit-ui-map-station-market .cockpit-ui-trade-dock-buy,
.cockpit-ui-map-station-market .cockpit-ui-trade-dock-sell {
  min-height: 1.85rem;
  font-size: 0.74rem;
  padding: 0.22rem 0.5rem;
}

.cockpit-ui-trade-dock-sell.is-loss-confirm {
  color: #ff9a90;
}

.cockpit-ui-trade-table--no-partner .cockpit-ui-trade-col-partner {
  display: none;
}

.cockpit-ui-trade-col-commodity {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

.cockpit-ui-trade-col-you,
.cockpit-ui-trade-col-them {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
}

.cockpit-ui-trade-col-buy,
.cockpit-ui-trade-col-sell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
}

.cockpit-ui-trade-qty-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 auto;
}

.cockpit-ui-trade-qty-wrap input[type=range] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  accent-color: #7ec8ff;
  height: 1.45rem;
}

.cockpit-ui-trade-qty-val {
  min-width: 2rem;
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.cockpit-ui-trade-empty-cell {
  font-size: 0.74rem;
  opacity: 0.85;
  padding: 0.65rem 0.35rem;
  line-height: 1.35;
}

.cockpit-ui-trade-footer {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.cockpit-ui-trade-footer-info {
  font-size: 0.65rem;
  opacity: 0.82;
  line-height: 1.3;
  min-height: 1.3em;
}

.cockpit-ui-trade-dock {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.cockpit-ui-trade-dock-qty-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.cockpit-ui-trade-dock-qty {
  flex: 1 1 auto;
  min-width: 0;
}

.cockpit-ui-trade-dock-preset {
  flex: 0 0 auto;
  width: auto;
  min-width: 2.4rem;
  padding: 0.28rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 650;
}

.cockpit-ui-trade-dock-act-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  min-width: 0;
}

/* Keep the Trade/Sell slot in the right column (display:none would collapse it). */
.cockpit-ui-trade-dock-act-row.is-single .cockpit-ui-trade-dock-buy {
  visibility: hidden;
  pointer-events: none;
}

.cockpit-ui-trade-dock-buy,
.cockpit-ui-trade-dock-sell {
  width: 100%;
  min-width: 0;
  min-height: 2.2rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 650;
  box-sizing: border-box;
}

.cockpit-ui-trade-sort-row {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0.22rem;
  transform: translateY(calc(-100% - 0.12rem));
  display: flex;
  justify-content: flex-end;
  margin: 0;
  pointer-events: none;
}

.cockpit-ui-trade-sort {
  pointer-events: auto;
  flex: 0 0 auto;
  min-width: 3.2rem;
  min-height: 1.45rem;
  padding: 0.12rem 0.42rem;
  font-size: 0.62rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--ui-background, #101820) 82%, transparent);
}

.cockpit-ui-map-station-market .cockpit-ui-trade-sort {
  min-height: 1.35rem;
  font-size: 0.58rem;
  padding: 0.08rem 0.35rem;
}

.cockpit-ui-trade-open,
.cockpit-ui-trade-info {
  flex: 0 0 auto;
  min-width: 0;
}

.cockpit-ui-trade-btn-stack {
  display: none;
}

.cockpit-ui-trade-info-overlay {
  top: calc(0.4rem + var(--mw-vv-inset-top, 0px));
  right: auto;
  bottom: var(--mw-cargo-bottom, 5.75rem);
  left: calc(0.75rem + env(safe-area-inset-left, 0px));
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  z-index: 1305;
}

.cockpit-ui-trade-info-overlay:not([hidden]) {
  display: flex;
}

.cockpit-ui-trade-info-overlay .cockpit-ui-trade-info-dialog {
  pointer-events: auto;
  width: min(22.5rem, 100vw - 1.5rem);
  max-height: 100%;
  background: color-mix(in srgb, var(--ui-background, #101820) 48%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(190, 214, 236, 0.28);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.cockpit-ui-trade-info-section {
  padding: 0.35rem 0.7rem 0.25rem;
  font-size: 0.76rem;
  line-height: 1.35;
  flex: 0 0 auto;
}

.cockpit-ui-trade-info-cargo {
  border-bottom: 1px solid rgba(190, 214, 236, 0.16);
}

.cockpit-ui-trade-info-h {
  font-weight: 700;
  margin-bottom: 0.2rem;
  opacity: 0.9;
}

.cockpit-ui-trade-info-row,
.cockpit-ui-trade-info-empty,
.cockpit-ui-trade-info-line {
  padding: 0.14rem 0;
  color: var(--ui-text-color);
}

.cockpit-ui-trade-info-log {
  flex: 1 1 auto;
  min-height: 7.5rem;
  overflow-y: auto;
  padding: 0.4rem 0.7rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(186, 198, 220, 0.32) rgba(6, 8, 14, 0.92);
}
.cockpit-ui-trade-info-log::-webkit-scrollbar {
  width: 0.5rem;
}
.cockpit-ui-trade-info-log::-webkit-scrollbar-track {
  background: rgba(6, 8, 14, 0.92);
}
.cockpit-ui-trade-info-log::-webkit-scrollbar-thumb {
  background: rgba(186, 198, 220, 0.32);
  border-radius: 0.25rem;
  border: 0.1rem solid rgba(6, 8, 14, 0.92);
}
.cockpit-ui-trade-info-log::-webkit-scrollbar-thumb:hover {
  background: rgba(186, 198, 220, 0.48);
}
.cockpit-ui-trade-info-log::-webkit-scrollbar-corner {
  background: rgba(6, 8, 14, 0.92);
}

.cockpit-ui-trade-info-line.is-wait {
  opacity: 0.88;
}

.cockpit-ui-trade-info-line.is-loop-sum {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(190, 214, 236, 0.2);
  font-weight: 650;
}

.cockpit-ui-trade-info-line.is-stop-sum {
  opacity: 0.92;
}

.cockpit-ui-trade-open:disabled,
.cockpit-ui-trade-open.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

/* Narrow: collapse partner column — partner via goods tooltip */
@media (max-width: 720px) {
  .cockpit-ui-trade-col-partner {
    display: none;
  }
  .cockpit-ui-trade-hint {
    display: none;
  }
  .cockpit-ui-trade-table {
    font-size: 0.66rem;
  }
  .cockpit-ui-trade-dock-buy,
  .cockpit-ui-trade-dock-sell {
    min-height: 2.4rem;
  }
  .cockpit-ui-trade-footer-info {
    font-size: 0.6rem;
  }
}
.asset-load-ui {
  position: fixed;
  left: 50%;
  top: calc(1rem + var(--mw-vv-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 1300;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: rgba(0, 0, 0, 0.72);
  color: var(--ui-text-color);
  box-shadow: var(--ui-shadow-panel);
  pointer-events: none;
}

.asset-load-ui.is-hidden {
  display: none;
}

.asset-load-ui-spinner {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.95);
  animation: asset-load-ui-spin 0.8s linear infinite;
}

.asset-load-ui-label {
  font-size: 0.8rem;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@keyframes asset-load-ui-spin {
  to {
    transform: rotate(360deg);
  }
}
/* HTML orbit screen markers — SOI entry/exit, burn, collision, future knob/landing. */
.orbitScreenMarkerLayer {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--mw-vvw, 100vw);
  height: var(--mw-vvh, 100dvh);
  pointer-events: none;
  z-index: 1080;
  overflow: hidden;
}

.orbitScreenMarker {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  pointer-events: none;
  will-change: transform, opacity;
  /* Light shadow: overlapping opposite arrows must stay readable. */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
}
.orbitScreenMarker .ring {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2px solid rgba(210, 230, 255, 0.9);
  box-sizing: border-box;
  background: rgba(8, 14, 24, 0.1);
}
.orbitScreenMarker {
  /* Door metaphor (not physics): entry → in, exit ← out. Fixed LTR UI, no radial math. */
}
.orbitScreenMarker .arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}
.orbitScreenMarker.entry .ring {
  border-color: rgba(110, 230, 190, 0.95);
  background: rgba(8, 14, 24, 0.06);
  box-shadow: 0 0 6px rgba(80, 200, 160, 0.22);
}
.orbitScreenMarker.entry .arrow {
  /* ▶ rein */
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid rgba(120, 235, 185, 0.98);
}
.orbitScreenMarker.exit .ring {
  border-color: rgba(255, 190, 110, 0.95);
  background: rgba(8, 14, 24, 0.06);
  box-shadow: 0 0 6px rgba(220, 150, 60, 0.22);
}
.orbitScreenMarker.exit .arrow {
  /* ◀ raus */
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 8px solid rgba(255, 200, 120, 0.98);
}
.orbitScreenMarker.burn {
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
}
.orbitScreenMarker.burn .ring, .orbitScreenMarker.burn .core {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.orbitScreenMarker.burn:hover {
  z-index: 10;
}
.orbitScreenMarker.burn:hover .ring {
  transform: scale(1.5);
}
.orbitScreenMarker.burn:hover .core {
  transform: translate(-50%, -50%) scale(1.5);
}
.orbitScreenMarker.burn .ring {
  inset: 3px;
  border-width: 2px;
  background: rgba(8, 14, 24, 0.55);
}
.orbitScreenMarker.burn .core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
}
.orbitScreenMarker.burn.burn0 .ring {
  border-color: rgba(255, 90, 90, 0.95);
  box-shadow: 0 0 8px rgba(255, 90, 90, 0.4);
}
.orbitScreenMarker.burn.burn0 .core {
  background: rgba(255, 120, 120, 0.98);
}
.orbitScreenMarker.burn.burn1 .ring {
  border-color: rgba(90, 255, 120, 0.95);
  box-shadow: 0 0 8px rgba(90, 255, 120, 0.4);
}
.orbitScreenMarker.burn.burn1 .core {
  background: rgba(120, 255, 150, 0.98);
}
.orbitScreenMarker.burn.burn2 .ring {
  border-color: rgba(100, 140, 255, 0.95);
  box-shadow: 0 0 8px rgba(100, 140, 255, 0.4);
}
.orbitScreenMarker.burn.burn2 .core {
  background: rgba(130, 170, 255, 0.98);
}
.orbitScreenMarker.burn.burn3 .ring {
  border-color: rgba(255, 210, 80, 0.95);
  box-shadow: 0 0 8px rgba(255, 210, 80, 0.4);
}
.orbitScreenMarker.burn.burn3 .core {
  background: rgba(255, 240, 110, 0.98);
}
.orbitScreenMarker.burn.burn4 .ring {
  border-color: rgba(220, 120, 255, 0.95);
  box-shadow: 0 0 8px rgba(220, 120, 255, 0.4);
}
.orbitScreenMarker.burn.burn4 .core {
  background: rgba(250, 150, 255, 0.98);
}
.orbitScreenMarker.burn.burn5 .ring {
  border-color: rgba(80, 230, 230, 0.95);
  box-shadow: 0 0 8px rgba(80, 230, 230, 0.4);
}
.orbitScreenMarker.burn.burn5 .core {
  background: rgba(110, 255, 255, 0.98);
}
.orbitScreenMarker.burn.burn6 .ring {
  border-color: rgba(255, 150, 60, 0.95);
  box-shadow: 0 0 8px rgba(255, 150, 60, 0.4);
}
.orbitScreenMarker.burn.burn6 .core {
  background: rgba(255, 180, 90, 0.98);
}
.orbitScreenMarker.burn.burn7 .ring {
  border-color: rgba(180, 255, 90, 0.95);
  box-shadow: 0 0 8px rgba(180, 255, 90, 0.4);
}
.orbitScreenMarker.burn.burn7 .core {
  background: rgba(210, 255, 120, 0.98);
}
.orbitScreenMarker.burn.burn8 .ring {
  border-color: rgba(140, 180, 255, 0.95);
  box-shadow: 0 0 8px rgba(140, 180, 255, 0.4);
}
.orbitScreenMarker.burn.burn8 .core {
  background: rgba(170, 210, 255, 0.98);
}
.orbitScreenMarker.burn.burn9 .ring {
  border-color: rgba(255, 100, 180, 0.95);
  box-shadow: 0 0 8px rgba(255, 100, 180, 0.4);
}
.orbitScreenMarker.burn.burn9 .core {
  background: rgba(255, 130, 210, 0.98);
}
.orbitScreenMarker.burn.is-armed.burn-next .ring {
  animation: mw-burn-next-ring 1.5s ease-in-out infinite;
}
.orbitScreenMarker.burn.is-armed.burn-next .core {
  animation: mw-burn-next-core 1.5s ease-in-out infinite;
}
.orbitScreenMarker.burn.is-armed.burn-queued .ring {
  animation: mw-burn-queued-ring 2.4s ease-in-out infinite;
}
.orbitScreenMarker.burn.is-armed.burn-queued .core {
  opacity: 0.65;
}
.orbitScreenMarker.collision .ring {
  border-color: rgba(255, 70, 70, 0.95);
  background: rgba(40, 8, 8, 0.45);
  box-shadow: 0 0 8px rgba(255, 40, 40, 0.4);
}
.orbitScreenMarker.collision .xMark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
}
.orbitScreenMarker.collision .xMark::before, .orbitScreenMarker.collision .xMark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255, 120, 120, 0.95);
  transform: translateX(-50%) rotate(45deg);
}
.orbitScreenMarker.collision .xMark::after {
  transform: translateX(-50%) rotate(-45deg);
}
.orbitScreenMarker.landing .ring {
  border-color: rgba(160, 200, 255, 0.95);
  border-radius: 20%;
}
.orbitScreenMarker.landing .pad {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 10px;
  height: 3px;
  transform: translateX(-50%);
  background: rgba(180, 210, 255, 0.9);
  border-radius: 1px;
}
.orbitScreenMarker.knob .ring {
  inset: 2px;
  border: 1px solid rgba(10, 16, 28, 0.8);
  background: rgba(236, 244, 255, 0.96);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 7px rgba(150, 205, 255, 0.9);
}
.orbitScreenMarker.crosshair .ring {
  border-color: rgba(230, 235, 245, 0.9);
  inset: 4px;
  background: transparent;
}
.orbitScreenMarker.crosshair .cross {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
}
.orbitScreenMarker.crosshair .cross::before, .orbitScreenMarker.crosshair .cross::after {
  content: "";
  position: absolute;
  background: rgba(240, 245, 255, 0.95);
}
.orbitScreenMarker.crosshair .cross::before {
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}
.orbitScreenMarker.crosshair .cross::after {
  top: 50%;
  left: 0;
  height: 1.5px;
  width: 100%;
  transform: translateY(-50%);
}

@keyframes mw-burn-next-ring {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.55);
    opacity: 1;
  }
}
@keyframes mw-burn-next-core {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.35);
  }
}
@keyframes mw-burn-queued-ring {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.22);
    opacity: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .orbitScreenMarker.burn.is-armed .ring,
  .orbitScreenMarker.burn.is-armed .core {
    animation: none !important;
  }
}
/* Map orbit-line filter: ships / worlds / wrecks, left of the zoom rail.
 * `.orbit-filter-master` is reserved so a later compact mode can collapse
 * the tray behind one control. */
/* Top-center change toast — same chrome as `.asset-load-ui`. */
.orbit-filter-toast {
  position: fixed;
  left: 50%;
  top: calc(1rem + var(--mw-vv-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 1290;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.65rem;
  border: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: rgba(0, 0, 0, 0.72);
  color: var(--ui-text-color);
  box-shadow: var(--ui-shadow-panel);
  pointer-events: none;
  font-size: 0.8rem;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  max-width: min(28rem, 100vw - 2rem);
  text-align: center;
}

.orbit-filter-toast.is-hidden {
  display: none;
}

.orbit-filter-dock {
  position: fixed;
  right: 3.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1270;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  pointer-events: auto;
}

.orbit-filter-dock[hidden] {
  display: none !important;
}

.orbit-filter-master {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--ui-text-color) 28%, transparent);
  border-radius: var(--ui-radius-md);
  background: var(--ui-background);
  color: var(--ui-text-color);
  box-shadow: var(--ui-shadow-panel);
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.orbit-filter-tray {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.orbit-filter-slot {
  position: relative;
}

.orbit-filter-cycle {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--ui-text-color) 28%, transparent);
  border-radius: var(--ui-radius-md);
  background: var(--ui-background);
  color: var(--ui-text-color);
  box-shadow: var(--ui-shadow-panel);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.orbit-filter-cycle:active {
  background: rgba(255, 255, 255, 0.14);
}

.orbit-filter-cycle[data-mode=off] {
  color: color-mix(in srgb, var(--ui-text-color) 55%, transparent);
}

.orbit-filter-glyph {
  width: 1.15rem;
  height: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-filter-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}

.orbit-filter-flyout {
  position: absolute;
  right: calc(100% + 0.4rem);
  top: 50%;
  transform: translateY(-50%);
  min-width: 11.5rem;
  max-width: min(18rem, 70vw);
  padding: 0.28rem;
  border: 1px solid color-mix(in srgb, var(--ui-text-color) 28%, transparent);
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--ui-background) 94%, transparent);
  box-shadow: var(--ui-shadow-panel);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  backdrop-filter: blur(6px);
}

.orbit-filter-flyout[hidden] {
  display: none;
}

.orbit-filter-option {
  appearance: none;
  border: 0;
  border-radius: var(--ui-radius-md);
  background: transparent;
  color: var(--ui-text-color);
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
  padding: 0.38rem 0.5rem;
  cursor: pointer;
  line-height: 1.25;
}

.orbit-filter-option.is-active {
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

@media (hover: hover) {
  .orbit-filter-option:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}
@media (max-width: 1024px), (max-aspect-ratio: 10/9) {
  .orbit-filter-dock {
    right: 2.7rem;
    top: 54%;
  }
  .orbit-filter-cycle,
  .orbit-filter-master {
    width: 2.1rem;
    height: 2.1rem;
  }
}
/*
 * Build stamp: bottom-left. Dev JS hides it after intro (see _screenDevOverlays).
 * WASM builds keep `.is-wasm` visible so the physics engine is identifiable.
 */
.dev-build-stamp {
  position: fixed;
  left: 0;
  bottom: 0;
  top: auto;
  right: auto;
  z-index: 1001;
  max-width: min(22rem, 100vw);
  margin: 0;
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: #9ec8e8;
  font: 9px/1.2 monospace;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

.dev-build-stamp:empty {
  display: none;
}

/* Größe folgt VisualViewport-Variablen (services/browser.js), sonst dynamic viewport */
#body-label-layer {
  left: var(--mw-vv-left, 0px);
  top: var(--mw-vv-top, 0px);
  width: var(--mw-vvw, 100vw);
  height: var(--mw-vvh, 100dvh);
}

#body-label-layer.is-gizmo-idle,
#body-label-layer.is-gizmo-idle * {
  cursor: default !important;
}

#mw-intro-flash {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 196, 120, 0) 0%, rgba(255, 210, 150, 0.05) 6%, rgba(255, 220, 170, 0.14) 18%, rgba(255, 236, 205, 0.32) 34%, rgba(255, 248, 230, 0.62) 44%, rgba(255, 252, 245, 0.9) 48.5%, #fff 50%, rgba(255, 252, 245, 0.9) 51.5%, rgba(255, 248, 230, 0.62) 56%, rgba(255, 236, 205, 0.32) 66%, rgba(255, 220, 170, 0.14) 82%, rgba(255, 210, 150, 0.05) 94%, rgba(255, 196, 120, 0) 100%), linear-gradient(90deg, rgba(255, 255, 255, 0) 48.2%, rgba(255, 255, 255, 0.72) 49.4%, #fff 50%, rgba(255, 255, 255, 0.72) 50.6%, rgba(255, 255, 255, 0) 51.8%), radial-gradient(ellipse 7% 62% at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 248, 230, 0.28) 42%, rgba(255, 255, 255, 0) 72%);
  mix-blend-mode: screen;
}

.mw-account-gate {
  position: fixed;
  z-index: 1400;
  top: 0;
  right: 0;
  bottom: 0;
  width: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
}

.mw-account-gate.is-ready {
  animation: mw-account-gate-in 0.45s ease forwards;
}

.mw-account-gate-panel {
  pointer-events: none;
  width: 16rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ui-text-color);
}

.mw-account-gate-panel.is-pending {
  width: 100%;
  gap: 0.7rem;
}

.mw-account-gate.is-ready .mw-account-gate-panel {
  pointer-events: auto;
}

.mw-account-gate-status {
  min-height: 0.9rem;
  margin: 0;
  font-size: 0.72rem;
  color: #ffc8c8;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
}

.mw-account-gate-status:empty {
  display: none;
}

.mw-account-gate-label {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ui-text-color);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
}

.mw-account-gate-note {
  margin: 0 0 0.35rem;
  max-width: 18rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ui-text-color);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
}

.mw-account-gate-panel textarea,
.mw-account-gate-panel input[name=age] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.35;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--ui-radius-lg);
  outline: none;
  background: rgba(8, 6, 14, 0.84);
  color: var(--ui-text-color);
}

.mw-account-gate-panel textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.mw-account-gate-check {
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(214, 186, 255, 0.55);
  border-radius: var(--ui-radius-lg);
  background: rgba(110, 64, 176, 0.92);
  color: #f6efff;
  font: inherit;
  font-size: 0.75rem;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
}

.mw-account-gate-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.mw-account-gate-panel input[hidden] {
  display: none;
}

.mw-account-gate-panel input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 2.15rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-right: none;
  border-radius: var(--ui-radius-lg) 0 0 var(--ui-radius-lg);
  outline: none;
  background: rgba(8, 6, 14, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ui-text-color);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.mw-account-gate-panel input:focus {
  outline: none;
  background: rgba(14, 10, 22, 0.92);
  border-color: rgba(214, 186, 255, 0.72);
}

.mw-account-gate-panel input::selection {
  background: rgba(156, 108, 214, 0.55);
  color: #f7f2ff;
}

.mw-account-gate-row:focus-within .mw-account-gate-panel input {
  border-color: rgba(214, 186, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(196, 160, 255, 0.35), 0 10px 28px rgba(0, 0, 0, 0.35);
}

.mw-account-gate-send {
  flex: 0 0 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  line-height: 0;
  border: 1px solid rgba(214, 186, 255, 0.55);
  border-radius: 0 var(--ui-radius-lg) var(--ui-radius-lg) 0;
  outline: none;
  background: rgba(110, 64, 176, 0.92);
  color: #f6efff;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.mw-account-gate-row:focus-within .mw-account-gate-send {
  border-color: rgba(214, 186, 255, 0.9);
}

.mw-account-gate-send:hover,
.mw-account-gate-send:focus-visible {
  background: rgba(186, 140, 255, 0.72);
  box-shadow: 0 0 16px rgba(170, 110, 255, 0.5);
}

.mw-account-gate-send svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mw-account-gate-register,
.mw-account-gate-back {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ui-text-color);
  font: inherit;
  font-size: 0.68rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.8;
  text-decoration: underline;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
}

@media (pointer: coarse) {
  .mw-account-gate {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0.5rem 0.65rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    opacity: 0;
  }
  .mw-account-gate.is-ready {
    animation: mw-account-gate-in 0.45s ease forwards;
  }
  .mw-account-gate-panel,
  .mw-account-gate-row {
    width: 100%;
  }
  .mw-account-gate-panel input {
    width: auto;
  }
  .mw-account-gate.is-ready .mw-account-gate-panel {
    pointer-events: none;
    animation: mw-account-gate-hit 0s linear 0.45s forwards;
  }
}
@keyframes mw-account-gate-in {
  to {
    opacity: 1;
  }
}
@keyframes mw-account-gate-hit {
  to {
    pointer-events: auto;
  }
}
.mw-brand {
  position: fixed;
  z-index: 1300;
  top: 12vh;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem;
  box-sizing: border-box;
  pointer-events: none;
  color: #f4f1ea;
}

.mw-brand-line {
  margin: 0;
  white-space: pre;
}

.mw-brand-title {
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  line-height: 1;
}

.mw-brand-tag {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  padding-left: 0.11em;
  line-height: 1.3;
  color: #A0A5B5;
}

.mw-brand-ch {
  opacity: 0;
}

.mw-brand-ch.is-on {
  opacity: 1;
}

.mw-brand-ch.is-caret::after {
  content: "";
  display: inline-block;
  width: 0.07em;
  height: 0.82em;
  margin-left: 0.1em;
  background: currentColor;
  vertical-align: -0.05em;
  animation: mw-brand-blink 1.05s steps(1) infinite;
}

.mw-brand.is-out {
  animation: mw-brand-out 0.7s ease forwards;
}

@keyframes mw-brand-blink {
  0%, 45% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes mw-brand-out {
  to {
    opacity: 0;
  }
}
@media (max-width: 900px) {
  .mw-brand {
    top: 9vh;
  }
  .mw-brand-title {
    letter-spacing: 0.3em;
    padding-left: 0.3em;
  }
}
/* Top-left: mobile layout badge (same type metrics as FPS, 32px inset). */
.view-stats-mobile-badge {
  position: fixed;
  top: 0;
  left: 32px;
  margin: 0;
  padding: 0;
  z-index: 1101;
  border: none;
  background: transparent;
  color: #c8eef8;
  font-family: monospace;
  font-size: 9px;
  line-height: 9px;
  height: 9px;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

.view-stats-mobile-badge[hidden] {
  display: none !important;
}

/* Top-right: packet LEDs (vertical) + FPS/MS/MB. LEDs match FPS text height. */
.view-stats-compact-wrap {
  position: fixed;
  top: 0;
  right: 32px;
  margin: 0;
  padding: 0;
  z-index: 1101;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
}

.view-stats-socket-leds {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  /* Stack of two LEDs fills the same height as the FPS line (9px). */
  height: 9px;
  gap: 1px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.view-stats-compact {
  border: none;
  background: transparent;
  color: #c8eef8;
  font-family: monospace;
  font-size: 9px;
  line-height: 9px;
  height: 9px;
  letter-spacing: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  white-space: pre;
  text-align: left;
  cursor: pointer;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

.view-stats-menu-btn {
  margin: 0;
  padding: 0 0.2rem;
  height: 11px;
  line-height: 9px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #9fd4ef;
  font-family: monospace;
  font-size: 9px;
  cursor: pointer;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  flex-shrink: 0;
}

.view-stats-menu-btn:hover {
  color: #e8f7ff;
}

.mw-pause-menu {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(2, 6, 12, 0.62);
  backdrop-filter: blur(3px);
}

.mw-pause-menu[hidden] {
  display: none !important;
}

.mw-pause-menu-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: min(16rem, 100vw - 2rem);
}

.mw-pause-menu-title {
  margin: 0 0 0.35rem;
  color: #e8f4ff;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mw-pause-menu-item {
  width: 100%;
  margin: 0;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(140, 190, 220, 0.4);
  border-radius: 0.35rem;
  background: rgba(8, 16, 28, 0.92);
  color: #e7f3ff;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
}

.mw-pause-menu-item:hover,
.mw-pause-menu-item:focus-visible {
  border-color: rgba(190, 225, 255, 0.8);
  background: rgba(18, 36, 58, 0.96);
  outline: none;
}

/* Graphics settings overlay (replaces top-right bg-throttle checkbox). */
.mw-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: calc(1.5rem + env(safe-area-inset-top, 0px)) calc(0.75rem + env(safe-area-inset-right, 0px)) 1rem 0.75rem;
  background: rgba(2, 6, 12, 0.45);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

.mw-settings-overlay[hidden] {
  display: none !important;
}

.mw-settings-dialog {
  width: min(22rem, 100vw - 1.5rem);
  max-height: min(85vh, 36rem);
  overflow: auto;
  border: 1px solid rgba(120, 170, 210, 0.35);
  border-radius: 0.5rem;
  background: color-mix(in srgb, rgba(8, 14, 24, 0.96) 92%, #1a2a3c);
  color: #d8ecf8;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  font-size: 0.82rem;
}

.mw-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(120, 150, 180, 0.2);
}

.mw-settings-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mw-settings-close {
  border: none;
  background: transparent;
  color: #9ab;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

.mw-settings-close:hover {
  color: #eef;
}

.mw-settings-body {
  padding: 0.65rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mw-settings-section h3 {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8ab4d0;
  font-weight: 600;
}

.mw-settings-row--toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  cursor: pointer;
  line-height: 1.3;
}

.mw-settings-row--toggle input {
  margin-top: 0.15rem;
  accent-color: #7ec8ff;
}

.mw-settings-field-label {
  font-weight: 600;
  margin: 0.45rem 0 0.28rem;
  color: #cfe8f8;
}

.mw-settings-help {
  margin: 0.28rem 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: rgba(180, 210, 230, 0.72);
}

.mw-settings-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.mw-settings-seg-btn {
  flex: 1 1 auto;
  min-width: 3.5rem;
  padding: 0.32rem 0.4rem;
  border: 1px solid rgba(120, 160, 200, 0.35);
  border-radius: 0.28rem;
  background: rgba(12, 22, 36, 0.65);
  color: #b8d4e8;
  font-size: 0.75rem;
  cursor: pointer;
}

.mw-settings-seg-btn:hover {
  border-color: rgba(140, 200, 255, 0.55);
}

.mw-settings-seg-btn.is-active {
  border-color: #7ec8ff;
  background: color-mix(in srgb, #1a4060 70%, transparent);
  color: #e8f6ff;
  font-weight: 600;
}

.mw-settings-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.4rem;
  border-radius: 0.28rem;
  border: 1px solid rgba(120, 160, 200, 0.35);
  background: rgba(8, 16, 28, 0.9);
  color: #d8ecf8;
  font-size: 0.78rem;
}

.mw-settings-foot {
  margin: 0.25rem 0 0;
  font-size: 0.68rem;
  opacity: 0.65;
}

.view-stats-socket-led {
  /* (9px − 1px gap) / 2 → each LED matches half the FPS line height. */
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 0;
  opacity: 0.55;
  box-shadow: none;
  pointer-events: none;
}

.view-stats-socket-led--tx {
  background: #d27822;
}

.view-stats-socket-led--rx {
  background: #32a85c;
}

.view-stats-socket-led.is-pulse {
  animation: mw-stats-socket-led-pulse 0.24s ease-out;
}

@keyframes mw-stats-socket-led-pulse {
  0% {
    opacity: 0.5;
    filter: brightness(1);
  }
  40% {
    opacity: 1;
    filter: brightness(1.75);
  }
  100% {
    opacity: 0.5;
    filter: brightness(1);
  }
}
.view-stats-compact.is-expanded {
  min-width: 0;
}

/* Shared chrome targets for fade/hide. Keep lists in one place to avoid prod/dev drift. */
/* Map/cockpit chrome under body.* hide flags. asset-load only for H (stay visible while loading / disconnect).
 * .dev-build-stamp is excluded so WASM builds can keep it after intro. */
.body-control, .camera-ui, .camera-ui-focus-text, #body-label-layer, .view-stats-compact-wrap, .view-stats-mobile-badge, .tooltip, .planet-render-debug, .dev-info, .frame-pass-debug, .maneuver-control, .orbitScreenMarkerLayer, .orbit-filter-dock, .orbit-filter-toast, .asset-load-ui, .speed-control {
  transition: opacity 320ms ease;
}

/* Cover chrome created during module import (before main init). Asset load UI stays visible. */
body.mw-initial-ui-hidden .body-control, body.mw-initial-ui-hidden .camera-ui, body.mw-initial-ui-hidden .camera-ui-focus-text, body.mw-initial-ui-hidden #body-label-layer, body.mw-initial-ui-hidden .view-stats-compact-wrap, body.mw-initial-ui-hidden .view-stats-mobile-badge, body.mw-initial-ui-hidden .tooltip, body.mw-initial-ui-hidden .planet-render-debug, body.mw-initial-ui-hidden .dev-info, body.mw-initial-ui-hidden .frame-pass-debug, body.mw-initial-ui-hidden .maneuver-control, body.mw-initial-ui-hidden .orbitScreenMarkerLayer, body.mw-initial-ui-hidden .orbit-filter-dock, body.mw-initial-ui-hidden .orbit-filter-toast, body.mw-initial-ui-hidden .speed-control, body.mw-initial-ui-hidden [class^=cockpit-ui-], body.mw-initial-ui-hidden [class*=" cockpit-ui-"] {
  opacity: 0;
  pointer-events: none;
}

/**
 * Screenshot / clean view: H toggles (services/uiVisibility.js).
 * Includes asset-load + cockpit + map chrome + orbit HTML markers. Keeps disconnect overlay.
 */
body.mw-ui-hidden .body-control, body.mw-ui-hidden .camera-ui, body.mw-ui-hidden .camera-ui-focus-text, body.mw-ui-hidden #body-label-layer, body.mw-ui-hidden .view-stats-compact-wrap, body.mw-ui-hidden .view-stats-mobile-badge, body.mw-ui-hidden .tooltip, body.mw-ui-hidden .planet-render-debug, body.mw-ui-hidden .dev-info, body.mw-ui-hidden .frame-pass-debug, body.mw-ui-hidden .maneuver-control, body.mw-ui-hidden .orbitScreenMarkerLayer, body.mw-ui-hidden .orbit-filter-dock, body.mw-ui-hidden .orbit-filter-toast, body.mw-ui-hidden .speed-control, body.mw-ui-hidden [class^=cockpit-ui-], body.mw-ui-hidden [class*=" cockpit-ui-"], body.mw-ui-hidden .asset-load-ui {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/**
 * Socket disconnect / server-restart: hide chrome under the full-screen overlay.
 * Overlay itself is not listed here so the status panel stays visible.
 */
body.mw-socket-disconnected .body-control, body.mw-socket-disconnected .camera-ui, body.mw-socket-disconnected .camera-ui-focus-text, body.mw-socket-disconnected #body-label-layer, body.mw-socket-disconnected .view-stats-compact-wrap, body.mw-socket-disconnected .view-stats-mobile-badge, body.mw-socket-disconnected .tooltip, body.mw-socket-disconnected .planet-render-debug, body.mw-socket-disconnected .dev-info, body.mw-socket-disconnected .frame-pass-debug, body.mw-socket-disconnected .maneuver-control, body.mw-socket-disconnected .orbitScreenMarkerLayer, body.mw-socket-disconnected .orbit-filter-dock, body.mw-socket-disconnected .orbit-filter-toast, body.mw-socket-disconnected .speed-control, body.mw-socket-disconnected [class^=cockpit-ui-], body.mw-socket-disconnected [class*=" cockpit-ui-"] {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.mw-sim-fatal .body-control, body.mw-sim-fatal .camera-ui, body.mw-sim-fatal .camera-ui-focus-text, body.mw-sim-fatal #body-label-layer, body.mw-sim-fatal .view-stats-compact-wrap, body.mw-sim-fatal .view-stats-mobile-badge, body.mw-sim-fatal .tooltip, body.mw-sim-fatal .planet-render-debug, body.mw-sim-fatal .dev-info, body.mw-sim-fatal .frame-pass-debug, body.mw-sim-fatal .maneuver-control, body.mw-sim-fatal .orbitScreenMarkerLayer, body.mw-sim-fatal .orbit-filter-dock, body.mw-sim-fatal .orbit-filter-toast, body.mw-sim-fatal .speed-control, body.mw-sim-fatal [class^=cockpit-ui-], body.mw-sim-fatal [class*=" cockpit-ui-"] {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.mw-socket-connection-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.25rem;
  background: rgba(4, 8, 14, 0.82);
  color: #d7f0ff;
  pointer-events: auto;
}

.mw-socket-connection-overlay[hidden] {
  display: none !important;
}

.mw-socket-connection-overlay__panel {
  max-width: 26rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1.1rem 1.25rem 1.2rem;
  border: 1px solid rgba(140, 200, 255, 0.35);
  border-radius: 10px;
  background: color-mix(in srgb, rgba(10, 18, 28, 0.96) 92%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.mw-socket-connection-overlay__title {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.03em;
}

.mw-socket-connection-overlay__body {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: color-mix(in srgb, #d7f0ff 82%, transparent);
}

body.mw-server-restart-required .mw-socket-connection-overlay__title {
  color: #ffd08a;
}

body.mw-sim-fatal .mw-socket-connection-overlay__title {
  color: #ffb0b0;
}

/* Dev-only. Imported by screen.scss; omitted from screen.prod.scss (→ smaller prod screen.css). */
.frame-pass-debug {
  position: fixed;
  top: calc(3.5rem + env(safe-area-inset-top, 0px));
  left: calc(0.5rem + env(safe-area-inset-left, 0px));
  z-index: 1102;
  margin: 0;
  padding: 0.4rem 0.5rem;
  max-width: min(22rem, 100vw - 5.5rem);
  border: none;
  border-radius: 4px;
  background: rgba(4, 10, 16, 0.72);
  color: #d8f0c8;
  font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: left;
  white-space: pre;
  letter-spacing: 0;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.85);
}

.frame-pass-debug:focus {
  outline: 1px solid rgba(180, 220, 160, 0.45);
}

.frame-pass-debug.is-copied {
  outline: 1px solid rgba(180, 220, 160, 0.7);
}

/* After intro, hide the JS-dev stamp. WASM keeps `.is-wasm` visible. */
body:not(.mw-initial-ui-hidden) .dev-build-stamp:not(.is-wasm) {
  display: none !important;
}

.dev-info .mw-globe-diag {
  margin: 0;
  max-height: none;
  overflow: visible;
  font-size: 0.65rem;
  line-height: 1.25;
  white-space: pre-wrap;
  word-break: break-word;
}

.dev-info {
  position: fixed;
  top: 0.9375rem;
  left: 0.9375rem;
  z-index: 1000;
  max-width: min(26.25rem, 100vw - 1.875rem);
  max-height: min(88vh, 48rem);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  color: #f2dfb0;
  font: 0.75rem/1.35 monospace;
  pointer-events: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 223, 176, 0.42) rgba(28, 16, 8, 0.72);
}

.dev-info > [data-group=mw-console] {
  order: -20;
}

.dev-info > [data-group=globe-relief-all] {
  order: -10;
}

.dev-info .mw-console-cap {
  pointer-events: auto;
  max-height: none;
  overflow: visible;
  font-size: 0.62rem;
  line-height: 1.25;
  word-break: break-word;
  background: rgba(48, 10, 10, 0.9);
  border: 0.0625rem solid rgba(255, 160, 160, 0.65);
  color: #ffd6d6;
  padding: 0.35rem 0.45rem;
  margin-bottom: 0.125rem;
}

.dev-info .mw-console-cap strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #ffb0b0;
}

.dev-info .mw-console-line {
  margin: 0.2rem 0 0;
  padding: 0.15rem 0;
  border-top: 0.0625rem solid rgba(255, 200, 200, 0.2);
}

.dev-info .mw-globe-diag-wrap {
  pointer-events: auto;
}

.dev-info .mw-globe-diag-wrap summary {
  cursor: pointer;
  font-weight: 600;
  outline: none;
}

.dev-info .mw-globe-diag-gpu {
  margin: 0.25rem 0 0;
  max-height: none;
  overflow: visible;
  border-top: 0.0625rem solid rgba(176, 220, 255, 0.35);
  padding-top: 0.35rem;
  color: #c8e8ff;
}

.dev-info > div {
  margin: 0 0 0.375rem;
  padding: 0.375rem 0.5rem;
  border: 0.0625rem solid rgba(242, 223, 176, 0.65);
  background: rgba(28, 16, 8, 0.72);
  white-space: normal;
  word-break: break-word;
}

.dev-info .galactic-gas-debug {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: min(72vh, 35rem);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 223, 176, 0.42) rgba(12, 8, 4, 0.85);
}

.dev-info .galactic-gas-debug::-webkit-scrollbar {
  width: 0.4375rem;
}

.dev-info .galactic-gas-debug::-webkit-scrollbar-track {
  background: rgba(12, 8, 4, 0.88);
  border-radius: 0.25rem;
  margin: 0.125rem 0;
}

.dev-info .galactic-gas-debug::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(242, 223, 176, 0.38), rgba(200, 170, 120, 0.32));
  border-radius: 0.25rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.35);
}

.dev-info .galactic-gas-debug::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(242, 223, 176, 0.55), rgba(200, 170, 120, 0.45));
}

.dev-info .galactic-gas-debug h4 {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #f2dfb0;
}

.dev-info .galactic-gas-debug .gas-d-hint {
  margin: 0 0 0.625rem;
  font-size: 0.625rem;
  line-height: 1.35;
  color: rgba(242, 223, 176, 0.72);
}

.dev-info .galactic-gas-debug .gas-d-vis {
  display: block;
  margin-bottom: 0.625rem;
  cursor: pointer;
}

.dev-info .galactic-gas-debug .gas-d-tier {
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
}

.dev-info .galactic-gas-debug .gas-d-tier select {
  max-width: 100%;
  margin-top: 0.25rem;
  padding: 0.1875rem 0.3125rem;
  font: 0.6875rem/1.2 monospace;
  color: #f2dfb0;
  background: rgba(0, 0, 0, 0.45);
  border: 0.0625rem solid rgba(242, 223, 176, 0.5);
  cursor: pointer;
}

.dev-info .galactic-gas-debug .gas-d-preset-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}

.dev-info .galactic-gas-debug .gas-d-preset-btns button {
  pointer-events: auto;
  padding: 0.25rem 0.5rem;
  font: 0.625rem/1.2 monospace;
  color: #f2dfb0;
  background: rgba(0, 0, 0, 0.35);
  border: 0.0625rem solid rgba(242, 223, 176, 0.45);
  cursor: pointer;
}

.dev-info .galactic-gas-debug .gas-d-preset-btns button:hover {
  border-color: rgba(242, 223, 176, 0.85);
}

.dev-info .galactic-gas-debug .gas-d-built-presets {
  margin: 0 0 0.5rem;
  font-size: 0.625rem;
  opacity: 0.85;
  line-height: 1.35;
}

.dev-info .galactic-gas-debug .gas-d-json-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.dev-info .galactic-gas-debug .gas-d-json-tools button {
  pointer-events: auto;
  padding: 0.25rem 0.5rem;
  font: 0.625rem/1.2 monospace;
  color: #f2dfb0;
  background: rgba(0, 0, 0, 0.35);
  border: 0.0625rem solid rgba(242, 223, 176, 0.45);
  cursor: pointer;
}

.dev-info .galactic-gas-debug .gas-d-json-tools button:hover {
  border-color: rgba(242, 223, 176, 0.85);
}

.dev-info .galactic-gas-debug .gas-user-h {
  display: block;
  margin: 0.625rem 0 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(242, 223, 176, 0.95);
}

.dev-info .galactic-gas-debug .gas-user-save-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.dev-info .galactic-gas-debug .gas-user-name {
  flex: 1 1 7.5rem;
  min-width: 0;
  padding: 0.25rem 0.375rem;
  font: 0.625rem/1.2 monospace;
  color: #f2dfb0;
  background: rgba(0, 0, 0, 0.45);
  border: 0.0625rem solid rgba(242, 223, 176, 0.45);
}

.dev-info .galactic-gas-debug .gas-user-save {
  pointer-events: auto;
  padding: 0.25rem 0.5rem;
  font: 0.625rem/1.2 monospace;
  color: #f2dfb0;
  background: rgba(0, 0, 0, 0.35);
  border: 0.0625rem solid rgba(242, 223, 176, 0.45);
  cursor: pointer;
}

.dev-info .galactic-gas-debug .gas-user-save:hover {
  border-color: rgba(242, 223, 176, 0.85);
}

.dev-info .galactic-gas-debug .gas-user-preset-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 10rem;
  overflow-y: auto;
}

.dev-info .galactic-gas-debug .gas-user-preset-li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin-bottom: 0.375rem;
  font-size: 0.625rem;
  line-height: 1.35;
}

.dev-info .galactic-gas-debug .gas-user-preset-li span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.dev-info .galactic-gas-debug .gas-user-preset-li button {
  pointer-events: auto;
  padding: 0.1875rem 0.4375rem;
  font: 0.625rem/1.2 monospace;
  color: #f2dfb0;
  background: rgba(0, 0, 0, 0.35);
  border: 0.0625rem solid rgba(242, 223, 176, 0.45);
  cursor: pointer;
}

.dev-info .galactic-gas-debug .gas-user-preset-li button:hover {
  border-color: rgba(242, 223, 176, 0.85);
}

.dev-info .galactic-gas-debug .gas-d-feats {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.0625rem solid rgba(242, 223, 176, 0.25);
}

.dev-info .galactic-gas-debug .gas-d-feats-h {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(242, 223, 176, 0.95);
}

.dev-info .galactic-gas-debug .gas-d-feat {
  display: block;
  margin: 0.25rem 0 0.125rem;
  font-size: 0.625rem;
  cursor: pointer;
  line-height: 1.35;
}

.dev-info .galactic-gas-debug .gas-d-feat input {
  margin-right: 0.375rem;
  vertical-align: middle;
}

.dev-info .galactic-gas-debug .gas-d-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 0.625rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
}

.dev-info .galactic-gas-debug .gas-d-row label {
  min-width: 0;
  overflow-wrap: break-word;
}

.dev-info .galactic-gas-debug .gas-d-row input[type=range] {
  grid-column: 1/-1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  cursor: pointer;
}

.dev-info .galactic-gas-debug .gas-d-val {
  text-align: right;
  opacity: 0.92;
  font-variant-numeric: tabular-nums;
}

.dev-info .galactic-gas-debug #gas-debug-reset {
  pointer-events: auto;
  margin-top: 0.625rem;
  padding: 0.3125rem 0.625rem;
  font: 0.6875rem/1.2 monospace;
  color: #f2dfb0;
  background: rgba(0, 0, 0, 0.35);
  border: 0.0625rem solid rgba(242, 223, 176, 0.55);
  cursor: pointer;
}

.dev-info .galactic-gas-debug #gas-debug-reset:hover {
  border-color: rgba(242, 223, 176, 0.95);
}

.dev-info .planet-globe-debug {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: min(78vh, 38rem);
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 0.25rem;
  padding: 0.5rem 0.45rem 0.65rem;
  border: 0.0625rem solid rgba(180, 220, 255, 0.45);
  background: rgba(10, 20, 40, 0.82);
  color: #d8ecff;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 220, 255, 0.35) rgba(8, 16, 32, 0.9);
}

.dev-info .planet-globe-debug .pgd-h {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e8f4ff;
}

.dev-info .planet-globe-debug .pgd-sub {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  opacity: 0.92;
}

.dev-info .planet-globe-debug .pgd-hint {
  margin: 0 0 0.5rem;
  font-size: 0.625rem;
  line-height: 1.35;
  opacity: 0.88;
  color: rgba(220, 236, 255, 0.9);
}

.dev-info .planet-globe-debug .pgd-sh {
  display: block;
  margin: 0.5rem 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(220, 236, 255, 0.95);
}

.dev-info .planet-globe-debug .pgd-section:first-of-type .pgd-sh {
  margin-top: 0;
}

.dev-info .planet-globe-debug .pgd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 0.5rem;
  align-items: center;
  margin-bottom: 0.45rem;
  font-size: 0.65rem;
}

.dev-info .planet-globe-debug .pgd-row label {
  min-width: 0;
  overflow-wrap: break-word;
}

.dev-info .planet-globe-debug .pgd-row input[type=range] {
  grid-column: 1/-1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  cursor: pointer;
}

.dev-info .planet-globe-debug .pgd-val {
  text-align: right;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

.dev-info .planet-globe-debug .pgd-btn {
  pointer-events: auto;
  margin-top: 0.5rem;
  padding: 0.28rem 0.55rem;
  font: 0.6875rem/1.2 monospace;
  color: #e8f4ff;
  background: rgba(0, 0, 0, 0.35);
  border: 0.0625rem solid rgba(180, 220, 255, 0.5);
  cursor: pointer;
}

.dev-info .planet-globe-debug .pgd-btn:hover {
  border-color: rgba(200, 235, 255, 0.9);
}

.dev-info .planet-render-debug {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: min(68vh, 28rem);
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 0.2rem;
  padding: 0.45rem 0.45rem 0.55rem;
  border: 0.0625rem solid rgba(170, 220, 255, 0.45);
  background: rgba(8, 20, 36, 0.84);
  color: #d8ecff;
}

.dev-info .planet-render-debug .prd-h {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #e7f4ff;
}

.dev-info .planet-render-debug .prd-tree {
  max-height: min(60vh, 24rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.15rem;
}

.dev-info .planet-render-debug .prd-empty {
  font-size: 0.68rem;
  opacity: 0.85;
}

.dev-info .planet-render-debug .mw-planet-render-wrap {
  margin: 0.2rem 0;
  pointer-events: auto;
}

.dev-info .planet-render-debug .mw-planet-render-wrap summary {
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 600;
}

.dev-info .planet-render-debug .mw-planet-render-wrap.is-visible summary {
  color: var(--ui-text-color);
}

.dev-info .planet-render-debug .mw-planet-render-wrap.is-visible {
  border-left: 0.125rem solid var(--ui-accent-line);
  padding-left: 0.3rem;
}

.dev-info .planet-render-debug .mw-planet-render-wrap.is-full-active summary {
  color: #ff8d8d;
}

.dev-info .planet-render-debug .mw-planet-render-wrap.is-full-active {
  border-left-color: rgba(255, 120, 120, 0.8);
}

.dev-info .planet-render-debug .mw-planet-render-wrap.is-sprite-only summary {
  color: #9ec7ff;
}

.dev-info .planet-render-debug .mw-planet-render {
  margin: 0.2rem 0 0;
  font-size: 0.62rem;
  line-height: 1.25;
  white-space: pre-wrap;
  word-break: break-word;
}

.dev-info .sequential-tasks-debug {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: min(42vh, 16rem);
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 0.2rem;
  padding: 0.4rem 0.45rem 0.5rem;
  border: 0.0625rem solid rgba(180, 230, 200, 0.45);
  background: rgba(8, 28, 22, 0.84);
  color: #d8f5e8;
}

.dev-info .sequential-tasks-debug .std-h {
  margin: 0 0 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #e8fff2;
}

.dev-info .sequential-tasks-debug pre {
  margin: 0.15rem 0 0;
  font-size: 0.6rem;
  line-height: 1.28;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dev-info .sequential-tasks-debug .std-stats {
  opacity: 0.92;
}

.dev-info .sequential-tasks-debug .std-queue {
  color: #b8f0d0;
}

.dev-info .sequential-tasks-debug .std-rollup {
  opacity: 0.85;
}

.dev-info .sequential-tasks-debug .std-recent {
  opacity: 0.78;
  margin-top: 0.25rem;
  padding-top: 0.2rem;
  border-top: 0.0625rem solid rgba(180, 230, 200, 0.2);
}

.dev-info .orbit-work-debug {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: min(36vh, 14rem);
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 0.2rem;
  padding: 0.4rem 0.45rem 0.5rem;
  border: 0.0625rem solid rgba(180, 210, 255, 0.45);
  background: rgba(8, 16, 32, 0.86);
  color: #d8e8ff;
}

.dev-info .orbit-work-debug .owd-h {
  margin: 0 0 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #eef4ff;
}

.dev-info .orbit-work-debug pre {
  margin: 0.15rem 0 0;
  font-size: 0.6rem;
  line-height: 1.28;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dev-info .orbit-work-debug .owd-seq {
  opacity: 0.8;
  margin-top: 0.25rem;
  padding-top: 0.2rem;
  border-top: 0.0625rem solid rgba(180, 210, 255, 0.2);
}

.debug-progress {
  margin-top: 0.375rem;
  height: 0.375rem;
  border: 0.0625rem solid rgba(242, 223, 176, 0.5);
  background: rgba(0, 0, 0, 0.35);
}

.debug-progress-bar {
  height: 100%;
  background: rgba(242, 223, 176, 0.9);
}

/* aus ui.scss (nur für Dev-Overlay relevant) */
body > .dev-info {
  position: absolute;
  background: transparent;
  color: #fff;
}