/* The four faces, subset to Latin. Each licence sits in `fonts/`.
 *
 * `swap`, because mathematics is worth reading in a fallback face for the
 * moment the real one takes to arrive. Inter is variable: the wordmark sets
 * weights between the named ones.
 */

@font-face {
    font-family: "Libertinus Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/libertinus-serif-400.woff2") format("woff2");
}

@font-face {
    font-family: "Libertinus Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/libertinus-serif-400-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Libertinus Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/libertinus-serif-700.woff2") format("woff2");
}

@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/instrument-sans-400.woff2") format("woff2");
}

@font-face {
    font-family: "Instrument Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/instrument-sans-400-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/instrument-sans-500.woff2") format("woff2");
}

@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/instrument-sans-600.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-variable.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
}

/* Generated from tokens.json by build.mjs. Do not edit. */

:root {
    color-scheme: light;
    /* Brand navy ramp, for dark surfaces. The front page and the theme colour. */
    --navy-950: #030e29;
    /* Top of the sidebar gradient. */
    --navy-900: #030f2c;
    /* Brand badges, top of the vault card. */
    --navy-850: #04133a;
    /* Bottom of the sidebar gradient; tooltips. */
    --navy-800: #061a45;
    --navy-700: #0b2a66;
    --blue-600: #1a4f9e;
    --blue-500: #2f5fd6;
    --blue-400: #3f7fd4;
    --sky-300: #8fb6e8;
    --sky-200: #a8c9f0;
    --ice-100: #dbe7ff;
    --ice-50: #f4f8ff;
    /* Primary buttons, links, selection. White on it is 5.6:1. */
    --accent: #2f5fd6;
    --accent-hover: #244a9e;
    /* Role chips, the Central chip. */
    --accent-soft-bg: #e9effc;
    /* 7.2:1 on accent-soft-bg. */
    --accent-soft-fg: #244a9e;
    /* A 2px outline, 2px offset, on every focusable element. */
    --focus-ring: #6f9cff;
    /* Links and link buttons. */
    --link-fg: var(--accent);
    /* Light surfaces, where the work is. */
    --surface-page: #f3f5fa;
    --surface-card: #ffffff;
    /* Table header rows. */
    --surface-subtle: #f8fafd;
    /* Inputs at rest; white when focused. */
    --surface-field: #f7f9fc;
    /* Neutral chips, segmented control tracks, skeletons. */
    --fill-muted: #eef1f6;
    /* Count badges. */
    --fill-muted-strong: #e6ebf4;
    --border: #e3e8f1;
    /* Outline buttons, inputs. */
    --border-strong: #d7deea;
    /* Empty states, a missing formalization. */
    --border-dashed: #c6d0e2;
    --divider: #eef1f6;
    /* Text, 17.3:1 on white. */
    --ink-1: #111a2e;
    /* Secondary headings, chip text, 9.6:1. */
    --ink-2: #3c4557;
    /* Meta text and captions, 5.9:1. */
    --ink-3: #5b6477;
    /* Icons only (chevrons, drag handles): 3.1:1 fails for text. */
    --ink-4: #8a93a6;
    /* Placeholders, 4.7:1. */
    --ink-placeholder: #6c7488;
    --ink-disabled: #a3abbb;
    /* Text on navy: the current item, names. 15.9:1 on navy-800. */
    --on-dark-1: #f4f8ff;
    /* Navigation items, 11.3:1. */
    --on-dark-2: #c6d4ee;
    /* Secondary, 8.0:1. */
    --on-dark-3: #9fb3d6;
    /* Section labels, identifiers, 6.8:1. */
    --on-dark-4: #8fa6cc;
    --on-dark-line: rgba(170, 200, 240, .18);
    --on-dark-fill: rgba(255, 255, 255, .05);
    /* The current navigation item. */
    --on-dark-active: rgba(143, 182, 232, .16);
    /* The user card and the sync card. */
    --on-dark-card: rgba(3, 15, 44, .62);
    /* Something done or in good order. */
    --success-fg: #1f6b47;
    --success-bg: #e6f4ec;
    --success-icon: #2f8a5b;
    --success-dot: #4cc38a;
    /* Destructive actions and errors. */
    --danger-fg: #b42318;
    --danger-bg: #fff7f7;
    --danger-border: #d64545;
    /* A destructive primary button. White on it is 6.6:1. */
    --danger-solid: #b42318;
    --danger-solid-hover: #8f1c13;
    --warning-fg: #8a4a06;
    --warning-bg: #fcefdc;
    /* Block kinds in the editor. A label always goes with the colour. */
    --block-prose-fg: #3c4557;
    --block-prose-bg: #eef1f6;
    /* 6.6:1 on its background. */
    --block-definition-fg: #4a3fc0;
    --block-definition-bg: #efedfc;
    /* Theorems and every other result environment. 6.1:1. */
    --block-result-fg: #8a4a06;
    --block-result-bg: #fcefdc;
    /* The brand light rising from below. Only on the front page, the sidebars, the vault card and app icons. */
    --glow-sidebar: radial-gradient(150% 48% at 50% 112%, rgba(168, 201, 240, .42) 0%, rgba(63, 127, 212, .30) 30%, rgba(10, 36, 88, 0) 64%), linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
    --glow-vault: radial-gradient(130% 80% at 50% 125%, rgba(143, 182, 232, .55) 0%, rgba(63, 127, 212, .35) 32%, rgba(4, 19, 58, 0) 70%), linear-gradient(180deg, var(--navy-850) 0%, #0a2458 100%);
    /* The interface's own words. */
    --font-ui: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
    /* The wordmark, and nothing else: weight 420–480, tracking -0.035em to -0.049em. */
    --font-brand: Inter, 'SF Pro Display', system-ui, sans-serif;
    /* Identifiers: usr:, grp:, thm:, paths, versions. */
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Mathematical content, as the typeset line sets it. */
    --font-math: 'Libertinus Serif', 'Linux Libertine O', Georgia, serif;
    /* Page titles, with letter-spacing -0.02em. */
    --text-display: 600 34px/1.1 var(--font-ui);
    /* The editor's document title. */
    --text-title: 600 22px/1.2 var(--font-ui);
    /* Card titles, -0.01em. */
    --text-card: 600 19px/1.3 var(--font-ui);
    /* Section headings in content. */
    --text-section: 600 18px/1.3 var(--font-ui);
    --text-body: 400 16px/1.5 var(--font-ui);
    /* 500 when current. */
    --text-nav: 400 15px/1.3 var(--font-ui);
    --text-meta: 400 14px/1.45 var(--font-ui);
    --text-small: 500 13px/1.4 var(--font-ui);
    /* Chips, table headers, section labels. Sentence case, never uppercase. */
    --text-label: 500 12px/1.3 var(--font-ui);
    --text-mono-sm: 400 12px/1.4 var(--font-mono);
    --text-content: 400 19px/1.55 var(--font-math);
    /* A type scale for sizes the text roles do not cover. */
    --step-1: 12px;
    --step-2: 13px;
    --step-3: 15px;
    --step-4: 16px;
    --step-5: 19px;
    --step-6: 22px;
    --step-7: 34px;
    /* A 4px grid. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-11: 44px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    /* Tiny badges. */
    --radius-xs: 6px;
    /* Icon buttons, small inputs in block headers. */
    --radius-sm: 8px;
    /* Buttons, navigation items, fields. */
    --radius-md: 10px;
    /* Block cards, the user card, the floating bar. */
    --radius-lg: 14px;
    /* Content cards and dialogs. */
    --radius-xl: 16px;
    /* The sign-in card. */
    --radius-2xl: 22px;
    --radius-pill: 999px;
    --sidebar-web: 272px;
    --sidebar-desktop: 256px;
    /* The right rail on a group's page. */
    --rail-group: 340px;
    /* The right panel in the editor. */
    --panel-desktop: 300px;
    --content-max: 1200px;
    --shadow-card: 0 1px 2px rgba(20, 40, 90, .04);
    /* Floating bars, popovers, menus, dialogs. */
    --shadow-float: 0 10px 30px -12px rgba(20, 40, 90, .25);
    --shadow-auth: 0 1px 2px rgba(20, 40, 90, .04), 0 18px 50px -24px rgba(30, 60, 130, .18);
    /* A selected block, with a #cfd9f2 border. */
    --ring-selected: 0 0 0 3px rgba(47, 95, 214, .10);
    /* A focused input, with an accent border. */
    --ring-input: 0 0 0 3px rgba(47, 95, 214, .18);
    /* Buttons scale to .96 while pressed. */
    --dur-press: 120ms;
    /* Hovers and popovers. */
    --dur-ui: 180ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    /* The front page giving way to the sign-in; 500ms with reduced motion. */
    --dur-landing: 1600ms;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        /* White on it is 4.8:1. */
        --accent: #3d6ce0;
        --accent-hover: #2f5bc7;
        --accent-soft-bg: #1c2b4f;
        /* On accent-soft-bg. */
        --accent-soft-fg: #a9c3ff;
        --focus-ring: #6f9cff;
        /* Links and link buttons, where the accent alone is too dark to read. */
        --link-fg: #8cb0ff;
        --surface-page: #0a1120;
        --surface-card: #111a2c;
        --surface-subtle: #151f33;
        --surface-field: #0d1526;
        --fill-muted: #1b263d;
        --fill-muted-strong: #233049;
        --border: #222e46;
        --border-strong: #2d3a56;
        --border-dashed: #3a4866;
        --divider: #1b263d;
        --ink-1: #e8eef9;
        --ink-2: #c3cde0;
        --ink-3: #9ba7be;
        --ink-4: #6f7c96;
        --ink-placeholder: #8591a9;
        --ink-disabled: #56627a;
        --success-fg: #72d3a2;
        --success-bg: #0f2a1f;
        --success-icon: #4cc38a;
        --success-dot: #4cc38a;
        --danger-fg: #ff8f86;
        --danger-bg: #2a1519;
        --danger-border: #e0605a;
        /* White on it is 5.4:1. */
        --danger-solid: #c4362b;
        --danger-solid-hover: #a82d23;
        --warning-fg: #f2b86a;
        --warning-bg: #2c2011;
        --block-prose-fg: #c3cde0;
        --block-prose-bg: #1b263d;
        --block-definition-fg: #bdb6ff;
        --block-definition-bg: #231f47;
        --block-result-fg: #f2b86a;
        --block-result-bg: #2c2011;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    /* White on it is 4.8:1. */
    --accent: #3d6ce0;
    --accent-hover: #2f5bc7;
    --accent-soft-bg: #1c2b4f;
    /* On accent-soft-bg. */
    --accent-soft-fg: #a9c3ff;
    --focus-ring: #6f9cff;
    /* Links and link buttons, where the accent alone is too dark to read. */
    --link-fg: #8cb0ff;
    --surface-page: #0a1120;
    --surface-card: #111a2c;
    --surface-subtle: #151f33;
    --surface-field: #0d1526;
    --fill-muted: #1b263d;
    --fill-muted-strong: #233049;
    --border: #222e46;
    --border-strong: #2d3a56;
    --border-dashed: #3a4866;
    --divider: #1b263d;
    --ink-1: #e8eef9;
    --ink-2: #c3cde0;
    --ink-3: #9ba7be;
    --ink-4: #6f7c96;
    --ink-placeholder: #8591a9;
    --ink-disabled: #56627a;
    --success-fg: #72d3a2;
    --success-bg: #0f2a1f;
    --success-icon: #4cc38a;
    --success-dot: #4cc38a;
    --danger-fg: #ff8f86;
    --danger-bg: #2a1519;
    --danger-border: #e0605a;
    /* White on it is 5.4:1. */
    --danger-solid: #c4362b;
    --danger-solid-hover: #a82d23;
    --warning-fg: #f2b86a;
    --warning-bg: #2c2011;
    --block-prose-fg: #c3cde0;
    --block-prose-bg: #1b263d;
    --block-definition-fg: #bdb6ff;
    --block-definition-bg: #231f47;
    --block-result-fg: #f2b86a;
    --block-result-bg: #2c2011;
}

:root,
[data-density="comfortable"] {
    --control-height: 40px;
    --control-font: var(--step-3);
    --control-small-font: var(--step-2);
    --control-block: var(--space-2);
    --control-inline: var(--space-3);
    --button-inline: var(--space-4);
}

[data-density="compact"] {
    --control-height: 34px;
    --control-font: 14px;
    --control-small-font: var(--step-1);
    --control-block: 6px;
    --control-inline: 10px;
    --button-inline: 14px;
}

/* Stemma's shared components: classes over native HTML, for any consumer.
 *
 * Needs `tokens.css`. Every rule sits in a cascade layer, so a consumer's
 * own unlayered rules win whatever their specificity. Placement and layout
 * belong to the consumer; a component only says how it looks.
 *
 * Size follows the density: comfortable by default, compact inside
 * `[data-density="compact"]`.
 */

@layer stemma.base, stemma.components;

@layer stemma.base {
    /* Focus is never removed. */
    :focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }

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

@layer stemma.components {
    /* A label names a group of things. Sentence case, never a heading. */
    .label {
        margin: 0;
        font: var(--text-label);
        color: var(--ink-3);
    }

    .quiet {
        color: var(--ink-3);
    }

    .numeric {
        font-variant-numeric: tabular-nums;
    }

    /* Identifiers are verbatim: `usr:`, `grp:`, `thm:`, paths, versions. */
    .identifier {
        font-family: var(--font-mono);
        font-size: 0.87em;
        font-weight: 400;
    }

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

    /* ── Icon ──────────────────────────────────────────────────────────
     *
     * An inline glyph from `glyphs/`, drawn in the colour of its text. */

    .glyph {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .glyph--small {
        width: 14px;
        height: 14px;
        stroke-width: 2;
    }

    /* ── Button ────────────────────────────────────────────────────────
     *
     * On a `button` or an `a`. Outlined by default, the secondary action.
     * `--primary` is the one action a view is for, `--quiet` is a text
     * button, `--link` reads as a link and `--danger` is destructive.
     * `--icon` holds a glyph alone and needs an `aria-label`.
     * `aria-pressed="true"` and `aria-current` mark the one chosen. */

    .button {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: var(--control-height);
        padding: 0 var(--button-inline);
        font: 500 var(--control-font) / 1.2 var(--font-ui);
        color: var(--ink-1);
        text-decoration: none;
        white-space: nowrap;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition:
            background var(--dur-ui) var(--ease-out),
            border-color var(--dur-ui) var(--ease-out),
            color var(--dur-ui) var(--ease-out),
            transform var(--dur-press) var(--ease-out);
    }

    .button:hover {
        background: var(--surface-subtle);
        border-color: var(--ink-4);
    }

    .button:active:not(:disabled) {
        transform: scale(0.96);
    }

    .button[aria-pressed="true"],
    .button[aria-current]:not([aria-current="false"]) {
        color: var(--accent-soft-fg);
        background: var(--accent-soft-bg);
        border-color: transparent;
    }

    .button--primary {
        color: #fff;
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 1px 2px rgb(20 40 90 / 12%);
    }

    .button--primary:hover {
        background: var(--accent-hover);
        border-color: var(--accent-hover);
    }

    .button--quiet {
        color: var(--ink-2);
        background: transparent;
        border-color: transparent;
    }

    .button--quiet:hover {
        color: var(--ink-1);
        background: var(--fill-muted);
        border-color: transparent;
    }

    /* Outlined like the secondary action, in red, so it keeps its shape
     * at rest without competing with `--primary`. */
    .button--danger {
        color: var(--danger-fg);
        background: var(--surface-card);
        border-color: color-mix(in srgb, var(--danger-border) 55%, var(--surface-card));
    }

    .button--danger:hover {
        color: var(--danger-fg);
        background: var(--danger-bg);
        border-color: var(--danger-border);
    }

    /* A destructive action that is the one a dialog is for. */
    .button--primary.button--danger {
        color: #fff;
        background: var(--danger-solid);
        border-color: var(--danger-solid);
    }

    .button--primary.button--danger:hover {
        background: var(--danger-solid-hover);
        border-color: var(--danger-solid-hover);
    }

    .button--link {
        min-height: 0;
        padding: 0;
        color: var(--link-fg);
        background: transparent;
        border: 0;
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
        text-underline-offset: 3px;
    }

    .button--link:hover {
        background: transparent;
        text-decoration-color: currentColor;
    }

    .button--icon {
        width: var(--control-height);
        padding: 0;
        color: var(--ink-3);
        background: transparent;
        border-color: transparent;
        border-radius: var(--radius-sm);
    }

    .button--icon:hover {
        color: var(--ink-1);
        background: var(--fill-muted);
        border-color: transparent;
    }

    .button--small {
        min-height: 32px;
        padding: 0 var(--space-3);
        font-size: var(--step-2);
        border-radius: var(--radius-sm);
    }

    .button--icon.button--small {
        width: 32px;
        padding: 0;
    }

    .button:disabled,
    .button[aria-disabled="true"] {
        color: var(--ink-disabled);
        background: var(--surface-subtle);
        border-color: var(--border);
        box-shadow: none;
        cursor: not-allowed;
    }

    .button--quiet:disabled,
    .button--icon:disabled,
    .button--link:disabled {
        background: transparent;
        border-color: transparent;
    }

    /* ── Field ─────────────────────────────────────────────────────────
     *
     * A label, the control and an optional hint or error, stacked. `.input`
     * goes on the `input`, `textarea` or `select` itself, so a control
     * outside a field looks the same. An error says what happened and how
     * to fix it; the control points at it with `aria-describedby` and
     * carries `aria-invalid="true"`. */

    .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .field__label {
        font: 500 var(--control-font) / 1.3 var(--font-ui);
        color: var(--ink-1);
    }

    .field__hint {
        font-size: var(--control-small-font);
        color: var(--ink-3);
    }

    .field__error {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        font-size: var(--control-small-font);
        color: var(--danger-fg);
    }

    .input {
        box-sizing: border-box;
        width: 100%;
        min-height: var(--control-height);
        padding: var(--control-block) var(--control-inline);
        font: 400 var(--control-font) / 1.4 var(--font-ui);
        color: var(--ink-1);
        background: var(--surface-field);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        transition:
            border-color var(--dur-ui) var(--ease-out),
            background var(--dur-ui) var(--ease-out),
            box-shadow var(--dur-ui) var(--ease-out);
    }

    .input::placeholder {
        color: var(--ink-placeholder);
    }

    .input:focus {
        outline: none;
        background: var(--surface-card);
        border-color: var(--accent);
        box-shadow: var(--ring-input);
    }

    .input[aria-invalid="true"] {
        background: var(--danger-bg);
        border-color: var(--danger-border);
    }

    .input[aria-invalid="true"]:focus {
        box-shadow: 0 0 0 3px rgb(214 69 69 / 16%);
    }

    .input:disabled {
        color: var(--ink-3);
        cursor: not-allowed;
    }

    textarea.input {
        resize: vertical;
    }

    select.input {
        appearance: none;
        padding-right: calc(var(--control-inline) + 20px);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
    }

    /* Verbatim input: codes, identifiers, source. */
    .input--mono {
        font-family: var(--font-mono);
        font-size: calc(var(--control-font) - 1px);
    }

    /* ── Choice ────────────────────────────────────────────────────────
     *
     * A checkbox or radio and its words, as one line, so the words are
     * the target and not the eight pixels of the control. */

    .choice {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        font-size: var(--control-font);
        line-height: 20px;
        color: var(--ink-1);
        cursor: pointer;
    }

    /* The box sits on the first line of the words, however many there are,
     * centred on the letters rather than on the line box: the face sets
     * its glyphs low in the line, so the middle of the line box reads a
     * little above the middle of the words. */
    .choice input[type] {
        margin: 0.2em 0 0;
    }

    .choice:has(input:disabled) {
        cursor: default;
    }

    /* Drawn rather than native, so the box is the same size, colour and
     * alignment in every browser and in the desktop window. At rest it is
     * a field; chosen, it takes the accent with white on it, as the
     * primary button does. The edge is 3:1 against a card. */
    input[type="checkbox"],
    input[type="radio"] {
        box-sizing: border-box;
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin: 0;
        vertical-align: -3px;
        background: var(--surface-field) center / 0 no-repeat;
        border: 1.5px solid var(--ink-4);
        border-radius: 5px;
        appearance: none;
        cursor: pointer;
        transition:
            background-color var(--dur-press) var(--ease-out),
            background-size var(--dur-ui) var(--ease-out),
            border-color var(--dur-press) var(--ease-out),
            box-shadow var(--dur-press) var(--ease-out);
    }

    input[type="checkbox"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    input[type="radio"] {
        background-image: radial-gradient(circle, #fff 0 2.5px, transparent 3px);
        border-radius: 50%;
    }

    input[type="checkbox"]:hover:not(:disabled),
    input[type="radio"]:hover:not(:disabled) {
        border-color: var(--accent);
        box-shadow: var(--ring-selected);
    }

    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
        background-color: var(--accent);
        border-color: var(--accent);
    }

    input[type="checkbox"]:checked {
        background-size: 12px;
    }

    input[type="radio"]:checked {
        background-size: 100%;
    }

    input[type="checkbox"]:checked:hover:not(:disabled),
    input[type="radio"]:checked:hover:not(:disabled) {
        background-color: var(--accent-hover);
        border-color: var(--accent-hover);
    }

    input[type="checkbox"]:disabled,
    input[type="radio"]:disabled {
        opacity: 0.5;
        cursor: default;
    }

    /* A set of choices: the question is the legend. */
    .fieldset {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin: 0;
        padding: var(--space-3) var(--space-4) var(--space-4);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }

    /* WebKit lays a legend out as a flex item and stretches it, which
     * takes the whole top border away with it. */
    .fieldset > legend {
        width: fit-content;
        padding: 0 var(--space-1);
        font: var(--text-small);
        color: var(--ink-2);
    }

    /* ── Chip ──────────────────────────────────────────────────────────
     *
     * A state with a fixed meaning. Always words, so colour is never the
     * only cue; a glyph may go before them. */

    .chip {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 9px;
        font: var(--text-label);
        white-space: nowrap;
        color: var(--ink-2);
        background: var(--fill-muted);
        border: 1px solid transparent;
        border-radius: var(--radius-pill);
    }

    .chip--accent {
        color: var(--accent-soft-fg);
        background: var(--accent-soft-bg);
    }

    .chip--success {
        color: var(--success-fg);
        background: var(--success-bg);
    }

    .chip--warning {
        color: var(--warning-fg);
        background: var(--warning-bg);
    }

    .chip--danger {
        color: var(--danger-fg);
        background: var(--danger-bg);
        border-color: rgb(214 69 69 / 25%);
    }

    /* Something missing: a dashed outline and no fill. */
    .chip--dashed {
        color: var(--ink-3);
        background: transparent;
        border: 1px dashed var(--border-dashed);
    }

    .chip .glyph {
        width: 13px;
        height: 13px;
        stroke-width: 2;
    }

    /* A small number beside a heading or a destination. */
    .count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        box-sizing: border-box;
        padding: 1px 7px;
        font: var(--text-label);
        font-variant-numeric: tabular-nums;
        color: var(--ink-2);
        background: var(--fill-muted-strong);
        border-radius: var(--radius-pill);
    }

    /* ── Avatar and badge ──────────────────────────────────────────────
     *
     * A person is a circle with an initial; a group is a rounded square
     * with its initials. Either may hold an `img` instead. */

    .avatar {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        font: 600 14px / 1 var(--font-ui);
        color: #fff;
        background: linear-gradient(135deg, #6f9ff0, var(--accent));
        border-radius: 50%;
    }

    .badge {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        font: 500 16px / 1 var(--font-ui);
        color: #e3eeff;
        background: radial-gradient(120% 90% at 50% 120%, var(--blue-400) 0%, var(--navy-700) 55%, var(--navy-850) 100%);
        border-radius: var(--radius-md);
    }

    /* A picture, where there is one, fills the shape in place of the
     * initials. */
    .avatar > img,
    .badge > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
    }

    /* ── Card ──────────────────────────────────────────────────────────
     *
     * White on the page. `--empty` is an empty state or an invitation to
     * make something, outlined in dashes. */

    .card {
        box-sizing: border-box;
        color: var(--ink-1);
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-card);
    }

    .card--empty {
        background: transparent;
        border: 1px dashed var(--border-dashed);
        box-shadow: none;
    }

    /* The special resource of a group: the brand light rises in it. */
    .card--vault {
        color: #e3eeff;
        background: var(--glow-vault);
        border: 0;
        box-shadow: none;
    }

    /* A line of text saying there is nothing here yet, and what to do. */
    .empty {
        margin: 0;
        color: var(--ink-3);
    }

    /* ── Table ─────────────────────────────────────────────────────────
     *
     * Rows in a card. A row that goes somewhere is an `a` with the class
     * `.table__row`, whole, ending in a chevron. The columns are the
     * consumer's: set `--columns` on the table, as a track list. */

    .table {
        display: flex;
        flex-direction: column;
    }

    .table__head,
    .table__row {
        display: grid;
        grid-template-columns: var(--columns, 1fr);
        gap: var(--space-4);
        align-items: center;
        padding: var(--space-3) var(--space-6);
    }

    .table__head {
        padding-block: 10px;
        font: var(--text-label);
        color: var(--ink-3);
        background: var(--surface-subtle);
        border-block: 1px solid var(--divider);
    }

    .table__row {
        min-height: 60px;
        box-sizing: border-box;
        color: var(--ink-1);
        text-decoration: none;
        border-bottom: 1px solid var(--divider);
        transition: background var(--dur-ui) var(--ease-out);
    }

    .table__row:last-child {
        border-bottom: 0;
    }

    a.table__row:hover {
        background: var(--surface-subtle);
    }

    .chevron {
        color: var(--ink-4);
    }

    /* ── Menu ──────────────────────────────────────────────────────────
     *
     * A panel of actions or destinations, one `.menu__item` each. Works as
     * a `popover`; where it opens is the consumer's to say. `aria-current`
     * or `aria-checked="true"` marks where you are. Destructive items go
     * last, after a separator. */

    .menu {
        box-sizing: border-box;
        min-width: 200px;
        margin: 0;
        padding: 6px;
        color: var(--ink-1);
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: var(--shadow-float);
    }

    .menu__item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 36px;
        padding: 0 10px;
        font: 400 14px / 1.3 var(--font-ui);
        color: inherit;
        text-align: left;
        text-decoration: none;
        background: transparent;
        border: 0;
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .menu__item:hover,
    .menu__item:focus-visible {
        background: var(--fill-muted);
        outline-offset: -2px;
    }

    .menu__item[aria-current]:not([aria-current="false"]),
    .menu__item[aria-checked="true"] {
        font-weight: 500;
        color: var(--accent-soft-fg);
    }

    .menu__item:disabled {
        color: var(--ink-disabled);
        background: transparent;
        cursor: not-allowed;
    }

    .menu__item--danger {
        color: var(--danger-fg);
    }

    .menu__item--danger:hover {
        background: var(--danger-bg);
    }

    .menu__item .glyph {
        width: 16px;
        height: 16px;
        color: var(--ink-3);
    }

    .menu__item--danger .glyph {
        color: inherit;
    }

    .menu__hint {
        margin-left: auto;
        font: var(--text-mono-sm);
        color: var(--ink-3);
    }

    .menu__separator {
        height: 1px;
        margin: 6px 4px;
        background: var(--divider);
        border: 0;
    }

    .menu__heading {
        margin: 0;
        padding: 8px 10px 4px;
        font: var(--text-label);
        color: var(--ink-3);
    }

    /* A menu with nothing in it says so in the place of its items, as
     * tall as one of them. */
    .menu__empty {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        min-height: 36px;
        margin: 0;
        padding: 0 10px;
        font: 400 13px / 1.3 var(--font-ui);
        color: var(--ink-3);
    }

    /* ── Dialog ────────────────────────────────────────────────────────
     *
     * On a `dialog` opened with `showModal()`: a title in a sentence, what
     * will happen, and the buttons at the right, the exact verb last. */

    .dialog {
        box-sizing: border-box;
        width: min(520px, calc(100vw - 32px));
        max-height: calc(100vh - 64px);
        padding: 0;
        color: var(--ink-1);
        background: var(--surface-card);
        border: 0;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-float);
    }

    /* A dialog takes the focus itself when opened; the ring is for its
     * controls. */
    .dialog:focus {
        outline: none;
    }

    .dialog::backdrop {
        background: rgb(3 14 41 / 45%);
    }

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

    .dialog__title {
        margin: 0;
        font: var(--text-section);
    }

    .dialog__text {
        margin: 0;
        font: var(--text-meta);
        color: var(--ink-2);
    }

    .dialog__actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-2);
        padding-top: var(--space-2);
    }

    /* ── Notice ────────────────────────────────────────────────────────
     *
     * Something that went wrong with what was asked, above the thing it is
     * about. `--warning` is a condition to keep in mind; plain is neutral. */

    .problem {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        margin: 0;
        padding: 10px 14px;
        font: var(--text-meta);
        color: var(--danger-fg);
        background: var(--danger-bg);
        border: 1px solid rgb(214 69 69 / 30%);
        border-radius: var(--radius-md);
    }

    .notice {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        margin: 0;
        padding: 10px 14px;
        font: var(--text-meta);
        color: var(--ink-2);
        background: var(--surface-subtle);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }

    .notice--warning {
        color: var(--warning-fg);
        background: var(--warning-bg);
        border-color: transparent;
    }

    .notice--success {
        color: var(--success-fg);
        background: var(--success-bg);
        border-color: transparent;
    }

    /* ── Toast ─────────────────────────────────────────────────────────
     *
     * One line saying what just happened, with an optional action. Where
     * it sits is the consumer's to say. */

    .toast {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        max-width: min(560px, calc(100vw - 32px));
        padding: 10px 12px 10px 16px;
        font: var(--text-meta);
        color: var(--on-dark-1);
        background: var(--navy-800);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-float);
    }

    .toast--error {
        color: var(--danger-fg);
        background: var(--surface-card);
        border: 1px solid rgb(214 69 69 / 35%);
    }

    .toast .button--link {
        color: var(--sky-200);
    }

    .toast--error .button--link {
        color: var(--danger-fg);
    }

    /* ── Tooltip ───────────────────────────────────────────────────────
     *
     * Dark, small, for icon-only buttons; with the shortcut when there is
     * one. */

    .tooltip {
        box-sizing: border-box;
        padding: 5px 8px;
        font: 400 13px / 1.3 var(--font-ui);
        color: var(--on-dark-1);
        white-space: nowrap;
        background: var(--navy-800);
        border-radius: var(--radius-xs);
        pointer-events: none;
    }

    .tooltip kbd {
        margin-left: 6px;
        font: inherit;
        color: var(--on-dark-3);
    }

    /* ── Segmented control ─────────────────────────────────────────────
     *
     * Two or three views of one thing. Each option is a button with
     * `aria-pressed`. */

    .segmented {
        display: inline-flex;
        gap: 2px;
        padding: 3px;
        background: var(--fill-muted);
        border-radius: 12px;
    }

    .segmented > button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 34px;
        padding: 0 14px;
        font: 500 14px / 1 var(--font-ui);
        color: var(--ink-3);
        background: transparent;
        border: 0;
        border-radius: 9px;
        cursor: pointer;
        transition: background var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
    }

    .segmented > button:hover {
        color: var(--ink-1);
    }

    .segmented > button[aria-pressed="true"] {
        color: var(--ink-1);
        background: var(--surface-card);
        box-shadow: 0 1px 2px rgb(20 40 90 / 10%);
    }

    .segmented .glyph {
        width: 16px;
        height: 16px;
    }

    /* ── Loading ───────────────────────────────────────────────────────
     *
     * A grey shape where content will be; a spinner only inside a button
     * or beside a job. */

    .skeleton {
        background: var(--fill-muted);
        border-radius: var(--radius-sm);
    }

    .spinner {
        display: inline-block;
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: stemma-spin 0.8s linear infinite;
    }

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

    /* ── The wordmark ──────────────────────────────────────────────────
     *
     * "Stemma" in Inter, the only place that face is used. */

    .wordmark {
        font-family: var(--font-brand);
        font-weight: 480;
        letter-spacing: -0.035em;
        line-height: 1;
    }
}

