/* v5: colours for the ten categories (checked to stay apart from each other in light and dark), tag chips, a two-column legend.
   Danger is now red; the amber that used to mean danger becomes "caution", so warning badges in the UI follow it. */
:root{
  --c-hazard:#D23B2A; --c-caution:#C98A00; --c-shop:#2D7A57; --c-amenity:#6B7078; --c-parking:#2F57C9;
  --c-hidden:#0B8199; --c-sight:#7A3FA8; --c-walk:#6E8B1E; --c-photo:#C23A6E; --c-odd:#8A5A36;
  --c-toilet:#2B95E0; --c-view:#E06A1A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-hazard:#F2705F; --c-caution:#F2BA2E; --c-shop:#5CBF8F; --c-amenity:#B4B9C2; --c-parking:#7C9BF2;
    --c-hidden:#3EC3DA; --c-sight:#B48BE6; --c-walk:#B5CF4E; --c-photo:#F07AA6; --c-odd:#C99A72;
    --c-toilet:#62C0FF; --c-view:#FF8B3D;
  }
}
:root[data-theme="dark"]{
  --c-hazard:#F2705F; --c-caution:#F2BA2E; --c-shop:#5CBF8F; --c-amenity:#B4B9C2; --c-parking:#7C9BF2;
  --c-hidden:#3EC3DA; --c-sight:#B48BE6; --c-walk:#B5CF4E; --c-photo:#F07AA6; --c-odd:#C99A72;
  --c-toilet:#62C0FF; --c-view:#FF8B3D;
}

/* warning badges keep their amber */
.testbox{border-color:var(--c-caution)}
.citychip .tb,.gpsb.poor i,.adminb{background:var(--c-caution)}
.tabbtn .n,.checks .warn .dot{background:var(--c-caution)}
.tag.warn{border-color:var(--c-caution);color:var(--c-caution)}

/* ten categories: a tighter grid so the capture screen does not grow too long */
.catgrid{gap:7px}
.catopt{padding:9px 11px}
.catopt b{font-size:.94rem}
.catopt small{font-size:.74rem}

/* tag picker on the capture screen */
.tagh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tagh h3 small{margin-left:4px;font-family:var(--body);font-size:.76rem;font-weight:500;color:var(--ink-3)}
.tagh .linkbtn{flex:none;font-size:.82rem}
.tagpick{display:flex;flex-wrap:wrap;gap:7px}
.tagchip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:.88rem;line-height:1.2}
.tagchip span{font-size:1rem}
.tagchip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tagchip.more{color:var(--ink-2);border-style:dashed}

