/* pickthebus night map (/map/, drawn by atlas.js): the site's own night-coach navy and sodium amber, always night
   like the home page's hero. Its colours and fonts are set on .atlas, so nothing here changes the rest of the page
   (the footer keeps the reader's theme), and every class is its own (a-, ax-, is-), so site.css can't reach in. */
body.mapp header.top{position:absolute;left:0;right:0;z-index:20;background:linear-gradient(180deg,rgba(6,10,22,.75),rgba(6,10,22,0));border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;color:#E9EEFA}
body.mapp header.top .mark b{color:#FFB23F}
body.mapp.atlas-on header.top{display:none}          /* the map has its own top bar once its script runs */
/* the site's cookie line sits under the top bar here, between the panel and the controls, clear of the day's bar.
   The three layouts below (side panel, sheet, short and wide) are the ones atlas.js asks for by the same words. */
body.mapp .pbar{bottom:auto;top:calc(76px + env(safe-area-inset-top,0px));left:400px;right:126px}
@media (max-width:980px){body.mapp .pbar{left:364px}}
@media (max-width:559.98px),(max-width:760px) and (min-height:540px){body.mapp .pbar{top:calc(162px + env(safe-area-inset-top,0px));left:16px;right:16px}}
@media (max-height:539.98px) and (min-width:560px){body.mapp .pbar{top:calc(58px + env(safe-area-inset-top,0px));right:112px;padding:8px 8px 8px 14px;font-size:.84rem}}
@media (max-height:539.98px) and (min-width:560px) and (max-width:760px){body.mapp .pbar{left:328px}}
@media (max-height:539.98px) and (min-width:560px) and (max-width:619.98px){body.mapp .pbar{left:16px;right:auto;width:280px}}
.atlas{
  --night:#060A16; --night-2:#0C1326; --night-3:#18213C; --sodium:#FFB23F; --headlight:#FFE7B3; --moon:#9EA9FF;
  --ink:#E9EEFA; --dim:#8D98B8; --faint:#66718F; --line:rgba(150,170,230,.16); --line-2:rgba(150,170,230,.28);
  --glass:rgba(8,13,28,.74); --amber-ink:#1B1200;
  --display:"Big Shoulders Display","Arial Narrow",system-ui,sans-serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:16px; --panel-w:352px; --sheet:0px; --spring:cubic-bezier(.2,.9,.25,1);
  --gl:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px)); --st:env(safe-area-inset-top, 0px); --sb:env(safe-area-inset-bottom, 0px);
  color-scheme:dark;
}
/* :where keeps these as weak as a bare element rule, so every class below still wins */
:where(.atlas) button,:where(.atlas) input{font:inherit;color:inherit}
#a-sb{position:absolute;left:0;bottom:0;width:1px;height:env(safe-area-inset-bottom, 0px);pointer-events:none}
:where(.atlas) button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.atlas :focus-visible{outline:2px solid var(--sodium);outline-offset:2px;border-radius:8px}
.atlas{position:relative;height:100vh;height:100dvh;min-height:540px;overflow:hidden;background:radial-gradient(120% 90% at 62% 28%,#0A1230 0,#04070F 72%);color:var(--ink);font:400 15px/1.5 var(--sans);font-feature-settings:normal;-webkit-user-select:none;user-select:none}
.a-layer{position:absolute;inset:0;width:100%;height:100%;display:block}
#a-gl{pointer-events:none}
#a-over{touch-action:none;cursor:grab;outline:none}
#a-over.is-grabbing{cursor:grabbing}
#a-over.is-point{cursor:pointer}
#a-over:focus-visible{outline:2px solid var(--sodium);outline-offset:-3px;border-radius:0}

/* glass: the cards that float over the map */
.a-search,.a-panel,.a-time,.a-ib,.a-tip,.a-menu,.a-hint,.a-pill{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);border:1px solid var(--line);box-shadow:0 24px 60px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.045)}

