/* ==========================================================================
   EZRRC pages: compositions that belong to one screen rather than to the kit.
   ========================================================================== */

/* ══ Home ════════════════════════════════════════════════════════════════ */

.hero {
    padding-block: var(--space-2xl) var(--space-xl);
}

.hero__heading {
    max-width: 20ch;
    font-size: var(--step-5);
    font-weight: var(--weight-bold);
    letter-spacing: -0.028em;
    line-height: 1.02;
}

.hero__subheading {
    max-width: 54ch;
    margin-block-start: var(--space-m);
    font-size: var(--step-1);
    line-height: var(--leading-normal);
    color: rgb(var(--color-muted));
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-block-start: var(--space-l);
}

.hero .stat-strip {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-l);
    border-block-start: 1px solid rgb(var(--color-line));
}

/* ── The decode figure ──────────────────────────────────────────────────────
   The signature element, and the site's whole argument in one block: the same
   record as RRC ships it, and the same record after the layout is applied.
   It is real content, not an illustration -- the byte spans quoted here are
   the ones the schema table shows on the Drilling Permits page.
   ────────────────────────────────────────────────────────────────────────── */

.decode {
    margin: var(--space-2xl) 0 0;
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.decode__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-m);
    background-color: rgb(var(--color-canvas-sunk));
    border-block-end: 1px solid rgb(var(--color-line));
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.decode__step {
    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-marker));
}

.decode__strip {
    position: relative;
    padding: var(--space-m) var(--space-m) var(--space-xs);
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.decode__bytes {
    display: block;
    width: max-content;
    min-width: 100%;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: rgb(var(--color-muted));
    white-space: pre;
}

.decode__bytes mark {
    padding-block: 0.15em;
    background-color: rgb(var(--color-marker-bright) / 0.25);
    color: rgb(var(--color-ink));
    box-shadow: inset 0 -1px 0 rgb(var(--color-marker-bright));
}

/* The ruler under the raw record: a tick every character cell, a numeral
   every ten, exactly like the column scale printed in an RRC manual. */
.decode__ruler {
    display: block;
    width: max-content;
    min-width: 100%;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    line-height: 1.4;
    color: rgb(var(--color-muted));
    white-space: pre;
    user-select: none;
}

.decode__divider {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-xs) var(--space-m);
    background-color: rgb(var(--color-canvas-sunk) / 0.5);
    border-block: 1px solid rgb(var(--color-line));
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-muted));
}

.decode__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-image: repeating-linear-gradient(
        to right,
        rgb(var(--color-faint) / 0.6) 0 3px,
        transparent 3px 7px
    );
}

.decode__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: rgb(var(--color-line));
}

.decode__field {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: var(--space-s) var(--space-m);
    background-color: rgb(var(--color-canvas));
}

.decode__name {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
}

.decode__value {
    font-family: var(--font-mono);
    font-size: var(--step-0);
    font-weight: var(--weight-medium);
    color: rgb(var(--color-ink));
    overflow-wrap: anywhere;
}

.decode__gloss {
    font-size: var(--step--2);
    color: rgb(var(--color-marker));
}

.decode__span {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
}

/* One orchestrated moment on the whole site: the decoded fields resolve in
   sequence, left to right, the way the layout is applied. Motion is opt-in --
   the rows are painted and readable before the animation is attached. */
@media (prefers-reduced-motion: no-preference) {
    .js .decode__field {
        opacity: 0;
        translate: 0 6px;
        animation: decode-resolve var(--speed-slow) var(--ease-out) forwards;
        animation-delay: calc(var(--decode-index, 0) * 90ms + 220ms);
    }

    /* The scan is a moving background rather than a moving element: a
       translated overlay would have to know the strip's width to leave at the
       right edge, and it does not. Animating background-position on a
       full-width layer sweeps the whole strip whatever its size, and
       `to { background-position: 200% }` parks it off the end. */
    .js .decode__strip::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(
            to right,
            rgb(var(--color-marker-bright) / 0) 0%,
            rgb(var(--color-marker-bright) / 0.22) 50%,
            rgb(var(--color-marker-bright) / 0) 100%
        );
        background-repeat: no-repeat;
        background-size: 40% 100%;
        background-position: -60% 0;
        /* No `forwards`: the layer reverts to opacity 0 when the sweep ends,
           which is the only way to leave no tint behind. A percentage
           background-position never travels far enough to clear the box. */
        opacity: 0;
        animation: decode-scan 950ms var(--ease-in-out) 1;
        pointer-events: none;
    }
}

