/* Cascade order: browser cleanup, design tokens, semantic defaults, layout shells, components, utilities. */
@layer reset, theme, base, layout, components, utilities;

@layer reset {

    /* Box model and media defaults */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        min-height: 100%;
        text-size-adjust: 100%;
    }

    body {
        min-height: 100vh;
        margin: 0;
    }

    img,
    picture,
    svg,
    video,
    canvas {
        display: block;
        max-width: 100%;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    button,
    summary,
    select,
    input[type="checkbox"],
    input[type="radio"],
    input[type="range"] {
        cursor: pointer;
    }

    /* Jump targets leave room around classic page chrome. */
    :target {
        scroll-margin-block: 6rem;
    }

    [data-jumpable] {
        scroll-margin-block: 6rem;
    }
}

@layer theme {
    :root {
        color-scheme: light;

        /* Typography */
        --font-sans: Verdana, Geneva, Tahoma, sans-serif;
        --font-serif: "Palatino Linotype", Palatino, "Book Antiqua", serif;
        --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

        /* Core surfaces and text */
        --background: #fbfbfb;
        --background-accent: #f0f1f2;
        --surface: #ffffff;
        --surface-2: #f7f8fa;
        --surface-3: #eef1f4;
        --text: #101010;
        --muted: #585858;
        --muted-strong: #303030;
        --border: #8f8f8f;
        --border-strong: #4c4c4c;

        /* Semantic accents */
        --primary: #1c4f9a;
        --primary-hover: #143f80;
        --primary-active: #0d2d61;
        --primary-text: #ffffff;
        --accent: #8a3a24;
        --accent-soft: #ece0d8;
        --success: #2f6a3c;
        --warning: #835f12;
        --danger: #8b2828;
        --info: #245c8f;

        /* Classic bevel chrome */
        --highlight: #ffffff;
        --lowlight: #777777;
        --button-face: #d7d7d7;
        --button-face-light: #f8f8f8;
        --button-face-hover: #e4e4e4;
        --button-face-mid: #c9c9c9;
        --button-face-dark: #9d9d9d;
        --button-edge: #242424;
        --button-groove: #6d6d6d;
        --button-secondary-face: #c9d1d8;
        --button-secondary-face-hover: #d7e0e7;
        --button-secondary-face-pressed: #b7c0c8;
        --button-secondary-edge: #4d5963;
        --button-secondary-highlight: #f7fbff;
        --button-blue-face: #dce7fb;
        --button-blue-mid: #9db7e3;
        --button-blue-dark: #5b7eb8;
        --terminal-bg: #050505;
        --terminal-border: #2c2c2c;
        --terminal-text: #f7f3e8;

        /* Interaction and elevation */
        --focus: #1c4f9a;
        --visited: #551a8b;
        --invalid: #c62828;
        --valid: #2e7d32;
        --selection: rgba(28, 79, 154, 0.18);
        --shadow-color: rgba(0, 0, 0, 0.28);
        --shadow-tight:
            1px 1px 0 var(--highlight) inset,
            -1px -1px 0 var(--lowlight) inset,
            1px 1px 0 rgba(0, 0, 0, 0.16);
        --bevel-inset:
            1px 1px 0 var(--highlight) inset,
            -1px -1px 0 var(--lowlight) inset;
        --shadow-raised-outer:
            0 0 0 1px var(--border-strong),
            2px 2px 0 rgba(0, 0, 0, 0.24);
        --shadow-raised: var(--bevel-inset), var(--shadow-raised-outer);
        --shadow-pressed:
            1px 1px 2px rgba(0, 0, 0, 0.44) inset,
            -1px -1px 0 var(--highlight) inset;

        /* Radii */
        --radius-1: 2px;
        --radius-2: 4px;
        --radius-3: 6px;
        --radius-4: 10px;

        /* Spacing scale */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 3rem;
        --space-8: 4rem;

        /* Layout and control dimensions */
        --container: 72rem;
        --container-narrow: 46rem;
        --container-wide: 88rem;
        --measure: 68ch;
        --control-height: 2.55rem;
        --line-height: 1.55;

        /* Elevation aliases for opt-in surfaces */
        --surface-elev-2: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--highlight)), var(--surface));
        --surface-elev-3: linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, var(--highlight)), var(--surface-2));
        --elev-border-2: var(--border-strong);
        --elev-border-3: color-mix(in srgb, var(--border-strong) 84%, #000000);
        --elev-shadow-2: var(--shadow-raised);
        --elev-shadow-3:
            1px 1px 0 var(--highlight) inset,
            -1px -1px 0 var(--lowlight) inset,
            0 0 0 1px var(--elev-border-3),
            3px 3px 0 rgba(0, 0, 0, 0.26),
            8px 8px 20px rgba(0, 0, 0, 0.18);
    }

}

