/* marketing-article.css - glossary articles (/co-je-*) */

:root {
    --mono: 'Spline Sans Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    /* Neutral tinted toward the brand hue, for the alternating field bands in the record specimen. */
    --band: oklch(95.5% 0.012 263);
    --article-measure: 660px;
    --article-rail: 216px;
    /* Sticky navbar is 70px; anchors must clear it. Also read by marketing-article-toc.js. */
    --anchor-offset: 94px;
}

.article-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    padding-inline: 20px;
}

.article {
    --bleed: 0px;
    max-width: var(--article-measure);
    min-width: 0;
    margin-inline: auto;
    padding: var(--space-3xl) 0 var(--space-5xl);
}

/* Figures and tables read better wider than the text measure. */
.article-wide {
    margin-inline: calc(var(--bleed) * -1);
}

.article-breadcrumb {
    font-size: 13px;
    color: var(--ink-muted);
    margin-bottom: var(--space-2xl);
}

.article-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Alt-text syntax keeps the separator out of the screen-reader announcement where supported. */
.article-breadcrumb li + li::before {
    content: "/" / "";
    color: var(--ink-faint);
    margin-right: var(--space-sm);
}

.article-breadcrumb a {
    color: var(--ink-muted);
    text-decoration: none;
}

.article-breadcrumb a:hover {
    color: var(--brand);
}

.article h1 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: var(--space-xl);
}

.article h2 {
    font-size: 27px;
    margin-bottom: var(--space-lg);
}

/* Hairline + generous lead-in makes the section boundary scannable without adding chrome.
   Shorthand padding, not padding-top: marketing.css puts 96px on every bare `section`. */
.article-section {
    margin-top: var(--space-4xl);
    padding: var(--space-2xl) 0 0;
    border-top: 1px solid var(--line);
}

.article h2,
.article h3 {
    scroll-margin-top: var(--anchor-offset);
}

.article h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.article p {
    color: var(--ink-body);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.article-lede {
    font-size: 19px;
    line-height: 1.65;
    color: var(--ink-section);
}

.article a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article a:hover {
    color: var(--brand-hover);
}

.article strong {
    color: var(--ink-strong);
    font-weight: 600;
}

.article code {
    font-family: var(--mono);
    font-size: 0.88em;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--ink-strongest);
    white-space: nowrap;
}

/* marketing.css resets padding on every element, so markers need the indent back. */
.article ul {
    list-style: disc;
    padding-left: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.article li {
    color: var(--ink-body);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

.article li::marker {
    color: var(--ink-faint);
}

/* ---- Table of contents rail (desktop only; the article is short enough to scroll on phones) ---- */

.article-toc {
    display: none;
}

.article-toc-inner {
    position: sticky;
    top: var(--anchor-offset);
    padding-top: calc(var(--space-3xl) + 4px);
}

.article-toc-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--space-md);
}

.article-toc ol {
    list-style: none;
    display: grid;
    gap: 2px;
}

.article-toc a {
    display: block;
    padding: 5px var(--space-md);
    margin-left: -1px;
    border-left: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.45;
    text-decoration: none;
    transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.article-toc a:hover {
    color: var(--ink-strong);
    border-left-color: var(--ink-faint);
}

.article-toc a[aria-current="true"] {
    color: var(--brand);
    border-left-color: var(--brand);
    font-weight: 500;
}

/* ---- Definition lists: record types, banks ---- */

.article-defs {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--space-xl);
    margin-bottom: var(--space-xl);
    border-top: 1px solid var(--line-soft);
}

.article-defs dt {
    grid-column: 1;
    padding: var(--space-md) 0;
    color: var(--ink-strongest);
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--line-soft);
}

.article-defs dd {
    grid-column: 2;
    padding: var(--space-md) 0;
    color: var(--ink-body);
    font-size: 16px;
    line-height: 1.6;
    border-bottom: 1px solid var(--line-soft);
}

/* Mono sits on a shorter line box than the sans description; nudge it onto the same optical line. */
.article-defs--code dt {
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.02em;
    padding-top: calc(var(--space-md) + 2px);
}

/* ---- Aside: the one callout on the page ---- */

.article-note {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.article-note-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--space-sm);
}

.article-note p:last-child {
    margin-bottom: 0;
}

/* ---- Record specimen: one real 128-byte GPC line, field by field ---- */

