/* ==========================================================================
   EZRRC components: the reusable kit.

   Everything here is addressed by the semantic class names the app templates
   already carry. Two naming conventions coexist on purpose -- catalog and
   core use BEM-ish `.dataset-card__title`, cart and accounts use flatter
   `.cart-line-title` -- because those templates are owned by other apps and
   renaming their markup would be a merge conflict for no reader benefit.
   ========================================================================== */

/* ══ Header ═══════════════════════════════════════════════════════════════ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: rgb(var(--color-canvas-raised) / 0.92);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: 1px solid rgb(var(--color-line));
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    min-height: var(--header-height);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    flex: 0 0 auto;
    color: rgb(var(--color-ink));
    text-decoration: none;
}

.brand:hover {
    color: rgb(var(--color-ink));
}

.brand__mark {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
}

.brand__word {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    line-height: 1;
}

.brand__word span {
    color: rgb(var(--color-marker));
}

/* The inline mark takes its ink from the wrapper and its strata from the
   token layer, so one file covers the header, the footer and both themes. */
.brand__mark {
    fill: currentColor;
}

.brand__strata {
    fill: rgb(var(--color-marker-bright));
}

/* Primary navigation. On narrow screens it wraps onto its own scrolling row
   under the brand bar rather than collapsing into a hamburger: five links do
   not justify a disclosure widget, and a row that scrolls needs no JavaScript
   to be usable. */
.site-nav {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 45.99rem) {
    .site-header__bar {
        flex-wrap: wrap;
        row-gap: 0;
        padding-block-end: var(--space-2xs);
    }

    /* Full-width second row. Without `flex-basis: 100%` the nav shares the bar
       with the brand and the actions, `min-width: 0` lets it shrink, and every
       link disappears at 320px. */
    .site-nav {
        order: 3;
        flex: 1 0 100%;
    }

    .site-nav__list {
        /* Bleed to the gutters so the row visibly runs off the edge. */
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        background-size: var(--gutter) 100%;
    }
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    /* A fade pinned to the right edge. Without it a narrow screen shows one
       nav item and looks like it has one nav item. It sits on empty space
       when nothing overflows, and the gradient ends in the header's own
       colour, so on a wide screen it is invisible. */
    background-image: linear-gradient(
        to left,
        rgb(var(--color-canvas-raised)),
        rgb(var(--color-canvas-raised) / 0)
    );
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 2rem 100%;
    background-attachment: scroll;
}

.site-nav__list::-webkit-scrollbar {
    display: none;
}

.site-nav__link {
    display: block;
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-sm);
    color: rgb(var(--color-muted));
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--speed-fast) var(--ease-out),
        color var(--speed-fast) var(--ease-out);
}

.site-nav__link:hover {
    background-color: rgb(var(--color-canvas-sunk));
    color: rgb(var(--color-ink));
}

.site-nav__link[aria-current] {
    background-color: rgb(var(--color-accent-soft));
    color: rgb(var(--color-accent));
}

.site-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* Header search collapses to an icon-sized field on small screens; it is a
   real <form method="get"> either way. */
.header-search {
    display: none;
    position: relative;
}

@media (min-width: 52rem) {
    .header-search {
        display: block;
    }
}

/* Scoped to the wrapper so the generic `input[type="search"]` rule further down
   this file cannot win on specificity and eat the icon's gutter. */
.header-search .header-search__input {
    width: 11rem;
    padding: var(--space-3xs) var(--space-xs) var(--space-3xs) 1.9rem;
    border: 1px solid rgb(var(--color-line-strong));
    border-radius: var(--radius-sm);
    background-color: rgb(var(--color-canvas));
    font-size: var(--step--1);
    transition: width var(--speed-base) var(--ease-out),
        border-color var(--speed-fast) var(--ease-out);
}

.header-search .header-search__input:focus {
    width: 15rem;
    border-color: rgb(var(--color-accent));
}

.header-search__icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--space-xs);
    translate: 0 -50%;
    width: 0.9rem;
    height: 0.9rem;
    color: rgb(var(--color-faint));
    pointer-events: none;
}

/* Icon-shaped header controls: theme toggle, cart, account. */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    position: relative;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-sm);
    color: rgb(var(--color-muted));
    text-decoration: none;
    transition: background-color var(--speed-fast) var(--ease-out),
        color var(--speed-fast) var(--ease-out);
}

.icon-button:hover {
    background-color: rgb(var(--color-canvas-sunk));
    color: rgb(var(--color-ink));
}

.icon-button svg {
    width: 1.125rem;
    height: 1.125rem;
}

.icon-button__text {
    display: none;
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
}

@media (min-width: 46rem) {
    .icon-button__text {
        display: inline;
    }
}

/* Cart count. Server-rendered, so it is correct before any script runs, and
   laid out inline rather than pinned to a corner -- a floating badge sat on
   top of the word "Cart" once the label appears at 46rem. */
.cart-badge {
    display: inline-block;
    min-width: 1.05rem;
    padding-inline: 0.25rem;
    border-radius: var(--radius-pill);
    background-color: rgb(var(--color-marker));
    color: rgb(var(--color-inverse));
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: var(--weight-medium);
    line-height: 1.05rem;
    text-align: center;
}

