/* Ampron Sky shared UI: tokens and components every page uses (docs/SKY_UI_GUIDELINES.md).
   Values are the designer's (2026-10-16 review, docs/design/2026-10-16-ui-review). Page CSS
   uses these variables; a hex or px that has a token here is never hardcoded there.
   Shared component classes carry the u- prefix so they never meet a page's own names. */
/* fonts: Lexend (UI) and JetBrains Mono (data), Ampron UI v2; each page links them in <head> */
:root {
  /* Ampron UI v2 dark (chrome) + the v2.1 radar extension (canvas and traffic), designer 2026-10-17:
     docs/design/2026-10-17-positions/radar-extension.css. Graphite, no navy cast; red is attention,
     amber is the selected aircraft. Daylight and Phosphor below override the same names. */
  /* grounds (v2 dark) */
  --bg: #0F0F10; --bar: #0F0F10; --map-sea: #0B0B0D; --map-land: #131316; --map-coast: #2A2A30;
  --panel: #17171A; --panel-raised: #1C1C20; --surface: #17171A; --surface-hi: #1E1E22;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.1); --line-strong: rgba(255,255,255,.16); --line-btn: rgba(255,255,255,.1); --line-faint: rgba(255,255,255,.05); --pressed: #3A3940; --off: #4A484F;
  /* text */
  --text: #F0EFF0; --text-2: #B8B6BA; --text-3: #9C9AA0; --text-4: #807E84; --text-dim: #4A484F;
  /* traffic (radar extension: category on the symbol only) */
  --ac-ovf: #C9C7CC; --ac-arr: #56C2E6; --ac-dep: #4ADE80; --ac-vfr: #D4BE8C; --ac-ground: #7A9A92; --ac-mil: #8FA3B8;
  /* state */
  --select: #F59E0B; --select-2: #F7C76B; --ok: #22C55E; --alert: #FF4D57; --alert-text: #FF7A80; --caution: #F59E0B; --brand: #E30613;
  /* airspace outlines (opacity set by the preset); restricted is brick, never plum */
  --as-fir: #4A484F; --as-tma: #2E5573; --as-ctr: #3A78A8; --as-restricted: #9A4A3E; --as-danger: #8A6A2A; --as-tra: #4E8C88;
  /* data blocks (radar extension: --trk-c-1/2/3, leader, not-concerned) */
  --leader: #3A3940; --lbl-1: #E8E6E9; --lbl-2: #B8B6BA; --lbl-3: #8E8C92; --trk-n-text: #77757C;
  /* not-concerned traffic on the scope (ATC review 2.4) */
  --ac-off: #4A484F;
  /* METAR flight categories */
  --wx-vfr: #22C55E; --wx-mvfr: #60A5FA; --wx-ifr: #F59E0B; --wx-lifr: #FF4D57;
  /* tinted state grounds (chips, notes, alert rows) */
  --ok-bg: rgba(34,197,94,.12); --ok-line: rgba(34,197,94,.35); --warn-bg: rgba(245,158,11,.10); --warn-line: rgba(245,158,11,.4); --alert-bg: rgba(255,77,87,.10); --alert-line: rgba(255,77,87,.4);
  --info-bg: rgba(96,165,250,.10); --info-line: rgba(96,165,250,.35); --note-bg: rgba(245,158,11,.08); --note-line: rgba(245,158,11,.3); --note-text: #F7C76B; --sel-tint: rgba(245,158,11,.10);
  /* floating controls over a map or canvas, shadows */
  --overlay: rgba(11,11,13,.86); --overlay-2: rgba(23,23,26,.97); --shadow: rgba(0,0,0,.5); --scrim: rgba(0,0,0,.45);
  --btn-text: #B8B6BA; --tab-text: #807E84; --focus-line: #626068; --foot-fade: rgba(11,11,13,.92); --photo-a: #1C1C20; --photo-b: #17171A;
  /* canvases and the base map (scope, arrival rail, profile, tower radar, MapLibre) */
  --ring: #1F1F24; --ring-2: #18181C; --ring-text: #626068; --cline: #4A484F; --runway: #C9C7CC; --ap-text: #9C9AA0; --cover: #3A3940;
  --lbl-bg: rgba(11,11,13,.55); --lbl-bg-2: rgba(11,11,13,.86); --sel-lbl-bg: rgba(245,158,11,.10); --alert-lbl-bg: rgba(255,77,87,.10);
  --map-landcover: #16161A; --map-building: #18181C; --map-road: #1C1C21; --map-aeroway: #18181C; --map-taxiway: #2A2A30; --map-runway: #4A484F;
  --map-place: #77757C; --map-country: #626068; --hill-shadow: #050506; --hill-hi: #1F1F24; --night: #000000; --night-op: 0.3;
  --vol-bg: #0B0B0D; --sky-bg: #08080A; --rwy-fill: #050506;
  /* geometry (Ampron UI v2): controls 10 px, cards and panels 16 px, chips are pills */
  --r-ctl: 10px; --r-card: 16px;
  /* fonts */
  --mono: 'JetBrains Mono', ui-monospace, monospace; --sans: 'Lexend', system-ui, sans-serif;
}
/* Daylight: the light theme for bright rooms (FAA-HF-STD-010A §5.4.2: a mid-grey achromatic background
   for 200 lux and more and for towers by day; §5.5: text and symbols at least 3:1 against it, 7:1
   preferred; positive polarity, dark on light, as in DFS's P1/VAFORIT). Grey, never white: glare
   stays low and colours read best on a ground between their luminances. Same meanings as Standard:
   amber selection, red alert, the same colour rule. Contrast of every value checked: docs/design/daylight-theme.md */
