/* SPRINTWAY driver app. Plum, magenta, lilac, mint. 22 to 28px radii, pills. */
:root{--plum:#241047;--mag:#e5007e;--lil:#f5f2fb;--lil2:#ebe4f7;--mint:#1fc794;--ink:#1c1530;--mute:#5e5675;--line:#e3dcef;--logo-a:#e5007e}
*{box-sizing:border-box;margin:0;padding:0}
body{font:500 15px/1.5 "Manrope",system-ui,sans-serif;color:var(--ink);background:#e9e3f3;display:grid;place-items:start center;min-height:100vh;padding:clamp(0px,3vw,32px) 0;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{list-style:none}
a{color:var(--mag)}
.ic{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic .a{stroke:var(--mag)}
:focus-visible{outline:3px solid var(--mag);outline-offset:2px;border-radius:8px}
.app{width:min(400px,100vw);height:min(820px,100vh);background:var(--lil);position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:34px;box-shadow:0 30px 70px rgba(36,16,71,.25)}
@media (max-width:440px){.app{border-radius:0;height:100vh;height:100dvh}body{padding:0}}
.sb{display:flex;justify-content:space-between;padding:12px 24px 0;font-size:12.5px;font-weight:700;color:#cbbfe3;background:var(--plum)}
.top{display:flex;justify-content:space-between;align-items:center;background:var(--plum);color:#fff;padding:10px 20px 4px}
.brand{display:flex;align-items:center;gap:8px}
.brand .mark{width:30px;height:30px;color:#fff}
.brand b{font-weight:800;font-size:19px;letter-spacing:-.03em}
.ring{position:relative;width:46px;height:46px}
.ring svg{width:46px;height:46px;transform:rotate(-90deg)}
.rb{fill:none;stroke:rgba(255,255,255,.18);stroke-width:5}
.rf{fill:none;stroke:var(--mint);stroke-width:5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .5s}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;font-weight:800}
.hi{background:var(--plum);color:#fff;padding:6px 20px 22px;border-radius:0 0 28px 28px}
.hi h1{font-size:24px;font-weight:800;letter-spacing:-.02em}
.hi p{font-size:13px;color:#cbbfe3}
main{flex:1;overflow-y:auto;padding:16px 16px 92px}
.view{display:none}.view.on{display:block}
.stops li{margin-bottom:10px}
.stops button{width:100%;text-align:left;display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;background:#fff;border-radius:22px;padding:14px}
.sn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--lil2);color:var(--plum);font-weight:800}
.stops li.next .sn{background:var(--mag);color:#fff}
.stops li.done .sn{background:var(--mint);color:#fff}
.stops li.done button{opacity:.6}
.stops b{display:block;font-weight:800;font-size:15px;color:var(--plum)}
.stops small{font-size:12.5px;color:var(--mute)}
.win{font-size:12px;font-weight:800;color:var(--plum);background:var(--lil);border-radius:999px;padding:5px 9px;white-space:nowrap}
.stops li.next .win{background:#ffe0f0;color:var(--mag)}
.back{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--mag);margin-bottom:8px}
.back .ic{transform:rotate(180deg)}
.pod-h span{font-size:12.5px;font-weight:800;color:var(--mag)}
.pod-h h2{font-size:22px;font-weight:800;color:var(--plum);letter-spacing:-.02em}
.pod-h p{color:var(--mute);font-size:14px}
.pod-i{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 8px}
.pod-i div{background:#fff;border-radius:18px;padding:10px 14px}
.pod-i span{display:block;font-size:12px;color:var(--mute)}
.pod-i b{color:var(--plum)}
.pnote{background:#fff8d6;border-radius:16px;padding:10px 12px;font-size:13.5px;margin-bottom:6px}
.pnote:empty{display:none}
.lbl{display:block;font-size:13px;font-weight:800;color:var(--mute);margin:12px 0 6px}
#pRecv{width:100%;border:2px solid var(--line);border-radius:999px;padding:11px 16px;font:inherit;background:#fff}
#pRecv:focus{outline:0;border-color:var(--mag)}
.sig{position:relative;background:#fff;border-radius:22px;border:2px dashed var(--line)}
.sig canvas{display:block;width:100%;height:150px;touch-action:none;cursor:crosshair}
.sig button{position:absolute;right:10px;top:8px;font-size:12.5px;font-weight:800;color:var(--mag)}
.photo{width:100%;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--line);border-radius:999px;padding:12px;font-weight:800;color:var(--plum);background:#fff}
.photo.got{border-style:solid;border-color:var(--mint);color:#128a64}
.btn{width:100%;margin-top:12px;padding:15px;border-radius:999px;background:var(--mag);color:#fff;font-weight:800;font-size:16px}
.msg{min-height:1.5em;margin-top:10px;font-weight:700;font-size:14px}
.msg.ok{color:#128a64}.msg.err{color:var(--mag)}
.vh{font-size:24px;font-weight:800;color:var(--plum);margin-bottom:12px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cards div{background:#fff;border-radius:20px;padding:14px 12px}
.cards b{display:block;font-size:24px;font-weight:800;color:var(--plum)}
.cards span{font-size:12px;color:var(--mute)}
.vehicle{display:flex;gap:12px;align-items:center;background:var(--plum);color:#fff;border-radius:22px;padding:16px;margin-top:12px}
.vehicle .ic{width:34px;height:34px}
.vehicle b{display:block}.vehicle span{font-size:13px;color:#cbbfe3}
.site{display:block;text-align:center;margin-top:20px;font-weight:800}
.tabbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;background:var(--plum);border-radius:999px;padding:6px}
.tabbar button{display:flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;font-weight:800;font-size:14px;color:#cbbfe3}
.tabbar button.on{background:#fff;color:var(--plum)}

/* photography: always darkened */
.hi{background:linear-gradient(180deg,rgba(36,16,71,.86),rgba(36,16,71,.95)),url(https://images.unsplash.com/photo-1641199788912-9a7385a35c82?w=900&q=70&auto=format&fit=crop) center/cover no-repeat,var(--plum)}