.cart-badge[data-bumped] {
    animation: cart-bump var(--speed-slow) var(--ease-out);
}

@keyframes cart-bump {
    0% { scale: 1; }
    35% { scale: 1.45; }
    100% { scale: 1; }
}

/* Theme toggle: three states, cycling system -> light -> dark. Only the icon
   matching the current state is shown; the dot marks "following the system". */
.theme-toggle__icon {
    display: none;
}

:root[data-theme="light"] .theme-toggle__icon--light,
:root[data-theme="dark"] .theme-toggle__icon--dark,
:root:not([data-theme]) .theme-toggle__icon--system {
    display: block;
}

/* ── Announcement and maintenance bands ─────────────────────────────────── */

.band {
    border-block-end: 1px solid rgb(var(--color-line));
    font-size: var(--step--1);
}

.band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
    padding-block: var(--space-xs);
}

.band--announce {
    background-color: rgb(var(--color-accent-soft));
    color: rgb(var(--color-ink));
}

.band--maintenance {
    background-color: rgb(var(--color-caution-soft));
    color: rgb(var(--color-caution));
}

.band__label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */

.breadcrumbs {
    padding-block: var(--space-s);
}

/* An empty block renders an empty <nav>; collapse it rather than leaving a
   gap at the top of pages that declare no trail. */
.breadcrumbs:not(:has(*)) {
    display: none;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs) var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.breadcrumbs__list li + li::before {
    content: "/";
    margin-inline-end: var(--space-xs);
    color: rgb(var(--color-faint));
}

.breadcrumbs__list a {
    color: rgb(var(--color-muted));
    text-decoration: none;
}

.breadcrumbs__list a:hover {
    color: rgb(var(--color-accent));
    text-decoration: underline;
}

.breadcrumbs__list [aria-current] {
    color: rgb(var(--color-ink));
    font-weight: var(--weight-semibold);
}

/* ── Page header ────────────────────────────────────────────────────────── */

.page-header {
    margin-block-end: var(--space-xl);
}

.page-header__title {
    margin-block-end: var(--space-s);
}

.page-header__lead {
    max-width: var(--measure);
    font-size: var(--step-1);
    line-height: var(--leading-normal);
    color: rgb(var(--color-muted));
}

.page-header__badges,
.page-header__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-block-end: var(--space-s);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.page-header__key {
    margin-block-end: var(--space-s);
    font-size: var(--step--1);
}

.section {
    margin-block-start: var(--space-2xl);
}

.section__heading {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    margin-block-end: var(--space-s);
    font-size: var(--step-3);
}

.section__lead,
.section__lede {
    max-width: var(--measure);
    margin-block-end: var(--space-m);
    color: rgb(var(--color-muted));
}

.section__footnote {
    margin-block-start: var(--space-m);
    font-size: var(--step--1);
}

/* Every top-level <section> inside the main column gets air and, from the
   second one on, a ruler above it. */
.layout__main > section + section,
.layout__main > article + section,
.layout__main > section + article {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-xl);
    border-block-start: 1px solid rgb(var(--color-line));
}

/* ══ Buttons ══════════════════════════════════════════════════════════════
   Two spellings are in use across the apps (.button and .btn); they resolve
   to the same component so neither app has to be edited.
   ═══════════════════════════════════════════════════════════════════════ */

.button,
.btn,
button.link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.5rem 0.95rem;
    border: 1px solid rgb(var(--color-line-strong));
    border-radius: var(--radius-sm);
    background-color: rgb(var(--color-canvas));
    color: rgb(var(--color-ink));
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    line-height: 1.35;
    letter-spacing: 0.005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--speed-fast) var(--ease-out),
        border-color var(--speed-fast) var(--ease-out),
        color var(--speed-fast) var(--ease-out),
        box-shadow var(--speed-fast) var(--ease-out);
}

.button:hover,
.btn:hover {
    background-color: rgb(var(--color-canvas-sunk));
    border-color: rgb(var(--color-line-strong));
    color: rgb(var(--color-ink));
}

.button:active,
.btn:active {
    translate: 0 1px;
}

.button[disabled],
.btn[disabled],
.button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    translate: none;
}

.button--primary,
.btn-primary {
    background-color: rgb(var(--color-accent));
    border-color: rgb(var(--color-accent));
    color: rgb(var(--color-inverse));
    box-shadow: var(--shadow-1);
}

.button--primary:hover,
.btn-primary:hover {
    background-color: rgb(var(--color-accent-strong));
    border-color: rgb(var(--color-accent-strong));
    color: rgb(var(--color-inverse));
}

.button--secondary,
.btn-secondary {
    background-color: rgb(var(--color-canvas));
    border-color: rgb(var(--color-accent-line));
    color: rgb(var(--color-accent));
}

.button--secondary:hover,
.btn-secondary:hover {
    background-color: rgb(var(--color-accent-soft));
    color: rgb(var(--color-accent-strong));
}

.button--ghost,
.button--quiet,
.btn-quiet {
    background-color: transparent;
    border-color: transparent;
    color: rgb(var(--color-accent));
}

