/* =================================================================
   tokens.css — the site's own variables, and the few colours material's
   theme does not name (code and terminal surfaces, syntax accents).

   The colour scheme is material's ocean theme (themes/ocean.css), which
   defines --mtrl-sys-color-* on [data-theme=ocean] — light — and on
   [data-theme=ocean][data-theme-mode=dark]. base.eta sets both attributes
   on <html> before first paint. Every alias below therefore follows the
   mode on its own; nothing here restates a colour per mode.
   ================================================================= */

:root {
    /* material's own typefaces are Roboto; the site copies no fonts and
       reads in the system's, so the components it uses are told the same. */
    --mtrl-ref-typeface-brand: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mtrl-ref-typeface-plain: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --fs-xs: 11.5px;
    --fs-sm: 12.5px;
    --fs-ui: 13.5px;
    --fs-base: 15px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 21px;
    --fs-2xl: 26px;
    --fs-3xl: 34px;
    --fs-hero: 52px;

    /* Layout */
    --header-height: 56px;
    --sidebar-width: 232px;
    --toc-width: 216px;
    --layout-max-width: 1280px;
    --content-max-width: 760px;
    --gutter: 28px;
    --radius: var(--mtrl-sys-shape-corner-medium);
    --radius-sm: var(--mtrl-sys-shape-corner-small);
    --radius-xs: var(--mtrl-sys-shape-corner-extra-small);

    /* Colour: the page, from material's surface roles */
    --bg: var(--mtrl-sys-color-surface);
    --bg-raised: var(--mtrl-sys-color-surface-container);
    --bg-raised-high: var(--mtrl-sys-color-surface-container-high);
    --bg-sunken: var(--mtrl-sys-color-surface-container-low);
    --text: var(--mtrl-sys-color-on-surface);
    --text-muted: var(--mtrl-sys-color-on-surface-variant);
    --border: var(--mtrl-sys-color-outline-variant);
    --border-strong: var(--mtrl-sys-color-outline);
    --accent: var(--mtrl-sys-color-primary);
    --accent-dim: color-mix(in srgb, var(--mtrl-sys-color-primary) 12%, transparent);
    --accent-glow: color-mix(in srgb, var(--mtrl-sys-color-primary) 6%, transparent);

    /* Colour: the chrome, which floats over the page */
    --header-bg: color-mix(in srgb, var(--mtrl-sys-color-surface) 86%, transparent);
    --overlay-bg: rgba(0, 0, 0, 0.45);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Colour: code and terminal surfaces. Not material roles: a code block is
       a window, not a card, so it sits below the page in both modes. */
    --bg-code: #171a1c;
    --bg-code-bar: rgba(255, 255, 255, 0.03);
    --bg-inline-code: var(--mtrl-sys-color-surface-container-high);
    --bg-term: #101315;
    --term-prompt: #8dcdff;
    --term-command: #e1e3e4;
    --term-output: #a9b1b6;

    /* Motion: one duration, and a switch that says no */
    --transition: 140ms cubic-bezier(0.2, 0, 0, 1);
}

[data-theme-mode="light"] {
    --bg-code: #f5f7f9;
    --bg-code-bar: rgba(0, 0, 0, 0.02);
    --bg-term: #eef1f4;
    --term-prompt: #006493;
    --term-command: #191c1e;
    --term-output: #41484d;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.07);
}

/* Window size classes (m3.material.io/foundations/layout): the shell keeps a
   gutter from large on, so a wide screen is not all margin. */
@media (min-width: 1600px) {
    :root {
        --layout-max-width: 1440px;
        --sidebar-width: 252px;
        --toc-width: 232px;
    }
}

/* =================================================================
   shell.css — the site's frame: the page, the header, the sidebar,
   the content column, the overlay, the footer. The sheets after this
   one style what a page says, never where it sits.
   ================================================================= */

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

/* Unlayered, as it was before `site.reset`: the cascade of every page is the one it had
   before the layer. It zeroes the browser's defaults everywhere, and any rule more specific
   than `*` reads over it — the one component that needs padding past the reset carries its
   own scoped rule (`.hero__actions .mtrl-button`, homepage.css). */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── Base ───────────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--mtrl-sys-color-primary-container);
    color: var(--mtrl-sys-color-on-primary-container);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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

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

