/* E6B Pilot Computer — the sectional-chart design (board decision D8).
   Chart paper, chart ink, sectional magenta and Class B blue, with a night theme. Barlow Condensed
   for headings and readouts, Public Sans for body, IBM Plex Mono for formulas, inputs and units.
   All three are self-hosted from /fonts (SIL OFL 1.1, licences beside the files): no request
   leaves this origin. One ornament, the engraved scale — the whiz wheel's tick rule — divides
   sections. No inline styles or scripts anywhere, so the strict CSP in site #6 needs no exceptions. */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/barlow-condensed-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/public-sans-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/public-sans-variable-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ---- Tokens: day, then night (system preference unless overridden, and the explicit override). */

:root {
  color-scheme: light;
  --paper: #F4F6F5;        /* chart paper */
  --card: #FFFFFF;
  --ink: #14212B;          /* chart ink */
  --muted: #52606B;
  --line: #C9D2D6;         /* scale line */
  --magenta: #A1136C;      /* sectional magenta */
  --magenta-ink: #FFFFFF;
  --magenta-soft: rgba(161, 19, 108, .07);
  --chart: #1E4F8F;        /* Class B blue */
  --caution-bg: #FFF4DB;
  --caution-line: #9A6B00;
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0E1419;      /* night panel */
    --card: #151D24;
    --ink: #E4EAEE;
    --muted: #93A1AC;
    --line: #2A3640;
    --magenta: #E36AA8;
    --magenta-ink: #1A0710;
    --magenta-soft: rgba(227, 106, 168, .10);
    --chart: #8DB6E8;
    --caution-bg: #2A2210;
    --caution-line: #D9A33A;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0E1419;
  --card: #151D24;
  --ink: #E4EAEE;
  --muted: #93A1AC;
  --line: #2A3640;
  --magenta: #E36AA8;
  --magenta-ink: #1A0710;
  --magenta-soft: rgba(227, 106, 168, .10);
  --chart: #8DB6E8;
  --caution-bg: #2A2210;
  --caution-line: #D9A33A;
}

/* ---- Base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, p, ul, ol { margin-top: 0; }
p, ul, ol { margin-bottom: 14px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }
p:last-child, ul:last-child, ol:last-child, li:last-child { margin-bottom: 0; }

a { color: var(--chart); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; border-radius: 2px; }

code { font-family: var(--mono); font-size: .9em; }
strong { font-weight: 650; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.05; text-wrap: balance; }
h1 { font-size: 56px; letter-spacing: -.005em; margin-bottom: 14px; }
h2 { font-size: 34px; margin: 40px 0 12px; }
h3 { font-size: 23px; margin: 28px 0 8px; }

.wrap { max-width: 1060px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 6px;
}
.skip:focus { top: 12px; }

/* The engraved scale: major ticks every 50px, minor every 10px. */
.scale {
  height: 12px;
  border-top: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 50px) top left / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10px) top left / 100% 6px no-repeat;
  opacity: .8;
}

.kicker {
  display: block;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 10px;
}

/* ---- Header and footer */

.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 18px; }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); }
.brand b { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: .02em; line-height: 1; }
.brand span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.site-nav li { margin: 0; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--magenta); }
.site-nav a[aria-current="page"] { color: var(--magenta); font-weight: 600; }

.site-foot { margin-top: 48px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 24px 36px; font-size: 14px; color: var(--muted); }
.foot p { margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { color: var(--muted); }
.theme-toggle {
  font: inherit; font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--muted); }

