/* Airplane Window: the HUD, the boarding pass and the controls, and how
   they fit a phone. */

html, body { margin: 0; height: 100%; overflow: hidden; background: #05060a; font-family: ui-monospace, Menlo, Consolas, monospace; }
#app { position: fixed; inset: 0; }
/* Drags on a touch screen look round the window; they must not scroll or
   zoom the page instead. */
#app canvas { display: block; touch-action: none; }

/* The window frame is not here. It is geometry in the scene — a cabin
   sidewall with an aperture cut in it, 40 cm from the eye — because a
   fixed overlay cannot move against what is behind it. Everything below is
   HUD: text over the picture, which is what an overlay is for. */

/* ── themes ────────────────────────────────────────────────────────────
   Dark and light, for the HUD and the boarding pass. The page follows the
   system's until you pick one (the pass's Theme, the HUD's button, or T);
   the inline script in index.html's head sets it before anything is drawn. */
:root, :root[data-theme="dark"] { color-scheme: dark;
  --hud-card: rgba(8,12,18,0.62); --hud-field: rgba(10,14,22,0.8); --hud-hover: rgba(30,40,58,0.9);
  --hud-list: rgba(10,14,22,0.94); --hud-pick: rgba(34,60,100,0.95);
  --hud-pressed: rgba(24,46,80,0.92); --hud-pressed-line: #3a5f93;
  --hud-ink: #cfe8ff; --hud-muted: #6f8aa8; --hud-help: #8ea6c2; --hud-line: #27303f;
  --hud-held: #f2c46d; --hud-accent: #4f8fe6; --hud-glow: rgba(0,0,0,0.9);
  --pass-ink: #dbe6f2; --pass-muted: #8fa0b5; --pass-paper: #17202b; --pass-rule: #34414f; --pass-port: #e0483c; --pass-starboard: #35c25e;
  --pass-sheet: #1e2834; --pass-pick: #2a3a4f; --pass-hold: #9aa5b3; --pass-press: #c3d2e2; --pass-off: #5d6b7c; }
:root[data-theme="light"] { color-scheme: light;
  --hud-card: rgba(243,245,247,0.8); --hud-field: rgba(250,251,252,0.9); --hud-hover: rgba(228,235,243,0.96);
  --hud-list: rgba(252,253,254,0.98); --hud-pick: #dfe9f6;
  --hud-pressed: rgba(207,222,242,0.96); --hud-pressed-line: #7fa3d6;
  --hud-ink: #1d2b3c; --hud-muted: #5f6f84; --hud-help: #44546a; --hud-line: #c3ccd6;
  --hud-held: #a35f00; --hud-accent: #2f74d8; --hud-glow: rgba(255,255,255,0.6);
  --pass-ink: #1d2b3c; --pass-muted: #66758a; --pass-paper: #f3f5f6; --pass-rule: #c9d0d8; --pass-port: #c8281e; --pass-starboard: #17923d;
  --pass-sheet: #fff; --pass-edge: rgba(255,255,255,0.6); --pass-pick: #e3ebf5; --pass-hold: #9aa5b3; --pass-press: #2b4058; --pass-off: #8a96a5; }

.hud { position: fixed; z-index: 20; color: var(--hud-ink); text-shadow: 0 0 6px var(--hud-glow); font-size: 12px; line-height: 1.6; letter-spacing: 0.5px; }
/* The cabin around the window is light plastic, so text sits on a dark
   card rather than straight on the picture. */
#hud-top, #hud-bottom, #help, #view-label { background: var(--hud-card); padding: 8px 12px; border-radius: 8px; backdrop-filter: blur(4px); }
#hud-top { top: 38px; left: 38px; }
#hud-bottom { bottom: 38px; left: 38px; }
/* what is in the middle of the window, named as it comes into the middle */
#view-label { top: 38px; left: 50%; transform: translateX(-50%); z-index: 15; max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 14px; pointer-events: none; opacity: 0; transition: opacity 0.6s; }
#view-label.shown { opacity: 1; }
/* the captain speaking (pilot.js), now and then, under the place's name */
#captain { top: 86px; left: 50%; transform: translateX(-50%); z-index: 15; max-width: 46vw; font-size: 13px; text-align: center;
  background: var(--hud-card); padding: 8px 12px; border-radius: 8px; backdrop-filter: blur(4px);
  pointer-events: none; opacity: 0; transition: opacity 0.8s; }
#captain.shown { opacity: 1; }
/* and the captain's log, over the credit: what it has done, newest first */
#captain-log { bottom: 82px; left: 38px; z-index: 15; width: 340px; max-width: 34vw; font-size: 12px; line-height: 1.4;
  background: var(--hud-card); padding: 8px 12px; border-radius: 8px; backdrop-filter: blur(4px);
  /* short of the readouts in a 600 px window (they end about 200 px down) */
  max-height: calc(100vh - 290px); overflow-y: auto; box-sizing: border-box; }
#captain-log summary { cursor: pointer; color: var(--hud-muted); list-style: none; }
#captain-log summary::-webkit-details-marker { display: none; }
#captain-log summary::after { content: " ▾"; }
#captain-log:not([open]) summary::after { content: " ▸"; }
#captain-log summary:focus { outline: none; }
#captain-log summary:focus-visible { outline: 2px solid var(--hud-accent); outline-offset: 2px; }
#captain-log ol { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
#captain-log li { display: grid; grid-template-columns: 7ch 1fr; column-gap: 8px; }
#captain-log .when { color: var(--hud-muted); font-variant-numeric: tabular-nums; }
#captain-log .why { grid-column: 2; color: var(--hud-muted); }
#captain-log li.quiet .what { color: var(--hud-muted); }
#hud-top .label, #hud-bottom .label { color: var(--hud-muted); }

#controls { position: fixed; top: 38px; right: 38px; z-index: 20; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#controls input, #controls select { background: var(--hud-field); color: var(--hud-ink); border: 1px solid var(--hud-line); border-radius: 6px; padding: 6px 8px; font: inherit; }
#controls input { width: 84px; }
#controls select { width: 184px; }
/* The search: a field the width of the selects, its matches dropping
   below it over the dials, the one picked highlighted. */
#controls .row.search { position: relative; }
#controls #in-search { width: 184px; box-sizing: border-box; }
#search-list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 1; width: 240px; margin: 0; padding: 4px; list-style: none;
  background: var(--hud-list); border: 1px solid var(--hud-line); border-radius: 6px; box-sizing: border-box; }
