:root { color-scheme: light; font-family: system-ui, sans-serif; color: #172033; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; }
main { width: min(1180px, 100%); margin: 0 auto; padding: 1rem; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
h1 { font-size: 1.25rem; margin: 0; }
button { border: 1px solid #b7c2d5; background: white; color: #172033; padding: .45rem .8rem; border-radius: .35rem; cursor: pointer; }
button.active { background: #1849a9; color: white; border-color: #1849a9; }
.controls { margin: 1rem 0 .4rem; }
.time-picker { display: flex; flex-wrap: wrap; align-items: end; gap: .55rem; }
.time-picker label { display: grid; gap: .2rem; font-size: .8rem; color: #536176; }
input[type="date"], input[type="time"] { border: 1px solid #b7c2d5; border-radius: .35rem; padding: .42rem .5rem; color: #172033; background: white; font: inherit; }
#time-label { display: block; margin-top: .55rem; font-size: .85rem; color: #536176; }
#status, #marker-scale { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: #536176; min-height: 1.2em; }
#map { height: min(75vh, 760px); min-height: 430px; border: 1px solid #d5dce8; border-radius: .5rem; overflow: hidden; background: #e6ebf3; }
.measurement-popup dl { display: grid; grid-template-columns: auto auto; gap: .25rem .8rem; margin: .25rem 0 0; }
.measurement-popup dd { margin: 0; font-weight: 600; }
.history { margin-top: .7rem; font-size: .75rem; color: #536176; }
.history strong, .history span { display: block; }
.chart-legend { display: flex; gap: .65rem; margin-top: .2rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.chart-legend i { width: .7rem; height: .18rem; border-radius: 1rem; }
.history svg { display: block; width: 280px; max-width: 100%; height: 132px; margin: .25rem 0; background: #f7f9fc; border-radius: .2rem; }
.history .chart-grid { stroke: #d5dce8; stroke-width: 1; stroke-dasharray: 2 2; }
.history .chart-label { fill: #667085; font-size: 9px; font-family: system-ui, sans-serif; }
.stale { color: #a04b00; font-weight: 700; }
footer { padding: .7rem 1rem; text-align: center; font-size: .8rem; }
footer a { color: #1849a9; }
@media (max-width: 560px) { .time-picker { gap: .4rem; } }