/* New GUI theme — look "B3" (agreed 2 Nov 2026), loaded after styles.css.
 * A solid flight-deck tool: dark by default (light mode is a setting: html[data-theme=light]),
 * square 4 px corners, 1 px ruled rows like the school forms, no glass, gradients or shadows.
 * Colour only with glass-cockpit meanings (FAA AC 25-11B): magenta route · FlyBy lime current / primary (navy frame) · blue dashed alternate ·
 * green done · amber caution · red no-go. Everything else white and greys.
 * Type: B612 + B612 Mono (Airbus / Intactile / ENAC cockpit typeface), bundled in vendor/fonts (OFL).
 * Reference: docs/design/look-b3-route.html, rules: navlog-gui-rules skill. */

@font-face { font-family: "B612"; font-weight: 400; font-style: normal; font-display: swap; src: url("vendor/fonts/b612-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "B612"; font-weight: 500 900; font-style: normal; font-display: swap; src: url("vendor/fonts/b612-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "B612 Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("vendor/fonts/b612-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "B612 Mono"; font-weight: 500 900; font-style: normal; font-display: swap; src: url("vendor/fonts/b612-mono-latin-700-normal.woff2") format("woff2"); }

/* Dark (default) */
:root {
  color-scheme: dark;
  --font: "B612", -apple-system, system-ui, sans-serif;
  --mono: "B612 Mono", ui-monospace, Menlo, monospace;
  --bg: #111419;        /* page, bars */
  --panel: #14181D;     /* side panel */
  --ctl: #171B21;       /* buttons, fields */
  --label: #EEF1F5;
  --label2: #AEB6C1;    /* 9.0:1 on #14181D */
  --label3: #8C95A3;    /* 5.9:1: icons, disabled */
  --rule: #3A414C;      /* section rules, control borders */
  --rule2: #262C35;     /* rows inside a list */
  --sep: var(--rule2);
  --line: #4A525E;      /* field and button borders (3:1+) */
  --fill: var(--ctl);
  --fill2: #1E232B;
  --glass: var(--panel); --glass-heavy: var(--panel); --glass-edge: var(--rule);
  --cur: #1E2614;       /* background of the current step / selected segment */
  --tint: #CCF003;      /* FlyBy lime: current step, primary button (navy text on it) */
  --on-tint: #00205D;
  --navy: #00205D;      /* FlyBy navy: the frame */
  --tint-soft: #1F2A14;
  --tint-ink: #CCF003;
  --route: #E255C2;     /* magenta: route and waypoints */
  --alt: #0A84FF;       /* the alternate: dashed blue, as on the chart */
  --ok: #3DB565;   --ok-soft: transparent;  --ok-ink: #3DB565;
  --warn: #FFB020; --warn-soft: transparent; --warn-ink: #FFB020; --warn-line: #FFB020;
  --bad: #FF5A4F;  --bad-soft: transparent;  --bad-ink: #FF5A4F;  --bad-line: #FF5A4F;
  --shadow: none; --shadow-sm: none;
  --r: 4px;
  --c-mission: var(--tint); --c-plan: var(--tint); --c-mb: var(--tint); --c-brief: var(--tint);
  --c-tab-navlog: var(--tint); --c-tab-fuel: var(--tint); --c-tab-profile: var(--tint);
  --accent: var(--tint);
  --sheet-solid: var(--panel);
}
/* Light (setting): same structure, darker versions of the same hues */
:root[data-theme=light] {
  color-scheme: light;
  --bg: #EEF0F3; --panel: #FFFFFF; --ctl: #F4F5F7;
  --label: #15181D; --label2: #4A5260; --label3: #6B7380;
  --rule: #8A93A0; --rule2: #D5D9E0; --line: #8A93A0; --fill2: #E7EAEE;
  --cur: #E6EAF2;
  --tint: #00205D; --on-tint: #FFFFFF; --tint-soft: #E6EAF2; --tint-ink: #00205D;
  --route: #B0127A; --alt: #0A5FC8;
  --ok: #1B7F3B; --ok-ink: #1B6B35;
  --warn: #9A5600; --warn-ink: #7A4400; --warn-line: #9A5600;
  --bad: #C0271C; --bad-ink: #A0201A; --bad-line: #C0271C;
}

html, body { font: 400 1rem/1.45 var(--font); -webkit-font-smoothing: auto; background: var(--bg); color: var(--label); }
body { font-size: 16px; }
.mono, code, pre, .metar, .taf, .notam { font-family: var(--mono); }
.stat .v, .value, table, .num, td, th { font-variant-numeric: tabular-nums; }
h1, h2, h3, b, strong { font-weight: 700; }
a { color: var(--tint); }

/* ---- Frame: solid, edge to edge, ruled (no floating cards, no glass) ---- */
.glass, .glass-heavy, .sn-card, .popover, .leaflet-popup-content-wrapper, .leaflet-control-attribution {
  background: var(--bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid var(--rule); border-radius: var(--r); box-shadow: none !important; color: var(--label);
}
.leaflet-popup-tip { background: var(--bg); }
.leaflet-container { background: #1C2129; font-family: var(--font); }
:root[data-theme=light] .leaflet-container { background: #E7EAEE; }
.startup-notice { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 10, 13, 0.7); }
.sn-card { background: var(--panel) !important; border-radius: var(--r); }
.sn-btn { border-radius: var(--r); background: var(--tint); color: var(--on-tint); font-weight: 700; min-height: 52px; }
.sheet { background: var(--panel) !important; border-radius: 0; border: 0; border-top: 1px solid var(--rule); }
.sheet::before { display: none; }
@media (min-width: 900px) {
  :root { --panel-x: calc(var(--side-w) + 12px); }
  .sheet { left: 0; top: 0; bottom: 0; border: 0; border-right: 1px solid var(--rule); border-radius: 0;
    padding-top: var(--safe-t); }
  .panel-closed .sheet { transform: translateX(-100%); }
  .panel-toggle { left: calc(var(--panel-x) - 12px); border-radius: 0 var(--r) var(--r) 0; border-left: 0; width: 28px; }
  .profile-dock { border-radius: var(--r); border: 1px solid var(--rule); background: var(--bg) !important; }
  .profile-title { font-size: 14px; font-weight: 700; }
  .profile-info { font-size: 13px; }
}
.timecard { border-radius: var(--r); }
.time-main { font-weight: 700; font-variant-numeric: tabular-nums; }
.time-sub, .sun { color: var(--label2); font-size: 13px; }
.rightcol .brand { border-radius: var(--r); }
.brand-mark { background: none; border: 2px solid var(--route); border-radius: 50%; width: 14px; height: 14px; }
.round, .pill, .chip, .round.labelled { border-radius: var(--r); }
.round.labelled { width: 72px; height: 56px; background: var(--bg) !important; }
.round .cap, .round.labelled .cap { font-size: 13px; font-weight: 700; color: var(--label); }
.chip { height: 44px; font-size: 14px; }

/* Groups are ruled sections, not cards */
.group, .nl-wrap, .profile-panel { background: transparent; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
.group > * + *, .group .row + .row { border-top: 1px solid var(--rule2); }
.sheet .group, .sheet .group.pad { border-left: 0; border-right: 0; padding-left: 20px; padding-right: 20px; }
.group-title, .sheet .group-title { color: var(--label); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; margin: 24px 0 8px; }
.sheet .group-title > span:first-child::before, .sheet .group-title::before { display: none; }
.label, .note, .k, .sub, .hint { color: var(--label2); }
.note { font-size: 14px; }
.howto, .step-card, .tip-card { background: var(--ctl); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: none; }
.type-card { background: var(--ctl); border: 1px solid var(--line); border-radius: var(--r); min-height: 44px; }
.type-card b, .type-card .t { font-weight: 700; }
.type-card.on { border: 2px solid var(--tint); background: var(--cur); box-shadow: inset 0 -3px 0 var(--tint); }
.leg-card.active, .wp.open { box-shadow: inset 3px 0 0 var(--route); background: var(--ctl); }

/* ---- Controls: ≥ 44 pt, 4 px corners, real borders ---- */
.btn { min-height: 44px; height: auto; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--ctl); color: var(--label); font: 700 15px/1.2 var(--font); transition: background 120ms; }
.btn.small { min-height: 44px; padding: 0 12px; font-size: 14px; }
.btn.primary, .sheet .btn.primary, .next-step { background: var(--tint) !important; border-color: var(--tint) !important; color: var(--on-tint) !important; }
.btn.danger { color: var(--bad); border-color: var(--bad); background: var(--ctl); }
.btn:active { transform: none; background: var(--fill2); }
.btn.primary:active { filter: brightness(0.9); }
.btn:disabled, .btn[disabled] { opacity: 1; color: var(--label3); border-color: var(--rule2); background: var(--ctl) !important; }
.btn.primary:disabled { color: var(--label3) !important; background: var(--ctl) !important; border-color: var(--rule2) !important; }
.icon-btn { width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--ctl); color: var(--label); }
.segmented { border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); padding: 0; gap: 0; overflow: hidden; }
.segmented button { min-height: 44px; height: auto; border-radius: 0; font: 700 15px var(--font); color: var(--label); background: transparent; }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button.on, #tabs button.on, #routeSel button.on { background: var(--cur); color: var(--label); box-shadow: inset 0 -3px 0 var(--tint); font-weight: 700; }
.field { background: var(--ctl); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px 7px; }
.field span { font-size: 13px; font-weight: 700; color: var(--label2); text-transform: none; letter-spacing: 0; }
.field input, .field select, .field b { font: 700 16px var(--font); color: var(--label); font-variant-numeric: tabular-nums; }
.field:focus-within { border-color: var(--tint); box-shadow: inset 0 0 0 1px var(--tint); }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { min-height: 44px; border-radius: var(--r); font-family: var(--font); color: var(--label); }
.field input, .field select { min-height: 28px; }
input::placeholder, textarea::placeholder { color: var(--label3); font-weight: 400; font-style: normal; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--tint); }
input[type=range] { accent-color: var(--tint); }
label.check, label.radio { min-height: 44px; display: flex; align-items: center; gap: 10px; }
.switch span { border-radius: 4px; }
.switch span::after { border-radius: 2px; transition: transform 160ms ease-out; }
.popover { border-radius: var(--r); animation: none; }
.pop-title { font-weight: 700; }