@keyframes decode-resolve {
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes decode-scan {
    0% { background-position: -60% 0; opacity: 0; }
    12% { opacity: 1; }
    82% { opacity: 1; }
    100% { background-position: 160% 0; opacity: 0; }
}

/* ── Home sections ──────────────────────────────────────────────────────── */

.category-tile__count {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: rgb(var(--color-marker));
}

.category-grid__empty {
    padding: var(--space-l);
    color: rgb(var(--color-muted));
}

.freshness-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
    overflow: hidden;
}

.freshness-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-s);
    padding: var(--space-s) var(--space-m);
}

.freshness-list__item + .freshness-list__item {
    border-block-start: 1px solid rgb(var(--color-line));
}

.freshness-list__item > a {
    flex: 1 1 14rem;
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.freshness-list__item > a:hover {
    text-decoration: underline;
}

.freshness-list__size {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
    font-variant-numeric: tabular-nums;
}

/* The "why this is hard" list. Four numbered plates, because the four
   obstacles genuinely stack: encoding, then layout, then joins, then codes.
   The numeral is information, not decoration. */
/* Two columns, not auto-fit: there are exactly four obstacles and auto-fit
   leaves the fourth stranded on a row of its own at desktop widths. */
.explainer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l) var(--space-xl);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: obstacle;
}

@media (min-width: 48rem) {
    .explainer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.explainer__item {
    position: relative;
    padding-block-start: var(--space-m);
    border-block-start: 2px solid rgb(var(--color-marker-bright));
    counter-increment: obstacle;
}

.explainer__item::before {
    content: counter(obstacle, decimal-leading-zero);
    display: block;
    margin-block-end: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    color: rgb(var(--color-marker));
}

.explainer__title {
    margin-block-end: var(--space-xs);
    font-size: var(--step-2);
}

.explainer__body {
    font-size: var(--step--1);
    line-height: var(--leading-normal);
    color: rgb(var(--color-muted));
}

/* ══ Catalog index ═══════════════════════════════════════════════════════ */

.results-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s) var(--space-m);
    margin-block-end: var(--space-m);
    padding-block-end: var(--space-s);
    border-block-end: 1px solid rgb(var(--color-line));
}

.results-bar__count {
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

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

.results-bar__note {
    display: block;
    color: rgb(var(--color-caution));
}

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

.results-bar__sorts a {
    display: block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xs);
    color: rgb(var(--color-muted));
    text-decoration: none;
}

.results-bar__sorts a:hover {
    background-color: rgb(var(--color-canvas-sunk));
    color: rgb(var(--color-ink));
}

.results-bar__sorts .is-selected a {
    background-color: rgb(var(--color-accent-soft));
    color: rgb(var(--color-accent));
    font-weight: var(--weight-semibold);
}

.results-jump {
    font-size: var(--step--1);
}

@media (min-width: 64rem) {
    .results-jump {
        display: none;
    }
}

/* ── Facets ─────────────────────────────────────────────────────────────────
   A plain <form method="get"> with checkboxes and a submit button. Without
   JavaScript the reader ticks what they want and presses Apply; with it,
   site.js submits on change and hides the button. Either way one round trip
   can change several facets, which the link-per-option pattern cannot do.
   ────────────────────────────────────────────────────────────────────────── */

.facets {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.facets__search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.facets__label {
    flex: 1 1 100%;
}

.facets__input {
    flex: 1 1 8rem;
    width: auto;
}

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

.facet {
    border-block-start: 1px solid rgb(var(--color-line));
    padding-block-start: var(--space-m);
}

.facet__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-block-end: 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));
}

.facet__help {
    margin-block-end: var(--space-xs);
    font-size: var(--step--2);
    line-height: var(--leading-snug);
    color: rgb(var(--color-muted));
}

.facet__options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.facet__option {
    border-radius: var(--radius-xs);
}

