* {
    box-sizing: border-box;
}

.history-heading-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.history-statistics-link, .admin-page-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border-radius: 8px; background: #075985; color: #fff; font-weight: 700; text-decoration: none; }
.statistics-page, .admin-page { max-width: 1100px; width: 100%; margin: 0 auto; padding: 28px 16px; }
.statistics-intro { max-width: 720px; color: #475569; }
.statistics-period-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: 16px; margin-top: 20px; }
.statistics-period, .admin-card { min-width: 0; padding: 18px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; }
.statistics-period h2, .admin-card h2 { margin: 0 0 14px; font-size: 1.2rem; }
.statistics-period ol { margin: 0; padding-left: 24px; }
.statistics-period li { padding: 7px 0; }
.statistics-count { display: block; color: #475569; font-size: .9rem; }
.admin-add-email-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 12px; }
.admin-add-email-form label { grid-column: 1 / -1; }
.admin-add-email-form input { min-width: 0; }
.admin-email-list { margin: 18px 0 0; padding: 0; list-style: none; }
.admin-email-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid #e2e8f0; }
.admin-email-list form { margin: 0; }
.admin-email-list button { min-height: 44px; }
.admin-audit-card { margin-top: 16px; }
.admin-audit-row { padding: 10px 0; border-top: 1px solid #e2e8f0; overflow-wrap: anywhere; }
.admin-audit-meta { margin-top: 4px; color: #475569; font-size: .9rem; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 3px;
}

.site-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-header-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.account-context { color: #e2e8f0; font-size: 12px; }
.logout-form { margin: 0; }
.logout-button {
    min-height: 40px; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px;
    background: transparent; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.catalog-heading-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.import-recipe-button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
    margin-bottom: 12px; border-radius: 8px; padding: 8px 12px; background: #075985;
    color: white; font-size: 14px; font-weight: 700; text-decoration: none;
}
.recipe-catalog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.recipe-catalog-actions .import-recipe-button,
.recipe-catalog-actions .create-recipe-button {
    min-height: 44px;
    margin: 0;
}
.create-recipe-button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    border-radius: 8px; padding: 8px 12px; background: #4338ca;
    color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
}
.recipe-catalog-actions a:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }

.recipe-create-page { max-width: 860px; width: calc(100% - 32px); margin: 24px auto; padding: 24px; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; }
.recipe-create-page h1 { margin-top: 0; }
.recipe-create-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.recipe-create-form label { display: grid; align-content: start; gap: 6px; color: #334155; font-weight: 700; }
.recipe-create-form input, .recipe-create-form select, .recipe-create-form textarea { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; padding: 9px; border: 1px solid #64748b; border-radius: 7px; background: #fff; color: #0f172a; font: inherit; }
.recipe-create-form textarea { min-height: 150px; resize: vertical; }
.recipe-create-form .field-wide { grid-column: 1 / -1; }
.recipe-create-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.recipe-create-actions button, .recipe-create-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 8px; background: #075985; color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.recipe-create-actions a { border: 1px solid #64748b; background: #fff; color: #0f172a; }
.recipe-create-page .create-error { padding: 10px 12px; border: 1px solid #fca5a5; border-radius: 7px; background: #fef2f2; color: #7f1d1d; }
@media (max-width: 600px) { .recipe-create-page { width: calc(100% - 20px); margin: 12px auto; padding: 16px; } .recipe-create-form { grid-template-columns: minmax(0, 1fr); } .recipe-create-form .field-wide, .recipe-create-actions { grid-column: 1; } }

.site-title {
    display: block;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-page-title { line-height: 1.3; }
h1.dashboard-page-title, .weekly-header h1.dashboard-page-title, .history-panel h1.dashboard-page-title { margin: 0 0 12px; color: #1e293b; font-size: 22px; line-height: 1.3; font-weight: 700; }
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-nav .nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 2px solid #f8fafc;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.site-nav .nav-button:visited {
    color: #0f172a;
}

.site-nav .nav-button:hover {
    border-color: #dbeafe;
    background: #dbeafe;
    color: #0f172a;
}

.site-nav .nav-button[aria-current="page"] {
    border-color: #fbbf24;
    background: #fbbf24;
    color: #1e293b;
}

.site-nav .nav-button:focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 3px;
}

.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.catalog-toolbar > #searchBox {
    min-width: 0;
    flex: 1 1 240px;
}

.desktop-filter-slot {
    min-width: 0;
    flex: 3 1 530px;
}

.catalog-filter-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.catalog-filter-controls label {
    display: flex;
    min-width: 120px;
    flex: 1 1 120px;
    flex-direction: column;
    gap: 4px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.catalog-filter-controls select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #94a3b8;
    border-radius: 8px;
    padding: 8px 10px;
    background: white;
    color: #0f172a;
    font-size: 14px;
}

.clear-filter-button,
.apply-filter-button,
.filter-dialog-close {
    min-height: 44px;
    border: 1px solid #64748b;
    border-radius: 8px;
    padding: 8px 14px;
    background: white;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.mobile-filter-button {
    display: none;
}

.filter-dialog {
    width: min(92vw, 440px);
    max-height: min(85vh, 720px);
    overflow: auto;
    border: 0;
    border-radius: 14px;
    padding: 20px;
    color: #0f172a;
    background: #fff;
    box-shadow: 0 20px 60px rgb(15 23 42 / 28%);
}

.filter-dialog::backdrop {
    background: rgb(15 23 42 / 60%);
}

.filter-dialog-header,
.filter-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.filter-dialog-header {
    margin-bottom: 18px;
}

.filter-dialog-header h3 {
    margin: 0;
    font-size: 20px;
}

.filter-dialog .catalog-filter-controls {
    flex-direction: column;
    align-items: stretch;
}

.filter-dialog .catalog-filter-controls label {
    flex: initial;
}

.filter-dialog .catalog-filter-controls select {
    min-height: 48px;
}

.filter-dialog-actions {
    justify-content: flex-end;
    margin-top: 18px;
}

.apply-filter-button {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.apply-filter-button:hover {
    background: #1e40af;
}

.clear-filter-button:focus-visible,
.apply-filter-button:focus-visible,
.filter-dialog-close:focus-visible,
.mobile-filter-button:focus-visible,
.catalog-filter-controls select:focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 2px;
}

.recipe-detail-card > .recipe-section:first-of-type {
    border-top: 0;
}

.recipe-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.start-cooking-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 8px;
    padding: 9px 16px;
    background: #1d4ed8;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.start-cooking-button:hover { background: #1e40af; }

/* Keep the large catalog as a normal page scroll rather than a nested scroll area. */
.recipe-catalog-scroll {
    max-height: none;
    overflow: visible;
}

.catalog-default-view { display: grid; gap: 22px; }
.catalog-component-group { min-width: 0; }
.catalog-component-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 9px; }
.catalog-component-heading h2 { margin: 0; color: #0f172a; font-size: 18px; }
.catalog-component-heading span { color: #475569; font-size: 13px; font-weight: 600; white-space: nowrap; }
.catalog-preview-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.catalog-preview-row .recipe-card { min-width: 0; }
.catalog-default-view[hidden], #recipeGrid[hidden] { display: none !important; }

@media (min-width: 1100px) {
    .recipe-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

@media (min-width: 761px) and (max-width: 1099px) {
    .recipe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

@media (max-width: 760px) {
    .catalog-preview-row {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 2px 2px 10px;
        scroll-snap-type: x mandatory;
    }
    .catalog-preview-row .recipe-card {
        flex: 0 0 min(78vw, 280px);
        scroll-snap-align: start;
    }
    .catalog-component-heading h2 { font-size: 16px; }
}

.recipe-side-suggestion-section {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #cbd5e1;
}
.recipe-side-suggestion-section .recipe-section-heading { margin-bottom: 8px; }
.side-suggestion-add-button,
.side-suggestion-actions button {
    min-height: 44px;
    padding: 8px 13px;
    border: 1px solid #075985;
    border-radius: 8px;
    background: #075985;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.side-suggestion-list { list-style: none; margin: 0; padding: 0; }
.side-suggestion-list li { min-height: 46px; display: flex; align-items: center; gap: 12px; border-top: 1px solid #e2e8f0; }
.side-suggestion-list a { color: #075985; font-weight: 600; }
.side-suggestion-scope { margin-left: auto; color: #475569; font-size: 13px; }
.side-suggestion-empty { margin: 0; color: #475569; }
.side-suggestion-status, .side-suggestion-error { margin: 8px 0; }
.side-suggestion-status { color: #166534; }
.side-suggestion-error { color: #991b1b; }
.side-suggestion-dialog {
    width: min(520px, calc(100% - 24px));
    max-height: min(85vh, 760px);
    padding: 22px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    color: #0f172a;
    background: #fff;
    box-shadow: 0 18px 50px rgb(15 23 42 / 24%);
}
.side-suggestion-dialog::backdrop { background: rgb(15 23 42 / 55%); }
.side-suggestion-dialog form { display: grid; gap: 9px; }
.side-suggestion-dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.side-suggestion-dialog-heading h2 { margin: 0; font-size: 20px; }
.side-suggestion-dialog-heading p { margin: 5px 0 0; color: #475569; }
.side-suggestion-close { width: 44px; height: 44px; flex: none; border: 0; border-radius: 7px; background: transparent; color: #334155; font-size: 25px; cursor: pointer; }
.side-suggestion-search { min-height: 44px; padding: 8px 10px; border: 1px solid #94a3b8; border-radius: 7px; font: inherit; }
.side-suggestion-options { max-height: 280px; overflow: auto; border-top: 1px solid #cbd5e1; }
.side-suggestion-option { min-height: 50px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e2e8f0; cursor: pointer; }
.side-suggestion-option input, .side-suggestion-visibility input { width: 18px; height: 18px; accent-color: #075985; flex: none; }
.side-suggestion-option > span { flex: 1; }
.side-suggestion-option small { display: block; color: #475569; font-size: 13px; }
.side-suggestion-option .side-suggestion-already { display: none; }
.side-suggestion-option input:disabled ~ .side-suggestion-already { display: inline; }
.side-suggestion-option input:disabled { cursor: not-allowed; }
.side-suggestion-visibility { display: grid; gap: 4px; border: 0; margin: 6px 0 0; padding: 0; }
.side-suggestion-visibility legend { margin-bottom: 4px; font-weight: 700; }
.side-suggestion-visibility label { min-height: 40px; display: flex; align-items: center; gap: 9px; }
.side-suggestion-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 6px; }
.side-suggestion-actions button:first-child { border-color: #64748b; background: #fff; color: #0f172a; }
.side-suggestion-actions .side-suggestion-save { background: #075985; }
.side-suggestion-add-button:focus-visible, .side-suggestion-dialog button:focus-visible, .side-suggestion-dialog input:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }

@media (max-width: 600px) {
    .side-suggestion-dialog { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; padding: 18px 16px max(18px, env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
    .side-suggestion-dialog[open] { position: fixed; inset: auto 0 0; }
    .side-suggestion-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .side-suggestion-actions button { width: 100%; }
}

.suggestion-customize summary {
    cursor: pointer;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.history-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-left: 3px solid #3b82f6;
    border-radius: 0 8px 8px 0;
    background: #f8fafc;
}

.history-entry-content {
    min-width: 0;
    flex: 1 1 auto;
}

.history-delete-form {
    flex: 0 0 auto;
    margin: 0;
}

.calendar-delete-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.history-delete-button {
    min-height: 44px;
    padding: 6px 9px;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fff;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.meal-log-form {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(220px, 2fr) minmax(150px, 1.25fr) minmax(150px, 1.25fr) minmax(110px, .9fr) minmax(130px, auto);
    align-items: start;
    gap: 12px;
}
.meal-log-recipe-field.is-enhanced #mealRecipe { display: none; }
.recipe-search-status { display: block; min-height: 1.2em; margin: 0 0 5px; color: #475569; font-size: 12px; line-height: 1.4; }
.recipe-search-matches { display: grid; gap: 5px; max-height: 260px; margin: 0 0 8px; padding: 5px; overflow-y: auto; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; }
.recipe-search-matches[hidden], .recipe-side-suggestions[hidden] { display: none !important; }
.recipe-search-result { display: grid; gap: 3px; width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #0f172a; text-align: left; font: inherit; cursor: pointer; }
.recipe-search-result:hover, .recipe-search-result:focus-visible { border-color: #1d4ed8; background: #eff6ff; }
.recipe-search-result[aria-pressed="true"] { border-color: #1e3a8a; background: #1e3a8a; color: #fff; }
.recipe-search-result-name { font-weight: 700; overflow-wrap: anywhere; }
.recipe-search-result-details { color: #475569; font-size: 12px; }
.recipe-search-result[aria-pressed="true"] .recipe-search-result-details { color: #e2e8f0; }
.recipe-side-suggestions { margin-top: 8px; padding: 10px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; }
.recipe-side-suggestions h3 { margin: 0; color: #0f172a; font-size: 14px; }
.recipe-side-suggestions h3 span { color: #475569; font-size: 12px; font-weight: 500; }
.recipe-side-suggestions p { margin: 4px 0 8px; color: #475569; font-size: 12px; line-height: 1.4; }
.recipe-side-suggestion-list { display: flex; flex-wrap: wrap; gap: 6px; }
.recipe-side-suggestion { min-height: 44px; padding: 7px 10px; border: 1px solid #1e3a8a; border-radius: 7px; background: #fff; color: #1e3a8a; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.recipe-side-suggestion[aria-pressed="true"] { background: #1e3a8a; color: #fff; }
.recipe-no-side-suggestions { margin: 0 !important; }
.recipe-search-result:focus-visible, .recipe-side-suggestion:focus-visible { outline: 3px solid #b45309; outline-offset: 2px; }

@media (min-width: 761px) {
    .meal-log-form > div {
        min-width: 0;
    }

    .meal-log-submit { align-self: end; }
}

.suggestion-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.suggestion-info-button {
    min-height: 44px;
    padding: 7px 10px;
    border: 1px solid #64748b;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.suggestion-info-button:focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 2px;
}

.suggestion-override-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.suggestion-override-option input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
}

.suggestion-rules-list {
    padding-left: 22px;
    color: #334155;
    line-height: 1.55;
}

.suggestion-rules-list li + li {
    margin-top: 8px;
}

.suggestion-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0 0 10px;
    color: #475569;
    font-size: 12px;
    line-height: 1.4;
}

.catalog-card-time {
    margin: 0 0 10px;
    color: #475569;
    font-size: 12px;
}

.active-filter-summary {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.active-filter-summary[hidden] {
    display: none;
}

.weekly-page {
    display: grid;
    width: min(1400px, 100%);
    gap: 20px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

.weekly-panel {
    min-width: 0;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.weekly-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.weekly-header h1,
.weekly-header h2,
.weekly-header p {
    margin: 0;
}

.weekly-header h1,
.weekly-header h2 {
    color: #0f172a;
}

.weekly-header p,
.calendar-help {
    margin-top: 5px;
    color: #475569;
    font-size: 14px;
}

.week-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.week-navigation a,
.move-meal-form button,
.print-list-button,
.auto-plan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 7px 12px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.auto-plan-form { margin: 0; }
.auto-plan-button { border-color: #075985; background: #075985; color: #fff; }
.auto-plan-button:hover { background: #0c4a6e; }
.auto-plan-preview-actions { margin: 14px 0 18px; gap: 8px; }
.auto-plan-preview-actions form { margin: 0; }
.auto-plan-preview-actions .auto-plan-confirm { background: #166534; border-color: #166534; color: #fff; }
.auto-plan-preview-actions .auto-plan-confirm:hover { background: #14532d; }
.auto-plan-preview-actions .auto-plan-regenerate { background: #fff; border-color: #94a3b8; color: #334155; }
.auto-plan-preview-actions .auto-plan-regenerate:hover { background: #f1f5f9; }
.auto-plan-preview-actions .auto-plan-cancel { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
.auto-plan-preview-actions .auto-plan-cancel:hover { background: #e2e8f0; }
.auto-plan-preview-actions .auto-plan-button:focus-visible { outline: 3px solid #b45309; outline-offset: 3px; }
.auto-plan-preview-actions .auto-plan-button:disabled { background: #e2e8f0; border-color: #e2e8f0; color: #64748b; cursor: not-allowed; }
.auto-plan-preview-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
.auto-plan-preview-meal { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; }
.auto-plan-preview-meal h3 { margin: 0; font-size: 14px; line-height: 1.4; color: #334155; }
.auto-plan-preview-details { min-width: 0; font-size: 14px; line-height: 1.4; }
.auto-plan-preview-details a { display: inline-block; color: #075985; font-weight: 600; overflow-wrap: anywhere; }
.auto-plan-preview-details p { margin: 4px 0 0; color: #475569; }
.auto-plan-preview-details .auto-plan-preview-protein { font-size: 12px; color: #64748b; }
@media (max-width: 700px) {
  .auto-plan-preview-list { display: block; margin: 8px 0; }
  .auto-plan-preview-meal { padding: 10px 0; border: 0; border-bottom: 1px solid #e2e8f0; border-radius: 0; gap: 10px; }
  .auto-plan-preview-meal:last-child { border-bottom: 0; }
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.week-day {
    min-width: 0;
    padding: 9px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

.week-day h2 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 14px;
}

.day-drop-zone {
    min-height: 138px;
    border-radius: 7px;
}

.day-drop-zone.is-drop-target {
    outline: 3px dashed #6d28d9;
    outline-offset: 2px;
    background: #f5f3ff;
}

.calendar-meal {
    margin-bottom: 6px;
    padding: 7px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    overflow-wrap: anywhere;
    cursor: grab;
}

.calendar-meal:focus-visible {
    outline: 3px solid #6d28d9;
    outline-offset: 2px;
}

.calendar-drag-hint {
    display: inline-flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
    color: #475569;
    font-size: 16px;
    font-weight: 700;
    cursor: grab;
    user-select: none;
}

.calendar-meal.is-dragging {
    opacity: .55;
}

.calendar-meal.is-keyboard-moving {
    outline: 3px solid #6d28d9;
    outline-offset: 2px;
}

.calendar-meal > a,
.calendar-recipe-link,
.calendar-sides a {
    color: #1d4ed8;
    font-weight: 700;
    text-underline-offset: 2px;
}

.calendar-meal-type,
.calendar-sides {
    margin: 0 0 3px;
    color: #475569;
    font-size: 12px;
}

.calendar-sides {
    margin-top: 4px;
}

.calendar-no-sides a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 0 4px;
}

.add-sides-page {
    width: min(680px, calc(100% - 32px));
    margin: 24px auto;
}

.add-sides-panel {
    padding: 22px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
}

.add-sides-panel h1 { margin: 0; color: #0f172a; font-size: 24px; }
.add-sides-meal { margin: 8px 0 0; color: #475569; }
.add-sides-panel a { color: #1d4ed8; font-weight: 700; text-underline-offset: 2px; }
.add-sides-form fieldset { display: grid; gap: 6px; margin: 18px 0; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; }
.add-sides-form legend { padding: 0 5px; font-weight: 700; }
.add-side-option { display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; }
.add-side-option input { width: 20px; height: 20px; accent-color: #1d4ed8; }
.add-sides-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.add-sides-actions button { min-height: 44px; padding: 8px 16px; border: 1px solid #1e3a8a; border-radius: 7px; background: #1e3a8a; color: #fff; font: inherit; font-weight: 700; }
.add-sides-panel :focus-visible { outline: 3px solid #b45309; outline-offset: 2px; }

.empty-day {
    margin: 0;
    padding: 8px 4px;
    color: #64748b;
    font-size: 12px;
}

.empty-day-actions {
    display: grid;
    gap: 4px;
    align-content: start;
}

.empty-day-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px;
    border-radius: 5px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-underline-offset: 2px;
}
.calendar-suggestion-form { margin: 0; }
.calendar-suggestion-action { display: inline-flex; align-items: center; min-height: 36px; padding: 4px; border: 0; border-radius: 5px; background: transparent; color: #1d4ed8; font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

@media (max-width: 760px) {
    .empty-day-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 8px;
    }

    .empty-day-actions a {
        min-height: 44px;
        padding: 4px 6px;
        font-size: 13px;
    }
    .calendar-suggestion-action { min-height: 44px; padding: 4px 6px; font-size: 13px; }
}

.empty-day-actions a:focus-visible {
    outline: 3px solid #6d28d9;
    outline-offset: 1px;
}

.calendar-scale-note {
    margin: 3px 0 0;
    color: #475569;
    font-size: 12px;
}

.calendar-scale-trigger { display: none; }
.calendar-sides-row { display: flex; align-items: center; gap: 8px; }
.calendar-sides-row .calendar-sides { flex: 1; min-width: 0; margin: 3px 0; }
.calendar-meal .calendar-recipe-row { display: flex; align-items: center; gap: 6px; }
.calendar-meal .calendar-recipe-link { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.calendar-meal .calendar-recipe-actions { margin: 0; gap: 2px; }
.calendar-meal .calendar-delete-button { min-width: 28px; min-height: 28px; padding: 0; border: 0; background: transparent; color: #b91c1c; font-size: 23px; line-height: 1; }
.calendar-meal .calendar-delete-button:hover { background: #fee2e2; }
.calendar-meal .calendar-drag-hint { flex-basis: 24px; min-height: 28px; }
.calendar-recipe-row { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.calendar-recipe-link { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.calendar-recipe-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.calendar-recipe-actions .calendar-delete-form { display: flex; justify-content: center; flex: 0 0 auto; margin: 0; }
.calendar-delete-button {
    min-width: 48px;
    min-height: 44px;
    padding: 5px 7px;
    border: 1px solid #fecaca;
    border-radius: 7px;
    background: #fff;
    color: #991b1b;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.calendar-delete-button:hover { background: #fef2f2; }
.calendar-delete-button:focus-visible { outline: 3px solid #b45309; outline-offset: 2px; }

.calendar-collision-dialog {
    width: min(440px, calc(100% - 32px));
    padding: 20px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 16px 44px #0f172a33;
}
.calendar-collision-dialog::backdrop { background: rgb(15 23 42 / 48%); }
.calendar-collision-dialog h2 { margin: 0; color: #0f172a; font-size: 20px; }
.calendar-collision-summary { margin: 10px 0 0; color: #334155; line-height: 1.4; }
.calendar-collision-replace-note { margin: 8px 0 0; color: #64748b; font-size: 13px; line-height: 1.4; }
.calendar-collision-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.calendar-collision-actions button { flex: 1 1 90px; min-height: 44px; padding: 8px 12px; border: 1px solid #64748b; border-radius: 8px; background: #fff; color: #0f172a; font: inherit; font-weight: 700; cursor: pointer; }
.calendar-collision-actions .calendar-collision-swap { border-color: #1e3a8a; background: #1e3a8a; color: #fff; }
.calendar-collision-actions .calendar-collision-replace { border-color: #b91c1c; color: #991b1b; }
.calendar-collision-actions .calendar-collision-replace:hover { background: #fef2f2; }
.calendar-collision-actions :focus-visible { outline: 3px solid #b45309; outline-offset: 2px; }

.move-meal-form {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
}

.move-meal-form label {
    grid-column: 1 / -1;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.move-meal-form select,
.move-meal-form input[type="date"],
.move-meal-form input[type="number"] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid #94a3b8;
    border-radius: 7px;
    padding: 5px;
    background: #fff;
    color: #0f172a;
}

.move-meal-form button {
    padding: 6px 8px;
}

.calendar-alert,
.calendar-success {
    margin: 14px 0;
    padding: 10px 12px;
    border-radius: 8px;
}

.calendar-alert { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; }
.calendar-success { border: 1px solid #86efac; background: #f0fdf4; color: #166534; }

.grocery-panel { max-width: 850px; }
.grocery-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.restore-grocery-button {
    min-height: 44px;
    border: 1px solid #64748b;
    border-radius: 8px;
    padding: 7px 11px;
    background: #fff;
    color: #1e293b;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.restore-grocery-button[hidden] { display: none; }
.grocery-list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.grocery-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; cursor: pointer; }
.grocery-item:hover { border-color: #64748b; background: #f1f5f9; }
.grocery-item[hidden] { display: none; }
.grocery-removed-panel { margin-top: 14px; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; }
.grocery-removed-panel[hidden] { display: none; }
.grocery-removed-panel > summary { min-height: 44px; padding: 11px 13px; color: #1e293b; font-weight: 700; cursor: pointer; }
.grocery-removed-help { margin: 0; padding: 0 13px 8px; color: #475569; font-size: 13px; }
.grocery-removed-list { display: grid; gap: 7px; margin: 0; padding: 0 10px 10px; list-style: none; }
.grocery-removed-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; }
.grocery-removed-item .grocery-item-content { flex: 1; }
.grocery-restore-item { flex: 0 0 auto; min-width: 72px; min-height: 40px; padding: 7px 10px; border: 1px solid #64748b; border-radius: 8px; background: #fff; color: #1e293b; font: inherit; font-weight: 700; cursor: pointer; }
.grocery-restore-item:focus-visible, .grocery-removed-panel > summary:focus-visible { outline: 3px solid #b45309; outline-offset: 2px; }
.grocery-item-content { display: grid; min-width: 0; gap: 3px; }
.grocery-item-kind { color: #475569; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.grocery-item-name { color: #0f172a; overflow-wrap: anywhere; }
.grocery-item-source { color: #64748b; font-size: 12px; overflow-wrap: anywhere; }
.grocery-empty { color: #475569; }
.grocery-remove-cue { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #94a3b8; border-radius: 999px; color: #334155; background: #fff; font-size: 12px; font-weight: 700; }
.grocery-item:focus-visible, .week-navigation a:focus-visible, .account-link:focus-visible { outline: 3px solid #b45309; outline-offset: 2px; }
.log-dinner-notice { margin: 10px 0 0; padding: 10px; border: 1px solid #fca5a5; border-radius: 8px; background: #fef2f2; color: #7f1d1d; }
.log-dinner-notice a { color: #075985; font-weight: 700; text-decoration: underline; }
.history-group { display: flex; flex-direction: column; gap: 12px; }
.history-date { margin: 0 0 2px; color: #475569; font-size: 12px; font-weight: 700; }
.history-recipe { margin: 0; font-size: 14px; font-weight: 700; }
.history-recipe a { color: #075985; text-decoration: underline; text-underline-offset: 2px; }
.history-recipe-meta { color: #475569; font-size: 12px; font-weight: 400; }
.history-sides { margin: 4px 0 0; color: #475569; font-size: 12px; }
.history-sides a { color: #334155; text-decoration: underline; }
.account-link { color: #fff; font-size: 13px; font-weight: 700; }
.share-recipe-form { display: flex; margin: 12px 0; }
.share-recipe-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    max-width: 100%;
    padding: 10px 16px;
    border: 2px solid #166534;
    border-radius: 8px;
    background: #166534;
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(15 23 42 / 16%);
}
.share-recipe-form button:hover { background: #14532d; border-color: #14532d; }
.share-recipe-form button:active { background: #14532d; transform: translateY(1px); }
.share-recipe-form button:focus-visible { outline: 3px solid #b45309; outline-offset: 3px; }
@media (max-width: 520px) {
    .share-recipe-form button { width: 100%; }
}
.suggestion-yield, .cook-yield { color: #334155; font-size: 13px; font-weight: 700; }
.recipe-scope-label { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #e0f2fe; color: #0c4a6e; font-size: 12px; font-weight: 700; }
.catalog-card a[href^="/recipe/"] { min-height: 44px; display: flex !important; align-items: center; justify-content: center; font-size: 14px !important; }
@media (max-width: 700px) {
  .auto-plan-form { width: 100%; }
  .auto-plan-button { width: 100%; }
  .empty-day { min-height: 0 !important; margin: 2px 0 !important; padding: 4px 0 !important; font-size: 12px; }
  .week-navigation { display: flex !important; flex-wrap: wrap; gap: 6px; }
  .week-navigation a { min-height: 40px; display: inline-flex; align-items: center; padding: 4px 9px; }
  .grocery-item { align-items: center !important; }
  .grocery-remove-cue { font-size: 11px; padding: 5px 7px; }
}

@media (max-width: 760px) {
    .calendar-meal .move-meal-form { display: none !important; }
    .calendar-recipe-row { align-items: center; }
    .calendar-meal .calendar-scale-note { display: none; }
    .calendar-drag-hint { flex-basis: 26px; min-height: 44px; }
    .calendar-recipe-actions { gap: 3px; }
    .calendar-meal .calendar-scale-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        min-height: 32px;
        flex: 0 0 auto;
        margin: 0;
        padding: 2px 5px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #075985;
        font: inherit;
        font-size: 14px;
        font-weight: 750;
        cursor: pointer;
    }
    .calendar-meal .calendar-scale-trigger:hover { background: #dbeafe; }
    .calendar-meal .calendar-delete-button { min-width: 40px; min-height: 32px; padding: 2px 5px; }
    .calendar-meal .calendar-scale-trigger:focus-visible,
    .calendar-scale-sheet :focus-visible { outline: 3px solid #7c3aed; outline-offset: 3px; }

    .calendar-scale-sheet[open] {
        position: fixed;
        inset: auto 0 0;
        width: 100%;
        max-width: none;
        max-height: min(78dvh, 520px);
        margin: 0;
        overflow-y: auto;
        padding: 10px 18px max(18px, env(safe-area-inset-bottom));
        border: 1px solid #cbd5e1;
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        background: #fff;
        color: #0f172a;
        box-shadow: 0 -8px 28px #0f172a2b;
    }
    .calendar-collision-dialog[open] {
        position: fixed;
        inset: auto 0 0;
        width: 100%;
        max-width: none;
        max-height: min(78dvh, 480px);
        margin: 0;
        overflow-y: auto;
        padding: 18px 18px max(18px, env(safe-area-inset-bottom));
        border: 1px solid #cbd5e1;
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        background: #fff;
        color: #0f172a;
    }
    .calendar-collision-dialog::backdrop { background: rgb(15 23 42 / 52%); }
    .calendar-collision-actions { gap: 7px; }
    .calendar-collision-actions button { flex-basis: 76px; padding: 8px 7px; }
    .calendar-scale-sheet::backdrop { background: rgb(15 23 42 / 52%); }
    .calendar-scale-handle { width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: #94a3b8; }
    .calendar-scale-sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .calendar-scale-sheet-heading h2 { margin: 0; color: #0f172a; font-size: 19px; }
    .calendar-scale-close { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: #0f172a; font-size: 24px; cursor: pointer; }
    .calendar-scale-recipe { margin: 0 0 10px; color: #475569; font-size: 13px; }
    .calendar-scale-options { margin: 8px 0 0; padding: 0; border: 0; }
    .calendar-scale-options legend { margin-bottom: 7px; color: #334155; font-size: 13px; font-weight: 700; }
    .calendar-scale-presets { display: flex; flex-wrap: wrap; gap: 8px; }
    .calendar-scale-preset { min-width: 52px; min-height: 44px; padding: 7px 11px; border: 1px solid #64748b; border-radius: 9px; background: #fff; color: #0f172a; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
    .calendar-scale-preset[aria-pressed="true"] { border-color: #1e3a8a; background: #1e3a8a; color: #fff; }
    .calendar-scale-custom { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
    .calendar-scale-custom[hidden] { display: none; }
    .calendar-scale-custom label { color: #334155; font-size: 13px; font-weight: 700; }
    .calendar-scale-custom input { width: 100px; min-height: 44px; padding: 7px 9px; border: 1px solid #64748b; border-radius: 8px; background: #fff; color: #0f172a; font: inherit; font-size: 16px; }
    .calendar-scale-help { margin: 10px 0 0; color: #475569; font-size: 12px; line-height: 1.4; }
    .calendar-scale-actions { margin-top: 12px; }
    .calendar-scale-apply { width: 100%; min-height: 46px; padding: 9px 14px; border: 0; border-radius: 9px; background: #1e3a8a; color: #fff; font: inherit; font-weight: 750; cursor: pointer; }
}

@media (max-width: 760px) {
    .site-header-brand { align-items: center !important; flex-direction: row !important; }
    .site-nav { gap: 2px !important; }
    .site-nav .nav-button {
        min-width: 0 !important;
        min-height: 56px !important;
        flex: initial !important;
        padding: 5px 1px !important;
        font-size: 12px !important;
    }

    .site-nav .nav-button,
    .site-nav .nav-button:visited {
        border-color: #dbeafe !important;
        background: #dbeafe !important;
        color: #0f172a !important;
    }

    .site-nav .nav-button:hover,
    .site-nav .nav-button:visited:hover {
        border-color: #dbeafe !important;
        background: #dbeafe !important;
        color: #0f172a !important;
    }

    .site-nav .nav-button[aria-current="page"],
    .site-nav .nav-button[aria-current="page"]:hover,
    .site-nav .nav-button[aria-current="page"]:visited {
        border-color: #fbbf24 !important;
        background: #fbbf24 !important;
        color: #111827 !important;
    }
}

.account-page { min-height: 100vh; margin: 0; background: #f8fafc; color: #0f172a; font-family: Arial, sans-serif; }
.account-page > .site-header { padding: 16px 24px; background: #0f172a; color: #fff; }
.account-page .site-title { color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; }
.account-shell { width: min(760px, calc(100% - 32px)); margin: 24px auto; padding: 24px; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; }
.account-shell h1 { margin-top: 0; }
.account-shell section { margin: 24px 0; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.account-form { display: grid; gap: 10px; margin: 14px 0; }
.account-form label { display: grid; gap: 5px; font-weight: 700; }
.account-form input, .account-form select { min-height: 44px; padding: 9px; border: 1px solid #64748b; border-radius: 7px; font: inherit; }
.account-form button, .invite-result button { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 7px; background: #075985; color: #fff; font: inherit; font-weight: 700; }
.account-form fieldset { display: grid; gap: 10px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px; }
.account-form fieldset label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.account-form fieldset input[type="radio"] { width: 20px; min-height: 20px; margin: 0; accent-color: #075985; }
.home-calendar-preview { margin-top: 24px; padding: 20px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; }
.home-calendar-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-calendar-preview-header h2 { margin: 0; font-size: 18px; white-space: nowrap; }
.home-calendar-preview-header a, .home-calendar-actions a { color: #075985; font-weight: 700; }
.home-calendar-preview-header a { display: inline-flex; min-height: 44px; align-items: center; white-space: nowrap; }
.home-calendar-preview-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.home-calendar-preview-day { min-width: 0; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; }
.home-calendar-preview-day h3 { margin: 0 0 8px; font-size: 14px; }
.home-calendar-type { margin: 8px 0 3px; color: #475569; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.home-calendar-meal, .home-calendar-sides, .home-calendar-empty { margin: 6px 0; font-size: 13px; }
.home-calendar-scale { margin: 4px 0; color: #475569; font-size: 12px; }
.home-calendar-sides { color: #475569; }
.home-calendar-preview-day a { overflow-wrap: anywhere; }
.meal-log-submit { display: flex; gap: 8px; }
.grocery-delete-removed { min-height: 44px; padding: 6px 10px; border: 1px solid #fecaca; border-radius: 6px; background: #fff; color: #b91c1c; font: inherit; cursor: pointer; }
.grocery-delete-removed:hover { background: #fef2f2; }
.grocery-removed-item { flex-wrap: wrap; gap: 8px; }
.grocery-removed-item .grocery-item-content { flex: 1 1 180px; }
.meal-log-form:has(.plan-narrowing) { display: block; }
.meal-log-form:has(.plan-narrowing) > .meal-log-field { max-width: 240px; margin-bottom: 12px; }
.plan-narrowing { border: 1px solid #cbd5e1; border-radius: 8px; }
.plan-narrowing > summary { padding: 12px; min-height: 44px; box-sizing: border-box; color: #075985; font-weight: 700; cursor: pointer; }
.plan-narrowing-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 0 12px 12px; }
.plan-narrowing-fields .meal-log-recipe-field { grid-column: 1 / -1; }
.plan-override { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.plan-ideas-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-ideas-header button { min-height: 44px; padding: 8px 12px; border-radius: 6px; font: inherit; cursor: pointer; }
.plan-rules { margin: 8px 0; color: #475569; font-size: 12px; }
.plan-rules summary { min-height: 32px; cursor: pointer; }
.matching-meal-suggestion-cards form > button { width: 100%; min-height: 44px; border-radius: 7px; padding: 8px; font: inherit; font-weight: 700; cursor: pointer; margin-top: 8px; }
.matching-meal-suggestion-cards details summary { min-height: 44px; display: flex; align-items: center; color: #075985; cursor: pointer; }
.matching-meal-suggestion-cards label { display: grid; gap: 4px; margin: 8px 0; }
.custom-dinner-entry { flex-basis: 100%; }
.week-day .empty-day-actions { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); align-items: start; gap: 0 8px; padding: 0; }
.week-day .empty-day-actions .empty-day { grid-column: 1 / -1; }
.week-day .empty-day-actions > a, .week-day .empty-day-actions .calendar-suggestion-action, .week-day .custom-dinner-entry > summary { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 4px; font-size: 13px; font-weight: 700; color: #075985; }
.week-day .custom-dinner-entry { min-width: 0; }
.week-day .custom-dinner-entry > summary { text-decoration: underline; text-underline-offset: 2px; }
.week-day .custom-dinner-entry[open] { grid-column: 1 / -1; }
.custom-dinner-entry > summary { color: #075985; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.custom-dinner-form { display: grid; gap: 8px; padding: 10px 0; }
.custom-dinner-form label { display: grid; gap: 4px; font-size: 13px; }
.custom-dinner-form input, .custom-dinner-form textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }
.custom-dinner-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.custom-dinner-form button { padding: 6px 10px; min-height: 44px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #075985; font: inherit; cursor: pointer; }
.calendar-custom-notes { color: #475569; font-size: 12px; margin: 4px 0 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .plan-narrowing-fields { grid-template-columns: minmax(0, 1fr); } }
.meal-log-submit button { flex: 1; min-height: 44px; padding: 9px 12px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.meal-plan-button { border: 1px solid #2563eb; background: #2563eb; color: #fff; }
.meal-suggest-button { border: 1px solid #94a3b8; background: #fff; color: #334155; }
.matching-meal-suggestions { margin-top: 18px; border-top: 1px solid #e2e8f0; padding-top: 14px; }
.matching-meal-suggestions h2 { font-size: 16px; margin: 0 0 8px; }
.matching-meal-suggestion-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.matching-meal-suggestion-cards article { padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; }
.matching-meal-suggestion-cards article > a { color: #075985; font-weight: 700; }
.matching-meal-suggestion-cards p { color: #64748b; font-size: 12px; margin: 6px 0 10px; }
.home-calendar-actions { display: flex; align-items: center; gap: 16px; }
.home-calendar-actions > a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; box-sizing: border-box; line-height: 1.4; }
.home-calendar-suggest-form { display: flex; align-items: center; margin: 0; }
.home-calendar-actions .home-calendar-suggest-button { display: inline-flex; align-items: center; box-sizing: border-box; line-height: 1.4; }
.home-calendar-suggest-button { min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: #075985; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@media (max-width: 600px) { .home-calendar-preview { padding: 14px; } .home-calendar-preview-days { grid-template-columns: 1fr; gap: 8px; } .home-calendar-preview-day { padding: 10px; } }
.family-member-list { padding-left: 20px; }
.family-member-list li { margin: 8px 0; }
.invite-result { display: grid; gap: 8px; padding: 14px; background: #f1f5f9; border-radius: 8px; }
.invite-result input { width: 100%; min-height: 44px; padding: 8px; }
.success-message { color: #14532d; background: #f0fdf4; border: 1px solid #86efac; padding: 10px; }
.error-message { color: #7f1d1d; background: #fef2f2; border: 1px solid #fca5a5; padding: 10px; }
@media (max-width: 760px) {
  .account-page > .site-header { padding: 12px !important; }
  .account-shell { width: calc(100% - 20px); margin: 12px auto; padding: 16px; }
}
@media (max-width: 380px) {
  .site-nav { flex-wrap: nowrap; justify-content: space-between; gap: 3px; padding: 0; }
  .site-nav .nav-button { min-width: 0; min-height: 44px; padding: 4px 3px; font-size: 12px; white-space: nowrap; }
}
.grocery-note { margin: 20px 0 0; color: #475569; font-size: 13px; }

.cook-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cook-header a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 700; text-underline-offset: 3px; }
.cook-header span { color: #cbd5e1; font-size: 14px; }
.cook-page { display: grid; align-content: start; gap: 20px; width: min(820px, 100%); margin: 0 auto; padding: 24px 16px 48px; }
.cook-title-block { padding: 6px 2px 0; }
.cook-eyebrow { margin: 0 0 5px; color: #475569; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cook-title-block h1 { margin: 0; color: #0f172a; font-size: clamp(26px, 6vw, 38px); line-height: 1.2; overflow-wrap: anywhere; }
.cook-time { margin: 8px 0 0; color: #475569; font-size: 15px; }
.cook-ingredients, .cook-step-panel { border: 1px solid #cbd5e1; border-radius: 14px; background: #fff; }
.cook-ingredients { padding: 14px 16px; }
.cook-ingredients summary { min-height: 44px; color: #0f172a; font-size: 17px; font-weight: 700; cursor: pointer; }
.cook-ingredients summary span { color: #64748b; font-weight: 500; }
.cook-ingredients[open] summary { margin-bottom: 12px; }
.cook-ingredients .ingredient-reset { margin-top: 4px; }
.cook-no-ingredients { color: #475569; }
.cook-step-panel { display: grid; gap: 18px; padding: clamp(18px, 5vw, 32px); box-shadow: 0 8px 22px rgb(15 23 42 / 7%); }
.cook-progress { margin: 0; color: #334155; font-size: 14px; font-weight: 700; }
.cook-progress-bar { width: 100%; height: 10px; accent-color: #6d28d9; }
.cook-step-content { min-height: 210px; }
.cook-step[hidden] { display: none; }
.cook-step h2 { margin: 0 0 16px; color: #475569; font-size: 18px; }
.cook-step p { margin: 0; color: #0f172a; font-size: clamp(23px, 5vw, 32px); line-height: 1.5; overflow-wrap: anywhere; }
.cook-step-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cook-step-controls button { min-height: 58px; border: 2px solid #1d4ed8; border-radius: 10px; padding: 10px 16px; background: #1d4ed8; color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.cook-step-controls button:first-child { background: #fff; color: #1e293b; border-color: #64748b; }
.cook-step-controls button:disabled { opacity: .48; cursor: not-allowed; }

@media (min-width: 761px) and (max-width: 1050px) {
    .meal-log-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.recipe-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.recipe-section-heading h1,
.recipe-section-heading h2 {
    margin: 0;
    color: #0f172a;
}

.recipe-section-heading h1 {
    font-size: 28px;
    line-height: 1.25;
}

.recipe-section-heading h2 {
    font-size: 19px;
}

.section-edit-toggle,
.save-section-button,
.cancel-section-button {
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid #1d4ed8;
    border-radius: 8px;
    background: #1d4ed8;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.section-edit-toggle:hover,
.save-section-button:hover {
    background: #1e40af;
}

.section-edit-toggle:focus-visible,
.save-section-button:focus-visible,
.cancel-section-button:focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 2px;
}

.section-readonly {
    color: #334155;
    font-size: 15px;
    line-height: 1.6;
}

.section-readonly p {
    margin: 8px 0;
}

.recipe-text-content {
    white-space: pre-line;
}

.side-ingredient-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 1.5rem;
    color: #334155;
    line-height: 1.55;
}

.recipe-instruction-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 1.5rem;
    color: #334155;
    line-height: 1.6;
}

.recipe-save-status,
.recipe-edit-error {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 8px;
}

.recipe-save-status {
    border: 1px solid #86efac;
    background: #f0fdf4;
    color: #166534;
}

.recipe-edit-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.ingredient-reset {
    min-height: 44px;
    margin: 0 0 8px;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font-weight: 700;
    cursor: pointer;
}

.ingredient-checklist {
    display: grid;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ingredient-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    color: #334155;
    cursor: pointer;
}

.ingredient-scale-form {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    margin: 6px 0 8px;
    padding: 0;
    color: #334155;
    font-size: 12px;
}

.ingredient-scale-form input,
.cook-scale-form input {
    width: 68px;
    min-width: 0;
    min-height: 44px;
    padding: 5px 6px;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.suggestion-scale-control input {
    width: 92px;
    min-height: 40px;
    padding: 7px;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    font: inherit;
}

.ingredient-scale-form label,
.cook-scale-form label {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.ingredient-scale-form .scale-times,
.cook-scale-form .scale-times {
    margin-left: -2px;
    color: #475569;
    font-size: 14px;
}

.ingredient-scale-form button,
.cook-scale-form button {
    min-height: 44px;
    padding: 5px 10px;
    font-size: 12px;
}

.suggestion-scale-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.cook-scale-form {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 0;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.ingredient-check {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 0 0;
    border: 2px solid #64748b;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: initial;
}

.ingredient-check:checked {
    border-color: #6d28d9;
    background: radial-gradient(circle, #6d28d9 0 5px, #fff 5.5px);
}

.ingredient-check:focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 2px;
}

.ingredient-check:checked + .ingredient-check-text {
    color: #64748b;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.ingredient-empty {
    margin: 0;
}

.section-edit-form[hidden] {
    display: none;
}

.section-edit-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.section-edit-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.section-edit-form input,
.section-edit-form select,
.section-edit-form textarea {
    width: 100%;
    border: 1px solid #94a3b8;
    border-radius: 8px;
    padding: 10px 12px;
    color: #0f172a;
    background: #fff;
    font: inherit;
    font-weight: 400;
}

.section-edit-form textarea {
    resize: vertical;
    line-height: 1.5;
}

.section-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cancel-section-button {
    border-color: #64748b;
    background: #fff;
    color: #1e293b;
}

.cancel-section-button:hover {
    background: #f1f5f9;
}

/* Compact app-style navigation on phone-sized viewports. */
.site-title-mobile,
.nav-label-mobile { display: none; }
.site-nav .nav-button svg { display: none; }
.cook-mobile-nav { display: none; }
.account-signout { margin: 0 0 20px; }
.account-top-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 20px; }
.account-top-actions .account-signout { margin: 0; }
.account-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 16px; }
.account-title-row h1 { margin: 0; }
.account-title-row .account-signout { margin: 0; flex: 0 0 auto; }
.account-signout button {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #64748b;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-weight: 700;
}
.account-signout button:focus-visible { outline: 3px solid #7c3aed; outline-offset: 3px; }

@media (max-width: 760px) {
    .cook-mobile-nav { display: block; }
    .site-header,
    .account-page > .site-header {
        align-items: stretch !important;
        gap: 0;
        padding: 8px 14px !important;
    }

    .site-header-brand {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 48px;
    }

    .site-header-brand .site-title {
        min-width: 0;
        font-size: 18px !important;
        line-height: 1.2;
        overflow-wrap: normal;
        white-space: nowrap;
    }

    .site-title-desktop,
    .site-header-brand .site-subtitle,
    .site-header-brand .account-context { display: none !important; }
    .site-title-mobile { display: inline !important; }

    .site-header-brand .account-link {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
        align-items: center;
        justify-content: center;
        min-width: 72px;
        min-height: 44px;
        padding: 6px 10px;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        background: #1e293b;
        color: #fff;
        font-size: 14px;
        text-decoration: none;
    }

    .site-nav {
        position: fixed;
        z-index: 1000;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        gap: 2px;
        width: 100%;
        margin: 0;
        padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
        border-top: 1px solid #475569;
        background: #0f172a;
        box-shadow: 0 -4px 14px rgb(15 23 42 / 16%);
    }

    .site-nav .nav-button {
        display: flex;
        min-width: 0;
        min-height: 56px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 5px 1px;
        border: 2px solid transparent;
        border-radius: 10px;
        background: transparent;
        color: #f8fafc;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
    }

    .site-nav .nav-button svg {
        display: block;
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .nav-label-desktop { display: none; }
    .nav-label-mobile { display: inline !important; }

    .site-nav .nav-button[aria-current="page"] {
        border-color: #fbbf24;
        background: #fbbf24;
        color: #111827;
        font-weight: 700;
    }

    .site-nav .nav-button:focus-visible,
    .site-header-brand .account-link:focus-visible {
        position: relative;
        z-index: 1;
        outline: 3px solid #fde047;
        outline-offset: 1px;
    }

    .site-shell,
    .account-page {
        padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    }

    .account-signout button { width: auto; }
}

html {
    -webkit-text-size-adjust: 100%;
}

@media (max-width: 760px) {
    body {
        overflow-x: hidden;
        font-size: 16px;
    }

    .cook-header { padding: 8px 12px !important; }
    .cook-header span { font-size: 12px; }
    .cook-page { gap: 14px; padding: 18px 12px 32px; }
    .cook-step-content { min-height: 230px; }

    .site-header {
        padding: 14px 16px !important;
        gap: 8px;
        align-items: stretch !important;
    }

    .site-header h1 {
        font-size: 18px !important;
        line-height: 1.35;
    }

    .site-header .account-context {
        font-size: 12px !important;
    }

    .site-header-brand {
        align-items: center;
        gap: 8px;
    }

    .site-title {
        font-size: 18px !important;
        line-height: 1.35;
    }

    .site-nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 3px;
        min-width: 0;
    }

    .site-nav .nav-button {
        flex: 0 1 auto;
        min-width: 44px;
        padding: 6px 3px;
        min-height: 44px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
    }

    .catalog-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .catalog-toolbar > #searchBox {
        width: 100% !important;
        flex: initial !important;
    }

    .desktop-filter-slot {
        display: none;
    }

    .mobile-filter-button {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid #334155;
        border-radius: 8px;
        padding: 8px 10px;
        background: #0f172a;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

    .mobile-filter-button svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

    .catalog-toolbar .desktop-filter-slot:has(#filterControls) {
        display: none;
    }

    .dashboard-layout {
        display: flex !important;
        flex-direction: column;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 12px !important;
    }

    .dashboard-layout > div[style*="background: white"] {
        padding: 16px !important;
    }

    .suggestion-grid article {
        padding: 12px !important;
    }

    .suggestion-description {
        display: none;
    }

    .suggestion-header {
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .suggestion-actions {
        display: block;
        width: 100%;
    }

    .suggestion-actions > form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start !important;
        width: 100%;
        gap: 8px !important;
    }

    .suggestion-actions > form > label:first-child {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .suggestion-actions > form > label:first-child input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .suggestion-actions > form > button {
        grid-column: 2;
        grid-row: 1;
        min-height: 44px;
        align-self: end;
    }

    .suggestion-actions > form > .suggestion-override-option {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        align-self: start;
    }

    .suggestion-actions > form > .suggestion-info-button {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    .recipe-detail-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 12px !important;
    }

    .recipe-detail-main > div {
        padding: 20px 16px !important;
    }

    .recipe-detail-card {
        padding: 20px 16px !important;
    }

    .recipe-section-heading {
        align-items: flex-start;
        flex-direction: row;
    }

    .recipe-section-heading h1,
    .recipe-section-heading h2 {
        min-width: 0;
        flex: 1 1 auto;
    }

    .recipe-section-heading h1 {
        font-size: 23px;
        overflow-wrap: anywhere;
    }

    .section-edit-toggle {
        width: auto;
        min-height: 44px;
        flex: 0 0 auto;
        padding: 7px 9px;
        font-size: 13px;
    }

    .meal-log-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .recipe-grid,
    .suggestion-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .recipe-card,
    .suggestion-grid article {
        min-width: 0;
    }

    .recipe-edit-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .recipe-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .recipe-detail-main h1 {
        font-size: 24px !important;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    #searchBox {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    input,
    select,
    textarea {
        max-width: 100%;
        min-height: 44px;
        font-size: 16px !important;
    }

    textarea {
        min-height: 12rem;
    }

    button {
        min-height: 44px;
    }

.history-entry {
        align-items: center !important;
        gap: 8px;
        padding: 8px 9px;
    }

    .history-delete-button {
        min-height: 44px;
        padding: 6px 8px;
    }

    .weekly-page {
        padding: 16px 8px 28px;
        gap: 14px;
    }

    .weekly-panel {
        padding: 14px;
    }

    .week-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .week-day {
        padding: 12px;
    }

    .day-drop-zone {
        min-height: 72px;
    }

    .move-meal-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .grocery-item { align-items: flex-start; gap: 8px; padding: 12px; }
}

.history-panel .dashboard-page-title { font-size: 24px; line-height: 1.25; }
.history-empty-state p { margin: 0 0 12px; color: #475569; font-size: 15px; line-height: 1.5; }
.history-empty-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 8px; background: #075985; color: #fff; font-weight: 700; text-decoration: none; }
.history-empty-action:focus-visible { outline: 3px solid #b45309; outline-offset: 2px; }

@media (max-width: 380px) {
    .site-nav .nav-button {
        padding: 6px 2px;
        font-size: 13px;
    }

    .dashboard-layout {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .recipe-detail-main {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .recipe-detail-main > div {
        padding: 16px 12px !important;
    }

    .cook-page { padding-right: 8px; padding-left: 8px; }
    .cook-step-panel { padding: 16px 12px; }
    .cook-step-content { min-height: 260px; }
    .cook-step-controls { gap: 8px; }
    .cook-step-controls button { padding: 8px; font-size: 15px; }
}

@media (max-width: 340px) {
    .site-nav {
        gap: 2px;
    }

    .site-nav .nav-button {
        font-size: 12px;
    }
}

/* Calendar hybrid: readable four-day rows on desktop, compact agenda on phones. */
.week-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.week-day {
    padding: 12px;
}

.calendar-recipe-row {
    display: block;
}

.calendar-recipe-link {
    display: block;
    line-height: 1.35;
}

.calendar-recipe-actions {
    justify-content: flex-start;
    margin-top: 6px;
}

.calendar-recipe-actions .calendar-delete-form {
    margin-left: auto;
}

@media (min-width: 761px) and (max-width: 1080px) {
    .week-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .week-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .week-day {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        padding: 12px 2px;
        border: 0;
        border-bottom: 1px solid #cbd5e1;
        border-radius: 0;
        background: transparent;
    }

    .week-day h2 {
        margin: 3px 0 0;
        line-height: 1.3;
    }

    .day-drop-zone {
        min-height: 0;
    }

    .calendar-meal {
        margin: 0;
        padding: 10px;
    }

    .calendar-recipe-row {
        display: block;
    }

    .calendar-recipe-link {
        font-size: 15px;
    }

    .calendar-recipe-actions {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        margin-top: 2px;
    }

    .calendar-recipe-actions .calendar-delete-form {
        margin-left: auto;
    }

    .calendar-drag-hint {
        flex-basis: 24px;
        min-height: 32px;
    }

    .empty-day-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 8px;
        padding: 2px 0;
    }

    .empty-day-actions .empty-day {
        flex-basis: 100%;
        padding: 2px 0;
    }

    .empty-day-actions a {
        min-height: 44px;
        padding: 4px 6px;
    }
}

@media print {
    .site-header, .cook-header, .week-navigation, .move-meal-form, .calendar-scale-trigger, .calendar-scale-sheet, .calendar-help, .print-list-button, .restore-grocery-button, .grocery-removed-panel { display: none !important; }
    .weekly-page { display: block; padding: 0; }
    .weekly-panel { border: 0; padding: 0; }
    .week-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 700px) {
  .empty-day { min-height: 0 !important; margin: 2px 0 !important; padding: 4px 0 !important; font-size: 12px; }
  .week-navigation { display: flex !important; flex-wrap: wrap; gap: 6px; }
  .week-navigation a { min-height: 40px; display: inline-flex; align-items: center; padding: 4px 9px; }
  .grocery-item { align-items: center !important; }
  .grocery-remove-cue { font-size: 11px; padding: 5px 7px; }
}

@media (max-width: 760px) {
  .site-nav .nav-history-tab { display: flex !important; }
  .calendar-drag-hint { touch-action: none; }
  .site-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .site-nav .nav-button {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0;
    border-radius: 0;
  }
}

/* Desktop screens share a header, heading scale, and spacing rhythm. */
@media (min-width: 761px) {
    .site-header, .account-page > .site-header { padding: 16px 32px; }
    .site-header-brand, .site-header > .site-nav { width: 100%; max-width: 1168px; margin-inline: auto; }
    .site-header-brand { flex-wrap: wrap; align-items: center; }
    .site-header-brand .site-title { font-size: 20px; line-height: 1.3; font-weight: 700; }
    .site-subtitle { font-size: 14px; color: #94a3b8; }
    .site-header-brand .account-link { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; }
    .weekly-page { width: min(1200px, 100%); padding-top: 32px; }
    .weekly-panel { padding: 24px; }
    .weekly-header { margin-bottom: 16px; }
    .week-grid { align-items: start; }
    .account-shell, .recipe-create-page { margin-top: 32px; }
    .account-shell h1, .recipe-create-page h1, .page-shell h1,
    .statistics-page h1, .admin-page h1 { font-size: 22px; line-height: 1.3; margin: 0 0 12px; }
    .account-title-row h1 { margin: 0; }
    .account-shell h2, .history-panel section > h2, .recipe-section > h2 { font-size: 20px; line-height: 1.3; margin: 0 0 12px; }
    .account-shell section { padding-top: 20px; }
    .account-form button { justify-self: start; }
    .account-form p { margin: 4px 0 12px; line-height: 1.45; }
    .catalog-toolbar { align-items: end; }
    .catalog-toolbar > #searchBox { min-height: 44px; font-size: 14px; }
    .recipe-card a[href^="/recipe/"] { min-height: 40px; display: flex !important; align-items: center; justify-content: center; font-size: 14px !important; }
    .move-meal-form { grid-template-columns: 76px auto; justify-content: flex-start; }
    .move-meal-form input[name="scale_factor"] { flex: 0 0 76px; width: 76px; }
    .day-drop-zone { min-height: 104px; }
    .recipe-section { margin-top: 20px; padding-top: 16px; }
    .recipe-detail-card > .recipe-section:first-of-type { margin-top: 16px; padding-top: 0; }
    .recipe-detail-main h1 { font-size: 26px !important; line-height: 1.3; }
    .statistics-page { padding-top: 32px; }
    .statistics-page > p:first-child { margin: 0 0 16px; }
    .statistics-period h2 { min-height: 2.6em; }
    .page-shell { padding: 24px; margin-top: 32px !important; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
    #import-url-form input { font: inherit; min-height: 44px; border: 1px solid #64748b; border-radius: 7px; }
    #import-url-form button { padding: 8px 14px; min-height: 44px; border: 0; border-radius: 8px; background: #075985; color: #fff; font: inherit; font-weight: 700; }
    .recipe-create-form textarea[name="flavor_profile_notes"], .recipe-create-form textarea[name="chef_notes_and_tips"] { min-height: 100px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
    .site-header-brand .site-subtitle { display: none; }
    .week-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .statistics-period-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Shared mobile rhythm across planning, account, and recipe screens. */
@media (max-width: 760px) {
    .site-header, .account-page > .site-header { padding: 8px 14px !important; }
    .site-header-brand .site-title { font-size: 22px !important; line-height: 1.2; }
    .site-title-mobile { font-size: inherit; }
    .auth-screen { width: calc(100% - 24px); margin: 24px auto; padding: 16px; }
    .auth-screen h1 { font-size: 22px; line-height: 1.3; margin: 0 0 12px; }
    .dashboard-layout { padding: 16px 12px !important; gap: 16px !important; }
    .weekly-page { padding: 16px 12px 28px; }
    .weekly-panel, .grocery-panel { padding: 16px; }
    .account-shell, .recipe-create-page { width: calc(100% - 24px); margin: 16px auto; padding: 16px; }
    .page-shell { width: calc(100% - 24px) !important; margin: 16px auto !important; }
    .account-shell h1, .recipe-create-page h1, .page-shell h1,
    .statistics-page h1, .admin-page h1 { font-size: 22px; line-height: 1.3; margin: 0 0 12px; }
    .account-title-row h1 { margin: 0; }
    .account-shell h2 { font-size: 20px; line-height: 1.3; margin: 0 0 12px; }
    .account-shell section { margin: 20px 0; padding-top: 16px; }
    .statistics-page { display: block !important; }
    .statistics-page > p:first-child { margin: 0 0 16px; }
    .statistics-intro { margin: 0 0 16px; line-height: 1.45; }
    .statistics-period-grid { margin-top: 16px; }
    .history-heading-row { align-items: flex-start; gap: 8px; margin-bottom: 12px; }
    .history-heading-row .dashboard-page-title { margin-bottom: 0; }
    .recipe-card a[href^="/recipe/"] { min-height: 44px; display: flex !important; align-items: center; justify-content: center; font-size: 14px !important; }
    .recipe-detail-card > div:first-of-type { margin-bottom: 16px !important; }
    .recipe-section { margin-top: 20px; padding-top: 16px; }
    .recipe-detail-card > .recipe-section:first-of-type { margin-top: 16px; padding-top: 0; }
    .recipe-section > h2, .history-panel section > h2 { font-size: 20px; line-height: 1.3; margin: 0 0 12px; }
}

/* Consistent page headers and action roles. */
.page-heading-row, .history-heading-row, .catalog-heading-row, .plan-ideas-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    min-height: 44px; gap: 12px; margin-bottom: 16px;
}
.page-heading-row h1.dashboard-page-title, .history-heading-row h1.dashboard-page-title,
.catalog-heading-row h1.dashboard-page-title, .plan-ideas-header h2 { margin: 0; }
.recipe-catalog-actions { margin: 0; }
.matching-meal-suggestion-cards article { display: flex; flex-direction: column; }
.matching-meal-suggestion-cards article > form { margin-top: auto; padding-top: 12px; }
.plan-narrowing-fields { align-items: end; }
.plan-narrowing-fields input:not([type="checkbox"]), .plan-narrowing-fields select { min-height: 44px; }
:is(.meal-plan-button, .meal-suggest-button, .history-statistics-link, .import-recipe-button,
.create-recipe-button, .auto-plan-button, .week-navigation a, .move-meal-form button,
.clear-filter-button, .recipe-card a[href^="/recipe/"]) {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 44px !important; padding: 8px 14px !important; border-radius: 8px !important;
    font-family: inherit; font-size: 14px !important; font-weight: 700; line-height: 1.25;
    text-align: center; text-decoration: none; box-sizing: border-box;
}
:is(.meal-plan-button, .create-recipe-button, .auto-plan-button) {
    border: 1px solid #075985 !important; background: #075985 !important; color: #fff !important;
}
:is(.meal-suggest-button, .history-statistics-link, .import-recipe-button,
.week-navigation a, .move-meal-form button, .clear-filter-button, .recipe-card a[href^="/recipe/"]) {
    border: 1px solid #94a3b8 !important; background: #fff !important; color: #075985 !important;
}
:is(.meal-plan-button, .create-recipe-button, .auto-plan-button):hover { background: #0c4a6e !important; }
:is(.meal-suggest-button, .history-statistics-link, .import-recipe-button,
.week-navigation a, .move-meal-form button, .clear-filter-button, .recipe-card a[href^="/recipe/"]):hover { background: #f0f9ff !important; }
@media (min-width: 761px) {
    .weekly-header { align-items: flex-start; }
    .weekly-header h1.dashboard-page-title { display: flex; align-items: center; min-height: 44px; margin: 0; }
    .weekly-header p { margin: 8px 0 0; }
    .auto-plan-form { margin: 0; }
    .meal-log-submit { align-self: end; }
    .meal-log-submit button { min-width: 136px; }
}