/* The Cook Book - Modern Cooking Website Styles */

:root {
  --color-primary: #d97706;
  --color-primary-light: #fef3c7;
  --color-primary-dark: #92400e;
  --color-secondary: #059669;
  --color-secondary-light: #d1fae5;
  --color-accent: #7c3aed;
  --color-text: #1f2937;
  --color-text-light: #6b7280;
  --color-bg: #ffffff;
  --color-bg-alt: #f9fafb;
  --color-border: #e5e7eb;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --radius: 0.5rem;
  --radius-lg: 1rem;
  --font-display: 'Libre Baskerville', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

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

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

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { color: var(--color-primary); }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.3; }
h1 { font-size: 2.5rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }

/* Header */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

[id] {
  scroll-margin-top: 4rem;
}

.header-container {
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-spacer { flex: 1; }

.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  color: var(--color-text-light);
  border-radius: var(--radius);
  line-height: 1;
}
.sidebar-toggle:hover { background: var(--color-bg-alt); color: var(--color-text); }

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.logo-icon { font-size: 1.5rem; }

.search-toggle {
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  border-radius: var(--radius);
}

.search-toggle:hover { background: var(--color-bg-alt); color: var(--color-text); }

.gh-source {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius);
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  transition: opacity 0.15s;
  overflow: hidden;
  max-height: 2.75rem;
}

.gh-source:hover {
  opacity: 0.85;
  color: var(--color-bg);
}

.gh-source__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gh-source__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.gh-source__repo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gh-source__facts {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.65rem;
  font-weight: 400;
  opacity: 0.75;
}

.gh-source__fact::before {
  content: none;
}

/* Site Layout — sidebar + content */
.site-layout {
  display: flex;
  min-height: calc(100vh - 56px);
}

.site-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 1rem 0;
  z-index: 50;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0 0.75rem;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-lg);
  color: var(--color-text-light);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}

.sidebar-nav-item svg {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.sidebar-nav-item:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.sidebar-nav-item:hover svg {
  opacity: 0.85;
}

.sidebar-nav-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.sidebar-nav-item.active svg {
  opacity: 1;
  color: var(--color-primary);
}

.sidebar-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.5rem 0.85rem;
}

.site-content {
  flex: 1;
  min-width: 0;
}

.sidebar-overlay {
  display: none;
}

/* Search Overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: flex;
  justify-content: center;
  padding-top: 10vh;
}

.search-overlay.hidden { display: none; }

.search-container {
  background: var(--color-bg);
  width: 100%;
  max-width: 600px;
  max-height: 70vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.search-header {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.search-header input {
  flex: 1;
  padding: 1rem 1.5rem;
  border: none;
  font-size: 1.125rem;
  outline: none;
}

.search-close {
  padding: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-light);
}

.search-filters {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.filter-btn {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  cursor: pointer;
  font-size: 0.875rem;
}

.filter-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.search-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 1rem;
}

.search-hint {
  color: var(--color-text-light);
  text-align: center;
  padding: 2rem;
}

.search-result {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}

.search-result:hover { background: var(--color-bg-alt); }

.search-result-title { font-weight: 600; }
.search-result-type { 
  font-size: 0.75rem;
  color: var(--color-text-light);
  text-transform: uppercase;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-bg) 100%);
  padding: 4rem 1.5rem;
  text-align: center;
}

.hero-content {
  max-width: 600px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--color-primary-dark);
}

.hero p {
  font-size: 1.25rem;
  color: var(--color-text-light);
  margin-bottom: 2rem;
}

.hero-search {
  display: flex;
  gap: 0.5rem;
  max-width: 450px;
  margin: 0 auto;
}

.hero-search input {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
}

.hero-search input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Buttons */
.btn {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  font-size: 1rem;
}

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

.btn-primary:hover { background: var(--color-primary-dark); }

.btn-secondary {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  color: var(--color-text);
}

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

/* Section Containers */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Featured Techniques */
.featured-techniques {
  padding: 2rem 0;
  background: var(--color-bg-alt);
}

.featured-techniques h2 {
  margin-bottom: 1rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

.technique-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.technique-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 2rem;
  font-weight: 500;
  color: var(--color-text);
  transition: all 0.15s;
}

.technique-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Recipe Section */
.recipes-section {
  padding: 3rem 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.filter-tabs {
  display: flex;
  gap: 0.5rem;
}

.filter-tab {
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-weight: 500;
  border-radius: var(--radius);
}

.filter-tab:hover { background: var(--color-bg-alt); }
.filter-tab.active { background: var(--color-primary-light); color: var(--color-primary-dark); }

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

/* Recipe Card */
.recipe-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: all 0.2s;
}

.recipe-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.recipe-card a { display: block; color: inherit; }

.card-image {
  aspect-ratio: 16/10;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image-placeholder {
  font-size: 4rem;
  opacity: 0.7;
}

.card-content {
  padding: 1.25rem;
}

.card-content h3 {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
}

.card-description {
  color: var(--color-text-light);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Tags & Badges */
.tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-light);
}