/* ---------- top: mark, destination sign, search ---------- */
.a-top{position:absolute;z-index:6;top:calc(var(--pad) + var(--st));left:var(--gl);right:var(--gr);display:flex;align-items:center;gap:14px;pointer-events:none}
.a-top>*{pointer-events:auto}
.a-mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 1.32rem/1 var(--sans);letter-spacing:-.02em;flex:none}
.a-mark svg{flex:none;border-radius:9px}
.a-mark b{color:var(--sodium)}
.a-signbox{flex:1;min-width:0;display:flex;justify-content:center;pointer-events:none}
.a-sign{display:block;width:min(560px,100%);height:48px;border-radius:9px;box-shadow:0 0 0 1px rgba(150,170,230,.14),0 16px 40px -22px #000}
.a-search{position:relative;flex:none;width:250px;height:44px;border-radius:14px;display:flex;align-items:center;gap:8px;padding:0 12px;transition:border-color .2s,width .3s var(--spring)}
.a-search:focus-within{border-color:rgba(255,178,63,.6)}
.a-search>svg{width:18px;height:18px;flex:none;color:var(--dim)}
.a-search input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font:600 .95rem var(--sans);color:var(--ink)}
.a-search input::placeholder{color:var(--dim);font-weight:500}
.a-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.a-search kbd{font:600 .72rem var(--mono);color:var(--dim);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px}
.a-search:focus-within kbd{display:none}
.a-menu{background:rgba(8,13,28,.95);position:absolute;top:calc(100% + 8px);left:0;right:0;border-radius:14px;padding:6px;max-height:min(60vh,420px);overflow:auto;z-index:8}
.a-menu[hidden]{display:none}
.a-opt{display:flex;align-items:baseline;gap:8px;width:100%;padding:9px 10px;border:0;background:none;border-radius:9px;text-align:left;font:600 .95rem var(--sans)}
.a-opt small{font:600 .72rem var(--mono);color:var(--dim);letter-spacing:.04em}
.a-opt span{margin-left:auto;font:500 .8rem var(--sans);color:var(--dim);white-space:nowrap}
.a-opt[aria-selected="true"],.a-opt:hover{background:rgba(255,178,63,.13)}
.a-none{padding:10px;color:var(--dim);font-size:.9rem;margin:0}

