/* ============================================================ host-guard.css — The bundle's defence against a stylesheet it does not own. LOADS LAST, ON EVERY PAGE. Order is half of how this file works; see the specificity note below for the other half. ── WHY THIS FILE EXISTS ────────────────────────────────── The scorecard is vendored into the INRIX WordPress theme and rendered inside the site's own chrome, which means our stylesheet and a stylesheet written for a different job are both live in one document. Our CSS is loaded after the theme's, so we win every property we DECLARE — and that is most of them. What we lose is every property we never mention, because a property nobody on our side has an opinion about is a property the other side sets by default, whatever the cascade order. A sweep of the theme's app.min.css against this bundle turned up 201 of those. Two had already reached production: table td { font-size: .75em } → 9.75px body copy on both ranking pages, a WCAG failure .btn { min-width: 18em; text-transform: uppercase } → a 182px CTA rendered at 270px, in caps, breaking the nav row Both are fixed at their own component (rankings-page.css, button.css), because that is where someone editing them will look. This file covers the rest: the generic elements we deliberately leave to the user agent, and which a theme therefore gets to style by being the only one in the room with an opinion. ── HOW IT IS SCOPED, AND WHY IT IS NOT !important ──────── Every rule reads `:where(#app, .psc-section-nav, .psc-section-footer) `. The :where() contributes NOTHING to specificity, so each selector weighs exactly (0,0,1) — the same as the bare `input {}` in the host's sheet. Identical weight, and we load second, so we win on order alone. That is deliberate in both directions: · it beats the host, because order breaks the tie; · it LOSES to every component file in this bundle, all of which are class-based at (0,1,0) or higher. Nothing here can accidentally override a considered decision made elsewhere; · it is invisible outside our subtree, so the theme's own search box and footer links are untouched. A bare `input {}` would have restyled the host's page around us, which is a worse bug than the one it fixes. No !important anywhere. Reaching for it would mean the order or the scope is wrong, and both are fixable. Tokens only, no raw hex — css/tokens.css is the only file allowed to declare one. See docs/embedding.md for the whole contract. ============================================================ */ /* ── Form controls ───────────────────────────────────────── The theme paints inputs as a light-theme control: white fill, 2px radius, a blue border. Ours are dark-theme by default and follow the toggle, so an unstyled control inheriting the theme's paint is a white box on navy. The named controls in the bundle (.ps-select, .nav-search input) declare their own and outrank this; what is left are the ones that were happy with the UA's. */ :where(#app, .psc-section-nav, .psc-section-footer) input, :where(#app, .psc-section-nav, .psc-section-footer) select, :where(#app, .psc-section-nav, .psc-section-footer) textarea { font: inherit; color: inherit; background-color: transparent; border-color: var(--line-strong); border-radius: var(--radius-sm); } /* A label in the theme is a form-builder label: block, bold, with a margin. Ours sit inline beside the control they name. */ :where(#app, .psc-section-nav, .psc-section-footer) label { display: inline; margin: 0; font-weight: inherit; font-size: inherit; color: inherit; } /* ── Tables ──────────────────────────────────────────────── .rp-table already declares both of these for itself. This catches the tables that carry no class: every chart in the bundle ships an .sr-only data table beside it (principle 5), and those are as much a published surface as the chart — a screen reader is a reader. */ :where(#app) th, :where(#app) td { font-size: inherit; font-weight: inherit; text-align: inherit; } :where(#app) table { border-collapse: collapse; font-size: inherit; } /* ── Drawings ────────────────────────────────────────────── `svg { max-width: 100% }` is a sensible default for a theme full of logos and a wrong one here. Every drawing in js/viz.js is solved against its host element's own pixel box and then draws the marks the data asks for — the field plane's count, the globe's laps. A max-width applied after that solve does not reflow the drawing, it scales the result, so the figures stop matching the geometry they were measured from. The height rule is the same argument. `canvas { vertical-align: middle }` is the theme's; Mapbox sizes its own canvas absolutely and does not want a baseline. */ :where(#app) svg, :where(#app) canvas { max-width: none; max-height: none; vertical-align: initial; } /* ── Focus ───────────────────────────────────────────────── The theme ships `a { outline: 0 }`. base.css sets :focus-visible at (0,1,0) and already beats it, so this changes nothing today — it is here so that a future host rule at (0,1,0) does not quietly remove the keyboard path on a site whose accessibility is a gate rather than an aspiration. Principle 5. Values match base.css exactly; if one moves, move both. */ :where(#app, .psc-section-nav, .psc-section-footer) a:focus-visible, :where(#app, .psc-section-nav, .psc-section-footer) button:focus-visible { outline: 2px solid var(--primary-bright); outline-offset: 3px; } /* ── NOT GUARDED, DELIBERATELY ───────────────────────────── Lists. The theme indents and spaces `ol li` for article bodies, and a reflex reset of `ul, ol { margin: 0; padding: 0 }` would have closed that bleed — at the cost of the five real prose lists on the methodology page, which want a prose list's indent and are the reason anyone reads that page. The bundle's own lists are chips, legend keys and nav rows; every one of them carries a class whose rule declares its layout at (0,1,0) and is already immune. There was nothing left to protect. Headings and paragraphs, for the same reason inverted: base.css already declares font-family and `margin: 0` on h1–h3, there is no h4 or lower anywhere in the bundle, and `p` margins on the methodology page are prose doing its job. The rule this file follows: guard a property when leaving it unset is an oversight, not when it is a decision. */