html.daylight {
  color-scheme: light;
  --bg: #C9CFD5; --bar: #BCC3CA; --map-sea: #BAC1C8; --map-land: #CDD2D7; --map-coast: #8E98A2;
  --panel: #D3D8DD; --panel-raised: #DCE0E4; --surface: #E1E5E9; --surface-hi: #EBEEF1;
  --line: #B3BAC1; --line-2: #A9B1B9; --line-strong: #8E98A2; --line-btn: #9DA6AF; --line-faint: #C2C8CE; --pressed: #5B6570; --off: #6E7884;
  --text: #0E1318; --text-2: #27313A; --text-3: #36414C; --text-4: #454F5A; --text-dim: #4F5A65;
  --ac-ovf: #3E4A57; --ac-arr: #0B5DA3; --ac-dep: #0E7438; --ac-vfr: #7A5A14; --ac-ground: #3F6B60; --ac-mil: #3B5670;
  --select: #8F5300; --select-2: #6E4000; --ok: #0E7438; --alert: #B3121A; --alert-text: #9E0F16;
  --as-fir: #5B6570; --as-tma: #3A6B8F; --as-ctr: #1F5E91; --as-restricted: #8E2A24; --as-danger: #7A5A10; --as-tra: #2C6E69;
  --leader: #66717D; --lbl-1: #0E1318; --lbl-2: #2F3A45; --lbl-3: #3C4651; --ac-off: #5E6873;
  --trk-n-text: #4F5A65; --caution: #8F5300; --alert-lbl-bg: rgba(179,18,26,.10);
  --wx-vfr: #0E7438; --wx-mvfr: #0B5DA3; --wx-ifr: #8F5300; --wx-lifr: #B3121A;
  --ok-bg: #D3EBDC; --ok-line: #6FA886; --warn-bg: #F1E2C8; --warn-line: #B58C4A; --alert-bg: #F2D3D4; --alert-line: #C0767B;
  --info-bg: #D2E2F0; --info-line: #7FA3C6; --note-bg: #EFE3C7; --note-line: #B89A5C; --note-text: #4F3A00; --sel-tint: rgba(143,83,0,.13);
  --overlay: rgba(214,219,224,.94); --overlay-2: rgba(220,224,228,.98); --shadow: rgba(20,28,36,.22); --scrim: rgba(20,28,36,.3);
  --btn-text: #1A222A; --tab-text: #3C4651; --focus-line: #5B6570; --foot-fade: rgba(201,207,213,.94); --photo-a: #C9CED3; --photo-b: #D1D6DA;
  --ring: #A3ABB3; --ring-2: #B3BAC1; --ring-text: #4F5A65; --cline: #8E98A2; --runway: #4A5560; --ap-text: #36414C; --cover: #66717D;
  --lbl-bg: rgba(205,211,217,0.78); --lbl-bg-2: rgba(205,211,217,0.9); --sel-lbl-bg: rgba(143,83,0,0.12);
  --map-landcover: #C8CDD2; --map-building: #BDC3C9; --map-road: #BBC1C7; --map-aeroway: #C0C6CC; --map-taxiway: #A9B1B9; --map-runway: #6B7682;
  --map-place: #46505A; --map-country: #5B6570; --hill-shadow: #8E98A2; --hill-hi: #E1E5E9; --night: #1A2836; --night-op: 0.12;
  --vol-bg: #C3C9CF; --sky-bg: #C7CFD7; --rwy-fill: #4A5560;
}
/* Phosphor: the classic green radar as a theme over any view (More > Theme) */
html.phosphor {
  --bg: #020a05; --bar: #031008; --panel: #04110a; --panel-raised: #06160d; --surface: #071a0f; --surface-hi: #0b2616;
  --line: #0e2a18; --line-2: #12331e; --line-strong: #1a4a2b; --line-btn: #1a4a2b; --line-faint: #0b2214; --pressed: #22603a; --off: #2b6a44;
  --text: #b6ffcf; --text-2: #8fe6ae; --text-3: #6cc98f; --text-4: #4fa673; --text-dim: #3b7d57;
  --ac-ovf: #7dffb0; --ac-arr: #7dffb0; --ac-dep: #7dffb0; --ac-vfr: #7dffb0; --ac-ground: #4fa673; --ac-mil: #b6ffcf;
  --as-fir: #1f5a36; --as-tma: #1f5a36; --as-ctr: #2b7a4a; --as-restricted: #2b7a4a; --as-danger: #2b7a4a; --as-tra: #2b7a4a;
  --leader: #2b6a44; --lbl-1: #b6ffcf; --lbl-2: #6cc98f; --lbl-3: #6cc98f; --ac-off: #1f5a36;
  --trk-n-text: #3b7d57; --caution: #b6ffcf; --wx-vfr: #7dffb0; --wx-mvfr: #7dffb0; --wx-ifr: #b6ffcf; --wx-lifr: #b6ffcf;
}
html, body { font-family: var(--sans); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.mono { font-family: var(--mono); }

/* ---------------- top bar (every view, desktop) ---------------- */
.u-tb { flex: none; height: 48px; display: flex; align-items: center; gap: 18px; padding: 0 16px; background: var(--bar); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.u-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; }
.u-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 13px var(--sans); flex: none; box-sizing: border-box; }
.u-word { font: 500 12px var(--mono); letter-spacing: .08em; white-space: nowrap; color: var(--text); }
.u-word span { color: var(--text-dim); }
.u-tabs { display: flex; height: 48px; margin-left: 12px; flex: none; }
.u-tabs a, .u-tabs button { display: flex; align-items: center; padding: 0 12px; font: 400 13px var(--sans); color: var(--tab-text); text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.u-tabs a:hover, .u-tabs button:hover { color: var(--text-2); }
.u-tabs [aria-selected=true], .u-tabs [aria-current=page] { color: var(--text); font-weight: 500; box-shadow: inset 0 -2px 0 var(--text); }
.u-more { position: relative; display: flex; }
.u-menu { position: absolute; top: 44px; left: 0; min-width: 220px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-ctl); padding: 4px; z-index: 60; box-shadow: 0 8px 24px var(--shadow); }
.u-menu[hidden] { display: none; }
.u-menu a, .u-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: calc(var(--r-ctl) - 2px); background: none; color: var(--text); font: 500 13px var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.u-menu a:hover, .u-menu button:hover { background: var(--surface-hi); }
.u-menu small { font: 400 11.5px var(--sans); color: var(--text-4); }
.u-search { position: relative; display: flex; align-items: center; gap: 8px; width: 260px; min-width: 150px; flex: 0 1 260px; height: 32px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-ctl); box-sizing: border-box; }
.u-search:focus-within { width: 360px; flex-basis: 360px; }
@media (prefers-reduced-motion: no-preference) { html:not(.calm) .u-search { transition: width .15s, flex-basis .15s; } }
.u-search:focus-within { border-color: var(--focus-line); }
.u-search svg { flex: none; }
.u-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 400 13px var(--sans); -webkit-appearance: none; appearance: none; }
.u-search input::placeholder { color: var(--text-4); }
.u-search input::-webkit-search-cancel-button { display: none; }
.u-kbd { font: 500 11px var(--mono); color: var(--text-4); border: 1px solid var(--line-strong); border-radius: calc(var(--r-ctl) - 2px); padding: 1px 5px; flex: none; }
.u-sp { flex: 1; }
/* freshness chip: exactly one per screen; a button that opens the Live / Replay menu */
.u-fresh { --cb: transparent; --cbg: var(--ok-bg); display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border: 1px solid var(--cb); background: var(--cbg); border-radius: 9999px; flex: none; white-space: nowrap; box-sizing: border-box; cursor: default; font: inherit; color: inherit; }
button.u-fresh { cursor: pointer; }
/* on a phone the chip is a 44 px tall target; the pill itself stays 30 px */
button.u-fresh[data-compact] { position: relative; isolation: isolate; height: 44px; min-width: 44px; border-color: transparent; background: transparent; }
button.u-fresh[data-compact]::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; border-radius: 15px; border: 1px solid var(--cb); background: var(--cbg); z-index: -1; }
.u-fresh i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.u-fresh b { font: 600 11.5px var(--mono); color: var(--ok); }
.u-fresh b + span::before { content: '· '; }
.u-fresh span { font: 600 11.5px var(--mono); color: var(--ok); }
.u-fresh.delayed span { color: var(--select); } .u-fresh.stale span { color: var(--alert-text); } .u-fresh.none span { color: var(--text-3); }
.u-fresh em { font: 400 11px var(--mono); font-style: normal; color: var(--text-3); opacity: .7; }
.u-fresh.delayed { --cb: var(--warn-line); --cbg: var(--warn-bg); border-color: var(--cb); background: var(--cbg); } .u-fresh.delayed i { background: var(--select); } .u-fresh.delayed b { color: var(--select); }
.u-fresh.stale { --cb: var(--alert-line); --cbg: var(--alert-bg); border-color: var(--cb); background: var(--cbg); } .u-fresh.stale i { background: var(--alert); } .u-fresh.stale b { color: var(--alert-text); }
.u-fresh.none { --cb: var(--line-strong); --cbg: var(--surface); border-color: var(--cb); background: var(--cbg); } .u-fresh.none i { background: var(--text-4); } .u-fresh.none b { color: var(--text-3); }
/* replay: the chip inverts (light fill, dark text, a square dot) so nobody takes it for live */
.u-fresh.replay { --cb: var(--text); --cbg: var(--text); border-color: var(--cb); background: var(--cbg); } .u-fresh.replay i { background: var(--bar); border-radius: 1px; } .u-fresh.replay b, .u-fresh.replay em { color: var(--bar); } .u-fresh.replay span { color: var(--bar); opacity: .8; }
/* the compact chip (phones): the age itself carries the state colour */
.u-fresh[data-compact] span { color: var(--ok); font-weight: 600; } .u-fresh.delayed[data-compact] span { color: var(--select); } .u-fresh.stale[data-compact] span { color: var(--alert-text); } .u-fresh.replay[data-compact] span { color: var(--bar); opacity: 1; } .u-fresh.none[data-compact] span { color: var(--text-3); }
/* the Live / Replay menu */
.u-tmenu { position: fixed; z-index: 90; width: 330px; min-width: 0; background: var(--panel-raised); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: 0 12px 32px var(--shadow); padding: 6px; box-sizing: border-box; }
.u-menu .u-titem { flex-direction: row; gap: 12px; align-items: flex-start; padding: 10px; border-radius: var(--r-ctl); }
.u-menu .u-titem[aria-checked=true] { background: var(--surface-hi); }
.u-titem i { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--off); }
.u-titem[aria-checked=true] i { border: 5px solid var(--text); }
.u-titem > span { flex: 1; text-align: left; }
.u-titem b { display: block; font: 600 13px var(--sans); color: var(--text); }
.u-titem small { display: block; font: 400 12px var(--sans); color: var(--text-3); margin-top: 1px; }
.u-tnote { border-top: 1px solid var(--line-2); margin: 6px 4px 2px; padding: 8px 6px 4px; font: 400 11.5px/1.45 var(--sans); color: var(--text-4); }
/* the gear: Settings */
.u-gear { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-ctl); background: var(--surface); color: var(--btn-text); border: 1px solid var(--line-strong); cursor: pointer; flex: none; padding: 0; box-sizing: border-box; }
.u-gear:hover { background: var(--surface-hi); }
.u-gear.on { background: var(--text); color: var(--bar); border-color: var(--text); }
.u-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; flex: none; }
.u-clock b { font: 600 16px var(--mono); letter-spacing: .02em; color: var(--text); white-space: nowrap; }
.u-clock b small { font-size: 11px; color: var(--text-4); margin-left: 5px; font-weight: 600; }
.u-clock span { font: 400 11px var(--mono); color: var(--text-4); white-space: nowrap; }