.skip-link {
    position: absolute;
    top: -100vh;
    left: 12px;
    padding: 8px 16px;
    background: var(--bg-raised-high);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: var(--fs-ui);
    font-weight: 600;
    text-decoration: none;
    z-index: 10000;
}

.skip-link:focus {
    position: fixed;
    top: 12px;
}

.content:focus {
    outline: none;
}

/* ─── Header ─────────────────────────────────────────────────────── */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-height);
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.header__logo {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-ui);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.header__mark {
    flex: none;
    width: 24px;
    height: 24px;
    margin-right: 3px;
}

.header__command {
    display: inline-flex;
    align-items: center;
    min-width: calc(var(--header-command-length, 8) * 1ch + 10px);
    color: var(--text-muted);
    font-weight: 500;
}

.header__typed::before {
    content: " ";
}

.header__caret {
    width: 1px;
    height: 1.1em;
    margin-left: 2px;
    background: currentColor;
    animation: header-caret 900ms steps(1, end) infinite;
}

@keyframes header-caret {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .header__caret { animation: none; }
}

.header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.header__nav a {
    padding: 6px 10px;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    font-size: var(--fs-ui);
    text-decoration: none;
    transition: color var(--transition), background-color var(--transition);
}

.header__nav a:hover {
    background: var(--bg-raised);
    color: var(--text);
}

.header__nav a.active {
    color: var(--accent);
}

.header__icon {
    width: 18px;
    height: 18px;
}

.header__search,
.header__theme,
.header__hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 8px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.header__search:hover,
.header__theme:hover,
.header__hamburger:hover {
    background: var(--bg-raised);
    border-color: var(--border);
    color: var(--text);
}

.header__search-kbd {
    display: inline-flex;
    gap: 2px;
}

.header__search-kbd kbd {
    min-width: 18px;
    padding: 1px 4px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    text-align: center;
}

.header__hamburger {
    display: none;
}

/* Light and dark: one of the two is shown, whichever the page is not. */
.header__theme-moon,
[data-theme-mode="dark"] .header__theme-sun {
    display: none;
}

[data-theme-mode="dark"] .header__theme-moon {
    display: block;
}

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

.layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: 40px;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ─── Sidebar ────────────────────────────────────────────────────── */

.sidebar {
    position: sticky;
    top: var(--header-height);
    align-self: start;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: 28px 0 40px;
}

.sidebar__group + .sidebar__group {
    margin-top: 22px;
}

.sidebar__label {
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar__link {
    display: block;
    padding: 5px 10px;
    border-left: 2px solid transparent;
    color: var(--text-muted);
    font-size: var(--fs-ui);
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.sidebar__link:hover {
    background: var(--bg-raised);
    color: var(--text);
}

.sidebar__link--active {
    border-left-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.sidebar__foot {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.sidebar__foot a {
    color: var(--text-muted);
}

.sidebar__foot a:hover {
    color: var(--accent);
}

/* The header's own links, repeated in the drawer at small widths. */
.mobile-navigation {
    display: none;
}

/* ─── Content column ─────────────────────────────────────────────── */

.content {
    min-width: 0;
    padding: 36px 0 72px;
}

/* ─── Overlay, under the drawer ──────────────────────────────────── */

.overlay {
    display: none;
}

/* ─── Footer ─────────────────────────────────────────────────────── */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: space-between;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 24px var(--gutter) 40px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-ui);
}

.site-footer a {
    color: var(--text-muted);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--accent);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

/* ─── Narrow windows ─────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .layout {
        gap: 28px;
    }
}

@media (max-width: 900px) {
    .header__nav {
        display: none;
    }

    .header__search {
        margin-left: auto;
    }

    .header__hamburger {
        display: inline-flex;
    }

    .layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .sidebar {
        position: fixed;
        top: var(--header-height);
        left: 0;
        z-index: 90;
        width: min(300px, 84vw);
        max-height: none;
        height: calc(100vh - var(--header-height));
        padding: 20px 16px 32px;
        background: var(--bg-raised);
        border-right: 1px solid var(--border);
        transform: translateX(-102%);
        transition: transform var(--transition);
        overscroll-behavior: contain;
    }

    .sidebar--open {
        transform: none;
    }

    .mobile-navigation {
        display: block;
    }

    .overlay:not([hidden]) {
        display: block;
        position: fixed;
        inset: var(--header-height) 0 0;
        z-index: 80;
        background: var(--overlay-bg);
        border: 0;
        cursor: pointer;
    }

    .content {
        padding-top: 24px;
    }

    body.nav-open {
        overflow: hidden;
    }
}

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

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

/* =================================================================
   content.css — what a documentation page says: its prose, its tables,
   its table of contents, the pager under it, and the cards the command
   index is built from.
   ================================================================= */

/* ─── The page's own frame ───────────────────────────────────────── */

.document-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--content-max-width)) minmax(0, var(--toc-width));
    gap: 56px;
    align-items: start;
    max-width: calc(var(--content-max-width) + var(--toc-width) + 56px);
}

