/* ======================
   RECIPE BUILDER
   Multi-step wizard interface
   ====================== */

/* --- Builder Container --- */
.builder-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

.builder-start {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.page-header {
    margin-bottom: 0.5rem;
    text-align: center;
}

.page-header .lead {
    font-size: 1.2rem;
    color: var(--color-subtle);
    margin-top: 0.5rem;
}

/* --- Filter Result Count --- */
.filter-result-count {
    font-size: 0.9rem;
    color: var(--color-subtle);
    margin: 0.5rem 0 0.75rem;
    padding: 0 0.25rem;
}

.filter-result-count strong {
    color: var(--color-text);
}

/* --- Progress Hint --- */
.progress-hint {
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--color-accent-alpha-8), var(--color-accent-alpha-5));
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    margin: 0.75rem 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

.progress-hint strong {
    color: var(--color-accent);
}

/* --- First Visit Hint --- */
.first-visit-hint {
    background: linear-gradient(135deg, var(--color-accent-alpha-8), var(--color-accent-alpha-5));
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
}

.first-visit-hint .hint-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.first-visit-hint svg {
    flex-shrink: 0;
    color: var(--color-accent);
}

.first-visit-hint span {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.4;
}

.first-visit-hint .hint-dismiss {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-subtle);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.first-visit-hint .hint-dismiss:hover {
    color: var(--color-text);
}

/* First visit highlight for occasion card */
.occasion-card.first-visit-active {
    border: 2px solid var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-alpha-15);
    animation: firstVisitPulse 2s ease-in-out infinite;
}

@keyframes firstVisitPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px var(--color-accent-alpha-15);
    }
    50% {
        box-shadow: 0 0 0 8px transparent;
    }
}

/* --- Builder Start Page Header --- */
.builder-start__header {
    text-align: center;
    margin-bottom: 1rem;
}

.builder-start__subtitle {
    font-size: 1.1rem;
    color: var(--color-subtle);
    margin-top: 0.25rem;
}

.builder-start__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-subtle);
}

.builder-start__empty svg {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.builder-start__empty p {
    margin-bottom: 1rem;
}

/* --- Draft Recovery Banner --- */
.draft-recovery-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--color-card);
    border: 1px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.draft-recovery-banner__content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 200px;
}

.draft-recovery-banner__icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.draft-recovery-banner__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.draft-recovery-banner__text strong {
    font-size: 0.95rem;
}

.draft-recovery-banner__text span {
    font-size: 0.85rem;
    color: var(--color-subtle);
}

.draft-recovery-banner__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .draft-recovery-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .draft-recovery-banner__actions {
        justify-content: flex-end;
    }
}

/* --- Featured Section --- */
.featured-section {
    margin-bottom: 2rem;
}

.featured-section__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-accent);
}

.featured-section__header svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.featured-section__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- Featured Occasions Row --- */
.featured-occasions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* --- Category Rows --- */
.category-row {
    margin-bottom: 2.5rem;
}

.category-row__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0 0 0.75rem 0;
    background: none;
    border: none;
    border-bottom: 2px solid var(--color-border);
    width: 100%;
    text-align: left;
}

.category-row__header--collapsible {
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.category-row__header--collapsible:hover {
    border-bottom-color: var(--color-accent);
}

.category-row__header--collapsible:hover .category-row__title {
    color: var(--color-accent-dark);
}

.category-row__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0;
    transition: color 0.2s ease;
    letter-spacing: 0.01em;
}

.category-row__count {
    font-size: 0.85rem;
    color: var(--color-subtle);
    font-weight: 500;
    margin-left: auto;
    padding: 0.2rem 0.6rem;
    background: var(--color-bg);
    border-radius: var(--border-radius-pill);
}

.category-row__toggle-icon {
    display: flex;
    align-items: center;
    color: var(--color-subtle);
    transition: transform 0.2s ease, color 0.2s ease;
    margin-left: 0.5rem;
}

.category-row__header--collapsible:hover .category-row__toggle-icon {
    color: var(--color-accent);
}

.category-row--collapsed .category-row__toggle-icon {
    transform: rotate(-90deg);
}

.category-row__content {
    /* Content visible by default */
}

.category-row__content--hidden {
    display: none;
}

/* --- Occasion Grid (4 columns to match featured section) --- */
.occasion-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* --- Occasion Cards (matching .card styling from cards.css) --- */
.occasion-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    cursor: pointer;
    /* Match .card styling exactly */
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 0.75rem;
    box-shadow: 0 2px 8px var(--color-shadow);
    transition: all 0.2s ease;
}

.occasion-card:hover,
.occasion-card:focus,
.occasion-card:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-shadow-hover);
    background: var(--color-card); /* Ensure no green background on any state */
}

/* Featured cards - same styling as regular cards now */
.occasion-card--featured {
    /* No special border or outline */
}

.occasion-card--featured:hover {
    /* Same hover as regular cards */
}

/* Image wrapper - matches .card img styling */
.occasion-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    margin-bottom: 0.3rem;
    background: var(--color-bg);
}

.occasion-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.occasion-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-subtle);
    background: var(--color-bg);
}

.occasion-card__image--placeholder svg {
    opacity: 0.4;
}

/* Title - matches .card-title styling from component/dish cards */
.occasion-card__name {
    width: 100%;
    margin: 0.25rem 0 0 0;
    padding: 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--color-accent);
    word-wrap: break-word;
}

/* Card wrapper for positioning favorite button */
.occasion-card-wrapper {
    position: relative;
}