.tag-ingredient {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-easy { background: #d1fae5; color: #065f46; }
.badge-medium { background: #fef3c7; color: #92400e; }
.badge-hard { background: #fee2e2; color: #991b1b; }
.badge-beginner { background: #dbeafe; color: #1e40af; }
.badge-intermediate { background: #fef3c7; color: #92400e; }
.badge-advanced { background: #fce7f3; color: #9d174d; }

/* Learn Section on Homepage */
.learn-section {
  padding: 3rem 0;
  background: var(--color-bg-alt);
}

.section-description {
  color: var(--color-text-light);
  margin-bottom: 2rem;
}

.learn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.learn-card {
  background: var(--color-bg);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: all 0.2s;
  color: var(--color-text);
}

.learn-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--color-primary);
}

.learn-card-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.learn-card h3 { margin-bottom: 0.5rem; }
.learn-card p { color: var(--color-text-light); font-size: 0.875rem; margin-bottom: 0.75rem; }

/* Page Header */
.page-header {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-bg) 100%);
  padding: 3rem 1.5rem;
}

.page-header-content {
  max-width: 800px;
  margin: 0 auto;
}

.breadcrumb {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.breadcrumb a { color: var(--color-text-light); }
.breadcrumb a:hover { color: var(--color-primary); }

.page-header h1 { margin-bottom: 0.75rem; }
.page-header p { color: var(--color-text-light); font-size: 1.125rem; }

/* Recipe Page */
.recipe-page { padding-bottom: 3rem; }

.recipe-header {
  padding: 0 1.5rem 2rem;
}

.recipe-header-content {
  max-width: 1200px;
  margin: 0 auto;
}

.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.25rem 0;
}

.recipe-source-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  flex-wrap: wrap;
}

.recipe-commit {
  margin: 0;
}

.recipe-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-family: var(--font-body);
  color: var(--color-text-light);
  background: var(--color-bg-alt);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.15s;
}

.recipe-share-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.recipe-share-btn svg {
  flex-shrink: 0;
}

.recipe-commit a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: var(--color-text-light);
  background: var(--color-bg-alt);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  transition: all 0.15s;
}

.recipe-commit a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.recipe-commit svg {
  flex-shrink: 0;
}

/* Contributors */
.recipe-contributors {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.recipe-contributors h3 {
  margin: 0;
  font-size: 1rem;
}

.contributors-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.contributors-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-light);
  background: var(--color-border);
  border-radius: 10rem;
}

.contributors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.contributor-item {
  position: relative;
  display: inline-block;
}

.contributor-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--color-border);
  transition: border-color 0.15s, transform 0.15s;
  display: block;
}

.contributor-item:hover .contributor-avatar {
  border-color: var(--color-primary);
  transform: scale(1.1);
}

.contributor-avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border: 2px solid var(--color-border);
  transition: border-color 0.15s, transform 0.15s;
}

.contributor-item:hover .contributor-avatar-fallback {
  border-color: var(--color-primary);
  transform: scale(1.1);
}

.contributor-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 0.75rem;
  z-index: 50;
  min-width: 200px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .contributor-tooltip {
    position: fixed;
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100vw - 2rem);
    white-space: normal;
  }
  .contributor-tooltip::after,
  .contributor-tooltip::before {
    display: none;
  }
  .contributor-item:hover .contributor-tooltip {
    display: none;
  }
  .contributor-item.tooltip-active .contributor-tooltip {
    display: block;
  }
}

.contributor-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-border);
}

.contributor-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-bg);
  z-index: 1;
}

.contributor-item:hover .contributor-tooltip {
  display: block;
}

.contributor-tooltip-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.contributor-tooltip-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.contributor-tooltip-avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}

.contributor-tooltip-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.contributor-tooltip-name {
  font-size: 0.9rem;
}

.contributor-tooltip-commits {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.contributor-tooltip-link {
  display: block;
  font-size: 0.8rem;
  color: var(--color-primary);
  text-decoration: none;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.contributor-tooltip-link:hover {
  text-decoration: underline;
}

.contributors-overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  border: 2px dashed var(--color-border);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.contributors-history-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.15s;
}

.contributors-history-link:hover {
  color: var(--color-primary);
}

.contribute-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-bg);
  background: #24292f;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s;
}

.contribute-btn:hover {
  background: #1b1f23;
}

.contribute-btn svg {
  flex-shrink: 0;
}

.recipe-techniques {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.recipe-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.recipe-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-card {
  background: var(--color-bg-alt);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
}

.sidebar-card h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.ingredients-list, .equipment-list {
  list-style: none;
}

.ingredients-list li, .equipment-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
}

.ingredients-list li:last-child, .equipment-list li:last-child { border-bottom: none; }

.ingredient-amount {
  font-weight: 600;
  color: var(--color-primary-dark);
}

.equipment-icon { margin-right: 0.5rem; }

/* Steps */
.recipe-instructions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.steps-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Stage groups — visual containers for multi-stage recipe steps */
.stage-group {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 1rem;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: color-mix(in srgb, var(--color-primary-light) 15%, var(--color-bg));
}

