/*
  Keto Scanner styles
  Mobile-first design — laid out for a 375px-wide iPhone first.
*/

:root {
  --font-display: "Baloo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --color-bg: #f8f4e9;
  --color-surface: #ffffff;
  --color-text: #2b332c;
  --color-text-muted: #66705f;
  /* Darkened from #7a8480 (~3.9:1 on white — failed WCAG AA) to ~4.9:1 so the
     small captions that use it (macro numbers, scan dates, field hints,
     placeholders) clear the 4.5:1 bar for body-size text. Every use sits on a
     light surface, so the darker grey-green is a safe global lift. */
  --color-text-subtle: #8b9283;
  --color-primary: #1a8754;
  --color-primary-dark: #11402a;
  --color-buy: #1a8754;
  --color-healthy: #6f5aa8;
  /* Darkened from #d4a017 (~2.4:1 on white — failed WCAG AA) to ~4.9:1 so the
     CAUTION verdict and the small history badge are legible. Both uses are
     gold text on a light surface. */
  --color-caution: #8a6d00;
  --color-avoid: #c94f3d;
  --color-border: #e6dfc9;
  --color-divider: #eee7d3;

  /* Feedback & status surfaces — notes, banners, errors and small UI
     chrome, tokenised so the palette stays consistent across the app. */
  --color-note-bg: #fffaf0;
  --color-note-border: #f0d896;
  --color-note-text: #6b5320;
  --color-note-info-bg: #f3eccd;
  --color-note-info-border: #ddd6c2;
  --color-note-info-text: #11402a;
  --color-warning-bg: #fff8e6;
  --color-warning-border: #f0c040;
  --color-warning-text: #6b4c00;
  --color-error-bg: #fff4f3;
  --color-error-border: #f5c6c1;
  --color-toast-bg: rgba(20, 30, 25, 0.92);
  --color-confirm-bg: #eaf4ec;
  --color-confirm-border: #1a8754;
  --color-confirm-text: #146b43;
  --color-switch-track-off: #d1d6d3;
  --color-switch-thumb: #ffffff;
  --color-star-empty: #cfd8d1;
  --color-star-full: #f0b429;

  --color-heading: var(--color-primary-dark);
  --color-action: var(--color-primary);
  --color-action-text: #ffffff;
  --color-action-active: var(--color-primary-dark);
  --color-action-shadow: rgba(26, 135, 84, 0.35);
  --color-header-bg: rgba(248, 244, 233, 0.94);
  --color-header-border: rgba(221, 214, 194, 0.7);
  --color-header-icon-bg: #ffffff;
  --color-header-icon-text: var(--color-primary-dark);
  --color-dock-bg: var(--color-primary-dark);
  --color-dock-border: transparent;
  --color-dock-shadow: rgba(17, 64, 42, 0.28);
  --color-result-footer-bg: color-mix(in srgb, var(--color-bg) 94%, transparent);
  --color-result-footer-shadow: rgba(17, 64, 42, 0.08);
  --color-cado-bubble-bg: var(--color-surface);
  --color-cado-bubble-border: var(--color-border);
  --color-assistant-bubble-bg: var(--color-note-info-bg);
  --color-assistant-bubble-border: var(--color-note-info-border);
  --color-assistant-bubble-text: var(--color-primary-dark);
  --color-net-stat-bg: #f3eccd;
  --color-net-stat-text: var(--color-primary-dark);
  --color-net-stat-label: rgba(17, 64, 42, 0.68);
  --color-verdict-buy-start: #28a86d;
  --color-verdict-buy-mid: var(--color-buy);
  --color-verdict-buy-end: #126c42;
  --color-verdict-healthy-start: #8a75c3;
  --color-verdict-healthy-mid: var(--color-healthy);
  --color-verdict-healthy-end: #51417f;
  --color-verdict-caution-start: #f0be4c;
  --color-verdict-caution-mid: #d9971e;
  --color-verdict-caution-end: #9b6711;
  --color-verdict-avoid-start: #e06b58;
  --color-verdict-avoid-mid: var(--color-avoid);
  --color-verdict-avoid-end: #983528;
  --color-placeholder-a: #efe8d4;
  --color-placeholder-b: #f5efdf;

  --radius: 14px;
  --shadow: 0 4px 14px rgba(17, 64, 42, 0.06);
  --shadow-overlay: 0 -8px 32px rgba(0, 0, 0, 0.16);

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  --overlay-top-gap: calc(env(safe-area-inset-top, 0px) + 20px);

  /* Sunken surface — image placeholders and inset wells. */
  --color-surface-sunken: #f3efe0;
  /* Skeleton shimmer highlight that sweeps across the sunken base. */
  --skeleton-shine: #fffaf0;
}

/* ===================================================================
   DARK THEME
   Applied automatically when the device is in dark mode, and forced by
   the Appearance setting via .theme-dark / .theme-light on <html>.

   'auto' is handled purely by this media query — no inline <script> sets
   a class on first paint (the Content-Security-Policy forbids inline
   scripts), so the media query is what keeps the first paint flash-free.

   The token list is duplicated for the media-query (system) and the
   forced-dark selector; keep the two blocks in sync. The brand green
   (--color-primary), the toast, switch thumb and star-full are left at
   their light values on purpose — the header and primary buttons stay
   green with white text in both themes. */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --color-bg: #131a14;
    --color-surface: #1d2620;
    --color-surface-sunken: #161d17;
    --skeleton-shine: #2b3327;
    --color-text: #f3eccd;
    --color-text-muted: #9aa694;
    --color-text-subtle: #8d987f;
    --color-buy: #2fca82;
    --color-caution: #e6b53f;
    --color-avoid: #e8675a;
    --color-healthy: #9b84d6;
    --color-border: #2f3b31;
    --color-divider: #2f3b31;
    --color-note-bg: #272211;
    --color-note-border: #574718;
    --color-note-text: #e7d6a4;
    --color-note-info-bg: #15261a;
    --color-note-info-border: #2d5036;
    --color-note-info-text: #bce0c5;
    --color-warning-bg: #2a2310;
    --color-warning-border: #5c4917;
    --color-warning-text: #efd699;
    --color-error-bg: #2d1715;
    --color-error-border: #693933;
    --color-switch-track-off: #3a453c;
    --color-star-empty: #3e483e;
    --color-heading: #f3eccd;
    --color-action: #2fca82;
    --color-action-text: #0c2417;
    --color-action-active: #26ad70;
    --color-action-shadow: rgba(47, 202, 130, 0.3);
    --color-header-bg: rgba(19, 26, 20, 0.94);
    --color-header-border: #2f3b31;
    --color-header-icon-bg: #1d2620;
    --color-header-icon-text: #9aa694;
    --color-dock-bg: #222c24;
    --color-dock-border: #334034;
    --color-dock-shadow: rgba(0, 0, 0, 0.45);
    --color-result-footer-bg: #1a221c;
    --color-result-footer-shadow: rgba(0, 0, 0, 0.35);
    --color-cado-bubble-bg: #2b3327;
    --color-cado-bubble-border: #3a4536;
    --color-assistant-bubble-bg: #2b3327;
    --color-assistant-bubble-border: #3a4536;
    --color-assistant-bubble-text: #f0ead2;
    --color-net-stat-bg: #15261a;
    --color-net-stat-text: #2fca82;
    --color-net-stat-label: #8d987f;
    --color-verdict-buy-start: #1f8a58;
    --color-verdict-buy-mid: #166f49;
    --color-verdict-buy-end: #135f3d;
    --color-verdict-healthy-start: #7865b7;
    --color-verdict-healthy-mid: #6a55a8;
    --color-verdict-healthy-end: #47386d;
    --color-verdict-caution-start: #d9a642;
    --color-verdict-caution-mid: #a87316;
    --color-verdict-caution-end: #705013;
    --color-verdict-avoid-start: #c95749;
    --color-verdict-avoid-mid: #a94137;
    --color-verdict-avoid-end: #732a22;
    --color-placeholder-a: #232d25;
    --color-placeholder-b: #1a221c;
    --color-confirm-bg: #15291d;
    --color-confirm-border: #2fca82;
    --color-confirm-text: #2fca82;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-overlay: 0 -8px 32px rgba(0, 0, 0, 0.55);
  }
}

