/* ── Theme: Dark (Default) ── */
:root,
[data-theme="dark"] {
    /* Base Backgrounds */
    --bg-color: #0a0a0a;
    --panel-bg: #111111;
    --surface-bg: #1a1a1a;
    --surface-hover: #262626;

    /* Typography */
    --text-primary: #ededed;
    --text-secondary: #a1a1aa;
    --text-muted: #8b8b94;        /* was #71717a — 3.60:1 on surface, below AA */
    --text-inverse: #000000;
    --on-accent: #001622;         /* text/icons drawn ON --accent-color */

    /* Outlines & Borders */
    --border-color: #2e2e2e;
    --border-hover: #404040;
    --border-focus: #525252;

    /* Primary Accent */
    --accent-color: #0ea5e9;
    --accent-hover: #38bdf8;
    --accent-dim: rgba(14, 165, 233, 0.15);

    /* Semantic Colors */
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --color-success: #10b981;

    /* Geometry & Motion */
    --radius: 6px;
    --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Assets */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-arrow-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ededed' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* Glass & Overlays */
    --overlay-bg: rgba(10, 10, 10, 0.85);
    --glass-blur: blur(12px);
}

/* ── Theme: Light ── */
[data-theme="light"] {
    --bg-color: #f4f4f5;
    --panel-bg: #ffffff;
    --surface-bg: #e4e4e7;
    --surface-hover: #d4d4d8;
    --text-primary: #18181b;
    --text-secondary: #52525b;
    --text-muted: #63636b;        /* was #a1a1aa — 2.02:1 on surface, far below AA */
    --text-inverse: #ffffff;
    --border-color: #d4d4d8;
    --border-hover: #a1a1aa;
    --border-focus: #71717a;
    --accent-color: #0369a1;      /* was #0284c7 — 4.10:1, below AA both ways */
    --accent-hover: #075985;
    --on-accent: #ffffff;
    --accent-dim: rgba(2, 132, 199, 0.12);
    --color-error: #dc2626;
    --color-warning: #d97706;
    --color-success: #059669;

    /* Assets */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-arrow-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* Glass & Overlays */
    --overlay-bg: rgba(255, 255, 255, 0.85);
}

.text-warning { color: var(--color-warning) !important; }

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

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    height: 100vh;
}


/* ══════════════════════════════════════════════════════════════════════════
   DOCUMENTATION TYPE SCALE

   The help document had accumulated 21 distinct font sizes across rem and px,
   many differing by hundredths of a rem and several forced with !important.
   Everything below now resolves to one of six steps.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --doc-h2:     1.8rem;     /* section titles                     */
    --doc-h3:     1.15rem;    /* subsection headings                */
    --doc-lead:   1.02rem;    /* opening paragraph of a section     */
    --doc-body:   0.925rem;   /* all running prose                  */
    --doc-small:  0.85rem;    /* asides, captions, secondary detail */
    --doc-micro:  0.72rem;    /* eyebrows, tags, table headers      */
    --doc-nano:   0.68rem;    /* contents chips, list markers       */
    --doc-pico:   0.6rem;     /* uppercase badges and tiny labels   */
    --doc-h2-sm:  1.35rem;    /* section title on narrow viewports  */

    --doc-lh:       1.7;      /* prose                              */
    --doc-lh-tight: 1.35;     /* headings and single-line labels    */
}

/* ── Global Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
    border-left: 1px solid var(--border-color);
}

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

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

#app-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.brand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--panel-bg);
    z-index: 100;
    flex-shrink: 0;
    position: sticky;
    top: 0;
}

.header-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.header-action-btn, .theme-toggle {
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.45rem;
    height: 34px;
    width: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    transition: all var(--transition-fast);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.header-action-btn:hover, .theme-toggle:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: var(--surface-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-dim);
}

.header-action-btn svg, .theme-toggle svg {
    width: 16px;
    height: 16px;
}

.brand {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.action-bar {
    display: flex;
    gap: 0.5rem;
}

.action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem;
    border-radius: var(--radius);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.action-btn svg {
    width: 14px;
    height: 14px;
}

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

.action-btn--danger:hover {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.3);
}

.brand span {
    color: var(--accent-color);
}

.app-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    flex: 1;
    overflow: hidden;
}

.controls-panel {
    background: var(--panel-bg);
    border-right: 1px solid var(--border-color);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* ── Custom Scrollbar for Sidebar ── */
.controls-panel::-webkit-scrollbar {
    width: 4px;
}

.controls-panel::-webkit-scrollbar-track {
    background: transparent;
}

.controls-panel::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    flex: 1;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-section:last-child {
    border-bottom: none;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.page-header h2 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    color: var(--text-primary);
}

.btn-back {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.5rem;
    height: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-back svg {
    width: 14px;
    height: 14px;
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.page-section-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.75rem;
    opacity: 0.8;
}

.page-section-label:first-of-type {
    margin-top: 0;
}

.input-flex-1 {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.control-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem;
    position: relative;
    margin-bottom: 0.25rem;
}

.sidebar-section > .control-group,
.sidebar-section > .c-control-group,
.sidebar-section > .settings-subset,
.sidebar-section > .stats-panel {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.sidebar-section > .control-group:last-child,
.sidebar-section > .c-control-group:last-child,
.sidebar-section > .settings-subset:last-child,
.sidebar-section > .stats-panel:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.sidebar-section > .control-group > label {
    margin-bottom: 0.2rem;
}

label {
    grid-column: 1;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}



input, select, .color-picker-wrapper, .range-enhanced, .dual-range-container, .row-pair, .c-toggle, .secondary-btn, .export-btn, .settings-subset, .image-upload-wrapper, .stats-panel, .view-mode-toggle, .filter-header, .filter-values, .control-group, .c-control-group {
    grid-column: 1 / span 2;
}

input:not([type="range"]), select {
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0 0.75rem;
    height: 36px;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    appearance: none;
}

input:hover, select:hover {
    background-color: var(--surface-hover);
    border-color: var(--border-hover);
}

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

select {
    cursor: pointer;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 16px;
    padding-right: 2.5rem;
}

select:hover {
    background-image: var(--select-arrow-hover);
}

select optgroup {
    background: var(--surface-bg);
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 0.5rem;
}

select option {
    background: var(--panel-bg);
    color: var(--text-primary);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.5rem;
}

/* ── Color Picker Wrapper ── */
.color-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    overflow: hidden;
    grid-column: 1 / span 2;
}

.color-picker-wrapper:hover {
    border-color: var(--border-hover);
}

.color-picker-wrapper:focus-within {
    border-color: var(--accent-color);
}

.color-picker-wrapper input[type="color"] {
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    padding: 0;
    border: none;
    cursor: pointer;
    appearance: none;
    z-index: 1;
}

.color-hex-display {
    position: relative;
    z-index: 2;
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    pointer-events: none;
    text-transform: uppercase;
}

.color-rgb-hint {
    grid-column: 1 / span 2;
    font-family: monospace;
    font-size: 0.7rem;
    color: var(--text-secondary);
    user-select: all;
}

/* ── Control Section (Active Toggle + Sub-elements) ── */
.control-group.section-active {
    border-color: var(--accent-color);
    background: transparent;
}

.control-group.section-active > .toggle-button {
    margin-bottom: 0.75rem;
}

/* ── General Range Slider ── */
.c-range-container {
    position: relative;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0 0.75rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.c-range-container:hover, .c-range-container:focus-within {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.12);
}

.c-range-container .slider-track {
    position: absolute;
    height: 4px;
    width: calc(100% - 1.5rem);
    left: 0.75rem;
    background: var(--border-color);
    border-radius: 2px;
    z-index: 1;
}

input[type="range"].c-range-input {
    position: absolute;
    width: calc(100% - 1.5rem);
    left: 0.75rem;
    background: transparent;
    margin: 0;
    padding: 0;
    height: 36px;
    border: none;
    z-index: 2;
    -webkit-appearance: none;
    --fill: 0%;
}

input[type="range"].c-range-input:focus {
    outline: none;
    box-shadow: none;
}

/* Hide native track so only the custom .slider-track renders */
input[type="range"].c-range-input::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 4px;
    border: none;
}

