/* Shared appearance tokens. The existing component styles retain Dark fallbacks. */
:root {
    --subtle: #97a1af;
    --teal: #4fd1c5;
    --focus-ring: #ff9b68;
    --chart-background: #080b10;
    --chart-grid: #35404e;
    --chart-axis: #a0aaba;
    --chart-zero: #dbe4ef;
    --chart-cursor: #ffffff;
    --map-background: #080b10;
    --map-low: #3575ff;
    --map-middle: #42d6a4;
    --map-high: #ff5b35;
    --map-halo: #080b10;
    --lap-0: #2dd4bf;
    --lap-1: #fbbf24;
    --lap-2: #60a5fa;
    --lap-3: #f472b6;
    --lap-4: #a3e635;
    --lap-5: #fb923c;
    --lap-6: #c084fc;
    --lap-7: #f87171;
    --lap-8: #34d399;
    --lap-9: #38bdf8;
    --lap-10: #fde047;
    --lap-11: #818cf8;
    --disabled-bg: #252c36;
    --disabled-text: #b4bdca;
}

:root[data-theme="bright"] {
    color-scheme: light;
    --page: #edf0f3;
    --surface: #ffffff;
    --surface-2: #e9eef3;
    --surface-3: #f8fafc;
    --panel-fill: #ffffff;
    --panel-shade: #e9eef3;
    --border: #9aa6b5;
    --border-strong: #697b8f;
    --text: #182331;
    --muted: #435267;
    --subtle: #4d5d70;
    --accent: #b9381d;
    --accent-bright: #aa331b;
    --blue: #165da3;
    --green: #096548;
    --amber: #785000;
    --purple: #6a3bb2;
    --teal: #00685f;
    --copy-emphasis: var(--text);
    --copy-secondary: #33455b;
    --copy-info: #165da3;
    --copy-teal: #00665f;
    --copy-positive: #07553c;
    --copy-warning: #765000;
    --copy-warm: #964014;
    --copy-danger: #b42b2b;
    --copy-purple: #6a3bb2;
    --copy-pink: #9a2364;
    --focus-ring: #a82f16;
    --disabled-bg: #dde3e9;
    --disabled-text: #4d5b6c;
    --shadow: 0 6px 20px rgba(30, 45, 65, .09);
    --chart-background: #ffffff;
    --chart-grid: #a2adba;
    --chart-axis: #3d4d60;
    --chart-zero: #455569;
    --chart-cursor: #131d2a;
    --map-background: #eef2f5;
    --map-low: #1456a0;
    --map-middle: #007249;
    --map-high: #b93217;
    --map-halo: #ffffff;
    --lap-0: #006d64;
    --lap-1: #8a4b00;
    --lap-2: #1d4ed8;
    --lap-3: #a21caf;
    --lap-4: #4d6500;
    --lap-5: #c2410c;
    --lap-6: #6d28d9;
    --lap-7: #b91c1c;
    --lap-8: #047857;
    --lap-9: #0369a1;
    --lap-10: #7a5d00;
    --lap-11: #4338ca;
}

