/* Trek Eleven web app. One light look: white, ink, one magenta point. Archivo only (expanded ExtraBold for big titles).
   Same tokens as the website (site/assets/site.css). Light theme only, on purpose: every colour is explicit. */

:root{
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:#FFFFFF; --surface:#F5F6F8; --surface-2:#ECEEF1; --fg:#0B0F14; --muted:#5B6470; --faint:#8A939E; --line:#E5E8EC; --line-2:#D3D8DF; --white:#FFFFFF;
  --mag:#D0156E; --mag-d:#B80F5F; --mag-soft:rgba(208,21,110,.08); --mag-line:rgba(208,21,110,.28); --on-mag:#FFFFFF;
  --sh-1:0 1px 2px rgba(11,15,20,.06),0 6px 16px -4px rgba(11,15,20,.1);
  --sh-2:0 1px 1px rgba(11,15,20,.05),0 8px 16px -6px rgba(11,15,20,.14),0 24px 48px -16px rgba(11,15,20,.26);
  --sh-float:0 1px 2px rgba(11,15,20,.08),0 8px 24px -6px rgba(11,15,20,.22);
  --sh-sheet:0 -1px 0 rgba(11,15,20,.04),0 -12px 40px -8px rgba(11,15,20,.22);
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); --spring-soft:cubic-bezier(.32,1.12,.5,1);
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  --tab:62px; --peek:0px; --panel:440px;
  --top:calc(var(--st) + 74px); /* the bottom of the top bar on the map page: the search bar and filter button (10 + 54 + 10 below the safe area). Keep in step with TOP_BAR in js/map.js */
  --lift:28px; /* how far the List and where-am-I buttons float above the tab bar */
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scrollbar-width:thin}
.view,.ss-scroll,.ms-body{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
body{margin:0;background-color:var(--bg);color:var(--fg);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
img,svg{max-width:100%}
img{display:block}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line-2)}
a:hover{text-decoration-color:var(--mag)}
p,ul,ol,dl,figure,h1,h2,h3,h4{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--mag);outline-offset:2px;border-radius:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.fill{fill:currentColor;stroke:none}
.display{font-stretch:118%;font-weight:800;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.dot{color:var(--mag)}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

.app{position:fixed;inset:0;overflow:hidden;background:var(--bg)}

/* ---------- map ---------- */
.mapwrap{position:absolute;inset:0;background:#F5F6F7;z-index:0}
.map{position:absolute;inset:0}
.map .maplibregl-canvas{outline:0}
.map-note{position:absolute;left:50%;top:calc(var(--top) + 46px);transform:translateX(-50%);z-index:4;max-width:min(88%,360px);padding:10px 16px;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:var(--sh-float);font-size:13.5px;line-height:1.4;color:var(--muted);text-align:center;pointer-events:none}
.fab{position:absolute;z-index:12;right:var(--gr);bottom:calc(var(--tab) + var(--sb) + var(--peek) + var(--lift));width:50px;height:50px;border:0;border-radius:50%;background:#fff;color:var(--fg);display:grid;place-items:center;box-shadow:var(--sh-float);transition:transform .2s var(--ease),bottom .5s var(--spring-soft),opacity .25s,background .2s}
.fab .ic{width:22px;height:22px}
.fab:active{transform:scale(.92)}
.fab.on{background:var(--fg);color:#fff}
.fab.busy .ic{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.credit{position:absolute;z-index:11;left:0;bottom:calc(var(--tab) + var(--sb));margin:0;padding:2px 10px 3px var(--gl);border-radius:0 10px 0 0;background:rgba(255,255,255,.8);color:var(--muted);font-size:10.5px;font-weight:500;line-height:12px;letter-spacing:.005em;transition:bottom .5s var(--spring-soft)}
.credit a{position:relative;text-decoration:none}
.credit a::after{content:"";position:absolute;inset:-8px -6px -2px}
.credit a:hover{text-decoration:underline}
/* the OpenStreetMap credit is the corner of the map, level with the tab bar. A place or cluster sheet covers that corner, so then it rides up and sits on top of the sheet: it is never hidden */
@media (max-width:899px){
  .app.sheet-peek .credit,.app.cs-open .credit{bottom:calc(var(--tab) + var(--sb) + var(--peek) + 6px)}
}

/* ---------- shell: top bar, chips, tabs ---------- */
.shell{position:absolute;inset:0;z-index:10;pointer-events:none}
.shell>*{pointer-events:auto}
.topbar{position:absolute;z-index:4;left:0;right:0;top:0;padding:calc(var(--st) + 10px) 0 10px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;transition:background .3s,box-shadow .3s}
.searchrow{display:flex;gap:10px;padding:0 var(--gr) 0 var(--gl)}
.search{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:54px;padding:0 20px;border:0;border-radius:27px;background:#fff;color:var(--muted);font-size:16.5px;font-weight:500;text-align:left;box-shadow:var(--sh-float);transition:transform .2s var(--ease),box-shadow .2s}
.search .ic{width:21px;height:21px;color:var(--fg);flex:none}
.search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search:active{transform:scale(.985)}
/* a 320 px phone: a little less padding so "Search camps and towns" still fits beside the filter button */
@media (max-width:340px){
  .searchrow{gap:8px}
  .search{gap:9px;padding:0 14px;font-size:14.5px}
}
.search.has-q{color:var(--fg);font-weight:600}
.round{position:relative;flex:none;width:54px;height:54px;border:0;border-radius:50%;background:#fff;color:var(--fg);display:grid;place-items:center;box-shadow:var(--sh-float);transition:transform .2s var(--ease),background .2s}
.round .ic{width:22px;height:22px}
.round:active{transform:scale(.92)}
/* the filter button: its two knobs sit on top of the two lines, painted the colour of the button so the lines pass behind them, and slide across and back
   every 3 seconds (a small nudge) until the filter sheet has been opened once. js/explore.js paintNudge sets .nudge (and pauses it while the page is hidden). */
#filter-btn{--rb:#fff}
.fk{fill:var(--rb,#fff)}
.nudge .fk--a{animation:fk-a 3s cubic-bezier(.4,0,.2,1) infinite}
.nudge .fk--b{animation:fk-b 3s cubic-bezier(.4,0,.2,1) infinite}
.nudge-paused .fk{animation-play-state:paused}
@keyframes fk-a{0%{transform:translateX(0)}16%,28%{transform:translateX(-6px)}44%,100%{transform:translateX(0)}}
@keyframes fk-b{0%{transform:translateX(0)}16%,28%{transform:translateX(6px)}44%,100%{transform:translateX(0)}}
.round--s{width:44px;height:44px;box-shadow:none;background:var(--surface)}
.round--s .ic{width:20px;height:20px}
.badge{position:absolute;top:6px;right:6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--mag);color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center;box-shadow:0 0 0 2.5px #fff;animation:pop .5s var(--spring)}
@keyframes pop{from{transform:scale(0)}}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 17px;border:0;border-radius:21px;background:#fff;color:var(--fg);font-size:15px;font-weight:600;white-space:nowrap;box-shadow:var(--sh-float);transition:transform .2s var(--spring),background .2s,color .2s}
.chip .ic{width:17px;height:17px}
.chip:active{transform:scale(.94)}
.chip[aria-pressed="true"]{background:var(--fg);color:#fff;animation:chipin .45s var(--spring)}
@keyframes chipin{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

.views{position:absolute;z-index:1;inset:0;pointer-events:none}
.view{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--bg);pointer-events:auto;padding:var(--top) 0 calc(var(--tab) + var(--sb) + 96px)}
.view.view--page{padding-top:calc(var(--st) + 8px)}
.app[data-tab="explore"][data-mode="map"] #v-explore{display:none}

.toggle-pill{position:absolute;z-index:14;left:50%;bottom:calc(var(--tab) + var(--sb) + var(--lift));transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px 0 18px;border:0;border-radius:25px;background:var(--fg);color:#fff;font-size:16px;font-weight:700;box-shadow:0 1px 2px rgba(11,15,20,.2),0 14px 30px -8px rgba(11,15,20,.5);transition:transform .25s var(--spring),opacity .25s,bottom .5s var(--spring-soft)}
.toggle-pill .ic{width:19px;height:19px}
.toggle-pill b{font-weight:600;opacity:.62;font-variant-numeric:tabular-nums;min-width:2ch}
.toggle-pill:active{transform:translateX(-50%) scale(.94)}
.app:not([data-tab="explore"]) .toggle-pill,.app:not([data-tab="explore"]) .topbar,.app:not([data-tab="explore"]) .fab,.app:not([data-tab="explore"]) .credit{display:none}
.app:not([data-tab="explore"]) .mapwrap{visibility:hidden}
.app.sheet-peek .toggle-pill{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(20px)}
.app.sheet-full .shell .topbar{pointer-events:none}

/* list mode: white sheet under a solid top bar */
.app[data-tab="explore"][data-mode="list"] .topbar{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--line)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .app[data-tab="explore"][data-mode="list"] .topbar{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
}
.app[data-mode="list"] .search,.app[data-mode="list"] .round,.app[data-mode="list"] .chip{box-shadow:none;background:var(--surface)}
.app[data-mode="list"] .chip[aria-pressed="true"]{background:var(--fg)}
.app[data-mode="list"] #filter-btn{--rb:var(--surface)}
.app[data-mode="list"] .fab,.app[data-mode="list"] .credit{display:none}

.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:21;display:grid;grid-template-columns:repeat(3,1fr);height:calc(var(--tab) + var(--sb));padding:0 max(8px,env(safe-area-inset-left,0px)) var(--sb) max(8px,env(safe-area-inset-right,0px));background:rgba(255,255,255,.96);border-top:1px solid var(--line)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .tabbar{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
}
.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:.01em;transition:color .2s,transform .2s var(--spring)}
.tabbar button .ti{display:grid;place-items:center;width:30px;height:28px}
.tabbar button .ic{width:25px;height:25px;stroke-width:1.9}
.tabbar button:active{transform:scale(.9)}
.tabbar button[aria-current="page"]{color:var(--fg)}
.tabbar button[aria-current="page"] .ic{stroke-width:2.2}
.tabbar button::before{content:"";position:absolute;top:5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--mag);transform:scale(0);transition:transform .4s var(--spring)}
.tabbar button[aria-current="page"]::before{transform:scale(1)}
.tabbar button .ti{margin-top:6px}

/* ---------- buttons ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 26px;border:0;border-radius:99px;background:var(--mag);color:var(--on-mag);font-size:16.5px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;transition:transform .2s var(--spring),background .2s,box-shadow .2s,opacity .2s}
.btn .ic{width:19px;height:19px}
.btn:active{transform:scale(.95);transition-duration:.08s}
.btn--ink{background:var(--fg)}
.btn--soft{background:var(--surface);color:var(--fg)}
.btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn--white{background:#fff;color:var(--fg)}
.btn--sm{min-height:44px;padding:0 18px;font-size:15px}
.btn--block{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}
@media (hover:hover){
  .btn:hover{transform:translateY(-1px)}
  .btn:not(.btn--ink):not(.btn--soft):not(.btn--ghost):not(.btn--white):hover{background:var(--mag-d)}
  .btn--ink:hover{box-shadow:0 12px 24px -10px rgba(11,15,20,.55)}
  .btn--soft:hover{background:var(--surface-2)}
  .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--fg)}
  .chip:hover{background:#F3F4F6}.chip[aria-pressed="true"]:hover{background:#1c232c}
}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1.25;padding:6px 11px;border-radius:99px;background:var(--surface);color:var(--fg)}
.tag .ic{width:14px;height:14px}
.tag--mag{background:var(--mag-soft);color:var(--mag-d)}
.tag--dash{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
.tag--ink{background:var(--fg);color:#fff}

/* ---------- list rows ---------- */
.listhead{padding:12px var(--gr) 10px var(--gl);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--muted)}
.listhead b{color:var(--fg);font-weight:700}
.lh-t{display:grid;gap:1px;min-width:0}
.lh-t small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.nearbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 6px 0 14px;border:0;border-radius:18px;background:var(--surface);font-size:14px;font-weight:700;color:var(--fg);transition:transform .2s var(--spring)}
.nearbtn:active{transform:scale(.94)}
.nearbtn .ic{width:17px;height:17px}
.row{position:relative;animation:rowin .5s var(--ease) both;animation-delay:calc(var(--i,0)*28ms)}
@keyframes rowin{from{opacity:0;transform:translateY(10px)}}
.row+.row::before{content:"";position:absolute;left:calc(var(--gl) + 70px);right:var(--gr);top:0;height:1px;background:var(--line);pointer-events:none}
.row-main{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:14px calc(var(--gr) + 46px) 14px var(--gl);border:0;background:none;text-align:left;transition:background .2s}
.row-main:active{background:var(--surface)}
@media (hover:hover){.row-main:hover{background:var(--surface)}}
.row .save-btn{position:absolute;right:calc(var(--gr) - 8px);top:50%;margin-top:-22px}
.tile{position:relative;width:56px;height:56px;border-radius:17px;background:var(--surface);color:var(--fg);display:grid;place-items:center}
.tile .ic{width:25px;height:25px}
.tile .mp{position:absolute;right:5px;top:5px;width:11px;height:11px;border-radius:3.5px;background:var(--mag)}
.tile--ink{background:var(--fg);color:#fff}
.tile--stop{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.row-t{min-width:0}
.row-n{font-size:17px;font-weight:700;line-height:1.22;letter-spacing:-.012em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-n.un{color:var(--muted);font-weight:600}
.row-m{font-size:14px;line-height:1.35;color:var(--muted);margin-top:2px}
.row-f{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.row-clos{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:8px}
.row-clos-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.35;color:var(--fg)}
.mini{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border-radius:99px;background:var(--surface);font-size:12.5px;font-weight:600;color:var(--fg)}
.mini .ic{width:13px;height:13px}
.mini--mag{background:var(--mag-soft);color:var(--mag-d)}
.mini--dash{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
.mini--ink{background:var(--fg);color:#fff}
.mini--fade{color:var(--faint)}
.save-btn{width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--fg);display:grid;place-items:center;transition:transform .3s var(--spring),color .2s}
.save-btn .ic{width:22px;height:22px}
.save-btn:active{transform:scale(.85)}
.save-btn.on{color:var(--mag)}
.save-btn.on .ic{fill:currentColor}
.save-btn.pop .ic{animation:savepop .55s var(--spring)}
@keyframes savepop{0%{transform:scale(.7)}50%{transform:scale(1.3) rotate(-8deg)}100%{transform:scale(1)}}
.list-more{padding:18px var(--gr) 0 var(--gl);display:grid;place-items:center}
.empty{margin:14px var(--gr) 0 var(--gl);padding:28px 24px;border-radius:26px;background:var(--surface);text-align:center;display:grid;gap:8px;justify-items:center}
.empty h3{font-stretch:108%;font-weight:800;font-size:21px;letter-spacing:-.02em;line-height:1.15}
.empty p{color:var(--muted);max-width:26em}
.empty .btn{margin-top:10px}
.empty .eico{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-1);margin-bottom:6px}
.empty .eico .ic{width:26px;height:26px}

/* ---------- screens: saved, you ---------- */
.scr-h{padding:14px var(--gr) 6px var(--gl)}
.scr-h h1{font-stretch:118%;font-weight:800;font-size:32px;letter-spacing:-.035em;line-height:1.05}
.scr-h p{color:var(--muted);margin-top:6px;font-size:15.5px}
.sec{padding:22px var(--gr) 0 var(--gl)}
.sec>h2{font-size:15px;font-weight:700;color:var(--muted);margin-bottom:6px;letter-spacing:.005em}
.group{border-radius:24px;background:var(--surface);overflow:hidden}
.set{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:12px 16px 12px 14px;border:0;background:none;text-align:left;font-size:16.5px;font-weight:600;color:var(--fg);text-decoration:none;transition:background .2s}
.set+.set::before{content:"";position:absolute;left:62px;right:0;top:0;height:1px;background:var(--line-2);opacity:.7}
.set:active{background:var(--surface-2)}
.set .si{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-1)}
.set .si .ic{width:19px;height:19px}
.set .st{flex:1;min-width:0}
.set .st small{display:block;font-size:13.5px;font-weight:400;color:var(--muted);line-height:1.35;margin-top:1px}
.set .go{color:var(--faint)}
.set .go .ic{width:18px;height:18px}
.set .val{font-size:14.5px;font-weight:500;color:var(--muted)}
.foot-note{padding:22px var(--gr) 0 var(--gl);font-size:13.5px;line-height:1.55;color:var(--muted)}
.foot-note a{color:var(--fg)}

/* points card (same family as the website's) */
.pts2{position:relative;margin:8px var(--gr) 0 var(--gl);background:var(--fg);color:#fff;border-radius:30px;padding:22px 22px 20px;overflow:hidden;isolation:isolate;box-shadow:var(--sh-2)}
.pts2::before{content:"";position:absolute;z-index:-1;right:-30%;top:-40%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(208,21,110,.42) 0%,rgba(208,21,110,0) 62%)}
.pts-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pts-who{display:flex;align-items:center;gap:12px;min-width:0}
.pts-av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--fg);font-weight:800;font-size:19px}
.pts-who b{display:block;font-size:17px;line-height:1.2}
.pts-who>div>span{font-size:13.5px;color:rgba(255,255,255,.66)}
.pts-level{display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 10px;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:700;white-space:nowrap}
.pts-level .ic{width:15px;height:15px;fill:var(--mag);stroke:none}
.pts-score{display:flex;align-items:baseline;gap:10px;margin-top:22px}
.pts-num{font-stretch:118%;font-weight:800;font-size:64px;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pts-unit{font-size:17px;color:rgba(255,255,255,.66);font-weight:500}
.pts-prog{margin-top:16px;height:12px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.pts-prog i{display:block;height:100%;width:var(--p,0%);border-radius:99px;background:linear-gradient(90deg,var(--mag),#EC3C93);transition:width .9s var(--ease)}
.pts-next{margin-top:10px;font-size:14.5px;color:rgba(255,255,255,.7)}
.pts-steps{margin:16px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pts-steps li{display:flex;flex-direction:column;gap:7px;align-items:flex-start;font-size:12px;line-height:1.2;color:rgba(255,255,255,.42);font-weight:500;white-space:nowrap}
.pts-steps li::before{content:"";width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.pts-steps li:nth-child(2),.pts-steps li:nth-child(3){align-items:center}
.pts-steps li:last-child{align-items:flex-end}
.pts-steps .is-past{color:rgba(255,255,255,.7)}
.pts-steps .is-past::before{background:var(--mag)}
.pts-steps .is-now{color:#fff;font-weight:700}
.pts-steps .is-now::before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.earn{display:grid;gap:8px}
.earn li{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:20px;background:var(--surface)}
.earn .ei{flex:none;width:44px;height:44px;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-1)}
.earn .ei .ic{width:21px;height:21px}
.earn b{display:block;font-size:15.5px;line-height:1.25}
.earn span.s{display:block;font-size:13.5px;line-height:1.35;color:var(--muted)}
.plus{margin-left:auto;flex:none;font-weight:800;font-size:14px;color:#fff;background:var(--mag);padding:6px 11px;border-radius:99px}
.plus--off{background:var(--surface-2);color:var(--muted)}
.activity li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.activity li:last-child{border:0}
.activity .ai{flex:none;width:40px;height:40px;border-radius:13px;background:var(--surface);display:grid;place-items:center}
.activity .ai .ic{width:20px;height:20px}
.activity b{display:block;font-size:15.5px;line-height:1.25}
.activity small{display:block;font-size:13px;color:var(--muted);line-height:1.35}

/* ---------- site sheet ---------- */
.ss{position:absolute;z-index:30;left:0;right:0;top:0;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:28px 28px 0 0;box-shadow:var(--sh-sheet);transform:translate3d(0,var(--y,100%),0);transition:transform .55s var(--spring-soft),border-radius .35s;will-change:transform}
.ss.dragging{transition:none}
.ss-grab{flex:none;display:grid;place-items:center;height:26px;cursor:grab;touch-action:none}
.ss-grab i{width:40px;height:5px;border-radius:3px;background:var(--line-2)}
.ss.is-full{border-radius:0}
.ss.is-full .ss-grab{display:none}
.ss-bar{position:absolute;z-index:6;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;padding:calc(var(--st) + 10px) var(--gr) 10px var(--gl);opacity:0;pointer-events:none;transition:opacity .25s,background .25s,box-shadow .25s}
.ss.is-full .ss-bar{opacity:1;pointer-events:auto}
.ss.is-full.scrolled .ss-bar{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--line)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.ss.is-full.scrolled .ss-bar{background:rgba(255,255,255,.93);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}}
.ss-bar-t{flex:1;min-width:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .3s var(--ease)}
.ss.scrolled .ss-bar-t{opacity:1;transform:none}
.ss-bar .round--s{background:rgba(255,255,255,.92);box-shadow:var(--sh-1)}
.ss-bar .save-btn.on{color:var(--mag)}
.ss-scroll{flex:1;min-height:0;overflow:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ss.is-full .ss-scroll{overflow-y:auto}
.ss-body{padding:0 0 calc(var(--sb) + 48px)}
.ss.is-peek .ss-body{pointer-events:auto}

/* ---------- the place screen (te-130): photo strip, name and one line, chips, big buttons, then everything folded or set small ---------- */
.gal{position:relative;height:270px;background:var(--surface-2)}
.gal-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.gal figure{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:center}
.gal img{width:100%;height:100%;object-fit:cover}
.gal figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,20,.4) 0%,rgba(11,15,20,0) 34%);pointer-events:none}
.gal figcaption{position:absolute;z-index:2;left:var(--gl);bottom:40px;max-width:calc(100% - 110px);font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.92);color:var(--fg)}
.gal-dots{position:absolute;z-index:3;right:var(--gr);bottom:46px;display:flex;justify-content:flex-end;gap:5px;pointer-events:none}
.gal-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);transition:width .3s var(--spring),background .2s}
.gal-dots i.on{width:18px;border-radius:6px;background:#fff}
.gal+.sp{position:relative;margin-top:-26px;padding-top:24px;background:#fff;border-radius:28px 28px 0 0}
.ss.is-full .gal+.sp{padding-top:24px}
/* no photo yet: a calm header with the colour tile of the kind of place and a small way to add the first one */
.gal--none{display:flex;align-items:center;justify-content:center;gap:18px;height:auto;min-height:210px;padding:calc(var(--st) + 44px) var(--gr) 40px var(--gl);background:var(--surface)}
.ktile{position:relative;flex:none;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;color:#fff}
.ktile .ic{width:30px;height:30px;stroke-width:2.2}
.ktile--camp{background:var(--k-camp)}
.ktile--van{background:var(--k-van)}
.ktile--priv{background:var(--k-priv-bg);color:var(--k-priv-ink)}
.ktile--stop{background:#fff;color:var(--fg);box-shadow:inset 0 0 0 2px var(--fg)}
.ktile--walk{background:#fff;color:var(--k-camp);border:2.5px dashed var(--k-camp)}
.ktile.te::after{content:"";position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:5px;background:var(--mag);box-shadow:0 0 0 3px var(--surface)}
.gal-n{display:grid;gap:8px;justify-items:start}
.gal-n b{font-size:15px;font-weight:700;color:var(--muted)}
.gal-add{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 17px 0 14px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:14.5px;font-weight:700;cursor:pointer;transition:transform .2s var(--spring)}
.gal-add .ic{width:18px;height:18px}
.gal-add:active{transform:scale(.95)}
.gal-add:focus-within{outline:3px solid var(--mag);outline-offset:2px}
/* the half sheet: the photo is a rounded card, short, so the name, chips and big button are all in view */
.ss.is-peek .gal{height:132px;margin:0 12px;border-radius:22px;overflow:hidden}
.ss.is-peek .gal-track{touch-action:pan-x}
.ss.is-peek .gal figcaption{left:10px;bottom:10px}
.ss.is-peek .gal-dots{right:14px;bottom:14px}
.ss.is-peek .gal--none{min-height:0;height:80px;padding:0 16px;gap:14px}
.ss.is-peek .gal--none .ktile{width:48px;height:48px;border-radius:15px}
.ss.is-peek .gal--none .ktile .ic{width:24px;height:24px}
.ss.is-peek .gal+.sp{margin-top:0;padding-top:14px;border-radius:0}
.sp{padding:2px var(--gr) 8px var(--gl)}
.ss.is-full .sp{padding-top:calc(var(--st) + 66px)}
.sp-head{display:flex;align-items:flex-start;gap:12px}
.sp-name{flex:1;min-width:0;font-stretch:114%;font-weight:800;font-size:28px;line-height:1.06;letter-spacing:-.035em;margin-top:4px;text-wrap:balance;overflow-wrap:anywhere}
.sp-name.un{color:#3a4350}
.ss.is-peek .sp-name{font-size:24px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-up{display:none;flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--surface);color:var(--fg);place-items:center}
.sp-up .ic{width:20px;height:20px}
.ss.is-peek .sp-up{display:grid}
.sp-linew{overflow:hidden;margin-top:7px}
.sp-line{display:flex;flex-wrap:wrap;margin-left:-16px;font-size:14.5px;line-height:1.4;color:var(--muted)}
.sp-line>span{position:relative;padding-left:16px}
.sp-line>span::before{content:"";position:absolute;left:6px;top:.62em;width:3px;height:3px;border-radius:50%;background:var(--faint)}
.sp-line .is-checked{color:var(--fg);font-weight:700}
.sp-line .is-checked i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:3px;background:var(--mag)}
.sp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sp>.clos{margin:2px 0 14px}
.ss.is-peek .clos-d,.ss.is-peek .clos-n,.ss.is-peek .clos-s,.ss.is-peek .clos-h .tag{display:none}
.ss.is-peek .clos-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:14.5px}
.ss.is-peek .sp>.clos{padding:12px 14px;margin:0 0 10px}
/* a short warning above the fold: a total fire ban, or official alerts near the place */
.warns{display:grid;gap:8px}
.warns:not(:empty){margin-top:12px}
.warn{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 14px 8px 10px;border:0;border-radius:18px;background:var(--fg);color:#fff;text-align:left;transition:transform .2s var(--spring)}
.warn:active{transform:scale(.98)}
.warn-i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--mag);display:grid;place-items:center}
.warn-i .ic{width:17px;height:17px}
.warn-t{flex:1;min-width:0}
.warn-t b{display:block;font-size:15px;line-height:1.25}
.warn-t small{display:block;font-size:12.5px;line-height:1.3;opacity:.78}
.warn>.ic{width:18px;height:18px;opacity:.7}
/* quick info: the price, then the few facilities that are known to be there */
.qi{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qi-c{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 11px;border-radius:99px;background:var(--surface);color:var(--fg);font-size:14px;font-weight:600;white-space:nowrap}
.qi-c .ic{width:16px;height:16px}
.qi-c--price{background:var(--fg);color:#fff;font-weight:700}
.qi-c.is-faded{opacity:.62}
.qi-c--price.is-faded{opacity:1}
.qi-mixed{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-right:-4px;border-radius:99px;background:var(--mag-soft);color:var(--mag-d);font-size:11.5px;font-weight:800;letter-spacing:.01em}
.qi-c--price .qi-mixed{background:rgba(255,255,255,.2);color:#fff}
.ss.is-peek .qi{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;touch-action:pan-x;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.ss.is-peek .qi::-webkit-scrollbar{display:none}
.ss.is-peek .qi-c{flex:none}
/* the big buttons: one big one, then a row of smaller ones */
.acts{display:grid;gap:10px;margin-top:14px}
.act-main{min-height:60px;padding:0 22px;font-size:17px}
.act-main>span{min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
.act-main small{display:block;font-size:12.5px;font-weight:500;opacity:.88;margin-top:3px;overflow:hidden;text-overflow:ellipsis}
.act-main--book{justify-content:space-between}
/* Book now with no booking link yet: shown, but greyed and not a link (Shane, 2026-10-21) */
.act-main--soon,.act-main--soon:disabled{background:var(--surface);color:var(--muted);box-shadow:none;cursor:default;opacity:1}
.act-main--soon small{opacity:1}
.acts2{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.act2{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:58px;padding:8px 2px;border:0;border-radius:18px;background:var(--surface);color:var(--fg);font-size:12.5px;font-weight:700;line-height:1.1;text-decoration:none;transition:transform .2s var(--spring),background .2s}
.act2 .ic{width:22px;height:22px}
.act2:active{transform:scale(.95)}
@media (hover:hover){.act2:hover{background:var(--surface-2)}}
.sp-save.is-on{color:var(--mag)}
.sp-save.is-on .ic{fill:currentColor}
.sp-save.pop .ic{animation:savepop .55s var(--spring)}
.app.sheet-peek .tabbar{z-index:40;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.sp-more{padding:8px var(--gr) 0 var(--gl);display:grid;gap:16px}
[data-reports]:empty{display:none}
/* folded rows: Check before you go, Your rig, Help improve this place */
.folds{display:grid;gap:10px}
.fold{border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);scroll-margin-top:calc(var(--st) + 78px)}
.fold--warn{box-shadow:inset 0 0 0 2px var(--fg)}
.fold-s{display:grid;grid-template-columns:40px minmax(0,1fr) 22px;gap:12px;align-items:center;min-height:66px;padding:12px 14px 12px 12px;border-radius:22px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fold-s::-webkit-details-marker{display:none}
.fold-s::marker{content:""}
.fold-s:active{background:var(--surface)}
.fold-i{width:40px;height:40px;border-radius:50%;background:var(--surface);display:grid;place-items:center}
.fold-i .ic{width:20px;height:20px}
.fold--warn .fold-i{background:var(--mag);color:#fff}
.fold-t{min-width:0}
.fold-t b{display:block;font-size:16.5px;line-height:1.25;letter-spacing:-.01em}
.fold-t small{display:block;font-size:13.5px;line-height:1.35;color:var(--muted);margin-top:1px}
.fold--warn .fold-t small{color:var(--mag-d);font-weight:700}
.fold-c{color:var(--faint);display:grid;place-items:center;transition:transform .25s var(--ease)}
.fold-c .ic{width:20px;height:20px}
.fold[open] .fold-c{transform:rotate(180deg)}
.fold-b{padding:0 16px 16px;animation:alx .3s var(--ease) both}
.chk-p{font-size:14px;line-height:1.5;color:var(--muted);margin-top:12px}
.chk-l{display:grid;margin-top:6px}
.chk-l a{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line);text-decoration:none}
.chk-l a span{min-width:0}
.chk-l a b{display:block;font-size:16px;line-height:1.25}
.chk-l a small{display:block;font-size:13px;line-height:1.3;color:var(--muted)}
.chk-l a .ic{width:18px;height:18px;margin-left:auto;flex:none;color:var(--faint)}
.chk-l a:active{background:var(--surface)}
.fold-b .ban{margin:4px 0 0}
.hrow{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;gap:12px;align-items:center;width:100%;min-height:58px;padding:8px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;color:var(--fg);font:inherit;cursor:pointer}
.fold-b>.hrow:first-child{border-top:0}
.hrow-i{width:36px;height:36px;border-radius:50%;background:var(--surface);display:grid;place-items:center}
.hrow-i .ic{width:18px;height:18px}
.hrow-t b{display:block;font-size:15.5px;line-height:1.25}
.hrow-t small{display:block;font-size:13px;line-height:1.3;color:var(--muted)}
.hrow>.ic{width:18px;height:18px;color:var(--faint)}
.hrow:active{background:var(--surface)}
.hrow:focus-within{outline:3px solid var(--mag);outline-offset:2px;border-radius:12px}
.fold-b .sp-noname{margin:12px 0 4px}
/* the small print at the very bottom */
.fine{display:grid;gap:8px;padding:8px 4px 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.fine p{margin:0}
.fine b,.fine .fine-k{color:var(--fg)}
.fine .fine-k{font-weight:700}
.fine .src-note{padding:0;font-size:12.5px}
.fine a{color:var(--fg)}
/* the Directions chooser */
.navrows{display:grid;gap:10px}
.navrow{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;gap:14px;align-items:center;min-height:68px;padding:10px 16px 10px 12px;border-radius:22px;background:var(--surface);color:var(--fg);text-decoration:none;transition:transform .2s var(--spring),background .2s}
.navrow:active{transform:scale(.97)}
.navrow-i{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);display:grid;place-items:center}
.navrow-i .ic{width:21px;height:21px}
.navrow-t b{display:block;font-size:17px;line-height:1.25}
.navrow-t small{display:block;font-size:13px;line-height:1.3;color:var(--muted)}
.navrow>.ic{width:18px;height:18px;color:var(--faint)}
.navrow.is-last{background:var(--fg);color:#fff}
.navrow.is-last .navrow-t small{color:rgba(255,255,255,.72)}
.navrow.is-last .navrow-i{background:rgba(255,255,255,.14);box-shadow:none;color:#fff}
.navrow.is-last>.ic{color:rgba(255,255,255,.6)}
.blk{border-radius:26px;background:var(--surface);padding:18px}
.blk h2{font-stretch:108%;font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.2}
.blk .sub{font-size:14.5px;color:var(--muted);line-height:1.45;margin-top:4px}
.blk-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}

/* the Still like this? card: the hero of the site page */
.slt{position:relative;overflow:hidden;isolation:isolate;border-radius:30px;padding:22px 20px 18px;background:var(--fg);color:#fff;box-shadow:var(--sh-2)}
.slt::before{content:"";position:absolute;z-index:-1;right:-26%;top:-60%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(208,21,110,.5) 0%,rgba(208,21,110,0) 62%);transition:transform 1.2s var(--ease)}
.slt-top{display:flex;align-items:flex-start;gap:14px}
.slt-ico{position:relative;flex:none;width:52px;height:52px;border-radius:50%;background:var(--mag);display:grid;place-items:center;box-shadow:0 10px 22px -8px rgba(208,21,110,.8)}
.slt-ico .ic{width:26px;height:26px;stroke-width:2.2}
.slt-ico::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--mag);opacity:0;animation:ring 2.8s 1s ease-out infinite}
@keyframes ring{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}
.slt h2{font-stretch:112%;font-weight:800;font-size:25px;letter-spacing:-.03em;line-height:1.05}
.slt-s{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.4;margin-top:3px}
.slt-btns{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
.slt-btns .btn{min-height:58px;padding:0 18px;font-size:17px}
.slt-btns .btn--glass{min-height:52px;font-size:16px}
.slt-btns .btn--glass{background:rgba(255,255,255,.14);color:#fff}
.slt-btns .btn--glass:hover{background:rgba(255,255,255,.22)}
.slt-fine{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;line-height:1.35;color:rgba(255,255,255,.62)}
.slt-fine .ic{width:15px;height:15px;flex:none}
.slt-done{display:none}
.slt.is-done .slt-ask{display:none}
.slt.is-done .slt-done{display:block}
.slt.is-done .slt-ico{background:#fff;color:var(--mag)}
.slt.is-done .slt-ico::after{display:none}
.slt-check path{stroke-dasharray:1;stroke-dashoffset:0}
.slt.is-done .slt-check path{animation:draw .6s .1s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:1}}
.slt-pts{position:absolute;right:18px;top:20px;font-weight:800;font-size:18px;color:#fff;background:var(--mag);padding:7px 14px;border-radius:99px;box-shadow:0 10px 22px -8px rgba(208,21,110,.8);animation:gain 1.6s var(--ease) both}
@keyframes gain{0%{opacity:0;transform:translateY(14px) scale(.5)}18%{opacity:1;transform:scale(1.15)}30%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.slt--ask{background:var(--surface);color:var(--fg);box-shadow:none}
.slt--ask::before{display:none}
.slt--ask .slt-s{color:var(--muted)}
.slt--ask .slt-ico{background:#fff;color:var(--fg);box-shadow:var(--sh-1)}
.slt--ask .slt-ico::after{display:none}
.slt--ask .mpoint{position:absolute;right:11px;top:11px;width:13px;height:13px;border-radius:4px;background:var(--mag)}
.slt--ask .slt-fine{color:var(--muted)}
.slt-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.1);font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.86)}
.slt-note .ic{width:16px;height:16px;margin-top:1px}

/* facts: one clean line each. Icon, name, the answer, a small freshness dot. A disagreement is a small "Mixed" tag. Detail lives in the tap sheet. */
.facts{display:grid;margin-top:4px}
.fact{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:11px 0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:opacity .4s,background .2s;-webkit-tap-highlight-color:transparent}
.fact+.fact{border-top:1px solid var(--line-2)}
.fact .fi{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-1);color:var(--fg)}
.fact .fi .ic{width:19px;height:19px}
.fact .fl{min-width:0;font-size:16.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.fact .fr{display:flex;align-items:center;gap:8px;justify-self:end}
.fact .fv{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:99px;background:var(--fg);color:#fff;font-size:14.5px;font-weight:700;white-space:nowrap}
.fact.no .fv{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line-2);font-weight:600}
.fact.soft .fv{background:#fff;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.fact.stale{opacity:.62}
.fact.stale .fi{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.fact.just .fi{animation:vpop .7s var(--spring)}
.fact:active{background:var(--surface)}
@media (hover:hover){.fact:hover .fv{box-shadow:0 0 0 3px var(--mag-soft)}}
.fact:focus-visible{outline:3px solid var(--mag);outline-offset:2px;border-radius:12px}
.ftag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:99px;background:var(--mag-soft);color:var(--mag-d);font-size:12px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
/* freshness: solid magenta point = checked recently, hollow ring = fading (or not checked by a camper), nothing = not known */
.fdot{flex:none;width:9px;height:9px;border-radius:50%}
.fdot--solid{background:var(--mag)}
.fdot--hollow{box-shadow:inset 0 0 0 1.5px var(--faint)}
.facts-note{margin-top:10px;font-size:13px;line-height:1.4;color:var(--muted)}
@keyframes vpop{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-8deg)}100%{transform:scale(1)}}
/* the tap sheet for one fact */
.fsheet{display:grid;gap:10px;padding-bottom:6px}
.fsheet-top{display:flex;align-items:center;gap:14px}
.fsheet-top .fi{flex:none;width:48px;height:48px;border-radius:50%;background:var(--surface);display:grid;place-items:center}
.fsheet-top .fi .ic{width:22px;height:22px}
.fsheet-v{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fsheet-v b{font-stretch:112%;font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1.05}
.fsheet-l{font-size:16px;line-height:1.45;color:var(--fg)}
.fsheet-base{display:flex;gap:10px;align-items:flex-start;margin-top:4px;padding:12px 14px;border-radius:16px;background:var(--surface);font-size:13.5px;line-height:1.45;color:var(--muted)}
.fsheet-base .ic{flex:none;width:17px;height:17px;margin-top:1px}
.reportbox--calm{background:var(--surface)}
.clos{border-radius:20px;padding:16px 18px;background:var(--fg);color:#fff;font-size:14.5px;line-height:1.45}
.clos-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clos-h h2{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px 0 10px;border-radius:15px;background:var(--mag);color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.01em;margin:0}
.clos-h .ic{width:16px;height:16px;flex:none}
.clos .tag{background:rgba(255,255,255,.16);color:#fff}
.clos-t{margin:10px 0 0;font-size:15.5px;font-weight:600;line-height:1.45}
.clos-d,.clos-n{margin:8px 0 0}
.clos-s{margin:10px 0 0;font-size:13px;opacity:.8}
.reportbox--calm .ic{color:var(--fg)}
/* the quick question */
.qa-q{font-stretch:108%;font-weight:700;font-size:21px;line-height:1.3;letter-spacing:-.02em;margin:2px 0 18px}
.qa-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qa-btns .btn{min-height:56px;font-size:17px}
.qa-btns .btn--soft{grid-column:1 / -1;min-height:48px;font-size:15.5px}
.qa-fine{margin-top:14px}
.unknown-line{margin-top:10px;padding-top:12px;border-top:1px solid var(--line-2);font-size:14px;line-height:1.5;color:var(--muted)}

.rigs{display:grid;gap:8px;margin-top:10px}
.rigline{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 12px;border-radius:18px;background:#fff;font-size:15.5px;font-weight:600;line-height:1.3}
.rigline .ri{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:#fff}
.rigline .ri .ic{width:18px;height:18px}
.rigline.unk .ri{background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
.rigline.unk{color:var(--muted);font-weight:500}
.rigline.no .ri{background:var(--mag)}
.rigline small{display:block;font-weight:400;font-size:13px;color:var(--muted)}

.photo-note{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.45}
.reportbox{border-radius:20px;padding:14px 16px;background:var(--mag-soft);color:var(--fg);font-size:14.5px;line-height:1.45;display:flex;gap:12px;align-items:flex-start}
.reportbox .ic{width:20px;height:20px;color:var(--mag);margin-top:1px}
.reportbox b{display:block}
.src-note{padding:6px 2px 0;font-size:13px;line-height:1.55;color:var(--muted)}
.src-note a{color:var(--fg)}
.links-row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- modals ---------- */
.modal{position:absolute;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.scrim{position:absolute;inset:0;background:rgba(11,15,20,.4);opacity:0;transition:opacity .35s}
.modal.in .scrim{opacity:1}
.msheet{position:relative;width:100%;max-width:560px;max-height:calc(100% - var(--st) - 20px);display:flex;flex-direction:column;background:#fff;border-radius:30px 30px 0 0;box-shadow:var(--sh-sheet);transform:translate3d(0,100%,0);transition:transform .5s var(--spring-soft)}
.modal.in .msheet{transform:none}
.msheet.dragging{transition:none}
.msheet--full{height:calc(100% - var(--st) - 12px)}
.ms-grab{flex:none;display:grid;place-items:center;height:26px;cursor:grab;touch-action:none}
.ms-grab i{width:40px;height:5px;border-radius:3px;background:var(--line-2)}
.ms-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--gr) 8px var(--gl)}
.ms-head h2{font-stretch:114%;font-weight:800;font-size:26px;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.ms-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px var(--gr) 20px var(--gl);-webkit-overflow-scrolling:touch}
.ms-foot{flex:none;padding:12px var(--gr) calc(var(--sb) + 14px) var(--gl);background:linear-gradient(180deg,rgba(255,255,255,0),#fff 22%);display:grid;gap:8px}
.ms-lede{color:var(--muted);font-size:15.5px;line-height:1.5;margin-bottom:16px}
.ms-sec+.ms-sec{margin-top:22px}
.ms-sec h3{font-size:14.5px;font-weight:700;color:var(--muted);margin-bottom:10px}
.pillset{display:flex;flex-wrap:wrap;gap:8px}
.pillset .chip{box-shadow:inset 0 0 0 1.5px var(--line-2);background:#fff;height:46px}
.pillset .chip[aria-pressed="true"]{box-shadow:none;background:var(--fg)}
.swrow{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.swrow b{display:block;font-size:16px}
.swrow small{display:block;font-size:13.5px;color:var(--muted);line-height:1.4}
.swrow .st{flex:1;min-width:0}
.switch{position:relative;flex:none;width:54px;height:32px;border:0;border-radius:16px;background:var(--line-2);transition:background .25s}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(11,15,20,.3);transition:transform .35s var(--spring)}
.switch[aria-checked="true"]{background:var(--mag)}
.switch[aria-checked="true"]::after{transform:translateX(22px)}

/* search */
.sbox{display:flex;align-items:center;gap:12px;height:56px;padding:0 8px 0 20px;border-radius:28px;background:var(--surface)}
.sbox .ic{width:21px;height:21px;color:var(--muted)}
.sbox input{flex:1;min-width:0;height:100%;border:0;background:none;font-size:17px;font-weight:500;outline:0;-webkit-appearance:none;appearance:none}
.sbox input::-webkit-search-cancel-button{display:none}
.sbox input::placeholder{color:var(--faint)}
.sbox button{width:40px;height:40px;border:0;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-1)}
.sbox button .ic{width:16px;height:16px;color:var(--fg)}
.res{display:grid;margin-top:14px}
.res h3{font-size:14px;font-weight:700;color:var(--muted);margin:14px 2px 4px}
.res .row{animation:none}
.res .row-main{grid-template-columns:48px minmax(0,1fr);padding-left:2px;padding-right:50px}
.res .row .save-btn{right:-8px}
.res .row+.row::before{left:62px;right:0}
.res .tile{width:48px;height:48px;border-radius:15px}
.res .row-n{font-size:16px}

/* rig picker */
.rig-hero{height:112px;margin:0 calc(var(--gr) * -1) 16px calc(var(--gl) * -1);position:relative;overflow:hidden}
.rig-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.rig-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 40%,#fff 100%)}
.rig-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rigcard{position:relative;display:grid;gap:10px;align-content:space-between;min-height:116px;padding:14px 14px 13px;border:0;border-radius:24px;background:var(--surface);text-align:left;color:var(--fg);transition:transform .3s var(--spring),background .25s,color .25s,box-shadow .25s}
.rigcard:active{transform:scale(.95)}
.rigcard .rc-i{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-1);transition:background .25s,color .25s}
.rigcard .rc-i .ic{width:26px;height:26px}
.rigcard b{display:block;font-size:19px;font-stretch:106%;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.rigcard small{display:block;font-size:12.5px;line-height:1.3;color:var(--muted);margin-top:2px}
.rigcard .rc-t{position:absolute;right:12px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--mag);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .45s var(--spring)}
.rigcard .rc-t .ic{width:14px;height:14px;stroke-width:3.2}
.rigcard[aria-pressed="true"]{background:var(--fg);color:#fff}
.rigcard[aria-pressed="true"] small{color:rgba(255,255,255,.7)}
.rigcard[aria-pressed="true"] .rc-i{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.rigcard[aria-pressed="true"] .rc-t{transform:scale(1)}

/* forms */
.field{display:grid;gap:8px;min-width:0}
.field>label,.field>.lbl{font-size:15px;font-weight:700}
.field .opt{font-weight:400;color:var(--muted)}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field input[type="number"],.field textarea,.field select{width:100%;min-height:56px;padding:14px 18px;background:#fff;color:var(--fg);border:1.5px solid var(--line-2);border-radius:18px;font-size:16.5px;line-height:1.4;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--fg);box-shadow:0 0 0 4px rgba(11,15,20,.08)}
.form-msg{font-size:14.5px;line-height:1.45;color:var(--mag-d);min-height:1.4em}
.form-msg:empty{display:none}
.callout{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:var(--surface);font-size:14.5px;line-height:1.45;color:var(--muted)}
.callout .ic{width:19px;height:19px;margin-top:1px;color:var(--fg)}
.callout b{color:var(--fg)}
.linkcode{margin:4px 0 10px;padding:22px 12px;border-radius:24px;background:var(--surface);text-align:center;font-stretch:112%;font-weight:800;font-size:clamp(30px,10vw,44px);letter-spacing:.12em;line-height:1;font-variant-numeric:tabular-nums;user-select:all;-webkit-user-select:all}
.linkcode.is-old{color:var(--faint);text-decoration:line-through}
.codeboxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.codeboxes input{width:100%;height:60px;text-align:center;font-size:24px;font-weight:800;border:1.5px solid var(--line-2);border-radius:16px;background:#fff;padding:0}
.codeboxes input:focus{outline:0;border-color:var(--fg);box-shadow:0 0 0 4px rgba(11,15,20,.08)}
.steps{display:flex;gap:6px;margin-bottom:18px}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.steps i.on::after{content:"";position:absolute;inset:0;background:var(--fg)}

/* check form */
.cf-prog{flex:none;height:4px;margin:0 var(--gr) 8px var(--gl);border-radius:2px;background:var(--line);overflow:hidden}
.cf-prog i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--mag),#EC3C93);transition:width .5s var(--ease)}
.cf-q{display:grid;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.cf-rows{display:grid}
.cf-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0}
.cf-row .fi{width:36px;height:36px;border-radius:50%;background:var(--surface);display:grid;place-items:center}
.cf-row .fi .ic{width:18px;height:18px}
.cf-row .cl{font-size:16px;font-weight:600;line-height:1.25}
.seg--yn{grid-auto-columns:64px;padding:4px;gap:4px}
.seg--yn button{height:38px;font-size:14.5px}
.earn-line{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.4;color:var(--muted);padding:0 2px}
.earn-line .ic{width:16px;height:16px;flex:none;margin-top:1px;color:var(--fg)}
.earn-line b{color:var(--fg)}
.cf-q:first-child{border-top:0;padding-top:4px}
.cf-q h3{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--fg);margin:0}
.cf-q h3 .ic{width:22px;height:22px;flex:none}
.cf-q h3 small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:5px;border-radius:99px;background:var(--surface)}
.seg button{height:44px;border:0;border-radius:99px;background:transparent;font-size:15px;font-weight:700;color:var(--muted);transition:background .25s,color .25s,transform .25s var(--spring),box-shadow .25s}
.seg button:active{transform:scale(.95)}
/* the chosen answer is always ink, whether it is yes or no (Shane, 2026-10-20: a chosen "No" was barely visible) */
.seg button[aria-pressed="true"]{background:var(--fg);color:#fff;box-shadow:var(--sh-1)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.copt{height:44px;padding:0 17px;border:0;border-radius:99px;background:var(--surface);font-size:15px;font-weight:600;color:var(--fg);transition:background .2s,color .2s,transform .25s var(--spring)}
.copt:active{transform:scale(.94)}
.copt[aria-pressed="true"]{background:var(--fg);color:#fff}
.rigtri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rt{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px 8px 10px;border:0;border-radius:18px;background:var(--surface);text-align:left;font-size:15px;font-weight:700;transition:background .2s,color .2s,transform .25s var(--spring)}
.rt:active{transform:scale(.95)}
.rt .ri{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-1)}
.rt .ri .ic{width:21px;height:21px}
.rt small{display:block;font-weight:500;font-size:12px;color:var(--muted);line-height:1.2}
.rt[data-s="yes"]{background:var(--fg);color:#fff}
.rt[data-s="yes"] small{color:rgba(255,255,255,.7)}
.rt[data-s="yes"] .ri{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.rt[data-s="no"]{background:var(--mag-soft);color:var(--mag-d)}
.rt[data-s="no"] small{color:var(--mag-d)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pgrid figure{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1/1;background:var(--surface)}
.pgrid img{width:100%;height:100%;object-fit:cover}
.pgrid .rm{position:absolute;right:6px;top:6px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(11,15,20,.7);color:#fff;display:grid;place-items:center}
.pgrid .rm .ic{width:14px;height:14px}
.pgrid .add{display:grid;place-items:center;align-content:center;gap:6px;border:1.5px dashed var(--line-2);border-radius:16px;background:#fff;aspect-ratio:1/1;font-size:12.5px;font-weight:700}
.pgrid .add .ic{width:22px;height:22px}
.loc-row{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:10px 12px;padding:12px 14px;border-radius:18px;background:var(--surface);font-size:14.5px;line-height:1.35}
.loc-row .ic{width:20px;height:20px;flex:none}
.loc-row.ok{background:var(--mag-soft)}
.loc-row.ok .ic{color:var(--mag)}
.loc-row .btn{grid-column:2;justify-self:start}

/* problem types */
.radios{display:grid;gap:8px}
.radio{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 16px 10px 12px;border:0;border-radius:20px;background:var(--surface);text-align:left;font-size:16.5px;font-weight:600;transition:background .2s,color .2s,transform .25s var(--spring)}
.radio:active{transform:scale(.97)}
.radio .ri{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-1)}
.radio .ri .ic{width:20px;height:20px}
.radio[aria-pressed="true"]{background:var(--fg);color:#fff}
.radio[aria-pressed="true"] .ri{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}

/* ---------- toasts ---------- */
.toasts{position:absolute;z-index:80;left:0;right:0;top:calc(var(--st) + 10px);display:grid;gap:8px;justify-items:center;pointer-events:none;padding:0 var(--gr) 0 var(--gl)}
.toast{position:relative;width:min(100%,420px);display:flex;align-items:center;gap:14px;padding:11px 20px 11px 11px;border-radius:28px;background:var(--fg);color:#fff;box-shadow:0 1px 2px rgba(11,15,20,.2),0 18px 36px -12px rgba(11,15,20,.55);opacity:0;transform:translateY(-26px) scale(.94);transition:opacity .3s,transform .7s var(--spring);pointer-events:auto}
.toast.show{opacity:1;transform:none}
.toast-ico{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--mag);color:#fff}
.toast-ico .ic{width:21px;height:21px}
.toast-ico .ic.fill{fill:#fff;stroke:none}
.toast-ico::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--mag);opacity:0}
.toast.show .toast-ico::after{animation:burst 1.1s .2s ease-out}
@keyframes burst{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.toast-t{min-width:0;flex:1}
.toast b{display:block;font-size:16px;line-height:1.2}
.toast span.s{display:block;font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.72)}
.toast-pts{flex:none;font-weight:800;font-size:17px;background:var(--mag);padding:6px 13px;border-radius:99px;animation:ptsin .7s .15s var(--spring) both}
@keyframes ptsin{from{transform:scale(.3);opacity:0}}
.toast--plain .toast-ico{background:rgba(255,255,255,.16)}
.toast--plain .toast-ico::after{display:none}
.toast--level{background:linear-gradient(135deg,#0B0F14,#2a1020)}

.update-slot{position:absolute;z-index:70;left:var(--gl);right:var(--gr);bottom:calc(var(--tab) + var(--sb) + 14px);display:flex;justify-content:center;pointer-events:none}
.upd-card{pointer-events:auto;width:min(100%,420px);background:#fff;border-radius:26px;padding:16px;box-shadow:var(--sh-2);display:grid;gap:12px;animation:updin .7s var(--spring) both}
@keyframes updin{from{opacity:0;transform:translateY(30px) scale(.94)}}
.upd-top{display:flex;align-items:center;gap:14px}
.upd-ico{flex:none;width:46px;height:46px;border-radius:12px;background:#fff;box-shadow:var(--sh-1);display:grid;place-items:center}
.upd-ico svg{width:30px;height:30px}
.upd-top b{display:block;font-size:16.5px;line-height:1.2}
.upd-top span{font-size:14px;color:var(--muted)}
.upd-btns{display:flex;gap:10px}
.upd-btns .btn{flex:1;min-height:46px;font-size:15px}
.upd-note{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.upd-note .ic{width:16px;height:16px;color:var(--mag)}

/* the update card also appears inside the You screen's version row */

/* ---------- area pill (on Home) ---------- */
.apill{flex:none;display:inline-flex;align-items:center;gap:9px;max-width:100%;height:36px;padding:0 9px 0 13px;border:0;border-radius:18px;background:#fff;color:var(--fg);font-size:14.5px;font-weight:700;letter-spacing:-.005em;box-shadow:var(--sh-float);transition:transform .2s var(--spring),background .2s}
.apill:active{transform:scale(.95)}
.apill .ic{width:16px;height:16px;color:var(--faint)}
.apill>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdot{flex:none;width:9px;height:9px;border-radius:3px;background:var(--mag)}
.apill--home{background:var(--surface);box-shadow:none;height:34px}

/* ---------- pages: Home, Updates, Settings ---------- */
.page-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(var(--st) + 10px) var(--gr) 0 var(--gl)}
.page-bar .round--s.busy .ic{animation:spin 1s linear infinite}
.home-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:calc(var(--st) + 8px) var(--gr) 16px var(--gl)}
.home-h .eyebrow{margin-top:18px;font-size:15px;font-weight:600;color:var(--muted)}
.home-h h1{font-stretch:118%;font-weight:800;font-size:34px;letter-spacing:-.035em;line-height:1.05;margin-top:2px}
.btn--xl{min-height:64px;font-size:18px;gap:12px}
.btn--xl .ic{width:22px;height:22px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.sec-h h2{font-stretch:108%;font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1.2;color:var(--fg)}
.link{display:inline-flex;align-items:center;gap:2px;border:0;background:none;padding:8px 0 8px 10px;font-size:14.5px;font-weight:700;color:var(--fg)}
.link .ic{width:16px;height:16px;color:var(--faint)}
.link--inline{display:inline;padding:0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.pts-in{white-space:nowrap;border:0;background:none;padding:0;color:rgba(255,255,255,.86);font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
.sec .list{margin:0 calc(var(--gr) * -1) 0 calc(var(--gl) * -1)}

/* ---------- updates: official alert cards ---------- */
.alist{display:grid;gap:10px}
.al{display:block;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);animation:rowin .5s var(--ease) both;overflow:hidden}
.al-s{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;gap:12px;align-items:center;padding:11px 14px 11px 12px;min-height:58px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.al-s::-webkit-details-marker{display:none}
.al-s::marker{content:""}
.al-s:active{background:var(--surface)}
.al-ic{width:36px;height:36px;border-radius:50%;background:var(--surface);display:grid;place-items:center;color:var(--fg)}
.al-ic .ic{width:18px;height:18px}
.al-h{min-width:0;display:grid;gap:2px}
.al-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:700;line-height:1.27;letter-spacing:-.01em;overflow-wrap:anywhere}
.al[open] .al-t{display:block;-webkit-line-clamp:unset}
.al-sm{font-size:13px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-chev{display:grid;place-items:center;color:var(--faint);transition:transform .25s var(--ease)}
.al-chev .ic{width:18px;height:18px}
.al[open] .al-chev{transform:rotate(180deg)}
.al-x{padding:0 14px 12px 60px;animation:alx .3s var(--ease) both}
@keyframes alx{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.al-top{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.al-d{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:7px;white-space:pre-line;overflow-wrap:anywhere}
.al-d+.al-d{margin-top:9px}
.al-text.is-clamped{max-height:156px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.al.is-open .al-text.is-clamped{max-height:none;-webkit-mask-image:none;mask-image:none}
.al-more{display:inline-flex;border:0;background:none;padding:8px 0 2px;font-size:13.5px;font-weight:700;color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.al-m{font-size:13px;line-height:1.4;color:var(--muted);margin-top:8px}
.al-l{display:inline-flex;align-items:center;gap:6px;margin-top:6px;border:0;background:none;padding:8px 0;font-size:14px;font-weight:700;color:var(--fg);text-decoration:none}
.al-l .ic{width:15px;height:15px;color:var(--faint)}
.al-l:active{opacity:.6}
.al--high .al-ic{background:var(--fg);color:#fff}
.al--camper{background:var(--mag-soft);box-shadow:none}
.al--camper .al-ic{background:#fff;color:var(--mag)}
.al--ban{background:var(--fg);color:#fff;box-shadow:var(--sh-2)}
.al--ban .al-s:active{background:rgba(255,255,255,.06)}
.al--ban .al-ic{background:var(--mag);color:#fff}
.al--ban .al-d,.al--ban .al-m,.al--ban .al-sm{color:rgba(255,255,255,.78)}
.al--ban .al-chev{color:rgba(255,255,255,.6)}
.al--ban .al-more,.al--ban .al-l{color:#fff}
.al--ban .al-l .ic{color:rgba(255,255,255,.6)}
.al--ban .tag{background:rgba(255,255,255,.16);color:#fff}
.al--c{animation:none}
.al--dim{opacity:.72}
.ban{display:grid;gap:10px;margin-bottom:12px}
.al-ours{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--muted);padding:0 4px}
.al-ours .ic{width:16px;height:16px;flex:none;margin-top:1px}
.al-attr{font-size:12px;line-height:1.45;color:var(--muted);margin-top:8px}
.al-h2{font-stretch:108%;font-weight:800;font-size:19px;letter-spacing:-.02em;margin:24px 0 10px}
.al-empty{display:flex;align-items:flex-start;gap:14px;padding:18px 16px;border-radius:24px;background:var(--surface)}
.al-empty .eico{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-1)}
.al-empty .eico .ic{width:21px;height:21px}
.al-empty b{display:block;font-size:16.5px;line-height:1.25}
.al-empty span{display:block;font-size:14.5px;line-height:1.45;color:var(--muted);margin-top:3px}
.al-empty a{color:var(--fg)}
.al-unk{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:20px;background:var(--mag-soft);box-shadow:inset 0 0 0 1.5px var(--mag-line);margin-bottom:10px}
.al-unk-ic{flex:none;color:var(--mag);margin-top:1px}
.al-unk-ic .ic{width:21px;height:21px}
.al-unk b{display:block;font-size:15.5px;line-height:1.25}
.al-unk span{display:block;font-size:14px;line-height:1.45;color:var(--fg);margin-top:3px}
.al-unk a{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:14px;font-weight:700;color:var(--fg)}
.al-unk a .ic{width:15px;height:15px}
.al-srcs{display:grid;gap:6px;margin:14px 2px 0;font-size:13.5px;line-height:1.35;color:var(--muted)}
.al-srcs li{display:flex;align-items:center;gap:9px}
.al-srcs li i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--fg)}
.al-srcs li.bad i{background:var(--mag)}
.al-srcs b{color:var(--fg);font-weight:700}
.al-stand{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:13px 14px;border-radius:18px;box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:14px;line-height:1.45}
.al-stand .ic{width:18px;height:18px;flex:none;margin-top:1px}
.al-stand a{color:var(--fg);font-weight:700}
.al-quiet{margin-top:12px;padding:16px;border-radius:24px;background:var(--surface)}
.al-quiet h3{display:flex;align-items:center;gap:10px;font-size:16.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.al-quiet h3 .ic{width:20px;height:20px}
.al-quiet p{font-size:14px;line-height:1.45;color:var(--muted);margin-top:4px}
.al-quiet-l{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.al-quiet-l a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:19px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:13.5px;font-weight:700;color:var(--fg);text-decoration:none;transition:transform .2s var(--spring)}
.al-quiet-l a:active{transform:scale(.95)}
.al-quiet-l a .ic{width:14px;height:14px;color:var(--faint)}
.al-row{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:14px 16px;border:0;border-radius:20px;background:var(--surface);text-align:left;font-size:15px;color:var(--fg)}
.al-row>.ic:first-child{width:20px;height:20px}
.al-row>.ic:last-child{margin-left:auto;color:var(--faint);width:18px;height:18px}
.al-row:active{background:var(--surface-2)}
.al-burns{margin-top:12px;border-radius:22px;background:var(--surface)}
.al-burns summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;list-style:none;cursor:pointer;font-size:15px}
.al-burns summary::-webkit-details-marker{display:none}
.al-burns summary>span{display:inline-flex;align-items:center;gap:10px}
.al-burns summary .ic{width:20px;height:20px}
.al-burns summary>.ic{color:var(--faint);width:18px;height:18px;transition:transform .3s var(--spring)}
.al-burns[open] summary>.ic{transform:rotate(180deg)}
.alist--c{padding:0 10px 12px;gap:8px}
.alist--c .al{background:#fff}
.alist--c .al-s{grid-template-columns:minmax(0,1fr) 18px;min-height:50px;padding:10px 14px}
.alist--c .al-x{padding:0 14px 10px}
.alist--c .al-ic,.alist--c .al-top{display:none}
.alist--c .al-t{font-size:14.5px}
.alist--c .al-m{margin-top:6px}
.alist--c .al-l{margin-top:2px;padding:6px 0;font-size:13.5px}
.near-al{margin-top:12px}
.near-al h3{font-size:14.5px;font-weight:700;color:var(--fg);margin-bottom:8px}
.near-al .al{margin-top:8px}
.near-more{font-size:13.5px;color:var(--muted);margin-top:8px}
.near-none{display:flex;gap:10px;align-items:flex-start;margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.near-none .ic{width:17px;height:17px;flex:none;margin-top:1px;color:var(--fg)}

/* ---------- Where are you heading? ---------- */
.wm{display:inline-flex;flex-direction:column;gap:.5em;font-size:17px;color:inherit;line-height:1}
.wm-w{font-stretch:125%;font-weight:800;letter-spacing:.09em;white-space:nowrap}
.wm-ln{position:relative;display:block;height:.46em}
.wm-ln::before{content:"";position:absolute;left:0;right:.3em;top:50%;height:max(1.5px,.085em);margin-top:calc(max(1.5px,.085em)/-2);background:currentColor;border-radius:2px;transform-origin:left center;animation:wmdraw .9s .25s var(--ease) both}
.wm-ln::after{content:"";position:absolute;right:0;top:50%;width:.46em;height:.46em;margin-top:-.23em;border-radius:50%;background:var(--mag);animation:wmdot .5s .95s var(--spring) both}
@keyframes wmdraw{from{transform:scaleX(0)}}
@keyframes wmdot{from{transform:scale(0)}}
.area{position:absolute;inset:0;z-index:45;background:var(--bg);opacity:0;transform:translate3d(0,26px,0);transition:opacity .4s var(--ease),transform .7s var(--spring-soft)}
.area.in{opacity:1;transform:none}
.area.out{opacity:0;transform:translate3d(0,26px,0);pointer-events:none}
.area-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(var(--st) + 14px) 0 calc(var(--sb) + 44px)}
.area-in{width:100%;max-width:980px;margin:0 auto;padding:0 var(--gr) 0 var(--gl)}
.area-top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.area-h{font-stretch:122%;font-weight:800;font-size:clamp(35px,9.8vw,56px);letter-spacing:-.04em;line-height:1.02;margin-top:30px;text-wrap:balance}
.area-h:focus{outline:0}
.area-sub{margin-top:12px;font-size:16.5px;line-height:1.5;color:var(--muted);max-width:30em}
.alive{margin-top:26px}
.acard{position:relative;display:block;width:100%;height:clamp(268px,40vh,340px);padding:0;border:0;border-radius:30px;overflow:hidden;text-align:left;color:#fff;background:var(--fg);box-shadow:var(--sh-2);isolation:isolate;animation:rowin .7s var(--ease) both;animation-delay:calc(var(--i,0)*70ms);transition:transform .3s var(--spring)}
.acard:active{transform:scale(.985)}
.acard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.acard-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,20,.34) 0%,rgba(11,15,20,0) 26%,rgba(11,15,20,.5) 52%,rgba(11,15,20,.86) 100%)}
.acard-live{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 12px;border-radius:16px;background:rgba(255,255,255,.95);color:var(--fg);font-size:13.5px;font-weight:700}
.acard-live i{width:9px;height:9px;border-radius:3px;background:var(--mag)}
.acard-live--early{gap:0;padding:0 13px;background:rgba(11,15,20,.4);color:#fff;font-weight:600}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.acard-live--early{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.acard-cur{position:absolute;right:16px;top:16px;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--mag);display:grid;place-items:center}
.acard-cur .ic{width:16px;height:16px;stroke-width:3}
.acard-b{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 20px;display:grid;gap:6px}
.acard-n{font-stretch:122%;font-weight:800;font-size:clamp(28px,7.8vw,38px);letter-spacing:-.035em;line-height:1.04}
.acard-n--long{font-size:clamp(23px,6.5vw,31px);letter-spacing:-.03em}   /* a long name such as "Great Ocean Road, Grampians and Wimmera" keeps to three lines and leaves the photo showing */
.acard-s{font-size:15px;line-height:1.4;color:rgba(255,255,255,.9);max-width:27em}
.acard-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.acard-c{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:17px;background:rgba(255,255,255,.2);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.acard-c{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.acard-go{flex:none;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--fg);display:grid;place-items:center;transition:transform .35s var(--spring)}
.acard-go .ic{width:22px;height:22px}
/* the photo cards slide sideways (scroll-snap; area.js adds the dots and the slow auto-slide). The row runs out to the screen edge so the next card peeks in. */
.acar-track{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:-6px calc(var(--gr)*-1) 0 calc(var(--gl)*-1);padding:6px var(--gr) 24px var(--gl);scroll-padding-left:var(--gl)}
.acar-track::-webkit-scrollbar{display:none}
.acar-slide{flex:0 0 calc(100% - 34px);min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.acar-dots{display:flex;justify-content:center;margin-top:-12px}
.acar-dot{width:26px;height:30px;padding:0;border:0;background:none;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.acar-dot i{display:block;width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:width .3s var(--spring),height .3s var(--spring),background .25s}
.acar-dot[aria-current="true"] i{width:9px;height:9px;background:var(--mag)}
.area-h2{font-stretch:108%;font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.2;margin:36px 0 12px}
.area-h2--fold{margin:28px 0 4px}
.afold{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;cursor:pointer;font:inherit;letter-spacing:inherit;-webkit-tap-highlight-color:transparent}
.afold:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:6px}
.afold-r{display:flex;align-items:center;gap:6px;flex:none}
.afold-n{font-stretch:100%;font-weight:600;font-size:13px;letter-spacing:0;color:var(--muted,#5b6470)}
.afold svg{width:20px;height:20px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.afold[aria-expanded="false"] svg{transform:rotate(-90deg)}
.agrp{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease;padding-top:8px}
.agrp-in{min-height:0;overflow:hidden}
.agrp.is-shut{grid-template-rows:0fr;opacity:0;padding-top:0}
@media (prefers-reduced-motion:reduce){.agrp,.afold svg{transition:none}}
.asoons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.asoons .asoon:last-child:nth-child(odd){grid-column:1/-1}
.asoon{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:14px;min-height:118px;padding:16px;border:0;border-radius:24px;background:var(--surface);text-align:left;color:var(--fg);animation:rowin .6s var(--ease) both;animation-delay:calc(var(--i,0)*60ms);transition:transform .25s var(--spring),background .2s}
.asoon:active{transform:scale(.97);background:var(--surface-2)}
.asoon b{display:block;font-stretch:108%;font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.14}
.asoon small{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:5px}
.aearlys{display:grid;gap:10px}
.asoons--after{margin-top:10px}
.aearly{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:18px 16px 18px 18px;border:0;border-radius:24px;background:var(--surface);text-align:left;color:var(--fg);animation:rowin .6s var(--ease) both;animation-delay:calc(var(--i,0)*60ms);transition:transform .25s var(--spring),background .2s}
.aearly:active{transform:scale(.985);background:var(--surface-2)}
.aearly.is-current{box-shadow:inset 0 0 0 2px var(--fg)}
.aearly-b{display:grid;gap:4px;min-width:0}
.aearly-b b{display:block;font-stretch:108%;font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.14}
.aearly-b small{display:block;font-size:13px;line-height:1.4;color:var(--muted)}
.aearly-f{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px}
.aearly-l{font-size:12.5px;line-height:1.35;color:var(--muted)}
.aearly-r{flex:none;display:grid;justify-items:end;gap:10px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.aearly-r .ic{width:22px;height:22px}
.astates{display:flex;flex-wrap:wrap;gap:8px}
.astate{height:46px;min-width:78px;padding:0 20px;border:0;border-radius:23px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--muted);font-size:15px;font-weight:700;letter-spacing:.02em;animation:rowin .6s var(--ease) both;animation-delay:calc(var(--i,0)*40ms);transition:transform .2s var(--spring)}
.astate:active{transform:scale(.94)}
.area-fine{display:flex;gap:10px;align-items:flex-start;margin-top:22px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.area-fine .ic{width:16px;height:16px;flex:none;margin-top:1px}
@media (hover:hover){
  .acard:hover img{transform:scale(1.05)}
  .acard:hover .acard-go{transform:translateX(4px)}
  .asoon:hover{background:var(--surface-2)}
  .al-quiet-l a:hover{box-shadow:inset 0 0 0 1.5px var(--fg)}
}

/* ---------- map kinds: the one place colour is allowed beyond white, ink and magenta (CLAUDE.md "Map exception", Shane 2026-10-20) ----------
   Campsites deep green, caravan parks ink, farm stays champagne metallic gold with a white icon (te-134: a gradient, a fine brushed grain, a soft sheen and a bronze halo behind the icon, as on the map pin; the flat gold is for the small dots), rest areas white with an ink outline. The magenta corner still means
   "checked by Trek Eleven". Used only on map pins, dots and cluster rings, and their small copies: filter chip swatches and list tiles. */
:root{--k-camp:#1E5F42;--k-van:#0B0F14;--k-stop:#FFFFFF;--k-priv:#B88E3E;--k-priv-ink:#FFFFFF;   /* --k-priv is the flat champagne gold (3.0:1 vs white) for dots and arcs */
  /* the same face as the map pin (mapgeo.js CHAMPAGNE): sheen, three fine hairline grains (pale, pale, bronze) and the gradient #E9D29A, #C8A04E, #9C7429 */
  --k-priv-bg:linear-gradient(135deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.12) 10%,rgba(255,255,255,.3) 19%,rgba(255,255,255,0) 26.5%,rgba(74,50,8,0) 70%,rgba(74,50,8,.14) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 .5px,transparent .5px 2.3px),
    repeating-linear-gradient(0deg,rgba(74,50,8,.055) 0 .5px,transparent .5px 3.7px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 .4px,transparent .4px 5.9px),
    linear-gradient(135deg,#E9D29A,#C8A04E,#9C7429)}
/* the soft bronze halo that keeps the white icon at 3:1 or better, as on the pin; --hs scales it (1 = the same as on the pin; the 24 px filter swatch takes less) */
.ktile--priv .ic,.ksw--priv .ic,.cs-tile--priv .ic,.tile--priv .ic{filter:drop-shadow(0 0 calc(.8px*var(--hs,1)) rgba(74,50,8,.95)) drop-shadow(0 0 calc(2px*var(--hs,1)) rgba(74,50,8,.65)) drop-shadow(0 0 calc(4px*var(--hs,1)) rgba(74,50,8,.3))}
.ksw--priv{--hs:.6}
.ksw{position:relative;flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;color:#fff;box-shadow:0 0 0 2px #fff;font-style:normal}
.ksw .ic{width:14px;height:14px;stroke-width:2.4}
.ksw--camp{background:var(--k-camp)}
.ksw--van{background:var(--k-van)}
.ksw--priv{background:var(--k-priv-bg);color:var(--k-priv-ink)}
.ksw--stop{background:#fff;color:var(--fg);box-shadow:inset 0 0 0 1.8px var(--fg),0 0 0 2px #fff}
.ksw--stop .ic{width:13px;height:13px}
.chip--k{padding:0 14px 0 9px}
.pillset .chip--k{padding:0 16px 0 10px}
/* on a dark (pressed) chip the swatch keeps its white ring so green and ink stay apart from the chip */
.chip[aria-pressed="true"] .ksw{box-shadow:0 0 0 2px #fff}
.chip[aria-pressed="true"] .ksw--stop{box-shadow:inset 0 0 0 1.8px var(--fg),0 0 0 2px #fff}
/* dump points, drinking water, toilets and showers (te-124): not a kind of place to stay, so only neutral slate and white, small, never green, gold or magenta */
.am-sw{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #4A5562;color:#4A5562;font-style:normal}
.am-sw .ic{width:12px;height:12px;stroke-width:2.4}
.pillset .chip--am{padding:0 16px 0 10px;height:42px}
.amen-types{margin-top:2px;padding-bottom:4px}
.amen-types[hidden]{display:none}
.amen-kind{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.amen-kind .am-sw{width:34px;height:34px}
.amen-kind .am-sw .ic{width:18px;height:18px}
.amen-kind b{display:block;font-size:16px;line-height:1.25}
.amen-kind small{display:block;font-size:14px;line-height:1.35;color:var(--muted)}
.amen-near-t{margin:2px 0 8px;font-size:14.5px;font-weight:700;color:var(--muted)}
.amen-facts{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.amen-facts li{display:flex;align-items:center;gap:11px;font-size:15.5px;line-height:1.35}
.amen-facts .ic{flex:none;width:18px;height:18px;color:var(--muted)}
.ms-amen .callout{margin-bottom:12px}
/* places the filters are hiding: one quiet pill under the search bar */
.hidepill{position:absolute;z-index:5;left:0;right:0;top:var(--top);margin:0 auto;width:max-content;max-width:calc(100% - 32px);display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 5px 0 12px;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:var(--sh-float);font-size:13.5px;font-weight:700;white-space:nowrap;animation:chipin .45s var(--spring)}
.hidepill .ic{width:15px;height:15px;color:var(--muted)}
.hidepill button{position:relative;height:28px;padding:0 12px;border:0;border-radius:14px;background:var(--fg);color:#fff;font-size:12.5px;font-weight:700}
.hidepill button::after{content:"";position:absolute;inset:-8px -6px}
.app:not([data-tab="explore"]) .hidepill,.app[data-mode="list"] .hidepill,.app.sheet-full .hidepill{display:none}

/* ---------- the list under a tapped cluster ---------- */
.cs{position:absolute;z-index:30;left:0;right:0;bottom:calc(var(--tab) + var(--sb));height:min(344px,calc((100% - var(--tab) - var(--sb)) * .5));display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:28px 28px 0 0;box-shadow:var(--sh-sheet);transform:translate3d(0,calc(100% + var(--tab) + var(--sb) + 30px),0);transition:transform .55s var(--spring-soft),height .5s var(--spring-soft)}
.cs.open{transform:none}
.cs.dragging{transition:none}
.cs.tall{height:min(640px,calc(100% - var(--tab) - var(--sb) - var(--st) - 110px))}
.app.cs-open .tabbar{z-index:40;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.app.cs-open .toggle-pill{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(20px)}
/* on a phone the sheet reaches nearly to the "where am I" button and the group is fitted into the space above it, so the button steps aside */
@media (max-width:899px){.app.cs-open .fab{opacity:0;pointer-events:none}}
.cs-grab{flex:none;display:grid;place-items:center;height:26px;cursor:grab;touch-action:none}
.cs-grab i{width:40px;height:5px;border-radius:3px;background:var(--line-2)}
.cs-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 var(--gr) 6px var(--gl);touch-action:none}
.cs-head h2{font-stretch:114%;font-weight:800;font-size:23px;letter-spacing:-.035em;line-height:1.1;padding-top:4px}
.cs-head h2:focus{outline:0}
.cs-sub{font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:3px}
.cs-mixrow{flex:none;padding:0 var(--gr) 8px var(--gl);overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.cs-mixrow::-webkit-scrollbar{display:none}
.cs-mix{display:flex;gap:4px 14px;font-size:13px;font-weight:600;color:var(--fg);white-space:nowrap;padding-right:24px}
.cs-mix span{display:inline-flex;align-items:center;gap:6px}
.cs-mix:has(.cs-tab){gap:6px}
.cs-tab{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--fg);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.cs-tab[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:#fff}
.cs-tab[aria-pressed="true"] .sw--stop{box-shadow:inset 0 0 0 1.8px #fff;background:transparent}
.cs-tab[aria-pressed="true"] .sw--van{background:#fff}
.sw{flex:none;width:10px;height:10px;border-radius:50%}
.sw--camp{background:var(--k-camp)}
.sw--van{background:var(--k-van)}
.sw--priv{background:var(--k-priv)}
.sw--stop{background:#fff;box-shadow:inset 0 0 0 1.8px var(--fg)}
.cs-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 0 18px}
.cs-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 18px;gap:14px;align-items:center;width:100%;min-height:64px;padding:11px var(--gr) 11px var(--gl);border:0;background:none;text-align:left;transition:background .2s}
.cs-rows li+li .cs-row::before{content:"";position:absolute;left:calc(var(--gl) + 62px);right:var(--gr);top:0;height:1px;background:var(--line)}
.cs-row:active{background:var(--surface)}
.cs-row:focus-visible{outline-offset:-3px}
@media (hover:hover){.cs-row:hover{background:var(--surface)}}
.cs-row .go{width:18px;height:18px;color:var(--faint)}
.cs-t{min-width:0}
.cs-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16.5px;font-weight:700;line-height:1.22;letter-spacing:-.012em;overflow-wrap:anywhere}
.cs-n.un{color:var(--muted);font-weight:600}
.cs-m{display:block;font-size:13.5px;line-height:1.35;color:var(--muted);margin-top:1px}
.cs-f{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.cs-tile{position:relative;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff}
.cs-tile .ic{width:23px;height:23px;stroke-width:2.2}
.cs-tile--camp{background:var(--k-camp)}
.cs-tile--van{background:var(--k-van)}
.cs-tile--priv{background:var(--k-priv-bg);color:var(--k-priv-ink)}
.cs-tile--stop{background:#fff;color:var(--fg);box-shadow:inset 0 0 0 1.8px var(--fg)}
.cs-tile--walk{background:#fff;color:var(--k-camp);border:2px dashed var(--k-camp)}
.cs-tile.te::after{content:"";position:absolute;right:-3px;top:-3px;width:14px;height:14px;border-radius:4.5px;background:var(--mag);box-shadow:0 0 0 2.5px #fff}
.mini--dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mag)}
.cs-more{display:grid;place-items:center;padding:12px var(--gr) 4px var(--gl)}
/* the back chip on a place opened from the list */
.sp-back{position:relative;display:inline-flex;align-items:center;gap:4px;height:30px;margin:-4px 0 8px -8px;padding:0 12px 0 6px;border:0;border-radius:15px;background:var(--surface);color:var(--fg);font-size:13.5px;font-weight:700}
.sp-back .ic{width:16px;height:16px}
.sp-back::after{content:"";position:absolute;inset:-8px -4px}
.sp-back:active{background:var(--surface-2)}
.ss.is-full .sp-back{display:none}

/* ---------- map details ---------- */
.maplibregl-ctrl-attrib,.maplibregl-ctrl-logo{display:none!important}

/* ---------- desktop: left panel + map ---------- */
@media (min-width:900px){
  :root{--gl:max(20px,env(safe-area-inset-left,0px));--gr:max(20px,env(safe-area-inset-right,0px))}
  .mapwrap{left:var(--panel)}
  .shell{width:var(--panel);background:#fff;box-shadow:1px 0 0 var(--line),12px 0 40px -20px rgba(11,15,20,.2);z-index:20}
  .topbar{background:#fff;box-shadow:0 1px 0 var(--line)}
  .search,.round,.chip{box-shadow:none;background:var(--surface)}
  .chip[aria-pressed="true"]{background:var(--fg)}
  #filter-btn{--rb:var(--surface)}
  .app[data-tab="explore"][data-mode="map"] #v-explore{display:block}
  .toggle-pill{display:none!important}
  .tabbar{right:auto;width:var(--panel)}
  .view{padding-top:calc(var(--top) + 14px)}
  .fab{left:auto;right:16px;bottom:calc(var(--sb) + 28px)}
  .credit{left:var(--panel);bottom:var(--sb);padding-left:12px}
  .app:not([data-tab="explore"]) .mapwrap{visibility:visible}
  .app:not([data-tab="explore"]) .fab,.app:not([data-tab="explore"]) .credit{display:block}
  .app:not([data-tab="explore"]) .topbar{display:none}
  .app:not([data-tab="explore"]) .fab{display:grid}
  .view.view--page{padding-top:calc(var(--st) + 12px)}
  .ss{width:var(--panel);right:auto;border-radius:0}
  .cs{right:auto;width:var(--panel)}
  .hidepill{display:none}
  .ss-grab{display:none}
  .ss.is-peek{border-radius:28px 28px 0 0}
  .ss.is-peek .ss-grab{display:grid}
  .modal{align-items:center}
  .msheet{border-radius:30px;max-height:min(88%,820px);transform:translate3d(0,40px,0) scale(.96);opacity:0;transition:transform .5s var(--spring-soft),opacity .3s}
  .modal.in .msheet{transform:none;opacity:1}
  .msheet--full{height:min(92%,860px)}
  .ms-grab{display:none}
  .ms-head{padding-top:22px}
  .toasts{left:var(--panel);}
  .update-slot{left:var(--gl);right:auto;width:calc(var(--panel) - 40px);bottom:calc(var(--tab) + var(--sb) + 14px)}
}
@media (min-width:1500px){:root{--panel:480px}}

@media (min-width:900px){
  .apill--home{background:var(--surface)}
  .acard{height:360px}
  .acard-b{padding:28px 28px 26px}
  .asoons{grid-template-columns:repeat(3,minmax(0,1fr))}
  .asoons .asoon:last-child:nth-child(odd){grid-column:auto}
  .area-scroll{padding-top:calc(var(--st) + 26px)}
  .area-h{margin-top:44px}
}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .nudge .fk{animation:none!important}
  .slt-ico::after{display:none}
}

/* ---------- farm stays (te-096; code name private_stay): the page block, the owner's flow and the pin picker ----------
   White, ink and magenta only (the gold is for map pins and their small copies, in the list rows above). */
.stay-warn{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:13.5px;font-weight:700;line-height:1.4}
.stay-warn .ic{width:17px;height:17px;flex:none;margin-top:1px}
.stay .sp-tags .tag{background:#fff}
.stay-desc{margin-top:12px;font-size:15.5px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.stay .sp-tags{margin-top:12px}
.stay-bits{display:grid;margin:14px 0 0;border-top:1px solid var(--line-2)}
.stay-bits>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:15px}
.stay-bits dt{color:var(--muted);flex:none}
.stay-bits dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
.stay-bits dd small{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.stay-also{margin-top:12px;font-size:14.5px;color:var(--muted);overflow-wrap:anywhere}
.stay-also b{color:var(--fg)}
.stay-by{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:13px;line-height:1.4;color:var(--muted)}
.stay-by .ic{width:15px;height:15px;flex:none;margin-top:1px}
.tile--priv{background:var(--k-priv-bg);color:var(--k-priv-ink)}
.tile--priv .mp{box-shadow:0 0 0 2px #fff}   /* the magenta checked corner keeps a white ring on gold */
.sp-kindnote{margin-top:4px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.ss.is-peek .sp-kindnote{display:none}

.fhint{display:block;font-size:13px;line-height:1.4;color:var(--muted)}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.tickrow{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:var(--surface);font-size:15.5px;line-height:1.4;cursor:pointer}
.tickrow input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:0;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1.8px var(--line-2);display:grid;place-items:center;cursor:pointer;transition:background .2s,box-shadow .2s}
.tickrow input:checked{background:var(--fg);box-shadow:none}
.tickrow input:checked::after{content:"";width:12px;height:6px;margin-top:-2px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg)}
.tickrow input:focus-visible{outline:3px solid var(--mag);outline-offset:2px}
.tickrow b{display:block}
.tickrow small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
.ms-prop .field input[type="text"],.ms-prop .field input[type="tel"],.ms-prop .field input[type="email"]{min-height:54px}
.ms-prop .cf-q h3 small{display:block}

.prop-list{display:grid;gap:12px}
.prop-card{border-radius:24px;background:var(--surface);padding:16px;display:grid;gap:8px}
.prop-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.prop-top b{font-stretch:106%;font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.prop-top .tag{flex:none;background:#fff}
.prop-top .tag.tag--ink{background:var(--fg)}
.prop-top .tag.tag--mag{background:var(--mag-soft)}
.prop-sub{font-size:14px;color:var(--muted)}
.prop-note{font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.prop-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.stay-steps{counter-reset:s;display:grid;gap:12px;margin:18px 0 14px}
.stay-steps li{position:relative;padding-left:40px;font-size:15px;line-height:1.45;color:var(--muted);counter-increment:s}
.stay-steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;background:var(--fg);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.stay-steps li b{color:var(--fg)}

.pp-wrap{position:relative;height:min(52vh,420px);border-radius:24px;overflow:hidden;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.pp-map{position:absolute;inset:0}
.pp-pin{position:absolute;left:50%;top:50%;width:48px;height:64px;margin:-56px 0 0 -24px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(11,15,20,.25));z-index:2}
.pp-locate{position:absolute;z-index:3;right:12px;bottom:12px;width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:var(--fg);box-shadow:var(--sh-float);display:grid;place-items:center}
.pp-locate .ic{width:22px;height:22px}
.pp-locate.busy .ic{animation:spin 1s linear infinite}
.prop-card .btn--white{box-shadow:inset 0 0 0 1.5px var(--line-2)}