/* Favorite button - matching .svg-star-button from cards.css */
.occasion-card__favorite {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: white;
    color: var(--color-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.occasion-card__favorite:hover {
    transform: scale(1.05);
}

.occasion-card__favorite--active {
    color: var(--color-accent);
}

.occasion-card__favorite--active svg {
    fill: currentColor;
}

.occasion-card__favorite--active:hover {
    color: var(--color-accent-dark);
}

/* Dark mode adjustments */
:root[data-theme='dark'] .occasion-card__favorite {
    background-color: var(--color-card);
}

/* --- Mobile Adjustments --- */
@media (max-width: 1100px) {
    .featured-occasions,
    .occasion-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px) {
    .featured-occasions,
    .occasion-row {
        /* Switch to horizontal scroll on mobile */
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.75rem;
        padding-bottom: 0.5rem; /* Space for scrollbar */
        margin: 0 -1rem; /* Extend to edges */
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .featured-occasions .occasion-card-wrapper,
    .occasion-row .occasion-card-wrapper {
        flex: 0 0 calc(45% - 0.375rem); /* Show ~2.2 cards */
        scroll-snap-align: start;
    }

    /* Hide scrollbar but keep functionality */
    .featured-occasions::-webkit-scrollbar,
    .occasion-row::-webkit-scrollbar {
        height: 4px;
    }

    .featured-occasions::-webkit-scrollbar-track,
    .occasion-row::-webkit-scrollbar-track {
        background: var(--color-border);
        border-radius: 2px;
    }

    .featured-occasions::-webkit-scrollbar-thumb,
    .occasion-row::-webkit-scrollbar-thumb {
        background: var(--color-subtle);
        border-radius: 2px;
    }
}

@media (max-width: 640px) {
    .featured-section__header {
        padding-bottom: 0.4rem;
    }

    .featured-section__title {
        font-size: 1rem;
    }

    .featured-occasions,
    .occasion-row {
        gap: 0.75rem;
    }

    .occasion-card {
        padding: 0.5rem;
    }

    .category-row__title {
        font-size: 1.05rem;
    }

    .category-row__count {
        font-size: 0.75rem;
        padding: 0.15rem 0.5rem;
    }

    .occasion-card__name {
        font-size: 0.9rem;
    }

    /* Slightly smaller favorite button on mobile */
    .occasion-card__favorite {
        width: 40px;
        height: 40px;
    }
}

/* --- Legacy Occasion Grid (for backward compatibility) --- */
.occasion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Was 180px */
    gap: 0.75rem; /* Was 1rem */
    margin: 1rem 0; /* Was 1.5rem */
}

/* Legacy occasion card styles (kept for wizard page compatibility) */
.occasion-grid .occasion-card {
    width: auto;
}

.occasion-image-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3; /* Was 3/2 - now matches list cards */
    overflow: hidden;
    border-radius: var(--border-radius-md);
    margin-bottom: 0.4rem; /* Was 0.5rem */
    background: var(--color-bg);
}

.occasion-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.occasion-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
}

.placeholder-icon {
    width: 40px; /* Was 48px */
    height: 40px; /* Was 48px */
    color: var(--color-subtle);
}

.occasion-title,
.occasion-grid .occasion-card .card-title {
    font-size: 0.9rem; /* Was 1rem */
    font-weight: 600;
    margin: 0.2rem 0; /* Was 0.25rem */
    overflow-wrap: break-word;
    word-break: keep-all; /* Prevent single character orphans */
    hyphens: auto;
    -webkit-hyphens: auto;
}

.occasion-description {
    font-size: 0.75rem; /* Was 0.8rem */
    color: var(--color-subtle);
    margin-top: 0.2rem; /* Was 0.25rem */
    line-height: 1.3;
}

/* --- Wizard Container --- */
.builder-wizard {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 1rem;
}

.wizard-header {
    margin-bottom: 0.25rem;
    text-align: center;
    position: relative;
}

/* --- Autosave Status Indicator --- */
.autosave-status {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.75rem;
    color: var(--color-subtle);
    padding: 0.25rem 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.autosave-status:not(:empty) {
    opacity: 1;
}

.autosave-status.saving {
    color: var(--color-accent);
}

@media (max-width: 600px) {
    .autosave-status {
        position: static;
        display: block;
        text-align: center;
        margin-top: 0.25rem;
    }
}

/* --- Progress Bar --- */
.wizard-header .progress-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem auto 0.5rem;
    max-width: 800px;
    height: auto;
    overflow: visible;
    background: transparent;
    border-radius: 0;
}

.wizard-header .progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    position: relative;
}

.wizard-header .progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.wizard-header .progress-step.active:not(:last-child)::after,
.wizard-header .progress-step.completed:not(:last-child)::after {
    background: var(--color-accent);
}

.wizard-header .progress-step .number {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    z-index: 1;
    transition: all 0.3s ease;
}

.wizard-header .progress-step.active .number {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
    transform: scale(1.1);
}

.wizard-header .progress-step.completed .number {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

.wizard-header .progress-step .label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-subtle);
    text-align: center;
}

.wizard-header .progress-step.active .label {
    color: var(--color-accent);
    font-weight: 600;
}

/* --- View Mode Toggle --- */
.view-mode-toggle {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px var(--color-shadow);
}

.toggle-label {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
}

.toggle-buttons {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem;
    background: var(--color-bg);
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
}

.toggle-btn {
    flex: 1;
    padding: 0.85rem 1.25rem;
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    background: transparent;
    color: var(--color-text);
    border: none;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.toggle-btn:hover {
    background: var(--color-accent-alpha-8);
}

.toggle-btn.active {
    background: var(--color-accent);
    color: white;
}

.mode-description {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--color-accent-alpha-5), var(--color-accent-alpha-2));
    border-radius: var(--border-radius-sm);
    border-left: 4px solid var(--color-accent-light);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-subtle);
}

.mode-description p {
    margin: 0;
}

.mode-description p {
    margin: 0;
}

/* --- Component Grid --- */
/* Week 5 fix: Match dish list card sizing */
.component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin: 0.5rem 0;
}

/* Align component grid with filter sidebar top in builder */
.builder-wizard .layout-main > .component-grid:first-child,
.builder-wizard .layout-main #availableComponentCards {
    margin-top: 0;
}

@media (max-width: 450px) {
    .component-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* --- Review Section --- */
.review-section {
    max-width: 1200px;
    margin: 2rem auto;
}

/* Review step cards - allow full width for 4+ cards */
.review-section .selected-components .component-grid {
    max-width: 100%;
}

.selected-components {
    margin-bottom: 2rem;
}

/* Existing Dish Notice */
.existing-dish-notice {
    margin: 0 0 2rem 0;
    padding: 1.5rem;
    background: var(--color-card);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 8px var(--color-shadow);
}

.existing-dish-content h3 {
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    color: var(--color-accent);
}

.dish-notice-description {
    margin: 0 0 1.25rem 0;
    padding: 1rem;
    background: var(--color-bg);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.6;
}

.dish-title-highlight {
    font-weight: 600;
    color: var(--color-accent);
}

.dish-extras-details {
    margin: 1rem 0;
}

.dish-extras-details summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-accent);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    list-style: none;
    user-select: none;
}

