:root {
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --dock-min-bottom-height: 220px;
    --dock-min-right-width: 420px;
    --dock-min-controls-width: 260px;
    --dock-default-bottom-height: 320px;
    --transition-view-duration: 120ms;
    --quick-start-width: 1120px;
    --quick-start-max-height: 92vh;
    --quick-start-editor-height: 260px;
    --quick-start-overlay-layer: 2200;
    --token-unit-88px: 88px;
    --token-unit-220px: 220px;
    --token-unit-260px: 260px;
    --token-unit-420px: 420px;
}

:root {
    /* Auto-generated strict token aliases for non-root literals. */
    --token-color-rgba-248-248-242-0-22: rgba(248, 248, 242, 0.22);
    --token-color-rgba-189-147-249-0-14: rgba(189, 147, 249, 0.14);
    --token-color-rgba-189-147-249-0-45: rgba(189, 147, 249, 0.45);
    --token-color-rgba-0-0-0-0-10: rgba(0, 0, 0, 0.10);
    --token-color-rgba-248-248-242-0-78: rgba(248, 248, 242, 0.78);
    --token-color-rgba-189-147-249-0-12: rgba(189, 147, 249, 0.12);
    --token-color-rgba-189-147-249-0-40: rgba(189, 147, 249, 0.40);
    --token-color-rgba-248-248-242-0-84: rgba(248, 248, 242, 0.84);
    --token-color-rgba-248-248-242-0-55: rgba(248, 248, 242, 0.55);
    --token-color-rgba-0-0-0-0-22: rgba(0, 0, 0, 0.22);
    --token-color-rgba-248-248-242-0-35: rgba(248, 248, 242, 0.35);
    --token-color-rgba-0-0-0-0-35: rgba(0, 0, 0, 0.35);
    --token-color-rgba-248-248-242-0-62: rgba(248, 248, 242, 0.62);
    --token-color-rgba-248-248-242-0-26: rgba(248, 248, 242, 0.26);
    --token-color-1a1b26: #1a1b26;
    --token-color-rgba-189-147-249-0-85: rgba(189, 147, 249, 0.85);
    --token-color-rgba-189-147-249-0-6: rgba(189, 147, 249, 0.6);
    --token-color-rgba-248-248-242-0-08: rgba(248, 248, 242, 0.08);
    --token-color-rgba-189-147-249-0-10: rgba(189, 147, 249, 0.10);
    --token-color-rgba-189-147-249-0-18: rgba(189, 147, 249, 0.18);
    --token-color-rgba-248-248-242-0-45: rgba(248, 248, 242, 0.45);
    --token-color-rgba-248-248-242-0-85: rgba(248, 248, 242, 0.85);
    --token-color-rgba-248-248-242-0-12: rgba(248, 248, 242, 0.12);
    --token-color-rgba-248-248-242-0-82: rgba(248, 248, 242, 0.82);
    --token-color-rgba-0-0-0-0-16: rgba(0, 0, 0, 0.16);
    --token-color-rgba-248-248-242-0-02: rgba(248, 248, 242, 0.02);
    --token-color-rgba-248-248-242-0-88: rgba(248, 248, 242, 0.88);
    --token-color-rgba-189-147-249-0-55: rgba(189, 147, 249, 0.55);
    --token-color-rgba-248-248-242-0-72: rgba(248, 248, 242, 0.72);
    --token-color-rgba-248-248-242-0-92: rgba(248, 248, 242, 0.92);
    --token-color-ff9f9f: #ff9f9f;
    --token-color-f5d08a: #f5d08a;
    --token-color-rgba-189-147-249-0-16: rgba(189, 147, 249, 0.16);
    --token-color-rgba-189-147-249-0-22: rgba(189, 147, 249, 0.22);
    --token-color-rgba-189-147-249-0-05: rgba(189, 147, 249, 0.05);
    --token-color-rgba-26-27-38-0-92: rgba(26, 27, 38, 0.92);
    --token-color-rgba-248-248-242-0-86: rgba(248, 248, 242, 0.86);
    --token-color-rgba-139-233-253-0-14: rgba(139, 233, 253, 0.14);
    --token-color-rgba-139-233-253-0-55: rgba(139, 233, 253, 0.55);
    --token-color-rgba-139-233-253-0-18: rgba(139, 233, 253, 0.18);
    --token-color-rgba-139-233-253-0-05: rgba(139, 233, 253, 0.05);
    --token-color-rgba-139-233-253-0-6: rgba(139, 233, 253, 0.6);
    --token-color-rgba-189-147-249-0-65: rgba(189, 147, 249, 0.65);
    --token-color-rgba-0-0-0-0-26: rgba(0, 0, 0, 0.26);
    --token-color-rgba-248-248-242-0-18: rgba(248, 248, 242, 0.18);
    --token-color-rgba-0-0-0-0-28: rgba(0, 0, 0, 0.28);
    --token-color-rgba-189-147-249-0-24: rgba(189, 147, 249, 0.24);
    --token-color-rgba-248-248-242-0-70: rgba(248, 248, 242, 0.70);
    --token-color-rgba-248-248-242-0-20: rgba(248, 248, 242, 0.20);
    --token-color-rgba-189-147-249-0-25: rgba(189, 147, 249, 0.25);
    --token-color-rgba-248-248-242-0-5: rgba(248, 248, 242, 0.5);
    --token-color-a97ff3: #a97ff3;
    --token-color-rgba-0-0-0-0-08: rgba(0, 0, 0, 0.08);
    --token-color-rgba-248-248-242-0-25: rgba(248, 248, 242, 0.25);
    --token-color-rgba-40-42-54-0-92: rgba(40, 42, 54, 0.92);
    --token-color-rgba-139-233-253-0-15: rgba(139, 233, 253, 0.15);
    --token-color-rgba-255-184-108-0-16: rgba(255, 184, 108, 0.16);
    --token-color-rgba-255-184-108-0-55: rgba(255, 184, 108, 0.55);
    --token-color-rgba-255-85-85-0-18: rgba(255, 85, 85, 0.18);
    --token-color-rgba-255-85-85-0-55: rgba(255, 85, 85, 0.55);
    --token-color-ffd2d2: #ffd2d2;
    --token-color-ffe1be: #ffe1be;
    --token-color-rgba-80-250-123-0-15: rgba(80, 250, 123, 0.15);
    --token-color-rgba-80-250-123-0-48: rgba(80, 250, 123, 0.48);
    --token-color-d8ffe5: #d8ffe5;
    --token-color-rgba-248-248-242-0-03: rgba(248, 248, 242, 0.03);
    --token-color-rgba-23-25-35-0-85: rgba(23, 25, 35, 0.85);
    --token-color-rgba-18-20-29-0-92: rgba(18, 20, 29, 0.92);
    --token-color-rgba-81-207-102-0-06: rgba(81, 207, 102, 0.06);
    --token-color-rgba-255-255-255-0-12: rgba(255, 255, 255, 0.12);
    --token-color-rgba-255-255-255-0-18: rgba(255, 255, 255, 0.18);
    --token-color-rgba-255-255-255-0-25: rgba(255, 255, 255, 0.25);
    --token-color-rgba-255-255-255-0-50: rgba(255, 255, 255, 0.5);
    --token-color-50fa7b: #50fa7b;
    --token-color-rgba-80-250-123-0-60: rgba(80, 250, 123, 0.6);
    --token-color-f1f3f5: #f1f3f5;
    --token-color-rgba-33-37-41-0-16: rgba(33, 37, 41, 0.16);
    --token-color-rgba-132-94-194-0-08: rgba(132, 94, 194, 0.08);
    --token-color-rgba-132-94-194-0-32: rgba(132, 94, 194, 0.32);
    --token-color-rgba-11-114-133-0-08: rgba(11, 114, 133, 0.08);
    --token-color-rgba-11-114-133-0-32: rgba(11, 114, 133, 0.32);
    --token-color-f8f9fa: #f8f9fa;
    --token-unit-100vw: 100vw;
    --token-unit-100vh: 100vh;
    --token-unit-18px: 18px;
    --token-unit-0-2px: 0.2px;
    --token-unit-32px: 32px;
    --token-unit-0-7px: 0.7px;
    --token-unit-28px: 28px;
    --token-unit-90ms: 90ms;
    --token-unit-14px: 14px;
    --token-unit-26px: 26px;
    --token-unit-0-5px: 0.5px;
    --token-unit-160px: 160px;
    --token-unit-3px: 3px;
    --token-unit-0-3px: 0.3px;
    --token-unit-120px: 120px;
    --token-unit-0deg: 0deg;
    --token-unit-90deg: 90deg;
    --token-unit-140px: 140px;
    --token-unit-0-2rem: 0.2rem;
    --token-unit-46px: 46px;
    --token-unit-30px: 30px;
    --token-unit-42px: 42px;
    --token-unit-22px: 22px;
    --token-unit-96px: 96px;
    --token-unit-720px: 720px;
    --token-unit-280px: 280px;
    --token-unit-400px: 400px;
    --token-unit-540px: 540px;
    --token-unit-56px: 56px;
    --token-unit-900px: 900px;
    --token-unit-9px: 9px;
    --token-unit-66px: 66px;
    --token-unit-0-4px: 0.4px;
    --token-unit-180px: 180px;
    --token-unit-0-6px: 0.6px;
    --token-unit-180deg: 180deg;
    --token-unit-7px: 7px;
    --token-unit-17px: 17px;
    --token-unit-1439px: 1439px;
    --token-unit-5px: 5px;
    --token-unit-108px: 108px;
    --token-unit-1024px: 1024px;
    --token-unit-18vh: 18vh;
    --token-unit-42vh: 42vh;
    --token-unit-55vh: 55vh;
    --token-unit-72vh: 72vh;
    --token-unit-0-01ms: 0.01ms;
    --token-unit-1-4s: 1.4s;
    --token-unit-72px: 72px;
    --token-unit-36px: 36px;
    --token-unit-620px: 620px;
    --token-unit-92px: 92px;
    --token-unit-11rem: 11rem;
    --token-unit-0-25s: 0.25s;
    --token-unit-0-35s: 0.35s;
    --token-unit-0-7s: 0.7s;
    --token-unit-1-2s: 1.2s;
    --token-unit-360deg: 360deg;
    --token-unit-neg-80pct: -80%;
    --token-unit-38pct: 38%;
    --token-unit-62pct: 62%;
    --token-unit-76pct: 76%;
    --token-unit-82pct: 82%;
    --token-unit-88pct: 88%;
    --token-unit-92pct: 92%;
    --token-unit-110pct: 110%;
    --token-unit-180pct: 180%;
    --map-loading-spinner-border-width: var(--token-unit-3px);
}

:root {
    color-scheme: dark;
    /* -- Spacing scale (4px base) -- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* -- Typography -- */
    --font-xs: 10px;
    --font-sm: 11px;
    --font-base: 12px;
    --font-md: 13px;
    --font-lg: 16px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 800;
    --tracking-normal: 0;
    --tracking-wide: 0.6px;
    --line-height-tight: 1;
    --line-height-snug: 1.3;
    --line-height-normal: 1.4;

    /* -- Layout -- */
    --ui-gap: 12px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-full: 999px;
    --transition-fast: 150ms ease;
    --transition-view: 120ms ease;
    --shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.35);

    /* -- Dock sizing -- */
    --dock-offset-bottom: 0px;
    --dock-offset-right: 0px;
    --dock-bottom-height: 320px;
    --dock-right-width: 420px;
    --dock-toolbar-height: 44px;
    --dock-grip-size: 12px;
    --dock-splitter-size: 10px;
    --dock-controls-size: 380px;

    /* -- Control sizing -- */
    --control-target: 36px;
    --control-target-lg: 44px;

    /* -- Raw palette channels (for alpha compositing) -- */
    --raw-fg: 248, 248, 242;
    --raw-bg: 40, 42, 54;
    --raw-black: 0, 0, 0;
    --raw-purple: 189, 147, 249;
    --raw-cyan: 139, 233, 253;
    --raw-green: 80, 250, 123;
    --raw-orange: 255, 184, 108;
    --raw-red: 255, 85, 85;
    --raw-pink: 255, 121, 198;
    --raw-yellow: 226, 197, 65;
    --raw-info: 116, 192, 252;
    --raw-success: 81, 207, 102;
    --raw-warning: 255, 169, 77;
    --raw-danger: 255, 107, 107;

    /* -- Surfaces -- */
    --surface-base: #171923;
    --surface-app: #282a36;
    --surface-raised: rgba(var(--raw-bg), 0.88);
    --surface-raised-solid: #303241;
    --surface-overlay: rgba(var(--raw-bg), 0.98);
    --surface-sunken: rgba(var(--raw-black), 0.12);
    --surface-sunken-deep: rgba(var(--raw-black), 0.18);
    --surface-card: rgba(var(--raw-black), 0.14);
    --surface-soft: rgba(var(--raw-fg), 0.06);

    /* -- Text -- */
    --text-primary: rgb(var(--raw-fg));
    --text-secondary: rgba(var(--raw-fg), 0.78);
    --text-muted: rgba(var(--raw-fg), 0.78);
    --text-subtle: rgba(var(--raw-fg), 0.70);
    --text-muted-2: rgba(var(--raw-fg), 0.70);
    --text-disabled: rgba(var(--raw-fg), 0.45);
    --text-on-accent: rgba(26, 27, 38, 0.92);

    /* -- Borders -- */
    --border-subtle: rgba(var(--raw-fg), 0.10);
    --border-default: rgba(var(--raw-fg), 0.14);
    --border-strong: rgba(var(--raw-fg), 0.22);
    --border-muted: rgba(var(--raw-fg), 0.18);

    /* -- Interactive states -- */
    --interactive-hover: rgba(var(--raw-fg), 0.06);
    --interactive-hover-strong: rgba(var(--raw-fg), 0.08);
    --interactive-active: rgba(var(--raw-fg), 0.03);
    --interactive-focus: rgba(var(--raw-cyan), 0.55);
    --interactive-grip: rgba(var(--raw-fg), 0.25);
    --interactive-grip-strong: rgba(var(--raw-fg), 0.35);

    /* -- Accent primary (purple) -- */
    --accent-primary: #bd93f9;
    --accent-primary-subtle: rgba(var(--raw-purple), 0.12);
    --accent-primary-bg: rgba(var(--raw-purple), 0.14);
    --accent-primary-border: rgba(var(--raw-purple), 0.45);
    --accent-primary-border-strong: rgba(var(--raw-purple), 0.55);
    --accent-primary-focus: 0 0 0 0.2rem rgba(var(--raw-purple), 0.25);

    /* -- Accent secondary (cyan) -- */
    --accent-secondary: #8be9fd;
    --accent-secondary-subtle: rgba(var(--raw-cyan), 0.14);
    --accent-secondary-bg: rgba(var(--raw-cyan), 0.15);
    --accent-secondary-border: rgba(var(--raw-cyan), 0.55);
    --accent-secondary-focus: 0 0 0 2px rgba(var(--raw-cyan), 0.55);
    --accent-success: rgb(var(--raw-success));
    --accent-warning: rgb(var(--raw-warning));
    --accent-danger: rgb(var(--raw-danger));
    --accent-info: rgb(var(--raw-info));

    /* -- Status / Semantic -- */
    --status-critical: rgb(var(--raw-danger));
    --status-critical-subtle: rgba(var(--raw-danger), 0.14);
    --status-warning: rgb(var(--raw-warning));
    --status-warning-subtle: rgba(var(--raw-warning), 0.14);
    --status-success: rgb(var(--raw-success));
    --status-success-subtle: rgba(var(--raw-success), 0.14);
    --status-info: rgb(var(--raw-info));
    --status-info-subtle: rgba(var(--raw-info), 0.14);
    --status-waiting: #e2c541;
    --status-waiting-subtle: rgba(var(--raw-yellow), 0.14);
    --status-success-border: rgba(var(--raw-success), 0.48);
    --status-warning-border: rgba(var(--raw-warning), 0.55);
    --status-danger-border: rgba(var(--raw-danger), 0.55);
    --status-info-border: rgba(var(--raw-info), 0.55);
    --status-success-text: #d8ffe5;
    --status-warning-text: #ffe1be;
    --status-danger-text: #ffd2d2;
    --status-info-text: #d7efff;

    /* -- Scrollbars -- */
    --scrollbar-track: rgba(var(--raw-black), 0.22);
    --scrollbar-thumb: rgba(var(--raw-fg), 0.24);
    --scrollbar-thumb-hover: rgba(var(--raw-fg), 0.38);
    --scrollbar-size: 10px;

    /* -- Focus -- */
    --focus-ring: 0 0 0 2px var(--interactive-focus);
    --focus-ring-accent: 0 0 0 2px rgba(var(--raw-purple), 0.60);

    /* -- Legacy aliases (backward compat) -- */
    --surface-panel: var(--surface-raised);
    --drac-bg: var(--surface-app);
    --drac-panel: var(--surface-raised);
    --drac-panel-solid: var(--surface-raised-solid);
    --drac-border: var(--border-default);
    --drac-fg: var(--text-primary);
    --drac-muted: var(--text-muted);
    --drac-accent: var(--accent-primary);

    --radius: var(--radius-lg);
    --shadow: var(--shadow-md);
    --ui-font-min: var(--font-base);
    --ui-font-body: var(--font-base);
    --ui-font-strong: var(--font-md);
    --ui-focus-ring: var(--focus-ring);
    --ui-control-target: var(--control-target);
    --ui-control-primary-target: var(--control-target-lg);
}

:root[data-theme="light"] {
    color-scheme: light;
    --surface-base: #f8f9fa;
    --surface-app: #f8f9fa;
    --surface-raised: #ffffff;
    --surface-raised-solid: #ffffff;
    --surface-overlay: rgba(248, 249, 250, 0.96);
    --surface-sunken: rgba(33, 37, 41, 0.06);
    --surface-sunken-deep: rgba(33, 37, 41, 0.10);
    --surface-card: #ffffff;
    --surface-soft: rgba(33, 37, 41, 0.06);

    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #495057;
    --text-subtle: #64707a;
    --text-muted-2: #64707a;
    --text-disabled: #868e96;
    --text-on-accent: #ffffff;

    --border-subtle: rgba(33, 37, 41, 0.10);
    --border-default: rgba(33, 37, 41, 0.14);
    --border-strong: rgba(33, 37, 41, 0.22);
    --border-muted: rgba(33, 37, 41, 0.18);

    --interactive-hover: rgba(33, 37, 41, 0.06);
    --interactive-hover-strong: rgba(33, 37, 41, 0.10);
    --interactive-active: rgba(33, 37, 41, 0.05);

    --accent-primary: #845ec2;
    --accent-secondary: #0b7285;
    --accent-primary-bg: rgba(132, 94, 194, 0.14);
    --accent-primary-border: rgba(132, 94, 194, 0.45);
    --accent-secondary-bg: rgba(11, 114, 133, 0.14);
    --accent-secondary-border: rgba(11, 114, 133, 0.45);
    --status-critical: #c92a2a;
    --status-critical-subtle: rgba(201, 42, 42, 0.12);
    --status-warning: #b35a00;
    --status-warning-subtle: rgba(179, 90, 0, 0.14);
    --status-success: #2b8a3e;
    --status-success-subtle: rgba(43, 138, 62, 0.14);
    --status-info: #1864ab;
    --status-info-subtle: rgba(24, 100, 171, 0.14);
    --status-success-border: rgba(43, 138, 62, 0.34);
    --status-warning-border: rgba(179, 90, 0, 0.38);
    --status-danger-border: rgba(201, 42, 42, 0.40);
    --status-info-border: rgba(24, 100, 171, 0.38);
    --status-success-text: #1f6f31;
    --status-warning-text: #8c4a00;
    --status-danger-text: #8f1f1f;
    --status-info-text: #144d80;
    --scrollbar-track: rgba(33, 37, 41, 0.10);
    --scrollbar-thumb: rgba(33, 37, 41, 0.28);
    --scrollbar-thumb-hover: rgba(33, 37, 41, 0.42);

    --drac-bg: var(--surface-app);
    --drac-panel: var(--surface-raised);
    --drac-panel-solid: #f1f3f5;
    --drac-border: var(--border-default);
    --drac-fg: var(--text-primary);
    --drac-muted: var(--text-muted);
    --drac-accent: var(--accent-primary);
}

:root[data-colorblind="1"] {
    --status-critical: #d55e00;
    --status-critical-subtle: rgba(213, 94, 0, 0.14);
    --status-warning: #e69f00;
    --status-warning-subtle: rgba(230, 159, 0, 0.14);
    --status-success: #009e73;
    --status-success-subtle: rgba(0, 158, 115, 0.14);
    --status-info: #56b4e9;
    --status-info-subtle: rgba(86, 180, 233, 0.14);
    --status-waiting: #f0e442;
    --status-waiting-subtle: rgba(240, 228, 66, 0.14);
}

html,
body {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--surface-app);
    color: var(--drac-fg);
    font-size: var(--font-base);
    line-height: var(--line-height-normal);
    font-family: "Roboto", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

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

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
    border: var(--border-width-medium) solid var(--scrollbar-track);
}

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

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

#app {
    position: relative;
    width: var(--token-unit-100vw);
    height: var(--token-unit-100vh);
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.cartesian-rulers {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    color: var(--cartesian-ruler-text);
    font-size: var(--cartesian-ruler-font-size);
    font-variant-numeric: tabular-nums;
}

.cartesian-ruler,
.cartesian-ruler-corner {
    position: absolute;
    overflow: hidden;
    background: var(--cartesian-ruler-bg);
}

.cartesian-ruler-corner {
    top: 0;
    left: 0;
    width: var(--cartesian-y-ruler-width);
    height: var(--cartesian-ruler-size);
    border-right: var(--cartesian-ruler-border-width) solid var(--cartesian-ruler-border);
    border-bottom: var(--cartesian-ruler-border-width) solid var(--cartesian-ruler-border);
}

.cartesian-ruler-x {
    top: 0;
    left: var(--cartesian-y-ruler-width);
    right: 0;
    height: var(--cartesian-ruler-size);
    border-bottom: var(--cartesian-ruler-border-width) solid var(--cartesian-ruler-border);
}

.cartesian-ruler-y {
    top: var(--cartesian-ruler-size);
    bottom: 0;
    left: 0;
    width: var(--cartesian-y-ruler-width);
    border-right: var(--cartesian-ruler-border-width) solid var(--cartesian-ruler-border);
}

.cartesian-ruler-tick {
    position: absolute;
    display: block;
    border-color: var(--cartesian-ruler-border);
}

.cartesian-ruler-tick-x {
    left: calc(var(--tick-position-x) - var(--cartesian-y-ruler-width));
    bottom: 0;
    height: var(--cartesian-ruler-tick-size);
    border-left: var(--cartesian-ruler-border-width) solid;
}

.cartesian-ruler-tick-y {
    top: calc(var(--tick-position-y) - var(--cartesian-ruler-size));
    right: 0;
    width: var(--cartesian-ruler-tick-size);
    border-top: var(--cartesian-ruler-border-width) solid;
}

.cartesian-ruler-label {
    position: absolute;
    white-space: nowrap;
    line-height: 1;
}

.cartesian-ruler-tick-x .cartesian-ruler-label {
    left: var(--cartesian-ruler-label-gap);
    bottom: calc(var(--cartesian-ruler-tick-size) + var(--cartesian-ruler-label-gap));
}

.cartesian-ruler-tick-y .cartesian-ruler-label {
    right: calc(var(--cartesian-ruler-tick-size) + var(--cartesian-ruler-label-gap));
    top: 50%;
    transform: translateY(-50%);
}

/* ── VS Code Workbench Layout ─────────────────────────────────────────────── */

:root {
    --activity-bar-width: var(--token-unit-40px);
    --sidebar-width: var(--token-unit-280px);
    --sidebar-min-width: calc(var(--token-unit-40px) * 5);
    --sidebar-max-width: var(--token-unit-480px);
    --detail-panel-width: 0px;
    --statusbar-height: var(--token-unit-32px);
    --titlebar-height: var(--token-unit-30px);
    --bottom-panel-height: calc(var(--token-unit-40px) * 5);
    --bottom-panel-min-height: var(--token-unit-120px);
}

/* ── Title Bar ── */
.titlebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--titlebar-height);
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-2);
    background: var(--surface-base);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--font-sm);
    pointer-events: auto;
}

.titlebar-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.titlebar-brand {
    font-weight: 800;
    font-size: var(--font-md);
    letter-spacing: var(--tracking-wide);
    color: var(--accent-primary);
    flex-shrink: 0;
    text-decoration: none;
}

.titlebar-brand:hover,
.titlebar-brand:focus-visible {
    color: var(--interactive-accent);
    text-decoration: none;
}

.titlebar-separator {
    width: var(--border-width-thin);
    height: var(--token-unit-14px);
    background: var(--border-default);
    flex-shrink: 0;
}

.titlebar-context {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.titlebar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.titlebar-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.titlebar-label {
    color: var(--text-subtle);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--token-unit-0-5px);
}

.titlebar-value {
    color: var(--text-secondary);
}

/* ── Activity Bar ── */
.activity-bar {
    position: fixed;
    top: var(--titlebar-height);
    left: 0;
    bottom: var(--statusbar-height);
    width: var(--activity-bar-width);
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-1) 0;
    background: var(--surface-base);
    border-right: 1px solid var(--border-subtle);
}

.activity-bar-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--border-width-medium);
    flex: 1;
}

.activity-bar-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--border-width-medium);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

.activity-separator {
    width: var(--token-unit-24px);
    height: var(--border-width-thin);
    background: var(--border-subtle);
    margin: var(--space-1) 0;
}

.activity-btn {
    position: relative;
    width: var(--activity-bar-width);
    height: var(--activity-bar-width);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-disabled);
    cursor: pointer;
    font-size: var(--token-unit-18px);
    border-radius: 0;
    padding: 0;
    transition: color var(--transition-fast);
}

.activity-btn:hover {
    color: var(--text-primary);
}

.activity-btn.active {
    color: var(--text-primary);
}

.activity-btn.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: var(--border-width-medium);
    background: var(--accent-primary);
    border-radius: 0 var(--border-width-thin) var(--border-width-thin) 0;
}

.activity-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    border: 1px solid var(--surface-base);
}

.activity-badge.is-alert {
    background: var(--accent-danger);
}

.activity-badge.is-selection {
    background: var(--accent-primary);
}

.activity-badge.is-warning {
    background: var(--accent-warning);
}

/* ── Sidebar ── */
.sidebar {
    position: fixed;
    top: var(--titlebar-height);
    left: var(--activity-bar-width);
    bottom: var(--statusbar-height);
    width: var(--sidebar-width);
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: var(--surface-app);
    border-right: 1px solid var(--border-subtle);
    overflow: hidden;
}

.sidebar[aria-hidden="true"] {
    display: none;
}

.sidebar[data-presentation="drawer"] {
    z-index: 65;
    max-width: calc(100vw - var(--activity-bar-width));
    box-shadow: var(--shadow-lg);
}

.sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: var(--shell-titlebar-bg-strong);
    border-bottom: var(--border-width-thin) solid var(--shell-titlebar-border);
    backdrop-filter: blur(var(--space-2));
}

.sidebar-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--control-target);
    padding: var(--space-2) var(--space-3) var(--space-1);
}

.sidebar-title {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--shell-menu-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-actions {
    display: flex;
    align-items: center;
    gap: var(--border-width-medium);
    flex-shrink: 0;
}

.sidebar-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-3) var(--space-3);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background: transparent;
    border-top: 0;
}

.sidebar-tabs::-webkit-scrollbar {
    display: none;
}

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

.sidebar-tabs[data-count="2"] .sidebar-tab,
.sidebar-tabs[data-count="3"] .sidebar-tab,
.sidebar-tabs[data-count="4"] .sidebar-tab {
    flex: 1 1 0;
}

.sidebar-tabs[data-count="5"] .sidebar-tab {
    flex: 1 1 0;
}

.sidebar-tabs[data-context="analysis"] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-1);
    overflow: visible;
}

.sidebar-tabs[data-context="analysis"] .sidebar-tab {
    width: 100%;
    padding-inline: var(--space-1);
}

.sidebar-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    min-height: var(--token-unit-32px);
    padding: var(--space-1) var(--space-3);
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--shell-menu-muted);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-normal);
    line-height: var(--line-height-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sidebar-tab::after {
    content: none;
}

.sidebar-tab:hover {
    color: var(--shell-menu-fg);
    background: var(--shell-menu-hover-bg);
    border-color: var(--shell-menu-border-strong);
}

.sidebar-tab.active {
    color: var(--shell-menu-fg);
    background: var(--shell-menu-active-bg);
    border-color: var(--shell-menu-active-border);
    box-shadow: inset 0 0 0 var(--border-width-thin) var(--shell-menu-active-border);
}

.sidebar-tab:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 var(--border-width-medium) var(--shell-menu-focus-ring);
}

.sidebar-action-btn {
    width: var(--token-unit-22px);
    height: var(--token-unit-22px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-disabled);
    cursor: pointer;
    border-radius: var(--token-unit-3px);
    font-size: var(--font-xs);
    padding: 0;
}

