/* BeanMood · Option B: "sticker shop". The palette and the chunky outlines come straight from the Roast and
   Sniff design sheets (espresso #3B1E08, collar red #C53030, mustard #E6B800, cocoa #7B553C, cream #F3E3C8),
   with sky blue from Roast's sleepy bubble and Sniff's magnifier, and blush from their cheeks.
   Loaded after the page's own styles; it changes the look, never the behaviour. */
:root{
 --ground:#fff4e2;--surface:#ffffff;--raised:#ffe9c4;--border:#3b1e08;--rule:#f3dfc1;--control:#3b1e08;
 --text:#2a1709;--muted:#5e4130;--faint:#6b4a33;
 --accent:#c53030;--accent-soft:#ffe1d8;--accent-track:#f8b9a8;--accent-ink:#8c1d1d;
 --pill-neutral-bg:#f6e6cf;--pill-neutral-ink:#3b1e08;
 --mustard:#f5c518;--mustard-soft:#ffe58a;--sky:#a9dcef;--blush:#f9c3b4;--cocoa:#7b553c;--espresso:#3b1e08;--latte:#ffe1a8;
 --ink-line:2.5px solid var(--espresso);
 --pop:4px 4px 0 var(--espresso);
 --pop-sm:3px 3px 0 var(--espresso);
 --radius-card:18px;--radius-control:12px;
}
/* taste-skill-ignore: the offset "sticker" shadows below are the brand's sticker look, asked for by the client */
body{background:var(--ground)}

