/* ============================================================
   ToastBikes — The Spot Map (REAL MapLibre app)
   Zine UI lifted VERBATIM from the winning concept-a prototype.
   Only the basemap machinery is swapped: the fake pannable SVG canvas
   becomes a real MapLibre GL canvas; pins become MapLibre markers.
   Class names, chrome, sheet, filters, leaderboard, submit UI: unchanged.
============================================================ */
:root{
  --paper:#F5F0E4;--panel:#EDE6D3;--ink:#1A1713;--body:#443f36;--muted:#6d675c;
  --red:#D22C26;--amber:#E8B84B;--sodium:#FFC66E;--ok:#2f9e44;
  /* toast scale 0-5: 0 burnt(charcoal) · 1 raw(pale) ... 5 golden slice */
  --t0:#33210f;--t1:#f4e5c2;--t2:#eecb8a;--t3:#e3ac52;--t4:#cf8f38;--t5:#f2b325;
  --sheet-h:56vh;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  overflow:hidden;                 /* map-first: the map is the page, nothing scrolls behind it */
  -webkit-text-size-adjust:100%;
}
img{display:block;max-width:100%}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.scrawl{font-family:'Permanent Marker','Marker Felt','Comic Sans MS',cursive;color:var(--red)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   APP SHELL — full-bleed map fills the viewport
============================================================ */
#app{position:fixed;inset:0;overflow:hidden}
.mapstage{position:absolute;inset:0;overflow:hidden;background:#E4DEC9}
.mapstage:focus-visible{outline:none}

/* the real MapLibre canvas host */
#map{position:absolute;inset:0}
#map .maplibregl-canvas{outline:none}
/* We render our own zine attribution; hide MapLibre's default control containers. */
.maplibregl-control-container{display:none!important}
/* keep MapLibre popups from ever showing their default chrome (we use the sheet) */
.maplibregl-popup{display:none!important}

/* first-paint fallback: a paper wash + faint contour texture so a slow/absent
   basemap is never a blank white screen (graceful degradation) */
.mapfallback{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(26,23,19,.05), transparent 60%),
    repeating-linear-gradient(0deg, rgba(26,23,19,.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(26,23,19,.035) 0 1px, transparent 1px 46px),
    var(--paper);
  transition:opacity .6s ease}
.mapstage.tiles-ready .mapfallback{opacity:0}
.mapfallback .fb-note{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  font-family:'Permanent Marker',cursive;color:var(--muted);font-size:15px;text-align:center;
  opacity:.8;line-height:1.4;max-width:74vw}
.mapstage.tiles-ready .mapfallback .fb-note{display:none}

/* grain overlay that sits over the map (the site's radial-dot paper) */
.grain{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(26,23,19,.05) 1px,transparent 1px);background-size:5px 5px;z-index:2}
.mapstage[data-layer="satellite"] .grain{background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px)}