/* tags on things and records */
.tags{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.tags span{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.78rem;color:var(--ink-2);white-space:nowrap}
.tags b{margin-left:2px;font-weight:700;color:var(--ink)}

/* legend: two columns once there are ten colours */
.legend .lgb{grid-template-columns:auto auto;column-gap:14px}
.legend .lg.muted,.legend .lg:has(.plate){grid-column:1 / -1}

/* v6: tags in the current range, over the map */
.ov-tags{position:absolute;top:10px;left:max(10px,env(safe-area-inset-left,0px));right:62px;z-index:4;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:1px 2px 4px}
.ov-tags::-webkit-scrollbar{display:none}
.ov-tags .lbl{flex:none;font-size:.7rem;font-weight:700;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 7px}
.rtag{flex:none;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:.8rem;white-space:nowrap;box-shadow:var(--shadow-2)}
.rtag b{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--ink-3)}
.rtag[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rtag[aria-pressed="true"] b{color:var(--paper)}
.rtag.x{width:32px;padding:0;justify-content:center}
.rtag .ic{width:15px;height:15px}

/* v6: personal coordinates */
.privck{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:4px 2px 6px;background:none;border:0;color:var(--ink)}
.privck .box{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid var(--line-2);background:var(--surface);display:grid;place-items:center;color:transparent}
.privck .box .ic{width:15px;height:15px}
.privck[aria-pressed="true"] .box{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.privck .tx{display:grid;gap:1px;min-width:0}
.privck b{font-size:.9rem}
.privck small{font-size:.74rem;line-height:1.35;color:var(--ink-3)}
.privkinds{display:flex;flex-wrap:wrap;gap:7px}
.privsw{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--ink)}
.privsw .lbl{flex:1;display:grid;gap:2px;min-width:0}
.privsw small{font-size:.76rem;color:var(--ink-3)}
.privsw .knob{flex:none;position:relative;width:44px;height:26px;border-radius:999px;background:var(--line-2);transition:background .2s}
.privsw .knob::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.privsw[aria-checked="true"] .knob{background:var(--ok)}
.privsw[aria-checked="true"] .knob::after{transform:translateX(18px)}
.privrow{display:flex;align-items:center;gap:8px}
.privrow .srow{flex:1;min-width:0}
.pth{width:34px;height:34px;border-radius:9px;object-fit:cover;background:var(--paper);border:1px dashed var(--ink-3);display:grid;place-items:center;font-size:1.05rem}

/* v7: anchor-pin member doors and sign-in */
.pindoors{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pindoors .btn{min-height:52px}
.memline{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:.84rem;color:var(--ink-2)}
.memline .grow{flex:1;display:grid;gap:2px;min-width:0}
.memline small{font-size:.76rem;color:var(--warn)}
.mrules{margin:0;padding-left:18px;display:grid;gap:5px;font-size:.84rem;line-height:1.5;color:var(--ink-2)}
.mrules b{color:var(--ink);font-weight:600}
.code6{font-size:1.7rem;letter-spacing:.45em;text-align:center;padding-left:.45em}
.mmlinks{display:flex;justify-content:space-between;gap:10px}

/* v8: every record has a place name and words; both fields carry a "required" mark */
label.f .fq{display:flex;align-items:center;gap:7px}
.req{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:1px 7px;border-radius:999px;color:var(--sign);background:var(--sign-soft)}
.in.need{border-color:var(--c-hazard);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-hazard) 18%,transparent)}
#capTextSec .note{margin:8px 0 0}
.tname{margin:0;font-family:var(--display);font-size:1.08rem;line-height:1.3;overflow-wrap:anywhere}
.pname{margin:0;font-size:.98rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
/* v8: a private pin opened in the bottom sheet */
.pv-photo{display:block;width:100%;max-height:48vh;object-fit:cover;border-radius:14px;background:var(--paper);border:1px dashed var(--line-2)}
.pv-meta{margin:0;font-size:.78rem;color:var(--ink-3)}
.pv-acts{display:flex;flex-wrap:wrap;gap:8px}
.sh-foot.pv-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
.pv-far{font-size:.8rem;line-height:1.35;color:var(--ink-3)}
.pv-count{margin-left:4px;font-family:var(--mono);font-size:.74rem;font-weight:500;color:var(--ink-3)}
/* v9: payment QR images (editor list, and what the customer sees after ordering) */
.qred{display:grid;gap:8px;font-size:.84rem;color:var(--ink-2);font-weight:500}
.qred .fq{display:flex;align-items:baseline;gap:8px}
.qred .fq small{font-family:var(--mono);font-weight:500;color:var(--ink-3)}
.qred > small{font-weight:400;line-height:1.45}
.qrrow{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:8px}
.qrrow img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#fff;border:1px solid var(--line)}
.qrimgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qrimgs.one{grid-template-columns:minmax(0,320px);justify-content:center}
.qrimg{display:grid;gap:6px;justify-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none}
.qrimg img{width:100%;max-height:340px;object-fit:contain;border-radius:8px;background:#fff}
.qrimg span{font-size:.86rem;font-weight:600}
/* v9: tell the shop on LINE */
.linebox{display:grid;gap:6px}
.linebox p{margin:0;font-size:.8rem;text-align:center}
.btn.lineb{background:#06C755;border-color:#06C755;color:#fff}
.btn.lineb .ic{stroke:#fff}
/* v9: private pin backup */
.pv-backup{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* v10: the LINE Official Account hint under the contact block's LINE field */
.lineoa{margin:-4px 0 0;font-size:.8rem}
/* v11: the one-time ad measurement question: above the dock on the map, at the bottom on the city gate */
.adc{position:absolute;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:6;display:grid;gap:10px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.adc p{margin:0;font-size:.86rem;line-height:1.45;color:var(--ink-2)}
#phone:has(#world[hidden]) .adc{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
#phone:has(#layer:not([hidden])) .adc,#phone:has(#sheet:not([hidden])) .adc,#phone:has(#modal:not([hidden])) .adc{display:none}
/* v12: the empty-soi note sits small at the top, so the hex blocks in the middle stay in view */
.empty-note{top:10px;left:max(10px,env(safe-area-inset-left,0px));right:62px;transform:none;width:auto;text-align:left;font-size:.76rem;line-height:1.45;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--surface) 88%,transparent)}
.empty-note b{font-size:.86rem;margin-bottom:1px}
/* v12: member plans (trial), hide on my map */
.plans{display:grid;gap:10px}
.simtag{margin-left:6px;font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px;background:var(--c-caution);color:#fff;vertical-align:middle}
.plcard{display:grid;gap:8px;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface)}
.plcard.on{border-color:var(--ok)}
.plcard .ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.plcard .ph b{font-size:1rem}
.plcard .price{font-family:var(--mono);font-size:.88rem;font-weight:500;color:var(--ink-2);white-space:nowrap}
.plcard ul{margin:0;padding-left:18px;display:grid;gap:3px;font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.plcard .st{margin:0;font-size:.8rem;font-weight:600;color:var(--ok)}
.plcard .st.end{color:var(--warn)}
.plcard .btn.sm{justify-self:start}
.hidebar{display:flex;justify-content:center;padding:6px 0 2px}
.hidebar .linkbtn{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-3)}
.hidebar .ic{width:15px;height:15px}
.hidlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hidlist li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
.hidlist .grow{flex:1;display:grid;gap:1px;min-width:0}
.hidlist small{font-size:.76rem;color:var(--ink-3)}
/* v12 admin: member trial tab and the per-city distribution map */
.plgrid{display:grid;grid-template-columns:minmax(110px,1fr) 1fr 1fr;gap:8px 10px;align-items:center;font-size:.86rem}
.plgrid b{font-size:.78rem;color:var(--ink-3);font-weight:600}
.steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.simsubs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.simsub{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.simsub .grow{flex:1 1 260px;display:grid;gap:3px;min-width:0}
.simsub small{font-size:.8rem;color:var(--ink-3)}
.simsub .tag{justify-self:start;margin-left:0;font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:999px;border:1px solid currentColor}
.simsub .grow > b + .tag{margin-top:2px}
.st-active{color:var(--ok)} .st-canceled{color:var(--c-caution)} .st-ended{color:var(--ink-3)}
.simsub .acts{display:flex;flex-wrap:wrap;gap:6px}
.chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.chiprow .sep{width:1px;height:20px;background:var(--line-2);margin:0 4px}
.distcv{display:block;width:100%;height:400px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.distleg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-3)}
.distleg i{width:120px;height:10px;border-radius:999px;background:linear-gradient(90deg,rgb(214,228,250),rgb(28,79,159))}
.distleg .grow{flex:1}
.disttop{margin:0;padding-left:22px;display:grid;gap:4px;font-size:.84rem}
.disttop li{display:flex;gap:12px;align-items:baseline}
.disttop .n{min-width:48px;font-weight:700;font-variant-numeric:tabular-nums}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .distleg i{background:linear-gradient(90deg,rgb(44,64,102),rgb(141,182,255))} }
:root[data-theme="dark"] .distleg i{background:linear-gradient(90deg,rgb(44,64,102),rgb(141,182,255))}
/* v13: GPS-first gate, location guide, city name on entry, coordinate map while posting, legend */
#gateIn .cities,#gateIn .gq{display:none}
.gate .tagline{font-size:1rem;max-width:36ch}
.gpsgo{min-height:52px;font-size:1rem}
.gpsgo .ic{width:20px;height:20px}
.gstat .locl{justify-self:center}
.gcard.once{border-color:var(--sign);background:var(--sign-soft)}
.gcard.once .big,.gcard.den .big{font-size:1.02rem}
.gcard .mineh{font-size:.8rem;color:var(--ink-3)}
.gcard .linkbtn{justify-self:start}
.locsteps{margin:0;padding-left:22px;display:grid;gap:7px;font-size:.88rem;line-height:1.5;color:var(--ink)}
.locsteps li::marker{font-weight:700;color:var(--sign)}
.locmodal .lb{gap:10px}
.locbr{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.locbr>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:.95rem}
.locbr>summary::-webkit-details-marker{display:none}
.locbr>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .15s}
.locbr[open]>summary::after{transform:rotate(-135deg)}
.locbr[open]{border-color:var(--line-2)}
.locbr .mine{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--sign);color:var(--on-sign)}
.locpl{display:grid;gap:6px;padding:4px 14px 14px}
.locpl h4{margin:0;font-size:.8rem;color:var(--ink-3);font-weight:600}
.locpl.here h4{color:var(--sign)}
.citysplash{position:absolute;inset:0;z-index:7;display:grid;place-content:center;justify-items:center;gap:6px;pointer-events:none;text-align:center;padding:0 24px;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--paper) 82%,transparent),transparent);animation:csp 2.6s ease forwards}
.citysplash b{font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,10vw,3rem);line-height:1.05;color:var(--ink);letter-spacing:-.01em;text-shadow:0 0 18px var(--paper),0 0 4px var(--paper)}
.citysplash small{font-size:.9rem;color:var(--ink-2);text-shadow:0 0 10px var(--paper)}
@keyframes csp{0%{opacity:0;transform:scale(.94)}14%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.03)}}
@media (prefers-reduced-motion: reduce){ .citysplash{animation:cspr 2.6s linear forwards} @keyframes cspr{0%,80%{opacity:1}100%{opacity:0}} }
.capmap{display:block;width:100%;height:200px;border-radius:14px;border:1px solid var(--line);touch-action:manipulation;cursor:pointer}
.capmaplg{margin:0;font-size:.84rem;line-height:1.45;color:var(--ink-2)}
#capMap[hidden]{display:none}
.legend[open]>summary::after{content:"✕";margin-left:8px;font-weight:700;color:var(--ink-3)}