/* ===== Triple7 flight-deck landing ===== */
.deck {
  position: relative;
  min-height: 100dvh;
  display: grid;
  /* the windshield is the game: it takes whatever the screen has left after the panel */
  height: 100dvh;
  grid-template-rows: minmax(320px, 1fr) auto;
  background: #06070b;
  overflow: hidden;
}

/* --- Windshield --- */
.windshield {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #04050a 0%, #070b16 55%, #0b1322 78%, #131b2b 100%);
  border-bottom: 14px solid #14161c;
}
.windshield::before, .windshield::after {
  content: "";
  position: absolute; top: -6%; bottom: -2%;
  width: clamp(38px, 6vw, 90px);
  background: linear-gradient(90deg, #101218, #1a1d25 55%, #0c0e13);
  z-index: 3;
}
.windshield::before { left: -12px; transform: skewX(7deg); box-shadow: 6px 0 18px rgba(0,0,0,.65); }
.windshield::after { right: -12px; transform: skewX(-7deg); box-shadow: -6px 0 18px rgba(0,0,0,.65); }
/* the window pillars belong to the cockpit view only: chase, tower and fly-by cameras are outside
   the aeroplane (the no-WebGL photo fallback keeps them: it is a view through the windshield) */
.windshield[data-view]:not([data-view="cockpit"]):not(.no-webgl)::before,
.windshield[data-view]:not([data-view="cockpit"]):not(.no-webgl)::after { display: none; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
#world:active { cursor: grabbing; }

.ws-brand { font: 700 12px/1 var(--mono); letter-spacing: .34em; color: var(--gold); margin-bottom: 14px; }

/* start card (dismisses when the visitor takes controls) */
.start-card {
  position: absolute; z-index: 4; left: clamp(28px, 6vw, 80px); top: 50%; transform: translateY(-50%);
  max-width: 430px; pointer-events: none;
  padding: 20px 26px 22px; border-radius: 12px;
  /* light scrim: keeps the copy legible over the bright daytime runway without hiding the view */
  background: linear-gradient(100deg, rgba(6,9,14,.62) 0%, rgba(6,9,14,.34) 70%, rgba(6,9,14,0) 100%);
  backdrop-filter: blur(2px);
  transition: opacity .6s ease, transform .6s ease;
}
.start-card.hide { opacity: 0; transform: translateY(-58%); }
.start-card h1 {
  font-size: clamp(24px, 2.9vw, 36px); line-height: 1.12; letter-spacing: -.01em;
  color: #eef1f7; text-shadow: 0 2px 24px rgba(0,0,0,.85); margin: 0;
}
.start-card p { margin: 12px 0 0; color: #b6bdcc; font-size: clamp(14px, 1.3vw, 16.5px); max-width: 52ch; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.start-keys {
  margin-top: 16px; display: block; max-width: 100%;
  font: 600 10.5px/1.7 var(--mono); letter-spacing: .08em; color: #7ee3a1;
  border: 1px solid rgba(126,227,161,.35); border-radius: 6px; padding: 7px 12px;
  background: rgba(8, 24, 15, .55);
}

.start-btn { color: #7ee3a1; border-color: rgba(126,227,161,.55); }
.start-btn.on { color: #ffd23e; border-color: rgba(255,210,62,.6); box-shadow: 0 0 10px rgba(255,210,62,.25); }
.start-hint {
  position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%);
  font: 700 11px/1.5 var(--mono); letter-spacing: .08em; color: #ffd23e; text-align: center;
  background: rgba(6,9,14,.72); border: 1px solid rgba(255,210,62,.4); border-radius: 7px;
  padding: 8px 14px; opacity: 0; transition: opacity .4s ease; pointer-events: none; max-width: 90%;
}
.start-hint.show { opacity: 1; }

/* HUD objectives */
.hud { position: absolute; z-index: 4; top: 16px; right: clamp(56px, 8vw, 120px); pointer-events: none; }
.hud-obj { list-style: none; margin: 0; padding: 10px 14px; background: rgba(5,8,12,.55); border: 1px solid rgba(126,227,161,.25); border-radius: 8px; }
.hud-obj li { font: 600 11px/1.9 var(--mono); letter-spacing: .1em; color: #93a0b5; }
.hud-obj li.ok { color: #7ee3a1; }

/* mission complete banner */
.mission-banner {
  position: absolute; z-index: 5; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.94);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: rgba(7, 10, 16, .88); border: 1px solid var(--gold); border-radius: 12px;
  padding: 26px 34px; opacity: 0; pointer-events: none;
  visibility: hidden;                        /* out of the tab order while hidden */
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
  box-shadow: 0 10px 50px rgba(0,0,0,.6);
}
.mission-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; visibility: visible; transition: opacity .5s ease, transform .5s ease, visibility 0s; }
.mission-banner strong { font-size: 22px; color: #eef1f7; }
.mission-banner span { color: #aeb6c6; font-size: 14.5px; max-width: 40ch; }
.mission-banner .btn { margin-top: 8px; }

.ws-skip {
  position: absolute; left: clamp(20px, 4vw, 80px); right: auto; bottom: 14px; z-index: 6;
  font-size: 12.5px; color: #8d96a8; max-width: min(46ch, calc(100% - 48px));
  background: rgba(6,9,14,.72); border: 1px solid rgba(174,182,198,.28); border-radius: 7px;
  padding: 8px 12px;
}
.ws-skip a { color: #d5dbe6; }

/* --- Glareshield + panel (scoped so it never overrides form.panel on tool pages) --- */
.deck .panel {
  position: relative;
  background:
    linear-gradient(180deg, #23262d 0, #17191f 22px, #101216 60px, #0c0e12 100%);
  border-top: 3px solid #2c2f37;
  padding: clamp(12px, 1.6vw, 22px) clamp(12px, 2vw, 28px) clamp(16px, 2vw, 26px);
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 84px 0.95fr 1.05fr;
  gap: clamp(10px, 1.4vw, 20px);
  align-items: stretch;
}

/* --- pedestal: throttle + systems --- */
.pedestal {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #23262d, #17191f);
  border: 2px solid #2e3138; border-radius: 10px; padding: 12px 8px;
}
.ped-block { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 120px; }
.ped-tag { font: 700 9.5px/1 var(--mono); letter-spacing: .2em; color: #8d96a8; }
#throttle {
  writing-mode: vertical-lr; direction: rtl;
  width: 30px; flex: 1; accent-color: var(--gold);
  background: transparent; border: none; padding: 0; cursor: grab;
}
.ped-val { font: 700 11px/1 var(--mono); color: var(--gold-2); }
.ped-btn {
  width: 62px; padding: 8px 0; cursor: pointer;
  font: 700 9.5px/1 var(--mono); letter-spacing: .08em;
  color: #c8cdd8; background: linear-gradient(180deg, #3a3d45, #232529);
  border: 1px solid #4a4d55; border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
}
.ped-btn.on { color: #7ee3a1; border-color: rgba(126,227,161,.6); box-shadow: 0 0 10px rgba(126,227,161,.25), inset 0 1px 0 rgba(255,255,255,.09); }
.ped-btn:active { transform: translateY(1px); }


.instr {
  background: #050607;
  border: 2px solid #26282f;
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px #0d0e11, inset 0 0 26px rgba(0,0,0,.9), 0 3px 10px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
  min-height: 270px;
}
.instr canvas { display: block; width: 100%; height: 100%; }
.instr-tag {
  position: absolute; top: 6px; left: 10px; z-index: 2;
  font: 700 9.5px/1 var(--mono); letter-spacing: .22em; color: #56617a;
}

/* --- DU (data unit / weather) --- */
.du-screen {
  height: 100%; padding: 26px 14px 12px;
  font: 12.5px/1.75 var(--mono);
  color: #35e06e;
  text-shadow: 0 0 6px rgba(53,224,110,.55);
  white-space: pre-wrap; overflow: hidden;
}
.du-screen .amber { color: #ffb648; text-shadow: 0 0 6px rgba(255,182,72,.5); }
.du-screen .cyan { color: #5fd7e8; text-shadow: 0 0 6px rgba(95,215,232,.5); }

/* --- MCDU --- */
.mcdu {
  background: linear-gradient(180deg, #2a2d34, #1b1d23 70%, #14161b);
  border: 2px solid #34373f; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.55);
  padding: 10px 10px 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 300px;
}
/* screen + keys share one grid so every LSK sits exactly on its line */
.mcdu-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  grid-template-rows: auto repeat(6, minmax(30px, 1fr)) auto;
  column-gap: 7px; row-gap: 0;
  align-items: stretch;
}
.lsk {
  align-self: center; justify-self: center;
  width: 34px; height: 24px; cursor: pointer;
  background: linear-gradient(180deg, #3a3d45, #232529);
  border: 1px solid #4a4d55; border-radius: 4px;
  color: #c8cdd8; font: 700 10px/1 var(--mono);
  box-shadow: 0 2px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
}
.lsk:hover { border-color: var(--gold); color: var(--gold-2); }
.lsk:active { transform: translateY(1px); box-shadow: 0 1px 1px rgba(0,0,0,.5); }
/* middle-column cells stack into one continuous phosphor screen */
.mcdu-cell {
  background: #071208;
  border-left: 2px solid #101511; border-right: 2px solid #101511;
  padding: 0 10px;
  font: 11.5px/1 var(--mono);
  color: #39e070;
}
.mcdu-title {
  border-top: 2px solid #101511; border-radius: 6px 6px 0 0;
  text-align: center; font-size: 11px; letter-spacing: .16em; color: #e8edf2;
  padding-top: 9px;
}
.mcdu-subtitle {
  display: flex; justify-content: space-between;
  font-size: 8.5px; color: #4f9a68; letter-spacing: .1em;
  padding: 8px 0 4px;
}
.mcdu-line { display: flex; justify-content: space-between; align-items: center; }
.mcdu-l, .mcdu-r { color: #39e070; text-shadow: 0 0 5px rgba(57,224,112,.5); white-space: nowrap; }
.mcdu-r { color: #5fd7e8; text-shadow: 0 0 5px rgba(95,215,232,.5); }
.mcdu-scratch {
  border-bottom: 2px solid #101511; border-radius: 0 0 6px 6px;
  color: #ffb648; min-height: 26px; font-size: 11px; letter-spacing: .1em;
  text-shadow: 0 0 6px rgba(255,182,72,.5);
  display: flex; align-items: center;
  box-shadow: inset 0 8px 10px -10px rgba(0,0,0,.9);
}
.mcdu-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.mcdu-key {
  height: 20px; border-radius: 3px; border: 1px solid #43464e;
  background: linear-gradient(180deg, #36393f, #232529);
  color: #9aa1af; font: 700 8px/1 var(--mono); letter-spacing: .05em;
  display: flex; align-items: center; justify-content: center;
}

/* --- annunciators over panel --- */
.annunc {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 5;
}
.annunc a {
  font: 700 9.5px/1 var(--mono); letter-spacing: .14em; text-decoration: none;
  color: #dfe5ee; background: #1b1e24; border: 1px solid #33363e; border-bottom: none;
  border-radius: 0 0 6px 6px; padding: 7px 14px 8px;
}
.annunc a:hover { color: var(--gold-2); border-color: var(--gold); }
.annunc a.lit { color: #7ee3a1; box-shadow: inset 0 -12px 18px -14px rgba(126,227,161,.8); }

/* --- responsive collapse --- */
@media (max-width: 1080px) {
  .deck { height: auto; min-height: 0; grid-template-rows: minmax(320px, 62dvh) auto; }
  .deck .panel { grid-template-columns: 1fr 1fr 84px; }
  #sel-box { grid-column: 1 / 2; }
  .mcdu { grid-column: 2 / 4; }
}
@media (max-width: 900px) {
  .deck { grid-template-rows: minmax(280px, 46dvh) auto; min-height: 0; }
  .deck .panel { grid-template-columns: 1fr 84px; }
  #pfd-box, #nd-box { display: none; }
  #sel-box { grid-column: 1 / -1; order: 3; }
  .mcdu { grid-column: 1; order: 1; }
  .pedestal { order: 2; }
  .start-card { left: 18px; right: auto; max-width: min(460px, calc(100% - 36px)); }
  .hud { top: 10px; right: 10px; bottom: auto; }
  .ws-skip { display: block; left: 12px; right: 12px; max-width: none; bottom: 10px; }
  .annunc {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    position: static; transform: none; left: auto; top: auto;
    grid-column: 1 / -1; order: 0; margin-bottom: 4px;
  }
  .annunc a { border-radius: 6px; border-bottom: 1px solid #33363e; padding: 8px 10px; }
  .instr { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-hint { transition: none; }
}

/* ===== Rotary service selector (replaces the old weather screen) ===== */
/* The ND draws its own centre at 58% of its box height. The dial is pinned to the same
   fraction so both instrument centres sit on one line across the panel. */
#sel-box { position: relative; padding: 0; }
.dial-wrap {
  position: absolute; left: 10px; right: 10px; top: 58%;
  transform: translateY(-50%);
  display: grid; place-items: center;
}
.dial {
  position: relative; aspect-ratio: 1; width: min(100%, 268px);
  border-radius: 50%; cursor: grab; touch-action: none;
  background:
    /* dark track the labels sit on, so they always read */
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(6,9,13,.92) 47% 76%, transparent 77%),
    conic-gradient(from 180deg, #22262e, #171a20 25%, #22262e 50%, #171a20 75%, #22262e),
    radial-gradient(circle at 50% 35%, #2e333c 0%, #16191f 70%);
  border: 2px solid #454b57;
  box-shadow: inset 0 2px 12px rgba(255,255,255,.07), inset 0 -10px 24px rgba(0,0,0,.8),
              0 0 0 5px #0d0f13, 0 8px 22px rgba(0,0,0,.65);
}
.dial:active { cursor: grabbing; }
.dial:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }
.dial-ticks, .dial-ring { position: absolute; inset: 0; border-radius: 50%; }
.dial-ring { transition: none; }
.dial-ticks { transition: transform .28s cubic-bezier(.2,.9,.3,1.15); }
.dial.dragging .dial-ticks { transition: none; }
.dial-ring b {                       /* one label per service, around the rim */
  position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -39px;
  width: 78px; text-align: center;
  font: 700 7.5px/1.1 var(--mono); letter-spacing: .04em; color: #79839a;
  text-transform: uppercase; pointer-events: none;
  transition: opacity .22s ease, color .22s ease, transform .28s cubic-bezier(.2,.9,.3,1.15);
}
.dial-ring b.on {
  color: #fff3d6; font-size: 8.5px; letter-spacing: .08em;
  text-shadow: 0 0 10px rgba(201,162,75,.9), 0 0 3px rgba(0,0,0,.9);
}
.dial-ticks i {
  position: absolute; left: 50%; top: 50%; width: 1.5px; height: 9px;
  margin-left: -.75px; background: #5d667a; border-radius: 1px; transform-origin: 50% 0;
}
.dial-ticks i.major { height: 14px; background: #8b95ab; width: 2px; margin-left: -1px; }
.dial-pointer {
  position: absolute; left: 50%; top: 2px; margin-left: -8px;
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 13px solid var(--gold);
  filter: drop-shadow(0 0 7px rgba(201,162,75,.85));
}
.dial-pointer::after {           /* index line down to the label track */
  content: ""; position: absolute; left: -1px; top: -2px; width: 2px; height: 22px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.dial-count {
  position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%);
  font: 700 8px/1 var(--mono); letter-spacing: .14em; color: #7c869b;
}
.dial-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 56%; aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: radial-gradient(circle at 50% 35%, #12301c 0%, #08170e 70%);
  border: 2px solid #1d3a26; color: #39e070; padding: 6px;
  box-shadow: inset 0 0 18px rgba(0,0,0,.9), 0 0 0 6px rgba(0,0,0,.35);
}
.dial-hub:hover { border-color: var(--gold); }
.dial-hub:active { transform: translate(-50%,-50%) scale(.97); }
.hub-name {
  font: 700 11px/1.15 var(--mono); letter-spacing: .05em; text-align: center;
  text-shadow: 0 0 8px rgba(57,224,112,.5); word-break: break-word;
}
.hub-go { font: 700 6.5px/1 var(--mono); letter-spacing: .16em; color: #4f9a68; }
.dial-wx {
  position: absolute; left: 10px; right: 10px; bottom: 8px;
  font-size: 9.5px; line-height: 1.5; color: #4f9a68;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 900px) { .dial { width: min(100%, 220px); } }

/* function-key row is interactive now (paging), so it needs button affordances */
.mcdu-keys button.mcdu-key { cursor: pointer; }
.mcdu-keys button.mcdu-key:hover { color: var(--gold-2); border-color: var(--gold); }
.mcdu-keys button.mcdu-key:active { transform: translateY(1px); }


/* ===== 3D simulator overlays (2026-09 rebuild) ===== */
#world { touch-action: none; }
.windshield.no-webgl { background: #b9c6cf url("dubai-day.jpg") center 62% / cover no-repeat; }
.windshield.no-webgl #world { display: none; }

.ws-callout {
  position: absolute; z-index: 5; left: 50%; top: 24%; transform: translate(-50%, -50%) scale(.96);
  font: 800 clamp(18px, 2.4vw, 30px)/1 "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  letter-spacing: .14em; color: #58ff8c; text-shadow: 0 0 14px rgba(88,255,140,.55), 0 2px 10px rgba(0,0,0,.8);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; white-space: nowrap;
}
.ws-callout[data-tone="amber"] { color: #ffc24a; text-shadow: 0 0 14px rgba(255,194,74,.55), 0 2px 10px rgba(0,0,0,.8); }
.ws-callout.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.ws-loading {
  position: absolute; z-index: 5; right: clamp(56px, 8vw, 120px); bottom: 16px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  font: 700 9.5px/1 var(--mono); letter-spacing: .18em; color: #c9d2e0;
  background: rgba(6,9,14,.62); border: 1px solid rgba(174,182,198,.25); border-radius: 7px; padding: 8px 12px;
  transition: opacity .8s ease; pointer-events: none;
}
.ws-loading.done { opacity: 0; }
.ws-loading-bar { width: 150px; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.ws-loading-bar i { display: block; height: 100%; width: 3%; background: var(--gold); transition: width .5s ease; }

.ws-view {
  position: absolute; z-index: 5; left: 50%; top: 14px; transform: translateX(-50%);
  font: 700 10px/1 var(--mono); letter-spacing: .2em; color: #dfe5ee;
  background: rgba(6,9,14,.6); border: 1px solid rgba(174,182,198,.3); border-radius: 6px; padding: 7px 12px;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.ws-view.show { opacity: 1; }

.ws-hud { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: none; }
.ws-hud.on { display: block; }

.ws-credit {
  position: absolute; z-index: 4; right: clamp(56px, 8vw, 120px); bottom: 2px;
  font: 500 8.5px/1.4 var(--mono); color: rgba(235,240,247,.55); text-shadow: 0 1px 2px rgba(0,0,0,.7);
  pointer-events: none; max-width: 60%; text-align: right;
}

.ped-btn#view-btn, .ped-btn#fs-btn { font-size: 8.5px; letter-spacing: .04em; }

/* full-screen flying: the windshield takes the whole screen, the green HUD takes over */
.deck.fs { position: fixed; inset: 0; z-index: 9999; min-height: 100vh; grid-template-rows: 1fr 0; }
.deck.fs .panel { display: none; }
.deck.fs .windshield { border-bottom: none; }
.deck.fs .windshield::before, .deck.fs .windshield::after { width: clamp(20px, 3vw, 44px); opacity: .85; }
.deck.fs .ws-skip, .deck.fs .start-card { display: none; }
.ws-fsbar { position: absolute; z-index: 6; left: 50%; bottom: 14px; transform: translateX(-50%); display: none; gap: 8px; }
.deck.fs .ws-fsbar { display: flex; }
.ws-fsbar button {
  font: 700 10px/1 var(--mono); letter-spacing: .12em; color: #dfe5ee; cursor: pointer;
  background: rgba(10,13,18,.72); border: 1px solid rgba(174,182,198,.35); border-radius: 6px; padding: 9px 13px;
}
.ws-fsbar button:hover { border-color: var(--gold); color: var(--gold-2); }

@media (max-width: 900px) {
  .deck { grid-template-rows: minmax(300px, 52dvh) auto; }
  .ws-loading { right: 12px; bottom: 64px; }
  .ws-credit { left: 14px; right: auto; top: 6px; bottom: auto; max-width: 52%; text-align: left; font-size: 7px; }
  /* phones: the intro card sits low and compact so the runway stays visible above it */
  .start-card { top: auto; bottom: 64px; transform: none; padding: 12px 14px 14px; max-width: calc(100% - 48px); left: 16px; }
  .start-card.hide { transform: translateY(12px); }
  .start-card .ws-brand { font-size: 9.5px; margin-bottom: 8px; letter-spacing: .22em; }
  .start-card h1 { font-size: 21px; }
  .start-card p { font-size: 12.5px; margin-top: 6px; line-height: 1.45; }
  .start-keys { display: none; }
  .hud-obj { padding: 6px 9px; }
  .hud-obj li { font-size: 9px; line-height: 1.7; }
  .ws-callout { top: 30%; font-size: 17px; }
}

/* the PFD carries its own mode annunciator row, so its corner tag would collide with it */
#pfd-box .instr-tag { display: none; }

/* the deck grid must never grow wider than the screen: without an explicit column the MCDU's
   min-content width pushed the whole flight deck to ~395 px on a 375 px phone */
.deck { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .deck .panel { grid-template-columns: minmax(0, 1fr) 84px; }
  .mcdu { min-width: 0; }
}
/* small phones: the pedestal becomes a row under the MCDU, with a horizontal throttle */
@media (max-width: 440px) {
  .deck .panel { grid-template-columns: minmax(0, 1fr); }
  .pedestal { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 10px; }
  .ped-block { flex: 1 0 100%; flex-direction: row; min-height: 0; }
  #throttle { writing-mode: horizontal-tb; direction: ltr; width: auto; height: 28px; flex: 1; }
}
/* full screen: the button bar owns the bottom edge, so the data credit moves to the top-left
   corner where it stays readable (Copernicus + OSM attribution must stay visible) */
.deck.fs .ws-credit { top: 10px; bottom: auto; left: clamp(28px, 4vw, 60px); right: auto; max-width: 46%; text-align: left; }

/* keyboard focus must stay visible on the throttle (style.css removes input outlines) */
#throttle:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 4px; }

/* data credits must stay legible (OSMF guideline): solid text on a dark backing; links clickable */
.ws-credit {
  color: rgba(238,242,248,.92); font-size: 9px; background: rgba(6,9,14,.5);
  padding: 2px 7px; border-radius: 4px; pointer-events: auto;
}
.ws-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(238,242,248,.4); }
@media (max-width: 900px) {
  .ws-credit { font-size: 8.5px; max-width: 62%; }
  /* hints and the loading box must not hide behind the catalog bar or the start card */
  .start-hint { bottom: 62px; z-index: 7; }
  .ws-loading { top: 58px; bottom: auto; left: 14px; right: auto; align-items: flex-start; }
}
.deck.fs .start-hint { bottom: 64px; z-index: 7; }

/* the 5-column panel squeezes the MCDU between ~1080 and ~1280 px: keep a gap between the left and
   right line-select labels ("<ACFT DATA" / "FUEL ORDER>" used to run together) */
.mcdu-line { gap: 6px; }
@media (min-width: 1081px) and (max-width: 1280px) { .mcdu-screen, .mcdu-cell { font-size: 10.5px; letter-spacing: -.01em; } }

/* ===== TAKE CONTROL + on-screen flight controls (sim/src/controls.js) =====
   Offered while the visitor is not flying by hand; once they fly, a see-through key legend
   (keyboard) or touch pad (phones, tablets) sits at the edges so the scene stays visible. */
.tc-take, .tc-pad { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.windshield.tc-offer .tc-take,
.windshield.tc-manual .tc-pad { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.windshield.no-webgl .tc-take, .windshield.no-webgl .tc-pad { display: none; }

.tc-take {
  position: absolute; z-index: 6; left: 50%; bottom: 34px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 24px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,210,62,.8); background: rgba(8,11,16,.58); color: #ffd23e;
  box-shadow: 0 4px 22px rgba(0,0,0,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.tc-take-main { font: 800 12.5px/1 var(--mono); letter-spacing: .2em; }
.tc-take-sub { font: 600 8.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(235,240,247,.75); }
.tc-take:hover { background: rgba(58,44,8,.72); }
.tc-take:focus-visible { outline: 2px solid #ffd23e; outline-offset: 3px; }
.windshield.tc-offer .start-hint { bottom: 84px; }

/* the overlay: a positioning layer; only the controls themselves take pointer input */
.tc-pad { position: absolute; z-index: 6; pointer-events: none; display: flex; align-items: flex-end; outline: none; }
.tc-pad button { pointer-events: auto; }
.tc-fly { display: grid; position: relative; }
.tc-right { display: flex; align-items: flex-end; }
.tc-thr { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tc-act { display: flex; flex-direction: column; gap: 5px; }
.tc-key, .tc-act-btn {
  color: rgba(242,246,251,.92); background: rgba(8,11,16,.26); border: 1px solid rgba(235,240,247,.42);
  text-shadow: 0 1px 3px rgba(0,0,0,.75); box-shadow: 0 1px 6px rgba(0,0,0,.25);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.tc-key { display: grid; place-items: center; padding: 0; font: 700 14px/1 var(--mono); border-radius: 7px; }
.tc-key.down, .tc-key:active, .tc-act-btn:active {
  background: rgba(255,210,62,.3); border-color: #ffd23e; color: #ffd23e;
}
.tc-act-btn { font: 700 8.5px/1 var(--mono); letter-spacing: .12em; border-radius: 6px; padding: 5px 8px 5px 5px; text-align: left; white-space: nowrap; }
.tc-act-btn kbd {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 4px;
  font: 700 9.5px/1 var(--mono); border: 1px solid rgba(235,240,247,.45); border-radius: 4px;
}
.tc-thr-val { font: 700 10px/1 var(--mono); color: rgba(242,246,251,.9); text-shadow: 0 1px 3px rgba(0,0,0,.8); min-width: 4ch; text-align: center; }
.tc-cap { font: 700 8px/1 var(--mono); letter-spacing: .2em; color: rgba(235,240,247,.72); text-shadow: 0 1px 3px rgba(0,0,0,.85); }

/* keyboard: one compact legend, bottom-left above the catalog link (inverted-T arrows, + / −, G V A) */
.windshield[data-input="keys"] .tc-pad { left: clamp(28px, 6vw, 80px); bottom: 62px; gap: 14px; transition-property: opacity, visibility; }
.windshield[data-input="keys"] .tc-pad.idle { opacity: .42; }
.windshield[data-input="keys"] .tc-right { gap: 14px; }
.windshield[data-input="keys"] .tc-fly { grid-template-columns: repeat(3, 30px); grid-template-rows: 30px 30px auto; gap: 4px; }
.windshield[data-input="keys"] .tc-key { width: 30px; height: 30px; }
.windshield[data-input="keys"] .tc-thr .tc-key { width: 30px; height: 26px; }
.tc-fly [data-k="ArrowUp"] { grid-area: 1 / 2; }
.windshield[data-input="keys"] .tc-fly [data-k="ArrowLeft"] { grid-area: 2 / 1; }
.windshield[data-input="keys"] .tc-fly [data-k="ArrowDown"] { grid-area: 2 / 2; }
.windshield[data-input="keys"] .tc-fly [data-k="ArrowRight"] { grid-area: 2 / 3; }
.windshield[data-input="keys"] .tc-cap-fly { grid-area: 3 / 1 / 4 / 4; text-align: center; margin-top: 3px; }

/* touch: a press-and-hold pad, arrows bottom-left, thrust and actions bottom-right */
.windshield[data-input="touch"] .tc-pad { left: 12px; right: 12px; bottom: 58px; justify-content: space-between; }
.windshield[data-input="touch"] .tc-right { gap: 10px; }
.windshield[data-input="touch"] .tc-fly { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 3px; }
.windshield[data-input="touch"] .tc-key { width: 44px; height: 44px; border-radius: 50%; font-size: 17px; }
.windshield[data-input="touch"] .tc-fly [data-k="ArrowLeft"] { grid-area: 2 / 1; }
.windshield[data-input="touch"] .tc-fly [data-k="ArrowRight"] { grid-area: 2 / 3; }
.windshield[data-input="touch"] .tc-fly [data-k="ArrowDown"] { grid-area: 3 / 2; }
.windshield[data-input="touch"] .tc-cap-fly { grid-area: 2 / 2; place-self: center; }
.windshield[data-input="touch"] .tc-act-btn { padding: 8px 10px 8px 7px; font-size: 9px; }
.windshield[data-input="touch"] .tc-act-btn kbd { display: none; }

@media (max-width: 900px) {
  /* phones: the catalog bar gives up the right half while TAKE CONTROL is offered, so both share
     the bottom row; once flying, the bar is full width again with the pad above it */
  .tc-take { left: auto; right: 12px; bottom: 10px; transform: none; padding: 7px 12px 6px; }
  .tc-take-main { letter-spacing: .1em; font-size: 12px; }
  .tc-take-sub { font-size: 8px; letter-spacing: .08em; }
  .windshield.tc-offer .ws-skip { right: auto; }
  .windshield.tc-offer .start-hint { bottom: 62px; }
  /* flying: hints move up into the sky, just under the callout band (100 KNOTS / V1 / ROTATE sit at
     30%) and clear of the pad. Full-width capable so they wrap to two lines, not four. */
  .windshield.tc-manual .start-hint {
    top: calc(30% + 22px); bottom: auto; left: 12px; right: 12px; transform: none;
    width: fit-content; max-width: calc(100% - 24px); margin: 0 auto;
  }
}
/* full screen: the button bar owns the bottom edge, and a hint sits above TAKE CONTROL */
.deck.fs .tc-take { bottom: 66px; }
.deck.fs .windshield.tc-offer .start-hint { bottom: 118px; }
.deck.fs .windshield[data-input="keys"] .tc-pad { bottom: 58px; }
.deck.fs .windshield[data-input="touch"] .tc-pad { bottom: 66px; }
@media (prefers-reduced-motion: reduce) {
  .tc-take, .tc-pad, .tc-key, .tc-act-btn { transition: none; }
}

/* ===== 2026-10-02 (Ahmad): the deployed panel design, kept as it was, plus three changes =====
   a handle on the thrust lever; the rotary dial and the ND centred in their frames (and never
   larger than them); no overlapping text. The 3D/rendered hardware look of 30 Sep was dropped. */

/* --- the PFD/ND canvases are taken out of the row's sizing: in flow, each redraw fed its own
   bitmap size back into the panel row and the panel crept taller (the old fixed-height deck clipped
   it instead) */
.instr canvas { position: absolute; inset: 0; }

/* --- thrust lever: the deployed slider slot (8 px, light outline, gold below the lever) with a lever
   handle. The native range is still there for the keyboard and screen readers (its deployed vertical
   orientation is kept, so the arrow keys work as before); mouse and touch drive the drawn lever
   (main.js), which also works where a vertical range does not (Safari before 17.4). */
.deck .ped-block { align-self: stretch; }
.thr-quadrant { position: relative; flex: 1; width: 100%; min-height: 129px; touch-action: none; cursor: grab; }
.thr-quadrant:active { cursor: grabbing; }
.thr-quadrant::before {
  content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 8px; margin-left: -4px;
  border-radius: 4px; box-sizing: border-box; border: 1px solid #858585;
  background: linear-gradient(0deg, var(--gold) calc(var(--thr, 0) * 100%), #3b3b3b calc(var(--thr, 0) * 100%));
}
.deck #throttle { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 3; pointer-events: none; }
.thr-quadrant:has(#throttle:focus-visible) { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 6px; }
.deck #throttle:focus-visible ~ .thr-lever { outline: 2px solid var(--gold-2); outline-offset: 2px; }   /* browsers without :has() */
.thr-lever {                           /* the handle: a T-grip across the slot, gold index line */
  position: absolute; left: 50%; bottom: calc(6px + var(--thr, 0) * (100% - 12px)); z-index: 2; pointer-events: none;
  width: 38px; height: 16px; margin-left: -19px; transform: translateY(50%);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 50%),
    linear-gradient(90deg, #1a1c21, #3a3e46 22%, #4a4f58 50%, #3a3e46 78%, #1a1c21);
  border: 1px solid #5a5f69;
  box-shadow: 0 3px 6px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.5);
  transition: bottom .12s linear;
}
.thr-lever::after {                    /* gold index line on the grip, the colour of the old knob */
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px;
  background: var(--gold); border-radius: 1px; box-shadow: 0 0 5px rgba(201,162,75,.7);
}
.ped-val { min-width: 4.6ch; text-align: center; }   /* steady width: nothing shifts as the digits change */
@media (max-width: 440px) {            /* the lever lies flat under the MCDU: it moves sideways */
  .thr-quadrant { min-height: 0; height: 32px; }
  .thr-quadrant::before { top: 50%; bottom: auto; left: 16px; right: 16px; width: auto; height: 8px; margin: -4px 0 0;
    background: linear-gradient(90deg, var(--gold) calc(var(--thr, 0) * 100%), #3b3b3b calc(var(--thr, 0) * 100%)); }
  .thr-lever {
    left: calc(16px + var(--thr, 0) * (100% - 32px)); bottom: auto; top: 50%; margin: 0;
    width: 16px; height: 30px; transform: translate(-50%, -50%); transition: left .12s linear;
    background:
      linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0) 50%),
      linear-gradient(180deg, #1a1c21, #3a3e46 22%, #4a4f58 50%, #3a3e46 78%, #1a1c21);
  }
  .thr-lever::after { left: 50%; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; margin: 0 0 0 -1px; }
  .thr-quadrant { touch-action: pan-y; }                  /* the page still scrolls past the flat lever */
}
@media (prefers-reduced-motion: reduce) { .thr-lever { transition: none; } }
/* Windows High Contrast drops gradients and shadows: show the real, system-coloured slider instead.
   It keeps the deployed orientation (vertical, flat on phones), so it moves on the same axis as the
   pointer handler that drives it */
@media (forced-colors: active) {
  .deck #throttle { opacity: 1; }
  .thr-lever, .thr-quadrant::before { display: none; }
}

/* --- rotary selector centred in its frame. It was pinned at 58% to line up with the ND's centre;
   the ND is centred now too, so both still line up. Its size comes from the frame's own width and
   height (container units), so it never runs past the frame, and every part of it scales with it at
   the deployed proportions (268 px knob: ticks at 108 px, labels at 90 px, ticks 9 / 14 px long). */
#sel-box { container-type: size; }
.dial-wrap { top: 50%; }
.dial {
  width: min(268px, 100cqw - 24px, 100cqh - 76px);
  --tick-r: 108px; --label-r: 90px;                 /* browsers without container units: the deployed radii */
}
@supports (width: 1cqw) {
  .dial { container-type: inline-size; --tick-r: 42.9cqw; --label-r: 35.7cqw; }
  .dial-ticks i { height: 3.4cqw; }
  .dial-ticks i.major { height: 4.5cqw; }    /* a hair shorter than the deployed 14/268, clear of the selected label */
  .dial-pointer::after { height: 8.3cqw; }
  /* the counter sits in the clear band between the hub ring and the ticks (a tick always points
     straight down through the rim, opposite the selection) */
  .dial-count { bottom: auto; top: calc(50% + 34.5cqw); transform: translate(-50%, -50%); font-size: max(6.5px, 3cqw); }
}
/* labels scale with the knob too (fixed 7.5 px text collided on a smaller knob); every label gets a
   halo in the track colour so a tick never cuts through its letters; below 200 px only the selection is
   named, the neighbours would touch it and the hub ring */
.dial-ring b { width: 31cqw; margin: -2.4cqw 0 0 -15.5cqw; font-size: max(6.5px, 2.98cqw); }
.dial-ring b.on { font-size: max(7px, 3.37cqw); }
.dial-ring b:not(.on) { text-shadow: 0 0 2px #06090d, 0 0 3px #06090d, 0 0 4px #06090d; }
.dial-ring b.on { text-shadow: 0 0 2px #06090d, 0 0 3px #06090d, 0 0 10px rgba(201,162,75,.9), 0 0 3px rgba(0,0,0,.9); }   /* same halo under the deployed gold glow */
@container (max-width: 200px) { .dial-ring b:not(.on) { visibility: hidden; } }
/* its own row on phones: a fixed height (container units need one; a min-height alone reads as 0) */
@media (max-width: 900px) { #sel-box { height: 300px; } }
/* the weather line under the knob: up to two lines instead of one cut off with an ellipsis */
.dial-wx {
  white-space: normal; text-overflow: clip; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}

/* --- MCDU: the page counter moves to the SELECT row (it floated into the title text), and the title
   stays on one line: where the MCDU is narrowest it is tracked a little tighter instead of being cut */
.mcdu-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1281px) and (max-width: 1439px), (max-width: 360px) { .mcdu-title { letter-spacing: .06em; } }
.mcdu-pg { color: #c3cbda; letter-spacing: .12em; }

/* --- the windshield overlays never sit on each other ------------------------------------------- */
.deck { height: auto; }               /* short screens: the panel is never cut off, the page scrolls */
.windshield { container-type: size; }
/* intro card: the key legend goes only where it would reach the catalog button / TAKE CONTROL (the
   button and its own key legend then explain the controls); on short desktop windshields the card
   moves up a little; only phones drop the paragraph */
@container (max-height: 410px) { .start-keys { display: none; } }
@container (max-height: 470px) and (max-width: 1140px) { .start-keys { display: none; } }
@media (min-width: 901px) {
  .start-card { top: calc(50% - 20px);                         /* clear of the catalog button below it */
    max-width: min(430px, calc(50% - 110px - clamp(28px, 6vw, 80px))); }   /* and of TAKE CONTROL (centre) */
  @container (max-height: 330px) { .start-card { top: calc(50% - 27px); } }
}
@media (max-width: 900px) { @container (max-height: 330px) { .start-card p { display: none; } } }
/* phones: the data credit (top left) stops short of the objectives box (top right, about 150 px from
   the edge), and the scenery-loading box sits below the taller credit */
@media (max-width: 900px) {
  .ws-credit { max-width: min(62%, calc(100% - 196px)); }
  .ws-loading { top: 92px; }
}
@media (min-width: 901px) { .deck:not(.fs) .ws-loading { bottom: 40px; } }   /* above the credit line */
@media (max-width: 360px) { .ws-credit { font-size: 7.5px; } }   /* keeps the callout band at 30% clear */
.windshield.no-webgl .ws-loading { display: none; }   /* the photo fallback has nothing to load */
/* flying hints */
@media (min-width: 901px) {
  /* by hand: above the data credit (bottom right) and between the key legend (bottom left) and it */
  .deck:not(.fs) .windshield.tc-manual .start-hint {
    bottom: 54px; max-width: min(90%, calc(100% - 2 * (clamp(28px, 6vw, 80px) + 276px)));
  }
  .deck.fs .windshield.tc-manual .start-hint { max-width: min(90%, calc(100% - 2 * (clamp(28px, 6vw, 80px) + 276px))); }
  .deck:not(.fs) .windshield.tc-offer:not(.no-webgl) .start-hint { bottom: 104px; }   /* above TAKE CONTROL */
}
/* keyboard layouts 640-900 px wide (small windows, tablets with a keyboard): the hint is centred in the
   space right of the key legend; narrower, it stays centred in the sky above the legend */
@media (min-width: 640px) and (max-width: 900px) {
  .windshield.tc-manual[data-input="keys"] .start-hint { left: calc(clamp(28px, 6vw, 80px) + 276px); }
}
/* short windshields on touch screens: no room for a hint between the top overlays and the pad, so
   while flying by hand it takes the catalog bar's place at the bottom (the bar returns afterwards) */
@container (max-height: 440px) {
  .deck:not(.fs) .windshield.tc-manual[data-input="touch"] .ws-skip { display: none; }
  .deck:not(.fs) .windshield.tc-manual[data-input="touch"] .start-hint { top: auto; bottom: 4px; padding: 6px 10px; line-height: 1.4; }
}
/* the photo fallback re-shows the intro card for the demo: its hint waits until the card has gone */
.windshield.no-webgl .start-card:not(.hide) ~ .start-hint { opacity: 0; }
/* touch pad: the longer '↓ PULL UP' caption wraps neatly in its 44 px cell */
.windshield[data-input="touch"] .tc-cap-fly { width: 44px; text-align: center; line-height: 1.35; white-space: normal; }
/* mission-complete banner: its own width (half the windshield made a tall column on phones) */
.mission-banner { width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; }
@container (max-height: 360px) { .mission-banner { top: 40%; padding: 18px 26px; } }   /* clear of TAKE CONTROL */
@media (max-width: 900px) {
  .mission-banner { top: 56%; padding: 14px 18px; gap: 6px; }
  .mission-banner strong { font-size: 18px; line-height: 1.25; }
  .mission-banner span { font-size: 13px; line-height: 1.45; }
  .mission-banner .btn { margin-top: 4px; padding: 9px 16px; }
}
/* the smallest phones in full screen: the button bar fits the width, the credit stops short of the
   objectives box */
@media (max-width: 380px) {
  .ws-fsbar { gap: 4px; }
  .ws-fsbar button { padding: 9px 7px; letter-spacing: .04em; }
}
@media (max-width: 900px) { .deck.fs .ws-credit { max-width: min(46%, calc(100% - 214px)); } }