/* Reading pages (package H): research papers, the InfraGlyph whitepaper, the papers hub, privacy and terms,
   the roadmap, insights, case studies, posts and the AZ UI Kit component docs.
   Type roles, labels, surfaces, statuses, tags, buttons, the section pill and code windows come from
   system.css (package A); motion and the section-pill behaviour from effects.css / effects.js (package B).
   This file lays reading pages out and gives their components surface values. It loads before system.css
   (extra_css), so it never sets font size, weight or tracking on headings. */

/* ==========================================================================
   Document hero: the paper facts as a ruled definition list
   ========================================================================== */
main .paper-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 64rem;
    margin: 2.5rem 0 0;
    border-top: 1px solid var(--line-2);
}
main .paper-meta > div { padding: 1rem 0; border-bottom: 1px solid var(--line-1); }
main .paper-meta dt { margin: 0 0 0.375rem; font: 400 var(--fs-meta)/1.4 var(--font-sans); color: var(--ink-4); }
main .paper-meta dd { margin: 0; font: 400 var(--fs-small)/1.6 var(--font-sans); color: var(--ink-2); max-width: 40rem; }
main .paper-meta dd .meta { color: var(--ink-2); }
@media (min-width: 768px) {
    main .paper-meta { grid-template-columns: fit-content(17rem) minmax(0, 1fr) minmax(0, 1fr); }
    main .paper-meta > div { padding: 1.25rem 1.5rem 0.25rem; border-bottom: 0; border-left: 1px solid var(--line-1); }
    main .paper-meta > div:first-child { min-width: 7rem; padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   Reading layout: a sticky contents column and an unboxed 68ch article
   ========================================================================== */
main .reading-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: var(--container);
    margin-inline: auto;
}
main .reading-aside { display: none; }
main .reading-aside-block + .reading-aside-block { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-1); }
main .reading-aside-label { margin: 0 0 0.75rem; font: 500 var(--fs-meta)/1.4 var(--font-sans); color: var(--ink-4); }
main .reading-aside-block > .text-link { display: flex; width: fit-content; min-height: 2.75rem; }
@media (min-width: 1024px) {
    main .reading-layout {
        grid-template-columns: 14rem minmax(0, 42rem);
        column-gap: 4rem;
        justify-content: start;
    }
    main .reading-aside,
    main .reading-layout > .reading-after {
        position: sticky;
        top: calc(var(--anchor-offset) + 1rem);
        align-self: start;
        max-height: calc(100svh - 8rem);
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
        /* room for focus outlines inside the scroller */
        margin: -0.25rem;
        padding: 0.25rem;
    }
    main .reading-aside { display: block; grid-column: 1; grid-row: 1; }
    main .reading-layout > :is(.paper-prose, .reading-main) { grid-column: 2; grid-row: 1; }
    main .reading-layout > :is(.reading-toc-mobile, .reading-after) { display: none; }
}
/* From 1280px keywords and related links move to a third column, so the contents list fits the viewport. */
@media (min-width: 1280px) {
    main .reading-layout { grid-template-columns: 13rem minmax(0, 42rem) 13rem; column-gap: 3.5rem; }
    main .reading-aside .reading-aside-extra { display: none; }
    main .reading-layout > .reading-after { display: block; grid-column: 3; grid-row: 1; border-top: 0; }
}

