/* ═══════════════════════════════════════════════════════════════════════════
assets/site.css — the WiFi Odds design system. ONE file, every page.
THE FORECAST. The reference is a weather forecast delivered by a colleague who
flies every week: warm paper, two voices in type, and colour that only ever
means something. It replaced The Plate, whose reference was an approach plate
— a document written for a trained, calm, paid reader, which ours is not. The
spec is public/wifiodds-fable/ARCHETYPES.md in the websites repo; where this
file and that file disagree, that file wins.
THE COLOUR RULE. Colour has two owners and no third.
-----------------------------------------------------
THE BANDS own every number. Green 60-100, amber 40-59, clay 1-39, grey for
zero and for every projection. Scores, odds, badges and score chips wear a
band, through --band, which the .sc-* classes set.
THE SKY owns the chrome. Links, buttons, kickers, the rule at the top of every
page, the homepage banner and the orbit mark. One blue at two altitudes —
stratosphere-deep over the paper, pale night-sky over the dark ground — and
always flat. No gradients, no glows, no starfields. The old site had a
starfield canvas and a gradient wordmark and both were deleted for cause.
Nothing that encodes a number may take the sky. Nothing decorative may take a
band. Provenance lines stay muted ink, because they sit inside the data's
screen space. The first chart line that borrows green is the day the score
stops meaning anything, and the first score that turns blue is the day links
stop meaning anything.
The projected score is the standing exception and it is a NEGATIVE one: it
never takes --band. Grey outline, always. See .proj near the end of this file.
TWO THEMES, ONE TOKEN SET
-------------------------
LIGHT IS THE DEFAULT (:root) and it is the register decision, not a taste one:
cockpits are dark because they fly at night, and the reader booking a Tuesday
flight is not. Dark is the same room with the lamp on — a warm brown-black
ground and cream ink, never a cold inversion of the light theme.
The dark values appear twice because CSS cannot alias a declaration block:
once under the OS preference, so pages are correct with JavaScript off, and
once under the manual .dark class the masthead switch sets. IF YOU CHANGE A
DARK VALUE, CHANGE IT IN BOTH PLACES.
NOTHING IS STORED. No cookie, no localStorage, no fingerprint. The switch
holds its state in a class on until you reload, and that is the ceiling
for cleverness here. The old build wrote localStorage.woTheme; that key is
gone, and so is the boot script that read it.
TYPE — two voices, one webfont, 41 KB
-------------------------------------
THE SERIF SPEAKS TO THE READER: headings, the say-sentence, the wordmark, and
every large figure. Source Serif 4 (Adobe, SIL OFL), self-hosted, subset, two
real weights. Self-hosted rather than a system stack because Charter/Georgia/
Noto Serif is three different faces for one voice depending on who is reading.
THE SANS REPORTS: tables, labels, provenance, footnotes, micro-caps. That one
stays on system-ui and costs zero bytes. It is the right call rather than a
budget one — this voice lives at 12 to 14px, where the reader's own OS face is
already hinted and rasterised for their screen, and where an unhinted webfont
is measurably worse. A table set in the platform's own UI face also reads as
the system reporting, which is the register the spec asks for.
Source Serif's figures are tabular by default (all ten digits measure 529
units), so a numeral does not change width when it changes value. That was the
whole job B612 Mono was doing, and it no longer needs a fourth font file.
--mono is a system stack now and is reserved for what is literally code: the
API paths, the formula blocks.
Regenerate the faces with `python3 build/make-brand.py fonts`.
Licence: assets/SourceSerif4-OFL.txt.
ANIMATION IS A PRIVILEGE, NOT A DEFAULT. Every animated rule is scoped under
html.anim, a class site.js adds only when prefers-reduced-motion is
no-preference. No JS / reduced motion => the page is already finished.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Source Serif 4, self-hosted ──────────────────────────────────────────
Subset with fontTools to Latin plus the punctuation and symbols the pages
actually use (checked by counting the non-ASCII characters in the built HTML,
not by guessing). font-display:swap, so a slow font never blocks the text —
and the fallback stack below is metric-adjacent enough that the swap does not
reflow a heading into a second line. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
src:url(/assets/serif-400.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;
src:url(/assets/serif-700.woff2) format("woff2")}
:root{
/* ── the two voices, plus code ── */
--serif:"Source Serif 4",Charter,"Bitstream Charter","Iowan Old Style",Georgia,"Times New Roman",serif;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,"DejaVu Sans Mono",Consolas,monospace;
color-scheme:light;
/* ── surfaces and ink. Warm paper, warm near-black. ── */
--paper:#fbf8f2; --panel:#f4eee2; --card:#ffffff; --field:#ffffff;
--ink:#29241c; --ink-soft:#443d32; --muted:#6e6557; --muted-strong:#59503f;
--line:#e3daca; --line-soft:#ece5d6;
/* ── the bands. Every number on the site, and nothing else. ── */
--good:#1e7a46; --mixed:#a06400; --long:#a84b2f; --zero:#8a8177;
--proj:#7c7568; --proj-bg:#efe9dc;
/* ── the sky. Every piece of chrome, and nothing else. ── */
--sky:#2d5a7d; --sky-deep:#22455f; --sky-fg:#e9f1f7;
--link:var(--sky); --placeholder:#9b917f;
--btn-bg:var(--sky); --btn-fg:#f5f9fc;
--sheen:none;
/* --band is what every accented surface reads. Un-scored chrome inherits the
muted ink, which is the correct answer for chrome. */
--band:var(--muted-strong);
/* ── the six-stop score arc ──────────────────────────────────────────────
build/lib/pages.js bands at 85/60/35/20/5 and emits six .sc-* classes. The
spec has four bands. Six map onto four, so a score cannot invent a fifth
hue: exc and good are both green, long and rare are both clay. The one real
seam is at 35-39, which pages.js calls `mix` (amber) and the spec calls clay
— moving that threshold is a data-layer change and does not belong here. */
--s-exc:var(--good);
--s-good:var(--good);
--s-mix:var(--mixed);
--s-long:var(--long);
--s-rare:var(--long);
--s-no:var(--zero);
/* ── compatibility aliases ───────────────────────────────────────────────
build/lib/render.js, build/lib/viz.js, build/lib/pages.js and the four page
templates reference these names inline (var(--faint) in a span style,
var(--r-md) in a border-radius, and so on). They are kept as aliases onto
the tokens above so that a re-skin of this file cannot silently blank out an
SVG or a caption in a file it does not own. New rules should use the tokens
above. --gold/--green/--blue/--red are only ever read inside .plc and .rlc,
both of which redeclare them; they are aliased here so that nothing goes
undefined if that ever stops being true. */
--bg:var(--paper);
--bg-panel:var(--panel);
--bg-inset:var(--panel);
--ink-2:var(--ink-soft);
--ink-3:var(--muted);
--rule:var(--line-soft);
--rule-2:var(--line);
--low:var(--long);
--none:var(--zero);
--surface:var(--panel);
--edge:var(--line);
--edge-strong:var(--line);
--body:var(--ink-soft);
--dim:var(--ink-soft);
--faint:var(--muted);
--accent:var(--ink);
--brand:var(--sky);
--brand-deep:var(--sky-deep);
--brand-lift:var(--sky);
--sky-bright:var(--sky);
--gold:var(--mixed); --green:var(--good); --blue:var(--sky);
--amber:var(--mixed); --red:var(--long);
--field-bg:var(--field);
--shadow:none;
--bg-glow-a:transparent; --bg-glow-b:transparent;
/* ── chart semantics — used by every visualization, no exceptions ────────
A chart line is not a score, so lines are INK, told apart by weight and dash
pattern and labelled at the line's end. The waffle's lit cells are the one
exception and they earn it: a lit cell is a count of equipped aircraft, so
it takes the green it would take as a number. */
--viz-equipped:var(--good);
--viz-empty:var(--panel);
--viz-mainline:var(--ink);
--viz-express:var(--muted);
--sys-starlink:var(--ink); --sys-leo:var(--muted); --sys-viasat:var(--muted-strong);
--sys-legacy:var(--muted); --sys-none:transparent;
/* radii. The Forecast has soft corners; the Plate had none. Kept as tokens
because render.js asks for var(--r-md) in an inline style. */
--r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px;
/* type scale. Body never drops below 16px — that is a spec line, not a taste. */
--fs-body:16px; --fs-small:14px; --fs-micro:12px;
}
:root.dark{
color-scheme:dark;
--paper:#1b1713; --panel:#241f19; --card:#2b251d; --field:#241f19;
--ink:#f2e9db; --ink-soft:#cfc4b3; --muted:#a4988a; --muted-strong:#c9bda9;
--line:#3a332a; --line-soft:#2e2820;
--good:#63c98a; --mixed:#e0a53f; --long:#e07a5f; --zero:#8d8172;
--proj:#a99e8e; --proj-bg:#2b251d;
--sky:#9dc2dc; --sky-deep:#16293a; --sky-fg:#c9dcea;
--link:var(--sky); --placeholder:#7d7264;
--btn-bg:#9dc2dc; --btn-fg:#12222f;
--sheen:inset 0 1px 0 rgba(242,233,219,.06);
--viz-empty:var(--panel);
}
@media (prefers-color-scheme:dark){
:root:not(.light){
color-scheme:dark;
--paper:#1b1713; --panel:#241f19; --card:#2b251d; --field:#241f19;
--ink:#f2e9db; --ink-soft:#cfc4b3; --muted:#a4988a; --muted-strong:#c9bda9;
--line:#3a332a; --line-soft:#2e2820;
--good:#63c98a; --mixed:#e0a53f; --long:#e07a5f; --zero:#8d8172;
--proj:#a99e8e; --proj-bg:#2b251d;
--sky:#9dc2dc; --sky-deep:#16293a; --sky-fg:#c9dcea;
--link:var(--sky); --placeholder:#7d7264;
--btn-bg:#9dc2dc; --btn-fg:#12222f;
--sheen:inset 0 1px 0 rgba(242,233,219,.06);
--viz-empty:var(--panel);
}
}
/* ── the band map ─────────────────────────────────────────────────────────
Put a .sc-* class on any element and its whole subtree accents to that score.
[data-band] is the same switch under the name the older markup used. */
.sc-exc {--band:var(--s-exc)}
.sc-good{--band:var(--s-good)}
.sc-mix {--band:var(--s-mix)}
.sc-long{--band:var(--s-long)}
.sc-rare{--band:var(--s-rare)}
.sc-no {--band:var(--s-no)}
[data-band="good"] {--band:var(--good)}
[data-band="mixed"]{--band:var(--mixed)}
[data-band="low"] {--band:var(--long)}
[data-band="none"] {--band:var(--zero)}
.s-good{color:var(--good)} .s-mixed{color:var(--mixed)}
.s-long{color:var(--long)} .s-zero{color:var(--zero)}
/* ── base ─────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
background:var(--paper);
color:var(--ink);
font:400 var(--fs-body)/1.55 var(--sans);
-webkit-font-smoothing:antialiased;min-height:100vh;
-webkit-tap-highlight-color:transparent;
/* Every page opens on a thin rule of sky at its top edge. On the homepage the
extension banner sits directly under it in the same colour, so the rule
reads as the banner's top edge there. */
border-top:4px solid var(--sky-deep);
}
/* Links are the sky and they are underlined. An underline that thickens on
hover is the whole interaction; there is no colour change, because the colour
already means "this is chrome you can press". */
a{color:var(--link);text-decoration:underline;text-underline-offset:2px;
text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:700;letter-spacing:-.012em;
line-height:1.18}
/* THE SPEAKING VOICE. Anything that sounds like a colleague talking takes the
serif; anything that reports takes the sans. Read the block aloud if unsure. */
.say,.lede,.sec-lede,.callout p,.moves b,dl.loop dt{font-family:var(--serif)}
.lede,.sec-lede{font-size:1.06rem;color:var(--ink-soft);max-width:44rem}
.lede b,.sec-lede b{color:var(--ink);font-weight:700}
.say{font-size:1.18rem;line-height:1.5;margin:.35rem 0 .6rem;max-width:38rem}
/* THE FIGURES. Serif, tabular by default in this face, so a digit does not
change width when it changes value. If you add a class that holds a large
number, add it here rather than setting font-family locally. */
.n,.sco,.big,.v,.fa-big,.chip .n,.stat .n,.kv .v,.scorenum .n,.proj .pv,
.usrow .sco{
font-family:var(--serif);font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1}
/* THE REPORTING NUMERALS. Sans, tabular. Table cells, ranks, counts, captions. */
.num,.ct,.dn,.rank,.tblcap,.fa-as,.fchk-in,td.num,th.num,input{
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* Literal code: API paths, formula blocks. The only monospace on the site. */
.mono,.code{font-family:var(--mono)}
/* The column is a column, not a ruled margin. The Plate drew hairlines and
ticks down both edges of .wrap; that was the plate idiom and it left with it. */
.wrap{max-width:66rem;margin:0 auto;position:relative;
padding:0 max(1.25rem,env(safe-area-inset-right)) 0 max(1.25rem,env(safe-area-inset-left))}
.prose{max-width:44rem}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.needs-js{display:none}
html.js .needs-js{display:revert}
html.js .no-js-only{display:none}
/* ── the extension banner ─────────────────────────────────────────────────
HOMEPAGE ONLY, one instance, above the masthead. Two jobs: the store link for
the visitor who came only to install, and a jump to the companion half for
everyone else. It is chrome, not a pitch — the one pitch on this site is the
companion half of the homepage and there is no second one. It never grows a
second sentence, and its version number tracks what the store serves today. */
.extbar{background:var(--sky-deep);color:var(--sky-fg);font-size:.85rem;line-height:1.45}
.extbar .wrap{display:flex;align-items:baseline;gap:.25rem 1rem;flex-wrap:wrap;
padding-top:.55rem;padding-bottom:.55rem}
.extbar .q{font-weight:600}
.extbar a{color:inherit;text-decoration:underline;text-underline-offset:2px;
text-decoration-thickness:1px}
.extbar a:hover{text-decoration-thickness:2px}
.extbar .jump{opacity:.85}
/* ── the masthead ─────────────────────────────────────────────────────────
Orbit mark, serif wordmark, nav, the theme switch and the datechip. Every page
carries it, and the date in it comes from united/data.json by way of
H.page({updated}). Nothing here is hard-coded; a stale date is worse than
no date. */
header.site{border-bottom:1px solid var(--line);background:var(--paper)}
/* padding-top/bottom, never the shorthand. .masthead is also a .wrap, and
`padding:1rem 0` silently zeroed the horizontal padding .wrap provides, so
the wordmark, nav and datechip sat flush to the screen edge while the body
stayed inset. Below 431px a later .wrap rule happened to restore it, which
is exactly why it hid: every narrow width I tested looked correct. */
.masthead{display:flex;align-items:baseline;gap:.6rem 1.25rem;flex-wrap:wrap;
padding-top:1rem;padding-bottom:1rem}
.wordmark{font-family:var(--serif);font-size:1.35rem;font-weight:700;letter-spacing:-.01em;
color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark:hover{text-decoration:none}
/* The orbit mark. Inline SVG drawn in currentColor; this sets the colour, and
the colour is the sky, because the mark is chrome. It is inline in the
document so the custom property resolves — inside an it would silently
fall back to black. */
.wordmark .mk{color:var(--sky);vertical-align:-.12em;margin-right:.35rem}
/* The 26 Jul pivot: underlined default-blue nav read as nobody decided this.
Small-caps wordmarks now, hover fill, no underline. The Extension link is the
one FILLED element because it is the only nav item that is an action rather
than a place — still one pitch sitewide, just dressed as what it is. */
.masthead nav{margin-left:auto;display:flex;gap:.2rem;font-size:.92rem;flex-wrap:wrap;
align-items:center}
.masthead nav a{color:var(--muted-strong);text-decoration:none;font-size:.72rem;
font-weight:650;letter-spacing:.11em;text-transform:uppercase;padding:.5rem .65rem;
border-radius:8px}
.masthead nav a:hover{color:var(--ink);background:var(--bg-inset);text-decoration:none}
.masthead nav a[aria-current="page"]{color:var(--ink)}
.masthead nav a.cta{color:var(--btn-fg);background:var(--btn-bg);margin-left:.35rem}
.masthead nav a.cta:hover{color:var(--btn-fg);background:var(--btn-bg);filter:brightness(1.08)}
.datechip{font-size:.78rem;color:var(--muted);letter-spacing:.02em;width:100%;
padding-bottom:.15rem}
.datechip b{color:var(--muted-strong);font-weight:600}
/* The switch is hidden until the inline script reveals it, so a page without
JavaScript never shows a control that cannot work. Its title text is
deliberate down to the clause about storage; do not shorten it. */
/* Prominent since the 26 Jul pivot: dark is the default now, and the switch
label is a full sentence of intent ("Switch to light") so a casual reader
knows what clicking does without decoding a state word. */
.themetoggle{font:inherit;font-size:.8rem;letter-spacing:.02em;padding:.42rem .95rem;
border:1.5px solid var(--muted);border-radius:99px;background:transparent;
color:var(--ink);cursor:pointer;font-weight:600}
.themetoggle u{text-decoration:none}
.themetoggle:hover{border-color:var(--sky);color:var(--sky)}
/* ── crumbs ─────────────────────────────────────────────────────────────── */
.crumb{font-size:.82rem;color:var(--muted);padding:1rem 0 0}
.crumb a{color:var(--link)}
.crumb .sep{padding:0 .45rem;color:var(--muted)}
.crumb [aria-current="page"]{color:var(--muted-strong)}
/* ── airline sub-nav: the SECOND header row ───────────────────────────────
The masthead nav says where you are on the SITE and is identical on every
page. .subnav says where you are inside ONE airline. Anything airline-specific
belongs here — with 18 airlines it can never live in the masthead. */
.subnav{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem 1rem;
padding:.7rem 0;border-bottom:1px solid var(--line-soft);font-size:.9rem}
.subnav .sn-air{font-family:var(--serif);font-weight:700;color:var(--ink);
white-space:nowrap}
.subnav a{white-space:nowrap}
.subnav a[aria-current="page"]{color:var(--ink);text-decoration-thickness:2px}
.subnav .sn-back{margin-left:auto;color:var(--muted)}
.subnav.lone .sn-back{margin-left:0}
.subnav.lone .sn-air{margin-left:auto}
@media(max-width:560px){.subnav .sn-back{margin-left:0}.subnav.lone .sn-air{margin-left:0}}
/* ── type ─────────────────────────────────────────────────────────────── */
.hero{padding:2.6rem 0 .4rem}
.hero h1{font-size:clamp(1.9rem,5.2vw,3rem);line-height:1.12;letter-spacing:-.015em;
max-width:21ch}
h1.ph{font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.14;margin:.5rem 0 0}
/* the second line of the hero, one step down the scale */
.hero h1 .tag{display:block;font-size:clamp(1.05rem,2.4vw,1.4rem);font-weight:400;
letter-spacing:-.004em;margin-top:.6rem;color:var(--ink-soft)}
.lede{margin-top:.9rem}
/* THE KICKER IS SKY. It is the one all-caps label that is chrome rather than
provenance: it names the section the way a forecast names a panel. Provenance
labels stay muted ink — see .cls and .src. */
.kicker{display:block;font-family:var(--sans);font-size:.75rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin:0 0 .6rem}
.kicker .dot{display:inline-block;width:.44rem;height:.44rem;border-radius:50%;
background:var(--band);margin-right:.5rem;vertical-align:.06em}
/* Sections divide with a hairline and a sky kicker. There are no cards around
sections and no headings floating in space. */
section.blk{position:relative;border-top:1px solid var(--line-soft);
margin:2.6rem 0 0;padding-top:2rem}
.sec-h{display:flex;align-items:baseline;gap:.5rem 1rem;margin-bottom:.6rem;flex-wrap:wrap}
.sec-h h2{font-size:clamp(1.35rem,3.4vw,1.8rem);line-height:1.2}
.sec-h .sub{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--sky)}
section.blk>.sec-h>.sub{display:block;width:100%;margin-bottom:.1rem}
.sec-h .more{margin-left:auto;font-size:.85rem}
.sec-lede{margin-bottom:1.1rem}
/* .micro is the reporting label: quiet ink, never sky, because it sits inside
the data's screen space. */
.micro{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted)}
.note{font-size:.86rem;color:var(--ink-soft)}
.footnote{font-size:.84rem;color:var(--muted);max-width:44rem}
/* ── boxes ────────────────────────────────────────────────────────────── */
.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:1.1rem 1.2rem;box-shadow:var(--sheen);color:inherit}
a.card{text-decoration:none;display:flex;flex-direction:column;gap:.5rem}
a.card:hover{border-color:var(--muted);text-decoration:none}
.card h3{font-size:1.05rem}
.card p{font-size:var(--fs-small);color:var(--ink-soft)}
.card .go{margin-top:auto;font-size:.78rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--link)}
a.card:hover .go{text-decoration:underline;text-decoration-thickness:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:860px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.4rem 0 .5rem}
@media(max-width:860px){.chips{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.chips{grid-template-columns:1fr}}
.chip{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sheen);padding:.9rem 1rem}
.chip .n{font-size:1.7rem;font-weight:700;line-height:1.05;color:var(--ink);
letter-spacing:-.02em}
.chip .n small{font-size:.9rem;color:var(--muted);font-weight:400}
.chip .l{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);margin-top:.5rem}
.chip .d{font-size:.8rem;color:var(--ink-soft);margin-top:.3rem}
.chip .d .up{color:var(--good);font-weight:700}
/* .glow is a name from the old system. It means "this number wears its band",
and there is no glow: it is flat colour, like everything else. */
.chip.glow .n{color:var(--band)}
.chip.hero-kpi .n{font-size:2.6rem}
/* ── US airlines at a glance (homepage only) ───────────────────────────────
Seven fixed carriers (build/lib/pages.js US_MAJORS), four across, so the last
row is three. The set never grows with the data, which is why the column count
is a literal 4 and not an auto-fit: a row that reflows on every data pull is a
layout nobody has actually looked at.
The score reuses the leaderboard's `.sco` NAME but not its rule — that one is
scoped `table.tbl .sco`. Do not "dedupe" the two by unscoping the table rule;
it would resize every leaderboard cell on /airlines/. */
.usrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.2rem 0 .6rem}
@media(max-width:980px){.usrow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.usrow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.usrow{grid-template-columns:1fr}}
.usrow .card{padding:.9rem 1rem;gap:.35rem}
.ush{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.ush h3{margin-right:auto;font-size:1rem}
.usrow .sco{font-size:1.5rem;font-weight:700;color:var(--band);line-height:1;
letter-spacing:-.02em}
/* the three stacked lines: next-gen headline, today's tier, and the ConnectScore
footer that lets a reader reconcile this row's order with /airlines/. See the
comment above usGlance() in build/lib/pages.js for why there are three. */
.usng{font-weight:700;color:var(--ink-soft);font-size:.92rem}
.usnow{color:var(--ink-soft);font-size:.92rem}
.uscs,.ustat{margin-top:auto;padding-top:.5rem;border-top:1px solid var(--line-soft);
font-size:.75rem;letter-spacing:.04em;color:var(--muted)}
/* ── buttons, badges, pills ───────────────────────────────────────────────
One button and it is the sky, because a button is chrome. The ghost is its
outline. Nothing here ever takes a band. */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.15rem;
border-radius:var(--r-md);font:inherit;font-weight:600;font-size:.95rem;
background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;
border:1px solid var(--btn-bg);cursor:pointer}
.btn:hover{text-decoration:none;filter:saturate(1.1)}
.btn.ghost{background:transparent;color:var(--link);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--sky);filter:none}
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.3rem}
.microlinks{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.9rem;font-size:.85rem}
/* Badges. A badge that carries a NUMBER wears its band; a badge that carries a
CATEGORY stays ink and tells itself apart by border style. */
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;padding:.14rem .5rem;border-radius:99px;
border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.good{color:var(--good);border-color:currentColor}
.badge.mixed{color:var(--mixed);border-color:currentColor}
.badge.long,.badge.low{color:var(--long);border-color:currentColor}
.badge.zero,.badge.none{color:var(--zero);border-color:currentColor}
.badge.live{color:var(--good);border-color:currentColor}
.badge.cachetag,.badge.offline{color:var(--muted-strong);border-color:var(--line)}
/* mainline vs express is a category, not a score, so it stays monochrome and
separates itself with the border style instead of a hue. */
.badge.mainline{color:var(--muted-strong);border-color:var(--muted)}
.badge.express{color:var(--muted);border-style:dashed}
.pill{display:inline-block;font-size:.8rem;padding:.14rem .5rem;border-radius:99px;
margin:.12rem .35rem .12rem 0;background:transparent;border:1px solid var(--line);
color:var(--ink-soft)}
.pill.add{color:var(--good);border-color:currentColor}
.pill.tail{color:var(--ink-soft)}
.pill.soon{color:var(--muted-strong);border-style:dashed;font-size:.75rem;margin:0}
.pill.live{color:var(--good);border-color:currentColor;font-size:.75rem;margin:0}
a.pill{text-decoration:none}
a.pill:hover{border-color:var(--muted)}
/* The score band chip. This one IS allowed the colour: it is the score. */
.band{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;padding:.14rem .5rem;border-radius:99px;white-space:nowrap;
color:var(--band);border:1px solid currentColor}
.band.good{color:var(--good)} .band.mixed{color:var(--mixed)}
.band.long{color:var(--long)} .band.zero{color:var(--zero)}
.legend{display:flex;gap:.5rem 1.1rem;flex-wrap:wrap;margin:.5rem 0 .8rem;
font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:.45rem}
.legend i{width:.6rem;height:.6rem;display:inline-block;flex:none;background:var(--line)}
.legend i.eq{background:var(--viz-equipped)}
.legend i.no{background:var(--viz-empty);border:1px solid var(--line)}
.legend i.ml{background:var(--viz-mainline)}
.legend i.ex{background:var(--viz-express)}
/* System dots key a CATEGORY, not a score, so they are ink graded by weight —
no legend on this site resolves by colour alone. */
.sysdot{width:.5rem;height:.5rem;display:inline-block;flex:none;margin-right:.45rem;
border-radius:50%;background:var(--sys-legacy)}
.sysdot.starlink{background:var(--sys-starlink)}
.sysdot.leo{background:var(--sys-leo);box-shadow:inset 0 0 0 1px var(--muted)}
.sysdot.viasat,.sysdot.ku,.sysdot.intelsat{background:var(--sys-viasat)}
.sysdot.panasonic,.sysdot.thales,.sysdot.inmarsat,.sysdot.anuvu{background:var(--sys-legacy)}
.meta-pill{display:inline-block;font-size:.75rem;color:var(--muted);
border:1px solid var(--line);border-radius:99px;padding:.1rem .5rem}
/* ── progress tapes ───────────────────────────────────────────────────────
A ruled inset with a solid band fill. The colour is the band, so a bar next to
a score always agrees with it.
COLLISION NOTE: /united/ has its own .track/.fill pair (inline widths set by
1400 lines of live-tested app JS). These rules must not outrank it, which is
why the fill selector is wrapped in :where() — that keeps it at .fill-level
specificity, so the optimizer's own later rules win on that page and these win
everywhere else. Do not "simplify" the :where() away.
Width comes from a baked --pct custom property, not an inline width, so the
html.anim rules further down can start it at 0 and grow it. No JS => --pct is
used directly and the bar is already correct. */
.track{display:block;height:.5rem;border-radius:99px;background:var(--proj-bg);
border:1px solid var(--line);overflow:hidden}
.chip .track,.stat .track,.hpanel .track,.scorebox .track{margin-top:.55rem}
:where(.track) .fill{display:block;height:100%;border-radius:99px;width:var(--pct,0%);
background:var(--band);transition:width 1s ease-out}
:where(.track) .fill.ml{background:var(--viz-mainline)}
:where(.track) .fill.ex{background:var(--viz-express)}
.track.mini{height:.4rem;width:5.75rem;margin:0}
/* ── tables. Real tables, ruled rows, no shell. ─────────────────────────── */
.tbl-shell,.tscroll{background:transparent;border:0;overflow-x:auto;
-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
table.tbl{min-width:40rem}
table.tbl th,table.tbl td{text-align:left;padding:.5rem .6rem .5rem 0;font-size:.92rem;
border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.tbl thead th{font-size:.72rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);white-space:nowrap;position:sticky;top:0;
background:var(--paper);border-bottom:1px solid var(--ink);padding-bottom:.45rem;
vertical-align:bottom}
table.tbl tbody tr:last-child td{border-bottom:1px solid var(--line)}
table.tbl tbody tr:hover{background:var(--panel)}
table.tbl td.num,table.tbl td.mono{white-space:nowrap}
th.num,td.num{text-align:right}
table.tbl td b{color:var(--ink);font-weight:700}
table.tbl .rank{color:var(--muted);font-size:.8rem;width:2.6rem}
table.tbl .aname{font-weight:700}
table.tbl .code{font-size:.72rem;font-weight:600;color:var(--muted);margin-left:.45rem;
letter-spacing:.1em}
table.tbl .sco{font-size:1.4rem;font-weight:700;color:var(--band);line-height:1;
letter-spacing:-.02em}
/* the instrumented carriers get a tick in the margin, the way a forecast marks
the row it wants you to read. It is ink: instrumentation is a provenance
class, not a score. */
table.tbl tr.instr{box-shadow:inset 2px 0 0 var(--muted-strong)}
table.tbl tr.instr td:first-child{padding-left:.6rem}
html.js table.tbl th[data-k]{cursor:pointer;user-select:none}
html.js table.tbl th[data-k]:after{content:"\2195";opacity:.45;margin-left:.3rem;font-size:.72rem}
html.js table.tbl th[data-k][aria-sort="ascending"]:after{content:"\2191";opacity:1}
html.js table.tbl th[data-k][aria-sort="descending"]:after{content:"\2193";opacity:1}
@media(max-width:720px){.hide-sm{display:none}}
.tblcap{font-size:.75rem;letter-spacing:.05em;color:var(--muted);margin-top:.7rem}
.caveat{margin-top:.9rem;font-size:.86rem;color:var(--ink-soft);
border:1px solid var(--line);border-left:3px solid var(--line);
background:var(--panel);border-radius:var(--r-md);padding:.8rem 1rem}
.empty-state{font-size:.86rem;color:var(--muted);border:1px dashed var(--line);
border-radius:var(--r-md);padding:.8rem 1rem}
/* ── filter chips + search (JS-only affordances) ──────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:.3rem 0 .9rem}
.filters button{font:inherit;font-size:.82rem;color:var(--ink-soft);cursor:pointer;
padding:.3rem .7rem;border:1px solid var(--line);border-radius:99px;background:transparent}
.filters button:hover{border-color:var(--muted)}
.filters button[aria-pressed="true"]{color:var(--btn-fg);background:var(--btn-bg);
border-color:var(--btn-bg)}
.srch{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .9rem}
.srch input{font:inherit;padding:.5rem .7rem;border-radius:var(--r-md);font-size:.9rem;
background:var(--field);color:var(--ink);border:1px solid var(--line);min-width:11rem}
.srch input::placeholder{color:var(--placeholder)}
.srch input:focus{outline:none;border-color:var(--sky)}
/* ── Hangar Floor waffle ──────────────────────────────────────────────────
Dim cells are the fleet, lit cells are what is flying. A lit cell is a count,
so it takes the band's green; the dim ones are ink at low opacity. */
.hangar{display:grid;gap:1rem}
.hpanel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sheen);padding:1rem 1.1rem}
.hpanel-h{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.25rem}
.hpanel-h .ty{font-family:var(--serif);font-size:1.02rem;font-weight:700;color:var(--ink)}
.hpanel-h .ct{font-size:.82rem;color:var(--muted);margin-left:auto}
.hpanel-h .ct b{color:var(--ink);font-weight:700}
.waffle{display:grid;grid-template-columns:repeat(auto-fill,minmax(10px,1fr));gap:2px;
margin-top:.7rem}
.waffle i{display:block;aspect-ratio:1;border-radius:1px;background:var(--muted);opacity:.28}
.waffle i.eq{background:var(--viz-equipped);opacity:1}
.waffle i.eq:hover{transform:scale(1.6);position:relative;z-index:2}
.hpanel .cap{font-size:.78rem;color:var(--muted);margin-top:.55rem}
.mini-waffle{display:grid;grid-template-columns:repeat(auto-fill,minmax(9px,1fr));gap:2px;
margin:.25rem 0 .15rem}
.mini-waffle i{display:block;aspect-ratio:1;border-radius:1px;background:var(--muted);opacity:.28}
.mini-waffle i.eq{background:var(--viz-equipped);opacity:1}
/* ── visualizations (baked SVG) ───────────────────────────────────────────
Lines are ink, told apart by weight and dash pattern, labelled at each line's
end. No chart line borrows a band. */
.viz{width:100%;height:auto;display:block;overflow:visible}
.viz .gl{stroke:var(--line-soft);stroke-width:1}
.viz .ax{fill:var(--muted);font-family:var(--sans);font-size:10px}
.viz .lbl{fill:var(--ink);font-family:var(--sans);font-size:12px;font-weight:700}
.viz .a-ml{fill:var(--viz-mainline);fill-opacity:.10}
.viz .a-ex{fill:var(--viz-express);fill-opacity:.10}
.viz .s-ml{stroke:var(--viz-mainline);stroke-width:1.8;fill:none}
.viz .s-ex{stroke:var(--viz-express);stroke-width:1.4;fill:none;stroke-dasharray:4 3}
.viz .dot-ml{fill:var(--viz-mainline)}
.viz .dot-ex{fill:var(--viz-express)}
/* THE PACE BARS ARE A COUNT, SO THEY WEAR THE BAND, FLAT.
build/lib/viz.js still emits a for these — that
file is not this agent's to edit and the gradient is now unreferenced. Do not
"restore" fill:url(#pacegrad): the sky does not paint numbers, and the site
has no gradients at all. */
.viz .bar{fill:var(--band)}
.viz .bar.partial{opacity:.45}
.viz .ring-bg{stroke:var(--proj-bg);fill:none}
.viz .ring-fg{stroke:var(--band);fill:none;stroke-linecap:butt}
.viz .ring-n{fill:var(--ink);font-family:var(--serif);font-weight:700}
.spark{width:100%;height:auto;display:block}
.spark path.s{stroke:var(--viz-mainline);stroke-width:1.6;fill:none}
.spark path.f{fill:var(--viz-mainline);fill-opacity:.10;stroke:none}
.spark-note{font-size:.78rem;color:var(--muted);margin-top:.35rem}
/* ── roadmap vertical timeline ────────────────────────────────────────────
EVERY rule is scoped under .rm. /united/ has its own .steps/.step playbook
component with a different geometry, and an unscoped .step:before here painted
a rogue circle on top of it. Keep the .rm scope. */
.steps.rm{display:grid;gap:0;position:relative;padding-left:1.6rem}
.steps.rm:before{content:"";position:absolute;left:.35rem;top:0;bottom:0;width:1px;
background:var(--line)}
.rm .step{position:relative;display:block;padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.rm .step:before{content:"";position:absolute;left:-1.6rem;top:1.3rem;width:.8rem;height:.8rem;
border-radius:50%;background:var(--paper);border:1px solid var(--line)}
.rm .step.shipped:before{border-color:var(--good);background:var(--good)}
.rm .step.building:before{border-color:var(--sky);background:var(--paper)}
.rm .step.planned:before{border-color:var(--muted)}
.rm .step .sh{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.rm .step h3{font-size:1.05rem}
/* SHIPPED / BUILDING / PLANNED is a state, not a score. Shipped earns the green
because it is a fact about the world; planned stays grey and dashed, which is
the same fence the projected score wears. */
.rm .step .st{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
border:1px solid;border-radius:99px;padding:.1rem .45rem}
.rm .step.shipped .st{color:var(--good);border-color:currentColor}
.rm .step.building .st{color:var(--muted-strong);border-color:var(--line)}
.rm .step.planned .st{color:var(--proj);border-color:var(--line);border-style:dashed}
.rm .step p{font-size:var(--fs-small);color:var(--ink-soft);margin-top:.35rem;max-width:44rem}
/* .tgts, not .targets — /united/ already owns a .targets list and an unscoped
:before here gave its items a second bullet. */
.tgts{list-style:none;margin-top:.7rem;display:grid;gap:0}
.tgts li{font-size:.86rem;color:var(--ink-soft);padding:.45rem 0 .45rem 1.3rem;
position:relative;border-top:1px solid var(--line-soft)}
.tgts li:before{content:"";position:absolute;left:.1rem;top:.85rem;width:.4rem;height:.4rem;
border-radius:50%;background:var(--muted)}
/* ── credit strip (credits are architecture, not a footnote) ───────────── */
.credit{display:flex;gap:.8rem;align-items:flex-start;flex-wrap:wrap;margin-top:1.1rem;
padding:.8rem 1rem;text-decoration:none;background:var(--panel);
border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r-md);
color:var(--ink-soft);font-size:.86rem}
.credit .cb{flex:none;font-size:.68rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
border-radius:99px;padding:.14rem .5rem;background:transparent;margin-top:.1rem}
.credit .cbody{flex:1;min-width:14rem}
.credit b{color:var(--ink);font-weight:700}
/* ── footer ───────────────────────────────────────────────────────────── */
footer.site{margin-top:2.8rem;border-top:1px solid var(--line);padding:1.6rem 0 2.2rem;
color:var(--muted);font-size:.84rem}
footer.site .frow{margin-top:.6rem;max-width:52rem}
footer.site .flinks{display:flex;gap:.5rem 1.1rem;flex-wrap:wrap;margin-bottom:.9rem;
font-size:.9rem}
footer.site b{color:var(--muted-strong)}
/* ── faq ──────────────────────────────────────────────────────────────── */
.faq{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.faq .q{background:transparent;border:0;border-bottom:1px solid var(--line-soft);
padding:.9rem 0}
.faq .q h3{font-size:1.02rem}
.faq .q p{font-size:var(--fs-small);color:var(--ink-soft);margin-top:.35rem;max-width:48rem}
/* ── score hero (airline pages) ───────────────────────────────────────── */
.scorebox{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;margin-top:1.4rem;
background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);
padding:1.3rem 1.4rem;box-shadow:var(--sheen)}
/* THE RING IS 120px. It arrives from V.scoreRing() as