/* The web interface's stylesheet.
 *
 * Served after the identity's `fonts.css`, `tokens.css` and
 * `components.css`, which define every custom property used here and the
 * shared components: buttons, fields, chips, cards, tables, menus,
 * dialogs and notices. What is here is layout: the public pages, the
 * front page, the signed-in shell and each page's own arrangement.
 */

/* Element defaults sit in the identity's base layer, beneath its
 * components, so a link styled as a button is a button. */
@layer stemma.base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    [hidden] {
        display: none !important;
    }

    html {
        background: var(--surface-page);
    }

    body {
        margin: 0;
        font: var(--text-body);
        color: var(--ink-1);
        background: var(--surface-page);
        -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3 {
        margin: 0;
        font-family: var(--font-ui);
        font-weight: 600;
        text-wrap: balance;
    }

    h1 {
        font-size: var(--step-7);
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    h2 {
        font-size: 18px;
        line-height: 1.3;
    }

    h3 {
        font-size: var(--step-4);
        line-height: 1.3;
    }

    p {
        margin: 0;
        max-width: 68ch;
    }

    a {
        color: var(--link-fg);
        text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
        text-underline-offset: 3px;
    }

    /* Towards the ink, which is darker in the light and lighter in the
     * dark. */
    a:hover {
        color: color-mix(in srgb, var(--link-fg) 75%, var(--ink-1));
        text-decoration-color: currentColor;
    }

    code,
    .mono {
        font-family: var(--font-mono);
        font-size: 0.87em;
    }

    .serif {
        font-family: var(--font-math);
        font-size: 19px;
        line-height: 1.55;
    }
}

/* ── Generic content ───────────────────────────────────────────────────
 *
 * Most pages are a column of blocks: each is a card whose first label or
 * heading is its title, holding a register of rows, a form or a sentence. */

.block {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 20px 24px 24px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.block > .label:first-child,
.block__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font: var(--text-section);
    color: var(--ink-1);
}

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

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

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
}

