:root{
  --ink:#16202B; --paper:#FFFFFF; --mist:#F0F2F5; --line:#DCE1E6; --muted:#5C6875;
  --me:#1A73E8; --spot:#7B42E0; --video:#F2B705; --club:#D9432B; --link:#1F5FC9;
  --top-h:110px; --sheet-h:196px;
  --f-body:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-cond:"Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --lift:0 1px 2px rgba(22,32,43,.18), 0 6px 18px rgba(22,32,43,.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:#E9E6E1;color:var(--ink);font:16px/1.45 var(--f-body);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--link);outline-offset:2px}

#map{position:fixed;inset:0;z-index:0;background:#E9E6E1}
.maplibregl-ctrl-top-right{top:var(--top-h)}
.maplibregl-ctrl-attrib{font:11px/1.3 var(--f-body)}
.maplibregl-ctrl-attrib a{color:var(--muted)}

/* top bar */
.top{position:fixed;z-index:500;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top) + 10px) 10px 8px;pointer-events:none}
.top > *{pointer-events:auto}
.search{display:flex;align-items:center;gap:6px;height:50px;padding:0 4px 0 14px;background:var(--paper);border-radius:14px;box-shadow:var(--lift)}
.search > svg{flex:none;width:20px;height:20px;color:var(--muted)}
.search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:17px}
.search input::placeholder{color:#8A94A0}
.search input::-webkit-search-cancel-button{display:none}
.icon-btn{flex:none;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}
.icon-btn svg{width:20px;height:20px}
.chips{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:none;padding:1px 1px 3px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border:0;border-radius:18px;background:var(--paper);box-shadow:0 1px 3px rgba(22,32,43,.22);font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap}
.chip .sw{width:10px;height:10px;border-radius:50%;background:var(--c)}
.chip .n{font-family:var(--f-cond);font-weight:600;font-size:16px;color:var(--muted);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.chip[aria-pressed="true"] .n{color:rgba(255,255,255,.65)}
.chip[aria-pressed="true"] .sw{box-shadow:0 0 0 2px #fff}

/* floating buttons */
.fabs{position:fixed;z-index:450;right:10px;bottom:calc(var(--sheet-h) + 12px);display:flex;flex-direction:column;gap:10px;transition:bottom .28s var(--ease), opacity .2s}
body.dragging .fabs{transition:none}
body[data-sheet="full"] .fabs{opacity:0;pointer-events:none}
.fab{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:var(--lift);cursor:pointer}
.fab svg{width:24px;height:24px}
.fab[aria-pressed="true"]{background:var(--ink);color:#fff}
.fab.busy svg{animation:spin 1.1s linear infinite}
.fab.has-fix svg .dotc{fill:var(--me)}
@keyframes spin{to{transform:rotate(360deg)}}

/* bottom sheet */
.sheet{position:fixed;z-index:600;left:0;right:0;bottom:0;height:var(--sheet-h);display:flex;flex-direction:column;background:var(--paper);border-radius:20px 20px 0 0;box-shadow:0 -2px 24px rgba(22,32,43,.18);transition:height .28s var(--ease)}
body.dragging .sheet{transition:none}
.grab{flex:none;touch-action:none;cursor:grab;user-select:none}
.handle{display:block;width:100%;height:22px;padding:0;border:0;background:none;cursor:pointer}
.handle::before{content:"";display:block;width:42px;height:5px;margin:0 auto;border-radius:3px;background:#C5CCD3}
.list-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:0 18px 8px}
.list-head h2{margin:0;font:700 25px/1.1 var(--f-cond);letter-spacing:.005em}
.count{font-size:15px;color:var(--muted)}
.geo{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;font-size:14px;color:var(--muted)}
.geo:empty{display:none}
.geo button{padding:6px 0;border:0;background:none;color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(env(safe-area-inset-bottom) + 18px)}

/* list */
.list{list-style:none;margin:0;padding:0 8px}
.list li + li{border-top:1px solid var(--mist)}
.row{display:grid;grid-template-columns:42px auto minmax(0,1fr) 12px;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:12px;background:none;text-align:left;cursor:pointer}
.row:active{background:var(--mist)}
@media (hover:hover){.row:hover{background:var(--mist)}}
.bear{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ink)}
.bear svg{width:22px;height:22px;fill:#fff}
.from-center .bear{background:var(--mist)}
.from-center .bear svg{fill:#8A94A0}
.dist{display:flex;flex-direction:column;min-width:58px;line-height:1}
.dist b{font:700 23px/1 var(--f-cond);font-variant-numeric:tabular-nums;white-space:nowrap}
.dist small{margin-top:4px;font-size:13px;font-weight:500;color:var(--muted)}
.info{display:flex;flex-direction:column;min-width:0}
.name,.snip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.name{font-weight:600}
.snip{font-size:14px;color:var(--muted)}
.dot{width:12px;height:12px;border-radius:50%;background:var(--c)}
.t-spot{--c:var(--spot)} .t-video{--c:var(--video)} .t-club{--c:var(--club)}
.more{display:block;margin:10px auto 0;min-height:44px;padding:0 20px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);font-weight:600;cursor:pointer}
.empty{margin:8px 18px 0;color:var(--muted)}
.empty button{display:block;margin-top:10px;min-height:44px;padding:0 18px;border:0;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;cursor:pointer}
.note{max-width:60ch;margin:18px 18px 0;font-size:13px;line-height:1.45;color:var(--muted)}

/* my location */
.me{display:block;width:auto;height:44px;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}

/* detail */
.detail{padding:0 18px 4px}
.back{display:inline-flex;align-items:center;gap:2px;min-height:40px;margin-left:-6px;padding:0 10px 0 2px;border:0;border-radius:10px;background:none;color:var(--muted);font-weight:600;cursor:pointer}
.back svg{width:22px;height:22px}
.d-title{margin:2px 0 8px;font:700 31px/1.05 var(--f-cond);outline:none}
.d-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:14px}
.tag{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 9px;border-radius:999px;background:var(--mist);font-size:14px;font-weight:600}
.tag::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.d-dist{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.d-dist .bear{width:30px;height:30px}
.d-dist .bear svg{width:17px;height:17px}
.d-dist b{font:700 20px/1 var(--f-cond)}
.d-desc{max-width:62ch;margin:0 0 6px;white-space:pre-line}
.d-desc.none{color:var(--muted)}
.d-block h3{margin:18px 0 8px;font-size:15px;font-weight:600;color:var(--muted)}
.vids{display:grid;gap:10px}
.vid{position:relative;display:block;max-width:440px;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:var(--ink);color:#fff;text-decoration:none}
.vid img{display:block;width:100%;height:100%;object-fit:cover;opacity:.88}
.vid span{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 10px;border-radius:999px;background:rgba(22,32,43,.88);font-weight:600;font-size:14px}
.vid span svg{width:14px;height:14px;fill:#fff}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.thumbs a{flex:none}
.thumbs img{display:block;height:100px;border-radius:10px;background:var(--mist)}
.links{margin:0;padding:0;list-style:none}
.links li + li{margin-top:6px}
.links a{color:var(--link);word-break:break-all}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0 0}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:6px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);text-align:center;text-decoration:none;font-weight:600;line-height:1.2;cursor:pointer}
.btn svg{flex:none;width:20px;height:20px}
.btn.primary{grid-column:1 / -1;min-height:54px;border-color:var(--ink);background:var(--ink);color:#fff;font-size:17px}
.btn.wide{grid-column:1 / -1}
.d-foot{margin:14px 0 0;font-size:13px;color:var(--muted)}

.toast{position:fixed;z-index:900;left:50%;top:calc(var(--top-h) + 6px);width:max-content;max-width:calc(100% - 32px);padding:10px 16px;border-radius:12px;background:var(--ink);color:#fff;font-size:15px;opacity:0;transform:translate(-50%,-6px);transition:opacity .2s, transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* add + edit */
.fab.add{background:var(--ink);color:#fff}
body[data-mode="pick"] .fab.add,body[data-mode="form"] .fab.add{display:none}
body[data-mode="pick"] .handle{visibility:hidden}
.d-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.edit-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font-weight:600;cursor:pointer}
.edit-btn svg{width:17px;height:17px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 14px}
.tag-chip{display:inline-flex;align-items:center;gap:2px;min-height:30px;padding:0 11px;border:0;border-radius:999px;background:var(--mist);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.tag-chip .tx{display:grid;place-items:center;width:24px;height:24px;margin-right:-6px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer}

.picker{position:fixed;z-index:420;left:50%;top:50%;width:44px;height:56px;margin:-54px 0 0 -22px;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.picker svg{display:block;width:100%;height:100%}
.pick{padding:0 18px 6px}
.pick h2{margin:0 0 4px;font:700 25px/1.1 var(--f-cond)}
.pick p{margin:0 0 12px;font-size:15px;color:var(--muted)}
.pick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick-actions .primary{grid-column:1 / -1}

.form{padding:0 18px 8px}
.field{display:block;margin:16px 0 0}
.field > span{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--muted)}
.field input[type=text],.field input[type=url],.field textarea{display:block;width:100%;min-height:48px;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);font-size:16px;outline:none}
.field textarea{min-height:108px;resize:vertical;line-height:1.4}
.field input:focus,.field textarea:focus{border-color:var(--ink)}
.loc > span{font-size:15px}
.loc{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:5px 5px 5px 13px;border:1.5px solid var(--line);border-radius:12px;font-variant-numeric:tabular-nums}
.small-btn{flex:none;min-height:38px;padding:0 12px;border:0;border-radius:9px;background:var(--mist);font-weight:600;cursor:pointer}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:6px;margin-bottom:6px}
.vrow .x{display:grid;place-items:center;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--muted);cursor:pointer}
.vrow .x svg{width:18px;height:18px}
.vstat{grid-column:1 / -1;margin:0 2px 4px;font-size:13px;font-weight:500}
.vstat:empty{display:none}
.vstat.ok{color:#1E7B45}
.vstat.bad{color:var(--club)}
.link-btn{padding:6px 0;border:0;background:none;color:var(--link);font-weight:600;cursor:pointer}
.tagbox{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:48px;padding:6px 8px;border:1.5px solid var(--line);border-radius:12px;cursor:text}
.tagbox:focus-within{border-color:var(--ink)}
.tagchips{display:contents}
.tagbox input[type=text]{flex:1;min-width:130px;min-height:34px;padding:4px;border:0;border-radius:0;font-size:16px}
.sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sugg:empty{display:none}
.sugg button{min-height:32px;padding:0 11px;border:1.5px dashed #C5CCD3;border-radius:999px;background:var(--paper);font-size:14px;cursor:pointer}
.check{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-weight:500;cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--ink)}
.form-err{margin:14px 0 0;color:var(--club);font-weight:600}
.form-err:empty{display:none}
.btn.danger{border-color:#F0C8BF;color:#B8321C}
.btn.danger.armed{border-color:var(--club);background:var(--club);color:#fff}

.d-actions{display:flex;gap:8px}
.star-btn{display:grid;place-items:center;width:44px;height:40px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);cursor:pointer}
.star-btn svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.star-btn[aria-pressed="true"] svg{fill:#F5B301;stroke:#9A6F00}
.chip.fav svg{width:16px;height:16px;fill:#F5B301;stroke:#9A6F00;stroke-width:1.6;stroke-linejoin:round}
.chip.fav[aria-pressed="true"] svg{stroke:#fff}
.fstar{display:inline-block;width:14px;height:14px;margin:0 5px -1px 0;fill:#F5B301;stroke:#9A6F00;stroke-width:1.6;stroke-linejoin:round;vertical-align:baseline}
.chip.tagsbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.active-tags{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.active-tags:empty{display:none}
.atag{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 9px 0 12px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;cursor:pointer}
.atag svg{width:14px;height:14px}
.amode{font-size:13px;color:var(--muted)}
.tagsview{padding:0 18px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:4px 0 2px;padding:4px;border-radius:12px;background:var(--mist)}
.seg button{min-height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(22,32,43,.15)}
.tg h3{margin:18px 0 8px;font-size:14px;font-weight:600;color:var(--muted)}
.tg-list{display:flex;flex-wrap:wrap;gap:6px}
.tsel{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);font-size:15px;font-weight:500;cursor:pointer}
.tsel .n{font:600 15px/1 var(--f-cond);color:var(--muted);font-variant-numeric:tabular-nums}
.tsel[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.tsel[aria-pressed="true"] .n{color:rgba(255,255,255,.65)}
.tsel:disabled{opacity:.38;cursor:default}
.tags-foot{position:sticky;bottom:0;margin-top:20px;padding:16px 0 4px;background:linear-gradient(rgba(255,255,255,0),#fff 40%)}
.tags-foot .btn{width:100%}
.mydata{margin:22px 18px 0;padding:14px;border-radius:14px;background:var(--mist)}
.mydata h3{margin:0 0 4px;font-size:15px}
.mydata p{margin:0 0 10px;font-size:14px;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mydata .btn{min-height:44px}

@media (min-width:760px){
  .top{right:auto;width:400px;padding:12px}
  .chips{flex-wrap:wrap;overflow:visible}
  .maplibregl-ctrl-top-right{top:0}
  .sheet{left:12px;right:auto;top:var(--top-h);bottom:12px;width:376px;height:auto;border-radius:18px;box-shadow:var(--lift)}
  .grab{cursor:default;padding-top:14px}
  .handle{display:none}
  .fabs{right:10px;bottom:110px !important;opacity:1 !important;pointer-events:auto !important}
  .toast{left:calc(400px + (100% - 400px) / 2);top:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* map layers and restriction zones (grid colours: keep in sync with GRID_STEPS in js/zones.js) */
.fab.active{background:var(--ink);color:#fff}
.layersview,.zoneview{padding:0 18px 4px}
.lv-h{margin:18px 0 8px;font-size:14px;font-weight:600;color:var(--muted)}
.zone-row{display:grid;grid-template-columns:22px 18px minmax(0,1fr);align-items:start;gap:10px;padding:10px 0;border-top:1px solid var(--mist);cursor:pointer}
.zone-row input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink)}
.zone-row b,.zone-items b{display:block;font-weight:600}
.zone-row small,.zone-items small{display:block;font-size:13px;line-height:1.4;color:var(--muted)}
.zsw{width:18px;height:18px;margin-top:2px;border-radius:5px}
.zsw-grid{background:linear-gradient(90deg,#B71C1C,#E65100,#F9A825,#9E9D24,#689F38)}
.zsw-airport{background:rgba(194,24,91,.16);box-shadow:inset 0 0 0 2px #C2185B}
.zsw-nature{background:rgba(46,125,50,.16);box-shadow:inset 0 0 0 2px #2E7D32}
.zsw-hop{background:rgba(141,110,99,.55)}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:-2px 0 8px 50px;font-size:13px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:12px;height:12px;border-radius:3px}
.lg0{background:#B71C1C}.lg1{background:#E65100}.lg2{background:#F9A825}.lg3{background:#9E9D24}.lg4{background:#689F38}
.zone-note{margin:16px 0 0;padding:12px 14px;border-radius:14px;background:var(--mist);font-size:14px}
.zone-note p{margin:0 0 8px}
.zone-note .btn{width:100%;margin-top:4px}
.zone-hint{margin:12px 0 0;font-size:13px;color:var(--muted)}
.zone-gps{margin:-2px 0 6px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.zone-items{margin:8px 0 0;padding:0;list-style:none}
.zone-items li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--mist)}

/* zone badges on spots (list rows), zone icons in the detail and the zone filter.
   Tones: inner zone red, outer zone blue; grid colours come from .lg0 to .lg4 */
.zbadges{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:5px}
.zbadges:empty{display:none}
.zi{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;box-shadow:0 0 0 1.5px #fff,0 1px 2px rgba(22,32,43,.25)}
.zi svg{width:14px;height:14px;fill:currentColor}
.zi-inner{background:#D32F2F}.zi-outer{background:#1976D2}.zi-hop{background:#8D6E63}.zi-nature{background:#2E7D32}
.zi.lg2,.zi.lg3{color:var(--ink)}
.zb-grid{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 0;border-radius:11px;background:var(--mist);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.zone-items li{grid-template-columns:22px minmax(0,1fr) !important}
.zf-row{grid-template-columns:22px 22px minmax(0,1fr);align-items:center}
.seg5{grid-template-columns:repeat(5,1fr)}
.seg5 button{padding:0 2px;font-size:13px}
.chip.zonesbtn svg{width:16px;height:16px}
.atag svg + svg{margin-left:-2px}
.zones-block .zone-items{margin-top:0}
.zones-block .zone-note{margin-top:10px}
#zonesNote a{color:var(--link)}

/* account: sign in, membership request, admin approvals */
.accountview{padding:0 18px 4px}
.accountview .btn{width:100%;margin-top:10px}
.acc-form .field:first-child{margin-top:10px}
.acc-list{margin:4px 0 0;padding:0;list-style:none}
.acc-list li{padding:12px 0;border-top:1px solid var(--mist)}
.acc-list b{display:block;font-weight:600}
.acc-list small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted)}
.acc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.acc-actions .btn{width:auto;margin-top:0;min-height:44px}

/* chip for the account, first in the row so signing in is obvious */
.chip.accountbtn svg{width:17px;height:17px}
.chip.accountbtn[aria-pressed="true"] svg{color:#fff}