.facet__option label,
.facet__option > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    padding: 0.2rem var(--space-2xs);
    border-radius: var(--radius-xs);
    font-size: var(--step--1);
    font-weight: var(--weight-regular);
    color: rgb(var(--color-text));
    text-decoration: none;
    cursor: pointer;
}

.facet__option label:hover,
.facet__option > a:hover {
    background-color: rgb(var(--color-canvas-sunk));
}

.facet__option--selected label,
.facet__option--selected > a {
    background-color: rgb(var(--color-accent-soft));
    color: rgb(var(--color-accent));
    font-weight: var(--weight-semibold);
}

.facet__option:has(:focus-visible) {
    box-shadow: var(--focus-ring);
}

.facet__option-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.facet__option-count {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
    font-variant-numeric: tabular-nums;
}

.facets__apply {
    margin-block-start: var(--space-xs);
}

.js .facets__apply {
    display: none;
}

.category-strip__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-strip__list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-3xs);
    padding: 0.2rem 0.6rem;
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-pill);
    background-color: rgb(var(--color-canvas));
    font-size: var(--step--1);
}

.category-strip__list a {
    text-decoration: none;
}

.category-strip__list li:hover {
    border-color: rgb(var(--color-accent-line));
}

/* ══ Code reference ══════════════════════════════════════════════════════ */

.code-set-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-m);
}

.code-set-list__item {
    padding: var(--space-m);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
}

.code-set-list__title {
    font-size: var(--step-2);
}

.code-set-list__title a {
    color: rgb(var(--color-ink));
    text-decoration: none;
}

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

.code-set-list__key {
    margin-block: var(--space-3xs) var(--space-xs);
    font-size: var(--step--1);
}

.code-set-list__description {
    max-width: var(--measure);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.code-set-list__facts {
    margin-block-start: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
}

.code-set-list__samples {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-s);
    list-style: none;
    margin-block-start: var(--space-s);
    padding-block-start: var(--space-s);
    border-block-start: 1px dotted rgb(var(--color-line-strong));
    font-size: var(--step--1);
}

.code-set-list__samples li {
    display: flex;
    align-items: baseline;
    gap: var(--space-3xs);
    color: rgb(var(--color-muted));
}

.code-set-list__more a {
    font-weight: var(--weight-semibold);
}

.code-set,
.schema {
    margin-block-start: var(--space-l);
}

.code-set__heading,
.schema__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-s);
    margin-block-end: var(--space-xs);
    font-size: var(--step-1);
}

.code-set__count {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: var(--weight-regular);
    color: rgb(var(--color-muted));
}

.code-set__columns,
.code-set__description,
.code-set__source,
.code-set__more {
    margin-block-end: var(--space-xs);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.code-set__source {
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
}

/* ══ Dataset page ════════════════════════════════════════════════════════ */

.download {
    padding: var(--space-l);
    border: 1px solid rgb(var(--color-accent-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-accent-soft) / 0.45);
}

.download__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-s);
}

.download__label {
    flex: 1 1 100%;
    margin: 0;
}

.download__select {
    flex: 1 1 14rem;
    width: auto;
    background-color: rgb(var(--color-canvas));
}

.download__note {
    max-width: var(--measure);
    margin-block-start: var(--space-m);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.download__preview {
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid rgb(var(--color-accent-line) / 0.5);
}

/* Relationship panels: the site's most specialised knowledge, so they read
   as evidence -- a sentence, then the join expression that proves it. */
.join {
    margin-block-start: var(--space-m);
    padding: var(--space-m);
    border: 1px solid rgb(var(--color-line));
    border-inline-start: 3px solid rgb(var(--color-marker-bright));
    border-radius: var(--radius-sm);
    background-color: rgb(var(--color-canvas));
}

.join--in {
    border-inline-start-color: rgb(var(--color-accent-line));
}

.join__sentence {
    font-size: var(--step-0);
    line-height: var(--leading-normal);
}

.join__dataset {
    font-weight: var(--weight-semibold);
}

.join__columns {
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: rgb(var(--color-marker));
}

.join__label,
.join__description {
    margin-block-start: var(--space-2xs);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.join__expression {
    display: block;
    margin-block-start: var(--space-s);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-xs);
    background-color: rgb(var(--color-canvas-sunk));
    font-size: var(--step--2);
    overflow-x: auto;
    white-space: pre;
}

.provenance__facts dd code {
    overflow-wrap: anywhere;
}

.related__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
}

