:root {
  --glass: rgba(28, 30, 36, 0.32);
  --glass-strong: rgba(24, 26, 32, 0.55);
  --stroke: rgba(255, 255, 255, 0.16);
  --stroke-hi: rgba(255, 255, 255, 0.32);
  --text: rgba(255, 255, 255, 0.94);
  --text-2: rgba(255, 255, 255, 0.62);
  --text-3: rgba(255, 255, 255, 0.38);
  --cyan: #5fd6ff; --green: #4be38a; --magenta: #ff6bd6; --amber: #ffb547; --red: #ff4b42;
  /* shared design values: spacing on a 4 px rhythm (half steps for tight UI), type scale, corner radii, layout */
  --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px;
  --space-4: 16px; --space-4-5: 18px; --space-5: 20px; --space-5-5: 22px; --space-6: 24px; --space-6-5: 26px; --space-7: 28px;
  --space-7-5: 30px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px;
  --fs-1: 9px; --fs-2: 10px; --fs-3: 11px; --fs-4: 12px; --fs-5: 13px; --fs-6: 14px; --fs-7: 15px; --fs-8: 16px;
  --fs-9: 18px; --fs-10: 20px; --fs-11: 22px; --fs-12: 26px; --fs-13: 34px; --fs-14: 40px; --fs-15: 44px;
  --r-2xs: 6px; --r-xs: 10px; --r-sm: 12px; --r-md: 14px; --r-ml: 18px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;
  --tap: 44px;                      /* minimum touch target */
  --coach-w: 330px;                 /* Flight Assistant card */
  --ap-top: 62px; --log-top: 64px; --toast-top: 116px; --panel-top: 118px; --coach-top: 122px; /* HUD rows under the route bar */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", sans-serif;
  --avi: "B612", var(--sans);
  --mono: "B612 Mono", "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0d10; color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
canvas#hud { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

.glass {
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(170%);
  -webkit-backdrop-filter: blur(34px) saturate(170%);
  border: 1px solid var(--stroke);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  border-radius: var(--r-xl);
}
.glass.strong { background: var(--glass-strong); }

/* ---------- capsules / controls ---------- */
.seg { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.seg button, .chip {
  appearance: none; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-pill); padding: var(--space-2) var(--space-3-5); font-size: var(--fs-5); font-weight: 500; letter-spacing: 0.01em; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s, color 0.18s; color: var(--text-2);
}
.seg button:hover, .chip:hover { background: rgba(255, 255, 255, 0.12); color: var(--text); }
.seg button.on, .chip.on { background: rgba(255, 255, 255, 0.9); color: #111318; border-color: transparent; }
.seg button:active, .chip:active { transform: scale(0.97); }
.btn-primary {
  appearance: none; border: 0; border-radius: var(--r-pill); padding: var(--space-3-5) var(--space-7-5); font-size: var(--fs-8); font-weight: 600; cursor: pointer;
  background: rgba(255, 255, 255, 0.94); color: #0f1115; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4); }
.btn-ghost { appearance: none; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.06); border-radius: var(--r-pill); padding: var(--space-3) var(--space-5); font-size: var(--fs-6); font-weight: 500; cursor: pointer; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.13); }
input[type=text] {
  width: 100%; appearance: none; border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.22); color: var(--text);
  border-radius: var(--r-md); padding: var(--space-3) var(--space-3-5); font: 500 var(--fs-7) var(--sans); outline: none; transition: border-color 0.15s, background 0.15s;
}
input[type=text]:focus { border-color: var(--stroke-hi); background: rgba(0, 0, 0, 0.32); }
input[type=range] { width: 100%; accent-color: #fff; }
.label { font: 600 var(--fs-3) var(--avi); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: var(--space-4-5) 0 var(--space-2); }
.mono { font-family: var(--mono); }

/* ---------- planner ---------- */
#menu { position: fixed; inset: 0; display: flex; align-items: stretch; padding: var(--space-5-5); gap: var(--space-5-5); pointer-events: none; }
#menu .panel { pointer-events: auto; width: 460px; max-width: calc(100vw - 44px); padding: var(--space-6-5) var(--space-6-5) var(--space-5-5); display: flex; flex-direction: column; overflow: hidden; }
#menu .scroll { overflow-y: auto; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2) var(--space-2); flex: 1; scrollbar-width: thin; }
.brand { display: flex; align-items: baseline; gap: var(--space-3); }
.brand h1 { font: 700 var(--fs-13)/1 var(--sans); letter-spacing: -0.02em; margin: 0; }
.brand span { font: 500 var(--fs-4) var(--avi); color: var(--text-3); letter-spacing: 0.16em; text-transform: uppercase; }
.picker { position: relative; }
.results { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-1-5)); z-index: 5; padding: var(--space-1-5); max-height: 300px; overflow-y: auto; border-radius: var(--r-ml); }
.result { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2-5) var(--space-2-5); border-radius: var(--r-sm); cursor: pointer; }
.result:hover, .result.hl { background: rgba(255, 255, 255, 0.1); }
.result .code { font: 700 var(--fs-5) var(--mono); color: var(--cyan); width: var(--tap); }
.result .nm { font-size: var(--fs-6); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result .ct { font-size: var(--fs-4); color: var(--text-3); margin-left: auto; white-space: nowrap; }
.sel { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3-5); border-radius: var(--r-ml); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--stroke); margin-top: var(--space-2); }
.sel .code { font: 700 var(--fs-10) var(--mono); letter-spacing: 0.02em; }
.sel .nm { font-size: var(--fs-5); color: var(--text-2); line-height: 1.3; }
.sel .x { margin-left: auto; cursor: pointer; color: var(--text-3); font-size: var(--fs-9); padding: var(--space-0-5) var(--space-1-5); }
.groups { margin-top: var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-2-5); }
.group-t { font: 500 var(--fs-4) var(--sans); color: var(--text-3); margin-bottom: var(--space-1-5); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.chip { padding: var(--space-1-5) var(--space-2-5); font-size: var(--fs-4); }
.chip b { font-family: var(--mono); font-weight: 700; color: var(--text); margin-right: var(--space-1); }
.chip.on b { color: #111; }
.route { margin-top: var(--space-4-5); padding: var(--space-3-5) var(--space-4); border-radius: var(--r-ml); background: rgba(0, 0, 0, 0.22); border: 1px solid var(--stroke); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1-5); }
.route .k { font: 600 var(--fs-2) var(--avi); color: var(--text-3); letter-spacing: 0.12em; text-transform: uppercase; }
.route .v { font: 700 var(--fs-7) var(--mono); margin-top: var(--space-1); }
.route--perf { margin-top: var(--space-2-5); }
.route--perf .v { font-size: var(--fs-6); }
.route__warn { grid-column: 1 / -1; color: var(--amber); font-size: var(--fs-5); margin-top: var(--space-1); }
.foot { display: flex; gap: var(--space-2-5); align-items: center; margin-top: var(--space-4); }
.foot .btn-primary { flex: 1; }
.hero-caption { position: fixed; left: 50%; bottom: var(--space-8); transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); white-space: nowrap; }
#menu .settings-panel { margin-left: auto; width: 390px; }
.ptitle { font: 700 var(--fs-11)/1 var(--sans); letter-spacing: -0.01em; margin: var(--space-1) 0 var(--space-0-5); }
.sgroup { font: 600 var(--fs-5) var(--sans); color: var(--text); margin: var(--space-6-5) 0 calc(-1 * var(--space-1-5)); padding-top: var(--space-4); border-top: 1px solid var(--stroke); }
.sgroup:first-child { margin-top: var(--space-2-5); border-top: 0; padding-top: 0; }
#pSettings .sgroup:first-child { margin-top: var(--space-4-5); }
.card kbd { font: 700 var(--fs-3) var(--mono); padding: var(--space-0-5) var(--space-1-5); border-radius: var(--r-2xs); background: rgba(255, 255, 255, 0.12); border: 1px solid var(--stroke); }
@media (max-width: 1080px) {
  #menu { flex-direction: column; overflow-y: auto; pointer-events: auto; }
  #menu .panel, #menu .settings-panel { width: auto; max-width: none; margin: 0; flex: none; overflow: visible; }
  #menu .scroll { overflow: visible; }
  .hero-caption { display: none; }
}
.hero-caption .t { font: 700 var(--fs-15)/1.05 var(--sans); letter-spacing: -0.02em; }
.hero-caption .s { font: 500 var(--fs-6) var(--avi); color: rgba(255, 255, 255, 0.75); letter-spacing: 0.12em; text-transform: uppercase; margin-top: var(--space-2); }

