/**
 * Published Default Theme - Complete Stylesheet
 * @generated by scripts/sync-active-theme.mjs
 * @url https://ui.mullmania.com/active/style.css
 * @documentation https://ui.mullmania.com/active/typography.html
 *
 * Entrypoint for the current published default theme.
 * Published theme: mockup
 * Published at: 2026-08-20T00:13:42Z
 * Published by: ui.mullmania.com
 *
 * Flattened from mockup/style.css: every relative
 * @import is inlined at build time so this file loads in a single request
 * with no render-blocking import chain. Edit the theme sources and re-run
 * scripts/sync-active-theme.mjs; do not edit this file by hand.
 */

/* ---------- mockup/style.css ---------- */
/**
 * Mockup Black + White Complete Stylesheet
 * @version 2.0.0
 * @url https://ui.mullmania.com/mockup/style.css
 */


/* ---------- mockup/colors.css ---------- */
/**
 * Mockup Black + White Colors
 * @version 2.0.0
 * @url https://ui.mullmania.com/mockup/colors.css
 *
 * Dendron-born white-field aesthetic: black structure, square geometry,
 * restrained grayscale hierarchy, and native system typography.
 */


/* ---------- core/colors.css ---------- */
/**
 * Core Shared Colors
 * @version 1.1.0
 * @url https://ui.mullmania.com/core/colors.css
 * @documentation https://ui.mullmania.com/active/typography.html
 *
 * FOR LLMs: See visual color swatches and usage examples at:
 * https://ui.mullmania.com/active/typography.html
 */

:root {
    /* ===== BRAND COLORS ===== */
    --color-primary: #2563eb;
    --color-secondary: #0f766e;
    --color-primary-hover: #1d4ed8;
    --color-secondary-hover: #115e59;
    --color-shell-accent: #ffc220;
    --color-shell-accent-hover: #e0a600;

    /* ===== BACKGROUNDS ===== */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-card: #f8f9fa;
    --bg-hover: #e5e7eb;

    /* ===== TEXT COLORS ===== */
    --text-primary: #000000;
    --text-secondary: #666666;
    /* Rated for WCAG AA (4.5:1) as normal text on every resting light surface:
       --bg-primary 5.05, --bg-secondary 4.83, --bg-card 4.79, --bg-tertiary 4.59.
       The previous #6b7484 was tuned against white alone (4.71) and fell under AA
       the moment it sat on anything darker — 4.47 on --bg-card, 4.28 on
       --bg-tertiary — which is how a consumer shipped 4.47 muted body copy.
       --bg-hover (#e5e7eb) is deliberately NOT in that list: clearing 4.5 there
       needs #606877, which is darker than --text-secondary and inverts the
       hierarchy, so muted text does not belong on a hover fill. Keep this
       lighter than --text-secondary; that ordering is the whole point of the
       token. */
    --text-muted: #676f7f;
    --text-dark: #374151;
    --text-on-primary: #ffffff;
    --text-on-secondary: #ffffff;

    /* ===== BORDERS ===== */
    --border-color: #dddddd;
    --border-light: #f3f4f6;
    --border-medium: #cccccc;
    --border-dark: #444444;

    /* ===== SEMANTIC COLORS ===== */
    --color-success: #4CAF50;
    --color-success-action: #28a745;
    --color-success-bg: #e8f5e9;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-danger-bg: #ffebee;
    --color-warning: #FF9800;
    --color-warning-bg: #fff3e0;
    --color-info: #2196F3;
    --color-info-bg: #e3f2fd;
    --color-error: #f44336;

    /* ===== DATA-VISUALIZATION CONTRACT =====
       Charts (heatmaps, line/bar/pie, gauges) read these tokens off the page,
       so the active theme — not the app — owns chart color. Switch the published
       theme and every chart recolors to match it, with no per-theme authoring:
       the palette is DERIVED from this theme's own semantic colors via var().
       getComputedStyle resolves the var() chain to hex, and consumers split on
       "," + parse hex — so every referenced token must resolve to a bare #rrggbb
       (no rgb()/hsl()/color-mix, which would introduce commas). Non-guaranteed
       tokens (info/success/warning/danger/hovers) carry fallbacks to the
       contract-guaranteed primary/secondary. Curated themes may override. */
    --chart-palette: var(--color-primary), var(--color-secondary), var(--color-primary-hover, var(--color-secondary)), var(--color-secondary-hover, var(--color-primary)), var(--color-info, var(--color-primary)), var(--color-success, var(--color-secondary)), var(--color-warning, var(--color-primary)), var(--color-danger, var(--color-secondary));
    --heatmap-ramp: var(--color-primary), var(--color-secondary);
    --heatmap-ramp-mode: continuous;
    --accent-primary: var(--color-primary);
    --accent-secondary: var(--color-secondary);
    --accent-tertiary: var(--color-info, var(--color-primary));
    --accent-quaternary: var(--color-success, var(--color-secondary));
    --accent-quinary: var(--color-warning, var(--color-primary));
    --accent-senary: var(--color-danger, var(--color-secondary));

    /* ===== SPACING SCALE ===== */
    /* --space-xxs was USED by core/layout.css and never defined, so every rule reaching for it
       resolved to nothing and silently lost its gap. Defining it here closes that, and gives
       consumers a real token below --space-xs instead of a hand-rolled 2px. */
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 64px;

    /* ===== TYPOGRAPHY ===== */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
    --font-hand: 'Patrick Hand', cursive;

    /* Semantic typography roles */
    --font-family-body: var(--font-family);
    --font-family-ui: var(--font-family);
    --font-family-heading: var(--font-family-ui);
    --font-family-display: var(--font-family);
    --font-family-label: var(--font-mono);
    --font-family-brand: var(--font-family-ui);

    /* Font Sizes */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 36px;
    --text-4xl: 48px;
    --text-5xl: 64px;
    --text-6xl: 96px;

    /* Semantic typography sizes */
    --font-size-body: var(--text-base);
    --font-size-label: var(--text-xs);
    --font-size-heading-1: var(--text-3xl);
    --font-size-heading-2: var(--text-2xl);
    --font-size-heading-3: var(--text-xl);
    --font-size-heading-4: var(--text-lg);
    --font-size-display: clamp(48px, 6vw, 96px);
    --font-size-brand: clamp(64px, 10vw, 156px);

    /* Font Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Semantic typography weights */
    --font-weight-body: var(--weight-normal);
    --font-weight-heading: var(--weight-semibold);
    --font-weight-display: var(--weight-medium);
    --font-weight-label: var(--weight-medium);
    --font-weight-brand: var(--weight-bold);

    /* Semantic typography rhythm */
    --line-height-body: 1.6;
    --line-height-heading: 1.1;
    --line-height-display: 0.96;
    --line-height-brand: 0.88;
    --letter-spacing-body: -0.01em;
    --letter-spacing-heading: -0.03em;
    --letter-spacing-display: -0.05em;
    --letter-spacing-brand: -0.08em;
    --letter-spacing-label: 0.12em;
    --text-transform-label: uppercase;

    /* ===== EFFECTS ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 50%;

    --radius-pill: 9999px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 0 20px var(--color-primary);

    --transition-fast: 0.1s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ===== Z-INDEX LAYERS ===== */
    --z-base: 1;
    --z-sidebar: 900;
    --z-dropdown: 1000;
    --z-modal: 10000;
    --z-tooltip: 100000;

    /* ===== DISABLED STATES ===== */
    --button-disabled-bg: #e9ecef;
    --button-disabled-text: #6c757d;
    --button-disabled-border: #dee2e6;
    --input-disabled-bg: #e9ecef;
}

/* ==================== DARK MODE THEME ==================== */

:root[data-ui-mode="dark"],
body[data-ui-mode="dark"],
body.dark-mode,
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-card: #1a1a1a;
    --bg-hover: #3a3a3a;

    --text-primary: #ffffff;
    /* ff8df6c raised dark muted from #666666 to #949494 to fix its contrast and
       nudged secondary #888888 -> #959595 alongside it, which left the two one
       unit apart — the same colour, and no hierarchy at all. Muted cannot move:
       #949494 is exactly its floor, and #939393 already drops to 4.48 on
       --bg-secondary. So secondary is the one that moves.
       #a8a8a8 gives 7.32 on --bg-primary/--bg-card, 5.79 on --bg-secondary and
       4.78 on --bg-tertiary/--bg-hover — AA on every dark surface, and a clearly
       visible step above muted. That profile is not invented: it is what the
       simple theme already does well (secondary 7.43, muted 5.34), in a neutral
       grey to match this palette.
       Same rating split as light mode: secondary is rated for every surface
       including hover fills; muted is rated for the resting surfaces only
       (5.74 primary/card, 4.54 secondary) and sits at 3.75 on
       --bg-tertiary/--bg-hover, which no muted value can clear without passing
       secondary and inverting the two. Keep secondary lighter than muted. */
    --text-secondary: #a8a8a8;
    --text-muted: #949494;
    --text-dark: #cccccc;

    --border-color: #444444;
    --border-light: #333333;
    --border-medium: #444444;
    --border-dark: #555555;

    --button-disabled-bg: #3a3a3a;
    --button-disabled-text: #888888;
    --button-disabled-border: #555555;
    --input-disabled-bg: #3a3a3a;

    --color-success-bg: #1b3d1f;
    --color-danger-bg: #4a1a1a;
}

/* ==================== COLOR SWAP MODE ==================== */

body.color-swap {
    --color-primary: #FFC220;
    --color-secondary: #0071CE;
}

/* ==================== RETRO MODE (Fuchsia & Lime) ==================== */

body.retro-mode {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #1a1a1a;
    --text-primary: #00ff00;
    --text-secondary: #00cc00;
    --text-muted: #009900;
    --border-color: #ff00ff;
    --border-light: #330033;
    --color-primary: #ff00ff;
    --color-secondary: #00ff00;
    --bg-hover: #1a001a;
}

body.retro-mode.retro-variant {
    --color-primary: #00ff00;
    --color-secondary: #ff00ff;
}

/* ==================== MOCKUP MODE (Dendron Black + White) ==================== */

body.theme-mockup {
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-family-body: var(--font-family);
    --font-family-ui: var(--font-family);
    --font-family-heading: var(--font-family);
    --font-family-display: var(--font-family);
    --font-family-label: var(--font-mono);
    --font-family-brand: var(--font-family);
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-pill: 0;
    --radius-full: 50%;
    --transition-fast: 120ms ease-out;
    --transition-base: 180ms ease-out;
    --transition-slow: 260ms ease-out;
}

body.theme-mockup:not([data-ui-mode="dark"]) {
    --bg-primary: #ffffff;
    --bg-secondary: #f7f7f7;
    --bg-tertiary: #ededed;
    --bg-card: #ffffff;
    --bg-hover: #f1f1f1;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #666666;
    --border-color: #000000;
    --border-light: #d8d8d8;
    --border-medium: #888888;
    --border-dark: #000000;
    --color-primary: #000000;
    --color-secondary: #3f3f3f;
    --color-primary-hover: #202020;
    --color-secondary-hover: #222222;
    --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.08);
    --shadow-md: 4px 4px 0 rgba(0, 0, 0, 0.08);
    --shadow-lg: 8px 8px 0 rgba(0, 0, 0, 0.08);
    --shadow-hover: 3px 3px 0 rgba(0, 0, 0, 0.12);
}

body.theme-mockup[data-ui-mode="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #0c0c0c;
    --bg-tertiary: #181818;
    --bg-card: #000000;
    --bg-hover: #171717;
    --text-primary: #ffffff;
    --text-secondary: #d0d0d0;
    --text-muted: #a0a0a0;
    --text-dark: #ffffff;
    --text-on-primary: #000000;
    --border-color: #ffffff;
    --border-light: #303030;
    --border-medium: #a0a0a0;
    --border-dark: #ffffff;
    --color-primary: #ffffff;
    --color-secondary: #d0d0d0;
    --color-primary-hover: #e4e4e4;
    --color-secondary-hover: #ffffff;
    --shadow-sm: 2px 2px 0 rgba(255, 255, 255, 0.12);
    --shadow-md: 4px 4px 0 rgba(255, 255, 255, 0.12);
    --shadow-lg: 8px 8px 0 rgba(255, 255, 255, 0.12);
    --shadow-hover: 3px 3px 0 rgba(255, 255, 255, 0.18);
}

/* ==================== HACKER MODE (Orange Terminal) ==================== */

body.theme-hacker {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #1a1a1a;
    --text-primary: #ff6600;
    --text-secondary: #ff8833;
    --text-muted: #cc5500;
    --border-color: #ff6600;
    --color-primary: #ff6600;
    --color-secondary: #ff8833;
    --font-family: 'Roboto Mono', monospace;
    --shadow-sm: 0 0 5px var(--color-primary);
    --shadow-md: 0 0 10px var(--color-primary);
    --shadow-lg: 0 0 15px var(--color-primary);
    --shadow-hover: 0 0 20px var(--color-primary);
}


:root {
    --mockup-black: #000000;
    --mockup-ink: #333333;
    --mockup-gray: #666666;
    --mockup-paper: #ffffff;

    --color-primary: #000000;
    --color-secondary: #3f3f3f;
    --color-primary-hover: #202020;
    --color-secondary-hover: #222222;
    --color-primary-soft: #f1f1f1;
    --color-secondary-soft: #e7e7e7;
    /* Mid gray: the shell is black here, so a black accent vanished on it
       (masthead title icon). #8a8a8a is 6.1:1 on the black shell and 3.4:1 on
       the white page, where tab-state and pager accents also use it. */
    --color-shell-accent: #8a8a8a;
    --color-shell-accent-hover: #a3a3a3;

    --bg-primary: #ffffff;
    --bg-secondary: #f7f7f7;
    --bg-tertiary: #ededed;
    --bg-card: #ffffff;
    --bg-card-soft: #f7f7f7;
    --bg-hover: #f1f1f1;
    --bg-overlay: rgba(0, 0, 0, 0.68);

    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #666666;
    --text-very-muted: #757575;
    --text-dark: #000000;
    --text-on-primary: #ffffff;
    --text-on-secondary: #ffffff;

    --border-color: #000000;
    --border-light: #d8d8d8;
    --border-medium: #888888;
    --border-dark: #000000;

    --color-success: #000000;
    --color-success-action: #202020;
    --color-success-bg: #f1f1f1;
    --color-danger: #000000;
    --color-danger-hover: #202020;
    --color-danger-bg: #ededed;
    --color-warning: #3f3f3f;
    --color-warning-bg: #f7f7f7;
    --color-info: #000000;
    --color-info-bg: #f1f1f1;
    --color-error: #000000;

    --chart-palette: #000000, #333333, #666666, #999999, #c4c4c4, #e0e0e0;
    --heatmap-ramp: #ffffff, #cfcfcf, #888888, #3f3f3f, #000000;
    --heatmap-ramp-mode: discrete;
    --accent-primary: #000000;
    --accent-secondary: #333333;
    --accent-tertiary: #666666;
    --accent-quaternary: #999999;
    --accent-quinary: #c4c4c4;
    --accent-senary: #e0e0e0;

    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-display: var(--font-family);
    --font-family-body: var(--font-family);
    --font-family-ui: var(--font-family);
    --font-family-heading: var(--font-family);
    --font-family-display: var(--font-family);
    --font-family-label: var(--font-mono);
    --font-family-brand: var(--font-family);

    --font-weight-heading: 700;
    --font-weight-display: 700;
    --font-weight-label: 600;
    --font-weight-brand: 800;
    --line-height-body: 1.5;
    --line-height-heading: 1.05;
    --letter-spacing-body: -0.01em;
    --letter-spacing-heading: -0.035em;
    --letter-spacing-display: -0.045em;
    --letter-spacing-brand: -0.06em;
    --letter-spacing-label: 0.1em;
    --text-transform-label: uppercase;

    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-pill: 0;
    --radius-full: 50%;

    --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.08);
    --shadow-md: 4px 4px 0 rgba(0, 0, 0, 0.08);
    --shadow-lg: 8px 8px 0 rgba(0, 0, 0, 0.08);
    --shadow-hover: 3px 3px 0 rgba(0, 0, 0, 0.12);

    --transition-fast: 120ms ease-out;
    --transition-base: 180ms ease-out;
    --transition-slow: 260ms ease-out;

    --button-disabled-bg: #ededed;
    --button-disabled-text: #666666;
    --button-disabled-border: #888888;
    --input-disabled-bg: #f1f1f1;
}

:root[data-ui-mode="dark"],
body[data-ui-mode="dark"],
body.dark-mode,
[data-theme="dark"] {
    --color-primary: #ffffff;
    --color-secondary: #d0d0d0;
    --color-primary-hover: #e4e4e4;
    --color-secondary-hover: #ffffff;
    --color-primary-soft: #171717;
    --color-secondary-soft: #222222;
    /* Inverse of light mode: 4.5:1 on the white shell, 4.6:1 on the black page. */
    --color-shell-accent: #767676;
    --color-shell-accent-hover: #5c5c5c;

    --bg-primary: #000000;
    --bg-secondary: #0c0c0c;
    --bg-tertiary: #181818;
    --bg-card: #000000;
    --bg-card-soft: #0c0c0c;
    --bg-hover: #171717;
    --bg-overlay: rgba(255, 255, 255, 0.72);

    --text-primary: #ffffff;
    --text-secondary: #d0d0d0;
    --text-muted: #a0a0a0;
    --text-very-muted: #858585;
    --text-dark: #ffffff;
    --text-on-primary: #000000;
    --text-on-secondary: #000000;

    --border-color: #ffffff;
    --border-light: #303030;
    --border-medium: #a0a0a0;
    --border-dark: #ffffff;

    --color-success: #ffffff;
    --color-success-action: #e4e4e4;
    --color-success-bg: #171717;
    --color-danger: #ffffff;
    --color-danger-hover: #e4e4e4;
    --color-danger-bg: #181818;
    --color-warning: #d0d0d0;
    --color-warning-bg: #0c0c0c;
    --color-info: #ffffff;
    --color-info-bg: #171717;
    --color-error: #ffffff;

    --chart-palette: #ffffff, #d0d0d0, #a0a0a0, #707070, #3f3f3f, #202020;
    --heatmap-ramp: #000000, #303030, #707070, #b0b0b0, #ffffff;
    --accent-primary: #ffffff;
    --accent-secondary: #d0d0d0;
    --accent-tertiary: #a0a0a0;
    --accent-quaternary: #707070;
    --accent-quinary: #3f3f3f;
    --accent-senary: #202020;

    --shadow-sm: 2px 2px 0 rgba(255, 255, 255, 0.12);
    --shadow-md: 4px 4px 0 rgba(255, 255, 255, 0.12);
    --shadow-lg: 8px 8px 0 rgba(255, 255, 255, 0.12);
    --shadow-hover: 3px 3px 0 rgba(255, 255, 255, 0.18);

    --button-disabled-bg: #181818;
    --button-disabled-text: #858585;
    --button-disabled-border: #707070;
    --input-disabled-bg: #0c0c0c;
}


/* ---------- mockup/layout.css ---------- */
/**
 * Mockup Black + White Layout
 * @version 2.0.0
 * @url https://ui.mullmania.com/mockup/layout.css
 *
 * Dendron-born composition: white field, black structure, square controls,
 * sparse chrome, and a restrained inspector hierarchy.
 */


/* ---------- core/layout.css ---------- */
/**
 * Core Shared Layout
 * @version 1.1.0
 * @url https://ui.mullmania.com/core/layout.css
 * @documentation https://ui.mullmania.com/active/typography.html
 *
 * NOTE: Uses CSS Grid exclusively - NO FLEXBOX
 *
 * FOR LLMs: See visual examples of all components, grid layouts, and usage at:
 * https://ui.mullmania.com/active/typography.html
 */


