/* Layout: playful neo-brutalist — yellow brand bar, chunky search + chip strip, a grid of colour-cycling sticker cards; a cafe opens as its own view (#cafe-id) */
:root{
  --bg:#FFF3D6; --surface:#FFFFFF; --ink:#141010; --muted:#4A403A; --edge:#141010;
  --on-bright:#141010; --paper:#FFFFFF; --cream:#FFF3D6;
  --yellow:#FFC93C; --pink:#FF9EC4; --mint:#7DE2B8; --sky:#94C8FF; --orange:#FF7A3D; --danger:#C8231B;
  --sh:4px 4px 0 var(--edge); --sh-lg:6px 6px 0 var(--edge);
  --display:"Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1B1612; --surface:#2A221C; --ink:#FFF3E6; --muted:#D8C9BA; --edge:#FFF3E6; --danger:#FF8A80; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1B1612; --surface:#2A221C; --ink:#FFF3E6; --muted:#D8C9BA; --edge:#FFF3E6; --danger:#FF8A80; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1.2px,transparent 1.2px);background-size:22px 22px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--yellow)}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:800;text-wrap:balance;margin:0;line-height:1.08;letter-spacing:-.02em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
a{color:inherit;font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px}

header.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--yellow);color:var(--on-bright);border-bottom:3px solid var(--on-bright)}
header.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand svg{background:var(--paper);border:2.5px solid var(--on-bright);border-radius:10px;padding:3px;box-shadow:3px 3px 0 var(--on-bright);transform:rotate(-6deg)}
.brand b{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.03em}
.brand small{display:block;font-size:12px;font-weight:600;margin-top:-3px}
@media (max-width:480px){.brand small{display:none}}

.btn{border:2.5px solid var(--edge);border-radius:12px;padding:9px 16px;font-weight:800;cursor:pointer;background:var(--pink);color:var(--on-bright);display:inline-flex;align-items:center;gap:6px;box-shadow:var(--sh);min-height:44px}
.bar .btn{border-color:var(--on-bright);box-shadow:3px 3px 0 var(--on-bright);background:var(--paper)}
.btn.ghost{background:var(--surface);color:var(--ink)}
.btn.danger{background:var(--surface);color:var(--danger)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 var(--edge)}

.intro{padding-block:32px 8px;display:grid;gap:10px}
.intro h1{font-size:clamp(34px,7vw,64px)}
.intro mark{background:var(--pink);color:var(--on-bright);padding:0 .18em;border:3px solid var(--edge);border-radius:12px;box-shadow:var(--sh);display:inline-block;transform:rotate(-3deg)}
.intro p{margin:0;color:var(--muted);max-width:58ch;font-size:16px;font-weight:500}
.sticker{justify-self:start;background:var(--mint);color:var(--on-bright);border:2.5px solid var(--edge);border-radius:999px;padding:3px 12px;font:700 12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em;box-shadow:3px 3px 0 var(--edge);transform:rotate(2deg)}

.tools{display:grid;gap:14px;padding-block:18px}
.search{display:flex;gap:10px;flex-wrap:wrap}
.search input,.search select{border:2.5px solid var(--edge);border-radius:12px;background:var(--surface);box-shadow:var(--sh);min-height:46px}
.search input{flex:1 1 260px;min-width:0;padding:10px 14px;font-weight:500}
.search select{padding:9px 12px;font-weight:700}
.chips{display:flex;gap:10px;overflow-x:auto;padding:2px 6px 8px 2px;scrollbar-width:thin}
.chip{flex:none;border:2.5px solid var(--edge);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:3px 3px 0 var(--edge);min-height:40px}
.chip[aria-pressed="true"]{background:var(--mint);color:var(--on-bright);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.seg{display:inline-flex;border:2.5px solid var(--edge);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:3px 3px 0 var(--edge)}
.seg button{border:0;border-right:2.5px solid var(--edge);background:none;padding:6px 12px;font-weight:700;font-size:13px;cursor:pointer;min-height:38px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--yellow);color:var(--on-bright)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.label{font:700 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.count{color:var(--muted);font-size:13px;font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;padding-bottom:56px;padding-top:4px}
.card{--c:var(--yellow);background:var(--c);color:var(--on-bright);border:3px solid var(--edge);border-radius:18px;padding:18px;display:grid;gap:12px;align-content:start;text-align:left;cursor:pointer;min-width:0;box-shadow:var(--sh-lg)}
.card:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--edge)}
.card h3{font-size:22px}
.card .meta,.card .count,.card .snip{color:var(--on-bright)}
.card .meta{opacity:.8}
.meta{color:var(--muted);font-size:13px;font-weight:600}
.score{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.badge{background:var(--on-bright);color:var(--cream);font:800 15px/1 var(--mono);border-radius:8px;padding:6px 8px;transform:rotate(-3deg)}
.badge.new{background:var(--paper);color:var(--on-bright);border:2px solid var(--on-bright)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{background:var(--paper);color:var(--on-bright);border:2px solid var(--on-bright);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700}
.snip{margin:0;font-size:14px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;border-top:2px dashed currentColor;padding-top:10px}
.stars{letter-spacing:1px;font-size:15px}
.card .stars{color:var(--on-bright)}
.stars,.panel .stars,.rev .stars{color:var(--orange)}
.card .stars{color:var(--on-bright)}
.stars .off{opacity:.25}

.empty{background:var(--surface);border:3px dashed var(--edge);border-radius:18px;padding:36px 20px;text-align:center;display:grid;gap:12px;justify-items:center;grid-column:1/-1}
.empty svg{transform:rotate(-8deg)}
.empty h3{font-size:26px}
.empty p{margin:0;color:var(--muted);max-width:46ch;font-weight:500}

/* detail */
.back{background:none;border:0;color:var(--ink);cursor:pointer;padding:18px 0 4px;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:28px;padding-bottom:64px;align-items:start}
@media (max-width:820px){.detail{grid-template-columns:1fr}}
.dhead{display:grid;gap:10px;padding-block:8px 18px}
.dhead h1{font-size:clamp(32px,6vw,54px)}
.panel{background:var(--surface);border:3px solid var(--edge);border-radius:18px;padding:18px;display:grid;gap:14px;box-shadow:var(--sh-lg)}
.big{font-family:var(--display);font-size:56px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.dist{display:grid;gap:6px}
.dist div{display:grid;grid-template-columns:22px 1fr 28px;gap:8px;align-items:center;font:700 12px var(--mono);color:var(--muted)}
.dist i{display:block;height:12px;border-radius:6px;background:var(--paper);border:2px solid var(--on-bright);overflow:hidden}
.dist i span{display:block;height:100%;background:var(--orange)}
.subs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sub{display:grid;gap:2px;background:var(--paper);border:2px solid var(--on-bright);border-radius:10px;padding:8px 10px;color:var(--on-bright)}
.sub .label{color:var(--on-bright)!important;opacity:.75}
.sub b{font:800 20px var(--mono)}
.reviews{display:grid;gap:16px;align-content:start}
.reviews>h2{font-size:28px}
.rev{background:var(--surface);border:3px solid var(--edge);border-radius:16px;padding:16px;display:grid;gap:10px;box-shadow:var(--sh)}
.rev:nth-of-type(odd){transform:rotate(-.4deg)}
.rev:nth-of-type(even){transform:rotate(.4deg)}
.who{display:flex;align-items:center;gap:10px}
.who img{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--edge)}
.who b{font-size:15px;font-weight:800}
.rev p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-weight:500}
.mini{font-size:12px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;font-weight:600}

/* forms */
form{display:grid;gap:16px}
.panel h3{font-size:22px}
.field{display:grid;gap:6px}
.field input,.field textarea,.field select{padding:10px 12px;border:2.5px solid var(--edge);border-radius:10px;background:var(--bg);width:100%;min-width:0;font-weight:500;min-height:44px}
.field input:focus,.field textarea:focus{box-shadow:3px 3px 0 var(--edge);outline:none}
.field textarea{min-height:100px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.two{grid-template-columns:1fr}}
.starpick{display:flex;gap:6px}
.starpick button{width:40px;height:40px;background:var(--surface);border:2.5px solid var(--edge);border-radius:10px;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);padding:0;box-shadow:2px 2px 0 var(--edge)}
.starpick button.on{background:var(--yellow);color:var(--on-bright)}
.starpick.small{gap:4px}
.starpick.small button{width:30px;height:30px;font-size:14px;border-width:2px;border-radius:8px}
.subpick{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;font-size:14px;font-weight:600}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;gap:6px;align-items:center;border:2px solid var(--edge);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;cursor:pointer;background:var(--surface)}
.checks label:has(input:checked){background:var(--mint);color:var(--on-bright);border-color:var(--on-bright)}
.checks input{accent-color:var(--on-bright)}
.note{font-size:13px;color:var(--muted);margin:0;font-weight:500}
.err{color:var(--danger);font-size:13px;font-weight:700;margin:0}
.addview{max-width:660px;padding-bottom:64px}
.addview .panel{background:var(--sky);color:var(--on-bright)}
.addview .panel .label{color:var(--on-bright)}
.addview .panel .field input{background:var(--paper);color:var(--on-bright);border-color:var(--on-bright)}
.addview .panel .checks label{background:var(--paper);color:var(--on-bright);border-color:var(--on-bright)}
.addview .panel .checks label:has(input:checked){background:var(--mint)}
.addview .panel .btn{border-color:var(--on-bright);box-shadow:4px 4px 0 var(--on-bright)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--mint);color:var(--on-bright);border:3px solid var(--on-bright);box-shadow:4px 4px 0 var(--on-bright);padding:10px 18px;border-radius:12px;font-weight:800;z-index:20;transform:translateX(-50%) rotate(-1.5deg)}

@media (prefers-reduced-motion:no-preference){
  .btn,.chip,.card,.starpick button{transition:transform .12s ease,box-shadow .12s ease,background-color .12s}
  .btn:hover:not(:disabled):not(:active){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--edge)}
  .bar .btn:hover:not(:active){box-shadow:5px 5px 0 var(--on-bright)}
  .card:hover:not(:active){transform:translate(-3px,-3px) rotate(-.8deg);box-shadow:9px 9px 0 var(--edge)}
  .chip:hover:not([aria-pressed="true"]){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--edge)}
  .starpick button:hover{transform:translateY(-2px) rotate(-6deg)}
  .starpick button.on{animation:pop .25s ease}
  .toast:not([hidden]){animation:drop .3s cubic-bezier(.3,1.6,.5,1)}
}
@keyframes pop{50%{transform:scale(1.18) rotate(-8deg)}}
@keyframes drop{from{transform:translate(-50%,30px) rotate(4deg);opacity:0}}

/* place sheet (Google Maps style): left panel on desktop, bottom sheet on phones */
body.locked{overflow:hidden}
.scrim{position:fixed;inset:0;background:rgba(20,16,16,.45);z-index:30}
.sheet{position:fixed;z-index:31;top:0;left:0;bottom:0;width:min(440px,100%);background:var(--surface);color:var(--ink);border-right:3px solid var(--edge);box-shadow:8px 0 0 var(--edge);overflow-y:auto;overscroll-behavior:contain;padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));padding-left:env(safe-area-inset-left,0px)}
@media (max-width:700px){
  .sheet{top:auto;right:0;width:100%;max-height:88%;border-right:0;border-top:3px solid var(--edge);border-radius:22px 22px 0 0;box-shadow:0 -6px 0 var(--edge);padding-top:0;padding-left:0}
  .grab{display:block!important}
}
.grab{display:none;width:48px;height:6px;border-radius:3px;background:var(--edge);margin:10px auto 0;position:absolute;left:50%;transform:translateX(-50%);z-index:2;opacity:.6}
.hero{--c:var(--yellow);position:relative;height:170px;background:var(--c);border-bottom:3px solid var(--edge);overflow:hidden;display:grid;place-items:center;color:var(--on-bright)}
.hero svg.cup{width:110px;height:110px;transform:rotate(-10deg);filter:drop-shadow(5px 5px 0 var(--on-bright))}
.hero .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(20,16,16,.18) 1.5px,transparent 1.5px);background-size:16px 16px}
.x{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;background:var(--paper);color:var(--on-bright);border:2.5px solid var(--on-bright);box-shadow:3px 3px 0 var(--on-bright);font-size:18px;font-weight:800;cursor:pointer;z-index:3;display:grid;place-items:center}
.x:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--on-bright)}
.sh-pad{padding:16px 20px}
.sh-head{display:grid;gap:6px;padding-bottom:6px}
.sh-head h2{font-size:28px}
.rline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.rline b{font:800 16px var(--mono)}
.actions{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-top:10px;padding-bottom:18px;border-bottom:3px solid var(--edge)}
.act{display:grid;justify-items:center;gap:6px;background:none;border:0;cursor:pointer;color:var(--ink);text-decoration:none;font-weight:800;font-size:12px;padding:0}
.act .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--on-bright);border:2.5px solid var(--edge);box-shadow:3px 3px 0 var(--edge);font-size:20px}
.act:nth-child(2) .ic{background:var(--pink)}
.act:nth-child(3) .ic{background:var(--mint)}
.act:nth-child(4) .ic{background:var(--sky)}
.act:nth-child(5) .ic{background:var(--orange)}
.act:active .ic{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.tabs{position:sticky;top:0;z-index:2;display:flex;background:var(--surface);border-bottom:3px solid var(--edge)}
.tabs button{flex:1;background:none;border:0;padding:13px 6px 10px;font-weight:800;font-size:14px;cursor:pointer;color:var(--muted);border-bottom:5px solid transparent;margin-bottom:-3px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--orange)}
.tabbody{display:grid;gap:18px}
.info{display:grid;border:2.5px solid var(--edge);border-radius:14px;overflow:hidden}
.info>div,.info>a{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;padding:12px 14px;border-bottom:2px dashed color-mix(in srgb,var(--edge) 30%,transparent);text-decoration:none;color:var(--ink);font-weight:600;min-width:0}
.info>:last-child{border-bottom:0}
.info svg{width:22px;height:22px}
.info .dim{color:var(--muted);font-weight:500}
.summary{background:var(--yellow);color:var(--on-bright);border:3px solid var(--edge);border-radius:16px;padding:16px;display:grid;gap:14px;box-shadow:var(--sh)}
.summary .label,.summary .count,.summary .note,.summary .dist div,.summary .stars{color:var(--on-bright)}
.sec{display:grid;gap:12px}
.sec h3{font-size:20px}
.feat{display:grid;gap:8px}
.feat div{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:2px solid var(--edge);border-radius:10px;font-weight:700}
.feat div.no{border-style:dashed;color:var(--muted);font-weight:500}
.sheet .rev{transform:none!important;box-shadow:3px 3px 0 var(--edge)}
.sheet .panel{box-shadow:var(--sh)}
@media (prefers-reduced-motion:no-preference){
  .sheet:not([hidden]){animation:slideL .28s cubic-bezier(.2,1.2,.4,1)}
  .scrim:not([hidden]){animation:fade .2s}
  @media (max-width:700px){.sheet:not([hidden]){animation:slideU .3s cubic-bezier(.2,1.1,.4,1)}}
}
@keyframes slideL{from{transform:translateX(-100%)}}
@keyframes slideU{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}

