.primary-grid{grid-template-columns:minmax(0,1.35fr) minmax(360px,1fr)}
.video-filter-status{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:10px 23px 0;padding:9px 10px;background:#edf6ef;border:1px solid #dceade;border-radius:5px;font-size:10px;color:#36704b}.movement-panel{margin-top:18px}.flow-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 23px 18px}.flow-summary small{display:block;font-size:8px;color:#849489;letter-spacing:.06em}.flow-summary strong{display:block;font-size:18px;margin-top:8px;font-weight:600}.flow-directions{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:0 23px 18px}.flow-directions>div{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:11px}.flow-directions>div>div{grid-column:1/-1;height:5px;background:#edf0eb;grid-row:2;border-radius:4px;overflow:hidden}.flow-directions i{display:block;height:100%;background:#438b6b;width:0}.flow-directions strong{font-weight:600}.movement-panel .chart-note{margin-bottom:18px}.movement-panel .panel-header a{font-size:11px}
#chart-playhead{position:absolute;top:0;bottom:0;width:1px;background:#244f3e;pointer-events:none;will-change:left}.map-controls button{min-height:32px}.recording .map-controls button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #92bea1}
.map-controls{display:flex;gap:6px;flex-wrap:wrap}.map-controls button[aria-pressed=true]{background:#d9eddf;border-color:#b6d5c0;color:#245a40}.map-controls button:disabled{opacity:.45;cursor:default}
.map-stage{position:relative;margin:0 16px;height:370px;border:1px solid #dae3d8;border-radius:6px;overflow:hidden;background:#e9eee7}#route-map{position:absolute;inset:0}#map-message{position:absolute;top:10px;left:10px;right:10px;background:#fffef3e8;border:1px solid #e6dfbb;border-radius:5px;padding:8px 10px;font-size:10px;color:#6f603e;pointer-events:none}
.host-marker{width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:#2b79d1;box-shadow:0 0 0 3px #2b79d144,0 2px 8px #0005}.map-info{display:flex;justify-content:space-between;gap:10px;padding:12px 17px 6px;font-size:9px;color:#718277}.map-info span:last-child{white-space:nowrap}.map-legend{display:flex;align-items:center;gap:14px;padding:5px 17px 12px;color:#829087;font-size:9px}.map-legend span{display:flex;gap:5px;align-items:center}.map-legend #map-clock{margin-left:auto}.route-key,.processed-key{display:inline-block;width:16px;height:3px;background:#27715d}.processed-key{background:#3283db}
.map-metrics{border-top:1px solid #edf0ec;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 17px}.map-metrics small{font-size:7px;letter-spacing:.04em;color:#85948a;display:block;line-height:1.5}.map-metrics strong{display:block;font-size:20px;letter-spacing:-.03em;font-weight:600;margin-top:5px}.route-panel .chart-note{margin:0 17px 15px;font-size:9px}.maplibregl-ctrl-attrib{font-size:8px!important}.maplibregl-ctrl-bottom-left .maplibregl-ctrl{margin:0 0 5px 5px}.recording .panel-header{align-items:center}.video-overlay[hidden]{display:none}.status-tag{display:none}
@media(max-width:1100px){.primary-grid{grid-template-columns:minmax(0,1fr) minmax(340px,1fr)}.map-stage{height:340px}.map-info{flex-wrap:wrap}.map-metrics{gap:4px}}
@media(max-width:1200px){.primary-grid{grid-template-columns:1fr}.map-stage{height:390px}.page{padding-top:26px}.page-heading h1{font-size:30px}}
@media(max-width:850px){.primary-grid{grid-template-columns:1fr}.map-stage{height:400px}}
@media(max-width:500px){.map-stage{height:340px}.map-metrics small{font-size:7px}.map-controls button{font-size:9px}}
.flow-directions{grid-template-columns:repeat(4,1fr)}
.host-marker::before{content:'';position:absolute;left:1px;top:-12px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid #2b79d1;filter:drop-shadow(0 0 1px #fff)}.host-marker.heading-unknown::before{display:none}
.frame-sync-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 23px;color:#36705b;font-size:10px}.sync-details{margin:0 17px 13px;font-size:10px;color:#6d8275}.sync-details summary{cursor:pointer}.sync-details p{line-height:1.6;overflow-wrap:anywhere}
@media(max-width:700px){.flow-summary{grid-template-columns:repeat(2,1fr)}.flow-directions{grid-template-columns:repeat(2,1fr)}.video-filter-status{flex-wrap:wrap}.movement-panel .panel-header{flex-wrap:wrap}}
@media(max-width:500px){.frame-sync-bar{flex-wrap:wrap;margin:10px 14px}}


.route-key{background:#3283db}
.approach-key,.approach-current-key{display:inline-block;width:16px;height:3px;background:#1f8a70}.approach-current-key{height:5px;background:#e8590c;margin-left:6px}#approach-legend{display:flex;gap:5px;align-items:center}#approach-legend[hidden]{display:none}