:root.theme-dark {
  --color-bg: #131a14;
  --color-surface: #1d2620;
  --color-surface-sunken: #161d17;
  --skeleton-shine: #2b3327;
  --color-text: #f3eccd;
  --color-text-muted: #9aa694;
  --color-text-subtle: #8d987f;
  --color-buy: #2fca82;
  --color-caution: #e6b53f;
  --color-avoid: #e8675a;
  --color-healthy: #9b84d6;
  --color-border: #2f3b31;
  --color-divider: #2f3b31;
  --color-note-bg: #272211;
  --color-note-border: #574718;
  --color-note-text: #e7d6a4;
  --color-note-info-bg: #15261a;
  --color-note-info-border: #2d5036;
  --color-note-info-text: #bce0c5;
  --color-warning-bg: #2a2310;
  --color-warning-border: #5c4917;
  --color-warning-text: #efd699;
  --color-error-bg: #2d1715;
  --color-error-border: #693933;
  --color-switch-track-off: #3a453c;
  --color-star-empty: #3e483e;
  --color-heading: #f3eccd;
  --color-action: #2fca82;
  --color-action-text: #0c2417;
  --color-action-active: #26ad70;
  --color-action-shadow: rgba(47, 202, 130, 0.3);
  --color-header-bg: rgba(19, 26, 20, 0.94);
  --color-header-border: #2f3b31;
  --color-header-icon-bg: #1d2620;
  --color-header-icon-text: #9aa694;
  --color-dock-bg: #222c24;
  --color-dock-border: #334034;
  --color-dock-shadow: rgba(0, 0, 0, 0.45);
  --color-result-footer-bg: #1a221c;
  --color-result-footer-shadow: rgba(0, 0, 0, 0.35);
  --color-cado-bubble-bg: #2b3327;
  --color-cado-bubble-border: #3a4536;
  --color-assistant-bubble-bg: #2b3327;
  --color-assistant-bubble-border: #3a4536;
  --color-assistant-bubble-text: #f0ead2;
  --color-net-stat-bg: #15261a;
  --color-net-stat-text: #2fca82;
  --color-net-stat-label: #8d987f;
  --color-verdict-buy-start: #1f8a58;
  --color-verdict-buy-mid: #166f49;
  --color-verdict-buy-end: #135f3d;
  --color-verdict-healthy-start: #7865b7;
  --color-verdict-healthy-mid: #6a55a8;
  --color-verdict-healthy-end: #47386d;
  --color-verdict-caution-start: #d9a642;
  --color-verdict-caution-mid: #a87316;
  --color-verdict-caution-end: #705013;
  --color-verdict-avoid-start: #c95749;
  --color-verdict-avoid-mid: #a94137;
  --color-verdict-avoid-end: #732a22;
  --color-placeholder-a: #232d25;
  --color-placeholder-b: #1a221c;
  --color-confirm-bg: #15291d;
  --color-confirm-border: #2fca82;
  --color-confirm-text: #2fca82;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-overlay: 0 -8px 32px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: light;
  font-size: 16px;
}

:root.theme-dark { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) { color-scheme: dark; }
}

body {
  font-family: var(--font-ui);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hidden { display: none !important; }

/* Visible to assistive tech only — kept in the accessibility tree but off
   screen. Used for the live region that announces verdicts and the like. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Back-navigation slide — the page you return to eases in from the left, so a
   swipe/back reads as "going back" instead of an instant jump. */
@keyframes nav-slide-back {
  from { transform: translateX(-40px); opacity: 0.25; }
  to   { transform: translateX(0); opacity: 1; }
}

.nav-slide-back {
  animation: nav-slide-back 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Compact header: safe-area + a small gap, title right below the status bar.
   Sticky so the back button + gear stay reachable on every screen, even when
   the page scrolls. */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-header-bg);
  color: var(--color-heading);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--space-md) 10px;
  text-align: center;
  border-bottom: 1px solid var(--color-header-border);
  backdrop-filter: blur(14px);
}

header h1 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

header .tagline {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted);
  opacity: 1;
  margin-top: 4px;
}

/* Gear aligned with the title line */
.header-settings-button {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-sm) - 2px);
  right: var(--space-md);
  background: var(--color-header-icon-bg);
  color: var(--color-header-icon-text);
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  -webkit-tap-highlight-color: transparent;
}

/* Global back button — mirror of the gear, pinned top-left */
.header-back-button {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-sm) - 2px);
  left: var(--space-md);
  background: var(--color-header-icon-bg);
  color: var(--color-header-icon-text);
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}

.header-back-button.hidden { display: none !important; }

.header-back-button:active {
  background-color: var(--color-bg);
  transform: none;
}

.back-svg {
  width: 24px;
  height: 24px;
  display: block;
}

.header-settings-button:active {
  background-color: var(--color-bg);
  transform: none;
}

.header-settings-button .gear-svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Small bottom padding on main — the footer owns the safe-area inset */
main {
  flex: 1;
  padding: var(--space-md) var(--space-md) calc(112px + env(safe-area-inset-bottom, 0px));
  transition: padding-bottom 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

/* Reserve extra clearance while a toast is visible so it never lands on top
   of static content sitting just above a sticky footer/tab dock (e.g. the
   result screen's quick-action row). Clearing the footer alone isn't
   enough — the toast's own height needs genuinely empty space to sit in. */
body.toast-open main {
  padding-bottom: calc(112px + 64px + env(safe-area-inset-bottom, 0px));
}

.capture-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  flex: 1;
  padding-bottom: 0;
}

body:has(.capture-section:not(.hidden)) header {
  display: none;
}

body:has(.capture-section:not(.hidden)) main {
  padding-top: calc(env(safe-area-inset-top, 0px) + 26px);
  gap: 20px;
}

body:has(.capture-section:not(.hidden)) .capture-buttons {
  display: none;
}

.home-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-topbar__avatar {
  flex: none;
  width: 56px;
  height: 56px;
}

.home-topbar__copy {
  flex: 1;
  min-width: 0;
}

.home-topbar__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--color-heading);
}

.home-topbar__prompt {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
}

.home-settings-button {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--color-header-icon-bg);
  border: 1px solid var(--color-border);
  color: var(--color-header-icon-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.home-settings-button .gear-svg {
  width: 21px;
  height: 21px;
}

.home-settings-button:active {
  transform: none;
  background-color: var(--color-bg);
}

.home-hero {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 18px;
  padding: var(--space-md);
  box-shadow: var(--shadow);
}

.home-hero__avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}

.home-hero__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-hero__eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-primary);
}

.home-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--color-heading);
}

.home-hero__hint {
  margin: 2px 0 0;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-muted);
}

/* =====================================================================
   HOME ROWS — recent scans, saved recipes, chat entry
   ===================================================================== */

.home-rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.home-row__title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--color-heading);
  letter-spacing: 0;
  line-height: 1.1;
}

.home-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.home-row__see-all {
  flex: none;
  background: none;
  border: none;
  padding: 4px;
  margin: -4px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-action);
  cursor: pointer;
}

.home-row__see-all:active { opacity: 0.6; }

.home-row__scroller {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.home-row__scroller::-webkit-scrollbar { display: none; }

.home-empty {
  appearance: none;
  flex: 1;
  width: 100%;
  background-color: transparent;
  border: 1px dashed var(--color-border);
  border-radius: 14px;
  padding: var(--space-md);
  min-height: 72px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-text-subtle);
  text-align: center;
}

