:root{color-scheme:light dark;--bg:#f5f7f7;--surface:#fff;--text:#17242c;--muted:#64747d;--border:#e3e9e8;--green:#087b60;--accent:#2dd4a8;--soft:#e5f7f0;--map:#edf2ef;--grid:#dce6df;--route:#0caa80;--shadow:0 8px 35px #17242c08}
@media(prefers-color-scheme:dark){:root{--bg:#0d1418;--surface:#151f25;--text:#f1f5f5;--muted:#a4b4bd;--border:#29383f;--green:#53e0b7;--soft:#17372f;--map:#17242a;--grid:#263a40;--route:#2dd4a8;--shadow:none}}
*{box-sizing:border-box}html{min-width:280px}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,svg:focus-visible{outline:3px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}.tracking-shell{width:min(100%,720px);margin:0 auto;padding:24px 24px max(28px,env(safe-area-inset-bottom))}.page-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:36px}.brand{font-size:38px;letter-spacing:-3px;line-height:1;font-weight:850;color:var(--green)}.shared-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:650}.shared-label svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}.status-section{margin-bottom:24px}.status-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:20px;background:var(--soft);color:var(--green);font-size:11px;line-height:1;font-weight:750;letter-spacing:.2px}.status-badge>span:first-child{width:6px;height:6px;border-radius:50%;background:currentColor}.status-badge.is-muted{background:var(--border);color:var(--muted)}h1{font-size:clamp(25px,5vw,34px);line-height:1.15;letter-spacing:-1.15px;margin:14px 0 10px;font-weight:780}.status-section p{font-size:14px;line-height:1.6;margin:0;color:var(--muted);max-width:540px}.map-panel{position:relative;border:1px solid var(--border);border-radius:24px;overflow:hidden;background:var(--map);box-shadow:var(--shadow);isolation:isolate}.map-topline{position:absolute;z-index:2;top:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;font-size:11px;font-weight:700;color:var(--muted)}.map-topline>span:first-child{padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-radius:20px;max-width:80%}.north-label{padding:7px 9px;background:var(--surface);border-radius:20px;border:1px solid var(--border);color:var(--text)}.route-map{display:block;width:100%;height:380px;touch-action:none;cursor:grab}.route-map.is-dragging{cursor:grabbing}.map-background{fill:var(--map)}.map-grid-line{fill:none;stroke:var(--grid);stroke-width:1;stroke-dasharray:2 6}.route-outline{fill:none;stroke:var(--surface);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.route-line{fill:none;stroke:var(--route);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.destination-ring{fill:var(--surface);stroke:var(--text);stroke-width:3}.destination-core{fill:var(--text)}.map-marker-label{font-family:inherit;font-weight:750;font-size:18px;fill:var(--text);paint-order:stroke;stroke:var(--map);stroke-width:6;stroke-linejoin:round}.driver-halo{fill:var(--accent);fill-opacity:.2}.driver-disc{fill:var(--surface);stroke:var(--route);stroke-width:3}.driver-arrow{fill:var(--green)}.map-controls{position:absolute;z-index:3;right:14px;bottom:48px;display:flex;flex-direction:column;gap:5px}.map-controls button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:25px;line-height:1;box-shadow:0 3px 8px #00000006}.map-controls svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.map-bottomline{position:absolute;z-index:2;bottom:0;left:0;right:0;padding:11px 15px;background:var(--surface);color:var(--muted);border-top:1px solid var(--border);font-size:11px;line-height:1.4}.map-placeholder{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;text-align:center;background:var(--surface);color:var(--muted);padding:12px 16px;border-radius:12px;font-size:13px}.trip-details{margin-top:16px;border:1px solid var(--border);border-radius:22px;background:var(--surface);padding:23px 22px;box-shadow:var(--shadow)}.metrics{display:flex;gap:30px;margin-bottom:23px}.metrics>div{display:flex;flex-direction:column;gap:5px}.metric-value{font-size:29px;font-weight:800;letter-spacing:-1.1px;line-height:1.1}.metric-label{font-size:11px;color:var(--muted)}.driver-details{display:flex;align-items:center;gap:12px;margin-bottom:24px}.driver-initial{width:45px;height:45px;flex:none;display:grid;place-items:center;border-radius:15px;background:var(--soft);color:var(--green);font-size:21px;font-weight:750}.driver-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.detail-label{font-size:10px;letter-spacing:.25px;color:var(--muted);font-weight:650}.driver-copy strong{font-size:16px;font-weight:750;overflow-wrap:anywhere}.driver-copy>span:last-child{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.vehicle-plate{padding:7px 8px;border:1px solid var(--border);border-radius:8px;font-size:11px;font-weight:750;letter-spacing:.6px;flex:none;max-width:120px;overflow-wrap:anywhere}.destination-details{display:flex;gap:12px;align-items:flex-start;margin-bottom:23px}.destination-icon{width:45px;flex:none;display:flex;justify-content:center;padding-top:4px;color:var(--green)}.destination-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}.destination-details>div{min-width:0}.destination-details p{font-size:14px;line-height:1.5;margin:4px 0 0;overflow-wrap:anywhere}.update-row{display:flex;align-items:center;gap:7px;font-size:11px;line-height:1.5;color:var(--muted)}.update-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}.update-row.is-stale .update-dot{background:#bf840d}.privacy-note{display:flex;gap:8px;align-items:flex-start;justify-content:center;color:var(--muted);font-size:10px;line-height:1.7;margin:23px 10px 0;text-align:left}.privacy-note svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none;margin-top:2px}.state-card{margin:24px 0;border:1px solid var(--border);border-radius:22px;padding:32px 25px;background:var(--surface);text-align:center}.state-card>svg{width:44px;height:44px;fill:none;stroke:var(--green);stroke-width:1.5}.state-card p{font-size:14px;line-height:1.6;color:var(--muted);margin:14px auto 0;max-width:420px}.retry-button{margin-top:20px;border:0;border-radius:12px;background:var(--accent);color:#092b22;font-weight:750;padding:13px 20px}.is-disconnected .route-line,.is-disconnected #driver-marker{opacity:.55}@media(min-width:720px){.tracking-shell{padding-top:34px;padding-bottom:40px}.page-header{margin-bottom:42px}.route-map{height:440px}}@media(max-width:360px){.tracking-shell{padding-left:16px;padding-right:16px}.page-header{gap:10px}.shared-label{font-size:10px}.brand{font-size:34px}.trip-details{padding:19px 17px}.vehicle-plate{max-width:95px;font-size:10px;padding:6px}.driver-details{gap:9px}.route-map{height:335px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.basemap{width:100%;height:380px}.trip-route-line{fill:none;stroke:var(--route);stroke-width:4;stroke-opacity:.45;stroke-dasharray:6 8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.live-map-marker{width:39px;height:39px;background:#fff;border:2px solid #0bb68a;border-radius:50%;display:grid;place-items:center;box-shadow:0 2px 9px #0003}.live-map-marker svg{width:24px;height:24px;fill:none;stroke:#087b60;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}.live-map-marker.destination{width:30px;height:30px;border-color:#17242c}.live-map-marker.destination svg{width:19px;height:19px;stroke:#17242c}.maplibregl-ctrl-bottom-left{bottom:38px!important}.maplibregl-ctrl-attrib{font-size:9px!important;line-height:16px!important}.is-disconnected .basemap{opacity:.65}.basemap .maplibregl-canvas:focus-visible{outline-offset:-4px}@media(min-width:720px){.basemap{height:440px}}@media(max-width:360px){.basemap{height:335px}}

.basemap.is-loading{position:absolute;inset:0;opacity:0;pointer-events:none}

.driver-photo{width:45px;height:45px;border-radius:15px;object-fit:cover;flex:none;background:var(--soft)}