.button--ghost:hover,
.button--quiet:hover,
.btn-quiet:hover {
    background-color: rgb(var(--color-accent-soft));
    color: rgb(var(--color-accent-strong));
}

.button--danger,
.btn-danger {
    background-color: rgb(var(--color-danger));
    border-color: rgb(var(--color-danger));
    color: rgb(var(--color-inverse));
}

.button--danger:hover,
.btn-danger:hover {
    filter: brightness(0.92);
    color: rgb(var(--color-inverse));
}

.btn-danger-quiet {
    background-color: transparent;
    border-color: transparent;
    color: rgb(var(--color-danger));
}

.btn-danger-quiet:hover {
    background-color: rgb(var(--color-danger-soft));
    color: rgb(var(--color-danger));
}

.button--large,
.btn-large {
    padding: 0.7rem 1.4rem;
    font-size: var(--step-0);
}

.button--block {
    width: 100%;
}

/* ══ Badges, pills, chips ════════════════════════════════════════════════ */

.badge,
.tag,
.status-pill,
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0.1rem 0.45rem;
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-xs);
    background-color: rgb(var(--color-canvas-sunk));
    color: rgb(var(--color-muted));
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.badge__help {
    display: block;
    margin-block-start: var(--space-3xs);
    color: rgb(var(--color-muted));
    font-family: var(--font-body);
    font-size: var(--step--1);
    line-height: var(--leading-snug);
    white-space: normal;
}

/* Availability tier. Queryable is the state that lets someone do the thing
   they came for, so it is the only one that gets colour. */
.badge--tier-warehouse {
    background-color: rgb(var(--color-fresh-soft));
    border-color: rgb(var(--color-fresh) / 0.35);
    color: rgb(var(--color-fresh));
}

.badge--tier-mirror {
    background-color: rgb(var(--color-canvas-sunk));
    border-color: rgb(var(--color-line-strong));
    color: rgb(var(--color-muted));
}

.badge--tier-derived {
    background-color: rgb(var(--color-accent-soft));
    border-color: rgb(var(--color-accent-line));
    color: rgb(var(--color-accent));
}

/* Source format. EBCDIC and fixed-width are the two that mean "you cannot
   open this yourself", which is exactly what the reader needs flagged. */
.badge--format-ebcdic,
.badge--format-ascii_fixed,
.badge--format-pdf {
    background-color: rgb(var(--color-caution-soft));
    border-color: rgb(var(--color-caution) / 0.3);
    color: rgb(var(--color-caution));
}

.badge--spatial {
    background-color: rgb(var(--color-marker-soft));
    border-color: rgb(var(--color-marker) / 0.3);
    color: rgb(var(--color-marker));
}

.badge--key,
.badge--join {
    padding-inline: 0.3rem;
    font-size: 0.6875rem;
    text-transform: lowercase;
}

.badge--key {
    background-color: rgb(var(--color-marker-soft));
    border-color: rgb(var(--color-marker) / 0.3);
    color: rgb(var(--color-marker));
}

.badge--join {
    background-color: rgb(var(--color-accent-soft));
    border-color: rgb(var(--color-accent-line));
    color: rgb(var(--color-accent));
}

.badge--fresh {
    background-color: rgb(var(--color-fresh-soft));
    border-color: rgb(var(--color-fresh) / 0.3);
    color: rgb(var(--color-fresh));
}

.badge--recent {
    background-color: rgb(var(--color-marker-soft));
    border-color: rgb(var(--color-marker) / 0.3);
    color: rgb(var(--color-marker));
}

.badge--stale {
    background-color: rgb(var(--color-caution-soft));
    border-color: rgb(var(--color-caution) / 0.3);
    color: rgb(var(--color-caution));
}

.badge--unknown {
    color: rgb(var(--color-muted));
}

.tag {
    font-family: var(--font-body);
    font-size: var(--step--1);
    border-radius: var(--radius-pill);
    padding-inline: 0.5rem;
}

.filter-chip {
    font-family: var(--font-body);
    white-space: normal;
    margin-inline-end: var(--space-3xs);
}

.filter-chip-none {
    color: rgb(var(--color-muted));
    font-style: italic;
}

.filter-chip-option {
    background-color: rgb(var(--color-accent-soft));
    border-color: rgb(var(--color-accent-line));
    color: rgb(var(--color-accent));
}

/* Order and job status. */
.status-pill {
    font-family: var(--font-body);
    font-size: var(--step--1);
    padding-inline: 0.5rem;
    border-radius: var(--radius-pill);
}

.status-ready {
    background-color: rgb(var(--color-fresh-soft));
    border-color: rgb(var(--color-fresh) / 0.35);
    color: rgb(var(--color-fresh));
}

.status-pending,
.status-building {
    background-color: rgb(var(--color-accent-soft));
    border-color: rgb(var(--color-accent-line));
    color: rgb(var(--color-accent));
}

.status-partial,
.status-expired {
    background-color: rgb(var(--color-caution-soft));
    border-color: rgb(var(--color-caution) / 0.35);
    color: rgb(var(--color-caution));
}