.page-wrap {
    max-width: var(--content-max-width);
}

.page-heading {
    margin-bottom: 28px;
}

.page-heading p {
    color: var(--text-muted);
    font-size: var(--fs-lg);
}

.eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ui-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.doc-toolbar {
    margin-bottom: 20px;
}

.doc-toolbar a {
    color: var(--text-muted);
    font-size: var(--fs-ui);
    text-decoration: none;
}

.doc-toolbar a:hover {
    color: var(--accent);
}

/* ─── Prose ──────────────────────────────────────────────────────── */

.md {
    color: var(--text);
}

.md > * + * {
    margin-top: 18px;
}

.md h1 {
    margin-bottom: 22px;
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.md h2 {
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.md h3 {
    margin-top: 32px;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.md h4 {
    margin-top: 24px;
    font-size: var(--fs-md);
    font-weight: 700;
}

.md p,
.md li {
    max-width: 68ch;
}

.md strong {
    font-weight: 700;
}

/* Prose links: the site's link colour in both themes, and an underline that is there at
   rest. The colour alone is not a cue: against the text around it the accent stands 1.44:1
   on the landing's sentence (1.01:1 in dark) and 2.65:1 in the docs body (1.32:1 in dark),
   under the 3:1 colour needs when colour is the only thing telling a link apart. The
   underline is quiet — the accent mixed toward transparent, one hairline, offset 3px — and
   turns full-strength on hover and on keyboard focus (the outline itself comes from the
   global :focus-visible rule). Only running text reads it: the toolbar, the pager and the
   cards around the text keep their own treatment, and `.text-link` — the 404 page's action,
   which sits in a paragraph of its own — is named out of the rule below, so no
   rest-underline branch can reach it; left to the cascade the prose selector out-specifies
   the action's own `text-decoration: none`, and only the hover and focus rules underline it.
   The landing's sentence under the transcripts is prose too — a link in prose must never
   fall back to the browser's default blue, which cannot be read on the dark background. */
.md a,
.samples__foot a {
    color: var(--accent);
    text-decoration: none;
    text-underline-offset: 3px;
}

/* Every rest-underline branch in one grouped selector, with the one :not() taken on the
   group so the exclusion covers all of them. :is() takes its most specific argument — both
   are 0-1-1, `.md :where(…) a` and `.samples__foot a` — and :not(.text-link) adds its 0-1-0:
   the group weighs 0-2-1, exactly the weight the `.md` branches carried before, and the
   samples foot rises from 0-1-1 to the weight every other branch already had. The note is a
   container name like the others — `.note` is a class, and a note the renderer emits is a
   `<p class="note">` — so the check exercises the name on its own with a `div.note` probe. */
:is(.md :where(p, li, blockquote, td, th, .note) a, .samples__foot a):not(.text-link) {
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
    text-decoration-thickness: 1px;
}

.md a:hover,
.md a:focus-visible,
.samples__foot a:hover,
.samples__foot a:focus-visible {
    text-decoration-line: underline;
    text-decoration-color: var(--accent);
}

.md ul,
.md ol {
    padding-left: 22px;
}

.md li + li {
    margin-top: 6px;
}

.md li::marker {
    color: var(--text-muted);
}

.md hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--border);
}

.md blockquote {
    padding: 2px 0 2px 16px;
    border-left: 2px solid var(--accent);
    color: var(--text-muted);
}

/* Inline code, and the code of a heading, which is a name and not a block. Code inside a
   `pre` is a block's body, not inline code: the `:where()` keeps this chip off it — there it
   painted a background and a border around every line, and its padding sat on the lines'
   ends — while holding this selector's weight at 0-1-1, exactly what bare `.md code` weighed.
   A bare `:not(pre)` would weight 0-1-2 and outrank the site's own de-chip rules for specific
   places (`.doc-entry__name code`, the headings), chipping a card title or a heading name. */
.md :where(:not(pre)) > code,
.text-link code,
.doc-entry code,
.sample__caption code {
    padding: 1px 5px;
    background: var(--bg-inline-code);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.88em;
}

.md h2 code,
.md h3 code {
    padding: 0;
    background: none;
    border: 0;
}

/* An indented block: the reference's own preformatted text, quieter than a block of
   the site's own — no bar, no label, no copy button, just the text as it is written. */
.md-pre {
    max-width: 100%;
    padding: 12px 16px;
    overflow-x: auto;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-ui);
    line-height: 1.7;
    tab-size: 2;
}

