/* A fixed bus route, a clear primary maneuver and a separate next-stop surface. */
body.driver-mode{--nav-inset:14px;--nav-width:390px}
body.driver-mode #driverHud,body.driver-mode #driverHud.show{
  position:absolute;inset:0!important;display:block;width:auto;height:auto;max-height:none;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;pointer-events:none;color:#f1f5f7;letter-spacing:0;color-scheme:dark;
}
body.driver-mode #driverMap{inset:0!important}
body.driver-mode #driverHud .driver-guidance{
  position:absolute;top:max(var(--nav-inset),env(safe-area-inset-top,0px));left:max(var(--nav-inset),env(safe-area-inset-left,0px));
  width:var(--nav-width);max-width:calc(100% - 2 * var(--nav-inset));border:1px solid #465059;border-radius:8px;
  background:#20262b;overflow-x:hidden;overflow-y:auto;box-shadow:0 8px 28px #0006;pointer-events:auto;
}
body.driver-mode #driverHud .driver-hud-top{
  position:static;inset:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:auto;min-height:62px;padding:10px 10px 10px 14px;border:0;border-bottom:1px solid #353e46;border-radius:0;background:#171c20;box-shadow:none;color:#fff;
}
body.driver-mode #driverTrip{display:flex;align-items:center;gap:10px;min-width:0;white-space:normal;overflow:visible;font-size:16px;line-height:1.2;letter-spacing:0}
body.driver-mode .driver-line-number{display:flex;align-items:center;justify-content:center;min-width:39px;height:38px;padding:0 7px;flex:none;border-radius:5px;background:var(--driver-line-color,#347be4);color:var(--driver-line-ink,#fff);font-size:20px;font-weight:800}
body.driver-mode .driver-direction{min-width:0;overflow-wrap:anywhere}
body.driver-mode .driver-direction small{display:block;margin-bottom:3px;color:#bac8ce;font-size:10px;font-weight:500}
body.driver-mode .driver-direction strong{display:block;font-size:16px;font-weight:750;line-height:1.25;letter-spacing:0}
body.driver-mode .driver-next-trip{display:inline-flex;align-items:center;gap:5px;margin-left:4px;white-space:nowrap;vertical-align:middle}
body.driver-mode .driver-next-trip[hidden]{display:none!important}
body.driver-mode .driver-next-trip-arrow{font-size:18px;line-height:1;color:#bac8ce}
body.driver-mode .driver-next-trip .driver-line-number{display:inline-flex;min-width:25px;height:25px;padding:0 5px;font-size:14px;border-radius:4px}
body.driver-mode .driver-trip-diversion{display:block;margin-top:4px;color:#ffd98b;font-size:10px}
body.driver-mode #driverHud .driver-hud-controls{display:flex;align-items:center;gap:4px;flex:none}
body.driver-mode #driverHud .driver-sound,body.driver-mode #driverHud .sb-close{
  display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:38px;padding:7px;
  border:1px solid #ffffff20;border-radius:6px;background:#ffffff08;color:#fff;cursor:pointer;
}
body.driver-mode #driverHud .driver-hud-controls img{display:block;width:21px;height:21px;filter:invert(1)}
body.driver-mode #driverHud .driver-sound[aria-pressed=false]{background:#ffffff20}
body.driver-mode #driverHud .driver-sound:hover,body.driver-mode #driverHud .sb-close:hover{background:#ffffff20}
body.driver-mode #driverHud button:focus-visible{outline:3px solid #75b1ff;outline-offset:-3px}
body.driver-mode #driverHud .driver-maneuver{
  position:static;inset:auto;display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:16px;
  width:auto;min-height:144px;padding:19px 17px;border:0;border-radius:0;background:#20262b;box-shadow:none;
}
body.driver-mode #driverHud #driverTurnIcon{display:flex;align-items:center;justify-content:center;width:78px;height:82px;align-self:center;
  border:1px solid #465563;border-radius:6px;background:#2a3540;color:#e1efff;box-shadow:none}
body.driver-mode #driverTurnIcon:empty:before{content:'?';font-size:35px;font-weight:700;color:#b4c5d6}
body.driver-mode #driverHud .navigation-arrow{width:62px;height:66px;color:inherit}
body.driver-mode .navigation-arrow [stroke="#c4c8cc"]{stroke:#64717d}
body.driver-mode .navigation-arrow [fill="#f8fafc"]{fill:#2a3540}
body.driver-mode #driverHud .driver-route-icon{width:42px;height:46px;opacity:.9;filter:invert(1)}
body.driver-mode #driverHud #driverTurnDistance{color:#87edbb;font-size:31px;font-weight:800;line-height:1.1;letter-spacing:0;text-shadow:none;font-variant-numeric:tabular-nums}
body.driver-mode #driverHud #driverTurnText{display:block;margin-top:7px;color:#f4f7fa;font-size:23px;font-weight:800;line-height:1.17;overflow-wrap:anywhere;letter-spacing:0}
body.driver-mode #driverHud #driverTurnDetail{display:block;max-width:100%;margin-top:7px;color:#b9c7d0;font-size:13px;font-weight:500;line-height:1.4;white-space:normal;overflow:visible;overflow-wrap:anywhere;letter-spacing:0}
body.driver-mode #driverHud .driver-upcoming{display:grid;grid-template-columns:27px minmax(0,1fr);align-items:center;gap:12px;padding:12px 18px;
  border-top:1px solid #3a444d;background:#292f35;color:#e3eaf0;font-size:14px;line-height:1.3}
body.driver-mode #driverHud .driver-upcoming[hidden]{display:none}
body.driver-mode #driverUpcomingIcon{display:flex;align-items:center;justify-content:center;width:27px;height:32px;color:#b7d7ff}
body.driver-mode #driverUpcomingIcon .navigation-arrow{width:27px;height:30px}
body.driver-mode #driverUpcoming small{display:block;margin-bottom:3px;color:#adbdc9;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}
body.driver-mode #driverUpcomingText{display:block;font-weight:700;overflow-wrap:anywhere}
body.driver-mode #driverHud .driver-status{position:static;inset:auto;display:none;width:auto;min-height:0;padding:9px 15px;
  border:0;border-top:1px solid #3a444d;border-radius:0;background:#233a2e;color:#a0e8bc;box-shadow:none;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
body.driver-mode #driverHud .driver-status.warn,body.driver-mode #driverHud .driver-status.off,body.driver-mode #driverHud .driver-status.sim{display:flex}
body.driver-mode #driverHud .driver-status.warn{background:#40351f;color:#f8d995}
body.driver-mode #driverHud .driver-status.off{background:#432b2e;color:#ffb7b4}
body.driver-mode #driverHud .driver-status.sim{background:#253343;color:#b7d7ff}
body.driver-mode #driverHud .driver-next{position:absolute;inset:auto;left:max(var(--nav-inset),env(safe-area-inset-left,0px));bottom:max(var(--nav-inset),env(safe-area-inset-bottom,0px));
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:15px;row-gap:5px;width:var(--nav-width);max-width:calc(100% - 2 * var(--nav-inset));
  padding:16px 17px 18px;border:1px solid #465059;border-radius:8px;background:#1c2428;color:#fff;overflow:hidden;box-shadow:0 7px 24px #0006;pointer-events:auto}
body.driver-mode #driverHud .driver-kicker{grid-column:1;color:#9cc3b3;font-size:10px;font-weight:700;line-height:1.3;letter-spacing:0}
body.driver-mode #driverHud #driverNextStop{grid-column:1;margin:0;display:block;color:#fff;font-size:20px;font-weight:750;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset;-webkit-box-orient:initial;overflow-wrap:anywhere;letter-spacing:0}
body.driver-mode #driverHud .driver-distance-row{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;margin:0}
body.driver-mode #driverHud #driverDistance{color:#7ce3b0;font-size:27px;font-weight:800;line-height:1.1;white-space:nowrap;letter-spacing:0}
body.driver-mode #driverHud #driverProgress{color:#a8bfc5;font-size:10px;line-height:1.3;white-space:nowrap}
body.driver-mode #driverHud .driver-trip-track{position:absolute;bottom:0;left:0;right:0;height:4px;background:#3b4c50}
body.driver-mode #driverTripFill{display:block;width:0;height:100%;max-width:100%;background:#71dba6;transition:width .4s linear}
body.driver-mode #driverHud .driver-diversion-legend{position:static;inset:auto;width:auto;border:0;border-top:1px solid #5b4b2d;border-radius:0;background:#3c3322;padding:9px 15px;color:#f8d995;font-size:11px;box-shadow:none}
body.driver-mode #driverHud .driver-diversion-legend.show{display:flex;flex-wrap:wrap;gap:7px 14px}
body.driver-mode #driverHud .driver-actions{position:absolute;inset:auto;bottom:16px;right:16px;display:flex;gap:6px;width:auto;padding:6px;background:#202e32;border:1px solid #455a60;border-radius:6px}
body.driver-mode #driverHud .driver-actions .btn{height:36px;font-size:12px}
body.driver-mode #driverHud .driver-sim-speed{height:36px;background:#202e32}
body.driver-mode #driverMap .maplibregl-ctrl-top-right{top:max(14px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px))}
body.driver-mode #driverMap .maplibregl-ctrl button{width:42px;height:42px}
body.driver-mode #driverMap .maplibregl-ctrl-group{background:#22292f;border:1px solid #4b555f;box-shadow:0 2px 8px #0005}
body.driver-mode #driverMap .maplibregl-ctrl button+button{border-top-color:#4b555f}
body.driver-mode #driverMap .maplibregl-ctrl button:hover{background:#3a444e}
body.driver-mode #driverMap .maplibregl-ctrl button:focus-visible{outline:2px solid #91c3ff;outline-offset:-3px}
body.driver-mode #driverMap .maplibregl-ctrl-icon,body.driver-mode #driverMap .maplibregl-ctrl button img{filter:invert(1)}
body.driver-mode #driverMap .maplibregl-ctrl button img{display:block;width:22px;height:22px;margin:auto}
body.driver-mode #driverMap .maplibregl-ctrl-attrib{background:#20262be6;color:#c0ccd4}
body.driver-mode #driverMap .maplibregl-ctrl-attrib a{color:#c0ccd4}
body.driver-mode #driverMap .maplibregl-ctrl-attrib-button{filter:invert(1)}
body.driver-mode #driverMap .maplibregl-ctrl-bottom-left,body.driver-mode #driverMap .maplibregl-ctrl-bottom-right{bottom:0}
body.driver-mode .nav-position{width:34px;height:34px;border-width:3px;font-size:23px;box-shadow:0 2px 10px #0005}
body.driver-route-blocked #driverHud #driverTurnDetail{display:block!important}
@media (orientation:portrait){
  body.driver-mode{--nav-inset:10px;--nav-width:calc(100% - 20px)}
  body.driver-mode #driverHud .driver-hud-top{min-height:60px;padding:9px 10px 9px 13px}
  body.driver-mode #driverHud .driver-maneuver{grid-template-columns:70px minmax(0,1fr);gap:14px;min-height:139px;padding:17px 15px}
  body.driver-mode #driverHud #driverTurnIcon{width:70px;height:78px}
  body.driver-mode #driverHud #driverTurnIcon .navigation-arrow{width:56px;height:62px}
  body.driver-mode #driverHud #driverTurnDistance{font-size:30px}
  body.driver-mode #driverHud #driverTurnText{font-size:22px}
  body.driver-mode #driverHud #driverNextStop{font-size:18px}
  body.driver-mode #driverHud #driverDistance{font-size:25px}
  body.driver-mode #driverHud .driver-next{bottom:max(18px,env(safe-area-inset-bottom,0px))}
  body.driver-mode #driverHud .driver-actions{display:none!important}
  body.driver-mode #driverMap .maplibregl-ctrl-top-right{top:var(--driver-controls-top,290px)}
}
@media (orientation:landscape) and (max-height:600px){
  body.driver-mode{--driver-landscape-split:2;--nav-inset:10px;--nav-width:clamp(265px,42%,365px);--nav-left:env(safe-area-inset-left,0px);--nav-right:max(var(--nav-inset),env(safe-area-inset-right,0px))}
  body.driver-mode #wrap{height:100dvh;flex:1 1 100dvh}
  body.driver-mode #driverHud:before{content:'';position:absolute;left:0;top:0;bottom:0;width:calc(var(--nav-width) + var(--nav-left));border-right:1px solid #465059;background:#20262b}
  body.driver-mode #driverHud .driver-guidance{top:env(safe-area-inset-top,0px);left:var(--nav-left);border:0;border-radius:0;box-shadow:none}
  body.driver-mode #driverHud .driver-hud-top{min-height:52px;padding:8px 10px;background:#20262b}
  body.driver-mode #driverTrip{gap:8px}
  body.driver-mode .driver-direction small{display:none}
  body.driver-mode #driverHud #trialBadge,body.driver-mode #driverHud #driverReportBtn{display:none}
  body.driver-mode #driverHud .driver-hud-controls{gap:4px}
  body.driver-mode .driver-line-number{min-width:34px;height:34px;font-size:18px}
  body.driver-mode .driver-direction strong{font-size:14px}
  body.driver-mode #driverHud .driver-sound,body.driver-mode #driverHud .sb-close{width:32px;min-width:32px;height:34px;padding:6px;border-color:transparent;background:transparent}
  body.driver-mode #driverHud .driver-maneuver{min-height:128px;padding:18px 14px;grid-template-columns:54px minmax(0,1fr);gap:12px}
  body.driver-mode #driverHud #driverTurnIcon{width:54px;height:66px;border:0;background:transparent}
  body.driver-mode #driverHud #driverTurnIcon .navigation-arrow{width:49px;height:58px}
  body.driver-mode #driverHud #driverTurnDistance{font-size:29px}
  body.driver-mode #driverHud #driverTurnText{font-size:21px;margin-top:6px}
  body.driver-mode #driverHud #driverTurnDetail{font-size:12px;margin-top:7px}
  body.driver-mode #driverHud .driver-upcoming,body.driver-mode #driverHud .driver-diversion-legend.show,body.driver-mode #driverHud .driver-status.sim{display:none}
  body.driver-mode #driverHud .driver-status{font-size:11px;padding:7px 12px}
  body.driver-mode #driverHud .driver-next{left:var(--nav-left);right:auto;bottom:0;width:var(--nav-width);max-width:none;padding:12px 12px max(14px,env(safe-area-inset-bottom,0px));column-gap:10px;row-gap:5px;border:0;border-top:1px solid #465059;border-radius:0;background:#20262b;box-shadow:none}
  body.driver-mode #driverHud .driver-kicker,body.driver-mode #driverHud #driverProgress,body.driver-mode #driverHud .driver-trip-track{display:none}
  body.driver-mode #driverHud #driverNextStop{grid-column:1;grid-row:1;font-size:16px;align-self:center}
  body.driver-mode #driverHud .driver-distance-row{grid-row:1;grid-column:2;align-self:center}
  body.driver-mode #driverHud #driverDistance{font-size:23px}
  body.driver-mode #driverHud .driver-next:has(#driverWait:not([hidden])) #driverNextStop{grid-row:1/3}
  body.driver-mode #driverHud #driverWait{grid-column:2;grid-row:2;max-width:90px;margin-top:0;font-size:11px;line-height:1.3;text-align:right}
  body.driver-mode #driverHud .driver-actions{display:none!important}
  body.driver-mode #driverMap .maplibregl-ctrl-top-right{top:max(var(--nav-inset),env(safe-area-inset-top,0px));right:var(--nav-right)}
  body.driver-mode #driverMap .maplibregl-ctrl-top-right .maplibregl-ctrl{margin:0 0 10px}
  body.driver-mode #driverMap .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in){display:none}
}
@media (orientation:landscape) and (max-height:350px){
  body.driver-mode{--nav-inset:6px}
  body.driver-mode #driverHud .driver-hud-top{gap:6px;padding:8px 9px}
  body.driver-mode #driverTrip{gap:6px}
  body.driver-mode .driver-direction strong{font-size:13px}
  body.driver-mode .driver-line-number{min-width:30px;height:32px;font-size:17px}
  body.driver-mode #driverHud .driver-maneuver{min-height:90px;padding:7px 11px;grid-template-columns:45px minmax(0,1fr);gap:9px}
  body.driver-mode #driverHud #driverTurnIcon{width:50px;height:57px}
  body.driver-mode #driverHud #driverTurnIcon .navigation-arrow{width:41px;height:49px}
  body.driver-mode #driverHud #driverTurnDistance{font-size:24px}
  body.driver-mode #driverHud #driverTurnText{font-size:18px}
  body.driver-mode #driverHud #driverTurnDetail{font-size:11px;margin-top:4px}
  body.driver-mode #driverHud .driver-next{padding:8px 11px 10px}
  body.driver-mode #driverHud #driverNextStop{font-size:15px}
  body.driver-mode #driverHud .driver-next:has(#driverWait:not([hidden])) #driverNextStop{font-size:14px}
  body.driver-mode #driverHud #driverDistance{font-size:22px}
}
@media(prefers-reduced-motion:reduce){body.driver-mode #driverTripFill{transition:none}}
body.driver-mode #driverHud .driver-report{display:flex;align-items:center;justify-content:center;width:32px;min-width:32px;height:36px;padding:7px;border:0;border-radius:5px;background:transparent;opacity:.7;cursor:pointer}
body.driver-mode #driverHud .driver-report:hover{opacity:1;background:#ffffff12}
body.driver-mode #driverHud .driver-report.marked{opacity:1;background:#536342;outline:1px solid #b7de83}
body.driver-mode .driver-connectivity{padding:7px 13px;border-top:1px solid #5b4b2d;background:#40351f;color:#f8d995;font-size:11px;line-height:1.4}
body.driver-mode .driver-connectivity[hidden],body.driver-mode #driverWait[hidden]{display:none}
body.driver-mode #driverWait{grid-column:1/-1;color:#b9cbd2;font-size:12px;line-height:1.4;margin-top:2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
body.driver-mode #driverWait.waiting{color:#ffe099;font-weight:700}
.driver-resume{position:fixed;z-index:1800;bottom:max(12px,env(safe-area-inset-bottom));left:12px;right:12px;max-width:520px;margin:auto;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #52616c;border-radius:6px;background:#202a30;color:#fff;box-shadow:0 4px 18px #0005}
.driver-resume span{flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere}
.driver-resume button{flex:none;min-height:36px;padding:6px 10px;border:1px solid #687f89;border-radius:5px;background:#31434d;color:#fff;font:inherit;cursor:pointer}
.driver-resume button:last-child{width:34px;min-width:34px;padding:8px;background:transparent;border:0}
.driver-resume img{display:block;width:18px;height:18px;filter:invert(1)}
.driver-resume[hidden],body.driver-mode .driver-resume{display:none}
@media(orientation:landscape) and (max-height:350px){body.driver-mode #driverHud .driver-report{width:28px;min-width:28px;height:30px;padding:5px}body.driver-mode #driverWait{font-size:11px}}