html, body { height: 100%; margin: 0; font: 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; color: #143346; }
body { display: grid; grid-template-rows: 62px 1fr; background: #e9f0f2; }
header { align-items: center; background: linear-gradient(100deg, #0c3346, #115c68); color: white; display: flex; justify-content: space-between; padding: 0 26px; position: relative; z-index: 1100; }
.brand { display: grid; gap: 1px; }
.brand strong { font-size: 16px; letter-spacing: -.01em; }
.brand span, #status { color: #c9e0e4; font-size: 12px; }
#application-version { font-size: 10px; font-weight: 500; opacity: .8; }
.live-status { align-items: center; display: flex; gap: 7px; }
.live-status i, #coverage i { background: #52d89d; border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
main, #map { height: 100%; min-height: 0; } main { position: relative; }
#map-title { backdrop-filter: blur(8px); background: #fbffffe6; border: 1px solid #d6e5e9; border-radius: 9px; box-shadow: 0 5px 18px #10314220; box-sizing: border-box; display: grid; left: 20px; padding: 10px 13px; position: fixed; top: 80px; width: 214px; z-index: 900; }
.map-mode-line { align-items: center; display: flex; gap: 7px; } #map-mode { color: #164859; font-size: 13px; font-weight: 750; } #map-updated { color: #637d88; font-size: 11px; margin-top: 1px; }
#map-status-dot { background: #52d89d; border-radius: 50%; flex: 0 0 auto; height: 8px; width: 8px; } #map-status-dot.is-loading, #map-status-dot.is-delayed { background: #f4a53d; } #map-status-dot.is-error { background: #df5a4c; }
#basemap-switcher { background: #edf3f5; border-radius: 7px; display: grid; gap: 3px; grid-template-columns: 1fr 1fr; margin-top: 9px; padding: 3px; }
#basemap-switcher button { font-size: 11px; padding: 5px 4px; }
#timeline-panel { backdrop-filter: blur(12px); background: #fffffff5; border: 1px solid #d8e5e8; border-radius: 14px; bottom: 22px; box-shadow: 0 14px 34px #10314229; left: 50%; padding: 10px; position: fixed; transform: translateX(-50%); width: min(390px, calc(100% - 180px)); z-index: 1000; }
.timeline-heading { align-items: baseline; color: #62808d; display: flex; font-size: 10px; font-weight: 800; justify-content: space-between; letter-spacing: .1em; margin: 10px 2px 3px; text-transform: uppercase; }
#timeline-time { color: #225467; font-size: 11px; letter-spacing: 0; text-transform: none; }
#timeline-slider { accent-color: #0b8499; cursor: pointer; display: block; margin: 0; width: 100%; }
#timeline-slider:disabled { cursor: default; opacity: .45; }
.timeline-scale { color: #7b929c; display: flex; font-size: 10px; justify-content: space-between; margin: -1px 2px 0; }
#timeline-panel #custom-period { margin-top: 8px; }
#panel { background: #fffffff5; backdrop-filter: blur(12px); border: 1px solid #d8e5e8; border-radius: 16px; box-shadow: 0 18px 42px #10314229; max-width: 356px; padding: 20px; position: fixed; right: 22px; top: 82px; width: calc(100% - 80px); z-index: 1000; }
.panel-heading, .section-heading { align-items: center; display: flex; justify-content: space-between; }
.panel-heading { margin-bottom: 13px; }.panel-heading h1 { font-size: 20px; letter-spacing: -.04em; line-height: 1.1; margin: 3px 0 0; }
.eyebrow, .section-label { color: #62808d; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
#coverage-badge, #point-status { background: #e5f6ed; border-radius: 999px; color: #19704d; font-size: 10px; font-weight: 750; padding: 4px 7px; }
#point-status { background: #edf4f6; color: #61808e; font-weight: 650; }
#place-search { display: grid; grid-template-columns: 1fr auto; }
.place-search-wrap { margin: 0 0 8px; position: relative; z-index: 1100; }
#place-search input { border: 1px solid #d5e2e6; border-radius: 8px 0 0 8px; color: #234654; font: inherit; min-width: 0; padding: 8px 10px; }
#place-search button, #custom-period button { background: #0c7184; border-radius: 0 8px 8px 0; color: white; padding: 7px 11px; }
#search-results { background: #fffffff5; border-radius: 0 0 8px 8px; box-shadow: 0 9px 16px #14334624; color: #667f8b; display: grid; font-size: 12px; gap: 3px; left: 0; max-height: 170px; overflow: auto; position: absolute; right: 0; top: 39px; }
#search-results:empty { display: none; } #search-results:not(:empty) { border: 1px solid #d5e2e6; padding: 4px; }
#search-results button { background: #f5f9fa; border-radius: 6px; overflow: hidden; padding: 7px 8px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
#custom-period { align-items: center; color: #627e89; display: grid; font-size: 11px; gap: 6px; grid-template-columns: auto 44px auto auto; margin: 8px 0 0; }
#custom-period input { border: 1px solid #d5e2e6; border-radius: 6px; font: inherit; padding: 5px; text-align: center; }
#custom-period button { border-radius: 6px; font-size: 11px; padding: 5px 8px; }
#daily-history { border: 1px solid #d5e2e6; font-size: 11px; margin-top: 8px; padding: 5px 8px; }
#daily-history.active { background: #e9f7f5; border-color: #a8d8d4; color: #08778b; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }
#periods { background: #edf3f5; border-radius: 9px; display: grid; gap: 3px; grid-template-columns: repeat(4, 1fr); padding: 3px; }
button { background: transparent; border: 0; border-radius: 7px; color: #486270; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 3px; }
button:hover { background: #ffffffaa; } button.active { background: #fff; box-shadow: 0 1px 4px #11344b1a; color: #08778b; }
.muted { color: #66808d; font-size: 12px; }
#coverage { align-items: center; display: flex; gap: 6px; margin: 10px 0 15px; }.warn { background: #f4a53d !important; }
.location-card { border-bottom: 1px solid #e4edef; border-top: 1px solid #e4edef; margin: 0 -20px 17px; min-height: 113px; padding: 15px 20px; }
#summary { font-size: 14px; font-weight: 650; line-height: 1.45; margin: 5px 0 2px; min-height: 20px; }
#place-name { line-height: 1.35; margin: 0 0 11px; min-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#metrics { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
#metrics[hidden] { display: none; }
#metrics div { background: linear-gradient(135deg, #e9f7f5, #f4f9fa); border-radius: 9px; padding: 8px 9px; }
#metrics.is-pending div { background: #f2f6f7; } #metrics.is-pending strong { color: #9aafb8; }
#metrics span { color: #69838f; display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; }
#metrics strong { color: #0f4f60; display: block; font-size: 16px; letter-spacing: -.02em; margin-top: 2px; }
.chart-heading { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 6px; }
#chart { background: #f7fafb; border: 1px solid #e0eaee; border-radius: 9px; display: block; height: 132px; width: 100%; }
#chart text { fill: #718795; font-family: inherit; font-size: 9px; }
#legend { align-items: center; color: #607986; display: grid; font-size: 10px; gap: 7px; grid-template-columns: auto auto 1fr auto; margin-top: 13px; }
#legend div { display: grid; } #legend span { color: #3a5b69; font-size: 10px; font-weight: 800; text-transform: uppercase; } #legend small { color: #8096a0; font-size: 9px; }
#legend b { color: #78909b; font-size: 9px; font-weight: 650; } #legend .scale { background: linear-gradient(90deg, #66ccff, #00b46e, #a9d200, #ffdd00, #ff8200, #e6461e, #be2332, #a51955); border-radius: 99px; height: 7px; }
.source-note { color: #8196a0; font-size: 10px; margin: 10px 0 0; text-align: right; }
.leaflet-control-zoom a { border: 0 !important; color: #245466 !important; }.leaflet-control-zoom { border: 1px solid #d6e5e9 !important; box-shadow: 0 4px 14px #10314220 !important; }
.selection-pin { background: rgb(255 255 255 / .38); border: 3px solid #0b8499; border-radius: 50%; box-shadow: 0 2px 8px #0a3a4a77; box-sizing: border-box; height: 28px !important; width: 28px !important; }
.selection-pin span { background: #0b8499; border-radius: 50%; display: block; height: 8px; margin: 7px; width: 8px; }
#map, .leaflet-container, .leaflet-grab, .leaflet-dragging .leaflet-grab { cursor: crosshair !important; }
@media (max-width: 640px) { body { grid-template-rows: 56px 1fr; } header { padding: 0 15px; } #status { max-width: 150px; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; } #map-title { left: 12px; top: 68px; width: 196px; } #timeline-panel { bottom: auto; left: 12px; right: 12px; transform: none; top: 130px; width: auto; } #panel { border-radius: 15px 15px 0 0; bottom: 0; max-height: calc(100dvh - 74px); max-width: none; overflow-y: auto; padding: 15px; right: 0; top: auto; width: calc(100% - 30px); } .panel-heading h1 { font-size: 18px; } .location-card { margin-left: -15px; margin-right: -15px; min-height: 104px; padding-left: 15px; padding-right: 15px; } #chart { height: 104px; } .source-note, #legend { display: none; } }