/* ══════════════════════════════════════════════
   ChuGuru — Live Well, Chew Wisely — REDESIGN
   Green organic palette: forest greens, fresh lime,
   lettuce hero background, warm earth accents.
   ══════════════════════════════════════════════ */

:root {
  --bg: #f4f7f2;
  --bg-card: #ffffff;
  --bg-warm: #eef3eb;
  --bg-dark: #1a2518;
  --border: #d4ddd0;
  --border-focus: #a3b89c;

  --flame: #4a8c3f;
  --flame-soft: #e8f2e6;
  --flame-deep: #367a2e;

  --teal: #3a7d34;
  --teal-soft: #e8f2e6;
  --teal-deep: #2d5a27;

  --sage: #6b8f3a;
  --sage-soft: #f0f5e8;
  --ocean: #5a9e50;
  --ocean-soft: #edf5eb;
  --gold: #8b9a2a;
  --gold-soft: #f5f7ea;
  --earth: #6d5e4b;
  --earth-soft: #f3efe9;

  --grade-a: #2e9e5a;
  --grade-b: #6db644;
  --grade-c: #e8a817;
  --grade-d: #e07a2f;
  --grade-e: #d43d2f;

  --text: #1a2518;
  --text-sec: #4a5c46;
  --text-mut: #8a9a86;
  --text-inv: #fafdf8;

  --font-d: 'Playfair Display', Georgia, serif;
  --font-b: 'DM Sans', system-ui, sans-serif;
  --font-logo: 'Quicksand', sans-serif;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 9999px;

  --sh-sm: 0 1px 4px rgba(26,37,24,0.06);
  --sh-md: 0 4px 16px rgba(26,37,24,0.08);
  --sh-lg: 0 8px 32px rgba(26,37,24,0.12);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ── App shell ─────────────────────────── */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
}

.screen {
  flex: 1;
  display: none;
  flex-direction: column;
  animation: fadeUp 0.45s var(--ease);
}
.screen.active { display: flex; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════
   HOME SCREEN
   ══════════════════════════════════════════════ */

/* ── Hero banner — full-bleed lettuce photo ───── */
.hero-banner {
  position: relative;
  padding: 18px 22px 0;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
}

/* Search area inside hero */
.hero-search {
  position: relative;
  z-index: 2;
  padding: 0 0 20px;
}
.hero-search .search-card {
  margin-top: 8px;
}
.hero-search .search-hint {
  text-align: center;
  font-size: 0.68rem; color: rgba(255,255,255,0.6);
  margin-bottom: 0; font-weight: 400;
  padding-top: 6px;
}
.hero-search .search-hint i { color: rgba(255,255,255,0.7); font-size: 0.6rem; margin-right: 3px; }

/* Lettuce background image */
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('lettuce.jpg');
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}

/* Gradient overlay — glassy green with diagonal specular highlight */
.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Diagonal specular highlight — simulates light catching glass surface */
    linear-gradient(
      118deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.00) 30%,
      rgba(255,255,255,0.09) 42%,
      rgba(255,255,255,0.18) 50%,
      rgba(255,255,255,0.07) 58%,
      rgba(255,255,255,0.00) 70%,
      rgba(255,255,255,0.00) 100%
    ),
    /* Primary green fade — stays clear until ~70% then drops to deep solid green */
    linear-gradient(
      180deg,
      rgba(45, 80, 38, 0.08) 0%,
      rgba(40, 75, 35, 0.04) 30%,
      rgba(40, 75, 35, 0.06) 55%,
      rgba(48, 80, 38, 0.52) 70%,
      rgba(52, 82, 40, 0.86) 80%,
      rgba(56, 86, 42, 0.96) 90%,
      rgb(42, 68, 30) 100%
    );
  z-index: 1;
}

.hero-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  position: relative; z-index: 2;
}

/* Logo */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 63px; height: 63px; flex-shrink: 0;
  border-radius: 22%;
  display: grid; place-items: center;
  overflow: hidden;
}
.logo-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.logo-word {
  font-family: 'Quicksand', sans-serif;
  font-size: 2.9rem; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 1px 7px 1px;
  border-radius: 999px;
  background: rgba(15, 70, 35, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
}
.logo-word-chu { color: #ffffff; }
.logo-word-guru { color: #ffffff; }


.hdr-pill {
  font-size: 0.55rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 12px; border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,0.2);
}

/* Headline — large, pushed to bottom of hero */
.hero-content {
  position: relative; z-index: 2;
  margin-top: auto;
  padding-bottom: 28px;
}
.hero-content h1 {
  font-family: var(--font-d);
  font-size: 3.5rem; font-weight: 700;
  line-height: 1.06; color: var(--text-inv);
  letter-spacing: -0.03em;
  margin-bottom: 0;
}
.hero-sub {
  font-size: 0.74em;
  font-weight: 500;
}
.hero-content h1 em {
  font-style: italic;
  color: #c5e1a5;
  font-weight: 500;
}
.hero-content p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.55; max-width: 350px;
  font-weight: 400;
  margin-top: 8px;
}

/* Food circles — hidden in redesign */
.hero-food-circles {
  display: none;
}
.food-circ {
  display: none;
}
.food-circ:hover { transform: scale(1.08); }
.food-circ + .food-circ { margin-left: -12px; }
.food-circ:nth-child(2) { z-index: 1; }
.food-circ:nth-child(3) { z-index: 2; }
.food-circ:nth-child(4) { z-index: 3; }

/* Food images */
.fc-1 { background-image: url('dishpics/salmon-asparagus.jpg'); }
.fc-2 { background-image: url('dishpics/peking-duck.jpg'); }
.fc-3 { background-image: url('dishpics/hainanese-chicken-rice.jpg'); }

/* Large showcase dish — hidden in redesign */
.hero-dish-showcase {
  display: none;
}

.food-circ-label {
  display: none;
}

/* ── Home body ─────────────────────────── */
.home-body {
  flex: 1;
  padding: 0 18px 100px;
  margin-top: 0;
  position: relative; z-index: 5;
  padding-top: 18px;
}

/* ── Search zone — solid green band below hero with rounded bottom ── */
.search-zone {
  background: rgb(42, 68, 30);
  padding: 0 16px 14px;
  border-radius: 0 0 28px 28px;
  position: relative;
  z-index: 4;
}
.search-zone .search-card {
  margin-top: 0;
}
.search-zone .search-wrapper {
  background: #c5e1a5;
  border: none;
  box-shadow: none;
  padding-top: 0;
  padding-bottom: 0;
}
.search-zone .search-icon-left {
  color: var(--teal-deep);
}
.search-zone .search-input {
  color: var(--teal-deep);
}
.search-zone .search-input::placeholder {
  color: rgba(45,90,39,0.6);
}
.search-zone .search-hint {
  text-align: center;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0;
  font-weight: 400;
  padding-top: 8px;
}
.search-zone .search-hint i {
  color: rgba(255,255,255,0.6);
  font-size: 0.6rem;
  margin-right: 3px;
}

/* ── Context toggle: Dining Out / Home Cook ─────────────────── */
.context-toggle {
  display: flex;
  flex-direction: row;
  gap: 0;
  background: transparent;
  border-radius: 12px;
  padding: 0;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.55);
  align-items: stretch;
  overflow: hidden;
}
.ctx-opt {
  padding: 7px 10px;
  border-radius: 0;
  font-size: 0.67rem;
  font-weight: 600;
  font-family: var(--font-b);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.5);
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
  position: relative;
}
.ctx-opt:first-child {
  border-right: 1px solid rgba(255,255,255,0.35);
}
.ctx-opt--active {
  background: rgba(255,255,255,0.18);
  color: #ffffff;
  font-weight: 700;
}
.ctx-opt:not(.ctx-opt--active):hover {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.07);
}

/* ── Search card (floating) — two separate boxes ───────────── */
.search-card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
  margin-bottom: 6px;
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.search-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 4px 18px;
  transition: box-shadow 0.25s;
  box-shadow: 0 4px 20px rgba(30,60,25,0.14);
  border: none;
}
.search-icon-left {
  color: var(--text-mut);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-right: 10px;
}
.search-input {
  flex: 1;
  border: none; outline: none;
  background: transparent;
  font-family: var(--font-b);
  font-size: 0.9rem; color: var(--text);
  padding: 7px 0;
  font-weight: 400;
  width: 100%;
}
.search-input::placeholder { color: var(--text-mut); font-weight: 300; }
.search-actions {
  flex-shrink: 0;
}
.s-btn {
  width: 40px; height: 40px;
  border: none; border-radius: 12px;
  display: grid; place-items: center;
  cursor: pointer; font-size: 1.2rem;
  transition: all 0.2s var(--ease);
  flex-shrink: 0;
}
.s-cam { background: var(--teal-soft); color: var(--teal); }
.s-cam:hover { background: var(--teal); color: white; }
.s-go {
  background: #c5e1a5; color: var(--teal-deep);
  box-shadow: 0 4px 16px rgba(58,125,52,0.2);
}
.s-go:hover { background: #b5d490; }
.s-go:active { transform: scale(0.94); }

.search-hint {
  text-align: center;
  font-size: 0.68rem; color: var(--text-mut);
  margin-bottom: 22px; font-weight: 400;
  padding-top: 6px;
}
.search-hint i { color: var(--sage); font-size: 0.6rem; margin-right: 3px; }

/* ── Return-to-results pill ────────────── */
.return-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-soft);
  border: 1.5px solid var(--teal);
  border-radius: var(--r-full);
  padding: 9px 16px 9px 14px;
  margin-bottom: 18px;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
  box-shadow: var(--sh-sm);
  user-select: none;
}
.return-pill:active { background: #d0e8ce; }
.return-pill-arrow {
  color: var(--teal);
  font-size: 0.75rem;
  flex-shrink: 0;
}
.return-pill-label {
  flex: 1;
  font-family: var(--font-b);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.return-pill-chevron {
  color: var(--teal);
  font-size: 0.65rem;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Section label ─────────────────────── */
.section-label {
  font-size: 0.8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-mut);
  margin-bottom: 12px; padding-left: 2px;
}

/* ── Quick actions — 3-column row ──────── */
.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 26px;
}
.action-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 12px 12px 10px;
  box-shadow: var(--sh-md);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.action-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
  border-color: transparent;
}
.action-card:active { transform: scale(0.96); }

.action-card-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 1rem;
  margin-top: 3px;
  margin-bottom: 0;
}
.ac-scan .action-card-icon { background: var(--teal-soft); color: var(--teal); }
.ac-explore .action-card-icon { background: var(--sage-soft); color: var(--sage); }
.ac-fave .action-card-icon { background: var(--gold-soft); color: var(--gold); }

.action-card-title {
  font-size: 0.78rem; font-weight: 600;
  color: var(--text); margin-bottom: 1px;
  line-height: 1.2;
}
.action-card-sub {
  font-size: 0.62rem; color: var(--text-mut);
  font-weight: 400; line-height: 1.35;
}

/* Accent dot */
.action-card::after {
  content: '';
  position: absolute;
  top: 10px; right: 10px;
  width: 5px; height: 5px;
  border-radius: 50%; opacity: 0.35;
}
.ac-scan::after    { background: var(--teal); }
.ac-explore::after { background: var(--sage); }
.ac-fave::after    { background: var(--gold); }

/* ══════════════════════════════════════════════
   AI PERSONALIZED PICKS — horizontal scroll
   ══════════════════════════════════════════════ */
.picks-section {
  margin-bottom: 26px;
}
.picks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 2px;
}
.picks-title {
  font-family: var(--font-b);
font-size: 0.82rem;
font-weight: 800;
color: var(--text-mut);

letter-spacing: 0.12em;
}
.picks-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}
.picks-link:hover { color: var(--teal-deep); }

.picks-scroll {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.picks-scroll::-webkit-scrollbar { display: none; }

.pick-card {
  flex-shrink: 0;
  width: calc((100% - 20px) / 3);
  height: 130px;
  scroll-snap-align: start;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  text-align: left;
  font-family: var(--font-b);
  color: var(--text);
  padding: 0;
  position: relative;
}
.pick-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.pick-card:active { transform: scale(0.96); }

.pick-img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.pick-img {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-warm);
  transition: transform 0.3s var(--ease);
}
.pick-card:hover .pick-img { transform: scale(1.06); }

/* Gradient overlay — glassy green matching hero style */
.pick-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      118deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.00) 30%,
      rgba(255,255,255,0.08) 44%,
      rgba(255,255,255,0.15) 52%,
      rgba(255,255,255,0.06) 60%,
      rgba(255,255,255,0.00) 75%,
      rgba(255,255,255,0.00) 100%
    ),
    linear-gradient(
      180deg,
      rgba(45, 80, 38, 0.06) 0%,
      rgba(40, 75, 35, 0.04) 30%,
      rgba(40, 75, 35, 0.06) 50%,
      rgba(48, 80, 38, 0.52) 68%,
      rgba(50, 82, 40, 0.86) 80%,
      rgba(54, 84, 41, 0.96) 90%,
      rgb(42, 68, 30) 100%
    );
  z-index: 1;
  pointer-events: none;
}

.pick-add-btn {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.3);
  display: grid; place-items: center;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  transition: all 0.2s;
  z-index: 3;
}
.pick-add-btn:hover {
  background: rgba(255,255,255,0.35);
  color: #fff;
}

.pick-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 12px 14px;
  z-index: 2;
}
.pick-name {
  font-size: 0.78rem; font-weight: 600;
  color: #fff; line-height: 1.25;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ── Example cards — horizontal scroll ── */
.examples-section { margin-bottom: 26px; }
.examples-scroll {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
  margin: 0 -18px;
  padding-left: 18px;
  padding-right: 18px;
}
.examples-scroll::-webkit-scrollbar { display: none; }

.example-card {
  flex-shrink: 0;
  width: 132px;
  scroll-snap-align: start;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  text-align: left;
  font-family: var(--font-b);
  color: var(--text);
  padding: 0;
}
.example-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.example-card:active { transform: scale(0.96); }

.example-img-wrap {
  width: 100%; height: 88px;
  overflow: hidden;
}
.example-img {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s var(--ease);
}
.example-card:hover .example-img { transform: scale(1.06); }

.example-info { padding: 10px 12px 12px; }
.example-name {
  font-size: 0.74rem; font-weight: 600;
  color: var(--text); line-height: 1.25;
  margin-bottom: 5px;
}
.example-tags { display: flex; gap: 4px; }
.etag {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-grid; place-items: center;
  font-size: 0.55rem;
}
.etag-nutri { background: var(--flame-soft); color: var(--flame); }
.etag-eco { background: var(--teal-soft); color: var(--teal); }

/* ── How it works card ─────────────────── */
.how-card {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: 22px 20px;
  margin-bottom: 24px;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--border);
}
.how-title {
  font-family: var(--font-d);
  font-size: 1.05rem; font-weight: 600;
  margin-bottom: 18px; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.how-title i { color: var(--teal); font-size: 0.85rem; }

.how-steps { display: flex; flex-direction: column; gap: 16px; }
.how-step { display: flex; align-items: flex-start; gap: 14px; }
.how-num {
  width: 32px; height: 32px;
  border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700;
}
.step-1 .how-num { background: var(--teal-soft); color: var(--teal); }
.step-2 .how-num { background: var(--sage-soft); color: var(--sage); }
.step-3 .how-num { background: var(--gold-soft); color: var(--gold); }

.how-text { flex: 1; padding-top: 3px; }
.how-text strong {
  font-size: 0.8rem; font-weight: 600;
  display: block; margin-bottom: 1px; color: var(--text);
}
.how-text span {
  font-size: 0.72rem; color: var(--text-mut);
  font-weight: 400; line-height: 1.4;
}

/* ── Photo preview ─────────────────────── */
.photo-preview {
  display: none; margin-top: 16px;
  position: relative; border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-md);
}
.photo-preview img { width: 100%; max-height: 200px; object-fit: cover; }
.photo-remove {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.92);
  border: none; border-radius: 50%;
  color: var(--text); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--sh-sm); font-size: 0.75rem;
}