.scan-card {
  position: relative;
  flex: 0 0 148px;
  scroll-snap-align: start;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.scan-card__thumb {
  width: 100%;
  height: 84px;
  object-fit: cover;
  display: block;
  background: repeating-linear-gradient(45deg, var(--color-placeholder-a) 0 10px, var(--color-placeholder-b) 10px 20px);
}

.scan-card__body {
  padding: 28px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.scan-card__verdict {
  position: absolute;
  left: 10px;
  top: 74px;
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-primary-dark);
}

.scan-card__verdict.buy { background-color: var(--color-buy); }
.scan-card__verdict.healthy { background-color: var(--color-healthy); color: #221545; }
.scan-card__verdict.caution { background-color: #e0a72e; color: #3d2e05; }
.scan-card__verdict.avoid { background-color: var(--color-avoid); color: #ffffff; }

.scan-card__name {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scan-card__date {
  font-size: 0.72rem;
  color: var(--color-text-subtle);
}

.cookbook-card {
  flex: 0 0 148px;
  scroll-snap-align: start;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.cookbook-card__img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  display: block;
  background: repeating-linear-gradient(45deg, var(--color-placeholder-a) 0 10px, var(--color-placeholder-b) 10px 20px);
  opacity: 0;
  transition: opacity 0.2s;
}

.cookbook-card__img--loaded { opacity: 1; }

.cookbook-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cookbook-card__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cookbook-card__meta {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
}

.chat-history-card {
  flex: 0 0 210px;
  scroll-snap-align: start;
  min-height: 118px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  cursor: pointer;
}

.chat-history-card:active { background-color: var(--color-bg); }

.chat-history-card--list {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 0;
}

.chat-history-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-history-card__excerpt {
  color: var(--color-text-muted);
  font-size: 0.83rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-history-card__meta {
  margin-top: auto;
  color: var(--color-text-subtle);
  font-size: 0.72rem;
}

/* Saved recipes — the full, date-grouped gallery behind "See all". */
.saved-recipes-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.saved-recipes-group {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  margin-top: var(--space-md);
}

.saved-recipes-group:first-child { margin-top: 0; }

.saved-recipe-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  text-align: left;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.saved-recipe-card:active { opacity: 0.8; }

.saved-recipe-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background-color: var(--color-surface-sunken);
  opacity: 0;
  transition: opacity 0.2s;
}

.saved-recipe-card__img--loaded { opacity: 1; }

.saved-recipe-card__body {
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.saved-recipe-card__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.saved-recipe-card__meta {
  font-size: 0.72rem;
  color: var(--color-text-subtle);
}

/* Recent scans — the full, date-grouped page behind "See all".
   Reuses the .saved-recipes-list / .saved-recipes-group layout. */
.scan-list-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  text-align: left;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.scan-list-card:active { background-color: var(--color-bg); }

.scan-list-card__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background-color: var(--color-surface-sunken);
}

.scan-list-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.scan-list-card__verdict {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.scan-list-card__verdict.buy { color: var(--color-buy); }
.scan-list-card__verdict.healthy { color: var(--color-healthy); }
.scan-list-card__verdict.caution { color: var(--color-caution); }
.scan-list-card__verdict.avoid { color: var(--color-avoid); }

.scan-list-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.scan-list-card__date {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
}

/* =====================================================================
   SHOPPING LIST — home-row preview cards, the list switcher tabs, and the
   checkable items on the full screen.
   ===================================================================== */

/* Home row preview card (mirrors .cookbook-card). */
.shop-card {
  flex: 0 0 168px;
  scroll-snap-align: start;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.shop-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-card__meta {
  font-size: 0.72rem;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* List switcher — horizontally scrollable pill tabs. */
.shop-tabs {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-bottom: var(--space-md);
}

.shop-tabs::-webkit-scrollbar { display: none; }

.shop-tab {
  flex: 0 0 auto;
  max-width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 500;
}

.shop-tab--active {
  background-color: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-text);
}

.shop-tab--new {
  border-style: dashed;
  color: var(--color-text-subtle);
}

.shop-active {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.shop-list-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.shop-list-name {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 4px 2px;
  outline: none;
}

.shop-list-name:focus { border-bottom-color: var(--color-primary); }

.shop-delete {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-avoid);
}

.shop-delete svg {
  width: 26px;
  height: 26px;
}

.shop-delete.armed {
  background-color: var(--color-avoid);
  border-color: var(--color-avoid);
  color: #ffffff;
}

.shop-progress {
  margin: -6px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.shop-add-row {
  display: flex;
  gap: var(--space-sm);
}

.shop-add-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  outline: none;
}

.shop-add-input:focus { border-color: var(--color-primary); }
.shop-add-input::placeholder { color: var(--color-text-subtle); }

.shop-add-btn {
  flex-shrink: 0;
  width: 52px;
  font-size: 1.1rem;
  padding: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.shop-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px var(--space-md);
  cursor: pointer;
}

.shop-item__check {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
}

.shop-item__name {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 500;
  word-break: break-word;
}

.shop-item--checked {
  background-color: var(--color-bg);
}

.shop-item--checked .shop-item__name {
  text-decoration: line-through;
  color: var(--color-text-subtle);
  font-weight: 400;
}

.shop-item__remove {
  flex: none;
  background: none;
  border: none;
  color: var(--color-text-subtle);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px 6px;
}

.shop-item__remove:active { color: var(--color-avoid); }

/* Item preview inside Cado's "add to shopping list" confirm card. */
.chat-action__items {
  flex-basis: 100%;
  margin: 0 0 2px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Empty hints double as low-friction tap targets for their next action. */
.home-empty--tappable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-empty--tappable::after {
  content: "›";
  display: inline-block;
  margin-left: 6px;
  color: var(--color-action);
  font-size: 1.05rem;
  line-height: 1;
  vertical-align: -0.03em;
}

.home-empty--tappable:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-action) 38%, transparent);
  outline-offset: 3px;
  border-color: var(--color-action);
}

.home-empty--tappable:active {
  background-color: var(--color-bg);
  opacity: 0.8;
}

.cado-idle-popup {
  align-self: flex-start;
  max-width: 100%;
  background-color: var(--color-note-info-bg);
  border: 1px solid var(--color-note-info-border);
  border-radius: var(--radius);
  color: var(--color-note-info-text);
  font-size: 0.85rem;
  padding: var(--space-xs) var(--space-sm);
}

.cado-idle-popup__text {
  display: block;
}

body:has(#chat-section:not(.hidden)) .cado-fab,
body:has(#chat-section:not(.hidden)) .cado-idle-popup {
  display: none;
}

.chat-entry {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  text-align: left;
  padding: var(--space-md);
}

.chat-entry:active { background-color: var(--color-bg); }

.cado-avatar {
  width: 46px;
  height: 46px;
  flex: none;
}

.chat-entry__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-entry__title {
  font-size: 1rem;
  font-weight: 600;
}

.chat-entry__detail {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.chat-chips {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.chat-chip {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 500;
}

.chat-chip:active { background-color: var(--color-bg); }

/* Cado's verdict reaction — emotive avatar + typed speech bubble */
.cado-verdict {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cado-avatar--verdict {
  width: 56px;
  height: 56px;
  flex: none;
}

.cado-verdict__bubble {
  position: relative;
  flex: 1;
  background-color: var(--color-cado-bubble-bg);
  border: 1px solid var(--color-cado-bubble-border);
  border-radius: 14px;
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cado-verdict__bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 12px;
  height: 12px;
  background-color: var(--color-cado-bubble-bg);
  border-left: 1px solid var(--color-cado-bubble-border);
  border-bottom: 1px solid var(--color-cado-bubble-border);
  transform: translateY(-50%) rotate(45deg);
}

#cado-verdict-text {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

#cado-verdict-text::after {
  content: "▍";
  color: var(--color-primary);
  animation: cado-caret 0.9s steps(1) infinite;
}

.cado-verdict.done #cado-verdict-text::after {
  content: "";
  animation: none;
}

@keyframes cado-caret {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.cado-avatar--header {
  width: 42px;
  height: 42px;
}

.chat-header__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat-header__name {
  text-align: left;
  line-height: 1.15;
}

.chat-header__tag {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.today-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.today-block.hidden { display: none !important; }

.today-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
  min-height: 132px;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.today-strip:active {
  background-color: var(--color-bg);
  transform: none;
}

.today-strip__caret {
  display: none;
  font-size: 0.7rem;
  color: var(--color-text-subtle);
  transition: transform 0.2s ease;
}

.today-strip[aria-expanded="true"] .today-strip__caret {
  transform: rotate(180deg);
}

.today-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.today-ring {
  position: relative;
  flex: none;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}

.today-ring__svg {
  position: absolute;
  inset: 0;
  width: 84px;
  height: 84px;
  transform: rotate(-90deg);
}

.today-ring__track,
.today-ring__progress {
  fill: none;
  stroke-width: 9;
}

.today-ring__track {
  stroke: var(--color-divider);
}

.today-ring__progress {
  stroke: var(--color-action);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
}

.today-ring__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.today-ring__text strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-heading);
}

.today-ring__text small {
  margin-top: 2px;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--color-text-muted);
}

.today-strip__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.today-strip__copy strong {
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.15;
  color: var(--color-heading);
}

#today-strip-text {
  color: var(--color-text-muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.home-access-status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: -8px;
  padding: 7px 11px;
  border: 1px solid var(--color-note-info-border);
  border-radius: 999px;
  background-color: var(--color-note-info-bg);
  color: var(--color-note-info-text);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.home-access-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-primary);
  flex: none;
}

.home-access-status.hidden { display: none !important; }

.home-access-status--low {
  border-color: var(--color-warning-border);
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.home-access-status--empty {
  border-color: var(--color-error-border);
  background-color: var(--color-error-bg);
  color: var(--color-avoid);
}

.home-access-status--low::before,
.home-access-status--empty::before {
  background-color: currentColor;
}

.today-macro-line {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--color-divider);
  margin-top: 2px;
}

.today-macro-line i {
  display: block;
  height: 100%;
}

.today-macro-line__fat { width: 62%; background-color: #e0992f; }
.today-macro-line__protein { width: 22%; background-color: #4f8bef; }
.today-macro-line__carbs { width: 16%; background-color: #c0563f; }

.home-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.home-chip-row::-webkit-scrollbar { display: none; }

.home-chip {
  flex: none;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.84rem;
  font-weight: 800;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.home-chip--cado {
  background-color: #f3eccd;
  color: var(--color-primary-dark);
  border-color: #ddd6c2;
}

.home-chip .cado-avatar {
  width: 24px;
  height: 24px;
}

.home-chip:active {
  transform: none;
  background-color: var(--color-bg);
}

.home-chip--cado:active {
  background-color: #eee4bd;
}

.today-list.hidden { display: none !important; }

.today-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
}

.today-item__name {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-item__macros {
  flex: none;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.today-item__delete {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-text-subtle);
  font-size: 0.9rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.today-item__delete:active {
  background-color: var(--color-bg);
  color: var(--color-avoid);
  transform: none;
}

#verified-line {
  font-size: 0.8rem;
  color: var(--color-primary);
  font-weight: 600;
}

/* Ingredients-haul checklist — log only what you actually ate */
.haul-prompt {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.haul-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.haul-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px var(--space-md);
  cursor: pointer;
}

.haul-item:has(input:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-bg);
}

.haul-item input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.haul-item__name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
}

.haul-item__macros {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Geo prefill banner */
.geo-banner {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.geo-banner__text {
  font-size: 0.9rem;
  color: var(--color-text);
}

.geo-banner__actions {
  display: flex;
  gap: var(--space-sm);
}

.geo-banner__actions button {
  flex: 1;
  padding: var(--space-sm);
  font-size: 0.9rem;
}

/* End-of-trial screen */
#trial-end-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.trial-end__line {
  font-size: 0.95rem;
  font-weight: 500;
}

.trial-end__text {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* Settings: profile + store configuration.
   The card itself has no padding (action buttons bleed full-width), so
   everything else placed directly in a card gets inset side margins. */
.settings-card > .settings-field,
.settings-card > .settings-grid,
.settings-card > .store-options,
.settings-card > .geo-banner {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}

.settings-card > :last-child:not(.settings-card__action) {
  margin-bottom: var(--space-md);
}

/* The Account card nests its inputs in #account-signin, one level below
   the rule above — inset that block to match the rest of the card. */
#account-signin {
  margin: 0 var(--space-md) var(--space-sm);
}

/* "Sign in with Google" button (rendered by Google Identity Services) and
   the labelled divider that separates it from the email-code login below. */
.account-google {
  display: flex;
  justify-content: center;
  margin-top: var(--space-sm);
}

.account-or {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.account-or::before,
.account-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-sm);
}

.settings-field__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.settings-field__hint {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text-subtle);
}

/* Keto strictness — a 3-step segmented scale */
.strictness-scale {
  display: flex;
  gap: 6px;
  margin: 0 var(--space-md) var(--space-xs);
}

.strictness-option {
  flex: 1;
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.strictness-option.selected {
  background-color: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-text);
}

.strictness-option:active { transform: none; }

.strictness-desc {
  margin: 0 var(--space-md) var(--space-md);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-subtle);
}
.strictness-desc:empty { display: none; }

/* Consent overlay — analytics toggle row inside the card */
.consent-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  text-align: left;
  margin: var(--space-sm) 0 var(--space-xs);
  font-size: 0.92rem;
  font-weight: 500;
}

.consent-toggle-label { flex: 1; }

/* FAQ section */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.faq-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.faq-item__q {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.faq-item__a {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.settings-field select,
.settings-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.95rem;
  appearance: none;
  -webkit-appearance: none;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-sm);
}

/* The layout targets a 375px iPhone. On narrower phones (older/compact
   Androids, ~320–360px) the two profile columns squeeze the selects so
   their longer option labels clip — reflow to a single column there. */
@media (max-width: 360px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .capture-buttons {
    flex-direction: column;
  }

  .bottom-nav {
    width: calc(100% - 18px);
    grid-template-columns: 1fr 1fr 58px 1fr 1fr;
    padding-inline: 10px;
  }

  .bottom-nav__scan {
    width: 58px;
    height: 58px;
  }
}

.store-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.store-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.store-pill span {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  font-size: 0.85rem;
  font-weight: 500;
}

.store-pill input:checked + span {
  background-color: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-text);
}

.capture-buttons {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
  margin-top: 0;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
}

/* =====================================================================
   FOOD CHAT SCREEN
   ===================================================================== */

#chat-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-md);
  overflow: hidden;
  margin: var(--space-sm) 0 var(--space-md);
}

.chat-anchor {
  width: 100%;
}

#chat-section.chat-section--inline-result {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

/* Standalone Cado tab only (never the result/home inline placements): a
   full-viewport column below the sticky app header and above the tab dock,
   so the chat reads as its own screen instead of a bounded card with dead
   space around it. top/bottom are set from JS (measured header/dock
   heights) since both can vary with safe-area insets and content. */
#chat-section.chat-section--full {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 45;
  gap: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--color-surface);
  padding: 0;
  overflow: hidden;
}

