:root {
  --bg-app: #0e0f11;
  --bg-sidebar: #070708;
  --bg-panel: #17181b;
  --bg-panel-alt: #1e2023;
  --bg-input: #24262a;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f3f4f5;
  --text-dim: #9a9ea5;
  --text-faint: #6b6f76;
  --accent: #3fb872;
  --accent-hover: #4bd684;
  --danger: #e5534b;
  --radius: 10px;
  --radius-lg: 16px;
}

:root[data-theme="light"] {
  --bg-app: #f5f6f7;
  --bg-sidebar: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-alt: #eef0f2;
  --bg-input: #eef0f2;
  --border: rgba(0, 0, 0, 0.1);
  --text: #16181a;
  --text-dim: #565b61;
  --text-faint: #8a9099;
  --accent: #2f9e5c;
  --accent-hover: #278a4e;
  --danger: #c23a32;
}

/* Food-themed color palettes: each is exactly 3 colors — one for buttons
   (--accent, with a derived --accent-hover), one for backgrounds
   (--bg-app/--bg-panel/--bg-panel-alt/--bg-input, all shades of the same
   tint), and one for text (--text, with derived --text-dim/--text-faint)
   — so picking a theme actually recolors the app, not just the buttons. */
:root[data-color-theme="green_salad"] {
  --bg-app: #0e120a;
  --bg-sidebar: #090b06;
  --bg-panel: #171f12;
  --bg-panel-alt: #1e2818;
  --bg-input: #1a2315;
  --border: rgba(170, 210, 140, 0.12);
  --text: #edf2e7;
  --text-dim: #b3c2a5;
  --text-faint: #798a6c;
  --accent: #5cb84c;
  --accent-hover: #6fcf5e;
}
:root[data-theme="light"][data-color-theme="green_salad"] {
  --bg-app: #f3f8ee;
  --bg-sidebar: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-alt: #e9f1e1;
  --bg-input: #edf4e6;
  --border: rgba(40, 90, 20, 0.14);
  --text: #1b2416;
  --text-dim: #4b5c40;
  --text-faint: #85957a;
  --accent: #3d8a33;
  --accent-hover: #34762b;
}

:root[data-color-theme="tomato_soup"] {
  --bg-app: #150e0c;
  --bg-sidebar: #0c0807;
  --bg-panel: #201512;
  --bg-panel-alt: #2a1b17;
  --bg-input: #241813;
  --border: rgba(230, 140, 110, 0.12);
  --text: #f5eae5;
  --text-dim: #c9a89c;
  --text-faint: #8c6c62;
  --accent: #d9583f;
  --accent-hover: #e56f54;
}
:root[data-theme="light"][data-color-theme="tomato_soup"] {
  --bg-app: #fbf1ec;
  --bg-sidebar: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-alt: #f6e4dc;
  --bg-input: #f9ece5;
  --border: rgba(160, 60, 30, 0.14);
  --text: #2c1712;
  --text-dim: #6b4238;
  --text-faint: #a3796c;
  --accent: #c1442c;
  --accent-hover: #a83a24;
}

:root[data-color-theme="rice_and_beans"] {
  --bg-app: #120d0a;
  --bg-sidebar: #0a0706;
  --bg-panel: #1c1411;
  --bg-panel-alt: #261a15;
  --bg-input: #201612;
  --border: rgba(210, 150, 80, 0.12);
  --text: #f1e6da;
  --text-dim: #bfa593;
  --text-faint: #857062;
  --accent: #c9852f;
  --accent-hover: #dd9940;
}
:root[data-theme="light"][data-color-theme="rice_and_beans"] {
  --bg-app: #f9f0e6;
  --bg-sidebar: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-alt: #efe0cf;
  --bg-input: #f5ead9;
  --border: rgba(120, 70, 20, 0.14);
  --text: #2a1a10;
  --text-dim: #6b4a34;
  --text-faint: #a08268;
  --accent: #a56423;
  --accent-hover: #8c541c;
}

:root[data-color-theme="street_corn"] {
  --bg-app: #100f0a;
  --bg-sidebar: #090805;
  --bg-panel: #1a1810;
  --bg-panel-alt: #242015;
  --bg-input: #1e1b11;
  --border: rgba(230, 190, 80, 0.12);
  --text: #f6f0dc;
  --text-dim: #c4ba97;
  --text-faint: #8a8262;
  --accent: #d9a02e;
  --accent-hover: #ecb440;
}
:root[data-theme="light"][data-color-theme="street_corn"] {
  --bg-app: #fbf7e9;
  --bg-sidebar: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-alt: #f3ecd2;
  --bg-input: #f8f2dd;
  --border: rgba(150, 110, 20, 0.14);
  --text: #2c2712;
  --text-dim: #6a6035;
  --text-faint: #9f9564;
  --accent: #b8871e;
  --accent-hover: #9c7217;
}

