@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/RobotoSlab-Bold.woff2') format('woff2');
}

/* Source Sans 3, bundled locally (variable weight 400 to 700, latin). */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/SourceSans3.woff2') format('woff2');
}

/* popup.css - ShowMacros UI Redesign */

:root {
  /* Surfaces */
  --bg-page: #F7F8FA;
  --bg-card: #FFFFFF;
  --bg-hero: #1E293B;
  --bg-hero-hover: #253348;

  /* Text */
  --text-primary: #1E293B;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;
  --text-on-dark: #F8FAFC;
  --text-on-dark-muted: rgba(248,250,252,0.6);

  /* Macro colors */
  --color-protein: #10B981;
  --color-fat: #F59E0B;
  --color-carbs: #3B82F6;
  --color-link: #3B82F6;
  --color-calories: #8B5CF6;

  /* Status */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Borders & shadows */
  --border-light: #E2E8F0;
  --border-focus: #3B82F6;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --focus-ring: 0 0 0 2px rgba(59,130,246,0.25);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Spacing — single source of truth for the page gutter (matches header padding)
     and the vertical gap between stacked content blocks. */
  --gutter: 20px;
  --block-gap: 12px;
}

[data-theme="dark"] {
  --bg-page: #0D1117;
  --bg-card: #161B22;
  --bg-hero: #1C2432;
  --bg-hero-hover: #243044;

  --text-primary: #E6EDF3;
  --text-secondary: #A3ADBA;
  --text-muted: #8B95A3;
  --text-on-dark: #F0F6FC;
  --text-on-dark-muted: rgba(240,246,252,0.5);

  --border-light: #30363D;
  --border-focus: #58A6FF;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --focus-ring: 0 0 0 2px rgba(88,166,255,0.4);
}

* {
  box-sizing: border-box;
}

/* Form controls do not inherit the page font by default; make every
   button, input and select use the popup font. */
button, input, select, textarea { font-family: inherit; }

body {
  width: 440px;
  max-height: 600px;
  padding: 0;
  margin: 0;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-page);
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}