.dish-extras-details summary::-webkit-details-marker {
    display: none;
}

.dish-extras-details summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
}

.dish-extras-details[open] summary::before {
    transform: rotate(90deg);
}

.dish-extras-content {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--color-bg);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
}

.extras-section {
    margin-bottom: 0.75rem;
}

.extras-section:last-child {
    margin-bottom: 0;
}

.extras-section strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.extras-section ul {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
}

.extras-section li {
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.existing-dish-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.or-continue-text {
    font-size: 0.9rem;
    color: var(--color-subtle);
}

.review-variant-section {
    margin: 0.5rem 0;
    padding: 0.5rem 0;
}

.review-variant-section h3 {
    margin-top: 0;
    color: var(--color-accent);
}

.section-description {
    color: var(--color-subtle);
    margin-bottom: 0.75rem;
}

/* --- Make-Ahead Info Banner (Builder Review Step) --- */
.review-info-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: 1.5rem auto;
    max-width: 800px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    border-left: 4px solid var(--color-accent);
}

.review-info-banner .info-banner-icon {
    flex-shrink: 0;
    color: var(--color-accent);
}

.review-info-banner .info-banner-content {
    flex: 1;
    min-width: 0;
}

.review-info-banner .info-banner-content strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-heading);
}

.review-info-banner .info-banner-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-subtle);
}

.review-info-banner .button {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .review-info-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .review-info-banner .button {
        align-self: stretch;
        text-align: center;
    }
}

/* --- Make-Ahead Section (Builder Generated Page) --- */
.make-ahead-section {
    max-width: 800px;
    margin: 1.5rem auto;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    border-left: 4px solid var(--color-accent);
    overflow: hidden;
}

.make-ahead-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.make-ahead-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.make-ahead-header-content .info-banner-icon {
    flex-shrink: 0;
    color: var(--color-accent);
}

.make-ahead-header-content strong {
    display: block;
    color: var(--color-heading);
    margin-bottom: 0.15rem;
}

.make-ahead-header-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-subtle);
}

.make-ahead-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-accent);
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.15s;
}

.make-ahead-toggle:hover {
    background: var(--color-bg);
    border-color: var(--color-accent);
}

.make-ahead-toggle .toggle-icon {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.make-ahead-details {
    border-top: 1px solid var(--color-border);
    padding: 1rem 1.25rem;
    background: var(--color-bg);
}

.make-ahead-components {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.make-ahead-component {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
}

.make-ahead-component .component-info {
    flex: 1;
    min-width: 0;
}

.make-ahead-component .component-name {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    color: var(--color-heading);
}

.make-ahead-component .storage-info {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-subtle);
}

/* Use the standard component-servings-input-group styles */
.make-ahead-component .component-servings-input-group {
    flex-shrink: 0;
}

.make-ahead-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

@media (max-width: 600px) {
    .make-ahead-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .make-ahead-toggle {
        justify-content: center;
    }

    .make-ahead-component {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .make-ahead-component .component-servings-input-group {
        width: 100%;
        justify-content: flex-start;
    }
}

/* --- Make-Ahead Selection (Builder Review Step - Legacy) --- */
.make-ahead-selection-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.make-ahead-selection-item {
    display: flex;
    gap: 0.75rem;
    cursor: pointer;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

.make-ahead-selection-item:has(.make-ahead-checkbox:checked) {
    background: var(--color-success-light);
    border-color: var(--color-accent);
}

.make-ahead-selection-item .make-ahead-checkbox {
    margin-top: 0.2rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    flex-shrink: 0;
}

.make-ahead-selection-content {
    flex: 1;
}

.make-ahead-selection-title {
    font-weight: 600;
    color: var(--color-heading);
}

.make-ahead-selection-storage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-subtle);
    margin-top: 0.25rem;
}

.make-ahead-selection-storage svg {
    flex-shrink: 0;
}

.make-ahead-selection-notes {
    font-size: 0.85rem;
    color: var(--color-subtle);
    margin-top: 0.25rem;
}

/* --- Make-Ahead Legacy Styles (Weekly Builder) --- */
.make-ahead-card {
    border-left: 4px solid var(--color-accent);
}

.make-ahead-instructions {
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--color-card);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius-md);
}

.make-ahead-instructions h5 {
    margin: 0 0 0.5rem 0;
    color: var(--color-accent);
}

.make-ahead-instructions p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

.storage-info {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--color-accent);
    font-weight: 500;
    margin-left: 0.5rem;
}

.storage-info svg {
    flex-shrink: 0;
}

/* --- Make-Ahead Timeline Section --- */
.make-ahead-timeline-section {
    margin-bottom: 3rem;
    padding: 1.5rem;
    background: var(--color-info-light);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-lg);
}

.make-ahead-footer-note {
    margin-top: 1.5rem;
    padding: 1rem;
    background: white;
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    font-size: 0.95rem;
}

/* --- Reheat Card --- */
.reheat-card {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius-md);
}

.reheat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reheat-icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.reheat-header h4 {
    margin: 0;
    font-size: 1rem;
}

.reheat-time {
    font-size: 0.85rem;
    color: var(--color-subtle);
}

.reheat-instructions {
    margin: 0.5rem 0 0 2.75rem;
    font-size: 0.9rem;
    color: var(--color-text);
}

/* --- Make-Ahead Mode Selector --- */
.make-ahead-mode-selector {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.make-ahead-mode-selector .mode-option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.15s;
}

.make-ahead-mode-selector .mode-option:hover {
    background: var(--color-bg);
}

.make-ahead-mode-selector .mode-option input[type="radio"] {
    margin: 0;
    accent-color: var(--color-accent);
}

.reheat-info-hint {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--color-subtle);
}

/* --- Partial Finish Note --- */
.partial-finish-note {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-subtle);
    font-style: italic;
    border-left: 2px solid var(--color-border);
}

/* --- Wizard Navigation --- */
.wizard-navigation {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-header);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 8px var(--color-shadow);
    z-index: 100;
}

.wizard-navigation .nav-left,
.wizard-navigation .nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-next,
.btn-primary {
    padding: 0.6rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--color-accent);
    color: white;
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    margin-left: auto;
    transition: all 0.2s ease;
}

