/* iwant2eat redesign.css — Chunk A
 *
 * Polish layer that targets the REAL class names used by the Razor pages.
 * Loaded AFTER app.css, so it wins on same-specificity selectors.
 *
 * The original redesign.css was largely inert because it targeted
 * speculative class names from the standalone prototype (.r-card, .mp-day,
 * .sl-aisle, .detail-hero, etc.) that do not exist in the live Razor
 * markup. Chunk A removes those dead selectors and replaces them with
 * targeted polish for the classes the app actually uses.
 *
 * Scope of Chunk A
 *   - Global infrastructure: resets, topbar, page chrome, buttons, inputs,
 *     chips, profile menu (theme picker), footer.
 *   - MyRecipes page: add-drop banner, tag bar, AI search row, card grid,
 *     card chrome (favorite/shared/stock/delete/reprocess pills), onboarding
 *     panel, empty hints, pagination, shopping-list picker modal.
 *   - Theme-specific tweaks for the above.
 *
 * Out of scope for Chunk A (handled in later chunks)
 *   - MealPlan.razor          → Chunk B
 *   - ShoppingListDetail      → Chunk C
 *   - RecipeDetail.razor      → Chunk D (notebook-paper look stays)
 *   - Home.razor              → marketing surface, intentionally untouched
 */


/* === RESETS + BASE ============================================== */

* { box-sizing: border-box; }
html { font-size: calc(16px * var(--font-scale, 1)); }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .25s ease, color .25s ease;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

.app { min-height: 100vh; display: flex; flex-direction: column; }


/* === TOPBAR ===================================================== */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: 1.18rem;
  color: var(--text);
}
.topbar .brand-mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--accent) 0%, var(--accent) 38%, transparent 40%),
    radial-gradient(circle at 65% 60%, var(--primary) 0%, var(--primary) 36%, transparent 40%),
    var(--surface-2);
  border: 1.5px solid var(--border);
  flex: 0 0 30px;
}
.topbar nav { display: flex; gap: 0.4rem; align-items: center; margin-left: auto; }
.topbar nav .nav-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--chip-border);
  font-size: 0.92rem; font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.topbar nav .nav-link:hover { background: var(--surface-2); }
.topbar nav .nav-link.active {
  background: var(--primary); color: var(--primary-ink);
  border-color: var(--primary);
}
.topbar nav .nav-link.active:hover { background: var(--primary-2); }
.topbar .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  color: var(--primary-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.82rem;
  border: 1.5px solid var(--border);
  cursor: pointer;
}

@media (max-width: 640px) {
  .topbar {
    padding: 0.4rem 0.5rem;
    gap: 0.25rem;
    flex-wrap: nowrap;
  }
  .topbar .brand img { height: 26px; }
  .topbar .fb-link { line-height: 0; }
  .topbar .fb-link svg { width: 24px; height: 24px; }
  .topbar nav { gap: 0.15rem; font-size: 0.78rem; }
}


/* === MAIN COLUMN + PAGE TITLES ================================== */

main {
  flex: 1; width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.page-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 0 0 0.25rem;
  line-height: 1.05;
  text-wrap: balance;
}
.page-sub { color: var(--text-2); margin: 0 0 1.5rem; font-size: 1rem; }


/* === BUTTONS ==================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem; font-weight: 500;
  cursor: pointer;
  transition: filter .12s, transform .08s, background .12s;
}
.btn:hover { filter: brightness(0.98); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--primary); color: var(--primary-ink);
  border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); }
.btn-accent {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn-ghost { background: transparent; }
.btn-lg { padding: 0.85rem 1.4rem; font-size: 1.05rem; }
.btn-icon {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}


/* === INPUTS ===================================================== */

.input,
.form-control {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus,
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 18%, transparent);
}
.input::placeholder,
.form-control::placeholder { color: var(--muted); }


/* === GENERIC CHIPS ============================================== */

.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--chip-border);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.chip:hover { background: var(--surface-2); }
.chip.active {
  background: var(--primary); color: var(--primary-ink); border-color: var(--primary);
}
.chip-add {
  background: transparent; border: 1px dashed var(--border); color: var(--muted);
}


/* === SECTION HEADS ============================================== */

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 1.5rem 0 0.85rem;
}
.section-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: 1.4rem;
  margin: 0;
}
.section-link { font-size: 0.9rem; color: var(--text-2); }


/* === TRIAL BANNER + GENERIC ALERTS ============================== */

.trial-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.7rem 1rem;
  background: color-mix(in oklab, var(--primary) 8%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border));
  color: var(--text);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}
.trial-banner strong { color: var(--primary); }


/* === PROFILE MENU (theme picker) ================================ */

.profile-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
  z-index: 60;
  display: flex; flex-direction: column;
  gap: 0.15rem;
}
.profile-head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.4rem;
}
.profile-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  color: var(--primary-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.92rem;
}
.profile-name { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.profile-email { font-size: 0.78rem; color: var(--muted); }
.profile-section-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 0.5rem 0.6rem 0.3rem;
  font-weight: 600;
}
.profile-themes {
  display: flex; flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.35rem;
}
.profile-theme {
  display: inline-flex; align-items: center; gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--radius) * 0.7);
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.profile-theme:hover { background: var(--surface-2); }
.profile-theme.active {
  background: color-mix(in oklab, var(--primary) 12%, var(--surface));
  color: var(--text);
}
.profile-theme-check {
  margin-left: auto;
  color: var(--primary);
  font-weight: 700;
}
.profile-divider {
  height: 1px; background: var(--border);
  margin: 0.4rem 0;
}
.profile-item {
  text-align: left;
  background: transparent; border: 0;
  padding: 0.55rem 0.6rem;
  border-radius: calc(var(--radius) * 0.7);
  font: inherit;
  color: var(--text);
  cursor: pointer;
}
.profile-item:hover { background: var(--surface-2); }
.profile-item.danger { color: var(--danger); }
.profile-item.danger:hover { background: color-mix(in oklab, var(--danger) 10%, var(--surface)); }
.theme-swatch {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.08);
  background:
    conic-gradient(from 0deg, var(--sw1) 0%, var(--sw1) 33%,
                              var(--sw2) 33%, var(--sw2) 66%,
                              var(--sw3) 66%, var(--sw3) 100%);
}


/* === FOOTER ===================================================== */

.foot {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 2rem 1rem 6rem;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
}


/* =================================================================
 * MY RECIPES — polish for the real Razor classes
 * ================================================================= */


/* --- Add/drop banner (the big green hero CTA) -------------------- */

/* Tighter, more confident than a candy bar. Uses primary as fill,
   keeps the tappable surface huge, and gives the subtitle proper
   weight instead of treating it as throwaway copy. */
.add-drop-banner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: clamp(1.4rem, 3.5vw, 2.4rem) 1.5rem;
  margin: 0.5rem 0 1.25rem;
  background: var(--primary);
  color: var(--primary-ink);
  border: 1px solid var(--primary);
  border-radius: calc(var(--radius) * 1.2);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, transform .08s ease, box-shadow .15s ease;
  box-shadow: 0 2px 0 color-mix(in oklab, var(--primary) 65%, black);
}
.add-drop-banner:hover {
  filter: brightness(1.04);
  text-decoration: none;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--primary) 35%, transparent);
}
.add-drop-banner:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in oklab, var(--primary) 65%, black); }
.add-drop-banner.drag-over {
  outline: 3px dashed color-mix(in oklab, var(--primary-ink) 70%, transparent);
  outline-offset: -10px;
}
.add-drop-banner h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.05;
  color: inherit;
}
.add-drop-hint {
  font-size: 0.92rem;
  opacity: 0.92;
  color: inherit;
}
.add-drop-banner-btn {
  /* The trial-start <button> variant — strip default button chrome. */
  border: 1px solid var(--primary);
  font: inherit;
}


/* --- Tag bar ----------------------------------------------------- */

.tag-bar {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: center;
  margin: 0 0 1rem;
}
.tag-bar .label { color: var(--muted); font-size: 0.85rem; margin-right: 0.3rem; }

.tag-bar-bottom {
  /* Read-only mirror under the grid — fade slightly so the eye
     reads it as a quiet repeat, not a second action surface. */
  opacity: 0.85;
  margin: 1.5rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

.tag-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.28rem 0.7rem;
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  font-size: 0.82rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
}
.tag-chip:hover {
  background: var(--surface-2);
  border-color: color-mix(in oklab, var(--primary) 30%, var(--chip-border));
}
.tag-chip.active {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}
.tag-chip.active:hover { background: var(--primary-2); border-color: var(--primary-2); }
.tag-chip.editing {
  background: var(--surface);
  border-color: var(--primary);
  cursor: text;
}
.tag-chip-count {
  font-size: 0.74rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.tag-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-left: 0.15rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, background .12s;
}
.tag-chip:hover .tag-chip-x { opacity: 0.6; }
.tag-chip-x:hover {
  opacity: 1 !important;
  background: color-mix(in oklab, currentColor 18%, transparent);
}
.tag-chip-edit {
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  color: inherit;
  width: 9ch;
  min-width: 4ch;
}
.tag-add-input {
  padding: 0.28rem 0.7rem;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  font-size: 0.82rem;
  outline: none;
  width: 11ch;
  transition: border-color .12s, width .15s ease, background .12s;
}
.tag-add-input::placeholder { color: var(--muted); }
.tag-add-input:focus {
  border-style: solid;
  border-color: var(--primary);
  background: var(--surface);
  width: 16ch;
}
.tag-delete-confirm {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  background: color-mix(in oklab, var(--danger) 8%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--danger) 30%, var(--border));
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.tag-delete-confirm .btn-yes,
.tag-delete-confirm .btn-no,
.delete-confirm .btn-yes,
.delete-confirm .btn-no,
.card-shared-confirm .btn-yes,
.card-shared-confirm .btn-no {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
}
.tag-delete-confirm .btn-yes,
.delete-confirm .btn-yes,
.card-shared-confirm .btn-yes {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.tag-delete-confirm .btn-yes:hover,
.delete-confirm .btn-yes:hover,
.card-shared-confirm .btn-yes:hover { filter: brightness(1.05); }


/* --- AI search row + scope note ---------------------------------- */

.ai-scope-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
.ai-scope-note-short { display: none; }
@media (max-width: 600px) {
  .ai-scope-note-full { display: none; }
  .ai-scope-note-short { display: inline; }
}

.ai-search-row {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr auto auto;
  gap: 0;
  align-items: stretch;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  margin: 0 0 1.25rem;
  transition: border-color .12s, box-shadow .12s;
}
.ai-search-row:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 14%, transparent);
}
.ai-search-row .ai-search-prompt,
.ai-search-row .ai-search-details {
  border: 0;
  background: transparent;
  padding: 0.55rem 0.95rem;
  font: inherit;
  color: var(--text);
  outline: none;
  width: 100%;
}
.ai-search-row .ai-search-prompt {
  border-right: 1px solid var(--border);
  cursor: pointer;
  font-weight: 500;
  padding-right: 1.6rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  appearance: none;
}
.ai-search-row .ai-search-ask {
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font-weight: 600;
}
.ai-search-row .ai-search-clear {
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
}
.ai-search-row .ai-search-clear:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 640px) {
  .ai-search-row {
    grid-template-columns: 1fr;
    border-radius: var(--radius);
    padding: 0.5rem;
    gap: 0.4rem;
  }
  .ai-search-row .ai-search-prompt { border-right: 0; border-bottom: 1px solid var(--border); padding: 0.6rem 0.9rem; }
}


/* --- List controls (search + fav + sort) ------------------------- */

.list-controls {
  display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1.2rem;
  flex-wrap: wrap;
}
.list-controls .input,
.list-controls .form-control { flex: 1; min-width: 220px; }

