/* Theme rules — dark mode applies via [data-theme="dark"] on . Phase 1: opt-in on replay screen only. Token overrides live in tokens.css. */ /* Cheap fallback for dark Leaflet tiles when CARTO dark_all isn't loaded. Applied only when [data-theme="dark"] AND .leaflet-tile-pane has the `ds-theme-filter` marker (set by theme.js when CARTO swap unavailable). */ [data-theme="dark"] .leaflet-tile-pane.ds-theme-filter { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9); } /* Path-tail halo — light cream halo around colored polylines on light tiles, dark halo on dark tiles. Applied via .ds-path-tail-halo class (1.5px wider). */ .ds-path-tail-halo { stroke: var(--bg-paper); stroke-opacity: 0.85; } /* Health badge shapes (pair with --health-* color via inline style). */ .health-shape { display: inline-block; width: 12px; height: 12px; flex: 0 0 auto; } .health-shape.good { border-radius: 50%; background: var(--health-good); } .health-shape.warn { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(90deg, var(--health-warn) 50%, transparent 50%); border: 1px solid var(--health-warn); } .health-shape.crit { width: 0; height: 0; background: transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--health-crit); } .health-shape.offline { border-radius: 50%; background: transparent; border: 1.5px dashed var(--health-offline); } /* Rep-color swatches reuse-friendly utility */ .rep-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--bg-paper); } .rep-swatch.r1 { background: var(--rep-1); } .rep-swatch.r2 { background: var(--rep-2); } .rep-swatch.r3 { background: var(--rep-3); } .rep-swatch.r4 { background: var(--rep-4); } .rep-swatch.r5 { background: var(--rep-5); } .rep-swatch.r6 { background: var(--rep-6); } /* Theme toggle button (replay header) */ .ds-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 10px; font-size: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg-paper); color: var(--ink); cursor: pointer; } .ds-theme-toggle:hover { background: var(--bg-card); } .ds-theme-toggle .ds-theme-icon { width: 14px; height: 14px; } /* Cluster disc (dashboard, zoom < 12) */ .ds-cluster-mk { pointer-events: auto; } .ds-cluster-mk .ds-cluster-disc { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: #FFFDF9; border: 2px solid #FFFDF9; box-shadow: 0 1px 3px rgba(0,0,0,0.18); cursor: pointer; }