#chat-section.chat-section--full .chat-header {
  flex: none;
  padding: var(--space-sm) calc(var(--space-md) + 40px);
  border-bottom: 1px solid var(--color-divider);
}

#chat-section.chat-section--full .chat-messages {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: var(--space-md);
}

#chat-section.chat-section--full #chat-error {
  margin: 0 var(--space-md);
}

#chat-section.chat-section--full .chat-input-row {
  flex: none;
  margin: var(--space-xs) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
}

#chat-section.chat-section--inline-result .chat-header,
#chat-section.chat-section--inline-result .chat-close,
#chat-section.chat-section--inline-result .chat-clear,
#chat-section.chat-section--inline-result .chat-speak-toggle {
  display: none;
}

#chat-section:not(.chat-section--inline-result) .chat-close {
  display: none;
}

.chat-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.chat-close:active { background-color: var(--color-border); }

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
  min-height: 0;
  max-height: min(430px, 48vh);
  overflow-y: auto;
}

.chat-bubble {
  max-width: 86%;
  padding: var(--space-sm) var(--space-md);
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.chat-bubble.user {
  align-self: flex-end;
  background-color: var(--color-primary);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.chat-bubble.assistant {
  align-self: flex-start;
  background-color: var(--color-assistant-bubble-bg);
  border: 1px solid var(--color-assistant-bubble-border);
  color: var(--color-assistant-bubble-text);
  border-bottom-left-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.chat-bubble.pending { color: var(--color-text-subtle); }

/* Typing indicator — three dots that bounce in sequence while Cado is
   thinking, so a pending reply reads as "working" rather than stuck. The
   dots are decorative; aria-busy on the bubble carries the meaning for
   assistive tech. */
.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
}

.typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-text-subtle);
  animation: typing-bounce 1.3s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes typing-bounce {
  0%, 70%, 100% { transform: translateY(0); opacity: 0.45; }
  35% { transform: translateY(-5px); opacity: 1; }
}

/* Assistant text lives in its own child so the per-message speaker button can
   sit alongside it without being wiped when streaming re-renders the text.
   min-width:0 lets long words wrap inside the flex column. */
.chat-bubble__text {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Per-message read-aloud control: a quiet speaker icon under Cado's reply.
   Turns green while that message is being spoken. */
.chat-bubble__speak {
  align-self: flex-end;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-text-subtle);
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-bubble__speak:active { background-color: var(--color-bg); }

.chat-bubble__speak-icon--loading { animation: speak-icon-spin 0.8s linear infinite; }
@keyframes speak-icon-spin {
  to { transform: rotate(360deg); }
}

.chat-bubble.speaking { box-shadow: inset 0 0 0 2px var(--color-primary); }
.chat-bubble.speaking .chat-bubble__speak {
  color: var(--color-primary);
  opacity: 1;
}

/* Cado's tap-to-confirm offer (change a setting / delete data). Sits under his
   message on the assistant side; one primary confirm + a quiet dismiss. A
   generated recipe image (if any) sits in its own row above the buttons, so
   it's wrapped together with the action row in .chat-action-group. */
.chat-action-group {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: min(86%, 300px);
}

/* Inside a group (the recipe-save card) the actions stack full-width so three
   buttons line up cleanly instead of wrapping unevenly. */
.chat-action-group .chat-action {
  flex-direction: column;
  align-items: stretch;
}

.chat-action-group .chat-action button {
  width: 100%;
}

.chat-action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.chat-action__title {
  margin: 0 0 2px;
  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1.25;
}

.chat-action__meta,
.chat-action__description {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: 0.84rem;
  line-height: 1.35;
}

.chat-action__description {
  margin-bottom: 2px;
}

.chat-action__confirm {
  background-color: var(--color-action);
  color: var(--color-action-text);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
}

.chat-action__confirm:active { opacity: 0.85; }

.chat-action__confirm--danger {
  background-color: var(--color-avoid);
  color: #ffffff;
}

.chat-action__dismiss {
  background-color: transparent;
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
}

.chat-action__dismiss:active { background-color: var(--color-bg); }

.chat-action__done {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-buy);
}

.chat-input-row {
  display: flex;
  gap: 6px;
  /* As the textarea grows, keep the mic/send buttons pinned to the bottom. */
  align-items: flex-end;
  /* Don't let the composer get squeezed when the panel is short — the messages
     list shrinks instead, so the input can grow to its full max-height. */
  flex-shrink: 0;
  padding: 6px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(13, 38, 27, 0.06);
}

.chat-input-row:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(20, 107, 67, 0.12);
}

#chat-input,
#ask-cado-input,
#recipe-chat-input {
  flex: 1;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: transparent;
  border: none;
  border-radius: 18px;
  padding: 10px 8px 10px 12px;
  outline: none;
  min-width: 0;
}

/* Composer textareas grow with longer messages. JS sets their height from the
   content up to this cap, after which they scroll; the messages list above
   shrinks to make room (it's flex:1, min-height:0). */
textarea#chat-input,
textarea#ask-cado-input,
textarea#recipe-chat-input {
  display: block;
  box-sizing: border-box;
  resize: none;
  line-height: 1.4;
  min-height: 42px;
  max-height: 220px;
  overflow-y: auto;
}

#chat-input:focus,
#ask-cado-input:focus,
#recipe-chat-input:focus { border-color: transparent; }

#chat-input::placeholder,
#ask-cado-input::placeholder,
#recipe-chat-input::placeholder { color: var(--color-text-subtle); }

#chat-send-button,
#ask-cado-send,
#recipe-chat-send {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  font-size: 0.95rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Sits in the header's top-right corner (mirrors .chat-close, which takes
   that spot instead when the chat is embedded inline in a result). */
