/* Keep the sticky portal navigation above Leaflet controls and below dialogs. */
.topbar { z-index: 1600; }
#usageMap { height: clamp(320px, 53vh, 640px); border-radius: 10px; isolation: isolate; }
.usage-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.usage-heading h2, .usage-detail h2 { font-size: 20px; margin-bottom: 5px; }
.usage-heading p { margin: 0; max-width: 52ch; }
.usage-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.usage-toolbar label, .usage-player label, .usage-map-options label { margin: 0; }
.usage-toolbar select, .usage-player select, .usage-map-options select { min-height: 38px; padding: 7px; }
.usage-map-options { display: flex; justify-content: end; margin-bottom: 10px; }
.usage-map-options label { width: min(100%, 280px); }
.usage-range { margin-top: 16px; }
.usage-range summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.usage-table-wrap { border: 1px solid #e4e7ec; border-radius: 10px; }
.usage-table { min-width: 1000px; }
.usage-table th { background: #f3f5f8; color: #384557; }
.usage-table td, .usage-table th { padding: 12px 10px; vertical-align: middle; }
.usage-table tbody tr:last-child td { border-bottom: 0; }
.usage-table tbody tr:hover { background: #f7f9fc; }
.usage-device { font-weight: 800; }
.usage-device small, .usage-place small { display: block; margin-top: 4px; color: #5f6e80; }
.usage-place { min-width: 155px; max-width: 270px; }
.usage-place strong { font-size: 12px; font-weight: 650; }
.usage-place small, .usage-date, .usage-number, #usageTime { font-variant-numeric: tabular-nums; }
.usage-date, .usage-number, .usage-place small { white-space: nowrap; }
.usage-actions { white-space: nowrap; }
.usage-actions button { padding: 7px 9px; margin-right: 4px; font-size: 12px; }
.usage-player { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.usage-slider { flex: 1 1 220px; }
.usage-slider input { padding: 0; accent-color: #a81d29; }
.usage-playback-meta { display: grid; gap: 4px; min-width: 180px; padding: 2px 0; }
.usage-playback-meta small { color: #5f6e80; font-variant-numeric: tabular-nums; }
@media(max-width: 700px) {
 .usage-history, .usage-detail { padding: 12px; }
 .usage-player .usage-slider { flex-basis: 100%; }
}