@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink: #102a43; --muted: #627d98; --line: #d9e2ec; --paper: #f7f9fc; --panel: #ffffff; --accent: #e4572e; --cyan: #1f9da9; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Space Grotesk', sans-serif; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 86px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: 14px; }.brand-mark { width: 35px; height: 35px; display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid var(--ink); transform: skew(-10deg); }.brand-mark span { display: block; width: 6px; border-radius: 2px; background: var(--cyan); }.brand-mark span:nth-child(1) { height: 10px; }.brand-mark span:nth-child(2) { height: 19px; background: #f2c14e; }.brand-mark span:nth-child(3) { height: 25px; background: var(--accent); }
.eyebrow { margin: 0 0 4px; color: var(--muted); font: 500 10px 'DM Mono', monospace; letter-spacing: .08em; }.topbar h1, h2 { margin: 0; font-size: 21px; letter-spacing: -.03em; }.topbar-meta { display: flex; align-items: center; gap: 9px; color: var(--muted); font: 500 11px 'DM Mono', monospace; text-transform: uppercase; }.live-dot, .pulse { width: 8px; height: 8px; border-radius: 50%; background: #27ae60; box-shadow: 0 0 0 4px #d9f4e3; }.icon-button { margin-left: 18px; width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 4px; font-size: 22px; cursor: pointer; }.icon-button:hover { border-color: var(--ink); }
.content-grid { flex: 1; display: grid; grid-template-columns: 312px minmax(0, 1fr); min-height: 610px; }.control-panel { padding: 38px 31px 24px; background: var(--panel); border-right: 1px solid var(--line); }.metric-block { margin-top: 47px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }.metric-label { display: block; color: var(--muted); font: 500 10px 'DM Mono', monospace; letter-spacing: .08em; }.metric-block strong { display: block; margin: 9px 0 4px; font: 500 31px 'DM Mono', monospace; letter-spacing: -.07em; }.metric-block span:last-child { color: var(--muted); font-size: 12px; }.legend-block { padding: 27px 0; border-bottom: 1px solid var(--line); }.legend-title, .legend-values { display: flex; justify-content: space-between; color: var(--muted); font: 11px 'DM Mono', monospace; }.legend-bar { height: 12px; margin: 13px 0 7px; background: linear-gradient(90deg, #7cd7d5 0%, #2e9fba 25%, #f2c14e 50%, #e47736 70%, #d33d55 87%, #8c2d74 100%); }.legend-note { margin: 17px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }.readout-block { padding: 22px 0; }.readout-row { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; color: var(--muted); font-size: 11px; }.readout-row strong { color: var(--ink); text-align: right; font-weight: 500; }.source-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 27px; padding-top: 18px; border-top: 1px solid var(--line); }.source-icon { padding: 5px 4px; color: #fff; background: var(--ink); font: 500 9px 'DM Mono', monospace; }.source-note p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.map-panel { position: relative; min-height: 610px; overflow: hidden; background: #d6e2e4; }.map-panel #map { position: absolute; inset: 0; }.leaflet-container { background: #d6e2e4; font-family: 'Space Grotesk', sans-serif; }.leaflet-control-zoom { margin: 22px !important; border: 0 !important; box-shadow: 0 2px 12px #102a4326 !important; }.leaflet-control-zoom a { color: var(--ink) !important; border: 0 !important; }.user-location-marker { background: transparent; border: 0; }.user-location-pulse { display: block; width: 18px; height: 18px; border-radius: 50%; background: rgba(31, 157, 169, .18); border: 2px solid #1f9da9; box-shadow: 0 0 0 6px rgba(31, 157, 169, .12); animation: user-location-pulse 2.2s infinite ease-out; }.map-overlay { position: absolute; z-index: 500; background: rgba(255,255,255,.93); box-shadow: 0 2px 12px #102a431c; color: var(--muted); font: 10px 'DM Mono', monospace; }.overlay-top-left { top: 22px; left: 22px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; }.overlay-bottom-right { right: 12px; bottom: 11px; padding: 5px 7px; font-size: 9px; }.pulse { display: inline-block; width: 7px; height: 7px; box-shadow: 0 0 0 3px #d9f4e3; }.map-caption { position: absolute; z-index: 500; bottom: 22px; left: 22px; padding: 12px 15px; background: var(--ink); color: #fff; }.map-caption strong { display: block; font: 500 22px 'DM Mono', monospace; }.map-caption span { color: #9fb3c8; font-size: 10px; }.footer-line { display: flex; justify-content: space-between; gap: 15px; padding: 15px 34px; color: var(--muted); font: 10px 'DM Mono', monospace; }.footer-line a { color: var(--ink); text-decoration: none; }.footer-line a:hover { color: var(--accent); }
@keyframes user-location-pulse { 0% { transform: scale(.7); opacity: 1; } 70% { transform: scale(1.5); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.history-block { padding: 22px 0; border-bottom: 1px solid var(--line); }.history-heading, .timeline-labels { display: flex; justify-content: space-between; align-items: center; }.history-heading > span:last-child, .timeline-labels { color: var(--muted); font: 10px 'DM Mono', monospace; }.history-controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; }.play-button { flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; cursor: pointer; }.play-button:hover { background: var(--accent); }#timeline { width: 100%; accent-color: var(--accent); cursor: pointer; }.timeline-labels { margin: 7px 0 0 40px; font-size: 9px; }
@media (max-width: 760px) { .topbar { height: 74px; padding: 0 18px; }.topbar-meta > span:not(.live-dot) { display: none; }.content-grid { display: flex; flex-direction: column-reverse; min-height: 0; }.map-panel { min-height: 66vh; }.control-panel { border-right: 0; padding: 25px 20px 20px; }.metric-block { margin-top: 28px; }.source-note { margin-top: 12px; }.footer-line { padding: 13px 18px; flex-direction: column; }.map-caption { bottom: 17px; left: 17px; } }