.md-pre:focus-visible {
    outline-offset: -2px;
}

/* ─── Tables ─────────────────────────────────────────────────────── */

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.md table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-ui);
}

.md th,
.md td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

.md thead th {
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.md tbody tr + tr td {
    border-top: 1px solid var(--border);
}

/* One rule for every table on the site. A code phrase may wrap at spaces; a single
   token never breaks (no word-break, no overflow-wrap anywhere in a cell — a token that
   cannot fit widens its column instead of splitting); a chip's border is never drawn in
   two pieces, because a wrapped chip clones its padding and border onto each of its
   lines. The first column of a command table holds the exact text a person sees in
   their terminal, so it must read as a line: the columns share the width by content,
   with the first column's cells at a preferred `width: 55%`. Auto layout reads that as
   the column's ask, not a fixed size — short names still let the column shrink toward
   its longest token, and a long message takes just over the half: the reference's
   longest takes two or three lines there, never nine. (A percentage min/max-width on a
   cell is not honoured by auto layout — measured: it changed nothing — so the share is
   stated as the one percentage auto layout reads.) A table that still cannot fit
   scrolls sideways inside its own frame — `.table-wrap` above is that frame — and no
   text is ever clipped or hidden. At phone width each row stacks instead; see the
   600px query at the foot of this sheet. */
.md th,
.md td {
    overflow-wrap: normal;
    word-break: normal;
}

.md th code,
.md td code {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.md th:first-child,
.md td:first-child {
    width: 55%;
}

/* ─── The site's own notes between pieces of the reference ───────── */

.note {
    padding: 12px 16px;
    background: var(--accent-glow);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-muted);
    font-size: var(--fs-ui);
}

.text-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
}

/* ─── The table of contents beside a page ────────────────────────── */

.doc-toc {
    position: sticky;
    top: calc(var(--header-height) + 36px);
    max-height: calc(100vh - var(--header-height) - 60px);
    overflow-y: auto;
}

.doc-toc .ui-title {
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.doc-toc nav {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
}

.doc-toc a {
    padding: 4px 0 4px 12px;
    color: var(--text-muted);
    font-size: var(--fs-ui);
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition);
}

.doc-toc a:hover {
    border-left: 2px solid var(--accent);
    margin-left: -1.5px;
    padding-left: 11.5px;
    color: var(--text);
}

/* ─── The pager under a reference page ───────────────────────────── */

.page-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.page-nav__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color var(--transition), background-color var(--transition);
}

.page-nav__link:hover {
    background: var(--bg-raised);
    border-color: var(--border-strong);
}

.page-nav__link--next {
    text-align: right;
}

.page-nav__label {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-nav__title {
    color: var(--text);
    font-size: var(--fs-ui);
    font-weight: 600;
}

/* ─── Cards: the command index, the landing's next links ─────────── */

.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.doc-entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* The card is an anchor; without its own colour a bare text node in it would inherit
       the browser's default blue. The spans inside set their own colours over this. */
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}