/* Contents list (data-section-nav="toc"): effects.js marks the current entry with aria-current. */
main .reading-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line-2); }
main .reading-toc a {
    display: grid;
    grid-template-columns: 1.625rem minmax(0, 1fr);
    align-items: baseline;
    margin-left: -1px;
    padding: 0.4375rem 0.5rem 0.4375rem 0.875rem;
    border-left: 2px solid transparent;
    font: 400 var(--fs-ui)/1.4 var(--font-sans);
    letter-spacing: var(--tr-ui);
    color: var(--ink-3);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
main .reading-toc a > :last-child { grid-column: 2; }
/* A list without numbered entries (component docs) needs no index column. */
main .reading-toc:not(:has(.index)) a { grid-template-columns: minmax(0, 1fr); }
main .reading-toc:not(:has(.index)) a > :last-child { grid-column: 1; }
main .reading-toc a .index { color: var(--ink-4); transition: color var(--dur-fast) var(--ease-standard); }
main .reading-toc a:hover { color: var(--ink-1); }
main .reading-toc a[aria-current="true"] { color: var(--ink-1); border-left-color: var(--accent); }
main .reading-toc a[aria-current="true"] .index { color: var(--accent); }
main .reading-toc a:focus-visible { outline-offset: -2px; }

/* Below 1024px the contents list folds into a disclosure above the article. */
main .reading-toc-mobile {
    border: 1px solid var(--line-2);
    border-top-color: var(--line-3);
    border-radius: var(--radius-md);
    background: var(--surface-1);
}
main .reading-toc-mobile > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    padding: 0 1rem;
    list-style: none;
    cursor: pointer;
    font: 500 var(--fs-ui)/1.4 var(--font-sans);
    color: var(--ink-1);
    border-radius: inherit;
}
main .reading-toc-mobile > summary::-webkit-details-marker { display: none; }
main .reading-toc-mobile > summary::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.25rem;
    border-right: 1.5px solid var(--ink-3);
    border-bottom: 1.5px solid var(--ink-3);
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-standard);
}
main .reading-toc-mobile[open] > summary::after { transform: translateY(0.25rem) rotate(-135deg); }
main .reading-toc-mobile[open] > summary { border-bottom: 1px solid var(--line-1); border-radius: var(--radius-md) var(--radius-md) 0 0; }
main .reading-toc-mobile .reading-toc { padding: 0.5rem 1rem 0.75rem; }
main .reading-toc-mobile .reading-toc a { min-height: 2.75rem; align-content: center; }

/* Keywords and related links follow the article below 1024px. */
main .reading-after { padding-top: 2rem; border-top: 1px solid var(--line-2); }

/* ==========================================================================
   Paper prose: unboxed, 17px / 1.75. Text keeps a 35rem measure (about 67 characters a line, at most 75);
   evidence tables and code windows may use the full 42rem column.
   ========================================================================== */
main .paper-prose { --paper-measure: min(var(--measure), 35rem); }
main article.paper-prose { min-width: 0; overflow-wrap: break-word; }
main .paper-prose p {
    margin: 0 0 1.25em;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ink-prose);
    max-width: var(--paper-measure);
}
main .paper-prose p:last-child { margin-bottom: 0; }
main .paper-prose strong { color: var(--ink-1); font-weight: 600; }
main .paper-prose a:not([class]) { color: var(--ink-1); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 0.2em; }
main .paper-prose a:not([class]):hover { text-decoration-color: var(--accent); }

main .paper-prose { --paper-gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
/* The section box starts at its heading, so a contents link lands the heading 16-40px under the nav. */
main .paper-section { position: relative; scroll-margin-top: 1rem; }
main .paper-section + .paper-section { margin-top: calc(2 * var(--paper-gap)); }
/* The chapter rule spans the text measure, not the wide-block column, and sits outside the section box. */
main .paper-section + .paper-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(-1 * var(--paper-gap));
    width: 100%;
    max-width: var(--paper-measure);
    border-top: 1px solid var(--line-1);
    pointer-events: none;
}
main .paper-section > h2 { display: flex; align-items: baseline; gap: 0.875rem; max-width: var(--paper-measure); margin: 0 0 1.25rem; }
main .paper-section > h2 > .index { flex: none; min-width: 1.25rem; }
main .paper-section > h3 { margin: 2rem 0 0.625rem; }
/* A section reached through its link carries a static accent rule (no motion). */
main .paper-section:target > h2 { box-shadow: inset 2px 0 var(--accent); padding-left: 0.75rem; }