@layer base {

    /* Page canvas */
    body {
        background: var(--background);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: 1rem;
        line-height: var(--line-height);
        text-rendering: optimizeLegibility;
    }

    ::selection {
        background: var(--selection);
    }

    body>header,
    body>main,
    body>footer {
        width: min(100% - 2rem, var(--container));
        margin-inline: auto;
    }

    body>header {
        padding-block: var(--space-5) var(--space-4);
    }

    body>main {
        padding-block: var(--space-5) var(--space-7);
    }

    body>footer {
        border-top: 1px solid var(--border);
        color: var(--muted);
        padding-block: var(--space-5);
    }

    main>*+* {
        margin-top: var(--space-7);
    }

    /* Typography */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--text);
        font-family: var(--font-sans);
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.08;
        margin: var(--space-5) 0 var(--space-3);
        text-wrap: balance;
    }

    /* Headings breathe above; collapsing keeps prose rhythm, guards keep
       container tops tight */
    :is(h1, h2, h3, h4, h5, h6):first-child {
        margin-top: 0;
    }

    h1 {
        font-size: 2.9rem;
    }

    h2 {
        font-size: 2.1rem;
    }

    h3 {
        font-size: 1.6rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    h5,
    h6 {
        font-family: var(--font-sans);
        font-size: 1rem;
        text-transform: uppercase;
    }

    p,
    ol,
    ul,
    dl,
    blockquote,
    pre,
    table,
    figure {
        margin-block: 0 var(--space-4);
    }

    p,
    li,
    dd {
        max-width: var(--measure);
    }

    /* Inline text */
    a {
        color: var(--primary);
        text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent);
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.18em;
    }

    a:visited {
        color: var(--visited);
        text-decoration-color: color-mix(in srgb, var(--visited) 40%, transparent);
    }

    a:hover {
        color: var(--primary-hover);
        text-decoration-color: currentColor;
    }

    strong {
        color: var(--text);
        font-weight: 700;
    }

    small,
    figcaption {
        color: var(--muted);
        font-size: 0.9rem;
    }

    mark {
        background: var(--accent-soft);
        border-radius: var(--radius-1);
        color: var(--text);
        padding: 0.08em 0.22em;
    }

    hr {
        border: 0;
        border-top: 1px solid var(--border);
        margin-block: var(--space-6);
    }

    /* Blocks and code */
    blockquote {
        background: color-mix(in srgb, var(--surface) 84%, var(--accent-soft));
        border: 1px solid var(--border);
        border-left: 0.35rem solid var(--accent);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-tight);
        color: var(--muted-strong);
        padding: var(--space-4) var(--space-5);
    }

    blockquote :last-child {
        margin-bottom: 0;
    }

    code,
    kbd,
    samp {
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-1);
        color: var(--text);
        font-family: var(--font-mono);
        font-size: 0.92em;
        padding: 0.12em 0.32em;
    }

    kbd {
        border-color: var(--border-strong);
        box-shadow: 0 2px 0 var(--border-strong);
    }

    /* Top margin so samples clear margin-less demo blocks; sibling margin
       collapsing keeps prose rhythm unchanged */
    pre {
        margin-top: var(--space-4);
    }

    pre:first-child {
        margin-top: 0;
    }

    pre {
        background: var(--terminal-bg);
        border: 1px solid var(--terminal-border);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-raised);
        color: var(--terminal-text);
        line-height: 1.55;
        overflow: auto;
        padding: var(--space-4);
    }

    pre code {
        background: transparent;
        border: 0;
        color: inherit;
        font-size: 0.95em;
        padding: 0;
    }

    /* Light sunken listing as the opt-in; terminal stays the default */
    pre.light {
        background: #fdfdfd;
        border: 1px solid var(--border);
        border-radius: 0;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.18) inset;
        color: var(--text);
    }

    pre code .token-comment {
        color: #9a9a9a;
        font-style: italic;
    }

    pre code .token-tag,
    pre code .token-selector {
        color: #8fc7ff;
    }

    pre code .token-attr,
    pre code .token-property {
        color: #ffd37a;
    }

    pre code .token-string {
        color: #b7e68d;
    }

    pre code .token-keyword {
        color: #f2a86f;
        font-weight: 700;
    }

    pre code .token-number {
        color: #c7b8ff;
    }

    ul,
    ol {
        padding-left: 1.4rem;
    }

    /* Lists and data */
    li+li {
        margin-top: var(--space-1);
    }

    dl {
        display: grid;
        gap: var(--space-2) var(--space-4);
        grid-template-columns: max-content 1fr;
    }

    dt {
        color: var(--muted-strong);
        font-weight: 700;
    }

    dd {
        margin: 0;
    }

    table {
        border-collapse: collapse;
        display: block;
        overflow-x: auto;
        width: 100%;
    }

    th,
    td {
        border-bottom: 1px solid var(--border);
        padding: 0.7rem 0.8rem;
        text-align: left;
        vertical-align: top;
    }

    th {
        background: var(--surface-2);
        color: var(--muted-strong);
        font-size: 0.92rem;
        line-height: 1.3;
        padding-block: 0.9rem;
        text-transform: uppercase;
    }

    tbody tr:hover {
        background: color-mix(in srgb, var(--primary) 7%, transparent);
    }

    figure {
        margin-inline: 0;
    }

    figcaption {
        margin-top: var(--space-2);
    }
}