.doc-entry:hover {
    background: var(--bg-raised-high);
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* A card is one link as a whole: hovering it or reaching it by keyboard never
   underlines its title, description and last line as one long link. The prose rules
   above underline every `.md` anchor on hover and on focus — the card is named out of
   that here, at a weight (0-3-1) the prose hover rule (0-2-1) cannot reach. The hover
   keeps its own reading above (border, background, the lift), and keyboard focus keeps
   the global :focus-visible outline. The landing's next links wear the same class but
   sit outside `.md`, so this rule does not touch them. */
.md a.doc-entry:hover,
.md a.doc-entry:focus-visible {
    text-decoration-line: none;
}

.doc-entry__name {
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.doc-entry__name code {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.doc-entry__summary {
    color: var(--text-muted);
    font-size: var(--fs-ui);
    line-height: 1.55;
}

.doc-entry__who {
    margin-top: auto;
    padding-top: 6px;
    color: var(--accent);
    font-size: var(--fs-sm);
}

/* ─── Narrow windows ─────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .document-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .doc-toc {
        position: static;
        max-height: none;
        order: -1;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 600px) {
    .md h1 {
        font-size: var(--fs-2xl);
    }

    /* A two-column table at phone width gives each column a hundred-odd pixels — the
       code reads in broken pieces and the prose a few words a line. Instead each row
       stacks: the exact terminal text on top, full width, wrapping at spaces over a
       line or three, and its meaning under it in prose, with the row's border between
       pairs. The header row names the columns, which the stacking makes self-evident,
       so it goes. The table's own frame still scrolls if a single token is ever wider
       than the phone. */
    .md table,
    .md tbody,
    .md tr,
    .md td {
        display: block;
    }

    .md thead {
        display: none;
    }

    .md td:first-child,
    .md td:last-child {
        width: auto;
    }

    .md td:first-child {
        padding-bottom: 2px;
    }

    .md td:last-child {
        padding-top: 2px;
    }

    .md tbody tr + tr {
        border-top: 1px solid var(--border);
    }

    .md tbody tr + tr td {
        border-top: 0;
    }

    .md h2 {
        margin-top: 36px;
        font-size: var(--fs-xl);
    }

    .page-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-nav__link--next {
        text-align: left;
    }

    .doc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =================================================================
   syntax.css — the blocks: a code block's bar and body, the terminal
   transcript, the install line, and highlight.js's colours.
   Code and terminals sit below the page in both modes: a code block is
   a window onto a file, not a card of the site's.
   ================================================================= */

/* ─── A block: its bar, its label, its copy button ───────────────── */

.example {
    position: relative;
    margin-top: 22px;
    overflow: hidden;
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.example__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 8px 7px 14px;
    background: var(--bg-code-bar);
    border-bottom: 1px solid var(--border);
}

.example__label {
    color: var(--term-output);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.example__copy {
    flex: none;
    height: 26px;
    min-height: 0;
    padding: 0 10px;
    font-size: var(--fs-sm);
}

.example__copy[data-copied] {
    color: var(--mtrl-sys-color-success);
}

.example__code {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    color: var(--term-command);
    font-family: var(--font-mono);
    font-size: var(--fs-ui);
    line-height: 1.7;
    tab-size: 2;
}

.example__code:focus-visible {
    outline-offset: -2px;
}

/* A scrollbar on a code block is a thin line in the page's own tone. */
.example__code::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.md pre::-webkit-scrollbar {
    height: 8px;
}

.example__code::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.md pre::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}

/* ─── The terminal transcript of a console fence ─────────────────── */

.example--term {
    background: var(--bg-term);
    border-left: 2px solid var(--accent);
}

.term {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-ui);
    line-height: 1.7;
    tab-size: 2;
}

/* The block names the mono font; the code inside would keep the browser's own `monospace`
   — the UA sheet styles `code`, and that beats inheritance — and the two fonts' metrics
   stand every line box a fraction taller than the line-height the block declares. */
.term code {
    font-family: inherit;
}

.term:focus-visible {
    outline-offset: -2px;
}

/* One line, as a span of the pre's own text: the newline between the spans is the
   line break, so the lines are inline — a block-level span would add a break of its
   own and every line would be followed by an empty one. */
.term__line {
    color: var(--term-output);
    white-space: pre;
}

.term__line--command {
    color: var(--term-command);
}

.term__prompt {
    color: var(--term-prompt);
    user-select: none;
}

.term__command {
    font-weight: 600;
}

/* ─── The install block: one tab per package manager ─────────────── */
/* Which command is shown is decided on :root[data-package-manager], set before paint
   from the remembered choice (base.eta). With no choice, bun is the one on screen,
   so a visitor without scripts still has a command. */

.doc-install {
    max-width: 100%;
    overflow: hidden;
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: left;
}

.doc-install__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-code-bar);
    border-bottom: 1px solid var(--border);
}