.stage-group-header {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  padding: 0.75rem 0 0.25rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

.step {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  border-left: 3px solid var(--color-border);
  transition: all 0.2s;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.step:hover {
  background: color-mix(in srgb, var(--color-primary-light) 40%, var(--color-bg-alt));
  border-left-color: var(--color-primary);
}

.step:active {
  transform: scale(0.985);
}

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

.step.active {
  background: var(--color-primary-light);
  border-left-color: var(--color-primary);
}

/* Step checkbox (replaces step-number) */
.step-checkbox {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  margin-top: 0.15rem;
}

.step:hover .step-checkbox {
  border-color: var(--color-primary);
}

.step-checkbox-icon::before {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s;
}

.step:hover .step-checkbox-icon::before {
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.step-content h4 { margin-bottom: 0.25rem; color: var(--color-primary-dark); }
.step-content p { color: var(--color-text-light); }

.step-timer {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.timer-btn {
  padding: 0.5rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.875rem;
}

.timer-btn:hover { border-color: var(--color-primary); }

.timer-controls {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.timer-ctrl {
  padding: 0.3rem 0.5rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}

.timer-ctrl:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.step-tip {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--color-secondary-light);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--color-secondary);
}

/* Recipe Info Sections */
.recipe-info-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.recipe-info-section h3 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

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

.info-list li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.info-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
}

.warning-list li::before {
  content: "⚠";
  color: var(--color-warning);
}

/* Related Recipes */
.related-recipes {
  margin-top: 2rem;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.related-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.related-card:hover { border-color: var(--color-primary); }
.related-emoji { font-size: 1.5rem; }
.related-title { font-weight: 500; }

/* Technical Details */
.technical-details {
  margin-top: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: 100%;
  overflow: hidden;
}

.technical-details summary {
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-light);
}

.technical-details summary:hover { color: var(--color-text); }

.ckl-code {
  background: #1e293b;
  padding: 1.5rem;
  border-radius: var(--radius);
  overflow-x: auto;
  position: relative;
  max-width: 100%;
}

.ckl-code pre {
  margin: 0;
  white-space: pre;
  overflow-x: auto;
}

.ckl-code code {
  color: #e2e8f0;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
}

.ckl-code.wrap-lines pre {
  white-space: pre-wrap;
  word-break: break-all;
}

.ckl-code.wrap-lines pre code {
  /* visual continuation marker via box-decoration-break */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ckl-wrap-toggle {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #94a3b8;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s, color 0.15s;
}

.ckl-wrap-toggle:hover {
  background: rgba(255,255,255,0.2);
  color: #e2e8f0;
}

.ckl-wrap-toggle.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.ckl-note {
  padding: 1rem 1.5rem;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

/* Techniques Grid */
.techniques-grid-section {
  padding: 3rem 0;
}

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

.technique-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all 0.2s;
  color: var(--color-text);
}

.technique-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--color-primary);
}

.technique-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 0.75rem;
}

.technique-card h3 { font-size: 1.25rem; }
.recipe-count { font-size: 0.75rem; color: var(--color-text-light); }

.technique-card p {
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.technique-preview {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cue {
  font-size: 0.875rem;
  color: var(--color-success);
}

/* Technique Page */
.technique-page { padding-bottom: 3rem; }

.technique-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.technique-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.technique-section h2 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.technique-section.highlight {
  background: var(--color-secondary-light);
}

.technique-section.warning {
  background: #fef3c7;
}

.technique-explanation {
  font-size: 1.0625rem;
  line-height: 1.8;
}

.visual-cues-list, .failure-list {
  list-style: none;
}

.visual-cues-list li, .failure-list li {
  padding: 0.5rem 0;
  padding-left: 1.75rem;
  position: relative;
}

.visual-cues-list li::before {
  content: "👁";
  position: absolute;
  left: 0;
}

.failure-list li::before {
  content: "❌";
  position: absolute;
  left: 0;
}

.recipe-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.recipe-mini-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.recipe-mini-card:hover { border-color: var(--color-primary); }
.mini-emoji { font-size: 2rem; }
.mini-meta { font-size: 0.75rem; color: var(--color-text-light); }

/* Ingredients Index */
.ingredients-index {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.ingredient-category {
  margin-bottom: 3rem;
}

.ingredient-category h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-border);
}

.category-emoji { font-size: 1.5rem; }

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

.ingredient-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: all 0.2s;
  overflow: hidden;
}

.ingredient-card.has-img {
  padding: 0;
}

.ingredient-card.has-img h3,
.ingredient-card.has-img .safe-temp,
.ingredient-card.has-img .badge,
.ingredient-card.has-img .recipe-count {
  padding-left: 1rem;
  padding-right: 1rem;
}

.ingredient-card.has-img h3 { padding-top: 0.75rem; }
.ingredient-card.has-img .recipe-count { padding-bottom: 1rem; }