body.bold-text { font-weight: 600; }
body.bold-text .panel-sub, body.bold-text .text-dim { font-weight: 500; }

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

h1, h2 { font-weight: 700; letter-spacing: -0.01em; }

/* Brand */
.brand { display: flex; align-items: center; }
.brand-logo { height: 22px; width: auto; display: block; }
.brand-logo-lg { height: 48px; }

/* Auth screen */
.auth-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-wrap { width: 100%; max-width: 380px; text-align: center; }
.auth-tagline { color: var(--text-dim); margin: 0.5rem 0 2rem; font-size: 0.95rem; }
.auth-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: left;
}

.auth-screen-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; min-height: 1.3rem; }
.auth-screen-topbar .btn-link { font-size: 0.85rem; font-weight: 600; }

.auth-heading { font-size: 1.7rem; margin: 0; text-align: center; }

.auth-benefits { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.auth-benefits li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.92rem; color: var(--text); }
.auth-benefit-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; flex-shrink: 0; color: var(--accent); }

.auth-choice-buttons { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; }
.btn-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 999px;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  width: 100%;
}
.btn-choice-email { background: var(--accent); color: #06130a; }
.btn-choice-email:hover { background: var(--accent-hover); }
.btn-choice-google { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); }
.btn-choice-google:hover { background: var(--bg-panel-alt); }
.btn-choice-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; }
.btn-choice-google .btn-choice-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  color: #4285f4;
  font-weight: 800;
  font-size: 0.75rem;
}

.auth-back { align-self: flex-start; margin: -0.25rem 0 0.25rem; font-size: 0.82rem; }

.auth-links { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.auth-links .btn-link { font-size: 0.78rem; }
.auth-form-intro { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 0.25rem; }
.auth-hint { color: var(--text-faint); font-size: 0.75rem; font-style: italic; margin: -0.4rem 0 0; }

.auth-legal {
  color: var(--text-faint);
  font-size: 0.75rem;
  text-align: center;
  margin: 1rem 0 0;
  line-height: 1.4;
}
.auth-legal a { color: var(--text-dim); text-decoration: underline; }
.auth-legal a:hover { color: var(--accent); }

.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--text-dim); }

input, select, textarea {
  background: var(--bg-input);
  border: 1px solid transparent;
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}
input::placeholder { color: var(--text-faint); }

.error { color: var(--danger); font-size: 0.82rem; min-height: 1.2em; margin: 0.5rem 0 0; }

/* Buttons */
button {
  font-family: inherit;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: #06130a;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-block { width: 100%; padding: 0.65rem; }

/* The menu item wizard button gets its own shiny-stars hover treatment (see
   the intro splash below too) - a small "this is a different, more magical
   system than the manual editor" signal before the button is even
   clicked. */
.btn-wizard { position: relative; overflow: visible; }
.wizard-sparkle {
  position: absolute;
  top: -10px;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 4px var(--accent), 0 0 8px rgba(255, 255, 255, 0.7);
}
.wizard-sparkle-1 { left: 6%; top: -8px; font-size: 11px; }
.wizard-sparkle-2 { left: 26%; top: -18px; font-size: 15px; }
.wizard-sparkle-3 { left: 50%; top: -10px; font-size: 10px; }
.wizard-sparkle-4 { left: 72%; top: -20px; font-size: 14px; }
.wizard-sparkle-5 { left: 92%; top: -9px; font-size: 11px; }

.btn-wizard:hover .wizard-sparkle,
.btn-wizard:focus-visible .wizard-sparkle {
  animation: wizard-sparkle-twinkle 1.3s ease-in-out infinite;
}
.btn-wizard:hover .wizard-sparkle-2, .btn-wizard:focus-visible .wizard-sparkle-2 { animation-delay: 0.18s; }
.btn-wizard:hover .wizard-sparkle-3, .btn-wizard:focus-visible .wizard-sparkle-3 { animation-delay: 0.36s; }
.btn-wizard:hover .wizard-sparkle-4, .btn-wizard:focus-visible .wizard-sparkle-4 { animation-delay: 0.54s; }
.btn-wizard:hover .wizard-sparkle-5, .btn-wizard:focus-visible .wizard-sparkle-5 { animation-delay: 0.72s; }

@keyframes wizard-sparkle-twinkle {
  0% { opacity: 0; transform: translateY(4px) scale(0.5) rotate(0deg); }
  35% { opacity: 1; transform: translateY(-6px) scale(1) rotate(20deg); }
  70% { opacity: 0.65; transform: translateY(-12px) scale(0.8) rotate(-10deg); }
  100% { opacity: 0; transform: translateY(-18px) scale(0.4) rotate(15deg); }
}

/* ---------------------------------------------------------------------------
   Menu Item Wizard intro splash - a brief, separate "ceremony" screen shown
   before the wizard's first step, so the wizard reads as its own distinct
   system rather than just another editor screen. Click anywhere to skip
   straight to the wizard instead of waiting out the hold.
--------------------------------------------------------------------------- */
.wizard-intro-splash {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%),
    #050604;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.5s ease;
}
.wizard-intro-splash.hidden { display: none; }
.wizard-intro-splash.visible { opacity: 1; pointer-events: auto; }
.wizard-intro-splash.fading { opacity: 0; }

