/**
 * Site layout and components.
 *
 * Structure follows the reference the owner asked for (Apple's design-resources
 * and documentation sites): a persistent glass top bar, an index on the left,
 * the specimen in the middle, the rationale on the right. The difference is
 * deliberate — where Apple hands you a Figma file, every specimen here renders
 * as live HTML using the harness's own tokens, because these components were
 * built in the WebUI in the first place.
 *
 * The page itself never scrolls: the three columns scroll independently, so the
 * glass bar always sits over moving content and the reading pane keeps its
 * place while you browse.
 */

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

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;          /* the columns own the scrolling */
}

body {
    font-family: var(--site-font);
    font-size: var(--site-text-body);
    line-height: 1.6;
    color: var(--site-label);
    background: var(--site-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color-scheme: var(--color-scheme);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; border-radius: 6px; }

/* ── scrollbars: part of the design, not the browser default ───────── */

.col__scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--site-rail) transparent;
}
.col__scroll::-webkit-scrollbar { width: var(--site-rail-w); height: var(--site-rail-w); }
.col__scroll::-webkit-scrollbar-track { background: transparent; }
.col__scroll::-webkit-scrollbar-thumb {
    background: var(--site-rail);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 999px;
}
.col__scroll::-webkit-scrollbar-thumb:hover { background: var(--site-rail-hover); background-clip: content-box; }
.col__scroll::-webkit-scrollbar-corner { background: transparent; }

/* ── top bar (liquid glass) ────────────────────────────────────────── */

.topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 40;
    /* two controls pinned to the edges, everything else centred between them
     * with a fixed gap, so the middle never drifts as the page changes */
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: var(--site-s5);
    height: var(--site-topbar);
    padding: 0 var(--site-s4);
    background: var(--site-glass);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    border-bottom: 1px solid var(--site-glass-edge);
}

/* the sheen is what reads as "glass" rather than "translucent grey" */
.topbar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--site-glass-sheen), transparent 62%);
    pointer-events: none;
}

.topbar > * { position: relative; z-index: 1; }

.topbar__center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--site-s5);
    min-width: 0;
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { display: block; width: 24px; height: auto; color: var(--site-label); }
.brand__name { font-size: var(--site-text-card); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.brand__divider { width: 1px; height: 16px; background: var(--site-line); }
.brand__product { font-size: var(--site-text-note); color: var(--site-label-2); white-space: nowrap; }

.topbar__nav { display: flex; gap: var(--site-s4); }
.topbar__nav a {
    font-size: var(--site-text-note);
    color: var(--site-label-2);
    white-space: nowrap;
    transition: color var(--site-dur-fast) var(--site-ease);
}
.topbar__nav a:hover { color: var(--site-label); }

/* ── search ────────────────────────────────────────────────────────── */

.search { position: relative; width: min(300px, 30vw); }
.search input {
    width: 100%;
    height: 32px;
    padding: 0 30px 0 30px;
    font-family: inherit;
    font-size: var(--site-text-note);
    color: var(--site-label);
    background: color-mix(in srgb, var(--site-bg-subtle) 80%, transparent);
    border: 1px solid transparent;
    border-radius: 9px;
    outline: none;
    transition: border-color var(--site-dur-fast) var(--site-ease), background var(--site-dur-fast) var(--site-ease);
}
.search input::placeholder { color: var(--site-label-3); }
.search input:focus-visible {
    background: var(--site-bg-raised);
    border-color: var(--site-accent);
    box-shadow: 0 0 0 3px var(--site-accent-soft);
}
.search__icon,
.search__hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--site-label-3);
    pointer-events: none;
}
.search__icon { left: 9px; width: 15px; height: 15px; }
.search__icon svg { width: 100%; height: 100%; display: block; }
.search__hint {
    right: 8px;
    font-size: 10px;
    font-family: var(--site-font-mono);
    padding: 2px 5px;
    border: 1px solid var(--site-line);
    border-radius: 5px;
    background: var(--site-bg-raised);
}
.search input:focus ~ .search__hint { opacity: 0; }