.ingredient-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.ingredient-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.safe-temp {
  display: block;
  font-size: 0.75rem;
  color: var(--color-error);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Ingredient Page */
.ingredient-page { padding-bottom: 3rem; }

.ingredient-meta {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

/* Shared: card thumbnails and page hero images */
.item-img {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.page-hero-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.page-hero-img {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg-alt);
}

.page-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.category-badge {
  background: var(--color-bg);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
}

.temp-badge {
  background: var(--color-error);
  color: white;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
}

.ingredient-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.ingredient-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.ingredient-section.make-your-own {
  background: linear-gradient(135deg, var(--color-primary-bg, #f0f7ff), var(--color-bg-alt));
  border: 1px solid var(--color-primary);
}

.make-your-own-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: opacity var(--transition);
}

.make-your-own-link:hover {
  opacity: 0.85;
  color: #fff;
}

.ingredient-section h2 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.taste-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.taste-profile > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.taste-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  font-weight: 600;
}

.taste-value {
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--color-primary);
}

.taste-meter {
  display: inline-flex;
  gap: 0.3rem;
}

.taste-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-border);
}

.taste-mild .taste-dot:nth-child(1) { background: var(--color-success); }
.taste-moderate .taste-dot:nth-child(1),
.taste-moderate .taste-dot:nth-child(2) { background: var(--color-warning); }
.taste-strong .taste-dot:nth-child(1),
.taste-strong .taste-dot:nth-child(2),
.taste-strong .taste-dot:nth-child(3) { background: var(--color-error); }

.taste-intensity-label {
  font-size: 0.85rem;
  text-transform: capitalize;
  color: var(--color-text-light);
}

.taste-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.taste-tag {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.8rem;
  text-transform: capitalize;
}

.taste-tag.pairing {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

@media (max-width: 600px) {
  .taste-profile {
    grid-template-columns: 1fr;
  }
}

.temp-display {
  text-align: center;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.temp-value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-error);
  display: block;
}

.temp-label {
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.technique-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.technique-tags .tag {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

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

.mistake-list li {
  padding: 0.5rem 0;
  padding-left: 1.75rem;
  position: relative;
}

.mistake-list li::before {
  content: "⚠";
  position: absolute;
  left: 0;
}

/* Learn Pages */
.learn-paths-section {
  padding: 3rem 0;
}

.learn-paths-grid {
  display: grid;
  gap: 1.5rem;
}

.learn-path-card {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  transition: all 0.2s;
}

.learn-path-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--color-primary);
}

.path-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.path-content h3 { margin-bottom: 0.5rem; }
.path-content p { color: var(--color-text-light); margin-bottom: 0.75rem; }