.btn-next:hover,
.btn-primary:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-1px);
}

.btn-outline {
    padding: 0.6rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-outline:hover {
    background: var(--color-accent);
    color: white;
    transform: translateY(-1px);
}

/* --- Nav Filter Button (mobile only, replaces FAB in builder) --- */
.nav-filter-btn {
    display: none; /* Hidden on desktop - sidebar is visible */
    align-items: center;
    gap: 0.35rem;
}

.nav-filter-btn svg {
    flex-shrink: 0;
}

.nav-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--color-accent);
    color: white;
    border-radius: 999px;
}

/* --- Builder Component Cards --- */
.builder-wizard .component-grid .card {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.builder-wizard .component-grid .card.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-alpha-15);
}

.builder-wizard .component-grid .card:hover {
    transform: translateY(-2px);
}

/* Selection indicator for builder cards */
.builder-wizard .component-grid .card.selected::after {
    content: '✓';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Layout main section */
.layout-main h2,
.layout-main h3 {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.layout-main h3:first-child {
    margin-top: 0;
}

/* --- Collapsible Selected Section --- */
.selected-section-collapsible {
    margin-bottom: 0.5rem;
}

.selected-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    text-align: left;
    font: inherit;
    color: inherit;
}

.selected-section-toggle h3 {
    margin: 0.5rem 0;
}

.selected-section-chevron {
    display: none;
}

/* Selected components grid styling */
#selectedComponentCards {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-border);
}

/* Hide border and spacing when no components selected */
#selectedComponentCards:empty {
    display: none;
}

/* Ensure content is not hidden behind sticky wizard navigation */
.builder-wizard .layout-main {
    padding-bottom: 80px;
}

.builder-wizard .review-section {
    padding-bottom: 80px;
}

/* Compact info box for returning users */
.page-info-box.compact {
    padding: 0.25rem 1rem;
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

.page-info-box.compact .info-toggle-link {
    margin: 0;
    font-size: 0.85rem;
    padding: 0.4rem 0.85rem;
}

/* Review mode adjustments */
.review-section .component-grid .card {
    cursor: default;
}

.review-section .component-grid .card:hover {
    transform: none;
}

/* ======================
   BUILDER COMPONENT CARDS
   Cards used in wizard component selection
   ====================== */

/* --- Builder Card Container --- */
.builder-card {
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 8px var(--color-shadow);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Ensure clickable appearance */
.builder-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-shadow-hover);
}

.builder-card.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-alpha-15);
}

/* Selected cards in the available grid - grayed out appearance */
#availableComponentCards .builder-card.selected {
    opacity: 0.55;
    border-color: var(--color-border);
    box-shadow: none;
    position: relative;
}

#availableComponentCards .builder-card.selected::after {
    content: '✓ Valgt';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    z-index: 10;
}

#availableComponentCards .builder-card.selected:hover {
    opacity: 0.75;
    transform: none;
    box-shadow: none;
}

#availableComponentCards .builder-card.selected .builder-card-image {
    filter: grayscale(40%);
}

/* Season indicator for builder cards */
.builder-card.card--in-season {
    border: 2px solid var(--color-accent);
}

/* Store-bought indicator for builder cards */
.builder-card.card--store-bought {
    border: 2px dashed var(--color-subtle);
}

/* Suggested card for first-time users */
.builder-card.suggested {
    border-color: var(--color-accent);
    position: relative;
    animation: suggestedPulse 2s ease-in-out infinite;
}

.builder-card.suggested::before {
    content: 'Anbefalt';
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    z-index: 10;
}

@keyframes suggestedPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--color-accent-alpha-40);
    }
    50% {
        box-shadow: 0 0 0 6px transparent;
    }
}

/* --- First-Time Suggestion Hint --- */
.first-time-suggestion {
    background: linear-gradient(135deg, var(--color-accent-alpha-8), var(--color-accent-alpha-5));
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.suggestion-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.suggestion-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.suggestion-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.4;
}

.suggestion-dismiss {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-subtle);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.suggestion-dismiss:hover {
    color: var(--color-text);
}

@media (max-width: 600px) {
    .suggestion-content {
        flex-wrap: wrap;
    }

    .suggestion-text {
        width: calc(100% - 3rem);
    }
}

/* --- Builder Card Image --- */
/* Week 5 fix: Match list card aspect ratio */
.builder-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* Was 3/2 - now matches list cards */
    overflow: hidden;
    background: var(--color-bg);
}

.builder-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.builder-card-image .card-placeholder-image {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
}

/* --- Builder Card Body --- */
.builder-card-body {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    flex: 1;
}

.builder-card-title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    line-height: 1.3;
}

/* --- Builder Card Meta (Time Badges) --- */
.builder-card-meta {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.time-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-pill);
    font-size: 0.7rem;
    color: var(--color-text);
    white-space: nowrap;
}

/* --- Builder Card Badges --- */
.builder-card-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

/* Add spacing for card badges in builder cards */
.builder-card-body .card-badges-container {
    margin-bottom: 0.75rem;
}
/* --- Builder Action Button --- */
.btn-builder-action {
    width: 100%;
    padding: 0.6rem 0.875rem;
    margin-top: auto;
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    font-weight: 600;
    background: transparent;
    color: var(--color-accent);
    border: 2.5px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-builder-action:hover {
    background: var(--color-accent);
    color: white;
    transform: translateY(-1px);
}

/* Remove button - subtle/muted style */
.btn-builder-action.btn-remove {
    background: transparent;
    color: var(--color-subtle);
    border-color: var(--color-border);
}

.btn-builder-action.btn-remove:hover {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-subtle);
}

/* --- All Selected Message --- */
.all-selected-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-subtle);
}

.all-selected-message p {
    margin: 0;
    font-size: 1rem;
}