/* ============================================================
   PINS — riding spot vs parking (site pin anatomy, now inside MapLibre markers)
   MapLibre positions the .tb-marker wrapper; .pin keeps the visual anatomy.
============================================================ */
.tb-marker{cursor:pointer;-webkit-tap-highlight-color:transparent;will-change:transform}
.pin{position:relative;cursor:pointer;z-index:10;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.pin:active{transform:scale(.94)}
.pin svg{overflow:visible;display:block}
.pin .halo{fill:none;stroke:var(--red);stroke-width:2;stroke-dasharray:4 5;opacity:0;transition:opacity .12s}
.pin.sel .halo,.pin:hover .halo{opacity:.85}
.pin .shadow{fill:rgba(26,23,19,.85)}
.pin .stem{fill:var(--ink)}
.pin .head{fill:var(--red);stroke:var(--ink);stroke-width:2;transition:fill .12s}
.pin .glyph{fill:#fff;font:700 13px 'Space Grotesk',system-ui,sans-serif;text-anchor:middle}
.pin.sel .head{fill:var(--amber)}
.pin.sel .glyph{fill:var(--ink)}
/* parking = amber diamond head w/ P */
.pin.parking .head{fill:var(--amber);stroke:var(--ink)}
.pin.parking .glyph{fill:var(--ink)}
.pin.parking.sel .head{fill:var(--red)}
.pin.parking.sel .glyph{fill:#fff}
/* satellite restyle: brighter heads + ink outline for contrast on dark */
.mapstage[data-layer="satellite"] .pin .head{stroke:#0d0d0a;stroke-width:2.4}
.mapstage[data-layer="satellite"] .pin .glyph{fill:#fff}
.mapstage[data-layer="satellite"] .pin.parking .glyph{fill:#0d0d0a}
.pin.dimmed{opacity:.28;filter:saturate(.4)}
.tb-marker.dimmed{z-index:4}
.tb-marker.sel{z-index:11}
.pin .toasttag{position:absolute;top:-6px;right:-8px;font-size:12px;transform:rotate(8deg)}

/* the "you are here" me-dot for near-me (a MapLibre marker) */
.mepin{pointer-events:none}
.mepin .ring{width:26px;height:26px;border-radius:50%;border:3px solid var(--red);background:rgba(210,44,38,.18);box-shadow:0 0 0 6px rgba(210,44,38,.1)}
.mapstage[data-layer="satellite"] .mepin .ring{border-color:var(--sodium);background:rgba(255,198,110,.2);box-shadow:0 0 0 6px rgba(255,198,110,.12)}

/* ============================================================
   TOP BAR — floating search + filter pill (the ONLY persistent chrome)
============================================================ */
.topbar{position:absolute;top:0;left:0;right:0;z-index:40;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 12px 0;
  display:flex;gap:10px;align-items:flex-start;pointer-events:none}
.topbar>*{pointer-events:auto}

.searchpill{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:52px;padding:0 8px 0 14px;
  background:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);position:relative}
.searchpill .brandtab{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.searchpill .logo{background:var(--red);color:#fff;font-weight:700;font-size:12px;padding:3px 7px;border:2px solid var(--ink)}
.searchpill input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:600 15px 'Space Grotesk',system-ui,sans-serif;color:var(--ink)}
.searchpill input::placeholder{color:var(--muted);font-weight:600}
.searchpill .go{flex:0 0 auto;width:38px;height:38px;border:2px solid var(--ink);background:var(--panel);
  display:grid;place-items:center;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.searchpill .go:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.searchpill .go svg{width:18px;height:18px}
@media(max-width:520px){.searchpill .brandtab .logo{display:none}}

.filterbtn{flex:0 0 auto;height:52px;padding:0 15px;display:flex;align-items:center;gap:9px;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--red);
  cursor:pointer;font-weight:700;font-size:14px;position:relative}
.filterbtn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--red)}
.filterbtn svg{width:19px;height:19px}
.filterbtn .flabel{white-space:nowrap}
@media(max-width:460px){.filterbtn .flabel{display:none}.filterbtn{padding:0 13px}}
.filterbtn .fcount{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;
  background:var(--red);color:#fff;border:2px solid var(--ink);font-size:12px;font-weight:700;
  display:none;align-items:center;justify-content:center}
.filterbtn.has-filters .fcount{display:flex}

/* thin honest attribution + result strip under the bar */
.substrip{position:absolute;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 72px);z-index:35;
  display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}
.resultchip{pointer-events:auto;background:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  font-size:11.5px;font-weight:700;padding:4px 9px;display:inline-flex;align-items:center;gap:6px;max-width:70%}
.resultchip .scrawl{font-size:11px}
.resultchip .clr{color:var(--red);cursor:pointer;text-decoration:underline;font-weight:700}

/* ============================================================
   RIGHT-EDGE CONTROL STACK (signed-in toggle lives here on desktop)
============================================================ */
.rail{position:absolute;top:calc(env(safe-area-inset-top,0px) + 76px);right:12px;z-index:38;
  display:flex;flex-direction:column;gap:13px;align-items:flex-end;pointer-events:none}
.rail>*{pointer-events:auto}
/* dark matte hugging EACH control (owner refinement 2026-07-08: not one big
   slab — just a snug dark pad behind the bell, envelope and sign-in pill).
   !important because the bell/envelope carry inline JS styles. */
.rail>button{box-shadow:2px 2px 0 var(--ink), 0 0 0 6px rgba(26,23,19,.85) !important}
/* the fixed shared burger floats just above the rail — give it the same dark
   treatment ON THE MAP ONLY by flipping tb-nav's own colour tokens.
   (html prefix outranks tb-nav.css's #tbSiteNav rule, which loads after us.) */
html #tbSiteNav{--tbn-paper:#241f19;--tbn-ink:#F5F0E4;--tbn-panel:#2c261f;--tbn-red:#ff6b64}
/* stand the burger down while a sheet is open — its fixed chip sat over the
   sheet's close button on mobile (class toggled by openSheet/closeSheet) */
html.tb-sheet-open #tbSiteNav{display:none !important}
.authtoggle{background:#fff;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  font-size:11px;font-weight:700;padding:6px 9px;display:flex;align-items:center;gap:7px;cursor:pointer;max-width:190px}
.authtoggle .dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:0 0 auto;border:1.5px solid var(--ink)}
.authtoggle.soon .dot{background:var(--amber)}
.authtoggle .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* account pill relocated under the result banner, left-aligned (owner ask 2026-07-10) */
.authbar{position:absolute;left:12px;top:calc(env(safe-area-inset-top,0px) + 110px);z-index:37;pointer-events:none}
.authbar>*{pointer-events:auto}
.authbar .authtoggle{max-width:min(72vw,300px)}

/* ============================================================
   BOTTOM CONTROLS — layer switcher + FABs (thumb zone, never covers pins up top)
============================================================ */
.bottomdock{position:absolute;left:0;right:0;bottom:0;z-index:40;
  padding:0 12px calc(env(safe-area-inset-bottom,0px) + 14px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;pointer-events:none}
.bottomdock>*{pointer-events:auto}

/* left cluster: NEAR ME + zoom */
.leftctrls{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.zoomcol{display:flex;flex-direction:column;background:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.zoomcol button{width:44px;height:44px;border:0;background:transparent;font-size:22px;font-weight:700;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.zoomcol button:first-child{border-bottom:2px solid var(--ink)}
.zoomcol button:active{background:var(--panel)}
.nearbtn{width:52px;height:52px;border:2px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;display:grid;place-items:center;position:relative}
.nearbtn.locating{background:var(--sodium)}
.nearbtn.active{background:var(--amber)}
.nearbtn svg{width:24px;height:24px}
.nearbtn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}

/* centre: SUBMIT FAB (primary) */
.submitfab{height:56px;padding:0 20px;border:2px solid var(--ink);background:var(--red);color:#fff;
  box-shadow:4px 4px 0 var(--ink);cursor:pointer;font-weight:700;font-size:15px;display:flex;align-items:center;gap:9px;
  align-self:flex-end}
.submitfab:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.submitfab svg{width:20px;height:20px}
@media(max-width:400px){.submitfab .slabel{display:none}.submitfab{padding:0 17px}}

/* right cluster: layer switcher segmented control + leaderboard */
.rightctrls{display:flex;flex-direction:column;gap:8px;align-items:flex-end}

.layerswitch{display:flex;background:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);position:relative}
.layerswitch button{width:56px;height:56px;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative;
  border-right:2px solid var(--ink);-webkit-tap-highlight-color:transparent}
.layerswitch button:last-child{border-right:0}
.layerswitch button .li{width:22px;height:22px}
.layerswitch button .lt{font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.layerswitch button[aria-pressed="true"]{background:var(--amber)}
.layerswitch button[aria-pressed="true"] .lt{color:var(--ink)}
.layerswitch button.confirm{background:var(--sodium)}
.layerswitch button.loading{background:var(--sodium)}
/* tiny "loads Esri" note tag that only shows on the satellite chip */
.satnote{position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);
  background:var(--ink);color:var(--paper);font-size:8px;font-weight:700;letter-spacing:.03em;
  padding:2px 5px;white-space:nowrap;border:1.5px solid var(--ink);opacity:0;transition:opacity .2s;pointer-events:none}
.layerswitch button.satbtn .satnote.show{opacity:1}

.miscbtn{width:52px;height:52px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.miscbtn svg{width:22px;height:22px}
.miscbtn .mt{font-size:8px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.03em}
.miscbtn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}

/* honest attribution — always visible on every layer */
.attribution{font-size:9px;font-weight:700;color:var(--muted);background:var(--paper);border:2px solid var(--ink);
  padding:2px 6px;letter-spacing:.02em;box-shadow:2px 2px 0 var(--ink);text-align:right;line-height:1.2;max-width:210px}
.attribution a{color:var(--muted);text-decoration:underline}
.attribution b{color:var(--ink)}

/* ============================================================
   BOTTOM SHEET — the whole UI lives here (mobile) / becomes side rail (desktop)
============================================================ */
.scrim{position:absolute;inset:0;z-index:50;background:rgba(20,16,12,.42);opacity:0;visibility:hidden;
  transition:opacity .3s;backdrop-filter:blur(1px)}
.scrim.show{opacity:1;visibility:visible}

.sheet{position:absolute;left:0;right:0;bottom:0;z-index:60;background:var(--paper);
  border-top:2px solid var(--ink);box-shadow:0 -6px 0 rgba(26,23,19,.12), 0 -2px 20px rgba(26,23,19,.25);
  transform:translateY(102%);transition:transform .38s cubic-bezier(.22,.61,.36,1);
  max-height:90vh;display:flex;flex-direction:column;
  border-top-left-radius:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet.open{transform:translateY(0)}
.sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 20px);opacity:.15}
.grab{flex:0 0 auto;display:flex;justify-content:center;padding:9px 0 4px;cursor:grab;touch-action:none}
.grab span{width:44px;height:5px;border-radius:3px;background:var(--muted);opacity:.55}
.sheet-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 18px 22px}

.sheet-head{position:sticky;top:0;background:var(--paper);z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:6px 0 12px;border-bottom:2px solid var(--ink);margin-bottom:14px}
.sheet-kick{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.sheet-title{font-size:23px;line-height:1.1;letter-spacing:-.02em;margin:3px 0 0;font-weight:700}
.sheet-close{flex:0 0 auto;width:40px;height:40px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);
  cursor:pointer;display:grid;place-items:center;font-weight:700}
.sheet-close svg{width:18px;height:18px}
.sheet-close:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

/* ---------- SPOT DETAIL sheet ---------- */
.sd-vibe{font-family:'Permanent Marker',cursive;color:var(--red);font-size:15px;line-height:1.5;margin:0 0 14px}
.sd-loc{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);margin:-8px 0 14px}
.chiprow{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 4px}
.otype{font-size:12px;font-weight:700;border:2px solid var(--ink);background:#fff;padding:5px 10px;box-shadow:2px 2px 0 var(--ink)}
.otype.parkingchip{background:var(--amber)}

.toastscale{display:flex;align-items:center;gap:8px;margin:14px 0 2px}
.toastscale .slice{width:30px;height:30px;display:block}
.toastreadout{font-size:12.5px;color:var(--muted);font-weight:600;margin:6px 0 0}
.toastreadout b{color:var(--ink)}

.srow{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(26,23,19,.28);font-size:14px;line-height:1.45}
.srow b{flex:0 0 82px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.srow .val{flex:1}
.srow a{color:var(--red);font-weight:700}

.techmeter{display:flex;align-items:center;gap:8px;margin-top:3px}
.techbar{flex:1;height:12px;border:2px solid var(--ink);background:#fff;position:relative;overflow:hidden;max-width:170px}
.techbar i{position:absolute;inset:0 auto 0 0;background:var(--red);display:block}
.techval{font-weight:700;font-size:14px}

.sd-note{font-size:14px;line-height:1.6;color:var(--body);margin:14px 0 0}

.contributor{display:flex;align-items:center;gap:11px;margin:16px 0 0;padding:12px 14px;border:2px solid var(--ink);background:var(--panel);box-shadow:3px 3px 0 var(--ink)}
.contributor .av{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:700;flex:0 0 auto;border:2px solid var(--ink)}
.contributor .cinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.contributor .cname{font-weight:700;font-size:14.5px}
.contributor .cmeta{font-size:12px;color:var(--muted);font-weight:600}
.contributor .cbadges{font-size:14px;letter-spacing:1px}
/* ride alert areas (v28) */
.drawbar{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;background:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:9px 14px;max-width:92vw}
.drawbar .db-t{font-size:12.5px;font-weight:700}
.mapstage.drawing .maplibregl-marker{pointer-events:none}
.mapstage.drawing{cursor:crosshair}
.arearow{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);padding:9px 12px;margin:0 0 8px}
.arearow .an{font-weight:700;font-size:14px;flex:1}
.arearow .am{font-size:11.5px;color:var(--muted);font-weight:600}
/* 360° panoramas (v27) */
.panorow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.panohint{font-size:11.5px;color:var(--muted);font-weight:600}
.panowrap{width:100%;height:min(320px,52vw);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--panel);display:flex;align-items:center;justify-content:center;overflow:hidden}
.panowrap .pnlm-container{width:100%!important;height:100%!important}
/* refined profile card (v26) */
.rankchip{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;background:var(--hl,#F5E9C8);border:1.5px solid var(--ink);padding:1px 7px;margin-left:6px;vertical-align:2px;box-shadow:1.5px 1.5px 0 var(--ink)}
.profhead .profmsg{margin-left:auto;flex:0 0 auto;align-self:center}
.recrow{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;font:inherit;text-align:left;cursor:pointer;background:#fff;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:8px 12px;margin:0 0 8px}
.recrow:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.recrow .rr-n{font-weight:700;font-size:13.5px}
.recrow .rr-m{font-size:11.5px;color:var(--muted);font-weight:600}
.contributor .cname .cnamelink{color:var(--red);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-weight:700}
.contributor .cname .cnamelink:hover{background:var(--red);color:var(--paper);text-decoration:none}
.btn.small.cmsg{margin-top:10px;gap:7px}
.btn.small.cmsg svg{width:15px;height:15px;flex:0 0 auto}

/* reel facade (click-to-load, zero-Meta pre-tap) */
.reelfacade{margin:16px 0 0;border:2px solid var(--ink);background:var(--ink);box-shadow:4px 4px 0 rgba(26,23,19,.85);position:relative;aspect-ratio:16/9;cursor:pointer;overflow:hidden;width:100%;display:block;padding:0}
.reelfacade .rf-bg{position:absolute;inset:0;background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px),
  linear-gradient(150deg,#241f1a,#12100d)}
.reelfacade .rf-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:var(--red);border:2px solid var(--paper);box-shadow:3px 3px 0 rgba(0,0,0,.5);
  display:grid;place-items:center;transition:transform .15s,background .15s}
.reelfacade .rf-play svg{width:24px;height:24px;margin-left:3px;fill:#fff}
.reelfacade:hover .rf-play{transform:translate(-50%,-50%) scale(1.08);background:var(--amber)}
.reelfacade:hover .rf-play svg{fill:var(--ink)}
.reelfacade .rf-tag{position:absolute;left:10px;top:10px;z-index:2;font-family:'Permanent Marker',cursive;color:var(--paper);
  background:rgba(26,23,19,.7);border:2px solid var(--paper);padding:2px 9px;font-size:12px}
.reelfacade .rf-note{position:absolute;left:10px;bottom:10px;z-index:2;font-size:10.5px;font-weight:700;color:var(--sodium);letter-spacing:.03em}
.reelfacade.playing .rf-play,.reelfacade.playing .rf-tag,.reelfacade.playing .rf-note{display:none}
.reelfacade .rf-playing{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--paper);text-align:center;padding:16px}
.reelfacade.playing .rf-playing{display:flex}
.rf-bars{display:flex;gap:4px;align-items:flex-end;height:34px}
.rf-bars i{width:5px;background:var(--sodium);animation:eq 1s ease-in-out infinite}
.rf-bars i:nth-child(2){animation-delay:.15s}.rf-bars i:nth-child(3){animation-delay:.3s}
.rf-bars i:nth-child(4){animation-delay:.45s}.rf-bars i:nth-child(5){animation-delay:.6s}
@keyframes eq{0%,100%{height:10px}50%{height:32px}}

.sd-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.btn{cursor:pointer;font-weight:700;border:2px solid var(--ink);background:#fff;color:var(--ink);padding:11px 16px;
  box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s;font-size:14px;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.red{background:var(--red);color:#fff}
.btn.amber{background:var(--amber)}
.btn.ghost{background:transparent;box-shadow:none;border-style:dashed}
.btn.full{width:100%;justify-content:center}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[disabled]:active{transform:none;box-shadow:3px 3px 0 var(--ink)}
.btn svg{width:17px;height:17px}
.reportlink{margin:14px 0 2px;font-size:12.5px;color:var(--muted)}
.reportlink a{color:var(--red);font-weight:700;text-decoration:underline;cursor:pointer}

.linkedparking{margin:14px 0 0;border:2px dashed var(--ink);background:#fff;padding:11px 13px;display:flex;align-items:center;gap:11px;cursor:pointer}
.linkedparking .pmark{width:34px;height:34px;background:var(--amber);border:2px solid var(--ink);display:grid;place-items:center;font-weight:700;flex:0 0 auto}
.linkedparking .pinfo{flex:1;min-width:0}
.linkedparking .pn{display:block;font-weight:700;font-size:13.5px;line-height:1.25}
.linkedparking .pd{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.3}
.linkedparking .parrow{font-size:18px;color:var(--red)}

/* ---------- FILTER sheet ---------- */
.filtgroup{margin:0 0 20px}
.filtgroup>.gl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.filtgroup>.gl .scrawl{font-size:12px;letter-spacing:0;text-transform:none}
.togglechips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{cursor:pointer;font-weight:700;font-size:13px;border:2px solid var(--ink);background:#fff;color:var(--ink);
  padding:9px 13px;box-shadow:2px 2px 0 var(--ink);transition:transform .1s;-webkit-tap-highlight-color:transparent;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.tchip:active{transform:translate(1px,1px)}
.tchip[aria-pressed="true"]{background:var(--red);color:#fff}
.tchip[aria-pressed="true"].amberon{background:var(--amber);color:var(--ink)}
.tchip .em{font-size:15px}

.segmented{display:flex;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);overflow:hidden}
.segmented button{flex:1;min-height:46px;border:0;border-right:2px solid var(--ink);background:#fff;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink)}
.segmented button:last-child{border-right:0}
.segmented button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* difficulty toast range */
.diffrange{display:flex;gap:7px;align-items:stretch}
.diffbtn{flex:1;min-height:58px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px}
.diffbtn .slice{width:26px;height:26px}
.diffbtn .dn{font-size:10px;font-weight:700;color:var(--muted)}
.diffbtn[aria-pressed="true"]{background:var(--panel)}
.diffbtn[aria-pressed="true"] .dn{color:var(--ink)}
.diffbtn.inrange{background:var(--sodium)}

/* near-me radius */
.radiusrow{display:flex;gap:7px}
.radbtn{flex:1;min-height:48px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);cursor:pointer;font-weight:700;font-size:13px;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.radbtn small{font-size:9px;color:var(--muted);font-weight:600}
.radbtn[aria-pressed="true"]{background:var(--amber)}
.radbtn[aria-pressed="true"] small{color:var(--ink)}

.filter-foot{position:sticky;bottom:0;background:var(--paper);border-top:2px solid var(--ink);
  padding:12px 0 4px;margin-top:6px;display:flex;gap:10px}

/* ---------- INDEX (result list) inside filter sheet ---------- */
.resultlist{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.rescard{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:10px 12px;cursor:pointer;text-align:left}
.rescard:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.rescard .rnum{width:34px;height:34px;flex:0 0 auto;border:2px solid var(--ink);background:var(--red);color:#fff;font-weight:700;display:grid;place-items:center;border-radius:50%}
.rescard.parkingres .rnum{background:var(--amber);color:var(--ink);border-radius:4px}
.rescard .rinfo{flex:1;min-width:0}
.rescard .rname{font-weight:700;font-size:14px;line-height:1.2}
.rescard .rmeta{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.rescard .rtoast{font-size:14px;letter-spacing:1px;flex:0 0 auto}

.emptystate{text-align:center;padding:34px 16px;border:2px dashed var(--ink);background:var(--panel);margin-top:8px}
.emptystate .es-scrawl{font-family:'Permanent Marker',cursive;color:var(--red);font-size:19px;margin:0 0 8px;display:block;transform:rotate(-1.5deg)}
.emptystate p{font-size:13.5px;color:var(--body);line-height:1.55;margin:0 auto;max-width:34ch}

/* ---------- SUBMIT sheet (single scroll, staged sections) ---------- */
.gatecard{text-align:center;padding:26px 18px}
.gatecard .gmark{font-size:40px;margin-bottom:6px}
.gatecard h4{font-size:20px;margin:0 0 8px;letter-spacing:-.01em}
.gatecard p{font-size:13.5px;color:var(--body);line-height:1.55;margin:0 auto 16px;max-width:36ch}

.formstep{margin:0 0 18px}
.formstep .sl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 9px;display:flex;align-items:center;gap:8px}
.formstep .sl .stepno{background:var(--ink);color:var(--paper);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;flex:0 0 auto}
.field{width:100%;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);
  font:600 15px 'Space Grotesk',system-ui,sans-serif;color:var(--ink);padding:12px 13px;min-height:48px}
.field:focus{outline:none;box-shadow:2px 2px 0 var(--red)}
textarea.field{resize:vertical;min-height:80px;line-height:1.5}
.field::placeholder{color:var(--muted);font-weight:500}
.field[disabled]{background:var(--panel);color:var(--muted);cursor:not-allowed;box-shadow:none}
.hint{font-size:11.5px;color:var(--muted);margin:6px 0 0;font-weight:600}

.placehint{border:2px dashed var(--ink);background:var(--panel);padding:12px 14px;font-size:13px;line-height:1.5;color:var(--body);display:flex;gap:10px;align-items:flex-start}
.placehint .pinmini{flex:0 0 auto;font-size:18px}
.placehint.placed{background:#e7efe0;border-style:solid}
.placehint b{color:var(--ink)}

.techslider{display:flex;align-items:center;gap:12px}
.techslider input[type=range]{flex:1;accent-color:var(--red);height:30px}
.techslider .tv{width:52px;height:44px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:700;font-size:18px;display:grid;place-items:center;box-shadow:2px 2px 0 var(--red)}

.difpick{display:flex;gap:7px}
.difpick button{flex:1;min-height:56px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.difpick button .slice{width:26px;height:26px}
.difpick button .dl{font-size:8.5px;font-weight:700;color:var(--muted)}
.difpick button[aria-pressed="true"]{background:var(--sodium)}
.difpick button[aria-pressed="true"] .dl{color:var(--ink)}

.respect-inline{border:2px solid var(--ink);background:#F5E9C8;box-shadow:3px 3px 0 var(--red);padding:12px 15px;margin:2px 0 16px}
.respect-inline .rh{font-family:'Permanent Marker',cursive;color:var(--red);font-size:14px;margin-bottom:4px}
.respect-inline p{margin:0;font-size:12px;line-height:1.5;color:var(--body)}

/* coming-soon banner on the submit preview */
.soonbar{border:2px solid var(--ink);background:var(--sodium);box-shadow:3px 3px 0 var(--ink);
  padding:13px 15px;margin:2px 0 18px;display:flex;gap:11px;align-items:flex-start}
.soonbar .sb-mark{font-size:20px;flex:0 0 auto;line-height:1.1}
.soonbar .sb-txt{font-size:12.5px;line-height:1.5;color:var(--ink)}
.soonbar .sb-txt b{font-weight:700}

/* small button variant (used in My spots row actions) */
.btn.small{padding:7px 12px;font-size:12.5px;box-shadow:2px 2px 0 var(--ink);min-height:0}
.btn.small:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn.danger{color:var(--red);border-color:var(--red)}
.btn.danger:active{box-shadow:1px 1px 0 var(--red)}

/* inline error strip (auth + submit) */
.autherr{border:2px solid var(--red);background:#fbe3e2;box-shadow:2px 2px 0 var(--red);
  color:#8a1c18;font-weight:700;font-size:12.5px;line-height:1.45;padding:10px 13px;margin:0 0 16px}

/* ---------- AUTH modal (sign in / create account) ---------- */
.authtabs{margin:0 0 16px}
.authtabs button[aria-pressed="true"]{background:var(--red);color:#fff}
.authtabs button{background:#fff;color:var(--ink)}
.formstep .sl .stepno{font-size:12px}
.authdiv{display:flex;align-items:center;gap:12px;margin:6px 0 14px;color:var(--muted);
  font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.authdiv::before,.authdiv::after{content:"";flex:1;height:0;border-top:2px dashed rgba(26,23,19,.32)}
.authnote{margin-top:16px;line-height:1.55}
.authnote a{color:var(--red);font-weight:700;text-decoration:underline}
/* Continue-with-Google keeps the zine button chrome, white face */
#authGoogle{background:#fff;justify-content:center}
#authGoogle svg{width:17px;height:17px}

/* ---------- ACCOUNT menu (signed-in) ---------- */
.acctmenu{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.acctmenu .btn{justify-content:flex-start}
.acctmenu .btn svg{width:18px;height:18px}
.acctmenu .btn.ghost{justify-content:center}

/* signed-in auth pill state (green dot) */
.authtoggle.in .dot{background:#2f9e44}

/* ---------- PIN DROP (submit "Drop the pin") ---------- */
.pinactions{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap}
.pinactions .btn{flex:1;justify-content:center;min-width:130px}
/* the draggable pin used while adding/editing a spot */
.droppin{cursor:grab;-webkit-tap-highlight-color:transparent;filter:drop-shadow(2px 3px 0 rgba(26,23,19,.5))}
.droppin .dp-body{width:34px;height:34px;border-radius:50% 50% 50% 2px;transform:rotate(45deg);
  border:2.5px solid var(--ink);background:var(--red);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:19px}
.droppin .dp-body{line-height:1}
.droppin:active{cursor:grabbing}
.mapstage[data-layer="satellite"] .droppin .dp-body{border-color:#0d0d0a}

/* ---------- MY SPOTS ---------- */
.ms-list{display:flex;flex-direction:column;gap:11px}
.ms-row{border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:12px 13px}
.ms-row.park{background:#fffdf4}
.ms-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ms-name{font-weight:700;font-size:14.5px;line-height:1.2;min-width:0}
.ms-meta{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:4px}
.ms-stats{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.msstat{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--panel);border:1.5px solid var(--ink);padding:2px 7px;white-space:nowrap}
.msstat b{color:var(--ink);font-weight:800}
.msstat.gold{background:var(--sodium);color:var(--ink)}
.ms-note{font-size:12.5px;color:var(--body);line-height:1.5;margin-top:7px}
.ms-acts{display:flex;gap:8px;margin-top:11px}
.statuspill{flex:0 0 auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border:2px solid var(--ink);padding:3px 8px;white-space:nowrap}
.statuspill.pend{background:var(--sodium);color:var(--ink)}
.statuspill.ok{background:#2f9e44;color:#fff}
.statuspill.no{background:var(--red);color:#fff}

/* leaderboard "you" highlight */
.lb-row.me{box-shadow:4px 4px 0 var(--amber)}
.lb-name .youtag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#fff;background:var(--red);border:1.5px solid var(--ink);padding:1px 5px;margin-left:6px;vertical-align:1px}

/* ---------- LEADERBOARD sheet ---------- */
.lb-intro{font-size:13.5px;color:var(--body);line-height:1.55;margin:0 0 16px}
.lb-list{display:flex;flex-direction:column;gap:9px}
.lb-row{display:flex;align-items:center;gap:13px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:11px 13px}
.lb-row.top{background:var(--panel);box-shadow:4px 4px 0 var(--red)}
.lb-rank{width:38px;height:38px;flex:0 0 auto;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  font-family:'Permanent Marker',cursive;font-size:17px;display:grid;place-items:center;border-radius:50%}
.lb-row.top .lb-rank{background:var(--amber);color:var(--ink)}
.lb-av{width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:2px solid var(--ink);background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.lb-info{flex:1;min-width:0}
.lb-name{font-weight:700;font-size:15px;line-height:1.15}
.lb-toasts{font-size:14px;letter-spacing:1px;margin-top:2px}
.lb-count{flex:0 0 auto;text-align:right}
.lb-count .cn{font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1}
.lb-count .cl{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* toast tooltip pill used across sheets */
.toastkey{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted);
  border:2px solid var(--ink);background:#fff;padding:3px 8px;margin-top:2px}

/* "nothing round here yet" — floats over the chart, clear of the dock (z40)
   and the result chip. Deliberately NOT a sheet: it must not trap a rider who
   only wants to carry on panning. */
.emptyvp{position:absolute;z-index:41;left:50%;transform:translateX(-50%);
  top:96px;width:min(340px,calc(100vw - 36px));background:var(--paper);
  border:2px solid var(--ink);box-shadow:6px 6px 0 var(--red);padding:16px 16px 14px;display:none}
.emptyvp .evk{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--red);margin-bottom:6px}
.emptyvp p{font-size:13px;line-height:1.5;color:var(--body);margin:0 0 12px}
.emptyvp .evx{position:absolute;top:6px;right:6px;width:26px;height:26px;border:2px solid var(--ink);
  background:#fff;font:700 12px/1 inherit;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
@media (max-width:560px){ .emptyvp{top:88px} }

/* first-open coach scrawl (dismissible) */
.coach{position:absolute;z-index:39;pointer-events:none;font-family:'Permanent Marker',cursive;color:var(--red);
  font-size:13px;line-height:1.25;text-shadow:0 1px 0 rgba(245,240,228,.9);transition:opacity .4s}
.coach.hide{opacity:0}
.coach svg{position:absolute;overflow:visible}

/* toast (transient notice) */
.snack{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);transform:translateX(-50%) translateY(20px);
  z-index:70;background:var(--ink);color:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--red);
  padding:11px 16px;font-weight:700;font-size:13.5px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s;max-width:88vw;text-align:center}
.snack.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.snack .scrawl{font-size:13px}

/* ============================================================
   DESKTOP — sheets dock as a left side-rail; map keeps full bleed
============================================================ */
@media(min-width:880px){
  .sheet{left:16px;right:auto;top:16px;bottom:16px;width:390px;max-height:none;
    border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(26,23,19,.85);
    transform:translateX(calc(-100% - 40px));transition:transform .4s cubic-bezier(.22,.61,.36,1)}
  .sheet.open{transform:translateX(0)}
  .sheet::before{display:none}
  .grab{display:none}
  .sheet-scroll{padding:18px 22px 24px}
  .scrim{background:transparent;backdrop-filter:none}
  .scrim.show{visibility:hidden}      /* desktop: side-rail doesn't need a scrim */
  /* keep FABs clear of the rail */
  .bottomdock{padding-left:16px}
  .topbar{padding-left:16px;padding-right:16px}
  .searchpill{max-width:520px}
}
@media(min-width:880px) and (max-width:1100px){
  .sheet.open ~ .bottomdock .leftctrls,
  .sheet.open ~ .bottomdock .submitfab{margin-left:400px}
}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* focus ring inside dark sat */
.mapstage[data-layer="satellite"] .pin:focus-visible{outline-color:var(--sodium)}

/* ============================================================
   SPOT REVIEWS + CATEGORY (v9) — zine tokens, no new colours
============================================================ */

/* review-driven pin tag: a rating COUNT tinted by average vibe */
.toasttag.rated{top:-9px;right:-11px;min-width:19px;height:19px;padding:0 4px;border-radius:999px;
  border:2px solid var(--ink);background:var(--t3);color:var(--ink);font-size:11px;font-weight:700;
  line-height:15px;text-align:center;transform:rotate(6deg);box-shadow:1.5px 1.5px 0 rgba(26,23,19,.6)}
.mapstage[data-layer="satellite"] .toasttag.rated{border-color:#0d0d0a}

/* category badge (spot sheet chiprow + result rows) */
.catbadge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;border:2px solid var(--ink);padding:3px 8px;box-shadow:2px 2px 0 var(--ink);background:#fff}
.catbadge.cat-street{background:var(--panel)}
.catbadge.cat-park{background:var(--amber)}
.catbadge.cat-natural{background:#e2ead9}
/* compact variant inside a result-row meta line */
.rmeta .catbadge{font-size:9px;padding:1px 5px;box-shadow:1.5px 1.5px 0 var(--ink);letter-spacing:.04em}
.rmeta .rm-text{display:inline}

/* ---- reviews block on the spot sheet ---- */
.reviews-block{margin:16px 0 0;padding:14px 15px;border:2px solid var(--ink);background:var(--panel);box-shadow:3px 3px 0 var(--ink)}
.rev-head{margin:0 0 8px}
.rev-kick{font-family:'Permanent Marker',cursive;color:var(--red);font-size:16px;letter-spacing:.01em}
.rev-count{font-size:13.5px;color:var(--body);font-weight:600;margin:0 0 6px}
.rev-count b{color:var(--ink);font-size:15px}
.rev-count.rev-empty{font-style:italic;color:var(--muted)}
.rev-vibe{font-size:13px;color:var(--body);font-weight:600;margin:8px 0 0}
.rev-vibe b{color:var(--ink)}
.rev-reels{font-size:11.5px;color:var(--muted);font-weight:700;margin:6px 0 0;text-transform:uppercase;letter-spacing:.05em}
.abilrow{margin:8px 0 0}
.abilchip{font-size:11px;font-weight:700;border:2px solid var(--ink);background:#fff;padding:3px 8px;box-shadow:1.5px 1.5px 0 var(--ink)}
.rev-actions{margin:12px 0 0}

/* Flow<->Technical average bar (centre-weighted, marker at avg) */
.flowbar{display:flex;align-items:center;gap:9px;margin:10px 0 2px}
.flowbar .fb-end{flex:0 0 auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.fb-track{position:relative;flex:1;height:14px;border:2px solid var(--ink);background:#fff;
  background-image:linear-gradient(90deg,transparent 49.5%,rgba(26,23,19,.14) 49.5% 50.5%,transparent 50.5%)}
.fb-center{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:rgba(26,23,19,.28);transform:translateX(-1px)}
.fb-marker{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--red);border:2px solid var(--ink);
  transform:translate(-50%,-50%);box-shadow:1.5px 1.5px 0 rgba(26,23,19,.5)}

/* per-criteria scorecard (v17): flow/tech dial + caption + 3-up numeric grid */
.scorecard{margin:2px 0 0}
.scorecard .sch{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 2px}
.sc-scrawl{font-family:'Permanent Marker',cursive;color:var(--red);font-size:15px;letter-spacing:.01em}
.sc-from{font-size:11px;font-weight:700;color:var(--muted)}
.sc-from b{color:var(--ink)}
.flowcap{text-align:center;font-size:10.5px;font-weight:700;color:var(--body);margin:2px 0 0}
.scgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:11px 0 0}
.sccell{border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);padding:8px 9px}
.sccell .sc-l{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.sccell .sc-num{font-size:21px;font-weight:700;line-height:1.1;color:var(--ink)}
.sccell .sc-bar{height:6px;border:1.5px solid var(--ink);background:#fff;margin-top:5px}
.sccell .sc-bar i{display:block;height:100%}
.sccell .sc-feat{font-size:16px;font-weight:700;line-height:1.1;padding-top:3px}
.sccell .sc-feat.yes{color:var(--ok)}
.sccell .sc-feat.no{color:var(--red)}
.sccell .sc-feat.na{color:var(--muted)}
.sccell .sc-sub{font-size:9px;font-weight:600;color:var(--muted);margin-top:3px}

/* YES/NO tri-state control (rate sheet: lit-at-night, undercover) */
.yesno{display:flex;gap:8px}
.ynbtn{flex:1;min-height:50px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);cursor:pointer;font-family:inherit;
  font-weight:700;font-size:13.5px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:7px}
.ynbtn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.ynbtn[aria-pressed="true"].yes{background:var(--ok);color:#fff}
.ynbtn[aria-pressed="true"].no{background:var(--red);color:#fff}

/* ---- VENUE SUITE: park marquee pin + park detail (rider) sheet ---- */
.pkini{fill:var(--ink);font-weight:700}
.vstamp{font-family:'Permanent Marker',cursive;color:var(--ok);font-size:12px;font-style:normal;white-space:nowrap}
.statusboard{margin:14px 0 0;padding:12px 14px;border:2px solid var(--ink);background:var(--panel);box-shadow:3px 3px 0 var(--ink)}
.sb-top{display:flex;align-items:center;gap:10px}
.statuspill{font-size:12px;font-weight:800;letter-spacing:.04em;border:2px solid var(--ink);padding:3px 10px;color:#fff}
.statuspill.ok{background:var(--ok)}
.statuspill.shut{background:var(--red)}
.statusmsg{font-size:13px;font-weight:700;color:var(--body)}
.weekstrip{display:flex;gap:5px;margin:11px 0 0}
.weekstrip .wd{flex:1;text-align:center;font-size:10px;font-weight:800;padding:5px 0;border:2px solid var(--ink);color:var(--muted);background:#fff}
.weekstrip .wd.on{background:var(--ok);color:#fff}
.weekstrip .wd.off{background:repeating-linear-gradient(45deg,#fff,#fff 3px,rgba(210,44,38,.18) 3px,rgba(210,44,38,.18) 6px);color:var(--red)}
.weekstrip .wd.today{outline:2px solid var(--ink);outline-offset:1px}
.statusnote{font-size:11.5px;color:var(--muted);font-weight:600;margin:9px 0 0}
.park-sec{margin:16px 0 0}
.ps-h{font-family:'Permanent Marker',cursive;color:var(--red);font-size:15px;margin:0 0 8px}
.notice{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:9px 11px;margin:0 0 8px;background:#fff}
.notice.warn{background:#F5E9C8;box-shadow:2px 2px 0 var(--red)}
.notice.closure{background:var(--red);color:#fff}
.notice-k{font-family:'Permanent Marker',cursive;font-size:12px;margin:0 0 2px;color:var(--ink)}
.notice.closure .notice-k{color:#fff}
.notice p{font-size:12.5px;line-height:1.45;margin:0}
.sess{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:#fff;padding:10px 11px;margin:0 0 8px}
.sess-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sess-top b{font-size:13.5px}
.sessbar{height:8px;border:1.5px solid var(--ink);background:#fff;margin:8px 0 4px}
.sessbar i{display:block;height:100%}
.sess-meta{font-size:11px;font-weight:700;color:var(--muted)}
.price{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:2px dashed rgba(26,23,19,.28);padding:8px 2px}
.price .pl{font-size:13px;font-weight:600}
.price b{font-size:14px}
.bestchip{font-size:9px;font-weight:800;background:var(--amber);color:var(--ink);border:1.5px solid var(--ink);padding:1px 5px;vertical-align:1px}
.whatson-row{display:flex;align-items:center;gap:9px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:#fff;padding:8px 10px;margin:0 0 8px}
.kstamp{font-size:9.5px;font-weight:800;border:1.5px solid var(--ink);padding:2px 6px;color:#fff;flex:0 0 auto}
.kstamp.comp{background:var(--red)}
.kstamp.jam{background:var(--amber);color:var(--ink)}
.wr-t{flex:1;font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-d{font-size:11px;font-weight:700;color:var(--muted);flex:0 0 auto}
.ownercard{display:flex;align-items:center;gap:11px;margin:16px 0 0;padding:11px 13px;border:2px solid var(--ink);background:var(--panel);box-shadow:3px 3px 0 var(--ink)}
.ownercard .oav{width:38px;height:38px;background:var(--ink);color:var(--sodium);display:grid;place-items:center;font-weight:700;flex:0 0 auto;border:2px solid var(--ink);font-size:12px}
.ownercard .oi{flex:1;min-width:0}
.ownercard .on{display:block;font-weight:700;font-size:13px}
.ownercard .om{display:block;font-size:11px;color:var(--muted);font-weight:600}
.btn.small{width:auto;min-height:0;padding:7px 12px;font-size:12.5px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
.ownerbar{margin:12px 0 0;padding:10px 12px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--red)}
.ownerbar .ob-k{font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--sodium);margin:0 0 8px}
.ownerbar .ob-btns{display:flex;gap:7px;flex-wrap:wrap}
.ovbtn{background:var(--paper);color:var(--ink)}
.ovbtn.on{background:var(--sodium);color:var(--ink)}
.ovbtn.on-ok{background:var(--ok);color:#fff}
.ovbtn.on-red{background:var(--red);color:#fff}

/* individual reviews list */
.rev-list{display:flex;flex-direction:column;gap:10px;margin:14px 0 0}
.rev-item{border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);padding:10px 12px}
.rev-item-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rev-author{font-weight:700;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev-vibelbl{flex:0 0 auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border:2px solid var(--ink);background:var(--sodium);color:var(--ink);padding:2px 7px}
.rev-note{font-size:12.5px;line-height:1.5;color:var(--body);margin:8px 0 0}
.critrow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.critmini{font-size:10.5px;font-weight:700;border:2px solid var(--ink);background:var(--panel);color:var(--ink);padding:2px 7px;box-shadow:1.5px 1.5px 0 var(--ink)}
.rev-item-foot{margin:9px 0 0}
.rev-reel{font-size:12px;font-weight:700;color:var(--red);text-decoration:underline}

/* compact flow marker inside a review row */
.flowmini{display:flex;align-items:center;gap:7px;margin:8px 0 0}
.flowmini .fm-l,.flowmini .fm-r{flex:0 0 auto;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.fm-track{position:relative;flex:1;height:9px;border:2px solid var(--ink);background:#fff}
.fm-center{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:rgba(26,23,19,.25);transform:translateX(-1px)}
.fm-marker{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid var(--ink);transform:translate(-50%,-50%)}

/* ---- rate sheet controls ---- */
.flowinput{display:flex;align-items:center;gap:11px}
.flowinput input[type=range]{flex:1;accent-color:var(--red);height:30px}
.flowinput .fi-end{flex:0 0 auto;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap}

.vibescale{display:flex;flex-wrap:wrap;gap:7px}
.vibeseg{flex:1 1 30%;min-width:96px;min-height:52px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px}
.vibeseg:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.vibeseg .vs-n{font-weight:700;font-size:13px;color:var(--muted)}
.vibeseg .vs-l{font-size:10px;font-weight:700;color:var(--body);text-align:center;line-height:1.15}
.vibeseg[aria-pressed="true"]{background:var(--sodium)}
.vibeseg[aria-pressed="true"] .vs-n,.vibeseg[aria-pressed="true"] .vs-l{color:var(--ink)}

/* Admin edit/delete row on a spot detail sheet */
.sd-admin{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 2px;padding-top:12px;border-top:1px dashed rgba(26,23,19,.3)}
.sd-admin-lbl{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sd-admin .btn{padding:7px 12px;font-size:13px}
.btn.danger{background:var(--red);color:#fff;border-color:var(--ink)}
.btn.danger:hover{background:#b3231d}

/* ===== VENUE SUITE — merged from design handoff (INTEGRATION.md §2). New
   surfaces only; my park/spot/rate blocks above are kept, so the two
   colliding prototype blocks (statusboard 250-265, scorecard 310-327) are
   deliberately skipped. ===== */
/* ---- venue plates (NEW): render only past z13, and always on the selected pin ---- */
.vplate,.vstrap,.rplate{position:absolute;white-space:nowrap;pointer-events:none}
.vplate{left:104%;top:8px;background:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  padding:5px 9px;font-weight:700;font-size:11px;color:var(--ink);transform:rotate(-2deg);
  display:inline-flex;align-items:center;gap:6px}
.vplate .chip{background:var(--ok);color:#fff;border:1.5px solid var(--ink);font-size:8px;font-weight:800;
  letter-spacing:.05em;padding:1px 4px}
.vplate .chip.closed{background:var(--red)}
.vstrap{left:104%;top:44px;background:var(--ink);color:var(--sodium);border:2px solid var(--ink);
  box-shadow:2px 2px 0 rgba(26,23,19,.4);padding:3px 8px;font-weight:700;font-size:9.5px;transform:rotate(-1deg)}
.rplate{left:-64px;top:104%;background:var(--sodium);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  padding:3px 7px;font-weight:700;font-size:10px;color:var(--ink);transform:rotate(1.5deg)}
.rplate.cancelled{background:var(--red);color:#fff}
/* zoom behaviour: z11 hides plates + shrinks pins slightly */
.mapstage[data-zoom="z11"] .vplate,
.mapstage[data-zoom="z11"] .vstrap,
.mapstage[data-zoom="z11"] .rplate{display:none}
.mapstage[data-zoom="z11"] .mappin.sel .vplate{display:inline-flex}
.mapstage[data-zoom="z11"] .mappin svg{transform:scale(.72);transform-origin:50% 100%}
/* spot name plate above the pin (z14+, and always when selected) */
.sname{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) rotate(-1deg);
  background:var(--paper);border:1.5px solid var(--ink);box-shadow:1.5px 1.5px 0 var(--ink);
  padding:2px 6px;font-size:9px;font-weight:700;color:var(--ink);white-space:nowrap;pointer-events:none}
.mapstage[data-zoom="z11"] .sname{display:none}
.mapstage[data-zoom="z11"] .mappin.sel .sname{display:block}
/* filtered-out pins recede (dim, don't remove — judged graft, as live) */
.mappin.filtered{opacity:.24;filter:saturate(.35);pointer-events:none}
/* filter count badge on the Filter button */
.filterbtn{position:relative}
.fcount{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;
  background:var(--red);color:#fff;border:2px solid var(--ink);font-size:12px;font-weight:700;
  display:none;align-items:center;justify-content:center}
.filterbtn.has-filters .fcount{display:flex}
/* ---- clusters: shown only when zoomed out (z11) ---- */
.cluster{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:0;cursor:pointer;
  z-index:6;display:none;flex-direction:column;align-items:center;-webkit-tap-highlight-color:transparent}
.mapstage[data-zoom="z11"] .cluster{display:flex}
.mapstage[data-zoom="z11"] .mappin{display:none}
.cluster .cn{width:46px;height:46px;border-radius:50%;border:2px solid var(--ink);background:var(--red);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:19px;box-shadow:3px 3px 0 var(--ink)}
.cluster .ca{margin-top:5px;background:var(--paper);border:2px solid var(--ink);box-shadow:1.5px 1.5px 0 var(--ink);
  padding:2px 7px;font-size:10px;font-weight:700;color:var(--ink);white-space:nowrap}
.cluster:active .cn{transform:translate(1px,1px)}
/* verified tick + stamps */
.vtick{font-style:normal;color:var(--ok)}
.stamp{display:inline-block;vertical-align:2px;background:var(--ok);color:#fff;border:1.5px solid var(--ink);
  font-size:9px;font-weight:800;letter-spacing:.05em;padding:1px 5px;transform:rotate(-2deg)}
.stamp.live{background:var(--ok)}.stamp.draft{background:var(--sodium);color:var(--ink)}.stamp.done{background:var(--panel);color:var(--muted);border-color:var(--muted)}
/* notice banners: info / warn / closure */
.noticebar{border:2px solid var(--ink);padding:10px 13px;margin:0 0 14px}
.noticebar.info{background:#fff;box-shadow:3px 3px 0 var(--ink)}
.noticebar.warn{background:#F5E9C8;box-shadow:3px 3px 0 var(--red)}
.noticebar.closure{background:var(--red);box-shadow:3px 3px 0 var(--ink);color:#fff}
.noticebar .nh{font-family:'Permanent Marker',cursive;color:var(--red);font-size:13.5px;margin-bottom:3px}
.noticebar.closure .nh{color:#fff}
.noticebar p{margin:0;font-size:12.5px;line-height:1.5;color:var(--body)}
.noticebar.closure p{color:#fff}
.noticebar .nm{font-size:10px;font-weight:700;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.06em}
.noticebar.closure .nm{color:rgba(255,255,255,.8)}
/* sessions + capacity */
.sessrow{display:flex;align-items:center;gap:11px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:10px 12px;margin-bottom:8px}
.sessrow .si{flex:1;min-width:0}
.sessrow .st{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sessrow .st b{font-size:13px}
.sessrow .st .cap{font-size:10.5px;font-weight:700;color:var(--muted)}
.sessrow .st .cap.hot{font-weight:800;color:var(--red)}
.fillbar{height:8px;border:1.5px solid var(--ink);background:#fff;margin-top:6px}
.fillbar i{display:block;height:100%;background:var(--amber)}
.fillbar i.hot{background:var(--red)}
.hint{font-size:10.5px;font-weight:600;color:var(--muted);margin-top:6px}
/* prices */
.pricerow{display:flex;gap:12px;padding:8px 0;border-bottom:1px dashed rgba(26,23,19,.28);font-size:13.5px;align-items:baseline}
.pricerow span{flex:1;font-weight:600;color:var(--body)}
.pricerow b{font-size:15px}
.bestchip{background:var(--amber);border:1.5px solid var(--ink);font-size:9px;font-weight:800;padding:1px 4px;letter-spacing:.04em;margin-left:4px;color:var(--ink)}
/* event cards */
.evcard{display:flex;align-items:center;gap:11px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:10px 12px;margin-bottom:9px;text-align:left;width:100%}
.evcard.hot{box-shadow:4px 4px 0 var(--red)}
.evcard.past{border-style:dashed;background:var(--panel);box-shadow:none}
.datechip{flex:0 0 auto;border:2px solid var(--ink);text-align:center;padding:5px 9px;line-height:1.05;background:#fff;color:var(--ink)}
.datechip.inked{background:var(--ink);color:var(--paper)}
.datechip .d1{font-size:16px;font-weight:700}
.datechip .d2{font-size:8.5px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.datechip.inked .d2{color:var(--sodium)}
.evi{flex:1;min-width:0}
.evt{font-weight:700;font-size:13.5px;line-height:1.2;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.evm{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.kindtag{border:1.5px solid var(--ink);font-size:8.5px;font-weight:800;padding:1px 5px;letter-spacing:.05em}
.kindtag.comp{background:var(--red);color:#fff}
.kindtag.jam{background:var(--amber);color:var(--ink)}
.kindtag.ride{background:var(--sodium);color:var(--ink)}
.freechip{background:var(--sodium);border:2px solid var(--ink);font-size:10px;font-weight:800;padding:4px 8px;letter-spacing:.05em;color:var(--ink);flex:0 0 auto}
/* facilities + owner card */
.facils{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.facil{font-size:11.5px;font-weight:700;border:2px solid var(--ink);background:#fff;padding:5px 9px;box-shadow:2px 2px 0 var(--ink)}
.ownercard{display:flex;align-items:center;gap:11px;margin:0 0 16px;padding:12px 14px;border:2px solid var(--ink);background:var(--panel);box-shadow:3px 3px 0 var(--ink)}
.ownercard .oav{width:40px;height:40px;background:var(--ink);color:var(--sodium);display:grid;place-items:center;font-weight:700;flex:0 0 auto;border:2px solid var(--ink);font-size:13px}
.ownercard .oi{flex:1;min-width:0}
.ownercard .on{display:block;font-weight:700;font-size:13.5px}
.ownercard .om{display:block;font-size:11px;color:var(--muted);font-weight:600}
/* classes grid (comp entry) */
.classgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.classcard{border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);padding:10px 11px;cursor:pointer;text-align:left;position:relative;font-family:inherit}
.classcard .ct{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.classcard .ct b{font-size:13.5px}
.classcard .cm{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px}
.classcard[aria-pressed="true"]{background:var(--sodium)}
.classcard[aria-pressed="true"] .cm{color:var(--body)}
.classcard .picktick{position:absolute;top:-8px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--red);border:2px solid var(--ink);
  color:#fff;font-size:11px;font-weight:800;display:none;place-items:center}
.classcard[aria-pressed="true"] .picktick{display:grid}
.classcard.full{background:var(--panel);cursor:not-allowed;opacity:.8}
.classcard.full .cm{color:var(--red);font-weight:800}
/* rider rows */
.riderrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px dashed rgba(26,23,19,.28)}
.riderrow .rav{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:11px;flex:0 0 auto;background:var(--red);color:#fff}
.riderrow .rav.ink{background:var(--ink);color:var(--paper)}
.riderrow .rav.amber{background:var(--amber);color:var(--ink)}
.riderrow .rav.sodium{background:var(--sodium);color:var(--ink)}
.riderrow .rav.paper{background:var(--panel);color:var(--ink)}
.riderrow .rn{flex:1;font-weight:700;font-size:12.5px;min-width:0}
.riderrow .rn small{font-size:10px;color:var(--muted);font-weight:600}
.classtag{font-size:9.5px;font-weight:800;border:1.5px solid var(--ink);background:#fff;padding:2px 6px;letter-spacing:.04em}
.classtag.on{background:var(--sodium)}
.intag{background:var(--ok);color:#fff;border:1.5px solid var(--ink);font-size:8.5px;font-weight:800;padding:1px 4px}
.youtag{font-size:9px;font-weight:800;text-transform:uppercase;color:#fff;background:var(--red);border:1.5px solid var(--ink);padding:1px 5px;letter-spacing:.05em;vertical-align:1px}
/* RSVP + avatar pile */
.avpile{display:flex}
.avpile span{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:11.5px}
.avpile span+span{margin-left:-9px}
.rsvp{display:flex;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);margin:0 0 16px}
.rsvp button{flex:1;min-height:46px;border:0;border-right:2px solid var(--ink);background:#fff;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink)}
.rsvp button:last-child{border-right:0}
.rsvp button[aria-pressed="true"]{background:var(--red);color:#fff}
/* run order cards */
.runcard{display:flex;align-items:center;gap:11px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:9px 12px;margin-bottom:8px;width:100%;text-align:left;font-family:inherit;cursor:pointer}
.runcard .onum{width:30px;height:30px;flex:0 0 auto;border:2px solid var(--ink);background:var(--sodium);color:var(--ink);font-weight:800;display:grid;place-items:center;border-radius:50%;font-size:13px}
.runcard .ri{flex:1;min-width:0}
.runcard .rt{display:block;font-weight:700;font-size:13px}
.runcard .rm{display:block;font-size:10.5px;color:var(--muted);font-weight:600}
.runcard .arr{color:var(--red);font-size:16px}
/* thread */
.threadbox{border:2px solid var(--ink);background:var(--panel);box-shadow:3px 3px 0 var(--ink);padding:10px 13px;margin-bottom:14px}
.threadbox .tl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.threadbox .msg{font-size:12.5px;line-height:1.5;color:var(--body);margin-bottom:6px}
.threadrow{display:flex;gap:7px;margin-top:9px}
.threadrow input{flex:1;border:2px solid var(--ink);background:#fff;padding:9px 11px;font:600 12px 'Space Grotesk',sans-serif;color:var(--ink);min-width:0}
.threadrow input::placeholder{color:var(--muted)}
/* stats trio */
.stattrio{display:flex;gap:8px;margin:0 0 16px}
.stattrio .sc{flex:1;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);padding:8px 10px;text-align:center}
.stattrio .sc .n{font-size:20px;font-weight:700;line-height:1}
.stattrio .sc .l{font-size:8.5px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-top:3px}
/* podium + results table */
.podium{display:flex;align-items:flex-end;gap:8px;margin:0 0 16px}
.pod{flex:1;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:10px 8px 9px;text-align:center}
.pod.win{flex:1.15;background:var(--sodium);box-shadow:4px 4px 0 var(--red);padding:14px 8px 12px;transform:rotate(-.5deg)}
.pod .pp{font-family:'Permanent Marker',cursive;font-size:15px}
.pod.win .pp{font-size:18px;color:var(--red)}
.pod .pav{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:12px;margin:6px auto}
.pod .pn{font-weight:700;font-size:12.5px}
.rthead{display:flex;gap:10px;padding:6px 0 7px;border-bottom:2px solid var(--ink);font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rtrow{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed rgba(26,23,19,.28);font-size:13px}
.rtrow.me{background:#F5E9C8;outline:2px solid var(--amber);outline-offset:-2px}
.rtrow .pos{flex:0 0 32px;font-family:'Permanent Marker',cursive;color:var(--red)}
.rtrow .nm{flex:1;font-weight:700}
/* ============ LEADERBOARD ============ */
.lbtabs{display:flex;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);margin:0 0 16px}
.lbtabs button{flex:1;min-height:44px;border:0;border-right:2px solid var(--ink);background:#fff;font-weight:700;font-size:12.5px;cursor:pointer;color:var(--ink)}
.lbtabs button:last-child{border-right:0}
.lbtabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.lbrow{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:10px 12px;margin-bottom:9px}
.lbrow.top{background:var(--panel);box-shadow:4px 4px 0 var(--red)}
.lbrow.me{box-shadow:4px 4px 0 var(--amber)}
.lbrank{width:36px;height:36px;flex:0 0 auto;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  font-family:'Permanent Marker',cursive;font-size:16px;display:grid;place-items:center;border-radius:50%}
.lbrow.top .lbrank{background:var(--amber);color:var(--ink)}
.lbav{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--red);color:#fff}
.lbav.sq{border-radius:4px;background:var(--amber);color:var(--ink)}
.lbinfo{flex:1;min-width:0}
.lbname{font-weight:700;font-size:14.5px;line-height:1.15}
.lbsub{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.lbcount{flex:0 0 auto;text-align:right}
.lbcount .cn{font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1}
.lbcount .cl{font-size:9px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}

/* ============ ACCOUNT MENU · INBOX · MESSAGES ============ */
.menucard{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);background:var(--panel);box-shadow:3px 3px 0 var(--ink);padding:12px 14px;margin-bottom:16px}
.menucard .mav{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px;flex:0 0 auto}
.menucard .mi{flex:1;min-width:0}
.menucard .mn{font-weight:700;font-size:16px;display:flex;align-items:center;gap:7px}
.menucard .mm{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.acctmenu{display:flex;flex-direction:column;gap:9px}
.acctmenu .btn{justify-content:flex-start}
.inboxrow{display:flex;gap:11px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:10px 12px;margin-bottom:9px;width:100%;text-align:left;font-family:inherit;cursor:pointer;align-items:flex-start}
.inboxrow.unread{background:#FBF6E9}
.inboxrow .ic{width:34px;height:34px;flex:0 0 auto;border:2px solid var(--ink);display:grid;place-items:center;font-size:16px;background:var(--sodium)}
.inboxrow .ic.red{background:var(--red)}.inboxrow .ic.ok{background:var(--ok)}.inboxrow .ic.amber{background:var(--amber)}
.inboxrow .it{flex:1;min-width:0}
.inboxrow .itt{font-weight:700;font-size:13px;line-height:1.3}
.inboxrow .itm{font-size:11.5px;color:var(--body);font-weight:500;line-height:1.4;margin-top:2px}
.inboxrow .iw{font-size:10px;font-weight:700;color:var(--muted);flex:0 0 auto;white-space:nowrap}
.inboxrow .dotu{width:9px;height:9px;border-radius:50%;background:var(--red);border:1.5px solid var(--ink);flex:0 0 auto;margin-top:5px}
.msgrow{display:flex;gap:11px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:10px 12px;margin-bottom:9px;width:100%;text-align:left;font-family:inherit;cursor:pointer;align-items:center}
.msgrow.unread{background:#FBF6E9}
.msgrow .mav{width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:13px}
.msgrow .mc{flex:1;min-width:0}
.msgrow .mcn{font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;gap:8px}
.msgrow .mcn small{font-weight:700;color:var(--muted);font-size:10px}
.msgrow .mcp{font-size:11.5px;color:var(--muted);font-weight:500;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmpip{flex:0 0 auto;background:var(--red);color:#fff;font-size:10px;font-weight:800;min-width:19px;height:19px;border:2px solid var(--ink);border-radius:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
/* DM thread — chat bubbles + compose */
.dmthread{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto;padding:8px 2px 4px}
.dmbub{max-width:80%;border:2px solid var(--ink);padding:8px 11px;font-size:13px;line-height:1.45;word-break:break-word}
.dmbub time{display:block;font-size:9px;font-weight:700;color:var(--muted);margin-top:3px;letter-spacing:.03em}
.dmbub.them{align-self:flex-start;background:#fff;box-shadow:2px 2px 0 var(--ink)}
.dmbub.me{align-self:flex-end;background:var(--sodium);box-shadow:-2px 2px 0 var(--ink)}
.dmbub.me time{text-align:right}
/* group chat (ride/event): sender name atop incoming bubbles + list chips (v72) */
.dmbub .dmwho{display:block;font-size:10px;font-weight:800;color:var(--red);margin-bottom:2px;letter-spacing:.02em}
.msgrow .mav.grp{border-radius:12px;font-size:18px}
.grptag{font-size:8.5px;font-weight:800;letter-spacing:.05em;border:1.5px solid var(--ink);border-radius:4px;padding:1px 4px;margin-left:5px;background:var(--sodium);vertical-align:1px}
.parkbadge{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:12.5px;border:2px solid var(--ink);background:var(--sodium);box-shadow:1.5px 1.5px 0 var(--ink);padding:2px 8px;border-radius:6px}
.dmcompose{display:flex;gap:8px;align-items:flex-end;border-top:2px solid var(--ink);padding-top:11px;margin-top:10px}
.dmcompose textarea{flex:1;min-width:0;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;padding:9px 11px;resize:none;border-radius:8px;box-sizing:border-box;min-height:42px}
.dmcompose .btn{flex:0 0 auto}
/* Non-signed-in gate shown instead of a spot/park/ride card */
.authgate{padding:24px 18px 26px;text-align:center}
.authgate .ag-lock{font-size:38px;line-height:1;margin-bottom:12px}
.authgate .ag-title{font-size:19px;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em}
.authgate .ag-sub{font-size:12.5px;line-height:1.55;color:var(--muted);font-weight:600;margin:0 auto 18px;max-width:290px}
.authgate .ag-actions{display:flex;flex-direction:column;gap:10px;max-width:290px;margin:0 auto}

/* ============ STATS / METRICS PAGE ============ */
.statbig{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 16px}
.statbig .sb{border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:12px 13px}
.statbig .sb.wide{grid-column:1/3;background:var(--panel)}
.statbig .sb .bn{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1}
.statbig .sb .bl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.statbig .sb .bd{font-size:11px;font-weight:600;color:var(--ok);margin-top:5px}
.statbars{display:flex;align-items:flex-end;gap:6px;height:88px;margin-top:6px}
.statbars .bc{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.statbars .bc i{display:block;width:100%;border:1.5px solid var(--ink);background:var(--amber)}
.statbars .bc i.peak{background:var(--red)}
.statbars .bc span{font-size:8.5px;font-weight:800;color:var(--muted)}

/* ============ RATE-A-SPOT card (non-owner reviewer) ============ */
.rategrid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.vibeseg{flex:1 1 30%;min-width:92px;min-height:52px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;font-family:inherit}
.vibeseg .vn{font-weight:700;font-size:13px;color:var(--muted)}
.vibeseg .vl{font-size:10px;font-weight:700;color:var(--body);text-align:center;line-height:1.15}
.vibeseg[aria-pressed="true"]{background:var(--sodium)}
.vibeseg[aria-pressed="true"] .vn,.vibeseg[aria-pressed="true"] .vl{color:var(--ink)}
.flowinput{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.flowinput input[type=range]{flex:1;accent-color:var(--red);height:30px}
.flowinput .fe{flex:0 0 auto;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.yesno{display:flex;gap:8px}
.ynbtn{flex:1;min-height:50px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);cursor:pointer;font-family:inherit;
  font-weight:700;font-size:13.5px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:7px}
.ynbtn[aria-pressed="true"].yes{background:var(--ok);color:#fff}
.ynbtn[aria-pressed="true"].no{background:var(--red);color:#fff}

/* ============ SPOT TABS + REELS ============ */
.spottabs{display:flex;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);margin:0 0 16px}
.spottabs button{flex:1;min-height:44px;border:0;border-right:2px solid var(--ink);background:#fff;font-weight:700;font-size:12.5px;cursor:pointer;color:var(--ink);position:relative}
.spottabs button:last-child{border-right:0}
.spottabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.spottabs button .rc{margin-left:5px;font-size:10px;font-weight:800;background:var(--red);color:#fff;border:1.5px solid var(--ink);padding:0 5px}
.spottabs button[aria-pressed="true"] .rc{background:var(--sodium);color:var(--ink)}
.reelfacade{margin:0 0 12px;border:2px solid var(--ink);background:var(--ink);box-shadow:4px 4px 0 rgba(26,23,19,.85);position:relative;aspect-ratio:16/10;cursor:pointer;overflow:hidden;width:100%;display:block;padding:0}
.reelfacade .rfbg{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px),linear-gradient(150deg,#241f1a,#12100d)}
.reelfacade .rfplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;
  background:var(--red);border:2px solid var(--paper);box-shadow:3px 3px 0 rgba(0,0,0,.5);display:grid;place-items:center}
.reelfacade .rfplay svg{width:22px;height:22px;margin-left:3px;fill:#fff}
.reelfacade:hover .rfplay{background:var(--amber)}
.reelfacade:hover .rfplay svg{fill:var(--ink)}
.reelfacade .rftag{position:absolute;left:10px;top:10px;font-family:'Permanent Marker',cursive;color:var(--paper);
  background:rgba(26,23,19,.7);border:2px solid var(--paper);padding:2px 9px;font-size:12px}
.reelfacade .rfby{position:absolute;left:10px;bottom:10px;font-size:10.5px;font-weight:700;color:var(--sodium)}
.reelfacade .rfnote{position:absolute;right:10px;bottom:10px;font-size:9.5px;font-weight:700;color:rgba(245,240,228,.7)}
.reelwrap{margin:0 0 12px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:#000;position:relative;overflow:hidden}
.reelwrap iframe{display:block;width:100%;height:560px;border:0;background:#000}
.reelcap{font-size:11px;font-weight:600;color:var(--muted);margin:0 0 14px}
.reelcap b{color:var(--ink)}

/* ============ HQ TASKS + ATTENDANCE ============ */
.taskcard{border:2px solid var(--ink);background:var(--sodium);box-shadow:3px 3px 0 var(--ink);padding:12px 14px;margin-bottom:14px}
.taskcard .th{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.taskcard .th .scrawl{font-size:15px}
.taskcard .th .cnt{margin-left:auto;background:var(--ink);color:var(--paper);font-size:10px;font-weight:800;padding:2px 7px}
.taskrow{display:flex;align-items:center;gap:10px;background:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:8px 11px;margin-bottom:7px}
.taskrow:last-child{margin-bottom:0}
.taskrow .tt{flex:1;min-width:0;font-size:12px;font-weight:700;color:var(--ink)}
.taskrow .tt small{display:block;font-weight:600;color:var(--muted);font-size:10.5px;margin-top:1px}
.attrow{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);padding:9px 11px;margin-bottom:8px}
.attrow .aav{width:32px;height:32px;flex:0 0 auto;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:11px;background:var(--red);color:#fff}
.attrow .ai{flex:1;min-width:0}
.attrow .an{font-weight:700;font-size:12.5px}
.attrow .as{font-size:10.5px;color:var(--muted);font-weight:600}
.attrow .adone{background:var(--ok);color:#fff;border:2px solid var(--ink);font-size:9.5px;font-weight:800;padding:5px 9px;letter-spacing:.04em;flex:0 0 auto}
.ptsflash{border:2px solid var(--ink);background:var(--panel);box-shadow:2px 2px 0 var(--ok);padding:9px 12px;margin:0 0 12px;font-size:12px;font-weight:700;color:var(--body)}
.ptsflash b{color:var(--ink)}

/* ============ SPOT HERO PHOTO + RATED-AT-TOP SCORECARD ============ */
.spothero{position:relative;margin:0 0 14px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--panel);aspect-ratio:1/1;max-width:220px;overflow:hidden}
.spothero img{width:100%;height:100%;object-fit:cover;display:block}
.spothero .hd{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);font-size:9.5px;font-weight:700;padding:3px 8px;letter-spacing:.03em}
.spothero .hedit{position:absolute;top:8px;right:8px;background:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-size:10.5px;font-weight:700;color:var(--ink);padding:4px 8px;cursor:pointer;font-family:inherit}
.addphoto{margin:0 0 14px;border:2px dashed var(--ink);background:var(--panel);padding:16px 14px;text-align:center;cursor:pointer;width:100%;font-family:inherit;display:block}
.addphoto .pm{font-size:26px;line-height:1}
.addphoto .pt{font-weight:700;font-size:13px;color:var(--ink);margin-top:6px}
.addphoto .ps{font-size:11px;font-weight:600;color:var(--muted);margin-top:3px}
.ratedtop{border:2px solid var(--ink);background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--red);padding:12px 14px;margin:0 0 14px;display:flex;align-items:center;gap:14px}
.ratedtop .big{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;flex:0 0 auto}
.ratedtop .big small{font-size:14px;font-weight:700;color:var(--sodium)}
.ratedtop .ri{flex:1;min-width:0}
.ratedtop .rk{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sodium)}
.ratedtop .rn{font-size:12px;font-weight:600;color:var(--paper);margin-top:2px;line-height:1.35}
.ratedtop .rn b{color:#fff}
.spotscore{margin:0 0 16px;padding:13px 15px;border:2px solid var(--ink);background:var(--panel);box-shadow:3px 3px 0 var(--ink)}
.spotscore .ssh{font-family:'Permanent Marker',cursive;color:var(--red);font-size:15px;margin-bottom:2px}
.spotscore .ssn{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:8px}

/* ============ PHOTO CROPPER ============ */
.cropper{position:absolute;inset:0;z-index:95;background:rgba(20,16,12,.9);display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.cropper.open{display:flex}
.cropbar{width:100%;max-width:340px;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cropbar .cropx{width:38px;height:38px;border:2px solid var(--paper);background:transparent;color:var(--paper);cursor:pointer;font-weight:700;font-size:15px;font-family:inherit}
.cropbar .cropt{color:var(--paper);font-weight:700;font-size:15px}
.cropstage{width:300px;height:300px;max-width:80vw;max-height:80vw;position:relative;overflow:hidden;background:#000;border:2px solid var(--paper);touch-action:none;cursor:grab}
.cropstage:active{cursor:grabbing}
.cropstage #cropImg{position:absolute;user-select:none;-webkit-user-drag:none;max-width:none}
.cropframe{position:absolute;inset:0;pointer-events:none;box-shadow:0 0 0 2000px rgba(0,0,0,.35) inset;border:2px dashed rgba(245,240,228,.8)}
.cropctrls{width:100%;max-width:340px;margin-top:16px}
.cropzoomrow{display:flex;align-items:center;gap:10px;color:var(--paper);font-weight:700}
.cropzoomrow input{flex:1;accent-color:var(--red);height:30px}
.cropnote{color:rgba(245,240,228,.7);font-size:11px;font-weight:600;text-align:center;margin:10px 0 12px}

/* ============ MESSAGE THREAD ============ */
.thbar{display:flex;align-items:center;gap:11px;padding:4px 0 12px;border-bottom:2px solid var(--ink);margin-bottom:14px}
.thbar .back{width:36px;height:36px;flex:0 0 auto;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);cursor:pointer;font-weight:700;font-size:15px;color:var(--ink);font-family:inherit}
.thbar .tav{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:13px}
.thbar .tn{flex:1;min-width:0;font-weight:700;font-size:15px}
.thbar .tn small{display:block;font-size:10.5px;color:var(--muted);font-weight:600}
.bubbles{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.bub{max-width:78%;padding:9px 12px;border:2px solid var(--ink);font-size:13px;line-height:1.4;font-weight:500}
.bub.them{align-self:flex-start;background:#fff;box-shadow:2px 2px 0 var(--ink)}
.bub.me{align-self:flex-end;background:var(--sodium);box-shadow:-2px 2px 0 var(--ink)}
.msgcompose{position:sticky;bottom:0;background:var(--paper);border-top:2px solid var(--ink);padding:12px 0 4px;display:flex;gap:8px}
.msgcompose input{flex:1;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);padding:11px 12px;font:600 14px 'Space Grotesk',sans-serif;color:var(--ink);min-width:0}

/* ============ RIDER PROFILE + BIKES ============ */
.profhead{display:flex;align-items:center;gap:14px;border:2px solid var(--ink);background:var(--panel);box-shadow:3px 3px 0 var(--ink);padding:14px;margin:0 0 16px}
.profhead .pav{width:60px;height:60px;flex:0 0 auto;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:22px;background:var(--red);color:#fff}
.profhead .pi{flex:1;min-width:0}
.profhead .pn{font-weight:700;font-size:19px;line-height:1.1}
.profhead .pm{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:4px}
.profstats{display:flex;gap:8px;margin:0 0 18px}
.profstats .sc{flex:1;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);padding:10px 8px;text-align:center}
.profstats .sc .n{font-size:20px;font-weight:700;line-height:1}
.profstats .sc .l{font-size:8.5px;font-weight:800;letter-spacing:.05em;color:var(--muted);margin-top:3px;text-transform:uppercase}
.bikerow{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);padding:10px 12px;margin-bottom:8px}
.bikerow .bx{flex:0 0 auto;font-size:16px}
.bikerow .bt{flex:1;font-size:12.5px;font-weight:700;color:var(--ink)}
.bikerow input.bt{border:0;outline:none;background:transparent;font-family:inherit;font-weight:700;font-size:12.5px;min-width:0}
.bikerow .bdel{font-size:12px;font-weight:700;color:var(--red);cursor:pointer;background:none;border:0;font-family:inherit}

/* ============ PARK HQ (full-screen owner takeover) ============ */
.hq{position:absolute;inset:0;z-index:70;background:var(--paper);display:flex;flex-direction:column;
  transform:translateY(103%);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.hq.open{transform:translateY(0)}
.hqbar{flex:0 0 auto;background:var(--ink);color:var(--paper);padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;
  display:flex;align-items:center;gap:10px}
.hqmark{background:var(--red);color:#fff;font-weight:700;font-size:10px;padding:2px 6px;border:1.5px solid var(--paper)}
.hqtitle{flex:1;min-width:0}
.hqk{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sodium)}
.hqn{font-weight:700;font-size:15px;line-height:1.15}
.hqback,.hqclose{flex:0 0 auto;width:34px;height:34px;border:2px solid var(--paper);background:transparent;color:var(--paper);
  cursor:pointer;display:grid;place-items:center;font-weight:700;font-size:14px}
.hqback{display:none}
.hq[data-screen]:not([data-screen="home"]) .hqback{display:grid}
.hqscroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 18px calc(env(safe-area-inset-bottom,0px) + 24px)}
.hqcard{border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:13px 14px;margin-bottom:14px}
.hqcard .hck{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hqcard .hcv{font-size:17px;font-weight:700;margin-top:2px}
.switch{flex:0 0 auto;width:58px;height:32px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);position:relative;cursor:pointer;background:var(--ok);padding:0}
.switch i{position:absolute;top:2px;right:3px;width:22px;height:22px;background:var(--paper);border:2px solid var(--ink)}
.switch[aria-pressed="false"]{background:var(--red)}
.switch[aria-pressed="false"] i{right:auto;left:3px}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.qgrid .btn{justify-content:flex-start;padding:12px 10px;font-size:13px}
.navlist{border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);margin-bottom:14px}
.navrow{display:flex;align-items:center;gap:10px;padding:12px 13px;border-bottom:2px solid var(--ink);cursor:pointer;width:100%;background:none;border-left:0;border-right:0;border-top:0;font-family:inherit;text-align:left}
.navlist .navrow:last-child{border-bottom:0}
.navrow .nt{flex:1;font-weight:700;font-size:13.5px;color:var(--ink)}
.navrow .nx{font-size:11px;font-weight:600;color:var(--muted)}
.navrow .na{color:var(--red);font-weight:700}
.hourrow{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px dashed rgba(26,23,19,.28)}
.hourrow:last-child{border-bottom:0}
.hourrow b.d{flex:0 0 44px;font-size:12px}
.hourrow .h{flex:1;font-size:12.5px;font-weight:600;color:var(--body)}
.hourrow .h .closedtx{font-weight:800;color:var(--red)}
.hourrow.closedrow{background:#F5E9C8}
.hourrow .edit{font-size:11px;font-weight:700;color:var(--red);cursor:pointer;background:none;border:0;font-family:inherit;padding:4px}
.exrow{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);padding:9px 12px;margin-bottom:7px}
.exrow .xt{flex:1;font-size:12.5px;font-weight:700}
.exrow .xt small{font-weight:600;color:var(--muted)}
.exrow .xdel{font-size:12px;font-weight:700;color:var(--red);cursor:pointer;background:none;border:0;font-family:inherit}
.field{width:100%;border:2px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);
  font:600 14px 'Space Grotesk',sans-serif;color:var(--ink);padding:11px 12px;min-height:46px}
.field:focus{outline:none;box-shadow:2px 2px 0 var(--red)}
textarea.field{resize:vertical;min-height:64px;line-height:1.5}
.field::placeholder{color:var(--muted);font-weight:500}
.sevseg{display:flex;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);margin-bottom:9px}
.sevseg button{flex:1;min-height:42px;border:0;border-right:2px solid var(--ink);background:#fff;font-weight:700;font-size:12px;cursor:pointer;color:var(--ink)}
.sevseg button:last-child{border-right:0}
.sevseg button.sevwarn[aria-pressed="true"]{background:var(--sodium)}
.sevseg button.sevinfo[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sevseg button.sevclosure{color:var(--red)}
.sevseg button.sevclosure[aria-pressed="true"]{background:var(--red);color:#fff}
.expchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px;align-items:center}
.expchips .xl{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.expchips button{cursor:pointer;font-weight:700;font-size:11px;border:2px solid var(--ink);background:#fff;color:var(--ink);padding:5px 9px;font-family:inherit}
.expchips button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.checkline{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer}
.checkline .box{width:20px;height:20px;border:2px solid var(--ink);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;background:#fff;flex:0 0 auto}
.checkline .box.on{background:var(--ok)}
.checkline .tx{font-size:12px;font-weight:600;color:var(--body)}
.bars{display:flex;align-items:flex-end;gap:5px;height:64px}
.bars .bc{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;height:100%}
.bars .bc i{display:block;width:100%;border:1.5px solid var(--ink);background:var(--amber)}
.bars .bc i.top{background:var(--t5)}
.bars .bc i.max{background:var(--red)}
.bars .bc i.off{background:var(--panel);border-style:dashed;border-color:var(--muted)}
.bars .bc span{font-size:8px;font-weight:800;color:var(--muted)}
.insrow{display:flex;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px dashed rgba(26,23,19,.28)}
.insrow span{font-size:11px;font-weight:600;color:var(--body)}
.insrow b{font-size:14px}
/* ============ DESKTOP: sheet docks as left rail (as live) ============ */
@media(min-width:880px){
  .sheet{left:16px;right:auto;top:16px;bottom:16px;width:390px;max-height:none;
    border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(26,23,19,.85);
    transform:translateX(calc(-100% - 40px));transition:transform .4s cubic-bezier(.22,.61,.36,1)}
  .sheet.open{transform:translateX(0)}
  .sheet::before{display:none}
  .grab{display:none}
  .sheet-scroll{padding:18px 22px 24px}
  .scrim{background:transparent}
  .scrim.show{visibility:hidden}
  .topbar{padding-left:16px;padding-right:16px}
  .searchpill{max-width:520px}
  .hq{left:auto;right:0;width:440px;border-left:2px solid var(--ink);box-shadow:-8px 0 0 rgba(26,23,19,.35);
    transform:translateX(103%)}
  .hq.open{transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}

/* ============================================================
   FEEL TWEAKS — 3 expressive controls that reshape the whole mood
   (paper stock · print quality · hand-placed wonk). Non-DC test build,
   so this lives here + a small inline script in index.html.
============================================================ */
/* --- paper stock: a full-scene tint wash + fibre, blended over everything
       below it (map, chrome, sheet) but under the controls (fab/panel/snack) --- */
#feelWash{position:absolute;inset:0;z-index:80;pointer-events:none;mix-blend-mode:multiply;opacity:0;transition:opacity .45s, background .45s}
#feelFibre{position:absolute;inset:0;z-index:79;pointer-events:none;mix-blend-mode:multiply;opacity:var(--fibre-op,0);transition:opacity .3s;
  background-image:repeating-linear-gradient(0deg,rgba(26,23,19,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(26,23,19,.038) 0 1px,transparent 1px 4px)}
body[data-paper="news"] #feelWash{opacity:.5;background:#c4cad6}          /* cool newsprint */
body[data-paper="dusk"] #feelWash{opacity:.72;background:#a96e1c}         /* sodium dusk — golden hour */
/* --- print quality: grain density rides --grain-op --- */
.grain{background-image:radial-gradient(rgba(var(--grain-rgb,26,23,19),var(--grain-op,.05)) 1px,transparent 1px);background-size:var(--grain-size,5px) var(--grain-size,5px)}
/* --- hand-placed wonk: rotate the chrome so it looks stuck down by hand --- */
.searchpill{transform:rotate(calc(var(--wonk,0) * -0.7deg))}
.filterbtn{transform:rotate(calc(var(--wonk,0) * 1deg))}
.substrip .resultchip{transform:rotate(calc(var(--wonk,0) * -1.4deg))}
.zoomcol{transform:rotate(calc(var(--wonk,0) * 0.7deg))}
.submitfab{transform:rotate(calc(var(--wonk,0) * -0.7deg))}
.miscrow .miscbtn:nth-child(1){transform:rotate(calc(var(--wonk,0) * -1.1deg))}
.miscrow .miscbtn:nth-child(2){transform:rotate(calc(var(--wonk,0) * 0.9deg))}
.miscrow .miscbtn:nth-child(3){transform:rotate(calc(var(--wonk,0) * -0.7deg))}
.layerswitch{transform:rotate(calc(var(--wonk,0) * 0.9deg))}
.acctpill{transform:rotate(calc(var(--wonk,0) * -0.8deg))}
.railburger{transform:rotate(calc(var(--wonk,0) * 1.2deg))}
.rail .railicon:nth-of-type(1){transform:rotate(calc(var(--wonk,0) * -1deg))}
.rail .railicon:nth-of-type(2){transform:rotate(calc(var(--wonk,0) * 1.1deg))}
.attribution{transform:rotate(calc(var(--wonk,0) * -0.9deg))}

/* --- the tweaks launcher + panel (zine-styled) --- */
.feelfab{position:absolute;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 118px);z-index:82;
  border:2px solid var(--ink);background:var(--sodium);box-shadow:3px 3px 0 var(--ink);cursor:pointer;
  font-weight:700;font-size:12px;color:var(--ink);padding:9px 12px;display:flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif}
.feelfab .fp{font-family:'Permanent Marker',cursive;color:var(--red);font-size:14px}
.feelfab.hide{display:none}
.feelpanel{position:absolute;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 118px);z-index:98;width:266px;max-width:calc(100vw - 24px);
  background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  transform:translateY(10px) scale(.98);opacity:0;visibility:hidden;transition:transform .22s,opacity .22s,visibility .22s}
.feelpanel.open{transform:none;opacity:1;visibility:visible}
.feelhead{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--paper);padding:9px 12px}
.feelhead .ft{font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px}
.feelhead .ft .sc{font-family:'Permanent Marker',cursive;color:var(--sodium);font-size:15px}
.feelhead .fx{width:26px;height:26px;border:2px solid var(--paper);background:transparent;color:var(--paper);cursor:pointer;font-weight:700;font-size:13px;font-family:inherit}
.feelbody{padding:13px}
.feelrow{margin-bottom:15px}
.feelrow:last-child{margin-bottom:0}
.feell{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.feell b{color:var(--ink);font-family:'Permanent Marker',cursive;letter-spacing:0;text-transform:none;font-size:12px;font-weight:400}
.feelseg{display:flex;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.feelseg button{flex:1;border:0;border-right:2px solid var(--ink);background:#fff;font-weight:700;font-size:11px;cursor:pointer;color:var(--ink);padding:9px 4px;font-family:inherit;min-height:40px}
.feelseg button:last-child{border-right:0}
.feelseg button[aria-pressed="true"]{background:var(--sodium)}
.feelrange{width:100%;accent-color:var(--red);height:26px;margin:0}
.feelnote{font-size:10px;font-weight:600;color:var(--muted);text-align:center;margin:11px 0 0;border-top:1px dashed rgba(26,23,19,.28);padding-top:9px}

/* ===== live-map bridges: real MapLibre markers are .tb-marker > .pin ===== */
.pkini{fill:var(--ink);font:700 12px 'Space Grotesk',sans-serif;text-anchor:middle}
.rday{fill:var(--ink);font:800 9px 'Space Grotesk',sans-serif;text-anchor:middle}
.hq,.cropper,.feelpanel{z-index:95}
#feelWash,#feelFibre{z-index:80}.feelfab{z-index:82}

/* Park HQ is a full takeover — hide the shared site-nav burger so it can't
   overlap the HQ close button (owner feedback). */
html.tb-hq-open #tbSiteNav{display:none}

/* rating tag on a pin: weighted ★ shown on a toast slice (burnt->golden) with
   a fire emoji behind it (owner request). Replaces the plain toast corner tag. */
.ratetag{position:absolute;top:-11px;right:-15px;display:inline-flex;align-items:center;gap:1px;
  border:2px solid var(--ink);background:var(--paper);padding:1px 5px 1px 3px;border-radius:999px;
  box-shadow:1.5px 1.5px 0 rgba(26,23,19,.6);transform:rotate(6deg);z-index:2}
.ratetag .rt-slice{position:relative;display:inline-block;width:16px;height:16px;flex:0 0 auto}
.ratetag .rt-fire{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);font-size:14px;opacity:.7;z-index:0;pointer-events:none}
.ratetag .rt-slice svg{position:relative;z-index:1;width:15px;height:15px;display:block}
.ratetag b{font-size:10.5px;font-weight:800;color:var(--ink)}

/* ANON GATE — blurred south-coast backdrop + sign-in-to-view card (map/tiles gated) */
/* overflow:hidden because .ag-bg below is inset:0 with transform:scale(1.12) — it
   visually spills ~6% past every edge, and without clipping that can create real
   horizontal overflow and push the centred card off to one side on narrow screens. */
/* overflow:hidden because .ag-bg is inset:0 with transform:scale(1.12), so it spills
   past every edge; clipping it is correct for a full-screen overlay. */
#anonGate{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:22px;overflow:hidden}
#anonGate .ag-bg{position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(210,44,38,.16),rgba(26,23,19,.42)),#d9ddd6 url('assets/anon-bg.jpg') center/cover no-repeat;
  filter:blur(11px) saturate(1.06);transform:scale(1.12)}
#anonGate .ag-card{position:relative;background:var(--paper,#F5F0E4);color:var(--ink,#1A1713);
  border:2px solid var(--ink,#1A1713);box-shadow:6px 6px 0 var(--red,#D22C26);padding:26px 24px;
  max-width:360px;width:100%;text-align:center;animation:agIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes agIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#anonGate .ag-kick{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--red,#D22C26);text-transform:uppercase;margin-bottom:6px}
#anonGate .ag-h{margin:0 0 8px;font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
#anonGate .ag-sub{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--muted,#6d675c)}
/* Locked preview of the map's toolset, so a visitor sees what signing up unlocks
   instead of a bare wall. Decorative only (aria-hidden) — the real controls can't be
   shown because the map isn't booted for anon, so they'd sit over an empty void. */
#anonGate .ag-tease{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 12px}
#anonGate .ag-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:9px 3px;border:2px solid var(--ink,#1A1713);border-radius:11px;
  background:rgba(26,23,19,.05);opacity:.75}
#anonGate .ag-ic{font-size:17px;line-height:1;filter:grayscale(.25)}
#anonGate .ag-lb{font-size:9.5px;font-weight:700;line-height:1.22;text-align:center;letter-spacing:.01em}
#anonGate .ag-unlock{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--red,#D22C26);text-transform:uppercase}
@media (max-width:360px){#anonGate .ag-tease{grid-template-columns:repeat(2,1fr)}}
#anonGate .ag-btn{display:block;width:100%;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;
  border:2px solid var(--ink,#1A1713);background:#fff;color:var(--ink,#1A1713);padding:11px 16px;margin-top:10px;
  box-shadow:3px 3px 0 var(--ink,#1A1713);transition:transform .12s,box-shadow .12s}
#anonGate .ag-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink,#1A1713)}
#anonGate .ag-btn.ag-red{background:var(--red,#D22C26);color:#fff}
@media (prefers-reduced-motion:reduce){#anonGate .ag-card{animation:none}}

/* ============================================================
   STARTERS GUIDE — role-based first-run onboarding (docs/26).
   Full-screen slide-up cloned from the .hq anatomy; z-65 sits above
   the sheet(60)/scrim(50), below toasts(70) and .hq/cropper(95).
============================================================ */
.guide{position:absolute;inset:0;z-index:65;background:var(--paper);display:flex;flex-direction:column;
  transform:translateY(103%);transition:transform .38s cubic-bezier(.22,.9,.3,1)}
.guide.open{transform:translateY(0)}
.gd-bar{flex:0 0 auto;background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px}
.gd-title{flex:1;min-width:0}
.gd-kick{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sodium)}
.gd-name{font-weight:700;font-size:15px;line-height:1.15}
.gd-close{flex:0 0 auto;width:34px;height:34px;border:2px solid var(--paper);background:transparent;color:var(--paper);
  display:grid;place-items:center;cursor:pointer;font-size:14px;font-family:inherit}
.gd-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 18px 12px}
.gd-img{width:100%;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);margin:0 0 14px;display:block}
.gd-stepno{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--red);text-transform:uppercase;margin-bottom:6px}
.gd-h{margin:0 0 8px;font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.12}
.gd-body{margin:0;font-size:14.5px;line-height:1.55;color:var(--body)}
.gd-foot{flex:0 0 auto;display:flex;align-items:center;gap:10px;border-top:2px solid var(--ink);background:var(--panel);
  padding:12px 18px calc(env(safe-area-inset-bottom,0px) + 14px)}
.gd-foot .btn{min-width:86px;justify-content:center}
.gd-dots{flex:1;display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.gd-dots i{width:7px;height:7px;border:1.5px solid var(--ink);border-radius:50%;background:transparent}
.gd-dots i.on{background:var(--red);border-color:var(--red)}
@media (prefers-reduced-motion:reduce){.guide{transition:none}}

/* ── review list v2: filter chips + show-more (2026-07-14) ── */
.revfilters{margin:2px 0 12px}
.revfilters .tchip small{font-weight:600;opacity:.7;margin-left:3px}
.rev-more{margin-top:10px;font-size:13px;padding:10px}