.row--spread {
    justify-content: space-between;
}

/* A list of things in a card, divided by hairlines. */
.register {
    list-style: none;
    margin: 0 -24px;
    padding: 0;
}

.register li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px var(--space-3);
    padding: 14px 24px;
    border-top: 1px solid var(--divider);
}

.register li:last-child {
    padding-bottom: 2px;
}

.register__name {
    font-weight: 500;
}

.register__name a {
    color: var(--ink-1);
    text-decoration: none;
}

.register__name a:hover {
    color: var(--link-fg);
}

.register__aside {
    margin-left: auto;
    color: var(--ink-3);
    font-size: 14px;
}

.register form {
    display: inline-flex;
    flex-direction: row;
}

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

/* A form's action sits under its fields, as wide as its words. */
form > .button {
    align-self: flex-start;
}

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

.actions form {
    display: inline-flex;
}

.done {
    padding: 10px 14px;
    font: var(--text-meta);
    color: var(--success-fg);
    background: var(--success-bg);
    border-radius: var(--radius-md);
}

/* Something given out once, which has to be copied before it is gone. */
.secret {
    padding: var(--space-3);
    font-family: var(--font-mono);
    font-size: 13px;
    overflow-wrap: anywhere;
    background: var(--surface-subtle);
    border: 1px dashed var(--border-dashed);
    border-radius: var(--radius-md);
}