.sidebar-action-btn:hover {
    color: var(--text-primary);
    background: var(--interactive-hover);
}

.sidebar-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Active section fills and scrolls within the sidebar body */
.sidebar-body > .control-section {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: calc(var(--space-3) * -1);
    bottom: 0;
    width: var(--token-unit-32px);
    cursor: ew-resize;
    z-index: 10;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle:active,
.sidebar-resize-handle:focus-visible {
    background: linear-gradient(90deg, transparent 14px, var(--accent-primary) 14px, var(--accent-primary) 18px, transparent 18px);
}

/* ── Bottom Panel ── */
.bottom-panel {
    position: fixed;
    left: var(--activity-bar-width);
    right: 0;
    bottom: var(--statusbar-height);
    height: var(--bottom-panel-height);
    min-height: var(--bottom-panel-min-height);
    z-index: 45;
    display: flex;
    flex-direction: column;
    background: var(--surface-app);
    border-top: 1px solid var(--border-subtle);
}

.bottom-panel[aria-hidden="true"] {
    display: none;
}

/* bottom-panel left is set by JS via syncContentOffset() */

.bottom-panel-resize-handle {
    position: absolute;
    top: calc(var(--space-3) * -1);
    left: 0;
    right: 0;
    height: var(--token-unit-32px);
    cursor: ns-resize;
    z-index: 10;
}

.bottom-panel-resize-handle:hover,
.bottom-panel-resize-handle:active,
.bottom-panel-resize-handle:focus-visible {
    background: linear-gradient(180deg, transparent 14px, var(--accent-primary) 14px, var(--accent-primary) 18px, transparent 18px);
}

.bottom-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-2);
    height: var(--token-unit-32px);
    min-height: var(--token-unit-32px);
    border-bottom: 1px solid var(--border-subtle);
}

.bottom-panel-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
}

.bottom-panel-tab {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    height: 100%;
    padding: 0 var(--space-3);
    border: none;
    background: none;
    color: var(--text-disabled);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    border-bottom: var(--border-width-medium) solid transparent;
    margin-bottom: -1px;
}

.bottom-panel-tab:hover {
    color: var(--text-primary);
}

.bottom-panel-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
}

.bottom-panel-tab i {
    font-size: var(--font-sm);
}

.bottom-panel-actions {
    display: flex;
    align-items: center;
    gap: var(--border-width-medium);
}

.panel-action-btn {
    width: var(--token-unit-22px);
    height: var(--token-unit-22px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-disabled);
    cursor: pointer;
    border-radius: var(--token-unit-3px);
    font-size: var(--font-xs);
    padding: 0;
}

.panel-action-btn:hover {
    color: var(--text-primary);
    background: var(--interactive-hover);
}

.panel-action-btn:disabled {
    color: var(--text-disabled);
    background: none;
    cursor: default;
    opacity: 0.5;
}

.bottom-panel-body {
    flex: 1 1 0;
    min-height: 0;
    height: 0;
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.bottom-panel-body.is-active {
    display: flex;
}

/* ── Status Bar ── */
.status-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--statusbar-height);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-1);
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: var(--font-xs);
    line-height: 1;
}

.status-left,
.status-right {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
}

.status-overflow-menu {
    position: absolute;
    right: var(--space-1);
    bottom: calc(100% + var(--space-1));
    z-index: 80;
    display: grid;
    min-width: calc(var(--token-unit-40px) * 5);
    padding: var(--space-1);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-overlay);
    box-shadow: var(--shadow-lg);
}

.status-overflow-menu[hidden] {
    display: none;
}

.status-overflow-menu button {
    border: 0;
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
}

.status-overflow-menu button:hover,
.status-overflow-menu button:focus-visible {
    background: var(--interactive-hover);
}

.status-left {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.status-left::-webkit-scrollbar {
    display: none;
}

.status-right {
    flex: 0 0 auto;
    min-width: 0;
}

.status-right .status-item-selection {
    flex: 0 1 var(--token-unit-160px);
    width: var(--token-unit-160px);
    min-width: 0;
    max-width: var(--token-unit-160px);
    overflow: hidden;
}

#statusSelectionValue {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-item {
    display: inline-flex;
    align-items: center;
    gap: var(--border-width-medium);
    padding: 0 var(--space-1);
    height: 100%;
    white-space: nowrap;
    cursor: default;
}

.status-item:hover {
    background: var(--token-color-rgba-255-255-255-0-12);
}

.status-item i {
    font-size: var(--font-xs);
    opacity: 0.9;
}

.status-item-author {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.status-author-link {
    display: inline-flex;
    align-items: center;
    height: 100%;
    color: inherit;
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.status-author-link:hover {
    text-decoration: underline;
}

.status-author-link:focus-visible {
    outline: var(--border-width-medium) solid var(--token-color-rgba-255-255-255-0-50);
    outline-offset: var(--border-width-medium);
    border-radius: var(--border-width-medium);
}

.status-separator {
    width: var(--border-width-thin);
    height: var(--token-unit-14px);
    background: var(--token-color-rgba-255-255-255-0-25);
    flex-shrink: 0;
}

.status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--border-width-medium);
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    min-width: var(--space-6);
    padding: 0 var(--space-1);
    font-size: var(--font-xs);
    line-height: 1;
    border-radius: var(--border-width-medium);
    height: var(--space-6);
}

:where(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--border-width-medium) solid var(--accent-secondary) !important;
    outline-offset: var(--border-width-medium) !important;
    box-shadow: var(--focus-ring) !important;
}

.skip-link {
    position: fixed;
    z-index: calc(var(--quick-start-overlay-layer) + 1);
    top: var(--space-2);
    left: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    background: var(--surface-overlay);
    border: var(--border-width-medium) solid var(--accent-secondary);
    border-radius: var(--radius-sm);
    transform: translateY(calc(-100% - var(--space-4)));
}

.skip-link:focus {
    transform: translateY(0);
}

.status-btn:hover {
    background: var(--token-color-rgba-255-255-255-0-18);
}

.status-btn[aria-pressed="true"] {
    background: var(--token-color-rgba-255-255-255-0-22);
    box-shadow: inset 0 0 0 1px var(--token-color-rgba-255-255-255-0-25);
}

#btnToggleRouteDisplay span {
    display: inline-block;
    min-width: 8ch;
    text-align: left;
}

.status-btn-play {
    font-weight: 600;
}

#btnPlayPauseLabel {
    display: inline-block;
    min-width: 5ch;
    text-align: left;
}

#hudRunState {
    display: inline-block;
    min-width: 7ch;
    text-align: left;
}

#currentTime {
    display: inline-block;
    min-width: 8ch;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.status-time-control {
    gap: var(--space-1);
    min-width: calc(var(--token-unit-96px) + var(--token-unit-88px));
    padding-inline: var(--space-2);
}

.status-time-progress {
    position: relative;
    display: inline-block;
    width: var(--token-unit-96px);
    height: var(--space-3);
    flex: 0 0 auto;
}

.status-time-progress-track,
.status-time-progress-selected {
    position: absolute;
    top: 50%;
    height: var(--border-width-medium);
    border-radius: var(--radius-full);
    transform: translateY(-50%);
}

.status-time-progress-track {
    inset-inline: 0;
    background: currentColor;
    opacity: 0.28;
}

.status-time-progress-selected {
    left: 0%;
    width: 100%;
    background: currentColor;
    opacity: 0.9;
}

.status-time-progress-marker {
    position: absolute;
    top: 50%;
    left: 0%;
    width: var(--border-width-medium);
    height: var(--space-3);
    border-radius: var(--radius-full);
    background: currentColor;
    box-shadow: 0 0 0 var(--border-width-thin) var(--accent-primary);
    transform: translate(-50%, -50%);
}

.time-window-popover {
    position: absolute;
    left: var(--space-2);
    bottom: calc(100% + var(--space-2));
    z-index: 90;
    width: min(var(--token-unit-320px), calc(100vw - (var(--space-4) * 2)));
    padding: var(--space-3);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-overlay);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

.time-window-popover[hidden] {
    display: none;
}

.time-window-popover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.time-window-popover-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-base);
    font-weight: var(--font-weight-bold);
}

.time-window-popover-header p {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: var(--line-height-snug);
}

.time-window-full {
    min-width: var(--token-unit-46px);
    padding: var(--space-1) var(--space-2);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
}

.time-window-full:hover {
    border-color: var(--interactive-focus);
    background: var(--interactive-hover);
}

.status-dot {
    display: inline-block;
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    background: var(--token-color-rgba-255-255-255-0-50);
    flex-shrink: 0;
}

.status-dot.is-running {
    background: var(--token-color-50fa7b);
    box-shadow: 0 0 calc(var(--border-width-medium) * 2) var(--token-color-rgba-80-250-123-0-60);
}

.status-speed-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: var(--token-unit-28px);
    text-align: center;
}

/* ── Map offset for panels ── */
#map {
    top: var(--titlebar-height);
    bottom: var(--statusbar-height);
    /* left is set by JS via syncContentOffset() */
}

/* ── Legacy compat ── */
.hud-topbar {
    display: none;
}

.hud-pill {
    padding: var(--radius-md) var(--space-3);
    background: var(--drac-panel);
    border: var(--border-width-thin) solid var(--drac-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(var(--radius-md));
}

.hud-pill-label {
    font-size: var(--font-sm);
    color: var(--drac-muted);
    line-height: 1.1;
}

.hud-pill-value {
    font-size: var(--token-unit-18px);
    font-weight: 700;
    letter-spacing: var(--token-unit-0-2px);
}

.icon-btn {
    width: var(--token-unit-32px);
    height: var(--token-unit-32px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: transparent;
    border: var(--border-width-thin) solid var(--drac-border);
    color: var(--drac-muted);
}

.icon-btn:hover {
    color: var(--drac-fg);
    border-color: var(--border-strong);
    background: var(--interactive-hover);
}

.icon-btn.active {
    color: var(--drac-fg);
    background: var(--accent-primary-bg);
    border-color: var(--accent-primary-border);
}

.icon-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.nav-tabs-dracula {
    border-bottom: var(--border-width-thin) solid var(--drac-border);
    padding: 0 var(--space-2);
}

.nav-tabs-dracula .nav-link {
    border: 0;
    border-bottom: var(--border-width-medium) solid transparent;
    border-radius: 0;
    color: var(--drac-muted);
    background: transparent;
    font-size: var(--space-3);
    padding: var(--space-2) var(--radius-md);
}

.nav-tabs-dracula .nav-link.active {
    color: var(--drac-fg);
    background: transparent;
    border-bottom-color: var(--drac-accent);
}

.tab-content-dracula {
    padding: var(--radius-md) var(--space-3);
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.control-section {
    display: none;
    flex: 1;
    min-height: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    overflow: hidden;
}

#sidebarBody[data-view="sim"] #section-sim,
#sidebarBody[data-view="layers"] #section-layers,
#sidebarBody[data-view="requests"] #section-requests,
#sidebarBody[data-view="vehicles"] #section-vehicles,
#sidebarBody[data-view="selected"] #section-selected,
#sidebarBody[data-view="analysis-live"] #section-monitor,
#sidebarBody[data-view="stats"] #section-analysis-service,
#sidebarBody[data-view="fleet-kpis"] #section-analysis-fleet,
#sidebarBody[data-view="chart-export"] #section-analysis-chart,
#sidebarBody[data-view="app-performance"] #section-analysis-performance,
#sidebarBody[data-view="style"] #section-style,
#sidebarBody[data-view="data"] #section-data,
#sidebarBody[data-view="instances-library"] #section-data,
#sidebarBody[data-view="instances-explorer"] #section-data,
#sidebarBody[data-view="map"] #section-scenario-map,
#sidebarBody[data-view="monitor"] #section-monitor {
    display: flex;
    flex-direction: column;
}

/* control-section-header removed from HTML - sidebar title handles it */

.control-section-body {
    padding: var(--radius-md);
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

#sidebarBody[data-view="instances-library"] {
    overflow-y: auto;
    gap: var(--space-2);
}

#sidebarBody[data-view="instances-library"] > .control-section {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}

#sidebarBody[data-view="instances-library"] > .control-section .control-section-body {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}

/* ── Instances: Explorer (full-height scrollable library) ── */
#sidebarBody[data-view="instances-explorer"] {
    overflow: hidden;
    gap: var(--space-2);
}

#sidebarBody[data-view="instances-explorer"] > #section-data {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

#sidebarBody[data-view="instances-explorer"] > #section-data .control-section-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

/* ── Detail Panel: Route plan editor styling ── */
.detail-panel .instances-editor-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
}

.detail-panel .instances-editor-eyebrow {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.detail-panel .instances-editor-title {
    font-size: var(--font-base);
    line-height: 1.15;
}

.detail-panel .instances-editor-meta {
    font-size: var(--font-xs);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    color: var(--text-muted);
}

.detail-panel .instances-editor-dependencies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.detail-panel .instances-editor-dependency-field {
    display: grid;
    gap: var(--border-width-medium);
    flex: 1 1 var(--token-unit-220px);
    min-width: min(100%, var(--token-unit-220px));
}

.detail-panel .instances-editor-dependency-field > span {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-disabled);
}

.detail-panel .instances-editor-dependency-field .form-select {
    min-height: var(--token-unit-28px);
}

.detail-panel .instances-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
}

.detail-panel .instances-editor-toolbar > * {
    min-width: 0;
}

.detail-panel .instances-editor-actions {
    justify-content: flex-end;
    gap: var(--border-width-medium);
}

.detail-panel .instances-editor-actions .btn {
    min-height: var(--token-unit-28px);
    padding: 0 var(--space-1);
}

.detail-panel .instances-editor-ribbons {
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
}

.detail-panel #section-instances-summary {
    gap: var(--space-1);
    padding-bottom: var(--space-1);
}

.detail-panel #pgQuickStatus {
    margin-top: 0;
    font-size: var(--font-xs);
}

.detail-panel .instances-editor-state-badges {
    gap: var(--border-width-medium);
}

.detail-panel .instances-state-badge {
    min-height: var(--token-unit-18px);
    padding: 0 var(--border-width-medium);
    letter-spacing: normal;
}

.detail-panel .import-card {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
}

.detail-panel .instances-editor-summary-strip {
    min-width: 0;
    flex: 1 1 auto;
}

.detail-panel .instances-editor-summary-strip .instances-overview-facts {
    gap: var(--border-width-medium);
}

.detail-panel .instances-editor-summary-strip .instances-overview-fact {
    min-height: var(--token-unit-22px);
    padding: 0 var(--space-1);
}

.detail-panel .instances-overview-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.detail-panel .instances-overview-fact {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--token-unit-24px);
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-app) 86%, var(--interactive-hover));
    border: var(--border-width-thin) solid var(--border-subtle);
}

.detail-panel .instances-overview-fact-label {
    font-size: var(--font-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-disabled);
    white-space: nowrap;
}

.detail-panel .instances-overview-fact-value {
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-panel .instances-overview-empty {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.detail-panel .panel-context-diagnostics {
    max-height: min(var(--token-unit-160px), 20vh);
    overflow: auto;
}

.detail-panel #section-pg-routes,
.detail-panel #section-pg-requests,
.detail-panel #section-pg-raw {
    padding-top: 0;
}

.detail-panel #section-pg-routes .instances-vehicles-layout,
.detail-panel #section-pg-requests .instances-requests-layout {
    height: 100%;
}

/* Hide the internal workbench mode tabs (replaced by sidebar tabs) */
.instances-workbench-modes {
    display: none !important;
}

.control-section-body .control-group {
    margin-bottom: 0;
}

.control-group {
    margin-bottom: var(--space-3);
}

.control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--radius-md);
    margin-bottom: var(--space-2);
}

.control-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: var(--radius-sm);
}

.control-label-with-help .layer-info-btn {
    margin-left: 0;
}

.sim-speed-value {
    display: inline-flex;
    align-items: center;
    gap: var(--radius-sm);
    padding: var(--space-1) var(--radius-md);
    border-radius: var(--radius-full);
    font-size: var(--space-3);
    font-weight: 800;
    letter-spacing: var(--token-unit-0-2px);
    color: var(--drac-accent);
    background: var(--token-color-rgba-189-147-249-0-12);
    border: var(--border-width-thin) solid var(--token-color-rgba-189-147-249-0-40);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#section-sim .form-label {
    font-size: var(--space-3);
    font-weight: 700;
    color: var(--text-secondary);
}

.speed-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--radius-sm);
    margin-top: var(--space-2);
}

.speed-presets .btn {
    border-radius: var(--radius-md) !important;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-sm);
    line-height: 1.1;
}

.speed-presets .btn.active {
    color: var(--drac-fg);
    background: var(--token-color-rgba-189-147-249-0-14);
    border-color: var(--token-color-rgba-189-147-249-0-45);
}

.control-row .btn-group {
    display: flex;
    align-items: center;
}

.control-row .btn-group .btn {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-sm);
    line-height: 1.1;
    border-radius: var(--radius-md);
}

.control-row .btn-group .btn + .btn {
    margin-left: var(--radius-sm);
}

.tw-readout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--radius-sm) var(--space-2);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: var(--surface-sunken);
    font-size: var(--space-3);
    margin-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;
}

.tw-readout > span {
    display: grid;
    min-width: 0;
    gap: var(--border-width-medium);
}

.tw-readout > span:nth-child(2) {
    text-align: center;
}

.tw-readout > span:last-child {
    text-align: right;
}

.tw-readout-label {
    color: var(--text-secondary);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.tw-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-sep {
    color: var(--text-muted);
    flex: 0 0 auto;
}

.tw-range {
    --tw-track-height: var(--radius-sm);
    --tw-thumb-size: var(--space-4);
    --tw-current-thumb-size: var(--space-3);
    position: relative;
    height: var(--token-unit-28px);
    margin: var(--border-width-medium) 0 var(--radius-sm);
}

.tw-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--tw-track-height);
    border-radius: var(--radius-full);
    background: var(--token-color-rgba-0-0-0-0-22);
    border: var(--border-width-thin) solid var(--border-subtle);
}

.tw-selected {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0%;
    width: 100%;
    border-radius: var(--radius-full);
    background: var(--token-color-rgba-189-147-249-0-40);
    box-shadow: inset 0 0 0 var(--border-width-thin) var(--token-color-rgba-189-147-249-0-45);
}

.tw-range-input {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: var(--token-unit-28px);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    pointer-events: none; /* thumbs only */
    -webkit-appearance: none;
    appearance: none;
}

.tw-range-start {
    z-index: 2;
}

.tw-range-end {
    z-index: 3;
}

.tw-range-current {
    z-index: 4;
}

.tw-range-input:focus {
    z-index: 5;
}

.tw-range-input::-webkit-slider-runnable-track {
    height: var(--tw-track-height);
    background: transparent;
}

.tw-range-input::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    width: var(--tw-thumb-size);
    height: var(--tw-thumb-size);
    border-radius: var(--radius-full);
    background: var(--drac-accent);
    border: var(--border-width-thin) solid var(--token-color-rgba-248-248-242-0-35);
    box-shadow: 0 var(--space-2) var(--space-5) var(--token-color-rgba-0-0-0-0-35);
    cursor: ew-resize;
    margin-top: calc((var(--tw-track-height) - var(--tw-thumb-size)) / 2);
}

.tw-range-input::-moz-range-track {
    height: var(--tw-track-height);
    background: transparent;
}

.tw-range-input::-moz-range-thumb {
    pointer-events: auto;
    width: var(--tw-thumb-size);
    height: var(--tw-thumb-size);
    border-radius: var(--radius-full);
    background: var(--drac-accent);
    border: var(--border-width-thin) solid var(--token-color-rgba-248-248-242-0-35);
    box-shadow: 0 var(--space-2) var(--space-5) var(--token-color-rgba-0-0-0-0-35);
    cursor: ew-resize;
}

.tw-range-current::-webkit-slider-thumb {
    width: var(--tw-current-thumb-size);
    height: var(--tw-current-thumb-size);
    background: var(--accent-secondary);
    border-color: var(--surface-overlay);
    box-shadow:
        0 0 0 var(--border-width-thin) var(--accent-secondary),
        0 var(--space-2) var(--space-5) var(--token-color-rgba-0-0-0-0-35);
    margin-top: calc((var(--tw-track-height) - var(--tw-current-thumb-size)) / 2);
}

.tw-range-current::-moz-range-thumb {
    width: var(--tw-current-thumb-size);
    height: var(--tw-current-thumb-size);
    background: var(--accent-secondary);
    border-color: var(--surface-overlay);
    box-shadow:
        0 0 0 var(--border-width-thin) var(--accent-secondary),
        0 var(--space-2) var(--space-5) var(--token-color-rgba-0-0-0-0-35);
}

.tw-minmax {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--radius-md);
    font-size: var(--font-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.tw-minmax-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.control-actions {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--radius-md);
}

.control-section-header .control-actions {
    margin-bottom: 0;
}

.control-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Photoshop-like layers list */
.layer-list {
    display: flex;
    flex-direction: column;
    gap: var(--radius-sm);
}

.layer-item {
    display: flex;
    align-items: center;
    gap: var(--radius-md);
    padding: var(--radius-sm) var(--space-2);
    border-radius: var(--space-2);
    border: var(--border-width-thin) solid transparent;
    background: var(--surface-card);
    cursor: pointer;
    user-select: none;
}

.layer-item:hover {
    background: var(--interactive-hover);
    border-color: var(--border-subtle);
}

.layer-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: var(--space-4);
    height: var(--space-4);
    border-radius: var(--space-1);
    border: var(--border-width-thin) solid var(--border-muted);
    background: var(--surface-sunken);
    display: inline-grid;
    place-content: center;
    flex: 0 0 auto;
}

.layer-checkbox::after {
    content: '';
    width: var(--space-2);
    height: var(--space-1);
    border-left: var(--border-width-medium) solid var(--token-color-1a1b26);
    border-bottom: var(--border-width-medium) solid var(--token-color-1a1b26);
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform var(--token-unit-90ms) ease;
}

.layer-checkbox:checked {
    background: var(--drac-accent);
    border-color: var(--accent-primary-border-strong);
}

.layer-checkbox:checked::after {
    transform: rotate(-45deg) scale(1);
}

.layer-checkbox:focus-visible {
    outline: var(--border-width-medium) solid var(--token-color-rgba-189-147-249-0-6);
    outline-offset: var(--border-width-medium);
}

.layer-name {
    font-size: var(--space-3);
    letter-spacing: var(--token-unit-0-2px);
    color: var(--drac-fg);
}

.layer-checkbox:not(:checked) + .layer-name {
    color: var(--text-muted);
}

.layer-group + .layer-group {
    margin-top: var(--radius-sm);
    padding-top: var(--radius-sm);
    border-top: var(--border-width-thin) solid var(--border-subtle);
}

.layer-group-body {
    display: flex;
    flex-direction: column;
    gap: var(--radius-sm);
    margin-top: var(--radius-sm);
}

.layer-group-header {
    background: var(--token-color-rgba-189-147-249-0-10);
    border-color: var(--token-color-rgba-189-147-249-0-18);
}

.layer-group-name {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--token-unit-0-7px);
    font-size: var(--font-sm);
}

.layer-sub {
    margin-left: var(--token-unit-14px);
    background: var(--token-color-rgba-0-0-0-0-10);
}

.layer-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--token-unit-140px), 1fr));
    gap: var(--space-2);
}

.layer-chip {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
}

.layer-chip:hover,
.layer-chip.is-disabled:hover {
    background: transparent;
    border-color: transparent;
}

.layer-chip-input {
    position: absolute;
    inline-size: var(--border-width-thin);
    block-size: var(--border-width-thin);
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.layer-chip-body {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-target);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.layer-chip-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--text-disabled);
    flex: 0 0 auto;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.layer-chip-name {
    min-width: 0;
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layer-chip:hover .layer-chip-body {
    background: var(--interactive-hover);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.layer-chip-input:checked + .layer-chip-body {
    background: var(--accent-primary-bg);
    border-color: var(--accent-primary-border);
    color: var(--text-primary);
}

.layer-chip-input:checked + .layer-chip-body .layer-chip-dot {
    background: var(--accent-primary);
    transform: scale(1.1);
}

.layer-chip-input:focus-visible + .layer-chip-body {
    box-shadow: var(--focus-ring);
}

.layer-chip.is-disabled .layer-chip-body {
    color: var(--text-disabled);
    border-color: var(--border-subtle);
    background: var(--surface-soft);
}

.layer-chip.is-disabled .layer-chip-dot {
    background: var(--text-disabled);
    transform: none;
}

.layer-encoding-legend {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.layer-encoding-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.layer-encoding-swatch {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--radius-full);
    border: var(--border-width-thin) solid var(--border-default);
    box-shadow: var(--shadow-inset-soft);
}

.layer-encoding-copy {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.layer-encoding-name {
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.layer-encoding-meta {
    color: var(--text-muted);
    font-size: var(--font-xs);
    line-height: var(--line-height-snug);
}

.layer-item.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.layer-item.is-disabled:hover {
    background: var(--token-color-rgba-0-0-0-0-10);
    border-color: transparent;
}

.layer-item.is-disabled .layer-name {
    color: var(--text-disabled);
}

.layer-checkbox:disabled {
    opacity: 0.8;
}

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

.layer-info-btn,
.layer-caret-btn,
.lf-row-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--token-unit-26px);
    height: var(--token-unit-26px);
    padding: 0;
    border-radius: var(--radius-sm);
    line-height: 1;
    flex: 0 0 auto;
}

.layer-info-btn,
.layer-caret-btn {
    border: 0;
    background: transparent;
    color: var(--text-muted);
}

.layer-info-btn {
    cursor: help;
}

.layer-caret-btn {
    cursor: pointer;
}

.layer-info-btn i,
.layer-caret-btn i,
.lf-row-tooltip i {
    font-size: var(--font-xs);
    line-height: 1;
    pointer-events: none;
}

.layer-caret-btn:hover {
    background: var(--interactive-hover);
    color: var(--text-primary);
}

.layer-caret-btn:focus-visible {
    outline: var(--border-width-medium) solid var(--token-color-rgba-189-147-249-0-6);
    outline-offset: var(--border-width-medium);
}

.layer-info-btn:hover {
    background: var(--interactive-hover);
    color: var(--text-primary);
}

.layer-info-btn:focus-visible {
    outline: var(--border-width-medium) solid var(--token-color-rgba-189-147-249-0-6);
    outline-offset: var(--border-width-medium);
}

.layer-item.is-disabled .layer-info-btn {
    color: var(--text-disabled);
}

/* Bootstrap tooltips (Dracula) */
.aviz-tooltip,
.aviz-tooltip * {
    pointer-events: none;
}

.aviz-tooltip .tooltip-inner {
    max-width: var(--dock-default-bottom-height);
    padding: var(--space-2) var(--radius-md);
    font-size: var(--space-3);
    line-height: 1.25;
    white-space: pre-line;
    color: var(--drac-fg);
    background: var(--surface-overlay);
    border: var(--border-width-thin) solid var(--border-default);
}

.aviz-tooltip .tooltip-arrow::before {
    border-top-color: var(--surface-overlay);
    border-right-color: var(--surface-overlay);
    border-bottom-color: var(--surface-overlay);
    border-left-color: var(--surface-overlay);
}

/* Ensure scrollable layers list gets full height */
#sidebarBody[data-view="layers"] #section-layers .control-section-body {
    overflow: auto;
}

.hint {
    font-size: var(--space-3);
    color: var(--text-muted);
    margin-top: var(--radius-sm);
}

.import-card {
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    background: var(--surface-sunken);
}

.import-card + .import-card {
    margin-top: var(--space-2);
}

.library-status-card .hint {
    margin-top: 0;
}

.library-status-card .hint + .hint {
    margin-top: var(--space-1);
}

.import-card-title {
    font-size: var(--font-sm);
    font-weight: 800;
    letter-spacing: var(--token-unit-0-5px);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--radius-sm);
}

.import-source-grid {
    display: grid;
    grid-template-columns: var(--token-unit-160px) 1fr;
    gap: var(--radius-sm);
}

.import-source-kind {
    grid-column: 1 / span 1;
}

.import-source-input {
    grid-column: 2 / span 1;
}

.import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--radius-sm);
}

.import-diagnostics {
    margin-top: var(--space-2);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    background: var(--surface-sunken);
    font-size: var(--space-3);
    color: var(--text-secondary);
}

.panel-accordion-body > .import-diagnostics:first-child {
    margin-top: 0;
}

.loaded-data-card {
    margin-top: var(--space-2);
}

.loaded-data-menu {
    margin-top: var(--space-2);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    max-height: var(--dock-min-bottom-height);
    overflow-y: auto;
    padding: var(--radius-sm);
}

.import-diag-title {
    font-weight: 700;
    color: var(--text-primary);
}

.import-diag-summary {
    font-size: var(--font-sm);
    line-height: 1.4;
    color: var(--text-secondary);
}