.doc-install__switch {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
}

.doc-install__option {
    border: 0;
    border-radius: var(--radius-xs);
    padding: 4px 10px;
    background: transparent;
    color: var(--term-output);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.4;
    cursor: pointer;
}

.doc-install__option:hover {
    color: var(--term-command);
}

.doc-install__option:focus-visible,
.doc-install__copy:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.doc-install__option[data-package-manager="bun"],
:root[data-package-manager="npm"] .doc-install__option[data-package-manager="npm"],
:root[data-package-manager="pnpm"] .doc-install__option[data-package-manager="pnpm"],
:root[data-package-manager="yarn"] .doc-install__option[data-package-manager="yarn"] {
    background: color-mix(in srgb, var(--term-command) 14%, transparent);
    color: var(--term-command);
}

:root[data-package-manager]:not([data-package-manager="bun"]) .doc-install__option[data-package-manager="bun"] {
    background: transparent;
    color: var(--term-output);
}

.doc-install__panel {
    display: none;
}

.doc-install__panel[data-package-manager="bun"],
:root[data-package-manager="npm"] .doc-install__panel[data-package-manager="npm"],
:root[data-package-manager="pnpm"] .doc-install__panel[data-package-manager="pnpm"],
:root[data-package-manager="yarn"] .doc-install__panel[data-package-manager="yarn"] {
    display: block;
}

:root[data-package-manager]:not([data-package-manager="bun"]) .doc-install__panel[data-package-manager="bun"] {
    display: none;
}

.doc-install__command {
    margin: 0;
    padding: 12px 14px;
    overflow-x: auto;
    color: var(--term-command);
    font-family: var(--font-mono);
    font-size: var(--fs-ui);
    line-height: 1.7;
}

.doc-install__command code {
    font-family: inherit;
}

.install__prompt {
    color: var(--term-prompt);
    user-select: none;
}

/* ─── highlight.js — One Dark ────────────────────────────────────── */

.hljs {
    color: #abb2bf;
}

.hljs-comment,
.hljs-quote {
    color: #7f848e;
    font-style: italic;
}

.hljs-keyword,
.hljs-doctag,
.hljs-formula {
    color: #c678dd;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-meta .hljs-string {
    color: #98c379;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
    color: #d19a66;
}

.hljs-title,
.hljs-title.function_,
.hljs-section,
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id {
    color: #61aeee;
}

.hljs-built_in,
.hljs-class .hljs-title,
.hljs-type {
    color: #e6c07b;
}

.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst,
.hljs-tag {
    color: #e06c75;
}

.hljs-attr,
.hljs-attribute,
.hljs-property,
.hljs-variable.language_ {
    color: #56b6c2;
}

.hljs-params,
.hljs-punctuation {
    color: #abb2bf;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: 700;
}

/* ─── highlight.js — One Light ───────────────────────────────────── */
/* Each light token is darkened along its own hue until it clears 4.5:1 on --bg-code. */

[data-theme-mode="light"] .hljs {
    color: #383a42;
}

[data-theme-mode="light"] .hljs-comment,
[data-theme-mode="light"] .hljs-quote {
    color: #6e7077;
}

[data-theme-mode="light"] .hljs-keyword,
[data-theme-mode="light"] .hljs-doctag,
[data-theme-mode="light"] .hljs-formula {
    color: #a626a4;
}