input[type="range"].c-range-input::-moz-range-track {
    background: transparent;
    height: 4px;
    border: none;
}

input[type="range"].c-range-input::-webkit-slider-thumb {
    height: 18px;
    width: 18px;
    background: var(--accent-color);
    border: 2px solid var(--panel-bg);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border-color);
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

input[type="range"].c-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: var(--accent-hover);
}

input[type="range"].c-range-input::-moz-range-thumb {
    height: 18px;
    width: 18px;
    background: var(--accent-color);
    border: 2px solid var(--panel-bg);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border-color);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

input[type="range"].c-range-input:hover::-moz-range-thumb {
    background: var(--accent-hover);
    transform: scale(1.15);
}

/* ── Enhanced Range Slider (with min/max labels) ── */
.range-enhanced {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.range-enhanced input[type="range"] {
    flex: 1;
    min-width: 0;
}
.range-min, .range-max {
    display: none;
}
.range-value-display {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.75rem;
    font-family: monospace;
    font-weight: 700;
    color: var(--accent-color);
    text-align: right;
}

/* ── Theme Toggle ── */
/* Theme Toggle: handled by .header-action-btn styles above */
/* Dark mode: show sun icon (switch to light), hide moon */
.theme-icon-dark { display: none; }
.theme-icon-light { display: inline-flex; }
/* Light mode: show moon icon (switch to dark), hide sun */
[data-theme="light"] .theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark { display: inline-flex; }

/* ── Formula Hint ── */
.formula-hint {
    font-size: 0.55rem;
    font-family: monospace;
    color: var(--text-muted);
    text-align: center;
    opacity: 0.7;
    margin-top: 0.25rem;
}


/* ── Row Pair (inline fields) ── */
.row-pair {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.row-pair input[type="number"] {
    flex: 1;
    min-width: 0;
}

.row-separator {
    color: var(--text-secondary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.row-color-swatch {
    width: 48px !important;
    height: 34px !important;
    flex-shrink: 0;
    padding: 2px !important;
    border: 1px solid var(--border-color);
    background: var(--surface-bg);
    cursor: pointer;
}



/* ── Outline Settings ── */
.settings-subset {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
}

.settings-subset.hidden {
    display: none !important;
}

#sides-settings {
    display: none;
}

#sides-settings.visible {
    display: flex;
}

/* ── Filter Settings UI ── */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.15rem;
}
.range-delta {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-color);
    font-family: monospace;
}
.header-values {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.range-values {
    font-size: 0.7rem;
    font-family: monospace;
    font-weight: 700;
    color: var(--text-secondary);
}

.filter-values {
    display: none;
}


#outline-color-container {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}



.stats-panel--spaced {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ── UI Sections ── */
.section-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.2;
}

.section-action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0;
    cursor: pointer;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--transition-fast);
    line-height: 1;
    height: auto;
}

.section-action-btn:hover {
    color: var(--accent-color);
}

/* Spacing between multiple titles in the same section */
.sidebar-section > .section-title:not(:first-child) {
    margin-top: 1.25rem;
}

/* ── Config Section Groups (2D / 3D) ── */
.config-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.config-dimmed {
    opacity: 0.35;
    transition: opacity var(--transition-smooth);
}

.config-dimmed .settings-btn {
    pointer-events: auto;
}

.config-active > .config-section-title,
.config-section-title.config-active {
    color: var(--text-primary);
    opacity: 1;
}

/* ── Active Filters Badges ── */
.active-badges-container {
    position: absolute;
    left: 1.5rem;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 50;
    pointer-events: none;
}

.c-badge {
    background-color: var(--overlay-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: all var(--transition-fast);
}

.c-badge-icon {
    color: var(--accent-color);
    width: 14px;
    height: 14px;
}

/* ── Stats Panel (consistent with inputs) ── */
.stats-panel {
    background: transparent;
    padding: 0;
}

.stat-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.stat-row:last-child {
    margin-bottom: 0;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.stat-item label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.c-input--readonly {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--border-color);
    color: var(--accent-color) !important;
    font-family: monospace;
    font-weight: 700;
    cursor: default;
}

.c-input--readonly:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--border-hover);
}

.c-input--readonly:focus {
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

/* ── Tooltip ── */
.tooltip {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.75rem;
    display: flex;
    gap: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    max-width: 280px;
}

.tooltip-chip {
    width: 48px;
    height: 48px;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.tooltip-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.info-row {
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.info-row strong {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.info-row span {
    font-family: monospace;
    color: var(--text-primary);
    text-align: right;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A metric that is undefined for this stimulus (e.g. CCT away from the
   Planckian locus). Shown dimmed so it reads as "not applicable" rather
   than as a measured value. */
.info-row span.is-undefined {
    color: var(--text-secondary);
    opacity: 0.65;
    cursor: help;
}

.info-row--idx {
    padding-bottom: 0.25rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-color);
    justify-content: center;
}

/* ── Buttons ── */
button {
    cursor: pointer;
    border: none;
    border-radius: var(--radius);
    height: 38px;
    padding: 0 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    transition: transform 0.1s, opacity 0.2s, background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    will-change: transform;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button:active {
    transform: scale(0.98);
}

.primary-btn {
    background: var(--accent-color);
    color: var(--text-inverse);
    border: 1px solid var(--accent-color);
    width: 100%;
    display: flex;
}

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

.c-btn-secondary {
    background: var(--surface-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    width: 100%;
    display: flex;
}

.c-btn-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--border-hover);
}

.export-btn {
    width: 100%;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 34px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.export-btn svg {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

.export-btn:hover svg {
    opacity: 1;
}

/* ── Settings Buttons & Badges ── */
.settings-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.settings-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-text-with-icon {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-text-with-icon svg {
    width: 14px;
    height: 14px;
}

.badge {
    background: var(--accent-dim);
    color: var(--accent-color);
    font-size: 0.6rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--accent-color);
}

.mt-auto {
    margin-top: auto;
}

.mt-small {
    margin-top: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

/* ── View Mode Toggle ── */
.view-mode-toggle {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    padding: 2px;
    border-radius: var(--radius);
}

.flex-row { display: flex; flex-direction: row; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 0.5rem; }
.font-bold { font-weight: 700; }
.pt-0 { padding-top: 0 !important; }
.no-border { border: none !important; }
.compact-toggle .c-btn-mode { padding: 0.4rem 0.6rem; font-size: 0.6rem; }

.c-btn-mode {
    background: transparent;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: calc(var(--radius) - 2px);
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
}

.c-btn-mode svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.c-btn-mode:hover:not(.c-btn--active) {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.c-btn--active {
    background: var(--accent-color);
    color: var(--text-inverse);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px var(--accent-dim), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-1px);
}

.c-btn--active svg {
    opacity: 1;
}

.space-toggle {
    grid-template-columns: repeat(4, 1fr);
}

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

.projection-toggle {
    grid-template-columns: repeat(3, 1fr);
}

/* ── Viewport Overlay Controls ── */
.viewport-overlay-controls {
    position: absolute;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--overlay-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    padding: 0.35rem;
    border-radius: var(--radius);
    opacity: 1;
    visibility: visible;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    transition: opacity var(--transition-smooth), visibility var(--transition-smooth), transform var(--transition-smooth);
}

.viewport-overlay-controls.visible {
    opacity: 1;
    visibility: visible;
}

.viewport-main {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: var(--bg-color);
}

.main-view-modes {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: var(--overlay-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    padding: 3px;
}

.main-view-modes .view-mode-toggle {
    border: none;
    background: transparent;
    padding: 0;
}

/* The toolbar sizes each item to its label rather than forcing a 110px grid
   cell, so "Help" no longer occupies as much room as "Analytics". */
.main-view-modes .view-mode-toggle {
    display: flex;
    gap: 2px;
}

.main-view-modes .c-btn-mode {
    padding: 0 0.85rem;
    height: 32px;
    min-width: 0;
    border-radius: 7px;
    font-size: 0.63rem;
    font-weight: 650;
    letter-spacing: 0.055em;
    gap: 0.45rem;
    white-space: nowrap;
}

.main-view-modes .c-btn-mode svg {
    width: 14px;
    height: 14px;
    opacity: 0.65;
}

.main-view-modes .c-btn-mode:hover:not(.c-btn--active) svg { opacity: 0.9; }

/* Active segment: a flat accent fill. The shared .c-btn--active adds a glow
   and a 1px lift, which in a horizontal row knocks the active item out of
   alignment with its neighbours and reads as a floating block. */
.main-view-modes .c-btn--active {
    background: var(--accent-color);
    color: var(--on-accent, var(--text-inverse));
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.main-view-modes .c-btn--active svg { opacity: 1; }


.overlay-zoom {
    bottom: 2rem;
    right: 2rem;
    transform: none;
}

/* Zoom Level Indicator (top-right of 2D view) */
.overlay-zoom-level {
    position: absolute;
    z-index: 100;
    top: 1.25rem;
    right: 1.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--overlay-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
}

.overlay-zoom-level span {
    font-family: monospace;
    font-size: 0.75rem;
}

/* Vertical Zoom Controls */
.sidebar-zoom-controls.vertical {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-zoom-controls.vertical .step-btn {
    width: 32px;
    height: 32px;
    padding: 0;
}

/* ── Canvas Viewport (2D) ── */
.canvas-viewport {
    flex: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-color);
    position: relative;
    cursor: default;
}

#canvas-container {
    background: var(--bg-color);
    border-radius: 0;
    box-shadow: 0 0 100px rgba(0,0,0,0.5);
    line-height: 0;
    border: 1px solid var(--border-color);
    transform-origin: center center;
    will-change: transform;
    position: relative;
}

canvas {
    max-width: none;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

#highlight-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
}

/* ── Dedicated Image Viewport ── */
#viewport-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-color);
    position: relative;
}

#image-viewport-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform-origin: center center;
    will-change: transform;
}

#image-view-canvas {
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
    display: block;
}

.image-empty-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--surface-bg);
    border: 1px dashed var(--border-color);
    border-radius: 0;
    max-width: 420px;
}

.image-empty-placeholder .empty-icon {
    width: 48px;
    height: 48px;
    color: var(--accent-color);
    opacity: 0.8;
}

.image-empty-placeholder .empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.image-empty-placeholder .empty-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ── 3D Viewport ── */
.three-viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-color);
    /* Required for pointer events to work properly on touch devices */
    touch-action: none;
}

.three-viewport canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    will-change: transform;
}