/* rotating coffee word in the hero */
.intro mark{--m:var(--pink);background:var(--m);position:relative;overflow:hidden;white-space:nowrap;vertical-align:bottom;line-height:1.1}
#brewWord{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .intro mark{transition:width .38s cubic-bezier(.3,1.4,.5,1),background-color .3s,transform .38s cubic-bezier(.3,1.6,.5,1)}
  #brewWord.out{animation:brewOut .24s ease-in forwards}
  #brewWord.in{animation:brewIn .42s cubic-bezier(.3,1.6,.5,1)}
}
@keyframes brewOut{to{transform:translateY(-110%) rotate(-8deg);opacity:0}}
@keyframes brewIn{from{transform:translateY(110%) rotate(8deg);opacity:0}}

/* ---- community features ---- */
header.bar .nav{display:flex;justify-content:flex-start;gap:8px;padding-block:0 10px;overflow-x:auto}
.nav a{border:2.5px solid var(--on-bright);border-radius:999px;padding:4px 14px;font-weight:800;font-size:14px;text-decoration:none;background:var(--paper);color:var(--on-bright);box-shadow:2px 2px 0 var(--on-bright);white-space:nowrap}
.nav a[aria-current="true"]{background:var(--on-bright);color:var(--yellow)}
.linkbtn{background:none;border:0;padding:0;color:var(--muted);font-weight:700;font-size:12px;text-decoration:underline;cursor:pointer}
.plink{color:inherit;font-weight:800}
.av{border-radius:50%;flex:none;object-fit:cover;display:inline-block;vertical-align:middle}
.av.ph{background:var(--sky);border:2px solid var(--edge)}
.helpful,.vote{border:2px solid var(--edge);background:var(--surface);color:var(--ink);border-radius:999px;padding:4px 12px;font-weight:800;font-size:13px;cursor:pointer;box-shadow:2px 2px 0 var(--edge);display:inline-flex;gap:6px;align-items:center;min-height:34px}
.helpful[aria-pressed="true"],.vote[aria-pressed="true"]{background:var(--mint);color:var(--on-bright)}
.revfoot{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.repform{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px;border:2px dashed var(--edge);border-radius:10px}
.repform select{padding:6px 8px;border:2px solid var(--edge);border-radius:8px;background:var(--bg);min-height:38px}
.repform .btn{min-height:38px;padding:6px 12px;font-size:13px}
.thumb{display:block;width:calc(100% + 36px);max-width:none;margin:-18px -18px 0;aspect-ratio:16/9;object-fit:cover;border-bottom:3px solid var(--edge);border-radius:15px 15px 0 0}
.card.is-closed{filter:grayscale(.75);opacity:.8}
.heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.closedbar{margin:4px 0 0;border:2px dashed var(--danger);color:var(--danger);font-weight:800;padding:6px 10px;border-radius:10px}
.livebox{display:flex;gap:12px;align-items:center;border:2.5px solid var(--edge);border-radius:14px;padding:12px 14px;background:var(--mint);color:var(--on-bright)}
.livebox .count{color:var(--on-bright)}
.livebox.off{background:var(--surface);color:var(--ink);border-style:dashed}
.livebox.off .count{color:var(--muted)}
.pulse{width:12px;height:12px;border-radius:50%;background:var(--on-bright);flex:none}
.votebox{display:flex;justify-content:space-between;gap:12px;align-items:center;border:2.5px solid var(--edge);border-radius:14px;padding:12px 14px;background:var(--pink);color:var(--on-bright)}
.votebox .count{color:var(--on-bright)}
.votebox .btn{border-color:var(--on-bright);box-shadow:3px 3px 0 var(--on-bright);background:var(--paper);color:var(--on-bright);flex:none}
.tips{display:grid;gap:6px}
.tip{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 12px;border:2px solid var(--edge);border-radius:10px;font-weight:600}
.tip b{font-family:var(--mono)}
.tip .mini{grid-column:1/-1}
.tipform{display:flex;gap:8px;flex-wrap:wrap}
.tipform input,.tipform select{flex:1 1 140px;min-width:0;padding:8px 10px;border:2.5px solid var(--edge);border-radius:10px;background:var(--bg);min-height:44px;font-weight:500}
.tipform input[type=number]{flex:0 1 96px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ph{margin:0;border:2.5px solid var(--edge);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:3px 3px 0 var(--edge);min-width:0}
.ph img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-bottom:2.5px solid var(--edge)}
.ph figcaption{padding:8px 10px;display:grid;gap:2px;font-size:13px;overflow-wrap:anywhere}
.qa{border:2.5px solid var(--edge);border-radius:14px;padding:14px;display:grid;gap:10px;background:var(--surface);box-shadow:3px 3px 0 var(--edge)}
.qline,.aline{display:grid;grid-template-columns:30px 1fr;gap:10px;min-width:0}
.qline p,.aline p{margin:0;font-weight:700;overflow-wrap:anywhere}
.aline p{font-weight:500}
.aline{padding-left:18px}
.qmark{width:30px;height:30px;border-radius:8px;border:2px solid var(--edge);display:grid;place-items:center;font:800 14px var(--mono);background:var(--yellow);color:var(--on-bright)}
.qmark.a{background:var(--sky)}
.ansform{display:flex;gap:8px}
.ansform input{flex:1;min-width:0;padding:8px 10px;border:2px solid var(--edge);border-radius:10px;background:var(--bg);min-height:40px}
.ansform .btn{min-height:40px;padding:6px 12px;font-size:13px}
.edit{display:grid;gap:10px;border:2.5px solid var(--edge);border-radius:14px;padding:12px 14px}
.meter{height:10px;border:2px solid var(--edge);border-radius:6px;overflow:hidden;background:var(--bg);margin-top:6px}
.meter i{display:block;height:100%;background:var(--mint)}
.rchips{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.rchips legend{margin-bottom:6px;padding:0}
.rchips label{position:relative;border:2px solid var(--edge);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;cursor:pointer;background:var(--surface)}
.rchips input{position:absolute;opacity:0;pointer-events:none}
.rchips label:has(input:checked){background:var(--yellow);color:var(--on-bright)}
.rchips label:has(input:focus-visible){outline:3px solid var(--orange)}
.checks.col{flex-direction:column;align-items:stretch}
.checks.col label{border-radius:10px;justify-content:space-between}
.strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--surface);border:3px solid var(--edge);border-radius:14px;padding:10px 14px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);margin-bottom:18px}
.strip .sticker{background:var(--pink);transform:rotate(-2deg)}
.strip b{font-family:var(--display);font-size:18px}
.strip .go{margin-left:auto;font-weight:800}
.cview{padding-bottom:64px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:820px){.cgrid{grid-template-columns:1fr}}
.block{background:var(--surface);border:3px solid var(--edge);border-radius:18px;padding:18px;display:grid;gap:14px;align-content:start;box-shadow:var(--sh-lg);min-width:0}
.block.wide{grid-column:1/-1}
.block h3{font-size:20px}
.cotw-block{background:var(--pink);color:var(--on-bright)}
.cotw-block .note,.cotw-block .label,.cotw-block .count{color:var(--on-bright)}
.cotw-block .tipform select{background:var(--paper);color:var(--on-bright);border-color:var(--on-bright)}
.cotw-block .btn{border-color:var(--on-bright);box-shadow:3px 3px 0 var(--on-bright)}
.winner{display:grid;gap:6px;background:var(--paper);border:3px solid var(--on-bright);border-radius:14px;padding:14px;text-decoration:none;color:var(--on-bright);box-shadow:4px 4px 0 var(--on-bright);transform:rotate(-1deg)}
.winner h2{font-size:28px}
.winner .meta{color:var(--on-bright)}
.winner .badge{justify-self:start}
.bars{display:grid;gap:8px}
.barrow{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr 28px;gap:8px;align-items:center;text-decoration:none;color:inherit;font-weight:700;font-size:13px}
.barrow>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barrow i{height:12px;border:2px solid var(--on-bright);border-radius:6px;background:var(--paper);overflow:hidden}
.barrow i span{display:block;height:100%;background:var(--orange)}
.barrow b{font-family:var(--mono);text-align:right}
.lb{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lb li{display:grid;grid-template-columns:24px auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:2px solid var(--edge);border-radius:12px}
.lb li:nth-child(1){background:var(--yellow);color:var(--on-bright)}
.lb li:nth-child(2){background:var(--sky);color:var(--on-bright)}
.lb li:nth-child(3){background:var(--mint);color:var(--on-bright)}
.rank{font:800 16px var(--mono)}
.lbname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb b{font-family:var(--mono)}
.how summary{cursor:pointer;font-weight:800;font-size:13px}
.how p{margin-top:6px}
.feed{display:grid}
.frow{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:2px dashed color-mix(in srgb,var(--edge) 25%,transparent)}
.frow:last-child{border-bottom:0}
.frow a{color:inherit;font-weight:800}
.fextra{font-size:14px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.fthumb{display:block;width:140px;max-width:100%;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--edge);border-radius:8px;margin-top:4px}
.lcards{display:grid;gap:10px}
.lcard{display:grid;gap:2px;padding:12px 14px;border:2.5px solid var(--edge);border-radius:12px;text-decoration:none;color:var(--on-bright);background:var(--sky);box-shadow:3px 3px 0 var(--edge)}
.lcard:nth-child(2n){background:var(--yellow)}
.lcard .count,.lcard .mini{color:var(--on-bright)}
.reqform{display:grid;gap:8px}
.reqform input{padding:8px 10px;border:2.5px solid var(--edge);border-radius:10px;background:var(--bg);min-height:44px;width:100%;min-width:0}
.reqs{display:grid;gap:8px}
.req{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border:2px solid var(--edge);border-radius:12px}
.req>div:first-child{min-width:0;overflow-wrap:anywhere}
.reqact{display:flex;gap:6px;align-items:center;flex:none}
.reqact .btn{min-height:36px;padding:5px 12px;font-size:13px}
.block.mod{border-color:var(--danger)}
.modrow{display:grid;gap:8px;padding:10px 0;border-bottom:2px dashed color-mix(in srgb,var(--edge) 30%,transparent)}
.modrow:last-child{border-bottom:0}
.modrow .btn{min-height:36px;padding:5px 12px;font-size:13px}
.pview{display:grid;gap:26px;padding-bottom:64px}
.phead{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-top:28px}
.phead>div{flex:1;min-width:0;display:grid;gap:6px}
.phead h1{font-size:clamp(30px,6vw,52px);overflow-wrap:anywhere}
.phead .av{border:3px solid var(--edge);box-shadow:var(--sh)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
.stat{border:2.5px solid var(--edge);border-radius:14px;padding:12px;background:var(--surface);display:grid;box-shadow:3px 3px 0 var(--edge)}
.stat b{font:800 26px var(--mono)}
.pview h2{font-size:26px;display:flex;gap:10px;align-items:baseline}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:22px;padding:6px}
.stamp{aspect-ratio:1;border-radius:50%;border:3px dashed var(--on-bright);outline:3px solid var(--edge);outline-offset:3px;background:var(--c);color:var(--on-bright);display:grid;place-content:center;text-align:center;padding:14px;text-decoration:none;transform:rotate(var(--t));gap:2px;min-width:0}
.sname{font:800 14px/1.1 var(--display);overflow-wrap:anywhere}
.sarea{font-size:11px;font-weight:600}
.sdate{font:800 11px var(--mono);letter-spacing:.06em;border-top:2px solid var(--on-bright);padding-top:3px;margin-top:3px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.bdg{display:grid;gap:4px;justify-items:start;padding:12px;border:2.5px dashed var(--edge);border-radius:14px;color:var(--muted);align-content:start}
.bdg.on{border-style:solid;background:var(--c);color:var(--on-bright);box-shadow:3px 3px 0 var(--edge)}
.bdg .mini{color:inherit}
.bmark{width:34px;height:34px;border-radius:50%;border:2.5px solid currentColor;display:grid;place-items:center;font-weight:800}
.prev{display:grid;gap:10px}
@media (prefers-reduced-motion:no-preference){
  .pulse{animation:ping 1.6s ease-out infinite}
  .helpful,.vote{transition:transform .12s,box-shadow .12s}
  .helpful:active,.vote:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--edge)}
  .stamp{transition:transform .2s}
  .stamp:hover{transform:rotate(0) scale(1.05)}
}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(20,16,16,.5)}100%{box-shadow:0 0 0 12px rgba(20,16,16,0)}}

