/* React-owned live-driver tools. Graphite/red; existing green socket dot unchanged. */
.rs-driver-tools { width:280px; max-width:100%; color:#eceef2; font:12px/1.4 var(--rs-font, sans-serif); }
.rs-driver-filters { position:relative; margin-top:6px; }
.rs-driver-filters summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; min-height:36px; padding:0 12px; border:1px solid #42454d; border-radius:10px; background:#191b20; font-weight:600; }
.rs-driver-filters summary::-webkit-details-marker { display:none; }
.rs-driver-filters summary::before { content:'☰'; color:#ff8c87; }
.rs-driver-filters summary > span { margin-left:auto; color:#b2b8c2; font-variant-numeric:tabular-nums; }
.rs-driver-filters[open] summary { border-color:#ff645e; }
.rs-filter-fields { position:absolute; top:42px; left:0; right:0; z-index:30; padding:12px; border:1px solid #42454d; border-radius:12px; background:#191b20; box-shadow:0 16px 40px #0008; display:grid; gap:10px; max-height:min(340px,50svh); overflow:auto; overscroll-behavior:contain; }
.rs-filter-fields label { display:grid; gap:5px; font-weight:600; }
.rs-filter-fields input,.rs-filter-fields select { box-sizing:border-box; min-width:0; width:100%; min-height:38px; padding:7px 9px; border:1px solid #42454d; border-radius:8px; color:#eceef2; background:#111318; font:inherit; color-scheme:dark; }
.rs-filter-fields p { color:#b2b8c2; margin:0; font-size:11px; font-weight:400; }
.rs-driver-tools button,.rs-follow-control button,.rs-popup-follow { cursor:pointer; border:1px solid #e5322d60; border-radius:8px; min-height:34px; padding:6px 10px; color:#ff8c87; background:#e5322d18; font:600 12px/1.4 var(--rs-font,sans-serif); }
.rs-driver-tools button:hover,.rs-follow-control button:hover,.rs-popup-follow:hover { background:#e5322d30; }
.rs-driver-tools :focus-visible,.rs-follow-control :focus-visible,.rs-popup-follow:focus-visible,.maplibregl-marker [role=button]:focus-visible { outline:2px solid #ff8c87 !important; outline-offset:3px; }
.rs-follow-status { margin-top:6px; display:flex; align-items:center; flex-wrap:wrap; gap:5px; padding:8px; background:#191b20; border:1px solid #42454d; border-radius:10px; }
.rs-follow-status > span { flex:1 1 100%; overflow-wrap:anywhere; }
.rs-follow-status button:last-child { margin-left:auto; min-width:34px; }
.rs-driver-empty { margin:6px 0 0; padding:7px 10px; border-radius:8px; color:#b2b8c2; background:#191b20; }
.rs-popup-follow { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:10px 0; }
.maplibregl-marker > div[title] > svg[viewBox="0 0 36 36"] > path { fill:#fff !important; stroke:#17191d; stroke-width:.7px; }
@media (max-width:700px) {
  .rs-driver-tools { width:100%; }
  .route-planner-launch { top:auto; bottom:42px; left:auto; right:64px; }
}
@media (max-height:450px) { .rs-filter-fields { max-height:40svh; } .rs-follow-status { max-height:65px; overflow:auto; } }
@media (max-width:700px) {
  .rs-follow-control { width:calc(100vw - 24px); margin-left:12px !important; margin-bottom:44px !important; }
  .rs-follow-status { flex-wrap:nowrap; }
  .rs-follow-status > span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rs-follow-status button { flex-shrink:0; }
  .telemetry-popup .maplibregl-popup-content > div > .MuiBox-root { max-height:min(300px,calc(50svh - 125px)); overflow:auto; overscroll-behavior:contain; }
}

.rs-follow-control { color:#eceef2; font:12px/1.4 var(--rs-font,sans-serif); }
@media (min-width:701px) { .rs-follow-control { width:280px; } }
/* An expanded filter panel must stay above the independent route launch button. */
.maplibregl-ctrl-top-left:has(.rs-driver-filters[open]) { z-index:5; }
@media (max-height:450px) and (min-width:701px) {
  .telemetry-popup .maplibregl-popup-content > div > .MuiBox-root { max-height:calc(50svh - 43px); overflow:auto; overscroll-behavior:contain; }
  .rs-follow-status { max-height:90px; }
}