:root {
  --bg: #0f1418;
  --panel: #171e24;
  --panel-2: #1e272e;
  --line: #2b363f;
  --text: #d8e0e6;
  --muted: #8ba0ad;
  --accent: #4bb3fd;
  --accent-2: #7ee787;
  --warn: #ffb454;
  --danger: #ff6b6b;
  --cyan: #4dd0d0;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.topbar .brand {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #fff;
}
.menu-wrap { position: relative; }
.hamb { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 8px; font-size: 18px; line-height: 1; padding: 5px 10px; cursor: pointer; }
.main-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 170px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.45); padding: 6px; display: flex; flex-direction: column; z-index: 50; }
.main-menu[hidden] { display: none; }
.main-menu a { color: var(--text); padding: 10px 14px; border-radius: 6px; }
.main-menu a:hover { background: var(--panel-2); text-decoration: none; }
/* live shell: the flight tabs live in the top bar */
header.topbar .fl-tabs { margin: 0; flex: 1; min-width: 0; gap: 4px; flex-wrap: wrap; }
header.topbar .fl-tabs a { padding: 4px 10px; font-size: 13px; }
header.topbar:has(.fl-tabs) { padding: 6px 12px; gap: 12px; position: static; }
header.topbar:has(.fl-tabs) .brand { font-size: 13px; white-space: nowrap; flex: none; }