.status-failed {
    background-color: rgb(var(--color-danger-soft));
    border-color: rgb(var(--color-danger) / 0.35);
    color: rgb(var(--color-danger));
}

/* ══ Panels and cards ════════════════════════════════════════════════════ */

.panel,
.sidebar-block,
.account-section,
.callout {
    padding: var(--space-l);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
}

.panel--narrow {
    max-width: 36rem;
    margin-inline: auto;
}

.sidebar-block {
    padding: var(--space-m);
}

.sidebar-block__heading {
    margin-block-end: var(--space-s);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-muted));
}

.sidebar-facts,
.provenance__facts,
.freshness__facts {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-m);
    margin: 0;
    font-size: var(--step--1);
}

.sidebar-facts dt,
.provenance__facts dt,
.freshness__facts dt {
    color: rgb(var(--color-muted));
}

.sidebar-facts dd,
.provenance__facts dd,
.freshness__facts dd {
    margin: 0;
    color: rgb(var(--color-text));
    min-width: 0;
    overflow-wrap: anywhere;
}

.provenance__facts {
    gap: var(--space-s) var(--space-l);
    font-size: var(--step-0);
}

/* A badge sitting in front of a sentence needs a word space; its own padding
   reads as part of the badge, not as separation from the prose. */
.provenance__facts dd .badge {
    margin-inline-end: 0.4em;
}

.provenance__manuals {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-list,
.related__list,
.provenance__manuals,
.learn-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    font-size: var(--step--1);
}

.sidebar-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs);
}

/* Where the second element glosses the first rather than counting it -- a
   column name and its plain-English reading -- they belong beside each other,
   not pushed to opposite margins. */
.sidebar-list--stack li {
    display: block;
}

.sidebar-list--stack .sidebar-list__count {
    display: block;
    color: rgb(var(--color-muted));
}

.sidebar-list__count,
.category-strip__count {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
    font-variant-numeric: tabular-nums;
}

/* Card grid used by the home page and the catalog. auto-fit keeps a single
   card from stretching the full width when a filter leaves one result. */
.card-grid,
.dataset-grid,
.category-grid,
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--space-m);
    list-style: none;
    margin: 0;
    padding: 0;
}

.card,
.dataset-card,
.category-tile,
.profile,
.learn-card,
.article-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-m);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
    transition: border-color var(--speed-fast) var(--ease-out),
        box-shadow var(--speed-base) var(--ease-out);
}

.card:hover,
.dataset-card:hover,
.category-tile:hover,
.learn-card:hover,
.article-card:hover {
    border-color: rgb(var(--color-accent-line));
    box-shadow: var(--shadow-2);
}

.card__eyebrow,
.dataset-card__category {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-muted));
    text-decoration: none;
}

.card__title,
.dataset-card__title,
.category-tile__title,
.learn-card__title,
.article-card h3 {
    font-size: var(--step-1);
    line-height: var(--leading-snug);
}

.card__title a,
.dataset-card__title a,
.category-tile__title a,
.learn-card__title a,
.article-card h3 a {
    color: rgb(var(--color-ink));
    text-decoration: none;
}

.card__title a:hover,
.dataset-card__title a:hover,
.category-tile__title a:hover,
.learn-card__title a:hover,
.article-card h3 a:hover {
    color: rgb(var(--color-accent));
    text-decoration: underline;
}

.card__body,
.dataset-card__blurb,
.category-tile__blurb,
.learn-card__summary {
    font-size: var(--step--1);
    line-height: var(--leading-normal);
    color: rgb(var(--color-muted));
}

.card__meta,
.dataset-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs) var(--space-xs);
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
}

.dataset-card__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--space-s);
    margin: 0;
    padding-block-start: var(--space-xs);
    border-block-start: 1px dotted rgb(var(--color-line-strong));
    font-size: var(--step--2);
}

.dataset-card__facts dt {
    color: rgb(var(--color-muted));
}

.dataset-card__facts dd {
    margin: 0;
    color: rgb(var(--color-ink));
    font-variant-numeric: tabular-nums;
}

/* Only the figures are monospaced -- the `.numeric` utility carries that.
   Setting a whole fact list in mono makes a phrase like "Nightly" read as a
   value the reader is supposed to decode. */

.dataset-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-start: auto;
    padding-block-start: var(--space-xs);
}

/* ══ Notices and callouts ════════════════════════════════════════════════ */

.notice,
.callout {
    border-inline-start: 3px solid rgb(var(--color-line-strong));
    font-size: var(--step-0);
}

.notice {
    padding: var(--space-s) var(--space-m);
    border: 1px solid rgb(var(--color-line));
    border-inline-start-width: 3px;
    border-radius: var(--radius-sm);
    background-color: rgb(var(--color-canvas));
    margin-block-end: var(--space-m);
}

.notice > * + * {
    margin-block-start: var(--space-xs);
}

.notice--info {
    border-inline-start-color: rgb(var(--color-info));
    background-color: rgb(var(--color-info-soft));
}

.notice--success,
.callout--use {
    border-inline-start-color: rgb(var(--color-fresh));
    background-color: rgb(var(--color-fresh-soft));
}