.chat-clear {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.chat-clear:active { background-color: var(--color-border); }

#chat-section.chat-section--inline-result .chat-clear { display: none; }

/* Read-aloud toggle: mirrors the close button on the top-left of the panel.
   Goes green when auto-read is on. */
.chat-speak-toggle {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-bg);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.chat-speak-toggle:active { background-color: var(--color-border); }
.chat-speak-toggle.on { background-color: var(--color-action); color: var(--color-action-text); }

.chat-speak-toggle__icon--on { display: none; }
.chat-speak-toggle.on .chat-speak-toggle__icon--on { display: block; }
.chat-speak-toggle.on .chat-speak-toggle__icon--off { display: none; }

/* The same speaker control hosted on the scan-result screen. It stays in the
   normal flow at the section's top-right — floating over the cards would
   collide with the photo thumbnail, or with Cado's bubble on the card-less
   not-food/unreadable variants — and needs a visible surface + border because
   it sits on the page background instead of a panel. The negative margin
   claws back most of the section gap so the verdict card stays the hero. */
.scan-speak-toggle {
  position: static;
  align-self: flex-end;
  width: 40px; /* bigger than the chat panel's 32px — this one gets tapped mid-speech to mute */
  height: 40px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text); /* global button style is white-on-green; the muted icon needs ink */
  margin-bottom: calc(-1 * var(--space-sm));
}
.scan-speak-toggle.on { border-color: var(--color-action); }

.chat-live-voice-button {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  background-color: transparent;
  color: var(--color-primary);
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-live-voice-button:active { background-color: rgba(20, 107, 67, 0.08); }
.chat-live-voice-button.live {
  background-color: rgba(20, 107, 67, 0.08);
  color: var(--color-primary);
}

.chat-live-voice-button.listening {
  background-color: rgba(192, 57, 43, 0.08);
  color: var(--color-avoid);
  animation: mic-pulse 1.2s ease-in-out infinite;
}

.chat-live-voice-button__circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-action);
  color: var(--color-action-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 7px rgba(20, 107, 67, 0.22);
}

.chat-live-voice-button__mic {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-live-voice-button__stop {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background-color: currentColor;
}

.chat-live-voice-button.live .chat-live-voice-button__circle {
  background-color: var(--color-action);
  color: var(--color-action-text);
}

/* Press-and-hold while a call is live swaps the mic glyph for a stop
   square, previewing the hang-up the hold is about to trigger. */
.chat-live-voice-button.holding .chat-live-voice-button__circle {
  background-color: var(--color-avoid);
  color: #ffffff;
}
.chat-live-voice-button.holding .chat-live-voice-button__mic { display: none; }
.chat-live-voice-button.holding .chat-live-voice-button__stop { display: block; }

.chat-live-voice-button.listening .chat-live-voice-button__circle {
  background-color: var(--color-avoid);
  color: #ffffff;
}

/* Mic button in the composer: a quiet square next to send. Turns red and
   pulses while it's listening to you. */
.chat-mic {
  flex-shrink: 0;
  width: 52px;
  font-size: 1.05rem;
  padding: var(--space-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.chat-mic:active { background-color: var(--color-bg); }
.chat-mic.listening {
  background-color: var(--color-avoid);
  color: #ffffff;
  border-color: var(--color-avoid);
  animation: mic-pulse 1.2s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

.photo-button {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background-color: var(--color-action);
  color: var(--color-action-text);
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 14px var(--color-action-shadow);
  transition: background-color 0.2s, transform 0.05s;
  text-align: center;
}

.photo-button__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.photo-button__label {
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0;
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-button:active {
  background-color: var(--color-action-active);
  transform: scale(0.98);
}

.upload-button {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
  color: var(--color-text);
  min-height: 48px;
  font-size: 0.92rem;
  font-weight: 800;
  padding: var(--space-sm) var(--space-md);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.05s;
  text-align: center;
}

.upload-button:active {
  background-color: var(--color-bg);
  transform: scale(0.98);
}

#preview-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.preview-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  line-height: 0;
}

#preview-image {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--radius);
  background-color: var(--color-surface);
  box-shadow: var(--shadow);
}

/* OCR-style scan animation while the photo is being analyzed */
.scan-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(7, 40, 25, 0.22);
}

.scan-laser {
  position: absolute;
  left: 0;
  right: 0;
  top: 2%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #3ce594 18%, #d8ffe9 50%, #3ce594 82%, transparent);
  box-shadow: 0 0 14px 4px rgba(60, 229, 148, 0.55);
  animation: laser-sweep 2.4s ease-in-out infinite;
}

.scan-laser::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 56px;
  background: linear-gradient(180deg, rgba(60, 229, 148, 0.22), transparent);
}

@keyframes laser-sweep {
  0% { top: 2%; }
  50% { top: 96%; }
  100% { top: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-laser { animation-duration: 7s; }

  /* Drop the movement-heavy flourishes for motion-sensitive users. The
     content still appears — just without the slide / pop / bounce. */
  .nav-slide-back,
  .onboarding-card,
  .onboarding-overlay.open .onboarding-avatar,
  .recipe-overlay__bookmark.toggling .bookmark-svg,
  .cooking-emoji,
  .recipe-overlay__loading-emoji,
  #chat-section,
  .chat-mic.listening {
    animation: none !important;
  }

  /* Hold the looping loading text/pulses fully legible instead of pulsing them. */
  #cooking-tip,
  .recipe-overlay__loading-text,
  .generated-image-wrap.loading,
  .skeleton {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Typing dots: drop the bounce but keep them visible as a static row. */
  .typing-dots span {
    animation: none !important;
    opacity: 0.6 !important;
  }
}

.scan-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

#scan-status-text {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.cado-avatar--small {
  width: 30px;
  height: 30px;
}

button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: var(--space-md);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  background-color: var(--color-action);
  color: var(--color-action-text);
  transition: background-color 0.2s, transform 0.05s;
}

button:active { transform: scale(0.98); }

button.secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* Disabled buttons read as "done / not tappable" — the explicit colours above
   otherwise hide the browser's default greyed state. */
button:disabled {
  opacity: 0.55;
  cursor: default;
}

button:disabled:active { transform: none; }

button.secondary:active { background-color: var(--color-bg); }

.result-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.result-actions button,
.result-actions .secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 58px;
  padding: 10px;
  border-radius: 18px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.15;
}

.result-actions button:active,
.result-actions .secondary:active {
  background-color: var(--color-bg);
  transform: none;
}

/* =====================================================================
   INLINE LINE ICONS — shared 1.8px-stroke, round-cap SVG icons used in
   place of emoji for functional UI chrome (close/send/mute/cart/etc.).
   Emoji stay fine inside Cado's own speech-bubble copy, just not chrome.
   ===================================================================== */

.icon-line {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Buttons that pair a line icon with data-i18n text — data-i18n replaces
   textContent, so the icon lives as a sibling <svg> and the copy moves to
   an inner <span data-i18n>. */
.icon-text-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Toggle-on-the-button quick actions (Log today, Add to list, recipe
   bookmark): tapping flips the button to a confirmed style instead of
   popping a toast on top of it — the button itself is the confirmation,
   and tapping again undoes the action. */
.icon-line--check {
  display: none;
}

/* Specificity note: needs to beat `.result-actions .secondary` /
   `button.secondary` (two-class / element+class selectors elsewhere in this
   file), so this can't be a bare single class — list every real usage. */
.result-actions button.action-toggled,
.recipe-overlay__shopping.action-toggled {
  background-color: var(--color-confirm-bg);
  border-color: var(--color-confirm-border);
  color: var(--color-confirm-text);
  animation: action-toggle-bounce 0.2s ease-out;
}

.action-toggled .icon-line--default {
  display: none;
}

.action-toggled .icon-line--check {
  display: block;
}

/* AVOID verdicts have no recipes to suggest — the "Recipes" quick action
   repurposes itself into "Explore alternatives" (opens chat with a hidden
   swap-suggestion prompt) instead of leaving an empty grid cell. */
.icon-line--alternatives {
  display: none;
}

#find-recipes-button.mode-alternatives .icon-line--recipes {
  display: none;
}

#find-recipes-button.mode-alternatives .icon-line--alternatives {
  display: block;
}

@keyframes action-toggle-bounce {
  from { transform: scale(0.95); }
  to { transform: scale(1); }
}

.result-footer-actions {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: var(--space-sm) calc(var(--space-md) * -1) calc(-112px - env(safe-area-inset-bottom, 0px));
  padding: 10px var(--space-md) calc(12px + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-result-footer-bg);
  border-top: 1px solid var(--color-divider);
  box-shadow: 0 -8px 22px var(--color-result-footer-shadow);
  backdrop-filter: blur(14px);
}

#reset-button,
#done-button {
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
}

#done-button {
  min-width: 86px;
  padding-inline: 18px;
}

#reset-button {
  background-color: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-text);
  box-shadow: 0 6px 16px var(--color-action-shadow);
}

#reset-button:active {
  background-color: var(--color-action-active);
  transform: none;
}

#done-button {
  background-color: var(--color-surface-sunken);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Home-row preview cards are <button>s (not bare divs) so they're reachable by
   keyboard and announced as buttons to screen readers — Enter/Space activate
   them for free. Strip the global button chrome so they keep their flat card
   look; each card's own rule above owns its padding and background. */
.scan-card,
.cookbook-card,
.shop-card {
  font: inherit;
  text-align: left;
  color: var(--color-text);
}

.scan-card,
.cookbook-card {
  padding: 0;
}

#result-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* =====================================================================
   5-ZONE VERDICT CARD
   ===================================================================== */

