:root {
  --color-char: #1c1512;
  --color-char-2: #241c18;
  --color-paper: #f2eae1;
  --color-paper-dim: #b9ab9c;
  --color-chili: #c8391e;
  --color-chili-dim: #a12f19;
  --color-turmeric: #d9a61a;
  --color-turmeric-dark: #96721a;
  --color-olive: #8a9a52;
  --color-location-blue: #4285f4;
  --color-ink: #241c18;

  --color-hairline: rgba(217, 166, 26, 0.2);

  --font-display: 'Fraunces', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-data: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius-lg: 12px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);

  --top-bar-height: 68px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--color-char);
  color: var(--color-paper);
  font-family: var(--font-body);
}

.shell {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Floating cards ---------- */
.floating-card {
  position: fixed;
  z-index: 2;
  background: var(--color-char-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
}

/* ---------- Top bar (wordmark + search + CTA, one strip instead of two floating cards) ---------- */
.top-bar {
  position: fixed;
  top: 0;
  left: 56px;
  right: 0;
  z-index: 9;
  min-height: var(--top-bar-height);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-char);
  border-bottom: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-sm);
}
.top-bar .search-row { flex: 1 1 320px; }
.top-bar .cta { margin: 0; flex-shrink: 0; }

.side-rail {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 56px;
  height: 100vh;
  background: var(--color-char);
  border-right: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding-top: var(--space-4);
  transition: width 240ms ease;
}
.side-rail.expanded {
  /* .top-bar shares this same z-index (9) and comes later in the DOM, so
     without this the expanded rail's button labels render underneath the
     top bar's search pill wherever the two overlap, instead of the
     slide-out menu correctly overlaying it while open. */
  z-index: 11;
  width: 210px;
  box-shadow: var(--shadow-lg);
}