body::-webkit-scrollbar { width: 6px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

.container {
  padding: 0;
  background: var(--bg-page);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none !important;
}

/* Monochrome line icons — inherit text color, sized to the line. Replaces the
   decorative emoji set for a cleaner, more consistent look. */
.ico {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}
.overflow-ico svg { width: 16px; height: 16px; }
.share-ico { width: 13px; height: 13px; }

/* ========== HEADER ========== */
.header {
  background: var(--bg-card);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

h1 {
  font-family: 'Roboto Slab', 'Source Sans 3', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--border-light);
}

.recipe-title {
  font-size: 14px;
  color: var(--text-primary);
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usage-counter {
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  padding: 0 2px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.usage-counter:empty { display: none; }
.usage-meter { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; }
.usage-meter:empty { display: none; }
.usage-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; box-sizing: border-box; border: 1px solid #A7D9C4; }
.usage-dot.on { background: #059669; border-color: #059669; }
/* The dot for the scan just made empties with a small pulse once results show. */
.usage-dot.spend { transition: background-color .9s ease, border-color .9s ease; }
.usage-dot.spent { animation: usage-dot-spend .9s ease; }
@keyframes usage-dot-spend { 35% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .usage-dot.spent { animation: none; } }
.usage-pro { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #059669; background: rgba(16,185,129,0.10); }
.usage-pro b { font-size: 15px; line-height: 1; font-weight: 600; }
[data-theme="dark"] .usage-pro { color: #34D399; background: rgba(52,211,153,0.12); }

.streak-badge {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 9px 0 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.streak-badge svg { width: 12px; height: 12px; display: block; color: #D97706; }
.streak-toast {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 7px 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* Small notes are a quiet white card with a grey icon (owner picked option A). */
.note-ico { flex: none; width: 14px; height: 14px; color: #94A3B8; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.note-ico.flame { color: #F59E0B; fill: currentColor; stroke: none; }
.toast-spin {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--text-secondary);
  border-right-color: transparent;
  opacity: 0.6;
  animation: toast-spin 0.8s linear infinite;
}
@keyframes toast-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .toast-spin { animation-duration: 2.4s; } }


/* ========== HISTORY MODAL ========== */
.history-modal {
  /* Top sheet: anchored to the top and sides only, sized to its content
     (anchoring all four edges filled the whole container with empty white
     space below short drawers like Swap). Fixed, not absolute: the popup
     body scrolls, so an absolute sheet opened from the ingredient list
     landed above the scroll position and looked like nothing happened. */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: auto;
  max-height: 100vh;
  z-index: 50;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  overflow-y: auto;
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.history-modal.hidden { display: none; }

.history-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.history-modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.history-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.history-close:hover { background: var(--bg-page); }

.history-tier-badge {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.history-tier-badge.history-tier-pro { color: #059669; }

.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-page);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.history-item:hover { background: var(--border-light); }

.history-item-main {
  flex: 1;
  min-width: 0;
}

.history-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.history-item-delete {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.history-item:hover .history-item-delete { opacity: 1; }
.history-item-delete:hover { color: var(--color-error); }

.history-empty {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 24px 12px;
}

.history-locked-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(16,185,129,0.08);
  border-radius: 8px;
  cursor: pointer;
}
.history-locked-cta { color: #059669; font-weight: 700; margin-left: 2px; }
.history-locked-note span { line-height: 1.45; text-align: left; }
.history-locked-note .ico { flex: none; }

.history-loading {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 24px;
  list-style: none;
}

/* Saved Recipes: Saved / Recent tabs and the star on each row */
.history-tabs { display: flex; gap: 4px; background: var(--bg-page); border-radius: 8px; padding: 3px; margin: 2px 0 10px; }
.history-tab { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 6px; border-radius: 6px; cursor: pointer; }
.history-tab.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .history-tab.active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.history-star { flex: none; background: transparent; border: none; cursor: pointer; padding: 2px 2px; line-height: 0; border-radius: 6px; }
.history-star svg, .save-recipe-btn svg { width: 18px; height: 18px; fill: none; stroke: #9CA3AF; stroke-width: 1.8; stroke-linejoin: round; }
.history-star:hover svg, .save-recipe-btn:hover svg { stroke: #F59E0B; }
.history-star.on svg, .save-recipe-btn.on svg { fill: #F59E0B; stroke: #F59E0B; }
.history-hint { font-size: 11px; color: var(--text-muted); margin: 8px 2px 0; }

/* Save button next to the recipe title */
.recipe-title-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.recipe-title-row:not(:has(> :not(.hidden))) { display: none; }
.recipe-title-row .recipe-title { flex: 1; min-width: 0; margin-top: 0; }
.save-recipe-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; background: transparent; border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 3px 8px 3px 6px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.save-recipe-btn svg { width: 14px; height: 14px; }
.save-recipe-btn:hover { border-color: #F59E0B; }
.save-recipe-btn.on { color: #B45309; background: #FEF3C7; border-color: #FDE68A; }
[data-theme="dark"] .save-recipe-btn.on { color: #FBBF24; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); }
.save-recipe-btn:disabled { opacity: 0.6; cursor: default; }

/* The little ⇄ Swap button on each ingredient row */
.substitute-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}
.substitute-btn:hover {
  background: rgba(16,185,129,0.08);
  border-color: #10B981;
  color: #059669;
}

.theme-toggle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-page);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  padding: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--border-light);
}
.header-icon-btn { color: var(--text-secondary); }
.header-icon-btn .ico { width: 15px; height: 15px; }
.header-icon-btn:hover { color: var(--text-primary); }
.header-icon-btn.active { color: var(--text-primary); background: var(--border-light); }

.theme-icon-dark { display: inline; }
.theme-icon-light { display: none; }

[data-theme="dark"] .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: inline; }

/* ========== ACCOUNT INDICATOR ========== */
.account-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-email {
  font-size: 10px;
  color: var(--text-muted);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sign-out-btn {
  font-size: 10px;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sign-out-btn:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}

/* ========== SIGN-IN PROMPT ========== */
.sign-in-prompt {
  margin: var(--block-gap) var(--gutter);
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.sign-in-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.sign-in-why {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.sign-in-why strong { color: var(--text-primary); }
.google-icon-sm { flex-shrink: 0; vertical-align: middle; }

.sign-in-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: #111827;
  border: 1px solid #111827;
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.2), 0 6px 16px rgba(17, 24, 39, 0.22);
  width: 100%;
  justify-content: center;
}
/* Google's "G" sits on a white disc on the dark button (Google's dark style). */
.sign-in-btn .google-icon { background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box; }
.sign-in-btn:hover { background: #1f2937; }
.sign-in-btn:disabled { opacity: 0.6; cursor: default; }
[data-theme="dark"] .sign-in-btn { background: #f9fafb; border-color: #f9fafb; color: #111827; }
[data-theme="dark"] .sign-in-btn:hover { background: #fff; }

.sign-in-btn:active {
  transform: scale(0.98);
}

.google-icon {
  flex-shrink: 0;
}

/* ========== UPGRADE BANNER ========== */
.upgrade-banner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: var(--block-gap) var(--gutter);
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Share sheet — same card language as the rest of the popup. */
.share-card {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
/* Share sheet: one main action (Invite), one copy, the code on a quiet line. */
.sh-gift { width: 44px; height: 44px; border-radius: 50%; background: rgba(16,185,129,0.12); display: grid; place-items: center; margin-bottom: 12px; }
.sh-gift svg { width: 22px; height: 22px; fill: none; stroke: #059669; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-title { font-size: 18px; line-height: 1.3; }
.sh-how { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 16px; }
.sh-main { display: block; width: 100%; padding: 12px; font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: #059669; border: 0; border-radius: var(--radius-md); cursor: pointer; }
.sh-main:hover { filter: brightness(1.06); }
.sh-copy { display: block; width: 100%; margin-top: 8px; padding: 11px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); cursor: pointer; }
.sh-copy:hover { border-color: #10B981; color: #059669; }
.sh-code { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-light); font-size: 13px; color: var(--text-secondary); }
.sh-code.hidden { display: none; }
.sh-code b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: 0.08em; color: var(--text-primary); }
.sh-code-copy { margin-left: auto; padding: 0; font: inherit; font-weight: 600; color: #059669; background: none; border: 0; cursor: pointer; }
.sh-redeem-link { display: block; margin: 4px auto 0; padding: 4px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sh-redeem-link.hidden { display: none; }
.share-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #059669;
  margin-bottom: 6px;
}
.share-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.share-blurb {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.share-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.share-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.share-link-input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  font-size: 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  color: var(--text-secondary);
}
.share-copy-btn,
.my-referral-copy,
.referral-redeem-btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  background: #059669;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.share-copy-btn:hover, .my-referral-copy:hover, .referral-redeem-btn:hover { background: #047857; }
.referral-redeem-btn:disabled { opacity: 0.6; cursor: default; }

.share-options {
  display: flex;
  gap: 8px;
}
.share-option-btn {
  flex: 1;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
}
.share-option-btn:hover { border-color: #10B981; color: #059669; }
.share-toast {
  margin-top: 10px;
  padding: 7px 10px;
  font-size: 12px;
  text-align: center;
  border-radius: var(--radius-sm);
  background: rgba(16,185,129,0.12);
  color: #047857;
  font-weight: 600;
}
.share-icon { font-size: 16px; font-weight: 700; }

/* Header overflow (⋯) menu — collapses share/history/theme to de-crowd the
   header on a ~360px popup (Cycle-12 finding). */
.header-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #059669;
  border: 1px solid #059669;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}
.header-share-btn:hover { background: #047857; }
.header-share-btn .share-icon { font-size: 13px; font-weight: 800; }

.overflow-wrap { position: relative; display: inline-flex; }
.overflow-dots { font-size: 18px; line-height: 1; font-weight: 700; color: var(--text-primary); }
.overflow-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 184px;
  padding: 6px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 60;
}
.overflow-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}
.overflow-item:hover { background: var(--bg-hover, rgba(0,0,0,0.06)); }
/* Thin dividers between menu groups: use, preferences, feedback, account. */
/* Dark mode / sound rows: a small switch on the right shows the state. */
.overflow-switch-row .mini-switch { margin-left: auto; position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--border-light); transition: background 0.15s ease; flex: none; }
.overflow-switch-row .mini-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s ease; }
.overflow-switch-row[aria-checked="true"] .mini-switch { background: #059669; }
.overflow-switch-row[aria-checked="true"] .mini-switch::after { transform: translateX(12px); }
[data-theme="dark"] .overflow-switch-row .mini-switch { background: rgba(255,255,255,0.18); }
[data-theme="dark"] .overflow-switch-row[aria-checked="true"] .mini-switch { background: #10B981; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.overflow-sep { height: 1px; margin: 4px 8px; background: var(--border-light); }
.overflow-sep-account:has(+ #manageSubButton.hidden + #signOutButton.hidden) { display: none; }
.overflow-ico { font-size: 14px; width: 18px; text-align: center; flex: 0 0 auto; }

/* The user's own short referral code, shown in the share sheet when signed in */
.my-referral-code { margin-bottom: 14px; }
.my-referral-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  border: 1px solid var(--border-light);
}
.my-referral-value {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-primary);
}

/* Referral redeem (Phase-B): new user enters a friend's code for a free month */
.referral-redeem {
  padding: 14px 16px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
}
.referral-redeem-row { display: flex; gap: 8px; }
.referral-code-input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  font-size: 13px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  color: var(--text-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: inherit;
}
.referral-code-input::placeholder { text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.referral-code-input:focus { outline: none; border-color: rgba(16,185,129,0.6); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
.referral-redeem-msg {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
}
.referral-redeem-msg.ok { background: rgba(16,185,129,0.12); color: #047857; }
.referral-redeem-msg.err { background: rgba(239,68,68,0.10); color: #b91c1c; }

/* Paste-recipe fallback — recovers a blocked first scan when extraction fails. */
.paste-fallback {
  margin: var(--block-gap) var(--gutter);
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.paste-fallback-title { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-primary); margin-bottom: 4px; }
.paste-fallback-hint { font-size: 13px; line-height: 1.45; color: var(--text-secondary); margin-bottom: 12px; }
/* Neutral contextual note (e.g. "couldn't auto-read this page") — folded into
   the card instead of a separate red banner above it. */
.paste-fallback-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
}

/* No recipe on this page: same flat card as the results, plus example recipes. */
.nr-card { margin: 16px var(--gutter) 10px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 18px 20px; }
.nr-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.nr-title { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-primary); margin-bottom: 4px; }
.nr-text { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.nr-ico { width: 16px; height: 16px; vertical-align: -3px; padding: 1px; border: 1px solid var(--border-light); border-radius: 4px; background: #fff; }
.nr-try { margin: 18px var(--gutter) 16px; }
.nr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nr-chip { font: inherit; font-size: 12px; font-weight: 600; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 999px; padding: 5px 10px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.nr-chip:hover { color: #059669; border-color: rgba(16,185,129,0.5); }
.nr-alt { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-light); }
.nr-paste { display: block; width: 100%; margin: 8px 0 0; padding: 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.nr-paste { background: var(--bg-page); }
.nr-paste:hover { color: #059669; border-color: rgba(16,185,129,0.5); }

/* Calm empty state (site access prompt in the side panel). */
.empty-state {
  margin: 24px var(--gutter);
  padding: 8px 20px;
  text-align: center;
}
.empty-state-icon {
  line-height: 1;
  margin: 0 auto 14px;
  color: #10B981;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(16,185,129,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.empty-state-title { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-primary); margin-bottom: 5px; }
.empty-state-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 280px;
  margin: 0 auto 18px;
}
/* Quiet secondary action — branded, not a default blue link. */
.empty-state-link {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 9px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}
.empty-state-link:hover { color: #059669; border-color: rgba(16,185,129,0.5); }
.paste-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-primary);
  resize: vertical;
  margin-bottom: 12px;
}
.paste-input:focus { outline: none; border-color: rgba(16,185,129,0.6); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
.paste-servings { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.paste-servings input { width: 64px; padding: 7px 8px; font: inherit; font-size: 14px; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-sm); }
.paste-servings input:focus { outline: none; border-color: #10B981; }
.paste-analyze-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  background: #059669;
  color: #fff;
  cursor: pointer;
}
.paste-analyze-btn:hover { filter: brightness(1.06); }
.paste-analyze-btn:disabled { opacity: 0.6; cursor: default; }

/* Soft paywall — non-blocking nudge under results on the last free scan. */
.soft-paywall {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 2px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
}
.soft-paywall-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-primary);
}
.soft-paywall-cta {
  flex: 0 0 auto;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  background: #059669;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.soft-paywall-cta:hover { background: #047857; }
.nudge-card { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 8px 10px 8px 12px; border-radius: var(--radius-sm); background: rgba(16,185,129,0.07); border: 1px solid rgba(16,185,129,0.25); }
.nudge-text { flex: 1; font-size: 12px; line-height: 1.35; color: var(--text-primary); }
.nudge-actions { display: inline-flex; gap: 6px; flex: none; }
.nudge-primary { padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; border: none; border-radius: 6px; background: #059669; color: #fff; cursor: pointer; white-space: nowrap; }
.nudge-primary:hover { background: #047857; }
.nudge-secondary { padding: 4px 6px; font: inherit; font-size: 12px; font-weight: 600; border: none; background: none; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.nudge-secondary:hover { color: var(--text-primary); }
.nudge-primary:focus-visible, .nudge-secondary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nudge-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.nudge-card.nudge-rate { align-items: center; gap: 12px; padding: 10px 12px; }
.nudge-card.nudge-rate .nudge-body { flex-direction: column; align-items: stretch; gap: 6px; }
.nudge-card.nudge-rate .nudge-text { font-size: 13px; }
.nudge-card.nudge-rate .nudge-actions { justify-content: space-between; align-items: center; }
.nudge-feedback { align-self: flex-start; padding: 0; font: inherit; font-size: 12px; font-weight: 600; border: none; background: none; color: var(--text-secondary); cursor: pointer; }
.nudge-feedback:hover { color: var(--text-primary); text-decoration: underline; }
.nudge-feedback:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* The loading-screen athlete bikes in, steps off and waves (utils/loadingAthlete.js). */
.nudge-waver { width: 98px; height: 56px; flex: none; overflow: visible; --athlete-limb: #111827; --athlete-prop: #3b82f6; }
[data-theme="dark"] .nudge-waver { --athlete-limb: #F0F6FC; }
.nudge-card.nudge-rate { overflow: hidden; }

.nudge-stars { display: inline-flex; gap: 2px; }
.nudge-star { padding: 2px; border: none; background: none; cursor: pointer; color: #F59E0B; line-height: 0; }
.nudge-star svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(245,158,11,0.35)); transition: transform 0.15s ease, filter 0.15s ease; }
/* Button-like: a soft steady glow; hovering a star lifts it and the ones before it. */
.nudge-stars:hover .nudge-star svg { transform: scale(1.1); filter: drop-shadow(0 0 5px rgba(245,158,11,0.6)); }
.nudge-star:hover ~ .nudge-star svg { transform: none; filter: drop-shadow(0 0 2px rgba(245,158,11,0.35)); opacity: 0.45; }
.nudge-star:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .nudge-star svg { animation: none; }
}

.upgrade-banner-text strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.plan-context { font-size: 12px; color: var(--text-muted); margin: -4px 0 6px; }
/* Opened from a Pro feature (Save, Swap...): say so plainly. */
.plan-context.plan-reason { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.plan-recipe { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.plan-recipe.hidden { display: none; }
.plan-recipe b { color: var(--text-primary); font-weight: 500; }

/* Pro perks: the same four lines as the pricing section on the website. */
.plan-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.plan-perks li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.35; color: var(--text-primary); }
.plan-check { width: 15px; height: 15px; flex: none; fill: none; stroke: #059669; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Plan switch (Yearly / Monthly), like the website's Pro card; the price follows it. */
.plan-switch { align-self: flex-start; display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border-light); border-radius: 999px; background: var(--bg-page, #f1f5f9); }
.plan-switch label { cursor: pointer; }
.plan-switch input { position: absolute; opacity: 0; pointer-events: none; }
.plan-switch label > span { display: block; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.plan-switch .plan-free { margin-left: 4px; font-size: 11.5px; }
.plan-switch input:checked + span { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15,23,42,.1); }
.plan-switch input:focus-visible + span { box-shadow: var(--focus-ring); }
.plan-amount { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.plan-cost .plan-per { font-size: 13px; }
.plan-cost .plan-billing { margin-top: 2px; }
.plan-cost-monthly { display: none; }
.upgrade-banner:has(input[value="monthly"]:checked) .plan-cost-annual { display: none; }
.upgrade-banner:has(input[value="monthly"]:checked) .plan-cost-monthly { display: block; }
.plan-free { font-size: 12px; font-weight: 600; color: #059669; }
.plan-billing { font-size: 12px; color: var(--text-secondary); }
.plan-per { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
[data-theme="dark"] .plan-free, [data-theme="dark"] .plan-check { color: #34d399; stroke: #34d399; }
/* Colours come from the shared dark button style further down. */
.plan-continue {
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
/* Signed out, the button reads "Continue with Google" with Google's logo on a white disc. */
.plan-continue .plan-google { background: #fff; border-radius: 50%; padding: 2px; vertical-align: -5px; margin-right: 8px; }
.plan-continue:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.plan-continue:disabled { opacity: 0.6; cursor: not-allowed; }
.plan-note { margin-top: -4px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.plan-keep { margin-top: -8px; text-align: center; font-size: 12px; color: var(--text-muted); }

/* ========== ERROR MESSAGE ========== */
.error-message {
  background: rgba(239,68,68,0.07);
  color: var(--color-error);
  border: 1px solid rgba(239,68,68,0.18);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.45;
  margin: var(--block-gap) var(--gutter);
}

/* ========== LOADING ========== */
.loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* Loading Ring - Simple spinning ring loader */
.loading-ring-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 60px 20px;
  width: 100%;
  min-height: 300px;
  position: relative;
  z-index: 1;
}

.loading-ring-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.loading-ring-container.hidden {
  display: none !important;
}

.loading-ring-svg {
  width: 120px;
  height: 120px;
  animation: spin-ring 1.2s linear infinite;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}

.loading-ring-bg {
  opacity: 0.15;
}

.loading-ring-segment {
  /* Segments are rotated in SVG transform attribute */
}

@keyframes spin-ring {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========== MAIN CONTENT ========== */
#mainContent {
  padding: var(--gutter);
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ========== ANALYZE BUTTON ========== */
.analyze-button-container {
  width: 100%;
  margin: 0 auto 20px;
}

.analyze-button {
  width: 100%;
  padding: 18px 24px;
  background: #059669;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.analyze-button .button-content-default,
.analyze-button .button-content-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.analyze-text {
  font-size: 15px;
  font-weight: 600;
  color: white;
}

.analyze-hint {
}

.analyze-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.analyze-button:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.95);
}

.analyze-button:disabled {
  background: var(--border-light);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
}

.analyze-button:focus { outline: none; }
.analyze-button:focus-visible { box-shadow: var(--focus-ring); }

/* Spinner */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

[data-theme="dark"] .analyze-button {
  background: #059669;
}


@keyframes spin { to { transform: rotate(360deg); } }

.loading-text {
  font-size: 15px;
  font-weight: 600;
  color: white;
}

/* ========== MACROS SECTION ========== */
.macros-section {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 20px;
}

/* View toggle */
.view-toggle {
  display: flex;
  position: relative;
  margin-top: 4px;
  margin-bottom: 16px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 3px;
  gap: 0;
}

.view-toggle-btn {
  flex: 1;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 1;
}

.view-toggle-btn.active {
  color: var(--text-primary);
}

.view-toggle-btn:focus { outline: none; }
.view-toggle-btn:focus-visible { box-shadow: var(--focus-ring); }

.view-toggle::before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--bg-card);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.view-toggle.label-active::before {
  transform: translateX(100%);
}

/* Per-serving hero card */
.per-serving {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px 20px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.per-serving .donut-bg { stroke: var(--bg-card); }

/* Names the card's number: these macros are PER SERVING, not the whole recipe. */
.per-serving-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  margin-bottom: 12px;
}

.hero-layout {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hero-chart {
  position: relative;
  flex-shrink: 0;
  width: 110px;
  height: 110px;
}

.donut-chart {
  transform: rotate(0deg);
}

.donut-segment {
  transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease;
}

.donut-center {
  position: absolute;
  inset: 0;
  pointer-events: none; /* let hovers reach the ring segments beneath */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donut-cal-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-on-dark);
  line-height: 1;
}

.donut-cal-label {
  font-size: 11px;
  color: var(--text-on-dark-muted);
  margin-top: 2px;
}

.hero-macros {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-macro-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-macro-name {
  font-size: 13px;
  color: var(--text-on-dark-muted);
  width: 55px;
  min-width: 50px;
}

.hero-macro-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-on-dark);
  min-width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hero-macro-unit {
  font-size: 12px;
  color: var(--text-on-dark-muted);
  margin-left: 1px;
}

.hero-macro-pct {
  font-size: 11px;
  color: var(--text-on-dark-muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}


/* Donut explainer, shown on hover or keyboard focus */
.donut-segment { cursor: pointer; pointer-events: stroke; transition: stroke-width 0.12s ease; }
.donut-segment:hover { stroke-width: 12; }
.donut-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
  width: max-content;
  max-width: 200px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #e5e7eb;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 500;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}
.donut-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 10px;
  height: 10px;
  background: #0f172a;
  transform: translateX(-50%) rotate(45deg);
}
.donut-tip b { color: #fff; font-weight: 700; }
.hero-chart.tip-open .donut-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.per-serving .copy-macros-button { background: var(--bg-page); color: var(--text-secondary); border: 1px solid var(--border-light); }
.per-serving .copy-macros-button:hover { color: var(--text-primary); border-color: var(--border-focus); background: var(--bg-card); }

/* Compact ingredient rows: name and quantity left, calories and P F C right. */
.ingredients-hint { font-size: 12px; color: var(--text-muted); margin: -2px 0 10px; }
.ingredients-hint .hint-link { border: none; background: none; padding: 0; color: #059669; font-weight: 600; font-size: 12px; cursor: pointer; }
.ingredients-hint .hint-link:hover { text-decoration: underline; }
.ing-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ing-main .ing-name-short { flex: none; }
.ing-qty-short { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ing-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.ing-mac-short { display: flex; gap: 7px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ing-mac-short .mp { color: var(--color-protein); }
.ing-mac-short .mf { color: var(--color-fat); }
.ing-mac-short .mc { color: var(--color-carbs); }

.copy-macros-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 16px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.08);
  color: var(--text-on-dark-muted);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  transition: all 0.15s ease;
}

.copy-macros-button:hover {
  background: rgba(255,255,255,0.15);
  color: var(--text-on-dark);
}

.copy-macros-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
}

/* Nutrition Label */
.nutrition-label {
  background: var(--bg-card);
  border: 2px solid var(--text-primary);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.nf-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 2px;
}

.nf-divider { border: none; margin: 2px 0; }
.nf-divider.thick { border-top: 8px solid var(--text-primary); margin: 4px 0; }
.nf-divider.medium { border-top: 4px solid var(--text-primary); margin: 3px 0; }
.nf-divider.thin { border-top: 1px solid var(--text-primary); margin: 2px 0; }

.nf-serving-size, .nf-servings {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.6;
}

.nf-calories-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.nf-calories-label { font-size: 16px; font-weight: 700; }
.nf-calories-value { font-size: 22px; font-weight: 700; }
.nf-dv-header { text-align: right; font-size: 11px; font-weight: 700; }
.nf-row { display: flex; justify-content: space-between; font-size: 13px; line-height: 1.8; }
.nf-footnote { font-size: 10px; color: var(--text-muted); font-style: italic; margin-top: 4px; }

/* Recipe warning banner */
.recipe-warning-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,158,11,0.1);
  color: var(--color-warning);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
  border-left: 3px solid var(--color-warning);
}

/* Servings row */
.servings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.servings-note {
  margin: -8px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.servings-note.hidden { display: none; }

.goal-fit-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; background: none; border: none; padding: 4px 0; font: inherit; font-size: 12px; font-weight: 600; color: #059669; cursor: pointer; }
.goal-fit-toggle:hover { text-decoration: underline; }
.goal-fit-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
[data-theme="dark"] .goal-fit-toggle { color: #34d399; }
.goal-fit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 16px; font-size: 13px; color: var(--text-secondary); }
.goal-fit-input, .goal-fit-unit { font: inherit; font-size: 13px; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 6px; padding: 3px 6px; }
.goal-fit-input { width: 56px; }
.goal-fit-unit { padding: 3px 2px; cursor: pointer; }
.goal-fit-input:focus, .goal-fit-unit:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.goal-fit-result { white-space: nowrap; }
.goal-fit-result strong { color: var(--text-primary); }
.goal-fit-macros { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.goal-fit-cal { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.goal-fit-chev { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.goal-fit-toggle.open .goal-fit-chev { transform: rotate(180deg); }

.servings-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.servings-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.stepper-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-page);
  cursor: pointer;
  font-size: 16px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}

.stepper-btn:hover {
  background: var(--border-light);
}

.stepper-btn:active {
  background: var(--text-muted);
  color: white;
}

.stepper-input {
  width: 44px;
  height: 32px;
  border: none;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card);
  -moz-appearance: textfield;
}

.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.stepper-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.stepper-btn:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Total macros pills */
.total-macros-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.total-macros-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.total-pill {
  flex: 1;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  text-align: center;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.total-pill-cal { border-left: 3px solid #94A3B8; }
.total-pill-protein { border-left: 3px solid var(--color-protein); }
.total-pill-fat { border-left: 3px solid var(--color-fat); }
.total-pill-carbs { border-left: 3px solid var(--color-carbs); }

.total-pill-label {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}

.total-pill-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.total-pill-unit {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 1px;
}

/* ========== INGREDIENTS SECTION ========== */
.ingredients-section {
  width: 100%;
  margin-bottom: 20px;
}

.ingredients-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ingredients-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ingredients-summary {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

/* Calorie bar */
.calorie-bar {
  display: flex;
  height: 6px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--bg-page);
}

.calorie-bar-seg {
  position: relative;
  height: 100%;
  transition: width 0.4s ease;
  min-width: 2px;
  cursor: help;
}

.calorie-bar-seg:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-hero);
  color: var(--text-on-dark);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  z-index: 10;
}

.reliability-success { background: var(--color-success); }
.reliability-warning { background: var(--color-warning); }
.reliability-error   { background: var(--color-error); }
.calorie-bar-seg:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); }
.calorie-bar-seg:last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0; }
.calorie-bar-seg:only-child { border-radius: var(--radius-full); }

.analysis-progress {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* Retry pill sits inline with Copy list (no extra bottom margin). */
.retry-failed-container {
  margin: 0;
}

.retry-failed-button {
  font-size: 12px;
  padding: 6px 12px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 500;
  transition: all 0.15s ease;
}

.retry-failed-button:hover {
  background: var(--border-light);
}

.ingredient-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Ingredient cards - collapsed/expanded */
.ingredient-item {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.ingredient-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-focus);
}

.ing-collapsed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}

.ing-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ing-status.success { background: var(--color-success); }
.ing-status.warning { background: var(--color-warning); }
.ing-status.error { background: var(--color-error); }

/* Progressive rendering: pending ingredient (still resolving) */
.ing-status.pending {
  background: var(--text-muted, #9ca3af);
  opacity: 0.6;
  animation: pulse-pending 1.2s ease-in-out infinite;
}
.ing-collapsed.ing-pending { cursor: default; }
.ing-collapsed.ing-pending .ing-name-short { opacity: 0.75; }
.ing-cal-pending {
  color: var(--text-muted, #9ca3af);
  font-weight: 500;
  letter-spacing: 1px;
}
@keyframes pulse-pending {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .ing-status.pending { animation: none; }
}

.ing-name-short {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ing-name-editable { cursor: text; border-bottom: 1px dashed transparent; }
.ing-collapsed:hover .ing-name-editable { border-bottom-color: transparent; }
.ing-name-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-page);
  border: 1px solid var(--border-focus);
  border-radius: 4px;
  padding: 2px 6px;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
  outline: none;
}

.ing-cal-short {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.ing-expand-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  width: 16px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.ing-expand-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ing-expand-arrow.open { transform: rotate(180deg); }
.ing-collapsed:hover .ing-expand-arrow { color: var(--text-secondary); }

/* Rows line up at the top: dot, name, calories and chevron share the first line. */
.ing-collapsed { align-items: flex-start; }
.ing-collapsed .ing-status { margin-top: 6px; }

/* Rename: a pencil appears next to the name on hover instead of a tooltip. */
.ing-name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ing-name-line .ing-name-short { flex: 0 1 auto; min-width: 0; }
.ing-rename-icon { display: inline-flex; flex: none; color: var(--text-muted); opacity: 0; cursor: pointer; transition: opacity 0.15s ease; }
.ing-rename-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ing-collapsed:hover .ing-rename-icon { opacity: 1; }
.ing-rename-icon:hover { color: var(--text-primary); }
.ing-name-line:has(.ing-name-input) .ing-rename-icon { display: none; }
@media (hover: none) { .ing-rename-icon { opacity: 0.6; } }

.ing-expanded {
  padding: 0 14px 14px;
  border-top: 1px solid var(--border-light);
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ing-match {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin: 10px 0 8px;
}

.ing-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ing-qty-edit {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ing-qty-edit input {
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-page);
  color: var(--text-primary);
  transition: all 0.15s ease;
}

.ing-qty-edit input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.ing-qty-edit input[type="number"] { width: 68px; text-align: center; }
.ing-qty-edit input[type="text"] { width: 118px; } /* fits "tablespoon" / "teaspoon" without clipping */
.ing-times { color: var(--text-muted); font-size: 12px; }
.ing-weight { font-size: 12px; color: var(--text-muted); }

.ing-macro-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.ing-pill {
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.ing-pill.protein { background: rgba(16,185,129,0.1); color: var(--color-protein); }
.ing-pill.fat { background: rgba(245,158,11,0.1); color: var(--color-fat); }
.ing-pill.carbs { background: rgba(59,130,246,0.1); color: var(--color-carbs); }

.ing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.remove-ingredient-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  margin-right: auto;
}
.remove-ingredient-btn:hover { color: var(--color-error); border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.06); }
.per-serving-eyebrow-row { display: flex; align-items: center; }
.pct-mode-toggle {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
}
.pct-mode-toggle:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

.wrong-match-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(245,158,11,0.1);
  color: var(--color-warning);
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}

.wrong-match-btn:hover {
  background: rgba(245,158,11,0.2);
}

.wrong-match-btn:active {
  transform: scale(0.97);
}

.ingredient-alternatives {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

.ingredient-alternative {
  font-size: 12px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: var(--bg-page);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.15s ease;
}

.ingredient-alternative:hover {
  background: var(--border-light);
}

.alt-name { display: block; }
.alt-cal { font-size: 11px; color: var(--text-muted); }

/* Manual ingredient input */
.ingredient-alternative-manual {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

.manual-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px;
  background: var(--bg-page);
  border-radius: 4px;
}

.manual-quantity-input,
.manual-unit-input,
.manual-name-input {
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color 0.15s ease;
}

.manual-quantity-input {
  width: 60px;
  flex-shrink: 0;
}

.manual-unit-input {
  width: 80px;
  flex-shrink: 0;
}

.manual-name-input {
  flex: 1;
  min-width: 0;
}

.manual-quantity-input:focus,
.manual-unit-input:focus,
.manual-name-input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.manual-submit-btn {
  font-size: 12px;
  padding: 6px 12px;
  background: var(--color-link);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.manual-submit-btn:hover {
  background: #2563EB;
}

.manual-submit-btn:active {
  transform: scale(0.97);
}

.manual-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Error ingredient */
.ingredient-content-error {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ingredient-content-error .ingredient-name {
  color: var(--text-primary);
  font-weight: 500;
}

.ingredient-error-text {
  font-size: 12px;
  color: var(--color-warning);
  line-height: 1.4;
}

.ing-error-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.ingredient-error-name-input {
  flex: 1;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-page);
  color: var(--text-primary);
}

.ingredient-error-name-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.ingredient-error-retry-btn {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.ingredient-error-retry-btn:hover:not(:disabled) {
  background: var(--border-light);
}

.ingredient-error-retry-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Weight override (no_density case) */
.ingredient-weight-override {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.ingredient-weight-override label {
  font-weight: 500;
  color: var(--text-secondary);
}

.ingredient-weight-override input.ingredient-grams-input {
  width: 72px;
  padding: 4px 8px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: 13px;
}

.ingredient-weight-override input.ingredient-grams-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.ingredient-weight-hint {
  font-size: 11px;
  color: var(--text-muted);
}

/* ========== API KEY SETUP ========== */
.api-key-setup {
  padding: 30px 20px;
  text-align: center;
}

.api-key-setup h2 {
  font-size: 20px;
  margin: 0 0 12px 0;
  color: var(--text-primary);
  font-weight: 600;
}

.api-key-setup p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 8px 0;
  line-height: 1.6;
}

.api-key-note {
  font-size: 12px;
  color: var(--text-muted);
}

.api-key-note a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
}

.api-key-note a:hover {
  text-decoration: underline;
}

.api-key-input {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border-light);
  border-radius: 10px;
  font-size: 13px;
  margin: 20px 0;
  font-family: 'Monaco', 'Menlo', monospace;
  background: var(--bg-card);
  transition: all 0.2s ease;
}

.api-key-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* ========== FOOTER ========== */
.footer-links {
  padding: 8px 20px;
  text-align: center;
  font-size: 12px;
}

.footer-links a {
  color: var(--color-link);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* Estimated weight badge (vague-quantity class/generic-fallback) */
.estimated-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 14px;
  border-radius: 6px;
  background: rgba(100, 116, 139, 0.12);
  color: var(--text-secondary);
  cursor: help;
  vertical-align: middle;
  font-weight: 500;
}

/* Header "≈ est" chip — visible on the collapsed row so users know a value
   is approximate without expanding. */
.ing-est-chip {
  display: inline-block;
  margin-left: 0;
  margin-right: 2px;
  flex-shrink: 0;
  padding: 0 6px;
  font-size: 9px;
  line-height: 15px;
  border-radius: 6px;
  background: rgba(100, 116, 139, 0.12);
  color: var(--text-secondary);
  font-weight: 600;
  cursor: help;
  vertical-align: middle;
  white-space: nowrap;
}

/* Manual per-100g nutrition entry — corrects estimates/misses. */
.ing-manual-macros {
  margin: 6px 0 2px;
  padding: 8px;
  border-radius: 8px;
  background: var(--bg-subtle, rgba(0,0,0,0.03));
}
.ing-manual-label {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 5px;
}
/* Manual per-100g entry is collapsed by default (most people only adjust
   quantity or unit); category estimates open it since they need correcting. */
details.ing-manual-macros { margin: 6px 0 8px; }
details.ing-manual-macros:not([open]) { background: transparent; padding: 0 2px; }
details.ing-manual-macros > summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
details.ing-manual-macros > summary::-webkit-details-marker { display: none; }
details.ing-manual-macros[open] > summary { margin-bottom: 6px; }
details.ing-manual-macros > summary:hover { color: var(--text-primary); }
.mm-basis { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; flex-wrap: wrap; }
.mm-basis-sw { display: inline-flex; border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden; }
.mm-basis-btn { font: inherit; font-size: 12px; font-weight: 600; padding: 3px 9px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.mm-basis-btn + .mm-basis-btn { border-left: 1px solid var(--border-light); }
.mm-basis-btn.on { background: var(--border-light); color: var(--text-primary); }
.mm-basis-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mm-size { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.mm-size[hidden] { display: none; }
.mm-size input { width: 56px; font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border-light); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); }
.mm-size input.mm-need { border-color: #dc2626; }
.mm-amount { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.mm-amount input { width: 64px; font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border-light); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); }
.mm-amount input.mm-need { border-color: #dc2626; }
.ingredient-content-error .ing-manual-macros { margin-top: 10px; }
.ing-manual-row {
  display: flex;
  gap: 4px;
  align-items: flex-end; /* labels sit above inputs; Save aligns to the inputs */
}
/* Labeled field: names each number box (cal / protein / fat / carbs). */
.mm-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mm-field input { flex: none; } /* inside the column wrapper, don't stretch vertically */
.mm-field-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.ing-manual-row input {
  width: 100%;
  min-width: 0;
  flex: 1;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--bg-input, #fff);
  color: var(--text-primary);
}
.ing-manual-row .mm-save {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: #10B981;
  color: #fff;
  cursor: pointer;
}
.ing-manual-row .mm-save:hover { filter: brightness(1.05); }

/* Optional/garnish ingredient — flagged at parse time, excluded from totals
   by default. The user toggles the checkbox to include/exclude. */
.ingredient-item.excluded,
.ingredient-row.excluded {
  opacity: 0.55;
}
.optional-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 10px;
  line-height: 14px;
  border-radius: 6px;
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
  vertical-align: middle;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ingredient-optional-toggle {
  margin-left: 6px;
  vertical-align: middle;
  cursor: pointer;
}

/* Account row inside the ⋯ menu (moved out of the cramped header). */
.overflow-account {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}
.overflow-account-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.overflow-account .account-email {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* Ingredients header: summary + inline retry live together on the right. */
.ingredients-header-right { display: inline-flex; align-items: center; gap: 8px; }
.retry-failed-container { display: inline-flex; }
.retry-failed-button {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  line-height: normal;
}
.retry-failed-button:disabled { opacity: 0.6; cursor: default; }

/* Restored-from-cache note: reopening the popup on the same page shows the
   last result instantly instead of re-scanning (and re-charging). */
.restored-note {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.restored-rescan {
  border: none;
  background: transparent;
  color: #059669;
  font-weight: 600;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.restored-rescan:hover { text-decoration: underline; }

/* Copy grocery list — quiet pill in the Ingredients header. */
.copy-list-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  line-height: normal;
}
.copy-list-btn:hover { color: #059669; border-color: rgba(16,185,129,0.5); }

/* Side-panel mode: fill the panel instead of the fixed 440px popup width. */
body.side-panel { width: 100%; max-height: none; min-height: 100vh; }

/* Add-ingredient row under the list. */
.add-ingredient-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  font-family: inherit;
}
.add-ingredient-btn:hover { background: var(--bg-page); border-color: var(--text-muted); }
.add-ingredient-btn .add-plus { width: 13px; height: 13px; vertical-align: -2px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* Small "Pro" tag on features free users can't use yet, like the website's. */
.pro-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #059669; background: rgba(16,185,129,0.1); vertical-align: 1px; }
.pro-tag.hidden { display: none; }
[data-theme="dark"] .pro-tag { color: #34d399; background: rgba(52,211,153,0.12); }
.add-ingredient-row { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.add-ingredient-amount { display: flex; gap: 6px; align-items: center; }
.add-ingredient-qty, .add-ingredient-unit {
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm, 10px);
}
.add-ingredient-qty { width: 72px; text-align: center; }
.add-ingredient-unit { flex: 1; min-width: 0; }
.add-ingredient-qty:focus, .add-ingredient-unit:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.add-ingredient-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm, 10px);
}
.add-ingredient-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.add-ingredient-submit {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #059669;
  border: none;
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  font-family: inherit;
}
.add-ingredient-submit:hover { background: #047857; }

/* Daily targets (Pro): custom denominators for the % view. */
.eyebrow-actions { margin-left: auto; display: inline-flex; gap: 6px; }
/* "% DV | % cal" switch: the highlighted half is what the column shows. */
.pct-switch { display: inline-flex; border: 1px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; text-transform: none; letter-spacing: 0; }
.pct-switch button { font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 2px 8px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; }
.pct-switch button + button { border-left: 1px solid var(--border-light); }
.pct-switch button.active { background: var(--border-light); color: var(--text-primary); }
.pct-switch button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ing-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.ing-sort select { font: inherit; font-size: 11px; font-weight: 600; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 2px 4px; cursor: pointer; }
.ing-sort select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ingredients-header-row .copy-list-btn { font-size: 11px; font-weight: 600; padding: 2px 8px; color: var(--text-secondary); }
/* Sort, Copy grocery list and Look up missing share one height. */
.ingredients-header-row .ing-sort select,
.ingredients-header-row .copy-list-btn,
.ingredients-header-row .retry-failed-button { height: 26px; box-sizing: border-box; line-height: 1; display: inline-flex; align-items: center; }
.ingredients-header-row .ing-sort select { padding: 0 2px; border: none; background: transparent; color: var(--text-secondary); font-weight: 600; cursor: pointer; }
.ingredients-header-row .ing-sort select:hover { color: var(--text-primary); }
.ing-sort { gap: 4px; color: var(--text-muted); }
.ingredients-header-row .copy-list-btn { gap: 5px; border: none; background: transparent; padding: 0 2px; color: var(--text-secondary); }
.ingredients-header-row .copy-list-btn:hover { color: var(--text-primary); border: none; }
.ingredients-header-row .ing-sort select, .ingredients-header-row .copy-list-btn { font-size: 13px; }
.copy-list-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--text-muted); }
.ing-sort-icon { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ingredients-header-row .copy-list-btn, .ingredients-header-row .retry-failed-button { padding: 0 10px; }
.pct-mode-toggle.pct-mode-secondary { margin-left: 0; }
.targets-form {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
.targets-title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: 8px; }
.targets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.targets-field { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--text-on-dark-muted); }
.targets-field input {
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
  font: inherit;
  font-size: 12px;
  color: var(--text-on-dark);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
}
.targets-field input:focus { outline: none; border-color: rgba(255,255,255,0.5); }
.targets-low-note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.targets-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.targets-reset { background: transparent; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.7); border-radius: 6px; padding: 5px 9px; font-size: 11px; cursor: pointer; font-family: inherit; }
.targets-save { background: #059669; border: none; color: #fff; border-radius: 6px; padding: 5px 12px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; }
.targets-pro-hint { margin-top: 8px; font-size: 11px; color: rgba(255,255,255,0.75); }
.targets-upgrade-link { background: none; border: none; color: #34d399; font-weight: 700; cursor: pointer; padding: 0; font-family: inherit; font-size: 11px; text-decoration: underline; }

/* Loading cyclist: the ring spins around it; the rider pedals in place. */
.loading-ring-stage { position: relative; width: 120px; height: 120px; }
.loading-ring-stage .loading-ring-svg { position: absolute; inset: 0; }
.loading-ring-svg.js-driven { animation: none; }
.loading-athletes {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  --athlete-limb: #111827;
  --athlete-joint: #e63946;
}
[data-theme="dark"] .loading-athletes { --athlete-limb: #F0F6FC; --athlete-joint: #ff5a5f; }

/* Per-serving card is a light surface, same as the rest of the popup. */
.per-serving-eyebrow { color: var(--text-secondary); }
.donut-cal-value { color: var(--text-primary); }
.donut-cal-label { color: var(--text-secondary); }
.hero-macro-name, .hero-macro-unit, .hero-macro-pct { color: var(--text-secondary); }
.hero-macro-value { color: var(--text-primary); }
.pct-mode-toggle { border-color: var(--border-light); color: var(--text-secondary); }
.pct-mode-toggle:hover { color: var(--text-primary); border-color: var(--border-focus); }

/* Scan badge hover */
.streak-badge, .usage-counter { position: relative; cursor: default; }
.streak-badge::after, .usage-counter[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 8px;
  background: #0f172a;
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 30;
}
.streak-badge:hover::after, .streak-badge:focus-visible::after, .usage-counter[data-tip]:hover::after { opacity: 1; transform: translateY(0); }

/* Type scale, one step larger for readability. Small labels stay small but
   nothing below 11px; body-level text is 14px, numbers 15 to 16px. */
.recipe-title { font-size: 14px; }
.usage-counter { font-size: 12px; }
.streak-badge { font-size: 13px; }
.restored-note, .restored-rescan { font-size: 13px; }
.view-toggle-btn { font-size: 14px; }
.per-serving-eyebrow { font-size: 11px; }
.pct-mode-toggle { font-size: 11px; }
.hero-macro-name { font-size: 14px; width: 60px; }
.hero-macro-value { font-size: 16px; min-width: 42px; }
.hero-macro-unit { font-size: 13px; }
.hero-macro-pct { font-size: 12px; }
.donut-cal-value { font-size: 30px; }
.donut-cal-label { font-size: 12px; }

/* The number sits in the exact middle of the ring; "cal" hangs below it.
   Line-height under 1 trims the empty space the font reserves below digits. */
.donut-cal-value { line-height: 0.74; padding-top: 14px; }
.donut-cal-label { margin-top: 8px; }
/* Grams sit right after the number, as in the total cards ("4.5g"). */
.hero-macro-unit { margin-left: -6px; }
/* One style for section labels (Per serving, Total recipe). */
.per-serving-eyebrow, .total-macros-label, .ingredients-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.copy-macros-button { font-size: 13px; }
.servings-label { font-size: 14px; }
.stepper-input { font-size: 15px; }
.total-macros-label { font-size: 11px; }
.total-pill-label { font-size: 11px; }
.total-pill-value { font-size: 17px; }
.ingredients-hint { font-size: 13px; }
.ingredients-hint .hint-link { font-size: 13px; }
.copy-list-btn, .retry-failed-button { font-size: 12px; }
.ing-name-short, .ing-name-input { font-size: 14px; }
.ing-qty-short { font-size: 12px; }
.ing-cal-short { font-size: 14px; }
.ing-mac-short { font-size: 12px; }
.ing-est-chip { font-size: 10px; line-height: 16px; }
.add-ingredient-btn { font-size: 13px; }

/* Targets form on the light card */
.targets-form { background: var(--bg-page); border: 1px solid var(--border-light); }
.targets-title { color: var(--text-secondary); }
.targets-field { color: var(--text-secondary); }
.targets-field input { color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-light); }
.targets-reset { border: 1px solid var(--border-light); color: var(--text-secondary); background: var(--bg-card); }
.targets-pro-hint { color: var(--text-secondary); }
.targets-upgrade-link { color: #059669; }
/* Estimate chip and optional badge sit under the quantity, left side */
.ing-flags { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.ing-flags .ing-est-chip { margin: 0; }
.ing-flags .optional-badge { margin: 0; }
.ing-flags .ingredient-optional-toggle { margin: 0; }
.recipe-title-label { color: var(--text-muted); font-weight: 500; }

/* Status chips under the recipe title */
.recipe-status { display: flex; gap: 6px; margin-top: 6px; }
.status-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--bg-page); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 2px 7px 2px 6px; }
.status-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.status-chip-edited { color: #B45309; background: #FEF3C7; border-color: #FDE68A; }

/* Share sheet: one row shape for every field, one button size */
.share-steps { margin: 0 0 14px; padding-left: 20px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.share-steps li { margin-bottom: 2px; }
.share-steps li::marker { color: #059669; font-weight: 700; }
.share-row { display: grid; grid-template-columns: 1fr 84px; gap: 8px; align-items: stretch; margin-bottom: 14px; }
.share-row-2 { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
.share-input { min-width: 0; height: 40px; padding: 0 12px; font-size: 13px; line-height: 40px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-page); color: var(--text-secondary); box-sizing: border-box; font-family: inherit; }
.share-input:focus { outline: none; border-color: var(--border-focus); }
.share-code { font-size: 16px; font-weight: 800; letter-spacing: 0.12em; color: var(--text-primary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-btn-primary { height: 40px; padding: 0 12px; font-size: 13px; font-weight: 700; border: none; border-radius: var(--radius-sm); background: #059669; color: #fff; cursor: pointer; font-family: inherit; }
.share-btn-primary:hover { background: #047857; }
.share-btn-primary:disabled { opacity: 0.6; cursor: default; }
.share-btn-secondary { height: 40px; padding: 0 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); cursor: pointer; font-family: inherit; }
.share-btn-secondary:hover { border-color: #10B981; color: #059669; }
.share-toast { margin-top: 10px; }

/* Copy macros: a small chip, right-aligned, not a full-width bar */
.per-serving .copy-macros-button { width: auto; margin: 10px 0 0 auto; padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: var(--radius-sm); gap: 5px; }
.per-serving .copy-macros-button .ico { width: 12px; height: 12px; }
.per-serving-footer { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.per-serving-footer .copy-macros-button { margin: 0 0 0 auto; }
.protein-density { font-size: 12px; color: var(--text-secondary); }
.protein-density strong { color: var(--color-protein); font-weight: 700; }

/* Narrow side panel: keep "24% DV" on one line by tightening the donut row. */
.hero-macro-pct { white-space: nowrap; }
@media (max-width: 420px) {
  .hero-layout { gap: 14px; }
  .hero-chart, .donut-chart { width: 96px; height: 96px; }
  .hero-macro-row { gap: 6px; }
  .hero-macro-name { width: 52px; min-width: 0; }
  .hero-macro-value { min-width: 34px; }
}

/* Inline swap: type the replacement right inside the ingredient row. */
.ing-swap-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ing-swap-row.hidden { display: none; }
.ing-swap-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-page);
  color: var(--text-primary);
}
.ing-swap-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.ing-swap-go {
  flex: 0 0 auto;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: #10B981;
  color: #fff;
  cursor: pointer;
}
.ing-swap-go:hover { filter: brightness(1.05); }

/* Feedback & ideas sheet */
.feedback-form { display: flex; flex-direction: column; gap: 10px; }
.feedback-intro { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.feedback-message { width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical; padding: 10px 12px; font: inherit; font-size: 13px; line-height: 1.45; color: var(--text-primary); background: var(--bg-page); border: 1px solid var(--border-light); border-radius: var(--radius-sm); }
.feedback-message:focus, .feedback-email:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.feedback-email { width: 100%; color: var(--text-primary); }
.feedback-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.feedback-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.feedback-actions .share-btn-primary { min-width: 88px; }
.feedback-actions .share-btn-primary:disabled { opacity: 0.6; cursor: default; }
.feedback-error { flex: 1; font-size: 12px; line-height: 1.35; color: var(--color-error); }
.feedback-thanks { text-align: center; padding: 8px 4px 4px; }
.feedback-thanks-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.feedback-thanks p { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }

/* Type scale for the controls between the cards: one 13px size.
   11px uppercase = section labels, 13px = controls and hints, 14px+ = data. */
.servings-label { font-size: 13px; font-weight: 500; }
.goal-fit-toggle { font-size: 13px; }
.ingredients-header-row .ing-sort select, .ingredients-header-row .copy-list-btn { font-size: 13px; font-weight: 500; }
.ingredients-hint { font-size: 13px; }

/* The total cards are the last thing in the macros section; one 24px gap
   before Ingredients (it was 20 + 20). */
.total-macros-row { margin-bottom: 0; }
.macros-section { margin-bottom: 24px; }
/* Copy macros: plain icon + text, like Sort and Grocery list. */
.per-serving .copy-macros-button { width: auto; margin: 0 0 0 auto; padding: 0 2px; height: 26px; gap: 5px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; border: none; border-radius: 4px; }
.per-serving .copy-macros-button:hover { color: var(--text-primary); background: transparent; border: none; }
.per-serving .copy-macros-button .ico { width: 14px; height: 14px; color: var(--text-muted); }
.per-serving .copy-macros-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.protein-density { font-size: 13px; }

/* Total cards: flat, the label word carries the macro colour. */
.total-pill, .total-pill-cal, .total-pill-protein, .total-pill-fat, .total-pill-carbs { border: 1px solid var(--border-light); box-shadow: none; }
.total-pill-label { color: var(--text-muted); }
.total-pill-protein .total-pill-label { color: var(--color-protein); }
.total-pill-fat .total-pill-label { color: var(--color-fat); }
.total-pill-carbs .total-pill-label { color: var(--color-carbs); }
/* Copy macros is an icon; it turns into a green check when copied. */
.per-serving .copy-macros-button .ico { width: 16px; height: 16px; }
.per-serving .copy-macros-button.copied .ico { color: #059669; stroke-width: 2.4; }
.ingredients-header-row { margin-bottom: 10px; }

/* Copy macros icon sits in the card header, after the % switch. */
.eyebrow-actions { align-items: center; }
.eyebrow-actions .copy-macros-button { margin: 0 !important; height: 24px; }

/* Invite: grey like the other header icons; green only on hover. */
.header-share-btn { color: var(--text-secondary); background: transparent; border: 1px solid var(--border-light); }
.header-share-btn:hover { color: #059669; background: transparent; border-color: var(--border-focus, var(--border-light)); }
[data-theme="dark"] .header-share-btn:hover { color: #34d399; }


/* Scan count is information, not a control: flame and number, no box. */
.streak-badge { background: transparent; border: none; padding: 0 4px; gap: 3px; }
.streak-badge svg { width: 13px; height: 13px; }


/* Amount and flags (≈ est, Optional) share one line so every row is the same height. */
.ing-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ing-sub .ing-flags { margin-top: 0; }

/* Unit the converter doesn't know: quiet amber outline (the estimate colour) and one hint line. */
.ingredient-unit-input.unit-unknown { border-color: #F59E0B; box-shadow: 0 0 0 1px rgba(245,158,11,0.25); }
.ing-unit-hint { margin: 4px 0 10px; font-size: 12px; color: var(--text-secondary); }
.ing-unit-hint .unit-list { display: inline; }
.ing-unit-hint .unit-list summary { display: inline; cursor: pointer; color: #059669; font-weight: 600; list-style: none; }
.ing-unit-hint .unit-list summary::-webkit-details-marker { display: none; }
.ing-unit-hint .unit-list[open] summary { color: var(--text-secondary); }
.ing-unit-hint .unit-list > div { margin-top: 4px; line-height: 1.45; }
.ing-unit-hint .unit-list b { font-weight: 600; color: var(--text-primary); margin-right: 4px; }
[data-theme="dark"] .ing-unit-hint .unit-list summary { color: #34d399; }

/* Theme switch: no colour transitions for that one frame (the dark mode switch keeps its slide). */
.theme-switching *:not(.mini-switch), .theme-switching *:not(.mini-switch)::before, .theme-switching *:not(.mini-switch)::after { transition: none !important; }

/* Recipe size (½× 1× 2× 3×) on the Total recipe row. Scales every
   ingredient amount and the totals; "Split into" only changes portions. */
.total-macros-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.total-macros-head .total-macros-label { margin-bottom: 0; }
.recipe-scale { display: inline-flex; border: 1px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-card); }
.recipe-scale button { font: inherit; font-size: 11px; font-weight: 600; padding: 2px 8px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; }
.recipe-scale button + button { border-left: 1px solid var(--border-light); }
.recipe-scale button.active { background: var(--border-light); color: var(--text-primary); }
.recipe-scale button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.servings-suffix { margin-left: -2px; }
.recipe-scale-custom { display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 2px 7px; border-left: 1px solid var(--border-light); font-size: 11px; font-weight: 600; color: var(--text-secondary); cursor: text; }
.recipe-scale-custom input { width: 22px; height: 16px; box-sizing: border-box; font: inherit; font-size: 11px; font-weight: 600; text-align: center; border: 1px solid var(--border-light); border-radius: 4px; background: var(--bg-page); color: var(--text-primary); padding: 0 2px; -moz-appearance: textfield; }
.recipe-scale-custom input::-webkit-outer-spin-button, .recipe-scale-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.recipe-scale-custom input:focus { outline: none; border-color: var(--text-muted); background: var(--bg-card); }
.recipe-scale-custom.active { background: var(--border-light); color: var(--text-primary); }
.recipe-scale-custom.active input { border-color: var(--text-muted); background: var(--bg-card); color: var(--text-primary); }
.total-servings-note { text-transform: none; letter-spacing: 0; font-weight: 500; }
/* Equal width for all five size cells. */
.recipe-scale > button, .recipe-scale-custom { min-width: 40px; box-sizing: border-box; justify-content: center; text-align: center; }
.recipe-scale-custom { padding: 2px 5px; }
.portion-reset { margin-left: auto; background: none; border: none; padding: 4px 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.portion-reset:hover { color: #059669; }
.recipe-scale-wrap { display: inline-flex; align-items: center; gap: 6px; }
.recipe-scale-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ── Feel (2026-10-08, Apple design review) ─────────────────────────────
   Small things only, the look is unchanged:
   - press feedback on the press itself, not on release
   - the ⋯ menu grows out of its button; sheets drop in from the top,
     the side they are attached to
   - big numbers: tighter tracking, digits of equal width (no jiggle as
     values change)
   - Reduce Motion turns these off (spinners stay: they say "working"). */
.nr-chip:active, .nr-paste:active, .share-btn-primary:active:not(:disabled),
.soft-paywall-cta:active, .header-share-btn:active, .theme-toggle:active,
.empty-state-link:active, .recipe-scale button:active, .pct-mode-toggle:active,
.copy-macros-button:active, .add-ingredient-btn:active, .nudge-feedback:active {
  transform: scale(0.97);
}
.overflow-item:active { background: var(--bg-page); }

.overflow-menu:not(.hidden) { transform-origin: top right; animation: sm-menu-in 0.14s ease-out; }
@keyframes sm-menu-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.history-modal:not(.hidden) { animation: sm-sheet-in 0.2s ease-out; }
@keyframes sm-sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.donut-cal-value { letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.total-pill-value { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .overflow-menu:not(.hidden), .history-modal:not(.hidden), .ing-expanded { animation: none; }
  [class]:active { transform: none !important; }
}

/* Dark mode switch fades (popup.js adds .theme-fade for a moment). */
html.theme-fade, html.theme-fade * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important; }

/* Go Pro in the ⋯ menu: same row, green text */
.overflow-item.overflow-pro { color: #059669; font-weight: 600; }
.overflow-item.overflow-pro .ico { stroke: #059669; }
[data-theme="dark"] .overflow-item.overflow-pro, [data-theme="dark"] .overflow-item.overflow-pro .ico { color: #34D399; stroke: #34D399; }

/* Filled buttons: dark with a soft shadow, like the website's Add to Chrome.
   Green stays for meaning (checks, the selected plan, protein). The main
   "go forward" buttons are taller, bolder and end in an arrow. In dark mode
   they turn light so they still stand out. */
.plan-continue, .paste-analyze-btn, .analyze-button, .soft-paywall-cta,
.ing-swap-go, .add-ingredient-submit, .share-btn-primary, .sh-main, .nudge-primary,
.targets-save, .ing-manual-row .mm-save, .referral-redeem-btn, .share-copy-btn, .my-referral-copy {
  background: #111827;
  color: #fff;
  filter: none;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.2), 0 3px 10px rgba(17, 24, 39, 0.2);
}
.plan-continue:hover, .paste-analyze-btn:hover, .analyze-button:hover:not(:disabled), .soft-paywall-cta:hover,
.ing-swap-go:hover, .add-ingredient-submit:hover, .share-btn-primary:hover, .sh-main:hover, .nudge-primary:hover,
.targets-save:hover, .ing-manual-row .mm-save:hover, .referral-redeem-btn:hover, .share-copy-btn:hover, .my-referral-copy:hover {
  background: #1f2937;
  filter: none;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.2), 0 6px 16px rgba(17, 24, 39, 0.28);
}
.plan-continue, .paste-analyze-btn { padding: 14px 12px; font-size: 14px; font-weight: 700; border-radius: 8px; }
.plan-continue, .paste-analyze-btn, .analyze-button { box-shadow: 0 1px 2px rgba(17, 24, 39, 0.2), 0 6px 16px rgba(17, 24, 39, 0.28); }
.plan-continue::after, .paste-analyze-btn::after, .analyze-text::after { content: "\2192"; margin-left: 8px; font-weight: 700; }
.analyze-text { font-weight: 700; }
[data-theme="dark"] .plan-continue, [data-theme="dark"] .paste-analyze-btn, [data-theme="dark"] .analyze-button, [data-theme="dark"] .soft-paywall-cta,
[data-theme="dark"] .ing-swap-go, [data-theme="dark"] .add-ingredient-submit, [data-theme="dark"] .share-btn-primary, [data-theme="dark"] .sh-main, [data-theme="dark"] .nudge-primary,
[data-theme="dark"] .targets-save, [data-theme="dark"] .ing-manual-row .mm-save, [data-theme="dark"] .referral-redeem-btn, [data-theme="dark"] .share-copy-btn, [data-theme="dark"] .my-referral-copy {
  background: #f9fafb;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .analyze-text { color: #111827; }
[data-theme="dark"] .plan-continue:hover, [data-theme="dark"] .paste-analyze-btn:hover, [data-theme="dark"] .analyze-button:hover:not(:disabled), [data-theme="dark"] .soft-paywall-cta:hover,
[data-theme="dark"] .ing-swap-go:hover, [data-theme="dark"] .add-ingredient-submit:hover, [data-theme="dark"] .share-btn-primary:hover, [data-theme="dark"] .sh-main:hover, [data-theme="dark"] .nudge-primary:hover,
[data-theme="dark"] .targets-save:hover, [data-theme="dark"] .ing-manual-row .mm-save:hover, [data-theme="dark"] .referral-redeem-btn:hover, [data-theme="dark"] .share-copy-btn:hover, [data-theme="dark"] .my-referral-copy:hover {
  background: #fff;
}
[data-theme="dark"] .analyze-button .loading-text { color: #111827; }
[data-theme="dark"] .analyze-button .spinner { border-color: rgba(17, 24, 39, 0.25); border-top-color: #111827; }

/* Easier to hit: batch size and % DV / % cal at least 26px tall, 12px text. */
.pct-switch button, .recipe-scale button { font-size: 12px; min-height: 26px; padding: 4px 10px; }
.recipe-scale-custom { font-size: 12px; min-height: 26px; padding: 2px 8px; }
.recipe-scale-custom input { width: 26px; height: 20px; font-size: 12px; }
/* Numbers that sit in columns keep equal-width digits, so they don't jiggle
   when servings or batch size change. */
.hero-macro-value, .hero-macro-pct, .ing-cal-short, .stepper-input, .nf-value,
.history-item-meta, .goal-fit-cal { font-variant-numeric: tabular-nums; }

/* Invite as an icon button, same size as the side panel button. */
.header-share-btn.header-share-icon { width: 28px; padding: 0; justify-content: center; gap: 0; }
.header-share-btn.header-share-icon .share-ico { width: 15px; height: 15px; }

/* Fork and knife before the recipe title (in place of "Recipe:"). */
.recipe-title-ico { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Go Pro opened on purpose: its own panel over the popup, page dimmed behind. */
.plan-close { display: none; }
.upgrade-banner.as-sheet { position: fixed; top: 0; left: 0; right: 0; z-index: 60; margin: 0; max-height: 100vh; overflow-y: auto; border-radius: 0 0 14px 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25); }
.plan-scrim { display: none; }
.upgrade-banner.as-sheet:not(.hidden) + .plan-scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(15, 23, 42, 0.35); }
.upgrade-banner.as-sheet .plan-close { display: block; position: absolute; top: 10px; right: 12px; padding: 4px 8px; border: none; border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 16px; cursor: pointer; z-index: 1; }
.upgrade-banner.as-sheet .plan-close:hover { background: var(--bg-page); color: var(--text-primary); }

/* Retry: a small plain button with a circular arrow. */
.retry-failed-button { border: 1px solid var(--border-light); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); font-size: 12px; font-weight: 600; padding: 5px 10px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06); }
.retry-failed-button::before { content: "\21BB"; margin-right: 5px; font-weight: 700; color: var(--text-secondary); }
.retry-failed-button:hover { background: var(--bg-page); border-color: var(--border-focus); }

/* Go Pro in the ⋯ menu: open lock (same size as the other menu icons) and an "Unlimited" tag. */
.overflow-tag { margin-left: auto; font-size: 11px; font-weight: 600; line-height: 1; color: #059669; background: rgba(16, 185, 129, 0.1); padding: 4px 8px; border-radius: 999px; }
[data-theme="dark"] .overflow-tag { color: #34D399; background: rgba(52, 211, 153, 0.12); }

/* Rating card, cleaner (owner 2026-10-14): white card like the others, stars without glow,
   quieter "Not now" and "Something off?". The athlete animation is unchanged. */
.nudge-card.nudge-rate { background: var(--bg-card, #fff); border: 1px solid var(--border-light, #e5e7eb); border-radius: 12px; box-shadow: 0 1px 2px rgba(17,24,39,.05); padding: 12px 14px 12px 10px; }
.nudge-card.nudge-rate .nudge-text { font-size: 13px; line-height: 1.4; color: var(--text-primary); }
.nudge-card.nudge-rate .nudge-body { gap: 8px; }
.nudge-star svg, .nudge-stars:hover .nudge-star svg, .nudge-star:hover ~ .nudge-star svg { filter: none; }
.nudge-star svg { width: 20px; height: 20px; }
.nudge-stars { gap: 1px; }
.nudge-card.nudge-rate .nudge-secondary { font-weight: 500; color: var(--text-secondary); }
.nudge-card.nudge-rate .nudge-feedback { font-weight: 500; color: var(--text-secondary); text-decoration: underline; text-decoration-color: var(--border-light, #d1d5db); text-underline-offset: 3px; }
.nudge-card.nudge-rate .nudge-feedback:hover { color: var(--text-primary); text-decoration-color: currentColor; }

/* Last-free-scan note: a calm line with a small text link, not a big button. */
.soft-paywall .soft-paywall-text { color: var(--text-secondary); }
.soft-paywall .soft-paywall-cta, [data-theme="dark"] .soft-paywall .soft-paywall-cta,
.soft-paywall .soft-paywall-cta:hover, [data-theme="dark"] .soft-paywall .soft-paywall-cta:hover {
  padding: 0; background: none; box-shadow: none; filter: none; border: 0;
  color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

/* Pin tip and rating ask: a white card with a small grey icon, no green. */
.nudge-card, .nudge-card.nudge-rate { align-items: center; gap: 10px; padding: 10px 10px 10px 12px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 10px; box-shadow: var(--shadow-sm); }
.nudge-ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--bg-page); color: var(--text-secondary); }
.nudge-ico svg { width: 14px; height: 14px; }
.nudge-card .nudge-body, .nudge-card.nudge-rate .nudge-body { flex-direction: row; align-items: center; gap: 8px; }
.nudge-card .nudge-text, .nudge-card.nudge-rate .nudge-text { font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.nudge-title { display: block; font-weight: 600; color: var(--text-primary); }
.nudge-inl { width: 13px; height: 13px; vertical-align: -2px; margin: 0 1px; color: var(--text-primary); }
.nudge-card .nudge-actions, .nudge-card.nudge-rate .nudge-actions { align-items: center; gap: 4px; }
.nudge-x { padding: 2px 6px; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.nudge-star svg, .nudge-stars:hover .nudge-star svg, .nudge-star:hover ~ .nudge-star svg { width: 17px; height: 17px; filter: none; }
.nudge-stars:hover .nudge-star svg { transform: none; }
.nudge-card .nudge-feedback { display: none; }