/* WebGL unavailable — applied via JS class (zero-inline policy) */
.webgl-disabled {

.disabled-group {
    opacity: 0.45;
    pointer-events: none;
}
.c-select:disabled {
    cursor: not-allowed;
    background-color: var(--surface-bg);
    border-color: var(--border-color);
}
    opacity: 0.35;
    pointer-events: none;
}

/* ── Zoom Controls ── */
.sidebar-zoom-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 1.5fr;
    gap: 2px;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    padding: 2px;
}

.step-btn {
    background: var(--surface-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.step-btn.small-btn {
    font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: 700;
}

.step-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: var(--surface-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-dim);
}

.step-btn:active {
    transform: translateY(0) scale(0.95);
}

.step-btn.active {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: var(--accent-dim);
    box-shadow: 0 0 8px var(--accent-dim);
}

#btn-toggle-zoom-mouse.active svg,
#btn-toggle-zoom-mouse.active i {
    color: var(--accent-color);
}

#btn-toggle-zoom-mouse.active svg path,
#btn-toggle-zoom-mouse.active svg polygon,
#btn-toggle-zoom-mouse.active i path {
    fill: var(--accent-color);
    stroke: var(--accent-color);
}


/* ── Analytics ── */
.analytics-viewport {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    background: var(--bg-color);
    scroll-behavior: smooth;
}

.analytics-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 1.5rem;
}

.analytics-card {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

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

.analytics-card--sticky {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--panel-bg) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.analytics-card.full-width {
    grid-column: 1 / -1;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.hint-icon {
    width: 12px;
    height: 12px;
    color: var(--text-muted);
    cursor: help;
    transition: color var(--transition-fast);
}

.hint-icon:hover {
    color: var(--accent-color);
}

.card-stats {
    display: flex;
    gap: 0.5rem;
}

.card-stats .stat-item {
    width: 100px; /* Fixed width for alignment in cards */
}

.card-stats .c-input--readonly {
    height: 28px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    text-align: center;
}

.chart-wrapper {
    position: relative;
    width: 100%;
    background: var(--surface-bg);
    border: 1px solid rgba(255,255,255,0.03);
    min-height: 100px;
}

.chart-wrapper canvas {
    width: 100%;
    height: auto;
    display: block;
}

.analytics-crosshair {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--text-primary);
    pointer-events: none;
    z-index: 10;
    display: none;
}

.analytics-tooltip {
    position: fixed;
    pointer-events: none;
    background: rgba(0,0,0,0.95);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    z-index: 2000;
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    font-family: monospace;
    font-size: 0.75rem;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.analytics-tooltip .val { color: var(--accent-color); font-weight: 700; }
.analytics-tooltip .rgb { color: var(--text-secondary); }

/* ── 3D Info Button ── */
.three-info-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--overlay-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.7rem;
    pointer-events: auto !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-smooth);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.three-info-btn:hover {
    background: var(--surface-hover);
    border-color: var(--accent-color);
    box-shadow: 0 0 20px var(--accent-dim), 0 8px 32px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.three-info-btn svg {
    width: 14px;
    height: 14px;
    color: var(--accent-color);
}

/* ── Help Viewport ── */
.help-viewport {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: var(--bg-color);
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
}

.help-viewport p,
.help-viewport li,
.help-viewport dd,
.help-viewport td {
    line-height: var(--doc-lh);
}

.help-container {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    animation: fadeIn 0.4s ease-out;
}

/* Matches .help-container, so the documentation is as wide as its header
   rather than sitting in a narrower column inside it. */
.doc-container-centered {
    max-width: none;
    width: 100%;
    margin: 0;
}

.modal-main-header {
    padding: 2rem 0 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    text-align: center;
    flex-shrink: 0;
    margin-bottom: 2rem;
}

.modal-main-title h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.04em;
}

.modal-main-subtitle {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent-color);
    font-weight: 800;
    opacity: 0.9;
}

.doc-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.doc-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 1rem;
    line-height: var(--doc-lh);
    color: var(--text-secondary);
}

.doc-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-dim);
}

.doc-hint {
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    display: flex;
    gap: 1.25rem;
    background: rgba(255, 255, 255, 0.01);
    transition: transform 0.2s ease;
}

.doc-hint:hover {
    transform: translateX(4px);
}

.doc-hint-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-hint-icon svg {
    width: 20px;
    height: 20px;
}

.doc-hint-content {
    flex: 1;
}

.doc-hint-title {
    font-size: var(--doc-micro);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    display: block;
}

.doc-hint-text {
    font-size: var(--doc-body);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
}