/* ══ Preview page ════════════════════════════════════════════════════════ */

.profile {
    gap: var(--space-2xs);
    font-size: var(--step--1);
}

.profile__name {
    font-size: var(--step-0);
}

.profile__type {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: rgb(var(--color-marker));
}

.profile__stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--space-s);
    margin: 0;
    font-size: var(--step--2);
}

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

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

.profile__values {
    list-style: none;
    margin: 0;
    padding-block-start: var(--space-xs);
    border-block-start: 1px dotted rgb(var(--color-line-strong));
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: var(--step--2);
}

.profile__values li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs);
    min-width: 0;
}

.profile__values code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile__count {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    color: rgb(var(--color-muted));
    font-variant-numeric: tabular-nums;
}

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

/* ══ Funnel: cart ════════════════════════════════════════════════════════ */

.cart-head,
.options-head,
.checkout h1,
.ready h1,
.order-progress h1,
.order-list h1,
.verify h1 {
    margin-block-end: var(--space-m);
}

.cart-lede,
.options-lede,
.checkout-lede,
.ready-lede,
.order-lede,
.verify-lede,
.suggestions-lede,
.while-you-wait-lede,
.snippet-lede {
    max-width: var(--measure);
    color: rgb(var(--color-muted));
}

.cart-list {
    list-style: none;
    margin: var(--space-l) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    counter-reset: cart-line;
}

.cart-line {
    display: grid;
    gap: var(--space-m);
    padding: var(--space-m);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
}

@media (min-width: 46rem) {
    .cart-line {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }
}

.cart-line-title {
    font-size: var(--step-1);
}

.cart-line-title a {
    color: rgb(var(--color-ink));
    text-decoration: none;
}

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

.cart-line-meta {
    margin-block-start: var(--space-3xs);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.cart-line-filters,
.cart-line-options,
.ready-file-filters {
    list-style: none;
    margin: var(--space-s) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-xs);
    font-size: var(--step--1);
}

.cart-line-filters li,
.cart-line-options li,
.ready-file-filters li {
    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));
}

.cart-line-filters-empty {
    margin-block-start: var(--space-s);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
    font-style: italic;
}

.cart-line-estimate {
    margin-block-start: var(--space-s);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: rgb(var(--color-ink));
    font-variant-numeric: tabular-nums;
}

.cart-line-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

@media (min-width: 46rem) {
    .cart-line-actions {
        align-items: flex-end;
    }
}

.cart-ad {
    list-style: none;
}

.cart-actions,
.options-footer,
.checkout-form,
.ready-links,
.order-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
    margin-block-start: var(--space-l);
}

/* Suggestions are the cart step's reason to exist: they come from real
   catalog relationships, so they are presented as findings, not upsells. */
.suggestions {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-l);
    border-block-start: 1px solid rgb(var(--color-line));
}

.suggestion-list {
    list-style: none;
    margin: var(--space-m) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.suggestion {
    display: grid;
    gap: var(--space-s);
    padding: var(--space-m);
    border: 1px solid rgb(var(--color-line));
    border-inline-start: 3px solid rgb(var(--color-marker-bright));
    border-radius: var(--radius-sm);
    background-color: rgb(var(--color-canvas));
}

@media (min-width: 46rem) {
    .suggestion {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

.suggestion h3 {
    font-size: var(--step-1);
}

.suggestion h3 a {
    color: rgb(var(--color-ink));
    text-decoration: none;
}

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

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

.suggestion-join {
    margin-block-start: var(--space-xs);
    overflow-x: auto;
}

.suggestion-join code {
    white-space: pre;
}

.suggestion-detail,
.suggestion-cardinality {
    margin-block-start: var(--space-3xs);
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
}

/* ══ Funnel: options ═════════════════════════════════════════════════════ */

.option-card {
    margin-block-start: var(--space-l);
    padding: var(--space-l);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
}

.option-card-head {
    margin-block-end: var(--space-m);
    padding-block-end: var(--space-s);
    border-block-end: 1px solid rgb(var(--color-line));
}

.option-card-head h2 {
    font-size: var(--step-2);
}

.option-card-head h2 a {
    color: rgb(var(--color-ink));
    text-decoration: none;
}

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

.estimate {
    margin-block-start: var(--space-l);
    padding: var(--space-m);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-sm);
    background-color: rgb(var(--color-canvas-sunk) / 0.6);
}

.estimate h3 {
    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));
}