/* ---------------- buttons, segmented controls, chips ---------------- */
.u-btn { height: 32px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); color: var(--text); font: 500 13px var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; text-decoration: none; box-sizing: border-box; flex: none; }
.u-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.u-btn:hover { background: var(--surface-hi); }
.u-btn[aria-pressed=true] { background: var(--surface-hi); border-color: var(--pressed); }
.u-btn.ghost { background: none; border-color: var(--line-btn); color: var(--btn-text); }
.u-btn.icon { width: 30px; padding: 0; font: 400 14px var(--mono); color: var(--text-3); background: none; }
.u-seg { display: inline-flex; background: var(--overlay); border: 1px solid var(--line-2); border-radius: var(--r-ctl); padding: 3px; flex: none; }
.u-seg > span { font: 500 11px var(--sans); color: var(--text-4); padding: 0 8px 0 6px; align-self: center; }
.u-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: calc(var(--r-ctl) - 2px); font: 500 12px var(--sans); background: transparent; color: var(--text-3); cursor: pointer; white-space: nowrap; }
.u-seg button[aria-pressed=true] { background: var(--text); color: var(--bar); }
.u-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--note-line); border-radius: 11px; font: 500 11.5px var(--mono); color: var(--note-text); white-space: nowrap; }
.u-pill span { color: var(--text-3); font-family: var(--sans); }
.u-state { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: calc(var(--r-ctl) - 2px); font: 600 11px var(--mono); letter-spacing: .06em; border: 1px solid; white-space: nowrap; }
.u-state.ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.u-state.warn { color: var(--select); border-color: var(--warn-line); background: var(--warn-bg); }
.u-state.alert { color: var(--alert-text); border-color: var(--alert-line); background: var(--alert-bg); }
.u-state.info { color: var(--ac-arr); border-color: var(--info-line); background: var(--info-bg); }
.u-h { font: 600 12px var(--sans); color: var(--text); }
.u-cap { font: 600 10.5px var(--sans); color: var(--text-4); letter-spacing: .04em; text-transform: uppercase; }
.u-lbl { font: 500 11px var(--sans); color: var(--text-4); }
.u-help { font: 400 12.5px/1.5 var(--sans); color: var(--text-2); }
.u-empty { font: 400 12.5px var(--sans); color: var(--text-4); }