/* ── buttons & segmented control ───────────────────────────────────── */

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--site-label-2);
    transition: background var(--site-dur-fast) var(--site-ease), color var(--site-dur-fast) var(--site-ease);
}
.icon-button:hover { background: var(--site-bg-subtle); color: var(--site-label); }
.icon-button[aria-pressed='true'] { background: var(--site-accent-soft); color: var(--site-accent-ink); }
.icon-button svg { width: 16px; height: 16px; display: block; }

/* language switch: the same capsule geometry the harness uses for Pill */
.segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--site-bg-subtle);
    border-radius: 9px;
    flex: none;
}
.segmented button {
    height: 24px;
    min-width: 34px;
    padding: 0 8px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-size: var(--site-text-micro);
    font-weight: 600;
    color: var(--site-label-2);
    cursor: pointer;
    transition: background var(--site-dur-fast) var(--site-ease), color var(--site-dur-fast) var(--site-ease);
}
.segmented button:hover { color: var(--site-label); }
.segmented button[aria-selected='true'] {
    background: var(--site-bg-raised);
    color: var(--site-label);
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

/* ── shell: three columns, each scrolling on its own ───────────────── */

.shell {
    position: fixed;
    inset: 0;
    /* The user's width lives in `--nav-w-user` (written inline by the drag
     * handles) while `--nav-w` is what the grid actually consumes — so the
     * collapse rules below can zero it out without forgetting the width the
     * user chose, and opening the rail again restores it. */
    --nav-w: var(--nav-w-user, 268px);
    --aside-w: var(--aside-w-user, 348px);
    display: grid;
    grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--aside-w);
    transition: grid-template-columns var(--site-dur-slow) var(--site-ease);
}
.shell[data-dragging='true'] { transition: none; }
.shell[data-nav='hidden'] { --nav-w: 0px; }
.shell[data-aside='hidden'] { --aside-w: 0px; }

.col {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.col__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-top: calc(var(--site-topbar) + var(--site-s2));
    padding-bottom: var(--site-s8);
}
.col--nav .col__scroll {
    padding-left: var(--site-s3);
    padding-right: var(--site-s3);
    padding-top: calc(var(--site-topbar) + var(--site-s4));
}
.col--aside .col__scroll {
    /* the rationale column is prose, not a list of rows: it needs real side
     * padding, or every paragraph starts flush against the divider */
    padding-left: var(--site-s4);
    padding-right: var(--site-s4);
    padding-top: calc(var(--site-topbar) + var(--site-s4));
}
.col--main .col__scroll {
    padding-left: var(--site-s6);
    padding-right: var(--site-s6);
    /* the top inset matches the side inset, so the content block reads as one
     * rectangle rather than as a column with a different margin upstairs */
    padding-top: calc(var(--site-topbar) + var(--site-s6));
}

/* a collapsed column must not keep its contents focusable */
.col[data-collapsed='true'] .col__scroll { visibility: hidden; }
.col--nav { border-right: 1px solid var(--site-line-soft); }
.col--aside { border-left: 1px solid var(--site-line-soft); }
.shell[data-nav='hidden'] .col--nav,
.shell[data-aside='hidden'] .col--aside { border-color: transparent; }

/* ── drag handles ──────────────────────────────────────────────────── */

.resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    z-index: 6;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
    transition: background var(--site-dur-fast) var(--site-ease);
}
.resizer[data-resize='nav'] { right: -5px; }
.resizer[data-resize='aside'] { left: -5px; }
.resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 28px;
    border-radius: 2px;
    background: transparent;
    transition: background var(--site-dur-fast) var(--site-ease);
}
.resizer:hover::after,
.resizer[data-active='true']::after { background: var(--site-accent); }
.resizer:focus-visible { outline: none; }
.resizer:focus-visible::after { background: var(--site-accent); }
.shell[data-nav='hidden'] .resizer[data-resize='nav'],
.shell[data-aside='hidden'] .resizer[data-resize='aside'] { display: none; }

body[data-resizing] { cursor: col-resize; user-select: none; }