/* ── Status ─────────────────────────────── */
.status {
  text-align: center; padding: 12px 16px;
  font-size: 0.82rem; font-weight: 500;
  display: none; border-radius: var(--r-md); margin-top: 12px;
}
.status.info { display: block; background: var(--teal-soft); color: var(--teal-deep); border: 1px solid rgba(58,125,52,0.2); }
.status.error { display: block; background: #FFF0EE; color: #C0392B; border: 1px solid rgba(192,57,43,0.2); }

/* ── Menu picker — replaces action cards after scan ── */
.menu-picker {
  display: none;
  animation: fadeUp 0.35s var(--ease);
}
.menu-picker-header { text-align: center; margin-bottom: 14px; }
.menu-picker-title {
  font-family: var(--font-d); font-size: 1rem; font-weight: 400;
}
.menu-picker-title span { color: var(--teal); }
.menu-picker-sub { font-size: 0.72rem; color: var(--text-mut); margin-top: 4px; }
.menu-dish-scroll {
  max-height: 400px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.menu-dish-scroll::-webkit-scrollbar { width: 4px; }
.menu-dish-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.menu-dish-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-bottom: 140px;
}
.menu-category-header {
  grid-column: 1 / -1;
  font-family: var(--font-b);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 10px 2px 5px;
  border-bottom: 1.5px solid var(--teal-soft);
  margin-top: 4px;
}
.menu-category-header:first-child { padding-top: 2px; margin-top: 0; }
.menu-dish-option {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: 10px 10px;
  color: var(--text); font-family: var(--font-b);
  font-size: 0.8rem; cursor: pointer;
  transition: all 0.2s; text-align: left;
  display: flex; align-items: flex-start; gap: 8px;
  box-shadow: var(--sh-sm); line-height: 1.3;
}
.menu-dish-option:hover { border-color: var(--teal); box-shadow: var(--sh-md); }
.menu-dish-option .dish-body {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.menu-dish-option .dish-label {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: 0.8rem; font-weight: 500; line-height: 1.3; color: var(--text-sec);
}
.menu-dish-option .dish-translation {
  font-size: 0.72rem; font-weight: 400;
  color: var(--teal); line-height: 1.3;
  font-style: italic;
}
.menu-dish-option .dish-description {
  font-size: 0.7rem; font-weight: 400;
  color: var(--text-mut); line-height: 1.4;
  font-family: var(--font-s, var(--font-b));
}
.menu-dish-option .dish-num {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-warm); color: var(--text-mut);
  font-size: 0.58rem; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0;
  margin-top: 1px;
}
/* ── Menu picker: multi-select circle (compare up to 3 dishes) ── */
.menu-sel-circle {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-warm);
  border: 1.5px solid var(--border);
  color: transparent;
  font-size: 0.55rem;
  display: grid; place-items: center; flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  transition: all 0.18s;
}
.menu-sel-circle.sel-on {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.menu-dish-option.sel {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.menu-allergen-warn {
  display: inline-block;
  margin-left: auto; padding: 2px 8px;
  border-radius: var(--r-full);
  background: #c0392b; color: #fff;
  font-size: 0.6rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
}
.menu-picker-actions {
  display: flex; gap: 8px;
  margin: 10px 0 12px;
}
.menu-scan-another {
  flex: 1; border-radius: var(--r-md); padding: 10px 12px;
  font-family: var(--font-b); font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--teal-soft);
  border: 1.5px solid var(--teal);
  color: var(--teal-deep);
}
.menu-scan-another:hover { background: var(--teal); color: #fff; }
.menu-scan-new {
  flex: 0 0 auto;
  border-radius: var(--r-md); padding: 10px 11px;
  font-family: var(--font-b); font-size: 0.72rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none;
  border: 1.5px solid rgba(200,48,60,0.45);
  color: #c8303c;
  opacity: 0.8;
}
.menu-scan-new:hover { border-color: #c8303c; background: rgba(200,48,60,0.06); opacity: 1; }

/* ── Bottom tab bar — floating pill with circular icons ── */
.tab-bar {
  position: fixed;
  /* The pill floats, so the safe-area inset must lift the whole bar, NOT pad
     its inside — inset padding makes the pill sag downward asymmetrically on
     devices with a home indicator, while desktop browsers (inset 0) look fine. */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 50%;
  transform: translateX(-50%) translateZ(0);
  width: auto; max-width: 380px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(220, 232, 210, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(180, 210, 170, 0.5);
  border-top: none;
  border-radius: var(--r-full);
  padding: 9px 12px;
  z-index: 50;
  box-shadow: 0 4px 24px rgba(26,37,24,0.12);
  /* Forces its own compositing layer so iOS Safari doesn't redraw/stretch
     this fixed + backdrop-filter element during momentum scroll. */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tab {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0;
  color: var(--teal-deep);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  padding: 0;
  position: relative;
  background: rgba(180, 210, 165, 0.45);
  border: 1.5px solid rgba(120, 160, 100, 0.25);
  flex-shrink: 0;
}
.tab span { display: none; }
.tab i { font-size: 1.15rem; }
.tab.active {
  color: #fff;
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  box-shadow: 0 2px 12px rgba(45,90,39,0.35);
}
.tab.active::before { display: none; }
.tab:hover:not(.active) {
  background: rgba(160, 195, 145, 0.6);
  color: var(--teal-deep);
}

/* Center scan button — large, prominent, white border ring */
.tab-scan-btn {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  border: 4px solid #fff;
  color: white;
  display: grid; place-items: center;
  font-size: 1.35rem; cursor: pointer;
  box-shadow: 0 4px 20px rgba(45,90,39,0.35), 0 0 0 1px rgba(45,90,39,0.08);
  transition: all 0.25s var(--ease);
  margin-top: -18px;
  flex-shrink: 0;
  animation: pulse 3s ease-in-out infinite;
}
.tab-scan-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(45,90,39,0.45), 0 0 0 1px rgba(45,90,39,0.08);
}
.tab-scan-btn:active { transform: scale(0.94); animation: none; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(45,90,39,0.35), 0 0 0 1px rgba(45,90,39,0.08); }
  50% { box-shadow: 0 4px 32px rgba(45,90,39,0.55), 0 0 0 1px rgba(45,90,39,0.08); }
}

/* ── Brand footer ──────────────────────── */
.brand-footer {
  padding: 20px 0;
  text-align: center; font-size: 0.64rem;
  color: var(--text-mut); font-weight: 400;
  line-height: 1.6;
}
.brand-footer a { color: var(--teal); text-decoration: none; font-weight: 500; }


/* ══════════════════════════════════════════════
   LOADING
   ══════════════════════════════════════════════ */
.loading-screen {
  align-items: center; justify-content: center;
  text-align: center; padding-top: 140px !important;
}
.loader-wrap { position: relative; width: 190px; height: 190px; margin: 0 auto 28px; }
.loader-ring {
  width: 190px; height: 190px;
  border: 3px solid var(--border);
  border-top-color: var(--teal);
  border-right-color: var(--teal);
  border-radius: 50%;
  animation: spin 1.4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-guru {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  object-fit: contain;
  animation: breathe 2.2s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50% { transform: translate(-50%,-50%) scale(1.06); }
}
.loader-title { font-family: var(--font-d); font-size: 1.15rem; font-weight: 400; margin-bottom: 6px; }
.loader-sub { font-size: 0.82rem; color: var(--text-mut); font-weight: 400; }


/* ══════════════════════════════════════════════
   RESULTS SCREEN — Mobile app card layout
   ══════════════════════════════════════════════ */

.results-screen {
  background: var(--bg);
}
.results-body {
  flex: 1;
  padding: 0 16px 120px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.result-dish-desc {
  font-size: 0.7rem; font-weight: 400;
  color: var(--text-mut); line-height: 1.4;
  font-family: var(--font-s, var(--font-b));
  padding: 6px 0 2px;
}
.res-section-label {
  margin-top: 20px;
}

/* ── Dish switcher — image cards ───────── */
.dish-switcher {
  margin-top: 12px;
  margin-bottom: 2px;
}

/* ── Meal-context indicator ──────────────────────────────────────────────
   Shown only while a meal pill is active (currentViewingMealId set). Tells
   the user how many of the dishes in the strip belong to that meal, since
   in a horizontal strip the highlighted cards may not all be visible at
   once — unlike the old vertical grid where a glance down the column
   showed everything highlighted simultaneously. */
.ds-meal-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 600;
  color: #d4622a;
  padding: 0 2px 6px;
}
.ds-meal-context-jump {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* ── Horizontal swipe strip (default — single-group dishes) ─────────────
   Native touch swipe + trackpad scroll work for free via overflow-x:auto.
   Desktop mouse users get two extra affordances layered on top: visible
   nav arrows (.ds-nav-arrow, JS-driven) and click-drag panning (JS-driven,
   see _initDishStripDrag). Scroll-snap keeps cards landing cleanly rather
   than stopping mid-card on any of the three input methods. */
.ds-strip-wrap {
  position: relative;
}
.dish-switcher-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 8px;
  margin: 0 -2px;
  cursor: grab;
  /* Edge fade hints there's more content past the visible window — a
     stronger affordance than a bare partial-card peek, since this strip
     also carries selection state (in-meal highlights) a user shouldn't
     mistake for "removed" just because it scrolled out of view. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.dish-switcher-cards::-webkit-scrollbar { display: none; }
.dish-switcher-cards.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.dish-switcher-cards .ds-card {
  flex-shrink: 0;
  width: 132px;
  scroll-snap-align: start;
}
/* Nav arrows — desktop/mouse only. Hidden on touch devices (no hover
   capability) where native swipe is the primary gesture and the arrows
   would just sit there as visual clutter. JS toggles .is-visible based on
   actual scroll position (hidden at each end). */
.ds-nav-arrow {
  display: none;
  position: absolute;
  top: 60px; /* vertical centre of the 120px image area */
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 30px; height: 30px;
  color: var(--text-sec);
  font-size: 0.7rem;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.ds-nav-prev { left: -4px; }
.ds-nav-next { right: -4px; }
@media (hover: hover) and (pointer: fine) {
  .ds-nav-arrow.is-visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }
}
.ds-nav-arrow:hover { background: var(--bg-warm); color: var(--teal); }

/* ── Vertical grid (multi-group — scanned menus with section headers) ───
   A horizontal strip can't show an inline "row break" for category
   headers, so sessions with more than one group (e.g. a scanned menu with
   Mains / Drinks / Desserts) keep the original 2-column grid + internal
   scroll instead, where the header can span both columns above each
   group's cards. */
.dish-switcher.ds-multi-group .dish-switcher-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  overflow-x: visible;
  scroll-snap-type: none;
  -webkit-mask-image: none;
  mask-image: none;
  cursor: default;
  padding: 2px 0 6px;
  margin: 0;
  max-height: 296px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dish-switcher.ds-multi-group .dish-switcher-cards .ds-card {
  width: auto;
  scroll-snap-align: none;
}
.dish-switcher.ds-multi-group .ds-nav-arrow { display: none !important; }

/* Pills — 2-column grid, equal width */
.dish-switcher-scroll {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 2px 0 6px;
}
/* Category sub-head — mirrors the literal category text from the scanned
   menu (e.g. "Main Course", "Drinks"), spanning both grid columns. Kept
   noticeably more compact than .menu-category-header since this sits above
   an already-scrollable pill list, not a full page. */
.ds-cat-header {
  grid-column: 1 / -1;
  font-family: var(--font-b);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 1px 2px;
  border-bottom: 1px solid var(--teal-soft);
  /* Negative margins eat into the grid's row gap above/below this row,
     since the gap value is shared with pill-to-pill spacing and can't be
     overridden per-row otherwise — keeps header-to-pill gaps tighter than
     the breathing room pills get between each other. */
  margin: -2px 0 -3px;
}
.ds-cat-header:first-child { margin-top: 0; }
.ds-chip {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 8px 12px 8px 16px;
  font-family: var(--font-b);
  font-size: 0.74rem; font-weight: 500;
  color: var(--text-sec);
  cursor: pointer; transition: all 0.2s;
  box-shadow: var(--sh-sm);
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
/* Heart icon inside dish pill — consistent across active/inactive states */
.ds-chip-heart {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid #e05080;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.68rem; color: #e05080;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  cursor: pointer;
}
.ds-chip-heart:hover { background: #fff; transform: scale(1.12); }
.ds-chip-heart.is-faved { background: #e05080; color: #fff; border-color: #e05080; }
.ds-chip-heart.is-faved:hover { background: #c8305e; }
/* Heart overlay on image card — same style as chip heart */
.ds-card-heart {
  position: absolute; top: 5px; left: 5px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid #e05080;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; color: #e05080;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  cursor: pointer; z-index: 2;
}
.ds-card-heart:hover { background: #fff; transform: scale(1.12); }
.ds-card-heart.is-faved { background: #e05080; color: #fff; border-color: #e05080; }
.ds-card-heart.is-faved:hover { background: #c8305e; }
.ds-chip-label {
  white-space: normal;
  word-break: break-word;
  min-width: 0;
  line-height: 1.3;
}
.ds-origin-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 0.55rem;
  margin-right: 4px;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative; top: -1px;
}
.ds-origin-home       { background: #e8f4ee; color: #2e7d52; }
.ds-origin-restaurant { background: #fef3e8; color: #b86200; }
.ds-card-label .ds-origin-icon { margin-right: 3px; }
.ds-chip:hover { border-color: var(--teal); color: var(--teal); }
.ds-chip:active { transform: scale(0.96); }
.ds-chip.ds-active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 2px 8px rgba(58,125,52,0.25);
}
.ds-chip.ds-active:hover { color: #fff; }
.ds-chip.ds-active .ds-sel-circle { background: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.9); }
.ds-chip.ds-active .ds-sel-circle .ds-sel-icon { color: var(--teal); opacity: 1; }
/* Staged / in-meal tick on active chip — must stay clearly visible */
.ds-chip.ds-active .ds-sel-circle.sel-staged,
.ds-chip.ds-active .ds-sel-circle.sel-in-meal { background: rgba(255,255,255,0.92); border-color: #fff; }
.ds-chip.ds-active .ds-sel-circle.sel-staged .ds-sel-icon,
.ds-chip.ds-active .ds-sel-circle.sel-in-meal .ds-sel-icon { color: var(--teal); opacity: 1; }
.ds-chip.ds-in-meal { border-color: #d4622a; border-width: 2px; color: #d4622a; }
.ds-chip.ds-active.ds-in-meal { border-color: #d4622a; color: #fff; }
.ds-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--sh-sm);
  text-align: left;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ds-card-img-wrap {
  position: relative;
  height: 120px;
  background: var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.ds-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}
.ds-card-img[src=""] { opacity: 0; }

.ds-card .ds-sel-circle {
  position: absolute;
  top: 5px; right: 5px;
  width: 24px; height: 24px;
  background: #fff;
  border-color: var(--teal);
  border-width: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.ds-card .ds-sel-circle .ds-sel-icon { color: var(--teal); opacity: 1; }
/* Keep circle solid on active cards — overrides the pill-era .ds-active .ds-sel-circle rule */
.ds-card.ds-active .ds-sel-circle {
  background: #fff;
  border-color: var(--teal);
  border-width: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.ds-card.ds-active .ds-sel-circle:not(.sel-staged):not(.sel-in-meal) .ds-sel-icon { color: var(--teal); opacity: 1; }
.ds-card .ds-sel-circle.sel-staged,
.ds-card .ds-sel-circle.sel-in-meal { border-width: 2px; }
.ds-card-label {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 5px 8px 6px;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-sec);
  line-height: 1.3;
  min-height: 2.6em;
  flex: 1;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
/* Dish name wraps to 2 lines rather than truncating — most real dish names
   ("Starter of Bread and Olive Oil") are too long for a 1-line ellipsis at
   this card width, and silently clipping them looks unfinished. Sibling
   icons (origin badge, rename pencil) sit at the top of the row so they
   stay aligned with the first line of text rather than the wrapped block's
   vertical centre. */
.ds-card-label-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}
.ds-card-label .ds-origin-icon,
.ds-card-rename {
  margin-top: 1px;
}
.ds-card-cat {
  display: block;
  padding: 0 8px 5px;
  font-family: var(--font-b);
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin-top: auto;
}
.ds-card-rename {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 0 2px;
  opacity: 0.65;
  cursor: pointer;
  font-size: 0.62rem;
  color: var(--text-sec);
}
.ds-card-rename:hover { opacity: 1; }
/* Re-share pill — pinned to the far right of the label bar, vertically
   centred, only shown on the recipient-facing shared-view landing page (see
   the body.shared-view rules below). Absolutely positioned rather than
   flex-pushed: the label-text sibling uses -webkit-box for its 2-line
   clamp, which doesn't reliably report a flex-basis for margin-auto/flex:1
   push tricks to work against — absolute positioning sidesteps that. */
.ds-card-share {
  display: none;
  align-items: center;
  gap: 4px;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: #2a6e3f;
  border: none;
  border-radius: var(--r-full, 999px);
  padding: 4px 9px;
  color: #fff;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(42, 110, 63, 0.30);
  cursor: pointer;
}
.ds-card-share i { font-size: 0.66rem; color: #fff; }
.ds-card-share:hover { background: #235e35; }
.ds-card-share:active { transform: translateY(-50%) scale(0.94); background: #235e35; }
.ds-card-rename-input {
  width: 100%;
  background: var(--bg-warm);
  border: none;
  border-bottom: 1.5px solid var(--teal);
  color: var(--text);
  font-size: 0.72rem; font-weight: 500;
  padding: 4px 6px;
  outline: none;
  border-radius: 2px;
  box-sizing: border-box;
}
.ds-sel-icon {
  font-size: 0.76rem; flex-shrink: 0;
  font-weight: 900;
  opacity: 0.55; transition: opacity 0.15s, color 0.15s;
  color: #6a8e66;
  pointer-events: none;
}
.ds-sel-circle {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #e6f0e4;
  border: 2px solid #b0c8ab;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
@keyframes circle-nudge {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0px  rgba(80,185,90,0);     background: #e6f0e4; border-color: #b0c8ab; }
  25%  { transform: scale(1.38); box-shadow: 0 0 0 9px  rgba(80,185,90,0.52);  background: #ffffff; border-color: #7bc47e; }
  50%  { transform: scale(0.92); box-shadow: 0 0 0 2px  rgba(80,185,90,0.12);  background: #e6f0e4; border-color: #b0c8ab; }
  75%  { transform: scale(1.24); box-shadow: 0 0 0 7px  rgba(80,185,90,0.38);  background: #ffffff; border-color: #7bc47e; }
  100% { transform: scale(1);    box-shadow: 0 0 0 0px  rgba(80,185,90,0);     background: #e6f0e4; border-color: #b0c8ab; }
}
.ds-sel-circle.circle-nudge {
  animation: circle-nudge 0.72s ease-out;
  transition: none;
}

/* Meal pills — built meals shown inline below the dish pills so users can
   flip between a single dish and a combined meal without leaving the
   results page. Sit in their own tinted, bordered panel so they read as a
   distinct group from the dish pills above rather than just another row of
   them; orange throughout to stay distinct from the teal dish pills and the
   pink heart/favourite accents shared with the rest of the app. Kept bare
   (heart + number only, no name/grades) — the auto-generated "first dish + N
   more" name looks identical across meals with the same dish count once
   several pills sit side by side, and the grades/composition are one tap
   away on the combined view anyway. */
.meal-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  margin-top: 6px;
  background: #fff8f2;
  border: 1px solid #f3d9c2;
  border-radius: var(--r-lg);
}
.meal-pills-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  padding: 4px 2px;
}
.meal-pills-scroll::-webkit-scrollbar { display: none; }
.meal-pills-scroll-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  position: relative;
}
.meal-pills-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(212,98,42,0.12);
  color: #d4622a;
  border: none;
  font-size: 0.6rem;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.meal-pills-arrow.is-visible { opacity: 1; pointer-events: auto; }
.meal-pills-arrow:hover { background: rgba(212,98,42,0.22); }
@media (max-width: 600px) { .meal-pills-arrow { display: none; } }
.meal-pills-label {
  font-family: var(--font-b);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d4622a;
  margin-right: 2px;
}
.meal-switch-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fdf1e8;
  border: 1.5px solid #d4622a;
  border-radius: var(--r-full);
  padding: 4px 20px 4px 4px;
  min-width: 80px;
  min-height: 34px;
  flex-shrink: 0;
  font-family: var(--font-b);
  font-size: 0.76rem;
  font-weight: 700;
  color: #d4622a;
  cursor: pointer;
  transition: all 0.2s;
}
.meal-switch-pill:hover { background: #fbe3cf; }
.meal-switch-pill:active { transform: scale(0.96); }
.meal-switch-pill-heart {
  position: relative;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid #e05080;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.68rem; color: #e05080;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  cursor: pointer;
}
.meal-switch-pill-heart::after {
  content: '';
  position: absolute;
  top: -10px; bottom: -10px; left: -10px; right: -10px;
}
.meal-switch-pill-heart:hover { background: #fff; transform: scale(1.12); }
.meal-switch-pill-heart.is-faved { background: #e05080; color: #fff; border-color: #e05080; }
.meal-switch-pill-heart.is-faved:hover { background: #c8305e; }
.meal-switch-pill-num { flex: 1; text-align: center; }
.meal-switch-pill-active {
  background: #d4622a;
  border-color: #d4622a;
  color: #fff;
  box-shadow: 0 2px 8px rgba(212,98,42,0.3);
}
.meal-switch-pill-active:hover { background: #c1571f; }
/* Editing state — dish within this meal is open for editing */
.meal-switch-pill-editing {
  background: #b8501f;
  border-color: #b8501f;
  box-shadow: 0 2px 8px rgba(212,98,42,0.45), 0 0 0 2px rgba(255,255,255,0.25) inset;
}

/* "+ New Meal" — sits at the end of the row as a plain plus circle, distinct
   from the solid-outline meal-switch-pills it sits beside. */
.meal-new-pill {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1.5px dashed #d4622a;
  color: #d4622a;
  font-size: 0.66rem;
  cursor: pointer;
  transition: all 0.2s;
}
.meal-new-pill:hover { background: #fdf1e8; }
.meal-new-pill:active { transform: scale(0.94); }
.ds-sel-circle:hover { background: #e2ead0; border-color: #b5c9b0; transform: scale(1.12); }

/* ── Select hint toast (shown when user taps Add to Meal before selecting a dish) ── */
@keyframes hint-toast-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.select-hint-toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(26, 127, 140, 0.88);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 16px 6px 13px;
  border-radius: 20px;
  margin: 5px auto 0;
  width: fit-content;
  max-width: 90%;
  pointer-events: none;
  animation: hint-toast-in 0.22s ease-out;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.select-hint-toast.hiding {
  opacity: 0;
  transform: translateY(-4px);
}
.hint-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.45em; height: 1.45em; border-radius: 50%;
  background: #fff; color: var(--text);
  font-size: 1.1em; line-height: 1;
  vertical-align: middle; margin: 0 2px;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.15);
}
.hint-circle .fas { font-size: 0.7em; }
/* Single-pill variant: sits in grid col 1, pill shifts to col 2 */
.select-hint-toast.select-hint-inline {
  background: transparent;
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 4px;
  border-radius: 0;
  margin: 0;
  max-width: 100%;
  justify-content: center;
  text-align: center;
}
/* ── Guru hint floating overlay ───────────────────── */
.guru-hint-overlay {
  position: fixed;
  bottom: 90px;
  right: 12px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  animation: guru-float-in 0.38s cubic-bezier(0.22,1,0.36,1);
}
.guru-hint-overlay.hiding {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none !important;
}
.guru-hint-speech {
  background: #ffffff;
  border: 1.5px solid #e8c49a;
  border-radius: 20px 20px 20px 20px;
  padding: 10px 30px 10px 14px;
  max-width: 240px;
  position: relative;
  pointer-events: all;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07);
}
/* tail removed — avatar sits close enough to the bubble */
.guru-hint-text {
  font-size: 0.78rem;
  color: #3d2b1a;
  line-height: 1.55;
}
.guru-hint-dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.65rem;
  color: #bfa080;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 3px;
  line-height: 1;
  pointer-events: all;
}
.guru-hint-dismiss:hover { color: #7a4a2a; }
.guru-hint-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 5px;
  margin-right: 4px;
  align-self: flex-end;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.12);
  border: 2px solid #fff;
  pointer-events: all;
  cursor: pointer;
}
@keyframes guru-float-in {
  from { opacity: 0; transform: translateX(28px) scale(0.90); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
/* ── guru pointer finger on dish select circle ── */
.guru-pointer {
  position: absolute;
  transform: translateX(-50%);
  font-size: 1.3rem;
  line-height: 1;
  pointer-events: none;
  z-index: 910;
  animation: guru-point-bob 0.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
@keyframes guru-point-bob {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-5px); }
}

/* ── guru hints toggle (profile) ── */
.guru-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}
.guru-toggle-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
}
.guru-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.guru-toggle-switch input { opacity: 0; width: 0; height: 0; }
.guru-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  transition: background 0.25s;
  cursor: pointer;
}
.guru-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
}
.guru-toggle-switch input:checked + .guru-toggle-slider {
  background: #3a7d44;
}
.guru-toggle-switch input:checked + .guru-toggle-slider::before {
  transform: translateX(20px);
}
/* ── end guru hint ─────────────────────────────────── */
.ds-sel-circle:hover .ds-sel-icon { opacity: 1; }
.ds-sel-circle.sel-staged {
  background: var(--teal);
  border-color: var(--teal);
}
.ds-sel-circle.sel-staged .ds-sel-icon { opacity: 1; color: #fff; }
.ds-sel-circle.sel-in-meal {
  background: #d4622a;
  border-color: #d4622a;
}
.ds-sel-circle.sel-in-meal .ds-sel-icon { opacity: 1; color: #fff; }
.ds-sel-circle.sel-remove-pending,
.ds-card.ds-active .ds-sel-circle.sel-remove-pending,
.ds-active .ds-sel-circle.sel-remove-pending {
  background: #d4622a !important;
  border-color: #d4622a !important;
  box-shadow: none !important;
}
.ds-sel-circle.sel-remove-pending .ds-sel-icon,
.ds-card.ds-active .ds-sel-circle.sel-remove-pending .ds-sel-icon { opacity: 1 !important; color: #fff !important; }
.ds-card:hover { border-color: var(--teal); }
.ds-card:active { transform: scale(0.97); }
.ds-active {
  border-color: var(--teal);
  box-shadow: 0 2px 8px rgba(58,125,52,0.25);
}
.ds-card.ds-active {
  border-width: 3px;
  box-shadow: 0 0 0 1px var(--teal), 0 2px 8px rgba(58,125,52,0.3);
}
.ds-active .ds-card-label { color: var(--teal); font-weight: 600; }
.ds-active .ds-sel-circle { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.15); }
.ds-active .ds-sel-circle:hover { background: #fff; transform: scale(1.12); }
.ds-active .ds-sel-circle.sel-staged { background: var(--teal); border-color: var(--teal); }
.ds-active .ds-sel-circle.sel-in-meal { background: #d4622a; border-color: #d4622a; }
.ds-has-meal .ds-card:not(.ds-in-meal):not(.ds-active):not(.ds-staged) { opacity: 0.45; transition: opacity 0.2s; }
.ds-has-meal .ds-card:not(.ds-in-meal):not(.ds-active):not(.ds-staged):hover,
.ds-has-meal .ds-card:not(.ds-in-meal):not(.ds-active):not(.ds-staged):active { opacity: 1; }
.ds-in-meal { border-color: #d4622a; }
.ds-in-meal:hover { border-color: #b8501f; }
.ds-in-meal .ds-card-label { color: #d4622a; }
.ds-active.ds-in-meal { border-color: #d4622a; }
.ds-active.ds-in-meal .ds-card-label { color: #d4622a; }
.ds-meal-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d4622a;
  vertical-align: middle;
  margin-right: 5px;
  position: relative; top: -1px;
}
.ds-placeholder {
  border-style: dashed;
  border-color: var(--teal);
  color: var(--teal);
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  font-size: 0.7rem;
}

/* ── Results top bar ───────────────────── */
.top-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 1px 8px rgba(26,37,24,0.06);
}
.dish-name {
  font-family: var(--font-logo); font-size: 0.95rem; font-weight: 600;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.chuguru-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #333; color: #fff; padding: 10px 18px; border-radius: 18px;
  font-size: 0.8rem; font-weight: 600; z-index: 9999;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
  /* Wrap long messages and stay on-screen instead of overflowing both edges. */
  max-width: min(90vw, 340px);
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.chuguru-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #2a6e3f; border: none;
  color: #fff; font-family: var(--font-d);
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.01em;
  padding: 8px 15px; cursor: pointer;
  border-radius: var(--r-full); flex-shrink: 0;
  box-shadow: 0 2px 7px rgba(42,110,63,0.30);
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.share-btn i,
.share-btn svg {
  color: #fff !important;
  font-size: 0.92rem;
}
.share-btn:active { transform: scale(0.94); background: #235e35; box-shadow: 0 1px 4px rgba(42,110,63,0.30); }
/* Share-retry bar — appears when the native share sheet was blocked because
   the tap's transient activation expired during the upload; a fresh tap on
   "Share now" reopens the sheet with the photo attachment intact. */
.share-retry-bar {
  /* Anchored under the Share button (top-right of the sticky top bar) so the
     prompt appears right where the user just acted; slides down from it. */
  position: fixed; top: calc(52px + env(safe-area-inset-top, 0px)); right: 12px;
  transform: translateY(-8px);
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 8px 8px 18px; border-radius: var(--r-full);
  font-size: 0.82rem; font-weight: 600;
  box-shadow: 0 6px 24px rgba(26,37,24,0.18);
  z-index: 9999; max-width: min(90vw, 340px); box-sizing: border-box;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.share-retry-bar::before {
  /* Caret pointing up at the Share button */
  content: ''; position: absolute; top: -6px; right: 34px;
  width: 10px; height: 10px; background: var(--bg-card);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.share-retry-bar.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.share-retry-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #2a6e3f; border: none; color: #fff;
  font-family: var(--font-d); font-weight: 700; font-size: 0.8rem;
  padding: 8px 15px; cursor: pointer;
  border-radius: var(--r-full); flex-shrink: 0;
  box-shadow: 0 2px 7px rgba(42,110,63,0.30);
}
.share-retry-btn i { font-size: 0.85rem; }
.share-retry-btn:active { transform: scale(0.94); background: #235e35; }

.share-sheet-sub {
  font-size: 0.82rem; color: var(--text-mut);
  margin: 0 0 14px;
}
.share-sheet-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 40vh; overflow-y: auto;
  margin-bottom: 16px;
}
.share-sheet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-chip);
  cursor: pointer;
  transition: background 0.15s;
}
.share-sheet-item .share-sheet-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--text-mut);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.7rem; transition: all 0.15s;
  color: transparent;
}
.share-sheet-item.selected .share-sheet-check {
  border-color: var(--teal);
  color: var(--teal);
}
.share-sheet-item .share-sheet-name {
  font-size: 0.9rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-sheet-confirm {
  display: block; width: 100%;
  padding: 13px 16px;
  border-radius: 12px; border: none;
  font-size: 0.92rem; font-weight: 500;
  background: var(--teal); color: #fff;
  cursor: pointer; transition: opacity 0.15s;
}
.share-sheet-confirm:disabled {
  opacity: 0.45; cursor: default;
}

/* ── PHOTO SHARE SHEET ── */
.photo-share-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; margin: 4px 0 10px;
  padding: 26px 16px;
  border: 1.5px dashed rgba(139,154,42,0.5);
  border-radius: 14px;
  background: var(--gold-soft);
  color: #5a6a1c; font-size: 0.82rem; font-weight: 500;
  text-align: center; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.photo-share-drop:active { background: rgba(139,154,42,0.16); }
.photo-share-drop i { font-size: 1.5rem; }
.photo-share-drop em { font-style: normal; color: var(--mid); font-weight: 400; }
.photo-share-preview-wrap {
  position: relative; margin: 4px 0 10px;
  border-radius: 14px; overflow: hidden; background: #0d120f;
}
.photo-share-preview { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.photo-share-remove {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.55); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.photo-share-terms {
  font-size: 0.66rem; line-height: 1.45; color: var(--mid);
  margin: 0 0 12px; text-align: center;
}


.dish-name.dish-name-empty {
  white-space: normal; overflow: visible; text-overflow: unset;
  font-size: 0.85rem; font-weight: 500; color: var(--mid);
}
.est-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--gold-soft); color: #5a6a1c;
  font-size: 0.55rem; font-weight: 700;
  padding: 4px 9px; border-radius: var(--r-full);
  letter-spacing: 0.02em; white-space: nowrap;

  border: 1px solid rgba(139,154,42,0.2);
}
.est-badge i { font-size: 0.52rem; }

.servings-note {
  font-size: 0.68rem; color: #5a6a1c;
  background: var(--gold-soft);
  border-bottom: 1px solid rgba(139,154,42,0.18);
  padding: 5px 14px;
  text-align: center;
  line-height: 1.4;
}

/* ── DUAL VERDICT — two columns, stats beneath each card ── */
.dual-verdict {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 10px;
}
.dv-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dv-card {
  border-radius: 22px;
  padding: 0 0 14px;
  position: relative; overflow: hidden;
  animation: fadeUp 0.5s var(--ease);
  cursor: pointer;
  transition: box-shadow 0.3s, transform 0.3s, background 0.4s;
  flex: 1;
  background: linear-gradient(158deg, #ffffff 0%, #f5f5f5 45%, #ebebeb 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.9),
    inset 0 2px 0 rgba(255,255,255,1),
    0 2px 6px rgba(0,0,0,0.06),
    0 10px 24px rgba(0,0,0,0.07),
    0 28px 44px rgba(0,0,0,0.05);
}
.dv-card:hover { transform: translateY(-5px) scale(1.018); }
.dv-card:active { transform: scale(0.97); }

.dv-card[data-grade="A"], .dv-card[data-grade="B"] {
  background: linear-gradient(158deg, #ffffff 0%, rgba(46,158,90,0.07) 45%, rgba(46,158,90,0.14) 100%);
}
.dv-card[data-grade="C"] {
  background: linear-gradient(158deg, #ffffff 0%, rgba(232,168,23,0.07) 45%, rgba(200,136,8,0.13) 100%);
}
.dv-card[data-grade="D"] {
  background: linear-gradient(158deg, #ffffff 0%, rgba(224,122,47,0.07) 45%, rgba(192,96,16,0.13) 100%);
}
.dv-card[data-grade="E"] {
  background: linear-gradient(158deg, #ffffff 0%, rgba(212,61,47,0.07) 45%, rgba(184,24,24,0.13) 100%);
}

/* Gloss overlays */
.top-rim {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.9) 70%, transparent 100%);
  pointer-events: none; z-index: 3;
}
.gloss-top {
  position: absolute; top: 0; left: 0; right: 0; height: 44%;
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%);
  border-radius: 22px 22px 50% 50%;
  pointer-events: none; z-index: 2;
}
.gloss-streak {
  position: absolute; top: 8%; left: 10%; width: 36%; height: 28%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
  transform: rotate(-12deg);
  pointer-events: none; z-index: 2;
}

.dv-header {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px 4px;
  position: relative; z-index: 4;
}
.dv-icon-wrap {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.85);
}
.dv-icon-nutri { background: linear-gradient(145deg, #e8f5ee, #c2e6d0); }
.dv-icon-nutri .dv-icon { color: var(--grade-a); font-size: 0.72rem; }
.dv-icon-planet { background: linear-gradient(145deg, #ddf4f2, #b0e4e0); }
.dv-icon-planet .dv-icon { color: var(--teal); font-size: 0.72rem; }
.dv-card[data-grade="D"] .dv-icon-planet,
.dv-card[data-grade="E"] .dv-icon-planet { background: linear-gradient(145deg, #fde8e6, #f5c0ba); }
.dv-card[data-grade="D"] .dv-icon-planet .dv-icon,
.dv-card[data-grade="E"] .dv-icon-planet .dv-icon { color: var(--grade-e); }
.dv-icon { font-size: 0.72rem; }

.dv-label {
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-sec);
  flex: 1;
}

/* Grade badge */
.dv-badge {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--font-d);
  font-size: 18px; font-weight: 700;
  color: rgba(0,0,0,0.2);
  flex-shrink: 0;
  background: rgba(0,0,0,0.07);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: background 0.4s, color 0.4s;
}
.dv-card[data-grade="A"] .dv-badge { background: linear-gradient(145deg, #50c878, #259050); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 3px 8px rgba(37,144,80,0.35), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.12); }
.dv-card[data-grade="B"] .dv-badge { background: linear-gradient(145deg, #8ed050, #52a030); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 3px 8px rgba(82,160,48,0.35), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.12); }
.dv-card[data-grade="C"] .dv-badge { background: linear-gradient(145deg, #f8c830, #c88808); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 3px 8px rgba(200,136,8,0.35), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.12); }
.dv-card[data-grade="D"] .dv-badge { background: linear-gradient(145deg, #f09030, #c06010); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 3px 8px rgba(192,96,16,0.35), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.12); }
.dv-card[data-grade="E"] .dv-badge { background: linear-gradient(145deg, #f05848, #b81818); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 3px 8px rgba(184,24,24,0.35), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.12); }

/* Dial gauge */
.dv-dial-wrap {
  padding: 0 12px 2px;
  display: flex; justify-content: center;
  position: relative; z-index: 1;
}
.dv-dial-svg {
  width: 100%; max-width: 124px;
  display: block;
  overflow: visible;
}

/* Divider between dial and alert */
.dv-divider {
  height: 1px;
  margin: 6px 14px 4px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.07) 30%, rgba(0,0,0,0.07) 70%, transparent);
}

.dv-alert {
  font-size: 0.64rem; font-weight: 600;
  line-height: 1.35;
  min-height: 2.7rem;
  padding: 2px 14px 0;
  position: relative; z-index: 1;
}
.dv-alert-warn { color: var(--grade-e); }
.dv-alert-mid  { color: #A67B0A; }
.dv-alert-good { color: var(--grade-a); }
.dv-alert-eco  { color: var(--teal); }
.dv-alert-label { color: var(--text); font-weight: 700; }
.dv-alert-issues { color: var(--grade-e); }
.dv-allergen-line {
  color: var(--grade-e);
  font-weight: 700;
  font-size: 0.68rem;
  margin-bottom: 2px;
}
.dv-pref-inline { color: #A67B0A; font-weight: 600; }
.nutri-ing-link { cursor: pointer; }
.nutri-ing-link:hover { opacity: 0.75; }

/* ── Stats row beneath each verdict card ── */
.dv-stats-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 7px 8px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 14px rgba(26,37,24,0.13), 0 1px 4px rgba(26,37,24,0.08);
}
.dv-stat {
  flex: 1;
  text-align: center;
}
.dv-stat-val {
  font-family: var(--font-d);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
}
.dv-stat-label {
  font-size: 0.55rem;
  color: var(--text-mut);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.dv-stat-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Add to Meal ─────────────────────────── */
.results-action-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}
.add-to-meal-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.add-to-meal-btn {
  background: rgba(212,98,42,0.08);
  color: #b8501f;
  border: 1px solid rgba(212,98,42,0.18);
  border-radius: var(--r-full);
  padding: 5px 12px 5px 6px;
  font-family: var(--font-b);
  font-size: 0.80rem; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}
.add-to-meal-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.add-to-meal-btn-sub {
  font-size: 0.67rem;
  font-weight: 500;
  opacity: 0.65;
  letter-spacing: 0.01em;
}
.add-to-meal-btn .fa-utensils,
.add-to-meal-btn .fa-check,
.add-to-meal-btn .fa-circle-minus {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #d4622a;
  color: #fff;
  font-size: 0.72rem;
  flex-shrink: 0;
  transition: background 0.2s;
}
.add-to-meal-btn:hover { background: rgba(212,98,42,0.14); }
.add-to-meal-btn:hover .fa-utensils { background: #b8501f; }
.add-to-meal-btn.in-meal {
  background: rgba(45,90,39,0.08);
  color: #b8501f;
  border-color: rgba(45,90,39,0.18);
  box-shadow: none;
}
.add-to-meal-btn.in-meal .fa-check {
  background: #b8501f;
  color: #fff;
}
.add-to-meal-btn.in-meal:hover {
  background: rgba(45,90,39,0.14);
}
.add-to-meal-btn.staged {
  background: rgba(26,127,140,0.1);
  color: var(--teal-deep);
  border-color: rgba(26,127,140,0.28);
}
.add-to-meal-btn.staged .fa-check {
  background: var(--teal);
  color: #fff;
  animation: add-pulse 2s ease-in-out infinite;
}
@keyframes add-pulse {
  0%, 100% { transform: scale(1); background: var(--teal); }
  50%       { transform: scale(1.12); background: var(--teal-deep); }
}
.add-to-meal-btn.staged:hover { background: rgba(26,127,140,0.16); }
.add-to-meal-btn.staged:hover .fa-check { background: var(--teal-deep); }
/* Pending removal confirmation state */
.add-to-meal-btn.meal-remove-pending {
  background: rgba(180,30,30,0.05);
  color: #b87070;
  border-color: rgba(180,30,30,0.18);
}
.add-to-meal-btn.meal-remove-pending .fa-circle-minus {
  background: rgba(180,30,30,0.30);
  color: #fff;
  animation: remove-pulse 2s ease-in-out infinite;
}
@keyframes remove-pulse {
  0%, 100% { transform: scale(1); background: rgba(180,30,30,0.30); }
  50%       { transform: scale(1.12); background: rgba(180,30,30,0.48); }
}
.add-to-meal-btn.meal-remove-pending:hover { background: rgba(180,30,30,0.09); }
.add-to-meal-btn.meal-remove-pending:hover .fa-circle-minus { background: rgba(180,30,30,0.45); }
/* Single-dish idle state — shown before the user taps the circle */
.add-to-meal-btn.save-dish-idle {
  background: rgba(26,127,140,0.05);
  color: var(--teal-deep);
  border-color: rgba(26,127,140,0.15);
  opacity: 0.62;
}
.add-to-meal-btn.save-dish-idle .fa-utensils {
  background: var(--teal);
  opacity: 0.7;
}
.add-to-meal-btn.save-dish-idle:hover {
  background: rgba(26,127,140,0.09);
  opacity: 0.75;
}
/* Build-a-Meal idle: subdued but visible — secondary to Save to Favourites */
.add-to-meal-btn.build-meal-idle {
  background: rgba(212,98,42,0.06);
  color: #a04828;
  border-color: rgba(212,98,42,0.28);
  font-size: 0.78rem;
  padding: 4px 12px 4px 4px;
  opacity: 1;
}
.add-to-meal-btn.build-meal-idle .fa-utensils {
  width: 28px; height: 28px;
  font-size: 0.68rem;
  background: rgba(212,98,42,0.35);
}
.add-to-meal-btn.build-meal-idle:hover {
  background: rgba(212,98,42,0.11);
  border-color: rgba(212,98,42,0.40);
}
/* Save to Favourites — primary action button */
.save-fav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-warm); border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 5px 14px 5px 5px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  color: var(--text-sec); font-family: var(--font-b);
  transition: all 0.2s; white-space: nowrap;
}
.save-fav-btn-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex-shrink: 0; color: #e05080;
  transition: background 0.2s, border-color 0.2s;
}
.save-fav-btn:hover { border-color: #e05080; color: #e05080; }
.save-fav-btn:hover .save-fav-btn-icon { border-color: rgba(224,80,128,0.4); }
/* Saved state */
.save-fav-btn.saved {
  color: #e05080; border-color: #e05080;
  background: rgba(224,80,128,0.06);
}
.save-fav-btn.saved .save-fav-btn-icon {
  background: rgba(224,80,128,0.12); border-color: #e05080;
}
/* Action wrap layout: stack the two buttons with a small gap */
.add-to-meal-wrap {
  flex-direction: column;
  gap: 6px;
}
.trash-action-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(45,90,39,0.08);
  border-radius: var(--r-full);
  border: 1px solid rgba(45,90,39,0.18);
  padding: 5px 6px;
  flex-shrink: 0;
}
.remove-dish-btn {
  background: rgba(45,90,39,0.12);
  border: 1px solid rgba(45,90,39,0.15);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--teal-deep); font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
@media (hover: hover) {
  .remove-dish-btn:hover { background: rgba(208,48,48,0.12); border-color: rgba(208,48,48,0.25); color: var(--grade-e); }
}
.remove-dish-btn:active { background: rgba(208,48,48,0.12); border-color: rgba(208,48,48,0.25); color: var(--grade-e); }
.clear-session-btn {
  background: rgba(45,90,39,0.12);
  border: 1px solid rgba(45,90,39,0.15);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--teal-deep); font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
@media (hover: hover) {
  .clear-session-btn:hover { background: rgba(208,48,48,0.12); border-color: rgba(208,48,48,0.25); color: var(--grade-e); }
  .clear-session-btn:hover i { animation: flicker 0.6s ease-in-out infinite alternate; }
}
.clear-session-btn:active { background: rgba(208,48,48,0.12); border-color: rgba(208,48,48,0.25); color: var(--grade-e); }
.clear-session-btn:active i { animation: flicker 0.6s ease-in-out infinite alternate; }
@keyframes flicker {
  0%   { color: #e85d26; transform: scaleY(1)    scaleX(1)    rotate(-4deg); filter: drop-shadow(0 0 3px rgba(232,93,38,0.7)); }
  25%  { color: #f5a623; transform: scaleY(1.15) scaleX(0.92) rotate(2deg);  filter: drop-shadow(0 0 5px rgba(245,166,35,0.8)); }
  50%  { color: #d63a0a; transform: scaleY(0.95) scaleX(1.05) rotate(-2deg); filter: drop-shadow(0 0 4px rgba(214,58,10,0.9)); }
  75%  { color: #f5c518; transform: scaleY(1.1)  scaleX(0.95) rotate(3deg);  filter: drop-shadow(0 0 6px rgba(245,197,24,0.7)); }
  100% { color: #e85d26; transform: scaleY(1.05) scaleX(1)    rotate(-1deg); filter: drop-shadow(0 0 4px rgba(232,93,38,0.8)); }
}

/* ── Meal breakdown ─────────────────────── */
.meal-break-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.72rem;
  font-family: var(--font-b);
  padding: 4px 9px 2px;
}
.mdb-label {
  color: var(--text-mut);
  font-weight: 600;
  white-space: nowrap;
}
.mdb-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  white-space: nowrap;
}
.mdb-delta.good  { color: #2e7d32; }
.mdb-delta.bad   { color: #c0392b; }
.mdb-delta.neutral { color: var(--text-mut); }
.mdb-sep { color: var(--text-mut); font-weight: 400; }

/* ── Meal size badge ───────────────────── */
.meal-badge {
  display: inline-block;
  font-size: 0.62rem; font-weight: 700;
  padding: 2px 7px; border-radius: 6px;
  margin-right: 4px; vertical-align: middle;
  letter-spacing: 0.02em;
}
.meal-light      { background: #E8F5E9; color: #2E7D32; }
.meal-moderate   { background: #E3F2FD; color: #1565C0; }
.meal-substantial{ background: #FFF3E0; color: #E65100; }
.meal-large      { background: #FCE4EC; color: #B71C1C; }

/* ── Detail tabs ───────────────────────── */
.detail-tabs-wrap {
  margin-top: 8px;
}
.dtab-strip {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
  position: relative;
}
.dtab {
  flex: 1;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-bottom: 1.5px solid var(--teal);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 10px 8px;
  font-family: var(--font-b);
  font-size: 0.72rem; font-weight: 600;
  color: var(--text-sec);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all 0.2s;
}
.dtab.dtab-active {
  background: var(--bg-card);
  border-color: var(--teal);
  border-bottom: 1.5px solid var(--bg-card);
  color: var(--teal);
  box-shadow: 0 -2px 8px rgba(58,125,52,0.08);
}
.dtab:hover:not(.dtab-active) { color: var(--teal); }
.dtab-badge {
  background: var(--bg-warm);
  padding: 1px 6px;
  border-radius: var(--r-full);
  font-size: 0.6rem;
}
.dtab-close-btn {
  width: 34px;
  align-self: stretch;
  background: var(--bg-warm); border: 1.5px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  color: var(--text-mut); font-size: 0.7rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.dtab-close-btn:hover { color: var(--text); background: var(--border); }
.dtab-panel {
  display: none;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 14px 14px;
  box-shadow: var(--sh-sm);
}
.dtab-panel-active { display: block; }
.tp-meta {
  font-size: 0.7rem; color: var(--text-sec); font-weight: 600;
  margin-bottom: 10px;
}
.tp-meta .tp-meta-weight {
  font-weight: 700; color: var(--text);
}
.half-portion-btn {
  margin-left: 10px;
  padding: 2px 8px;
  font-size: 0.65rem; font-weight: 600;
  border: 1.5px dashed var(--border-focus);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-sec);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.half-portion-btn.active {
  background: var(--flame);
  color: var(--text-inv);
  border: 1.5px solid var(--flame);
}

/* ── Detail cards (collapsible) ────────── */
.detail-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  margin-top: 8px; overflow: hidden;
  transition: box-shadow 0.2s;
}
.detail-card:hover { box-shadow: var(--sh-md); }

.detail-toggle {
  width: 100%; background: var(--bg-card); border: none;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  color: var(--text); font-family: var(--font-b);
  font-size: 0.84rem; font-weight: 600; cursor: pointer;
  transition: background 0.25s;
}
.detail-toggle:hover { background: var(--bg-warm); }
#nutriToggle.open  { background: linear-gradient(to right, var(--flame-soft), var(--bg-card)); }
#planetToggle.open { background: linear-gradient(to right, var(--teal-soft),  var(--bg-card)); }
.detail-toggle span:first-child {
  flex: 1; text-align: left;
  display: flex; align-items: center; gap: 10px;
}

.dt-icon-wrap {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: inline-grid; place-items: center;
  font-size: 0.7rem; flex-shrink: 0;
  transition: background 0.25s, color 0.25s;
}
.dt-icon-nutri  { background: var(--flame-soft); color: var(--flame); }
.dt-icon-planet { background: var(--teal-soft); color: var(--teal); }
.dt-icon-ing    { background: var(--bg-warm); color: var(--earth); }

.detail-meta {
  font-size: 0.62rem; color: var(--text-mut);
  font-weight: 500; margin-right: 4px;
}
.detail-arrow {
  color: var(--text-mut); font-size: 0.68rem;
  transition: transform 0.35s var(--ease);
}
.detail-toggle.open .detail-arrow { transform: rotate(180deg); }
.detail-body {
  display: none; padding: 0 16px 16px;
  animation: slideDown 0.35s var(--ease);
}
.detail-body.open { display: block; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Nutrition rows ────────────────────── */
.n-rows { display: flex; flex-direction: column; gap: 0; }

.ns-bar-label {
  font-size: 0.65rem; font-weight: 600;
  color: var(--text-sec); margin-bottom: 4px;
}
.ns-bar { display: flex; gap: 3px; margin-bottom: 16px; }
.ns-item {
  flex: 1; text-align: center;
  padding: 6px 0; border-radius: 8px;
  font-size: 0.72rem; font-weight: 700;
  transition: all 0.3s var(--ease);
}
.ns-active {
  transform: scaleY(1.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.nutri-section { margin-bottom: 6px; }
.nutri-section:last-of-type { margin-bottom: 0; }
.nutri-section-hdr {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 8px 0 6px; display: flex; align-items: center; gap: 6px;
}
.nutri-section-hdr i { font-size: 0.62rem; }
.nutri-section-warn { color: var(--grade-e); }
.nutri-section-good { color: var(--grade-a); }

.nutri-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.nutri-item:last-child { border-bottom: none; }
.nutri-icon-wrap {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 0.72rem; flex-shrink: 0;
}
.nutri-alert .nutri-icon-wrap,
.nutri-high .nutri-icon-wrap   { background: #FDE8E6; color: var(--grade-e); }
.nutri-med .nutri-icon-wrap    { background: #FFF5DD; color: #A67B0A; }
.nutri-low .nutri-icon-wrap    { background: #E2F5E9; color: var(--grade-a); }
.nutri-great .nutri-icon-wrap,
.nutri-good .nutri-icon-wrap   { background: #E2F5E9; color: var(--grade-a); }
.nutri-some .nutri-icon-wrap   { background: var(--bg-warm); color: var(--text-mut); }

.nutri-detail { flex: 1; min-width: 0; }
.nutri-name { font-size: 0.82rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.nutri-verdict { font-size: 0.7rem; font-weight: 500; line-height: 1.3; margin-top: 1px; }
.nutri-alert .nutri-verdict  { color: var(--grade-e); font-weight: 700; }
.nutri-high .nutri-verdict   { color: var(--grade-e); }
.nutri-med .nutri-verdict    { color: #A67B0A; }
.nutri-low .nutri-verdict    { color: var(--grade-a); }
.nutri-great .nutri-verdict  { color: var(--grade-a); }
.nutri-good .nutri-verdict   { color: var(--grade-a); }
.nutri-some .nutri-verdict   { color: var(--text-mut); }

.nutri-alert-icon { color: var(--grade-e); font-size: 0.6rem; }

.nutri-value { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nutri-val-text { display: flex; flex-direction: column; align-items: flex-end; }
.nutri-val-num {
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  text-align: right; min-width: 48px;
}
.nutri-val-note {
  font-size: 0.62rem; font-weight: 500; color: var(--text-mut);
  text-align: right; font-style: italic;
}
.nutri-val-ri {
  font-size: 0.65rem; font-weight: 500; color: var(--text-mut);
  text-align: right;
}
.nutri-val-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.dot-red    { background: var(--grade-e); }
.dot-amber  { background: var(--grade-c); }
.dot-green  { background: var(--grade-a); }
.dot-neutral { background: var(--border); }

.nutri-micro-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; cursor: pointer; margin-top: 6px;
  font-size: 0.68rem; font-weight: 700; color: var(--teal);
  text-transform: uppercase; letter-spacing: 0.08em;
  background: rgba(26,127,140,0.07);
  border: 1px solid rgba(26,127,140,0.18);
  border-radius: 8px;
}
.nutri-micro-toggle .fa-chevron-down {
  font-size: 0.6rem; transition: transform 0.2s;
  background: rgba(26,127,140,0.12);
  padding: 3px 5px; border-radius: 4px;
}
.nutri-micro-toggle.open .fa-chevron-down { transform: rotate(180deg); }
.nutri-micro-list { display: none; }
.nutri-micro-list.nutri-micro-open { display: block; }

/* Sub-group label inside Vitamins & Minerals panel */
.nutri-group-label {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-mut);
  padding: 8px 0 3px; margin-top: 2px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.nutri-group-label:first-child { border-top: none; margin-top: 0; }

/* B vitamins collapsed row */
.nutri-bvit-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer; margin: 4px 0;
  background: rgba(26,127,140,0.05);
  border: 1px solid rgba(26,127,140,0.15);
  border-radius: 8px;
}
.nutri-bvit-toggle .nutri-icon-wrap { flex-shrink: 0; }
.nutri-bvit-toggle .nutri-detail { flex: 1; min-width: 0; }
.nutri-bvit-toggle .nutri-name { font-size: 0.8rem; font-weight: 500; }
.nutri-bvit-preview { font-size: 0.65rem; color: var(--text-mut); margin-top: 2px; }
.nutri-bvit-chevron { font-size: 0.6rem; color: var(--teal); transition: transform 0.2s; flex-shrink: 0; background: rgba(26,127,140,0.12); padding: 3px 5px; border-radius: 4px; }
.nutri-bvit-toggle.open .nutri-bvit-chevron { transform: rotate(180deg); }
.nutri-bvit-list { display: none; padding-left: 12px; }
.nutri-bvit-list.nutri-bvit-open { display: block; }

.n-learn-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; padding: 0;
  background: none; border: none;
  cursor: pointer;
  font-size: 0.65rem; font-weight: 500;
  color: var(--text-mut);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(0,0,0,0.2);
  opacity: 0.75;
}
.n-learn-btn:active { opacity: 1; }
.n-legend { margin-top: 8px; font-size: 0.58rem; color: var(--text-mut); font-weight: 400; line-height: 1.6; }

/* ── Planet metrics ────────────────────── */
.planet-grid { display: flex; flex-direction: column; }
.planet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.planet-item:last-of-type { border-bottom: none; }
.planet-icon-wrap {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 0.72rem; flex-shrink: 0;
}
.planet-low .planet-icon-wrap  { background: var(--teal-soft); color: var(--teal); }
.planet-med .planet-icon-wrap  { background: #FFF5DD; color: #A67B0A; }
.planet-high .planet-icon-wrap { background: #FDE8E6; color: var(--grade-e); }

.planet-detail { flex: 1; min-width: 0; }
.planet-name { font-size: 0.82rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.planet-measure {
  font-size: 0.68rem; font-weight: 500; line-height: 1.3;
  margin-top: 1px; color: var(--text-mut);
}
.planet-sublabel { font-size: 0.62rem; font-weight: 400; opacity: 0.75; }
.planet-rating { font-size: 0.78rem; font-weight: 700; text-align: right; min-width: 48px; }
.planet-low .planet-rating  { color: var(--teal); }
.planet-med .planet-rating  { color: #A67B0A; }
.planet-high .planet-rating { color: var(--grade-e); }
.planet-explain {
  margin-top: 10px; font-size: 0.58rem; color: var(--text-mut);
  font-weight: 400; line-height: 1.55; text-align: center;
}

/* ── Ingredients list ──────────────────── */
.ing-list { display: flex; flex-direction: column; }
.ing-section-header {
  font-family: var(--font-b);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 10px 0 5px;
  border-bottom: 1.5px solid var(--teal-soft);
  margin-top: 6px;
}
.ing-section-header:first-child { margin-top: 0; }
.menu-desc-note {
  font-size: 0.75rem; color: var(--text-sec); line-height: 1.45;
  background: rgba(0,0,0,0.03); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 10px;
}
.menu-desc-label {
  font-weight: 600; color: var(--green-dark, #2d6a4f);
  margin-right: 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.ing-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 0.85rem;
}
.ing-item:last-child { border-bottom: none; }
.ing-nm { color: var(--text); font-weight: 600; flex: 1; min-width: 0; }
.ing-match {
  display: block; font-size: 0.7rem; color: var(--text-sec);
  font-style: italic; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ing-nomatch {
  display: inline-block; font-size: 0.55rem; font-weight: 700;
  color: var(--grade-e); background: #FDE8E6;
  padding: 2px 7px; border-radius: var(--r-full);
  margin-left: 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.ing-wt {
  color: var(--text); font-weight: 700; font-size: 0.82rem;
  white-space: nowrap;
}
.ing-wt[data-idx] {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  background: rgba(0,0,0,0.05);
  border-radius: var(--r-full);
  padding: 3px 9px;
  min-width: 3.2em;
  text-align: center;
}
.ing-wt[data-idx]:hover { color: var(--teal); background: rgba(31,143,138,0.12); }
.ing-wt-input {
  width: 52px; text-align: right;
  font-size: 0.75rem; font-weight: 600; font-family: var(--font);
  color: var(--text); background: var(--card-bg);
  border: 1.5px solid var(--teal); border-radius: 6px;
  padding: 2px 4px; outline: none;
}
.ing-delete-btn {
  background: none; border: none; cursor: pointer;
  color: #c0392b; padding: 4px 0 4px 20px;
  font-size: 0.75rem; line-height: 1; flex-shrink: 0;
  opacity: 0.55; transition: opacity 0.15s;
}
.ing-delete-btn:hover, .ing-delete-btn:active { opacity: 1; }
.ing-edited-note {
  font-size: 0.7rem; color: var(--text-mut); font-style: italic;
  text-align: center; padding: 8px 0 2px;
  opacity: 0.7;
}
.ing-meal-lock-hint {
  font-size: 0.72rem; color: var(--text-mut);
  text-align: center; padding: 12px 16px 4px;
  opacity: 0.8;
}
.ing-meal-lock-hint .fa-circle-info { margin-right: 4px; }

/* ── Compare — card-based ──────────────── */
/* ── Top quick-compare strip (typed-dish mode) ──────────────────────── */
#topCompareSec {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 2px;
}
.top-cmp-label { margin: 4px 0 2px; padding-left: 2px; }
.top-cmp-row {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--teal);
  border-radius: var(--r-full);
  background: #fff;
  overflow: hidden;
}
.top-cmp-row .cmp-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 8px 12px;
}
.top-cmp-row .cmp-input:focus { border-color: transparent; }
.top-cmp-row .cmp-go {
  border-radius: 50%;
  width: 34px; height: 34px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin: 3px;
  white-space: nowrap;
  transition: border-radius 0.2s, padding 0.2s;
}
.top-cmp-row .cmp-go.loading,
.hca-dish-go.loading {
  border-radius: var(--r-full);
  width: auto;
  height: 34px;
  padding: 0 12px;
  gap: 6px;
  font-size: 0.76rem;
  font-family: var(--font-b);
}

/* ── Home cook: analyse another recipe button ── */
#addAnotherRecipeBtn { padding: 4px 0 2px; }
.home-cook-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hca-or {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #aaa);
  flex-shrink: 0;
}
.hca-dish-wrap {
  flex: none;
  width: 62%;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--teal);
  border-radius: var(--r-full);
  overflow: hidden;
  background: #fff;
}
.hca-dish-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--text);
  background: transparent;
  font-family: var(--font);
}
.hca-dish-input::placeholder { color: var(--text-mut); }
.hca-dish-go {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--teal);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
  margin: 3px;
  transition: background 0.15s;
}
.hca-dish-go:hover { background: var(--teal-deep); }
.hca-recipe-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 14px;
  background: transparent;
  border: 1.5px dashed var(--teal);
  border-radius: var(--r-full);
  color: var(--teal);
  font-size: 0.82rem; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.hca-recipe-btn:hover { background: rgba(58,125,52,0.06); }

/* ── Home recipe chip: inline rename ── */
.ds-chip-rename {
  display: inline-flex; align-items: center;
  padding: 0 4px;
  opacity: 0.75;
  cursor: pointer;
  font-size: 0.65rem;
  flex-shrink: 0;
}
.ds-chip-rename:hover { opacity: 1; }
.ds-chip-rename-input {
  width: 100px;
  background: rgba(255,255,255,0.2);
  border: none;
  border-bottom: 1.5px solid rgba(255,255,255,0.8);
  color: #fff;
  font-size: 0.78rem; font-weight: 600;
  padding: 1px 3px;
  outline: none;
  border-radius: 2px;
}

.cmp-section { margin-top: 0; }

.cmp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 18px 16px;
  box-shadow: var(--sh-sm);
}
.cmp-card-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.cmp-card-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--sage-soft);
  color: var(--sage);
  display: grid; place-items: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.cmp-card-title {
  font-size: 0.86rem; font-weight: 600;
  color: var(--text); line-height: 1.2;
}
.cmp-card-sub {
  font-size: 0.68rem; color: var(--text-mut);
  font-weight: 400; margin-top: 1px;
}

.menu-alts { margin-bottom: 12px; }
.menu-alts-label {
  font-size: 0.68rem; color: var(--text-mut); font-weight: 600;
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.08em;
}
.menu-alts-cat-header {
  grid-column: 1 / -1;
  font-family: var(--font-d);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mut);
  padding: 8px 2px 2px;
}
.menu-alts-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.menu-alts-chip {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--r-full); padding: 8px 12px;
  font-family: var(--font-b); font-size: 0.74rem;
  color: var(--text-sec); cursor: pointer;
  transition: all 0.2s; text-align: left;
  box-shadow: var(--sh-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-alts-chip:has(.chip-desc) {
  border-radius: var(--r-md);
  white-space: normal;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.menu-alts-chip .chip-name { font-size: 0.74rem; font-weight: 500; }
.menu-alts-chip .chip-desc {
  font-size: 0.65rem; font-weight: 400; color: var(--text-mut);
  line-height: 1.35; display: block;
}
.menu-alts-chip.bilingual {
  border-radius: var(--r-md);
  white-space: normal;
  display: flex; flex-direction: column; gap: 2px;
}
.menu-alts-chip .chip-original {
  font-size: 0.74rem; font-weight: 500; color: var(--text-sec);
}
.menu-alts-chip .chip-translation {
  font-size: 0.65rem; font-weight: 400; color: var(--teal); font-style: italic;
}
.menu-alts-chip:hover { border-color: var(--teal); color: var(--teal); }
.menu-alts-chip:active { transform: scale(0.96); }
.menu-alts-chip.viewed {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal-deep);
}
.menu-alts-chip.ordered {
  border-color: var(--teal-deep);
  background: var(--teal);
  color: #fff;
  font-weight: 600;
}
.menu-alts-chip.active {
  border-color: var(--teal-deep);
  background: var(--teal-soft);
  color: var(--teal-deep);
  font-weight: 600;
  cursor: default;
}

.cmp-row {
  display: flex; gap: 8px;
}
.cmp-input {
  flex: 1; border: 1.5px solid var(--border);
  border-radius: var(--r-full); padding: 10px 16px;
  font-family: var(--font-b); font-size: 0.82rem;
  color: var(--text); background: var(--bg);
  outline: none;
  transition: border-color 0.25s;
}
.cmp-input:focus { border-color: var(--teal); }
.cmp-input::placeholder { color: var(--text-mut); }
.cmp-go {
  background: var(--teal); color: #fff; border: none;
  border-radius: var(--r-full); padding: 10px 18px;
  font-family: var(--font-b); font-size: 0.82rem;
  font-weight: 600; cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.cmp-go:hover { background: var(--teal-deep); }

.cmp-result { margin-top: 12px; }
.cmp-hdr {
  font-family: var(--font-d); font-size: 0.95rem;
  font-weight: 400; margin-bottom: 10px;
}
.cmp-body { font-size: 0.82rem; line-height: 1.5; }

/* Meal toast — briefly animates in then out when a dish is added */
@keyframes meal-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1); }
}
@keyframes meal-toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1); }
  to   { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.92); }
}
.meal-pill {
  position: fixed;
  bottom: 104px;
  left: 50%;
  transform: translateX(-50%);
  background: #d4622a;
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  padding: 11px 22px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-b); font-size: 0.84rem; font-weight: 600;
  pointer-events: none;
  box-shadow: 0 4px 18px rgba(180,80,31,0.45);
  z-index: 50;
  white-space: nowrap;
}
.meal-pill.toast-in  { animation: meal-toast-in  0.3s var(--ease) forwards; }
.meal-pill.toast-out { animation: meal-toast-out 0.35s var(--ease) forwards; }

/* Meal tab — full orange fill when a meal is in progress */
#tabHistory.has-dishes i { color: #e8a87c; }
#tabHistory.has-meals i { color: #d4622a; }

/* tab-meal-count and tab-meal-label hidden until has-meals */
#tabHistory .tab-meal-count { display: none; }
#tabHistory .tab-meal-label { display: none; }

.meal-screen-body {
  padding: 20px 20px calc(80px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  flex: 1;
}

.meal-screen-empty {
  text-align: center;
  color: var(--text-mut);
  font-size: 0.88rem;
  padding: 48px 20px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.meal-screen-empty i { font-size: 2rem; opacity: 0.28; display: block; margin-bottom: 10px; }
.meal-empty-title {
  font-family: var(--font-b);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.meal-empty-sub {
  font-size: 0.84rem;
  color: var(--text-mut);
  max-width: 260px;
  line-height: 1.55;
}
.ms-combined-label {
  font-family: var(--font-b);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal-deep);
  opacity: 0.75;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ms-combined-label i { font-size: 0.6rem; }
.ms-stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ms-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: var(--bg-warm);
  border-radius: 10px;
  padding: 6px 14px;
  min-width: 64px;
}
.ms-stat-val {
  font-family: var(--font-b);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.ms-stat-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ms-stat-co2 .ms-stat-val { color: var(--teal-deep); }
.ms-section-hdr {
  font-family: var(--font-b);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 4px 6px;
}
.ms-add-dishes-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  margin-left: auto;
  padding: 9px 14px;
  background: rgba(26,127,140,0.06);
  border: 1.5px dashed rgba(26,127,140,0.28);
  border-radius: var(--r-full);
  color: var(--teal-deep);
  font-family: var(--font-b);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.ms-add-dishes-btn i { font-size: 0.7rem; opacity: 0.75; }
.ms-add-dishes-btn:hover {
  background: rgba(26,127,140,0.12);
  border-color: rgba(26,127,140,0.45);
}

/* ── Meal cards ── */
.meal-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--sh-sm);
  display: flex; flex-direction: column;
}
.meal-card-num-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.meal-card-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #d4622a;
  color: #fff;
  font-family: var(--font-b);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.meal-card-header {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.meal-card-load {
  background: rgba(212,98,42,0.1); border: 1.5px solid #d4622a;
  border-radius: var(--r-full);
  padding: 6px 12px 6px 6px;
  display: flex; align-items: center; gap: 7px;
  flex: 1; min-width: 0; cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.meal-card-load:hover { background: rgba(212,98,42,0.18); }
.meal-card-load:hover .meal-card-name-text { color: #b84e1e; }
.meal-card-load:hover .meal-card-load-icon { opacity: 0.7; }
.meal-card-name-text {
  font-family: var(--font-d); font-size: 1.05rem; font-weight: 700;
  color: #b84e1e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.15s;
  text-decoration: none;
}
.meal-card-load::after {
  content: '\f35d';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.65rem;
  color: #d4622a;
  opacity: 0.7;
  flex-shrink: 0;
  margin-left: auto;
}
.meal-card-name-input {
  font-family: var(--font-d); font-size: 1.05rem; font-weight: 600;
  color: var(--text); flex: 1; min-width: 0; width: 100%;
  border: none; border-bottom: 1.5px solid var(--teal);
  background: transparent; outline: none; padding: 0;
}
.meal-card-btn {
  background: var(--bg-warm); border: 1px solid var(--border);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.76rem; cursor: pointer; color: var(--text-sec);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.mc-edit {
  width: auto; border-radius: var(--r-full);
  padding: 0 12px 0 10px; gap: 5px;
  border-color: #d4622a;
}
.mc-edit-label {
  font-family: var(--font-b); font-size: 0.72rem; font-weight: 600;
  color: var(--teal-deep);
}
.meal-card-btn:hover { background: var(--bg-warm); color: var(--text); }
.mc-delete:hover { color: var(--grade-e); background: rgba(208,48,48,0.08); }
/* Heart icon inside meal-name pill — consistent with dish-name pills in results */
.meal-card-heart {
  position: relative;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid #e05080;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.68rem; color: #e05080;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  cursor: pointer;
}
/* Enlarged invisible hit area — keeps the visual circle small but gives
   the favourite tap a generous, finger-friendly target so it doesn't get
   mistaken for the "open meal" tap on the rest of the pill. */
.meal-card-heart::after {
  content: '';
  position: absolute;
  top: -10px; bottom: -10px; left: -10px; right: -10px;
}
.meal-card-heart:hover { background: rgba(224,80,128,0.1); transform: scale(1.15); }
.meal-card-heart.is-faved { background: #e05080; color: #fff; border-color: #e05080; }
.meal-card-heart.is-faved:hover { background: #c8305e; }
.meal-card-dishes {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.meal-card-dish-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--teal-soft);
  border: 1.5px solid var(--teal);
  border-radius: var(--r-full);
  padding: 4px 8px 4px 12px;
  font-size: 0.76rem; color: var(--teal-deep); font-weight: 500;
  font-family: var(--font-b);
}
.mc-dish-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: none; border: none; padding: 0; margin: 0;
  font-size: 0.85rem; line-height: 1;
  color: var(--teal); cursor: pointer; border-radius: 50%;
  opacity: 0.65;
  transition: opacity 0.15s, background 0.15s;
}
.mc-dish-remove:hover { opacity: 1; background: rgba(26,127,140,0.15); }

/* Tab bar fav indicator */
#tabInsights.has-favs { color: #e05080; }

/* ── Favourite name-collision sheet ── */
.bottom-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.38);
  z-index: 200;
  display: flex; align-items: flex-end;
}
.fav-collision-sheet {
  width: 100%; background: var(--bg-card);
  border-radius: 22px 22px 0 0;
  padding: 24px 20px calc(32px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.fav-collision-sheet.open { transform: translateY(0); }
.fav-collision-title { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.fav-collision-sub { font-size: 0.82rem; color: var(--text-mut); margin-bottom: 20px; }
.fav-collision-btn {
  display: block; width: 100%;
  padding: 13px 16px; margin-bottom: 10px;
  border-radius: 12px; border: none;
  font-size: 0.92rem; font-weight: 500; cursor: pointer;
  text-align: center;
}
.fav-collision-update { background: var(--teal); color: #fff; }
.fav-collision-new    { background: var(--bg-chip); color: var(--text); }
.fav-collision-cancel { background: transparent; color: var(--text-mut); margin-bottom: 0; }

.meal-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.38);
  z-index: 98;
  opacity: 0;
  transition: opacity 0.28s;
}
.meal-sheet-overlay.open { opacity: 1; }

.meal-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  border-radius: 22px 22px 0 0;
  padding: 12px 20px calc(32px + env(safe-area-inset-bottom, 0px));
  z-index: 99;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 65vh;
  overflow-y: auto;
}
.meal-sheet.open { transform: translateY(0); }

.meal-sheet-handle {
  width: 38px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 18px;
}
.meal-sheet-header {
  display: flex; align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.meal-sheet-title {
  font-family: var(--font-d);
  font-size: 1.1rem; font-weight: 700;
  color: var(--text);
  flex: 1;
}
.meal-sheet-close {
  background: var(--bg-warm); border: none;
  border-radius: 50%; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sec); cursor: pointer; transition: background 0.15s;
  flex-shrink: 0;
}
.meal-sheet-close:hover { background: var(--border); }

.meal-sheet-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
  min-height: 36px;
}
.meal-sheet-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--teal-soft);
  border: 1.5px solid var(--teal);
  border-radius: var(--r-full);
  padding: 6px 10px 6px 14px;
  font-family: var(--font-b);
  font-size: 0.8rem; color: var(--teal-deep); font-weight: 500;
}
.meal-sheet-chip-remove {
  background: none; border: none;
  color: var(--teal); font-size: 1rem; line-height: 1;
  cursor: pointer; padding: 0 2px;
  opacity: 0.6; transition: opacity 0.15s, color 0.15s;
  display: flex; align-items: center;
}
.meal-sheet-chip-remove:hover { opacity: 1; color: var(--grade-e); }

/* ── URL Menu Scanner sheet ── */
.url-sheet-hint {
  font-size: 0.8rem; color: var(--text-sec);
  line-height: 1.5; margin: 0 0 16px;
}
.url-sheet-input-row {
  margin-bottom: 12px;
}
.url-sheet-input {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-family: var(--font-b); font-size: 0.85rem;
  background: var(--bg-card); color: var(--text);
  outline: none; transition: border-color 0.2s;
}
.url-sheet-input:focus { border-color: var(--teal); }
.url-sheet-scan-btn {
  width: 100%;
  background: var(--teal); color: #fff;
  border: none; border-radius: var(--r-md);
  padding: 13px 20px;
  font-family: var(--font-b); font-size: 0.9rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.2s;
}
.url-sheet-scan-btn:hover { background: var(--teal-deep); }

/* Meal sheet auto-totals */
.ms-totals {
  border-top: 1.5px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}
.ms-grades {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.ms-grade-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-b); font-size: 0.8rem; color: var(--text-sec);
}
.ms-grade-badge {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; font-weight: 800; color: #fff;
}
.ms-ga { background: var(--grade-a); }
.ms-gb { background: var(--grade-b); }
.ms-gc { background: var(--grade-c); }
.ms-gd { background: var(--grade-d); }
.ms-ge { background: var(--grade-e); }
.ms-grade-div {
  width: 1px; height: 24px;
  background: var(--border);
  margin: 0 4px;
}
.ms-stats {
  font-family: var(--font-b);
  font-size: 0.82rem; color: var(--text-sec);
  margin-bottom: 10px;
  line-height: 1.5;
}
.ms-ri-bar { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.ms-ri-chip { font-size: 0.68rem; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.ms-ri-red     { background: #FDE8E6; color: var(--grade-e); }
.ms-ri-amber   { background: #FFF5DD; color: #A67B0A; }
.ms-ri-neutral { background: var(--bg-warm); color: var(--text-mut); }
.ms-full-link {
  background: none; border: none;
  color: var(--teal); font-family: var(--font-b);
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ms-full-link:hover { color: var(--teal-deep); }

/* ── Responsive ────────────────────────── */
@media (max-width: 380px) {
  .hero-content h1 { font-size: 2.2rem; }
  .food-circ { width: 48px; height: 48px; }
  .action-card { padding: 14px 10px 12px; }
  .action-card-icon { width: 38px; height: 38px; }
  .action-card-title { font-size: 0.72rem; }
  .example-card { width: 115px; }
  .dv-stat-val { font-size: 0.9rem; }
  .dv-stats-row { padding: 6px 6px; }
  .dv-dial-wrap { padding: 2px 6px 2px; }
  .dv-header { padding: 12px 10px 8px; }
  .dv-badge { width: 30px; height: 30px; font-size: 16px; }
  .cmp-card { padding: 14px 12px; }
}

/* ══════════════════════════════════════════════
   EXPLORE DISHES SCREEN
   ══════════════════════════════════════════════ */

.explore-header {
  background:
    linear-gradient(to bottom, rgba(20,50,20,0.55) 0%, rgba(10,35,10,0.72) 100%),
    url('dishpics/lettuce2.jpg') center/cover no-repeat;
  padding: 52px 22px 24px;
  position: relative;
  flex-shrink: 0;
  border-radius: 0 0 28px 28px;
}
.explore-back {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(255,255,255,0.15); border: none;
  border-radius: 50%; width: 36px; height: 36px;
  color: #fff; cursor: pointer; font-size: 0.9rem;
  display: grid; place-items: center;
  transition: background 0.2s;
}
.explore-back:hover { background: rgba(255,255,255,0.25); }
.results-shortcut-btn {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--r-full);
  padding: 6px 12px 6px 10px;
  color: #fff; cursor: pointer;
  font-size: 0.72rem; font-weight: 600; font-family: var(--font-b);
  display: flex; align-items: center; gap: 6px;
  transition: background 0.2s;
  white-space: nowrap;
}
.results-shortcut-btn i { font-size: 0.65rem; }
.results-shortcut-btn:hover { background: rgba(255,255,255,0.28); }
.explore-title {
  font-family: var(--font-logo); font-weight: 700; font-size: 1.5rem;
  color: #fff; text-align: center;
  padding: 0 70px;
  word-break: break-word;
}
.explore-sub {
  font-size: 0.72rem; color: rgba(255,255,255,0.7);
  text-align: center; margin-top: 4px;
}

.explore-body {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}

.explore-filters {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.explore-filter-chip {
  background: var(--bg-warm); border: 1.5px solid var(--border);
  border-radius: var(--r-full); padding: 5px 12px;
  font-family: var(--font-b); font-size: 0.73rem;
  font-weight: 500; color: var(--text-sec);
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.explore-filter-chip.active {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.explore-filter-chip:hover:not(.active) { border-color: var(--teal); color: var(--teal); }

.explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 14px 14px 160px;
}
.explore-card {
  background: var(--bg-card); border: none;
  border-radius: var(--r-md); overflow: hidden;
  cursor: pointer; text-align: left;
  box-shadow: var(--sh-sm);
  transition: transform 0.18s, box-shadow 0.18s;
}
.explore-card:active { transform: scale(0.97); box-shadow: none; }
.explore-card-img {
  width: 100%; aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  background-color: var(--bg-warm);
  position: relative;
}
.explore-viewed-badge {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); color: #fff;
  font-size: 0.6rem;
  display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.explore-card-body { padding: 8px 10px 10px; }
.explore-card-name {
  font-family: var(--font-b); font-size: 0.78rem;
  font-weight: 600; color: var(--text); line-height: 1.3;
}
.explore-card.explored .explore-card-name { color: var(--teal); }

/* ── Explore: select circle on cards ────── */
.explore-sel-circle {
  position: absolute; top: 7px; right: 7px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 2px solid rgba(255,255,255,0.6);
  color: transparent;
  font-size: 0.65rem;
  display: grid; place-items: center;
  cursor: pointer;
  transition: all 0.18s;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.explore-sel-circle.sel-on {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.explore-card.sel {
  outline: 2.5px solid var(--teal);
  outline-offset: -2px;
}
.explore-card.sel .explore-card-name { color: var(--teal); }

/* ── Explore: analyse bar ────────────────── */
.explore-analyse-bar {
  position: fixed;
  /* Tab bar sits at bottom:16px and is ~75px tall (plus safe-area padding),
     so its top edge reaches ~91px above the screen bottom — clear that with
     a margin instead of the flat 76px that used to overlap it. */
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 444px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  background: #2c4a6e;
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--sh-lg);
  z-index: 300;
  animation: fadeUp 0.25s var(--ease);
}
.explore-analyse-label {
  font-family: var(--font-b); font-size: clamp(0.75rem, 2.5vw, 0.85rem);
  font-weight: 600; color: #fff;
  flex: 1 1 auto; min-width: 0;
}
.explore-analyse-btn {
  background: #fff; border: none;
  border-radius: var(--r-full);
  padding: 7px 12px;
  font-family: var(--font-b); font-size: clamp(0.75rem, 2.5vw, 0.82rem);
  font-weight: 700; color: #2c4a6e;
  cursor: pointer; display: flex; align-items: center; gap: 7px;
  transition: opacity 0.2s;
  flex-shrink: 0; white-space: nowrap;
}
.explore-analyse-btn:active { opacity: 0.8; }
/* ══════════════════════════════════════════════
   INFO / FAQ SCREEN
   ══════════════════════════════════════════════ */
.info-body {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  padding: 12px 14px 32px;
}
.info-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.info-q {
  width: 100%; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 16px;
  text-align: left; cursor: pointer;
  font-family: var(--font-s); font-size: 0.9rem;
  font-weight: 600; color: var(--teal);
  transition: background 0.18s;
}
.info-q:hover { background: rgba(26,127,140,0.06); }
.info-chevron {
  flex-shrink: 0; font-size: 0.8rem;
  color: var(--teal-deep); transition: transform 0.25s;
}
.info-item.open .info-chevron { transform: rotate(180deg); }
.info-a {
  display: none;
  padding: 0 16px 15px;
  font-size: 0.84rem; line-height: 1.65;
  color: var(--text-sub);
  border-top: 1px solid var(--border);
}
.info-item.open .info-a { display: block; }
.info-a p { margin: 10px 0 0; }
.info-a p:first-child { margin-top: 12px; }
.info-a ul { margin: 10px 0 0; padding-left: 18px; }
.info-a li { margin-bottom: 6px; }
.info-disclaimer {
  margin-top: 18px;
  font-size: 0.75rem; color: var(--text-muted);
  line-height: 1.5; text-align: center;
  padding: 0 8px;
}


/* ── MENU ALTS SAVE ROW ───────────────────────────────────────────────────── */
.menu-alts-save-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.menu-alts-save-row > i {
  font-size: 0.65rem; color: var(--text-sec); flex-shrink: 0;
}
.menu-alts-save-row #saveMenuTitle {
  flex: 1; font-size: 0.68rem; font-weight: 600;
  color: var(--text-sec); text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.menu-save-btn {
  background: none; border: none; padding: 0;
  color: var(--text-sec);
  width: 24px; height: 24px; min-width: 24px;
  display: grid; place-items: center;
  font-size: 0.8rem; cursor: pointer; flex-shrink: 0;
  transition: color 0.2s;
}
.menu-save-btn:hover { color: #e05080; }
.menu-save-btn.is-faved { color: #e05080; }

/* ── PROFILE SCREEN ───────────────────────────────────────────────────────── */
.profile-body { padding: 16px; padding-bottom: 100px; }

.profile-section { margin-bottom: 28px; }

/* ── Premium zone dividers — Goals through Spice Tolerance ─────────────── */
/* Thin line above My Goals (= below Allergies & Dietary Preferences) */
#goalsSectionHdr {
  padding-top: 20px;
  border-top: 1px solid #d8d8d8;
  margin-top: 4px;
}
/* Thin line below Spice Tolerance header row */
#spiceSectionHdr {
  padding-bottom: 20px;
  border-bottom: 1px solid #d8d8d8;
  margin-bottom: 4px;
}

/* ── Coming Soon locked state ───────────────────────────────────────────── */
.profile-section--locked {
  opacity: 0.62;
  pointer-events: none;
  user-select: none;
}
.premium-coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f0a500;
  background: rgba(240,165,0,0.10);
  border: 1px solid rgba(240,165,0,0.35);
  border-radius: 50px;
  padding: 3px 9px;
  white-space: nowrap;
  font-family: var(--font-b);
}
.premium-coming-badge i {
  font-size: 0.6rem;
}
.premium-teaser {
  font-size: 0.72rem;
  color: var(--text-mut, #aaa);
  font-style: italic;
  margin: 2px 0 0;
  line-height: 1.4;
}

.profile-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-sec);
  margin-bottom: 12px;
  width: 100%;
}
button.profile-section-hdr {
  background: none; border: none; cursor: pointer;
  padding: 0; font-family: var(--font-b);
  -webkit-tap-highlight-color: transparent;
}
.profile-faq-link {
  color: var(--teal-deep);
  opacity: 0.82;
}
.profile-faq-link:hover { opacity: 1; }
.profile-section-hdr-left {
  display: flex; align-items: center; gap: 10px;
}
.profile-section-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal-deep);
  font-size: 0.82rem;
  box-shadow: 0 1px 3px rgba(45, 90, 39, 0.15);
  transition: transform 0.22s var(--ease), background 0.18s ease, color 0.18s ease;
  transform: rotate(-90deg); /* points right = collapsed */
}
.profile-section-chevron--open {
  transform: rotate(0deg); /* points down = expanded */
}
/* Filled-in feedback when the header is hovered/pressed so it reads as a button */
button.profile-section-hdr:hover .profile-section-chevron {
  background: var(--teal-deep);
  color: #fff;
}
button.profile-section-hdr:active .profile-section-chevron--open {
  background: var(--teal-deep); color: #fff;
}

/* Subtle reminder list shown under the title when the allergy section is collapsed */
.profile-section-summary {
  margin: -6px 0 14px;
  padding-left: 24px; /* align under the title text, past the icon */
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-mut);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.profile-section-summary[hidden] { display: none; }
.allergy-summary-item { color: var(--text-sec); font-weight: 500; }
.allergy-summary-item--pref { color: var(--text-mut); font-weight: 400; }
.allergy-summary-sep { color: var(--text-mut); opacity: 0.55; margin: 0 2px; }

.profile-section-body {
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.profile-section-body--collapsed {
  display: none;
}

.profile-section-icon { font-size: 0.8rem; }
.profile-section-icon.fav-icon { color: #e05080; }
.profile-section-icon.cuisine-icon { color: #3a7d44; }
.profile-section-icon.spice-icon   { color: #c0392b; }
.profile-section-icon.health-icon  { color: #e05080; }
.profile-section-icon.goals-icon   { color: #f0a500; }
.cuisine-chip.active { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-deep); }
.spice-chip.active   { background: #fff0ee; border-color: #c0392b; color: #c0392b; }
.health-chip.active  { background: #fdeef3; border-color: #e05080; color: #c0366a; }
.cuisine-edit-row { margin-top: 10px; display: flex; justify-content: flex-end; }

/* ── MY GOALS drag-to-rank list ─────────────────────────────────────────── */
/* Goals active/inactive toggle in header */
.goals-toggle-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  margin-right: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.goals-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.goals-toggle-slider {
  position: relative;
  width: 36px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  transition: background 0.25s ease;
}
.goals-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.goals-toggle-input:checked + .goals-toggle-slider {
  background: #3a7d44;
}
.goals-toggle-input:checked + .goals-toggle-slider::after {
  transform: translateX(16px);
}
.goals-drag-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.goals-drag-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 180px;
  /* Glossy green pill */
  background: linear-gradient(
    160deg,
    #4caf6e 0%,
    #2d7a46 55%,
    #1e5c33 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 3px 7px rgba(30,92,51,0.32),
    0 1px 2px rgba(0,0,0,0.18);
  border: none;
  border-radius: 50px;
  padding: 7px 14px 7px 7px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: box-shadow 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}
.goals-drag-item:active { cursor: grabbing; }
.goals-drag-item--dragging {
  opacity: 0.4;
  box-shadow: none;
  transform: scale(0.97);
}
.goals-drag-item--over {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 0 0 2.5px #f0a500,
    0 4px 10px rgba(30,92,51,0.35);
}
/* Circled rank number */
.goals-drag-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  line-height: 1;
}
.goals-drag-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
/* Floating clone during touch drag */
.goals-drag-clone {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 8px 24px rgba(30,92,51,0.38);
  border-radius: 50px;
  background: linear-gradient(160deg, #4caf6e 0%, #2d7a46 55%, #1e5c33 100%);
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 180px;
  padding: 7px 14px 7px 7px;
}
.goals-hint {
  font-size: 0.72rem;
  color: var(--text-mut, #b0b0b0);
  margin: 8px 0 0;
  line-height: 1.4;
}
/* ✕ remove button on each active pill */
.goals-remove-btn {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  color: #fff;
  font-size: 0.6rem;
  line-height: 1;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.goals-remove-btn:hover { background: rgba(255,255,255,0.35); }
/* Inactive / dismissed goals row */
.goals-inactive-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-mut, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 12px 0 6px;
}
.goals-inactive-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.goals-inactive-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1.5px dashed #c0c0c0;
  border-radius: 50px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-mut, #aaa);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.goals-inactive-chip:hover {
  border-color: #3a7d44;
  color: #3a7d44;
}
.goals-inactive-add {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
}
.cuisine-edit-link {
  background: none; border: none; padding: 0;
  font-size: 0.75rem; color: var(--teal); text-decoration: underline;
  cursor: pointer;
}
.edit-inline-link {
  background: none; border: none; padding: 0 2px;
  font-size: 0.72rem; color: var(--teal); text-decoration: underline;
  cursor: pointer; align-self: center; white-space: nowrap;
}
.pref-action-row {
  display: flex; justify-content: flex-end; align-items: center;
  margin-top: 10px; gap: 12px;
}
.pref-done-btn {
  background: var(--teal); color: #fff; border: none;
  border-radius: 20px; padding: 5px 18px;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.pref-done-btn:active { opacity: 0.8; }
.profile-section-icon.saved-menu-icon { color: var(--teal); }
.profile-section-icon.rest-icon { color: var(--teal); }

/* ── RESTAURANT ROWS ──────────────────────────────────────────────────────── */
.rest-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
}

.rest-row-main {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
}

.rest-info {
  flex: 1; min-width: 0;
}

.rest-name {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rest-name-icon {
  font-size: 0.75rem; color: var(--teal); flex-shrink: 0;
}
.rest-name-icon-examples { color: var(--gold); }

.rest-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}

.rest-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 0.72rem; font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-sec);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}

.rest-dishes-pill:hover {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-deep);
}

.rest-favs-pill:hover {
  background: rgba(224,80,128,0.08);
  border-color: #e05080;
  color: #e05080;
}

.rest-favs-pill.active {
  background: rgba(224,80,128,0.10);
  border-color: #e05080;
  color: #e05080;
}

.rest-meals-pill:hover {
  background: rgba(213,130,30,0.10);
  border-color: #d5821e;
  color: #b36a10;
}

.rest-meals-pill.active {
  background: rgba(213,130,30,0.12);
  border-color: #d5821e;
  color: #b36a10;
}

.rest-pill-icon { font-size: 0.65rem; margin-right: 4px; }

.rest-actions {
  display: flex; gap: 8px; flex-shrink: 0;
}

/* ── EXPANDED FAVOURITES / MEALS BODY ────────────────────────────────────── */
.rest-favs-body {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 4px 14px 4px 0;
}

.rest-meal-info { flex: 1; min-width: 0; }

.rest-meal-title {
  font-weight: 600; font-size: 0.88rem;
  color: var(--text); margin-bottom: 6px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.rest-meal-title:hover { color: var(--teal); }

.rest-meal-arrow {
  font-size: 0.6rem; color: var(--teal); opacity: 0.7;
}

.rest-meal-dish-list {
  display: flex; flex-direction: column; gap: 4px;
}

.rest-meal-dish-row {
  display: flex; align-items: center; gap: 6px;
}

.rest-meal-dish-name {
  font-size: 0.78rem; color: var(--text-sec);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rest-meal-dish-fav {
  background: none; border: none; padding: 2px 4px;
  font-size: 0.78rem; cursor: pointer;
  color: var(--border); transition: color 0.2s;
  flex-shrink: 0;
}
.rest-meal-dish-fav:hover { color: #e05080; }
.rest-meal-dish-fav.is-faved { color: #e05080; }

.fav-item.fav-item-indented {
  padding-left: 40px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.fav-item.fav-item-indented .fav-item-name {
  font-size: 0.875rem; font-weight: 500;
}
.fav-item.fav-item-indented:last-child { border-bottom: none; }

/* ── FAV LIST items ───────────────────────────────────────────────────────── */
.fav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.fav-item:last-child { border-bottom: none; }
.fav-item-info { flex: 1; min-width: 0; }
.fav-item-tappable {
  cursor: pointer; border-radius: var(--r-md);
  padding: 2px 6px 2px 0; margin: -2px 0;
  transition: color 0.15s;
}
.fav-item-tappable:hover .fav-item-name { color: var(--teal); }
.fav-item-name {
  font-weight: 600; font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-item-date { font-size: 0.72rem; color: var(--text-sec); margin-top: 2px; }
.fav-item-actions { display: flex; gap: 8px; flex-shrink: 0; }
.fav-remove-btn, .fav-edit-btn, .fav-rename-btn {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 50%; width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 0.72rem; cursor: pointer; transition: all 0.2s;
}
.fav-edit-btn:hover, .fav-rename-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.fav-remove-btn:hover { border-color: #e05080; color: #e05080; background: rgba(224,80,128,0.08); }
.saved-menu-rename-input {
  width: 100%; font-size: 0.95rem; font-weight: 600;
  border: none; border-bottom: 2px solid var(--teal);
  background: transparent; outline: none; padding: 0;
  color: var(--text-main); font-family: var(--font-d);
}

/* ── FAV EMPTY STATE ──────────────────────────────────────────────────────── */
.fav-empty {
  text-align: center; padding: 36px 24px;
  background: var(--bg-card); border-radius: var(--r-lg);
  border: 1px dashed var(--border);
}
.fav-empty-icon { font-size: 2rem; color: var(--border); display: block; margin-bottom: 12px; }
.fav-empty-text { font-size: 1rem; font-weight: 600; color: var(--text-sec); margin-bottom: 6px; }
.fav-empty-sub { font-size: 0.82rem; color: var(--text-sec); line-height: 1.5; }

/* ── ALLERGY & DIETARY PREFERENCES — PROFILE SECTION ─────────────────────── */
.profile-section-icon.allergy-icon { color: #c0392b; }

.allergy-subsection { margin-bottom: 16px; }

.allergy-subsection-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-mut);
  margin-bottom: 10px;
}

.allergy-chip-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}

.allergy-chip {
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 0.8rem; font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--bg-card); color: var(--text-sec);
  cursor: pointer; transition: all 0.18s;
  font-family: var(--font-b);
}
.allergy-chip:active { transform: scale(0.96); }

.allergen-chip.active {
  background: #fff0ee; border-color: #c0392b; color: #c0392b;
}
.pref-chip.active {
  background: var(--teal-soft); border-color: var(--teal); color: var(--teal-deep);
}
.serving-context-chip.active {
  background: var(--teal); border-color: var(--teal); color: #fff;
}

.allergy-disclaimer {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fffbf0; border: 1px solid #f0d070;
  border-radius: var(--r-md); padding: 12px 14px;
  margin-top: 4px;
}
.allergy-disclaimer-icon {
  color: #c08000; font-size: 0.85rem; flex-shrink: 0; margin-top: 1px;
}
.allergy-disclaimer span {
  font-size: 0.60rem; line-height: 1.4; color: #6b5000;
}

/* ── ALLERGEN WARNING ROW — RESULTS SCREEN ────────────────────────────────── */
#allergenWarningRow { margin: 12px 16px 0; }

.aw-pill-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}

.aw-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--r-full);
  font-size: 0.8rem; font-weight: 700;
  border: none; cursor: pointer;
  font-family: var(--font-b);
  transition: opacity 0.15s, transform 0.12s;
}
.aw-pill:active { transform: scale(0.97); }

.aw-pill-allergen {
  background: #c0392b; color: #fff;
}
.aw-pill-allergen:hover { opacity: 0.88; }
.aw-pill-allergen.aw-pill-active {
  background: #fff; color: #c0392b;
  box-shadow: inset 0 0 0 2px #c0392b;
}

.aw-pill-pref {
  background: #8a7a00; color: #fff;
}
.aw-pill-pref:hover { opacity: 0.88; }
.aw-pill-pref.aw-pill-active {
  background: #fff; color: #8a7a00;
  box-shadow: inset 0 0 0 2px #8a7a00;
}

/* ── INGREDIENT ALLERGEN & PREFERENCE BADGES ──────────────────────────────── */
.ing-item-flagged {
  background: #fff8f7;
  border-left: 3px solid #c0392b !important;
  padding-left: 9px;
}
.ing-item-pref {
  background: #fffbf0;
  border-left: 3px solid #8a7a00 !important;
  padding-left: 9px;
}

.ing-allergen-badge, .ing-pref-badge, .ing-nutri-badge {
  display: inline-block;
  margin-left: 7px; padding: 1px 8px;
  border-radius: var(--r-full);
  font-size: 0.65rem; font-weight: 700;
  vertical-align: middle;
}
.ing-allergen-badge { background: #c0392b; color: #fff; }
.ing-pref-badge     { background: #8a7a00; color: #fff; }

/* Nutrition Watch Out badges — distinct from allergen (safety) and pref (olive)
   so severity reads at a glance without competing with those higher-priority flags */
.ing-nutri-badge      { background: #fde8e6; color: #b3261e; }
.ing-nutri-badge.ing-nutri-med { background: #fef3e2; color: #b45309; }

.ing-item-nutriflag-high {
  background: #fffaf9;
  border-left: 3px solid #e0574a !important;
  padding-left: 9px;
}
.ing-item-nutriflag-med {
  background: #fffbf5;
  border-left: 3px solid #d97706 !important;
  padding-left: 9px;
}

/* Processed meat badge (WHO/IARC Group 1) — distinct dark-red tone so it
   reads as a hazard-classification flag rather than an RI-threshold badge
   like .ing-nutri-badge, while still sitting below allergen/pref severity. */
.ing-item-processed-meat {
  background: #fff8f7;
  border-left: 3px solid #8a1f1f !important;
  padding-left: 9px;
}
.ing-processed-meat-badge {
  display: inline-block;
  margin-left: 7px; padding: 1px 8px;
  border-radius: var(--r-full);
  font-size: 0.65rem; font-weight: 700;
  vertical-align: middle;
  background: #8a1f1f; color: #fff;
}

/* ── EXPLORE SCREEN — PREFERENCE CONFLICT BADGE ───────────────────────────── */
.explore-card.pref-conflict .explore-card-img {
  opacity: 0.72;
}
.explore-card.pref-conflict .explore-card-name {
  color: var(--text-mut);
}

.explore-pref-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%; width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 0.85rem; color: #c0392b;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ── RESTAURANT CARDS (compact, tappable) ──────────────────────────────────── */
.rest-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.rest-card:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}
.rest-card:active { transform: scale(0.98); }

.rest-card-icon {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: var(--teal-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.rest-card-icon i { font-size: 0.95rem; color: var(--teal); }
.rest-card-icon.rest-card-icon-examples { background: #f5f7ea; }
.rest-card-icon.rest-card-icon-examples i { color: var(--gold); }

.rest-card-info { flex: 1; min-width: 0; }

.rest-card-name {
  font-weight: 700; font-size: 0.95rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rest-card-meta {
  display: flex; gap: 12px; margin-top: 4px;
}
.rest-card-stat {
  font-size: 0.72rem; color: var(--text-mut);
  display: flex; align-items: center; gap: 4px;
}
.rest-card-stat i { font-size: 0.6rem; }
.rest-card-stat-favs i { color: #e05080; }
.rest-card-stat-meals i { color: var(--earth); }

.rest-card-chevron {
  font-size: 0.75rem; color: var(--text-mut); flex-shrink: 0;
}

/* ── RESTAURANT DETAIL SCREEN ──────────────────────────────────────────────── */
.rest-detail-body {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 100px;
}

.rest-detail-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.rest-detail-hero-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--teal-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.rest-detail-hero-icon i { font-size: 1.1rem; color: var(--teal); }
.rest-detail-hero-info { flex: 1; min-width: 0; }
.rest-detail-hero-name {
  font-family: var(--font-d); font-size: 1.15rem; color: var(--text);
}
.rest-detail-hero-stats {
  display: flex; gap: 14px; margin-top: 4px;
}
.rest-detail-hero-stat {
  font-size: 0.75rem; color: var(--text-mut);
  display: flex; align-items: center; gap: 4px;
}
.rest-detail-hero-stat i { font-size: 0.6rem; }
.rest-detail-hero-actions {
  display: flex; gap: 8px; flex-shrink: 0;
}

.rest-detail-load-btn {
  width: 100%; padding: 12px;
  background: var(--teal); color: #fff; border: none;
  border-radius: var(--r-sm);
  font-family: var(--font-b); font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.2s;
  margin-bottom: 16px;
}
.rest-detail-load-btn:hover { background: var(--teal-deep); }

/* Tabs */
.rest-detail-tabs {
  display: flex; gap: 0;
  margin-bottom: 16px;
  border-bottom: 1.5px solid var(--border);
}
.rest-detail-tab {
  flex: 1; padding: 10px 0; text-align: center;
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-mut); cursor: pointer;
  border: none; background: none;
  font-family: var(--font-b);
  position: relative; transition: color 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.rest-detail-tab i { font-size: 0.7rem; }
.rest-detail-tab.active { color: var(--teal); }
.rest-detail-tab.active i { color: var(--teal); }
.rest-detail-tab.active::after {
  content: ''; position: absolute;
  bottom: -1.5px; left: 10%; width: 80%;
  height: 2.5px; background: var(--teal); border-radius: 2px;
}
.rest-detail-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full);
  font-size: 0.65rem; font-weight: 700;
}
.rest-detail-tab.active .rest-detail-badge {
  background: var(--teal-soft); color: var(--teal-deep);
}
.rest-detail-tab:not(.active) .rest-detail-badge {
  background: var(--bg); color: var(--text-mut);
}

.rest-detail-panel { display: none; }
.rest-detail-panel.active { display: block; }

/* Dish row inside detail */
.rd-dish-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.rd-dish-row:last-child { border-bottom: none; }
.rd-dish-name {
  flex: 1; font-weight: 500; font-size: 0.9rem; color: var(--text);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.rd-dish-name:hover { color: var(--teal); }

/* Meal card inside detail */
.rd-meal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rd-meal-card-body { flex: 1; min-width: 0; }
.rd-meal-card:hover { border-color: var(--teal); }
.rd-meal-card-name {
  font-weight: 600; font-size: 0.9rem; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.rd-meal-card-name i { font-size: 0.6rem; color: var(--teal); opacity: 0.7; }
.rd-meal-card-dishes {
  margin-top: 6px; font-size: 0.78rem;
  color: var(--text-mut); line-height: 1.5;
}
/* ── Android keyboard: scroll search input into view ── */
body.keyboard-open .search-zone {
  position: sticky;
  top: 0;
  z-index: 10;
}
/* ══════════════════════════════════════════════
   SAFE AREA INSETS — Android notch / punch-hole
   Uses env(safe-area-inset-top) which Android
   Chrome honours when viewport-fit=cover is set.
   Falls back to 0px on devices without a cutout,
   so this never breaks the web or iPhone layouts.
   ══════════════════════════════════════════════ */

/* Results screen — sticky top bar */
.top-bar {
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
}

/* All explore-style headers: Favourites, Profile, FAQ,
   Explore, Meal, Restaurant Detail screens */
.explore-header {
  padding-top: calc(52px + env(safe-area-inset-top, 0px));
}

/* Back arrow and Results button are absolutely positioned
   relative to explore-header — shift them down too */
.explore-back,
.results-shortcut-btn {
  top: calc(16px + env(safe-area-inset-top, 0px));
}

/* Home screen hero — logo row sits at the very top */
.hero-banner {
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
}

/* ── About Screen ── */
.about-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px 16px;
  background: var(--teal-deep);
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.about-mascot {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid rgba(255,255,255,0.2);
  margin-bottom: 12px;
}
.about-intro-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  max-width: 320px;
  margin-bottom: 14px;
}
.about-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(109,182,68,0.18);
  border: 1px solid rgba(109,182,68,0.35);
  color: var(--grade-b);
  border-radius: var(--r-full);
  padding: 5px 14px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.about-grade-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 16px;
}
.about-grade-badge {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
}
.about-grade-label {
  font-size: 0.78rem;
  color: var(--text-mut);
  font-style: italic;
  text-align: center;
  width: 100%;
  margin-top: 4px;
}
.about-section-label {
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.about-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 6px;
}
.about-feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 12px;
}
.about-feature-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--teal-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--teal);
  margin-bottom: 10px;
}
.about-feature-title {
  font-family: var(--font-d);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
  line-height: 1.25;
}
.about-feature-desc {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-sec);
}
.about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.about-pillar {
  border-radius: var(--r-md);
  padding: 18px 14px;
}
.about-pillar--nutrition { background: var(--teal-deep); }
.about-pillar--planet    { background: #1a3a2a; }
.about-pillar-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 10px;
  color: var(--grade-b);
}
.about-pillar-title {
  font-family: var(--font-d);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.2;
}
.about-pillar-body {
  font-size: 0.76rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.65);
  margin-bottom: 12px;
}
.about-pillar-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.about-pillar-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
}
.about-pillar-list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--grade-b);
  flex-shrink: 0;
}
.about-science-bar {
  background: var(--teal-deep);
  border-radius: var(--r-md);
  padding: 20px 16px;
  text-align: center;
  margin-bottom: 16px;
}
.about-science-title {
  font-family: var(--font-d);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.about-science-body {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  margin-bottom: 14px;
}
.about-science-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.about-science-tag {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-full);
  padding: 5px 12px;
  font-size: 0.73rem;
  font-weight: 500;
}
.about-audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.about-audience-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 12px;
  text-align: center;
}
.about-audience-emoji { font-size: 1.6rem; display: block; margin-bottom: 7px; }
.about-audience-title {
  font-family: var(--font-d);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.about-audience-desc { font-size: 0.74rem; color: var(--text-sec); line-height: 1.45; }
.about-restaurant-cta {
  text-align: center;
  margin-bottom: 20px;
}
.about-restaurant-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-deep);
  color: var(--text-inv);
  text-decoration: none;
  border-radius: var(--r-full);
  padding: 12px 26px;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 0.85rem;
}
.about-restaurant-cta-btn:active { background: var(--teal); }
.about-data-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-mut);
  line-height: 1.7;
  padding: 8px 0 4px;
}
.about-data-footer a {
  color: var(--teal);
  text-decoration: none;
}

/* ── Profile: About / FAQ sub-links ── */
.profile-about-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 8px;
}
.profile-about-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-d);
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
.profile-about-link:hover { background: var(--border); }
.profile-about-link > i:first-child { color: var(--teal); font-size: 1rem; flex-shrink: 0; }
.profile-about-link > span { flex: 1; }
.profile-about-link-ext { color: var(--text-mut); font-size: 0.75rem; flex-shrink: 0; }

/* ── My Recipe sheet ── */
.recipe-sheet {
  max-height: 82vh;
}
.recipe-sheet-section {
  margin-bottom: 4px;
}
.recipe-sheet-name-section {
  margin-bottom: 16px;
}
.recipe-sheet-name-optional {
  font-weight: 400;
  color: var(--text-sec);
  font-size: 0.78rem;
}
.recipe-sheet-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--card-bg);
  outline: none;
  margin-top: 4px;
}
.recipe-sheet-name-input:focus {
  border-color: var(--teal);
}
.recipe-sheet-section-label {
  font-family: var(--font-b);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.recipe-sheet-hint {
  font-size: 0.78rem;
  color: var(--text-sec);
  line-height: 1.45;
  margin-bottom: 12px;
}
.recipe-snap-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.recipe-snap-header-text {
  flex: 1;
  min-width: 0;
}
.recipe-snap-header-text .recipe-sheet-hint {
  margin-bottom: 0;
}
.recipe-sheet-cam-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 0;
}
.recipe-snap-page-hint {
  font-size: 0.72rem;
  color: var(--text-sec);
  margin-bottom: 10px;
}
.recipe-sheet-cam-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  padding: 10px 20px;
  font-family: var(--font-b);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.recipe-sheet-cam-btn:hover { opacity: 0.88; }
.recipe-sheet-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal-soft);
  color: var(--teal-deep);
  border: 1.5px solid var(--teal);
  border-radius: var(--r-full);
  padding: 9px 16px;
  font-family: var(--font-b);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.recipe-sheet-add-btn:hover { background: var(--border); }
.recipe-snap-ing-list {
  background: var(--bg-warm);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.recipe-snap-ing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-b);
  font-size: 0.8rem;
  color: var(--text-sec);
  margin-bottom: 8px;
}
.recipe-snap-clear {
  background: none;
  border: none;
  color: var(--teal);
  font-family: var(--font-b);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
}
.recipe-snap-ing-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recipe-snap-ing-chip {
  background: var(--teal-soft);
  border: 1px solid var(--teal);
  border-radius: var(--r-full);
  padding: 4px 10px;
  font-family: var(--font-b);
  font-size: 0.75rem;
  color: var(--teal-deep);
}
.recipe-sheet-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-warm);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-family: var(--font-d);
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
  resize: vertical;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.15s;
}
.recipe-sheet-textarea:focus { border-color: var(--teal); }
.recipe-sheet-submit-btn {
  width: 100%;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  padding: 13px 20px;
  font-family: var(--font-b);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.recipe-sheet-submit-btn:hover { opacity: 0.88; }

/* ── Add Ingredient sheet ── */
.add-ing-sheet { max-height: 70vh; }

.add-ing-search-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 12px;
}
.add-ing-search-input {
  flex: 1; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 0.9rem; font-family: var(--font); color: var(--text);
  background: var(--card-bg); outline: none;
}
.add-ing-search-input:focus { border-color: var(--teal); }
.add-ing-search-btn {
  flex-shrink: 0; width: 42px; height: 42px;
  border-radius: 10px; border: none; cursor: pointer;
  background: var(--teal); color: #fff; font-size: 0.9rem;
}
.add-ing-results {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px; max-height: 220px; overflow-y: auto;
}
.add-ing-result-item {
  padding: 9px 14px; border-radius: 20px;
  border: none; cursor: pointer;
  font-size: 0.82rem; color: var(--text);
  background: rgba(0,0,0,0.05);
  transition: background 0.15s, color 0.15s;
}
.add-ing-result-item:hover  { background: rgba(0,0,0,0.09); }
.add-ing-result-item.selected {
  background: var(--teal); color: #fff;
}
.add-ing-result-none {
  font-size: 0.82rem; color: var(--text-sec); padding: 8px 4px; text-align: center;
}
.add-ing-weight-row {
  display: flex; align-items: center; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.add-ing-selected-name {
  flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 600;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.add-ing-weight-field {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.add-ing-weight-input {
  width: 60px; padding: 8px 6px; text-align: right;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 0.9rem; font-weight: 600; font-family: var(--font);
  color: var(--text); background: var(--card-bg); outline: none;
}
.add-ing-weight-input:focus { border-color: var(--teal); }
.add-ing-weight-unit {
  font-size: 0.82rem; color: var(--text-sec); font-weight: 600;
}
.add-ing-confirm-btn {
  flex-shrink: 0; padding: 9px 16px;
  background: var(--teal); color: #fff; border: none; border-radius: 10px;
  font-size: 0.85rem; font-weight: 600; font-family: var(--font); cursor: pointer;
}
.add-ing-confirm-btn:hover { opacity: 0.88; }
.ing-add-row {
  padding: 12px 0 4px; display: flex; justify-content: flex-end;
}
.ing-add-btn {
  background: #4fa8c5; border: none; border-radius: 20px;
  padding: 8px 16px; cursor: pointer;
  font-size: 0.78rem; font-weight: 600; color: #fff; font-family: var(--font);
  display: flex; align-items: center; gap: 6px;
  transition: opacity 0.15s;
}
.ing-add-btn:hover { opacity: 0.85; }

.recipe-sheet-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--text-mut);
  font-size: 0.78rem;
}
.recipe-sheet-divider::before,
.recipe-sheet-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.recipe-sheet-divider span {
  flex-shrink: 0;
}

/* ── Planet Optimization Tips ── */
.opt-tip {
  margin: 16px 0 8px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid #b6ddb6;
  background: #f4fbf4;
}
.opt-tip-header {
  font-weight: 700;
  font-size: 0.92rem;
  color: #2a6e2a;
  margin-bottom: 8px;
}
.opt-tip-header i { margin-right: 6px; color: #3a9a3a; }
.opt-tip-body {
  font-size: 0.84rem;
  color: #444;
  margin-bottom: 12px;
  line-height: 1.45;
}
.opt-tip-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.opt-tip-select { min-width: 0; }
.opt-tip-compare-btn { flex-shrink: 0; }
.opt-tip-select {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid #ccc;
  font-size: 0.82rem;
  background: #fff;
  appearance: auto;
}
.opt-tip-compare-btn {
  padding: 8px 18px;
  border-radius: 10px;
  border: none;
  background: #3a7d44;
  color: #fff;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  white-space: nowrap;
}
.opt-tip-compare-btn:disabled { opacity: 0.5; }
.opt-tip-preview { margin-top: 12px; }
.opt-tip-preview-card {
  padding: 12px 14px;
  border-radius: 12px;
  background: #eaf7ea;
  border: 1px solid #c4e4c4;
}
.opt-tip-preview-title {
  font-weight: 600;
  font-size: 0.84rem;
  color: #333;
  margin-bottom: 6px;
}
.opt-tip-dim { color: #888; font-weight: 400; }
.opt-tip-saving {
  font-size: 0.82rem;
  color: #2a6e2a;
  margin-bottom: 4px;
}
.opt-tip-tradeoff {
  font-size: 0.82rem;
  color: #b07020;
  margin-bottom: 8px;
}
.opt-tip-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.opt-tip-confirm {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: none;
  background: #3a7d44;
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}
.opt-tip-cancel {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: 1.5px solid #ccc;
  background: #fff;
  color: #666;
  font-weight: 500;
  font-size: 0.88rem;
  cursor: pointer;
}
.opt-tip-error {
  font-size: 0.82rem;
  color: #c44;
  padding: 8px;
}

/* Guru hint tappable link */
.guru-hint-link {
  display: inline-block;
  margin-top: 4px;
  color: #2a6e2a;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
/* ── Snap chooser & plate match sheets ─────────────────────────────────── */
.snap-chooser-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 0 0 10px 0;
  padding: 13px 20px;
}
.plate-match-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px 0;
  padding: 12px 16px;
  background: var(--card, #fff);
  color: var(--text, #222);
  border: 1.5px solid var(--teal);
  border-radius: 14px;
  font-family: var(--font-b);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.plate-match-btn i { color: var(--teal); }
.plate-match-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Camera icon on dish cards — snap a photo of THIS dish (explicit intent
   replaces AI-side matching, which confused visually similar dishes). */
.ds-card-cam {
  position: absolute; bottom: 5px; right: 5px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--teal, #2e7d5b);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; color: var(--teal, #2e7d5b);
  transition: background 0.15s, color 0.15s, transform 0.15s;
  cursor: pointer; z-index: 2;
}
.ds-card-cam:hover { background: var(--teal, #2e7d5b); color: #fff; transform: scale(1.12); }

/* Prominent camera invite — shown when the card only has a generic
   placeholder image: larger, bottom-centre, clearly asking for a real snap. */
.ds-card-cam--invite {
  width: 32px; height: 32px;
  font-size: 0.8rem;
  right: auto; left: 50%; bottom: 6px;
  transform: translateX(-50%);
  border-width: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.ds-card-cam--invite:hover { transform: translateX(-50%) scale(1.12); }

/* Plate confirm sheet: editable-name affordance + re-check awareness */
.plate-name-wrap { position: relative; }
.plate-name-wrap .recipe-sheet-name-input { width: 100%; padding-right: 38px; box-sizing: border-box; }
.plate-name-pen {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--teal, #2e7d5b);
  font-size: 0.82rem;
  pointer-events: none;
  opacity: 0.75;
}
.plate-recheck-hint { color: var(--teal, #2e7d5b); margin-top: 6px; font-weight: 600; }

/* ═══════════════════════════════════════════
   SHARED VIEW — recipient landing on a ?shared= link.
   Showcase layout: the dish is the hero, session-editing
   controls are hidden, plus a try-ChuGuru CTA and a discreet
   report link (UGC compliance). Gated on body.shared-view so
   dish re-renders keep the mode without extra JS.
   ═══════════════════════════════════════════ */
body.shared-view .top-bar,
body.shared-view #topCompareSec,
body.shared-view #addAnotherRecipeBtn,
body.shared-view #fallbackActionRow,
body.shared-view .cmp-section,
body.shared-view .res-section-label,
body.shared-view .ds-sel-circle,
body.shared-view .tab-bar { display: none !important; }

/* The bottom tab bar is hidden in shared view — recipients are steered to
   the about page instead of the web app's own navigation — so the extra
   bottom padding reserved for the floating bar isn't needed here. */
body.shared-view .results-body {
  padding-bottom: 28px;
}

/* The sticky top-bar (dish name / serving badge / share button) is hidden in
   shared view, so give the scroll body its safe-area breathing room back —
   the slim CTA line becomes the first thing on the page. */
body.shared-view .results-body {
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

/* Feature the dish: a 300×200 (3:2) hero card centred in the row — wider
   than the little strip card but not so wide the crop gets awkward, with
   the image height kept at 200px. */
body.shared-view .dish-switcher-cards .ds-card {
  width: min(300px, 100%);
  margin-inline: auto;
}
body.shared-view .ds-card-img-wrap { height: 200px; }
body.shared-view .ds-nav-arrow { top: 100px; }
/* Re-share pill (label bar, far right) is JS-gated to shared-view already;
   this display rule is belt-and-braces in case markup lingers after an
   exit. Label bar gets right-hand breathing room so the dish name wraps
   before it, never under, the pinned pill. */
body.shared-view .ds-card-share { display: inline-flex; }
body.shared-view .ds-card-label { padding-right: 74px; }
/* Small caption under the dish card — recipient-facing only, tells them
   the ingredients (and photo) are theirs to change before re-sharing. */
.shared-edit-hint {
  display: none;
  text-align: center;
  font-family: var(--font-b);
  font-size: 0.66rem;
  color: var(--text-sec);
  padding: 2px 32px 4px;
  line-height: 1.35;
}
/* The strip's edge-fade hint would visibly dim the borders of a card this
   wide, so drop it in shared view. */
body.shared-view .dish-switcher-cards {
  -webkit-mask-image: none;
  mask-image: none;
}

/* CTA line — slim single-line banner at the very top of the shared page,
   standing in for the hidden top-bar. */
.shared-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--teal-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-full, 999px);
  padding: 6px 8px;
  margin: 0 0 12px;
}
.shared-cta-img {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.shared-cta-text {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text-sec);
  line-height: 1.25;
}
.shared-cta-btn {
  flex-shrink: 0;
  background: var(--teal);
  color: var(--text-inv);
  border: 0;
  border-radius: 999px;
  padding: 7px 13px;
  font-family: var(--font-b);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.shared-cta-btn:active { background: var(--teal-deep); }

/* Discreet report row — the extra bottom margin keeps the expanded form
   clear of the floating tab bar, which overlays the end of results-body. */
.shared-report-row {
  margin: 20px 0 96px;
  text-align: center;
}
.shared-report-link {
  background: none;
  border: 0;
  color: var(--text-mut);
  font-family: var(--font-b);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 6px 10px;
}
.shared-report-link:hover { color: var(--text-sec); }
.shared-report-form {
  max-width: 420px;
  margin: 8px auto 0;
  text-align: left;
}
.shared-report-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-family: var(--font-b);
  font-size: 0.85rem;
  color: var(--text);
  background: var(--bg-card);
  resize: vertical;
}
.shared-report-form textarea:focus { outline: none; border-color: var(--border-focus); }
.shared-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.shared-report-cancel {
  background: none;
  border: 0;
  color: var(--text-mut);
  font-family: var(--font-b);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 8px 12px;
}
.shared-report-send {
  background: var(--text-sec);
  color: var(--text-inv);
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-b);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.shared-report-send:disabled { opacity: 0.6; }

/* ══════════════════════════════════════════════
   RESTAURANT GUIDE — map-free v1
   ══════════════════════════════════════════════ */

/* Home entry card (lives inside #quickActionsSection) */
.rest-guide-entry {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 12px 16px;
  margin-top: -12px;      /* tighten against action-row's 26px bottom margin */
  margin-bottom: 26px;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.rest-guide-entry:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); border-color: transparent; }
.rest-guide-entry:active { transform: scale(0.98); }
.rest-guide-entry-icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--ocean-soft); color: var(--ocean);
  font-size: 1.05rem;
}
.rest-guide-entry-title { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.rest-guide-entry-sub { font-size: 0.68rem; color: var(--text-mut); line-height: 1.35; }
.rest-guide-entry-chev { margin-left: auto; color: var(--text-mut); font-size: 0.8rem; }

/* Guide screen */
/* Bottom padding must clear the floating tab bar (top edge ≈ 99px + inset
   above the screen bottom), or the guide's last links hide behind it. */
.rest-guide-body { width: 100%; padding: 18px 16px calc(130px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto; }
.rg-profile-note {
  font-size: 0.78rem; color: var(--text-sec);
  background: var(--flame-soft);
  border-radius: 12px;
  padding: 10px 14px; margin-bottom: 16px; line-height: 1.5;
}
.rg-profile-note i { color: var(--flame); margin-right: 6px; }
.rg-profile-note--empty { background: var(--bg-warm); }
.rg-profile-note a { color: var(--flame-deep); font-weight: 700; }

/* 'rg-card' not 'rest-card' — the latter is taken by favourites/history cards */
.rg-card {
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-mut);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.rg-card--match { border-left-color: var(--grade-a); }
.rg-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.rg-card-name { font-size: 0.92rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.rg-card-meta { font-size: 0.7rem; color: var(--text-mut); margin-top: 2px; text-transform: capitalize; }
.rg-badge {
  flex-shrink: 0; font-size: 0.66rem; font-weight: 800; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px;
}
.rg-badge--safe { background: var(--flame-soft); color: var(--flame-deep); }
.rg-badge--none { background: var(--bg-warm); color: var(--text-mut); }
.rg-badge--tag  { background: var(--sage-soft); color: var(--sage); }

.rg-card-addr {
  font-size: 0.7rem; color: var(--text-mut);
  margin: -4px 0 8px;
}
.rg-card-addr i { margin-right: 4px; }
.rg-card-web {
  font-size: 0.7rem; color: var(--text-mut);
  margin: -4px 0 8px;
}
.rg-card-web i { margin-right: 4px; }
.rg-card-web a { color: var(--sage); font-weight: 600; text-decoration: none; }
.rg-card-allergens {
  font-size: 0.7rem; color: var(--text-sec); line-height: 1.5;
  margin: -2px 0 8px;
}
.rg-card-allergens i { margin-right: 4px; color: var(--sage); }
.rg-al-mine { color: var(--flame-deep); }
.rg-menuless {
  font-size: 0.74rem; color: var(--text-sec);
  background: var(--bg-warm); border-radius: 8px;
  padding: 8px 10px; line-height: 1.45;
}

/* Collapsible menu tab — dish lists (up to 40+ rows) sit behind this,
   collapsed by default so long menus don't stretch the guide */
.rg-menu-toggle {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: var(--bg-warm); border: none; border-radius: 8px;
  padding: 8px 12px; margin: 0;
  font-family: inherit; font-size: 0.74rem; font-weight: 700;
  color: var(--text-sec); text-align: left; cursor: pointer;
}
.rg-menu-toggle--open { border-radius: 8px 8px 0 0; }
.rg-menu-warn { color: var(--grade-e); }
.rg-menu-chev { margin-left: auto; transition: transform 0.25s ease; color: var(--text-mut); }
.rg-menu-toggle--open .rg-menu-chev { transform: rotate(180deg); }
/* 0fr→1fr grid rows animate the expand smoothly whatever the menu length */
.rg-menu-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.rg-menu-body--open { grid-template-rows: 1fr; }
.rg-menu-inner { overflow: hidden; min-height: 0; padding: 0 2px; }

.rg-dish-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
}
.rg-menu-inner .rg-dish-row:first-child { border-top: none; }
.rg-dish-name { font-weight: 600; color: var(--text-sec); margin-right: auto; }
.rg-chip {
  font-size: 0.62rem; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; white-space: nowrap;
}
.rg-chip--safe { background: var(--flame-soft); color: var(--flame-deep); }
.rg-chip--allergen { background: #fdeceb; color: var(--grade-e); }
.rg-chip--pref { background: var(--gold-soft); color: var(--gold); }
.rg-card-sample-note {
  font-size: 0.64rem; color: var(--text-mut); font-style: italic;
  margin-top: 8px; text-align: right;
}
.rg-empty { text-align: center; color: var(--text-mut); font-size: 0.85rem; padding: 30px 0; }

/* Map layer.
   width:100% is load-bearing: .screen is a column flexbox and the auto
   margins disable align-items:stretch, so without it this wrap collapses
   to 0 width and the map canvas renders as a thin vertical line. */
.rest-guide-map-wrap {
  width: 100%; padding: 16px 16px 0; max-width: 560px; margin: 0 auto;
  position: relative; /* anchors the Show all overlay button */
}
/* Pulsing "you are around here" glow — soft on purpose (no crisp pin: the
   position is coarsened to ~1 km). Pure CSS animation on a DOM marker, so
   the map itself never repaints for it. */
.rg-user-pulse {
  width: 46px; height: 46px;
  position: relative; pointer-events: none;
}
.rg-user-pulse::before,
.rg-user-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
}
.rg-user-pulse::before {
  background: radial-gradient(circle,
    rgba(42, 111, 219, 0.55) 0%,
    rgba(42, 111, 219, 0.25) 45%,
    rgba(42, 111, 219, 0) 70%);
  animation: rg-user-glow 2.6s ease-in-out infinite;
}
.rg-user-pulse::after {
  border: 2px solid rgba(42, 111, 219, 0.5);
  animation: rg-user-ring 2.6s ease-out infinite;
}
@keyframes rg-user-glow {
  0%, 100% { transform: scale(0.85); opacity: 0.75; }
  50%      { transform: scale(1);    opacity: 1; }
}
@keyframes rg-user-ring {
  0%        { transform: scale(0.45); opacity: 0.8; }
  75%, 100% { transform: scale(1.3);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-user-pulse::before, .rg-user-pulse::after { animation: none; }
  .rg-user-pulse::after { display: none; }
}

.rg-showall {
  position: absolute; top: 26px; left: 26px; z-index: 5;
  background: var(--bg-card); color: var(--text-sec);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; font-size: 0.7rem; font-weight: 700;
  box-shadow: var(--sh-md); cursor: pointer;
}
.rg-showall:hover { color: var(--flame-deep); }
.rg-showall i { margin-right: 4px; }
#rgMap {
  height: 260px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
}
.rg-locate-btn {
  display: block; width: 100%;
  background: var(--flame); color: #fff;
  border: none; border-radius: 12px;
  padding: 11px 16px; margin-bottom: 16px;
  font-size: 0.82rem; font-weight: 700;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.rg-locate-btn:hover { background: var(--flame-deep); }
.rg-locate-btn:disabled { opacity: 0.7; cursor: default; }
.rg-locate-btn i { margin-right: 6px; }
.rg-locate-done {
  font-size: 0.74rem; font-weight: 700; color: var(--flame-deep);
  margin-bottom: 14px; padding-left: 2px;
}
.rg-manual-hint {
  font-size: 0.68rem; color: var(--text-mut);
  text-align: center; margin: -8px 0 14px;
}
.rg-manual-hint a { color: var(--flame-deep); font-weight: 700; }
.rg-manual-row { display: flex; gap: 8px; margin-bottom: 14px; }
.rg-manual-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font-size: 0.82rem;
  background: var(--bg-card); color: var(--text);
}
.rg-manual-input:focus { outline: none; border-color: var(--border-focus); }
.rg-manual-btn {
  background: var(--flame); color: #fff;
  border: none; border-radius: 10px;
  padding: 9px 16px; font-size: 0.82rem; font-weight: 700;
  cursor: pointer;
}
.rg-manual-btn:hover { background: var(--flame-deep); }
.rg-manual-btn:disabled { opacity: 0.7; cursor: default; }
.rg-locate-done i { margin-right: 5px; }
.rg-locate-done a { color: inherit; text-decoration: underline; }
.rg-dist { font-weight: 800; color: var(--flame-deep); }
.rg-status {
  font-size: 0.74rem; color: var(--text-sec);
  background: var(--bg-warm); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 14px;
}
.rg-filter-note {
  font-size: 0.72rem; color: var(--text-mut);
  margin-bottom: 12px; padding-left: 2px;
}
.rg-filter-note a { color: var(--flame-deep); font-weight: 700; }
.rg-owner-cta {
  text-align: center;
  margin: 26px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.rg-owner-cta-text {
  font-size: 0.78rem; color: var(--text-sec);
  line-height: 1.5; margin-bottom: 12px;
}
.home-owner-cta {
  text-align: center;
  margin: 16px 0 4px;
}
.home-owner-cta-text {
  font-size: 0.78rem; color: var(--text-sec);
  line-height: 1.5; margin-bottom: 10px;
}