/* ---------- buttons: chunky and tactile, they press into the page ---------- */
.btn{height:44px;padding:0 18px;border:var(--ink-line);border-radius:999px;background:#fff;color:var(--espresso);font-weight:700;box-shadow:var(--pop-sm);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background-color .15s}
.btn:hover{background:var(--mustard-soft);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--espresso)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--espresso)}
.btn.primary{background:var(--accent);border-color:var(--espresso);color:#fff}
.btn.primary:hover{background:#d93a3a;border-color:var(--espresso)}
.btn[disabled]{opacity:.45;box-shadow:none;transform:none}
.textbtn{font-weight:700}

/* ---------- the pane's head ---------- */
.brand{font-size:20px;font-weight:800}
.navlink{font-weight:700;color:var(--espresso)}
.navlink:hover{background:var(--mustard-soft)}
.navcount{background:var(--accent);border:2px solid var(--espresso)}
#ptitle{font-size:30px;line-height:34px;font-weight:800;letter-spacing:-.025em}
.finding{color:var(--muted)}
.finding b{display:inline-block;margin-right:2px;padding:1px 10px;border-radius:999px;background:var(--sky);border:2px solid var(--espresso);color:var(--espresso);font-weight:800}

/* ---------- the mood card: the quiz starts right here ---------- */
.mood{background:var(--mustard);border:var(--ink-line);border-radius:24px;box-shadow:var(--pop);padding:18px 18px 18px 12px;row-gap:12px;overflow:visible}
.mood .mascot-slot{width:92px;margin:-26px 0 -6px}
.mood-text strong{font-size:22px;line-height:26px;font-weight:800;letter-spacing:-.02em;color:var(--espresso)}
.mood-text span{color:#4a2a12;font-size:14px;line-height:19px}
.mood-text .kicker{display:inline-block;width:auto;padding:1px 10px;margin-bottom:6px;border-radius:999px;background:#fff;border:2px solid var(--espresso);font-size:12px;font-weight:800}
.mood.has-mood{background:var(--accent);color:#fff}
.mood.has-mood .mood-text strong,.mood.has-mood .mood-text span{color:#fff}
.mood.has-mood .mood-text .kicker{color:var(--espresso)}
.mood-roast i{height:8px;width:22px;border:1.5px solid var(--espresso);opacity:1;background:#fff}
.quickroast{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.quickroast span{width:100%;font-size:13px;font-weight:700;color:var(--espresso)}
.quickroast button{display:grid;place-items:center;width:42px;height:46px;border:2px solid var(--espresso);border-radius:14px;background:#fff;box-shadow:2px 2px 0 var(--espresso);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.quickroast button:hover{transform:translate(-1px,-3px) rotate(-6deg);box-shadow:3px 5px 0 var(--espresso)}
.quickroast button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--espresso)}
.quickroast .bean-mark{width:20px;height:25px}

/* ---------- search, tabs, chips ---------- */
.toolbar{background:var(--ground);padding-top:22px}
.search{height:48px;border:var(--ink-line);border-radius:999px;padding:0 18px;box-shadow:var(--pop-sm)}
.search:focus-within{border-color:var(--espresso);box-shadow:3px 3px 0 var(--accent)}
.search svg{color:var(--espresso)}
.tabs{gap:6px;margin-top:14px;padding:4px;border:var(--ink-line);border-radius:999px;background:#fff}
.tab{flex:1;justify-content:center;height:36px;padding:0 10px;border-radius:999px;color:var(--espresso);font-weight:700;font-size:13px}
.tab .c{color:var(--muted);font-weight:700}
.tab[aria-selected="true"]{background:var(--espresso);color:#fff}
.tab[aria-selected="true"] .c{color:var(--mustard)}
.tab[aria-selected="true"]::after{display:none}
.tab:hover:not([aria-selected="true"]){background:var(--raised)}
.chip{height:36px;padding:0 14px;border:2px solid var(--espresso);font-weight:700;font-size:13px;box-shadow:2px 2px 0 var(--espresso);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background-color .15s}
.chip:hover{border-color:var(--espresso);background:var(--mustard-soft)}
.chip:active{transform:translate(2px,2px);box-shadow:none}
#opennow[aria-pressed="true"]{background:var(--sky);color:var(--espresso);border-color:var(--espresso)}
#fitonly[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--espresso)}
.count{font-weight:700;color:var(--espresso)}
.viewtoggle{border:2px solid var(--espresso)}
.viewtoggle button{font-weight:700}
.viewtoggle button[aria-pressed="true"]{background:var(--espresso)}
.axis{color:var(--muted);font-weight:600}

/* ---------- the list: every place a sticker ---------- */
.list{gap:12px;padding:2px 4px 6px 0}
.place{position:relative;gap:6px;padding:14px 16px 14px 14px;background:#fff;border:var(--ink-line);border-radius:var(--radius-card);box-shadow:var(--pop-sm);transition:transform .15s var(--ease),box-shadow .15s var(--ease),background-color .15s}
.place:hover{background:#fff;transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--espresso)}
.place:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--espresso)}
.place.hl{background:var(--mustard-soft)}
.p-name{font-size:17px;font-weight:800}
.kbean{width:18px}
.kbean .bean-mark{width:17px;height:21px}
.place:hover .kbean{transform:rotate(-20deg) scale(1.25)}
.status{padding:2px 10px;border-radius:999px;background:var(--pill-neutral-bg);color:var(--espresso);font-size:12px;font-weight:700}
.status.is-open{background:var(--mustard);color:var(--espresso);border:2px solid var(--espresso);font-weight:800}
.p-meta{padding-left:22px;color:var(--muted)}
.p-meta b{color:var(--espresso);font-weight:700}
.strip,.p-tags{padding-left:22px}
.track{height:8px;border-radius:4px;background:#f6e8d4}
.track .span{border-radius:4px;background:#e0c9aa}
.track .span.on{background:var(--accent)}
.track .now{top:-5px;bottom:-5px;width:3px;background:var(--espresso)}
.hrs{color:var(--espresso);font-weight:600}
.pill{height:24px;border:2px solid var(--espresso);font-weight:800}
.pill.accent{background:var(--accent);color:#fff}
.place.hl .pill.accent{background:var(--accent)}
.more{height:48px}
.empty{background:var(--sky);border:var(--ink-line);box-shadow:var(--pop-sm)}
.listhead h2{font-size:22px;font-weight:800}

/* ---------- a place's page ---------- */
.back{color:var(--espresso);font-weight:700}
.back:hover{background:var(--mustard-soft)}
.d-head h1{font-size:28px;line-height:32px;font-weight:800;letter-spacing:-.02em}
.d-head{padding:18px 18px 16px;margin-top:4px;background:var(--latte);border:var(--ink-line);border-radius:24px;box-shadow:var(--pop)}
.d-why{color:var(--espresso)}
.d-links a{font-weight:700}
.savebtn[aria-pressed="true"]{background:var(--sky);border-color:var(--espresso);color:var(--espresso)}
.panel{border:var(--ink-line);border-radius:var(--radius-card);box-shadow:var(--pop-sm)}
.panel h3{color:var(--espresso);font-weight:800;font-size:12px;letter-spacing:0}
.panel .big{font-weight:800}
.panel:nth-of-type(1){background:#fff}
.ladder i{height:14px;border-radius:7px;border:2px solid var(--espresso)}
.ladder i:not(.on){background:#fff}
.week .today{color:var(--accent-ink);font-weight:800}
.d-foot a{font-weight:700}

/* ---------- the map ---------- */
.mapcol{padding:14px 14px 14px 2px}
.mapframe{border:var(--ink-line);border-radius:28px;box-shadow:var(--pop);background:#d3ebf7}
[data-map=mint] .mapframe{background:#d6efdc}[data-map=sunny] .mapframe{background:#fde7a0}[data-map=blush] .mapframe{background:#fadad0}
#map canvas{filter:none}
.pin{width:36px;height:40px}
.pin .bean-mark{width:22px;height:28px;filter:drop-shadow(2px 2px 0 rgba(59,30,8,.85))}
.pin.hl .bean-mark{transform:scale(1.5) rotate(-12deg);animation:pin-wiggle .6s ease-in-out infinite alternate}
@keyframes pin-wiggle{from{transform:scale(1.5) rotate(-12deg)}to{transform:scale(1.5) rotate(10deg)}}
.pin .tag{bottom:40px;padding:6px 10px;border:2px solid var(--espresso);border-radius:10px;background:var(--mustard);color:var(--espresso);font-weight:800;box-shadow:2px 2px 0 var(--espresso)}
.legend{border:2px solid var(--espresso);border-radius:14px;box-shadow:2px 2px 0 var(--espresso);font-weight:700;color:var(--espresso)}
.resetbtn{height:38px}
.maplibregl-ctrl-group{border:2px solid var(--espresso)!important;border-radius:12px!important;box-shadow:2px 2px 0 var(--espresso)!important}

/* ---------- the quiz: every step its own colour ---------- */
.modal{background:rgba(59,30,8,.5)}
.sheet{border:3px solid var(--espresso);border-radius:28px;box-shadow:8px 8px 0 var(--espresso);background:var(--mustard)}
.sheet[data-step="2"]{background:var(--blush)}
.sheet[data-step="3"]{background:var(--sky)}
.sheet[data-step="4"]{background:var(--accent);color:#fff}
.sheet h2{font-size:28px;line-height:32px;font-weight:800;letter-spacing:-.025em}
.sheet .sub{color:#4a2a12}
.sheet[data-step="4"] .sub,.sheet[data-step="4"] .textbtn,.sheet[data-step="4"] .sheet-top{color:#fff}
.sheet-top{color:var(--espresso);font-weight:700}
.progress i{width:34px;height:8px;border-radius:4px;background:#fff;border:2px solid var(--espresso)}
.progress i.on{background:var(--espresso)}
.sheet[data-step="4"] .progress i.on{background:var(--mustard)}
.bubble{background:#fff;border:2.5px solid var(--espresso);box-shadow:3px 3px 0 var(--espresso);font-weight:700;font-size:16px}
.bubble::before{background:#fff;border-left:2.5px solid var(--espresso);border-bottom:2.5px solid var(--espresso)}
.stage{min-height:136px}
.bean-opt{border:var(--ink-line);border-radius:18px;box-shadow:var(--pop-sm);font-weight:800}
.bean-opt:hover{border-color:var(--espresso);transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--espresso)}
.bean-opt[aria-checked="true"]{background:var(--espresso);color:#fff;border-color:var(--espresso);transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--accent)}
.bean-opt .bean-mark{width:38px;height:48px}
.flav{border:var(--ink-line);box-shadow:var(--pop-sm);font-weight:800;background:#fff}
.flav:hover{border-color:var(--espresso);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--espresso)}
.flav[aria-checked="true"]{background:var(--c);color:#fff;border-color:var(--espresso);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--espresso)}
.flav[aria-checked="true"] .fdot{background:#fff;box-shadow:inset 0 0 0 2px var(--espresso)}
.flav[style*="#e29587"][aria-checked="true"],.flav[style*="#d2a468"][aria-checked="true"],.flav[style*="#b98554"][aria-checked="true"],.flav[style*="#8c9a5b"][aria-checked="true"]{color:var(--espresso)}
.opt{border:var(--ink-line);border-radius:18px;box-shadow:var(--pop-sm);font-weight:800;background:#fff}
.opt:hover{border-color:var(--espresso);background:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--espresso)}
.opt[aria-checked="true"]{background:var(--espresso);color:#fff;border-color:var(--espresso)}
.opt[aria-checked="true"] small{color:#f3e3c8}
.opt .dot{border:2.5px solid var(--espresso);background:#fff}
.opt[aria-checked="true"] .dot{border-color:#fff}
.opt[aria-checked="true"] .dot::after{background:var(--mustard)}
.result{background:#fff;color:var(--espresso);border:var(--ink-line);border-radius:22px;box-shadow:var(--pop)}
.result strong{font-size:30px;line-height:34px;font-weight:800}
.result .mood-roast i{border:1.5px solid var(--espresso);opacity:1}
.sheet[data-step="4"] .btn.primary{background:var(--mustard);color:var(--espresso)}

/* ---------- the pane's foot ---------- */
.pfoot{border-top:var(--ink-line)}
.pfoot .links a{font-weight:700}

@media (max-width:900px){
 .mapcol{padding:0 16px 18px}
 .tab{font-size:12px;padding:0 6px}
}
@media (max-width:480px){
 .mood .mascot-slot{width:76px}
 .mood-text strong{font-size:19px;line-height:23px}
 .quickroast button{width:38px;height:42px}
}
@media (prefers-reduced-motion:reduce){.pin.hl .bean-mark{animation:none}}
/* keep the chips' sticker shadows inside the sticky bar */
.toolbar .filters{padding-bottom:16px}

/* the map colour switcher */
.mapswatch{position:absolute;left:12px;top:62px;z-index:2;display:flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border:2px solid var(--espresso);border-radius:999px;background:#fff;box-shadow:2px 2px 0 var(--espresso);font-size:12px;font-weight:800;color:var(--espresso)}
.mapswatch button{width:24px;height:24px;border-radius:50%;background:var(--s);border:2px solid var(--espresso);transition:transform .15s var(--ease)}
.mapswatch button:hover{transform:scale(1.15)}
.mapswatch button[aria-pressed="true"]{transform:scale(1.15);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--espresso)}
/* a little less cream: the page goes nearer white, so the coloured blocks and the map carry the warmth */
:root{--ground:#fffaf2}
.mood-text .mood-roast{display:flex}