.import-diag-detail {
    margin-top: var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--interactive-active);
    border: var(--border-width-thin) solid var(--border-subtle);
}

.import-diag-detail[open] {
    padding-bottom: var(--space-1);
}

.import-diag-detail-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.import-diag-detail-toggle::-webkit-details-marker {
    display: none;
}

.import-diag-detail-toggle::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: var(--font-xs);
    margin-left: auto;
    opacity: 0.5;
    transition: transform var(--transition-view);
}

.import-diag-detail[open] > .import-diag-detail-toggle::after {
    transform: rotate(var(--token-unit-180deg));
}

.import-diag-detail .import-diag-list {
    margin: 0;
    padding: var(--space-1) var(--space-2) var(--space-1) calc(var(--space-2) + var(--token-unit-18px));
    font-size: var(--font-sm);
    max-height: var(--token-unit-18vh);
    overflow-y: auto;
}

.import-diag-list {
    margin: var(--space-1) 0 0;
    padding-left: var(--token-unit-18px);
}

.import-diag-errors {
    color: var(--status-critical);
}

.import-diag-warnings {
    color: var(--status-warning);
}

.ops-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.map-api-grid .ops-field-span-2 {
    grid-column: 1 / -1;
}

.map-token-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.map-remember-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--space-3);
    color: var(--text-secondary);
}

.map-remember-toggle .form-check-input {
    margin-top: 0;
}

.ops-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--space-3);
    color: var(--text-secondary);
}

/* Requests panel */
.request-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--radius-md);
}

.request-filters .btn {
    font-size: var(--font-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.request-filters .btn.active {
    background: var(--token-color-rgba-189-147-249-0-16);
    border-color: var(--token-color-rgba-189-147-249-0-55);
    color: var(--drac-fg);
}

.request-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.request-item {
    flex: 0 0 auto;
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--space-3);
    background: var(--surface-card);
    overflow: hidden;
    --req-color: var(--drac-accent);
}

.request-item[open] {
    border-color: var(--token-color-rgba-189-147-249-0-22);
    background: var(--token-color-rgba-189-147-249-0-05);
}

.request-item.is-selection-reveal {
    animation: request-selection-reveal var(--transition-slow) ease-out;
}

@keyframes request-selection-reveal {
    from {
        box-shadow: 0 0 0 var(--space-1) var(--token-color-rgba-139-233-253-0-45);
    }
    to {
        box-shadow: 0 0 0 0 transparent;
    }
}

.request-item > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--radius-md);
    padding: var(--space-2) var(--radius-md);
    cursor: pointer;
    user-select: none;
    border-left: var(--token-unit-3px) solid var(--req-color);
}

.request-item > summary:hover {
    background: var(--interactive-hover);
}

.request-item > summary:focus-visible {
    outline: var(--border-width-medium) solid var(--token-color-rgba-189-147-249-0-6);
    outline-offset: var(--border-width-medium);
}

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

.request-dot {
    width: var(--radius-md);
    height: var(--radius-md);
    border-radius: var(--radius-full);
    background: var(--req-color);
    box-shadow: 0 0 0 var(--border-width-medium) var(--token-color-rgba-0-0-0-0-22);
    flex: 0 0 auto;
}

.request-title {
    min-width: 0;
    flex: 1;
    font-size: var(--space-3);
    font-weight: 700;
    color: var(--drac-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-badge {
    font-size: var(--font-sm);
    font-weight: 900;
    letter-spacing: var(--token-unit-0-3px);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    color: var(--token-color-rgba-26-27-38-0-92);
    background: var(--req-color);
    border: var(--border-width-thin) solid var(--surface-card);
    flex: 0 0 auto;
}

.request-details {
    padding: var(--space-2) var(--radius-md) var(--radius-md);
    border-top: var(--border-width-thin) solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--space-3);
}

.request-kv {
    display: grid;
    grid-template-columns: minmax(var(--token-unit-120px), 1fr) minmax(0, 1.6fr);
    gap: var(--space-1) var(--radius-md);
    font-variant-numeric: tabular-nums;
}

.request-kv .k {
    color: var(--text-muted);
    font-weight: 700;
}

.request-kv .v {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* Vehicles panel */
.vehicle-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--radius-md);
}

.vehicle-filters .btn {
    font-size: var(--font-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.vehicle-filters {
    flex-wrap: wrap;
    gap: var(--radius-sm);
}

.vehicle-filters .btn {
    margin: 0;
}

.vehicle-filters .btn.active {
    background: var(--token-color-rgba-139-233-253-0-14);
    border-color: var(--token-color-rgba-139-233-253-0-55);
    color: var(--drac-fg);
}

.vehicle-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-anchor: none;
}

.vehicle-item {
    flex: 0 0 auto;
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--space-3);
    background: var(--surface-card);
    overflow: hidden;
    --veh-color: var(--drac-accent);
}

.vehicle-item[open] {
    border-color: var(--token-color-rgba-139-233-253-0-18);
    background: var(--token-color-rgba-139-233-253-0-05);
}

.vehicle-item > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--radius-md);
    padding: var(--space-2) var(--radius-md);
    cursor: pointer;
    user-select: none;
    border-left: var(--token-unit-3px) solid var(--veh-color);
}

.vehicle-item > summary:hover {
    background: var(--interactive-hover);
}

.vehicle-item > summary:focus-visible {
    outline: var(--border-width-medium) solid var(--token-color-rgba-139-233-253-0-6);
    outline-offset: var(--border-width-medium);
}

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

.vehicle-dot {
    width: var(--radius-md);
    height: var(--radius-md);
    border-radius: var(--radius-full);
    background: var(--veh-color);
    box-shadow: 0 0 0 var(--border-width-medium) var(--token-color-rgba-0-0-0-0-22);
    flex: 0 0 auto;
}

.vehicle-title {
    min-width: 0;
    flex: 1;
    font-size: var(--space-3);
    font-weight: 700;
    color: var(--drac-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-badge {
    font-size: var(--font-sm);
    font-weight: 900;
    letter-spacing: var(--token-unit-0-3px);
    line-height: 1.1;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    color: var(--veh-badge-fg, var(--text-on-accent));
    background: var(--veh-color);
    border: var(--border-width-thin) solid var(--veh-badge-border, var(--surface-card));
    text-shadow: var(--veh-badge-shadow, none);
    flex: 0 0 auto;
}

.vehicle-details {
    padding: var(--space-2) var(--radius-md) var(--radius-md);
    border-top: var(--border-width-thin) solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--space-3);
}

.vehicle-kv {
    display: grid;
    grid-template-columns: minmax(var(--token-unit-120px), 1fr) minmax(0, 1.6fr);
    gap: var(--space-1) var(--radius-md);
    font-variant-numeric: tabular-nums;
}

.vehicle-kv .k {
    color: var(--text-muted);
    font-weight: 700;
}

.vehicle-kv .v {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.vehicle-kv-warning {
    color: var(--status-warning);
    font-weight: 700;
}

.vehicle-detail-section {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: var(--border-width-thin) solid var(--border-subtle);
}

.vehicle-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--text-muted);
}

.vehicle-detail-section-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.vehicle-detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--token-unit-3px);
    max-height: var(--token-unit-11rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    overflow-anchor: none;
}

.vehicle-detail-item {
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--token-unit-5px) var(--space-2);
    background: var(--surface-elevated);
}

.vehicle-detail-item-main {
    color: var(--text-primary);
    font-weight: 700;
    font-size: var(--font-sm);
    overflow-wrap: anywhere;
}

.vehicle-detail-item-meta {
    margin-top: var(--token-unit-3px);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    overflow-wrap: anywhere;
}

.vehicle-detail-empty {
    color: var(--text-muted);
    font-size: var(--font-sm);
}

/* ── Vehicle multi-select checkbox ── */
.vehicle-select-check {
    width: var(--token-unit-14px);
    height: var(--token-unit-14px);
    border: var(--border-width-medium) solid var(--border-default);
    border-radius: var(--token-unit-3px);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    color: transparent;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    position: relative;
}
.vehicle-select-check:hover {
    border-color: var(--accent-secondary-border);
}
.vehicle-select-check.checked {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: var(--text-on-accent);
}
.vehicle-select-check.checked::after {
    content: '\2713';
    font-weight: 700;
    line-height: 1;
}

/* Selected vehicle item highlight */
.vehicle-item.is-selected {
    outline: var(--border-width-thin) solid var(--accent-secondary);
    outline-offset: calc(var(--border-width-thin) * -1);
}

/* ── Vehicle selection actions toolbar ── */
.vehicle-selection-actions {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}
.vehicle-selection-actions .btn[disabled] {
    opacity: 0.35;
    pointer-events: none;
}
.vehicle-selection-actions .btn.active {
    background: var(--accent-secondary);
    color: var(--text-on-accent);
    border-color: var(--accent-secondary);
}

/* Look & Feel panel */
.style-controls {
    display: flex;
    flex-direction: column;
    gap: var(--radius-md);
}

.lf-overview-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lf-overview-copy {
    font-size: var(--font-sm);
    line-height: 1.45;
    color: var(--text-muted);
}

.lf-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.lf-shortcut-btn {
    flex: 0 0 auto;
}

.lf-group {
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--space-3);
    background: var(--surface-card);
    overflow: hidden;
}

.lf-group-summary {
    padding: var(--space-2) var(--radius-md);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--radius-md);
    font-size: var(--space-3);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--token-unit-0-7px);
    color: var(--text-secondary);
    background: var(--surface-sunken);
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
}

.lf-group-summary::-webkit-details-marker {
    display: none;
}

.lf-group-summary::after {
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--text-muted);
    transform: rotate(var(--token-unit-0deg));
    transition: transform var(--transition-view-duration) ease;
    flex: 0 0 var(--token-unit-18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    line-height: 1;
}

.lf-group[open] > .lf-group-summary::after {
    transform: rotate(var(--token-unit-90deg));
}

.lf-group-body {
    padding: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--radius-md);
}

.lf-row {
    display: grid;
    grid-template-columns: minmax(var(--token-unit-140px), 1fr) minmax(0, 1.25fr);
    align-items: center;
    column-gap: var(--radius-md);
    row-gap: var(--space-1);
}

.lf-row-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--space-3);
    font-weight: 700;
    color: var(--text-primary);
}

.lf-row-tooltip {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: help;
}

.lf-row-tooltip:hover,
.lf-row-tooltip:focus-visible {
    background: var(--interactive-hover);
    color: var(--text-primary);
}

.lf-row-tooltip:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.lf-row-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.lf-row-hint {
    grid-column: 1 / -1;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.lf-select,
.lf-number,
.lf-text {
    width: 100%;
    padding: var(--radius-sm) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--surface-sunken-deep);
    border: var(--border-width-thin) solid var(--border-default);
    color: var(--text-primary);
    font-size: var(--space-3);
}

.lf-select:focus,
.lf-number:focus,
.lf-text:focus {
    outline: none;
    border-color: var(--token-color-rgba-189-147-249-0-65);
    box-shadow: 0 0 0 var(--token-unit-0-2rem) var(--token-color-rgba-189-147-249-0-18);
}

.lf-number {
    max-width: var(--token-unit-140px);
}

.lf-range {
    width: 100%;
    accent-color: var(--drac-accent);
}

.lf-color {
    width: var(--token-unit-46px);
    height: var(--token-unit-30px);
    padding: 0;
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken-deep);
}

.lf-toggle {
    position: relative;
    width: var(--token-unit-42px);
    height: var(--token-unit-22px);
    display: inline-block;
    cursor: pointer;
    flex: 0 0 auto;
}

.lf-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.lf-toggle-ui {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    background: var(--token-color-rgba-0-0-0-0-26);
    border: var(--border-width-thin) solid var(--token-color-rgba-248-248-242-0-18);
    transition: background var(--transition-view-duration) ease, border-color var(--transition-view-duration) ease;
}

.lf-toggle-ui::after {
    content: '';
    position: absolute;
    width: var(--token-unit-18px);
    height: var(--token-unit-18px);
    border-radius: var(--radius-full);
    left: var(--border-width-medium);
    top: var(--border-width-thin);
    background: var(--token-color-rgba-248-248-242-0-82);
    box-shadow: 0 var(--radius-sm) var(--token-unit-14px) var(--token-color-rgba-0-0-0-0-28);
    transition: transform var(--transition-view-duration) ease, background var(--transition-view-duration) ease;
}

.lf-toggle input:checked + .lf-toggle-ui {
    background: var(--token-color-rgba-189-147-249-0-24);
    border-color: var(--token-color-rgba-189-147-249-0-55);
}

.lf-toggle input:checked + .lf-toggle-ui::after {
    transform: translateX(var(--space-5));
    background: var(--drac-accent);
}

.lf-inline {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--radius-md);
}

.lf-preset-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.lf-preset-row .btn {
    flex: 0 0 auto;
}

.lf-row--preset-stack {
    grid-template-columns: 1fr;
}

.lf-row--preset-stack .lf-row-control {
    grid-column: 1 / -1;
    justify-content: stretch;
}

.lf-row--preset-stack .lf-preset-row .btn {
    flex: 1 1 100%;
    white-space: normal;
}

.lf-inline .lf-select {
    flex: 1 1 auto;
    width: auto;
    min-width: var(--token-unit-160px);
}

.lf-inline .lf-number {
    width: var(--token-unit-96px);
    max-width: var(--token-unit-120px);
}

.lf-inline .lf-text {
    flex: 1 1 auto;
    width: auto;
    min-width: var(--token-unit-160px);
}

.lf-card {
    padding: var(--radius-md) var(--space-3);
    border-radius: var(--space-3);
    border: var(--border-width-thin) solid var(--border-default);
    background: var(--surface-sunken);
}

.lf-card-title {
    font-size: var(--font-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--token-unit-0-7px);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.lf-status-preview {
    margin-bottom: var(--radius-md);
}

.lf-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.lf-swatch-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--radius-sm) var(--radius-md);
    border-radius: var(--radius-full);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: var(--surface-sunken);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.lf-swatch-dot {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--radius-full);
    border: var(--border-width-thin) solid var(--border-muted);
    flex: 0 0 auto;
}

.lf-swatch-text {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lf-viridis {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

.stat-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--radius-md);
    margin-bottom: var(--space-1);
}

.stat-header-title {
    font-size: var(--font-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--token-unit-0-7px);
    color: var(--text-secondary);
}

.stat-header-meta {
    font-size: var(--space-3);
    color: var(--text-muted);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--token-unit-14px);
}

@media (max-width: 720px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    padding: var(--radius-md) var(--space-3);
    border-radius: var(--space-3);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: var(--surface-card);
}

.stat-label {
    font-size: var(--font-sm);
    text-transform: uppercase;
    letter-spacing: var(--token-unit-0-7px);
    color: var(--text-subtle);
}

.stat-value {
    margin-top: var(--radius-sm);
    font-size: var(--token-unit-22px);
    font-weight: 800;
    letter-spacing: var(--token-unit-0-2px);
}

.stat-meta {
    margin-top: var(--space-1);
    font-size: var(--space-3);
    color: var(--text-muted);
}

.stat-section-title {
    margin: var(--radius-md) var(--border-width-medium) var(--space-2);
    font-size: var(--font-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--token-unit-0-7px);
    color: var(--text-subtle);
}

.stat-table {
    margin-bottom: 0;
}

.stat-table thead th {
    font-size: var(--font-sm);
    text-transform: uppercase;
    letter-spacing: var(--token-unit-0-7px);
    color: var(--text-subtle);
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
}

.stat-table tbody td {
    border-top: 0;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.stat-table tbody tr.is-selected td {
    background: var(--accent-primary-bg);
}

.stat-fleet-vehicle-link {
    appearance: none;
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    padding: var(--space-1) var(--space-2);
    margin: calc(var(--space-1) * -1) 0;
    cursor: pointer;
}

.stat-fleet-vehicle-link:hover,
.stat-fleet-vehicle-link:focus-visible {
    border-color: var(--accent-primary-border);
    background: var(--interactive-hover);
    color: var(--text-primary);
    outline: none;
}

.stat-fleet-vehicle-link[aria-pressed="true"] {
    border-color: var(--accent-primary-border-strong);
    background: var(--accent-primary-bg);
}

.form-range {
    accent-color: var(--drac-accent);
}

.form-check-input {
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--drac-accent);
    border-color: var(--drac-accent);
}

.form-select,
.form-select-sm {
    background-color: var(--surface-sunken-deep);
    border: var(--border-width-thin) solid var(--drac-border);
    color: var(--drac-fg);
}

select option,
select optgroup {
    background-color: var(--surface-raised);
    color: var(--text-primary);
}

.form-select:focus {
    border-color: var(--accent-primary-border);
    box-shadow: var(--accent-primary-focus);
}

.btn-outline-light {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn-outline-light:hover {
    background: var(--interactive-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn-primary {
    background: var(--drac-accent);
    border-color: var(--drac-accent);
    color: var(--token-color-1a1b26);
    font-weight: 700;
}

.btn-primary:hover {
    background: var(--token-color-a97ff3);
    border-color: var(--token-color-a97ff3);
    color: var(--token-color-1a1b26);
}

/* Unified dock panel (controls + chart) */


#myDiv {
    width: 100%;
    height: 100%;
}

/* Map popup styling (dracula-like, still readable) */
.mapboxgl-popup-close-button,
.maplibregl-popup-close-button {
    display: none;
}

.mapboxgl-popup-content,
.maplibregl-popup-content {
    font-family: "Roboto", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
    font-size: var(--space-3);
    padding: 0;
    width: var(--dock-min-bottom-height);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mapboxgl-popup-content h3,
.maplibregl-popup-content h3 {
    background: var(--drac-panel-solid);
    color: var(--drac-fg);
    margin: 0;
    font-size: var(--space-3);
    display: block;
    text-align: center;
    padding: var(--radius-md);
    font-weight: 700;
}

.mapboxgl-popup-content h4,
.maplibregl-popup-content h4 {
    margin: 0;
    display: block;
    padding: var(--radius-md);
    font-size: var(--space-3);
    font-weight: 400;
    background: var(--token-color-rgba-40-42-54-0-92);
    color: var(--drac-fg);
}

.mapboxgl-popup-content div,
.maplibregl-popup-content div {
    padding: var(--radius-md);
}

@media (max-width: 900px) {
    .hud-topbar {
        right: var(--ui-gap);
    }

    .import-source-grid,
    .ops-grid {
        grid-template-columns: 1fr;
    }

    .import-source-input,
    .import-source-kind {
        grid-column: 1 / span 1;
    }
}

body {
    color: var(--text-primary);
    font-size: var(--ui-font-body);
}

.control-section-title {
    font-size: var(--space-3);
    color: var(--text-secondary);
}

.control-section-meta {
    font-size: var(--space-3);
    color: var(--text-muted-2);
}

.control-section-body,
.hint,
.request-title,
.vehicle-title,
.request-details,
.vehicle-details,
.ops-field,
.lf-row-label {
    font-size: var(--space-3);
}

.icon-btn {
    min-width: var(--ui-control-target);
    min-height: var(--ui-control-target);
}

.icon-btn:focus-visible,
.btn:focus-visible,
.form-check-input:focus-visible,
.form-select:focus-visible,
.form-control:focus-visible,
.toolbar-select:focus-visible,
.monitor-list-item:focus-visible,
.monitor-kpi-chip:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}


#sidebarBody[data-view="monitor"] #section-monitor {
    display: flex;
    flex-direction: column;
}

.monitor-control-panel .panel-accordion-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
}

.monitor-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.monitor-panel-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.monitor-panel-overline {
    font-size: var(--font-sm);
    font-weight: 800;
    letter-spacing: var(--token-unit-0-6px);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.monitor-panel-title {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--text-primary);
    line-height: var(--line-height-snug);
}

.monitor-panel-meta {
    flex: 0 0 auto;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    border: var(--border-width-thin) solid var(--border-default);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: 700;
    white-space: nowrap;
}

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

.monitor-kpi-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.monitor-kpi-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.monitor-kpi-section-title {
    font-size: var(--font-sm);
    font-weight: 800;
    letter-spacing: var(--token-unit-0-6px);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.monitor-kpi-section-meta {
    font-size: var(--font-sm);
    color: var(--text-muted-2);
}

.monitor-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}

.monitor-kpi-chip {
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    padding: var(--space-2) var(--radius-md);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--radius-sm);
    min-height: var(--token-unit-66px);
}

.monitor-kpi-chip:hover {
    background: var(--surface-soft);
}

.monitor-kpi-chip .kpi-label {
    font-size: var(--space-3);
    color: var(--text-muted-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--token-unit-0-4px);
}

.monitor-kpi-chip .kpi-value {
    font-size: var(--space-5);
    font-weight: 800;
    line-height: 1;
}

.monitor-kpi-chip .kpi-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-2);
}

.monitor-kpi-chip .kpi-meta {
    min-width: 0;
    font-size: var(--font-sm);
    line-height: var(--line-height-snug);
    color: var(--text-muted-2);
}

.monitor-kpi-chip .kpi-label,
.monitor-kpi-chip .kpi-value,
.monitor-kpi-chip .kpi-meta,
.monitor-kpi-chip .kpi-trend {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.monitor-kpi-chip .kpi-label,
.monitor-kpi-chip .kpi-value,
.monitor-kpi-chip .kpi-trend,
.monitor-kpi-chip .kpi-meta {
    white-space: nowrap;
}

.monitor-kpi-chip[data-tone="info"] {
    border-color: var(--status-info-border);
    background: var(--status-info-subtle);
}

.monitor-kpi-chip[data-tone="success"] {
    border-color: var(--status-success-border);
    background: var(--status-success-subtle);
}

.monitor-kpi-chip[data-tone="warning"] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-subtle);
}

.monitor-kpi-chip[data-tone="danger"] {
    border-color: var(--status-danger-border);
    background: var(--status-critical-subtle);
}

.monitor-incidents {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.incident-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--radius-sm);
    padding: var(--space-1) var(--radius-md);
    border-radius: var(--radius-full);
    border: var(--border-width-thin) solid var(--border-default);
    font-size: var(--space-3);
    letter-spacing: var(--token-unit-0-2px);
}

.incident-critical {
    background: var(--token-color-rgba-255-85-85-0-18);
    border-color: var(--token-color-rgba-255-85-85-0-55);
    color: var(--token-color-ffd2d2);
}

.incident-warning {
    background: var(--token-color-rgba-255-184-108-0-16);
    border-color: var(--token-color-rgba-255-184-108-0-55);
    color: var(--token-color-ffe1be);
}

.incident-ok {
    background: var(--token-color-rgba-80-250-123-0-15);
    border-color: var(--token-color-rgba-80-250-123-0-48);
    color: var(--token-color-d8ffe5);
}

.monitor-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.monitor-list-card {
    border: var(--border-width-thin) solid var(--token-color-rgba-248-248-242-0-12);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    padding: var(--space-2);
    min-height: var(--token-unit-180px);
}

.monitor-list-title {
    font-size: var(--font-sm);
    letter-spacing: var(--token-unit-0-6px);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    font-weight: 800;
}

.monitor-list {
    display: flex;
    flex-direction: column;
    gap: var(--radius-sm);
}

.monitor-attention-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.monitor-attention-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.monitor-attention-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.monitor-attention-group-title {
    font-size: var(--font-sm);
    font-weight: 800;
    letter-spacing: var(--token-unit-0-4px);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.monitor-attention-group-count {
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-soft);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: 700;
}

.monitor-attention-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.monitor-attention-empty-title {
    font-size: var(--font-sm);
    font-weight: 800;
    letter-spacing: var(--token-unit-0-4px);
    text-transform: uppercase;
    color: var(--text-primary);
}

.monitor-attention-empty-copy {
    font-size: var(--font-sm);
    color: var(--text-muted-2);
    text-align: right;
}

.monitor-list-item {
    width: 100%;
    border: var(--border-width-thin) solid var(--token-color-rgba-248-248-242-0-12);
    border-radius: var(--token-unit-9px);
    background: var(--token-color-rgba-248-248-242-0-03);
    color: var(--text-primary);
    padding: var(--space-2) var(--token-unit-9px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--radius-md);
    text-align: left;
}

.monitor-list-item:hover {
    background: var(--token-color-rgba-248-248-242-0-08);
}

.monitor-list-item .item-title {
    font-size: var(--space-3);
    font-weight: 700;
    color: var(--text-primary);
}

.monitor-list-item .item-meta {
    font-size: var(--font-sm);
    color: var(--text-muted-2);
}


#myDiv {
    background: transparent;
}

#sidebar[data-density="compact"] .control-section-body {
    padding: var(--space-2);
    gap: var(--space-2);
}

#sidebar[data-density="compact"] .request-item > summary,
#sidebar[data-density="compact"] .vehicle-item > summary {
    padding: var(--radius-sm) var(--space-2);
}

#sidebar[data-density="compact"] .request-details,
#sidebar[data-density="compact"] .vehicle-details {
    padding: var(--radius-sm) var(--space-2) var(--space-2);
    font-size: var(--font-sm);
}

#sidebar[data-density="compact"] .request-badge,
#sidebar[data-density="compact"] .vehicle-badge {
    font-size: var(--font-sm);
    padding: var(--token-unit-3px) var(--token-unit-7px);
}

#sidebar[data-density="compact"] .toolbar-btn span {
    font-size: var(--font-sm);
}

#sidebar[data-density="compact"] .monitor-kpi-chip .kpi-value {
    font-size: var(--token-unit-17px);
}

#sidebar[data-advanced="0"] #section-style,
#sidebar[data-advanced="0"] #section-data,
#sidebar[data-advanced="0"] #section-ops {
    display: none !important;
}