[data-theme-mode="light"] .hljs-string,
[data-theme-mode="light"] .hljs-regexp,
[data-theme-mode="light"] .hljs-addition,
[data-theme-mode="light"] .hljs-meta .hljs-string {
    color: #3e7d3e;
}

[data-theme-mode="light"] .hljs-number,
[data-theme-mode="light"] .hljs-literal,
[data-theme-mode="light"] .hljs-variable,
[data-theme-mode="light"] .hljs-template-variable,
[data-theme-mode="light"] .hljs-selector-class,
[data-theme-mode="light"] .hljs-selector-attr,
[data-theme-mode="light"] .hljs-selector-pseudo {
    color: #986801;
}

[data-theme-mode="light"] .hljs-title,
[data-theme-mode="light"] .hljs-title.function_,
[data-theme-mode="light"] .hljs-section,
[data-theme-mode="light"] .hljs-symbol,
[data-theme-mode="light"] .hljs-bullet,
[data-theme-mode="light"] .hljs-link,
[data-theme-mode="light"] .hljs-meta,
[data-theme-mode="light"] .hljs-selector-id {
    color: #2766f0;
}

[data-theme-mode="light"] .hljs-built_in,
[data-theme-mode="light"] .hljs-class .hljs-title,
[data-theme-mode="light"] .hljs-type {
    color: #966701;
}

[data-theme-mode="light"] .hljs-name,
[data-theme-mode="light"] .hljs-selector-tag,
[data-theme-mode="light"] .hljs-deletion,
[data-theme-mode="light"] .hljs-subst,
[data-theme-mode="light"] .hljs-tag {
    color: #d42f20;
}

[data-theme-mode="light"] .hljs-attr,
[data-theme-mode="light"] .hljs-attribute,
[data-theme-mode="light"] .hljs-property,
[data-theme-mode="light"] .hljs-variable.language_ {
    color: #0177aa;
}

[data-theme-mode="light"] .hljs-params,
[data-theme-mode="light"] .hljs-punctuation {
    color: #383a42;
}

/* ─── Narrow windows ─────────────────────────────────────────────── */

@media (max-width: 600px) {
    .example__code,
    .term {
        font-size: var(--fs-sm);
    }
}

/* =================================================================
   search.css — the search dialog: a panel over the page, its input,
   its results, and the keys under it.
   ================================================================= */

.search-overlay {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    overflow: visible;
}

.search-overlay::backdrop {
    background: var(--overlay-bg);
    backdrop-filter: blur(2px);
}

.search-dialog {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    width: min(620px, calc(100vw - 32px));
    max-height: min(560px, 76vh);
    overflow: hidden;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ─── The input ──────────────────────────────────────────────────── */

.search-dialog__input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.search-dialog__input-icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.search-dialog__input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
}

.search-dialog__input:focus {
    outline: none;
}

.search-dialog__input::placeholder {
    color: var(--text-muted);
}

.search-dialog__input-esc {
    flex: none;
    padding: 3px 8px;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    cursor: pointer;
}

.search-dialog__input-esc:hover {
    color: var(--text);
}

/* ─── The results ────────────────────────────────────────────────── */

.search-dialog__results {
    flex: 1;
    min-height: 96px;
    overflow-y: auto;
    padding: 8px;
    overscroll-behavior: contain;
}

.search-result {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
}

.search-result--active {
    background: var(--accent-dim);
}

.search-result__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.search-result__title {
    font-size: var(--fs-ui);
    font-weight: 600;
}

.search-result--active .search-result__title {
    color: var(--accent);
}

.search-result__kind {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.search-result__description {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result mark {
    background: none;
    color: var(--accent);
    font-weight: 700;
}

.search-message {
    padding: 24px 12px;
    color: var(--text-muted);
    font-size: var(--fs-ui);
    text-align: center;
}

/* ─── The keys under the panel ───────────────────────────────────── */

.search-dialog__footer {
    display: flex;
    flex: none;
    gap: 16px;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.search-dialog__footer-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.search-dialog__footer-key {
    padding: 1px 5px;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 10.5px;
}

/* ─── Narrow windows ─────────────────────────────────────────────── */

@media (max-width: 600px) {
    .search-dialog {
        top: 0;
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .search-dialog__footer {
        display: none;
    }
}