.left-column {
  position: fixed;
  top: calc(var(--top-bar-height) + var(--space-4));
  left: calc(56px + var(--space-4));
  z-index: 5;
  width: 300px;
  max-height: calc(100vh - var(--top-bar-height) - var(--space-4) * 2);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  pointer-events: none;
  opacity: 1;
  transition: opacity 200ms ease;
}
.left-column > * { pointer-events: auto; }
.left-column.hidden-by-drawer,
.location-banner.hidden-by-drawer {
  opacity: 0;
  pointer-events: none;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wordmark-accent { color: var(--color-turmeric); }
.wordmark-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.search-row {
  display: flex;
  gap: var(--space-2);
}
.search-row .visit-input {
  flex: 1;
  min-width: 0;
}
.search-row .dish-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
#dish-search { width: 100%; padding-right: 28px; }
.dish-clear-btn {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-paper-dim);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.dish-clear-btn:hover { color: var(--color-paper); background: rgba(242, 234, 225, 0.12); }
.dish-clear-btn[hidden] { display: none; }
.filters-toggle {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  background: rgba(242, 234, 225, 0.06);
  color: var(--color-paper-dim);
  border: 1px solid rgba(242, 234, 225, 0.14);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.filters-toggle:hover { border-color: rgba(242, 234, 225, 0.35); }
.filters-toggle.active {
  background: var(--color-turmeric);
  color: var(--color-ink);
  border-color: var(--color-turmeric);
}
.filters-toggle:focus-visible { outline: 2px solid var(--color-turmeric); outline-offset: 2px; }

.location-picker { position: relative; flex-shrink: 0; }
.location-picker-popover {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 6;
  width: 240px;
  background: var(--color-char-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
}
.location-picker-popover[hidden] { display: none; }
.location-picker-hint {
  font-size: 0.72rem;
  color: var(--color-paper-dim);
  text-align: center;
  margin: var(--space-2) 0 0;
}

.location-banner {
  top: calc(var(--top-bar-height) + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  max-width: min(420px, calc(100vw - 2 * var(--space-5)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-turmeric);
  background: rgba(217, 166, 26, 0.12);
  padding: var(--space-2) var(--space-3);
  opacity: 1;
  transition: opacity 200ms ease;
}
.location-banner[hidden] { display: none; }
.location-banner button {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-1);
}
.location-banner button:focus-visible {
  outline: 2px solid var(--color-turmeric);
  outline-offset: 2px;
}

/* Sits just below .location-banner (same shape/behavior) so the two can
   coexist without fully overlapping in the rare case both show at once. */
.active-group-banner {
  top: calc(var(--top-bar-height) + var(--space-3) + 44px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(420px, calc(100vw - 2 * var(--space-5)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-olive);
  background: rgba(138, 154, 82, 0.14);
  padding: var(--space-2) var(--space-3);
  opacity: 1;
  transition: opacity 200ms ease;
}
.active-group-banner[hidden] { display: none; }
.active-group-banner.hidden-by-drawer { opacity: 0; pointer-events: none; }
.active-group-banner button {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-1);
}
.active-group-banner button:focus-visible {
  outline: 2px solid var(--color-turmeric);
  outline-offset: 2px;
}

.filters-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: 28px;
}

.filter-group { display: flex; flex-direction: column; gap: var(--space-2); }
.filter-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-paper-dim);
}

.price-toggle { display: flex; gap: var(--space-2); }
.price-toggle button {
  flex: 1;
  font-family: var(--font-data);
  font-size: 0.85rem;
  padding: var(--space-2) 0;
  background: rgba(242, 234, 225, 0.06);
  color: var(--color-paper-dim);
  border: 1px solid rgba(242, 234, 225, 0.14);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.price-toggle button:hover { border-color: rgba(242, 234, 225, 0.35); }
.price-toggle button.active {
  background: var(--color-turmeric);
  color: var(--color-ink);
  border-color: var(--color-turmeric);
  font-weight: 600;
}

.price-hint {
  font-size: 0.7rem;
  color: var(--color-paper-dim);
  margin: var(--space-1) 0 0;
}

#sharing-toggle button { font-size: 0.72rem; padding: var(--space-2) var(--space-1); }

select.cuisine-select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: rgba(242, 234, 225, 0.06);
  color: var(--color-paper);
  border: 1px solid rgba(242, 234, 225, 0.14);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
select.cuisine-select option {
  color: var(--color-ink);
  background: var(--color-paper);
}

.distance-row { display: flex; align-items: center; gap: var(--space-3); }
input[type="range"] { flex: 1; accent-color: var(--color-turmeric); }
.distance-value {
  font-family: var(--font-data);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-turmeric);
  min-width: 3.2em;
  text-align: right;
}

.group-size-row { display: flex; align-items: center; gap: var(--space-3); }
.group-size-row button {
  width: 32px;
  height: 32px;
  font-family: var(--font-data);
  font-size: 1rem;
  background: rgba(242, 234, 225, 0.06);
  color: var(--color-paper);
  border: 1px solid rgba(242, 234, 225, 0.14);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.group-size-row button:hover { border-color: rgba(242, 234, 225, 0.35); }
.group-size-value {
  font-family: var(--font-data);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-turmeric);
  min-width: 1.5em;
  text-align: center;
}

.cta {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-paper);
  background: var(--color-chili);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  margin-top: 4px;
  margin-bottom: 32px;
  transition: background 150ms ease, transform 150ms ease;
}
.cta:hover { background: var(--color-chili-dim); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 2px solid var(--color-turmeric); outline-offset: 2px; }
.cta:disabled { opacity: 0.6; cursor: default; box-shadow: none; }

.how-it-works { padding-top: var(--space-4); border-top: 1px solid var(--color-hairline); }
.how-it-works ol {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.how-it-works li {
  display: flex;
  gap: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-paper-dim);
}
.how-it-works li strong {
  flex-shrink: 0;
  font-family: var(--font-data);
  font-weight: 600;
  color: var(--color-turmeric);
}

.faq-block {
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item + .faq-item { margin-top: var(--space-1); }
.faq-question {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-paper);
  margin: 0 0 var(--space-1);
}
.faq-answer {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-paper-dim);
  margin: 0;
}