/* ---------- core/surface-shell.css ---------- */
/**
 * Shared surface shell primitives for framework-owned mastheads, toolbars,
 * chips, and context rails.
 */

.surface-masthead {
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    color: var(--text-on-primary);
    background: var(--color-primary);
    box-shadow: var(--shadow-md);
    transition: opacity 220ms ease, transform 220ms ease;
}

.surface-masthead__brand,
.surface-masthead__search-slot,
.surface-masthead__actions {
    min-width: 0;
}

.surface-masthead__title {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    color: var(--text-on-primary);
    font-size: 20px;
    font-weight: var(--weight-bold);
    line-height: 1;
    white-space: nowrap;
}

.surface-masthead__title i {
    color: var(--color-shell-accent, var(--color-secondary));
    font-size: 0.8em;
}

.surface-masthead__search {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 5px var(--space-sm);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.surface-masthead__search::placeholder {
    color: var(--text-muted);
}

.surface-masthead__search:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 1px;
}

.surface-masthead__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 4px;
    align-items: center;
    justify-content: end;
}

.surface-shell-action,
button.surface-shell-action {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: var(--space-xs);
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    /* One height for every form. The <button> form used to stop at 32px while
       the global 44px button minimum stretched it, so buttons and the
       <label> select shell rendered at different heights in one row. The
       masthead search field is a 44px input, so the whole row sits at the
       shared 44px interaction target. */
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transform: none;
}

.surface-shell-action:hover,
button.surface-shell-action:hover,
.surface-shell-action:focus-visible,
button.surface-shell-action:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    transform: none;
}

.surface-shell-action--icon,
button.surface-shell-action--icon {
    inline-size: 44px;
    min-inline-size: 44px;
    padding: 0;
}

.surface-shell-action--icon span {
    display: none;
}

.surface-shell-action--select-shell {
    position: relative;
    min-width: 128px;
    padding-right: 28px;
}

.surface-shell-action--select-shell:focus-within {
    background: rgba(255, 255, 255, 0.16);
}

.surface-shell-action__select-input {
    /* The global select min-height (44px) and padding would push the control
       past its shell; the shell owns the height and the select fills it. */
    align-self: stretch;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0 18px 0 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    appearance: none;
    cursor: pointer;
    outline: none;
}

.surface-shell-action__select-input option {
    color: var(--text-primary);
}

.surface-shell-action__select-caret {
    position: absolute;
    right: 10px;
    pointer-events: none;
    opacity: 0.84;
}

.surface-toolbar {
    display: grid;
    gap: 4px;
    padding: 6px 10px;
}

.surface-toolbar__row {
    display: grid;
    gap: 4px;
    align-items: center;
}

.surface-toolbar__row--split {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    min-height: 26px;
    overflow: hidden;
}

.surface-chip-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 4px;
    align-items: center;
    min-height: 26px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.surface-chip-bar::-webkit-scrollbar {
    height: 6px;
}

.surface-chip-bar::-webkit-scrollbar-thumb {
    background: var(--color-shell-accent, var(--color-secondary));
    border: 0;
    border-radius: 999px;
}

.surface-context-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: end;
    gap: 6px;
    align-items: center;
    min-height: 26px;
    min-width: 0;
}

.surface-context-slot {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 6px;
    justify-content: end;
    justify-items: end;
    align-items: center;
    min-height: 26px;
    min-inline-size: 142px;
}

.surface-context-slot[data-selection-active="false"] .surface-chip--selection {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-1px);
}

.surface-toggle-group,
.surface-status-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 4px;
    align-items: center;
}

.surface-chip,
button.surface-chip,
.surface-toggle,
button.surface-toggle {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 6px;
    align-items: center;
    width: auto;
    min-width: 0;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    transform: none;
}

.surface-chip:hover,
button.surface-chip:hover,
.surface-chip:focus-visible,
button.surface-chip:focus-visible,
.surface-toggle:hover,
button.surface-toggle:hover,
.surface-toggle:focus-visible,
button.surface-toggle:focus-visible {
    border-color: var(--color-primary);
    color: var(--text-primary);
    transform: none;
}

.surface-chip.is-active,
.surface-toggle.is-active {
    border-color: var(--color-primary);
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.surface-chip--manager,
button.surface-chip--manager {
    padding: 0 11px;
    font-weight: var(--weight-semibold);
}

.surface-chip--quiet,
button.surface-chip--quiet {
    padding: 0 10px;
    border-color: color-mix(in srgb, var(--border-color) 88%, white);
    background: color-mix(in srgb, var(--bg-primary) 88%, white);
    color: var(--text-secondary);
}

.surface-chip--quiet:hover:not(:disabled),
button.surface-chip--quiet:hover:not(:disabled),
.surface-chip--quiet:focus-visible,
button.surface-chip--quiet:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 38%, var(--border-color));
    color: var(--text-primary);
}

.surface-chip__glyph {
    display: inline-block;
    letter-spacing: 0.12em;
    transform: translateY(-1px);
}

.surface-chip__count {
    display: grid;
    place-items: center;
    min-width: 18px;
    min-height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-primary));
    color: inherit;
    font-size: 10px;
    font-weight: var(--weight-bold);
}

.surface-status-pill {
    display: grid;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .surface-masthead {
        grid-template-columns: 1fr;
        padding: var(--space-sm);
    }

    .surface-masthead__actions {
        justify-content: start;
    }

    .surface-toolbar__row--split {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .surface-chip-bar {
        order: 2;
    }

    .surface-context-actions {
        order: 1;
        justify-content: start;
    }

    .surface-context-slot {
        justify-content: start;
        justify-items: start;
    }
}


/* ---------- js/tag-search.css ---------- */
/**
 * Tag Search — Canon Primitive styles (pairs with js/tag-search.js)
 * @url https://ui.mullmania.com/js/tag-search.css
 *
 * Two surfaces, one state:
 *   • Easy mode  — always-visible labeled facet chips (.tag-search__facets).
 *   • Advanced   — tokenized search box (.tag-search__field) with field:value pills.
 *   • Dropdown   — optional "Filters" menu (.tag-search__menu).
 * Used options gray out via .is-selected (or hide under .tag-search--hide-selected).
 * Pills/chips reuse the shared .surface-chip primitive (core/surface-shell.css);
 * rail padding comes from .sidebar-filter-rail (core/layout.css).
 */

.tag-search {
    display: grid;
    gap: 10px;
    min-width: 0;
}

/* ── Advanced token box ── */
.tag-search__field {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-primary);
    min-width: 0;
}

.tag-search__field:focus-within {
    border-color: var(--color-primary);
}

.tag-search__icon {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 14px;
}

