:root{--ink:var(--p-f4f2ff);--night:var(--p-0d0a1f);--panel:rgba(var(--p-14102c-rgb),.92);--proj:var(--p-a77bff);--mural:#ffd23f;--light:#3fe0ff;--uniq:#ff4fa3;--fac:var(--p-8f8aa8);--sz:44px;--a1:#a77bff;--a2:#ff4fa3;--a3:#ffd23f;--a4:#3fe0ff}
/* interface palette: every purple shade of the original look is a --p-<its default hex> variable (plus -rgb for
   rgba). app.js theme() swings them all to settings.theme's hue and color strength, keeping each one's lightness. */
:root{--p-0d0a1f:#0d0a1f;--p-0d0a1f-rgb:13,10,31;--p-130f29:#130f29;--p-130f29-rgb:19,15,41;--p-140f2b:#140f2b;--p-140f2b-rgb:20,15,43;--p-14102a:#14102a;--p-14102a-rgb:20,16,42;--p-14102c:#14102c;--p-14102c-rgb:20,16,44;--p-16122f:#16122f;--p-16122f-rgb:22,18,47;--p-17122f:#17122f;--p-17122f-rgb:23,18,47;--p-17123a:#17123a;--p-17123a-rgb:23,18,58;--p-1a1536:#1a1536;--p-1a1536-rgb:26,21,54;--p-1b1640:#1b1640;--p-1b1640-rgb:27,22,64;--p-211a44:#211a44;--p-211a44-rgb:33,26,68;--p-221b44:#221b44;--p-221b44-rgb:34,27,68;--p-2a2350:#2a2350;--p-2a2350-rgb:42,35,80;--p-2a2547:#2a2547;--p-2a2547-rgb:42,37,71;--p-3a2f70:#3a2f70;--p-3a2f70-rgb:58,47,112;--p-3a3363:#3a3363;--p-3a3363-rgb:58,51,99;--p-4a4280:#4a4280;--p-4a4280-rgb:74,66,128;--p-4a4560:#4a4560;--p-4a4560-rgb:74,69,96;--p-8f8aa8:#8f8aa8;--p-8f8aa8-rgb:143,138,168;--p-a77bff:#a77bff;--p-a77bff-rgb:167,123,255;--p-a9a3cc:#a9a3cc;--p-a9a3cc-rgb:169,163,204;--p-c9c4e6:#c9c4e6;--p-c9c4e6-rgb:201,196,230;--p-d9d4f6:#d9d4f6;--p-d9d4f6-rgb:217,212,246;--p-f4f2ff:#f4f2ff;--p-f4f2ff-rgb:244,242,255}
*{box-sizing:border-box}
/* page background matches the street map's near-black (rgb 12,12,12) so the brief blank strip iPhone Chrome can show
   before the first pan blends in. Roll back: background:var(--night) */
html,body{height:100%;margin:0;background:#0c0c0c;color:var(--ink);font-family:var(--font,"Bricolage Grotesque"),system-ui,sans-serif}
/* clean load: the page stays invisible (plain black) until every script has applied this map's own color, name, labels and
   font (index.html removes .booting at the end), then fades in, so nothing default or from another map ever shows */
html.booting body{opacity:0}
body{transition:opacity .18s ease-out}
@media (prefers-reduced-motion:reduce){body{transition:none}}
/* iPhone page zoom (Josh 2026-10-17: the whole UI randomly scaled up on Chrome iOS): no double-tap zoom anywhere (taps on
   +, -, arrows stay taps; the map has its own double tap), no pinch-zoom of the page from the top bar or the buttons, and
   on touch screens no text box or dropdown under 16px (iOS zooms the page in when one is tapped). */
html,body{touch-action:manipulation}
#bar,#tools{touch-action:none}
@media (pointer:coarse){input,select,textarea{font-size:max(16px,1em)!important}}
#map{position:fixed;inset:0;background:var(--p-0d0a1f)}
.leaflet-container{font-family:inherit}
.leaflet-control-attribution{background:rgba(var(--p-0d0a1f-rgb),.7)!important;color:#aaa!important}
.leaflet-control-attribution a{color:#ccc!important}
/* bar */
/* top bar: only the name box (left) and, for editors, Admin / Place pins (right). No fade: the box has its own solid back.
   The categories moved into the menu (#layers). Empty parts of the bar let taps and drags through to the map. */
#bar{position:fixed;left:0;right:0;top:0;z-index:1000;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0;display:flex;gap:8px;align-items:flex-start;pointer-events:none}
#bar>*{pointer-events:auto}
/* name box: one word per line (.stacked), each line half a category button tall (16.5px); the optional icon is a square as
   tall as the lines (--lines) */
#bar .brand{display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:7px 12px;border-radius:14px;background:var(--panel);backdrop-filter:blur(10px);border:2px solid rgba(var(--p-a77bff-rgb),.45);box-shadow:0 2px 12px #0008}
#bar .brand:not(.ready){visibility:hidden}  /* until app.js puts the real name in (no flash of a placeholder) */
#bar .brand.withicon{padding-left:7px}
#bar h1{font-size:20px;font-weight:800;line-height:23px;margin:0;letter-spacing:-.02em;min-width:0}
#bar h1 span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bar .stacked h1{font-size:15px;line-height:16.5px;letter-spacing:-.01em}
#bar .bico{flex:none;width:23px;height:23px;border-radius:22%;object-fit:cover}
#bar .stacked .bico{width:calc(var(--lines) * 16.5px);height:calc(var(--lines) * 16.5px)}
#bar .bico[hidden]{display:none}
.chip{flex:none;border:2px solid var(--c);background:transparent;color:var(--ink);font-weight:600;font-size:13px;line-height:1;font-family:inherit;padding:8px 11px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:6px}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.chip[aria-pressed=false]{opacity:.38;border-style:dashed}
.chip:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* markers */
.pin{width:var(--sz);height:var(--sz);border-radius:9px;border:3px solid var(--c);background:var(--p-221b44) center/cover no-repeat;box-shadow:0 0 14px var(--c);position:relative;transition:transform .12s}

.tether{position:absolute;left:calc(var(--sz)/2);top:calc(var(--sz)/2);height:2px;margin-top:-1px;background:var(--c);opacity:.75;transform-origin:0 50%;pointer-events:none;z-index:-1;transition:width .25s ease,transform .25s ease,opacity .25s}
.tether i{position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c)}
.pin:hover{transform:scale(1.08);z-index:9}
.pinwrap,.facwrap{transition:margin .25s ease,opacity .2s}
#map.focus .pinwrap:not(.sel),#map.focus .facwrap{opacity:0}
.pinwrap:not(.sel) .tether{opacity:0!important}
.sel .tether{height:3px;margin-top:-1.5px;opacity:1}
.sel .tether i{right:-7px;top:-5.5px;width:14px;height:14px;border:2px solid #fff;box-shadow:0 0 12px var(--c)}
.spot{display:none;position:absolute;left:calc(var(--sz)/2 - var(--dx));top:calc(var(--sz)/2 - var(--dy));width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 12px var(--c);z-index:10;pointer-events:none}
.sel.inside .spot{display:block}
.inside .tether{opacity:0!important}
.sel .pin span{display:block}
/* selected pin: pulsing glow and a centered "i Tap" hint that a second tap opens the card */
.sel .pin{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 6px 6px var(--c),0 0 28px var(--c)}}
.pin .hint{display:none;position:absolute;inset:0;z-index:2;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding-top:.3em;line-height:1;border-radius:6px;background:rgba(var(--p-0d0a1f-rgb),.2);color:#fff;font-style:normal;font-weight:700;font-size:clamp(9px,calc(var(--sz)*.16),14px);text-shadow:0 1px 3px #000;pointer-events:none}
.sel .pin .hint{display:flex}
.hint i{display:grid;place-items:center;width:clamp(14px,calc(var(--sz)*.32),30px);height:clamp(14px,calc(var(--sz)*.32),30px);border-radius:50%;border:2px solid #fff;font-family:Georgia,serif;font-style:italic;font-size:clamp(9px,calc(var(--sz)*.2),18px);background:rgba(var(--p-0d0a1f-rgb),.5)}
/* #map raises specificity over Leaflet's ".leaflet-marker-pane img{width:auto}", which otherwise stretches non-square photos */
#map .pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:6px;z-index:1}
.pin b{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--sz)*.32);font-weight:800;color:var(--c)}
.pin span{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:600;background:rgba(var(--p-0d0a1f-rgb),.85);padding:2px 6px;border-radius:4px}
.labels .pin span{display:block}
/* focused: other pins are hidden, so a long title wraps onto more lines instead of being cut off */
#map.focus .sel .pin span{white-space:normal;width:max-content;max-width:180px;text-align:center;line-height:1.25}
/* focused: the picture is slightly see-through so the map shows underneath (border, hint and title stay solid) */
#map.focus .sel .pin{background-color:transparent}
#map.focus .sel .pin img{opacity:.55}
.fac{width:20px;height:20px;border-radius:50%;background:var(--p-2a2547);border:2px solid var(--fac);display:grid;place-items:center;font-weight:800;font-size:9px;line-height:1;font-family:inherit;color:#ddd}
.fac svg{width:14px;height:14px;fill:#fff}
.leaflet-div-icon{background:none;border:none}
/* sheet */
#sheet{position:fixed;left:0;right:0;bottom:0;z-index:1100;background:var(--panel);backdrop-filter:blur(10px);border-top:3px solid var(--c,#fff);padding:0 16px calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateY(105%);transition:transform .2s ease;max-width:560px;margin:0 auto;border-radius:16px 16px 0 0}
#sheet.open{transform:none}
#sheet{max-height:78vh;overflow-y:auto}
/* header strip: category on the left, close on the right; stays pinned while the card scrolls */
#sheet .top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -16px 10px;padding:10px 10px 10px 16px;background:var(--p-16122f);border-bottom:1px solid #ffffff14}
#sheet .kind{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
#sheet .kind i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
#sheet button.shut{flex:none;width:36px;height:36px;padding:0;border-radius:50%;background:var(--p-3a3363);color:var(--ink);font-weight:400;font-size:24px;line-height:1;font-family:inherit;display:grid;place-items:center}
.gal{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:8px}
.gal img{flex:0 0 100%;width:100%;height:46vh;object-fit:contain;background:#000;border-radius:8px;scroll-snap-align:center}
.gal.multi img{flex-basis:88%}
.arts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
#sheet a.art{background:transparent;color:var(--ink);border:1px solid var(--c);padding:5px 10px 5px 8px;font-size:13px;display:flex;align-items:center;gap:7px;line-height:1.2}
#sheet a.art span{display:flex;flex-direction:column}
#sheet a.art .lico{flex:none;width:16px;height:16px;fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#sheet a.art .lico [fill]{fill:var(--c)}
/* the installation's BLINK page (eye) and Share: outlined rounded squares, first in the links row */
#sheet a.art.blinkpage,#sheet .art.sqlink{flex:none;width:40px;min-height:38px;align-self:stretch;padding:0;justify-content:center}
#sheet a.art.blinkpage .lico,#sheet .art.sqlink .lico{width:22px;height:22px}
/* the share square: a button dressed exactly like the link squares */
#sheet button.art.sqlink{background:transparent;color:var(--c);border:1px solid var(--c);border-radius:8px;display:flex;align-items:center;cursor:pointer}
#sheet button.art.sqlink .lico{fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#sheet a.art small{display:block;color:var(--p-a9a3cc);font-weight:400;font-size:11px}
#sheet .sched{max-width:60ch;margin:8px 0}
#sheet .sched h3{font-size:14px;font-weight:800;color:var(--c);margin:14px 0 4px}
#sheet .sched dl{display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;margin:0;font-size:14px;line-height:1.35}
#sheet .sched dt{grid-column:1;color:var(--ink);opacity:.7;white-space:nowrap}
#sheet .sched dd{grid-column:2;margin:0;font-weight:600}
#sheet .sched dd.desc{font-weight:400;font-size:13px;opacity:.85;margin-bottom:6px}
#sheet .notes{list-style:none;padding:0;margin:12px 0 4px;font-size:13px;line-height:1.4;opacity:.85;max-width:60ch}
#sheet .notes li{margin:3px 0}
/* plain text links (overrides the button look "#sheet a" gives the action row) */
#sheet .sum a,#sheet .sched a,#sheet .notes a{all:unset;color:var(--c);text-decoration:underline;text-underline-offset:2px;cursor:pointer;word-break:break-word}
#sheet p.sum{white-space:pre-line;color:var(--ink);font-size:15px;line-height:1.45;margin:8px 0 4px;max-width:60ch}
#sheet p.cat{font-size:12px;color:var(--p-a9a3cc)}
#sheet .row{flex-wrap:wrap}
#sheet a.sec{background:var(--p-3a3363);color:var(--ink)}
#sheet h2{margin:12px 0 2px;font-size:22px;line-height:1.15;letter-spacing:-.01em}
#sheet p{margin:2px 0;color:var(--p-c9c4e6);font-size:14px}
#sheet .row{display:flex;gap:8px;margin-top:12px;padding-bottom:14px;border-bottom:1px solid #ffffff14}
#sheet a,#sheet button{font-weight:600;font-size:15px;line-height:1.2;font-family:inherit;color:var(--night);background:var(--c,#fff);border:0;border-radius:8px;padding:10px 14px;text-decoration:none;cursor:pointer}
#sheet button.x{background:var(--p-3a3363);color:var(--ink)}
#tools{position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:1000;display:flex;flex-direction:column;gap:8px}
#tools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;display:block;margin:auto}
#tools button{width:44px;height:44px;border-radius:50%;border:0;background:var(--panel);color:var(--ink);font-weight:800;font-size:18px;font-family:inherit;cursor:pointer;box-shadow:0 2px 10px #0008}
.pics{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--panel);border-radius:22px;padding:10px 0 4px;border:1.5px solid color-mix(in srgb,var(--proj) 75%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--proj) 35%,transparent)}
.pics span{font-size:11px;font-weight:600;color:var(--p-c9c4e6)}
.pics button{width:34px!important;height:34px!important;flex:none;box-shadow:none!important;font-size:13px!important;background:var(--p-3a3363)!important}
/* first-visit demo: the arrow being "pressed" lights up */
.pics.flare{animation:picsflare 1.4s ease-in-out}
/* first-visit demo and flare: the map's own category colors (--a1..--a4, set by app.js); glow off = colored outline */
@keyframes picsflare{0%{transform:none}25%{transform:scale(1.15);border-color:var(--a1);box-shadow:0 0 26px 8px var(--a1)}50%{transform:scale(1.12);border-color:var(--a2);box-shadow:0 0 24px 7px var(--a2)}75%{transform:scale(1.08);border-color:var(--a3);box-shadow:0 0 22px 6px var(--a3)}100%{transform:none}}
@keyframes picsflareflat{0%{transform:none}25%{transform:scale(1.15);outline:3px solid var(--a1);outline-offset:2px}50%{transform:scale(1.12);outline:3px solid var(--a2);outline-offset:2px}75%{transform:scale(1.08);outline:3px solid var(--a3);outline-offset:2px}100%{transform:none}}
html.noglow .pics.flare{animation-name:picsflareflat}
.pics button.demo{background:var(--a1)!important;color:var(--night)!important}
html:not(.noglow) .pics button.demo{box-shadow:0 0 12px var(--a1)!important}
#loc.on{background:#2f8bff;color:#fff}
#loc.finding{animation:locpulse 1s ease-in-out infinite alternate}
@keyframes locpulse{from{box-shadow:0 0 0 0 #2f8bffaa}to{box-shadow:0 0 0 10px #2f8bff00}}
.me{width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid #2f8bff;box-shadow:0 0 0 6px #2f8bff44}
/* compass beam: a soft light beam from your dot in the direction the phone points (like a projector, matching the icon) */
.mewrap{position:relative;width:16px;height:16px}
.mewrap .me{position:relative}
.mewrap .cone{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;transform:rotate(var(--hd,0deg));opacity:0;transition:opacity .5s;pointer-events:none;mix-blend-mode:screen;filter:drop-shadow(0 0 6px #2f8bffaa)}
.mewrap.hd .cone{opacity:1}
#map.dimtiles .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.85) saturate(.4)}
a.chip{text-decoration:none}
.editbtn{--c:#fff;order:99;margin-left:auto;display:none!important}
.canedit .editbtn{display:flex!important}
/* editor chips (Admin, Place pins) sit on the map like the name box: same solid themed back and shadow */
#bar .editbtn:not([aria-pressed=true]){background:var(--panel);backdrop-filter:blur(10px);box-shadow:0 2px 12px #0008}
/* press and hold Blunk to sign in: no text selection or phone callout */
#bar .brand{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#editor{position:fixed;inset:0;z-index:2000;background:var(--night);overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 12px) 14px calc(env(safe-area-inset-bottom,0px) + 30px)}
#editor[hidden]{display:none}
#editor header{display:flex;align-items:center;gap:14px;max-width:760px;margin:0 auto}
#editor header h2{margin:0;font-size:24px;letter-spacing:-.02em}
#editor .back{color:var(--ink);text-decoration:none;font-weight:600;border:2px solid var(--p-4a4280);border-radius:999px;padding:7px 12px}
.edtools{display:flex;gap:8px;flex-wrap:wrap;max-width:760px;margin:14px auto 6px}
.edtools input{flex:1 1 220px;font:inherit;font-size:16px;padding:10px 12px;border-radius:8px;border:2px solid var(--p-4a4280);background:var(--p-1a1536);color:var(--ink)}
.edtools button,.acts button,#ed2 .schbtns button{font-weight:600;font-size:13px;font-family:inherit;color:var(--ink);background:var(--p-2a2350);border:2px solid var(--p-4a4280);border-radius:8px;padding:8px 10px;cursor:pointer}
.acts button[aria-pressed=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 25%,var(--p-2a2350))}
.note{max-width:760px;margin:4px auto 12px;color:var(--p-a9a3cc);font-size:13px}
#edlist{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.er{display:flex;gap:12px;padding:10px;border-radius:12px;background:var(--p-17122f);border-left:4px solid var(--c)}
.er.focus{outline:2px solid var(--c)}
.opts{display:flex;gap:10px;overflow-x:auto;padding:10px 8px 4px 2px}
.tile{position:relative;flex:none;display:flex;flex-direction:column;gap:4px}
.mv{display:flex;gap:4px}
.mv button{flex:1;padding:2px 0!important;font-size:16px!important;line-height:1.2}
.mv button:disabled{opacity:.25;cursor:default}
.pinbadge{position:absolute;left:3px;bottom:3px;z-index:2;font-weight:700;font-size:10px;line-height:1;font-family:inherit;font-style:normal;background:var(--c);color:var(--night);padding:3px 5px;border-radius:4px}
.rm{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:#e5484d;color:#fff;border:2px solid var(--night);font-weight:800;font-size:15px;line-height:1;font-family:inherit;padding:0;z-index:2;cursor:pointer;display:grid;place-items:center}
.opt{flex:none;width:72px;height:72px;padding:0!important;border-radius:9px!important;overflow:hidden;position:relative;display:grid;place-items:center;font-weight:800;color:var(--c)!important}
.opt img{width:100%;height:100%;object-fit:cover;display:block}
.opt[aria-pressed=true]{border:3px solid var(--c)!important;box-shadow:0 0 10px var(--c)}
.er .info{flex:1}
.er .th{flex:none;width:84px;height:84px;border-radius:9px;background:var(--p-221b44) center/cover no-repeat;display:grid;place-items:center;font-weight:800;font-size:22px;color:var(--c)}
.er .info{min-width:0;width:100%;display:flex;flex-direction:column;gap:3px}
.er strong{font-size:16px;line-height:1.2}
.er small{color:var(--p-a9a3cc);font-size:12px}
.er em{color:var(--c);font-style:normal}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.empty{color:var(--p-a9a3cc)}
@media (prefers-reduced-motion:reduce){.pin,#sheet{transition:none}.sel .tether i,.spot,#map.flare .pin,.pinwrap.ripple .pin{animation:none}}
/* map search: panel at the top of the screen, results scroll under the search box */
#search{position:fixed;top:0;left:0;right:0;z-index:1200;max-width:560px;margin:0 auto;display:flex;flex-direction:column;max-height:75vh;max-height:75dvh;background:var(--panel);backdrop-filter:blur(10px);border-bottom:3px solid #fff;border-radius:0 0 14px 14px;box-shadow:0 8px 30px #000a;padding-top:env(safe-area-inset-top,0px)}
#search[hidden]{display:none}
#search .top{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-bottom:1px solid #ffffff14}
#fq{flex:1;min-width:0;font-weight:400;font-size:16px;font-family:inherit;color:var(--ink);background:var(--p-221b44);border:1px solid var(--p-4a4280);border-radius:999px;padding:10px 14px}
#search button.shut{flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--p-3a3363);color:var(--ink);font-weight:400;font-size:24px;line-height:1;font-family:inherit;display:grid;place-items:center;cursor:pointer}
#fres{flex:1;min-height:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain}
#fres .empty{color:var(--p-a9a3cc);padding:12px;margin:0}
.fr{all:unset;box-sizing:border-box;display:flex;gap:12px;align-items:center;padding:8px;border-radius:10px;background:var(--p-17122f);border-left:4px solid var(--c);cursor:pointer}
.fr:focus-visible{outline:2px solid #fff}
.fr .th{flex:none;width:52px;height:52px;border-radius:8px;overflow:hidden;background:var(--p-221b44);display:grid;place-items:center;font-weight:800;font-size:16px;color:var(--c)}
#fres .th img{width:100%;height:100%;object-fit:cover;display:block}
.fr .info{min-width:0;display:flex;flex-direction:column;gap:2px}
.fr strong{font-size:15px;line-height:1.2;color:var(--ink)}
.fr small{color:var(--p-a9a3cc);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr em{color:var(--c);font-style:normal;font-size:12px}
/* editor: credit links per pin (artist, current link, Change link) */
.links{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:13px}
.lk{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.lk .who{font-weight:600}
.lk a{color:var(--c);word-break:break-all}
.lk em{color:var(--c);font-style:normal;font-size:12px}
.lk button{margin-left:auto;font-weight:600;font-size:12px;font-family:inherit;color:var(--ink);background:var(--p-2a2350);border:2px solid var(--p-4a4280);border-radius:8px;padding:5px 9px;cursor:pointer}
/* "Seen" marks: check badge in the pin's color, picture fades and its glow softens (still tappable, still readable) */
.pin .ck{display:none;position:absolute;top:-7px;right:-7px;z-index:3;width:clamp(16px,calc(var(--sz)*.3),24px);height:clamp(16px,calc(var(--sz)*.3),24px);border-radius:50%;background:var(--c);border:2px solid var(--night);box-shadow:0 0 8px var(--c);place-items:center}
.pin .ck svg,.seenbtn svg,.fck svg{width:70%;height:70%;fill:none;stroke:var(--night);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.seen .pin .ck{display:grid}
/* closed now (open hours, Event tab): a gray no-entry badge in the Seen check's corner; Seen wins when both apply */
.pin .cl{display:none;position:absolute;top:-7px;right:-7px;z-index:3;width:clamp(16px,calc(var(--sz)*.3),24px);height:clamp(16px,calc(var(--sz)*.3),24px);border-radius:50%;background:var(--p-4a4560);border:2px solid var(--night);box-shadow:0 0 6px rgba(0,0,0,.6);place-items:center}
.pin .cl svg{width:78%;height:78%;fill:none;stroke:var(--p-f4f2ff);stroke-width:2.6;stroke-linecap:round}
.closed:not(.seen) .pin .cl{display:grid}
.seen .pin{box-shadow:0 0 5px color-mix(in srgb,var(--c) 60%,transparent)}
.seen .pin img{filter:grayscale(.75) brightness(.6)}
.seen .pin b{opacity:.5}
#map.focus .sel.seen .pin img{filter:none}
/* card button: dark until marked, then fills with the pin's color */
#sheet button.seenbtn{display:flex;align-items:center;gap:6px;background:var(--p-3a3363);color:var(--ink)}
.seenbtn svg{width:16px!important;height:16px!important;stroke:var(--ink)!important;opacity:.45}
#sheet button.seenbtn[aria-pressed=true]{background:var(--c);color:var(--night)}
.seenbtn[aria-pressed=true] svg{stroke:var(--night)!important;opacity:1}
/* search results */
.fr.seen .th{filter:grayscale(.75) brightness(.6)}
.fck{display:inline-grid;place-items:center;vertical-align:-2px;margin-left:6px;width:16px;height:16px;border-radius:50%;background:var(--c)}
/* all seen: everything back to full color (checks stay), plus a one-time rainbow flare sweeping west to east */
#map.allseen .seen .pin img{filter:none}
#map.allseen .seen .pin{box-shadow:0 0 14px var(--c)}
#map.allseen .seen .pin b{opacity:1}
#map.flare .pin,.pinwrap.ripple .pin{animation:flare 1.1s ease-in-out var(--dl,0s) both}
@keyframes flare{0%{filter:none;transform:none}45%{filter:brightness(1.35) saturate(1.3);transform:scale(1.25);box-shadow:0 0 30px 8px var(--c)}100%{filter:none;transform:none}}
@keyframes flareflat{0%{filter:none;transform:none}45%{filter:brightness(1.35) saturate(1.3);transform:scale(1.25);outline:3px solid var(--c);outline-offset:2px}100%{filter:none;transform:none}}
html.noglow #map.flare .pin,html.noglow .pinwrap.ripple .pin{animation-name:flareflat}
#sheet .done{text-align:center;padding:8px 0 4px}
#sheet .done h2{font-size:34px;letter-spacing:-.02em;margin:10px 0 4px;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3),var(--a4));-webkit-background-clip:text;background-clip:text;color:transparent}
#sheet .done .big{font-size:16px;color:var(--ink);margin-bottom:10px}
#sheet .done .sched{display:inline-block;text-align:left}
#sheet .done .row{justify-content:center;border-bottom:0;padding-bottom:0}
/* note shown when a whole category is seen */
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:1300;transform:translate(-50%,-10px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;display:flex;align-items:center;gap:8px;white-space:nowrap;background:var(--panel);backdrop-filter:blur(10px);color:var(--ink);font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;border:2px solid var(--c);box-shadow:0 0 18px color-mix(in srgb,var(--c) 55%,transparent)}
#toast i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* save for offline: round button in the top bar, outlined like the layer buttons. Off = cloud with a down arrow;
   busy = a ring fills with progress and the arrow bobs; on = filled, cloud with a check */
.offbtn{--c:var(--p-c9c4e6);flex:none;position:relative;width:36px;height:36px;padding:0;border-radius:50%;border:2px solid var(--c);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.offbtn .ic{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.offbtn .ok{display:none}
.offbtn .ring{position:absolute;inset:-2px;width:36px;height:36px;transform:rotate(-90deg);display:none;fill:none;stroke:var(--c);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100.53;stroke-dashoffset:calc(100.53 * (1 - var(--p,0)));transition:stroke-dashoffset .2s}
.offbtn[data-state=busy]{border-color:#ffffff22}
.offbtn[data-state=busy] .ring{display:block}
.offbtn[data-state=busy] .dn{animation:bob 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(1.5px)}}
.offbtn[data-state=on]{background:var(--c);color:var(--night);box-shadow:0 0 10px color-mix(in srgb,var(--c) 45%,transparent)}
.offbtn[data-state=on] .dn{display:none}
.offbtn[data-state=on] .ok{display:inline}
.offbtn[hidden]{display:none}
.offbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.offbtn .dn{animation:none!important}}
/* "Want to see": a large eye (BLINK's motif) centered on the picture, in the pin's color on a dark disc with a glow.
   Hidden while the pin is selected, so the "i Tap" hint has the center. Seen and listed never show together. */
.pin .eye{display:none;position:absolute;left:50%;top:50%;z-index:2;width:clamp(22px,calc(var(--sz)*.46),48px);height:clamp(22px,calc(var(--sz)*.46),48px);transform:translate(-50%,-50%);border-radius:50%;background:rgba(var(--p-0d0a1f-rgb),.62);border:2px solid var(--c);box-shadow:0 0 12px var(--c),inset 0 0 6px color-mix(in srgb,var(--c) 40%,transparent);place-items:center;pointer-events:none}
.pin .eye svg{width:76%;height:76%}
.pin .eye .lid{fill:none;stroke:var(--c);stroke-width:1.9;stroke-linejoin:round}
.pin .eye .iris{fill:none;stroke:var(--c);stroke-width:1.9}
.pin .eye .pupil{fill:var(--c)}
.want .pin .eye{display:grid}
.want.sel .pin .eye{display:none}
/* card button: dark until on, then fills with the pin's color (same as Mark seen) */
#sheet button.wantbtn{display:flex;align-items:center;gap:6px;background:var(--p-3a3363);color:var(--ink)}
#sheet button.wantbtn[hidden]{display:none}
.wantbtn svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;opacity:.55}
.wantbtn .pupil{fill:var(--ink);stroke:none}
#sheet button.wantbtn[aria-pressed=true]{background:var(--c);color:var(--night)}
.wantbtn[aria-pressed=true] svg{stroke:var(--night);opacity:1}
.wantbtn[aria-pressed=true] .pupil{fill:var(--night)}
/* search: eye after the title, and the "Your list" / "Everything" headings */
.feye{display:inline-block;vertical-align:-3px;margin-left:6px;width:18px;height:18px}
.feye svg{width:100%;height:100%;display:block;fill:none;stroke:var(--c);stroke-width:2.2;stroke-linejoin:round}
.feye .pupil{fill:var(--c);stroke:none}
#fres .fhead{margin:6px 4px 0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--p-a9a3cc)}
/* Circle mode: the Art pill folds into one round button (label and arrows shrink away), pins become small round
   pictures with a thin ring and no titles. The toggle icon shows where it goes: arrows in = shrink, arrows out = back. */
.pics{transition:padding .3s ease,gap .3s ease}
.pics>span{display:block;height:14px;line-height:14px;overflow:hidden;transition:height .3s ease,opacity .2s ease}
.pics #bigger,.pics #smaller{transition:height .3s ease,opacity .2s ease,transform .3s ease}
/* the circle toggle is the last item and the tool stack is pinned to the bottom, so it never moves: only the top padding changes */
/* folded: the same 3.5px gap above, below and beside the toggle (44px circle, toggle centered; it sat too high on iPhone,
   where the hidden arrows collapse to nothing; Josh 2026-10-16). The bottom gap matches the open state, so it never moves */
/* folded: the box shrinks with its contents (no fixed height: set instantly, it made the still-shrinking arrows spill
   out and push the toggle 43px down mid-animation). Same 4px bottom padding as open, so the toggle never moves; 4px on
   top gives the 44px circle with an even 5px gap. */
.pics.compact{padding:4px 0;gap:0}
.pics.compact #bigger,.pics.compact #smaller{padding:0!important;margin:0!important;border:0!important;min-height:0!important}
.pics.compact>span{margin:0}
.pics.compact>span{height:0;opacity:0}
.pics.compact #bigger,.pics.compact #smaller{height:0!important;opacity:0;transform:scale(.4);pointer-events:none}
.pics.noanim,.pics.noanim *{transition:none!important}
#circles svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
#circles .out{display:none}
#circles[aria-pressed=true] .in{display:none}
#circles[aria-pressed=true] .out{display:inline}
#circles[aria-pressed=true]{background:color-mix(in srgb,var(--proj) 35%,var(--p-3a3363))!important}
#circles:active svg{transform:scale(.8)}
#map.circles .pin{border-radius:50%;border-width:2px;box-shadow:0 0 8px var(--c)}
#map.circles .pin img{border-radius:50%}
#map.circles .pin span{display:none}
#map.circles .sel .pin span{display:block}
#map.circles .pin b{font-size:calc(var(--sz)*.36)}
@media (prefers-reduced-motion:reduce){.pics,.pics *{transition:none!important}}
/* circle mode: the isolated pin grows back to the full square picture (and shrinks back when the focus ends) */
#map.circles .pin{transition:width .25s ease,height .25s ease,border-radius .25s ease,border-width .25s ease,transform .12s}
#map.circles .pin img{transition:border-radius .25s ease}
#map.circles .grown .pin{border-radius:9px;border-width:3px;box-shadow:0 0 14px var(--c)}
#map.circles .grown .pin img{border-radius:6px}
/* mini tile (circles pressed while a pin is isolated): a small rounded square, since it still has its line and dot */
#map.circles .mini .pin{border-radius:calc(var(--sz)*.2);border-width:1.5px;box-shadow:0 0 8px var(--c)}
#map.circles .mini .pin img{border-radius:calc(var(--sz)*.12)}
#map.circles .mini.sel .pin .hint{display:none}
#map.circles .mini.sel .pin img{opacity:1}
@media (prefers-reduced-motion:reduce){#map.circles .pin,#map.circles .pin img{transition:none}}
/* search panel: "Your list" is its own boxed section (eye, count, Share list), set apart from the results below */
#fres .mylist{display:flex;flex-direction:column;gap:6px;padding:8px;margin:2px 0 6px;border-radius:12px;background:color-mix(in srgb,var(--proj) 12%,var(--p-140f2b));border:1px solid color-mix(in srgb,var(--proj) 45%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--proj) 18%,transparent)}
#fres .mlhead{display:flex;align-items:center;gap:8px;padding:2px 2px 4px;color:var(--ink);font-size:14px;font-weight:700}
#fres .mlhead .feye{margin:0;--c:var(--proj)}
#fres .mlhead b{color:var(--proj);margin-left:2px}
#fres .listshare{all:unset;box-sizing:border-box;margin-left:auto;display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);padding:6px 11px;border-radius:999px;border:1px solid var(--proj)}
#fres .listshare svg{width:15px;height:15px;color:var(--proj)}
#fres .listshare:focus-visible{outline:2px solid #fff}
#fres .listqr{all:unset;box-sizing:border-box;flex:none;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;border-radius:50%;border:1px solid var(--proj);color:var(--proj)}
#fres .listqr svg{width:17px;height:17px}
#fres .listqr:focus-visible{outline:2px solid #fff}
#toolrow #onphone{all:unset;box-sizing:border-box;cursor:pointer;width:46px;height:46px;border-radius:50%;border:2px solid var(--p-c9c4e6);color:var(--p-c9c4e6);display:grid;place-items:center}
#toolrow #onphone svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Status tool: on = filled, off = dashed and dimmed; while off the closed marks are hidden and the menu button wears a
   ghosted one (.fstat, bottom left) */
#toolrow #statusbtn,#toolrow #solobtn{all:unset;box-sizing:border-box;cursor:pointer;width:46px;height:46px;border-radius:50%;border:2px solid var(--p-c9c4e6);background:transparent;color:var(--p-c9c4e6);display:grid;place-items:center;transition:background .15s,color .15s,opacity .15s}
#toolrow #statusbtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
#toolrow #statusbtn[aria-pressed=false],#toolrow #solobtn[aria-pressed=false]{background:transparent;color:var(--p-c9c4e6);border-style:dashed;opacity:.6}
#toolrow #statusbtn:focus-visible,#toolrow #solobtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Solo follows the Status look (Josh 2026-10-17): on = outlined like the other tools, off = dashed and dimmed */
#toolrow #solobtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
#toolrow #solobtn svg .pupil{fill:currentColor;stroke:none}
#map.solo .pinwrap:not(.want):not(.sel),#map.solo .facwrap{display:none}
/* paused while a route, Solo or a shared list is on: categories dimmed and not tappable, with a line saying why; Solo and
   Route block each other (a tap explains) */
#layers.locked .chip{display:none}  /* paused (route, Solo, shared list): only the .lockhint line shows */
#layers .lockhint{flex-basis:100%;margin:2px 2px 0;font-size:12px;color:var(--p-a9a3cc)}
#layers .lockhint[hidden]{display:none}
#toolrow #walk.blocked,#toolrow #solobtn.blocked{opacity:.35;cursor:not-allowed}
/* menu badge with an icon (route started, Solo) instead of the categories count */
#find .fbadge.ico{display:grid;place-items:center;width:22px;min-width:0;height:20px;padding:0;top:-6px;right:-8px;border-radius:10px}
#find .fbadge.ico[hidden]{display:none}
#find .fbadge.ico svg{width:14px;height:14px;fill:none;stroke:var(--night);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#find .fbadge.ico svg .pupil{fill:var(--night);stroke:none}
#map.nostatus .pin .cl{display:none!important}
#find .fstat{position:absolute;bottom:-4px;left:-6px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;background:var(--night);border:1.5px dashed var(--p-a9a3cc);opacity:.85;pointer-events:none}
#find .fstat svg{width:14px;height:14px;fill:none;stroke:var(--p-a9a3cc);stroke-width:2.6;stroke-linecap:round}
#find .fstat[hidden]{display:none}
/* QR code box (showQR): white code on a card, centered over a dimmed map */
#qrbox{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6)}
#qrbox[hidden]{display:none}
#qrbox .qrcard{position:relative;width:min(360px,100%);max-height:calc(100vh - 32px);overflow-y:auto;box-sizing:border-box;padding:18px 20px 20px;border-radius:18px;background:var(--panel);backdrop-filter:blur(10px);border:2px solid var(--proj);box-shadow:0 0 30px rgba(var(--p-a77bff-rgb),.35);color:var(--ink);text-align:center}
#qrbox h3{margin:2px 30px 12px;font-size:18px;font-weight:800;line-height:1.25}
#qrbox .qr{background:#fff;border-radius:12px;padding:6px;margin:0 0 12px}
#qrbox .qr svg{display:block;width:100%;height:auto}
#qrbox p{margin:0 0 8px;font-size:14px;line-height:1.4}
#qrbox .hint{color:var(--p-a9a3cc);font-size:13px}
#qrbox .shut{all:unset;position:absolute;top:8px;right:10px;width:34px;height:34px;display:grid;place-items:center;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);border-radius:50%}
#qrbox .shut:focus-visible,#qrbox .qrcopy:focus-visible{outline:2px solid #fff}
#qrbox .qrcopy{all:unset;box-sizing:border-box;margin-top:6px;cursor:pointer;font-size:14px;font-weight:700;padding:9px 16px;border-radius:999px;border:2px solid var(--proj);color:var(--ink)}
#fres .fhead{margin-top:8px}
/* shared list view: only the listed pieces show, with a banner under the top bar */
#map.listview .pinwrap:not(.inlist),#map.listview .facwrap{display:none}
#listbanner{position:fixed;left:50%;top:calc(var(--barb,calc(env(safe-area-inset-top,0px) + 54px)) + 8px);transform:translateX(-50%);z-index:1150;display:flex;align-items:center;gap:10px;white-space:nowrap;background:var(--panel);backdrop-filter:blur(10px);color:var(--ink);font-size:14px;font-weight:600;padding:7px 8px 7px 14px;border-radius:999px;border:2px solid var(--proj);box-shadow:0 0 18px color-mix(in srgb,var(--proj) 45%,transparent)}
#listbanner[hidden]{display:none}
#listbanner .feye{margin:0;--c:var(--proj)}
#listbanner b{color:var(--proj)}
#listbanner em{font-style:normal;font-weight:400;font-size:13px;color:var(--p-c9c4e6)}
#listbanner button{all:unset;cursor:pointer}
#listbanner .lbadd{font-size:13px;font-weight:700;color:var(--night);background:var(--proj);padding:6px 12px;border-radius:999px}
#listbanner .lbx{width:30px;height:30px;border-radius:50%;background:var(--p-3a3363);display:grid;place-items:center;font-size:20px;line-height:1}
/* ---- template editor (stage 2): pin list left, selected pin right; stacked on phones ---- */
#editor{padding-left:18px;padding-right:18px}
#editor header,.edtools,.note{max-width:1200px}
#ed2{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
#ed2 .elist{position:sticky;top:0;max-height:calc(100vh - 150px);overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:4px}
.epin{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:center;padding:6px;border-radius:10px;background:var(--p-17122f);border-left:4px solid var(--c);cursor:pointer}
.epin.on{outline:2px solid var(--c);background:var(--p-211a44)}
.epin .th{flex:none;width:40px;height:40px;border-radius:7px;overflow:hidden;background:var(--p-221b44);display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--c)}
.epin .th img{width:100%;height:100%;object-fit:cover;display:block}
.epin strong{display:block;font-size:14px;line-height:1.2;color:var(--ink)}
.epin small{color:var(--p-a9a3cc);font-size:12px}
#ed2 .epane{background:var(--p-130f29);border-radius:14px;padding:16px 18px 22px;min-height:300px}
#ed2 .epane h3{margin:0 0 10px;font-size:22px;border-left:5px solid var(--c);padding-left:10px}
#ed2 section{margin:14px 0 6px;padding-top:12px;border-top:1px solid #ffffff14}
#ed2 h4{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--p-c9c4e6)}
#ed2 h4 small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--p-a9a3cc);margin-left:6px}
#ed2 label{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;font-size:12px;font-weight:600;color:var(--p-a9a3cc)}
#ed2 input,#ed2 select,#ed2 textarea{font-family:inherit;font-size:15px;color:var(--ink);background:var(--p-1a1536);border:2px solid var(--p-4a4280);border-radius:8px;padding:8px 10px;width:100%;box-sizing:border-box}
#ed2 textarea{resize:vertical;line-height:1.45}
#ed2 input:focus,#ed2 select:focus,#ed2 textarea:focus{outline:none;border-color:var(--proj)}
#ed2 .loc{font-size:12px;color:var(--p-a9a3cc);margin:0}
#ed2 .ecredit{background:var(--p-1a1536);border-radius:10px;padding:10px 10px 6px;margin-bottom:8px}
#ed2 .row3{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px}
#ed2 .row3 label{margin:0}
#ed2 .cbtns{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}
#ed2 .cbtns small{margin-right:auto;color:var(--mural);font-size:12px}
#ed2 .cbtns button,#ed2 .addcredit button,#ed2 .danger button,#ed2 .eback{font-family:inherit;font-weight:600;font-size:13px;color:var(--ink);background:var(--p-2a2350);border:2px solid var(--p-4a4280);border-radius:8px;padding:6px 10px;cursor:pointer}
#ed2 .cbtns button:disabled{opacity:.3;cursor:default}
#ed2 .addcredit{display:flex;gap:8px}
#ed2 .danger button{border-color:#ff4fa3;color:#ff8cc4}
#ed2 .eback{display:none;margin-bottom:10px}
#edstatus{align-self:center;font-size:13px;font-weight:600;margin-left:auto}
#edstatus.busy{color:var(--p-a9a3cc)}#edstatus.ok{color:#5be3a1}#edstatus.bad{color:#ff8cc4}
@media (max-width:820px){
  #ed2{grid-template-columns:1fr}
  #ed2 .elist{position:static;max-height:none}
  #ed2.has-pin .elist{display:none}
  #ed2:not(.has-pin) .epane{display:none}
  #ed2 .eback{display:inline-block}
  #ed2 .row3{grid-template-columns:1fr}
  #ed2 .epane{padding:12px}
}
/* Place pins mode (template editor): banner under the top bar, pins grab-able */
#placebanner{position:fixed;left:50%;top:calc(var(--barb,calc(env(safe-area-inset-top,0px) + 54px)) + 8px);transform:translateX(-50%);z-index:1150;display:flex;align-items:center;gap:10px;white-space:nowrap;background:var(--panel);backdrop-filter:blur(10px);color:var(--ink);font-size:14px;font-weight:600;padding:7px 8px 7px 14px;border-radius:999px;border:2px solid var(--mural);box-shadow:0 0 18px color-mix(in srgb,var(--mural) 40%,transparent)}
#placebanner[hidden]{display:none}
#placebanner em{font-style:normal;font-weight:400;font-size:13px;color:var(--mural)}
#placebanner button{all:unset;cursor:pointer;font-size:13px;font-weight:700;color:var(--night);background:var(--mural);padding:6px 12px;border-radius:999px}
.placebtn[aria-pressed=true]{background:var(--mural);color:var(--night);border-color:var(--mural)}
#map.placing .pinwrap,#map.placing .facwrap{cursor:grab}
#map.placing{cursor:crosshair}
.chip.placebtn{margin-left:0} /* sits right next to Edit */
/* card: address line under the title (template) */
#sheet p.addrline{display:flex;align-items:center;gap:5px;margin:2px 0 4px;font-size:13px;color:var(--p-a9a3cc)}
#sheet p.addrline svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round}
/* editor tabs (template stage 4) */
.etabs{max-width:1200px;margin:12px auto 0;display:flex;gap:6px}
.etabs button{font-family:inherit;font-weight:700;font-size:14px;color:var(--p-c9c4e6);background:transparent;border:2px solid var(--p-4a4280);border-radius:999px;padding:7px 16px;cursor:pointer}
.etabs button[aria-pressed=true]{background:var(--proj);border-color:var(--proj);color:var(--night)}
#editor.notpins .edtools input,#editor.notpins .edtools button:not(#edsignout){display:none}
#ed2.wide{grid-template-columns:1fr}
#ed2 .hint{font-size:13px;color:var(--p-a9a3cc);margin:0 0 10px;font-weight:400}
#ed2 label small{font-weight:400;color:var(--p-8f8aa8);margin-left:4px}
#ed2 .ecat{display:grid;grid-template-columns:44px 1.2fr 1.2fr .9fr .9fr auto;gap:8px 10px;align-items:end;background:var(--p-1a1536);border-radius:10px;padding:10px;margin-bottom:8px}
#ed2 .ecat label{margin:0}
#ed2 .ecat input[type=color]{width:44px;height:40px;padding:2px;border-radius:8px;cursor:pointer}
#ed2 .ecat .cbtns{grid-column:1/-1;margin:0}
#ed2 label.chk{flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--ink);margin:0 0 4px}
#ed2 label.chk input{width:auto}
#ed2 .iconrow{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:13px}
#ed2 .iconrow img{width:48px;height:48px;border-radius:10px;background:var(--p-2a2350)}
/* Event tab and pin open hours */
#ed2 .evdays{display:grid;gap:6px;margin:0 0 8px}
#ed2 .evday{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
#ed2 .evday b{min-width:120px;padding-bottom:8px;font-size:14px}
#ed2 .evday label{margin:0}
#ed2 .ebtn small{display:block;font-weight:400;opacity:.75;margin-top:2px}
#ed2 [data-act=preset]{text-align:left;margin:0 8px 8px 0}
#ed2 .hday{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:8px}
#ed2 .wicons{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
#ed2 .wicons .ebtn{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:64px;--c:var(--p-a77bff)}
#ed2 .wicons .ebtn[aria-pressed=true]{border-color:var(--p-a77bff);background:var(--p-3a2f70)}
#ed2 .wicons svg{width:26px;height:26px}
#ed2 .wicons .lid{fill:none;stroke:var(--c);stroke-width:1.9;stroke-linejoin:round}
#ed2 .wicons .iris{fill:none;stroke:var(--c);stroke-width:1.9}
#ed2 .wicons .pupil{fill:var(--c)}
#ed2 .wicons span{font-size:11px;font-weight:600}
#ed2 .themerow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
#ed2 .themerow input[type=color]{width:44px;height:36px;padding:2px;border:2px solid var(--p-4a4280);border-radius:8px;background:var(--p-1a1536);cursor:pointer}
#ed2 .themerow input[type=text]{width:96px;font-family:inherit;font-size:15px;color:var(--ink);background:var(--p-1a1536);border:2px solid var(--p-4a4280);border-radius:8px;padding:6px 8px}
#ed2 .themerow .swatch{width:28px;height:28px;border-radius:50%;background:var(--c);border:2px solid var(--p-0d0a1f);box-shadow:0 0 0 2px transparent;cursor:pointer;padding:0}
#ed2 .themerow .swatch[aria-pressed=true]{box-shadow:0 0 0 2px #fff}
#ed2 .askdel{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:end;background:#2a1530;border:1px solid #ff4fa3;border-radius:8px;padding:10px;font-size:13px}
#ed2 .askdel label{min-width:200px}
#ed2 .warn{border-color:#ff4fa3!important;color:#ff8cc4!important}
#ed2 .askdel button,#ed2 .ebtn{font-family:inherit;font-weight:600;font-size:13px;color:var(--ink);background:var(--p-2a2350);border:2px solid var(--p-4a4280);border-radius:8px;padding:6px 10px;cursor:pointer}
@media (max-width:820px){#ed2 .ecat{grid-template-columns:44px 1fr}}
#edver{margin-left:auto;font-size:12px;color:var(--p-8f8aa8);font-variant-numeric:tabular-nums}
#edbuilds{flex:none;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;border:2px solid var(--p-a77bff);border-radius:999px;padding:6px 11px}
/* Data tab (template stage 5) */
#ed2 .impbox{background:var(--p-1a1536);border:1px solid var(--p-4a4280);border-radius:10px;padding:12px;margin-top:10px;font-size:14px}
#ed2 .impbox p{margin:0 0 6px}
#ed2 .implist{margin:4px 0 8px;padding-left:18px;font-size:14px}
#ed2 .impbox details{margin:6px 0;font-size:13px}
#ed2 .impbox h5{margin:8px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--p-c9c4e6)}
#ed2 .impbox ul ul,#ed2 .impbox details ul{margin:0;padding-left:18px}
#ed2 .impbox small{color:var(--p-a9a3cc)}
#ed2 .impbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
#ed2 .impprog{font-size:13px;color:var(--mural);margin-top:6px}
#ed2 ul.bk{list-style:none;padding:0;margin:6px 0;max-height:320px;overflow-y:auto}
#ed2 ul.bk li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:8px;font-size:13px}
#ed2 ul.bk li:nth-child(odd){background:var(--p-1a1536)}
/* Import tab guide (template) */
#ed2 ol.steps{margin:0 0 10px;padding-left:20px;font-size:14px;line-height:1.45}
#ed2 ol.steps li{margin:0 0 6px}
#ed2 label.impurl{margin:10px 0 8px}
#ed2 textarea.aiprompt,#ed2 textarea[data-imp]{width:100%;box-sizing:border-box;font-family:ui-monospace,Consolas,monospace;font-size:12px}
#ed2 table.fmt{border-collapse:collapse;width:100%;font-size:13px;margin:4px 0 8px}
#ed2 table.fmt th,#ed2 table.fmt td{text-align:left;vertical-align:top;padding:5px 8px;border-bottom:1px solid #ffffff14}
#ed2 table.fmt th{color:var(--p-c9c4e6);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
#ed2 table.fmt td:first-child{white-space:nowrap}
#ed2 table.fmt code{color:var(--mural)}
#ed2 details>summary{cursor:pointer;font-size:13px;color:var(--p-c9c4e6);margin:6px 0}
#ed2 .impwarn{background:#3a2a10;border:1px solid #8a6520;border-radius:8px;padding:8px 10px;margin:8px 0;font-size:13px}
#ed2 .impwarn ul{margin:4px 0 0;padding-left:18px;max-height:220px;overflow-y:auto}
#ed2 ol.steps.choices{list-style:upper-alpha}
#ed2 .impopts{margin:8px 0;font-size:13px}#ed2 .impopts b{display:block;margin-bottom:4px}
/* Schedules with real times (template) */
.pin .live{display:none;position:absolute;top:-8px;left:-8px;z-index:3;padding:1px 6px;border-radius:9px;background:#ff3d6e;color:#fff;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 0 10px #ff3d6e;pointer-events:none;animation:livepulse 1.6s ease-in-out infinite}
.pinwrap.live .pin .live{display:block}
#map.circles .pinwrap.live:not(.sel) .pin .live{top:-6px;left:-6px;padding:0;width:9px;height:9px;font-size:0}
@keyframes livepulse{50%{box-shadow:0 0 2px #ff3d6e}}
@media (prefers-reduced-motion:reduce){.pin .live{animation:none}}
#sheet .nownext{margin:2px 0 8px;font-size:14px}
#sheet .nownext b{display:inline-block;margin-right:4px;padding:1px 8px;border-radius:9px;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
#sheet .nownext.live b{background:#ff3d6e;color:#fff}
#sheet .nownext small{opacity:.7}
#sheet .openline{margin:2px 0 4px;font-size:14px}
#sheet .openline b{display:inline-block;margin-right:4px;padding:1px 8px;border-radius:9px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
#sheet .openline.open b{background:rgba(91,227,161,.18);color:#5be3a1}
#sheet .openline.closed b{background:var(--p-4a4560);color:var(--p-f4f2ff)}
#sheet .hoursline{margin:0 0 8px;font-size:13px;color:var(--p-c9c4e6);display:flex;flex-wrap:wrap;gap:4px 12px}
#sheet .hoursline b{font-weight:600;color:var(--ink)}
#sheet .sched.timed dt{display:flex;align-items:center;gap:6px}
#sheet .sched .cal{all:unset;cursor:pointer;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);color:var(--c)}
#sheet .sched .cal svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
#sheet .sched .past{opacity:.4}
#sheet .sched dt.now{color:#ff3d6e;opacity:1;font-weight:800}
#calpop{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:3000;width:min(360px,calc(100vw - 32px));box-sizing:border-box;padding:14px;border-radius:16px;background:var(--p-14102a);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);box-shadow:0 10px 40px #000a;color:var(--ink);font-size:14px}
#calpop p{margin:0 0 10px;line-height:1.35}
#calpop p b{display:block;color:var(--c);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
#calpop a,#calpop .x{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;margin-top:6px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--c) 18%,var(--p-14102a));font-weight:700;text-align:center}
#calpop a small{display:block;font-weight:400;font-size:12px;opacity:.75}
#calpop .x{background:none;opacity:.7;font-weight:600}
/* Schedule editor (template) */
#ed2 .esched{padding:10px;margin:0 0 8px;border-radius:10px;background:var(--p-1a1536)}
#ed2 .esched label{margin-bottom:6px}
#ed2 .row4{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:8px;align-items:end}
#ed2 .row4 label{margin:0}
#ed2 .schbtns{display:flex;gap:6px;padding-bottom:2px}
#ed2 .repdays{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 8px}
#ed2 .repdays label.chk{margin:0}
#ed2 details.schrep{margin-top:8px;padding:8px 10px;border:1px dashed var(--p-4a4280);border-radius:10px}
@media (max-width:620px){#ed2 .row4{grid-template-columns:1fr 1fr}#ed2 .row4 label:first-child{grid-column:1/-1}#ed2 .schbtns{grid-column:1/-1}}
/* Route builder (template; js/route-builder.js) */
#ed2 .rbcats{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:8px 0;font-size:13px}
#ed2 .rbcats b{font-size:12px;color:var(--p-a9a3cc);margin-right:4px}
#ed2 .rbcats label.chk{margin:0}
#ed2 .rbprog{font-size:13px;color:var(--mural);min-height:1em;margin:6px 0}
#ed2 .rbstale{font-size:13px;background:#3a2a10;border:1px solid #8a6520;border-radius:8px;padding:6px 10px}
#ed2 table.rbtable{border-collapse:collapse;width:100%;font-size:13px;margin:6px 0}
#ed2 table.rbtable th,#ed2 table.rbtable td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid #ffffff14}
#ed2 table.rbtable th{white-space:nowrap;color:var(--p-c9c4e6)}
#ed2 table.rbtable td span{display:block}
#ed2 table.rbtable td span b{color:var(--c)}
#ed2 table.rbtable td small{display:block;color:var(--p-a9a3cc)}
#map.rbview .pinwrap,#map.rbview .facwrap{opacity:.28}
.rbnum{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c);color:var(--p-0d0a1f);font-style:normal;font-size:10px;font-weight:800;border:2px solid var(--p-0d0a1f);box-shadow:0 0 8px var(--c)}
.rbnum.first{width:26px;height:26px;margin:-2px;font-size:13px;background:#fff;color:var(--c);border-color:var(--c)}
#rbbanner{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 62px);transform:translateX(-50%);z-index:1150;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;background:var(--panel);backdrop-filter:blur(10px);color:var(--ink);font-size:14px;padding:8px 10px 8px 14px;border-radius:18px;border:2px solid var(--mural);box-shadow:0 0 18px color-mix(in srgb,var(--mural) 40%,transparent)}
#rbbanner[hidden]{display:none}
#rbbanner em{font-style:normal;font-size:13px}
#rbbanner .seg{display:flex;gap:4px}
#rbbanner .seg button,#rbbanner .done{all:unset;cursor:pointer;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--p-4a4280)}
#rbbanner .seg button[aria-pressed=true]{background:var(--ink);color:var(--night)}
#rbbanner .done{background:var(--mural);color:var(--night);border-color:var(--mural)}
/* Walk it panel (template; js/walk-it.js) */
#walk svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#walk[aria-pressed=true]{background:var(--mural);color:var(--night)}
#walkp{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);transform:translateX(-50%);z-index:1100;width:min(440px,calc(100vw - 24px));box-sizing:border-box;max-height:62vh;overflow-y:auto;background:var(--panel);backdrop-filter:blur(10px);color:var(--ink);border:2px solid var(--mural);border-radius:18px;padding:10px 12px;box-shadow:0 0 18px color-mix(in srgb,var(--mural) 35%,transparent)}
#walkp[hidden]{display:none}
#walkp .wtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#walkp .wtop b{font-size:15px}
/* Route info button (bottom left, only while a route is started; ringed in the route's color) and its panel header */
#rinfo{position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:1000;width:44px;height:44px;border-radius:50%;border:2px solid var(--rc,var(--p-c9c4e6));background:var(--panel);backdrop-filter:blur(10px);color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 2px 10px #0008;touch-action:manipulation}
#rinfo[hidden]{display:none}
#rinfo svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#rinfo:focus-visible{outline:3px solid #fff;outline-offset:2px}
#walkp .rdot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
#walkp.info .wtop{flex-wrap:nowrap;align-items:flex-start}
#walkp.info .wtop b{flex:1;min-width:0;line-height:1.25}
#walkp.info .rdot{margin-top:4px}
#walkp .ishut{margin-left:auto;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--p-3a3363);color:var(--ink);font-size:22px;line-height:1;font-family:inherit;cursor:pointer;display:grid;place-items:center}
#walkp .seg{display:flex;gap:4px;flex:1}
#walkp .seg button,#walkp .go{all:unset;cursor:pointer;font-size:12px;font-weight:700;padding:5px 9px;border-radius:999px;border:1px solid var(--p-4a4280)}
#walkp .seg button[aria-pressed=true]{background:var(--ink);color:var(--night)}
#walkp .x{all:unset;cursor:pointer;font-size:22px;line-height:1;padding:0 4px;opacity:.8}
#walkp ul{list-style:none;margin:8px 0 4px;padding:0}
#walkp li{display:flex;align-items:center;gap:6px;margin:4px 0}
#walkp li>button[data-n]{all:unset;cursor:pointer;flex:1;display:flex;gap:9px;align-items:flex-start;padding:7px 9px;border-radius:12px;font-size:13px;border:1px solid transparent}
#walkp li>button[aria-pressed=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
#walkp li i{flex:none;width:12px;height:12px;margin-top:3px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
#walkp li b{color:var(--c)}
#walkp li small{display:block;opacity:.75;margin-top:2px}
#walkp .go{background:var(--c);color:var(--night);border-color:var(--c)}
#walkp .wnote{margin:4px 2px 0;font-size:12px;opacity:.65}
.wnum{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--c);color:var(--p-0d0a1f);font-style:normal;font-size:9px;font-weight:800;border:2px solid var(--p-0d0a1f)}
.wnumwrap{cursor:pointer}
.wnum.first{width:22px;height:22px;margin:-2px;font-size:12px;background:#fff;color:var(--c);border-color:var(--c)}
.wnum.seen{opacity:.45}
.wnum.next{outline:3px solid #fff;outline-offset:2px;animation:livepulse 1.4s ease-in-out infinite}
#walkp .seg button{white-space:nowrap;padding:5px 7px}
#walkp .seg{flex-wrap:wrap}
#map.walkview .pinwrap,#map.walkview .facwrap,#map.rbview .pinwrap,#map.rbview .facwrap{visibility:hidden}  /* planning: only the line and numbered dots */
/* Menu tool row (template): under the search field, above the list */
/* categories in the menu (Josh 2026-10-16): wrap freely; "Show all" only while some are off; badge on the menu button */
#layers{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border-bottom:1px solid #ffffff14;flex:none}
/* phones, while typing a search: categories and tools fold up (quick, height only) so the results get the room */
#layers,#toolrow{max-height:520px;transition:max-height .2s ease,padding .2s ease,opacity .15s ease,visibility 0s}
@media (max-width:600px){#search.searching #layers,#search.searching #toolrow{max-height:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden;border-bottom-width:0;pointer-events:none;
  visibility:hidden;transition:max-height .2s ease,padding .2s ease,opacity .15s ease,visibility 0s linear .2s}}
/* iPhone did not clip the folded rows (they showed between results): once folded they are hidden outright (visibility,
   after the 0.2 s fold), and the list sits above them */
#fres{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){#layers,#toolrow{transition:none}}
#layers[hidden]{display:none}
#layers .allbtn{--c:var(--p-c9c4e6);border-style:solid}
#layers:not(.some) .allbtn{display:none}
#find{position:relative}
#find .fbadge{position:absolute;top:-5px;right:-7px;min-width:20px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:var(--proj);color:var(--night);font-size:10px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 1px 4px #0008;pointer-events:none}
#find .fbadge[hidden]{display:none}
/* tools: an even grid that wraps onto more rows (Josh 2026-10-17: six tools ran off a phone screen) */
#toolrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px 4px;padding:10px 10px 12px;border-bottom:1px solid #ffffff14}
#toolrow .tool{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--p-c9c4e6);min-width:0;text-align:center;white-space:nowrap}
#toolrow .tool>button{width:46px;height:46px;border-radius:50%}
#toolrow #walk{all:unset;box-sizing:border-box;cursor:pointer;width:46px;height:46px;border-radius:50%;border:2px solid var(--p-c9c4e6);color:var(--p-c9c4e6);display:grid;place-items:center}
#toolrow #walk svg{width:22px;height:22px}
#toolrow #clearroute{all:unset;box-sizing:border-box;cursor:pointer;width:46px;height:46px;border-radius:50%;border:2px solid #ff8fab;color:#ff8fab;display:grid;place-items:center}
#toolrow #clearroute svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#toolrow .tool[hidden]{display:none}
#find svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
#walkp .wbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
/* fixed top (tabs, Day / Start / Stay, Plan) and bottom (buttons); only the middle scrolls (Josh) */
#walkp .whead{position:sticky;top:-10px;z-index:2;margin:-10px -12px 0;padding:10px 12px 6px;background:var(--p-17123a);border-bottom:1px solid rgba(255,255,255,.1);border-radius:16px 16px 0 0}
/* the buttons stay in view at the bottom of the panel however long the list (Josh: no way to confirm a trip) */
#walkp .wbtns{position:sticky;bottom:-10px;z-index:2;margin:8px -12px -10px;padding:10px 12px;background:var(--p-17123a);border-top:1px solid rgba(255,255,255,.1)}
#walkp .wbtns button{all:unset;cursor:pointer;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid var(--p-4a4280)}
#walkp .wbtns .start{background:var(--mural);color:var(--night);border-color:var(--mural)}
#walkp .wbtns .clear{margin-right:auto}
#walkp .wplan{display:flex;align-items:center;gap:10px;margin:8px 0 2px}
#walkp .wplan .build{all:unset;cursor:pointer;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;background:var(--light);color:var(--night)}
#walkp .wplan .build[disabled]{opacity:.4;cursor:default}
#walkp .wplan .wprog{margin:0}
.wring{display:block;width:26px;height:26px;margin:2px;border-radius:50%;border:2px solid var(--c,var(--p-d9d4f6));opacity:.6;box-sizing:border-box}
#toolrow{flex:none}
/* New pin form (template, Place pins) */
#newpin{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);z-index:1200;width:min(380px,calc(100vw - 24px));box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:16px;background:var(--panel);backdrop-filter:blur(10px);border:2px solid var(--mural);color:var(--ink);font-size:13px;box-shadow:0 0 18px color-mix(in srgb,var(--mural) 35%,transparent)}
#newpin[hidden]{display:none}
#newpin b{color:var(--mural);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
#newpin label{display:flex;flex-direction:column;gap:3px;font-weight:600;color:var(--p-c9c4e6);font-size:12px}
#newpin input,#newpin select{font-family:inherit;font-size:15px;color:var(--ink);background:var(--p-1a1536);border:2px solid var(--p-4a4280);border-radius:8px;padding:7px 9px}
#newpin .nbtns{display:flex;flex-wrap:wrap;gap:6px}
#newpin .nbtns button{font-family:inherit;font-weight:700;font-size:13px;color:var(--ink);background:var(--p-2a2350);border:2px solid var(--p-4a4280);border-radius:999px;padding:7px 12px;cursor:pointer}
#newpin .nbtns button[value=edit]{background:var(--mural);color:var(--night);border-color:var(--mural)}
#newpin .nbtns .x{background:none;border-color:transparent;opacity:.75}
#walkp .wlist{margin:8px 2px 0;font-size:13px}
#walkp .wprog{margin:4px 2px 0;font-size:12px;color:var(--mural);min-height:0}
#walkp .wbtns .build{background:var(--light);color:var(--night);border-color:var(--light)}
#walkp .wbtns .build[disabled]{opacity:.4;cursor:default}
/* My plan (stage 2): options row, summary, numbered stops with arrival times, next stop */
#walkp .wopts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 2px;font-size:12px}
#walkp .wopts .seg{flex:none}
#walkp .wopts label{display:flex;align-items:center;gap:5px;font-weight:600}
#walkp .wopts select,#walkp .wopts input{font-family:inherit;font-size:13px;color:var(--ink);background:var(--p-1b1640);border:1px solid var(--p-4a4280);border-radius:8px;padding:3px 6px}
#walkp .wopts .hint{opacity:.6}
#walkp .wsum{margin:10px 2px 4px;font-size:13px}
#walkp .wsum b{color:var(--mural)}
#walkp .wsum small{display:block;opacity:.7;margin-top:2px}
#walkp .wwarn{margin:4px 2px;font-size:12px;color:#ffb3c6}
#walkp ol.wstops{list-style:none;margin:6px 0;padding:0}
#walkp ol.wstops li{margin:2px 0}
#walkp ol.wstops button{all:unset;cursor:pointer;display:flex;gap:8px;align-items:flex-start;width:100%;box-sizing:border-box;padding:5px 7px;border-radius:10px;font-size:13px}
#walkp ol.wstops button:hover{background:rgba(255,255,255,.06)}
#walkp ol.wstops b{flex:none;width:20px;height:20px;border-radius:50%;background:var(--mural);color:var(--night);display:grid;place-items:center;font-size:11px}
#walkp ol.wstops li.seen{opacity:.5}
#walkp ol.wstops li.next b{box-shadow:0 0 0 3px rgba(255,210,63,.35)}
#walkp ol.wstops small{display:block;opacity:.75;margin-top:1px}
#walkp ol.wstops em{font-style:normal;font-weight:700;margin-left:4px}
#walkp ol.wstops em.late{color:#ff8fab}
#walkp ol.wstops em.wait{color:#ffd23f}
#walkp ol.wstops em.far{color:#9fd3ff}
/* glow off (Event tab, Look): flat pins and badges with a small dark shadow; the selected pin gets a white outline
   instead of its pulsing glow */
html.noglow .pin,html.noglow .seen .pin,html.noglow #map.allseen .seen .pin,html.noglow #map.circles .pin,html.noglow #map.circles .grown .pin{box-shadow:0 1px 4px rgba(0,0,0,.65)!important}
html.noglow .sel .pin{animation:none;outline:2px solid #fff;outline-offset:2px}
html.noglow .tether i,html.noglow .sel .tether i,html.noglow .pin .ck,html.noglow .pin .eye,html.noglow .pin .live,html.noglow #sheet .kind i,html.noglow #toast i,html.noglow #walkp li i,html.noglow .opt[aria-pressed=true],html.noglow .offbtn[data-state=on]{box-shadow:none!important}
#walkp ul.wareas{margin-top:6px}  /* one scroll bar: only the panel scrolls (Josh) */
/* rows that do something look like buttons: a card with a › (Josh: nobody knew the trips were tappable) */
#walkp li>button[data-n],#walkp ol.wstops button{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)!important;padding-right:28px!important;box-sizing:border-box}
#walkp li>button[data-n]::after,#walkp ol.wstops button::after{content:'';position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:2px solid var(--ink);border-top:2px solid var(--ink);transform:translateY(-50%) rotate(45deg);opacity:.75;transition:transform .15s}
#walkp li>button[data-n]:hover,#walkp ol.wstops button:hover{background:rgba(255,255,255,.1)}
#walkp li>button[data-n][aria-pressed=true]{border-color:var(--c)!important}
#walkp li>button[aria-expanded=true]::after{transform:translateY(-70%) rotate(135deg)}
#walkp ul.wareas li.open{flex-direction:column;align-items:stretch}
#walkp .wtrip{width:100%;padding:4px 0 6px 18px;box-sizing:border-box}
#walkp .wtrip ol.wstops{margin:4px 0}
#walkp .wtrip ol.wstops b{background:var(--c)}
#walkp em.mine{font-style:normal;font-size:11px;font-weight:700;color:var(--c);margin-left:4px}
#walkp .wtrip .wnext{--c:inherit}
/* places left out of My List (closed that day): a box that cannot be missed (Josh) */
#walkp .wclosed{margin:8px 0;padding:8px 10px;border:1.5px solid #ff5c86;border-radius:12px;background:rgba(255,61,110,.14)}
#walkp .wclosed>b{display:flex;align-items:center;gap:6px;font-size:14px;color:#ffd0dc}
#walkp .wclosed svg,#walkp .wbad svg{width:16px;height:16px;flex:none;fill:none;stroke:#ff8fab;stroke-width:2.6;stroke-linecap:round}
#walkp .wclosed ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
#walkp .wclosed button{all:unset;cursor:pointer;font-size:14px;font-weight:700;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
#walkp .wbad{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:12px;font-weight:800;color:#ff8fab}
#walkp ol.wstops li.shut button{border-color:rgba(255,92,134,.6)!important;background:rgba(255,61,110,.08)}
#walkp ol.wstops li.shut span{text-decoration:line-through;text-decoration-color:rgba(255,143,171,.7)}
#walkp ol.wstops li.shut em{text-decoration:none;display:inline-block}
#walkp .wmodes{flex:none;margin-left:auto}
#walkp .wsub{margin:8px 0 2px}
#walkp ul.wareas li{flex-wrap:wrap}
#walkp .wnext{display:flex;align-items:center;gap:6px;margin:6px 2px 0;font-size:13px;--c:var(--mural)}
#walkp .wnext span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#walkp a.go{text-decoration:none}
/* Menu open/close (template): a mask reveal, no fading or scaling. A full-width mask with the panel's rounded bottom
   corners slides its bottom edge down from the top, revealing everything inside.
   Closing plays it backwards (.closing, see closeFind). The mask is dropped when done, so the shadow shows on the open panel. */
#search:not([hidden]){animation:menumask .46s cubic-bezier(.3,.7,.2,1) backwards}
#search.closing{animation:menumaskout .24s cubic-bezier(.5,0,.8,.4) forwards}  /* its own name: re-using menumask (reversed) would not restart */
@keyframes menumaskout{from{clip-path:inset(0 0 0 0 round 0 0 14px 14px)}to{clip-path:inset(0 0 100% 0 round 0 0 14px 14px)}}
@keyframes menumask{  /* full width the whole time: the bottom edge moves down from the top */
  0%{clip-path:inset(0 0 100% 0 round 0 0 14px 14px)}
  100%{clip-path:inset(0 0 0 0 round 0 0 14px 14px)}}
@media (prefers-reduced-motion:reduce){#search:not([hidden]),#search.closing{animation:none}}
#search{overflow:hidden}  /* keeps the list scrollbar inside the rounded bottom corners */
/* phones: the menu fills the screen (Josh 2026-10-17: the space under it was wasted); wide screens keep the dropdown */
@media (max-width:600px){#search{bottom:0;max-height:none;border-bottom:0;border-radius:0;padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgb(var(--p-14102c-rgb));backdrop-filter:none;-webkit-backdrop-filter:none}
  #fres{background:rgb(var(--p-14102c-rgb))}}
/* full screen there is nothing to see through, and iOS kept painting an old copy of the folded rows inside the blurred
   (backdrop-filter) panel, showing between search results: solid and unblurred on phones (Josh 2026-10-17) */
/* the active route's places: stop number in the route's color (in place of the Want icon), a ring in that color; every
   other place steps back (walk-it routeMarks, Josh 2026-10-16) */
.pin .rnum{display:none;position:absolute;left:50%;top:50%;z-index:2;width:clamp(18px,calc(var(--sz)*.52),42px);height:clamp(18px,calc(var(--sz)*.52),42px);transform:translate(-50%,-50%);border-radius:50%;background:var(--rc);color:var(--p-0d0a1f);border:2px solid var(--p-0d0a1f);box-shadow:0 0 10px var(--rc);font-style:normal;font-weight:800;font-size:clamp(11px,calc(var(--sz)*.28),22px);line-height:1;place-items:center}
.onroute .pin .rnum{display:grid}
.onroute .pin .eye{display:none!important}
.onroute .pin{box-shadow:0 0 0 3px var(--rc),0 0 16px var(--rc)}
/* a started route hides everything that is not on it (Josh 2026-10-17: in a route you are no longer discovering); a pin
   picked from search still shows while selected */
#map.routeon:not(.listview) .pinwrap:not(.onroute):not(.sel),#map.routeon:not(.listview) .facwrap{display:none}
#map.listview .rnum{display:none}
#map.circles .onroute:not(.sel) .pin .rnum{width:clamp(14px,calc(var(--sz)*.8),26px);height:clamp(14px,calc(var(--sz)*.8),26px);font-size:clamp(9px,calc(var(--sz)*.45),14px);border-width:1.5px}
html.noglow .onroute .pin{box-shadow:0 0 0 3px var(--rc),0 1px 4px rgba(0,0,0,.65)!important}
html.noglow .pin .rnum{box-shadow:none}
/* Admin, Routes tab: which route kinds visitors get */
#ed2 .rbsum{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:var(--p-1b1640);border:1px solid var(--p-4a4280);font-size:13px;line-height:1.6}
#ed2 .rbstat{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;text-transform:none;letter-spacing:0;vertical-align:2px}
#ed2 .rbstat.on{background:rgba(91,227,161,.18);color:#5be3a1}
#ed2 .rbstat.built{background:rgba(255,210,63,.16);color:#ffd23f}
#ed2 .rbstat.off{background:rgba(255,255,255,.08);color:var(--p-a9a3cc)}