/* /Components/Account/Shared/AccountLayout.razor.rz.scp.css */
/* ==========================================================================
   AccountLayout — Centers auth content in a clean themed container
   ========================================================================== */

.auth-container[b-029quy71oq] {
    max-width: 480px;
    margin: var(--space-8) auto;
}

/* Override Bootstrap form elements within auth pages to use theme tokens */
.auth-container[b-029quy71oq]  h1 {
    text-align: center;
    margin-bottom: var(--space-6);
}

.auth-container[b-029quy71oq]  h2 {
    font-size: 1rem;
    color: var(--color-text-secondary);
    font-weight: 400;
    text-align: center;
    margin-bottom: var(--space-4);
}

.auth-container[b-029quy71oq]  hr {
    border-color: var(--color-border-subtle);
    margin: var(--space-4) 0;
}

.auth-container[b-029quy71oq]  .form-floating {
    margin-bottom: var(--space-4);
}

.auth-container[b-029quy71oq]  .form-control {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
}

.auth-container[b-029quy71oq]  .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.auth-container[b-029quy71oq]  .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    font-weight: 500;
    padding: var(--space-3) var(--space-5);
    font-family: inherit;
    transition: background-color 200ms ease;
}

.auth-container[b-029quy71oq]  .btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.auth-container[b-029quy71oq]  a {
    color: var(--color-primary);
}

.auth-container[b-029quy71oq]  .text-danger {
    color: var(--color-error) !important;
    font-size: 0.8125rem;
}

/* Hide the external login column on these scaffolded pages */
.auth-container[b-029quy71oq]  .col-md-6.col-md-offset-2 {
    display: none;
}

/* Make the form column full-width since we hid the external login section */
.auth-container[b-029quy71oq]  .col-md-4 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* ==========================================================================
   ManageLayout — Account management pages
   ========================================================================== */

.manage-layout[b-msqucxzuka] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-6);
    align-items: start;
}

.manage-nav[b-msqucxzuka] {
    position: sticky;
    top: var(--space-8);
}

.manage-content[b-msqucxzuka] {
    min-width: 0;
}

/* Override parent auth-container max-width for manage pages */
[b-msqucxzuka] .auth-container {
    max-width: 720px;
}

@media (max-width: 767px) {
    .manage-layout[b-msqucxzuka] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .manage-nav[b-msqucxzuka] {
        position: static;
    }
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* ==========================================================================
   ManageNavMenu — Scoped styles for account management sidebar nav
   ========================================================================== */

.manage-nav-menu[b-ymbqldpqte] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.manage-nav-menu[b-ymbqldpqte]  .manage-nav-link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 150ms ease, color 150ms ease;
}

.manage-nav-menu[b-ymbqldpqte]  .manage-nav-link:hover {
    background-color: var(--color-primary-subtle);
    color: var(--color-text);
}

.manage-nav-menu[b-ymbqldpqte]  .manage-nav-link.active {
    background-color: var(--color-primary-subtle);
    color: var(--color-primary);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   MainLayout — Top navigation + main content area
   Reference: PRD-003 Section 3.2, Aesthetics Bible Section 7.6
   ========================================================================== */

.page[b-cm6libt5p0] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-cm6libt5p0] {
    flex: 1;
}

.content[b-cm6libt5p0] {
    padding-top: var(--space-8);
    padding-bottom: var(--space-12);
}

/* --------------------------------------------------------------------------
   Blazor error boundary
   -------------------------------------------------------------------------- */

#blazor-error-ui[b-cm6libt5p0] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-cm6libt5p0] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   NavMenu — Horizontal top navigation bar
   Reference: Aesthetics Bible Section 7.6, PRD-003 Section 3.2
   ========================================================================== */

.top-nav[b-qi7b9edltq] {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-1);
}

.nav-inner[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    height: 56px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    gap: var(--space-2);
}


/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

.nav-brand[b-qi7b9edltq] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    margin-right: var(--space-6);
}

.nav-brand:hover[b-qi7b9edltq] {
    color: var(--color-primary-hover);
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   Navigation Links
   -------------------------------------------------------------------------- */

.nav-links[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
}

.nav-links[b-qi7b9edltq]  .nav-link-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border-bottom: 2px solid transparent;
    transition: color 200ms ease, background-color 200ms ease;
    white-space: nowrap;
}

.nav-links[b-qi7b9edltq]  .nav-link-item i {
    font-size: 20px;
}

.nav-links[b-qi7b9edltq]  .nav-link-item:hover {
    color: var(--color-text);
    background-color: var(--color-primary-subtle);
    text-decoration: none;
}

.nav-links[b-qi7b9edltq]  .nav-link-item.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   Right-side items (user, swatches, version)
   -------------------------------------------------------------------------- */

.nav-right[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.nav-user[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    transition: color 200ms ease;
    white-space: nowrap;
}

.nav-user:hover[b-qi7b9edltq] {
    color: var(--color-text);
    text-decoration: none;
}

.nav-user i[b-qi7b9edltq] {
    font-size: 18px;
}

.nav-user-name[b-qi7b9edltq] {
    white-space: nowrap;
}

.nav-logout[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    font-size: 18px;
    transition: color 200ms ease;
}

.nav-logout:hover[b-qi7b9edltq] {
    color: var(--color-error);
}


/* --------------------------------------------------------------------------
   Theme Swatches (Task 124 / Task 155 — touch-target fix)
   Intentionally understated — functional but almost an easter egg.
   The visible dot is small, but the tappable area meets min touch-target
   guidelines (44px) by using padding to enlarge the hit region.
   -------------------------------------------------------------------------- */

.theme-swatches[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    max-width: 220px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.theme-swatch[b-qi7b9edltq] {
    /* Keep compact footprint in desktop header while preserving usability. */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-clip: content-box;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 7px;

    -webkit-tap-highlight-color: transparent;
    position: relative;
    transition: transform 150ms ease, border-color 150ms ease;
}

.theme-swatch:hover[b-qi7b9edltq] {
    transform: scale(1.25);
}

.theme-swatch--active[b-qi7b9edltq] {
    border-color: var(--color-text);
    transform: scale(1.15);
}

/* Keep larger touch targets on touch-first devices. */
@media (hover: none), (pointer: coarse) {
    .theme-swatch[b-qi7b9edltq] {
        width: 40px;
        height: 40px;
    }
}


/* --------------------------------------------------------------------------
   Version badge
   -------------------------------------------------------------------------- */

.nav-version[b-qi7b9edltq] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    opacity: 0.6;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Mobile hamburger
   -------------------------------------------------------------------------- */

.nav-hamburger[b-qi7b9edltq] {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: var(--space-2);
    margin-left: auto;
    font-size: 24px;
    -webkit-tap-highlight-color: transparent;
}


/* --------------------------------------------------------------------------
   Mobile responsive (< 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .nav-hamburger[b-qi7b9edltq] {
        display: flex;
    }

    .nav-links[b-qi7b9edltq] {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-2);
        padding: var(--space-2) 0;
        gap: 0;
    }

    .nav-links--open[b-qi7b9edltq] {
        display: flex;
    }

    .nav-links[b-qi7b9edltq]  .nav-link-item {
        padding: var(--space-3) var(--space-6);
        border-bottom: none;
        border-radius: 0;
        width: 100%;
    }

    .nav-right[b-qi7b9edltq] {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-2);
        padding: var(--space-3) var(--space-6);
        gap: var(--space-3);
        margin-left: 0;
    }

    .nav-right--open[b-qi7b9edltq] {
        display: flex;
        /* Stack below nav-links */
        top: auto;
    }

    .theme-swatches[b-qi7b9edltq] {
        padding: var(--space-2) 0;
    }

    .nav-user-name[b-qi7b9edltq] {
        display: inline;
    }
}