@layer layout {

    /* Page shells */
    body.layout-topbar,
    body.layout-sidebar,
    body.layout-scroll {
        min-height: 100vh;
        overflow-x: hidden;
    }

    body.layout-topbar {
        display: grid;
        grid-template-rows: auto 1fr auto;
    }

    /* Topbar shell */
    body.layout-topbar>header,
    body.layout-topbar>main,
    body.layout-topbar>footer,
    body.layout-sidebar>header,
    body.layout-sidebar>main,
    body.layout-sidebar>footer,
    body.layout-scroll>header,
    body.layout-scroll>main,
    body.layout-scroll>footer {
        margin-inline: 0;
        width: 100%;
    }

    body.layout-topbar>header,
    body.layout-sidebar>header,
    body.layout-scroll>header {
        background:
            linear-gradient(180deg, var(--highlight), transparent 58%),
            linear-gradient(180deg, #dddddd, #c6c6c6);
        border-bottom: 1px solid var(--border-strong);
        box-shadow:
            1px 1px 0 var(--highlight) inset,
            0 2px 0 rgba(0, 0, 0, 0.18);
        padding: var(--space-2) max(1rem, calc((100vw - var(--container-wide)) / 2));
        position: static;
        top: auto;
        z-index: auto;
    }

    body.layout-topbar>header>nav,
    body.layout-sidebar>header>nav,
    body.layout-scroll>header>nav {
        margin-inline: auto;
        width: min(100%, var(--container-wide));
    }

    body.layout-topbar>main {
        margin-inline: auto;
        padding: var(--space-6) 1rem var(--space-7);
        width: min(100%, var(--container));
    }

    body.layout-topbar>footer,
    body.layout-sidebar>footer,
    body.layout-scroll>footer {
        margin-inline: auto;
        padding-inline: 1rem;
        width: min(100%, var(--container));
    }

    /* Sidebar shell */
    body.layout-sidebar {
        display: grid;
        grid-template-areas:
            "header header"
            "sidebar main"
            "footer footer";
        grid-template-columns: 16rem minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
    }

    body.layout-sidebar>header {
        grid-area: header;
    }

    body.layout-sidebar>.sidebar {
        align-self: stretch;
        background: var(--background-accent);
        border-right: 1px solid var(--border);
        box-shadow: none;
        grid-area: sidebar;
        height: 100vh;
        max-height: 100vh;
        overflow: auto;
        padding: var(--space-3) 0;
        position: sticky;
        top: 0;
    }

    body.layout-sidebar>.sidebar nav,
    body.layout-sidebar>.sidebar nav ul,
    body.layout-sidebar>.sidebar nav ol {
        align-items: stretch;
        display: flex;
        flex-direction: column;
    }

    body.layout-sidebar>.sidebar nav ul,
    body.layout-sidebar>.sidebar nav ol {
        gap: var(--space-1);
    }

    body.layout-sidebar>.sidebar nav a {
        display: block;
        padding: 0.52rem var(--space-4);
    }

    body.layout-sidebar>main {
        grid-area: main;
        margin-inline: auto;
        padding: var(--space-6) var(--space-5) var(--space-7);
        width: min(100%, var(--container-wide));
    }

    body.layout-sidebar>footer {
        grid-area: footer;
    }

    /* Mobile-first scroll shell */
    body.layout-scroll {
        display: block;
    }

    body.layout-scroll>main,
    body.layout-scroll>footer {
        padding-inline: 0.75rem;
    }

    body.layout-scroll>main {
        margin-inline: auto;
        padding-block: var(--space-4) var(--space-6);
        width: min(100%, var(--container-narrow));
    }

    .stack {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .stack-sm {
        gap: var(--space-2);
    }

    .cluster {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .split {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
        justify-content: space-between;
    }

    .split-start {
        align-items: flex-start;
    }

    .grid {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    }

    .grid-tight {
        gap: var(--space-2);
    }

    .with-sidebar {
        align-items: start;
        display: grid;
        gap: var(--space-5);
        grid-template-columns: minmax(10rem, 12rem) minmax(0, 1fr);
    }

    /* Responsive shell collapse */
    @media (max-width: 48rem) {

        body.layout-topbar,
        body.layout-sidebar {
            display: block;
        }

        body.layout-topbar>header,
        body.layout-sidebar>header,
        body.layout-scroll>header {
            padding: var(--space-3) 0.75rem;
            position: static;
            width: auto;
        }

        body.layout-topbar>main,
        body.layout-sidebar>main {
            padding: var(--space-4) 0.75rem var(--space-6);
            width: auto;
        }

        body.layout-topbar>footer,
        body.layout-sidebar>footer,
        body.layout-scroll>main,
        body.layout-scroll>footer {
            width: auto;
        }

        body.layout-sidebar>.sidebar {
            border-bottom: 1px solid var(--border-strong);
            border-right: 0;
            height: auto;
            padding: var(--space-3) 0.75rem;
            position: static;
        }

        .with-sidebar {
            grid-template-columns: 1fr;
        }

        .split {
            align-items: stretch;
            flex-direction: column;
        }

    }

    /* Opt-in surface */
    .surface {
        background: var(--surface-elev-2);
        border: 1px solid var(--elev-border-2);
        border-radius: var(--radius-3);
        box-shadow: var(--elev-shadow-2);
        padding: var(--space-5);
    }

}

@layer components {

    /* Navigation */
    nav {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        justify-content: space-between;
    }

    nav a {
        border-radius: var(--radius-2);
        color: var(--text);
        text-decoration: none;
    }

    nav a:visited {
        color: var(--text);
    }

    nav a:hover {
        color: var(--primary);
    }

    nav ul,
    nav ol {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav li {
        margin: 0;
        max-width: none;
    }

    body.layout-sidebar>.sidebar nav a:not([role="button"]):not(.brand) {
        align-items: center;
        background: transparent;
        border: 0;
        border-left: 0.25rem solid transparent;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        font-weight: 700;
        min-height: 2.15rem;
        min-width: 0;
        padding: 0.46rem var(--space-4) 0.46rem calc(var(--space-4) - 0.25rem);
        user-select: none;
    }

    body.layout-sidebar>.sidebar nav a:not([role="button"]):not(.brand) {
        justify-content: flex-start;
        text-align: left;
    }

    body.layout-sidebar>.sidebar nav a[aria-current="page"]:not([role="button"]):not(.brand) {
        background: color-mix(in srgb, var(--primary) 8%, transparent);
        border-left-color: var(--primary);
        color: var(--primary-active);
    }

    body.layout-sidebar>.sidebar nav a[aria-current="page"]:not([role="button"]):not(.brand) {
        box-shadow: none;
    }

    body.layout-sidebar>.sidebar nav a:not([role="button"]):not(.brand):hover {
        background: color-mix(in srgb, var(--primary) 7%, var(--surface));
        color: var(--primary);
    }

    body.layout-topbar>header nav a:not([role="button"]),
    body.layout-sidebar>header nav a:not([role="button"]),
    body.layout-scroll>header nav a:not([role="button"]) {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: var(--radius-1);
        box-shadow: none;
        display: inline-flex;
        font-weight: 700;
        min-height: 2rem;
        min-width: 0;
        padding: 0.35rem 0.55rem;
        text-align: left;
    }

    body.layout-topbar>header nav a:not([role="button"]):hover,
    body.layout-sidebar>header nav a:not([role="button"]):hover,
    body.layout-scroll>header nav a:not([role="button"]):hover {
        background: color-mix(in srgb, var(--primary) 10%, transparent);
        color: var(--primary);
    }

    body.layout-topbar>header nav a[aria-current="page"],
    body.layout-sidebar>header nav a[aria-current="page"],
    body.layout-scroll>header nav a[aria-current="page"] {
        background: transparent;
        color: var(--primary);
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 0.38rem;
    }

    body.layout-topbar>header nav .brand,
    body.layout-sidebar>header nav .brand,
    body.layout-scroll>header nav .brand {
        letter-spacing: 0;
        padding-left: 0;
    }

    body.layout-topbar>header nav .brand:hover,
    body.layout-sidebar>header nav .brand:hover,
    body.layout-scroll>header nav .brand:hover {
        background: transparent;
    }

    body.layout-topbar>header nav .brand strong,
    body.layout-sidebar>header nav .brand strong,
    body.layout-scroll>header nav .brand strong {
        color: inherit;
    }

    body.layout-sidebar>.sidebar nav,
    body.layout-sidebar>.sidebar nav ul,
    body.layout-sidebar>.sidebar nav ol {
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
    }

    body.layout-sidebar>.sidebar nav a {
        width: 100%;
    }

    button.classic-nav-toggle {
        display: none;
    }

    button.classic-nav-toggle::before {
        background:
            linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
            linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
            linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
        content: "";
        display: block;
        height: 0.8rem;
        width: 1.1rem;
    }

    button.classic-nav-toggle[aria-expanded="true"] {
        background: linear-gradient(180deg, var(--button-face-dark), #b2b2b2 55%, #c4c4c4);
        box-shadow:
            1px 1px 2px rgba(0, 0, 0, 0.35) inset,
            -1px -1px 0 rgba(255, 255, 255, 0.3) inset;
    }

    @media (min-width: 48.001rem) {

        body.layout-topbar>header nav.classic-nav-enhanced button.classic-nav-toggle,
        body.layout-sidebar>header nav.classic-nav-enhanced button.classic-nav-toggle,
        body.layout-scroll>header nav.classic-nav-enhanced button.classic-nav-toggle {
            display: none;
        }
    }

    [aria-label="breadcrumb"] ol {
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        list-style: none;
        padding-left: 0;
    }

    [aria-label="breadcrumb"] li {
        margin: 0;
    }

    [aria-label="breadcrumb"] li+li::before {
        color: var(--border-strong);
        content: "/";
        margin-right: var(--space-2);
    }

    /* Article panels */
    article {
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-3);
        box-shadow: var(--shadow-raised-outer);
        display: flex;
        flex-direction: column;
        overflow: clip;
        position: relative;
    }

    article::after {
        border-radius: calc(var(--radius-3) - 1px);
        box-shadow: var(--bevel-inset);
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
    }

    article>header,
    article>footer {
        background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, var(--highlight)), color-mix(in srgb, var(--surface-2) 70%, var(--surface)));
        border-color: color-mix(in srgb, var(--border) 72%, var(--surface));
        padding-inline: var(--space-5);
    }

    article>header {
        border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, var(--surface));
        margin-bottom: var(--space-4);
        padding-block: var(--space-4);
    }

    article>footer {
        border-top: 1px solid color-mix(in srgb, var(--border) 72%, var(--surface));
        margin-top: auto;
        padding-block: var(--space-4);
    }

    article> :has(+ footer) {
        margin-block-end: var(--space-5);
    }

    article> :last-child,
    section> :last-child,
    aside> :last-child {
        margin-bottom: 0;
    }

    article> :not(header, footer) {
        margin-inline: var(--space-5);
    }

    article> :first-child:not(header) {
        margin-block-start: var(--space-5);
    }

    article> :last-child:not(footer) {
        margin-block-end: var(--space-5);
    }

    /* Buttons */
    /* OS9 platinum: thin uniform border, shading lives inside the outline. */
    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button) {
        align-items: center;
        appearance: none;
        background: linear-gradient(180deg, var(--button-face-light), var(--button-face) 46%, var(--button-face-mid));
        border: 1px solid var(--button-groove);
        border-radius: var(--radius-3);
        box-shadow:
            1px 1px 0 rgba(255, 255, 255, 0.85) inset,
            -1px -1px 0 rgba(0, 0, 0, 0.12) inset,
            1px 1px 0 rgba(0, 0, 0, 0.16);
        color: var(--text);
        display: inline-flex;
        font-weight: 700;
        gap: var(--space-2);
        justify-content: center;
        line-height: 1.2;
        min-height: 1.9rem;
        min-width: 2.75rem;
        padding: 0.18rem 0.8rem 0.22rem;
        text-align: center;
        text-decoration: none;
        user-select: none;
    }

    :is(a[role="button"], a.button):visited {
        color: var(--text);
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button):hover {
        background: linear-gradient(180deg, var(--highlight), var(--button-face-hover) 46%, var(--button-face));
        color: var(--text);
        text-decoration: none;
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button):active {
        background: linear-gradient(180deg, var(--button-face-dark), #b2b2b2 55%, #c4c4c4);
        box-shadow:
            1px 1px 2px rgba(0, 0, 0, 0.35) inset,
            -1px -1px 0 rgba(255, 255, 255, 0.3) inset;
        transform: translate(1px, 1px);
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button)[aria-pressed="true"] {
        background: linear-gradient(180deg, var(--button-face-dark), #b2b2b2 55%, #c4c4c4);
        box-shadow:
            1px 1px 2px rgba(0, 0, 0, 0.35) inset,
            -1px -1px 0 rgba(255, 255, 255, 0.3) inset;
        transform: translate(1px, 1px);
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).secondary {
        background: linear-gradient(180deg, #e8eef4, #d0d9e1 46%, #bcc6cf);
        color: var(--text);
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).secondary:hover {
        background: linear-gradient(180deg, #f3f8fc, #dde6ed 46%, #c9d3dc);
        color: var(--text);
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).contrast {
        background: linear-gradient(180deg, #4a4a4a, #333333 46%, #232323);
        border-color: #1a1a1a;
        box-shadow:
            1px 1px 0 rgba(255, 255, 255, 0.18) inset,
            -1px -1px 0 rgba(0, 0, 0, 0.4) inset,
            1px 1px 0 rgba(0, 0, 0, 0.16);
        color: #ffffff;
        text-shadow: 0 -1px 0 #000000;
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).outline {
        background: linear-gradient(180deg, #eef3fd, #dbe5f8 46%, #c2d1ec);
        color: #0d2d61;
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).secondary:active {
        background: linear-gradient(180deg, #8f9aa4, #a7b1ba 55%, var(--button-secondary-face-pressed));
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).outline:active {
        background: linear-gradient(180deg, #7f99c4, var(--button-blue-mid) 55%, #c9d8f2);
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).contrast:active {
        background: linear-gradient(180deg, #181818, #262626 55%, #333333);
        box-shadow:
            1px 1px 2px rgba(0, 0, 0, 0.6) inset,
            -1px -1px 0 rgba(255, 255, 255, 0.12) inset;
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).ghost {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        color: var(--primary);
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).ghost:active {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    /* OS9 ring on the form's true default button, the one Enter triggers (HIG: 3px ring, 1px gap) */
    :is(button, input[type="submit"]):default {
        outline: 2px solid var(--button-edge);
        outline-offset: 1px;
    }

    /* Focused default button: ring recolors to the focus blue instead of stacking */
    :is(button, input[type="submit"]):default:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--focus) 78%, transparent);
        outline-offset: 1px;
    }

    :is(button, [role="button"], .button)[aria-busy="true"] {
        pointer-events: none;
        position: relative;
    }

    :is(button, [role="button"], .button)[aria-busy="true"]::before {
        animation: classic-spin 0.8s linear infinite;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        content: "";
        height: 1em;
        width: 1em;
    }

    @keyframes classic-spin {
        to {
            transform: rotate(1turn);
        }
    }

    /* Forms */
    form {
        display: grid;
        grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
        align-items: center;
        column-gap: var(--space-3);
        row-gap: var(--space-3);
        text-align: right;
    }

    form> :is(h1, h2, h3, h4, h5, h6, p, fieldset, article, section, hr, .toolbar, .notice, [role="alert"]) {
        grid-column: 1 / -1;
    }

    fieldset> :is(h1, h2, h3, h4, h5, h6, p, hr, .field, .field-row, .toolbar, .notice, [role="alert"]) {
        grid-column: 1 / -1;
    }

    form>small,
    fieldset>small {
        grid-column: 2;
    }

    /* Action rows: right-aligned in the control column with the default
       action rightmost (classic HIG dialog layout). Write secondary buttons
       first in markup so visual order matches tab order. */
    form>.cluster,
    fieldset>.cluster {
        grid-column: 2;
        justify-content: flex-end;
        justify-self: stretch;
        text-align: left;
    }

    form> :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button) {
        grid-column: 2;
        justify-self: start;
    }

    form>br,
    fieldset>br,
    datalist {
        display: none;
    }

    label {
        color: var(--muted-strong);
        display: block;
        font-weight: 700;
        margin-bottom: var(--space-2);
    }

    form label {
        margin-bottom: 0;
    }

    form>label:not(.check, .switch),
    fieldset>label:not(.check, .switch),
    .field>label {
        align-self: start;
        justify-self: end;
        padding-top: 0.58rem;
        text-align: right;
    }

    fieldset {
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-3);
        box-shadow:
            1px 1px 0 var(--highlight) inset,
            -1px -1px 0 var(--lowlight) inset;
        display: grid;
        grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
        align-items: center;
        column-gap: var(--space-3);
        row-gap: var(--space-3);
        margin: 0 0 var(--space-4);
        padding: var(--space-5);
        text-align: right;
    }

    legend {
        color: var(--text);
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: var(--space-2);
        margin-right: auto;
        padding-inline: var(--space-2);
        text-align: left;
    }

    /* Sunken well: depth comes from the inset shadow, not the border */
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]),
    select,
    textarea {
        appearance: none;
        background: #ffffff;
        border: 1px solid var(--border);
        border-radius: 0;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22) inset;
        color: var(--text);
        font-weight: 400;
        min-height: 1.9rem;
        padding: 0.3rem 0.5rem;
        text-align: left;
        width: 100%;
    }

    form> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter),
    fieldset> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter),
    .field> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter) {
        grid-column: 2;
    }

    textarea {
        min-height: 8rem;
        resize: vertical;
    }

    /* OS9 popup button: single flat face, crisp edge, inset divider before the arrows */
    select {
        background:
            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M4 1 L7.2 5.4 H0.8 Z" fill="%23050505"/><path d="M4 13 L0.8 8.6 H7.2 Z" fill="%23050505"/></svg>') calc(100% - 0.55rem) 50% / 0.5rem 0.9rem no-repeat,
            linear-gradient(180deg, var(--button-groove), var(--button-groove)) calc(100% - 1.6rem) 50% / 1px calc(100% - 0.55rem) no-repeat,
            #f4f4f4;
        border: 1px solid var(--button-edge);
        border-radius: var(--radius-1);
        box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
        padding-right: 2rem;
    }

    /* Empty well when off; button-crisp edge and hard shadow (empty is not disabled) */
    /* Type-identifying icons at the right edge, like native date/time pickers.
       Every glyph's ink ends at the same viewBox edge so they align vertically. */
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"] {
        padding-right: 1.7rem;
    }

    input[type="search"] {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="4.6" cy="4.6" r="3.1" fill="none" stroke="%23878787" stroke-width="1.4"/><line x1="6.9" y1="6.9" x2="9.5" y2="9.5" stroke="%23878787" stroke-width="1.6"/></svg>') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff;
    }

    /* With content, the x takes the magnifier's place (requires a placeholder
       attribute); the native cancel button lands exactly on top of it when
       focused. Gated to engines that actually have a cancel button so the x is
       never a dead control (Firefox keeps the magnifier). */
    @supports selector(::-webkit-search-cancel-button) {
        input[type="search"][placeholder]:not(:placeholder-shown) {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M2.5 1.8 L9.5 8.8 M9.5 1.8 L2.5 8.8" stroke="%23878787" stroke-width="1.5"/></svg>');
        }
    }

    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M2.5 1.8 L9.5 8.8 M9.5 1.8 L2.5 8.8" stroke="%23878787" stroke-width="1.5"/></svg>') center / 1rem no-repeat #ffffff;
        height: 1rem;
        margin-right: -1.2rem;
        width: 1rem;
    }

    input[type="number"] {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3.6 0.8 L3 9.2 M7.4 0.8 L6.8 9.2 M1 3.4 H9.5 M0.8 6.6 H9.3" stroke="%23878787" stroke-width="1.1" fill="none"/></svg>') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff;
    }

    input[type="email"] {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><text x="9.7" y="8.4" font-family="Verdana,sans-serif" font-size="10" font-weight="bold" text-anchor="end" fill="%23878787">@</text></svg>') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff;
    }

    input[type="tel"] {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M2.9 0.9 C1.5 1.7 1.4 3.5 2.7 5.6 C4 7.7 6.1 9.4 8 9.6 C9.1 9.7 9.5 8.9 9.5 8.1 L7.6 6.7 L6.5 7.4 C5.6 6.9 4.2 5.6 3.7 4.5 L4.6 3.5 L3.6 1 Z" fill="%23878787"/></svg>') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff;
    }

    input[type="url"] {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4.4" fill="none" stroke="%23878787" stroke-width="1.1"/><ellipse cx="5" cy="5" rx="2" ry="4.4" fill="none" stroke="%23878787" stroke-width="1.1"/><path d="M0.7 5 H9.3 M1.5 2.7 H8.5 M1.5 7.3 H8.5" stroke="%23878787" stroke-width="1.1"/></svg>') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff;
    }

    input[type="password"] {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="2.8" cy="5" r="2.1" fill="none" stroke="%23878787" stroke-width="1.3"/><path d="M4.9 5 H9.5 M7.6 5 V7 M9.3 5 V6.6" stroke="%23878787" stroke-width="1.3" fill="none"/></svg>') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff;
    }

    /* Datalist comboboxes get the popup triangle, not a calendar. The native
       indicator draws its own arrow as content, so it is hidden and the
       triangle lives on the input like the other type icons. */
    input[list] {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M5 8.2 L1 3 H9 Z" fill="%23878787"/></svg>') calc(100% - 0.5rem) 50% / 0.75rem no-repeat #ffffff;
        padding-right: 1.7rem;
    }

    /* The native arrow only appears on hover/focus and is named differently
       across engines; hide both spellings. */
    input[list]::-webkit-calendar-picker-indicator,
    input[list]::-webkit-list-button {
        display: none !important;
    }

    /* Date-like types get a classic calendar glyph; time gets a clock */
    input:is([type="date"], [type="month"], [type="week"], [type="datetime-local"])::-webkit-calendar-picker-indicator {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><rect x="0.7" y="1.9" width="8.8" height="7.4" fill="none" stroke="%23878787" stroke-width="1.2"/><path d="M0.7 4.3 H9.5" stroke="%23878787" stroke-width="1.2"/><line x1="3" y1="0.6" x2="3" y2="2.9" stroke="%23878787" stroke-width="1.2"/><line x1="7.2" y1="0.6" x2="7.2" y2="2.9" stroke="%23878787" stroke-width="1.2"/><path d="M2.4 5.9 H4 M6 5.9 H7.7 M2.4 7.7 H4 M6 7.7 H7.7" stroke="%23878787" stroke-width="1.2"/></svg>') right 50% / 1rem no-repeat;
        height: 1rem;
        margin: 0;
        opacity: 1;
        width: 1rem;
    }

    input[type="time"]::-webkit-calendar-picker-indicator {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4.4" fill="none" stroke="%23878787" stroke-width="1.2"/><path d="M5 2.3 V5 L7 6.4" stroke="%23878787" stroke-width="1.2" fill="none"/></svg>') right 50% / 1rem no-repeat;
        height: 1rem;
        margin: 0;
        opacity: 1;
        width: 1rem;
    }

    /* Number spinner as platinum little arrows */
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        background:
            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M4 1.5 L7 5.5 H1 Z" fill="%23303030"/><path d="M4 12.5 L1 8.5 H7 Z" fill="%23303030"/></svg>') center / 0.4rem 0.8rem no-repeat,
            linear-gradient(90deg, var(--border), var(--border)) 0 0 / 1px 100% no-repeat,
            linear-gradient(180deg, #f2f2f2, #d8d8d8);
        height: 100%;
        width: 1.2rem;
    }

    /* Square color swatch inside the well */
    input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    input[type="color"]::-webkit-color-swatch {
        border: 1px solid var(--border-strong);
        border-radius: 0;
    }

    input[type="checkbox"],
    input[type="radio"] {
        appearance: none;
        background: linear-gradient(135deg, #ffffff, #e8e8e8);
        border: 1px solid var(--button-edge);
        box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
        flex: 0 0 auto;
        height: 1rem;
        margin: 0;
        position: relative;
        width: 1rem;
    }

    input[type="checkbox"] {
        border-radius: var(--radius-1);
    }

    input[type="radio"] {
        border-radius: 50%;
    }

    /* Bold black check that overshoots the box, like the OS9 original */
    input[type="checkbox"]:checked::after {
        border: solid #050505;
        border-width: 0 0.16rem 0.16rem 0;
        content: "";
        height: 0.72rem;
        left: 0.27rem;
        position: absolute;
        top: -0.1rem;
        transform: rotate(40deg);
        width: 0.32rem;
    }

    input[type="radio"]:checked::after {
        background: #050505;
        border-radius: 50%;
        content: "";
        inset: 0.22rem;
        position: absolute;
    }

    input[type="range"] {
        appearance: none;
        background: transparent;
        min-height: 1.6rem;
        width: 100%;
    }

    input[type="range"]::-webkit-slider-runnable-track {
        background: linear-gradient(180deg, #a8a8a8, #d6d6d6);
        border: 1px solid var(--border-strong);
        border-radius: 0;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset;
        height: 0.3rem;
    }

    /* Platinum "home plate" thumb drawn as SVG so every edge keeps its outline */
    input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 14"><path d="M2 .5 H10 Q11.5 .5 11.5 2 V8 L6 13.5 L.5 8 V2 Q.5 .5 2 .5 Z" fill="%23e2e2e2" stroke="%231c1c1c" stroke-width=".6" stroke-linejoin="round"/><path d="M2 1.4 H10 Q10.6 1.4 10.6 2 V7.6 L6 12.2 L1.4 7.6 V2 Q1.4 1.4 2 1.4 Z" fill="%23f4f4f4"/><g stroke="%239a9a9a" stroke-width=".9"><line x1="4" y1="3" x2="4" y2="7.5"/><line x1="6" y1="3" x2="6" y2="7.5"/><line x1="8" y1="3" x2="8" y2="7.5"/></g></svg>') center / contain no-repeat;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35));
        height: 1.4rem;
        margin-top: calc(-0.45rem - 1px);
        width: 1.2rem;
    }

    input[type="range"]::-moz-range-track {
        background: linear-gradient(180deg, #a8a8a8, #d6d6d6);
        border: 1px solid var(--border-strong);
        border-radius: 0;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset;
        height: 0.3rem;
    }

    input[type="range"]::-moz-range-thumb {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 14"><path d="M2 .5 H10 Q11.5 .5 11.5 2 V8 L6 13.5 L.5 8 V2 Q.5 .5 2 .5 Z" fill="%23e2e2e2" stroke="%231c1c1c" stroke-width=".6" stroke-linejoin="round"/><path d="M2 1.4 H10 Q10.6 1.4 10.6 2 V7.6 L6 12.2 L1.4 7.6 V2 Q1.4 1.4 2 1.4 Z" fill="%23f4f4f4"/><g stroke="%239a9a9a" stroke-width=".9"><line x1="4" y1="3" x2="4" y2="7.5"/><line x1="6" y1="3" x2="6" y2="7.5"/><line x1="8" y1="3" x2="8" y2="7.5"/></g></svg>') center / contain no-repeat;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35));
        height: 1.4rem;
        width: 1.2rem;
    }

    /* File chooser button gets the classic button chrome */
    input[type="file"]::file-selector-button {
        background: linear-gradient(180deg, var(--button-face-light), var(--button-face) 46%, var(--button-face-mid));
        border: 1px solid var(--button-groove);
        border-radius: var(--radius-3);
        box-shadow:
            1px 1px 0 rgba(255, 255, 255, 0.85) inset,
            -1px -1px 0 rgba(0, 0, 0, 0.12) inset,
            1px 1px 0 rgba(0, 0, 0, 0.16);
        color: var(--text);
        font: inherit;
        font-weight: 700;
        margin-right: 0.6rem;
        padding: 0.05rem 0.6rem;
    }

    input[type="color"] {
        box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
        padding: 0.15rem;
    }

    input::placeholder,
    textarea::placeholder {
        color: color-mix(in srgb, var(--muted) 72%, transparent);
    }

    input:disabled,
    select:disabled,
    textarea:disabled,
    button:disabled,
    [aria-disabled="true"] {
        cursor: not-allowed;
        opacity: 0.58;
    }

    input[aria-invalid="true"],
    select[aria-invalid="true"],
    textarea[aria-invalid="true"] {
        border: 2px solid var(--invalid);
    }

    /* Native constraint validation, without attributes; only after the user
       has interacted (kept as its own rule so unsupporting engines do not
       drop the aria rule above) */
    input:user-invalid,
    select:user-invalid,
    textarea:user-invalid {
        border: 2px solid var(--invalid);
    }

    input[aria-invalid="false"],
    select[aria-invalid="false"],
    textarea[aria-invalid="false"] {
        border: 2px solid var(--valid);
    }

    /* Field messages: pair the border tint with visible text */
    small[data-variant] {
        color: var(--variant);
        font-weight: 700;
    }

    /* OS9 focus band: hugs the control frame instead of floating off it */
    :focus-visible {
        outline: 3px solid color-mix(in srgb, var(--focus) 78%, transparent);
        outline-offset: 0;
    }

    /* Form helpers */
    .field {
        align-items: center;
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
        column-gap: var(--space-3);
        row-gap: var(--space-1);
        margin-bottom: 0;
    }

    .field-row {
        display: contents;
    }

    .field>small,
    .field>p {
        grid-column: 2;
        margin-bottom: 0;
        text-align: left;
    }

    .check {
        align-items: center;
        color: var(--text);
        display: flex;
        font-weight: 500;
        gap: var(--space-2);
        grid-column: 2;
        justify-self: start;
        margin: 0;
        text-align: left;
    }

    .switch {
        align-items: center;
        display: inline-flex;
        gap: var(--space-2);
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }

    /* Integer-pixel geometry keeps the 1px thumb gap even on every side */
    .switch input {
        appearance: none;
        background: #ffffff;
        border: 1px solid var(--button-edge);
        border-radius: 5px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22) inset;
        height: 18px;
        position: relative;
        width: 40px;
    }

    .switch input:checked::after {
        content: none;
    }

    .switch input::before {
        background: linear-gradient(135deg, #f8f8f8, #d6d6d6);
        border: 1px solid var(--button-edge);
        border-radius: 5px;
        box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
        content: "";
        height: 14px;
        left: 1px;
        position: absolute;
        top: 1px;
        transition: transform 70ms ease;
        width: 14px;
    }

    .switch input:checked {
        background: var(--primary);
    }

    .switch input:checked::before {
        transform: translateX(22px); /* 40px track - borders - gaps - 14px thumb */
    }

    /* Feedback and status */
    [role="alert"],
    .notice {
        background: color-mix(in srgb, var(--info) 10%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--info) 45%, var(--border));
        border-left: 0.35rem solid var(--info);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-tight);
        padding: var(--space-4);
    }

    [data-variant="success"] {
        --variant: var(--success);
    }

    [data-variant="warning"] {
        --variant: var(--warning);
    }

    [data-variant="danger"] {
        --variant: var(--danger);
    }

    [data-variant="info"] {
        --variant: var(--info);
    }

    .notice[data-variant],
    [role="alert"][data-variant] {
        background: color-mix(in srgb, var(--variant) 10%, var(--surface));
        border-color: color-mix(in srgb, var(--variant) 45%, var(--border));
        border-left-color: var(--variant);
    }

    .badge {
        align-items: center;
        background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
        border: 1px solid var(--border);
        border-radius: var(--radius-1);
        color: var(--muted-strong);
        display: inline-flex;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        min-height: 1.35rem;
        padding: 0.18rem 0.48rem;
        white-space: nowrap;
    }

    .badge[data-variant] {
        background: color-mix(in srgb, var(--variant) 7%, var(--surface));
        border-color: color-mix(in srgb, var(--variant) 34%, var(--border));
        color: var(--variant);
    }

    .status {
        align-items: center;
        display: inline-flex;
        gap: var(--space-2);
    }

    .status::before {
        background: var(--success);
        border-radius: 50%;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 14%, transparent);
        content: "";
        height: 0.55rem;
        width: 0.55rem;
    }

    .status[data-variant]::before {
        background: var(--variant);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--variant) 14%, transparent);
    }

    /* Disclosure and meters */
    details {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-tight);
        padding: var(--space-3) var(--space-4);
    }

    details+details {
        margin-top: var(--space-2);
    }

    summary {
        color: var(--muted-strong);
        font-weight: 700;
    }

    details[open] summary {
        margin-bottom: var(--space-3);
    }

    progress,
    meter {
        accent-color: var(--primary);
        display: block;
        height: 0.7rem;
        width: 100%;
    }

    progress {
        appearance: none;
        background: #ffffff;
        border: 1px solid var(--border);
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22) inset;
    }

    progress::-webkit-progress-bar {
        background: transparent;
    }

    progress::-webkit-progress-value {
        background: linear-gradient(180deg, #8caade, var(--primary) 55%, #16345e);
        border-right: 1px solid #0d2d61;
        transition: width 150ms ease;
    }

    progress::-moz-progress-bar {
        background: linear-gradient(180deg, #8caade, var(--primary) 55%, #16345e);
        border-right: 1px solid #0d2d61;
    }

    /* Indeterminate: platinum barber pole */
    progress:indeterminate::-webkit-progress-bar {
        animation: classic-barber 1.2s linear infinite;
        background: repeating-linear-gradient(
            135deg,
            var(--primary) 0 0.6rem,
            #8caade 0.6rem 1.2rem
        );
        background-size: 1.7rem 100%;
    }

    progress:indeterminate::-moz-progress-bar {
        animation: classic-barber 1.2s linear infinite;
        background: repeating-linear-gradient(
            135deg,
            var(--primary) 0 0.6rem,
            #8caade 0.6rem 1.2rem
        );
        background-size: 1.7rem 100%;
    }

    @keyframes classic-barber {
        to {
            background-position: 1.7rem 0;
        }
    }

    /* WebKit meters keep native appearance (appearance:none breaks the value
       pseudo-elements); the sunken well is drawn on the bar pseudo instead. */
    meter::-webkit-meter-bar {
        background: #ffffff;
        border: 1px solid var(--border);
        border-radius: 0;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22) inset;
        height: 0.7rem;
    }

    meter::-webkit-meter-optimum-value {
        background: linear-gradient(180deg, #7fb389, var(--success) 55%, #1c4426);
    }

    meter::-webkit-meter-suboptimum-value {
        background: linear-gradient(180deg, #f6e08a, #e3b71f 55%, #7a5c05);
    }

    meter::-webkit-meter-even-less-good-value {
        background: linear-gradient(180deg, #cf7f7f, var(--danger) 55%, #4d1414);
    }

    /* Firefox draws the well on the element and cannot color by zone */
    @supports selector(::-moz-meter-bar) {
        meter {
            appearance: none;
            background: #ffffff;
            border: 1px solid var(--border);
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22) inset;
        }
    }

    meter::-moz-meter-bar {
        background: linear-gradient(180deg, #7fb389, var(--success) 55%, #1c4426);
    }

    /* Tabs: ARIA roles only. The strip paints its baseline inside the padding
       box (overflow clipping eats anything that hangs below), inactive tabs
       carry a matching bottom border, the selected tab has none - its white
       body connects through to the panel. */
    [role="tablist"] {
        align-items: flex-end;
        background: linear-gradient(var(--border-strong), var(--border-strong)) 0 100% / 100% 1px no-repeat;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 0;
    }

    [role="tablist"] [role="tab"] {
        appearance: none;
        background: linear-gradient(180deg, #f0f0f0, #dcdcdc 60%, #cecece);
        border: 1px solid var(--border-strong);
        border-radius: 8px 8px 0 0;
        box-shadow: none;
        color: var(--muted-strong);
        flex: 0 0 auto;
        font: inherit;
        font-weight: 400;
        line-height: 1.2;
        margin-right: -1px;
        min-height: 0;
        min-width: 0;
        padding: 0.2rem 0.85rem;
        text-decoration: none;
        white-space: nowrap;
    }

    [role="tablist"] [role="tab"]:hover {
        background: linear-gradient(180deg, #f8f8f8, #e6e6e6 60%, #d8d8d8);
        color: var(--text);
    }

    [role="tablist"] [role="tab"] {
        border-bottom: 1px solid var(--border-strong);
    }

    [role="tablist"] [role="tab"][aria-selected="true"] {
        background: var(--surface);
        border-bottom: 0;
        color: var(--text);
        font-weight: 700;
        padding-bottom: calc(0.2rem + 1px);
        position: relative;
    }

    /* Tab panel: regular-panel chrome, but a flat white face so the selected
       tab connects seamlessly */
    [role="tabpanel"] {
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-3);
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.24);
        padding: var(--space-5);
    }

    [role="tablist"] + [role="tabpanel"] {
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: 0;
    }

    .toolbar {
        align-items: center;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-3);
        box-shadow: var(--shadow-tight);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        padding: var(--space-2);
    }


    /* Responsive component behavior */
    @media (max-width: 48rem) {

        body.layout-topbar>header nav,
        body.layout-topbar>header nav ul,
        body.layout-topbar>header nav ol,
        body.layout-sidebar>header nav,
        body.layout-sidebar>header nav ul,
        body.layout-sidebar>header nav ol,
        body.layout-scroll>header nav,
        body.layout-scroll>header nav ul,
        body.layout-scroll>header nav ol {
            align-items: stretch;
            flex-direction: column;
            justify-content: flex-start;
            width: 100%;
        }

        body.layout-topbar>header nav a,
        body.layout-sidebar>header nav a,
        body.layout-scroll>header nav a {
            display: block;
        }

        body.layout-topbar>header nav.classic-nav-enhanced,
        body.layout-sidebar>header nav.classic-nav-enhanced,
        body.layout-scroll>header nav.classic-nav-enhanced {
            align-items: center;
            display: grid;
            gap: var(--space-2);
            grid-template-columns: minmax(0, 1fr) auto;
        }

        body.layout-topbar>header nav.classic-nav-enhanced .brand,
        body.layout-sidebar>header nav.classic-nav-enhanced .brand,
        body.layout-scroll>header nav.classic-nav-enhanced .brand {
            display: inline-flex;
            min-width: 0;
        }

        body.layout-topbar>header nav.classic-nav-enhanced>ul,
        body.layout-topbar>header nav.classic-nav-enhanced>ol,
        body.layout-sidebar>header nav.classic-nav-enhanced>ul,
        body.layout-sidebar>header nav.classic-nav-enhanced>ol,
        body.layout-scroll>header nav.classic-nav-enhanced>ul,
        body.layout-scroll>header nav.classic-nav-enhanced>ol {
            grid-column: 1 / -1;
        }

        body.layout-topbar>header nav.classic-nav-enhanced .classic-nav-toggle,
        body.layout-sidebar>header nav.classic-nav-enhanced .classic-nav-toggle,
        body.layout-scroll>header nav.classic-nav-enhanced .classic-nav-toggle {
            display: inline-flex;
            justify-self: end;
            min-height: 2.2rem;
            padding: 0.38rem 0.55rem;
        }

        body.layout-topbar>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ul,
        body.layout-topbar>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ol,
        body.layout-sidebar>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ul,
        body.layout-sidebar>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ol,
        body.layout-scroll>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ul,
        body.layout-scroll>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ol {
            display: none;
        }

        body.layout-topbar>header nav.classic-nav-enhanced li a,
        body.layout-sidebar>header nav.classic-nav-enhanced li a,
        body.layout-scroll>header nav.classic-nav-enhanced li a {
            width: 100%;
        }

        .toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .toolbar button,
        .toolbar [role="button"],
        .toolbar .button {
            width: 100%;
        }

        form,
        fieldset,
        .field {
            grid-template-columns: 1fr;
            text-align: left;
        }

        form>small,
        fieldset>small,
        .field>small,
        .field>p,
        .check,
        .switch,
        form>.cluster,
        fieldset>.cluster,
        form> :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button),
        form> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter),
        fieldset> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter),
        .field> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter) {
            grid-column: 1;
        }

        form>label:not(.check, .switch),
        fieldset>label:not(.check, .switch),
        .field>label {
            justify-self: start;
            padding-top: 0;
            text-align: left;
        }
    }

    /* Menus and pagination */
    .menu {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-raised);
        list-style: none;
        margin: 0;
        padding: var(--space-2);
    }

    .menu li {
        margin: 0;
        max-width: none;
    }

    .menu a,
    .menu button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: var(--radius-1);
        box-shadow: none;
        color: var(--text);
        display: flex;
        justify-content: space-between;
        min-height: 2.15rem;
        padding: 0.38rem 0.55rem;
        text-decoration: none;
        width: 100%;
    }

    .menu a:visited {
        color: var(--text);
    }

    .menu a:hover,
    .menu button:hover {
        background: var(--surface-2);
        color: var(--primary);
    }

    .pagination {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        list-style: none;
        padding-left: 0;
    }

    .pagination li {
        margin: 0;
    }

    .pagination a {
        align-items: center;
        background: var(--button-face);
        border: 2px solid;
        border-color: var(--highlight) var(--button-edge) var(--button-edge) var(--highlight);
        border-radius: var(--radius-3);
        box-shadow:
            1px 1px 0 var(--button-face-light) inset,
            -1px -1px 0 var(--button-groove) inset;
        display: inline-flex;
        justify-content: center;
        min-height: var(--control-height);
        min-width: 2.75rem;
        padding: 0.5rem 0.9rem 0.56rem;
        text-decoration: none;
        user-select: none;
    }

    .pagination a:visited {
        color: var(--text);
    }

    .pagination a[aria-current="page"] {
        background: var(--surface);
        border-color: color-mix(in srgb, var(--primary) 22%, var(--border-strong));
        box-shadow:
            1px 1px 0 color-mix(in srgb, var(--button-groove) 45%, transparent) inset,
            -1px -1px 0 var(--highlight) inset;
        color: var(--primary);
    }

    /* Window chrome and command palette */
    .window {
        background: var(--surface-elev-3);
        border: 1px solid var(--elev-border-3);
        border-radius: var(--radius-3);
        box-shadow: var(--elev-shadow-3);
        overflow: hidden;
    }

    .window-titlebar {
        align-items: center;
        background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 24%, var(--highlight)), color-mix(in srgb, var(--primary) 10%, var(--surface-2)));
        border-bottom: 1px solid color-mix(in srgb, var(--primary) 55%, var(--border));
        color: color-mix(in srgb, var(--primary) 78%, #000000);
        display: flex;
        font-size: 0.92rem;
        font-weight: 700;
        justify-content: space-between;
        letter-spacing: 0;
        padding: 0.45rem 0.7rem;
        text-transform: uppercase;
    }

    .window-pane {
        background: var(--surface);
        padding: var(--space-4);
    }

    .window-statusbar {
        background: var(--surface-2);
        border-top: 1px solid var(--border);
        color: var(--muted);
        font-size: 0.88rem;
        padding: 0.35rem 0.65rem;
    }

    dialog.classic-command-palette {
        max-width: min(42rem, calc(100vw - 1.5rem));
        padding: 0;
        width: min(42rem, calc(100vw - 1.5rem));
    }

    .classic-command-palette .window-titlebar {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.25rem 0.7rem;
    }

    .classic-command-palette .window-titlebar small {
        margin-left: auto;
        white-space: nowrap;
    }

    .classic-command-palette .menu {
        min-height: 10.5rem;
        overflow: auto;
    }

    .classic-command-palette [role="option"] {
        cursor: pointer;
    }

    .classic-command-palette [role="option"]:hover .classic-command-item {
        background: var(--button-secondary-face-hover);
    }

    .classic-command-item {
        align-items: flex-start;
        background: var(--button-secondary-face);
        border: 2px solid;
        border-color: var(--button-secondary-highlight) var(--button-secondary-edge) var(--button-secondary-edge) var(--button-secondary-highlight);
        border-radius: var(--radius-2);
        box-shadow: 1px 1px 0 var(--button-face-light) inset, -1px -1px 0 var(--button-groove) inset;
        color: var(--text);
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 0.65rem;
        justify-content: space-between;
        min-height: 2.15rem;
        padding: 0.5rem 0.65rem;
        text-align: left;
        width: 100%;
    }

    .classic-command-palette [role="option"][aria-selected="true"] .classic-command-item {
        outline: 3px solid var(--focus);
        outline-offset: 2px;
    }

    .classic-command-empty {
        align-items: center;
        border: 1px dashed var(--border);
        border-radius: var(--radius-2);
        color: var(--muted-strong);
        display: grid;
        gap: 0.35rem;
        min-height: 9rem;
        padding: var(--space-4);
        place-items: center;
        text-align: center;
    }

    /* Dialogs and app primitives */
    dialog {
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-3);
        box-shadow: 0 24px 70px var(--shadow-color);
        color: var(--text);
        max-width: min(34rem, calc(100vw - 2rem));
        padding: var(--space-5);
    }

    dialog::backdrop {
        background: rgba(20, 18, 16, 0.5);
    }

    dialog.dialog-preview {
        display: block;
        margin: 0;
        max-width: 100%;
        position: static;
        width: 100%;
    }

    .avatar {
        align-items: center;
        aspect-ratio: 1;
        background: color-mix(in srgb, var(--primary) 18%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
        border-radius: 50%;
        color: var(--primary);
        display: inline-flex;
        font-weight: 800;
        justify-content: center;
        width: 2.4rem;
    }

    .stat {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-3);
        box-shadow: var(--shadow-tight);
        padding: var(--space-4);
    }

    .stat strong {
        display: block;
        font-family: var(--font-serif);
        font-size: 2rem;
        line-height: 1;
    }

}

@layer utilities {

    /* Text helpers */
    .lead {
        color: var(--muted-strong);
        font-size: 1.16rem;
        max-width: 62ch;
    }

    .muted {
        color: var(--muted);
    }

    .compact {
        margin-bottom: var(--space-2);
    }

    .text-center {
        text-align: center;
    }

    .nowrap {
        white-space: nowrap;
    }

    /* Interaction polish */
    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button, .menu a, .menu button, .pagination a, [role="tab"], nav a) {
        transition: transform 50ms ease, box-shadow 50ms ease, filter 140ms ease, background 80ms ease, color 130ms ease;
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button, .menu a, .menu button, .pagination a, [role="tab"], nav a):hover {
        filter: saturate(1.04);
    }

    /* Press is much faster than the release so controls feel light. */
    :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button, .menu a, .menu button, .pagination a, [role="tab"], nav a):active {
        transform: translate(1px, 1px);
        transition-duration: 15ms;
    }

    @media (prefers-reduced-motion: reduce) {

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

    /* Accessibility and layout escape hatches */
    .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

}