/* Tall Structures Map — Apple-Maps-style UI: navigation bar + floating card (desktop), bottom sheet (mobile).
   Two themes share one set of tokens: dark (default) and light. Motion values are Apple Maps' own (apl.css):
   --curve = --apl-curve-default, popovers scale-pop with cubic-bezier(.25,.1,.25,1.3) over 200 ms, menus clip-reveal over 250 ms. */
:root,[data-theme=dark]{
  color-scheme:dark;
  --app:#1c1c1e; --nav:rgba(28,28,30,.94); --card:#232325; --platter:#2e2e30; --platter-hi:#3a3a3c; --popover:#2c2c2e;
  --fill:rgba(118,118,128,.24); --fill2:rgba(118,118,128,.16); --hover:rgba(255,255,255,.07); --search:rgba(0,0,0,.4);
  --label:#fff; --label2:rgba(235,235,245,.62); --label3:rgba(235,235,245,.32); --sep:rgba(84,84,88,.6);
  --accent:#0a84ff; --accent-hi:#2a93ff; --on-accent:#fff; --red:#ff453a; --orange:#ff9f0a; --green:#30d158;
  --glass:rgba(30,30,32,.8); --glass-line:rgba(255,255,255,.09); --shadow:0 4px 24px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.35);
  --map:#262628; --navsel:var(--fill); --navsel-fg:var(--label); --icon-bg:#48484a; --thumb-bg:#3a3a3c;
  --compass:rgba(18,18,18,.6); --tick:rgba(235,235,245,.55); --cn:#e5e5ea; --scroll:rgba(235,235,245,.28);
  --navhl:rgba(255,255,255,.05); --navicon:rgba(255,255,255,.08); --navicon-hi:rgba(255,255,255,.14); --tipfill:#8d969b;
  /* Apple Maps' glass (.mw-nav-bar / .mw-card): blur(50px) over the map, #0009 in dark; platters sit on it semi-clear */
  --navglass:#0009; --cardglass:#0009; --gplatter:rgba(72,72,78,.46); --gplatter-hi:rgba(88,88,94,.6);
}
[data-theme=light]{
  color-scheme:light;
  --app:#f2f2f7; --nav:rgba(248,248,250,.95); --card:#f2f2f7; --platter:#fff; --platter-hi:#f7f7f9; --popover:#fff;
  --fill:rgba(118,118,128,.12); --fill2:rgba(118,118,128,.08); --hover:rgba(0,0,0,.05); --search:rgba(118,118,128,.12);
  --label:#000; --label2:rgba(60,60,67,.62); --label3:rgba(60,60,67,.32); --sep:rgba(60,60,67,.16);
  --accent:#007aff; --accent-hi:#1a86ff; --red:#ff3b30; --orange:#ff9500; --green:#34c759;
  --glass:rgba(255,255,255,.86); --glass-line:rgba(0,0,0,.07); --shadow:0 4px 20px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.12);
  --map:#e5e5ea; --icon-bg:#e5e5ea; --thumb-bg:#e5e5ea;
  --compass:rgba(255,255,255,.82); --tick:rgba(60,60,67,.45); --cn:#3a3a3c; --scroll:rgba(60,60,67,.3);
  --navhl:rgba(0,0,0,.04); --navicon:rgba(0,0,0,.04); --navicon-hi:rgba(0,0,0,.08); --tipfill:#929299;
  --navglass:#fffc; --cardglass:#fff9; --gplatter:rgba(255,255,255,.62); --gplatter-hi:rgba(255,255,255,.85);
}
body.nav-min{--navw:71px}
/* no backdrop blur (old browsers): the panels stay solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#sidebar{background:var(--nav)} #card{background:var(--card)}}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){@media (min-width:769px){#card{--platter:var(--gplatter);--platter-hi:var(--gplatter-hi)}}}
:root{--curve:cubic-bezier(.12,.55,.19,1); --pop:cubic-bezier(.25,.1,.25,1.3); --t1:150ms; --t2:200ms; --t3:250ms;
  --navw:240px; --cardw:390px; --ui-left:calc(var(--navw) + var(--cardw));
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif}
body.card-closed{--cardw:0px}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:15px/1.4 var(--font);color:var(--label);background:var(--app);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
#map{position:absolute;inset:0;background:var(--map)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--curve)}
html.theming *,html.theming *::before,html.theming *::after{transition:background-color .3s var(--curve),color .3s var(--curve),border-color .3s var(--curve),box-shadow .3s var(--curve),fill .3s,stroke .3s!important}
.leaflet-layer{transition:opacity .3s linear}
h2{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0}

/* ---------- left navigation bar — Apple Maps' .mw-nav-bar, 1:1 ----------
   header: 20 px padding; 30 × 30 icon squares with 9 px corners; buttons: 10 px side margin, 8 × 10 px padding, 12 px corners,
   16 px medium labels 10 px after the icon, highlight fades in .1 s. Collapsed (Apple: 71 px): only the 30 px expand button in the
   header over a 1 px rule, 50 px buttons whose icons sit exactly on one centre line, no row highlight (the icon alone shows state),
   recents as icons under a 30 px rule, and a label bubble on hover. The width animates .25 s ease-in-out. */