/* ── index (left) ──────────────────────────────────────────────────── */

/* Groups are captions, not foldable headers, and they sit tight against their
 * own entries — the vertical rhythm comes from the caption's top margin, not
 * from a gap under every group. */
.index__group { margin-bottom: 2px; }

.index__title {
    margin: 14px 0 2px;
    padding: 0 8px;
    font-size: var(--site-text-micro);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--site-label-3);
}
.index__group:first-child .index__title { margin-top: 0; }

/* A branch row is a button, and a button brings its own border and background.
 * Both must go: closed branches have to read exactly like their leaf siblings
 * (text + chevron, nothing else). Only an *open* branch is filled, and it uses
 * the same pill as the current page — one highlight language for the tree. */
.index__row {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    border: 0;
    background: transparent;
}

/* Hover belongs to the row, not to the label: a highlight that stops before the
 * chevron reads as if the arrow were a separate control (it is not — the whole
 * row folds the branch). */
.index__row:hover { background: var(--site-bg-subtle); color: var(--site-label); }

/* Open state controls visibility; only the current route receives selection styling. */
.index__branch[data-open='true'] > .index__row { background: transparent; color: var(--site-label-2); }
.index__branch[data-open='true'] > .index__row:hover { background: var(--site-bg-subtle); color: var(--site-label); }

.index__chevron { display: block; flex: none; width: 12px; height: 12px; margin-left: 2px; color: var(--site-label-3); transition: transform var(--site-dur) var(--site-ease); }
.index__chevron svg { width: 100%; height: 100%; display: block; }
.index__branch[data-open='false'] .index__chevron { transform: rotate(-90deg); }
.index__branch[data-open='true'] > .index__row .index__chevron { color: currentColor; }

.index__children {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--site-dur-slow) var(--site-ease), opacity var(--site-dur) var(--site-ease);
}
.index__branch[data-open='false'] .index__children { grid-template-rows: 0fr; opacity: 0; }
.index__children > div { overflow: hidden; min-height: 0; }

.index__link {
    display: flex;
    align-items: center;
    gap: var(--site-s2);
    height: 28px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: var(--site-text-note);
    color: var(--site-label-2);
    transition: background var(--site-dur-fast) var(--site-ease), color var(--site-dur-fast) var(--site-ease);
}
.index__link:hover { background: var(--site-bg-subtle); color: var(--site-label); }
.index__link[aria-current='page'] {
    background: var(--site-accent-soft);
    color: var(--site-accent-ink);
    font-weight: 600;
}
.index__branch > .index__row[aria-current='page'] {
    background: var(--site-accent-soft);
    color: var(--site-accent-ink);
    font-weight: 600;
}
.index__branch > .index__row[aria-current='page']:hover {
    background: var(--site-accent-soft);
    color: var(--site-accent-ink);
}
.index__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index__count {
    font-size: var(--site-text-micro);
    color: var(--site-label-3);
    font-variant-numeric: tabular-nums;
}
.index__link[aria-current='page'] .index__count { color: var(--site-accent-ink); }

/* ── main ──────────────────────────────────────────────────────────── */

.main-inner { max-width: 920px; margin: 0 auto; }
.main-inner:has(.demo--wide) { max-width: 1480px; }

.hero { margin-bottom: var(--site-s7); }
.hero__eyebrow,
.doc-head__eyebrow {
    min-height: 20px;
    margin: 0 0 var(--site-s3);
    font-size: var(--site-text-micro);
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.hero__eyebrow { color: var(--site-accent); }
.doc-head__eyebrow { color: var(--site-label-3); }
.hero:not(:has(.hero__eyebrow))::before,
.doc-head:not(:has(.doc-head__eyebrow))::before {
    content: '';
    display: block;
    height: calc(20px + var(--site-s3));
}
.hero__title,
.doc-head__title {
    margin: 0;
    font-size: var(--site-text-page-title);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.hero__lede,
.doc-head__lede {
    max-width: 72ch;
    margin: var(--site-s4) 0 0;
    font-size: var(--site-text-card);
    line-height: 1.6;
    color: var(--site-label-2);
}

.section { margin-bottom: var(--site-s7); }
.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--site-s4);
    margin-bottom: var(--site-s4);
}
.section__title { margin: 0; font-size: var(--site-text-title); font-weight: 600; letter-spacing: -0.02em; }
.section__hint { font-size: var(--site-text-note); color: var(--site-label-3); }
.section__link { font-size: var(--site-text-note); color: var(--site-accent-ink); cursor: pointer; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--site-s3); }