#search-list li { padding: 5px 8px; border-radius: 4px; color: var(--hud-ink); cursor: pointer; }
#search-list li small { color: var(--hud-muted); margin-left: 6px; }
#search-list li[aria-selected="true"] { background: var(--hud-pick); }
#controls select:disabled { color: var(--hud-muted); }
#controls button { background: #1b6fe0; color: white; border: 0; border-radius: 6px; padding: 8px 14px; font: inherit; cursor: pointer; }
#controls button:hover { background: #2a7ff5; }
#controls button.ghost { background: var(--hud-field); color: var(--hud-ink); border: 1px solid var(--hud-line); padding: 6px 10px; }
#controls button.ghost:hover { background: var(--hud-hover); }
/* Pressed is a fill, not a blue edge, so it can't be read as focus. */
#controls button.ghost[aria-pressed="true"] { background: var(--hud-pressed); border-color: var(--hud-pressed-line); }
#controls button.ghost[aria-pressed="true"]:hover { background: var(--hud-pick); }
/* One focus ring for the HUD, for the keyboard only: a mouse click on a
   field or the slider shows no ring, a Tab always shows the same one. */
#controls :is(input, select, button):focus { outline: none; }
#controls :is(input, select, button):focus-visible { outline: 2px solid var(--hud-accent); outline-offset: 2px; }
#controls .dial input[type="range"]:focus-visible { outline: none; }
#controls .dial:has(input:focus-visible) { outline: 2px solid var(--hud-accent); outline-offset: 2px; }
.row { display: flex; gap: 6px; align-items: center; }
/* On a phone the controls fold away behind More (below); elsewhere the
   group is not a box at all, and its rows are the column's own. */
#btn-more { display: none; }
#controls-more { display: contents; }
/* a dial: a reading, and a slider — the hour across the day, the
   altitude, the speed */