@media (max-width: 1439px) {
    .dock-toolbar {
        gap: var(--space-2);
        padding: var(--space-2);
    }

    .toolbar-group {
        gap: var(--token-unit-5px);
        padding: var(--space-1);
    }

    .toolbar-select {
        min-width: var(--token-unit-108px);
    }

    .toolbar-btn {
        padding: 0 var(--space-2);
    }

    .monitor-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .dock-panel.dock-bottom {
        height: var(--token-unit-55vh);
        max-height: var(--token-unit-72vh);
    }

    .dock-toolbar-left,
    .dock-toolbar-right {
        width: 100%;
    }

    .toolbar-group {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .toolbar-view-group,
    .toolbar-layout-group {
        overflow-x: auto;
        white-space: nowrap;
    }

    .toolbar-btn span {
        display: none;
    }

    .monitor-list-grid {
        grid-template-columns: 1fr;
    }

    .monitor-panel-header,
    .monitor-kpi-section-header,
    .monitor-attention-empty {
        flex-direction: column;
        align-items: flex-start;
    }

    .monitor-panel-meta,
    .monitor-attention-empty-copy {
        white-space: normal;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: var(--token-unit-0-01ms) !important;
        animation-iteration-count: 1 !important;
        transition-duration: var(--token-unit-0-01ms) !important;
        scroll-behavior: auto !important;
    }

    .status-dot.is-running,
    .status-btn[aria-pressed="true"],
    .sidebar[data-presentation="drawer"] {
        box-shadow: none !important;
    }
}

/* ── UI Improvement Overrides ─────────────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: var(--border-width-thin);
    height: var(--border-width-thin);
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hud-topbar {
    gap: var(--space-3);
}

.hud-pill-group {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.hud-pill {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-overlay);
    border-color: var(--border-default);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.hud-pill-label {
    font-size: var(--font-sm);
    color: var(--text-muted);
    line-height: var(--line-height-snug);
}

.hud-pill-value {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-normal);
}

.hud-run-dot,
.play-live-dot {
    display: inline-block;
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--text-disabled);
    margin-right: var(--space-1);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hud-run-dot.is-running,
.play-live-dot.is-running {
    background: var(--status-success);
    box-shadow: 0 0 0 var(--space-1) var(--status-success-subtle);
    animation: livePulse var(--token-unit-1-4s) ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% {
        box-shadow: 0 0 0 var(--border-width-medium) var(--status-success-subtle);
    }
    50% {
        box-shadow: 0 0 0 var(--radius-sm) var(--token-color-rgba-81-207-102-0-06);
    }
}

.icon-btn,
.btn,
.toolbar-select,
.form-select,
.form-control,
.monitor-kpi-chip,
.monitor-list-item,
.request-item > summary,
.vehicle-item > summary,
.layer-item {
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

:where(.icon-btn, .btn, .toolbar-select, .form-select, .form-control, .monitor-kpi-chip, .monitor-list-item, .request-item > summary, .vehicle-item > summary):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.form-select:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible),
.lf-select:focus:not(:focus-visible),
.lf-number:focus:not(:focus-visible) {
    box-shadow: none;
}


.control-section {
    border-radius: var(--radius-md);
    border-color: var(--border-subtle);
    background: var(--surface-sunken);
}

.control-section-header {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom-color: var(--border-subtle);
    background: var(--surface-sunken);
}

.control-section-title,
.import-card-title,
.lf-card-title,
.monitor-list-title,
.stat-label,
.stat-section-title {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide);
}

.control-section-title,
.import-card-title,
.lf-card-title,
.monitor-list-title,
.stat-label,
.stat-section-title,
.lf-group-summary {
    color: var(--text-secondary);
}

.stat-header-title {
    color: var(--text-secondary);
}

.stat-header-meta,
.stat-meta {
    color: var(--text-muted);
}

.control-section-body {
    padding: var(--space-3);
    gap: var(--space-3);
}

.hint,
.control-section-meta,
.lf-row-hint,
.request-details,
.vehicle-details,
.monitor-list-item .item-meta {
    font-size: var(--font-sm);
    line-height: var(--line-height-snug);
    color: var(--text-muted);
}

.request-kv .k,
.vehicle-kv .k {
    color: var(--text-subtle);
}

.request-kv .v,
.vehicle-kv .v {
    color: var(--text-primary);
}

.stat-grid {
    gap: var(--space-3);
}

.stat-card,
.import-card,
.lf-card,
.monitor-list-card,
.monitor-kpi-chip {
    padding: var(--space-3);
    border-radius: var(--radius-md);
}

.lf-group-summary {
    background: var(--surface-sunken);
    border-bottom-color: var(--border-subtle);
}

.lf-swatch-item {
    border-color: var(--border-subtle);
    background: var(--surface-soft);
    color: var(--text-secondary);
}

.lf-swatch-dot {
    border-color: var(--border-default);
}

.stat-card {
    position: relative;
    border-color: var(--border-default);
    border-top: var(--border-width-medium) solid var(--border-default);
    background: var(--surface-raised);
}

.stat-card[data-status="warning"] {
    border-top-color: var(--status-warning);
    background: var(--status-warning-subtle);
}

.stat-card[data-status="danger"] {
    border-top-color: var(--status-critical);
    background: var(--status-critical-subtle);
}

.stat-card[data-status="success"] {
    border-top-color: var(--status-success);
}

.stat-card[data-status="warning"] .stat-value {
    color: var(--status-warning);
}

.stat-card[data-status="danger"] .stat-value {
    color: var(--status-critical);
}

.stat-card[data-status="success"] .stat-value {
    color: var(--text-primary);
}

.stat-value {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-normal);
    color: var(--text-primary);
}

.stat-table thead th {
    color: var(--text-subtle);
    border-bottom-color: var(--border-subtle);
}

.stat-table tbody td {
    color: var(--text-secondary);
    border-top-color: var(--border-subtle);
}

.monitor-kpi-chip {
    min-height: var(--token-unit-72px);
    justify-content: space-between;
}

.kpi-trend {
    font-size: var(--font-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-subtle);
}

.kpi-trend.is-up {
    color: var(--status-warning);
}

.kpi-trend.is-down {
    color: var(--status-success);
}

.monitor-kpi-chip.kpi-pulse-up {
    box-shadow: inset 0 0 0 var(--border-width-thin) var(--status-warning-border);
}

.monitor-kpi-chip.kpi-pulse-down {
    box-shadow: inset 0 0 0 var(--border-width-thin) var(--status-success-border);
}

.incident-pill {
    border-radius: var(--radius-full);
    letter-spacing: var(--tracking-normal);
}

.incident-critical {
    background: var(--status-critical-subtle);
    border-color: var(--status-danger-border);
    color: var(--status-danger-text);
}

.incident-warning {
    background: var(--status-warning-subtle);
    border-color: var(--status-warning-border);
    color: var(--status-warning-text);
}

.incident-ok {
    background: var(--status-success-subtle);
    border-color: var(--status-success-border);
    color: var(--status-success-text);
}

.request-item,
.vehicle-item {
    border-radius: var(--radius-md);
}

.request-item > summary,
.vehicle-item > summary {
    min-height: var(--dock-toolbar-height);
    padding: var(--space-2) var(--space-3);
    position: relative;
}

.request-item > summary::after,
.vehicle-item > summary::after {
    content: '\203A';
    margin-left: auto;
    font-size: var(--font-md);
    color: var(--text-subtle);
    transform: rotate(var(--token-unit-0deg));
    transition: transform var(--transition-fast);
}

.request-item[open] > summary::after,
.vehicle-item[open] > summary::after {
    transform: rotate(var(--token-unit-90deg));
}

.request-item > summary:hover {
    box-shadow: inset var(--border-width-medium) 0 0 var(--req-color), 0 0 var(--space-2) var(--surface-card);
}

.vehicle-item > summary:hover {
    box-shadow: inset var(--border-width-medium) 0 0 var(--veh-color), 0 0 var(--space-2) var(--surface-card);
}

.request-title,
.vehicle-title,
.layer-name,
.toolbar-btn span {
    letter-spacing: var(--tracking-normal);
}

.request-badge,
.vehicle-badge {
    font-weight: var(--font-weight-bold);
}

.monitor-list-item {
    min-height: var(--dock-toolbar-height);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    border: var(--border-width-thin) dashed var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    padding: var(--space-3);
}

.empty-state-sm {
    padding: var(--space-2);
}

.empty-state-icon {
    font-size: var(--font-lg);
    line-height: var(--line-height-tight);
    color: var(--text-muted);
}

.empty-state-title {
    font-size: var(--font-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.empty-state-copy {
    font-size: var(--font-sm);
    color: var(--text-subtle);
    line-height: var(--line-height-snug);
}

.monitor-empty-state {
    width: 100%;
}

.chart-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.chart-legend-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
    background: var(--surface-sunken);
}

.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: var(--surface-soft);
}

.chart-legend-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    border: var(--border-width-thin) solid var(--border-subtle);
}

.chart-legend-label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

#myDiv {
    width: 100%;
    min-height: 0;
    height: auto;
    flex: 1;
}

.mapboxgl-popup-content,
.maplibregl-popup-content {
    width: var(--dock-min-controls-width);
    border: var(--border-width-thin) solid var(--border-default);
    background: var(--surface-overlay);
    backdrop-filter: blur(var(--space-2));
}

.mapboxgl-popup-content h3,
.maplibregl-popup-content h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.popup-status-dot {
    display: inline-block;
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--accent-secondary);
    margin-right: var(--space-1);
}

.mapboxgl-popup-close-button,
.maplibregl-popup-close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
    border: var(--border-width-thin) solid transparent;
}

.mapboxgl-popup-close-button:hover,
.maplibregl-popup-close-button:hover {
    background: var(--interactive-hover);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.aviz-popup .mapboxgl-popup-content,
.aviz-popup .maplibregl-popup-content {
    width: var(--dock-min-controls-width);
    max-width: var(--dock-default-bottom-height);
    margin: 0;
    padding: 0 !important;
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-overlay);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.aviz-popup .mapboxgl-popup-content h3,
.aviz-popup .maplibregl-popup-content h3 {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    min-height: var(--token-unit-36px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1);
    font-size: var(--font-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    background: var(--surface-sunken);
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
    letter-spacing: var(--tracking-normal);
}

.aviz-popup .popup-body {
    padding: var(--space-2) var(--space-3);
}

.aviz-popup .popup-media {
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
    background: var(--surface-sunken);
}

.aviz-popup .popup-photo {
    display: block;
    width: 100%;
    max-height: var(--token-unit-180px);
    object-fit: cover;
}

.aviz-popup .popup-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

.aviz-popup .popup-table th,
.aviz-popup .popup-table td {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-base);
    line-height: var(--line-height-snug);
    vertical-align: top;
}

.aviz-popup .popup-table th {
    width: 42%;
    text-align: left;
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
}

.aviz-popup .popup-table td {
    text-align: right;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.aviz-popup .popup-text-cell {
    text-align: left !important;
    font-variant-numeric: normal;
}

.aviz-popup .popup-list {
    margin: 0;
    padding-left: var(--space-4);
}

.aviz-popup .popup-list li + li {
    margin-top: var(--token-unit-3px);
}

.aviz-popup .popup-status-dot {
    margin-right: var(--space-1);
    flex: 0 0 auto;
}

.aviz-popup .request-stack-hint {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: var(--line-height-snug);
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
}

.aviz-popup .request-stack-list {
    display: grid;
    gap: var(--space-1);
    max-height: var(--token-unit-260px);
    overflow-y: auto;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
}

.aviz-popup .request-stack-option {
    display: grid;
    width: 100%;
    gap: var(--border-width-medium);
    padding: var(--space-2);
    text-align: left;
    color: var(--text-primary);
    background: var(--surface-card);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.aviz-popup .request-stack-option:hover,
.aviz-popup .request-stack-option:focus-visible {
    background: var(--interactive-hover);
    border-color: var(--accent-primary);
}

.request-stack-option-title {
    font-weight: var(--font-weight-bold);
}

.request-stack-option-pair {
    color: var(--accent-secondary);
    font-variant-numeric: tabular-nums;
}

.request-stack-option-role {
    color: var(--text-muted);
    font-size: var(--font-sm);
    text-transform: capitalize;
}

.aviz-popup.mapboxgl-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.aviz-popup.maplibregl-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.aviz-popup.mapboxgl-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.aviz-popup.maplibregl-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.aviz-popup.mapboxgl-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
.aviz-popup.maplibregl-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: var(--surface-overlay);
}

.aviz-popup.mapboxgl-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.aviz-popup.maplibregl-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.aviz-popup.mapboxgl-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.aviz-popup.maplibregl-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.aviz-popup.mapboxgl-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
.aviz-popup.maplibregl-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: var(--surface-overlay);
}

.aviz-popup.mapboxgl-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip,
.aviz-popup.maplibregl-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: var(--surface-overlay);
}

.aviz-popup.mapboxgl-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip,
.aviz-popup.maplibregl-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: var(--surface-overlay);
}

.dock-controls[data-view="sim"] #section-sim,
#sidebarBody[data-view="layers"] #section-layers,
.dock-controls[data-view="requests"] #section-requests,
.dock-controls[data-view="vehicles"] #section-vehicles,
.dock-controls[data-view="selected"] #section-selected,
.dock-controls[data-view="stats"] #section-analysis-service,
.dock-controls[data-view="fleet-kpis"] #section-analysis-fleet,
.dock-controls[data-view="chart-export"] #section-analysis-chart,
.dock-controls[data-view="app-performance"] #section-analysis-performance,
.dock-controls[data-view="style"] #section-style,
.dock-controls[data-view="data"] #section-data,
.dock-controls[data-view="instances-library"] #section-data,
.dock-controls[data-view="ops"] #section-ops,
.dock-controls[data-view="map"] #section-scenario-map,
#sidebarBody[data-view="monitor"] #section-monitor {
    animation: sectionFade var(--transition-view);
}

@keyframes sectionFade {
    from {
        opacity: 0;
        transform: translateY(var(--space-1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#sidebar[data-density="compact"] .request-badge,
#sidebar[data-density="compact"] .vehicle-badge {
    font-size: var(--font-sm);
}

#sidebar[data-density="spacious"] .control-section-body {
    padding: var(--space-4);
    gap: var(--space-4);
}

#sidebar[data-density="spacious"] .toolbar-btn span,
#sidebar[data-density="spacious"] .control-section-meta,
#sidebar[data-density="spacious"] .request-title,
#sidebar[data-density="spacious"] .vehicle-title {
    font-size: var(--font-md);
}

#sidebar[data-density="spacious"] .monitor-kpi-chip .kpi-value,
#sidebar[data-density="spacious"] .stat-value {
    font-size: var(--font-2xl);
}


@media (pointer: coarse) {
    .icon-btn,
    .toolbar-btn,
    .monitor-list-item,
    .request-item > summary,
    .vehicle-item > summary,
    .btn {
        min-height: var(--dock-toolbar-height);
    }

    .lf-toggle {
        transform: scale(1.2);
        transform-origin: left center;
    }

    .form-check-input {
        transform: scale(1.2);
        transform-origin: center;
    }
}

:root[data-theme="light"] body {
    background: var(--surface-app);
}


:root[data-theme="light"] .dock-toolbar,
:root[data-theme="light"] .toolbar-group,
:root[data-theme="light"] .control-section-header,
:root[data-theme="light"] .control-section {
    background: var(--token-color-f1f3f5);
    border-color: var(--border-default);
}

:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .import-card,
:root[data-theme="light"] .lf-card,
:root[data-theme="light"] .lf-group,
:root[data-theme="light"] .monitor-kpi-chip,
:root[data-theme="light"] .monitor-list-card,
:root[data-theme="light"] .request-item,
:root[data-theme="light"] .vehicle-item {
    background: var(--surface-raised);
    border-color: var(--token-color-rgba-33-37-41-0-16);
}

:root[data-theme="light"] .request-item[open] {
    background: var(--token-color-rgba-132-94-194-0-08);
    border-color: var(--token-color-rgba-132-94-194-0-32);
}

:root[data-theme="light"] .vehicle-item[open] {
    background: var(--token-color-rgba-11-114-133-0-08);
    border-color: var(--token-color-rgba-11-114-133-0-32);
}

:root[data-theme="light"] .request-item > summary:hover,
:root[data-theme="light"] .vehicle-item > summary:hover {
    background: var(--interactive-hover);
    box-shadow: inset var(--border-width-medium) 0 0 var(--req-color), 0 0 0 var(--border-width-thin) var(--border-subtle);
}

:root[data-theme="light"] .vehicle-item > summary:hover {
    box-shadow: inset var(--border-width-medium) 0 0 var(--veh-color), 0 0 0 var(--border-width-thin) var(--border-subtle);
}

:root[data-theme="light"] .stat-card[data-status="warning"] {
    background: var(--status-warning-subtle);
    border-color: var(--status-warning-border);
    border-top-color: var(--status-warning);
}

:root[data-theme="light"] .stat-card[data-status="danger"] {
    background: var(--status-critical-subtle);
    border-color: var(--status-danger-border);
    border-top-color: var(--status-critical);
}

:root[data-theme="light"] .stat-card[data-status="success"] {
    background: var(--status-success-subtle);
    border-color: var(--status-success-border);
    border-top-color: var(--status-success);
}

:root[data-theme="light"] .stat-card[data-status="warning"] .stat-value {
    color: var(--status-warning-text);
}

:root[data-theme="light"] .stat-card[data-status="danger"] .stat-value {
    color: var(--status-danger-text);
}

:root[data-theme="light"] .stat-card[data-status="success"] .stat-value {
    color: var(--status-success-text);
}

:root[data-theme="light"] .monitor-list-item {
    background: var(--surface-raised);
    border-color: var(--border-default);
}

:root[data-theme="light"] .monitor-list-item:hover {
    background: var(--token-color-f8f9fa);
}

:root[data-theme="light"] .incident-pill {
    border-color: var(--border-default);
}

:root[data-theme="light"] .incident-critical {
    background: var(--status-critical-subtle);
    border-color: var(--status-danger-border);
    color: var(--status-danger-text);
}

:root[data-theme="light"] .incident-warning {
    background: var(--status-warning-subtle);
    border-color: var(--status-warning-border);
    color: var(--status-warning-text);
}

:root[data-theme="light"] .incident-ok {
    background: var(--status-success-subtle);
    border-color: var(--status-success-border);
    color: var(--status-success-text);
}

:root[data-theme="light"] .empty-state {
    background: var(--token-color-f8f9fa);
    border-color: var(--border-default);
}

:root[data-theme="light"] .lf-group-summary {
    background: var(--token-color-f1f3f5);
    border-bottom-color: var(--border-default);
}

:root[data-theme="light"] .lf-swatch-item {
    background: var(--token-color-f8f9fa);
}

:root[data-theme="light"] .map-remember-toggle,
:root[data-theme="light"] .ops-field {
    color: var(--text-secondary);
}

:root[data-theme="light"] .control-section-header,
:root[data-theme="light"] .control-section,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .import-card,
:root[data-theme="light"] .lf-card,
:root[data-theme="light"] .lf-group,
:root[data-theme="light"] .monitor-kpi-chip,
:root[data-theme="light"] .monitor-list-card,
:root[data-theme="light"] .request-item,
:root[data-theme="light"] .vehicle-item {
    border-color: var(--border-default);
}

:root[data-theme="light"] .dock-chart {
    background: var(--surface-base);
}

:root[data-theme="light"] .chart-legend-strip {
    background: var(--token-color-f1f3f5);
    border-bottom-color: var(--border-default);
}

:root[data-theme="light"] .btn-outline-light {
    color: var(--text-primary);
    border-color: var(--border-default);
}

:root[data-theme="light"] .btn-outline-light:hover {
    background: var(--interactive-hover);
    color: var(--text-primary);
}

:root[data-theme="light"] .form-select,
:root[data-theme="light"] .form-select-sm,
:root[data-theme="light"] .form-control {
    background: var(--surface-raised);
    color: var(--text-primary);
    border-color: var(--border-default);
}

:root[data-theme="light"] .mapboxgl-popup-content h4,
:root[data-theme="light"] .maplibregl-popup-content h4 {
    background: var(--token-color-f1f3f5);
    color: var(--text-primary);
}

:root {
    --token-unit-10px: 10px;
    --token-unit-24px: 24px;
    --token-unit-38px: 38px;
    --token-unit-40px: 40px;
    --token-unit-48px: 48px;
    --token-unit-64px: 64px;
    --token-unit-78px: 78px;
    --token-unit-132px: 132px;
    --token-unit-176px: 176px;
    --token-unit-320px: 320px;
    --token-unit-480px: 480px;
    --token-unit-520px: 520px;
    --token-unit-760px: 760px;
    --token-unit-1200px: 1200px;
    --token-unit-40pct: 40%;
    --token-unit-50pct: 50%;
    --token-unit-62vh: 62vh;
    --token-unit-92vw: 92vw;
    --token-unit-0-04em: 0.04em;
    --token-unit-0-06em: 0.06em;
    --token-unit-0-08em: 0.08em;
    --token-unit-0-85rem: 0.85rem;
    --token-unit-1rem: 1rem;
    --token-unit-1-25rem: 1.25rem;
    --shell-selection-request: #f7b955;
    --shell-selection-vehicle: #67d0e4;
    --shell-surface-rail: rgba(var(--raw-black), 0.16);
    --shell-surface-card-strong: rgba(var(--raw-black), 0.18);
    --shell-surface-soft-03: rgba(var(--raw-fg), 0.03);
    --shell-surface-soft-04: rgba(var(--raw-fg), 0.04);
    --shell-surface-soft-05: rgba(var(--raw-fg), 0.05);
    --shell-surface-soft-06: rgba(var(--raw-fg), 0.06);
    --shell-surface-soft-07: rgba(var(--raw-fg), 0.07);
    --shell-surface-soft-09: rgba(var(--raw-fg), 0.09);
    --shell-border-soft: rgba(var(--raw-fg), 0.08);
    --shell-border-active: rgba(var(--raw-fg), 0.16);
    --shell-border-float: rgba(var(--raw-fg), 0.12);
    --shell-shadow-inset-soft: inset 0 0 0 1px rgba(var(--raw-fg), 0.06);
    --shell-shadow-float: 0 22px 60px rgba(var(--raw-black), 0.35);
    --shell-live-running: #51d88a;
    --shell-live-ring: 0 0 0 6px rgba(var(--raw-success), 0.12);
    --shell-light-border-strong: rgba(33, 37, 41, 0.18);
    --shell-resize-background:
        linear-gradient(135deg, transparent 0 45%, rgba(var(--raw-fg), 0.25) 45% 55%, transparent 55% 100%),
        linear-gradient(135deg, transparent 0 65%, rgba(var(--raw-fg), 0.55) 65% 75%, transparent 75% 100%);
    --shell-heading-size: clamp(var(--token-unit-1rem), 1vw + var(--token-unit-0-85rem), var(--token-unit-1-25rem));
    --shell-floating-transition: opacity var(--transition-fast), transform var(--transition-fast);
    --shell-floating-hidden-transform: translate3d(0, var(--token-unit-14px), 0) scale(0.98);
    --shell-floating-visible-transform: translate3d(0, 0, 0) scale(1);
    --shell-floating-modal-hidden-transform: translate(-50%, -48%) scale(0.98);
    --shell-floating-modal-visible-transform: translate(-50%, -50%) scale(1);
}

/* Analyst-first workspace shell overrides */

.hud-pill-group-slim {
    gap: var(--space-2);
}

.hud-pill-slim {
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--token-unit-14px);
    backdrop-filter: blur(var(--token-unit-18px));
}

.hud-pill-slim .hud-pill-label {
    font-size: var(--font-sm);
    letter-spacing: var(--token-unit-0-08em);
    text-transform: uppercase;
}

.hud-pill-slim .hud-pill-value {
    font-size: var(--font-sm);
    font-weight: 700;
}

#hudSelectionValue[data-kind="request"] {
    color: var(--shell-selection-request);
}

#hudSelectionValue[data-kind="vehicle"] {
    color: var(--shell-selection-vehicle);
}


/* Overridden by VS Code theme block below */

#sidebar .control-section-header {
    padding: var(--space-3) var(--space-4);
    background: var(--shell-surface-soft-03);
}

#sidebar .control-section-title {
    font-size: var(--font-md);
    letter-spacing: var(--token-unit-0-06em);
    text-transform: uppercase;
}

#sidebar .control-section-meta {
    max-width: var(--token-unit-40pct);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Overridden by VS Code theme block below */

#sidebar .overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

#sidebar .overview-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: var(--token-unit-120px);
    padding: var(--space-3);
    border-radius: var(--space-4);
    background: var(--shell-surface-soft-03);
    border: var(--border-width-thin) solid var(--shell-border-soft);
}

#sidebar .overview-card-title {
    font-size: var(--font-base);
    font-weight: 800;
    letter-spacing: var(--token-unit-0-08em);
    text-transform: uppercase;
    color: var(--text-secondary);
}

#sidebar .overview-inline-note {
    font-size: var(--font-sm);
    line-height: var(--line-height-normal);
    color: var(--text-secondary);
}

#sidebar .overview-accordion,
#sidebar .panel-accordion {
    border-radius: var(--space-4);
    border: var(--border-width-thin) solid var(--shell-border-soft);
    background: var(--shell-surface-soft-03);
    overflow: hidden;
}

#sidebar .overview-accordion > summary,
#sidebar .panel-accordion > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-md);
    font-weight: 800;
    letter-spacing: var(--token-unit-0-06em);
    text-transform: uppercase;
    color: var(--text-primary);
}

#sidebar .overview-accordion > summary::-webkit-details-marker,
#sidebar .panel-accordion > summary::-webkit-details-marker {
    display: none;
}

#sidebar .overview-accordion > summary::after,
#sidebar .panel-accordion > summary::after {
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--token-unit-18px);
    font-size: var(--font-xs);
    line-height: 1;
}

#sidebar .overview-accordion[open] > summary::after,
#sidebar .panel-accordion[open] > summary::after {
    transform: rotate(var(--token-unit-90deg));
}

#sidebar .overview-accordion-body,
#sidebar .panel-accordion-body {
    padding: 0 var(--space-4) var(--space-4);
}

#sidebar .metrics-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

#sidebar .metrics-summary-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border-radius: var(--token-unit-14px);
    background: var(--shell-surface-soft-03);
    border: var(--border-width-thin) solid var(--shell-border-soft);
}

#sidebar .metrics-summary-item span {
    font-size: var(--font-sm);
    font-weight: 700;
    letter-spacing: var(--token-unit-0-08em);
    text-transform: uppercase;
    color: var(--text-secondary);
}

#sidebar .metrics-summary-item strong {
    font-size: var(--token-unit-18px);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

#sidebar .metrics-detail-value {
    font-variant-numeric: tabular-nums;
}

#sidebar .layer-group-copy {
    display: flex;
    flex-direction: column;
    gap: var(--border-width-medium);
    min-width: 0;
}

#sidebar .layer-subsection {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) 0 0;
    border-top: var(--border-width-thin) solid var(--shell-border-soft);
    border-radius: 0;
    background: transparent;
}

#sidebar .layer-subsection:first-of-type {
    border-top: none;
    padding-top: 0;
}

#sidebar .layer-subsection-header {
    display: flex;
    flex-direction: column;
    gap: var(--border-width-medium);
    padding: 0 var(--space-2) var(--space-1);
}

#sidebar .layer-subsection-title {
    font-size: var(--font-xs);
    font-weight: 800;
    letter-spacing: var(--token-unit-0-08em);
    text-transform: uppercase;
    color: var(--text-primary);
}

#sidebar .layer-subsection-description {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-snug);
}

#sidebar .layer-subsection-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

#sidebar .layer-select-row {
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

#sidebar .layer-select {
    min-width: 0;
    max-width: min(var(--token-unit-220px), 52%);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--shell-border-soft);
    background: var(--shell-surface-soft-04);
    color: var(--text-primary);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-sm);
}

#sidebar .layer-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--focus-ring);
}

#sidebar .dock-chart {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-card);
}

#sidebar .chart-chrome,
.floating-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--space-4);
    background: var(--shell-surface-soft-04);
    border: var(--border-width-thin) solid var(--shell-border-soft);
}

#sidebar .chart-chrome-copy,
.floating-chart-copy {
    display: flex;
    flex-direction: column;
    gap: var(--border-width-medium);
    min-width: 0;
}

#sidebar .chart-chrome-overline,
.floating-chart-overline {
    font-size: var(--font-sm);
    font-weight: 700;
    letter-spacing: var(--token-unit-0-08em);
    text-transform: uppercase;
    color: var(--text-secondary);
}

#sidebar .chart-chrome-title,
.floating-chart-title {
    font-size: var(--font-md);
    font-weight: 800;
    color: var(--text-primary);
}

#sidebar .chart-chrome-actions,
.floating-chart-header .chart-chrome-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

#sidebar .chart-host,
.floating-chart-body {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: var(--token-unit-18px);
    overflow: hidden;
    background: var(--shell-surface-rail);
    border: var(--border-width-thin) solid var(--shell-border-soft);
}

.chart-surface {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
}

.fleet-capacity-bands {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--token-unit-30px);
    padding: var(--space-1) var(--space-2);
    border-bottom: var(--border-width-thin) solid var(--shell-border-soft);
    background: var(--shell-surface-soft-04);
    color: var(--text-secondary);
    font-size: var(--font-xs);
}

.fleet-capacity-bands[hidden] {
    display: none !important;
}

.fleet-capacity-bands label {
    color: var(--text-primary);
    font-weight: 700;
    white-space: nowrap;
}

.fleet-capacity-bands input[type="range"] {
    width: var(--token-unit-120px);
    min-width: var(--token-unit-72px);
    accent-color: var(--interactive-accent);
}

.fleet-capacity-bands output {
    min-width: var(--token-unit-22px);
    color: var(--text-primary);
    font-weight: 800;
    text-align: center;
}

.fleet-capacity-bands span {
    white-space: nowrap;
}

#dockFleetChartBody,
#dockDemandChartBody,
#dockDemandTimeWindowBody {
    flex: 1 1 0;
    min-height: 0;
    height: 0;
}

.chart-stash {
    display: none;
}

/* Sectionable iframe presentation: every visible app region is selected in share data. */
html[data-aviz-view="embed"] {
    --embed-top-inset: 0;
    --embed-left-inset: 0;
    --embed-bottom-inset: 0;
}

.fleet-capacity-bands select {
    min-height: var(--token-unit-26px);
    padding: 0 var(--space-6) 0 var(--space-2);
    border: var(--border-width-thin) solid var(--shell-border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
}

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

#fleetCapacityBandsSettings[hidden] {
    display: none !important;
}

html[data-aviz-view="embed"][data-aviz-embed-top-bar="true"] {
    --embed-top-inset: var(--titlebar-height);
}

html[data-aviz-view="embed"][data-aviz-embed-status-bar="true"] {
    --embed-bottom-inset: var(--statusbar-height);
}

html[data-aviz-view="embed"][data-aviz-embed-activity-bar="true"] {
    --embed-left-inset: var(--activity-bar-width);
}

html[data-aviz-view="embed"][data-aviz-embed-sidebar="true"] {
    --embed-left-inset: calc(var(--activity-bar-width) + var(--sidebar-width));
}

html[data-aviz-view="embed"][data-aviz-embed-bottom-panel="true"] {
    --embed-bottom-inset: var(--bottom-panel-height);
}

html[data-aviz-view="embed"][data-aviz-embed-sidebar="true"]:not([data-aviz-embed-activity-bar="true"]) {
    --embed-left-inset: var(--sidebar-width);
}

html[data-aviz-view="embed"][data-aviz-embed-bottom-panel="true"][data-aviz-embed-status-bar="true"] {
    --embed-bottom-inset: calc(var(--bottom-panel-height) + var(--statusbar-height));
}

html[data-aviz-view="embed"]:not([data-aviz-embed-top-bar="true"]) #topBar,
html[data-aviz-view="embed"]:not([data-aviz-embed-sidebar="true"]) #sidebar,
html[data-aviz-view="embed"]:not([data-aviz-embed-sidebar="true"]) #sidebarResizeHandle,
html[data-aviz-view="embed"]:not([data-aviz-embed-bottom-panel="true"]) #bottomPanel,
html[data-aviz-view="embed"]:not([data-aviz-embed-bottom-panel="true"]) #floatingChartWindow,
html[data-aviz-view="embed"]:not([data-aviz-embed-activity-bar="true"]) #activityBar,
html[data-aviz-view="embed"]:not([data-aviz-embed-status-bar="true"]) #statusBar,
html[data-aviz-view="embed"] #btnQuickStart,
html[data-aviz-view="embed"] #btnShareView,
html[data-aviz-view="embed"] #shareManager,
html[data-aviz-view="embed"] .status-item-selection,
html[data-aviz-view="embed"] .status-separator-selection,
html[data-aviz-view="embed"] .status-separator-author,
html[data-aviz-view="embed"] .status-item-author {
    display: none !important;
}