.article-figure {
    margin-bottom: var(--space-2xl);
}

.article-figure figcaption {
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.5;
    margin-top: var(--space-md);
}

.record {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow-x: auto;
    /* Inline padding lives on the line, not here - a scroll container drops its trailing padding. */
    padding-block: var(--space-xl) var(--space-lg);
}

.record:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.record-line {
    display: flex;
    width: max-content;
    min-width: 100%;
    padding-inline: var(--space-lg);
    font-family: var(--mono);
}

.record-field {
    display: flex;
    flex-direction: column;
}

.record-bytes {
    white-space: pre;
    padding: var(--space-sm) 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-strongest);
}

.record-field:nth-child(even) .record-bytes {
    background: var(--band);
}

/* Field width comes from the bytes; a tag wider than its field would desync the line, so tags
   stay two digits at 11px - narrower than the shortest single-byte field at 14px mono. */
.record-tag {
    border-top: 1px solid var(--line);
    padding-top: 4px;
    font-size: 11px;
    line-height: 1;
    color: var(--ink-muted);
    text-align: center;
}

/* Multi-column, not grid: fields must read 1-7 down the left column, then 8-14 down the right. */
.record-map {
    list-style: none;
    counter-reset: field;
    columns: 300px 2;
    column-gap: var(--space-2xl);
    margin-top: var(--space-xl);
}

.record-map li {
    counter-increment: field;
    break-inside: avoid;
    display: grid;
    grid-template-columns: 20px 62px minmax(0, 1fr);
    gap: var(--space-md);
    align-items: baseline;
    padding: var(--space-sm) 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-body);
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0;
}

.record-map li::before {
    content: counter(field);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-muted);
    text-align: right;
}

.record-range {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-section);
    white-space: nowrap;
}

/* ---- Comparison table ---- */

.article-table-wrap {
    overflow-x: auto;
    margin-bottom: var(--space-xl);
}

.article-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font-size: 15px;
}

.article-table th,
.article-table td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line-soft);
}

.article-table thead th {
    color: var(--ink-section);
    font-weight: 600;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
}

.article-table tbody th {
    color: var(--ink-strong);
    font-weight: 600;
    white-space: nowrap;
}

.article-table tbody td {
    color: var(--ink-body);
}

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

/* ---- FAQ ---- */

.article-faq h3 {
    color: var(--ink-strong);
    font-size: 17px;
    margin-top: var(--space-2xl);
}

.article-faq h3:first-of-type {
    margin-top: var(--space-xl);
}

.article-faq p {
    font-size: 16px;
    margin-bottom: 0;
}

@media (min-width: 900px) {
    .article {
        --bleed: 40px;
    }
}

@media (min-width: 1180px) {
    .article-shell {
        grid-template-columns: var(--article-rail) minmax(0, var(--article-measure));
        column-gap: 72px;
    }

    .article-toc {
        display: block;
    }
}

@media (max-width: 768px) {
    .article {
        padding-block: var(--space-2xl) var(--space-4xl);
    }

    .article p,
    .article li {
        font-size: 16px;
    }

    .article-lede {
        font-size: 18px;
    }

    .article h2 {
        font-size: 23px;
    }

    .article-section {
        margin-top: var(--space-3xl);
        padding-top: var(--space-xl);
    }

    /* Stacked term/description reads better than a squeezed two-column grid. */
    .article-defs {
        grid-template-columns: minmax(0, 1fr);
    }

    .article-defs dt {
        grid-column: 1;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .article-defs dd {
        grid-column: 1;
        padding-top: 2px;
    }

    .record {
        padding-block: var(--space-lg) var(--space-md);
        border-radius: 0;
        border-inline: 0;
        margin-inline: -20px;
    }

    .record-line {
        padding-inline: 20px;
    }

    .record-map li {
        grid-template-columns: 18px 58px minmax(0, 1fr);
        gap: var(--space-sm);
        font-size: 14px;
    }
}

@media print {
    .navbar,
    .skip-link,
    .article-toc,
    .footer-cta,
    .footer-bottom {
        display: none;
    }

    .article {
        max-width: none;
        padding: 0;
    }

    .record {
        overflow-x: visible;
    }

    /* Shrink rather than wrap - a wrapped record reads as several lines, which it is not. */
    .record-bytes {
        font-size: 8.5px;
    }
}