.wizard-intro-hat {
  width: 170px;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--accent) 70%, transparent));
}
.wizard-intro-wordmark {
  width: 300px;
  max-width: 82vw;
  height: auto;
  opacity: 0;
}
.wizard-intro-splash.visible .wizard-intro-hat {
  animation: wizard-hat-intro 2.4s ease-in-out forwards;
}
.wizard-intro-splash.visible .wizard-intro-wordmark {
  animation: wizard-wordmark-intro 1.4s ease-out 0.45s forwards;
}

@keyframes wizard-hat-intro {
  0% { opacity: 0; transform: scale(0.65) translateY(14px); }
  30% { opacity: 1; transform: scale(1.08) translateY(-6px); }
  45% { transform: scale(1) translateY(0); }
  75% { transform: scale(1.04) translateY(-8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes wizard-wordmark-intro {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .wizard-intro-hat { width: 120px; }
  .wizard-intro-wordmark { width: 240px; }
}
.btn-sm { padding: 0.35rem 0.9rem; font-size: 0.82rem; }

.btn-danger {
  background: none;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-danger:hover { background: rgba(229, 83, 75, 0.1); }

.btn-ghost {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }

.btn-link {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.82rem;
  padding: 0;
}
.btn-link:hover { color: var(--text); }

/* App shell: sidebar + content */
.app-view { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex: none;
  background: var(--bg-sidebar);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-right: 1px solid var(--border);
}
.sidebar .brand { padding: 0 0.5rem; }

.side-nav { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.side-nav-item {
  background: none;
  border: none;
  color: var(--text-dim);
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}
.side-nav-item:hover { color: var(--text); background: var(--bg-panel); }
.side-nav-item.active { color: var(--text); background: var(--bg-panel-alt); }
.side-nav-item.active::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0.3rem;
  bottom: 0.3rem;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.5rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-dim);
}

.avatar-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  border: none;
  background: var(--accent);
  color: #06130a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  font-weight: 700;
  font-size: 0.9rem;
  position: relative;
}
.avatar-btn:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-initials { line-height: 1; }

.user-info-text { min-width: 0; flex: 1; }
.user-info-text #user-email {
  display: block;
  word-break: break-all;
  margin-bottom: 0.2rem;
}
.user-info-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.content { flex: 1; min-width: 0; padding: 2.5rem 3rem; max-width: 1000px; }

.greeting { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 1.25rem; }

.panel-head { margin-bottom: 1.5rem; position: relative; }
.panel-head h1 { font-size: 1.6rem; margin: 0 0 0.35rem; }
.panel-sub { color: var(--text-dim); margin: 0; font-size: 0.92rem; }

.panel-head-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.panel-head-top h1 { margin: 0; }
.panel-head-actions { display: flex; align-items: center; gap: 0.6rem; }
.info-icon-btn {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-panel-alt);
  color: var(--text-dim);
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.info-icon-btn:hover, .info-icon-btn.active {
  background: var(--accent);
  color: #06130a;
  border-color: var(--accent);
}
.info-popover {
  position: absolute;
  top: 2.3rem;
  right: 0;
  z-index: 15;
  width: min(320px, 100%);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 0.8rem 0.9rem;
}
.info-popover.hidden { display: none; }
.info-popover p { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--text); }

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

/* Tables */
.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
/* table-layout: fixed + an explicit <colgroup> (see index.html) gives every
   column a guaranteed width that content can never squeeze below - the
   previous auto-layout let a long ingredient name's column steal space
   from its neighbors (Unit showing no text, Yield % showing "1...", and
   the table outgrowing its card into a scrollbar) since their "available
   width" was measured from the DOM after they'd already been squeezed. */