#controls .dial { background: var(--hud-field); border: 1px solid var(--hud-line); border-radius: 6px; padding: 4px 8px; display: flex; gap: 8px; align-items: center; width: 184px; box-sizing: border-box; }
#controls .dial output { color: var(--hud-ink); min-width: 5ch; font-variant-numeric: tabular-nums; }
#controls .dial output.wide { min-width: 8ch; white-space: nowrap; }
/* the altitude held above yours by what is under the circle */
#controls .dial output.held { color: var(--hud-held); }
#controls .row.flight { flex-direction: column; align-items: flex-end; }
/* the air: a panel that folds away, the weather over its dials, stacked like the others */
#controls .row.air { display: block; text-align: right; }
#controls .row.air .air-dials { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 6px; text-align: left; }
#controls .row.air summary { display: inline-block; list-style: none; cursor: pointer; background: var(--hud-field); color: var(--hud-ink);
  border: 1px solid var(--hud-line); border-radius: 6px; padding: 6px 10px; }
#controls .row.air summary::-webkit-details-marker { display: none; }
#controls .row.air summary::after { content: " ▸"; color: var(--hud-muted); }
#controls .row.air[open] summary::after { content: " ▾"; }
#controls .row.air summary:hover { background: var(--hud-hover); }
#controls .row.air summary:focus { outline: none; }
#controls .row.air summary:focus-visible { outline: 2px solid var(--hud-accent); outline-offset: 2px; }
#controls .dial input[type="range"] { flex: 1 1 auto; width: auto; min-width: 0; padding: 0; border: 0; background: none; accent-color: var(--hud-accent); }

#help { position: fixed; bottom: 38px; right: 38px; z-index: 20; font-size: 11px; color: var(--hud-help); text-align: right; line-height: 1.7; }
/* The keys' card shares the right-hand side with the controls, and gives
   way to them: in a short window, or with the Air panel open, the column
   reaches down to where it is. */
