/* Variables live on :root (not .viz-root) so ancestors like can see them too -- custom properties only inherit downward, and body is an ancestor of .viz-root, not a descendant. */ :root { color-scheme: light; --surface-1: #fcfcfb; --page: #f9f9f7; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; --gridline: #e1e0d9; --table-border: #d8d7cf; --baseline: #c3c2b7; --stbd: #2a78d6; --port: #eb6834; --series-2: #1baf7a; --border: rgba(11,11,11,0.10); --tooltip-bg: #0b0b0b; --tooltip-text: #fcfcfb; --chip-bg: #f0efec; --chip-bg-active: #0b0b0b; --chip-text-active: #ffffff; --link: #2a78d6; /* Sequential 6-step ramps for overlaying multiple TWS bands on one chart, one ramp per tack hue (stbd=blue, port=orange -- the next categorical slot, per the dataviz skill's guidance for a second simultaneous sequential context). Mixed toward --surface-1 (low band, "recedes") and --text-primary (high band, "strongest") rather than literal white/black, so the ramp's anchor direction flips correctly in dark mode automatically -- both tokens already do that themselves. Six even steps (matching six TWS bands) symmetric around the base hue, rather than anchoring one step to it exactly. */ --stbd-band-0: color-mix(in oklch, var(--stbd) 55%, var(--surface-1)); --stbd-band-1: color-mix(in oklch, var(--stbd) 73%, var(--surface-1)); --stbd-band-2: color-mix(in oklch, var(--stbd) 91%, var(--surface-1)); --stbd-band-3: color-mix(in oklch, var(--stbd) 91%, var(--text-primary)); --stbd-band-4: color-mix(in oklch, var(--stbd) 73%, var(--text-primary)); --stbd-band-5: color-mix(in oklch, var(--stbd) 55%, var(--text-primary)); --port-band-0: color-mix(in oklch, var(--port) 55%, var(--surface-1)); --port-band-1: color-mix(in oklch, var(--port) 73%, var(--surface-1)); --port-band-2: color-mix(in oklch, var(--port) 91%, var(--surface-1)); --port-band-3: color-mix(in oklch, var(--port) 91%, var(--text-primary)); --port-band-4: color-mix(in oklch, var(--port) 73%, var(--text-primary)); --port-band-5: color-mix(in oklch, var(--port) 55%, var(--text-primary)); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --surface-1: #1a1a19; --page: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --gridline: #2c2c2a; --table-border: #3a3a37; --baseline: #383835; --stbd: #3987e5; --port: #d95926; --series-2: #199e70; --border: rgba(255,255,255,0.10); --tooltip-bg: #fcfcfb; --tooltip-text: #0b0b0b; --chip-bg: #262623; --chip-bg-active: #ffffff; --chip-text-active: #0b0b0b; --link: #3987e5; } } /* Explicit user choice (theme.js), wins over OS preference either way */ :root[data-theme="dark"] { color-scheme: dark; --surface-1: #1a1a19; --page: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --gridline: #2c2c2a; --table-border: #3a3a37; --baseline: #383835; --stbd: #3987e5; --port: #d95926; --series-2: #199e70; --border: rgba(255,255,255,0.10); --tooltip-bg: #fcfcfb; --tooltip-text: #0b0b0b; --chip-bg: #262623; --chip-bg-active: #ffffff; --chip-text-active: #0b0b0b; --link: #3987e5; } * { box-sizing: border-box; } body { margin: 0; background: var(--page); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text-primary); } .viz-root { padding: 32px; max-width: 1040px; margin: 0 auto; } h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; } .header-sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 16px; } nav.tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--gridline); } nav.tabs a { font-size: 13px; padding: 9px 16px; text-decoration: none; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; } nav.tabs a.active { color: var(--text-primary); border-bottom-color: var(--stbd); font-weight: 600; } .theme-toggle { margin-left: auto; margin-bottom: 9px; font-size: 12px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--chip-bg); color: var(--text-secondary); cursor: pointer; font-family: inherit; } .theme-toggle:hover { background: var(--gridline); color: var(--text-primary); } .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 28px 32px; margin-bottom: 20px; } .card h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; } .card .subtitle { font-size: 13px; color: var(--text-secondary); margin: 0 0 18px; } .filterbar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .filterbar select { font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--chip-bg); color: var(--text-primary); font-family: inherit; } .filterbar select:disabled { opacity: 0.5; } .filterbar select#fb-trip { max-width: 320px; } .chips { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .chip { font-size: 13px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--chip-bg); color: var(--text-primary); cursor: pointer; font-family: inherit; } .chip.active { background: var(--chip-bg-active); color: var(--chip-text-active); border-color: transparent; } /* Scoped to our own charts, not "svg" globally -- Leaflet manages its own internal