/* ==========================================================================
   EZRRC base: reset, webfaces, typography, layout primitives.
   Load order is tokens.css -> base.css -> components.css -> pages.css.
   ========================================================================== */

/* ── Webfaces ───────────────────────────────────────────────────────────────
   Self-hosted under static/fonts. No CDN link anywhere: a Content-Security
   Policy that allows a font host is a policy that allows a script host, and
   local development has no network. Paths are relative so the manifest
   static storage can rewrite them at collectstatic time.

   Latin and latin-extended only. unicode-range means a page of English never
   downloads the extended file at all.
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/archivo-latin.cd56e2ec63d7.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/archivo-latin-ext.c5e41aa17045.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin.30164609c163.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-ext.c6ba61588d7d.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "Source Sans 3";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-3-italic-latin.410bdda67c60.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-400-latin.79936b18df9f.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-500-latin.b1c8a895f5fd.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
}

html:focus-within {
    scroll-behavior: smooth;
}

/* The header is sticky, so anything an in-page link can land on has to reserve
   its height -- otherwise "Record layout" jumps to a heading hidden behind the
   navigation. */
:target,
[id] > h2,
[id] > h3,
section[id],
article[id],
tr[id],
.section__heading,
.schema__heading,
.code-set__heading {
    scroll-margin-block-start: calc(var(--header-height) + var(--space-m));
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    min-height: 100svh;
    margin: 0;
    background-color: rgb(var(--color-paper));
    color: rgb(var(--color-text));
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading-normal);
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* The page body itself never scrolls sideways. Wide tables and code
       blocks scroll inside their own container instead. */
    overflow-x: hidden;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

svg {
    fill: currentColor;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

ul,
ol {
    padding: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

legend {
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    border: 0;
    border-top: 1px solid rgb(var(--color-line));
}

/* ── Typography ─────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    color: rgb(var(--color-ink));
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

h1 {
    font-size: var(--step-4);
    font-weight: var(--weight-bold);
}

h2 {
    font-size: var(--step-3);
}

h3 {
    font-size: var(--step-2);
    line-height: var(--leading-snug);
}

h4 {
    font-size: var(--step-1);
    line-height: var(--leading-snug);
}

h5,
h6 {
    font-size: var(--step-0);
    line-height: var(--leading-snug);
}

p,
li,
dd,
dt,
figcaption,
blockquote {
    text-wrap: pretty;
}

a {
    color: rgb(var(--color-accent));
    text-decoration-color: rgb(var(--color-accent) / 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--speed-fast) var(--ease-out),
        text-decoration-color var(--speed-fast) var(--ease-out);
}

a:hover {
    color: rgb(var(--color-accent-strong));
    text-decoration-color: currentColor;
}

strong,
b {
    font-weight: var(--weight-semibold);
    color: rgb(var(--color-ink));
}

small {
    font-size: var(--step--1);
}

code,
kbd,
samp,
pre {
    font-family: var(--font-mono);
    font-size: 0.9125em;
    font-variant-ligatures: none;
}

:not(pre) > code {
    padding: 0.1em 0.36em;
    border-radius: var(--radius-xs);
    background-color: rgb(var(--color-canvas-sunk));
    color: rgb(var(--color-ink));
    word-break: break-word;
}

abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
}

::selection {
    background-color: rgb(var(--color-marker-bright) / 0.35);
    color: rgb(var(--color-ink));
}

/* ── Focus ──────────────────────────────────────────────────────────────────
   Never removed, only replaced. Keyboard users get the ring; a mouse click on
   a button does not paint one, because :focus-visible already knows.
   ────────────────────────────────────────────────────────────────────────── */

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

a:focus-visible,
summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
}

/* ── Skip link ──────────────────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: 100;
    padding: var(--space-xs) var(--space-m);
    border-radius: var(--radius-sm);
    background-color: rgb(var(--color-ink));
    color: rgb(var(--color-inverse));
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--speed-base) var(--ease-out);
}

.skip-link:focus {
    transform: translateY(0);
    color: rgb(var(--color-inverse));
}

/* ── Utilities ──────────────────────────────────────────────────────────── */

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

.visually-hidden:focus-within {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
}

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

.hint {
    display: block;
    color: rgb(var(--color-muted));
    font-size: var(--step--1);
    line-height: var(--leading-snug);
}

.nowrap {
    white-space: nowrap;
}

.numeric {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.null {
    color: rgb(var(--color-muted));
    font-style: italic;
}

/* An eyebrow: the small tracked-out label above a heading. Used sparingly,
   and only where it names a real category the reader can act on. */
.eyebrow {
    display: block;
    margin-bottom: var(--space-2xs);
    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));
}

/* ── Layout primitives ──────────────────────────────────────────────────── */

.shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* The page frame: header, breadcrumb strip, body grid, footer. */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.page__body {
    flex: 1 1 auto;
    padding-block: var(--space-l) var(--space-3xl);
}

/* Content plus a right-hand rail. The rail follows the main column in the
   DOM, and sits to its right on wide screens, so reading order and visual
   order agree and no `order` juggling is needed. */
