* { box-sizing: border-box; }
body { margin: 0; color: #1b1b1f; font: 16px system-ui, sans-serif; }
header { height: 56px; align-items: center; background: #174ea6; color: white; display: flex; justify-content: space-between; padding: 0 1rem; }
h1 { font-size: 1.1rem; }
header button { background: white; border: 0; border-radius: 4px; color: #174ea6; padding: .45rem .7rem; }
.auto-update { font-size: .9rem; margin-left: auto; margin-right: 1rem; }
main { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; grid-template-rows: minmax(0, 1fr) 250px; height: calc(100vh - 56px); }
aside { border-right: 1px solid #ddd; grid-row: 1 / 3; overflow: auto; padding: 1rem; }
#tracks { margin: 0; padding: 0; list-style: none; }
#tracks button { background: none; border: 0; border-bottom: 1px solid #eee; cursor: pointer; padding: .7rem 0; text-align: left; width: 100%; }
#tracks button:hover, #tracks button:focus { background: #e8f0fe; }
.track-age { display: block; font-size: .95rem; }
.track-date, .track-meta { color: #5f6368; display: block; font-size: .75rem; margin-top: .15rem; }
.track-meta { font-size: .8rem; margin-top: .25rem; }
#map { min-width: 0; }
#chart-panel { border-top: 1px solid #ddd; min-width: 0; padding: .65rem 1rem .5rem; position: relative; }
.chart-controls { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem 1rem; font-size: .85rem; }
.chart-controls strong { margin-right: .25rem; }
#metrics-chart { display: block; height: 190px; margin-top: .35rem; width: 100%; }
#chart-status { color: #5f6368; font-size: .85rem; left: 1rem; margin: 0; position: absolute; top: 3.5rem; }
dialog { border: 0; border-radius: 8px; box-shadow: 0 3px 18px #0005; }
dialog label { display: grid; gap: .5rem; }
dialog input { min-width: 19rem; padding: .5rem; }
menu { display: flex; gap: .5rem; justify-content: end; padding: 0; }
@media (max-width: 700px) {
  main { display: block; height: auto; }
  aside { border-bottom: 1px solid #ddd; border-right: 0; max-height: 32vh; }
  #map { height: 52vh; }
  #chart-panel { height: 250px; }
}
