/* ============================================================
   GENERATED CSS FILE
   Generated on: 2026-11-06 16:06:22 UTC
   Version: leadthink-app
   Primary Palette: tailwind-sky
   Neutral Palette: tailwind-zinc
   Success Palette: tailwind-green
   Failure Palette: tailwind-red
   Warning Palette: tailwind-yellow
============================================================ */

/* ============================================================
   GLOBAL RESET
   Modern normalize/reset styles
============================================================ */

/* reset.css */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
    box-sizing: border-box;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/

html {
    font-family:
            system-ui,
            'Segoe UI',
            Roboto,
            Helvetica,
            Arial,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji'; /* 1 */
    line-height: 1.15; /* 2 */
    -webkit-text-size-adjust: 100%; /* 3 */
    tab-size: 4; /* 4 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
    margin: 0;
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family:
            ui-monospace,
            SFMono-Regular,
            Consolas,
            'Liberation Mono',
            Menlo,
            monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
    border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
    padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}


/* ============================================================
   BASE COLORS
   Essential black and white values
============================================================ */

:root {
  --white: #FFFFFF;
  --black: #000000;
}

/* Primary Palette: tailwind-sky */
:root {
    --primary-50:  #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-200: #bae6fd;
    --primary-300: #7dd3fc;
    --primary-400: #38bdf8;
    --primary-500: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --primary-800: #075985;
    --primary-900: #0c4a6e;
    --primary-950: #082f49;
}

/* Neutral Palette: tailwind-zinc */
:root {
    --neutral-50:  #fafafa;
    --neutral-100: #f4f4f5;
    --neutral-200: #e4e4e7;
    --neutral-300: #d4d4d8;
    --neutral-400: #a1a1aa;
    --neutral-500: #71717a;
    --neutral-600: #52525b;
    --neutral-700: #3f3f46;
    --neutral-800: #27272a;
    --neutral-900: #18181b;
    --neutral-950: #09090b;
}

/* Success Palette: tailwind-green */
:root {
    --success-50:  #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-300: #86efac;
    --success-400: #4ade80;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;
    --success-800: #166534;
    --success-900: #14532d;
    --success-950: #052e16;
}

/* Failure Palette: tailwind-red */
:root {
    --failure-50:  #fef2f2;
    --failure-100: #fee2e2;
    --failure-200: #fecaca;
    --failure-300: #fca5a5;
    --failure-400: #f87171;
    --failure-500: #ef4444;
    --failure-600: #dc2626;
    --failure-700: #b91c1c;
    --failure-800: #991b1b;
    --failure-900: #7f1d1d;
    --failure-950: #450a0a;
}

/* Warning Palette: tailwind-yellow */
:root {
    --warning-50:  #fefce8;
    --warning-100: #fef9c3;
    --warning-200: #fef08a;
    --warning-300: #fde047;
    --warning-400: #facc15;
    --warning-500: #eab308;
    --warning-600: #ca8a04;
    --warning-700: #a16207;
    --warning-800: #854d0e;
    --warning-900: #713f12;
    --warning-950: #422006;
}

/* ============================================================
   GLOBAL STYLE VARIABLES
   Site-wide design defaults
============================================================ */

:root {
    /* Global */
    --global-border-width: 1px;
    --global-border-style: solid;
    --global-border-radius: var(--radius-lg);

}

/* ============================================================
   COMPONENT VARIABLES
   Component-specific style variables
============================================================ */

:root {
    /* Body */
    --body-bg-color: var(--neutral-100);
    --body-color: var(--neutral-900);

    /* Button */
    --button-focus-outline: var(--neutral-500);
    --button-bg: var(--primary-700);
    --button-bg-hover: var(--primary-900);
    --button-bg-active: var(--primary-700);
    --button-bg-disabled: var(--neutral-300);
    --button-text: var(--neutral-50);
    --button-text-hover: var(--white);
    --button-text-disabled: var(--neutral-500);
    --button-border: var(--primary-500);
    --button-border-hover: var(--primary-700);
    --button-border-disabled: var(--neutral-300);
    --button-border-width: var(--global-border-width);
    --button-radius: var(--global-border-radius);
    --button-radius-top-left: var(--button-radius);
    --button-radius-top-right: var(--button-radius);
    --button-radius-bottom-right: var(--button-radius);
    --button-radius-bottom-left: var(--button-radius);
    --button-font-size: var(--text-lg);
    --button-padding-block: 8px;
    --button-padding-inline: 16px;
    --button-gap: 8px;
    --button-small-height: 30px;
    --button-small-icon-size: 16px;
    --button-small-segmented-icon-size: 15px;
    --button-compact-height: 36px;
    --button-compact-font-size: 13px;
    --button-compact-radius: var(--button-radius);
    --button-compact-padding-block: 0;
    --button-toolbar-padding-inline: 12px;
    --button-toolbar-line-height: 1;
    --button-toolbar-icon-size: 16px;
    --button-toolbar-mobile-height: 32px;
    --button-touch-height: 44px;
    --button-touch-icon-size: 24px;
    --button-accent-bg: var(--primary-700);
    --button-accent-bg-hover: var(--primary-800);
    --button-accent-active-bg: var(--primary-900);
    --button-accent-text: var(--neutral-50);
    --button-accent-border: var(--primary-700);
    --button-accent-border-hover: var(--primary-800);
    --button-secondary-bg: var(--neutral-50);
    --button-secondary-bg-hover: var(--neutral-100);
    --button-secondary-text: var(--neutral-900);
    --button-secondary-text-hover: var(--neutral-950);
    --button-secondary-border: var(--neutral-500);
    --button-secondary-border-hover: var(--neutral-500);
    --button-ghost-text: var(--neutral-600);
    --button-ghost-text-hover: var(--neutral-900);
    --button-ghost-bg-hover: var(--neutral-100);
    --button-icon-size: 28px;
    --button-icon-radius: var(--button-radius);
    --button-icon-glyph-size: 16px;
    --button-muted-bg: var(--neutral-100);
    --button-muted-text: var(--neutral-600);
    --button-muted-text-hover: var(--neutral-900);
    --button-muted-border: var(--neutral-200);
    --button-muted-border-hover: var(--neutral-600);
    --button-muted-icon-size: 19.2px;
    --button-segmented-padding: 2px;
    --button-segmented-gap: 2px;
    --button-segmented-slot-width: 36px;
    --button-segmented-slot-radius: calc(var(--button-radius) * .6);
    --button-segmented-icon-size: 18px;
    --button-segmented-bg: var(--neutral-100);
    --button-segmented-text: var(--neutral-700);
    --button-segmented-selected-bg: var(--neutral-50);
    --button-segmented-selected-text: var(--primary-700);

    /* Dynamic logo */
    --dynamic-logo-width: 169px;
    --dynamic-logo-icon-size: 26px;
    --dynamic-logo-gap: 6px;
    --dynamic-logo-font: Geist-Bold;
    --dynamic-logo-font-size: 20px;
    --dynamic-logo-text: var(--neutral-600);
    --dynamic-logo-artwork-wordmark: var(--primary-600);
    --dynamic-logo-artwork-outline: var(--primary-500);
    --dynamic-logo-artwork-highlight: var(--primary-300);
    --dynamic-logo-artwork-light: var(--primary-400);
    --dynamic-logo-artwork-base: var(--primary-500);
    --dynamic-logo-artwork-shade: var(--primary-600);
    --dynamic-logo-artwork-dark: var(--primary-700);
    --dynamic-logo-artwork-deep: var(--primary-800);
    --dynamic-logo-focus-outline: var(--primary-600);

    /* Input */
    --input-bg: var(--white);
    --input-text: var(--neutral-950);
    --input-border: var(--neutral-500);
    --input-border-hover: var(--neutral-500);
    --input-accent: var(--primary-700);
    --input-placeholder: var(--neutral-600);
    --input-disabled-bg: var(--neutral-100);
    --input-disabled-text: var(--neutral-400);

    /* Radio */
    --radio-bg: var(--neutral-50);
    --radio-bg-checked: var(--primary-500);
    --radio-bg-disabled: var(--neutral-200);
    --radio-border: var(--neutral-500);
    --radio-border-hover: var(--primary-600);
    --radio-border-checked: var(--primary-600);
    --radio-border-disabled: var(--neutral-300);
    --radio-border-width: var(--global-border-width);
    --radio-focus-outline: var(--primary-600);
    --radio-size: 16px;
    --radio-dot-inset: 3px;

    /* Data table */
    --data-table-bg: var(--neutral-50);
    --data-table-text: var(--neutral-950);
    --data-table-text-muted: var(--neutral-700);
    --data-table-border: var(--neutral-200);
    --data-table-card-border: var(--neutral-300);
    --data-table-error-text: var(--failure-800);
    --data-table-retry-bg: var(--primary-700);
    --data-table-retry-bg-hover: var(--primary-700);
    --data-table-retry-text: var(--white);
    --data-table-scrollbar-track: var(--neutral-100);
    --data-table-scrollbar-thumb: var(--neutral-400);
    --data-table-scrollbar-thumb-hover: var(--neutral-600);

    /* Cell */
    --cell-header-bg: var(--neutral-50);
    --cell-header-bg-hover: var(--neutral-100);
    --cell-header-border: var(--neutral-200);
    --cell-header-text: var(--neutral-950);
    --cell-text: var(--neutral-950);
    --cell-text-muted: var(--neutral-700);
    --cell-text-faint: var(--neutral-600);
    --cell-sorted-bg: var(--primary-50);
    --cell-sorted-text: var(--primary-700);
    --cell-link: var(--primary-700);
    --cell-badge-success-bg: var(--success-100);
    --cell-badge-success-text: var(--success-800);
    --cell-badge-secondary-bg: var(--neutral-200);
    --cell-badge-secondary-text: var(--neutral-600);
    --cell-config-exists: var(--success-700);
    --cell-config-exists-hover: var(--success-700);
    --cell-config-empty: var(--neutral-600);
    --cell-negative: var(--failure-700);

    /* Row */
    --row-bg: var(--neutral-50);
    --row-bg-zebra: var(--neutral-100);
    --row-bg-hover: var(--primary-50);
    --row-border: var(--neutral-200);
    --row-sub-text: var(--neutral-600);

    /* Skeleton */
    --skeleton-base: var(--primary-200);
    --skeleton-highlight: var(--primary-100);

    /* App header bar */
    --app-header-bar-bg: var(--neutral-50);
    --app-header-bar-text: var(--neutral-950);
    --app-header-bar-divider: var(--neutral-200);
    --app-header-bar-public-height: 64px;
    --app-header-bar-public-shell-width: 1280px;
    --app-header-bar-public-gutter: 24px;
    --app-header-bar-public-gutter-wide: 40px;
    --app-header-bar-public-navigation-gap: 12px;
    --app-header-bar-public-logo-width-desktop: 152px;
    --app-header-bar-public-scrollbar-gutter: stable;
    --app-header-bar-public-bg: var(--app-header-bar-bg);
    --app-header-bar-public-text: var(--app-header-bar-text);
    --app-header-bar-public-focus-outline: var(--primary-600);

    /* Sidebar nav */
    --sidebar-nav-bg: var(--neutral-50);
    --sidebar-nav-border: var(--neutral-200);
    --sidebar-nav-text: var(--neutral-600);
    --sidebar-nav-text-strong: var(--neutral-900);
    --sidebar-nav-text-muted: var(--neutral-700);
    --sidebar-nav-text-faint: var(--neutral-600);
    --sidebar-nav-hover-bg: var(--neutral-100);
    --sidebar-nav-active-bg: var(--primary-50);
    --sidebar-nav-active-text: var(--primary-700);
    --sidebar-nav-badge-bg: var(--failure-600);
    --sidebar-nav-badge-text: var(--white);
    --sidebar-nav-scrollbar-thumb: var(--neutral-300);
    --sidebar-nav-scrollbar-thumb-hover: var(--neutral-400);
    --sidebar-nav-toggle: var(--neutral-500);
    --sidebar-nav-overlay-bg: var(--neutral-950);
    --sidebar-nav-public-bg: var(--neutral-50);
    --sidebar-nav-public-border: var(--neutral-200);
    --sidebar-nav-public-text: var(--neutral-900);
    --sidebar-nav-public-hover-bg: var(--neutral-100);
    --sidebar-nav-public-active-bg: var(--primary-50);
    --sidebar-nav-public-active-text: var(--primary-700);
    --sidebar-nav-public-overlay-bg: color-mix(in srgb, var(--neutral-950) 55%, transparent);
    --sidebar-nav-public-focus-outline: var(--primary-600);
    --sidebar-nav-public-header-height: 64px;
    --sidebar-nav-public-gutter: 24px;
    --sidebar-nav-public-gutter-wide: 40px;

    /* Sidebar viewer */
    --sidebar-viewer-overlay-bg: color-mix(in srgb, var(--neutral-950) 55%, transparent);
    --sidebar-viewer-panel-bg: var(--neutral-50);
    --sidebar-viewer-border: var(--neutral-200);
    --sidebar-viewer-title-text: var(--neutral-900);
    --sidebar-viewer-subtitle-text: var(--primary-700);
    --sidebar-viewer-close-text: var(--neutral-600);
    --sidebar-viewer-close-hover-text: var(--neutral-700);
    --sidebar-viewer-close-hover-bg: var(--neutral-100);
    --sidebar-viewer-body-bg: var(--neutral-100);
    --sidebar-viewer-scrollbar-thumb: var(--neutral-300);
    --sidebar-viewer-scrollbar-thumb-hover: var(--neutral-400);

    /* Pagination */
    --pagination-bg: var(--neutral-50);
    --pagination-bg-hover: var(--neutral-100);
    --pagination-bg-disabled: var(--neutral-200);
    --pagination-border: var(--neutral-500);
    --pagination-border-hover: var(--neutral-500);
    --pagination-border-focus: var(--primary-600);
    --pagination-text: var(--neutral-950);
    --pagination-text-muted: var(--neutral-700);
    --pagination-active-bg: var(--primary-700);
    --pagination-active-text: var(--white);

    /* Group by bar */
    --group-by-bar-bg: var(--neutral-50);
    --group-by-bar-bg-hover: var(--neutral-100);
    --group-by-bar-border: var(--neutral-500);
    --group-by-bar-border-hover: var(--neutral-500);
    --group-by-bar-text: var(--neutral-950);
    --group-by-bar-text-muted: var(--neutral-700);
    --group-by-bar-text-disabled: var(--neutral-400);
    --group-by-bar-option-hover-bg: var(--neutral-100);
    --group-by-bar-option-selected-bg: var(--primary-50);
    --group-by-bar-option-selected-hover-bg: var(--primary-100);
    --group-by-bar-check: var(--primary-700);

    /* Refresh button */
    --refresh-button-bg: var(--neutral-50);
    --refresh-button-bg-hover: var(--neutral-100);
    --refresh-button-border: var(--neutral-500);
    --refresh-button-border-hover: var(--primary-600);
    --refresh-button-icon: var(--neutral-600);
    --refresh-button-icon-hover: var(--primary-700);
    --refresh-button-text: var(--neutral-950);
    --refresh-button-text-muted: var(--neutral-700);

    /* Date range picker */
    --date-range-picker-surface: var(--neutral-50);
    --date-range-picker-surface-hover: var(--neutral-100);
    --date-range-picker-border: var(--neutral-500);
    --date-range-picker-border-panel: var(--neutral-300);
    --date-range-picker-border-hover: var(--neutral-500);
    --date-range-picker-text: var(--neutral-950);
    --date-range-picker-text-muted: var(--neutral-700);
    --date-range-picker-text-disabled: var(--neutral-400);
    --date-range-picker-placeholder: var(--neutral-600);
    --date-range-picker-icon: var(--neutral-600);
    --date-range-picker-accent: var(--primary-700);
    --date-range-picker-accent-hover: var(--primary-700);
    --date-range-picker-on-accent: var(--neutral-50);
    --date-range-picker-preview-end-text: var(--neutral-950);
    --date-range-picker-range-bg: var(--primary-50);
    --date-range-picker-range-hover-bg: var(--primary-200);
    --date-range-picker-scrollbar: var(--neutral-300);
    --date-range-picker-scrollbar-hover: var(--neutral-400);
    --date-range-picker-warning-bg: var(--warning-100);
    --date-range-picker-warning-icon: var(--warning-700);
    --date-range-picker-error: var(--failure-700);

    /* Smart filter bar */
    --smart-filter-bar-surface: var(--white);
    --smart-filter-bar-text: var(--neutral-950);
    --smart-filter-bar-text-muted: var(--neutral-700);
    --smart-filter-bar-border: var(--neutral-500);
    --smart-filter-bar-border-strong: var(--neutral-500);
    --smart-filter-bar-border-hover: var(--neutral-500);
    --smart-filter-bar-control-bg: var(--neutral-50);
    --smart-filter-bar-surface-hover: var(--neutral-100);
    --smart-filter-bar-accent: var(--primary-700);
    --smart-filter-bar-accent-bg: var(--primary-50);
    --smart-filter-bar-accent-pale: var(--primary-100);
    --smart-filter-bar-scrollbar: var(--neutral-400);
    --smart-filter-bar-scrollbar-hover: var(--neutral-500);
    --smart-filter-bar-error-bg: var(--failure-800);
    --smart-filter-bar-warning-icon: var(--failure-600);
    --smart-filter-bar-tooltip-bg: var(--primary-900);
    --smart-filter-bar-invalid-bg: var(--failure-50);
    --smart-filter-bar-invalid-text: var(--failure-700);
    --smart-filter-bar-invalid-border: var(--failure-600);

    /* Filter chip */
    --filter-chip-surface: var(--white);
    --filter-chip-text: var(--neutral-950);
    --filter-chip-text-muted: var(--neutral-700);
    --filter-chip-border: var(--neutral-500);
    --filter-chip-border-strong: var(--neutral-500);
    --filter-chip-border-hover: var(--neutral-500);
    --filter-chip-accent: var(--primary-700);
    --filter-chip-accent-bg: var(--primary-50);
    --filter-chip-accent-pale: var(--primary-100);

    /* Select */
    --select-surface: var(--white);
    --select-text: var(--neutral-950);
    --select-border: var(--neutral-500);
    --select-border-hover: var(--neutral-500);
    --select-arrow: var(--neutral-500);
    --select-accent: var(--primary-700);
    --select-disabled-bg: var(--neutral-100);
    --select-disabled-text: var(--neutral-400);

    /* Table */
    --table-text: var(--neutral-950);
    --table-text-muted: var(--neutral-700);
    --table-border: var(--neutral-200);
    --table-border-strong: var(--neutral-300);
    --table-row-hover: var(--neutral-100);
    --table-accent: var(--primary-700);

    /* Tabs */
    --tabs-border: var(--neutral-200);
    --tabs-text: var(--neutral-600);
    --tabs-text-hover: var(--neutral-900);
    --tabs-text-disabled: var(--neutral-400);
    --tabs-active: var(--primary-700);

    /* Framework log service */
    --framework-log-service-surface: var(--neutral-50);
    --framework-log-service-surface-raised: var(--neutral-100);
    --framework-log-service-surface-hover: var(--neutral-100);
    --framework-log-service-text: var(--neutral-950);
    --framework-log-service-text-muted: var(--neutral-700);
    --framework-log-service-text-faint: var(--neutral-600);
    --framework-log-service-border: var(--neutral-200);
    --framework-log-service-border-strong: var(--neutral-300);
    --framework-log-service-backdrop: color-mix(in srgb, var(--primary-900) 50%, transparent);
    --framework-log-service-accent: var(--primary-700);
    --framework-log-service-accent-bg: var(--primary-50);
    --framework-log-service-scrollbar: var(--neutral-400);
    --framework-log-service-scrollbar-hover: var(--neutral-500);
    --framework-log-service-pill-muted-bg: var(--neutral-100);
    --framework-log-service-pill-muted-text: var(--neutral-600);
    --framework-log-service-pill-info-bg: var(--success-200);
    --framework-log-service-pill-info-text: var(--success-800);
    --framework-log-service-pill-warn-bg: var(--warning-200);
    --framework-log-service-pill-warn-text: var(--warning-800);
    --framework-log-service-pill-error-bg: var(--failure-200);
    --framework-log-service-pill-error-text: var(--failure-800);
    --framework-log-service-pill-time-bg: var(--primary-200);
    --framework-log-service-pill-time-text: var(--primary-800);
    --framework-log-service-pill-active-bg: var(--primary-700);
    --framework-log-service-pill-active-text: var(--white);
    --framework-log-service-pill-info-solid-bg: var(--success-700);
    --framework-log-service-pill-warn-solid-bg: var(--warning-700);
    --framework-log-service-pill-error-solid-bg: var(--failure-600);
    --framework-log-service-pill-solid-text: var(--white);
    --framework-log-service-pill-all-bg: var(--neutral-200);
    --framework-log-service-pill-all-text: var(--neutral-800);
    --framework-log-service-pill-all-solid-bg: var(--neutral-800);
    --framework-log-service-pill-time-solid-bg: var(--primary-700);
    --framework-log-service-status-ok: var(--success-700);
    --framework-log-service-status-warn: var(--warning-800);
    --framework-log-service-status-error: var(--failure-700);
    --framework-log-service-src-php-bg: var(--primary-200);
    --framework-log-service-src-php-text: var(--primary-800);
    --framework-log-service-src-js-bg: var(--warning-200);
    --framework-log-service-src-js-text: var(--warning-800);
    --framework-log-service-on-accent: var(--neutral-50);
    --framework-log-service-error-row-bg: color-mix(in srgb, var(--failure-500) 10%, transparent);
    --framework-log-service-shadow: rgba(0, 0, 0, 0.18);
    --framework-log-service-hue-0: #b72020;
    --framework-log-service-hue-1: #a43e09;
    --framework-log-service-hue-2: #914f04;
    --framework-log-service-hue-3: #426b09;
    --framework-log-service-hue-4: #106e32;
    --framework-log-service-hue-5: #036e4d;
    --framework-log-service-hue-6: #0a6c64;
    --framework-log-service-hue-7: #06687f;
    --framework-log-service-hue-8: #026599;
    --framework-log-service-hue-9: #2056cc;
    --framework-log-service-hue-10: #4e45e3;
    --framework-log-service-hue-11: #7336dc;
    --framework-log-service-hue-12: #832dd0;
    --framework-log-service-hue-13: #9c1fad;
    --framework-log-service-hue-14: #b11f60;
    --framework-log-service-hue-15: #b8183b;
    --framework-log-service-syntax-keyword: var(--primary-700);
    --framework-log-service-syntax-string: var(--failure-700);
    --framework-log-service-syntax-number: var(--success-700);
    --framework-log-service-syntax-function: var(--warning-800);
    --framework-log-service-syntax-identifier: var(--neutral-900);
    --framework-log-service-syntax-operator: var(--neutral-600);
    --framework-log-service-syntax-punctuation: var(--neutral-600);
    --framework-log-service-syntax-comment: var(--neutral-600);
    --framework-log-service-syntax-filepath: var(--warning-800);
    --framework-log-service-syntax-linenum: var(--success-700);
    --framework-log-service-syntax-stack: var(--primary-700);
    --framework-log-service-syntax-key: var(--primary-700);
    --framework-log-service-syntax-boolean: var(--warning-800);
    --framework-log-service-syntax-null: var(--neutral-600);

    /* Experiment results */
    --experiment-results-panel-bg: var(--neutral-100);
    --experiment-results-card-bg: var(--neutral-50);
    --experiment-results-card-border: var(--neutral-200);
    --experiment-results-section-label: var(--primary-700);
    --experiment-results-name: var(--neutral-900);
    --experiment-results-type-text: var(--neutral-600);
    --experiment-results-type-border: var(--neutral-200);
    --experiment-results-url-text: var(--neutral-600);
    --experiment-results-head-text: var(--neutral-600);
    --experiment-results-head-border: var(--neutral-200);
    --experiment-results-row-text: var(--neutral-700);
    --experiment-results-num: var(--neutral-900);
    --experiment-results-win-text: var(--success-700);
    --experiment-results-base-dot: var(--neutral-400);
    --experiment-results-var-dot: var(--primary-500);
    --experiment-results-context-text: var(--neutral-900);
    --experiment-results-meta-text: var(--neutral-600);

    /* Experiment editor */
    --experiment-editor-bg: var(--neutral-50);
    --experiment-editor-text: var(--neutral-700);
    --experiment-editor-text-strong: var(--neutral-900);
    --experiment-editor-text-muted: var(--neutral-700);
    --experiment-editor-text-faint: var(--neutral-600);
    --experiment-editor-border: var(--neutral-200);
    --experiment-editor-hover-bg: var(--neutral-100);
    --experiment-editor-active-bg: var(--primary-50);
    --experiment-editor-active-text: var(--primary-700);
    --experiment-editor-accent: var(--primary-700);
    --experiment-editor-save-bg: var(--primary-700);
    --experiment-editor-save-bg-hover: var(--primary-900);
    --experiment-editor-save-text: var(--neutral-50);
    --experiment-editor-switch-on-text: var(--primary-700);
    --experiment-editor-saved-bg: var(--success-100);
    --experiment-editor-saved-text: var(--success-800);

    /* Ip permissions editor */
    --ip-permissions-editor-text: var(--neutral-900);
    --ip-permissions-editor-text-muted: var(--neutral-600);
    --ip-permissions-editor-border: var(--neutral-500);
    --ip-permissions-editor-accent: var(--primary-700);
    --ip-permissions-editor-hover-bg: var(--neutral-100);
    --ip-permissions-editor-error-bg: var(--failure-50);
    --ip-permissions-editor-error-text: var(--failure-700);
    --ip-permissions-editor-warning-bg: var(--warning-50);
    --ip-permissions-editor-warning-text: var(--warning-800);
    --ip-permissions-editor-remove-bg: var(--failure-700);
    --ip-permissions-editor-remove-bg-hover: var(--failure-800);
    --ip-permissions-editor-remove-text: var(--neutral-50);

    /* Access tokens editor */
    --access-tokens-editor-text: var(--neutral-900);
    --access-tokens-editor-text-muted: var(--neutral-600);
    --access-tokens-editor-border: var(--neutral-500);
    --access-tokens-editor-error-bg: var(--failure-50);
    --access-tokens-editor-error-text: var(--failure-700);
    --access-tokens-editor-warning-bg: var(--warning-50);
    --access-tokens-editor-warning-text: var(--warning-800);
    --access-tokens-editor-success-bg: var(--success-100);
    --access-tokens-editor-success-text: var(--success-800);

    /* Kanban board */
    --kanban-board-surface: var(--neutral-50);
    --kanban-board-lane-bg: var(--neutral-100);
    --kanban-board-border: var(--neutral-500);
    --kanban-board-text: var(--neutral-950);
    --kanban-board-text-muted: var(--neutral-600);
    --kanban-board-accent: var(--primary-700);
    --kanban-board-lane-ideas-bg: #b91c1c;
    --kanban-board-lane-ideas-text: var(--white);
    --kanban-board-lane-ideas-count-bg: #7f1d1d;
    --kanban-board-lane-ideas-count-text: var(--white);
    --kanban-board-lane-ideas-summary-bg: #fee2e2;
    --kanban-board-lane-ideas-summary-text: #991b1b;
    --kanban-board-lane-todo-bg: #c2410c;
    --kanban-board-lane-todo-text: var(--white);
    --kanban-board-lane-todo-count-bg: #7c2d12;
    --kanban-board-lane-todo-count-text: var(--white);
    --kanban-board-lane-todo-summary-bg: #ffedd5;
    --kanban-board-lane-todo-summary-text: #9a3412;
    --kanban-board-lane-progress-bg: #a16207;
    --kanban-board-lane-progress-text: var(--white);
    --kanban-board-lane-progress-count-bg: #713f12;
    --kanban-board-lane-progress-count-text: var(--white);
    --kanban-board-lane-progress-summary-bg: #fef9c3;
    --kanban-board-lane-progress-summary-text: #713f12;
    --kanban-board-lane-review-bg: #15803d;
    --kanban-board-lane-review-text: var(--white);
    --kanban-board-lane-review-count-bg: #14532d;
    --kanban-board-lane-review-count-text: var(--white);
    --kanban-board-lane-review-summary-bg: #dcfce7;
    --kanban-board-lane-review-summary-text: #166534;
    --kanban-board-lane-development-bg: #1d4ed8;
    --kanban-board-lane-development-text: var(--white);
    --kanban-board-lane-development-count-bg: #1e3a8a;
    --kanban-board-lane-development-count-text: var(--white);
    --kanban-board-lane-development-summary-bg: #dbeafe;
    --kanban-board-lane-development-summary-text: #1e40af;
    --kanban-board-lane-production-bg: #6d28d9;
    --kanban-board-lane-production-text: var(--white);
    --kanban-board-lane-production-count-bg: #4c1d95;
    --kanban-board-lane-production-count-text: var(--white);
    --kanban-board-lane-production-summary-bg: #ede9fe;
    --kanban-board-lane-production-summary-text: #5b21b6;
    --kanban-board-status-ok: var(--success-700);
    --kanban-board-error: var(--failure-700);

    /* Kanban card */
    --kanban-card-surface: var(--white);
    --kanban-card-surface-muted: var(--neutral-100);
    --kanban-card-surface-hover: var(--primary-50);
    --kanban-card-border: var(--neutral-500);
    --kanban-card-border-focus: var(--primary-700);
    --kanban-card-text: var(--neutral-950);
    --kanban-card-text-muted: var(--neutral-600);
    --kanban-card-label-red-bg: #f87171;
    --kanban-card-label-red-text: var(--neutral-950);
    --kanban-card-label-orange-bg: #fb923c;
    --kanban-card-label-orange-text: var(--neutral-950);
    --kanban-card-label-yellow-bg: #facc15;
    --kanban-card-label-yellow-text: var(--neutral-950);
    --kanban-card-label-green-bg: #4ade80;
    --kanban-card-label-green-text: var(--neutral-950);
    --kanban-card-label-blue-bg: #60a5fa;
    --kanban-card-label-blue-text: var(--neutral-950);
    --kanban-card-label-violet-bg: #a78bfa;
    --kanban-card-label-violet-text: var(--neutral-950);

    /* Kanban ticket editor */
    --kanban-ticket-editor-backdrop: color-mix(in srgb, var(--neutral-950) 55%, transparent);
    --kanban-ticket-editor-surface: var(--white);
    --kanban-ticket-editor-surface-muted: var(--neutral-50);
    --kanban-ticket-editor-border: var(--neutral-500);
    --kanban-ticket-editor-text: var(--neutral-950);
    --kanban-ticket-editor-text-muted: var(--neutral-600);
    --kanban-ticket-editor-accent: var(--primary-700);
    --kanban-ticket-editor-hover-bg: var(--neutral-100);
    --kanban-ticket-editor-focus-bg: var(--primary-50);
    --kanban-ticket-editor-input-bg: var(--neutral-50);
    --kanban-ticket-editor-action-bg: var(--neutral-100);
    --kanban-ticket-editor-action-hover-bg: var(--primary-50);
    --kanban-ticket-editor-error-bg: var(--failure-50);
    --kanban-ticket-editor-error-text: var(--failure-700);
    --kanban-ticket-editor-label-red-bg: #f87171;
    --kanban-ticket-editor-label-red-text: var(--neutral-950);
    --kanban-ticket-editor-label-orange-bg: #fb923c;
    --kanban-ticket-editor-label-orange-text: var(--neutral-950);
    --kanban-ticket-editor-label-yellow-bg: #facc15;
    --kanban-ticket-editor-label-yellow-text: var(--neutral-950);
    --kanban-ticket-editor-label-green-bg: #4ade80;
    --kanban-ticket-editor-label-green-text: var(--neutral-950);
    --kanban-ticket-editor-label-blue-bg: #60a5fa;
    --kanban-ticket-editor-label-blue-text: var(--neutral-950);
    --kanban-ticket-editor-label-violet-bg: #a78bfa;
    --kanban-ticket-editor-label-violet-text: var(--neutral-950);

    /* Checklist */
    --checklist-surface: var(--white);
    --checklist-border: var(--neutral-500);
    --checklist-text: var(--neutral-950);
    --checklist-text-muted: var(--neutral-600);
    --checklist-accent: var(--primary-700);
    --checklist-hover-bg: var(--neutral-100);
    --checklist-focus-bg: var(--primary-50);
    --checklist-action-bg: var(--neutral-100);
    --checklist-action-hover-bg: var(--primary-50);

    /* Experiment preview */
    --experiment-preview-bg: var(--neutral-100);
    --experiment-preview-surface: var(--white);
    --experiment-preview-border: var(--neutral-200);
    --experiment-preview-text: var(--neutral-700);
    --experiment-preview-text-muted: var(--neutral-700);
    --experiment-preview-accent: var(--primary-700);
    --experiment-preview-accent-bg: var(--primary-50);
    --experiment-preview-frame-border: var(--neutral-300);
    --experiment-preview-frame-bg: var(--white);
    --experiment-preview-challenger-accent: var(--primary-700);

    /* Site layout */
    --site-layout-surface: var(--white);
    --site-layout-text: var(--neutral-950);

    /* Content section */
    --content-section-surface: var(--white);
    --content-section-surface-soft: var(--neutral-50);
    --content-section-text: var(--neutral-950);
    --content-section-text-muted: var(--neutral-700);
    --content-section-accent: var(--primary-700);
    --content-section-border: var(--neutral-300);
    --content-section-focus-outline: var(--primary-700);

    /* Form card */
    --form-card-page-bg: var(--neutral-50);
    --form-card-surface: var(--white);
    --form-card-text: var(--neutral-950);
    --form-card-text-muted: var(--neutral-700);
    --form-card-accent: var(--primary-700);
    --form-card-border: var(--neutral-500);
    --form-card-focus-outline: var(--primary-700);
    --form-card-shadow: rgb(9 9 11 / 12%);

    /* Hero */
    --hero-surface: #fffaf3;
    --hero-text: var(--neutral-950);
    --hero-text-muted: var(--neutral-700);
    --hero-accent: var(--primary-700);
    --hero-focus-outline: var(--primary-700);
    --hero-motion-ink: #2e1b0e;
    --hero-motion-paper: #fff6e0;
    --hero-motion-rose: #f5bfae;
    --hero-motion-rose-deep: #d86a56;
    --hero-motion-gold: #fde2a4;
    --hero-motion-gold-deep: #e9a03e;
    --hero-motion-sea-deep: #44597a;

    /* Stats bar */
    --stats-bar-surface: var(--white);
    --stats-bar-text: var(--neutral-950);
    --stats-bar-text-muted: var(--neutral-700);
    --stats-bar-border: var(--neutral-300);

    /* Card grid */
    --card-grid-surface: var(--white);
    --card-grid-text: var(--neutral-950);
    --card-grid-text-muted: var(--neutral-700);
    --card-grid-accent: var(--primary-700);
    --card-grid-icon-bg: var(--primary-50);
    --card-grid-border: var(--neutral-300);

    /* Call to action */
    --call-to-action-surface: var(--white);
    --call-to-action-text: var(--neutral-950);
    --call-to-action-accent: var(--primary-700);
    --call-to-action-border: var(--neutral-300);
    --call-to-action-focus-outline: var(--primary-700);

    /* Logo cloud */
    --logo-cloud-base: 58px;
    --logo-cloud-gap: 44px;
    --logo-cloud-surface: var(--white);
    --logo-cloud-text: var(--neutral-950);
    --logo-cloud-text-muted: var(--neutral-700);
    --logo-cloud-accent: var(--primary-700);
    --logo-cloud-hover-bg: var(--neutral-100);
    --logo-cloud-focus-outline: var(--primary-700);

    /* Card gallery */
    --card-gallery-surface: var(--neutral-950);
    --card-gallery-overlay-bg: color-mix(in srgb, var(--card-gallery-surface) 94%, transparent);
    --card-gallery-text: var(--white);
    --card-gallery-text-muted: var(--neutral-100);
    --card-gallery-accent: var(--primary-300);
    --card-gallery-counter-bg: var(--neutral-50);
    --card-gallery-counter-text: var(--neutral-950);
    --card-gallery-focus-outline: var(--primary-700);

    /* Site footer */
    --site-footer-surface: var(--white);
    --site-footer-text: var(--neutral-950);
    --site-footer-text-muted: var(--neutral-700);
    --site-footer-accent: var(--primary-700);
    --site-footer-border: var(--neutral-300);
    --site-footer-focus-outline: var(--primary-700);

    /* Profile grid */
    --profile-grid-surface: var(--white);
    --profile-grid-photo-bg: var(--neutral-100);
    --profile-grid-text: var(--neutral-950);
    --profile-grid-text-muted: var(--neutral-700);
    --profile-grid-accent: var(--primary-700);
    --profile-grid-border: var(--neutral-300);

    /* Login form */
    --login-form-text: var(--neutral-950);
    --login-form-text-muted: var(--neutral-700);
    --login-form-error-text: var(--failure-800);
    --login-form-error-bg: var(--failure-50);
    --login-form-error-border: var(--failure-700);
    --login-form-border: var(--neutral-500);
    --login-form-focus-outline: var(--primary-700);


}

/* ============================================================
   THEME OVERRIDES
   Scoped variable blocks selected by the data-theme attribute
============================================================ */

:root[data-theme="dark"] {
    /* Body */
    --body-bg-color: var(--neutral-950);
    --body-color: var(--neutral-100);

    /* Button */
    --button-focus-outline: var(--neutral-400);
    --button-bg: var(--primary-700);
    --button-bg-hover: var(--primary-800);
    --button-bg-active: var(--primary-700);
    --button-bg-disabled: var(--neutral-800);
    --button-text: var(--neutral-50);
    --button-text-hover: var(--white);
    --button-text-disabled: var(--neutral-500);
    --button-border: var(--primary-500);
    --button-border-hover: var(--primary-400);
    --button-border-disabled: var(--neutral-800);
    --button-secondary-bg: var(--neutral-900);
    --button-secondary-bg-hover: var(--neutral-800);
    --button-secondary-text: var(--neutral-100);
    --button-secondary-text-hover: var(--neutral-50);
    --button-secondary-border: var(--neutral-500);
    --button-secondary-border-hover: var(--neutral-400);
    --button-muted-bg: var(--neutral-800);
    --button-muted-text: var(--neutral-300);
    --button-muted-text-hover: var(--neutral-100);
    --button-muted-border: var(--neutral-700);
    --button-muted-border-hover: var(--neutral-300);
    --button-segmented-bg: var(--neutral-800);
    --button-segmented-text: var(--neutral-300);
    --button-segmented-selected-bg: var(--neutral-900);
    --button-segmented-selected-text: var(--primary-400);
    --button-ghost-text: var(--neutral-400);
    --button-ghost-text-hover: var(--neutral-50);
    --button-ghost-bg-hover: var(--neutral-800);

    /* Dynamic logo */
    --dynamic-logo-text: var(--neutral-50);
    --dynamic-logo-focus-outline: var(--primary-400);

    /* Input */
    --input-bg: var(--neutral-900);
    --input-text: var(--neutral-50);
    --input-border: var(--neutral-500);
    --input-border-hover: var(--neutral-500);
    --input-accent: var(--primary-400);
    --input-placeholder: var(--neutral-400);
    --input-disabled-bg: var(--neutral-800);
    --input-disabled-text: var(--neutral-500);

    /* Radio */
    --radio-bg: var(--neutral-900);
    --radio-bg-disabled: var(--neutral-800);
    --radio-border: var(--neutral-500);
    --radio-border-disabled: var(--neutral-700);

    /* Data table */
    --data-table-bg: var(--neutral-900);
    --data-table-text: var(--neutral-50);
    --data-table-text-muted: var(--neutral-300);
    --data-table-border: var(--neutral-700);
    --data-table-card-border: var(--neutral-600);
    --data-table-error-text: var(--failure-400);
    --data-table-retry-bg: var(--primary-700);
    --data-table-retry-bg-hover: var(--primary-800);
    --data-table-retry-text: var(--white);
    --data-table-scrollbar-track: var(--neutral-800);
    --data-table-scrollbar-thumb: var(--neutral-600);
    --data-table-scrollbar-thumb-hover: var(--neutral-500);

    /* Cell */
    --cell-header-bg: var(--neutral-900);
    --cell-header-bg-hover: var(--neutral-800);
    --cell-header-border: var(--neutral-700);
    --cell-header-text: var(--neutral-50);
    --cell-text: var(--neutral-50);
    --cell-text-muted: var(--neutral-300);
    --cell-text-faint: var(--neutral-400);
    --cell-sorted-bg: var(--primary-950);
    --cell-sorted-text: var(--primary-400);
    --cell-link: var(--primary-400);
    --cell-badge-success-bg: var(--success-900);
    --cell-badge-success-text: var(--success-300);
    --cell-badge-secondary-bg: var(--neutral-700);
    --cell-badge-secondary-text: var(--neutral-300);
    --cell-config-exists: var(--success-500);
    --cell-config-exists-hover: var(--success-400);
    --cell-config-empty: var(--neutral-400);
    --cell-negative: var(--failure-400);

    /* Row */
    --row-bg: var(--neutral-900);
    --row-bg-zebra: var(--neutral-800);
    --row-bg-hover: var(--primary-950);
    --row-border: var(--neutral-700);
    --row-sub-text: var(--neutral-400);

    /* Skeleton */
    --skeleton-base: var(--primary-800);
    --skeleton-highlight: var(--primary-700);

    /* App header bar */
    --app-header-bar-bg: var(--neutral-900);
    --app-header-bar-text: var(--neutral-50);
    --app-header-bar-divider: var(--neutral-700);

    /* Sidebar nav */
    --sidebar-nav-bg: var(--neutral-900);
    --sidebar-nav-border: var(--neutral-700);
    --sidebar-nav-text: var(--neutral-300);
    --sidebar-nav-text-strong: var(--neutral-50);
    --sidebar-nav-text-muted: var(--neutral-300);
    --sidebar-nav-text-faint: var(--neutral-400);
    --sidebar-nav-hover-bg: var(--neutral-800);
    --sidebar-nav-active-bg: var(--primary-950);
    --sidebar-nav-active-text: var(--primary-400);
    --sidebar-nav-badge-bg: var(--failure-600);
    --sidebar-nav-badge-text: var(--white);
    --sidebar-nav-scrollbar-thumb: var(--neutral-600);
    --sidebar-nav-scrollbar-thumb-hover: var(--neutral-500);
    --sidebar-nav-toggle: var(--neutral-400);
    --sidebar-nav-overlay-bg: var(--neutral-950);
    --sidebar-nav-public-bg: var(--neutral-900);
    --sidebar-nav-public-border: var(--neutral-700);
    --sidebar-nav-public-text: var(--neutral-50);
    --sidebar-nav-public-hover-bg: var(--neutral-800);
    --sidebar-nav-public-active-bg: var(--primary-950);
    --sidebar-nav-public-active-text: var(--primary-400);
    --sidebar-nav-public-overlay-bg: color-mix(in srgb, var(--neutral-950) 65%, transparent);
    --sidebar-nav-public-focus-outline: var(--primary-400);

    /* Sidebar viewer */
    --sidebar-viewer-overlay-bg: color-mix(in srgb, var(--neutral-950) 65%, transparent);
    --sidebar-viewer-panel-bg: var(--neutral-900);
    --sidebar-viewer-border: var(--neutral-700);
    --sidebar-viewer-title-text: var(--neutral-50);
    --sidebar-viewer-subtitle-text: var(--primary-400);
    --sidebar-viewer-close-text: var(--neutral-400);
    --sidebar-viewer-close-hover-text: var(--neutral-100);
    --sidebar-viewer-close-hover-bg: var(--neutral-800);
    --sidebar-viewer-body-bg: var(--neutral-950);
    --sidebar-viewer-scrollbar-thumb: var(--neutral-600);
    --sidebar-viewer-scrollbar-thumb-hover: var(--neutral-500);

    /* Pagination */
    --pagination-bg: var(--neutral-900);
    --pagination-bg-hover: var(--neutral-800);
    --pagination-bg-disabled: var(--neutral-800);
    --pagination-border: var(--neutral-500);
    --pagination-border-hover: var(--neutral-500);
    --pagination-border-focus: var(--primary-400);
    --pagination-text: var(--neutral-50);
    --pagination-text-muted: var(--neutral-300);
    --pagination-active-bg: var(--primary-700);
    --pagination-active-text: var(--white);

    /* Group by bar */
    --group-by-bar-bg: var(--neutral-900);
    --group-by-bar-bg-hover: var(--neutral-800);
    --group-by-bar-border: var(--neutral-500);
    --group-by-bar-border-hover: var(--neutral-500);
    --group-by-bar-text: var(--neutral-50);
    --group-by-bar-text-muted: var(--neutral-300);
    --group-by-bar-text-disabled: var(--neutral-500);
    --group-by-bar-option-hover-bg: var(--neutral-800);
    --group-by-bar-option-selected-bg: var(--primary-950);
    --group-by-bar-option-selected-hover-bg: var(--primary-900);
    --group-by-bar-check: var(--primary-400);

    /* Refresh button */
    --refresh-button-bg: var(--neutral-900);
    --refresh-button-bg-hover: var(--neutral-800);
    --refresh-button-border: var(--neutral-500);
    --refresh-button-border-hover: var(--primary-400);
    --refresh-button-icon: var(--neutral-400);
    --refresh-button-icon-hover: var(--primary-400);
    --refresh-button-text: var(--neutral-50);
    --refresh-button-text-muted: var(--neutral-300);

    /* Date range picker */
    --date-range-picker-surface: var(--neutral-900);
    --date-range-picker-surface-hover: var(--neutral-800);
    --date-range-picker-border: var(--neutral-500);
    --date-range-picker-border-panel: var(--neutral-600);
    --date-range-picker-border-hover: var(--neutral-500);
    --date-range-picker-text: var(--neutral-50);
    --date-range-picker-text-muted: var(--neutral-300);
    --date-range-picker-text-disabled: var(--neutral-500);
    --date-range-picker-placeholder: var(--neutral-400);
    --date-range-picker-icon: var(--neutral-400);
    --date-range-picker-accent: var(--primary-400);
    --date-range-picker-accent-hover: var(--primary-300);
    --date-range-picker-on-accent: var(--neutral-950);
    --date-range-picker-preview-end-text: var(--neutral-50);
    --date-range-picker-range-bg: var(--primary-950);
    --date-range-picker-range-hover-bg: var(--primary-800);
    --date-range-picker-scrollbar: var(--neutral-600);
    --date-range-picker-scrollbar-hover: var(--neutral-500);
    --date-range-picker-warning-bg: var(--warning-900);
    --date-range-picker-warning-icon: var(--warning-400);
    --date-range-picker-error: var(--failure-400);

    /* Smart filter bar */
    --smart-filter-bar-surface: var(--neutral-900);
    --smart-filter-bar-text: var(--neutral-50);
    --smart-filter-bar-text-muted: var(--neutral-300);
    --smart-filter-bar-border: var(--neutral-500);
    --smart-filter-bar-border-strong: var(--neutral-500);
    --smart-filter-bar-border-hover: var(--neutral-500);
    --smart-filter-bar-control-bg: var(--neutral-800);
    --smart-filter-bar-surface-hover: var(--neutral-800);
    --smart-filter-bar-accent: var(--primary-400);
    --smart-filter-bar-accent-bg: var(--primary-950);
    --smart-filter-bar-accent-pale: var(--primary-900);
    --smart-filter-bar-scrollbar: var(--neutral-600);
    --smart-filter-bar-scrollbar-hover: var(--neutral-500);
    --smart-filter-bar-warning-icon: var(--failure-400);
    --smart-filter-bar-invalid-bg: var(--failure-950);
    --smart-filter-bar-invalid-text: var(--failure-300);
    --smart-filter-bar-invalid-border: var(--failure-500);

    /* Filter chip */
    --filter-chip-surface: var(--neutral-900);
    --filter-chip-text: var(--neutral-50);
    --filter-chip-text-muted: var(--neutral-300);
    --filter-chip-border: var(--neutral-500);
    --filter-chip-border-strong: var(--neutral-500);
    --filter-chip-border-hover: var(--neutral-500);
    --filter-chip-accent: var(--primary-400);
    --filter-chip-accent-bg: var(--primary-950);
    --filter-chip-accent-pale: var(--primary-900);

    /* Select */
    --select-surface: var(--neutral-900);
    --select-text: var(--neutral-50);
    --select-border: var(--neutral-500);
    --select-border-hover: var(--neutral-500);
    --select-arrow: var(--neutral-400);
    --select-accent: var(--primary-400);
    --select-disabled-bg: var(--neutral-800);
    --select-disabled-text: var(--neutral-500);

    /* Table */
    --table-text: var(--neutral-50);
    --table-text-muted: var(--neutral-300);
    --table-border: var(--neutral-700);
    --table-border-strong: var(--neutral-600);
    --table-row-hover: var(--neutral-800);
    --table-accent: var(--primary-400);

    /* Tabs */
    --tabs-border: var(--neutral-700);
    --tabs-text: var(--neutral-400);
    --tabs-text-hover: var(--neutral-50);
    --tabs-text-disabled: var(--neutral-600);
    --tabs-active: var(--primary-400);

    /* Framework log service */
    --framework-log-service-surface: var(--neutral-900);
    --framework-log-service-surface-raised: var(--neutral-800);
    --framework-log-service-surface-hover: var(--neutral-800);
    --framework-log-service-text: var(--neutral-50);
    --framework-log-service-text-muted: var(--neutral-300);
    --framework-log-service-text-faint: var(--neutral-400);
    --framework-log-service-border: var(--neutral-700);
    --framework-log-service-border-strong: var(--neutral-600);
    --framework-log-service-backdrop: color-mix(in srgb, var(--primary-900) 65%, transparent);
    --framework-log-service-accent: var(--primary-400);
    --framework-log-service-on-accent: var(--neutral-950);
    --framework-log-service-status-ok: var(--success-400);
    --framework-log-service-status-warn: var(--warning-400);
    --framework-log-service-status-error: var(--failure-400);
    --framework-log-service-src-php-bg: var(--primary-900);
    --framework-log-service-src-php-text: var(--primary-200);
    --framework-log-service-src-js-bg: var(--warning-900);
    --framework-log-service-src-js-text: var(--warning-200);
    --framework-log-service-error-row-bg: color-mix(in srgb, var(--failure-500) 22%, transparent);
    --framework-log-service-shadow: rgba(0, 0, 0, 0.5);
    --framework-log-service-hue-0: #ff7979;
    --framework-log-service-hue-1: #fb923c;
    --framework-log-service-hue-2: #fbbf24;
    --framework-log-service-hue-3: #a3e635;
    --framework-log-service-hue-4: #4ade80;
    --framework-log-service-hue-5: #34d399;
    --framework-log-service-hue-6: #2dd4bf;
    --framework-log-service-hue-7: #22d3ee;
    --framework-log-service-hue-8: #38bdf8;
    --framework-log-service-hue-9: #60a5fa;
    --framework-log-service-hue-10: #929eff;
    --framework-log-service-hue-11: #b193ff;
    --framework-log-service-hue-12: #c889ff;
    --framework-log-service-hue-13: #e879f9;
    --framework-log-service-hue-14: #fb75bb;
    --framework-log-service-hue-15: #ff788d;
    --framework-log-service-syntax-keyword: var(--primary-400);
    --framework-log-service-syntax-string: var(--failure-400);
    --framework-log-service-syntax-number: var(--success-400);
    --framework-log-service-syntax-function: var(--warning-300);
    --framework-log-service-syntax-identifier: var(--neutral-100);
    --framework-log-service-syntax-operator: var(--neutral-400);
    --framework-log-service-syntax-punctuation: var(--neutral-400);
    --framework-log-service-syntax-comment: var(--neutral-400);
    --framework-log-service-syntax-filepath: var(--warning-300);
    --framework-log-service-syntax-linenum: var(--success-400);
    --framework-log-service-syntax-stack: var(--primary-400);
    --framework-log-service-syntax-key: var(--primary-400);
    --framework-log-service-syntax-boolean: var(--warning-300);
    --framework-log-service-syntax-null: var(--neutral-400);

    /* Experiment results */
    --experiment-results-panel-bg: var(--neutral-950);
    --experiment-results-card-bg: var(--neutral-900);
    --experiment-results-card-border: var(--neutral-700);
    --experiment-results-section-label: var(--primary-400);
    --experiment-results-name: var(--neutral-50);
    --experiment-results-type-text: var(--neutral-400);
    --experiment-results-type-border: var(--neutral-700);
    --experiment-results-url-text: var(--neutral-400);
    --experiment-results-head-text: var(--neutral-400);
    --experiment-results-head-border: var(--neutral-700);
    --experiment-results-row-text: var(--neutral-300);
    --experiment-results-num: var(--neutral-50);
    --experiment-results-win-text: var(--success-400);
    --experiment-results-base-dot: var(--neutral-500);
    --experiment-results-var-dot: var(--primary-400);
    --experiment-results-context-text: var(--neutral-50);
    --experiment-results-meta-text: var(--neutral-400);

    /* Experiment editor */
    --experiment-editor-bg: var(--neutral-900);
    --experiment-editor-text: var(--neutral-300);
    --experiment-editor-text-strong: var(--neutral-50);
    --experiment-editor-text-muted: var(--neutral-300);
    --experiment-editor-text-faint: var(--neutral-400);
    --experiment-editor-border: var(--neutral-700);
    --experiment-editor-hover-bg: var(--neutral-800);
    --experiment-editor-active-bg: var(--primary-950);
    --experiment-editor-active-text: var(--primary-400);
    --experiment-editor-accent: var(--primary-400);
    --experiment-editor-save-bg: var(--primary-700);
    --experiment-editor-save-bg-hover: var(--primary-800);
    --experiment-editor-save-text: var(--neutral-50);
    --experiment-editor-switch-on-text: var(--primary-400);
    --experiment-editor-saved-bg: var(--success-900);
    --experiment-editor-saved-text: var(--success-300);

    /* Ip permissions editor */
    --ip-permissions-editor-text: var(--neutral-100);
    --ip-permissions-editor-text-muted: var(--neutral-400);
    --ip-permissions-editor-border: var(--neutral-500);
    --ip-permissions-editor-accent: var(--primary-400);
    --ip-permissions-editor-hover-bg: var(--neutral-800);
    --ip-permissions-editor-error-bg: var(--failure-950);
    --ip-permissions-editor-error-text: var(--failure-300);
    --ip-permissions-editor-warning-bg: var(--warning-950);
    --ip-permissions-editor-warning-text: var(--warning-300);
    --ip-permissions-editor-remove-bg: var(--failure-700);
    --ip-permissions-editor-remove-bg-hover: var(--failure-800);
    --ip-permissions-editor-remove-text: var(--neutral-50);

    /* Access tokens editor */
    --access-tokens-editor-text: var(--neutral-100);
    --access-tokens-editor-text-muted: var(--neutral-400);
    --access-tokens-editor-border: var(--neutral-500);
    --access-tokens-editor-error-bg: var(--failure-950);
    --access-tokens-editor-error-text: var(--failure-300);
    --access-tokens-editor-warning-bg: var(--warning-950);
    --access-tokens-editor-warning-text: var(--warning-300);
    --access-tokens-editor-success-bg: var(--success-900);
    --access-tokens-editor-success-text: var(--success-300);

    /* Kanban board */
    --kanban-board-surface: var(--neutral-900);
    --kanban-board-lane-bg: var(--neutral-950);
    --kanban-board-border: var(--neutral-500);
    --kanban-board-text: var(--neutral-50);
    --kanban-board-text-muted: var(--neutral-400);
    --kanban-board-accent: var(--primary-400);
    --kanban-board-lane-ideas-summary-bg: #450a0a;
    --kanban-board-lane-ideas-summary-text: #fecaca;
    --kanban-board-lane-todo-summary-bg: #431407;
    --kanban-board-lane-todo-summary-text: #fed7aa;
    --kanban-board-lane-progress-summary-bg: #422006;
    --kanban-board-lane-progress-summary-text: #fef08a;
    --kanban-board-lane-review-summary-bg: #052e16;
    --kanban-board-lane-review-summary-text: #bbf7d0;
    --kanban-board-lane-development-summary-bg: #172554;
    --kanban-board-lane-development-summary-text: #bfdbfe;
    --kanban-board-lane-production-summary-bg: #2e1065;
    --kanban-board-lane-production-summary-text: #ddd6fe;
    --kanban-board-status-ok: var(--success-400);
    --kanban-board-error: var(--failure-400);

    /* Kanban card */
    --kanban-card-surface: var(--neutral-900);
    --kanban-card-surface-muted: var(--neutral-800);
    --kanban-card-surface-hover: var(--neutral-800);
    --kanban-card-border: var(--neutral-500);
    --kanban-card-border-focus: var(--primary-400);
    --kanban-card-text: var(--neutral-50);
    --kanban-card-text-muted: var(--neutral-400);

    /* Kanban ticket editor */
    --kanban-ticket-editor-backdrop: color-mix(in srgb, var(--neutral-950) 72%, transparent);
    --kanban-ticket-editor-surface: var(--neutral-800);
    --kanban-ticket-editor-surface-muted: var(--neutral-900);
    --kanban-ticket-editor-border: var(--neutral-500);
    --kanban-ticket-editor-text: var(--neutral-50);
    --kanban-ticket-editor-text-muted: var(--neutral-300);
    --kanban-ticket-editor-accent: var(--primary-400);
    --kanban-ticket-editor-hover-bg: var(--neutral-700);
    --kanban-ticket-editor-focus-bg: var(--primary-950);
    --kanban-ticket-editor-input-bg: var(--neutral-900);
    --kanban-ticket-editor-action-bg: var(--neutral-700);
    --kanban-ticket-editor-action-hover-bg: var(--neutral-600);
    --kanban-ticket-editor-error-bg: var(--failure-950);
    --kanban-ticket-editor-error-text: var(--failure-300);

    /* Checklist */
    --checklist-surface: var(--neutral-800);
    --checklist-border: var(--neutral-500);
    --checklist-text: var(--neutral-50);
    --checklist-text-muted: var(--neutral-300);
    --checklist-accent: var(--primary-400);
    --checklist-hover-bg: var(--neutral-700);
    --checklist-focus-bg: var(--primary-950);
    --checklist-action-bg: var(--neutral-700);
    --checklist-action-hover-bg: var(--neutral-600);

    /* Experiment preview */
    --experiment-preview-bg: var(--neutral-950);
    --experiment-preview-surface: var(--neutral-900);
    --experiment-preview-border: var(--neutral-700);
    --experiment-preview-text: var(--neutral-300);
    --experiment-preview-text-muted: var(--neutral-300);
    --experiment-preview-accent: var(--primary-400);
    --experiment-preview-accent-bg: var(--primary-950);
    --experiment-preview-frame-border: var(--neutral-700);
    --experiment-preview-frame-bg: var(--neutral-900);
    --experiment-preview-challenger-accent: var(--primary-400);

    /* Site layout */
    --site-layout-surface: var(--neutral-950);
    --site-layout-text: var(--neutral-50);

    /* Content section */
    --content-section-surface: var(--neutral-950);
    --content-section-surface-soft: var(--neutral-900);
    --content-section-text: var(--neutral-50);
    --content-section-text-muted: var(--neutral-300);
    --content-section-accent: var(--primary-400);
    --content-section-border: var(--neutral-700);
    --content-section-focus-outline: var(--primary-400);

    /* Form card */
    --form-card-page-bg: var(--neutral-950);
    --form-card-surface: var(--neutral-900);
    --form-card-text: var(--neutral-50);
    --form-card-text-muted: var(--neutral-300);
    --form-card-accent: var(--primary-400);
    --form-card-focus-outline: var(--primary-400);
    --form-card-shadow: rgb(0 0 0 / 50%);

    /* Hero */
    --hero-surface: var(--neutral-900);
    --hero-text: var(--neutral-50);
    --hero-text-muted: var(--neutral-300);
    --hero-accent: var(--primary-400);
    --hero-focus-outline: var(--primary-400);
    --hero-motion-paper: #efe1c6;

    /* Stats bar */
    --stats-bar-surface: var(--neutral-950);
    --stats-bar-text: var(--neutral-50);
    --stats-bar-text-muted: var(--neutral-300);
    --stats-bar-border: var(--neutral-700);

    /* Card grid */
    --card-grid-surface: var(--neutral-950);
    --card-grid-text: var(--neutral-50);
    --card-grid-text-muted: var(--neutral-300);
    --card-grid-accent: var(--primary-400);
    --card-grid-icon-bg: var(--primary-950);
    --card-grid-border: var(--neutral-700);

    /* Call to action */
    --call-to-action-surface: var(--neutral-950);
    --call-to-action-text: var(--neutral-50);
    --call-to-action-accent: var(--primary-400);
    --call-to-action-border: var(--neutral-700);
    --call-to-action-focus-outline: var(--primary-400);

    /* Logo cloud */
    --logo-cloud-surface: var(--neutral-950);
    --logo-cloud-text: var(--neutral-50);
    --logo-cloud-text-muted: var(--neutral-300);
    --logo-cloud-accent: var(--primary-400);
    --logo-cloud-hover-bg: var(--neutral-800);
    --logo-cloud-focus-outline: var(--primary-400);

    /* Card gallery */
    --card-gallery-counter-bg: var(--neutral-900);
    --card-gallery-counter-text: var(--neutral-50);
    --card-gallery-focus-outline: var(--primary-400);

    /* Site footer */
    --site-footer-surface: var(--neutral-900);
    --site-footer-text: var(--neutral-50);
    --site-footer-text-muted: var(--neutral-300);
    --site-footer-accent: var(--primary-400);
    --site-footer-border: var(--neutral-700);
    --site-footer-focus-outline: var(--primary-400);

    /* Profile grid */
    --profile-grid-surface: var(--neutral-900);
    --profile-grid-photo-bg: var(--neutral-800);
    --profile-grid-text: var(--neutral-50);
    --profile-grid-text-muted: var(--neutral-300);
    --profile-grid-accent: var(--primary-400);
    --profile-grid-border: var(--neutral-600);

    /* Login form */
    --login-form-text: var(--neutral-50);
    --login-form-text-muted: var(--neutral-300);
    --login-form-error-text: var(--failure-300);
    --login-form-error-bg: var(--failure-950);
    --login-form-error-border: var(--failure-500);
    --login-form-focus-outline: var(--primary-400);


}

/* ============================================================
   ACCENT PALETTES
   Scoped --primary-* blocks selected by the data-accent attribute
============================================================ */

/* Primary Palette: tailwind-amber */
:root[data-accent="tailwind-amber"] {
    --primary-50:  #fffbeb;
    --primary-100: #fef3c7;
    --primary-200: #fde68a;
    --primary-300: #fcd34d;
    --primary-400: #fbbf24;
    --primary-500: #f59e0b;
    --primary-600: #d97706;
    --primary-700: #b45309;
    --primary-800: #92400e;
    --primary-900: #78350f;
    --primary-950: #451a03;
}

/* Primary Palette: tailwind-blue */
:root[data-accent="tailwind-blue"] {
    --primary-50:  #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    --primary-950: #172554;
}

/* Primary Palette: tailwind-cyan */
:root[data-accent="tailwind-cyan"] {
    --primary-50:  #ecfeff;
    --primary-100: #cffafe;
    --primary-200: #a5f3fc;
    --primary-300: #67e8f9;
    --primary-400: #22d3ee;
    --primary-500: #06b6d4;
    --primary-600: #0891b2;
    --primary-700: #0e7490;
    --primary-800: #155e75;
    --primary-900: #164e63;
    --primary-950: #083344;
}

/* Primary Palette: tailwind-emerald */
:root[data-accent="tailwind-emerald"] {
    --primary-50:  #ecfdf5;
    --primary-100: #d1fae5;
    --primary-200: #a7f3d0;
    --primary-300: #6ee7b7;
    --primary-400: #34d399;
    --primary-500: #10b981;
    --primary-600: #059669;
    --primary-700: #047857;
    --primary-800: #065f46;
    --primary-900: #064e3b;
    --primary-950: #022c22;
}

/* Primary Palette: tailwind-fuchsia */
:root[data-accent="tailwind-fuchsia"] {
    --primary-50:  #fdf4ff;
    --primary-100: #fae8ff;
    --primary-200: #f5d0fe;
    --primary-300: #f0abfc;
    --primary-400: #e879f9;
    --primary-500: #d946ef;
    --primary-600: #c026d3;
    --primary-700: #a21caf;
    --primary-800: #86198f;
    --primary-900: #701a75;
    --primary-950: #4a044e;
}

/* Primary Palette: tailwind-green */
:root[data-accent="tailwind-green"] {
    --primary-50:  #f0fdf4;
    --primary-100: #dcfce7;
    --primary-200: #bbf7d0;
    --primary-300: #86efac;
    --primary-400: #4ade80;
    --primary-500: #22c55e;
    --primary-600: #16a34a;
    --primary-700: #15803d;
    --primary-800: #166534;
    --primary-900: #14532d;
    --primary-950: #052e16;
}

/* Primary Palette: tailwind-indigo */
:root[data-accent="tailwind-indigo"] {
    --primary-50:  #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #312e81;
    --primary-950: #1e1b4b;
}

/* Primary Palette: tailwind-lime */
:root[data-accent="tailwind-lime"] {
    --primary-50:  #f7fee7;
    --primary-100: #ecfccb;
    --primary-200: #d9f99d;
    --primary-300: #bef264;
    --primary-400: #a3e635;
    --primary-500: #84cc16;
    --primary-600: #65a30d;
    --primary-700: #4d7c0f;
    --primary-800: #3f6212;
    --primary-900: #365314;
    --primary-950: #1a2e05;
}

/* Primary Palette: tailwind-orange */
:root[data-accent="tailwind-orange"] {
    --primary-50:  #fff7ed;
    --primary-100: #ffedd5;
    --primary-200: #fed7aa;
    --primary-300: #fdba74;
    --primary-400: #fb923c;
    --primary-500: #f97316;
    --primary-600: #ea580c;
    --primary-700: #c2410c;
    --primary-800: #9a3412;
    --primary-900: #7c2d12;
    --primary-950: #431407;
}

/* Primary Palette: tailwind-pink */
:root[data-accent="tailwind-pink"] {
    --primary-50:  #fdf2f8;
    --primary-100: #fce7f3;
    --primary-200: #fbcfe8;
    --primary-300: #f9a8d4;
    --primary-400: #f472b6;
    --primary-500: #ec4899;
    --primary-600: #db2777;
    --primary-700: #be185d;
    --primary-800: #9d174d;
    --primary-900: #831843;
    --primary-950: #500724;
}

/* Primary Palette: tailwind-purple */
:root[data-accent="tailwind-purple"] {
    --primary-50:  #faf5ff;
    --primary-100: #f3e8ff;
    --primary-200: #e9d5ff;
    --primary-300: #d8b4fe;
    --primary-400: #c084fc;
    --primary-500: #a855f7;
    --primary-600: #9333ea;
    --primary-700: #7e22ce;
    --primary-800: #6b21a8;
    --primary-900: #581c87;
    --primary-950: #3b0764;
}

/* Primary Palette: tailwind-red */
:root[data-accent="tailwind-red"] {
    --primary-50:  #fef2f2;
    --primary-100: #fee2e2;
    --primary-200: #fecaca;
    --primary-300: #fca5a5;
    --primary-400: #f87171;
    --primary-500: #ef4444;
    --primary-600: #dc2626;
    --primary-700: #b91c1c;
    --primary-800: #991b1b;
    --primary-900: #7f1d1d;
    --primary-950: #450a0a;
}

/* Primary Palette: tailwind-rose */
:root[data-accent="tailwind-rose"] {
    --primary-50:  #fff1f2;
    --primary-100: #ffe4e6;
    --primary-200: #fecdd3;
    --primary-300: #fda4af;
    --primary-400: #fb7185;
    --primary-500: #f43f5e;
    --primary-600: #e11d48;
    --primary-700: #be123c;
    --primary-800: #9f1239;
    --primary-900: #881337;
    --primary-950: #4c0519;
}

/* Primary Palette: tailwind-sky */
:root[data-accent="tailwind-sky"] {
    --primary-50:  #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-200: #bae6fd;
    --primary-300: #7dd3fc;
    --primary-400: #38bdf8;
    --primary-500: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --primary-800: #075985;
    --primary-900: #0c4a6e;
    --primary-950: #082f49;
}

/* Primary Palette: tailwind-teal */
:root[data-accent="tailwind-teal"] {
    --primary-50:  #f0fdfa;
    --primary-100: #ccfbf1;
    --primary-200: #99f6e4;
    --primary-300: #5eead4;
    --primary-400: #2dd4bf;
    --primary-500: #14b8a6;
    --primary-600: #0d9488;
    --primary-700: #0f766e;
    --primary-800: #115e59;
    --primary-900: #134e4a;
    --primary-950: #042f2e;
}

/* Primary Palette: tailwind-violet */
:root[data-accent="tailwind-violet"] {
    --primary-50:  #f5f3ff;
    --primary-100: #ede9fe;
    --primary-200: #ddd6fe;
    --primary-300: #c4b5fd;
    --primary-400: #a78bfa;
    --primary-500: #8b5cf6;
    --primary-600: #7c3aed;
    --primary-700: #6d28d9;
    --primary-800: #5b21b6;
    --primary-900: #4c1d95;
    --primary-950: #2e1065;
}

/* Primary Palette: tailwind-yellow */
:root[data-accent="tailwind-yellow"] {
    --primary-50:  #fefce8;
    --primary-100: #fef9c3;
    --primary-200: #fef08a;
    --primary-300: #fde047;
    --primary-400: #facc15;
    --primary-500: #eab308;
    --primary-600: #ca8a04;
    --primary-700: #a16207;
    --primary-800: #854d0e;
    --primary-900: #713f12;
    --primary-950: #422006;
}

/* ============================================================
   SURFACE PALETTES
   Scoped --neutral-* blocks selected by the data-surface attribute
============================================================ */

/* Neutral Palette: tailwind-gray */
:root[data-surface="tailwind-gray"] {
    --neutral-50:  #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;
}

/* Neutral Palette: tailwind-neutral */
:root[data-surface="tailwind-neutral"] {
    --neutral-50:  #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --neutral-950: #0a0a0a;
}

/* Neutral Palette: tailwind-slate */
:root[data-surface="tailwind-slate"] {
    --neutral-50:  #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    --neutral-950: #020617;
}

/* Neutral Palette: tailwind-stone */
:root[data-surface="tailwind-stone"] {
    --neutral-50:  #fafaf9;
    --neutral-100: #f5f5f4;
    --neutral-200: #e7e5e4;
    --neutral-300: #d6d3d1;
    --neutral-400: #a8a29e;
    --neutral-500: #78716c;
    --neutral-600: #57534e;
    --neutral-700: #44403c;
    --neutral-800: #292524;
    --neutral-900: #1c1917;
    --neutral-950: #0c0a09;
}

/* Neutral Palette: tailwind-zinc */
:root[data-surface="tailwind-zinc"] {
    --neutral-50:  #fafafa;
    --neutral-100: #f4f4f5;
    --neutral-200: #e4e4e7;
    --neutral-300: #d4d4d8;
    --neutral-400: #a1a1aa;
    --neutral-500: #71717a;
    --neutral-600: #52525b;
    --neutral-700: #3f3f46;
    --neutral-800: #27272a;
    --neutral-900: #18181b;
    --neutral-950: #09090b;
}

/* ============================================================
   PALETTE CATALOG
   Flat, always-on copy of every palette ramp for JS to read as
   var(--palette-<name>-<step>). Intentionally duplicates the
   data-accent ramps (same hexes, different job) - do not dedupe.
   The two name lists let a consumer scope itself to colours or
   neutrals; the ramps carry both.
============================================================ */

:root {
	--palette-color-names: tailwind-amber tailwind-blue tailwind-cyan tailwind-emerald tailwind-fuchsia tailwind-green tailwind-indigo tailwind-lime tailwind-orange tailwind-pink tailwind-purple tailwind-red tailwind-rose tailwind-sky tailwind-teal tailwind-violet tailwind-yellow;
	--palette-neutral-names: tailwind-gray tailwind-neutral tailwind-slate tailwind-stone tailwind-zinc;
}

/* Palette-tailwind-amber Palette: tailwind-amber */
:root {
    --palette-tailwind-amber-50:  #fffbeb;
    --palette-tailwind-amber-100: #fef3c7;
    --palette-tailwind-amber-200: #fde68a;
    --palette-tailwind-amber-300: #fcd34d;
    --palette-tailwind-amber-400: #fbbf24;
    --palette-tailwind-amber-500: #f59e0b;
    --palette-tailwind-amber-600: #d97706;
    --palette-tailwind-amber-700: #b45309;
    --palette-tailwind-amber-800: #92400e;
    --palette-tailwind-amber-900: #78350f;
    --palette-tailwind-amber-950: #451a03;
}

/* Palette-tailwind-blue Palette: tailwind-blue */
:root {
    --palette-tailwind-blue-50:  #eff6ff;
    --palette-tailwind-blue-100: #dbeafe;
    --palette-tailwind-blue-200: #bfdbfe;
    --palette-tailwind-blue-300: #93c5fd;
    --palette-tailwind-blue-400: #60a5fa;
    --palette-tailwind-blue-500: #3b82f6;
    --palette-tailwind-blue-600: #2563eb;
    --palette-tailwind-blue-700: #1d4ed8;
    --palette-tailwind-blue-800: #1e40af;
    --palette-tailwind-blue-900: #1e3a8a;
    --palette-tailwind-blue-950: #172554;
}

/* Palette-tailwind-cyan Palette: tailwind-cyan */
:root {
    --palette-tailwind-cyan-50:  #ecfeff;
    --palette-tailwind-cyan-100: #cffafe;
    --palette-tailwind-cyan-200: #a5f3fc;
    --palette-tailwind-cyan-300: #67e8f9;
    --palette-tailwind-cyan-400: #22d3ee;
    --palette-tailwind-cyan-500: #06b6d4;
    --palette-tailwind-cyan-600: #0891b2;
    --palette-tailwind-cyan-700: #0e7490;
    --palette-tailwind-cyan-800: #155e75;
    --palette-tailwind-cyan-900: #164e63;
    --palette-tailwind-cyan-950: #083344;
}

/* Palette-tailwind-emerald Palette: tailwind-emerald */
:root {
    --palette-tailwind-emerald-50:  #ecfdf5;
    --palette-tailwind-emerald-100: #d1fae5;
    --palette-tailwind-emerald-200: #a7f3d0;
    --palette-tailwind-emerald-300: #6ee7b7;
    --palette-tailwind-emerald-400: #34d399;
    --palette-tailwind-emerald-500: #10b981;
    --palette-tailwind-emerald-600: #059669;
    --palette-tailwind-emerald-700: #047857;
    --palette-tailwind-emerald-800: #065f46;
    --palette-tailwind-emerald-900: #064e3b;
    --palette-tailwind-emerald-950: #022c22;
}

/* Palette-tailwind-fuchsia Palette: tailwind-fuchsia */
:root {
    --palette-tailwind-fuchsia-50:  #fdf4ff;
    --palette-tailwind-fuchsia-100: #fae8ff;
    --palette-tailwind-fuchsia-200: #f5d0fe;
    --palette-tailwind-fuchsia-300: #f0abfc;
    --palette-tailwind-fuchsia-400: #e879f9;
    --palette-tailwind-fuchsia-500: #d946ef;
    --palette-tailwind-fuchsia-600: #c026d3;
    --palette-tailwind-fuchsia-700: #a21caf;
    --palette-tailwind-fuchsia-800: #86198f;
    --palette-tailwind-fuchsia-900: #701a75;
    --palette-tailwind-fuchsia-950: #4a044e;
}

/* Palette-tailwind-green Palette: tailwind-green */
:root {
    --palette-tailwind-green-50:  #f0fdf4;
    --palette-tailwind-green-100: #dcfce7;
    --palette-tailwind-green-200: #bbf7d0;
    --palette-tailwind-green-300: #86efac;
    --palette-tailwind-green-400: #4ade80;
    --palette-tailwind-green-500: #22c55e;
    --palette-tailwind-green-600: #16a34a;
    --palette-tailwind-green-700: #15803d;
    --palette-tailwind-green-800: #166534;
    --palette-tailwind-green-900: #14532d;
    --palette-tailwind-green-950: #052e16;
}

/* Palette-tailwind-indigo Palette: tailwind-indigo */
:root {
    --palette-tailwind-indigo-50:  #eef2ff;
    --palette-tailwind-indigo-100: #e0e7ff;
    --palette-tailwind-indigo-200: #c7d2fe;
    --palette-tailwind-indigo-300: #a5b4fc;
    --palette-tailwind-indigo-400: #818cf8;
    --palette-tailwind-indigo-500: #6366f1;
    --palette-tailwind-indigo-600: #4f46e5;
    --palette-tailwind-indigo-700: #4338ca;
    --palette-tailwind-indigo-800: #3730a3;
    --palette-tailwind-indigo-900: #312e81;
    --palette-tailwind-indigo-950: #1e1b4b;
}

/* Palette-tailwind-lime Palette: tailwind-lime */
:root {
    --palette-tailwind-lime-50:  #f7fee7;
    --palette-tailwind-lime-100: #ecfccb;
    --palette-tailwind-lime-200: #d9f99d;
    --palette-tailwind-lime-300: #bef264;
    --palette-tailwind-lime-400: #a3e635;
    --palette-tailwind-lime-500: #84cc16;
    --palette-tailwind-lime-600: #65a30d;
    --palette-tailwind-lime-700: #4d7c0f;
    --palette-tailwind-lime-800: #3f6212;
    --palette-tailwind-lime-900: #365314;
    --palette-tailwind-lime-950: #1a2e05;
}

/* Palette-tailwind-orange Palette: tailwind-orange */
:root {
    --palette-tailwind-orange-50:  #fff7ed;
    --palette-tailwind-orange-100: #ffedd5;
    --palette-tailwind-orange-200: #fed7aa;
    --palette-tailwind-orange-300: #fdba74;
    --palette-tailwind-orange-400: #fb923c;
    --palette-tailwind-orange-500: #f97316;
    --palette-tailwind-orange-600: #ea580c;
    --palette-tailwind-orange-700: #c2410c;
    --palette-tailwind-orange-800: #9a3412;
    --palette-tailwind-orange-900: #7c2d12;
    --palette-tailwind-orange-950: #431407;
}

/* Palette-tailwind-pink Palette: tailwind-pink */
:root {
    --palette-tailwind-pink-50:  #fdf2f8;
    --palette-tailwind-pink-100: #fce7f3;
    --palette-tailwind-pink-200: #fbcfe8;
    --palette-tailwind-pink-300: #f9a8d4;
    --palette-tailwind-pink-400: #f472b6;
    --palette-tailwind-pink-500: #ec4899;
    --palette-tailwind-pink-600: #db2777;
    --palette-tailwind-pink-700: #be185d;
    --palette-tailwind-pink-800: #9d174d;
    --palette-tailwind-pink-900: #831843;
    --palette-tailwind-pink-950: #500724;
}

/* Palette-tailwind-purple Palette: tailwind-purple */
:root {
    --palette-tailwind-purple-50:  #faf5ff;
    --palette-tailwind-purple-100: #f3e8ff;
    --palette-tailwind-purple-200: #e9d5ff;
    --palette-tailwind-purple-300: #d8b4fe;
    --palette-tailwind-purple-400: #c084fc;
    --palette-tailwind-purple-500: #a855f7;
    --palette-tailwind-purple-600: #9333ea;
    --palette-tailwind-purple-700: #7e22ce;
    --palette-tailwind-purple-800: #6b21a8;
    --palette-tailwind-purple-900: #581c87;
    --palette-tailwind-purple-950: #3b0764;
}

/* Palette-tailwind-red Palette: tailwind-red */
:root {
    --palette-tailwind-red-50:  #fef2f2;
    --palette-tailwind-red-100: #fee2e2;
    --palette-tailwind-red-200: #fecaca;
    --palette-tailwind-red-300: #fca5a5;
    --palette-tailwind-red-400: #f87171;
    --palette-tailwind-red-500: #ef4444;
    --palette-tailwind-red-600: #dc2626;
    --palette-tailwind-red-700: #b91c1c;
    --palette-tailwind-red-800: #991b1b;
    --palette-tailwind-red-900: #7f1d1d;
    --palette-tailwind-red-950: #450a0a;
}

/* Palette-tailwind-rose Palette: tailwind-rose */
:root {
    --palette-tailwind-rose-50:  #fff1f2;
    --palette-tailwind-rose-100: #ffe4e6;
    --palette-tailwind-rose-200: #fecdd3;
    --palette-tailwind-rose-300: #fda4af;
    --palette-tailwind-rose-400: #fb7185;
    --palette-tailwind-rose-500: #f43f5e;
    --palette-tailwind-rose-600: #e11d48;
    --palette-tailwind-rose-700: #be123c;
    --palette-tailwind-rose-800: #9f1239;
    --palette-tailwind-rose-900: #881337;
    --palette-tailwind-rose-950: #4c0519;
}

/* Palette-tailwind-sky Palette: tailwind-sky */
:root {
    --palette-tailwind-sky-50:  #f0f9ff;
    --palette-tailwind-sky-100: #e0f2fe;
    --palette-tailwind-sky-200: #bae6fd;
    --palette-tailwind-sky-300: #7dd3fc;
    --palette-tailwind-sky-400: #38bdf8;
    --palette-tailwind-sky-500: #0ea5e9;
    --palette-tailwind-sky-600: #0284c7;
    --palette-tailwind-sky-700: #0369a1;
    --palette-tailwind-sky-800: #075985;
    --palette-tailwind-sky-900: #0c4a6e;
    --palette-tailwind-sky-950: #082f49;
}

/* Palette-tailwind-teal Palette: tailwind-teal */
:root {
    --palette-tailwind-teal-50:  #f0fdfa;
    --palette-tailwind-teal-100: #ccfbf1;
    --palette-tailwind-teal-200: #99f6e4;
    --palette-tailwind-teal-300: #5eead4;
    --palette-tailwind-teal-400: #2dd4bf;
    --palette-tailwind-teal-500: #14b8a6;
    --palette-tailwind-teal-600: #0d9488;
    --palette-tailwind-teal-700: #0f766e;
    --palette-tailwind-teal-800: #115e59;
    --palette-tailwind-teal-900: #134e4a;
    --palette-tailwind-teal-950: #042f2e;
}

/* Palette-tailwind-violet Palette: tailwind-violet */
:root {
    --palette-tailwind-violet-50:  #f5f3ff;
    --palette-tailwind-violet-100: #ede9fe;
    --palette-tailwind-violet-200: #ddd6fe;
    --palette-tailwind-violet-300: #c4b5fd;
    --palette-tailwind-violet-400: #a78bfa;
    --palette-tailwind-violet-500: #8b5cf6;
    --palette-tailwind-violet-600: #7c3aed;
    --palette-tailwind-violet-700: #6d28d9;
    --palette-tailwind-violet-800: #5b21b6;
    --palette-tailwind-violet-900: #4c1d95;
    --palette-tailwind-violet-950: #2e1065;
}

/* Palette-tailwind-yellow Palette: tailwind-yellow */
:root {
    --palette-tailwind-yellow-50:  #fefce8;
    --palette-tailwind-yellow-100: #fef9c3;
    --palette-tailwind-yellow-200: #fef08a;
    --palette-tailwind-yellow-300: #fde047;
    --palette-tailwind-yellow-400: #facc15;
    --palette-tailwind-yellow-500: #eab308;
    --palette-tailwind-yellow-600: #ca8a04;
    --palette-tailwind-yellow-700: #a16207;
    --palette-tailwind-yellow-800: #854d0e;
    --palette-tailwind-yellow-900: #713f12;
    --palette-tailwind-yellow-950: #422006;
}

/* Palette-tailwind-gray Palette: tailwind-gray */
:root {
    --palette-tailwind-gray-50:  #f9fafb;
    --palette-tailwind-gray-100: #f3f4f6;
    --palette-tailwind-gray-200: #e5e7eb;
    --palette-tailwind-gray-300: #d1d5db;
    --palette-tailwind-gray-400: #9ca3af;
    --palette-tailwind-gray-500: #6b7280;
    --palette-tailwind-gray-600: #4b5563;
    --palette-tailwind-gray-700: #374151;
    --palette-tailwind-gray-800: #1f2937;
    --palette-tailwind-gray-900: #111827;
    --palette-tailwind-gray-950: #030712;
}

/* Palette-tailwind-neutral Palette: tailwind-neutral */
:root {
    --palette-tailwind-neutral-50:  #fafafa;
    --palette-tailwind-neutral-100: #f5f5f5;
    --palette-tailwind-neutral-200: #e5e5e5;
    --palette-tailwind-neutral-300: #d4d4d4;
    --palette-tailwind-neutral-400: #a3a3a3;
    --palette-tailwind-neutral-500: #737373;
    --palette-tailwind-neutral-600: #525252;
    --palette-tailwind-neutral-700: #404040;
    --palette-tailwind-neutral-800: #262626;
    --palette-tailwind-neutral-900: #171717;
    --palette-tailwind-neutral-950: #0a0a0a;
}

/* Palette-tailwind-slate Palette: tailwind-slate */
:root {
    --palette-tailwind-slate-50:  #f8fafc;
    --palette-tailwind-slate-100: #f1f5f9;
    --palette-tailwind-slate-200: #e2e8f0;
    --palette-tailwind-slate-300: #cbd5e1;
    --palette-tailwind-slate-400: #94a3b8;
    --palette-tailwind-slate-500: #64748b;
    --palette-tailwind-slate-600: #475569;
    --palette-tailwind-slate-700: #334155;
    --palette-tailwind-slate-800: #1e293b;
    --palette-tailwind-slate-900: #0f172a;
    --palette-tailwind-slate-950: #020617;
}

/* Palette-tailwind-stone Palette: tailwind-stone */
:root {
    --palette-tailwind-stone-50:  #fafaf9;
    --palette-tailwind-stone-100: #f5f5f4;
    --palette-tailwind-stone-200: #e7e5e4;
    --palette-tailwind-stone-300: #d6d3d1;
    --palette-tailwind-stone-400: #a8a29e;
    --palette-tailwind-stone-500: #78716c;
    --palette-tailwind-stone-600: #57534e;
    --palette-tailwind-stone-700: #44403c;
    --palette-tailwind-stone-800: #292524;
    --palette-tailwind-stone-900: #1c1917;
    --palette-tailwind-stone-950: #0c0a09;
}

/* Palette-tailwind-zinc Palette: tailwind-zinc */
:root {
    --palette-tailwind-zinc-50:  #fafafa;
    --palette-tailwind-zinc-100: #f4f4f5;
    --palette-tailwind-zinc-200: #e4e4e7;
    --palette-tailwind-zinc-300: #d4d4d8;
    --palette-tailwind-zinc-400: #a1a1aa;
    --palette-tailwind-zinc-500: #71717a;
    --palette-tailwind-zinc-600: #52525b;
    --palette-tailwind-zinc-700: #3f3f46;
    --palette-tailwind-zinc-800: #27272a;
    --palette-tailwind-zinc-900: #18181b;
    --palette-tailwind-zinc-950: #09090b;
}

/* ============================================================
   MEDIA VARIABLES
   CSS custom properties for media (images, videos, SVG, content)
============================================================ */

:root {
            --logo-svg-display: block;
                --logo-svg-url: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
                --logo-svg-url-mobile: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
            --bars-3-outline-svg-display: block;
                --bars-3-outline-svg-url: url('/framework/images/icons/bars-3-outline.svg');
                --bars-3-outline-svg-url-mobile: url('/framework/images/icons/bars-3-outline.svg');
            --kanban-ticket-complete-svg-display: block;
                --kanban-ticket-complete-svg-url: url('/framework/images/icons/check-outline.svg');
                --kanban-ticket-complete-svg-url-mobile: url('/framework/images/icons/check-outline.svg');
            --kanban-ticket-assignee-svg-display: block;
                --kanban-ticket-assignee-svg-url: url('/framework/images/icons/user-circle-outline.svg');
                --kanban-ticket-assignee-svg-url-mobile: url('/framework/images/icons/user-circle-outline.svg');
            --kanban-ticket-calendar-svg-display: block;
                --kanban-ticket-calendar-svg-url: url('/framework/images/icons/calendar-days-outline.svg');
                --kanban-ticket-calendar-svg-url-mobile: url('/framework/images/icons/calendar-days-outline.svg');
            --kanban-ticket-close-svg-display: block;
                --kanban-ticket-close-svg-url: url('/framework/images/icons/x-mark-outline.svg');
                --kanban-ticket-close-svg-url-mobile: url('/framework/images/icons/x-mark-outline.svg');
            --kanban-ticket-more-svg-display: block;
                --kanban-ticket-more-svg-url: url('/framework/images/icons/ellipsis-horizontal-outline.svg');
                --kanban-ticket-more-svg-url-mobile: url('/framework/images/icons/ellipsis-horizontal-outline.svg');
            --kanban-ticket-edit-svg-display: block;
                --kanban-ticket-edit-svg-url: url('/framework/images/icons/pencil-square-mini.svg');
                --kanban-ticket-edit-svg-url-mobile: url('/framework/images/icons/pencil-square-mini.svg');
            --kanban-ticket-chevron-down-svg-display: block;
                --kanban-ticket-chevron-down-svg-url: url('/framework/images/icons/chevron-down-mini.svg');
                --kanban-ticket-chevron-down-svg-url-mobile: url('/framework/images/icons/chevron-down-mini.svg');
            --kanban-card-comment-svg-display: block;
                --kanban-card-comment-svg-url: url('/framework/images/icons/chat-bubble-left-mini.svg');
                --kanban-card-comment-svg-url-mobile: url('/framework/images/icons/chat-bubble-left-mini.svg');
            --kanban-card-checklist-svg-display: block;
                --kanban-card-checklist-svg-url: url('/framework/images/icons/clipboard-mini.svg');
                --kanban-card-checklist-svg-url-mobile: url('/framework/images/icons/clipboard-mini.svg');
            --kanban-lane-ideas-svg-display: block;
                --kanban-lane-ideas-svg-url: url('/framework/images/icons/beaker-outline.svg');
                --kanban-lane-ideas-svg-url-mobile: url('/framework/images/icons/beaker-outline.svg');
            --kanban-lane-todo-svg-display: block;
                --kanban-lane-todo-svg-url: url('/framework/images/icons/clipboard-outline.svg');
                --kanban-lane-todo-svg-url-mobile: url('/framework/images/icons/clipboard-outline.svg');
            --kanban-lane-progress-svg-display: block;
                --kanban-lane-progress-svg-url: url('/framework/images/icons/clock-outline.svg');
                --kanban-lane-progress-svg-url-mobile: url('/framework/images/icons/clock-outline.svg');
            --kanban-lane-review-svg-display: block;
                --kanban-lane-review-svg-url: url('/framework/images/icons/eye-mini.svg');
                --kanban-lane-review-svg-url-mobile: url('/framework/images/icons/eye-mini.svg');
            --kanban-lane-development-svg-display: block;
                --kanban-lane-development-svg-url: url('/framework/images/icons/wrench-screwdriver-outline.svg');
                --kanban-lane-development-svg-url-mobile: url('/framework/images/icons/wrench-screwdriver-outline.svg');
            --kanban-lane-production-svg-display: block;
                --kanban-lane-production-svg-url: url('/framework/images/icons/server-stack-outline.svg');
                --kanban-lane-production-svg-url-mobile: url('/framework/images/icons/server-stack-outline.svg');
            --data-table-sort-asc-svg-display: block;
                --data-table-sort-asc-svg-url: url('/framework/images/icons/arrow-long-up-outline.svg');
                --data-table-sort-asc-svg-url-mobile: url('/framework/images/icons/arrow-long-up-outline.svg');
            --data-table-sort-desc-svg-display: block;
                --data-table-sort-desc-svg-url: url('/framework/images/icons/arrow-long-down-outline.svg');
                --data-table-sort-desc-svg-url-mobile: url('/framework/images/icons/arrow-long-down-outline.svg');
            --cell-action-experiment-svg-display: block;
                --cell-action-experiment-svg-url: url('/framework/images/icons/beaker-outline.svg');
                --cell-action-experiment-svg-url-mobile: url('/framework/images/icons/beaker-outline.svg');
            --cell-action-results-svg-display: block;
                --cell-action-results-svg-url: url('/framework/images/icons/chart-bar-square-outline.svg');
                --cell-action-results-svg-url-mobile: url('/framework/images/icons/chart-bar-square-outline.svg');
            --cell-action-view-svg-display: block;
                --cell-action-view-svg-url: url('/framework/images/icons/eye-mini.svg');
                --cell-action-view-svg-url-mobile: url('/framework/images/icons/eye-mini.svg');
            --cell-action-links-svg-display: block;
                --cell-action-links-svg-url: url('/framework/images/icons/link-outline.svg');
                --cell-action-links-svg-url-mobile: url('/framework/images/icons/link-outline.svg');
            --cell-action-ip-permission-edit-svg-display: block;
                --cell-action-ip-permission-edit-svg-url: url('/framework/images/icons/pencil-square-mini.svg');
                --cell-action-ip-permission-edit-svg-url-mobile: url('/framework/images/icons/pencil-square-mini.svg');
            --cell-action-ip-permission-remove-svg-display: block;
                --cell-action-ip-permission-remove-svg-url: url('/framework/images/icons/trash-mini.svg');
                --cell-action-ip-permission-remove-svg-url-mobile: url('/framework/images/icons/trash-mini.svg');
            --cell-action-access-token-copy-svg-display: block;
                --cell-action-access-token-copy-svg-url: url('/framework/images/icons/clipboard-mini.svg');
                --cell-action-access-token-copy-svg-url-mobile: url('/framework/images/icons/clipboard-mini.svg');
            --cell-action-access-token-revoke-svg-display: block;
                --cell-action-access-token-revoke-svg-url: url('/framework/images/icons/trash-mini.svg');
                --cell-action-access-token-revoke-svg-url-mobile: url('/framework/images/icons/trash-mini.svg');
            --access-tokens-add-svg-display: block;
                --access-tokens-add-svg-url: url('/framework/images/icons/plus-mini.svg');
                --access-tokens-add-svg-url-mobile: url('/framework/images/icons/plus-mini.svg');
            --ip-permissions-add-svg-display: block;
                --ip-permissions-add-svg-url: url('/framework/images/icons/plus-mini.svg');
                --ip-permissions-add-svg-url-mobile: url('/framework/images/icons/plus-mini.svg');
            --framework-log-service-refresh-svg-display: block;
                --framework-log-service-refresh-svg-url: url('/framework/images/icons/arrow-path-mini.svg');
                --framework-log-service-refresh-svg-url-mobile: url('/framework/images/icons/arrow-path-mini.svg');
            --framework-log-service-zoom-out-svg-display: block;
                --framework-log-service-zoom-out-svg-url: url('/framework/images/icons/minus-mini.svg');
                --framework-log-service-zoom-out-svg-url-mobile: url('/framework/images/icons/minus-mini.svg');
            --framework-log-service-zoom-in-svg-display: block;
                --framework-log-service-zoom-in-svg-url: url('/framework/images/icons/plus-mini.svg');
                --framework-log-service-zoom-in-svg-url-mobile: url('/framework/images/icons/plus-mini.svg');
            --framework-log-service-close-svg-display: block;
                --framework-log-service-close-svg-url: url('/framework/images/icons/x-mark-mini.svg');
                --framework-log-service-close-svg-url-mobile: url('/framework/images/icons/x-mark-mini.svg');
            --framework-log-service-copy-svg-display: block;
                --framework-log-service-copy-svg-url: url('/framework/images/icons/document-text-outline.svg');
                --framework-log-service-copy-svg-url-mobile: url('/framework/images/icons/document-text-outline.svg');
            --framework-log-service-globe-svg-display: block;
                --framework-log-service-globe-svg-url: url('/framework/images/icons/globe-americas-mini.svg');
                --framework-log-service-globe-svg-url-mobile: url('/framework/images/icons/globe-americas-mini.svg');
            --framework-log-service-entry-copy-svg-display: block;
                --framework-log-service-entry-copy-svg-url: url('/framework/images/icons/clipboard-mini.svg');
                --framework-log-service-entry-copy-svg-url-mobile: url('/framework/images/icons/clipboard-mini.svg');
            --framework-log-service-expand-svg-display: block;
                --framework-log-service-expand-svg-url: url('/framework/images/icons/eye-mini.svg');
                --framework-log-service-expand-svg-url-mobile: url('/framework/images/icons/eye-mini.svg');
            --framework-log-service-collapse-svg-display: block;
                --framework-log-service-collapse-svg-url: url('/framework/images/icons/eye-slash-mini.svg');
                --framework-log-service-collapse-svg-url-mobile: url('/framework/images/icons/eye-slash-mini.svg');
            --framework-log-service-chevron-svg-display: block;
                --framework-log-service-chevron-svg-url: url('/framework/images/icons/chevron-down-mini.svg');
                --framework-log-service-chevron-svg-url-mobile: url('/framework/images/icons/chevron-down-mini.svg');
            --framework-log-service-scroll-top-svg-display: block;
                --framework-log-service-scroll-top-svg-url: url('/framework/images/icons/chevron-up-mini.svg');
                --framework-log-service-scroll-top-svg-url-mobile: url('/framework/images/icons/chevron-up-mini.svg');
            --framework-log-service-logo-svg-display: block;
                --framework-log-service-logo-svg-url: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
                --framework-log-service-logo-svg-url-mobile: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
            --framework-log-service-launcher-svg-display: block;
                --framework-log-service-launcher-svg-url: url('/framework/images/icons/bug-ant-outline.svg');
                --framework-log-service-launcher-svg-url-mobile: url('/framework/images/icons/bug-ant-outline.svg');
            --pagination-prev-svg-display: block;
                --pagination-prev-svg-url: url('/framework/images/icons/chevron-left-mini.svg');
                --pagination-prev-svg-url-mobile: url('/framework/images/icons/chevron-left-mini.svg');
            --pagination-next-svg-display: block;
                --pagination-next-svg-url: url('/framework/images/icons/chevron-right-mini.svg');
                --pagination-next-svg-url-mobile: url('/framework/images/icons/chevron-right-mini.svg');
            --pagination-per-page-svg-display: block;
                --pagination-per-page-svg-url: url('/framework/images/icons/chevron-down-mini.svg');
                --pagination-per-page-svg-url-mobile: url('/framework/images/icons/chevron-down-mini.svg');
            --data-table-breakdown-closed-svg-display: block;
                --data-table-breakdown-closed-svg-url: url('/framework/images/icons/bars-arrow-down-mini.svg');
                --data-table-breakdown-closed-svg-url-mobile: url('/framework/images/icons/bars-arrow-down-mini.svg');
            --data-table-breakdown-open-svg-display: block;
                --data-table-breakdown-open-svg-url: url('/framework/images/icons/bars-arrow-up-mini.svg');
                --data-table-breakdown-open-svg-url-mobile: url('/framework/images/icons/bars-arrow-up-mini.svg');
            --sidebar-nav-collapse-svg-display: block;
                --sidebar-nav-collapse-svg-url: url('/framework/images/icons/chevron-double-left-mini.svg');
                --sidebar-nav-collapse-svg-url-mobile: url('/framework/images/icons/chevron-double-left-mini.svg');
            --sidebar-nav-expand-svg-display: block;
                --sidebar-nav-expand-svg-url: url('/framework/images/icons/chevron-double-right-mini.svg');
                --sidebar-nav-expand-svg-url-mobile: url('/framework/images/icons/chevron-double-right-mini.svg');
            --sidebar-nav-back-svg-display: block;
                --sidebar-nav-back-svg-url: url('/framework/images/icons/arrow-uturn-left-outline.svg');
                --sidebar-nav-back-svg-url-mobile: url('/framework/images/icons/arrow-uturn-left-outline.svg');
            --sidebar-nav-reports-svg-display: block;
                --sidebar-nav-reports-svg-url: url('/framework/images/icons/chart-bar-square-outline.svg');
                --sidebar-nav-reports-svg-url-mobile: url('/framework/images/icons/chart-bar-square-outline.svg');
            --sidebar-nav-tools-svg-display: block;
                --sidebar-nav-tools-svg-url: url('/framework/images/icons/wrench-screwdriver-outline.svg');
                --sidebar-nav-tools-svg-url-mobile: url('/framework/images/icons/wrench-screwdriver-outline.svg');
            --sidebar-nav-experiments-svg-display: block;
                --sidebar-nav-experiments-svg-url: url('/framework/images/icons/beaker-outline.svg');
                --sidebar-nav-experiments-svg-url-mobile: url('/framework/images/icons/beaker-outline.svg');
            --sidebar-nav-quality-svg-display: block;
                --sidebar-nav-quality-svg-url: url('/framework/images/icons/shield-check-outline.svg');
                --sidebar-nav-quality-svg-url-mobile: url('/framework/images/icons/shield-check-outline.svg');
            --sidebar-nav-ab-testing-svg-display: block;
                --sidebar-nav-ab-testing-svg-url: url('/framework/images/icons/beaker-outline.svg');
                --sidebar-nav-ab-testing-svg-url-mobile: url('/framework/images/icons/beaker-outline.svg');
            --sidebar-nav-dating-svg-display: block;
                --sidebar-nav-dating-svg-url: url('/framework/images/icons/heart-outline.svg');
                --sidebar-nav-dating-svg-url-mobile: url('/framework/images/icons/heart-outline.svg');
            --sidebar-nav-admin-svg-display: block;
                --sidebar-nav-admin-svg-url: url('/framework/images/icons/shield-check-outline.svg');
                --sidebar-nav-admin-svg-url-mobile: url('/framework/images/icons/shield-check-outline.svg');
            --sidebar-nav-leads-svg-display: block;
                --sidebar-nav-leads-svg-url: url('/framework/images/icons/clipboard-outline.svg');
                --sidebar-nav-leads-svg-url-mobile: url('/framework/images/icons/clipboard-outline.svg');
            --sidebar-nav-company-svg-display: block;
                --sidebar-nav-company-svg-url: url('/framework/images/icons/user-group-outline.svg');
                --sidebar-nav-company-svg-url-mobile: url('/framework/images/icons/user-group-outline.svg');
            --sidebar-nav-aws-svg-display: block;
                --sidebar-nav-aws-svg-url: url('/framework/images/icons/cloud-outline.svg');
                --sidebar-nav-aws-svg-url-mobile: url('/framework/images/icons/cloud-outline.svg');
            --sidebar-nav-alerts-svg-display: block;
                --sidebar-nav-alerts-svg-url: url('/framework/images/icons/bell-outline.svg');
                --sidebar-nav-alerts-svg-url-mobile: url('/framework/images/icons/bell-outline.svg');
            --sidebar-nav-alerts-active-svg-display: block;
                --sidebar-nav-alerts-active-svg-url: url('/framework/images/icons/bell-alert-outline.svg');
                --sidebar-nav-alerts-active-svg-url-mobile: url('/framework/images/icons/bell-alert-outline.svg');
            --sidebar-nav-user-svg-display: block;
                --sidebar-nav-user-svg-url: url('/framework/images/icons/user-circle-outline.svg');
                --sidebar-nav-user-svg-url-mobile: url('/framework/images/icons/user-circle-outline.svg');
            --sidebar-nav-logout-svg-display: block;
                --sidebar-nav-logout-svg-url: url('/framework/images/icons/arrow-right-start-on-rectangle-outline.svg');
                --sidebar-nav-logout-svg-url-mobile: url('/framework/images/icons/arrow-right-start-on-rectangle-outline.svg');
            --sidebar-nav-dev-tools-svg-display: block;
                --sidebar-nav-dev-tools-svg-url: url('/framework/images/icons/bug-ant-outline.svg');
                --sidebar-nav-dev-tools-svg-url-mobile: url('/framework/images/icons/bug-ant-outline.svg');
            --sidebar-nav-section-closed-svg-display: block;
                --sidebar-nav-section-closed-svg-url: url('/framework/images/icons/plus-mini.svg');
                --sidebar-nav-section-closed-svg-url-mobile: url('/framework/images/icons/plus-mini.svg');
            --sidebar-nav-section-open-svg-display: block;
                --sidebar-nav-section-open-svg-url: url('/framework/images/icons/minus-mini.svg');
                --sidebar-nav-section-open-svg-url-mobile: url('/framework/images/icons/minus-mini.svg');
            --sidebar-nav-logo-svg-display: block;
                --sidebar-nav-logo-svg-url: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
                --sidebar-nav-logo-svg-url-mobile: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
            --group-by-bar-group-svg-display: block;
                --group-by-bar-group-svg-url: url('/framework/images/icons/queue-list-solid.svg');
                --group-by-bar-group-svg-url-mobile: url('/framework/images/icons/queue-list-solid.svg');
            --group-by-bar-breakdown-svg-display: block;
                --group-by-bar-breakdown-svg-url: url('/framework/images/icons/bars-arrow-down-mini.svg');
                --group-by-bar-breakdown-svg-url-mobile: url('/framework/images/icons/bars-arrow-down-mini.svg');
            --refresh-button-icon-svg-display: block;
                --refresh-button-icon-svg-url: url('/framework/images/icons/arrow-path-outline.svg');
                --refresh-button-icon-svg-url-mobile: url('/framework/images/icons/arrow-path-outline.svg');
            --sidebar-viewer-refresh-svg-display: block;
                --sidebar-viewer-refresh-svg-url: url('/framework/images/icons/arrow-path-outline.svg');
                --sidebar-viewer-refresh-svg-url-mobile: url('/framework/images/icons/arrow-path-outline.svg');
            --sidebar-viewer-close-svg-display: block;
                --sidebar-viewer-close-svg-url: url('/framework/images/icons/x-mark-outline.svg');
                --sidebar-viewer-close-svg-url-mobile: url('/framework/images/icons/x-mark-outline.svg');
            --date-range-picker-warning-svg-display: block;
                --date-range-picker-warning-svg-url: url('/framework/images/icons/exclamation-triangle-outline.svg');
                --date-range-picker-warning-svg-url-mobile: url('/framework/images/icons/exclamation-triangle-outline.svg');
            --date-range-picker-calendar-svg-display: block;
                --date-range-picker-calendar-svg-url: url('/framework/images/icons/calendar-days-outline.svg');
                --date-range-picker-calendar-svg-url-mobile: url('/framework/images/icons/calendar-days-outline.svg');
            --date-range-picker-chevron-down-svg-display: block;
                --date-range-picker-chevron-down-svg-url: url('/framework/images/icons/chevron-down-mini.svg');
                --date-range-picker-chevron-down-svg-url-mobile: url('/framework/images/icons/chevron-down-mini.svg');
            --date-range-picker-prev-svg-display: block;
                --date-range-picker-prev-svg-url: url('/framework/images/icons/chevron-left-mini.svg');
                --date-range-picker-prev-svg-url-mobile: url('/framework/images/icons/chevron-left-mini.svg');
            --date-range-picker-next-svg-display: block;
                --date-range-picker-next-svg-url: url('/framework/images/icons/chevron-right-mini.svg');
                --date-range-picker-next-svg-url-mobile: url('/framework/images/icons/chevron-right-mini.svg');
            --smart-filter-bar-search-svg-display: block;
                --smart-filter-bar-search-svg-url: url('/framework/images/icons/magnifying-glass-outline.svg');
                --smart-filter-bar-search-svg-url-mobile: url('/framework/images/icons/magnifying-glass-outline.svg');
            --smart-filter-bar-warning-svg-display: block;
                --smart-filter-bar-warning-svg-url: url('/framework/images/icons/exclamation-triangle-outline.svg');
                --smart-filter-bar-warning-svg-url-mobile: url('/framework/images/icons/exclamation-triangle-outline.svg');
            --smart-filter-bar-remove-svg-display: block;
                --smart-filter-bar-remove-svg-url: url('/framework/images/icons/x-mark-mini.svg');
                --smart-filter-bar-remove-svg-url-mobile: url('/framework/images/icons/x-mark-mini.svg');
            --smart-filter-bar-save-svg-display: block;
                --smart-filter-bar-save-svg-url: url('/framework/images/icons/check-outline.svg');
                --smart-filter-bar-save-svg-url-mobile: url('/framework/images/icons/check-outline.svg');
            --select-arrow-svg-display: block;
                --select-arrow-svg-url: url('/framework/images/icons/chevron-down-mini.svg');
                --select-arrow-svg-url-mobile: url('/framework/images/icons/chevron-down-mini.svg');
            --framework-config-sun-svg-display: block;
                --framework-config-sun-svg-url: url('/framework/images/icons/sun-outline.svg');
                --framework-config-sun-svg-url-mobile: url('/framework/images/icons/sun-outline.svg');
            --framework-config-moon-svg-display: block;
                --framework-config-moon-svg-url: url('/framework/images/icons/moon-outline.svg');
                --framework-config-moon-svg-url-mobile: url('/framework/images/icons/moon-outline.svg');
            --framework-config-dropper-svg-display: block;
                --framework-config-dropper-svg-url: url('/framework/images/icons/dropper-outline.svg');
                --framework-config-dropper-svg-url-mobile: url('/framework/images/icons/dropper-outline.svg');
            --framework-config-theme-svg-display: block;
                --framework-config-theme-svg-url: url('/framework/images/icons/swatch-outline.svg');
                --framework-config-theme-svg-url-mobile: url('/framework/images/icons/swatch-outline.svg');
            --domain-qa-copy-svg-display: block;
                --domain-qa-copy-svg-url: url('/framework/images/icons/clipboard-mini.svg');
                --domain-qa-copy-svg-url-mobile: url('/framework/images/icons/clipboard-mini.svg');
            --leadthink-site-wordmark-svg-display: block;
                --leadthink-site-wordmark-svg-url: url('/framework/images/logos/leadthink-wordmark-80-blue-outline-dark.svg');
                --leadthink-site-wordmark-svg-url-mobile: url('/framework/images/logos/leadthink-wordmark-80-blue-outline-dark.svg');
            --leadthink-site-logo-svg-display: block;
                --leadthink-site-logo-svg-url: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
                --leadthink-site-logo-svg-url-mobile: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
            --leadthink-site-capability-acquire-svg-display: block;
                --leadthink-site-capability-acquire-svg-url: url('/framework/images/icons/magnifying-glass-outline.svg');
                --leadthink-site-capability-acquire-svg-url-mobile: url('/framework/images/icons/magnifying-glass-outline.svg');
            --leadthink-site-capability-convert-svg-display: block;
                --leadthink-site-capability-convert-svg-url: url('/framework/images/icons/link-outline.svg');
                --leadthink-site-capability-convert-svg-url-mobile: url('/framework/images/icons/link-outline.svg');
            --leadthink-site-capability-connect-svg-display: block;
                --leadthink-site-capability-connect-svg-url: url('/framework/images/icons/user-group-outline.svg');
                --leadthink-site-capability-connect-svg-url-mobile: url('/framework/images/icons/user-group-outline.svg');
            --leadthink-site-capability-scale-svg-display: block;
                --leadthink-site-capability-scale-svg-url: url('/framework/images/icons/chart-bar-square-outline.svg');
                --leadthink-site-capability-scale-svg-url-mobile: url('/framework/images/icons/chart-bar-square-outline.svg');
            --leadthink-site-gallery-previous-svg-display: block;
                --leadthink-site-gallery-previous-svg-url: url('/framework/images/icons/chevron-left-mini.svg');
                --leadthink-site-gallery-previous-svg-url-mobile: url('/framework/images/icons/chevron-left-mini.svg');
            --leadthink-site-gallery-next-svg-display: block;
                --leadthink-site-gallery-next-svg-url: url('/framework/images/icons/chevron-right-mini.svg');
                --leadthink-site-gallery-next-svg-url-mobile: url('/framework/images/icons/chevron-right-mini.svg');
            --leadthink-site-linkedin-svg-display: block;
                --leadthink-site-linkedin-svg-url: url('/framework/images/logos/linkedin-primary.svg');
                --leadthink-site-linkedin-svg-url-mobile: url('/framework/images/logos/linkedin-primary.svg');
            --leadthink-site-external-link-svg-display: block;
                --leadthink-site-external-link-svg-url: url('/framework/images/icons/arrow-top-right-on-square-outline.svg');
                --leadthink-site-external-link-svg-url-mobile: url('/framework/images/icons/arrow-top-right-on-square-outline.svg');
            --leadthink-site-arrow-right-svg-display: block;
                --leadthink-site-arrow-right-svg-url: url('/framework/images/icons/arrow-right-outline.svg');
                --leadthink-site-arrow-right-svg-url-mobile: url('/framework/images/icons/arrow-right-outline.svg');
            --leadthink-site-client-match-svg-display: block;
                --leadthink-site-client-match-svg-url: url('/framework/images/logos/match-primary-neutral.svg');
                --leadthink-site-client-match-svg-url-mobile: url('/framework/images/logos/match-primary-neutral.svg');
            --leadthink-site-client-eharmony-svg-display: block;
                --leadthink-site-client-eharmony-svg-url: url('/framework/images/logos/eharmony-primary-neutral.svg');
                --leadthink-site-client-eharmony-svg-url-mobile: url('/framework/images/logos/eharmony-primary-neutral.svg');
            --leadthink-site-client-zoosk-svg-display: block;
                --leadthink-site-client-zoosk-svg-url: url('/framework/images/logos/zoosk-primary-neutral.svg');
                --leadthink-site-client-zoosk-svg-url-mobile: url('/framework/images/logos/zoosk-primary-neutral.svg');
            --leadthink-site-client-ourtime-svg-display: block;
                --leadthink-site-client-ourtime-svg-url: url('/framework/images/logos/ourtime-primary-neutral.svg');
                --leadthink-site-client-ourtime-svg-url-mobile: url('/framework/images/logos/ourtime-primary-neutral.svg');
            --leadthink-site-client-elitesingles-svg-display: block;
                --leadthink-site-client-elitesingles-svg-url: url('/framework/images/logos/elitesingles-primary-neutral.svg');
                --leadthink-site-client-elitesingles-svg-url-mobile: url('/framework/images/logos/elitesingles-primary-neutral.svg');
            --leadthink-site-client-silversingles-svg-display: block;
                --leadthink-site-client-silversingles-svg-url: url('/framework/images/logos/silversingles-primary-neutral.svg');
                --leadthink-site-client-silversingles-svg-url-mobile: url('/framework/images/logos/silversingles-primary-neutral.svg');
            --leadthink-site-client-dating-svg-display: block;
                --leadthink-site-client-dating-svg-url: url('/framework/images/logos/datingcom-primary-neutral.svg');
                --leadthink-site-client-dating-svg-url-mobile: url('/framework/images/logos/datingcom-primary-neutral.svg');
            --leadthink-site-client-seniormatch-svg-display: block;
                --leadthink-site-client-seniormatch-svg-url: url('/framework/images/logos/seniormatch-primary-neutral.svg');
                --leadthink-site-client-seniormatch-svg-url-mobile: url('/framework/images/logos/seniormatch-primary-neutral.svg');
            --leadthink-site-client-threedayrule-svg-display: block;
                --leadthink-site-client-threedayrule-svg-url: url('/framework/images/logos/threedayrule-primary-neutral.svg');
                --leadthink-site-client-threedayrule-svg-url-mobile: url('/framework/images/logos/threedayrule-primary-neutral.svg');
            --leadthink-site-client-hubpeople-svg-display: block;
                --leadthink-site-client-hubpeople-svg-url: url('/framework/images/logos/hubpeople-primary-neutral.svg');
                --leadthink-site-client-hubpeople-svg-url-mobile: url('/framework/images/logos/hubpeople-primary-neutral.svg');

}

/*======================================
 * TYPOGRAPHY SYSTEM
 *
 * Comprehensive typographic styles that establish visual hierarchy
 *  * through headings, paragraphs, and text formatting. This section
 *  * ensures consistent and readable text across the entire website.
 *======================================*/

/* Warning: Font directory for 'neutral' (dir: neutral) not found */
@font-face {
    font-family: 'Geist-Regular';
    src: url('/framework/fonts/geist/Geist-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Geist-Bold';
    src: url('/framework/fonts/geist/Geist-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Geist-Black';
    src: url('/framework/fonts/geist/Geist-Black.ttf') format('truetype');
}
@font-face {
    font-family: 'GeistMono-Regular';
    src: url('/framework/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'GeistMono-Bold';
    src: url('/framework/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'GeistMono-Black';
    src: url('/framework/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
}

:root {
    /* Font families */
    --font-color: 'neutral-950', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Geist-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-headings: 'Geist-Black', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-paragraph: 'Geist-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-strong: 'Geist-Bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono-headings: 'GeistMono-Black', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono-paragraph: 'GeistMono-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono-strong: 'GeistMono-Bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-button: 'Geist-Bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* Typography Classes */
/* Additional typography utilities and classes from leadthink-app/typography.css */

/* Shared app typography. Button links retain their component-owned colors and states. */
:root {
    
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: normal;
    margin-top: 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-weight: inherit;
}

h1 {
    font-size: var(--text-4xl);
    line-height: 1.2;
}

h2 {
    font-size: var(--text-3xl);
    line-height: 1.3;
}

h3 {
    font-size: var(--text-2xl);
    line-height: 1.4;
}

h4 {
    font-size: var(--text-xl);
    line-height: 1.4;
}

h5 {
    font-size: var(--text-lg);
    line-height: 1.4;
    color: var(--neutral-700);
}

p {
    font-family: var(--font-paragraph);
    margin: 0 0 var(--space-4) 0;
}

strong, b {
    font-family: var(--font-strong);
    font-weight: normal;
}

button, .btn {
    font-family: var(--font-button);
}

hr {
    background-image: linear-gradient(to right, transparent, rgba(50, 50, 50, 0.4), transparent);
    border: 0;
    height: 2px;
    margin: 22px auto;
    max-width: 90%;
}

p img {
    margin: 0;
}

p.lead {
    font-size: var(--text-xl);
    line-height: 1.5;
    color: var(--neutral-600);
}

em {
    font-style: italic;
}

small {
    font-size: var(--text-sm);
}

sup {
    font-size: var(--text-xs);
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}

.subheader {
    color: var(--neutral-600);
}

a:not(:where(.button)), a:visited:not(:where(.button)) {
    color: var(--primary-800);
    text-decoration: underline;
    outline: 0;
    transition: color var(--transition-default);
}

a:hover:not(:where(.button)), a:focus:not(:where(.button)) {
    color: var(--primary-600);
}

p a, p a:visited {
    line-height: inherit;
}

ul, ol {
    margin-bottom: var(--space-4);
}

ul {
    list-style: none outside;
}

ol {
    list-style: decimal;
}

ol, ul.square, ul.circle, ul.disc {
    margin-left: 30px;
}

ul.square {
    list-style: square outside;
}

ul.circle {
    list-style: circle outside;
}

ul.disc {
    list-style: disc outside;
}

ul ul, ul ol, ol ol, ol ul {
    margin: var(--space-1) 0 var(--space-2) 30px;
    font-size: 90%;
}

ul ul li, ul ol li, ol ol li, ol ul li {
    margin-bottom: 0px;
}

li {
    line-height: 1.4;
    margin-bottom: 0px;
}

ul.large li {
    line-height: 1.6;
}

li p {
    line-height: 1.5;
}


@media (max-width: 768px) {
    h1 {
        font-size: var(--text-3xl);
    }

    h2 {
        font-size: var(--text-2xl);
    }

    h3 {
        font-size: var(--text-xl);
    }

    h4 {
        font-size: var(--text-lg);
    }

    h5 {
        font-size: var(--text-base);
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: var(--text-2xl);
    }

    h2 {
        font-size: var(--text-xl);
    }

    h3 {
        font-size: var(--text-lg);
    }

    h4 {
        font-size: var(--text-base);
    }
}



/* ============================================================
   CORE STYLES
   Layout, typography, and utilities
============================================================ */

/* utilities.css */
/* ============================================================
   DESIGN UTILITIES
   Shadows, opacity, transitions, and other design tokens
============================================================ */

:root {
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-neobrute: 4px 4px 0 rgba(0, 0, 0, 1);
    --shadow-neobrute-20: 4px 4px 0 rgba(0, 0, 0, 0.2);

    /* Dark mode shadows */
    --shadow-dark-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.6);
    --shadow-dark-md: 0 3px 5px 0 rgba(0, 0, 0, 0.7);
    --shadow-dark-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.8);
    --shadow-dark-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.9);
    --shadow-dark-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);

    /* Neobrute for dark mode - using light colors */
    --shadow-neobrute-light: 4px 4px 0 rgba(255, 255, 255, 0.15);
    --shadow-neobrute-light-20: 4px 4px 0 rgba(255, 255, 255, 0.2);
    --shadow-neobrute-light-40: 4px 4px 0 rgba(255, 255, 255, 0.4);

    /* Colored neobrute variants */
    --shadow-neobrute-primary: 4px 4px 0 var(--primary-500);
    --shadow-neobrute-primary-20: 4px 4px 0 var(--primary-200);

    /* Opacity */
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-40: 0.4;
    --opacity-60: 0.6;
    --opacity-80: 0.8;

    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-default: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Z-index */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-overlay: 100;
    --z-modal: 200;
    --z-popover: 300;
    --z-tooltip: 400;
}

/* ============================================================
   UTILITY CLASSES
   Helper classes for common layout and text tasks
============================================================ */

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

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

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

/* ========== TEXT HIGHLIGHTS ========== */

.highlight {
    background: var(--highlight-bg);
    color: var(--highlight-text-color);
    padding: var(--highlight-padding);
    display: var(--highlight-display);
    font-family: var(--highlight-font-family);
    font-weight: var(--highlight-font-weight);
    background-clip: var(--highlight-clip);
    -webkit-background-clip: var(--highlight-clip);
    background-size: var(--highlight-bg-size);
    animation: var(--highlight-animation);
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}


/* ============================================================
   COMPONENT STYLES
   Reusable component definitions
============================================================ */

/* access-tokens-editor.css */
/**
 * Layout and theme-token styling for Access Tokens management.
 *
 * Shared Input, Select, and Button components retain their native interaction
 * states. All additions are scoped to this component.
 */

.access-tokens-editor {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--access-tokens-editor-text);
}

.access-tokens-editor [data-access-tokens-create-fields],
.access-tokens-editor [data-access-tokens-copy-field] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.access-tokens-editor [hidden] {
    display: none;
}

.access-tokens-editor-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.access-tokens-editor-help {
    margin: -10px 0 0;
    color: var(--access-tokens-editor-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.access-tokens-editor-error,
.access-tokens-editor-message,
.access-tokens-editor-confirmation {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--access-tokens-editor-border);
    border-radius: 6px;
}

.access-tokens-editor-error {
    background: var(--access-tokens-editor-error-bg);
    color: var(--access-tokens-editor-error-text);
}

.access-tokens-editor-message {
    background: var(--access-tokens-editor-success-bg);
    color: var(--access-tokens-editor-success-text);
}

.access-tokens-editor-confirmation {
    background: var(--access-tokens-editor-warning-bg);
    color: var(--access-tokens-editor-warning-text);
}

.access-tokens-editor-actions {
    display: flex;
    gap: 10px;
    padding-top: 4px;
}

#access-tokens-add-control {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 768px) {
    .access-tokens-editor-actions {
        flex-wrap: wrap;
    }
}


/* app-header-bar.css */
/**
 * Styles the internal title toolbar and responsive public site header.
 * Desktop uses plain inline links and a compact brand. Mobile keeps Login beside an unboxed menu trigger.
 * The shared theme control moves into the mobile dialog without duplicate state.
 * Public colors and gutters use AppHeaderBar tokens from the app configuration.
 */

.app-header-bar-internal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    height: var(--app-header-height);
    
    flex-shrink: 0;
    
    margin: calc(var(--app-padding, 12px) * -1) calc(var(--app-padding, 12px) * -1) 0;
    padding: 0 var(--app-padding, 12px);
    background: var(--app-header-bar-bg);
    border-bottom: 1px solid var(--app-header-bar-divider);
}

.app-header-bar-internal .page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--app-header-bar-text);
}

.app-header-bar-internal .header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .app-header-bar-internal {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .app-header-bar-internal .page-title {
        font-size: 18px;
    }

    .app-header-bar-internal .header-controls {
        width: 100%;
        justify-content: space-between;
    }
}

.app-header-bar-public {
    box-sizing: border-box;
    width: 100%;
    flex-shrink: 0;
    background: var(--app-header-bar-public-bg);
    color: var(--app-header-bar-public-text);
    border-bottom: 1px solid var(--app-header-bar-divider);
}

.app-header-bar-public .public-header-inner {
    box-sizing: border-box;
    width: min(100%, var(--app-header-bar-public-shell-width));
    min-height: var(--app-header-bar-public-height);
    margin-inline: auto;
    padding: 10px var(--app-header-bar-public-gutter);
    display: flex;
    align-items: center;
    gap: 24px;
}

.app-header-bar-public .public-header-toggle {
    margin-inline-end: -10px;
}

.app-header-bar-public .public-header-links a:focus-visible {
    outline: 2px solid var(--app-header-bar-public-focus-outline);
    outline-offset: 2px;
}
.app-header-bar-public .public-header-links {
    display: none;
    align-items: center;
    gap: var(--app-header-bar-public-navigation-gap);
}

.app-header-bar-public .public-header-links a,
.app-header-bar-public .public-header-links a:visited {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 10px;
    color: var(--app-header-bar-public-text);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}

.app-header-bar-public .public-header-links a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.app-header-bar-public .public-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: auto;
    flex-shrink: 0;
}

.app-header-bar-public .public-header-theme {
    display: none;
}

.app-header-bar-public .public-header-theme .framework-config-popup {
    display: flex;
    top: calc(100% + 16px);
    bottom: auto;
    left: auto;
    right: 0;
    width: 260px;
    transform-origin: top right;
}

html:has(.app-header-bar-public) {
    scrollbar-gutter: var(--app-header-bar-public-scrollbar-gutter);
}

html.public-drawer-open,
html.public-drawer-open body {
    overflow: hidden;
}

@media (min-width: 640px) {
    .app-header-bar-public .public-header-inner {
        padding-inline: var(--app-header-bar-public-gutter-wide);
    }
}

@media (min-width: 1024px) {
    .app-header-bar-public .public-header-inner > .dynamic-logo {
        width: var(--app-header-bar-public-logo-width-desktop);
        flex-shrink: 0;
    }

    .app-header-bar-public .public-header-links,
    .app-header-bar-public .public-header-theme {
        display: flex;
    }

    .app-header-bar-public .public-header-toggle {
        display: none;
    }
}

@media (max-width: 374px) {
    .app-header-bar-public .public-header-inner {
        gap: 8px;
    }

    .app-header-bar-public .public-header-actions {
        gap: 4px;
    }
}


/* body.css */
/**
 * Shared document colors and margins for every App layout.
 * Only body.app-frame locks the viewport for the internal navigation frame.
 * StyleService bundles these rules with the app's --body-* theme tokens.
 */

body {
    background: var(--body-bg-color);
    color: var(--body-color);
    margin: 0;
}

body.app-frame {
    height: 100vh;
    overflow: hidden;
    display: flex;
}

body.app-unframed {
    min-height: 100%;
    overflow-x: hidden;
}


/* button.css */
/**
 * Shared Button appearance for native buttons and Button-rendered links.
 * Base rules support native controls; .button supplies the same treatment to anchors.
 * Variants own interaction states, colors, focus, and radius through --button-* tokens.
 * Parent components may position buttons but do not restyle their controls.
 * Muted and segmented variants preserve neutral control chrome. A segmented
 * Button is one click target; decorative .button-segment slots show its state.
 */

button {
    border-top-left-radius: var(--button-radius-top-left);
    border-top-right-radius: var(--button-radius-top-right);
    border-bottom-right-radius: var(--button-radius-bottom-right);
    border-bottom-left-radius: var(--button-radius-bottom-left);

    border: var(--button-border-width) solid var(--button-border);

    background-color: var(--button-bg);
    color: var(--button-text);

    font-family: var(--font-button);
    font-size: var(--button-font-size);
    text-align: center;
    white-space: nowrap;

    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    outline: none;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button:hover:not([disabled]) {
    background-color: var(--button-bg-hover);
    color: var(--button-text-hover);
    border-color: var(--button-border-hover);
}

button:active:not([disabled]) {
    background-color: var(--button-bg-active);
}

button:focus-visible {
    outline: 2px solid var(--button-focus-outline);
    outline-offset: 2px;
}

button[disabled] {
    background-color: var(--button-bg-disabled);
    color: var(--button-text-disabled);
    border-color: var(--button-border-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

.button {
    border-top-left-radius: var(--button-radius-top-left);
    border-top-right-radius: var(--button-radius-top-right);
    border-bottom-right-radius: var(--button-radius-bottom-right);
    border-bottom-left-radius: var(--button-radius-bottom-left);

    border: var(--button-border-width) solid var(--button-border);

    background-color: var(--button-bg);
    color: var(--button-text);

    font-family: var(--font-button);
    font-size: var(--button-font-size);
    text-align: center;
    white-space: nowrap;

    padding: var(--button-padding-block) var(--button-padding-inline);

    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);

    outline: none;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.button:hover:not([disabled]):not(.is-disabled) {
    background-color: var(--button-bg-hover);
    color: var(--button-text-hover);
    border-color: var(--button-border-hover);
}

.button:active:not([disabled]):not(.is-disabled) {
    background-color: var(--button-bg-active);
}

.button:focus-visible {
    outline: 2px solid var(--button-focus-outline);
    outline-offset: 2px;
}

.button[disabled],
.button.is-disabled {
    background-color: var(--button-bg-disabled);
    color: var(--button-text-disabled);
    border-color: var(--button-border-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

.button-compact,
.button-toolbar {
    height: var(--button-compact-height);
    min-height: var(--button-compact-height);
    padding-block: var(--button-compact-padding-block);
    border-radius: var(--button-compact-radius);
    font-size: var(--button-compact-font-size);
}

.button-small {
    height: var(--button-small-height);
    min-height: var(--button-small-height);
    padding-block: var(--button-compact-padding-block);
    border-radius: var(--button-radius);
    font-size: var(--button-compact-font-size);
}

.button-toolbar {
    padding-inline: var(--button-toolbar-padding-inline);
    line-height: var(--button-toolbar-line-height);
}

.button-toolbar svg {
    width: var(--button-toolbar-icon-size);
    height: var(--button-toolbar-icon-size);
}

.button-accent {
    --button-bg: var(--button-accent-bg);
    --button-bg-hover: var(--button-accent-bg-hover);
    --button-bg-active: var(--button-accent-active-bg);
    --button-text: var(--button-accent-text);
    --button-text-hover: var(--button-accent-text);
    --button-border: var(--button-accent-border);
    --button-border-hover: var(--button-accent-border-hover);
}

.button-touch {
    min-height: var(--button-touch-height);
}

.button-secondary {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border-color: var(--button-secondary-border);
}

.button-secondary:hover:not([disabled]):not(.is-disabled) {
    background-color: var(--button-secondary-bg-hover);
    color: var(--button-secondary-text-hover);
    border-color: var(--button-secondary-border-hover);
}

.button-secondary:active:not([disabled]):not(.is-disabled) {
    background-color: var(--button-secondary-bg-hover);
}

.button-ghost {
    background-color: transparent;
    color: var(--button-ghost-text);
    border-color: transparent;
}

.button-ghost:hover:not([disabled]):not(.is-disabled) {
    background-color: var(--button-ghost-bg-hover);
    color: var(--button-ghost-text-hover);
    border-color: transparent;
}

.button-ghost:active:not([disabled]):not(.is-disabled) {
    background-color: var(--button-ghost-bg-hover);
}

.button-icon {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    min-width: var(--button-icon-size);
    padding: 0;
    border-radius: var(--button-icon-radius);
    flex-shrink: 0;
}

.button-icon svg {
    display: block;
    width: var(--button-icon-glyph-size);
    height: var(--button-icon-glyph-size);
}

.button-icon.button-touch {
    width: var(--button-touch-height);
    min-width: var(--button-touch-height);
    height: var(--button-touch-height);
}

.button-icon.button-touch svg {
    width: var(--button-touch-icon-size);
    height: var(--button-touch-icon-size);
}

.button-muted,
.button-segmented {
    --button-bg: var(--button-muted-bg);
    --button-bg-hover: var(--button-muted-bg);
    --button-bg-active: var(--button-muted-bg);
    --button-text: var(--button-muted-text);
    --button-text-hover: var(--button-muted-text-hover);
    --button-border: var(--button-muted-border);
    --button-border-hover: var(--button-muted-border-hover);
}

.button-muted.button-icon.button-compact {
    box-sizing: border-box;
    width: var(--button-compact-height);
    min-width: var(--button-compact-height);
    height: var(--button-compact-height);
}

.button-muted.button-icon.button-compact svg {
    width: var(--button-muted-icon-size);
    height: var(--button-muted-icon-size);
}

.button-icon.button-small {
    box-sizing: border-box;
    width: var(--button-small-height);
    min-width: var(--button-small-height);
    height: var(--button-small-height);
}

.button-icon.button-small svg {
    width: var(--button-small-icon-size);
    height: var(--button-small-icon-size);
}

.button-segmented {
    --button-bg: var(--button-segmented-bg);
    --button-bg-hover: var(--button-segmented-bg);
    --button-bg-active: var(--button-segmented-bg);
    --button-border-hover: var(--button-muted-border);
    box-sizing: border-box;
    padding: var(--button-segmented-padding);
    gap: var(--button-segmented-gap);
}

.button-segmented .button-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--button-segmented-slot-width);
    height: 100%;
    border-radius: var(--button-segmented-slot-radius);
    color: var(--button-segmented-text);
}

.button-segmented.button-small {
    --button-segmented-slot-width: var(--button-small-height);
    --button-segmented-icon-size: var(--button-small-segmented-icon-size);
}

.button-segmented .button-segment.is-active {
    background: var(--button-segmented-selected-bg);
    color: var(--button-segmented-selected-text);
}

.button-segmented svg {
    display: block;
    width: var(--button-segmented-icon-size);
    height: var(--button-segmented-icon-size);
}

@media (max-width: 768px) {
    .button-toolbar {
        height: var(--button-toolbar-mobile-height);
        min-height: var(--button-toolbar-mobile-height);
    }
}


/* call-to-action.css */
/* CallToAction owns the closing action layout and its decorative responsive background. */
.call-to-action {
	padding-block: 60px;
	color: var(--call-to-action-text);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--call-to-action-surface) 40%, transparent) 0%, color-mix(in srgb, var(--call-to-action-surface) 60%, transparent) 60%, transparent 100%),
		var(--call-to-action-background-mobile, none) center bottom / cover no-repeat,
		var(--call-to-action-surface);
}

.call-to-action,
.call-to-action::before,
.call-to-action::after,
.call-to-action *,
.call-to-action *::before,
.call-to-action *::after {
	box-sizing: border-box;
}

.call-to-action a:not(.button):focus-visible {
	outline: 3px solid var(--call-to-action-focus-outline);
	outline-offset: 4px;
}

.call-to-action .call-to-action-shell {
	width: min(100%, 1280px);
	margin-inline: auto;
	padding-inline: 24px;
	text-shadow: 0 1px 3px var(--call-to-action-surface), 0 0 18px var(--call-to-action-surface);
}

.call-to-action .call-to-action-eyebrow {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.call-to-action .call-to-action-heading {
	margin: 0;
	font-family: var(--font-headings);
	font-size: clamp(32px, 7vw, 52px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.045em;
}

.call-to-action .call-to-action-heading-accent {
	color: var(--call-to-action-accent);
}

.call-to-action .call-to-action-content {
	display: grid;
	gap: 42px;
	margin-top: 32px;
}

.call-to-action .call-to-action-supporting-text {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
}

.call-to-action .call-to-action-paragraphs {
	display: grid;
	gap: 20px;
}

.call-to-action .call-to-action-paragraph {
	max-width: 58ch;
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
}

.call-to-action .call-to-action-action {
	gap: 10px;
	margin-top: 28px;
	text-shadow: none;
}

.call-to-action .call-to-action-action-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.call-to-action .call-to-action-statement {
	margin: 0;
	padding-left: 24px;
	border-left: 1px solid var(--call-to-action-border);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.9;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

@media (min-width: 640px) {
	.call-to-action {
		padding-block: 76px;
	}

	.call-to-action .call-to-action-shell {
		padding-inline: 40px;
	}
}

@media (min-width: 1000px) {
	.call-to-action {
		padding-block: 88px;
		background:
			linear-gradient(180deg, color-mix(in srgb, var(--call-to-action-surface) 40%, transparent) 0%, color-mix(in srgb, var(--call-to-action-surface) 60%, transparent) 60%, transparent 100%),
			var(--call-to-action-background-desktop, none) center bottom / cover no-repeat,
			var(--call-to-action-surface);
	}

	.call-to-action .call-to-action-shell {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
		grid-template-areas:
			"eyebrow ."
			"heading statement"
			"action statement";
		column-gap: clamp(48px, 7vw, 96px);
		align-items: start;
	}

	.call-to-action .call-to-action-eyebrow {
		grid-area: eyebrow;
	}

	.call-to-action .call-to-action-heading {
		grid-area: heading;
	}

	.call-to-action .call-to-action-content {
		display: contents;
	}

	.call-to-action .call-to-action-content > div {
		grid-area: action;
		margin-top: 32px;
	}

	.call-to-action .call-to-action-statement {
		grid-area: statement;
		align-self: start;
	}

	.call-to-action .call-to-action-content > .call-to-action-paragraphs {
		grid-area: statement;
		align-self: start;
		margin-top: 0;
	}

	.call-to-action .call-to-action-paragraph {
		font-size: 19px;
	}
}


/* card-gallery.css */
/* CardGallery owns image-card scrolling, responsive grids, and navigation controls. */
.card-gallery,
.card-gallery::before,
.card-gallery::after,
.card-gallery *,
.card-gallery *::before,
.card-gallery *::after {
	box-sizing: border-box;
}

.card-gallery a:not(.button):focus-visible {
	outline: 3px solid var(--card-gallery-focus-outline);
	outline-offset: 4px;
}

.card-gallery .card-gallery-list {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.card-gallery .card-gallery-list::-webkit-scrollbar {
	display: none;
}

.card-gallery .card-gallery-card {
	position: relative;
	isolation: isolate;
	min-width: 0;
	aspect-ratio: 1.14;
	border-radius: 12px;
	background: var(--card-gallery-surface);
	overflow: hidden;
	scroll-snap-align: start;
}

.card-gallery .card-gallery-content {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	color: inherit;
	text-decoration: none;
}

.card-gallery a.card-gallery-content:focus-visible {
	outline-offset: -4px;
}

.card-gallery .card-gallery-content > img,
.card-gallery .card-gallery-content > picture,
.card-gallery .card-gallery-content > picture > img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.card-gallery .card-gallery-card:not(.card-gallery-card-text) .card-gallery-content::after {
	position: absolute;
	inset: 30% 0 0;
	content: "";
	background: linear-gradient(transparent, var(--card-gallery-overlay-bg));
}

.card-gallery .card-gallery-copy {
	position: absolute;
	z-index: 1;
	inset: auto 20px 20px;
	color: var(--card-gallery-text);
}

.card-gallery .card-gallery-copy h3 {
	margin: 0;
	font-size: 17px;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.card-gallery .card-gallery-copy p {
	margin: 5px 0 0;
	color: var(--card-gallery-text-muted);
	font-size: 12px;
	line-height: 1.45;
}

.card-gallery .card-gallery-copy::after {
	width: 28px;
	height: 3px;
	display: block;
	margin-top: 12px;
	content: "";
	background: var(--card-gallery-accent);
}

.card-gallery .card-gallery-card-text .card-gallery-content {
	display: grid;
	place-items: center;
	padding: 24px;
}

.card-gallery .card-gallery-card-text .card-gallery-copy {
	position: static;
	text-align: center;
}

.card-gallery .card-gallery-card-text .card-gallery-copy h3 {
	font-size: clamp(20px, 3vw, 30px);
}

.card-gallery .card-gallery-card-text .card-gallery-copy::after {
	margin-inline: auto;
}

.card-gallery .card-gallery-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
	color: var(--card-gallery-counter-text);
	background: var(--card-gallery-counter-bg);
	font-size: 12px;
	letter-spacing: 0.1em;
}

@media (min-width: 640px) {
	.card-gallery .card-gallery-list {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
	}

	.card-gallery .card-gallery-controls {
		display: none;
	}
}

@media (min-width: 1000px) {
	.card-gallery .card-gallery-list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.card-gallery .card-gallery-list.card-gallery-columns-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.card-gallery .card-gallery-list.card-gallery-columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.card-gallery .card-gallery-list.card-gallery-columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.card-gallery .card-gallery-list.card-gallery-columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.card-gallery .card-gallery-card {
		aspect-ratio: 0.95;
	}

	.card-gallery .card-gallery-copy {
		inset-inline: 14px;
		bottom: 16px;
	}

	.card-gallery .card-gallery-copy h3 {
		font-size: 14px;
	}
}


/* card-grid.css */
/**
 * CardGrid owns the responsive layout and appearance of text cards and their optional icons.
 * Its enclosing ContentSection supplies the heading, section surface, gutters, and content gap.
 */
.card-grid {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--card-grid-text);
	background: var(--card-grid-surface);
}

.card-grid,
.card-grid::before,
.card-grid::after,
.card-grid *,
.card-grid *::before,
.card-grid *::after {
	box-sizing: border-box;
}

.card-grid > li {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding-block: 24px;
}

.card-grid > li + li {
	border-top: 1px solid var(--card-grid-border);
}

.card-grid .card-grid-icon {
	width: 60px;
	height: 60px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--card-grid-accent);
	background: var(--card-grid-icon-bg);
}

.card-grid .card-grid-icon svg {
	width: 28px;
	height: 28px;
}

.card-grid h3 {
	margin: 3px 0 10px;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.card-grid p {
	max-width: 30ch;
	margin: 0;
	color: var(--card-grid-text-muted);
	font-size: 17px;
	line-height: 1.6;
}

.card-grid small {
	display: block;
	margin-top: 14px;
	color: var(--card-grid-accent);
	font-size: 13px;
	line-height: 1.6;
}

@media (min-width: 640px) {
	.card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.card-grid > li + li {
		border-top: 0;
	}
}

@media (min-width: 1000px) {
	.card-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px;
	}

	.card-grid > li {
		flex-direction: column;
	}
}


/* cell.css */
/**
 * Cell appearance - what a single cell looks like, on its own. Every cell
 * renders with a base `.cell`; header cells add `.header` (so `.cell.header`).
 * Scoping to the class, not to a .data-table-container wrapper, is what lets a
 * cell work inside a plain <table> - or a handful of cells with no table at
 * all. Owned by Cell: the header <th> is server-rendered by
 * Cell::renderHeader(), the body / totals / sort-icon templates are shipped by
 * Cell::render().
 *
 * Layout-level concerns - the sticky positioning of the header / totals / first
 * column - live in data-table.css; that's DataTable's structure, not the
 * cell's. Content classes (.cell-stacked, .url-link, .badge, .config-*) are
 * nested under .cell so they can't collide with a page's own .badge etc.
 * Colours reference the --cell-* variables from the leadthink-app config.
 */

/* ====================
   BASE CELL - body cells, and the base under header / totals cells
   ==================== */

.cell {
    padding: 12px 16px;
    color: var(--cell-text);
    word-wrap: break-word;
    background-color: transparent;
    /* Equal-width digits so columns of figures line up; no effect on letters. */
    font-variant-numeric: tabular-nums;
}

/* Alignment - body and totals cells (the header aligns via .th-content) */
.cell.align-left {
    text-align: left;
}

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

.cell.align-right {
    text-align: right;
}

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

.cell.header {
    padding: 0; /* padding lives on .th-content */
    color: var(--cell-header-text);
    background-color: var(--cell-header-bg);
    border-bottom: 2px solid var(--cell-header-border);
    /* Small, bold, uppercase column labels (AG Grid / Vercel style) */
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    white-space: nowrap;
}

.cell.header.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

/* Flex wrapper inside the header cell */
.cell.header .th-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    width: 100%;
}

.cell.header .th-label {
    flex: 1;
    text-align: left;
}

.cell.header.sortable:hover {
    background-color: var(--cell-header-bg-hover);
}

/* Sorted column highlighting */
.cell.header.sortable.sorted {
    background-color: var(--cell-sorted-bg);
    color: var(--cell-sorted-text);
}

/* ====================
   SORT ARROWS - side-by-side, aligned with the label
   ==================== */

.cell.header .sort-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
}

/* All sort arrows are inline SVGs (Heroicons), sized here; they take colour via
   currentColor - the header text colour, or the sorted accent when the column
   is sorted (the th sets that colour). No filter needed. */
.cell.header .sort-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}

/* Active column - single arrow at full opacity */
.cell.header .sort-icon.active {
    opacity: 1;
}

/* Hover hint: faint dual arrows on a sortable column that is not the active sort.
   Hidden at rest (space reserved, so no reflow), fades in on hover. */
.cell.header .sort-arrows {
    display: inline-flex;
    flex-direction: row;
    gap: 1px;
    line-height: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cell.header.sortable:hover .sort-arrows {
    opacity: 0.45;
}

/* ====================
   STACKED CELL CONTENT - 1st child primary, 2nd secondary, 3rd tertiary
   ==================== */

.cell .cell-stacked {
    display: block;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.cell .cell-stacked > div:first-child {
    color: var(--cell-text);
}

.cell .cell-stacked > div:nth-child(2) {
    font-size: 12px;
    color: var(--cell-text-muted);
    margin-top: 2px;
}

.cell .cell-stacked > div:nth-child(3) {
    font-size: 11px;
    color: var(--cell-text-faint);
    margin-top: 1px;
}

/* ====================
   BASE-VS-CHALLENGER CELL
   ==================== */

/* The experiment row reads "base #id  ->  change #id" on one line: each side a
 * name + an id badge, an arrow between. Each side stays intact and the whole
 * thing wraps to a second line when the column is too narrow. */
.cell .cell-vs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.4;
}

.cell .cell-vs-side {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cell .cell-vs-name {
    color: var(--cell-text);
}

.cell .cell-vs-arrow {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--cell-text-faint);
}

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

.cell .url-link {
    color: var(--cell-link);
    text-decoration: none;
    word-break: break-word;
    display: inline-block;
    max-width: 100%;
}

.cell .url-link:hover {
    text-decoration: underline;
}

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

.cell .badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.cell .badge-success {
    background-color: var(--cell-badge-success-bg);
    color: var(--cell-badge-success-text);
}

.cell .badge-secondary {
    background-color: var(--cell-badge-secondary-bg);
    color: var(--cell-badge-secondary-text);
}

/* ====================
   CONFIG CELLS
   ==================== */

.cell .config-exists {
    color: var(--cell-config-exists);
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

.cell .config-exists:hover {
    color: var(--cell-config-exists-hover);
}

.cell .config-empty {
    color: var(--cell-config-empty);
}

/* ====================
   NEGATIVE VALUES - profit / margin cells, flagged by cell.js
   ==================== */

.cell .cell-negative {
    color: var(--cell-negative);
    font-weight: 700;
}

/* ====================
   TOTALS CELLS - the totals <tr> is .totals-row; its cells are .cell
   ==================== */

.totals-row {
    background-color: var(--cell-header-bg);
    font-weight: 600;
}

.totals-row .cell {
    border: none;
    white-space: nowrap;
}

/* content-section.css */
/**
 * ContentSection owns section gutters, heading hierarchy, and its plain, muted, and ruled surfaces.
 * The same structure accepts any child component; names and theme tokens do not depend on page content.
 */
.content-section,
.content-section *,
.content-section *::before,
.content-section *::after {
	box-sizing: border-box;
}

.content-section {
	padding-block: 60px;
	color: var(--content-section-text);
	background: var(--content-section-surface);
}

.content-section a:not(.button):focus-visible {
	outline: 3px solid var(--content-section-focus-outline);
	outline-offset: 4px;
}

.content-section.content-section-ruled {
	border-block: 1px solid var(--content-section-border);
}

.content-section.content-section-muted {
	background: var(--content-section-surface-soft);
}

.content-section .content-section-inner {
	width: min(100%, 1280px);
	margin-inline: auto;
	padding-inline: 24px;
}

.content-section .content-section-eyebrow {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.content-section .content-section-heading {
	margin: 0;
	font-family: var(--font-headings);
	font-size: clamp(32px, 7vw, 52px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.045em;
}

.content-section .content-section-accent {
	color: var(--content-section-accent);
}

.content-section .content-section-heading-compact {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

.content-section .content-section-description {
	max-width: 48ch;
	margin: 22px 0 0;
	color: var(--content-section-text-muted);
	font-size: 17px;
	line-height: 1.6;
}

.content-section .content-section-heading + :not(.content-section-description),
.content-section .content-section-description + * {
	margin-top: 32px;
}

@media (min-width: 640px) {
	.content-section {
		padding-block: 76px;
	}

	.content-section .content-section-inner {
		padding-inline: 40px;
	}
}

@media (min-width: 1000px) {
	.content-section {
		padding-block: 88px;
	}

	.content-section .content-section-heading > br:not(:last-of-type) {
		display: none;
	}
}


/* data-table.css */
/**
 * DataTable layout + chrome. The container and scroll wrapper, the sticky
 * positioning (header top, totals bottom, first column left, the four
 * corners + z-index ladder), the sticky first-cell background repaints,
 * the loading / error / empty states, the footer, pagination, expand icon,
 * filler row, scrollbar, the skeleton placeholder rows, and the reveal row a
 * capped breakdown puts under its children.
 *
 * Cell *appearance* lives in cell.css and the row backgrounds in row.css;
 * this file is layout + positioning only. One <table> sits in .table-wrapper
 * (the single scroll container) and all four corners pin via position:sticky
 * relative to it. Behavior in data-table.js. Auto-bundled by StyleService.
 * Desktop only.
 */

/* ====================
   CONTAINER - SIZES TO ITS ROWS, UP TO THE SPACE AVAILABLE
   ==================== */

.data-table-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    /* `flex: 0 1 auto` lets a short table end where its rows end; `max-height` stops a long one
       growing past the page, so its overflow goes to the wrapper and the sticky tfoot still has
       something to stick to. Do not restore `flex: 1` - it forces the full height whether the
       table has five rows or five hundred. */
    flex: 0 1 auto;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--data-table-card-border);
    border-radius: 8px; /* the card edge; overflow:hidden clips the wrapper/footer corners to it */
}

/* ====================
   LOADING STATE - WITH LOGO
   ==================== */

.data-table-container .table-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--data-table-text-muted);
    flex: 1;
}

.data-table-container .loading-logo-large {
    width: 64px;
    height: 64px;
    display: block;
    animation: thinking-pulse 1.5s ease-in-out infinite;
    margin-bottom: 0;
}

.data-table-container .loading-logo-large svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes thinking-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(24, 119, 242, 0));
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px rgba(24, 119, 242, 0.6));
    }
}

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

.data-table-container .loading-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

/* ====================
   ERROR STATE
   ==================== */

.data-table-container .table-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--data-table-error-text);
    flex: 1;
}

.data-table-container .error-message {
    font-size: 16px;
    margin-bottom: 16px;
}

.data-table-container .retry-button {
    padding: 10px 20px;
    background-color: var(--data-table-retry-bg);
    color: var(--data-table-retry-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.data-table-container .retry-button:hover {
    background-color: var(--data-table-retry-bg-hover);
}

/* ====================
   EMPTY STATE
   ==================== */

.data-table-container .table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--data-table-text-muted);
    text-align: center;
    flex: 1;
}

.data-table-container .table-empty p {
    margin: 8px 0;
    font-size: 14px;
}

/* ====================
   TABLE WRAPPER - SINGLE SCROLL CONTAINER
   One wrapper, overflow both axes. Everything sticky is relative to this.
   ==================== */

.data-table-container .table-wrapper {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow: auto;
    background: var(--data-table-bg);
    -webkit-overflow-scrolling: touch;
}

/* ====================
   TABLE - NATURAL WIDTH FROM MODEL COLUMN WIDTHS
   Table grows to sum of column widths; overflow scrolls horizontally via the
   wrapper. min-width: 100% keeps a narrow table filling the wrapper; once the
   column min-widths sum wider, the table grows past it and the wrapper scrolls.
   ==================== */

.data-table-container .data-table {
    min-width: 100%;
    /* Height comes from the ROWS, not the wrapper - which is what makes short and long tables
       differ with no row count to measure and no threshold to pick. Do not restore height:100%;
       it stretches the table to the wrapper floor however few rows it has. */
    border-collapse: collapse;
    font-size: 14px;
    table-layout: auto; /* Columns size to content. Model widths are applied as
                           per-column min-width floors (Cell::renderHeader), so a
                           column never shrinks below its configured width but
                           grows to fit a long header or value. */
}

/* Filler row - inert. Against a table of natural height this height:100% has nothing definite to
   resolve against, so the row collapses to 1px and draws nothing. The class split (filler-row,
   not data-row) keeps zebra / hover / click / breakdown off it. Removing it means touching
   data-table.js, which appends it, and row.php, which declares its template. */
.data-table-container .data-table tbody tr.filler-row {
    height: 100%;
}

.data-table-container .data-table tbody tr.filler-row td {
    border: none;
    padding: 0;
    background: transparent;
}

.data-table-container .data-table th {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ====================
   STICKY FOOTER - summary + pagination in one row
   ==================== */

.data-table-container .data-table-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--data-table-bg);
    border-top: 2px solid var(--data-table-border);
    z-index: 20;
    display: flex;
    flex-direction: column;
}

.data-table-container .footer-controls-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    gap: 16px;
}

/* ====================
   RESULTS SUMMARY (footer, left)
   ==================== */

.data-table-container .results-summary {
    font-size: 14px;
    color: var(--data-table-text);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ====================
   PAGINATION (footer, right)
   ==================== */

.data-table-container .pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

/* ====================
   EXPAND/COLLAPSE BREAKDOWN ICONS
   ==================== */

/* The first cell is flex so the breakdown icon can sit at its right edge. That drops
   it out of the table model and breaks colspan, which is why the empty-row cell has to
   be forced back to display:table-cell (see the empty-cell rule). */
.data-table-container .data-table tbody tr td:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.data-table-container .data-table tbody tr td:first-child .cell-content {
    flex: 1;
}

.data-table-container .expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
}

.data-table-container .expand-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Two breakdown icons: the down (collapsed) icon shows by default; the up (open)
   icon swaps in when the row is expanded. */
.data-table-container .expand-icon .expand-icon-expanded {
    display: none;
}
.data-table-container .expand-icon.expanded .expand-icon-collapsed {
    display: none;
}
.data-table-container .expand-icon.expanded .expand-icon-expanded {
    display: block;
}

.data-table-container .expand-icon:hover {
    opacity: 0.7;
}

/* ====================
   STICKY HEADER + STICKY TOTALS + STICKY FIRST COLUMN
   All four corners pin relative to the single #table-wrapper scroll
   container. Chrome 91+/Safari/Firefox support sticky on thead/tfoot/th
   directly, so no JS scroll-sync needed.
   z-index ladder: corner cells 101, header/footer rows 100, first column
   99, regular cells auto. Sticky cells detach from row flow, so each row
   state paints its own background on the sticky first cell. Right-edge
   border marks the first-column boundary while scrolling.
   ==================== */

/* Header row - sticky top. */
.data-table-container .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Totals row - sticky bottom. tfoot itself sticky too for Safari/iOS. */
.data-table-container .data-table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.data-table-container .data-table tfoot tr.totals-row th {
    position: sticky;
    bottom: 0;
    background-color: var(--cell-header-bg);
    z-index: 100;
}

/* Header first cell - top-left corner (sticky both axes). Highest z. */
.data-table-container .data-table thead th:first-child {
    left: 0;
    z-index: 101;
    border-right: 1px solid var(--data-table-border);
}

/* Vertical dividers between header cells; the body + totals rules below continue them. */
.data-table-container .data-table thead th {
    border-right: 1px solid var(--data-table-border);
}

.data-table-container .data-table thead th:last-child {
    border-right: none;
}

/* Vertical dividers down the BODY and the totals, completing the grid the header draws.
   Same --data-table-border the header uses, so a column's divider is one unbroken line
   from header to totals rather than changing colour halfway down.

   Named at .data-row/.sub-row rather than `tbody td` because filler-row and empty-row are
   not grid rows, and naming the real rows stops a future structural row picking the border
   up by accident. */
.data-table-container .data-table tbody tr.data-row td,
.data-table-container .data-table tbody tr.sub-row td,
.data-table-container .data-table tfoot tr.totals-row th {
    border-right: 1px solid var(--data-table-border);
}

/* The last column's right edge IS the container's edge, which is rounded and clipped by
   overflow:hidden - a border there reads as a seam inside the corner. Same reason the header
   drops its own last divider above. */
.data-table-container .data-table tbody tr.data-row td:last-child,
.data-table-container .data-table tbody tr.sub-row td:last-child,
.data-table-container .data-table tfoot tr.totals-row th:last-child {
    border-right: none;
}

/* Totals first cell - bottom-left corner (sticky both axes). Highest z. */
.data-table-container .data-table tfoot tr.totals-row th:first-child {
    left: 0;
    z-index: 101;
    border-right: 1px solid var(--data-table-border);
}

/* Body first cell - sticky left for every row. */
.data-table-container .data-table tbody tr td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 99;
    background-color: var(--row-bg) !important;
    border-right: 1px solid var(--data-table-border);
}

/* Row state backgrounds on the sticky first cell - !important to beat the
   generic td { background-color: transparent } rule. */
.data-table-container .data-table tbody tr.row-zebra td:first-child {
    background-color: var(--row-bg-zebra) !important;
}

.data-table-container .data-table tbody tr:hover td:first-child {
    background-color: var(--row-bg-hover) !important;
}

/* Filler row first cell must not paint a sticky background or seam border. */
.data-table-container .data-table tbody tr.filler-row td:first-child {
    position: static !important;
    background: transparent !important;
    border-right: none !important;
}

/* Empty-state row: no data, but the full table still renders around it, with the message centred
   in the middle of the table rather than pinned to the top. That is why the empty state is the one
   case exempt from the sizing above - the next two rules restore the fill it dropped. Let it
   shrink to its content and the centred message becomes a cramped strip under the header. */
.data-table-container:has(tbody tr.empty-row) {
    flex: 1;
}

.data-table-container .data-table:has(tbody tr.empty-row) {
    height: 100%;
}

.data-table-container .data-table tbody tr.empty-row {
    height: 100%;
}

.data-table-container .data-table tbody tr.empty-row td.empty-cell {
    /* The first-child rule forces display:flex (for breakdown icons), which
       drops the cell out of the table model and breaks colspan. Force it back to
       a table cell so the colspan spans every column and the message centers. */
    display: table-cell !important;
    position: static !important;
    background: transparent !important;
    border-right: none !important;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 40px 16px;
    color: var(--data-table-text-muted);
}

/* ====================
   LOADING OVERLAY - WITH LOGO (NO TEXT)
   ==================== */

.data-table-container .table-wrapper.loading-overlay {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.data-table-container .table-wrapper.loading-overlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-image: url('/images/logo-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: thinking-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

/* ====================
   SMOOTH TRANSITIONS
   ==================== */

.data-table-container .data-table tbody tr,
.data-table-container .pagination-button,
.data-table-container .table-wrapper {
    transition: all 0.2s ease;
}

/* ====================
   SCROLLBAR STYLING
   ==================== */

.data-table-container .table-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.data-table-container .table-wrapper::-webkit-scrollbar-track {
    background: var(--data-table-scrollbar-track);
    border-radius: 4px;
}

.data-table-container .table-wrapper::-webkit-scrollbar-thumb {
    background: var(--data-table-scrollbar-thumb);
    border-radius: 4px;
}

.data-table-container .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--data-table-scrollbar-thumb-hover);
}

/* ====================
   SKELETON - initial-load placeholder rows
   Pre-rendered in the tbody so they inherit the real column widths; the
   first data render wipes them. They borrow .cell for padding + alignment
   but never .row, so they carry no zebra or hover.
   ==================== */

.data-table-container .skeleton-row .skeleton-bar {
    display: block;
    width: 70%;
    height: 14px;
}

.data-table-container .skeleton-row .cell:first-child .skeleton-bar {
    width: 85%;
}

/* Totals skeleton (model exposes selectWithTotals): the first cell shows the
   real "Totals" label, the value cells get a right-aligned shimmer bar. The
   bar needs its own size here because the .skeleton-row rule above is scoped
   to body rows. */
.data-table-container .totals-row .skeleton-bar {
    display: block;
    width: 70%;
    height: 14px;
    margin-left: auto;
}

/* ====================
   FOOTER FIRST-LOAD SKELETON
   While .is-loading-first is on the container, show placeholder bars in the
   footer and hide the real summary + pagination, so the footer holds its
   height from the first paint and nothing shifts when the data lands.
   data-table.js removes the class once the first load finishes.
   ==================== */

.data-table-container .footer-skeleton {
    display: none;
    align-items: center;
    gap: 8px;
}

.data-table-container.is-loading-first .footer-skeleton {
    display: flex;
}

.data-table-container.is-loading-first .results-summary,
.data-table-container.is-loading-first .pagination {
    display: none;
}

.data-table-container .footer-skeleton-summary .skeleton-bar {
    display: block;
    width: 180px;
    height: 14px;
}

.data-table-container .footer-skeleton-pagination .skeleton-bar {
    display: block;
    width: 32px;
    height: 32px;
}

/* The row that reveals the rest of a paged breakdown. It is a sub-row so the collapse
   walkers hide it with its siblings, but it spans the table rather than sitting in the
   grid. Same exemption as the empty-row cell above and for the same reason: the
   first-child rule forces display:flex and position:sticky, which drops the cell out of
   the table model so colspan is ignored and the row pins to the left edge on horizontal
   scroll. Forcing it back is what makes it span and stay put. */
.data-table-container .data-table tbody tr.breakdown-reveal-row {
    cursor: pointer;
}

.data-table-container .data-table tbody tr.breakdown-reveal-row td {
    display: table-cell !important;
    position: static !important;
    background: transparent !important;
    border-right: none !important;
    text-align: center;
    padding: 6px 12px;
}

/* The whole row is the click target, so it takes the hover rather than the button. */
.data-table-container .data-table tbody tr.breakdown-reveal-row:hover td {
    background: var(--row-bg-hover) !important;
}

.data-table-container .breakdown-reveal {
    background: none;
    border: none;
    padding: 4px 10px;
    font: inherit;
    font-size: 12px;
    color: var(--data-table-text-muted);
    cursor: pointer;
    border-radius: 4px;
}

.data-table-container .data-table tbody tr.breakdown-reveal-row:hover .breakdown-reveal {
    color: var(--data-table-text);
}

/* date-range-picker.css */
/**
 * Date-range-picker styles: the trigger button, the dropdown panel (preset
 * list + two linked month calendars), the month/year jump picker, and the
 * footer (editable date inputs + Cancel/Apply). Flat surfaces, thin neutral
 * borders, a primary accent for selection/range, and warning/failure tints
 * for the date warning + input validation.
 *
 * The base button.css colours every button primary on hover/press via
 * button:hover/:active:not([disabled]) at (0,2,1); the button rules here carry
 * :not([disabled]) to out-specify that and keep their own surfaces. Colours
 * come from the --date-range-picker-* tokens (config -> StyleService); icons
 * are inline SVG (injected via MediaService), recoloured by currentColor.
 *
 * Wired by DateRangePicker::css(). Markup lives in
 * /inc/framework/views/components/date-range-picker.php; behavior in
 * /inc/framework/js/modules/date-range-picker.js.
 */

/* ====================
CONTAINER & WARNING
==================== */

.date-range-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    order: 1;  /* left of the refresh control in #app-header-controls */
}

/* Date warning icon - sits left of trigger */
.date-range-warning {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: help;
    color: var(--date-range-picker-warning-icon);
    border-radius: 4px;
    transition: background 0.2s;
}

.date-range-warning:hover {
    background: var(--date-range-picker-warning-bg);
}

.date-range-warning svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ====================
TRIGGER BUTTON
==================== */

.date-range-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--date-range-picker-surface);
    border: 1px solid var(--date-range-picker-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: var(--date-range-picker-text);
}

.date-range-trigger:hover:not([disabled]) {
    background: var(--date-range-picker-surface-hover);
    border-color: var(--date-range-picker-accent);
}

.date-range-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--date-range-picker-icon);
}

.date-range-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.date-range-label {
    font-weight: 600;
    color: var(--date-range-picker-text);
}

.date-range-dates {
    color: var(--date-range-picker-text-muted);
}

.date-range-chevron {
    display: inline-flex;
    width: 12px;
    height: 12px;
    color: var(--date-range-picker-icon);
    transition: transform 0.2s;
}

.date-range-chevron svg {
    width: 100%;
    height: 100%;
    display: block;
}

.date-range-trigger[aria-expanded="true"] .date-range-chevron {
    transform: rotate(180deg);
}

/* ====================
DROPDOWN PANEL
==================== */

.date-range-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;  /* shown as flex by date-range-picker.js */
    flex-direction: column;
    background: var(--date-range-picker-surface);
    border: 1px solid var(--date-range-picker-border-panel);
    border-radius: 8px;
    z-index: 1000;
    min-width: 700px;
    /* Prevent stray text cursors everywhere */
    user-select: none;
    -webkit-user-select: none;
}

.date-range-content {
    display: flex;
}

/* ====================
LEFT PANEL: PRESETS
==================== */

.date-range-presets {
    flex: 0 0 160px;
    padding: 12px 0;
    border-right: 1px solid var(--date-range-picker-border);
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
}

.date-range-presets::-webkit-scrollbar {
    width: 6px;
}

.date-range-presets::-webkit-scrollbar-track {
    background: transparent;
}

.date-range-presets::-webkit-scrollbar-thumb {
    background: var(--date-range-picker-scrollbar);
    border-radius: 3px;
}

.date-range-presets::-webkit-scrollbar-thumb:hover {
    background: var(--date-range-picker-scrollbar-hover);
}

.preset-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.preset-item:hover {
    background: var(--date-range-picker-surface-hover);
}

.preset-item input[type="radio"] {
    margin: 0;
    margin-right: 8px;
    cursor: pointer;
}

.preset-item label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: var(--date-range-picker-text);
}

.preset-item input[type="radio"]:checked + label {
    font-weight: 600;
    color: var(--date-range-picker-accent);
}

/* ====================
CALENDARS
==================== */

.date-range-calendar {
    flex: 1;
    padding: 16px;
    position: relative;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Clickable month/year header with chevron */
.calendar-month-year {
    font-size: 14px;
    font-weight: 600;
    color: var(--date-range-picker-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.calendar-month-year.clickable {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.calendar-month-year.clickable:hover {
    background: var(--date-range-picker-surface-hover);
    color: var(--date-range-picker-accent);
}

.calendar-month-year.clickable:hover .my-header-chevron {
    opacity: 1;
}

.my-header-text {
    pointer-events: none;
}

.my-header-chevron {
    display: inline-flex;
    width: 12px;
    height: 12px;
    opacity: 0.5;
    color: var(--date-range-picker-icon);
    transition: opacity 0.2s;
    pointer-events: none;
}

.my-header-chevron svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Spacer holding the nav-arrow slot so the month/year header stays centred. */
.calendar-nav-spacer {
    width: 28px;
    height: 28px;
}

.calendar-nav-btn {
    width: 28px;
    height: 28px;
    color: var(--date-range-picker-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.calendar-nav-btn:hover:not([disabled]) {
    background: var(--date-range-picker-surface-hover);
}

.calendar-nav-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.calendar-grid {
    width: 100%;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.calendar-weekdays span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--date-range-picker-text-muted);
    padding: 4px 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

/* ====================
CALENDAR DAY CELLS
==================== */

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--date-range-picker-text);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.calendar-day:not(.empty):not(.future-disabled):hover {
    background: var(--date-range-picker-surface-hover);
}

.calendar-day.empty {
    cursor: default;
}

/* Today indicator */
.calendar-day.today {
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--date-range-picker-accent);
}

.calendar-day.today.selected {
    box-shadow: none;
}

/* Future dates - disabled */
.calendar-day.future-disabled {
    color: var(--date-range-picker-text-disabled);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Selected start/end markers */
.calendar-day.selected {
    background: var(--date-range-picker-accent);
    color: var(--date-range-picker-on-accent);
    font-weight: 600;
}

.calendar-day.selected:hover {
    background: var(--date-range-picker-accent-hover);
}

/* Single day selection */
.calendar-day.single-day {
    border-radius: 6px;
}

/* Range start */
.calendar-day.range-start:not(.single-day) {
    border-radius: 6px 0 0 6px;
}

/* Range end */
.calendar-day.range-end:not(.single-day) {
    border-radius: 0 6px 6px 0;
}

/* In confirmed range */
.calendar-day.in-range {
    background: var(--date-range-picker-range-bg);
    border-radius: 0;
}

/* Hover preview range */
.calendar-day.in-range-preview {
    background: var(--date-range-picker-range-bg);
    border-radius: 0;
    opacity: 0.7;
}

/* Hover end marker */
.calendar-day.hover-end {
    background: var(--date-range-picker-range-hover-bg);
    color: var(--date-range-picker-preview-end-text);
    font-weight: 600;
}

/* ====================
MONTH/YEAR JUMP PICKER
==================== */

.month-year-picker-container {
    display: none;  /* shown as block by date-range-picker.js */
    position: absolute;
    top: 40px;
    left: 16px;
    right: 16px;
    z-index: 10;
    background: var(--date-range-picker-surface);
    border: 1px solid var(--date-range-picker-border-panel);
    border-radius: 8px;
}

.my-picker {
    padding: 12px;
}

.my-picker-year-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.my-picker-year {
    font-size: 15px;
    font-weight: 600;
    color: var(--date-range-picker-text);
}

.my-picker-year-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--date-range-picker-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    color: var(--date-range-picker-text-muted);
    transition: all 0.2s;
}

.my-picker-year-btn:hover:not([disabled]) {
    background: var(--date-range-picker-surface-hover);
    border-color: var(--date-range-picker-accent);
    color: var(--date-range-picker-accent);
}

.my-picker-months {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.my-picker-month {
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--date-range-picker-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.my-picker-month:hover:not(.disabled) {
    background: var(--date-range-picker-surface-hover);
    border-color: var(--date-range-picker-accent);
    color: var(--date-range-picker-accent);
}

.my-picker-month.active {
    background: var(--date-range-picker-accent);
    color: var(--date-range-picker-on-accent);
    font-weight: 600;
}

.my-picker-month.disabled {
    color: var(--date-range-picker-text-disabled);
    cursor: not-allowed;
    opacity: 0.5;
}

/* ====================
FOOTER
==================== */

.date-range-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--date-range-picker-border);
}

/* Editable date inputs - allow text selection here */
.date-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-input-field {
    width: 110px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--date-range-picker-text);
    background: var(--date-range-picker-surface);
    border: 1px solid var(--date-range-picker-border);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s;
    /* Re-enable text selection for inputs */
    user-select: text;
    -webkit-user-select: text;
}

.date-input-field:focus {
    border-color: var(--date-range-picker-accent);
}

.date-input-field.input-error {
    border-color: var(--date-range-picker-error);
}

.date-input-field::placeholder {
    color: var(--date-range-picker-placeholder);
}

.date-input-separator {
    color: var(--date-range-picker-text-muted);
    font-size: 14px;
}

/* Action buttons */
.date-range-actions {
    display: flex;
    gap: 8px;
}

.date-range-cancel-btn {
    padding: 8px 24px;
    background: var(--date-range-picker-surface);
    color: var(--date-range-picker-text-muted);
    border: 1px solid var(--date-range-picker-border);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.date-range-cancel-btn:hover:not([disabled]) {
    background: var(--date-range-picker-surface-hover);
    border-color: var(--date-range-picker-border-hover);
}

.date-range-apply-btn {
    padding: 8px 24px;
    background: var(--date-range-picker-accent);
    color: var(--date-range-picker-on-accent);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.date-range-apply-btn:hover:not([disabled]) {
    background: var(--date-range-picker-accent-hover);
}

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

@media (max-width: 768px) {
    .date-range-dropdown {
        min-width: 320px;
        right: auto;
        left: 0;
    }

    .date-range-content {
        flex-direction: column;
    }

    .date-range-presets {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--date-range-picker-border);
        max-height: 200px;
    }

    .date-range-calendar {
        flex: none;
    }

    .date-range-footer {
        flex-direction: column;
        gap: 10px;
    }

    .date-range-inputs {
        width: 100%;
    }

    .date-input-field {
        flex: 1;
    }

    .date-range-actions {
        width: 100%;
    }

    .date-range-cancel-btn,
    .date-range-apply-btn {
        flex: 1;
    }
}

/* domain-qa.css */
/* Domain QA viewer drawer and its testing-links panel. Pairs with domain-qa.js and the
 * domain-qa.php templates. Auto-bundled by StyleService. */

.sidebar-viewer-panel:has(.dqa-body) .sidebar-viewer-body,
.sidebar-viewer-panel:has(.dqa-body) #sidebar-viewer-content {
	padding: 0;
	overflow: hidden;
	height: 100%;
}

.dqa-body {
	display: flex;
	align-items: stretch;
	height: calc(100vh - var(--app-header-height) - 1px);
	background: var(--experiment-preview-bg);
	color: var(--experiment-preview-text);
}

.dqa-viewer {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
}

.dqal {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px 20px;
	color: var(--experiment-preview-text);
}

.dqal-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.dqal-head .dqal-tabs {
	flex: 1 1 auto;
	min-width: 0;
}

.dqal-pane .table {
	table-layout: fixed;
	width: 100%;
}

.dqal-pane .table thead th:nth-child(1) {
	width: 180px;
}

.dqal-pane .table thead th:nth-child(3) {
	width: 72px;
}

.dqal-cell-dest {
	font-weight: 600;
}

.dqal-cell-actions {
	white-space: nowrap;
	text-align: right;
}

.dqal-row-url {
	display: block;
	font-family: var(--font-mono-paragraph, monospace);
	font-size: 11px;
	line-height: 1.45;
	color: var(--experiment-preview-text-muted);
	text-decoration: none;
	word-break: break-all;
}

.dqal-row-url:hover {
	color: var(--experiment-preview-accent);
	text-decoration: underline;
}

.dqal-row-actions {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.dqal .dqal-compact {
	padding: 3px 9px;
	font-size: 11px;
	border-radius: 6px;
}

.dqal .is-copied {
	color: var(--experiment-preview-accent);
}

.dqa-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	color: var(--experiment-preview-text-muted);
	cursor: pointer;
}
.dqa-action:hover {
	color: var(--experiment-preview-accent);
	background: var(--experiment-preview-accent-bg);
}
.dqa-action svg {
	display: block;
	width: 18px;
	height: 18px;
}


/* dynamic-logo.css */
/**
 * Sizes full SVG branding and icon/text branding through DynamicLogo tokens.
 * The same inline artwork follows the active theme in every placement.
 */
.dynamic-logo,
.dynamic-logo:visited,
.dynamic-logo:focus {
	display: inline-flex;
	align-items: center;
	gap: var(--dynamic-logo-gap);
	min-width: 0;
	max-width: 100%;
	color: var(--dynamic-logo-text);
	text-decoration: none;
}

.dynamic-logo:focus-visible {
	outline: 2px solid var(--dynamic-logo-focus-outline);
	outline-offset: 4px;
}

.dynamic-logo .dynamic-logo-artwork {
	display: block;
	width: var(--dynamic-logo-width);
	max-width: 100%;
}

.dynamic-logo .dynamic-logo-artwork > svg {
	display: block;
	width: 100%;
	height: auto;
}

.dynamic-logo .dynamic-logo-icon {
	display: block;
	width: var(--dynamic-logo-icon-size);
	height: var(--dynamic-logo-icon-size);
	flex-shrink: 0;
}

.dynamic-logo .dynamic-logo-icon > svg {
	width: 100%;
	height: 100%;
}

.dynamic-logo .dynamic-logo-text {
	font-family: var(--dynamic-logo-font);
	font-size: var(--dynamic-logo-font-size);
	line-height: 1;
	white-space: nowrap;
}


/* experiment-editor.css */
/*
 * Experiment editor - the 'experiment' panel inside the shared SidebarViewer
 * drawer. Only the panel CONTENT is styled here; the overlay, drawer, header,
 * and close button come from the SidebarViewer shell (sidebar-viewer.css).
 *
 * Two-pane: a controls column beside the live funnel preview, in a widened
 * drawer (.ee-layout, scoped via :has). The controls are tabbed - Global
 * (Palette + Typography), Landing / Steps / Offer (copy) - each tab with a small
 * Heroicon. In the Global tab every brand role is a Base | Challenger pair: a
 * read-only base box stacked above the challenger picker box. Clicking a challenger box
 * opens a swatch (or font) popup beneath the row. The palette popup reuses the
 * global .framework-config-grid / .framework-config-swatch (built by
 * window.FrameworkConfig.buildSwatchGrid), so it is the same interface as the
 * theme changer's picker.
 *
 * Styled on its own --experiment-editor-* tokens (defined in leadthink-app), so
 * it reads in light and dark without borrowing another component's tokens.
 * --swatch-color stays inline (set per-swatch by the helper / the JS).
 * Auto-bundled by StyleService (lives under leadthink-app/components).
 */

/* The shell owns the panel width - the editor asks for the wide mode (experiment-editor.js)
   rather than sizing .sidebar-viewer-panel; the single scoped exception is the <=900px stacking
   rule below. Sizing the shared panel from a component sheet is how one component ended up sizing
   every other component's panel.

   Two-pane editor: the controls (left) beside the live funnel preview (right) in
   one drawer (ExperimentPreview mounts into [data-preview-mount]). Still scoped via
   :has(.ee-layout) so the shared shell's body padding/scroll only changes while the
   editor is open - other viewers (e.g. the results panel) keep the default body. The
   layout height is pinned to the viewport minus the header so the left column and
   each preview pane scroll independently. */
.sidebar-viewer-panel:has(.ee-layout) .sidebar-viewer-body {
    padding: 0;
    overflow: hidden;
}
.ee-layout {
    display: flex;
    align-items: stretch;
    /* minus the header's 1px border-bottom (no border-box reset on the app sheet) */
    height: calc(100vh - var(--app-header-height) - 1px);
}
.ee-layout .ee {
    /* room for the role rows and the tabbed copy editors, never below 460px on a
       smaller drawer */
    flex: 0 0 clamp(460px, 40%, 600px);
    width: clamp(460px, 40%, 600px);
    height: 100%;
    min-height: 0;
    border-right: 1px solid var(--experiment-editor-border);
}
.ee-layout .ee-scroll {
    overflow-y: auto;
    padding: 24px;
}
.ee-layout .ee-footer {
    padding: 14px 24px;
    margin-top: 0;
}
.ee-preview-pane {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
}

/* Below ~tablet the two-pane row has no room: stack the controls over the
   preview (each its own scroll) and drop the widened drawer to full-bleed, so
   the editor is usable on narrow viewports instead of squeezing the preview to
   nothing against the 460px-minimum controls. */
@media (max-width: 900px) {
    /* THE ONE PLACE A COMPONENT STILL SETS A PANEL WIDTH, and deliberately so. This is not a width
       MODE - it is the editor's own layout breakpoint. The two-pane row stops fitting at ~900px,
       which is a fact about .ee-layout, not about the shell, and the shell's own narrow rule does
       not start until 768. Folding this into the `wide` mode would also change the Domain QA
       viewer between 769 and 900, which uses the same mode and has no such breakpoint. Scoped to
       :has(.ee-layout) so it can only ever affect this panel. */
    .sidebar-viewer-panel[data-width="wide"]:has(.ee-layout) {
        width: 100%;
        max-width: 100%;
    }
    .ee-layout {
        flex-direction: column;
    }
    .ee-layout .ee {
        flex: 0 0 auto;
        width: 100%;
        max-height: 55vh;
        border-right: 0;
        border-bottom: 1px solid var(--experiment-editor-border);
    }
    .ee-preview-pane {
        flex: 1 1 auto;
        min-height: 0;
    }
}

.ee {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: transparent;
    color: var(--experiment-editor-text);
}
.ee-scroll {
    flex: 1 1 auto;
}

/* sections as cards floating on the now-transparent panel (mirrors the results
   panel's card treatment, so the editor and results read as one family) */
.ee-section {
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid var(--experiment-editor-border);
    border-radius: 8px;
    background: var(--experiment-editor-bg);
}
.ee-section:first-child {
    margin-top: 4px;
}

/* tabs: scope selector for the variation surface (Global / Landing / Steps / Offer) */
.ee-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--experiment-editor-border);
}
.ee-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 8px 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--experiment-editor-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
/* small Heroicon per tab (inline in the template, stroke = currentColor so it
   tints with the tab's active / muted state). */
.ee-tab-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}
/* per-tab change counter - an accent pill after the label, hidden at zero (the JS
   toggles [hidden] from refreshSaveGuard's tallies). */
.ee-tab-count {
    flex: 0 0 auto;
    min-width: 16px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 999px;
    background: var(--experiment-editor-accent);
    color: var(--experiment-editor-bg);
}
.ee-tab-count[hidden] {
    display: none;
}
.ee-tab:hover {
    color: var(--experiment-editor-text-strong);
}
.ee-tab.is-active {
    color: var(--experiment-editor-accent);
    border-bottom-color: var(--experiment-editor-accent);
}
.ee-tab:focus-visible {
    outline: 2px solid var(--experiment-editor-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.ee-tab-panel {
    display: none;
}
.ee-tab-panel.is-active {
    display: block;
}

/* copy fields (Steps / Offer / Landing tabs) - reuse .ee-field-label + .ee-input */
.ee-tab-hint {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--experiment-editor-text-faint);
}
.ee-copy-list {
    display: block;
}
.ee-copy-empty {
    font-size: 13px;
    color: var(--experiment-editor-text-faint);
}
/* one card per scope (step / offer / landing), holding its before-after copy rows */
.ee-copy-card {
    border: 1px solid var(--experiment-editor-border);
    border-radius: 8px;
    background: var(--experiment-editor-bg);
    padding: 12px;
    margin-bottom: 10px;
}
.ee-copy-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--experiment-editor-text-strong);
    margin-bottom: 4px;
}
/* The scope card you're editing: light the whole card so it's obvious which step/offer the
   preview is mirroring (an accent border + left bar + faint tint, not just the challenger). */
.ee-copy-card.is-editing {
    border-color: var(--experiment-editor-accent);
    box-shadow: inset 3px 0 0 0 var(--experiment-editor-accent);
    background: color-mix(in srgb, var(--experiment-editor-accent) 6%, var(--experiment-editor-bg));
}
.ee-copy-card.is-editing .ee-copy-card-head {
    color: var(--experiment-editor-accent);
}
/* the offer's logo at the top-right of its card head; currentColor so the mono marks
   follow the head's text colour (light/dark), multicolor marks stay branded. */
.ee-offer-logo {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 26px;
    color: var(--experiment-editor-text-muted);
}
.ee-offer-logo svg {
    display: block;
    height: 26px;
    width: auto;
    max-width: 160px;
}
/* copy rows reuse the palette/typography row shape (.ee-role-row + .ee-base-chip); the
   challenger control is an auto-growing textarea so long copy (paragraphs) gets room. */
.ee-copy-input {
    flex: 1 1 auto;
    min-width: 0;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    min-height: 36px;
    font-family: inherit;
}
/* the step's field (Gender, Email, ...) as a badge beside "Step N" */
.ee-step-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: color-mix(in srgb, var(--experiment-editor-accent) 15%, var(--experiment-editor-bg));
    color: var(--experiment-editor-accent);
}
/* rich-text control for HTML copy: one box (.ee-rte-wrap) with the contenteditable on
   top and the format bar as a footer INSIDE it, so the controls live in the box and the
   tester clicks to format instead of hand-editing raw markup */
.ee-rte-wrap {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--experiment-editor-border);
    border-radius: 8px;
    background: var(--experiment-editor-bg);
    overflow: hidden;
}
.ee-rte-wrap:focus-within {
    border-color: var(--experiment-editor-accent);
}
.ee-rte {
    padding: 9px 12px;
    min-height: 36px;
    font-size: 13px;
    color: var(--experiment-editor-text);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    outline: none;
}
.ee-rte:empty::before {
    content: attr(data-placeholder);
    color: var(--experiment-editor-text-faint);
    pointer-events: none;
}
.ee-rte .highlight {
    background: var(--experiment-editor-active-bg);
    color: var(--experiment-editor-active-text);
    border-radius: 3px;
    padding: 0 3px;
}
.ee-rte strong {
    font-weight: 700;
    background: var(--experiment-editor-active-bg);
    color: var(--experiment-editor-active-text);
    border-radius: 3px;
    padding: 0 3px;
}
.ee-rte-bar {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    border-top: 1px solid var(--experiment-editor-border);
    background: var(--experiment-editor-hover-bg);
}
.ee-rte-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border: 1px solid var(--experiment-editor-border);
    border-radius: 6px;
    background: var(--experiment-editor-bg);
    color: var(--experiment-editor-text-muted);
    cursor: pointer;
}
/* Icon cue on each format button: pen = highlight, "B" = bold, turn-arrow = break. */
.ee-rte-btn-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    line-height: 1;
}
.ee-rte-btn-ic svg {
    width: 13px;
    height: 13px;
    display: block;
}
.ee-rte-btn-strong .ee-rte-btn-ic {
    font-weight: 800;
    font-size: 13px;
}
.ee-rte-btn:hover {
    border-color: var(--experiment-editor-accent);
    color: var(--experiment-editor-text-strong);
}
/* inline decoration control: the type icon (pencil = highlight, "B" = bold) + a micro-x,
   riding just after the decorated word so the tester can pull a decoration without
   touching markup. contenteditable=false (set in JS) so it deletes as one unit. */
.ee-deco-ctrl,
.ee-deco-break {
    user-select: none;
    -webkit-user-select: none;
}
.ee-deco-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 5px;
    vertical-align: middle;
}
.ee-deco-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--experiment-editor-accent);
}
.ee-deco-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}
.ee-deco-x {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    cursor: pointer;
    color: var(--experiment-editor-text-faint);
}
.ee-deco-x svg {
    width: 12px;
    height: 12px;
    display: block;
}
.ee-deco-x:hover {
    color: var(--experiment-editor-text-strong);
}
/* break widget: stands in for <br>, so it sits on its own line; return icon tinted
   primary. Deleting it (x or backspace) removes the break. */
.ee-deco-break {
    display: flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    margin: 3px 0;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--experiment-editor-active-bg);
}
.ee-deco-break .ee-deco-icon {
    color: var(--experiment-editor-accent);
}
/* The break icon (arrow-turn-right-down) already points down-and-right - reads as "next line". */
/* Base copy shown in-format (a hint of what the live copy already decorates): wraps and
   clamps to a few lines so a long paragraph never overflows the box. */
.ee-base-chip.ee-base-rich {
    align-items: flex-start;
}
.ee-base-rich .ee-base-text {
    white-space: normal;
    overflow: hidden;
    /* Block (not -webkit-box) so an explicit <br> from a Break actually wraps to the next line
       the way the editor shows it; clamp to ~3 lines with max-height instead of line-clamp. */
    max-height: 4.2em;
    line-height: 1.4;
}
.ee-base-rich .highlight {
    background: var(--experiment-editor-active-bg);
    color: var(--experiment-editor-active-text);
    border-radius: 3px;
    padding: 0 3px;
}
.ee-base-rich strong {
    font-weight: 700;
    background: var(--experiment-editor-active-bg);
    color: var(--experiment-editor-active-text);
    border-radius: 3px;
    padding: 0 3px;
}
/* visible break marker in the Base copy (a return glyph before each wrap). */
.ee-base-break {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 2px;
    color: var(--experiment-editor-accent);
}
.ee-base-break svg {
    width: 11px;
    height: 11px;
    display: block;
}
/* copy-down: seeds the challenger with the base copy; sits at the right of the base chip. */
.ee-copy-down {
    appearance: none;
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--experiment-editor-border);
    border-radius: 6px;
    background: var(--experiment-editor-bg);
    color: var(--experiment-editor-text-muted);
    cursor: pointer;
}
.ee-copy-down:hover {
    border-color: var(--experiment-editor-accent);
    color: var(--experiment-editor-text-strong);
}
.ee-copy-down svg {
    width: 14px;
    height: 14px;
}
.ee-section-title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--experiment-editor-text-faint);
}

/* form fields (tracking + split) */
.ee-field {
    margin-bottom: 16px;
}
.ee-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--experiment-editor-text-strong);
    margin-bottom: 6px;
}
.ee-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--experiment-editor-text);
    background: var(--experiment-editor-bg);
    border: 1px solid var(--experiment-editor-border);
    border-radius: 6px;
}
.ee-input::placeholder {
    color: var(--experiment-editor-text-faint);
}
.ee-input:focus {
    outline: none;
    border-color: var(--experiment-editor-accent);
}
/* Sub-ID is a free-form field (sub IDs are arbitrary, so no autocomplete/validation), but it
   should read as one set with the affiliate/campaign/platform chip boxes beside it - so it borrows
   the shared filter-chip tokens + matches their height/font. */
.ee-input[data-sub-input] {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 14px;
    background: var(--filter-chip-surface);
    border-color: var(--filter-chip-border);
}
.ee-input[data-sub-input]:focus {
    border-color: var(--filter-chip-accent);
}
.ee-input.is-future {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Base / Challenger rows: a role name, then the read-only base box, then the
   challenger picker box stacked beneath it - a top -> bottom before/after pair. The
   challenger box mirrors the base (tag + swatch + name) with a trailing dropper as
   the pick cue, and flips to its edited look once a challenger is set. */
.ee-roles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ee-role-row,
.ee-font-row {
    position: relative;
    padding: 8px 0;
}
.ee-role-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--experiment-editor-text-strong);
    margin-bottom: 6px;
}
/* the "Challenger" tag inside the picker box, accent-tinted so it reads distinct
   from the faint "Base" tag on the box stacked above it. */
.ee-variant-tag {
    color: var(--experiment-editor-accent);
}
/* the challenger's own swatch, mirroring the base swatch. Until a color is picked
   it's a faint dashed placeholder; updateChallengerCell() fills its background. */
.ee-role-row:not(.is-changed) .ee-variant-swatch {
    border-style: dashed;
    border-color: var(--experiment-editor-text-faint);
    background: transparent;
}
/* the separate "pick" cue: a neutral dropper at the end of the box (the swatch
   carries the colour, this just signals the box opens the picker). */
.ee-select-dropper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--experiment-editor-text-faint);
}
.ee-select-dropper svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}
/* edited flip: once a challenger is set, the box brightens to an accent-tinted
   panel so the change is unmistakable against the untouched rows. */
.ee-role-row.is-changed .ee-cell-variant .ee-select,
.ee-font-row.is-changed .ee-cell-variant .ee-select {
    border-color: var(--experiment-editor-accent);
    background: var(--experiment-editor-active-bg);
}
.ee-role-row.is-changed .ee-select-name,
.ee-font-row.is-changed .ee-select-name {
    color: var(--experiment-editor-active-text);
}
/* the BASE (current) is a read-only chip mirroring the challenger chip directly
   below it, so the row reads as a tight before -> after pair. */
.ee-base-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px;
    margin-bottom: 6px;
    border: 1px solid var(--experiment-editor-border);
    border-radius: 6px;
    background: var(--experiment-editor-hover-bg);
    color: var(--experiment-editor-text-muted);
}
.ee-base-chip .ee-static-swatch {
    width: 18px;
    height: 18px;
}
.ee-base-tag {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--experiment-editor-text-faint);
}
/* fixed-width Base / Challenger tag in the Global tab so the swatch (palette) or the Aa
   specimen (typography) after it lines up between the stacked base and challenger boxes. */
.ee-role-row .ee-base-tag,
.ee-font-row .ee-base-tag {
    min-width: 104px;
}
.ee-base-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The challenger control is a custom "select": a hidden native <select> holds the
   value (form-real + a no-JS fallback), and a chip trigger + clear button drive
   it, with the picker grid popup beneath. The chip shows the current value - the
   dropper tints to the chosen palette, or an "Aa" specimen renders in the chosen
   font - and the name sits on one line and ellipsizes (no vertical cram). */
.ee-native-select {
    display: none;
}
.ee-cell-variant {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.ee-select {
    appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--experiment-editor-border);
    border-radius: 6px;
    background: var(--experiment-editor-bg);
    color: var(--experiment-editor-text);
    cursor: pointer;
    text-align: left;
}
.ee-select:hover {
    border-color: var(--experiment-editor-accent);
}
.ee-select:focus-visible {
    outline: 2px solid var(--experiment-editor-accent);
    outline-offset: 1px;
}
/* typography specimen: "Aa" rendered in the chosen face (JS sets font-family). */
.ee-select-specimen {
    flex: 0 0 auto;
    width: 22px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    color: var(--experiment-editor-text-faint);
}
.ee-select.is-set .ee-select-specimen,
.ee-base-chip .ee-select-specimen {
    color: var(--experiment-editor-text-strong);
}
/* the value / placeholder: always one line, ellipsized. */
.ee-select-name,
.ee-cell-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--experiment-editor-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ee-choose {
    color: var(--experiment-editor-text-faint);
    font-weight: 500;
}
/* clear-to-base: revealed only when the row carries a challenger (.is-changed). */
.ee-select-clear {
    appearance: none;
    flex: 0 0 auto;
    display: none;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    width: 34px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    border: 1px solid var(--experiment-editor-border);
    border-radius: 6px;
    background: var(--experiment-editor-bg);
    color: var(--experiment-editor-text-muted);
    cursor: pointer;
}
.ee-select-clear:hover {
    border-color: var(--experiment-editor-accent);
    color: var(--experiment-editor-text-strong);
}
.ee-select-clear:focus-visible {
    outline: 2px solid var(--experiment-editor-accent);
    outline-offset: 1px;
}
.ee-role-row.is-changed .ee-select-clear,
.ee-font-row.is-changed .ee-select-clear {
    display: inline-flex;
}
/* base column swatch (read-only) */
.ee-static-swatch {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid var(--experiment-editor-border);
    background: var(--swatch-color);
}

/* challenger picker popup: clicking the challenger cell opens this, holding the
   same swatch grid the theme changer uses (.framework-config-grid /
   .framework-config-swatch), so it looks and behaves identically. */
.ee-picker-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--experiment-editor-border);
    border-radius: 10px;
    background: var(--experiment-editor-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.98);
    transform-origin: top center;
    transition: transform 140ms ease, opacity 140ms ease, visibility 0s linear 140ms;
}
.ee-picker-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition: transform 140ms ease, opacity 140ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
    .ee-picker-popup {
        transition: none;
    }
}
.ee-picker-grid {
    max-height: 200px;
    overflow-y: auto;
    /* room for the active swatch's outer ring so it isn't clipped at the edges */
    padding: 5px;
}

/* thin, theme-aware scrollbars - the default chunky bars threw off the spacing
   in the controls column and the picker grids. */
.ee-scroll,
.ee-picker-grid,
.ee-font-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--experiment-editor-border) transparent;
}
.ee-scroll::-webkit-scrollbar,
.ee-picker-grid::-webkit-scrollbar,
.ee-font-grid::-webkit-scrollbar {
    width: 8px;
}
.ee-scroll::-webkit-scrollbar-thumb,
.ee-picker-grid::-webkit-scrollbar-thumb,
.ee-font-grid::-webkit-scrollbar-thumb {
    background: var(--experiment-editor-border);
    border-radius: 4px;
}
.ee-scroll::-webkit-scrollbar-track,
.ee-picker-grid::-webkit-scrollbar-track,
.ee-font-grid::-webkit-scrollbar-track {
    background: transparent;
}

/* the font popup: family "cards", each previewing the family in its own face
   above its weight chips, so families read as distinct blocks. The row layout is
   the shared stacked .ee-role-row, .ee-font-row rule above; the popup spans the
   full cell width via .ee-picker-popup. */
.ee-font-group {
    padding: 10px;
    border: 1px solid var(--experiment-editor-border);
    border-radius: 8px;
    background: var(--experiment-editor-hover-bg);
}
/* category filter pills above the font grid - narrow the list to sans / serif /
   display / mono. */
.ee-font-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ee-font-filter {
    appearance: none;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid var(--experiment-editor-border);
    border-radius: 999px;
    background: var(--experiment-editor-bg);
    color: var(--experiment-editor-text-muted);
    cursor: pointer;
}
.ee-font-filter:hover {
    border-color: var(--experiment-editor-accent);
}
.ee-font-filter.is-active {
    background: var(--experiment-editor-active-bg);
    color: var(--experiment-editor-active-text);
    border-color: var(--experiment-editor-accent);
}
/* Each category pill previews its own category - "Serif" reads in a serif, "Mono" in a
 * monospace - so the filter is self-explanatory. These are the instant generic
 * fallbacks; styleFilterPills() in the JS upgrades each to a real catalog font of that
 * category once the faces load (and gives Display a real face). */
.ee-font-filter[data-cat="sans"] {
    font-family: ui-sans-serif, sans-serif;
}
.ee-font-filter[data-cat="serif"] {
    font-family: ui-serif, Georgia, serif;
}
.ee-font-filter[data-cat="display"] {
    font-family: ui-serif, Georgia, serif;
}
.ee-font-filter[data-cat="mono"] {
    font-family: ui-monospace, monospace;
}
.ee-font-grid {
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* the family name IS the preview - rendered in its own face by the JS, so it's
   large and undistorted (no uppercase / letter-spacing). */
.ee-font-group-name {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--experiment-editor-text-strong);
    margin-bottom: 8px;
}
.ee-font-weights {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ee-font-chip {
    appearance: none;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 10px;
    border: 1px solid var(--experiment-editor-border);
    border-radius: 5px;
    background: var(--experiment-editor-bg);
    color: var(--experiment-editor-text);
    cursor: pointer;
}
.ee-font-chip:hover {
    border-color: var(--experiment-editor-accent);
}
.ee-font-chip.is-active {
    background: var(--experiment-editor-active-bg);
    color: var(--experiment-editor-active-text);
    border-color: var(--experiment-editor-accent);
}
.ee-font-empty {
    font-size: 12px;
    color: var(--experiment-editor-text-muted);
    padding: 8px;
}

.ee-note {
    font-size: 12px;
    color: var(--experiment-editor-text-muted);
    line-height: 1.5;
    margin: 14px 0 0;
}

/* experiment split */
.ee-split-readout {
    font-size: 12px;
    font-weight: 500;
    color: var(--experiment-editor-text-muted);
    margin-bottom: 10px;
}
.ee-split-range {
    width: 100%;
    accent-color: var(--experiment-editor-accent);
    cursor: pointer;
}

/* footer */
.ee-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--experiment-editor-border);
}
.ee-btn {
    appearance: none;
    border-radius: 6px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.ee-btn-ghost {
    background: var(--experiment-editor-bg);
    border-color: var(--experiment-editor-border);
    color: var(--experiment-editor-text);
}
.ee-btn-ghost:hover {
    background: var(--experiment-editor-hover-bg);
}
.ee-btn-primary {
    background: var(--experiment-editor-save-bg);
    color: var(--experiment-editor-save-text);
}
.ee-btn-primary:hover {
    background: var(--experiment-editor-save-bg-hover);
}
.ee-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
/* Revert-to-base: sits at the left of the footer (margin-right:auto pushes Cancel /
   Save to the right) and only appears once there's a change to revert - the JS
   toggles [hidden] from refreshSaveGuard. */
.ee-btn-revert {
    margin-right: auto;
    background: var(--experiment-editor-bg);
    border-color: var(--experiment-editor-border);
    color: var(--experiment-editor-text-muted);
}
.ee-btn-revert:hover {
    border-color: var(--experiment-editor-accent);
    color: var(--experiment-editor-text-strong);
}
.ee-btn-revert[hidden] {
    display: none;
}

/* saved confirmation (theme-aware success tint) */
.ee-saved {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--experiment-editor-saved-bg);
    border: 1px solid var(--experiment-editor-border);
    border-radius: 8px;
}
.ee-saved[hidden] {
    display: none;
}
.ee-saved-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--experiment-editor-saved-text);
    margin-bottom: 4px;
}
.ee-saved-body {
    font-size: 13px;
    color: var(--experiment-editor-saved-text);
    line-height: 1.5;
}
.ee-saved-hint {
    font-size: 12px;
    color: var(--experiment-editor-text-muted);
    margin-top: 8px;
}

.ee-empty {
    font-size: 13px;
    color: var(--experiment-editor-text-muted);
    padding: 16px;
    text-align: center;
}

/* the dashboard action-cell triggers (beaker / chart icons) */
.ee-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--experiment-editor-text-muted);
    cursor: pointer;
}
.ee-action svg {
    width: 16px;
    height: 16px;
}
.ee-action:hover {
    background: var(--experiment-editor-hover-bg);
    color: var(--experiment-editor-active-text);
}

/* run/pause toggle in the dashboard status column (Facebook-Ads-style switch).
   The switch IS the status - running = on, paused = off. role="switch" +
   aria-checked carry the a11y; track/thumb are decorative. */
.ee-switch {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--experiment-editor-text-muted);
}
.ee-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: var(--experiment-editor-border);
    transition: background 140ms ease;
}
.ee-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--experiment-editor-bg);
    transition: transform 140ms ease;
}
.ee-switch.is-on .ee-switch-track {
    background: var(--experiment-editor-save-bg);
}
.ee-switch.is-on .ee-switch-thumb {
    transform: translateX(16px);
}
.ee-switch.is-on .ee-switch-label {
    color: var(--experiment-editor-switch-on-text);
}
.ee-switch:focus-visible {
    outline: 2px solid var(--experiment-editor-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .ee-switch-track,
    .ee-switch-thumb {
        transition: none;
    }
}

/* experiment-preview.css */
/* Experiment preview - the base vs challenger funnel preview that mounts inside the
 * widened experiment-editor drawer (built by experiment-preview.js, window.ExperimentPreview).
 *
 * A toolbar (a device-size selector + step nav) over two stacked iframe panes. The
 * selector sizes each iframe to a real device WIDTH and scales it to fit the pane, so
 * the funnel lays out at that viewport (an "approximate" note flags it). Driven by its
 * own --experiment-preview-* tokens (the 'experiment-preview' block in leadthink-app.php,
 * dark override in themes/dark.php). Auto-bundled by StyleService's folder crawl.
 *
 * Drawer widening + the two-pane layout that hosts this live in experiment-editor.css
 * (the editor owns its drawer); here we style only the preview's own internals.
 */

.experiment-preview {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	background: var(--experiment-preview-bg);
	color: var(--experiment-preview-text);
}

/* toolbar */
.experiment-preview .ep-bar {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	padding: 10px 14px;
	border-bottom: 1px solid var(--experiment-preview-border);
	background: var(--experiment-preview-surface);
}
.experiment-preview .ep-device-select,
.experiment-preview .ep-chrome-select {
	appearance: none;
	flex-shrink: 0;
	border: 1px solid var(--experiment-preview-border);
	border-radius: 6px;
	background: var(--experiment-preview-surface);
	color: var(--experiment-preview-text);
	font: inherit;
	font-size: 12px;
	padding: 5px 10px;
	cursor: pointer;
}
.experiment-preview .ep-device-note {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--experiment-preview-text-muted);
}
/* Labelled toolbar control: a small caption above a dropdown / toggle / readout. */
.experiment-preview .ep-ctl {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.experiment-preview .ep-ctl-label,
.experiment-preview .ep-nav-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--experiment-preview-text-muted);
}
/* Segmented 2-option toggle (Browser, Orientation), styled like the sidebar theme toggle:
   a recessed track of icon boxes, the active box raised in surface + accent for clear contrast. */
.experiment-preview .ep-seg {
	display: inline-flex;
	gap: 2px;
	width: fit-content;
	padding: 2px;
	border: 1px solid var(--experiment-preview-border);
	border-radius: 8px;
	background: var(--experiment-preview-bg);
}
/* A segment IS a ghost button, so the Button component supplies its whole appearance - the
   reset, the transparent fill and edge, the muted colour and the hover. Only the segmented
   control's own geometry lives here: a compact box that nests inside the .ep-seg track (6px
   inside the track's 8px) and a smaller type/glyph than a standalone button. */
.experiment-preview .ep-seg-btn {
	min-width: 36px;
	height: 26px;
	padding: 0 8px;
	border-radius: 6px;
	font-size: 12px;
}
.experiment-preview .ep-seg-btn svg {
	display: block;
	width: 17px;
	height: 17px;
}
/* The active segment - the state that makes this a segmented control rather than a row of
   buttons. Scoped through .ep-seg and restated for :hover so it outranks the ghost variant's
   own hover rule, which would otherwise repaint the active segment while the pointer is on it. */
.experiment-preview .ep-seg .ep-seg-btn.on,
.experiment-preview .ep-seg .ep-seg-btn.on:hover {
	background: var(--experiment-preview-surface);
	color: var(--experiment-preview-accent);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* Live viewport dimensions readout (flips with orientation). */
.experiment-preview .ep-dims {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--experiment-preview-text);
	padding: 4px 0;
}

/* step nav - two labelled sections (Steps / Offers), each a caption over a wrapping row. */
.experiment-preview .ep-steps {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	align-items: flex-start;
}
.experiment-preview .ep-nav-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.experiment-preview .ep-nav-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.experiment-preview .ep-step {
	appearance: none;
	border: 1px solid var(--experiment-preview-border);
	background: var(--experiment-preview-surface);
	color: var(--experiment-preview-text-muted);
	font: inherit;
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
}
.experiment-preview .ep-step:hover {
	border-color: var(--experiment-preview-accent);
}
.experiment-preview .ep-step.on {
	background: var(--experiment-preview-accent-bg);
	color: var(--experiment-preview-accent);
	border-color: var(--experiment-preview-accent);
}

/* offer pills - the partner offers, set off from the question steps by a divider
 * and tinted with the challenger accent so they read as a distinct group. */
.experiment-preview .ep-step-sep {
	align-self: stretch;
	width: 1px;
	margin: 2px;
	background: var(--experiment-preview-border);
}
.experiment-preview .ep-step-offer {
	color: var(--experiment-preview-challenger-accent);
}
.experiment-preview .ep-step-offer.on {
	background: var(--experiment-preview-accent-bg);
	color: var(--experiment-preview-challenger-accent);
	border-color: var(--experiment-preview-challenger-accent);
}

/* panes */
.experiment-preview .ep-panes {
	flex: 1 1 auto;
	min-height: 0;
	/* Responsive funnel pages never need a sideways scroll; only let the panes scroll
	   vertically so a tall page is reachable. */
	overflow-x: hidden;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	align-items: stretch;
	gap: 16px;
}
/* Phone widths sit base|challenger side by side; tablet/desktop stack them (setDevice
   picks the modifier by device width). The iframe inside each frame is sized to the
   device width and scaled to fit its pane (set inline by _applyDevice). */
.experiment-preview .ep-panes--side {
	flex-direction: row;
	justify-content: center;
}
.experiment-preview .ep-panes--stack {
	flex-direction: column;
}
/* Carousel track (FunnelViewer opts.carousel): the WHOLE funnel on one horizontal rail -
   landing, then each step, then each offer. Panes are full-height and sized by _applyDevice,
   so the rail overflows sideways and you scroll the funnel front to back. Only the active
   pane and its neighbours carry a live iframe; the rest are mounted but blank. */
.experiment-preview .ep-panes--track {
	flex-direction: row;
	justify-content: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
}
.experiment-preview .ep-panes--track .ep-frame {
	flex: 0 0 auto;
	scroll-snap-align: center;
}
.experiment-preview .ep-frame {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	border: 1px solid var(--experiment-preview-frame-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--experiment-preview-frame-bg);
}
.experiment-preview .ep-frame-challenger {
	border-color: var(--experiment-preview-challenger-accent);
}

.experiment-preview .ep-frame-tab {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 11px;
	border-bottom: 1px solid var(--experiment-preview-border);
	background: var(--experiment-preview-surface);
}
.experiment-preview .ep-frame-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--experiment-preview-text);
}
.experiment-preview .ep-frame-challenger .ep-frame-label {
	color: var(--experiment-preview-challenger-accent);
}
.experiment-preview .ep-frame-sub {
	font-size: 11px;
	color: var(--experiment-preview-text-muted);
}

.experiment-preview .ep-frame-scr {
	flex: 1 1 auto;
	position: relative;
	min-height: 360px;
	overflow: hidden;
}
.experiment-preview .ep-iframe {
	position: absolute;
	top: 0;
	left: 0;
	border: none;
	display: block;
	background: var(--experiment-preview-frame-bg);
}

/* Mobile browser-chrome frame (device-frame mode). Bars draw at the device's natural width and
   scale with the phone (positioned inline by _layoutDeviceFrame), styled per browser
   (.ep-chrome--safari / --chrome-ios / --chrome-android) to match real iOS Safari / Chrome.
   Built by _chromeHtml; uses fixed iOS chrome colours, not the app theme - a browser is a
   browser. Hidden by default; shown only on a phone + a chrome pick. */
.experiment-preview .ep-chrome-top,
.experiment-preview .ep-chrome-bottom {
	position: absolute;
	display: none;
	z-index: 2;
	box-sizing: border-box;
	overflow: hidden;
	background: #f7f7f9;
	color: #1c1c1e;
	font: 600 14px -apple-system, system-ui, "Segoe UI", Arial, sans-serif;
}

/* iOS status bar: time left, signal / wifi / battery right */
.experiment-preview .ep-stat {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 22px 0 28px;
}
/* iPhone hardware cutout in the status bar: the Dynamic Island (floating pill, 14 Pro / 15 /
   16 Pro) or the older notch (14 / 11). Black in light + dark - it's the cutout, not chrome. */
.experiment-preview .ep-island {
	position: absolute;
	left: 50%;
	top: 11px;
	transform: translateX(-50%);
	width: 124px;
	height: 36px;
	background: #000;
	border-radius: 20px;
}
.experiment-preview .ep-notch {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 156px;
	height: 30px;
	background: #000;
	border-radius: 0 0 18px 18px;
}
.experiment-preview .ep-stat--ios {
	height: 54px;
}
.experiment-preview .ep-stat--android {
	height: 26px;
	padding: 0 14px;
	font-size: 12px;
}
.experiment-preview .ep-stat-time {
	font-weight: 700;
	font-size: 15px;
}
.experiment-preview .ep-stat-ic {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.experiment-preview .ep-sig {
	width: 18px;
	height: 13px;
	fill: #1c1c1e;
}
.experiment-preview .ep-wifi {
	width: 17px;
	height: 15px;
	fill: none;
	stroke: #1c1c1e;
	stroke-width: 2;
	stroke-linecap: round;
}
.experiment-preview .ep-batt {
	width: 26px;
	height: 14px;
}
.experiment-preview .ep-batt rect {
	fill: none;
	stroke: #1c1c1e;
	stroke-width: 1.2;
}
.experiment-preview .ep-batt .ep-batt-f,
.experiment-preview .ep-batt .ep-batt-nub {
	fill: #1c1c1e;
	stroke: none;
}

/* shared control icons (chevrons, share, dots) - iOS blue */
.experiment-preview .ep-cic {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: #007aff;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}
.experiment-preview .ep-cic-f {
	width: 23px;
	height: 23px;
	fill: #007aff;
	flex: 0 0 auto;
}
.experiment-preview .ep-dim {
	opacity: 0.3;
}
.experiment-preview .ep-lock {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: #6b7280;
	stroke-width: 1.6;
	flex: 0 0 auto;
}

/* Safari: top status + address pill, bottom 5-icon toolbar */
.experiment-preview .ep-chrome--safari.ep-chrome-top {
	border-bottom: 1px solid #d5d5da;
}
.experiment-preview .ep-sf-addr {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 0 14px;
}
.experiment-preview .ep-sf-aa {
	font-size: 15px;
	color: #6b7280;
	flex: 0 0 auto;
}
.experiment-preview .ep-sf-url {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 0 12px;
	background: #e4e4e9;
	border-radius: 11px;
	font-size: 15px;
	overflow: hidden;
	white-space: nowrap;
}
.experiment-preview .ep-sf-url > span {
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Chrome iOS bottom toolbar: 5 evenly-spaced controls (back / forward / share / tabs / menu). */
.experiment-preview .ep-sf-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 0 26px;
}
.experiment-preview .ep-chrome--chrome-ios.ep-chrome-top {
	border-bottom: 1px solid #d5d5da;
}
/* The Dynamic Island's front-camera lens - a small dark dot at the right of the pill. */
.experiment-preview .ep-island::after {
	content: "";
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #14141a;
	box-shadow: inset 0 0 0 1px #2a2a34;
}
/* Modern Safari / Chrome iOS / Samsung Internet: the bottom is NOT a bar - it's THREE FLOATING
   capsules over a transparent strip (a back circle, the address pill, a menu circle), so the
   page shows through the gaps. Each capsule is its own translucent + blurred pill; the strip
   itself has no background. */
.experiment-preview .ep-chrome--safari.ep-chrome-bottom,
.experiment-preview .ep-chrome--chrome-ios.ep-chrome-bottom,
.experiment-preview .ep-chrome--samsung-internet.ep-chrome-bottom {
	background: transparent;
}
.experiment-preview .ep-cr-tools {
	display: flex;
	align-items: flex-end;
	gap: 9px;
	height: 100%;
	padding: 0 12px 16px;
}
.experiment-preview .ep-cr-btn {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(248, 248, 250, 0.66);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}
.experiment-preview .ep-cr-pill {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 15px;
	background: rgba(248, 248, 250, 0.66);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 999px;
	font-size: 14px;
	overflow: hidden;
	white-space: nowrap;
}
.experiment-preview .ep-cr-url {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}
.experiment-preview .ep-cr-rl {
	width: 18px;
	height: 18px;
	stroke: #6b7280;
}

/* Android Chrome: top status + URL + overflow menu */
.experiment-preview .ep-chrome--chrome-android.ep-chrome-top {
	border-bottom: 1px solid #d5d5da;
}
.experiment-preview .ep-an-addr {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 0 16px;
}
.experiment-preview .ep-an-url {
	flex: 1 1 auto;
	height: 36px;
	line-height: 36px;
	padding: 0 14px;
	background: #ececef;
	border-radius: 999px;
	font-size: 14px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.experiment-preview .ep-an-dots {
	width: 20px;
	height: 20px;
	fill: #5f6368;
	flex: 0 0 auto;
}

/* Android browsers (Chrome / Samsung Internet) tint their controls Material grey, not iOS blue */
.experiment-preview .ep-chrome--chrome-android .ep-cic,
.experiment-preview .ep-chrome--samsung-internet .ep-cic {
	stroke: #3c4043;
}
.experiment-preview .ep-chrome--chrome-android .ep-cic-f,
.experiment-preview .ep-chrome--samsung-internet .ep-cic-f {
	fill: #3c4043;
}

/* Dark-mode chrome - follows the app theme, so a tester running the admin in dark mode (like a
   real phone set to dark) sees dark browser furniture. Fixed iOS/Android dark-chrome colours,
   not app tokens (a browser is a browser). */
:root[data-theme="dark"] .experiment-preview .ep-chrome-top,
:root[data-theme="dark"] .experiment-preview .ep-chrome-bottom {
	background: #1c1c1e;
	color: #f2f2f7;
}
/* On a dark page the iPhone status-bar area is near-black, so the Dynamic Island reads as a
   subtle cutout rather than a stark pill. Match that: darken the iOS status bar in dark mode. */
:root[data-theme="dark"] .experiment-preview .ep-chrome--safari.ep-chrome-top {
	background: #0a0a0c;
}
/* Keep the floating-capsule strip transparent in dark mode too (the dark base rule above would
   otherwise paint it a solid bar and defeat the see-through capsules). */
:root[data-theme="dark"] .experiment-preview .ep-chrome--safari.ep-chrome-bottom,
:root[data-theme="dark"] .experiment-preview .ep-chrome--samsung-internet.ep-chrome-bottom {
	background: transparent;
}
:root[data-theme="dark"] .experiment-preview .ep-sig {
	fill: #f2f2f7;
}
:root[data-theme="dark"] .experiment-preview .ep-wifi {
	stroke: #f2f2f7;
}
:root[data-theme="dark"] .experiment-preview .ep-batt rect {
	stroke: #f2f2f7;
}
:root[data-theme="dark"] .experiment-preview .ep-batt .ep-batt-f,
:root[data-theme="dark"] .experiment-preview .ep-batt .ep-batt-nub {
	fill: #f2f2f7;
}
:root[data-theme="dark"] .experiment-preview .ep-cic {
	stroke: #0a84ff;
}
:root[data-theme="dark"] .experiment-preview .ep-cic-f {
	fill: #0a84ff;
}
:root[data-theme="dark"] .experiment-preview .ep-lock {
	stroke: #98989f;
}
:root[data-theme="dark"] .experiment-preview .ep-sf-aa {
	color: #98989f;
}
:root[data-theme="dark"] .experiment-preview .ep-sf-url,
:root[data-theme="dark"] .experiment-preview .ep-an-url {
	background: #2c2c2e;
	color: #f2f2f7;
}
:root[data-theme="dark"] .experiment-preview .ep-cr-btn,
:root[data-theme="dark"] .experiment-preview .ep-cr-pill {
	background: rgba(58, 58, 62, 0.66);
	color: #f2f2f7;
}
:root[data-theme="dark"] .experiment-preview .ep-chrome--chrome-android.ep-chrome-top,
:root[data-theme="dark"] .experiment-preview .ep-chrome--chrome-ios.ep-chrome-top {
	border-color: #38383a;
}
:root[data-theme="dark"] .experiment-preview .ep-cr-rl {
	stroke: #98989f;
}
:root[data-theme="dark"] .experiment-preview .ep-chrome--chrome-android .ep-cic,
:root[data-theme="dark"] .experiment-preview .ep-chrome--samsung-internet .ep-cic {
	stroke: #e8eaed;
}
:root[data-theme="dark"] .experiment-preview .ep-chrome--chrome-android .ep-cic-f,
:root[data-theme="dark"] .experiment-preview .ep-chrome--samsung-internet .ep-cic-f,
:root[data-theme="dark"] .experiment-preview .ep-an-dots {
	fill: #e8eaed;
}

/* loading overlay - holds a themed spinner over each pane until both are ready, so a
 * step change reveals them together and the dark-mode panes don't flash white. */
.experiment-preview .ep-frame-loading {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--experiment-preview-frame-bg);
}
.experiment-preview .ep-frame-scr.is-loading .ep-frame-loading {
	display: flex;
}
.experiment-preview .ep-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--experiment-preview-border);
	border-top-color: var(--experiment-preview-accent);
	border-radius: 50%;
	animation: ep-spin 0.8s linear infinite;
}
@keyframes ep-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.experiment-preview .ep-spinner {
		animation: none;
	}
}


/* experiment-results.css */
/**
 * experiment-results.css - the experiment results component (the click-in
 * detail report): static base-vs-challenger comparison cards in three
 * sections. Colours come from the --experiment-results-* token tree
 * (config/css/styles/leadthink-app/components/experiment-results.php); light
 * and dark resolve automatically. Bundled by StyleService.
 */

.experiment-results {
    width: 100%;
}

.experiment-results-context {
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--experiment-results-card-border);
}

.experiment-results-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--experiment-results-context-text);
    text-decoration: none; /* reads as a title; it's a link to the funnel */
}

.experiment-results-title:hover {
    text-decoration: underline;
}

.experiment-results-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--experiment-results-meta-text);
}

.experiment-results-section {
    margin: 18px 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--experiment-results-section-label);
}

.experiment-results-card {
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid var(--experiment-results-card-border);
    border-radius: 8px;
    background: var(--experiment-results-card-bg);
}

.experiment-results-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.experiment-results-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--experiment-results-name);
}

.experiment-results-card-type {
    padding: 1px 6px;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--experiment-results-type-text);
    border: 1px solid var(--experiment-results-type-border);
    border-radius: 4px;
}

.experiment-results-card-url {
    margin-left: auto;
    font-size: 11px;
    color: var(--experiment-results-url-text);
}

.experiment-results-table {
    width: 100%;
    border-collapse: collapse;
}

.experiment-results-table th {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    color: var(--experiment-results-head-text);
    border-bottom: 1px solid var(--experiment-results-head-border);
}

.experiment-results-table td {
    padding: 7px 10px;
    font-size: 12.5px;
    color: var(--experiment-results-row-text);
    border-bottom: 1px solid var(--experiment-results-card-border);
}

.experiment-results-table tbody tr:last-child td {
    border-bottom: 0;
}

.experiment-results-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--experiment-results-num);
}

th.experiment-results-num {
    color: var(--experiment-results-head-text);
}

.experiment-results-win {
    font-weight: 700;
    color: var(--experiment-results-win-text);
}

.experiment-results-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    border-radius: 50%;
    vertical-align: middle;
}

.experiment-results-dot.base {
    background: var(--experiment-results-base-dot);
}

.experiment-results-dot.var {
    background: var(--experiment-results-var-dot);
}

/* The variant id, trailing the label - mirrors the dashboard row's "#id" badge
   but quiet, so the numbers stay the focus of the table. */
.experiment-results-id {
    margin-left: 4px;
    font-size: 11px;
    color: var(--experiment-results-meta-text);
}

/* ---- results panel host (the 'results' SidebarViewer panel) ----
   The cards use light tokens, so the panel content sits on a light sheet
   inside the shared (dark) drawer. */
.er-panel {
    background: var(--experiment-results-panel-bg);
    color: var(--experiment-results-context-text);
    min-height: 100%;
    padding: 4px 16px 16px;
}

/* filter-chip.css */
/* Filter chip - styles the standalone FilterChip (filter-chip.js): the committed
 * "Field: value x" pill, its search input, and the autocomplete dropdown.
 *
 * Scoped under .filter-chip-host and driven by its own --filter-chip-* tokens
 * (config: the 'filter-chip' block in config/css/styles/leadthink-app.php, dark
 * override in themes/dark.php). Same palette as the smart filter bar's chips by
 * design - the chip is meant to read identically - but its own namespace, so the
 * two decouple; the bar adopts these tokens when it folds onto this component.
 * Auto-bundled by StyleService's folder crawl (it lives under leadthink-app/components).
 *
 * The dropdown renders IN-FLOW (not the bar's position:fixed) because the chip can
 * sit inside a scrolling panel (the experiment editor drawer), where a fixed
 * dropdown would detach from the field.
 */

.filter-chip-host {
	position: relative;
	display: block;
}

/* The control IS the input box (like the smart filter bar): a bordered field that holds the
   committed chip and/or the search input. Empty = placeholder guidance; filled = the value chip. */
.filter-chip-host .fc-control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 4px 6px;
	border: 1px solid var(--filter-chip-border);
	border-radius: 6px;
	background: var(--filter-chip-surface);
	cursor: text;
}
.filter-chip-host .fc-control:focus-within {
	border-color: var(--filter-chip-accent);
}

.filter-chip-host .fc-input {
	flex: 1 1 80px;
	min-width: 80px;
	font: inherit;
	color: var(--filter-chip-text);
	border: 0;
	padding: 4px 4px;
	background: transparent;
	outline: none;
}
.filter-chip-host .fc-input::placeholder {
	color: var(--filter-chip-border-hover);
}

/* committed chip: Field: value x - sits INSIDE the input box, sized to fit it. */
.filter-chip-host .chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 4px 4px 10px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1;
	background: var(--filter-chip-accent-bg);
	border: 1px solid var(--filter-chip-accent-pale);
	color: var(--filter-chip-text);
	white-space: nowrap;
	max-width: 100%;
}
.filter-chip-host .chip-field {
	font-weight: 550;
}
.filter-chip-host .chip-colon {
	color: var(--filter-chip-text-muted);
	margin-right: 3px;
}
.filter-chip-host .chip-value {
	font-weight: 450;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 24ch;
}

/* remove button: explicit colour + :hover:not([disabled]) so the global button
   rule can't repaint it */
.filter-chip-host .chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	padding: 0;
	margin-left: 2px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--filter-chip-text);
	cursor: pointer;
	flex-shrink: 0;
}
.filter-chip-host .chip-remove svg {
	width: 13px;
	height: 13px;
	display: block;
}
.filter-chip-host .chip-remove:hover:not([disabled]) {
	background: color-mix(in srgb, var(--filter-chip-text) 9%, transparent);
	color: var(--filter-chip-text);
}

/* autocomplete dropdown: in-flow block under the input, one pill per row */
.filter-chip-host .fc-dropdown {
	display: none;
	margin-top: 6px;
	padding: 8px 10px;
	background: var(--filter-chip-surface);
	border: 1px solid var(--filter-chip-border);
	border-radius: 10px;
	max-height: 240px;
	overflow-y: auto;
	overflow-x: auto;   /* long names scroll sideways rather than getting cut off */
}
.filter-chip-host .pill-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

/* match pill */
.filter-chip-host .s-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 9px;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	box-sizing: border-box;
	white-space: nowrap;
	background: var(--filter-chip-surface);
	border: 1px solid var(--filter-chip-border-strong);
	color: var(--filter-chip-text);
	transition: border-color 0.1s ease, background-color 0.1s ease;
}
.filter-chip-host .s-pill:hover {
	border-color: var(--filter-chip-accent);
	background: var(--filter-chip-accent-bg);
}
.filter-chip-host .s-pill.added {
	background: var(--filter-chip-accent-pale);
	border-color: var(--filter-chip-accent);
}
.filter-chip-host .s-pill.added .chip-field,
.filter-chip-host .s-pill.added .chip-value {
	color: var(--filter-chip-accent);
}
.filter-chip-host .s-pill .chip-field {
	font-weight: 550;
}
.filter-chip-host .s-pill .chip-colon {
	color: var(--filter-chip-text-muted);
	margin-right: 2px;
}
.filter-chip-host .s-pill .chip-value {
	font-weight: 450;
	/* Show the FULL name in the dropdown even when long - the committed chip caps at 24ch, but a
	   truncated, unreadable match is useless. The dropdown scrolls horizontally instead. */
	max-width: none;
	overflow: visible;
	text-overflow: clip;
}
.filter-chip-host .s-pill mark {
	background: transparent;
	color: var(--filter-chip-accent);
	font-weight: 700;
}

.filter-chip-host .dropdown-msg {
	padding: 6px;
	font-size: 13px;
	color: var(--filter-chip-text-muted);
}


/* form-card.css */
/**
 * FormCard centers a titled form panel and optional return link without styling its child form controls.
 * Component tokens provide light and dark surfaces; narrow screens reduce padding without overflow.
 */
.form-card,
.form-card *,
.form-card *::before,
.form-card *::after {
	box-sizing: border-box;
}

.form-card {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: var(--form-card-text);
	background: var(--form-card-page-bg);
}

.form-card a:not(.button):focus-visible {
	outline: 3px solid var(--form-card-focus-outline);
	outline-offset: 4px;
}

.form-card .form-card-inner {
	width: 100%;
	max-width: 1280px;
	min-width: 0;
	flex: 1;
	display: grid;
	place-items: center;
	gap: 22px;
	margin-inline: auto;
	padding: 40px 24px 64px;
}

.form-card .form-card-back {
	width: min(100%, 480px);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.form-card .form-card-back,
.form-card .form-card-back:visited,
.form-card .form-card-back:focus {
	color: var(--form-card-text-muted);
}

.form-card .form-card-panel {
	width: min(100%, 480px);
	min-width: 0;
	padding: 32px;
	border: 1px solid var(--form-card-border);
	border-radius: 20px;
	background: var(--form-card-surface);
	box-shadow: 0 24px 70px var(--form-card-shadow);
}

.form-card .form-card-heading {
	margin-bottom: 28px;
}

.form-card .form-card-eyebrow {
	margin: 0 0 10px;
	color: var(--form-card-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.form-card .form-card-heading h1,
.form-card .form-card-heading h2 {
	margin: 0;
	font-family: var(--font-headings);
	font-size: clamp(32px, 9vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.045em;
}

.form-card .form-card-description {
	margin: 14px 0 0;
	color: var(--form-card-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 520px) {
	.form-card .form-card-inner {
		place-items: start center;
		padding: 28px 16px 48px;
	}
	.form-card .form-card-panel {
		padding: 24px 20px;
		border-radius: 16px;
	}
}


/* framework-config.css */
/**
 * Styles the theme row, compact topbar variant, and shared palette popup.
 * Both variants use shared Buttons for sizing, paint, corners, and keyboard focus.
 * This component owns row layout, collapsed-sidebar visibility, and the palette
 * popup. Theme state and popup visibility are managed by framework-config.js.
 */

.framework-config {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    padding: 8px 16px;
    color: var(--sidebar-nav-text);
    font-size: 14px;
}

.framework-config-label {
    font-weight: 500;
    color: var(--sidebar-nav-text-strong);
}

.framework-config-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.framework-config-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.6;
    color: var(--sidebar-nav-text);
}

.framework-config-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
}

.framework-config-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Popup: a square panel that blooms up from the row, holding the accent and
   surface swatch grids. Flat - border + solid fill, no shadow. */
.framework-config-popup {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% + 8px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--sidebar-nav-border);
    border-radius: 10px;
    background: var(--sidebar-nav-bg);
    transform: scale(0.96);
    transform-origin: bottom right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 160ms ease, opacity 160ms ease, visibility 0s linear 160ms;
}

.framework-config-popup.is-open {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 160ms ease, opacity 160ms ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .framework-config-popup {
        transition: none;
    }
}

.framework-config-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.framework-config-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sidebar-nav-text-muted);
}

.framework-config-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.framework-config-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--sidebar-nav-border);
    border-radius: 5px;
    background: var(--swatch-color);
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 1px;
    transition: transform 120ms ease, outline-color 120ms ease;
}

.framework-config-grid .framework-config-swatch:hover,
.framework-config-grid .framework-config-swatch:active {
    background: var(--swatch-color);
    border-color: var(--sidebar-nav-border);
    color: inherit;
    transform: translateY(-1px);
}

.framework-config-swatch.is-active {
    /* an OUTER ring (a gap then a strong ring) so the marker sits beyond the
       color, not inside it; the grid carries padding so it has room and isn't
       clipped at the container edge. Outline stays free for the focus ring. */
    box-shadow: 0 0 0 2px var(--sidebar-nav-bg), 0 0 0 4px var(--sidebar-nav-text-strong);
}

/* Collapsed rail: drop to just the theme icon, centered, matching the nav items. */
body.sidebar-collapsed .framework-config:not(.framework-config-topbar) {
    justify-content: center;
    padding: 12px 0;
}

body.sidebar-collapsed .framework-config:not(.framework-config-topbar) .framework-config-label,
body.sidebar-collapsed .framework-config:not(.framework-config-topbar) .framework-config-controls,
body.sidebar-collapsed .framework-config:not(.framework-config-topbar) .framework-config-popup {
    display: none;
}

body.sidebar-collapsed .framework-config:not(.framework-config-topbar) .framework-config-icon {
    margin: 0 auto;
}

.framework-config.framework-config-topbar {
    padding: 0;
}

.framework-config.framework-config-topbar .framework-config-heading {
    display: none;
}



/* group-by-bar.css */
/**
 * Group-by-bar styles: the "Group By" / "Breakdown By" chip dropdown buttons
 * and the option panels they open. group-by-bar.js moves the buttons into the
 * smart filter bar's extras slot at init, so this file styles only the buttons
 * and panels (the slot owns their inline layout); the panel is appended to
 * document.body and positioned by the JS, so it carries its own surface here.
 *
 * Self-contained - every rule is scoped under a .gb-* class, sets its own hover
 * colour so the global <button> hover can't leak in, and takes its colours from
 * the --group-by-bar-* tokens (config -> StyleService). The chip icons are
 * inline SVGs (injected via MediaService), recoloured by currentColor. Markup:
 * /inc/framework/views/components/group-by-bar.php.
 */

/* ====================
   DROPDOWN BUTTON (chip)
   ==================== */

.gb-dropdown {
    position: relative;
    display: inline-block;
}

.gb-dropdown-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--group-by-bar-bg);
    border: 1px solid var(--group-by-bar-border);
    border-radius: 6px;
    /* Match the filter input wrapper's min-height (smart-filter-bar.css) so the
       buttons line up with the filter pill when sitting inline in the bar. */
    padding: 8px 12px;
    min-height: 50px;
    font-size: 13px;
    font-family: inherit;
    color: var(--group-by-bar-text);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
    white-space: nowrap;
    line-height: 1.2;
}

/* The base button.css colours every button on hover/press via
   button:hover/:active:not([disabled]) - specificity (0,2,1), so it beats a
   bare .gb-dropdown-button:hover (0,2,0) and the chip would go primary (dark
   fill, white text). Match the :not([disabled]) so the chip lands at (0,3,0),
   out-specifies it, and keeps its own neutral colours on hover + press. */
.gb-dropdown-button:hover:not([disabled]),
.gb-dropdown-button:active:not([disabled]) {
    background: var(--group-by-bar-bg-hover);
    border-color: var(--group-by-bar-border-hover);
    color: var(--group-by-bar-text);
}

.gb-dropdown-button:focus {
    outline: none;
    border-color: var(--group-by-bar-border-hover);
}

/* Leading icon - inline SVG, recoloured by currentColor */
.gb-dropdown-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--group-by-bar-text-muted);
}

.gb-dropdown-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* The "Group By:" / "Breakdown By:" prefix label */
.gb-dropdown-label {
    color: var(--group-by-bar-text-muted);
    font-weight: 500;
}

/* The currently-selected dimension name */
.gb-dropdown-value {
    color: var(--group-by-bar-text);
    font-weight: 600;
}

/* Chevron at the end of the button (text glyph) */
.gb-dropdown-chevron {
    margin-left: 4px;
    font-size: 10px;
    color: var(--group-by-bar-text-muted);
    line-height: 1;
}

/* ====================
   DROPDOWN PANEL (cloned from template, appended to document.body)
   ==================== */

.gb-dropdown-panel {
    position: absolute;
    background: var(--group-by-bar-bg);
    border: 1px solid var(--group-by-bar-border);
    border-radius: 8px;
    padding: 4px 0;
    z-index: 1000;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
}

.gb-dropdown-options {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ====================
   OPTIONS
   ==================== */

.gb-dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--group-by-bar-text);
    transition: background-color 0.1s;
    user-select: none;
}

.gb-dropdown-option:hover:not(.disabled) {
    background: var(--group-by-bar-option-hover-bg);
}

.gb-dropdown-option.selected {
    background: var(--group-by-bar-option-selected-bg);
}

.gb-dropdown-option.selected:hover {
    background: var(--group-by-bar-option-selected-hover-bg);
}

.gb-dropdown-option.disabled {
    color: var(--group-by-bar-text-disabled);
    cursor: not-allowed;
}

/* Checkmark - only visible on the selected option (text glyph) */
.gb-dropdown-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--group-by-bar-check);
    font-weight: bold;
    font-size: 12px;
    visibility: hidden;
    flex-shrink: 0;
}

.gb-dropdown-option.selected .gb-dropdown-option-check {
    visibility: visible;
}

.gb-dropdown-option-label {
    flex: 1;
}

/* hero.css */
/* Hero owns the primary page introduction, decorative background, and responsive copy measure. */
.hero {
	color: var(--hero-text);
	background: var(--hero-surface);
}

.hero,
.hero::before,
.hero::after,
.hero *,
.hero *::before,
.hero *::after {
	box-sizing: border-box;
}

.hero a:not(.button):focus-visible {
	outline: 3px solid var(--hero-focus-outline);
	outline-offset: 4px;
}

.hero .hero-shell {
	width: min(100%, 1280px);
	display: grid;
	gap: 32px;
	margin-inline: auto;
	padding: 48px 24px 0;
}

.hero .hero-copy {
	z-index: 3;
}

.hero .hero-eyebrow {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hero h1 {
	margin: 0;
	font-family: var(--font-headings);
	font-size: clamp(40px, 11vw, 68px);
	font-weight: 900;
	letter-spacing: -0.055em;
	line-height: 1.02;
}

.hero h1 span {
	display: block;
}

.hero .hero-accent {
	color: var(--hero-accent);
}

.hero .hero-description {
	max-width: 54ch;
	margin: 22px 0 0;
	color: var(--hero-text-muted);
	font-size: clamp(18px, 2.3vw, 21px);
	line-height: 1.65;
}

.hero .hero-action {
	margin-top: 28px;
	text-shadow: none;
}

.hero .hero-art {
	position: relative;
	min-width: 0;
	justify-self: stretch;
	aspect-ratio: 3 / 2;
	margin-inline: -24px;
	overflow: hidden;
	background: var(--hero-background-mobile) 100% center / cover no-repeat;
	mask-image: linear-gradient(transparent 0%, #000 24%);
}

@media (min-width: 640px) {
	.hero .hero-shell {
		padding-inline: 40px;
	}

	.hero .hero-art {
		aspect-ratio: 2 / 1;
		margin-inline: -40px;
	}
}

@media (min-width: 1000px) {
	.hero {
		position: relative;
		min-height: 672px;
		isolation: isolate;
	}

	.hero .hero-shell {
		min-height: 672px;
		grid-template-columns: minmax(0, 1fr);
		align-items: center;
		padding-block: 96px;
	}

	.hero .hero-copy {
		position: relative;
		width: min(60%, 720px);
		text-shadow: 0 1px 3px var(--hero-surface), 0 0 18px var(--hero-surface);
	}

	.hero .hero-action {
		text-shadow: none;
	}

	.hero h1 {
		font-size: clamp(62px, 5.5vw, 82px);
	}

	.hero .hero-art {
		position: absolute;
		inset: 0;
		z-index: 0;
		height: auto;
		aspect-ratio: auto;
		margin: 0;
		background-image: var(--hero-background-desktop);
		background-position: right center;
		mask-image: none;
	}

	.hero .hero-art::after {
		position: absolute;
		inset: 0;
		z-index: 1;
		content: "";
		background: linear-gradient(90deg, color-mix(in srgb, var(--hero-surface) 92%, transparent) 0%, color-mix(in srgb, var(--hero-surface) 82%, transparent) 36%, color-mix(in srgb, var(--hero-surface) 62%, transparent) 54%, color-mix(in srgb, var(--hero-surface) 18%, transparent) 68%, transparent 78%);
		pointer-events: none;
	}
}

.hero[data-hero-motion="linked-hearts"] .lh-layer {
	position: absolute;
	inset: 0;
	z-index: 2;
	contain: layout paint;
	pointer-events: none;
}

.hero[data-hero-motion="linked-hearts"] .lh-layer[hidden] {
	display: none;
}

.hero[data-hero-motion="linked-hearts"] .lh-layer svg {
	position: absolute;
	inset: 0;
	overflow: visible;
}

.hero[data-hero-motion="linked-hearts"] .lh-layer path {
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hero[data-hero-motion="linked-hearts"] .lh-shade,
.hero[data-hero-motion="linked-hearts"] .lh-halo,
.hero[data-hero-motion="linked-hearts"] .lh-line,
.hero[data-hero-motion="linked-hearts"] .lh-swell,
.hero[data-hero-motion="linked-hearts"] .lh-pencil-a,
.hero[data-hero-motion="linked-hearts"] .lh-pencil-b,
.hero[data-hero-motion="linked-hearts"] .lh-mask-cut {
	fill: none;
}

.hero[data-hero-motion="linked-hearts"] .lh-shade {
	stroke-width: calc(6.6px * var(--lh-weight, 1));
	stroke-opacity: 0.9;
}

.hero[data-hero-motion="linked-hearts"] .lh-halo {
	stroke: var(--hero-motion-paper);
	stroke-width: calc(13px * var(--lh-weight, 1));
	stroke-opacity: 0.18;
}

.hero[data-hero-motion="linked-hearts"] .lh-line {
	stroke-width: calc(1.35px * var(--lh-weight, 1));
}

.hero[data-hero-motion="linked-hearts"] .lh-swell {
	stroke: var(--hero-motion-ink);
	stroke-width: calc(3.5px * var(--lh-weight, 1));
}

.hero[data-hero-motion="linked-hearts"] .lh-echo {
	fill: var(--hero-motion-sea-deep);
}

.hero[data-hero-motion="linked-hearts"] .lh-wash {
	fill: var(--hero-motion-paper);
	fill-opacity: 0.82;
}

.hero[data-hero-motion="linked-hearts"] .lh-tints {
	mix-blend-mode: multiply;
}

.hero[data-hero-motion="linked-hearts"] .lh-layer mask {
	mask-type: luminance;
}

/* Black and white below define SVG luminance-mask coverage, not visible theme paint. */
.hero[data-hero-motion="linked-hearts"] .lh-mask-on {
	fill: #fff;
}

.hero[data-hero-motion="linked-hearts"] .lh-mask-off {
	fill: #000;
}

.hero[data-hero-motion="linked-hearts"] .lh-mask-dilate {
	fill: #fff;
	stroke: #fff;
	stroke-width: 6;
}

.hero[data-hero-motion="linked-hearts"] .lh-mask-cut {
	stroke: #000;
	stroke-width: 10;
}

.hero[data-hero-motion="linked-hearts"] .lh-shade-stop {
	stop-color: var(--hero-motion-paper);
}

.hero[data-hero-motion="linked-hearts"] .lh-ink-stop {
	stop-color: var(--hero-motion-ink);
}

.hero[data-hero-motion="linked-hearts"] .lh-fade-stop {
	stop-opacity: 0;
}

.hero[data-hero-motion="linked-hearts"] .lh-rose-stop {
	stop-color: var(--hero-motion-rose);
}

.hero[data-hero-motion="linked-hearts"] .lh-rose-deep-stop {
	stop-color: var(--hero-motion-rose-deep);
}

.hero[data-hero-motion="linked-hearts"] .lh-gold-stop {
	stop-color: var(--hero-motion-gold);
}

.hero[data-hero-motion="linked-hearts"] .lh-gold-deep-stop {
	stop-color: var(--hero-motion-gold-deep);
}

.hero[data-hero-motion="linked-hearts"] .lh-light-stop {
	stop-opacity: 0.12;
}

.hero[data-hero-motion="linked-hearts"] .lh-pencil-a {
	stroke: var(--hero-motion-rose-deep);
}

.hero[data-hero-motion="linked-hearts"] .lh-pencil-b {
	stroke: var(--hero-motion-gold-deep);
}

.hero[data-hero-motion="linked-hearts"] .lh-pencil-a,
.hero[data-hero-motion="linked-hearts"] .lh-pencil-b {
	stroke-width: 0.9;
	stroke-opacity: 0.32;
}

.hero[data-hero-motion="linked-hearts"] .lh-spread-on {
	stop-color: #fff;
}

.hero[data-hero-motion="linked-hearts"] .lh-spread-off {
	stop-color: #fff;
	stop-opacity: 0;
}

.hero[data-hero-motion="linked-hearts"] .lh-floor {
	fill: #fff;
	opacity: 0.42;
}

.hero[data-hero-motion="linked-hearts"] .lh-tip {
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	opacity: 0;
	background: var(--hero-motion-ink);
	offset-anchor: 50% 50%;
	offset-rotate: 0deg;
}

[data-theme="dark"] .hero[data-hero-motion="linked-hearts"] .lh-halo {
	stroke-opacity: 0.12;
}

@media (max-width: 999.98px) {
	.hero[data-hero-motion="linked-hearts"] .lh-shade {
		stroke-width: 5.6px;
	}

	.hero[data-hero-motion="linked-hearts"] .lh-halo {
		stroke-width: 10px;
	}

	.hero[data-hero-motion="linked-hearts"] .lh-line {
		stroke-width: 1.15px;
	}

	.hero[data-hero-motion="linked-hearts"] .lh-swell {
		stroke-width: 2.6px;
	}

	.hero[data-hero-motion="linked-hearts"] .lh-mask-cut {
		stroke-width: 8px;
	}
}


/* input.css */
/**
 * Shared native text input. The wrapper owns label spacing, while the control
 * owns its 36px app form metric and native required, readonly, and disabled
 * behavior. Colors come from the --input-* theme tokens.
 */

.input {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    color: var(--input-text);
    font-size: 13px;
}

.input-label {
    font-weight: 600;
}

.input-control {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    outline: none;
    background: var(--input-bg);
    color: var(--input-text);
    font: inherit;
    font-weight: 400;
}

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

.input-control:hover:not(:disabled) {
    border-color: var(--input-border-hover);
}

.input-control:focus-visible {
    border-color: var(--input-accent);
    outline: 2px solid var(--input-accent);
    outline-offset: 2px;
}

.input-control:read-only:not(:disabled) {
    cursor: default;
}

.input-control:disabled {
    background: var(--input-disabled-bg);
    color: var(--input-disabled-text);
    cursor: not-allowed;
}


/* ip-permissions-editor.css */
/**
 * Layout and theme-token styling for the IP permissions header control and
 * sidebar editor. Shared form controls retain their native disabled treatment.
 */

.ip-permissions-editor {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--ip-permissions-editor-text);
}

.ip-permissions-editor-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
}

.ip-permissions-editor-field .select,
.ip-permissions-editor-field .select-input {
    width: 100%;
}

.ip-permissions-editor-field .select-input,
.ip-permissions-editor .input-control {
    height: 36px;
    min-height: 36px;
    font-size: 13px;
}

.ip-permissions-editor-field .select-input {
    padding-top: 0;
    padding-bottom: 0;
    font-weight: 400;
}

.ip-permissions-editor-field .select-input:focus-visible {
    outline: 2px solid var(--ip-permissions-editor-accent);
    outline-offset: 2px;
}

.ip-permissions-editor-field .select-input:disabled {
    color: var(--ip-permissions-editor-text-muted);
    cursor: not-allowed;
}

.ip-permissions-editor-error,
.ip-permissions-editor-confirmation {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--ip-permissions-editor-border);
    border-radius: 6px;
}

.ip-permissions-editor-error {
    background: var(--ip-permissions-editor-error-bg);
    color: var(--ip-permissions-editor-error-text);
}

.ip-permissions-editor-confirmation {
    background: var(--ip-permissions-editor-warning-bg);
    color: var(--ip-permissions-editor-warning-text);
}

.ip-permissions-editor-actions {
    display: flex;
    gap: 10px;
    padding-top: 4px;
}

.ip-permissions-editor-remove {
    background: var(--ip-permissions-editor-remove-bg);
    color: var(--ip-permissions-editor-remove-text);
}

.ip-permissions-editor-remove:hover {
    background: var(--ip-permissions-editor-remove-bg-hover);
}

.ip-permissions-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: var(--ip-permissions-editor-text-muted);
    cursor: pointer;
}

.ip-permissions-action:hover,
.ip-permissions-action:focus-visible {
    background: var(--ip-permissions-editor-hover-bg);
    color: var(--ip-permissions-editor-accent);
}

.ip-permissions-action svg {
    width: 17px;
    height: 17px;
}

#ip-permissions-add-control {
    display: inline-flex;
    align-items: center;
}


/* log-viewer.css */
/**
 * Log Viewer component styles. The tabbed server-log display: tab nav, per-tab
 * content, server-info header, error entries (expandable + copyable, IDE-themed
 * content), per-tab pagination, and empty/error states.
 *
 * Merged from the old pages/server-log.css (tab layout) + components/
 * log-display-block.css (error entries / badges / content), normalized to the
 * palette variables the other components use. Bundled by StyleService; the view
 * links nothing. Behavior is in /inc/framework/js/modules/log-display.js.
 *
 * The old collapsible .log-server-block layout was dropped - the viewer is
 * fully tabbed now.
 */

/* ====================
   TAB NAVIGATION
   ==================== */

.log-tabs-nav {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    background: var(--neutral-100);
    border-bottom: 2px solid var(--neutral-200);
    overflow-x: auto;
    scrollbar-width: thin;
}

.log-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    color: var(--neutral-600);
    font-size: 14px;
    font-weight: 500;
}

.log-tab:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--neutral-900);
}

.log-tab.active {
    background: var(--neutral-50);
    color: var(--primary-600);
    border-bottom-color: var(--primary-600);
}

.log-tab .tab-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.log-tab.active .tab-icon {
    opacity: 1;
}

.log-tab .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--neutral-200);
    color: var(--neutral-600);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.log-tab.active .tab-badge {
    background: var(--primary-100);
    color: var(--primary-600);
}

.log-tab[data-log-type="framework"] .tab-name {
    color: var(--primary-600);
}

.log-tab[data-log-type="framework"].active {
    border-bottom-color: var(--primary-600);
}

/* ====================
   TAB CONTENT
   ==================== */

.log-tabs-content {
    position: relative;
    background: var(--neutral-50);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.log-tab-content {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.log-tab-content.active {
    display: flex;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================
   TAB CONTENT HEADER
   ==================== */

.tab-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
}

.tab-content-header .server-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tab-content-header .server-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-900);
}

.tab-content-header .server-ip {
    font-size: 13px;
    color: var(--neutral-600);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.tab-content-header .entry-count {
    font-size: 14px;
    color: var(--neutral-600);
}

/* ====================
   LOG ENTRIES CONTAINER
   ==================== */

.log-entries-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--neutral-50);
}

.log-entries-container::-webkit-scrollbar {
    width: 8px;
}

.log-entries-container::-webkit-scrollbar-track {
    background: var(--neutral-100);
}

.log-entries-container::-webkit-scrollbar-thumb {
    background: var(--neutral-400);
    border-radius: 4px;
}

.log-entries-container::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-500);
}

/* ====================
   ERROR ENTRY
   ==================== */

.error-entry {
    border-bottom: 1px solid var(--neutral-200);
}

.error-entry:last-child {
    border-bottom: none;
}

.error-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--neutral-100);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.error-header:hover {
    background: var(--neutral-200);
}

.error-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.error-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.expand-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.expand-error:hover {
    background: var(--neutral-300);
}

.expand-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s;
}

.error-entry.collapsed .expand-icon {
    transform: rotate(-90deg);
}

.error-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--neutral-600);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.meta-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/* ====================
   ERROR LEVEL BADGES
   ==================== */

.error-level-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.error-level-notice {
    background: var(--primary-100);
    color: var(--primary-900);
}

.error-level-warning,
.error-level-warn {
    background: var(--warning-100);
    color: var(--warning-900);
}

.error-level-error,
.error-level-fatal,
.error-level-php-fatal-error {
    background: var(--failure-100);
    color: var(--failure-900);
}

.error-level-trace {
    background: var(--neutral-200);
    color: var(--neutral-700);
}

.error-level-debug {
    background: var(--primary-100);
    color: var(--primary-900);
}

.error-level-info {
    background: var(--success-100);
    color: var(--success-900);
}

/* ====================
   COPY BUTTON
   ==================== */

.copy-error {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--neutral-300);
    border-radius: 6px;
    color: var(--neutral-700);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-error:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-400);
}

.copy-error:active {
    transform: scale(0.98);
}

.copy-error.copied {
    background: var(--success-100);
    border-color: var(--success-600);
    color: var(--success-900);
}

.copy-icon {
    width: 16px;
    height: 16px;
}

/* ====================
   ERROR CONTENT (IDE THEME) - COLLAPSIBLE
   ==================== */

.error-content {
    background: #1e1e1e;
    padding: 16px 20px;
    max-height: 400px;
    overflow-y: auto;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.error-entry.collapsed .error-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
}

.error-content pre {
    margin: 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #d4d4d4;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.error-content code {
    font-family: inherit;
    color: inherit;
}

/* Syntax highlighting - IDE theme colors (literal: a dark code surface,
   independent of the app palette). */
.log-timestamp { color: #4ec9b0; font-weight: 600; }

.log-level {
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

.log-level-notice { color: #4fc1ff; background: rgba(79, 193, 255, 0.15); }
.log-level-warning { color: #ffd700; background: rgba(255, 215, 0, 0.15); }
.log-level-fatal,
.log-level-error { color: #f48771; background: rgba(244, 135, 113, 0.15); }

.log-filepath {
    color: #ce9178;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.log-linenum { color: #b5cea8; font-weight: 600; }
.log-stack { color: #9cdcfe; font-weight: 700; }
.log-function { color: #dcdcaa; font-weight: 600; }

/* Framework log content (inside the IDE-themed surface) */
.log-component { color: #dcdcaa; font-weight: 600; }
.log-message { color: #d4d4d4; }

.log-context {
    color: #ce9178;
    display: block;
    margin-top: 8px;
    padding-left: 16px;
    border-left: 2px solid #4ec9b0;
    white-space: pre-wrap;
}

.log-user {
    color: #9cdcfe;
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

/* ====================
   TAB PAGINATION
   ==================== */

.tab-pagination {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--neutral-50);
    border-top: 1px solid var(--neutral-200);
    gap: 16px;
    position: sticky;
    bottom: 0;
    z-index: 10;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.tab-pagination .pagination-summary {
    font-size: 14px;
    color: var(--neutral-600);
    white-space: nowrap;
}

.tab-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-pagination .pagination-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-300);
    border-radius: 6px;
    color: var(--neutral-900);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-pagination .pagination-button:hover:not(:disabled) {
    background: var(--neutral-100);
    border-color: var(--primary-600);
}

.tab-pagination .pagination-button.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: var(--neutral-50);
}

.tab-pagination .pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tab-pagination .pagination-icon {
    width: 16px;
    height: 16px;
}

.tab-pagination .pagination-button.active .pagination-icon {
    filter: brightness(0) invert(1);
}

.tab-pagination .pagination-ellipsis {
    padding: 0 4px;
    color: var(--neutral-600);
}

/* ====================
   EMPTY / ERROR STATES
   ==================== */

.logs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.logs-empty .empty-icon {
    width: 64px;
    height: 64px;
    opacity: 0.3;
    margin-bottom: 16px;
}

.logs-empty p {
    margin: 0;
    font-size: 16px;
    color: var(--neutral-600);
}

.log-empty {
    padding: 40px 20px;
    text-align: center;
}

.log-empty p {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-500);
}

.log-error-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    margin: 20px;
    background: var(--warning-100);
    color: var(--warning-900);
    border: 1px solid var(--warning-200);
    border-radius: 8px;
}

.log-error-message .error-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.log-error-message p {
    margin: 0;
    font-size: 14px;
}

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

@media (max-width: 768px) {
    .log-tabs-nav {
        padding: 0 16px;
    }

    .log-tab {
        padding: 10px 12px;
        font-size: 13px;
    }

    .tab-content-header {
        padding: 12px 16px;
    }

    .tab-content-header .server-name {
        font-size: 14px;
    }

    .error-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
    }

    .error-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .copy-error {
        align-self: flex-end;
    }

    .error-content {
        padding: 12px 16px;
    }

    .error-content pre {
        font-size: 12px;
    }

    .tab-pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px;
    }

    .tab-pagination .pagination-summary {
        text-align: center;
    }

    .tab-pagination .pagination-controls {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* login-form.css */
/* LoginForm owns only the authentication form controls and their display states. */
.login-form {
	width: 100%;
	min-width: 0;
	display: grid;
	gap: 24px;
	color: var(--login-form-text);
}

.login-form,
.login-form::before,
.login-form::after,
.login-form *,
.login-form *::before,
.login-form *::after {
	box-sizing: border-box;
}

.login-form .login-form-fields {
	display: grid;
	gap: 18px;
}

.login-form .input,
.login-form .input-control {
	width: 100%;
}

.login-form .login-form-errors {
	padding: 14px 16px;
	border-left: 4px solid var(--login-form-error-border);
	color: var(--login-form-error-text);
	background: var(--login-form-error-bg);
	font-size: 14px;
	line-height: 1.5;
}

.login-form .login-form-errors ul {
	margin: 0;
	padding-left: 20px;
}

.login-form .login-form-delivery {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
}

.login-form .login-form-delivery legend {
	margin-bottom: 12px;
	font-size: 17px;
	font-weight: 700;
}

.login-form .login-form-delivery label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--login-form-border);
	border-radius: 10px;
	cursor: pointer;
}

.login-form .login-form-delivery input {
	margin-top: 3px;
}

.login-form .login-form-delivery small {
	display: block;
	margin-top: 4px;
	color: var(--login-form-text-muted);
}

.login-form :focus-visible {
	outline: 3px solid var(--login-form-focus-outline);
	outline-offset: 3px;
}


/* logo-cloud.css */
/**
 * LogoCloud balances repeated marks in continuous rows and a reduced-motion grid.
 * Shared sizing and surface tokens come from config; per-mark ratios are set after SVG loading.
 */
.logo-cloud {
	color: var(--logo-cloud-text);
	background: var(--logo-cloud-surface);
}

.logo-cloud,
.logo-cloud::before,
.logo-cloud::after,
.logo-cloud *,
.logo-cloud *::before,
.logo-cloud *::after {
	box-sizing: border-box;
}

.logo-cloud .logo-cloud-row {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.logo-cloud .logo-cloud-row + .logo-cloud-row {
	margin-top: 22px;
}

.logo-cloud .logo-cloud-track {
	display: flex;
	width: max-content;
	animation: logo-cloud-scroll 42s linear infinite;
}

.logo-cloud .logo-cloud-row:nth-child(2) .logo-cloud-track {
	animation-direction: reverse;
	animation-duration: 48s;
}

.logo-cloud .logo-cloud-group {
	min-width: 100vw;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: var(--logo-cloud-gap);
	list-style: none;
	margin: 0;
	padding: 0 var(--logo-cloud-gap) 0 0;
}

.logo-cloud .logo-cloud-group > li {
	width: 170px;
	min-height: 72px;
	flex: none;
	display: grid;
	place-items: center;
}

.logo-cloud .logo-cloud-mark {
	width: min(170px, calc(var(--logo-cloud-base) * var(--logo-cloud-ratio-root, 2)));
	display: block;
	aspect-ratio: var(--logo-cloud-ratio, 4);
}

.logo-cloud .logo-cloud-mark svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

@keyframes logo-cloud-scroll {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.logo-cloud .logo-cloud-track {
		width: 100%;
		animation: none;
	}

	.logo-cloud .logo-cloud-row {
		mask-image: none;
	}

	.logo-cloud .logo-cloud-group {
		width: 100%;
		min-width: 0;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		padding: 0;
	}

	.logo-cloud .logo-cloud-group > li {
		width: 100%;
	}

	.logo-cloud .logo-cloud-group[data-logo-clone] {
		display: none;
	}
}


/* page-header-bar.css */
/**
 * Page Header Bar Component Styles
 * White card with title and controls
 * Path: /inc/framework/css/styles/leadthink-app/components/page-header-bar.css
 */

/* ====================
   CONTAINER - WHITE CARD
   ==================== */

.page-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    gap: 16px;
}

/* ====================
   PAGE TITLE
   ==================== */

.page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #050505;
}

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

.header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ====================
   LAST UPDATED INFO
   ==================== */

.last-updated-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    color: #65676b;
}

.last-updated-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.last-updated-time {
    font-size: 13px;
    font-weight: 500;
    color: #050505;
}

/* ====================
   REFRESH BUTTON
   ==================== */

.refresh-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #ccd0d5;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.refresh-button:hover {
    background: #f2f3f5;
    border-color: #1877f2;
}

.refresh-button:active {
    transform: scale(0.95);
}

.refresh-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.refresh-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.refresh-button:hover .refresh-icon {
    filter: invert(36%) sepia(93%) saturate(2543%) hue-rotate(201deg) brightness(97%) contrast(98%);
}

.refresh-icon.spinning {
    animation: spin 1s linear infinite;
}

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

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

@media (max-width: 768px) {
    .page-header-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

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

    .header-controls {
        width: 100%;
        justify-content: space-between;
    }

    .refresh-button {
        width: 32px;
        height: 32px;
    }

    .refresh-icon {
        width: 16px;
        height: 16px;
    }
}

/* pagination.css */
/**
 * Pagination component styles - the page-number buttons, prev/next, ellipsis,
 * the per-page <select>, and the "Showing X-Y of Z" summary. Flat: thin
 * neutral borders, a primary-500 fill only on the active page, no shadows.
 *
 * Self-contained - every rule is scoped under a .pagination-* class so the
 * component looks the same in any host, and it sets its own hover text colour
 * so the global <button> hover (white text on the primary fill) can't leak in.
 * Colours come from the --pagination-* tokens (config -> StyleService). The
 * prev/next chevrons are inline SVGs (injected via MediaService), recoloured by
 * currentColor. Each class keeps its own responsive overrides beside it. Markup:
 * /inc/framework/views/components/pagination.php, cloned by
 * /inc/framework/js/modules/pagination.js; wired by Pagination::css().
 */

/* Hidden <template> holder - the JS clones these; nothing here renders. */
.pagination-templates {
    display: none;
}

/* ====================
   WRAPPER
   ==================== */

.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px;
    background: var(--pagination-bg);
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 768px) { /* tablet and down */
    .pagination-wrapper {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        padding: 12px 16px;
    }
}

/* Sticky variant (e.g. server-logs tabs) - flat top divider, no shadow */
.pagination-wrapper.sticky {
    position: sticky;
    bottom: 0;
    z-index: 10;
    border-top: 1px solid var(--pagination-border);
}

/* Alternative layout - summary on the right */
.pagination-wrapper.summary-right {
    flex-direction: row-reverse;
}

/* ====================
   SUMMARY
   ==================== */

.pagination-summary {
    font-size: 14px;
    color: var(--pagination-text-muted);
    white-space: nowrap;
}

@media (max-width: 768px) { /* tablet and down */
    .pagination-summary {
        font-size: 13px;
    }
}

.pagination-summary .summary-start,
.pagination-summary .summary-end,
.pagination-summary .summary-total {
    font-weight: 600;
    color: var(--pagination-text);
}

/* ====================
   PER-PAGE SELECTOR
   ==================== */

.per-page-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--pagination-text);
    white-space: nowrap;
    margin-right: 8px;
}

.per-page-selector label,
.per-page-label {
    color: var(--pagination-text);
    font-weight: 500;
    font-size: 14px;
}

/* Custom dropdown arrow - the native one is removed (appearance: none) and an
   inline SVG is overlaid in the wrapper, so the chevron comes from the media
   config and takes its colour from currentColor, like every other icon. */
.per-page-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.per-page-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--pagination-border);
    border-radius: 6px;
    background: var(--pagination-bg);
    font-size: 14px;
    font-weight: 500;
    color: var(--pagination-text);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-width: 75px;
    transition: all 0.2s ease;
    height: 36px;
}

.per-page-select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: inline-flex;
    color: var(--pagination-text);
}

.per-page-select-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.per-page-select:hover {
    background-color: var(--pagination-bg-hover);
    border-color: var(--pagination-border-hover);
}

.per-page-select:focus {
    outline: none;
    border-color: var(--pagination-border-focus);
}

@media (max-width: 768px) { /* tablet and down */
    .per-page-select {
        height: 32px;
        padding: 6px 28px 6px 10px;
        font-size: 13px;
    }
}

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

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) { /* tablet and down */
    .pagination-controls {
        width: 100%;
        justify-content: center;
    }
}

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

.pagination-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--pagination-bg);
    border: 1px solid var(--pagination-border);
    border-radius: 6px;
    color: var(--pagination-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 36px;
}

/* Re-assert colour so the global button:hover (white text) can't win here. */
.pagination-button:hover:not(:disabled) {
    background: var(--pagination-bg-hover);
    border-color: var(--pagination-border-hover);
    color: var(--pagination-text);
}

.pagination-button.active {
    background: var(--pagination-active-bg);
    border-color: var(--pagination-active-bg);
    color: var(--pagination-active-text);
}

.pagination-button:disabled {
    background: var(--pagination-bg-disabled);
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) { /* tablet and down */
    .pagination-button {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 32px;
    }
}

@media (max-width: 640px) { /* phone */
    .pagination-button {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* ====================
   ICON (inline SVG, recoloured by currentColor - no filter)
   ==================== */

.pagination-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.pagination-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

@media (max-width: 768px) { /* tablet and down */
    .pagination-icon svg {
        width: 14px;
        height: 14px;
    }
}

/* ====================
   ELLIPSIS
   ==================== */

.pagination-ellipsis {
    padding: 0 4px;
    color: var(--pagination-text-muted);
    font-size: 14px;
}

/* ====================
   PREV / NEXT
   ==================== */

.pagination-prev,
.pagination-next {
    font-weight: 600;
}

.pagination-prev .pagination-icon {
    margin-right: -2px;
}

.pagination-next .pagination-icon {
    margin-left: -2px;
}

@media (max-width: 640px) { /* phone - icon only, drop the label */
    .pagination-prev,
    .pagination-next {
        min-width: 32px;
        padding: 6px;
    }

    .pagination-prev .button-content,
    .pagination-next .button-content {
        display: none;
    }
}

/* planner.css */
/* Styles for the planner - the data-driven planning view served at /planner/ on
 * the leadthink app. Three tabs (Files / Data / Flowchart); the editor / dashboard
 * / results mockups are standalone pages under planner/components/ and reuse the
 * .ve-* / .xt-* / .gl-* styles here.
 *
 * Bundled automatically - it sits under leadthink-app/, which StyleService walks
 * recursively, so it ships inside /css/style.php with the rest of the app CSS.
 * The engine view is planner/index.php; the JS is planner/planner.js.
 *
 * EVERYTHING here is scoped under .planner-page - the body class the view sets -
 * both the custom properties and every rule selector. That matters because this
 * file ships in /css/style.php on EVERY app page, and the planner leans on generic
 * names (.file, .tag, .tabs, .changes, plus a * reset) that would otherwise
 * restyle other components. Scoping confines it to the planner subtree; a bare
 * :root would have leaked the palette vars app-wide too.
 *
 * The warm-dark palette maps onto the always-on Tailwind catalog vars
 * (--palette-tailwind-<name>-<step>) StyleService emits, so the planner tracks the
 * same ramps as the app. A few illustrative mockup swatches (chart blues, the
 * dark-on-accent text) stay literal on purpose - demo colours, not palette.
 *
 * Files, schema tables, and flowcharts each render as a card. Filenames are
 * coloured by bucket to match PhpStorm's VCS scheme: Added green, Edited blue,
 * Deleted / Revert grey, Todo neutral. Mobile rules are in the @media block at
 * the bottom.
 */

.planner-page,
.planner-page * {
    box-sizing: border-box;
}

body.planner-page {
    --ink: var(--palette-tailwind-stone-200);
    --paper: var(--palette-tailwind-stone-950);
    --paper-2: var(--palette-tailwind-stone-900);
    --line: var(--palette-tailwind-stone-800);
    --accent: var(--palette-tailwind-orange-500);
    --accent-2: var(--palette-tailwind-emerald-400);
    --accent-3: var(--palette-tailwind-indigo-300);
    --muted: var(--palette-tailwind-stone-400);
    --dim: var(--palette-tailwind-stone-500);
    --accent-edited: var(--palette-tailwind-blue-300);
    --accent-deleted: var(--palette-tailwind-stone-400);
    --accent-revert: var(--palette-tailwind-stone-400);
    --note-gotcha: var(--palette-tailwind-amber-400);
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.55;
    padding: 28px 20px 80px;
    /* Undo the app shell's body lock. body.css sets body{height:100vh;
       overflow:hidden; display:flex} for the fixed sidebar+panel layout, and it
       ships in /css/style.php, so it lands on the planner too. The planner is a
       standalone scrolling document with no inner scroll panel - without this
       override the content is clipped at the fold and the page cannot scroll
       (most visibly on iOS Safari in portrait). */
    height: auto;
    min-height: 100vh;
    overflow: visible;
    display: block;
}

.planner-page .wrap {
    max-width: 840px;
    margin: 0 auto;
}

/* ---- Objective / status header (above the tabs) ---- */
.planner-page .objective {
    margin: 0 0 6px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-3);
    border-radius: 6px;
    background: var(--paper-2);
}

.planner-page .objective h3 {
    font-size: 12px;
    color: var(--accent-3);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 10px;
    font-weight: 700;
}

.planner-page .objective p {
    margin: 0 0 9px;
    font-size: 12px;
    color: var(--ink);
    line-height: 1.6;
}

.planner-page .objective p:last-child {
    margin-bottom: 0;
}

.planner-page .objective b {
    color: #ffffff;
    font-weight: 700;
}

.planner-page .objective code {
    background: var(--paper);
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink);
}

.planner-page .pl-burndown {
    display: flex;
    gap: 18px;
    margin: 10px 0 0;
    padding: 0;
}

.planner-page .pl-burndown span {
    font-size: 11px;
    color: var(--muted);
}

.planner-page .pl-burndown b {
    color: var(--ink);
    font-size: 14px;
    margin-right: 3px;
}

/* ---- Shell: left project sidebar + main column ----
 * The shell centers the pair; the main column keeps its own max-width and the
 * sidebar is a fixed-width rail beside it. On mobile (@media block) the shell
 * goes block, the sidebar off-canvas, and the toggle button reveals it. */
.planner-page .pl-shell {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
}

.planner-page .pl-shell .wrap {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.planner-page .pl-sidebar {
    flex: 0 0 196px;
    position: sticky;
    top: 28px;
    align-self: flex-start;
}

.planner-page .pl-sidebar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}

.planner-page .pl-sidebar-title {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--dim);
    font-weight: 700;
}

.planner-page .pl-sidebar-count {
    font-size: 10px;
    color: var(--dim);
}

.planner-page .pl-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.planner-page .pl-sidebar-item {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    line-height: 1.4;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 5px;
    background: var(--paper-2);
    word-break: break-word;
}

.planner-page a.pl-sidebar-item:hover {
    color: var(--ink);
    border-color: var(--dim);
}

.planner-page .pl-sidebar-item.active {
    color: var(--accent);
    border-left-color: var(--accent);
}

/* Mobile-only chrome; hidden on desktop where the sidebar is always open. */
.planner-page .pl-sidebar-toggle,
.planner-page .pl-sidebar-scrim {
    display: none;
}

/* ---- Tabs ---- */
.planner-page .tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 22px;
    border-bottom: 2px solid var(--line);
}

.planner-page .tab-btn {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--dim);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 8px 16px;
    cursor: pointer;
    text-transform: uppercase;
}

.planner-page .tab-btn:hover {
    color: var(--muted);
}

.planner-page .tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.planner-page .tab-btn .tab-count {
    font-size: 9px;
    font-weight: 700;
    color: var(--dim);
    margin-left: 5px;
    vertical-align: top;
}

.planner-page .tab-btn.active .tab-count {
    color: var(--accent);
}

.planner-page .tab-panel {
    display: none;
}

.planner-page .tab-panel.active {
    display: block;
}

.planner-page .tab-intro {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 16px;
    padding-left: 2px;
}

.planner-page .tab-intro code {
    background: var(--paper);
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink);
}

/* ---- File buckets (Files tab) ---- */
.planner-page .bucket {
    margin-top: 38px;
}

.planner-page .bucket-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--line);
}

.planner-page .bucket-head h2 {
    font-size: 22px;
    letter-spacing: .03em;
    margin: 0;
    font-weight: 700;
}

.planner-page .bucket-head .count {
    font-size: 11px;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: .12em;
}

.planner-page .bucket.todo .bucket-head h2 {
    color: var(--accent);
}

.planner-page .bucket.added .bucket-head h2 {
    color: var(--accent-2);
}

.planner-page .bucket.edited .bucket-head h2 {
    color: var(--accent-edited);
}

.planner-page .bucket.deleted .bucket-head h2 {
    color: var(--accent-deleted);
}

.planner-page .bucket.revert .bucket-head h2 {
    color: var(--accent-revert);
}

/* Filename coloured by its bucket, matching PhpStorm's VCS colours. */
.planner-page .bucket.added .tag {
    color: var(--accent-2);
}

.planner-page .bucket.edited .tag {
    color: var(--accent-edited);
}

.planner-page .bucket.deleted .tag {
    color: var(--accent-deleted);
}

.planner-page .bucket.revert .tag {
    color: var(--accent-deleted);
}

/* ---- File card ---- */
.planner-page .file {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper-2);
    padding: 11px 14px;
    margin-bottom: 11px;
}

.planner-page .paths {
    margin: 0 0 2px;
}

.planner-page .path {
    font-size: 13.5px;
    color: var(--dim);
    font-weight: 500;
    line-height: 1.7;
}

.planner-page .tag {
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 5px;
    font-size: 13.5px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    white-space: nowrap;
}

.planner-page .new-flag {
    font-size: 10px;
    color: var(--accent-2);
    margin-left: 4px;
}

.planner-page .loc {
    font-size: 10.5px;
    color: var(--dim);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin: 2px 0 0;
    word-break: break-all;
}

/* ---- Change list (a vertical rule carries the grouping) ---- */
.planner-page .changes {
    list-style: none;
    margin: 7px 0 0;
    padding: 0 0 0 2px;
    border-left: 2px solid var(--line);
}

.planner-page .changes li {
    font-size: 12px;
    color: var(--muted);
    padding-left: 14px;
    position: relative;
    margin-bottom: 2px;
}

.planner-page .changes li::before {
    content: '-';
    position: absolute;
    left: 8px;
    color: var(--accent);
}

.planner-page .changes li.ok::before {
    content: '\2713';
    color: var(--accent-2);
}

.planner-page .changes li.revert::before {
    content: '\21ba';
    color: var(--accent-revert);
}

.planner-page .changes code {
    background: var(--paper);
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink);
}

.planner-page .changes b {
    color: var(--ink);
    font-weight: 700;
}

/* Section sub-heading (groups the cards of one component). */
.planner-page .sub-head {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 24px 0 11px;
    padding: 5px 0 5px 11px;
    border-left: 3px solid var(--accent);
}

/* ---- Typed notes (context | gotcha) - hang off a file / table / flowchart ---- */
.planner-page .pl-notes {
    margin: 7px 0 0;
}

.planner-page .pl-note {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 7px;
    padding: 7px 12px;
    border-left: 3px solid var(--line);
    background: var(--paper-2);
    border-radius: 0 5px 5px 0;
}

.planner-page .pl-note:last-child {
    margin-bottom: 0;
}

.planner-page .pl-note b {
    color: var(--ink);
}

.planner-page .pl-note code {
    background: var(--paper);
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid var(--line);
    font-size: 10.5px;
    color: var(--ink);
}

.planner-page .pl-note--context {
    border-left-color: var(--muted);
}

.planner-page .pl-note--gotcha {
    border-left-width: 4px;
    border-left-color: var(--note-gotcha);
}

.planner-page .pl-note--gotcha .pl-note-tag {
    color: var(--note-gotcha);
}

.planner-page .pl-note-tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dim);
    margin-right: 4px;
}

/* "view mockup" link on a component group. */
.planner-page .pl-mockup {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent-3);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 2px 9px;
    margin: 2px 0 4px;
}

.planner-page .pl-mockup:hover {
    border-color: var(--accent-3);
}

/* ---- Deferred / out-of-scope section ---- */
.planner-page .deferred {
    margin-top: 50px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}

.planner-page .deferred h3 {
    font-size: 12px;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 12px;
    font-weight: 700;
}

.planner-page .deferred ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.planner-page .deferred li {
    font-size: 11.5px;
    color: var(--dim);
    padding-left: 16px;
    position: relative;
    margin-bottom: 6px;
    line-height: 1.5;
}

.planner-page .deferred li::before {
    content: '\00b7';
    position: absolute;
    left: 6px;
    color: var(--muted);
}

.planner-page .deferred code {
    background: var(--paper);
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid var(--line);
    font-size: 10.5px;
    color: var(--muted);
}

/* ---- Data tab: a card per schema table ---- */
.planner-page .pl-data-blob {
    margin-bottom: 30px;
}

.planner-page .pl-data-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
}

.planner-page .pl-data-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper-2);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.planner-page .pl-data-card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.planner-page .pl-data-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.planner-page .pl-data-name .pl-data-prefix {
    color: var(--dim);
    font-weight: 500;
}

.planner-page .pl-data-flag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 1px 8px;
    border-radius: 20px;
    border: 1px solid var(--line);
}

.planner-page .pl-data-flag.new {
    color: var(--accent-2);
    border-color: var(--accent-2);
}

.planner-page .pl-data-flag.alter {
    color: var(--accent-edited);
    border-color: var(--accent-edited);
}

.planner-page .pl-data-card .rec {
    margin-top: 8px;
}

/* The schema table itself (column | source). */
.planner-page .rec {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 2px;
    font-size: 11.5px;
}

.planner-page .rec th {
    text-align: left;
    font-weight: 700;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 9.5px;
    padding: 4px 9px;
    border-bottom: 1px solid var(--line);
}

.planner-page .rec td {
    padding: 5px 9px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.planner-page .rec td.f {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ink);
    font-weight: 600;
    width: 34%;
}

.planner-page .rec td.src {
    color: var(--muted);
}

.planner-page .rec tr.add td.f {
    color: var(--accent-2);
}

.planner-page .rec tr.add td.src {
    color: var(--ink);
}

.planner-page .rec tr.dim td {
    color: var(--dim);
    font-style: italic;
}

/* ---- Flowchart tab: a card per chart, with a pan/zoom viewport ---- */
.planner-page .pl-flow-chart {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper-2);
    padding: 14px 16px;
    margin-bottom: 18px;
}

.planner-page .pl-flow-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
}

.planner-page .pl-flow-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* touch-action:none lets planner.js own touch gestures instead of the page. */
.planner-page .pl-flow-viewport {
    position: relative;
    height: 440px;
    margin-top: 10px;
    border-radius: 6px;
    background: var(--paper);
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}

.planner-page .pl-flow-viewport.grabbing {
    cursor: grabbing;
}

.planner-page .pl-flow-canvas {
    transform-origin: 0 0;
    will-change: transform;
}

.planner-page .pl-flow-canvas .mermaid {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
}

.planner-page .pl-flow-ctrls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 3;
}

.planner-page .pl-flow-ctrls button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    line-height: 1;
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 5px;
    cursor: pointer;
}

.planner-page .pl-flow-ctrls button:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.planner-page .pl-flow-viewport.pl-flow-fs {
    position: fixed;
    inset: 0;
    height: auto;
    z-index: 1000;
    border-radius: 0;
}

body.planner-page.pl-flow-noscroll {
    overflow: hidden;
}

.planner-page .flow-foot {
    font-size: 11.5px;
    color: var(--dim);
    line-height: 1.6;
    padding-left: 2px;
}

.planner-page .flow-foot code {
    background: var(--paper);
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink);
}

/* ---- Mockup component pages (planner/components/*.php) ---- */
.planner-page .pl-mockup-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
}

.planner-page .pl-mockup-head a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}

.planner-page .pl-mockup-head span {
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* ---- Experiment-editor mockup (.ve-*) ---- */
.planner-page .ve {
    max-width: 560px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper-2);
    overflow: hidden;
}

.planner-page .ve-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.planner-page .ve-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

.planner-page .ve-url {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.planner-page .ve-cols,
.planner-page .ve-role {
    display: grid;
    grid-template-columns: 84px 1fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 16px;
}

.planner-page .ve-cols {
    border-bottom: 1px solid var(--line);
    padding-top: 10px;
    padding-bottom: 6px;
}

.planner-page .ve-col-h {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dim);
}

.planner-page .ve-role {
    border-bottom: 1px solid var(--line);
}

.planner-page .ve-role-name {
    font-size: 11px;
    color: var(--ink);
}

.planner-page .ve-swatch {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--muted);
}

.planner-page .ve-swatch span {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .15);
    display: inline-block;
    flex: none;
}

.planner-page .ve-pick {
    color: var(--ink);
    cursor: pointer;
}

.planner-page .ve-pick em {
    font-style: normal;
    font-size: 9px;
    color: var(--accent-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: auto;
}

.planner-page .ve-split {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.planner-page .ve-split-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dim);
    margin-bottom: 5px;
}

.planner-page .ve-split-sub {
    font-size: 10.5px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 10px;
}

.planner-page .ve-split-bar {
    display: flex;
    height: 26px;
    border-radius: 5px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
}

.planner-page .ve-split-base {
    background: var(--line);
    color: var(--ink);
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.planner-page .ve-split-var {
    background: var(--accent);
    color: #1a1209;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.planner-page .ve-actions {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.planner-page .ve-save {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #1a1209;
    background: var(--accent-2);
    border: none;
    border-radius: 5px;
    padding: 7px 16px;
    cursor: pointer;
}

.planner-page .ve-stub {
    font-size: 10px;
    color: var(--dim);
}

.planner-page .ve-split-note {
    font-size: 10px;
    color: var(--dim);
    line-height: 1.55;
    margin-top: 8px;
}

.planner-page .ve-split-note code {
    background: var(--paper);
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid var(--line);
    color: var(--muted);
}

.planner-page .ve-target {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
}

.planner-page .ve-target-label {
    grid-column: 1 / -1;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dim);
}

.planner-page .ve-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.planner-page .ve-field label {
    font-size: 10px;
    color: var(--muted);
}

.planner-page .ve-field input {
    font-family: inherit;
    font-size: 11px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 6px 8px;
    color: var(--dim);
}

.planner-page .ve-target-note {
    grid-column: 1 / -1;
    font-size: 10px;
    color: var(--dim);
    line-height: 1.55;
}

.planner-page .ve-grain {
    font-size: 9px;
    color: var(--accent-3);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 0 5px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.planner-page .ve-sec-label {
    padding: 14px 16px 0;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dim);
}

.planner-page .ve-slider {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.planner-page .ve-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--accent) 0%, var(--accent) 50%, var(--line) 50%, var(--line) 100%);
    outline: none;
}

.planner-page .ve-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-2);
    border: 2px solid var(--paper);
    cursor: pointer;
}

.planner-page .ve-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-2);
    border: 2px solid var(--paper);
    cursor: pointer;
}

.planner-page .ve-slider-read {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
}

.planner-page .ve-read-var {
    color: var(--accent);
}

.planner-page .ve-read-base {
    color: var(--muted);
}

/* ---- Experiments-dashboard mockup (.xt-*) ---- */
.planner-page .xt {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.planner-page .xt th {
    text-align: left;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dim);
    border-bottom: 2px solid var(--line);
    padding: 8px 12px;
    font-weight: 700;
}

.planner-page .xt td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.planner-page .xt-funnel {
    cursor: pointer;
}

.planner-page .xt-funnel td:first-child {
    color: var(--ink);
    font-weight: 600;
}

.planner-page .xt-funnel:hover td {
    background: var(--paper-2);
}

.planner-page .xt-exp {
    display: none;
}

.planner-page .xt-exp td {
    background: rgba(0, 0, 0, .08);
}

.planner-page .xt-exp td:first-child {
    padding-left: 30px;
    color: var(--ink);
    font-weight: 500;
}

.planner-page .xt-caret {
    display: inline-block;
    width: 12px;
    color: var(--accent);
    transition: transform .15s;
}

.planner-page .xt-funnel.open .xt-caret {
    transform: rotate(90deg);
}

.planner-page .xt-change {
    color: var(--muted);
    margin-left: 6px;
    font-size: 11px;
}

.planner-page .xt-empty td {
    color: var(--dim);
    font-style: italic;
    cursor: default;
}

.planner-page .xt-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
}

.planner-page .xt-badge.running {
    background: rgba(95, 185, 140, .18);
    color: var(--accent-2);
}

.planner-page .xt-badge.off {
    background: rgba(154, 145, 128, .15);
    color: var(--muted);
}

.planner-page .xt-id {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: rgba(159, 180, 240, .14);
    color: var(--accent-3);
    border: 1px solid rgba(159, 180, 240, .28);
    border-radius: 5px;
    padding: 1px 7px;
    margin-right: 8px;
    letter-spacing: .03em;
}

.planner-page .xt-new,
.planner-page .xt-report {
    color: var(--ink);
    background: none;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 5px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.planner-page .xt-new:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.planner-page .xt-report:hover {
    border-color: var(--accent-3);
    color: var(--accent-3);
}

.planner-page .xt-ico {
    width: 14px;
    height: 14px;
    flex: none;
}

/* ---- Experiment-results mockup (.gl-*) ---- */
.planner-page .gl {
    max-width: 620px;
}

.planner-page .gl-head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}

.planner-page .gl-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

.planner-page .gl-meta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
}

.planner-page .gl-goal {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper-2);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.planner-page .gl-goal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.planner-page .gl-goal-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.planner-page .gl-goal-type {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 6px;
}

.planner-page .gl-goal-url {
    font-size: 11px;
    color: var(--muted);
    margin-left: auto;
}

.planner-page .gl-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.planner-page .gl-tbl th {
    text-align: left;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dim);
    border-bottom: 1px solid var(--line);
    padding: 6px 8px;
    font-weight: 700;
}

.planner-page .gl-tbl td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.planner-page .gl-tbl tr:last-child td {
    border-bottom: none;
}

.planner-page .gl-tbl th.gl-n,
.planner-page .gl-tbl td.gl-n {
    text-align: right;
}

.planner-page .gl-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
}

.planner-page .gl-dot.base {
    background: #5a6b9e;
}

.planner-page .gl-dot.var {
    background: var(--accent);
}

.planner-page .gl-win {
    color: var(--accent-2);
    font-weight: 700;
}

.planner-page .gl-sec {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 18px 0 8px;
}

/* ---- Mobile ----
 * The planner is desktop-first; this keeps it usable on a phone: the tab bar
 * swipes horizontally, the wide mockup tables scroll inside their own container
 * (kept as real <table>s so column alignment and the dashboard's JS row-toggle
 * keep working), and the flow viewport is shorter (fullscreen still fills the
 * screen). */
@media (max-width: 640px) {
    body.planner-page {
        padding: 18px 12px 60px;
    }

    /* Sidebar off-canvas: the toggle slides it in, the scrim dismisses it. */
    .planner-page .pl-shell {
        display: block;
    }

    .planner-page .pl-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        width: 240px;
        max-width: 80vw;
        margin: 0;
        padding: 18px 14px;
        background: var(--paper);
        border-right: 1px solid var(--line);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .planner-page .pl-shell.pl-nav-open .pl-sidebar {
        transform: none;
    }

    .planner-page .pl-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        color: var(--accent);
        background: var(--paper-2);
        border: 1px solid var(--line);
        border-radius: 5px;
        padding: 7px 12px;
        margin: 0 0 16px;
        cursor: pointer;
    }

    .planner-page .pl-shell.pl-nav-open .pl-sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(0, 0, 0, .5);
    }

    .planner-page .tabs {
        gap: 2px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .planner-page .tabs::-webkit-scrollbar {
        height: 3px;
    }

    .planner-page .tabs::-webkit-scrollbar-thumb {
        background: var(--line);
        border-radius: 3px;
    }

    .planner-page .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 11px;
    }

    .planner-page .bucket {
        margin-top: 28px;
    }

    .planner-page .bucket-head h2 {
        font-size: 19px;
    }

    .planner-page .objective {
        padding: 14px;
    }

    .planner-page .rec td.f {
        word-break: break-word;
    }

    .planner-page .ve,
    .planner-page .gl {
        max-width: 100%;
    }

    .planner-page .ve-cols,
    .planner-page .ve-role {
        grid-template-columns: 58px 1fr 1fr;
        gap: 6px;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* dashboard table scrolls inside its wrapper */
    .planner-page .xt-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .planner-page .xt {
        white-space: nowrap;
    }

    /* results tables scroll inside their card */
    .planner-page .gl-goal {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .planner-page .gl-tbl th,
    .planner-page .gl-tbl td {
        white-space: nowrap;
    }

    /* shorter flow viewport on phones */
    .planner-page .pl-flow-viewport {
        height: 300px;
    }
}


/* profile-grid.css */
/* Responsive profile cards with square portraits, optional biographies, and accessible profile links. */
.profile-grid {
	display: grid;
	gap: 24px;
}

.profile-grid,
.profile-grid::before,
.profile-grid::after,
.profile-grid *,
.profile-grid *::before,
.profile-grid *::after {
	box-sizing: border-box;
}

.profile-grid .profile-grid-profile {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--profile-grid-border);
	border-radius: 16px;
	color: var(--profile-grid-text);
	background: var(--profile-grid-surface);
	overflow: hidden;
}

.profile-grid .profile-grid-photo {
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	background: var(--profile-grid-photo-bg);
	overflow: hidden;
}

.profile-grid .profile-grid-photo picture,
.profile-grid .profile-grid-photo img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center top;
}

.profile-grid .profile-grid-copy {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px;
}

.profile-grid h3 {
	margin: 0;
	font-family: var(--font-headings);
	font-size: 22px;
	line-height: 1.2;
}

.profile-grid .profile-grid-role {
	margin: 8px 0 0;
	color: var(--profile-grid-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.profile-grid .profile-grid-bio {
	margin: 16px 0 0;
	color: var(--profile-grid-text-muted);
	font-size: 15px;
	line-height: 1.65;
}

.profile-grid .profile-grid-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}

.profile-grid .profile-grid-link,
.profile-grid .profile-grid-link:visited,
.profile-grid .profile-grid-link:hover,
.profile-grid .profile-grid-link:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--profile-grid-accent);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.profile-grid .profile-grid-link-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.profile-grid .profile-grid-link-icon-end {
	width: 16px;
	height: 16px;
}

.profile-grid .profile-grid-link-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.profile-grid .profile-grid-link:hover {
	text-decoration-thickness: 2px;
}

.profile-grid .profile-grid-link:focus-visible {
	outline: 3px solid var(--profile-grid-accent);
	outline-offset: 4px;
	border-radius: 2px;
}

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

@media (min-width: 1100px) {
	.profile-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* radio.css */
/**
 * Radio component - the flat base for every <input type="radio"> in the app: the
 * native control reset (appearance: none), a 1px border, a round dot drawn from
 * an inset ring, and the hover / checked / focus / disabled states. No
 * box-shadow beyond that ring - flat, matching the house style.
 *
 * Styles the bare input so any radio is consistent by default; page- or
 * component-specific layout (margin, position) is added where the radio is
 * used, the way .preset-item does in date-range-picker.css. Colours and metrics
 * come from the --radio-* tokens (config -> StyleService).
 *
 * CSS only, like button.css - a radio needs no server-side render logic, so
 * there is no class and no view to pair with.
 */

/* Base Radio Styles */
input[type="radio"] {
    /* Reset the native control so the box below is ours to draw */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Box */
    width: var(--radio-size);
    height: var(--radio-size);
    border: var(--radio-border-width) solid var(--radio-border);
    border-radius: 50%;

    /* Colors */
    background-color: var(--radio-bg);

    /* Core Behavior */
    display: inline-block;
    flex: none;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
}

/* Hover State */
input[type="radio"]:hover:not([disabled]) {
    border-color: var(--radio-border-hover);
}

/* Checked State - the fill shows through the middle of an inset ring drawn in
   the unchecked background colour, which is the dot. */
input[type="radio"]:checked {
    background-color: var(--radio-bg-checked);
    border-color: var(--radio-border-checked);
    box-shadow: inset 0 0 0 var(--radio-dot-inset) var(--radio-bg);
}

/* Focus State (for accessibility) */
input[type="radio"]:focus-visible {
    outline: 2px solid var(--radio-focus-outline);
    outline-offset: 2px;
}

/* Disabled State */
input[type="radio"][disabled] {
    background-color: var(--radio-bg-disabled);
    border-color: var(--radio-border-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

input[type="radio"]:checked[disabled] {
    box-shadow: inset 0 0 0 var(--radio-dot-inset) var(--radio-bg-disabled);
}


/* refresh-button.css */
/**
 * Refresh-button styles: the "Updated X ago" timestamp paired with a small flat
 * icon button (36x36), wrapped in .refresh-control so the pair portals into the
 * header controls region as a unit. Hover accents the button border + icon to
 * primary; :active nudges the scale; .spinning rotates the icon while a refresh
 * is in flight.
 *
 * The base button.css colours every button primary on hover/press via
 * button:hover/:active:not([disabled]) at (0,2,1); the rules here carry
 * :not([disabled]) to out-specify that and keep the button's own neutral
 * surface. Colours come from the --refresh-button-* tokens (config ->
 * StyleService); the icon is an inline SVG (injected via MediaService),
 * recoloured by currentColor. order:2 keeps the control right of the date
 * picker in the controls region regardless of init order.
 *
 * Wired by RefreshButton::css(). Markup lives in
 * /inc/framework/views/components/refresh-button.php; the timestamp ticker in
 * /inc/framework/js/modules/refresh-button.js.
 */

.refresh-control {
    display: flex;
    align-items: center;
    gap: 12px;
    order: 2;
}

.last-updated-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    color: var(--refresh-button-text-muted);
}

.last-updated-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.last-updated-time {
    font-size: 13px;
    font-weight: 500;
    color: var(--refresh-button-text);
}

.refresh-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--refresh-button-bg);
    border: 1px solid var(--refresh-button-border);
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

@media (max-width: 768px) {
    .refresh-button {
        width: 32px;
        height: 32px;
    }
}

/* :not([disabled]) so the button out-specifies button.css's button:hover /
   :active (0,2,1) and keeps its own neutral surface, not the primary fill. */
.refresh-button:hover:not([disabled]) {
    background: var(--refresh-button-bg-hover);
    border-color: var(--refresh-button-border-hover);
}

.refresh-button:active:not([disabled]) {
    background: var(--refresh-button-bg-hover);
    transform: scale(0.95);
}

.refresh-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.refresh-icon {
    width: 18px;
    height: 18px;
    display: block;
    color: var(--refresh-button-icon);
}

@media (max-width: 768px) {
    .refresh-icon {
        width: 16px;
        height: 16px;
    }
}

.refresh-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.refresh-button:hover:not([disabled]) .refresh-icon {
    color: var(--refresh-button-icon-hover);
}

.refresh-icon.spinning {
    animation: refresh-button-spin 1s linear infinite;
}

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

/* row.css */
/**
 * Row appearance - what a <tr> looks like, on its own. Every row renders with a
 * base `.row`; the data row's stripe is `.row-zebra` and a breakdown child is
 * `.sub-row`. Scoping to the class, not to a .data-table-container wrapper,
 * lets a `.row` work inside a plain <table>. Owned by Row (the row templates
 * are shipped by Row::render()); the .row-zebra class is applied by
 * data-table.js, which knows each row's data-index.
 *
 * Sub-rows take their parent's shade: data-table.js copies the parent's
 * `.row-zebra` state onto each child, so an expanded block reads as one colour
 * and the children are set apart by indent + smaller muted text, not by a
 * competing background. The sticky first-cell repaints live in data-table.css.
 * Colours reference the --row-* variables from the leadthink-app config.
 */

.row {
    border-bottom: 1px solid var(--row-border);
    background-color: var(--row-bg);
    transition: background-color 0.2s;
}

/* Zebra striping */
.row.row-zebra {
    background-color: var(--row-bg-zebra);
}

/* Hover - orientation feedback, every row including sub-rows. Must follow
   .row-zebra so it wins on a striped row (equal specificity, last one wins). */
.row:hover {
    background-color: var(--row-bg-hover);
}

/* ====================
   BREAKDOWN SUB-ROWS - indent + muted text; background inherited from the
   parent's stripe state (.row / .row-zebra, copied on by data-table.js)
   ==================== */

.row.sub-row td {
    font-size: 13px;
    color: var(--row-sub-text);
}

.row.sub-row td:first-child {
    padding-left: 48px;
}

/* select.css */
/* Select component - a native <select> with the browser arrow removed and our
   own currentColor chevron overlaid, so the control inherits colour and theming
   like the rest of the form controls. Inline wrappers keep their natural native
   width. When a parent stretches the wrapper, the native control fills it.
   Pairs with Select.php and the view at views/components/select.php. */

.select {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.select .select-input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font: inherit;
	color: var(--select-text);
	background: var(--select-surface);
	border: 1px solid var(--select-border);
	border-radius: 6px;
	padding: 5px 30px 5px 11px;
	margin: 0;
	outline: none;
	cursor: pointer;
	box-sizing: border-box;
	width: 100%;
}
.select .select-input:hover:not(:disabled) { border-color: var(--select-border-hover); }
.select .select-input:focus { border-color: var(--select-accent); }
.select .select-input:disabled {
	color: var(--select-disabled-text);
	background: var(--select-disabled-bg);
	cursor: default;
}

/* Our arrow: a currentColor chevron pinned right, click-through so the native
   control still opens. Colour follows --select-arrow. */
.select .select-arrow {
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	color: var(--select-arrow);
	pointer-events: none;
}
.select .select-arrow svg { width: 16px; height: 16px; display: block; }


/* sidebar-nav.css */
/**
 * Styles the persistent internal sidebar and the public mobile navigation overlay.
 * Shared sidebar-width keeps the internal rail and app content aligned; collapsed
 * and mobile-open states control its width. The public overlay owns its scrollable
 * links and pinned Theme/Login footer with the same outer gutters. The Theme
 * label stays visible in the drawer; Login spans the navigation-row width.
 * Colors use sidebar-nav component tokens.
 */


body {
    --sidebar-width: 240px;
}

body.sidebar-collapsed {
    --sidebar-width: 64px;
}

body.has-sidebar {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.2s ease;
}


.sidebar-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-nav-bg);
    border-right: 1px solid var(--sidebar-nav-border);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width 0.2s ease;
}

.sidebar-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}


.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--app-header-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--sidebar-nav-border);
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand-logo-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.sidebar-nav .brand-logo-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.brand-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--sidebar-nav-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--sidebar-nav-toggle);
    cursor: pointer;
}

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

.sidebar-toggle svg {
    width: 18px;
    height: 18px;
}

.sidebar-toggle .toggle-icon-expand {
    display: none;
}



.sidebar-top {
    border-bottom: 1px solid var(--sidebar-nav-border);
    padding: 8px 0;
    flex-shrink: 0;
}

.nav-item-top {
    padding: 8px 16px;
}

.nav-item-top .nav-icon {
    opacity: 0.6;
}

.nav-item-top:hover .nav-icon {
    opacity: 1;
}


.sidebar-nav-items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

.nav-section {
    margin-bottom: 2px;
}

.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: var(--sidebar-nav-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
}

.sidebar-nav .nav-item:hover {
    background: var(--sidebar-nav-hover-bg);
    color: var(--sidebar-nav-text-strong);
}

.sidebar-nav .nav-item.active {
    background: var(--sidebar-nav-active-bg);
    color: var(--sidebar-nav-active-text);
    font-weight: 600;
}

.sidebar-nav .nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sidebar-nav-active-text);
}

.nav-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-nav .nav-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sidebar-nav .nav-item:hover .nav-icon,
.sidebar-nav .nav-item.active .nav-icon {
    opacity: 1;
}

.nav-label {
    display: block;
    flex: 1;
    text-align: left;
}

.nav-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.5;
}

.sidebar-nav .nav-arrow svg {
    display: block;
    width: 16px;
    height: 16px;
}

.sidebar-nav .nav-arrow-collapsed {
    display: inline-flex;
}

.sidebar-nav .nav-arrow-expanded {
    display: none;
}

.sidebar-nav .nav-item.expanded .nav-arrow-collapsed {
    display: none;
}

.sidebar-nav .nav-item.expanded .nav-arrow-expanded {
    display: inline-flex;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--sidebar-nav-badge-bg);
    color: var(--sidebar-nav-badge-text);
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
}


.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-submenu.expanded {
    max-height: 1000px;
}

.nav-subitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 6px 28px;
    color: var(--sidebar-nav-text-muted);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.nav-subitem:link,
.nav-subitem:visited {
    color: var(--sidebar-nav-text-muted);
}

.nav-subitem:hover {
    background: var(--sidebar-nav-hover-bg);
    color: var(--sidebar-nav-text-strong);
}

.nav-subitem.active,
.nav-subitem.active:link,
.nav-subitem.active:visited {
    background: var(--sidebar-nav-active-bg);
    color: var(--sidebar-nav-active-text);
    font-weight: 600;
    position: relative;
}

.nav-subitem.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sidebar-nav-active-text);
}

.nav-subgroup {
    margin: 6px 0;
}

.nav-subgroup-label {
    display: block;
    padding: 8px 16px 4px 28px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sidebar-nav-text-faint);
}

.nav-divider {
    display: block;
    height: 1px;
    background: var(--sidebar-nav-border);
    margin: 8px 16px 8px 28px;
}

.nav-subitem .nav-v2 {
    margin-left: 6px;
    font-weight: 700;
}


.sidebar-footer {
    border-top: 1px solid var(--sidebar-nav-border);
    padding: 8px 0;
    flex-shrink: 0;
}

.nav-item-footer {
    padding: 8px 16px;
}

.nav-item-footer .nav-icon {
    opacity: 0.6;
}

.nav-item-footer:hover .nav-icon {
    opacity: 1;
}


body.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
}

body.sidebar-collapsed .sidebar-brand {
    display: none;
}

body.sidebar-collapsed .sidebar-toggle .toggle-icon-collapse {
    display: none;
}

body.sidebar-collapsed .sidebar-toggle .toggle-icon-expand {
    display: inline-flex;
}

body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .nav-item-footer {
    justify-content: center;
    padding: 12px 0;
}

body.sidebar-collapsed .nav-icon {
    margin: 0 auto;
}

body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-arrow,
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed .nav-submenu,
body.sidebar-collapsed .nav-subgroup-label,
body.sidebar-collapsed .nav-divider {
    display: none;
}

body.sidebar-collapsed .sidebar-nav-items {
    cursor: pointer;
}


.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color-mix(in srgb, var(--sidebar-nav-overlay-bg) 50%, transparent);
    z-index: 999;
    pointer-events: none;
}

.sidebar-overlay.active {
    display: block;
    pointer-events: auto;
}


.sidebar-nav-items::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav-items::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav-items::-webkit-scrollbar-thumb {
    background: var(--sidebar-nav-scrollbar-thumb);
    border-radius: 3px;
}

.sidebar-nav-items::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-nav-scrollbar-thumb-hover);
}


@media (max-width: 768px) {
    body.has-sidebar {
        margin-left: 64px;
    }

    .sidebar-nav {
        width: 64px;
    }

    .sidebar-nav .sidebar-header {
        justify-content: center;
        padding: 0;
    }

    .sidebar-nav .sidebar-brand,
    .sidebar-nav .nav-label,
    .sidebar-nav .nav-arrow,
    .sidebar-nav .nav-badge,
    .sidebar-nav .nav-submenu,
    .sidebar-nav .nav-subgroup-label,
    .sidebar-nav .nav-divider {
        display: none;
    }

    .sidebar-nav .nav-item,
    .sidebar-nav .nav-item-footer {
        justify-content: center;
        padding: 12px 0;
    }

    .sidebar-nav .nav-icon {
        margin: 0 auto;
    }

    .sidebar-nav .sidebar-toggle .toggle-icon-collapse {
        display: none;
    }

    .sidebar-nav .sidebar-toggle .toggle-icon-expand {
        display: inline-flex;
    }

    .sidebar-nav.mobile-open {
        width: 280px;
    }

    .sidebar-nav.mobile-open .sidebar-header {
        justify-content: space-between;
        padding: 0 20px;
    }

    .sidebar-nav.mobile-open .sidebar-brand {
        display: flex;
    }

    .sidebar-nav.mobile-open .nav-label,
    .sidebar-nav.mobile-open .nav-arrow,
    .sidebar-nav.mobile-open .nav-subgroup-label,
    .sidebar-nav.mobile-open .nav-divider {
        display: block;
    }

    .sidebar-nav.mobile-open .nav-badge {
        display: inline-flex;
    }

    .sidebar-nav.mobile-open .nav-submenu {
        display: block;
    }

    .sidebar-nav.mobile-open .nav-item,
    .sidebar-nav.mobile-open .nav-item-footer {
        justify-content: flex-start;
        padding: 8px 16px;
    }

    .sidebar-nav.mobile-open .nav-icon {
        margin: 0;
    }

    .sidebar-nav.mobile-open .sidebar-toggle .toggle-icon-collapse {
        display: inline-flex;
    }

    .sidebar-nav.mobile-open .sidebar-toggle .toggle-icon-expand {
        display: none;
    }
}


.public-sidebar-dialog {
    --sidebar-nav-public-current-gutter: var(--sidebar-nav-public-gutter);
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--sidebar-nav-public-bg);
    color: var(--sidebar-nav-public-text);
    font: inherit;
    overflow: hidden;
}

.public-sidebar-dialog::backdrop {
    background: var(--sidebar-nav-public-overlay-bg);
}

.public-sidebar-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.public-sidebar-header {
    box-sizing: border-box;
    min-height: var(--sidebar-nav-public-header-height);
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 10px var(--sidebar-nav-public-current-gutter);
    border-bottom: 1px solid var(--sidebar-nav-public-border);
}

.public-sidebar-dialog .public-sidebar-toggle {
    order: 1;
    margin-inline-start: auto;
    margin-inline-end: -10px;
}
.public-sidebar-links,
.public-sidebar-footer {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--sidebar-nav-public-current-gutter));
    margin-inline: var(--sidebar-nav-public-current-gutter);
}

.public-sidebar-links {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.public-sidebar-link {
    box-sizing: border-box;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 6px;
    color: var(--sidebar-nav-public-text);
    font-weight: 600;
    text-decoration: none;
}

.public-sidebar-link:link,
.public-sidebar-link:visited {
    color: var(--sidebar-nav-public-text);
}

.public-sidebar-link:hover,
.public-sidebar-link[aria-current="page"] {
    background: var(--sidebar-nav-public-hover-bg);
}

.public-sidebar-link[aria-current="page"] {
    color: var(--sidebar-nav-public-active-text);
    background: var(--sidebar-nav-public-active-bg);
}

.public-sidebar-footer {
    position: relative;
    flex: 0 0 auto;
    padding: 8px 0;
}

.public-sidebar-dialog .framework-config {
    color: var(--sidebar-nav-public-text);
}

.public-sidebar-dialog .framework-config.framework-config-topbar {
    padding: 8px 16px;
}

.public-sidebar-dialog .framework-config.framework-config-topbar .framework-config-heading {
    display: flex;
}

.public-sidebar-dialog .framework-config-popup {
    box-sizing: border-box;
    max-height: calc(100dvh - 128px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.public-sidebar-dialog .public-sidebar-action {
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0;
}
.public-sidebar-dialog :focus-visible {
    outline: 2px solid var(--sidebar-nav-public-focus-outline);
    outline-offset: 2px;
}

body.sidebar-collapsed .public-sidebar-dialog .framework-config {
    justify-content: space-between;
    padding: 8px 16px;
}

body.sidebar-collapsed .public-sidebar-dialog .framework-config-label {
    display: inline;
}

body.sidebar-collapsed .public-sidebar-dialog .framework-config-controls {
    display: flex;
}

body.sidebar-collapsed .public-sidebar-dialog .framework-config-popup {
    display: flex;
}

@media (min-width: 640px) {
    .public-sidebar-dialog {
        --sidebar-nav-public-current-gutter: var(--sidebar-nav-public-gutter-wide);
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-sidebar-dialog,
    .public-sidebar-dialog::backdrop {
        scroll-behavior: auto;
    }
}


/* sidebar-viewer.css */
/* Styles for the sidebar-viewer drawer - a slide-in overlay panel with a
 * compact header (sized to var(--app-header-height)), a right-aligned actions
 * group (refresh + close icon buttons), and a scrollable body for pluggable
 * panels.
 *
 * Used by /inc/framework/views/components/sidebar-viewer.php; the drawer is
 * driven by window.sidebarViewer (/inc/framework/js/modules/sidebar-viewer.js).
 *
 * The bottom half (.config-*, .palette-*, .font-*, .step-*, .content-*) styles
 * the configuration-preview panel that renders inside the body - one pluggable
 * panel, not the shell chrome.
 */

.sidebar-viewer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sidebar-viewer-overlay-bg);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-viewer-overlay.active {
    display: block;
    opacity: 1;
}

.sidebar-viewer-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    height: 100vh;
    background-color: var(--sidebar-viewer-panel-bg);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.sidebar-viewer-panel.active {
    transform: translateX(0);
}

/* WIDTH MODES - the shell owns panel width, and there are only two. A caller names
   one (open()'s opts.width, or a panel's own `width` field); setWidth() writes it to
   data-width. NO COMPONENT STYLESHEET SETS A PANEL WIDTH - a panel is the shell's
   furniture, and letting components pick produced four widths across four sheets.

     default   a third of the viewport
     wide      two thirds of the viewport

   The rule both modes answer to: if you can't see the page beside the panel, it's not
   a side panel, it's a page - so nothing reaches the 240px nav rail (two thirds leaves
   a third to its left; the tightest 769px viewport still clears the rail by 16px).
   Widths are viewport-relative on purpose: "a third" is what a person sees, whereas a
   rail-relative sum once rendered a 135px panel on a phone. The old sm/md/lg/content/
   viewport/full modes were DELETED, not renamed; setWidth() warns on an unknown mode
   and falls back, so a stale call is findable. */

.sidebar-viewer-panel[data-width="default"] {
    width: 33.333vw;
}

.sidebar-viewer-panel[data-width="wide"] {
    width: 66.667vw;
}

.sidebar-viewer-header {
    height: var(--app-header-height);
    padding: 0 24px;
    background-color: var(--sidebar-viewer-panel-bg);
    border-bottom: 1px solid var(--sidebar-viewer-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.sidebar-viewer-header-content {
    flex: 1;
    min-width: 0; /* let the subtitle ellipsis-truncate instead of forcing width */
    padding-right: 16px;
}

.sidebar-viewer-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--sidebar-viewer-title-text);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.sidebar-viewer-subtitle {
    font-size: 13px;
    color: var(--sidebar-viewer-subtitle-text);
    margin: 4px 0 0 0;
    display: block;
    text-decoration: none;
    /* single line + ellipsis so a long funnel url can't grow the bar height */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-viewer-subtitle:hover {
    text-decoration: underline;
}

.sidebar-viewer-close {
    background: none;
    /* thin outline so the icon reads as a button, not a floating glyph */
    border: 1px solid var(--sidebar-viewer-border);
    color: var(--sidebar-viewer-close-text);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sidebar-viewer-close svg {
    width: 18px;
    height: 18px;
}

.sidebar-viewer-close:hover {
    background-color: var(--sidebar-viewer-close-hover-bg);
    color: var(--sidebar-viewer-close-hover-text);
}

.sidebar-viewer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Hidden until a panel registers a handler via sidebarViewer.setRefresh
   (see the .hidden variant below). */
.sidebar-viewer-refresh {
    background: none;
    /* thin outline so the icon reads as a button, not a floating glyph */
    border: 1px solid var(--sidebar-viewer-border);
    color: var(--sidebar-viewer-close-text);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sidebar-viewer-refresh:hover {
    background-color: var(--sidebar-viewer-close-hover-bg);
    color: var(--sidebar-viewer-close-hover-text);
}

.sidebar-viewer-refresh.hidden {
    display: none;
}

.sidebar-viewer-refresh svg {
    width: 18px;
    height: 18px;
}

/* is-refreshing is set by experiment-results.js while a fetch is in flight;
   the spin keyframes are shared with .loading-spinner below. */
.sidebar-viewer-refresh.is-refreshing svg {
    animation: spin 0.8s linear infinite;
}

.sidebar-viewer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background-color: var(--sidebar-viewer-body-bg);
}


/* Configuration-preview panel content - the classes below style one pluggable
   panel that renders inside .sidebar-viewer-body, not the drawer shell above. */
.config-section {
    margin-bottom: 32px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

.config-section:last-child {
    margin-bottom: 0;
}

.config-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 16px 0;
}

.config-item {
    margin-bottom: 20px;
}

.config-item:last-child {
    margin-bottom: 0;
}

.config-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.config-item-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.config-item-value {
    font-size: 13px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    color: #374151;
    background-color: #f9fafb;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 4px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
}

.palette-feedback {
    margin-top: 8px;
    height: 24px;
    display: none;
    text-align: center;
}

.copy-success {
    color: #10b981;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
    background: #ecfdf5;
    border-radius: 4px;
    display: inline-block;
}

.color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-swatch:hover {
    transform: scale(1.15);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.swatch-label {
    font-size: 9px;
    color: white;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    font-weight: 600;
}

.swatch-tooltip {
    display: none;
}

.font-preview {
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
}

.font-sample {
    color: #111827;
    margin-bottom: 0;
    text-align: left;
}

.font-sample-heading {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
}

.font-sample-body,
.font-sample-paragraph {
    font-size: 15px;
    line-height: 1.6;
}

.font-sample-strong {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.6;
}

.font-sample-button-wrapper {
    padding: 8px 0;
    text-align: left;
}

.font-sample-button {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.font-sample-button:hover {
    background: #2563eb;
}

.font-variants {
    display: none;
}

.step-item {
    padding: 16px;
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.step-item:last-child {
    margin-bottom: 0;
}

.step-number {
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.step-field {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}

.step-field-label {
    font-weight: 500;
}

.step-field-value {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    background: #ffffff;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
}

.step-question {
    font-size: 14px;
    color: #111827;
    line-height: 1.5;
}

.content-preview {
    padding: 16px;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
    text-align: left;
}

.content-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.content-text {
    font-size: 14px;
    color: #111827;
    line-height: 1.6;
    word-break: break-word;
}

.content-text-long {
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.content-items {
    margin-top: 12px;
}

.content-item-entry {
    padding: 12px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
}

.content-item-entry:last-child {
    margin-bottom: 0;
}

.content-item-field {
    display: block;
    margin-bottom: 8px;
}

.content-item-field:last-child {
    margin-bottom: 0;
}

.content-item-label {
    font-weight: 600;
    color: #6b7280;
    font-size: 12px;
}

.content-item-value {
    color: #111827;
    font-size: 13px;
    margin-left: 4px;
}

.content-subsection-label {
    font-weight: 600;
    color: #374151;
    font-size: 13px;
    margin-bottom: 8px;
    margin-top: 12px;
}

.content-subsection-label:first-child {
    margin-top: 0;
}

.content-nested-field {
    display: block;
    margin-bottom: 8px;
}

.content-nested-field:last-child {
    margin-bottom: 0;
}

.content-nested-label {
    font-weight: 600;
    color: #6b7280;
    font-size: 12px;
}

.content-nested-value {
    color: #111827;
    font-size: 13px;
    margin-left: 4px;
}

.content-simple-item {
    padding: 8px 12px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 6px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    color: #111827;
}

.content-simple-item:last-child {
    margin-bottom: 0;
}

.content-item-title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    font-size: 14px;
}

.content-item-desc {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

.config-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #6b7280;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 12px;
}

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

.config-empty {
    text-align: center;
    padding: 48px 24px;
    color: #6b7280;
}

.config-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    opacity: 0.3;
}

.config-empty-text {
    font-size: 14px;
    line-height: 1.5;
}

.sidebar-viewer-body::-webkit-scrollbar {
    width: 6px;
}

.sidebar-viewer-body::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-viewer-body::-webkit-scrollbar-thumb {
    background: var(--sidebar-viewer-scrollbar-thumb);
    border-radius: 3px;
}

.sidebar-viewer-body::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-viewer-scrollbar-thumb-hover);
}

@media (max-width: 768px) {
    .sidebar-viewer-panel {
        width: 100%;
    }

    /* MOBILE - every mode goes edge to edge: a third or two thirds of a phone is too
       narrow, and there's no page to sit beside the panel at this size. Matching on the
       ATTRIBUTE (not a named mode) is the point - this rule can't fall behind the mode
       list. The old version named `.full` explicitly, so it missed a panel that sized
       itself against the nav rail; on mobile the rail is a slide-over overlay, not a
       reserved column, so it subtracted 240px nothing occupied and rendered 135px wide on
       a 375px screen. No mode measures against the rail now, so that can't recur. */
    .sidebar-viewer-panel[data-width] {
        width: 100%;
        max-width: 100%;
    }

    .sidebar-viewer-header {
        padding: 0 20px;
    }

    .sidebar-viewer-body {
        padding: 20px;
    }

    .config-section {
        padding: 16px;
    }

    .palette-preview {
        padding: 8px;
    }

    .color-swatch {
        width: 32px;
        height: 32px;
    }
}

/* site-footer.css */
/**
 * SiteFooter lays out shared branding, navigation, and legal links.
 * Its responsive rows and --site-footer-* tokens support both app themes.
 */
.site-footer {
	padding-block: 38px;
	border-top: 1px solid var(--site-footer-border);
	color: var(--site-footer-text);
	background: var(--site-footer-surface);
}

.site-footer,
.site-footer::before,
.site-footer::after,
.site-footer *,
.site-footer *::before,
.site-footer *::after {
	box-sizing: border-box;
}

.site-footer .site-footer-inner {
	width: min(100%, 1280px);
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-inline: auto;
	padding-inline: 24px;
}

.site-footer nav a,
.site-footer nav a:visited,
.site-footer nav a:focus {
	color: var(--site-footer-text);
	text-decoration: none;
}

.site-footer :focus-visible {
	outline: 3px solid var(--site-footer-focus-outline);
	outline-offset: 4px;
}

.site-footer p {
	margin: 12px 0 0;
	color: var(--site-footer-text-muted);
	font-size: 11px;
}

.site-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	font-size: 13px;
}

.site-footer nav a:hover {
	color: var(--site-footer-accent);
}

@media (min-width: 760px) {
	.site-footer .site-footer-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 640px) {
	.site-footer .site-footer-inner {
		padding-inline: 40px;
	}
}


/* skeleton.css */
/**
 * Skeleton - the shared loading-placeholder primitive. Any element with the
 * .skeleton class becomes a shimmering grey block; a component arranges these
 * into its own loading shape (the data-table builds rows in data-table.css, a
 * card would stack a few lines in its own CSS). Colours come from the
 * --skeleton-* variables; the shimmer is a light band swept across the block
 * by the background-position animation.
 *
 * Honours prefers-reduced-motion: the sweep stops and the block sits flat.
 * Auto-bundled by StyleService.
 */

.skeleton {
    background-color: var(--skeleton-base);
    background-image: linear-gradient(
        90deg,
        var(--skeleton-base) 0%,
        var(--skeleton-highlight) 50%,
        var(--skeleton-base) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    border-radius: 4px;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        background-image: none;
        animation: none;
    }
}

/* smart-filter-bar.css */
/*
 * Smart filter bar - the unified-chip filter UI. Styles the search icon and
 * input, the committed chips, the inline editor, the search dropdown, and the
 * pills, all on one Field: value grammar.
 *
 * Some rules here dress markup that nothing renders today: the cpill / editor-multi
 * / editor-list set belongs to a batch editor that is defined but never called, and
 * the search-add, suggestion-group and chip-tooltip rules style templates the JS
 * never clones. Parked alongside those templates - see the view's header.
 *
 * Pairs with the view at /inc/framework/views/components/smart-filter-bar.php and
 * the behavior in /inc/framework/js/modules/smart-filter-bar.js. Colours come from
 * the smart-filter-bar token block in
 * /inc/framework/config/css/styles/leadthink-app.php (primary = sky, neutral =
 * zinc); this file references only those tokens, never raw hex. Flat throughout -
 * separation is borders and surfaces, focus rides on border-colour, no shadows.
 * Most rules are scoped under .smart-filter-bar; the roots that are not -
 * .filter-input-wrapper, .filter-suggestions, .smart-filter-bar-extras,
 * .subscription-warning-icon, .search-add / .search-add-hint, and the .chip-tooltip
 * trio - are named for this component alone.
 */

/* ---- bar shell ---- */
.smart-filter-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	flex-wrap: wrap;
}

.filter-input-wrapper {
	flex: 1 1 320px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 8px 12px;
	background: var(--smart-filter-bar-surface);
	border: 1px solid var(--smart-filter-bar-border);
	border-radius: 12px;
}
.filter-input-wrapper:focus-within {
	border-color: var(--smart-filter-bar-accent);
}

.smart-filter-bar .filter-icon {
	display: inline-flex;
	align-items: center;
	color: var(--smart-filter-bar-text-muted);
	flex-shrink: 0;
}
.smart-filter-bar .filter-icon svg { width: 17px; height: 17px; display: block; }

.smart-filter-bar .filter-input {
	flex: 1 1 140px;
	min-width: 120px;
	border: none;
	outline: none;
	background: transparent;
	font: inherit;
	color: var(--smart-filter-bar-text);
	padding: 4px 0;
}
.smart-filter-bar .filter-input::placeholder { color: var(--smart-filter-bar-border-hover); }

/* The search field is a plain input at rest and becomes a Search: chip while
   focused, matching the chip grammar used by committed filters. */
.smart-filter-bar .search-chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 160px;
	min-width: 140px;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: 9px;
	box-sizing: border-box;
}
/* Active: hug content from a sensible minimum and grow as the user types
   (width is driven in JS from the hidden sizer below). */
.smart-filter-bar .search-chip.active {
	flex: 0 1 auto;
	background: var(--smart-filter-bar-accent-bg);
	border-color: var(--smart-filter-bar-accent);
}
.smart-filter-bar .search-chip.active .filter-input { flex: 0 0 auto; min-width: 120px; border: 1px solid var(--smart-filter-bar-border-strong); border-radius: 6px; background: var(--smart-filter-bar-surface); padding: 4px 8px; box-sizing: border-box; }
.smart-filter-bar .search-sizer {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	white-space: pre;
	pointer-events: none;
	font: inherit;
}
.smart-filter-bar .search-label,
.smart-filter-bar .search-colon {
	display: none;
	font-size: 14px;
	color: var(--smart-filter-bar-text-muted);
}
.smart-filter-bar .search-chip.active .search-label,
.smart-filter-bar .search-chip.active .search-colon { display: inline; }
.smart-filter-bar .search-chip.active .search-colon { margin-right: 2px; }

.smart-filter-bar-extras {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* ---- committed chip: Field: value ---- */
.smart-filter-bar .chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 7px 7px 12px;
	border-radius: 9px;
	font-size: 14px;
	line-height: 1;
	background: var(--smart-filter-bar-accent-bg);
	border: 1px solid var(--smart-filter-bar-accent-pale);
	color: var(--smart-filter-bar-text);
	white-space: nowrap;
	max-width: 100%;
	cursor: pointer;
}
.smart-filter-bar .chip:hover { border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .chip-field { font-weight: 550; }
.smart-filter-bar .chip-colon { color: var(--smart-filter-bar-text-muted); margin-right: 3px; }
/* Value text truncates with an ellipsis only inside a committed chip, where
   the bar stays compact; dropdown pills render the full label, so the t-pill
   and s-pill emitters size identically with no cutting off. */
.smart-filter-bar .chip-value { font-weight: 450; }
.smart-filter-bar .chip .chip-value {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 24ch;
}
.smart-filter-bar .chip-op { color: var(--smart-filter-bar-text-muted); font-weight: 500; margin-right: 3px; }

/* icon buttons carry explicit colour + a high-specificity hover so the global
   button rule (near-white text, dark hover fill) can't reach them */
.smart-filter-bar .chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	padding: 0;
	margin-left: 2px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--smart-filter-bar-text);
	cursor: pointer;
	flex-shrink: 0;
}
.smart-filter-bar .chip-remove svg { width: 13px; height: 13px; display: block; }
.smart-filter-bar .chip-remove:hover:not([disabled]) {
	background: color-mix(in srgb, var(--smart-filter-bar-text) 9%, transparent);
	color: var(--smart-filter-bar-text);
}

/* ---- inline editor (an open chip) ---- */
.smart-filter-bar .filter-editor {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 7px 5px 12px;
	border-radius: 9px;
	font-size: 14px;
	line-height: 1;
	background: var(--smart-filter-bar-accent-bg);
	border: 1.5px solid var(--smart-filter-bar-accent);
	color: var(--smart-filter-bar-text);
	position: relative;
	flex-wrap: wrap;
	max-width: 100%;
}
.smart-filter-bar .filter-editor .chip-field { font-weight: 550; }
.smart-filter-bar .filter-editor .chip-colon { color: var(--smart-filter-bar-text-muted); margin-right: 2px; }
.smart-filter-bar .editor-body { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.smart-filter-bar .editor-values { display: inline-flex; align-items: center; gap: 6px; }

.smart-filter-bar .editor-number { display: inline-flex; align-items: center; gap: 4px; }
.smart-filter-bar .editor-adorn { color: var(--smart-filter-bar-text-muted); font-weight: 500; }
.smart-filter-bar .editor-adorn:empty { display: none; }
.smart-filter-bar .editor-value {
	font: inherit;
	color: var(--smart-filter-bar-text);
	border: 1px solid var(--smart-filter-bar-border);
	border-radius: 6px;
	padding: 5px 8px;
	background: var(--smart-filter-bar-surface);
	outline: none;
	min-width: 54px;
	width: 110px;
}
.smart-filter-bar .editor-number .editor-value { width: 92px; text-align: right; }
.smart-filter-bar .editor-value:focus { border-color: var(--smart-filter-bar-accent); }

.smart-filter-bar .editor-multi { display: inline-flex; align-items: center; gap: 6px; }
.smart-filter-bar .editor-search-icon { display: inline-flex; color: var(--smart-filter-bar-text-muted); }
.smart-filter-bar .editor-search-icon svg { width: 15px; height: 15px; display: block; }
.smart-filter-bar .editor-search {
	font: inherit;
	color: var(--smart-filter-bar-text);
	border: 1px solid var(--smart-filter-bar-border);
	border-radius: 6px;
	padding: 5px 8px;
	background: var(--smart-filter-bar-surface);
	outline: none;
	width: 160px;
}
.smart-filter-bar .editor-search:focus { border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .editor-count { font-size: 13px; color: var(--smart-filter-bar-text-muted); }
.smart-filter-bar .editor-count.has { color: var(--smart-filter-bar-accent); font-weight: 600; }

/* scrollable checkbox-pill list under the editor row - stacked top to bottom */
.smart-filter-bar .editor-list {
	flex-basis: 100%;
	margin-top: 8px;
	max-height: 220px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
	background: var(--smart-filter-bar-control-bg);
	border: 1px solid var(--smart-filter-bar-border);
	border-radius: 9px;
}
.smart-filter-bar .editor-list::-webkit-scrollbar { width: 10px; }
.smart-filter-bar .editor-list::-webkit-scrollbar-thumb {
	background: var(--smart-filter-bar-scrollbar);
	border-radius: 6px;
	border: 2px solid var(--smart-filter-bar-control-bg);
}
.smart-filter-bar .editor-list::-webkit-scrollbar-thumb:hover { background: var(--smart-filter-bar-scrollbar-hover); }

.smart-filter-bar .editor-save,
.smart-filter-bar .editor-cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}
.smart-filter-bar .editor-save { color: var(--smart-filter-bar-accent); }
.smart-filter-bar .editor-cancel { color: var(--smart-filter-bar-text); }
.smart-filter-bar .editor-save svg,
.smart-filter-bar .editor-cancel svg { width: 15px; height: 15px; display: block; }
.smart-filter-bar .editor-save:hover:not([disabled]) { background: color-mix(in srgb, var(--smart-filter-bar-accent) 12%, transparent); color: var(--smart-filter-bar-accent); }
.smart-filter-bar .editor-cancel:hover:not([disabled]) { background: color-mix(in srgb, var(--smart-filter-bar-text) 9%, transparent); color: var(--smart-filter-bar-text); }

/* inline conflict message (the light-pink "not allowed" line) */
.smart-filter-bar .editor-error {
	display: none;
	flex-basis: 100%;
	margin-top: 7px;
	padding: 7px 10px;
	font-size: 13px;
	border-radius: 7px;
	background: var(--smart-filter-bar-invalid-bg);
	color: var(--smart-filter-bar-invalid-text);
	border: 1px solid var(--smart-filter-bar-invalid-border);
}

/* ---- pills shared: full-width rows so a pill-row / list reads top to bottom ---- */
.smart-filter-bar .cpill,
.smart-filter-bar .t-pill,
.smart-filter-bar .s-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 9px;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.1s ease, background-color 0.1s ease;
}
.smart-filter-bar .cpill .chip-field,
.smart-filter-bar .t-pill .chip-field,
.smart-filter-bar .s-pill .chip-field { font-weight: 550; }
.smart-filter-bar .cpill .chip-colon,
.smart-filter-bar .t-pill .chip-colon,
.smart-filter-bar .s-pill .chip-colon { color: var(--smart-filter-bar-text-muted); margin-right: 2px; }
.smart-filter-bar .cpill .chip-value,
.smart-filter-bar .s-pill .chip-value { font-weight: 450; }
.smart-filter-bar .t-pill,
.smart-filter-bar .s-pill { white-space: nowrap; }
.smart-filter-bar .search-clear {
	display: none;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 2px;
	padding: 0;
	border: none;
	border-radius: 5px;
	background: transparent;
	color: var(--smart-filter-bar-text-muted);
	cursor: pointer;
	flex-shrink: 0;
}
.smart-filter-bar .search-chip.active .search-clear { display: inline-flex; }
.smart-filter-bar .search-clear:hover:not([disabled]) { background: var(--smart-filter-bar-surface-hover); color: var(--smart-filter-bar-text); }
.smart-filter-bar .search-clear svg { width: 13px; height: 13px; display: block; }

/* checkbox pill (search matches + editor options) */
.smart-filter-bar .cpill {
	background: var(--smart-filter-bar-surface);
	border: 1px solid var(--smart-filter-bar-border-strong);
	color: var(--smart-filter-bar-text);
}
.smart-filter-bar .cpill:hover { border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .cpill.on { background: var(--smart-filter-bar-accent-bg); border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .cpill-box {
	width: 16px;
	height: 16px;
	border-radius: 5px;
	border: 1.5px solid var(--smart-filter-bar-border-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--smart-filter-bar-surface);
}
.smart-filter-bar .cpill-box svg { width: 11px; height: 11px; display: none; }
.smart-filter-bar .cpill.on .cpill-box { background: var(--smart-filter-bar-accent); border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .cpill.on .cpill-box svg { display: block; }

/* empty field-template pill (search, no query) */
.smart-filter-bar .t-pill {
	background: var(--smart-filter-bar-surface);
	border: 1px solid var(--smart-filter-bar-border-strong);
	color: var(--smart-filter-bar-text);
}
.smart-filter-bar .t-pill:hover { border-color: var(--smart-filter-bar-accent); background: var(--smart-filter-bar-accent-bg); }
.smart-filter-bar .t-pill .t-ghost { color: var(--smart-filter-bar-text-muted); }

/* single-add match pill (search, typing) */
.smart-filter-bar .s-pill {
	background: var(--smart-filter-bar-surface);
	border: 1px solid var(--smart-filter-bar-border-strong);
	color: var(--smart-filter-bar-text);
}
.smart-filter-bar .s-pill:hover { border-color: var(--smart-filter-bar-accent); background: var(--smart-filter-bar-accent-bg); }
.smart-filter-bar .s-pill.added { background: var(--smart-filter-bar-accent-pale); border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .s-pill.added .chip-field,
.smart-filter-bar .s-pill.added .chip-value { color: var(--smart-filter-bar-accent); }
/* Already on the chip. The tint alone is close enough to the hover state to read
   as one, so the check carries the meaning: this value is selected and clicking
   it again takes it off. Same glyph as the checkbox pill's tick. Reached by the
   Selected section, where every pill is marked, and by RAW search results; scoped
   results exclude selected values, so no marked pill is ever rendered there. */
.smart-filter-bar .s-pill-mark {
	display: none;
	align-items: center;
	color: var(--smart-filter-bar-accent);
	flex-shrink: 0;
}
.smart-filter-bar .s-pill-mark svg { width: 14px; height: 14px; display: block; }
.smart-filter-bar .s-pill.added .s-pill-mark { display: inline-flex; }

.smart-filter-bar .cpill mark,
.smart-filter-bar .s-pill mark {
	background: transparent;
	color: var(--smart-filter-bar-accent);
	font-weight: 700;
}

/* ---- search dropdown ---- */
.filter-suggestions {
	display: none;
	position: fixed;
	z-index: 9000;
	padding: 8px 10px;
	background: var(--smart-filter-bar-surface);
	border: 1px solid var(--smart-filter-bar-border);
	border-radius: 12px;
	max-height: 440px;
	overflow: auto;
}
.filter-suggestions .suggestion-group { margin-bottom: 4px; }
.filter-suggestions .suggestion-group-header {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--smart-filter-bar-text-muted);
	margin: 10px 2px 7px;
}
.filter-suggestions .suggestion-group:first-child .suggestion-group-header { margin-top: 2px; }
/* One pill per row, always: the dropdown reads as a single top-to-bottom list
   in every state, never a side-by-side grid. */
.filter-suggestions .pill-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.search-add { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.smart-filter-bar .search-add-button {
	font: inherit;
	font-weight: 550;
	font-size: 14px;
	color: var(--smart-filter-bar-surface);
	background: var(--smart-filter-bar-accent);
	border: none;
	border-radius: 8px;
	padding: 9px 16px;
	cursor: pointer;
}
.smart-filter-bar .search-add-button[disabled] { background: var(--smart-filter-bar-border-strong); cursor: default; }
.search-add-hint { font-size: 13px; color: var(--smart-filter-bar-text-muted); }
.filter-suggestions .dropdown-msg { width: max-content; max-width: 100%; padding: 6px 6px 2px; font-size: 13px; color: var(--smart-filter-bar-text-muted); }
.filter-suggestions .pill-row + .dropdown-msg { margin-top: 8px; }
.filter-suggestions .dropdown-msg + .pill-row { margin-top: 8px; }

/* ---- failed lookup: the retry beside the failure message ---- */
.smart-filter-bar .dropdown-retry {
	font: inherit;
	font-size: 13px;
	font-weight: 550;
	color: var(--smart-filter-bar-accent);
	background: transparent;
	border: 1px solid var(--smart-filter-bar-border-strong);
	border-radius: 7px;
	margin: 6px 6px 2px;
	padding: 6px 12px;
	cursor: pointer;
}
.smart-filter-bar .dropdown-retry:hover:not([disabled]) {
	border-color: var(--smart-filter-bar-accent);
	background: var(--smart-filter-bar-accent-bg);
	color: var(--smart-filter-bar-accent);
}

/* ---- scoped panel, top half: the Selected section ---- */
/* Separated from the results by its own bottom rule, mirroring the Done footer's top
   one, so the panel reads as selected / results / way-out from top to bottom. The two
   halves hold disjoint sets - a value is in one or the other, never both. */
.filter-suggestions .scoped-selected {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: max-content;
	max-width: 100%;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--smart-filter-bar-border);
}
.filter-suggestions .scoped-selected-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 2px;
}
/* Names the section, so the top half reads as the current selection rather than as
   another list of results. The TEXT token, not the accent one the count beside it
   uses: this is a heading, and the count is the thing meant to catch the eye. Text on
   the dropdown surface is a pair this sheet already ships, so no new one is added. */
.smart-filter-bar .scoped-selected-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--smart-filter-bar-text);
}
.smart-filter-bar .scoped-selected-count {
	font-size: 13px;
	font-weight: 600;
	color: var(--smart-filter-bar-accent);
}
/* A selected value whose display name has not arrived yet. Muted and italic so it
   reads as pending rather than as the value being called "resolving...". */
.smart-filter-bar .s-pill.resolving .chip-value {
	color: var(--smart-filter-bar-text-muted);
	font-style: italic;
}

/* ---- scoped dropdown footer: the way out of chip edit ---- */
.filter-suggestions .scoped-done {
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: 100%;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--smart-filter-bar-border);
}
.smart-filter-bar .scoped-done-button {
	font: inherit;
	font-weight: 550;
	font-size: 13px;
	color: var(--smart-filter-bar-surface);
	background: var(--smart-filter-bar-accent);
	border: none;
	border-radius: 7px;
	padding: 7px 14px;
	cursor: pointer;
	flex-shrink: 0;
}
.smart-filter-bar .scoped-done-button:hover:not([disabled]) {
	background: color-mix(in srgb, var(--smart-filter-bar-accent) 85%, var(--smart-filter-bar-text));
	color: var(--smart-filter-bar-surface);
}

/* ---- trailing controls ---- */
/* The pair is pinned right by margin-left auto, and it has to be: the search chip
   fills the row only while it is at rest, so with the buttons in plain flex flow
   they slide left to sit against the typed text the moment it goes active.
   Wrapping them also keeps the warning icon with the button, since an auto margin
   on each would split the free space between the two and separate them. */
.smart-filter-bar .filter-trailing-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

/* ---- clear all ---- */
.smart-filter-bar .clear-filters {
	display: none;
	font: inherit;
	font-size: 13px;
	color: var(--smart-filter-bar-text-muted);
	background: transparent;
	border: none;
	padding: 6px 8px;
	cursor: pointer;
	flex-shrink: 0;
}
.smart-filter-bar .clear-filters:hover:not([disabled]) { color: var(--smart-filter-bar-text); }

/* ---- incompatible-filter warning ---- */
.subscription-warning-icon {
	display: none;
	align-items: center;
	color: var(--smart-filter-bar-warning-icon);
	flex-shrink: 0;
}
.subscription-warning-icon svg { width: 18px; height: 18px; display: block; }

/* ---- chip tooltip (full value list / long value) ---- */
.chip-tooltip {
	position: absolute;
	z-index: 1001;
	padding: 8px 10px;
	background: var(--smart-filter-bar-tooltip-bg);
	color: var(--smart-filter-bar-surface);
	border-radius: 8px;
	font-size: 13px;
	max-width: 280px;
}
.chip-tooltip-item { padding: 2px 0; }
.chip-tooltip-arrow {
	position: absolute;
	width: 8px;
	height: 8px;
	background: var(--smart-filter-bar-tooltip-bg);
	transform: rotate(45deg);
}

/* ---- narrow screens: the bar wraps, the dropdown spans it ---- */
@media (max-width: 640px) {
	.filter-input-wrapper { flex-basis: 100%; } /* sm 640px and down */
	.filter-suggestions { max-height: 60vh; }
}

/* stats-bar.css */
/* StatsBar owns the responsive definition-list grid for short values and labels. */
.stats-bar {
	color: var(--stats-bar-text);
	background: var(--stats-bar-surface);
}

.stats-bar,
.stats-bar::before,
.stats-bar::after,
.stats-bar *,
.stats-bar *::before,
.stats-bar *::after {
	box-sizing: border-box;
}

.stats-bar dl {
	width: min(100%, 1280px);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 auto;
	padding: 20px 24px;
}

.stats-bar dl > div {
	padding: 22px 10px;
	text-align: center;
}

.stats-bar dl > div:nth-child(odd) {
	border-right: 1px solid var(--stats-bar-border);
}

.stats-bar dl > div:nth-child(-n + 2) {
	border-bottom: 1px solid var(--stats-bar-border);
}

.stats-bar dt {
	font-family: var(--font-headings);
	font-size: clamp(24px, 5vw, 32px);
	font-weight: 900;
	letter-spacing: -0.04em;
}

.stats-bar dd {
	margin: 10px 0 0;
	color: var(--stats-bar-text-muted);
	font-size: 10px;
	line-height: 1.7;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

@media (min-width: 640px) {
	.stats-bar dl {
		padding-inline: 40px;
	}
}

@media (min-width: 1000px) {
	.stats-bar dl {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding-block: 32px;
	}

	.stats-bar dl > div {
		padding-block: 8px;
		border-bottom: 0;
	}

	.stats-bar dl > div + div {
		border-left: 1px solid var(--stats-bar-border);
	}

	.stats-bar dl > div:nth-child(odd) {
		border-right: 0;
	}

	.stats-bar dl > div:nth-child(-n + 2) {
		border-bottom: 0;
	}
}


/* table.css */
/* Table - the app's table PRIMITIVE (Table::render / views/components/table.php).
 *
 * Plain table styling only: a header rule, row separators, a hover, alignment and the
 * sorted-column treatment. No sorting, no pagination, no fetching - those belong to the
 * caller, or to DataTable, which is the PATTERN above this and keeps its own sheet.
 *
 * Reads ONLY its own --table-* tokens (the 'table' block in leadthink-app.php, dark twin in
 * themes/dark.php), never another component's - so restyling DataTable cannot silently move
 * a plain table, and vice versa.
 *
 * Bundled by StyleService's folder crawl.
 */

.table-wrap {
	width: 100%;
}

.table {
	width: 100%;
	border-collapse: collapse;
	color: var(--table-text);
	font-size: 13px;
}

/* Structural, not decorative: it names the table when one is not obvious from the page. */
.table-caption {
	padding-bottom: 8px;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	color: var(--table-text-muted);
}

.table-th {
	padding: 0 8px 6px;
	border-bottom: 1px solid var(--table-border-strong);
	text-align: left;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--table-text-muted);
	white-space: nowrap;
}

.table td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--table-border);
	vertical-align: middle;
}

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

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

/* Numeric columns read against a right edge. Set on both the header and its cells so the
   column lines up, which is the whole point of the alignment. */
.table-right {
	text-align: right;
}

/* A sortable header is a caller-provided LINK - this only makes it look like one. */
.table-sort {
	color: inherit;
	text-decoration: none;
}

.table-sort:hover {
	color: var(--table-accent);
}

/* The live sort column. Which direction is the caller's state, rendered server-side. */
.table-th.is-sorted-asc,
.table-th.is-sorted-desc {
	color: var(--table-accent);
	border-bottom-color: var(--table-accent);
}

/* An empty table renders this instead of a header with nothing under it. */
.table-empty {
	margin: 0;
	padding: 18px 8px;
	color: var(--table-text-muted);
	font-size: 13px;
}


/* tabs.css */
/* Tabs - the shared tab bar (Tabs::render / views/components/tabs.php).
 *
 * Visual/structural only: this styles a row of tabs and which one reads as selected.
 * It carries no APG tab behaviour (no roles, no aria-selected, no keyboard rotation) -
 * see the class docblock.
 *
 * Reads ONLY its own --tabs-* tokens (the 'tabs' block in leadthink-app.php, dark
 * overrides in themes/dark.php), never another component's.
 *
 * Two modifiers, both driven by a real call site:
 *   .tabs-edge-bottom (default) - the active accent sits under the tab, for a bar
 *      above its content.
 *   .tabs-edge-top - the accent sits above the tab, for a bar that sits UNDER its
 *      content (the dev-tools log viewer, whose bar is at the foot of the panel).
 *   .tabs-fill - the tabs share the width equally, rather than sizing to their label.
 *
 * The bar's own background and where it sits on the page belong to the surface that
 * hosts it, not here, so a call site keeps that in its own sheet (via extraClass).
 *
 * Bundled by StyleService's folder crawl for app pages. The log viewer lives in a
 * shadow root, which the app sheet cannot reach, so its own stylesheet @imports this
 * file - keep this file standalone (no dependency on the app sheet's other rules).
 */

.tabs {
	display: flex;
	gap: 4px;
}

.tabs-edge-bottom {
	border-bottom: 2px solid var(--tabs-border);
}

.tabs-edge-top {
	border-top: 1px solid var(--tabs-border);
}

/* A filled bar reads as one segmented control spanning its panel, so its tabs butt together
   rather than sitting as separate pills. */
.tabs-fill {
	gap: 0;
}

.tabs-fill .tabs-tab {
	flex: 1;
}

.tabs-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 16px;
	border: 0;
	background: none;
	color: var(--tabs-text);
	font: inherit;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

/* The active accent rides the edge the bar's modifier names; the inactive tabs carry
   the same transparent border so a tab does not shift when it becomes active. */
.tabs-edge-bottom .tabs-tab {
	border-bottom: 3px solid transparent;
}

.tabs-edge-top .tabs-tab {
	border-top: 2px solid transparent;
}

.tabs-tab:hover {
	color: var(--tabs-text-hover);
}

.tabs-tab.is-active {
	color: var(--tabs-active);
}

.tabs-edge-bottom .tabs-tab.is-active {
	border-bottom-color: var(--tabs-active);
}

.tabs-edge-top .tabs-tab.is-active {
	border-top-color: var(--tabs-active);
}

/* Disabled: a tab whose screen is not built yet. Rendered as inert text (no href, no
   data hook), so this only has to make it LOOK unavailable. */
.tabs-tab.is-disabled {
	color: var(--tabs-text-disabled);
	cursor: default;
}

.tabs-tab.is-disabled:hover {
	color: var(--tabs-text-disabled);
}

.tabs-tab-icon {
	display: inline-flex;
	align-items: center;
}

.tabs-tab-icon svg {
	display: block;
	width: 16px;
	height: 16px;
}



/* ============================================================
   PAGE STYLES
   Page-specific styles and overrides
============================================================ */

/* app.css */
/**
 * Lays out the shared App main region for app, site, and document-only pages.
 * App layout stacks components in the viewport and lets the final child grow.
 * Site layout scrolls normally and keeps short-page footers below the content.
 * App padding is shared with the full-width header; nested layouts belong to components.
 */

:root {
    
    --app-header-height: 64px;
}

body.app-frame > main {
    --app-padding: 12px;

    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--app-padding);
    gap: var(--app-padding);
    height: 100vh;
    overflow: hidden;
}

body.app-frame > main > *:last-child {
    flex: 1;
    min-height: 0;
}

body.app-unframed > main {
    display: block;
    min-height: 100%;
}

body.app-site > main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.app-site > main > .site-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--site-layout-text);
    background: var(--site-layout-surface);
    font-family: var(--font-body);
    overflow-x: clip;
    box-sizing: border-box;
}