.tag-search__entry {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.tag-search__input {
    flex: 1 1 80px;
    min-width: 80px;
    padding: 3px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
}

.tag-search__input::placeholder {
    color: var(--text-muted);
}

.tag-search__pill {
    cursor: default;
    padding-right: 5px;
}

.tag-search__pill-token {
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 11px;
    letter-spacing: -0.01em;
}

.tag-search__pill-remove {
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    margin-left: 1px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.tag-search__pill-remove:hover {
    background: color-mix(in srgb, currentColor 18%, transparent);
}

.tag-search__clear {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.tag-search__clear:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.tag-search__clear[hidden] {
    display: none;
}

/* ── Easy-mode facet chips ── */
.tag-search__facets {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.tag-search__facet-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.tag-search__facet-label {
    flex: 1 0 100%;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: var(--weight-bold, 700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tag-search__facet-chip {
    cursor: pointer;
}

/* selected options gray out of the "available" pool (still clickable to remove) */
.tag-search__facet-chip.is-selected,
.tag-search__opt.is-selected {
    opacity: 0.4;
}

.tag-search__facet-chip.is-selected {
    border-style: dashed;
}

.tag-search__facet-chip.is-selected:hover {
    opacity: 0.7;
}

.tag-search--hide-selected .is-selected {
    display: none;
}

/* a wrapping row of chips per group */
.tag-search__facet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* ── Dropdown (optional) ── */
.tag-search__menu-wrap {
    position: relative;
    flex: 0 0 auto;
}

.tag-search__menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 8px 0 9px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: var(--weight-semibold, 600);
    cursor: pointer;
    white-space: nowrap;
}

.tag-search__menu-btn:hover,
.tag-search--open .tag-search__menu-btn {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tag-search__menu-caret {
    font-size: 13px;
    transition: transform 0.15s ease;
}

.tag-search--open .tag-search__menu-caret {
    transform: rotate(180deg);
}

.tag-search__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    display: grid;
    gap: 8px;
    width: max-content;
    min-width: 220px;
    max-width: min(320px, 86vw);
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-primary);
    box-shadow: var(--shadow-md, 0 12px 36px rgba(15, 23, 42, 0.16));
}

.tag-search__menu[hidden] {
    display: none;
}

.tag-search__menu-group {
    display: grid;
    gap: 2px;
}

.tag-search__menu-label {
    padding: 2px 6px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: var(--weight-bold, 700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tag-search__opt {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.tag-search__opt:hover {
    background: var(--bg-tertiary);
}

.tag-search__opt-check {
    font-size: 14px;
    color: var(--color-primary);
    visibility: hidden;
}

.tag-search__opt.is-selected .tag-search__opt-check {
    visibility: visible;
}

.tag-search__opt-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-search__opt-token {
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 10px;
    color: var(--text-muted);
}

.tag-search__opt-count {
    display: grid;
    place-items: center;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-secondary));
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: var(--weight-bold, 700);
}


/* ==================== BASE STYLES ==================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

html {
    height: 100%;
}

body {
    font-family: var(--font-family-body, var(--font-family));
    font-size: var(--font-size-body, var(--text-base));
    line-height: var(--line-height-body, 1.5);
    letter-spacing: var(--letter-spacing-body, normal);
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.tab-navigation-bottom,
body.tab-navigation-pager,
.ui-shell-root.tab-navigation-bottom,
.ui-shell-root.tab-navigation-pager {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

body.tab-navigation-hidden,
.ui-shell-root.tab-navigation-hidden {
    grid-template-rows: auto minmax(0, 1fr);
}

body.ui-extension-popup-shell,
body:has(> .ui-extension-popup) {
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: auto;
}

.ui-extension-popup {
    --ui-extension-popup-width: 380px;
    display: grid;
    gap: var(--space-md);
    width: var(--ui-extension-popup-width);
    max-width: 800px;
    max-height: 600px;
    min-width: 25px;
    min-height: 25px;
    padding: var(--space-md);
    overflow: auto;
    color: var(--text-primary);
    background: var(--bg-primary);
}

.ui-extension-popup--compact {
    --ui-extension-popup-width: 320px;
}

.ui-extension-popup--wide {
    --ui-extension-popup-width: 480px;
}

.ui-shell-root {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.tab-navigation-bottom #tabs-container,
body.tab-navigation-pager #tabs-container,
.ui-shell-root.tab-navigation-bottom #tabs-container,
.ui-shell-root.tab-navigation-pager #tabs-container {
    grid-row: 3;
}

body.tab-navigation-bottom #content-container,
body.tab-navigation-pager #content-container,
.ui-shell-root.tab-navigation-bottom #content-container,
.ui-shell-root.tab-navigation-pager #content-container {
    grid-row: 2;
}

/* Container wrapper (for apps that use .container instead of body grid) */
.container {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: var(--space-lg);
}

/* Page container (for documentation/content pages) */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* A DOCUMENT page scrolls. body is pinned to height:100vh + overflow:hidden for the APP shell,
   whose fixed inner region owns the scrollbar — correct there, wrong for shell rule 1
   (.header + #content-container + .page-container), where the page itself is the scrolling thing.
   Every document consumer therefore had to override html/body geometry locally, which is a theme
   override the canon forbids and the only way their pages worked at all.
   A page carrying .page-container and no #tabs-container is a document by the shell contract, so
   the canon can tell, and no consumer needs to fight it. */
body:has(> #content-container > .page-container):not(:has(#tabs-container)),
body:has(> .page-container):not(:has(#tabs-container)) {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

/* Content container for the shared shell */
#content-container, #tabs-container {
    width: 100%;
    min-width: 0;
}

#content-container {
    /* Canonical scroll owner per llm-docs ("the framework's scroll container").
     * Body is grid-row-locked to viewport, so document-shell pages taller
     * than the viewport must scroll *here*. Tool surfaces with an inner
     * workspace that owns its own scroll won't trigger this — overflow-y:auto
     * only paints a bar when content exceeds the box.
     *
     * Was overflow:hidden, which silently clipped any document-shell page
     * taller than the viewport — mouse-wheel and keyboard scroll appeared
     * dead because no element advertised itself as the scroll owner. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto !important;
    position: relative;
    z-index: 0;
}

/* Workspace tabs already divide their fixed-height shell into independently
 * scrolling regions. Keep the shared container out of that scroll chain so a
 * tall detail pane cannot pull the sidebar or fixed detail header with it.
 * Document/single tabs retain the shared container's normal page scrolling. */
#content-container[data-ui-active-layout="workspace"] {
    overflow-y: hidden;
}

/* Per-tab persistent wrapper — the framework mounts each tab into its own
 * <div data-tab-id="..."> child of #content-container and toggles visibility
 * on tab switch instead of wiping the DOM. The wrapper fills the content
 * container so the workspace layout's height:100% chain still resolves. */
#content-container > [data-tab-id] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

/* Component-only tabs can declare the same pinned header as workspaces.
 * The runtime mounts these two direct children instead of a workspace grid.
 * Override its visible-panel utility only for this shape; hidden tabs and
 * ordinary document tabs retain their existing display and scroll behavior. */
#content-container > [data-tab-id]:not([hidden]):has(> .tab-custom-header):has(> .tab-scrollable-content) {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

#content-container > [data-tab-id]:has(> .tab-custom-header) > .tab-scrollable-content {
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

textarea, input, pre, code {
    user-select: text;
}

/* ==================== CANVAS WORKSPACE ==================== */

.section.active.section--canvas-workspace {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

@supports selector(.section:has(> .canvas-workspace-host)) {
    .section.active:has(> .canvas-workspace-host) {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
}

.canvas-workspace-host {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.canvas-workspace-host > .canvas-workspace {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
}

.canvas-workspace {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-secondary);
    color: var(--text-primary);
    isolation: isolate;
}

.canvas-workspace--fill {
    width: 100%;
    height: 100%;
}

.canvas-workspace__viewport,
.canvas-workspace__frame,
.canvas-workspace__stage {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
}

.canvas-workspace__viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.canvas-workspace__frame {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
}

.canvas-workspace--align-center .canvas-workspace__frame {
    place-items: center;
}

.canvas-workspace--align-top-left .canvas-workspace__frame {
    place-items: start;
}

.canvas-workspace--size-actual .canvas-workspace__viewport {
    overflow: auto;
}

.canvas-workspace--size-actual .canvas-workspace__frame {
    width: max(100%, var(--canvas-stage-display-width, 100%));
    height: max(100%, var(--canvas-stage-display-height, 100%));
}

.canvas-workspace__stage {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Checkerboard work-surface recipe. Single source of truth:
   .surface-checkerboard is the detached modifier for any pane that needs the
   work-canvas background without adopting the canvas-workspace shell (no
   overflow or sizing coupling). The canvas-workspace stage shares it. */
.surface-checkerboard,
.canvas-workspace--checkerboard .canvas-workspace__stage {
    background-color: var(--bg-primary);
    background-image:
        linear-gradient(45deg, var(--border-light) 25%, transparent 25%),
        linear-gradient(-45deg, var(--border-light) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--border-light) 75%),
        linear-gradient(-45deg, transparent 75%, var(--border-light) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.canvas-workspace__layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    touch-action: none;
}

.canvas-workspace__empty-state {
    position: absolute;
    z-index: 100;
    inset: 0;
    display: grid;
    min-width: 0;
    min-height: 0;
    pointer-events: none;
}

.canvas-workspace__empty-state[hidden] {
    display: none;
}

/* ==================== SCROLLBAR STYLING (Yellow) ==================== */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-secondary) var(--bg-tertiary);
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

*::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: 6px;
    border: 2px solid var(--bg-tertiary);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary-hover);
}

/* Mouse focus stays visually quiet, while keyboard focus is unmistakable on
   every native and custom interactive control. Component-level focus styles
   may add color/background treatment without having to recreate the ring. */
*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 3px solid var(--color-primary, #2563eb) !important;
    outline-offset: 3px !important;
}

/* ==================== FORM CONTROLS ==================== */

input[type="checkbox"],
input[type="radio"],
input[type="range"],
select {
    accent-color: var(--color-primary);
}

/* ==================== BUTTONS ==================== */

button,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-cancel {
    font-family: var(--font-family-ui, var(--font-family));
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    background: var(--color-primary);
    /* Ink is the theme's pairing for this fill, never a literal. A literal
       #ffffff was white-on-white in every theme whose dark mode flips the
       primary to white (blackwhite, mockup, monochrome) and near-invisible on
       the bright primaries (ghoul, terminal, precog, pastelzom). */
    color: var(--text-on-primary, #ffffff);
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Auto preserves intrinsic sizing in inline/flex contexts while allowing
       the grid item's default justify-self: stretch to fill its track. */
    width: auto;
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
}

/* The global hover fill only reaches buttons nobody has styled. As a plain
   `button:hover` it was (0,1,1) and outranked every single-class component
   (0,1,0): a light button with dark ink turned black under its own dark ink on
   hover, so labels and icons vanished exactly when pointed at. Five components
   below carried their own workaround for it. :where() holds this rule at the
   specificity of `button` itself, so any class that sets a background also owns
   its hover. Engines without :where() drop this rule and simply show no hover
   fill on unstyled buttons, which is harmless. */
button:where(:hover) {
    background: var(--color-primary-hover);
}

button:disabled,
button.button-disabled {
    background: var(--button-disabled-bg) !important;
    color: var(--button-disabled-text) !important;
    border: 1px solid var(--button-disabled-border) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Disabled buttons render at full opacity by default (the disabled palette
   already reads as disabled; a fade on top double-dims it). :where() keeps this
   at the specificity of `button` and it is not !important, so a component can
   still fade or hide its own disabled state, e.g. an empty-search clear button
   at opacity: 0. Components that restyle disabled colors use
   `.component:disabled { … !important }`, which outranks the rule above. */
button:where(:disabled, .button-disabled) {
    opacity: 1;
}

/* Button Variants */
.btn-primary,
button.btn-primary,
.btn-secondary,
button.secondary,
.btn-danger,
button.btn-danger,
.btn-cancel,
button.cancel {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    text-decoration: none;
}

.btn-primary,
button.btn-primary {
    background: var(--color-primary);
    color: var(--text-on-primary, #ffffff);
}

.btn-primary:hover,
button.btn-primary:hover {
    background: var(--color-primary-hover);
    /* Re-assert the button's own text colour on hover. .btn-primary is often an
       <a>, and the global `a:hover` rule (specificity 0,1,1) outranks a bare
       `.btn-primary` (0,1,0) — so without this it repaints the label with the
       link-hover colour (the same dark shade as this hover background, making the
       text vanish) and underlines it. `.btn-primary:hover` is (0,2,0), so it wins. */
    color: var(--text-on-primary, #ffffff);
    text-decoration: none;
}

.btn-secondary,
button.secondary {
    background: var(--bg-tertiary);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover,
button.secondary:hover {
    background: var(--bg-hover);
}

.btn-danger,
button.btn-danger {
    background: var(--color-danger);
    color: #ffffff;
}

.btn-danger:hover,
button.btn-danger:hover {
    background: var(--color-danger-hover);
}

.btn-cancel,
button.cancel {
    background: var(--color-secondary);
    color: var(--text-on-secondary, var(--text-primary));
    font-weight: var(--weight-semibold);
}

.btn-cancel:hover,
button.cancel:hover {
    background: var(--color-secondary-hover);
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: var(--weight-normal);
}

/*
 * Button-shaped anchors are buttons, not links.
 * The base `a:hover` rule (specificity 0,1,1) outranks the flat
 * `.btn-primary` color (0,1,0), so an `<a class="btn-primary">` repaints its
 * label to --color-primary-hover and underlines on hover — invisible on the
 * filled button. These hover/focus-visible rules (0,2,1) outrank `a:hover`
 * and restore each variant's resting text color while dropping the underline.
 * Values mirror the resting declarations above so no theme regresses.
 * `.btn-link` is intentionally excluded: it is a real link affordance.
 */
a.btn-primary:hover,
a.btn-primary:focus-visible {
    color: var(--text-on-primary, #ffffff);
    text-decoration: none;
}

a.btn-danger:hover,
a.btn-danger:focus-visible {
    color: #ffffff;
    text-decoration: none;
}

a.btn-secondary:hover,
a.btn-secondary:focus-visible {
    color: var(--text-dark);
    text-decoration: none;
}

a.btn-cancel:hover,
a.btn-cancel:focus-visible {
    color: var(--text-on-secondary, var(--text-primary));
    text-decoration: none;
}

.btn-with-icon {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.icon-button,
button.icon-button {
    display: inline-grid;
    place-items: center;
    inline-size: 40px;
    min-inline-size: 40px;
    block-size: 40px;
    padding: 0;
    line-height: 1;
}

.icon-button .ti,
button.icon-button .ti {
    margin: 0;
}

.icon-button--sm,
button.icon-button--sm {
    inline-size: 32px;
    min-inline-size: 32px;
    block-size: 32px;
}

/* Extra-small icon button (24px) — dismiss ×, chip/inline actions. */
.icon-button--xs,
button.icon-button--xs {
    inline-size: 24px;
    min-inline-size: 24px;
    block-size: 24px;
}

/* Quiet icon button — transparent until it hovers to primary; for secondary/utility affordances that
   should not compete with the primary actions in a toolbar. */
.icon-button--quiet,
button.icon-button--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.icon-button--quiet:hover,
button.icon-button--quiet:hover {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* Compact button sizes — for dense chrome (sidebars, toolbars) where the page-scale button is too big.
   Compose with a variant, e.g. `class="btn-secondary btn-xs"`. */
.btn-sm,
button.btn-sm {
    padding: 5px 11px;
    font-size: var(--text-sm);
    min-height: 0;
}
.btn-xs,
button.btn-xs {
    padding: 3px 9px;
    font-size: var(--text-xs);
    min-height: 0;
}

/* Full-width button — canon buttons are fit-content inline-grid; this stretches one to fill its slot. */
.btn-block,
button.btn-block {
    display: grid;
    width: 100%;
}

.btn-link:hover {
    background: var(--bg-hover);
    transform: none;
}

/* ==================== INPUTS & FORMS ==================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
textarea,
select {
    font-family: var(--font-family-ui, var(--font-family));
    font-size: 16px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color var(--transition-base);
    min-height: 44px;
    box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
}

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

/* App-wide compact density reduces decorative padding without shrinking the
 * minimum 44px interaction target required by the ordinary control contract. */
[data-ui-density="compact"] :where(
    button,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-cancel
) {
    padding: var(--space-xs) var(--space-sm);
    min-width: 44px;
    min-height: 44px;
}

[data-ui-density="compact"] :where(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    textarea,
    select
) {
    padding: var(--space-xs) var(--space-sm);
    min-height: 44px;
}

input:disabled,
textarea:disabled,
select:disabled {
    background: var(--input-disabled-bg);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==================== LINKS ==================== */

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

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

a:visited {
    color: var(--color-primary);
}

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

/* ==================== TYPOGRAPHY ==================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading, var(--font-family-ui, var(--font-family)));
    font-weight: var(--font-weight-heading, var(--weight-semibold));
    line-height: var(--line-height-heading, 1.2);
    letter-spacing: var(--letter-spacing-heading, normal);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

h1 { font-size: var(--font-size-heading-1, var(--text-3xl)); }
h2 { font-size: var(--font-size-heading-2, var(--text-2xl)); }
h3 { font-size: var(--font-size-heading-3, var(--text-xl)); }
h4 { font-size: var(--font-size-heading-4, var(--text-lg)); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p {
    margin-bottom: var(--space-md);
    font-family: var(--font-family-body, var(--font-family));
    line-height: var(--line-height-body, 1.6);
    letter-spacing: var(--letter-spacing-body, normal);
}

.type-body {
    font-family: var(--font-family-body, var(--font-family));
    font-size: var(--font-size-body, var(--text-base));
    font-weight: var(--font-weight-body, var(--weight-normal));
    line-height: var(--line-height-body, 1.6);
    letter-spacing: var(--letter-spacing-body, normal);
}

.type-ui-title {
    font-family: var(--font-family-heading, var(--font-family-ui, var(--font-family)));
    font-size: var(--font-size-heading-2, var(--text-2xl));
    font-weight: var(--font-weight-heading, var(--weight-semibold));
    line-height: var(--line-height-heading, 1.1);
    letter-spacing: var(--letter-spacing-heading, -0.03em);
}

.type-display {
    font-family: var(--font-family-display, var(--font-family-heading, var(--font-family)));
    font-size: var(--font-size-display, var(--text-4xl));
    font-weight: var(--font-weight-display, var(--weight-medium));
    line-height: var(--line-height-display, 0.96);
    letter-spacing: var(--letter-spacing-display, -0.05em);
}

.type-brand {
    font-family: var(--font-family-brand, var(--font-family-ui, var(--font-family)));
    font-size: var(--font-size-brand, var(--text-6xl));
    font-weight: var(--font-weight-brand, var(--weight-bold));
    line-height: var(--line-height-brand, 0.88);
    letter-spacing: var(--letter-spacing-brand, -0.08em);
}

.type-label,
.eyebrow,
.micro-label {
    font-family: var(--font-family-label, var(--font-mono));
    font-size: var(--font-size-label, var(--text-xs));
    font-weight: var(--font-weight-label, var(--weight-medium));
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-label, 0.12em);
    text-transform: var(--text-transform-label, uppercase);
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
}

pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    padding: var(--space-md);
    background: var(--bg-tertiary);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin-bottom: var(--space-md);
}

pre code {
    background: none;
    padding: 0;
}

/* Dark mode code styling */
body[data-ui-mode="dark"] code,
body.dark-mode code {
    background: #2d2d2d;
    color: #88c0d0;
}

body[data-ui-mode="dark"] pre,
body.dark-mode pre {
    background: #1e1e1e;
    color: #d4d4d4;
    border-left-color: var(--color-secondary);
}

/* ==================== CARDS & CONTAINERS ==================== */

.card,
.content-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    /* A card is a grid/flex item wherever it is used, so it inherits
       `min-width: auto` — a min-content floor set by its widest unbreakable
       descendant. One <h2> holding a 69-character file path floored a card at
       728px inside a 320px pane and took the page's horizontal scroll with it.
       `.grid-2/3/4/5 > *` already carried this guard; the card needs it in its
       own right, because most cards sit in a pane track rather than one of
       those grids. `overflow-wrap` is the other half: once the card is free to
       be narrow, the unbreakable string has to break instead of spilling out
       of it. Matches what `.card-title` and `.card-header p/a` already do. */
    min-width: 0;
    overflow-wrap: break-word;
}

/* ==================== QR REVEAL ====================
 * A product-neutral surface for a caller-owned QR image, secret/facts,
 * expiry copy, status, and actions. All visible language stays with the
 * consumer so localization never leaks into the framework layer.
 */

.qr-reveal {
    display: grid;
    grid-template-columns: minmax(148px, 220px) minmax(0, 1fr);
    gap: var(--space-lg);
    min-width: 0;
    padding: var(--space-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.qr-reveal--no-media {
    grid-template-columns: minmax(0, 1fr);
}

.qr-reveal__media {
    display: grid;
    align-content: start;
    gap: var(--space-xs);
    min-width: 0;
    margin: 0;
}

.qr-reveal__image {
    display: block;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1;
    object-fit: contain;
    padding: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #ffffff;
}

.qr-reveal__caption {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.4;
    text-align: center;
}

.qr-reveal__content,
.qr-reveal__heading {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
    min-width: 0;
}

.qr-reveal__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-sm);
    min-width: 0;
}

.qr-reveal__title,
.qr-reveal__description {
    margin: 0;
}

.qr-reveal__title {
    font-size: var(--text-xl);
    line-height: 1.2;
}

.qr-reveal__description {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.qr-reveal__status {
    justify-self: end;
    white-space: nowrap;
}

.qr-reveal__facts {
    display: grid;
    min-width: 0;
    margin: var(--space-xs) 0 0;
}

.qr-reveal__fact {
    display: grid;
    grid-template-columns: minmax(88px, 0.65fr) minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: baseline;
    min-width: 0;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border-color);
}

.qr-reveal__fact-label,
.qr-reveal__fact-value {
    min-width: 0;
    margin: 0;
}

.qr-reveal__fact-label {
    color: var(--text-secondary);
    font-family: var(--font-family-label, var(--font-mono));
    font-size: var(--font-size-label, var(--text-xs));
    font-weight: var(--font-weight-label, var(--weight-medium));
    letter-spacing: var(--letter-spacing-label, 0.12em);
    line-height: 1.2;
    text-transform: var(--text-transform-label, uppercase);
}

.qr-reveal__fact-value,
.qr-reveal__fact-value > * {
    overflow-wrap: anywhere;
}

.qr-reveal__fact--secret .qr-reveal__fact-value code {
    display: inline-block;
    max-width: 100%;
    padding: var(--space-xs) var(--space-sm);
    color: var(--text-primary);
    background: var(--bg-tertiary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
}

.qr-reveal__fact--expiration time {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.qr-reveal__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), max-content));
    gap: var(--space-sm);
    align-items: center;
    justify-content: start;
    margin-top: var(--space-xs);
}

@media (max-width: 640px) {
    .qr-reveal {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-md);
    }

    .qr-reveal__media {
        justify-items: center;
    }

    .qr-reveal__image {
        width: min(220px, 100%);
    }

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

    .qr-reveal__status {
        justify-self: start;
    }

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

/* ==================== CHOICE GRIDS ====================
 * Compact selectable options for builders, settings, and wizard-like
 * workflows. These deliberately use the shared radius and border tokens
 * instead of app-local “tile” skins.
 */

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: var(--space-sm);
    min-width: 0;
}

.choice-grid.choice-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr));
    gap: var(--space-xs);
}

.choice-card,
button.choice-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    justify-items: start;
    gap: 4px;
    width: 100%;
    min-width: 0;
    min-height: 64px;
    padding: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: none;
    text-align: left;
    white-space: normal;
    transform: none;
}

.choice-card:hover,
button.choice-card:hover,
.choice-card:focus-visible,
button.choice-card:focus-visible {
    border-color: var(--color-primary);
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: none;
}

.choice-card.is-active,
button.choice-card.is-active,
.choice-card[aria-pressed="true"],
button.choice-card[aria-pressed="true"] {
    border-color: var(--color-primary);
    background: var(--color-info-bg);
    color: var(--text-primary);
}

.choice-card__eyebrow,
.choice-card__meta {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.choice-card__eyebrow {
    color: var(--text-secondary);
    font-family: var(--font-family-label, var(--font-mono));
    font-size: var(--font-size-label, var(--text-xs));
    font-weight: var(--font-weight-label, var(--weight-medium));
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-label, 0.12em);
    text-transform: var(--text-transform-label, uppercase);
}

.choice-card strong,
.choice-card__title {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-size: var(--text-base);
    line-height: 1.2;
}

.choice-card__body {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.choice-card--inline,
button.choice-card--inline {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: center;
    min-height: 38px;
    padding: 7px 9px;
}

/* ==================== STATUS BADGES ==================== */

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.status-completed,
.status-success {
    background: var(--color-primary);
    color: #ffffff;
}

.status-failed,
.status-error {
    background: var(--color-danger);
    color: #ffffff;
}

.status-executing,
.status-planning,
.status-warning {
    background: var(--color-warning);
    color: #000000;
}

.status-cancelled,
.status-disabled {
    background: var(--text-muted);
    color: #ffffff;
}

.status-created,
.status-info {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.status-enabled {
    background: var(--color-success);
    color: #ffffff;
}

/* Dark mode status badges */
body[data-ui-mode="dark"] .status-success,
body.dark-mode .status-success {
    background: #2e7d32 !important;
    color: #e8f5e9 !important;
    border: 1px solid #e8f5e9;
}

body[data-ui-mode="dark"] .status-error,
body.dark-mode .status-error {
    background: #c62828 !important;
    color: #ffebee !important;
    border: 1px solid #ffebee;
}

/* ==================== PROGRESS ==================== */

.ui-progress {
    --ui-progress-color: var(--color-primary);
    display: grid;
    gap: var(--space-xs);
    min-width: 0;
}

.ui-progress--info {
    --ui-progress-color: var(--color-info);
}

.ui-progress--success {
    --ui-progress-color: var(--color-success);
}

.ui-progress--warning {
    --ui-progress-color: var(--color-warning);
}

.ui-progress--error {
    --ui-progress-color: var(--color-danger);
}

.ui-progress--neutral {
    --ui-progress-color: var(--text-muted);
}

.ui-progress__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.ui-progress__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-progress__value {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.ui-progress__bar {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--ui-progress-color);
    background: var(--bg-tertiary);
    accent-color: var(--ui-progress-color);
}

.ui-progress__bar[value] {
    appearance: none;
}

.ui-progress__bar[value]::-webkit-progress-bar {
    background: var(--bg-tertiary);
}

.ui-progress__bar[value]::-webkit-progress-value {
    background: var(--ui-progress-color);
}

.ui-progress__bar[value]::-moz-progress-bar {
    background: var(--ui-progress-color);
}

/* ==================== ACTIVITY LOG ==================== */

.ui-log {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow: auto;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--text-xs, 12px);
}

.ui-log__entry {
    display: grid;
    grid-template-columns: auto minmax(7rem, max-content) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--border-color);
}

.ui-log__entry:last-child {
    border-bottom: 0;
}

.ui-log__dot {
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.ui-log__dot--success { background: var(--color-success); }
.ui-log__dot--warning { background: var(--color-warning); }
.ui-log__dot--danger  { background: var(--color-danger); }
.ui-log__dot--info    { background: var(--color-primary); }

.ui-log__label {
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.ui-log__detail {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.ui-log__meta {
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ui-log__empty {
    color: var(--text-muted);
    padding: 8px 0;
}

/* ==================== HEADER ==================== */

.header {
    background: var(--color-primary) !important;
    color: var(--text-on-primary) !important;
    padding: 15px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 0;
    border-bottom: 3px solid var(--color-shell-accent, var(--color-secondary));
}

.header h1 {
    color: inherit !important;
    margin: 0;
    display: grid;
    gap: 4px;
    min-width: 0;
    font-family: var(--font-family-brand, var(--font-family-heading, var(--font-family)));
    line-height: var(--line-height-heading, 1.1);
    letter-spacing: var(--letter-spacing-heading, normal);
}

.header h1:has(> i:first-child),
.header h1:has(> .brand-icon:first-child),
.header h1:has(> .brand-icon-link:first-child),
.header.header-has-brand-icon h1 {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.header h1 > span:last-child:not(.type-brand):not(.type-label):not(.shell-wordmark):not(.shell-kicker):not(.shell-context):not(.shell-subtitle),
.header .header-title-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header h1 .type-brand,
.header h1 .shell-wordmark {
    display: block;
    font-size: clamp(28px, 3.8vw, 56px);
    line-height: 0.9;
    letter-spacing: -0.065em;
}

.header h1 .type-label,
.header h1 .shell-kicker,
.header h1 .shell-context {
    display: block;
    font-family: var(--font-family-label, var(--font-mono));
    font-size: var(--font-size-label, var(--text-xs));
    font-weight: var(--font-weight-label, var(--weight-medium));
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.92;
}

.header h1 .shell-subtitle {
    display: block;
    font-family: var(--font-family-body, var(--font-family));
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.84);
}

.header h1 i,
.header .brand-icon,
.header .header-icon,
.header .brand-icon-default,
.header .brand-icon-hover {
    color: var(--color-shell-accent, var(--color-secondary)) !important;
}

.header h1 span {
    color: inherit !important;
}

.header.header-utility {
    padding: 14px 20px 12px;
}

.header.header-utility h1 .type-brand,
.header.header-utility h1 .shell-wordmark {
    font-size: clamp(22px, 2.7vw, 34px);
    line-height: 0.96;
    letter-spacing: -0.05em;
}

.header.header-utility h1 .shell-subtitle {
    font-size: var(--text-xs);
}

.header.header-utility .header-title-text {
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1;
}

.header.header-utility h1 > .brand-icon,
.header.header-utility h1 > i {
    font-size: clamp(20px, 2vw, 26px);
}

.header a {
    color: inherit;
}

.header a:hover {
    color: var(--color-shell-accent, var(--color-secondary));
    text-decoration: none;
}

/* Same paint reset as .header-link below, for the same reason. The brand icon
   in `.header h1` carries no paint of its own — it leans entirely on
   `.header a { color: inherit }` — so a brand icon that opens a menu instead
   of navigating, which has to be a <button> to be accessible, rendered as a
   stray primary-blue submit button. (0,1,0) beats `button` (0,0,1), so the
   reset lands without !important.

   Every declaration equals the anchor form's computed value, so the <a> does
   not move: `display: block` is what an <a> blockifies to as a grid item of
   `.header h1`, and the radius has nothing to draw at rest — it only shapes
   the focus ring. */
.brand-icon-link {
    display: block;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* (0,2,0) beats `button:hover` (0,1,1), so the button form stops flashing
   --color-primary-hover. No wash here, unlike .header-link:hover — the icon
   inside is pinned to the accent colour with !important by the .brand-icon
   rules above, so the anchor form has never had a visible hover state, and
   matching it means the button form must not grow one either. */
.brand-icon-link:hover {
    background: transparent;
    color: var(--color-shell-accent, var(--color-secondary));
    text-decoration: none;
}

.header-links,
.header-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 0;
}

/* A `{ type: 'text' }` header control — a status line, a clock, a record count.
   `min-width: 0` on the flex container above lets the CONTAINER shrink; it says
   nothing about its children, and a flex item defaults to `min-width: auto`,
   which under the inherited `white-space: nowrap` resolves to the full string.
   So one sentence-length status became an unshrinkable flex item: it pushed the
   control row past the header, the `minmax(0, 1fr)` title track collapsed to 0,
   and the row's leading edge was driven off the left of the viewport — measured
   at x=-169 on a 375px screen, taking the links before it out of reach. A
   status is the one control in the row that is safe to abbreviate, so it
   truncates rather than shoving its neighbours. Same treatment the brand title
   already gets in `.header .header-title-text`. */
.header-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-link,
.header-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    /* >=44px touch target (WCAG AA) via spacing tokens, not bare text height. */
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    /* Paint reset so the class works on <button> as well as <a>. A header
       control that acts instead of navigating must be a <button> to be
       accessible, but the base `button` rule paints --color-primary + white
       text, so `<button class="header-link">` rendered as a stray submit
       button in the header bar and consumers patched it locally. These
       selectors are (0,1,0) and beat `button` (0,0,1), so the reset lands
       without !important. On an <a> every declaration here already matches
       the computed value — `a` is transparent, borderless and
       `text-decoration: none`, and `.header a` (0,1,1) still owns the link
       colour — so the anchor's resting paint does not move. The radius only
       shapes the hover wash below; at rest it has nothing to draw. */
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* (0,2,0) beats `button:hover` (0,1,1), so the button form stops flashing
   --color-primary-hover. currentColor keeps the wash legible on light and dark
   headers alike with no per-theme token, and the hover colour mirrors
   `.header a:hover` so both element forms behave identically. Themes that want
   their own treatment (simple, spooky) override this rule later in the chain.
   The wash is new for the anchor form too — that is the point: one hover
   affordance for every header control, whichever element carries the class. */
.header-link:hover,
.header-icon-link:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: var(--color-shell-accent, var(--color-secondary));
    text-decoration: none;
}

.header-icon-link i {
    margin: 0;
    font-size: var(--text-lg);
}

/* ==================== TABS ==================== */

.tabs {
    background: var(--bg-secondary);
    border-bottom: 3px solid var(--color-shell-accent, var(--color-secondary));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: end;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    z-index: 10;
    isolation: isolate;
}

.tabs.tabs-bottom {
    border-top: 3px solid var(--color-shell-accent, var(--color-secondary));
    border-bottom: 0;
    align-items: start;
}

.tabs.tabs-hidden {
    display: none !important;
}

.tabs.tabs-pager {
    justify-content: center;
    justify-items: center;
    align-items: center;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    gap: var(--space-xs);
    padding: 8px clamp(12px, 2vw, 24px);
    border-top: 1px solid var(--border-color);
    border-bottom: 0;
    box-shadow: 0 -1px 0 var(--color-shell-accent, var(--color-secondary));
}

.tabs-pager .tab-pager-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    max-width: min(52vw, 520px);
    overflow-x: auto;
    overflow-y: hidden;
}

.tabs-pager .tab-pager-status {
    min-width: 108px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-align: center;
    white-space: nowrap;
}

.tabs-pager .tab-pager-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}

.tabs-pager .tab-pager-button:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--color-shell-accent, var(--color-secondary));
}

.tabs-pager .tab-pager-button:disabled {
    cursor: default;
    opacity: 0.45;
}

.tabs-pager .tab {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
}

.tabs-pager .tab i {
    margin-right: 0;
}

.tabs-pager .tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.tabs-pager .tab.active {
    border-color: var(--color-shell-accent, var(--color-secondary));
    box-shadow: inset 0 0 0 2px var(--bg-primary);
}

.tab {
    background: transparent;
    border: none;
    border-top: 3px solid transparent;
    color: var(--text-secondary);
    padding: 12px 20px;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family-ui, var(--font-family));
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: normal;
    text-transform: none;
}

.tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.tab[data-ui-tab-state] {
    --ui-tab-state-color: var(--text-muted);
    border-top-color: var(--ui-tab-state-color);
}

.tab.tab-state-complete {
    --ui-tab-state-color: var(--color-success);
}

.tab.tab-state-current {
    --ui-tab-state-color: var(--color-shell-accent, var(--color-primary));
    font-weight: var(--weight-semibold);
}

.tab.tab-state-optional {
    --ui-tab-state-color: var(--text-muted);
    border-top-style: dashed;
}

.tab.tab-state-blocked {
    --ui-tab-state-color: var(--color-danger);
}

.tab.tab-state-needs-input {
    --ui-tab-state-color: var(--color-warning);
}

.tab.tab-state-available {
    --ui-tab-state-color: var(--color-info);
}

.tabs-pager .tab[data-ui-tab-state] {
    border-color: var(--ui-tab-state-color);
}

.tab i {
    margin-right: 6px;
}

.tab-custom-header {
    display: grid;
    gap: var(--space-xs);
    padding: clamp(18px, 2vw, 24px);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

/* Honor the `hidden` attribute: the explicit `display: grid` above otherwise wins
   over the UA `[hidden] { display: none }`, leaving an empty header bar when a tab
   toggles its custom header off (e.g. an empty-selection detail state). */
.tab-custom-header[hidden] {
    display: none;
}

/* ==================== MODALS ==================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: grid;
    place-items: center;
    z-index: var(--z-modal);
}

.modal {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.modal-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.modal-close {
    background: transparent;
    border: none;
    font-size: var(--text-2xl);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-close:focus-visible {
    color: var(--text-primary);
}

.surface-modal {
    --surface-modal-gap: clamp(12px, 2vw, 24px);
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 200);
    display: grid;
    place-items: center;
    padding: var(--surface-modal-gap);
    box-sizing: border-box;
}

.surface-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

/* A native <dialog> carrying .surface-modal__panel. Consumers pick <dialog> for the top layer and
   the focus trap, then inherit the panel's look with none of .surface-modal's overlay — no
   centring, no backdrop, and the UA's own dialog chrome still in place. These rules give the
   dialog the overlay's job: centred in the viewport, its own dimmed ::backdrop, no UA border or
   padding. UI.modalDialog() wires the matching dismissals (Escape, click outside). */
dialog.surface-modal__panel {
    inset: 0;
    margin: auto;
    padding: 0;
    border: 1px solid var(--border-color);
    max-width: calc(100% - var(--surface-modal-gap, 24px) * 2);
    max-height: calc(100% - var(--surface-modal-gap, 24px) * 2);
    overflow: hidden;
}

/* Keep author-level panel layout from overriding the native dialog closed state. */
dialog.surface-modal__panel:not([open]) {
    display: none;
}

dialog.surface-modal__panel::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.surface-modal__panel {
    position: relative;
    z-index: 1;
    width: min(var(--surface-modal-max-width, 1200px), 100%);
    max-width: 100%;
    height: min(var(--surface-modal-max-height, 920px), 100%);
    max-height: 100%;
    display: grid;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg);
}

.surface-modal__header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-md);
    align-items: center;
    margin-bottom: 0;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.surface-modal__title-block {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.surface-modal__title-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.surface-modal__title-row i {
    color: var(--color-primary);
    font-size: 24px;
}

.surface-modal__header h2 {
    margin: 0;
    min-width: 0;
}

.surface-modal__header p {
    margin: 6px 0 0;
    color: var(--text-secondary);
}

.surface-modal__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: var(--space-sm);
    align-items: center;
}

.surface-modal__close {
    line-height: 1;
}

.surface-stage-modal__panel {
    --surface-modal-max-width: 1120px;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.surface-stage-modal__panel > .surface-modal__header {
    gap: var(--space-sm);
    padding: 10px var(--space-lg);
}

.surface-stage-modal__title-link {
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.surface-stage-modal__title-link:hover,
.surface-stage-modal__title-link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.surface-stage-modal__aside {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    min-width: 0;
}

.surface-stage-modal__actions--nav {
    justify-items: end;
}

.surface-stage-modal__action-divider {
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

.surface-stage-modal__icon-button {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-grid;
    place-items: center;
}

.surface-stage-modal__icon-button span {
    display: none;
}

.surface-stage-modal__icon-button i {
    font-size: 18px;
}

.surface-stage-modal__icon-button--danger {
    color: var(--color-danger);
}

.surface-stage-modal__icon-button--danger:hover,
.surface-stage-modal__icon-button--danger:focus-visible {
    border-color: color-mix(in srgb, var(--color-danger) 44%, var(--border-color));
    background: color-mix(in srgb, var(--color-danger) 8%, var(--bg-secondary));
}

.surface-stage-modal__icon-button--danger:disabled {
    color: var(--text-muted);
}

.surface-stage-modal__qr {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    gap: var(--space-xs);
}

.surface-stage-modal__qr.is-hidden {
    display: none;
}

.surface-stage-modal__qr-icon {
    font-size: 16px;
}

.surface-stage-modal__qr-copy {
    white-space: nowrap;
    font-size: 14px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
}

.surface-stage-modal__actions > button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--border-color));
    background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-secondary));
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.surface-stage-modal__qr,
.surface-stage-modal__actions > button:not(.surface-modal__close) {
    font-size: 14px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
}

.surface-stage-modal__stage {
    --surface-stage-live-width: 1440px;
    --surface-stage-live-height: 900px;
    --surface-stage-live-scale: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-secondary);
    padding: var(--space-sm) var(--space-lg);
    display: grid;
}

.surface-stage-modal__stage[data-preview-source="live"] {
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.72), transparent 52%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 86%, white), var(--bg-secondary));
}