/* Status: shape + colour + word (✓ done · ▲ check · ⛔ no-go), outlined, no pastel fills */
.badge { border-radius: var(--r); border: 1px solid currentColor; background: transparent; font-weight: 700; }
.badge.ok { color: var(--ok); } .badge.warn { color: var(--warn); } .badge.bad { color: var(--bad); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- Step bar: one bordered strip, phase dividers 2|3 and 4|5; done = green tick, current = lime ---- */
.modebar { align-items: stretch; gap: 8px; padding: 12px 20px 12px; border-bottom: 1px solid var(--rule); }
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: none; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.steps button { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; column-gap: 4px; row-gap: 2px;
  min-height: 56px; height: auto; padding: 4px 2px; border: 0; border-left: 1px solid var(--rule2); border-radius: 0; background: transparent;
  color: var(--label2); font: 700 13px/1.2 var(--font); box-shadow: none; }
.steps button:first-child { border-left: 0; }
.steps button:nth-child(3), .steps button:nth-child(5) { border-left: 2px solid var(--rule); }
.steps .num { width: 22px; height: 22px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); background: none; color: var(--label2); font-size: 12px; font-weight: 700; }
.steps button.on { background: var(--cur); color: var(--label); box-shadow: inset 0 -3px 0 var(--tint); border-top: 0; }
.steps button.on .num { background: var(--tint); border-color: var(--tint); color: var(--on-tint); }
.steps button.done:not(.on) .num { background: var(--ok); border-color: var(--ok); color: var(--on-tint); font-size: 0; }
.steps button.done:not(.on) .num::after { content: "✓"; font-size: 13px; font-weight: 700; }
.steps button.done:not(.on) { color: var(--label); }
.steps .lbl { flex-basis: 100%; text-align: center; }
.steps .st:empty { display: none; }
.steps .st svg { width: 16px; height: 16px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: block; }
.steps .prog { display: none; }
.icon-btn.gear { width: 52px; height: auto; min-height: 56px; border: 1px solid var(--rule); background: transparent; border-radius: var(--r); color: var(--label); }
.icon-btn.gear.on { background: var(--cur); border-color: var(--rule); box-shadow: inset 0 -3px 0 var(--tint); color: var(--label); }
.next-step { min-height: 52px; height: auto; font-size: 17px; }

