/* Bites — built on the Food Map UI kit. Every colour, radius, shadow and type
   ramp below resolves to a token in tokens.css; nothing is hardcoded here. */

:root {
  /* Type scale — bites-design-kit README section 3. Lives here, not in
     tokens.css, so that file stays a verbatim copy of the kit's. */
  --type-display:   700 clamp(36px, 10vw, 52px)/1.04 var(--font-display);
  --type-h1:        700 29px/1.15 var(--font-display);
  --type-h2:        700 28px/1.15 var(--font-display);
  --type-cardTitle: 600 21px/1.2  var(--font-display);
  --type-h3:        600 18px/1.25 var(--font-display);
  --type-lead:      400 16px/1.55 var(--font-body);
  --type-body:      400 15px/1.5  var(--font-body);
  --type-button:    600 15px/1.2  var(--font-body);
  --type-meta:      500 13px/1.35 var(--font-body);
  --type-caption:   500 13px/1.35 var(--font-body);
  --type-input:     400 15px/1.3  var(--font-body);
  --type-logo:      700 20px/1.1  var(--font-display);
  --type-credit:    500 12px/1.4  var(--font-body);

  --sheet-h: 52vh;
  /* The left column on a wide screen. The map, the sheet, the header and the
     FABs all measure from this, so the layout cannot drift apart. */
  --rail: 420px;
  /* The fixed header's real height, written by app.js. Anything sitting under
     the header clears it with this. The tabs wrap to a second line on a wide
     screen, so it is not a constant and must not be hardcoded. */
  --topbar-h: 96px;
  /* the two semantic colours the kit does not define — the Indian veg mark */
  --veg: #1f7a45;
  --non-veg: #a32017;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
  background: var(--color-surface);
  color: var(--color-ink);
  font: var(--type-body);
  -webkit-text-size-adjust: 100%;
}

button, input { font-family: inherit; }
.icon { flex: 0 0 auto; }

#map { position: fixed; inset: 0 0 var(--sheet-h) 0; background: var(--color-map-land); }

.map-error {
  position: fixed; top: 40%; left: 16px; right: 16px;
  margin: 0; text-align: center;
  font: var(--type-caption); color: var(--color-ink-muted);
  z-index: 1;
}

/* ---------- header ---------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 4;
  background: var(--color-surface);
  box-shadow: var(--shadow-header);
  padding: max(10px, env(safe-area-inset-top)) var(--space-screen-padding) 0;
}
.topbar-row { display: flex; align-items: center; gap: var(--space-sm); }

.brand { display: flex; align-items: center; gap: 8px; color: var(--color-ink); flex: 0 0 auto; }
.wordmark { font: var(--type-logo); font-size: 20px; }
@media (max-width: 460px) { .wordmark { display: none; } }

.search {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 14px;
  background: var(--color-surface-subtle);
  border-radius: var(--radius-input);
  color: var(--color-ink-muted);
}
.search input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font: var(--type-input); font-size: 16px; /* under 16px, iOS zooms on focus */
  color: var(--color-ink);
}
.search input::placeholder { color: var(--color-ink-muted); }
.search-icon { display: flex; color: var(--color-ink-muted); }

.icon-btn {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  cursor: pointer;
}
.icon-btn:disabled { opacity: .5; }

.tabs {
  display: flex; gap: var(--space-tab-gap);
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 0; background: none;
  padding: 0 0 10px;
  font: 600 13px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab.is-on { color: var(--color-ink); border-bottom-color: var(--color-ink); }

/* ---------- sheet + cards ---------- */

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--sheet-h);
  background: var(--color-surface);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: 0 -6px 22px rgb(22 24 29 / 10%);
  display: flex; flex-direction: column;
  z-index: 3;
}
.sheet-grab {
  display: block; width: 100%; height: 22px;
  border: 0; background: none; cursor: pointer; padding: 0;
  position: relative; flex: 0 0 auto;
}
.sheet-grab::before {
  content: ''; position: absolute; top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 2px var(--space-screen-padding) 10px;
  flex: 0 0 auto;
}
.sheet-head strong {
  font: var(--type-cardTitle); font-size: 17px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sort { display: flex; gap: 6px; flex: 0 0 auto; }
.sort-btn {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink-secondary);
  padding: 6px 12px;
  font: 600 12px/1 var(--font-body);
  cursor: pointer;
}
.sort-btn.is-on { background: var(--color-primary-button); color: var(--color-on-primary-button); border-color: var(--color-primary-button); }

