/* Unified visual system — loaded last so every route shares one theme. */

:root,
[data-theme="dark"] {
    --bg-main: #050a12;
    --bg-soft: #091321;
    --surface: rgba(12, 25, 41, .88);
    --surface-strong: #0d1b2c;
    --surface-alt: #08111e;
    --card-bg: rgba(12, 27, 44, .9);
    --card-hover: rgba(22, 48, 72, .9);
    --border: rgba(127, 180, 205, .14);
    --border-strong: rgba(82, 232, 210, .28);
    --text-main: #edf8ff;
    --text-soft: #94aabd;
    --text-faint: #60798d;
    --brand: #56ead5;
    --brand-2: #62a8ff;
    --brand-3: #ffc56d;
    --header-bg: #060d16;
    --input-bg: rgba(5, 15, 26, .82);
    --canvas-bg: #06111f;
    --code-bg: #071424;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .1);
    --shadow-lg: 0 8px 26px rgba(0, 0, 0, .14);
    color-scheme: dark;
}

[data-theme="light"] {
    --bg-main: #f3f7fb;
    --bg-soft: #eaf1f7;
    --surface: rgba(255, 255, 255, .9);
    --surface-strong: #ffffff;
    --surface-alt: #edf4f9;
    --card-bg: rgba(255, 255, 255, .94);
    --card-hover: #eef8f7;
    --border: rgba(64, 91, 114, .14);
    --border-strong: rgba(15, 118, 110, .26);
    --text-main: #132536;
    --text-soft: #516b7f;
    --text-faint: #71879a;
    --brand: #087f73;
    --brand-2: #246fca;
    --brand-3: #9a6b08;
    --header-bg: #ffffff;
    --input-bg: #ffffff;
    --canvas-bg: #f5f9fc;
    --code-bg: #edf3f7;
    --shadow-sm: 0 1px 3px rgba(45, 73, 99, .08);
    --shadow-md: 0 4px 14px rgba(45, 73, 99, .1);
    --shadow-lg: 0 8px 26px rgba(45, 73, 99, .14);
    color-scheme: light;
}

body,
body.home-page,
body.science-workbench-page {
    background: var(--bg-main);
    color: var(--text-main);
}

.header,
.home-page .header,
.science-workbench-page .header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
}

.logo h1,
.home-page .logo h1,
.science-workbench-page .logo h1 {
    color: var(--text-main);
    -webkit-text-fill-color: currentColor;
}

.logo h1 i,
.home-page .logo h1 i,
.science-workbench-page .logo h1 i { color: var(--brand); }

.nav a,
.home-page .nav a,
.science-workbench-page .nav a { color: var(--text-soft); }

.nav a:hover,
.nav a.active,
.home-page .nav a:hover,
.home-page .nav a.active,
.science-workbench-page .nav a:hover,
.science-workbench-page .nav a.active {
    color: var(--text-main);
    background: color-mix(in srgb, var(--brand) 9%, transparent);
    border-color: color-mix(in srgb, var(--brand) 24%, transparent);
}

.left-sidebar,
.home-page .left-sidebar,
.science-workbench-page .left-sidebar,
.home-panel,
.science-panel,
.model-section,
.admin-card,
.section-2,
.section-3,
.data-section,
.about-section,
.resource-card,
.tool-card,
.download-panel {
    color: var(--text-main);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.home-hero,
.science-hero {
    color: var(--text-main);
    background: var(--surface-strong);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.home-hero h1,
.home-panel-heading h2,
.methods-heading h2,
.science-hero h1,
.science-panel h2,
.model-section h2,
.admin-card h2 { color: var(--text-main); }

.home-hero-lead,
.home-panel-heading p:not(.section-kicker),
.science-hero p,
.science-panel-head p,
.model-section p { color: var(--text-soft); }

.home-command-card,
.datasource-card,
.metric-card,
.fc-card,
.model-fact,
.result-item,
.train-card,
.arch-box {
    color: var(--text-main);
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: none;
}

input,
select,
textarea,
.science-field input,
.science-field select {
    color: var(--text-main);
    background: var(--input-bg);
    border-color: var(--border);
}

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

table,
.params-table { color: var(--text-main); }

th,
.params-table th { background: var(--surface-alt); color: var(--text-soft); }

td,
.params-table td { border-color: var(--border); }

code,
pre { background: var(--code-bg); color: var(--text-main); }

.footer,
.home-page .footer {
    color: var(--text-faint);
    background: var(--bg-main);
    border-top-color: var(--border);
}

/* Home and workbench pages used dark literal colors before the shared system. */
[data-theme="light"] .home-command-card strong,
[data-theme="light"] .home-panel-heading h2,
[data-theme="light"] .methods-heading h2,
[data-theme="light"] .telemetry-panel .metric-value,
[data-theme="light"] .science-hero h1,
[data-theme="light"] .science-panel h2,
[data-theme="light"] .result-hero strong,
[data-theme="light"] .model-fact strong { color: var(--text-main); }

[data-theme="light"] .home-map-panel #neMapCanvas {
    filter: saturate(0.92) contrast(1.02);
}

[data-theme="light"] .home-map-panel .map-canvas-wrap {
    background: var(--canvas-bg);
}

[data-theme="light"] .home-primary-action,
[data-theme="light"] .science-button.primary {
    color: #fff;
    background: var(--brand);
}

[data-theme="light"] .home-secondary-action,
[data-theme="light"] .science-button {
    color: var(--text-main);
    background: var(--surface);
    border-color: var(--border);
}

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

/* Shared keyboard navigation and form affordances. */
.skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 10000;
    padding: .75rem 1rem;
    border: 2px solid var(--brand);
    border-radius: 8px;
    color: var(--text-main);
    background: var(--surface-strong);
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}
a, button, input, select, summary { touch-action: manipulation; }
[id] { scroll-margin-top: 7rem; }
.metric-value, .result-value, .science-stat strong { font-variant-numeric: tabular-nums; }
.modal-content { max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; }
h1, h2, h3 { text-wrap: balance; }