/* Hint Variations */
.doc-hint--misconception {
    border-left: 4px solid #f97316;
    background: rgba(249, 115, 22, 0.03);
}
.doc-hint--misconception .doc-hint-title { color: #fb923c; }
.doc-hint--misconception .doc-hint-icon svg { color: #fb923c; }

.doc-hint--fact {
    border-left: 4px solid #0ea5e9;
    background: rgba(14, 165, 233, 0.03);
}
.doc-hint--fact .doc-hint-title { color: #38bdf8; }
.doc-hint--fact .doc-hint-icon svg { color: #38bdf8; }

.doc-hint--tip {
    border-left: 4px solid #10b981;
    background: rgba(16, 185, 129, 0.03);
}
.doc-hint--tip .doc-hint-title { color: #34d399; }
.doc-hint--tip .doc-hint-icon svg { color: #34d399; }

.doc-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: var(--doc-h2);
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-primary);
    border-left: 4px solid var(--accent-color);
    padding-left: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.doc-section-title svg {
    width: 24px;
    height: 24px;
    color: var(--accent-color);
}

.info-section {
    margin-bottom: 4rem;
}

.doc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 2rem 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.doc-table th {
    background: var(--panel-bg);
    padding: 1rem;
    text-align: left;
    font-size: var(--doc-micro);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.doc-table td {
    padding: 1.25rem 1rem;
    font-size: var(--doc-body);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

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

.doc-table tr:hover td {
    background: rgba(255, 255, 255, 0.01);
}

.feature-doc-item {
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}

.feature-doc-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--accent-dim);
}

.feature-doc-item h3 {
    font-family: 'Outfit', sans-serif;
    font-size: var(--doc-h3);
    margin-bottom: 1rem;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.feature-doc-item h3 svg {
    width: 20px;
    height: 20px;
}

.feature-doc-item p {
    margin-bottom: 0.75rem;
    line-height: var(--doc-lh);
}

.feature-doc-item p strong {
    color: var(--text-secondary);
    font-size: var(--doc-micro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.25rem;
}

.glossary-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem 2rem;
    margin-top: 2rem;
}

.glossary-list dt {
    font-weight: 700;
    color: var(--accent-color);
    font-family: 'Outfit', sans-serif;
    font-size: var(--doc-h3);
}

.glossary-list dd {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--doc-lh);
}

.doc-developer-footer {
    margin-top: 6rem;
    padding-bottom: 6rem;
}

.developer-card {
    padding: 3rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
    text-align: left;
    position: relative;
}

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

.developer-profile-wrapper {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .developer-profile-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }
    
    .developer-info-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .developer-contact {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem !important;
    }
}

.developer-photo {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.developer-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.developer-card:hover .developer-avatar-inner {
    border-color: var(--accent-color);
}

.developer-avatar-inner svg {
    width: 36px;
    height: 36px;
    stroke-width: 1.5;
}

.developer-bio-content {
    flex: 1;
}

.developer-role-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.developer-bio-content h3 {
    margin: 0 0 1rem 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.developer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.dev-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: var(--surface-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.dev-badge:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.bio-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.consulting-box {
    border-left: 2px solid var(--border-color);
    padding-left: 1.5rem;
    margin-top: 1.5rem;
    transition: border-color var(--transition-fast);
}

.developer-card:hover .consulting-box {
    border-left-color: var(--accent-color);
}

.consulting-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.consulting-header svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.consulting-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    font-family: 'Outfit', sans-serif;
}

.consulting-box p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.developer-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.dev-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dev-stat-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--surface-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.dev-stat-icon-wrapper svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.dev-stat-details {
    display: flex;
    flex-direction: column;
}

.dev-stat-val {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dev-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.developer-contact {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary) !important;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
    padding-bottom: 4px;
    transition: color var(--transition-fast);
}

.contact-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--accent-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-link:hover {
    color: var(--text-primary) !important;
}

.contact-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.contact-link svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.contact-link:hover svg {
    color: var(--accent-color);
}

.text-link {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all var(--transition-fast);
}

.text-link:hover {
    border-bottom-color: var(--accent-color);
    opacity: 0.8;
}

.perceptual-note {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(56, 189, 248, 0.1);
    border-left: 3px solid var(--accent-color);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.perceptual-note strong {
    display: block;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-feature-item svg {
    color: var(--accent-color);
    width: 20px;
    height: 20px;
}

.info-feature-item strong {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.info-feature-item span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.help-section h3 {
    font-size: var(--doc-h3);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.help-section h3 svg {
    width: 18px;
    height: 18px;
    color: var(--accent-color);
}

.help-section p {
    font-size: var(--doc-body);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.help-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The marker hangs via absolute positioning rather than being a flex sibling.
   `display: flex` here only worked for items whose entire content was one text
   node — as soon as an item contained <strong>/<em>, each inline element became
   its own flex item and the text broke into narrow columns. */
.help-section li {
    font-size: var(--doc-body);
    line-height: var(--doc-lh);
    position: relative;
    padding-left: 1.4rem;
}

.help-section li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
    font-weight: bold;
}

.help-section strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Documentation Components */
.doc-note {
    background: rgba(56, 189, 248, 0.05);
    border-left: 3px solid var(--accent-color);
    padding: 1.25rem;
    margin: 1.5rem 0;
    font-size: var(--doc-small);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
}

.doc-note strong {
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: var(--doc-micro);
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.5rem;
}

.doc-code-inline {
    font-family: monospace;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    color: var(--accent-hover);
}

.kbd-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: inherit;
    color: var(--text-primary);
    margin: 0 0.2rem;
    box-shadow: 0 1px 0 rgba(0,0,0,0.5);
}

/* Mechanics Components */
.mechanics-visual {
    background: #000;
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.mechanics-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.grad-compare {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.grad-bar {
    height: 12px;
    width: 100%;
}

.grad-rgb {
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.grad-lab {
    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    filter: saturate(0.8) brightness(1.1); /* Mock perceptual adjustments */
}

.stats-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.stat-pill {
    font-family: monospace;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.4rem 0.6rem;
    border-left: 2px solid var(--accent-color);
    border-radius: 2px;
    display: inline-block;
    color: var(--text-primary);
}

/* Color Space Components */
.space-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 2rem 0 3rem 0;
}

.space-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 2rem;
    border-radius: var(--radius);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.space-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-color);
}

.space-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.space-card p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.space-card p:last-child {
    margin-bottom: 0;
}

.perceptual-note {
    background: rgba(56, 189, 248, 0.05);
    border-left: 3px solid var(--accent-color);
    padding: 1rem;
    margin: 1.5rem 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.perceptual-note strong {
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.5rem;
}

/* Algo Cards Refined */
.algo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
}

.algo-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all var(--transition-fast);
}

.algo-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.algo-card strong {
    font-size: 1rem;
    color: var(--text-primary);
}

.algo-card p {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.algo-tag {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
}

.algo-tag--math { background: rgba(56, 189, 248, 0.1); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.2); }
.algo-tag--science { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
.algo-tag--design { background: rgba(167, 139, 250, 0.1); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.2); }
.algo-tag--data { background: rgba(245, 166, 35, 0.1); color: #f5a623; border: 1px solid rgba(245, 166, 35, 0.2); }

/* Credits Card Refined */
.info-credits-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.info-credits-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.info-credits-badge {
    width: 36px;
    height: 36px;
    background: var(--accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}

.info-credits-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.info-credits-role {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.info-credits-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.info-stack-tag {
    font-family: monospace;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: #000;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* Responsive Info Modal */
@media (max-width: 1200px) {
    .algo-grid { grid-template-columns: repeat(2, 1fr); }
    .modal-sidebar { width: 220px; }
}

@media (max-width: 900px) {
    .modal-layout { flex-direction: column; }
    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border-color); padding: 1rem; }
    .modal-nav { flex-direction: row; overflow-x: auto; padding-bottom: 0.5rem; }
    .modal-nav-btn { white-space: nowrap; }
    .modal-sidebar-header, .modal-sidebar-footer { display: none; }
    .info-grid { grid-template-columns: 1fr; gap: 2rem; }
    .algo-grid { grid-template-columns: 1fr; }
    .modal-main-header { padding: 1.5rem; }
    .modal-body-scroll { padding: 1.5rem; }
}


.btn-icon-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
}

.btn-icon-center svg {
    width: 14px;
    height: 14px;
}

svg.lucide {
    stroke-width: 1.5px;
    opacity: 0.65;
    transition: opacity var(--transition-fast);
}

button:hover svg.lucide,
.active svg.lucide,
.mode-btn--active svg.lucide,
.text-link:hover svg.lucide {
    opacity: 1;
}

.help-section h3 svg.lucide {
    opacity: 0.8;
}

.full-width {
    width: 100%;
}

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

#image-preview-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
}

.preview-img-wrapper {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#image-preview {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.image-preview-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.35rem 0.5rem;
    gap: 0.5rem;
}

#image-filename {
    font-size: 0.65rem;
    font-family: monospace;
    color: var(--text-secondary);
    flex: 1;
}

.btn-clear {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    height: auto;
    transition: color var(--transition-fast);
}

.btn-clear:hover {
    color: var(--color-error);
}

.btn-clear svg {
    width: 14px;
    height: 14px;
}

/* Utilities */
.hidden { display: none !important; }
.text-center { text-align: center; }

@media (max-width: 1400px) {
    .algo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .algo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .info-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .info-feature-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .app-container { grid-template-columns: 1fr; }
    .controls-panel { display: none; }
    .info-grid { grid-template-columns: 1fr; gap: 2rem; }
    .algo-grid { grid-template-columns: 1fr; }
    .info-feature-strip { grid-template-columns: repeat(2, 1fr); }
    .info-credits-card { flex-direction: column; align-items: flex-start; }
}





/* Documentation Layout */
/* NOTE: a second .doc-container-centered rule at the top of this file sets the
   documentation to full width. This duplicate previously capped it at 800px and,
   being later in the cascade, won — which is why the docs sat in a narrow column
   inside a much wider header. Kept here only as a marker; do not reintroduce a
   max-width without removing the earlier rule. */

.modal-layout--single {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Enhanced Link Styling */
.text-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-fast);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
}

.text-link:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--accent-hover);
    opacity: 1;
}

.text-link svg {
    margin-right: 0.25rem;
    vertical-align: middle;
}

.info-grid.full-width {
    grid-template-columns: 1fr;
}

/* ── UI Components System (Standardized) ── */

.c-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    width: 100%;
}

.c-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.c-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
}

.c-value {
    font-size: 0.75rem;
    font-family: monospace;
    font-weight: 700;
    color: var(--accent-color);
}

/* Double Range Component */
.c-double-range {
    position: relative;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0 0.75rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.c-double-range:hover, .c-double-range:focus-within {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.2);
}

.c-double-range .slider-track {
    position: absolute;
    height: 4px;
    width: calc(100% - 1.5rem);
    left: 0.75rem;
    background: var(--border-color);
    border-radius: 2px;
    z-index: 1;
}

.c-double-range input[type="range"] {
    position: absolute;
    width: calc(100% - 1.5rem);
    left: 0.75rem;
    background: none;
    pointer-events: none;
    z-index: 2;
    margin: 0;
    -webkit-appearance: none;
    height: 36px;
}

.c-double-range input[type="range"]:focus {
    outline: none;
    box-shadow: none;
}

/* Hide native track so only the custom .slider-track renders */
.c-double-range input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 4px;
    border: none;
}

.c-double-range input[type="range"]::-moz-range-track {
    background: transparent;
    height: 4px;
    border: none;
}

.c-double-range input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border: 2px solid var(--panel-bg);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--border-color);
    transition: background var(--transition-fast), transform var(--transition-fast);
    margin-top: -7px;
}