/* Bullets: a 6px accent dot. */
main .paper-list {
    display: grid;
    gap: 0.75rem;
    max-width: var(--paper-measure);
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}
main .paper-prose p + .paper-list { margin-top: -0.25rem; }
main .paper-list:last-child { margin-bottom: 0; }
main .paper-list > li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-prose);
}
main .paper-list > li::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: calc(0.85em - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
/* References: quieter, neutral markers. */
main .paper-list--sources > li { font-size: var(--fs-small); line-height: 1.65; color: var(--ink-3); }
main .paper-list--sources > li::before { background: var(--ink-decor); }

/* Code inside prose (InfraGlyph): A's inline code look; windows sit in the column. */
main .paper-prose .code-window { margin: 0 0 1.5rem; }
main .paper-prose .code-window-code { font-size: var(--fs-code); }

/* ==========================================================================
   Evidence tables: numbers never break; the table scrolls inside its region
   ========================================================================== */
main .paper-table { margin: 2rem 0 0; }
main .paper-table + .paper-table { margin-top: 2.5rem; }
main .paper-table > figcaption { margin-top: 0.75rem; max-width: var(--paper-measure); }
main .data-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    border: 1px solid var(--line-2);
    border-top-color: var(--line-3);
    border-radius: var(--radius-md);
    background: var(--surface-1);
}
main .data-table-wrap:focus-visible { outline-offset: 2px; }
main .data-table {
    min-width: 34rem;
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
main .data-table th {
    padding: 0.75rem 1rem;
    font: 500 0.75rem/1.4 var(--font-mono);
    letter-spacing: var(--tr-mono);
    text-transform: none;
    text-align: left;
    vertical-align: bottom;
    color: var(--ink-3);
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--line-2);
}
main .data-table td {
    padding: 0.75rem 1rem;
    font: 400 0.875rem/1.5 var(--font-sans);
    color: var(--ink-2);
    vertical-align: top;
    border-bottom: 1px solid var(--line-2);
}
main .data-table tbody tr:last-child > td { border-bottom: 0; }
main .data-table :is(th, td),
main .paper-prose :is(table, th, td) { overflow-wrap: normal; word-break: normal; }
main .data-table :is(th, td):first-child { white-space: nowrap; }
/* A long last column (descriptions, paired results) keeps a readable width instead of a tall sliver. */
main .data-table td:last-child:not(:first-child) { min-width: 10rem; }
/* The edge fade hints at sideways scrolling. Nothing overflows from 768px, so the fade stops there
   (paper tables still overflow at 640-700px); docs tables stack below 768px instead (see the docs section). */
@media (max-width: 767px) {
    main .data-table-wrap {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
    }
}

/* ==========================================================================
   Papers hub
   ========================================================================== */