html[data-aviz-view="embed"]:not([data-aviz-embed-playback="true"]) [data-status-key="playback"],
html[data-aviz-view="embed"]:not([data-aviz-embed-time="true"]) [data-status-key="time"],
html[data-aviz-view="embed"]:not([data-aviz-embed-speed="true"]) [data-status-key="speed"],
html[data-aviz-view="embed"]:not([data-aviz-embed-charts="true"]) #btnToggleChart,
html[data-aviz-view="embed"]:not([data-aviz-embed-charts="true"]) #btnToggleDemandChart,
html[data-aviz-view="embed"]:not([data-aviz-embed-charts="true"]) #btnToggleDemandTimeWindows,
html[data-aviz-view="embed"]:not([data-aviz-embed-route-display="true"]) [data-status-key="route-display"],
html[data-aviz-view="embed"]:not([data-aviz-embed-ids="true"]) #btnToggleNodeIds,
html[data-aviz-view="embed"]:not([data-aviz-embed-map-layers="true"]) #btnToggleCityMap,
html[data-aviz-view="embed"]:not([data-aviz-embed-map-layers="true"]) #btnToggleEuclideanNetwork,
html[data-aviz-view="embed"]:not([data-aviz-embed-regions="true"]) #btnToggleRegionalCoverage,
html[data-aviz-view="embed"]:not([data-aviz-embed-reset-view="true"]) #btnResetMapView,
html[data-aviz-view="embed"]:not([data-aviz-embed-theme="true"]) #btnThemeToggle {
    display: none !important;
}

html[data-aviz-view="embed"] #map {
    inset: var(--embed-top-inset) 0 var(--embed-bottom-inset) var(--embed-left-inset) !important;
    width: auto !important;
    height: auto !important;
}

html[data-aviz-view="embed"] #statusBar {
    left: var(--embed-left-inset) !important;
}

html[data-aviz-view="embed"][data-aviz-embed-sidebar="true"]:not([data-aviz-embed-activity-bar="true"]) #sidebar {
    left: 0;
}

html[data-aviz-view="embed"] #bottomPanel {
    left: var(--embed-left-inset) !important;
}

html[data-aviz-view="embed"]:not([data-aviz-embed-status-bar="true"]) #activityBar,
html[data-aviz-view="embed"]:not([data-aviz-embed-status-bar="true"]) #sidebar,
html[data-aviz-view="embed"]:not([data-aviz-embed-status-bar="true"]) #bottomPanel {
    bottom: 0;
}

.context-key-button {
    position: absolute;
    right: var(--space-3);
    bottom: calc(var(--context-key-bottom-inset, var(--statusbar-height)) + var(--space-3));
    z-index: 24;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--token-unit-32px);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-overlay);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    backdrop-filter: blur(var(--space-2));
}

.context-key-button:hover,
.context-key-button[aria-expanded="true"] {
    border-color: var(--accent-secondary);
    background: var(--interactive-hover);
}

.context-key-button:focus-visible,
.context-key-close:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.context-key-panel {
    position: absolute;
    right: var(--space-3);
    bottom: calc(var(--context-key-bottom-inset, var(--statusbar-height)) + var(--token-unit-52px));
    z-index: 25;
    width: min(var(--token-unit-320px), calc(100vw - (var(--space-4) * 2)));
    max-height: min(var(--token-unit-480px), calc(100vh - var(--titlebar-height) - var(--statusbar-height) - var(--space-8)));
    overflow: auto;
    padding: var(--space-3);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-overlay);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(var(--space-3));
}

.context-key-panel[hidden] {
    display: none;
}

.context-key-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.context-key-header h2 {
    margin: 0;
    font-size: var(--font-base);
}

.context-key-eyebrow {
    color: var(--accent-secondary);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.context-key-close {
    display: inline-grid;
    place-items: center;
    width: var(--token-unit-28px);
    height: var(--token-unit-28px);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
}

.context-key-close:hover {
    background: var(--interactive-hover);
    color: var(--text-primary);
}

.context-key-intro {
    margin: var(--space-2) 0 var(--space-3);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: var(--line-height-snug);
}

.context-key-section + .context-key-section {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width-thin) solid var(--border-subtle);
}

.context-key-section h3 {
    margin: 0 0 var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.context-key-row {
    display: grid;
    grid-template-columns: var(--token-unit-28px) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-height: var(--token-unit-28px);
}

.context-key-row + .context-key-row {
    margin-top: var(--space-1);
}

.context-key-swatch {
    --context-key-color: var(--text-secondary);
    position: relative;
    display: block;
    width: var(--token-unit-24px);
    height: var(--token-unit-18px);
}

.context-key-swatch.is-point::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--space-3);
    height: var(--space-3);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--context-key-color), white 35%);
    border-radius: var(--radius-full);
    background: var(--context-key-color);
    transform: translate(-50%, -50%);
}

.context-key-swatch.is-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: max(var(--border-width-medium), var(--context-key-width, var(--border-width-medium)));
    border-radius: var(--radius-full);
    background: var(--context-key-color);
    transform: translateY(-50%);
}

.context-key-swatch.is-label::before {
    content: "ID";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--context-key-color);
    color: var(--surface-base);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
}

.context-key-copy strong,
.context-key-copy small {
    display: block;
}

.context-key-copy strong {
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
}

.context-key-copy small {
    color: var(--text-secondary);
    font-size: var(--font-xs);
    line-height: var(--line-height-snug);
}

.context-key-empty {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

html[data-aviz-view="embed"] .context-key-button,
html[data-aviz-view="embed"] .context-key-panel {
    display: none !important;
}

html[data-aviz-view="embed"]:not([data-aviz-embed-top-bar="true"]) #activityBar,
html[data-aviz-view="embed"]:not([data-aviz-embed-top-bar="true"]) #sidebar {
    top: 0;
}

/* Auto-hiding status bar: the map fills the whole embed and the playback bar slides in
   only while the embed is hovered or keyboard-focused. */
html[data-aviz-view="embed"][data-aviz-embed-status="hover"][data-aviz-embed-status-bar="true"] #map {
    inset: var(--embed-top-inset) 0 0 var(--embed-left-inset) !important;
}
html[data-aviz-view="embed"][data-aviz-embed-status="hover"] #statusBar {
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}
html[data-aviz-view="embed"][data-aviz-embed-status="hover"] #app:hover #statusBar,
html[data-aviz-view="embed"][data-aviz-embed-status="hover"] #app:focus-within #statusBar {
    opacity: 1;
    pointer-events: auto;
}

html[data-aviz-view="embed"][data-aviz-embed-viewport="fixed"] #app {
    width: var(--aviz-embed-width, 960px);
    min-width: var(--aviz-embed-width, 960px);
    max-width: var(--aviz-embed-width, 960px);
    height: var(--aviz-embed-height, 540px);
    min-height: var(--aviz-embed-height, 540px);
    max-height: var(--aviz-embed-height, 540px);
}

html[data-aviz-view="embed"][data-aviz-embed-viewport="fixed"]:not([data-aviz-embed-fit="custom"]) #app {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    min-height: 0;
    max-height: none;
}

html[data-aviz-view="embed"][data-aviz-embed-viewport="fixed"] #statusBar {
    position: absolute;
    right: auto !important;
    width: var(--aviz-embed-width, 960px);
}

html[data-aviz-view="embed"][data-aviz-embed-viewport="fixed"]:not([data-aviz-embed-fit="custom"]) #statusBar {
    width: auto;
    right: 0 !important;
}

html[data-aviz-view="embed"] .status-item-run-state,
html[data-aviz-view="embed"] .status-item-play,
html[data-aviz-view="embed"] .status-item-time,
html[data-aviz-view="embed"] .status-item-speed {
    flex: 0 0 auto;
}

html[data-aviz-view="embed"] #hudRunState {
    width: 9ch;
    min-width: 9ch;
}

html[data-aviz-view="embed"] #btnPlayPauseLabel {
    width: 5ch;
    min-width: 5ch;
}

.share-manager {
    position: fixed;
    z-index: var(--quick-start-overlay-layer);
    top: calc(var(--token-unit-32px) + var(--space-2));
    right: var(--space-3);
    width: min(var(--token-unit-400px), calc(100vw - var(--space-6)));
    max-height: var(--quick-start-max-height);
    overflow: auto;
    padding: var(--space-4);
    color: var(--text-primary);
    background: var(--surface-overlay);
    border: var(--border-width-thin) solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.share-manager[hidden] {
    display: none;
}

.share-manager > header,
.share-manager-item > header,
.share-manager-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.share-manager h2,
.share-manager p {
    margin: 0;
}

.share-manager > p {
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.share-manager-list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.share-manager-embed-options {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    color: var(--text-secondary);
    background: var(--surface-sunken);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
}

.share-manager-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-sunken);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.share-manager-result > div {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.share-manager-result span,
.share-manager-expiry {
    color: var(--text-secondary);
    font-size: var(--font-xs);
}

.share-creator-results-header,
.share-creator-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.share-creator-results-header {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width-thin) solid var(--border-subtle);
}

.share-creator-results {
    display: grid;
    gap: var(--space-2);
}

.share-creator-result {
    padding: var(--space-2);
    background: var(--surface-sunken);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.share-creator-result > div {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.share-creator-result span,
.share-creator-result code {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--font-xs);
    text-overflow: ellipsis;
}

.share-manager-embed-options > strong {
    color: var(--text-primary);
}

.share-manager-embed-grid,
.share-manager-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.share-manager-embed-grid {
    flex-wrap: wrap;
}

.share-manager-embed-presentation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.share-manager-embed-field {
    display: grid;
    gap: var(--space-1);
    margin: 0;
}

.share-manager-embed-field input,
.share-manager-embed-field select {
    width: 100%;
    min-width: 0;
}

.share-manager-check {
    margin: 0;
}

.share-manager-item {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-card);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.share-manager-item > header {
    flex-wrap: wrap;
}

.share-manager-item code {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--font-xs);
    text-overflow: ellipsis;
}

.share-manager-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* ── Zero-install quick start ── */
.quick-start-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--quick-start-overlay-layer);
    display: grid;
    place-items: center;
    padding: var(--space-6);
    background: var(--token-color-rgba-0-0-0-0-35);
    backdrop-filter: blur(var(--space-2));
}

.quick-start-overlay[hidden] {
    display: none;
}

.quick-start-card {
    width: min(var(--quick-start-width), calc(100vw - var(--token-unit-48px)));
    max-height: var(--quick-start-max-height);
    overflow: auto;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    color: var(--text-primary);
    background: var(--surface-overlay);
    border: var(--border-width-thin) solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.quick-start-header,
.quick-start-actions,
.quick-start-footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.quick-start-header {
    align-items: flex-start;
    justify-content: space-between;
}

.quick-start-header h1 {
    margin: 0;
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
}

.quick-start-header p {
    margin: var(--space-2) 0 0;
    color: var(--text-secondary);
    font-size: var(--font-md);
}

.quick-start-eyebrow {
    margin-bottom: var(--space-1);
    color: var(--accent-secondary);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.quick-start-actions {
    flex-wrap: wrap;
}

.quick-start-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.quick-start-modes button {
    min-width: 0;
    min-height: var(--token-unit-48px);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    color: var(--text-secondary);
    text-align: left;
    background: var(--surface-card);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.quick-start-modes button[aria-selected="true"] {
    color: var(--text-primary);
    background: var(--accent-primary-bg);
    border-color: var(--accent-primary-border);
}

.quick-start-modes button > i {
    color: var(--accent-secondary);
}

.quick-start-modes button span {
    min-width: 0;
    display: grid;
}

.quick-start-modes button small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-normal);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-start-mode-panel {
    min-height: 0;
    display: grid;
    gap: var(--space-3);
}

.quick-start-mode-panel[hidden] {
    display: none;
}

.quick-start-file-toolbar {
    display: flex;
    align-items: end;
    gap: var(--space-3);
}

.quick-start-file-toolbar .quick-start-dataset {
    max-width: var(--token-unit-320px);
}

.quick-start-dropzone-large {
    min-height: var(--token-unit-88px);
    justify-content: center;
    padding: var(--space-4);
}

.quick-start-dropzone-large > span {
    display: grid;
    gap: var(--space-1);
}

.quick-start-dropzone-large small {
    color: var(--text-muted);
}

.quick-start-review,
.quick-start-advanced {
    padding: var(--space-3);
    background: var(--surface-card);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.quick-start-review {
    display: grid;
    gap: var(--space-2);
}

.quick-start-asset-list {
    display: grid;
    gap: var(--space-1);
}

.quick-start-asset-list > p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.quick-start-asset {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--surface-soft);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
}

.quick-start-asset span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-start-asset em {
    color: var(--accent-secondary);
    font-size: var(--font-xs);
    font-style: normal;
}

.quick-start-asset-warning {
    display: block;
    color: var(--accent-warning);
}

.quick-start-advanced summary {
    color: var(--text-secondary);
    cursor: pointer;
}

.quick-start-advanced > p {
    margin: var(--space-2) 0;
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.quick-start-advanced-type {
    max-width: var(--token-unit-320px);
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.quick-start-literature-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.quick-start-literature-toolbar label {
    min-width: 0;
    flex: 1;
    position: relative;
}

.quick-start-literature-toolbar label i {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    color: var(--text-muted);
    transform: translateY(-50%);
}

.quick-start-literature-toolbar input {
    padding-left: var(--space-6);
}

.quick-start-literature-toolbar > span {
    color: var(--text-muted);
    font-size: var(--font-sm);
    white-space: nowrap;
}

.quick-start-literature-explorer {
    min-height: var(--token-unit-420px);
    display: grid;
    grid-template-columns: minmax(var(--token-unit-220px), 0.8fr) minmax(var(--token-unit-260px), 1fr) minmax(var(--token-unit-320px), 1.2fr);
    overflow: hidden;
    background: var(--surface-card);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.quick-start-literature-tree,
.quick-start-literature-results,
.quick-start-literature-detail {
    min-width: 0;
    max-height: var(--token-unit-420px);
    overflow: auto;
}

.quick-start-literature-tree,
.quick-start-literature-results {
    border-right: var(--border-width-thin) solid var(--border-subtle);
}

.quick-start-literature-tree {
    padding: var(--space-2);
}

.quick-start-tree-group {
    display: grid;
}

.quick-start-literature-tree button {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2);
    color: var(--text-secondary);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}

.quick-start-literature-tree button:hover,
.quick-start-literature-tree button:focus-visible,
.quick-start-literature-tree button.is-selected {
    color: var(--text-primary);
    background: var(--accent-primary-bg);
}

.quick-start-literature-tree button span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-start-literature-tree button small {
    color: var(--text-muted);
}

.quick-start-tree-collection {
    margin-top: var(--space-2);
    font-weight: var(--font-weight-bold);
}

.quick-start-tree-scenario {
    padding-left: var(--space-4) !important;
    font-size: var(--font-sm);
}

.quick-start-tree-variant {
    padding-left: var(--space-6) !important;
    font-size: var(--font-xs);
}

.quick-start-literature-results > header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-card);
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
}

.quick-start-literature-results > header span {
    color: var(--text-muted);
    font-size: var(--font-xs);
}

#quickStartLiteratureResults {
    display: grid;
    padding: var(--space-2);
}

#quickStartLiteratureResults button {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2);
    color: var(--text-secondary);
    text-align: left;
    background: transparent;
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-sm);
}

#quickStartLiteratureResults button:hover,
#quickStartLiteratureResults button:focus-visible,
#quickStartLiteratureResults button[aria-selected="true"] {
    color: var(--text-primary);
    background: var(--accent-secondary-bg);
    border-color: var(--accent-secondary-border);
}

#quickStartLiteratureResults button span,
#quickStartLiteratureResults button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#quickStartLiteratureResults button small {
    color: var(--text-muted);
}

.quick-start-literature-detail {
    padding: var(--space-4);
}

.quick-start-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.quick-start-detail-heading > div > span {
    color: var(--accent-secondary);
    font-size: var(--font-xs);
}

.quick-start-detail-heading h2 {
    margin: var(--space-1) 0 0;
    font-size: var(--font-xl);
}

.quick-start-bks-badge {
    padding: var(--space-1) var(--space-2);
    color: var(--text-muted);
    background: var(--surface-soft);
    border-radius: var(--radius-pill);
    font-size: var(--font-xs);
    white-space: nowrap;
}

.quick-start-bks-badge.has-bks {
    color: var(--accent-success);
}

.quick-start-literature-detail > p {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.quick-start-facets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.quick-start-facets span {
    padding: var(--space-1) var(--space-2);
    color: var(--text-secondary);
    background: var(--surface-soft);
    border-radius: var(--radius-pill);
    font-size: var(--font-xs);
}

.quick-start-literature-detail dl {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

.quick-start-literature-detail dl > div {
    display: grid;
    grid-template-columns: minmax(var(--token-unit-88px), 0.4fr) 1fr;
    gap: var(--space-2);
}

.quick-start-literature-detail dt {
    color: var(--text-muted);
    font-size: var(--font-xs);
}

.quick-start-literature-detail dd {
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-sm);
    overflow-wrap: anywhere;
}

.quick-start-literature-detail a {
    color: var(--accent-secondary);
}

.quick-start-detail-note,
.quick-start-detail-empty,
.quick-start-result-empty {
    color: var(--text-muted) !important;
    font-size: var(--font-xs) !important;
}

.quick-start-input-tabs {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--surface-sunken-deep);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.quick-start-input-tabs button {
    flex: 1;
    min-height: var(--control-target);
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}

.quick-start-input-tabs button[aria-selected="true"] {
    color: var(--text-primary);
    background: var(--accent-primary-bg);
    box-shadow: inset 0 0 0 var(--border-width-thin) var(--accent-primary-border);
}

.quick-start-input-panel {
    display: grid;
    gap: var(--space-2);
}

.quick-start-input-panel[hidden] {
    display: none;
}

.quick-start-panel-heading,
.quick-start-workspace-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.quick-start-panel-heading a {
    color: var(--accent-secondary);
    white-space: nowrap;
}

.quick-start-schema-links {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.quick-start-benchmark-library {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-card);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.quick-start-benchmark-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: var(--space-2);
}

.quick-start-check {
    min-height: var(--control-target);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    white-space: nowrap;
}

.quick-start-benchmark-provenance {
    color: var(--text-muted);
    font-size: var(--font-xs);
}

.quick-start-schema-guide {
    padding: var(--space-2) var(--space-3);
    color: var(--text-muted);
    background: var(--surface-soft);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
}

.quick-start-schema-guide summary {
    color: var(--text-secondary);
    cursor: pointer;
}

.quick-start-schema-guide pre {
    max-height: var(--token-unit-180px);
    overflow: auto;
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    white-space: pre-wrap;
}

.quick-start-schema-guide p {
    margin: var(--space-2) 0 0;
}

.quick-start-workspace-summary {
    padding: var(--space-3);
    background: var(--surface-card);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.quick-start-workspace-summary strong {
    color: var(--text-primary);
    text-align: right;
}

.quick-start-solution-import {
    display: grid;
    gap: var(--space-2);
}

.quick-start-solution-import[hidden] {
    display: none;
}

.quick-start-solution-fields {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-2);
}

.quick-start-solution-fields label {
    display: grid;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.quick-start-paths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.quick-start-path {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    color: var(--text-primary);
    text-align: left;
    background: var(--surface-card);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.quick-start-path:hover,
.quick-start-path:focus-visible {
    border-color: var(--accent-secondary);
    background: var(--accent-secondary-bg);
}

.quick-start-path span {
    color: var(--text-secondary);
    font-size: var(--font-xs);
}

.quick-start-dataset {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.quick-start-dataset .form-select {
    width: 100%;
}

.quick-start-dropzone {
    min-height: var(--control-target);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    background: var(--surface-soft);
    border: var(--border-width-thin) dashed var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.quick-start-dropzone:hover,
.quick-start-dropzone:focus-within,
.quick-start-dropzone.is-dragover {
    color: var(--text-primary);
    border-color: var(--accent-secondary);
    background: var(--accent-secondary-bg);
}

.quick-start-dropzone input {
    display: none;
}

.quick-start-benchmark-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-xs);
}

.quick-start-benchmark-links a {
    color: var(--accent-secondary);
}

.quick-start-editor-label {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
}

.quick-start-editor {
    min-height: var(--quick-start-editor-height);
    resize: vertical;
    padding: var(--space-3);
    color: var(--text-primary);
    background: var(--surface-sunken-deep);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    line-height: var(--line-height-normal);
}

.quick-start-editor:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--accent-primary-focus);
}

.quick-start-status {
    min-height: var(--space-5);
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.quick-start-status[data-tone="error"] {
    color: var(--accent-danger);
}

.quick-start-status[data-tone="success"] {
    color: var(--accent-success);
}

.quick-start-status[data-tone="warning"] {
    color: var(--accent-warning);
}

.quick-start-assumptions {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--accent-warning);
    font-size: var(--font-sm);
}

.quick-start-post {
    padding: var(--space-3);
    color: var(--text-secondary);
    background: var(--surface-card);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.quick-start-post summary {
    color: var(--text-primary);
    cursor: pointer;
}

.quick-start-post > p {
    margin-top: var(--space-2);
    margin-bottom: 0;
    font-size: var(--font-sm);
}

.quick-start-send-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.quick-start-snippet {
    min-width: 0;
    padding: var(--space-2);
    background: var(--surface-sunken-deep);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.quick-start-snippet header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.quick-start-snippet pre {
    max-height: var(--token-unit-180px);
    overflow: auto;
    margin: var(--space-2) 0 0;
    color: var(--text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.quick-start-snippet code {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
}

.quick-start-ai {
    margin-top: var(--space-3);
}

.quick-start-copy-status {
    min-height: var(--space-5);
    margin-top: var(--space-2);
    font-size: var(--font-sm);
}

.quick-start-copy-status[data-tone="success"] {
    color: var(--accent-success);
}

.quick-start-copy-status[data-tone="error"] {
    color: var(--accent-danger);
}

.quick-start-footer {
    justify-content: flex-end;
}

.titlebar-quick-start {
    height: calc(var(--titlebar-height) - var(--space-1));
    min-height: 0;
    max-height: calc(var(--titlebar-height) - var(--space-1));
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    color: var(--text-primary);
    background: var(--accent-primary-bg);
    border: var(--border-width-thin) solid var(--accent-primary-border);
    border-radius: var(--radius-sm);
}

.titlebar-quick-start:hover,
.titlebar-quick-start:focus-visible {
    background: var(--accent-primary-subtle);
    border-color: var(--accent-primary);
}

@media (max-width: 768px) {
    .quick-start-overlay {
        padding: var(--space-3);
    }

    .quick-start-card {
        width: calc(100vw - var(--space-6));
        padding: var(--space-4);
    }

    .quick-start-modes {
        grid-template-columns: 1fr;
    }

    .quick-start-modes button {
        min-height: var(--control-target);
    }

    .quick-start-literature-explorer {
        display: block;
        overflow: visible;
    }

    .quick-start-literature-tree,
    .quick-start-literature-results,
    .quick-start-literature-detail {
        max-height: var(--token-unit-320px);
        border-right: 0;
        border-bottom: var(--border-width-thin) solid var(--border-subtle);
    }

    .quick-start-file-toolbar,
    .quick-start-literature-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .quick-start-editor {
        min-height: var(--token-unit-180px);
    }

    .quick-start-footer {
        justify-content: stretch;
    }

    .quick-start-dataset {
        flex-basis: 100%;
    }

    .quick-start-send-grid {
        grid-template-columns: 1fr;
    }

    .quick-start-solution-fields {
        grid-template-columns: 1fr;
    }

    .quick-start-benchmark-controls {
        grid-template-columns: 1fr;
    }

    .quick-start-paths {
        grid-template-columns: 1fr;
    }

    .quick-start-footer .btn {
        flex: 1;
    }

    .titlebar-quick-start span {
        display: none;
    }
}

.plot-root {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.plot-root.js-plotly-plot,
.plot-root .plot-container,
.plot-root .svg-container {
    width: 100% !important;
    height: 100% !important;
}

.chart-legend-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--shell-surface-soft-04);
    border-bottom: var(--border-width-thin) solid var(--shell-border-soft);
}

.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.chart-legend-dot {
    width: var(--font-xs);
    height: var(--font-xs);
    border-radius: var(--radius-full);
}

.chart-legend-label {
    color: var(--text-primary);
}

#myDiv,
#demandChartDiv,
#demandTimeWindowDiv {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: min(var(--token-unit-100vh), 100%) !important;
    width: min(var(--token-unit-100vw), 100%);
}

.demand-chart-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-bottom: var(--border-width-thin) solid var(--shell-border-soft);
    background: var(--shell-surface-soft-04);
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.demand-chart-bin-label {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--text-primary);
}

.demand-chart-bin-select {
    min-width: var(--token-unit-80px);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-sm);
}

.demand-chart-meta {
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.chart-segmented-control {
    display: inline-flex;
    align-items: stretch;
    min-height: var(--token-unit-28px);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.chart-segmented-option {
    min-width: var(--token-unit-64px);
    border: 0;
    border-right: var(--border-width-thin) solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-sm);
    font-weight: 600;
}

.chart-segmented-option:last-child {
    border-right: 0;
}

.chart-segmented-option:hover {
    background: var(--shell-surface-soft-08);
    color: var(--text-primary);
}

.chart-segmented-option.is-active,
.chart-segmented-option[aria-pressed="true"] {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.floating-chart-window {
    position: fixed;
    left: var(--token-unit-24px);
    top: var(--token-unit-24px);
    width: var(--token-unit-520px);
    height: var(--token-unit-320px);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--token-unit-22px);
    background: var(--surface-overlay);
    border: var(--border-width-thin) solid var(--shell-border-float);
    box-shadow: var(--shell-shadow-float);
    opacity: 0;
    pointer-events: none;
    transform: var(--shell-floating-hidden-transform);
    transition: var(--shell-floating-transition);
    z-index: 42;
}

.floating-chart-window.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: var(--shell-floating-visible-transform);
}

.floating-chart-header {
    cursor: move;
    user-select: none;
}

.floating-chart-resize {
    position: absolute;
    right: var(--space-2);
    bottom: var(--space-2);
    width: var(--token-unit-18px);
    height: var(--token-unit-18px);
    border: 0;
    border-radius: var(--space-2);
    background: var(--shell-resize-background);
    opacity: 0.8;
    cursor: nwse-resize;
}

.floating-chart-resize:hover {
    opacity: 1;
}


#sidebar .play-live-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--token-color-rgba-248-248-242-0-25);
}

#sidebar .play-live-dot.is-running {
    background: var(--shell-live-running);
    box-shadow: var(--shell-live-ring);
}

:root[data-theme="light"] #sidebar .workspace-rail,
:root[data-theme="light"] #sidebar .dock-session-strip,
:root[data-theme="light"] #sidebar .control-section,
:root[data-theme="light"] #sidebar .chart-host,
:root[data-theme="light"] #sidebar .chart-chrome,
:root[data-theme="light"] .floating-chart-window,
:root[data-theme="light"] .floating-chart-header,
:root[data-theme="light"] .floating-chart-body {
    background: var(--surface-raised);
    border-color: var(--border-default);
}

:root[data-theme="light"] #sidebar .workspace-rail-btn:hover,
:root[data-theme="light"] #sidebar .workspace-rail-btn.active,
:root[data-theme="light"] #sidebar .workspace-tab,
:root[data-theme="light"] #sidebar .overview-card,
:root[data-theme="light"] #sidebar .metrics-summary-item,
:root[data-theme="light"] #sidebar .overview-accordion,
:root[data-theme="light"] #sidebar .panel-accordion,
:root[data-theme="light"] #sidebar .session-cluster,
:root[data-theme="light"] .chart-legend-strip {
    background: var(--token-color-f8f9fa);
    border-color: var(--border-default);
}


@media (max-width: 900px) {
    #sidebar .workspace-shell {
        gap: var(--space-2);
        padding: var(--space-2);
    }

    #sidebar .workspace-rail {
        width: var(--token-unit-64px);
        flex-basis: var(--token-unit-64px);
        padding: var(--space-1);
    }

    #sidebar .workspace-rail-btn span {
        font-size: var(--font-xs);
    }

    #sidebar .workspace-tabs {
        width: 100%;
        justify-content: flex-start;
    }

    #sidebar .metrics-summary-strip,
    #sidebar .overview-grid {
        grid-template-columns: 1fr;
    }

    .floating-chart-window {
        left: var(--token-unit-50pct) !important;
        top: var(--token-unit-50pct) !important;
        width: min(var(--token-unit-92vw), var(--token-unit-760px)) !important;
        height: min(var(--token-unit-62vh), var(--token-unit-480px)) !important;
        transform: var(--shell-floating-modal-hidden-transform);
    }

    .floating-chart-window.is-visible {
        transform: var(--shell-floating-modal-visible-transform);
    }

    .floating-chart-header {
        cursor: default;
    }

    .floating-chart-resize {
        display: none;
    }
}