.c-double-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border: 2px solid var(--panel-bg);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--border-color);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.c-double-range input[type="range"]:hover::-webkit-slider-thumb {
    background: var(--accent-hover);
    transform: scale(1.15);
}

.c-double-range input[type="range"]:hover::-moz-range-thumb {
    background: var(--accent-hover);
    transform: scale(1.15);
}

/* Double Range Header Layout */
.c-double-range-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.c-double-range-header .c-range-total {
    font-size: 0.7rem;
    font-family: monospace;
    font-weight: 700;
    color: var(--accent-color);
}

/* Button Components */
.c-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
    height: 36px;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.c-btn-primary {
    background: var(--accent-color);
    color: white;
}

.c-btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-dim);
}

.c-btn-secondary {
    background: var(--surface-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.c-btn-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--border-hover);
}

.c-btn-ghost {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.c-btn-ghost:hover {
    background: var(--accent-dim);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.c-btn-full {
    width: 100%;
}

/* Toggle Component */
.c-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    width: 100%;
    user-select: none;
}

.c-toggle:hover {
    background: var(--surface-hover);
    border-color: var(--border-hover);
}

.c-toggle.active {
    border-color: var(--accent-color);
    background: var(--accent-dim);
}

.c-toggle-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.c-toggle:hover .c-toggle-label,
.c-toggle.active .c-toggle-label {
    color: var(--text-primary);
}

.c-switch {
    position: relative;
    width: 32px;
    height: 18px;
    background: var(--border-color);
    border-radius: 10px;
    transition: background var(--transition-fast);
}

.c-toggle.active .c-switch {
    background: var(--accent-color);
}

.c-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform var(--transition-fast);
}

.c-toggle.active .c-switch::after {
    transform: translateX(14px);
}

/* Icon Support within Switch */
.c-switch svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    transition: opacity var(--transition-fast);
    stroke-width: 3px;
}

.c-switch .icon-on { opacity: 0; }
.c-switch .icon-off { opacity: 0.6; }

.c-toggle.active .c-switch .icon-on { opacity: 1; }
.c-toggle.active .c-switch .icon-off { opacity: 0; }

/* Input Components */
.c-input, .c-select {
    width: 100%;
    height: 36px;
    padding: 0 0.75rem;
    background-color: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.c-input:hover, .c-select:hover {
    border-color: var(--border-hover);
    background-color: var(--surface-hover);
}

.c-input:focus, .c-select:focus {
    outline: none;
    border-color: var(--accent-color);
}

.c-select {
    appearance: none;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 16px;
    padding-right: 2.5rem;
    cursor: pointer;
}

.c-select:hover {
    background-image: var(--select-arrow-hover);
}

/* ══════════════════════════════════════════════════════════════════════════
   ADDITIONS — guided presets, inline help, accessibility
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Inline hints under controls ────────────────────────────────────────── */
.control-hint {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-muted);
}

.control-hint:empty { display: none; }

/* Keep the info glyph aligned when it sits inside a <label>. */
label > .hint-icon {
    vertical-align: -1px;
    margin-left: 3px;
}

/* ── Simulation state indicator ─────────────────────────────────────────── */
/* When a CVD filter is active the canvas no longer shows true colour.
   Mark the viewport so the state is never mistaken for real output. */
.is-simulating {
    position: relative;
}

.is-simulating::after {
    content: "Vision simulation active — preview only";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(180, 83, 9, 0.94);
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
}

/* ── Getting Started ordered list ───────────────────────────────────────── */
.doc-steps {
    counter-reset: step;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-steps > li {
    counter-increment: step;
    position: relative;
    padding: 12px 14px 12px 44px;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: var(--doc-body);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
}

.doc-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 13px;
    top: 12px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--on-accent, #fff);
    font-size: var(--doc-nano);
    font-weight: 700;
}

.doc-steps > li strong { color: var(--text-primary); }

.doc-list--tight li { margin-bottom: 4px; }

/* ── Accessibility: visible keyboard focus ──────────────────────────────── */
/* The app previously relied on hover affordances only, leaving keyboard
   users with no indication of position. */
.preset-btn:focus-visible,
.c-btn:focus-visible,
.header-action-btn:focus-visible,
.section-action-btn:focus-visible,
.step-btn:focus-visible,
.btn-clear:focus-visible,
.c-toggle:focus-visible,
.c-select:focus-visible,
.c-input:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* ── Respect reduced-motion preferences ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .preset-btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR REFACTOR — collapsible sections, relocated readout, examples modal

   Separation of concern in the sidebar:
     Colour Set          -> what colours exist        (the model)
     Filters & Simulation-> how the set is narrowed   (the model, filtered)
     2D / 3D sections    -> how it is drawn           (presentation)
   Read-only output moved out of the input panel entirely, into the viewport.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Collapsible sections ───────────────────────────────────────────────── */

/* Header row: the toggle and any action button are SIBLINGS. They were
   briefly nested (action button inside the toggle button), which is invalid
   HTML — the browser hoists the inner button out of its parent, which is why
   "Reset" appeared on a row of its own instead of beside the title. */
.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header > .section-title { flex: 1 1 auto; min-width: 0; }

.section-header > .section-action-btn {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 4px;
    height: auto;
}