.notice--warning,
.callout--warning {
    border-inline-start-color: rgb(var(--color-caution));
    background-color: rgb(var(--color-caution-soft));
}

/* `.notice--error` is the class Django's messages framework produces for
   `messages.error`; it and `--danger` are the same thing. */
.notice--danger,
.notice--error {
    border-inline-start-color: rgb(var(--color-danger));
    background-color: rgb(var(--color-danger-soft));
}

.notice--debug {
    border-inline-start-color: rgb(var(--color-line-strong));
    color: rgb(var(--color-muted));
}

.callout__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-start: var(--space-m);
}

.callout .section__heading,
.notice h2 {
    font-size: var(--step-2);
    margin-block-end: var(--space-xs);
}

.empty,
.empty-state {
    padding: var(--space-xl) var(--space-l);
    border: 1px dashed rgb(var(--color-line-strong));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas-sunk) / 0.5);
    color: rgb(var(--color-muted));
    text-align: center;
}

.empty-state > * + * {
    margin-block-start: var(--space-m);
}

.disclaimer {
    padding: var(--space-s) var(--space-m);
    border-inline-start: 2px solid rgb(var(--color-marker-bright));
    background-color: rgb(var(--color-canvas-sunk) / 0.6);
    font-size: var(--step--1);
    line-height: var(--leading-normal);
    color: rgb(var(--color-muted));
}

/* Messages framework. */
.messages {
    list-style: none;
    margin: 0 0 var(--space-l);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* ══ Tables ══════════════════════════════════════════════════════════════
   Every wide table lives inside .table-scroll, which is the only element on
   the page permitted to scroll horizontally.
   ═══════════════════════════════════════════════════════════════════════ */

.table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
    /* A fade on each edge tells the reader there is more to the side. */
    background-image:
        linear-gradient(to right, rgb(var(--color-canvas)), rgb(var(--color-canvas) / 0)),
        linear-gradient(to left, rgb(var(--color-canvas)), rgb(var(--color-canvas) / 0)),
        linear-gradient(to right, rgb(var(--color-shadow) / 0.1), rgb(var(--color-shadow) / 0)),
        linear-gradient(to left, rgb(var(--color-shadow) / 0.1), rgb(var(--color-shadow) / 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 2.5rem 100%, 2.5rem 100%, 0.75rem 100%, 0.75rem 100%;
    background-attachment: local, local, scroll, scroll;
}

.table,
.data-table,
.checkout-table,
.order-table {
    width: 100%;
    font-size: var(--step--1);
    line-height: var(--leading-snug);
}

.table caption,
.data-table caption {
    padding: var(--space-xs) var(--space-s);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
    text-align: start;
}

.table th,
.table td,
.data-table th,
.data-table td,
.checkout-table th,
.checkout-table td,
.order-table th,
.order-table td {
    padding: var(--space-xs) var(--space-s);
    border-block-end: 1px solid rgb(var(--color-line));
    text-align: start;
    vertical-align: top;
}

.table thead th,
.data-table thead th,
.checkout-table thead th,
.order-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: rgb(var(--color-canvas-sunk));
    border-block-end: 1px solid rgb(var(--color-line-strong));
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-muted));
    white-space: nowrap;
}

.table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even) {
    background-color: rgb(var(--color-canvas-sunk) / 0.45);
}

.table tbody tr:hover,
.data-table tbody tr:hover {
    background-color: rgb(var(--color-accent-soft) / 0.6);
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
    border-block-end: 0;
}

.table tbody th[scope="row"] {
    font-weight: var(--weight-semibold);
    color: rgb(var(--color-ink));
}

.table__ordinal,
.table__span {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: rgb(var(--color-muted));
    white-space: nowrap;
}

.table__span {
    color: rgb(var(--color-marker));
}

.table__column-name {
    white-space: nowrap;
}

/* Preview rows are raw data: monospace, tight, and never wrapped, so columns
   stay comparable down the page. */
.table--preview td,
.table--preview th {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    white-space: nowrap;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table--codes td:first-child,
.table--codes th[scope="row"] {
    white-space: nowrap;
}

/* Sortable headers, wired by static/js/site.js. Without JS the button is
   never inserted and the header stays a plain, readable label. */
.table th .sort-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    width: 100%;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: start;
    cursor: pointer;
}

.table th .sort-button::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    background-color: currentColor;
    opacity: 0.3;
    clip-path: polygon(50% 0, 100% 45%, 0 45%, 50% 0, 50% 100%, 100% 55%, 0 55%);
}

.table th[aria-sort="ascending"] .sort-button::after {
    opacity: 1;
    clip-path: polygon(50% 10%, 100% 80%, 0 80%);
}

.table th[aria-sort="descending"] .sort-button::after {
    opacity: 1;
    clip-path: polygon(50% 90%, 100% 20%, 0 20%);
}

.table th[aria-sort] {
    color: rgb(var(--color-accent));
}

/* ══ Forms ═══════════════════════════════════════════════════════════════ */