.tabs-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 36px;
  flex-shrink: 0;
  align-self: flex-start;
  margin: 0 0 var(--space-2) 8px;
  background: rgba(242, 234, 225, 0.06);
  border: 1px solid rgba(242, 234, 225, 0.14);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.rail-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  flex-shrink: 0;
  margin: 0 8px;
  padding: 0 0 0 10px;
  overflow: hidden;
  white-space: nowrap;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-paper-dim);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.rail-btn svg { flex-shrink: 0; }
.rail-btn:hover { background: rgba(242, 234, 225, 0.08); color: var(--color-paper); }
.rail-btn.active { background: var(--color-turmeric); color: var(--color-ink); }
.rail-btn:focus-visible { outline: 2px solid var(--color-turmeric); outline-offset: 2px; }

.rail-btn-label {
  opacity: 0;
  transition: opacity 120ms ease;
}
.side-rail.expanded .rail-btn-label {
  opacity: 1;
  transition: opacity 180ms ease 90ms;
}
.tabs-toggle:hover { border-color: rgba(242, 234, 225, 0.35); }
.tabs-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-paper-dim);
  border-radius: 1px;
  transition: background 150ms ease;
}
.tabs-toggle.active {
  background: var(--color-turmeric);
  border-color: var(--color-turmeric);
}
.tabs-toggle.active span { background: var(--color-ink); }
.tabs-toggle:focus-visible { outline: 2px solid var(--color-turmeric); outline-offset: 2px; }

/* ---------- Tab drawer (slides out from behind the side rail) ---------- */
.tab-drawer {
  position: fixed;
  top: var(--top-bar-height);
  left: 56px;
  z-index: 8;
  width: 360px;
  max-width: calc(100vw - 56px);
  height: calc(100vh - var(--top-bar-height));
  overflow-y: auto;
  background: var(--color-char-2);
  color: var(--color-paper);
  border-right: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-lg);
  transform: translateX(-110%);
  transition: transform 280ms ease;
}
.tab-drawer.open { transform: translateX(0); }
.tab-drawer[hidden] { display: none; }

.drawer-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-char-2);
  border-bottom: 1px solid var(--color-hairline);
}
.drawer-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-paper);
}
.drawer-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-paper-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.drawer-close:hover { background: rgba(242, 234, 225, 0.08); color: var(--color-paper); }
.drawer-close:focus-visible { outline: 2px solid var(--color-turmeric); outline-offset: 2px; }

.tab-drawer-panel { padding: var(--space-4); }
.tab-drawer-panel[hidden] { display: none; }

.log-visit-block { padding-top: 0; }
.recent-visits-block {
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-hairline);
}
.progress-block[hidden] { display: none; }
.progress-empty {
  font-size: 0.82rem;
  color: var(--color-paper-dim);
  margin: 0;
}
.progress-empty[hidden] { display: none; }

.progress-city {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-paper);
  margin: var(--space-3) 0 var(--space-2);
}

.progress-bar-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(242, 234, 225, 0.1);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--color-turmeric);
  border-radius: 999px;
  transition: width 300ms ease;
}

.progress-count {
  font-family: var(--font-data);
  font-size: 0.76rem;
  color: var(--color-paper-dim);
  margin: var(--space-2) 0 0;
}

.streak-block { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-hairline); }
.streak-stats { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
.streak-stat { display: flex; flex-direction: column; align-items: flex-start; }
.streak-stat-value { font-family: var(--font-data); font-size: 1.6rem; font-weight: 600; color: var(--color-turmeric); line-height: 1; }
.streak-stat-label { font-size: 0.72rem; color: var(--color-paper-dim); margin-top: 2px; }
.streak-hint { font-size: 0.78rem; color: var(--color-paper-dim); margin: var(--space-2) 0 0; }
.streak-empty { font-size: 0.82rem; color: var(--color-paper-dim); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-hairline); }
.streak-empty[hidden] { display: none; }