/* ---- Buttons and notes */

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 6px; font-weight: 600; font-size: 15px; text-decoration: none; }
.btn.primary { background: var(--magenta); color: var(--magenta-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.soon { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

.safety-box {
  background: var(--caution-bg); border-left: 4px solid var(--caution-line);
  border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 18px 0;
}
.safety-box .tag {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--caution-line); margin-bottom: 4px;
}
.highlight-box {
  background: var(--magenta-soft); border-left: 3px solid var(--magenta);
  border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 18px 0;
}
.highlight-box h3:first-child { margin-top: 0; }
.effective-date {
  display: inline-block; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; margin-bottom: 18px;
}

/* An unresolved fact must be impossible to miss in review; the pre-publish gate greps for "EVIDENCE:". */
.unresolved { background: #FFE8A3; border: 1px dashed #B26B00; color: #6B4000; padding: 2px 6px; border-radius: 4px; font-weight: 600; }

/* ---- Document pages (privacy, terms, support, 404) */

.page { padding-block: 36px 8px; }
.page .lede { font-size: 18px; color: var(--muted); max-width: 60ch; margin-bottom: 26px; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 30px; }
.prose h2:first-child { margin-top: 0; }

/* ---- Landing */

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding-block: 44px 52px; }
.hero h1 { font-size: 64px; line-height: .98; }
.standfirst { font-size: 18px; color: var(--muted); max-width: 44ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; align-items: center; }

.instrument { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.instrument header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.instrument header b { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: .02em; }
.instrument header span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.inst-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 16px; align-items: center; }
.inst-body svg { width: 100%; height: auto; max-width: 170px; }
.dial-ring { fill: none; stroke: var(--line); }
.dial-ticks { stroke: var(--muted); }
.dial-label { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
.dial-runway { fill: var(--ink); opacity: .88; }
.dial-centreline { stroke: var(--paper); stroke-width: 1.4; stroke-dasharray: 7 6; }
.dial-number { font-family: var(--display); font-weight: 600; font-size: 15px; fill: var(--ink); }
.dial-wind { stroke: var(--magenta); stroke-width: 4; stroke-linecap: round; }
.dial-head { fill: var(--magenta); }
.dial-arc { fill: none; stroke: var(--magenta); stroke-width: 1.5; }
.dial-wind-label { font-family: var(--mono); font-size: 10px; fill: var(--magenta); }
.readouts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.inputs-line { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.readout { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; margin: 0; }
.readout dt { font-size: 13.5px; color: var(--muted); }
.readout dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.readout dd small { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }

.formula { background: var(--magenta-soft); border-top: 1px solid var(--line); padding: 12px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; }
.formula .f { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 24px; color: var(--magenta); grid-row: span 3; line-height: 1; padding-top: 2px; }
/* Lines and note stay in the text column however many there are; the glyph spans only three rows. */
.formula > :not(.f) { grid-column: 2; }
.formula code { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.formula .note { font-size: 12.5px; color: var(--muted); }

.band { padding-block: 40px; }
.band h2 { margin-top: 0; }
.band .lede { color: var(--muted); max-width: 62ch; margin-bottom: 22px; }

/* Calculators as rows on a checklist, each showing its own formula. */
.tools { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tools li { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 6px 18px; align-items: baseline; padding: 16px 4px; border-bottom: 1px solid var(--line); margin: 0; }
.tools .name { font-family: var(--display); font-weight: 600; font-size: 23px; letter-spacing: .01em; line-height: 1.15; }
.tools code { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.tools .status { grid-column: -2 / -1; grid-row: 1; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; }
.tier h3 { font-size: 25px; margin: 0 0 10px; }
.tier h3 small { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-left: 8px; }
.tier li { font-size: 15px; }
.tier .after { margin-top: 12px; font-size: 14.5px; color: var(--muted); }

.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; }
.points h3 { margin-top: 0; }

.tools li.linked { display: block; padding: 0; }
.tools li a { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 6px 18px; align-items: baseline; padding: 16px 4px; color: var(--ink); text-decoration: none; }
.tools li a:hover { background: var(--magenta-soft); }
.tools .go { grid-column: -2 / -1; grid-row: 1; color: var(--magenta); font-weight: 600; font-size: 14px; white-space: nowrap; }

/* ---- Calculator pages (the brief's crosswind prototype is the pattern for all five) */

.calc { padding-bottom: 8px; }
.crumbs { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 26px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--magenta); }
.calc-head { padding-block: 10px 22px; }
.calc-head h1 { margin-bottom: 6px; }
.calc-head .standfirst { margin: 0; }

.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tool .in { padding: 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tool .out { padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.in-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.example-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.linkbtn { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13px; color: var(--chart); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.field .box { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 12px; font-family: var(--mono); font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.field input:focus-visible { outline: 2px solid var(--magenta); outline-offset: -1px; border-radius: 5px; }
.field input[readonly] { cursor: default; }
.field .unit { padding: 0 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); border-left: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; }
.hint { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }

.units { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.units legend { float: left; padding: 0; margin-right: 4px; font-size: 13px; font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 6px 12px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); cursor: pointer; margin: 0; border-left: 1px solid var(--line); }
.seg label:first-of-type { border-left: 0; }
.seg input:checked + label { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + label { outline: 2px solid var(--magenta); outline-offset: -2px; }
.seg input:disabled + label { cursor: default; }

.reference { border: 0; margin: 0; padding: 0; min-width: 0; }
.reference legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.reference .seg label { font-family: var(--sans); font-size: 13px; }
.conversion { margin: 6px 0 0; font-family: var(--mono); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }

.notice { font-size: 13.5px; color: var(--ink); background: var(--magenta-soft); border-left: 3px solid var(--magenta); padding: 8px 12px; border-radius: 0 6px 6px 0; margin: 0; }

.out-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; }
.out-grid:has(.wind-dial) { grid-template-columns: minmax(0, 1fr) 150px; }
.readouts { margin: 0; }
.readouts .readout + .readout { margin-top: 10px; }
.readout .side { color: var(--muted); }
.readout dd .num { font-variant-numeric: tabular-nums; }
.wind-dial { width: 100%; height: auto; }
.dial-arrow { fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linejoin: round; }
.meters { display: grid; gap: 6px; }
.meters div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.meter { width: 100%; height: 6px; display: block; }
.meter-track { fill: var(--line); }
.meter-fill { fill: var(--chart); }
.of { font-size: 12.5px; color: var(--muted); margin: 0; }
.say { font-size: 15px; font-weight: 600; margin: 0; }
.say:empty { display: none; }
.other { font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; margin: 0; }
.other:empty { display: none; }
.pin { display: none; }

.formula-card { margin-top: 14px; }
.formula-card .formula { border-top: 0; }
.worked { margin-top: 30px; }
.worked h2 { margin-top: 0; }
.steps { font-family: var(--mono); font-size: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px 14px 40px; margin: 0; }
.steps li { margin: 0; padding-block: 3px; overflow-wrap: anywhere; }

.stack { display: flex; flex-direction: column; gap: 26px; padding-block: 30px 12px; }
.stack h2 { margin-top: 0; }
.stack .prose h2 { margin-top: 28px; font-size: 30px; }
.stack .prose h2:first-child { margin-top: 0; }
.related { display: flex; flex-wrap: wrap; gap: 10px; }
.related a { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; text-decoration: none; color: var(--ink); }
.related a:hover { border-color: var(--magenta); color: var(--magenta); }
.appband { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.appband p { margin: 0; max-width: 60ch; }
.share { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13.5px; color: var(--muted); }
.btn.quiet { border: 1px solid var(--line); color: var(--ink); background: transparent; padding: 9px 14px; font-size: 14px; cursor: pointer; font-family: inherit; }
.btn.quiet:hover { border-color: var(--muted); }

/* The unit converter: one card per category, one row per pair. */
.converter { display: flex; flex-direction: column; gap: 18px; }
.category { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.category h2 { font-size: 25px; margin: 0 0 6px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px 12px; align-items: end; padding-block: 12px; border-top: 1px dashed var(--line); }
.category h2 + .pair { border-top: 0; }
.pair .swap { padding-bottom: 11px; color: var(--muted); font-size: 18px; }
.pair .caption { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.pair .notice { grid-column: 1 / -1; }

/* Weight & balance: the aircraft and its loading as entry tables, the result, and the CG envelope
   chart. Inside or outside the limits is always said in words and by the marker's shape, never by
   colour alone; the envelope is hatched as well as outlined. */
.wb-aircraft, .wb-rows { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.wb-aircraft legend, .wb-rows legend { padding: 0; margin-bottom: 6px; font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: .02em; }
.wb-aircraft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wb-aircraft legend { grid-column: 1 / -1; float: left; width: 100%; }
.wb-aircraft .hint { grid-column: 1 / -1; margin: 0; }
.wb-aircraft .field label { font-size: 12.5px; }
.wb-aircraft .field input { font-size: 15.5px; padding: 9px 8px; }
.wb-aircraft .field .unit { padding: 0 8px; font-size: 12px; }
.sample-note { margin: 0; font-size: 13px; color: var(--muted); }
table.entry { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.entry th { font-size: 12px; font-weight: 600; text-align: left; padding: 0 6px 4px 0; color: var(--muted); }
table.entry th:last-child { width: 64px; }
table.entry.stations th:first-child { width: 36%; }
table.entry td { padding: 3px 6px 3px 0; }
table.entry td:last-child { padding-right: 0; text-align: right; }
table.entry input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); padding: 8px; font-family: var(--mono); font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
table.entry input[data-field="label"] { font-family: var(--sans); font-size: 14px; }
table.entry input:focus-visible { outline: 2px solid var(--magenta); outline-offset: -1px; }
table.entry input[readonly] { cursor: default; }
.wb-rows > .btn { align-self: flex-start; }
.wb-rows > .btn:disabled { opacity: .5; cursor: default; }
.wb-rows .hint { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wb-status { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.1; padding: 8px 12px; border-radius: 6px; border-left: 4px solid var(--chart); background: var(--paper); }
.wb-status .mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--sans); font-size: 15px; font-weight: 800; background: var(--chart); color: var(--card); flex: none; }
.wb-status[data-within="false"] { border-left-color: var(--caution-line); background: var(--caution-bg); }
.wb-status[data-within="false"] .mark { background: var(--caution-line); border-radius: 4px; }
.wb-figure { margin: 4px 0 0; }
.wb-figure figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
.wb-chart { width: 100%; height: auto; display: block; font-family: var(--mono); }
.chart-plot { fill: var(--paper); stroke: var(--line); }
.chart-grid line { stroke: var(--line); stroke-width: .6; }
.chart-grid .tick { font-size: 8.5px; fill: var(--muted); stroke: none; }
.hatch { stroke: var(--chart); stroke-width: 1.2; opacity: .35; }
.chart-envelope { stroke: var(--chart); stroke-width: 1.6; stroke-linejoin: round; } /* filled with the hatch pattern by its fill attribute */
.chart-gross { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 5 3; }
.chart-gross-label { font-size: 8.5px; fill: var(--ink); }
.axis-title { font-size: 9px; fill: var(--muted); }
.marker-in { fill: var(--chart); stroke: var(--card); stroke-width: 2; }
.marker-out circle { fill: var(--card); stroke: var(--magenta); stroke-width: 2; }
.marker-out path { stroke: var(--magenta); stroke-width: 2.2; stroke-linecap: round; }
.marker-label { font-size: 9px; font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.table-wrap { overflow-x: auto; margin-bottom: 14px; }
table.moments { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
table.moments caption { text-align: left; font-family: var(--sans); font-size: 13px; color: var(--muted); padding-bottom: 6px; }
table.moments th, table.moments td { padding: 7px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.moments th:first-child { text-align: left; font-family: var(--sans); font-weight: 500; white-space: normal; }
table.moments thead th { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted); }
table.moments tfoot th, table.moments tfoot td { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--ink); }

/* ---- Narrow screens */

@media (max-width: 760px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  h1, .hero h1 { font-size: 42px; }
  h2 { font-size: 29px; }
  .page { padding-top: 26px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 26px 34px; }
  .standfirst { font-size: 16.5px; }
  .inst-body { grid-template-columns: 110px minmax(0, 1fr); }
  .readout dd { font-size: 28px; }
  .tools li, .tools li a { grid-template-columns: minmax(0, 1fr) auto; }
  .tools code { grid-column: 1 / -1; grid-row: 2; }
  .tool { grid-template-columns: minmax(0, 1fr); }
  .tool .in { border-right: 0; border-bottom: 1px solid var(--line); }
  .out-grid:has(.wind-dial) { grid-template-columns: minmax(0, 1fr) 120px; }
  .meters div { grid-template-columns: 110px minmax(0, 1fr); }
  .stack .prose h2 { font-size: 27px; }
  .pin:not(:empty) {
    display: block; position: sticky; top: 0; z-index: 2; margin-inline: -16px;
    background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12.5px; padding: 9px 16px;
  }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair .swap { display: none; }
  .wb-aircraft { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wb-aircraft .field:last-of-type { grid-column: 1 / -1; }
  table.entry th:last-child { width: 58px; }
  table.moments th, table.moments td { padding: 6px 8px; font-size: 13px; }
  .wb-status { font-size: 23px; }
  .tiers, .points { grid-template-columns: minmax(0, 1fr); }
}

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