main { max-width: 1360px; margin: 0 auto; padding: 24px; }

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 28px 0 10px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.flash.ok { background: #16321f; border: 1px solid #2f6b40; color: var(--accent-2); }
.flash.error { background: #3a1d1d; border: 1px solid #7a3636; color: var(--danger); }

/* upload */
form.upload {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
input[type=file] {
  color: var(--muted);
  background: var(--panel-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px;
}
button, .btn {
  background: var(--accent);
  color: #04121d;
  border: 0;
  border-radius: 8px;
  padding: 9px 18px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
button:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }

/* generic tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
tbody tr:hover { background: var(--panel-2); }

.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 26px; }
.kv .item .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.kv .item .value { font-family: var(--mono); font-size: 14px; }

.route-strip {
  font-family: var(--mono);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--accent-2);
  word-spacing: 2px;
  font-size: 13px;
}

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--mono);
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
}
.pill.blue { color: var(--accent); border-color: #2b5674; }
.pill.green { color: var(--accent-2); border-color: #2f6b40; }
.pill.warn { color: var(--warn); border-color: #7a5a2f; }
.pill.red { color: var(--danger); border-color: #7a3636; }
.pill.cyan { color: var(--cyan); border-color: #256b6b; }

/* waypoint table */
.fir-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 22px 0 6px;
  padding: 6px 10px;
  background: linear-gradient(90deg, var(--panel-2), transparent);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.fir-head .fir-name { font-weight: 700; font-size: 14px; letter-spacing: 0.5px; }
.fir-head .fir-icao { font-family: var(--mono); color: var(--muted); }

table.wp { font-family: var(--mono); font-size: 13px; }
table.wp th { font-family: -apple-system, sans-serif; }
table.wp td { border-bottom: 1px solid #222c33; padding: 5px 9px; white-space: nowrap; }
table.wp tr.wp-row { cursor: pointer; }
table.wp tr.wp-row:hover { background: var(--panel-2); }
table.wp tr.wp-row.boundary td { background: #182430; }
table.wp .ident { font-weight: 700; color: #fff; }
table.wp .fn { color: var(--warn); font-size: 11px; }
table.wp .muted { color: var(--muted); }
.wp-detail td { background: var(--panel); white-space: normal; }
.wp-detail .kv { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.wp-detail.hidden { display: none; }
.caret { display: inline-block; width: 12px; color: var(--muted); }

.subtable { margin-top: 8px; }
.subtable th, .subtable td { padding: 4px 8px; font-size: 12px; }

/* notam cards */
.notam {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--panel);
}
.notam .n-head {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 10px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.notam .n-num { font-family: var(--mono); font-weight: 700; color: #fff; }
.notam .n-body { padding: 12px 14px; }
.notam .n-text { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; color: #cdd8df; }
.notam .n-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.notam.expired { opacity: 0.55; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
input[type=text], input[type=password], .filters select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.tabs { display: flex; gap: 6px; }
.tabs a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
.tabs a.active { background: var(--accent); color: #04121d; border-color: var(--accent); }

.muted { color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
small.hint { color: var(--muted); }
.mono { font-family: var(--mono); }

/* NOTAM quick filters */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  background: var(--panel-2); font-size: 13px;
}
.chip:hover { color: var(--text); text-decoration: none; border-color: #3a4650; }
.chip.on { background: var(--accent); color: #04121d; border-color: var(--accent); font-weight: 600; }
.chip s { text-decoration: none; opacity: .6; font-size: 11px; font-family: var(--mono); }
.chip.on s { opacity: .8; }
.chip.sm { padding: 3px 9px; font-size: 12px; }
.chip.sm.on { background: var(--accent-2); color: #04121d; border-color: var(--accent-2); }
.chip.sm.alt.on { background: var(--warn); border-color: var(--warn); }

.lvl2 { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -6px 0 16px; }
.lvl2-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-left: 6px; }

.btn.sm { padding: 4px 12px; font-size: 12px; }
.btn.sm[disabled] { opacity: .4; cursor: not-allowed; }

.notam.downgraded { opacity: .5; }
.notam.downgraded:hover { opacity: .85; }
.n-downgrade {
  padding: 6px 14px; font-size: 12px;
  background: #2c2417; border-bottom: 1px solid var(--line); color: var(--warn);
}
.n-summary { color: var(--accent-2); font-size: 14px; font-weight: 600; }
.n-more { margin-top: 8px; }
.n-more > summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.n-explanation { margin: 10px 0; padding: 10px 12px; background: var(--panel-2); border-radius: 8px; font-size: 13px; white-space: pre-wrap; }
.n-meta { align-items: center; }

.notam.highlighted { border-color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }
.notam.is-hidden { opacity: .6; }
.unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 2px; }
.ico { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 6px;
  width: 24px; height: 24px; padding: 0; font-size: 13px; cursor: pointer; line-height: 1; }
.ico:hover { color: #fff; }
.ico.star.on { color: var(--warn); border-color: var(--warn); }
.hidden-box { margin-top: 16px; }
.hidden-box > summary { color: var(--muted); cursor: pointer; padding: 6px 0; font-size: 13px; }
.chip.sm.ghost { border-style: dashed; }
.chip .chip-ident { color: #fff; }
/* ETOPS suitable-alternate chip, prepended to a waypoint's enroute airports —
   cyan frame + ident text; a per-airport border-left (FltCat colour, inline
   style) still overrides the left edge, so both signals stay visible */
.chip.etops-alt { border-color: var(--cyan); }
.chip.etops-alt .chip-ident { color: var(--cyan); }
.warn { color: var(--warn); }
.rwy-row { margin-top: -4px; }

/* ============================ FLIGHT PAGE ============================ */
.fl-tabs { display: flex; gap: 6px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.fl-tabs a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
.fl-tabs a.active { background: var(--accent); color: #04121d; border-color: var(--accent); font-weight: 600; }
.fl-tabs .btn.sm { padding: 5px 10px; font-size: 12px; }

.sync { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.sync.ok { color: var(--accent-2); border-color: #2f6b40; }
.sync.busy { color: var(--muted); }
.sync.off { color: var(--warn); border-color: #7a5a2f; background: #2c2417; }
#handoff-btn.stale { border-color: var(--warn); color: var(--warn); }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px; font-family: var(--mono);
}
.badge.green { background: #16321f; color: var(--accent-2); border: 1px solid #2f6b40; }
.badge.amber { background: #33280f; color: var(--warn); border: 1px solid #7a5a2f; }

/* hero */
.hero {
  position: relative;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 22px; margin-bottom: 14px;
}
.hero-tools { position: absolute; top: 10px; right: 14px; display: flex; align-items: center; gap: 6px; }
.hero-collapse {
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer;
}
.badge.white { background: var(--panel-2); color: #fff; border: 1px solid var(--line); }

.hero-titlerow { display: flex; align-items: baseline; gap: 26px; padding-right: 120px; }
.fnum { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: 1px; }
.fnum .sub { color: var(--muted); font-weight: 500; font-size: 15px; margin-left: 8px; }
.acft { font-size: 16px; font-weight: 700; color: var(--text); font-family: var(--mono); }
.acft .sub { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 6px; }

.routeline { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 18px; align-items: start; margin: 14px 0 4px; }
.routeline .ap .icao { font-size: 52px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: 2px; }
.routeline .dest { text-align: right; }
.routeline .ap .sched { margin-top: 6px; font-size: 13px; color: var(--muted); }
.routeline .ap .sched b { color: var(--text); font-family: var(--mono); }
.routeline .ap .actual { font-size: 13px; color: var(--muted); font-family: var(--mono); }
.routeline .ap .actual b { color: #fff; }
.routeline .mid { text-align: center; padding-top: 12px; color: var(--muted); }
.routeline .mid .triptime { font-size: 18px; color: var(--text); font-family: var(--mono); }
.routeline .mid .triptime .sub { color: var(--muted); font-size: 13px; margin-left: 6px; }
.routeline .mid .gcd { font-size: 12px; }
.routeline .mid .arrow { color: var(--line); letter-spacing: -1px; margin-top: 2px; }
.routeline .alts {
  text-align: right; font-family: var(--mono); font-size: 13px; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 14px; min-width: 62px;
}
.routeline .alts div { line-height: 1.7; }
.routeline .alts .primary { color: #fff; font-weight: 700; font-size: 15px; }

.delay { font-family: var(--mono); font-size: 12px; margin-left: 4px; }
.delay.late, .count.warn, .eta-rev.late, .fuel-diff.late, .diff.short { color: var(--warn); }
.delay.early, .eta-rev.early, .fuel-diff.early { color: var(--accent-2); }
.count { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: 4px; }
.fuel-diff.draft, .diff.over { color: var(--muted); }
.bad-red { color: var(--danger) !important; }
.bad-amber { color: var(--warn) !important; }

.hero-detail { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.hero-detail .col { min-width: 220px; }
.hero-detail h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 0 8px; display: flex; justify-content: space-between; }
.hero-detail h3 .cols, .pf-card h3 .cols { display: flex; gap: 0; }
.hero-detail h3 .cols span, .pf-card h3 .cols span { width: 62px; text-align: right; }

/* fuel block: label | kg | time */
.fuelblock { font-family: var(--mono); font-size: 13px; min-width: 320px; }
.fgrid { display: grid; grid-template-columns: 1fr 72px 62px; gap: 1px 4px; align-items: center; }
.fgrid.box { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 6px 0; background: var(--panel-2); }
.fgrid .frow { display: contents; }
.fgrid .frow > span:first-child { color: var(--muted); padding: 2px 0; }
.fgrid .fval { text-align: right; color: var(--text); }
.fgrid .fval b { color: var(--text); }
.fgrid .ftime { text-align: right; color: var(--muted); font-size: 11px; }
.fgrid .extra .fval b { color: var(--warn); }
.fgrid .sub span { font-size: 10.5px; }
#block-fuel, #zfw-input {
  width: 68px; padding: 4px 6px; text-align: right; border-radius: 5px;
  background: var(--bg); color: #fff; font-family: var(--mono); font-size: 13px;
  border: 2px solid var(--warn);
}
#block-fuel.user-set, #zfw-input.user-set { border-color: var(--accent-2); }
#zfw-input.bad-red { border-color: var(--danger) !important; }
.fgrid .diff { font-size: 11px; margin-left: 5px; }

/* weights */
.wgrid { font-family: var(--mono); font-size: 13px; }
.wgrid > div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; align-items: center; }
.wgrid > div span { color: var(--muted); }
.wgrid > div b { color: var(--text); font-weight: 500; }
.wgrid .w-in input { width: 62px; }

/* sticky bar */
.herobar {
  position: sticky; top: 0; z-index: 20;
  display: none; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 14px; margin-bottom: 12px; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
}
.herobar.show { display: flex; }
.herobar b { color: #fff; }
.herobar .hb-route { color: #fff; font-weight: 700; }
.herobar #hb-jump { cursor: pointer; }
body.hero-collapsed .hero-detail { display: none; }
body.hero-collapsed .routeline { margin-top: 8px; }
body.hero-collapsed .routeline .ap .icao { font-size: 38px; }

/* departure line */
.depline { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.tinput {
  width: 62px; padding: 5px 6px; text-align: center; border-radius: 6px;
  background: var(--panel-2); color: #fff; border: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px;
}
.tinput.bad, .finput.bad, .navlog input.bad {
  border: 2px solid var(--danger); color: var(--danger); background: #2a1616;
}

.fl-tabs.alt-tabs a.active.alt { background: var(--warn); border-color: var(--warn); color: #04121d; }

/* navlog — 4 group columns (Wpt·VIA / Leg·°M·FL / ETA·ATA / Req·Act) so the
   pairs stay tight while the table distributes slack BETWEEN the groups */
.navlog-wrap { padding: 8px; overflow-x: auto; }
table.navlog { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
table.navlog thead th { font-family: -apple-system, sans-serif; font-size: 11px; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.navlog thead th .sub { color: #5a6b78; }
table.navlog th.r, table.navlog td.r { text-align: right; }
table.navlog td { padding: 4px 6px; border-bottom: 1px solid #222c33; white-space: nowrap; vertical-align: middle; }

table.navlog .c-caret { width: 22px; padding-right: 0; }
/* the 4 real groups take their content width; 3 equal-width spacer columns
   split the leftover space evenly so every between-group gap is the same */
table.navlog .c-wpt, table.navlog .c-nav, table.navlog .c-time, table.navlog .c-fuel { width: 1px; }
table.navlog .sp { width: 33.3%; padding: 0; border-bottom: 1px solid #222c33; min-width: 12px; }
table.navlog .c-fuel { padding-right: 14px; }

.navlog .c-wpt .wpt-main { display: flex; align-items: baseline; gap: 14px; }
.navlog .c-wpt .via { color: var(--muted); font-size: 12px; }
.navlog .c-nav > span { display: inline-block; text-align: right; }
.navlog .c-nav .leg { min-width: 26px; }
.navlog .c-nav .trk { min-width: 40px; }
.navlog .c-nav .fl-val { min-width: 46px; }
.navlog .c-time .eta-cell { display: inline-block; min-width: 44px; text-align: right; margin-right: 14px; }
.navlog .c-fuel .fuel-plan { display: inline-block; min-width: 40px; text-align: right; margin-right: 14px; color: var(--text); }

table.navlog tr.wp-row { cursor: pointer; }
table.navlog tr.wp-row:hover { background: var(--panel-2); }
table.navlog tr.wp-row.current { background: #14263a; }
table.navlog tr.wp-row.fuel-stale .actfuel { border-color: var(--warn); }
/* box-shadow on a <tr> is unreliable across browsers — table rows don't
   reliably get their own painted box for it, even though it computes fine
   — so the accent border lives on the row's first real cell instead, where
   box-shadow paints correctly like on any other element */
table.navlog tr.wp-row.current td:first-child { box-shadow: inset 3px 0 0 #fff; }
/* high terrain (MSA > FL100) — deliberately subtle, and layered underneath
   .current's own highlight (a faint background wash backs up the border) */
/* same treatment reused for the tropopause-crossing flag — different
   condition, same "worth a glance before expanding" visual language */
table.navlog tr.wp-row.high-terrain, table.navlog tr.wp-row.tropo-cross { background: rgba(255, 180, 84, 0.08); }
table.navlog tr.wp-row.high-terrain:hover, table.navlog tr.wp-row.tropo-cross:hover { background: rgba(255, 180, 84, 0.14); }
table.navlog tr.wp-row.high-terrain td:first-child, table.navlog tr.wp-row.tropo-cross td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
table.navlog tr.wp-row.high-terrain.current td:first-child, table.navlog tr.wp-row.tropo-cross.current td:first-child { box-shadow: inset 3px 0 0 #fff, inset 6px 0 0 var(--warn); }
.di.high-terrain, .det-kv.high-terrain { color: var(--warn); }
.di.high-terrain > span:first-child, .det-kv.high-terrain > .lbl { color: var(--warn); }
/* ETOPS entry/exit/ETP — procedural, not a warning, so cyan rather than amber */
table.navlog tr.wp-row.etops-point { background: rgba(77, 208, 208, 0.08); }
table.navlog tr.wp-row.etops-point:hover { background: rgba(77, 208, 208, 0.14); }
table.navlog tr.wp-row.etops-point td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
table.navlog tr.wp-row.etops-point.current td:first-child { box-shadow: inset 3px 0 0 #fff, inset 6px 0 0 var(--cyan); }
.navlog .etops-badge { color: var(--cyan); font-size: 10px; }
.etops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 20px; }
.etops-grid .ecell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.etops-grid .el { color: var(--muted); font-size: 10px; }
.etops-grid .ev { color: var(--cyan); font-size: 12px; font-weight: 600; min-width: 0; white-space: normal; }

/* pilot's own notes — flight-level (departure/route/arrival/layover) and
   per-waypoint. white-space:normal is deliberate, not decorative: inside
   table.navlog td, the table's own `white-space: nowrap` would otherwise
   cascade in and stop the textarea from wrapping at all (see the identical
   fix on .etops-grid .ev above). */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 16px; }
.note-block > summary { cursor: pointer; color: var(--text); font-size: 13px; padding: 4px 0; list-style-position: outside; }
.note-block[open] > summary { color: var(--accent-2); }
.note-ta {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.5; padding: 10px 12px;
  white-space: pre-wrap; resize: vertical; overflow: hidden;
}
.note-ta::placeholder { color: var(--muted); }
.note-ta:focus { outline: none; border-color: var(--accent); }
.note-status { font-size: 10px; margin-left: 2px; }
.note-status.saving { color: var(--muted); }
.note-status.saved { color: var(--accent-2); }
.note-status.error { color: var(--danger); }
.wp-note .lvl2-label { display: block; margin-left: 0; margin-bottom: 2px; }
.navlog .ident { color: #fff; font-weight: 700; }
.navlog .fn { color: var(--warn); font-size: 10px; }
.navlog .caret { color: var(--muted); }
.navlog .eta-cell { white-space: nowrap; }
.navlog .eta-plan { display: inline-block; }
.navlog .eta-plan.reta { color: var(--accent-2); }
.navlog .eta-plan.is-ata { color: #fff; font-weight: 700; }
.navlog .eta-rev { display: block; font-size: 10.5px; line-height: 1.1; }
.navlog .eta-rev.late { color: var(--warn); }
.navlog .eta-rev.early { color: var(--accent-2); }
.navlog .finput.draft { color: var(--muted); font-style: italic; }
.navlog tr.wp-row.fuel-stale .actfuel { border-color: var(--warn); border-width: 2px; }
.navlog .ata-wrap, .navlog .fuel-wrap { display: inline-flex; align-items: center; gap: 2px; }
.navlog .fuel-wrap { position: relative; padding-right: 34px; }   /* reserve space for the diff */
.navlog .fuel-diff { position: absolute; right: 0; font-size: 11px; width: 30px; text-align: left; }
.navlog .stp {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 4px; width: 18px; height: 22px; padding: 0; font-size: 12px; line-height: 1; cursor: pointer;
}
.navlog .stp:hover { color: #fff; }
.navlog .finput { width: 46px; padding: 4px; text-align: right; border-radius: 5px; background: var(--panel-2); color: #fff; border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; }
.navlog input.ata { width: 62px; padding: 4px 2px; font-size: 13px; letter-spacing: 0; }
/* always laid out (reserves its slot) — shown/hidden via visibility */
.navlog .confirm { background: transparent; border: 1px solid var(--accent-2); color: var(--accent-2);
  border-radius: 4px; width: 20px; height: 22px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
  visibility: hidden; margin-left: 2px; }
.navlog .confirm:hover { background: var(--accent-2); color: #04121d; }
.navlog td.fuel-plan { color: var(--text); }

.fir-notams { font-size: 12px; margin-left: 18px; color: var(--muted); }
.fir-notams .hl { color: var(--warn); }
.fir-head.nofir { border-left-color: var(--line); opacity: .6; min-height: 8px; }

/* waypoint detail: 3 independent blocks that wrap onto their own line, not
   overlap, when the row is too narrow for all three side by side. general
   sizes to its content; env/prog get an explicit width (their content's
   shape is predictable enough to fix it) so a wide viewport doesn't stretch
   them into misaligned whitespace. gap (not padding/margin) keeps every
   block's own edges flush left/right while still spacing them apart. */
.det3 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; padding: 8px 4px 12px; white-space: normal; }
.det3 .det-block { flex: 0 0 auto; }
.det3 .det-block.env { flex-basis: 370px; text-align: left; }
.det3 .det-block.prog { flex-basis: 220px; }
.det3 .det-block h4 { margin: 0 0 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.det3 .dl { font-family: var(--mono); font-size: 12px; color: var(--text); margin-bottom: 6px; }
.det3 .di { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 1px 0; }
.det3 .di > span:first-child { color: var(--muted); }
.det3 .di.rmk { color: var(--warn); }
.det3 .di.rmk > span:first-child { color: var(--warn); text-transform: uppercase; font-size: 10px; }
.det3 .di .amber { color: var(--warn); font-weight: 700; }
.det3 .di .green { color: var(--accent-2); font-weight: 700; }
/* compact label+value, close together, one line — for facts that don't need
   the .di full-width space-between treatment. Named det-kv, not kv, to avoid
   colliding with the unrelated pre-existing .kv (the header stat grid) -
   same class name would have inherited its display:grid and split label
   from value onto separate rows. Gap between a label and ITS OWN value is
   deliberately smaller than the gap between one fact and the next, so the
   pairing reads correctly at a glance. */
.det3 .det-kv { font-size: 12px; white-space: nowrap; margin-bottom: 6px; }
.det3 .det-kv .lbl { color: var(--muted); margin-right: 4px; }
table.pgrid { border-collapse: collapse; font-size: 12px; margin-bottom: 6px; }
table.pgrid th, table.pgrid td { padding: 1px 8px 1px 0; text-align: right; font-weight: 400; }
table.pgrid th { color: var(--muted); font-size: 10px; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
table.pgrid tr th:first-child { text-align: left; }

/* env-grid: FL | wind-abs (fixed 7ch — "056T/48" never needs more or less) |
   wind-rel | shear | OAT/ISA. .env-row is display:contents so its child
   divs become direct grid items sharing these column tracks with the
   header row, without an actual <table>. */
.env-grid { display: grid; grid-template-columns: max-content 7ch max-content max-content 1fr; column-gap: 12px; font-size: 12px; margin-top: 2px; }
.env-head { color: var(--muted); font-size: 10px; text-transform: uppercase; font-weight: 400; padding-bottom: 3px; }
.env-head.wind-span { grid-column: span 2; }
/* one continuous rule under the whole header row, not a border per header
   cell (that leaves gaps at every column-gap, since each cell's border only
   spans its own box) - spans the full grid width the same way the
   tropopause bar does. */
.env-head-rule { grid-column: 1 / -1; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.env-row { display: contents; }
.env-row > div, .env-grid > .fl { white-space: nowrap; padding: 1px 0; }
.env-row.muted > div { color: var(--muted); }
.env-row.current > div { color: var(--text); font-weight: 700; }
.env-row .wind-rel.better { color: var(--accent-2); }
/* full-width highlighted bar: subgrid lets its own FL/dashes children snap
   to the very same column tracks as every other row, so the FL number still
   lines up exactly under its neighbors even though the background behind it
   is one continuous piece with the "tropopause" label, not two separate
   cells that happen to sit next to each other. */
.env-tropopause {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  margin: 3px -10px; padding: 2px 10px;
  background: var(--panel-2); border-radius: 4px;
}
.env-tropopause .fl { grid-column: 1; padding: 1px 0; }
.env-tropopause .dashes { grid-column: 2 / -1; color: var(--muted); font-style: italic; text-align: center; }
/* this waypoint's own current level is above the tropopause (same condition
   as the navlog row's own tropo-cross highlight) - flag it here too, on
   both the divider and the current row's own FL, since the divider alone
   doesn't say WHICH side of it you're actually on. */
.env-tropopause.cross { background: rgba(255, 180, 84, 0.18); }
.env-tropopause.cross .dashes, .env-tropopause.cross .fl { color: var(--warn); }
.env-row.current > div.fl.cross { color: var(--warn); }

tr.wp-detail td { background: var(--panel); }
tr.wp-detail.hidden { display: none; }
tr.fir-sep td { border: 0; padding: 0; }

/* weather */
.wx-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 8px; }
.wx-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.wx-btn { width: 100%; display: flex; justify-content: space-between; align-items: baseline; text-align: left;
  border: 0; border-bottom: 1px solid var(--line);
  background: var(--panel-2); color: #fff; font-family: var(--mono); font-weight: 700; font-size: 15px; padding: 8px 12px; cursor: pointer; }
.wx-btn:hover { background: #24303a; }
.wx-status { font-size: 11px; font-weight: 400; color: var(--muted); }
.wx-meta { font-size: 11px; padding: 6px 12px 0; }
.wx-meta .hl { color: var(--text); }
.wx-body { padding: 10px 12px; }
.wx-raw { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; color: #cdd8df; }
.wx-age { font-size: 11px; margin-top: 6px; }


/* NavLog separator lines: step climb ("FL390") and 6-hourly cruise-wind reminder */
tr.fl-sep td, tr.wind-sep td { border: 0; padding: 3px 0; }
.sep-line { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .6px; color: var(--accent); }
.sep-line::before, .sep-line::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: .45; }
tr.wind-sep .sep-line { color: var(--cyan); }
tr.wind-sep.past .sep-line { color: var(--muted); }
table.navlog tr.wp-row { scroll-margin-top: 64px; }
.parkline { margin-top: 14px; }

/* navigation feedback: top progress bar + a pulsing pressed link/chip - in
   full-screen web-app mode there is no browser loading bar at all */
#navbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); opacity: 0; z-index: 9999;
  box-shadow: 0 0 6px var(--accent); transition: width 0s, opacity .2s; pointer-events: none; }
#navbar.run { opacity: 1; width: 88%; transition: width 9s cubic-bezier(.08,.7,.2,1), opacity .15s; }
a.pending, button.pending { animation: pend .8s ease-in-out infinite; }
@keyframes pend { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.rwy-select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; font-family: var(--mono); font-size: 13px; }
.depline label { display: inline-flex; align-items: center; gap: 6px; }
.det3 .dl.leg-to { color: var(--muted, #9aa); }
.det3 .dl.leg-to b { color: var(--text); }

/* ---- navlog: outgoing-leg rows ---- */
.navlog .ident { font-size: 17px; }
.navlog .c-wpt .via { font-size: 13px; }
.navlog .c-nav .mins { min-width: 34px; color: var(--muted); }
.navlog .c-nav .leg { min-width: 34px; }
.navlog .c-time .eta-rev { display: inline-block; min-width: 34px; margin-left: 6px; text-align: left; font-size: 12px; }
.navlog input.ata.has-ata { color: #fff; font-weight: 700; }
.arr-summary.hidden { display: none; }
.arr-summary .sum-row { font-family: var(--mono); font-size: 14px; padding: 3px 0; display: flex; gap: 12px; align-items: baseline; }
.arr-summary .sum-row b { color: #fff; }

/* ---- essentials / preflight ---- */
.fval.actual, .wgrid .actual { color: var(--accent-2); }
ul.remarks { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.4; }
ul.remarks li { margin-bottom: 4px; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.pf-bar { margin-bottom: 14px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.pf-card h3 { margin-top: 0; }
.pgrid-kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px solid #222c33; font-family: var(--mono); font-size: 13px; align-items: center; }
.pgrid-kv > div span { color: var(--muted); }
.pgrid-kv > div b { color: #fff; font-weight: 500; }
.fms { display: flex; flex-direction: column; gap: 8px; }
.fms-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fms-f { display: flex; align-items: center; gap: 8px; }
.fms-l { font-size: 11px; color: var(--muted); min-width: 52px; text-align: right; text-transform: uppercase; }
.fms-v { min-width: 70px; padding: 6px 10px; border: 1px solid #3a4a57; border-radius: 4px; background: #0b1218;
  color: #3ec6e0; font-family: var(--mono); font-size: 16px; text-align: center; min-height: 20px; display: inline-block; }
.fms-v input { width: 80px; background: transparent; border: 0; color: inherit; font: inherit; text-align: center; outline: none; }
.fms-v input.user-set { color: var(--accent-2); }
.fms-aside { font-size: 12px; }
.pf-etops .etops-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--mono); font-size: 13px; margin: 6px 0 12px; }
.pf-etops .ec-wpt { display: flex; flex-direction: column; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); }
.pf-etops .ec-wpt b { color: #fff; font-size: 15px; }
.pf-etops .ec-wpt .ec-lbl { font-size: 10px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.pf-etops .ec-ad { padding: 5px 12px; border-radius: 6px; background: #14263a; color: #fff; font-size: 16px; }
.pf-etops .ec-trk { color: var(--muted); }
.pf-card h3 { display: flex; justify-content: space-between; align-items: baseline; }

/* ---- NOTAMs: subject tabs, runway pills ---- */
.subj-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 12px; border-bottom: 1px solid var(--line); }
.subj-tabs .stab { padding: 7px 12px; border-radius: 8px 8px 0 0; color: var(--muted); font-size: 13px; text-decoration: none;
  border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; white-space: nowrap; }
.subj-tabs .stab s { text-decoration: none; opacity: .65; margin-left: 4px; font-size: 11px; }
.subj-tabs .stab:hover { color: #fff; }
.subj-tabs .stab.on { color: #fff; background: var(--panel); border-color: var(--line); font-weight: 600; }
.rwy-note { font-size: 12px; margin: 8px 0 0; }
.pill.rwy { background: #0e2f3b; color: #6fe3ff; border: 1px solid #1f6f88; font-weight: 700; letter-spacing: .5px; }

/* ---- essentials layout ---- */
.hero-titlerow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 18px; padding-right: 0; }
.hero-titlerow .acft { justify-self: center; font-size: 18px; }
.hero-badges { justify-self: end; display: flex; gap: 6px; align-items: center; }
.fnum .fdate { color: var(--text); font-weight: 600; font-size: 15px; margin-left: 12px; letter-spacing: 0; }
.ess-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr); gap: 20px 56px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ess-col h3, .ess-remarks h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 0 8px; display: flex; justify-content: space-between; }
.ess-col h3 .cols { display: flex; }
.ess-col h3 .cols span { width: 62px; text-align: right; }
.ess-col.fuelblock { min-width: 0; }
.fgrid .frow.total > span { border-top: 1px solid var(--line); padding-top: 5px; margin-top: 3px; color: var(--text); }
.fgrid.alts-grid .frow.primary > span:first-child b { color: #fff; }
.ess-remarks { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .ess-grid { grid-template-columns: 1fr; }
  .hero-titlerow { grid-template-columns: 1fr; gap: 4px; }
  .hero-titlerow .acft, .hero-badges { justify-self: start; }
}
.ess-col { font-family: var(--mono); font-size: 13px; } .ess-col h3 { font-family: -apple-system, sans-serif; }

/* ---- preflight rows ---- */
.pf-plan { margin-bottom: 14px; }
.pf-row3 { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr) minmax(430px, 1.5fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.load-cols { display: grid; grid-template-columns: auto 1fr; gap: 14px 26px; }
.load-left .fgrid.box { margin-top: 12px; }
.load-fuel { font-family: var(--mono); font-size: 14px; min-width: 250px; }
.load-right .wgrid > div { padding: 5px 0; }
.load-right .load-dest { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line); }
.load-dest .dest-icao { color: #fff; margin-left: 6px; }
.pf-fuelline { display: flex; gap: 28px; flex-wrap: wrap; font-family: var(--mono); font-size: 14px; color: var(--muted); margin: 18px 0 8px; }
.pf-fuelline b { color: #fff; margin: 0 2px 0 6px; }
@media (max-width: 900px) { .load-cols { grid-template-columns: 1fr; } }
.pf-row3 { grid-template-columns: minmax(250px, .9fr) minmax(290px, .95fr) minmax(470px, 1.7fr); }
.pf-row3 .fms-l { min-width: 0; }
.pf-row3 .fms-v { min-width: 58px; padding: 5px 8px; font-size: 15px; }
.pf-row3 .fms-row { gap: 10px 12px; }
.load-right .wgrid > div { white-space: nowrap; gap: 12px; }
.pf-load .fms-l { min-width: 44px; }
.pf-load .fms-v { min-width: 90px; }
/* FROM / TO / ALTN always on one line */
.pf-row3 { grid-template-columns: minmax(250px, .9fr) minmax(330px, 1.1fr) minmax(470px, 1.6fr); }
.fms-row.fms-route { flex-wrap: nowrap; gap: 8px; }
.fms-row.fms-route .fms-f { gap: 5px; }
.fms-row.fms-route .fms-l { font-size: 10px; }
.fms-row.fms-route .fms-v { min-width: 0; padding: 5px 7px; font-size: 14px; }
.load-cols { gap: 14px 16px; }
.pf-load .fms-v { min-width: 78px; }
.load-fuel { min-width: 225px; }
.load-right .wgrid > div { gap: 8px; }
.load-right { min-width: 0; }

/* ---- tabulated FMS / Load & Fuel grids ---- */
.tgrid { display: grid; column-gap: 12px; row-gap: 7px; align-items: center; font-family: var(--mono); }
.fms-grid { grid-template-columns: auto minmax(62px, auto) auto minmax(62px, auto) auto minmax(62px, auto); }
.load-grid { grid-template-columns: auto minmax(84px, auto) minmax(52px, auto) minmax(60px, auto) auto minmax(84px, auto); }
.tgrid > * { min-width: 0; }
.tgrid .g-l { justify-self: end; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.tgrid .g-v { justify-self: stretch; padding: 6px 10px; border: 1px solid #3a4a57; border-radius: 4px; background: #0b1218;
  color: #3ec6e0; font-size: 15px; text-align: center; min-height: 18px; }
.tgrid .g-v.wide3 { grid-column: span 3; }
.tgrid .g-v input { width: 100%; background: transparent; border: 0; color: inherit; font: inherit; text-align: center; outline: none; padding: 0; }
.tgrid .g-v input.user-set { color: var(--accent-2); }
.tgrid .g-v input.bad-red { color: var(--danger); }
.tgrid .g-n { justify-self: end; font-size: 15px; color: #fff; text-align: right; white-space: nowrap; }
.tgrid .g-n.strong { color: #fff; font-weight: 700; }
.tgrid .g-sm { font-size: 12px; color: var(--muted); }
.tgrid .g-aside { color: var(--muted); font-size: 12px; justify-self: start; }
.tgrid .g-span, .tgrid .g-hd.g-span { grid-column: span 2; }
.tgrid .g-n.g-span { justify-self: end; }
.tgrid .g-hd { justify-self: end; font-size: 10px; color: var(--muted); letter-spacing: .5px; white-space: nowrap; }
.tgrid .g-hd.g-span { justify-self: stretch; text-align: right; }
.tgrid .g-fill2 { grid-column: span 2; }
.tgrid .g-sp { grid-column: 1 / -1; height: 6px; }
.tgrid .g-rule { grid-column: 1 / -1; border-top: 1px solid var(--line); margin: 6px 0 2px; }
.pf-row3 { grid-template-columns: minmax(250px, .85fr) minmax(400px, 1.15fr) minmax(470px, 1.4fr); }

.tgrid .g-v input, .tgrid .g-v input:focus { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.tgrid .g-v:focus-within { border-color: var(--accent); }
.pgrid-kv > div b { white-space: nowrap; }

/* ---- preflight: plan + performance on one row, FMS + Load below ---- */
.pf-row1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 14px; margin-bottom: 14px; align-items: start; }
.pf-row1 .pf-plan { margin-bottom: 0; }
.pf-row3 { grid-template-columns: minmax(400px, 1fr) minmax(520px, 1.25fr); }
.load-grid { grid-template-columns: auto minmax(70px, auto) minmax(60px, auto) minmax(62px, auto) auto minmax(84px, auto); }
.tgrid .g-n.g-span.g-c, .tgrid .g-hd.g-span.g-c { justify-self: stretch; text-align: center; }
.tgrid .g-n.g-left { justify-self: start; }


/* ---- FMS / Load & Fuel: plain panel style. Values to TRANSFER are highlighted
   (white, bold, boxed); values only to CROSS-CHECK are the second level;
   labels stay grey. ZFW / block: white = from the flight plan, green = actual. ---- */
.tgrid .g-v { border: 1px solid var(--line); background: var(--panel-2); color: #fff; font-weight: 700; font-size: 15px; }
.tgrid .g-v.num { text-align: right; }
.tgrid .g-v input { color: #fff; font-weight: 700; }
.tgrid .g-v input.user-set { color: var(--accent-2) !important; }
.tgrid .g-n { color: #c4cfd9; font-weight: 400; }
.tgrid .g-n.strong { color: #c4cfd9; font-weight: 400; }
.tgrid .g-sm { color: var(--muted); }
.tgrid .g-aside { color: var(--muted); }
.fms-v, .fms-v input { color: #fff; }

/* Preflight stays two-up (plan | performance, FMS | load) all the way down to
   iPad-landscape width; only a genuinely narrow screen stacks it */
.pf-row1 { grid-template-columns: minmax(0, 1fr) 300px; }
.pf-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
@media (max-width: 900px) {
  .pf-row1, .pf-row3 { grid-template-columns: 1fr; }
}

/* ---- weather cards: weather first, then ETA/runways, plan, obs time ---- */
.wx-group { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.wx-card { display: flex; flex-direction: column; padding-bottom: 10px; }
.wx-btn { padding: 10px 14px 4px; background: transparent; }
.wx-icao { font-size: 17px; font-weight: 800; letter-spacing: 1px; color: #fff; }
.wx-status { font-size: 14px; color: var(--muted); }
.wx-body { padding: 4px 14px 2px; display: flex; flex-direction: column; gap: 8px; }
.wx-raw { font-family: var(--mono); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  color: #fff; background: #151d24; border-radius: 8px; padding: 9px 11px; cursor: copy; position: relative; }
.wx-raw.wx-taf { color: #b7c3cd; font-size: 12.5px; }
.wx-raw:hover { background: #1a252e; }
.wx-raw.copied::after { content: "copied"; position: absolute; top: 6px; right: 8px; font: 700 10px var(--sans, sans-serif);
  text-transform: uppercase; letter-spacing: .6px; color: #0b1218; background: var(--accent-2); border-radius: 4px; padding: 2px 6px; }
.wx-err { color: var(--danger); font-size: 12px; }
.wx-info { display: grid; grid-template-columns: 38px auto auto; justify-content: start; column-gap: 14px; row-gap: 3px;
  padding: 8px 14px 0; font-family: var(--mono); font-size: 13px; align-items: baseline; }
.wx-info .k { font-family: -apple-system, sans-serif; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.wx-info .v { color: #fff; }
.wx-info .v.hl { font-weight: 700; }
.wx-info .v.wide { grid-column: span 2; }
.wx-info .v2 { color: #c4cfd9; }
.wx-info .rw { margin-right: 10px; color: #9aa7b2; }
.wx-info .rw.fav { color: var(--accent-2); font-weight: 700; }
.wx-age { font-size: 11px; padding: 8px 14px 0; margin-top: 0; min-height: 14px; }
.sum-note { margin-top: 12px; }
.sum-note-text { white-space: pre-wrap; font-size: 14px; color: var(--text); padding: 4px 0; }

/* ---- batch: readability, touch targets, TOD ---- */
html { touch-action: manipulation; }                 /* no double-tap zoom on iOS */
button, input, select, a, .stp { touch-action: manipulation; }
.hb-tod, .hb-tod b { color: #22d3ee !important; }    /* a different time zone: stands out */

/* FMS / Load cards: bigger figures, less padding, regular weight */
.tgrid .g-v { font-size: 18px; font-weight: 400; padding: 3px 8px; min-height: 0; }
.tgrid .g-v input { font-weight: 400; font-size: 18px; }
.tgrid .g-n { font-size: 17px; }
.tgrid .g-aside, .tgrid .g-sm { font-size: 13px; }
.tgrid .g-left { justify-self: start; text-align: left; }
.tgrid .g-fill4 { grid-column: span 4; }
.tgrid .g-steps { grid-column: 2 / -1; font-size: 14px; line-height: 1.5; color: #c4cfd9; white-space: normal; }
.tgrid .g-n.g-left.g-span { white-space: nowrap; }
.mel-list { margin: 0; padding-left: 16px; }
.pgrid-kv > div.primary { font-size: 15px; }
.pgrid-kv > div.primary b { color: #fff; border: 1px solid var(--line); background: var(--panel-2); border-radius: 4px; padding: 2px 10px; font-size: 18px; font-weight: 400; }
.pgrid-kv > div:not(.primary) b { font-weight: 400; color: #c4cfd9; }

/* navlog steppers: finger-sized, clear of the confirm tick */
.navlog .stp { width: 34px; height: 34px; font-size: 20px; border-radius: 7px; }
.navlog .ata-wrap, .navlog .fuel-wrap { gap: 5px; }
.navlog .confirm { width: 32px; height: 34px; font-size: 16px; margin-left: 10px; border-radius: 7px; }
.navlog .fuel-wrap { padding-right: 40px; }

/* ZFW / block entry: the same figure size as every other box (the old id rules were smaller) */
.tgrid .g-v #zfw-input, .tgrid .g-v #block-fuel {
  width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent;
  font-size: 18px; text-align: center; color: #fff;
}
.tgrid .g-v #zfw-input.user-set, .tgrid .g-v #block-fuel.user-set { color: var(--accent-2); }

/* position recorder */
.rec-btn { margin-right: 6px; }
.rec-btn.on { color: #fff; border-color: var(--danger); background: #3a1717; }
.rec-btn.on::first-letter { color: var(--danger); }
.rec-status { font-size: 11px; margin-right: 8px; font-family: var(--mono); }

/* recorder status: fixed width so the tab bar never reflows */
.rec-status { display: inline-block; width: 92px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.sum-derived { margin-top: 10px; font-family: var(--mono); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.sum-derived .lbl { font-family: -apple-system, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.sum-derived b { color: #fff; font-weight: 500; }

/* peripheral alert: the whole screen flickers (taxi speed, vertical speed) */
#alert-flash { position: fixed; inset: 0; pointer-events: none; z-index: 99999; display: none; box-sizing: border-box; }
#alert-flash.on { display: block; border: 16px solid; animation: alertblink .6s linear infinite; }
#alert-flash.amber { border-color: #ffb020; background: rgba(255, 176, 32, .20); }
#alert-flash.red { border-color: #ff3b30; background: rgba(255, 59, 48, .30); animation-duration: .35s; }
@keyframes alertblink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.rec-status { cursor: pointer; }
.rec-btn.warn { color: #1b1200; background: var(--warn); border-color: var(--warn); font-weight: 700; }

/* LIDO halt */
.halt-banner { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: #5a1111; color: #fff; padding: 10px 16px;
  border-bottom: 2px solid #ff3b30; font-size: 14px; }
.halt-banner b { letter-spacing: .5px; }
.halt-banner span { flex: 1; min-width: 200px; opacity: .92; }
.halt-banner a { color: #fff; text-decoration: underline; }
.halt-banner form { margin: 0; }
.halt-card { border: 1px solid #ff3b30; background: #2a1316; border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 13px; }
.halt-card form { margin-top: 8px; }
.incident-frame { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.incident-raw { white-space: pre-wrap; word-break: break-all; font-size: 11px; max-height: 420px; overflow: auto; background: var(--panel-2); padding: 10px; border-radius: 8px; }

/* position recorder lives in the floating box */
.rec-slot { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.rec-slot .rec-status { width: 84px; }
.herobar .rec-btn { padding: 2px 10px; }
/* automatically logged times are green, typed ones white */
.navlog input.ata.has-ata.auto, .tinput.auto { color: var(--accent-2) !important; }

/* ---- live shell ---- */
.live-panel[hidden] { display: none !important; }
#embed-frame { display: block; width: 100%; border: 0; background: var(--bg); }
#embed-frame[hidden] { display: none; }
body.frame-open { overflow: hidden; }
html.in-frame .topbar, html.in-frame .fl-tabs { display: none !important; }
html.in-frame main { padding-top: 8px; }

/* NOTAM card buttons: star = amber (outline, filled once starred); hide = red - not to be mistaken for each other */
.ico.star { color: var(--warn); border-color: var(--warn); }
.ico.star.on { background: var(--warn); color: #1b1200; border-color: var(--warn); }
.ico.hide { color: var(--danger); border-color: var(--danger); }
.ico.hide:hover { background: var(--danger); color: #fff; }
.ico.star:hover { color: #1b1200; background: var(--warn); }
.notam.is-hidden { opacity: .5; transition: opacity .2s; }
.ap-name { font-size: 18px; color: var(--text); margin: -6px 0 12px; font-weight: 500; }

/* ======================= NavLog: list (column 1) + leg detail (columns 2-3) ======================= */
body.nl-active { overflow: hidden; }
.nl-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 14px; margin-top: 10px; height: 70vh; }
.nl-list, .nl-detail { overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.nl-list { padding-bottom: 40vh; }                       /* room to scroll the last waypoints to the middle */
.nl-fir { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 5px 12px; background: var(--panel-2);
  border-left: 3px solid var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); position: sticky; top: 0; z-index: 2; }
.nl-fir.nofir { border-left-color: var(--line); opacity: .6; }
.nl-fir .fir-name { color: var(--text); font-weight: 600; }
.nl-fir .fir-notams { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--muted); }
.nl-fir .fir-notams .hl { color: var(--warn); }
.nl-step, .nl-wind { text-align: center; font-size: 11px; letter-spacing: .5px; padding: 2px 0; position: relative; }
.nl-step span, .nl-wind span { background: var(--panel); padding: 0 8px; position: relative; z-index: 1; }
.nl-step::before, .nl-wind::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; border-top: 1px dashed #3a4a57; }
.nl-step span { color: var(--accent-2); font-weight: 700; }
.nl-wind span { color: #6fb4d6; }
.nl-wind.past { opacity: .45; }
.nl-wp { padding: 6px 12px 5px; border-bottom: 1px solid #1d262d; cursor: pointer; }
.nl-wp:hover { background: var(--panel-2); }
.nl-wp.current { background: #14263a; }
.nl-wp.sel { background: #1b3550; box-shadow: inset 3px 0 0 var(--accent); }
.nl-l1 { display: grid; grid-template-columns: minmax(0, 1fr) auto 46px; gap: 8px; align-items: baseline; }
.nl-l1 .ident { font-size: 18px; font-weight: 700; color: #fff; white-space: nowrap; }
.nl-l1 .tag { font-size: 10px; color: var(--warn); margin-left: 6px; font-weight: 400; }
.nl-l1 .eta { font-family: var(--mono); font-size: 15px; text-align: right; color: var(--muted); min-width: 52px; }
.nl-l1 .eta.is-ata { color: #fff; font-weight: 700; }
.nl-l1 .eta.auto { color: var(--accent-2); }
.nl-l1 .req { font-family: var(--mono); font-size: 14px; text-align: right; color: var(--text); }
.nl-l2 { display: flex; gap: 16px; margin: 1px 0 0 8px; padding-left: 12px; border-left: 2px solid #3a4a57; min-height: 17px;
  font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.nl-l2 .dist i { font-style: normal; font-size: 10px; margin-left: 1px; }
.nl-l2 .fl-val { margin-left: auto; }
.nl-wp.high-terrain .nl-l2 { border-left-color: var(--danger); }
.nl-wp.tropo-cross .nl-l2 { border-left-color: var(--warn); }
.nl-wp.tropo-cross .nl-l2 .fl-val { color: var(--warn); }
.nl-wp.etops-point .tag.etops { color: var(--warn); }

.nl-detail { padding: 0; }
.leg[hidden] { display: none; }
.lvl-block { font-family: var(--mono); font-size: 13px; }
.lvl-head, .lvl-row { display: grid; grid-template-columns: 52px minmax(120px, 1.6fr) 34px minmax(86px, 1fr); gap: 8px; align-items: baseline; padding: 3px 4px; }
.lvl-head { font-family: -apple-system, sans-serif; font-size: 10px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.lvl-row { color: var(--muted); }
.lvl-row .fl { color: var(--muted); }
.lvl-row[hidden] { display: none; }
.lvl-row .wind { white-space: nowrap; }
.lvl-row .wabs { display: none; }
.lvl-row .plantag { display: none; margin-left: 8px; font-family: -apple-system, sans-serif; font-size: 10px; color: var(--muted); }
.lvl-row.actual { color: #fff; font-weight: 700; background: #14263a; border-radius: 4px; }
.lvl-row.actual .fl { color: #fff; }
.lvl-row.actual .wabs { display: inline; }
.lvl-row.planned.differs .plantag { display: inline; }
.lvl-row .wrel.better { color: var(--accent-2); }
.lvl-row.trop .dashes, .lvl-row.msa .dashes { grid-column: 2 / -1; font-style: italic; }
.lvl-row.trop.cross, .lvl-row.trop.cross .fl { color: var(--warn); }
.lvl-row.msa.high-terrain, .lvl-row.msa.high-terrain .fl { color: var(--danger); }
.prog-box { font-size: 13px; }
.prog-title { font-size: 10px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.nl-foot { padding: 6px 18px 40px; border-top: 1px solid var(--line); margin-top: 8px; }
@media (max-width: 900px) {
  .nl-layout { grid-template-columns: 1fr; height: auto; }
  .nl-list { max-height: 45vh; }
  body.nl-active { overflow: auto; }
  .leg-body, .leg-head { grid-template-columns: 1fr; }
}
.nl-list { position: relative; }
.prog-box .di { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: #fff; }
.prog-box .di > span:first-child { color: var(--muted); }
.lvl-row[data-fl]:not(.trop):not(.msa) { cursor: pointer; }

/* ---- leg details: compact head (iPad landscape first), values entered on the FROM side only ---- */
.leg-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 180px) minmax(0, 1fr); gap: 10px; padding: 10px 14px 12px; border-bottom: 1px solid var(--line); }
.lh-role { font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.lh-ident { font-size: 26px; line-height: 1.1; font-weight: 800; color: #fff; letter-spacing: .5px; word-break: break-all; }
.lh-name { font-size: 11.5px; color: var(--muted); min-height: 15px; }
.lh-coord { font-family: var(--mono); font-size: 12px; color: var(--text); margin: 1px 0 8px; }
.lh-to { text-align: right; }
.lh-mid { text-align: center; padding-top: 6px; }
.lh-air { font-size: 13px; font-weight: 600; color: var(--accent); min-height: 17px; }
.lh-arrow { color: var(--muted); letter-spacing: 1px; margin: 0 0 4px; }
.lh-main { font-family: var(--mono); font-size: 15px; color: #fff; }
.lh-sec { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; font-family: var(--mono); }

.wf { display: flex; flex-direction: column; gap: 2px; }
.wf-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-height: 40px; margin-bottom: 6px; }
.lh-to .wf-row { justify-content: flex-end; }
.wf-l { font-size: 10.5px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; min-height: 14px; }
.wf .ata-wrap, .wf .fuel-wrap { display: inline-flex; align-items: center; gap: 4px; padding-right: 0; }
.wf input.ata, .wf input.actfuel { width: 80px; box-sizing: border-box; padding: 6px 2px; font-size: 20px; text-align: center; letter-spacing: 0; }
.wf .stp { width: 34px; height: 40px; font-size: 20px; background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 7px; }
.wf .stp:active { background: rgba(77,160,255,.18); }
.wf .confirm { width: 32px; height: 40px; margin-left: 2px; }
.wf .eta-rev { min-width: 30px; font-size: 12.5px; display: inline-block; }
.wf .fuel-diff { position: static; width: auto; margin-left: 2px; font-size: 12.5px; }
.wf.fuel-stale .actfuel { border-color: var(--warn); border-width: 2px; }
.wf-val { font-family: var(--mono); font-size: 20px; color: var(--muted); }
.wf-val.has-ata, .wf-val.has-fuel { color: #fff; }
.wf-val.has-ata.auto { color: var(--accent-2); }
.wf-val.draft { color: var(--muted); font-style: italic; }
.lh-park .parkline { margin-top: 4px; justify-content: flex-end; }

.leg-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px 18px; padding: 12px 14px; align-items: start; }
.lb-mid { grid-column: 1; grid-row: 1; }
.lb-right { grid-column: 2; grid-row: 1; }
.lb-left { grid-column: 1; grid-row: 2; }
.lb-air { grid-column: 2; grid-row: 2; }
.lb-air .lvl2 { margin: 0; }
.lb-air .lvl2-label { display: block; width: 100%; margin: 0 0 4px; }
.lb-left .wp-note { margin-bottom: 8px; }
@media (max-width: 700px) {
  .leg-body, .leg-head { grid-template-columns: 1fr; }
  .lb-mid, .lb-right, .lb-left, .lb-air { grid-column: 1; grid-row: auto; }
}

/* ---- Preflight task chips (second line of the floating box) and their windows ---- */
.herobar.pf-bar { flex-wrap: wrap; row-gap: 8px; }
.pf-tasks { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
.task { appearance: none; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: #2a343d; color: #c4cfd9; border: 1px solid #3b4752; }
.task.due { background: var(--warn); color: #1b1305; border-color: var(--warn); }
.task.done { background: transparent; color: var(--accent-2); border-color: var(--accent-2); }
.task.done::before { content: "✓ "; }
.task:active { transform: scale(.97); }

.tm { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 12px 12px; overflow: auto; }
.tm[hidden] { display: none; }
.tm-card { position: relative; width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.tm-card h3 { margin: 0 0 10px; font-size: 18px; color: #fff; }
.tm-x { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.tm-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 10px 0; }
.tm-row label, .tm-names label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.tm-card input[type=text], .tm-card input:not([type]), .tm-card select { background: var(--panel-2); color: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: 16px; min-width: 0; }
.tm-pair { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; color: #fff; }
.tm-pair input { width: 52px; text-align: center; }
.tm-big { width: 120px; font-size: 24px !important; font-family: var(--mono); text-align: center; }
.tm-facts { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--text); }
.tm-facts li b { color: var(--muted); font-weight: 500; margin-right: 6px; }
.tm-pa li { font-size: 17px; }
.tm-pa li::before { content: "• "; color: var(--muted); }
.tm-pa li:last-child::before { content: ""; }
.tm-names { display: flex; gap: 10px; flex-wrap: wrap; }
.tm-names::before { content: "" !important; }
.tm-names input { width: 150px; }
.tm-card input.missing { border-color: var(--warn); background: #2c2417; }
.tm-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.tm-actions .btn { padding: 11px 20px; font-size: 16px; }
.tm-foot { text-align: right; margin-top: 6px; min-height: 18px; }
.tm-undo { background: transparent; border: 0; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }

/* the + / - are drawn, not typeset, so they sit exactly in the middle of the button */
.wf .stp { position: relative; font-size: 0; padding: 0; line-height: 0; }
.wf .stp::before, .wf .stp.plus::after, .wf .stp.fplus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px; }
.wf .stp::before { width: 14px; height: 2.5px; transform: translate(-50%, -50%); }
.wf .stp.plus::after, .wf .stp.fplus::after { width: 2.5px; height: 14px; transform: translate(-50%, -50%); }

/* task windows: labels grey, the data white */
.tm-facts .tm-l, .tm-pa .tm-l { color: var(--muted); }
.tm-facts .tm-v { color: #fff; }
.tm-watch { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.tm-watch li { color: var(--warn); }
.tm-watch li.red { color: var(--danger); }
.tm-watch:empty { display: none; }

.awake { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid #2f6b40; color: var(--accent-2); background: transparent; cursor: pointer; }
.awake.off { color: var(--warn); border-color: #7a5a2f; background: #2c2417; }

/* Preflight: fuel / weights / alternates row above the Plan */
.pf-row0 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.pf-row0 .fuelblock { min-width: 0; }

/* shutdown timer under the Parked block */
.shutdown { margin-top: 18px; text-align: right; }
.shutdown[hidden] { display: none; }
.sd-l { font-size: 11px; letter-spacing: 1.5px; color: var(--muted); }
.sd-t { font-family: var(--mono); font-size: 64px; line-height: 1.05; font-weight: 700; color: var(--warn); }
.shutdown.done .sd-t { color: var(--accent-2); }
/* parking line: labels on their own line above the field, like ETA / AFOB */
.lh-park .parkline { align-items: flex-end; flex-wrap: wrap; gap: 8px 10px; justify-content: flex-end; }
.lh-park .parkline label { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.lh-park .parkline label input, .lh-park .parkline label select { text-transform: none; letter-spacing: 0; }
.lh-park .parkline { flex-wrap: nowrap; gap: 8px; }
.lh-park .parkline .tinput { width: 66px; }
.lh-park .parkline .btn { padding: 8px 12px; }
.lh-park .parkline .rwy-select { padding: 7px 4px; }

/* arrival summary: under the Parked block, replaces the shutdown timer */
.arrsum { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 14px; text-align: left; }
.arrsum.hidden { display: none; }
.arrsum .ac { padding: 7px 0 6px; border-top: 1px solid var(--line); }
.arrsum .ac span { display: block; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.arrsum .ac b { font-family: var(--mono); font-size: 21px; font-weight: 600; color: #fff; }
.arrsum .ac i { font-style: normal; font-size: 12px; }
.arrsum .ac.tot b { color: var(--accent-2); }
#sum-note-box.hidden { display: none; }

/* the on-blocks time is an input sitting in its table cell: shows the value and corrects it in place */
.arrsum .as-input { width: 5.4ch; box-sizing: content-box; padding: 0 0 1px; border: 0; border-bottom: 1px dashed #4a5a68; border-radius: 0; background: transparent;
  font-family: var(--mono); font-size: 21px; font-weight: 600; color: #fff; text-align: left; letter-spacing: 0; }
.arrsum .as-input.auto { color: var(--accent-2); }
.arrsum .as-input:focus { outline: none; border-bottom-color: var(--accent); }