.feed {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: var(--space-card-gap);
  padding: 2px var(--space-screen-padding) calc(88px + env(safe-area-inset-bottom));
}
.empty {
  color: var(--color-ink-muted); font: var(--type-body);
  padding: 32px 0; text-align: center;
}

/* A place card, per the kit: photo, distance chip, scrim band, category badge. */
.card {
  position: relative;
  height: 200px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-subtle);
  flex: 0 0 auto;
}
.card-photo { position: absolute; inset: 0; cursor: pointer; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.chip-time, .chip-fresh {
  position: absolute; top: 12px;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-chip-dark);
  color: var(--color-on-dark);
  font: var(--type-caption); font-size: 12px;
  backdrop-filter: blur(6px);
}
.chip-time { right: 12px; }
.chip-fresh { left: 12px; background: #FFFFFF; color: #16181D; font-weight: 600; }

.card-band {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 16px;
  background: linear-gradient(transparent, var(--color-scrim) 38%);
  color: var(--color-on-dark);
}
.card-text { flex: 1; min-width: 0; }
.card-title {
  margin: 0;
  font: var(--type-cardTitle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-sub {
  margin: 3px 0 0;
  display: flex; align-items: center; gap: 5px;
  font: var(--type-caption);
  opacity: .92;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 2px var(--color-on-dark);
  color: var(--color-on-dark);
}

.card .report {
  position: absolute; top: 12px; left: 12px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--color-chip-dark);
  color: var(--color-on-dark);
  padding: 6px 10px;
  font: var(--type-caption); font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms;
}
.card:hover .report, .card .report:focus-visible { opacity: 1; }
.card:has(.chip-user) .report { top: 48px; }
/* Touch screens have no hover, so Report was invisible on phones. */
@media (hover: none) { .card .report { opacity: .92; } }
.card .report.is-edit { opacity: 1; background: var(--color-surface); color: var(--color-ink); font-weight: 600; }

/* the Indian veg / non-veg mark */
.dot {
  position: absolute; bottom: 14px; right: 68px;
  width: 14px; height: 14px;
  border: 2px solid var(--veg);
  border-radius: 3px;
  background: #FFFFFF;
}
.dot::after {
  content: ''; position: absolute; inset: 2px;
  border-radius: 50%; background: var(--veg);
}
.dot.non-veg { border-color: var(--non-veg); }
.dot.non-veg::after { background: var(--non-veg); }

/* ---------- FAB ---------- */

/* The kit pairs them: a 64px ink FAB in the centre toggles map/list, and a
   56px accent FAB on the right posts a bite. */
.fab-bar {
  position: fixed;
  left: 0; right: 0;
  /* Measured from the bottom of the viewport, never from --sheet-h. On a wide
     screen --sheet-h is 100%, and `calc(100% + 16px)` threw the camera button
     clean off the top of the page. */
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 0 var(--space-screen-padding);
  pointer-events: none;
  z-index: 5;
}
.fab-bar > * { pointer-events: auto; }

.fab {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-round);
  background: var(--color-fab); color: var(--color-on-fab);
  box-shadow: var(--shadow-fab);
  cursor: pointer;
}
.fab-camera {
  position: absolute; right: var(--space-screen-padding);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-round);
  background: var(--color-accent); color: var(--color-on-accent);
  box-shadow: var(--shadow-camera-fab);
  cursor: pointer;
}

/* ---------- pins ---------- */

/* MapLibre owns this element's transform. Nothing of ours goes here — no
   transform, no transition — or the pins lag behind the map when it pans. */
.pin-marker { line-height: 0; }
.pin-marker.is-open { z-index: 2; }