.badges-block { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-hairline); }
.badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-top: var(--space-2); }
.badge-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: rgba(242, 234, 225, 0.05);
  border: 1px solid rgba(242, 234, 225, 0.1);
  border-radius: var(--radius-sm);
  opacity: 0.55;
}
.badge-card--earned { opacity: 1; border-color: rgba(217, 166, 26, 0.4); background: rgba(217, 166, 26, 0.08); }
.badge-name { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--color-paper); }
.badge-card--earned .badge-name { color: var(--color-turmeric); }
.badge-description { font-size: 0.72rem; color: var(--color-paper-dim); line-height: 1.35; }
.badge-progress { font-family: var(--font-data); font-size: 0.7rem; color: var(--color-paper-dim); margin-top: 2px; }

.leaderboard-block { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-hairline); }
.leaderboard-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.leaderboard-row {
  display: grid;
  grid-template-columns: 2rem 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(242, 234, 225, 0.05);
  border: 1px solid rgba(242, 234, 225, 0.1);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.leaderboard-row--you { border-color: rgba(217, 166, 26, 0.4); background: rgba(217, 166, 26, 0.08); }
.leaderboard-rank { font-family: var(--font-data); color: var(--color-paper-dim); }
.leaderboard-name { font-family: var(--font-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-count { font-family: var(--font-data); font-size: 0.74rem; color: var(--color-paper-dim); }
.leaderboard-streak { font-family: var(--font-data); font-size: 0.74rem; color: var(--color-chili); }
.leaderboard-empty { font-size: 0.82rem; color: var(--color-paper-dim); margin-top: var(--space-2); }
.leaderboard-empty[hidden] { display: none; }

.group-block { display: flex; flex-direction: column; gap: var(--space-2); }
.group-hint { font-size: 0.78rem; line-height: 1.4; color: var(--color-paper-dim); margin: 0; }
.group-empty { font-size: 0.82rem; color: var(--color-paper-dim); margin: var(--space-2) 0 0; }
.group-empty[hidden] { display: none; }

.group-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.group-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: rgba(242, 234, 225, 0.05);
  border: 1px solid rgba(242, 234, 225, 0.1);
  border-radius: var(--radius-sm);
}
.group-item--active { border-color: rgba(138, 154, 82, 0.5); background: rgba(138, 154, 82, 0.1); }
.group-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.group-item-name {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-item-count { font-family: var(--font-data); font-size: 0.72rem; color: var(--color-paper-dim); flex-shrink: 0; }
.group-item-code {
  font-family: var(--font-data);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--color-turmeric);
}
.group-item-actions { display: flex; gap: var(--space-2); }
.group-item-actions button {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  background: rgba(242, 234, 225, 0.06);
  color: var(--color-paper-dim);
  border: 1px solid rgba(242, 234, 225, 0.14);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.group-item-actions button:hover { border-color: rgba(242, 234, 225, 0.35); color: var(--color-paper); }
.group-item-actions .group-search-btn.active {
  background: var(--color-olive);
  color: var(--color-ink);
  border-color: var(--color-olive);
  /* Freshly rendered as .active every time it's turned on (the button is
     rebuilt, not just re-styled), so this plays once as immediate
     confirmation that the click registered, on top of the color change. */
  animation: group-active-pulse 500ms ease;
}
@keyframes group-active-pulse {
  0% { box-shadow: 0 0 0 0 rgba(138, 154, 82, 0.55); }
  60% { box-shadow: 0 0 0 7px rgba(138, 154, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(138, 154, 82, 0); }
}

.group-form-block {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.group-form { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.group-form .visit-input { flex: 1; min-width: 0; }
.group-form .cta--secondary { flex-shrink: 0; }

.visit-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }

.visit-input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: rgba(242, 234, 225, 0.06);
  color: var(--color-paper);
  border: 1px solid rgba(242, 234, 225, 0.14);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.visit-input::placeholder { color: var(--color-paper-dim); }
.visit-input:focus-visible { outline: 2px solid var(--color-turmeric); outline-offset: 2px; }
/* Chrome/Edge force an autofilled input's background to a light blue/yellow
   that no author background-color can override directly, breaking the dark
   theme (most visible on the password field: the eye toggle's hover color
   is tuned for contrast against a dark background, so it nearly vanishes
   against the light one autofill imposes). The oversized inset box-shadow
   is the standard workaround: it paints over the forced background. */
.visit-input:-webkit-autofill,
.visit-input:-webkit-autofill:hover,
.visit-input:-webkit-autofill:focus,
.visit-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-paper);
  -webkit-box-shadow: 0 0 0 1000px var(--color-char-2) inset;
  box-shadow: 0 0 0 1000px var(--color-char-2) inset;
  caret-color: var(--color-paper);
  transition: background-color 9999s ease-in-out 0s;
}
select.visit-input { cursor: pointer; }
select.visit-input option {
  color: var(--color-ink);
  background: var(--color-paper);
}

.restaurant-autocomplete { position: relative; }
.restaurant-suggestions {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 6;
  list-style: none;
  margin: 0;
  padding: var(--space-1);
  max-height: 220px;
  overflow-y: auto;
  background: var(--color-char-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.restaurant-suggestions[hidden] { display: none; }
.restaurant-suggestions li + li { margin-top: 2px; }
.restaurant-suggestions button {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-paper);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-2);
  cursor: pointer;
}
.restaurant-suggestions button:hover { background: rgba(242, 234, 225, 0.08); }

.star-rating { display: flex; gap: var(--space-1); }
.star-rating button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 2px;
  color: var(--color-paper-dim);
  transition: color 150ms ease;
}
.star-rating button.filled { color: var(--color-turmeric); }
.star-rating button:focus-visible { outline: 2px solid var(--color-turmeric); outline-offset: 2px; }

.cta--secondary {
  margin: 0;
  font-size: 0.85rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-olive);
  color: var(--color-ink);
  box-shadow: none;
}
.cta--secondary:hover { background: #7c8a48; }

.visit-status { font-size: 0.78rem; margin: 0; }
.visit-status--ok { color: var(--color-olive); }
.visit-status--error { color: var(--color-chili); }

.visit-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
}
.visit-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: rgba(242, 234, 225, 0.05);
  border: 1px solid rgba(242, 234, 225, 0.1);
  border-radius: var(--radius-sm);
}
.visit-item-top { display: flex; justify-content: space-between; gap: var(--space-2); }
.visit-item-name {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visit-item-rating {
  font-family: var(--font-data);
  font-size: 0.76rem;
  color: var(--color-turmeric);
  flex-shrink: 0;
}
.visit-item-dish { font-size: 0.76rem; color: var(--color-paper-dim); }
.visit-item-date {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--color-paper-dim);
}