#ingredients-table, .lines-table { table-layout: fixed; }
.data-table th {
  position: relative;
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  font-weight: 600;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  overflow: hidden;
}
.data-table tbody tr:hover { background: var(--bg-panel-alt); }
.data-table input, .data-table select {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  padding: 0.3rem 0.4rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.data-table input:focus, .data-table select:focus { background: var(--bg-input); border-color: var(--accent); }
.data-table tfoot td { border-bottom: none; }
.data-table button { cursor: pointer; }

/* Source/Unit cells in the lines table can hold two form controls at once
   (e.g. a custom line's unit text + its cost-per-unit) - lay them out
   side by side instead of each demanding the cell's full width. */
.multi-field-cell { display: flex; gap: 0.3rem; align-items: center; }
.multi-field-cell > input, .multi-field-cell > select { width: auto; flex: 1 1 0; min-width: 0; }

.currency-field { display: flex; align-items: center; gap: 0.2rem; }
.currency-field input { flex: 1; min-width: 0; width: auto; }
.currency-prefix { color: var(--text-faint); font-size: 0.85rem; flex-shrink: 0; }

.row-actions { display: flex; gap: 0.4rem; }

.option-bold { font-weight: 700; }

.ing-name-cell { position: relative; }
.ing-name-cell input#new-ing-name { padding-right: 1.6rem; }
/* The clear button is anchored to this wrapper (sized to just the input)
   rather than to .ing-name-cell itself, because on mobile that cell also
   holds a "NAME" label above the input (see .data-table td[data-label]
   ::before) - top: 50% of the taller cell would center the button between
   the label and the input instead of on the input, pushing it up out of
   the input's visible box. */
.ing-name-input-wrap { position: relative; display: block; }

/* Shared "x" clear button, used both by the ingredient name field's own
   tailored implementation above (integrated with its suggestions flow)
   and by the generic sitewide enhancement below (see
   makeInputClearable/enhanceClearableInputs in app.js), which wraps any
   other qualifying text/email/password input in .input-clear-wrap so
   this can be positioned the same way without needing a bespoke slot in
   every form's markup. */
.input-clear-wrap { position: relative; display: block; }
input.has-clear-btn { width: 100%; padding-right: 1.8rem; box-sizing: border-box; }
.input-clear-btn, .ing-clear-btn {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-faint);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.input-clear-btn:hover, .input-clear-btn:focus,
.ing-clear-btn:hover, .ing-clear-btn:focus { background: var(--bg-panel-alt); color: var(--text); }
.input-clear-btn.hidden, .ing-clear-btn.hidden { display: none; }
/* Shown the instant a suggestion request actually goes out, so the
   feature reads as "the app is thinking" rather than several seconds of
   silence that makes it look unresponsive or easy to miss entirely. A
   labeled banner rather than a bare spinner, since a spinner alone didn't
   tell people what it was for. Positioned/stacked the same way as the
   suggestions dropdown and did-you-mean banner (see layoutIngPopups). */
.ing-suggest-loading {
  position: fixed;
  width: max-content;
  max-width: 320px;
  z-index: 20;
  margin-top: 0.25rem;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-panel));
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.ing-suggest-loading.hidden { display: none; }
.ing-suggest-spinner {
  flex-shrink: 0;
  width: 26px;
  height: 16px;
  object-fit: contain;
  animation: ing-suggest-spin 1s ease-in-out infinite;
}
/* A full 360deg spin would pass through thin, hard-to-read slivers at the
   quarter turns since this icon (a balance scale) is wide and flat rather
   than radially symmetric. A seesaw wobble - rocking side to side, never
   going edge-on - sidesteps that and doubles as a fitting animation for a
   scale tipping back and forth. */
@keyframes ing-suggest-spin {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}
/* Positioned via JS (position: fixed, top/left/min-width set from the
   input's bounding rect) rather than absolute-to-.ing-name-cell, because
   .table-scroll's overflow-x: auto forces its overflow-y to compute to
   auto too (per the CSS overflow spec), which silently clipped this
   dropdown when it hung below the table's last row. */
.suggest-dropdown {
  position: fixed;
  width: max-content;
  max-width: 380px;
  z-index: 20;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  margin-top: 0.25rem;
  max-height: 340px;
  overflow-y: auto;
  padding: 0.3rem;
}
.suggest-dropdown.hidden { display: none; }
.suggest-category {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: 0.5rem 0.55rem 0.2rem;
  white-space: nowrap;
}
.suggest-category:first-child { padding-top: 0.2rem; }
.suggest-option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.1rem 0.6rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
}
.suggest-option:hover, .suggest-option:focus { background: var(--bg-panel-alt); }
.suggest-name { white-space: nowrap; }
/* "estimated_price" is an AI ballpark, never a live/real quote - the
   "est." tag next to every price makes that unmissable at the exact
   point of decision, not just buried in a help tooltip. */