/* The signature marker. Geometry from the kit's `.bite-pin`: 52x62, photo
   circle with a 3px white ring, a rotated square as the tail, category badge
   bottom-left, age top-right. Anchored at the bottom centre. */
.bite-pin {
  position: relative;
  width: 52px; height: 62px;
  padding: 0; border: 0; background: none;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 30%));
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.34, 1.4, .64, 1);
  transform-origin: 50% 100%;
}
.bite-pin:hover { transform: scale(1.06); }
.pin-marker.is-open .bite-pin { transform: scale(1.14); }

.bite-pin__tail {
  position: absolute; left: 19px; top: 46px;
  width: 14px; height: 14px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 2px;
}
.bite-pin__photo {
  position: absolute; inset: 0 0 10px 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  background: var(--color-surface-subtle);
}
.bite-pin__cat {
  position: absolute; left: -4px; bottom: 14px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.bite-pin__age {
  position: absolute; right: -8px; top: -6px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-fab); color: var(--color-on-fab);
  font: 600 10px/1.4 var(--font-body);
}

/* ---------- post form ---------- */

/* An author `display` beats the UA stylesheet's [hidden] { display: none }, so
   without this rule the modal stays on screen — a full-page transparent overlay
   that silently eats every click on the map, the filters and the buttons. */
.modal[hidden] { display: none; }

.modal {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: end center;
  background: rgb(22 24 29 / 50%);
}
.card-form {
  width: 100%; max-width: 460px;
  max-height: 94dvh; overflow-y: auto;
  background: var(--color-surface-raised);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
}
.card-form img {
  width: 100%; height: 150px; object-fit: cover;
  border-radius: var(--radius-card); background: var(--color-surface-subtle);
}
.card-form label {
  display: flex; flex-direction: column; gap: 5px;
  font: var(--type-caption); color: var(--color-ink-muted);
  flex: 1; min-width: 0;
}
.card-form input, .card-form select {
  font: var(--type-input); font-size: 16px;
  color: var(--color-ink);
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  width: 100%; min-width: 0;
}
.row { display: flex; gap: 10px; align-items: flex-end; }
.row > button { flex: 1; min-height: 48px; }
.primary, .ghost {
  border-radius: var(--radius-button);
  font: var(--type-button);
  cursor: pointer;
  padding: 14px;
}
.primary { border: 0; background: var(--color-primary-button); color: var(--color-on-primary-button); }
.primary[disabled] { opacity: .45; }
.ghost { border: 1px solid var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-ink); }
.status { margin: 0; font: var(--type-caption); color: var(--color-ink-muted); min-height: 18px; }
.status.err { color: var(--color-saved); }

.seg { display: flex; gap: 8px; border: 0; padding: 0; margin: 0; }
.seg legend { font: var(--type-caption); color: var(--color-ink-muted); padding: 0 0 5px; }
.seg-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-button);
  background: var(--color-surface-raised);
  padding: 12px;
  font: var(--type-button); font-weight: 500;
  cursor: pointer; min-height: 48px;
}
.seg-btn.is-on { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); font-weight: 600; }
/* The mark's filled centre is a `position: absolute` ::after with `inset: 2px`.
   On a card the mark itself is absolute, so the centre lands inside it. In the
   compose sheet it must stay positioned: `position: static` here let the ::after
   resolve against .modal instead and paint a viewport-sized red ellipse right
   across the form. */
.seg-btn .dot { position: relative; inset: auto; }

/* ---------- autocomplete ---------- */