/* ---- start choice, mood picker, endless list, Google compare ---- */
.start{display:grid;gap:16px;padding-block:10px 4px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.choice{grid-template-columns:1fr}}
.choose{display:grid;gap:6px;justify-items:start;text-align:left;cursor:pointer;border:3px solid var(--edge);border-radius:18px;padding:18px 20px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-lg)}
.choose b{font:800 clamp(22px,4vw,28px)/1.1 var(--display);letter-spacing:-.02em}
.choose>span:last-child{color:var(--muted);font-weight:500}
.ctag{font:700 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--edge);border-radius:999px;padding:0 10px;background:var(--bg)}
.choose[data-v="mood"][aria-pressed="true"]{background:var(--mint);color:var(--on-bright)}
.choose[data-v="browse"][aria-pressed="true"]{background:var(--sky);color:var(--on-bright)}
.choose[aria-pressed="true"]>span:last-child{color:var(--on-bright)}
.choose[aria-pressed="true"] .ctag{background:var(--paper);color:var(--on-bright);border-color:var(--on-bright)}
.choose[aria-pressed="true"]{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--edge)}
.moodbox{background:var(--surface);border:3px solid var(--edge);border-radius:18px;padding:18px;display:grid;gap:18px;box-shadow:var(--sh-lg)}
.mrow{display:grid;gap:8px;min-width:0}
.moods{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.mood{display:grid;gap:2px;text-align:left;border:2.5px solid var(--edge);border-radius:14px;padding:10px 12px;background:var(--bg);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--edge)}
.mood b{font-size:15px;font-weight:800}
.mood span{font-size:12px;color:var(--muted);font-weight:500}
.mood[aria-pressed="true"]{background:var(--yellow);color:var(--on-bright);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.mood[aria-pressed="true"] span{color:var(--on-bright)}
.wrapchips{flex-wrap:wrap;overflow:visible}
.mgrid{grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:end}
@media (max-width:700px){.mgrid{grid-template-columns:1fr}}
.mcol{display:grid;gap:8px;min-width:0}
.mcol select{padding:9px 12px;border:2.5px solid var(--edge);border-radius:12px;background:var(--bg);font-weight:700;min-height:44px;max-width:100%}
.moodbox .seg{flex-wrap:wrap;justify-self:start}
.hint{text-transform:none;letter-spacing:0;font-weight:500;font-family:var(--body)}
.resbar{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;justify-content:space-between;padding-block:4px 14px;scroll-margin-top:130px}
.resbar b{font-family:var(--display);font-size:20px}
.resbar:empty{display:none}
.ghead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:end;padding-top:14px;padding-bottom:8px;border-bottom:3px solid var(--edge)}
.ghead:first-child{padding-top:0}
.ghead h2{font-size:clamp(22px,4vw,30px)}
.ghead p{margin:0;color:var(--muted);font-weight:500;font-size:14px}
.ghead .count{grid-column:2;grid-row:1/span 2;align-self:end}
.card{position:relative}
.pickno{position:absolute;top:-13px;right:14px;background:var(--orange);color:var(--on-bright);border:2.5px solid var(--edge);border-radius:999px;padding:2px 10px;font:800 12px/1.4 var(--mono);transform:rotate(4deg);box-shadow:2px 2px 0 var(--edge);z-index:1}
.card.dim{opacity:.75}
.why{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;font-weight:700;border-top:2px dashed currentColor;padding-top:10px}
.why .mlabel{background:var(--on-bright);color:var(--cream);border-radius:6px;padding:1px 8px;font:700 12px/1.6 var(--mono)}
.why .miss{width:100%;font-weight:500;opacity:.85}
.gchip{border:2px solid var(--on-bright);border-radius:8px;padding:4px 6px;font:800 12px/1 var(--mono);background:var(--paper);color:var(--on-bright)}
.more{min-height:24px}
.loading{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);font-weight:700;padding:16px 0 48px}
.loading .dot{width:10px;height:10px;border-radius:50%;background:var(--orange);border:2px solid var(--edge)}
.endbox{display:grid;gap:10px;justify-items:center;text-align:center;padding:28px 16px;border:3px dashed var(--edge);border-radius:18px;background:var(--surface);margin:8px 0 64px}
.endbox .row{justify-content:center}
.totop{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:50%;background:var(--yellow);color:var(--on-bright);border:3px solid var(--edge);box-shadow:var(--sh);font:800 22px var(--display);cursor:pointer;z-index:8}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:380px){.compare{grid-template-columns:1fr}}
.cmp{display:grid;gap:4px;justify-items:start;align-content:start;border:2.5px solid var(--edge);border-radius:14px;padding:12px;box-shadow:3px 3px 0 var(--edge);color:var(--on-bright);min-width:0}
.cmp.kc{background:var(--yellow)}
.cmp.g{background:var(--sky)}
.cmp .label,.cmp .count,.cmp .stars{color:var(--on-bright)}
.cbig{font:800 34px/1 var(--display)}
.cmp .btn{min-height:36px;padding:5px 12px;font-size:13px;background:var(--paper);color:var(--on-bright);border-color:var(--on-bright);box-shadow:2px 2px 0 var(--on-bright);margin-top:6px;text-decoration:none}
.gbanner{display:flex;justify-content:space-between;gap:10px;align-items:center;border:2.5px solid var(--edge);border-radius:14px;padding:12px 14px;background:var(--sky);color:var(--on-bright);font-weight:800;text-decoration:none;box-shadow:3px 3px 0 var(--edge)}
@media (prefers-reduced-motion:no-preference){
  .choose,.mood{transition:transform .12s,box-shadow .12s,background-color .15s}
  .choose:hover:not([aria-pressed="true"]){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--edge)}
  .loading .dot{animation:hop .9s ease-in-out infinite}
  .loading .dot:nth-child(2){animation-delay:.15s}
  .loading .dot:nth-child(3){animation-delay:.3s}
}
@keyframes hop{50%{transform:translateY(-8px)}}

