/* Flight controls stay at the screen edges. The renderer receives gestures everywhere between them. */
:root {
  --hud-top: max(16px, env(safe-area-inset-top));
  --hud-right: max(20px, env(safe-area-inset-right));
  --hud-left: max(20px, env(safe-area-inset-left));
  --panel-surface: #131a20;
  --panel-border: #ffffff24;
  --soft-text: #acb8c0;
  --hud-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.deck-header {
  position:absolute; inset:var(--hud-top) var(--hud-right) auto var(--hud-left); z-index:7;
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  font-family:var(--hud-font); pointer-events:none;
}
.deck-brand {pointer-events:auto;color:inherit;text-decoration:none;display:flex; align-items:center; gap:9px; min-height:40px; text-shadow:0 1px 6px #000c}
.deck-brand img {width:34px; height:34px; border-radius:9px}
.deck-brand h1 {margin:0; color:#f4f6f8; font:600 18px/1.1 var(--hud-font); letter-spacing:-.045em}
.deck-brand .orbit-caption {
  position:static; display:flex; align-items:center; gap:5px; margin:3px 0 0;
  opacity:1; color:#b4c2cc; font:500 10px/1.2 var(--instrument-font);
}
.deck-brand .orbit-caption :is(b,span) {color:inherit; font:inherit; letter-spacing:0}
.deck-brand .orbit-caption b::before {content:"·"; margin-right:5px}
.deck-nav,#window-controls:not([hidden]) {
  display:flex; gap:1px; align-items:center; padding:3px; border:1px solid var(--panel-border);
  border-radius:12px; background:#10161be8; box-shadow:0 2px 12px #0003; pointer-events:auto;
}
.deck-nav button,#window-controls button {font-family:var(--hud-font)}
.deck-trigger,.view-shortcut,#window-controls button {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px;
  padding:0 12px; border:0; border-radius:8px; background:transparent; color:#e4eaf0;
  font:500 13px var(--hud-font);
}
.deck-trigger::after,.deck-menu .launch::after {
  content:""; display:block; width:5px; height:5px; border:solid #a9b6bd;
  border-width:0 1.5px 1.5px 0; transform:translateY(-1px) rotate(45deg);
}
.deck-trigger[aria-expanded="true"],.deck-trigger:hover,.view-shortcut:hover,#window-controls button:hover {background:#ffffff12}
.deck-trigger[aria-expanded="true"]::after {transform:translateY(1px) rotate(225deg)}
.view-shortcut {position:relative; width:36px; padding:0; margin-left:4px}
.view-shortcut::before {content:""; position:absolute; left:-3px; width:1px; height:18px; background:var(--panel-border)}
.view-frame {width:15px; height:13px; border:1.5px solid currentColor; border-radius:2px; clip-path:polygon(0 0,38% 0,38% 20%,62% 20%,62% 0,100% 0,100% 42%,82% 42%,82% 58%,100% 58%,100% 100%,62% 100%,62% 80%,38% 80%,38% 100%,0 100%,0 58%,18% 58%,18% 42%,0 42%)}
.deck-menu {
  position:fixed; inset:calc(var(--hud-top) + 48px) var(--hud-right) auto auto; margin:0;
  width:min(296px,calc(100vw - 24px)); max-height:calc(100dvh - var(--hud-top) - 62px);
  overflow:auto; overscroll-behavior:contain; padding:8px;
  color:var(--ink); background:var(--panel-surface); border:1px solid var(--panel-border);
  border-radius:14px; box-shadow:0 12px 42px #0006; font:14px/1.4 var(--hud-font);
}
.deck-menu::backdrop {background:transparent}
.deck-menu :is(button,summary):focus-visible,.deck-header nav>button:focus-visible,#window-controls button:focus-visible {
  outline:2px solid #9adce3; outline-offset:-2px;
}
.model-picker {border:0; padding:0 0 12px; margin:5px 6px 3px}
.model-picker legend {padding:0; margin:0 0 9px; font-size:12px; color:var(--soft-text)}
.station-models {display:grid; grid-template-columns:repeat(4,1fr); padding:3px; gap:2px; background:#090f14; border-radius:9px}
.station-models .model-button {
  min-height:32px; padding:0 4px; justify-content:center; border:0; border-radius:6px; background:transparent;
  color:#b5bfc7; font:500 12px var(--hud-font);
}
.station-models .model-button.active {background:#31414a; color:white; box-shadow:0 1px 3px #0004}
.station-models .model-button.active::before {display:none}
.station-models .model-button:hover {color:#fff}
.deck-rows {border-block:1px solid var(--panel-border); padding:4px 0}
.deck-menu .deck-action {
  position:relative; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:40px; padding:9px 10px; border:0; border-radius:7px;
  color:#eaf0f3; background:transparent; text-align:left; font:500 14px/1.4 var(--hud-font);
}
.deck-menu .deck-action:hover:not(:disabled),.model-info summary:hover {background:#ffffff0d}
.deck-action:disabled {opacity:.5; cursor:not-allowed}
.deck-action strong {font-weight:inherit}
.deck-action i {color:var(--soft-text); font:400 12px var(--hud-font)}
.deck-action[aria-pressed=true] i {color:#9ae1df}
.deck-menu .launch {display:grid; justify-content:stretch; gap:3px; min-height:64px; padding:10px 26px 10px 11px}
.deck-menu .launch::after {position:absolute; right:11px; top:50%; transform:rotate(-45deg)}
.action-note {display:block; color:var(--soft-text); font:400 12px/1.45 var(--hud-font)}
.deck-menu .launch + .launch {margin-top:2px}
.model-info summary {cursor:pointer; border-radius:7px; padding:10px; font-size:13px; color:#bfccd2}
.model-meta {margin:0 10px 8px; display:flex; align-items:baseline; gap:8px}
.model-meta span {color:var(--soft-text); font-size:10px}
.model-info dl {display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; padding:0 10px; margin:0 0 8px}
.model-info dt {color:var(--soft-text); font-size:11px}
.model-info dd {margin:1px 0 0; font:500 12px var(--instrument-font)}
.camera-help {margin:3px 9px 4px;color:var(--soft-text);font-size:11px}
.camera-help .touch-help,.camera-help .inside-help {display:none}
@media(pointer:coarse) {
  .camera-help .mouse-help {display:none}
  .camera-help .touch-help {display:inline}
  .station-models .model-button,.deck-rows .deck-action {min-height:44px}
}
body.interior-mode .camera-help span {display:none}
body.interior-mode .camera-help .inside-help {display:inline}
body.interior-mode .model-picker {display:none}
.deck-notice {
  position:absolute; z-index:5; pointer-events:none; left:var(--hud-left); top:calc(var(--hud-top) + 46px);
  max-width:min(345px,calc(100% - 40px)); margin:0; padding:8px 12px; border-radius:8px;
  opacity:0; transition:opacity .18s; background:#0c1219ed; color:var(--ink); font:13px/1.45 var(--hud-font);
}
.deck-notice.is-visible:not(:empty) {opacity:1}
body.chat-expanded .deck-notice {opacity:0}
#window-controls:not([hidden]) {inset:var(--hud-top) var(--hud-right) auto auto}
#window-controls button {border:0; padding:0 11px; background:transparent; font:500 13px var(--hud-font)}
body.marking .deck-header {visibility:hidden}

/* Detailed tasks open along the right edge. On touch screens they rise from the bottom. */
:is(#mission,#earth-map,#observatory) {
  inset:var(--hud-top) var(--hud-right) auto auto; margin:0; width:min(440px,calc(100vw - 32px));
  max-height:calc(100dvh - var(--hud-top) - 16px); padding:20px;
  border:1px solid var(--panel-border); border-radius:16px; background:var(--panel-surface);
  font:14px/1.5 var(--hud-font); overscroll-behavior:contain;
}
#earth-map {width:min(460px,calc(100vw - 32px))}
#observatory {width:min(680px,calc(100vw - 32px))}
dialog::backdrop {background:#0004;backdrop-filter:none}
dialog h2 {font:600 20px/1.25 var(--hud-font);letter-spacing:-.025em;margin:2px 0 12px}
dialog label {font:500 12px/1.4 var(--hud-font);color:var(--soft-text)}
dialog button,dialog input,dialog select,dialog textarea,#place-form #place-query {
  font:13px/1.4 var(--hud-font);border-radius:7px;
}
dialog button {min-height:34px;background:#253039;border-color:#40505a}
dialog button:hover {background:#33424b}
dialog form[method=dialog] button {min-height:28px;padding:4px 8px;background:transparent;color:var(--soft-text)}
dialog small {font:11px/1.45 var(--hud-font);color:var(--soft-text)}
#orbit-readout {font:11px/1.5 var(--instrument-font);color:#bacad4}
.map-settings {display:grid;grid-template-columns:1fr 1.6fr;gap:10px;margin:16px 0 12px;border-top:1px solid var(--panel-border)}
.map-settings select {width:100%;min-width:0}
.map-settings #watch-orbit {grid-column:1 / -1;justify-self:start}
#comms-dock {width:min(560px,calc(100% - 24px)); min-width:0}
@media (max-width:640px) {
  :root {--hud-top:max(10px,env(safe-area-inset-top));--hud-left:max(10px,env(safe-area-inset-left));--hud-right:max(10px,env(safe-area-inset-right))}
  .deck-brand {gap:6px}
  .deck-brand img {width:27px;height:27px}
  .deck-brand h1 {font-size:16px}
  .deck-brand .orbit-caption {font-size:9px}
  .deck-trigger {height:38px;padding:0 8px;gap:5px}
  .view-shortcut {height:38px;width:30px}
  .deck-menu {inset-block-start:calc(var(--hud-top) + 51px)}
  :is(#mission,#earth-map,#observatory) {
    inset:auto 0 0; width:100%; max-height:85dvh; padding:17px 16px max(17px,env(safe-area-inset-bottom));
    border-radius:18px 18px 0 0;
  }
  dialog :is(input,select,textarea),#place-form #place-query {font-size:16px}
  #comms-dock {width:calc(100% - 20px)}
}
@media(max-width:370px) {
  .deck-trigger::after {display:none}
  .deck-trigger {padding:0 7px}
  .deck-brand img {display:none}
}
@media(prefers-reduced-motion:reduce) {.deck-notice{transition:none}}

.arrival-preview .deck-header, .arrival-preview #comms-dock, .arrival-preview #flight-message, .arrival-preview #loading-overlay { visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .orbio-arrived #drone-game:not([hidden]) { animation: drone-controls-in .32s ease-out both; }
  @keyframes drone-controls-in { from { opacity: 0; } to { opacity: 1; } }
}

#viewport {overflow:hidden;background:#03050a}
#earth-film {
  position:absolute; inset:-25% -7%; pointer-events:none; will-change:transform;
  background:#03050a center / cover no-repeat;
}
#earth-film video {display:block; width:100%; height:100%; object-fit:cover; opacity:0}
#earth-film.has-film video {opacity:1}
body.flying #watch-orbit {display:none}

#station-preview {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:#03050a url('./orbit/launch-wide.webp') center / cover no-repeat;
  transition:opacity .28s ease-out, visibility 0s linear .28s;
}
@media(max-aspect-ratio:1/1) {
  #station-preview {background-image:url('./orbit/launch-portrait.webp')}
}
.station-presented #station-preview {opacity:0;visibility:hidden}
.arrival-preview #station-preview {display:none}
#loading-overlay.launch-loading {
  inset:auto auto max(105px,15%) 50%; transform:translateX(-50%); width:max-content;
  display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:4px;
  background:rgba(5,9,15,.87); pointer-events:none;
}
.launch-loading .loader-ring {width:13px;height:13px}
#retry-model {pointer-events:auto;font:inherit;padding:5px 8px}
#loading-overlay:has(#retry-model:not([hidden])) .loader-ring {display:none}
@media(prefers-reduced-motion:reduce) {#station-preview {transition:none}}

.arrival-preview #earth-film {background-image:url('./orbit/films/florida.jpg')}

#station-trigger{background:#e1f3f0;color:#142729;font-weight:650}
#station-trigger:hover,#station-trigger[aria-expanded="true"]{background:#fff}
.station-models{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;background:transparent;padding:0}
.station-models .model-button{height:44px;border:1px solid #688085;border-radius:5px;background:#192329;color:#ebf1f2;font-size:14px}
.station-models .model-button.active{border-color:#c4f4e8;background:#c4f4e8;color:#142729}
.station-models .model-button.active::after{content:"✓";margin-left:6px}

.deck-choices{position:absolute;top:calc(100% + 10px);right:0;display:flex;align-items:center;gap:18px;padding:9px 12px 11px;border:1px solid var(--panel-border);border-radius:12px;background:#10161bed;pointer-events:auto}
.deck-choices fieldset{margin:0;padding:0;border:0;min-width:0}
.deck-choices legend{padding:0;margin:0 0 5px;color:#c3d3d9;font:600 11px/1.3 var(--hud-font)}
.deck-choices .station-models,.mission-choices{display:flex;gap:4px}
.deck-choices .model-button,.mission-choice{min-height:36px;height:auto;padding:0 10px;font:600 13px var(--hud-font);white-space:nowrap}
.mission-choice{background:#244145;color:#e4fffa;border:1px solid #6c9999;border-radius:5px}
.mission-choice:hover{background:#31575a}.mission-choice:disabled{opacity:.54}
.mission-choice .action-note{display:none}
@media(max-width:640px){.deck-choices{flex-wrap:wrap;gap:8px 16px;left:0;right:auto;max-width:100%;padding:8px 10px}.deck-choices .model-button,.mission-choice{min-height:40px}}