@layer reset, base, theme, intent;

/* Startup visibility, status spacing and readable error/action layout are Host
   invariants, not theme appearance. Keep these outside semantic layers. */
#gams-startup [hidden] {
    display: none !important;
}
#gams-startup #phase {
    margin-block: var(--space-4);
}
#gams-startup #error {
    margin-block: var(--space-3);
    white-space: pre-wrap;
    overflow: auto;
}
#gams-startup footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
#gams-startup footer button {
    align-self: flex-end;
    white-space: nowrap;
}

@layer intent {
    /* ═══════════════════════════════════════════════════════════════════════════
     SURFACES
     ═══════════════════════════════════════════════════════════════════════════ */

    :root {
        --bg: var(--base-bg);
        --surface-hover: color-mix(in oklab, var(--surface), white 5%);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     BORDERS
     ═══════════════════════════════════════════════════════════════════════════ */

    :root {
        --border: var(--base-border);
        --border-hover: color-mix(in oklab, var(--border), var(--text) 18%);
        --border-focus: var(--accent);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     TEXT
     ═══════════════════════════════════════════════════════════════════════════ */

    :root {
        --text: var(--base-text);
        --text-muted: var(--base-text-muted);
        --text-faint: color-mix(in oklab, var(--text-muted), transparent 40%);
        --ink: var(--base-ink);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     EFFECTS
     ═══════════════════════════════════════════════════════════════════════════ */

    :root {
        --glow: 0 0 10px color-mix(in oklab, var(--accent), transparent 75%);
        --shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
        --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     INTENT CLASSES
     ═══════════════════════════════════════════════════════════════════════════ */

    .accent,
    .success,
    .warning,
    .danger,
    .info {
        --bg: var(--intent-soft-bg);
        --border: var(--intent-soft-border);
        --text: var(--intent-soft-fg);
        --text-muted: color-mix(in oklab, var(--text), var(--base-text-muted) 60%);
        --ink: var(--base-ink);
        /* Weird requirement */
        --intent-bg: var(--intent);
        --intent-hover-bg: color-mix(in oklab, var(--intent-bg), white 12%);
        --intent-active-bg: color-mix(in oklab, var(--intent-bg), white 22%);
        --intent-fg: var(--base-ink);
        --intent-border: color-mix(in oklab, var(--intent-bg), black 20%);
        --intent-ring: color-mix(in oklab, var(--intent), transparent 65%);

        /* soft / subtle (toasts, alerts, tinted panels, validation hints) */
        --intent-soft-bg: color-mix(in oklab, var(--intent), var(--surface) 85%);
        --intent-soft-border: color-mix(in oklab, var(--intent), var(--base-border) 60%);
        --intent-soft-fg: color-mix(in oklab, var(--intent), var(--base-text) 30%);
    }

    .accent {
        --intent: var(--accent);
    }

    .success {
        --intent: var(--success);
    }

    .warning {
        --intent: var(--warning);
    }

    .danger {
        --intent: var(--danger);
    }

    .info {
        --intent: var(--info);
    }

    .elevated {
        background: var(--surface-elevated);
        box-shadow: var(--shadow-elevated);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     INTENT BUNDLE

     Default intent = accent. Override --intent via .accent/.success/.danger/etc
     to recolor any component that consumes these tokens.
     ═══════════════════════════════════════════════════════════════════════════ */

    :root {
        --intent: var(--accent);

        /* filled (buttons, chips, slider fills, toggles) */
        --intent-bg: var(--intent);
        --intent-hover-bg: color-mix(in oklab, var(--intent-bg), white 12%);
        --intent-active-bg: color-mix(in oklab, var(--intent-bg), white 22%);
        --intent-fg: var(--base-ink);
        --intent-border: color-mix(in oklab, var(--intent-bg), black 20%);
        --intent-ring: color-mix(in oklab, var(--intent), transparent 65%);

        /* soft / subtle (toasts, alerts, tinted panels, validation hints) */
        --intent-soft-bg: color-mix(in oklab, var(--intent), var(--surface) 85%);
        --intent-soft-border: color-mix(in oklab, var(--intent), var(--base-border) 60%);
        --intent-soft-fg: color-mix(in oklab, var(--intent), var(--base-text) 30%);
    }
}

@layer base {
    /* ═══════════════════════════════════════════════════════════════════════════
     PALETTE
     ═══════════════════════════════════════════════════════════════════════════ */

    :root {
        --accent: #7aa2ff;
        --success: #3ddc97;
        --warning: #ffcc66;
        --danger: #ff5c7a;
        --info: #5bd6ff;
        --base-bg: #0b0c10;
        --surface: #11131a;
        --surface-elevated: #171a23;
        --base-border: #262a36;
        --base-text: #e8eaf0;
        --base-text-muted: #a8afc3;
        --base-ink: #0b0c10;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     SIZING / SPACING
     ═══════════════════════════════════════════════════════════════════════════ */

    :root {
        --radius-sm: 4px;
        --radius-md: 8px;

        --space-1: 2px;
        --space-2: 4px;
        --space-3: 8px;
        --space-4: 12px;
        --space-5: 16px;
        --space-6: 24px;
        --space-7: 32px;
        --space-8: 48px;

        --control-height: 30px;
        --aside-width: 220px;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════════════════ */

    :root {
        --font-body: "Roboto", "Segoe UI", sans-serif;
        --font-mono: "Roboto Mono", "JetBrains Mono", monospace;
        --font-display: "Orbitron", "Space Grotesk", sans-serif;

        --font-xs: 11px;
        --font-sm: 12px;
        --font-md: 14px;
        --font-lg: 16px;
        --font-xl: 20px;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT TOKENS

     Customisation points for structural components. Themes override these.
     ═══════════════════════════════════════════════════════════════════════════ */

    :root {
        /* Area header separator; themes choose the border treatment. */
        --header-border: 1px solid var(--border);

        /* popup */
        --popup-backdrop: rgba(2, 4, 8, 0.7);

        /* code editor - Catppuccin Mocha */
        --code-editor-bg: #1e1e2e;
        --code-editor-border: #313244;
        --code-editor-text: #cdd6f4;
        --code-editor-caret: #f5e0dc;
        --code-editor-placeholder: #6c7086;
        --code-token-comment: #6c7086;
        --code-token-string: #a6e3a1;
        --code-token-number: #fab387;
        --code-token-keyword: #cba6f7;
        --code-token-operator: #89dceb;

        /* resize handles */
        --resize-handle-size: 12px;
        --resize-handle-bg: color-mix(in oklab, var(--border) 85%, transparent);
        --resize-handle-hover-bg: var(--accent);
        --resize-handle-active-bg: color-mix(in oklab, var(--accent), white 15%);
        --resize-handle-hover-shadow: var(--glow);

        /* z-index scale */
        --z-index-handle: 1;
        --z-index-corner: 2;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     BODY
     ═══════════════════════════════════════════════════════════════════════════ */

    body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-body-override, var(--font-body));
        font-size: var(--font-md);
        line-height: 1.45;
        color-scheme: dark;
        margin: 0;
        overflow: hidden;
    }

    pre,
    code,
    kbd,
    samp {
        font-family: var(--font-mono);
        flex: 1;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     ICONS  —  bare <i> = Material Symbols Rounded
     ═══════════════════════════════════════════════════════════════════════════ */

    @font-face {
        font-family: "Material Symbols Rounded";
        font-style: normal;
        font-weight: 100 700;
        src: url("/fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
    }

    i {
        font-family: "Material Symbols Rounded";
        font-weight: 400;
        font-style: normal;
        font-size: inherit;
        line-height: inherit;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        font-variation-settings:
            "FILL" 0,
            "wght" 400,
            "GRAD" 0,
            "opsz" 14;
        font-feature-settings: "liga";
        -webkit-font-smoothing: antialiased;
    }

    @font-face {
        font-family: "Game Icons";
        font-style: normal;
        font-weight: 400;
        src: url("/fonts/game-icons.woff2") format("woff2");
    }

    i.game-icons {
        /* WebKit otherwise shapes hyphen-separated name fragments independently. */
        word-break: keep-all;
        font-family: "Game Icons";
        font-variation-settings: normal;
        font-feature-settings: "liga" 1;
        font-variant-ligatures: common-ligatures;
        /* WebKit otherwise splits hyphenated names into zero-width text runs,
           even with white-space: nowrap, before applying the icon ligature. */
        word-break: keep-all;
    }

    /* Specialized cursors in the theme layer override this focusable default. */
    [tabindex] {
        cursor: pointer;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     BUTTONS

     Default = neutral surface button.
     Add intent class for colored:  <button class="danger">Delete</button>
     Icon-only:  <button class="accent" aria-label="Save"><i>save</i></button>
     ═══════════════════════════════════════════════════════════════════════════ */

    button,
    [type="button"],
    [type="submit"],
    [type="reset"] {
        user-select: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: var(--control-height);
        background: var(--surface-elevated);
        border: 1px solid var(--border);
        color: var(--text);
        padding: 0 var(--space-3);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition:
            background 120ms,
            border-color 120ms,
            color 120ms;
    }

    button:hover,
    [type="button"]:hover,
    [type="submit"]:hover,
    [type="reset"]:hover {
        background: var(--surface-hover);
        border-color: var(--border-hover);
    }

    button:active,
    button.active,
    [type="button"]:active,
    [type="button"].active,
    [type="submit"]:active,
    [type="submit"].active,
    [type="reset"]:active,
    [type="reset"].active {
        background: var(--surface);
    }

    button:has(small) {
        flex-direction: column;
    }

    button small {
        display: block;
        margin-top: calc(-1 * var(--space-3));
    }

    /* intent-filled buttons */
    button.accent,
    button.success,
    button.warning,
    button.danger,
    button.info {
        background: var(--intent-bg);
        border-color: var(--intent-border);
        color: var(--intent-fg);
    }

    button.accent:hover,
    button.success:hover,
    button.warning:hover,
    button.danger:hover,
    button.info:hover {
        background: var(--intent-hover-bg);
    }

    button.accent:active,
    button.accent.active,
    button.success:active,
    button.success.active,
    button.warning:active,
    button.warning.active,
    button.danger:active,
    button.danger.active,
    button.info:active,
    button.info.active {
        background: var(--intent-active-bg);
    }

    /* icon sizing inside buttons — larger than text but contained by --control-height */
    button > i {
        font-size: 20px;
        line-height: 1;
        font-variation-settings:
            "FILL" 0,
            "wght" 400,
            "GRAD" 0,
            "opsz" 20;
    }

    /* button groups */
    [role="buttongroup"] {
        padding: 3px;
        display: inline-flex;
        align-items: stretch;
        gap: 0;
    }

    [role="buttongroup"] > :is(button, select:not([multiple]):not([size]), select:not([multiple])[size="1"]) {
        border-radius: 0;
        position: relative;
    }

    [role="buttongroup"] > :is(select:not([multiple]):not([size]), select:not([multiple])[size="1"]) {
        height: auto;
        min-height: var(--control-height);
    }

    [role="buttongroup"] > button + button {
        margin-left: -1px;
    }

    [role="buttongroup"]
        > :is(button, select:not([multiple]):not([size]), select:not([multiple])[size="1"]):first-child {
        border-top-left-radius: var(--radius-sm);
        border-bottom-left-radius: var(--radius-sm);
    }

    [role="buttongroup"]
        > :is(button, select:not([multiple]):not([size]), select:not([multiple])[size="1"]):last-child {
        border-top-right-radius: var(--radius-sm);
        border-bottom-right-radius: var(--radius-sm);
    }

    view-pagination {
        display: flex;
        align-items: center;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     INPUTS

     Neutral surface, intent-colored focus ring.
     Validation:  <input class="danger">  or  <div class="danger"><input></div>
     ═══════════════════════════════════════════════════════════════════════════ */

    form {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    code {
        display: flex;
        flex: 1;
    }

    code > textarea {
        flex: 1;
    }

    input[type="text"],
    input[type="number"],
    input[type="url"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    select {
        background: var(--surface);
        border: 1px solid var(--border);
        color: inherit;
        padding: 0 var(--space-3);
        transition:
            border-color 120ms,
            box-shadow 120ms;
    }

    textarea {
        background: var(--surface);
        border: 1px solid var(--border);
        color: inherit;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        transition:
            border-color 120ms,
            box-shadow 120ms;
    }

    td > input {
        width: 100%;
        height: 100%;
    }

    code-editor {
        --code-editor-rows: 12;
        --code-editor-line-height: 1.45;
        --code-editor-padding-y: var(--space-2);
        --code-editor-padding-x: var(--space-3);
        --code-editor-scrollbar-x: 0px;
        --code-editor-scrollbar-y: 0px;
        max-height: 400px;
        position: relative;
        display: block;
        border: 1px solid var(--code-editor-border);
        border-radius: var(--radius-sm);
        background: var(--code-editor-bg);
        font-family: var(--font-mono);
        font-size: var(--font-sm);
        line-height: var(--code-editor-line-height);
        height: calc(
            var(--code-editor-rows) *
            1em *
            var(--code-editor-line-height) +
            var(--code-editor-padding-y) *
            2 +
            2px
        );
        overflow: hidden;
        min-height: calc(
            var(--code-editor-rows) *
            1em *
            var(--code-editor-line-height) +
            var(--code-editor-padding-y) *
            2 +
            2px
        );
    }

    code-editor:focus-within {
        border-color: color-mix(in oklab, var(--intent), var(--surface) 40%);
    }

    code-editor > .code-editor-scroller {
        position: relative;
        min-height: inherit;
        height: 100%;
        overflow: hidden;
    }

    code-editor .code-editor-scroller > pre,
    code-editor .code-editor-scroller > textarea {
        margin: 0;
        padding: var(--code-editor-padding-y) var(--code-editor-padding-x);
        border: 0;
        border-radius: 0;
        width: 100%;
        height: 100%;
        min-height: inherit;
        box-sizing: border-box;
        font: inherit;
        line-height: inherit;
        tab-size: 2;
        white-space: pre;
        overflow-wrap: normal;
        word-break: normal;
    }

    code-editor .code-editor-scroller > pre {
        position: absolute;
        top: 0;
        right: var(--code-editor-scrollbar-y);
        bottom: var(--code-editor-scrollbar-x);
        left: 0;
        overflow: hidden;
        pointer-events: none;
        color: var(--code-editor-text);
    }

    code-editor .code-editor-scroller > pre > code {
        display: block;
        white-space: inherit;
        will-change: transform;
    }

    code-editor .code-editor-scroller > textarea {
        position: absolute;
        inset: 0;
        background: transparent;
        color: transparent;
        caret-color: var(--code-editor-caret);
        overflow: auto;
        resize: none;
    }

    code-editor .code-editor-scroller > textarea::placeholder {
        color: var(--code-editor-placeholder);
    }

    code-editor .comment {
        color: var(--code-token-comment);
        font-style: italic;
    }

    code-editor .string {
        color: var(--code-token-string);
        font-weight: 400;
    }

    code-editor .number {
        color: var(--code-token-number);
    }

    code-editor .keyword {
        color: var(--code-token-keyword);
        font-weight: 600;
    }

    code-editor .operator {
        color: var(--code-token-operator);
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--text-faint);
    }

    input[type="text"]:hover,
    input[type="number"]:hover,
    input[type="url"]:hover,
    input[type="search"]:hover,
    input[type="email"]:hover,
    input[type="password"]:hover,
    select:hover,
    textarea:hover {
        border-color: var(--border-hover);
    }

    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="url"]:focus,
    input[type="search"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    select:focus,
    textarea:focus {
        border-color: color-mix(in oklab, var(--intent), var(--surface) 40%);
    }

    /* intent on inputs = validation state (direct or cascaded from parent) */
    input.accent,
    .accent > input,
    .accent > select,
    .accent > textarea,
    input.success,
    .success > input,
    .success > select,
    .success > textarea,
    input.warning,
    .warning > input,
    .warning > select,
    .warning > textarea,
    input.danger,
    .danger > input,
    .danger > select,
    .danger > textarea,
    input.info,
    .info > input,
    .info > select,
    .info > textarea,
    select.accent,
    select.success,
    select.warning,
    select.danger,
    select.info,
    textarea.accent,
    textarea.success,
    textarea.warning,
    textarea.danger,
    textarea.info {
        border-color: var(--intent-soft-border);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     Lists
     ═══════════════════════════════════════════════════════════════════════════ */

    /* ═══════════════════════════════════════════════════════════════════════════
     INFRASTRUCTURE ELEMENTS
     ═══════════════════════════════════════════════════════════════════════════ */
    /* ═══════════════════════════════════════════════════════════════════════════
     POPUPS

     view-popup is a fixed overlay (backdrop + centering container).
     Its Shadow DOM holds <header> + <slot> which form the popup card.
     ═══════════════════════════════════════════════════════════════════════════ */

    /* ═══════════════════════════════════════════════════════════════════════════
     Views helpers (build block)
   ═══════════════════════════════════════════════════════════════════════════ */
    :host {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    main {
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas:
            "main aside"
            "footer footer";
    }

    main > article,
    main > canvas,
    main > table,
    main > form {
        grid-area: main;
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        max-height: 100%;
    }

    table {
        align-self: start;
        width: 100%;
        height: auto;
    }

    article,
    form {
        overflow: auto;
    }

    form {
        flex-direction: column;
    }

    /* Adjacent canvas/table main surfaces share one viewport. :host covers
       Views whose semantic children live directly inside their Shadow DOM. */
    main > form:has(> canvas + table),
    :host > form:has(> canvas + table) {
        grid-area: main;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        max-height: 100%;
        isolation: isolate;
    }

    main > form:has(> canvas + table) > canvas,
    :host > form:has(> canvas + table) > canvas {
        grid-area: 1 / 1;
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        max-height: 100%;
        align-self: start;
        z-index: 0;
    }

    main > form:has(> canvas + table) > canvas + table,
    :host > form:has(> canvas + table) > canvas + table {
        grid-area: 1 / 1;
        position: relative;
        z-index: 1;
        pointer-events: none;
    }

    main > form:has(> canvas + table) > canvas + table [aria-selected],
    :host > form:has(> canvas + table) > canvas + table [aria-selected] {
        pointer-events: auto;
    }

    aside {
        grid-area: aside;
        position: relative;
        inset: auto;
        z-index: 10;
        width: var(--aside-width);
        max-width: min(100%, var(--aside-width));
        max-height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    aside * {
        max-width: min(100%, var(--aside-width));
    }

    view-area::part(header) {
        border-bottom: var(--header-border);
    }

    /* Shared status/action layout; themes own surfaces and field borders. */
    footer {
        grid-area: footer;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        z-index: 1;
    }

    footer > output {
        flex: 1 1 auto;
        max-width: 100%;
        padding: var(--space-1) var(--space-3);
        margin: 0;
        overflow-wrap: anywhere;
    }

    footer > input {
        flex: 1 1 16ch;
        min-width: 0;
        max-width: 100%;
    }

    footer > button {
        flex-shrink: 0;
    }

    tbody {
        height: auto;
    }

    tr {
        height: auto;
    }

    section {
        display: flex;
        flex-direction: column;
    }

    pre {
        margin: 0;
        min-width: 0;
        min-height: 0;
        overflow: auto;
        white-space: pre-wrap;
        font-family: var(--font-mono);
    }

    pre > [data-element="output-line"] {
        display: block;
        color: var(--text);
    }

    pre > [data-element="output-spacer"] {
        display: block;
        height: 1lh;
    }

    output {
        display: block;
        min-width: 0;
        color: var(--text);
    }

    output.accent,
    .accent > output,
    output.success,
    .success > output,
    output.warning,
    .warning > output,
    output.danger,
    .danger > output,
    output.info,
    .info > output {
        color: var(--intent-soft-fg);
    }

    /* Guide primitives have a usable themeless appearance. Project themes
       override these in the theme layer; no particular theme is a fallback. */
    blockquote {
        margin: 0;
        padding: var(--space-5);
        border: 0;
        border-radius: 0;
        background: var(--surface);
        color: var(--text);
        /* Inset frame stays visible when an enclosing article scrolls/clips. */
        box-shadow:
            inset 0 0 0 1px var(--border),
            var(--shadow);
    }

    blockquote > header:first-child {
        margin: 0;
        padding: var(--space-3);
        background: var(--surface-elevated);
        color: var(--text);
        font-weight: 600;
    }

    blockquote > p {
        margin-bottom: var(--space-3);
    }
    blockquote > footer {
        margin-top: var(--space-4);
    }

    progress {
        display: block;
        width: 100%;
        height: 18px;
        box-sizing: border-box;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        overflow: hidden;
        appearance: none;
        background: var(--surface-elevated);
        accent-color: var(--intent);
    }

    progress::-webkit-progress-bar {
        background: var(--surface-elevated);
    }
    progress[value]::-webkit-progress-value {
        background: var(--intent);
    }
    progress[value]::-moz-progress-bar {
        background: var(--intent);
    }
    progress:not([value])::-webkit-progress-bar {
        background: linear-gradient(90deg, transparent, var(--intent), transparent) no-repeat;
        background-size: 40% 100%;
        animation: gams-progress-indeterminate 1.5s linear infinite;
    }
    progress:not([value])::-moz-progress-bar {
        background: linear-gradient(90deg, transparent, var(--intent), transparent) no-repeat;
        background-size: 40% 100%;
        animation: gams-progress-indeterminate 1.5s linear infinite;
    }

    @keyframes gams-progress-indeterminate {
        from {
            background-position: -70% 0;
        }
        to {
            background-position: 170% 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        progress:not([value])::-webkit-progress-bar {
            animation: none;
            background-position: 50% 0;
        }
        progress:not([value])::-moz-progress-bar {
            animation: none;
            background-position: 50% 0;
        }
    }

    /* Host-only startup positioning/layout. Appearance comes from the semantic
       primitives above and the Project theme, not a separate startup palette. */
    #gams-startup {
        position: fixed;
        inset: 0;
        z-index: 2147483646;
        display: grid;
        place-items: center;
        padding: var(--space-6);
        background: var(--bg);
        color: var(--text);
    }

    #gams-startup > article {
        width: min(720px, 100%);
        max-height: 100%;
        overflow: auto;
    }

    #gams-startup form {
        gap: var(--space-4);
        margin-top: var(--space-4);
        max-height: 38dvh;
        overflow: auto;
    }
    #gams-startup fieldset {
        flex-shrink: 0;
        gap: var(--space-2);
        padding: var(--space-3);
        min-width: 0;
    }
    #gams-startup fieldset:has(> output.success) {
        order: 1;
    }
    #gams-startup legend {
        padding-inline: var(--space-2);
        overflow-wrap: anywhere;
    }
    #gams-startup output {
        overflow-wrap: anywhere;
        white-space: normal;
    }
    #gams-startup fieldset progress {
        margin-top: var(--space-3);
    }
    #gams-startup button:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    fieldset {
        margin: 0;
        border: 1px solid var(--border);
        display: flex;
        flex-direction: column;
    }

    fieldset > canvas {
        align-self: center;
    }

    legend {
        color: inherit;
        font-size: var(--font-xs);
    }

    view-tooltip[data-tooltip-type="tip"] {
        pointer-events: none;
    }

    /* Selection state defaults; themes may override their appearance. */
    [aria-selected] {
        user-select: none;
        -webkit-user-select: none;
    }

    [aria-selected="true"] {
        background: var(--intent-soft-bg);
        color: var(--intent-soft-fg);
    }

    [aria-selected="true"]:not(:disabled, [aria-disabled="true"]):hover {
        background: var(--intent-hover-bg);
        color: var(--intent-fg);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     TABLES
     ═══════════════════════════════════════════════════════════════════════════ */
    table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
        color: inherit;
    }
    table:has(td > button) {
        table-layout: auto;
    }

    /* Selectable records are cells, not nested buttons. Static grid cells omit
       aria-selected and remain outside the interaction/focus contract. */
    table[role="grid"] > tbody > tr > td[role="gridcell"][aria-selected] {
        text-align: center;
        vertical-align: middle;
        user-select: none;
        cursor: pointer;
    }

    table[role="grid"] > tbody > tr > td[role="gridcell"][aria-selected]:focus-visible {
        outline: 2px solid var(--border-focus);
        outline-offset: -3px;
    }

    table[role="grid"] > tbody > tr > td[role="gridcell"][aria-disabled="true"] {
        cursor: default;
        opacity: 0.5;
    }

    table[role="grid"] > tbody > tr > td[role="gridcell"][aria-selected] > widget-animation-preview {
        display: block;
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
    }

    th,
    td {
        text-align: left;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    th[aria-sort] {
        cursor: pointer;
        user-select: none;
    }

    /* GAMS header controls: selection highlights; pressed controls depress. */
    th[role="button"]:is([aria-selected], [aria-pressed]) {
        user-select: none;
        -webkit-user-select: none;
    }

    th[role="button"]:is([aria-selected], [aria-pressed]):not([aria-disabled="true"]) {
        cursor: pointer;
    }

    th[role="button"][aria-selected="true"] {
        background: var(--intent-soft-bg);
        color: var(--intent-soft-fg);
    }

    th[role="button"][aria-selected="true"]:not([aria-disabled="true"]):hover {
        background: var(--intent-hover-bg);
        color: var(--intent-fg);
    }

    th[role="button"][aria-pressed] {
        background: var(--surface-elevated);
        color: var(--text);
        box-shadow: inset 1px 1px 0 rgb(255 255 255 / 0.12), inset -1px -1px 0 rgb(0 0 0 / 0.3);
    }

    th[role="button"][aria-pressed="false"]:not([aria-disabled="true"]):hover {
        background: var(--surface-hover);
    }

    th[role="button"][aria-pressed="true"],
    th[role="button"][aria-pressed]:not([aria-disabled="true"]):active {
        background: var(--surface);
        color: var(--text);
        box-shadow: inset 1px 1px 2px rgb(0 0 0 / 0.45), inset -1px -1px 0 rgb(255 255 255 / 0.08);
    }

    th[role="button"][aria-disabled="true"] {
        cursor: default;
        opacity: 0.5;
    }

    th:focus-visible {
        outline: 2px solid var(--border-focus);
        outline-offset: -3px;
    }

    th[aria-sort="ascending"]::after,
    th[aria-sort="descending"]::after {
        font-family: "Material Symbols Rounded";
        font-weight: 400;
        font-style: normal;
        font-size: inherit;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        white-space: nowrap;
        direction: ltr;
        font-feature-settings: "liga";
        font-variation-settings:
            "FILL" 0,
            "wght" 400,
            "GRAD" 0,
            "opsz" 14;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        vertical-align: middle;
        margin-inline-start: 0.25em;
    }

    th[aria-sort="ascending"]::after {
        content: "arrow_upward" / "";
    }

    th[aria-sort="descending"]::after {
        content: "arrow_downward" / "";
    }

    caption {
        text-align: left;
        border-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     TABS
     ═══════════════════════════════════════════════════════════════════════════ */
    [role="tablist"] {
        overflow: auto;
    }

    [role="tablist"] > [role="tab"] {
        flex: 0 0 clamp(4rem, 33%, 9rem);
        min-inline-size: 4rem;
        max-inline-size: 9rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    [role="tabpanel"] {
        min-inline-size: 0;
        min-block-size: 0;
    }

    [role="tabpanel"][hidden] {
        display: none !important;
    }
}

@layer theme {
    table[data-layout="separate"] {
        border-collapse: separate;
        border-spacing: var(--space-3);
    }

    table[data-layout="separate"] > tbody > tr > td,
    table[data-layout="separate"] > tbody > tr > th {
        vertical-align: top;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    table[role="grid"] > tbody > tr > td[role="gridcell"][aria-selected="false"]:not([aria-disabled="true"]):hover {
        background: var(--surface-hover);
    }

    [slot="header-controls"] > span[role="separator"] {
        width: 1px;
        height: 20px;
        background: var(--border);
    }

    widget-breadcrumbs,
    widget-breadcrumbs button,
    widget-breadcrumbs output {
        min-width: 0;
    }

    widget-breadcrumbs,
    widget-breadcrumbs button,
    widget-breadcrumbs output {
        display: flex;
        align-items: center;
    }

    widget-breadcrumbs {
        overflow: hidden;
    }

    widget-breadcrumbs button,
    widget-breadcrumbs output {
        flex: 0 1 auto;
        gap: var(--space-1);
        overflow: hidden;
        white-space: nowrap;
    }

    widget-breadcrumbs > i {
        flex: 0 0 auto;
    }

    widget-breadcrumbs button {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    widget-breadcrumbs span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    code-editor .code-editor-scroller > pre {
        color: var(--code-editor-text);
    }

    code-editor .code-editor-scroller > textarea {
        caret-color: var(--code-editor-caret);
    }

    /* corners */
    view--corner {
        z-index: var(--z-index-corner);
        position: absolute;
        width: var(--resize-handle-size);
        height: var(--resize-handle-size);
        cursor: nwse-resize;
    }

    view--corner.ne,
    view--corner.sw {
        cursor: nesw-resize;
    }

    view--corner:nth-of-type(1),
    view--corner:nth-of-type(2) {
        top: 0;
    }

    view--corner:nth-of-type(2),
    view--corner:nth-of-type(3) {
        right: 0;
    }

    view--corner:nth-of-type(3),
    view--corner:nth-of-type(4) {
        bottom: 0;
    }

    view--corner:nth-of-type(1),
    view--corner:nth-of-type(4) {
        left: 0;
    }

    /* handles */
    view--handle {
        z-index: var(--z-index-handle);
        width: var(--resize-handle-size);
        container-type: size;
        cursor: col-resize;
    }

    view--handle::before {
        content: "";
        position: absolute;
        inset: 0;
        cursor: inherit;
    }

    @container (min-aspect-ratio: 1) {
        view--handle::before {
            cursor: row-resize;
        }
    }

    .layout-try-rect {
        position: absolute;
        border: 2px solid var(--accent);
        background: color-mix(in oklab, var(--accent) 20%, transparent);
        border-radius: var(--radius-md);
        pointer-events: none;
        z-index: 20;
        display: none;
    }

    /* backdrop + centering layer */
    view-popup {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: center;
        padding: var(--space-6);
        box-sizing: border-box;
    }

    /* only the topmost popup is visible */
    popup-manager view-popup:not(:last-of-type) {
        display: none;
    }

    /* sizes — applied as light-DOM classes by view-popup.js */
    view-popup.popup-size-small {
        --popup-width: 360px;
    }

    view-popup.popup-size-medium {
        --popup-width: 560px;
    }

    view-popup.popup-size-large {
        --popup-width: 800px;
    }

    /* popup card (Shadow DOM parts) */
    view-popup::part(container) {
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
        width: min(var(--popup-width, 800px), 100%);
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        pointer-events: auto;
    }

    view-popup::part(header) {
        display: flex;
        align-items: center;
        border: var(--header-border);
    }

    view-popup::part(close) {
        margin-inline-start: auto;
        flex-shrink: 0;
    }

    view-popup::part(body) {
        min-height: 0;
        overflow: auto;
    }

    ::slotted([slot="title"]) {
        margin: 0;
        font-size: var(--font-lg);
        font-weight: 600;
        color: inherit;
    }

    ::slotted([slot="header-controls"]) {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
     TOASTS

     Positions (semantic):
       primary   – top-right stack, all visible
       secondary – bottom-center, only last visible
       modal     – dead-center, only last visible (alert / confirm)

     Type → intent class mapping (set by view-toast.js):
       info → .info,  success → .success,  warning → .warning,  error → .danger
     ═══════════════════════════════════════════════════════════════════════════ */

    view-toast {
        --spacing: var(--space-3);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        position: fixed;
        z-index: 10000;
        pointer-events: auto;
        max-width: calc(100vw - 2 * var(--spacing));
        box-sizing: border-box;

        /* default appearance — soft intent surface */
        background: var(--intent-soft-bg);
        border: 1px solid var(--intent-soft-border);
        color: var(--intent-soft-fg);
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-elevated);
    }

    view-toast[hidden] {
        display: none !important;
    }

    /* Toast messages are preformatted output: preserve line breaks and use monospace. */
    view-toast [data-element="message"] {
        display: block;
        flex: 1;
        min-width: 0;
        overflow: auto;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
        font-family: var(--font-mono);
    }

    /* close button */
    view-toast .toast-close {
        background: none;
        border: none;
        color: inherit;
        opacity: 0.6;
        padding: 0 var(--space-2);
        height: auto;
        min-width: 0;
        cursor: pointer;
    }

    view-toast .toast-close:hover {
        opacity: 1;
    }

    /* alert / confirm inner layout */
    view-toast .toast-container {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    view-toast .toast-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-2);
    }

    /* ── position: primary (top-right stack) ── */
    view-toast[position="primary"] {
        right: var(--spacing);
        --toast-stack-offset: 60px;
        top: calc(var(--spacing) + var(--toast-stack-index, 0) * var(--toast-stack-offset));
    }

    /* ── position: secondary (bottom-center, last only) ── */
    view-toast[position="secondary"] {
        bottom: var(--spacing);
        left: 50%;
        transform: translateX(-50%);
    }

    /* ── position: modal (center, last only — alert/confirm) ── */
    view-toast[position="modal"] {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}