/* Hide nav when printing (e.g. recipe modal print) */
@media print {
    .top-nav[b-qi7b9edltq] {
        display: none;
    }
}
/* /Components/Pages/Calendar/MealCalendar.razor.rz.scp.css */
/* ==========================================================================
   MealCalendar — scoped styles
   ========================================================================== */

/* Page header */
.cal-header[b-629i4ga2yh] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.cal-header h1[b-629i4ga2yh] {
    margin: 0;
}

/* Empty / loading states */
.cal-empty[b-629i4ga2yh] {
    max-width: 560px;
    margin: var(--space-8) auto;
    padding: var(--space-10);
}

/* Alert */
.cal-alert[b-629i4ga2yh] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error);
    border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
    font-size: 0.875rem;
    margin-bottom: var(--space-4);
}

/* Week navigation */
.cal-week-nav[b-629i4ga2yh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.cal-week-label[b-629i4ga2yh] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Action buttons */
.cal-actions[b-629i4ga2yh] {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Member tabs */
.cal-tabs[b-629i4ga2yh] {
    display: flex;
    gap: var(--space-1);
    border-bottom: 2px solid var(--color-border-subtle);
    margin-bottom: var(--space-5);
    padding-bottom: 0;
}

.cal-tab[b-629i4ga2yh] {
    padding: var(--space-2) var(--space-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}

.cal-tab:hover[b-629i4ga2yh] {
    color: var(--color-text);
}

.cal-tab--active[b-629i4ga2yh] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.cal-view-toggle[b-629i4ga2yh] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-4);
}

.cal-toggle[b-629i4ga2yh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Calendar grid: dynamic columns (set via inline style) */
.cal-grid-wrapper[b-629i4ga2yh] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-6);
}

.cal-grid[b-629i4ga2yh] {
    display: grid;
    /* grid-template-columns and min-width set inline for dynamic day count */
    width: 100%;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Day headers */
.cal-day-header[b-629i4ga2yh] {
    padding: var(--space-2) var(--space-2);
    text-align: center;
    background-color: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border-subtle);
    border-right: 1px solid var(--color-border-subtle);
}

.cal-day-header:last-of-type[b-629i4ga2yh] {
    border-right: none;
}

.cal-day-header--today[b-629i4ga2yh] {
    background-color: var(--color-primary-subtle);
}

/* Overflow days — instances that spill past the nominal week (Task 151) */
.cal-day-header--overflow[b-629i4ga2yh] {
    background-color: color-mix(in srgb, var(--color-surface-raised) 60%, transparent);
    opacity: 0.75;
}

.cal-day-header__name[b-629i4ga2yh] {
    display: block;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-day-header__date[b-629i4ga2yh] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Day cells */
.cal-day[b-629i4ga2yh] {
    padding: var(--space-2);
    min-height: 120px;
    border-right: 1px solid var(--color-border-subtle);
    background-color: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.cal-day--today[b-629i4ga2yh] {
    background-color: var(--color-primary-subtle);
}

.cal-day__empty[b-629i4ga2yh] {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-align: center;
    padding: var(--space-4) 0;
}

/* Meal cards */
.cal-meal[b-629i4ga2yh] {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: transform 100ms ease, box-shadow 150ms ease;
    position: relative;
}

.cal-meal:hover[b-629i4ga2yh] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-1);
}

.cal-meal--prep[b-629i4ga2yh] {
    background-color: color-mix(in srgb, var(--color-success) 12%, transparent);
    border-left: 3px solid var(--color-success);
}

.cal-meal--leftover[b-629i4ga2yh] {
    background-color: var(--color-surface-raised);
    border-left: 3px solid var(--color-border);
}

/* Locked meal visual distinction */
.cal-meal--locked[b-629i4ga2yh] {
    border-left-width: 3px;
    border-left-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.cal-meal--locked.cal-meal--prep[b-629i4ga2yh] {
    background-color: color-mix(in srgb, var(--color-primary) 6%, color-mix(in srgb, var(--color-success) 8%, transparent));
}

.cal-meal--locked.cal-meal--leftover[b-629i4ga2yh] {
    background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-raised));
}

.cal-meal--out-of-plan[b-629i4ga2yh] {
    opacity: 0.7;
}

.cal-meal__content[b-629i4ga2yh] {
    cursor: pointer;
}

.cal-meal__image[b-629i4ga2yh] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
    background-color: var(--color-surface-raised);
}