.card {
    display: flex;
    flex-direction: column;
    gap: var(--site-s2);
    padding: var(--site-s4) var(--site-s4) var(--site-s3);
    background: var(--site-bg-raised);
    border: 1px solid var(--site-line-soft);
    border-radius: var(--site-radius-m);
    transition: transform var(--site-dur) var(--site-ease), box-shadow var(--site-dur) var(--site-ease), border-color var(--site-dur) var(--site-ease);
}
a.card:hover { transform: translateY(-2px); box-shadow: var(--site-shadow); border-color: var(--site-line); }
.card__title { margin: 0; font-size: var(--site-text-card); font-weight: 600; }
.card__code {
    margin-left: var(--site-s2);
    font-family: var(--site-font-mono);
    font-size: 11px;
    font-weight: 400;
    color: var(--site-label-3);
}
.hero__code {
    margin-left: var(--site-s3);
    font-family: var(--site-font-mono);
    font-size: 14px;
    font-weight: 400;
    color: var(--site-label-3);
    vertical-align: middle;
}

/* Where a component comes from — the product, or this repository. */
.origin-note {
    display: flex;
    align-items: center;
    gap: var(--site-s2);
    margin: var(--site-s3) 0 0;
    font-size: var(--site-text-note);
    color: var(--site-label-2);
}
.origin-note .badge { flex: none; }
.card__body { margin: 0; font-size: var(--site-text-note); color: var(--site-label-2); }
.card__meta { margin: auto 0 0; padding-top: var(--site-s2); font-size: var(--site-text-micro); color: var(--site-label-3); }

/* ── specimen stage (no nested scrolling: the frame grows to fit) ──── */

/* No frame and no inner card: the specimen is a canvas, and a box inside a box
 * inside a page is three rectangles doing one rectangle's job. */
.specimen { margin-bottom: var(--site-s6); }
.specimen__label {
    margin: 0 0 var(--site-s2);
    font-size: var(--site-text-micro);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--site-label-3);
}
.specimen__stage { display: block; }

/* ── icon grid ─────────────────────────────────────────────────────── */

.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--site-s3) var(--site-s2);
    border-radius: var(--site-radius-s);
    border: 1px solid transparent;
    background: transparent;
    cursor: copy;
    transition: background var(--site-dur-fast) var(--site-ease), border-color var(--site-dur-fast) var(--site-ease);
}
.icon-cell:hover { background: var(--site-bg-subtle); border-color: var(--site-line-soft); }
.icon-cell svg { width: 22px; height: 22px; color: var(--site-label); }
.icon-cell__name {
    font-size: 10px;
    font-family: var(--site-font-mono);
    color: var(--site-label-3);
    text-align: center;
    word-break: break-all;
    line-height: 1.3;
}

/* ── tables ────────────────────────────────────────────────────────── */

.table-wrap { overflow: hidden; border: 1px solid var(--site-line-soft); border-radius: var(--site-radius-m); }
table { width: 100%; border-collapse: collapse; font-size: var(--site-text-note); }
th, td { padding: 9px var(--site-s3); text-align: left; vertical-align: top; }
thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: 600;
    font-size: var(--site-text-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--site-label-3);
    background: var(--site-bg-subtle);
    white-space: nowrap;
}
tbody tr + tr td { border-top: 1px solid var(--site-line-soft); }
tbody tr:hover td { background: color-mix(in srgb, var(--site-bg-subtle) 60%, transparent); }
code, .mono { font-family: var(--site-font-mono); font-size: 12px; }