.visit-empty { font-size: 0.82rem; color: var(--color-paper-dim); margin: var(--space-3) 0 0; }

.ticket-map-link,
.ticket-log-btn {
  display: block;
  margin-top: var(--space-3);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-chili);
  text-decoration: none;
  cursor: pointer;
}
.ticket-map-link:hover,
.ticket-log-btn:hover { color: var(--color-chili-dim); }
.ticket--error .ticket-map-link,
.ticket--error .ticket-log-btn { display: none; }

/* ---------- Rail account slot ---------- */
.rail-account {
  margin-top: auto;
  padding: var(--space-3) 0 var(--space-2);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.rail-account[hidden] { display: none; }
.rail-account-email {
  display: none;
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: var(--color-paper-dim);
  padding: 0 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-rail.expanded .rail-account-email { display: block; }

/* ---------- Auth gate (login/signup, blocks the app until signed in) ---------- */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 21, 18, 0.92);
  backdrop-filter: blur(3px);
}
.auth-gate[hidden] { display: none; }

.auth-card {
  width: min(360px, 90vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-char-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--space-4) var(--space-4);
}
.auth-wordmark { justify-content: center; margin: 0 0 var(--space-2); }
.auth-subtitle {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-paper-dim);
  text-align: center;
  margin: 0 0 var(--space-2);
}
.password-field { position: relative; }
.password-field .visit-input { width: 100%; padding-right: 40px; }
.password-toggle-btn {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-paper-dim);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.password-toggle-btn:hover { color: var(--color-paper); background: rgba(242, 234, 225, 0.12); }
.password-toggle-btn:focus-visible { outline: 2px solid var(--color-turmeric); outline-offset: 2px; }
/* Class-based, not the `hidden` attribute: some browsers' SVG UA stylesheet
   doesn't include a [hidden] { display: none } rule the way the HTML one
   does, so a hidden SVG can render anyway. This works regardless. */