.section-header > .section-action-btn:hover {
    background: var(--surface-hover);
    color: var(--accent-color);
}

.sidebar-section[data-collapsible] > .section-header > .section-title {
    width: 100%;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    gap: 6px;
    justify-content: flex-start;
    padding: 6px 0;
    margin: 0;
    text-align: left;
    transition: color var(--transition-fast);

    /* The global `button` rule forces a 38px box, which would pad every
       section header with dead vertical space. */
    height: auto;
    min-height: 0;
}

.sidebar-section[data-collapsible] > .section-header > .section-title:hover {
    color: var(--accent-hover);
}

.section-title-text { flex: 1; }

.section-caret {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.sidebar-section.is-open > .section-header > .section-title .section-caret {
    transform: rotate(90deg);
}

/* Collapsed by default; the .is-open class is authoritative so that a
   section renders closed even before JS runs. */
.sidebar-section[data-collapsible] > .section-body {
    display: none;
    padding-top: 2px;
}

.sidebar-section[data-collapsible].is-open > .section-body {
    display: block;
    animation: section-reveal 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes section-reveal {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   VIEW TOOLBAR
   ══════════════════════════════════════════════════════════════════════════ */
.main-view-modes {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR READOUT

   Reports what the Colour Set controls actually produced. Sits directly below
   them and outside the collapsible section, so the requested count and the
   achieved count can be compared without opening anything.
   ══════════════════════════════════════════════════════════════════════════ */
.sidebar-readout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin: 1.5rem 1.5rem;
    background: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.sidebar-readout .readout-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.55rem 0.7rem;
    background: var(--surface-bg);
}

.sidebar-readout .readout-label {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sidebar-readout .readout-val {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.readout-val.text-warning { color: var(--color-warning) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BRAND MARK + CHECKBOX
   ══════════════════════════════════════════════════════════════════════════ */

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.brand-mark {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
}

.brand-mark--lg {
    width: 34px;
    height: 34px;
}

/* ── Startup modal branding ─────────────────────────────────────────────── */
.modal-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.modal-brand-name {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
}

.modal-brand-name span { color: var(--accent-color); }

.modal-brand-tag {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 2px;
}

.modal-head-text { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR VERTICAL RHYTHM

   Spacing inside a section used to come from each child's own margin:
   .control-group gave 4px, .c-control-group 12px, .settings-subset 24px. The
   result was a visibly uneven ladder. The section body now owns the spacing
   with a single gap, and child margins are zeroed so nothing adds to it.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --sidebar-rhythm: 1.15rem; }

.sidebar-section[data-collapsible].is-open > .section-body {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-rhythm);
}

/* Margins would stack on top of the gap. */
.sidebar-section > .section-body > .control-group,
.sidebar-section > .section-body > .c-control-group,
.sidebar-section > .section-body > .stats-panel,
.sidebar-section > .section-body > .settings-subset {
    margin-bottom: 0;
    margin-top: 0;
}

/* Nested groups follow the same rhythm so a subset does not read as a
   different kind of gap from the controls around it. */
.section-body .settings-subset {
    gap: var(--sidebar-rhythm);
}

/* A hint belongs to the control above it, so it sits close rather than at the
   full section rhythm. */
.section-body .control-hint,
.section-body .c-control-group .control-hint {
    margin-top: 6px;
}

/* The section header already carries its own padding; the flex gap on
   .sidebar-section would add a second, larger space beneath it. */
.sidebar-section[data-collapsible] {
    gap: 0.6rem;
}

/* ── Theme fix: double-range track ──────────────────────────────────────── */
/* Was a hard-coded rgba(255,255,255,0.08) overlay, which is invisible against
   the light theme's already-light surface. */
.c-double-range {
    background: var(--surface-bg);
}

/* ══════════════════════════════════════════════════════════════════════════
   PER-CONTROL INFO MODAL

   The ⓘ icons are now <button> elements so they are keyboard-reachable. That
   means the global `button` rule (height: 38px, padding: 0 1rem,
   justify-content: center) applies and has to be reset — the same trap that
   previously broke the example cards, the checkbox and the section headers.
   ══════════════════════════════════════════════════════════════════════════ */
button.hint-icon {
    height: 16px;
    min-height: 0;
    width: 16px;
    padding: 0;
    margin: 0 0 0 4px;
    background: transparent;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: -3px;
    cursor: pointer;
    color: var(--text-muted);
    transition: color var(--transition-fast), background var(--transition-fast);
}

button.hint-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}

button.hint-icon:hover {
    color: var(--on-accent, #fff);
    background: var(--accent-color);
}

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

/* Chart headings are flex rows; keep the icon on the baseline of the title. */
.chart-wrapper h3 button.hint-icon,
h3 button.hint-icon { vertical-align: -2px; }

/* ── Modal shell ────────────────────────────────────────────────────────── */
.info-modal {
    position: fixed;
    inset: 0;
    z-index: 220;              /* above the examples modal */
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--overlay-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.info-modal.hidden { display: none; }

.info-panel {
    width: min(560px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.info-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.info-eyebrow {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 4px;
}

.info-eyebrow.hidden { display: none; }

.info-head h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}

.info-summary {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    font-weight: 500;
}

.info-summary.hidden { display: none; }

.info-body {
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.72;
    color: var(--text-secondary);
}

.info-body p { margin-bottom: 11px; }
.info-body p:last-child { margin-bottom: 0; }
.info-body strong { color: var(--text-primary); font-weight: 600; }
.info-body em { font-style: italic; }

.info-body ul {
    margin: 0 0 11px;
    padding: 0;
    list-style: none;
}

.info-body ul li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 7px;
}

.info-body ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0.65;
}

/* ── Caveat block ───────────────────────────────────────────────────────── */
/* Deliberately distinct: where a measurement stops being valid is the part
   most worth reading, and the part most easily skipped. */
.info-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    padding: 12px 13px;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius);
}

.info-note.hidden { display: none; }

.info-note > svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-warning);
}

.info-note p {
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

.info-foot {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.info-foot .c-btn {
    width: auto;
    flex: 0 0 auto;
    padding: 0 15px;
    font-size: 0.72rem;
}

.info-foot .c-btn svg { width: 13px; height: 13px; }

@media (max-width: 560px) {
    .info-panel { padding: 18px; }
    .info-foot .c-btn { width: 100%; }
}

/* Inline SVG icons used where Lucide has no equivalent (e.g. brand marks).
   Sized to match the Lucide icons alongside them. */
.inline-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONFIRMATION DIALOG
   ══════════════════════════════════════════════════════════════════════════ */
.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 260;              /* above info and examples modals */
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--overlay-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.confirm-modal.hidden { display: none; }

.confirm-panel {
    width: min(430px, 100%);
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.confirm-head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.confirm-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-error) 14%, transparent);
    color: var(--color-error);
}

.confirm-icon svg { width: 16px; height: 16px; }

.confirm-head h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.confirm-desc {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Spelling out what is discarded is the whole reason this replaced confirm(). */
.confirm-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 13px;
    background: var(--surface-bg);
    border-radius: var(--radius);
}

.confirm-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    padding: 3px 0;
}

.confirm-list li svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.confirm-keep {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    font-size: 11.5px;
    color: var(--color-success);
}

.confirm-keep svg { width: 13px; height: 13px; flex-shrink: 0; }

.confirm-foot {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
}

.confirm-foot .c-btn {
    width: auto;
    flex: 0 0 auto;
    padding: 0 16px;
}

/* Destructive action variant. */
.c-btn-danger {
    background: var(--color-error);
    color: #fff;
    border: 1px solid var(--color-error);
}

.c-btn-danger:hover {
    filter: brightness(0.92);
}

.c-btn-danger:focus-visible {
    outline: 2px solid var(--color-error);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .confirm-foot { flex-direction: column-reverse; }
    .confirm-foot .c-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TERM GRID — parallel definitions, stacked

   Each entry is a header row (name + symbol + tag) with the description
   beneath it, at full width. The earlier two-column layout put the
   description in a ~200px track — this block sits inside a half-width grid
   cell, so the text wrapped after two or three words.
   ══════════════════════════════════════════════════════════════════════════ */
.term-grid {
    margin: 1.25rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--border-color);
}

