/*
 * Relay base — reset, page ground, typography helpers, focus.
 * Depends on relay-tokens.css. No colour literals here.
 */

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

/* `hidden` must beat any component's own `display`. Overlays set display:grid
   or display:flex, which otherwise outranks the user-agent [hidden] rule and
   leaves a "closed" dialog on screen. */
[hidden] {
    display: none !important;
}

html {
    /* The theme attribute lands here (see relay.js), so the token swap covers
       the page ground before anything paints. */
    background: var(--paper);
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--t-body);
    /* The mockups set no letter-spacing on body and give every element its own
       line-height, mostly `/1`. Inheriting the design system's 1.6 and
       -0.006em made every label taller and tighter than drawn, which read as
       generic. 1.5 here matches the mockups' body/lede; components below set
       their own. */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Focus ---------------------------------------------------------------
   One visible ring for every interactive thing. Reusing the action colour is
   deliberate: focus and "you can act here" are the same idea.

   The ring does not set `border-radius`. It used to, and because `input:focus-visible`
   outranks a single class, every element with a radius of its own snapped to 5px the
   moment it was focused — a pill button squaring off, the sign-in field's 9px
   dropping to 5px. `outline` follows the element's own border-radius on its own, so
   there was never anything to set. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

/* --- Links -------------------------------------------------------------- */

a {
    color: var(--signal);
    text-decoration: none;
}

a:hover {
    color: var(--signal-strong);
}

/* An underlined body link, for prose where colour alone is too quiet. */
.link {
    color: var(--signal);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--signal) 40%, transparent);
}

.link:hover {
    border-bottom-color: var(--signal);
}

/* --- Typography helpers -------------------------------------------------
   De-qualified from the source spec's `h2.sec` / `h3.sub` so the styles can
   sit on whichever element is semantically right for the page. */

.eyebrow {
    margin: 0 0 var(--s2);
    font-family: var(--font-ui);
    font-size: var(--t-eyebrow);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal);
}

/* The uppercase label that heads almost every panel in the mockups. */
.panel-h {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* The field-label scale, a notch below a panel heading: used where an eyebrow
   labels one field rather than a whole panel. */
.panel-h--sm {
    font-size: 10px;
    letter-spacing: 1px;
}

/* And the card scale, between the two: a capability card's eyebrow heads a whole
   card, but a small one. */
.panel-h--card {
    font-size: 10.5px;
    letter-spacing: 0.08em;
}

/* A plain inline label — not an eyebrow. Sentence case, because it reads as part
   of the control it sits beside ("Compare  v5 → v7"). */
.label {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink-3);
}

/* A version label: `v6 · current`. Distinct from `.sub`, which is a heading at
   weight 650 with negative tracking — wrong for a value you scan down a column
   of. */
.ver {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.ver--past {
    color: var(--ink-2);
}

.sec {
    margin: 0 0 var(--s2);
    font-family: var(--font-display);
    font-size: var(--t-h2);
    font-weight: 600;
    letter-spacing: -0.02em;
    /* `pretty` rather than `balance`: balance equalises the lines by *shortening*
       them, which on a heading fed from the database reads as the text stopping
       early with the column half empty. `pretty` only tidies the last line. */
    text-wrap: pretty;
    color: var(--ink);
}

.sub {
    margin: 0 0 var(--s1);
    font-family: var(--font-ui);
    font-size: var(--t-h3);
    /* 650 is deliberate: a real weight on a variable face, snapping to 700 on
       the system stacks. Kept literal from the spec. */
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* Qualified to a paragraph on purpose. `lead` is also the narrow shell's marker
   for a listing row's headline cell (`<td class="lead">`, see relay-mobile.css),
   and an unqualified rule here was reaching all eight of those: every listing's
   title cell was being capped at 62ch and set at the lead's size by a rule meant
   for a page introduction. One name, two jobs — so each says which element it
   means. */
p.lead {
    max-width: var(--measure-lede);
    margin: 0 0 var(--s5);
    font-size: var(--t-lead);
    color: var(--ink-2);
}

.meta {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--ink-3);
}

/* Set solid, for a caption sitting on the same baseline row as a heading —
   the default leading would push it off centre. */
.meta--tight {
    line-height: 1;
}

/* Anything numeric, or a date/time, so columns line up. A value should never
   wrap mid-way — "Jul 27 ·" on one line and "09:00" on the next reads as two
   facts rather than one. */
.num {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.inline-code,
.note code {
    padding: 0.05em 0.4em;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-family: var(--font-data);
    font-size: 0.85em;
    color: var(--ink);
}

/* --- Utilities ---------------------------------------------------------- */

.spacer {
    flex: 1;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Motion ------------------------------------------------------------- */

@keyframes relay-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
    }
}

/* An explanatory sentence. One block, not two: this used to be declared here and
   again two hundred lines up, the first supplying the measure and the second the
   face and size, so half of `.note` was invisible from either. Distinct from
   `.num`, which is nowrap because it holds values that must not break mid-date.

   The UI face rather than the data face, and at the prose floor rather than
   11.5px. A note is made of sentences; the mono face and the smaller size were
   what made every explanation in the app read as fine print. */
.note {
    max-width: var(--measure-lede);
    margin: 0 0 var(--s4);
    font-family: var(--font-ui);
    font-size: var(--t-help);
    line-height: 1.5;
    color: var(--ink-2);
}

/* Single-line variant, for a note used as a header's right-hand caption. */
.note--tight {
    line-height: 1;
}

/* Kept as a no-op alias. `.note` is the UI face now, which is what this modifier
   used to be for; the twenty templates that say `note note--prose` can keep
   saying it while they are trimmed, rather than being renamed in the same pass
   that changes what they say. */
.note--prose {
    font-family: var(--font-ui);
    font-size: var(--t-help);
    line-height: 1.5;
}

/* A note that flags pending state — staged source changes waiting on a save. */
.note--warn {
    font-family: var(--font-ui);
    color: var(--marigold);
    background: var(--marigold-tint);
    border: 1px solid color-mix(in srgb, var(--marigold) 30%, transparent);
    border-radius: var(--r-md);
    padding: 7px 10px;
}