:root {
    --vscode-activity-bg: #21222c;
    --vscode-current-line: #44475a;
    --vscode-status-bg: #44475a;
    --vscode-status-bg-light: #dbe6ff;
    --vscode-status-fg-light: #1f2430;
    --vscode-titlebar-bg: rgba(var(--raw-bg), 0.96);
    --vscode-panel-bg: var(--surface-app);
    --vscode-panel-muted: rgba(var(--raw-black), 0.22);
    --vscode-panel-border: rgba(var(--raw-fg), 0.08);
    --vscode-panel-border-strong: rgba(var(--raw-fg), 0.12);
    --vscode-status-highlight: rgba(var(--raw-cyan), 0.24);
    --vscode-status-text: rgba(var(--raw-fg), 0.92);
    --vscode-heading-muted: rgba(var(--raw-fg), 0.62);
    --vscode-activity-active: rgb(var(--raw-cyan));
    --vscode-panel-radius: var(--border-width-medium);
    --vscode-section-pad-x: var(--space-3);
    --vscode-section-pad-y: var(--space-2);
}

#sidebar,
#sidebar *,
#sidebar *::before,
#sidebar *::after {
    box-sizing: border-box;
}

.hud-topbar {
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    background: transparent;
}

.hud-pill-group-slim {
    width: 100%;
    gap: 0;
    overflow-x: auto;
    background: var(--vscode-titlebar-bg);
    border-bottom: var(--border-width-thin) solid var(--vscode-panel-border-strong);
    box-shadow: none;
}

.hud-pill-slim {
    flex: 0 0 auto;
    min-width: max-content;
    padding: var(--space-1) var(--space-3);
    border-right: var(--border-width-thin) solid var(--vscode-panel-border);
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}

.hud-pill-slim .hud-pill-label {
    font-size: var(--font-xs);
    color: var(--vscode-heading-muted);
}

.hud-pill-slim .hud-pill-value {
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
}

#sidebar{
    border-radius: 0;
    background: var(--vscode-panel-bg);
    box-shadow: none;
}


#sidebar .control-section {
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
}

#sidebar .control-section-header {
    padding: var(--vscode-section-pad-y) var(--vscode-section-pad-x);
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    background: transparent;
    border-bottom: var(--border-width-thin) solid var(--vscode-panel-border);
}

#sidebar .control-section-title {
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    color: var(--vscode-heading-muted);
}

#sidebar .control-section-meta {
    flex: 1 1 var(--token-unit-180px);
    max-width: none;
    text-align: right;
    color: var(--text-subtle);
}

#sidebar .control-section-body {
    padding: var(--vscode-section-pad-y) var(--vscode-section-pad-x) var(--vscode-section-pad-x);
    gap: var(--space-2);
    min-width: 0;
}

#sidebar .control-section-body > * {
    min-width: 0;
}

#sidebar .overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--token-unit-280px), 1fr));
    gap: var(--space-2);
}

#sidebar .overview-card,
#sidebar .monitor-list-card,
#sidebar .stat-card,
#sidebar .import-card,
#sidebar .lf-card,
#sidebar .request-item,
#sidebar .vehicle-item {
    border-radius: var(--vscode-panel-radius);
    background: var(--vscode-panel-muted);
    border-color: var(--vscode-panel-border-strong);
}

#sidebar .overview-card {
    min-height: auto;
    padding: var(--space-2) var(--space-3);
}

#sidebar .overview-card-title,
#sidebar .metrics-summary-item span {
    font-size: var(--font-xs);
    color: var(--vscode-heading-muted);
}

#sidebar .overview-inline-note,
#sidebar .hint {
    overflow-wrap: anywhere;
}

#sidebar .overview-accordion,
#sidebar .panel-accordion,
#sidebar .lf-group {
    border-radius: var(--vscode-panel-radius);
    background: transparent;
    border-color: var(--vscode-panel-border-strong);
    flex: 0 0 auto;
    min-height: max-content;
}

#sidebar .overview-accordion > summary,
#sidebar .panel-accordion > summary,
#sidebar .lf-group-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--token-unit-32px);
    padding: 0 var(--space-3);
    background: var(--vscode-current-line);
    border-bottom: var(--border-width-thin) solid var(--vscode-panel-border);
    font-size: var(--font-sm);
    font-weight: 800;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

#sidebar .overview-accordion > summary::after,
#sidebar .panel-accordion > summary::after,
#sidebar .lf-group-summary::after {
    margin-left: auto;
}

#sidebar .overview-accordion-body,
#sidebar .panel-accordion-body,
#sidebar .lf-group-body {
    padding: var(--space-2) var(--space-3) var(--space-3);
}

.accordion-summary-leading,
.lf-group-leading,
.layer-group-icon {
    width: var(--token-unit-18px);
    min-width: var(--token-unit-18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vscode-activity-active);
}

.accordion-summary-text,
.lf-group-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sidebar .layer-list,
#sidebar .request-list,
#sidebar .vehicle-list,
#sidebar .style-controls {
    min-width: 0;
}

#sidebar .style-controls .lf-row {
    grid-template-columns: minmax(0, 1fr);
}

#sidebar .style-controls .lf-row-control {
    grid-column: 1;
    justify-content: stretch;
}

#sidebar .style-controls .lf-preset-row .btn {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
}

#sidebar .style-controls .lf-inline {
    flex-wrap: wrap;
}

#sidebar .style-controls :where(.lf-select, .lf-number, .lf-text),
#sidebar .style-controls .lf-inline :where(.lf-select, .lf-number, .lf-text) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

#sidebar .layer-list {
    gap: 0;
}

#sidebar .layer-group {
    border-radius: var(--vscode-panel-radius);
    border: var(--border-width-thin) solid var(--shell-menu-border-strong);
    background: var(--shell-menu-bg-muted);
    overflow: hidden;
}

#sidebar .layer-group + .layer-group {
    margin-top: var(--space-2);
    padding-top: 0;
}

#sidebar .layer-group-body {
    margin-top: 0;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--shell-surface-soft-03);
    border-top: var(--border-width-thin) solid var(--shell-menu-border);
}

#sidebar .layer-item {
    padding: var(--space-2) var(--space-2);
    border-radius: 0;
    background: transparent;
}

#sidebar .layer-group-header {
    align-items: center;
    background: var(--vscode-current-line);
    border-color: var(--vscode-panel-border-strong);
    border-radius: 0;
    min-height: var(--token-unit-32px);
    padding: 0 var(--space-3);
}

#sidebar .layer-group-header-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
}

#sidebar .layer-group-copy {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

#sidebar .layer-group-name {
    font-size: var(--font-sm);
    font-weight: 800;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--shell-menu-fg);
}

#sidebar .layer-sub {
    margin-left: 0;
    padding-left: var(--space-4);
    border-radius: var(--vscode-panel-radius);
    background: var(--shell-surface-soft-03);
}

#sidebar .metrics-summary-strip {
    gap: var(--space-1);
}

#sidebar .metrics-summary-item {
    padding: var(--space-2);
    border-radius: var(--vscode-panel-radius);
}

#sidebar .metrics-summary-item strong {
    font-size: var(--font-md);
}

#sidebar .request-toolbar,
#sidebar .vehicle-toolbar {
    min-width: 0;
}

#sidebar .request-filters,
#sidebar .vehicle-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-width: 0;
}

#sidebar .request-filters .btn,
#sidebar .vehicle-filters .btn {
    min-height: var(--token-unit-26px);
    padding: 0 var(--space-2);
    border-radius: var(--vscode-panel-radius);
}

#sidebar .request-item > summary,
#sidebar .vehicle-item > summary {
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    overflow: hidden;
}

#sidebar .request-item > summary::after,
#sidebar .vehicle-item > summary::after {
    margin-left: var(--space-2);
    align-self: center;
}

#sidebar .request-dot,
#sidebar .vehicle-dot {
    align-self: center;
}

#sidebar .request-title,
#sidebar .vehicle-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    line-height: var(--line-height-snug);
}

#sidebar .request-badge,
#sidebar .vehicle-badge {
    margin-left: auto;
    max-width: var(--token-unit-180px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: center;
    border-radius: var(--vscode-panel-radius);
}

#sidebar .request-details,
#sidebar .vehicle-details {
    padding: var(--space-2) var(--space-3) var(--space-3);
    overflow-wrap: anywhere;
}

#sidebar .request-kv,
#sidebar .vehicle-kv {
    grid-template-columns: minmax(var(--token-unit-92px), 1fr) minmax(0, 1.4fr);
    gap: var(--space-1) var(--space-2);
}

#sidebar .dock-chart {
    padding: 0;
    background: var(--vscode-panel-bg);
}

#sidebar .chart-chrome,
.floating-chart-header {
    min-height: var(--token-unit-32px);
    padding: 0 var(--space-2);
    border-radius: 0;
    background: var(--vscode-titlebar-bg);
    border: 0;
    border-bottom: var(--border-width-thin) solid var(--vscode-panel-border);
}

#sidebar .chart-host,
.floating-chart-body {
    border-radius: 0;
    border: 0;
    background: var(--vscode-panel-muted);
}

.floating-chart-window {
    border-radius: var(--vscode-panel-radius);
}


#dockPanel.collapsed .dock-status-bar {
    display: none;
}

:root[data-theme="light"] #dockPanel,
:root[data-theme="light"] #sidebar .dock-toolbar,
:root[data-theme="light"] .hud-pill-group-slim,
:root[data-theme="light"] #sidebar .dock-session-strip,
:root[data-theme="light"] #sidebar .workspace-header,
:root[data-theme="light"] #sidebar .chart-chrome,
:root[data-theme="light"] .floating-chart-header {
    background: var(--surface-raised);
}


:root[data-theme="light"] #sidebar .workspace-tab,
:root[data-theme="light"] #sidebar .workspace-tab.active,
:root[data-theme="light"] #sidebar .workspace-rail-btn:hover,
:root[data-theme="light"] #sidebar .workspace-rail-btn.active,
:root[data-theme="light"] #sidebar .overview-card,
:root[data-theme="light"] #sidebar .monitor-list-card,
:root[data-theme="light"] #sidebar .stat-card,
:root[data-theme="light"] #sidebar .import-card,
:root[data-theme="light"] #sidebar .lf-card,
:root[data-theme="light"] #sidebar .request-item,
:root[data-theme="light"] #sidebar .vehicle-item,
:root[data-theme="light"] #sidebar .overview-accordion > summary,
:root[data-theme="light"] #sidebar .panel-accordion > summary,
:root[data-theme="light"] #sidebar .lf-group-summary,
:root[data-theme="light"] #sidebar .layer-group-header,
:root[data-theme="light"] #sidebar .toolbar-btn:hover,
:root[data-theme="light"] #sidebar .toolbar-btn.active {
    background: var(--token-color-f8f9fa);
}


@media (max-width: 900px) {
    .hud-pill-slim {
        padding-right: var(--space-2);
        padding-left: var(--space-2);
    }

    #sidebar .dock-toolbar {
        padding-right: var(--space-1);
        padding-left: var(--space-1);
    }

    #sidebar .workspace-heading {
        flex: 1 1 auto;
    }

    #sidebar .workspace-tabs {
        width: 100%;
    }

    #sidebar .control-section-meta {
        flex-basis: 100%;
        text-align: left;
    }

    #sidebar .request-badge,
    #sidebar .vehicle-badge {
        max-width: var(--token-unit-120px);
    }

    #sidebar .request-kv,
    #sidebar .vehicle-kv,
    #sidebar .lf-row {
        grid-template-columns: 1fr;
    }

    #sidebar .dock-status-bar {
        flex-wrap: wrap;
        padding-top: var(--space-1);
        padding-bottom: var(--space-1);
    }

    #sidebar .dock-status-left,
    #sidebar .dock-status-right {
        width: 100%;
    }

    #sidebar .dock-status-right {
        margin-left: 0;
    }

    .floating-chart-window {
        left: var(--token-unit-50pct) !important;
        top: var(--token-unit-50pct) !important;
        width: min(var(--token-unit-92vw), var(--token-unit-760px)) !important;
        height: min(var(--token-unit-62vh), var(--token-unit-480px)) !important;
        transform: var(--shell-floating-modal-hidden-transform);
    }

    .floating-chart-window.is-visible {
        transform: var(--shell-floating-modal-visible-transform);
    }

    .floating-chart-header {
        cursor: default;
    }

    .floating-chart-resize {
        display: none;
    }
}

:root {
    --token-unit-640px: 640px;
    --token-unit-304px: 304px;
    --token-unit-320px: 320px;
    --token-unit-34vh: 34vh;
    --token-unit-38vh: 38vh;
    --shell-sidebar-width-vscode: var(--token-unit-320px);
    --shell-menu-fg: var(--text-primary);
    --shell-menu-muted: var(--text-secondary);
    --shell-menu-subtle: var(--vscode-heading-muted);
    --shell-menu-bg: var(--surface-raised);
    --shell-menu-bg-muted: var(--vscode-panel-muted);
    --shell-menu-border: var(--vscode-panel-border);
    --shell-menu-border-strong: var(--vscode-panel-border-strong);
    --shell-menu-hover-bg: var(--vscode-current-line);
    --shell-menu-active-bg: rgba(var(--raw-cyan), 0.16);
    --shell-menu-active-border: rgba(var(--raw-cyan), 0.28);
    --shell-menu-focus-ring: rgba(var(--raw-cyan), 0.26);
    --shell-titlebar-bg-strong: var(--vscode-titlebar-bg);
    --shell-titlebar-border: var(--vscode-panel-border-strong);
    --shell-status-item-border: rgba(var(--raw-fg), 0.10);
    --shell-floating-z: 96;
}

:root[data-theme="light"] {
    --shell-menu-fg: var(--text-primary);
    --shell-menu-muted: var(--text-secondary);
    --shell-menu-subtle: var(--text-muted);
    --shell-menu-bg: var(--surface-raised);
    --shell-menu-bg-muted: var(--token-color-f8f9fa);
    --shell-menu-border: rgba(33, 37, 41, 0.10);
    --shell-menu-border-strong: rgba(33, 37, 41, 0.18);
    --shell-menu-hover-bg: var(--token-color-f1f3f5);
    --shell-menu-active-bg: rgba(11, 114, 133, 0.10);
    --shell-menu-active-border: rgba(11, 114, 133, 0.20);
    --shell-menu-focus-ring: rgba(11, 114, 133, 0.18);
    --shell-titlebar-bg-strong: var(--surface-raised);
    --shell-titlebar-border: rgba(33, 37, 41, 0.12);
    --shell-status-item-border: rgba(255, 255, 255, 0.18);
}

.app-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: calc(var(--token-unit-32px) + var(--space-2));
    padding: 0 var(--space-3);
    background: var(--shell-titlebar-bg-strong);
    border-bottom: var(--border-width-thin) solid var(--shell-titlebar-border);
    color: var(--shell-menu-fg);
    backdrop-filter: blur(var(--space-2));
}

.app-titlebar-brand,
.app-titlebar-right {
    display: flex;
    align-items: center;
    min-width: 0;
}

.app-titlebar-brand {
    gap: var(--space-2);
}

.app-titlebar-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 var(--space-2);
}

.app-titlebar-app {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--shell-menu-fg);
}

.app-titlebar-product,
.app-titlebar-label {
    font-size: var(--font-xs);
    color: var(--shell-menu-subtle);
}

.app-titlebar-product,
.app-titlebar-context,
.app-titlebar-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-titlebar-context {
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    color: var(--shell-menu-fg);
}

.app-titlebar-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--token-unit-32px);
    min-width: 0;
    padding-left: var(--space-3);
    border-left: var(--border-width-thin) solid var(--shell-menu-border);
}

.app-titlebar-value {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    color: var(--shell-menu-fg);
}

#sidebar .dock-toolbar,
#sidebar .dock-session-strip,
#sidebar .workspace-tabs-bar,
#sidebar .workspace-header,
#sidebar .chart-chrome,
.floating-chart-header {
    background: var(--shell-titlebar-bg-strong);
    border-color: var(--shell-titlebar-border);
    color: var(--shell-menu-fg);
}

#sidebar .dock-toolbar,
#sidebar .dock-session-strip,
#sidebar .workspace-tabs-bar,
#sidebar .chart-chrome,
.floating-chart-header {
    backdrop-filter: blur(var(--space-2));
}


#sidebar .workspace-header-eyebrow,
#sidebar .workspace-context-label,
#sidebar .workspace-explorer-group-label,
#sidebar .workspace-sidebar-group > summary,
#sidebar .workspace-explorer-group > summary,
#sidebar .control-section-title {
    font-size: var(--font-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

#sidebar .workspace-header-eyebrow,
#sidebar .workspace-context-label,
#sidebar .control-section-title {
    color: var(--shell-menu-subtle);
}


#sidebar .workspace-explorer-summary,
#sidebar .workspace-context-value[data-kind="none"],
#sidebar .hint,
#sidebar .tw-minmax-text,
#sidebar .overview-inline-note,
#sidebar .ops-field > span,
#sidebar .form-label,
#sidebar .stat-label,
#sidebar .stat-meta,
#sidebar .monitor-list-title,
#sidebar .overview-card-title,
#sidebar .kpi-label,
#sidebar .chart-chrome-overline,
.floating-chart-overline {
    color: var(--shell-menu-muted);
}


#sidebar .workspace-tab,
#sidebar .workspace-rail-btn,
#sidebar .toolbar-btn,
#sidebar .workspace-explorer-item,
#sidebar .workspace-sidebar-group > summary,
#sidebar .workspace-explorer-group > summary,
#sidebar .btn-outline-light,
.floating-chart-window .toolbar-btn,
.dropdown-item {
    color: var(--shell-menu-fg);
}


#sidebar .workspace-tab i,
#sidebar .workspace-rail-btn i,
#sidebar .toolbar-btn i,
#sidebar .dock-status-item i,
.floating-chart-window .toolbar-btn i {
    color: var(--shell-menu-muted);
}


#sidebar .workspace-rail-btn:hover,
#sidebar .workspace-rail-btn.active,
#sidebar .toolbar-btn:hover,
#sidebar .toolbar-btn:focus-visible,
#sidebar .toolbar-btn.active,
.floating-chart-window .toolbar-btn:hover,
.floating-chart-window .toolbar-btn:focus-visible {
    background: var(--shell-menu-hover-bg);
    border-color: var(--shell-menu-border-strong);
}

#sidebar .toolbar-btn,
.floating-chart-window .toolbar-btn {
    border: var(--border-width-thin) solid transparent;
}


#sidebar .session-cluster,
#sidebar .metrics-summary-item,
#sidebar .overview-card,
#sidebar .monitor-list-card,
#sidebar .stat-card,
#sidebar .import-card,
#sidebar .lf-card,
#sidebar .request-item,
#sidebar .vehicle-item,
#sidebar .overview-accordion,
#sidebar .panel-accordion {
    background: var(--shell-menu-bg-muted);
    border-color: var(--shell-menu-border-strong);
    color: var(--shell-menu-fg);
}


#sidebar .monitor-kpi-chip {
    background: var(--shell-menu-bg-muted);
    border: var(--border-width-thin) solid var(--shell-menu-border-strong);
    color: var(--shell-menu-fg);
}

#sidebar .monitor-kpi-chip .kpi-value,
#sidebar .metrics-summary-item strong,
#sidebar .stat-value,
#sidebar .chart-chrome-title,
.floating-chart-title {
    color: var(--shell-menu-fg);
}

#sidebar .overview-accordion > summary,
#sidebar .panel-accordion > summary,
#sidebar .lf-group-summary,
#sidebar .layer-group-header {
    color: var(--shell-menu-fg);
    background: var(--shell-menu-bg);
    border-bottom-color: var(--shell-menu-border);
}

#sidebar .btn-outline-light,
.floating-chart-window .btn-outline-light {
    --bs-btn-color: var(--shell-menu-fg);
    --bs-btn-border-color: var(--shell-menu-border-strong);
    --bs-btn-hover-color: var(--shell-menu-fg);
    --bs-btn-hover-bg: var(--shell-menu-hover-bg);
    --bs-btn-hover-border-color: var(--shell-menu-border-strong);
    --bs-btn-focus-shadow-rgb: var(--raw-cyan);
    --bs-btn-active-color: var(--shell-menu-fg);
    --bs-btn-active-bg: var(--shell-menu-active-bg);
    --bs-btn-active-border-color: var(--shell-menu-active-border);
    --bs-btn-disabled-color: var(--text-disabled);
    --bs-btn-disabled-border-color: var(--shell-menu-border);
}

#sidebar .form-select,
#sidebar .form-select-sm,
#sidebar .form-control,
#sidebar .form-control-sm,
.dropdown-menu {
    background: var(--shell-menu-bg);
    color: var(--shell-menu-fg);
    border-color: var(--shell-menu-border-strong);
}

#sidebar select option,
#sidebar select optgroup {
    background-color: var(--shell-menu-bg);
    color: var(--shell-menu-fg);
}

#sidebar .form-select,
#sidebar .form-control {
    box-shadow: none;
}

#sidebar .form-select:focus,
#sidebar .form-select-sm:focus,
#sidebar .form-control:focus,
#sidebar .form-control-sm:focus {
    border-color: var(--shell-menu-active-border);
    box-shadow: 0 0 0 var(--border-width-medium) var(--shell-menu-focus-ring);
}

#sidebar .form-select::placeholder,
#sidebar .form-control::placeholder {
    color: var(--shell-menu-subtle);
}

.dropdown-menu {
    border: var(--border-width-thin) solid var(--shell-menu-border-strong);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--shell-menu-hover-bg);
    color: var(--shell-menu-fg);
}

#sidebar .table,
#sidebar .table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--shell-menu-fg);
    --bs-table-border-color: var(--shell-menu-border);
    --bs-table-striped-color: var(--shell-menu-fg);
    --bs-table-hover-color: var(--shell-menu-fg);
    color: var(--shell-menu-fg);
}

#sidebar .table thead th {
    color: var(--shell-menu-subtle);
}


#sidebar .floating-chart-window,
.floating-chart-window {
    padding: 0;
    gap: 0;
    border-radius: var(--radius-md);
    background: var(--shell-menu-bg);
    border: var(--border-width-thin) solid var(--shell-menu-border-strong);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    z-index: var(--shell-floating-z);
}

#sidebar .chart-host,
.floating-chart-body {
    background: var(--vscode-panel-bg);
}

.chart-legend-strip {
    background: var(--shell-menu-bg);
    border-bottom-color: var(--shell-menu-border);
}

.chart-legend-item,
.chart-legend-label {
    color: var(--shell-menu-fg);
}

.chart-legend-strip[hidden] {
    display: none !important;
}

.chart-legend-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-gutter: stable;
}

.chart-legend-item {
    flex: 0 0 auto;
    white-space: nowrap;
}

.floating-chart-resize {
    background: var(--shell-menu-hover-bg);
    border: var(--border-width-thin) solid var(--shell-menu-border-strong);
}

@media (max-width: 900px) {
    .app-titlebar {
        padding-right: var(--space-2);
        padding-left: var(--space-2);
    }

    .app-titlebar-product,
    .app-titlebar-label {
        display: none;
    }

    .app-titlebar-center {
        justify-content: flex-start;
    }

    #sidebar .workspace-content-shell {
        flex-direction: column;
    }

    #sidebar .workspace-sidebar {
        width: 100%;
        flex-basis: auto;
        border-right: 0;
        border-bottom: var(--border-width-thin) solid var(--shell-menu-border);
    }

    #sidebar .dock-status-item {
        border-right: 0;
    }
}

@media (max-width: 640px) {
    .app-titlebar {
        gap: var(--space-2);
    }

    .app-titlebar-center {
        display: none;
    }

    #sidebar .workspace-sidebar {
        padding: var(--space-2);
    }

    .floating-chart-window {
        left: var(--token-unit-50pct) !important;
        top: var(--token-unit-50pct) !important;
        width: min(var(--token-unit-92vw), var(--token-unit-760px)) !important;
        height: min(var(--token-unit-62vh), var(--token-unit-480px)) !important;
    }
}


/* Active section styling (display is handled by data-view selectors) */

#sidebar .control-section-header {
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(var(--space-2));
    background: var(--shell-titlebar-bg-strong);
}

#sidebar .control-section-body {
    gap: var(--space-3);
}

#sidebar .request-toolbar,
#sidebar .vehicle-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0;
    padding: var(--space-2);
    border: var(--border-width-thin) solid var(--shell-menu-border);
    border-radius: var(--radius-sm);
    background: var(--shell-menu-bg);
}

#sidebar .request-toolbar,
#sidebar .vehicle-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

#sidebar .request-list,
#sidebar .vehicle-list,
#sidebar .monitor-list {
    max-height: var(--token-unit-34vh);
    overflow: auto;
    padding-right: var(--space-1);
}

#sidebar .monitor-control-panel .monitor-list,
#sidebar .monitor-control-panel .monitor-attention-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

#section-requests .request-list,
#section-vehicles .vehicle-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.selected-entity-panel {
    flex: 1 1 auto;
    min-height: 0;
}

.selected-entity-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: inset 3px 0 0 var(--selected-accent);
}

.selected-entity-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.selected-entity-kicker {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-subtle);
}

.selected-entity-title {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.selected-entity-badge {
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-2);
    background: color-mix(in srgb, var(--selected-accent) 18%, transparent);
    color: var(--text-primary);
    font-size: var(--font-xs);
    white-space: nowrap;
}

.selected-entity-kv {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
}

.analysis-kv-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

.selected-entity-kv .k,
.analysis-kv-key {
    color: var(--text-subtle);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.selected-entity-kv .v,
.analysis-kv-value {
    color: var(--text-primary);
}

.selected-entity-kv > .k,
.selected-entity-kv > .v {
    display: block;
}

.analysis-kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.analysis-kv-row:last-child {
    border-bottom: 0;
}

.selected-entity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

#sidebar .request-item > summary,
#sidebar .vehicle-item > summary {
    padding: var(--space-2) var(--space-3);
}

#sidebar .request-details,
#sidebar .vehicle-details {
    padding: 0 var(--space-3) var(--space-3);
}

@media (max-width: 900px) {
    #sidebar .workspace-explorer-nav,
    #sidebar .request-list,
    #sidebar .vehicle-list,
    #sidebar .monitor-list {
        max-height: none;
    }
}


#sidebar .workspace-tabs-bar,
#sidebar .control-section-header,
#sidebar .request-toolbar,
#sidebar .vehicle-toolbar {
    position: static;
    top: auto;
}

#sidebar .request-toolbar,
#sidebar .vehicle-toolbar {
    margin: 0;
}


#sidebar .workspace-tab i,
#sidebar .workspace-explorer-group-icon,
#sidebar .workspace-explorer-icon,
#sidebar .accordion-summary-leading,
#sidebar .lf-group-leading {
    width: var(--token-unit-18px);
    min-width: var(--token-unit-18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vscode-activity-active);
}


/* Padding handled by vscode-section-pad tokens at line ~4076 */

#sidebar .monitor-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    align-items: stretch;
}

#sidebar .monitor-kpi-chip {
    min-height: var(--token-unit-78px);
    padding: var(--space-2);
    display: grid;
    grid-template-rows: auto auto;
    gap: var(--space-1);
    align-content: start;
}

#sidebar .monitor-kpi-chip .kpi-footer {
    min-width: 0;
}

#sidebar .monitor-kpi-chip .kpi-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sidebar .monitor-control-panel .panel-accordion-body {
    gap: var(--space-2);
}

#sidebar .monitor-kpi-section {
    gap: var(--space-1);
}

#sidebar .monitor-service-grid {
    grid-template-columns: 1fr;
}

#sidebar .stat-fleet-vehicle-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}

#sidebar .stat-fleet-vehicle-toolbar .instances-pane-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: flex-end;
}

#sidebar #statFleetVehiclePager {
    min-width: var(--token-unit-88px);
    text-align: center;
}

#sidebar #statFleetVehicleMeta {
    margin-bottom: var(--space-2);
}

#sidebar .request-filters,
#sidebar .vehicle-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

#sidebar .request-item > summary,
#sidebar .vehicle-item > summary {
    gap: var(--space-3);
    padding: var(--space-3);
}

#sidebar .request-details,
#sidebar .vehicle-details {
    padding: 0 var(--space-3) var(--space-4);
}