/* ---- Step header (every step): kicker, heading, one-line task, ruled key-figures row ---- */
.step-head { margin: 0 -20px; padding: 16px 20px 14px; border-bottom: 1px solid var(--rule); }
.step-kicker { font-size: 14px; font-weight: 700; color: var(--tint); }
.step-head h2 { margin: 2px 0 4px; font-size: 21px; line-height: 1.2; font-weight: 700; }
.step-task { font-size: 15px; color: var(--label2); margin: 0; max-width: 70ch; }
.figs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0 -20px; border-bottom: 1px solid var(--rule); }
.figs > div { padding: 12px 20px; min-width: 0; }
.figs > div + div { border-left: 1px solid var(--rule); }
.figs .k { font-size: 13px; font-weight: 700; color: var(--label2); display: block; }
.figs .v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.figs .v.ok { color: var(--ok); } .figs .v.warn { color: var(--warn); } .figs .v.bad { color: var(--bad); }

/* Bottom of the panel: Back + one primary Next, in thumb reach */
.action-bar { border-top: 1px solid var(--rule); background: var(--panel); }
.action-bar:has(> .back-step) { grid-template-columns: 52px 1fr; }
.back-step { min-height: 52px; padding: 0; font-size: 18px; }

/* Ruled list rows (aerodromes, legs, items) */
.rlist { margin: 0 -20px; }
.rrow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 20px; border-bottom: 1px solid var(--rule2); }
.rrow .grow { flex: 1; min-width: 0; }
.rrow .t { font-weight: 700; }
.rrow .sub { font-size: 14px; }
.sig { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.sig svg { width: 18px; height: 18px; flex: none; }
.sig.ok { color: var(--ok); } .sig.warn { color: var(--warn); } .sig.bad { color: var(--bad); } .sig.info { color: var(--label2); }

/* Step 3 shows the route (and the profile on narrow screens); step 4 the navlog and the fuel plan */
.sheet[data-step=route] #tabs [data-tab=navlog], .sheet[data-step=route] #tabs [data-tab=fuel] { display: none; }
.sheet[data-step=navlog] #tabs [data-tab=route], .sheet[data-step=navlog] #tabs [data-tab=profile] { display: none; }
@media (min-width: 900px) { .sheet[data-step=route] #tabs { display: none; } }

/* One primary per screen: on Weather and Briefing the other actions are outlined */
.panel[data-panel=weather] .btn.primary:not(.next-step),
.panel[data-panel=brief] .btn.primary:not([data-act=briefPdf]) { background: var(--ctl) !important; color: var(--label) !important; border-color: var(--line) !important; }

/* One sign per step: done = green tick disc, check / out of limits = that sign instead of the number,
   current = lime number (its status is in the aria-label and on the screen itself) */
.steps button .st { display: none; }
.steps button:not(.on)[data-st=warn] .st, .steps button:not(.on)[data-st=bad] .st { display: block; }
.steps button:not(.on)[data-st=warn] .num, .steps button:not(.on)[data-st=bad] .num { display: none; }
.steps .st svg { width: 22px; height: 22px; }
.steps .lbl { white-space: nowrap; overflow: visible; text-overflow: clip; }
@media (max-width: 520px) { .modebar { padding: 10px 12px; } .steps button { padding: 4px 0; } .steps .lbl { font-size: 13px; letter-spacing: -0.02em; } .icon-btn.gear { width: 44px; } }


/* ---- Wide screens: one frame across the top (FlyBy navy), step bar below it, panel left, chart right ---- */
.topbar { display: none; }
@media (min-width: 900px) {
  :root { --top-h: 124px; }
  .topbar { display: grid; grid-template-columns: auto auto 1fr auto auto; grid-template-rows: 56px auto; align-items: center; column-gap: 10px;
    position: fixed; z-index: 1002; top: 0; left: 0; right: 0; padding: var(--safe-t) 12px 0 20px; background: var(--navy); color: #FFFFFF; border-bottom: 1px solid var(--rule); }
  .tb-title { font-weight: 700; font-size: 16px; white-space: nowrap; }
  .tb-sub { font-size: 13px; color: #C5CEDD; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tb-chips { display: flex; gap: 14px; padding-left: 10px; }
  .tb-chips .sig.ok { color: #7FE0A0; } .tb-chips .sig.info { color: #C5CEDD; } .tb-chips .sig.warn { color: #FFC34D; }
  .topbar .btn { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; gap: 8px; display: inline-flex; align-items: center; }
  .topbar .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tb-steps { grid-column: 1 / -1; margin: 0 -12px 0 -20px; background: var(--bg); }
  .tb-steps .modebar { padding: 8px 20px; border-bottom: 0; display: block; }
  .tb-steps .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tb-steps .steps button { min-height: 52px; flex-wrap: nowrap; column-gap: 8px; font-size: 15px; }
  .tb-steps .steps .lbl { flex-basis: auto; }
  .tb-steps .icon-btn.gear { display: none; }
  .sheet { top: var(--top-h) !important; }
  .timecard { top: calc(var(--top-h) + 10px) !important; }
  .rightcol { top: calc(var(--top-h) + 10px) !important; }
  .rightcol .brand { display: none; }
  .panel-toggle { top: calc(var(--top-h) + 84px) !important; }
}
:root[data-theme=light] .tb-steps { background: var(--panel); }

/* ---- Portrait: while the chart is in view the step bar folds to one slim row (signs only, current named) ---- */
body.steps-mini .modebar { padding-top: 6px; padding-bottom: 6px; }
body.steps-mini .steps button { min-height: 44px; flex-wrap: nowrap; }
body.steps-mini .steps button:not(.on) .lbl { display: none; }
body.steps-mini .steps button.on { grid-column: span 2; }
body.steps-mini .steps { grid-template-columns: repeat(7, minmax(0, 1fr)); }
body.steps-mini .steps .lbl { flex-basis: auto; }
body.steps-mini .icon-btn.gear { min-height: 44px; }

/* ---- Chart leg labels on screen: leg number + course only; level and time are in the route list
   (the printed map keeps the full labels) ---- */
.hat .hv ~ .hv { display: none; }
.hat:hover .hv ~ .hv, .hat:focus .hv ~ .hv { display: grid; }