/* =================================================================
   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: 2px;
    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 {
    color: var(--accent);
}

.header__mark {
    margin-right: 4px;
}

.header__sep {
    color: var(--border-strong);
}

.header__section {
    color: var(--text-muted);
    font-size: var(--fs-ui);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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__section,
    .header__sep,
    .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);
}

/* The first column of a command table is a name, not prose. */
.md td:first-child code {
    white-space: nowrap;
}

/* ─── 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);
}

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

    .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 line: one command, a copy button beside it ─────── */

.example--install {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 8px;
}

.example--install .example__code {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
}

.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 ───────────────────────────────────── */

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

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

[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: #50a14f;
}

[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: #4078f2;
}

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

[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: #e45649;
}

[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: #0184bc;
}

[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);
    }
}

/* =================================================================
   homepage.css — the landing: the hero, the three points, the three
   blocks taken from the reference, and the links on from here.
   The landing reads as one column, so the sidebar stands aside on the
   home page (it comes back as the drawer at narrow widths).
   ================================================================= */

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

.home .sidebar {
    display: none;
}

.landing {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 24px;
}

/* ─── The hero ───────────────────────────────────────────────────── */

.hero {
    padding: 56px 0 48px;
    text-align: center;
}

.hero__name {
    margin: 18px 0 20px;
    font-size: clamp(34px, 5vw, var(--fs-hero));
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.hero__accent {
    color: var(--accent);
}

.hero__tagline {
    max-width: 620px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: var(--fs-lg);
    line-height: 1.6;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}

/* The hero's calls to action: this scoped rule carries the pills' inline padding on its own.
   The reset (shell.css) is unlayered and zeroes every padding; this rule is unlayered too,
   and more specific, so the labels sit well inside the pill. The label keeps the button's
   own centring. */
.hero__actions .mtrl-button {
    padding-inline: 1.4em;
}

.hero__install {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* The install line is one command: it reads as a line, not as a block. */
.hero__install .example--install {
    max-width: 100%;
    margin-top: 0;
    text-align: left;
}

.hero__notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    justify-content: center;
    margin-top: 22px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.hero__notes span::before {
    content: "·";
    margin-right: 22px;
    color: var(--border-strong);
}

.hero__notes span:first-child::before {
    content: none;
    margin: 0;
}

/* ─── The three points ───────────────────────────────────────────── */

.landing-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding: 32px 0 44px;
    border-top: 1px solid var(--border);
}

.landing-points h2 {
    margin: 12px 0 8px;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.landing-points p {
    color: var(--text-muted);
    font-size: var(--fs-base);
}

.feature-index {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
}

/* ─── The file, the plan, the reading ────────────────────────────── */

.samples {
    padding: 36px 0 8px;
    border-top: 1px solid var(--border);
}

.samples__lead {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: var(--fs-md);
}

.sample {
    margin-top: 32px;
}

.sample__label {
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sample__caption {
    margin-top: 4px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}

.samples__foot {
    margin-top: 20px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

/* ─── On from here ───────────────────────────────────────────────── */

.landing-next {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

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

@media (max-width: 900px) {
    .home .sidebar {
        display: block;
    }

    .hero {
        padding: 36px 0 32px;
    }
}

@media (max-width: 760px) {
    .landing-points,
    .landing-next {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-points {
        gap: 22px;
    }

    .hero__notes span::before {
        content: none;
        margin: 0;
    }
}

/* =================================================================
   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;
    }
}