.estimate-figure {
    margin-block: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: var(--weight-semibold);
    color: rgb(var(--color-ink));
    font-variant-numeric: tabular-nums;
}

.estimate-note {
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
    min-height: 1.4em;
}

.estimate[data-busy] .estimate-figure {
    opacity: 0.5;
}

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

.options-ad {
    margin-block-start: var(--space-l);
}

/* ══ Funnel: checkout and verify ═════════════════════════════════════════ */

.checkout-table {
    margin-block-start: var(--space-l);
}

.checkout-table tfoot th,
.checkout-table tfoot td {
    border-block-start: 2px solid rgb(var(--color-line-strong));
    border-block-end: 0;
    font-weight: var(--weight-semibold);
    color: rgb(var(--color-ink));
}

.checkout-note {
    max-width: var(--measure);
    margin-block-start: var(--space-l);
    padding-inline-start: var(--space-m);
    border-inline-start: 2px solid rgb(var(--color-marker-bright));
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.verify-why,
.verify-help {
    max-width: var(--measure);
    margin-block-start: var(--space-m);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.verify-cart {
    margin-block-start: 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));
}

.verify-cart h2 {
    margin-block-end: var(--space-xs);
    font-size: var(--step-1);
}

.verify-cart ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--step--1);
}

.verify-form {
    margin-block-start: var(--space-l);
}

/* ══ Orders ══════════════════════════════════════════════════════════════ */

.order-progress .progress-rail {
    height: 0.5rem;
    margin-block: var(--space-l) var(--space-xs);
    border: 1px solid rgb(var(--color-line-strong));
    border-radius: var(--radius-pill);
    background-color: rgb(var(--color-canvas-sunk));
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: rgb(var(--color-accent));
    transition: width var(--speed-slow) var(--ease-out);
}

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

.order-items {
    list-style: none;
    margin: var(--space-l) 0 0;
    padding: 0;
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
    overflow: hidden;
}

.order-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-3xs) var(--space-s);
    padding: var(--space-s) var(--space-m);
}

.order-item + .order-item {
    border-block-start: 1px solid rgb(var(--color-line));
}

.order-item-title {
    font-weight: var(--weight-semibold);
    color: rgb(var(--color-ink));
}

.order-item-format {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
}

.order-item-status {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-muted));
}

.order-item[data-state="ready"] .order-item-status {
    color: rgb(var(--color-fresh));
}

.order-item[data-state="failed"] .order-item-status {
    color: rgb(var(--color-danger));
}

.order-item[data-state="building"] .order-item-status {
    color: rgb(var(--color-accent));
}

.order-item-error {
    grid-column: 1 / -1;
    font-size: var(--step--1);
    color: rgb(var(--color-danger));
}

.while-you-wait {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-l);
    border-block-start: 1px solid rgb(var(--color-line));
}

.article-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-m);
    list-style: none;
    margin: var(--space-m) 0 0;
    padding: 0;
}

.article-card p {
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

/* ── Ready ──────────────────────────────────────────────────────────────── */

.ready-file {
    margin-block-start: var(--space-l);
    padding: var(--space-l);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
}

.ready-file-head h2 {
    font-size: var(--step-2);
}

.ready-file-head h2 a {
    color: rgb(var(--color-ink));
    text-decoration: none;
}

.ready-file-meta {
    margin-block-start: var(--space-3xs);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.ready-file-download {
    margin-block-start: var(--space-m);
}

.ready-file-checksum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
    margin-block-start: var(--space-s);
    font-size: var(--step--2);
}

.ready-file-checksum .label {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-muted));
}

.ready-file-checksum code {
    overflow-wrap: anywhere;
}

.ready-file-failed {
    margin-block-start: var(--space-m);
    padding: var(--space-s) var(--space-m);
    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);
}