#sidebar{position:absolute;z-index:1100;top:0;bottom:0;left:0;width:var(--navw);background:var(--navglass);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);will-change:transform;border-right:1px solid var(--sep);display:flex;flex-direction:column;padding:0;overflow:hidden;transition:width .25s ease-in-out}
.sidehead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:20px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-icon{width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,#2f8bff,#0a60d8);display:grid;place-items:center;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.brand-icon svg{width:23px;height:23px}
.brand-text{display:flex;flex-direction:column;min-width:0;white-space:nowrap;user-select:none;-webkit-user-select:none}
.brand-text b{font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.2;display:flex;align-items:center;gap:6px}
.beta{font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:7px;background:var(--fill);color:var(--label2)}
.credit-top{font-size:12.5px;color:var(--label2)}
.credit-top a{color:var(--accent);font-weight:600}
.navcollapse{border:0;background:var(--navicon);color:var(--label2);border-radius:9px;width:30px;height:30px;padding:0;display:grid;place-items:center;flex:none;cursor:pointer;transition:all .1s ease-out}
.navcollapse svg{width:19px;height:19px;stroke-width:2}
.navcollapse:hover{background:var(--navicon-hi);color:var(--label)}
.navlist{display:flex;flex-direction:column}
.navbtn{display:flex;align-items:center;border:0;background:transparent;border-radius:12px;margin:0 10px;padding:8px 10px;text-align:left;font-size:16px;font-weight:500;white-space:nowrap;min-width:0;color:var(--label);cursor:pointer;transition:background-color .1s ease-out}
.navbtn:hover,.navbtn[aria-selected=true]{background:var(--navhl)}
.navlabel{padding-left:10px;overflow:hidden;text-overflow:ellipsis}
.navicon{width:30px;height:30px;border-radius:9px;background:var(--navicon);color:var(--label);display:grid;place-items:center;flex:none;transition:background-color .1s ease-out}
.navbtn:hover:not([aria-selected=true]) .navicon{background:var(--navicon-hi)}
.navbtn[aria-selected=true] .navicon{background:#0278fc;color:#fff}
.navicon svg{width:18px;height:18px;stroke-width:2.3}
.recents{margin-top:30px;padding:0 10px;min-height:0;overflow:auto}
.recents-h{border:0;background:none;color:var(--label3);font-size:13px;font-weight:600;display:flex;align-items:center;gap:3px;padding:4px 10px;border-radius:8px}
.recents-h .chev{width:13px;height:13px;stroke-width:2.6;transition:transform var(--t3) var(--curve)}
.recents-h[aria-expanded=true] .chev{transform:rotate(90deg)}
.recents-h:hover{color:var(--label2)}
.recents-h.big{width:100%;justify-content:flex-start;gap:6px;padding:0;color:var(--label);margin:18px 2px 9px}
.recents-h.big .chev{width:16px;height:16px;color:var(--label3)}
/* smooth open/close to the content's natural height (grid 0fr -> 1fr) */
.collapse{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--t3) var(--curve),opacity var(--t2) linear}
.collapse>div{overflow:hidden;min-height:0}
.collapse.open{grid-template-rows:1fr;opacity:1}
.clearlink{border:0;background:none;color:var(--accent);font-size:13px;padding:6px 8px;margin:2px 0 4px}
.phone-only{display:none}
#recents{list-style:none;margin:2px 0 0;padding:0}
#recents li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;cursor:pointer;font-size:16px;font-weight:500;color:var(--label);white-space:nowrap;overflow:hidden;transition:background-color .1s ease-out}
#recents li:hover{background:var(--navhl)}
#recents li span:last-child{overflow:hidden;text-overflow:ellipsis;padding-right:15px}
.rdot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--c)}
#recents .rdot{width:30px;height:30px}
.rdot svg{width:15px;height:15px;stroke:#fff;stroke-width:2.4}
/* collapsed */
body.nav-min .brand,body.nav-min .navlabel,body.nav-min .recents-h,body.nav-min .clearlink,body.nav-min #recents li span:last-child{display:none}
body.nav-min .sidehead{justify-content:center;margin:0 20px;padding:20px 0 14px;border-bottom:1px solid var(--sep)}
body.nav-min .navlist{padding-top:5px}
body.nav-min .navbtn{width:50px;justify-content:center;transition:background-color .2s ease-out}
body.nav-min .navbtn:hover,body.nav-min .navbtn[aria-selected=true]{background:transparent}
body.nav-min .recents{display:none}
/* the "!" link (Masts & Antennas FAQ): its own section under the sections; collapsed, it sits below a 30 px rule like Apple's recents */
.navextra{position:relative}
.navlink{text-decoration:none}
.navlink:hover{text-decoration:none}
.navlink .navicon svg{stroke-width:2.8}
body.nav-min .navextra{margin-top:0;padding-top:25.5px}
body.nav-min .navextra::before{content:"";position:absolute;top:12px;left:20px;width:30px;height:1px;background:var(--sep)}
/* Apple's collapsed-sidebar label bubble: grey pill, white text, 7 px corners, the popover arrow pointing at the button */
.navtip{position:fixed;left:0;top:0;z-index:1600;display:flex;align-items:center;pointer-events:none;will-change:transform}
.navtip.off{visibility:hidden}
.navtip svg{width:9px;height:20px;margin-right:-1px;flex:none;stroke:none}
.navtip svg path{fill:var(--tipfill)}
.navtip span{background:var(--tipfill);color:#fff;border-radius:7px;padding:8px 12px;font-size:14.5px;font-weight:500;white-space:nowrap;box-shadow:0 -2px 20px rgba(0,0,0,.1),0 0 12px rgba(0,0,0,.1)}

/* ---------- card ---------- */
#card{position:absolute;z-index:1050;top:0;bottom:0;left:var(--navw);width:390px;background:var(--cardglass);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);will-change:transform;box-shadow:10px 1px 5px #00000006;display:flex;flex-direction:column;transition:left .25s ease-in-out,transform .22s ease;overscroll-behavior:contain}
body.card-closed #card{transform:translateX(-100%);pointer-events:none;visibility:hidden}
.sheet-handle,.card-mobile-head,.card-tabs{display:none}
.searchwrap{position:relative;padding:16px 16px 10px;z-index:3}
.searchrow{display:flex;align-items:center;gap:10px}
.searchbar{flex:1;display:flex;align-items:center;gap:6px;background:var(--search);border-radius:12px;padding:0 8px 0 10px;height:40px;border:1px solid var(--glass-line);min-width:0}
.searchbar:focus-within{outline:2px solid var(--accent);outline-offset:-1px}
.sicon{width:17px;height:17px;color:var(--label2)}
#loc{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:15.5px;padding:8px 2px}
#loc::placeholder{color:var(--label2)}
#loc::-webkit-search-cancel-button{display:none}
.sclear{border:0;background:transparent;color:var(--label3);padding:2px;display:grid;place-items:center}
.sclear svg{width:18px;height:18px}
.sclear .fillc{fill:currentColor;stroke:none}
.cancelbtn{border:0;background:none;color:var(--accent);font-size:15.5px;padding:4px 2px;flex:none}
#sugg{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:16px;right:16px;top:100%;background:var(--popover);border-radius:14px;box-shadow:var(--shadow);max-height:min(60vh,440px);overflow:auto;border:1px solid var(--glass-line)}
#sugg li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer}
#sugg li[aria-selected=true],#sugg li:hover{background:var(--hover)}
#sugg li .sg-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--c,var(--icon-bg))}
#sugg li .sg-ic svg{width:15px;height:15px;stroke:#fff;stroke-width:2.4}
#sugg li .sg-ic.plain svg{stroke:var(--label2)}
#sugg li .sg-t{display:flex;flex-direction:column;min-width:0}
#sugg li .sg-t b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sugg li small{color:var(--label2);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sugg li.msg{cursor:default;color:var(--label2);font-size:13px}
#sugg li.hdr{cursor:default;color:var(--label2);font-size:12px;font-weight:600;padding:8px 8px 2px}
#sugg li.hdr:hover,#sugg li.msg:hover{background:none}
.card-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 28px}
.view.enter{animation:view-in var(--t2) var(--curve) both}
@keyframes view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* overlay scrollbar: no track or arrows; a slim thumb shows while hovering / scrolling */
.card-body::-webkit-scrollbar,#sugg::-webkit-scrollbar,.refpop .pbody::-webkit-scrollbar,.recents::-webkit-scrollbar{width:11px;height:11px}
.card-body::-webkit-scrollbar-track,#sugg::-webkit-scrollbar-track,.refpop .pbody::-webkit-scrollbar-track,.recents::-webkit-scrollbar-track{background:transparent}
.card-body::-webkit-scrollbar-button,#sugg::-webkit-scrollbar-button,.refpop .pbody::-webkit-scrollbar-button,.recents::-webkit-scrollbar-button{display:none;height:0}
.card-body::-webkit-scrollbar-thumb,#sugg::-webkit-scrollbar-thumb,.refpop .pbody::-webkit-scrollbar-thumb,.recents::-webkit-scrollbar-thumb{background:transparent;border-radius:11px;border:3px solid transparent;background-clip:padding-box;min-height:40px}
.card-body:hover::-webkit-scrollbar-thumb,.card-body.scrolling::-webkit-scrollbar-thumb,#sugg:hover::-webkit-scrollbar-thumb,.refpop .pbody:hover::-webkit-scrollbar-thumb,.recents:hover::-webkit-scrollbar-thumb{background-color:var(--scroll)}
@supports not selector(::-webkit-scrollbar){.card-body,#sugg,.refpop .pbody,.recents{scrollbar-width:thin;scrollbar-color:transparent transparent}.card-body:hover,.card-body.scrolling,#sugg:hover{scrollbar-color:var(--scroll) transparent}}
.sechead{display:flex;align-items:baseline;justify-content:space-between;margin:14px 2px 9px}
.sechead:first-child{margin-top:6px}
.seeall,.mini button{border:0;background:none;color:var(--accent);padding:0;font-size:14px;font-weight:500}
.mini{display:flex;gap:14px}
.hint{font-size:12.5px;color:var(--label2);margin:6px 2px}
.hint.lead{margin:-2px 2px 12px;font-size:13.5px}
.count{font-size:12.5px;color:var(--label3);margin:14px 2px 0}

/* category tiles (Find Nearby & Filters) */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{display:flex;align-items:center;gap:10px;border:0;background:var(--platter);border-radius:14px;padding:10px;text-align:left;min-width:0;transition:opacity .15s,background .15s;box-shadow:0 0 0 1px var(--glass-line) inset}
.tile:hover{background:var(--platter-hi)}
.tile .ic{width:34px;height:34px;border-radius:50%;background:var(--c);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.tile .ic.ring{background:transparent;box-shadow:inset 0 0 0 3px var(--c)}
.tile .ic svg{width:18px;height:18px;stroke:#fff;stroke-width:2.1}
.tile .ic.ring svg{stroke:var(--c)}
.tile .tt{display:flex;flex-direction:column;min-width:0}
.tile .tt b{font-size:13.5px;font-weight:600;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tile .tt small{font-size:12px;color:var(--label2);font-variant-numeric:tabular-nums;margin-top:1px}
#layers .tile[aria-pressed=false]{opacity:.42}
#layers .tile[aria-pressed=false] .ic{filter:grayscale(1)}

/* platters (grouped rows) */
.platter{background:var(--platter);border-radius:14px;margin:0 0 12px;box-shadow:0 0 0 1px var(--glass-line) inset}
.platter.pad{padding:14px}
.platter.list{padding:0 14px}
.lrow{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 0;border-bottom:1px solid var(--sep);cursor:pointer;font-size:14.5px}
.lrow:last-child{border-bottom:0}
.lrow .n{margin-left:auto;color:var(--label2);font-size:13px;font-variant-numeric:tabular-nums}
.switch{appearance:none;-webkit-appearance:none;width:44px;height:27px;border-radius:14px;background:var(--fill);position:relative;flex:none;cursor:pointer;margin:0;transition:background .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .2s}
.switch:checked{background:var(--green)}
.switch:checked::after{transform:translateX(17px)}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chips button{border:0;background:var(--fill);border-radius:16px;padding:6px 12px;font-size:13.5px;font-weight:500}
.chips button:hover{filter:brightness(1.1)}
.chips button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.hvals{display:flex;justify-content:space-between;font-size:13.5px;color:var(--label2)}
.hvals b{color:var(--label)}
.dual{position:relative;height:40px;margin:0 12px;touch-action:none;cursor:pointer}
.dual .track{position:absolute;left:0;right:0;top:18px;height:4px;border-radius:2px;background:var(--fill)}
.dual .fill{position:absolute;top:0;bottom:0;background:var(--accent);border-radius:2px}
.thumb{position:absolute;top:8px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.08);outline:none}
.thumb:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 45%,transparent)}
.thumb.active{transform:scale(1.12)}
.list-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--sep);cursor:pointer;min-width:0}
.list-row:last-child{border-bottom:0}
.list-row .lt{display:flex;flex-direction:column;min-width:0;flex:1}
.list-row .lt b{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row .lt small{color:var(--label2);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row .lh{font-size:13px;color:var(--label2);font-variant-numeric:tabular-nums;flex:none}
/* nearby rows: the number on the right is a distance, so it is labelled "away" and lighter than a height */
.list-row .ldist{font-size:12.5px;color:var(--label3);font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}
.list-row:hover .lt b{color:var(--accent)}

/* satellite thumbnails (4 imagery tiles stitched as CSS backgrounds, centred on the structure) */
.satimg{background-color:var(--thumb-bg);background-repeat:no-repeat;border-radius:10px;flex:none;position:relative;overflow:hidden}
.satimg::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--pin,#ff453a);box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.5)}
.satimg.nodot::after{display:none}

/* guides */
.guidepeek{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
.guidepeek::-webkit-scrollbar{display:none}
.guidepeek .gcard{flex:0 0 230px;scroll-snap-align:start}
.guidegrid{display:grid;grid-template-columns:1fr;gap:10px}
.gcard{position:relative;display:block;border:0;padding:0;border-radius:16px;overflow:hidden;height:150px;text-align:left;background:var(--thumb-bg);color:#fff;cursor:pointer;box-shadow:0 0 0 1px var(--glass-line) inset}
.gcard .satimg,.gcard .gphoto{position:absolute;inset:0;border-radius:0;width:100%;height:100%}
.gcard .gphoto{object-fit:cover;display:block}
.gcard .gshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.78))}
.gcard .ginfo{position:absolute;left:14px;right:14px;bottom:12px}
.gcard .gkind{font-size:11px;font-weight:700;letter-spacing:.04em;opacity:.9}
.gcard .gkind span{margin-left:6px;opacity:.75}
.gcard .gtitle{font-size:16px;font-weight:700;line-height:1.2;margin-top:3px}
.gcard .gpub{font-size:12px;opacity:.85;margin-top:3px}
.gcard:hover .gtitle{text-decoration:underline}
.gcover{height:170px;margin:4px 0 12px}
.gcover.gcard{cursor:default}
.gcover.gcard:hover .gtitle{text-decoration:none}
.gdesc{font-size:14.5px;color:var(--label2);margin:0 2px 12px;line-height:1.45}
.gactions{display:flex;gap:8px;margin-bottom:12px}
.pillbtn{border:0;background:var(--fill);color:var(--accent);border-radius:12px;padding:9px 14px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px}
.pillbtn.primary{background:var(--accent);color:var(--on-accent)}
.pillbtn svg{width:17px;height:17px}
.rank{width:26px;text-align:center;font-weight:700;color:var(--label3);font-variant-numeric:tabular-nums;flex:none}

/* ---------- search results ---------- */
.reshead{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
.reshead h2{font-size:21px}
.reshead small{display:block;color:var(--label2);font-size:12.5px}
.backbtn,.closebtn{border:0;background:var(--fill);color:var(--label2);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;transition:opacity .2s ease-out,transform .2s ease-out,background-color .2s ease-out}
.backbtn:hover,.closebtn:hover{color:var(--label);filter:brightness(1.12)}
/* the panel's close button — Apple's .mw-close: 30 px circle, translucent grey (#ffffff40 dark / #c7c7c75c light), white (dark) or
   #808085 (light) cross, hover tint, grows 8 % under a mouse (.2 s ease-out); desktop only, not while Cancel or a structure card shows */
.cardclose{flex:none;width:30px;height:30px;border:0;border-radius:50%;padding:0;background:#ffffff40;color:#fff;display:grid;place-items:center;cursor:pointer;transition:opacity .2s ease-out,transform .2s ease-out,background-color .2s ease-out}
.cardclose svg{width:15px;height:15px;stroke-width:2.6}
.cardclose:hover{background:rgba(255,255,255,.3)}
.cardclose:active{background:#ffffff73}
[data-theme=light] .cardclose{background:#c7c7c75c;color:#808085}
[data-theme=light] .cardclose:hover{background:rgba(0,0,0,.14)}
.cancelbtn:not([hidden])~.cardclose,body.place-open .cardclose{display:none}
@media (hover:hover) and (pointer:fine){.cardclose:hover{transform:scale(1.08)}}
/* Apple: round close / back buttons grow a touch under a mouse (scale 1.08, .2 s ease-out) */
@media (hover:hover) and (pointer:fine){.backbtn:hover,.closebtn:hover,.mm-close:hover{transform:scale(1.08)}}

/* ---------- explore (Apple Maps' Guides home: featured card, titled rows of snapping carousels) ---------- */
.xtitle{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:6px 2px 14px}
.xhero .brick{width:100%;height:200px}
.xsec{margin-top:20px}
.xhead{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--label);font-size:17px;font-weight:700;line-height:1.2;padding:2px 8px 2px 6px;margin:0 0 8px -4px;border-radius:8px;cursor:pointer;transition:background-color .1s ease-out}
.xhead svg{width:13px;height:13px;color:var(--label2);stroke-width:2.8;margin-top:1px}
.xhead:hover{background:var(--hover)}
.xnote{font-size:12.5px;color:var(--label2);margin:-4px 2px 10px}
/* carousel: bleeds to the panel edges, cards snap, clipped with rounded ends (with a mouse) so the chevrons sit in the gutters */
.hcar{position:relative;margin:0 -16px}
.hscroll{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 16px;padding:4px 16px 8px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{display:none}
.harrows{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s linear}
.harrow{position:absolute;top:calc(50% - 12px);width:16px;height:24px;border:0;padding:0;background:none;color:#8e8e93;display:grid;place-items:center;cursor:pointer;pointer-events:auto;transition:opacity .2s linear}
.harrow svg{width:13px;height:13px;stroke-width:2.8}
.harrow.prev{left:0}.harrow.next{right:0}
.harrow:hover{color:var(--label)}.harrow:active{color:#666a67}
.hcar[data-start] .harrow.prev,.hcar[data-end] .harrow.next{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){.hscroll{clip-path:inset(0 16px round 16px)} .hcar:hover .harrows{opacity:1}}
@media (hover:none),(pointer:coarse){.harrows{display:none}}
/* brick: Apple's guide card — image, gradient, publisher line, bold title; grows 2 % under a mouse (all .25 s ease-out) */
.brick{position:relative;display:block;flex:none;width:var(--w,186px);height:var(--h,236px);border-radius:16px;overflow:hidden;background:var(--thumb-bg);color:#fff;text-decoration:none;scroll-snap-align:start;cursor:pointer;transition:all .25s ease-out;isolation:isolate}
.brick:hover{text-decoration:none}
.brick:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
@media (hover:hover) and (pointer:fine){.brick:hover{transform:scale(1.02)}}
.brick .satimg,.brick>img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;display:block}
.bgrad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,#00000061 62%,#000000a8)}
.bcontent{position:absolute;left:12px;right:16px;bottom:12px;display:flex;flex-direction:column;gap:3px;text-shadow:0 1px 2px #20202033}
.blogo{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;filter:drop-shadow(0 0 3px #00000040)}
.ytmark{width:17px;height:12px;flex:none;stroke:none}
.btitle{font-size:15px;font-weight:800;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bplay{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;transition:transform .25s ease-out,background-color .25s ease-out}
.bplay svg{width:14px;height:14px;fill:#fff;stroke:none;margin-left:2px}
@media (hover:hover) and (pointer:fine){.vbrick:hover .bplay{background:#ff0033;transform:scale(1.08)}}
.xhero .vbrick .btitle{font-size:17px;-webkit-line-clamp:2}
/* video card: 16:9 thumbnail, then title (2 lines) and channel on the card's own panel */
.vcard{--w:256px;height:auto;display:flex;flex-direction:column;background:var(--platter);color:var(--label);box-shadow:0 0 0 1px var(--glass-line) inset}
.vthumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vmeta{display:flex;flex-direction:column;gap:4px;padding:9px 12px 11px}
.vtitle{font-size:14px;font-weight:700;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vby{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcard:hover .vtitle{color:var(--label)}
.xgrid{display:grid;gap:10px}
.xgrid .brick.wide{width:100%}
.xgrid.videos .vcard{width:100%}
.xgrid:not(.videos) .brick.wide{height:150px}
@media (max-width:1024px){.xhero .brick{height:186px}}
.backbtn svg,.closebtn svg{width:16px;height:16px;stroke-width:2.6}
.refbar{position:relative;margin:0 -16px 12px}
.refscroll{display:flex;gap:6px;overflow-x:auto;padding:4px 16px;scroll-behavior:smooth;scrollbar-width:none}
.refscroll::-webkit-scrollbar{display:none}
.refarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:28px;height:28px;border-radius:50%;border:0;background:var(--popover);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--label)}
.refarrow svg{width:15px;height:15px;stroke-width:2.6}
.refarrow.prev{left:6px}.refarrow.next{right:6px}
.refarrow[disabled]{display:none}
.pill{flex:none;display:flex;align-items:center;gap:4px;height:32px;border:0;border-radius:16px;padding:0 13px;background:var(--platter);box-shadow:inset 0 0 0 1px var(--sep);font-size:13.5px;font-weight:500;white-space:nowrap;color:var(--label)}
.pill svg{width:14px;height:14px;stroke-width:2.4}
.pill:hover{background:var(--platter-hi)}
.pill[aria-pressed=true],.pill.on{background:var(--accent);color:var(--on-accent);box-shadow:none}
.pill.icon{padding:0 9px}
.reslist{display:flex;flex-direction:column;gap:10px}
.resitem{background:var(--platter);border-radius:14px;padding:12px 14px;cursor:pointer;box-shadow:0 0 0 1px var(--glass-line) inset;display:flex;flex-direction:column;gap:2px;min-width:0}
.resitem:hover{background:var(--platter-hi)}
.resitem:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.resitem .rtitle{font-size:15.5px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resitem .rline{font-size:13px;color:var(--label2);display:flex;gap:6px;align-items:center;min-width:0;white-space:nowrap;overflow:hidden}
.resitem .rline b{color:var(--label);font-weight:600}
.resitem .rline i{width:9px;height:9px;border-radius:50%;flex:none}
.resitem .rline .dot{opacity:.5}
.resitem .rthumbs{display:flex;gap:6px;margin-top:9px;overflow:hidden}
.resitem .rthumbs .satimg{width:132px;height:88px}
.resempty{color:var(--label2);text-align:center;padding:30px 10px;font-size:14px}
.morebtn{display:block;width:100%;margin:12px 0 0;border:0;border-radius:12px;background:var(--fill);color:var(--accent);font-weight:600;padding:11px}

/* popovers (refinements, map type, "more" menu) */
.popover{position:fixed;z-index:1400;background:var(--popover);border-radius:19px;box-shadow:0 0 0 1px var(--glass-line),0 12px 40px rgba(0,0,0,.35);overflow:hidden}
/* map-type & location popovers: Apple's .mw-popover — scale(.5)+fade in with a slight overshoot, fade out */
.pop-scale{opacity:0;transform:scale(.5);transition:opacity var(--t2),transform 0s var(--t2);will-change:transform,opacity}
.pop-scale.shown{opacity:1;transform:none;transition:opacity var(--t2) var(--pop),transform var(--t2) var(--pop)}
/* menus & refinement dropdowns: Apple's ui-menu — clip-path reveal from the corner nearest the button + fade */
/* The clip is a rounded rectangle grown 40 px beyond the popover, so neither the rounded corners nor the soft shadow are ever cut
   square; once the reveal has finished no clip is left on the element at all. */
.pop-clip{--e:40px;--rr:calc(19px + var(--e))}
.pop-clip.opening{animation:clip-open var(--t3) ease-in-out backwards}
.pop-clip.closing{animation:clip-close var(--t2) ease-in-out forwards}
@keyframes clip-open{from{clip-path:var(--clip0);opacity:0}to{clip-path:inset(calc(-1*var(--e)) round var(--rr));opacity:1}}
@keyframes clip-close{from{clip-path:inset(calc(-1*var(--e)) round var(--rr));opacity:1}to{clip-path:var(--clip0);opacity:0}}
.pop-clip[data-corner=tl]{--clip0:inset(calc(-1*var(--e)) calc(100% + var(--e)) calc(100% + var(--e)) calc(-1*var(--e)) round var(--rr))}
.pop-clip[data-corner=tr]{--clip0:inset(calc(-1*var(--e)) calc(-1*var(--e)) calc(100% + var(--e)) calc(100% + var(--e)) round var(--rr))}
.pop-clip[data-corner=bl]{--clip0:inset(calc(100% + var(--e)) calc(100% + var(--e)) calc(-1*var(--e)) calc(-1*var(--e)) round var(--rr))}
.pop-clip[data-corner=br]{--clip0:inset(calc(100% + var(--e)) calc(-1*var(--e)) calc(-1*var(--e)) calc(100% + var(--e)) round var(--rr))}
.bubble{width:200px;padding:10px 12px;font-size:13px;line-height:1.35;border-radius:10px;color:var(--label);outline:none}
.refpop{width:320px;max-width:calc(100vw - 24px)}
.refpop .ptitle{font-size:13px;color:var(--label2);padding:14px 16px 4px;font-weight:600}
.refpop .pbody{padding:10px 14px 14px;max-height:50vh;overflow:auto}
.refpop .msel{display:flex;flex-wrap:wrap;gap:6px}
.refpop .opts{display:flex;flex-direction:column;gap:2px}
.refpop .opt{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:9px;cursor:pointer;font-size:15px}
.refpop .opt:hover{background:var(--hover)}
.refpop .opt input{accent-color:var(--accent);width:17px;height:17px;margin:0}
.refpop .pact{display:flex;justify-content:flex-end;gap:6px;padding:12px 14px;border-top:1px solid var(--sep)}
.refpop .pact button{border:0;border-radius:9px;padding:8px 14px;font-weight:600;font-size:14px;background:none;color:var(--accent)}
.refpop .pact .apply{background:var(--accent);color:var(--on-accent)}
.menu{min-width:220px;padding:6px}
.menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:10px 10px;border-radius:10px;font-size:15px;text-align:left;color:var(--label)}
.menu button:hover{background:var(--hover)}
.menu button svg{width:18px;height:18px;color:var(--accent)}
.menu hr{border:0;border-top:1px solid var(--sep);margin:4px 6px}

/* ---------- appearance ---------- */
.themes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:6px}
.themecard{border:0;background:var(--platter);border-radius:14px;padding:8px 8px 9px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:13.5px;box-shadow:0 0 0 1px var(--glass-line) inset}
.themecard[aria-checked=true]{box-shadow:0 0 0 2.5px var(--accent) inset}
.tprev{width:100%;height:58px;border-radius:10px;position:relative;overflow:hidden;display:block}
.tprev i{position:absolute;display:block;border-radius:4px}
.tprev i:nth-child(1){left:0;top:0;bottom:0;width:30%}
.tprev i:nth-child(2){left:36%;top:9px;width:54%;height:9px;border-radius:5px}
.tprev i:nth-child(3){left:58%;top:30px;width:22px;height:14px;border-radius:7px}
.tprev.dark{background:#3a3a3c}.tprev.dark i:nth-child(1){background:#1c1c1e}.tprev.dark i:nth-child(2){background:#636366}.tprev.dark i:nth-child(3){background:#1c1c1e;box-shadow:0 0 0 1px #555}
.tprev.light{background:#e5e5ea}.tprev.light i:nth-child(1){background:#fff}.tprev.light i:nth-child(2){background:#c7c7cc}.tprev.light i:nth-child(3){background:#fff;box-shadow:0 0 0 1px #ccc}
.about-intro p{margin:0 0 8px;font-size:14.5px;line-height:1.45}
.about-intro .madeby{margin:0;color:var(--label2);font-size:13.5px}
.about-intro .madeby a{font-weight:600}
details.platter summary{list-style:none;padding:13px 14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
details.platter summary::-webkit-details-marker{display:none}
details.platter summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--label3);border-bottom:2px solid var(--label3);transform:rotate(-45deg);transition:transform .2s;margin-right:4px}
details[open].platter summary::after{transform:rotate(45deg)}
.dbody{padding:0 14px 12px;font-size:13.5px;line-height:1.5;color:var(--label2)}
.dbody b{color:var(--label)}
.dbody ul{padding-left:18px;margin:6px 0}
.dbody li{margin:4px 0}

/* ---------- structure details ("place card") ---------- */
.placehead{display:flex;justify-content:space-between;margin:2px -4px 8px;position:relative;z-index:2}
.pl-hero{height:170px;width:100%;border-radius:16px;margin-bottom:10px;display:block}
.pl-title{font-size:25px;font-weight:700;letter-spacing:-.015em;line-height:1.15;margin:4px 0 4px;overflow-wrap:anywhere}
.pl-sub{display:flex;align-items:center;gap:7px;color:var(--label2);font-size:14px;margin-bottom:14px;flex-wrap:wrap}
.pl-sub i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.pl-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.pl-actions a,.pl-actions button{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:var(--platter);border-radius:12px;padding:10px 4px 8px;color:var(--accent);font-size:12px;font-weight:600;text-decoration:none;min-width:0;text-align:center;box-shadow:0 0 0 1px var(--glass-line) inset}
.pl-actions a:hover,.pl-actions button:hover{background:var(--platter-hi);text-decoration:none}
.pl-actions .primary{background:var(--accent);color:var(--on-accent);box-shadow:none}
.pl-actions .primary:hover{background:var(--accent-hi)}
.pl-actions svg{width:20px;height:20px}
.pl-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:14px;border-top:1px solid var(--sep);border-bottom:1px solid var(--sep);padding:10px 0}
.pl-stats div{padding:0 10px;border-left:1px solid var(--sep);min-width:0}
.pl-stats div:first-child{border-left:0;padding-left:2px}
.pl-stats small{display:block;font-size:11px;font-weight:600;color:var(--label2);text-transform:uppercase;letter-spacing:.03em}
.pl-stats b{display:block;font-size:15px;font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-stats .est{font-size:11px;color:var(--orange);font-weight:500}
.pl-h3{font-size:18px;font-weight:700;margin:18px 2px 8px;display:flex;align-items:baseline;justify-content:space-between}
.pl-rows{padding:0 14px}
.pl-row{padding:9px 0;border-bottom:1px solid var(--sep)}
.pl-row:last-child{border-bottom:0}
.pl-row small{display:block;font-size:12.5px;color:var(--label2)}
.pl-row span{display:block;font-size:14.5px;overflow-wrap:anywhere}
.pl-row .coord{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:14px;user-select:all}
.pl-desc{font-size:14px;line-height:1.4;color:var(--label);margin:-6px 2px 14px}
.pl-note{font-size:13px;color:var(--label2);font-style:italic;margin:0 2px 12px}
.pl-loading{color:var(--label2);padding:30px 0;text-align:center}
.inguides{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.inguides .gcard{flex:0 0 200px;height:112px}
.inguides .gcard .gtitle{font-size:14px}

/* comments */
.comment-box .pl-h3 small{font-weight:500;color:var(--label2);font-size:13px;margin-left:6px}
.comment-list{padding:2px 14px}
.comment-list:empty{display:none}
.comment-empty{padding:12px 14px;color:var(--label2);font-size:14px}
.comment-item{padding:10px 0;border-bottom:1px solid var(--sep);overflow-wrap:anywhere}
.comment-item:last-child{border-bottom:0}
.comment-item p{margin:0 0 3px;white-space:pre-wrap;font-size:14.5px;line-height:1.4}
.comment-item time{font-size:11.5px;color:var(--label3)}
.comment-form{display:grid;gap:8px;padding:12px 14px 14px}
.comment-form textarea{width:100%;resize:vertical;min-height:70px;max-height:180px;padding:9px 11px;border:0;border-radius:10px;background:var(--search);color:var(--label);font:inherit;font-size:14.5px}
.comment-form textarea::placeholder{color:var(--label3)}
.comment-form textarea:focus{outline:2px solid var(--accent);outline-offset:0}
.comment-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--label3)}
.comment-captcha{min-height:0;overflow:hidden}
.comment-submit{justify-self:stretch;padding:10px 14px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:14.5px}
.comment-submit:disabled{opacity:.4;cursor:not-allowed}
.comment-status{margin:0;color:var(--label2);font-size:12px;line-height:1.35}
.comment-status.err{color:var(--red)}

/* ---------- map furniture ---------- */
.pts-canvas{pointer-events:none}
.leaflet-container{font:inherit;background:var(--map)}
.leaflet-left{left:var(--ui-left);transition:left .25s ease-in-out}
.fb-tile{overflow:hidden}
.fb-tile img{position:absolute;left:0;top:0;width:256px;height:256px;max-width:none;user-select:none;-webkit-user-drag:none}
/* credits row, styled like Apple's legal links (all required attributions stay visible) */
.leaflet-control-attribution{font-size:10.5px!important;background:transparent!important;color:var(--label2)!important;padding:0 8px 2px!important;text-shadow:0 0 3px var(--map),0 0 2px var(--map);margin:0 58px 6px 0!important;max-width:calc(100vw - var(--ui-left) - 80px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leaflet-control-attribution a{color:var(--label2)!important}
.leaflet-control-attribution .leg{font-weight:600}
/* Apple's adaptive scale: top-left of the map, visible while zooming (opacity is driven from app.js) */
#scale{position:absolute;z-index:900;left:calc(var(--ui-left) + 7px);top:11px;width:210px;height:20px;pointer-events:none;opacity:0;transition:left .25s ease-in-out}
/* my location: Apple's pulsing blue dot (inner dot breathes 1 → .81 over 3 s inside a white ring) */
.udot-wrap{background:none;border:0}
.udot{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.25)}
[data-theme=dark] .udot{background:#c7c7cc;box-shadow:0 0 10px rgba(0,0,0,.3)}
.udot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);animation:udot 3s ease-in-out infinite}
@keyframes udot{0%,100%{transform:scale(1)}50%{transform:scale(.81)}}
#ctlcol{position:absolute;z-index:1000;top:14px;right:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.ctlgroup{display:flex;flex-direction:column;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--glass-line)}
.ctlbtn{width:42px;height:42px;border:0;background:transparent;color:var(--label);display:grid;place-items:center}
.ctlgroup .ctlbtn+.ctlbtn{border-top:1px solid var(--sep)}
.ctlbtn:hover{background:var(--hover)}
.ctlbtn svg{width:19px;height:19px}
#locate{color:var(--accent)}
#locate[data-state=error]{color:var(--label2)}
#locate[data-state=error][aria-expanded=true]{color:var(--label)}
#mtbtn[aria-expanded=true]{color:var(--accent)}
/* location icon states swap by scaling out / in (Apple: transform .2s ease-in-out) */
.lic{position:relative;width:19px;height:19px;display:block}
.lic>svg{position:absolute;inset:0;width:19px;height:19px}
.lic>.lin{animation:lic-in .2s ease-in-out both}.lic>.lout{animation:lic-in .2s ease-in-out reverse both}
@keyframes lic-in{from{transform:scale(0)}to{transform:none}}
.lglyph{stroke:none;fill:currentColor}
.lspin{stroke:none}
.lspin rect{fill:currentColor;animation:lspin .8s infinite}
@keyframes lspin{0%{opacity:1}88%{opacity:.15}}
.compass{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--compass);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 -2px 20px rgba(0,0,0,.1),0 0 12px rgba(0,0,0,.1),0 0 0 .5px var(--glass-line);display:grid;place-items:center;color:var(--cn);transition:transform var(--t1) var(--curve)}
.compass:hover{filter:brightness(1.08)}.compass:active{transform:scale(.94)}
.compass svg{width:40px;height:40px;display:block}
.compass .ticks line{stroke:var(--tick);stroke-width:1.1;stroke-linecap:round}.compass .ticks line.major{stroke-width:1.5}
.compass .north{fill:#ff3b30;stroke:none}
.compass{touch-action:none;cursor:grab}.compass.rotating{cursor:grabbing}
.compass .dial{transform-box:view-box;transform-origin:20px 20px}
/* map rotation (compass): the map element turns about the screen centre; things drawn on it are counter-rotated to stay upright */
#map.rotated{transform-origin:50% 50%}
.place-pin{rotate:calc(-1 * var(--bearing,0deg));transform-origin:18px 50px}
.compass .cn{fill:var(--cn);stroke:none;font:700 15px/1 var(--font);text-anchor:middle;dominant-baseline:central}
#zoomctl{position:absolute;z-index:1000;right:14px;bottom:30px}
#mtpop{width:330px;padding:14px 14px 12px}
.mtrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mtopt{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:13px;color:var(--label)}
.mtthumb{width:100%;height:64px;border-radius:12px;background-color:var(--thumb-bg);background-size:cover;background-position:center;box-shadow:0 0 0 1px var(--glass-line) inset;display:block}
.mtopt[aria-checked=true] .mtthumb{box-shadow:0 0 0 2.5px var(--accent)}
.mtopt[aria-checked=true] b{color:var(--accent)}
.mtsep{height:1px;background:var(--sep);margin:12px 0 10px}
.mtapp{display:flex;align-items:center;gap:4px;font-size:13px}
.mtapp span{color:var(--label2);font-weight:600;margin-right:auto}
.mtapp button{border:0;background:var(--fill2);border-radius:9px;padding:6px 11px;font-size:13px;font-weight:600;color:var(--label)}
.mtapp button[aria-checked=true]{background:var(--accent);color:var(--on-accent)}
/* phones: map type as Apple's "Choose Map" card — slides up from the bottom (transform .3s ease-in-out) */
.mtmodal{position:fixed;left:0;right:0;bottom:0;z-index:1450;background:var(--card);border-radius:12px 12px 0 0;box-shadow:0 0 24px rgba(0,0,0,.14),0 0 12px rgba(0,0,0,.08);padding-bottom:env(safe-area-inset-bottom);
  transform:translate3d(0,100%,0);visibility:hidden;transition:transform .3s ease-in-out,visibility 0s .3s}
.mtmodal.open{transform:none;visibility:visible;transition:transform .3s ease-in-out,visibility 0s}
.mm-head{display:flex;align-items:center;padding:20px}
.mm-head h2{flex:1;font-size:22px;margin:0}
.mm-close{width:30px;height:30px;border:0;border-radius:50%;background:var(--fill);color:var(--label2);display:grid;place-items:center;padding:0}
.mm-close svg{width:16px;height:16px;stroke-width:2.6}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:121px;gap:16px;padding:2px 20px 16px}
.mm-card{position:relative;border:0;padding:0;border-radius:8px;overflow:hidden;background:var(--thumb-bg);cursor:pointer}
.mm-card:first-child{grid-column:1/-1}
.mm-card[aria-checked=true]{box-shadow:0 0 0 2px var(--accent)}
.mm-img{position:absolute;inset:0;background-size:cover;background-position:center}
.mm-lbl{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;text-align:left;font-size:15px;line-height:20px;color:var(--label);background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px)}
[data-theme=dark] .mm-lbl{background:rgba(0,0,0,.6)}
.mm-app{padding:0 20px 20px}
.floatpill{position:absolute;z-index:1000;top:14px;left:calc(var(--ui-left) + (100% - var(--ui-left)) / 2);transform:translateX(-50%);border:0;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--accent);border-radius:18px;box-shadow:var(--shadow);padding:8px 15px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid var(--glass-line)}
.floatpill svg{width:16px;height:16px;stroke-width:2.4}
.floatpill.notice{top:62px;color:var(--label);font-weight:500;font-size:13px;pointer-events:none}
#filterchip{position:absolute;z-index:1000;bottom:30px;left:calc(var(--ui-left) + (100% - var(--ui-left)) / 2);transform:translateX(-50%);background:var(--accent);color:var(--on-accent);border-radius:18px;box-shadow:var(--shadow);padding:5px 5px 5px 14px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap}
#filterchip button{border:0;background:rgba(255,255,255,.25);color:inherit;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;padding:0}
#filterchip button svg{width:13px;height:13px;stroke-width:2.8}
.place-pin{position:absolute;left:-18px;top:-50px;width:36px;height:52px;pointer-events:none;animation:pindrop .45s cubic-bezier(.32,.72,0,1) both}
.place-pin .badge{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(var(--accent-hi),var(--accent));border:2.5px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.45);display:grid;place-items:center}
.place-pin .badge svg{width:18px;height:18px;stroke:#fff;stroke-width:2.4}
.place-pin .stem{position:absolute;left:17px;top:35px;width:2.5px;height:12px;background:#fff;border-radius:0 0 2px 2px;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.place-pin .ground{position:absolute;left:12px;top:46px;width:12px;height:5px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(1px)}
@keyframes pindrop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.pinlabel{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);background:var(--glass);color:var(--label);border:1px solid var(--glass-line);border-radius:13px;padding:4px 11px;font-weight:600;font-size:12.5px;box-shadow:var(--shadow);white-space:nowrap;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* first load: just Apple's activity indicator (8 blades, .8 s), centred on the map, fading away when the data is in */
#loading{position:absolute;z-index:1300;left:calc(var(--ui-left) + (100% - var(--ui-left)) / 2);top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}
#loading.done{opacity:0;visibility:hidden}
.aspin{width:30px;height:30px;stroke:none;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.35))}
.aspin rect{fill:var(--label2);animation:lspin .8s infinite}
[data-theme=dark] .aspin rect{fill:rgba(235,235,245,.72)}
#loading.err{pointer-events:auto;background:var(--popover);padding:14px 18px;border-radius:14px;box-shadow:var(--shadow);font-size:14px;max-width:min(86vw,360px);text-align:center}
#loading.err .aspin{display:none}
.spin{width:20px;height:20px;border:3px solid var(--fill);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#toast{position:absolute;z-index:1200;left:calc(var(--ui-left) + (100% - var(--ui-left)) / 2);bottom:80px;transform:translateX(-50%);background:var(--popover);color:var(--label);padding:10px 16px;border-radius:12px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .25s;max-width:min(86%,520px);text-align:center;box-shadow:var(--shadow);border:1px solid var(--glass-line)}
#toast.on{opacity:1}
.noscript{position:absolute;z-index:2000;top:80px;left:12px;right:12px;background:#3a3a3c;color:#fff;padding:12px;border-radius:10px}

/* ---------- mobile: bottom sheet ---------- */
@media (max-width:768px){
  .cardclose{display:none}
  :root{--ui-left:0px}
  #sidebar{display:none}
  #card{left:0;right:0;top:max(64px,calc(env(safe-area-inset-top) + 52px));bottom:0;width:auto;height:auto;border-radius:14px 14px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.3);background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;
    transform:translateY(calc(100% - var(--peek,172px)));padding-bottom:env(safe-area-inset-bottom);
    transition:transform .5s cubic-bezier(.32,.72,0,1);will-change:transform}
  #card.dragging{transition:none}
  #card::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:100vh;background:var(--card);pointer-events:none}
  .sheet-handle,.card-mobile-head,.card-tabs,.searchwrap{touch-action:none;user-select:none;-webkit-user-select:none}
  #loc{user-select:text;-webkit-user-select:text}
  #sugg{touch-action:pan-y;max-height:44dvh}
  body.sheet-full #card{transform:none}
  body.sheet-half #card{transform:translateY(calc(100% - var(--halfvis,56vh)))}
  body.card-closed #card{transform:translateY(calc(100% - var(--peek,172px)));visibility:visible;pointer-events:auto}
  .sheet-handle{display:flex;justify-content:center;padding:8px 0 6px;cursor:grab}
  .sheet-handle span{width:38px;height:5px;border-radius:3px;background:var(--label3)}
  .card-mobile-head{display:block;padding:2px 16px 0}
  .brand.small{padding:0}
  .brand.small .brand-text{flex-direction:row;align-items:baseline;gap:8px}
  .brand.small .brand-text b{font-size:15px}
  .searchwrap{padding:8px 16px 8px}
  .card-tabs{display:flex;margin:0 16px 6px;background:var(--fill2);border-radius:9px;padding:2px}
  .card-tabs button{flex:1;border:0;background:transparent;border-radius:7px;padding:5px 0;font-size:13px;font-weight:600;color:var(--label2)}
  .card-tabs button[aria-selected=true]{background:var(--platter);color:var(--label);box-shadow:0 1px 3px rgba(0,0,0,.18)}
  body.place-open .card-tabs,body.res-open .card-tabs{display:none}
  .card-body{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  /* Apple (phones): 44 px controls 10 px from the edge; they fade away while the sheet is pulled up */
  #ctlcol{top:calc(20px + env(safe-area-inset-top));right:10px;transition:opacity .25s ease-in-out}
  #ctlcol .ctlbtn{width:44px;height:44px}
  #zoomctl{display:none}
  body.sheet-full #ctlcol,body.sheet-half #ctlcol{opacity:0;pointer-events:none}
  #scale{top:calc(11px + env(safe-area-inset-top))}
  #loading{top:calc((100% - var(--peek,172px)) / 2)}
  body.chip-on #scale{top:calc(52px + env(safe-area-inset-top))}
  .floatpill{left:50%;top:12px}
  .floatpill.notice{top:58px}
  /* "Search This Area" sits just above the sheet and fades out while the sheet is up (Apple: opacity .25s ease-in-out) */
  #searcharea{top:auto;bottom:calc(var(--peek,172px) + 12px);transition:opacity .25s ease-in-out}
  body.sheet-full #searcharea,body.sheet-half #searcharea{opacity:0;pointer-events:none}
  #filterchip{bottom:auto;top:12px;left:12px;transform:none}
  #toast{bottom:calc(var(--peek,172px) + 20px)}
  .leaflet-bottom{bottom:calc(var(--peek,172px) - 4px);transition:bottom .5s cubic-bezier(.32,.72,0,1)}
  .leaflet-control-attribution{margin-right:6px!important;max-width:calc(100vw - 20px)}
  .pl-title{font-size:22px}
  .phone-only{display:block}
  .compass,.compass svg{width:44px;height:44px}
}