.trip-chart-shell { position: relative; }
.trip-chart { width: 100%; overflow-x: auto; }
.trip-chart svg { display: block; width: 100%; min-width: 1000px; height: auto; max-height: 380px; cursor: crosshair; touch-action: none; user-select: none; }
.trip-chart circle { cursor: pointer; transition: r 120ms ease, stroke-width 120ms ease; }
.trip-chart .chart-point-selected { stroke: var(--ink) !important; stroke-width: 4; filter: drop-shadow(0 0 3px var(--accent)); }
.trip-chart-interaction { fill: transparent; }
.trip-chart-selection { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 1.5; pointer-events: none; }
.trip-chart-reset { position: absolute; z-index: 2; top: 8px; right: 8px; padding: 5px 9px; }
.trip-view h2, .trip-view .kv dd { overflow-wrap: anywhere; min-width: 0; }
.trip-legend { display: flex; flex-wrap: wrap; gap: 20px; font-family: monospace; }
.trip-progress-response + .trip-progress-response { margin-top: 8px; }
.trip-progress-response details { margin-top: 5px; }
.trip-progress-response pre { min-width: 280px; }
.span-all { grid-column: 1 / -1; }
.device-topbar { flex-wrap: wrap; }
.device-topbar .button { flex-shrink: 0; }
select { max-width: 100%; }
.trip-period-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 300px)) auto;
    gap: 8px;
    align-items: end;
    justify-content: start;
}
.trip-period-filter label { min-width: 0; }
.trip-period-filter input { width: 100%; }
.trip-period-actions { display: flex; gap: 8px; align-items: center; }
.track-point {
    display: block;
    width: 100%;
    padding: 3px 5px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
}
.track-point:hover, .track-point:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.track-point.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 2px solid var(--accent); }
.map-point-selected { z-index: 1000 !important; filter: drop-shadow(0 0 5px var(--accent)); }
.trip-view .map-grid { grid-template-columns: minmax(340px, 0.85fr) minmax(330px, 420px); }
.trip-view .track-timeline { padding-left: 38px; }
@media (max-width: 760px) {
    .trip-period-filter { grid-template-columns: 1fr; }
    .trip-period-filter input { max-width: 100%; }
    .trip-view .map-grid { grid-template-columns: 1fr; }
}