#verdict-card {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  background: radial-gradient(circle at 20% 0%, #28a86d 0%, var(--color-buy) 45%, #126c42 100%);
  color: #ffffff;
  padding: 22px var(--space-lg) 58px;
  border-radius: 24px 24px 28px 28px;
  border: 0;
  box-shadow: 0 10px 24px rgba(17, 64, 42, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.result-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* The photo the user just scanned rides along as a small tap-to-open thumbnail
   pinned to the verdict card's top-right corner — the verdict is what matters,
   not the picture. Absolute positioning drops it out of the card's centered
   column so the verdict rises to the top on its own (no DOM reorder needed).
   Tapping opens the shared image lightbox (handled globally for any
   .generated-image-wrap img); the ::after is a subtle "expand" affordance. */
#receipt-image-wrap {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 58px;
  height: 58px;
  aspect-ratio: auto;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 3;
}

#receipt-image-wrap::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  pointer-events: none;
  border-top-left-radius: 8px;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4H4v4M16 20h4v-4'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

.verdict-face-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: #f3eccd;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(17, 64, 42, 0.18);
  animation: verdict-face-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.verdict-face {
  width: 84px;
  height: 84px;
}

@keyframes verdict-face-pop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#verdict-text {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 16vw, 3.4rem);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 3px 0 rgba(17, 64, 42, 0.25);
}

#verdict-card.buy { background: radial-gradient(circle at 20% 0%, var(--color-verdict-buy-start) 0%, var(--color-verdict-buy-mid) 45%, var(--color-verdict-buy-end) 100%); }
#verdict-card.healthy { background: radial-gradient(circle at 20% 0%, var(--color-verdict-healthy-start) 0%, var(--color-verdict-healthy-mid) 52%, var(--color-verdict-healthy-end) 100%); }
#verdict-card.avoid { background: radial-gradient(circle at 20% 0%, var(--color-verdict-avoid-start) 0%, var(--color-verdict-avoid-mid) 55%, var(--color-verdict-avoid-end) 100%); }

#verdict-card.caution {
  background: radial-gradient(circle at 20% 0%, var(--color-verdict-caution-start) 0%, var(--color-verdict-caution-mid) 56%, var(--color-verdict-caution-end) 100%);
}

#verdict-card.caution #verdict-text,
#verdict-card.caution #product-name,
#verdict-card.caution .result-kicker {
  color: #fffdf2;
}

#product-name {
  max-width: 100%;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.18;
  color: rgba(255, 255, 255, 0.95);
  overflow-wrap: anywhere;
}

#verified-line {
  margin: 2px 0 0;
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.76rem;
  font-weight: 800;
}

.result-stats-card,
.result-context-card {
  position: relative;
  z-index: 1;
  background-color: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.result-stats-card {
  margin-top: -44px;
  padding: var(--space-md);
}

.result-context-card {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.result-stats-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr);
  gap: 10px;
  align-items: stretch;
}

.result-stat {
  min-width: 0;
  border-radius: 16px;
  background-color: var(--color-bg);
  padding: 10px 8px;
  text-align: center;
}

.result-stat--carbs {
  background-color: var(--color-net-stat-bg);
  color: var(--color-net-stat-text);
}

.result-stat__label {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.result-stat--carbs .result-stat__label {
  color: var(--color-net-stat-label);
}

.result-stat__value {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-net-stat-text);
  overflow-wrap: anywhere;
}

.result-stat:not(.result-stat--carbs) .result-stat__value {
  font-size: 1rem;
  color: var(--color-text);
}

.reason-badge {
  align-self: center;
  max-width: 100%;
  margin: calc(var(--space-sm) * -0.5) 0 0;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-muted);
  background-color: var(--color-surface-sunken);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

.reason-badge.hidden { display: none !important; }

.reason-badge--positive {
  color: var(--color-note-info-text);
  border-color: var(--color-note-info-border);
  background-color: var(--color-note-info-bg);
}

.reason-badge--healthy,
.reason-badge--unclear {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background-color: var(--color-bg);
}

.reason-badge--limited {
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
  background-color: var(--color-warning-bg);
}

.reason-badge--avoid {
  color: var(--color-avoid);
  border-color: var(--color-error-border);
  background-color: var(--color-error-bg);
}

.borderline-line {
  align-self: center;
  max-width: 32rem;
  margin: calc(var(--space-xs) * -0.5) 0 0;
  color: var(--color-text-subtle);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
}

.borderline-line.hidden { display: none !important; }

.generated-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-divider);
}

/* Skeleton shimmer — a gradient highlight sweeping across the sunken base.
   Reused by the image wells while a picture generates and available as a
   standalone .skeleton block placeholder. Frozen by the reduced-motion rule. */
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton,
.generated-image-wrap.loading {
  background-color: var(--color-surface-sunken);
  background-image: linear-gradient(
    100deg,
    transparent 25%,
    var(--skeleton-shine) 50%,
    transparent 75%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton { border-radius: var(--radius); }

.generated-image-wrap.hidden { display: none !important; }

.generated-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-loading-text {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.generated-image-wrap.loading .image-loading-text { display: flex; }

.chat-action__image-wrap {
  width: 100%;
}

.recipe-overlay__shopping {
  width: 100%;
  margin-top: var(--space-md);
}

/* Cado's own button — filled brand green so it stands apart from the
   outlined "Add to shopping list" above and reads as the primary invite to
   chat. Sits close under it as a grouped pair. */
.recipe-overlay__chat {
  width: 100%;
  margin-top: var(--space-xs);
}

/* =====================================================================
   RECIPE CHAT — slides up inside the recipe overlay sheet so the user
   stays in context while chatting with Cado about this recipe.
   ===================================================================== */
.recipe-chat {
  position: absolute;
  inset: 0;
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.recipe-chat.open {
  transform: translateY(0);
}

.recipe-chat__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.recipe-chat__header-text {
  flex: 1;
  min-width: 0;
}

.recipe-chat__header-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.2;
}

.recipe-chat__header-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.2;
}

.recipe-chat__close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.recipe-chat__close:active { background-color: var(--color-border); }

.recipe-chat__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@keyframes generated-image-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

#health-context {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
  text-align: left;
}

#daily-limit {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  text-align: left;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-primary);
}

#numbers {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-subtle);
  text-align: left;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Macro ratio bar — a calorie-proportional fat/protein/carb strip under the
   NUMBERS caption. Segment colours are deliberately distinct from the
   BUY/CAUTION/AVOID palette so they don't read as a verdict, and they hold up
   on both the light and dark surface. */
.macro-bar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: var(--space-sm);
}

.macro-bar__track {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--color-surface-sunken);
}

.macro-bar__seg { height: 100%; }
.macro-bar__seg--fat { background-color: #e0992f; }
.macro-bar__seg--protein { background-color: #4f8bef; }
.macro-bar__seg--carbs { background-color: #c0563f; }

.macro-bar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.macro-bar__key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.macro-bar__key i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.macro-bar__key--fat i { background-color: #e0992f; }
.macro-bar__key--protein i { background-color: #4f8bef; }
.macro-bar__key--carbs i { background-color: #c0563f; }

#verdict-card .reason-badge {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  background-color: rgba(255, 255, 255, 0.14);
}

#seen-list {
  margin: var(--space-sm) 0 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text-muted);
}

#calories-line {
  margin: var(--space-xs) 0 0;
  font-size: 0.85rem;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

#product-name:empty,
#health-context:empty,
#daily-limit:empty,
#numbers:empty {
  display: none;
}

/* NOTE BOX */

#note-box {
  background-color: var(--color-note-bg);
  border: 1px solid var(--color-note-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--color-note-text);
  line-height: 1.6;
}

#note-box.note-info {
  background-color: var(--color-note-info-bg);
  border-color: var(--color-note-info-border);
  color: var(--color-note-info-text);
}

#note-box.hidden { display: none !important; }

#note-box .note-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1.4;
}

#note-box p { margin: 0; flex: 1; }

#unreadable-banner {
  background-color: var(--color-warning-bg);
  border: 1.5px solid var(--color-warning-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

#unreadable-banner.hidden { display: none !important; }

.unreadable-icon {
  display: flex;
  color: var(--color-warning-text);
}

.unreadable-icon .icon-line {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
}

#unreadable-message {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-warning-text);
  line-height: 1.55;
}

#retake-photo-button {
  margin-top: var(--space-xs);
  width: 100%;
}

#find-recipes-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: 1rem;
  padding: var(--space-md);
}

#reset-button {
  background-color: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-text);
  box-shadow: 0 6px 16px var(--color-action-shadow);
}

#error-section {
  position: fixed;
  inset: 0;
  z-index: 220;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) var(--space-md) calc(env(safe-area-inset-bottom, 0px) + 22px);
  background-color: rgba(17, 64, 42, 0.28);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-card {
  width: 100%;
  max-width: 360px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-error-border);
  border-radius: 24px;
  box-shadow: var(--shadow-overlay);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.error-card__avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background-color: #f3eccd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-card__avatar .cado-avatar {
  width: 86px;
  height: 86px;
}

.error-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.05;
  color: var(--color-heading);
}

#error-text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
}

#error-dismiss {
  width: 100%;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
}