.header-field.appearance-field { min-width: 98px; flex: 0 1 108px; }
#appearanceMode { min-height: 38px; font-size: .75rem; font-weight: 750; }
:is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring) !important;
    outline-offset: 3px;
}
input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
:is(button, input, select, textarea):disabled,
#tab-slip button:disabled {
    opacity: 1 !important;
    color: var(--disabled-text) !important;
    background: var(--disabled-bg) !important;
    border-color: var(--border-strong) !important;
    border-style: dashed !important;
    cursor: not-allowed;
    filter: none !important;
}
/* Dark filled coral buttons need dark ink to meet normal-text contrast. */
:root:not([data-theme="bright"]) :is(.master-setup-button, .btn-active, .feedback-submit) { color: #20130e !important; }

[data-theme="bright"] body { background: var(--page) !important; }
[data-theme="bright"] :is(.app-header, .tab-rail, .card) { border-color: var(--border) !important; }
[data-theme="bright"] .app-header { box-shadow: var(--shadow); }
[data-theme="bright"] .tab-btn.tab-active { color: #ffffff !important; background: var(--accent) !important; box-shadow: none; }
[data-theme="bright"] .tab-btn.tab-active .icon { color: #ffffff; }
[data-theme="bright"] .tab-btn:hover:not(.tab-active) { background: var(--surface-2); }
[data-theme="bright"] :is(.text-white, .text-gray-100) { color: var(--text) !important; }
[data-theme="bright"] :is(.text-slate-300, .text-slate-400, .text-slate-500) { color: var(--muted) !important; }
[data-theme="bright"] :is(.text-teal-200, .text-teal-300, .text-teal-400, .text-cyan-300, .text-cyan-400) { color: var(--teal) !important; }
[data-theme="bright"] :is(.text-emerald-200, .text-emerald-300, .text-emerald-400, .text-green-200) { color: var(--green) !important; }
[data-theme="bright"] :is(.text-amber-200, .text-amber-300, .text-amber-400, .text-yellow-200) { color: var(--amber) !important; }
[data-theme="bright"] :is(.text-red-200, .text-rose-300, .text-rose-400) { color: var(--copy-danger) !important; }
[data-theme="bright"] :is(.text-indigo-200, .text-indigo-300, .text-indigo-400, .text-purple-200) { color: var(--purple) !important; }
[data-theme="bright"] :is(.bg-gray-600, .bg-gray-800\/50, .bg-gray-900\/50, .bg-slate-800, .bg-slate-900) { background: var(--surface-2) !important; }
[data-theme="bright"] :is(.bg-blue-900, .bg-indigo-900, .bg-blue-900\/20, .bg-blue-900\/30, .bg-blue-900\/50) { background: #e3edf8 !important; }
[data-theme="bright"] :is(.bg-green-900, .bg-green-900\/20, .bg-green-900\/30, .bg-green-900\/50) { background: #e2f0e9 !important; }
[data-theme="bright"] :is(.bg-red-900, .bg-red-900\/20, .bg-red-900\/30, .bg-red-900\/50) { background: #f9e6e3 !important; }
[data-theme="bright"] :is(.bg-yellow-900, .bg-yellow-900\/20, .bg-yellow-900\/30, .bg-yellow-900\/50) { background: #f6edcf !important; }
[data-theme="bright"] :is(.bg-purple-900, .bg-purple-900\/20, .bg-purple-900\/30, .bg-purple-900\/50) { background: #eee6f7 !important; }
[data-theme="bright"] :is(.master-setup-button, .btn-active, .feedback-submit) { color: #ffffff !important; background: var(--accent) !important; border-color: var(--accent) !important; }
[data-theme="bright"] :is(.bg-purple-600, .bg-indigo-600) { background: #6541b5 !important; }
[data-theme="bright"] .bg-blue-600 { background: #165da3 !important; }
[data-theme="bright"] :is(.bg-green-600, .bg-emerald-600, .bg-teal-600) { background: #096548 !important; }
[data-theme="bright"] .bg-orange-600 { background: #964014 !important; }
[data-theme="bright"] .bg-red-600 { background: #b42b2b !important; }
[data-theme="bright"] :is(.bg-purple-600, .bg-indigo-600, .bg-blue-600, .bg-green-600, .bg-emerald-600, .bg-teal-600, .bg-orange-600, .bg-red-600):not(:disabled),
[data-theme="bright"] :is(.summary-primary-action, .history-edit-actions button[type=submit], .feedback-reminder-actions .primary) { color: #ffffff !important; --copy-emphasis: #ffffff; }
[data-theme="bright"] button[class*="bg-"]:hover { filter: brightness(.93); }
[data-theme="bright"] :is(thead, tbody tr:hover) { background: var(--surface-2); }
[data-theme="bright"] :is(th, td) { border-color: var(--border); }
[data-theme="bright"] :is(.telemetry-chart-shell, .telemetry-delta-chart-shell, .gps-map-empty) { background: var(--chart-background); }
[data-theme="bright"] .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: none; opacity: 1; }
[data-theme="bright"] .maplibregl-ctrl-group { border-color: var(--border-strong); }
.map-layer-legend i { background: linear-gradient(90deg, var(--map-low), var(--map-middle), var(--map-high)); }
[data-theme="bright"] .telemetry-map-marker::before { background: var(--lap-color,#b9381d); border-color: #ffffff; box-shadow: 0 0 0 2px #182331, 0 2px 8px rgba(0,0,0,.3); }
[data-theme="bright"] :is(.tip-infographic-dialog, .tip-infographic-details) { background: var(--surface); border-color: var(--border-strong); }
[data-theme="bright"] :is(.tip-infographic-shell header, .tip-infographic-shell > p) { border-color: var(--border); }
[data-theme="bright"] .tip-visual-trigger { background: var(--surface-2) !important; }
/* Artwork and uploaded maps retain their original pixels, sizing and interaction. */
[data-theme="bright"] #tab-tyres svg text { fill: var(--text); }
[data-theme="bright"] #tab-tyres svg [stroke="#374151"],
[data-theme="bright"] #tab-tyres svg [stroke="#4b5563"] { stroke: var(--border-strong); }
[data-theme="bright"] #tab-tyres svg [fill="#1f2937"],
[data-theme="bright"] #tab-tyres svg [fill="#111827"] { fill: var(--surface-2); }
@media (max-width: 980px) {
    .header-field.appearance-field { flex: 0 1 108px; }
}
@media (max-width: 430px) {
    .header-field.appearance-field { flex: 1 1 98px; }
}
/* Keep the added global control compact within the existing header. */
.header-actions { flex: 1; min-width: 0; }
.brand-mark { --copy-emphasis: #ffffff; }
[data-theme="bright"] :is(.skip-link, .multi-choice-done, .wizard-mode-actions .is-primary, .wizard-load-button, .wizard-next-session-actions button) { color: #ffffff !important; }
[data-theme="bright"] :is(.text-pink-300, .text-pink-400, .text-fuchsia-200, .text-fuchsia-300, .text-fuchsia-400) { color: var(--copy-pink) !important; }
[data-theme="bright"] .text-orange-200 { color: var(--copy-warm) !important; }
[data-theme="bright"] .text-yellow-500 { color: var(--amber) !important; }
[data-theme="bright"] :is(.bg-indigo-900\/30, .bg-fuchsia-900\/30) { background: #eee6f7 !important; }
[data-theme="bright"] :is(.bg-amber-900\/20, .bg-orange-900\/20, .bg-orange-900\/30) { background: #f6edcf !important; }
[data-theme="bright"] :is(.bg-emerald-950\/30, .bg-cyan-900\/30) { background: #e2f0e9 !important; }
[data-theme="bright"] .bg-red-950\/30 { background: #f9e6e3 !important; }
[data-theme="bright"] :is(.bg-cyan-600, .bg-cyan-700) { background: #006579 !important; color: #ffffff !important; }
[data-theme="bright"] :is(.bg-pink-500, .bg-pink-600) { background: #9a2364 !important; color: #ffffff !important; }
[data-theme="bright"] :is(.bg-blue-500, .bg-purple-500, .bg-red-500, .bg-orange-500, .bg-yellow-500, .bg-yellow-600, .bg-green-500, .bg-emerald-500) { color: #182331 !important; }
input::placeholder, textarea::placeholder { color: var(--subtle) !important; }
@media (max-width: 640px) {
    .header-field.appearance-field { flex: 1 1 98px; }
    .header-actions .master-setup-button { width: auto; flex: 1 1 122px; }
}

html[data-theme="bright"] :is(button, input, select, textarea):disabled {
    color: var(--disabled-text) !important;
    background: var(--disabled-bg) !important;
}
/* Existing Dark small labels/actions with measured contrast below AA. */
:root:not([data-theme="bright"]) .bg-blue-900 .text-blue-200 { color: #a8d2ff !important; }
:root:not([data-theme="bright"]) .bg-red-900 .text-red-300 { color: #ffb4a6 !important; }
:root:not([data-theme="bright"]) :is(.skip-link, .bg-orange-600, .bg-yellow-600):not(:disabled) { color: #20130e !important; }