.term-row {
    display: block;
    background: var(--panel-bg);
    padding: 0.9rem 1.05rem;
}

/* Name, symbol and tag share one line and wrap together if space runs out. */
.term-grid dt {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

.term-name {
    font-size: var(--doc-small);
    font-weight: 700;
    color: var(--text-primary);
    line-height: var(--doc-lh-tight);
}

.term-sym {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    font-size: var(--doc-h3);
    font-weight: 400;
    color: var(--accent-color);
    line-height: var(--doc-lh-tight);
}

.term-grid dd {
    margin: 0;
    font-size: var(--doc-small);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
}

.term-grid dd em {
    font-style: italic;
    color: var(--text-primary);
}

.term-tag {
    margin-left: auto;          /* pushes the tag to the end of the header row */
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--accent-dim);
    color: var(--accent-color);
    font-size: var(--doc-pico);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    align-self: center;
}

.term-tag--warn {
    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
    color: var(--color-warning);
}

/* In a narrow cell the tag drops below rather than squeezing the name. */
@media (max-width: 620px) {
    .term-tag { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   USE CASES
   Goal -> steps -> how to read it. The last part carries the caveat, which is
   the part most worth keeping and most easily skipped.
   ══════════════════════════════════════════════════════════════════════════ */
.usecase-group { margin-top: 2rem; }

.usecase-group-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--doc-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

.usecase-group-title svg { width: 15px; height: 15px; }

.usecase {
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.85rem;
}

.usecase h4 {
    font-size: var(--doc-body);
    font-weight: 700;
    color: var(--text-primary);
    line-height: var(--doc-lh-tight);
    margin-bottom: 0.35rem;
}

.usecase-goal {
    font-size: var(--doc-small);
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 0.85rem !important;
}

.usecase-steps {
    margin: 0 0 0.9rem;
    padding-left: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.usecase-steps li {
    font-size: var(--doc-small);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
    padding-left: 0.25rem;
}

.usecase-steps li::marker {
    color: var(--accent-color);
    font-weight: 700;
    font-size: var(--doc-micro);
}

.usecase-steps strong { color: var(--text-primary); font-weight: 600; }

.usecase-read {
    font-size: var(--doc-small);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
    margin: 0 !important;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--border-color);
}

.usecase-read strong { color: var(--text-primary); font-weight: 600; }

/* ── Glossary: two columns on wide panels ───────────────────────────────── */
@media (min-width: 900px) {
    .glossary-list {
        column-count: 2;
        column-gap: 2.5rem;
    }
    .glossary-list dt,
    .glossary-list dd {
        break-inside: avoid;
    }
    /* Keep a term and its definition together across the column break. */
    .glossary-list dt { break-after: avoid; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HELP DOCUMENT — accordions, contents, layered detail
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Contents strip ─────────────────────────────────────────────────────── */
.doc-toc {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 2rem;
    padding: 0.9rem 1rem;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.doc-toc-label {
    font-size: var(--doc-pico);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}

.doc-toc-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.doc-toc-item {
    height: auto;
    min-height: 0;
    padding: 4px 10px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--doc-nano);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

.doc-toc-item:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.doc-toc-item.is-active {
    background: var(--accent-dim);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ── Section accordion ──────────────────────────────────────────────────── */
.info-section[data-doc-section] {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-color);
}

#doc-basics {
    margin-top: 2.5rem;
}

.info-section[data-doc-section]:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

button.doc-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-left: 4px solid var(--accent-color);
    padding-left: 1.5rem;
    border-radius: 0;
    font-family: 'Outfit', sans-serif;
    text-align: left;
    justify-content: flex-start;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

button.doc-section-title:hover { opacity: 0.75; }

.doc-caret {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
    order: 2;                  /* sits after the label, as a disclosure hint */
    margin-left: auto;
}

.info-section[data-doc-section].is-open > .doc-section-title .doc-caret {
    transform: rotate(90deg);
    color: var(--accent-color);
}

button.doc-section-title > svg:not(.doc-caret) {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--accent-color);
}

.doc-section-label {
    font-family: 'Outfit', sans-serif;
    font-size: var(--doc-h2);
    font-weight: 700;
    line-height: var(--doc-lh-tight);
    color: var(--text-primary);
    letter-spacing: 0;
    text-transform: none;
}

.doc-badge {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
    font-size: var(--doc-pico);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.doc-section-body {
    display: none;
    padding-top: 2rem;
}

.info-section[data-doc-section].is-open > .doc-section-body { display: block; }

/* ── Plain-language primer ──────────────────────────────────────────────── */
.doc-lede {
    font-size: var(--doc-body);
    line-height: var(--doc-lh);
    color: var(--text-primary) !important;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem !important;
}

.basics-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.basic {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.basic-num {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--on-accent, #fff);
    font-size: var(--doc-micro);
    font-weight: 700;
    margin-top: 1px;
}

.basic-body { min-width: 0; }

.basic-body h3 {
    font-size: var(--doc-h3);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.55rem;
    line-height: var(--doc-lh-tight);
}

.basic-body p {
    font-size: var(--doc-body);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
    margin-bottom: 0.7rem !important;
}

.basic-body p:last-child { margin-bottom: 0 !important; }

/* "Try it" turns each idea into something the reader can immediately do. */
.basic-try {
    padding: 0.55rem 0.75rem;
    background: var(--surface-bg);
    border-left: 2px solid var(--accent-color);
    border-radius: 0 4px 4px 0;
    font-size: var(--doc-small);
}

.basic-try strong { color: var(--accent-color); }

/* ── Plain-language lead inside technical sections ──────────────────────── */
.plain {
    font-size: var(--doc-body);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
}

/* ── "Technical detail" disclosure ──────────────────────────────────────── */
.tech-detail {
    margin-top: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--surface-bg);
    overflow: hidden;
}

.tech-detail summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    font-size: var(--doc-micro);
    font-weight: 600;
    color: var(--text-secondary);
    list-style: none;
    transition: color var(--transition-fast);
}

.tech-detail summary::-webkit-details-marker { display: none; }
.tech-detail summary:hover { color: var(--accent-color); }

.tech-detail summary svg {
    width: 12px;
    height: 12px;
    color: var(--accent-color);
    transition: transform var(--transition-fast);
}

.tech-detail[open] summary svg { transform: rotate(45deg); }

.tech-detail[open] summary {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.tech-body {
    padding: 0.85rem 0.8rem;
}

.tech-body p {
    font-size: var(--doc-small);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
    margin-bottom: 0.7rem !important;
}

.tech-body p:last-child { margin-bottom: 0 !important; }

@media (max-width: 640px) {
    .doc-toc { flex-direction: column; align-items: stretch; }
    .modal-main-header { flex-direction: column; }
    .doc-tool { width: 100%; }
}

/* ── Always-visible overview ────────────────────────────────────────────── */
/* Orientation rather than reference, so it sits above the contents strip and
   outside the accordion set. */
.doc-intro {
    padding: 2rem 0 0;
}

.doc-intro p {
    font-size: var(--doc-body);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.doc-intro-lead {
    font-size: var(--doc-lead);
    line-height: var(--doc-lh);
    color: var(--text-primary) !important;
}

/* ── Expand/collapse control, now inside the contents strip ─────────────── */
.doc-toc-expand {
    height: auto;
    min-height: 0;
    margin-left: auto;
    padding: 4px 11px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--doc-nano);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.doc-toc-expand:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.doc-toc-expand svg { width: 12px; height: 12px; }

/* The contents strip spans the full documentation width. */
.doc-toc { align-items: center; }

/* Wider measure needs the long-form prose capped for readability, while
   tables, grids and charts keep the full width. */
.doc-section-body > p,
.doc-intro > p,
.doc-lede {
    max-width: 78ch;
}

@media (max-width: 640px) {
    .doc-toc-expand { margin-left: 0; width: 100%; justify-content: center; }
    .doc-section-label { font-size: var(--doc-h2-sm); }
    button.doc-section-title { padding-left: 1rem; border-left-width: 3px; }
    button.doc-section-title > svg:not(.doc-caret) { width: 20px; height: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HELP HEADER + OVERVIEW
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Branded header ─────────────────────────────────────────────────────── */
.doc-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.doc-brand-name {
    font-family: 'Outfit', sans-serif;
    font-size: var(--doc-h3);
    font-weight: 700;
    line-height: var(--doc-lh-tight);
    color: var(--text-primary);
}

.doc-brand-name span { color: var(--accent-color); }

/* ── Overview: two columns at full container width ──────────────────────── */
.doc-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 2.5rem;
    align-items: start;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.doc-intro-main > p {
    font-size: var(--doc-body);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
    margin-bottom: 1rem;
    max-width: 70ch;
}

.doc-intro-main > p:last-child { margin-bottom: 0; }

.doc-intro-lead {
    font-size: var(--doc-lead) !important;
    color: var(--text-primary) !important;
}

/* Assumptions as a scannable key/value block rather than a paragraph — these
   are the facts a reader needs before trusting any number in the app. */
.doc-intro-aside {
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
}

.doc-aside-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--doc-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.9rem;
}

.doc-aside-title svg { width: 13px; height: 13px; }

.doc-assumption-list {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
}

.doc-assumption-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: var(--doc-small);
    line-height: var(--doc-lh-tight);
}

.doc-assumption-list li:last-child { border-bottom: none; }

.doc-assumption-list span { color: var(--text-muted); }

.doc-assumption-list strong {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.doc-aside-note {
    font-size: var(--doc-small);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color);
}

.doc-aside-note em { font-style: italic; color: var(--text-primary); }

@media (max-width: 820px) {
    .doc-intro {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   OVERVIEW — central idea, purpose, benefits
   ══════════════════════════════════════════════════════════════════════════ */
.doc-idea {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem;
    background: var(--accent-dim);
    border-left: 3px solid var(--accent-color);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.doc-idea-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--doc-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.6rem;
}

.doc-idea-title svg { width: 13px; height: 13px; }

.doc-idea p {
    font-size: var(--doc-body);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
    margin: 0;
}

.doc-purpose {
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.doc-block-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--doc-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 1.1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-color);
}

.doc-block-title svg { width: 14px; height: 14px; }

/* ── Purpose: three equal columns ───────────────────────────────────────── */
.purpose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}

.purpose-item h4 {
    font-size: var(--doc-body);
    font-weight: 700;
    line-height: var(--doc-lh-tight);
    color: var(--text-primary);
    margin-bottom: 0.45rem;
}

.purpose-item p {
    font-size: var(--doc-small);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
    margin: 0;
}

/* ── Benefits: icon + label + description ───────────────────────────────── */
.benefit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem 2rem;
}

.benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.benefit-list > li > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-color);
}

.benefit-list strong {
    display: block;
    font-size: var(--doc-body);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.benefit-list div {
    font-size: var(--doc-small);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
}

.benefit-list em { font-style: italic; color: var(--text-primary); }

/* ── Use-case caveat ────────────────────────────────────────────────────── */
/* Single column, one point per row. This is where a method stops being
   trustworthy — the part a reader is most likely to skip — so the terms that
   carry the warning are set in the page's strongest weight. */
.usecase-caveat {
    margin: 0.9rem 0 0 !important;
    padding: 0.85rem 0.95rem;
    background: color-mix(in srgb, var(--color-warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning) 32%, transparent);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius);
}

.caveat-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--doc-micro);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-warning);
    margin-bottom: 0.65rem;
}