/* Slim footer that hugs the bottom and owns the safe-area inset */
footer {
  text-align: center;
  padding: var(--space-xs) var(--space-md) calc(98px + env(safe-area-inset-bottom, 0px));
  color: var(--color-text-subtle);
  font-size: 0.68rem;
  line-height: 1.35;
  opacity: 0.75;
}

/* That big bottom padding only exists to clear the floating tab dock. On the
   screens where the dock is hidden it's just dead space under the disclaimer,
   so pull the line up tight to the bottom edge instead of leaving a gap. */
body:has(#access-section:not(.hidden)) footer,
body:has(#preview-section:not(.hidden)) footer,
body:has(#result-section:not(.hidden)) footer,
body:has(#settings-section:not(.hidden)) footer,
body:has(#feedback-section:not(.hidden)) footer,
body:has(#faq-section:not(.hidden)) footer,
body:has(#privacy-section:not(.hidden)) footer,
body:has(#scans-section:not(.hidden)) footer,
body:has(#chat-history-section:not(.hidden)) footer,
body:has(#shopping-section:not(.hidden)) footer,
body:has(#trial-end-section:not(.hidden)) footer,
body:has(#error-section:not(.hidden)) footer {
  padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90;
  width: min(calc(100% - 32px), 420px);
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr 1fr 64px 1fr 1fr;
  align-items: end;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 999px;
  background-color: var(--color-dock-bg);
  border: 1px solid var(--color-dock-border);
  box-shadow: 0 12px 30px var(--color-dock-shadow);
}

body:has(#access-section:not(.hidden)) .bottom-nav,
body:has(#preview-section:not(.hidden)) .bottom-nav,
body:has(#result-section:not(.hidden)) .bottom-nav,
body:has(#settings-section:not(.hidden)) .bottom-nav,
body:has(#feedback-section:not(.hidden)) .bottom-nav,
body:has(#faq-section:not(.hidden)) .bottom-nav,
body:has(#privacy-section:not(.hidden)) .bottom-nav,
body:has(#scans-section:not(.hidden)) .bottom-nav,
body:has(#chat-history-section:not(.hidden)) .bottom-nav,
body:has(#shopping-section:not(.hidden)) .bottom-nav,
body:has(#trial-end-section:not(.hidden)) .bottom-nav,
body:has(#error-section:not(.hidden)) .bottom-nav {
  display: none;
}

.bottom-nav__item,
.bottom-nav__scan {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(243, 236, 205, 0.58);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav__item {
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  border-radius: 18px;
  font-size: 0.66rem;
  font-weight: 800;
}

.bottom-nav__item svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-nav__item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav__item.is-active {
  color: #f3eccd;
}

.bottom-nav__item:active {
  transform: none;
  background-color: rgba(255, 255, 255, 0.08);
}

.bottom-nav__scan {
  position: relative;
  top: -18px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-action);
  color: var(--color-action-text);
  border: 4px solid var(--color-bg);
  box-shadow: 0 8px 18px var(--color-action-shadow);
}

.bottom-nav__scan svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-nav__scan:active {
  transform: translateY(1px);
  background-color: var(--color-action-active);
}

.diary-summary-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 18px;
  padding: var(--space-lg);
  box-shadow: var(--shadow);
  text-align: center;
}

.diary-summary-card__label {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

#diary-summary-carbs {
  font-family: var(--font-display);
  color: var(--color-action);
  font-size: 2.05rem;
  line-height: 1;
}

#diary-summary-kcal {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 700;
}

.diary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.diary-day {
  margin: var(--space-sm) 4px 0;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
}

.diary-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  box-shadow: var(--shadow);
}

.diary-entry__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.diary-entry__name {
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-entry__meta,
.diary-entry__macros {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.diary-entry__macros {
  color: var(--color-primary);
  white-space: nowrap;
}

.diary-entry__delete {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
}

/* =====================================================================
   RECIPES FEATURE — list view
   ===================================================================== */

.section-heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text);
  text-align: center;
  letter-spacing: 0;
}

.section-subheading {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: calc(var(--space-xs) * -1);
}

#category-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.category-button {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  text-align: left;
  font-weight: 500;
}

.category-button:active {
  background-color: var(--color-bg);
  transform: scale(0.98);
}

.category-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  width: 2.5rem;
  text-align: center;
}

.category-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.category-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
}

.category-detail {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

#recipes-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

#recipes-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-md);
  background-color: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#recipes-loading.hidden { display: none !important; }

.cooking-emojis {
  display: flex;
  gap: var(--space-md);
  font-size: 2.5rem;
  line-height: 1;
}

.cooking-emoji {
  display: inline-block;
  animation: bounce 1.2s ease-in-out infinite;
}

.cooking-emoji:nth-child(1) { animation-delay: 0s; }
.cooking-emoji:nth-child(2) { animation-delay: 0.15s; }
.cooking-emoji:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

#cooking-tip {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
  min-height: 2.8em;
  animation: fade-tip 2.5s ease-in-out infinite;
}

@keyframes fade-tip {
  0%, 100% { opacity: 0.5; }
  15%, 85% { opacity: 1; }
}

#recipes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

#recipes-list.hidden { display: none !important; }

.recipe-card {
  background-color: var(--color-surface);
  padding: var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.05s;
}

.recipe-card:active {
  background-color: var(--color-bg);
  transform: scale(0.99);
}

.recipe-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  justify-content: space-between;
}

.recipe-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
  line-height: 1.3;
}

.recipe-time-badge {
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-top: 2px;
}

.recipe-description {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.recipes-error {
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-avoid);
  padding: var(--space-md);
  border-radius: var(--radius);
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.5;
}

#recipes-disclaimer {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
  padding: 0 var(--space-sm);
}

#recipes-disclaimer.hidden { display: none !important; }
#recipes-regenerate-button.hidden { display: none !important; }

/* =====================================================================
   SETTINGS SCREEN
   ===================================================================== */

#settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* A labelled group of related settings cards. Cards within a group sit
   closer together; the larger #settings-section gap separates the groups. */
.settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.settings-group__title {
  margin: 0;
  padding: 0 var(--space-xs);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.settings-card {
  background-color: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
}

.settings-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.settings-row__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.settings-row__detail {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.switch__track {
  position: absolute;
  inset: 0;
  background-color: var(--color-switch-track-off);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  background-color: var(--color-switch-thumb);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.switch input:checked + .switch__track {
  background-color: var(--color-action);
}

.switch input:checked + .switch__track::after {
  transform: translateX(20px);
}

/* =====================================================================
   RECIPE DETAIL OVERLAY
   ===================================================================== */

.recipe-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.recipe-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.recipe-overlay__sheet {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: calc(100vh - var(--overlay-top-gap));
  max-height: calc(100vh - var(--overlay-top-gap));
  background-color: var(--color-surface);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-overlay);
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.recipe-overlay.open .recipe-overlay__sheet {
  transform: translateY(0);
}

.recipe-overlay__sheet.dragging { transition: none; }

.recipe-overlay__handle {
  width: 40px;
  height: 4px;
  background-color: var(--color-border);
  border-radius: 2px;
  margin: var(--space-sm) auto;
  flex-shrink: 0;
}

/* =====================================================================
   BOOKMARK BUTTON (in overlay header)
   ===================================================================== */

.recipe-overlay__bookmark {
  position: absolute;
  top: var(--space-md);
  right: calc(var(--space-md) + 44px);
  background: transparent;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 2;
  color: var(--color-text-muted);
  -webkit-tap-highlight-color: transparent;
}

.recipe-overlay__bookmark:active {
  background-color: var(--color-bg);
  transform: none;
}

.recipe-overlay__bookmark .bookmark-svg {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform 0.18s ease;
}

.recipe-overlay__bookmark.saved {
  color: var(--color-primary);
}

.recipe-overlay__bookmark.saved .bookmark-svg path {
  fill: currentColor;
  stroke: currentColor;
}

.recipe-overlay__bookmark.toggling .bookmark-svg {
  animation: bookmark-pulse 0.32s ease;
}

@keyframes bookmark-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.recipe-overlay__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  font-weight: 400;
  padding: var(--space-xs);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  z-index: 2;
}

.recipe-overlay__close:active {
  background-color: var(--color-bg);
  transform: none;
}

.recipe-overlay__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.recipe-overlay__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-right: 88px;
}

#recipe-overlay-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.recipe-overlay__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

#recipe-overlay-time { align-self: flex-start; }

.recipe-serves-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.recipe-serves-label:empty { display: none; }

.recipe-overlay__description {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  font-style: italic;
}

.recipe-overlay__description:empty { display: none; }

.recipe-overlay__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-md);
}

.recipe-overlay__loading.hidden { display: none !important; }

.recipe-overlay__loading-emoji {
  font-size: 2.5rem;
  line-height: 1;
  display: inline-block;
  animation: bounce 1.2s ease-in-out infinite;
}

.recipe-overlay__loading-text {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  text-align: center;
  animation: fade-tip 2.5s ease-in-out infinite;
}

.recipe-overlay__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.recipe-overlay__detail.hidden { display: none !important; }

.recipe-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.recipe-section__heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.recipe-ingredient-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0;
}

.recipe-ingredient-list li {
  position: relative;
  padding-left: var(--space-md);
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.5;
}

.recipe-ingredient-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.recipe-method-list {
  list-style: none;
  counter-reset: recipe-step;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 0;
}

.recipe-method-list li {
  counter-increment: recipe-step;
  position: relative;
  padding-left: 2rem;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.recipe-method-list li::before {
  content: counter(recipe-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-action);
  color: var(--color-action-text);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}

.recipe-overlay__error {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius);
  text-align: center;
}

.recipe-overlay__error.hidden { display: none !important; }

.recipe-overlay__error p {
  color: var(--color-avoid);
  font-size: 0.9rem;
  line-height: 1.5;
}

#recipe-overlay-retry-button {
  align-self: center;
  min-width: 140px;
}

/* =====================================================================
   TOAST NOTIFICATION
   ===================================================================== */

.toast {
  position: fixed;
  left: 50%;
  /* Default clearance for screens with no sticky dock/footer; JS sets
     --toast-offset (already safe-area-inclusive) per-screen so the pill
     never lands on top of the "Scan another" footer or the tab dock. */
  bottom: var(--toast-offset, calc(env(safe-area-inset-bottom, 0px) + var(--space-xl)));
  transform: translateX(-50%) translateY(20px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-toast-bg);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: var(--space-sm) var(--space-lg);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, bottom 0.2s ease;
  max-width: calc(100vw - 2 * var(--space-md));
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast__icon {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background-color: #2fca82;
  color: #0c2417;
  padding: 3px;
  box-sizing: content-box;
}

/* =====================================================================
   ONBOARDING — first-run walkthrough with Cado
   ===================================================================== */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.onboarding-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.onboarding-card {
  width: 100%;
  max-width: 360px;
  background-color: var(--color-surface);
  border-radius: 22px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-overlay.open .onboarding-card {
  transform: translateY(0) scale(1);
}

.onboarding-avatar {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-sm);
}

.onboarding-overlay.open .onboarding-avatar {
  animation: onboarding-pop 0.5s ease;
}

@keyframes onboarding-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.onboarding-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xs);
}

.onboarding-body {
  font-size: 0.98rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  min-height: 4.4em;
}

.onboarding-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin: var(--space-lg) 0;
}

.onboarding-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-border);
  transition: background-color 0.2s ease, width 0.2s ease;
}

.onboarding-dot.active {
  width: 20px;
  border-radius: 4px;
  background-color: var(--color-action);
}

.onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.onboarding-next { width: 100%; }

.onboarding-foot {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.onboarding-text-btn {
  background: transparent;
  color: var(--color-text-subtle);
  font-size: 0.9rem;
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
}

.onboarding-text-btn:active {
  color: var(--color-text);
  transform: none;
}

/* Skip hugs the right edge; with Back hidden it still stays right, and on
   the final step (Skip hidden) Back stays left — layout never jumps. */
#onboarding-skip { margin-left: auto; }

/* Install guide — shares the onboarding shell, with a tighter instruction list */
.install-guide-card {
  max-width: 380px;
}

.install-guide-eyebrow {
  margin-bottom: 2px;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.install-guide-body {
  min-height: 0;
}

.install-guide-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--space-lg) 0 var(--space-sm);
  text-align: left;
  counter-reset: install-step;
  border-top: 1px solid var(--color-divider);
}

.install-guide-steps li {
  counter-increment: install-step;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--space-sm);
  align-items: start;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
  font-size: 0.92rem;
  line-height: 1.45;
}

.install-guide-steps li::before {
  content: counter(install-step);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-note-info-bg);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
}

.install-guide-note {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm);
  border: 1px solid var(--color-note-info-border);
  border-radius: 10px;
  background-color: var(--color-note-info-bg);
  color: var(--color-note-info-text);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
}

#install-guide-copy-link {
  margin-left: auto;
}

/* =====================================================================
   IN-APP CAMERA — live viewfinder + one-tap capture
   ===================================================================== */

.camera-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background-color: #000;
}

.camera-overlay.hidden { display: none !important; }

.camera-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

.camera-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-md));
  left: var(--space-md);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.camera-hint {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-md));
  left: 50%;
  transform: translateX(-50%);
  max-width: 78%;
  margin: 0;
  padding: 6px var(--space-md);
  background-color: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  border-radius: 999px;
}