main .papers-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; max-width: var(--container); margin-inline: auto; }
main .papers-standard { padding-top: 1rem; border-top: 1px solid var(--line-2); }
main .papers-standard p:not(.eyebrow) { margin: 0 0 1rem; font-size: var(--fs-small); line-height: 1.65; color: var(--ink-3); }
main .papers-list { display: grid; gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) {
    main .papers-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2.5rem, 4vw, 4rem); align-items: start; }
    main .papers-standard { position: sticky; top: calc(var(--anchor-offset) + 1rem); }
}
main .paper-card { display: flex; flex-direction: column; padding: clamp(1.25rem, 3vw, 2rem); }
main .paper-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
main .paper-card-head .eyebrow { margin: 0; }
main .paper-card .subsection-title { max-width: 28ch; margin: 0 0 0.75rem; }
main .paper-card-summary { margin: 0 0 1.25rem; color: var(--ink-3); line-height: 1.65; max-width: 62ch; }
main .paper-card .text-link { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   Privacy and terms: chapters with a heading column and a copy column
   ========================================================================== */
main .legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; max-width: var(--container); margin-inline: auto; }
main .legal-head > :last-child { margin-bottom: 0; }
main .legal-head .subsection-title { max-width: 24ch; }
main .legal-head p:not(.eyebrow) { margin: 0.75rem 0 0; }
main .legal-body { display: grid; gap: var(--grid-gap); min-width: 0; }
main .legal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
@media (min-width: 640px) {
    main .legal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
main .legal-grid--three { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    main .legal-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    main .legal-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
main .legal-card { max-width: 36rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
main .legal-card > .eyebrow { margin-bottom: 0.5rem; }
main .legal-card > .card-title { margin-bottom: 0.5rem; }
/* Legal copy keeps a 33em measure (about 75 characters a line in Inter; 66ch would let lines run to 90-105).
   (0,2,2) beats system.css's shared 66ch rule and also caps list items, which that rule misses. Labels are
   excluded so A's eyebrow role keeps its colour, size and line height. */
main .privacy-copy :is(p, li):not(.eyebrow) { color: var(--ink-prose); line-height: 1.7; max-width: 33em; }
main .privacy-copy .legal-card :is(p, li):not(.eyebrow) { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.65; }
main .privacy-copy .legal-card p + p { margin-top: 0.75rem; }
main .privacy-copy .legal-card p.legal-basis { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line-1); color: var(--ink-2); }
main .privacy-copy ul.legal-list { display: grid; gap: 0.625rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
main .privacy-copy ul.legal-list > li { position: relative; padding-left: 1.25rem; }
main .privacy-copy ul.legal-list > li::before { content: ''; position: absolute; left: 0.125rem; top: calc(0.825em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
main .privacy-copy .legal-prose p + p { margin-top: 1rem; }
main .privacy-copy a:not([class]) { color: var(--ink-1); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 0.2em; }
main .privacy-copy a:not([class]):hover { text-decoration-color: var(--accent); }
main .legal-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
/* From 1024px each chapter reads as a ledger row: the heading block stays in view at the left while its copy scrolls. */
@media (min-width: 1024px) {
    main .legal-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2.5rem, 4vw, 4rem); align-items: start; }
    main .legal-head { position: sticky; top: calc(var(--anchor-offset) + 0.75rem); }
}
@media (max-width: 639px) {
    main .legal-actions > a { width: 100%; }
}

/* ==========================================================================
   Roadmap
   ========================================================================== */
main .roadmap-legend { margin-top: 0.5rem; }
main .roadmap-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-head) var(--grid-gap); }
main .roadmap-col:not(:has(.roadmap-item)) { display: none; }
main .roadmap-col > .section-index { margin-bottom: 1.25rem; }
main .roadmap-list {
    position: relative;
    display: grid;
    gap: var(--grid-gap);
    max-width: 64rem;
    margin: 0;
    padding: 0 0 0 1.75rem;
    list-style: none;
}
main .roadmap-list::before { content: ''; position: absolute; left: 0.4375rem; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--line-2); }
/* From 1024px the groups sit side by side; the status chip carries the state, so the rail and dots retire. */
@media (min-width: 1024px) {
    main .roadmap-board { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: start; }
    main .roadmap-list { padding-left: 0; }
    main .roadmap-list::before,
    main .roadmap-dot { display: none; }
}
main .roadmap-item { position: relative; }
main .roadmap-dot {
    --s: var(--status-planned);
    position: absolute;
    left: -1.75rem;
    top: 1.75rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    border: 3px solid var(--canvas);
    background: var(--s);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--s) 45%, transparent);
}
main .roadmap-dot[data-status="live"] { --s: var(--status-live); }
main .roadmap-dot[data-status="beta"] { --s: var(--status-pilot); }
main .roadmap-dot[data-status="in_development"] { --s: var(--status-dev); }
main .roadmap-card { padding: clamp(1.25rem, 3vw, 1.75rem); }
main .roadmap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.875rem; }
main .roadmap-row .eyebrow { margin: 0; }
main .roadmap-sep { color: var(--ink-decor); }
main .roadmap-row .status { margin-left: auto; }
main .roadmap-card .card-title { margin-bottom: 0.5rem; }
main .roadmap-card p:not(.eyebrow):not(.meta) { margin: 0; color: var(--ink-3); line-height: 1.65; }
main .roadmap-card .text-link { margin-top: 0.75rem; }
main .roadmap-flag { margin: -0.25rem 0 0.375rem; color: var(--ink-2); }
main .reading-empty { max-width: 40rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
main .reading-empty > p:not(.eyebrow) { margin: 0 0 0.75rem; color: var(--ink-3); line-height: 1.65; }
main .reading-empty > p:last-child { margin-bottom: 0; }
main .reading-empty .cta-actions { justify-content: flex-start; margin-top: 1.75rem; }

/* ==========================================================================
   Insights, case studies and posts
   ========================================================================== */
main .reading-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
@media (min-width: 768px) { main .reading-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { main .reading-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
main .reading-card { display: flex; flex-direction: column; padding: clamp(1.25rem, 3vw, 1.75rem); }
main .reading-card > p:not(.eyebrow):not(.meta) { margin: 0 0 1.25rem; color: var(--ink-3); line-height: 1.65; }
main .reading-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: auto; }
main .reading-card .tag { align-self: flex-start; margin-bottom: 1rem; }
main .reading-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.25rem; border-radius: var(--radius-md); }
main .reading-icon svg { width: 1.5rem; height: 1.5rem; color: var(--accent); }
main .reading-head { max-width: var(--measure-head); margin-bottom: var(--space-head); }
main .reading-head .lead { margin: 0; }
main .reading-papers { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; }
main .reading-single { max-width: 42rem; }

/* ==========================================================================
   AZ UI Kit component docs
   ========================================================================== */
main .docs-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0 0 1.25rem; font: 500 var(--fs-ui)/1.4 var(--font-sans); color: var(--ink-3); }
main .docs-breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-3); text-decoration: none; }
main .docs-breadcrumb a:hover { color: var(--ink-1); }
main .docs-breadcrumb [aria-hidden="true"] { color: var(--ink-decor); }
main .docs-breadcrumb [aria-current="page"] { color: var(--ink-1); }
main .docs-hero .hero-identity { margin-bottom: 1.25rem; }
main .docs-hero .hero-title { margin-bottom: 1rem; }
main .docs-hero .status { margin: 0 0 1.5rem; }
main .docs-hero .hero-logo svg { width: 1.75rem; height: 1.75rem; }