/* ── badges ────────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: var(--site-text-micro);
    font-weight: 600;
    white-space: nowrap;
}
.badge--safe { background: var(--site-good-soft); color: var(--site-good); }
.badge--risk { background: var(--site-bad-soft); color: var(--site-bad); }
.badge--neutral { background: var(--site-bg-subtle); color: var(--site-label-2); }
.badge--accent { background: var(--site-accent-soft); color: var(--site-accent-ink); }
.badge--warn { background: var(--site-warn-soft); color: var(--site-warn); }

/* ── aside (right) ─────────────────────────────────────────────────── */

.aside__block { margin-bottom: var(--site-s6); }
.aside__block:last-child { margin-bottom: 0; }
.aside__title {
    margin: 0 0 var(--site-s2);
    font-size: var(--site-text-micro);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--site-label-3);
}
.aside p { margin: 0 0 var(--site-s2); font-size: var(--site-text-note); color: var(--site-label-2); }
.aside ul { margin: 0; padding-left: 1.05em; font-size: var(--site-text-note); color: var(--site-label-2); }
.aside li + li { margin-top: 6px; }
.aside dl { margin: 0; font-size: var(--site-text-note); }
.aside dt { margin-top: var(--site-s2); font-size: var(--site-text-micro); color: var(--site-label-3); }
.aside dd { margin: 2px 0 0; color: var(--site-label); font-family: var(--site-font-mono); font-size: 12px; word-break: break-all; }
.aside a { color: var(--site-accent-ink); }
.aside a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* on-this-page outline in the rationale column */
.outline { list-style: none; margin: 0; padding: 0; font-size: var(--site-text-note); }
.outline__item + .outline__item { margin-top: 4px; }
.outline__item a { display: block; padding: 1px 0; color: var(--site-label-2); }
.outline__item a:hover { color: var(--site-label); text-decoration: none; }
.outline__item--h3 { padding-left: var(--site-s3); }
.outline__item--h3 a { color: var(--site-label-3); }

/* ── code ──────────────────────────────────────────────────────────── */

.code {
    margin: 0 0 var(--site-s4);
    background: var(--site-bg-code);
    border: 1px solid var(--site-line-soft);
    border-radius: var(--site-radius-m);
    overflow: hidden;
}
.code__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-s3);
    padding: 6px var(--site-s2) 6px var(--site-s3);
    border-bottom: 1px solid var(--site-line-soft);
    font-size: var(--site-text-micro);
    color: var(--site-label-3);
    font-family: var(--site-font-mono);
}
.code pre {
    margin: 0;
    padding: var(--site-s3);
    overflow-x: auto;
    font-family: var(--site-font-mono);
    font-size: 12.5px;
    line-height: 1.62;
    color: var(--site-label);
}
.code pre::-webkit-scrollbar { height: 8px; }
.code pre::-webkit-scrollbar-thumb { background: var(--site-rail); border-radius: 4px; }

.copy {
    height: 22px;
    padding: 0 8px;
    background: var(--site-bg-raised);
    border: 1px solid var(--site-line);
    border-radius: 6px;
    font-size: var(--site-text-micro);
    color: var(--site-label-2);
    cursor: pointer;
    transition: background var(--site-dur-fast) var(--site-ease), color var(--site-dur-fast) var(--site-ease);
}
.copy:hover { background: var(--site-bg-subtle); color: var(--site-label); }

/* ── prose (spec documents) ────────────────────────────────────────── */

