/* =====================================================================
   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}
/* An author display rule beats the UA stylesheet's [hidden]{display:none}, so
   .form-field made hidden inputs visible anyway: step 3 showed the whole new
   listing form on top of the "add to this place" one. */
[hidden]{display:none !important}
.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}
/* the one-tap option leads, so a parent with a kid on her hip sees it first */
.add-opt.hero-opt{border-color:var(--coral); background:#FFF6EE}
.add-opt.hero-opt .opt-ic{background:var(--coral); color:#fff}

/* 1 Photo -> 2 Location -> 3 Details, so she always knows what is coming */
.stepper{
  display:flex; align-items:center; gap:6px; list-style:none; margin:0 0 14px; padding:0;
}
.stepper li{
  display:flex; align-items:center; gap:6px; flex:1; min-width:0;
  font-weight:800; font-size:.78rem; color:var(--muted); white-space:nowrap;
}
.stepper .dot{
  width:22px; height:22px; flex:none; border-radius:999px; background:var(--bg);
  border:1px solid var(--line); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:.74rem;
}
.stepper li.on{color:var(--ink)}
.stepper li.on .dot{background:var(--coral); border-color:var(--coral); color:#fff}
.stepper li.done .dot{background:var(--green, #4E9E6E); border-color:var(--green, #4E9E6E); color:#fff}
.next-peek{margin:12px 0 0; text-align:center; color:var(--muted); font-weight:700; font-size:.82rem}
.next-peek b{color:var(--ink)}

/* back / next pair at the foot of a step */
.step-nav{display:flex; align-items:center; gap:10px; margin-top:14px}
.step-nav .btn-text{margin:0; flex:none}
.step-nav .btn-primary{margin:0; flex:1}
.step-nav .btn-submit{margin-left:0}

/* type an address, or tap the pin to use the phone's location */
.loc-entry{display:flex; gap:8px; align-items:stretch}
.loc-entry .loc-input{flex:1; margin:0}
.loc-gps{
  flex:none; width:48px; border:1px solid var(--line); background:var(--bg); cursor:pointer;
  border-radius:14px; font-size:1.15rem; line-height:1;
}
.loc-gps:active{transform:scale(.94)}
.fld-lbl{
  display:block; margin:10px 0 4px; font-weight:800; font-size:.82rem; color:var(--muted);
}
.switch-row{display:flex; flex-direction:column; gap:2px; margin:6px 0 2px}
.switch-row .toggle-row{margin:0}
.opt-note{font-weight:700; color:var(--muted); text-transform:none}
/* a "no" on toilets is real information, not the same as never having asked.
   Shared by the add flow (#dAmen) and the Update sheet (#updGroups). */
.fopt.no{
  background:#F3EFEB; border-color:var(--line); color:var(--muted); text-decoration:line-through;
}

/* the thank you: she should know it worked and what she earned */
.done-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:22px 16px; border:1px solid var(--line); border-radius:18px; background:var(--bg);
}
.done-tick{font-size:2.6rem; line-height:1}
.done-card b{font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:1.15rem}
.done-points{
  background:var(--coral); color:#fff; border-radius:999px; padding:6px 16px;
  font-weight:800; font-size:.92rem;
}
.done-card .btn-primary{width:100%}

/* photo tray: as many as she likes, each removable */
.add-thumbs{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px}
.add-thumb{
  position:relative; width:80px; height:80px; border-radius:14px; background-size:cover;
  background-position:center; border:1px solid var(--line);
}
.add-thumb .rmx{
  position:absolute; top:-6px; right:-6px; width:24px; height:24px; border:0; cursor:pointer;
  border-radius:999px; background:rgba(24,18,14,.82); color:#fff; font-size:.8rem; font-weight:800;
  line-height:1; display:flex; align-items:center; justify-content:center;
}
.add-thumb.more{
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--bg); color:var(--muted); font-size:1.6rem; font-weight:700;
}

/* The AI takes ~30s. A line of text is too easy to miss, so this covers the
   sheet: a real spinner, what it is doing, and a bar that keeps moving so it
   never looks frozen. */
.ai-busy{
  /* stops below the sheet header so the ✕ stays reachable if she changes her mind */
  position:absolute; top:52px; left:0; right:0; bottom:0; z-index:20;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(255,255,255,.93); backdrop-filter:blur(2px);
  animation:lbIn .18s ease;
}
.ai-busy[hidden]{display:none}
.ai-busy-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  max-width:280px;
}
.ai-busy b{font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:1.05rem}
.ai-busy small{color:var(--muted); font-weight:700; line-height:1.4}
.spinner{
  width:54px; height:54px; flex:none; border-radius:999px; margin-bottom:6px;
  border:5px solid var(--line); border-top-color:var(--coral);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* indeterminate bar: proves it is still working when the spinner alone reads as stuck */
.busy-bar{
  width:190px; height:6px; border-radius:999px; background:var(--line);
  overflow:hidden; margin-top:10px;
}
.busy-bar span{
  display:block; width:40%; height:100%; border-radius:999px; background:var(--coral);
  animation:busySlide 1.5s ease-in-out infinite;
}
@keyframes busySlide{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(360%)}
}
@media (prefers-reduced-motion:reduce){
  .spinner{animation-duration:2.4s}
  .busy-bar span{animation-duration:3s}
}
/* .sheet is position:fixed, so it is the containing block for the overlay */

/* what we found: map, address, and the name to tap instead of typing */
.loc-card{
  border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:12px;
  background:#fff;
}
.loc-map{display:block; width:100%; height:150px; object-fit:cover; background:var(--bg)}
.loc-lines{padding:11px 13px}
.loc-lines .addr{font-weight:800; color:var(--ink); font-size:.9rem; line-height:1.35}
.loc-lines .sub{color:var(--muted); font-weight:700; font-size:.82rem; margin-top:2px}
.name-pick{padding:0 13px 13px}
.name-pick h5{
  margin:0 0 8px; font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:.92rem;
}
.name-opts{display:flex; flex-wrap:wrap; gap:8px}
.name-opt{
  border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer;
  padding:9px 14px; font-weight:800; font-size:.88rem; color:var(--ink);
}
.name-opt.on{background:var(--coral); border-color:var(--coral); color:#fff}
.add-more{margin-top:10px}
.add-more summary{
  cursor:pointer; color:var(--muted); font-weight:800; font-size:.88rem; padding:6px 0;
}
.add-more .dump-box{margin-top:8px}

/* 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)}
}

/* ---------- update sheet, search, facility chips (2026-08-10) ---------- */
/* More info + Update side by side at the foot of the card body */
.card-links{display:flex; align-items:center; gap:18px}

/* facility chip that says "there are N more in More info" */
.kid-chip.chip-more{background:#fff; border-style:dashed; color:var(--blue); cursor:pointer}
/* a facility a parent said is NOT there (shown only in More info) */
.kid-chip.chip-no{background:#F3EFEB; color:var(--muted); text-decoration:line-through}

/* collapsed facility groups on the Update sheet: one box each, tap to open,
   so twenty checkboxes never hit her all at once */
.upd-group{
  border:1px solid var(--line); border-radius:14px; background:#fff;
  padding:10px 12px; margin-bottom:10px;
}
.upd-group summary{
  font-weight:800; font-size:.9rem; color:var(--ink); cursor:pointer;
  list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.upd-group summary::-webkit-details-marker{display:none}
.upd-group summary::after{content:'\25BE'; color:var(--muted)}
.upd-group[open] summary::after{content:'\25B4'}
.upd-group summary .upd-count{color:var(--muted); font-weight:700; font-size:.8rem; margin-left:8px}
.upd-group .filter-opts{margin-top:10px}

/* search results reuse the saved-item rows; rows are tappable */
#searchResults{margin-top:12px}
#searchResults .saved-item{cursor:pointer}
#sheetSaved .saved-item{cursor:pointer}

/* ---------- first-visit tour (2026-08-10) ---------- */
/* The spotlight ring carries the dark wash as a giant shadow, so whatever it
   sits over stays bright while the rest of the app dims. */
.tour{position:fixed; inset:0; z-index:80}
.tour-spot{
  position:fixed; border-radius:24px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(35,24,15,.62), 0 0 0 3px rgba(255,255,255,.85) inset;
  transition:all .35s ease;
}
.tour-hand{
  position:fixed; z-index:82; font-size:2.7rem; pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.tour-hand.up{animation:tour-up 1.6s ease-in-out infinite}
.tour-hand.right{animation:tour-right 1.6s ease-in-out infinite}
.tour-hand.left{animation:tour-left 1.6s ease-in-out infinite}
@keyframes tour-up{
  0%{transform:translate(-50%,50px); opacity:0}
  20%{opacity:1}
  75%{transform:translate(-50%,-70px); opacity:1}
  100%{transform:translate(-50%,-90px); opacity:0}
}
@keyframes tour-right{
  0%{transform:translate(-90px,-50%) rotate(-10deg); opacity:0}
  20%{opacity:1}
  75%{transform:translate(50px,-50%) rotate(10deg); opacity:1}
  100%{transform:translate(70px,-50%) rotate(10deg); opacity:0}
}
@keyframes tour-left{
  0%{transform:translate(50px,-50%) rotate(10deg); opacity:0}
  20%{opacity:1}
  75%{transform:translate(-90px,-50%) rotate(-10deg); opacity:1}
  100%{transform:translate(-110px,-50%) rotate(-10deg); opacity:0}
}
.tour-card{
  position:fixed; left:50%; transform:translateX(-50%); z-index:83;
  width:min(92vw, 360px); background:#fff; border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow-lg); padding:18px 16px 14px;
  text-align:center; transition:top .35s ease, bottom .35s ease;
}
.tour-emoji{font-size:2.2rem; line-height:1; margin-bottom:6px}
.tour-card h3{margin:0 0 6px; font-family:var(--font-head); font-weight:600; font-size:1.12rem; color:var(--ink)}
.tour-card .btn-primary{width:100%; margin-top:12px}
.tour-card .btn-text{margin-top:8px}
.tour-dots{display:flex; justify-content:center; gap:6px; margin-top:12px}
.tour-dots span{width:7px; height:7px; border-radius:999px; background:var(--line); transition:.2s}
.tour-dots span.on{background:var(--coral); transform:scale(1.25)}

/* --- hands-on tour steps: she does the real swipe on the real card --- */
/* The overlay must not swallow the gesture it is asking for, so it goes
   transparent to touch and only the coach card stays live. Read-only steps
   keep the default (blocking), so tapping a spotlit button cannot open a
   sheet on top of the tour. */
.tour.hands-on{pointer-events:none}
.tour.hands-on .tour-card{pointer-events:auto}
/* lighter wash while she is working: the card she is dragging must stay clear */
.tour.hands-on .tour-spot{
  box-shadow:0 0 0 9999px rgba(35,24,15,.34), 0 0 0 3px rgba(255,255,255,.9) inset;
}
.tour.hands-on .tour-card{padding:13px 14px 10px; width:min(92vw, 340px)}
.tour.hands-on .tour-emoji{font-size:1.6rem; margin-bottom:2px}
.tour.hands-on .tour-card h3{font-size:1.02rem}
.tour.hands-on .tour-card .btn-primary{
  background:#fff; color:var(--muted); border:1px solid var(--line); margin-top:10px;
}
/* the well done beat between steps */
.tour-card.done .tour-emoji{animation:tour-pop .5s ease}
@keyframes tour-pop{0%{transform:scale(.4); opacity:0} 60%{transform:scale(1.2)} 100%{transform:scale(1)}}

/* --- tappable coffee / toilet badge (opens the map with walking directions) --- */
button.near{border:none; background:none; padding:0; font:inherit; color:inherit}
.near.tappable{cursor:pointer}
.near.tappable .circle{border-color:var(--coral)}
.near.tappable:active{transform:scale(.92)}
.near.tappable::after{
  content:''; position:absolute; inset:-6px; border-radius:999px;
}