.ac { position: relative; }
.ac-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  margin: 6px 0 0; padding: 5px; list-style: none;
  max-height: 210px; overflow-y: auto;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  box-shadow: 0 10px 26px rgb(22 24 29 / 14%);
}
.ac-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 10px; border-radius: 9px;
  font: var(--type-input); color: var(--color-ink); cursor: pointer;
}
.ac-item small { font: var(--type-caption); color: var(--color-ink-muted); flex: 0 0 auto; }
.ac-list { overflow-x: hidden; }
.ac-item.ac-wait { color: var(--color-ink-muted); cursor: default; }
.ac-item.is-stacked { flex-direction: column; align-items: flex-start; gap: 2px; }
.ac-item.is-stacked small { flex: none; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-item.is-active, .ac-item:hover { background: var(--color-surface-subtle); }

/* ---------- wider screens ---------- */

/* ---------- PC: the list as a left rail, the map filling the rest ---------- */
/* The kit is drawn at 390x844 and has no desktop screen, so this is the same
   two screens side by side rather than a second design: the phone's list column
   pinned left at its 420px cap, and the map given everything else. */

@media (min-width: 760px) {
  :root { --sheet-h: 100%; }

  #map { inset: 0 0 0 var(--rail); }

  .sheet {
    left: 0; right: auto; top: 0;
    width: var(--rail); height: 100%;
    padding-top: var(--topbar-h);
    border-radius: 0;
    box-shadow: 1px 0 0 var(--color-border);
  }
  /* Nothing to drag: the rail is always its full height. */
  .sheet-grab { display: none; }

  .topbar { left: 0; right: auto; width: var(--rail); box-shadow: none; }

  /* No floating buttons over the rail here, so the feed needs no room for them. */
  .feed { padding-bottom: 16px; }

  /* The tabs stay one scrolling row here too; app.js turns the mouse wheel
     into sideways scroll, since a mouse cannot swipe the strip. */

  .modal { place-items: center; padding: 16px; }
  .card-form { border-radius: var(--radius-sheet); max-height: 92vh; }

  /* Hover states are worth having once there is a pointer. */
  .card { transition: transform 140ms ease, box-shadow 140ms ease; }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-photo); }
  .tab:hover { color: var(--color-ink); }
  .sort-btn:hover, .icon-btn:hover { border-color: var(--color-ink); }
}

/* Past ~1200px the rail can take the kit's full 480px content width. */
@media (min-width: 1200px) { :root { --rail: 480px; } }


/* ---------- welcome overlay ---------- */
/* Built to the location add-on's Location screen. Sizes and weights are its
   numbers (MAPPING.md section 5): 54px pill button, Display 28/700 heading,
   Body 15/1.55 lead, credit at 12 with a 1px rule and 14px of padding. */

/* Without this the overlay ignores its `hidden` attribute and covers the app —
   an author `display` beats the UA stylesheet's [hidden] { display: none }. */
.welcome[hidden] { display: none; }

.welcome {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: var(--space-screen-padding);
  background: rgb(22 24 29 / 55%);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.welcome-card {
  width: 100%; max-width: 400px;
  background: var(--color-surface-raised);
  border-radius: var(--radius-sheet);
  padding: 22px 22px calc(18px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-photo);
  text-align: center;
}

/* the add-on's illustration card */
.illo {
  position: relative;
  width: 100%; max-width: 260px; height: 200px;
  margin: 0 auto 18px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--color-map-land);
  box-shadow: 0 24px 48px rgb(22 24 29 / 12%);
}
.illo .map { position: absolute; inset: 0; width: 100%; height: 100%; }
.illo .dot, .illo .halo, .illo .ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.illo .dot {
  width: 18px; height: 18px;
  background: var(--color-user-location);
  border: 3px solid #fff;
}
.illo .halo {
  width: 60px; height: 60px;
  background: var(--color-user-location); opacity: .16;
}
.illo .ring {
  width: 60px; height: 60px;
  border: 2px solid var(--color-user-location);
  animation: locpulse 2s ease-out infinite;
}
@keyframes locpulse {
  0%   { transform: translate(-50%, -50%) scale(.55); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .illo .ring { animation: none; }
}

.welcome-card h2 {
  margin: 0 0 8px;
  font: 700 26px/1.15 var(--font-display); letter-spacing: -.02em;
  color: var(--color-ink);
}
.welcome-card .lead {
  margin: 0 0 8px;
  font: 400 15px/1.55 var(--font-body);
  color: var(--color-ink-secondary);
}
.welcome-card .fineprint { margin: 0; font: var(--type-caption); color: var(--color-ink-muted); }
.welcome-card .status { text-align: center; margin: 12px 0 0; }
.welcome-card .note { margin: 8px 0 0; font: var(--type-caption); font-size: 12px; color: var(--color-ink-muted); }

.btn-primary {
  width: 100%; height: 54px; margin-top: 12px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--color-fab); color: var(--color-on-fab);
  font: 600 16px var(--font-body);
  box-shadow: var(--shadow-fab);
  cursor: pointer;
}
.btn-primary[disabled] { opacity: .5; }
.btn-text {
  width: 100%; height: 48px; margin-top: 4px;
  border: 0; background: none;
  color: var(--color-ink-secondary);
  font: 600 15px var(--font-body);
  cursor: pointer;
}