.all-selected-message .all-selected-hint {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-style: italic;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    /* Full width containers on mobile */
    .builder-container {
        padding: 0 0.375rem;
    }

    .builder-wizard {
        padding: 0 0.375rem 1rem;
    }

    .builder-start {
        padding: 0 0.375rem;
    }

    .wizard-header .progress-bar {
        padding: 1rem 0.5rem;
    }

    .wizard-header .progress-step .label {
        font-size: 0.75rem;
    }

    .wizard-header .progress-step .number {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }

    .toggle-buttons {
        flex-direction: column;
    }

    .component-grid {
        grid-template-columns: repeat(2, 1fr); /* Week 5 fix: 2 columns on mobile, not 1 */
        gap: 0.375rem;
    }

    .wizard-navigation {
        flex-direction: column;
        padding: 0.75rem 0.5rem;
    }

    /* Collapsible selected section on mobile */
    .selected-section-toggle {
        cursor: pointer;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 0.5rem;
    }

    .selected-section-chevron {
        display: flex;
        align-items: center;
        color: var(--color-subtle);
        transition: transform 0.2s ease;
    }

    .selected-section-toggle[aria-expanded="true"] .selected-section-chevron {
        transform: rotate(180deg);
    }

    .selected-section-content.collapsed {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease;
        margin: 0;
        padding: 0;
    }

    .selected-section-content:not(.collapsed) {
        max-height: 2000px;
        opacity: 1;
        transition: max-height 0.3s ease, opacity 0.2s ease;
    }

    /* More bottom padding for taller mobile nav */
    .builder-wizard .layout-main {
        padding-bottom: 140px;
    }

    .builder-wizard .review-section {
        padding-bottom: 140px;
    }

    /* Hide floating FAB and quick filter chips in builder - filter access is in nav bar */
    .builder-wizard .mobile-filter-fab,
    .builder-wizard .mobile-quick-filters {
        display: none !important;
    }

    /* Filter button in nav bar - mobile only */
    .nav-filter-btn {
        display: inline-flex !important;
    }

    /* Nav-right: Filtre + Neste share a row */
    .wizard-navigation .nav-right {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 0.5rem;
    }

    .wizard-navigation .nav-right .btn-next {
        flex: 1;
        margin-left: 0;
    }

    .wizard-navigation .nav-right .btn-primary {
        margin-left: 0;
        width: 100%;
    }

    .builder-card-image {
        aspect-ratio: 4 / 3; /* Week 5 fix: Consistent aspect ratio */
    }

    .builder-card-body {
        padding: 0.625rem;
    }

    .builder-card-title {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
    }

    .builder-card-meta {
        gap: 0.3rem;
        margin-bottom: 0.4rem;
    }

    .time-badge-small {
        padding: 0.15rem 0.4rem;
        font-size: 0.7rem;
    }

    .builder-card-badges {
        margin-bottom: 0.5rem;
        gap: 0.3rem;
    }

    .btn-builder-action {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    /* Occasion cards mobile - larger images */
    .occasion-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .occasion-image-wrapper {
        margin-bottom: 0.4rem;
    }

    .occasion-title {
        font-size: 0.9rem;
    }

    .occasion-description {
        font-size: 0.75rem;
    }

    /* Occasion cards in horizontal scroll - larger */
    .featured-occasions .occasion-card-wrapper,
    .occasion-row .occasion-card-wrapper {
        flex: 0 0 calc(55% - 0.375rem); /* Show ~1.8 cards - bigger images */
    }

    .btn-start-over {
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }

    .btn-start-over span {
        display: none;
    }

    /* View mode toggle mobile */
    .view-mode-toggle {
        padding: 1rem;
        margin: 1rem 0;
    }

    .toggle-label {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .toggle-btn {
        padding: 0.65rem 0.85rem;
        font-size: 0.85rem;
    }

    .mode-description {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    /* Level selector mobile */
    .level-selector-description {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .step-level-tab {
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }

    .step-level-tab .tab-text {
        font-size: 0.85rem;
    }

    /* Review sections - reduce vertical spacing */
    .review-variant-section {
        margin: 0.25rem 0;
        padding: 0.25rem 0;
    }

    .review-variant-section h3 {
        margin-bottom: 0.25rem;
        font-size: 1.1rem;
    }

    .review-section {
        padding: 0;
    }

    .section-description {
        margin-bottom: 0.75rem;
    }

    .existing-dish-notice {
        padding: 1rem;
        margin: 0 0 1.5rem 0;
    }

    /* Component servings section - tighter on mobile */
    .component-servings-section .section-toggle {
        padding: 0.75rem;
    }

    .component-servings-section .section-content {
        padding: 0 0.75rem 0.75rem;
    }
}

/* Hide floating FAB in builder on tablet too */
@media (max-width: 1023px) and (min-width: 769px) {
    .builder-wizard .mobile-filter-fab {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Horizontal scrollable stepper on mobile */
    .wizard-header .progress-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 0.5rem 0.25rem;
        scrollbar-width: none;
    }

    .wizard-header .progress-bar::-webkit-scrollbar {
        display: none;
    }

    .wizard-header .progress-step {
        flex: 0 0 auto;
        min-width: 56px;
        gap: 0.25rem;
        padding: 0.25rem 0.125rem;
    }

    .wizard-header .progress-step:not(:last-child)::after {
        display: block;
        top: 14px;
    }

    .wizard-header .progress-step .number {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .wizard-header .progress-step .label {
        font-size: 0.65rem;
        white-space: nowrap;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Builder cards extra compact - Week 5 fix: Consistent aspect ratio */
    .builder-card-image {
        aspect-ratio: 4 / 3; /* Was 16/9 - now consistent */
    }

    .builder-card-body {
        padding: 0.375rem;
    }

    .builder-card-title {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    .builder-card-meta {
        margin-bottom: 0.25rem;
    }

    .time-badge-small {
        font-size: 0.65rem;
        padding: 0.1rem 0.3rem;
    }

    .builder-card-badges {
        margin-bottom: 0.35rem;
        gap: 0.25rem;
    }

    .btn-builder-action {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Occasion cards - tighter spacing on small screens */
    .occasion-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
    }

    .occasion-image-wrapper {
        aspect-ratio: 4 / 3;
    }

    .occasion-title {
        font-size: 0.85rem;
    }

    .occasion-description {
        display: none;
    }

    .placeholder-icon {
        width: 32px;
        height: 32px;
    }
}

/* --- Equipment Conflict Warnings --- */
.timeline-conflicts,
.timeline-parallel-tasks {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--color-surface, #fff);
    border-radius: 8px;
    border-left: 4px solid var(--color-warning, #ffc107);
}

.timeline-parallel-tasks {
    border-left-color: var(--color-info, #17a2b8);
}

.timeline-conflicts h4,
.timeline-parallel-tasks h4 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--color-text, #333);
}

.conflicts-intro,
.parallel-intro {
    margin: 0 0 1rem;
    color: var(--color-text-secondary, #666);
    font-size: 0.95rem;
}

.conflict-warning,
.parallel-suggestion {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    margin: 0.75rem 0;
    background: var(--color-warning-light, #fffbeb);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-warning, #fde68a);
}

.parallel-suggestion {
    background: var(--color-info-light);
    border-color: var(--color-info);
}

.conflict-icon,
.parallel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.6rem;
    background: var(--color-warning);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.parallel-icon {
    background: var(--color-info);
}

.conflict-content,
.parallel-content {
    flex: 1;
}

.conflict-message,
.parallel-message {
    margin: 0 0 0.5rem;
    color: var(--color-text, #333);
    font-size: 0.95rem;
}

.conflict-details,
.parallel-details {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    color: var(--color-text-secondary, #666);
    font-size: 0.9rem;
}

.conflict-details li,
.parallel-details li {
    margin: 0.25rem 0;
}

.conflict-suggestion {
    margin: 0.75rem 0 0;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--color-text-secondary, #666);
}

/* --- Variant Badges and Indicators --- */

/* Variant badges container */
.variant-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Variant badge styling */
.variant-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/* Dietary variant badge (accent green) */
.variant-badge-dietary {
    background: var(--color-success-light);
    color: var(--color-accent-dark);
    border: 1px solid var(--color-accent-light);
}

/* Flavor variant badge (info blue) */
.variant-badge-flavor {
    background: var(--color-info-light);
    color: var(--color-info);
    border: 1px solid var(--color-info);
}

/* Recommended badge (gold/yellow) */
.variant-badge-recommended {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

/* Optional variant badge (subtle gray) */
.variant-badge-optional {
    background: var(--color-bg);
    color: var(--color-subtle);
    border: 1px solid var(--color-border);
}

/* Variant notices styling improvements */
.variant-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.variant-notice .notice-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.dietary-notice {
    background: var(--color-info-light);
    border: 1px solid var(--color-info);
    color: var(--color-info);
}

.recommendation-notice {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning-text);
}

/* Improve variant selector dropdown */
.variant-select {
    width: 100%;
    padding: 0.6rem;
    font-size: 0.95rem;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-card);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.variant-select:hover {
    border-color: var(--color-accent-light);
}

.variant-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-alpha-10);
}

/* Style for select options (limited browser support) */
.variant-select option[data-importance="dietary"] {
    font-weight: 600;
}

.variant-select option[data-is-recommended="true"] {
    font-weight: 500;
}


/* --- Ingredient Choice UI  --- */

.ingredient-choices-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.ingredient-choice-item {
    padding: 1.25rem;
    background: var(--color-card);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
}

.ingredient-choice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.ingredient-choice-header strong {
    font-size: 1.1rem;
    color: var(--color-text);
}

.has-recipe-badge {
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    background: var(--color-info-light);
    color: var(--color-info);
    border-radius: 12px;
    border: 1px solid var(--color-info);
}

.ingredient-choice-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.choice-option {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-card);
    cursor: pointer;
    transition: all 0.2s ease;
}

.choice-option:hover {
    border-color: var(--color-accent-light);
    background: var(--color-bg);
}

.choice-option.active {
    border-color: var(--color-accent);
    background: var(--color-success-light);
}

.choice-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
}

.choice-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.choice-text {
    flex: 1;
}

.choice-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.choice-description {
    font-size: 0.9rem;
    color: var(--color-subtle);
    line-height: 1.4;
}

.choice-description a {
    color: var(--color-accent);
    text-decoration: underline;
}

.choice-description a:hover {
    color: var(--color-accent-dark);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .ingredient-choice-options {
        grid-template-columns: 1fr;
    }

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

/* --- Ingredient References in Steps --- */

.ingredient-ref {
    font-weight: 600;
}

/* ======================
   LIVE PREVIEW PANEL - REMOVED (Week 5 user testing feedback)
   The "Din rett" popup was removed as users found it redundant
   with the selected components shown at the top of the page.
   Keeping commented out for potential future reference.
   ====================== */

/* ======================
   MOBILE TOUCH IMPROVEMENTS
   ====================== */

@media (max-width: 768px) {
    /* Touch-friendly builder card buttons */
    .builder-card-actions button,
    .builder-card-actions .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem;
    }

    /* Larger tap targets for component selection */
    .builder-card {
        min-height: 100px;
    }

    .builder-card .card-select-overlay {
        min-height: 44px;
    }

    /* Touch-friendly servings controls */
    .servings-control button,
    .servings-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.25rem;
    }

    .servings-input {
        min-height: 44px;
        font-size: 1.1rem;
        text-align: center;
    }

    /* Touch-friendly skill level tabs */
    .step-level-tab {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    /* Progress bar - visual indicators, not tappable */
    .wizard-header .progress-step {
        min-height: auto;
        padding: 0.25rem;
    }

    /* Occasion cards - easier to tap */
    .occasion-card {
        min-height: 80px;
        padding: 1rem;
    }

    /* Role filter chips */
    .role-chip,
    .filter-chip {
        min-height: 40px;
        padding: 0.5rem 1rem;
    }

    /* Generate/action buttons */
    .btn-generate,
    .btn-primary-large {
        min-height: 52px;
        font-size: 1rem;
        padding: 1rem 2rem;
    }

    /* Variant selector options */
    .variant-option,
    .variant-selector-option {
        min-height: 48px;
        padding: 0.75rem 1rem;
    }
}

/* Extra small screens (320px - iPhone SE) */
@media (max-width: 360px) {
    /* Maximize horizontal space */
    .builder-container,
    .builder-wizard,
    .builder-start {
        padding: 0 0.25rem;
    }

    /* Keep 2 columns but with minimal gap */
    .component-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem;
    }

    /* Compact builder cards */
    .builder-card {
        border-radius: var(--border-radius-sm);
    }

    .builder-card-body {
        padding: 0.25rem;
    }

    .builder-card-title {
        font-size: 0.8rem;
    }

    /* Progress bar - tighter horizontal stepper */
    .wizard-header .progress-step .number {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    .wizard-header .progress-step .label {
        font-size: 0.6rem;
        max-width: 52px;
    }

    .wizard-header .progress-step:not(:last-child)::after {
        top: 12px;
    }

    /* Compact action buttons */
    .btn-generate,
    .btn-primary-large {
        padding: 0.625rem 0.875rem;
        font-size: 0.85rem;
    }

    .wizard-navigation {
        padding: 0.5rem 0.375rem;
    }

    .occasion-grid {
        gap: 0.25rem;
    }
}


/* ======================
   STEP GUIDANCE
   Text displayed below step headings
   ====================== */

.step-guidance-text {
    color: var(--color-subtle);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
    max-width: 600px;
}

.role-guidance-text {
    color: var(--color-subtle);
    font-size: 0.875rem;
    line-height: 1.4;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}


/* ======================
   INGREDIENT SELECTION PANEL
   For steps with ingredient mode
   ====================== */

.ingredient-selection-panel {
    padding: 0;
    margin-bottom: 1rem;
}

.ingredient-selection-header h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    color: var(--color-heading);
}

.ingredient-selection-content {
    margin-top: 0.25rem;
}

/* Role group within ingredient selection */
.ingredient-role-group {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.ingredient-role-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.role-group-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 0.5rem 0;
}

/* Ingredient suggestions list */
.ingredient-suggestions-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

/* Individual ingredient suggestion item */
.ingredient-suggestion-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 0.75rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ingredient-suggestion-item:hover {
    border-color: var(--color-accent-light);
}

.ingredient-suggestion-item.selected {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-accent-alpha-5), var(--color-accent-alpha-2));
    box-shadow: 0 0 0 2px var(--color-accent-alpha-10);
}

/* Checkbox label */
.ingredient-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.ingredient-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    margin-top: 2px;
}

.ingredient-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

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

.ingredient-quantity {
    font-size: 0.85rem;
    color: var(--color-subtle);
}

/* Selection summary */
.ingredient-selection-summary {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-count {
    font-size: 0.9rem;
    color: var(--color-subtle);
}

#ingredientCount {
    font-weight: 600;
    color: var(--color-accent);
}


/* Responsive styles for ingredient selection */
@media (max-width: 640px) {
    .ingredient-selection-panel {
        padding: 1rem;
    }

    .ingredient-suggestions-list {
        grid-template-columns: 1fr;
    }

    .ingredient-suggestion-item {
        padding: 0.625rem 0.875rem;
    }
}


/* ======================
   TILBEHØR SECTION
   Direct ingredient selections
   ====================== */

.tilbehor-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.tilbehor-section h3 {
    margin-bottom: 0.5rem;
}

.tilbehor-section .section-note {
    font-size: 0.875rem;
    color: var(--color-subtle);
    font-style: italic;
    margin-bottom: 1rem;
}

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

.tilbehor-list .check-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.tilbehor-list .check-item:last-child {
    border-bottom: none;
}

.tilbehor-list .ingredient-amount {
    min-width: 80px;
    color: var(--color-subtle);
    font-size: 0.9rem;
}

.tilbehor-list .ingredient-link {
    color: var(--color-text);
    text-decoration: none;
}

.tilbehor-list .ingredient-link:hover {
    text-decoration: underline;
    background: transparent;
}

/* ======================
   FIRST-TIME USER BANNER
   ====================== */

.first-time-banner {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg));
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-md, 8px);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.first-time-banner .banner-content p {
    margin: 0;
    color: var(--color-text);
    font-size: 0.95rem;
}

.first-time-banner .banner-dismiss {
    color: var(--color-accent);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.first-time-banner .banner-dismiss:hover {
    color: var(--color-accent-dark);
}

/* Start page tutorial banner */
.first-time-banner--start {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 2rem;
    margin: 1.5rem auto;
    max-width: 600px;
}

.first-time-banner--start .first-time-banner__text {
    text-align: center;
    margin-bottom: 1.25rem;
}

.first-time-banner__text strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-heading);
    font-size: 1.1rem;
}

.first-time-banner__text span {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.first-time-banner__text em {
    font-style: normal;
    font-weight: 600;
    color: var(--color-accent);
}

.first-time-banner__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.first-time-banner--start .btn-link {
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* Icon styles for banners that use them (review step) */
.first-time-banner__content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.first-time-banner__icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.first-time-banner__content .first-time-banner__text {
    text-align: left;
}

/* Review step tutorial banner */
.first-time-banner--review {
    margin-bottom: 1.5rem;
}

.first-time-banner--review .first-time-banner__content {
    margin-bottom: 0;
}

/* ======================
   SIGNUP PROMPT MODAL
   ====================== */

.signup-prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.signup-prompt-modal {
    background: var(--color-card);
    border-radius: var(--border-radius-lg, 12px);
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.signup-prompt-modal h3 {
    margin: 0 0 0.75rem 0;
    color: var(--color-heading);
    font-size: 1.25rem;
}

.signup-prompt-modal p {
    margin: 0 0 1.5rem 0;
    color: var(--color-text);
    line-height: 1.5;
}

.signup-prompt-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.signup-prompt-actions .btn {
    flex: 1;
    max-width: 150px;
}

.signup-prompt-close {
    background: none;
    border: none;
    color: var(--color-subtle);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.5rem;
}

.signup-prompt-close:hover {
    color: var(--color-text);
}

/* ======================
   HIGHLIGHTED BUTTON
   For first-time users
   ====================== */

.btn-primary.highlighted,
.wizard-actions .btn-primary.highlighted {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
    animation: subtle-pulse 2s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 15%, transparent);
    }
}

/* ======================
   COMPONENT SERVINGS
   Per-component portion overrides
   ====================== */

.component-servings-section {
    overflow: hidden;
}

.component-servings-section .section-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    gap: 0.75rem;
}

.component-servings-section .section-toggle:hover {
    background: color-mix(in srgb, var(--color-border) 30%, transparent);
}

.component-servings-section .section-toggle-header {
    /* No flex: 1 - let it size naturally for centering */
}

.component-servings-section .section-toggle-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-heading);
}