body:has(#air[open]) #help { display: none; }
@media (max-height: 740px) { #help { display: none; } }

/* ── boarding ──────────────────────────────────────────────────────────
   The start screen is a boarding pass, held over the window with the shade
   still down. Taking your seat tucks the pass away and the shade rides up
   in the scene behind it; until then the HUD is not there to read. */
body.boarding .hud { opacity: 0; visibility: hidden; }
.hud { transition: opacity 0.8s ease 1.6s, visibility 0s linear 1.6s; }

/* It scrolls when the pass is taller than the screen, as on a small phone
   upright, rather than leaving the stub's fields out of reach below it. */
#splash { position: fixed; inset: 0; z-index: 40; display: grid; place-items: safe center; padding: 24px;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(12,18,28,0.38); backdrop-filter: blur(3px);
  transition: opacity 0.6s ease 0.25s, visibility 0s linear 0.85s; }
body:not(.boarding) #splash { opacity: 0; visibility: hidden; pointer-events: none; }

.pass { --ink: var(--pass-ink); --muted: var(--pass-muted); --paper: var(--pass-paper); --rule: var(--pass-rule); --port: var(--pass-port); --starboard: var(--pass-starboard); --stub: 168px;
  display: grid; grid-template-columns: 1fr var(--stub); width: min(680px, 100%);
  background: var(--paper); color: var(--ink); border-radius: 14px;
  font-family: "Futura", "Century Gothic", "URW Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  box-shadow: 0 30px 60px -20px rgba(4,8,14,0.6), 0 2px 0 var(--pass-edge, rgba(255,255,255,0.06)) inset;
  /* the perforation's notches, bitten out of the top and bottom edges */
  -webkit-mask: radial-gradient(circle 11px at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  transition: transform 0.55s cubic-bezier(.5,0,.75,0), opacity 0.4s ease 0.15s; }
body:not(.boarding) .pass { transform: translateY(70vh) rotate(-4deg); opacity: 0; }

.pass-main { padding: 30px 34px 26px; display: flex; flex-direction: column; gap: 22px; }
.pass h1 { margin: 0; font-size: 34px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
.pass .lede { margin: 8px 0 0; max-width: 40ch; font-size: 15px; line-height: 1.5; color: var(--muted); }
.pass dl { display: grid; grid-template-columns: minmax(170px, 1.4fr) 1fr 1fr; gap: 6px 22px; margin: 0; }
.pass dl.trip { grid-template-columns: minmax(170px, 1.4fr) 2fr; }
.pass dt { font-size: 12px; color: var(--muted); grid-row: 1; }
.pass dd { margin: 0; font-size: 19px; font-weight: 700; grid-row: 2; align-self: center; }
/* A field is a ruled line with its value on it; a tap opens its choices
   on a card (js/picker.js). The select behind it is hidden. */
.pass button.pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; font: inherit; font-size: 17px;
  font-weight: 700; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  padding: 2px 0 4px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass button.pick::before { content: "▾"; order: 1; flex: none; font-size: 0.8em; color: var(--muted); }
.pass button.pick:hover:not(:disabled) { background: transparent; border-bottom-color: #2f74d8; }
.pass button.pick:disabled { background: transparent; opacity: 0.45; }
.pass button.pick:disabled::after { content: none; }
.pass button.pick:focus-visible { outline: none; border-bottom-color: #2f74d8; box-shadow: 0 2px 0 #2f74d8; }
/* the card of choices, on the pass's paper, over a dimmed pass */
dialog.picker { width: min(440px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 32px)); box-sizing: border-box; padding: 0;
  display: flex; flex-direction: column; color: var(--pass-ink); background: var(--pass-sheet); border: 1px solid var(--pass-rule);
  border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(4,8,14,0.6); font-family: "Futura", "Century Gothic", "URW Gothic", "Avenir Next", "Trebuchet MS", sans-serif; }
dialog.picker:not([open]) { display: none; }
dialog.picker.wide { width: min(620px, calc(100vw - 32px)); }
dialog.picker::backdrop { background: rgba(6,10,16,0.45); backdrop-filter: blur(2px); }
.picker-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px 22px; border-bottom: 1px solid var(--pass-rule); }
.picker-head h2 { margin: 0; font-size: 13px; font-weight: 400; color: var(--pass-muted); letter-spacing: 0.02em; }
.picker-close { font: inherit; font-size: 22px; line-height: 1; color: var(--pass-muted); background: none; border: 0; border-radius: 8px;
  width: 40px; height: 40px; cursor: pointer; }
.picker-close:hover { color: var(--pass-ink); background: var(--pass-pick); }
.picker-list { display: flex; flex-direction: column; gap: 2px; padding: 10px; overflow-y: auto; overscroll-behavior: contain; }
.picker-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.picker-list button { font: inherit; font-size: 16px; font-weight: 700; color: var(--pass-ink); background: none; border: 0; border-radius: 8px;
  min-height: 44px; padding: 8px 12px; text-align: left; cursor: pointer; }
.picker-list button:hover:not(:disabled) { background: var(--pass-pick); }
.picker-list button:disabled { font-weight: 400; color: var(--pass-muted); cursor: default; }
.picker-list button[aria-selected="true"] { background: var(--pass-ink); color: var(--pass-paper); }
.picker :is(button):focus { outline: none; }
.picker :is(button):focus-visible { outline: 3px solid #4f8fe6; outline-offset: -3px; }
/* The pass's search is a ruled line like its selects, its matches on a
   card of the same paper dropping over the fields below it. */
.pass .find { position: relative; display: flex; flex-direction: column; gap: 6px; }
.pass .find label { font-size: 12px; color: var(--muted); }
.pass .find input { font: inherit; font-size: 17px; font-weight: 700; color: var(--ink); background: transparent;
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; padding: 2px 0 4px; }
.pass .find input::placeholder { color: var(--pass-hold); font-weight: 400; }
.pass .find input:focus { outline: none; border-bottom-color: #2f74d8; box-shadow: 0 2px 0 #2f74d8; }
#pass-search-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1; margin: 0; padding: 4px; list-style: none;
  background: var(--pass-sheet); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 12px 28px -10px rgba(4,8,14,0.45); }
#pass-search-list li { padding: 7px 10px; border-radius: 5px; font-size: 15px; font-weight: 700; cursor: pointer; }
#pass-search-list li small { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); }
#pass-search-list li[aria-selected="true"] { background: var(--pass-pick); }
.pass .act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pass button { font: inherit; font-size: 16px; font-weight: 700; color: var(--paper); background: var(--ink);
  border: 0; border-radius: 999px; padding: 13px 26px; cursor: pointer; }
.pass button:hover:not(:disabled) { background: var(--pass-press); }
.pass button:disabled { background: var(--pass-off); cursor: progress; }
/* While the button waits, a bar runs along its foot. */
.pass button { position: relative; overflow: hidden; }
.pass button:disabled::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 3px;
  background: var(--ink); opacity: 0.55; animation: wait-bar 1.3s ease-in-out infinite; }
.pass button.failed::after { display: none; }
@keyframes wait-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* Loading: the fields are there to read but not yet to use. */
.pass :is(select, input, button.pick):disabled { opacity: 0.45; cursor: progress; }
body.loading #pass-hint, body:not(.loading) #load-note { display: none; }
#load-note a { color: inherit; }
/* A select on the pass is a ruled line, so its focus is the line turning
   blue and heavier — a box round it ran through the label above. The
   button is a pill, and gets a ring that follows it. */
.pass button:focus { outline: none; }
.pass button:focus-visible { outline: 3px solid #4f8fe6; outline-offset: 3px; }
.pass .hint { font-size: 13px; line-height: 1.45; color: var(--muted); max-width: 30ch; }
.pass .fine { margin: 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.5; color: var(--muted); }

.pass-stub { border-left: 2px dashed var(--rule); padding: 30px 22px 26px; display: flex; flex-direction: column; justify-content: space-between; }
.pass-stub .seat { font-size: 12px; color: var(--muted); }
.pass-stub .seat b { display: block; margin-top: 2px; font-size: 64px; line-height: 0.95; letter-spacing: -0.03em; color: var(--ink); }
/* the aircraft, in profile: windows and the nacelle's outline are cut in paper */
.pass-stub .craft svg { display: block; width: 100%; height: auto; fill: var(--ink); }
.pass-stub .craft svg[hidden] { display: none; }
.pass-stub .craft .cut { stroke: var(--paper); }
.pass-stub .craft .glass { fill: var(--paper); }
.pass-stub .craft .prop { fill: none; stroke: var(--muted); stroke-width: 0.9; stroke-linecap: round; }
.pass-stub .equip { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
/* 16px: below it, iOS zooms the page in on a field when it is tapped. */
.pass-stub .equip button.pick { font-size: 16px; }
.pass-stub .side { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
/* the side's navigation light: red to port, green to starboard */
.pass-stub .side::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--port);
  box-shadow: 0 0 0 3px rgba(200,40,30,0.18); }
.pass-stub .side.starboard::before { background: var(--starboard); box-shadow: 0 0 0 3px rgba(30,170,70,0.18); }

@media (max-width: 600px) {
  .pass { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .pass-main { padding: 24px 22px 20px; }
  .pass h1 { font-size: 28px; }
  .pass dl { grid-template-columns: 1fr 1fr; }
  .pass dt, .pass dd { grid-row: auto; }
  .pass dl > div { display: contents; }
  .pass-stub { border-left: 0; border-top: 2px dashed var(--rule); flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; padding: 18px 22px; }
  /* the plane sits by the seat; the aircraft and side wrap under them */
  .pass-stub .craft { flex: 0 0 120px; }
  .pass-stub .equip { flex: 1 1 150px; min-width: 0; }
  .pass-stub .seat b { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .pass, #splash, .hud { transition-duration: 0.01s; transition-delay: 0s; }
  .pass button:disabled::after { animation: none; width: 100%; opacity: 0.25; }
}

/* ── small screens ──────────────────────────────────────────────────────
   A phone shows the window with less cabin round it, so the HUD moves to
   where the cabin is. Upright, the window is tall and the wall is above and
   below it: readouts along the top, the controls along the bottom. On its
   side, the wall is left and right of it: everything packs into the two
   side columns. The help card goes; the boarding pass has already said how
   to look round. Insets keep clear of notches and the home bar. */
/* On a phone the controls would cover the window they are for: held
   upright, the lower half of it; on a tablet upright the window fills the
   screen and the corners are on it too. So on a touch screen, and any
   small one, they fold away behind More, leaving the search, and open
   over the view when asked for. */
@media (pointer: coarse), (max-width: 600px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  #btn-more { display: block; flex: none; }
  #controls:not(.open) #controls-more { display: none; }
  #controls .row.search #in-search { flex: 1 1 auto; min-width: 0; width: auto; }
}
/* A touch screen: fields at 16px, below which iOS zooms the page in on
   the one tapped, and things to tap at least 40px tall. */
@media (pointer: coarse) {
  #controls :is(input:not([type="range"]), select) { font-size: 16px; }
  #controls :is(input:not([type="range"]), select, button), #controls .row.air summary { min-height: 40px; box-sizing: border-box; }
  #controls .dial { min-height: 40px; }
  #controls .dial input[type="range"] { height: 32px; }
  .pass button.pick, .pass .find input { padding-top: 8px; padding-bottom: 8px; }
  /* the keys' card: there are no keys */
  #help { display: none; }
}
@media (max-width: 600px) and (orientation: portrait) {
  #hud-top { top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px;
    display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 11px; padding: 6px 10px; }
  #controls { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 12px;
    flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  #controls .row:first-child, #controls .row.place { flex: 1 1 100%; }
  #controls #in-search { width: 100%; }
  #search-list { top: auto; bottom: calc(100% + 4px); left: 0; width: auto; }
  #controls .row.coords { flex: 1 1 0; min-width: 0; }
  #controls .row.tools { flex: 1 1 100%; }
  #controls .row.tools .dial { flex: 1 1 auto; width: auto; }
  #controls .row.tools button { flex: 1 1 0; }
  #controls .row.flight { flex: 1 1 100%; flex-direction: row; min-width: 0; }
  #controls .row.flight .dial { flex: 1 1 0; width: auto; min-width: 0; }
  #controls .row.air { flex: 1 1 100%; min-width: 0; text-align: center; }
  #controls .row.air summary { display: block; }
  #controls .row.air .air-dials { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  #controls .row.air .dial { flex: 1 1 40%; width: auto; min-width: 0; }
  body:has(#air[open]) #hud-bottom { display: none; }
  #controls select { width: 100%; }
  #controls input { flex: 1 1 0; min-width: 0; width: auto; }
  /* the pass has said it; here it would sit on the view */
  #hud-bottom { display: none; }
  /* the captain's log folds to its title under the readouts, on the wall
     over the window; opened, it comes down over the view, as More does,
     and scrolls past half the screen */
  #captain-log { top: calc(max(12px, env(safe-area-inset-top)) + 78px); bottom: auto; left: 12px; width: auto; max-width: calc(100vw - 24px);
    font-size: 11px; padding: 6px 10px; }
  #captain-log[open] { max-height: 50vh; max-height: 50dvh; overflow-y: auto; overscroll-behavior: contain; }
  /* over the controls' search, which is all of them until More */
  #view-label { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 56px); max-width: calc(100vw - 24px); }
  #captain { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 100px); max-width: calc(100vw - 24px); font-size: 12px; }
  #help { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #hud-top { top: 10px; left: max(10px, env(safe-area-inset-left)); font-size: 10.5px; line-height: 1.45; padding: 6px 9px; }
  #view-label { top: 10px; font-size: 12px; padding: 6px 10px; max-width: 30vw; }
  #captain { top: 50px; font-size: 11.5px; padding: 6px 10px; max-width: 34vw; }
  #controls { top: 10px; right: max(10px, env(safe-area-inset-right)); gap: 6px;
    max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain; }
  #controls select { width: 158px; }
  #controls input { width: 72px; }
  #controls .row.search { width: 158px; }
  /* one coordinate a line: two side by side are too narrow to read */
  #controls .row.coords { flex-direction: column; }
  #controls .row.coords input { width: 158px; }
  #controls .row.tools { flex-wrap: wrap; justify-content: flex-end; max-width: 158px; }
  #controls .dial { width: 158px; }
  /* the captain's log in the left column under the readouts, folded;
     opened, it takes the column, the credit giving way */
  #captain-log { top: 154px; bottom: auto; left: max(10px, env(safe-area-inset-left)); width: auto; max-width: 150px;
    font-size: 10px; line-height: 1.4; padding: 6px 9px; }
  #captain-log[open] { max-width: 230px; max-height: calc(100vh - 164px); max-height: calc(100dvh - 164px); overflow-y: auto; overscroll-behavior: contain; }
  body:has(#captain-log[open]) #hud-bottom { display: none; }
  #hud-bottom { bottom: 10px; left: max(10px, env(safe-area-inset-left)); max-width: 150px;
    font-size: 10px; line-height: 1.4; padding: 6px 9px; }
  #help { display: none; }

  /* the pass, on its side: shorter, and scrollable if it still won't fit */
  #splash { padding: 10px; }
  .pass-main { padding: 18px 24px 16px; gap: 12px; }
  .pass h1 { font-size: 26px; }
  .pass .lede { font-size: 13px; margin-top: 4px; }
  .pass .fine { padding-top: 10px; }
  .pass-stub { padding: 18px 18px 16px; }
  /* the pass clips what hangs off it, so the matches scroll instead */
  #pass-search-list { max-height: 132px; overflow-y: auto; overscroll-behavior: contain; }
  .pass-stub .seat b { font-size: 48px; }
}

/* shown in place of the canvas when the scene cannot be created at all */
#app .fatal { position: absolute; inset: 0; display: grid; place-items: center;
  padding: 40px; color: #cfe8ff; font-size: 13px; line-height: 1.8; text-align: center; }