/* ---------- credit ---------- */

.credit {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 500 12px var(--font-body);
  color: var(--color-ink-muted);
}
.credit-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.credit strong { font-weight: 600; color: var(--color-ink-secondary); }
/* Dashed slots until the official Claude / Emergent logo files are dropped in.
   The border disappears on its own once an <img> is inside. */
.credit__logo {
  width: 16px; height: 16px; flex-shrink: 0;
  display: inline-block;
  border: 1.2px dashed var(--color-border-dashed);
  border-radius: 4px;
}
.credit__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.credit__logo:has(img) { border: 0; }
.credit a { color: var(--color-link); text-decoration: none; border-bottom: 1px solid var(--color-border-strong); }
.credit a:hover { color: var(--color-link-hover); border-bottom-color: currentColor; }
.welcome-card .credit { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.loading-credit { position: absolute; left: 32px; right: 32px; bottom: calc(40px + env(safe-area-inset-bottom)); }
/* margin-top: auto pins it to the bottom of the list when only a few posts show. */
.feed-credit { padding: 18px 0 6px; border-top: 1px solid var(--color-border); margin-top: auto; }

/* the theme button holds a word now, not an icon */
#theme-btn { width: auto; padding: 0 14px; font: 600 13px var(--font-body); }


/* ---------- walk chip and live dot (kit README section 5) ---------- */

.chip-walk {
  position: absolute; top: 12px; right: 12px;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-chip-dark);
  color: var(--color-on-dark);
  font: var(--type-meta); font-size: 12px;
  backdrop-filter: blur(6px);
}

/* A bite under 15 minutes old gets a pulsing red dot instead of the pin icon. */
.new-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: bites-live 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}

/* ---------- loading ---------- */

.loading[hidden] { display: none; }
.loading {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: var(--color-surface);
}
.loading-inner { text-align: center; }
.loading-radar {
  position: relative;
  width: 104px; height: 104px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
}
.loading-radar span {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-user-location);
  animation: bites-radar 2.4s ease-out infinite;
}
.loading-radar span:nth-child(2) { animation-delay: .8s; }
.loading-radar span:nth-child(3) { animation-delay: 1.6s; }
.loading-radar img { width: 56px; height: 56px; position: relative; }
.loading p { margin: 0; font: var(--type-meta); color: var(--color-ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .loading-radar span, .new-dot { animation: none; }
}

/* ---------- brand lockup ---------- */

.logo-mark, .logo-lockup { display: block; }
.brand { text-decoration: none; }


/* ---------- map / list as two screens on a phone ---------- */

body[data-view="map"] .sheet { transform: translateY(100%); }
body[data-view="map"] #map { inset: 0; }
body[data-view="list"] .sheet { top: 0; height: 100%; border-radius: 0; padding-top: var(--topbar-h); }
body[data-view="list"] #map { visibility: hidden; }
.sheet { transition: transform 220ms cubic-bezier(.4, 0, .2, 1); }

@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }

@media (min-width: 760px) {
  /* Both screens fit at once, so there is nothing to toggle between. */
  #view-toggle { display: none; }

  body[data-view] .sheet {
    transform: none; top: 0; height: 100%;
    border-radius: 0; padding-top: var(--topbar-h);
  }
  body[data-view] #map { visibility: visible; inset: 0 0 0 var(--rail); }

  /* The camera button floats over the map, bottom right, clear of the rail and
     of MapLibre's attribution. */
  .fab-bar { left: var(--rail); right: 0; width: auto; justify-content: flex-end; }
  .fab-camera { position: static; }
}

