* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0e0c; color: #e8e6dc; font-family: "Segoe UI", system-ui, sans-serif; overflow: hidden; }
#app { position: fixed; inset: 0; }
canvas.gl { display: block; width: 100%; height: 100%; }
#world-loading { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center;
  justify-content: center; background: #0b0e0c; font-family: var(--ui-body); }
#world-loading[hidden] { display: none; }
#world-loading .panel { max-width: 440px; }
#world-loading p { color: var(--ui-muted); }
#world-loading progress { width: 100%; height: 8px; accent-color: var(--ui-accent); }

/* Observation mode: a small field note, not a flight HUD. */
#observation-hud { position: fixed; left: 18px; top: 16px; z-index: 12; display: none;
  max-width: min(620px, calc(100vw - 36px)); padding: 10px 13px; border: 1px solid rgba(170,190,145,.5);
  border-radius: 4px; background: rgba(10,14,10,.72); box-shadow: 0 3px 14px rgba(0,0,0,.45);
  color: #dce5d3; pointer-events: none; text-shadow: 0 1px 2px #000; }
#observation-hud .obs-title { color: #ffd45a; font-size: 16px; font-weight: 700; letter-spacing: .5px; }
#observation-hud .obs-detail { margin-top: 2px; color: #b9c7ae; font-size: 13px; }
#observation-hud .obs-help { margin-top: 7px; color: #92a489; font-size: 12px; line-height: 1.45; }
#observation-hud kbd { color: #f1e8c9; font: inherit; font-weight: 700; }
#observation-mini { position: fixed; right: 18px; bottom: 18px; z-index: 12; display: none;
  width: 240px; height: 240px; border-radius: 50%; background: rgba(10,12,10,.65);
  box-shadow: 0 0 0 3px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.55); pointer-events: none; }
#observation-mini canvas { display: block; width: 240px; height: 240px; border-radius: 50%; }
#observation-map { position: fixed; left: 50%; top: 50%; z-index: 13; display: none;
  transform: translate(-50%, -50%); padding: 7px; border: 2px solid #5a6a50; border-radius: 6px;
  background: rgba(10,12,10,.9); box-shadow: 0 8px 32px rgba(0,0,0,.65); pointer-events: none; }
#observation-map canvas { display: block; width: min(78vh, calc(100vw - 42px));
  height: min(78vh, calc(100vw - 42px)); max-width: 720px; max-height: 720px; }
#observation-map .obs-map-title { padding: 2px 4px 7px; color: #ffd45a; font-size: 13px;
  font-weight: 700; letter-spacing: 1.5px; }
#observation-map .obs-map-title span { float: right; color: #9cac90; font-weight: 400; letter-spacing: 0; }

/* ---------------------------------------------------------------------------
   Menu — the game's front end. One palette and two typefaces for every screen: Rajdhani
   (condensed, uppercase) for anything that is a label, a heading or a thing to press, and
   Barlow for anything to be read. Both load from Google Fonts in index.html and fall back to
   the system face offline.
   --------------------------------------------------------------------------- */
:root {
  --ui-glass: rgba(11, 14, 12, .82); --ui-glass-2: rgba(26, 32, 27, .72); --ui-glass-3: rgba(38, 46, 38, .82);
  --ui-line: rgba(196, 214, 176, .12); --ui-line-2: rgba(196, 214, 176, .26);
  --ui-text: #eeede4; --ui-muted: #a7b09e; --ui-dim: #778270;
  --ui-accent: #ffc83d; --ui-accent-soft: rgba(255, 200, 61, .13); --ui-danger: #e0604e;
  --ui-display: 'Rajdhani', 'Barlow Condensed', 'Segoe UI', system-ui, sans-serif;
  --ui-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --ui-cut: 9px;
}
#menu { position: fixed; inset: 0; display: flex; align-items: safe center; justify-content: center; z-index: 20; overflow: auto;
  padding-block: 2vh; font-family: var(--ui-body); color: var(--ui-text);
  background: radial-gradient(130% 100% at 50% 35%, rgba(8, 11, 9, .6), rgba(3, 5, 4, .93));
  backdrop-filter: blur(6px) saturate(.8); }
#menu * { scrollbar-width: thin; scrollbar-color: rgba(196, 214, 176, .28) transparent; }
/* The splash and title screens have an actual scene behind them worth seeing (the carrier
   backdrop — see Game.updateMenuScene) rather than a paused or loading world, so they drop the
   panel altogether: the menu stands on the left over a dark fade and the carrier has the rest. */
#menu.scenic { justify-content: flex-start; backdrop-filter: none;
  background: linear-gradient(90deg, rgba(4, 6, 5, .9) 0%, rgba(4, 6, 5, .6) 32%, rgba(4, 6, 5, 0) 62%),
    linear-gradient(0deg, rgba(4, 6, 5, .5), rgba(4, 6, 5, 0) 35%); }
.panel { position: relative; background: var(--ui-glass); border: 1px solid var(--ui-line); border-radius: 2px;
  padding: 24px 30px; max-width: 760px; width: 92vw; max-height: 94vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04); backdrop-filter: blur(14px); }
/* The accent tab on the top edge of every panel. */
.panel::before { content: ''; position: absolute; left: -1px; top: -1px; width: 96px; height: 3px; background: var(--ui-accent); }
.panel.wide { max-width: 1120px; }
h1 { font-family: var(--ui-display); font-size: clamp(60px, 7.5vw, 104px); font-weight: 700; line-height: .84;
  letter-spacing: 3px; text-transform: uppercase; margin: 0; color: var(--ui-text); text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
h1 span { display: block; color: var(--ui-accent); }
h2 { font-family: var(--ui-display); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: 1.5px;
  text-transform: uppercase; margin: 0 0 16px; color: var(--ui-text); }
h2 small { font-size: 17px; font-weight: 600; letter-spacing: 1px; color: var(--ui-muted); margin-left: 10px; }
h3 { display: flex; align-items: center; gap: 12px; margin: 22px 0 9px; font-family: var(--ui-display); font-size: 14px;
  font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ui-accent); }
h3::after { content: ''; flex: 1; height: 1px; background: var(--ui-line); }
.kicker { font-family: var(--ui-display); font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--ui-accent); }
.sub { color: var(--ui-muted); margin: 4px 0 14px; line-height: 1.45; }
.record { color: #8fa483; font-size: 13px; margin-bottom: 14px; }

/* Buttons: a cut-corner plate. The clip takes the border off two corners, which is the look. */
button { font-family: var(--ui-display); font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ui-text); background: linear-gradient(180deg, rgba(56, 66, 53, .92), rgba(36, 43, 36, .92));
  border: 1px solid var(--ui-line-2); border-radius: 0; padding: 8px 18px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--ui-cut)) 0, 100% var(--ui-cut), 100% 100%, var(--ui-cut) 100%, 0 calc(100% - var(--ui-cut)));
  transition: background .12s, border-color .12s, color .12s, padding .15s, filter .12s; }