label,
.field-label,
.facets__label,
.search-form__label,
.download__label {
    display: block;
    margin-block-end: var(--space-3xs);
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    color: rgb(var(--color-ink));
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea,
.field-input,
.facets__input,
.search-form__input,
.download__select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgb(var(--color-line-strong));
    border-radius: var(--radius-sm);
    background-color: rgb(var(--color-canvas));
    color: rgb(var(--color-text));
    font-size: var(--step-0);
    line-height: 1.4;
    transition: border-color var(--speed-fast) var(--ease-out),
        box-shadow var(--speed-fast) var(--ease-out);
}

input::placeholder,
textarea::placeholder {
    color: rgb(var(--color-muted));
}

input:hover:not([disabled]),
select:hover:not([disabled]),
textarea:hover:not([disabled]) {
    border-color: rgb(var(--color-accent-line));
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgb(var(--color-accent));
    box-shadow: 0 0 0 3px rgb(var(--color-accent) / 0.18);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    box-shadow: 0 0 0 3px rgb(var(--color-accent) / 0.18), var(--focus-ring);
}

input[type="checkbox"],
input[type="radio"] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    accent-color: rgb(var(--color-accent));
    cursor: pointer;
}

select {
    appearance: none;
    padding-inline-end: 2rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1rem) 55%, calc(100% - 0.7rem) 55%;
    background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

textarea {
    min-height: 6rem;
    resize: vertical;
}

.field,
.form-row {
    margin-block-end: var(--space-m);
}

.field-help,
.helptext,
.field .helptext {
    display: block;
    margin-block-start: var(--space-3xs);
    font-size: var(--step--1);
    line-height: var(--leading-snug);
    color: rgb(var(--color-muted));
}

.field-inline,
.checkbox-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3xs) var(--space-xs);
}

.field-inline label,
.checkbox-row label {
    margin: 0;
    font-weight: var(--weight-regular);
}

.field-inline .field-help,
.checkbox-row .field-help {
    grid-column: 2;
}

.field-group,
fieldset.field-group {
    margin-block-end: var(--space-l);
    padding: var(--space-m);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas-sunk) / 0.4);
}

.field-group > legend,
fieldset.field-group > legend {
    padding-inline: var(--space-xs);
    margin-inline-start: calc(var(--space-xs) * -1);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-muted));
}

.form-errors,
ul.errorlist {
    list-style: none;
    margin: 0 0 var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    border-inline-start: 3px solid rgb(var(--color-danger));
    border-radius: var(--radius-xs);
    background-color: rgb(var(--color-danger-soft));
    color: rgb(var(--color-danger));
    font-size: var(--step--1);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
    margin-block-start: var(--space-l);
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

.inline-form select,
.inline-form input {
    width: auto;
    min-width: 9rem;
}

/* Django's `form.as_p` output. Every allauth and account form renders this
   way, so it has to look deliberate rather than merely unstyled. */
form p {
    margin-block-end: var(--space-m);
}

form p > label {
    margin-block-end: var(--space-3xs);
}

/* `as_p` emits the label before the checkbox, which stacks a full-width label
   over an orphaned box. Flex order puts the box back where a reader expects
   it without touching the markup a form class generates. */
form p:has(> input[type="checkbox"]),
form p:has(> input[type="radio"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
}

form p:has(> input[type="checkbox"]) > input[type="checkbox"],
form p:has(> input[type="radio"]) > input[type="radio"] {
    order: 1;
    translate: 0 0.15em;
}

form p:has(> input[type="checkbox"]) > label,
form p:has(> input[type="radio"]) > label {
    order: 2;
    flex: 1 1 12rem;
    margin: 0;
    font-weight: var(--weight-regular);
}

form p:has(> input[type="checkbox"]) > .helptext,
form p:has(> input[type="radio"]) > .helptext,
form p:has(> input[type="checkbox"]) > .errorlist,
form p:has(> input[type="radio"]) > .errorlist {
    order: 3;
    flex: 1 1 100%;
}

/* Search bar used on the codes pages and the catalog. */
.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-xs);
    margin-block-end: var(--space-l);
}

.search-form__label {
    flex: 1 1 100%;
    margin: 0;
}

.search-form__input {
    flex: 1 1 16rem;
    width: auto;
}

/* ══ Code blocks ═════════════════════════════════════════════════════════ */

pre {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: var(--space-m);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas-sunk));
    color: rgb(var(--color-ink));
    font-size: var(--step--1);
    line-height: 1.55;
    tab-size: 2;
}

pre code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    white-space: pre;
}

.codeblock {
    position: relative;
}

.codeblock__copy {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-end: var(--space-xs);
    padding: 0.15rem 0.5rem;
    border: 1px solid rgb(var(--color-line-strong));
    border-radius: var(--radius-xs);
    background-color: rgb(var(--color-canvas));
    color: rgb(var(--color-muted));
    font-family: var(--font-mono);
    font-size: var(--step--2);
    opacity: 0;
    transition: opacity var(--speed-fast) var(--ease-out);
}

.codeblock:hover .codeblock__copy,
.codeblock__copy:focus-visible {
    opacity: 1;
}

/* ══ Ad slots ════════════════════════════════════════════════════════════
   Two rules matter here. The frame reserves its height before AdSense fills
   it, so nothing on the page moves when the unit arrives; and every unit is
   labelled "Advertisement", which AdSense policy requires and which is the
   honest thing to do on a page people read for financial decisions.
   ═══════════════════════════════════════════════════════════════════════ */