/* ---------- flight overlay ---------- */
#flight { position: fixed; inset: 0; pointer-events: none; }
#flight > * { pointer-events: auto; }
.topbar { position: absolute; left: 50%; top: var(--space-3-5); transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2-5) var(--space-4-5); border-radius: var(--r-pill); font: 500 var(--fs-5) var(--sans); white-space: nowrap; }
.topbar .sep { width: 1px; height: var(--space-4); background: var(--stroke); }
.topbar .k { color: var(--text-3); font: 600 var(--fs-2) var(--avi); letter-spacing: 0.12em; margin-right: var(--space-1-5); }
.topbar .v { font: 700 var(--fs-5) var(--mono); }
.topbar .rt { font: 700 var(--fs-5) var(--mono); color: var(--magenta); }
#ap { position: absolute; left: 50%; top: var(--ap-top); transform: translateX(-50%); display: flex; gap: var(--space-1-5); padding: var(--space-1-5); border-radius: var(--r-lg); align-items: center; }
#ap .b { appearance: none; border: 1px solid transparent; background: rgba(255, 255, 255, 0.06); color: var(--text-2); border-radius: var(--r-md); padding: var(--space-2) var(--space-3); font: 700 var(--fs-4) var(--mono); letter-spacing: 0.04em; cursor: pointer; min-width: var(--tap); }
#ap .b.on { background: rgba(75, 227, 138, 0.18); border-color: rgba(75, 227, 138, 0.55); color: var(--green); }
#ap .b.arm { border-color: rgba(95, 214, 255, 0.5); color: var(--cyan); }
#ap .knob { display: flex; align-items: center; gap: var(--space-0-5); background: rgba(0, 0, 0, 0.25); border-radius: var(--r-md); padding: var(--space-0-5); }
#ap .knob .lbl { font: 600 var(--fs-1) var(--avi); color: var(--text-3); letter-spacing: 0.1em; padding: 0 var(--space-1) 0 var(--space-1-5); }
#ap .knob .val { font: 700 var(--fs-5) var(--mono); color: var(--magenta); min-width: 54px; text-align: center; }
#ap .knob button { appearance: none; border: 0; background: rgba(255, 255, 255, 0.08); color: var(--text); width: var(--space-6); height: var(--space-6-5); border-radius: var(--r-xs); cursor: pointer; font-size: var(--fs-7); line-height: 1; }
#ap .knob button:hover { background: rgba(255, 255, 255, 0.18); }
.inst { position: absolute; bottom: var(--space-4); padding: var(--space-1-5); border-radius: var(--r-xl); }
.inst canvas { display: block; border-radius: var(--r-lg); }
#pfdBox { left: var(--space-4); }
#ndBox { right: calc(var(--space-4) + var(--eicasW, 250px) + var(--space-6)); }
#eicasBox { right: var(--space-4); }
.nd-range { position: absolute; left: var(--space-3-5); bottom: var(--space-3); display: flex; gap: var(--space-1); }
.nd-range button { appearance: none; border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.3); border-radius: var(--r-xs); width: var(--space-6-5); height: var(--space-6); cursor: pointer; font-size: var(--fs-6); color: var(--text); }
#cas { position: absolute; right: var(--space-4); top: var(--space-3-5); display: flex; flex-direction: column; gap: var(--space-1-5); align-items: flex-end; }
.cas { padding: var(--space-2) var(--space-3-5); border-radius: var(--r-sm); font: 700 var(--fs-5) var(--mono); letter-spacing: 0.06em; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.cas.red { background: rgba(255, 75, 66, 0.28); color: #ffd2cf; border: 1px solid rgba(255, 75, 66, 0.7); animation: blink 0.8s steps(2) infinite; }
.cas.amber { background: rgba(255, 181, 71, 0.2); color: #ffe2b5; border: 1px solid rgba(255, 181, 71, 0.6); }
.cas.stop { background: #ff453a; color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 6px 22px rgba(255, 69, 58, 0.45); }
.cas.white { background: rgba(10, 12, 16, 0.6); color: #f2f5f8; border: 1px solid rgba(242, 245, 248, 0.45); }
.cas.cyan { background: rgba(95, 214, 255, 0.16); color: #cfefff; border: 1px solid rgba(95, 214, 255, 0.5); }
@keyframes blink { 50% { opacity: 0.55; } }
#toast { position: absolute; left: 50%; top: var(--toast-top); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--space-2); align-items: center; pointer-events: none; }
.toast { padding: var(--space-2-5) var(--space-4-5); border-radius: var(--r-pill); font: 600 var(--fs-6) var(--sans); animation: tin 0.35s ease-out; pointer-events: auto; cursor: pointer; }
.toast .m { font-family: var(--mono); font-weight: 700; }
@keyframes tin { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.viewtag { position: absolute; left: var(--space-4); top: var(--space-3-5); padding: var(--space-2) var(--space-3-5); border-radius: var(--r-pill); font: 600 var(--fs-4) var(--sans); color: var(--text-2); display: flex; gap: var(--space-2-5); align-items: center; }
.viewtag kbd, .guide kbd, .toast kbd { font: 700 var(--fs-3) var(--mono); padding: var(--space-1) var(--space-2); border-radius: var(--r-2xs); background: rgba(255, 255, 255, 0.12); border: 1px solid var(--stroke); color: var(--text); }
.inst, #ap { transition: opacity 0.3s; }
.cockpit-mode .inst, .no-panels .inst, .no-panels #ap { opacity: 0; pointer-events: none; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 14, 0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card { padding: var(--space-7); width: 520px; max-width: calc(100vw - var(--space-8)); max-height: calc(100vh - var(--space-8)); overflow-y: auto; }
.card h2 { margin: 0 0 var(--space-1); font: 700 var(--fs-12) var(--sans); letter-spacing: -0.01em; }
.card .sub { color: var(--text-2); font-size: var(--fs-6); margin-bottom: var(--space-1-5); }
.row { display: flex; gap: var(--space-2-5); align-items: center; }
.row .grow { flex: 1; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2-5); margin: var(--space-4-5) 0; }
.stat { background: rgba(0, 0, 0, 0.22); border: 1px solid var(--stroke); border-radius: var(--r-ml); padding: var(--space-3) var(--space-3-5); }
.stat .k { font: 600 var(--fs-2) var(--avi); color: var(--text-3); letter-spacing: 0.12em; text-transform: uppercase; }
.stat .v { font: 700 var(--fs-9) var(--mono); margin-top: var(--space-1); }

/* map */
#map { padding: var(--space-4-5); align-items: stretch; justify-content: stretch; }
#map .frame { position: relative; flex: 1; overflow: hidden; padding: 0; }
#map canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--r-xl); cursor: grab; }
#map .side { position: absolute; left: var(--space-4); top: var(--space-4); width: var(--coach-w); padding: var(--space-4); border-radius: var(--r-lg); }
#map .close { position: absolute; right: var(--space-4); top: var(--space-4); }
#map .popup { position: absolute; padding: var(--space-3-5) var(--space-4); border-radius: var(--r-lg); width: 290px; transform: translate(-50%, calc(-100% - 16px)); }
#map .popup .code { font: 700 var(--fs-9) var(--mono); }
#map .popup .nm { color: var(--text-2); font-size: var(--fs-5); margin: var(--space-0-5) 0 var(--space-2-5); }
#map .popup { width: 320px; }
#map .popup.popup--below { transform: translate(-50%, 16px); }
#map .popup .rw { font: 500 var(--fs-4) var(--mono); color: var(--text-3); margin-bottom: var(--space-2); display: grid; gap: 2px; }
#map .popup .rw > div { display: flex; gap: var(--space-2); }
#map .popup .rw > div > span:first-child { min-width: 3.25rem; color: var(--text-1, #fff); font-weight: 700; }
#map .popup .pf { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0 0 var(--space-2-5); }
#map .popup .pf span { display: block; font-size: var(--fs-2, 11px); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
#map .popup .pf b { font: 700 var(--fs-5) var(--mono); }
#map .popup .fit { font-size: var(--fs-4); margin-bottom: var(--space-3); padding-left: var(--space-2); border-left: 2px solid var(--c); color: var(--text-2); }
#map .popup .fit[data-c="green"] { --c: var(--green); } #map .popup .fit[data-c="amber"] { --c: var(--amber); } #map .popup .fit[data-c="red"] { --c: var(--red); }
#map .popup .row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

#loading { position: fixed; left: 50%; bottom: var(--space-10); transform: translateX(-50%); padding: var(--space-3) var(--space-5); border-radius: var(--r-pill); display: flex; gap: var(--space-3); align-items: center; font: 500 var(--fs-6) var(--sans); }
.spin { width: var(--space-4); height: var(--space-4); border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#fade { position: fixed; inset: 0; background: #0b0d10; pointer-events: none; transition: opacity 1.2s ease; }

@media (max-width: 900px) {
  #eicasBox { display: none; } #ndBox { right: var(--space-4); }
  .hero-caption { display: none; }
}

#coach { position: absolute; left: var(--space-4); top: var(--coach-top); width: var(--coach-w); padding: var(--space-3-5) var(--space-4) var(--space-4); border-radius: var(--r-lg); transition: border-color .3s; }
#coach .ct { font: 700 var(--fs-3) var(--avi); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--space-1-5); padding-right: var(--space-6); }
#coach .cdx { position: absolute; top: var(--space-2); right: var(--space-2); width: var(--space-7); height: var(--space-7); display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-3); font: 400 var(--fs-9)/1 var(--sans); cursor: pointer; }
#coach .cdx:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
#coach .cx { font: 500 var(--fs-6)/1.45 var(--sans); color: var(--text); }
#coach kbd { font: 700 var(--fs-3) var(--mono); padding: var(--space-0-5) var(--space-1-5); border-radius: var(--r-2xs); background: rgba(255,255,255,0.14); border: 1px solid var(--stroke); margin: 0 1px; }
#coach.warn { border-color: rgba(255,181,71,0.55); } #coach.warn .ct { color: var(--amber); }
#coach.alert { border-color: rgba(255,75,66,0.75); background: rgba(70,14,12,0.5); } #coach.alert .ct { color: var(--red); }

/* ---------- hover explanations ---------- */
#tip { position: fixed; z-index: 50; max-width: 300px; padding: var(--space-3) var(--space-3-5); border-radius: var(--r-ml); pointer-events: none; animation: tin 0.18s ease-out; }
#tip .tt { font: 700 var(--fs-5) var(--sans); display: flex; align-items: center; gap: var(--space-2); }
#tip .tt kbd { font: 700 var(--fs-3) var(--mono); padding: var(--space-0-5) var(--space-1-5); border-radius: var(--r-2xs); background: rgba(255, 255, 255, 0.12); border: 1px solid var(--stroke); }
#tip .tx { font: 400 var(--fs-5)/1.45 var(--sans); color: var(--text-2); margin-top: var(--space-1); }

/* ---------- systems (overhead) panel ---------- */
/* overhead panel: top center, under the autopilot bar — between the Assistant (left) and the alerts (right), clear of the instruments */
#sys { position: absolute; left: 50%; top: var(--panel-top); transform: translateX(-50%); padding: var(--space-3) var(--space-3-5) var(--space-3-5); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--space-2); width: max-content; max-width: min(620px, calc(100vw - 2 * 372px)); max-height: calc(100vh - var(--panel-top) - 360px); overflow-y: auto; }
@media (max-width: 1100px) { #sys { max-width: calc(100vw - var(--space-8)); top: auto; bottom: calc(var(--space-4) + var(--instH, 260px)); } }
#flight:has(#sys:not(.hidden)) #toast { top: auto; bottom: calc(var(--space-4) + var(--instH, 260px) + var(--space-3)); }
#sys .sys-h { display: flex; justify-content: space-between; align-items: center; font: 600 var(--fs-3) var(--avi); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
#sys .sys-h kbd { font: 700 var(--fs-2) var(--mono); padding: var(--space-0-5) var(--space-1-5); border-radius: var(--r-2xs); background: rgba(255, 255, 255, 0.12); border: 1px solid var(--stroke); color: var(--text); }
#sys .sys-g { display: flex; flex-wrap: wrap; gap: var(--space-1-5); align-items: center; }
#sys .sys-l { width: 54px; font: 600 var(--fs-2) var(--avi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
#sys .sw { appearance: none; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-2); align-items: center; min-width: 70px; min-height: var(--tap); padding: var(--space-1-5) var(--space-2-5); border-radius: var(--r-md); border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.28); color: var(--text-2); cursor: pointer; text-align: left; }
#sys .sw:hover { background: rgba(255, 255, 255, 0.08); }
#sys .sw:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
#sys .sw .led { grid-row: span 2; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: #2a2e33; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
#sys .sw .t { font: 700 var(--fs-4) var(--sans); color: var(--text); }
#sys .sw .st { font: 700 var(--fs-2) var(--mono); color: var(--text-3); letter-spacing: 0.04em; min-height: var(--space-3); }
#sys .sw.on { border-color: rgba(75, 227, 138, 0.5); background: rgba(75, 227, 138, 0.1); }
#sys .sw.on .led { background: var(--green); box-shadow: 0 0 8px var(--green); }
#sys .sw.on .st { color: var(--green); }
#sys .sw[data-s="park"].on, #sys .sw[data-s="push"].on { border-color: rgba(255, 69, 58, 0.7); background: rgba(255, 69, 58, 0.16); }
#sys .sw[data-s="park"].on .led, #sys .sw[data-s="push"].on .led { background: #ff453a; box-shadow: 0 0 8px #ff453a; }
#sys .sw[data-s="park"].on .st, #sys .sw[data-s="push"].on .st { color: #ff8a82; }
#sys .sw.busy .led { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: blink 0.9s steps(2) infinite; }
#sys .sw.busy .st { color: var(--amber); }

/* ---------- flight report ---------- */
#resultCard:has(.report) { width: min(980px, calc(100vw - var(--space-8))); padding: var(--space-5-5); }
.report { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: center; }
.report__cardwrap { position: relative; width: min(100%, calc((100svh - 90px) * 1080 / 1350)); margin-inline: auto; }
.report__card { width: 100%; height: auto; border-radius: var(--r-ml); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); display: block; }
/* hover target over the grade badge drawn on the card (badge at 816,704 · 200×150 on the 1080×1350 card) */
.report__gradehot { position: absolute; left: 75.56%; top: 52.15%; width: 18.52%; height: 11.11%; border-radius: var(--r-ml); cursor: help; }
.report__gradehot:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.report__why { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke); }
.report__why .k { font: 700 var(--fs-3) var(--avi); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); margin-bottom: var(--space-1-5); }
.report__why .v { font-size: var(--fs-5); line-height: 1.6; color: var(--text-2); }
.report__why b { color: var(--text); font-family: var(--mono); }
.report__side h2 { margin: 0 0 var(--space-1-5); }
.report__btns { display: flex; flex-direction: column; gap: var(--space-2-5); margin-top: var(--space-4-5); }
.report__btns button { min-height: var(--tap); }
.report .foot { flex-wrap: wrap; }
@media (max-width: 760px) { .report { grid-template-columns: 1fr; } .report__cardwrap { width: min(100%, calc(60svh * 1080 / 1350)); } }

/* ---------- METAR ---------- */
.metar { margin-top: var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-1-5); }
.metar__row { padding: var(--space-2) var(--space-2-5); border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--stroke); font: 600 var(--fs-4)/1.45 var(--mono); color: var(--cyan); word-break: break-word; }
.metar__row--none { color: var(--text-3); font-family: var(--sans); }
.seg.is-disabled { opacity: 0.35; pointer-events: none; }

/* ---------- save / load ---------- */
.savebox { margin-top: var(--space-4-5); }
.savebox__code { width: 100%; box-sizing: border-box; resize: vertical; border-radius: var(--r-md); border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.3); color: var(--text); font: 600 var(--fs-4)/1.5 var(--mono); padding: var(--space-2-5) var(--space-3); word-break: break-all; }
.savebox__btns { display: flex; gap: var(--space-2); margin-top: var(--space-2-5); flex-wrap: wrap; }
.resume { appearance: none; width: 100%; margin-top: var(--space-4); display: grid; grid-template-columns: 1fr auto; gap: var(--space-0-5) var(--space-3); align-items: center; text-align: left; padding: var(--space-3-5) var(--space-4); border-radius: var(--r-ml); border: 1px solid rgba(75, 227, 138, 0.45); background: rgba(75, 227, 138, 0.1); color: var(--text); cursor: pointer; }
.resume:hover { background: rgba(75, 227, 138, 0.16); }
.resume:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.resume__route { font: 700 var(--fs-9) var(--mono); }
.resume__meta { grid-column: 1; font-size: var(--fs-4); color: var(--text-2); }
.resume__go { grid-row: 1 / span 2; grid-column: 2; font: 700 var(--fs-5) var(--sans); color: var(--green); }
.file { color: var(--text-2); font-size: var(--fs-5); }
.load__err { color: var(--red); min-height: 1.2em; }

/* ---------- loading screen ---------- */
.boot { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: #c9ccc6; overflow: hidden; transition: opacity 0.7s ease; }
.boot--out { opacity: 0; pointer-events: none; }
.boot__sky { position: absolute; inset: -10%; background:
  radial-gradient(60% 40% at 50% 38%, rgba(255, 252, 240, 0.95), rgba(255, 250, 235, 0) 70%),
  radial-gradient(120% 70% at 50% 120%, #6f7a74 0%, #8f9893 35%, rgba(160, 166, 160, 0) 70%),
  linear-gradient(180deg, #d9dbd3 0%, #c6cac3 45%, #9aa29d 70%, #707a75 100%);
  animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(-2%, 1%, 0) scale(1.04); } }
.boot__center { position: relative; text-align: center; color: #fff; padding: 0 var(--space-6); text-shadow: 0 2px 30px rgba(40, 50, 45, 0.35); }
.boot__brand { font: 300 clamp(var(--fs-14), 7vw, 92px)/1 var(--sans); letter-spacing: 0.32em; margin-right: -0.32em; }
.boot__route { margin-top: var(--space-6-5); font: 700 clamp(var(--fs-9), 2.2vw, 26px) var(--mono); letter-spacing: 0.08em; min-height: 1.2em; }
.boot__route .arrow { opacity: 0.7; margin: 0 0.5em; }
.boot__sub { margin-top: var(--space-2); font: 500 var(--fs-5) var(--avi); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.boot__bar { margin: var(--space-8) auto 0; width: min(320px, 70vw); height: var(--space-0-5); background: rgba(255, 255, 255, 0.35); border-radius: 2px; overflow: hidden; }
.boot__fill { height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); transition: transform 0.6s ease; }
.boot__status { margin-top: var(--space-3); font: 500 var(--fs-4) var(--mono); letter-spacing: 0.06em; opacity: 0.85; }
.boot__tip { position: absolute; left: 50%; bottom: max(var(--space-7), env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100vw - var(--space-8))); text-align: center; color: rgba(255, 255, 255, 0.92); font: 400 var(--fs-6)/1.5 var(--sans); text-shadow: 0 1px 12px rgba(40, 50, 45, 0.4); }
.boot__tip kbd { font: 700 var(--fs-3) var(--mono); padding: var(--space-0-5) var(--space-1-5); border-radius: var(--r-2xs); background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.35); }
@media (prefers-reduced-motion: reduce) { .boot__sky { animation: none; } }

/* ---------- message history ---------- */
.vt-btn { appearance: none; border: 0; background: none; color: inherit; font: inherit; display: inline-flex; gap: var(--space-2-5); align-items: center; cursor: pointer; padding: 0; }
.vt-btn:hover { color: var(--text); }
.vt-btn .badge { min-width: var(--space-4-5); height: var(--space-4-5); padding: 0 var(--space-1-5); border-radius: var(--r-xs); background: var(--cyan); color: #06121a; font: 700 var(--fs-3)/18px var(--mono); text-align: center; }
#log { position: absolute; left: var(--space-4); top: var(--log-top); width: min(420px, calc(100vw - var(--space-8))); max-height: min(70vh, 640px); display: flex; flex-direction: column; border-radius: var(--r-lg); padding: var(--space-3-5) var(--space-3-5) var(--space-2-5); z-index: 6; }
.log__h { display: flex; justify-content: space-between; align-items: center; font: 700 var(--fs-7) var(--sans); padding: 0 var(--space-1) var(--space-2-5); }
.log__x { appearance: none; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.06); color: var(--text-2); border-radius: var(--r-sm); padding: var(--space-1-5) var(--space-2-5); font: 600 var(--fs-4) var(--sans); cursor: pointer; display: flex; gap: var(--space-1-5); align-items: center; min-height: var(--space-8); }
.log__x kbd { font: 700 var(--fs-2) var(--mono); padding: 1px var(--space-1-5); border-radius: var(--r-2xs); background: rgba(255, 255, 255, 0.12); }
.log__list { overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-1-5); padding-right: var(--space-1); scrollbar-width: thin; overscroll-behavior: contain; }
.log__item { padding: var(--space-2-5) var(--space-3); border-radius: var(--r-md); background: rgba(0, 0, 0, 0.22); font-size: var(--fs-5); line-height: 1.45; color: var(--text-2); }
.log__item[data-kind="coach"] .log__kind { color: var(--cyan); }
.log__item[data-kind="tower"] .log__kind { color: var(--green); }
.log__item[data-kind="alert"] .log__kind { color: var(--amber); }
.log__meta { display: flex; justify-content: space-between; font: 600 var(--fs-2) var(--avi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--space-0-5); }
.log__title { font: 700 var(--fs-5) var(--sans); color: var(--text); }
.log__text kbd { font: 700 var(--fs-3) var(--mono); padding: 1px var(--space-1-5); border-radius: var(--r-2xs); background: rgba(255, 255, 255, 0.12); border: 1px solid var(--stroke); color: var(--text); }
.log__text .m { font-family: var(--mono); font-weight: 700; }
.log__empty { color: var(--text-3); font-size: var(--fs-5); padding: var(--space-2); }

/* ---------- settings: columns when there's room (pause menu is widescreen) ---------- */
.settings__col + .settings__col { border-top: 1px solid var(--stroke); margin-top: var(--space-5-5); padding-top: var(--space-1); }
#pause { padding: 0; }
#pauseCard { width: calc(100vw - var(--space-12)); height: calc(100svh - var(--space-12)); max-width: none; max-height: none; padding: clamp(var(--space-6), 3vw, var(--space-12)) clamp(var(--space-6), 4vw, var(--space-16)); display: flex; flex-direction: column; border-radius: var(--r-xl); }
#pauseCard #pSettings.settings { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 clamp(var(--space-6), 3.5vw, var(--space-16)); align-items: start; align-content: start; margin-top: clamp(var(--space-3), 3vh, var(--space-9)); }
#pauseCard .settings__col { min-width: 0; border-top: 0; margin-top: 0; padding-top: 0; }
#pauseCard .settings__col .sgroup { margin: 0 0 var(--space-1) !important; padding: 0 0 var(--space-3); border-top: 0; border-bottom: 1px solid var(--stroke); font: 600 var(--fs-9) var(--sans); }
#pauseCard .label { margin: clamp(var(--space-3-5), 2.4vh, var(--space-6-5)) 0 var(--space-2-5); }
#pauseCard .seg { gap: var(--space-2); }
#pauseCard .seg button { padding: var(--space-2-5) var(--space-3-5); font-size: var(--fs-6); }
#pauseCard .metar__row { font-size: var(--fs-3); }
#pauseCard .foot { margin-top: clamp(var(--space-4), 3vh, var(--space-8)); padding-top: var(--space-4-5); border-top: 1px solid var(--stroke); }
#pauseCard .foot .btn-primary { flex: 0 0 auto; min-width: 220px; margin-left: auto; }
#pauseCard .savebox { margin-top: var(--space-4-5); }
#pauseCard h2 { display: inline; margin-right: var(--space-3); }
#pauseCard .sub { display: inline; }
.callsign { width: 100%; box-sizing: border-box; min-height: var(--space-10); padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.25); color: var(--text); font: 700 var(--fs-7) var(--mono); letter-spacing: 0.04em; }
.callsign:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- scenery veil (behind the planner while a new airport streams in) ---------- */
.veil { position: fixed; inset: 0; z-index: 0; display: grid; place-items: center; overflow: hidden; background: #c9ccc6; transition: opacity 0.7s ease; }
.veil--out { opacity: 0; }
.veil__c { position: relative; text-align: center; color: #fff; text-shadow: 0 2px 24px rgba(40, 50, 45, 0.35); }
.veil__t { font: 300 clamp(var(--fs-13), 5vw, 64px)/1 var(--sans); letter-spacing: 0.12em; }
.veil__s { margin-top: var(--space-3); font: 500 var(--fs-4) var(--mono); letter-spacing: 0.08em; opacity: 0.85; }
.veil .boot__bar { margin-top: var(--space-6-5); }

/* ---- guide (H) ---- */
.term { color: inherit; text-decoration: underline dotted rgba(95, 214, 255, 0.8); text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: help; }
.term:hover { color: var(--cyan); }
#help { z-index: 30; }
.guide { width: calc(100vw - var(--space-12)); height: calc(100svh - var(--space-12)); max-width: 1500px; max-height: none; padding: clamp(var(--space-5-5), 2.6vw, var(--space-10)) clamp(var(--space-5-5), 3.4vw, var(--space-14)) 0; display: grid; grid-template-columns: 190px 1fr; grid-template-rows: auto 1fr; gap: 0 clamp(var(--space-5), 3vw, var(--space-12)); border-radius: var(--r-xl); overflow: hidden; }
.guide__h { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4-5); border-bottom: 1px solid var(--stroke); }
.guide__h h2 { margin: 0; }
.guide__search { flex: 1; max-width: 520px; margin-left: auto; appearance: none; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.07); color: var(--text); border-radius: var(--r-pill); padding: var(--space-3) var(--space-4-5); font: 500 var(--fs-6) var(--sans); outline: none; }
.guide__search:focus { border-color: rgba(95, 214, 255, 0.6); background: rgba(255, 255, 255, 0.1); }
.guide__nav { display: flex; flex-direction: column; gap: var(--space-0-5); padding: var(--space-4-5) 0; overflow-y: auto; }
.guide__nav a { color: var(--text-2); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--r-xs); font: 500 var(--fs-6) var(--sans); }
.guide__nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.guide__body { overflow-y: auto; padding: var(--space-1-5) var(--space-1) var(--space-10) 0; min-height: 0; scrollbar-width: thin; scroll-padding-top: var(--space-3); }
.guide__sec { padding-top: var(--space-5-5); }
.guide__sec h3 { margin: 0 0 var(--space-3-5); font: 700 var(--fs-10) var(--sans); letter-spacing: -0.01em; }
.guide__first { margin: 0; padding-left: var(--space-5-5); font-size: var(--fs-7); line-height: 1.6; color: var(--text-2); columns: 2 340px; column-gap: var(--space-12); }
.guide__first li { margin-bottom: var(--space-2); break-inside: avoid; }
.guide__ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-2) var(--space-9); }
.guide__grp { font: 700 var(--fs-3) var(--avi); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); margin: var(--space-1) 0 var(--space-1-5); }
.guide__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-1-5) 0; font-size: var(--fs-6); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.guide__row span:last-child { display: flex; gap: var(--space-1); flex-shrink: 0; }
.guide__faq { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.guide__faq summary { cursor: pointer; padding: var(--space-3-5) var(--space-7) var(--space-3-5) 0; font: 600 var(--fs-7) var(--sans); list-style: none; position: relative; }
.guide__faq summary::-webkit-details-marker { display: none; }
.guide__faq summary::after { content: '+'; position: absolute; right: var(--space-1); top: var(--space-2-5); font: 400 var(--fs-10) var(--sans); color: var(--text-2); }
.guide__faq[open] summary::after { content: '−'; }
.guide__a { padding: 0 0 var(--space-4); max-width: 860px; font-size: var(--fs-7); line-height: 1.65; color: var(--text-2); }
.guide__a b { color: var(--text); }
.guide__a ul, .guide__a ol { margin: var(--space-2) 0; padding-left: var(--space-5-5); }
.guide__a li { margin-bottom: var(--space-1); }
.guide__a p + p { margin-top: var(--space-2-5); }
.guide__part { margin-top: var(--space-6); }
.guide__web { margin: 0 0 var(--space-2); font-size: var(--fs-5); color: var(--text-2); }
.guide__web a { color: var(--cyan); }
.guide__terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.guide__term { padding: var(--space-4) var(--space-4-5); border-radius: var(--r-ml); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); scroll-margin: var(--space-5); }
.guide__term h4 { margin: 0 0 var(--space-0-5); font: 700 var(--fs-7) var(--sans); }
.guide__short { font-size: var(--fs-5); color: var(--cyan); margin-bottom: var(--space-2); }
.guide__term p { margin: 0; font-size: var(--fs-6); line-height: 1.6; color: var(--text-2); }
.guide__term.is-hl { animation: guideHl 2.4s ease; }
@keyframes guideHl { 0%, 40% { background: rgba(95, 214, 255, 0.2); border-color: rgba(95, 214, 255, 0.7); } }
.guide__none { padding: var(--space-10) 0; color: var(--text-2); font-size: var(--fs-7); }
@media (max-width: 760px) {
  .guide { grid-template-columns: 1fr; width: calc(100vw - var(--space-4)); height: calc(100svh - var(--space-4)); border-radius: var(--r-lg); padding: var(--space-4-5) var(--space-4) 0; }
  .guide__nav { flex-direction: row; overflow-x: auto; padding: var(--space-2-5) 0; }
  .guide__nav a { white-space: nowrap; }
  .guide__h { flex-wrap: wrap; } .guide__search { order: 3; flex-basis: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .guide__term.is-hl { animation: none; outline: 2px solid var(--cyan); } }

/* ---- missions ---- */
#missions, #lesson { z-index: 29; }
.missions { grid-template-columns: 1fr; }
.mis__body { padding-right: var(--space-1-5); }
.mis__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3-5); }
.mis { display: flex; flex-direction: column; padding: var(--space-4-5) var(--space-5) var(--space-4-5); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); }
.mis__route { font: 700 var(--fs-5) var(--mono); color: var(--magenta); letter-spacing: 0.06em; }
.mis__route span { margin: 0 var(--space-1-5); opacity: 0.7; }
.mis h4 { margin: var(--space-1-5) 0 var(--space-0-5); font: 700 var(--fs-9) var(--sans); letter-spacing: -0.01em; display: flex; align-items: center; gap: var(--space-2); }
.mis__tag { font: 700 var(--fs-2) var(--avi); letter-spacing: 0.12em; text-transform: uppercase; color: #06121a; background: var(--cyan); border-radius: var(--r-pill); padding: var(--space-1) var(--space-2); }
.mis__cities { color: var(--text-2); font-size: var(--fs-5); }
.mis p { margin: var(--space-2-5) 0 var(--space-3); font-size: var(--fs-6); line-height: 1.55; color: var(--text-2); flex: 1; }
.mis__chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-bottom: var(--space-3-5); }
.mis__chips span { font-size: var(--fs-4); padding: var(--space-1) var(--space-2-5); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); color: var(--text); }
.mis__chips .mis__fail { background: rgba(255, 75, 66, 0.18); color: #ff8a82; }
.mis__go { align-self: flex-start; min-width: 120px; }
.mis__lvl { display: inline-flex; gap: var(--space-1); margin-right: var(--space-2); vertical-align: middle; }
.mis__lvl i { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.mis__lvl i.on { background: var(--cyan); }
.lesson { width: min(620px, calc(100vw - var(--space-8))); padding: var(--space-7-5) var(--space-8) var(--space-6); border-radius: var(--r-xl); }
.lesson__k { font: 700 var(--fs-3) var(--avi); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--space-1-5); }
.lesson h2 { margin: 0 0 var(--space-3); }
.lesson__t p { margin: 0 0 var(--space-3); font-size: var(--fs-7); line-height: 1.6; color: var(--text-2); }
.lesson__t b { color: var(--text); }
.lesson .foot { display: flex; justify-content: flex-end; margin-top: var(--space-5-5); padding-top: var(--space-4-5); border-top: 1px solid var(--stroke); }

/* ---- map route ---- */
.mroute { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-1-5); font: 700 var(--fs-4) var(--mono); }
.mroute span { padding: var(--space-1) var(--space-2); border-radius: var(--r-2xs); background: rgba(255, 107, 214, 0.14); color: #ff9be6; }
.mroute span.done { opacity: 0.4; }
.mroute span.act { background: #fff; color: #111; }
.mroute__hint { margin-top: var(--space-2); font-size: var(--fs-4); color: var(--text-2); line-height: 1.45; }
.lesson .foot .btn-primary { flex: 0 0 auto; min-width: 180px; }

/* ---- status lights (annunciators) ---- */
.status { position: absolute; bottom: 1rem; left: calc(1rem + var(--pfdW, 452px) + 1rem); right: calc(1rem + var(--ndW, 332px) + 1.5rem + var(--eicasW, 250px) + 0.75rem + 1rem); display: flex; justify-content: flex-start; align-items: flex-end; gap: 0.5rem; pointer-events: none; }
.status .lts { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 0.375rem; min-width: 0; }
/* cockpit / no panels: lights centered as before; the levers sit bottom-left above the view bar, clear of the displays */
.cockpit-mode .status, .no-panels .status { justify-content: center; }
.cockpit-mode .status .lts, .no-panels .status .lts { flex: none; }
.cockpit-mode .tlq, .no-panels .tlq { position: fixed; left: 1rem; bottom: 7.25rem; }
.status .lts:empty { display: none; }
.status > * { pointer-events: auto; }
/* thrust lever quadrant: forward = more thrust, like the real levers. Idle sits 18% up the track; below it is the
   reverse range. The handle (white) is where the levers are set; the green fill is the engines' actual power (N1). */
.tlq { --thr: 0; --n1: 0; flex: none; display: grid; grid-template-columns: auto auto; grid-template-areas: "track lbl" "track val"; align-items: center; column-gap: 0.7rem; padding: 0.45rem 0.75rem 0.45rem 0.85rem; border-radius: 0.6rem; background: rgba(10, 12, 16, 0.62); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: help; }
.tlq__lbl { grid-area: lbl; align-self: end; font: 700 0.5625rem var(--mono); letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); }
.tlq--at .tlq__lbl { color: var(--green); }
.tlq__val { grid-area: val; align-self: start; min-width: 2.9rem; font: 700 0.875rem var(--mono); color: var(--cyan); }
.tlq__track { grid-area: track; position: relative; width: 0.45rem; height: 3rem; border-radius: 0.25rem; background: rgba(255, 255, 255, 0.1); }
.tlq__idle { position: absolute; left: -0.3rem; right: -0.3rem; bottom: 18%; height: 1px; background: rgba(255, 255, 255, 0.45); }
.tlq__n1 { position: absolute; left: 0; right: 0; bottom: 18%; height: calc(var(--n1) * 82%); border-radius: 0 0 0.1rem 0.1rem; background: var(--green); opacity: 0.85; transition: height 0.12s linear; }
.tlq__lever { position: absolute; left: -0.45rem; width: 1.35rem; height: 0.45rem; bottom: calc(18% + max(var(--thr), 0) * 82% + min(var(--thr), 0) * 18% - 0.225rem); border-radius: 0.15rem; background: #f2f4f6; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5); transition: bottom 0.1s linear; }
.tlq[data-rev="moving"] .tlq__lever { background: var(--amber); } .tlq[data-rev="on"] .tlq__lever { background: var(--green); }
.tlq[data-rev] .tlq__n1 { bottom: auto; top: 82%; height: calc(var(--n1) * 18%); border-radius: 0 0 0.1rem 0.1rem; } /* reverse: power shown down into the reverse range */
.tlq[data-rev=""] .tlq__n1 { bottom: 18%; top: auto; height: calc(var(--n1) * 82%); }
.tlq[data-rev="moving"] .tlq__val { color: var(--amber); } .tlq[data-rev="on"] .tlq__val { color: var(--green); }
.cockpit-mode .status, .no-panels .status { left: 1rem; right: 1rem; }
.lt { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; min-width: 4.5rem; padding: 0.25rem 0.6rem; border-radius: 0.6rem; font: 700 0.6875rem var(--mono); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.28); background: rgba(10, 12, 16, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: help; }
.lt[data-on] { color: var(--lt); border-color: color-mix(in oklch, var(--lt) 60%, transparent); background: color-mix(in oklch, var(--lt) 18%, rgba(10, 12, 16, 0.7)); box-shadow: 0 0 0.75rem color-mix(in oklch, var(--lt) 35%, transparent); }
.lt[data-c="green"] { --lt: var(--green); } .lt[data-c="amber"] { --lt: var(--amber); } .lt[data-c="cyan"] { --lt: var(--cyan); }
.lt[data-c="red"] { --lt: #ff453a; } .lt[data-c="white"] { --lt: #ffffff; }
.status--dark .lt { opacity: 0.5; }
@media (max-width: 56em) { .status { left: 1rem; right: 1rem; bottom: calc(var(--instH, 260px) + 1.5rem); } }

/* ---- layout fixes from the UI audit ---- */
/* start-screen footer: secondary actions share one row (wrapping if needed), Fly gets its own full-width row */
#menu .panel > .foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(5.5rem, 100%), 1fr)); gap: 0.5rem; }
#menu .panel > .foot .btn-ghost { padding-inline: 0.5rem; min-height: 2.75rem; white-space: nowrap; }
#menu .panel > .foot .btn-primary { grid-column: 1 / -1; min-height: 3rem; }
/* view / guide / messages hints: bottom-left above the PFD, so the top row is the route bar alone */
.viewtag { top: auto; bottom: calc(var(--instH, 260px) + 1.75rem); max-width: calc(100vw - 2rem); flex-wrap: wrap; }
.cockpit-mode .viewtag, .no-panels .viewtag { bottom: 1rem; }
.cockpit-mode .status, .no-panels .status { left: max(1rem, calc(50% - 22rem)); right: max(1rem, calc(50% - 22rem)); }
.vt-btn { min-height: 1.75rem; }
/* sliders: a 44px touch target around the thin track */
input[type=range] { min-height: 2.75rem; }
/* overhead panel on medium screens: under the AP bar, to the right of the Assistant card */
@media (max-width: 1100px) {
  #sys { top: 7.375rem; bottom: auto; left: calc(1rem + var(--coach-w) + 1rem); right: 1rem; transform: none; width: auto; max-width: none; }
}
@media (max-width: 48em) {
  #sys { top: auto; left: 1rem; right: 1rem; bottom: calc(var(--instH, 260px) + 1.5rem); }
  #ndBox { display: none; }
}
/* narrow screens: the route bar and AP bar scroll sideways instead of running off the screen */
@media (max-width: 64em) {
  .topbar, #ap { max-width: calc(100vw - 2rem); overflow-x: auto; scrollbar-width: none; }
  .topbar::-webkit-scrollbar, #ap::-webkit-scrollbar { display: none; }
}

/* ---- panel slot: overhead panel and message history open in the same place, one at a time ----
   under the AP bar, between the Assistant card (left) and the crew alerts (right), above the instruments */
#sys, #log {
  position: absolute; top: 7.375rem; bottom: auto; transform: none; z-index: 6;
  left: calc(1rem + var(--coach-w) + 1rem); right: calc(1rem + 12rem);
  width: auto; max-width: 40rem; margin-inline: auto;
  max-height: calc(100svh - 7.375rem - var(--instH, 260px) - 6rem); overflow-y: auto;
}
#log { display: flex; flex-direction: column; }
#log.hidden, #sys.hidden { display: none; }
#sys .sys-h { gap: 1rem; }
@media (max-width: 64em) { #sys, #log { right: 1rem; } }

/* while a panel is open, toasts move down above the instruments */
#flight:has(#sys:not(.hidden)) #toast, #flight:has(#log:not(.hidden)) #toast { top: auto; bottom: calc(var(--instH, 260px) + 1.75rem); }

/* route bar: never under the crew alerts; drop the clocks before anything else */
.topbar { max-width: calc(100vw - 2 * 14rem); overflow-x: auto; scrollbar-width: none; }
.topbar::-webkit-scrollbar { display: none; }
#cas .cas { max-width: 12.5rem; white-space: normal; text-align: right; }
@media (max-width: 100em) { .topbar .tb-utc { display: none; } }
@media (max-width: 80em) { .topbar .tb-time { display: none; } }
/* phones and narrow windows: one column of information, nothing stacked on anything else */
@media (max-width: 48em) {
  .viewtag { display: none; }
  .topbar { max-width: calc(100vw - 2rem); top: 0.75rem; }
  #cas { top: auto; bottom: calc(var(--instH, 260px) + 4.75rem); right: 1rem; }
  #coach { width: calc(100vw - 2rem); }
  #flight:has(#sys:not(.hidden)) #coach, #flight:has(#log:not(.hidden)) #coach { display: none; }
  #sys, #log { left: 1rem; right: 1rem; max-width: none; top: 7.375rem; max-height: calc(100svh - 7.375rem - var(--instH, 260px) - 11rem); }
  .status { left: 1rem; right: 1rem; bottom: calc(var(--instH, 260px) + 1.5rem); flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  #toast, #flight:has(#sys:not(.hidden)) #toast, #flight:has(#log:not(.hidden)) #toast { top: auto; bottom: calc(var(--instH, 260px) + 8rem); }
  #pfdBox { left: 50%; transform: translateX(-50%); }
}

/* cockpit view / clean screen: status lights take the bottom row (one line, scrolls if narrow), hints sit above them */
.cockpit-mode .status, .no-panels .status { left: 1rem; right: 1rem; flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
.cockpit-mode .viewtag, .no-panels .viewtag { bottom: 3.75rem; }

#ap .knob .val--btn { appearance: none; border: 0; background: none; width: auto; height: auto; cursor: pointer; padding: 0 0.25rem; min-height: 1.625rem; border-radius: 0.5rem; }
#ap .knob .val--btn:hover { background: rgba(255, 255, 255, 0.1); }
#ap .knob .val--btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* short landscape screens (phones sideways): clean screen, every element in its own place */
#flight.short .viewtag, #flight.short .inst { display: none; }
#flight.short .status { left: 1rem; right: 1rem; bottom: 1rem; flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
#flight.short .tlq { position: static; } #flight.short .status .lts { flex-wrap: nowrap; }
#flight.short #coach { top: 6.75rem; width: min(var(--coach-w), calc(50vw - 2rem)); max-height: calc(100svh - 6.75rem - 4.5rem); overflow-y: auto; padding: var(--space-2-5) var(--space-3) var(--space-3); }
#flight.short #coach .cx { font-size: var(--fs-5); }
#flight.short #cas { top: auto; bottom: 4.25rem; right: 1rem; }
#flight.short #toast, #flight.short:has(#sys:not(.hidden)) #toast, #flight.short:has(#log:not(.hidden)) #toast { top: auto; bottom: 4.25rem; left: 50%; max-width: calc(100vw - 28rem); }
#flight.short #sys, #flight.short #log { top: 6.75rem; left: calc(min(var(--coach-w), 50vw - 2rem) + 2rem); right: 1rem; max-height: calc(100svh - 6.75rem - 7.5rem); }
#flight.short:has(#sys:not(.hidden)) #cas, #flight.short:has(#log:not(.hidden)) #cas { display: none; }

/* ===== instrument-style layout (mockup v2) ===== */
/* displays stay in the corners in the outside views (the center is where the jet and the runway are);
   solid black like real LCDs — glass only on the chrome */
#instRow { display: contents; }
.inst { background: rgba(4, 6, 9, 0.94); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* autopilot bar values: yours cyan, the computer's magenta */
#ap .knob .val { color: var(--cyan); } #ap .knob .val.mng { color: var(--magenta); }
/* no strip across the windshield: route, distance, time and weather live with the map display (as on a real MFD),
   and the autopilot bar takes the top edge for good. Phones (no map display) keep the route bar on top. */
@media (min-width: 48.01em) {
  :root { --coach-top: 72px; --panel-top: 72px; } /* everything moves up into the space the route bar left */
  #ap { top: var(--space-3-5); max-width: calc(100vw - 2 * 13.5rem); overflow-x: auto; scrollbar-width: none; }
  #topbar { top: auto; left: auto; transform: none; right: var(--space-4); bottom: calc(var(--space-4) + var(--ndH, 240px) + var(--space-2)); max-width: calc(var(--ndW, 332px) + var(--eicasW, 250px) + 4rem); padding: var(--space-1-5) var(--space-3); gap: var(--space-2-5); border-radius: var(--r-md); font-size: var(--fs-4); background: rgba(4, 6, 9, 0.85); }
  #topbar .tb-time, #topbar .tb-utc { display: none; }
  .cockpit-mode #topbar, .no-panels #topbar { display: none; }
  #flight.short #topbar { display: flex; top: var(--space-3-5); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100vw - 2rem); }
  #flight.short #ap { top: var(--ap-top); }
  #toast, #flight:has(#sys:not(.hidden)) #toast, #flight:has(#log:not(.hidden)) #toast { top: auto; bottom: calc(var(--instH, 260px) + var(--space-14)); }
  .cockpit-mode #toast, .no-panels #toast { bottom: var(--space-16); }
}
/* cockpit view: the Assistant sits low on the left, over the side console — never on the windshield */
.cockpit-mode #coach { top: auto; bottom: calc(var(--space-16) + var(--space-6)); }
/* sterile cockpit: takeoff and final below 1,000 ft — the Assistant shrinks to its title line */
#flight.sterile #coach:not(.alert):not(.warn) .cx { display: none; }
#flight.sterile #coach:not(.alert):not(.warn) { padding-block: var(--space-2); }

/* phones: the jet needs a keyboard, so play.html shows this note instead of loading the game */
#needDesktop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--space-6) var(--space-4); background: radial-gradient(120% 80% at 50% 0%, #1b2129, #0b0d10 70%); color: var(--text); font-family: var(--sans); }
#needDesktop[hidden] { display: none; }
.need-desktop #gl, .need-desktop #hud, .need-desktop #ui { display: none; }
.nd__card { max-width: 26rem; display: grid; gap: var(--space-4); }
.nd__brand { font: 700 var(--fs-4) var(--avi); letter-spacing: 0.32em; color: var(--text-2); }
.nd__card h1 { margin: 0; font: 600 var(--fs-14) var(--sans); letter-spacing: -0.01em; line-height: 1.15; }
.nd__card p { margin: 0; font-size: var(--fs-8); line-height: 1.55; color: var(--text-2); }
.nd__card p b { color: var(--text); font-weight: 600; }
.nd__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-2); }
.nd__btn { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-6); border-radius: var(--r-pill); background: #fff; color: #0b0d10; font-weight: 600; text-decoration: none; }
.nd__link { color: var(--text-2); min-height: var(--tap); display: inline-flex; align-items: center; }

/* manual illustrations (src/figures.js): dark-glass palette */
.mfig { --fig-fg: #e8ecef; --fig-dim: rgba(232, 236, 239, 0.45); --fig-panel: rgba(255, 255, 255, 0.06); --fig-jet: rgba(255, 255, 255, 0.14); --fig-air: rgba(140, 200, 255, 0.55);
  --fig-lift: var(--green); --fig-weight: #ff9b62; --fig-thrust: var(--cyan); --fig-drag: var(--magenta); --fig-warn: var(--amber); --fig-path: var(--magenta);
  margin: var(--space-3) 0 var(--space-4); padding: var(--space-3) var(--space-3-5) var(--space-3-5); border-radius: var(--r-ml); background: rgba(0, 0, 0, 0.28); border: 1px solid var(--stroke); max-width: 760px; }
.mfig svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.mfig__ctl { display: grid; gap: var(--space-1-5); margin-top: var(--space-2); }
.mfig__row { display: grid; grid-template-columns: 11rem 1fr 9rem; align-items: center; gap: var(--space-3); font-size: var(--fs-5); color: var(--text-2); }
.mfig__row input { width: 100%; accent-color: var(--cyan); }
.mfig__row output { font: 700 var(--fs-5) var(--mono); color: var(--text); text-align: right; }
.mfig__cap { margin-top: var(--space-2); font-size: var(--fs-5); line-height: 1.55; color: var(--text-2); }
.mfig__cap b { color: var(--text); }
/* manual: the one-line idea that opens a chapter, and the "when you fly" takeaway that closes it */
.guide__a .m-lead { font-size: var(--fs-7); line-height: 1.5; color: var(--text); font-weight: 500; }
.guide__a .m-take { margin-top: var(--space-3); padding: var(--space-2-5) var(--space-3-5); border-radius: var(--r-md); background: rgba(95, 214, 255, 0.08); border-left: 3px solid var(--cyan); color: var(--text); }
.guide__a .m-take b { color: var(--cyan); }
.guide__a li > ul { margin: var(--space-1-5) 0 0; }
/* manual: labeled screenshots */
.guide__a .mshot { margin: var(--space-3) 0; }
.guide__a .mshot img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--stroke); }
.mfig__seg { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-2); }
.mfig__seg button { min-height: 32px; padding: 0 var(--space-3); border-radius: var(--r-pill); border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.05); color: var(--text-2); font: 600 var(--fs-5) var(--sans); cursor: pointer; }
.mfig__seg button[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: #0b0d10; }