@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&family=Playfair+Display:wght@600;700&family=Rubik:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ── CSS Variables (overridden per-theme by theme-manager.js) ── */
:root {
  --color-primary: #2c3e50;
  --color-secondary: #d97706;
  --color-accent: #d97706;
  --color-background: #faf9f7;
  --color-surface: #ffffff;
  --color-text-primary: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-light: #9ca3af;
  --color-chip-family: #d1fae5;
  --color-chip-popular: #dbeafe;
  --color-chip-quick: #fed7aa;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  --color-border: #e5e7eb;
  --color-divider: #f3f4f6;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.25rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  transition: background-color var(--transition-base), color var(--transition-base);
  /* B47: decorative fixed-position elements (theme background "orbs") are
     deliberately positioned partly off-canvas (e.g. right:-120px) to bleed
     off the edge of the viewport. Fixed-position elements aren't clipped by
     a parent's overflow, so on narrow (mobile) viewports they were adding to
     the page's horizontal scroll extent, letting the whole page scroll
     sideways. Clamping horizontal overflow at the document root contains
     them without needing to touch every theme's individual orb/decoration
     styles. max-width:100vw as a backstop for any content genuinely wider
     than the viewport that vw-based scroll clamping alone wouldn't catch. */
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-text-primary);
  line-height: 1.6;
}

/* ── Typography ── */
h1 {
  font-family: var(--font-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
  letter-spacing: 0.3px;
}

h2 {
  font-family: var(--font-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

p {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: #b45309;
}

/* ── Layout ── */
.container {
  max-width: 1200px;
  margin: var(--spacing-2xl) auto;
  padding: 0 var(--spacing-lg);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--color-border, #ddd);
  color: var(--color-text-secondary, #666);
  padding: 6px 14px;
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 0.85rem);
  font-family: inherit;
  cursor: pointer;
  margin-bottom: var(--spacing-md, 16px);
  transition: background-color 0.15s, color 0.15s;
}

.back-btn:hover {
  background: var(--color-hover-bg, rgba(0,0,0,0.05));
  color: var(--color-text-primary, #1a1a1a);
}

/* ── Navbar ── */
.navbar {
  background-color: var(--color-primary);
  color: white;
  padding: var(--spacing-lg) 0;
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 100;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-lg);
}

.nav-logo {
  font-family: var(--font-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: white;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
}

.nav-item {
  display: flex;
  align-items: center;
}

.nav-link {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-base), color var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
}

.nav-link:hover {
  background-color: rgba(255,255,255,0.12);
  color: white;
}

/* ── Category Dropdown ── */
.nav-category-selector {
  display: flex;
  align-items: center;
}

.category-dropdown-wrapper {
  position: relative;
}

.category-dropdown-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-md);
  background-color: rgba(255,255,255,0.15);
  color: white;
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-base);
}

.category-dropdown-btn:hover {
  background-color: rgba(255,255,255,0.25);
}

.dropdown-arrow {
  margin-left: 4px;
  font-size: 0.7rem;
  opacity: 0.8;
}

.category-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 190px;
  z-index: 1000;
  padding: var(--spacing-sm) 0;
  border: 1px solid var(--color-border);
  animation: slideDown var(--transition-base) ease-out;
}

.category-dropdown-menu.open {
  display: block;
}

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

.category-dropdown-menu label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.category-dropdown-menu label:hover {
  background-color: var(--color-divider);
}

.category-dropdown-menu input[type="checkbox"] {
  accent-color: var(--color-secondary);
  cursor: pointer;
  width: 15px;
  height: 15px;
}

.dropdown-divider {
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-xs) 0;
}

.dropdown-day-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
}

