:root{ --bg:#0b0e13; --bg-rgb:11,14,19; --panel:#141922; --panel2:#1b222d; --line:#2a323f; --fg:#e8edf5; --dim:#8a97ab; --safe:#22c55e; --fast:#3b82f6; --cam:#ef4444; --warn:#f59e0b; --on-safe:#04180c; /* text on a --safe button */ --safe-soft:rgba(34,197,94,.22); --cam-soft:rgba(239,68,68,.1); --cam-line:rgba(239,68,68,.55); --warn-soft:rgba(245,158,11,.4); --scrim:rgba(4,6,10,.66); --shadow:0 2px 10px rgba(4,6,10,.5); --attrib:#667082; --attrib-link:#8794a8; --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px); --tap:46px; /* minimum comfortable touch target */ } /* Light theme. app.js puts .light on from the Appearance setting, or from the system preference when that is set to match — the class is the single switch, so nothing below has to ask twice. Only the tokens change: every rule in this file is written once and reads whichever palette is mounted. */ .light{ --bg:#eef1f6; --bg-rgb:238,241,246; --panel:#ffffff; --panel2:#e8ecf4; --line:#ccd5e2; --fg:#0f1723; --dim:#5b697f; --safe:#15803d; --fast:#1d4ed8; --cam:#b91c1c; --warn:#b45309; --on-safe:#f2fff7; --safe-soft:rgba(21,128,61,.16); --cam-soft:rgba(185,28,28,.09); --cam-line:rgba(185,28,28,.45); --warn-soft:rgba(180,83,9,.4); --scrim:rgba(15,23,35,.42); --shadow:0 2px 10px rgba(15,23,35,.18); --attrib:#6b788c; --attrib-link:#4a5769; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* layout rules below set display on .settings and .closebtn, which would otherwise outrank the attribute and un-hide whatever the JS just hid */ [hidden]{display:none!important} html,body{margin:0;height:100%;background:var(--bg);color:var(--fg); overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%; font:15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif} body{height:100dvh} button,input{font:inherit;touch-action:manipulation} button{cursor:pointer} :focus-visible{outline:2px solid var(--fast);outline-offset:2px} #map{position:absolute;inset:0} .leaflet-container{background:var(--bg)} /* ---------- top bar ---------- */ #top{position:absolute;top:0;left:0;right:0;z-index:500;display:flex;gap:8px; padding:10px calc(10px + var(--sar)) 10px calc(10px + var(--sal)); padding-top:calc(10px + var(--sat)); background:linear-gradient(rgba(var(--bg-rgb),.93),rgba(var(--bg-rgb),0)); -webkit-user-select:none;user-select:none} #fields{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden; background:var(--panel);border:1px solid var(--line);border-radius:12px} .frow{position:relative;display:flex;align-items:center;height:45px} .frow+.frow{border-top:1px solid var(--line)} .frow:focus-within{background:var(--panel2)} .pin{width:9px;height:9px;border-radius:50%;flex:none;margin-inline:14px 11px} .pin.from{background:var(--dim);box-shadow:0 0 0 3px rgba(138,151,171,.22)} .pin.to{background:var(--cam);box-shadow:0 0 0 3px rgba(239,68,68,.22)} .frow input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--fg); font-size:16px;outline:none;text-overflow:ellipsis} /* 16px stops iOS zooming on focus */ .frow input::placeholder{color:var(--dim)} .fclear{width:38px;height:100%;flex:none;border:0;background:none;color:var(--dim); font-size:23px;line-height:1;display:none} .frow.filled .fclear{display:block} /* a request is in flight — a hairline sweep, no spinner to crowd the row */ .frow.searching::after{content:'';position:absolute;inset-inline:34px 10px;bottom:5px;height:2px; border-radius:2px;background:linear-gradient(90deg,transparent,var(--fast),transparent); background-size:55% 100%;background-repeat:no-repeat;animation:sweep 1.1s linear infinite} @keyframes sweep{from{background-position:-55% 0}to{background-position:155% 0}} #topbtns{flex:none;display:flex;flex-direction:column;gap:7px} #topbtns .icon{flex:1;height:auto} .icon{width:var(--tap);height:var(--tap);flex:none;border-radius:12px;border:1px solid var(--line); background:var(--panel);color:var(--fg);font-size:19px;display:grid;place-items:center} .icon:active{background:var(--panel2)} .icon svg{width:22px;height:22px;display:block} .icon.on{color:var(--fast);border-color:var(--fast)} #locate{color:var(--fast)} /* the familiar blue "my location" crosshair */ /* ---------- floating map controls ---------- */ /* Map style, then the gear under it, stacked on the top bar's right edge and sitting over the map, so both survive the nav screen where the top bar hides. The search results list overlaps them on purpose — it outranks either. */ #layers,#settingsBtn{position:absolute;z-index:499;right:calc(10px + var(--sar)); top:calc(112px + var(--sat));box-shadow:var(--shadow)} #settingsBtn{top:calc(165px + var(--sat))} /* 46px button + the 7px gap */ body.navigating #layers{top:calc(10px + var(--sat))} /* the top bar is gone by then */ body.navigating #settingsBtn{top:calc(63px + var(--sat))} #layers svg,#settingsBtn svg{width:22px;height:22px} #results{position:absolute;top:calc(110px + var(--sat));z-index:501;background:var(--panel); left:calc(10px + var(--sal));right:calc(10px + var(--sar)); border:1px solid var(--line);border-radius:12px;display:none; max-height:min(46vh,340px);overflow-y:auto;-webkit-overflow-scrolling:touch} #results.show{display:block} #results>div{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer} #results>div:last-child{border:0} #results>div:active,#results>div.sel{background:var(--panel2)} #results>div.sel{box-shadow:inset 3px 0 0 var(--fast)} #results .r-main{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #results .r-sub{font-size:12px;color:var(--dim);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---------- bottom panel ---------- */ #panel{position:absolute;left:0;right:0;bottom:0;z-index:500;display:flex;flex-direction:column;gap:10px; padding:12px calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal)); background:linear-gradient(rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.8) 22%,rgb(var(--bg-rgb))); -webkit-user-select:none;user-select:none} .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px} .hint{text-align:center;color:var(--dim);font-size:13px} #attrib{font-size:10.5px;line-height:1.5;color:var(--attrib);text-align:center; padding:0 2px;-webkit-user-select:none;user-select:none} #attrib a,.linkish{color:var(--attrib-link);text-decoration:underline;text-underline-offset:2px} .linkish{border:0;background:none;padding:0;font:inherit} /* watch mode's front door — shown only when there is nothing else to say */ #watchcta{display:flex;flex-direction:column;gap:8px} button.go.watch{background:var(--panel);color:var(--fg);border:1px solid var(--line); font-size:16px;font-weight:650;letter-spacing:0;height:52px} button.go.watch svg{width:21px;height:21px;color:var(--cam)} /* the group inside sets stroke:currentColor */ .ctanote{font-size:11.5px;line-height:1.5;color:var(--dim);text-align:center;padding:0 6px} body.choosing #watchcta,body.navigating #watchcta,body.watching #watchcta{display:none} /* route choice */ #choose{display:none;flex-direction:column;gap:10px} body.choosing #choose{display:flex} body.choosing #idle{display:none} .opt{display:flex;align-items:center;gap:12px;border-inline-start:4px solid var(--line)} .opt.sel{border-inline-start-color:var(--pick,var(--fast));background:var(--panel2)} .opt .lbl{font-size:11px;letter-spacing:.09em;color:var(--dim);text-transform:uppercase} .opt .big{font-size:21px;font-weight:650;margin-top:2px} .opt .sub{font-size:12px;color:var(--dim);margin-top:2px} .opt .exp{margin-inline-start:auto;text-align:end} .opt .n{font-size:26px;font-weight:700;line-height:1} .opt .n.clean{color:var(--safe)} .opt .n.hot{color:var(--cam)} .opt .expl{font-size:10px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;margin-top:3px} .btnrow{display:flex;gap:10px} button.go{flex:1;height:56px;border:0;border-radius:14px;background:var(--safe);color:var(--on-safe); font-size:18px;font-weight:750;letter-spacing:.04em; display:flex;align-items:center;justify-content:center;gap:8px} button.go:active{filter:brightness(.9)} button.go svg{width:20px;height:20px;flex:none} button.go.alt{flex:0 0 40%;background:var(--panel2);color:var(--fg);border:1px solid var(--line); font-size:15px;font-weight:650;letter-spacing:0} button.go.alt.narrow{flex:0 0 58px} button.end{flex:1;background:var(--panel);color:var(--cam);border:1px solid var(--line);font-size:15px} /* navigation */ #nav{display:none} body.navigating #nav{display:flex;flex-direction:column;gap:10px} body.navigating #choose,body.navigating #idle{display:none} body.navigating #top,body.navigating #results{display:none} /* watch mode: the same card, strip and alert as navigation, with the route's share of them taken out. The top bar stays — a destination is always one tap away from here. */ #watch{display:none} body.watching #watch{display:flex;flex-direction:column;gap:10px} body.watching #choose,body.watching #idle,body.watching #legend{display:none} #wicon{color:var(--cam)} #turn,#wturn{display:flex;align-items:center;gap:14px} #turn .arrow,#wturn .arrow{font-size:34px;width:46px;text-align:center;flex:none} #turn .txt,#wturn .txt{flex:1;min-width:0} #turn .dist,#wturn .dist{font-size:26px;font-weight:750;line-height:1.05} #turn .instr,#wturn .instr{font-size:14px;color:var(--dim);margin-top:3px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #trip,#wtrip{display:flex;justify-content:space-between;gap:6px;font-size:13px;color:var(--dim);padding:0 4px} #trip b,#wtrip b{color:var(--fg);font-size:15px;font-weight:650} #alert,#walert{background:var(--cam);color:#fff;border-radius:12px;padding:12px 14px;font-weight:700; text-align:center;display:none;animation:pulse 1s ease-in-out infinite} #alert.show,#walert.show{display:block} @keyframes pulse{50%{opacity:.72}} /* Drawing a zone or picking a place takes over the next map tap, so the app says so somewhere that cannot be missed and offers the way out. */ #drawbar{position:absolute;top:calc(74px + var(--sat));left:50%;transform:translateX(-50%);z-index:601; display:flex;align-items:center;gap:12px;max-width:calc(100% - 24px); background:var(--panel);border:1px solid var(--warn);color:var(--fg); padding:8px;padding-inline-start:16px;border-radius:16px;box-shadow:var(--shadow);font-size:13px} #drawbar[hidden]{display:none} #drawbar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.drawing #map,body.drawing .leaflet-grab{cursor:crosshair} /* the panel is in the way of a corner tap — except while watch mode is up, where it is the camera warning and outranks any tidiness */ body.drawing:not(.watching) #panel{display:none} body.drawing #toast{display:none} body.wide #drawbar{left:calc(var(--rail) + (100vw - var(--rail))/2)} #toast{position:absolute;top:calc(74px + var(--sat));left:50%;transform:translateX(-50%);z-index:600; background:var(--panel2);border:1px solid var(--line);color:var(--fg);padding:9px 16px; border-radius:20px;font-size:13px;display:none;max-width:88%;text-align:center} #toast.show{display:block} body.navigating #toast{top:calc(12px + var(--sat));max-width:calc(100% - 132px)} .me{width:20px;height:20px;border-radius:50%;background:var(--fast); border:3px solid #fff;box-shadow:0 0 0 6px rgba(59,130,246,.25)} .cam-dot{width:9px;height:9px;border-radius:50%;background:var(--cam);border:1.5px solid #fff} /* a camera you reported yourself: same size, amber, so it never reads as confirmed OpenStreetMap data at a glance */ .cam-dot.mine{background:var(--warn);border-style:dashed} .start-dot{width:16px;height:16px;border-radius:50%;background:var(--fg); border:4px solid var(--panel);box-shadow:0 0 0 2px var(--fg)} /* ---------- sheets ---------- */ #scrim{position:fixed;inset:0;z-index:900;background:var(--scrim); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .sheet{position:fixed;z-index:901;left:0;right:0;bottom:0; background:var(--panel);border-top:1px solid var(--line); border-radius:20px 20px 0 0; padding:8px calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch; animation:rise .22s cubic-bezier(.2,.8,.3,1)} @keyframes rise{from{transform:translateY(14px);opacity:.4}} .sheet[hidden],#scrim[hidden]{display:none} .grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:2px auto 12px} .sheet h2{margin:0 0 6px;font-size:19px;font-weight:700} .sheet-sub{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--dim)} .closebtn{width:100%;height:50px;margin-top:5px;border-radius:14px;border:1px solid var(--line); background:none;color:var(--dim);font-size:15px} .closebtn.accent{color:var(--fg);background:var(--panel2);margin-bottom:4px} .field{display:flex;flex-direction:column;gap:7px;margin:0 0 14px} .field>span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)} .field>span b{color:var(--fg);font-weight:650;letter-spacing:0;text-transform:none;font-size:13px} .field select{width:100%;height:48px;padding:0 12px;border-radius:12px;border:1px solid var(--line); background:var(--panel2);color:var(--fg);font-size:15px;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%), linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px; background-size:6px 6px,6px 6px;background-repeat:no-repeat} [dir=rtl] .field select{padding:0 12px; background-image:linear-gradient(135deg,transparent 50%,var(--dim) 50%), linear-gradient(45deg,var(--dim) 50%,transparent 50%); background-position:13px 21px,19px 21px} .field input[type=range]{width:100%;height:34px;accent-color:var(--safe);background:none} .fieldnote{margin:-9px 0 14px;font-size:12px;color:var(--dim)} /* ---------- settings rows ---------- */ .set-group{padding:4px 0 6px;border-top:1px solid var(--line)} .set-group:first-child{border-top:0} .set-group h3{margin:10px 0 2px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} .row{display:flex;align-items:center;gap:14px;width:100%;min-height:var(--tap); padding:11px 0;margin:0;border:0;border-top:1px solid var(--line); background:none;color:var(--fg);text-align:left;font:inherit;text-decoration:none} .set-group h3+.row,.set-group>p+.row{border-top:0} .row .rt{flex:1;min-width:0} .row .rl{font-size:15px} .rd{font-size:12px;line-height:1.45;color:var(--dim);margin-top:3px} .rd.wide{margin:8px 0 2px} .rd code{font-size:11px;background:var(--panel2);border-radius:4px;padding:1px 4px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .row select{flex:none;width:auto;min-width:118px;height:42px;padding:0 34px 0 12px; border-radius:11px;border:1px solid var(--line);background-color:var(--panel2);color:var(--fg); font-size:14px;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%), linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 18px) 18px,calc(100% - 12px) 18px; background-size:6px 6px,6px 6px;background-repeat:no-repeat} .minibtn{flex:none;height:40px;padding:0 18px;border-radius:11px;border:1px solid var(--line); background:var(--panel2);color:var(--fg);font-size:14px} .minibtn:active{filter:brightness(1.25)} a.navrow,button.navrow{cursor:pointer} .navrow::after{content:'\203a';flex:none;color:var(--dim);font-size:22px;line-height:1;padding-right:2px} .navrow:active{background:var(--panel2)} .row.soon .rl{color:var(--dim)} .chip{flex:none;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--warn); border:1px solid var(--warn-soft);border-radius:999px;padding:4px 9px} /* ---------- lists the new sheets build: places, zones, pins, packs ---------- Every one of them is the same shape — a label, a line of detail, and one or two small controls — so they all reuse .row and only need the trimmings. */ .row.tap{cursor:pointer} /* a row that does not apply in this mode — tolls and highways on foot */ .row.na{opacity:.45} .row.tap:active{background:var(--panel2)} .rowbtns{flex:none;display:flex;align-items:center;gap:8px} .iconbtn{flex:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--line); background:var(--panel2);color:var(--dim);font-size:17px;line-height:1;display:grid;place-items:center} .iconbtn:active{filter:brightness(1.25)} .iconbtn.warn{color:var(--cam)} .emptynote{font-size:12.5px;line-height:1.5;color:var(--dim);padding:12px 0 4px} .set-group .emptynote+.row{border-top:1px solid var(--line)} /* a link wearing the sheet's button costume */ a.closebtn{display:flex;align-items:center;justify-content:center;text-decoration:none} a.closebtn.accent{color:var(--fg)} .sheet .fieldnote+.closebtn{margin-top:0} /* toggle switch — a checkbox wearing a costume, so it keeps keyboard and a11y */ .sw{flex:none;appearance:none;-webkit-appearance:none;margin:0;position:relative; width:50px;height:30px;border-radius:15px;border:1px solid var(--line);background:var(--panel2); transition:background .15s,border-color .15s} .sw::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%; background:var(--dim);transition:transform .15s,background .15s} .sw:checked{background:var(--safe-soft);border-color:var(--safe)} .sw:checked::after{transform:translateX(20px);background:var(--safe)} /* map style picker */ .styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-bottom:14px} button.style{padding:0 0 8px;border:1px solid var(--line);border-radius:12px;background:var(--panel2); color:var(--fg);overflow:hidden;display:flex;flex-direction:column;align-items:stretch;text-align:left} button.style img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--panel); border-bottom:1px solid var(--line);margin-bottom:8px} button.style.noimg{padding-top:8px} button.style .nm{font-size:13.5px;font-weight:650;padding:0 9px} button.style .ds{font-size:10.5px;color:var(--dim);padding:1px 9px 0;line-height:1.3} button.style.sel{border-color:var(--safe);box-shadow:inset 0 0 0 1px var(--safe)} button.style.sel .nm::after{content:' \2713';color:var(--safe)} button.style:active{filter:brightness(1.15)} .credits{-webkit-user-select:text;user-select:text} .credits section{padding:14px 0;border-top:1px solid var(--line)} .credits h3{margin:0 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} .credits p{margin:0 0 9px;font-size:13.5px;line-height:1.55} .credits p:last-child{margin-bottom:0} .credits a{color:var(--fg);text-decoration:underline;text-underline-offset:2px; text-decoration-color:var(--dim)} .credits code{font-size:12px;background:var(--panel2);border-radius:4px;padding:1px 5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap} .credits em{color:var(--fg);font-style:normal;font-weight:650} /* ---------- right-to-left languages ---------- */ /* Arabic reverses the interface. Translated phrases keep the page direction — "22 دقيقة" puts its number on the right and that is correct — so only the genuinely Latin runs are isolated: a bare count and an OSM tag. */ [dir=rtl] .opt .n,[dir=rtl] .credits code{direction:ltr;unicode-bidi:isolate} [dir=rtl] .leaflet-popup-content{text-align:right} [dir=rtl] .frow.searching::after{background-image:linear-gradient(270deg,#3b82f600,var(--fast),#3b82f600)} /* ---------- landscape phones: panel becomes a right-hand column ---------- */ @media (orientation:landscape) and (max-height:520px){ #panel{left:auto;top:0;width:min(52%,360px);justify-content:flex-end; padding-top:calc(10px + var(--sat)); background:linear-gradient(90deg,rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.85) 34%,rgb(var(--bg-rgb)))} #top{right:min(52%,360px)} #results{right:calc(min(52%,360px) + 10px);max-height:min(50vh,190px)} #layers,#settingsBtn{right:calc(min(52%,360px) + 10px)} .opt .big{font-size:19px} .opt .n{font-size:22px} button.go{height:48px;font-size:16px} #turn .dist,#wturn .dist{font-size:22px} #turn .arrow,#wturn .arrow{font-size:28px;width:38px} .sheet{left:auto;width:min(78%,460px);max-height:100dvh;top:0; border-radius:20px 0 0 0;padding-top:calc(12px + var(--sat))} } /* ---------- tall/narrow big screens: keep the UI phone-width, centred ---------- Wide landscape screens get the rail layout below instead; this is the fallback for portrait monitors and tablets held upright. */ @media (min-width:760px){ body:not(.wide) #top{left:50%;right:auto;width:min(430px,92vw);transform:translateX(-50%);padding-top:14px} body:not(.wide) #results{left:50%;right:auto;width:min(430px,92vw);transform:translateX(-50%)} body:not(.wide) #layers{right:calc(50% - min(215px,46vw) + 10px);top:calc(116px + var(--sat))} body:not(.wide) #settingsBtn{right:calc(50% - min(215px,46vw) + 10px);top:calc(169px + var(--sat))} body:not(.wide) #panel{left:50%;right:auto;width:min(430px,92vw);transform:translateX(-50%); background:linear-gradient(rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.8) 22%,rgba(var(--bg-rgb),.95))} body:not(.wide) .sheet{left:50%;right:auto;width:min(480px,94vw);transform:translateX(-50%); border-radius:20px 20px 0 0} /* A big phone on its side is over 760px wide but still a phone: undo the centring above and put the right-hand column back, rather than stacking a 430px top bar on top of a 430px panel in the same corner. */ @media (orientation:landscape) and (max-height:520px){ body:not(.wide) #panel{left:auto;right:0;width:min(52%,360px);transform:none} body:not(.wide) .sheet{left:auto;right:0;transform:none} body:not(.wide) #top{left:0;right:min(52%,360px);width:auto;transform:none} body:not(.wide) #results{left:calc(10px + var(--sal));width:auto;transform:none; right:calc(min(52%,360px) + 10px)} /* the panel is back to the 52% column here, so the buttons clear that */ body:not(.wide) #layers,body:not(.wide) #settingsBtn{right:calc(min(52%,360px) + 10px)} } } /* ================================================================= wide screens Desktops, tablets in landscape and car screens (Tesla's 15" and 17") get a permanent control rail down the left and the whole rest of the glass as map. The map is inset rather than covered, so nothing you are routed through hides behind a panel — and a route can be fitted to the map without guessing how much of it the UI is sitting on top of. Turned on by a `wide` class from app.js (matchMedia), so the JS knows the layout it is drawing for and can fill the extra height with real content. */ body.wide{--rail:clamp(360px,29vw,470px);--railtop:calc(116px + var(--sat))} body.wide #map{left:var(--rail);border-left:1px solid var(--line)} /* rail: search at the top, content below, attribution pinned to the floor */ body.wide #top{left:0;right:auto;transform:none;width:var(--rail);background:none; padding:calc(12px + var(--sat)) 12px 12px calc(12px + var(--sal))} body.wide #results{left:calc(12px + var(--sal));right:auto;transform:none; width:calc(var(--rail) - 24px - var(--sal));top:var(--railtop); max-height:min(58vh,540px)} body.wide #panel{left:0;right:auto;transform:none;width:var(--rail); top:var(--railtop);bottom:0;justify-content:flex-start;background:none; padding:0 12px calc(12px + var(--sab)) calc(12px + var(--sal))} body.wide.navigating #panel{top:0;padding-top:calc(12px + var(--sat))} body.wide #attrib{margin-top:auto;padding-top:10px;font-size:11.5px} body.wide #toast{left:calc(var(--rail) + (100vw - var(--rail))/2)} /* the map's own furniture floats over the map half, clear of the rail */ body.wide #layers{top:calc(12px + var(--sat));right:calc(12px + var(--sar))} body.wide #settingsBtn{top:calc(var(--tap) + 20px + var(--sat));right:calc(12px + var(--sar))} #mapctl{position:absolute;z-index:499;display:none;flex-direction:column;gap:8px; right:calc(12px + var(--sar));bottom:calc(16px + var(--sab))} body.wide #mapctl{display:flex} #mapctl .icon{box-shadow:var(--shadow);font-size:25px;line-height:1} /* everything that has to be read at a glance, larger */ body.wide .card{padding:16px} body.wide .hint{font-size:14px;padding:18px 16px} body.wide .opt .big{font-size:24px} body.wide .opt .n{font-size:31px} body.wide .opt .sub{font-size:13px} body.wide button.go{height:60px;font-size:19px} body.wide button.go.alt{font-size:16px} body.wide #turn .arrow,body.wide #wturn .arrow{font-size:46px;width:58px} body.wide #turn .dist,body.wide #wturn .dist{font-size:36px} body.wide #turn .instr,body.wide #wturn .instr{font-size:16px;-webkit-line-clamp:3} body.wide #trip,body.wide #wtrip{font-size:14px;padding:0 6px} body.wide #trip b,body.wide #wtrip b{font-size:19px} body.wide #alert,body.wide #walert{font-size:19px;padding:16px} body.wide button.go.watch{height:56px;font-size:17px} body.wide .ctanote{font-size:12.5px} /* the rail has height to spare before a route exists — say what the map means */ #legend{display:none} body.wide #legend{display:block;padding:16px 16px 14px} body.wide #idle{display:none} /* the legend says it, with the map explained too */ body.wide.choosing #legend,body.wide.navigating #legend, body.wide.watching #legend{display:none} #legend h3{margin:0 0 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} #legend ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px} #legend li{position:relative;padding-left:26px;font-size:13px;line-height:1.5;color:var(--dim)} #legend .k{position:absolute;left:0;top:6px;width:16px;height:4px;border-radius:2px} #legend .k.safe{background:var(--safe)} #legend .k.fast{background:var(--fast)} #legend .k.cam{width:10px;height:10px;top:3px;left:3px;border-radius:50%; background:var(--cam);border:1.5px solid #fff} #legend p{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line); font-size:12.5px;line-height:1.5;color:var(--dim)} #legend kbd{font:inherit;font-size:11.5px;background:var(--panel2);border:1px solid var(--line); border-radius:5px;padding:1px 5px;color:var(--fg)} body.tesla #legend .kb{display:none} /* no keyboard in a car */ /* what the fastest route actually costs you, spelled out */ #tradeoff{display:none} body.wide #tradeoff{display:block;font-size:13px;line-height:1.45;color:var(--dim); padding:0 4px;text-align:center} #tradeoff b{color:var(--fg);font-weight:650} /* turns and cameras in the order you meet them — the one thing a phone has no room for, and the best use of a rail's spare height */ .railhead{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim); padding:4px 4px 0} .steplist,.railhead{display:none} body.wide .steplist{display:flex;flex-direction:column;gap:8px; flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(#000 88%,transparent); mask-image:linear-gradient(#000 88%,transparent)} body.wide .railhead{display:block} body.wide.navigating #nav,body.wide.choosing #choose, body.wide.watching #watch{flex:1;min-height:0} .step{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--panel); border:1px solid var(--line);border-radius:12px} .step .ic{font-size:22px;width:26px;text-align:center;flex:none;line-height:1} .step .st{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .step .sd{font-size:13px;color:var(--dim);flex:none;font-variant-numeric:tabular-nums} .step.cam{border-color:var(--cam-line);background:var(--cam-soft)} .step.cam .ic{color:var(--cam)} .step.cam .st{color:var(--fg)} /* sheets stop being bottom sheets once there is a middle of the screen to use */ body.wide .sheet{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%); width:min(760px,84vw);max-height:86dvh;border:1px solid var(--line);border-radius:18px; padding:16px 20px 20px;animation:pop .2s cubic-bezier(.2,.8,.3,1)} @keyframes pop{from{opacity:.4;transform:translate(-50%,-46%)}} body.wide .sheet .grab{display:none} body.wide .sheet h2{font-size:22px} body.wide .sheet-sub{font-size:14px} body.wide .styles{grid-template-columns:repeat(auto-fit,minmax(126px,1fr))} body.wide .credits{display:grid;grid-template-columns:1fr 1fr;column-gap:26px} body.wide .settings{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-items:start} body.wide .settings.one{grid-template-columns:1fr} /* a single section, full width */ body.wide .set-group{border-top:1px solid var(--line)} /* both columns start the same */ body.wide .credits section:nth-child(2){border-top:1px solid var(--line)} body.wide .closebtn{display:block;max-width:280px;margin-left:auto;margin-right:auto} body.wide a.closebtn{display:flex} /* ---------- car screens ---------- A Tesla's browser reports a desktop-sized viewport but is used at arm's length, on a moving vehicle, by someone who should be looking at the road. Bigger targets, bigger numbers, nothing else changed. */ body.tesla{--tap:56px} body.tesla .frow{height:54px} body.tesla .frow input{font-size:18px} body.tesla #results>div{padding:14px 16px} body.tesla #results .r-main{font-size:17px} body.tesla #results .r-sub{font-size:13px} body.tesla.wide{--rail:clamp(400px,31vw,520px);--railtop:calc(136px + var(--sat))} body.tesla.wide .opt .big{font-size:27px} body.tesla.wide .opt .n{font-size:35px} body.tesla.wide .opt .lbl,body.tesla.wide .opt .expl{font-size:12px} body.tesla.wide button.go{height:68px;font-size:21px} body.tesla.wide #turn .arrow{font-size:52px;width:64px} body.tesla.wide #turn .dist{font-size:42px} body.tesla.wide #turn .instr{font-size:18px} body.tesla.wide #trip{font-size:15px} body.tesla.wide #trip b{font-size:21px} body.tesla.wide #alert{font-size:22px;padding:18px} body.tesla.wide .step{padding:13px 15px} body.tesla.wide .step .st{font-size:16px} body.tesla.wide .step .sd{font-size:15px} body.tesla.wide .step .ic{font-size:25px} body.tesla.wide #attrib{font-size:12.5px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} #alert{animation:none;outline:2px solid #fff;outline-offset:-4px} }