.ready-file-pending {
    margin-block-start: var(--space-m);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

/* Rows dropped for want of a coordinate. Never quiet: a partial answer shown
   as a complete one is the failure this site exists to remove. */
.ready-file-skipped {
    margin-block-start: var(--space-m);
    padding: var(--space-s) var(--space-m);
    border-inline-start: 3px solid rgb(var(--color-caution));
    border-radius: var(--radius-xs);
    background-color: rgb(var(--color-caution-soft));
    color: rgb(var(--color-caution));
    font-size: var(--step--1);
}

.ready-file-snippets {
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid rgb(var(--color-line));
}

.ready-file-snippets > summary {
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    color: rgb(var(--color-accent));
    cursor: pointer;
}

.snippet {
    margin-block-start: var(--space-m);
}

.snippet h3 {
    margin-block-end: 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));
}

.snippet-help {
    margin-block-start: var(--space-m);
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.ready-ad {
    margin-block-start: var(--space-l);
}

/* ══ Account ═════════════════════════════════════════════════════════════ */

.account-section {
    margin-block-start: var(--space-l);
}

.account-section > h2 {
    margin-block-end: var(--space-m);
    font-size: var(--step-2);
}

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

.account-section--danger {
    border-color: rgb(var(--color-danger) / 0.35);
    background-color: rgb(var(--color-danger-soft) / 0.4);
}

.key-reveal {
    margin-block-start: var(--space-s);
    background-color: rgb(var(--color-canvas));
    border-color: rgb(var(--color-marker) / 0.4);
    font-size: var(--step-0);
    word-break: break-all;
    white-space: pre-wrap;
}

.key-reveal code {
    white-space: pre-wrap;
    word-break: break-all;
}

/* ══ Learn ═══════════════════════════════════════════════════════════════ */

.learn-hero {
    margin-block-end: var(--space-2xl);
}

.learn-hero__lede {
    max-width: var(--measure);
    margin-block-start: var(--space-m);
    font-size: var(--step-1);
    color: rgb(var(--color-muted));
}

.learn-hero__meta {
    margin-block-start: 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-marker));
}

.learn-hero__cta {
    margin-block-start: var(--space-l);
}

.learn-group + .learn-group {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-l);
    border-block-start: 1px solid rgb(var(--color-line));
}

.learn-group__title {
    font-size: var(--step-3);
}

.learn-group__blurb {
    max-width: var(--measure);
    margin-block-start: var(--space-xs);
    color: rgb(var(--color-muted));
}

.learn-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--space-m);
    list-style: none;
    margin-block-start: var(--space-m);
    padding: 0;
}

.learn-card {
    height: 100%;
}

.learn-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    margin-block-start: auto;
    padding-block-start: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
}

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

.learn-card__datasets {
    list-style: none;
    margin: 0;
    padding-block-start: var(--space-xs);
    border-block-start: 1px dotted rgb(var(--color-line-strong));
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-s);
    font-size: var(--step--2);
}

.learn-toc,
.learn-path {
    font-size: var(--step--1);
}

.learn-toc__title,
.learn-path__title,
.learn-article__toc-title {
    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));
}

.learn-toc ul,
.learn-path__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.learn-path__item {
    padding-inline-start: var(--space-s);
    border-inline-start: 2px solid rgb(var(--color-line));
}

.learn-path__item.is-current {
    border-inline-start-color: rgb(var(--color-marker-bright));
    color: rgb(var(--color-ink));
    font-weight: var(--weight-semibold);
}

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

.learn-article__kicker {
    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-marker));
}

.learn-article__header h1 {
    margin-block: var(--space-2xs) var(--space-s);
}

.learn-article__summary {
    max-width: var(--measure);
    font-size: var(--step-1);
    color: rgb(var(--color-muted));
}

.learn-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid rgb(var(--color-line));
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: rgb(var(--color-muted));
}

.learn-article__toc {
    font-size: var(--step--1);
}

.learn-article__toc ul {
    list-style: none;
    margin: 0;
    padding-inline-start: var(--space-s);
    border-inline-start: 1px solid rgb(var(--color-line));
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.learn-article__toc ul ul {
    margin-block-start: var(--space-3xs);
    padding-inline-start: var(--space-s);
    border: 0;
}

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

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

.learn-article__toc--inline {
    margin-block-end: var(--space-xl);
    padding: var(--space-m);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    background-color: rgb(var(--color-canvas));
}

/* The rail already carries the contents, so on wide screens the inline copy
   is redundant chrome above the article. */
@media (min-width: 64rem) {
    .learn-article__toc--inline {
        display: none;
    }
}

.learn-related {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-l);
    border-block-start: 1px solid rgb(var(--color-line));
}