.dropdown-day-count label {
  padding: 0;
  cursor: default;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.dropdown-day-count select {
  padding: 4px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

/* ── Hero ── */
.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #3d5a7f 100%);
  color: white;
  padding: var(--spacing-2xl) var(--spacing-xl);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.hero h1 {
  font-family: var(--font-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: white;
  margin-bottom: var(--spacing-sm);
  letter-spacing: 0.5px;
}

.week-range {
  font-size: var(--font-size-base);
  opacity: 0.92;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--spacing-sm);
}

.categories-info {
  font-size: var(--font-size-sm);
  opacity: 0.8;
  color: rgba(255,255,255,0.85);
  margin-top: var(--spacing-xs);
}

/* ── Recipe Packs Import modal (B66: made global so any page can open it
   via openRecipePacksModal(), not just Settings) ── */
.pm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.pm-overlay.active { display: flex; }
.pm-modal-box {
    background: var(--color-bg-primary, white);
    border-radius: 12px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.pm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    padding-bottom: 15px;
}
.pm-modal-header h2 { margin: 0; }
.pm-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-secondary, #666);
    line-height: 1;
}
.pm-modal-footer {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.pm-status {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 6px;
    display: none;
}
.pm-status.success {
    display: block;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.pm-status.error {
    display: block;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.pack-list { display: flex; flex-direction: column; gap: 14px; }
.pack-card {
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}
.pack-card:hover {
    border-color: var(--color-primary, #d97706);
    background: var(--color-bg-secondary, #f9fafb);
    transform: translateY(-1px);
}
.pack-card.selected {
    border-color: var(--color-primary, #d97706);
    background: rgba(217,119,6,0.07);
}
.pack-card-imported {
    cursor: default;
    opacity: 0.6;
}
.pack-card-imported:hover {
    border-color: var(--color-border, #e5e7eb);
    background: none;
    transform: none;
}
.pack-imported-badge {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--color-success, #16a34a);
    margin-left: 8px;
    white-space: nowrap;
}
.pack-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.pack-card-title {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--color-primary, #d97706);
}
.pack-count {
    background: var(--color-primary, #d97706);
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.82em;
    font-weight: 600;
    white-space: nowrap;
}
.pack-desc {
    color: var(--color-text-secondary, #666);
    font-size: 0.9em;
    margin-bottom: 8px;
    line-height: 1.4;
}
.pack-meta {
    display: flex;
    gap: 14px;
    font-size: 0.82em;
    color: var(--color-text-secondary, #666);
}
.pack-select-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 0.9em;
}
.pack-select-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ── Shortfall banner (B53: partial menu generation notice) ── */
.shortfall-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  background: var(--color-warning-bg, #fff3cd);
  color: var(--color-warning-text, #664d03);
  border: 1px solid var(--color-warning-border, #ffe69c);
  border-radius: var(--radius-md, 8px);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-sm);
}

.shortfall-banner button {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  padding: 0 var(--spacing-xs);
}

.shortfall-banner button:hover {
  opacity: 1;
}

/* ── Menu Grid ── */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

/* ── Menu Card ── */
.menu-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, #3d5a7f 100%);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.card-header-day-actions {
  display: flex;
  gap: var(--spacing-xs);
}

.day-action-icon {
  background: rgba(255, 255, 255, 0.16);
  border: none;
  border-radius: var(--radius-md);
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.day-action-icon:hover {
  background: rgba(255, 255, 255, 0.3);
}

.day-action-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.card-header-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.day-name {
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: 0;
  letter-spacing: 0.3px;
  color: white;
}

.meal-time {
  background: rgba(255,255,255,0.22);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.card-body {
  padding: var(--spacing-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

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

.recipe-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
}

.difficulty {
  font-size: 0.72rem;
  color: var(--color-warning);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Small color cue so difficulty can be scanned at a glance without reading
   the text - added per the 2026-07-06 design critique. Falls back to the
   warning color (amber) for any unrecognized value. */
.difficulty-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-warning);
}
.difficulty-dot[data-difficulty="easy"] { background: #22c55e; }
.difficulty-dot[data-difficulty="medium"] { background: #f59e0b; }
.difficulty-dot[data-difficulty="hard"] { background: #ef4444; }

.protein-badge {
  align-self: flex-start;
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: var(--font-weight-semibold);
}

.protein-chicken    { background-color: #fef3c7; color: #92400e; }
.protein-beef       { background-color: #fee2e2; color: #991b1b; }
.protein-fish       { background-color: #cffafe; color: #155e75; }
.protein-pork       { background-color: #fce7f3; color: #9d174d; }
.protein-vegetarian { background-color: var(--color-chip-family); color: #065f46; }
.protein-lamb       { background-color: #e5e7eb; color: #374151; }
.protein-other      { background-color: #f3f4f6; color: #4b5563; }

.card-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-divider);
}

.card-footer .btn {
  width: 100%;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
  text-align: center;
}

.btn-primary {
  background-color: var(--color-secondary);
  color: white;
}

.btn-primary:hover {
  background-color: #b45309;
  color: white;
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

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

.btn-primary:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.btn-secondary {
  background-color: var(--color-border);
  color: var(--color-text-primary);
}

.btn-secondary:hover {
  background-color: #d1d5db;
  color: var(--color-text-primary);
  transform: scale(1.02);
}

.btn-large {
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: var(--font-size-lg);
}

.btn-block {
  width: 100%;
}

/* ── Actions section ── */
/* This is the "View Shopping List" button under the dashboard's dinner
   cards - the same link already lives in the navbar, which is always
   visible on desktop/tablet, so this was pure duplication there. On mobile,
   where the navbar scrolls out of view after scrolling down through a
   week's worth of dinner cards, it's a genuinely useful shortcut back to
   the shopping list without scrolling all the way back up - so it only
   shows below the same 640px mobile breakpoint used elsewhere in this file. */
.actions {
  display: none;
  text-align: center;
  margin: var(--spacing-2xl) 0;
}

/* ── Recipe detail ── */
.recipe-header {
  background: var(--color-surface);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.recipe-header h1 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}

.subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-lg);
}

.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  font-size: var(--font-size-sm);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-secondary);
}

.rating {
  background: var(--color-surface);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.stars {
  font-size: 1.4rem;
  color: var(--color-warning);
}

.rating-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.allergens {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.allergens h3 {
  margin-bottom: var(--spacing-sm);
  color: #92400e;
}

.allergen-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.allergen-badge {
  background-color: #fde68a;
  color: #92400e;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.allergen-small {
  background-color: #fde68a;
  color: #92400e;
  padding: 2px var(--spacing-sm);
  border-radius: 4px;
  font-size: var(--font-size-xs);
  display: inline-block;
}

/* ── Recipe layout ── */
.recipe-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.ingredients-section,
.instructions-section {
  background: var(--color-surface);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.ingredients-section h2,
.instructions-section h2 {
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
}

.ingredients-group {
  margin-bottom: var(--spacing-xl);
}

.ingredients-group h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-sm);
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
}

.ingredient-list {
  list-style: none;
}

.ingredient-list li {
  padding: var(--spacing-sm) 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--font-size-sm);
}

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

.ingredient-qty {
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
}

.portions-label {
  font-size: var(--font-size-xs);
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pantry-header {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-semibold);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
}

.pantry-list li {
  opacity: 0.6;
}

/* ── Instructions ── */
.description {
  background-color: var(--color-divider);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xl);
  border-left: 4px solid var(--color-secondary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.step {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.step-header {
  background-color: var(--color-divider);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.step-header h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.step-body {
  padding: var(--spacing-lg);
}

.step-image {
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  max-height: 400px;
  object-fit: cover;
}

.step-description {
  line-height: 1.8;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* ── Shopping list ── */
.shopping-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.shopping-header h1 {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.shopping-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.shopping-actions .btn {
  white-space: nowrap;
  width: auto;
}

.shopping-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.category-section {
  background: var(--color-surface);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.category-title {
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
  font-family: var(--font-primary);
  border-bottom: 2px solid var(--color-secondary);
  padding-bottom: var(--spacing-sm);
}

.category-items {
  list-style: none;
}

.shopping-item {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-divider);
}

.shopping-item:last-child {
  border-bottom: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.checkbox-label:hover {
  background-color: var(--color-divider);
}

.shopping-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-secondary);
  flex-shrink: 0;
}

.item-name {
  flex: 1;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.item-qty {
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  min-width: 70px;
  text-align: right;
  white-space: nowrap;
}

.item-allergens {
  margin-top: var(--spacing-xs);
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.shopping-item input:checked ~ .item-name {
  text-decoration: line-through;
  color: var(--color-text-light);
}

.shopping-footer {
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #065f46;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  text-align: center;
}

.note {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* ── Integrations modal (shopping page) ── */
.pm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pm-overlay.active {
  display: flex;
}

.pm-modal-box {
  position: relative;
  background: var(--color-bg-primary, #fff);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  width: 100%;
  /* This rule set (added for the Integrations modal) previously replaced the
     original .pm-modal-box's max-height/overflow-y:auto with a plain
     `overflow: hidden` and no height cap at all - since this block comes
     later in the stylesheet, it silently won for every modal sharing this
     class (same cascade-collision shape as B65's grid-template-columns
     bug), not just the short Integrations modal it was written for. On a
     long list (e.g. the recipe-packs import modal's pack list, or Import
     Arsenal's), the box just grew past the viewport with no way to scroll
     down to the Import/OK button in the footer - it was there, just
     permanently off-screen. max-height + flex column + the pack
     list/body scrolling internally (not the whole box) keeps the header and
     footer always visible/reachable regardless of content length. */
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.pm-modal-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary, #1a1a1a);
}

.pm-close-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--color-text-secondary, #888);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.pm-close-btn:hover {
  background: var(--color-hover-bg, rgba(0,0,0,0.06));
}

.pm-modal-body,
.pm-modal-box > div:not(.pm-modal-header) {
  padding: 16px 24px 20px;
}

/* .pm-modal-box is now a flex column (see above) so its header and footer
   can stay fixed in place while only the middle content area - the pack
   list / recipe list / whatever the modal's actual scrollable payload is -
   scrolls internally. Without this, a long list pushes the footer's
   Import/OK button below the fold with the whole box unable to scroll (the
   bug this fix addresses). Header and footer opt out of growing/shrinking
   and out of the generic padding rule above so their existing spacing is
   unaffected; everything else in between absorbs the modal's height budget
   and scrolls on its own. */
.pm-modal-box > .pm-modal-header {
  flex: 0 0 auto;
}
.pm-modal-box > div:not(.pm-modal-header):not(.pm-modal-footer):not(.pm-status) {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.pm-modal-box > .pm-modal-footer {
  flex: 0 0 auto;
  padding-top: 0;
}
.pm-modal-box > .pm-status {
  flex: 0 0 auto;
}

.pm-status {
  min-height: 24px;
  font-size: 0.88rem;
  text-align: center;
  padding: 4px 0 0;
}

.pm-status.success { color: #059669; }
.pm-status.error   { color: #dc2626; }
.pm-status.loading { color: var(--color-text-secondary, #888); }

/* ── Error page ── */
.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.error-box {
  background: var(--color-surface);
  padding: var(--spacing-3xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  border-left: 4px solid var(--color-error);
  max-width: 480px;
  width: 100%;
}

.error-box h1 {
  color: var(--color-error);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-2xl);
}

.error-message {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-lg);
}

/* ── Footer ── */
.footer {
  background-color: var(--color-primary);
  color: white;
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  margin-top: var(--spacing-3xl);
}

.footer p {
  margin: 0;
  opacity: 0.75;
  font-size: var(--font-size-sm);
  color: white;
}

.footer p + p {
  margin-top: var(--spacing-xs);
}

/* ── Alerts ── */
.alert {
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-sm);
}

.alert-success {
  background-color: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #065f46;
}

.alert-error {
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.alert-info {
  background-color: #dbeafe;
  border: 1px solid #93c5fd;
  color: #1e40af;
}

/* ── Print ── */
@media print {
  .navbar, .footer, .actions, .shopping-actions { display: none; }
  body { background: white; }
  .container { max-width: 100%; margin: 0; padding: 0; }
  .menu-grid { display: block; }
  .menu-card { page-break-inside: avoid; margin-bottom: var(--spacing-xl); box-shadow: none; border: 1px solid var(--color-border); }
  .recipe-content { grid-template-columns: 1fr; }
  .step-image { max-height: 300px; }
  .shopping-item { page-break-inside: avoid; }
}

/* ── Accessibility ── */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  .menu-card { border: 2px solid var(--color-text-primary); }
  .btn { border: 2px solid currentColor; }
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .navbar { padding: var(--spacing-md) 0; }
  .nav-container { flex-wrap: wrap; gap: var(--spacing-sm); }
  .nav-logo { font-size: var(--font-size-lg); }
  .hero { padding: var(--spacing-2xl) var(--spacing-lg); }
  .hero h1 { font-size: var(--font-size-2xl); }
  .menu-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .recipe-content { grid-template-columns: 1fr; }
  .recipe-meta { flex-direction: column; gap: var(--spacing-sm); }
  .shopping-header { flex-direction: column; align-items: stretch; }
  .nav-menu { gap: var(--spacing-xs); }
  .btn { min-height: 44px; }
  .actions { display: block; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  .navbar { padding: var(--spacing-lg) 0; }
}

/* ═══════════════════════════════════════════════════════════
   THEME-SPECIFIC OVERRIDES
   (Bulk of theme-specific CSS moved to /previews/theme-*.css)
   ═══════════════════════════════════════════════════════════ */

/* ── Settings Menu (Cogwheel) ─────────────────────────────────────────────── */

.nav-settings-menu {
  position: relative;
}

.settings-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-btn:hover {
  background: var(--color-hover-bg, rgba(0,0,0,0.05));
  transform: scale(1.1);
}

.settings-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-bg, white);
  border: 1px solid var(--color-border, #ddd);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 220px;
  margin-top: 8px;
  z-index: 1000;
  display: none;
  /* Menu can be taller than short mobile viewports - without this the
     bottom items (user info, logout) render off-screen with no way to
     reach them, since the panel itself never scrolls. */
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

.settings-dropdown.open {
  display: block;
  animation: slideDown 0.2s ease;
}

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

.settings-section {
  padding: 8px 0;
}

.settings-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-secondary, #888);
  padding: 8px 16px 4px;
  letter-spacing: 0.5px;
}

.settings-item,
.settings-submenu-item {
  display: block;
  padding: 10px 16px;
  color: var(--color-text-primary, #333);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.15s;
  position: relative;
}

.settings-item:hover,
.settings-submenu-item:hover {
  background: var(--color-hover-bg, rgba(0,0,0,0.05));
  padding-left: 20px;
}

.settings-submenu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.submenu-arrow {
  font-size: 1.2rem;
  color: var(--color-text-secondary, #888);
}

.settings-submenu-item:hover .submenu-arrow {
  color: var(--color-primary, #d97706);
}

.theme-submenu {
  background: var(--color-bg-secondary, #f9f9f9);
  border-top: 1px solid var(--color-border, #ddd);
  padding: 8px 0;
  max-height: 300px;
  overflow-y: auto;
}

.theme-submenu .theme-option {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s;
}

.theme-submenu .theme-option:hover {
  background: var(--color-hover-bg, rgba(0,0,0,0.08));
}

.theme-option-name {
  font-size: 0.9rem;
  color: var(--color-text-primary, #333);
}

.theme-option-hint {
  font-size: 0.72rem;
  color: var(--color-text-secondary, #888);
  font-style: italic;
  margin-left: 6px;
}

.theme-preview-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--color-border, #ddd);
}

.settings-divider {
  height: 1px;
  background: var(--color-border, #ddd);
  margin: 8px 0;
}

#nav-auth-section {
  padding: 8px 0;
}

.settings-logout {
  color: #ef4444;
  border-top: 1px solid var(--color-border, #ddd);
  margin-top: 4px;
  padding-top: 10px;
}

.settings-logout:hover {
  background: rgba(239, 68, 68, 0.1);
}