button:hover { background: linear-gradient(180deg, rgba(74, 86, 68, .96), rgba(48, 57, 46, .96)); border-color: var(--ui-accent); color: #fff; }
button:active { filter: brightness(.9); }
button.primary { color: #17140a; background: linear-gradient(180deg, #ffd666, #f2b52c); border-color: #ffd666; }
button.primary:hover { color: #17140a; background: linear-gradient(180deg, #ffe08a, #ffc23d); border-color: #ffe08a; }
button.danger:hover { background: linear-gradient(180deg, #8c3427, #5f2119); border-color: var(--ui-danger); }
button.big { font-size: 20px; letter-spacing: 2px; padding: 12px 28px; }
button:disabled, button:disabled:hover { opacity: .45; cursor: default; filter: none; }
/* Buttons that are really list rows, dropdowns or key captions keep a plain face. */
.ac-select-btn, .ac-opt, .ac-var, button.linky, .binding-row button, .fb-map-zoom button, .save-acts button {
  font-family: var(--ui-body); text-transform: none; letter-spacing: 0; }
.ac-select-btn, .ac-opt, .ac-var, button.linky, .binding-row button { clip-path: none; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--ui-accent); }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ui-line); }
/* Back goes to the far left, away from the button that moves you on. */
.nav > #back:first-child, .nav > .nav-left { margin-right: auto; }

/* Encyclopedia: one model viewport beside a searchable catalog. */
.panel.encyclopedia { max-width: 1320px; width: min(96vw, 1320px); height: min(92vh, 900px);
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.encyclopedia-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex: 0 0 auto; }
.encyclopedia-heading h2 { margin: 4px 0 8px; }
.encyclopedia-heading .sub { margin-bottom: 13px; }
.encyclopedia-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 0 13px; border-bottom: 1px solid var(--ui-line); flex: 0 0 auto; }
.encyclopedia-tabs button { font-size: 12px; padding: 6px 12px; }
.encyclopedia-tabs button.selected { color: #17140a; background: var(--ui-accent); border-color: var(--ui-accent); }
.encyclopedia-layout { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); gap: 16px;
  flex: 1 1 auto; min-height: 0; padding-top: 15px; }
.encyclopedia-sidebar { display: flex; flex-direction: column; min-height: 0; }
.encyclopedia-sidebar input { width: 100%; padding: 10px 11px; color: var(--ui-text); background: #171e18;
  border: 1px solid var(--ui-line-2); border-radius: 2px; font: 14px var(--ui-body); }
.encyclopedia-sidebar input:focus { outline: 1px solid var(--ui-accent); }
.encyclopedia-count { font: 12px var(--ui-body); color: var(--ui-muted); padding: 10px 2px 7px; }
.encyclopedia-list { overflow: auto; min-height: 0; padding-right: 4px; }
.encyclopedia-list button { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-bottom: 4px;
  padding: 8px 11px; text-align: left; clip-path: none; text-transform: none; letter-spacing: 0; }
.encyclopedia-list button b { font: 600 14px var(--ui-body); }
.encyclopedia-list button small { font: 12px var(--ui-body); color: var(--ui-muted); }
.encyclopedia-list button.selected { background: #37412e; border-color: var(--ui-accent); }
.encyclopedia-list button.selected b { color: var(--ui-accent); }
.encyclopedia-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 10px; }
.encyclopedia-stage { position: relative; min-height: 230px; flex: 1 1 auto; overflow: hidden;
  border: 1px solid #3a4436; background: radial-gradient(110% 90% at 50% 40%, #293527, #101712 70%, #090d0b); }
.encyclopedia-viewport, .encyclopedia-canvas { position: absolute; inset: 0; }
.encyclopedia-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.encyclopedia-stage-hint { position: absolute; top: 12px; left: 14px; color: #c2ccb7; font: 12px var(--ui-body);
  text-shadow: 0 1px 4px #000; pointer-events: none; }
.encyclopedia-reset { position: absolute; right: 10px; bottom: 10px; padding: 6px 10px; font-size: 11px; }
.encyclopedia-detail { flex: 0 1 auto; max-height: 32%; overflow: auto; padding: 14px 18px;
  background: rgba(25, 32, 25, .75); border: 1px solid var(--ui-line); }
.encyclopedia-detail h3 { margin: 5px 0 5px; font-size: 22px; letter-spacing: .5px; text-transform: none; }
.encyclopedia-detail h3::after { display: none; }
.encyclopedia-detail p { margin: 0 0 10px; color: var(--ui-muted); line-height: 1.4; }
.encyclopedia-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.encyclopedia-facts div { display: flex; gap: 6px; }
.encyclopedia-facts span { color: var(--ui-muted); }
.encyclopedia-facts b { color: var(--ui-text); font-weight: 600; }
@media (max-width: 700px) {
  .panel.encyclopedia { width: 100vw; height: calc(100dvh - 4vh); max-height: calc(100dvh - 4vh); padding: 12px; }
  .encyclopedia-heading h2 { font-size: 26px; }
  .encyclopedia-heading .sub { display: none; }
  .encyclopedia-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .encyclopedia-layout { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
  .encyclopedia-sidebar { flex: 0 0 auto; }
  .encyclopedia-count { padding: 5px 2px; }
  .encyclopedia-list { display: flex; gap: 5px; overflow-x: auto; max-height: 65px; }
  .encyclopedia-list button { width: max-content; min-width: 130px; flex: 0 0 auto; margin: 0; }
  .encyclopedia-main { flex: 1 1 auto; }
  .encyclopedia-stage { min-height: 160px; }
  .encyclopedia-detail { max-height: 38%; }
}

/* The splash and title screens: a wordmark and a column of big buttons on the left. */
.panel.title { text-align: left; width: min(540px, 88vw); max-width: none; max-height: none; overflow: visible;
  margin-left: clamp(20px, 7vw, 130px); padding: 0; background: none; border: none; box-shadow: none; backdrop-filter: none; }
.panel.title::before { display: none; }
.brand-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--ui-display);
  font-size: 15px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--ui-accent); }
.brand-kicker::before { content: ''; width: 36px; height: 2px; background: var(--ui-accent); }
.tagline { margin: 16px 0 0; font-size: 18px; color: #d9dbcf; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.menu-stack { display: flex; flex-direction: column; gap: 8px; width: min(380px, 88vw); margin-top: 34px; }
.menu-stack button { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; text-align: left; }
.menu-stack button:not(.primary) { background: rgba(9, 12, 10, .62); }
.menu-stack button:not(.primary):hover:not(:disabled) { background: rgba(44, 52, 41, .9); padding-left: 38px; }
.menu-stack button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ui-body);
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .75; }
.panel.title h3 { margin-top: 34px; }
.panel.title .saves-empty { margin-top: 24px; color: #c3c7b8; text-shadow: 0 1px 3px #000; }
.campaign-card { margin-top: 26px; }
.cc-name { font-family: var(--ui-display); font-size: 28px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cc-where { font-size: 14px; color: #c3c7b8; text-shadow: 0 1px 3px #000; }

/* Big numbers: the title screen's logbook and the debrief's sortie. */
.stat-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.stat { flex: 1 1 76px; padding: 9px 14px 7px; background: rgba(9, 12, 10, .62); border: 1px solid var(--ui-line); border-top: 2px solid var(--ui-line-2); }
.stat b { display: block; font-family: var(--ui-display); font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat small { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ui-muted); }
.stat.accent { border-top-color: var(--ui-accent); }
.stat.accent b { color: var(--ui-accent); }

/* The flow's step bar: Airfield → Aircraft → Mission. */
.steps { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 14px; }
.steps button { display: flex; align-items: baseline; gap: 8px; padding: 2px 22px 7px 0; clip-path: none; background: none;
  border: none; border-bottom: 2px solid var(--ui-line-2); font-size: 14px; letter-spacing: 2px; color: var(--ui-dim); }
.steps button i { font-style: normal; font-size: 12px; opacity: .8; }
.steps button:hover { background: none; color: var(--ui-text); border-color: var(--ui-text); }
.steps button.done { color: var(--ui-muted); border-color: rgba(255, 200, 61, .4); }
.steps button.on, .steps button.on:disabled { opacity: 1; color: var(--ui-accent); border-color: var(--ui-accent); }

/* The debrief: what happened, big, then the detail. */
.panel.debrief-panel { max-width: 920px; }
.debrief-panel h2 { margin: 2px 0 4px; font-size: 40px; }
.debrief-panel.lost h2 { color: #ff8f7e; }
.debrief-panel .stat-row { margin-bottom: 14px; }
/* The next sortie names the machine and the field, so it gets a row of its own above the rest. */
.debrief-panel .nav #again { order: -1; flex: 1 1 100%; font-size: 18px; padding-block: 12px; }
/* An arrival on the debrief: the grade as a stat block, coloured by how it went, the remarks beside it. */
.landing-card { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 6px 0 10px; }
.landing-grade { flex: 0 0 132px; padding: 9px 14px 7px; background: rgba(9, 12, 10, .62); border: 1px solid var(--ui-line); border-top: 2px solid var(--ui-line-2); }
.landing-grade b { display: block; font-family: var(--ui-display); font-size: 24px; font-weight: 700; line-height: 1.1; }
.landing-grade small { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.landing-body { flex: 1 1 260px; min-width: 0; }
.landing-facts { font-size: 13px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.landing-notes { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.landing-notes li.bad { color: #ffb4a6; }
.landing-notes li.ok { color: #a8d59a; }
.grade-excellent .landing-grade { border-top-color: #7fd46a; } .grade-excellent .landing-grade b { color: #9be486; }
.grade-good .landing-grade { border-top-color: #b9d46a; } .grade-good .landing-grade b { color: #cbe28a; }
.grade-fair .landing-grade { border-top-color: #e6c35c; } .grade-fair .landing-grade b { color: #efd27e; }
.grade-poor .landing-grade { border-top-color: #f09a52; } .grade-poor .landing-grade b { color: #f5b07a; }
.grade-dangerous .landing-grade, .grade-crash .landing-grade { border-top-color: #ff6f5a; }
.grade-dangerous .landing-grade b, .grade-crash .landing-grade b { color: #ff8f7e; }
/* The same colours on a logbook line. */
td.lb-landing { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.lb-landing.grade-excellent { color: #9be486; } td.lb-landing.grade-good { color: #cbe28a; }
td.lb-landing.grade-fair { color: #efd27e; } td.lb-landing.grade-poor { color: #f5b07a; }
td.lb-landing.grade-dangerous, td.lb-landing.grade-crash { color: #ff8f7e; }
.row { display: flex; gap: 18px; align-items: flex-start; }
.row > * { flex: 1; min-width: 0; }
/* Mission board: the list can run long (many sorties, each with tactics/effect
   lines), but the map must stay put so you can see it while scrolling picks. */
#m-list { flex: 1 1 auto; max-height: 62vh; overflow-y: auto; padding-right: 6px; }
#m-map { flex: 0 0 auto; position: sticky; top: 0; }
.mission-group { border: 1px solid var(--ui-line); background: rgba(6, 8, 7, .32); }
.mission-group > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 13px; cursor: pointer; list-style: none; font: 700 16px var(--ui-display);
  letter-spacing: .7px; color: var(--ui-text); }
.mission-group > summary::-webkit-details-marker { display: none; }
.mission-group > summary::before { content: '▸'; color: var(--ui-accent); margin-right: 2px; }
.mission-group[open] > summary::before { content: '▾'; }
.mission-group > summary span { flex: 1; }
.mission-group > summary small { font: 12px var(--ui-body); letter-spacing: 0; color: var(--ui-muted); white-space: nowrap; }
.mission-group > summary:hover, .mission-group > summary:focus-visible { background: var(--ui-glass-2); }
.mission-group.active > summary { border-left: 3px solid var(--ui-accent); padding-left: 10px; }
.mission-group > summary:focus-visible, #m-list .item:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.mission-group-list { padding: 0 7px 7px; gap: 5px; }
.mission-group-list .item { padding: 8px 11px; }
@media (max-width: 900px) {
  .mission-board-row { flex-direction: column; }
  #m-list, #m-map { width: 100%; }
  #m-list { max-height: 42vh; }
  #m-map { position: static; }
}
/* Airfield picker: same deal — the list can run long once a filter is
   lifted, but the map preview must stay put while scrolling picks. */
#af-list { flex: 1 1 auto; max-height: 62vh; overflow-y: auto; padding-right: 6px; }
#af-map { flex: 0 0 auto; position: sticky; top: 0; }
.list { display: flex; flex-direction: column; gap: 8px; }
.list.grid { flex-direction: row; flex-wrap: wrap; }
.list.grid .item { flex: 1 1 180px; }
.item { background: var(--ui-glass-2); border: 1px solid var(--ui-line); border-radius: 2px; padding: 11px 14px; cursor: pointer;
  transition: background .12s, border-color .12s; }
.item:hover { background: var(--ui-glass-3); border-color: var(--ui-line-2); }
.item.selected { border-color: rgba(255, 200, 61, .55); box-shadow: inset 3px 0 0 var(--ui-accent);
  background: linear-gradient(90deg, var(--ui-accent-soft), rgba(26, 32, 27, .72) 65%); }
.item.locked { opacity: .45; cursor: default; }
.item.hint { background: none; border-style: dashed; cursor: default; color: #8fa483; font-size: 13px; padding: 8px 12px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #b3bda9; margin-bottom: 12px; cursor: pointer; }
.check input { cursor: pointer; }
.item b { display: block; font-family: var(--ui-display); font-size: 17px; font-weight: 700; letter-spacing: .4px; }
/* Emphasis inside a card's lines is emphasis, not another card title. */
.item span b, .item em b { display: inline; font-family: inherit; font-size: inherit; letter-spacing: 0; }
.item.urgent { border-left: 3px solid #ff9a3c; }
.item.urgent .tag { display: inline-block; background: #ff9a3c; color: #1a1208; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 1px 6px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.item span { display: block; font-size: 13px; color: #b3bda9; margin-top: 3px; }
.item em { display: block; font-size: 12px; color: #8fa483; margin-top: 4px; font-style: normal; }
.item em.tactics { color: #c8bf88; }
.item em.intel { color: #9fb8d8; }
.item em.effect { color: #7f8f9c; font-style: italic; }
/* Category first, then short choices; only the picked card opens its full briefing. */
#m-list .item:not(.selected) > span,
#m-list .item:not(.selected) > em.route,
#m-list .item:not(.selected) > em.target { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
#m-list .item:not(.selected) > span { -webkit-line-clamp: 2; }
#m-list .item:not(.selected) > em.route,
#m-list .item:not(.selected) > em.target { -webkit-line-clamp: 1; }
#m-list .item:not(.selected) > em.recommendation,
#m-list .item:not(.selected) > em.intel,
#m-list .item:not(.selected) > em.tactics,
#m-list .item:not(.selected) > em.effect { display: none; }
.desc { margin-top: 12px; color: #b3bda9; font-size: 14px; }
/* Saved campaigns on the splash screen: the row loads, the button on the right deletes. */
.list.saves { text-align: left; margin-bottom: 10px; max-height: 32vh; overflow-y: auto; }
.save-search { width: 100%; margin: 0 0 10px; padding: 8px 11px; background: rgba(6, 8, 7, .7);
  color: var(--ui-text); border: 1px solid var(--ui-line-2); font: 500 14px var(--ui-body); }
.save-search:focus { outline: none; border-color: var(--ui-accent); }
#saves-no-match { text-shadow: 0 1px 3px #000; }
.campaign-year { display: block; max-width: 320px; }

/* The theatre picker on the new-campaign screen: the theatres down the left under their
   region, the chosen one's plan and campaign down the right. Both columns scroll inside the
   panel rather than lengthening it, so the year above and the Begin button below stay put
   however much there is to read. */
.picker { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 16px;
  height: min(58vh, 560px); min-height: 340px; }
.picker-list, .picker-detail { overflow-y: auto; border: 1px solid var(--ui-line); background: rgba(6, 8, 7, .45); }
.picker-list { padding: 6px; outline: none; }
.picker-list:focus-visible { border-color: var(--ui-accent); }
.picker-region { font-family: var(--ui-display); font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ui-dim); padding: 12px 8px 4px; }
.picker-region:first-child { padding-top: 4px; }
.picker-row { padding: 7px 10px; cursor: pointer; border-left: 3px solid transparent; }
.picker-row:hover { background: var(--ui-glass-2); }
.picker-row.selected { background: var(--ui-accent-soft); border-left-color: var(--ui-accent); }
.picker-row b { display: block; font-family: var(--ui-display); font-size: 16px; font-weight: 700; letter-spacing: .4px; }
.picker-row span { display: block; font-size: 12px; color: var(--ui-dim); margin-top: 1px; }
.picker-row.selected span { color: var(--ui-muted); }
.picker-detail { padding: 16px 18px; }
.picker-detail h4 { margin: 0; font-family: var(--ui-display); font-size: 22px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ui-text); }
.d-where { font-size: 13px; color: var(--ui-accent); margin: 2px 0 12px; }
/* One height for every theatre, and `object-fit` rather than a free height: the canvas carries
   its theatre's own aspect in its backing store, and stretching a 205 x 328 km box into a wide
   frame draws Germany half as deep as it is. Contain letterboxes instead, which is honest. */
canvas.sketch { display: block; width: 100%; height: min(38vh, 330px); object-fit: contain; }
.d-legend { font-size: 12px; color: var(--ui-dim); margin: 6px 0 14px; line-height: 1.4; }
.d-legend b.fed { color: #6fa8dc; }
.d-legend b.con { color: #d9806e; }
/* Label above value, three or four to a row: the numbers are scanned, not read. */
.d-facts { display: grid; margin-top: 4px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 14px; margin: 0 0 16px; }
.d-facts > div { min-width: 0; }
.d-facts dt { font-family: var(--ui-display); font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ui-dim); }
.d-facts dd { margin: 2px 0 0; font-size: 13px; color: var(--ui-text); line-height: 1.35; }
.d-campaign p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: #cfd6c6; }
/* The starting situations, under the theatre's own prose: the same row as the theatre list on
   the left, so the two lists read as the same kind of choice. Always shown — a theatre with one
   situation shows that one, selected, rather than an empty space where a choice used to be. */
.d-head { margin: 4px 0 6px; font-family: var(--ui-display); font-size: 11px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--ui-dim); }
.d-scenarios { display: grid; gap: 4px; margin-bottom: 10px; }
.scen-row { display: block; width: 100%; text-align: left; padding: 7px 10px; cursor: pointer;
  border: 1px solid var(--ui-line); border-left: 3px solid transparent; background: rgba(6, 8, 7, .45); }
.scen-row:hover { background: var(--ui-glass-2); }
.scen-row.selected { background: var(--ui-accent-soft); border-left-color: var(--ui-accent); }
.scen-row b { display: block; font-family: var(--ui-display); font-size: 14px; font-weight: 700;
  letter-spacing: .4px; color: var(--ui-text); }
.scen-row span { display: block; font-size: 12px; color: var(--ui-dim); margin-top: 1px; white-space: normal; }
.scen-row.selected span { color: var(--ui-muted); }
.d-brief p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #bcc4b3; }
.d-win { margin: 14px 0 0; padding: 9px 11px; border-left: 3px solid var(--ui-accent);
  background: var(--ui-accent-soft); font-size: 13px; line-height: 1.5; color: #dfe3d6; }
.d-win b { display: block; font-family: var(--ui-display); font-size: 12px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--ui-accent); }
/* One column on a narrow window: the list first, the sheet under it, both as tall as they need. */
@media (max-width: 860px) {
  .picker { grid-template-columns: 1fr; height: auto; }
  .picker-list { max-height: 34vh; }
  .picker-detail { max-height: none; }
}

.item.save { display: flex; align-items: center; gap: 12px; cursor: default; padding: 9px 12px; background: rgba(9, 12, 10, .7); }
.item.save[hidden] { display: none; }
.item.save:hover { background: rgba(30, 37, 30, .85); }
.save-main { flex: 1; min-width: 0; cursor: pointer; }
.save-acts button { padding: 5px 10px; font-size: 13px; }
.save-acts button:hover { background: #5a2b26; border-color: #a8574c; }
.nav.center { justify-content: center; }
/* Campaign totals under the debrief table: context, not another set of numbers to read. */
table.debrief.record { margin-top: 10px; }
table.debrief.record td { border-bottom: none; color: #8fa483; font-size: 13px; }
input.text { background: rgba(6, 8, 7, .7); color: var(--ui-text); border: 1px solid var(--ui-line-2); border-radius: 0; padding: 9px 12px; font: 500 16px var(--ui-body); width: 320px; max-width: 100%; }
input.text:focus { outline: none; border-color: var(--ui-accent); }
label.field { display: flex; flex-direction: column; gap: 6px; font-family: var(--ui-display); font-size: 14px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ui-accent); }
canvas.map { width: 100%; max-width: 560px; border: 1px solid #3a4436; border-radius: 4px; image-rendering: auto; }
.hardpoints { display: flex; flex-direction: column; gap: 6px; }
.hp { display: grid; grid-template-columns: 34px 52px 1fr; gap: 8px; align-items: center; background: #1f251f; padding: 6px 8px; border-radius: 4px; }
.hp small { color: #8fa483; }
.hp em { grid-column: 1 / -1; font-size: 12px; color: #8fa483; font-style: normal; }
select { background: #101410; color: #e8e6dc; border: 1px solid #3a4436; padding: 5px; border-radius: 3px; width: 100%; }
.perf table, table.debrief { width: 100%; border-collapse: collapse; font-size: 14px; }
.perf td, table.debrief td { padding: 3px 4px; border-bottom: 1px solid #263024; }
.perf td:last-child, table.debrief td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 700; color: #ffd45a; }
tr.bad td { color: #ff6a5a; font-weight: 700; }
.warn { color: #ff6a5a; font-size: 13px; }
/* The Firefox performance note on the splash screen (see `Menu.browserNote`). Sits between the
   wordmark and the menu stack, so it is read before the first click rather than found afterwards.
   Deliberately advice-coloured rather than danger-coloured: nothing is broken, and the red used
   by `.warn` above would promise a fault the player then goes looking for. */
.browser-note { margin: 18px 0 4px; padding: 12px 14px; border-left: 3px solid var(--ui-accent);
  background: var(--ui-accent-soft); font-size: 13px; line-height: 1.5; text-align: left;
  display: flex; flex-direction: column; gap: 6px; }
.browser-note b { color: var(--ui-accent); }
.browser-note > b { font-family: var(--ui-display); letter-spacing: .02em; }
.browser-note span { color: #d9dbcf; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.hint { color: #c9b45a; font-size: 13px; }
.sliders { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 14px; }
.sliders label { display: flex; align-items: center; gap: 8px; }
.presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
details { margin-top: 10px; text-align: left; }
summary { cursor: pointer; color: #b3bda9; }
table.keys { font-size: 13px; border-collapse: collapse; margin-top: 8px; width: 100%; }
table.keys td { padding: 3px 8px; border-bottom: 1px solid #263024; }
table.keys td:nth-child(odd) { color: #ffd45a; white-space: nowrap; }
/* Section heading inside the key list. Must follow the :nth-child rule above — same
   specificity, so it only wins the colour on the strength of coming later. */
table.keys td.sect { color: #9fb08e; font-style: italic; padding-top: 12px; white-space: normal; }

/* The front, on the mission board: a four-line strip, not a staff picture. The
   full board is its own screen — see .front-screen below — and this is only what
   changes which sortie you pick. */
.front-quick { text-align: left; background: #1b201b; border: 1px solid #364232; border-left-width: 3px;
  border-radius: 4px; padding: 10px 12px; margin-top: 6px; }
.front-quick.good { border-left-color: #7d9a5a; }
.front-quick.bad { border-left-color: #a8574c; }
.front-quick p { margin: 0 0 4px; font-size: 13px; color: #b3bda9; }
.front-quick p.fq-verdict { font-size: 14px; color: #e8e6dc; }
.front-quick p b { color: #e8e6dc; }
.front-quick p b.good { color: #b8d060; }
.front-quick p b.bad { color: #ff9d8e; }
.front-quick p.hint { margin-bottom: 8px; }
button.fq-open { padding: 5px 12px; font-size: 13px; }

/* The shared bits: the momentum needle and the two-army tally, used by the quick
   strip above and by the front board's own summary column. */
.front-verdict { background: #1b201b; border: 1px solid #364232; border-left-width: 3px; border-radius: 4px; padding: 10px 12px; }
.front-verdict.good { border-left-color: #7d9a5a; }
.front-verdict.bad { border-left-color: #a8574c; }
.front-verdict p { margin: 0 0 4px; font-size: 14px; color: #e8e6dc; }
.front-verdict p.hint { margin: 0; }
/* The momentum needle. A bar rather than a number: the reading wanted off it is
   "which side of the middle", and a needle gives that at a glance where -0.28 does not. */
.front-bar { position: relative; height: 6px; border-radius: 3px; margin-bottom: 8px;
  background: linear-gradient(to right, #6a2b24, #2c3428 45%, #2c3428 55%, #55702f); }
.front-bar span { position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1px; border-radius: 2px; background: #ffd45a; }
table.front-tally { width: 100%; border-collapse: collapse; font-size: 13px; }
table.front-tally th { text-align: right; font-size: 12px; color: #8fa483; font-weight: 400; padding: 0 4px 4px; }
table.front-tally th:first-child { text-align: left; }
table.front-tally td { padding: 3px 4px; border-bottom: 1px solid #263024; color: #b3bda9; }
table.front-tally td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; color: #e8e6dc; }
/* Ours in the theatre's own green, theirs in the blue the map and the kneeboard
   already use for the other army, so the two columns read the same way everywhere. */
table.front-tally td:nth-child(2), table.front-tally th:nth-child(2) { color: #cfe07a; }
table.front-tally td:nth-child(3), table.front-tally th:nth-child(3) { color: #9fb6e8; }
table.front-tally b.good { color: #b8d060; }
table.front-tally b.bad { color: #ff9d8e; }
.front-notes h4 { margin: 0 0 6px; font-size: 13px; color: #ffd45a; font-weight: 600; }
.front-notes ul { margin: 0 0 10px; padding-left: 16px; }
.front-notes li { font-size: 13px; color: #b3bda9; margin-bottom: 4px; line-height: 1.4; }
.front-notes li b { color: #e8e6dc; }
.front-notes p.hint { line-height: 1.45; }

/* The front board: its own screen, and the densest thing in the game's UI. Wider
   than the other panels and allowed to scroll, because the whole point of it is
   that a commander sees the entire front rather than a page of it at a time. */
.panel.wide.front-screen { max-width: 1560px; width: 97vw; }
.fb-head { align-items: flex-start; gap: 18px; }
.fb-head .fb-map { flex: 0 0 auto; position: relative; }
.fb-head .fb-side { flex: 1 1 300px; min-width: 0; }
.fb-map canvas.map { max-width: 720px; cursor: grab; touch-action: none; }
.fb-map canvas.map.dragging { cursor: grabbing; }
.fb-map-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
.fb-map-zoom button { width: 28px; height: 28px; padding: 0; line-height: 1; font-size: 15px; opacity: .85; }
.fb-map-zoom button:hover { opacity: 1; }
/* The map legend. Without it the command overlay is decoration: nobody reads an
   arc filling clockwise as "this point is 40% lost" unless they are told. */
.fb-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 4px; font-size: 12px; color: #8fa483; }
.fb-legend span { display: flex; align-items: center; gap: 6px; }
.fb-legend i { display: inline-block; width: 14px; height: 10px; flex: 0 0 auto; }
.fb-legend i.k-arrow { background: linear-gradient(to right, #b8d060 60%, transparent 60%); clip-path: polygon(0 35%, 60% 35%, 60% 0, 100% 50%, 60% 100%, 60% 65%, 0 65%); background: #b8d060; }
.fb-legend i.k-ring { border: 2px solid #7090d0; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; width: 11px; height: 11px; }
.fb-legend i.k-chev { background: #b8d060; clip-path: polygon(50% 0, 100% 100%, 50% 65%, 0 100%); }
.fb-legend i.k-hot { border: 2px solid #ff6e46; width: 10px; height: 10px; }
.fb-legend i.k-dry { background: #ffb040; border-radius: 50%; width: 9px; height: 9px; }
.fb-tabs { display: flex; gap: 4px; margin: 12px 0 0; border-bottom: 1px solid var(--ui-line-2); }
.fb-tabs button { clip-path: none; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 8px 18px; font-size: 15px; letter-spacing: 1.5px; color: var(--ui-muted); }
.fb-tabs button:hover { background: rgba(196, 214, 176, .06); color: var(--ui-text); }
.fb-tabs button.on { background: linear-gradient(0deg, var(--ui-accent-soft), transparent); border-bottom-color: var(--ui-accent); color: var(--ui-accent); }
.fb-body { text-align: left; padding-top: 12px; }
.fb-body h4 { margin: 14px 0 6px; font-size: 13px; color: #ffd45a; font-weight: 600; }
.fb-body p.hint { margin: 0 0 10px; line-height: 1.45; }
.fb-row { gap: 18px; }
/* Long returns scroll inside themselves rather than pushing the tabs off the top. */
.fb-scroll { max-height: 46vh; overflow-y: auto; border: 1px solid #263024; border-radius: 4px; }
table.fb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.fb-table th { position: sticky; top: 0; background: #1b201b; text-align: left; font-weight: 400;
  font-size: 12px; color: #8fa483; padding: 5px 8px; border-bottom: 1px solid #364232; z-index: 1; }
table.fb-table td { padding: 5px 8px; border-bottom: 1px solid #232c22; color: #b3bda9; vertical-align: middle; }
table.fb-table td b { color: #e8e6dc; }
table.fb-table td small { display: block; font-size: 11px; color: #7f8f76; }
table.fb-table td.num { text-align: right; font-variant-numeric: tabular-nums; color: #e8e6dc; }
/* A row with a fight on it, and a row about to lose its point. Backgrounds rather
   than text colour: the cells are already carrying five colours of their own. */
table.fb-table tr.fb-hot td { background: rgba(120,54,38,0.20); }
table.fb-table tr.fb-crisis td { background: rgba(150,50,34,0.34); }
/* The bar-with-a-label used everywhere a fraction is shown. The number sits on
   the bar rather than beside it: a column of bars and a column of numbers is two
   columns saying one thing. */
.fb-bar { position: relative; display: block; min-width: 92px; height: 15px; background: #11150f;
  border: 1px solid #2b3428; border-radius: 3px; overflow: hidden; }
.fb-bar i { position: absolute; inset: 0 auto 0 0; display: block; }
.fb-bar.ok i { background: #4a6a30; }
.fb-bar.warn i { background: #7a6a24; }
.fb-bar.bad i { background: #7a3226; }
.fb-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 11px; color: #e8e6dc; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
/* Storage that has been bombed away: the tail of a yard bar that no longer
   exists. Hatched rather than simply dark, because an empty yard and a
   destroyed one are different states and the difference decides the sortie. */
.fb-bar u { position: absolute; top: 0; bottom: 0; display: block; text-decoration: none;
  background: repeating-linear-gradient(135deg, rgba(196,74,50,0.9) 0 3px, rgba(24,18,16,0.9) 3px 6px);
  border-left: 1px solid #c44a32; }
/* One mark per fuel tank on a field: standing, and crossed out. */
.fb-tanks { display: inline-flex; gap: 3px; align-items: center; }
.fb-tanks b, .fb-tanks s { display: block; width: 8px; height: 8px; }
.fb-tanks b { background: #8fb050; border: 1px solid #2b3428; }
.fb-tanks s { position: relative; text-decoration: none; }
.fb-tanks s::before, .fb-tanks s::after { content: ''; position: absolute; left: -1px; top: 3px;
  width: 11px; height: 1.5px; background: #d0603c; }
.fb-tanks s::before { transform: rotate(45deg); }
.fb-tanks s::after { transform: rotate(-45deg); }
.fb-flag { display: inline-block; font-size: 11px; color: #1b2016; background: #c9b45a; border-radius: 3px;
  padding: 1px 5px; margin-right: 4px; }
.fb-flag.counter { background: #d08a5a; }
.fb-flag.dry { background: #c2603f; color: #fff; }
.fb-flags { min-width: 150px; }
.fb-quiet { font-size: 11px; color: #7f8f76; }
.fb-flat { color: #6d7a66; }
.fb-roll { margin: 0 0 10px; padding-left: 16px; }
.fb-roll li { font-size: 13px; color: #b3bda9; margin-bottom: 3px; }
.fb-roll li b { color: #e8e6dc; }

/* "Right now" and the signals list, in the summary column beside the map. The log
   is the enemy's news as well as ours, so their lines are toned differently — a
   board on which "Convoy destroyed" could mean either is a board that misinforms. */
.fb-now { margin-top: 12px; }
.fb-now ul { margin: 0 0 10px; padding-left: 16px; }
.fb-now li { font-size: 13px; color: #b3bda9; margin-bottom: 4px; line-height: 1.4; }
ul.fb-log li { font-size: 12px; color: #9aa892; }
ul.fb-log li.fb-them { color: #c99080; }

/* Settings screen: one panel, four tabs. Reuses the front board's tab look (.fb-tabs) so a
   tabbed panel reads the same wherever it turns up. */
.settings-panel { height: min(760px, 94vh); display: flex; flex-direction: column; overflow: hidden; }
.settings-panel .controls-head { flex: 0 0 auto; }
.settings-panel .fb-tabs { flex: 0 0 auto; }
.settings-body { min-height: 0; overflow-y: auto; padding-right: 6px; }
.handbook-panel { height: min(860px, 94vh); display: flex; flex-direction: column; overflow: hidden; }
.handbook-panel .controls-head, .handbook-panel .fb-tabs { flex: 0 0 auto; }
.handbook-body { min-height: 0; overflow-y: auto; padding: 8px 8px 24px 0; line-height: 1.5; }
.cockpit-guide > p, .cockpit-guide li { color: #c6ccbf; }
.cockpit-guide ol { margin: 8px 0 16px; padding-left: 24px; }
.cockpit-guide li { margin: 0 0 7px; }
.system-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 16px 0 20px; }
.system-flow span { padding: 7px 10px; border: 1px solid var(--ui-line-2); background: var(--ui-glass-2);
  color: var(--ui-text); font-size: 13px; }
.system-flow i { color: var(--ui-accent); font-style: normal; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guide-grid section { padding: 12px 14px; border: 1px solid var(--ui-line); background: var(--ui-glass-2); }
.guide-grid h4 { margin: 0 0 6px; color: var(--ui-accent); font: 700 14px var(--ui-display);
  letter-spacing: 1.5px; text-transform: uppercase; }
.guide-grid p { margin: 0; color: #b3bda9; font-size: 13px; }
table.system-guide { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 13px; }
table.system-guide th { padding: 7px 8px; text-align: left; color: var(--ui-accent); background: rgba(255, 212, 90, .05);
  border-bottom: 1px solid var(--ui-line-2); }
table.system-guide td { padding: 7px 8px; vertical-align: top; color: #b3bda9; border-bottom: 1px solid var(--ui-line); }
table.system-guide td:first-child { color: var(--ui-text); white-space: nowrap; }
table.system-guide.diagnosis td:first-child { color: #ffd45a; }
@media (max-width: 760px) {
  .guide-grid { grid-template-columns: 1fr; }
  table.system-guide td:first-child { white-space: normal; }
}
label.opt { display: block; background: #1f251f; border: 1px solid #364232; border-radius: 4px; padding: 10px 12px; cursor: pointer; }
label.opt b { margin-left: 6px; }
label.opt span { display: block; font-size: 13px; color: #b3bda9; margin-top: 3px; }
/* Everything below the enable switch stays visible but reads as inert until the pad is on. */
#pad-body.off { opacity: .45; }
.axis { display: grid; grid-template-columns: minmax(110px, 220px) 1fr 44px; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0; }
.axis .bar { position: relative; height: 10px; background: #101410; border: 1px solid #3a4436; border-radius: 3px; }
/* The centre tick: a stick at rest should sit exactly on it. */
.axis .bar::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #56684f; }
.axis .bar i { position: absolute; top: 0; bottom: 0; background: #9fb04a; }
.axis em { text-align: right; color: #8fa483; font-style: normal; font-variant-numeric: tabular-nums; }
.pips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.pips span { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px;
  background: #101410; border: 1px solid #3a4436; border-radius: 3px; color: #6f7a68; }
.pips span.on { background: #6b7d2a; border-color: #ffd45a; color: #fff; }

/* Pause is deliberately one screenful; detailed controls live in their own bounded list. */
.pause-panel { max-width: 440px; overflow: visible; }
.pause-panel h2 { font-size: 40px; margin-bottom: 4px; }
.pause-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.pause-actions button { text-align: left; }
.pause-actions button.danger { margin-top: 12px; }
.controls-head { display: flex; align-items: flex-start; gap: 20px; }
.controls-head > div:first-child { flex: 1; }
.controls-head .nav { margin-top: 0; padding-top: 0; border-top: none; flex: 0 0 auto; }
.binding-columns, .binding-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) minmax(120px, 180px); gap: 8px; align-items: center; }
.binding-columns { color: #8fa483; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 3px 6px 7px 0; }
.binding-columns span:not(:first-child) { text-align: center; }
.binding-list { min-height: 0; overflow-y: auto; padding-right: 6px; }
.binding-list h3 { position: sticky; top: 0; z-index: 1; background: #101411; padding: 9px 0 6px; margin: 0; }
.binding-row { padding: 5px 0; border-bottom: 1px solid #263024; }
.binding-row button { padding: 6px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.binding-row button.listening { color: #171b17; background: #ffd45a; border-color: #ffd45a; }
.controls-hint { margin: 10px 0 0; }
/* The fixed keys: a chord or a sprung switch cannot be expressed as a binding, so these rows are
   a reference rather than a control. Two columns, the key set in the same amber a bound key is,
   and no button to click — see `REFERENCE_KEYS` in core/bindings.ts. */
.binding-row.fixed-row { grid-template-columns: minmax(180px, 1fr) minmax(150px, 260px); }
.binding-row.fixed-row b { font-weight: 600; color: #ffd45a; text-align: center; }
.binding-note { color: #8fa483; font-size: 12px; line-height: 1.5; margin: 0 0 8px; padding-right: 10px; }
/* An axis row carries its own options where an action row carries a second binding button. */
.binding-row.axis-row { grid-template-columns: minmax(180px, 1fr) minmax(190px, 250px) minmax(150px, 210px); }
.axis-row > span em.hint { display: block; font-style: normal; font-size: 11px; margin-top: 2px; }
.axis-opts { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #b9c9ad; }
.axis-opts label { display: flex; align-items: center; gap: 4px; margin: 0; }
.axis-opts select { padding: 4px 6px; font-size: 12px; }
/* The live device readout on the settings screen: one block per controller. */
.pad-device { border-top: 1px solid #263024; padding-top: 8px; margin-top: 10px; }
.pad-device > h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #8fa483; }
.axis.hat em { color: #ffd45a; }
.axis.bound span { color: #ffd45a; }
@media (max-width: 620px) {
  .controls-head { display: block; }
  .controls-head .nav { margin: 8px 0 12px; }
  .binding-row { grid-template-columns: 1fr 1fr; }
  .binding-row > span { grid-column: 1 / -1; }
  .binding-columns { display: none; }
}

/* In-flight glass: quiet edges, clear instruments, an unobstructed centre. */
#hud { --hud-glass: linear-gradient(135deg, rgba(12,24,33,.86), rgba(10,20,29,.64)); --hud-line: rgba(183,218,236,.16);
  --hud-muted: #a5bdca; --hud-accent: #84eadc; position: fixed; inset: 0; pointer-events: none; z-index: 10;
  font-variant-numeric: tabular-nums; color: #edf6fa; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
#hud > div { position: absolute; }
#hud-flight, #hud-weapons, #hud-mission, #hud-wing, #hud-damage { background: var(--hud-glass); border: 1px solid var(--hud-line);
  border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.16); padding: 16px 18px; backdrop-filter: blur(16px); }
#hud .hud-details, #hud-damage, #hud-stats, #hud-debug { display: none; }
#hud.debug-details .hud-details { display: block; }
#hud.debug-details #hud-damage, #hud.debug-details #hud-stats, #hud.debug-details #hud-debug { display: block; }
#hud.hud-suppressed > div:not(#hud-veil):not(#hud-hands) { display: none !important; }
.hud-eyebrow { display: flex; align-items: center; gap: 7px; color: #a5bdca; font-size: 10px; font-weight: 650; letter-spacing: 1.8px; line-height: 1.4; margin-bottom: 12px; }
.hud-eyebrow > span { margin-left: auto; letter-spacing: .4px; font-weight: 450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-eyebrow > i { width: 5px; height: 5px; border-radius: 50%; background: #84eadc; box-shadow: 0 0 9px #84eadc66; flex-shrink: 0; }
#hud-flight { left: 24px; top: 24px; width: 312px; font-size: 12px; line-height: 1.55; }
#hud-flight label, #hud-weapons label { font-size: 9px; color: var(--hud-muted); font-weight: 550; letter-spacing: 1px; }
.flight-primary { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }
.flight-primary > div + div { padding-left: 16px; border-left: 1px solid var(--hud-line); }
.flight-primary label { display: flex; gap: 8px; align-items: baseline; }
.flight-primary label small { font-size: 8px; color: #84eadc; }
.flight-primary strong { display: block; font-size: 34px; line-height: 1.3; font-weight: 500; letter-spacing: -1.5px; white-space: nowrap; }
.flight-primary strong small { margin-left: 5px; font-size: 11px; font-weight: 450; letter-spacing: 0; color: var(--hud-muted); }
.flight-secondary { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hud-line); }
.flight-secondary label { display: block; margin-bottom: 3px; }
.flight-secondary b { font-size: 14px; font-weight: 500; white-space: nowrap; }
.flight-secondary b small { margin-left: 3px; font-size: 9px; color: var(--hud-muted); font-weight: 450; }
.flight-power { display: flex; align-items: center; gap: 12px; margin-top: 15px; }
.flight-power b { min-width: 32px; font-size: 11px; font-weight: 500; text-align: right; }
.hud-meter { flex: 1; height: 3px; border-radius: 3px; background: rgba(183,218,236,.14); overflow: hidden; }
.hud-meter i { display: block; height: 100%; background: #84eadc; border-radius: 3px; }
.flight-states { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.flight-states span { border: 1px solid rgba(132,234,220,.2); border-radius: 4px; padding: 2px 6px; color: #a7ebe1; font-size: 9px; letter-spacing: .5px; }
#hud-flight .hud-details { color: #a5bdca; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--hud-line); font-size: 11px; }
#hud-flight .big { font-size: 22px; font-weight: 600; }
#hud-flight .big small { font-size: 12px; }
#hud-flight .autopilot { color: #9fe8ff; }
#hud-flight .energy { margin-top: 6px; color: #a5bdca; font-size: 11px; }
#hud-flight .lso { margin-top: 6px; color: #ffd28a; font-weight: 550; }
#hud-flight .lso.roger, #hud-flight .lso.cut { color: #84eadc; }
#hud-flight .lso.waveoff { color: #ff8a80; }
#hud-flight .lso.deck, #hud-flight .lso.gca { color: #a8d4ff; }
#hud-weapons { left: 24px; bottom: 24px; max-width: min(440px, 40vw); min-width: 260px; font-size: 12px; line-height: 1.7; }
#hud-weapons .hud-eyebrow { margin-bottom: 7px; }
#hud-weapons .sel { display: flex; align-items: center; gap: 16px; color: #edf6fa; font-size: 17px; font-weight: 550; }
#hud-weapons .weapon-count { margin-left: auto; padding: 0 8px; border-radius: 5px; color: #84eadc; background: rgba(132,234,220,.1); font-size: 15px; }
#hud-weapons .lock { color: #ffd28a; font-size: 11px; }
#hud-weapons .mass, #hud-weapons .stores, #hud-weapons .crew { color: #a5bdca; font-size: 11px; }
#hud-weapons .bombsight { color: #ffd28a; font-size: 12px; }
#hud-weapons .bombsight b { color: #84eadc; }
#hud-weapons .bombsight b.low { color: #ff8a80; }
.fuel-summary { display: flex; gap: 12px; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(183,218,236,.16); }
.fuel-summary b { font-size: 12px; font-weight: 500; }
.fuel-summary span { margin-left: auto; font-size: 11px; color: #a5bdca; }
#hud .fuel-summary.caution, #hud .fuel-summary.caution span { color: #ffd28a; }
#hud-damage { right: 224px; bottom: 24px; text-align: center; font-size: 10px; color: #b9cbd4; max-width: 280px; }
#hud-damage .damage-plan { display: block; width: 96px; height: 96px; margin: 0 auto 3px; overflow: visible; }
#hud-mini { right: 24px; bottom: 24px; width: 176px; height: 176px; border-radius: 50%; border: 1px solid var(--hud-line);
  box-shadow: 0 8px 32px rgba(0,0,0,.2); background: rgba(10,20,29,.6); }
#hud-mini canvas { display: block; width: 174px; height: 174px; border-radius: 50%; }
#hud-tactical { right: 24px; bottom: 24px; width: 176px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
#hud-tactical > #hud-mini { flex-shrink: 0; }
#hud-tactical > #hud-wing { width: auto; padding: 12px; }
#hud.scripted-flight #hud-tactical > #hud-mission { position: static; width: auto; padding: 12px; }
#hud-radar { right: 220px; bottom: 24px; width: 156px; height: 156px; border-radius: 50%;
  border: 1px solid var(--hud-line); background: rgba(3,8,4,.7); }
#hud-radar canvas { display: block; width: 154px; height: 154px; border-radius: 50%; }
#hud-ils { right: 220px; bottom: 196px; width: 124px; height: 124px; border-radius: 12px; border: 1px solid var(--hud-line); background: rgba(3,8,4,.72); }
#hud-ils canvas { display: block; width: 122px; height: 122px; border-radius: 12px; }
#hud-sonar { left: 24px; bottom: 260px; width: 168px; height: 168px; border-radius: 12px; border: 1px solid var(--hud-line); background: rgba(3,8,4,.72); }
#hud-sonar canvas { display: block; width: 166px; height: 166px; border-radius: 12px; }
#hud-mission { right: 24px; top: 24px; text-align: left; width: 300px; font-size: 12px; line-height: 1.65; }
#hud-mission > b { display: block; font-size: 16px; font-weight: 550; margin-bottom: 7px; }
#hud-mission .ok { color: #84eadc; font-weight: 650; }
#hud-mission .nav { display: block; color: #9ee5ec; margin-top: 6px; padding: 0; border: 0; }
#hud-weapons .fuel-plan, #hud-mission .fuel-plan { color: #b9d8c4; font-size: 11px; }
#hud-mission .fuel-plan.caution { color: #ffd077; font-weight: 600; }
#hud.scripted-flight #hud-mission { top: auto; bottom: 218px; width: 240px; font-size: 11px; }
#hud-mission:empty { display: none; }
#authored-mission-hud { position: fixed; top: 24px; right: 24px; width: 300px; color: #edf6fa; background: linear-gradient(135deg, rgba(12,24,33,.86), rgba(10,20,29,.64));
  padding: 16px 18px; border: 1px solid rgba(183,218,236,.16); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.16); backdrop-filter: blur(16px);
  font: 12px/1.65 system-ui, sans-serif; pointer-events: none; z-index: 15; }
#authored-mission-hud > strong { display: block; font-size: 16px; font-weight: 550; line-height: 1.4; margin-bottom: 9px; }
#authored-mission-hud > div:not(.hud-eyebrow) { margin-top: 4px; color: #c7d9e1; }
#authored-mission-hud .hud-eyebrow > span { color: #84eadc; }
#hud-msgs { left: 50%; top: 24px; transform: translateX(-50%); width: min(36vw, 520px); text-align: center; font-size: 12px; line-height: 1.5; }
#hud-msgs div { margin-bottom: 6px; padding: 9px 14px; border: 1px solid var(--hud-line); border-radius: 9px; background: rgba(12,24,33,.82); color: #e0edf3; }
/* Keep the latest two radio messages on the glass; debug expands the recent log. */
#hud:not(.debug-details) #hud-msgs div:nth-last-child(n+3) { display: none; }
#hud-warp { left: 50%; top: 112px; transform: translateX(-50%); font-size: 10px; letter-spacing: 1.5px;
  color: #ffd28a; background: rgba(25,28,25,.8); border: 1px solid rgba(255,210,138,.3); padding: 5px 12px; border-radius: 20px; }
#hud-warp b { font-size: 13px; font-weight: 600; letter-spacing: 0; }
#hud-warn { left: 50%; bottom: 24%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: min(52vw, 820px); }
#hud-warn span { background: rgba(96,30,29,.88); border: 1px solid rgba(255,138,128,.45); color: #ffe0db; padding: 6px 12px;
  font-size: 11px; font-weight: 650; letter-spacing: .8px; text-align: center; border-radius: 6px; }
#hud-stats { left: 24px; bottom: 5px; max-width: calc(100vw - 48px); font: 10px/1.4 ui-monospace, monospace; color: #c5d5de;
  background: rgba(8,17,24,.85); padding: 2px 5px; border-radius: 3px; }
#hud-debug { left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 10px; letter-spacing: 1px; color: #ffd28a;
  padding: 5px 10px; background: rgba(25,28,25,.88); border: 1px solid rgba(255,210,138,.3); border-radius: 20px; }
#hud.debug-details #hud-radar { bottom: 350px; }
#hud.debug-details #hud-ils { bottom: 350px; right: 392px; }
#hud.debug-details #hud-flight { max-height: calc(100vh - 310px); overflow-y: auto; pointer-events: auto; scrollbar-width: thin; }
#authored-mission-hud { max-height: calc(100vh - 420px); overflow-y: auto; pointer-events: auto; scrollbar-width: thin; }
#hud-map { left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(10,20,29,.95); border: 1px solid var(--hud-line); padding: 10px; border-radius: 14px; z-index: 4; }
#hud-map canvas { width: min(70vh, 640px); height: min(70vh, 640px); display: block; }

/* The kneeboard's pages: the map and the met sheet, same footprint, Tab between them. */
.knee-tabs { display: flex; gap: 12px; align-items: baseline; font: 11px monospace; letter-spacing: 2px; color: #6f7f66; padding: 0 2px 5px; }
.knee-tabs span.on { color: #ffd45a; }
.knee-tabs em { margin-left: auto; font-style: normal; letter-spacing: 0; }
.knee-wx { width: min(70vh, 640px); height: min(70vh, 640px); overflow: auto; }

/* The weather briefing sheet. See ui/weatherbrief.ts. */
.wx-sheet { color: #d9dccd; font-size: 13px; }
.wx-sheet small { color: #8fa483; font-weight: normal; }
.wx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wx-head h3 { margin: 0; }
.wx-head span { color: #8fa483; font-size: 12px; }
.wx-sec { margin: 16px 0 6px; color: #cfe8b4; letter-spacing: 1px; }
.wx-station { background: #1f251f; border: 1px solid #364232; border-radius: 4px; padding: 8px 12px; margin-top: 10px; }
.wx-sthead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wx-sthead h4 { margin: 0; color: #e6eeda; }
.wx-verdict { font: bold 11px monospace; letter-spacing: 2px; padding: 2px 8px; border-radius: 3px; }
.wx-verdict.ok { background: #2d4a2a; color: #b6f0a0; }
.wx-verdict.bad { background: #5a2520; color: #ffb0a4; }
.wx-metar { display: block; font: 12px monospace; color: #9fb04a; margin: 4px 0 8px; overflow-wrap: anywhere; }
.wx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.wx-tile { background: #171b17; border-left: 3px solid #4d5d45; padding: 5px 8px; min-width: 0; }
.wx-tile.warn { border-left-color: #c9a040; }
.wx-tile label { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #7f8a78; }
.wx-tile b { display: block; font-size: 15px; color: #eef2e4; font-variant-numeric: tabular-nums; }
.wx-tile span { display: block; font-size: 11px; color: #a6b09c; }
.wx-g { color: #ffcf70; }
.wx-tail { font-style: normal; font-weight: 700; color: #ff9d8e; }
.wx-haz, .wx-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.wx-haz th { text-align: left; white-space: nowrap; vertical-align: top; color: #8fa483; font-weight: normal; padding: 3px 12px 3px 0; width: 1%; }
.wx-haz td { padding: 3px 0; }
.wx-haz tr.warn td { color: #ffd98a; }
.wx-grid th { text-align: left; color: #7f8a78; font-weight: normal; border-bottom: 1px solid #364232; padding: 3px 8px 3px 0; }
.wx-grid td { padding: 3px 8px 3px 0; border-bottom: 1px solid #242b23; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-grid td.warn { color: #ffd98a; }
.wx-grid tr.bad td { color: #ff9d8e; }
.wx-light { color: #c9b45a; }
.wx-remarks p { margin: 0 0 8px; color: #b3bda9; line-height: 1.45; }
.wx-line { font-size: 12px; color: #cfd8c4; margin-top: 3px; }
.wx-sheet.compact { font-size: 12px; }
.wx-sheet.compact .wx-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.wx-sheet.compact .wx-tile b { font-size: 13px; }
.wx-sheet .wx-grid { display: block; overflow-x: auto; }

/* ---------------------------------------------------------------------------
   Hangar — the aircraft on a turntable, the roster above it, the racks beside it.
   One screen: choosing the machine and choosing what it carries is one decision.
   --------------------------------------------------------------------------- */
.panel.hangar { max-width: 1500px; width: 97vw; height: 94vh; display: flex; flex-direction: column;
  padding: 16px 20px; overflow: hidden; }
.hangar-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.hangar-head h2 { margin: 0; }
.field-line { color: #a9b3a0; font-size: 13px; }
.field-line b { color: #e8e6dc; }
button.linky { background: none; border: none; color: #9fb04a; padding: 0 4px; font-size: 13px; text-decoration: underline; }
button.linky:hover { background: none; color: #ffd45a; }

/* The roster: a closed dropdown showing the selected type, opening onto a scrollable list.
   Replaced a sideways-scrolling strip of chips, which stopped being scannable once the fleet
   grew past a handful of types. */
.ac-select { position: relative; margin: 10px 0 6px; }
.ac-select-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 14px; border-radius: 4px; background: #1f251f; border: 1px solid #364232;
  border-bottom-width: 2px; }
.ac-select-btn b { font-size: 14px; font-weight: 600; }
.ac-select-btn span { font-size: 12px; color: #8fa483; }
.ac-select-btn .caret { flex: 0 0 auto; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid #8fa483; border-bottom: 2px solid #8fa483; transform: rotate(45deg);
  transition: transform .12s ease; }
.ac-select-btn:hover { border-color: #7d9a5a; background: #262e24; }
.ac-select-btn.open { border-color: #7d9a5a; }
.ac-select-btn.open .caret { transform: rotate(-135deg); }

.ac-select-panel { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0;
  max-height: min(60vh, 520px); overflow-y: auto; padding: 6px; border-radius: 5px;
  background: #171b17; border: 1px solid #3a4436; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.ac-opt { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 4px; background: transparent; border: 1px solid transparent; }
.ac-opt b { font-size: 13px; font-weight: 600; }
.ac-opt span { font-size: 11px; color: #8fa483; margin-left: auto; white-space: nowrap; }
.ac-opt:hover { background: #262e24; border-color: #364232; }
.ac-opt.selected { background: #2a3223; border-color: #ffd45a; }
.ac-opt.selected b { color: #ffd45a; }
.ac-opt.locked { opacity: .38; cursor: default; text-decoration: line-through; }
.ac-opt.locked:hover { background: transparent; border-color: transparent; }
/* The variant chooser: the marks of the selected type side by side under the picker. Only shown
   when the type has more than one, so [hidden] has to win over the flex display. */
.ac-variants { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 0 0 8px; }
.ac-variants[hidden] { display: none; }
.ac-variants-label { align-self: center; margin-right: 4px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: #8fa483; }
.ac-var { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 180px;
  text-align: left; padding: 6px 10px; border-radius: 4px; background: #1f251f; border: 1px solid #364232; }
.ac-var b { font-size: 13px; font-weight: 600; }
.ac-var span { font-size: 11px; color: #8fa483; }
.ac-var:hover { background: #262e24; border-color: #7d9a5a; }
.ac-var.selected { background: #2a3223; border-color: #ffd45a; }
.ac-var.selected b { color: #ffd45a; }
.ac-var.locked { opacity: .38; cursor: default; }
.ac-var.locked:hover { background: #1f251f; border-color: #364232; }
/* Two whole lines and then scroll — a max-height that cuts a line in half reads as a bug. */
.ac-desc { color: #b3bda9; font-size: 13px; line-height: 1.5; margin-bottom: 10px;
  max-height: 3em; overflow-y: auto; }
.ac-lock-hint { color: #d9b35a; margin: 4px 0 0; }

/* The body takes what is left, from a basis of nothing: with `flex-basis: auto` the tall
   armament column becomes the body's natural height and the heading, the roster and the
   description above it get shrunk to fit around it. */
.steps, .hangar-head, .ac-select, .ac-variants, .ac-desc, .panel.hangar > .nav { flex: 0 0 auto; }
.hangar-body { display: flex; gap: 16px; flex: 1 1 0; min-height: 0; }

/* The viewport. Dark, so the aeroplane is the brightest thing on the screen. */
.hv { position: relative; flex: 1 1 auto; min-width: 0; border: 1px solid #3a4436; border-radius: 5px;
  background: radial-gradient(120% 90% at 50% 38%, #23301f 0%, #131a14 55%, #0a0d0a 100%); overflow: hidden; }
.hv-canvas { position: absolute; inset: 0; }
.hv-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.hv-name { position: absolute; left: 14px; top: 12px; pointer-events: none; text-shadow: 0 1px 3px #000; }
.hv-name b { display: block; font-size: 20px; color: #ffd45a; letter-spacing: 1px; }
.hv-name span { font-size: 12px; color: #b3bda9; text-transform: uppercase; letter-spacing: 2px; }
.hv-hint { position: absolute; right: 12px; top: 12px; font-size: 11px; color: #6f7a68; pointer-events: none; }
.hangar-modes { display: flex; gap: 6px; margin: 0 0 9px; flex: 0 0 auto; }
.hangar-modes:empty { display: none; }
.hangar-modes button { padding: 6px 14px; font-size: 12px; background: #1f251f; border: 1px solid #364232; }
.hangar-modes button.active { background: #354029; color: #ffd45a; border-color: #a1a85e; }
.hv.cargo-mode { background: #111913; }
.hv.cargo-mode .hv-canvas, .hv.cargo-mode .hv-name, .hv.cargo-mode .hv-foot { display: none; }
.hv.cargo-mode .hv-hint { z-index: 2; color: #a3b39b; }
.cargo-view { position: absolute; inset: 0; overflow: auto; padding: 40px 24px 20px; }
.cargo-view[hidden] { display: none; }
.cargo-diagram { width: min(100%, 610px); margin: 0 auto; }
.cargo-diagram-head, .cargo-diagram-tail { display: flex; justify-content: space-between; align-items: baseline;
  color: #a9bba2; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cargo-diagram-head b { color: #e5d7a8; font-size: 14px; letter-spacing: .04em; text-transform: none; }
.cargo-diagram-tail { justify-content: center; margin-top: 5px; }
.cargo-floor { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
  padding: 19px 25px 22px; border: 2px solid #667761; border-radius: 42% 42% 14px 14px / 22px 22px 14px 14px;
  background: repeating-linear-gradient(0deg, #202b22 0, #202b22 2px, #1a251d 2px, #1a251d 25px); }
.cargo-floor::before { content: ''; position: absolute; left: 50%; top: 19px; bottom: 22px; border-left: 2px dashed #526149; pointer-events: none; }
.cargo-frame { display: grid; grid-template-columns: 18px 1fr; gap: 7px; align-items: center; z-index: 1; }
.cargo-frame-label { color: #81927c; font-size: 11px; text-align: center; }
.cargo-frame-bays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cargo-bay { display: flex; flex-direction: column; gap: 4px; min-height: 73px; padding: 9px 11px;
  text-align: left; border: 1px dashed #566b53; border-radius: 5px; background: #172019; color: #c7d5c2; cursor: pointer; }
.cargo-bay.single { grid-column: 1 / -1; }
.cargo-bay.supply { border-style: solid; border-color: #bb9d52; background: #343423; }
.cargo-bay.troops { border-style: solid; border-color: #6aab9a; background: #223631; }
.cargo-bay:hover, .cargo-bay:focus-visible, .cargo-bay.picked { outline: 2px solid #ffd45a; outline-offset: 0; }
.cargo-bay small { color: #b6c4aa; font-size: 10px; letter-spacing: .09em; }
.cargo-bay strong { color: #fff0c3; font-size: 14px; }
.cargo-bay span { color: #b4c2ab; font-size: 11px; }
.cargo-help { color: #abb9a5; font-size: 12px; line-height: 1.45; margin: 9px 0; }
.cargo-palette { display: flex; flex-direction: column; gap: 6px; }
.cargo-option { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 9px 11px;
  text-align: left; background: #1b261d; border: 1px solid #465843; border-radius: 4px; cursor: grab; }
.cargo-option b { font-size: 13px; color: #e0e6d8; }
.cargo-option span { font-size: 11px; color: #a5b39e; }
.cargo-option.supply { border-left: 4px solid #bb9d52; }
.cargo-option.troops { border-left: 4px solid #6aab9a; }
.cargo-option:hover, .cargo-option.active { border-color: #ffd45a; background: #303a28; }
.cargo-summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 16px 0 12px; font-size: 12px; }
.cargo-summary b { color: #e2d497; }
.cargo-summary button { font-size: 11px; padding: 5px 8px; }
.cargo-totals { display: grid; gap: 6px; margin-bottom: 12px; font-size: 11px; color: #abb9a5; }
.cargo-totals span { display: flex; justify-content: space-between; gap: 12px; }
.cargo-totals b { color: #e5dfc5; font-variant-numeric: tabular-nums; }
.cargo-description { padding: 8px 10px; border-left: 2px solid #bb9d52; background: #1b261d; }
.cargo-manifest { margin-top: 18px; padding: 12px; border: 1px solid #465843; border-radius: 5px; background: #172019; }
.cargo-manifest h4 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 10px; color: #e5d7a8; font-size: 12px; }
.cargo-manifest h4 span { color: #abb9a5; font-weight: normal; }
.cargo-manifest-scroll { overflow-x: auto; }
.cargo-manifest table { width: 100%; border-collapse: collapse; font-size: 11px; text-align: left; }
.cargo-manifest th { color: #b6c4aa; font-weight: normal; }
.cargo-manifest th, .cargo-manifest td { padding: 7px 6px; border-bottom: 1px solid #364232; vertical-align: top; }
.cargo-manifest td { color: #d3dccb; }
.cargo-manifest td.bad { color: #ff9d8e; }
.cargo-manifest small { display: block; margin-top: 3px; color: #a5b39e; font-size: 10px; }
.cargo-manifest p { margin: 10px 0 0; color: #abb9a5; font-size: 11px; line-height: 1.5; }
.cargo-weight { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; padding: 8px 10px;
  border: 1px solid #465843; border-radius: 4px; font-size: 11px; color: #a9bba2; }
.cargo-weight b { color: #e5dfc5; font-variant-numeric: tabular-nums; }
.cargo-weight.bad { border-color: #a8574c; }
.cargo-weight.bad span { width: 100%; color: #ff9d8e; }
.cargo-fuel { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 12px; border-top: 1px solid #364232; font-size: 12px; }
.cargo-fuel label { display: flex; align-items: center; gap: 8px; flex: 1; }
.cargo-fuel input { flex: 1; min-width: 0; }
.cargo-fuel span { white-space: nowrap; color: #b4c2ab; }

/* Station callouts, projected onto the model each frame by hangar3d.ts. */
.hv-labels { position: absolute; inset: 0; pointer-events: none; }
.hv-label { position: absolute; transform: translate(-50%, -160%); white-space: nowrap; pointer-events: auto;
  cursor: pointer; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 3px;
  background: rgba(12, 16, 12, .72); border: 1px solid #3d4a38; color: #93a189; }
.hv-label.loaded { color: #d7e6c0; border-color: #56684f; }
.hv-label.sel { color: #16190f; background: #ffd45a; border-color: #ffd45a; font-weight: 700; }

/* The strip under the model: takeoff weight first, then the numbers it changes. */
.hv-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px 12px;
  background: linear-gradient(to top, rgba(8, 11, 8, .92), rgba(8, 11, 8, 0)); }
.wbar { position: relative; height: 20px; border: 1px solid #3a4436; border-radius: 3px;
  background: #101410; overflow: hidden; }
.wbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(to right, #4d6b2a, #8fb04a); }
.wbar.bad i { background: linear-gradient(to right, #7a2b22, #d4503c); }
.wbar u { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; text-decoration: none; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.pill { font-size: 12px; padding: 3px 8px; border-radius: 3px; background: rgba(31, 37, 31, .85);
  border: 1px solid #364232; font-variant-numeric: tabular-nums; }
.pill i { color: #8fa483; font-style: normal; margin-right: 6px; }
.pill.bad { border-color: #a8574c; color: #ff9d8e; }
.hv-foot .warn, .hv-foot .hint { margin: 6px 0 0; }

/* The armament column. */
.arm { flex: 0 0 384px; overflow-y: auto; padding-right: 4px; }
.arm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.arm-head h3 { margin: 0; }
.arm-mass { font-size: 12px; color: #8fa483; font-variant-numeric: tabular-nums; }
.arm .presets { margin: 8px 0 6px; }
.arm .presets button { font-size: 12px; padding: 5px 10px; }
label.mirror { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #a9b3a0; margin-bottom: 8px; }
.stations { display: flex; flex-direction: column; gap: 5px; }

/* Cargo balance: the datum is the middle; the marker is where the load sits. */
.lp-trim { margin-top: 9px; }
.lp-bar { position: relative; height: 7px; background: #151a15; border: 1px solid #35412f;
  border-radius: 4px; }
.lp-bar i { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #2f3a2b; left: 50%;
  margin-left: -1px; }
.lp-bar u { position: absolute; top: -4px; bottom: -4px; width: 7px; margin-left: -3px;
  border-radius: 2px; background: #9fc46a; }
.lp-bar.watch u { background: #ffd45a; }
.lp-bar.bad u { background: #d9603f; }
.lp-trim p { margin: 5px 0 0; font-size: 11px; color: #a9b3a0; line-height: 1.45; }
.lp-trim p.bad { color: #e08466; }

/* One station. Shut it is a line; open it is the list of everything the pylon will take. */
.stn { background: #1f251f; border: 1px solid #364232; border-radius: 4px; }
.stn:hover { border-color: #7d9a5a; }
.stn.loaded { border-left: 3px solid #6b7d2a; }
.stn.open { border-color: #ffd45a; }
.stn-head { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: baseline;
  padding: 7px 10px; cursor: pointer; }
.stn-head b { color: #ffd45a; font-size: 13px; }
.stn-store { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stn:not(.loaded) .stn-store { color: #6f7a68; font-style: italic; }
.stn-mass { font-size: 12px; color: #b3bda9; font-variant-numeric: tabular-nums; }
.stn-head small { grid-column: 1 / -1; font-size: 11px; color: #7f8a78; }
.stn-body { border-top: 1px solid #2c352a; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.stn-body .opt { padding: 6px 8px; border-radius: 3px; cursor: pointer; background: #191f19; border: 1px solid transparent; }
.stn-body .opt:hover { background: #232b21; border-color: #56684f; }
.stn-body .opt.selected { background: #2a3223; border-color: #ffd45a; }
.stn-body .opt b { display: block; font-size: 13px; font-weight: 600; }
.stn-body .opt b i { float: right; font-style: normal; color: #b3bda9; font-weight: 400;
  font-variant-numeric: tabular-nums; }
.stn-body .opt em { display: block; font-size: 11px; color: #8fa483; font-style: normal; margin-top: 3px; line-height: 1.4; }
.opt-group { display: flex; flex-direction: column; gap: 4px; }
.opt-group + .opt-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid #2c352a; }
.opt-cat { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #7f8a78; padding: 0 2px; }
select.qty { margin-top: 2px; }

.arm .sliders { flex-direction: column; gap: 8px; align-items: stretch; }
.arm .sliders label { justify-content: space-between; }
.arm .sliders input[type=range] { flex: 1 1 auto; min-width: 0; margin: 0 8px; }
.skin-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #ffffff20; font-size: 14px; }
.skin-picker select { width: 100%; min-width: 0; }
.skin-picker .hint { grid-column: 1 / -1; margin: 0; line-height: 1.5; }
.markings-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; font-size: 14px; }
.markings-link .hint { margin: 0; }

/* Squadron markings designer: the badge grid on the left, the aeroplane wearing it on the right. */
.mk-body { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.mk-col { flex: 1 1 340px; min-width: 0; }
.mk-editor { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.mk-grid { display: grid; grid-template-columns: repeat(7, 34px); grid-template-rows: repeat(7, 34px); gap: 2px; padding: 6px;
  background: repeating-conic-gradient(#3a4238 0 25%, #2c332b 0 50%) 0 0 / 16px 16px; border: 1px solid var(--ui-line-2);
  touch-action: none; user-select: none; }
.mk-grid div { border: 1px solid rgba(255, 255, 255, .07); cursor: crosshair; }
.mk-grid div.on { border-color: rgba(0, 0, 0, .3); }
.mk-tools { display: flex; flex-direction: column; gap: 8px; }
.mk-brush { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mk-brush input[type=color], .mk-form input[type=color] { width: 52px; height: 28px; padding: 0; border: 1px solid var(--ui-line-2); background: none; cursor: pointer; }
.mk-erase { font-size: 13px; color: var(--ui-muted); }
.mk-mirror { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ui-muted); cursor: pointer; }
.mk-buttons { display: flex; gap: 6px; }
.mk-buttons button { padding: 5px 10px; font-size: 13px; }
.mk-buttons button:disabled { opacity: .45; cursor: default; }
.mk-flight { margin-top: 10px; }
.mk-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ui-muted); }
.mk-inline input.mk-code { flex: 0 0 auto; width: 4.5em; min-width: 0; text-transform: uppercase; letter-spacing: 2px; }
.mk-presets { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; margin-top: 8px; }
.mk-presets label { color: var(--ui-muted); font-size: 13px; }
.mk-presets select { min-width: 0; }
.mk-presets button { padding: 5px 10px; font-size: 13px; }
.mk-presets #mk-random { grid-column: 2 / -1; justify-self: start; }
.mk-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: center; font-size: 14px; }
.mk-form select { min-width: 0; }
.mk-view { display: block; max-width: 100%; margin: 6px 0 14px; image-rendering: pixelated; background: rgba(0, 0, 0, .2); border: 1px solid var(--ui-line); }
.sq-acno { font-family: var(--ui-display); font-weight: 700; color: var(--ui-accent); }
details.perfcard { margin-top: 14px; }
details.perfcard > summary { font-size: 13px; }

/* Narrow windows: the racks go under the model rather than beside it. */
@media (max-width: 1000px) {
  .hangar-body { flex-direction: column; }
  .arm { flex: 1 1 auto; }
  .hv { flex: 0 0 46vh; }
}

/* Your flight: who is still with you, what they are doing, and how far off they are. */
#hud-wing { right: 24px; bottom: 284px; width: 240px; font-size: 11px; color: #c7d9e1; line-height: 1.5; }
#hud-wing .wing-head { color: #84eadc; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; margin-bottom: 3px; }
#hud-wing .wing-count { color: #a5bdca; font-size: 9px; letter-spacing: 1px; }
#hud-wing .wing-row { display: flex; gap: 6px; margin-top: 4px; }
#hud.debug-details #hud-wing .wing-row { display: flex; }
#hud-wing .wing-row.hud-details { display: none; }
#hud-wing .wing-row b { font-weight: 600; }
#hud-wing .wing-row span { flex: 1; opacity: .85; }
#hud-wing .wing-row em { font-style: normal; width: 52px; text-align: right; opacity: .7; }


/* The radio menu. Bottom centre, out of the gunsight, and it never takes the pointer. */
#flightmenu { position: fixed; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 12;
  width: 430px; max-width: 92vw; pointer-events: none; background: rgba(10, 14, 10, .82);
  border: 1px solid #56684f; border-left: 3px solid #ffd45a; border-radius: 4px; padding: 8px 12px;
  font-size: 14px; color: #e8e6dc; text-shadow: 0 1px 2px #000; }
#flightmenu .fm-head { color: #ffd45a; font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; }
#flightmenu .fm-row { display: flex; gap: 10px; padding: 3px 0; align-items: baseline; }
#flightmenu .fm-row b { color: #9fb04a; width: 14px; flex: 0 0 14px; }
#flightmenu .fm-row.on { color: #ffd45a; }
#flightmenu .fm-row.on b { color: #ffd45a; }
#flightmenu .fm-row em { display: block; font-style: normal; font-size: 12px; color: #93a08b; }
#flightmenu .fm-foot { margin-top: 6px; font-size: 12px; color: #7f8a78; }
/* Guns tight is a state you fly in, so it is in the header and it is loud. */
#flightmenu .fm-tight { color: #ff8a6a; letter-spacing: 1px; }

/* The mission board's conditions block: the theatre's clock, what the light is doing, and the
   two buttons that are the pilot's only say in it. Laid out as clock | prose | actions so the
   time reads as an instrument and the rest as a briefing note. */
.conditions { display: flex; gap: 16px; align-items: center; background: #1f251f; border: 1px solid #364232;
  border-radius: 4px; padding: 10px 14px; }
.cond-clock { font: bold 30px/1 monospace; color: #cfe8b4; letter-spacing: 1px; }
.cond-clock small { display: block; font: 11px/1.6 inherit; color: #8fa483; letter-spacing: 2px; font-weight: normal; }
.cond-lines { flex: 1; min-width: 0; }
.cond-lines b { color: #e6eeda; font-size: 15px; }
.cond-lines div { font-size: 13px; color: #b3bda9; }
.cond-acts { display: flex; flex-direction: column; gap: 6px; }
.cond-acts button { white-space: nowrap; }

/* The cockpit-hands cursor: a ring where the finger is, and what it is on. The pointer is
   locked while flying, so this is the only cursor there is — see Hud.hands(). */
#hud-hands { position: fixed; transform: translate(-50%, -50%); pointer-events: none; }
#hud-hands .ring { width: 20px; height: 20px; margin: 0 auto; border-radius: 50%; border: 2px solid rgba(255, 245, 200, .55); box-shadow: 0 0 6px rgba(0,0,0,.6); }
#hud-hands.on .ring { border-color: #ffd070; width: 26px; height: 26px; box-shadow: 0 0 10px rgba(255, 208, 112, .6); }
#hud-hands .cap { margin-top: 8px; white-space: nowrap; transform: translateX(-50%); margin-left: 50%; font-size: 13px; color: #fff3c8; text-shadow: 0 1px 3px #000; }

/* Squadron office and the flight picker. See ui/squadron.ts. */
.sq-panel { max-width: 1240px; }
.sq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.sq-head h2 { margin: 0; }
input.text.sq-name-input { background: none; border: none; border-bottom: 1px dashed var(--ui-line-2); color: var(--ui-text); font: 700 30px/1.1 var(--ui-display); letter-spacing: 1.5px; text-transform: uppercase; padding: 0 2px; width: min(460px, 90vw); }
input.text.sq-name-input:focus { outline: none; border-bottom-color: var(--ui-accent); }
.sq-motto { margin: 4px 0 8px; font-style: italic; }
.sq-summary { display: flex; gap: 18px; }
.sq-summary div { text-align: center; min-width: 64px; }
.sq-summary b { display: block; font-size: 22px; color: #e8e6dc; font-variant-numeric: tabular-nums; }
.sq-summary small { color: #8fa483; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.sq-you-label input.sq-me-input { background: none; border: none; border-bottom: 1px dashed #56684f; color: #e8e6dc; font: inherit; padding: 0 2px; width: 200px; }
.sq-you-label input.sq-me-input:focus { outline: none; border-bottom-color: #ffd45a; }
.sq-tablewrap { max-height: 46vh; overflow: auto; border: 1px solid #263024; border-radius: 4px; }
table.sq-table td.sq-name small { color: #7f8f76; }
table.sq-table tr.sq-you td { background: rgba(255, 212, 90, 0.06); }
table.sq-table tr.sq-off td { opacity: .55; }
table.sq-table td.sq-gradecell { min-width: 120px; }
.item .sq-grade { display: inline; }
.sq-grade { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.sq-grade-rookie { color: #9fb6e8; }
.sq-grade-regular { color: #cfe8b4; }
.sq-grade-veteran { color: #e8d07a; }
.sq-grade-ace { color: #ff9d5a; }
.sq-grade-leader { color: #ffd45a; }
.sq-xp { display: block; height: 3px; margin-top: 4px; background: #263024; border-radius: 2px; overflow: hidden; width: 110px; }
.sq-xp span { display: block; height: 100%; background: #9fb04a; }
.sq-status { white-space: nowrap; }
.sq-status-wounded, .sq-off-note { color: #e8d07a; }
.sq-status-missing { color: #ff9d8e; }
.sq-fat-0 { color: #cfe8b4; } .sq-fat-1 { color: #b3bda9; } .sq-fat-2 { color: #e8d07a; } .sq-fat-3 { color: #ff8a6a; }
.sq-awards { white-space: nowrap; }
/* Ribbons are painted inline from the catalogue's stripes (sim/squadron/awards.ts); the tier sets the frame. */
.sq-ribbon { position: relative; display: inline-block; width: 14px; height: 8px; margin: 0 2px 0 0; border-radius: 1px; vertical-align: middle; background: #6b7d2a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); font-style: normal; }
.sq-ribbon.tier-order { box-shadow: inset 0 0 0 1px #ffd45a; }
.sq-ribbon.tier-cross { box-shadow: inset 0 0 0 1px #e8e6dc; }
.sq-ribbon.tier-unit { box-shadow: inset 0 0 0 1px #ffd45a, 0 0 4px rgba(255, 212, 90, .45); }
.sq-ribbon.has-bars:not(.big)::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: #ffd45a; border-radius: 50%; }
.sq-ribbon.big { width: 42px; height: 14px; margin: 0; flex: none; text-align: center; }
.sq-ribbon.big b { font-size: 9px; line-height: 14px; color: #ffd45a; text-shadow: 0 0 2px #000, 0 0 2px #000; letter-spacing: 1px; }
.sq-more { color: #8fa483; font-size: 11px; margin-left: 2px; }
.sq-trait { display: inline-block; font-size: 11px; padding: 0 5px; margin: 0 4px 2px 0; border: 1px solid #56684f; border-radius: 3px; color: #cfe8b4; white-space: nowrap; }
.sq-trait.flaw { border-color: #8a5a4a; color: #e8b49f; }
table.sq-table td.sq-traits { min-width: 120px; }
table.sq-table tr.sq-row, .sq-honour-row[data-id] { cursor: pointer; }
table.sq-table tr.sq-row:hover td { background: rgba(207, 232, 180, 0.05); }
.sq-meter { display: inline-block; width: 90px; height: 5px; background: #263024; border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.sq-meter span { display: block; height: 100%; background: #9fb04a; }
.sq-standing { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.sq-chip { border: 1px solid #263024; border-radius: 4px; padding: 6px 10px; min-width: 150px; }
.sq-chip small { display: block; color: #8fa483; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.sq-chip b { color: #e8e6dc; font-size: 14px; }
.sq-chip.sq-colours { flex: 1 1 220px; }
.sq-chip em { color: #7f8f76; font-size: 12px; }
.sq-morale.good .sq-meter span { background: #7fd4a0; }
.sq-morale.bad .sq-meter span { background: #ff8a6a; }
.sq-morale.bad b { color: #ff9d8e; }
.sq-pair { color: #ffd45a; font-style: normal; }
/* The service record. See ui/pilotrecord.ts. */
.pr-stats { flex-wrap: wrap; margin: 8px 0; }
.pr-chips { margin: 2px 0 6px; }
.pr-honour { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid #263024; }
.pr-honour .sq-ribbon { margin-top: 3px; }
.pr-honour b { display: block; color: #e8e6dc; }
.pr-honour .pr-bars { color: #ffd45a; font-weight: 600; }
.pr-honour span { font-size: 12px; color: #8fa483; }
.pr-traits div, .pr-bonds div { padding: 3px 0; font-size: 13px; }
.pr-traits div span:last-child, .pr-bonds span { color: #b3bda9; margin-left: 6px; }
.pr-bonds div.gone { opacity: .6; }
.pr-bonds em { color: #ffd45a; font-style: normal; }
.pr-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; font-size: 13px; }
.pr-feats b { display: inline-block; min-width: 26px; color: #e8e6dc; font-variant-numeric: tabular-nums; }
.pr-feats span { color: #b3bda9; }
/* The honours board. See ui/honoursboard.ts. */
.hb-standing { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 16px; border: 1px solid #263024; border-radius: 4px; padding: 10px 14px; margin: 6px 0 4px; }
.hb-standing small { display: block; color: #8fa483; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.hb-standing b { color: #e8e6dc; font-size: 18px; }
.hb-standing b.hb-rep { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.hb-standing .sub, .hb-standing .hint { display: block; margin: 4px 0 0; }
.hb-standing .sq-meter { width: 160px; }
.hb-ladder { margin: 0; padding-left: 18px; font-size: 12px; color: #7f8f76; }
.hb-ladder li b { font-size: 12px; color: inherit; font-weight: 600; }
.hb-ladder li span { margin-left: 6px; font-variant-numeric: tabular-nums; }
.hb-ladder li.past { color: #b3bda9; }
.hb-ladder li.now { color: #ffd45a; }
.hb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.hb-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #232c22; border-radius: 4px; padding: 8px 10px; opacity: .6; }
.hb-card.held { opacity: 1; border-color: #56684f; background: rgba(207, 232, 180, 0.03); }
.hb-card .sq-ribbon { margin-top: 3px; }
.hb-body { flex: 1; min-width: 0; }
.hb-body b { display: block; color: #e8e6dc; }
.hb-body span { display: block; font-size: 12px; color: #b3bda9; }
.hb-body em { display: block; font-size: 12px; color: #c9b45a; font-style: normal; margin-top: 2px; }
.hb-card:not(.held) .hb-body em { color: #7f8f76; }
.hb-prestige { color: #8fa483; font-size: 11px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .hb-standing { grid-template-columns: 1fr; } }
/* Command, strain and requests to Group. See sim/squadron/command.ts and stress.ts. */
.sq-role { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .5px; padding: 0 4px; border-radius: 2px; background: #ffd45a; color: #1a1f16; vertical-align: middle; }
.sq-strain { font-size: 11px; white-space: nowrap; }
.sq-strain.s1 { color: #b3bda9; }
.sq-strain.s2 { color: #e8d07a; }
.sq-strain.s3 { color: #ff8a6a; font-weight: 600; }
.sq-strain.tour { color: #9fb6e8; }
.sq-status-leave { color: #9fb6e8; }
.gr-panel { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border: 1px solid #263024; border-radius: 4px; padding: 6px 10px; margin: 0 0 10px; }
.gr-favour small { display: block; color: #8fa483; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.gr-favour b { color: #e8e6dc; font-variant-numeric: tabular-nums; }
.gr-buttons, .pr-orders { display: flex; gap: 6px; flex-wrap: wrap; }
button.gr-req, button.pr-order { font-size: 12px; padding: 4px 10px; }
button.gr-req small { opacity: .7; margin-left: 6px; }
button.gr-req:disabled, button.pr-order:disabled { opacity: .45; cursor: not-allowed; }
.pr-orders { margin-bottom: 6px; }
.sq-alert { color: #9fb6e8; font-size: 13px; margin: 0 0 8px; }
/* Biography, letter home, logbook and the records screen. See ui/pilotrecord.ts, logbookview.ts, squadronrecords.ts. */
.pr-bio { color: #b3bda9; font-size: 13px; margin: 2px 0 6px; }
.pr-bio em { display: block; color: #8fa483; margin-top: 2px; }
.pr-letter { background: #e8e2cf; color: #2a2a22; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; line-height: 1.5; padding: 12px 16px; border-radius: 2px; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.pr-letter p { margin: 0 0 8px; }
.pr-letter p:last-child { margin: 12px 0 0; font-style: italic; }
.lb-wrap { max-height: 32vh; overflow: auto; border: 1px solid #263024; border-radius: 4px; }
table.lb-table { font-size: 12px; }
table.lb-table tr.bad td { color: #ff9d8e; }
.sr-totals { flex-wrap: wrap; margin: 8px 0; }
.sr-table td:first-child { color: #8fa483; }
.sr-list div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid #232c22; font-size: 13px; }
.sr-list b { color: #e8e6dc; font-weight: 600; }
.sr-list span { color: #b3bda9; font-variant-numeric: tabular-nums; }
.sq-lower { margin-top: 8px; }
.sq-col { flex: 1 1 0; min-width: 0; }
.sq-honour-row { padding: 6px 0; border-bottom: 1px solid #263024; }
.sq-honour-row b { display: block; color: #e8e6dc; }
.sq-honour-row span { font-size: 12px; color: #8fa483; }
.sq-log { max-height: 30vh; overflow: auto; font-size: 13px; }
.sq-log div { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px solid #232c22; }
.sq-log em { flex: 0 0 110px; color: #8fa483; font-style: normal; font-variant-numeric: tabular-nums; }
.sq-log span { color: #b3bda9; }
ul.sq-news { margin: 4px 0 10px; padding-left: 18px; color: #c9b45a; font-size: 13px; }
ul.sq-news li { margin: 2px 0; }
/* The picker cards on the mission board. */
/* An even grid, not a wrapping flex row: every card the same width and every row the same height,
   so a short last row does not stretch its cards out wider than the ones above. */
.list.grid.sq-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.sq-picker .sq-card, .sq-picker .sq-office { max-width: none; display: flex; flex-direction: column; min-width: 0; }
.sq-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sq-card-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-card-top em.sq-slot { display: inline; margin: 0; color: #ffd45a; font-weight: 700; font-size: 12px; flex: none; }
/* One line each: the grade and tally, then name, hours, state and ribbons. The generic
   `.item span { display: block }` would otherwise drop the fatigue word onto a line of its own. */
.sq-card > span, .sq-card > em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-card > em span { display: inline; margin: 0; }
.sq-card .sq-ribbon { margin-left: 4px; }
.sq-picker .sq-office b { color: #ffd45a; font-size: 14px; }
#flight-note.bad { color: #ff9d8e; }

/* A decided war. Used on the debrief that ends one, on its epilogue screen, and
   as a badge on the splash screen's list of saves. */
.warend { letter-spacing: 0.06em; }
.warend.won { color: #7fd4a0; }
.warend.lost { color: #ff9d8e; }
.save-main b .warend {
  font-size: 0.72em; font-weight: 700; padding: 1px 6px; margin-left: 6px;
  border: 1px solid currentColor; border-radius: 3px; vertical-align: middle;
}

/* Authored mission library and briefing. */
.mission-library { width: min(760px, 92vw); }
.mission-library .menu-stack { width: 100%; margin: 20px 0; }
.mission-library .menu-stack button { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.mission-library .menu-stack button small { white-space: normal; line-height: 1.45; }
.mission-library p, .mission-library li { line-height: 1.6; }
.mission-library li { margin-bottom: 8px; }
.mission-library.campaign-library { width: min(960px, 92vw); max-width: 960px; }
.campaign-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 18px; }
.campaign-tools label { font-family: var(--ui-display); font-size: 14px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--ui-accent); }
.campaign-tools input { flex: 1 1 260px; min-width: 0; padding: 9px 12px; background: rgba(6, 8, 7, .7);
  color: var(--ui-text); border: 1px solid var(--ui-line-2); font: 500 15px var(--ui-body); }
.campaign-tools input:focus { outline: none; border-color: var(--ui-accent); }
.campaign-tools > span { margin-left: auto; color: var(--ui-muted); font-size: 13px; white-space: nowrap; }
.campaign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px;
  align-content: start; max-height: min(56vh, 520px); overflow-y: auto; padding-right: 5px; margin: 14px 0 18px; }
.campaign-choice { display: flex; flex-direction: column; gap: 7px; width: 100%; min-width: 0; min-height: 94px;
  padding: 11px 14px; text-align: left; font-size: 16px; }
.campaign-choice[hidden] { display: none; }
.campaign-choice-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; }
.campaign-choice-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-choice-head span { flex: none; color: var(--ui-accent); font: 700 13px var(--ui-body); letter-spacing: 0; }
.campaign-choice small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  color: var(--ui-muted); font: 500 13px/1.35 var(--ui-body); letter-spacing: 0; text-transform: none; }
.quick-action-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 26px 0 18px; }
.quick-action-form label.field { min-width: 0; }
.quick-action-form label.field small { color: #8fa483; font-family: var(--ui-body); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.quick-action-form select, .quick-action-form input[type=number] { margin-top: 3px; padding: 10px 12px; font-size: 16px; }
.quick-action-form .quick-team { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--ui-line-2); }
.quick-action-form .quick-team legend { padding: 0 7px; color: var(--ui-accent); font-family: var(--ui-display); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.quick-aircraft-list { display: flex; flex-direction: column; gap: 10px; }
.quick-aircraft-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(82px, 1fr) auto; gap: 10px; align-items: end; }
.quick-aircraft-row .quick-remove, .quick-team-footer .quick-add { min-height: 42px; padding: 8px 10px; font-size: 12px; }
.quick-team-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.quick-team-footer small { color: #8fa483; font-size: 12px; white-space: nowrap; }
.quick-team-footer small.bad, .quick-error { color: #ff9d8e; }
.quick-error:empty { display: none; }
.quick-environment { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) {
  .quick-action-form { grid-template-columns: 1fr; }
  .quick-environment { grid-column: auto; grid-template-columns: 1fr; }
  .quick-aircraft-row { grid-template-columns: minmax(0, 2fr) minmax(78px, 1fr); }
  .quick-aircraft-row .quick-remove { grid-column: 1 / -1; }
}

#mission-target-markers { position: absolute; inset: 0; pointer-events: none; }
/* Wordless objective cue: a diamond on the target, an arrow at the edge of the
   screen when it is off to one side. No range, bearing or name — see missions/markers.ts. */
.mission-target-marker { position: absolute; color: #ffdc77; opacity: .85;
  text-shadow: 0 1px 3px #000, 0 0 4px #000; }
.mission-target-symbol { display: block; position: absolute; left: -9px; top: -12px;
  width: 18px; text-align: center; font: 18px/1 system-ui, sans-serif; }
.mission-target-marker[data-edge="true"] .mission-target-symbol { font-size: 15px; }
/* The way into the headset. Above the menus, because entering VR from the hangar is the usual way in. */
#vr-enter { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 30; padding: 8px 16px; font: inherit;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #e8ecd8; background: #2a3a26;
  border: 1px solid #6f8a5a; border-radius: 3px; cursor: pointer; }
#vr-enter:hover { background: #3a5034; }
#vr-enter[hidden] { display: none; }

/* Smaller viewports keep the instruments at the edges and preserve the aiming area. */
@media (max-width: 1100px) {
  #hud-flight { left: 16px; top: 16px; width: 270px; padding: 13px 15px; }
  .flight-primary strong { font-size: 29px; }
  #hud-mission, #authored-mission-hud { right: 16px; top: 16px; width: 260px; padding: 13px 15px; }
  #hud-msgs { top: 16px; width: calc(100vw - 580px); font-size: 11px; }
  #hud-weapons { left: 16px; bottom: 16px; min-width: 230px; max-width: 34vw; padding: 13px 15px; }
  #hud-mini { right: 16px; bottom: 16px; width: 152px; height: 152px; }
  #hud-mini canvas { width: 150px; height: 150px; }
  #hud-tactical { right: 16px; bottom: 16px; width: 152px; gap: 12px; }
  #hud-radar { right: 184px; bottom: 16px; }
  #hud-ils { right: 184px; bottom: 184px; }
  #hud-wing { right: 16px; bottom: 250px; width: 220px; padding: 12px; }
  #hud.scripted-flight #hud-mission { right: 16px; bottom: 182px; width: 220px; }
  #hud-damage { right: 184px; font-size: 9px; }
}
@media (max-height: 700px) {
  #hud-flight { font-size: 11px; }
  #hud-wing { bottom: 240px; padding: 9px 12px; }
  #hud-wing .wing-row { font-size: 10px; }
  #hud-sonar { left: 350px; bottom: 24px; }
  #hud-warn { bottom: 28%; }
  #hud.debug-details #hud-damage { max-height: 45vh; overflow-y: auto; pointer-events: auto; scrollbar-width: thin; }
}
@media (max-width: 760px) {
  #hud-flight { left: 10px; top: 10px; width: 230px; padding: 10px 12px; }
  #hud-mission, #authored-mission-hud { right: 10px; top: 10px; width: 220px; font-size: 11px; padding: 10px 12px; }
  .flight-primary { gap: 10px; }
  .flight-primary > div + div { padding-left: 10px; }
  .flight-primary strong { font-size: 25px; }
  .flight-secondary { gap: 6px; }
  .flight-secondary b { font-size: 12px; }
  #hud-msgs { top: auto; bottom: 190px; width: min(76vw, 440px); }
  #hud-weapons { max-width: 46vw; min-width: 200px; font-size: 11px; }
  #hud-weapons .sel { font-size: 14px; }
  #hud-mini { width: 128px; height: 128px; }
  #hud-mini canvas { width: 126px; height: 126px; }
  #hud-tactical { width: 128px; gap: 10px; }
  #hud.scripted-flight #hud-tactical > #hud-mission { padding: 9px; font-size: 10px; }
  #hud-wing { bottom: 240px; width: 180px; }
  #hud-radar { right: 156px; width: 126px; height: 126px; }
  #hud-radar canvas { width: 124px; height: 124px; }
  #hud-ils { right: 156px; bottom: 158px; width: 102px; height: 102px; }
  #hud-ils canvas { width: 100px; height: 100px; }
  #hud-sonar { left: 16px; bottom: 190px; }
  #hud-warn { bottom: 170px; width: 90vw; }
  #hud-debug { bottom: 150px; font-size: 9px; }
}
#airflow-diagnostics {
  position: fixed; right: 16px; top: 64px; z-index: 10000;
  width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 90px);
  overflow: auto; box-sizing: border-box; padding: 14px 16px;
  color: #edf4fa; background: #08131fee; border: 1px solid #537480;
  border-radius: 7px; font: 11px/1.6 monospace; pointer-events: auto; scrollbar-width: thin;
}
#airflow-diagnostics[hidden] { display: none; }
#airflow-diagnostics header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#airflow-diagnostics header b { font-size: 12px; letter-spacing: 1px; }
#airflow-diagnostics header span, #airflow-diagnostics footer, .airflow-trace-label { color: #9bafbd; font-size: 10px; }
#airflow-diagnostics h4 { margin: 12px 0 3px; color: #b6cad7; font-size: 10px; font-weight: normal; text-transform: uppercase; letter-spacing: 0.4px; }
#airflow-diagnostics .airflow-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 12px; }
#airflow-diagnostics .airflow-up { color: #58ebcb; }
#airflow-diagnostics .airflow-down { color: #ff7186; }
#airflow-diagnostics .airflow-chop { color: #ffc66d; }
#airflow-diagnostics .airflow-primary { display: flex; justify-content: space-between; align-items: baseline; }
#airflow-diagnostics .airflow-primary strong { font-size: 19px; }
#airflow-diagnostics .airflow-sources { display: grid; grid-template-columns: 1fr; gap: 3px; }
#airflow-diagnostics .airflow-sources span { display: flex; justify-content: space-between; gap: 4px; }
#airflow-diagnostics table { width: 100%; border-collapse: collapse; }
#airflow-diagnostics th, #airflow-diagnostics td { text-align: right; padding: 2px 0; }
#airflow-diagnostics th { color: #91a9b9; font-weight: normal; }
#airflow-diagnostics th:first-child, #airflow-diagnostics td:first-child { text-align: left; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#airflow-diagnostics footer { margin-top: 9px; }
#airflow-diagnostics .airflow-trace-label { margin-top: 12px; }
#airflow-diagnostics svg { display: block; width: 100%; height: 48px; margin-top: 4px; background: #172532; }
@media (max-width: 700px) {
  #airflow-diagnostics { top: 50px; right: 8px; padding: 9px 11px; width: 290px; max-height: calc(100vh - 110px); }
}