/* Trips — the pieces /crossing's Trip panel and /trips share (js/trip-view.v2.js).
   Colours come from --tv-* set by the page (crossing.v1.css maps them to the Crossing palette, so
   the panel turns red at night; trips.v1.css maps them to the site's day/dark tokens).
   Rules: type >= 15 px, targets >= 44 px. */

.tv-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tv-h { margin: 18px 0 6px; font: 700 15px/1.2 var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tv-muted); }

.tv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 12px 0 0; }
.tv-stats div { min-width: 0; }
.tv-stats dt { font: 600 15px/1.2 var(--font-text); color: var(--tv-muted); }
.tv-stats dd { margin: 2px 0 0; font: 700 20px/1.2 var(--font-time); font-variant-numeric: tabular-nums; color: var(--tv-text); }

.tv-rows { list-style: none; margin: 0; padding: 0; }
.tv-rows li + li { border-top: 1px solid var(--tv-line); }
.tv-row { display: block; padding: 10px 0; color: var(--tv-text); text-decoration: none; }
.tv-row-link { position: relative; min-height: 44px; padding-right: 28px; }
.tv-row-link:focus-visible { outline: 3px solid var(--tv-track); outline-offset: 2px; border-radius: 8px; }
.tv-row-n { font: 600 17px/1.3 var(--font-text); overflow-wrap: anywhere; }
.tv-row-c { font: 500 16px/1.3 var(--font-text); color: var(--tv-muted); }
.tv-row-l { display: block; margin-top: 2px; font: 500 16px/1.4 var(--font-text); color: var(--tv-muted); font-variant-numeric: tabular-nums; }
.tv-chev { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 600 22px/1 var(--font-text); color: var(--tv-muted); }
.tv-none { margin: 4px 0 0; font: 500 16px/1.4 var(--font-text); color: var(--tv-muted); }
.tv-paused { margin-top: 10px; }

.tv-sketch { display: block; width: 100%; height: 160px; }
.tv-sketch .tv-track { fill: none; stroke: var(--tv-track); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tv-sketch .tv-gap { fill: none; stroke: var(--tv-muted); stroke-width: 2; stroke-dasharray: 5 6; }
.tv-sketch .tv-start { fill: var(--tv-surface); stroke: var(--tv-text); stroke-width: 2.5; }
.tv-sketch .tv-end { fill: var(--tv-text); stroke: var(--tv-surface); stroke-width: 2; }