.learn-related__blurb {
    margin-block: var(--space-xs) var(--space-m);
    color: rgb(var(--color-muted));
}

.learn-related__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3xs) var(--space-s);
    padding-block: var(--space-xs);
    border-block-end: 1px solid rgb(var(--color-line));
}

.learn-related__link {
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.learn-related__blurb-text {
    flex: 1 1 14rem;
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.learn-related__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
}

.learn-pager {
    display: grid;
    gap: var(--space-m);
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-l);
    border-block-start: 1px solid rgb(var(--color-line));
}

@media (min-width: 46rem) {
    .learn-pager {
        grid-template-columns: 1fr 1fr;
    }
}

.learn-pager__prev,
.learn-pager__next {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-m);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--speed-fast) var(--ease-out);
}

.learn-pager__prev:hover,
.learn-pager__next:hover {
    border-color: rgb(var(--color-accent-line));
}

.learn-pager__next {
    grid-column: -2;
    text-align: end;
}

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

.learn-pager__title {
    font-weight: var(--weight-semibold);
    color: rgb(var(--color-ink));
}

/* ══ Sign in, sign up, password reset ════════════════════════════════════ */

/* The card is the main column itself, not a wrapper inside it. allauth pages
   redefine `content` wholesale, so any wrapper element declared in the layout
   would be thrown away; a body class survives that. */
.auth-page .layout__main {
    padding: var(--space-xl);
    border: 1px solid rgb(var(--color-line));
    border-radius: var(--radius-lg);
    background-color: rgb(var(--color-canvas));
    box-shadow: var(--shadow-2);
}

/* Two shapes have to work: allauth's own pages drop their content straight
   into the main column, and the pages restated in templates/account wrap it in
   a `.auth` div. `.auth` itself gets no box of its own -- that would card a
   card -- only the same vertical rhythm. */
.auth-page .layout__main > * + *,
.auth-page .auth > * + * {
    margin-block-start: var(--space-m);
}

.auth-page h1 {
    font-size: var(--step-3);
}

.auth-page .layout__main > p,
.auth-page .auth > p {
    color: rgb(var(--color-muted));
    font-size: var(--step--1);
}

.auth-page form {
    margin-block-start: var(--space-l);
}

.auth-page .button,
.auth-page button[type="submit"] {
    width: 100%;
    padding-block: 0.6rem;
    font-size: var(--step-0);
}

.auth__intro {
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
}

.auth__alt {
    padding-block-start: var(--space-m);
    border-block-start: 1px solid rgb(var(--color-line));
    font-size: var(--step--1);
    color: rgb(var(--color-muted));
    text-align: center;
}

/* A footnote to the form: true, worth knowing, and not the reason the reader
   came to the page. */
.auth__aside {
    font-size: var(--step--2);
    line-height: var(--leading-snug);
    color: rgb(var(--color-muted));
}

/* The one place on the site that asks for something in return. Saying why,
   in the same breath, is the difference between a gate and a reason. */
.auth__why {
    padding: 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);
    color: rgb(var(--color-muted));
}

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

/* allauth's own element templates emit bare <ul>, <hr> and <button>. */
.auth-page .layout__main > ul,
.auth-page .auth > ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--step--1);
}

.auth-page hr {
    margin-block: var(--space-l);
}

.auth-page .button-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* ══ Errors ══════════════════════════════════════════════════════════════ */

.error-page {
    padding-block: var(--space-3xl);
    text-align: center;
}

.error-page__code {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--color-marker));
}

.error-page h1 {
    margin-block: var(--space-s) var(--space-m);
    font-size: var(--step-4);
}

.error-page p {
    max-width: 44ch;
    margin-inline: auto;
    color: rgb(var(--color-muted));
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-s);
    margin-block-start: var(--space-xl);
}

/* A contour of the error code, drawn once and quietly: the page is a dead
   end, not a place to be entertained. */
.error-page__rule {
    max-width: 22rem;
    margin: var(--space-xl) auto 0;
}