main .docs-body { min-width: 0; }
main .docs-body { --docs-gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
main .docs-body > section { position: relative; max-width: 60rem; scroll-margin-top: 0.25rem; }
main .docs-body > section + section { margin-top: calc(2 * var(--docs-gap)); }
main .docs-body > section + section::before { content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--docs-gap)); border-top: 1px solid var(--line-1); pointer-events: none; }
main .docs-body > section > h2 { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 1rem; }
main .docs-body > section > h3 { margin: 2rem 0 0.75rem; }
main .docs-body > section > p { color: var(--ink-3); line-height: 1.7; max-width: var(--measure); }
main .docs-body > section > p { margin: 0 0 1.25rem; }
main .docs-body .code-window,
main .docs-body .data-table-wrap { margin: 0 0 1.5rem; }
main .docs-body .code-window:last-child,
main .docs-body .data-table-wrap:last-child { margin-bottom: 0; }
/* Attribute names, types and defaults are machine text: mono in the table body. */
main .docs-body .data-table td:first-child { font: 500 var(--fs-code)/1.5 var(--font-mono); color: var(--accent); }
main .docs-body .data-table td.docs-mono { font: 400 var(--fs-code)/1.5 var(--font-mono); color: var(--ink-3); }
main .docs-callout {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line-2));
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface-1));
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.6;
}
/* 34em is about 75 characters a line at the callout's 15px (the 72ch default let lines run to 98-99). */
main .docs-callout p { max-width: 34em; margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
main .docs-callout strong { color: var(--ink-1); }
main .docs-callout a { color: var(--ink-1); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 0.2em; }
main .docs-callout a:hover { text-decoration-color: var(--accent); }
main .docs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); margin: 0 0 1.5rem; }
@media (min-width: 768px) { main .docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
main .docs-card { padding: 1.25rem; }
main .docs-card > :last-child { margin-bottom: 0; }
main .docs-card h4 { margin: 0 0 0.375rem; }
main .docs-card p { margin: 0 0 0.75rem; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-3); }
main .docs-card code { font-size: 0.75rem; }
main .docs-body kbd { display: inline-block; padding: 0.0625rem 0.375rem; border: 1px solid var(--line-3); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--surface-3); font: 500 0.75rem/1.4 var(--font-mono); color: var(--ink-1); }
main .docs-snippet {
    margin: 0;
    padding: 0.75rem 0.875rem;
    overflow-x: auto;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-sm);
    background: var(--well);
    font: 400 0.75rem/1.6 var(--font-mono);
    color: #e4e4e7;
    white-space: pre;
    scrollbar-width: thin;
}
main .docs-snippet code { font: inherit; padding: 0; background: none; }
main .docs-snippet:focus-visible { outline-offset: 2px; }
main .docs-card h4 + .docs-snippet { margin-top: 0.75rem; }
main .docs-steps { display: grid; gap: 0.75rem; max-width: 46rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
main .docs-step { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: baseline; gap: 0.75rem; padding: 1rem 1.25rem; }
main .docs-step h4 { margin: 0 0 0.25rem; }
main .docs-step p { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-3); }
main .docs-step > .index { padding-top: 0.125rem; }
main .docs-check { position: relative; top: 0.125rem; width: 1rem; height: 1rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
main .docs-check::after { content: ''; position: absolute; left: 0.34rem; top: 0.2rem; width: 0.3rem; height: 0.5rem; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg); }
/* Toast types keep their semantic colours: they illustrate the component's own variants. */
main .docs-type { --t: var(--status-planned); border: 1px solid color-mix(in srgb, var(--t) 30%, var(--line-2)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--t) 7%, var(--surface-1)); }
main .docs-type--green { --t: var(--status-live); }
main .docs-type--red { --t: #f87171; }
main .docs-type--amber { --t: var(--status-pilot); }
main .docs-type--blue { --t: var(--status-dev); }
main .docs-type-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
main .docs-type-head h4 { margin: 0; }
main .docs-type-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--t) 18%, transparent); color: var(--t); font: 600 0.875rem/1 var(--font-sans); }
main .docs-type code { color: var(--t); }
main .docs-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; max-width: 60rem; margin-top: clamp(3rem, 2.25rem + 2.5vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line-2); }