/* ---------------- search results (grouped) ---------------- */
.u-res { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 70; background: var(--bar); border: 1px solid var(--line-2); border-radius: var(--r-ctl); padding: 6px 0; max-height: 70vh; overflow: auto; box-shadow: 0 8px 24px var(--shadow); }
.u-res[hidden] { display: none; }
.u-res .g { padding: 10px 12px 4px; font: 600 10.5px var(--sans); color: var(--text-4); letter-spacing: .04em; text-transform: uppercase; }
.u-res .g:first-child { padding-top: 6px; }
.u-res button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; min-height: 34px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.u-res button:hover, .u-res button.on { background: var(--surface-hi); }
.u-res .c { font: 600 12.5px var(--mono); width: 64px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-res .n { font: 400 13px var(--sans); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-res .n em { font-style: normal; color: var(--text-4); }
.u-res .d { font: 400 11.5px var(--mono); color: var(--text-4); flex: none; }
.u-res b { font-weight: 600; }
.u-res .none { padding: 4px 12px 6px; font: 400 12.5px var(--sans); color: var(--text-4); }
.u-res .more { border-top: 1px solid var(--line-2); margin-top: 6px; padding: 8px 12px 2px; font: 400 12px var(--sans); color: var(--text-3); }

/* ---------------- sheets and scrim (mobile overlays, desktop popovers) ---------------- */
.u-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 80; }
.u-scrim[hidden] { display: none; }
.u-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; max-height: 85dvh; display: flex; flex-direction: column; background: var(--panel); border-top: 1px solid var(--line-2); border-radius:var(--r-card) var(--r-card) 0 0; box-shadow: 0 -8px 24px var(--shadow); padding-bottom: env(safe-area-inset-bottom); }
.u-sheet[hidden] { display: none; }
.u-sheet > header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--line); }
.u-sheet > header h2 { margin: 0; font: 600 15px var(--sans); color: var(--text); }
.u-sheet > .body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px 16px; }
.u-x { width: 44px; height: 44px; border: 0; background: none; color: var(--text-3); font: 400 20px var(--mono); cursor: pointer; flex: none; border-radius: var(--r-ctl); }
.u-x:hover { color: var(--text); background: var(--surface-hi); }
@media (min-width: 700px) {
  .u-sheet { left: auto; right: 16px; top: 64px; bottom: 16px; width: 420px; max-height: none; border: 1px solid var(--line-2); border-radius: var(--r-card); padding-bottom: 0; }
}