table {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;
}

th {
    padding: 10px var(--space-4) 10px 0;
    font: var(--text-label);
    color: var(--ink-3);
    text-align: left;
    border-bottom: 1px solid var(--divider);
}

td {
    padding: 12px var(--space-4) 12px 0;
    vertical-align: baseline;
    border-bottom: 1px solid var(--divider);
}

tr:last-child td {
    border-bottom: 0;
}

td.numeric,
th.numeric {
    font-variant-numeric: tabular-nums;
}

.scroll {
    overflow-x: auto;
}

.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--success-dot);
    border-radius: 50%;
}

/* ── Public pages ──────────────────────────────────────────────────────
 *
 * Signing in, creating an account, resetting a password, answering an
 * invitation or a device: a bar with the mark, one white card, and the
 * instance and version at the foot. */

.auth-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background:
        radial-gradient(110% 95% at -8% 112%, var(--accent-soft-bg) 0%, transparent 70%),
        var(--surface-page);
}

.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 20px clamp(20px, 5vw, 76px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.brand .mark {
    display: block;
    width: 34px;
    height: auto;
}

.masthead .brand {
    color: var(--ink-1);
}

.masthead .wordmark {
    font-size: 23px;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    font-size: 16px;
}

.nav a {
    padding: 10px 0;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.nav a:hover {
    color: var(--ink-1);
}

.nav a[aria-current="page"] {
    color: var(--ink-1);
    border-bottom-color: var(--accent);
}

.auth-page .sheet,
.doorway__inside .sheet {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 48px;
}

.sheet--narrow {
    width: 100%;
    max-width: 520px;
    padding: clamp(28px, 6vw, 52px);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-auth);
}

.auth-page .sheet--narrow h1,
.doorway__inside .sheet--narrow h1 {
    font-size: clamp(36px, 6vw, 48px);
    font-weight: 500;
    line-height: 1.05;
}

.auth-page .sheet--narrow.stack,
.doorway__inside .sheet--narrow.stack {
    gap: 20px;
}

.auth-page .sheet--narrow .button--primary,
.doorway__inside .sheet--narrow .button--primary {
    min-height: 46px;
    font-size: 16px;
}

.auth-page .input,
.doorway__inside .input {
    min-height: 48px;
    font-size: 16px;
}

.auth-page .field__label,
.doorway__inside .field__label {
    font-weight: 400;
    font-size: 16px;
}

.foot {
    display: flex;
    justify-content: center;
    gap: 28px;
    padding: 22px;
    font: var(--text-mono-sm);
    color: var(--ink-3);
    background: color-mix(in srgb, var(--surface-subtle) 70%, transparent);
}

/* ── The appearance switch ─────────────────────────────────────────────
 *
 * Three buttons in one form, small wherever it sits: at the foot of a
 * public page, and above the reader in the sidebar, on navy. */

.appearance {
    display: flex;
    flex-direction: row;
}

.appearance .segmented {
    padding: 2px;
    border-radius: 9px;
}

.appearance .segmented > button {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 7px;
}

.appearance--foot {
    margin-left: auto;
}

.foot:has(.appearance--foot) {
    align-items: center;
}

.appearance--sidebar {
    flex-shrink: 0;
    padding: 0 2px;
}

.appearance--sidebar .segmented {
    flex: 1;
    background: var(--on-dark-fill);
    box-shadow: inset 0 0 0 1px var(--on-dark-line);
}

.appearance--sidebar .segmented > button {
    flex: 1;
    justify-content: center;
    color: var(--on-dark-3);
}

.appearance--sidebar .segmented > button:hover {
    color: var(--on-dark-1);
}

.appearance--sidebar .segmented > button[aria-pressed="true"] {
    color: var(--on-dark-1);
    background: var(--on-dark-active);
    box-shadow: none;
}

/* The mark drawn for the surface the page is on. */
.mark--for-dark {
    display: none !important;
}

:root[data-theme="dark"] .mark--for-light {
    display: none !important;
}

:root[data-theme="dark"] .mark--for-dark {
    display: block !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mark--for-light {
        display: none !important;
    }

    :root:not([data-theme="light"]) .mark--for-dark {
        display: block !important;
    }
}

/* The failure page and a few others are wider than a form. */
.auth-page .sheet > .stack:not(.sheet--narrow) {
    max-width: 640px;
    padding: clamp(28px, 6vw, 52px);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-auth);
}