.password-toggle-btn .eye-icon-hide { display: none; }
.password-toggle-btn.showing .eye-icon-show { display: none; }
.password-toggle-btn.showing .eye-icon-hide { display: block; }

.auth-card .cta { margin: var(--space-1) 0 0; }
.auth-toggle-mode {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-paper-dim);
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
}
.auth-toggle-mode:focus-visible { outline: 2px solid var(--color-turmeric); outline-offset: 2px; }

/* ---------- Preferences dialog ---------- */
.prefs-dialog {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4) var(--space-4);
  width: min(420px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-char-2);
  color: var(--color-paper);
  box-shadow: var(--shadow-lg);
}
.prefs-dialog::backdrop {
  background: rgba(28, 21, 18, 0.7);
}

.prefs-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

.prefs-form { display: flex; flex-direction: column; gap: var(--space-4); }

.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.chip {
  font-family: var(--font-body);
  font-size: 0.82rem;
  background: rgba(242, 234, 225, 0.06);
  color: var(--color-paper-dim);
  border: 1px solid rgba(242, 234, 225, 0.14);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.chip:hover { border-color: rgba(242, 234, 225, 0.35); }
.chip.active {
  background: var(--color-turmeric);
  color: var(--color-ink);
  border-color: var(--color-turmeric);
  font-weight: 600;
}
.chip:focus-visible { outline: 2px solid var(--color-chili); outline-offset: 2px; }

.prefs-disclaimer {
  font-size: 0.74rem;
  font-style: italic;
  color: var(--color-paper-dim);
  opacity: 0.85;
  margin: var(--space-2) 0 0;
}

.prefs-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.prefs-skip {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-paper-dim);
  text-decoration: underline;
  cursor: pointer;
}
.prefs-actions .cta { margin: 0; flex-shrink: 0; }

/* ---------- Map ---------- */
.map-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#map { height: 100%; width: 100%; background: #1d2028; }

.map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-5);
  text-align: center;
  color: var(--color-paper-dim);
  font-size: 0.9rem;
}

.no-location-state {
  position: absolute;
  top: 50%;
  /* Centered on the visible map area, not the full viewport: .map-wrap
     spans edge to edge behind the fixed 56px side rail, so a plain 50%
     left would sit visibly left-of-center in the space actually visible
     next to the rail. */
  left: calc(50% + 28px);
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(360px, calc(100vw - var(--space-5) * 2));
  text-align: center;
  background: var(--color-char-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--space-4);
}
.no-location-state[hidden] { display: none; }
.no-location-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.no-location-hint {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--color-paper-dim);
  margin: 0 0 var(--space-4);
}
.no-location-state .cta { margin: 0; }

/* Google's InfoWindow chrome (background, padding, tail, close button) ships
   as inline-styled white-theme markup. These overrides are the standard way
   to re-skin it, since the content div alone can't override the wrapper. */
