/* =====================================================================
   KIDS & COFFEE, feed concept v2.1
   Cleaner, modern, parent-facing. Still warm, not comical.
   Mobile: swipe left = next, right = back, up = save.
   Desktop: carousel with faded neighbours, double click to save.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --coral:    #E8862E;   /* brand orange — matches the app icon (was #FF6F61) */
  --mint:     #9FD8B6;
  --blue:     #5B9BD5;
  --latte:    #D9B38C;
  --coffee:   #5C3A21;
  --coffee-d: #3E2716;
  --bg:       #FAF7F4;
  --line:     #EFE8E1;
  --ink:      #32281F;
  --muted:    #8F8177;
  --shadow-sm: 0 1px 3px rgba(50,40,31,.08);
  --shadow:    0 6px 24px rgba(50,40,31,.10);
  --shadow-lg: 0 16px 40px rgba(50,40,31,.16);
  --radius:    20px;
  --font-head: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --nav-h: 64px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; overscroll-behavior:none}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--bg); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
button{font-family:inherit; cursor:pointer}
.ic-svg{width:1.25em; height:1.25em; display:block; flex:none}

/* ---------- Top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px 8px; gap:10px; flex:none;
}
.brand-img{height:26px; width:auto; display:block}
.top-right{display:flex; align-items:center; gap:8px}
.notice-btn{
  border:1px solid var(--line); background:#fff; border-radius:999px;
  width:32px; height:32px; font-size:.9rem; display:inline-flex;
  align-items:center; justify-content:center; padding:0; opacity:.85;
}
.loc-chip{
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line);
  background:#fff; border-radius:999px; padding:7px 12px;
  font-weight:800; font-size:.82rem; color:var(--ink);
}
.loc-chip .ic-svg{color:var(--coral)}
.saved-btn{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px;
  padding:7px 12px; font-weight:800; font-size:.82rem;
  transition:transform .15s;
}
.saved-btn .ic-svg{color:var(--coral)}
.saved-btn.pulse{animation:pulse .45s ease}
@keyframes pulse{40%{transform:scale(1.15)}}
.saved-count{
  background:var(--coral); color:#fff; border-radius:999px; min-width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:800; padding:0 6px;
}

/* ---------- Filter chips ---------- */
.chips{
  display:flex; gap:8px; overflow-x:auto; padding:6px 16px 10px; flex:none;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:999px; padding:8px 15px; font-weight:800; font-size:.86rem;
  transition:.15s;
}
.chip.on{background:var(--coffee); border-color:var(--coffee); color:#fff}
.chip .caret{font-size:.7em; opacity:.8; margin-left:4px}

/* date dropdown under the Today tab */
.date-menu{
  position:absolute; z-index:35; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:6px; min-width:170px;
  display:none;
}
.date-menu.open{display:block}
.date-menu button{
  display:block; width:100%; text-align:left; border:none; background:none;
  padding:10px 12px; border-radius:10px; font-weight:800; font-size:.9rem; color:var(--ink);
}
.date-menu button:hover, .date-menu button.sel{background:var(--bg); color:var(--coral)}

/* location + filter sheets */
.loc-input{
  width:100%; border:1px solid var(--line); border-radius:999px; padding:11px 16px;
  font-family:inherit; font-size:.95rem; outline:none; background:var(--bg);
}
.loc-input:focus{border-color:var(--blue); background:#fff}
.suggest{margin:8px 0 0; padding:0; list-style:none}
.suggest li{
  padding:11px 12px; border-radius:12px; font-weight:800; font-size:.92rem; cursor:pointer;
}
.suggest li:hover{background:var(--bg); color:var(--coral)}
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:#fff; color:var(--ink); border-radius:999px; padding:10px 16px;
  font-weight:800; font-size:.92rem; margin-top:12px;
}
.filter-group{margin-bottom:14px}
.filter-group h4{margin:0 0 8px; font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:.95rem}
.filter-opts{display:flex; flex-wrap:wrap; gap:8px}
.fopt{
  border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px;
  padding:8px 14px; font-weight:800; font-size:.86rem; transition:.15s;
}
.fopt.on{background:var(--coffee); border-color:var(--coffee); color:#fff}

/* ---------- Card stage ---------- */
.stage{
  position:relative; flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:4px 16px calc(var(--nav-h) + 16px);
}
/* Clip only while the column is moving, so the neighbouring cards stay hidden
   until they are dragged into view. Left off at rest, otherwise the save
   animation (which flies up to the saved tab in the header) would be cut off. */
.stage.dragging, .stage.settling{overflow:hidden}
.stage-empty{text-align:center; color:var(--muted); font-weight:700; padding:0 30px}
.stage-empty img{width:130px; margin:0 auto 10px; display:block; opacity:.9}

.card{
  position:absolute; width:min(92vw, 400px); max-height:100%;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  border:1px solid var(--line);
  overflow:hidden; display:flex; flex-direction:column;
  touch-action:none; user-select:none;
  transition:transform .28s ease, opacity .28s ease, filter .28s ease;
  will-change:transform;
}
/* while a finger is down the column must track it exactly: no transform
   transition, but keep opacity so the neighbours fade in rather than blink */
.stage.dragging .card{transition:opacity .15s ease}
/* releasing glides the column to rest */
.stage.settling .card{transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease}
.card.dragging{transition:none}
.card.main{z-index:3}
/* The real next/previous cards, parked one card height above and below. JS
   positions them (it needs the measured height), so no transform here.
   Hidden at rest: the stage is taller than a card, so a card-height offset still
   lands inside it and would show through under the current card. They fade in
   the moment a finger goes down, which is when you want to see what is coming. */
.card.peek{z-index:2; pointer-events:none; opacity:0}
.stage.dragging .card.peek,
.stage.settling .card.peek{opacity:1}
.card.fly-save{
  transition:transform .5s cubic-bezier(.5,-.1,.7,1), opacity .5s ease;
  transform:translate(28vw,-58vh) scale(.06) rotate(6deg) !important; opacity:0;
  z-index:5;
}
/* left = ignore, gone for good */
.card.fly-left{transform:translateX(-120vw) rotate(-8deg) !important; opacity:0}
.card.fly-right{transform:translateX(120vw) rotate(8deg) !important; opacity:0}
/* up = next, down = back a card */
.card.fly-up{transform:translateY(-110vh) !important; opacity:0}
.card.fly-down{transform:translateY(110vh) !important; opacity:0}

/* tell the thumb what it is about to do */
.card.hint-save{box-shadow:0 0 0 3px #9FD8B6, 0 18px 40px rgba(0,0,0,.18)}
.card.hint-ignore{box-shadow:0 0 0 3px #C9C2BB, 0 18px 40px rgba(0,0,0,.18); filter:grayscale(.5)}
/* top middle of the card: the corners travel off-screen with the drag,
   the middle stays under the thumb's eye */
.card.hint-save::after,
.card.hint-ignore::after{
  position:absolute; top:16px; left:50%; z-index:6; padding:8px 16px; border-radius:999px;
  font-weight:800; font-size:.9rem; letter-spacing:.04em; color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.card.hint-save::after{content:'SAVE'; background:#4E9E6E; transform:translateX(-50%) rotate(4deg)}
.card.hint-ignore::after{content:'NOT FOR ME'; background:#8F8177; transform:translateX(-50%) rotate(-4deg)}

/* hero area */
.card-hero{
  position:relative; height:185px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center;
}
.card-hero .hero-emoji{font-size:3.1rem; opacity:.9}
.type-tag{
  position:absolute; left:12px; top:12px; background:rgba(255,255,255,.94);
  color:var(--ink); border-radius:999px; padding:5px 12px;
  font-weight:800; font-size:.76rem; text-transform:capitalize;
  letter-spacing:.02em;
}
.free-tag{
  position:absolute; left:12px; bottom:12px; background:var(--mint);
  color:var(--coffee-d); border-radius:999px; padding:5px 12px;
  font-weight:800; font-size:.78rem; letter-spacing:.04em;
}
/* Today and Tomorrow are the two a parent acts on, so they get colour and a
   nudge of animation. Sits under the type tag, top left. */
.when-pill{
  position:absolute; left:12px; top:46px; border-radius:999px; padding:5px 12px;
  font-weight:800; font-size:.78rem; letter-spacing:.04em; color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.16);
}
.when-pill.today{background:#3E9B63; animation:pop .5s ease}
.when-pill.tomorrow{background:#E8862E}
@keyframes pop{0%{transform:scale(.6); opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1); opacity:1}}

/* --- coffee / toilet badges: circle with a small distance box off the top --- */
.near-badges{
  position:absolute; right:12px; top:12px; display:flex; flex-direction:column;
  gap:10px; align-items:center;
}
.near{position:relative; display:block}
.near .circle{
  border-radius:999px; background:#fff; color:var(--coffee);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); border:1px solid var(--line);
}
.near .circle svg{width:62%; height:62%}
/* distance / tick sits half over the circle, bottom right */
.near .dist{
  position:absolute; bottom:-4px; right:-8px;
  background:var(--coffee); color:#fff; border-radius:8px;
  font-size:.62rem; font-weight:800; padding:2px 6px; white-space:nowrap;
  line-height:1.2; box-shadow:var(--shadow-sm);
}
.near .dist.ok{background:#2e9e5b; font-size:.7rem; padding:2px 7px; border-radius:999px}
.near.sz-3 .circle{width:46px; height:46px; font-size:1.4rem}
.near.sz-2 .circle{width:38px; height:38px; font-size:1.1rem}
.near.sz-1 .circle{width:30px; height:30px; font-size:.85rem; opacity:.92}

/* faint outline add-a-photo, bottom right of the hero image */
.hero-add{
  position:absolute; right:10px; bottom:10px; z-index:2;
  border:none; background:none; padding:6px; cursor:pointer;
  color:#fff; opacity:.55; transition:opacity .15s;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.hero-add svg{width:30px; height:30px; display:block}
.hero-add:hover, .hero-add:focus-visible{opacity:.95}

/* body */
/* touch-action:none matters as much as the padding here. This is a scroll
   container (overflow-y), so a touch starting inside it belongs to IT, not to the
   card: Chrome claims the gesture and fires pointercancel, and the swipe silently
   does nothing. That is why swiping the picture worked but swiping the text did
   not. The whole card must drive the deck, so no touch scrolling in here: long
   copy belongs in the More info popup. */
.card-body{padding:16px 18px 12px; overflow-y:auto; min-height:0; touch-action:none}
.card-title{font-family:var(--font-head); font-size:1.3rem; font-weight:600; color:var(--ink); line-height:1.2; margin:0 0 4px}
/* heads-up about THIS listing, tucked on the end of its title */
.title-warn{
  background:none; border:0; cursor:pointer; padding:0 2px; font-size:.9rem;
  line-height:1; vertical-align:middle; opacity:.65;
}
.title-warn:hover, .title-warn:focus-visible{opacity:1}
.card-sub{color:var(--muted); font-weight:700; font-size:.88rem; margin-bottom:12px; line-height:1.5}
/* the address itself is the directions link (Google Maps) */
.card-sub .addr-link{
  color:inherit; text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:#D8CEC4;
}
.card-sub .map-link{
  border:none; background:none; padding:0; color:var(--blue);
  font-weight:800; font-size:inherit; white-space:nowrap;
}
.fact-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.fact{
  background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:6px 11px;
  font-weight:800; font-size:.85rem; color:var(--ink);
}
/* cost pill when it links out to a booking/official page */
a.fact-link{
  text-decoration:none; border-color:var(--coral); color:var(--coffee-d);
  display:inline-flex; align-items:center; gap:6px;
}
a.fact-link .fact-go{color:var(--coral); font-weight:900}
a.fact-link:active{transform:scale(.96)}
.card-blurb{font-size:.94rem; line-height:1.55; margin:0; color:#4b4038}
/* $ / $$ / $$$ price level, mostly on cafe cards */
.price-pill{color:var(--coffee-d); border-color:var(--coffee); letter-spacing:.06em}
/* kid-friendly flags on a coffee shop card */
.kid-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.kid-chip{
  background:var(--mint-l,#eef7f0); border:1px solid var(--line); border-radius:999px;
  padding:4px 10px; font-weight:700; font-size:.78rem; color:var(--coffee-d);
}

/* action bar */
.card-actions{
  flex:none; display:flex; align-items:center; gap:4px;
  border-top:1px solid var(--line); padding:10px 12px;
}
.act{
  display:inline-flex; align-items:center; gap:6px; border:none; background:none;
  font-weight:800; font-size:.9rem; color:var(--muted); border-radius:10px; padding:8px 9px;
  transition:.15s;
}
.act:active{transform:scale(.92)}
.act.on-up{color:#2e9e5b; background:#eaf6ef}
.act.on-down{color:#c94a3d; background:#fbedeb}
/* Save alone on the right now Map lives on the address line and the camera on
   the photo itself: the bar is just votes, comments and Save. */
.act.save-act{margin-left:auto; color:#fff; background:var(--coral); font-family:var(--font-head); font-weight:600; padding:8px 14px; border-radius:999px}
.act.save-act.saved{background:var(--mint); color:var(--coffee-d)}
.card.uploading{opacity:.6; pointer-events:none}

/* little confirmation so an upload does not feel like it went nowhere */
.kc-toast{
  position:fixed; left:50%; bottom:calc(var(--nav-h) + 22px); transform:translate(-50%, 12px);
  background:var(--coffee-d); color:#fff; font-weight:800; font-size:.9rem;
  padding:11px 18px; border-radius:999px; z-index:60; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.kc-toast.on{opacity:1; transform:translate(-50%, 0)}

/* community photo strip in the More info sheet */
.photo-strip{
  display:flex; gap:8px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:none;
}
.photo-strip::-webkit-scrollbar{display:none}
.photo-thumb{
  flex:none; width:104px; height:78px; border-radius:12px; background-size:cover;
  background-position:center; border:1px solid var(--line);
  padding:0; cursor:zoom-in;   /* it is a <button> now: opens the lightbox */
}

/* photo lightbox: tap a card picture to see it properly */
.lightbox{
  position:fixed; inset:0; z-index:120; background:rgba(24,18,14,.94);
  display:flex; align-items:center; justify-content:center;
  animation:lbIn .18s ease; touch-action:none; user-select:none;
}
.lightbox[hidden]{display:none}
@keyframes lbIn{from{opacity:0} to{opacity:1}}
.lb-img{
  max-width:100%; max-height:100%; object-fit:contain; display:block;
  transition:transform .18s ease, opacity .18s ease;
}
.lb-close{
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 12px); right:14px; z-index:2;
  width:42px; height:42px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(0,0,0,.45); color:#fff; font-size:1.25rem; line-height:1;
}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:64px; border:0; border-radius:14px; cursor:pointer;
  background:rgba(0,0,0,.38); color:#fff; font-size:2.2rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.lb-nav.prev{left:8px}
.lb-nav.next{right:8px}
.lb-nav[hidden]{display:none}
.lb-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:14px 18px calc(env(safe-area-inset-bottom, 0px) + 16px);
  display:flex; justify-content:space-between; gap:12px; align-items:flex-end;
  color:#fff; font-weight:700; font-size:.85rem; text-shadow:0 1px 4px rgba(0,0,0,.6);
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
  pointer-events:none;
}
/* the hero is tappable when there is a real photo behind it */
.card-hero.zoomable{cursor:zoom-in}

/* comments sheet */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(50,40,31,.42); z-index:40;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.sheet-backdrop.open{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41; background:#fff;
  border-radius:24px 24px 0 0; box-shadow:var(--shadow-lg);
  max-height:78vh; display:flex; flex-direction:column;
  transform:translateY(105%); transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.sheet.open{transform:translateY(0)}
.sheet-head{flex:none; padding:16px 20px 8px; display:flex; align-items:center; justify-content:space-between}
.sheet-head h3{margin:0; font-family:var(--font-head); font-weight:600; color:var(--ink)}
.sheet-close{border:none; background:var(--bg); border-radius:999px; width:32px; height:32px; font-size:.95rem; font-weight:800; color:var(--ink)}
.sheet-body{overflow-y:auto; padding:4px 20px 20px}
.comment{padding:10px 0; border-bottom:1px solid var(--line)}
.comment .who{font-weight:800; color:var(--ink); font-size:.88rem}
.comment .txt{margin:2px 0 0; font-size:.93rem}
.comment-input{
  display:flex; gap:8px; padding:10px 20px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); flex:none;
}
.comment-input input{
  flex:1; border:1px solid var(--line); border-radius:999px; padding:10px 14px;
  font-family:inherit; font-size:.93rem; outline:none; background:var(--bg);
}
.comment-input input:focus{border-color:var(--blue)}
.comment-input button{
  border:none; background:var(--coral); color:#fff; border-radius:999px;
  padding:0 18px; font-family:var(--font-head); font-weight:600;
}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--line); z-index:30;
  display:flex; align-items:flex-start; justify-content:space-around;
  padding:8px 6px env(safe-area-inset-bottom);
}
.nav-item{
  border:none; background:none; display:flex; flex-direction:column; align-items:center;
  gap:3px; color:var(--muted); font-weight:800; font-size:.64rem; width:60px;
  letter-spacing:.02em;
}
.nav-item .ic-svg{width:22px; height:22px}
.nav-item .nic{font-size:1.35rem; line-height:1}
.nav-item.on{color:var(--coral)}
.nav-add{
  border:none; background:var(--coral); color:#fff; width:54px; height:54px;
  border-radius:999px; margin-top:-22px; box-shadow:0 6px 16px rgba(232,134,46,.42);
  display:flex; align-items:center; justify-content:center;
}
.nav-add .ic-svg{width:26px; height:26px}
.nav-add .nic{font-size:1.9rem; line-height:1; font-weight:700}
.nav-add:active{transform:scale(.92)}

/* ---------- Modals (add, profile, stubs) ---------- */
.modal .sheet-body{padding-bottom:24px}
.add-opt{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  border:1px solid var(--line); background:#fff; border-radius:16px;
  padding:14px; margin-bottom:10px; transition:.15s;
}
.add-opt:hover{border-color:var(--coral)}
.add-opt .opt-ic{
  width:44px; height:44px; border-radius:12px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex:none; color:var(--coffee);
}
.add-opt .opt-ic .ic-svg{width:22px; height:22px}
.add-opt b{font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:1rem; display:block}
.add-opt small{color:var(--muted); font-weight:700}
.dump-box{
  width:100%; border:1px solid var(--line); border-radius:16px; padding:12px 14px;
  font-family:inherit; font-size:.93rem; min-height:88px; resize:vertical; outline:none;
  background:var(--bg);
}
.dump-box:focus{border-color:var(--blue); background:#fff}
.btn-primary{
  border:none; background:var(--coral); color:#fff; border-radius:999px;
  padding:10px 18px; font-family:var(--font-head); font-weight:600; font-size:.95rem;
  margin-top:10px;
}
.dump-out{margin-top:12px}
.dump-out .fact{margin:0 6px 6px 0; display:inline-block}
.profile-head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.avatar{
  width:60px; height:60px; border-radius:999px; background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden;
}
.avatar img{width:78%; height:auto}
.profile-head b{font-family:var(--font-head); font-weight:600; font-size:1.15rem; color:var(--ink); display:block}
.profile-head small{color:var(--muted); font-weight:800}
.badge-row{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px}
.badge{
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:8px 12px;
  font-weight:800; font-size:.82rem; color:var(--ink);
}
.badge.locked{opacity:.42}
.saved-item{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.saved-item .th{
  width:50px; height:50px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.saved-item b{font-family:var(--font-head); font-weight:600; color:var(--ink); display:block; font-size:.95rem}
.saved-item small{color:var(--muted); font-weight:800}
.saved-item .rm{margin-left:auto; border:1px solid var(--line); background:#fff; border-radius:999px; width:30px; height:30px; color:var(--muted); font-weight:800}

/* more info link on cards */
.more-link{
  border:none; background:none; color:var(--blue); font-weight:800; font-size:.88rem;
  padding:8px 0 0; display:block;
}
.notice{
  background:#FFF4E0; border:1px solid #F2E0BD; border-radius:12px;
  padding:10px 12px; font-size:.86rem; font-weight:700; color:#7a5c2e;
  margin:12px 0; line-height:1.45;
}
.info-actions{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.info-actions .btn-ghost{margin-top:0; justify-content:flex-start; text-decoration:none; color:var(--ink)}
a.btn-ghost:hover{text-decoration:none; border-color:var(--coral)}
.form-field{display:block; width:100%; margin-bottom:8px}
.form-msg{margin-top:10px; font-weight:800}

/* add flow */
.add-preview{width:100%; max-height:220px; object-fit:cover; border-radius:16px; margin:4px 0 10px; border:1px solid var(--line)}
.btn-text{border:none; background:none; color:var(--muted); font-weight:800; font-size:.88rem; display:block; margin:12px auto 0}
.btn-submit{background:var(--coffee); margin-left:8px}
#addNext:disabled{opacity:.4}

/* profile stats */
.stat-row{display:flex; gap:10px; margin:4px 0 16px}
.stat-tile{
  flex:1; border:1px solid var(--line); background:#fff; border-radius:16px;
  padding:12px; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.stat-big{font-family:var(--font-head); font-weight:600; font-size:1.35rem; color:var(--ink)}
.stat-lbl{font-size:.72rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.stat-link{font-size:.78rem; font-weight:800; color:var(--blue)}
.toggle-row{display:flex; align-items:center; gap:10px; font-weight:800; font-size:.95rem; margin-bottom:10px}
.toggle-row input{width:20px; height:20px; accent-color:var(--coral)}
.pd-row{display:flex; gap:8px; margin-bottom:8px}
.pd-row .loc-input{flex:1}
.my-info{margin-top:6px}
.my-info summary{font-weight:800; color:var(--muted); cursor:pointer; font-size:.9rem}

/* badges sheet */
.bdg-h{font-family:var(--font-head); font-weight:600; color:var(--ink); margin:16px 0 8px}
.bdg-row{
  display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left;
  border:1px solid var(--line); background:#fff; border-radius:14px;
  padding:12px; margin-bottom:8px;
}
.bdg-row.locked{opacity:.45}
.bdg-row .bdg-ic{font-size:1.6rem; flex:none}
.bdg-row b{font-family:var(--font-head); font-weight:600; color:var(--ink); display:block}
.bdg-row small{display:block; color:var(--muted); font-weight:700; margin-top:2px}
.bdg-row .why{display:none; color:#2e9e5b}
.bdg-row.focus .why{display:block}

/* map sheet */
.sheet-map{max-height:88vh}
#mapBox{height:70vh; min-height:340px; border-radius:0 0 0 0}
.map-pop{font-family:var(--font-body)}
.map-pop b{font-family:var(--font-head); font-weight:600; color:var(--ink); display:block; margin-bottom:2px}
.map-pop small{color:var(--muted); font-weight:800; display:block; margin-bottom:8px}
.map-pop button, .map-pop .dir-btn{
  border:none; background:var(--coral); color:#fff; border-radius:999px;
  padding:6px 14px; font-family:var(--font-head); font-weight:600; font-size:.85rem;
  text-decoration:none; display:inline-block;
}
.map-pop .dir-btn{background:var(--coffee-d)}
.kc-pin{
  width:34px; height:34px; border-radius:999px; background:#fff; border:2px solid var(--coral);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; cursor:pointer;
}
/* the listing you asked to see, and its coffee/toilet: smaller and quieter so
   the place itself still reads as the main pin */
.kc-pin.here-pin{width:42px; height:42px; font-size:1.3rem; border-color:var(--coffee-d); z-index:2}
.kc-pin.near-pin{width:28px; height:28px; font-size:.85rem; border-color:var(--blue); border-width:2px}

/* bottom-right layer toggles on the map: coffee and parks on/off */
.map-toggles{
  position:absolute; right:12px; bottom:28px; z-index:5;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
}
.map-tgl{
  border:1px solid var(--line); background:#fff; color:var(--muted);
  border-radius:999px; padding:8px 14px; font-weight:800; font-size:.84rem;
  box-shadow:var(--shadow-sm);
}
.map-tgl.on{background:var(--coffee); border-color:var(--coffee); color:#fff}

/* swipe hint */
.hint{
  position:absolute; bottom:calc(var(--nav-h) + 22px); left:0; right:0; text-align:center;
  color:var(--muted); font-weight:800; font-size:.76rem; pointer-events:none; z-index:2;
}

/* desktop up/down arrows (mouse users), hidden on mobile */
.arrow{
  display:none; position:absolute; left:calc(50% + 240px); z-index:4;
  border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); border-radius:999px;
  width:46px; height:46px; font-size:1.2rem; color:var(--ink); font-weight:800;
}
.arrow.up{top:calc(50% - 54px)}
.arrow.down{top:calc(50% + 8px)}

/* ---------- Desktop ---------- */
@media (min-width: 900px){
  .brand-img{height:30px}
  /* nav moves up: profile and friends live in the header, no bottom bar */
  .bottom-nav{
    position:fixed; top:12px; right:250px; left:auto; bottom:auto;
    width:auto; height:auto; background:transparent; border:none; padding:0;
    gap:6px; align-items:center; justify-content:flex-end;
  }
  .nav-item{
    flex-direction:row; width:auto; gap:6px; font-size:.8rem;
    background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 13px;
  }
  .nav-item .nic{font-size:1rem}
  .nav-item .nlbl{display:none}
  .nav-add{width:38px; height:38px; margin-top:0; box-shadow:var(--shadow-sm)}
  .nav-add .nic{font-size:1.4rem}
  .stage{padding-bottom:34px}
  .card{max-height:calc(100% - 40px)}
  .hint{bottom:8px}
  .card{width:400px; cursor:grab}
  .arrow{display:flex; align-items:center; justify-content:center}
  .hint{font-size:.82rem}
  .sheet{left:50%; right:auto; width:520px; transform:translate(-50%,105%); border-radius:24px 24px 0 0}
  .sheet.open{transform:translate(-50%,0)}
}