/* ── The front page ────────────────────────────────────────────────────
 *
 * The one navy page: the mark over a dome of light, the motto and the
 * ways in. The light is drawn on a canvas behind everything; without
 * WebGL it is this gradient. */

html:has(.landing-page) {
    background: var(--navy-950);
}

.landing-page {
    min-height: 100vh;
    color: #f2f6fd;
    background: var(--navy-950);
}


.doorway {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    text-align: center;
    background: radial-gradient(120% 90% at 50% 30%, #051740 55%, #1a4f9e 74%, #8fb6e8 90%, #eef4fc 100%);
}

.lit .doorway {
    background: none;
}

.doorway__light {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.doorway__hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: opacity, transform;
}

/* The mark and the wordmark share one frame, the proportions of the full
 * logo, so the wordmark sits where the drawing leaves room for it. */
.doorway__stage {
    --glow: 0;
    position: relative;
    width: min(88vw, 560px, calc((100dvh - 340px) * 566 / 474));
    min-width: 260px;
    aspect-ratio: 566 / 474;
    container-type: size;
}

.doorway__stage canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.doorway__still {
    position: absolute;
    top: 12.6%;
    left: 24.7%;
    display: none;
    width: 51.2%;
    height: auto;
}

.doorway__stage.still .doorway__still {
    display: block;
}

.doorway__stage.still canvas {
    display: none;
}

.doorway__name {
    position: absolute;
    top: 73.2cqh;
    right: 0;
    left: 0;
    margin: 0;
    padding-left: 0.3cqw;
    font-family: var(--font-brand);
    font-size: 13.7cqw;
    font-weight: 420;
    line-height: 1;
    letter-spacing: -0.049em;
    color: #f2f6fd;
    text-align: center;
    text-shadow:
        0 0 calc(1.1cqw * var(--glow)) rgb(160 196 255 / calc(30% * var(--glow))),
        0 0 calc(3.2cqw * var(--glow)) rgb(90 150 255 / calc(22% * var(--glow)));
}

/* The one line set in capitals with tracking, because it is a motto and
 * not a label. */
.doorway__lead {
    max-width: 46ch;
    margin: 0;
    font-size: clamp(11px, 2.9vw, 14px);
    line-height: 1.9;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #b9cdea;
}

.doorway__actions {
    margin-top: 5vh;
}

.doorway__actions .block {
    align-items: center;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.doorway__actions .actions {
    justify-content: center;
    gap: 14px;
}

.doorway__actions .quiet {
    color: #b9cdea;
}

.button--hero,
.button--glass {
    min-height: 48px;
    padding: 0 26px;
    font-size: 16px;
    border-radius: var(--radius-pill);
    transition: transform var(--dur-press) ease, box-shadow 200ms ease;
}

.button--hero {
    color: #061a44;
    background: #f4f8ff;
    border-color: #f4f8ff;
}

.button--hero:hover {
    color: #061a44;
    background: #fff;
    border-color: #fff;
}

.button--hero.pressed {
    transform: scale(0.96);
    box-shadow: 0 0 0 6px rgb(200 225 255 / 25%), 0 0 40px rgb(160 200 255 / 45%);
}

.button--glass {
    color: #f2f6fd;
    background: rgb(10 35 85 / 35%);
    border-color: rgb(190 215 250 / 35%);
    backdrop-filter: blur(6px);
}

.button--glass:hover {
    color: #fff;
    background: rgb(10 35 85 / 55%);
    border-color: rgb(190 215 250 / 55%);
}

.button--hero:focus-visible,
.button--glass:focus-visible {
    outline-color: var(--focus-ring);
    outline-offset: 3px;
}

.doorway__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    max-width: none;
    margin-top: 4vh;
    font: var(--text-mono-sm);
    color: #7f9ac4;
}

/* The sign-in and the registration wait over the front page, shown by the
 * passage as the light withdraws. */
.doorway__inside {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    color: var(--ink-1);
    text-align: left;
    visibility: hidden;
    opacity: 0;
    background:
        radial-gradient(110% 95% at -8% 112%, var(--accent-soft-bg) 0%, transparent 70%),
        var(--surface-page);
}

.lit .doorway__inside {
    background: none;
}

.doorway__inside .masthead,
.doorway__inside .foot {
    flex-shrink: 0;
}

.doorway__inside .sheet {
    min-height: auto;
}

.doorway__panel {
    display: contents;
}

.landing-page.inside {
    overflow: hidden;
}

/* ── The signed-in shell ───────────────────────────────────────────────
 *
 * One navy sidebar, the only dark surface; the work is on the light page
 * beside it. Below 1024px the sidebar is a drawer behind a small bar. */

.shell {
    display: flex;
    min-height: 100vh;
}

/* Only the work scrolls. The page does not bounce past its ends either,
 * so the sidebar never moves with it. */
html:has(.shell) {
    overscroll-behavior-y: none;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
    width: var(--sidebar-web);
    padding: 26px 14px 16px;
    color: var(--on-dark-2);
    background: var(--glow-sidebar);
}

.sidebar__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
}