.cal-meal__image img[b-629i4ga2yh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cal-meal__image-fallback[b-629i4ga2yh] {
    width: 100%;
    height: 100%;
}

.cal-meal__badge[b-629i4ga2yh] {
    position: absolute;
    right: var(--space-1);
    bottom: var(--space-1);
    background-color: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    color: var(--color-text);
    padding: 0 6px;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-meal__meta[b-629i4ga2yh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cal-meal__type[b-629i4ga2yh] {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-meal--prep .cal-meal__type[b-629i4ga2yh] {
    color: var(--color-success);
}

.cal-meal--leftover .cal-meal__type[b-629i4ga2yh] {
    color: var(--color-text-secondary);
}

.cal-meal__cal[b-629i4ga2yh] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.cal-meal__members[b-629i4ga2yh] {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

/* Lock / Remove action buttons */
.cal-meal__actions[b-629i4ga2yh] {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-1);
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 150ms ease;
}

.cal-meal:hover .cal-meal__actions[b-629i4ga2yh] {
    opacity: 1;
}

/* Always show actions for locked meals (so lock icon is visible) */
.cal-meal--locked .cal-meal__actions[b-629i4ga2yh] {
    opacity: 1;
}

.cal-meal__action[b-629i4ga2yh] {
    background: none;
    border: none;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    transition: color 100ms ease, background-color 100ms ease;
}

.cal-meal__action:hover[b-629i4ga2yh] {
    color: var(--color-text);
    background-color: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.cal-meal__action--locked[b-629i4ga2yh] {
    color: var(--color-primary);
}

.cal-meal__action--locked:hover[b-629i4ga2yh] {
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.cal-meal__action--remove:hover[b-629i4ga2yh] {
    color: var(--color-error);
    background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
}

/* Add recipe button per day */
.cal-day__add[b-629i4ga2yh] {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    border: 1px dashed var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 150ms ease, border-color 150ms ease, color 150ms ease;
}

.cal-day:hover .cal-day__add[b-629i4ga2yh] {
    opacity: 1;
}

.cal-day__add:hover[b-629i4ga2yh] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

/* Plan summary */
.cal-summary[b-629i4ga2yh] {
    padding: var(--space-6);
}

.cal-summary h2[b-629i4ga2yh] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.cal-summary-header[b-629i4ga2yh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.cal-summary-grid[b-629i4ga2yh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.cal-summary-item[b-629i4ga2yh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    background-color: var(--color-surface);
}

.cal-summary-item--dragging[b-629i4ga2yh] {
    opacity: 0.55;
    border-color: var(--color-primary);
}

.cal-summary-item--drag-target[b-629i4ga2yh] {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.cal-summary-item--overflow[b-629i4ga2yh] {
    opacity: 0.75;
    border-style: dashed;
}

.cal-summary-item__drag-row[b-629i4ga2yh] {
    display: flex;
    justify-content: flex-end;
}

.cal-summary-item__drag-handle[b-629i4ga2yh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 1px dashed var(--color-border-subtle);
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    padding: 0.125rem var(--space-2);
    font-size: 0.75rem;
    cursor: grab;
}

.cal-summary-item__drag-handle:active[b-629i4ga2yh] {
    cursor: grabbing;
}

.cal-summary-item__drag-handle:hover[b-629i4ga2yh] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.cal-summary-item__image[b-629i4ga2yh] {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-raised);
}

.cal-summary-item__image img[b-629i4ga2yh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cal-summary-item__image-fallback[b-629i4ga2yh] {
    width: 100%;
    height: 100%;
}

.cal-summary-item__actions[b-629i4ga2yh] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-1);
}

/* Spinner animation */
@keyframes spin-b-629i4ga2yh {
    to { transform: rotate(360deg); }
}

/* Recipe link button in plan summary — styled as text link */
.cal-recipe-link[b-629i4ga2yh] {
    background: none;
    border: none;
    padding: 0;
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.cal-recipe-link:hover[b-629i4ga2yh] {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 767px) {
    .cal-meal__name[b-629i4ga2yh] {
        font-size: 0.75rem;
    }

    .cal-actions[b-629i4ga2yh] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   Home Page Dashboard Styles
   Reference: PRD-003 Phase 4, Task 135
   ========================================================================== */

.home-hero[b-hq1qkws90u] {
    margin-bottom: var(--space-6);
}

.home-hero h1[b-hq1qkws90u] {
    margin-bottom: var(--space-2);
}

.home-nav-grid[b-hq1qkws90u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-6);
}

.home-nav-card[b-hq1qkws90u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: var(--space-8) var(--space-6);
}

.home-nav-card:hover[b-hq1qkws90u] {
    text-decoration: none;
    color: inherit;
}

.home-nav-card h3[b-hq1qkws90u] {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text);
}

.home-nav-icon[b-hq1qkws90u] {
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
/* /Components/Pages/Recipes/RecipeDetail.razor.rz.scp.css */
/* ==========================================================================
   RecipeDetail — scoped styles
   Theme tokens from theme-tokens.css, component tokens from app.css
   ========================================================================== */

/* Breadcrumb */
.detail-breadcrumb[b-e2wj4jn4w6] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.detail-breadcrumb a[b-e2wj4jn4w6] {
    color: var(--color-primary);
    text-decoration: none;
}

.detail-breadcrumb a:hover[b-e2wj4jn4w6] {
    text-decoration: underline;
}

.detail-breadcrumb__sep[b-e2wj4jn4w6] {
    color: var(--color-border);
}

/* Header */
.detail-header[b-e2wj4jn4w6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.detail-header h1[b-e2wj4jn4w6] {
    margin-bottom: var(--space-2);
}

.detail-header__meta[b-e2wj4jn4w6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.detail-header__actions[b-e2wj4jn4w6] {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Cuisine tag uses Origin colors (consistent with RecipeCard) */
.detail-cuisine-tag[b-e2wj4jn4w6] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background-color: var(--tag-origin-bg);
    color: var(--tag-origin-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Two-column layout */
.detail-layout[b-e2wj4jn4w6] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-8);
    align-items: start;
}

/* Sidebar */
.detail-sidebar[b-e2wj4jn4w6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.detail-hero-image[b-e2wj4jn4w6] {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.detail-hero-image img[b-e2wj4jn4w6] {
    width: 100%;
    display: block;
}

.detail-meta-card[b-e2wj4jn4w6] {
    padding: var(--space-5);
}

.detail-dl[b-e2wj4jn4w6] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    font-size: 0.875rem;
}

.detail-dl dt[b-e2wj4jn4w6] {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.detail-dl dd[b-e2wj4jn4w6] {
    margin: 0;
}

/* Main content */
.detail-main[b-e2wj4jn4w6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.detail-description[b-e2wj4jn4w6] {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.detail-section[b-e2wj4jn4w6] {
    padding: var(--space-6);
}

.detail-section h2[b-e2wj4jn4w6] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.detail-section__header[b-e2wj4jn4w6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.detail-section__header h2[b-e2wj4jn4w6] {
    margin-bottom: 0;
}

/* Ingredient list */
.detail-ingredient-list[b-e2wj4jn4w6] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-ingredient-list li[b-e2wj4jn4w6] {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 0.9375rem;
}

.detail-ingredient-list li:last-child[b-e2wj4jn4w6] {
    border-bottom: none;
}

/* Progress bar */
.detail-progress[b-e2wj4jn4w6] {
    height: 8px;
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.detail-progress__bar[b-e2wj4jn4w6] {
    height: 100%;
    background-color: var(--color-success);
    border-radius: var(--radius-full);
    transition: width 300ms ease;
}

/* Nutrition table */
.detail-table[b-e2wj4jn4w6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-top: var(--space-3);
}

.detail-table th[b-e2wj4jn4w6],
.detail-table td[b-e2wj4jn4w6] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
}

.detail-table th[b-e2wj4jn4w6] {
    text-align: left;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-table tfoot td[b-e2wj4jn4w6] {
    border-top: 2px solid var(--color-border);
    border-bottom: none;
}

/* Delete modal */
.modal-overlay[b-e2wj4jn4w6] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

[b-e2wj4jn4w6] .modal-content {
    max-width: 440px;
    width: 100%;
    padding: var(--space-8);
}

[b-e2wj4jn4w6] .modal-content h2 {
    margin-bottom: var(--space-3);
}

[b-e2wj4jn4w6] .modal-content p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.modal-actions[b-e2wj4jn4w6] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 1023px) {
    .detail-layout[b-e2wj4jn4w6] {
        grid-template-columns: 280px 1fr;
        gap: var(--space-6);
    }
}

@media (max-width: 767px) {
    .detail-layout[b-e2wj4jn4w6] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .detail-header[b-e2wj4jn4w6] {
        flex-direction: column;
    }

    .detail-header__actions[b-e2wj4jn4w6] {
        width: 100%;
    }

    .detail-header__actions[b-e2wj4jn4w6]  .btn-foodsey {
        flex: 1;
    }
}
/* /Components/Pages/Recipes/RecipeEdit.razor.rz.scp.css */
/* ==========================================================================
   RecipeEdit — scoped styles
   ========================================================================== */

/* Breadcrumb */
.edit-breadcrumb[b-utxvj1r0yi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.edit-breadcrumb a[b-utxvj1r0yi] {
    color: var(--color-primary);
    text-decoration: none;
}

.edit-breadcrumb a:hover[b-utxvj1r0yi] {
    text-decoration: underline;
}

.edit-breadcrumb__sep[b-utxvj1r0yi] {
    color: var(--color-border);
}

/* Alerts */
.edit-alert[b-utxvj1r0yi] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: 0.875rem;
}

.edit-alert--error[b-utxvj1r0yi] {
    background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error);
    border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
}

.edit-alert--success[b-utxvj1r0yi] {
    background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
}

.edit-alert--warning[b-utxvj1r0yi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
    color: color-mix(in srgb, var(--color-warning) 80%, black);
    border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent);
}

.edit-req[b-utxvj1r0yi] {
    color: var(--color-error);
}

/* Two-column layout */
.edit-layout[b-utxvj1r0yi] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-8);
    align-items: start;
}

.edit-main[b-utxvj1r0yi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.edit-sidebar__card[b-utxvj1r0yi] {
    padding: var(--space-5);
}

/* Field group */
.edit-field[b-utxvj1r0yi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.edit-field + .edit-field[b-utxvj1r0yi] {
    margin-top: var(--space-1);
}

/* Two-column row within sidebar */
.edit-row[b-utxvj1r0yi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* Checkbox */
.edit-checkbox[b-utxvj1r0yi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    cursor: pointer;
    margin-top: var(--space-2);
}

.edit-checkbox input[type="checkbox"][b-utxvj1r0yi] {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    accent-color: var(--color-primary);
}

/* ── Ingredient Editor Section ── */
.edit-ingredients[b-utxvj1r0yi] {
    margin-top: var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
    padding-top: var(--space-6);
}

.edit-ingredients__header[b-utxvj1r0yi] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.edit-ingredients__count[b-utxvj1r0yi] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.edit-ingredients__warnings[b-utxvj1r0yi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.edit-ingredients__header-row[b-utxvj1r0yi] {
    display: grid;
    grid-template-columns: 1fr 80px 100px auto 32px;
    gap: var(--space-2);
    padding: 0 0 var(--space-2) 0;
    border-bottom: 2px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.edit-ingredients__list[b-utxvj1r0yi] {
    margin-bottom: var(--space-4);
}

.edit-ingredients__add[b-utxvj1r0yi] {
    margin-top: var(--space-2);
}

/* Form actions */
.edit-actions[b-utxvj1r0yi] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Spinner animation */
@keyframes spin-b-utxvj1r0yi {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 767px) {
    .edit-layout[b-utxvj1r0yi] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .edit-ingredients__header-row[b-utxvj1r0yi] {
        display: none;
    }
}
/* /Components/Pages/Recipes/RecipeList.razor.rz.scp.css */
/* ==========================================================================
   RecipeList Page Styles
   Reference: Aesthetics Bible Section 7.2, PRD-003 Section 3.4
   Task 126: CSS Grid layout
   ========================================================================== */

.recipe-list-header[b-lo5k7lhg48] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
    flex-wrap: wrap;
}

.recipe-list-header h1[b-lo5k7lhg48] {
    margin: 0;
}

.recipe-list-header__actions[b-lo5k7lhg48] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* Filter bar */
.recipe-filters[b-lo5k7lhg48] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@media (max-width: 1023px) {
    .recipe-filters[b-lo5k7lhg48] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .recipe-filters[b-lo5k7lhg48] {
        grid-template-columns: 1fr;
    }
}

/* Recipe grid: 3-4 columns on desktop, responsive */
.recipe-grid[b-lo5k7lhg48] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}
/* /Components/Pages/Settings/SettingsPage.razor.rz.scp.css */
.content-container[b-v24o46njoq] {
    max-width: 56rem;
    margin: 0 auto;
    padding: var(--space-4);
}

h1[b-v24o46njoq] {
    margin-bottom: var(--space-6);
}

/* Alert messages */
.settings-alert[b-v24o46njoq] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--text-body-sm);
}

.settings-alert--success[b-v24o46njoq] {
    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.settings-alert--error[b-v24o46njoq] {
    background-color: color-mix(in srgb, var(--color-error) 12%, transparent);
    color: var(--color-error);
    border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
}

/* Layout */
.settings-layout[b-v24o46njoq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.settings-section__title[b-v24o46njoq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: var(--text-body-lg);
}

.settings-section__subtitle[b-v24o46njoq] {
    color: var(--color-text-secondary);
    font-size: var(--text-body-sm);
    margin-bottom: var(--space-5);
}

/* Form fields */
.settings-field[b-v24o46njoq] {
    margin-bottom: var(--space-4);
}

.settings-field .settings-hint[b-v24o46njoq] {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-caption);
    color: var(--color-text-secondary);
}

.settings-row[b-v24o46njoq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .settings-row[b-v24o46njoq] {
        grid-template-columns: 1fr;
    }
}

/* Prep day toggles */
.settings-days[b-v24o46njoq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.settings-day-toggle[b-v24o46njoq] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-body-sm);
    transition: border-color 0.15s ease, background-color 0.15s ease;
    user-select: none;
}

.settings-day-toggle:has(input:checked)[b-v24o46njoq] {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.settings-day-toggle input[b-v24o46njoq] {
    accent-color: var(--color-primary);
}

/* Theme selector */
.settings-theme-grid[b-v24o46njoq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.settings-theme-row[b-v24o46njoq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.settings-theme-row-label[b-v24o46njoq] {
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-themes[b-v24o46njoq] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
}

.settings-theme-btn[b-v24o46njoq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-size: var(--text-body-sm);
    color: var(--color-text);
    width: 100%;
    min-height: 42px;
}

.settings-theme-btn:hover[b-v24o46njoq] {
    border-color: var(--color-primary);
}

.settings-theme-btn--active[b-v24o46njoq] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.settings-theme-swatch[b-v24o46njoq] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.settings-theme-label[b-v24o46njoq] {
    font-weight: 500;
}

@media (max-width: 900px) {
    .settings-themes[b-v24o46njoq] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .settings-themes[b-v24o46njoq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Save buttons */
.settings-actions[b-v24o46njoq] {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
}

/* Skeleton */
.settings-skeleton[b-v24o46njoq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Empty state */
.settings-empty[b-v24o46njoq] {
    text-align: center;
    padding: var(--space-8);
}
/* /Components/Pages/Shopping/ShoppingListPage.razor.rz.scp.css */
/* ==========================================================================
   ShoppingListPage — scoped styles
   ========================================================================== */

/* Empty / loading state */
.shop-empty[b-f8ktlmb2uq] {
    max-width: 560px;
    margin: var(--space-8) auto;
}

/* Alert */
.shop-alert[b-f8ktlmb2uq] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error);
    border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
    font-size: 0.875rem;
    margin-bottom: var(--space-4);
}

/* Toolbar */
.shop-toolbar[b-f8ktlmb2uq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.shop-toolbar__info[b-f8ktlmb2uq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.shop-toolbar__actions[b-f8ktlmb2uq] {
    display: flex;
    gap: var(--space-2);
}

/* Progress bar */
.shop-progress-wrap[b-f8ktlmb2uq] {
    margin-bottom: var(--space-5);
}

.shop-progress-meta[b-f8ktlmb2uq] {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}

.shop-progress[b-f8ktlmb2uq] {
    height: 6px;
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.shop-progress__bar[b-f8ktlmb2uq] {
    height: 100%;
    background-color: var(--color-success);
    border-radius: var(--radius-full);
    transition: width 300ms ease;
}

/* Category card */
.shop-category[b-f8ktlmb2uq] {
    padding: 0;
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.shop-category__title[b-f8ktlmb2uq] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border-subtle);
    margin: 0;
}

/* Item list */
.shop-item-list[b-f8ktlmb2uq] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-item[b-f8ktlmb2uq] {
    border-bottom: 1px solid var(--color-border-subtle);
}

.shop-item:last-child[b-f8ktlmb2uq] {
    border-bottom: none;
}

.shop-item__label[b-f8ktlmb2uq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    transition: background-color 100ms ease;
}

.shop-item__label:hover[b-f8ktlmb2uq] {
    background-color: var(--color-primary-subtle);
}

.shop-item__label input[type="checkbox"][b-f8ktlmb2uq] {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.shop-item__text[b-f8ktlmb2uq] {
    flex: 1;
    font-size: 0.9375rem;
}

.shop-item--checked .shop-item__text[b-f8ktlmb2uq] {
    text-decoration: line-through;
    color: var(--color-text-secondary);
}

.shop-item__recipes[b-f8ktlmb2uq] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    margin-left: var(--space-1);
}

/* Spinner animation */
@keyframes spin-b-f8ktlmb2uq {
    to { transform: rotate(360deg); }
}

/* Print-only section */
.shop-print-only[b-f8ktlmb2uq] {
    display: none;
}

@media print {
    .shop-print-only[b-f8ktlmb2uq] {
        display: block;
    }
}

/* Responsive */
@media (max-width: 767px) {
    .shop-toolbar[b-f8ktlmb2uq] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Shared/GradientPlaceholder.razor.rz.scp.css */
/* ==========================================================================
   Gradient Placeholder Styles
   Three gradient pairs per theme, selected via CSS class.
   Gradient colors come from theme tokens defined in theme-tokens.css.
   Reference: Aesthetics Bible Section 8
   ========================================================================== */

.gradient-placeholder[b-nisdq77bpw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-4);
    box-sizing: border-box;
    overflow: hidden;
}

.gradient-placeholder--0[b-nisdq77bpw] {
    background: linear-gradient(135deg, var(--gradient-1-from), var(--gradient-1-to));
}

.gradient-placeholder--1[b-nisdq77bpw] {
    background: linear-gradient(135deg, var(--gradient-2-from), var(--gradient-2-to));
}

.gradient-placeholder--2[b-nisdq77bpw] {
    background: linear-gradient(135deg, var(--gradient-3-from), var(--gradient-3-to));
}

.gradient-placeholder__text[b-nisdq77bpw] {
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    line-height: 1.3;
    max-width: 80%;
    word-break: break-word;
}
/* /Components/Shared/ImportRecipeModal.razor.rz.scp.css */
/* ==========================================================================
   ImportRecipeModal — scoped styles
   ========================================================================== */

.imp__title[b-0i6d8mo05v] {
    margin-bottom: var(--space-4);
}

/* Tabs */
.imp__tabs[b-0i6d8mo05v] {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-border-subtle);
}

.imp__tab[b-0i6d8mo05v] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 150ms ease, border-color 150ms ease;
}

.imp__tab:hover[b-0i6d8mo05v] {
    color: var(--color-text);
}

.imp__tab--active[b-0i6d8mo05v] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Panel */
.imp__panel[b-0i6d8mo05v] {
    margin-bottom: var(--space-4);
}

.imp__textarea[b-0i6d8mo05v] {
    width: 100%;
    min-height: 200px;
    resize: vertical;
}

.imp__hint[b-0i6d8mo05v] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.imp__file-input[b-0i6d8mo05v] {
    display: block;
    margin-bottom: var(--space-3);
}

/* Image preview */
.imp__image-preview[b-0i6d8mo05v] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

.imp__image-thumb[b-0i6d8mo05v] {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.imp__image-thumb img[b-0i6d8mo05v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imp__image-remove[b-0i6d8mo05v] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
}

/* Error */
.imp__error[b-0i6d8mo05v] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-error) 12%, transparent);
    color: var(--color-error);
    font-size: 0.875rem;
    margin-bottom: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
}

/* Actions */
.imp__actions[b-0i6d8mo05v] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
}

/* Processing phase */
.imp__processing[b-0i6d8mo05v] {
    text-align: center;
    padding: var(--space-8) 0;
}

.imp__spinner[b-0i6d8mo05v] {
    margin-bottom: var(--space-4);
}

.imp__spin-icon[b-0i6d8mo05v] {
    font-size: 2.5rem;
    color: var(--color-primary);
    animation: imp-spin-b-0i6d8mo05v 1s linear infinite;
}

@keyframes imp-spin-b-0i6d8mo05v {
    to { transform: rotate(360deg); }
}

.imp__progress-msg[b-0i6d8mo05v] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--space-6);
}

/* Steps */
.imp__steps[b-0i6d8mo05v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 280px;
    margin: 0 auto;
    text-align: left;
}

.imp__step[b-0i6d8mo05v] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.imp__step--active[b-0i6d8mo05v] {
    color: var(--color-primary);
    font-weight: 600;
}

.imp__step--done[b-0i6d8mo05v] {
    color: var(--color-success);
}

.imp__step-icon[b-0i6d8mo05v] {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Complete phase */
.imp__complete[b-0i6d8mo05v] {
    text-align: center;
    padding: var(--space-8) 0;
}

.imp__success-icon[b-0i6d8mo05v] {
    font-size: 3rem;
    color: var(--color-success);
    margin-bottom: var(--space-3);
}

.imp__fail-icon[b-0i6d8mo05v] {
    font-size: 3rem;
    color: var(--color-error);
    margin-bottom: var(--space-3);
}

.imp__summary[b-0i6d8mo05v] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.imp__error-msg[b-0i6d8mo05v] {
    font-size: 0.875rem;
    color: var(--color-error);
    margin-bottom: var(--space-6);
}
/* /Components/Shared/IngredientAutocomplete.razor.rz.scp.css */
/* ==========================================================================
   IngredientAutocomplete — scoped styles
   ========================================================================== */

.ing-ac[b-x2ercmfiwu] {
    position: relative;
}

.ing-ac__input[b-x2ercmfiwu] {
    width: 100%;
}

/* Dropdown */
.ing-ac__dropdown[b-x2ercmfiwu] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Items */
.ing-ac__item[b-x2ercmfiwu] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--color-text);
    transition: background-color 100ms ease;
}

.ing-ac__item:hover[b-x2ercmfiwu],
.ing-ac__item--active[b-x2ercmfiwu] {
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.ing-ac__item--loading[b-x2ercmfiwu] {
    color: var(--color-text-secondary);
    cursor: default;
}

.ing-ac__item--create[b-x2ercmfiwu] {
    color: var(--color-primary);
    font-weight: 500;
    border-top: 1px solid var(--color-border-subtle);
    gap: var(--space-1);
}

.ing-ac__name[b-x2ercmfiwu] {
    flex: 1;
    font-weight: 500;
}

.ing-ac__category[b-x2ercmfiwu] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.ing-ac__scope[b-x2ercmfiwu] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    padding: 1px var(--space-1);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: var(--radius-sm);
}
/* /Components/Shared/IngredientRowEditor.razor.rz.scp.css */
/* ==========================================================================
   IngredientRowEditor — scoped styles
   ========================================================================== */

.ire[b-qz9icprqm6] {
    display: grid;
    grid-template-columns: 1fr 80px 100px auto 32px;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.ire:last-child[b-qz9icprqm6] {
    border-bottom: none;
}

.ire__field--ingredient[b-qz9icprqm6] {
    min-width: 0;
}

.ire__field--amount input[b-qz9icprqm6] {
    text-align: right;
}

.ire__field--measurement[b-qz9icprqm6] {
    font-size: 0.75rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ire__match[b-qz9icprqm6] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-secondary);
}

.ire__no-match[b-qz9icprqm6] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-warning);
}

.ire__remove[b-qz9icprqm6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: color 150ms ease, background-color 150ms ease;
}

.ire__remove:hover[b-qz9icprqm6] {
    color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
}

/* Responsive: stack on mobile */
@media (max-width: 640px) {
    .ire[b-qz9icprqm6] {
        grid-template-columns: 1fr 1fr 32px;
        gap: var(--space-1);
    }

    .ire__field--ingredient[b-qz9icprqm6] {
        grid-column: 1 / -2;
    }

    .ire__field--measurement[b-qz9icprqm6] {
        grid-column: 1 / -2;
    }

    .ire__remove[b-qz9icprqm6] {
        grid-row: 1;
        grid-column: -2 / -1;
    }
}
/* /Components/Shared/Modal.razor.rz.scp.css */
/* ==========================================================================
   Modal — shared component styles
   ========================================================================== */

/* Backdrop */
.modal-backdrop[b-q5lmuplsnd] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-6) var(--space-4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Panel */
.modal-panel[b-q5lmuplsnd] {
    position: relative;
    background: var(--color-surface-raised);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    margin: auto 0; /* Vertically center if content is short */
    max-height: none; /* Allow natural height — backdrop scrolls */
}

.modal-panel--sm[b-q5lmuplsnd] { max-width: 440px; }
.modal-panel--md[b-q5lmuplsnd] { max-width: 640px; }
.modal-panel--lg[b-q5lmuplsnd] { max-width: 900px; }
.modal-panel--full[b-q5lmuplsnd] { max-width: 1100px; }

/* Close button */
.modal-close[b-q5lmuplsnd] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    font-size: 1.25rem;
}

.modal-close:hover[b-q5lmuplsnd] {
    background: var(--color-border-subtle);
    color: var(--color-text);
}

/* Body */
.modal-body[b-q5lmuplsnd] {
    padding: var(--space-6);
}

/* Responsive */
@media (max-width: 640px) {
    .modal-backdrop[b-q5lmuplsnd] {
        padding: 0;
        align-items: stretch;
    }

    .modal-panel[b-q5lmuplsnd] {
        border-radius: 0;
        min-height: 100dvh;
        margin: 0;
    }
}

/* Print: hide modal chrome */
@media print {
    .modal-backdrop[b-q5lmuplsnd] {
        position: static;
        background: none;
        padding: 0;
        overflow: visible;
    }

    .modal-panel[b-q5lmuplsnd] {
        box-shadow: none;
        border-radius: 0;
        max-width: none;
    }

    .modal-close[b-q5lmuplsnd] {
        display: none;
    }

    .modal-body[b-q5lmuplsnd] {
        padding: 0;
    }
}
/* /Components/Shared/NewIngredientModal.razor.rz.scp.css */
/* ==========================================================================
   NewIngredientModal — scoped styles
   ========================================================================== */

.nim__title[b-jd7i6swt02] {
    margin-bottom: var(--space-4);
}

.nim__step-label[b-jd7i6swt02] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.nim__hint[b-jd7i6swt02] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.nim__field[b-jd7i6swt02] {
    margin-bottom: var(--space-4);
}

.nim__field-row[b-jd7i6swt02] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.nim__req[b-jd7i6swt02] {
    color: var(--color-error);
}

.nim__error[b-jd7i6swt02] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-error) 12%, transparent);
    color: var(--color-error);
    font-size: 0.875rem;
    margin-bottom: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
}

.nim__actions[b-jd7i6swt02] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
}

@media (max-width: 480px) {
    .nim__field-row[b-jd7i6swt02] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/RecipeCard.razor.rz.scp.css */
/* ==========================================================================
   RecipeCard Styles
   Reference: Aesthetics Bible Sections 7.2, 7.7, 9.3
   Tasks: 125 (card), 128 (cuisine tag), 129 (hover)
   ========================================================================== */

.recipe-card[b-xet31mfm0v] {
    display: block;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
    /* Keyboard focus */
    outline: none;
}

.recipe-card:focus-visible[b-xet31mfm0v] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Task 129: Hover interaction — gentle rise with deeper shadow */
.recipe-card:hover[b-xet31mfm0v] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    text-decoration: none;
    color: inherit;
}

/* Task 129: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .recipe-card[b-xet31mfm0v] {
        transition: none;
    }

    .recipe-card:hover[b-xet31mfm0v] {
        transform: none;
    }
}

/* Image area: 3:2 aspect ratio */
.recipe-card__image[b-xet31mfm0v] {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--color-border-subtle);
}

.recipe-card__image img[b-xet31mfm0v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content area */
.recipe-card__content[b-xet31mfm0v] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.recipe-card__title[b-xet31mfm0v] {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--color-text);
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta row: tags + badges */
.recipe-card__meta[b-xet31mfm0v] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Task 128: Cuisine tag as Origin category pill (blue hue) */
.recipe-card__tag[b-xet31mfm0v] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background-color: var(--tag-origin-bg);
    color: var(--tag-origin-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Average rating display */
.recipe-card__rating[b-xet31mfm0v] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-warning);
    white-space: nowrap;
}
/* /Components/Shared/RecipeDetailModal.razor.rz.scp.css */
/* ==========================================================================
   RecipeDetailModal — scoped styles
   ========================================================================== */

/* Loading & empty */
.rdm-loading[b-g5etir7hri],
.rdm-empty[b-g5etir7hri] {
    text-align: center;
    padding: var(--space-8);
    color: var(--color-text-secondary);
}

/* Header */
.rdm-header[b-g5etir7hri] {
    margin-bottom: var(--space-4);
}

.rdm-title[b-g5etir7hri] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-2);
    padding-right: var(--space-8); /* Room for close button */
}