.fav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s, transform .08s;
}
.fav-toggle:hover { color: #e0493a; border-color: color-mix(in oklab, #e0493a 40%, var(--border)); }
.fav-toggle.on {
  color: #e0493a;
  background: color-mix(in oklab, #e0493a 10%, var(--surface));
  border-color: color-mix(in oklab, #e0493a 35%, var(--border));
}

.sort-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sort-switch button {
  background: none; border: 0; padding: 0.45rem 0.95rem;
  cursor: pointer; color: var(--text-2);
  font-weight: 500;
}
.sort-switch button:hover { color: var(--text); }
.sort-switch button + button { border-left: 1px solid var(--border); }
.sort-switch button.active {
  background: var(--primary); color: var(--primary-ink);
}


/* --- Generic heart icon button (recipe detail etc) -------------- */

.heart-btn {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  padding: 4px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.heart-btn:hover { color: #e0493a; }
.heart-btn.on { color: #e0493a; }


/* --- Recipe card grid -------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* The card itself: title + subtitle on the left, framed thumbnail
   on the right (positioned absolutely via app.css), tags below,
   meta footer. We polish hover, shadow, and the small chrome bits. */
.card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  min-height: 150px;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--primary) 25%, var(--border));
}
.card .title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: 1.08rem;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
  padding-right: 110px;  /* leave room for the framed thumb on the right */
  text-wrap: balance;
}
.card .subtitle {
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.35;
  font-style: italic;
  margin: 0;
  padding-right: 110px;
}
.card .meta {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Framed thumbnail — the signature "polaroid in a brass frame" look.
   Keep the frame, refine the proportions and elevation. */
.card-thumb-wrap {
  position: absolute;
  top: 0.9rem;
  right: 0.95rem;
  width: 96px; height: 72px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--accent) 55%, var(--border));
  border-radius: 4px;
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--accent) 35%, transparent),
    0 4px 10px rgba(0,0,0,.10);
}
.card-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.card-stock-badge {
  position: absolute;
  bottom: 4px; left: 4px;
  padding: 1px 6px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 500;
  border-radius: 3px;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* Top-right favorite button on the card. Floats above the framed thumb. */
.card-fav-btn {
  position: absolute;
  top: 0.55rem;
  left: 0.6rem;
  z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s, transform .1s;
}
.card-fav-btn:hover { color: #e0493a; transform: scale(1.05); }
.card-fav-btn.on { color: #e0493a; border-color: color-mix(in oklab, #e0493a 45%, var(--border)); }

/* Shared-link indicator pill, lower-left of the card */
.card-shared-btn {
  position: absolute;
  top: 0.55rem;
  left: 2.3rem;
  z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in oklab, var(--primary) 14%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border));
  color: var(--primary);
  cursor: pointer;
}
.card-shared-btn:hover {
  background: color-mix(in oklab, var(--primary) 22%, var(--surface));
}
.card-shared-confirm {
  position: absolute;
  top: 0.55rem; left: 0.6rem;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  box-shadow: var(--shadow-sm);
}

/* Bottom-right delete + reprocess (admin) icons */
.trash-btn,
.reprocess-btn {
  position: absolute;
  bottom: 0.55rem;
  right: 0.7rem;
  width: 26px; height: 26px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, background .12s;
}
.reprocess-btn { right: 2.3rem; }
.card:hover .trash-btn,
.card:hover .reprocess-btn { opacity: 0.7; }
.trash-btn:hover {
  opacity: 1;
  color: var(--danger);
  background: color-mix(in oklab, var(--danger) 12%, transparent);
}
.reprocess-btn:hover {
  opacity: 1;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
}
.reprocess-btn .spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Inline delete confirmation inside a card */
.delete-confirm {
  position: absolute;
  inset: auto 0.5rem 0.4rem auto;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--danger);
  border-radius: 999px;
  font-size: 0.82rem;
  box-shadow: var(--shadow-sm);
  z-index: 4;
}

/* Tag chips on a card (smaller than the top tag-bar chips) */
.card-tags {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  margin: 0.2rem 0 0;
}
.card-tag-chip {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.1rem 0.5rem;
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1.3;
}
.card-tag-chip .tag-chip-x { width: 13px; height: 13px; font-size: 0.85rem; }

/* Footer meta line — prep / cook / serves */
.card-added {
  margin-top: auto;
  padding-top: 0.45rem;
  color: var(--muted);
  font-size: 0.76rem;
}
.card-times { font-variant-numeric: tabular-nums; }

/* Processing state (recipe being parsed) */
.card-processing {
  background: repeating-linear-gradient(
    45deg,
    var(--surface) 0,
    var(--surface) 10px,
    var(--surface-2) 10px,
    var(--surface-2) 20px
  );
  animation: card-processing-pulse 2.4s ease-in-out infinite;
}
@keyframes card-processing-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Drop-hover when a tag is being dragged over a card */
.card.tag-drop-hover {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 10%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent), var(--shadow-md);
}


/* --- Onboarding panel (empty MyRecipes) -------------------------- */

.onboarding {
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.4);
  box-shadow: var(--shadow-sm);
}
.onboarding-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  margin: 0 0 0.4rem;
  text-wrap: balance;
}
.onboarding-lead {
  color: var(--text-2);
  margin: 0 0 1.5rem;
  font-size: 1rem;
  max-width: 56ch;
}
.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.onboarding-card {
  padding: 1.2rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.onboarding-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.1rem;
}
.onboarding-card p { margin: 0; font-size: 0.92rem; color: var(--text-2); line-height: 1.5; }
.onboarding-card .btn { align-self: flex-start; margin-top: 0.25rem; }
.onboarding-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 1.1rem;
}
.onboarding-email {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.88rem;
  color: var(--text);
}
.onboarding-small { color: var(--muted); font-size: 0.82rem; }
.onboarding-samples {
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border);
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
}
.onboarding-samples .onboarding-small { flex-basis: 100%; margin: 0.3rem 0 0; }

.empty-hint {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
  text-align: center;
}
.empty-hint p { margin: 0.25rem 0; }


/* --- AI document view (Ask AI generated docs) -------------------- */

.ai-document {
  position: relative;
  padding: 1.5rem 1.75rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin: 0 0 1.5rem;
  line-height: 1.6;
}
.ai-document h1, .ai-document h2, .ai-document h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}
.ai-document-actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border);
}

.card-ai-reason {
  margin-top: 0.4rem;
  padding: 0.5rem 0.6rem;
  background: color-mix(in oklab, var(--primary) 7%, var(--surface));
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  font-size: 0.84rem;
  color: var(--text-2);
  font-style: italic;
}


/* --- Pagination -------------------------------------------------- */

.pagination {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  justify-content: center;
  margin: 2rem 0 0;
}
.pagination .btn {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.88rem;
  min-width: 38px;
  justify-content: center;
}


/* --- Shopping-list picker modal (Add to list…) ------------------- */

.sl-pick-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.sl-pick-modal {
  width: 100%; max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
}
.sl-pick-modal h3 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.2rem;
}
.sl-pick-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.sl-pick-option {
  width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: background .12s, border-color .12s;
}
.sl-pick-option:hover { background: var(--surface-2); border-color: color-mix(in oklab, var(--primary) 25%, var(--border)); }
.sl-pick-option.current,
.sl-pick-option:disabled { opacity: 0.6; cursor: default; }
.sl-pick-name { font-weight: 600; font-size: 0.98rem; }
.sl-pick-meta { font-size: 0.82rem; color: var(--muted); }
.sl-pick-current { color: var(--primary); }


/* =================================================================
 * THEME-SPECIFIC OVERRIDES — for the real classes above
 * ================================================================= */

/* EDITORIAL — magazine, big serif, thin rules */
[data-theme="editorial"] .add-drop-banner {
  border-radius: 0;
  box-shadow: none;
  border: 0;
  border-top: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  background: var(--surface);
  color: var(--text);
}
[data-theme="editorial"] .add-drop-banner h1 { font-size: clamp(2rem, 4vw, 3rem); }
[data-theme="editorial"] .add-drop-hint { color: var(--text-2); }
[data-theme="editorial"] .card {
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid var(--text);
  padding: 1rem 0 1rem;
}
[data-theme="editorial"] .card:hover { box-shadow: none; transform: none; border-top-color: var(--primary); }
[data-theme="editorial"] .card .title { font-size: 1.25rem; }
[data-theme="editorial"] .card-thumb-wrap { border-radius: 0; border-color: transparent; box-shadow: none; padding: 0; }
[data-theme="editorial"] .card-thumb { border-radius: 0; }
[data-theme="editorial"] .section-title {
  border-top: 2px solid var(--text);
  padding-top: 0.5rem;
}

/* MODERN — flat, minimal */
[data-theme="modern"] .card { box-shadow: none; }
[data-theme="modern"] .card:hover {
  box-shadow: 0 0 0 2px var(--primary);
  transform: none;
  border-color: transparent;
}
[data-theme="modern"] .add-drop-banner {
  box-shadow: none;
}
[data-theme="modern"] .topbar { background: var(--surface); }
[data-theme="modern"] .ai-search-row { box-shadow: none; }

/* MIDNIGHT — glow on hover, image-forward */
[data-theme="midnight"] .card-thumb { filter: brightness(1.05) saturate(1.1); }
[data-theme="midnight"] .card:hover {
  box-shadow: 0 0 0 1px var(--primary), 0 18px 40px color-mix(in oklab, var(--primary) 25%, transparent);
}
[data-theme="midnight"] .topbar {
  background: color-mix(in oklab, var(--surface) 85%, transparent);
}
[data-theme="midnight"] .card-thumb-wrap {
  border-color: color-mix(in oklab, var(--accent) 70%, var(--border));
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--accent) 50%, transparent),
    0 4px 14px rgba(0,0,0,.35);
}

/* MARKET — generous spacing already baked in via tokens; nothing extra */

/* ─── Add‑Recipe page ────────────────────────────────────────── */
.add-shell {
  max-width: 780px;
  margin: 0 auto;
}
.add-drop {
  position: relative;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: calc(var(--radius) * 1.4);
  padding: 1.25rem 1.5rem;
  transition: border-color .15s, background .15s, box-shadow .15s;
  margin-bottom: 0.4rem;
}
.add-drop:focus-within {
  border-color: var(--primary);
  border-style: solid;
  background: color-mix(in oklab, var(--primary) 4%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 14%, transparent);
}
.add-drop > label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 0.6rem;
  font-weight: 600;
}
.add-drop .recipe-editor {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 320px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
.add-drop .recipe-editor:focus { box-shadow: none !important; outline: none; }
.add-drop .recipe-editor:empty::before {
  color: var(--muted);
  font-style: italic;
}

.add-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.add-actions .processing-hint {
  color: var(--muted);
  font-size: 0.88rem;
}

.add-paprika-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  margin: 1.5rem 0 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 0.92rem;
}
.add-paprika-note code {
  background: var(--surface);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
  border: 1px solid var(--border);
}

.add-error {
  padding: 0.75rem 1rem;
  background: color-mix(in oklab, var(--danger, #c0392b) 10%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--danger, #c0392b) 30%, var(--border));
  color: var(--danger, #c0392b);
  border-radius: var(--radius);
  margin: 0 0 1rem;
  font-size: 0.92rem;
}

.add-duplicate {
  padding: 0.75rem 1rem;
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  border-radius: var(--radius);
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
  color: var(--text);
}

.add-quota {
  text-align: center;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.2);
}
.add-quota p { margin: 0 0 0.5rem; }
.add-quota .lead { font-size: 1.1rem; font-weight: 600; color: var(--text); }

/* ─── Meal Plan retheme (legacy .plan-* markup) ────────────── */

/* Toolbar — turn the row into a soft card with a pill week-nav */
body[data-theme] .plan-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.1);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}
body[data-theme] .plan-toolbar h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1;
  color: var(--text);
  margin: 0 auto 0 0 !important;
}