.ad-slot {
    display: block;
    position: relative;
    width: 100%;
    margin-block: var(--space-l);
    padding-block-start: 1.1rem;
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas-sunk) / 0.45);
    overflow: hidden;
}

.ad-slot::before {
    content: "Advertisement";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: 0.1rem var(--space-xs);
    border-end-end-radius: var(--radius-xs);
    background-color: rgb(var(--color-canvas-sunk));
    color: rgb(var(--color-muted));
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    line-height: 1.1rem;
    pointer-events: none;
}

.ad-slot .adsbygoogle,
.ad-slot ins {
    display: block;
    width: 100%;
}

.ad-slot--leaderboard {
    min-height: calc(var(--ad-leaderboard-height) + 1.1rem);
}

@media (min-width: 60rem) {
    .ad-slot--leaderboard {
        min-height: calc(var(--ad-leaderboard-height-wide) + 1.1rem);
    }
}

.ad-slot--sidebar {
    min-height: calc(var(--ad-sidebar-height) + 1.1rem);
    margin-block: 0;
}

.ad-slot--in_content {
    min-height: calc(var(--ad-in-content-height) + 1.1rem);
}

.ad-slot--in_grid {
    min-height: calc(var(--ad-in-grid-height) + 1.1rem);
    margin-block: 0;
}

.ad-slot--in_list {
    min-height: calc(var(--ad-in-list-height) + 1.1rem);
}

.ad-slot--footer {
    min-height: calc(var(--ad-footer-height) + 1.1rem);
}

/* An in-grid unit takes one cell of the card grid rather than breaking it. */
.dataset-grid > .ad-slot,
.card-grid > .ad-slot {
    grid-column: 1 / -1;
}

@media (min-width: 48rem) {
    .dataset-grid > .ad-slot--in_grid,
    .card-grid > .ad-slot--in_grid {
        grid-column: auto;
    }
}

/* ══ Freshness ═══════════════════════════════════════════════════════════ */

.freshness {
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-m);
    border-block-start: 1px dotted rgb(var(--color-line-strong));
}

.freshness__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs) var(--space-xs);
    margin-block-end: var(--space-s);
    font-size: var(--step--1);
}

.freshness__label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-muted));
}

.freshness__version {
    overflow-wrap: anywhere;
}

/* The dot before "observed 3 hours ago" carries the freshness level, so the
   state is visible at a glance without reading the sentence. */
.freshness__observed::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: var(--space-3xs);
    border-radius: var(--radius-pill);
    background-color: currentColor;
    vertical-align: 0.05em;
}

.freshness--fresh .freshness__observed {
    color: rgb(var(--color-fresh));
}

.freshness--recent .freshness__observed {
    color: rgb(var(--color-marker));
}

.freshness--stale .freshness__observed {
    color: rgb(var(--color-caution));
}

.freshness--unknown .freshness__observed {
    color: rgb(var(--color-muted));
}

.freshness__line--unknown {
    color: rgb(var(--color-muted));
}

/* ══ Pagination ══════════════════════════════════════════════════════════ */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid rgb(var(--color-line));
}

.pagination__link {
    padding: 0.35rem 0.8rem;
    border: 1px solid rgb(var(--color-line-strong));
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.pagination__link:hover {
    background-color: rgb(var(--color-accent-soft));
}

.pagination__status {
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
    font-variant-numeric: tabular-nums;
}

/* ══ Map ═════════════════════════════════════════════════════════════════ */

.map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 30rem;
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas-sunk));
    overflow: hidden;
}

.map__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: var(--space-xs);
    padding: var(--space-l);
    text-align: center;
    color: rgb(var(--color-muted));
    font-size: var(--step--1);
}

.map.is-ready .map__fallback {
    display: none;
}

/* MapLibre's own chrome, re-tinted to the token layer. */
.map .maplibregl-ctrl-group {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
}

.map .maplibregl-ctrl-attrib {
    font-family: var(--font-body);
    font-size: var(--step--2);
}

.map .maplibregl-popup-content {
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--step--1);
    box-shadow: var(--shadow-2);
}

/* ══ The funnel rail ═════════════════════════════════════════════════════
   A survey chain, not a progress bar: eight stations along a hairline, the
   one you are at marked with a filled brass diamond. It is an ordered list
   with an aria-current marker, so a screen reader gets the same information
   the diamond gives everyone else.
   ═══════════════════════════════════════════════════════════════════════ */

.funnel {
    margin-block-end: var(--space-xl);
}

.funnel__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
    margin-block-end: var(--space-s);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-muted));
}

.funnel__summary strong {
    color: rgb(var(--color-marker));
    font-weight: var(--weight-medium);
}

.funnel__rail {
    display: flex;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-xs);
    overflow-x: auto;
    scrollbar-width: thin;
    counter-reset: station;
}

.funnel__station {
    position: relative;
    flex: 1 1 0;
    min-width: 5.5rem;
    padding-block-start: 1.1rem;
    text-align: center;
    counter-increment: station;
}