.component-servings-section .section-toggle-hint {
    display: block;
    font-size: 0.85rem;
    color: var(--color-subtle);
    margin-top: 0.25rem;
}

.component-servings-section .section-toggle-icon {
    flex-shrink: 0;
    color: var(--color-subtle);
    transition: transform 0.2s ease;
}

.component-servings-section .section-toggle[aria-expanded="true"] .section-toggle-icon {
    transform: rotate(180deg);
}

.component-servings-section .section-content {
    padding: 0 1rem 1rem;
}

.component-servings-section .section-description {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--color-subtle);
}

/* Component servings list */
.component-servings-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.component-servings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.component-servings-row:last-child {
    border-bottom: none;
}

.component-servings-name {
    flex: 1;
    font-size: 0.95rem;
    color: var(--color-text);
}

.component-servings-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.component-servings-input-group .servings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.15s ease;
}

.component-servings-input-group .servings-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.component-servings-input-group .servings-btn:active {
    transform: scale(0.95);
}

.component-servings-input {
    width: 60px;
    height: 32px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    background: var(--color-bg);
    color: var(--color-text);
}

.component-servings-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.component-servings-input-group .servings-label {
    font-size: 0.85rem;
    color: var(--color-subtle);
    min-width: 60px;
}

/* Reset button */
.btn-reset-component-servings {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    font-size: 0.85rem;
    color: var(--color-subtle);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-reset-component-servings:hover {
    background: var(--color-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-reset-component-servings svg {
    flex-shrink: 0;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .component-servings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .component-servings-input-group {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ======================
   BUILDER NUTRITION
   ====================== */

/* Nutrition toggle in footer navigation */
.nutrition-nav-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nutrition-nav-toggle.active {
    color: var(--color-accent);
}

.nutrition-nav-toggle.active svg {
    stroke: var(--color-accent);
}

/* Nutrition panel - shown above selected components when toggled */
.builder-nutrition-panel {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius, 8px);
}

.builder-nutrition-panel.hidden {
    display: none;
}

/* Empty/error states */
.builder-nutrition-panel .nutrition-empty,
.builder-nutrition-panel .nutrition-error {
    font-size: 0.85rem;
    color: var(--color-subtle);
    text-align: center;
    padding: 0.5rem;
}

.builder-nutrition-panel .nutrition-error {
    color: var(--color-error, #c53030);
}


/* ======================
   GENERATED PAGE LAYOUT IMPROVEMENTS
   Scoped to .generated-page to avoid affecting shared includes
   ====================== */

/* --- Desktop tightening --- */
.generated-page .page-info-box {
    margin-bottom: 0.75rem;
}

.generated-page .timeline-mode-section {
    margin-bottom: 1rem;
}

/* --- Shopping list section --- */
.shopping-list-section {
    margin-bottom: 1.5rem;
}

.shopping-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.shopping-category-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
}

.shopping-category-card.pantry {
    opacity: 0.8;
}

.shopping-category-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-subtle);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.shopping-items-simple {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shopping-items-simple li {
    padding: 0.25rem 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

/* Pantry section */
.shopping-pantry-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.pantry-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.6rem 1rem;
}

.pantry-toggle:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.pantry-toggle .chevron-icon {
    transition: transform 0.3s ease;
}

.pantry-toggle[aria-expanded="false"] .chevron-icon {
    transform: rotate(-90deg);
}

.pantry-items-content {
    transition: max-height 0.3s ease, opacity 0.2s ease;
    overflow: hidden;
}

.pantry-items-content.collapsed {
    max-height: 0 !important;
    opacity: 0;
    padding: 0;
}

.shopping-grid.pantry {
    margin-top: 0.75rem;
}

@media (max-width: 900px) {
    .shopping-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .shopping-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Action buttons --- */
.generated-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1.5rem;
}

/* --- Mobile: Horizontal scroll component cards --- */
@media (max-width: 600px) {
    .generated-page .card-grid.summary {
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding: 0.25rem 0 0.5rem;
    }

    .generated-page .card-grid.summary .card {
        flex: 0 0 28%;
        scroll-snap-align: start;
        min-width: 95px;
    }

    .generated-page .card-grid.mini {
        display: flex;
        overflow-x: auto;
        gap: 0.375rem;
    }

    .generated-page .card-grid.mini .card {
        flex: 0 0 80px;
        scroll-snap-align: start;
    }

    /* Subtle scrollbar */
    .generated-page .card-grid.summary::-webkit-scrollbar,
    .generated-page .card-grid.mini::-webkit-scrollbar {
        height: 3px;
    }

    .generated-page .card-grid.summary::-webkit-scrollbar-track,
    .generated-page .card-grid.mini::-webkit-scrollbar-track {
        background: var(--color-border);
        border-radius: 2px;
    }

    .generated-page .card-grid.summary::-webkit-scrollbar-thumb,
    .generated-page .card-grid.mini::-webkit-scrollbar-thumb {
        background: var(--color-subtle);
        border-radius: 2px;
    }

    /* --- Compact make-ahead banner --- */
    .generated-page .make-ahead-header-content p {
        display: none;
    }

    .generated-page .make-ahead-header {
        padding: 0.75rem 1rem;
    }

    .generated-page .make-ahead-section {
        margin: 0.75rem auto;
    }

    /* --- Compact timeline toggle --- */
    .generated-page .timeline-mode-section {
        padding: 0.5rem 0;
        margin-bottom: 0.75rem;
    }

    .generated-page .timeline-mode-section h3 {
        margin: 0 0 0.5rem 0;
        font-size: 1rem;
    }

    .generated-page .timeline-mode-toggle .toggle-option {
        padding: 8px 12px;
        min-width: 110px;
    }

    .generated-page .timeline-mode-toggle .toggle-desc {
        font-size: 0.7rem;
    }

    .generated-page .smart-merge-disclaimer {
        margin: 0.5rem 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.78rem;
    }

    .generated-page .timeline-mode-section .info-toggle-link {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
        margin-top: 0.25rem;
    }

    /* --- Tighter tips --- */
    .generated-page .recipe-tip {
        padding: 0.5rem 1rem 0.5rem 1.25rem;
        margin: 0.5rem 0;
        font-size: 0.9rem;
    }

    .generated-page .recipe-tip p {
        margin: 0 0 0.25rem 0;
    }

    /* --- Action buttons: full-width stack --- */
    .generated-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .generated-actions .button {
        width: 100%;
        text-align: center;
    }
}