/* ---------- eatery screen (kit screen 6, route /app/eatery/:place) ---------- */

.eatery[hidden] { display: none; }

.eatery {
  position: fixed; inset: 0; z-index: 8;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--color-surface);
}
/* On a PC it takes the map's half and leaves the list rail alone, so the
   surrounding context does not vanish just because one place was opened. */
@media (min-width: 760px) {
  .eatery { left: var(--rail); box-shadow: -1px 0 0 var(--color-border); }
}

.eatery-hero { position: relative; height: 320px; }
.eatery-hero img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--color-surface-subtle); }

.icon-round {
  position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--radius-round);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  box-shadow: var(--shadow-float-button);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}

.eatery-sheet {
  position: relative;
  margin-top: -28px;
  background: var(--color-surface);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 24px var(--space-detail-padding) calc(40px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 18px;
}
.eatery-sheet h1 {
  margin: 6px 0 0;
  font: 700 30px/1.15 var(--font-display);
  letter-spacing: -.02em;
}
.eatery-chip {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 5px 10px 5px 6px;
  border-radius: var(--radius-pill);
  color: var(--color-on-dark);
  font: 600 12px var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
}
.eatery-meta {
  margin: 6px 0 0;
  display: flex; gap: 6px; align-items: center;
  font: var(--type-body); font-size: 14px;
  color: var(--color-ink-secondary);
}

.eatery-actions { display: flex; gap: 10px; }
.eatery-actions .btn-primary {
  flex: 1; height: 48px; margin: 0;
  border-radius: var(--radius-input);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; box-shadow: none; text-decoration: none;
}
.icon-square {
  width: 48px; height: 48px; flex: 0 0 auto;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

.eatery-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.eatery-row h2 { margin: 0; font: 600 15px var(--font-display); }
.link-btn {
  border: 0; background: none;
  font: 600 13px var(--font-body);
  color: var(--color-accent);
  cursor: pointer; padding: 0;
}

.eatery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 560px) { .eatery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .eatery-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.eatery-grid figure { margin: 0; position: relative; }
.eatery-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-photo-thumb);
  background: var(--color-surface-subtle);
  display: block;
}
/* the veg mark sits on the thumbnail, not loose in the page */
.eatery-grid .dot { bottom: auto; right: 6px; top: 6px; }
.eatery-grid figcaption { margin-top: 6px; }
.eatery-grid b { display: block; font: 600 13px/1.25 var(--font-body); }
.eatery-grid span { font: 500 12px var(--font-body); color: var(--color-ink-muted); }

.eatery-empty { padding: 60px 20px; text-align: center; }

/* ---------- capture step (kit screen 7, route /app/post) ---------- */

.pick-step[hidden], .form-step[hidden] { display: none; }

.pick-step { text-align: center; padding: 14px 4px 6px; }
.pick-icon {
  display: grid; place-items: center;
  width: 72px; height: 72px; margin: 0 auto 14px;
  border-radius: var(--radius-round);
  background: var(--color-accent); color: var(--color-on-accent);
  box-shadow: var(--shadow-camera-fab);
}
.pick-step h2 {
  margin: 0 0 6px;
  font: 700 26px/1.15 var(--font-display); letter-spacing: -.02em;
}
.pick-lead { margin: 0 0 4px; font: var(--type-lead); color: var(--color-ink-secondary); }

/* ---------- toast (kit README section 5) ---------- */

.toast {
  position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 40;
  display: flex; gap: 8px; align-items: center;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--color-fab); color: var(--color-on-fab);
  font: 600 14px var(--font-body);
  box-shadow: var(--shadow-fab);
  animation: toast-in 180ms ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }

/* Dark mode: the Emergent mark is a near-black tile and would vanish into the
   surface, so it gets a hairline ring (outside the mark, not a recolour). The
   loading mark swaps to the kit's white version. */