.sidebar__head .brand {
    flex: 1;
    min-width: 0;
}

.brand__words {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sidebar .wordmark,
.mobile-bar .wordmark {
    font-size: 22px;
    color: #f2f6fd;
}

.brand__instance {
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--on-dark-4);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__version {
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--on-dark-4);
    border: 1px solid rgb(170 200 240 / 20%);
    border-radius: var(--radius-xs);
}

.sidebar__nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    margin: 0 -6px;
    padding: 0 6px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(170 200 240 / 25%) transparent;
}

.sidebar__section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    padding: 14px 12px 4px;
    font: var(--text-label);
    color: var(--on-dark-4);
}

.sidebar__add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: -6px;
    color: var(--on-dark-4);
    border-radius: 7px;
}

.sidebar__add:hover,
.sidebar__add[aria-current="page"] {
    color: var(--on-dark-1);
    background: var(--on-dark-fill);
}

.sidebar__add .glyph {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.sidebar__item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    font: var(--text-nav);
    color: var(--on-dark-2);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}

.sidebar__item:hover {
    color: var(--on-dark-1);
    background: var(--on-dark-fill);
}

.sidebar__item[aria-current="page"] {
    font-weight: 500;
    color: #fff;
    background: var(--on-dark-active);
}

.sidebar__words {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__badge {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 10px;
    font-weight: 600;
    color: var(--navy-800);
    background: var(--sky-200);
    border-radius: var(--radius-xs);
}

.sidebar__badge > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.sidebar__count {
    padding: 1px 7px;
    font: var(--text-label);
    color: var(--navy-800);
    background: var(--sky-200);
    border-radius: var(--radius-pill);
}

.sidebar__empty {
    padding: 6px 12px;
    font-size: 14px;
    color: var(--on-dark-3);
}

.sidebar a:focus-visible,
.sidebar button:focus-visible,
.mobile-bar a:focus-visible,
.mobile-bar button:focus-visible {
    outline-color: var(--sky-200);
}

.user-card {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--on-dark-card);
    border: 1px solid rgb(190 215 250 / 18%);
    border-radius: var(--radius-lg);
}