.suggest-price {
  font-size: 0.74rem;
  color: var(--text-faint);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.suggest-price-est {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  background: var(--bg-panel-alt);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}
.did-you-mean {
  position: fixed;
  width: max-content;
  max-width: 320px;
  z-index: 19;
  margin-top: 0.25rem;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  font-size: 0.82rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.did-you-mean.hidden { display: none; }
.did-you-mean .dym-fix {
  background: var(--accent);
  color: #0c0d0e;
  border: none;
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.did-you-mean .dym-cancel {
  background: transparent;
  color: var(--text-faint);
  border: none;
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  font-size: 0.78rem;
  cursor: pointer;
  margin-left: -0.2rem;
}
.did-you-mean .dym-cancel:hover, .did-you-mean .dym-cancel:focus { color: var(--text); }

/* Picker row (New/Delete + select) */
.picker-row { display: flex; gap: 0.6rem; margin-bottom: 1.25rem; align-items: center; }
.picker-row select { flex: 1; max-width: 340px; padding: 0.55rem 0.7rem; }
.picker-row button:disabled { opacity: 0.45; cursor: not-allowed; }
.recipe-new-hint { font-size: 0.8rem; color: #d9a441; margin: -0.9rem 0 1.25rem; }

.editor {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.editor-grid label, .editor > label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.input-pair { display: flex; gap: 0.5rem; }
.input-pair input { flex: 1; min-width: 0; }
.input-pair select { flex: 1; min-width: 0; }

.stat-row { display: flex; gap: 1.5rem; margin-bottom: 1.25rem; }
.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.stat-value { font-size: 1.15rem; font-weight: 700; color: var(--accent); }

.cost-summary {
  background: var(--bg-panel-alt);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.6;
}
.cost-summary .over-target { color: var(--danger); font-weight: 700; }

.save-status { font-size: 0.78rem; color: var(--text-faint); min-height: 1.2em; margin-top: 0.75rem; }
.save-status.error { color: var(--danger); }

.settings-accordion { margin-bottom: 1rem; max-width: 420px; padding: 0; overflow: hidden; }
.settings-accordion summary {
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  font-weight: 700;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-accordion summary::-webkit-details-marker { display: none; }
.settings-accordion summary::after {
  content: "+";
  color: var(--text-faint);
  font-size: 1.2rem;
  font-weight: 400;
}
.settings-accordion[open] summary::after { content: "\2212"; }
.settings-accordion[open] summary { border-bottom: 1px solid var(--border); }
.settings-accordion-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }

.settings-subaccordion {
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}
.settings-subaccordion summary {
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-subaccordion summary::-webkit-details-marker { display: none; }
.settings-subaccordion summary::after { content: "+"; color: var(--text-faint); }
.settings-subaccordion[open] summary::after { content: "\2212"; }
.settings-subaccordion[open] summary { border-bottom: 1px solid var(--border); }
.settings-subaccordion-body { padding: 1rem; }

.settings-field-row { display: flex; flex-direction: column; gap: 0.5rem; }
.settings-field-row > label { font-weight: 600; font-size: 0.9rem; }
.settings-field-row select { max-width: 200px; padding: 0.5rem 0.7rem; }

.color-theme-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.color-theme-swatch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 0.6rem;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.color-theme-swatch.active { border-color: var(--text); color: var(--text); font-weight: 600; }
.swatch-dots { display: inline-flex; }
.swatch-dots span { width: 10px; height: 10px; border-radius: 50%; margin-left: -4px; border: 1px solid var(--bg-app); }
.swatch-dots span:first-child { margin-left: 0; }
/* Each swatch's 3 dots show exactly what the theme controls: button
   color, background shade, and text color. */
.color-theme-swatch[data-color-theme="classic"] .swatch-dots span:nth-child(1) { background: #3fb872; }
.color-theme-swatch[data-color-theme="classic"] .swatch-dots span:nth-child(2) { background: #1e2023; }
.color-theme-swatch[data-color-theme="classic"] .swatch-dots span:nth-child(3) { background: #f3f4f5; }
.color-theme-swatch[data-color-theme="green_salad"] .swatch-dots span:nth-child(1) { background: #5cb84c; }
.color-theme-swatch[data-color-theme="green_salad"] .swatch-dots span:nth-child(2) { background: #1e2818; }
.color-theme-swatch[data-color-theme="green_salad"] .swatch-dots span:nth-child(3) { background: #edf2e7; }
.color-theme-swatch[data-color-theme="tomato_soup"] .swatch-dots span:nth-child(1) { background: #d9583f; }
.color-theme-swatch[data-color-theme="tomato_soup"] .swatch-dots span:nth-child(2) { background: #2a1b17; }
.color-theme-swatch[data-color-theme="tomato_soup"] .swatch-dots span:nth-child(3) { background: #f5eae5; }
.color-theme-swatch[data-color-theme="rice_and_beans"] .swatch-dots span:nth-child(1) { background: #c9852f; }
.color-theme-swatch[data-color-theme="rice_and_beans"] .swatch-dots span:nth-child(2) { background: #261a15; }
.color-theme-swatch[data-color-theme="rice_and_beans"] .swatch-dots span:nth-child(3) { background: #f1e6da; }
.color-theme-swatch[data-color-theme="street_corn"] .swatch-dots span:nth-child(1) { background: #d9a02e; }
.color-theme-swatch[data-color-theme="street_corn"] .swatch-dots span:nth-child(2) { background: #242015; }
.color-theme-swatch[data-color-theme="street_corn"] .swatch-dots span:nth-child(3) { background: #f6f0dc; }

.settings-form { display: flex; flex-direction: column; gap: 1rem; }
.settings-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.82rem; color: var(--text-dim); }
.settings-form button { align-self: flex-start; }

.theme-toggle { display: inline-flex; gap: 0.25rem; background: var(--bg-input); border-radius: 999px; padding: 0.25rem; }
.theme-toggle-option {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.theme-toggle-option.active { background: var(--accent); color: #06130a; }

/* Responsive: collapse sidebar above content on narrow screens */
@media (max-width: 720px) {
  .app-view { flex-direction: column; }
  .sidebar { width: auto; flex-wrap: wrap; gap: 0.75rem; padding: 1rem; }
  .sidebar .brand { flex-basis: 100%; }
  .side-nav { flex-direction: row; flex-wrap: wrap; flex: 1; gap: 0.4rem; }
  .side-nav-item.active::before { left: -0.25rem; }
  .user-info {
    border-top: none;
    flex-direction: row;
    align-items: center;
    padding: 0;
    flex-basis: 100%;
    justify-content: space-between;
  }
  .content { padding: 1.5rem; }
  .editor-grid { grid-template-columns: 1fr; }

  /* Data tables become stacked cards instead of forcing sideways
     scrolling - each row's fields list vertically with a label (from the
     cell's data-label attribute) above the input, like a small form. */
  .table-scroll { overflow-x: visible; }
  .data-table, .data-table tbody, .data-table tfoot { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
  }
  .data-table tbody tr:hover { background: none; }
  .data-table tfoot tr { margin-bottom: 0; }
  .data-table td {
    display: block;
    border-bottom: none;
    padding: 0.35rem 0;
  }
  .data-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    margin-bottom: 0.2rem;
  }
  .data-table td.multi-field-cell { display: flex; }
  .data-table td.row-actions,
  .data-table td.td-actions {
    display: flex;
    gap: 0.5rem;
  }
  .data-table td.row-actions button,
  .data-table td.td-actions button {
    flex: 1;
  }
  .data-table td.td-hide-mobile { display: none; }

  /* These three normally use position: fixed with JS-computed top/left
     from the input's getBoundingClientRect() - necessary on desktop where
     .table-scroll's overflow-x: auto would otherwise clip them (see the
     comment on .suggest-dropdown). That clipping risk doesn't exist here
     (.table-scroll is overflow-x: visible above), and position: fixed is
     unreliable on mobile while the on-screen keyboard is open - browsers
     can render it against a different viewport than getBoundingClientRect
     measures, landing it near the top of the page instead of under the
     input. Anchoring to .ing-name-cell (position: relative) instead
     sidesteps viewport math entirely. !important because the JS still
     unconditionally sets inline top/left/min-width - a plain rule here
     would lose to it, but !important in a stylesheet beats an inline
     style that itself has no !important. */
  /* .ing-name-cell inherits overflow: hidden from the general .data-table
     td rule (used elsewhere for text-ellipsis) - harmless on desktop since
     position: fixed escapes it regardless, but it would clip these now
     that they're anchored to it below. */
  .ing-name-cell { overflow: visible !important; }
  .suggest-dropdown, .did-you-mean, .ing-suggest-loading {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Mark as done */
.btn-mark-done {
  display: block;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  margin-bottom: 1.25rem;
}
.btn-mark-done:hover { background: rgba(63, 184, 114, 0.1); }
.btn-mark-done.is-done { background: var(--accent); color: #06130a; border-color: var(--accent); }

/* Celebration overlay */
.celebration {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.celebration.active { opacity: 1; pointer-events: auto; }

.celebration-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 3rem;
  text-align: center;
  transform: scale(0.85);
  transition: transform 0.25s ease;
}
.celebration.active .celebration-card { transform: scale(1); }

.celebration-check { width: 84px; height: 84px; margin-bottom: 1rem; }
.celebration-check-circle {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
}
.celebration-check-mark {
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}
.celebration.active .celebration-check-circle {
  animation: celebration-draw 0.5s ease-out forwards;
}
.celebration.active .celebration-check-mark {
  animation: celebration-draw 0.3s ease-out 0.4s forwards;
}
@keyframes celebration-draw {
  to { stroke-dashoffset: 0; }
}

.celebration-message { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0; }

/* Missing-component review modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  padding: 1.5rem;
}
.modal-overlay.hidden { display: none; }

.modal-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-card h2 { font-size: 1.2rem; margin: 0 0 0.5rem; padding-right: 1.5rem; }

.modal-close-btn {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.3rem;
  cursor: pointer;
}
.modal-close-btn:hover { color: var(--text); }

.missing-components-list { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.missing-component-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
}
.missing-component-add:hover { border-color: var(--accent); }
.missing-component-add .missing-component-text { display: flex; flex-direction: column; gap: 0.15rem; }
.missing-component-name { font-weight: 700; color: var(--text); }
.missing-component-reason { font-size: 0.8rem; color: var(--text-dim); }
.missing-component-plus { flex-shrink: 0; font-weight: 700; color: var(--accent); font-size: 1.1rem; }
.missing-component-add.added {
  cursor: default;
  border-color: var(--accent);
  background: transparent;
}
.missing-component-add.added .missing-component-plus { color: var(--accent); }
.missing-component-add.added:hover { border-color: var(--accent); }

.modal-actions { display: flex; justify-content: flex-end; }

/* Generic themed dialog (replaces window.alert/confirm, which render as a
   bare browser-chrome popup with the page's origin instead of Costty's
   branding/theme) */
.app-modal-card { text-align: center; }
.app-modal-logo { height: 30px; width: auto; display: block; margin: 0 auto 1rem; }
.app-modal-card h2 { text-align: center; }
.app-modal-body { text-align: left; color: var(--text); font-size: 0.9rem; line-height: 1.5; }
.app-modal-body p { margin: 0 0 0.5rem; }
.app-modal-body p:last-child { margin-bottom: 0; }
.app-modal-body ul { margin: 0.3rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
.app-modal-card .modal-actions { justify-content: center; gap: 0.6rem; margin-top: 1.4rem; }
.app-modal-space-hint { text-align: center; margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--text-dim, #8a8f98); }
.app-modal-space-hint kbd {
  display: inline-block;
  font: 700 0.75rem/1 inherit;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  border: 1px solid var(--border, #3a3f4b);
  border-bottom-width: 2px;
  background: var(--surface-2, #23262f);
  color: var(--text);
}

/* ---------------------------------------------------------------------------
   Shared food-cost % <-> selling price slider (manual editor + wizard)
--------------------------------------------------------------------------- */
.cps-block { margin: 0.9rem 0; }
.cps-slider-label { display: block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.4rem; }
.cps-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.cps-row label { font-size: 0.85rem; color: var(--text-dim); flex-shrink: 0; }
.cps-number { width: 90px; }

.cps-range {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  margin: 0.6rem 0;
}
.cps-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-panel);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}
.cps-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-panel);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}
.cps-range::-moz-range-track { background: var(--border); height: 6px; border-radius: 999px; }

/* ---------------------------------------------------------------------------
   Menu Item Wizard
--------------------------------------------------------------------------- */
.wizard-modal-card { max-width: 640px; }

/* Menu Item Wizard Pro paywall - NOT YET ACTIVE, see RECIPE_WIZARD_REQUIRES_PRO
   in app.js. Styled and ready ahead of time. */
.wizard-paywall-card { max-width: 360px; text-align: center; }
.wizard-paywall-lock {
  color: var(--accent);
  display: flex;
  justify-content: center;
  margin: 0.25rem auto 1rem;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 65%, transparent));
}
.wizard-paywall-text { font-size: 1.05rem; font-weight: 700; margin: 0 0 1.3rem; }
.wizard-paywall-card .modal-actions { justify-content: center; }
.wizard-step-actions { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 1.2rem; }
.wizard-step-actions .btn-primary { margin-left: auto; }

.wizard-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
  margin: 1rem 0;
}
.wizard-category-tile {
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.6rem;
  color: var(--text);
  font-weight: 600;
  font-size: 0.88rem;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.25s ease, filter 0.25s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.wizard-category-tile:hover { border-color: var(--accent); }
.wizard-category-tile.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-input));
  transform: scale(1.04);
}
/* Once a tile is picked, fade the rest back so the choice reads as made -
   still fully clickable to change your mind, just visually out of the way. */
.wizard-category-grid:has(.wizard-category-tile.selected) .wizard-category-tile:not(.selected) {
  opacity: 0.4;
  filter: grayscale(0.4);
}
.wizard-category-grid:has(.wizard-category-tile.selected) .wizard-category-tile:not(.selected):hover {
  opacity: 0.8;
  filter: none;
}

.wizard-dish-name-row { margin-top: 1.2rem; }
.wizard-dish-name-row label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.4rem; }
.wizard-dish-name-row input { width: 100%; box-sizing: border-box; }

/* Component picker - one build component (Bread, Toppings, ...) at a
   time, clicked through like a sandwich-counter order flow. */
.wizard-component-progress { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem; }
.wizard-component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  margin: 1rem 0;
}
.wizard-component-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.75rem;
  text-align: left;
  cursor: pointer;
}
.wizard-component-option:hover { border-color: var(--accent); }
.wizard-component-option.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-input)); }
.wizard-component-option-name { font-weight: 600; font-size: 0.9rem; color: var(--text); padding-right: 1.2rem; }
.wizard-component-option-price { font-size: 0.76rem; color: var(--text-dim); }
.wizard-component-option-check {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
}
.wizard-component-option.selected .wizard-component-option-check { opacity: 1; transform: scale(1); }
.wizard-component-option-none { opacity: 0.7; }
.wizard-component-option-none .wizard-component-option-name { color: var(--text-dim); font-weight: 500; }
.wizard-component-option-none.selected { opacity: 1; }

.wizard-ingredients-loading { position: static; max-width: none; width: auto; margin: 0.5rem 0; }

.wizard-ingredients-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; }
.wizard-ing-row {
  display: grid;
  grid-template-columns: auto 1fr auto 70px 90px 60px auto;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
}
.wizard-ing-row.excluded { opacity: 0.45; }
/* An AI suggestion with no usable price estimate - flagged rather than
   left to silently show as a $0.00 that looks like a real (free!) price. */
.wizard-ing-row.missing-price { border-color: color-mix(in srgb, var(--warning, #d9a441) 55%, var(--border)); }
.wizard-ing-name { font-weight: 600; font-size: 0.9rem; }
.wizard-ing-price { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; display: flex; align-items: center; gap: 0.2rem; }
.wizard-ing-price-input { width: 55px; font-size: 0.8rem; padding: 0.2rem 0.3rem; }
.wizard-ing-no-price { color: #d9a441; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; }
.wizard-ing-qty { width: 70px; }
.wizard-ing-unit { width: 90px; }
.wizard-ing-linecost { font-size: 0.85rem; font-weight: 700; text-align: right; white-space: nowrap; }
.wizard-ing-remove {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem;
}
.wizard-ing-remove:hover { color: var(--danger); }

.wizard-add-ingredient-row { display: flex; gap: 0.5rem; margin: 0.75rem 0; }
.wizard-add-ingredient-row input { flex: 1; }

.wizard-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.05rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}

.wizard-pct-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin: 1.2rem 0;
}
.wizard-pct-tile {
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 0.5rem;
  color: var(--text);
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
}
.wizard-pct-tile:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-input)); }

.wizard-result-box { text-align: center; }
.wizard-result-name-input {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  border: none;
  background: none;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.wizard-result-cost { color: var(--text-dim); margin-bottom: 1rem; }
.wizard-result-note { font-size: 0.78rem; color: var(--text-faint); margin-top: 0.6rem; line-height: 1.4; }
.wizard-result-box .cps-block { text-align: left; }

@media (max-width: 720px) {
  .wizard-pct-grid { grid-template-columns: repeat(2, 1fr); }
  .wizard-ing-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "check name remove" "price price price" "qty unit linecost";
  }
  .wizard-ing-row input.wizard-ing-check { grid-area: check; }
  .wizard-ing-row .wizard-ing-name { grid-area: name; }
  .wizard-ing-row .wizard-ing-remove { grid-area: remove; }
  .wizard-ing-row .wizard-ing-price { grid-area: price; }
  .wizard-ing-row .wizard-ing-qty { grid-area: qty; width: auto; }
  .wizard-ing-row .wizard-ing-unit { grid-area: unit; width: auto; }
  .wizard-ing-row .wizard-ing-linecost { grid-area: linecost; }
}