.rdm-badges[b-g5etir7hri] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.rdm-cuisine-tag[b-g5etir7hri] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background-color: var(--tag-origin-bg);
    color: var(--tag-origin-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

[b-g5etir7hri] .rdm-badge--warning {
    background-color: color-mix(in srgb, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
}

/* Image */
.rdm-image[b-g5etir7hri] {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-5);
    max-height: 300px;
}

.rdm-image img[b-g5etir7hri] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Two-column layout */
.rdm-layout[b-g5etir7hri] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-6);
    align-items: start;
}

/* Sidebar */
.rdm-sidebar[b-g5etir7hri] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rdm-dl[b-g5etir7hri] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    font-size: 0.875rem;
    margin: 0;
}

.rdm-dl dt[b-g5etir7hri] {
    color: var(--color-text-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.rdm-dl dd[b-g5etir7hri] {
    margin: 0;
}

.rdm-dl a[b-g5etir7hri] {
    color: var(--color-primary);
    text-decoration: none;
}

.rdm-dl a:hover[b-g5etir7hri] {
    text-decoration: underline;
}

/* Actions */
.rdm-actions[b-g5etir7hri] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rdm-action-btn[b-g5etir7hri] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: center;
}

/* Content */
.rdm-content[b-g5etir7hri] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.rdm-description[b-g5etir7hri] {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Batch scaling control */
.rdm-batch[b-g5etir7hri] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
}

.rdm-batch__label[b-g5etir7hri] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.rdm-batch__control[b-g5etir7hri] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.rdm-batch__btn[b-g5etir7hri] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text);
    cursor: pointer;
    font-size: 1rem;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.rdm-batch__btn:hover:not(:disabled)[b-g5etir7hri] {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.rdm-batch__btn:disabled[b-g5etir7hri] {
    opacity: 0.4;
    cursor: not-allowed;
}

.rdm-batch__value[b-g5etir7hri] {
    font-size: 1.125rem;
    font-weight: 700;
    min-width: 2rem;
    text-align: center;
}

.rdm-batch-note[b-g5etir7hri] {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
}

.rdm-batch-print[b-g5etir7hri] {
    display: none; /* Only shown in print */
}

/* Sections */
.rdm-section[b-g5etir7hri] {
    padding: var(--space-5);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
}

.rdm-section h2[b-g5etir7hri] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.rdm-section-header[b-g5etir7hri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.rdm-section-header h2[b-g5etir7hri] {
    margin-bottom: 0;
}

.rdm-muted[b-g5etir7hri] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.rdm-sub-heading[b-g5etir7hri] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

/* Ingredient list */
.rdm-ingredient-list[b-g5etir7hri] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rdm-ingredient-list li[b-g5etir7hri] {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.rdm-ingredient-list li:last-child[b-g5etir7hri] {
    border-bottom: none;
}

.rdm-ingredient--missing[b-g5etir7hri] {
    color: var(--color-text-secondary);
}

.rdm-ingredient-warn[b-g5etir7hri] {
    color: var(--color-warning);
    font-size: 1rem;
    flex-shrink: 0;
}

/* Nutrition */
.rdm-coverage[b-g5etir7hri] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.rdm-progress[b-g5etir7hri] {
    height: 6px;
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.rdm-progress__bar[b-g5etir7hri] {
    height: 100%;
    background-color: var(--color-success);
    border-radius: var(--radius-full);
    transition: width 300ms ease;
}

.rdm-incomplete-note[b-g5etir7hri] {
    font-size: 0.8125rem;
    color: var(--color-warning);
    margin-top: var(--space-2);
}

/* Instructions */
.rdm-instructions[b-g5etir7hri] {
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 0.9375rem;
}

/* Notes */
.rdm-notes[b-g5etir7hri] {
    white-space: pre-wrap;
    line-height: 1.6;
    font-size: 0.9375rem;
}

.rdm-divider[b-g5etir7hri] {
    border: none;
    border-top: 1px solid var(--color-border-subtle);
    margin: var(--space-3) 0;
}

/* Responsive */
@media (max-width: 767px) {
    .rdm-layout[b-g5etir7hri] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .rdm-sidebar[b-g5etir7hri] {
        order: 2;
    }

    .rdm-content[b-g5etir7hri] {
        order: 1;
    }

    .rdm-actions[b-g5etir7hri] {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Print Styles — PRD-004 Section 3.5.5
   Clean recipe card layout for printing.
   ========================================================================== */
@media print {
    /* Hide non-print elements */
    .no-print[b-g5etir7hri] {
        display: none !important;
    }

    .print-only[b-g5etir7hri] {
        display: block !important;
    }

    .rdm-batch-print[b-g5etir7hri] {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: #555;
        margin-bottom: 0.5rem;
    }

    /* Clean layout */
    .rdm[b-g5etir7hri] {
        color: #000;
        background: #fff;
    }

    .rdm-header[b-g5etir7hri] {
        margin-bottom: 0.5rem;
    }

    .rdm-title[b-g5etir7hri] {
        font-size: 1.5rem;
        padding-right: 0;
        color: #000;
    }

    .rdm-badges[b-g5etir7hri] {
        gap: 0.25rem;
    }

    .rdm-image[b-g5etir7hri] {
        max-height: 200px;
        margin-bottom: 0.5rem;
    }

    .rdm-layout[b-g5etir7hri] {
        display: block; /* Stack for print */
    }

    .rdm-sidebar[b-g5etir7hri] {
        margin-bottom: 0.75rem;
    }

    .rdm-dl[b-g5etir7hri] {
        gap: 0.125rem 0.5rem;
    }

    .rdm-section[b-g5etir7hri] {
        padding: 0.5rem 0;
        border: none;
        border-top: 1px solid #ccc;
        border-radius: 0;
        background: none;
        page-break-inside: avoid;
    }

    .rdm-section h2[b-g5etir7hri] {
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #555;
    }

    .rdm-ingredient-list li[b-g5etir7hri] {
        border-color: #eee;
        padding: 0.125rem 0;
        font-size: 0.875rem;
    }

    .rdm-instructions[b-g5etir7hri] {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .rdm-ingredient-warn[b-g5etir7hri] {
        display: none;
    }

    .rdm-progress[b-g5etir7hri] {
        display: none;
    }

    .rdm-coverage[b-g5etir7hri] {
        display: none;
    }
}

/* ── Ratings & Notes ── */
.rdm-avg-rating[b-g5etir7hri] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-warning);
}

.rdm-rating-entry[b-g5etir7hri] {
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.rdm-rating-entry--mine[b-g5etir7hri] {
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.rdm-rating-entry__header[b-g5etir7hri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.rdm-rating-entry__user[b-g5etir7hri] {
    font-weight: 600;
    font-size: 0.875rem;
}

.rdm-rating-entry__value[b-g5etir7hri] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 600;
    color: var(--color-warning);
}

.rdm-rating-input-row[b-g5etir7hri] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.rdm-rating-input[b-g5etir7hri] {
    width: 80px;
    text-align: center;
}

.rdm-rating-scale[b-g5etir7hri] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.rdm-rating-notes-row textarea[b-g5etir7hri] {
    width: 100%;
    resize: vertical;
    min-height: 48px;
}

.rdm-rating-notes[b-g5etir7hri] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
    white-space: pre-wrap;
}

.rdm-rating-saving[b-g5etir7hri] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.rdm-rating-saved[b-g5etir7hri] {
    font-size: 0.75rem;
    color: var(--color-success);
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Print-only utility */
.print-only[b-g5etir7hri] {
    display: none;
}
/* /Components/Shared/RecipePickerModal.razor.rz.scp.css */
/* ==========================================================================
   RecipePickerModal — scoped styles
   ========================================================================== */

.rpk[b-4k0pjwkalk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rpk__title[b-4k0pjwkalk] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.rpk__date[b-4k0pjwkalk] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* Search */
.rpk__search[b-4k0pjwkalk] {
    position: relative;
}

.rpk__search-icon[b-4k0pjwkalk] {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 1rem;
    pointer-events: none;
}

.rpk__search-input[b-4k0pjwkalk] {
    padding-left: var(--space-8) !important;
    padding-right: var(--space-8) !important;
}

.rpk__search-clear[b-4k0pjwkalk] {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
}

.rpk__search-clear:hover[b-4k0pjwkalk] {
    color: var(--color-text);
    background-color: var(--color-surface-raised);
}

/* Loading / Empty */
.rpk__loading[b-4k0pjwkalk],
.rpk__empty[b-4k0pjwkalk] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.rpk__spinner[b-4k0pjwkalk] {
    animation: rpk-spin-b-4k0pjwkalk 1s linear infinite;
}

@keyframes rpk-spin-b-4k0pjwkalk {
    to { transform: rotate(360deg); }
}

/* Recipe list */
.rpk__list[b-4k0pjwkalk] {
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-1);
}

.rpk__item[b-4k0pjwkalk] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    transition: background-color 100ms ease, border-color 100ms ease;
}

.rpk__item:hover[b-4k0pjwkalk] {
    background-color: var(--color-surface-raised);
}

.rpk__item--selected[b-4k0pjwkalk] {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.rpk__item-main[b-4k0pjwkalk] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.rpk__item-name[b-4k0pjwkalk] {
    font-weight: 600;
    font-size: 0.875rem;
}

.rpk__item-type[b-4k0pjwkalk] {
    font-size: 0.6875rem;
}

.rpk__item-meta[b-4k0pjwkalk] {
    display: flex;
    gap: var(--space-3);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.rpk__item-check[b-4k0pjwkalk] {
    color: var(--color-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Actions */
.rpk__actions[b-4k0pjwkalk] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
}
/* /Components/Shared/Skeleton.razor.rz.scp.css */
/* ==========================================================================
   Skeleton Loading Component Styles
   Reference: Aesthetics Bible Section 9.5
   ========================================================================== */

/* Pulse animation: 1.5s gentle brightness oscillation */
@keyframes skeleton-pulse-b-5a7tandwwq {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.skeleton[b-5a7tandwwq] {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Text line variant (default) */
.skeleton--text[b-5a7tandwwq] {
    height: 16px;
    width: 100%;
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse-b-5a7tandwwq 1.5s ease-in-out infinite;
}

/* Rect variant — custom dimensions via style attribute */
.skeleton--rect[b-5a7tandwwq] {
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse-b-5a7tandwwq 1.5s ease-in-out infinite;
}

/* Card variant */
.skeleton--card[b-5a7tandwwq] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-1);
}

/* Recipe card variant */
.skeleton--recipe-card[b-5a7tandwwq] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.skeleton__image[b-5a7tandwwq] {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: var(--color-border-subtle);
    animation: skeleton-pulse-b-5a7tandwwq 1.5s ease-in-out infinite;
}

.skeleton__content[b-5a7tandwwq] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.skeleton__line[b-5a7tandwwq] {
    height: 14px;
    width: 100%;
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse-b-5a7tandwwq 1.5s ease-in-out infinite;
}

.skeleton__line--title[b-5a7tandwwq] {
    height: 18px;
    width: 70%;
}

.skeleton__line--short[b-5a7tandwwq] {
    width: 40%;
}

/* Respect prefers-reduced-motion: static gray, no animation */
@media (prefers-reduced-motion: reduce) {
    .skeleton--text[b-5a7tandwwq],
    .skeleton--rect[b-5a7tandwwq],
    .skeleton__image[b-5a7tandwwq],
    .skeleton__line[b-5a7tandwwq] {
        animation: none;
        opacity: 0.7;
    }
}