`,
so the three .stat elements are never siblings of one another -- they are
each an only child of their own anchor. `.dash-verdicts .stat + .stat`
therefore matched ZERO elements (measured on the live page: 3 for
`.dash-verdicts .stat`, 0 for the sibling form), and the rail rendered as
three stacked boxes with no separators instead of the flat strip it was
designed to be. The same mistake is why `.stat:last-child` below was dead. */
.dash-verdicts .stat-link + .stat-link .stat {
padding-top: 16px;
box-shadow: inset 0 0.5px 0 var(--border);
}
.dash-verdicts .stat-link:last-child .stat { padding-bottom: 0; }
.dash-verdicts .stat .label {
font-size: var(--fs-caption);
color: var(--muted);
min-height: 18px;
}
.dash-verdicts .stat .value {
font-size: 28px;
font-weight: 550;
letter-spacing: -0.015em;
line-height: 1.1;
margin-top: 0;
}
.dash-verdicts .stat .sub {
font-size: var(--fs-caption);
line-height: 1.45;
margin-top: 2px;
color: var(--muted);
}
/* Links in the rail keep the card hover but drop the box treatment. */
.dash-verdicts .stat-link { display: block; text-decoration: none; }
.dash-verdicts .stat-link:hover .stat .value { color: var(--accent); }
/* Status cell: quiet facts, dot-separated, no pills. */
.dash-status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
font-size: 12.5px;
color: var(--muted);
}
.dash-status .status-left, .dash-status .status-right {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
}
.dash-status .status-right { margin-left: auto; }
.dash-status .pill-mini {
box-shadow: none; padding: 0; border-radius: 0;
font-size: 12.5px; color: var(--muted);
}
.dash-status .pill-mini + .pill-mini::before {
/* The separator between status pills. Its own siblings use --muted, and it
used --border-strong, which is a border token at 1.99:1 (dark) / 1.75:1
(light) -- so the separator was invisible and the pills read as one
run-on string. Matches its siblings now. */
content: "·"; margin-right: 14px; color: var(--muted);
}
.dash-status .pill-mini b { color: var(--text-soft); font-weight: 550; }
.dash-status a.pill-mini { color: var(--accent); }
.dash-status .muted { font-size: 12.5px; }
/* Ledger + leaderboard: their controls sit in the cell head. */
/* --- region chips: one aligned row ---
Left group = region chips; right group = search + export + guide.
Both groups are flex rows on the same baseline, so nothing wraps to
a stray line and the search field is the tallest item, setting the
row height for everything beside it.
Shared by /stations, /scorecards and /edge-finder. The dashboard's own
copy of this row left with the forecast ledger. */
#region-chips {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
width: 100%;
margin-top: 2px;
}
#region-chips .toolbar-group {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
#region-chips .toolbar-end {
margin-left: auto;
gap: 10px;
}
#region-chips .toolbar-end .search { min-width: 220px; }
#region-chips .toolbar-link {
font-size: var(--fs-caption);
text-decoration: none;
white-space: nowrap;
}
#region-chips .toolbar-link:hover { color: var(--text-soft); }
@media (max-width: 900px) {
#region-chips .toolbar-end { margin-left: 0; }
#region-chips .toolbar-end .search { min-width: 0; flex: 1 1 100%; }
}
/* Responsive: the mosaic collapses to one column, rails become rows.
NOTE the wrapper in these two rules. `.dash-verdicts .stat + .stat` matches
NOTHING, because verdictCard() puts each .stat inside its own .stat-link
anchor -- so both of these responsive dividers were dead too, not just the
base one. A stylesheet-wide scan caught them; the base rule alone had
already been fixed. */
@media (max-width: 1000px) {
.dash-hero { grid-column: 1 / span 12; padding-right: 0; border-right: 0; }
.dash-verdicts { grid-column: 1 / span 12; padding-left: 0; border-top: 0.5px solid var(--border); }
.dash-verdicts .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.dash-verdicts .stat { padding: 14px 16px; }
.dash-verdicts .stat-link + .stat-link .stat {
padding-top: 14px;
box-shadow: inset 0.5px 0 0 var(--border);
}
}
@media (max-width: 640px) {
.dash-verdicts .stat-grid { grid-template-columns: 1fr; }
.dash-verdicts .stat-link + .stat-link .stat { box-shadow: inset 0 0.5px 0 var(--border); }
.dash-cell { padding: 16px 0; }
}
.topbar-search input { font-size: var(--fs-body); }
table.data a strong { font-size: var(--fs-caption); }
.delta-pill { font-size: 11px; }
.big-note { font-size: var(--fs-body); }
.toast { font-size: var(--fs-body); }
.picker-empty { font-size: var(--fs-body); }
.chart-legend { font-size: var(--fs-caption); }
.stat .sub { font-size: var(--fs-caption); }
.stat .value small { font-size: var(--fs-body); }
/* ==========================================================================
LAYOUT REDESIGN (2026-09-17) — "the document, not the dashboard"
The site was boxes inside boxes: section → panel(border) → body(pad),
every block the same visual weight, several with two competing headings.
This pass flattens the nesting, merges the double headings, turns stat
cards into a metric strip, and lets tables own the width. Boxes survive
only where they group genuinely parallel items (stat strips, station
cards, charts that need a frame).
========================================================================== */
/* --- 6: section rhythm variants ---
Three weights instead of one flat 44px gap:
.section default editorial spacing
.section.dense tight — table clusters, related panels
.section.display medium — stat strips, charts
Section headings gain a hairline rule so the page reads as a document. */
.section { margin-top: 40px; }
.section.dense { margin-top: 24px; }
.section.display { margin-top: 32px; }
.sec-head { margin-bottom: 12px; }
.sec-head h2 {
display: flex;
align-items: center;
gap: 12px;
}
.sec-head h2::after {
content: "";
flex: 1;
height: 0.5px;
background: var(--border);
}
/* --- 1: flatten nesting ---
A section that holds exactly one panel drops the panel chrome: the
section itself is the container. Sections with several panels (paired
boards) keep their frames. :has() is supported in every current
browser; without it the page simply keeps the old boxed look.
IMPORTANT: a panel that keeps its frame (chart panels below) must also
keep its head/body padding. Stripping padding from a framed panel
pressed the title, chips and caption against the border — the
"overflowing header" bug on the station compare card. */
.section:not(:has(> .panel ~ .panel)) > .panel:not(:has(.chart-box)) {
border: 0;
box-shadow: none;
border-radius: 0;
background: transparent;
}
/* A fold supplies its own inset, so this flattening rule must not zero it.
THE BUG THIS FIXES: this rule is specificity (0,6,0) thanks to its two
:has() chains, while the fold's own inset rule is (0,2,1). So `padding: 0`
won no matter where either rule sat in the file, and every fold's text sat
flush against the border -- the "text is near the edge" complaint. Adding
the fold rule a second time, later, changed nothing, which is why the fix
looked like it had not deployed.
Excluded rather than out-specified: an arms race against a :has() chain is
unwinnable, and a reader could never tell which rule won. This rule was
written for bare sections on the page, before folds existed; it should not
reach inside one. */
.section:not(details.fold *) > .panel:not(:has(.chart-box)) > .panel-body { padding: 0; }
/* The HEAD half of the same fix. This rule carried the identical :has()
chain, and the identical problem: `padding: 0 0 10px` zeroes the horizontal
padding, so inside a fold the panel head ran to the very edge of the box.
Measured on the live regime card: the "-day record" span sat 0px from the
panel's right edge, while the panel BODY below it was inset 18px.
Excluded the same way rather than out-specified, for the same reason the
sibling rule above records: an arms race against a :has() chain is
unwinnable, and a reader could never tell which rule won. */
.section:not(details.fold *):not(:has(> .panel ~ .panel)) > .panel:not(:has(.chart-box)) > .panel-head {
padding: 0 0 10px;
border-bottom: 0.5px solid var(--border);
margin-bottom: 12px;
background: transparent;
}
/* Chart panels keep their frame AND their padding: the plot needs the
boundary, and the framed header needs breathing room. */
.section:not(:has(> .panel ~ .panel)) > .panel:has(.chart-box) {
box-shadow: inset 0 0 0 0.5px var(--border);
background: var(--surface);
}
.section:not(:has(> .panel ~ .panel)) > .panel:has(.chart-box) > .panel-body {
padding: 16px;
}
/* --- 2: merge double headings ---
Only a FLATTENED panel's title is demoted (it sits under a section
head already). A framed panel's title is its only heading and stays
full size. */
.section:not(:has(> .panel ~ .panel)) > .panel:not(:has(.chart-box)) > .panel-head h3 {
font-size: var(--fs-caption);
font-weight: 550;
color: var(--muted);
}
/* --- 3: stat cards → metric strip ---
The 4-up grid becomes one strip: shared hairline frame, vertical
dividers between cells, no per-card boxes. Reads as one instrument
instead of four competing tiles. */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0;
border: 0;
box-shadow: inset 0 0 0 0.5px var(--border);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
}
.stat-grid > .stat {
border: 0;
box-shadow: none;
border-radius: 0;
background: transparent;
padding: 14px 16px;
}
.stat-grid > .stat + .stat { box-shadow: inset 0.5px 0 0 var(--border); }
.stat-grid > .stat:hover { background: var(--surface-2); }
/* A lone stat (or an error/empty block) keeps its own frame. */
.stat-grid > .stat:only-child { box-shadow: none; }
/* Nested grids (a stat-grid inside a panel) keep the strip look. */
.panel-body > .stat-grid { box-shadow: inset 0 0 0 0.5px var(--border); }
/* --- 4: tables own the width ---
Tables bleed to the section edges with hairline rows; the header is a
quiet tint rather than a border; rows highlight on hover instead of
every cell drawing its own line. */
.table-wrap table.data { border-collapse: separate; border-spacing: 0; }
table.data th {
background: var(--surface-2);
border-bottom: 0.5px solid var(--border);
padding: 9px 12px;
}
table.data th:first-child { border-top-left-radius: var(--radius); }
table.data th:last-child { border-top-right-radius: var(--radius); }
table.data td {
border-bottom: 0.5px solid var(--border);
padding: 9px 12px;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
/* Inside a flattened section the table spans the full column. */
.section:not(:has(> .panel ~ .panel)) > .panel > .panel-body > .table-wrap {
margin-inline: 0;
}
/* --- chart panels keep a light frame (they need the boundary) ---
EXCLUDING FOLDS, like every other flattening rule in this block. Inside a
fold the boundary is already the fold's own border, so this rule was
re-framing every walk panel and undoing the de-boxing pass: measured 37
framed elements where the pass had reached 9.
This rule sits LATE in the file and matched `.panel:has(.chart-box)` with
no exclusion at all, so it beat `details.fold .panel { box-shadow: none }`
on source order despite that rule being more specific about intent. The
`:not(details.fold *)` guard is the same one the sibling rules above carry;
it was simply missing here. */
.panel:not(details.fold *):has(> .panel-body > .chart-box),
.panel:not(details.fold *):has(.chart-box) {
box-shadow: inset 0 0 0 0.5px var(--border);
background: var(--surface);
}
.panel:not(details.fold *):has(.chart-box) > .panel-body { padding: 16px; }
/* --- two-column rhythm for related blocks (paired with item 5 markup) --- */
.split {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.split.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) {
.split, .split.even { grid-template-columns: 1fr; gap: 28px; }
}
/* A 2-up stat strip for narrow columns (station track record). */
.stat-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-grid-2 > .stat:nth-child(odd) { box-shadow: none; }
.stat-grid-2 > .stat:nth-child(even) { box-shadow: inset 0.5px 0 0 var(--border); }
.stat-grid-2 > .stat:nth-child(n+3) { box-shadow: inset 0 0.5px 0 var(--border); }
.stat-grid-2 > .stat:nth-child(even):nth-child(n+3) {
box-shadow: inset 0.5px 0 0 var(--border), inset 0 0.5px 0 var(--border);
}
/* --- 7: stations list view --- */
.st-table { font-size: var(--fs-caption); }
.st-row { cursor: pointer; }
.st-row:hover { background: var(--surface-2); }
.st-code { white-space: nowrap; }
.st-code .fresh-dot {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
margin-right: 8px; vertical-align: 1px;
}
.st-name { color: var(--text-soft); }
.st-name .muted { font-size: var(--fs-caption); }
.st-when { white-space: nowrap; font-size: var(--fs-caption); }
.st-cmp { width: 40px; text-align: right; }
.st-cmp .cmp-add {
appearance: none; border: 0; background: transparent; color: var(--muted);
cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px;
}
.st-cmp .cmp-add:hover { color: var(--text); background: var(--surface-3); }
.st-cmp .cmp-add.in { color: var(--success); }
@media (max-width: 720px) {
.st-name, .st-table th:nth-child(6), .st-table td:nth-child(6) { display: none; }
}
/* --- 8: row density control ---
Compact/comfortable for the big tables. The toggle lives in the
table's section head; the class lands on so one setting covers
every table on the page and persists per visitor. */
body.density-compact table.data th,
body.density-compact table.data td { padding: 5px 10px; }
body.density-compact table.data { font-size: var(--fs-caption); }
body.density-compact .stat-grid > .stat { padding: 10px 13px; }
body.density-compact .st-row { line-height: 1.3; }
.density-toggle {
display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px;
box-shadow: inset 0 0 0 0.5px var(--border); background: var(--surface);
}
.density-toggle button {
appearance: none; border: 0; background: transparent; cursor: pointer;
font: 500 11px var(--font); color: var(--muted); padding: 3px 9px;
border-radius: 6px; letter-spacing: 0;
}
.density-toggle button.active { background: var(--surface-3); color: var(--text); }
/* ==========================================================================
DESIGN REVIEW FOLLOW-UPS (2026-09-19)
Brand mark, consolidated fixed chrome (social pill + back-to-top + language
switch no longer share one corner), and utility classes that replace the
repeated per-page inline styles.
The dashboard fold restructure that shipped with this block was reverted on
operator feedback -- the pre-existing .dash-hero / .dash-verdicts /
.dash-ledger mosaic is what runs. Its rules (.masthead-verdicts,
.dash-ledger-hero, .dash-recap-rail) are removed rather than left inert, so
a future edit cannot mistake them for live styling.
========================================================================== */
/* --- fixed chrome: one stacked, palette-aware corner --- */
.x-link {
position: fixed; bottom: 16px; right: 16px; z-index: 44;
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border: 0; border-radius: 999px;
background: var(--surface);
box-shadow: inset 0 0 0 0.5px var(--border), var(--shadow-sm);
color: var(--muted); font-size: var(--fs-caption); font-weight: 500; text-decoration: none;
transition: color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.x-link:hover { color: var(--text); box-shadow: inset 0 0 0 0.5px var(--border-strong), var(--shadow-sm); }
/* Stations page: the floating compare bar owns the bottom edge, so the
social pill and back-to-top stack above it instead of on top of it. */
.has-compare-bar .x-link { bottom: 74px; }
.has-compare-bar .to-top { bottom: 122px; }
/* Login keeps its social link in-flow under the panel, not fixed. */
.login-x {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
padding: 6px 12px; border: 0; border-radius: 999px;
box-shadow: inset 0 0 0 0.5px var(--border);
color: var(--muted); font-size: var(--fs-body); text-decoration: none;
transition: color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.login-x:hover { color: var(--text); box-shadow: inset 0 0 0 0.5px var(--border-strong); }
/* --- utility classes (replace the repeated inline styles) --- */
.filters-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.u-accent { color: var(--accent); }
.u-plain { text-decoration: none; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.u-mt-0 { margin-top: 0; } .u-mt-16 { margin-top: 16px; }
.u-mb-0 { margin-bottom: 0; } .u-mb-12 { margin-bottom: 12px; }
.skel-92 { height: 92px; } .skel-96 { height: 96px; }
.skel-120 { height: 120px; } .skel-150 { height: 150px; }
.skel-180 { height: 180px; } .skel-200 { height: 200px; }
.skel-220 { height: 220px; }
/* ==========================================================================
DASHBOARD REDESIGN (2026-09-26)
Measured before this pass, on the live page:
* 439px of chrome preceded the first forecast number on a 1440x900 screen
-- 49% of the viewport. On a 375x812 phone it was 735px, 91%.
* Every cell shared one padding and one hairline, so nothing led and
nothing receded; the eye had no entry point.
* Eleven table columns at 375px forced a horizontal scroll before a reader
reached the number they came for.
* .stat was defined three times and .status-line/.verdict-strip were dead.
The pass is mostly SUBTRACTION: the masthead stops being a hero, the audit
trail recedes, three columns step aside on a phone, and the dead layers are
gone. No new cells, no new features, no new JavaScript beyond a class name.
========================================================================== */
/* --- the removed forecast ledger ---
`.dash-ledger .cell-body` and the phone rules below styled the 11-column
table that used to sit at the top of the fold. Both went with the cell;
`.table-capped` and `.col-optional` are still live (station.js uses them). */
/* --- the meta cells recede further on a phone ---
The audit trail is worth having and worth scrolling to; it should not
compete with the answer for the first screen. */
@media (max-width: 720px) {
.dash-meta { padding-block: 10px; }
.dash-hero { padding-right: 0; border-right: 0; }
.dash-verdicts { padding-left: 0; }
}
/* ==========================================================================
PRO OFFER + PAYWALL (2026-09-29)
Two server-rendered pages that exist to make one sale, and the rules they
follow are the same: lead with the reader's own airport, show the evidence
rather than adjectives, and answer the questions a paywall usually leaves
the reader to guess.
The measure is 680px because both pages are prose plus one table -- wider
and the eye loses the line, narrower and the table wraps.
========================================================================== */
.pro-page {
max-width: 680px;
margin: 0 auto;
padding: 40px 20px 64px;
}
.pro-hero { margin-bottom: 26px; }
.pro-hero h1 {
font-size: clamp(26px, 5vw, 38px);
line-height: 1.15;
margin: 10px 0 0;
}
.pro-hero h1 span {
display: block;
font-size: 15px;
font-weight: 400;
color: var(--muted);
margin-top: 8px;
line-height: 1.5;
}
.pro-lede {
margin-top: 14px;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-soft);
max-width: 62ch;
}
/* --- the price block ------------------------------------------------------ */
.pro-offer {
margin: 24px 0 30px;
padding: 20px;
border: 0.5px solid var(--border);
border-radius: 14px;
background: var(--surface);
}
.pro-price {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 4px;
}
.pro-amount {
font-size: 40px;
font-weight: 700;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.pro-once { color: var(--muted); font-size: var(--fs-caption); }
.pro-offer .panel { margin-top: 14px; border: 0; background: transparent; }
.pro-offer .panel-body { padding: 0; }
.pro-reassure {
margin-top: 12px;
font-size: 12px;
color: var(--muted);
}
.pro-have {
border-color: var(--success) !important;
background: var(--success-soft) !important;
}
/* --- the evidence table --------------------------------------------------- */
.pro-why { margin: 34px 0; }
.pro-why h2, .pro-what h2, .pro-free h2, .pro-faq h2,
.pro-locked-section h2 {
font-size: 19px;
margin-bottom: 10px;
}
.pro-why > p { color: var(--text-soft); margin-bottom: 14px; }
.pro-table td, .pro-table th { padding: 10px 12px; }
.pro-table .pro-stars {
font-size: 15px;
letter-spacing: 2px;
color: var(--warn);
white-space: nowrap;
}
.pro-table td.num { font-weight: 550; }
.pro-table tbody tr:first-child td { background: var(--success-soft); }
/* --- what Pro opens ------------------------------------------------------- */
.pro-what { margin: 34px 0; }
.pro-what > p { color: var(--text-soft); margin-bottom: 12px; }
.pro-list {
margin: 0;
padding-left: 0;
list-style: none;
}
.pro-list li {
position: relative;
padding-left: 26px;
margin-bottom: 10px;
line-height: var(--lh-body);
color: var(--text-soft);
}
.pro-list li::before {
content: "";
position: absolute;
left: 8px;
top: 0.62em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
.pro-list strong { color: var(--text); }
/* --- the live locked list ------------------------------------------------- */
.pro-locked-section { margin: 34px 0; }
.pro-locked {
columns: 2;
column-gap: 20px;
margin: 12px 0;
padding-left: 0;
list-style: none;
}
.pro-locked li { margin-bottom: 6px; break-inside: avoid; }
.pro-locked a {
font-weight: 550;
font-family: var(--font);
}
.pro-note { margin-top: 12px; max-width: 62ch; }
/* --- free tier + FAQ ------------------------------------------------------ */
.pro-free { margin: 34px 0; }
.pro-free p { color: var(--text-soft); max-width: 62ch; }
.pro-faq { margin: 34px 0 0; }
.pro-faq dl { margin: 0; }
.pro-faq dt {
font-weight: 600;
margin-top: 16px;
color: var(--text);
}
.pro-faq dd {
margin: 4px 0 0;
color: var(--text-soft);
line-height: var(--lh-body);
max-width: 62ch;
}
/* ==========================================================================
THE STATION PAYWALL
Same voice, one airport. The reader arrived wanting THIS station, so the
page leads with its rating and only then makes the offer.
========================================================================== */
.paywall .paywall-head { margin-bottom: 22px; }
.paywall .paywall-head h1 { margin-top: 10px; }
.paywall .paywall-head h1 span {
display: block;
font-size: 16px;
font-weight: 400;
color: var(--muted);
margin-top: 6px;
}
.paywall-rating {
margin-top: 14px;
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.paywall-rating .muted { font-size: var(--fs-caption); }
.paywall-card { border-color: var(--border-strong); }
.paywall-behind {
margin: 16px 0 10px;
font-weight: 600;
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
.paywall-cta {
margin-top: 20px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.paywall-reassure { margin-top: 14px; font-size: 12px; }
.paywall-facts { margin-top: 26px; }
.paywall-facts p { max-width: 62ch; color: var(--text-soft); }
.paywall-facts p + p { margin-top: 12px; }
@media (max-width: 720px) {
.pro-page { padding: 24px 16px 48px; }
.pro-amount { font-size: 34px; }
/* One column: two columns of station codes at 375px is a wall of text. */
.pro-locked { columns: 1; }
.pro-table td, .pro-table th { padding: 8px 8px; }
.pro-table .pro-stars { font-size: 13px; letter-spacing: 1px; }
.paywall-cta .btn { flex: 1 1 auto; text-align: center; }
}
/* ==========================================================================
FUNNEL NAV, CLIMB CHART, CATALOG (2026-09-29, second pass)
The two pages that exist to make one sale: /pro and a locked station.
Three additions, each answering a specific failure of the first pass:
1. THE NAV. Both pages were dead ends -- a reader who arrived from a
search result or a shared link had no way back and no way home except
the browser button. The site topbar is not an option here: it needs
common.js for the clock, the station search and the display menu, and
neither funnel page loads a script. 113 KB of JS for a clock is the
wrong trade, so this is a slim bar that answers the only two questions
a reader on this page has -- where am I, and how do I leave.
2. THE CLIMB CHART. "The rating is measured" was a claim. This is the
measurement: the airport's own exact-high rate at each checkpoint
through the day, drawn from the PUBLIC board so it previews the paid
record without leaking any of it. The greyed 4pm bar is the argument
-- every rating on the site excludes it, because by 4pm the day has
settled and scoring there measures the observation, not the forecast.
3. THE CATALOG. A list of codes asks the reader to take the rating on
faith. The same list with each airport's checkpoint and rate is
checkable against the free board, which is what makes it evidence
rather than marketing.
========================================================================== */
/* --- funnel nav ----------------------------------------------------------- */
.funnel-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
max-width: 680px;
margin: 0 auto;
padding: 14px 20px 0;
font-size: var(--fs-caption);
}
.funnel-brand {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font);
font-weight: 600;
color: var(--text);
text-decoration: none;
letter-spacing: -0.01em;
}
.funnel-brand:hover { color: var(--accent); }
.funnel-logo { border-radius: 6px; display: block; }
.funnel-links { display: inline-flex; align-items: center; gap: 6px; }
.funnel-links a {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
border-radius: 999px;
color: var(--text-soft);
text-decoration: none;
font-weight: 550;
box-shadow: inset 0 0 0 0.5px var(--border);
background: var(--surface);
transition: background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
}
.funnel-links a:hover {
color: var(--text);
background: var(--surface-2);
box-shadow: inset 0 0 0 0.5px var(--border-strong);
}
/* The back link is the one a reader most often wants, so it carries the
accent on hover and the home link stays deliberately quieter. */
.funnel-back:hover { color: var(--accent) !important; }
.funnel-back span { transition: transform var(--t-fast) var(--ease); }
.funnel-back:hover span { transform: translateX(-2px); }
/* --- the climb chart ------------------------------------------------------ */
.climb { margin: 30px 0; }
.climb-title { font-size: 19px; margin-bottom: 12px; }
.climb-figure { margin: 0; }
.climb-svg {
width: 100%;
height: auto;
display: block;
overflow: visible;
border-radius: 12px;
background: var(--surface);
box-shadow: inset 0 0 0 0.5px var(--border);
padding: 6px 8px 0;
box-sizing: content-box;
}
.climb-bar { fill: var(--accent); }
/* The checkpoint the ratings deliberately exclude. Grey, never accent: it is
shown to be discounted, not to compete with the three that count. */
.climb-bar-excluded { fill: var(--border-strong); }
.climb-value {
fill: var(--text);
font: 600 11px var(--font);
text-anchor: middle;
font-variant-numeric: tabular-nums;
}
.climb-label {
fill: var(--muted);
font: 500 10px var(--font);
text-anchor: middle;
}
.climb-guess {
stroke: var(--warn);
stroke-width: 1;
stroke-dasharray: 3 3;
opacity: 0.85;
}
.climb-guess-label {
fill: var(--warn);
font: 600 9px var(--font);
text-anchor: end;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.climb-caption {
margin-top: 12px;
font-size: var(--fs-caption);
line-height: var(--lh-body);
color: var(--text-soft);
max-width: 62ch;
}
.climb-caption strong { color: var(--text); }
/* --- the Pro catalog ------------------------------------------------------ */
.pro-catalog td, .pro-catalog th { padding: 9px 12px; }
.pro-catalog tbody tr:hover { background: var(--surface-2); }
.pro-catalog td.num { font-weight: 600; }
.pro-locked-count {
margin: 12px 0;
font-size: var(--fs-caption);
color: var(--text-soft);
}
.pro-catalog + .pro-note { margin-top: 10px; }
/* --- offer block: give the price a little more presence ------------------- */
.pro-offer {
background:
radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 58%),
var(--surface);
}
@media (max-width: 720px) {
.funnel-nav { padding: 12px 16px 0; }
.climb-svg { padding: 4px 4px 0; }
.climb-caption { font-size: 12px; }
/* The catalog's Region column is context; at 375px it costs the airport
code its room. Hidden, not dropped -- still in the DOM for the CSV and
for screen readers. */
.pro-catalog .col-optional { display: none; }
}
/* --- light theme: the greyed bar needs to stay legible on white ---------- */
[data-theme="light"] .climb-bar-excluded { fill: #c9c5c2; }
[data-theme="light"] .climb-value { fill: var(--text); }
/* --- the engine's public track record, as a strip ------------------------- */
/* Deliberately the same visual weight as the rating table rather than a
bigger one: it is corroboration, not the headline claim. It sits between
the rating evidence and the feature list so the reader meets it while the
"can I check this?" question is still open. */
.track { margin: 34px 0; }
.track h2 { font-size: 19px; margin-bottom: 12px; }
.track-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 10px;
}
.track-cell {
padding: 12px 14px;
border-radius: 12px;
background: var(--surface);
box-shadow: inset 0 0 0 0.5px var(--border);
}
.track-value {
font-family: var(--font);
font-size: 21px;
font-weight: 650;
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
color: var(--text);
line-height: 1.15;
}
.track-label {
margin-top: 5px;
font-size: 11px;
font-weight: 550;
color: var(--text-soft);
line-height: 1.35;
}
.track-note {
margin-top: 2px;
font-size: 10px;
color: var(--muted);
line-height: 1.35;
}
.track-source { margin-top: 12px; font-size: 12px; max-width: 62ch; }
@media (max-width: 720px) {
.track-strip { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.track-value { font-size: 18px; }
}
/* --- buttons: the funnel pages' primary and secondary controls ------------
Defined HERE because nothing else did. /pro and a locked station both emit
class="btn btn-primary" for the buy action; grepping the stylesheet and all
18 templates found no rule and no other user, so that control had been
rendering as plain accent text. These follow .edge-finder-btn's idiom --
inset hairline, accent text, soft wash on hover -- so the two pages look
like the rest of the site instead of like an unstyled link. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 16px;
border: 0;
border-radius: 10px;
background: transparent;
box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 45%, var(--border));
color: var(--accent);
font-family: var(--font);
font-size: var(--fs-body);
font-weight: 600;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.btn:hover {
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent);
color: var(--accent);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* The buy action: filled, because on these two pages it is the one control
that matters and the page's whole job is to make it obvious. */
.btn-primary {
background: var(--accent);
color: #fff;
box-shadow: none;
font-weight: 650;
}
.btn-primary:hover {
background: var(--accent);
color: #fff;
filter: brightness(1.08);
box-shadow: 0 0 0 4px var(--accent-soft);
}
/* Light theme: the accent is a deep red, so white text still passes, but the
fill needs no brightening on hover. */
[data-theme="light"] .btn-primary:hover { filter: brightness(0.94); }
/* ==========================================================================
STATION PAGE - READABILITY (2026-09-29)
See the block comment above the diff that raised the fold's insets: the
horizontal geometry lives IN PLACE because tests read it, and this block
carries only the additions. Scoped to #station-root so no other page moves.
========================================================================== */
/* --- the reading measure --------------------------------------------------
THE BIGGEST FAULT. Prose ran to 182 characters; comfortable is 45-80, and
past ~100 the eye loses its place on the return sweep. That is what
"dizzy" is, physically.
62ch rather than the panel's existing 68ch: a `ch` cap scales with the font
size, so raising the prose from 12.5px to 15px while holding 68 would have
WIDENED the physical line while appearing to keep the cap. 62ch at 15px
is about 68ch at 14px -- the same line, at a readable size. */
#station-root .sum-bias,
#station-root .sum-record,
#station-root .empty-state,
#station-root .regime-headline,
#station-root .regime-note,
#station-root .regime-foot,
#station-root .panel-body > p,
#station-root .panel-body > div > p,
/* The walk-chart legend is 12.5px prose that wraps to two lines and, at
167 characters, was the longest line left on the page after the first
pass. Caught by re-measuring rather than by assuming the cap was total. */
#station-root .muted[style*="font-size:11.5px"],
#station-root details.fold > summary .fold-note {
max-width: 62ch;
}
/* --- the type scale -------------------------------------------------------
Real steps. Before: title 15px, body 14px, bulk prose 12.5px -- three
sizes inside 2.5px, so nothing read as a heading and everything read as
fine print. The 11px metadata stays small deliberately: it is a different
class of information, not body copy. */
#station-root details.fold > summary h2 {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
}
#station-root .sum-bias,
#station-root .empty-state,
#station-root .regime-headline {
font-size: 15px;
line-height: 1.7;
}
#station-root .regime-note,
#station-root .regime-foot,
#station-root .sum-record {
font-size: 13.5px;
line-height: 1.65;
}
/* The walk-chart legend was 11.5px prose that wraps to two lines. */
#station-root .muted[style*="font-size:11.5px"] {
font-size: 12.5px !important;
line-height: 1.6;
}
/* --- the summary card -----------------------------------------------------
The figure the page is FOR keeps its weight; what it gains is air, because
the fault here was crowding rather than scale. */
#station-root .sum-body { gap: 20px 40px; }
#station-root .sum-value { line-height: 1.05; }
#station-root .sum-value-label { margin-top: 8px; }
#station-root .sum-side { gap: 10px; }
#station-root .sum-bias { margin-top: 18px; padding: 12px 14px; }
#station-root .sum-record { margin-top: 16px; padding-top: 14px; }
/* --- de-boxing ------------------------------------------------------------
A fold is a bordered card. Inside it everything was ALSO a bordered card
-- a .panel, then .stat cards -- so a reader met up to three nested frames,
29 bordered boxes in all. Inside a fold, content is separated by SPACE
instead. Only rules for elements that carry a frame are overridden. */
#station-root details.fold .stat {
box-shadow: none;
background: transparent;
border-radius: 0;
padding: 0;
}
#station-root details.fold .stat-grid { gap: 18px 32px; }
#station-root details.fold .stat .label {
font-size: 12.5px;
color: var(--muted);
text-transform: none;
letter-spacing: 0;
}
#station-root details.fold .stat .value { font-size: 22px; line-height: 1.2; margin-top: 2px; }
#station-root details.fold .stat .sub { font-size: 12px; line-height: 1.5; margin-top: 4px; }
/* --- tables: air, not size ------------------------------------------------
Row padding only. The face stays put: these tables fit their wrapper
exactly at 375px, and a larger font would push columns off a phone. */
#station-root table.data td { padding: 11px 12px; }
#station-root table.data th { padding: 9px 12px; }
/* --- the walk: one sub-heading per day ------------------------------------
Each day is a .panel with a head. Inside the walk fold the frame is gone
(the fold supplies it), so the day's title needs to read as a sub-heading
rather than as a second page title. */
#station-root .fold .panel { margin-bottom: 26px; }
#station-root .fold .panel:last-child { margin-bottom: 0; }
#station-root .fold .panel-head h3 { font-size: 15px; font-weight: 600; }
@media (max-width: 720px) {
/* On a phone the viewport already caps the measure, so only the scale
needs adjusting. */
#station-root details.fold > summary h2 { font-size: 18px; }
#station-root details.fold .stat-grid { gap: 16px 20px; }
#station-root table.data td { padding: 9px 8px; }
}
/* --- the share discount on /pro ------------------------------------------
A second offer beside the full-price one, not a replacement for it. The
original button keeps its accent fill; this one is deliberately quieter so
the page still has ONE obvious primary action and the discount reads as an
alternative rather than as the thing we want everyone to click.
The badge carries the accent because "35% off" is the reason to look at the
block at all; the button does not, so the two do not compete. */
.pro-discount {
margin-top: 20px;
padding-top: 18px;
border-top: 0.5px solid var(--border);
}
.pro-discount-head {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
font-weight: 600;
color: var(--text);
}
.pro-discount-badge {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
font-size: var(--fs-label);
font-weight: 650;
letter-spacing: 0.02em;
white-space: nowrap;
}
.pro-discount-body {
margin-top: 8px;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-soft);
max-width: 62ch;
}
.pro-discount-body strong { color: var(--text); }
/* Outlined, not filled: the secondary action. Same family as .btn so the two
read as the same kind of control. */
.pro-buy-discount {
border: 0;
box-shadow: inset 0 0 0 0.5px var(--border-strong);
color: var(--text);
background: transparent;
font-weight: 600;
}
.pro-buy-discount:hover {
box-shadow: inset 0 0 0 1px var(--accent);
background: var(--accent-soft);
color: var(--text);
}
.pro-discount-fine {
margin-top: 10px;
font-size: 12px;
line-height: 1.55;
max-width: 62ch;
}
@media (max-width: 720px) {
.pro-buy-discount { width: 100%; }
}