/* ---------------- mobile: floating bar and tab bar ---------------- */
.u-mbar { position: absolute; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 40; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 6px; background: var(--overlay); border: 1px solid var(--line-2); border-radius: var(--r-card); box-sizing: border-box; }
.u-mbar .u-mark { width: 40px; height: 40px; border-radius: var(--r-ctl); font-size: 15px; background: var(--brand); color: #fff; cursor: pointer; border: 0; }
.u-mbar input { flex: 1; min-width: 0; height: 44px; background: none; border: 0; outline: 0; color: var(--text); font: 400 16px var(--sans); -webkit-appearance: none; appearance: none; }
.u-mbar input::placeholder { color: var(--text-4); }
.u-mbar .u-fresh:not([data-compact]) { height: 30px; }
.u-mtab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bar); border-top: 1px solid var(--line); box-sizing: border-box; }
.u-mtab a, .u-mtab button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 64px; border: 0; background: none; color: var(--text-4); font: 500 11px var(--sans); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.u-mtab svg { width: 20px; height: 20px; }
.u-mtab [aria-selected=true], .u-mtab [aria-current=page] { color: var(--text); }
/* horizontal scrollers: edge fade on the side that overflows */
.u-hscroll { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.u-hscroll::-webkit-scrollbar { display: none; }
.u-hscroll.end { -webkit-mask-image: none; mask-image: none; }
.u-hscroll.mid { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.u-hscroll.mid.end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
/* the more sheet's rows */
.u-mrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: 500 14px var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.u-mrow small { display: block; font: 400 12px var(--sans); color: var(--text-4); margin-top: 2px; }
.u-mrow svg { width: 20px; height: 20px; color: var(--text-3); flex: none; }
.u-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.u-set > span { font: 500 13px var(--sans); color: var(--text-2); }
@media (pointer: coarse) { .u-seg button { min-width: 44px; height: 36px; } .u-btn { min-height: 44px; } .u-btn.sm { min-height: 44px; } .u-x { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: no-preference) { .u-sheet, .u-menu { transition: opacity .12s; } }
/* the top bar on narrower desks: tighter, then the word mark goes */
@media (max-width: 1440px) { .u-tb { gap: 12px; } .u-tabs a, .u-tabs button { padding: 0 10px; } .u-search { width: 220px; flex-basis: 220px; } .u-search:focus-within { width: 300px; flex-basis: 300px; } }
@media (max-width: 1240px) { .u-word { display: none; } .u-search { width: 180px; flex-basis: 180px; } .u-search:focus-within { width: 260px; flex-basis: 260px; } .u-tabs { margin-left: 0; } }
@media (max-width: 1100px) { .u-tb { gap: 10px; } .u-tb .u-clock span { display: none; } .u-tabs a, .u-tabs button { padding: 0 8px; } .u-search { width: 150px; flex-basis: 150px; } }

/* ---------------- toggles: on and off readable at arm's length (guidelines §8) ---------------- */
.u-switch { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border-radius: 10px; box-sizing: border-box; background: transparent; border: 1.5px solid var(--off); cursor: pointer; }
.u-switch::after { content: ""; position: absolute; inset: -12px -4px; }      /* a 44 px tall target */
.u-switch i { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--text-dim); }
.u-switch[aria-checked=true] { background: var(--text); border-color: var(--text); }
.u-switch[aria-checked=true] i { left: 18px; background: var(--bar); }
.u-chip { height: 32px; padding: 0 12px; border-radius: 16px; font: 500 12.5px var(--sans); background: transparent; color: var(--text-3); border: 1px solid var(--line-strong); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; box-sizing: border-box; }
.u-chip[aria-pressed=true] { background: var(--text); color: var(--bar); border-color: var(--text); }
.u-chip[aria-pressed=true]::before { content: "✓"; font: 600 11px var(--sans); margin-right: 5px; }

/* ---------------- Settings: a drawer over the side panel (desk), a full-height sheet (phone) ---------------- */
.u-settings > header { height: 52px; padding: 0 8px 0 18px; box-sizing: border-box; }
.u-settings > header .u-x { width: 40px; height: 40px; font-size: 18px; }
.u-settings > .body { padding: 6px 18px 18px; }
.u-scap { padding: 14px 0 6px; font: 600 11px var(--sans); letter-spacing: .05em; color: var(--text-3); text-transform: uppercase; }
.u-scap:first-child { padding-top: 10px; }
.u-srow { display: flex; align-items: center; gap: 10px; min-height: 42px; border-bottom: 1px solid var(--line-faint); }
.u-srow > span { flex: 1; min-width: 0; font: 400 13.5px var(--sans); color: var(--text); }
.u-segs { background: none; border-color: var(--line-btn); padding: 2px; }
.u-segs button { height: 28px; }
.u-sloc { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.u-slochd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.u-slochd b { font: 500 13.5px var(--sans); color: var(--text); }
.u-slochd span { font: 400 12px var(--mono); color: var(--text-3); white-space: nowrap; }
.u-sloc p { margin: 0; font: 400 12px/1.4 var(--sans); color: var(--text-4); }
.u-slocb { display: flex; gap: 6px; }
.u-slocb .u-btn { flex: 1; height: 34px; background: var(--surface-hi); font-size: 12.5px; }
.u-sabout { margin: 0; font: 400 12px/1.55 var(--sans); color: var(--text-3); }
.u-sver { margin: 8px 0 0; font: 400 11px var(--mono); color: var(--text-4); }
@media (min-width: 700px) {
  .u-settings { left: auto; right: 0; top: 48px; bottom: 0; width: 392px; border: 0; border-left: 1px solid var(--line-strong); border-radius: 0; box-shadow: -12px 0 32px var(--shadow); z-index: 45; }
  .u-sscrim { display: none !important; }
}
@media (max-width: 699px) {
  .u-settings { top: calc(12px + env(safe-area-inset-top)); max-height: none; z-index: 85; }
  .u-srow { flex-wrap: wrap; row-gap: 6px; padding: 6px 0; }
  .u-segs button { height: 36px; }
}

/* ---------------- the replay player: at the bottom of the current view ---------------- */
.u-player { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--overlay-2); border: 1px solid var(--text); border-radius: var(--r-card); box-sizing: border-box; font: 400 12px var(--sans); color: var(--text-3); }
.u-player[hidden] { display: none; }
.u-pr1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.u-ptag { font: 600 11px var(--mono); letter-spacing: .08em; background: var(--text); color: var(--bar); padding: 3px 8px; border-radius: calc(var(--r-ctl) - 2px); flex: none; }
.u-pday { position: relative; font: 500 13px var(--mono); color: var(--text); flex: none; cursor: pointer; white-space: nowrap; }
.u-pday input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; color-scheme: dark; }
.u-pclk { font: 600 18px var(--mono); color: var(--text); flex: none; white-space: nowrap; }
.u-pclk small { font-size: 11px; color: var(--text-4); margin-left: 4px; }
.u-psp { flex: 1; }
.u-pbtns { display: flex; gap: 10px; flex: none; }
.u-pb { height: 40px; padding: 0 12px; background: var(--surface-hi); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); font: 500 13px var(--mono); color: var(--text); cursor: pointer; white-space: nowrap; }
.u-pplay { padding: 0 18px; background: var(--text); color: var(--bar); border-color: var(--text); font: 600 13px var(--sans); min-width: 76px; }
.u-pspeed { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 2px; margin-left: 8px; flex: none; }
.u-pspeed button { height: 34px; min-width: 44px; border: 0; border-radius: calc(var(--r-ctl) - 2px); background: none; font: 500 12px var(--mono); color: var(--text-3); cursor: pointer; }
.u-pspeed button[aria-pressed=true] { background: var(--text); color: var(--bar); font-weight: 600; }
.u-plive { height: 40px; padding: 0 14px; margin-left: 8px; background: none; border: 1px solid var(--ok-line); color: var(--ok); border-radius: var(--r-ctl); font: 600 13px var(--sans); cursor: pointer; flex: none; white-space: nowrap; }
.u-pslide { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.u-pslide::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--text) var(--p), var(--line-2) var(--p)); }
.u-pslide::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--text) var(--p), var(--line-2) var(--p)); }
.u-pslide::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--text); border: 0; }
.u-pslide::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 0; }
.u-pfoot { display: flex; justify-content: space-between; gap: 10px; font: 400 11px var(--mono); color: var(--text-4); min-width: 0; }
.u-pfoot .u-pnote { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 1180px) { .u-pr1 { flex-wrap: wrap; row-gap: 8px; } .u-psp { display: none; } .u-pbtns { margin-left: auto; } }
@media (max-width: 699px) {
  .u-player { border-radius: 0; border-width: 1px 0 0; padding: 10px 12px; gap: 8px; }
  .u-pr1 { gap: 8px; } .u-pclk { font-size: 16px; }
  .u-pbtns { margin-left: 0; gap: 6px; } .u-pb, .u-plive { height: 44px; } .u-pspeed { margin-left: auto; } .u-pspeed button { height: 40px; min-width: 40px; }
  .u-plive { margin-left: 0; } .u-pbtns { order: 3; } .u-pspeed { order: 4; } .u-plive { order: 2; margin-left: auto; }
}

/* ---------------- traffic symbols in legends and lists: shape by category ---------------- */
.u-sym { display: inline-block; flex: none; width: 7px; height: 7px; border: 1.5px solid var(--c); box-sizing: content-box; }
.u-sym.ci { width: 8px; height: 8px; border-radius: 50%; }
.u-sym.di { transform: rotate(45deg); width: 6px; height: 6px; }

/* ---------------- Settings effects shared by every page ---------------- */
html.calm *, html.calm *::before, html.calm *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
html.txl .u-sheet > .body, html.txl .u-res, html.txl .u-tmenu, html.txl .u-txl { zoom: 1.12; }
button.u-fresh[data-compact].delayed, button.u-fresh[data-compact].stale, button.u-fresh[data-compact].none, button.u-fresh[data-compact].replay { border-color: transparent; background: transparent; }

/* the position switch (radar surfaces): the active segment is ink-filled, never red (radar extension) */
.possw { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-ctl); padding: 2px; gap: 2px; }
.possw button { height: 26px; padding: 0 14px; border-radius: 7px; font: 600 12px var(--mono); color: var(--text-2); background: transparent; }
.possw button[aria-pressed=true] { background: var(--text); color: var(--bar); }