.path-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.topic-count {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.quick-start {
  padding: 3rem 0;
  background: var(--color-bg-alt);
  text-align: center;
}

.quick-start h2 { margin-bottom: 1rem; }
.quick-start p { color: var(--color-text-light); max-width: 600px; margin: 0 auto; }

/* Learning Path Page */
.learning-path-page { padding-bottom: 3rem; }

.path-description {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.learning-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.topics-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.learning-topic {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
}

.topic-number {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.topic-content h3 { margin-bottom: 0.5rem; }
.topic-content p { color: var(--color-text-light); margin-bottom: 0.75rem; }

.topic-techniques, .topic-recipes {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.topic-link, .recipe-link {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  margin: 0.25rem 0.25rem 0.25rem 0;
}

/* About Pages */
.about-content {
  padding: 2rem 0;
}

.about-content ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.about-content li {
  margin-bottom: 0.5rem;
}

.doc-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.doc-link {
  display: block;
  padding: 1.25rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.doc-link:hover {
  border-color: var(--color-primary);
}

.doc-link strong {
  display: block;
  margin-bottom: 0.25rem;
}

.doc-link span {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.doc-content {
  padding: 2rem 0;
}

.doc-content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.doc-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.doc-content p {
  margin-bottom: 1rem;
}

.doc-content ul, .doc-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.doc-content li {
  margin-bottom: 0.5rem;
}

.doc-content code {
  background: var(--color-bg-alt);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.875rem;
}

/* Footer */
.site-footer {
  background: #1e293b;
  color: #e2e8f0;
  padding: 3rem 0 1.5rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-brand .logo-icon {
  font-size: 2rem;
}

.footer-brand span:nth-child(2) {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.footer-brand p {
  color: #94a3b8;
  font-size: 0.875rem;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-col h4 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  color: #94a3b8;
}

.footer-col a {
  display: block;
  color: #e2e8f0;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

.footer-col a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
  margin-top: 2rem;
  border-top: 1px solid #334155;
  text-align: center;
  font-size: 0.875rem;
  color: #94a3b8;
}

.footer-bottom a {
  color: var(--color-primary);
}

.footer-bottom-links {
  margin-bottom: 0.75rem;
}

.footer-bottom-links a {
  color: #e2e8f0;
  font-size: 0.8125rem;
}

.footer-bottom-links a:hover {
  color: var(--color-primary);
}

.footer-sep {
  margin: 0 0.5rem;
  color: #475569;
}



/* Timer states */
.timer-btn.timer-active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  animation: pulse 1s ease-in-out infinite;
}

.timer-btn.timer-done {
  background: var(--color-secondary);
  color: white;
  border-color: var(--color-secondary);
  font-weight: 600;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Kosher badge */
.badge-kosher {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-not-kosher {
  background: #fbe9e7;
  color: #c62828;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Safety badge */
.badge-safe {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-unsafe {
  background: #fff3e0;
  color: #e65100;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Responsive — Tablet: sidebar below instructions */
@media (max-width: 1024px) and (min-width: 769px) {
  .recipe-content {
    grid-template-columns: 1fr;
  }
  .recipe-sidebar { order: 99; display: contents; }
  .recipe-main { order: 0; display: contents; }
  .recipe-instructions-section { order: 1; }
  .recipe-section-why { order: 2; }
  .recipe-section-mistakes { order: 3; }
  .sidebar-card-ingredients { order: 4; }
  .sidebar-card-equipment { order: 5; }
  .recipe-section-technical { order: 6; }
  .review-section { order: 7; }
  .recipe-section-related { order: 8; }
  .recipe-completion { order: 9; }
  .recipe-contributors { order: 10; }
}

/* Responsive */
@media (max-width: 768px) {
  .header-container { padding: 0.5rem 1rem; }
  .gh-source { display: none; }
  .sidebar-toggle { display: block; }
  
  .site-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
    padding-top: 1.25rem;
  }

  .site-sidebar.sidebar-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 199;
  }

  .sidebar-overlay.visible {
    display: block;
  }
  
  .hero h1 { font-size: 2rem; }
  .hero-search { flex-direction: column; }
  
  .recipe-content { grid-template-columns: 1fr; }
  .recipe-sidebar { order: 99; display: contents; }
  .recipe-main { order: 0; display: contents; }
  .recipe-instructions-section { order: 1; }
  .recipe-section-why { order: 2; }
  .recipe-section-mistakes { order: 3; }
  .sidebar-card-ingredients { order: 4; }
  .sidebar-card-equipment { order: 5; }
  .recipe-section-technical { order: 6; }
  .review-section { order: 7; }
  .recipe-section-related { order: 8; }
  .recipe-completion { order: 9; }
  .recipe-contributors { order: 10; }
  
  .footer-container { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================
   Ingredient Highlighting & Linking
   ========================================== */

.ingredient-highlight-target.highlighted,
[data-ingredient].highlighted {
  background: rgba(46, 160, 67, 0.15);
  border-radius: 3px;
  transition: background 0.15s ease;
}

.step-ingredient-ref {
  cursor: default;
  border-bottom: 1px dotted var(--color-primary);
  transition: background 0.15s ease;
  position: relative;
}

.step-ingredient-ref.has-tooltip {
  cursor: pointer;
}

.step-ingredient-ref.has-tooltip::after {
  content: attr(data-amount);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-bg);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.step-ingredient-ref.has-tooltip:hover::after,
.step-ingredient-ref.has-tooltip.tooltip-active::after {
  opacity: 1;
}

.step-ingredient-ref.highlighted {
  background: rgba(46, 160, 67, 0.2);
  border-radius: 3px;
}

.step-equipment-ref {
  cursor: default;
  border-bottom: 1px dotted var(--color-text-light);
  transition: background 0.15s ease;
}

.step-equipment-ref.highlighted,
.equipment-highlight-target.highlighted {
  background: rgba(59, 130, 246, 0.15);
  border-radius: 3px;
}

.step-stage-ref {
  cursor: pointer;
  color: var(--color-primary-dark);
  font-weight: 600;
  border-bottom: 1.5px dashed var(--color-primary);
  transition: background 0.15s ease, color 0.15s ease;
}

.step-stage-ref:hover {
  background: var(--color-primary-light);
  border-bottom-style: solid;
}

.step-stage-ref.highlighted {
  background: rgba(139, 92, 246, 0.15);
  border-radius: 3px;
}

.stage-group.highlighted {
  box-shadow: 0 0 0 2px var(--color-primary);
}

.ingredient-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.ingredient-link:hover {
  text-decoration: underline;
}

.ingredient-recipe-link {
  font-size: 0.85rem;
  text-decoration: none;
  margin-left: 0.25rem;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.ingredient-recipe-link:hover {
  opacity: 1;
}

.equipment-link {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.15s;
}

.equipment-link:hover {
  color: var(--color-primary);
}

/* ==========================================
   Serving Size Adjuster
   ========================================== */

.sidebar-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.sidebar-card-header h3 {
  margin-bottom: 0;
}

.serving-adjuster {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.15rem;
}

.serving-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--color-text);
  transition: background 0.15s;
}

.serving-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.serving-display {
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 1.5em;
  text-align: center;
}

/* ==========================================
   Equipment Alternatives (in recipe sidebar)
   ========================================== */

.equipment-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.equipment-item-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.equip-name-display {
  font-weight: 500;
}

.stage-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  margin-left: 0.25rem;
  vertical-align: middle;
}

.equip-page-link,
.equip-info-btn {
  font-size: 0.85rem;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.equip-page-link:hover,
.equip-info-btn:hover {
  opacity: 1;
}

.equipment-alt-selector {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-left: 2rem;
}

.alt-select {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  max-width: 180px;
}

.alt-select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.alt-select option {
  background: var(--color-bg-alt);
}

/* ==========================================
   Equipment Index & Pages
   ========================================== */

.equipment-index {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.equipment-category {
  margin-bottom: 2.5rem;
}

.equipment-category h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

.equipment-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: all 0.2s;
  overflow: hidden;
}

.equipment-card.has-img {
  padding: 0;
}

.equipment-card.has-img h3,
.equipment-card.has-img .equipment-purpose,
.equipment-card.has-img .recipe-count {
  padding-left: 1rem;
  padding-right: 1rem;
}

.equipment-card.has-img h3 { padding-top: 0.75rem; }
.equipment-card.has-img .recipe-count { padding-bottom: 1rem; }

.equipment-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.equipment-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.equipment-purpose {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* price-range removed — ads-free */
.price-range-unused {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--color-success);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.price-badge-unused {
  background: var(--color-success);
  color: white;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Equipment Page */
.equipment-page { padding-bottom: 3rem; }

.equipment-meta {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.equipment-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.equipment-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.equipment-section h2 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.equipment-section.highlight {
  border-left: 4px solid var(--color-primary);
}

.material-tags,
.heat-source-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.best-for-list {
  list-style: disc;
  margin-left: 1.5rem;
}

.best-for-list li {
  margin-bottom: 0.35rem;
}

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

.alternative-card {
  display: block;
  padding: 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  transition: all 0.2s;
}

.alternative-card:hover {
  border-color: var(--color-primary);
}

.alternative-card h4 {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.alternative-card p {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

/* ==========================================
   Beginner-Safe Badge
   ========================================== */
.badge-beginner-safe {
  background: #dbeafe;
  color: #1e40af;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-block;
  margin-bottom: 0.35rem;
}

.badge-beginner-safe-lg {
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  margin-bottom: 0.75rem;
}

/* Demonstration Only badge (replaces Unsafe) */
.badge-demo-only {
  background: #fff3e0;
  color: #e65100;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ==========================================
   Hero Section - Guided Experience
   ========================================== */
.hero-subtitle {
  font-size: 1.15rem;
  color: var(--color-text-light);
  margin-bottom: 2rem;
}

.hero-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.hero-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.hero-step-number {
  width: 1.75rem;
  height: 1.75rem;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.hero-step-text {
  font-weight: 500;
  font-size: 0.9rem;
}

.hero-step-arrow {
  color: var(--color-text-light);
  font-size: 1.25rem;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

.hero-cta .hero-search {
  display: flex;
  gap: 0.5rem;
  max-width: 400px;
  width: 100%;
}

/* ==========================================
   Cook Tonight Assistant
   ========================================== */
.cook-tonight {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  transition: border-color 0.2s;
}

.cook-tonight:focus-within {
  border-color: var(--color-primary);
}

.cook-tonight-header {
  margin-bottom: 0.75rem;
}

.cook-tonight-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cook-tonight-icon {
  font-size: 1.5rem;
}

.cook-tonight-title h3 {
  margin: 0;
  font-size: 1.1rem;
}

.cook-tonight-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.cook-tonight-input-wrap {
  position: relative;
}

.cook-tonight-input-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-height: 2.75rem;
  cursor: text;
}

.cook-tonight-input-area:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

.cook-tonight-input-area.dropdown-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.cook-tonight-input {
  flex: 1;
  min-width: 180px;
  border: none;
  outline: none;
  font-size: 0.9rem;
  background: transparent;
  padding: 0.25rem 0;
}

/* Autocomplete Dropdown */
.ingredient-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-top: none;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ingredient-dropdown.open {
  display: block;
}

.ingredient-dropdown-group {
  padding: 0.15rem 0;
}

.ingredient-dropdown-header {
  padding: 0.4rem 0.75rem 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  user-select: none;
}

.ingredient-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: background 0.1s;
}

.ingredient-dropdown-item:hover,
.ingredient-dropdown-item.active {
  background: var(--color-primary-light);
}

.ingredient-dropdown-item.active {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.ingredient-dropdown-icon {
  width: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.ingredient-dropdown-name {
  flex: 1;
}

.ingredient-dropdown-name mark {
  background: rgba(217, 119, 6, 0.2);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.ingredient-dropdown-selected {
  font-size: 0.7rem;
  color: var(--color-primary);
  font-weight: 600;
}

.ingredient-dropdown-empty {
  padding: 1rem 0.75rem;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.85rem;
}

.cook-tonight-chips {
  display: contents;
}

.ingredient-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  white-space: nowrap;
  animation: chipIn 0.15s ease;
}

@keyframes chipIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.ingredient-chip button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-primary-dark);
  padding: 0;
  opacity: 0.6;
}

.ingredient-chip button:hover {
  opacity: 1;
}

.cook-tonight-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.cook-tonight-count {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

/* Cook Tonight Results */
.cook-tonight-results {
  margin-top: 1rem;
}

.cook-tonight-group {
  margin-bottom: 1.25rem;
}

.group-label {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.group-label-go { color: #16a34a; }
.group-label-close { color: #ca8a04; }
.group-label-shop { color: #dc2626; }

.group-desc {
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin-bottom: 0.75rem;
}

.group-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Compact result card inside cook-tonight */
.cook-tonight-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  transition: all 0.15s;
}

.cook-tonight-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.cook-tonight-card-emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.cook-tonight-card-info {
  flex: 1;
  min-width: 0;
}

.cook-tonight-card-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.cook-tonight-card-time {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.cook-tonight-card-missing {
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin-top: 0.15rem;
}

.cook-tonight-card-missing strong {
  color: #dc2626;
  font-weight: 600;
}

.cook-tonight-card-score {
  flex-shrink: 0;
  text-align: center;
}

.cook-tonight-card-pct {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
}

.cook-tonight-card-pct.score-go { color: #16a34a; }
.cook-tonight-card-pct.score-close { color: #ca8a04; }
.cook-tonight-card-pct.score-shop { color: #dc2626; }

.cook-tonight-card-pct-label {
  font-size: 0.65rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Card missing overlay in grid view */
.card-missing {
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  background: #fef2f2;
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: #991b1b;
}

.card-missing strong {
  font-weight: 600;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
}

/* Card skills meta */
.meta-skills {
  color: var(--color-accent);
}

/* ==========================================
   Technique Annotations
   ========================================== */
.technique-annotation {
  margin-top: 0.5rem;
  padding: 0.4rem 0.65rem;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.85rem;
}

.technique-label {
  display: inline-block;
  background: var(--color-accent);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.technique-cue {
  color: var(--color-text-light);
  font-style: italic;
}

.technique-details {
  margin-top: 0.35rem;
}

.technique-details summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--color-accent);
  font-weight: 500;
  user-select: none;
}

.technique-details summary:hover {
  text-decoration: underline;
}

.technique-details-body {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

.technique-details-body p {
  margin: 0.25rem 0;
}

.technique-mistakes {
  margin: 0.25rem 0 0 1rem;
  padding: 0;
  font-size: 0.78rem;
}

.technique-mistakes li {
  margin: 0.15rem 0;
}

.technique-mistakes li::marker {
  content: "\26A0  ";
}

/* Terminology tooltips */
.term-tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dashed var(--color-accent);
  color: var(--color-accent);
}

.term-tooltip .term-tooltip-text {
  display: none;
}

.term-tooltip:hover .term-tooltip-text,
.term-tooltip.tooltip-active .term-tooltip-text {
  display: block;
}

.term-tooltip-text {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-bg);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* ==========================================
   Step Progress (inline - kept as subtle context)
   ========================================== */
.step-progress {
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}

.step-progress-bar {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.step-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.step-progress-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.step-progress-message {
  font-size: 0.75rem;
  color: var(--color-text-light);
  font-style: italic;
}

/* ==========================================
   Floating Step Nav Pill
   ========================================== */
.step-nav-pill {
  position: fixed;
  bottom: 1.5rem;
  right: 50%;
  transform: translateX(50%);
  z-index: 900;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 2rem;
  padding: 0.5rem 1.25rem;
  display: none;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  cursor: pointer;
  max-width: 90vw;
  transition: opacity 0.3s, transform 0.3s;
  font-size: 0.9rem;
}

.step-nav-pill.visible {
  display: flex;
}

.step-nav-pill:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,0.2);
}

.step-nav-pill:active {
  transform: translateX(50%) scale(0.97);
}

.step-nav-pill-progress {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background: conic-gradient(var(--color-primary) var(--pill-pct, 0%), var(--color-border) 0%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-nav-pill-fill {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--color-bg);
}

.step-nav-pill-text {
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-text);
}

.step-nav-pill-title {
  color: var(--color-text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.step-nav-pill.completed {
  background: #16a34a;
  border-color: #16a34a;
  color: white;
}

.step-nav-pill.completed .step-nav-pill-text,
.step-nav-pill.completed .step-nav-pill-title {
  color: white;
}

.step-nav-pill.completed .step-nav-pill-progress {
  background: rgba(255,255,255,0.2);
}

.step-nav-pill.completed .step-nav-pill-fill {
  background: #16a34a;
}

/* Desktop: anchor right side */
@media (min-width: 769px) {
  .step-nav-pill {
    right: 2rem;
    bottom: 2rem;
    transform: none;
  }
  .step-nav-pill:active {
    transform: scale(0.97);
  }
}

/* ==========================================
   Recipe Completion / Skill Unlock
   ========================================== */
.recipe-completion {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #dbeafe 100%);
  border-radius: var(--radius-lg);
  margin-top: 2rem;
}

.completion-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.completion-content h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.completion-subtitle {
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.skills-earned {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  transition: all 0.15s;
}

.skill-badge:hover {
  background: var(--color-primary);
  color: white;
}

.skill-badge-icon {
  color: var(--color-primary);
}

.skill-badge:hover .skill-badge-icon {
  color: white;
}

.skill-badge-desc {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-text-light);
  max-width: 180px;
  line-height: 1.2;
}
.skill-badge:hover .skill-badge-desc { color: rgba(255,255,255,0.85); }

/* Completion complexity indicator */
.completion-complexity {
  margin-bottom: 1rem;
  font-size: 0.85rem;
}
.complexity-label { color: var(--color-text-light); }
.complexity-value {
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.8rem;
}
.complexity-beginner { background: #dcfce7; color: #166534; }
.complexity-intermediate { background: #fef3c7; color: #92400e; }
.complexity-advanced { background: #fce7f3; color: #9d174d; }

/* ==========================================
   Recommendation Cards (Completion Screen)
   ========================================== */
.completion-recommendations { margin-top: 1.5rem; }
.completion-recommendations h3 { margin-bottom: 0.25rem; font-size: 1.1rem; }
.completion-rec-hint { color: var(--color-text-light); font-size: 0.85rem; margin-bottom: 1rem; }

.rec-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rec-card {
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: all 0.15s;
  text-decoration: none;
  color: inherit;
}
.rec-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: translateY(-1px); }

.rec-card-type {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.rec-card-type-icon { margin-right: 0.25rem; }
.rec-card-reinforcement .rec-card-type { color: #2563eb; }
.rec-card-extension .rec-card-type { color: #d97706; }
.rec-card-lateral .rec-card-type { color: #059669; }

.rec-card-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.rec-card-emoji { font-size: 1.5rem; flex-shrink: 0; }
.rec-card-info { flex: 1; min-width: 0; }
.rec-card-title { font-weight: 600; font-size: 0.95rem; }
.rec-card-reason { font-size: 0.82rem; color: var(--color-text-light); margin-top: 0.15rem; }
.rec-card-meta { font-size: 0.75rem; color: var(--color-text-light); margin-top: 0.2rem; }

/* ==========================================
   Start Anywhere (Homepage)
   ========================================== */
.start-anywhere {
  padding: 3rem 0;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fff7ed 100%);
}
.start-anywhere h2 {
  text-align: center;
  font-family: var(--font-heading);
  margin-bottom: 0.5rem;
}
.start-anywhere .section-description {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 2rem;
}

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

.starter-card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: white;
  border-radius: 1rem;
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.starter-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.12);
  transform: translateY(-2px);
}
.starter-card-emoji { font-size: 2.5rem; flex-shrink: 0; align-self: center; }
.starter-card-body h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.starter-card-desc { font-size: 0.82rem; color: var(--color-text-light); margin-bottom: 0.35rem; line-height: 1.4; }
.starter-card-meta { font-size: 0.75rem; color: var(--color-text-light); margin-bottom: 0.35rem; }
.starter-card-skills { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.starter-skill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  background: #fef3c7;
  border-radius: 1rem;
  color: #92400e;
  font-weight: 500;
}

.start-anywhere-cta {
  text-align: center;
  margin-top: 0.5rem;
}

/* ==========================================
   Skills Map Page
   ========================================== */
.skill-map-page { padding: 2rem 0 4rem; }
.skill-map-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.skill-map-header h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.skill-map-subtitle {
  max-width: 620px;
  margin: 0 auto 1rem;
  color: var(--color-text-light);
  line-height: 1.5;
}
.skill-map-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  font-size: 0.9rem;
}
.skill-map-stat strong {
  color: var(--color-primary-dark);
  font-size: 1.2rem;
}

.skill-map-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.skill-section {
  background: var(--color-bg-alt);
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}

.skill-section-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.skill-section-icon { font-size: 1.8rem; flex-shrink: 0; }
.skill-section-header h3 { margin: 0; font-size: 1.15rem; }
.skill-section-desc { font-size: 0.85rem; color: var(--color-text-light); margin-top: 0.15rem; line-height: 1.4; }
.skill-section-count {
  margin-left: auto;
  font-size: 0.8rem;
  background: var(--color-primary);
  color: white;
  padding: 0.2rem 0.7rem;
  border-radius: 1rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.skill-recipe-progression {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.5rem;
}
.skill-progression-line {
  position: absolute;
  left: 0.65rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-border));
  border-radius: 1px;
}

.skill-recipe-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
  position: relative;
}
.skill-recipe-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.skill-recipe-card-start {
  border-color: var(--color-primary);
  background: #fffbeb;
}

.skill-recipe-order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
  color: var(--color-text-light);
}
.skill-recipe-card-start .skill-recipe-order {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.skill-recipe-emoji { font-size: 1.2rem; flex-shrink: 0; }
.skill-recipe-info { flex: 1; min-width: 0; }
.skill-recipe-name { font-weight: 600; font-size: 0.9rem; }
.skill-recipe-meta { font-size: 0.75rem; color: var(--color-text-light); margin-top: 0.1rem; }

.skill-recipe-start-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
  background: #fef3c7;
  padding: 0.15rem 0.5rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.next-recipes {
  margin-top: 1.5rem;
}

.next-recipes h3 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

/* Completed step styling */
.step.step-done {
  border-left-color: #16a34a;
  background: color-mix(in srgb, #dcfce7 40%, var(--color-bg-alt));
}

.step.step-done .step-checkbox {
  border-color: #16a34a;
  background: #16a34a;
}

.step.step-done .step-checkbox-icon::before {
  /* checkmark via CSS */
  content: none;
}

.step.step-done .step-checkbox-icon::after {
  content: '';
  display: block;
  width: 0.45rem;
  height: 0.7rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

.step.step-done .step-content h4 {
  color: #16a34a;
}

.step.step-done .step-content p {
  opacity: 0.7;
}

.step.step-done:hover {
  background: color-mix(in srgb, #dcfce7 60%, var(--color-bg-alt));
}

@media (max-width: 768px) {
  .hero-steps { flex-direction: column; gap: 0.5rem; }
  .hero-step-arrow { transform: rotate(90deg); }

  .cook-tonight-input { min-width: 120px; }
  .cook-tonight-card { flex-wrap: wrap; }
}