.camera-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-xl));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--space-lg);
}

.camera-flip {
  justify-self: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.45);
  color: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.camera-bar__spacer {
  width: 52px;
  height: 52px;
}

.camera-shutter {
  justify-self: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background-color: #fff;
  border: 4px solid rgba(255, 255, 255, 0.55);
  background-clip: padding-box;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  padding: 0;
}

.camera-shutter:active { transform: scale(0.94); }

.camera-close:active,
.camera-flip:active {
  background-color: rgba(0, 0, 0, 0.65);
  transform: none;
}

/* =====================================================================
   ACCESS GATE
   ===================================================================== */

#access-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  justify-content: center;
  min-height: min(720px, calc(100vh - 150px));
}

.access-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  text-align: center;
}

.access-card__avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background-color: #f3eccd;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(17, 64, 42, 0.12);
}

.access-card__cado {
  width: 112px;
  height: 112px;
}

.access-card .section-heading {
  margin: 0;
  max-width: 17rem;
  font-size: 1.9rem;
  line-height: 1.05;
}

.access-card .section-subheading {
  max-width: 19rem;
  margin: calc(var(--space-sm) * -1) auto 0;
  font-weight: 700;
}

.access-card__footnote {
  margin-top: auto;
  color: var(--color-text-subtle);
  font-size: 0.78rem;
  font-weight: 700;
}

#access-code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-heading);
  background-color: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: 18px;
  padding: var(--space-md);
  outline: none;
  width: 100%;
  max-width: 360px;
}

#access-code-input:focus {
  border-color: var(--color-primary);
}

#access-code-input::placeholder {
  color: var(--color-text-subtle);
  letter-spacing: 0.22em;
}

.access-error {
  font-size: 0.9rem;
  color: var(--color-avoid);
  text-align: center;
}

#access-submit-button {
  width: 100%;
  max-width: 360px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: 0 6px 16px var(--color-action-shadow);
}

/* =====================================================================
   FEEDBACK
   ===================================================================== */

#feedback-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.star-row {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
}

.star-button {
  background: none;
  border: none;
  padding: 0 6px;
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--color-star-empty);
  transition: color 0.15s, transform 0.05s;
}

.star-button.active {
  color: var(--color-star-full);
}

.feedback-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: calc(var(--space-sm) * -1);
}

#feedback-section textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  line-height: 1.5;
  resize: vertical;
  min-height: 4.5rem;
  outline: none;
}

#feedback-section textarea:focus {
  border-color: var(--color-primary);
}

#feedback-section textarea::placeholder {
  color: var(--color-text-subtle);
}

.feedback-shots {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.feedback-shot {
  position: relative;
  width: 72px;
  height: 72px;
}

.feedback-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  display: block;
}

.feedback-shot__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  background-color: #3a423e;
  color: #ffffff;
  font-size: 0.8rem;
  line-height: 24px;
  text-align: center;
}

/* Full-width action button inside a settings card */
.settings-card__action {
  width: 100%;
  background: none;
  color: var(--color-primary);
  border: none;
  border-top: 1px solid var(--color-divider);
  border-radius: 0;
  font-size: 0.95rem;
  padding: var(--space-sm) var(--space-md);
}

/* The "Link your Google account" action carries the Google logo, so lay the
   icon and label out as a centered row. */
.settings-card__action--google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.settings-card__action--google .brand-g {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Non-interactive confirmation row shown once Google is linked — same rhythm
   as the action buttons (divider + padding) but muted, with a green check. */
.account-linked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border-top: 1px solid var(--color-divider);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.account-linked .brand-g {
  width: 18px;
  height: 18px;
  flex: none;
}

.account-linked__check {
  color: var(--color-primary);
  font-weight: 700;
}

.settings-card__action:disabled {
  color: var(--color-text-subtle);
  opacity: 0.55;
}

/* Destructive action (Delete my data) — red, and a clear armed state on the
   first tap before the second confirms. */
.settings-card__action--danger {
  color: var(--color-avoid);
}

.settings-card__action--armed {
  background-color: var(--color-avoid);
  color: #ffffff;
  font-weight: 600;
}

.account-hint {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  margin-top: var(--space-xs);
}

.settings-card__action:active {
  background-color: var(--color-bg);
}

/* =====================================================================
   KEYBOARD FOCUS
   The app is touch-first, so feedback so far has been :active only — which
   leaves keyboard, switch and screen-reader users with no visible focus.
   :focus-visible adds a clear ring for them without showing on taps/clicks,
   so the existing :active feedback stays the only thing pointer users see.
   ===================================================================== */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* On the green header a brand-coloured ring would vanish — use white. */
.header-back-button:focus-visible,
.header-settings-button:focus-visible {
  outline-color: #ffffff;
}

/* These inputs null the default outline on :focus (to suppress the ugly
   tap ring); re-add a ring for keyboard focus. Placed last so it wins the
   equal-specificity tie against the :focus rules above. */
#access-code-input:focus-visible,
#feedback-section textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 1px;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background-color: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.image-lightbox.hidden { display: none !important; }

.image-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  object-fit: contain;
}

.image-lightbox-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-md));
  right: var(--space-md);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.generated-image-wrap img {
  cursor: pointer;
}