.layout {
    display: grid;
    gap: var(--space-xl);
    align-items: start;
}

@media (min-width: 64rem) {
    .layout--rail {
        grid-template-columns: minmax(0, 1fr) var(--rail-width);
        gap: var(--space-2xl);
    }
}

.layout__main {
    min-width: 0;
}

/* A single full-width column: the home page, the funnel steps, the error
   pages. Named rather than implicit so a template says what it means. */
.layout--full {
    grid-template-columns: minmax(0, 1fr);
}

.layout__rail {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

/* A page that fills no sidebar still renders the <aside>. Collapsing it keeps
   the grid gap from opening a hole under the content. */
.layout__rail:not(:has(*)) {
    display: none;
}

@media (min-width: 64rem) {
    .layout__rail {
        position: sticky;
        top: calc(var(--header-height) + var(--space-m));
        max-height: calc(100svh - var(--header-height) - var(--space-xl));
        overflow-y: auto;
        overscroll-behavior: contain;
        /* A sticky rail that clips its own focus ring is a keyboard trap in
           spirit; the padding keeps the ring inside the scroll box. */
        padding: 2px;
        margin: -2px;
    }
}

/* Centred single-column pages: legal, about, sign-in, errors. */
.layout--narrow .layout__main {
    max-width: 52rem;
    margin-inline: auto;
}

.layout--auth .layout__main {
    max-width: 30rem;
    margin-inline: auto;
}

/* Vertical rhythm between top-level sections of a page. */
.stack > * + * {
    margin-block-start: var(--space-l);
}

.stack--tight > * + * {
    margin-block-start: var(--space-s);
}

.stack--loose > * + * {
    margin-block-start: var(--space-2xl);
}

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

/* ── Prose ──────────────────────────────────────────────────────────────────
   Long-form copy: /learn articles, about, legal, and the free-text fields on
   a dataset page. Constrained to a readable measure regardless of container.
   ────────────────────────────────────────────────────────────────────────── */

/* The measure lives on the children, not the container, so a code fence or a
   table can use the full column while the paragraphs around it stay at a
   readable line length. An ASCII diagram of an API number squeezed to 68ch
   and scrolled sideways is the opposite of the point. */
.prose {
    line-height: var(--leading-loose);
}

.prose > * {
    max-width: var(--measure);
}

.prose > pre,
.prose > table,
.prose > figure,
.prose > img,
.prose > .table-scroll,
.prose > blockquote {
    max-width: none;
}

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

.prose h2 {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid rgb(var(--color-line));
}

.prose h3 {
    margin-block-start: var(--space-xl);
}

.prose h4 {
    margin-block-start: var(--space-l);
}

.prose > :first-child {
    margin-block-start: 0;
}

.prose ul,
.prose ol {
    padding-inline-start: var(--space-l);
}

.prose li + li {
    margin-block-start: var(--space-2xs);
}

.prose ul {
    list-style: none;
    padding-inline-start: var(--space-m);
}

.prose ul > li {
    position: relative;
    padding-inline-start: var(--space-m);
}

/* A survey tick rather than a bullet. */
.prose ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.62em;
    width: 0.5rem;
    height: 1px;
    background-color: rgb(var(--color-marker-bright));
}

.prose ol {
    list-style: decimal;
}

.prose ol > li::marker {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: rgb(var(--color-muted));
}

.prose__lede,
.prose > p.lede {
    font-size: var(--step-1);
    line-height: var(--leading-normal);
    color: rgb(var(--color-muted));
}

.prose blockquote {
    padding-inline-start: var(--space-m);
    border-inline-start: 2px solid rgb(var(--color-marker-bright));
    color: rgb(var(--color-muted));
}

.prose img {
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--color-line));
}

.prose figcaption {
    margin-block-start: var(--space-xs);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.prose hr {
    margin-block: var(--space-xl);
}

/* Markdown tables and code fences come out of apps.content.rendering with no
   wrapper, so they get their own scroll context here rather than widening
   the page. */
.prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    font-size: var(--step--1);
}

.prose pre {
    overflow-x: auto;
}

/* ── The ruler ──────────────────────────────────────────────────────────────
   The signature device. RRC record layouts are byte positions, so the rule
   that separates sections on this site is a measuring scale rather than a
   plain line: hairline, a tick every 8px, a longer brass tick every 40px.
   ────────────────────────────────────────────────────────────────────────── */

.rule {
    height: 9px;
    border: 0;
    border-block-start: 1px solid rgb(var(--color-line-strong));
    background-image:
        repeating-linear-gradient(
            to right,
            rgb(var(--color-marker-bright)) 0 1px,
            transparent 1px 40px
        ),
        repeating-linear-gradient(
            to right,
            rgb(var(--color-faint) / 0.55) 0 1px,
            transparent 1px 8px
        );
    background-repeat: no-repeat;
    background-size: 100% 8px, 100% 4px;
    background-position: left top, left top;
}

.rule--flush {
    margin-block: var(--space-2xl);
}