.gm-style .gm-style-iw-c {
  padding: 0;
  background: var(--color-char-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.gm-style .gm-style-iw-d { overflow: hidden !important; padding: 0; }
.gm-style .gm-style-iw-t::after,
.gm-style .gm-style-iw-tc::after { background: var(--color-char-2); }
.gm-style button.gm-ui-hover-effect { filter: invert(1); opacity: 0.8; }

.map-info-window {
  padding: var(--space-3) var(--space-4);
  min-width: 140px;
}
.map-info-name {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-paper);
}
.map-info-meta {
  font-family: var(--font-data);
  font-size: 0.76rem;
  color: var(--color-turmeric);
  margin-top: 2px;
}

.marker {
  width: 14px;
  height: 14px;
  background: var(--color-turmeric);
  border: 2px solid var(--color-char);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transform: translateY(50%);
}
/* The one persistent marker showing where FoodFindr is actually searching
   from: a real GPS fix, a remembered last location, or a manually chosen
   one. Always this same blue dot, matching the familiar "you are here"
   convention rather than the app's own warm chili/turmeric/olive palette. */
.marker--origin {
  width: 20px;
  height: 20px;
  background: var(--color-location-blue);
  border: 3px solid var(--color-paper);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.25), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.marker--pick {
  width: 24px;
  height: 24px;
  background: var(--color-chili);
  border: 2px solid var(--color-paper);
  border-radius: 50%;
  transform: translateY(50%);
  box-shadow: 0 0 0 4px rgba(200, 57, 30, 0.25), 0 4px 14px rgba(0, 0, 0, 0.55);
  animation: pick-pulse 1.8s ease-out 3;
}

@keyframes pick-pulse {
  0% { box-shadow: 0 0 0 4px rgba(200, 57, 30, 0.25), 0 4px 14px rgba(0, 0, 0, 0.55); }
  50% { box-shadow: 0 0 0 10px rgba(200, 57, 30, 0.12), 0 4px 14px rgba(0, 0, 0, 0.55); }
  100% { box-shadow: 0 0 0 4px rgba(200, 57, 30, 0.25), 0 4px 14px rgba(0, 0, 0, 0.55); }
}

/* ---------- Recommendation ticket ---------- */
.ticket {
  display: none;
  position: relative;
  min-height: 0;
  overflow-y: auto;
  background: var(--color-char-2);
  color: var(--color-paper);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ticket.visible { display: block; }

.ticket-close-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: none;
  border: none;
  color: var(--color-paper-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1);
}
.ticket-close-btn:hover { color: var(--color-paper); }
.ticket-close-btn:focus-visible {
  outline: 2px solid var(--color-turmeric);
  outline-offset: 2px;
}

.ticket-eyebrow {
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-chili);
  margin: 0 0 var(--space-2);
  padding-right: var(--space-5);
}
.ticket-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  padding-right: var(--space-5);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.ticket-meta {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-data);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-paper-dim);
  margin-bottom: var(--space-3);
}
.ticket-meta .price { color: var(--color-turmeric); font-weight: 600; }

.ticket-divider {
  border-top: 2px dashed var(--color-hairline);
  margin: var(--space-2) calc(-1 * var(--space-4)) var(--space-3);
}

.ticket-dish {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0 0 var(--space-1);
}
.ticket-shared-list {
  list-style: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0 0 var(--space-1);
  padding: 0;
}
.ticket-shared-list:empty { display: none; }
.ticket-shared-list li {
  padding: 2px 0;
}
.ticket-flavors { margin: 0 0 var(--space-3); }
.ticket-reason {
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--color-paper-dim);
  margin: 0;
}

.ticket--error .ticket-meta,
.ticket--error .ticket-divider,
.ticket--error .ticket-dish,
.ticket--error .ticket-shared-list,
.ticket--error .ticket-flavors {
  display: none;
}