/* Below 768px a reference table stacks: each row reads as its name, then labelled values (every non-first
   cell carries data-label with its column header), so nothing scrolls sideways or hides behind the fade.
   The header row stays in the accessibility tree; the generated labels are exposed too, so cells stay
   understood where a browser flattens table semantics. The label floats in a flow-root cell, so a long
   (translated) label wraps and grows the cell instead of overlapping the next one. */
@media (max-width: 767px) {
    main .docs-body .data-table-wrap { -webkit-mask-image: none; mask-image: none; }
    main .docs-body .data-table { display: block; min-width: 0; }
    main .docs-body .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    main .docs-body .data-table :is(tbody, tr) { display: block; }
    main .docs-body .data-table tr { padding: 0.875rem 1rem; border-bottom: 1px solid var(--line-2); }
    main .docs-body .data-table tbody tr:last-child { border-bottom: 0; }
    /* Long mono tokens ("different:old_password", "image/*,.pdf,.docx") may wrap here: the 320px column is narrower than they are. */
    main .docs-body .data-table td { display: flow-root; padding: 0; border: 0; overflow-wrap: anywhere; }
    main .docs-body .data-table td + td { margin-top: 0.375rem; }
    main .docs-body .data-table td:first-child { white-space: normal; }
    main .docs-body .data-table td[data-label] { min-width: 0; padding-left: 7rem; }
    main .docs-body .data-table td[data-label]::before {
        content: attr(data-label);
        float: left;
        width: 6.5rem;
        margin-left: -7rem;
        font: 500 0.75rem/1.75 var(--font-sans);
        color: var(--ink-4);
    }
}

/* From 1024px a sticky contents column replaces the section pill. The hidden pill still raises --anchor-offset
   (effects.css), so docs sections measure their landing from the nav itself: the heading lands 1.5rem under it. */
@media (min-width: 1024px) {
    main .docs-pill { display: none; }
    main .reading-layout.docs-layout { grid-template-columns: 13rem minmax(0, 60rem); column-gap: 3.5rem; }
    main .docs-layout > .reading-aside { top: calc(var(--nav-bottom) + 1.5rem); max-height: calc(100svh - var(--nav-bottom) - 3rem); }
    main .docs-body > section { scroll-margin-top: calc(var(--nav-bottom) + 1.5rem - var(--anchor-offset)); }
}