/* ---- illustrated covers ---- */
.thumbwrap{display:block;position:relative;width:calc(100% + 36px);margin:-18px -18px 0;border-bottom:3px solid var(--edge);border-radius:15px 15px 0 0;overflow:hidden}
.thumbwrap .thumb{display:block;width:100%;margin:0;border:0;border-radius:0;aspect-ratio:16/9;height:auto}
.artnote{position:absolute;left:8px;bottom:12px;background:rgba(255,255,255,.88);color:#141010;border:2px solid #141010;border-radius:6px;padding:0 6px;font:700 10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.hero svg.heroimg{position:absolute;inset:0;width:100%;height:100%}
.addph{position:absolute;left:12px;bottom:18px;z-index:3;background:var(--paper);color:var(--on-bright);border:2.5px solid var(--on-bright);border-radius:999px;padding:4px 12px;font-weight:800;font-size:13px;box-shadow:3px 3px 0 var(--on-bright);cursor:pointer}
.nohits{grid-column:1/-1;display:grid;gap:6px;padding:16px 18px;border:3px dashed var(--edge);border-radius:16px;background:var(--surface)}
.nohits h2{font-size:24px}
.nohits p{margin:0;color:var(--muted);font-weight:500}
.nohits .linkbtn{font-size:inherit;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.card:hover .art path[stroke-linecap="round"]{animation:steam 1.2s ease-in-out infinite}}
@keyframes steam{50%{transform:translateY(-2px)}}

/* ================= map mode ================= */
:root{--land:#F1EDE4;--road:#FFFFFF;--road-edge:#C8BEAE;--road-main:#FFD666;--road-main-edge:#141010;--water:#9FD0FF;--park:#BFEBD0;--mlabel:#3B342E;--mhalo:#FFFFFF;--route:#2F6BFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--land:#1A1613;--road:#5A4E44;--road-edge:#2C2520;--road-main:#9C7A2A;--road-main-edge:#050404;--water:#1D3A55;--park:#1F3A2B;--mlabel:#E9DED2;--mhalo:#1E1915;--route:#5B8CFF}}
:root[data-theme="dark"]{--land:#1A1613;--road:#5A4E44;--road-edge:#2C2520;--road-main:#9C7A2A;--road-main-edge:#050404;--water:#1D3A55;--park:#1F3A2B;--mlabel:#E9DED2;--mhalo:#1E1915;--route:#5B8CFF}
body.mapmode{overflow:hidden}
.mapview{position:fixed;left:0;right:0;top:var(--hdr,112px);bottom:0}
.map{position:absolute;inset:0;background:var(--land);overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.map:active{cursor:grabbing}
.map.picking,.map.picking:active{cursor:crosshair}
.msvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mwater{fill:var(--water)}
.mpark{fill:var(--park)}
.roads path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rc{stroke:var(--road-edge)}.rf{stroke:var(--road)}
.rc.c6{stroke-width:3}.rf.c6{stroke-width:1.5}
.rc.c5{stroke-width:4.5}.rf.c5{stroke-width:2.6}
.rc.c4{stroke-width:7}.rf.c4{stroke-width:4.6}
.rc.c3{stroke-width:8.5;stroke:var(--road-main-edge)}.rf.c3{stroke-width:5.5}
.rc.c2{stroke-width:10;stroke:var(--road-main-edge)}.rf.c2{stroke-width:6.5;stroke:var(--road-main)}
.rc.c1{stroke-width:11.5;stroke:var(--road-main-edge)}.rf.c1{stroke-width:8;stroke:var(--orange)}
.msvg[data-z="0"] .c6{display:none}.msvg[data-z="0"] .rc.c5{stroke-width:1.8}.msvg[data-z="0"] .rf.c5{stroke-width:.9}
.msvg[data-z="1"] .rc.c5{stroke-width:2.6}.msvg[data-z="1"] .rf.c5{stroke-width:1.3}.msvg[data-z="1"] .c6{display:none}
.msvg[data-z="0"] .rc.c4,.msvg[data-z="1"] .rc.c4{stroke-width:4.5}.msvg[data-z="0"] .rf.c4,.msvg[data-z="1"] .rf.c4{stroke-width:2.8}
.msvg[data-z="3"] .rc.c5{stroke-width:9}.msvg[data-z="3"] .rf.c5{stroke-width:6.5}.msvg[data-z="3"] .rc.c4{stroke-width:11}.msvg[data-z="3"] .rf.c4{stroke-width:8}
.rtc{fill:none;stroke:var(--edge);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rtf{fill:none;stroke:var(--route);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rtd{fill:none;stroke:var(--route);stroke-width:4;stroke-dasharray:1 8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mlabels,.mpins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rlabel{position:absolute;font:700 11px/1 var(--body);color:var(--mlabel);white-space:nowrap;letter-spacing:.02em;text-shadow:0 0 3px var(--mhalo),0 0 3px var(--mhalo),0 0 2px var(--mhalo),0 0 1px var(--mhalo)}
.pin{position:absolute;pointer-events:auto;transform:translate(-50%,calc(-100% - 9px));background:none;border:0;padding:0;cursor:pointer;z-index:1}
.pin b{position:relative;display:grid;place-items:center;min-width:38px;height:30px;padding:0 7px;background:var(--c);color:#141010;border:2.5px solid #141010;border-radius:10px;font:800 13px/1 var(--mono);box-shadow:3px 3px 0 #141010;white-space:nowrap}
.pin b::after{content:"";position:absolute;left:50%;bottom:-8px;width:11px;height:11px;background:var(--c);border-right:2.5px solid #141010;border-bottom:2.5px solid #141010;transform:translateX(-50%) rotate(45deg)}
.pname{position:absolute;left:calc(100% + 6px);top:3px;background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:7px;padding:2px 7px;font:800 12px/1.3 var(--body);white-space:nowrap;box-shadow:2px 2px 0 var(--edge)}
.pin.dim{opacity:.55}
.pin.closed b{filter:grayscale(1)}
.pin.hot,.pin.sel{z-index:3}
.pin.sel b{background:var(--orange);transform:scale(1.22);transform-origin:50% 100%}
.pin.sel b::after{background:var(--orange)}
.pin.hot b{transform:scale(1.12);transform-origin:50% 100%}
.startdot{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--route);border:3px solid #FFFFFF;outline:2.5px solid #141010;transform:translate(-50%,-50%);box-shadow:0 0 0 9px color-mix(in srgb,var(--route) 25%,transparent);z-index:2}
.startdot span{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:#141010;color:#FFFFFF;font:800 11px/1.5 var(--mono);padding:0 7px;border-radius:5px;white-space:nowrap}
.mctl{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(26px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;z-index:3}
.mctl button{width:44px;height:44px;border-radius:12px;background:var(--surface);color:var(--ink);border:2.5px solid var(--edge);box-shadow:3px 3px 0 var(--edge);font:800 20px/1 var(--display);cursor:pointer}
.mctl button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.mattr{position:absolute;right:8px;bottom:4px;font-size:10px;font-weight:600;color:var(--mlabel);background:color-mix(in srgb,var(--land) 85%,transparent);padding:1px 6px;border-radius:4px;z-index:2}
.pickbanner,.mapmsg{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:var(--yellow);color:var(--on-bright);border:3px solid var(--edge);border-radius:14px;padding:8px 10px 8px 14px;box-shadow:var(--sh);z-index:6;max-width:calc(100% - 24px)}
.pickbanner .btn{min-height:36px;padding:4px 12px;background:var(--paper);color:var(--on-bright);border-color:var(--on-bright)}
.mapmsg{background:var(--surface);color:var(--ink);font-weight:700}
.mapview .panel{position:absolute;left:14px;top:14px;bottom:14px;width:min(430px,calc(100% - 28px));overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border:3px solid var(--edge);border-radius:18px;box-shadow:var(--sh-lg);padding:4px 16px 16px;z-index:4}
.mapview .panel>*+*{margin-top:14px}
.grabbar{display:none}
.pintro{padding:10px 0 0;gap:10px}
.pintro h1{font-size:25px}
.mapview .panel .intro mark{border-width:2.5px;border-radius:9px;box-shadow:3px 3px 0 var(--edge)}
.mapview .panel .search{display:flex;gap:8px}
.mapview .panel .search input,.mapview .panel .search select{min-height:44px;box-shadow:3px 3px 0 var(--edge)}
.mapview .panel .tools .search select{flex:1;min-width:0}
.mapview .panel .choice{grid-template-columns:1fr 1fr;gap:10px}
.mapview .panel .choose{padding:10px 12px;border-radius:14px;box-shadow:var(--sh)}
.mapview .panel .choose b{font-size:17px}
.mapview .panel .choose>span:last-child{font-size:12px;line-height:1.35}
.mapview .panel .ctag{display:none}
.mapview .panel .moodbox{padding:12px;gap:14px;box-shadow:none;border-width:2.5px}
.mapview .panel .moods{grid-template-columns:1fr 1fr;gap:8px}
.mapview .panel .mood{padding:8px 10px}
.mapview .panel .mgrid{grid-template-columns:1fr}
.mapview .panel .tools{padding:0;gap:10px}
.mapview .panel .grid{grid-template-columns:1fr;gap:16px;padding:6px 6px 0 0}
.mapview .panel .card{box-shadow:var(--sh)}
.mapview .panel .card h3{font-size:19px}
.mapview .panel .ghead h2{font-size:20px}
.mapview .panel .strip{margin-bottom:0;box-shadow:3px 3px 0 var(--edge);padding:8px 12px}
.mapview .panel .strip b{font-size:15px}
.mapview .panel .resbar{padding:0}
.mapview .panel .resbar b{font-size:16px}
.mapview .panel .endbox{margin:6px 0 0}
.startline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px;font-weight:600;color:var(--muted)}
.startline .btn.small{min-height:34px;padding:4px 12px;font-size:13px;box-shadow:2px 2px 0 var(--edge)}
.sdot{width:12px;height:12px;border-radius:50%;background:var(--route);border:2px solid var(--edge)}
.kmchip{border:2px solid var(--on-bright);border-radius:8px;padding:4px 6px;font:700 12px/1 var(--mono);background:var(--paper);color:var(--on-bright)}
.kmchip.off{opacity:.7;font-weight:500}
.dirbox{display:grid;gap:10px;border:3px solid var(--edge);border-radius:16px;padding:14px;background:var(--surface);box-shadow:var(--sh)}
.dirbox .seg{justify-self:start;flex-wrap:wrap}
.dirsum{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-weight:700}
.dirsum .cbig{color:var(--route)}
.steps{margin:0;padding-left:22px;display:grid;gap:7px;font-size:14px}
.steps li{padding-left:2px}
.steps li>span:first-child{margin-right:8px}
@media (min-width:701px){body.mapmode .sheet{top:var(--hdr,112px);padding-top:0}}
@media (max-width:700px){
  .mapview .panel{left:0;right:0;bottom:0;top:auto;width:auto;height:44%;border-radius:22px 22px 0 0;border-bottom:0;box-shadow:0 -5px 0 var(--edge);padding:0 max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .mapview .panel.full{height:calc(100% - 10px)}
  .grabbar{display:grid;place-items:center;width:100%;height:24px;background:var(--bg);border:0;cursor:pointer;position:sticky;top:0;z-index:2}
  .grabbar span{width:48px;height:6px;border-radius:3px;background:var(--edge);opacity:.6}
  .mctl{bottom:auto;top:12px}
  .mattr{bottom:auto;top:4px;left:8px;right:auto}
  body.mapmode .sheet{max-height:68%}
  .pintro h1{font-size:22px}
}
@media (prefers-reduced-motion:no-preference){.mapview .panel{transition:height .25s ease}.pin b{transition:transform .15s}}

.areachips{display:flex;gap:8px;overflow-x:auto;padding:2px 6px 6px 2px;scrollbar-width:thin}
.areachips .chip{min-height:36px;padding:5px 12px}
.areachips .chip .count{font-size:11px;color:inherit;opacity:.7;margin-left:2px}
.regionlabel{position:absolute;transform:translate(-50%,-50%);font:800 clamp(14px,2vw,22px)/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--mlabel);opacity:.55;white-space:nowrap;text-shadow:0 0 4px var(--mhalo),0 0 4px var(--mhalo)}

/* ================= Airbnb-style split layout ================= */
.hwrap{max-width:1560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.hright{display:flex;gap:10px;align-items:center;justify-self:end}
header.bar .nav{display:flex;gap:6px;padding:0;overflow:visible}
.spill{display:none;position:relative;justify-self:center;width:min(640px,100%);align-items:stretch;background:var(--paper);color:var(--on-bright);border:3px solid var(--on-bright);border-radius:999px;box-shadow:4px 4px 0 var(--on-bright);padding:4px 4px 4px 6px}
body.splitmode .spill{display:flex}
.pseg{display:grid;gap:0;align-content:center;padding:4px 16px;border:0;border-right:2px solid color-mix(in srgb,#141010 18%,transparent);background:none;color:inherit;text-align:left;cursor:pointer;min-width:0;border-radius:999px;font:inherit}
.pseg:hover{background:color-mix(in srgb,#141010 6%,transparent)}
.pseg.grow{flex:1;border-right:0}
.plbl{font:800 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.pseg select,.pseg input{border:0;background:none;color:#4A403A;font:600 14px/1.4 var(--body);padding:0;min-width:0;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer}
.pseg input{cursor:text;width:100%}
.pseg input::placeholder{color:#7A7068}
.pval{font:600 14px/1.4 var(--body);color:#4A403A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.pval.set{color:#141010;font-weight:800}
.pgo{flex:none;width:46px;height:46px;border-radius:50%;background:var(--orange);color:#141010;border:2.5px solid #141010;display:grid;place-items:center;cursor:pointer;align-self:center}
.moodpop{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:3px solid var(--edge);border-radius:18px;box-shadow:var(--sh-lg);padding:16px;display:grid;gap:12px;z-index:40}
.mphead{display:grid;gap:2px}
.moodpop .moods{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.splitview{padding-bottom:40px}
.wide{max-width:1560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.chipbar{display:flex;gap:10px;align-items:center;overflow-x:auto;padding-block:14px 12px;border-bottom:3px solid var(--edge);scrollbar-width:thin}
.chipbar .chips{display:flex;gap:8px;overflow:visible;padding:0;flex:none}
.chipbar .chip{min-height:40px}
.chipbar .seg{flex:none}
.selchip{flex:none;display:inline-flex;align-items:center;gap:6px;border:2.5px solid var(--edge);border-radius:999px;padding:0 6px 0 14px;background:var(--surface);box-shadow:3px 3px 0 var(--edge);min-height:40px;font-weight:800;font-size:13px}
.selchip select{border:0;background:none;font:700 13px var(--body);color:var(--ink);padding:6px 4px;cursor:pointer}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px;padding-top:20px;align-items:start}
.listcol{min-width:0;display:grid;gap:16px;align-content:start}
.listcol .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0}
.listcol .resbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:0}
.listcol .resbar h2{font-size:clamp(22px,2.4vw,30px)}
.rbr{display:flex;gap:10px;align-items:center}
.btn.small{min-height:34px;padding:4px 12px;font-size:13px;box-shadow:2px 2px 0 var(--edge)}
.listcol .strip{margin:0}
.mapcol{min-width:0}
.mapbox{position:sticky;top:calc(var(--hdr,90px) + 14px);height:calc(100vh - var(--hdr,90px) - 28px);min-height:420px;border:3px solid var(--edge);border-radius:20px;overflow:hidden;box-shadow:var(--sh-lg)}
.mapbox .map{position:absolute;inset:0}
.acard{gap:8px;padding:16px 16px 14px}
.abadge{justify-self:start;background:var(--paper);color:#141010;border:2px solid #141010;border-radius:999px;padding:2px 10px;font:800 12px/1.5 var(--body);box-shadow:2px 2px 0 #141010}
.arow{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.arow h3{font-size:18px;min-width:0;overflow-wrap:anywhere}
.rts{display:grid;gap:3px;justify-items:end;flex:none}
.rt{font:800 13px/1.2 var(--mono);white-space:nowrap}
.rt span{font-weight:500;opacity:.75}
.rt.g{font-weight:700}
.ameta{font-size:14px;font-weight:500;opacity:.8}
.aprice{font-size:15px;margin-top:2px}
.aprice b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.aprice .muted{opacity:.7;font-size:14px}
.pin{transform:translate(-50%,-50%)}
.pin b{min-width:auto;height:30px;padding:0 11px;border-radius:999px;background:var(--paper);color:#141010;box-shadow:2px 2px 0 #141010}
.pin b::after{display:none}
.pin.hot b,.pin.sel b{background:#141010;color:#FFF3D6;transform:scale(1.12);transform-origin:50% 50%}
.pin.sel b{background:var(--orange);color:#141010}
.pname{top:3px}
.maptoggle{display:none;position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:26;background:#141010;color:#FFF3D6;border:3px solid #141010;border-radius:999px;padding:10px 22px;font:800 15px var(--body);box-shadow:4px 4px 0 var(--orange);cursor:pointer}
@media (min-width:861px){body.splitmode .sheet{top:var(--hdr,90px);padding-top:0}}
@media (max-width:1180px){.hwrap{grid-template-columns:auto 1fr;}.hright{grid-column:2}.spill{grid-column:1/-1;grid-row:2;width:100%}.brand small{display:none}}
@media (max-width:1100px){.listcol .grid{grid-template-columns:1fr}}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .listcol .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .mapcol{position:fixed;left:0;right:0;bottom:0;top:var(--hdr,150px);z-index:20;display:none}
  body.showmap .mapcol{display:block}
  .mapbox{position:absolute;inset:0;height:auto;min-height:0;border:0;border-radius:0;box-shadow:none;border-top:3px solid var(--edge)}
  .maptoggle{display:block}
  body.splitmode .sheet{max-height:68%}
  .hright .nav a{padding:3px 10px;font-size:13px}
  .pseg{padding:2px 10px}.pval{max-width:110px}
}
@media (max-width:520px){.hright{grid-column:1/-1;grid-row:3;justify-self:stretch;justify-content:space-between}.hwrap{grid-template-columns:1fr}.spill{grid-row:2}.pseg:first-child{max-width:34%}}
.placelabel{position:absolute;transform:translate(-50%,-50%);font:700 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mlabel);opacity:.7;white-space:nowrap;text-shadow:0 0 3px var(--mhalo),0 0 3px var(--mhalo),0 0 2px var(--mhalo)}
#addBtn{white-space:nowrap}@media (max-width:520px){#addBtn{padding:7px 12px;font-size:13px;min-height:40px}}

/* ---- cafe detail opens in place of the list (split view) ---- */
.dback{display:none}
body.detailopen .float>:not(#sheet):not(.fhandle):not(#cmpTray){display:none!important}
.float>#sheet{position:relative;inset:auto;top:auto;left:auto;right:auto;bottom:auto;width:auto;max-height:none;overflow:visible;z-index:1;border:3px solid var(--edge);border-radius:20px;box-shadow:var(--sh-lg);padding:0;background:var(--surface);animation:none!important}
.float>#sheet .dback{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:3px solid var(--edge);position:sticky;top:0;background:var(--surface);z-index:4;border-radius:0}
.float>#sheet .x,.float>#sheet .grab{display:none}
.float>#sheet .hero{height:clamp(160px,15vw,210px);border-radius:0}
.float>#sheet .sh-head h2{font-size:clamp(28px,3vw,40px)}
.float>#sheet .actions{grid-template-columns:repeat(5,minmax(0,110px));justify-content:start;gap:14px}
.float>#sheet .tabs{top:62px}
.float>#sheet .tabbody{max-width:760px}
.float>#sheet .compare{max-width:560px}
@media (prefers-reduced-motion:no-preference){.float>#sheet:not([hidden]){animation:rise .25s ease-out!important}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@media (max-width:860px){.float>#sheet{border-radius:16px;margin-inline:-4px}.float>#sheet .actions{grid-template-columns:repeat(5,1fr);gap:6px}.float>#sheet .dback{border-radius:13px 13px 0 0}}
.msvg[data-z="c"] .c4,.msvg[data-z="c"] .c5,.msvg[data-z="c"] .c6{display:none}
.msvg[data-z="c"] .rc.c3{stroke-width:3}.msvg[data-z="c"] .rf.c3{stroke-width:1.6}.msvg[data-z="c"] .rc.c2{stroke-width:4.5}.msvg[data-z="c"] .rf.c2{stroke-width:2.6}.msvg[data-z="c"] .rc.c1{stroke-width:6}.msvg[data-z="c"] .rf.c1{stroke-width:3.6}
.pin.dot{width:14px;height:14px;border-radius:50%;background:var(--orange);border:2.5px solid #141010;transform:translate(-50%,-50%);box-shadow:1px 1px 0 #141010}
.regionlabel.small{font-size:11px;letter-spacing:.08em;opacity:.75}
.openchip{display:inline-block;font:800 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.04em;padding:0 7px;border-radius:6px;border:2px solid currentColor;opacity:.85;margin-right:4px}
.openchip.on{background:#141010;color:#7DE2B8;border-color:#141010;opacity:1}
.info b.ok{color:var(--leaf,#2E6A48)}.info b.no{color:var(--danger)}

/* ---- the map is always the base; every page floats over it ---- */
[hidden]{display:none!important}
html,body{height:100%}
body{overflow:hidden;overscroll-behavior:none;margin:0}
.stage{position:fixed;left:0;right:0;top:var(--hdr,90px);bottom:0;z-index:0}
.stage>.map{position:absolute;inset:0}
.float{--fw:min(660px,52vw);position:fixed;z-index:12;left:max(14px,env(safe-area-inset-left,0px));top:calc(var(--hdr,90px) + 14px);bottom:14px;width:var(--fw);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  background-color:var(--bg);background-image:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1.2px,transparent 1.2px);background-size:22px 22px;
  border:3px solid var(--edge);border-radius:22px;box-shadow:var(--sh-lg);padding:0 18px 28px;scrollbar-width:thin}
@media (prefers-reduced-motion:no-preference){.float{transition:transform .3s cubic-bezier(.2,1,.3,1),height .28s cubic-bezier(.2,1,.3,1)}.float.dragging{transition:none}.fside{transition:left .3s cubic-bezier(.2,1,.3,1)}}
body.fcollapsed .float{transform:translateX(calc(-100% - 40px))}
.fside{position:fixed;z-index:13;top:calc(var(--hdr,90px) + 34px);left:calc(max(14px,env(safe-area-inset-left,0px)) + min(660px,52vw) - 3px);width:30px;height:58px;border:3px solid var(--edge);border-left:0;border-radius:0 12px 12px 0;background:var(--yellow);color:#141010;font:800 22px/1 var(--display);cursor:pointer;box-shadow:3px 3px 0 var(--edge);padding:0}
body.fcollapsed .fside{left:0}
.fhandle,.bnav{display:none}
.maptoggle,.scrim{display:none!important}
.float .chipbar{position:sticky;top:0;z-index:5;margin:0 -18px;padding:12px 18px;background:var(--bg);border-bottom:3px solid var(--edge)}
.float .listcol{padding-top:18px}
.float .listcol .grid,.cutgrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;padding:0}
.float>#sheet{margin:0 -18px;border:0;border-radius:0;box-shadow:none}
.float>#sheet .dback{border-radius:0}
.totop{position:fixed;left:calc(max(14px,env(safe-area-inset-left,0px)) + min(660px,52vw) - 70px);right:auto;bottom:32px;z-index:14}
.float .ghead{grid-column:1/-1}

/* homepage */
.home{display:grid;gap:34px;padding:18px 0 26px}
.hhero{display:grid;gap:14px;padding:24px 22px 20px;background:var(--yellow);color:#141010;border:3px solid var(--edge);border-radius:20px;box-shadow:var(--sh-lg)}
.hhero .sticker{background:var(--paper);color:#141010;border-color:#141010;box-shadow:3px 3px 0 #141010}
.hhero h1{font-size:clamp(38px,4.6vw,60px);line-height:.98}
.hhero .lede{font-size:16px;font-weight:600;margin:0;max-width:44ch;color:#141010}
.hhero .hk{color:#141010;opacity:.75;font-size:12px}
.hhero h1{color:#141010}
.hhero h1 mark{display:inline-block;padding:0 .18em;margin-top:6px;border:3px solid #141010;border-radius:12px;box-shadow:4px 4px 0 #141010;color:#141010;line-height:1.05}
.hsearch{display:flex;gap:8px;align-items:center;background:#fff;border:3px solid #141010;border-radius:999px;padding:5px 5px 5px 18px;box-shadow:4px 4px 0 #141010}
.hsearch input{flex:1;border:0;background:none;font:600 16px var(--body);outline:none;min-width:0;color:#141010}
.hsearch input::placeholder{color:#7A7068}
.hoods{display:flex;flex-wrap:wrap;gap:8px}
.hhero .hoods .chip{background:var(--paper);color:#141010;border-color:#141010;box-shadow:3px 3px 0 #141010}
.hoods.small .chip{min-height:34px;padding:4px 12px;font-size:12.5px}
.hoods .chip[aria-pressed="true"]{background:#141010;color:#FFF3D6}
.pour{margin:0;font:800 13px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.pour mark{display:inline-block;padding:1px 9px;border:2.5px solid #141010;border-radius:8px;color:#141010;font-size:14px;text-transform:none;letter-spacing:0;box-shadow:2px 2px 0 #141010}
.hsec{display:grid;gap:12px;min-width:0}
.hsec>header{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.hsec h2{font-size:clamp(24px,2.6vw,32px)}
.kicker{display:block;font:800 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px}
.plan{background:var(--c);color:#141010;border:3px solid var(--edge);border-radius:16px;padding:14px;display:grid;gap:4px;text-align:left;cursor:pointer;box-shadow:var(--sh);font:inherit;align-content:start}
.plan svg{width:30px;height:30px;margin-bottom:4px}
.plan b{font:800 18px/1.1 var(--display)}
.plan span{font-size:13px;font-weight:600;opacity:.85}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,44%);gap:14px;overflow-x:auto;padding:4px 6px 14px 4px;margin:0 -4px;scroll-snap-type:x proximity;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.cut{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--ink);border:3px solid var(--edge);border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:var(--sh);font-weight:inherit}
.cutcov{position:relative;height:118px;background-color:var(--c);background-image:radial-gradient(#14101029 1.4px,transparent 1.4px);background-size:14px 14px;border-bottom:3px solid var(--edge);display:grid;place-items:center;color:#141010}
.cutcov svg{width:62px;height:62px;transform:rotate(-8deg);stroke-width:2}
.cutn{position:absolute;right:10px;top:10px;background:var(--paper);border:2px solid #141010;border-radius:999px;padding:0 9px;font:800 11px/1.7 var(--mono);box-shadow:2px 2px 0 #141010}
.cutbody{padding:12px 14px 14px;display:grid;gap:3px;align-content:start}
.cutbody b{font:800 19px/1.1 var(--display)}
.cutbody>span:last-child{font-size:13.5px;font-weight:500;color:var(--muted)}
.drinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.drink{display:grid;gap:2px;text-decoration:none;background:var(--c);color:#141010;border:3px solid var(--edge);border-radius:14px;padding:12px;box-shadow:var(--sh)}
.drink svg{width:26px;height:26px}
.drink b{font:800 17px/1.15 var(--display)}
.drink span{font-size:12.5px;font-weight:600;opacity:.8}
.kbg{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}
.kchip{display:grid;gap:1px;text-align:left;border:2.5px solid var(--edge);border-radius:14px;padding:10px 12px;background:var(--surface);color:var(--ink);box-shadow:3px 3px 0 var(--edge);cursor:pointer;font:inherit}
.kchip b{font-size:14px}
.kchip span{font-size:12px;color:var(--muted);font-weight:600}
.kchip.off{border-style:dashed;box-shadow:none;opacity:.8}
.minis{grid-auto-columns:minmax(200px,40%)}
.mcard{text-decoration:none}
.mcard{display:grid;gap:3px;align-content:start;text-align:left;background:var(--c);color:#141010;border:3px solid var(--edge);border-radius:16px;padding:12px 14px;box-shadow:var(--sh);cursor:pointer;font:inherit;min-width:0}
.mcard b{font:800 16px/1.15 var(--display);overflow-wrap:anywhere}
.mcard span{font-size:13px;font-weight:600;opacity:.85}
.mcard .mrt{font:800 12px var(--mono);opacity:1}
.mcard .openchip{justify-self:start;margin-top:2px}
.journal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.jcard{display:grid;gap:6px;align-content:start;text-decoration:none;background:var(--c);color:#141010;border:3px solid var(--edge);border-radius:16px;padding:14px;box-shadow:var(--sh)}
.jcard .sticker{background:var(--paper);color:#141010;border-color:#141010;font-size:10px;box-shadow:2px 2px 0 #141010}
.jcard b{font:800 18px/1.15 var(--display)}
.jcard>span:last-child{font-size:13px;font-weight:600;opacity:.85}
.commgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.cbtn{display:grid;gap:2px;text-align:left;text-decoration:none;border:2.5px solid var(--edge);border-radius:14px;padding:12px;background:var(--surface);color:var(--ink);box-shadow:3px 3px 0 var(--edge);cursor:pointer;font:inherit}
.cbtn span{font-size:12.5px;color:var(--muted);font-weight:600}
.cutpage{display:grid;gap:22px;padding:16px 0 20px}
.dback2{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cuthead{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background-color:var(--c);background-image:radial-gradient(#14101024 1.4px,transparent 1.4px);background-size:14px 14px;color:#141010;border:3px solid var(--edge);border-radius:20px;padding:20px;box-shadow:var(--sh-lg)}
.cuthead>svg{width:64px;height:64px;transform:rotate(-8deg)}
.cuthead .kicker{color:#141010;opacity:.7}
.cuthead h1{font-size:clamp(30px,3.6vw,44px)}
.cuthead p{margin:6px 0 0;font-weight:600}
.how{background:var(--surface);border:2.5px solid var(--edge);border-radius:14px;padding:10px 14px;font-size:14px}
.how summary{font-weight:800;cursor:pointer}
.how p{margin:8px 0 0;color:var(--muted)}
.cview,.pview,.addview{padding-block:16px}

@media (max-width:860px){
  .float{left:0;right:0;width:auto;top:auto;bottom:calc(62px + env(safe-area-inset-bottom,0px));height:var(--fh,52vh);border-width:3px 0 0;border-radius:22px 22px 0 0;box-shadow:0 -5px 0 var(--edge);padding:0 14px 24px}
  body.fcollapsed .float{transform:none}
  .fhandle{display:grid;place-items:center;position:sticky;top:0;z-index:7;height:26px;margin:0 -14px;background:var(--bg);cursor:grab;touch-action:none}
  .fhandle span{width:52px;height:6px;border-radius:9px;background:var(--ink);opacity:.5}
  .float .chipbar{top:26px;margin:0 -14px;padding:8px 14px}
  .float>#sheet{margin:0 -14px}
  .float>#sheet .dback{top:26px}
  .float>#sheet .tabs{top:88px}
  .fside{display:none}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(62px + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px);background:var(--yellow);border-top:3px solid #141010}
  .bnav a{flex:1;display:grid;justify-items:center;align-content:center;gap:1px;font:800 11px/1.2 var(--body);text-decoration:none;color:#141010;border-radius:12px;margin:6px 3px}
  .bnav svg{width:22px;height:22px}
  .bnav a[aria-current="true"]{background:var(--paper);border:2.5px solid #141010;box-shadow:2px 2px 0 #141010}
  header.bar .hright .nav{display:none!important}
  header.bar .hwrap{grid-template-columns:auto 1fr!important}
  header.bar .hright{grid-row:1!important;grid-column:2!important;justify-self:end!important}
  header.bar .spill{grid-row:2!important;grid-column:1/-1!important}
  .mctl{bottom:auto;top:12px}
  .mattr{bottom:auto;top:4px;left:8px;right:auto}
  body[data-fs="full"] .mctl{display:none}
  .totop{left:auto;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .rail{grid-auto-columns:minmax(210px,72%)}
  .minis{grid-auto-columns:minmax(190px,62%)}
  .home{gap:28px}
  .hhero{padding:18px 16px}
}
.trsel{display:inline-flex;align-items:center;gap:6px;justify-self:start;border:2.5px solid var(--edge);border-radius:999px;padding:0 6px 0 14px;background:var(--surface);box-shadow:3px 3px 0 var(--edge);min-height:40px;font-weight:800;font-size:13px}
.trsel select{border:0;background:none;font:700 13px var(--body);color:var(--ink);padding:6px 4px;cursor:pointer}
/* ---- Step 2: editorial cards, verdict, scores ---- */
.ecard{padding:0;gap:0;overflow:hidden}
.cimg{position:relative;display:block;height:150px;border-bottom:3px solid var(--edge);background:var(--c);overflow:hidden}
.cimg img,.cimg svg{width:100%;height:100%;object-fit:cover;display:block}
.cimg .abadge{position:absolute;left:10px;top:10px;margin:0}
.cimg .openchip{position:absolute;right:10px;top:10px;margin:0;background:var(--paper);color:#141010;border-color:#141010}
.cimg .openchip.on{background:#141010;color:#7DE2B8}
.cbody{display:grid;gap:6px;padding:12px 14px 14px;min-width:0}
.ecard .kicker{color:#141010;opacity:.72}
.ecard .arow h3{font-size:19px}
.edesc{font-style:italic;font-weight:600;font-size:14px}
.cons{font-size:13px;font-weight:600}.cons b{font-weight:800}.cons.few{opacity:.72}
.gl,.sl{font-size:13px;font-weight:600;line-height:1.4}
.gl b,.sl b{font:800 10.5px/1.6 var(--mono);letter-spacing:.06em;padding:1px 6px;border-radius:5px;margin-right:5px;background:#141010;color:#7DE2B8}
.sl b{color:#FF9EC4}
.cfoot{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;font-weight:600;border-top:2px dashed #14101055;padding-top:8px;margin-top:2px}
.verdict .edesc.big{font-size:18px;margin:0}
.src{font-size:11.5px;color:var(--muted);font-weight:600;margin:0}
.gsbox{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:2.5px solid var(--edge);border-radius:14px;padding:12px 14px;background:var(--surface);box-shadow:3px 3px 0 var(--edge)}
.gsnums{display:grid;gap:4px;min-width:180px;flex:1}
.gsl{font:800 19px/1.1 var(--display)}
.gsc{font-size:13px;font-weight:600}.gsc .go{color:#1E8A55}.gsc .skip{color:var(--danger)}
.gsmeter{display:block;height:10px;border:2px solid var(--edge);border-radius:6px;overflow:hidden;background:var(--pink)}.gsmeter i{display:block;height:100%;background:var(--mint)}
.gobtn{background:var(--mint)}.skipbtn{background:var(--paper)}
.gobtn.on,.skipbtn.on{background:#141010;color:#FFF3D6;box-shadow:none;transform:translate(3px,3px)}
.pvs{display:flex;flex-wrap:wrap;gap:6px}.pv{font-size:12px;font-weight:600;border:2px solid var(--edge);border-radius:999px;padding:2px 10px;background:var(--surface)}
.gsk{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.getcol,.skipcol{border:2.5px solid var(--edge);border-radius:14px;padding:12px;display:grid;gap:6px;align-content:start;color:#141010}
.getcol{background:var(--mint)}.skipcol{background:var(--pink)}
.getcol p,.skipcol p{margin:0;font-size:14px;font-weight:600}
.getcol .label,.skipcol .label,.getcol .note,.skipcol .note{color:#141010}
.getcol .src,.skipcol .src{color:#141010;opacity:.65;display:inline}
.ucs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.uc{display:grid;gap:3px;align-content:start;border:2.5px solid var(--edge);border-radius:14px;padding:10px 12px;background:var(--surface);box-shadow:3px 3px 0 var(--edge)}
.uc.na{border-style:dashed;box-shadow:none}
.ucl{font-weight:800;font-size:13.5px}
.ucv{font-size:13px;font-weight:700}.ucv b{font:800 22px var(--display)}
.ucn{font-size:11.5px;color:var(--muted);font-weight:600}
.sbar{display:block;height:8px;border:2px solid var(--edge);border-radius:5px;overflow:hidden;background:var(--bg)}.sbar i{display:block;height:100%;background:var(--orange)}
.toiletbox{display:grid;gap:4px;border:3px solid var(--edge);border-radius:16px;padding:14px;background:var(--sky);color:#141010;box-shadow:var(--sh)}
.toiletbox .label,.toiletbox .count{color:#141010}
.toiletbox b{font:800 30px/1 var(--display)}.toiletbox b small{font-size:14px}
.toiletbox b.nat{font-size:18px;color:#141010;opacity:.75}
.kbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.kb{display:grid;gap:1px;align-content:start;border:2px solid var(--edge);border-radius:12px;padding:8px 10px;background:var(--surface)}
.kb b{font-size:14px}
.nat{color:var(--muted);font-weight:600}
.dims{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:8px}
.dimc{display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:center;border:2px solid var(--edge);border-radius:12px;padding:8px 10px;background:var(--surface)}
.dimc>span:first-child{font-weight:800;font-size:13px}
.dimc .sbar,.dimc .count{grid-column:1/-1}
.dimc.na{border-style:dashed}
.dimc.hy{background:var(--sky);color:#141010}.dimc.hy .count,.dimc.hy .nat{color:#141010}
.prows{display:grid;gap:6px}
.prow{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;font-size:14px}
.prow .seg{box-shadow:2px 2px 0 var(--edge)}
.prow .seg label{padding:5px 10px;font-size:12.5px;font-weight:800;cursor:pointer;border-right:2px solid var(--edge)}
.prow .seg label:last-child{border-right:0}
.prow .seg input{position:absolute;opacity:0;pointer-events:none}
.prow .seg label:has(input:checked){background:var(--yellow);color:#141010}
.prow .seg label:has(input:focus-visible){outline:3px solid var(--orange)}
.wform{display:grid;gap:12px}
.wform fieldset{border:2px solid var(--edge);border-radius:12px;display:flex;flex-wrap:wrap;gap:8px 14px;padding:8px 12px;margin:0}
.wform label{display:flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600}
.wform input{width:62px;border:2px solid var(--edge);border-radius:8px;padding:4px 6px;background:var(--surface)}
.edform .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cimg .openchip{top:auto;bottom:10px}
.cimg .abadge{top:auto;bottom:10px}
header.bar{z-index:30!important}
header.bar{position:fixed!important;left:0;right:0;top:0;background:transparent!important;border-bottom:0!important;pointer-events:none}
header.bar .hwrap>*{pointer-events:auto}
body::before{background:transparent!important}
.stage{top:0!important}
header.bar .brand>span{background:none!important;border:0!important;box-shadow:none!important;padding:0 4px!important;color:var(--ink);text-shadow:0 0 3px var(--bg),0 0 6px var(--bg),0 0 10px var(--bg),0 1px 0 var(--bg)}
header.bar .brand svg{background:transparent!important;box-shadow:none!important;border:0!important;color:var(--ink);filter:drop-shadow(0 0 3px var(--bg)) drop-shadow(0 0 6px var(--bg));width:34px;height:34px}
header.bar .brand small{color:var(--ink)}
header.bar .nav a{background:var(--paper)}
.thsw{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:6px;width:68px;height:36px;padding:0 8px;border:2.5px solid #141010;border-radius:999px;background:var(--paper);color:#141010;box-shadow:3px 3px 0 #141010;cursor:pointer;flex:none}
.thsw svg{width:16px;height:16px;position:relative;z-index:1}
.thk{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--yellow);border:2px solid #141010;transition:left .22s cubic-bezier(.3,1.4,.5,1)}
.thsw[aria-checked="true"]{background:#2A221C;color:#FFF3E6}.thsw[aria-checked="true"] .thk{left:35px;background:var(--sky)}
@media (max-width:860px){header.bar .hright{display:flex!important;margin-left:auto}}
@media (max-width:860px){.mattr{top:auto!important;bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;left:8px!important;right:auto!important}}
.hbrew{font:800 22px/1 var(--display);white-space:nowrap;color:#141010;display:flex;align-items:center;gap:8px}
.hbrew mark{--m:var(--pink);background:var(--m);display:inline-block;padding:4px 10px;border:2.5px solid #141010;border-radius:10px;box-shadow:3px 3px 0 #141010;color:#141010;transition:background-color .3s,transform .38s cubic-bezier(.3,1.6,.5,1);overflow:hidden}
@media (max-width:1200px){header.bar .nav{display:none!important}}
@media (max-width:860px){header.bar .hwrap{flex-wrap:wrap}.hbrew{order:-1;margin-left:auto;font-size:17px}.hsearch2{order:2;flex-basis:100%}}
.hsearch2{flex:1;display:flex;max-width:520px;margin:0 16px}
.hsearch2 .sbox{width:100%;min-height:44px;background:var(--paper);color:#141010;border-color:#141010;box-shadow:3px 3px 0 #141010}.hsearch2 .sbox input{color:#141010}
header.bar .hwrap{display:flex!important;align-items:center;gap:10px;padding:10px max(16px,env(safe-area-inset-left,0px))}
header.bar .hright{margin-left:auto;display:flex;gap:10px;align-items:center}
.xchips{position:fixed;z-index:13;top:calc(var(--hdr,90px) + 12px);left:calc(max(14px,env(safe-area-inset-left,0px)) + min(660px,52vw) + 46px);right:80px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 4px 8px}
.xchips::-webkit-scrollbar{display:none}
body:not(.exhome) .xchips,body:not(.exhome) .exnav{display:none}
body.exmap .xchips{left:16px}
.xc{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:2.5px solid #141010;border-radius:10px;background:var(--paper);color:#141010;font:800 13px var(--body);box-shadow:3px 3px 0 #141010;cursor:pointer;white-space:nowrap}
.xc svg{width:16px;height:16px}.xc.on{background:#141010;color:#FFF3D6}
.xi{width:24px;height:24px;border-radius:50%;background:var(--c);border:2px solid #141010;display:grid;place-items:center;color:#141010}.xi svg{width:14px;height:14px}
.exnav{position:fixed;z-index:13;right:80px;bottom:22px;display:flex;gap:10px;align-items:center}
body.hascc .exnav{bottom:calc(var(--cch,300px) + 34px)}
.exarr{display:grid;place-items:center;width:48px;height:48px;border:2.5px solid #141010;border-radius:10px;background:var(--paper);color:#141010;font:800 26px/1 var(--display);box-shadow:3px 3px 0 #141010;cursor:pointer}
.exlist{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:2.5px solid #141010;border-radius:10px;background:var(--paper);color:#141010;font:800 14px var(--mono);text-transform:uppercase;letter-spacing:.06em;box-shadow:4px 4px 0 #141010;cursor:pointer}
body:not(.hascc) .exarr{display:none}
body.exmap .float,body.exmap .fside{transform:translateX(calc(-100% - 60px))!important}
body.exmap .fside{display:none}
.ccard{position:fixed;z-index:14;right:80px;bottom:20px;width:min(420px,calc(100vw - 120px));max-height:calc(100vh - var(--hdr,90px) - 140px);overflow-y:auto;background:var(--bg);color:var(--ink);border:3px solid var(--edge);border-radius:18px;box-shadow:var(--sh-lg);padding:16px 18px 12px;display:grid;gap:10px}
.ccard .x2{position:absolute;right:12px;top:10px;color:var(--ink)}
.cchead{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding-right:30px}
.cchead h2{font-size:24px;text-transform:uppercase;letter-spacing:-.01em}
.mic.big{width:46px;height:46px}.mic.big svg{width:24px;height:24px}
.ccarea{font:700 12px var(--mono);text-transform:uppercase;color:var(--muted)}.ccarea .ok{color:#1E8A55}.ccarea .no{color:var(--danger)}
.cctags{display:flex;flex-wrap:wrap;gap:6px}
.cctag{display:inline-flex;gap:5px;align-items:center;background:var(--c);color:#141010;border:2px solid #141010;padding:2px 8px;font:800 11.5px var(--mono);text-transform:uppercase;box-shadow:2px 2px 0 #141010}.cctag svg{width:14px;height:14px}
.ccdesc{margin:0;font-weight:700;font-size:15px}.ccdesc.dim{font-weight:600;color:var(--muted)}
.ccverd{margin:0;font:700 12.5px var(--mono);text-transform:uppercase;padding-bottom:8px;border-bottom:2px dashed color-mix(in srgb,var(--ink) 30%,transparent)}
.ccard .gl,.ccard .sl{margin:0}
.ccact{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:stretch}
.vseg{display:inline-flex;border:2.5px solid var(--edge);box-shadow:3px 3px 0 var(--edge)}
.vseg button{width:48px;min-height:46px;border:0;background:var(--surface);color:var(--ink);font:800 18px var(--body);cursor:pointer}.vseg button+button{border-left:2.5px solid var(--edge)}
.vseg button.on{background:#141010;color:#FFF3D6}.vseg button.on[data-v="go"]{background:var(--mint);color:#141010}
a.act{text-decoration:none;color:inherit}
.ccmaps{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--yellow);color:#141010;border:2.5px solid #141010;box-shadow:3px 3px 0 #141010;font:800 14px var(--mono);text-transform:uppercase;text-decoration:none}.ccmaps svg{width:18px;height:18px}
.ccic{width:48px;border:2.5px solid var(--edge);background:var(--surface);color:var(--ink);box-shadow:3px 3px 0 var(--edge);display:grid;place-items:center;cursor:pointer}.ccic.on{background:var(--pink);color:#141010}
.ccfoot{display:flex;justify-content:space-between;align-items:center}
.ahead{display:grid;gap:4px;padding-top:6px}
.ahead h1 mark{white-space:nowrap;--m:var(--pink);background:var(--m);transition:background-color .3s,transform .38s cubic-bezier(.3,1.6,.5,1)}
@media (max-width:520px){.ahead h1{font-size:28px}}.ahead h1{font-size:clamp(30px,3.6vw,44px)}
.ahead h1 mark{display:inline-block;padding:0 .18em;border:3px solid var(--edge);border-radius:12px;box-shadow:4px 4px 0 var(--edge);color:#141010;line-height:1.05;margin-top:4px}
.alist{display:grid;gap:10px}
body.hascc .toast{top:calc(var(--hdr,70px) + 64px);bottom:auto}
.arowb{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;text-align:left;padding:14px 16px;border:2.5px solid var(--edge);border-radius:14px;background:var(--c,var(--surface));color:#141010;box-shadow:3px 3px 0 var(--edge);cursor:pointer;font:inherit}
.arowb.all{background:#141010;color:#FFF3D6}
#aRes:empty{display:none}
.arowb.cafe{background:var(--surface);color:var(--ink)}
.asearch{display:flex;gap:10px;align-items:center;min-height:56px;padding:0 16px;border:3px solid var(--edge);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:3px 3px 0 var(--edge)}
.asearch input{flex:1;min-width:0;border:0;background:none;outline:none;font:700 17px var(--body);color:var(--ink)}
.hsearch2{display:none!important}
.hbrew mark{white-space:nowrap}
.ccard{display:flex!important;flex-direction:column;height:330px}
.ccard[hidden]{display:none!important}
.cchead h2{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ccdesc,.ccard .gl,.ccard .sl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccact{margin-top:auto}
.arowb b{font:800 18px var(--display)}.arowb span{font:700 12px var(--mono);opacity:.8}.arowb i{font:800 22px var(--display);font-style:normal}
@media (max-width:860px){
 header.bar .brand span small{display:none}
 header.bar .brand span{display:block;padding:2px 10px!important}
 header.bar .brand b{font-size:20px}
 .hsearch2{margin:0}
 header.bar #addBtn{display:none}
 .xchips{left:0!important;right:0;padding:2px 12px 8px;top:calc(var(--hdr,70px) + 8px)}
 .exnav{right:12px;left:12px;justify-content:space-between;bottom:calc(76px + env(safe-area-inset-bottom,0px))}
 .exnav .exlist{margin-left:auto}
 body.hascc .exnav{bottom:calc(var(--cch,300px) + 72px + env(safe-area-inset-bottom,0px))}
 body.exmap .float{transform:translateY(calc(100% + 80px))!important}
 .ccard{left:0;right:0;width:auto;bottom:calc(62px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;border-width:3px 0 0;height:300px}
 .hbrew{font-size:16px;margin-left:auto}.hbrew mark{padding:3px 8px}
 .mctl{top:calc(var(--hdr,70px) + 64px)!important}
}
header.bar .spill{display:none!important}
.pbar{position:sticky;top:0;z-index:5;display:flex;gap:8px;align-items:center;margin:0 -18px;padding:12px 18px;background:var(--bg);border-bottom:3px solid var(--edge)}
.sbox{flex:1;display:flex;gap:8px;align-items:center;min-width:0;background:var(--surface);color:var(--ink);border:2.5px solid var(--edge);border-radius:999px;padding:0 14px;min-height:46px;box-shadow:3px 3px 0 var(--edge)}
.sbox input{flex:1;min-width:0;border:0;background:none;outline:none;font:600 15px var(--body);color:var(--ink)}
.fbtn{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 16px;border:2.5px solid var(--edge);border-radius:999px;background:var(--yellow);color:#141010;font:800 14px var(--body);box-shadow:3px 3px 0 var(--edge);cursor:pointer;flex:none}
.fcount{background:#141010;color:#FFF3D6;border-radius:999px;font:800 11px/1 var(--mono);padding:3px 6px}
.fscrim{position:fixed;inset:0;z-index:45;background:#14101066}
.fsheet{position:fixed;z-index:46;left:calc(max(14px,env(safe-area-inset-left,0px)) + 3px);width:calc(min(660px,52vw) - 6px);bottom:17px;max-height:calc(100vh - var(--hdr,90px) - 40px);display:flex;flex-direction:column;background:var(--bg);color:var(--ink);border:3px solid var(--edge);border-radius:20px;box-shadow:var(--sh-lg);overflow:hidden}
.grab2{display:none}
.fhead{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:var(--sky);color:#141010;border-bottom:3px solid var(--edge)}
.fhead h2{font-size:28px;text-transform:uppercase}
.x2{border:0;background:none;font:800 24px var(--body);cursor:pointer;color:#141010}
.fbody{overflow-y:auto;padding:14px 18px;display:grid;gap:12px}
.fsel{display:grid;gap:4px}.fsel select{min-height:44px;border:2.5px solid var(--edge);border-radius:12px;padding:0 10px;background:var(--surface);color:var(--ink);font:700 15px var(--body)}
.ftog{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 14px;border:2.5px solid var(--edge);border-radius:12px;background:var(--surface);color:var(--ink);font:800 15px var(--body);cursor:pointer}
.ftog i{width:42px;height:24px;border-radius:999px;border:2.5px solid var(--edge);position:relative;background:var(--bg)}
.ftog i::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--ink);transition:left .15s}
.ftog[aria-pressed="true"] i{background:var(--mint)}.ftog[aria-pressed="true"] i::after{left:21px}
.flist{display:grid}
.frow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 4px;border:0;border-bottom:2px dashed color-mix(in srgb,var(--ink) 25%,transparent);background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.frow b{font:800 15px var(--body);text-transform:uppercase;letter-spacing:.04em}
.frow .count{font:700 14px var(--mono)}
.frow[aria-pressed="true"]{background:var(--yellow);color:#141010;border-radius:10px;padding-inline:10px}.frow[aria-pressed="true"] .count{color:#141010}
.mic.sm{width:34px;height:34px;border-radius:50%;background:var(--c);border:2px solid var(--edge);display:grid;place-items:center;color:#141010}
.mic.sm svg{width:18px;height:18px}
.ffoot{display:flex;gap:10px;padding:12px 18px;border-top:3px solid var(--edge);background:var(--bg)}
.ffoot .fgo{flex:1;justify-content:center;background:var(--yellow);text-transform:uppercase;font-family:var(--mono)}
.arow2{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}
.arow2 .chip{flex:none;display:inline-flex;gap:6px;align-items:center}
.arow2 .chip.on{background:#141010;color:#FFF3D6}.arow2 .chip.on .count{color:#FFF3D6}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.cat{position:relative;display:grid;gap:3px;align-content:start;text-align:left;background:var(--c);color:#141010;border:3px solid var(--edge);border-radius:16px;padding:12px;box-shadow:var(--sh);cursor:pointer;font:inherit}
.cat .mic{width:40px;height:40px;border-radius:12px;background:var(--paper);border:2.5px solid #141010;display:grid;place-items:center;margin-bottom:4px}.cat .mic svg{width:24px;height:24px}
.cat b{font:800 17px/1.15 var(--display)}.cat>span:nth-of-type(2){font-size:12.5px;font-weight:600;opacity:.85}
.cat .cn{position:absolute;top:10px;right:10px;font:800 12px var(--mono);background:var(--paper);border:2px solid #141010;border-radius:999px;padding:1px 8px}
.pname.dotname{position:absolute;transform:none;pointer-events:none}
.pin.dot.sel{background:var(--orange);width:24px;height:24px;border:3px solid #fff;box-shadow:0 0 0 3px #141010,0 0 0 9px color-mix(in srgb,var(--orange) 35%,transparent);z-index:5}
@media (prefers-reduced-motion:no-preference){.pin.dot.sel{animation:selpulse 1.6s ease-out infinite}}
@keyframes selpulse{0%{box-shadow:0 0 0 3px #141010,0 0 0 4px color-mix(in srgb,var(--orange) 55%,transparent)}100%{box-shadow:0 0 0 3px #141010,0 0 0 18px transparent}}
.pin.sel b{background:var(--orange)!important;color:#141010!important;box-shadow:0 0 0 3px #fff,0 0 0 6px #141010!important}
.moreinfo{border:2.5px dashed var(--edge);border-radius:14px;padding:10px 14px}.moreinfo summary{font-weight:800;cursor:pointer}.moreinfo[open]>*:not(summary){margin-top:12px}
@media (max-width:860px){.pbar{top:26px;margin:0 -14px;padding:8px 14px}.fbtn{padding:0 12px}
 .fsheet{left:0;right:0;width:auto;bottom:0;border-radius:22px 22px 0 0;border-width:3px 0 0;max-height:88vh;z-index:50}.fscrim{z-index:49}
 .grab2{display:block;width:48px;height:6px;border-radius:9px;background:#141010;opacity:.4;margin:8px auto -4px;position:absolute;left:calc(50% - 24px);top:0}
 .cats{grid-template-columns:1fr 1fr}}
.dm-cover{fill:var(--land)}
.dm-park rect{fill:var(--park);opacity:.55}
.dm-lake ellipse{fill:var(--water);opacity:.55}
.dm-roads path{fill:none;stroke:var(--road);stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.7}
.dm-roads .dm-hw{stroke:var(--road-main,#F2B544);stroke-width:2.5;opacity:.55}
.dm-roads .dm-rd{stroke-width:1.2}
.moodpop{max-height:calc(100vh - var(--hdr,90px) - 30px);overflow-y:auto}
.vmood{background:var(--c);color:#141010;grid-template-columns:auto 1fr;column-gap:10px;row-gap:1px;align-items:center;align-content:center}
.vmood .mic{grid-row:1/span 2}
.vmood b{align-self:end}.vmood>span:last-child{align-self:start;font-size:12.5px}
.vmood span{color:#141010;opacity:.85}
.vmood .mic{width:42px;height:42px;border-radius:12px;background:var(--paper);border:2.5px solid #141010;display:grid;place-items:center;box-shadow:2px 2px 0 #141010;opacity:1}
.vmood .mic svg{width:26px;height:26px;color:#141010}
.vmood[aria-pressed="true"]{outline:3px solid #141010;outline-offset:2px}
.ctop{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px 0}
.ctop .abadge{margin:0}
.ctop .openchip{margin:0;background:var(--paper);color:#141010;border-color:#141010}
.ctop .openchip.on{background:#141010;color:#7DE2B8}
.ctop+.cbody{padding-top:8px}
.float .panel{scroll-margin-top:130px}
.float>#sheet .tabs{overflow-x:auto;scrollbar-width:none}
.float>#sheet .tabs button{white-space:nowrap}
@media (max-width:520px){.gsk,.edform .two{grid-template-columns:1fr}}
/* ---- Step 3: three-layer review ---- */
.rv{display:grid;gap:14px}
.layer{display:grid;grid-template-columns:auto 1fr;gap:12px;border:2.5px solid var(--edge);border-radius:16px;padding:14px;background:var(--bg)}
details.layer{display:block}
details.layer>summary{display:flex;gap:12px;align-items:center;cursor:pointer;list-style:none}
details.layer>summary::-webkit-details-marker{display:none}
details.layer>summary::after{content:"＋";margin-left:auto;font-weight:800}
details.layer[open]>summary::after{content:"－"}
details.layer>.lbody{margin-top:12px}
.lnum{width:30px;height:30px;border-radius:50%;background:var(--yellow);color:#141010;border:2.5px solid var(--edge);display:grid;place-items:center;font:800 14px var(--mono);flex:none}
.lbody{display:grid;gap:12px;min-width:0}
.lbody>b{font:800 18px var(--display)}
.rv .rblk{display:none;gap:10px;border:2px dashed var(--edge);border-radius:12px;padding:12px;background:var(--surface)}
.rblk h4{margin:0;font:800 16px var(--display)}
.rv:has(input[name="vpurp"][value="work"]:checked) .b-work,
.rv:has(input[name="vpurp"][value="coffee"]:checked) .b-coffee,
.rv:has(input[name="vpurp"][value="date"]:checked) .b-date,
.rv:has(input[name="vpurp"][value="friends"]:checked) .b-friends,
.rv:has(input[name="vpurp"][value="solo"]:checked) .b-solo,
.rv:has(input[name="vpurp"][value="breakfast"]:checked) .b-food,
.rv:has(input[name="xb"][value="coffee"]:checked) .b-coffee,
.rv:has(input[name="xb"][value="food"]:checked) .b-food,
.rv:has(input[name="xb"][value="washroom"]:checked) .b-washroom,
.rv:has(input[name="xb"][value="practical"]:checked) .b-practical{display:grid}
.rv:has(input[name="vpurp"]:checked) .pickfirst{display:none}
.rq{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:14px;font-weight:700}
fieldset.rq{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-start}
fieldset.rq legend{float:left;width:100%;margin-bottom:4px;font-size:14px;font-weight:700}
.rq input:not([type=radio]):not([type=checkbox]){flex:1;min-width:140px;max-width:240px}
.rv .rchips label{font-size:12.5px;padding:4px 11px}
.vrow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:end}
@media (max-width:520px){.vrow{grid-template-columns:1fr}}
.rmeta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;font-weight:700;color:var(--muted)}
.qts{display:flex;flex-wrap:wrap;gap:5px}
.qtag{font-size:11.5px;font-weight:700;border:2px solid var(--edge);border-radius:999px;padding:1px 8px;background:var(--surface)}
.qtag.neg{background:var(--pink);color:#141010}.qtag.pos{background:var(--mint);color:#141010}
.says{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.says .label{width:100%}
.say{font-size:13px;font-weight:700;border:2px solid var(--edge);border-radius:999px;padding:3px 10px;color:#141010}
.say b{font-family:var(--mono);margin-left:3px}.say.pos{background:var(--mint)}.say.neg{background:var(--pink)}.say.drk{background:var(--yellow)}
.hv{display:grid;gap:8px;margin-top:10px}
.hdesc{margin:0;font-weight:700;font-size:16px;line-height:1.4}
.hv .gl,.hv .sl{margin:0;font-size:14px}
.hvrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:2px dashed color-mix(in srgb,var(--ink) 30%,transparent);padding-top:10px}
.hvc{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.avs{display:flex}.avs .av{margin-right:-8px;border:2px solid var(--surface);border-radius:50%}.avs{margin-right:8px}
.hvb{display:flex;gap:8px}
.vbtn{border:2.5px solid var(--edge);border-radius:10px;padding:6px 12px;font:800 13px var(--mono);cursor:pointer;background:var(--surface);color:var(--ink);box-shadow:3px 3px 0 var(--edge);min-height:40px}
.vbtn.go{background:var(--mint);color:#141010}.vbtn.on{background:#141010;color:#FFF3D6;box-shadow:none;transform:translate(3px,3px)}
.tbox{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;font-weight:700}
/* ---- Step 4: drinks + journal ---- */
.drows{display:grid;gap:8px}
.drow{display:grid;grid-template-columns:auto minmax(0,1fr) 150px;gap:12px;align-items:center;border:2.5px solid var(--edge);border-radius:14px;padding:10px 12px;background:var(--surface);box-shadow:3px 3px 0 var(--edge)}
.drow:not(:has(.dnum)){grid-template-columns:minmax(0,1fr) 150px}
.dnum{width:34px;height:34px;border-radius:10px;background:var(--yellow);color:#141010;border:2.5px solid var(--edge);display:grid;place-items:center;font:800 15px var(--mono)}
.dmain{display:grid;gap:2px;min-width:0}
.dcafe{font:800 17px/1.15 var(--display);text-decoration:none}
.dmain b{font:800 16px var(--display)}
.dfacts{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;font-weight:700;margin-top:2px}
.fnote{background:var(--mint);color:#141010;border:1.5px solid var(--edge);border-radius:999px;padding:0 7px;font-size:11.5px}
.dsc{display:grid;gap:3px;justify-items:stretch;text-align:right}
.dsc b{font:800 24px/1 var(--display)}
.dsc .count{font-size:11px}
@media (max-width:520px){.drow,.drow:not(:has(.dnum)){grid-template-columns:auto minmax(0,1fr)}.drow:not(:has(.dnum)){grid-template-columns:1fr}.dsc{grid-column:1/-1;text-align:left}}
.drinkform .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.drinkform .two{grid-template-columns:1fr}}
.adv{border:2px dashed var(--edge);border-radius:12px;padding:10px 12px}
.adv summary{font-weight:800;cursor:pointer}
.adv[open]>*:not(summary){margin-top:10px}
.jart{background:var(--surface);border:3px solid var(--edge);border-radius:20px;padding:20px 22px;box-shadow:var(--sh-lg);font-size:16px;line-height:1.6}
.jart>*:first-child{margin-top:0}
.jart h3{font-size:21px;margin:22px 0 6px}
.jart ul{padding-left:20px;margin:8px 0}.jart li{margin:6px 0}
.jart p{margin:10px 0}
.tip2{margin-top:16px;background:var(--yellow);color:#141010;border:2.5px solid var(--edge);border-radius:12px;padding:10px 14px;font-size:15px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.vs>div{border:2.5px solid var(--edge);border-radius:14px;padding:12px;color:#141010}
.vs>div:first-child{background:var(--mint)}.vs>div:last-child{background:var(--orange)}
.vs ul{font-size:14px;padding-left:18px}
.roastbar{display:grid;grid-template-columns:repeat(3,1fr);border:2.5px solid var(--edge);border-radius:12px;overflow:hidden;margin:12px 0}
.roastbar span{background:var(--r);color:#fff;font:800 13px var(--mono);text-align:center;padding:14px 4px;text-shadow:0 1px 2px #0008}
.cups{display:flex;gap:18px;justify-content:center;margin:14px 0 4px;flex-wrap:wrap}
.cup2{display:grid;gap:6px;justify-items:center;font-size:14px}
.cupv{width:96px;height:130px;display:flex;flex-direction:column;border:3px solid var(--edge);border-top:0;border-radius:0 0 18px 18px;overflow:hidden}
.cupv span{display:grid;place-items:center;font:700 10.5px var(--mono);color:#141010;min-height:0}
.c-foam{background:#FFF8EC}.c-milk{background:#E9CFA8}.c-espresso{background:#6B3E1E;color:#fff!important}
.xbar{display:grid;grid-template-columns:1fr 1.2fr 1fr;border:2.5px solid var(--edge);border-radius:12px;overflow:hidden;margin:12px 0}
.xbar span{padding:10px 8px;text-align:center;font-weight:800;font-size:13px;background:var(--pink);color:#141010;display:grid}
.xbar span.ok{background:var(--mint)}.xbar small{font-weight:600;font-size:11.5px}
@media (max-width:520px){.vs{grid-template-columns:1fr}}
/* ---- Step 5: finder, compare, neighbourhoods ---- */
.findcta{display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;background:var(--sky);color:#141010;border:3px solid var(--edge);border-radius:18px;padding:14px 18px;box-shadow:var(--sh)}
.findcta b{font:800 20px/1.1 var(--display)}.findcta span{font-size:13.5px;font-weight:600}.findcta .go{font:800 22px var(--display)}
.finder{display:grid;gap:12px}
.finder fieldset{border:2.5px solid var(--edge);border-radius:16px;padding:12px 14px;margin:0;background:var(--surface);display:grid;gap:10px}
.finder legend{display:flex;gap:8px;align-items:center;font:800 17px var(--display);padding:0 6px}
.fh{font-size:24px}
.cmptray{position:fixed;z-index:14;left:calc(max(14px,env(safe-area-inset-left,0px)) + 3px);width:calc(min(660px,52vw) - 6px);bottom:17px;margin:0;border-radius:0 0 19px 19px;padding:10px 16px;background:var(--yellow);color:#141010;border-top:3px solid var(--edge);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cmptray .count{color:#141010}
.cmpi{display:inline-flex;align-items:center;gap:4px;background:var(--paper);border:2px solid #141010;border-radius:999px;padding:2px 4px 2px 10px;font-weight:700;font-size:13px}
.cmpi button{border:0;background:none;cursor:pointer;font-weight:800;color:#141010}
.cmptray:empty{display:none}
.cmpv{display:grid;gap:8px;background:var(--surface);border:2.5px solid var(--edge);border-radius:14px;padding:12px 14px;box-shadow:3px 3px 0 var(--edge)}
.cmpv p{margin:0;font-size:15px}
.ctab{border:2.5px solid var(--edge);border-radius:14px;overflow:hidden;background:var(--surface)}
.crow{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:8px;padding:9px 12px;border-top:1.5px dashed color-mix(in srgb,var(--ink) 25%,transparent);align-items:center;font-size:14px}
.crow:first-child{border-top:0}
.crow>span{font-weight:700;color:var(--muted);font-size:13px}
.crow b{font-weight:800}.crow b small{font-weight:600;color:var(--muted);font-size:11.5px}
.crow b.win{background:var(--mint);color:#141010;border-radius:8px;padding:2px 6px;justify-self:start}.crow b.win small{color:#141010}
.chd{background:var(--yellow)}.chd a{font:800 15px/1.15 var(--display);color:#141010}
.dback2 .linkbtn{font-size:13px}
body.hascmp .float{padding-bottom:84px}
a.chip{text-decoration:none;display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
.hhero a.chip{color:#141010}
body.fcollapsed .cmptray{display:none}
@media (max-width:860px){.cmptray{left:0;width:auto;right:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));border-radius:0;padding:8px 14px}.cmptray .count{display:none}.cmpi{max-width:42vw;overflow:hidden;white-space:nowrap}}
/* ---- Step 6: badges, verified, owners, analytics ---- */
.vbadge{display:inline-block;font:700 11px/1.6 var(--mono);border:1.5px dashed var(--edge);border-radius:6px;padding:0 6px;color:var(--muted)}
.vbadge.on{border-style:solid;background:var(--mint);color:#141010}
.oreply{border-left:4px solid var(--edge);background:var(--bg);padding:8px 12px;border-radius:0 10px 10px 0;margin-top:6px}.oreply p{margin:4px 0 0}
.ownbox{font-size:13.5px;font-weight:600;border:2px dashed var(--edge);border-radius:12px;padding:8px 12px}
.fromcafe{background:var(--mint);color:#141010;border:2.5px solid var(--edge);border-radius:16px;padding:14px}.fromcafe .src,.fromcafe .count{color:#141010}
.fromcafe .tip{background:var(--paper)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kpi{display:grid;gap:2px;align-content:start;border:2.5px solid var(--edge);border-radius:14px;padding:10px 12px;background:var(--surface);box-shadow:3px 3px 0 var(--edge)}
.kpi b{font:800 26px/1.1 var(--display)}.kpi.big{background:var(--yellow);color:#141010}.kpi.big b{font-size:42px}.kpi.big .label,.kpi.big .count{color:#141010}
.mbars,.wchart{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;align-items:end;height:170px;border-bottom:2px solid color-mix(in srgb,var(--ink) 35%,transparent);padding-top:22px}
.mb,.wb{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;outline:none}
.mb i,.wb i{display:block;width:min(34px,70%);background:var(--ink);border-radius:4px 4px 0 0;min-height:0}
.mb>span:last-child,.wl{position:absolute;bottom:-20px;font:700 11px var(--mono);color:var(--muted)}
.mbv{font:800 12px var(--mono);margin-bottom:3px}
.mbars,.wchart{margin-bottom:24px}
.tip3{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:8px;padding:3px 8px;font-size:12px;font-weight:700;box-shadow:2px 2px 0 var(--edge);opacity:0;pointer-events:none;z-index:2}
.wb:hover .tip3,.wb:focus .tip3{opacity:1}.wb:hover i,.wb:focus i{background:var(--orange)}
.wtab{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}.wtab th,.wtab td{text-align:left;padding:4px 6px;border-bottom:1px dashed color-mix(in srgb,var(--ink) 25%,transparent)}
.rreply{gap:8px}.rreply p{margin:4px 0 0;font-size:14px}

/* website: features that need accounts are hidden for now */
.act[data-a=review],.act[data-a=panel],.float>#sheet .tabs,[data-a=rdrink],.ownbox,.voteform,[data-a=qsave]{display:none!important}
.bnav a{flex:1}
/* public site footer links */
.sitelinks{margin-top:28px;padding-top:16px;border-top:3px solid var(--edge);display:grid;gap:10px;font-size:13px}
.sitelinks h2{font-size:16px}.sitelinks .sl{display:flex;flex-wrap:wrap;gap:4px 12px}.sitelinks a{font-weight:600}
.sitelinks .fine{color:var(--muted);font-size:12px}