/* ---------- the panel (a bottom sheet on phones) ---------- */
.a-panel{position:absolute;z-index:5;left:var(--gl);top:calc(78px + var(--st));width:var(--panel-w);max-height:calc(100% - 78px - var(--st) - var(--pad) - var(--sb));border-radius:20px;display:flex;flex-direction:column;overflow:hidden}
.a-grip{display:none}
.a-scroll{overflow:auto;overscroll-behavior:contain;padding:18px 18px 16px;scrollbar-width:thin;scrollbar-color:rgba(150,170,230,.3) transparent;-webkit-user-select:text;user-select:text}
.a-scroll::-webkit-scrollbar{width:8px}.a-scroll::-webkit-scrollbar-thumb{background:rgba(150,170,230,.25);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.ax-eyebrow{display:flex;align-items:center;gap:8px;font:700 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.ax-eyebrow .ax-dot{width:8px;height:8px;border-radius:50%;background:var(--sodium);box-shadow:0 0 0 0 rgba(255,178,63,.6);animation:ax-beat 2.2s infinite}
.ax-eyebrow.is-moon{color:var(--moon)}
@keyframes ax-beat{0%{box-shadow:0 0 0 0 rgba(255,178,63,.55)}70%,100%{box-shadow:0 0 0 9px rgba(255,178,63,0)}}
.ax-big{display:flex;align-items:flex-end;gap:12px;margin:0 0 14px}
.ax-big b{font:900 4rem/.82 var(--display);letter-spacing:.005em;color:var(--sodium);font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(255,178,63,.35)}
.ax-big span{font:500 .93rem/1.3 var(--sans);color:var(--ink);padding-bottom:2px;text-wrap:balance}
.ax-big em{font-style:normal;color:var(--dim)}
.ax-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.ax-trio>div{background:rgba(150,170,230,.07);border:1px solid rgba(150,170,230,.1);border-radius:12px;padding:10px 10px 9px;min-width:0}
.ax-trio b{display:block;font:800 1.55rem/1 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ax-trio span{display:block;font:500 .74rem/1.25 var(--sans);color:var(--dim);margin-top:5px}
.ax-lede{margin:0 0 14px;color:var(--ink);font-size:.95rem;text-wrap:pretty}
.a-scroll h2{font:800 2.1rem/1 var(--display);letter-spacing:.01em;margin:0 0 12px;text-wrap:balance;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.a-scroll h2 small,.ax-cc{font:600 .72rem var(--mono);color:var(--dim);letter-spacing:.06em;border:1px solid var(--line-2);border-radius:6px;padding:2px 6px;line-height:1.2;vertical-align:middle}
.a-scroll h3{font:700 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:16px 0 8px}
.ax-hubs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.ax-chip{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--line-2);background:rgba(150,170,230,.06);border-radius:999px;padding:6px 11px;font:600 .88rem var(--sans);transition:background .15s,border-color .15s,transform .15s}
.ax-chip small{font:600 .74rem var(--mono);color:var(--sodium)}
.ax-chip:hover{background:rgba(255,178,63,.14);border-color:rgba(255,178,63,.55)}
.ax-chip:active{transform:scale(.97)}
.ax-row{display:flex;gap:8px;margin:16px 0 4px;flex-wrap:wrap}
.ax-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:13px;border:1px solid transparent;background:var(--sodium);color:var(--amber-ink);font:800 .95rem var(--sans);text-decoration:none;transition:transform .15s,filter .15s,background .15s;flex:1}
.ax-btn:hover{filter:brightness(1.08)}.ax-btn:active{transform:scale(.98)}
.ax-btn.is-ghost{background:rgba(150,170,230,.07);border-color:var(--line-2);color:var(--ink);font-weight:700}
.ax-btn.is-ghost:hover{background:rgba(150,170,230,.14);filter:none}
.ax-btn.is-ghost[aria-pressed="true"]{background:rgba(158,169,255,.2);border-color:var(--moon);color:#fff}
.ax-btn svg{width:13px;height:13px}
.ax-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding:0;list-style:none;font:500 .78rem/1.3 var(--sans);color:var(--dim)}
.ax-key li{display:flex;align-items:center;gap:7px}
.ax-key i{flex:none;display:block}
.ax-key .ax-k-bus{width:9px;height:9px;border-radius:50%;background:var(--headlight);box-shadow:0 0 0 3px rgba(255,178,63,.35),0 0 10px var(--sodium)}
.ax-key .ax-k-line{width:20px;height:3px;border-radius:3px;background:var(--sodium);box-shadow:0 0 8px rgba(255,178,63,.7)}
.ax-key .ax-k-line.is-thin{height:1.5px;opacity:.6;box-shadow:none}
.ax-key .ax-k-line.is-moon{background:var(--moon);box-shadow:0 0 8px rgba(158,169,255,.7)}
.ax-key .ax-k-city{width:7px;height:7px;border-radius:50%;background:#C6D6FF}
.ax-fine{margin:14px 0 0;font-size:.78rem;line-height:1.45;color:var(--faint);text-wrap:pretty}
.ax-back{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:4px 0;margin:-4px 0 10px;font:600 .86rem var(--sans);color:var(--dim)}
.ax-back:hover{color:var(--ink)}

/* the reach: how far in so many hours */
.ax-reach{margin:2px 0 14px;padding:12px 12px 10px;border:1px solid rgba(150,170,230,.12);border-radius:14px;background:rgba(150,170,230,.05)}
.ax-reach label{display:flex;justify-content:space-between;align-items:baseline;font:600 .86rem var(--sans);color:var(--dim)}
.ax-reach label b{font:800 1.25rem/1 var(--display);letter-spacing:.02em;color:var(--sodium);font-variant-numeric:tabular-nums}
.ax-reach p{margin:6px 0 0;font-size:.84rem;color:var(--ink)}
.ax-reach p b{font-variant-numeric:tabular-nums}
input[type=range].ax-sl{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:none;margin:4px 0 0;display:block}
input[type=range].ax-sl::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--sodium) var(--f,100%),rgba(150,170,230,.22) var(--f,100%))}
input[type=range].ax-sl::-moz-range-track{height:4px;border-radius:4px;background:rgba(150,170,230,.22)}
input[type=range].ax-sl::-moz-range-progress{height:4px;border-radius:4px;background:var(--sodium)}
input[type=range].ax-sl::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:var(--headlight);border:3px solid var(--sodium);box-shadow:0 0 0 5px rgba(255,178,63,.18),0 2px 8px rgba(0,0,0,.6)}
input[type=range].ax-sl::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--headlight);border:3px solid var(--sodium);box-shadow:0 0 0 5px rgba(255,178,63,.18)}
.ax-seg{display:flex;gap:4px;padding:3px;border-radius:12px;background:rgba(150,170,230,.08);margin:0 0 10px}
.ax-seg button{flex:1;min-height:34px;border:0;background:none;border-radius:9px;font:700 .84rem var(--sans);color:var(--dim);transition:background .18s,color .18s}
.ax-seg button[aria-pressed="true"]{background:rgba(233,238,250,.14);color:var(--ink)}
.ax-seg button.is-moon[aria-pressed="true"]{background:rgba(158,169,255,.22);color:#fff}

@keyframes ax-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.a-scroll>*{animation:ax-rise .42s var(--spring) both}
.a-scroll>*:nth-child(2){animation-delay:.03s}.a-scroll>*:nth-child(3){animation-delay:.06s}.a-scroll>*:nth-child(4){animation-delay:.09s}.a-scroll>*:nth-child(5){animation-delay:.12s}.a-scroll>*:nth-child(n+6){animation-delay:.15s}
.ax-dests.is-fresh li{animation:ax-rise .4s var(--spring) both;animation-delay:calc(var(--i,0)*16ms + .12s)}
/* the destinations */
.ax-dests{list-style:none;margin:0 -8px;padding:0}
.ax-dests li{margin:0}
.ax-dest{display:grid;grid-template-columns:1fr 92px 52px;align-items:center;gap:10px;width:100%;padding:8px;border:0;background:none;border-radius:10px;text-align:left;transition:background .12s}
.ax-dest:hover{background:rgba(255,178,63,.11)}
.ax-dest .ax-nm{font:600 .93rem/1.2 var(--sans);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-dest .ax-nm small{font:600 .68rem var(--mono);color:var(--dim);margin-left:6px;letter-spacing:.05em}
.ax-dest .ax-nm i{font-style:normal;color:var(--moon);margin-left:5px;font-size:.82rem}
.ax-dest .ax-pd{font:600 .78rem/1.1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ax-dest .ax-pd u{display:block;height:3px;border-radius:3px;margin-top:5px;background:rgba(150,170,230,.16);text-decoration:none;overflow:hidden}
.ax-dest .ax-pd u b{display:block;height:100%;width:var(--w);background:var(--sodium);border-radius:3px}
.ax-dest.is-n .ax-pd u b{background:var(--moon)}
.ax-dest .ax-ft{font:600 .8rem var(--mono);color:var(--dim);text-align:right;font-variant-numeric:tabular-nums}
.ax-dest.is-off{opacity:.32}
.ax-more{width:100%;margin:8px 0 0;min-height:40px;border-radius:12px;border:1px dashed var(--line-2);background:none;font:600 .86rem var(--sans);color:var(--dim)}
.ax-more:hover{color:var(--ink);border-color:var(--dim)}

/* the ticket: one city pair */
.ax-ticket{border:1px solid rgba(255,178,63,.35);border-radius:16px;background:linear-gradient(180deg,rgba(255,178,63,.1),rgba(255,178,63,.03));padding:14px;margin:0 0 12px;position:relative;overflow:hidden}
.ax-ticket::before,.ax-ticket::after{content:"";position:absolute;top:74px;width:16px;height:16px;border-radius:50%;background:#0A1022;border:1px solid rgba(255,178,63,.35)}
.ax-ticket::before{left:-9px}.ax-ticket::after{right:-9px}
.ax-od{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font:800 1.9rem/1 var(--display);letter-spacing:.01em;margin:0 0 6px}
.ax-od i{font-style:normal;color:var(--sodium);font-size:1.2rem}
.ax-od-sub{font:600 .8rem var(--mono);color:var(--dim);margin:0 0 16px;letter-spacing:.03em}
.ax-tk{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px dashed rgba(255,178,63,.35);padding-top:14px;margin:0 0 12px}
.ax-tk b{display:block;font:900 2.3rem/.9 var(--display);color:var(--sodium);font-variant-numeric:tabular-nums}
.ax-tk span{display:block;font:500 .78rem var(--sans);color:var(--dim);margin-top:5px}
.ax-ops{margin:0 0 4px;font-size:.88rem;color:var(--ink)}
.ax-ops i{font-style:normal;color:var(--moon)}
.ax-prog{margin:4px 0 14px}
.ax-prog .ax-bar{height:6px;border-radius:6px;background:rgba(150,170,230,.16);position:relative;margin:10px 0 8px}
.ax-prog .ax-bar b{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,rgba(255,178,63,.35),var(--sodium));width:var(--w)}
.ax-prog .ax-bar i{position:absolute;top:50%;left:var(--w);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--headlight);box-shadow:0 0 0 4px rgba(255,178,63,.25),0 0 16px var(--sodium)}
.ax-prog .ax-ends{display:flex;justify-content:space-between;gap:8px;font:600 .74rem/1.35 var(--mono);color:var(--dim)}
.ax-prog .ax-ends span{white-space:nowrap}
.ax-prog .ax-ends span:nth-child(2){align-self:flex-end;color:var(--ink)}
.ax-prog .ax-ends span:last-child{text-align:right}
.ax-prog .ax-ends b{color:var(--ink);font-weight:600}

/* ---------- the day: clock, scrub, play ---------- */
.a-time{position:absolute;z-index:5;left:calc(var(--panel-w) + var(--gl) + var(--pad));right:var(--gr);bottom:calc(var(--pad) + var(--sb));max-width:760px;margin:0 auto;height:64px;border-radius:18px;display:flex;align-items:center;gap:12px;padding:0 14px 0 10px;transition:opacity .25s,transform .35s var(--spring)}
.a-ib{width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;color:var(--ink);font:700 .86rem var(--sans);transition:background .15s,border-color .15s,transform .15s,color .15s}
.a-ib svg{width:15px;height:15px}
.a-ib:hover{background:rgba(24,33,60,.9);border-color:var(--line-2)}
.a-ib:active{transform:scale(.95)}
.a-ib.is-txt{width:auto;padding:0 13px}
.a-ib[aria-pressed="true"]{background:rgba(158,169,255,.24);border-color:var(--moon);color:#fff}
#a-play{background:var(--sodium);color:var(--amber-ink);border-color:transparent;box-shadow:0 0 22px -4px rgba(255,178,63,.7)}
#a-play:hover{filter:brightness(1.08)}
.a-clock{flex:none;min-width:72px}
.a-clock b{display:block;font:700 1.32rem/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.a-clock span{display:block;font:500 .68rem/1.2 var(--sans);color:var(--dim);margin-top:4px;white-space:nowrap}
.a-track{position:relative;flex:1;min-width:0;height:44px}
.a-track canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.a-track input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:none}
.a-head{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--headlight);box-shadow:0 0 10px var(--sodium);border-radius:2px;pointer-events:none}
.a-head::after{content:"";position:absolute;left:50%;top:-3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--headlight);box-shadow:0 0 0 3px rgba(255,178,63,.3)}
.a-track:has(input:focus-visible){outline:2px solid var(--sodium);outline-offset:3px;border-radius:8px}
/* "Back to now" floats above the bar, so the track under the pointer never changes width while it is dragged */
.a-pill{position:absolute;right:6px;bottom:calc(100% + 8px);height:34px;padding:0 14px;border-radius:999px;font:700 .8rem var(--sans);color:var(--sodium);border-color:rgba(255,178,63,.5)}
.a-pill:hover{background:rgba(255,178,63,.14)}
.a-pill[hidden]{display:none}

/* ---------- controls ---------- */
.a-ctl{position:absolute;z-index:5;right:var(--gr);top:calc(78px + var(--st));display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.a-ctl .a-sep{height:4px}
.a-ib.is-moon{color:var(--moon)}

/* ---------- tip, caption, hint ---------- */
.a-tip{position:absolute;z-index:7;left:0;top:0;max-width:260px;padding:9px 12px;border-radius:12px;font:500 .84rem/1.35 var(--sans);pointer-events:none;will-change:transform}
.a-tip[hidden]{display:none}
.a-tip b{display:block;font:700 .95rem var(--sans)}
.a-tip small{color:var(--dim);font-size:.76rem}
.a-cap{position:absolute;z-index:4;left:calc(var(--panel-w) + var(--gl) + var(--pad));right:var(--gr);bottom:calc(106px + var(--sb));text-align:center;font:800 clamp(1.5rem,3.2vw,2.5rem)/1.05 var(--display);letter-spacing:.01em;color:#fff;text-shadow:0 2px 24px #04070F,0 0 3px #04070F;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--spring);text-wrap:balance}
.a-cap.is-on{opacity:1;transform:none}
.a-cap em{font-style:normal;color:var(--sodium)}
.a-hint{position:absolute;z-index:4;left:calc(var(--panel-w) + var(--gl) + var(--pad));right:var(--gr);bottom:calc(98px + var(--sb));width:max-content;max-width:calc(100% - var(--pad)*2);margin:0 auto;padding:8px 14px;border-radius:999px;font:600 .82rem var(--sans);color:var(--ink);pointer-events:none;transition:opacity .5s}
.a-hint[hidden]{display:none}
/* ---------- the opening: the cards wait for the map ---------- */
.a-top,.a-panel,.a-time,.a-ctl{transition:opacity .7s ease,transform .8s var(--spring)}
.is-boot .a-top{opacity:0;transform:translateY(-10px)}
.is-boot .a-panel{opacity:0;transform:translateX(-14px)}
.is-boot .a-time{opacity:0;transform:translateY(12px)}
.is-boot .a-ctl{opacity:0;transform:translateX(12px)}
.is-touring .a-panel,.is-touring .a-hint{opacity:0;pointer-events:none;transform:translateX(-14px)}
.is-touring .a-cap{left:var(--gl)}

/* ---------- phones: the panel is a sheet, the map takes the rest. A phone held sideways is not this: it is the
   short and wide layout further down ---------- */
@media (max-width:559.98px),(max-width:760px) and (min-height:540px){
  .a-top{flex-wrap:wrap;gap:8px 10px}
  .a-mark{font-size:1.15rem;margin-right:auto}
  .a-mark svg{width:28px;height:28px}
  .a-signbox{order:3;flex:0 0 100%}
  .a-sign{height:40px;width:100%}
  .a-search{width:44px;padding:0 12px}
  .a-search kbd{display:none}
  .a-search input{width:0;flex:0 0 0;opacity:0}
  .a-search:focus-within{position:absolute;left:0;right:0;top:0;width:auto;z-index:9}
  .a-search:focus-within input{flex:1;opacity:1;width:auto}
  .a-panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:none;height:calc(132px + var(--sb));border-radius:22px 22px 0 0;border-width:1px 0 0;transition:height .38s var(--spring),opacity .7s ease,transform .8s var(--spring);padding-bottom:var(--sb)}
  .a-panel[data-snap="half"]{height:min(54vh,54dvh)}
  .a-panel[data-snap="full"]{height:calc(100% - 62px - var(--st))}
  .a-panel.is-drag{transition:none}
  .is-boot .a-panel{transform:translateY(30px)}
  .a-grip{display:flex;flex:none;height:22px;width:100%;border:0;background:none;align-items:center;justify-content:center;touch-action:none;cursor:grab}
  .a-grip i{width:40px;height:4px;border-radius:4px;background:rgba(150,170,230,.38)}
  .a-scroll{padding:2px var(--gr) 18px var(--gl);flex:1;min-height:0}
  .a-panel[data-snap="peek"] .a-scroll{overflow:hidden}
  .ax-big b{font-size:3.1rem}
  .a-scroll h2{font-size:1.8rem;margin-bottom:10px}
  .a-time{left:var(--gl);right:var(--gr);bottom:calc(var(--sheet) + 8px);transition:bottom .38s var(--spring),opacity .25s;height:54px;gap:9px;padding:0 10px 0 6px;border-radius:16px}
  .a-time .a-ib{width:40px;height:40px}
  .a-clock{min-width:58px}.a-clock b{font-size:1.05rem}.a-clock span{font-size:.62rem}
  .a-track{height:36px}
  .is-sheet-up .a-time,.is-sheet-up .a-hint,.is-sheet-up .a-ctl{opacity:0;pointer-events:none}
  .a-ctl{top:calc(114px + var(--st));left:var(--gl);right:var(--gr);flex-direction:row;justify-content:center;gap:6px;transition:opacity .25s}
  .a-ctl .is-zoom,.a-ctl .a-sep{display:none}
  .a-ib.is-txt{height:36px;padding:0 12px;font-size:.8rem;border-radius:999px}
  .a-cap{left:var(--gl);right:var(--gr);bottom:calc(var(--sheet) + 76px)}
  .a-hint{left:var(--gl);right:var(--gr);bottom:calc(var(--sheet) + 70px)}
  .is-touring .a-panel{transform:translateY(40px)}
  .ax-dest{grid-template-columns:1fr 84px 48px;padding:10px 8px}
}
/* the narrowest phones: the four buttons still fit between the gutters */
@media (max-width:355px){.a-ctl{gap:4px}.a-ib.is-txt{padding:0 8px}}
@media (max-width:980px) and (min-width:761px){.atlas{--panel-w:316px}.a-search{width:200px}}
@media (max-height:560px) and (min-width:761px){.a-panel{top:70px}.ax-big b{font-size:3rem}}
/* ---------- short and wide (a phone held sideways, a low window): the side panel stays, everything is a size
   smaller, the + and - go (pinch, the wheel and the keyboard still zoom), and the map is as tall as the screen, so
   nothing waits below the fold where a finger on the map could not scroll to it ---------- */
@media (max-height:539.98px) and (min-width:560px){
  .atlas{min-height:300px;--pad:10px}
  .a-top{gap:10px}
  .a-mark{font-size:1.15rem}
  .a-mark svg{width:28px;height:28px}
  .a-sign,.a-search{height:40px}
  .a-panel{top:calc(58px + var(--st));max-height:calc(100% - 58px - var(--st) - var(--pad) - var(--sb));border-radius:16px}
  .a-scroll{padding:14px 14px 12px}
  .ax-big b{font-size:2.6rem}
  .a-scroll h2{font-size:1.7rem;margin-bottom:8px}
  .a-time{height:54px;gap:9px;padding:0 10px 0 6px;border-radius:16px}
  .a-time .a-ib{width:40px;height:40px}
  .a-clock{min-width:58px}.a-clock b{font-size:1.05rem}.a-clock span{font-size:.62rem}
  .a-track{height:36px}
  .a-ctl{top:calc(58px + var(--st));gap:4px}
  .a-ctl .is-zoom,.a-ctl .a-sep{display:none}
  .a-ib.is-txt{height:36px;padding:0 11px;font-size:.8rem;border-radius:999px}
  .a-cap{bottom:calc(74px + var(--sb));font-size:clamp(1.25rem,3vw,1.9rem)}
  .a-hint,.a-load{bottom:calc(72px + var(--sb));right:calc(var(--gr) + 96px);max-width:calc(100% - var(--panel-w) - var(--gl) - var(--pad) - var(--gr) - 96px)}
}
@media (max-height:539.98px) and (min-width:560px) and (max-width:760px){.atlas{--panel-w:280px}.a-search{width:190px}}

/* ---------- what the page says before the script runs, or without it: the site's own header, the panel's words and
   links, and none of the controls that only the script can work ---------- */
body:not(.atlas-on) .a-top,body:not(.atlas-on) .a-time,body:not(.atlas-on) .a-ctl,body:not(.atlas-on) .a-grip{display:none}
@media (max-width:559.98px),(max-width:760px) and (min-height:540px){body:not(.atlas-on) .a-panel{height:auto;max-height:72%}body:not(.atlas-on) .a-panel .a-scroll{overflow:auto;padding-top:16px}}
.a-load{position:absolute;z-index:4;left:calc(var(--panel-w) + var(--gl) + var(--pad));right:var(--gr);bottom:calc(98px + var(--sb));width:max-content;max-width:calc(100% - var(--pad)*2);margin:0 auto;padding:8px 14px;border-radius:999px;font:600 .82rem var(--sans);color:var(--ink);background:var(--glass);border:1px solid var(--line);pointer-events:none}
.a-load[hidden]{display:none}
.a-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin:14px 0 0;font:600 .82rem var(--sans)}
.a-links a{color:var(--dim);text-decoration:none}
.a-links a:hover{color:var(--sodium)}
.a-nojs{position:absolute;z-index:6;left:calc(var(--panel-w) + var(--gl) + var(--pad));right:var(--gr);bottom:var(--pad);margin:0;padding:12px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--line);font-size:.9rem}
.a-nojs a{color:var(--sodium)}
a.ax-chip{text-decoration:none;color:inherit}
@media (max-width:559.98px),(max-width:760px) and (min-height:540px){.a-load{left:var(--gl);right:var(--gr);bottom:calc(var(--sheet) + 70px)}.a-nojs{left:var(--gl);top:74px;bottom:auto}}