#sidebar {
    --sidebar-list-gap: var(--space-1);
    --sidebar-list-row-gap: var(--space-2);
    --sidebar-list-row-pad-y: var(--token-unit-7px);
    --sidebar-list-row-pad-x: var(--space-2);
    --sidebar-list-detail-top: var(--space-1);
    --sidebar-list-detail-inline: var(--space-2);
    --sidebar-list-detail-bottom: var(--space-2);
    --sidebar-list-badge-font-size: var(--font-xs);
    --sidebar-list-badge-pad-y: var(--token-unit-3px);
    --sidebar-list-badge-pad-x: var(--token-unit-7px);
    --sidebar-list-item-radius: var(--radius-sm);
    --sidebar-list-min-height: var(--token-unit-34px);
    --sidebar-list-secondary-gap: var(--token-unit-3px);
}

#sidebar[data-density="compact"] {
    --sidebar-list-row-pad-y: var(--token-unit-5px);
    --sidebar-list-detail-top: var(--token-unit-3px);
    --sidebar-list-min-height: var(--token-unit-30px);
}

#sidebar[data-density="spacious"] {
    --sidebar-list-gap: var(--space-2);
    --sidebar-list-row-gap: var(--space-3);
    --sidebar-list-row-pad-y: var(--space-2);
    --sidebar-list-row-pad-x: var(--space-3);
    --sidebar-list-detail-top: var(--space-2);
    --sidebar-list-detail-inline: var(--space-3);
    --sidebar-list-detail-bottom: var(--space-3);
    --sidebar-list-badge-font-size: var(--font-sm);
    --sidebar-list-min-height: var(--token-unit-42px);
    --sidebar-list-secondary-gap: var(--space-1);
}

#sidebar .request-list,
#sidebar .vehicle-list,
#sidebar .monitor-list {
    gap: var(--sidebar-list-gap);
}

#sidebar .request-item,
#sidebar .vehicle-item,
#sidebar .monitor-list-item,
#sidebar .layer-item {
    border-radius: var(--sidebar-list-item-radius);
}

#sidebar .layer-group-header {
    border-radius: 0;
}

#sidebar .request-item > summary,
#sidebar .vehicle-item > summary {
    align-items: center;
    gap: var(--sidebar-list-row-gap);
    padding: var(--sidebar-list-row-pad-y) var(--sidebar-list-row-pad-x);
}

#sidebar .request-title,
#sidebar .vehicle-title {
    -webkit-line-clamp: 1;
    line-height: var(--line-height-normal);
}

#sidebar .request-badge,
#sidebar .vehicle-badge {
    font-size: var(--sidebar-list-badge-font-size);
    padding: var(--sidebar-list-badge-pad-y) var(--sidebar-list-badge-pad-x);
}

#sidebar .request-details,
#sidebar .vehicle-details {
    padding: var(--sidebar-list-detail-top) var(--sidebar-list-detail-inline) var(--sidebar-list-detail-bottom);
}

#sidebar .request-kv,
#sidebar .vehicle-kv {
    gap: var(--sidebar-list-secondary-gap) var(--space-2);
}

#sidebar .monitor-list-item {
    min-height: var(--sidebar-list-min-height);
    padding: var(--sidebar-list-row-pad-y) var(--sidebar-list-row-pad-x);
    gap: var(--sidebar-list-row-gap);
}

#sidebar .monitor-list-item .item-title {
    line-height: var(--line-height-snug);
}

#sidebar .monitor-list-item .item-meta {
    line-height: var(--line-height-snug);
}

#sidebar .layer-item {
    padding: var(--sidebar-list-row-pad-y) var(--sidebar-list-row-pad-x);
}

#sidebar .layer-chip {
    padding: 0;
}

/* ── Playground ── */

.pg-scenario-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    max-height: min(var(--token-unit-55vh), var(--token-unit-540px));
    overflow-y: auto;
    padding-right: var(--space-1);
}

.pg-scenario-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-1) var(--space-2);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken-deep);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition-view);
}

.pg-scenario-card:hover {
    border-color: var(--token-color-rgba-139-233-253-0-50);
}

.pg-scenario-card.active {
    border-left: var(--token-unit-3px) solid var(--accent-success);
    background: var(--token-color-rgba-81-207-102-0-06);
}

.pg-scenario-card-title {
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
}

.pg-scenario-card-meta {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-top: var(--border-width-medium);
}

.pg-scenario-card-desc {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-top: var(--border-width-medium);
}

.pg-editor-table {
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    margin-bottom: var(--space-2);
    font-size: var(--font-base);
}

.pg-editor-table table {
    width: 100%;
    border-collapse: collapse;
}

.pg-editor-table th {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    padding: var(--token-unit-3px) var(--space-1);
    border-bottom: var(--border-width-thin) solid var(--border-default);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.pg-editor-table td {
    padding: var(--border-width-medium) var(--space-1);
    white-space: nowrap;
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
    vertical-align: middle;
}

.pg-editor-table tr {
    cursor: pointer;
    transition: background var(--transition-view);
}

.pg-editor-table tr:hover {
    background: var(--token-color-rgba-139-233-253-0-05);
}

/* Row type colors */
.pg-editor-table tr.pg-row-pickup {
    border-left: 3px solid rgba(var(--raw-green), 0.55);
}
.pg-editor-table tr.pg-row-dropoff {
    border-left: 3px solid rgba(var(--raw-cyan), 0.55);
}
.pg-editor-table tr.pg-row-depot {
    border-left: 3px solid rgba(var(--raw-orange), 0.35);
}

.pg-editor-table tr.pg-row-selected {
    background: rgba(var(--raw-purple), 0.14);
}

/* Pair highlight: the PU↔DO counterpart of the selected row */
.pg-editor-table tr.pg-row-pair {
    background: rgba(var(--raw-yellow), 0.12);
    outline: 1px dashed rgba(var(--raw-yellow), 0.45);
    outline-offset: -1px;
}

.pg-editor-table tr.pg-row-error {
    background: rgba(var(--raw-red), 0.08);
    box-shadow: inset 3px 0 0 rgba(var(--raw-red), 0.65);
}

.pg-editor-table tr.pg-row-warning {
    background: rgba(var(--raw-orange), 0.08);
    box-shadow: inset 3px 0 0 rgba(var(--raw-orange), 0.55);
}

.pg-editor-table input,
.pg-editor-table select {
    font-size: var(--font-sm);
    padding: var(--border-width-thin) var(--token-unit-3px);
    background: transparent;
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--token-unit-3px);
    color: inherit;
    width: 100%;
    min-width: 0;
}

.pg-editor-table input:focus,
.pg-editor-table select:focus {
    border-color: var(--token-color-rgba-139-233-253-0-50);
    outline: none;
}

.pg-editor-table .pg-col-seq { width: var(--token-unit-28px); text-align: center; }
.pg-editor-table .pg-col-node { min-width: calc(var(--token-unit-72px) + var(--token-unit-18px)); }
.pg-editor-table .pg-col-type { min-width: calc(var(--token-unit-72px) + var(--space-2)); }
.pg-editor-table .pg-col-req { min-width: calc(var(--token-unit-36px) + var(--token-unit-14px)); }
.pg-editor-table .pg-col-load { width: calc(var(--token-unit-72px) + var(--token-unit-18px)); }
.pg-editor-table .pg-col-time { width: calc(var(--token-unit-72px) + var(--space-2)); }
.pg-editor-table .pg-col-name { min-width: calc(var(--token-unit-72px) + var(--token-unit-18px)); }

/* Load progression cell */
.pg-load-cell {
    display: flex;
    align-items: center;
    gap: var(--token-unit-3px);
}

.pg-load-cell input {
    width: var(--token-unit-36px);
    text-align: right;
}

.pg-load-delta {
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    min-width: var(--token-unit-22px);
    text-align: right;
}

.pg-load-delta.pg-load-up {
    color: rgb(var(--raw-green));
}

.pg-load-delta.pg-load-down {
    color: rgb(var(--raw-cyan));
}

.pg-load-bar {
    height: var(--token-unit-3px);
    margin-top: var(--border-width-thin);
    border-radius: var(--token-unit-3px);
    background: var(--border-subtle);
    position: relative;
    overflow: hidden;
}

.pg-load-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--load-pct, 0%);
    border-radius: var(--token-unit-3px);
    background: rgba(var(--raw-green), 0.55);
    transition: width var(--transition-view);
}

.pg-load-bar.pg-load-over::after {
    background: var(--status-critical);
}

/* Locked (read-only) cells for request-linked stops */
.pg-cell-locked {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    user-select: none;
}

/* Type badges for PU / DO */
.pg-type-badge {
    display: inline-block;
    padding: 0 var(--space-1);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--token-unit-3px);
    letter-spacing: var(--tracking-wide);
}
.pg-type-badge.pg-type-pickup {
    background: rgba(var(--raw-green), 0.16);
    color: rgb(var(--raw-green));
}
.pg-type-badge.pg-type-dropoff {
    background: rgba(var(--raw-cyan), 0.16);
    color: rgb(var(--raw-cyan));
}

/* Node name hint */
.pg-node-name {
    color: var(--text-muted);
    font-size: var(--font-xs);
    margin-left: var(--space-1);
}

.pg-node-input-stack {
    display: grid;
    gap: var(--border-width-medium);
}

.pg-node-inline-name {
    color: var(--text-muted);
    font-size: var(--font-xs);
    line-height: 1.2;
}

/* Request selection toggle (checkbox icon) */
.pg-col-sel {
    cursor: pointer;
    color: var(--text-disabled);
    user-select: none;
    flex-shrink: 0;
}
.pg-col-sel:hover { color: var(--text-secondary); }
.pg-row-selected .pg-col-sel { color: rgb(var(--raw-purple)); }

/* Request card layout */
.pg-req-card {
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--token-unit-3px);
    padding: var(--space-1);
    margin-bottom: var(--space-1);
    background: var(--surface-soft);
    transition: background var(--transition-view);
}
.pg-req-card:hover { background: var(--token-color-rgba-139-233-253-0-05); }
.pg-req-card.pg-row-selected {
    background: rgba(var(--raw-purple), 0.10);
    border-color: rgba(var(--raw-purple), 0.35);
}

.pg-req-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}
.pg-req-id-input {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    padding: var(--border-width-thin) var(--token-unit-3px);
    background: transparent;
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--token-unit-3px);
    color: inherit;
    width: calc(var(--space-1) * 15);
    min-width: 0;
}
.pg-req-id-input:focus {
    border-color: var(--token-color-rgba-139-233-253-0-50);
    outline: none;
}

.pg-req-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.pg-req-field {
    display: flex;
    flex-direction: column;
    gap: var(--border-width-medium);
}
.pg-req-field label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.pg-req-field input,
.pg-req-field select {
    font-size: var(--font-sm);
    padding: var(--border-width-thin) var(--token-unit-3px);
    background: transparent;
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--token-unit-3px);
    color: inherit;
    min-width: 0;
}
.pg-req-field input:focus,
.pg-req-field select:focus {
    border-color: var(--token-color-rgba-139-233-253-0-50);
    outline: none;
}
.pg-req-field-wide { flex: 1; min-width: calc(var(--space-1) * 25); }
.pg-req-field-wide select { width: 100%; }

/* Request placement status badges */
.pg-req-status {
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide);
    margin-left: auto;
    flex-shrink: 0;
}
.pg-req-unplaced { color: var(--text-disabled); }
.pg-req-partial { color: rgb(var(--raw-orange)); }
.pg-req-complete { color: rgb(var(--raw-green)); }

/* Request list container */
.pg-req-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Node name hint below selects */
.pg-node-name {
    font-size: var(--font-xs);
    color: var(--text-muted);
    padding-top: var(--border-width-thin);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-dirty-badge {
    display: inline-block;
    padding: 0 var(--space-1);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--token-unit-3px);
    background: var(--token-color-rgba-255-184-108-0-16);
    color: rgb(var(--raw-orange));
    margin-left: var(--space-1);
}

/* Add-stop row: dropdown + button side by side */
.pg-add-stop-row {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}
.pg-add-stop-row select { flex: 1; min-width: 0; }
.pg-add-stop-row button { flex-shrink: 0; }

/* Drag handle */
.pg-drag-handle {
    cursor: grab;
    color: var(--text-disabled);
    user-select: none;
}
.pg-drag-handle:hover { color: var(--text-secondary); }

/* Drag-and-drop indicators */
.pg-editor-table tr.pg-row-dragging {
    opacity: 0.4;
}
.pg-editor-table tr.pg-drop-above {
    box-shadow: inset 0 2px 0 0 rgb(var(--raw-purple));
}
.pg-editor-table tr.pg-drop-below {
    box-shadow: inset 0 -2px 0 0 rgb(var(--raw-purple));
}

#sidebar[data-context="instances"] {
    max-width: calc(100vw - var(--activity-bar-width) - var(--space-3));
}

#sidebar[data-context="instances"] .sidebar-header {
    padding-bottom: 0;
}

#sidebarBody[data-context="instances"] .control-section-body {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: linear-gradient(180deg, var(--surface-soft), var(--interactive-active));
    box-shadow: inset 0 var(--border-width-thin) 0 var(--surface-soft);
}

.instances-explorer-shell {
    display: grid;
    grid-template-rows: auto auto minmax(var(--sidebar-library-tree-min-height), 1fr) minmax(0, var(--sidebar-library-detail-max-height));
    gap: var(--space-2);
    min-height: 0;
    height: 100%;
}

.instances-explorer-header,
.instances-explorer-header-actions,
.instances-lineage-breadcrumb {
    display: grid;
    gap: var(--space-1);
}

.instances-explorer-header {
    display: grid;
    align-items: start;
    gap: var(--space-2);
    min-width: 0;
}

.instances-lineage-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-1) 0;
}

.instances-lineage-segment {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
}

.instances-lineage-segment.is-empty {
    color: var(--text-disabled);
}

.instances-lineage-separator {
    color: var(--text-disabled);
}

.instances-explorer-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.instances-explorer-toolbar-caption {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.instances-explorer-toolbar {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(var(--raw-white), 0.02), rgba(var(--raw-white), 0.01));
}

.instances-explorer-toolbar-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
    align-items: center;
}

.instances-explorer-toolbar-main > #instancesLibrarySearch {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
}

.instances-explorer-toolbar-main > .btn {
    min-width: 0;
    width: 100%;
    white-space: nowrap;
}

.instances-explorer-flow {
    margin: 0;
    line-height: 1.45;
}

.instances-explorer-tree,
.instances-explorer-detail-panel {
    min-height: 0;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: linear-gradient(180deg, var(--surface-soft), var(--interactive-active));
}

.instances-explorer-tree {
    overflow: auto;
    font-size: var(--font-sm);
}

.instances-library-board {
    display: grid;
    align-content: start;
    gap: var(--space-2);
}

.instances-library-section {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid rgba(var(--raw-white), 0.05);
    background: rgba(var(--raw-black), 0.08);
}

.instances-library-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.instances-library-section-copy {
    min-width: 0;
    display: grid;
    gap: var(--border-width-medium);
}

.instances-library-section-step {
    font-size: var(--font-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-disabled);
}

.instances-library-section-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.instances-library-section-title {
    margin: 0;
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.instances-library-section-count {
    display: inline-flex;
    align-items: center;
    min-height: var(--token-unit-22px);
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: rgba(var(--raw-white), 0.08);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-medium);
}

.instances-library-section-meta {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: 1.45;
}

.instances-library-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.instances-library-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--token-unit-220px), 1fr));
    gap: var(--space-1);
}

.instances-library-card {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: rgba(var(--raw-white), 0.03);
    transition: border-color var(--transition-view), background var(--transition-view), transform var(--transition-view);
}

.instances-library-card:hover {
    border-color: rgba(var(--raw-cyan), 0.18);
    background: rgba(var(--raw-cyan), 0.06);
    transform: translateY(-1px);
}

.instances-library-card.is-selected {
    border-color: rgba(var(--raw-cyan), 0.28);
    background: rgba(var(--raw-cyan), 0.10);
}

.instances-library-card.is-linked {
    border-color: rgba(var(--raw-green), 0.24);
    box-shadow: inset 0 0 0 var(--border-width-thin) rgba(var(--raw-green), 0.16);
}

.instances-library-card-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.instances-library-card-kicker {
    font-size: var(--font-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-disabled);
}

.instances-library-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
}

.instances-library-card-title {
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.25;
}

.instances-library-card-meta {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: 1.45;
}

.instances-library-card-note {
    color: var(--text-subtle);
    font-size: var(--font-sm);
    line-height: 1.45;
}

.instances-library-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.instances-library-card-fact {
    display: inline-grid;
    gap: 0;
    min-width: var(--token-unit-68px);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: rgba(var(--raw-white), 0.05);
}

.instances-library-card-fact strong {
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-variant-numeric: tabular-nums;
}

.instances-library-card-fact span {
    color: var(--text-disabled);
    font-size: var(--font-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.instances-library-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding-top: var(--space-1);
    border-top: var(--border-width-thin) solid rgba(var(--raw-white), 0.06);
}

.instances-library-card-actions .btn {
    min-width: var(--token-unit-92px);
}

.instances-library-compare {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    color: var(--text-secondary);
    font-size: var(--font-xs);
}

.instances-library-compare input {
    margin: 0;
}

.instances-library-empty {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) dashed var(--border-subtle);
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}

.instances-tree-group {
    display: grid;
    gap: var(--border-width-medium);
    margin-left: calc(var(--space-2) + var(--space-1));
    padding-left: var(--space-1);
    border-left: var(--border-width-thin) solid var(--border-subtle);
}

.instances-tree-node + .instances-tree-node {
    margin-top: var(--border-width-medium);
}

.instances-tree-row {
    display: flex;
    align-items: stretch;
    gap: var(--border-width-medium);
}

.instances-tree-row.is-route-plan {
    display: grid;
    grid-template-columns: var(--token-unit-22px) minmax(0, 1fr) auto;
    align-items: start;
}

.instances-tree-row.is-ancestor .instances-tree-item {
    border-color: rgba(var(--raw-cyan), 0.12);
    background: rgba(var(--raw-cyan), 0.04);
}

.instances-tree-row.is-applied .instances-tree-item,
.instances-tree-row.is-active .instances-tree-item {
    border-color: rgba(var(--raw-cyan), 0.18);
    background: rgba(var(--raw-cyan), 0.06);
}

.instances-tree-row.is-applied .instances-tree-item-label i,
.instances-tree-row.is-active .instances-tree-item-label i {
    color: rgb(var(--raw-cyan));
}

.instances-tree-toggle {
    width: var(--token-unit-22px);
    min-width: var(--token-unit-22px);
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-disabled);
}

.instances-tree-toggle:hover {
    background: var(--interactive-hover);
    color: var(--text-secondary);
}

.instances-tree-toggle-placeholder {
    display: inline-flex;
}

.instances-tree-item {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.instances-tree-row.is-route-plan .instances-tree-item {
    align-items: flex-start;
    padding-block: var(--space-2);
    border-color: rgba(var(--raw-white), 0.06);
    background: rgba(var(--raw-white), 0.02);
}

.instances-tree-item:hover,
.instances-tree-row.is-selected .instances-tree-item,
.instances-tree-item.is-selected {
    background: rgba(var(--raw-cyan), 0.08);
    border-color: rgba(var(--raw-cyan), 0.18);
}

.instances-tree-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--border-width-medium);
    opacity: 0;
    pointer-events: none;
    transform: translateX(var(--border-width-medium));
    transition: opacity var(--transition-view), transform var(--transition-view);
}

.instances-tree-row:hover .instances-tree-actions,
.instances-tree-row:focus-within .instances-tree-actions,
.instances-tree-row.is-selected .instances-tree-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.instances-tree-actions.is-route-plan-actions {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    flex-shrink: 0;
    align-self: center;
}

.instances-tree-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--token-unit-28px);
    height: var(--token-unit-28px);
    border: var(--border-width-thin) solid rgba(var(--raw-white), 0.08);
    border-radius: var(--radius-sm);
    background: rgba(var(--raw-white), 0.03);
    color: var(--text-secondary);
}

.instances-tree-action:hover {
    color: var(--text-primary);
    border-color: rgba(var(--raw-cyan), 0.24);
    background: rgba(var(--raw-cyan), 0.10);
}

.instances-tree-action:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.instances-tree-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.instances-tree-item-main {
    min-width: 0;
    display: grid;
    gap: var(--border-width-medium);
    flex: 1;
}

.instances-tree-row.is-route-plan .instances-tree-item-main {
    gap: var(--space-1);
}

.instances-tree-item-header {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.instances-tree-route-plan-header .instances-tree-item-label {
    flex: 1;
}

.instances-tree-item[data-explorer-kind="service-area"],
.instances-tree-item[data-explorer-kind="archive-root"] {
    padding-block: var(--space-2);
}

.instances-tree-item[data-explorer-kind="asset-group"] {
    background: rgba(var(--raw-cyan), 0.03);
}

.instances-tree-item[data-explorer-kind="asset-group"] .instances-tree-item-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.instances-tree-node[data-depth="2"] .instances-tree-item,
.instances-tree-node[data-depth="3"] .instances-tree-item {
    padding-block: calc(var(--space-1) - var(--border-width-medium));
}

.instances-tree-node[data-depth="2"] .instances-tree-row.is-route-plan .instances-tree-item,
.instances-tree-node[data-depth="3"] .instances-tree-row.is-route-plan .instances-tree-item {
    padding-block: var(--space-2);
}

.instances-tree-node[data-depth="2"] .instances-tree-item-label,
.instances-tree-node[data-depth="3"] .instances-tree-item-label {
    font-size: var(--font-sm);
}

.instances-tree-node[data-depth="2"] .instances-tree-item-meta,
.instances-tree-node[data-depth="3"] .instances-tree-item-meta,
.instances-tree-node[data-depth="2"] .instances-tree-item-kpis,
.instances-tree-node[data-depth="3"] .instances-tree-item-kpis {
    font-size: var(--font-xs);
}

.instances-tree-item-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    font-size: var(--font-md);
    font-weight: var(--font-weight-medium);
}

.instances-tree-item-label i {
    color: var(--text-disabled);
}

.instances-tree-item-label span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.instances-tree-item-meta {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}

.instances-tree-route-plan-footer {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.instances-tree-route-plan-footer .instances-tree-item-kpis {
    margin-left: 0;
}

.instances-tree-route-plan-badges {
    min-width: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.instances-tree-route-plan-caret {
    margin-left: auto;
    color: var(--text-disabled);
    transition: transform var(--transition-view), color var(--transition-view);
}

.instances-tree-row.is-route-plan:hover .instances-tree-route-plan-caret,
.instances-tree-row.is-route-plan.is-selected .instances-tree-route-plan-caret,
.instances-tree-row.is-route-plan:focus-within .instances-tree-route-plan-caret {
    color: var(--text-secondary);
}

.instances-tree-row.is-route-plan.is-details-expanded .instances-tree-route-plan-caret {
    transform: rotate(var(--token-unit-180deg));
}

.instances-tree-route-plan-details {
    display: grid;
    gap: var(--border-width-medium);
    margin-top: var(--border-width-medium);
    margin-left: calc(var(--token-unit-22px) + var(--border-width-medium));
    padding: var(--space-1) var(--space-2) var(--space-2);
    border-left: var(--border-width-thin) solid rgba(var(--raw-cyan), 0.12);
}

.instances-tree-route-plan-detail-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(var(--token-unit-84px), auto) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-2);
}

.instances-tree-route-plan-detail-label {
    color: var(--text-disabled);
    font-size: var(--font-xxs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.instances-tree-route-plan-detail-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: var(--font-xs);
}

.instances-tree-item-dependencies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.instances-tree-dependency-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    padding: 0 calc(var(--space-1) + var(--border-width-thin));
    border: var(--border-width-thin) solid rgba(var(--raw-white), 0.08);
    border-radius: var(--radius-pill);
    background: rgba(var(--raw-white), 0.03);
    color: var(--text-secondary);
    font-size: var(--font-xxs);
    line-height: 1.6;
}

.instances-tree-dependency-chip-label {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-disabled);
}

.instances-tree-dependency-chip-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.instances-tree-dependency-chip.is-demand-data {
    border-color: rgba(var(--raw-cyan), 0.18);
}

.instances-tree-dependency-chip.is-demand-settings {
    border-color: rgba(var(--raw-green), 0.18);
}

.instances-tree-dependency-chip.is-operational-settings {
    border-color: rgba(var(--raw-orange), 0.18);
}

.instances-tree-dependency-chip.is-network-data {
    border-color: rgba(var(--raw-info), 0.18);
}

.instances-tree-item-kpis {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--token-unit-0-2px);
    flex-shrink: 0;
}

.instances-tree-actions.is-route-plan-actions .instances-tree-action[data-explorer-action="play-route-plan"],
.instances-tree-actions.is-route-plan-actions .instances-tree-action[data-explorer-action="play-template-route-plan"] {
    border-color: rgba(var(--raw-cyan), 0.18);
    background: rgba(var(--raw-cyan), 0.08);
    color: rgb(var(--raw-cyan));
}

.instances-tree-item-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    margin-left: auto;
}

.instances-tree-item-badges:empty {
    display: none;
}

.instances-tree-compare {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--token-unit-24px);
    height: var(--token-unit-24px);
}

.instances-tree-action-toggle {
    flex-shrink: 0;
}

.instances-tree-compare-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.instances-tree-compare-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: var(--border-width-thin) solid rgba(var(--raw-white), 0.08);
    border-radius: var(--radius-sm);
    background: rgba(var(--raw-white), 0.03);
    color: var(--text-secondary);
    transition: border-color var(--transition-view), background var(--transition-view), color var(--transition-view);
}

.instances-tree-compare:hover .instances-tree-compare-icon {
    color: var(--text-primary);
}

.instances-tree-compare-input:checked + .instances-tree-compare-icon {
    border-color: rgba(var(--raw-cyan), 0.24);
    background: rgba(var(--raw-cyan), 0.10);
    color: rgb(var(--raw-cyan));
}

.instances-tree-compare:focus-within .instances-tree-compare-icon {
    box-shadow: var(--focus-ring);
}

.instances-explorer-detail-stack {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: var(--space-2);
    min-height: 0;
    max-height: 100%;
    overflow: auto;
}

.instances-explorer-detail-panel {
    display: grid;
    gap: var(--space-2);
    overflow: hidden;
}

.instances-explorer-detail-panel[hidden] {
    display: none !important;
}

.instances-comparison-panel {
    display: grid;
    gap: var(--space-2);
    min-height: 0;
    padding: var(--space-2);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    overflow: hidden;
}

.instances-comparison-panel[hidden] {
    display: none !important;
}

.instances-comparison-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.instances-comparison-header > * {
    min-width: 0;
}

.instances-comparison-status {
    padding: var(--space-1) var(--space-2);
    border-left: var(--border-width-medium) solid rgb(var(--raw-cyan));
    background: rgba(var(--raw-cyan), 0.07);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    line-height: 1.4;
}

.instances-comparison-status[data-tone="warning"] {
    border-left-color: var(--status-warning);
    background: var(--status-warning-subtle);
    color: var(--text-primary);
}

.instances-comparison-table-wrap {
    min-width: 0;
    max-height: min(46vh, calc(var(--token-unit-400px) + var(--token-unit-20px)));
    overflow: auto;
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.instances-comparison-table {
    width: 100%;
    min-width: var(--token-unit-640px);
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-xs);
    font-variant-numeric: tabular-nums;
}

.instances-comparison-table th,
.instances-comparison-table td {
    min-width: var(--token-unit-140px);
    padding: var(--space-2);
    border-right: var(--border-width-thin) solid var(--border-subtle);
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
    text-align: right;
    vertical-align: top;
}

.instances-comparison-table th:first-child,
.instances-comparison-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: var(--token-unit-160px);
    text-align: left;
    background: var(--surface-app);
}

.instances-comparison-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-elevated);
    color: var(--text-primary);
}

.instances-comparison-table thead th:first-child {
    z-index: 3;
}

.instances-comparison-table tr:last-child td,
.instances-comparison-table tr:last-child th {
    border-bottom: 0;
}

.instances-comparison-table th:last-child,
.instances-comparison-table td:last-child {
    border-right: 0;
}

.instances-comparison-plan-heading {
    display: grid;
    gap: var(--border-width-medium);
    text-align: left;
}

.instances-comparison-plan-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-1);
}

.instances-comparison-plan-name {
    overflow-wrap: anywhere;
}

.instances-comparison-plan-meta,
.instances-comparison-metric-meta,
.instances-comparison-delta {
    color: var(--text-muted);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-normal);
}

.instances-comparison-delta {
    display: block;
    margin-top: var(--border-width-medium);
}

.instances-comparison-remove {
    flex: 0 0 var(--token-unit-24px);
    width: var(--token-unit-24px);
    height: var(--token-unit-24px);
}

.instances-comparison-baseline {
    color: rgb(var(--raw-cyan));
}

.instances-explorer-detail-header {
    display: grid;
    gap: var(--space-2);
}

.instances-explorer-detail-header > * {
    min-width: 0;
}

.instances-explorer-detail-panel .instances-pane-title {
    font-size: var(--font-xs);
}

.instances-explorer-detail-panel .instances-editor-title {
    font-size: var(--font-lg);
    line-height: 1.2;
}