.user-card .avatar {
    width: 36px;
    height: 36px;
}

/* The reader's name is the way to their profile. */
.user-card__me {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: -6px;
    padding: 6px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background var(--dur-ui) var(--ease-out);
}

.user-card__me:hover,
.user-card__me[aria-current="page"] {
    color: inherit;
    background: var(--on-dark-fill);
}

.user-card__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-card__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--on-dark-1);
}

.user-card__name > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card__role {
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 500;
    color: #cfe0fb;
    background: rgb(168 201 240 / 20%);
    border-radius: var(--radius-pill);
}

.user-card .identifier {
    font-size: 11px;
    color: var(--on-dark-3);
}

.user-card form {
    display: flex;
}

.user-card__out {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--on-dark-2);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.user-card__out:hover {
    color: #fff;
    background: var(--on-dark-fill);
}

.shell__work {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    margin-left: var(--sidebar-web);
}

.mobile-bar {
    display: none;
}

.shell__scrim {
    display: none;
}

.page {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: 100%;
    max-width: calc(var(--content-max) + 128px);
    padding: 40px 64px 64px;
}

/* ── Page structure ────────────────────────────────────────────────────
 *
 * Breadcrumbs when there is a hierarchy, then the head — title, what it
 * is, the one primary action — then the content in cards. */

.page-head,
.page > .stack:first-child {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-head {
    gap: 22px;
}

.page-head__row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.page-head__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.page-title {
    font: var(--text-display);
    letter-spacing: -0.02em;
}

/* A title with the one action that changes what it names. */
.page-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.avatar--large {
    width: 64px;
    height: 64px;
    font-size: 22px;
}

/* A page of settings: one card for each thing that can be changed. */
.settings-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 640px;
}

.picture-form__file {
    padding-block: 8px;
}

.picture-form__file::file-selector-button {
    margin-right: 12px;
    padding: 4px 12px;
    font: 500 13px / 1.4 var(--font-ui);
    color: var(--ink-1);
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.page-subtitle {
    font-size: 16px;
    color: var(--ink-3);
}

.page-head .page-title + .page-subtitle {
    margin-top: -12px;
}

.page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 14px;
    color: var(--ink-3);
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ink-3);
}

.crumbs a {
    color: var(--ink-3);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--ink-1);
}

.crumbs > span[aria-hidden] {
    color: var(--ink-disabled);
}

.crumbs [aria-current] {
    color: var(--ink-1);
}

/* The label on older pages that names where a page belongs. */
.page > .stack:first-child > .label {
    font-size: 14px;
}

.page > .stack:first-child > h1 {
    font: var(--text-display);
    letter-spacing: -0.02em;
}

.badge--large {
    width: 64px;
    height: 64px;
    font-size: 22px;
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 24px -10px rgb(26 79 158 / 55%);
}

.badge--muted {
    color: var(--ink-3);
    background: var(--fill-muted);
}

.button--large {
    min-height: 44px;
    padding: 0 20px;
    font-size: 15px;
    border-radius: 11px;
}

.section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font: var(--text-section);
}

.card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
}

.card__title {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    font: var(--text-section);
}

.card__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 4px 24px 24px;
}

.empty-card {
    padding: 22px 24px;
}

/* ── Overview ──────────────────────────────────────────────────────── */

.group-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.group-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 232px;
    padding: 24px;
    text-decoration: none;
    transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}

a.group-card:hover {
    color: var(--ink-1);
    border-color: var(--border-strong);
    box-shadow: 0 6px 20px -12px rgb(20 40 90 / 25%);
}

.group-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.group-card__name {
    font: var(--text-card);
    letter-spacing: -0.01em;
}

.group-card .identifier {
    font-size: 13px;
}

.group-card__about {
    margin-top: 8px;
    font-size: 14px;
    color: var(--ink-3);
}

.group-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    font-size: 14px;
    color: var(--ink-2);
    border-top: 1px solid var(--divider);
}

.group-card--request {
    background: var(--surface-subtle);
}

.request-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    min-height: 232px;
    padding: 24px;
}

.request-card__title {
    font-size: 17px;
    font-weight: 600;
}

.request-card .quiet {
    font-size: 14px;
}

.request-card .button {
    margin-top: 10px;
    color: var(--link-fg);
}

.request-card--alone {
    grid-column: 1 / -1;
    min-height: 0;
}

.machine-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.machine-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    text-decoration: none;
}

a.machine-row:hover {
    color: var(--ink-1);
    border-color: var(--border-strong);
}

.machine-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--ink-2);
    background: var(--fill-muted);
    border-radius: var(--radius-md);
}

.machine-row__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.machine-row__name {
    font-size: 16px;
    font-weight: 500;
}

/* ── A group's page ────────────────────────────────────────────────── */

.group-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-group);
    gap: 24px;
    align-items: start;
}

.group-layout__main,
.group-layout__rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.lines-card {
    overflow: hidden;
}

.lines-table {
    --columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 120px 170px 20px;
}

.lines-table__title {
    font-size: 16px;
    font-weight: 600;
}

.lines-table__summary {
    font-size: 15px;
    color: var(--ink-3);
}

.lines-table .chip {
    justify-self: start;
    padding: 4px 10px;
    font-size: 13px;
    background: var(--fill-muted);
}

.lines-table__contents {
    font-size: 14px;
    color: var(--ink-3);
}

.vault-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
}

.vault-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vault-card__head h2 {
    font-size: 17px;
    color: var(--on-dark-1);
}

.vault-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #cfe0fb;
    background: rgb(168 201 240 / 16%);
    border-radius: var(--radius-md);
}

.vault-card p {
    font-size: 14px;
    color: #b9cdea;
}

.vault-card__open {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    font-size: 14px;
    font-weight: 500;
    color: #061a44;
    text-decoration: none;
    background: #f4f8ff;
    border-radius: var(--radius-md);
    transition: background var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
}

.vault-card__open:hover {
    color: #061a44;
    background: #fff;
}

.vault-card__open:active {
    transform: scale(0.96);
}

.members-card {
    overflow: hidden;
}

.members-card .card__head {
    padding: 18px 20px 12px;
}

.members-card .card__title {
    font-size: 17px;
}

.add-member {
    color: var(--link-fg);
}

.people {
    list-style: none;
    margin: 0;
    padding: 0;
}

.person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--divider);
}

.person:last-child {
    padding-bottom: 16px;
}

.person__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.person__name {
    font-size: 15px;
    font-weight: 500;
}

.person .identifier {
    font-size: 12px;
}

.person__role {
    font-size: 13px;
    color: var(--ink-3);
}

.person__role--owner {
    font-weight: 500;
    color: var(--accent-soft-fg);
}

/* ── A line on the web ─────────────────────────────────────────────────
 *
 * The document holds the middle; the gutter on the left carries what the
 * system knows about each statement, and the register on the right the
 * line's facts. Both margins carry information, so on a narrow screen
 * they move rather than disappear. */

.apparatus {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) 20rem;
    gap: var(--space-6);
    align-items: start;
}