.surface-stage-modal__stage.is-preview-refreshing[data-preview-source="snapshot"] .surface-stage-modal__media,
.surface-stage-modal__stage.is-preview-refreshing[data-preview-source="snapshot"] .surface-stage-modal__image-card-image {
    filter: grayscale(1) opacity(0.46);
}

.surface-stage-modal__preview-loading {
    position: absolute;
    inset: var(--space-sm) var(--space-lg);
    z-index: 2;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.surface-stage-modal__preview-loading-card {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.76);
    color: white;
    box-shadow: var(--shadow-md);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    backdrop-filter: blur(6px);
}

.surface-stage-modal__spinner {
    animation: launchpad-spin 1s linear infinite;
}

.surface-stage-modal__qr-stage {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: clamp(20px, 4vw, 48px);
    background: var(--bg-primary);
}

.surface-stage-modal__qr-stage.is-hidden {
    display: none;
}

.surface-stage-modal__qr-stage-card {
    display: grid;
    gap: var(--space-md);
    justify-items: center;
    width: min(100%, 480px);
    padding: 0;
}

.surface-stage-modal__qr-stage-canvas {
    display: block;
    width: min(100%, 360px);
    height: auto;
    aspect-ratio: 1;
    max-width: 100%;
}

.surface-stage-modal__qr-stage-copy {
    display: grid;
    gap: 6px;
    justify-items: center;
    width: 100%;
    text-align: center;
}

.surface-stage-modal__qr-stage-label,
.surface-stage-modal__qr-stage-url {
    margin: 0;
}

.surface-stage-modal__qr-stage-label {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: var(--weight-semibold);
}

.surface-stage-modal__qr-stage-url {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
}

.surface-stage-modal__image-shell {
    width: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: clamp(18px, 2vw, 32px) 0;
}

.surface-stage-modal__image-stack {
    position: relative;
    width: min(1220px, 100%);
    min-height: clamp(320px, 52vh, 700px);
    max-height: 100%;
    isolation: isolate;
}