.mark-dark { display: none; }
:root[data-theme="dark"] .credit__logo--emergent img { border-radius: 4px; box-shadow: 0 0 0 1px var(--color-border-strong); }
:root[data-theme="dark"] .mark-light { display: none; }
:root[data-theme="dark"] .mark-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .credit__logo--emergent img { border-radius: 4px; box-shadow: 0 0 0 1px var(--color-border-strong); }
  :root:not([data-theme="light"]) .mark-light { display: none; }
  :root:not([data-theme="light"]) .mark-dark { display: block; }
}

/* ---------- you-are-here marker (kit README section 5) ---------- */

.me-marker { width: 44px; height: 44px; position: relative; pointer-events: none; }
.me-marker span { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.me-halo { width: 44px; height: 44px; background: var(--color-user-location); opacity: .16; }
.me-ring {
  width: 44px; height: 44px;
  border: 2px solid var(--color-user-location);
  animation: locpulse 2s ease-out infinite;
}
.me-dot {
  width: 16px; height: 16px;
  background: var(--color-user-location);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
}
@media (prefers-reduced-motion: reduce) { .me-ring { animation: none; } }

/* ---------- credit strip on a phone ---------- */
/* The floating buttons sit at a fixed height, so a credit at the end of the
   list always ended up above them. On a phone it is a strip along the bottom
   edge instead, and the buttons, list and map all make room for it. */

@media (max-width: 759px) {
  :root { --credit-h: calc(52px + env(safe-area-inset-bottom)); }
  .app-credit {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
    height: var(--credit-h);
    padding: 0 16px env(safe-area-inset-bottom);
    justify-content: center;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
  }
  .fab-bar { bottom: calc(var(--credit-h) + 14px); }
  .feed { padding-bottom: calc(88px + var(--credit-h)); }
  .feed-credit { display: none; }
  body[data-view="map"] #map { bottom: var(--credit-h); }
}
@media (min-width: 760px) {
  .app-credit { display: none; }
}

/* ---------- username step (first post only) ---------- */

.name-step[hidden] { display: none; }
.name-step { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.card-form .name-field {
  flex: none; width: 100%; margin-top: 6px;
  display: flex; flex-direction: row; align-items: center; gap: 2px;
  height: 52px; padding: 0 16px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  background: var(--color-surface);
}
.name-field:focus-within { border-color: var(--color-ink); }
.name-field .at { font: 600 17px var(--font-body); color: var(--color-ink-muted); }
.card-form .name-field input {
  flex: 1; min-width: 0; height: 100%; width: auto;
  padding: 0; border: 0; border-radius: 0; outline: 0; background: none;
  font: 500 17px var(--font-body); color: var(--color-ink);
}
.name-step .status { min-height: 18px; margin: 0; font: var(--type-caption); color: var(--color-ink-muted); }
.name-step .status.err { color: var(--color-accent); }
.name-step .btn-primary { width: 100%; }

/* ---------- card chips: @username top left; Fresh + time/walk top right ---------- */

.card-chips {
  position: absolute; top: 12px; right: 12px;
  display: flex; align-items: center; gap: 6px;
}
.card-chips .chip-walk, .card-chips .chip-fresh { position: static; }
.chip-user {
  position: absolute; top: 12px; left: 12px;
  max-width: 45%;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-chip-dark);
  color: var(--color-on-dark);
  font: 600 12px var(--font-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(6px);
}

/* ---------- your posts, map picker, edit mode ---------- */

button.chip-user { border: 0; cursor: pointer; }

/* `display: grid` on .icon-btn beat the [hidden] attribute, which is how an
   empty account button showed up as a solid block. Hidden means hidden. */
.icon-btn[hidden] { display: none; }
/* Signed out it is an ordinary outline button with the account icon; with a
   username it becomes the dark initial tile. */
.me-btn.has-user {
  font: 700 17px var(--font-display);
  background: var(--color-fab); color: var(--color-on-fab); border-color: transparent;
}

.btn-link {
  align-self: flex-start;
  margin: -4px 0 2px; padding: 4px 0;
  border: 0; background: none;
  color: var(--color-link); font: 600 14px var(--font-body);
  cursor: pointer;
}
.btn-danger {
  width: 100%; height: 46px; margin-top: 4px;
  border: 1px solid var(--color-accent); border-radius: var(--radius-input);
  background: none; color: var(--color-accent);
  font: 600 15px var(--font-body); cursor: pointer;
}
.btn-danger[data-armed] { background: var(--color-accent); color: var(--color-on-accent); }
.form-title { margin: 0; font: 700 22px/1.2 var(--font-display); color: var(--color-ink); }

/* Your posts (/app/me) */
.mine-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  padding: max(12px, env(safe-area-inset-top)) var(--space-screen-padding) 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.mine-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mine-avatar {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-fab); color: var(--color-on-fab);
  font: 700 22px var(--font-display);
}
.mine-avatar.is-empty { background: var(--color-surface-subtle); color: var(--color-ink-secondary); }
.mine-who h2 { margin: 0; font: 700 20px/1.2 var(--font-display); color: var(--color-ink); overflow-wrap: anywhere; }
.mine-who p { margin: 2px 0 0; font: var(--type-caption); color: var(--color-ink-muted); }
.mine-list { list-style: none; margin: 0; padding: 8px var(--space-screen-padding) calc(24px + env(safe-area-inset-bottom)); }
.mine-row {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--color-border);
  background: none; text-align: left; cursor: pointer; color: inherit;
}
.mine-row img { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: var(--radius-thumb, 14px); background: var(--color-surface-subtle); }
.mine-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mine-text strong { font: 600 16px var(--font-body); color: var(--color-ink); }
.mine-text small { font: var(--type-caption); color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-edit {
  flex: none; padding: 8px 14px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  font: 600 13px var(--font-body); color: var(--color-ink);
}
.mine-empty { padding: 48px 24px; text-align: center; color: var(--color-ink-secondary); }
.mine-empty .btn-primary { max-width: 320px; margin: 16px auto 0; }

/* Choose on map: a full-screen layer above the post form */
.picker[hidden] { display: none; }
.picker { position: fixed; inset: 0; z-index: 12; background: var(--color-map-land); }
.picker-map { position: absolute; inset: 0; }
.picker-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; gap: 10px; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) var(--space-screen-padding) 10px;
}
.picker-top .icon-btn { box-shadow: var(--shadow-float-button); }
.picker-search { flex: 1; box-shadow: var(--shadow-float-button); background: var(--color-surface-raised); position: relative; }
/* The pin's tip sits exactly on the map centre, which is what gets picked. */
.picker-pin {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  transform: translate(-50%, -100%);
  color: var(--color-accent);
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 35%));
  pointer-events: none;
  transition: transform 140ms ease-out;
}
.picker-pin svg { fill: var(--color-surface); }
.picker.is-moving .picker-pin { transform: translate(-50%, calc(-100% - 10px)); }
.picker-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  max-height: 42%; overflow-y: auto;
  padding: 16px var(--space-screen-padding) calc(12px + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: 0 -6px 22px rgb(22 24 29 / 14%);
}
.picker-title { margin: 0 0 6px; font: 700 17px var(--font-display); color: var(--color-ink); }
.picker-list { list-style: none; margin: 0; padding: 0; }
.picker-note { padding: 12px 0; font: var(--type-caption); color: var(--color-ink-muted); }
.picker-row {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border: 0; border-bottom: 1px solid var(--color-border);
  background: none; text-align: left; color: inherit; cursor: pointer;
}
.picker-row-icon {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-surface-subtle); color: var(--color-ink);
}
.picker-row-text { display: flex; flex-direction: column; min-width: 0; }
.picker-row-text strong { font: 600 15px var(--font-body); color: var(--color-ink); }
.picker-row-text small { font: var(--type-caption); color: var(--color-ink-muted); }
.picker-fine { margin: 2px 0 0; text-align: center; font: var(--type-caption); color: var(--color-ink-muted); }
@media (min-width: 760px) {
  .picker-sheet { left: auto; right: 24px; bottom: 24px; width: 380px; border-radius: var(--radius-sheet); max-height: 60%; }
}
@media (prefers-reduced-motion: reduce) { .picker-pin { transition: none; } }