.apparatus__gutter {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: 2px;
    font: var(--text-label);
    color: var(--ink-3);
    text-align: right;
}

.apparatus__document {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
    padding: 28px 32px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

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

.node,
.box {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.node__mark {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font: var(--text-label);
    color: var(--ink-3);
    text-align: right;
}

.node__mark .identifier {
    color: var(--ink-2);
}

.node__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding-left: var(--space-4);
    border-left: 1px solid var(--border);
}

.node--central > .node__body {
    border-left: 2px solid var(--accent);
}

.node__name {
    font-family: var(--font-math);
    font-size: 19px;
    line-height: 1.35;
}

.node__uses {
    font: var(--text-mono-sm);
    color: var(--ink-3);
}

/* A black box: a declared absence. Hatched rather than coloured — a gap
 * is not a failure. */
.box__band {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 3rem;
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
    color: var(--ink-3);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 7px, var(--divider) 7px, var(--divider) 8px);
    border: 1px dashed var(--border-dashed);
    border-radius: var(--radius-md);
}

.box--filled .box__band {
    background-image: none;
    border-style: solid;
}

.box__count {
    font-variant-numeric: tabular-nums;
}

.box__ask {
    grid-column: 2;
}

/* ── The typeset page ──────────────────────────────────────────────────
 *
 * What the machine that wrote the revision typeset, in a frame of its
 * own: it is paper, whatever surrounds it. */

.typeset__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.typeset__head .block__title {
    flex: 1;
}

.typeset__frame {
    display: block;
    width: 100%;
    min-height: min(80vh, 900px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* ── The launcher ──────────────────────────────────────────────────────
 *
 * An agent action is offered where its effect will land: a quiet line
 * that opens into the machines and the agents on each. */

.launcher > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 14px;
    color: var(--link-fg);
    list-style: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.launcher > summary::-webkit-details-marker {
    display: none;
}

.launcher > summary:hover,
.launcher[open] > summary {
    background: var(--accent-soft-bg);
}

.launcher__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 32rem;
    margin-top: var(--space-2);
    padding: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-float);
}

.launcher__machine {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.launcher__name {
    font: var(--text-small);
    color: var(--ink-2);
}

.launcher__agent {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    border-radius: var(--radius-sm);
}

.launcher__agent:has(input:checked) {
    background: var(--accent-soft-bg);
}

/* Shown, named and unavailable, with the reason. */
.launcher__agent--out {
    color: var(--ink-3);
}

/* ── What changed ──────────────────────────────────────────────────────
 *
 * A proposal is read by what moved. Added and taken out are told apart by
 * the mark in the margin and the edge, and a statement the guard forbids
 * touching carries a frame. */

.diff {
    padding: var(--space-3) 0;
    overflow-x: auto;
    font: 13px / 1.6 var(--font-mono);
    white-space: pre;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.source {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.source__text {
    margin: 0;
    padding: var(--space-3);
    font: 13px / 1.6 var(--font-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.diff__row {
    display: grid;
    grid-template-columns: 3.5ch 3.5ch 2ch 1fr;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border-left: 2px solid transparent;
}

.diff__row--added {
    background: var(--success-bg);
    border-left-color: var(--success-icon);
}

.diff__row--removed {
    color: var(--ink-3);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    background: var(--danger-bg);
    border-left-color: var(--danger-border);
}

.diff__row--held {
    box-shadow: inset 1px 0 0 -0.5px var(--ink-3), inset -1px 0 0 -0.5px var(--ink-3);
}

.diff__row--held-first {
    background-image: linear-gradient(var(--ink-3), var(--ink-3)), linear-gradient(var(--ink-3), var(--ink-3));
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 7px 1px, 7px 1px;
}

.diff__row--held-last {
    background-image: linear-gradient(var(--ink-3), var(--ink-3)), linear-gradient(var(--ink-3), var(--ink-3));
    background-position: 0 100%, 100% 100%;
    background-repeat: no-repeat;
    background-size: 7px 1px, 7px 1px;
}

.diff__at {
    color: var(--ink-3);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.diff__mark {
    color: var(--ink-3);
}

.diff__text {
    white-space: pre-wrap;
    word-break: break-word;
}

.findings {
    margin: 0;
    padding-left: 1.2em;
}

.formal-review {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.formal-review pre {
    margin: var(--space-2) 0;
}

/* ── Narrower windows ──────────────────────────────────────────────── */

@media (max-width: 1280px) {
    .group-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .group-layout {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .apparatus__register {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1023px) {
    .shell {
        display: block;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 20;
        width: min(var(--sidebar-web), 86vw);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 240ms var(--ease-out), visibility 0s linear 240ms;
    }

    .shell__work {
        margin-left: 0;
    }

    .drawer-open .sidebar {
        transform: none;
        visibility: visible;
        transition: transform 240ms var(--ease-out);
    }

    .drawer-open .shell__scrim {
        position: fixed;
        inset: 0;
        z-index: 19;
        display: block;
        background: rgb(3 14 41 / 45%);
    }

    .mobile-bar {
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        color: var(--on-dark-2);
        background: var(--navy-900);
    }

    .mobile-bar .brand .mark {
        width: 28px;
    }

    .mobile-bar .brand__instance {
        margin-left: auto;
    }

    .mobile-bar__menu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: -8px;
        color: var(--on-dark-1);
        background: transparent;
        border: 0;
        border-radius: var(--radius-md);
        cursor: pointer;
    }

    .page {
        padding: 28px 24px 48px;
    }
}

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

    .group-card,
    .request-card {
        min-height: 0;
    }

    .page {
        gap: var(--space-6);
        padding: 24px 16px 40px;
    }

    .page-head__row {
        flex-wrap: wrap;
    }

    .page-head__row .button--primary {
        width: 100%;
    }

    .page-title {
        font-size: 28px;
    }

    .block {
        padding: 18px 16px 20px;
    }

    .register {
        margin: 0 -16px;
    }

    .register li {
        padding: 12px 16px;
    }

    .card__head {
        padding: 18px 16px;
    }

    /* A table becomes stacked rows. */
    .table {
        display: flex;
        flex-direction: column;
    }

    .table__head {
        display: none;
    }

    .table__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
        padding: 14px 16px;
    }

    .table__row > .chevron {
        grid-column: 2;
        grid-row: 1 / span 4;
        align-self: center;
    }

    .table__row > :not(.chevron) {
        grid-column: 1;
    }

    .machine-row {
        flex-wrap: wrap;
        padding: 16px;
    }

    .apparatus,
    .node,
    .box {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .apparatus__document {
        padding: 20px 16px;
    }

    .apparatus__gutter,
    .node__mark {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-3);
        text-align: left;
    }

    .box__ask {
        grid-column: auto;
    }

    .masthead {
        flex-wrap: wrap;
    }

    .sidebar__item,
    .user-card__out {
        min-height: 44px;
    }
}

/* A form that is only wanted now and then waits behind its summary. */
.page details:not(.launcher) {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.page details:not(.launcher) > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}

.page details:not(.launcher) > summary::-webkit-details-marker {
    display: none;
}

.page details:not(.launcher) > summary::before {
    width: 8px;
    height: 8px;
    content: "";
    border-right: 1.5px solid var(--ink-3);
    border-bottom: 1.5px solid var(--ink-3);
    transform: rotate(-45deg);
    transition: transform var(--dur-ui) var(--ease-out);
}

.page details:not(.launcher)[open] > summary::before {
    transform: rotate(45deg);
}

.page details:not(.launcher) > form,
.page details:not(.launcher) > :not(summary) {
    padding: 0 24px 24px;
}

.page details:not(.launcher) details:not(.launcher) {
    margin: 0 24px 24px;
    box-shadow: none;
}

/* A form inside the product is a card on the page, not a sign-in card. */
.page .sheet--narrow {
    max-width: 640px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}