.surface-stage-modal__image-card {
    position: absolute;
    top: clamp(24px, 6%, 44px);
    bottom: clamp(18px, 5%, 38px);
    overflow: hidden;
    border: 1px solid rgba(10, 25, 49, 0.08);
    border-radius: 24px;
    background: white;
    box-shadow:
        0 22px 48px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

button.surface-stage-modal__image-card {
    appearance: none;
    padding: 0;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}

button.surface-stage-modal__image-card:hover,
button.surface-stage-modal__image-card:focus-visible {
    box-shadow:
        0 28px 60px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

button.surface-stage-modal__image-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 6px;
}

.surface-stage-modal__image-card--left,
.surface-stage-modal__image-card--right {
    width: 39%;
    z-index: 1;
    opacity: 0.95;
}

.surface-stage-modal__image-card--left {
    left: 1.5%;
    transform: scale(0.9);
    transform-origin: center;
}

button.surface-stage-modal__image-card--left:hover,
button.surface-stage-modal__image-card--left:focus-visible {
    transform: scale(0.93);
}

.surface-stage-modal__image-card--center {
    left: 50%;
    width: 58%;
    top: 0;
    bottom: 0;
    z-index: 3;
    transform: translateX(-50%);
    box-shadow:
        0 28px 64px rgba(15, 23, 42, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.82);
}

.surface-stage-modal__image-card--right {
    right: 1.5%;
    transform: scale(0.9);
    transform-origin: center;
}

button.surface-stage-modal__image-card--right:hover,
button.surface-stage-modal__image-card--right:focus-visible {
    transform: scale(0.93);
}

.surface-stage-modal__image-shell.is-single-preview .surface-stage-modal__image-card--left,
.surface-stage-modal__image-shell.is-single-preview .surface-stage-modal__image-card--right {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.surface-stage-modal__image-shell.is-single-preview .surface-stage-modal__image-card--center {
    width: 76%;
}

.surface-stage-modal__image-card-image,
.surface-stage-modal__image-shell .surface-stage-modal__media {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    background: white;
    border-radius: inherit;
    box-shadow: none;
}

.surface-stage-modal__media {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.surface-stage-modal__video,
.surface-stage-modal__image {
    object-fit: contain;
}

.surface-stage-modal__image-shell .surface-stage-modal__image {
    object-fit: cover;
    object-position: center top;
}

.surface-stage-modal__live-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.surface-stage-modal__live-scale {
    width: calc(var(--surface-stage-live-width) * var(--surface-stage-live-scale));
    height: calc(var(--surface-stage-live-height) * var(--surface-stage-live-scale));
    max-width: 100%;
    max-height: 100%;
}

.surface-stage-modal__live-viewport {
    width: var(--surface-stage-live-width);
    height: var(--surface-stage-live-height);
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 22px 56px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(15, 23, 42, 0.08);
    transform: scale(var(--surface-stage-live-scale));
    transform-origin: top left;
}

.surface-stage-modal__frame {
    background: #fff;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 960px) {
    .surface-stage-modal__image-stack {
        min-height: clamp(260px, 40vh, 460px);
    }

    .surface-stage-modal__image-card {
        border-radius: 20px;
    }

    .surface-stage-modal__image-card--left,
    .surface-stage-modal__image-card--right {
        width: 43%;
    }

    .surface-stage-modal__image-card--center {
        width: 68%;
    }

    .surface-stage-modal__image-shell.is-single-preview .surface-stage-modal__image-card--center {
        width: 82%;
    }
}

/* ==================== ALERT BANNERS ==================== */

.alert {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
}

.alert i {
    font-size: var(--text-md);
    margin-top: 1px;
}

.alert-success {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success-action);
}

.alert-error {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.alert-warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.alert-info {
    background: var(--color-info-bg);
    border-color: var(--color-info);
    color: var(--color-info);
}

/* ==================== STAT VALUE ==================== */

.stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    display: block;
    line-height: 1.2;
}

/* ==================== SIDEBAR HEADER ==================== */

.sidebar-header {
    padding: 12px 20px 4px;
    font-family: var(--font-family-label, var(--font-mono));
    font-size: var(--font-size-label, var(--text-xs));
    font-weight: var(--font-weight-label, var(--weight-medium));
    color: var(--text-muted);
    text-transform: var(--text-transform-label, uppercase);
    letter-spacing: var(--letter-spacing-label, 0.12em);
    border-bottom: 1px solid var(--border-color);
}

/* ==================== UTILITY CLASSES ==================== */

/* Spacing */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

/* Background Colors */
.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary { background: var(--bg-tertiary); }
.bg-success { background: var(--color-success); color: #ffffff; }
.bg-danger { background: var(--color-danger); color: #ffffff; }
.bg-warning { background: var(--color-warning); color: #000000; }
.bg-info { background: var(--color-info); color: #ffffff; }

/* Grid Layout (NO FLEXBOX) */
.grid { display: grid; }
.grid-center { display: grid; place-items: center; }
.grid-between { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.grid-column { display: grid; grid-auto-flow: row; }
.grid-row { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* Flex utilities — companions to the grid-* helpers for rows/columns that need flex behaviour. */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1 1 0%; min-width: 0; }
.flex-none { flex: none; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.cursor-default { cursor: default; }

/* Grid Templates */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > * { min-width: 0; }
.grid-3-stable { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-3-stable > * { min-width: 0; }
.grid-3-stable input,
.grid-3-stable select,
.grid-3-stable textarea { width: 100%; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Display */
.hidden { display: none !important; }
.display-none { display: none !important; }
.display-block { display: block !important; }
.block { display: block; }
.inline-block { display: inline-block; }

/* ==================== WORKSPACE LAYOUT ==================== */

.layout {
    display: grid;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.layout.single {
    /* `1fr` is `minmax(auto, 1fr)`: the track refuses to go below its content's
       min-content width, so one unbreakable string anywhere in the pane widens
       the whole layout instead of being clipped or wrapped by it. A pane track
       is a container, not a measurement of what it holds. */
    grid-template-columns: minmax(0, 1fr);
}

.layout.single .content {
    overflow-y: auto;
    /* Single layout is a PAGE surface: the framework supplies page margins
       (matches .page-container). Workspace .content is a CHROME surface and
       must stay padding-free — see the .content rule below. */
    padding: var(--space-xl);
}

.layout.workspace {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    min-height: 100%;
}

.layout.workspace.sidebar-right {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
}

/* Three-rail workspaces keep navigation, a long-lived primary surface (for
   example a canvas), and a project inspector visible at the same time. The
   inspector always sits opposite the navigation sidebar so the content stays
   the stable center rail when sidebarPosition changes. */
.layout.workspace.has-inspector {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(260px, 320px);
}

.layout.workspace.has-inspector.sidebar-right {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(240px, 280px);
}

.tab-workspace-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.tab-workspace-shell > .layout.workspace {
    min-height: 0;
}

/* Workspace tab WITH a per-item header (`.has-workspace-header`): the header belongs to
   the CONTENT column, beside a FULL-HEIGHT sidebar — NOT a full-width bar above both:
       | sidebar | header  |
       | sidebar | content |
   The sidebar is a direct grid item of .layout.workspace so it spans the whole height;
   .tab-content-shell owns the right column and splits it into header (auto) + body (1fr). */
.tab-content-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* sidebar-on-the-right parity: the content column moves to grid column 1. */
.layout.workspace.sidebar-right > .tab-content-shell {
    grid-column: 1;
    grid-row: 1;
}

.layout.workspace.has-inspector > .tab-content-shell {
    grid-column: 2;
    grid-row: 1;
}

.sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: grid;
    /* rows: optional header/filter · scrolling items (fill) · optional pager ·
       collapse footer. The pager is framework-owned and collapses to a zero-height
       row when the list has not opted into pagination. */
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.sidebar:has(.sidebar-filter-rail) {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.sidebar:has(> .sidebar-custom-header):has(> .sidebar-filter-rail) {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

/* Concrete themes import core first and may re-declare a bare .sidebar later.
   Keep the framework-owned row contract authoritative across those imports. */
.layout.workspace > .sidebar {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.layout.workspace > .sidebar:has(> .sidebar-custom-header):has(> .sidebar-filter-rail) {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.sidebar-custom-header {
    grid-row: 1;
    min-width: 0;
    background: var(--bg-secondary);
}

.sidebar:has(> .sidebar-custom-header) > .sidebar-filter-rail {
    grid-row: 2;
}

.sidebar:has(> .sidebar-custom-header):has(> .sidebar-filter-rail) > .sidebar-scroll {
    grid-row: 3;
}

.sidebar:has(> .sidebar-custom-header):has(> .sidebar-filter-rail) > .sidebar-collapse-toggle {
    grid-row: 5;
}

.sidebar:has(> .sidebar-custom-header):has(> .sidebar-filter-rail) > .workspace-list-pagination {
    grid-row: 4;
}

.sidebar-filter-rail {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.sidebar-filter-search {
    position: relative;
    display: flex;
    align-items: center;
}

.sidebar-filter-search > i {
    position: absolute;
    left: 10px;
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 14px;
}

/* The [type="search"] qualifier is load-bearing, not cosmetic: themes (e.g.
   walmart/layout.css) re-declare the generic `input[type="search"]` padding
   AFTER `@import`-ing this file. That generic rule has equal specificity to a
   bare `.sidebar-filter-search > input`, so on import order it would win and the
   left padding would collapse to the generic value — dropping the icon on top of
   the placeholder. Qualifying with [type="search"] raises specificity to (0,2,1)
   so the icon clearance always wins regardless of theme load order. */
.sidebar-filter-search > input[type="search"] {
    width: 100%;
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    min-height: 32px;
}

.sidebar-filter-search > input[type="search"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.sidebar-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    overflow-x: auto;
}

.sidebar-filter-chip {
    appearance: none;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    transition: all var(--transition-base, 0.15s ease);
}

.sidebar-filter-chip:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-filter-chip.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--text-on-primary, #ffffff);
}

.sidebar-filter-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    min-height: 32px;
}

.workspace-list-pagination {
    grid-row: 3;
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.workspace-list-pagination[hidden] {
    display: none;
}

.workspace-list-pagination__range,
.workspace-list-pagination__status {
    color: var(--text-secondary);
    font-size: var(--text-xs, 12px);
    line-height: 1.2;
    text-align: center;
}

.workspace-list-pagination__controls {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
}

button.workspace-list-pagination__button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}

button.workspace-list-pagination__button:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: var(--bg-hover);
    color: var(--color-primary);
}

/* ==================== CHIP (removable) ====================
 * Generic pill lifted from app-local chips (was connjure's .cj-rchip). Unlike the single-toggle
 * .sidebar-filter-chip, this is the label+remove pattern: a .chip container holds a .chip__action
 * (icon + truncating label) and an optional .chip__remove (×). For recent items, tokens, tags. */
.chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill, 9999px);
    background: var(--bg-primary);
    overflow: hidden;
}
.chip:hover { border-color: var(--color-primary); }
.chip__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
    width: auto;                 /* keep the action shrink-safe inside the flex chip */
    flex: 0 1 auto;
    border: 0;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: 5px 4px 5px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.chip__action:hover { background: none; }   /* override the global button:hover fill */
.chip__action > i { flex: none; color: var(--text-muted); font-size: var(--text-base); }
.chip__action > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__remove {
    flex: none;
    width: max-content;          /* keep the remove control intrinsically sized */
    border: 0;
    background: none;
    color: var(--text-muted);
    padding: 5px 8px 5px 4px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: var(--text-sm);
}
.chip__remove:hover { color: var(--color-danger); background: none; }

/* ==================== SELECT — compact, consistent chevron ====================
 * A dense <select> with an inline chevron (native OS arrows vary + can't be sized). Inherits the
 * base select border/radius/bg; use where the roomy 16px default is too big (toolbars, headers). */
.select-compact {
    appearance: none;
    -webkit-appearance: none;
    font-size: var(--text-sm);
    padding: 3px 26px 3px 8px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
}

.layout.workspace.sidebar-right > .sidebar {
    grid-column: 2;
    border-right: 0;
    border-left: 1px solid var(--border-color);
}

.layout.workspace.sidebar-right > .content {
    grid-column: 1;
    grid-row: 1;
}

.layout.workspace.has-inspector > .content {
    grid-column: 2;
    grid-row: 1;
}

.workspace-inspector {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
}

/* Inspector tracks must shrink around long native options and nested stacks
   instead of letting intrinsic control widths expand the whole form. */
.workspace-inspector > *,
.workspace-inspector .grid > *,
.workspace-inspector :is(input, select, textarea) {
    min-width: 0;
    max-width: 100%;
}

.layout.workspace.has-inspector.sidebar-right > .sidebar {
    grid-column: 3;
}

.layout.workspace.has-inspector.sidebar-right > .workspace-inspector {
    grid-column: 1;
    border-left: 0;
    border-right: 1px solid var(--border-color);
}

/* ==================== TOOL WINDOWS ====================
 * Detail-scoped, collapsible tools. A tool-window inspector floats over the
 * primary workspace instead of permanently consuming a grid track; closing
 * it leaves one framework FAB in the detail corner for restoration. */
.tool-window-host {
    min-width: 0;
    min-height: 0;
}

.tool-window-host.is-open {
    width: 100%;
    height: 100%;
}

.tool-window-host.is-collapsed {
    display: grid;
    width: 44px;
    height: 44px;
    margin-left: auto;
    place-items: center;
}

.tool-window {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg, 0 18px 48px rgba(15, 23, 42, 0.18));
}

.tool-window[hidden],
.tool-window-fab[hidden] {
    display: none !important;
}

.tool-window__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    min-height: 48px;
    padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    /* The header is the grab handle for moving a floating tool window. Its
       buttons keep their own cursor, so a press on collapse still reads as a
       press rather than a drag. */
    cursor: grab;
    touch-action: none;
}

.tool-window--docked .tool-window__header {
    cursor: default;
}

.tool-window__header button,
.tool-window__header a {
    cursor: pointer;
}

.tool-window[data-tool-window-dragging="true"] {
    user-select: none;
}

.tool-window[data-tool-window-dragging="true"] .tool-window__header {
    cursor: grabbing;
}

/* A window that has been moved sits where it was put, above the surface it
   was moved off. */
.tool-window[data-tool-window-moved="true"] {
    z-index: 40;
    width: min(420px, calc(100vw - 24px));
    height: auto;
    max-height: calc(100vh - 24px);
}

.tool-window__identity,
.tool-window__actions {
    display: flex;
    align-items: center;
    min-width: 0;
}

.tool-window__identity {
    gap: var(--space-sm);
}

.tool-window__identity > i {
    flex: none;
    color: var(--color-primary);
    font-size: var(--text-lg);
}

.tool-window__title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-family-heading, var(--font-family));
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-window__actions {
    justify-content: flex-end;
    gap: var(--space-xs);
}

button.tool-window__collapse,
button.tool-window-fab {
    display: inline-grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-primary);
    color: var(--text-secondary);
}

button.tool-window__collapse:hover,
button.tool-window__collapse:focus-visible,
button.tool-window-fab:hover,
button.tool-window-fab:focus-visible {
    border-color: var(--color-primary);
    background: var(--bg-hover);
    color: var(--color-primary);
}

button.tool-window-fab {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--text-on-primary, #ffffff);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, 0.18));
}

button.tool-window-fab:hover,
button.tool-window-fab:focus-visible {
    background: var(--color-primary-hover, var(--color-primary));
    color: var(--text-on-primary, #ffffff);
    transform: translateY(-1px);
}

.tool-window__body {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.tool-window__content {
    min-width: 0;
    min-height: 100%;
}

/* Direct `UI.toolWindow()` children are lifted into this rail by the component
   after the enclosing detail shell is mounted. The rail shares the detail-body
   grid cell, so tools float over the working surface without escaping into
   document-level positioning. Multiple tools shrink and stack in one bounded
   column instead of occupying the same coordinates. */
.section.active.section-detail-shell > .detail-body {
    grid-column: 1;
    grid-row: 2;
}

.section.active.section-detail-shell > .detail-tool-window-rail {
    z-index: var(--z-sticky, 100);
    display: flex;
    grid-column: 1;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    justify-self: end;
    gap: var(--space-sm);
    width: min(360px, 100%);
    height: 100%;
    min-height: 0;
    padding: var(--space-sm);
    overflow: hidden;
    pointer-events: none;
}

.detail-tool-window-rail > .tool-window-host,
.detail-tool-window-rail > .workspace-inspector--tool-window {
    pointer-events: auto;
}

.detail-tool-window-rail > .workspace-inspector--tool-window {
    position: static;
    border: 0;
    background: transparent;
    overflow: visible;
}

.detail-tool-window-rail > .tool-window-host.is-open,
.detail-tool-window-rail > .workspace-inspector--tool-window:has(> .tool-window-host.is-open) {
    flex: 1 1 320px;
    width: 100%;
    height: auto;
    min-height: 160px;
    max-height: min(420px, 100%);
}

.detail-tool-window-rail > .tool-window-host.is-collapsed,
.detail-tool-window-rail > .workspace-inspector--tool-window:has(> .tool-window-host.is-collapsed) {
    flex: 0 0 44px;
    align-self: end;
    width: 44px;
    height: 44px;
}

@media (min-width: 769px) {
    .layout.workspace.has-inspector.inspector-tool-window {
        position: relative;
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    }

    .layout.workspace.has-inspector.inspector-tool-window.sidebar-right {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    }

    .layout.workspace.has-inspector.inspector-tool-window:has(> .sidebar.collapsed) {
        grid-template-columns: var(--sidebar-width-collapsed, 64px) minmax(0, 1fr);
    }

    .layout.workspace.has-inspector.inspector-tool-window.sidebar-right:has(> .sidebar.collapsed) {
        grid-template-columns: minmax(0, 1fr) var(--sidebar-width-collapsed, 64px);
    }

    .layout.workspace.has-inspector.inspector-tool-window > .workspace-inspector--tool-window {
        position: absolute;
        z-index: var(--z-sticky, 100);
        grid-column: auto;
        grid-row: auto;
        top: var(--space-sm);
        right: var(--space-sm);
        bottom: var(--space-sm);
        width: min(360px, calc(100% - 304px));
        overflow: visible;
        border: 0;
        background: transparent;
        pointer-events: none;
    }

    .layout.workspace.has-inspector.inspector-tool-window.sidebar-right > .workspace-inspector--tool-window {
        right: auto;
        left: var(--space-sm);
    }

    .workspace-inspector--tool-window > .tool-window-host,
    .workspace-inspector--tool-window .tool-window,
    .workspace-inspector--tool-window .tool-window-fab {
        pointer-events: auto;
    }
}

/* ── Sidebar collapse ─────────────────────────────────────────────────────
   The shell JS toggles `.collapsed` on `.sidebar` and injects a
   `.sidebar-collapse-toggle` footer control. These rules make both real:
   the control is a styled, centered footer, and the collapsed state narrows
   the sidebar to an icon-only rail. */

/* Pinned footer control — bottom row of the sidebar grid, glyph centered. */
.sidebar-collapse-toggle {
    grid-row: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-base, 0.15s ease),
                color var(--transition-base, 0.15s ease);
}

.sidebar-collapse-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-collapse-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.sidebar-collapse-toggle i {
    font-size: 18px;
    line-height: 1;
}

/* Right-docked sidebars mirror the chevron so it always points "outward" to
   collapse and "inward" to expand — expanded shows ›, collapsed shows ‹. The
   JS only ever sets the left/right glyph for a left rail; flipping it here keeps
   the direction logic in one place (CSS) instead of branching in the shell. */
.layout.workspace.sidebar-right .sidebar-collapse-toggle i {
    transform: scaleX(-1);
}

/* Collapsed rail: hide every text affordance, keep the glyphs, center them. */
.sidebar.collapsed .sidebar-filter-rail,
.sidebar.collapsed .workspace-list-pagination,
.sidebar.collapsed .sidebar-custom-header .sidebar-item-label,
.sidebar.collapsed .sidebar-custom-header .sidebar-item-subtitle,
.sidebar.collapsed .sidebar-custom-header .sidebar-item-badges,
.sidebar.collapsed .sidebar-custom-header .sidebar-item-status,
.sidebar.collapsed .sidebar-custom-header .sidebar-item-stack,
.sidebar.collapsed .sidebar-item-label,
.sidebar.collapsed .sidebar-item-subtitle,
.sidebar.collapsed .sidebar-item-badges,
.sidebar.collapsed .sidebar-item-status,
.sidebar.collapsed .sidebar-item-stack {
    display: none;
}

.sidebar.collapsed .sidebar-item {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    padding: 12px 0;
}

.sidebar.collapsed .sidebar-item--rich {
    padding: 10px 0;
}

/* Narrowing the sidebar means resizing its track on the parent workspace grid.
   Desktop only — on mobile the sidebar is a fixed overlay, not a grid track. */
@media (min-width: 769px) {
    .layout.workspace {
        transition: grid-template-columns var(--transition-base, 0.2s ease);
    }

    .layout.workspace:has(> .sidebar.collapsed) {
        grid-template-columns: var(--sidebar-width-collapsed, 64px) minmax(0, 1fr);
    }

    .layout.workspace.sidebar-right:has(> .sidebar.collapsed) {
        grid-template-columns: minmax(0, 1fr) var(--sidebar-width-collapsed, 64px);
    }

    .layout.workspace.has-inspector:has(> .sidebar.collapsed) {
        grid-template-columns: var(--sidebar-width-collapsed, 64px) minmax(0, 1fr) minmax(260px, 320px);
    }

    .layout.workspace.has-inspector.sidebar-right:has(> .sidebar.collapsed) {
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) var(--sidebar-width-collapsed, 64px);
    }
}

.sidebar-scroll {
    grid-row: 2;
    min-height: 0;
    overflow-y: auto;
}

.sidebar-item {
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    transition: all var(--transition-base);
}

/* A sidebar row is usually PRESSABLE, so consumers reach for <button> — and until this rule that
   silently broke them. .sidebar-item declares no background of its own, so the button skin (solid
   fill, radius, centred text, its own border) outranked it and every row rendered INVERTED:
   unselected rows solid, the selected row plain. The fix consumers reached for was a pile of local
   colours, which is exactly the drift the canon exists to prevent. Take the element skin off here
   instead, and let .sidebar-item.active own the selected treatment for buttons and divs alike.
   Scoped :not(.active) so the selected rule below still wins without an !important. */
button.sidebar-item:not(.active),
a.sidebar-item:not(.active) {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
}

button.sidebar-item,
a.sidebar-item {
    width: 100%;
    font: inherit;
    text-align: left;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}

/* The selected row keeps the canon's own treatment; only the element's stray edges are cleared. */
button.sidebar-item.active,
a.sidebar-item.active {
    border-top: 0;
    border-right: 0;
    border-radius: 0;
}

.sidebar-item--rich {
    align-items: start;
    padding: 10px 16px;
}

.sidebar-item--rich .sidebar-item-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-item--rich .sidebar-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar-item-thumb[data-thumbnail-fit="contain"] img {
    object-fit: contain;
}

.sidebar-item--rich .sidebar-item-thumb--icon i {
    font-size: 22px;
    color: var(--text-secondary);
}

.sidebar-item--rich .sidebar-item-stack {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.sidebar-item--rich .sidebar-item-label {
    font-weight: var(--weight-semibold, 600);
    font-size: 14px;
}

.sidebar-item-subtitle {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.sidebar-item-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    white-space: nowrap;
}

.sidebar-item--rich.active .sidebar-item-thumb {
    border-color: var(--color-primary);
}

/* Interactive record lists keep action buttons outside the record button. */
.workspace-list-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.workspace-list-row > .sidebar-item {
    flex: 1 1 auto;
    min-width: 0;
}

.workspace-list-row > .workspace-item-action-trigger {
    flex: 0 0 auto;
    margin-right: var(--space-xs, 4px);
}

.workspace-list-row .sidebar-item.is-selected {
    box-shadow: inset 3px 0 var(--color-primary);
    background: var(--bg-hover);
}

.workspace-item-action-popover {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-primary);
    color: var(--text-primary);
    z-index: 1000;
}

.sidebar.collapsed .workspace-item-action-trigger {
    display: none;
}

.sidebar-item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-item:hover {
    background: var(--bg-hover);
}

.sidebar-item.is-theme-current {
    background: var(--bg-secondary);
    box-shadow: inset 3px 0 0 var(--color-secondary);
    font-weight: var(--weight-semibold);
}

.layout.workspace.sidebar-right .sidebar-item.is-theme-current {
    box-shadow: inset -3px 0 0 var(--color-secondary);
}

.sidebar-item.active {
    background: var(--bg-primary);
    border-left: 3px solid var(--color-primary);
    color: var(--color-primary);
}

.layout.workspace.sidebar-right .sidebar-item.active {
    border-left: 0;
    border-right: 3px solid var(--color-primary);
}

.sidebar-item-status {
    display: inline-grid;
    align-items: center;
    justify-self: end;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-secondary);
    color: var(--text-on-secondary, var(--text-primary));
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar-item.active .sidebar-item-status {
    background: var(--color-primary);
    color: #ffffff;
}

.sidebar-item i {
    font-size: 18px;
}

.content {
    overflow-y: scroll !important;
    min-width: 0;
    min-height: 0;
    max-height: none !important;
    background: var(--bg-primary);
    /* No padding here — ever. Detail surfaces own their spacing
       (.detail-header / .detail-body); panel-level padding double-wraps
       them in a bg-primary gutter. */
}

.content > h2:first-child {
    margin-top: 0;
}

/* A delegated detail component may mount UI.detailShell into a plain host.
 * Carry the bounded workspace height through both framework and consumer
 * wrappers. Otherwise the inner body grows to its full content height while
 * overscroll-behavior:contain swallows wheel gestures before the outer pane
 * can scroll. The same host shape is supported in component-only tabs. */
.layout.workspace .content > .section.active:has(> .section-detail-shell),
.layout.workspace .content > .section.active:has(> :only-child > .section-detail-shell),
.tab-scrollable-content:has(> .section-detail-shell),
.tab-scrollable-content:has(> :only-child > .section-detail-shell),
:is(.content > .section.active, .tab-scrollable-content, #content-container > [data-tab-id]) > :only-child:has(> .section-detail-shell) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.layout.workspace .content:has(> .section.active > .section-detail-shell),
.layout.workspace .content:has(> .section.active > :only-child > .section-detail-shell) {
    overflow-y: hidden !important;
}

.section {
    display: none;
}

.section.active {
    display: block;
    min-height: 100%;
    padding: 0;
}

/* Detail Header Styling */
.detail-header {
    padding: 32px 32px 24px 32px;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
    margin-bottom: 0;
    display: grid;
    /* Keep in sync with core/detail-shell.css. The actions column is `auto`,
       i.e. max-content, and a wrapping action bar's max-content is every button
       on ONE line — so a busy toolbar claims the whole content box and starves
       `minmax(0, 1fr)` down to 0px. Give the title column a floor so the
       toolbar wraps instead; min(100%, …) keeps it safe in narrow containers. */
    grid-template-columns: minmax(min(100%, 280px), 1fr) auto;
    gap: var(--space-lg);
    align-items: start;
}

.detail-header-main {
    min-width: 0;
}

.detail-header-controls {
    min-width: 0;
}

.detail-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-sm);
}

.detail-header h2 {
    font-family: var(--font-family-heading, var(--font-family-ui, var(--font-family)));
    font-size: var(--font-size-heading-2, 28px);
    font-weight: var(--font-weight-heading, 600);
    color: var(--text-primary);
    margin: 0 0 12px 0;
    line-height: var(--line-height-heading, 1.3);
    letter-spacing: var(--letter-spacing-heading, normal);
}

.detail-subtitle {
    font-family: var(--font-family-body, var(--font-family));
    font-size: var(--font-size-body, 15px);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--line-height-body, 1.5);
    letter-spacing: var(--letter-spacing-body, normal);
}

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

    .detail-header-actions {
        justify-content: flex-start;
    }
}

.detail-body {
    padding: 32px;
    min-width: 0;
}

.detail-body > h3:first-child,
.detail-body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* ==================== THEME CARDS ==================== */

.theme-card {
    cursor: pointer;
    border: 3px solid transparent;
}

.theme-card:hover {
    border-color: var(--color-primary);
}

.theme-preview {
    width: 117.6%;
    height: 117.6%;
    border: none;
    border-radius: var(--radius-sm);
    pointer-events: none;
    overflow: hidden;
    transform: scale(0.85);
    transform-origin: top left;
}

.theme-specimen-preview-frame {
    width: 100%;
    height: clamp(560px, 70vh, 860px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
}

.docs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    min-width: 0;
    max-width: 1280px;
}

.docs-grid > * {
    min-width: 0;
    max-width: 100%;
}

.docs-grid > .docs-grid-full,
.docs-grid > [data-docs-span="full"] {
    grid-column: 1 / -1;
}

@media (min-width: 880px) {
    .docs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.theme-specimen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: var(--space-lg);
    min-width: 0;
}

.theme-specimen-grid > * {
    min-width: 0;
    max-width: 100%;
}

.theme-specimen-grid > [data-theme-specimen-card="preview"] {
    grid-column: 1 / -1;
}

.is-themed-detail-surface {
    background: var(--bg-primary);
}

.is-themed-detail-surface .detail-header {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.is-themed-detail-surface .detail-body {
    background: var(--bg-primary);
}

.is-themed-detail-surface .card,
.is-themed-detail-surface .content-card {
    min-width: 0;
}

.is-themed-detail-surface .card-title {
    color: var(--text-primary) !important;
}

.is-themed-detail-surface .card-title i {
    color: var(--color-primary) !important;
}

.is-themed-detail-surface .card-subtitle {
    color: var(--text-secondary) !important;
}

.is-themed-detail-surface pre,
.is-themed-detail-surface code,
.is-themed-detail-surface .table-container {
    max-width: 100%;
}

.is-themed-detail-surface.theme-surface-cyberpink .detail-header,
.is-themed-detail-surface.theme-surface-cyberpink .card,
.is-themed-detail-surface.theme-surface-cyberpink .content-card {
    box-shadow: 0 0 16px rgba(255, 0, 110, 0.28);
}

.is-themed-detail-surface.theme-surface-ocean .detail-header,
.is-themed-detail-surface.theme-surface-ocean .card,
.is-themed-detail-surface.theme-surface-ocean .content-card {
    box-shadow: 0 8px 24px rgba(0, 180, 216, 0.16);
}

.is-themed-detail-surface.theme-surface-mockup .detail-header,
.is-themed-detail-surface.theme-surface-mockup .card,
.is-themed-detail-surface.theme-surface-mockup .content-card {
    box-shadow: none;
    border-width: 2px;
    border-radius: 0;
}

.is-themed-detail-surface.theme-surface-editorial .detail-header,
.is-themed-detail-surface.theme-surface-editorial .card,
.is-themed-detail-surface.theme-surface-editorial .content-card {
    background: transparent;
    box-shadow: none;
}

/* ==================== TABLES ==================== */

:root {
    --surface-row-hover-bg: var(--bg-hover);
    --surface-row-active-bg: color-mix(in srgb, var(--color-primary) 6%, var(--bg-primary));
    --surface-row-selected-bg: color-mix(in srgb, var(--color-primary) 8%, var(--bg-primary));
    --surface-row-active-selected-bg: color-mix(in srgb, var(--color-primary) 12%, var(--bg-primary));
    --surface-row-focus-bg: var(--surface-row-active-selected-bg);
    --surface-row-accent: var(--color-primary);
}

.table-container {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
}

.data-table.table-fixed {
    table-layout: fixed;
}

.data-table col.table-col-xs {
    width: 64px;
}

.data-table col.table-col-sm {
    width: 112px;
}

.data-table col.table-col-md {
    width: 144px;
}

.data-table col.table-col-lg {
    width: 180px;
}

.data-table col.table-col-actions {
    width: 112px;
}

.data-table col.table-col-fill {
    width: auto;
}

.data-table thead {
    background: var(--bg-secondary);
    border-bottom: 3px solid var(--color-secondary);
}

.data-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    background: var(--bg-hover);
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.data-table tbody tr:hover {
    background: var(--surface-row-hover-bg);
}

.data-table tbody tr.is-active > td,
.data-table tbody tr.is-active {
    background: var(--surface-row-active-bg);
}

.data-table tbody tr.is-selected > td,
.data-table tbody tr[aria-selected="true"] > td,
.data-table tbody tr.is-selected,
.data-table tbody tr[aria-selected="true"] {
    background: var(--surface-row-selected-bg);
}

.data-table tbody tr.is-active.is-selected > td,
.data-table tbody tr.is-active[aria-selected="true"] > td,
.data-table tbody tr.is-active.is-selected,
.data-table tbody tr.is-active[aria-selected="true"] {
    background: var(--surface-row-active-selected-bg);
}

.data-table tbody tr:focus-visible > td,
.data-table tbody tr:focus-visible {
    background: var(--surface-row-focus-bg);
}

.data-table tbody tr.is-active > td:first-child,
.data-table tbody tr.is-active > th:first-child {
    box-shadow: inset 3px 0 0 var(--surface-row-accent);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table .table-cell-center,
.data-table .table-heading-center {
    text-align: center;
}

.data-table .table-cell-nowrap,
.data-table .table-heading-nowrap {
    white-space: nowrap;
}

.data-table .table-cell-shrink,
.data-table .table-heading-shrink,
.data-table .table-cell-actions,
.data-table .table-heading-actions {
    width: 1%;
    white-space: nowrap;
}

.data-table .table-cell-truncate,
.data-table .table-heading-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-table .table-cell-truncate > *,
.data-table .table-heading-truncate > * {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.table-actions--end {
    justify-content: flex-end;
}

.table-empty-cell {
    padding: var(--space-lg) !important;
    text-align: center;
    color: var(--text-secondary);
}

/* Spatial drag/drop layout builder primitive. */
.layout-builder {
    display: grid;
    grid-template-columns: minmax(220px, 18rem) minmax(0, 1fr);
    gap: var(--space-md);
    flex: 1 1 auto;
    min-height: 0;
}

.layout-pool {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 0;
    overflow-y: auto;
    padding-right: var(--space-xs);
}

.layout-pool__empty {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.layout-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    padding: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    cursor: grab;
    transition: border-color var(--transition-base);
}

.layout-item:hover {
    border-color: var(--color-primary);
}

.layout-item.layout-item--used {
    opacity: 0.45;
    cursor: not-allowed;
}

.layout-item.layout-item--hidden {
    display: none;
}

.layout-item__media {
    inline-size: var(--space-xl);
    block-size: var(--space-xl);
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex: 0 0 auto;
}

.layout-item__icon {
    color: var(--text-muted);
    font-size: var(--text-lg);
    flex: 0 0 auto;
}

.layout-item__icon--connected {
    color: var(--color-warning);
}

.layout-item__icon--offline {
    color: var(--color-danger);
}

.layout-item__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.layout-item__name,
.layout-cell__name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-item__meta,
.layout-cell__meta {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-canvas {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.layout-grid {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-sm);
    grid-template-columns: repeat(var(--layout-cols, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--layout-rows, 1), minmax(0, 1fr));
}

.layout-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--space-xl);
    padding: var(--space-xs);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-align: center;
}

.layout-cell.layout-cell--over {
    border-color: var(--color-primary);
    background: var(--color-info-bg);
}

.layout-cell.layout-cell--filled {
    position: relative;
    border-style: solid;
    border-color: var(--color-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: grab;
}

.layout-cell__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.layout-cell__remove {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-end: var(--space-xs);
    display: inline-grid;
    place-items: center;
    inline-size: var(--space-lg);
    block-size: var(--space-lg);
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-danger);
    color: var(--text-on-danger, #fff);
    cursor: pointer;
    font-size: var(--text-xs);
    line-height: 1;
}

.layout-preview {
    display: grid;
    width: 100%;
    aspect-ratio: 16 / 9;
    gap: var(--space-xxs);
    padding: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    grid-template-columns: repeat(var(--layout-cols, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--layout-rows, 1), minmax(0, 1fr));
}

.layout-preview__cell {
    border-radius: var(--radius-xs);
    background: var(--bg-hover);
}

.layout-preview__cell--mapped {
    background: var(--color-primary);
}

.surface-empty-state {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--space-sm);
    min-height: 0;
    padding: 40px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.surface-empty-state--scroll {
    overflow-y: auto;
}

.surface-empty-state--fill {
    height: 100%;
}

.surface-empty-state__icon {
    font-size: var(--text-3xl);
    color: var(--color-primary);
}

.surface-empty-state__title {
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

.surface-empty-state__message {
    max-width: 42ch;
}

/* Workspace list fallbacks use the shared empty-state primitive. Keep the
   message centered in the available sidebar instead of leaking as raw text,
   and reduce it to the icon when the sidebar rail is collapsed. */
.empty-sidebar-message {
    width: 100%;
}

.sidebar.collapsed .empty-sidebar-message {
    padding-inline: var(--space-xs);
}

.sidebar.collapsed .empty-sidebar-message .surface-empty-state__title,
.sidebar.collapsed .empty-sidebar-message .surface-empty-state__message {
    display: none;
}

.workspace-table-shell {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

.workspace-table-scroll {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    padding-bottom: 84px;
}

.workspace-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.workspace-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--space-sm) var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-align: left;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.workspace-table tbody td {
    padding: var(--space-sm) var(--space-sm);
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}

.workspace-table__col--type-icon {
    width: 52px;
    text-align: center;
}

.workspace-table__col--preview {
    width: 184px;
}

.workspace-table__col--site {
    width: auto;
    white-space: nowrap;
}

.workspace-table__sortable {
    cursor: pointer;
    user-select: none;
}

.workspace-table__sortable:hover {
    background: var(--surface-row-hover-bg);
}

.workspace-table tbody tr:hover > td {
    background: var(--surface-row-hover-bg);
}

.workspace-table tbody tr.is-active > td {
    background: var(--surface-row-active-bg);
}

.workspace-table tbody tr.is-selected > td,
.workspace-table tbody tr[aria-selected="true"] > td {
    background: var(--surface-row-selected-bg);
}

.workspace-table tbody tr.is-active.is-selected > td,
.workspace-table tbody tr.is-active[aria-selected="true"] > td {
    background: var(--surface-row-active-selected-bg);
}

.workspace-table tbody tr:focus-visible > td {
    background: var(--surface-row-focus-bg);
}

.workspace-table tbody tr.is-active > td:first-child {
    box-shadow: inset 3px 0 0 var(--surface-row-accent);
}

.workspace-table__sort-icon {
    margin-left: 4px;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.workspace-table__sort-icon--active {
    color: var(--color-primary);
}

.workspace-table__count {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
}

.workspace-table__empty-cell {
    padding: var(--space-xl) var(--space-md) !important;
    color: var(--text-secondary);
    text-align: center;
}

/* ==================== SURFACE RAILS ==================== */

.surface-scroll-viewport {
    min-height: 0;
    padding-bottom: var(--surface-scroll-viewport-reserve, 72px);
}

.surface-rail {
    display: block;
}

.surface-rail--footer {
    position: fixed;
    left: var(--surface-rail-inline, var(--space-sm));
    right: var(--surface-rail-inline, var(--space-sm));
    bottom: var(--surface-rail-block, var(--space-sm));
    z-index: var(--surface-rail-z-index, 50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    background: color-mix(in srgb, var(--bg-primary) 92%, white);
    box-shadow: 0 -8px 16px rgba(15, 23, 42, 0.05);
}

/* ==================== PAGER ==================== */

.pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: center;
}

.pager__summary {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    min-width: 0;
}

.pager__controls {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: var(--space-xs);
    align-items: center;
    justify-content: end;
}

.pager__button,
button.pager__button {
    min-height: 32px;
    padding: 0 10px;
}

.pager__button:hover,
button.pager__button:hover {
    transform: none;
}

.pager__status {
    min-height: 32px;
    padding: 0 12px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.pager__size {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 6px;
    align-items: center;
}

.pager__size-label {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pager__select {
    min-height: 32px;
    padding: 6px 10px;
}

.pager--rail {
    gap: var(--space-md);
}

.pager--rail .pager__controls {
    gap: var(--space-sm);
}

.pager--rail .pager__button {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    gap: 4px;
}

.pager--rail .pager__button[disabled],
.pager--rail .pager__button.is-disabled {
    opacity: 0.5;
    cursor: default;
}

.pager--rail .pager__status {
    min-height: 0;
    min-width: 96px;
    padding: 0 var(--space-sm);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-align: center;
}

.pager--rail .pager__size {
    display: inline-grid;
    gap: var(--space-xs);
}

.pager--rail .pager__size-label {
    font-size: var(--text-sm);
    letter-spacing: normal;
    text-transform: none;
}

.pager--rail .pager__select {
    min-height: 0;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

/* ==================== PREVIEWS ==================== */

.ui-preview {
    --ui-preview-width: 120px;
    --ui-preview-height: 80px;
    position: relative;
    display: inline-grid;
    width: var(--ui-preview-width);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    isolation: isolate;
}

/* Full-width preview for cards, shelves, and other bounded/scrolling layouts. */
.ui-preview--fluid {
    --ui-preview-width: 100%;
    min-width: 0;
    max-width: 100%;
}

.ui-preview--button {
    cursor: pointer;
}

.ui-preview--button:hover {
    transform: none;
}

.ui-preview--button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.ui-preview__frame {
    position: relative;
    display: block;
    width: var(--ui-preview-width);
    height: var(--ui-preview-height);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), transparent 52%),
        linear-gradient(180deg, rgba(236, 242, 248, 0.98), rgba(222, 231, 240, 0.98));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.ui-preview__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.ui-preview.is-loading .ui-preview__frame::after {
    opacity: 1;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.18) 36%, rgba(255, 255, 255, 0.62) 50%, rgba(255, 255, 255, 0.18) 64%, transparent 100%);
    background-size: 220% 100%;
    animation: ui-preview-shimmer 1.4s linear infinite;
}

.ui-preview__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: transparent;
    transition: opacity var(--transition-base), filter var(--transition-base);
}

.ui-preview--contain .ui-preview__img {
    object-fit: contain;
}

.ui-preview__img.is-placeholder {
    opacity: 0.9;
    filter: saturate(0.92);
}

.ui-preview__img.is-loaded {
    opacity: 1;
    filter: none;
}

.ui-preview.is-loading .ui-preview__img {
    opacity: 0.42;
}

.ui-preview.is-unavailable .ui-preview__img {
    opacity: 0.72;
    filter: saturate(0) contrast(0.9);
}

.ui-preview__status {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: none;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(16, 24, 40, 0.84);
    color: white;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    pointer-events: none;
}

.ui-preview.is-unavailable .ui-preview__status {
    display: inline-flex;
}

@keyframes ui-preview-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -20% 0; }
}

/* ==================== CARDS ==================== */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.card-photo {
    width: 100%;
    height: 200px;
    display: grid;
    place-items: center;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
}

.card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-photo.placeholder {
    background: var(--bg-tertiary);
}

.card-photo.placeholder i {
    font-size: 64px;
    color: var(--text-muted);
}

.card-header {
    padding: var(--space-md);
    display: grid;
    gap: var(--space-xs);
}

.card-header p,
.card-header a {
    overflow-wrap: break-word;
}

.card-title {
    font-family: var(--font-family-heading, var(--font-family-ui, var(--font-family)));
    font-size: var(--font-size-heading-3, var(--text-lg));
    font-weight: var(--font-weight-heading, var(--weight-semibold));
    color: var(--text-primary);
    display: block;
    line-height: var(--line-height-heading, 1.1);
    letter-spacing: var(--letter-spacing-heading, normal);
    overflow-wrap: break-word;
}

.card-title i {
    font-size: 20px;
    color: var(--color-primary);
    margin-right: 6px;
}

.card-subtitle {
    font-family: var(--font-family-body, var(--font-family));
    font-size: var(--font-size-body, var(--text-base));
    color: var(--text-secondary);
    line-height: var(--line-height-body, 1.6);
    letter-spacing: var(--letter-spacing-body, normal);
}

/* ==================== ANIMATIONS ==================== */

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes sparkSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.brand-spinner,
.spinner {
    animation: sparkSpin 1s linear infinite;
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--bg-tertiary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
}

/* ==================== RESPONSIVE BREAKPOINTS ==================== */

@media (max-width: 720px) {
    .workspace-table {
        table-layout: auto;
    }
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
    /* Typography scaling */
    :root {
        --text-3xl: 28px;
        --text-2xl: 20px;
        --text-xl: 18px;
        --text-lg: 16px;
        --text-base: 14px;
        --text-sm: 12px;
        --space-lg: 16px;
        --space-md: 12px;
        --space-sm: 8px;
    }

    /* Grid stacking */
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5 {
        grid-template-columns: 1fr;
    }

    /* Sidebar collapse */
    .layout.workspace {
        grid-template-columns: 1fr;
    }

    /* Match base .layout.workspace.sidebar-right (0,3,0) specificity so the
       right-sidebar workspace collapses to one column on mobile instead of
       keeping the desktop minmax() two-column grid (which crushes content). */
    .layout.workspace.sidebar-right {
        grid-template-columns: 1fr;
    }

    /* On narrow screens the inspector becomes a bounded lower rail instead
       of crushing the primary surface into a three-column strip. */
    .layout.workspace.has-inspector,
    .layout.workspace.has-inspector.sidebar-right {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(180px, 40vh);
    }

    .layout.workspace.has-inspector > .content,
    .layout.workspace.has-inspector > .tab-content-shell,
    .layout.workspace.has-inspector.sidebar-right > .content,
    .layout.workspace.has-inspector.sidebar-right > .tab-content-shell {
        grid-column: 1;
        grid-row: 1;
    }

    .layout.workspace.has-inspector > .workspace-inspector,
    .layout.workspace.has-inspector.sidebar-right > .workspace-inspector {
        grid-column: 1;
        grid-row: 2;
        border: 0;
        border-top: 1px solid var(--border-color);
    }

    /* Canvas editors need room to work above a reachable inspector. Document
       header spacing and a 40vh rail otherwise consume the primary surface. */
    .layout.workspace.has-inspector:not(.inspector-tool-window):has(.canvas-workspace-host) {
        grid-template-rows: minmax(0, 1fr) minmax(180px, 30vh);
    }

    .layout.workspace.has-inspector:not(.inspector-tool-window):has(.canvas-workspace-host) .section-detail-shell:has(.canvas-workspace-host) > .detail-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-sm);
        padding: var(--space-md);
        align-items: center;
    }

    .layout.workspace.has-inspector:not(.inspector-tool-window):has(.canvas-workspace-host) .section-detail-shell:has(.canvas-workspace-host) > .detail-header h2 {
        margin: 0;
    }

    .layout.workspace.has-inspector:not(.inspector-tool-window):has(.canvas-workspace-host) .section-detail-shell:has(.canvas-workspace-host) > .detail-body {
        padding: var(--space-md);
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100vh;
        z-index: var(--z-sidebar, 900);
        transition: left 0.3s ease;
        border-right: 1px solid var(--border-color);
    }

    .layout.workspace.sidebar-right .sidebar {
        left: auto;
        right: -250px;
        border-right: 0;
        border-left: 1px solid var(--border-color);
    }

    .sidebar.mobile-open {
        left: 0;
        /* The fixed 44px drawer toggle occupies the top corner while open.
           Reserve that control row so the first navigation item stays fully
           visible and clickable instead of sliding underneath it. */
        padding-top: calc(15px + 44px + var(--space-sm));
    }

    /* Mobile has its own .mobile-sidebar-toggle; the desktop collapse footer
       is meaningless inside the fixed overlay, so hide it. */
    .sidebar-collapse-toggle {
        display: none;
    }

    .layout.workspace.sidebar-right .sidebar.mobile-open {
        left: auto;
        right: 0;
    }

    /* Mobile sidebar toggle button */
    .layout.workspace > .mobile-sidebar-toggle {
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: calc(var(--z-sidebar, 900) + 1);
        background: var(--color-primary);
        color: #ffffff;
        border: none;
        border-radius: var(--radius-sm);
        padding: 8px 12px;
        font-size: 20px;
        cursor: pointer;
        display: grid;
        place-items: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    /* Fixed drawer controls inherit #content-container's stacking context.
       Lift that context above the canonical tab bar so the open drawer and
       its rows remain the top interactive surface across header + tabs apps. */
    #content-container:has(.layout.workspace > .mobile-sidebar-toggle) {
        z-index: 11;
    }

    .layout.workspace.sidebar-right > .mobile-sidebar-toggle {
        left: auto;
        right: 15px;
    }

    /* Sidebar overlay */
    .layout.workspace > .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: calc(var(--z-sidebar, 900) - 1);
        display: none;
    }

    .layout.workspace > .sidebar-overlay.visible {
        display: block;
    }

    /* NO mobile width override for buttons. The base `button` rule already
       states the framework's sizing contract: `width: auto` keeps intrinsic
       size in inline and flex contexts while the grid item's default
       `justify-self: stretch` fills its track. That contract is viewport
       independent — a button in a grid is already full width at 375px, because
       .grid-2/3/4/5 collapse to a single column here.

       A blanket `width: 100%` at this breakpoint contradicted it and only ever
       damaged rows the parent was already sizing: in a flex row every button
       demands the whole row, so a chevron next to a path claimed 190px of a
       343px row and clipped the path to 107px (Swagger's summary rows, and the
       same failure anywhere a toolbar mixes buttons with text). The exclusion
       list this rule used to carry (.btn-link, .icon-button, .btn-icon) only
       named the three cases someone had already been bitten by; the bug was the
       override itself, not the length of the list.

       Consequence, deliberately: a lone <button> in a plain block container is
       now its intrinsic width on a phone, not full width. Pages that want a
       full-width action put it in a grid — which is what the framework's own
       layout classes do. */

    /* Cards reduced padding */
    .card,
    .content-card {
        padding: var(--space-md);
    }

    .page-container {
        padding: var(--space-md);
    }

    /* Modal full-width */
    .modal {
        width: 95%;
        max-width: none;
        padding: var(--space-lg);
    }

    /* Tabs scroll horizontally */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab {
        padding: 10px 16px;
        white-space: nowrap;
    }

    /* Header stays horizontal on mobile — icon+title (minmax(0,1fr), can
       shrink and ellipsis) alongside controls (auto width, nowrap), same
       shape as desktop. A 2026-06-27 fix stacked this to a single column to
       stop long titles ellipsis-clipping against controls, but that broke
       the horizontal-header contract in tests/theme-surfaces.test.js
       ("stays horizontal on mobile") — reverted 2026-07-13. If clipping
       resurfaces for a real title, solve it on that title/controls sizing,
       don't re-stack this grid. */
    .header {
        padding: 12px 16px;
        gap: var(--space-xs);
    }

    /* The fixed workspace drawer toggle shares the header's top corner on
       mobile. Reserve its 44px touch target plus a small gutter inside the
       corresponding header lane so it cannot cover the brand or controls
       while the drawer is closed. */
    body:has(.layout.workspace.sidebar-left > .mobile-sidebar-toggle) .header h1 {
        padding-left: calc(44px + var(--space-sm));
    }

    body:has(.layout.workspace.sidebar-right > .mobile-sidebar-toggle) .header-controls {
        padding-right: calc(44px + var(--space-sm));
    }

    /* The LEFT corner needs a different instrument from the right one.
       `.header-controls` is right-aligned, so its content grows leftward from a
       fixed right edge: `padding-right` above genuinely moves it away from a
       right-hand toggle, but the mirrored `padding-left` would move nothing —
       right-aligned content ignores space added on its left. What actually
       bounds the row's leading edge is the track beside it.

       `.header h1` already reserves the toggle's 44px target, but reserving it
       inside a `minmax(0, 1fr)` track is reserving it inside a track allowed to
       collapse to 0. Once the controls needed the row the title lane duly
       collapsed, the reservation went with it, and the lead control opened over
       the toggle — at x=13 on Lecter's phone header, against a toggle spanning
       15..59; `elementFromPoint` over that control returned the toggle, so it
       could not be tapped.

       Giving the title track the same reservation as its floor makes the corner
       unreachable by either lane, whichever one is under pressure. */
    body:has(.layout.workspace.sidebar-left > .mobile-sidebar-toggle) .header {
        grid-template-columns: minmax(calc(44px + var(--space-sm)), 1fr) auto;
    }

    .header.header-controls-icons-only {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    /* Icon+label controls compact to icon-only presentation when horizontal
       space is scarce. The label remains in the accessibility tree, and every
       control keeps a 44px square touch target. */
    .header-controls {
        gap: 0;
    }

    .header-link:has(> i + .header-link-label) {
        min-width: 44px;
        padding-inline: var(--space-xs);
    }

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

    /* Text-only header actions cannot use the icon-only compaction above.
       Bound both lanes before wrapping their labels: an auto-sized, nowrap
       action lane otherwise collapses the brand and lets a shrinking grid
       button paint its max-content text outside its own hit target. */
    .header.header-has-text-actions,
    body:has(.layout.workspace.sidebar-left > .mobile-sidebar-toggle) .header.header-has-text-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .header.header-has-text-actions > .header-controls {
        flex-wrap: wrap;
        gap: var(--space-xs);
        white-space: normal;
    }

    .header.header-has-text-actions > .header-controls > :is(button, a) {
        min-width: 44px;
        min-height: 44px;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        grid-auto-columns: minmax(0, 1fr);
    }

    .pager {
        grid-template-columns: 1fr;
    }

    .pager__controls {
        justify-content: start;
    }
}

/* Tablet: 769px to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .layout.workspace {
        grid-template-columns: 200px 1fr;
    }

    .layout.workspace.has-inspector {
        grid-template-columns: 200px minmax(0, 1fr) minmax(220px, 260px);
    }

    .layout.workspace.has-inspector.sidebar-right {
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) 200px;
    }
}

/* Desktop: Hide mobile-only elements */
@media (min-width: 769px) {
    .layout.workspace > .mobile-sidebar-toggle {
        display: none;
    }

    .layout.workspace > .sidebar-overlay {
        display: none !important;
    }

    /* Keep floating inspectors out of the workspace grid after the tablet
       column rules above have resolved. */
    .layout.workspace.has-inspector.inspector-tool-window {
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    }

    .layout.workspace.has-inspector.inspector-tool-window.sidebar-right {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    }

    .layout.workspace.has-inspector.inspector-tool-window:has(> .sidebar.collapsed) {
        grid-template-columns: var(--sidebar-width-collapsed, 64px) minmax(0, 1fr);
    }

    .layout.workspace.has-inspector.inspector-tool-window.sidebar-right:has(> .sidebar.collapsed) {
        grid-template-columns: minmax(0, 1fr) var(--sidebar-width-collapsed, 64px);
    }
}

@media (max-width: 768px) {
    .section.active.section-detail-shell > .detail-tool-window-rail {
        align-self: end;
        justify-content: flex-end;
        width: 100%;
        height: min(58vh, 560px);
        max-height: min(58vh, 560px);
        overflow-y: auto;
        pointer-events: none;
    }

    .detail-tool-window-rail > .tool-window-host.is-open,
    .detail-tool-window-rail > .workspace-inspector--tool-window:has(> .tool-window-host.is-open) {
        flex: 1 1 220px;
        min-height: 120px;
        max-height: none;
    }

    .layout.workspace.has-inspector.inspector-tool-window,
    .layout.workspace.has-inspector.inspector-tool-window.sidebar-right {
        position: relative;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr);
    }

    .layout.workspace.has-inspector.inspector-tool-window > .content,
    .layout.workspace.has-inspector.inspector-tool-window > .tab-content-shell,
    .layout.workspace.has-inspector.inspector-tool-window.sidebar-right > .content,
    .layout.workspace.has-inspector.inspector-tool-window.sidebar-right > .tab-content-shell {
        grid-column: 1;
        grid-row: 1;
    }

    .layout.workspace.has-inspector.inspector-tool-window > .workspace-inspector--tool-window,
    .layout.workspace.has-inspector.inspector-tool-window.sidebar-right > .workspace-inspector--tool-window {
        position: absolute;
        z-index: var(--z-sticky, 100);
        grid-column: auto;
        grid-row: auto;
        right: var(--space-sm);
        bottom: var(--space-sm);
        left: var(--space-sm);
        width: auto;
        max-height: min(58vh, 560px);
        overflow: visible;
        border: 0;
        background: transparent;
        pointer-events: none;
    }

    .layout.workspace.has-inspector.inspector-tool-window > .workspace-inspector--tool-window:has(> .tool-window-host.is-open),
    .layout.workspace.has-inspector.inspector-tool-window.sidebar-right > .workspace-inspector--tool-window:has(> .tool-window-host.is-open) {
        height: min(58vh, 560px);
        overflow: hidden;
    }

    .workspace-inspector--tool-window > .tool-window-host.is-open {
        height: 100%;
        max-height: 100%;
    }

    .workspace-inspector--tool-window > .tool-window-host,
    .workspace-inspector--tool-window .tool-window,
    .workspace-inspector--tool-window .tool-window-fab {
        pointer-events: auto;
    }

    .workspace-inspector--tool-window > .tool-window-host.is-collapsed {
        margin-right: 0;
        margin-left: auto;
    }
}

/* ==================== PRINT STYLES ==================== */

@media print {
    body {
        background: white;
        color: black;
    }

    .header,
    .tabs,
    button,
    .modal-overlay {
        display: none;
    }
}

/* ==================== REDUCED MOTION ==================== */
/* Honor the user's OS-level reduced-motion preference framework-wide.
   Every downstream consumer inherits this escape hatch. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* The native calendar/clock button ships as a system-coloured glyph that ignores every token in
   this file. Tint it with the field's own colour so a date field reads like the rest of the form. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(var(--calendar-indicator-invert, 0));
    opacity: 0.65;
    cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}


/* Stop slider — a line with train stops. Every allowed value is a labelled tick on the track and the
   thumb can only land on one, so the whole vocabulary is visible at once and nothing downstream can
   receive an off-stop number. Built for short ordered choice sets (intervals, quality levels) where
   a <select> would hide the options behind a click. UI.stopSlider() / UI.wireStopSlider(). */
.stop-slider {
    display: grid;
    gap: var(--space-xs, 4px);
    min-width: 0;
}

.stop-slider__value {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold, 600);
}

.stop-slider__track {
    position: relative;
    padding-bottom: 22px;
}

.stop-slider__input {
    width: 100%;
    min-height: 0;
    margin: 0;
    accent-color: var(--color-primary);
}

.stop-slider__stops {
    position: absolute;
    inset: auto 0 0;
    height: 20px;
}

/* Each stop is clickable: tapping a label jumps the thumb there, faster than dragging. */
.stop-slider__stop {
    position: absolute;
    top: 0;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transform: translateX(-50%);
}

.stop-slider__dot {
    width: 3px;
    height: 6px;
    border-radius: 1px;
    background: var(--border-color);
}

.stop-slider__stop.is-active {
    color: var(--text-primary);
    font-weight: var(--weight-bold, 600);
}

.stop-slider__stop.is-active .stop-slider__dot {
    background: var(--color-primary);
}


/* Action menu — a flat data definition rendered as keyboard-accessible drill-in
   panels. Submenus replace the current panel so popup consumers never need to
   reserve horizontal flyout space or fight viewport clipping. */
.ui-action-menu {
    min-width: 0;
    color: var(--text-primary);
    background: var(--bg-primary);
}

.ui-action-menu__panel {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: var(--space-xs, 4px);
}

.ui-action-menu__item {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm, 8px);
    width: 100%;
    min-height: 44px;
    padding: var(--space-sm, 8px) var(--space-md, 12px);
    border: 0;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-weight: var(--weight-semibold, 600);
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.ui-action-menu__item:hover,
.ui-action-menu__item:focus-visible {
    background: var(--bg-secondary);
    outline: none;
}

.ui-action-menu__item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.ui-action-menu__item:disabled {
    color: var(--text-muted);
    cursor: default;
    opacity: 0.6;
}

.ui-action-menu__back {
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
}

.ui-action-menu__icon,
.ui-action-menu__affordance {
    color: currentColor;
    font-size: 1.25rem;
    line-height: 1;
}

.ui-action-menu__affordance {
    justify-self: end;
}

.ui-action-menu__text {
    min-width: 0;
}

.ui-action-menu__item--info {
    color: var(--color-info);
}

.ui-action-menu__item--success {
    color: var(--color-success);
}

.ui-action-menu__item--warning {
    color: var(--color-warning);
}

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


body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

::selection {
    background: var(--color-primary);
    color: var(--text-on-primary);
}

.header {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-color);
    box-shadow: none;
}

.header h1,
.header span,
.header i,
.header a,
.header .brand-icon,
.header .header-icon,
.header .brand-icon-default,
.header .brand-icon-hover {
    color: var(--text-primary) !important;
}

.tabs {
    background: var(--bg-primary);
    border-bottom: 2px solid var(--border-color);
    box-shadow: none;
}

.tab {
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.tab:hover,
.tab.active,
.tab[aria-selected="true"] {
    background: var(--color-primary);
    color: var(--text-on-primary);
}

button,
.button,
.btn,
input,
select,
textarea {
    border-width: 2px;
    border-color: var(--border-color);
    box-shadow: none;
}

.btn-primary,
button.btn-primary,
.is-themed-detail-surface .detail-header .btn-primary,
.is-themed-detail-surface .card .btn-primary {
    background: var(--color-primary) !important;
    color: var(--text-on-primary) !important;
    border: 2px solid var(--border-color) !important;
}

/* No displacement on hover. A translate here moves the element and everything
   optically anchored to it, which is intolerable on a surface where the user is
   reading fixed positions -- and llm-docs.md already forbids lifting or nudging
   on hover. The shadow alone carries the affordance. */
button:not([disabled]):hover,
.button:not([disabled]):hover,
.btn:not([disabled]):hover {
    box-shadow: var(--shadow-hover);
}

.card,
.content-card,
.modal,
.surface-card,
.tool-window,
.preview-screen {
    background: var(--bg-card);
    border-color: var(--border-color);
    border-width: 2px;
    box-shadow: none;
}

.card:hover,
.content-card:hover {
    box-shadow: none;
    transform: none;
}

.status-completed,
.status-success,
.status-enabled,
.is-themed-detail-surface .status-success {
    background: var(--color-primary) !important;
    color: var(--text-on-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.status-failed,
.status-error,
.status-danger,
.is-themed-detail-surface .status-danger {
    background: var(--color-secondary) !important;
    color: var(--text-on-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.status-executing,
.status-planning,
.status-warning,
.is-themed-detail-surface .status-warning {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.status-created,
.status-info,
.is-themed-detail-surface .status-info {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

body[data-ui-mode="dark"] .status-success,
body.dark-mode .status-success {
    background: var(--color-primary) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--border-color) !important;
}

body[data-ui-mode="dark"] .status-error,
body.dark-mode .status-error,
body[data-ui-mode="dark"] .status-danger,
body.dark-mode .status-danger {
    background: var(--color-secondary) !important;
    color: var(--text-on-secondary) !important;
    border-color: var(--border-color) !important;
}

.sidebar,
.surface-rail,
.tool-window-rail {
    background: var(--bg-primary);
    border-color: var(--border-color);
    box-shadow: none;
}

a {
    color: var(--text-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

code,
pre,
kbd,
samp {
    border-radius: 0;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border: 2px solid var(--bg-primary);
}

*::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
}

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

/* ============================================================
 * Canon primitives — inlined from js/*.css (the source of truth).
 * @generated — do not edit below by hand; edit js/<name>.css and
 * re-run scripts/sync-active-theme.mjs. See llm-docs.md.
 * ============================================================ */

/* ---------- js/form-field.css ---------- */
/**
 * Form Field - Canon Primitive
 * Single source of truth for stacked-label-plus-input rows used in property
 * editors, settings panels, modal forms, and other config surfaces.
 *
 * Pattern:
 *   .property-field                       — vertical stack, one per row
 *     .property-label                     — uppercase eyebrow label above input
 *     .property-input                     — full-width input wrapper
 *       (text/number/textarea/select)    — picks up canon input defaults
 *     .property-description               — optional helper text under input
 *
 * Variants for non-text controls:
 *   .property-checkbox-wrapper            — checkbox row with custom box + label
 *     .custom-checkbox                    — square checkbox indicator
 *     .property-checkbox-label            — clickable label
 *
 *   .property-select-wrapper              — flex row of toggle-style buttons
 *     .property-select-btn[.active]       — single-select pill, .active = chosen
 *
 *   .property-color-wrapper               — color picker + hex text together
 *     input[type="color"]                 — square swatch
 *     .property-color-text                — mono hex string
 *
 *   .property-stylemode-wrapper           — flex row of stylemode buttons
 *     .property-stylemode-btn[.active]
 *
 *   .property-alignment-wrapper           — 3-column grid for icon-aligned controls
 *     .property-alignment-btn[.active]
 *
 * No JS required. Consumers wire their own input/change handlers and add/remove
 * `.active` on toggle buttons themselves. Visual tokens come from canon
 * (--bg-primary, --bg-secondary, --border-color, --color-primary, etc.).
 */

/* Property field container — vertical stack */
.property-field {
    margin-bottom: 20px;
}

/* Eyebrow-style label above the input */
.property-label {
    display: block;
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    color: var(--text-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Input wrapper — input itself inherits canon defaults */
.property-input {
    width: 100%;
}

.property-input input[type="text"],
.property-input input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.property-input input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Optional helper text under the input */
.property-description {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 4px;
    font-style: italic;
}

/* Dense operator surfaces opt in at the app, detail, or individual field.
 * Control height remains governed by the canonical 44px minimum target. */
[data-ui-density="compact"] .property-field,
.section-detail-shell--compact .property-field,
.detail-body--compact .property-field,
.property-field--compact {
    margin-bottom: var(--space-sm, 8px);
}

[data-ui-density="compact"] .property-label,
.section-detail-shell--compact .property-label,
.detail-body--compact .property-label,
.property-field--compact > .property-label {
    margin-bottom: var(--space-xs, 4px);
}

/* ---------- Checkbox variant ---------- */

.property-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s;
}

.property-checkbox-wrapper:hover {
    border-color: var(--color-primary);
}

.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    transition: all 0.2s;
}

.custom-checkbox.checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.custom-checkbox.checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: var(--text-sm);
    font-weight: bold;
}

.property-checkbox-label {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    cursor: pointer;
}

/* ---------- Select-button-row variant ---------- */

.property-select-wrapper {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.property-select-btn {
    flex: 1;
    min-width: 80px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    transition: all 0.2s;
}

.property-select-btn:hover {
    border-color: var(--color-primary);
}

.property-select-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* ---------- Color-picker variant ---------- */

.property-color-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.property-color-wrapper input[type="color"] {
    width: 60px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--bg-primary);
}

.property-color-text {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}

.property-color-text:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ---------- Stylemode variant (flex row of toggle buttons) ---------- */

.property-stylemode-wrapper {
    display: flex;
    gap: 8px;
}

.property-stylemode-btn {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    transition: all 0.2s;
}

.property-stylemode-btn:hover {
    border-color: var(--color-primary);
}

.property-stylemode-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* ---------- Alignment variant (3-column grid) ---------- */

.property-alignment-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.property-alignment-btn {
    padding: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.property-alignment-btn:hover {
    border-color: var(--color-primary);
}

.property-alignment-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* ============================================================
 * Form Controls — Canon Primitives (UI.field / input / select /
 * textarea / toggle). APPEND to js/form-field.css (the canon
 * source of truth, which scripts/sync-active-theme.mjs inlines
 * into every theme's style.css). It extends the existing
 * .property-field / .property-label / .property-input /
 * .property-description primitive: reuses them for layout and
 * adds the control surface (.ui-control), the invalid state, and
 * a real switch (.ui-toggle) the canon lacked. Base input look
 * (border/padding/background/focus) already comes from
 * core/layout.css; nothing here re-declares it. Tokens only —
 * zero hardcoded colors.
 * ============================================================ */

/* Normalize width inside a .property-input wrapper for the control types the
 * existing rule (input[type=text|number] only) does not size. */
.property-input .ui-control,
.property-input select,
.property-input textarea,
.property-input input[type="email"],
.property-input input[type="password"],
.property-input input[type="search"],
.property-input input[type="tel"],
.property-input input[type="url"],
.property-input input[type="date"],
.property-input input[type="time"] {
    width: 100%;
    box-sizing: border-box;
}

.ui-textarea {
    min-height: calc(var(--space-xl) * 2);
    resize: vertical;
    line-height: var(--line-height-body);
}

/* Invalid state — shared across every control + its hint. */
.ui-control.is-invalid,
.ui-control.is-invalid:focus {
    border-color: var(--color-danger);
}

.ui-control.is-invalid:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-danger-bg);
}

.property-description.is-invalid {
    color: var(--color-danger);
    font-style: normal;
}

.ui-field__required {
    color: var(--color-danger);
}

/* ---------- Toggle (switch + checkbox) ---------- */

.ui-toggle {
    /* Keep native focus scrolling inside the label's scroll container. Without
       this anchor, the absolute hidden input can escape a bounded detail pane. */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-primary);
    user-select: none;
}

.ui-toggle.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Visually hidden but accessible native checkbox drives the control. */
.ui-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ui-toggle__label {
    font-weight: var(--weight-medium);
}

/* Switch track + thumb (default variant). */
.ui-toggle--switch .ui-toggle__track {
    position: relative;
    flex-shrink: 0;
    width: calc(var(--space-xl) + var(--space-xs));
    height: var(--space-lg);
    /* A switch track is wider than it is tall. --radius-full is 50%, which on a
       non-square box resolves to an ellipse, not a pill. --radius-pill is the
       token for capsule shapes and stays square in the square themes. */
    border-radius: var(--radius-pill, 9999px);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.ui-toggle--switch .ui-toggle__thumb {
    position: absolute;
    top: 50%;
    left: var(--space-xs);
    width: calc(var(--space-md) - var(--space-xs));
    height: calc(var(--space-md) - var(--space-xs));
    transform: translateY(-50%);
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    transition: left var(--transition-base), transform var(--transition-base);
}

.ui-toggle--switch .ui-toggle__input:checked + .ui-toggle__track {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.ui-toggle--switch .ui-toggle__input:checked + .ui-toggle__track .ui-toggle__thumb {
    left: 100%;
    transform: translate(calc(-100% - var(--space-xs)), -50%);
}

.ui-toggle__input:focus-visible + .ui-toggle__track {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Checkbox variant — square box that fills on check. */
.ui-toggle--checkbox .ui-toggle__track {
    position: relative;
    flex-shrink: 0;
    width: var(--space-lg);
    height: var(--space-lg);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.ui-toggle--checkbox .ui-toggle__thumb {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-toggle--checkbox .ui-toggle__input:checked + .ui-toggle__track {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.ui-toggle--checkbox .ui-toggle__input:checked + .ui-toggle__track .ui-toggle__thumb::after {
    content: '\2713';
    color: var(--text-on-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
}

/* ---------- js/choice-card.css ---------- */
/**
 * Choice Card - Canon Primitive
 * Pickable card-shaped option for "choose one from a small grid" patterns.
 * Examples: grid-size presets, theme variants, layout templates, snippet pickers.
 *
 * No JS required — selection is just toggling .selected via the consumer's
 * own click handler.
 *
 * Composition:
 *   <button class="choice-card">
 *     <div class="choice-card-thumb"><svg/icon/preview/></div>
 *     <div class="choice-card-label">Title</div>
 *     <div class="choice-card-meta">Subtitle / dimensions / hint</div>
 *   </button>
 */

/* Card */
.choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.choice-card:hover {
    border-color: var(--color-primary);
    background: var(--bg-secondary);
}

.choice-card:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.choice-card.selected {
    border-color: var(--color-primary);
    background: var(--bg-secondary);
}

.choice-card.disabled,
.choice-card[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Thumbnail / icon slot — usually an inline svg or <i class="ti ti-..."> */
.choice-card-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.choice-card-thumb i,
.choice-card-thumb svg {
    color: var(--color-primary);
}

/* Primary label */
.choice-card-label {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--text-primary);
}

/* Optional secondary meta line (size, hint, count, etc.) */
.choice-card-meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ---------- js/collapsible.css ---------- */
/**
 * Collapsible Section - Canon Primitive
 * Single source of truth for expandable/collapsible sections.
 * Used in sidebars, panels, settings surfaces.
 *
 * API: window.UI.collapsible.init(container, namespace)
 * See js/collapsible.js for behavior + localStorage persistence.
 */

/* Container */
.collapsible-section {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color);
}

/* Header - clickable area */
.collapsible-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    border-radius: 0;
}

.collapsible-header:hover {
    background: var(--bg-primary);
}

.collapsible-header.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toggle icon (chevron) */
.collapsible-toggle {
    font-size: var(--text-base);
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

/* Section icon */
.collapsible-icon {
    font-size: var(--text-md);
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Title text */
.collapsible-title {
    flex: 1;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Optional badge (count, status, etc) */
.collapsible-badge {
    background: var(--color-primary);
    color: white;
    padding: 3px 8px;
    border-radius: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    min-width: 28px;
    text-align: center;
}

.collapsible-badge.no-matches {
    background: var(--text-muted);
}

/* Content area */
.collapsible-content {
    display: none;
    padding: 12px;
    background: var(--bg-primary);
}

.collapsible-content.expanded {
    display: block;
}

/* State classes for toggle icon */
.collapsible-section.expanded .collapsible-toggle {
    transform: rotate(90deg);
}

/* ---------- js/library-list.css ---------- */
/**
 * Library List - Canon Primitive
 * Categorized scrollable list for left-rail catalogs (widget libraries,
 * theme pickers, snippet panels, asset browsers, etc.).
 *
 * Pattern:
 *   .library-list                       — scrollable container
 *     .library-list-category            — collapsible category group
 *       .library-list-category-header   — clickable header row
 *         .library-list-category-toggle — chevron (rotates on .expanded)
 *         .library-list-category-icon   — leading icon
 *         .library-list-category-name   — label
 *         .library-list-category-count  — match-count badge
 *       .library-list-category-items    — item container
 *         .library-list-item            — card-shaped item
 *           .library-list-item-thumb    — preview / icon
 *             .library-list-item-badge  — corner overlay (size, count, etc.)
 *           .library-list-item-title    — label
 *
 * No JS required. The consumer wires its own toggle / drag / click handlers.
 *
 * NOTE: This is a structural cousin of `collapsible-section` — the key
 * difference is that library-list assumes a uniform-grid item rendering and
 * carries the item-card primitives. Use collapsible-section for arbitrary
 * panel content; use library-list when each section's body is a list of
 * pickable thumbnails.
 */

/* Container */
.library-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Category group */
.library-list-category {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color);
}

/* Category header (clickable) */
.library-list-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    border-radius: 0;
}

.library-list-category-header:hover {
    background: var(--bg-primary);
}

.library-list-category-header.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toggle chevron */
.library-list-category-toggle {
    font-size: var(--text-base);
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

/* Leading icon */
.library-list-category-icon {
    font-size: var(--text-md);
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Category name */
.library-list-category-name {
    flex: 1;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Match-count badge */
.library-list-category-count {
    background: var(--color-primary);
    color: white;
    padding: 3px 8px;
    border-radius: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    min-width: 28px;
    text-align: center;
}

.library-list-category-count.no-matches {
    background: var(--text-muted);
}

/* Items container */
.library-list-category-items {
    padding: 0;
    background: var(--bg-primary);
}

/* Individual item card */
.library-list-item {
    background: var(--bg-secondary);
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 12px;
    margin-bottom: 0;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.library-list-item:hover {
    background: var(--bg-primary);
}

.library-list-item.dragging {
    opacity: 0.5;
}

/* Item title */
.library-list-item-title {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    font-size: var(--text-xs);
    text-align: center;
    padding: 0;
    margin-bottom: 8px;
}

/* Thumbnail / preview slot */
.library-list-item-thumb {
    width: 100%;
    height: 180px;
    min-height: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    overflow: hidden;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Corner badge (size, count, status) — stack on top of thumb */
.library-list-item-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--text-muted);
    color: white;
    padding: 4px 10px;
    border-radius: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    z-index: 10;
}

/* ---------- js/cards.css ---------- */
/**
 * Cards Everywhere - Styles
 * Uses CSS variables from styles-everywhere for theming
 */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg, 24px);
    padding: var(--space-lg, 24px);
    overflow-y: auto;
}

.card {
    /* Canon tokens (core/colors.css), not the retired styles-everywhere
       --color-* set below — those are never defined by any theme, so they
       silently fell back to a hardcoded white fill + transparent border.
       Result: a card was indistinguishable from the page until :hover, which
       then snapped in a shadow with nothing to transition from. --bg-card
       and --border-color already flip correctly per theme/dark-mode, so this
       also supersedes the old dark-mode-only patch that lived here. */
    background: var(--bg-card, #f8f9fa);
    border: 1px solid var(--border-color, #dddddd);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: all var(--transition-base, 0.2s);
    display: grid;
    grid-template-rows: auto auto;
    /* The rows were declared and the column was not, so the card's single
       implicit column resolved to `auto` — which is `minmax(auto, auto)`, and
       the `auto` minimum is min-content. Any unbreakable child then set the
       card's width: one <h2> holding a 69-character file path floored this
       track at 415px inside a 375px viewport, and the card's own
       `overflow: hidden` quietly cut off everything past the fold rather than
       reporting it. An explicit `minmax(0, 1fr)` keeps the track a container
       instead of a measurement of its contents — the same shape .grid-2/3/4/5
       already use. */
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    overflow: hidden;
}

.card:hover {
    /* No transform/scale and no border recolor on hover — cards must not grow or
       flip their border color when pointed at. This was unwanted; do not re-add. */
    background: var(--bg-hover, #e5e7eb);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0,0,0,0.15));
    z-index: 10;
}

.card-photo {
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary, #f3f4f6);
}

.card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-photo.placeholder {
    background: var(--border-light, #f3f4f6);
}

.card-photo.placeholder i {
    font-size: 64px;
    color: var(--border-dark, #444444);
}

.card-header {
    padding: var(--space-md, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 4px);
}

.card-title {
    font-size: var(--text-lg, 18px);
    font-weight: var(--weight-semibold, 600);
    color: var(--text-primary, #000000);
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
}

.card-subtitle {
    font-size: var(--text-base, 14px);
    color: var(--text-secondary, #666666);
}

.card-delete {
    position: absolute;
    top: var(--space-md, 16px);
    right: var(--space-md, 16px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-danger, #dc3545);
    color: white;
    border: none;
    cursor: pointer;
    font-size: var(--text-xl, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition-base, 0.2s);
    z-index: 10;
}

.card:hover .card-delete {
    opacity: 1;
}

.card-delete:hover {
    background: var(--color-danger-hover, #c82333);
    transform: scale(1.1);
}

/* ---------- js/tables.css ---------- */
/**
 * Tables Everywhere - Styles
 * Uses CSS variables from styles-everywhere for theming
 */

.table-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

/*
 * Dense record tables need a different narrow-container contract from the
 * virtualized workspace table above. A docked inspector can be narrow even on
 * a wide desktop, so viewport media queries cannot protect its labels and
 * actions. Opt in with `.table-container--responsive` and put the column label
 * on each body cell as `data-label="…"`. Below 42rem the semantic rows become
 * readable record cards; above it the ordinary table layout is unchanged.
 */
.table-container--responsive {
    container-type: inline-size;
    overflow: auto;
    overscroll-behavior: contain;
}

@container (max-width: 42rem) {
    .table-container--responsive .data-table,
    .table-container--responsive .data-table tbody,
    .table-container--responsive .data-table tr,
    .table-container--responsive .data-table th,
    .table-container--responsive .data-table td {
        display: block;
        width: 100%;
    }

    .table-container--responsive .data-table thead {
        display: none;
    }

    .table-container--responsive .data-table tbody {
        overflow: visible;
    }

    .table-container--responsive .data-table tbody tr {
        margin-block-end: var(--space-md, 16px);
        border: 1px solid var(--border-color, #d1d5db);
        background: var(--bg-primary, #ffffff);
    }

    .table-container--responsive .data-table td {
        display: grid;
        grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-sm, 8px);
        min-height: 48px;
        padding: var(--space-sm, 8px) var(--space-md, 16px);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    .table-container--responsive .data-table td::before {
        content: attr(data-label) ":" / attr(data-label);
        min-width: 0;
        color: var(--text-secondary, #4b5563);
        font-size: var(--text-sm, 0.875rem);
        font-weight: var(--weight-semibold, 600);
        line-height: 1.25;
    }

    .table-container--responsive .data-table td[colspan] {
        display: block;
    }

    .table-container--responsive .data-table td[colspan]::before,
    .table-container--responsive .data-table td:not([data-label])::before {
        content: none;
    }
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.data-table thead {
    /* Canon tokens (core/colors.css), not the retired styles-everywhere --color-*
       set below (same bug class as js/cards.css, fixed in a199460) — that family
       is never defined by any theme, so it silently fell back to a hardcoded,
       non-theme-aware default instead of flipping with dark mode. */
    background: var(--border-light, #f3f4f6);
    flex-shrink: 0;
    z-index: 10;
    display: table;
    width: 100%;
    table-layout: fixed;
}

.data-table thead tr {
    display: table-row;
}

.data-table tbody {
    display: block;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.data-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.data-table th {
    padding: var(--space-md, 16px);
    text-align: left;
    font-weight: var(--weight-semibold, 600);
    color: var(--text-primary, #000000);
    border-bottom: 2px solid var(--border-dark, #444444);
    display: table-cell;
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    background: var(--bg-hover, #e5e7eb);
}

.data-table td {
    padding: var(--space-md, 16px);
    border-bottom: 1px solid var(--border-light, #f3f4f6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: table-cell;
}

.data-table td.loading {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
}

.data-table tbody tr:hover {
    background: var(--surface-row-hover-bg, var(--bg-card, #f8f9fa));
}

.data-table tbody tr.is-active > td,
.data-table tbody tr.is-active {
    background: var(--surface-row-active-bg, color-mix(in srgb, var(--color-primary, #2563eb) 6%, var(--bg-primary, #ffffff)));
}

.data-table tbody tr.is-selected > td,
.data-table tbody tr[aria-selected="true"] > td,
.data-table tbody tr.is-selected,
.data-table tbody tr[aria-selected="true"] {
    background: var(--surface-row-selected-bg, color-mix(in srgb, var(--color-primary, #2563eb) 8%, var(--bg-primary, #ffffff)));
}

.data-table tbody tr.is-active.is-selected > td,
.data-table tbody tr.is-active[aria-selected="true"] > td,
.data-table tbody tr.is-active.is-selected,
.data-table tbody tr.is-active[aria-selected="true"] {
    background: var(--surface-row-active-selected-bg, color-mix(in srgb, var(--color-primary, #2563eb) 12%, var(--bg-primary, #ffffff)));
}

.data-table tbody tr:focus-visible > td,
.data-table tbody tr:focus-visible {
    background: var(--surface-row-focus-bg, var(--surface-row-active-selected-bg, color-mix(in srgb, var(--color-primary, #2563eb) 12%, var(--bg-primary, #ffffff))));
}

.data-table tbody tr.is-active > td:first-child,
.data-table tbody tr.is-active > th:first-child {
    box-shadow: inset 3px 0 0 var(--surface-row-accent, var(--color-primary, #2563eb));
}

/* Column width classes */
.col-status { width: 120px; }
.col-ip { width: 150px; }
.col-name { width: 300px; }
.col-url { width: 40%; }
.col-actions { width: 150px; }
.col-default { width: 100px; }
.col-items { width: 100px; }

/* ---------- js/dropzone.css ---------- */
/* ============================================================
 * NEW FILE: js/dropzone.css  (canon source of truth — pairs with
 * the dropzone() factory in js/components.js, same as js/tag-search.css
 * pairs with js/tag-search.js).
 *
 * After creating it, register the filename in scripts/sync-active-theme.mjs
 * (PRIMITIVE_CSS_FILES array, add 'dropzone.css') and re-run the sync so it is
 * inlined into active/style.css. Tokens only — no hardcoded colors.
 * ============================================================ */

/**
 * Dropzone — Canon Primitive styles (pairs with dropzone() in js/components.js)
 * @url https://ui.mullmania.com/js/dropzone.css
 *
 * A drag-and-drop surface that also click-opens a native file picker.
 * Composition (built by UI.dropzone):
 *   .ui-dropzone[.ui-dropzone--interactive|.ui-dropzone--static]
 *     input.ui-dropzone__input        — visually hidden native <input type=file>
 *     i.ui-dropzone__icon             — leading affordance glyph (tabler)
 *     .ui-dropzone__body
 *       label.ui-dropzone__label      — primary prompt, bound to the input id
 *       .ui-dropzone__browse          — secondary "or click to browse" line
 *       .ui-dropzone__hint            — optional helper text (accept/size)
 *
 * State: .is-dragover (live drag), .is-disabled. Visual tokens come from canon
 * (--bg-primary, --bg-secondary, --border-color, --color-primary, etc.).
 */

.ui-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.ui-dropzone--interactive {
    cursor: pointer;
}

.ui-dropzone--interactive:hover {
    border-color: var(--color-primary);
    background: var(--bg-secondary);
}

.ui-dropzone--interactive:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Active drag — solid accent border + tinted fill so the target reads clearly. */
.ui-dropzone.is-dragover {
    border-style: solid;
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-primary));
}

.ui-dropzone.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Visually hidden native input — kept in the a11y tree, removed from layout.
   The surface proxies clicks/keys to it; the <label for> also targets it. */
.ui-dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ui-dropzone__icon {
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--color-primary);
    flex-shrink: 0;
}

.ui-dropzone.is-disabled .ui-dropzone__icon {
    color: var(--text-muted);
}

.ui-dropzone__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.ui-dropzone__label {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--text-primary);
}

.ui-dropzone--interactive .ui-dropzone__label {
    cursor: pointer;
}

.ui-dropzone__browse {
    font-size: var(--text-sm);
    color: var(--color-primary);
}

.ui-dropzone.is-disabled .ui-dropzone__browse {
    color: var(--text-muted);
}

.ui-dropzone__hint {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ---------- js/code.css ---------- */
/* ==================== CODE VIEWER ====================
 * Read-only monospace code / JSON block. Built by UI.code(); also
 * reachable via { component: "code" } in page contracts. Token-driven
 * (no hardcoded colors) so it inherits every theme + dark mode. Mirrors
 * the .ui-preview authoring style. Add to core/layout.css immediately
 * after the PREVIEWS block (right before the CARDS block).
 *
 * NOTE ON SPECIFICITY: the canon's global dark overrides
 *   body[data-ui-mode="dark"] pre  /  body[data-ui-mode="dark"] code
 * are (0,1,1) and carry hardcoded #1e1e1e/#d4d4d4/#2d2d2d/#88c0d0
 * (core/layout.css). A single-class .ui-code__pre (0,1,0) LOSES to them
 * in dark mode. The inner pre/code rules below are therefore scoped as
 * `.ui-code .ui-code__pre` / `.ui-code .ui-code__code` (0,2,0) so they
 * beat (0,1,1) in every theme + mode and keep the block token-driven. */

.ui-code {
    margin: 0 0 var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    overflow: hidden;
}

.ui-code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.ui-code__lang {
    margin: 0;
    color: var(--text-secondary);
}

.ui-code__copy {
    margin-left: auto;
}

/* Scoped (0,2,0) to out-specify the global `pre` AND the hardcoded
   `body[data-ui-mode="dark"] pre` (0,1,1). Resets the global left-accent
   border, radius AND any per-theme all-sides border (simple/pastelzom)
   so the figure owns the frame and the block stays flush + token-driven. */
.ui-code .ui-code__pre {
    margin: 0;
    padding: var(--space-md);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--line-height-body);
    overflow-x: auto;
}

.ui-code .ui-code__pre:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Scoped (0,2,0) so it beats the hardcoded `body[data-ui-mode="dark"] code`
   (0,1,1) and the global `pre code` (0,0,2); inherits the themed pre color. */
.ui-code .ui-code__code {
    display: block;
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
    white-space: pre;
}

.ui-code.ui-code--wrap .ui-code__pre {
    overflow-x: hidden;
}

.ui-code.ui-code--wrap .ui-code__code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}