.instances-explorer-detail-panel .instances-editor-meta {
    font-size: var(--font-sm);
}

.instances-explorer-detail-panel .instances-editor-state-badges,
.instances-explorer-detail-panel .instances-pane-actions {
    justify-content: flex-start;
}

.instances-explorer-detail-body,
.instances-explorer-detail-content {
    display: grid;
    gap: var(--space-2);
}

.instances-explorer-detail-body {
    min-height: 0;
    overflow: auto;
}

.instances-explorer-detail-kv {
    display: grid;
    gap: 0;
}

.instances-explorer-detail-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--token-unit-140px), 1fr));
    gap: var(--space-1);
    padding-top: var(--space-1);
    border-top: var(--border-width-thin) solid var(--border-subtle);
}

.instances-explorer-detail-actions .btn {
    width: 100%;
}

.instances-explorer-detail-content .import-diagnostics {
    margin-top: 0;
}

#instancesExplorerSelectionPanel {
    max-height: 100%;
}

#instancesExplorerImportPanel .panel-accordion-body {
    display: grid;
    gap: var(--space-2);
}

.instances-import-backdrop {
    position: fixed;
    inset: 0;
    z-index: 905;
    background: var(--token-color-rgba-0-0-0-0-35);
    opacity: 0;
    transition: opacity var(--transition-view);
}

.instances-import-backdrop.is-visible {
    opacity: 1;
}

.instances-import-backdrop[hidden] {
    display: none;
}

.instances-import-overlay {
    position: fixed;
    inset: var(--space-4);
    z-index: 906;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-view), transform var(--transition-view);
    transform: translateY(var(--space-2));
}

.instances-import-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.instances-import-overlay[hidden] {
    display: none;
}

.instances-import-wizard-panel {
    position: relative;
    width: min(calc(var(--token-unit-96px) * 9), 100%);
    height: min(calc(var(--token-unit-26px) * 30), 100%);
    min-width: min(calc(var(--token-unit-96px) * 6), 100%);
    min-height: min(calc(var(--token-unit-26px) * 16), 100%);
    max-height: 100%;
    overflow: auto;
    resize: both;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: 0 var(--space-3) var(--space-5) rgba(var(--raw-black), 0.28);
    background: linear-gradient(180deg, var(--surface-raised), color-mix(in srgb, var(--surface-app) 88%, var(--interactive-active)));
}

.instances-import-wizard-panel .instances-explorer-detail-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    position: sticky;
    top: calc(var(--space-4) * -1);
    z-index: 1;
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
    padding: var(--space-4);
    background: linear-gradient(180deg, var(--surface-raised), color-mix(in srgb, var(--surface-app) 88%, var(--interactive-active)));
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
}

.instances-import-wizard-panel .detail-panel-actions {
    justify-self: end;
}

.instances-import-wizard-panel.is-maximized,
.instances-import-wizard-panel.is-compact-layout {
    width: calc(100vw - var(--token-unit-48px));
    max-width: none;
    height: calc(100vh - var(--token-unit-48px));
    max-height: none;
    resize: none;
}

.instances-import-wizard-layout {
    display: grid;
    gap: var(--space-3);
}

.instances-import-wizard-grid,
.instances-import-name-grid {
    display: grid;
    gap: var(--space-3);
}

.instances-import-wizard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.instances-import-name-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.instances-import-section {
    min-width: 0;
}

.instances-import-overlay [hidden] {
    display: none !important;
}

.instances-import-source-list {
    display: grid;
    gap: var(--space-2);
}

.instances-import-source-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-app) 92%, var(--surface-raised));
}

.instances-import-source-header {
    display: grid;
    gap: var(--border-width-medium);
}

.instances-import-source-title {
    color: var(--text-primary);
    font-size: var(--font-base);
    font-weight: var(--font-weight-bold);
}

.instances-import-source-meta {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: 1.45;
}

.instances-import-source-grid {
    display: grid;
    grid-template-columns: minmax(var(--token-unit-120px), var(--token-unit-160px)) minmax(0, 1fr);
    gap: var(--space-2);
}

.instances-import-source-card.is-file-only .instances-import-source-grid {
    grid-template-columns: minmax(0, 1fr);
}

.instances-import-dependency-summary {
    display: grid;
    gap: var(--space-2);
}

.instances-import-dependency-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--token-unit-180px), 1fr));
    gap: var(--space-2);
}

.instances-import-dependency-card {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-app) 94%, var(--surface-raised));
}

.instances-import-dependency-card.is-empty {
    opacity: 0.88;
}

.instances-import-dependency-card-title {
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-disabled);
}

.instances-import-dependency-card-label {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.instances-import-dependency-card.is-empty .instances-import-dependency-card-label {
    color: var(--text-secondary);
}

.instances-import-dependency-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.instances-import-dependency-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--token-unit-22px);
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    line-height: 1.3;
}

.instances-import-wizard-panel .ops-field {
    font-size: var(--font-sm);
}

.instances-import-wizard-panel .checkbox-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-app) 94%, var(--surface-raised));
}

.instances-import-wizard-panel .ops-field > span {
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-disabled);
}

.instances-import-wizard-panel .checkbox-field > span {
    margin-bottom: 0;
}

.instances-import-wizard-panel .form-control,
.instances-import-wizard-panel .form-select {
    font-size: var(--font-sm);
    line-height: 1.45;
}

.instances-import-wizard-panel textarea.form-control {
    min-height: calc(var(--token-unit-18px) * 5);
    resize: vertical;
}

.instances-import-action-group {
    margin-top: 0;
}

.instances-editor-header,
.instances-pane-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.instances-editor-copy,
.instances-pane-header > div:first-child {
    min-width: 0;
}

.instances-editor-eyebrow {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-disabled);
}

.instances-editor-title {
    font-size: calc(var(--font-xl) + var(--font-xs));
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.1;
}

.instances-editor-meta,
.instances-pane-title {
    color: var(--text-secondary);
}

.instances-pane-title {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.instances-editor-actions,
.instances-pane-actions,
.instances-requests-toolbar,
.instances-library-toolbar,
.instances-editor-ribbons,
.instances-raw-tabs,
.instances-workbench-modes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.instances-workbench-modes {
    padding: var(--space-1);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: var(--interactive-active);
}

.instances-editor-actions,
.instances-pane-actions {
    justify-content: flex-end;
}

.instances-requests-toolbar {
    align-items: center;
}

.instances-requests-toolbar > input[type="search"] {
    flex: 1 1 var(--token-unit-220px);
    min-width: 0;
}

.instances-requests-toolbar > .btn-group {
    flex: 0 1 auto;
}

.instances-requests-toolbar > .btn {
    margin-left: auto;
}

@media (max-width: 900px) {
    .instances-explorer-header,
    .instances-explorer-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .instances-explorer-toolbar-main {
        grid-template-columns: 1fr;
    }

    .instances-import-wizard-grid,
    .instances-import-name-grid,
    .instances-import-source-grid {
        grid-template-columns: 1fr;
    }

    .instances-import-wizard-panel {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        resize: none;
    }
}

@media (max-width: 700px) {
    #sidebar .stat-fleet-vehicle-toolbar {
        grid-template-columns: 1fr;
    }
    #sidebar .stat-fleet-vehicle-toolbar .instances-pane-actions {
        justify-content: flex-start;
    }
}

.instances-editor-ribbons {
    align-items: center;
    justify-content: space-between;
}

.instances-editor-summary-grid,
.instances-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.instances-kv-row {
    display: grid;
    grid-template-columns: minmax(0, var(--sidebar-library-detail-label-width)) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
}

.instances-kv-row:last-child {
    border-bottom: none;
}

.instances-kv-label {
    font-size: var(--font-xs);
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.instances-kv-value {
    min-width: 0;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.instances-editor-state-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.instances-state-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--border-width-medium);
    padding: 0 var(--space-1);
    min-height: var(--token-unit-22px);
    border-radius: var(--radius-pill);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border: var(--border-width-thin) solid transparent;
}

.instances-state-badge.is-active {
    background: rgba(var(--raw-cyan), 0.1);
    color: rgb(var(--raw-cyan));
    border-color: rgba(var(--raw-cyan), 0.22);
}

.instances-state-badge.is-dirty,
.instances-state-badge.is-raw {
    background: rgba(var(--raw-orange), 0.12);
    color: rgb(var(--raw-orange));
    border-color: rgba(var(--raw-orange), 0.22);
}

.instances-state-badge.is-invalid,
.instances-state-badge.is-error {
    background: rgba(var(--raw-red), 0.14);
    color: rgb(var(--raw-red));
    border-color: rgba(var(--raw-red), 0.24);
}

.instances-state-badge.is-warning {
    background: rgba(var(--raw-yellow), 0.12);
    color: rgb(var(--raw-yellow));
    border-color: rgba(var(--raw-yellow), 0.24);
}

.instances-library-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.9fr));
    align-items: center;
}

.instances-vehicles-layout,
.instances-requests-layout {
    display: grid;
    grid-template-columns: minmax(calc(var(--token-unit-180px) + var(--token-unit-40px)), 0.82fr) minmax(0, 1.85fr);
    gap: var(--space-2);
    min-height: 0;
    flex: 1;
}

.instances-requests-layout {
    grid-template-columns: minmax(0, 1.8fr) minmax(var(--token-unit-260px), 0.92fr);
}

.instances-vehicle-pane,
.instances-route-pane,
.instances-assignment-pane,
.instances-requests-main,
.instances-request-detail-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--interactive-active);
    border: var(--border-width-thin) solid var(--border-subtle);
}

.instances-route-pane {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) minmax(0, auto) auto;
    align-content: stretch;
}

.instances-route-toolbar {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
}

.instances-route-toolbar > .control-group {
    flex: 1;
    min-width: 0;
}

.instances-route-toolbar > .control-group:first-child {
    flex: 0 0 auto;
    min-width: calc(var(--token-unit-120px) + var(--token-unit-40px));
}

.instances-vehicle-list,
.instances-assignment-list,
.instances-request-detail {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.instances-request-detail-pane {
    justify-content: space-between;
}

.instances-request-detail-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: var(--space-1);
    border-top: var(--border-width-thin) solid var(--border-subtle);
}

.instances-request-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.instances-request-detail-title {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.instances-inline-tray {
    min-height: 0;
    max-height: min(var(--token-unit-42vh), var(--token-unit-400px));
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: var(--interactive-active);
    overflow-y: auto;
    overflow-x: hidden;
}

.instances-inline-tray > summary {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--space-2);
    cursor: pointer;
    background: inherit;
}

.instances-inline-tray .panel-accordion-body {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--space-1);
    min-height: 0;
    padding: 0 var(--space-2) var(--space-2);
}

/* Assignment tray badge on the summary line */
.assign-tray-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--token-unit-18px);
    height: var(--token-unit-18px);
    padding: 0 var(--token-unit-3px);
    border-radius: var(--radius-pill);
    font-size: var(--font-xs);
    font-weight: 700;
    background: rgba(var(--raw-orange), 0.2);
    color: rgb(var(--raw-orange));
    margin-left: var(--space-1);
}

.assign-tray-badge:empty,
.assign-tray-badge[hidden] {
    display: none;
}

/* Assignment tray toolbar */
.assign-tray-toolbar {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.assign-tray-toolbar > input[type="search"] {
    flex: 1;
    min-width: 0;
}

.assign-tray-filter-select {
    flex: 0 0 auto;
    width: auto;
    max-width: calc(var(--token-unit-140px) + var(--space-3));
}

/* Assignment tray actions row */
.assign-tray-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
}

.assign-tray-select-all {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    font-size: var(--font-sm);
    user-select: none;
}

.assign-tray-select-all input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* Assignment table */
.assign-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.assign-table th {
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--token-unit-3px) var(--space-1);
    border-bottom: var(--border-width-thin) solid var(--border-default);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--interactive-active);
    z-index: 1;
}

.assign-table td {
    padding: var(--token-unit-3px) var(--space-1);
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
    white-space: nowrap;
    vertical-align: middle;
}

.assign-row {
    cursor: pointer;
    transition: background var(--transition-view);
}

.assign-row:hover {
    background: var(--token-color-rgba-139-233-253-0-05);
}

.assign-row.is-checked {
    background: rgba(var(--raw-cyan), 0.08);
}

.assign-col-check {
    width: var(--token-unit-22px);
    text-align: center;
}

.assign-col-check input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.assign-col-id {
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.assign-col-pax {
    text-align: right;
    width: var(--token-unit-28px);
}

.assign-col-time {
    text-align: right;
    color: var(--text-secondary);
}

.instances-vehicle-item {
    display: grid;
    gap: var(--border-width-medium);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: var(--interactive-active);
    cursor: pointer;
}

.instances-vehicle-item + .instances-vehicle-item {
    margin-top: var(--space-1);
}

.instances-vehicle-item.active {
    border-color: rgba(var(--raw-cyan), 0.24);
    background: rgba(var(--raw-cyan), 0.08);
}

.instances-vehicle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
}

.instances-vehicle-id {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.instances-vehicle-meta {
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.instances-request-table {
    width: 100%;
    border-collapse: collapse;
}

.instances-request-table th,
.instances-request-table td {
    padding: var(--space-1);
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
    vertical-align: middle;
}

.instances-request-table th {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-disabled);
}

.instances-request-table tr {
    cursor: pointer;
}

.instances-request-table tr:hover {
    background: var(--interactive-active);
}

.instances-request-table tr.is-selected {
    background: rgba(var(--raw-purple), 0.14);
}

.instances-request-table tr.is-error {
    background: rgba(var(--raw-red), 0.08);
}

.instances-request-table tr.is-warning {
    background: rgba(var(--raw-orange), 0.08);
}

.instances-request-status {
    display: inline-flex;
    align-items: center;
    min-height: var(--token-unit-20px);
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
}

.instances-request-status.is-unplaced {
    background: var(--interactive-hover-strong);
    color: var(--text-secondary);
}

.instances-request-status.is-partial {
    background: rgba(var(--raw-orange), 0.14);
    color: rgb(var(--raw-orange));
}

.instances-request-status.is-placed {
    background: rgba(var(--raw-green), 0.16);
    color: rgb(var(--raw-green));
}

.instances-request-status.is-new {
    background: rgba(var(--raw-purple), 0.16);
    color: rgb(var(--raw-purple));
}

.instances-request-status.is-error {
    background: rgba(var(--raw-red), 0.14);
    color: rgb(var(--raw-red));
}

.instances-request-status.is-warning {
    background: rgba(var(--raw-orange), 0.14);
    color: rgb(var(--raw-orange));
}

.instances-request-detail-empty {
    color: var(--text-secondary);
}

.instances-request-detail-form {
    display: grid;
    gap: var(--space-2);
}

.instances-request-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.instances-request-detail-form label {
    display: grid;
    gap: var(--border-width-medium);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-disabled);
}

.instances-request-detail-form input,
.instances-request-detail-form select,
.instances-request-detail-form textarea {
    width: 100%;
}

.pg-req-table-mode {
    min-height: 0;
    overflow: auto;
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: var(--interactive-active);
}

.instances-raw-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.instances-raw-status {
    flex: 1 1 var(--token-unit-220px);
    min-width: 0;
}

.instances-editor-actions-menu {
    position: relative;
    margin: 0;
}

.instances-editor-actions-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.instances-editor-actions-menu > summary::-webkit-details-marker {
    display: none;
}

.instances-editor-actions-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 3;
    display: none;
    min-width: calc(var(--token-unit-160px) + var(--space-3));
    padding: var(--space-1);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: var(--surface-overlay);
    box-shadow: var(--shell-shadow-float);
}

.instances-editor-actions-menu[open] .instances-editor-actions-menu-panel {
    display: grid;
    gap: var(--space-1);
}

.instances-raw-panels,
.instances-raw-panel,
.instances-raw-editor {
    min-height: 0;
    flex: 1;
    display: flex;
}

.instances-raw-panel {
    display: none;
}

.instances-raw-panel.active {
    display: flex;
}

.instances-raw-editor {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: var(--border-width-thin) solid var(--border-muted);
    background: var(--token-color-rgba-40-42-54-0-92);
    min-height: 0;
}

.instances-raw-gutter {
    margin: 0;
    padding: var(--space-2) var(--space-1);
    width: calc(var(--token-unit-40px) + var(--space-3));
    overflow: hidden;
    color: var(--text-disabled);
    background: var(--interactive-hover);
    font-size: var(--font-base);
    line-height: 1.5;
    text-align: right;
    user-select: none;
}

.instances-raw-textarea {
    flex: 1;
    min-height: 0;
    border: none;
    resize: none;
    padding: var(--space-2);
    background: transparent;
    color: var(--text-primary);
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: var(--font-base);
    line-height: 1.5;
}

.instances-raw-textarea:focus {
    outline: none;
}

@media (max-width: calc(1024px + 280px + var(--space-4))) {
    .instances-vehicles-layout {
        grid-template-columns: minmax(calc(var(--token-unit-180px) + var(--space-5)), 0.72fr) minmax(0, 1.35fr);
    }
}

@media (max-width: calc(1024px + 56px)) {
    .instances-explorer-toolbar-main > .btn {
        flex-basis: 100%;
    }

    .instances-explorer-toolbar-status .hint {
        white-space: normal;
    }

    .instances-editor-summary-grid,
    .instances-overview-grid,
    .instances-vehicles-layout,
    .instances-requests-layout,
    .instances-library-toolbar,
    .instances-request-detail-grid {
        grid-template-columns: 1fr;
    }

    .instances-vehicle-pane,
    .instances-route-pane,
    .instances-assignment-pane,
    .instances-requests-main,
    .instances-request-detail-pane {
        min-height: calc(var(--token-unit-180px) + var(--token-unit-40px));
    }

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

    .instances-route-toolbar > .control-group:first-child {
        min-width: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Detail Panel (modal overlay window)
   ═══════════════════════════════════════════════════════════════════ */

.detail-panel-backdrop {
    position: fixed;
    inset: 0;
    background: var(--token-color-rgba-0-0-0-0-35);
    z-index: 900;
    opacity: 0;
    transition: opacity var(--transition-view);
}

.detail-panel-backdrop.is-visible {
    opacity: 1;
}

.detail-panel-backdrop[hidden] {
    display: none;
}

.detail-panel {
    position: fixed;
    top: calc(50vh - ((var(--token-unit-26px) * 30) / 2));
    left: calc(50vw - ((var(--token-unit-96px) * 10) / 2));
    transform: scale(0.96);
    transform-origin: center center;
    width: calc(var(--token-unit-96px) * 10);
    height: calc(var(--token-unit-26px) * 30);
    z-index: 901;
    display: flex;
    flex-direction: column;
    background: var(--surface-app);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shell-shadow-float);
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--transition-view), transform var(--transition-view);
}

.detail-panel.is-visible {
    opacity: 1;
    transform: scale(1);
}

.detail-panel.is-maximized {
    border-radius: var(--radius-md);
}

.detail-panel[hidden] {
    display: none;
}

.detail-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--token-unit-40px);
    padding: var(--space-2) var(--space-4);
    background: var(--shell-titlebar-bg-strong);
    border-bottom: var(--border-width-thin) solid var(--shell-titlebar-border);
    gap: var(--space-2);
}

.detail-panel-breadcrumb {
    font-size: var(--font-md);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.detail-panel-breadcrumb .breadcrumb-sep {
    margin: 0 var(--space-1);
    opacity: 0.5;
}

.detail-panel-breadcrumb .breadcrumb-segment {
    color: var(--text-secondary);
}

.detail-panel-breadcrumb .breadcrumb-segment:last-child {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.detail-panel-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-1);
}

.detail-panel-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--shell-titlebar-bg-strong);
    border-bottom: var(--border-width-thin) solid var(--shell-titlebar-border);
    padding: 0 var(--space-2);
}

.detail-panel-tabs[hidden] {
    display: none;
}

.detail-panel-tab {
    font-size: var(--font-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: var(--border-width-medium) solid transparent;
    padding: var(--space-2) var(--token-unit-14px);
    cursor: pointer;
    transition: color var(--transition-view), border-color var(--transition-view);
    white-space: nowrap;
}

.detail-panel-tab:hover {
    color: var(--text-primary);
}

.detail-panel-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary, var(--shell-accent));
}

.detail-panel-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    font-size: var(--font-md);
}

.detail-panel-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.detail-panel-view[hidden] {
    display: none;
}

.detail-panel-view[data-detail-view="route-plan"] {
    overflow: hidden;
}

.detail-panel-section {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    gap: var(--space-3);
}

.detail-panel-tab-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: var(--space-4);
}

.detail-panel-tab-content[hidden] {
    display: none;
}

.detail-panel-view[data-detail-view="route-plan"] > #section-instances-summary {
    flex: 0 0 auto;
}

.detail-panel-view[data-detail-view="route-plan"] > .detail-panel-tab-content {
    overflow: hidden;
}

.detail-panel-content {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.detail-panel-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--token-unit-18px);
    height: var(--token-unit-18px);
    border: none;
    padding: 0;
    background:
        linear-gradient(135deg, transparent 0 44%, color-mix(in srgb, var(--text-muted) 45%, transparent) 44% 54%, transparent 54% 100%),
        linear-gradient(135deg, transparent 0 62%, color-mix(in srgb, var(--text-muted) 70%, transparent) 62% 72%, transparent 72% 100%);
    cursor: nwse-resize;
    opacity: 0.75;
    transition: opacity var(--transition-view), filter var(--transition-view);
    z-index: 2;
}

.detail-panel-resize-handle:hover {
    opacity: 1;
    filter: brightness(1.08);
}

.detail-panel.is-maximized .detail-panel-resize-handle,
.detail-panel.is-compact-layout .detail-panel-resize-handle {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

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

.detail-panel-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.detail-panel-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.detail-panel-hero-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.detail-panel-kicker {
    font-size: var(--font-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-disabled);
}

.detail-panel-title-row,
.detail-panel-item-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.detail-panel-title {
    margin: 0;
    font-size: calc(var(--font-xl) + var(--font-xs));
    line-height: 1.05;
    color: var(--text-primary);
}

.detail-panel-subtitle,
.detail-panel-section-meta,
.detail-panel-item-meta,
.detail-panel-preview-meta,
.detail-panel-empty-meta {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.detail-panel-description,
.detail-panel-note {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.detail-panel-metric-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.detail-panel-metric-pill {
    display: grid;
    gap: var(--border-width-medium);
    min-width: calc(var(--token-unit-72px) + var(--space-2));
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid rgba(var(--raw-cyan), 0.14);
    background: rgba(var(--raw-cyan), 0.08);
}

.detail-panel-metric-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-disabled);
}

.detail-panel-metric-value {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
}

.detail-panel-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}

.detail-panel-primary-action,
.detail-panel-secondary-actions,
.detail-panel-badge-row,
.detail-panel-item-actions,
.detail-panel-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.detail-panel-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.detail-panel-info-card,
.detail-panel-group-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.detail-panel-group-card {
    padding: var(--space-3);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-app) 92%, var(--surface-raised));
}

.detail-panel-group-title {
    color: var(--text-primary);
    font-size: var(--font-base);
    font-weight: var(--font-weight-bold);
}

.detail-panel-group-meta {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.detail-panel-group-body {
    display: grid;
    gap: var(--space-2);
}

.detail-panel-switch-list {
    align-content: start;
}

.detail-panel-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.detail-panel-item-card {
    padding: var(--space-3);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-app) 90%, var(--surface-raised));
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.detail-panel-item-main {
    min-width: 0;
    flex: 1 1 auto;
}

.detail-panel-item-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.detail-panel-item-title {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
}

.detail-panel-empty,
.detail-panel-diagnostic-inline {
    padding: var(--space-3);
    border: var(--border-width-thin) dashed var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-app) 92%, var(--interactive-hover));
}

.detail-panel-diagnostic-inline.is-error {
    border-style: solid;
    border-color: rgba(var(--raw-red), 0.35);
    background: rgba(var(--raw-red), 0.08);
    color: rgb(var(--raw-red));
}

.detail-panel-diagnostics {
    display: grid;
    gap: var(--space-2);
}

.detail-panel-diagnostic-group {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: color-mix(in srgb, var(--surface-app) 94%, var(--interactive-hover));
}

.detail-panel-diagnostic-group.is-error {
    border-color: rgba(var(--raw-red), 0.3);
    background: rgba(var(--raw-red), 0.08);
}

.detail-panel-diagnostic-group.is-warning {
    border-color: rgba(var(--raw-orange), 0.3);
    background: rgba(var(--raw-orange), 0.08);
}

.detail-panel-diagnostic-title {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-1);
}

.detail-panel-diagnostic-group ul {
    margin: 0;
    padding-left: var(--space-4);
}

.detail-panel-table-wrap {
    overflow: auto;
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.detail-panel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.detail-panel-table th,
.detail-panel-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width-thin) solid var(--border-subtle);
    text-align: left;
    white-space: nowrap;
}

.detail-panel-table th {
    position: sticky;
    top: 0;
    background: var(--surface-raised);
    color: var(--text-disabled);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

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

.instances-commit-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--border-subtle);
    background: var(--interactive-active);
}

.instances-commit-bar[hidden] {
    display: none;
}

.detail-panel .btn-primary {
    --bs-btn-color: var(--text-on-accent);
    --bs-btn-bg: var(--accent-primary, var(--shell-accent));
    --bs-btn-border-color: var(--accent-primary, var(--shell-accent));
    --bs-btn-hover-bg: color-mix(in srgb, var(--accent-primary, var(--shell-accent)) var(--token-unit-88pct), black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--accent-primary, var(--shell-accent)) var(--token-unit-88pct), black);
    --bs-btn-active-bg: color-mix(in srgb, var(--accent-primary, var(--shell-accent)) var(--token-unit-76pct), black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--accent-primary, var(--shell-accent)) var(--token-unit-76pct), black);
}

@media (max-width: 900px) {
    .detail-panel {
        top: var(--space-3);
        right: var(--space-3);
        bottom: var(--space-3);
        left: var(--space-3);
        width: auto;
        height: auto;
        transform: scale(0.96);
    }

    .detail-panel.is-visible {
        transform: scale(1);
    }

    .detail-panel-hero,
    .detail-panel-summary-grid,
    .detail-panel-section-header,
    .detail-panel-item-card,
    .instances-raw-toolbar,
    .instances-request-detail-head,
    .instances-request-detail-actions,
    .instances-commit-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .detail-panel-hero-actions {
        align-items: stretch;
    }

    .detail-panel-summary-grid {
        grid-template-columns: 1fr;
    }

    .detail-panel-resize-handle {
        display: none;
    }

    .instances-requests-toolbar > .btn {
        margin-left: 0;
    }
}

/* ── Map loading overlay ───────────────────────────────────────────────────── */

.map-loading-overlay {
    position: absolute;
    top: var(--titlebar-height, 0);
    bottom: var(--statusbar-height, 0);
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surface-base) var(--token-unit-82pct), transparent);
    backdrop-filter: blur(var(--space-2));
    transition: opacity var(--token-unit-0-35s) ease-out;
}

.map-loading-overlay[hidden] {
    opacity: 0;
    pointer-events: none;
}

.map-loading-card {
    min-width: min(360px, calc(100vw - var(--space-6)));
    max-width: min(420px, calc(100vw - var(--space-6)));
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-raised) var(--token-unit-92pct), transparent);
    box-shadow: var(--shadow-lg);
}

.map-loading-spinner {
    width: var(--token-unit-36px);
    height: var(--token-unit-36px);
    flex: 0 0 auto;
    border: var(--map-loading-spinner-border-width) solid var(--border-subtle);
    border-top-color: var(--text-secondary);
    border-radius: 50%;
    animation: aviz-spin var(--token-unit-0-7s) linear infinite;
}

.map-loading-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.map-loading-label {
    color: var(--text-primary);
    font-size: var(--font-md);
    font-weight: 700;
    line-height: 1.2;
}

.map-loading-detail,
.map-loading-progress-value {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: 1.35;
}

.map-loading-progress-track {
    position: relative;
    width: 100%;
    height: var(--space-2);
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--border-subtle);
}

.map-loading-progress-bar {
    height: 100%;
    width: var(--token-unit-38pct);
    border-radius: inherit;
    background: linear-gradient(var(--token-unit-90deg), var(--accent-primary), color-mix(in srgb, var(--accent-primary) var(--token-unit-62pct), white));
    transition: width var(--token-unit-0-25s) ease;
}

.map-loading-overlay[data-progress-mode="indeterminate"] .map-loading-progress-bar {
    animation: aviz-loading-progress var(--token-unit-1-2s) ease-in-out infinite;
}

.map-loading-overlay[data-progress-mode="determinate"] .map-loading-progress-bar {
    animation: none;
}

@keyframes aviz-spin {
    to { transform: rotate(var(--token-unit-360deg)); }
}

@keyframes aviz-loading-progress {
    0% { transform: translateX(var(--token-unit-neg-80pct)); }
    55% { transform: translateX(var(--token-unit-110pct)); }
    100% { transform: translateX(var(--token-unit-180pct)); }
}