.caveat-title svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.caveat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;   /* one point per row, never side by side */
    gap: 0.5rem;
}

.caveat-list li {
    position: relative;
    padding-left: 0.95rem;
    font-size: var(--doc-small);
    line-height: var(--doc-lh);
    color: var(--text-secondary);
}

.caveat-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-warning);
}

/* The load-bearing phrases, not decoration. */
.caveat-list strong {
    color: var(--text-primary);
    font-weight: 700;
}

.caveat-list em { font-style: italic; color: var(--text-primary); }

/* Used where the caveat contradicts a claim a reader may already believe. */
.usecase-caveat--strong {
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-error) 32%, transparent);
    border-left-color: var(--color-error);
}

.usecase-caveat--strong .caveat-title { color: var(--color-error); }
.usecase-caveat--strong .caveat-list li::before { background: var(--color-error); }

@media (max-width: 820px) {
    .benefit-list { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STARTUP MODAL

   Rendered visible in the markup rather than toggled on by JS. The app builds
   its first grid and boots WebGL during load; gating that behind the panel
   from the very first paint avoids a flash of half-drawn viewport.
   ══════════════════════════════════════════════════════════════════════════ */
.startup-modal {
    position: fixed;
    inset: 0;
    z-index: 400;              /* above every other surface, including confirm */
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background: var(--overlay-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.startup-modal.hidden { display: none; }

/* Dismissal fades the whole overlay rather than snapping it away, so the
   viewport underneath is not revealed as a hard cut. */
.startup-modal.is-leaving {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.startup-panel {
    width: min(560px, 100%);
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 30px 30px 24px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
    animation: startup-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes startup-rise {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.brand-mark--xl {
    width: 46px;
    height: 46px;
}

/* ── Head ── */
.startup-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border-color);
}

.startup-head .brand-mark--xl { margin-bottom: 12px; }

.startup-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}

.startup-name span { color: var(--accent-color); }

.startup-tagline {
    max-width: 34ch;
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* ── Intro copy ── */
.startup-lede {
    margin: 20px 0 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ── Feature points ── */
.startup-points {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.startup-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.startup-point-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--accent-dim);
    color: var(--accent-color);
}

.startup-point-icon svg { width: 15px; height: 15px; }

.startup-points strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.startup-points div {
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* ── Foot ── */
.startup-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}

.startup-version {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.startup-foot .c-btn {
    width: auto;
    flex: 0 0 auto;
    padding: 0 18px;
    gap: 7px;
}

.startup-foot .c-btn svg { width: 15px; height: 15px; }

@media (max-width: 560px) {
    .startup-modal { padding: 14px; place-items: start center; }
    .startup-panel { padding: 24px 20px 20px; }
    .startup-name { font-size: 1.4rem; }
    .startup-foot { flex-direction: column-reverse; align-items: stretch; }
    .startup-foot .c-btn { width: 100%; }
    .startup-version { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .startup-panel { animation: none; }
    .startup-modal.is-leaving { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ICC / COLOUR MANAGEMENT SECTION
   ══════════════════════════════════════════════════════════════════════════ */

/* The conversion chain reads as a sequence, so it is an ordered list with a
   connecting rule rather than a row of disconnected boxes. */
.icc-pipeline {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.icc-pipeline li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 0 16px 0;
}

.icc-pipeline li:last-child { padding-bottom: 0; }

/* Connector drawn behind the numbered markers. */
.icc-pipeline li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 26px;
    bottom: 2px;
    width: 1px;
    background: var(--border-color);
}

.icc-step-num {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--accent-dim);
    border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
    color: var(--accent-color);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.icc-pipeline li > div {
    padding-top: 2px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.icc-pipeline li strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1px;
}

/* ── Before/after value example ── */
.icc-example {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin: 16px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-bg);
}

.icc-example-cell {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.icc-example-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.icc-example-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    background: none;
    padding: 0;
}

/* The second value is the one that differs, so it carries the accent. */
.icc-example-cell:last-of-type .icc-example-val { color: var(--accent-color); }

.icc-example-arrow {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--text-muted);
}

.icc-example-arrow svg { width: 16px; height: 16px; }

.icc-example-note {
    margin: 8px 0 0;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-muted);
}

@media (max-width: 560px) {
    .icc-example { flex-direction: column; gap: 10px; }
    .icc-example-arrow { transform: rotate(90deg); }
}
    padding: 10px 12px;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
}