.prose { font-size: var(--site-text-body); line-height: 1.72; color: var(--site-label); }
/* jumped-to headings must clear the glass bar, or the outline lands you under it */
.prose h2, .prose h3 { scroll-margin-top: calc(var(--site-topbar) + var(--site-s4)); }
.prose h1 { margin: 0 0 var(--site-s4); font-size: var(--site-text-title); font-weight: 600; letter-spacing: -0.02em; }
/* 引用角标：正文里标 [1]，文末列来源；角标只负责跳转，不改路由。 */
.prose .cite {
    margin-left: 2px;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--site-accent-ink);
    cursor: pointer;
    vertical-align: super;
}
.prose .cite:hover { text-decoration: underline; }
.prose li[id^='cite-'] { scroll-margin-top: calc(var(--site-topbar) + var(--site-s4)); }
.prose h2 { margin: var(--site-s6) 0 var(--site-s3); font-size: var(--site-text-section); font-weight: 600; }
.prose h3 { margin: var(--site-s5) 0 var(--site-s2); font-size: var(--site-text-card); font-weight: 600; }
.prose p { margin: 0 0 var(--site-s3); color: var(--site-label-2); }
.prose ul, .prose ol { margin: 0 0 var(--site-s3); padding-left: 1.2em; color: var(--site-label-2); }
.prose li + li { margin-top: 6px; }
.prose table { margin: 0 0 var(--site-s4); font-size: var(--site-text-note); border-collapse: collapse; width: 100%; }
.prose th, .prose td { border: 1px solid var(--site-line-soft); padding: 8px var(--site-s3); text-align: left; }
.prose thead th {
    background: var(--site-bg-subtle);
    /* No sticky head inside prose: a header that detaches from its own table
     * reads as if the first row had floated off. Only `.table-wrap` — the data
     * tables, where the container really is the scroller — keeps one. */
    position: static;
}
.prose code { background: var(--site-bg-code); padding: 1px 5px; border-radius: 5px; }
.prose pre { margin: 0 0 var(--site-s4); background: var(--site-bg-code); padding: var(--site-s3); border-radius: var(--site-radius-s); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: none; border-top: 1px solid var(--site-line-soft); margin: var(--site-s5) 0; }
.prose blockquote {
    margin: 0 0 var(--site-s4);
    padding: var(--site-s3) var(--site-s4);
    border-left: 3px solid var(--site-accent);
    background: var(--site-accent-soft);
    border-radius: 0 var(--site-radius-s) var(--site-radius-s) 0;
    color: var(--site-label-2);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a { color: var(--site-accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ── callout ───────────────────────────────────────────────────────── */

.callout {
    display: flex;
    gap: var(--site-s3);
    margin-bottom: var(--site-s4);
    padding: var(--site-s3) var(--site-s4);
    border-radius: var(--site-radius-s);
    background: var(--site-accent-soft);
    color: var(--site-label);
    font-size: var(--site-text-note);
}
.callout--warn { background: var(--site-warn-soft); }
.callout--bad { background: var(--site-bad-soft); }
.callout__mark { flex: none; font-weight: 700; color: var(--site-accent-ink); }
.callout--warn .callout__mark { color: var(--site-warn); }
.callout p { margin: 0; color: inherit; }
.callout p + p { margin-top: 6px; }
.callout code { background: color-mix(in srgb, var(--site-bg) 55%, transparent); }

/* ── search results ────────────────────────────────────────────────── */

.results { position: fixed; inset: var(--site-topbar) 0 auto; z-index: 45; display: none; padding: 0 var(--site-s4); }
.results[data-open='true'] { display: block; }
.results__panel {
    max-width: 680px;
    margin: var(--site-s3) auto 0;
    padding: 6px;
    background: var(--site-bg-raised);
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius-m);
    box-shadow: var(--site-shadow-lift);
    max-height: min(62vh, 520px);
    overflow-y: auto;
}
.results__item {
    display: flex;
    align-items: baseline;
    gap: var(--site-s3);
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
}
.results__item:hover, .results__item[data-active='true'] { background: var(--site-bg-subtle); }
.results__item[data-active='true'] { box-shadow: inset 0 0 0 1px var(--site-line); }
.results__kind { flex: none; width: 42px; font-size: var(--site-text-micro); color: var(--site-label-3); }
.results__name { font-size: var(--site-text-note); font-weight: 500; }
.results__desc {
    margin-left: auto;
    font-size: var(--site-text-micro);
    color: var(--site-label-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 46%;
}
.results__empty { padding: var(--site-s5); text-align: center; color: var(--site-label-3); font-size: var(--site-text-note); }

/* ── embedded live demos: a document's figures ─────────────────────── */

.demo { margin: 0 0 var(--site-s5); }
.demo { container-type: inline-size; }
.specimen { container-type: inline-size; }
.demo__comparison {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--site-s4);
}
.demo__evidence, .demo__example, .demo__proof {
    min-width: 0;
    border: 1px solid var(--site-line-soft);
    border-radius: var(--site-radius-m);
    overflow: hidden;
    background: var(--site-bg);
}
.demo__proof {
    padding: var(--site-s4);
    color: var(--site-label-2);
    font-size: var(--site-text-note);
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.demo__proof strong { display: block; margin-bottom: var(--site-s2); color: var(--site-label); font-size: var(--site-text-micro); }
.demo__proof p { margin: 0; }
.demo__proof p + p { margin-top: var(--site-s2); }
.demo__panel-title {
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--site-line-soft);
    font-size: var(--site-text-micro);
    font-weight: 600;
    color: var(--site-label-2);
}
/* The specimen re-creates a real surface, so some of its copy is quoted off the
   product rather than written by us. Say so once, on the header: marking every
   quoted string inside the specimen would disturb the geometry the page is
   asserting (`docs/I18N.md` §5). */
.demo__capture {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    color: var(--site-label-3);
}
/* A quoted product label keeps its Chinese so it matches the running UI; the
   gloss is what the English reader actually reads. It must not look like part
   of the code span — it is our sentence, not the product's string. */
.site-gloss {
    margin-left: 4px;
    color: var(--site-label-3);
}
.site-gloss::before { content: "("; }
.site-gloss::after { content: ")"; }
.demo__evidence-image {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    background: var(--site-bg-subtle);
}
.demo__evidence-meta, .demo__evidence-note {
    margin: 8px 12px 0;
    font-size: var(--site-text-micro);
    line-height: 1.5;
    color: var(--site-label-3);
    overflow-wrap: anywhere;
}
.demo__evidence-note { margin-bottom: 10px; }
.demo__evidence--missing { padding-bottom: 12px; }
.demo__evidence--missing p { margin: 10px 12px 0; font-size: var(--site-text-note); color: var(--site-label-2); }
.demo__example > .demo__stage { border: 0; border-radius: 0; }
.demo__withheld {
    align-self: start;
    padding: 12px 14px;
    border: 1px solid var(--site-line-soft);
    border-radius: var(--site-radius-m);
    background: var(--site-bg-subtle);
    font-size: var(--site-text-note);
}
.demo__withheld p { margin: 6px 0 0; color: var(--site-label-2); line-height: 1.55; }
.demo__stage {
    display: block;
    border: 1px solid var(--site-line-soft);
    border-radius: var(--site-radius-m);
    overflow: hidden;
    background: var(--site-bg-sunken);
}
.demo figcaption {
    margin-top: var(--site-s2);
    font-size: var(--site-text-note);
    line-height: 1.5;
    color: var(--site-label-3);
    text-align: center;
}
@container (min-width: 820px) {
    .demo__comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.demo--wide .demo__comparison { grid-template-columns: minmax(0, 1fr); }
.demo--wide .demo__stage { overflow-x: auto; overflow-y: hidden; }

/* ── document head (spec pages lead with their own title) ──────────── */

.doc-head { margin: 0 0 var(--site-s5); }
/* 指南页头：一句摘要 + 「读完能做什么」。这两样是导航卡片要显示的东西，
   写在页头就等于写在卡片上，不用再维护第二份。 */
.doc-head__lede {
    margin: var(--site-s3) 0 0;
    max-width: 72ch;
    font-size: var(--site-text-card);
    line-height: 1.6;
    color: var(--site-label-2);
}
.doc-head__tasks {
    margin: 0;
    padding-left: 1.1em;
    font-size: var(--site-text-note);
    line-height: 1.7;
    color: var(--site-label-2);
}
.doc-head__tasks-wrap { margin-top: var(--site-s4); }
.doc-head__tasks-label {
    margin: 0 0 var(--site-s2);
    font-size: var(--site-text-micro);
    font-weight: 600;
    color: var(--site-label-3);
}
.card__tasks {
    margin: var(--site-s2) 0 0;
    padding-left: 1.1em;
    font-size: var(--site-text-note);
    color: var(--site-label-2);
}
.card__tasks li + li { margin-top: 2px; }

/* 来源标记：首页右栏用来说明「这里的数字凭什么可信」 */
.markers { list-style: none; margin: 0; padding: 0; font-size: var(--site-text-note); color: var(--site-label-2); }
.markers li + li { margin-top: var(--site-s2); }
.marker {
    display: inline-block;
    margin-right: 4px;
    padding: 0 6px;
    border-radius: 5px;
    background: var(--site-bg-subtle);
    color: var(--site-label);
    font-size: var(--site-text-micro);
}
.marker--source { background: var(--site-accent-soft); color: var(--site-accent-ink); }
.marker--measured { background: var(--site-good-soft); color: var(--site-good); }
.marker--external { background: var(--site-warn-soft); color: var(--site-warn); }
.marker--deviation { background: var(--site-bad-soft); color: var(--site-bad); }
/* the article no longer starts with its own h1, so the first section must not
 * open with a section-sized top margin */
.prose > h2:first-child { margin-top: 0; }

/* ── guide / spec switch on a component page ───────────────────────── */

.doc-switch { display: flex; margin: 0 0 var(--site-s4); }
[data-doc-panel][hidden] { display: none; }

/* ── breadcrumb + back ─────────────────────────────────────────────── */

.crumbs {
    display: flex;
    align-items: center;
    gap: var(--site-s2);
    margin-bottom: var(--site-s4);
    font-size: var(--site-text-note);
    color: var(--site-label-3);
}
.crumbs__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 2px;
    border: 1px solid var(--site-line-soft);
    border-radius: 8px;
    background: var(--site-bg-raised);
    color: var(--site-label-2);
    cursor: pointer;
    transition: background var(--site-dur-fast) var(--site-ease), color var(--site-dur-fast) var(--site-ease);
}
.crumbs__back:hover { background: var(--site-bg-subtle); color: var(--site-label); }
.crumbs__back svg { width: 14px; height: 14px; display: block; }
.crumbs a { color: var(--site-label-2); }
.crumbs a:hover { color: var(--site-label); }
.crumbs__current { color: var(--site-label); font-weight: 500; }

/* ── tooltips: the harness's own bubble, not the browser's ─────────── */

.tip {
    position: fixed;
    z-index: 60;
    max-width: 50vw;
    padding: 3px 7px;
    border-radius: 8px;
    background: var(--site-label);
    color: var(--site-bg);
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity var(--site-dur-fast) var(--site-ease), transform var(--site-dur-fast) var(--site-ease);
}
.tip[data-open='true'] { opacity: 1; transform: translateY(0); }

/* ── collapsible source ────────────────────────────────────────────── */

.code[data-fold='true'] pre { display: none; }
.code__actions { display: flex; gap: 6px; }
.code__toggle {
    height: 22px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--site-line);
    border-radius: 6px;
    font-size: var(--site-text-micro);
    color: var(--site-label-2);
    cursor: pointer;
}
.code__toggle:hover { background: var(--site-bg-subtle); color: var(--site-label); }

/* ── nested nav entry: the item you are actually reading ───────────── */

.index__link { position: relative; }
.index__link--sub { padding-left: 24px; font-size: 12.5px; }
.index__link--sub::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background: var(--site-line);
}

/* ── responsive ────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .shell { --aside-w: 0px !important; }
    .col--aside, .resizer[data-resize='aside'] { display: none; }
}

@media (max-width: 860px) {
    .shell { --nav-w: 0px !important; }
    .col--nav, .resizer[data-resize='nav'] { display: none; }
    .col--main .col__scroll { padding-left: var(--site-s5); padding-right: var(--site-s5); }
    :root { --site-text-hero: 34px; --site-text-page-title: 30px; --site-text-title: 24px; }
    .brand__product, .brand__divider { display: none; }
    .search { width: 38vw; }
    .search__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}