@media (max-width: 720px) {
  /* Floating rounded search pill + a floating CTA pill below it, instead of
     a solid edge-to-edge bar. Closer to how native map apps (Google Maps,
     etc.) float their search UI over the map on small screens. */
  :root { --top-bar-height: 108px; }
  .side-rail { width: 48px; }
  .side-rail.expanded { width: 190px; }
  .tabs-toggle {
    width: 34px;
    height: 32px;
    margin-left: 4px;
  }
  .rail-btn {
    height: 36px;
    margin: 0 4px;
    font-size: 0.78rem;
  }
  .rail-btn svg, .tabs-toggle svg { width: 16px; height: 16px; }
  .tabs-toggle span { width: 16px; }

  .top-bar {
    left: calc(48px + var(--space-2));
    right: var(--space-2);
    top: var(--space-2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    min-height: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  .top-bar .wordmark { display: none; }

  .top-bar .search-row {
    /* Reset the desktop rule's `flex: 1 1 320px`. In that horizontal row
       320px is a sane width basis, but .top-bar is column-direction here,
       so the same shorthand would set a 320px *height* basis instead and
       balloon this into a giant blob rather than a slim pill. */
    flex: 0 0 auto;
    gap: var(--space-1);
    background: var(--color-char-2);
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  }
  .top-bar .search-row .visit-input {
    background: none;
    border: none;
    padding: var(--space-2) 0;
    font-size: 0.85rem;
  }
  .top-bar .location-picker #pick-location-btn,
  .top-bar #filters-toggle {
    border-radius: 999px;
    padding: var(--space-1) var(--space-2);
    font-size: 0.72rem;
  }
  .top-bar #filters-toggle svg,
  .top-bar .location-picker svg {
    width: 14px;
    height: 14px;
  }

  .top-bar .cta {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
    border-radius: 999px;
    box-shadow: var(--shadow-md);
  }

  .no-location-state { left: calc(50% + 24px); }

  .left-column {
    left: calc(48px + var(--space-3));
    right: var(--space-3);
    top: calc(var(--top-bar-height) + var(--space-3));
    width: auto;
    /* Capped well under full height so the recommendation card can never
       cover the whole screen: the map is the actual tool being used here,
       and a card that fills the viewport hides it entirely. */
    max-height: min(46vh, calc(100vh - var(--top-bar-height) - var(--space-3) * 2));
  }
  .ticket {
    padding: var(--space-3) var(--space-3) var(--space-2);
  }
  .ticket-name { font-size: 1.1rem; }
  .ticket-eyebrow { margin-bottom: var(--space-1); }
  .ticket-meta { margin-bottom: var(--space-2); }
  .ticket-reason { font-size: 0.8rem; }
  .how-it-works { display: none; }
  .tab-drawer {
    left: 48px;
    width: calc(100vw - 48px);
    max-width: none;
  }
}

/* ---------- Loading overlay ---------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: rgba(28, 21, 18, 0.55);
  backdrop-filter: blur(2px);
  /* Visual-only: a click landing here (e.g. hitting "Surprise Me"
     right after dropping a pin, while this overlay is up for the resulting
     restaurant search) must not be silently swallowed. Let it pass through
     to whatever's underneath. Actions that truly need to block concurrent
     clicks (like the recommend fetch itself) already disable their own
     button directly instead of relying on this overlay. */
  pointer-events: none;
}
.loading-overlay[hidden] { display: none; }

.loading-dog-track {
  position: relative;
  width: 120px;
  height: 90px;
  animation: dog-pace 2.4s ease-in-out infinite;
}

.loading-dog {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 64px;
  height: 64px;
  object-fit: contain;
  transform: translateX(-50%);
  animation: dog-bounce 0.6s ease-in-out infinite;
}

.loading-dog-shadow {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 40px;
  height: 8px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: dog-shadow 0.6s ease-in-out infinite;
}

@keyframes dog-pace {
  0%, 100% { transform: translateX(-24px); }
  50% { transform: translateX(24px); }
}

@keyframes dog-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-6deg); }
  25% { transform: translateX(-50%) translateY(-14px) rotate(0deg); }
  50% { transform: translateX(-50%) translateY(0) rotate(6deg); }
  75% { transform: translateX(-50%) translateY(-14px) rotate(0deg); }
}

@keyframes dog-shadow {
  0%, 100% { transform: translateX(-50%) scaleX(0.7); opacity: 0.5; }
  25%, 75% { transform: translateX(-50%) scaleX(1); opacity: 0.25; }
  50% { transform: translateX(-50%) scaleX(0.7); opacity: 0.5; }
}

.loading-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-paper);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}