body[data-theme] .plan-week-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
body[data-theme] .plan-week-nav .btn {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 0.9rem;
}
body[data-theme] .plan-week-nav .btn:hover {
  background: var(--surface);
}
body[data-theme] .plan-week-label {
  font-weight: 600;
  color: var(--text);
  font-size: 0.92rem;
  min-width: 13rem;
  text-align: center;
  padding: 0 0.5rem;
}

body[data-theme] .plan-toolbar .btn-print {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 1rem;
}
body[data-theme] .plan-toolbar .btn-print:hover {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

/* Drawer (left side, draggable recipes) */
body[data-theme] .plan-drawer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.2);
  padding: 0.75rem;
  box-shadow: var(--shadow-sm);
}
body[data-theme] .plan-drawer-search {
  display: flex; gap: 0.4rem; align-items: center;
  margin-bottom: 0.6rem;
}
body[data-theme] .plan-drawer-search .form-control {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.92rem;
  color: var(--text);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
body[data-theme] .plan-drawer-search .form-control::placeholder { color: var(--muted); }
body[data-theme] .plan-drawer-search .form-control:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
  outline: none;
}

/* Favorites toggle — round pill */
body[data-theme] .fav-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  flex: 0 0 36px;
  transition: color .12s, background .12s, border-color .12s;
}
body[data-theme] .fav-toggle:hover {
  border-color: #e0493a;
  color: #e0493a;
}
body[data-theme] .fav-toggle.on {
  background: color-mix(in oklab, #e0493a 14%, var(--surface));
  border-color: #e0493a;
  color: #e0493a;
}

/* Drawer cards */
body[data-theme] .plan-drawer-card {
  border-radius: var(--radius);
  padding: 0.45rem;
  transition: background .12s, transform .08s;
}
body[data-theme] .plan-drawer-card:hover { background: var(--surface-2); }
body[data-theme] .plan-drawer-card:active { transform: scale(0.98); }
body[data-theme] .plan-drawer-thumb {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}
body[data-theme] .plan-drawer-title { color: var(--text); font-size: 0.92rem; }
body[data-theme] .plan-drawer-sub { color: var(--muted); }
body[data-theme] .plan-drawer-fav { color: #e0493a; }
body[data-theme] .plan-drawer-empty { color: var(--muted); }

/* Week grid */
body[data-theme] .plan-grid {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.2);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
body[data-theme] .plan-corner,
body[data-theme] .plan-day-label,
body[data-theme] .plan-meal-label {
  background: var(--surface-2);
  border-color: var(--border);
}
body[data-theme] .plan-corner-btn { color: var(--muted); }
body[data-theme] .plan-corner-btn:hover {
  background: color-mix(in oklab, var(--danger, #b94737) 14%, var(--surface));
  color: var(--danger, #b94737);
}

body[data-theme] .plan-day-label {
  padding: 0.7rem 0.4rem;
  border-left: 1px solid var(--border);
}
body[data-theme] .plan-day-label.today {
  background: color-mix(in oklab, var(--primary) 14%, var(--surface));
}
body[data-theme] .plan-day-label.today .plan-day-name { color: var(--primary); }
body[data-theme] .plan-day-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: 0.95rem;
  color: var(--text);
}
body[data-theme] .plan-day-date {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.15rem;
}

body[data-theme] .plan-meal-label {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  border-top: 1px solid var(--border);
  padding: 0.6rem 0.7rem;
}

body[data-theme] .plan-cell {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  padding: 0.5rem;
  min-height: 6rem;
  transition: background .12s;
}
body[data-theme] .plan-cell.drag-over {
  background: color-mix(in oklab, var(--primary) 12%, var(--surface));
}
body[data-theme] .plan-cell-empty {
  color: color-mix(in oklab, var(--muted) 45%, transparent);
  font-size: 1.6rem;
  font-weight: 300;
}

/* Slot cards inside cells */
body[data-theme] .plan-slot {
  background: color-mix(in oklab, var(--primary) 6%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--border));
  border-radius: calc(var(--radius) * 0.85);
  padding: 0.45rem 0.55rem;
  font-size: 0.82rem;
  line-height: 1.25;
  transition: transform .12s, box-shadow .12s;
}
body[data-theme] .plan-slot:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
body[data-theme] .plan-slot-title {
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
}
body[data-theme] .plan-slot-title:hover { color: var(--primary); }
body[data-theme] .plan-slot-servings {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 0.1rem 0.3rem;
  font-size: 0.75rem;
}
body[data-theme] .plan-slot-del {
  color: var(--muted);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
body[data-theme] .plan-slot-del:hover {
  background: color-mix(in oklab, var(--danger, #b94737) 14%, var(--surface));
  color: var(--danger, #b94737);
}

/* Modals (clear-week mini-confirm + AI planner + update-list prompt) */
body[data-theme] .mini-confirm-backdrop,
body[data-theme] .reprocess-modal-backdrop {
  background: color-mix(in oklab, var(--text) 45%, transparent);
  backdrop-filter: blur(2px);
}
body[data-theme] .mini-confirm,
body[data-theme] .reprocess-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.2);
  box-shadow: var(--shadow-md);
  color: var(--text);
}
body[data-theme] .reprocess-modal h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  margin: 0 0 0.5rem;
  color: var(--text);
  font-size: 1.25rem;
}
body[data-theme] .reprocess-modal textarea.form-control {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  color: var(--text);
  font: inherit;
  width: 100%;
  resize: vertical;
}
body[data-theme] .reprocess-modal textarea.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
  outline: none;
  background: var(--surface);
}
body[data-theme] .reprocess-modal-actions,
body[data-theme] .mini-confirm-actions {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  margin-top: 0.75rem;
}

/* AI status banner (alert above the grid) */
body[data-theme] .alert.alert-success {
  background: color-mix(in oklab, var(--primary) 10%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border));
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
}
body[data-theme] .alert.alert-danger {
  background: color-mix(in oklab, var(--danger, #b94737) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--danger, #b94737) 30%, var(--border));
  color: var(--danger, #b94737);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
}

/* ─── Shopping List retheme (legacy .sl-* markup) ──────────── */

/* Top bar */
body[data-theme] .sl-topbar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.1);
  box-shadow: var(--shadow-sm);
}
body[data-theme] .sl-topbar .sl-back-link {
  color: var(--primary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
body[data-theme] .sl-topbar .sl-back-link:hover {
  text-decoration: underline;
}
body[data-theme] .sl-topbar .btn-print {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
body[data-theme] .sl-topbar .btn-print:hover {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

/* Pill view-toggle (Recipes / Composite) */
body[data-theme] .sl-view-toggle {
  display: inline-flex; position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  margin: 0;
}
body[data-theme] .sl-view-toggle button {
  background: transparent;
  border: 0;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 0.9rem;
  transition: color .12s, background .15s;
}
body[data-theme] .sl-view-toggle button:hover:not(.active) { color: var(--text); }
body[data-theme] .sl-view-toggle button.active {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* Header row — big name + people stepper + add-recipe */
body[data-theme] .sl-header {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.2);
  box-shadow: var(--shadow-sm);
}
body[data-theme] .sl-name-input {
  flex: 1 1 20rem; min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
  color: var(--text);
  border: 1px solid transparent;
  background: transparent;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
body[data-theme] .sl-name-input:hover,
body[data-theme] .sl-name-input:focus {
  border-color: var(--border);
  background: var(--surface-2);
  outline: none;
}
body[data-theme] .sl-name-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}

/* People stepper */
body[data-theme] .sl-people {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
body[data-theme] .sl-people-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
body[data-theme] .sl-people-btn:hover:not(:disabled) {
  background: var(--surface);
  color: var(--primary);
}
body[data-theme] .sl-people-btn:disabled { opacity: 0.35; cursor: not-allowed; }
body[data-theme] .sl-people-circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

body[data-theme] .sl-add-recipe-btn { margin-left: auto; }

/* Recipes view — list of contributing recipes */
body[data-theme] .sl-recipe-row {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.5rem;
  transition: border-color .12s, transform .08s, box-shadow .12s;
}
body[data-theme] .sl-recipe-row:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
body[data-theme] .sl-recipe-link {
  flex: 1;
  color: var(--text);
  text-decoration: none;
}
body[data-theme] .sl-recipe-title {
  font-weight: 600;
  color: var(--text);
}
body[data-theme] .sl-recipe-sub { color: var(--muted); font-style: italic; }
body[data-theme] .sl-recipe-meta { color: var(--muted); font-size: 0.85rem; }
body[data-theme] .sl-recipe-del {
  color: var(--muted);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
body[data-theme] .sl-recipe-del:hover {
  background: color-mix(in oklab, var(--danger, #b94737) 14%, var(--surface));
  color: var(--danger, #b94737);
}

/* Composite (the actual checkable shopping list) */
body[data-theme] .sl-composite {
  list-style: none; padding: 0; margin: 0.5rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.1);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
body[data-theme] .sl-composite > li {
  display: flex; gap: 0.75rem; align-items: baseline;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background .1s, color .15s, opacity .15s;
}
body[data-theme] .sl-composite > li:last-child { border-bottom: 0; }
body[data-theme] .sl-composite > li:hover {
  background: color-mix(in oklab, var(--primary) 4%, var(--surface));
}
body[data-theme] .sl-composite > li.struck {
  color: var(--muted);
  background: var(--surface-2);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
body[data-theme] .sl-comp-qty {
  color: var(--text-2);
  min-width: 7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-family: var(--font-display);
}
body[data-theme] .sl-comp-name {
  flex: 1;
  color: var(--text);
  font-size: 0.98rem;
}
body[data-theme] .sl-comp-sources {
  color: var(--muted);
  font-size: 0.78rem;
  background: var(--surface-2);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}

/* Add-recipe modal */
body[data-theme] .sl-pick-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--text) 45%, transparent);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10002;
}
body[data-theme] .sl-pick-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.2);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
  width: min(520px, calc(100% - 2rem));
  max-height: 80vh;
  overflow: auto;
  color: var(--text);
}
body[data-theme] .sl-pick-modal h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  margin: 0 0 0.75rem;
  color: var(--text);
}
body[data-theme] .sl-pick-modal .form-control {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
  color: var(--text);
  font: inherit;
  width: 100%;
}
body[data-theme] .sl-pick-modal .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
  outline: none;
  background: var(--surface);
}
body[data-theme] .sl-pick-list { list-style: none; padding: 0; margin: 0.5rem 0; }
body[data-theme] .sl-pick-option {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
body[data-theme] .sl-pick-option:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border);
}
body[data-theme] .sl-pick-option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
body[data-theme] .sl-pick-name { font-weight: 600; }
body[data-theme] .sl-pick-meta { color: var(--muted); font-size: 0.85rem; }
body[data-theme] .sl-pick-current { color: var(--accent); font-size: 0.78rem; }

/* Empty-state hint card */
body[data-theme] .empty-hint {
  text-align: center;
  padding: 1.5rem;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
}
/* =============================================================
   redesign.css — Chunk D additions
   Append to the END of src/IWant2Eat.Web/wwwroot/css/redesign.css
   ============================================================= */

/* ---- MyRecipes: hero strip (search + add) ------------------ */

.ai-scope-note {
    margin: 0 0 .75rem 0;
    color: var(--muted, #6b6b6b);
    font-size: .9rem;
    letter-spacing: .01em;
}

.ai-search-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr) auto auto;
    gap: .5rem;
    align-items: center;
    padding: .6rem;
    background: var(--surface-2, #fbf8f3);
    border: 1px solid var(--border, #e8e0d2);
    border-radius: 14px;
    margin-bottom: 1rem;
}

.ai-search-row .form-control.ai-search-prompt,
.ai-search-row .form-control.ai-search-details {
    border-radius: 10px;
    border: 1px solid var(--border, #e8e0d2);
    background: var(--surface, #fff);
    padding: .55rem .75rem;
    font-size: .95rem;
    min-height: 42px;
}

.ai-search-row .ai-search-ask {
    border-radius: 10px;
    padding: .55rem 1.1rem;
    min-height: 42px;
    font-weight: 600;
}

.ai-search-row .ai-search-clear {
    border-radius: 10px;
    min-height: 42px;
    padding: .55rem .75rem;
}

@media (max-width: 720px) {
    .ai-search-row {
        grid-template-columns: 1fr 1fr;
    }
    .ai-search-row .ai-search-ask,
    .ai-search-row .ai-search-clear {
        grid-column: span 1;
    }
}

/* ---- MyRecipes: tag bar ------------------------------------ */

.tag-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1rem 0;
    padding: .5rem 0;
    align-items: center;
}

.tag-bar .tag-chip,
.tag-bar > a,
.tag-bar > span:not(.tag-chip-count):not(.tag-chip-x) {
    border-radius: 999px;
    padding: .35rem .75rem;
    /* Route through theme variables — the previous `background: #fff`
       + `color: var(--text)` combo made midnight chips invisible: the
       hardcoded white pill carried the cream --text from the dark
       theme, and cream-on-white is unreadable. --chip-bg / --chip-text
       are the same vars .tag-chip's base rule uses, so the chip
       background contrasts with its text on every theme. */
    background: var(--chip-bg, #fff);
    border: 1px solid var(--chip-border, var(--border, #e8e0d2));
    color: var(--chip-text, var(--text, #2a2622));
    font-size: .88rem;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
}

.tag-bar a:hover {
    background: var(--surface-2, #fbf8f3);
    border-color: var(--primary, #c8442a);
}

.tag-chip-edit {
    border-radius: 999px;
    border: 1px solid var(--primary, #c8442a);
    padding: .25rem .7rem;
    font-size: .88rem;
}

.tag-chip-count {
    color: var(--muted, #6b6b6b);
    font-size: .82rem;
    margin-left: .25rem;
}

.tag-chip-x {
    background: transparent;
    border: none;
    color: var(--muted, #6b6b6b);
    cursor: pointer;
    padding: 0 .15rem;
    margin-left: .25rem;
    font-size: .85rem;
    line-height: 1;
}

.tag-chip-x:hover { color: var(--primary, #c8442a); }

.tag-add-input {
    border-radius: 999px;
    border: 1px dashed var(--border, #e8e0d2);
    padding: .35rem .75rem;
    background: transparent;
    font-size: .88rem;
    min-width: 140px;
}

.tag-add-input:focus {
    outline: none;
    border-style: solid;
    border-color: var(--primary, #c8442a);
    background: var(--surface, #fff);
}

.tag-delete-confirm {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .5rem;
    background: var(--surface, #fff);
    border: 1px solid var(--primary, #c8442a);
    border-radius: 999px;
    font-size: .85rem;
}

.tag-delete-confirm .btn-yes,
.tag-delete-confirm .btn-no {
    border-radius: 999px;
    padding: .15rem .65rem;
    font-size: .8rem;
    border: 1px solid var(--border, #e8e0d2);
    background: var(--surface, #fff);
    cursor: pointer;
}

.tag-delete-confirm .btn-yes {
    background: var(--primary, #c8442a);
    color: #fff;
    border-color: var(--primary, #c8442a);
}

.tag-bar-bottom {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border, #e8e0d2);
}

.sort-switch {
    margin-left: auto;
    font-size: .88rem;
    color: var(--muted, #6b6b6b);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* ---- MyRecipes: recipe cards (image-on-top) ---------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.card-grid > .card,
.card-grid > a.card {
    display: flex;
    flex-direction: column;
    /* Route through --surface so dark themes (midnight) get the
       theme's dark card background instead of a hardcoded white
       pill. The earlier "background: #fff" left midnight cards as
       bright-white tiles on the dark page — exactly the same shape
       of bug we just fixed for .tag-bar .tag-chip. Fallback to the
       previous literal preserves light themes byte-for-byte. */
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e8e0d2);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    border-left-width: 1px !important; /* override the inline 3px accent in markup */
}

.card-grid > .card:hover,
.card-grid > a.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(60, 30, 10, .08);
    border-color: var(--primary, #c8442a);
}

.card .card-thumb-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--surface-2, #fbf8f3);
    overflow: hidden;
    flex: 0 0 auto;
    margin: 0;
}

.card .card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.card:hover .card-thumb { transform: scale(1.03); }

.card .title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    padding: .85rem 1rem .25rem;
    color: var(--text, #2a2622);
}

.card .subtitle {
    font-size: .88rem;
    color: var(--muted, #6b6b6b);
    padding: 0 1rem .5rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: 0 1rem .5rem;
}

.card .card-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: var(--surface-2, #fbf8f3);
    border: 1px solid var(--border, #e8e0d2);
    color: var(--text, #2a2622);
    border-radius: 999px;
    padding: .15rem .55rem;
    font-size: .75rem;
}

.card .card-tag-chip .tag-chip-x {
    margin-left: .1rem;
    font-size: .75rem;
}

.card .card-added {
    margin-top: auto;
    padding: .5rem 1rem .85rem;
    border-top: 1px dashed var(--border, #e8e0d2);
    color: var(--muted, #6b6b6b);
    font-size: .78rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card .card-times {
    color: var(--muted, #6b6b6b);
}

/* AI search result card extras */
.card .card-ai-reason {
    padding: .3rem 1rem .6rem;
    font-size: .82rem;
    color: var(--muted, #6b6b6b);
    font-style: italic;
    line-height: 1.35;
}

/* Stock badge (overlay on thumb) */
.card-stock-badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(4px);
    color: var(--text, #2a2622);
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .72rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    z-index: 2;
}

/* Shared/copy button overlay */
.card-shared-btn {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border, #e8e0d2);
    border-radius: 999px;
    padding: .25rem .55rem;
    font-size: .78rem;
    cursor: pointer;
    z-index: 2;
    transition: background .15s, transform .15s;
}

.card-shared-btn:hover {
    background: #fff;
    transform: scale(1.05);
}

.card-shared-confirm {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: #fff;
    border: 1px solid var(--primary, #c8442a);
    border-radius: 12px;
    padding: .5rem .7rem;
    font-size: .82rem;
    box-shadow: 0 6px 18px rgba(60, 30, 10, .12);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 160px;
}

.card-shared-confirm .btn-yes,
.card-shared-confirm .btn-no {
    border-radius: 8px;
    padding: .25rem .6rem;
    font-size: .8rem;
    border: 1px solid var(--border, #e8e0d2);
    background: #fff;
    cursor: pointer;
}

.card-shared-confirm .btn-yes {
    background: var(--primary, #c8442a);
    color: #fff;
    border-color: var(--primary, #c8442a);
}

/* Delete confirm bubble on card */
.delete-confirm {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    background: var(--surface, #fff);
    border: 1px solid var(--primary, #c8442a);
    border-radius: 12px;
    padding: .5rem .65rem;
    box-shadow: 0 6px 18px rgba(60, 30, 10, .12);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
}

.delete-confirm .btn-yes,
.delete-confirm .btn-no {
    border-radius: 8px;
    padding: .25rem .6rem;
    font-size: .8rem;
    border: 1px solid var(--border, #e8e0d2);
    background: var(--surface, #fff);
    cursor: pointer;
}

.delete-confirm .btn-yes {
    background: var(--primary, #c8442a);
    color: #fff;
    border-color: var(--primary, #c8442a);
}

/* Trash and reprocess buttons sit on hover */
.trash-btn,
.reprocess-btn {
    position: absolute;
    bottom: .5rem;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--border, #e8e0d2);
    border-radius: 999px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, transform .15s, background .15s;
    z-index: 2;
}

.trash-btn { right: .5rem; }
.reprocess-btn { right: 2.4rem; }

.card:hover .trash-btn,
.card:hover .reprocess-btn { opacity: 1; }

.trash-btn:hover,
.reprocess-btn:hover {
    background: var(--surface, #fff);
    transform: scale(1.08);
    border-color: var(--primary, #c8442a);
}

/* Empty / hint blocks */
.empty-hint {
    text-align: center;
    color: var(--muted, #6b6b6b);
    padding: 2rem 1rem;
    background: var(--surface-2, #fbf8f3);
    border: 1px dashed var(--border, #e8e0d2);
    border-radius: 14px;
    margin: 1rem 0;
}

/* ---- MyRecipes: onboarding grid (no recipes yet) ----------- */

.onboarding {
    margin: 2rem 0;
    padding: 1.5rem 0;
}

.onboarding-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text, #2a2622);
    margin: 0 0 .5rem 0;
    letter-spacing: -.01em;
}

.onboarding-lead {
    text-align: center;
    color: var(--muted, #6b6b6b);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.5;
}

.onboarding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.onboarding-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e8e0d2);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.onboarding-card:hover {
    border-color: var(--primary, #c8442a);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(60, 30, 10, .06);
}

.onboarding-icon {
    font-size: 2rem;
    margin-bottom: .5rem;
}

.onboarding-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: .25rem 0 .5rem;
}

.onboarding-card p {
    font-size: .9rem;
    color: var(--muted, #6b6b6b);
    line-height: 1.45;
    margin: .35rem 0;
}

.onboarding-card .onboarding-small {
    font-size: .78rem;
    margin-top: .5rem;
}

.onboarding-email {
    background: var(--surface-2, #fbf8f3);
    padding: .15rem .5rem;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
    color: var(--primary, #c8442a);
}

.onboarding-card .btn,
.onboarding-card .btn-primary {
    margin-top: .5rem;
}

.onboarding-samples {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px dashed var(--border, #e8e0d2);
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    align-items: center;
}

.onboarding-samples .onboarding-small {
    flex-basis: 100%;
    font-size: .78rem;
    color: var(--muted, #6b6b6b);
    margin-top: .25rem;
}

/* ---- MyRecipes: pagination --------------------------------- */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin: 2rem 0 1rem;
    color: var(--muted, #6b6b6b);
}

.pagination .btn {
    border-radius: 10px;
    padding: .45rem 1rem;
    border: 1px solid var(--border, #e8e0d2);
    /* Theme-aware surface — was hardcoded #fff, which left midnight
       page buttons as bright-white pills with faint cream text. */
    background: var(--surface, #fff);
    transition: background .15s, border-color .15s, color .15s;
}

.pagination .btn:not(:disabled):hover {
    background: var(--surface-2, #fbf8f3);
    border-color: var(--primary, #c8442a);
    color: var(--primary, #c8442a);
}

.pagination .btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ---- MyRecipes: shopping-list picker modal ----------------- */

.sl-pick-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 6, .42);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.sl-pick-modal {
    background: var(--surface, #fff);
    border-radius: 18px;
    padding: 1.25rem 1.25rem 1rem;
    width: min(440px, 92vw);
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 22px 60px rgba(20, 12, 6, .25);
}

.sl-pick-modal h3 {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.sl-pick-list {
    list-style: none;
    margin: .5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.sl-pick-list > li {
    border-radius: 10px;
    transition: background .12s;
}

.sl-pick-list > li:hover {
    background: var(--surface-2, #fbf8f3);
}

.sl-pick-list button,
.sl-pick-list a {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: .65rem .75rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    color: inherit;
}

.sl-pick-name {
    font-weight: 600;
    font-size: .98rem;
}

.sl-pick-meta {
    font-size: .82rem;
    color: var(--muted, #6b6b6b);
}

.sl-pick-current {
    color: var(--primary, #c8442a);
    font-weight: 500;
}

/* ---- MyRecipes: AI document panel -------------------------- */

.ai-document {
    background: var(--surface-2, #fbf8f3);
    border: 1px solid var(--border, #e8e0d2);
    border-radius: 18px;
    padding: 1.25rem;
    margin: 1rem 0 1.5rem;
}

.ai-document-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--border, #e8e0d2);
}

.ai-document-actions .btn {
    border-radius: 10px;
    padding: .4rem .85rem;
    font-size: .88rem;
}

/* =============================================================
   Home.razor (marketing landing)
   ============================================================= */

/* Try CTA banner at top — orange (theme --accent) so it stands out
   against the primary-green pricing CTA further down the page. Sized
   up a notch + extra weight so it reads as a button, not a banner. */
.try-cta-banner {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.4rem;
    background: var(--accent, #ff6b1f);
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem auto;
    transition: transform .15s, box-shadow .15s, filter .12s;
    box-shadow: 0 4px 14px rgba(255, 107, 31, .35);
}

.try-cta-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 107, 31, .5);
    filter: brightness(1.06);
    text-decoration: none;
    color: #fff;
}

.try-cta-banner-icon { font-size: 1.05rem; }
.try-cta-banner-arrow { font-weight: 700; }

/* Hero: split layout */
.hero.hero-split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
    align-items: center;
    padding: 3rem 0 2rem;
}

@media (max-width: 900px) {
    .hero.hero-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem 0;
    }
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    font-weight: 600;
    color: var(--primary, #c8442a);
    margin: 0 0 .75rem;
}

/* Eyebrow-as-CTA variant. The eyebrow tagline doubles as a softer
   secondary sign-up affordance — the primary green "Start your free
   trial" button sits further down inside the pricing card; this one
   catches the visitor's eye at the top of the hero copy and points
   to the same /Account/Register destination without competing
   visually with the primary button. Pill outline + hover-fill says
   "this is clickable" without screaming. */
a.hero-eyebrow-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border: 1.5px solid var(--primary, #c8442a);
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s, color .15s, transform .12s;
}
a.hero-eyebrow-cta:hover {
    background: var(--primary, #c8442a);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
a.hero-eyebrow-cta em {
    font-style: italic;
    font-weight: 700;
}
a.hero-eyebrow-cta .hero-eyebrow-arrow {
    font-weight: 700;
    font-size: .9rem;
}

.hero-copy { display: flex; flex-direction: column; gap: 1rem; }

.hero-headline {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    font-weight: 800;
    margin: 0;
    color: var(--text, #2a2622);
    text-wrap: balance;
}

.hero-shot-link {
    display: block;
    text-decoration: none;
    border-radius: 24px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 18px 50px rgba(60, 30, 10, .12);
}

.hero-shot-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 60px rgba(60, 30, 10, .18);
}

.hero-shot {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--surface-2, #fbf8f3);
}

.hero-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-extra {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--border, #e8e0d2);
}

@media (max-width: 900px) {
    .hero-extra { grid-template-columns: 1fr; gap: 1.25rem; }
}

.hero-extra .pitch {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text, #2a2622);
    margin: 0;
}

/* Pricing card (in hero) */
.pricing-card {
    background: #fff;
    border: 1px solid var(--border, #e8e0d2);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(60, 30, 10, .06);
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.pricing-headline {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text, #2a2622);
    margin: 0;
    line-height: 1.4;
}

.pricing-card .btn-hero {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 999px;
    transition: transform .15s, box-shadow .15s;
}

.pricing-card .btn-hero:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(200, 68, 42, .32);
}

.btn-hero-arrow { transition: transform .2s; }
.btn-hero:hover .btn-hero-arrow { transform: translateX(3px); }

.pricing-sublinks {
    font-size: .85rem;
    color: var(--muted, #6b6b6b);
    margin: 0;
}

.pricing-sublinks a { color: var(--primary, #c8442a); text-decoration: none; }
.pricing-sublinks a:hover { text-decoration: underline; }

.hero-langnote {
    font-size: .8rem;
    color: var(--muted, #6b6b6b);
    margin: 0;
    grid-column: 1 / -1;
    text-align: center;
    padding-top: .5rem;
}

/* Section heading shared */
.section-h {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 1.5rem;
    color: var(--text, #2a2622);
    text-align: center;
}

/* Founder section */
.home-founder {
    margin: 4rem auto;
    max-width: 760px;
    padding: 2rem;
    background: var(--surface-2, #fbf8f3);
    border-radius: 24px;
}

.home-founder-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--text, #2a2622);
}

.home-founder-body {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--text, #2a2622);
    margin: 0;
    text-wrap: pretty;
}

/* Social proof */
.social-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 3rem auto;
    max-width: 760px;
    text-align: center;
}

@media (max-width: 640px) {
    .social-proof { grid-template-columns: 1fr; }
}

.social-proof-item {
    padding: 1.25rem 1rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border, #e8e0d2);
}

.social-proof-figure {
    display: block;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--primary, #c8442a);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: .25rem;
}

.social-proof-label {
    display: block;
    font-size: .88rem;
    color: var(--muted, #6b6b6b);
    line-height: 1.35;
}

/* How it works */
.how-it-works { margin: 4rem 0; }

.how-it-works-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    counter-reset: hiw;
}

@media (max-width: 760px) {
    .how-it-works-list { grid-template-columns: 1fr; }
}

.how-it-works-list > li {
    background: #fff;
    border: 1px solid var(--border, #e8e0d2);
    border-radius: 18px;
    padding: 1.5rem 1.25rem;
    position: relative;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.how-it-works-list > li:hover {
    border-color: var(--primary, #c8442a);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(60, 30, 10, .06);
}

.how-it-works-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--primary, #c8442a);
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: .85rem;
}

.how-it-works-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 .5rem;
    color: var(--text, #2a2622);
}

.how-it-works-body {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--muted, #6b6b6b);
    margin: 0;
}

/* Hero gallery */
.hero-gallery { margin: 4rem 0; }

.hero-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.hero-gallery-grid > * {
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-2, #fbf8f3);
    border: 1px solid var(--border, #e8e0d2);
    transition: transform .2s, box-shadow .2s;
}

.hero-gallery-grid > *:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(60, 30, 10, .1);
}

.hero-gallery-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Testimonial */
.home-testimonial { margin: 4rem auto; max-width: 720px; }

.home-testimonial-card {
    background: var(--surface-2, #fbf8f3);
    border-radius: 24px;
    padding: 2.5rem 2rem 2rem;
    position: relative;
    margin: 0;
    text-align: center;
}

.home-testimonial-mark {
    position: absolute;
    top: -.5rem;
    left: 1.5rem;
    font-size: 5rem;
    line-height: 1;
    color: var(--primary, #c8442a);
    opacity: .25;
    font-family: Georgia, serif;
}

.home-testimonial-quote {
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--text, #2a2622);
    margin: 0 0 1rem;
    font-style: italic;
    text-wrap: pretty;
}

.home-testimonial-attrib {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-style: normal;
}

.home-testimonial-name {
    font-weight: 600;
    color: var(--text, #2a2622);
}

.home-testimonial-source {
    font-size: .85rem;
    color: var(--muted, #6b6b6b);
}

/* FAQ */
.home-faq { margin: 4rem 0; max-width: 760px; margin-left: auto; margin-right: auto; }

.home-faq details {
    background: #fff;
    border: 1px solid var(--border, #e8e0d2);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: .6rem;
    transition: border-color .15s;
}

.home-faq details[open] {
    border-color: var(--primary, #c8442a);
}

.home-faq summary {
    font-weight: 600;
    cursor: pointer;
    color: var(--text, #2a2622);
    list-style: none;
    padding-right: 1.5rem;
    position: relative;
    font-size: 1rem;
}

.home-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--primary, #c8442a);
    transition: transform .2s;
}

.home-faq details[open] summary::after {
    content: "−";
}

.home-faq details > p,
.home-faq details > div {
    margin: .75rem 0 0;
    color: var(--muted, #6b6b6b);
    line-height: 1.6;
    font-size: .95rem;
}

.home-faq-foot {
    margin-top: 1rem;
    text-align: center;
    color: var(--muted, #6b6b6b);
    font-size: .9rem;
}

/* Second CTA */
.home-cta2 {
    margin: 4rem 0;
    padding: 3rem 2rem;
    background: var(--text, #2a2622);
    color: #fff;
    border-radius: 24px;
    text-align: center;
}

.home-cta2-heading {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 .75rem;
    color: #fff;
    letter-spacing: -.01em;
}

.home-cta2-body {
    font-size: 1.05rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 1.5rem;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.home-cta2 .btn-hero {
    background: var(--primary, #c8442a);
    color: #fff;
    border: none;
    padding: .95rem 1.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: transform .15s, box-shadow .15s;
}

.home-cta2 .btn-hero:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(200, 68, 42, .45);
}

/* Authed home (signed-in) hero */
.hero .wordmark-wrap {
    display: inline-block;
    position: relative;
}

.hero .wordmark {
    max-width: 180px;
    height: auto;
    display: block;
}

.hero .pitch {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1.5rem 0;
    color: var(--text, #2a2622);
}

.hero .cta {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.hero .cta .btn-lg {
    padding: .85rem 1.5rem;
    font-size: 1.02rem;
    border-radius: 14px;
}
/* =============================================================
   redesign.css — Chunk D HOTFIX (recipe card image layout)
   Append to the END of src/IWant2Eat.Web/wwwroot/css/redesign.css
   ============================================================= */

/* Chunk D switched recipe cards to image-on-top, but app.css and an
   earlier section of redesign.css both still pin .card-thumb-wrap as
   an absolutely-positioned 75–96px "framed picture" in the card's
   upper-right corner. My width:100% partly won, but position:absolute
   and the fixed height stayed — so the image rendered as a strip
   across the top of each card, and the title kept its 80px
   right-padding reserved for a thumb that's no longer floating. The
   stock badge (originally tucked into the corner of the small frame)
   also ended up sticking out of the card. Fix all three. */

.card-grid > .card > .card-thumb-wrap,
.card-grid > a.card > .card-thumb-wrap,
.card-grid > .card .card-thumb-wrap,
.card-grid > a.card .card-thumb-wrap {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--surface-2, #fbf8f3) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    z-index: auto !important;
    /* re-establish a positioning context so the stock badge / share
       button below can overlay on the image itself */
    transform: none;
}

.card-grid > .card .card-thumb-wrap {
    position: relative !important;
}

/* The image inside: drop the white mat / inset ring / zoom cursor and
   fill the new full-width box. */
.card-grid > .card .card-thumb,
.card-grid > a.card .card-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform .25s ease;
}

.card-grid > .card:hover .card-thumb,
.card-grid > a.card:hover .card-thumb {
    transform: scale(1.03);
}

/* Kill the wrap hover-scale (the 1.08 from app.css) — the card itself
   lifts now, the thumb just slightly zooms. */
.card-grid > .card .card-thumb-wrap:hover,
.card-grid > a.card .card-thumb-wrap:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* app.css reserves 64–80px of right padding on .title / .subtitle /
   .meta / .card-ai-reason whenever a thumb is present, so the
   floating frame doesn't crowd the text. With the thumb now ON TOP
   of the card, that reservation makes the title look indented.
   Release it. */
.card-grid > .card:has(.card-thumb) .title,
.card-grid > .card:has(.card-thumb) .subtitle,
.card-grid > .card:has(.card-thumb) .meta,
.card-grid > .card:has(.card-thumb-wrap) .title,
.card-grid > .card:has(.card-thumb-wrap) .subtitle,
.card-grid > .card:has(.card-thumb-wrap) .card-ai-reason,
.card-grid > a.card:has(.card-thumb) .title,
.card-grid > a.card:has(.card-thumb) .subtitle,
.card-grid > a.card:has(.card-thumb) .meta,
.card-grid > a.card:has(.card-thumb-wrap) .title,
.card-grid > a.card:has(.card-thumb-wrap) .subtitle,
.card-grid > a.card:has(.card-thumb-wrap) .card-ai-reason {
    padding-right: 1rem !important;
}

/* Stock badge — was pinned to the corner of the small framed thumb
   (left:-2px; bottom:-2px). With the thumb now full-width, move it
   inside the image as a top-left chip. */
.card-grid > .card .card-stock-badge,
.card-grid > a.card .card-stock-badge {
    position: absolute !important;
    top: .6rem !important;
    left: .6rem !important;
    right: auto !important;
    bottom: auto !important;
    background: rgba(255, 255, 255, .94) !important;
    color: var(--text, #2a2622) !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-radius: 999px !important;
    padding: .15rem .55rem !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08) !important;
    z-index: 2 !important;
}
/* =============================================================
   redesign.css — Chunk D HOTFIX 2 (tag/added stacking)
   Append to the END of src/IWant2Eat.Web/wwwroot/css/redesign.css
   ============================================================= */

/* app.css makes .card-added absolutely-positioned (bottom: 0.5rem)
   and reserves 1.9rem of padding-bottom + 6.5rem min-height on the
   card to leave room for it. With image-on-top cards the tag row
   (.card-tags) also wants the bottom of the card — both end up in
   the same 1.9rem strip and overlap. Put .card-added back in normal
   flow underneath the tags. */

.card-grid > .card .card-added,
.card-grid > a.card .card-added {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem 1rem .85rem !important;
    margin: 0 !important;
    color: var(--muted, #6b6b6b);
    font-size: .78rem;
    font-style: normal !important;
    border-top: 1px dashed var(--border, #e8e0d2);
}

/* Release the bottom padding + min-height that were reserving space
   for the old absolute .card-added pin. */
.card-grid > .card,
.card-grid > a.card {
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

/* Make sure .card-tags lays out as a block strip above .card-added
   instead of being floated to the bottom by margin-top:auto. */
.card-grid > .card .card-tags,
.card-grid > a.card .card-tags {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 1rem .5rem !important;
}

/* The trash button was pinned bottom-right relative to the absolute
   .card-added — now .card-added is in flow, but the trash button
   should still float over the card. Keep it bottom-right of the
   whole card. */
.card-grid > .card .trash-btn,
.card-grid > a.card .trash-btn {
    bottom: .5rem !important;
    right: .5rem !important;
}
/* =============================================================
   redesign.css — Chunk D HOTFIX 3 (card size + footer alignment)
   Append to the END of src/IWant2Eat.Web/wwwroot/css/redesign.css
   ============================================================= */

/* Two issues left after fix 2:
   1. Cards are taller than they need to be — 4:3 image is generous.
      Trim to 16:10 so two rows fit better in the viewport.
   2. The Prep/Cook line ("card-added") doesn't align across a row of
      cards because cards without tags collapse vertically. Push
      .card-added to the bottom of each card so all footers sit on
      the same baseline regardless of how much content sits above. */

.card-grid > .card,
.card-grid > a.card {
    /* Already flex-column from chunk D — re-assert for safety. */
    display: flex !important;
    flex-direction: column !important;
}

.card-grid > .card .card-thumb-wrap {
    aspect-ratio: 16 / 10 !important;
}

/* Title gets a small top padding (we just removed bottom-of-card
   padding earlier, this keeps the title from kissing the image). */
.card-grid > .card .title,
.card-grid > a.card .title {
    padding-top: .85rem !important;
}

/* Push the prep/cook footer to the bottom of the card so all
   footers line up across the row. */
.card-grid > .card .card-added,
.card-grid > a.card .card-added {
    margin-top: auto !important;
}

/* If the card has no tags AND no subtitle, the gap above the footer
   was awkward — give the subtitle a min reservation so short cards
   don't squish. Tiny, just enough to keep the rhythm. */
.card-grid > .card .subtitle:empty,
.card-grid > a.card .subtitle:empty {
    display: none;
}
/* =============================================================
   redesign.css — Mobile fixes
   Append to the END of src/IWant2Eat.Web/wwwroot/css/redesign.css
   ============================================================= */

/* AddRecipe — the "Have a .paprikarecipes export? Import from Paprika"
   note was laid out as a flex row in chunk A. On narrow phones each
   text run gets squeezed into its own column. Fall back to plain
   block text on small screens. */

@media (max-width: 640px) {
    .add-paprika-note {
        display: block !important;
        text-align: left !important;
        gap: 0 !important;
        line-height: 1.55;
        padding: 1rem !important;
    }

    .add-paprika-note > * {
        display: inline !important;
        margin: 0 !important;
    }

    .add-paprika-note code {
        display: inline-block !important;
        margin: 0 .15rem !important;
        padding: .05rem .35rem !important;
        font-size: .85em !important;
        word-break: break-all;
    }

    .add-paprika-note a {
        white-space: normal !important;
    }

    /* AddRecipe overall page padding tighter on mobile */
    .add-page-shell {
        padding: 1rem !important;
    }

    .add-drop-banner {
        padding: 1.25rem 1rem !important;
    }

    /* Save / Cancel buttons full-width stack feels better on phones */
    .add-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .add-actions .btn {
        width: 100%;
    }

    /* MealPlan / ShoppingLists / MyRecipes — tag chips don't need to
       be uppercased on mobile, plus tap targets ≥ 32px */
    .tag-bar > a,
    .tag-bar .tag-chip {
        padding: .45rem .85rem !important;
        font-size: .9rem !important;
    }

    /* Recipe-card grid: single column or two-up on phone is fine,
       but stop the 240px min from forcing horizontal scroll */
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap: .85rem !important;
    }

    .card-grid > .card .title,
    .card-grid > a.card .title {
        font-size: .98rem !important;
        padding: .6rem .75rem .2rem !important;
    }

    .card-grid > .card .subtitle,
    .card-grid > a.card .subtitle {
        padding: 0 .75rem .4rem !important;
        font-size: .82rem !important;
    }

    .card-grid > .card .card-tags,
    .card-grid > a.card .card-tags {
        padding: 0 .75rem .4rem !important;
    }

    .card-grid > .card .card-added,
    .card-grid > a.card .card-added {
        padding: .45rem .75rem .65rem !important;
        font-size: .72rem !important;
    }
}

@media (max-width: 400px) {
    .card-grid {
        grid-template-columns: 1fr !important;
    }
}
/* =============================================================
   redesign.css — Chunk E (anonymous landing page hero)
   Append to the END of src/IWant2Eat.Web/wwwroot/css/redesign.css
   ============================================================= */

/* Scope: only the NotAuthorized block on /. Selectors are prefixed
   with .landing-v2 so nothing else on the site is affected. */

.landing-v2{
    --paper:#fdf3d0;
    --paper-2:#f6e5b0;
    --paper-edge:#c8a868;
    --ink:#3b2a14;
    --gold:#e6b657;
    --yt:#ff0033;
}

/* Caveat handwriting font for the headline accent and paper card.
   Loaded by App.razor via the existing fonts/caveat/caveat.css. */
.landing-v2 .lvHero{
    display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;
    align-items:center;
    max-width:1280px;margin:1rem auto 3rem;padding:1rem 0;
}
@media (max-width:980px){.landing-v2 .lvHero{grid-template-columns:1fr;gap:1.5rem}}

.landing-v2 .lvEyebrow{
    display:inline-flex;align-items:center;gap:.55rem;
    padding:.4rem .95rem;border-radius:999px;
    background:color-mix(in oklab,var(--primary,#c8442a) 9%,var(--surface,#fff));
    border:1px solid color-mix(in oklab,var(--primary,#c8442a) 22%,var(--border,#e8e0d2));
    color:var(--primary,#c8442a);
    font-size:.82rem;font-weight:600;letter-spacing:.04em;
    text-decoration:none;width:max-content;
    transition:transform .15s,background .15s;
}
.landing-v2 .lvEyebrow:hover{transform:translateY(-1px);background:color-mix(in oklab,var(--primary,#c8442a) 14%,var(--surface,#fff));text-decoration:none}
.landing-v2 .lvEyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--primary,#c8442a);box-shadow:0 0 8px var(--primary,#c8442a)}

.landing-v2 .lvHeadline{
    font-family:Lora,Georgia,serif;font-weight:600;
    font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.04;letter-spacing:-.025em;
    margin:1rem 0 1rem;text-wrap:balance;color:var(--text,#2a221a);
}
.landing-v2 .lvHeadline em{
    font-family:'Caveat',cursive;font-style:normal;font-weight:700;font-size:1.15em;line-height:1;
    background:linear-gradient(180deg,var(--primary,#c8442a) 0%,#a8341e 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.landing-v2 .lvSub{color:var(--text-2,#6b5e48);font-size:1.1rem;line-height:1.6;margin:0 0 1.25rem;max-width:50ch}

.landing-v2 .lvLegend{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.5rem}
.landing-v2 .lvChip{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.32rem .7rem;border-radius:999px;
    background:var(--surface,#fff);border:1px solid var(--border,#e8e0d2);
    font-size:.8rem;color:var(--text-2,#6b5e48);font-weight:500;
    transition:border-color .25s,background .25s,color .25s,transform .25s;
}
.landing-v2 .lvChip .lvChipIcon{width:14px;height:14px;flex-shrink:0}
.landing-v2 .lvChip-paper  {animation:lvChipLit 25s steps(1) infinite;animation-delay:-25s}
.landing-v2 .lvChip-email  {animation:lvChipLit 25s steps(1) infinite;animation-delay:-20s}
.landing-v2 .lvChip-web    {animation:lvChipLit 25s steps(1) infinite;animation-delay:-15s}
.landing-v2 .lvChip-youtube{animation:lvChipLit 25s steps(1) infinite;animation-delay:-10s}
.landing-v2 .lvChip-photo  {animation:lvChipLit 25s steps(1) infinite;animation-delay:-5s}
@keyframes lvChipLit{
    0%   {background:color-mix(in oklab,var(--primary,#c8442a) 8%,var(--surface,#fff));border-color:color-mix(in oklab,var(--primary,#c8442a) 35%,var(--border,#e8e0d2));color:var(--primary,#c8442a);transform:translateY(-1px)}
    20%  {background:color-mix(in oklab,var(--primary,#c8442a) 8%,var(--surface,#fff));border-color:color-mix(in oklab,var(--primary,#c8442a) 35%,var(--border,#e8e0d2));color:var(--primary,#c8442a);transform:translateY(-1px)}
    20.01%,100%{background:var(--surface,#fff);border-color:var(--border,#e8e0d2);color:var(--text-2,#6b5e48);transform:translateY(0)}
}

.landing-v2 .lvCta{display:flex;gap:.85rem;flex-wrap:wrap;align-items:center}
.landing-v2 .lvBtn{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.95rem 1.65rem;border-radius:999px;
    background:linear-gradient(180deg,var(--primary,#c8442a) 0%,#a8341e 100%);
    color:#fff;border:0;font-weight:600;font-size:1.05rem;text-decoration:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 18px color-mix(in oklab,var(--primary,#c8442a) 40%,transparent),0 2px 4px rgba(0,0,0,.1);
    transition:transform .15s,box-shadow .15s,filter .15s;
}
.landing-v2 .lvBtn:hover{transform:translateY(-2px);filter:brightness(1.04);text-decoration:none;color:#fff}
.landing-v2 .lvBtn svg{width:18px;height:18px;transition:transform .15s}
.landing-v2 .lvBtn:hover svg{transform:translateX(4px)}
.landing-v2 .lvTrust{color:var(--text-2,#6b5e48);font-size:.92rem;text-decoration:none}
.landing-v2 .lvTrust:hover{text-decoration:none;color:var(--text,#2a221a)}
.landing-v2 .lvTrust strong{color:var(--text,#2a221a)}

/* ── 3D stage ───────────────────────────────────────────── */
.landing-v2 .lvStage{
    position:relative;aspect-ratio:1/1;perspective:1500px;
    perspective-origin:50% 45%;transform-style:preserve-3d;
}
.landing-v2 .lvStage::before{
    content:"";position:absolute;inset:-10%;pointer-events:none;
    background:radial-gradient(circle at 28% 22%,color-mix(in oklab,var(--accent,#d99a40) 28%,transparent) 0%,transparent 55%),
               radial-gradient(circle at 76% 80%,color-mix(in oklab,var(--primary,#c8442a) 22%,transparent) 0%,transparent 55%);
    filter:blur(20px);z-index:0;
}
.landing-v2 .lvStage::after{
    content:"";position:absolute;left:8%;right:8%;bottom:6%;height:30px;
    background:radial-gradient(ellipse at center,rgba(80,55,25,.22) 0%,transparent 70%);
    filter:blur(4px);z-index:0;pointer-events:none;
}
.landing-v2 .lvSceneTilt{position:absolute;inset:0;transform-style:preserve-3d;animation:lvSceneBreath 12s ease-in-out infinite}
@keyframes lvSceneBreath{0%,100%{transform:rotateX(8deg) rotateY(-6deg)}50%{transform:rotateX(10deg) rotateY(-8deg) rotateZ(.5deg)}}

/* Source area (LEFT) */
.landing-v2 .lvSrcArea{position:absolute;left:0;top:0;width:55%;height:100%;transform-style:preserve-3d}
.landing-v2 .lvSrc{
    position:absolute;left:8%;top:50%;width:78%;
    transform:translateY(-50%) translateZ(20px) rotate(-6deg);
    opacity:0;
    filter:drop-shadow(0 16px 28px rgba(80,55,25,.28)) drop-shadow(0 3px 8px rgba(80,55,25,.18));
}
.landing-v2 .lvSrc-paper  {animation:lvSrcCycle 25s ease-in-out infinite;animation-delay:0s}
.landing-v2 .lvSrc-email  {animation:lvSrcCycle 25s ease-in-out infinite;animation-delay:-20s}
.landing-v2 .lvSrc-web    {animation:lvSrcCycle 25s ease-in-out infinite;animation-delay:-15s}
.landing-v2 .lvSrc-youtube{animation:lvSrcCycle 25s ease-in-out infinite;animation-delay:-10s}
.landing-v2 .lvSrc-photo  {animation:lvSrcCycle 25s ease-in-out infinite;animation-delay:-5s}
@keyframes lvSrcCycle{
    0%   {opacity:0;transform:translateY(-50%) translateZ(0) rotate(-12deg) scale(.9)}
    3%   {opacity:1;transform:translateY(-50%) translateZ(20px) rotate(-6deg) scale(1)}
    16%  {opacity:1;transform:translateY(-50%) translateZ(28px) rotate(-7deg) scale(1.02)}
    19%  {opacity:0;transform:translateY(-55%) translateZ(0) rotate(-4deg) scale(.92)}
    100% {opacity:0}
}

/* Paper recipe */
.landing-v2 .lvPaper{aspect-ratio:4/5;background:linear-gradient(135deg,var(--paper) 0%,var(--paper-2) 60%,#e2c98a 100%);border:1px solid var(--paper-edge);border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,250,220,.6),inset 0 -3px 6px rgba(140,100,40,.18);overflow:hidden;position:relative}
.landing-v2 .lvPaper::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 26% 10% at 22% 22%,rgba(140,90,30,.18),transparent),radial-gradient(ellipse 22% 9% at 80% 78%,rgba(120,80,30,.22),transparent),radial-gradient(circle 5% at 70% 30%,rgba(120,80,30,.20),transparent)}
.landing-v2 .lvPaper::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;background-image:repeating-linear-gradient(91deg,rgba(120,90,40,.04) 0 1px,transparent 1px 6px),repeating-linear-gradient(178deg,rgba(120,90,40,.03) 0 1px,transparent 1px 8px)}
.landing-v2 .lvPaperContent{position:relative;z-index:2;padding:8% 9% 10%;height:100%;display:flex;flex-direction:column}
.landing-v2 .lvPaperTitle{font-family:'Caveat',cursive;font-weight:700;font-size:1.6rem;color:var(--ink);line-height:1;margin:0;transform:rotate(-1deg)}
.landing-v2 .lvPaperSub{font-family:'Caveat',cursive;font-size:1.1rem;color:rgba(70,50,18,.7);margin:0;font-style:italic}
.landing-v2 .lvPaperRule{height:1px;background:linear-gradient(90deg,transparent,rgba(90,66,32,.5) 8%,rgba(90,66,32,.5) 92%,transparent);margin:.5rem 0 .8rem}
.landing-v2 .lvPaperLine{font-family:'Caveat',cursive;font-size:1.1rem;color:var(--ink);line-height:1.4;margin:.1rem 0;transform:rotate(-.4deg)}
.landing-v2 .lvPaperLine:nth-child(even){transform:rotate(.3deg)}
.landing-v2 .lvPaperFlash{position:absolute;inset:0;pointer-events:none;border-radius:6px;overflow:hidden}
.landing-v2 .lvPaperFlash::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-30%;width:30%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.35) 30%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.35) 70%,transparent 100%);transform:skewX(-15deg);animation:lvShutter 25s linear infinite}
@keyframes lvShutter{0%{transform:translateX(0) skewX(-15deg);opacity:0}4%{opacity:0}6%{opacity:1}14%{transform:translateX(420%) skewX(-15deg);opacity:1}15%,100%{opacity:0;transform:translateX(420%) skewX(-15deg)}}
.landing-v2 .lvPaperCam{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;background:var(--primary,#c8442a);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px color-mix(in oklab,var(--primary,#c8442a) 50%,transparent);transform:rotate(8deg)}
.landing-v2 .lvPaperCam svg{width:18px;height:18px}

/* Email */
.landing-v2 .lvEmail{aspect-ratio:5/4;background:var(--surface,#fff);border:1px solid var(--border,#e8e0d2);border-radius:10px;overflow:hidden}
.landing-v2 .lvEmailBar{display:flex;align-items:center;gap:6px;padding:.45rem .65rem;background:linear-gradient(180deg,#fbf1de,#f3e1bd);border-bottom:1px solid var(--border,#e8e0d2)}
.landing-v2 .lvEmailBar .lvEd{width:9px;height:9px;border-radius:50%;background:#d9c9a0}
.landing-v2 .lvEmailBar .lvEt{margin-left:.5rem;color:var(--muted,#9b8e74);font-size:.75rem}
.landing-v2 .lvEmailRow{display:flex;gap:.5rem;padding:.4rem .75rem;border-bottom:1px solid #f0e5ca;font-size:.8rem;color:var(--text,#2a221a)}
.landing-v2 .lvEmailLabel{color:var(--muted,#9b8e74);width:34px;flex-shrink:0;font-weight:500}
.landing-v2 .lvEmailTyped{white-space:nowrap;overflow:hidden;border-right:1.5px solid var(--primary,#c8442a);font-family:'JetBrains Mono',ui-monospace,monospace}
.landing-v2 .lvEmailTyped-to{animation:lvTypeTo 25s steps(20,end) infinite;max-width:0}
.landing-v2 .lvEmailTyped-sub{animation:lvTypeSub 25s steps(16,end) infinite;max-width:0}
@keyframes lvTypeTo{0%,20%{max-width:0}23%{max-width:0}27%{max-width:160px}36%{max-width:160px}37%,100%{max-width:0}}
@keyframes lvTypeSub{0%,28%{max-width:0}32%{max-width:130px}36%{max-width:130px}37%,100%{max-width:0}}
.landing-v2 .lvEmailBody{height:36%;margin:.55rem .75rem;background:repeating-linear-gradient(180deg,transparent 0 5px,#f0e5ca 5px 6px);border-radius:4px}
.landing-v2 .lvEmailSend{margin:.4rem .75rem .55rem auto;display:block;padding:.3rem .9rem;background:var(--primary,#c8442a);color:#fff;border-radius:999px;font-size:.78rem;font-weight:600;border:0;animation:lvSendPulse 25s ease-in-out infinite}
@keyframes lvSendPulse{0%,30%{box-shadow:0 0 0 0 rgba(200,68,42,0)}34%{box-shadow:0 0 0 10px rgba(200,68,42,.45)}36%,100%{box-shadow:0 0 0 0 rgba(200,68,42,0)}}
.landing-v2 .lvEnvelope{position:absolute;right:14%;top:42%;font-size:1.7rem;opacity:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));animation:lvEnvFly 25s ease-out infinite}
@keyframes lvEnvFly{0%,34%{opacity:0;transform:translate(0,0) scale(.5)}36%{opacity:1;transform:translate(0,0) scale(1) rotate(-8deg)}38%{opacity:.7;transform:translate(50px,-12px) scale(.9) rotate(-12deg)}40%{opacity:0;transform:translate(110px,-22px) scale(.7)}100%{opacity:0}}

/* Web */
.landing-v2 .lvWeb{aspect-ratio:5/4;background:var(--surface,#fff);border:1px solid var(--border,#e8e0d2);border-radius:10px;overflow:hidden}
.landing-v2 .lvWebBar{display:flex;align-items:center;gap:6px;padding:.45rem .65rem;background:linear-gradient(180deg,#fbf1de,#f3e1bd);border-bottom:1px solid var(--border,#e8e0d2)}
.landing-v2 .lvWebBar .lvWd{width:9px;height:9px;border-radius:50%;background:#d9c9a0}
.landing-v2 .lvWebUrl{margin-left:.5rem;color:var(--muted,#9b8e74);font-size:.7rem;font-family:'JetBrains Mono',ui-monospace,monospace}
.landing-v2 .lvWebH{height:8px;margin:.7rem .75rem .35rem;background:#5a4220;border-radius:2px;width:55%}
.landing-v2 .lvWebLine{height:6px;margin:.3rem .75rem;background:#ece4cf;border-radius:2px}
.landing-v2 .lvWebLine.lvS{width:80%}
.landing-v2 .lvWebLine.lvX{width:65%}
.landing-v2 .lvWebLine.lvSel{animation:lvWebSel 25s ease-in-out infinite}
@keyframes lvWebSel{0%,42%{background:#ece4cf}46%{background:#bbd8ff}58%{background:#bbd8ff}62%,100%{background:#ece4cf}}
.landing-v2 .lvWebCursor{position:absolute;left:46%;top:62%;font-size:1.4rem;color:var(--text,#2a221a);transform:rotate(-12deg);opacity:0;animation:lvCursorDrag 25s ease-in-out infinite}
@keyframes lvCursorDrag{0%,42%{opacity:0;transform:translate(0,0) rotate(-12deg)}46%{opacity:1}58%{opacity:1;transform:translate(60px,-30px) rotate(-12deg)}62%,100%{opacity:0;transform:translate(70px,-40px) rotate(-12deg)}}

/* YouTube */
.landing-v2 .lvYt{aspect-ratio:16/10;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 12px 28px rgba(0,0,0,.45);background:#0a0405}
.landing-v2 .lvYt::before{content:"";position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1583224964978-2257b960c3d3?w=400&q=80');background-size:cover;background-position:center;filter:brightness(.7) saturate(1.1)}
.landing-v2 .lvYtPlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3}
.landing-v2 .lvYtBtn{width:54px;height:38px;background:var(--yt);border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.5);animation:lvYtPulse 25s ease-in-out infinite}
@keyframes lvYtPulse{0%,60%{box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 0 0 rgba(255,0,51,0)}65%{box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 0 14px rgba(255,0,51,.4)}70%,100%{box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 0 0 rgba(255,0,51,0)}}
.landing-v2 .lvYtBtn::before{content:"";width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.landing-v2 .lvYtMeta{position:absolute;left:.7rem;bottom:.6rem;right:.7rem;z-index:4;color:#fff}
.landing-v2 .lvYtTitle{font-family:Lora,Georgia,serif;font-weight:600;font-size:.85rem;margin:0 0 .15rem;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.landing-v2 .lvYtChannel{font-size:.7rem;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.6);margin:0}
.landing-v2 .lvYtDuration{position:absolute;right:.45rem;top:.45rem;z-index:4;background:rgba(0,0,0,.78);color:#fff;font-size:.65rem;padding:.1rem .4rem;border-radius:3px;font-weight:500}

/* Phone */
.landing-v2 .lvPhone{aspect-ratio:9/13;width:62%;margin:0 auto;background:#1a1208;border-radius:22px;padding:7px;box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 16px 36px rgba(0,0,0,.4);border:1.5px solid #0a0703}
.landing-v2 .lvPhoneScreen{background:#fff;width:100%;height:100%;border-radius:15px;overflow:hidden;position:relative}
.landing-v2 .lvPhoneNotch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:38%;height:14px;background:#1a1208;border-radius:0 0 10px 10px;z-index:3}
.landing-v2 .lvPhoneGallery{padding:18px 4px 4px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.landing-v2 .lvPhoneThumb{aspect-ratio:1;border-radius:3px;background-size:cover;background-position:center}
.landing-v2 .lvPhoneThumb.lvF1{background-image:url('https://images.unsplash.com/photo-1565299585323-38d6b0865b47?w=120&q=80')}
.landing-v2 .lvPhoneThumb.lvF2{background-image:url('https://images.unsplash.com/photo-1547592180-85f173990554?w=120&q=80')}
.landing-v2 .lvPhoneThumb.lvF3{background-image:url('https://images.unsplash.com/photo-1467003909585-2f8a72700288?w=180&q=80');outline:3px solid var(--primary,#c8442a);outline-offset:-2px;z-index:2;position:relative;animation:lvThumbTap 25s ease-in-out infinite}
.landing-v2 .lvPhoneThumb.lvF4{background-image:url('https://images.unsplash.com/photo-1499636136210-6f4ee915583e?w=120&q=80')}
.landing-v2 .lvPhoneThumb.lvF5{background-image:url('https://images.unsplash.com/photo-1476124369491-e7addf5db371?w=120&q=80')}
.landing-v2 .lvPhoneThumb.lvF6{background-image:url('https://images.unsplash.com/photo-1551183053-bf91a1d81141?w=120&q=80')}
.landing-v2 .lvPhoneThumb.lvF7{background-image:url('https://images.unsplash.com/photo-1455619452474-d2be8b1e70cd?w=120&q=80')}
.landing-v2 .lvPhoneThumb.lvF8{background-image:url('https://images.unsplash.com/photo-1509440159596-0249088772ff?w=120&q=80')}
.landing-v2 .lvPhoneThumb.lvF9{background-image:url('https://images.unsplash.com/photo-1583527976767-50f74cb5dd56?w=120&q=80')}
@keyframes lvThumbTap{0%,86%{transform:scale(1)}88%{transform:scale(.92)}91%{transform:scale(1.04)}93%,100%{transform:scale(1)}}

/* Particles + arrow */
.landing-v2 .lvParticles{position:absolute;left:50%;top:36%;width:14%;height:28%;pointer-events:none;z-index:5;transform-style:preserve-3d}
.landing-v2 .lvSparkle{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,var(--gold) 0%,rgba(230,182,87,.6) 40%,transparent 70%);opacity:0}
.landing-v2 .lvSparkle.lvS1{left:0;top:50%;--sx:130%;--sy:0%;animation:lvSparkleFly 5s ease-out infinite}
.landing-v2 .lvSparkle.lvS2{left:10%;top:30%;--sx:140%;--sy:-40%;animation:lvSparkleFly 5s ease-out infinite;animation-delay:.1s}
.landing-v2 .lvSparkle.lvS3{left:5%;top:70%;--sx:160%;--sy:30%;animation:lvSparkleFly 5s ease-out infinite;animation-delay:.2s}
.landing-v2 .lvSparkle.lvS4{left:20%;top:50%;--sx:110%;--sy:0%;width:8px;height:8px;animation:lvSparkleFly 5s ease-out infinite}
.landing-v2 .lvSparkle.lvS5{left:14%;top:20%;--sx:150%;--sy:-60%;width:4px;height:4px;animation:lvSparkleFly 5s ease-out infinite;animation-delay:.3s}
@keyframes lvSparkleFly{0%,55%{opacity:0;transform:translate(0,0) scale(0)}62%{opacity:1;transform:translate(0,0) scale(1.2)}75%{opacity:.6;transform:translate(calc(var(--sx)*.6),calc(var(--sy)*.6)) scale(.9)}90%,100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.3)}}
.landing-v2 .lvArrow{position:absolute;left:48%;top:46%;width:12%;z-index:6;color:var(--primary,#c8442a);opacity:0;transform:translateZ(50px);filter:drop-shadow(0 4px 12px color-mix(in oklab,var(--primary,#c8442a) 60%,transparent));animation:lvArrowPulse 5s ease-out infinite}
.landing-v2 .lvArrow svg{width:100%;height:auto}
@keyframes lvArrowPulse{0%,50%{opacity:0;transform:translateZ(40px) scale(.7)}65%{opacity:1;transform:translateZ(60px) scale(1.05)}85%{opacity:1;transform:translateZ(60px) scale(1)}92%,100%{opacity:0;transform:translateZ(40px) scale(.9)}}

/* RIGHT: 5 destination cards */
.landing-v2 .lvDestArea{position:absolute;right:2%;top:18%;width:48%;transform-style:preserve-3d}
.landing-v2 .lvDest{position:absolute;inset:0;transform-style:preserve-3d;opacity:0;transform:translateZ(0) rotateY(-25deg) translateX(40px) scale(.85)}
.landing-v2 .lvDest-1{animation:lvDestCycle 25s ease-out infinite;animation-delay:0s}
.landing-v2 .lvDest-2{animation:lvDestCycle 25s ease-out infinite;animation-delay:-20s}
.landing-v2 .lvDest-3{animation:lvDestCycle 25s ease-out infinite;animation-delay:-15s}
.landing-v2 .lvDest-4{animation:lvDestCycle 25s ease-out infinite;animation-delay:-10s}
.landing-v2 .lvDest-5{animation:lvDestCycle 25s ease-out infinite;animation-delay:-5s}
@keyframes lvDestCycle{
    0%   {opacity:0;transform:translateZ(0) rotateY(-25deg) translateX(40px) scale(.85)}
    8%   {opacity:0;transform:translateZ(0) rotateY(-25deg) translateX(40px) scale(.85)}
    14%  {opacity:1;transform:translateZ(60px) rotateY(-12deg) translateX(0) scale(1)}
    17%  {opacity:1;transform:translateZ(80px) rotateY(-10deg) translateX(0) scale(1.04)}
    19%  {opacity:1;transform:translateZ(60px) rotateY(-12deg) translateX(0) scale(1)}
    20%  {opacity:0;transform:translateZ(20px) rotateY(-18deg) translateX(-30px) scale(.92)}
    100% {opacity:0}
}
.landing-v2 .lvParsedCard{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 2px 4px rgba(60,40,15,.06),0 18px 50px rgba(60,40,15,.22),0 30px 80px rgba(60,40,15,.12);transform-style:preserve-3d;position:relative;z-index:2}
.landing-v2 .lvParsedStack{position:absolute;inset:0;z-index:0;pointer-events:none}
.landing-v2 .lvParsedStack::before,.landing-v2 .lvParsedStack::after{content:"";position:absolute;inset:0;border-radius:18px;background:#fff;box-shadow:0 8px 20px rgba(60,40,15,.10);opacity:.85}
.landing-v2 .lvParsedStack::before{transform:translateZ(-20px) translate(4px,4px)}
.landing-v2 .lvParsedStack::after{transform:translateZ(-40px) translate(-6px,-6px);opacity:.55}
.landing-v2 .lvParsedThumb{aspect-ratio:16/10;position:relative;overflow:hidden;background-size:cover;background-position:center}
.landing-v2 .lvParsedThumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.15));pointer-events:none}
.landing-v2 .lvParsedBody{padding:.95rem 1.1rem 1rem}
.landing-v2 .lvParsedRow{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;flex-wrap:wrap}
.landing-v2 .lvParsedBadge{display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#2e6a28;padding:.18rem .5rem;border-radius:999px;background:color-mix(in oklab,#2e6a28 12%,#fff);border:1px solid color-mix(in oklab,#2e6a28 30%,#e0e0e0)}
.landing-v2 .lvParsedBadge .lvCheck{width:10px;height:10px;border-radius:50%;background:#2e6a28;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:700}
.landing-v2 .lvSourceFrom{font-size:.66rem;color:var(--muted,#9b8e74);font-weight:500}
.landing-v2 .lvParsedH{font-family:Lora,Georgia,serif;font-weight:600;font-size:1.15rem;line-height:1.2;margin:.15rem 0 .25rem;color:var(--text,#2a221a)}
.landing-v2 .lvParsedSub{font-family:Lora,Georgia,serif;font-style:italic;color:var(--text-2,#6b5e48);font-size:.85rem;margin:0 0 .55rem}
.landing-v2 .lvParsedMeta{display:flex;gap:.7rem;font-size:.78rem;color:var(--muted,#9b8e74);margin-bottom:.5rem;flex-wrap:wrap}
.landing-v2 .lvParsedTags{display:flex;gap:.3rem;flex-wrap:wrap}
.landing-v2 .lvParsedTag{font-size:.7rem;padding:.15rem .55rem;border-radius:999px;background:#fbf1de;color:#7a3a0a;border:1px solid #f5d8b4}

@media (max-width:780px){
    .landing-v2 .lvStage{aspect-ratio:5/4}
    .landing-v2 .lvDestArea{width:54%}
    .landing-v2 .lvHeadline{font-size:2.4rem}
    .landing-v2 .lvPaperTitle{font-size:1.2rem}
    .landing-v2 .lvPaperLine{font-size:.85rem}
}
/* Reduced-motion fallback intentionally disabled — the landing hero
   is the product pitch; visitors with OS-level reduce-motion still see
   the animation. Re-enable by restoring the @media (prefers-reduced-
   motion: reduce) block from git history (chunk E) if accessibility
   concerns outweigh the conversion-rate win. */



/* ─── Footer copyright stacks to its own centered line on mobile ─
   Above ~640px the footer is a single horizontal row; on phones,
   the links + lang picker fill the width, and the copyright row
   dangles awkwardly. Push it to its own line, drop the leading "·"
   separators so nothing dangles at the end of the line above. */
@media (max-width: 640px) {
  .site-footer .site-footer-sep { display: none; }
  .site-footer .site-footer-copy {
    display: block;
    margin: 0.5rem auto 0;
    text-align: center;
    width: 100%;
  }
}