/* The chain itself: a hairline drawn behind the marks. */
.funnel__station::before {
    content: "";
    position: absolute;
    inset-block-start: 0.44rem;
    inset-inline: -50% 50%;
    height: 1px;
    background-color: rgb(var(--color-line-strong));
}

.funnel__station:first-child::before {
    display: none;
}

.funnel__mark {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    width: 0.9rem;
    height: 0.9rem;
    border: 1px solid rgb(var(--color-line-strong));
    border-radius: var(--radius-pill);
    background-color: rgb(var(--color-canvas));
}

.funnel__label {
    display: block;
    font-size: var(--step--2);
    line-height: var(--leading-snug);
    color: rgb(var(--color-muted));
    text-decoration: none;
    overflow-wrap: break-word;
}

a.funnel__label:hover {
    color: rgb(var(--color-accent));
    text-decoration: underline;
}

.funnel__station--done .funnel__mark {
    background-color: rgb(var(--color-accent));
    border-color: rgb(var(--color-accent));
}

.funnel__station--done::before {
    background-color: rgb(var(--color-accent));
}

.funnel__station--done .funnel__label {
    color: rgb(var(--color-muted));
}

.funnel__station--current .funnel__mark {
    width: 1.05rem;
    height: 1.05rem;
    inset-block-start: -0.075rem;
    border-radius: var(--radius-xs);
    border-color: rgb(var(--color-marker));
    background-color: rgb(var(--color-marker-bright));
    rotate: 45deg;
    box-shadow: 0 0 0 3px rgb(var(--color-marker-bright) / 0.2);
}

.funnel__station--current::before {
    background-color: rgb(var(--color-accent));
}

.funnel__station--current .funnel__label {
    color: rgb(var(--color-ink));
    font-weight: var(--weight-semibold);
}

/* Below the rail breakpoint the eight stations are unreadable, so the rail
   collapses to a plain scale and the step name is carried by the summary. */
@media (max-width: 47.99rem) {
    .funnel__station {
        min-width: 0;
        padding-block-start: 0.9rem;
    }

    .funnel__label {
        display: none;
    }

    .funnel__station--current .funnel__label {
        display: none;
    }
}

/* ══ Account sub-navigation ══════════════════════════════════════════════ */

.account-nav {
    margin-block: var(--space-m) var(--space-xl);
    border-block-end: 1px solid rgb(var(--color-line));
}

.account-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-nav__list a {
    display: block;
    padding-block: var(--space-xs);
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    color: rgb(var(--color-muted));
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.account-nav__list a:hover {
    color: rgb(var(--color-ink));
}

.account-nav__list a[aria-current] {
    border-block-end-color: rgb(var(--color-marker-bright));
    color: rgb(var(--color-ink));
}

/* ══ Stat blocks ═════════════════════════════════════════════════════════ */

.stat-grid,
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: var(--space-m);
    margin: 0;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding-inline-start: var(--space-s);
    border-inline-start: 2px solid rgb(var(--color-marker-bright));
}

.stat dt,
.stat__label {
    order: 2;
    font-size: var(--step--2);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-muted));
}

.stat dd,
.stat__value {
    order: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: rgb(var(--color-ink));
    font-variant-numeric: tabular-nums;
}

.stat__of {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: var(--weight-regular);
    color: rgb(var(--color-muted));
}

/* ══ Footer ══════════════════════════════════════════════════════════════ */

.site-footer {
    margin-block-start: auto;
    border-block-start: 1px solid rgb(var(--color-line));
    background-color: rgb(var(--color-canvas));
}

.site-footer__disclaimer {
    padding-block: var(--space-m);
    border-block-end: 1px solid rgb(var(--color-line));
    background-color: rgb(var(--color-canvas-sunk) / 0.6);
}

.site-footer__disclaimer p {
    max-width: var(--measure);
    font-size: var(--step--1);
    line-height: var(--leading-normal);
    color: rgb(var(--color-muted));
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-l) var(--space-xl);
    padding-block: var(--space-xl);
}

.site-footer__heading {
    margin-block-end: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-muted));
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    font-size: var(--step--1);
}

.site-footer__list a {
    color: rgb(var(--color-text));
    text-decoration: none;
}

.site-footer__list a:hover {
    color: rgb(var(--color-accent));
    text-decoration: underline;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: var(--space-m) var(--space-xl);
    border-block-start: 1px solid rgb(var(--color-line));
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ══ Details disclosure ══════════════════════════════════════════════════ */

details.disclosure {
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
}

details.disclosure > summary {
    padding: var(--space-s) var(--space-m);
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    color: rgb(var(--color-ink));
    cursor: pointer;
    list-style: none;
}

details.disclosure > summary::-webkit-details-marker {
    display: none;
}

details.disclosure > summary::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-inline-end: var(--space-xs);
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    rotate: -45deg;
    translate: 0 -0.1em;
    transition: rotate var(--speed-fast) var(--ease-out);
}

details.disclosure[open] > summary::before {
    rotate: 45deg;
    translate: 0 -0.15em;
}

details.disclosure > *:not(summary) {
    padding: 0 var(--space-m) var(--space-m);
}