/* ============================================================================
   MagicMenu design system — "Larder"
   ============================================================================
   Paper ground, ink text, oxblood as the single accent. Ochre lives only inside
   dark panels and bars; the error colour is reserved for validation and failed
   states. Cormorant Garamond at 28px and above, Source Sans 3 for everything
   else. Hairline rules, near-square radii, no gradients, glows or shadows.

   The token sheet is design/larder/Tokens.dc.html; the patterns are documented
   in docs/DESIGN_LANGUAGE.md. Dark mode is a paper-to-ink inversion of the same
   tokens under prefers-color-scheme, not a second palette.
   ============================================================================ */

:root {
    /* --- Palette ---------------------------------------------------------- */
    --mm-paper: #f6f1e7;          /* page ground; every root paints it */
    --mm-paper-2: #ede6d7;        /* today's row, hover cell, quiet emphasis */
    --mm-hairline: #c9bda6;       /* 1px rules, dotted leaders, progress tracks */
    --mm-ink: #1e1b16;            /* text, 2px rules, secondary button border */
    --mm-ink-soft: #464034;       /* body prose and meta at 16px */
    --mm-ink-muted: #6b6350;      /* small caps labels, times, calories (5.2:1 on paper) */
    --mm-oxblood: #7a2e2a;        /* the one accent: primary buttons, tonight, today */
    --mm-oxblood-hover: #591f1c;  /* hover and active for anything oxblood */
    --mm-accent-text: #7a2e2a;    /* oxblood used AS TEXT on the ground; lightened in dark */
    --mm-ochre: #d0a24a;          /* only inside the dark panel and bar; never on paper */
    --mm-error: #c4381b;          /* reserved: validation, failed states, destructive buttons */
    --mm-error-text: #c4381b;     /* the error colour used as text; lightened in dark */
    --mm-panel-bg: #1e1b16;       /* the list panel and grocery bar */
    --mm-panel-fg: #f6f1e7;
    --mm-panel-rule: rgba(246, 241, 231, 0.25);
    --mm-focus: #1e1b16;          /* 3px focus ring, offset 2px so it sits on the ground */

    /* --- Type ------------------------------------------------------------- */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --mm-caps-size: 13px;              /* desktop labels: 13 / 700 / 0.16em */
    --mm-caps-tracking: 0.16em;
    --mm-caps-size-phone: 14px;        /* phone labels: 14 / 700 / 0.12em */
    --mm-caps-tracking-phone: 0.12em;
    --mm-text-lead: 18px;
    --mm-text-body: 16px;
    --mm-text-cell: 15px;
    --mm-text-meta: 14px;
    --mm-display-hero: 88px;
    --mm-display-title: 56px;
    --mm-display-dish: 48px;
    --mm-display-section: 36px;
    --mm-display-floor: 28px;          /* the serif never goes below this (wordmark excepted) */

    /* --- Spacing ---------------------------------------------------------- */
    --mm-space-1: 4px;     /* hairline gaps */
    --mm-space-2: 8px;     /* inside a label pair */
    --mm-space-3: 12px;    /* between buttons, phone row padding */
    --mm-space-4: 16px;    /* row padding, table cell */
    --mm-space-6: 24px;    /* grid gaps, panel inset */
    --mm-space-8: 32px;    /* nav gaps, block gap */
    --mm-space-12: 48px;   /* between sections */
    --mm-space-16: 64px;   /* two-column gutter */
    --mm-page-margin: 88px;/* desktop page margin (20 on phone) */

    /* --- Radius and controls --------------------------------------------- */
    --mm-radius-btn: 2px;              /* buttons, chips */
    --mm-radius-panel: 0;              /* panels, bars, rows */
    --mm-control-height: 44px;
    --mm-control-height-cta: 48px;     /* the one primary CTA on a phone */
    --mm-btn-padding-x: 22px;
    --mm-rule-ink: 2px solid var(--mm-ink);
    --mm-rule-hairline: 1px solid var(--mm-hairline);

    /* --- Legacy aliases ---------------------------------------------------
       Older templates and the not-yet-converted page sections below still
       reference the previous token names. Most of these (colors, radii,
       shadows) are re-pointed at the Larder palette so every page picks up
       the world before its layout is rebuilt. The --space-* scale below is
       the exception: it is kept as its own literal rem values, not aliased
       to --mm-space-* (see the comment above --space-1). Delete this block
       once Phase 2 has converted the last page. */
    --color-primary-50: var(--mm-paper-2);
    --color-primary-100: var(--mm-paper-2);
    --color-primary-200: var(--mm-hairline);
    --color-primary-300: var(--mm-hairline);
    --color-primary-400: var(--mm-ink-muted);
    --color-primary-500: var(--mm-accent-text);
    --color-primary-600: var(--mm-oxblood-hover);
    --color-primary-700: var(--mm-ink);
    --color-primary-800: var(--mm-ink);
    --color-primary-900: var(--mm-ink);
    --color-accent-50: var(--mm-paper-2);
    --color-accent-100: var(--mm-paper-2);
    --color-accent-200: var(--mm-hairline);
    --color-accent-300: var(--mm-hairline);
    --color-accent-400: var(--mm-oxblood);
    --color-accent-500: var(--mm-accent-text);
    --color-accent-600: var(--mm-oxblood-hover);
    --color-accent-700: var(--mm-oxblood-hover);
    --color-highlight-300: var(--mm-hairline);
    --color-highlight-400: var(--mm-ink-muted);
    --color-highlight-500: var(--mm-accent-text);
    --color-highlight-600: var(--mm-oxblood-hover);
    --color-cream-50: var(--mm-paper);
    --color-cream-100: var(--mm-paper-2);
    --color-cream-200: var(--mm-paper-2);
    --color-cream-300: var(--mm-hairline);
    --color-charcoal: var(--mm-ink);
    --color-stone: var(--mm-ink-muted);
    --color-stone-light: var(--mm-hairline);
    --color-breakfast: var(--mm-ink-muted);
    --color-lunch: var(--mm-ink-muted);
    --color-dinner: var(--mm-ink-muted);
    --color-snack: var(--mm-ink-muted);
    --color-success-500: var(--mm-ink);
    --color-error-100: var(--mm-paper-2);
    --color-error-500: var(--mm-error-text);
    --primary-color: var(--mm-ink);
    --secondary-color: var(--mm-ink-soft);
    --accent-color: var(--mm-accent-text);
    --text-color: var(--mm-ink);
    --light-text: var(--mm-ink-muted);
    --text-muted: var(--mm-ink-muted);
    --heading-color: var(--mm-ink);
    --background-color: var(--mm-paper);
    --light-background: var(--mm-paper);
    --border-color: var(--mm-hairline);
    --success-color: var(--mm-ink);
    --warning-color: var(--mm-ink-muted);
    --danger-color: var(--mm-error-text);
    --info-color: var(--mm-ink-soft);
    /* This rem-based scale predates --mm-space-* and is kept verbatim, not
       aliased: several of its steps (--space-5, --space-10, --space-20) have
       no equivalent size in the px-based --mm-space-* scale, so a partial
       alias would be inconsistent. Where a step's value does coincide with
       an --mm-space-* size (e.g. --space-4 and --mm-space-4 both 16px) it is
       coincidence, not a shared source of truth. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --border-radius: var(--mm-radius-btn);
    --radius-sm: var(--mm-radius-btn);
    --radius-md: var(--mm-radius-btn);
    --radius-lg: var(--mm-radius-btn);
    --radius-xl: 0;
    --radius-2xl: 0;
    --radius-full: var(--mm-radius-btn);
    --box-shadow: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --card-bg: var(--mm-paper);
    --card-header-bg: transparent;
    --input-bg: var(--mm-paper);
    --navbar-bg: var(--mm-paper);
    --navbar-text: var(--mm-ink);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);

    /* --- Bootstrap 5 root overrides ---------------------------------------
       Bootstrap's components read these, so .btn, .form-control, .card,
       .table, .alert, .badge and .dropdown pick up the world without per-page
       work. Component-scoped --bs-* values follow in their own sections. */
    --bs-body-bg: var(--mm-paper);
    --bs-body-bg-rgb: 246, 241, 231;
    --bs-body-color: var(--mm-ink);
    --bs-body-color-rgb: 30, 27, 22;
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-font-sans-serif: var(--font-body);
    --bs-heading-color: var(--mm-ink);
    --bs-emphasis-color: var(--mm-ink);
    --bs-emphasis-color-rgb: 30, 27, 22;
    --bs-secondary-color: var(--mm-ink-muted);
    --bs-secondary-color-rgb: 107, 99, 80;
    --bs-secondary-bg: var(--mm-paper-2);
    --bs-secondary-bg-rgb: 237, 230, 215;
    --bs-tertiary-color: var(--mm-ink-muted);
    --bs-tertiary-bg: var(--mm-paper-2);
    --bs-link-color: var(--mm-accent-text);
    --bs-link-color-rgb: 122, 46, 42;
    --bs-link-hover-color: var(--mm-oxblood-hover);
    --bs-link-hover-color-rgb: 89, 31, 28;
    --bs-link-decoration: underline;
    --bs-code-color: var(--mm-accent-text);
    --bs-highlight-bg: var(--mm-paper-2);
    --bs-border-color: var(--mm-hairline);
    --bs-border-color-translucent: var(--mm-hairline);
    --bs-border-radius: var(--mm-radius-btn);
    --bs-border-radius-sm: var(--mm-radius-btn);
    --bs-border-radius-lg: var(--mm-radius-btn);
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-pill: var(--mm-radius-btn);
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
    --bs-box-shadow-inset: none;
    --bs-focus-ring-width: 3px;
    --bs-focus-ring-color: var(--mm-focus);
    --bs-primary: var(--mm-oxblood);
    --bs-primary-rgb: 122, 46, 42;
    --bs-secondary: #464034;
    --bs-secondary-rgb: 70, 64, 52;
    --bs-success: var(--mm-panel-bg);
    --bs-success-rgb: 30, 27, 22;
    --bs-danger: var(--mm-error);
    --bs-danger-rgb: 196, 56, 27;
    --bs-warning: #6b6350;
    --bs-warning-rgb: 107, 99, 80;
    --bs-info: #464034;
    --bs-info-rgb: 70, 64, 52;
    --bs-light: var(--mm-paper-2);
    --bs-light-rgb: 237, 230, 215;
    --bs-dark: var(--mm-panel-bg);
    --bs-dark-rgb: 30, 27, 22;
    --bs-primary-text-emphasis: var(--mm-accent-text);
    --bs-secondary-text-emphasis: var(--mm-ink-soft);
    --bs-success-text-emphasis: var(--mm-ink);
    --bs-info-text-emphasis: var(--mm-ink-soft);
    --bs-warning-text-emphasis: var(--mm-ink);
    --bs-danger-text-emphasis: var(--mm-error-text);
    --bs-light-text-emphasis: var(--mm-ink-soft);
    --bs-dark-text-emphasis: var(--mm-ink);
    --bs-primary-bg-subtle: var(--mm-paper-2);
    --bs-secondary-bg-subtle: var(--mm-paper-2);
    --bs-success-bg-subtle: var(--mm-paper-2);
    --bs-info-bg-subtle: var(--mm-paper-2);
    --bs-warning-bg-subtle: var(--mm-paper-2);
    --bs-danger-bg-subtle: var(--mm-paper-2);
    --bs-light-bg-subtle: var(--mm-paper-2);
    --bs-dark-bg-subtle: var(--mm-paper-2);
    --bs-primary-border-subtle: var(--mm-oxblood);
    --bs-secondary-border-subtle: var(--mm-hairline);
    --bs-success-border-subtle: var(--mm-ink);
    --bs-info-border-subtle: var(--mm-hairline);
    --bs-warning-border-subtle: var(--mm-ink);
    --bs-danger-border-subtle: var(--mm-error);
    --bs-light-border-subtle: var(--mm-hairline);
    --bs-dark-border-subtle: var(--mm-ink);
    --bs-form-valid-color: var(--mm-ink);
    --bs-form-valid-border-color: var(--mm-ink);
    --bs-form-invalid-color: var(--mm-error-text);
    --bs-form-invalid-border-color: var(--mm-error);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M4 7h16M4 12h16M4 17h16' stroke='%231e1b16' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e");

    color-scheme: light;
}

/* Dark: paper to ink, the same tokens inverted. Oxblood stays oxblood on
   surfaces (paper text on it is 8:1 in both modes); it is lightened only where
   it is used AS text on the dark ground, where #7a2e2a would be 1.6:1. */
@media (prefers-color-scheme: dark) {
    :root {
        --mm-paper: #1e1b16;
        --mm-paper-2: #2a2620;
        --mm-hairline: #4a443a;
        --mm-ink: #f6f1e7;
        --mm-ink-soft: #d9d2c2;
        --mm-ink-muted: #b3a893;      /* 7.3:1 on the dark ground */
        --mm-oxblood-hover: #93403b;  /* hover lightens rather than darkens on ink */
        --mm-accent-text: #e39a90;    /* 7.6:1 on the dark ground */
        --mm-error-text: #ef7a5e;     /* 6.2:1 on the dark ground */
        --mm-panel-bg: #2a2620;       /* the dark panel stays dark; a hairline separates it */
        --mm-panel-fg: #f6f1e7;
        --mm-panel-rule: rgba(246, 241, 231, 0.2);
        --mm-focus: #f6f1e7;

        --bs-body-bg-rgb: 30, 27, 22;
        --bs-body-color-rgb: 246, 241, 231;
        --bs-emphasis-color-rgb: 246, 241, 231;
        --bs-secondary-color-rgb: 179, 168, 147;
        --bs-secondary-bg-rgb: 42, 38, 32;
        --bs-link-color-rgb: 227, 154, 144;
        --bs-link-hover-color: #efb5ac;
        --bs-link-hover-color-rgb: 239, 181, 172;
        --bs-secondary: #d9d2c2;
        --bs-secondary-rgb: 217, 210, 194;
        --bs-success-rgb: 42, 38, 32;
        --bs-warning: #b3a893;
        --bs-warning-rgb: 179, 168, 147;
        --bs-info: #d9d2c2;
        --bs-info-rgb: 217, 210, 194;
        --bs-light-rgb: 42, 38, 32;
        --bs-dark-rgb: 42, 38, 32;
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M4 7h16M4 12h16M4 17h16' stroke='%23f6f1e7' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e");

        color-scheme: dark;
    }

    .btn-close {
        filter: invert(1);
    }

    .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f6f1e7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    /* Surfaces that carry white text keep a dark fill in both modes. */
    .bg-secondary,
    .badge.bg-secondary {
        background-color: #464034 !important;
    }

    .bg-light {
        background-color: var(--mm-paper-2) !important;
    }

    .bg-white {
        background-color: var(--mm-paper) !important;
    }

    .text-dark {
        color: var(--mm-ink) !important;
    }

    /* Readonly and disabled controls: dimmer fill, still legible. */
    .form-control.bg-light,
    .input-group-text.bg-light {
        background-color: var(--mm-paper-2) !important;
        color: var(--mm-ink-soft) !important;
        border-color: var(--mm-hairline) !important;
    }

    .form-control:disabled,
    .form-select:disabled {
        background-color: var(--mm-paper-2);
        border-color: var(--mm-hairline);
        color: var(--mm-ink-soft);
        opacity: 1;
    }

    .form-control::placeholder {
        color: var(--mm-ink-muted);
        opacity: 1;
    }
}

/* High contrast: hairlines become ink, muted text steps up, borders thicken. */
@media (prefers-contrast: more), (prefers-contrast: high) {
    :root {
        --mm-hairline: var(--mm-ink);
        --mm-ink-muted: var(--mm-ink-soft);
        --mm-paper-2: var(--mm-paper);
        --mm-panel-rule: var(--mm-panel-fg);
        --mm-rule-hairline: 2px solid var(--mm-ink);
    }

    .btn,
    .form-control,
    .form-select,
    .form-check-input,
    .card {
        border-width: 2px;
    }

    a {
        text-decoration: underline;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.font-display,
.mm-serif {
    font-family: var(--font-display);
    font-weight: 500;
}

/* Small-caps tracked label: the world's label style. 13/700/0.16em on desktop,
   14/700/0.12em on phones (see MOBILE RESPONSIVE OVERRIDES). */
.mm-caps {
    font-family: var(--font-body);
    font-size: var(--mm-caps-size);
    font-weight: 700;
    letter-spacing: var(--mm-caps-tracking);
    text-transform: uppercase;
    line-height: 1.3;
}

.mm-caps--accent {
    color: var(--mm-accent-text);
}

.mm-caps--muted {
    color: var(--mm-ink-muted);
}

/* 2px ink rule and 1px hairline rule as block separators. */
.mm-rule {
    border-top: var(--mm-rule-ink);
}

.mm-rule--hairline {
    border-top: var(--mm-rule-hairline);
}

/* Dotted leader between a dish and its time in a menu row. */
.mm-leader {
    flex: 1 1 32px;
    min-width: 32px;
    border-bottom: 2px dotted var(--mm-hairline);
    transform: translateY(-5px);
}

/* Wordmark: "Magic" roman 600, "Menu" italic 500, tracked 0.04em. Text only. */
.mm-wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 34px;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--mm-ink);
    white-space: nowrap;
}

.mm-wordmark em,
.mm-wordmark .mm-wordmark-menu {
    font-style: italic;
    font-weight: 500;
}

.mm-wordmark--phone {
    font-size: 28px;
}

/* The one place the serif goes under 28px: it is a mark, not text. */
.mm-wordmark--small {
    font-size: 12px;
    color: var(--mm-ink);
}

/* Dark panel: the list panel and the grocery bar. Text on it is paper; ochre is
   allowed inside it and nowhere else. */
.mm-panel {
    background: var(--mm-panel-bg);
    color: var(--mm-panel-fg);
    border: 1px solid var(--mm-panel-bg);
    border-radius: var(--mm-radius-panel);
    padding: var(--mm-space-6) 28px;
    display: flex;
    flex-direction: column;
    gap: var(--mm-space-3);
}

@media (prefers-color-scheme: dark) {
    .mm-panel {
        border-color: var(--mm-hairline);
    }
}

.mm-panel-label {
    color: var(--mm-ochre);
}

.mm-panel-value {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--mm-display-floor);
    line-height: 1.2;
    color: var(--mm-panel-fg);
}

.mm-panel-value--sans {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--mm-text-body);
    line-height: 1.3;
}

.mm-panel a {
    color: var(--mm-panel-fg);
}

/* 4px progress track; ochre fill inside a dark panel, ink fill on paper. */
.mm-progress {
    display: flex;
    height: 4px;
    background: var(--mm-panel-rule);
    overflow: hidden;
}

.mm-progress > span {
    display: block;
    height: 100%;
    background: var(--mm-ochre);
}

.mm-progress--paper {
    background: var(--mm-hairline);
}

.mm-progress--paper > span {
    background: var(--mm-ink);
}

/* Avatar: the only 50% radius in the world. */
.mm-avatar {
    width: 40px;
    height: 40px;
    border: 1px solid var(--mm-ink);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    color: var(--mm-ink);
    text-transform: uppercase;
}

/* Legacy utilities kept for unconverted pages. */
.text-highlight {
    background: var(--mm-paper-2);
}

.text-accent {
    color: var(--mm-accent-text);
}

/* ============================================
   BASE
   ============================================ */

::selection {
    background: var(--mm-ink);
    color: var(--mm-paper);
}

html {
    background-color: var(--mm-paper);
}

body {
    font-family: var(--font-body);
    color: var(--mm-ink);
    background-color: var(--mm-paper);
    line-height: 1.6;
    font-size: var(--mm-text-body);
}

p,
li,
td,
th {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

p {
    color: var(--mm-ink-soft);
}

/* Cormorant Garamond only at 28px and above: h1 and h2 are display; h3 down are
   the sans. accessibility.css owns the sizes (h1 2rem, h2 1.75rem). */
h1,
h2,
.h1,
.h2 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--mm-ink);
    line-height: 1.1;
    margin-bottom: var(--mm-space-4);
}

h3,
h4,
h5,
h6,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--mm-ink);
    line-height: 1.3;
    margin-bottom: var(--mm-space-3);
}

a {
    color: var(--mm-accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover,
a:focus {
    color: var(--mm-oxblood-hover);
}

strong,
b {
    font-weight: 600;
}

small,
.small {
    font-size: var(--mm-text-meta);
}

hr {
    border: 0;
    border-top: var(--mm-rule-hairline);
    opacity: 1;
    margin: var(--mm-space-6) 0;
}

code {
    color: var(--mm-accent-text);
}

/* Bootstrap colour utilities re-pointed at the world so they stay readable in
   both modes (.text-primary would otherwise be oxblood on ink in dark mode). */
.text-primary {
    color: var(--mm-accent-text) !important;
}

.text-secondary,
.text-body-secondary {
    color: var(--mm-ink-soft) !important;
}

.text-muted,
.text-body-tertiary {
    color: var(--mm-ink-muted) !important;
}

.text-success {
    color: var(--mm-ink) !important;
}

.text-danger {
    color: var(--mm-error-text) !important;
}

.text-warning {
    color: var(--mm-ink-soft) !important;
}

.text-info {
    color: var(--mm-ink-soft) !important;
}

.bg-light {
    background-color: var(--mm-paper-2) !important;
}

.bg-white {
    background-color: var(--mm-paper) !important;
}

/* Custom scrollbar in the world's colours. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--mm-paper-2);
}

::-webkit-scrollbar-thumb {
    background: var(--mm-hairline);
    border: 2px solid var(--mm-paper-2);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mm-ink-muted);
}

/* ============================================
   NAVBAR — paper masthead, 2px ink rule, tracked caps
   ============================================ */

.navbar {
    background: var(--mm-paper);
    border-bottom: var(--mm-rule-ink);
    padding: var(--mm-space-4) 0 var(--mm-space-3);
    --bs-navbar-color: var(--mm-ink);
    --bs-navbar-hover-color: var(--mm-oxblood-hover);
    --bs-navbar-active-color: var(--mm-ink);
    --bs-navbar-brand-color: var(--mm-ink);
    --bs-navbar-brand-hover-color: var(--mm-ink);
    --bs-navbar-toggler-border-color: var(--mm-ink);
    --bs-navbar-toggler-border-radius: var(--mm-radius-btn);
    --bs-navbar-toggler-focus-width: 0;
}

.navbar-brand {
    padding: 0;
    margin-right: var(--mm-space-8);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--mm-ink) !important;
    text-decoration: none;
}

.navbar .nav-link {
    font-family: var(--font-body);
    font-size: var(--mm-caps-size);
    font-weight: 700;
    letter-spacing: var(--mm-caps-tracking);
    text-transform: uppercase;
    color: var(--mm-ink) !important;
    padding: var(--mm-space-3) 0 !important;
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.navbar .navbar-nav {
    gap: 0 var(--mm-space-6);
}

/* xl–xxl gap: the full nav fits but the standard 1140px container is too tight
   for eight tracked-caps items. Widen the navbar's container and tighten gaps. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar > .container {
        max-width: 100%;
    }

    .navbar .navbar-nav {
        gap: 0 18px;
    }
}

@media (min-width: 1400px) {
    .navbar .navbar-nav {
        gap: 0 var(--mm-space-8);
    }
}

/* Oxblood underline for the current page and on hover. */
.navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px;
    background: var(--mm-oxblood);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after,
.navbar .nav-link.active::after,
.navbar .nav-link[aria-current="page"]::after {
    opacity: 1;
}

.navbar .nav-link:hover {
    color: var(--mm-ink) !important;
}

.navbar .dropdown-toggle::after {
    border-top-color: var(--mm-ink-muted);
}

.navbar .navbar-toggler {
    padding: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mm-ink);
}

/* Bootstrap hides the toggler above the expand breakpoint; only flex it below. */
@media (max-width: 1199.98px) {
    .navbar .navbar-toggler {
        display: inline-flex;
    }
}

.navbar .navbar-toggler-icon {
    width: 24px;
    height: 24px;
}

/* Collapsed (phone) navigation: a plain list under the masthead rule. */
@media (max-width: 1199.98px) {
    .navbar .navbar-collapse {
        padding-top: var(--mm-space-3);
    }

    .navbar .navbar-nav {
        gap: 0;
    }

    .navbar .nav-link {
        width: 100%;
        min-height: 44px;
        border-bottom: var(--mm-rule-hairline);
    }

    .navbar .nav-link::after {
        display: none;
    }

    .navbar .dropdown-menu {
        border: 0;
        padding: 0 0 0 var(--mm-space-4);
        background: transparent;
    }
}

/* Legacy navbar class combinations still render as the paper masthead. */
.navbar-dark.bg-primary,
.navbar-light.bg-light {
    background: var(--mm-paper) !important;
    border-bottom: var(--mm-rule-ink);
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link,
.navbar-light .navbar-brand,
.navbar-light .nav-link {
    color: var(--mm-ink) !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */

.dropdown-menu {
    --bs-dropdown-bg: var(--mm-paper);
    --bs-dropdown-color: var(--mm-ink);
    --bs-dropdown-border-color: var(--mm-ink);
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-border-width: 1px;
    --bs-dropdown-padding-y: var(--mm-space-2);
    --bs-dropdown-link-color: var(--mm-ink);
    --bs-dropdown-link-hover-color: var(--mm-ink);
    --bs-dropdown-link-hover-bg: var(--mm-paper-2);
    --bs-dropdown-link-active-color: var(--mm-paper);
    --bs-dropdown-link-active-bg: var(--mm-ink);
    --bs-dropdown-link-disabled-color: var(--mm-ink-muted);
    --bs-dropdown-divider-bg: var(--mm-hairline);
    --bs-dropdown-header-color: var(--mm-ink-muted);
    --bs-dropdown-box-shadow: none;
    box-shadow: none;
}

.dropdown-item {
    font-size: var(--mm-text-cell);
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--mm-space-2);
    border-radius: 0;
    padding: var(--mm-space-2) var(--mm-space-4);
}

.dropdown-header {
    font-size: var(--mm-caps-size);
    font-weight: 700;
    letter-spacing: var(--mm-caps-tracking);
    text-transform: uppercase;
}

/* ============================================
   CARDS — hairline panels, no shadow, no lift
   ============================================ */

.card {
    --bs-card-bg: var(--mm-paper);
    --bs-card-color: var(--mm-ink);
    --bs-card-border-color: var(--mm-hairline);
    --bs-card-border-width: 1px;
    --bs-card-border-radius: var(--mm-radius-panel);
    --bs-card-inner-border-radius: var(--mm-radius-panel);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--mm-ink);
    --bs-card-cap-padding-y: var(--mm-space-4);
    --bs-card-cap-padding-x: var(--mm-space-6);
    --bs-card-spacer-y: var(--mm-space-6);
    --bs-card-spacer-x: var(--mm-space-6);
    --bs-card-title-color: var(--mm-ink);
    --bs-card-subtitle-color: var(--mm-ink-muted);
    box-shadow: none;
    position: relative;
}

.card-header {
    border-bottom: var(--mm-rule-hairline);
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
    margin-bottom: 0;
}

.card-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
    color: var(--mm-ink);
}

.card--featured {
    border-color: var(--mm-ink);
    border-top-width: 2px;
}

/* ============================================
   BUTTONS — 44px, tracked caps, 2px radius
   primary: oxblood · secondary: 1px ink border · ghost: underlined text
   on dark: paper outline · destructive: the error colour
   ============================================ */

.btn {
    --bs-btn-font-family: var(--font-body);
    --bs-btn-font-size: var(--mm-caps-size);
    --bs-btn-font-weight: 700;
    --bs-btn-line-height: 1;
    --bs-btn-padding-x: var(--mm-btn-padding-x);
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: var(--mm-radius-btn);
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-opacity: 0.5;
    min-height: var(--mm-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mm-space-2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn i,
.btn .bi {
    font-size: 1.05em;
    line-height: 1;
}

/* Primary: oxblood ground, paper text. .btn-accent and .btn-success still
   appear on unconverted pages and mean the same thing here. */
.btn-primary,
.btn-accent,
.btn-success,
.btn-loved,
.btn-saved {
    --bs-btn-color: #f6f1e7;
    --bs-btn-bg: var(--mm-oxblood);
    --bs-btn-border-color: var(--mm-oxblood);
    --bs-btn-hover-color: #f6f1e7;
    --bs-btn-hover-bg: var(--mm-oxblood-hover);
    --bs-btn-hover-border-color: var(--mm-oxblood-hover);
    --bs-btn-active-color: #f6f1e7;
    --bs-btn-active-bg: var(--mm-oxblood-hover);
    --bs-btn-active-border-color: var(--mm-oxblood-hover);
    --bs-btn-disabled-color: #f6f1e7;
    --bs-btn-disabled-bg: var(--mm-oxblood);
    --bs-btn-disabled-border-color: var(--mm-oxblood);
}

/* Secondary: 1px ink border on the ground. Every outline and neutral variant
   collapses to this one shape; hierarchy comes from oxblood vs ink. */
.btn-secondary,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-accent,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-loved,
.btn-outline-saved {
    --bs-btn-color: var(--mm-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--mm-ink);
    --bs-btn-hover-color: var(--mm-ink);
    --bs-btn-hover-bg: var(--mm-paper-2);
    --bs-btn-hover-border-color: var(--mm-ink);
    --bs-btn-active-color: var(--mm-paper);
    --bs-btn-active-bg: var(--mm-ink);
    --bs-btn-active-border-color: var(--mm-ink);
    --bs-btn-disabled-color: var(--mm-ink-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--mm-hairline);
}

/* Destructive: the reserved error colour. */
.btn-danger {
    --bs-btn-color: #f6f1e7;
    --bs-btn-bg: var(--mm-error);
    --bs-btn-border-color: var(--mm-error);
    --bs-btn-hover-color: #f6f1e7;
    --bs-btn-hover-bg: #a52d15;
    --bs-btn-hover-border-color: #a52d15;
    --bs-btn-active-color: #f6f1e7;
    --bs-btn-active-bg: #a52d15;
    --bs-btn-active-border-color: #a52d15;
    --bs-btn-disabled-color: #f6f1e7;
    --bs-btn-disabled-bg: var(--mm-error);
    --bs-btn-disabled-border-color: var(--mm-error);
}

.btn-outline-danger {
    --bs-btn-color: var(--mm-error-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--mm-error);
    --bs-btn-hover-color: #f6f1e7;
    --bs-btn-hover-bg: var(--mm-error);
    --bs-btn-hover-border-color: var(--mm-error);
    --bs-btn-active-color: #f6f1e7;
    --bs-btn-active-bg: var(--mm-error);
    --bs-btn-active-border-color: var(--mm-error);
    --bs-btn-disabled-color: var(--mm-error-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--mm-error);
}

/* Ghost: an underlined text link with a 44px hit area. Not caps. */
.btn-link {
    --bs-btn-color: var(--mm-ink);
    --bs-btn-hover-color: var(--mm-oxblood-hover);
    --bs-btn-active-color: var(--mm-oxblood-hover);
    --bs-btn-disabled-color: var(--mm-ink-muted);
    --bs-btn-font-size: var(--mm-text-body);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 0;
    --bs-btn-border-radius: 0;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    border: 0;
}

/* On dark: paper outline for buttons inside a dark panel or bar. */
.btn-on-dark,
.mm-panel .btn-outline-primary,
.mm-panel .btn-outline-secondary,
.mm-panel .btn-secondary,
.mm-dark .btn-outline-primary,
.mm-dark .btn-outline-secondary,
.mm-dark .btn-secondary,
.mm-dark .btn-light {
    --bs-btn-color: var(--mm-panel-fg);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--mm-panel-fg);
    --bs-btn-hover-color: var(--mm-panel-bg);
    --bs-btn-hover-bg: var(--mm-panel-fg);
    --bs-btn-hover-border-color: var(--mm-panel-fg);
    --bs-btn-active-color: var(--mm-panel-bg);
    --bs-btn-active-bg: var(--mm-panel-fg);
    --bs-btn-active-border-color: var(--mm-panel-fg);
    --bs-btn-disabled-color: var(--mm-panel-fg);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--mm-panel-fg);
}

.mm-panel .btn-link,
.mm-dark .btn-link {
    --bs-btn-color: var(--mm-panel-fg);
    --bs-btn-hover-color: var(--mm-panel-fg);
}

/* Size variants. Small buttons keep the 44px target; only the type tightens. */
.btn-lg {
    --bs-btn-font-size: 14px;
    --bs-btn-padding-x: 30px;
    min-height: var(--mm-control-height-cta);
}

.btn-sm {
    --bs-btn-font-size: 12px;
    --bs-btn-padding-x: var(--mm-space-3);
    letter-spacing: 0.12em;
}

.btn-pill {
    border-radius: var(--mm-radius-btn);
}

/* Icon-only affordances in dense rows: hairline box, muted glyph, ink on hover. */
.btn-icon,
.save-star.btn-sm,
.meal-feedback-buttons .btn,
.meal-action-trigger {
    --bs-btn-color: var(--mm-ink-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--mm-hairline);
    --bs-btn-hover-color: var(--mm-ink);
    --bs-btn-hover-bg: var(--mm-paper-2);
    --bs-btn-hover-border-color: var(--mm-ink);
    --bs-btn-active-color: var(--mm-paper);
    --bs-btn-active-bg: var(--mm-ink);
    --bs-btn-active-border-color: var(--mm-ink);
    --bs-btn-padding-x: 0;
    min-width: 44px;
    min-height: 44px;
    font-size: 16px;
    letter-spacing: 0;
}

/* Filled states for the two reaction buttons: oxblood, like any primary. */
.btn-loved,
.btn-saved {
    min-width: 44px;
    min-height: 44px;
    --bs-btn-padding-x: 0;
    font-size: 16px;
}

.btn-loved:hover,
.btn-loved:focus,
.btn-saved:hover,
.btn-saved:focus {
    color: #f6f1e7;
}

.save-star.btn-sm i {
    font-size: 1rem;
}

/* ============================================
   FORMS — 1px ink border, 2px radius, tracked-caps labels
   ============================================ */

.form-control,
.form-select {
    font-family: var(--font-body);
    font-size: var(--mm-text-body);
    color: var(--mm-ink);
    background-color: var(--mm-paper);
    border: 1px solid var(--mm-ink);
    border-radius: var(--mm-radius-btn);
    padding: var(--mm-space-2) var(--mm-space-3);
    min-height: var(--mm-control-height);
    box-shadow: none;
    transition: border-color 0.15s ease;
}

.form-control::placeholder {
    color: var(--mm-ink-muted);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    color: var(--mm-ink);
    background-color: var(--mm-paper);
    border-color: var(--mm-ink);
    box-shadow: none;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--mm-paper-2);
    border-color: var(--mm-hairline);
    color: var(--mm-ink-soft);
}

.form-control-sm,
.form-select-sm {
    font-size: var(--mm-text-meta);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231e1b16' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-label {
    font-family: var(--font-body);
    font-size: var(--mm-caps-size);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-ink-muted);
    margin-bottom: var(--mm-space-2);
}

.form-text {
    color: var(--mm-ink-muted);
    font-size: var(--mm-text-meta);
}

.input-group-text {
    background-color: var(--mm-paper-2);
    border: 1px solid var(--mm-ink);
    border-radius: var(--mm-radius-btn);
    color: var(--mm-ink-soft);
    font-size: var(--mm-text-meta);
}

/* Checkboxes and radios: ink box, oxblood when checked. The switch keeps its
   pill shape (see accessibility.css) and reads oxblood when on. */
.form-check-input {
    background-color: var(--mm-paper);
    border: 1px solid var(--mm-ink);
    border-radius: var(--mm-radius-btn);
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:checked {
    background-color: var(--mm-oxblood);
    border-color: var(--mm-oxblood);
}

.form-check-input:focus {
    border-color: var(--mm-ink);
    box-shadow: none;
}

.form-check-label {
    color: var(--mm-ink);
    font-size: var(--mm-text-body);
}

.form-switch .form-check-input {
    background-color: var(--mm-paper);
    border-color: var(--mm-ink);
    border-radius: 2em;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231e1b16'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231e1b16'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-color: var(--mm-oxblood);
    border-color: var(--mm-oxblood);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f6f1e7'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
    .form-switch .form-check-input,
    .form-switch .form-check-input:focus {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f6f1e7'/%3e%3c/svg%3e");
    }
}

/* ============================================
   ALERTS — paper-2 ground, 2px rule on top, no left-border cards
   ============================================ */

.alert {
    --bs-alert-bg: var(--mm-paper-2);
    --bs-alert-color: var(--mm-ink);
    --bs-alert-border-color: var(--mm-ink);
    --bs-alert-border-radius: 0;
    --bs-alert-link-color: var(--mm-accent-text);
    border: 0;
    border-top: 2px solid var(--bs-alert-border-color);
    padding: var(--mm-space-4) 20px;
}

.alert p,
.alert li {
    color: inherit;
}

.alert-heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
}

.alert-success,
.alert-info,
.alert-warning,
.alert-secondary,
.alert-light,
.alert-primary {
    --bs-alert-bg: var(--mm-paper-2);
    --bs-alert-color: var(--mm-ink);
    --bs-alert-border-color: var(--mm-ink);
}

.alert-danger {
    --bs-alert-bg: var(--mm-paper-2);
    --bs-alert-color: var(--mm-ink);
    --bs-alert-border-color: var(--mm-error);
}

.alert-danger .alert-heading {
    color: var(--mm-error-text);
}

.alert-success-subtle,
.alert-warning-subtle {
    background: var(--mm-paper-2);
    border: 0;
    border-top: var(--mm-rule-ink);
}

/* ============================================
   BADGES AND STATUS CHIPS — tracked caps, 2px radius, 1px border
   ============================================ */

.badge {
    --bs-badge-font-size: 12px;
    --bs-badge-font-weight: 700;
    --bs-badge-padding-x: 8px;
    --bs-badge-padding-y: 3px;
    --bs-badge-border-radius: var(--mm-radius-btn);
    font-family: var(--font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
}

.badge.bg-primary {
    color: #f6f1e7;
}

.badge.bg-info,
.badge.bg-warning,
.badge.bg-light {
    background-color: transparent !important;
    color: var(--mm-ink) !important;
    border: 1px solid var(--mm-ink);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid currentColor;
    border-radius: var(--mm-radius-btn);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
    background: transparent;
}

.status-badge--success {
    color: var(--mm-ink);
}

.status-badge--pending {
    color: var(--mm-ink-muted);
}

.status-badge--failed {
    color: var(--mm-error-text);
}

.status-badge--generating {
    color: var(--mm-accent-text);
}

.status-badge--info {
    color: var(--mm-ink-soft);
}

/* ============================================
   TABLES — horizontal rules only, caps headers
   ============================================ */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mm-ink);
    --bs-table-border-color: var(--mm-hairline);
    --bs-table-striped-bg: var(--mm-paper-2);
    --bs-table-striped-color: var(--mm-ink);
    --bs-table-hover-bg: var(--mm-paper-2);
    --bs-table-hover-color: var(--mm-ink);
    --bs-table-active-bg: var(--mm-paper-2);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: var(--mm-space-4);
    border-bottom-width: 1px;
    background-color: transparent;
}

.table-bordered > :not(caption) > * > * {
    border-width: 0 0 1px;
}

.table thead th {
    font-size: var(--mm-caps-size);
    font-weight: 700;
    letter-spacing: var(--mm-caps-tracking);
    text-transform: uppercase;
    color: var(--mm-ink-muted);
    border-bottom: var(--mm-rule-ink);
    padding: var(--mm-space-3) var(--mm-space-4);
    vertical-align: bottom;
}

/* ============================================
   MODALS, OFFCANVAS, TOASTS, PROGRESS, LIST GROUPS, PAGINATION, ACCORDION
   ============================================ */

.modal {
    --bs-modal-bg: var(--mm-paper);
    --bs-modal-color: var(--mm-ink);
    --bs-modal-border-color: var(--mm-ink);
    --bs-modal-border-width: 1px;
    --bs-modal-border-radius: 0;
    --bs-modal-inner-border-radius: 0;
    --bs-modal-box-shadow: none;
    --bs-modal-header-border-color: var(--mm-hairline);
    --bs-modal-footer-border-color: var(--mm-hairline);
    --bs-modal-padding: var(--mm-space-6);
    --bs-modal-header-padding: var(--mm-space-4) var(--mm-space-6);
}

.modal-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
}

.modal-backdrop {
    --bs-backdrop-bg: #1e1b16;
    --bs-backdrop-opacity: 0.6;
}

.offcanvas {
    --bs-offcanvas-bg: var(--mm-paper);
    --bs-offcanvas-color: var(--mm-ink);
    --bs-offcanvas-border-color: var(--mm-ink);
    --bs-offcanvas-border-width: 1px;
    --bs-offcanvas-box-shadow: none;
}

.offcanvas-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
}

.toast {
    --bs-toast-bg: var(--mm-paper);
    --bs-toast-color: var(--mm-ink);
    --bs-toast-border-color: var(--mm-ink);
    --bs-toast-border-radius: 0;
    --bs-toast-box-shadow: none;
}

.toast.text-white {
    color: #f6f1e7 !important;
}

.progress {
    --bs-progress-height: 4px;
    --bs-progress-bg: var(--mm-hairline);
    --bs-progress-border-radius: 0;
    --bs-progress-box-shadow: none;
    --bs-progress-bar-bg: var(--mm-ink);
    --bs-progress-bar-color: var(--mm-paper);
}

.progress-bar-striped {
    background-image: none;
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--mm-ink);
    --bs-list-group-border-color: var(--mm-hairline);
    --bs-list-group-border-radius: 0;
    --bs-list-group-action-hover-bg: var(--mm-paper-2);
    --bs-list-group-action-hover-color: var(--mm-ink);
    --bs-list-group-action-active-bg: var(--mm-paper-2);
    --bs-list-group-active-bg: var(--mm-ink);
    --bs-list-group-active-border-color: var(--mm-ink);
    --bs-list-group-active-color: var(--mm-paper);
}

.pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--mm-ink);
    --bs-pagination-border-color: var(--mm-hairline);
    --bs-pagination-border-radius: 0;
    --bs-pagination-hover-bg: var(--mm-paper-2);
    --bs-pagination-hover-color: var(--mm-ink);
    --bs-pagination-hover-border-color: var(--mm-ink);
    --bs-pagination-focus-bg: var(--mm-paper-2);
    --bs-pagination-focus-color: var(--mm-ink);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-bg: var(--mm-ink);
    --bs-pagination-active-border-color: var(--mm-ink);
    --bs-pagination-active-color: var(--mm-paper);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--mm-ink-muted);
    --bs-pagination-disabled-border-color: var(--mm-hairline);
}

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--mm-ink);
    --bs-accordion-border-color: var(--mm-hairline);
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-color: var(--mm-ink);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: var(--mm-paper-2);
    --bs-accordion-active-color: var(--mm-ink);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231e1b16' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231e1b16' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
    .accordion {
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f6f1e7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f6f1e7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}

.accordion-item {
    border: 0;
    border-top: var(--mm-rule-hairline);
    border-radius: 0 !important;
    margin-bottom: 0;
}

.accordion-button {
    font-family: var(--font-body);
    font-weight: 600;
    padding: var(--mm-space-4) 0;
}

.accordion-body {
    padding: 0 0 var(--mm-space-4);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--mm-ink);
    --bs-nav-tabs-border-width: 2px;
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-hover-border-color: transparent transparent var(--mm-oxblood);
    --bs-nav-tabs-link-active-color: var(--mm-ink);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--mm-oxblood);
    --bs-nav-link-color: var(--mm-ink-muted);
    --bs-nav-link-hover-color: var(--mm-ink);
    --bs-nav-link-font-weight: 700;
}

.nav-tabs .nav-link {
    font-size: var(--mm-caps-size);
    letter-spacing: var(--mm-caps-tracking);
    text-transform: uppercase;
    margin-bottom: -2px;
    border-bottom-width: 2px;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--mm-ink-muted);
    --bs-breadcrumb-item-active-color: var(--mm-ink-muted);
    font-size: var(--mm-text-meta);
}

.spinner-border.text-primary {
    color: var(--mm-accent-text) !important;
}

/* HTMX Loading Indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Nutrition preferences loading spinner: opacity-based .htmx-indicator above still
   reserves layout space (opacity:0) even when idle, which reads as a large empty
   gap between the Nutrition Mode row and the mode-specific content below it. This
   spinner is shared by all three modes (Simple/Balanced/Precise), so collapse it
   out of the layout entirely until htmx actually adds .htmx-request to it. */
#nutrition-loading {
    display: none;
}

#nutrition-loading.htmx-request {
    display: block;
}

/* Utility Classes */
.cursor-pointer {
    cursor: pointer;
}

/* Text utilities */
.text-light-muted {
    color: var(--light-text);
}

.fs-sm {
    font-size: 0.9rem;
}

/* Background utilities */
.bg-cream {
    background: var(--color-cream-100);
}

.bg-cream-subtle {
    background: var(--color-cream-50);
}

/* Icon size utilities */
.icon-sm {
    font-size: 1rem;
}

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

.icon-lg {
    font-size: 2rem;
}

.icon-xl {
    font-size: 2.5rem;
}

.icon-2xl {
    font-size: 3rem;
}

.icon-3xl {
    font-size: 4rem;
}

/* Icon color utilities */
.icon-primary {
    color: var(--color-primary-500);
}

.icon-accent {
    color: var(--color-accent-500);
}

.icon-highlight {
    color: var(--color-highlight-500);
}

.icon-success {
    color: var(--success-color);
}

.icon-lunch {
    color: var(--color-lunch);
}

/* Spinner utilities */
.spinner-accent {
    width: 3rem;
    height: 3rem;
    color: var(--color-accent-500);
}

/* Progress bar utilities */
.progress-cream {
    height: 12px;
    background: var(--color-cream-200);
    border-radius: var(--radius-md);
}

.progress-onboarding {
    height: 8px;
    background: var(--color-cream-200);
    border-radius: var(--radius-md);
}

.progress-bar-accent {
    background: var(--color-accent-500);
}

/* Touch target accessibility - ensure minimum 44x44px on touch devices */
@media (pointer: coarse) {
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
    }

    .btn-group .btn-sm {
        padding: 0.5rem 0.75rem;
    }
}

/* Recipe Card */
.recipe-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.recipe-card .card-body {
    flex: 1;
}

.recipe-image {
    height: 200px;
    object-fit: cover;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

/* Menu Calendar - Enhanced for Epic 2 */
.menu-calendar {
    width: 100%;
}

.menu-calendar .card {
    height: 100%;
    margin-bottom: 1rem;
}

.menu-day {
    min-height: 300px;
}

/* Calendar grid responsive behavior */
@media (min-width: 768px) {
    .menu-calendar-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1rem;
    }
    
    .menu-day-column {
        min-height: 400px;
    }
}

/* Mobile stack layout */
@media (max-width: 767.98px) {
    .menu-calendar-grid {
        display: block;
    }
    
    .menu-day-column {
        margin-bottom: 1.5rem;
    }
    
    .meal-actions {
        flex-direction: column;
    }
    
    .meal-actions .btn {
        width: 100%;
    }
}

/* Shopping List */
.shopping-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

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

/* AlpineJS x-cloak */
[x-cloak] {
    display: none !important;
}

/* Menu deletion progress styles */
.deleting {
    opacity: 0.6;
    background-color: rgba(0, 0, 0, 0.05);
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

@media (prefers-color-scheme: dark) {
    .deleting {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

.deleting .btn.disabled {
    pointer-events: none;
    opacity: 0.65;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
    background: var(--color-cream-100);
    position: relative;
    overflow: hidden;
    padding: var(--space-16) 0;
}

/* Decorative background blobs */
.hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 120%;
    display: none;
    transform: rotate(-15deg);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 40%;
    height: 80%;
    display: none;
    transform: rotate(10deg);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--color-primary-700);
    line-height: 1.1;
    margin-bottom: var(--space-6);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: var(--color-stone);
    margin-bottom: var(--space-8);
    /* max-width without auto side margins left this block flush-left inside a
       centred hero: the text centred within itself while the block itself sat
       348px left of the page axis at 1440px, with the badge, h1, buttons and
       reassurance line all centred around it. The measure cap is the point; the
       left alignment was a side effect. */
    margin-inline: auto;
    max-width: 600px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--mm-paper-2);
    border: 1px solid var(--mm-paper-2);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    /* --mm-accent-text (#7a2e2a) rather than the raw oxblood, so the label
       clears AA: ~7.5:1 against this badge's --mm-paper-2 background. */
    color: var(--mm-accent-text);
    margin-bottom: var(--space-6);
}

/* --color-accent-500 aliases to --mm-accent-text, which the dark-mode :root block
   repoints to #e39a90 (7.6:1 against the page ground, documented where it's
   defined). Against this badge's --mm-paper-2 background specifically it's ~6.6:1,
   still comfortably above AA's 4.5:1. */
@media (prefers-color-scheme: dark) {
    .hero-badge {
        color: var(--color-accent-500);
    }
}

.hero-badge i {
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(10deg); }
}

/* The line under the hero CTAs that answers "what does this cost me" before the click (MM-338).
   Deliberately quiet — it removes an objection, it is not a selling point. */
.hero-reassurance {
    font-size: 0.9375rem;
    color: var(--color-stone);
}

.hero-stats {
    display: flex;
    gap: var(--space-10);
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-color);
}

.hero-stat {
    text-align: left;
}

.hero-stat-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary-700);
    line-height: 1;
}

.hero-stat-label {
    font-size: 0.875rem;
    color: var(--color-stone);
    margin-top: var(--space-1);
}

/* Floating decorative elements */
.floating-element {
    position: absolute;
    animation: float 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}

@media (prefers-color-scheme: dark) {
    .hero {
        background: var(--background-color);
    }

    .hero::before {
        display: none;
    }

    .hero::after {
        display: none;
    }

    .hero-title {
        color: var(--text-color);
    }

    .hero-stat-number {
        color: var(--primary-color);
    }
}

@media (max-width: 768px) {
    .hero {
        padding: var(--space-10) 0;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--space-6);
    }
}

/* ============================================
   SAMPLE PROOF (MM-338)
   ============================================
   The homepage block that renders the real curated week from /sample-menu. This section's mobile
   overrides live in the page-level MOBILE RESPONSIVE OVERRIDES block at the end of this file, not
   here — see that block's header for why some other components keep their breakpoint locally instead.

   Rendered only when a sample menu is published, so every rule here is dead CSS on an environment
   with nothing curated. That is fine; it is a few hundred bytes in a fingerprinted, compressed
   stylesheet, and the alternative (conditionally-loaded CSS) breaks the single-bundle caching this
   project relies on. */

.sample-proof {
    padding: var(--space-12) 0;
}

.sample-proof-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-10);
    margin-bottom: var(--space-8);
}

.sample-proof-stat {
    text-align: center;
}

.sample-proof-stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary-700);
    line-height: 1;
}

.sample-proof-stat-label {
    display: block;
    font-size: 0.875rem;
    color: var(--color-stone);
    margin-top: var(--space-1);
}

/* One column at every width, deliberately.

   This was auto-fit multi-column, to keep the week compact. At ~1440px that resolved to three
   columns, so seven days read Sat/Sun/Mon, then Tue/Wed/Thu, then Fri alone in a half-empty row.
   A week is a sequence, and reading order across a grid is not the order of the days: the one
   section on this page whose whole job is showing what a *week* looks like was the section that
   destroyed the week's shape. It also contradicted this list's own template comment, which says
   it is a linear sequence of days rather than a table.

   The measure cap keeps rows from stretching to the full container on desktop, so it reads as an
   agenda rather than seven full-width bars. Vertical length is the intended trade. */
.sample-proof-days {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 46rem;
    margin-inline: auto;
    gap: var(--space-3);
    margin-block: 0;
}

.sample-proof-day-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    /* --card-bg already flips in the dark-mode :root block, same as .feature-card — so this needs
       no dark-mode override of its own. */
    background: var(--card-bg);
    color: inherit;
    text-decoration: none;
    /* 48px floor keeps every row a valid touch target (WCAG 2.5.8) even for a one-word recipe. */
    min-height: 48px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.sample-proof-day-link:hover,
.sample-proof-day-link:focus-visible {
    border-color: var(--primary-color);
}

.sample-proof-day-label {
    display: flex;
    flex-direction: column;
    flex: 0 0 4.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.sample-proof-day-meal {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-stone);
}

.sample-proof-day-recipe {
    flex: 1 1 auto;
    font-weight: 500;
}

.sample-proof-day-arrow {
    flex: 0 0 auto;
    color: var(--color-stone);
}

@media (prefers-color-scheme: dark) {
    /* Mirrors .hero-stat-number's dark override — the 700 shade is tuned for a light background. */
    .sample-proof-stat-number {
        color: var(--primary-color);
    }
}

/* .sample-proof's mobile overrides live in the page-level MOBILE RESPONSIVE OVERRIDES block at the
   end of this file, not here. */

/* ============================================
   PUBLIC SAMPLE MENU — PROOF HERO + AGENDA
   ============================================
   Scoped to /sample-menu so the public share calendar and authenticated menu editor keep their
   denser table/card layouts. The sample is a conversion surface: concrete proof leads, then the
   vertical agenda lets the food carry the page. */

.sample-menu-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.75rem, 5vw, 3.5rem);
    margin-bottom: var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    display: none;
    box-shadow: none;
}

.sample-menu-breadcrumb .breadcrumb-item a {
    color: var(--primary-color);
    font-weight: 500;
}

.sample-menu-breadcrumb .breadcrumb-item.active,
.sample-menu-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--light-text);
}

.sample-menu-hero::after {
    content: '✦';
    position: absolute;
    right: 3%;
    bottom: -7.5rem;
    color: var(--primary-color);
    font-family: var(--font-display);
    font-size: clamp(10rem, 18vw, 17rem);
    line-height: 1;
    opacity: 0.055;
    pointer-events: none;
}

.sample-menu-hero-copy,
.sample-menu-proof-grid {
    position: relative;
    z-index: 1;
}

.sample-menu-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sample-menu-hero-title {
    max-width: 900px;
    margin: 0 0 var(--space-4);
    color: var(--text-color);
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

.sample-menu-hero-lead {
    max-width: 790px;
    margin: 0;
    color: var(--light-text);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.7;
}

.sample-menu-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.sample-menu-hero .btn-primary {
    padding: 0.875rem 1.5rem;
    border: 0;
    background: var(--color-accent-500);
    color: var(--color-charcoal);
    box-shadow: none;
}

.sample-menu-hero .btn-primary:hover,
.sample-menu-hero .btn-primary:focus {
    background: var(--color-accent-400);
    color: var(--color-charcoal);
    box-shadow: none;
}

.sample-menu-no-card {
    color: var(--light-text);
    font-size: 0.78rem;
    font-weight: 500;
}

.sample-menu-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.sample-menu-proof-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    min-height: 82px;
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-color);
    color: var(--text-color);
    text-decoration: none;
}

.sample-menu-proof-item > i:first-child {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--mm-paper-2);
    color: var(--primary-color);
    font-size: 1rem;
}

.sample-menu-proof-item strong,
.sample-menu-proof-item span {
    display: block;
}

.sample-menu-proof-item strong {
    margin-bottom: 0.125rem;
    color: var(--text-color);
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.3;
}

.sample-menu-proof-item span {
    color: var(--light-text);
    font-size: 0.75rem;
}

.sample-menu-proof-link {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sample-menu-proof-link:hover,
.sample-menu-proof-link:focus-visible {
    border-color: var(--primary-color);
    color: var(--text-color);
    box-shadow: none;
}

.sample-menu-proof-arrow {
    color: var(--primary-color);
    transition: transform 0.2s ease;
}

.sample-menu-proof-link:hover .sample-menu-proof-arrow {
    transform: translateX(0.2rem);
}

.sample-menu-week-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
}

.sample-menu-week-title {
    margin: 0 0 var(--space-1);
    color: var(--text-color);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sample-menu-week-date,
.sample-menu-week-hint {
    color: var(--light-text);
    font-size: 0.84rem;
}

.sample-menu-agenda {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    box-shadow: none;
}

.sample-menu-agenda-day {
    display: grid;
    grid-template-columns: 8.25rem minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
    min-height: 106px;
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.sample-menu-agenda-day:first-child {
    border-top: 0;
    background: var(--mm-paper-2);
}

.sample-menu-agenda-day:hover {
    background-color: var(--light-background);
}

.sample-menu-agenda-date {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sample-menu-agenda-number {
    min-width: 2.5rem;
    color: var(--primary-color);
    font-family: var(--font-display);
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.sample-menu-agenda-date-copy,
.sample-menu-agenda-date-copy strong,
.sample-menu-agenda-date-copy span {
    display: block;
}

.sample-menu-agenda-date-copy strong {
    color: var(--text-color);
    font-size: 0.78rem;
    line-height: 1.3;
}

.sample-menu-agenda-date-copy span {
    color: var(--light-text);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sample-menu-agenda-meals {
    min-width: 0;
}

.sample-menu-agenda-recipe-wrap {
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-color);
}

.sample-menu-agenda-recipe-wrap:first-child {
    border-top: 0;
}

.sample-menu-agenda-kicker {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-1);
    color: var(--accent-color);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sample-menu-agenda-recipe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    min-height: 44px;
    color: var(--text-color);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.sample-menu-agenda-recipe:hover,
.sample-menu-agenda-recipe:focus-visible {
    color: var(--primary-color);
}

.sample-menu-agenda-recipe:focus-visible {
    border-radius: var(--radius-sm);
    outline: 3px solid var(--mm-paper-2);
    outline-offset: 3px;
}

.sample-menu-agenda-arrow {
    color: var(--primary-color);
    font-size: 1.15rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.sample-menu-agenda-recipe:hover .sample-menu-agenda-arrow {
    color: var(--accent-color);
    transform: translateX(0.25rem);
}

.sample-menu-agenda-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-1);
    color: var(--light-text);
    font-size: 0.78rem;
}

.sample-menu-agenda-meta > span {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
}

.sample-menu-agenda-empty {
    color: var(--light-text);
    font-style: italic;
}

@media (prefers-color-scheme: dark) {
    .sample-menu-hero {
        display: none;
    }

    .sample-menu-hero .btn-primary,
    .sample-menu-hero .btn-primary:hover,
    .sample-menu-hero .btn-primary:focus {
        color: var(--mm-paper);
    }

    .sample-menu-proof-item > i:first-child {
        background: var(--mm-paper-2);
    }

    .sample-menu-agenda-day:first-child {
        background: var(--mm-paper-2);
    }
}

@media (max-width: 767.98px) {
    .sample-menu-hero {
        padding: var(--space-6) var(--space-5);
        margin-bottom: var(--space-8);
        border-radius: var(--radius-xl);
    }

    .sample-menu-hero-title {
        font-size: clamp(2rem, 11vw, 3rem);
        line-height: 1.06;
    }

    .sample-menu-hero-lead {
        line-height: 1.6;
    }

    .sample-menu-hero-actions,
    .sample-menu-hero-actions .btn {
        width: 100%;
    }

    .sample-menu-no-card {
        width: 100%;
        text-align: center;
    }

    .sample-menu-proof-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        margin-top: var(--space-6);
    }

    .sample-menu-proof-item {
        min-height: 72px;
        padding: var(--space-3) var(--space-4);
    }

    .sample-menu-week-heading {
        display: block;
    }

    .sample-menu-agenda-day {
        grid-template-columns: 4.75rem minmax(0, 1fr);
        gap: var(--space-3);
        min-height: 98px;
        padding: var(--space-4) var(--space-3);
    }

    .sample-menu-agenda-date {
        align-items: flex-start;
        gap: var(--space-2);
    }

    .sample-menu-agenda-number {
        min-width: 2rem;
        font-size: 1.6rem;
    }

    .sample-menu-agenda-date-copy strong {
        max-width: 3.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sample-menu-agenda-recipe {
        gap: var(--space-2);
        font-size: 1rem;
    }

    .sample-menu-agenda-arrow {
        display: none;
    }

    .sample-menu-agenda-meta {
        gap: var(--space-2) var(--space-3);
        font-size: 0.75rem;
    }
}

/* ============================================
   FEATURE CARDS
   ============================================ */

.feature-card {
    padding: var(--space-8);
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-out-expo);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--color-accent-500);
}

.feature-card:hover {
    box-shadow: none;
}

.feature-card:hover::before {
    height: 100%;
}

.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--space-6);
}

.feature-icon--primary {
    background: var(--mm-paper-2);
    color: var(--color-primary-600);
}

.feature-icon--accent {
    background: var(--mm-paper-2);
    color: var(--color-accent-500);
}

.feature-icon--highlight {
    background: var(--mm-paper-2);
    color: var(--color-highlight-500);
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
    /* A dark band in both schemes: white text sits on it, so it cannot follow
       the ink token, which inverts to paper in dark mode. */
    background: var(--mm-panel-bg);
    color: var(--mm-panel-fg);
    padding: var(--space-16) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    display: none;
    border-radius: 50%;
}

.cta-section h2 {
    color: var(--mm-panel-fg);
    margin-bottom: var(--space-4);
}

.cta-section p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.25rem;
    margin-bottom: var(--space-8);
}

.cta-section .btn-primary {
    --bs-btn-bg: var(--mm-panel-fg);
    --bs-btn-border-color: var(--mm-panel-fg);
    --bs-btn-color: var(--mm-panel-bg);
    --bs-btn-hover-bg: var(--mm-ochre);
    --bs-btn-hover-border-color: var(--mm-ochre);
    --bs-btn-hover-color: var(--mm-panel-bg);
    background: var(--mm-panel-fg);
    color: var(--mm-panel-bg);
    box-shadow: none;
}

.cta-section .btn-primary:hover {
    background: var(--mm-ochre);
    border-color: var(--mm-ochre);
    color: var(--mm-panel-bg);
}

.cta-steps {
    padding-left: var(--space-6);
    margin: 0;
    list-style: none;
    counter-reset: step-counter;
}

.cta-steps li {
    margin-bottom: var(--space-3);
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    padding-left: var(--space-8);
    counter-increment: step-counter;
}

.cta-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Enhanced CTA Steps with Icons */
.cta-steps-enhanced {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cta-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.cta-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    color: var(--color-accent-400);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cta-step-text {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    padding-top: 0.5rem;
}

@media (prefers-color-scheme: dark) {
    .cta-step-icon {
        background: rgba(255, 255, 255, 0.1);
        color: var(--color-accent-500);
    }
}
/* ============================================
   SUBSCRIPTION PLAN CARDS
   ============================================ */

.plan-card {
    position: relative;
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-color);
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: visible;
}

.plan-card--current {
    border-color: var(--color-primary-500);
    background: var(--mm-paper-2);
}

.plan-card--featured {
    border-color: var(--color-accent-500);
    background: var(--mm-paper-2);
}

.plan-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    font-size: 0.8rem;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    white-space: nowrap;
    z-index: 10;
}

.plan-badge--current {
    background: var(--color-primary-500);
    color: white;
}

.plan-badge--popular {
    background: var(--color-accent-500);
    color: white;
}

.plan-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    font-size: 1.75rem;
    color: white;
}

/* Literal stone values, not the tokens: this gradient is a background carrying
   white glyph, so it has to stay dark in both themes. --color-stone lightens in
   dark mode (it is a text color there), which would put white on #b8afa4. */
.plan-icon--free {
    background: var(--mm-paper-2);
}

.plan-icon--foodie {
    background: var(--color-accent-500);
}

.plan-icon--chef {
    background: var(--color-dinner);
}

.plan-price {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
}

.plan-price-period {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--light-text);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.plan-features li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-cream-200);
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-feature-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-3);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.plan-feature-icon--check {
    background: var(--mm-paper-2);
    color: var(--color-primary-500);
}

.plan-feature-icon--x {
    background: var(--mm-paper-2);
    color: var(--danger-color);
}

/* ============================================
   PLAN COMPARISON MATRIX (MM-325)

   Dual render: the table below is desktop-only and the card stack is mobile-only
   (see the mobile overrides at the end of this file). Exactly one is ever visible.
   ============================================ */

.plan-matrix-cards {
    display: none;
}

.plan-matrix-table-wrap {
    /* Safety net between the mobile breakpoint and a comfortable table width —
       the table itself never forces the page body to scroll sideways. */
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
}

.plan-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.plan-matrix-table th,
.plan-matrix-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    vertical-align: middle;
}

.plan-matrix-table thead th {
    border-bottom: 2px solid var(--border-color);
    background: var(--color-cream-100);
    vertical-align: bottom;
}

.plan-matrix-table tbody th[scope="row"],
.plan-matrix-table .plan-matrix-feature-col {
    text-align: left;
    font-weight: 500;
    color: var(--text-color);
}

.plan-matrix-table tfoot td,
.plan-matrix-table tfoot th {
    border-bottom: none;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.plan-matrix-col-name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
}

.plan-matrix-col-price {
    display: block;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--light-text);
}

.plan-matrix-col-badge {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 0.125rem var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-primary-500);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Current-tier column: tinted to match .plan-card--current above. */
.plan-matrix-cell--current {
    background: var(--mm-paper-2);
}

.plan-matrix-group-row th {
    text-align: left;
    background: var(--color-cream-200);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--light-text);
}

.plan-matrix-yes {
    color: var(--color-primary-600);
    font-size: 1.15rem;
}

.plan-matrix-no {
    color: var(--light-text);
    font-size: 1.15rem;
}

/* Mobile card variant — styles live here so they're ready when the breakpoint
   flips display; the container stays display:none until then. */
.plan-matrix-card--current {
    border-color: var(--color-primary-500);
}

.plan-matrix-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.plan-matrix-card-price {
    font-weight: 600;
    color: var(--light-text);
}

.plan-matrix-card-group {
    margin: var(--space-4) 0 var(--space-2);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--light-text);
}

.plan-matrix-card-list {
    margin: 0;
}

.plan-matrix-card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-cream-200);
}

.plan-matrix-card-row:last-child {
    border-bottom: none;
}

.plan-matrix-card-row dt {
    font-weight: 400;
    color: var(--text-color);
}

.plan-matrix-card-row dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* ============================================
   WEEKLY DASHBOARD
   ============================================ */

.weekly-dashboard {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: clamp(var(--space-5), 4vw, var(--space-8));
    margin-bottom: var(--space-6);
    box-shadow: none;
}

.weekly-dashboard-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: var(--color-accent-100);
    color: var(--color-accent-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex: 0 0 auto;
}

.weekly-dashboard-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.12;
    color: var(--heading-color);
}

.weekly-dashboard-copy {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 58ch;
}

.dashboard-panels {
    display: grid;
    gap: var(--space-3);
}

.dashboard-panel {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* Marks the primary action (tonight's recipe) among sibling panels with a
   full-weight ink border instead of the hairline default. */
.dashboard-panel-tonight {
    border: 2px solid var(--mm-ink);
}

.dashboard-panel-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-panel-value {
    color: var(--heading-color);
    font-size: 1.05rem;
    font-weight: 700;
}

.dashboard-progress {
    height: 8px;
}

.dashboard-progress .progress-bar {
    background-color: var(--color-primary-500);
}

@media (max-width: 575.98px) {
    .weekly-dashboard .d-flex.align-items-start {
        flex-direction: column;
    }
}

/* ============================================
   AUTOMATION CARD
   ============================================ */

.automation-card {
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-primary-200);
    overflow: hidden;
}

.automation-card .card-header {
    background: var(--color-primary-700);
    color: white;
    border-bottom: none;
    padding: var(--space-4);
}

.automation-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* ============================================
   SHOPPING CARD
   ============================================ */

.shopping-card {
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-primary-500);
    overflow: hidden;
}

.shopping-card .card-header {
    background: var(--color-primary-500);
    color: white;
    border-bottom: none;
    padding: var(--space-4);
}

.shopping-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.shopping-card .shopping-menu-name {
    color: var(--color-primary-600);
}

.shopping-card .shopping-stat-value {
    color: var(--color-primary-500);
}

.shopping-card .shopping-stat-label {
    font-size: 0.75rem;
}

.shopping-card .shopping-stat-divider {
    width: 1px;
    background: var(--color-cream-200);
}

.shopping-card .progress {
    height: 8px;
}

.shopping-card .progress-bar {
    background-color: var(--color-primary-500);
}

/* ============================================
   INVOICE & BILLING CARDS
   ============================================ */

.invoice-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    padding: var(--space-4);
    transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease;
}

.invoice-card:hover {
    box-shadow: none;
}

.invoice-card-header {
    background: var(--color-cream-100);
    padding: var(--space-4);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: calc(var(--space-4) * -1);
    margin-bottom: var(--space-4);
}

.invoice-amount {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-700);
}

.payment-method-card {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    padding: var(--space-4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.payment-method-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: none;
}

.payment-method-card--default {
    border-color: var(--color-primary-500);
    background: var(--mm-paper-2);
}

.payment-method-card--expired {
    border-color: var(--danger-color);
    opacity: 0.7;
}

.payment-method-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-cream-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-primary-600);
}

/* ============================================
   SHOPPING LIST ENHANCEMENTS
   ============================================ */

.shopping-section-header {
    background: var(--color-cream-100);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.shopping-section-header:hover {
    background: var(--color-cream-200);
}

.shopping-section-header i {
    font-size: 1.25rem;
}

/* Category-specific colors */
.shopping-section-header--produce i { color: var(--color-lunch); }
.shopping-section-header--meat i { color: var(--mm-ink-muted); }
.shopping-section-header--dairy i { color: var(--mm-ink-muted); }
.shopping-section-header--bakery i { color: var(--color-breakfast); }
.shopping-section-header--pantry i { color: var(--color-stone); }
.shopping-section-header--frozen i { color: var(--mm-ink-muted); }
.shopping-section-header--beverages i { color: var(--color-dinner); }
.shopping-section-header--other i { color: var(--color-stone-light); }

.shopping-item--checked {
    opacity: 0.5;
    text-decoration: line-through;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.shopping-item--checking {
    animation: slideOutRight 0.3s var(--ease-out-expo) forwards;
}

@keyframes slideOutRight {
    to {
        opacity: 0;
    }
}

/* ============================================
   FORM CHECK CARDS
   ============================================ */

.form-check-card {
    position: relative;
    padding: var(--space-4);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s var(--ease-out-expo);
}

.form-check-card:hover {
    border-color: var(--color-primary-300);
}

.form-check-card--selected {
    border-color: var(--color-primary-500);
    background: var(--mm-paper-2);
}

.form-check-card input[type="radio"],
.form-check-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.form-check-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-cream-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: var(--space-3);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.form-check-card--selected .form-check-card-icon {
    background: var(--color-primary-500);
    color: white;
}

/* ============================================
   FORM VALIDATION STATES
   ============================================ */

.form-control-valid {
    border-left: 3px solid var(--success-color) !important;
}

.form-control-invalid {
    border-left: 3px solid var(--danger-color) !important;
}

.validation-feedback {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    margin-top: var(--space-2);
}

.validation-feedback--success {
    color: var(--success-color);
}

.validation-feedback--error {
    color: var(--danger-color);
}

/* ============================================
   BUTTON LOADING STATE
   ============================================ */

.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading .btn-text {
    opacity: 0;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-top: -0.5rem;
    margin-left: -0.5rem;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   MEAL FEEDBACK BUTTONS
   ============================================ */

.meal-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.meal-feedback-btn:hover {
    border-color: var(--color-primary-300);
    background: var(--color-cream-100);
}

.meal-feedback-btn--love {
    color: var(--color-snack);
}

.meal-feedback-btn--love:hover,
.meal-feedback-btn--love.active {
    border-color: var(--color-snack);
    background: var(--mm-paper-2);
}

.meal-feedback-btn--dislike {
    color: var(--color-stone);
}

.meal-feedback-btn--dislike:hover,
.meal-feedback-btn--dislike.active {
    border-color: var(--danger-color);
    background: var(--mm-paper-2);
    color: var(--danger-color);
}

/* ============================================
   ONBOARDING ENHANCEMENTS
   ============================================ */

.onboarding-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    margin-bottom: var(--space-6);
}

.onboarding-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    position: relative;
}

.onboarding-step::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--border-color);
    z-index: 0;
}

.onboarding-step:last-child::before {
    display: none;
}

.onboarding-step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-cream-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--light-text);
    z-index: 1;
    transition: all 0.3s ease;
}

.onboarding-step--active .onboarding-step-icon {
    background: var(--color-primary-500);
    color: white;
}

.onboarding-step--completed .onboarding-step-icon {
    background: var(--color-primary-500);
    color: white;
}

.onboarding-step--completed::before {
    background: var(--color-primary-500);
}

.onboarding-step-label {
    font-size: 0.75rem;
    color: var(--light-text);
    text-align: center;
    transition: color 0.2s ease;
}

.onboarding-step--active .onboarding-step-label {
    color: var(--color-primary-700);
    font-weight: 600;
}

/* ============================================
   RECIPE PAGE ENHANCEMENTS
   ============================================ */

.recipe-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: var(--space-4);
}

.recipe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.recipe-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-cream-100);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.recipe-meta-item i {
    color: var(--color-primary-600);
}

.recipe-section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-color);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-cream-200);
}

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

.ingredient-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-cream-200);
}

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

.ingredient-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary-500);
    margin-top: 6px;
    flex-shrink: 0;
}

.nutrition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.nutrition-item {
    background: var(--color-cream-100);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-align: center;
}

.nutrition-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-600);
}

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

/* ============================================
   AI RECIPE CHAT (MM-259)
   ============================================ */

#recipe-chat-panel .recipe-chat-messages {
    max-height: 420px;
    overflow-y: auto;
}

#recipe-chat-panel .recipe-chat-bubble {
    display: inline-block;
    padding: .5rem .75rem;
    border-radius: .75rem;
    max-width: 85%;
    white-space: pre-wrap;
    word-break: break-word;
}

#recipe-chat-panel .recipe-chat-bubble-user {
    background: var(--color-primary-700, var(--mm-ink));
    color: #fff;
    border-bottom-right-radius: .2rem;
}

#recipe-chat-panel .recipe-chat-assistant-card {
    background: var(--color-cream-100, var(--mm-paper));
}

#recipe-chat-panel .recipe-chat-added {
    color: var(--mm-ink);
}

#recipe-chat-panel .recipe-chat-removed {
    color: var(--mm-error-text);
    text-decoration: line-through;
}

#recipe-chat-panel .recipe-chat-disclaimer {
    font-size: .75rem;
}

/* ============================================
   SERVINGS CONTROL
   ============================================ */

.servings-control {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-cream-100);
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

.servings-control-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--color-primary-600);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.servings-control-btn:hover:not(:disabled) {
    background: var(--color-primary-500);
    color: white;
}

.servings-control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.servings-control-value {
    min-width: 40px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
}

/* ============================================
   PREFERENCE BUTTON CARDS
   Used with Bootstrap btn-check for radio/checkbox groups
   ============================================ */

.preference-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-md);
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    font-weight: normal;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.preference-btn:hover {
    border-color: var(--color-primary-300);
    background: var(--mm-paper-2);
    color: var(--text-color);
}

.btn-check:checked + .preference-btn {
    border-color: var(--color-primary-500) !important;
    background: var(--mm-paper-2) !important;
    box-shadow: none;
    color: var(--text-color) !important;
}

.btn-check:focus-visible + .preference-btn {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    box-shadow: none;
}

.preference-btn .option-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.preference-btn .option-desc {
    font-size: 0.85rem;
    color: var(--light-text);
    margin-top: 2px;
}

/* Multi-select checkmark indicator on preference buttons */
.btn-check[type="checkbox"] + .preference-btn {
    position: relative;
}

.btn-check[type="checkbox"]:checked + .preference-btn::after {
    content: '\2713';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--color-primary-500);
    line-height: 1;
}

/* ============================================
   PREFERENCE CHIP / PILL SELECTORS
   Compact selectable items for tags, cuisines, etc.
   Used with Bootstrap btn-check to hide native inputs
   ============================================ */

.preference-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-full);
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.preference-chip:hover {
    border-color: var(--color-primary-300);
    background: var(--mm-paper-2);
    color: var(--text-color);
}

.btn-check:checked + .preference-chip {
    border-color: var(--color-primary-500) !important;
    background: var(--mm-paper-2) !important;
    color: var(--color-primary-600) !important;
    font-weight: 600;
}

.btn-check:checked + .preference-chip::before {
    content: '\2713\00a0';
    font-weight: bold;
}

.btn-check:focus-visible + .preference-chip {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* ============================================
   FORM SWITCH TOGGLES
   Override Bootstrap default blue with app primary green
   ============================================ */

.form-switch .form-check-input:checked {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.form-switch .form-check-input:focus {
    border-color: var(--color-primary-300);
    box-shadow: none;
}

/* ============================================
   UNIFIED SAVE TOAST
   Single global save indicator for all preference tabs.
   Replaces per-fragment inline save indicators.
   ============================================ */

.pref-save-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: var(--success-color);
    color: white;
    border-radius: var(--radius-md);
    z-index: 10000;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: none;
    animation: prefToastAnim 1.8s ease-in-out forwards;
}

@keyframes prefToastAnim {
    0% { opacity: 0; transform: translateY(20px); }
    15% { opacity: 1; transform: translateY(0); }
    75% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* ============================================
   AUTO-CALCULATED FIELD STYLING
   Replaces hardcoded #2196F3 blue with design system green.
   ============================================ */

.pref-auto-calculated {
    background-color: var(--mm-paper-2) !important;
    border-color: var(--color-primary-400) !important;
}

/* ============================================
   PREFERENCE SECTION VISUAL DISTINCTION
   ============================================ */

.pref-section-allergens {
    border-top: 2px solid var(--color-highlight-500);
    padding-left: var(--space-4);
}

.pref-section-disliked {
    border-top: 2px solid var(--border-color);
    padding-left: var(--space-4);
}

/* ============================================
   CUISINE REGION HEADINGS
   ============================================ */

.cuisine-region-heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   PREFERENCE TAB MOBILE SCROLLING
   ============================================ */

@media (max-width: 767.98px) {
    #preferenceTabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }
    #preferenceTabs .nav-link {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   TOUCH TARGET ENFORCEMENT
   ============================================ */

@media (pointer: coarse) {
    .preference-chip {
        min-height: 44px;
    }
}

/* ============================================
   SUBSCRIPTION TRIAL MESSAGING (MM-226)
   ============================================
   Used by /subscription/plans, /subscription/checkout, and /subscription/success
   to highlight the 14-day free trial as a selling point. This section's mobile
   overrides live in the page-level MOBILE RESPONSIVE OVERRIDES block below, at
   the project's standard 767.98px breakpoint. */

.trial-callout {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    background: var(--mm-paper-2);
    border: 1px solid var(--mm-paper-2);
    border-radius: 8px;
    color: var(--text-color, var(--mm-ink));
}
.trial-callout > i {
    color: var(--color-accent-500, #f59e0b);
}

.trial-banner {
    background: var(--mm-paper-2);
    border: 1px solid var(--mm-ink);
    border-radius: 8px;
    padding: 20px;
}
.trial-banner-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.trial-banner-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.trial-banner-item > i {
    font-size: 1.5rem;
    color: var(--mm-ink);
    flex-shrink: 0;
    margin-top: 2px;
}
.billing-summary .due-today {
    font-size: 1.5rem;
    color: var(--mm-ink);
}

@media (prefers-color-scheme: dark) {
    .trial-banner {
        background: var(--mm-paper-2);
        border-color: var(--mm-paper-2);
        color: var(--text-color);
    }
    .trial-callout {
        background: var(--mm-paper-2);
        border-color: var(--mm-paper-2);
    }
}

/* ============================================
   COOK MODE (kitchen view, cook-mode.js)
   Large type at arm's length, giant nav targets
   for messy hands, wake-lock keeps screen on.
   ============================================ */

body.cook-mode-open {
    overflow: hidden;
}

.cook-mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000; /* above navbar (1030), sticky bars, and the Gleap bubble */
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    color: var(--text-color);
    padding-bottom: env(safe-area-inset-bottom);
}

.cook-mode-progress {
    height: 5px;
    background: var(--color-cream-200);
}

.cook-mode-progress-bar {
    height: 100%;
    width: 0;
    background: var(--color-accent-500);
}

/* Respect reduced-motion: snap the progress bar instead of animating its width. */
@media (prefers-reduced-motion: reduce) {
    .cook-mode-progress-bar {
        transition: none;
    }
}

.cook-mode-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.cook-mode-counter {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-accent-500);
    white-space: nowrap;
}

.cook-mode-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.cook-mode-exit {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
}

.cook-mode-body {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.cook-mode-slide {
    max-width: 640px;
    text-align: center;
}

.cook-mode-step-number {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--color-accent-500);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
}

/* The point of cook mode: readable from the counter, not from your hand. */
.cook-mode-step-text {
    font-size: clamp(1.35rem, 2.2vw + 1rem, 1.75rem);
    line-height: 1.5;
    font-weight: 500;
}

.cook-mode-timer {
    margin-top: 1.5rem;
}

.cook-mode-timer .btn {
    min-height: 48px;
    min-width: 72px;
    font-size: 1.05rem;
}

.cook-mode-timer-display {
    background: var(--color-accent-500);
    font-size: 1.4rem;
    padding: 0.5rem 0.9rem;
}

.cook-mode-ingredients {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

.cook-mode-ingredients-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.cook-mode-ingredients-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cook-mode-ingredients-list li {
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.1rem;
    cursor: pointer;
    min-height: 44px;
}

.cook-mode-ingredients-list li.done {
    text-decoration: line-through;
    opacity: 0.5;
}

.cook-mode-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-color);
}

.cook-mode-nav {
    flex: 1 1 0;
    min-height: 64px;
    font-size: 1.15rem;
    font-weight: 700;
}

.cook-mode-nav-mid {
    flex: 0 1 auto;
    font-size: 1rem;
    font-weight: 600;
}


/* ============================================
   PAGE TITLES AND SECTION HEADINGS
   ============================================ */

.page-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(38px, 4.5vw, var(--mm-display-title));
    line-height: 1;
    color: var(--mm-ink);
    margin-bottom: var(--mm-space-3);
    overflow-wrap: anywhere;
}

.page-subtitle,
#menu-subtitle {
    font-family: var(--font-body);
    font-size: var(--mm-text-cell);
    color: var(--mm-ink-muted);
    margin-bottom: var(--mm-space-6);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(var(--mm-display-floor), 3vw, var(--mm-display-section));
    line-height: 1.1;
    color: var(--mm-ink);
    margin-bottom: var(--mm-space-4);
}

/* A section-title used inside a card header or at h5/h6 size falls under the
   28px serif floor, so it goes back to the sans. */
h5.section-title,
h6.section-title,
.section-title[style*="font-size: 1rem"] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
}

/* ============================================
   FOOTER — paper, 2px ink rule, tracked-caps headings
   ============================================ */

.site-footer {
    background: var(--mm-paper);
    border-top: var(--mm-rule-ink);
    color: var(--mm-ink);
    padding: var(--mm-space-12) 0 var(--mm-space-8);
    margin-top: var(--mm-space-16);
}

.footer-heading {
    font-family: var(--font-body);
    font-size: var(--mm-caps-size);
    font-weight: 700;
    letter-spacing: var(--mm-caps-tracking);
    text-transform: uppercase;
    color: var(--mm-ink-muted);
    margin: 0 0 var(--mm-space-4);
}

.footer-brand {
    display: flex;
    align-items: center;
    margin-bottom: var(--mm-space-3);
}

.footer-tagline {
    color: var(--mm-ink-soft);
    font-size: var(--mm-text-body);
    line-height: 1.6;
    max-width: 40ch;
    margin-bottom: var(--mm-space-4);
}

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

.footer-nav li {
    margin: 0;
}

.footer-link {
    color: var(--mm-ink);
    text-decoration: none;
    font-size: var(--mm-text-body);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.footer-link:hover,
.footer-link:focus {
    color: var(--mm-oxblood-hover);
    text-decoration: underline;
}

.footer-newsletter {
    border-top: var(--mm-rule-hairline);
    padding-top: var(--mm-space-4);
}

.footer-newsletter .form-control {
    background: var(--mm-paper);
    border-color: var(--mm-ink);
    color: var(--mm-ink);
    font-size: var(--mm-text-body);
}

.footer-newsletter .form-control::placeholder {
    color: var(--mm-ink-muted);
}

.footer-newsletter .form-control:focus {
    background: var(--mm-paper);
    border-color: var(--mm-ink);
    box-shadow: none;
}

.footer-bottom {
    border-top: var(--mm-rule-hairline);
    padding-top: var(--mm-space-4);
    margin-top: var(--mm-space-8);
}

.footer-bottom .text-muted,
.site-footer .text-muted {
    color: var(--mm-ink-muted) !important;
}

.footer-bottom .mm-wordmark--small {
    margin-right: var(--mm-space-3);
}

/* Legacy footer variant kept for any page still using it. */
.footer-enhanced {
    background: var(--mm-paper);
    border-top: var(--mm-rule-ink);
    color: var(--mm-ink-soft);
    padding: var(--mm-space-12) 0 var(--mm-space-6);
}

.footer-enhanced a {
    color: var(--mm-ink);
}

.footer-enhanced a:hover {
    color: var(--mm-oxblood-hover);
}

.footer-links h5 {
    color: var(--mm-ink-muted);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--mm-caps-size);
    text-transform: uppercase;
    letter-spacing: var(--mm-caps-tracking);
    margin-bottom: var(--mm-space-4);
}

@media (max-width: 991.98px) {
    .site-footer {
        padding: var(--mm-space-8) 0 var(--mm-space-6);
    }

    .footer-brand-wrapper {
        margin-bottom: var(--mm-space-6);
    }

    .footer-heading {
        margin-top: var(--mm-space-4);
    }
}

@media (max-width: 575.98px) {
    .footer-newsletter-form {
        flex-direction: column;
    }

    .footer-newsletter-form .btn {
        width: 100%;
    }
}

/* ============================================
   COOKIE CONSENT BANNER — a dark bar, like the grocery bar
   ============================================ */

.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mm-panel-bg);
    color: var(--mm-panel-fg);
    border-top: 1px solid var(--mm-panel-fg);
    padding: var(--mm-space-4) 0;
    z-index: 9999;
}

.cookie-consent-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mm-space-4);
}

.cookie-consent-text {
    flex: 1;
    min-width: 280px;
}

.cookie-consent-heading {
    font-family: var(--font-body);
    font-size: var(--mm-caps-size);
    font-weight: 700;
    letter-spacing: var(--mm-caps-tracking);
    text-transform: uppercase;
    margin-bottom: var(--mm-space-2);
    color: var(--mm-ochre);
    display: flex;
    align-items: center;
}

.cookie-consent-message {
    font-size: var(--mm-text-meta);
    color: var(--mm-panel-fg);
    line-height: 1.5;
}

.cookie-consent-link {
    color: var(--mm-panel-fg);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-consent-link:hover {
    color: var(--mm-ochre);
}

.cookie-consent-actions {
    display: flex;
    gap: var(--mm-space-3);
    flex-shrink: 0;
}

/* Both choices carry equal weight: paper outline on the dark bar. */
.cookie-consent-btn,
.cookie-consent-btn.btn-light {
    --bs-btn-color: var(--mm-panel-fg);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--mm-panel-fg);
    --bs-btn-hover-color: var(--mm-panel-bg);
    --bs-btn-hover-bg: var(--mm-panel-fg);
    --bs-btn-hover-border-color: var(--mm-panel-fg);
    --bs-btn-active-color: var(--mm-panel-bg);
    --bs-btn-active-bg: var(--mm-panel-fg);
    --bs-btn-active-border-color: var(--mm-panel-fg);
    white-space: nowrap;
    min-height: 44px;
}

/* Mobile: the banner overlays the hero, so its height matters. Two buttons on
   one row and tighter type keep it near 165px so the hero CTAs clear it;
   HomePageMobileLayoutTest asserts that, so change these with the test open. */
@media (max-width: 575.98px) {
    .cookie-consent-banner {
        padding: var(--mm-space-3) var(--mm-space-4);
    }

    .cookie-consent-content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mm-space-3);
    }

    .cookie-consent-heading {
        margin-bottom: var(--mm-space-1);
    }

    .cookie-consent-message {
        font-size: 0.8125rem;
        line-height: 1.45;
    }

    .cookie-consent-actions {
        flex-direction: row;
        width: 100%;
        gap: var(--mm-space-2);
    }

    .cookie-consent-btn {
        flex: 1 1 0;
        min-height: 44px;
        --bs-btn-padding-x: 8px;
        --bs-btn-font-size: 12px;
    }
}

/* ============================================
   WCAG AA COLOUR OVERRIDES (MM-264)
   ============================================
   Bootstrap's own muted and primary colours narrowly miss 4.5:1; the Larder
   tokens clear it (ink-muted is 5.2:1 on paper, 7.3:1 on the dark ground),
   so the utilities point at the tokens in both modes. */

.text-muted {
    color: var(--mm-ink-muted) !important;
}

/* --- Overflow ("...") menu trigger: no Bootstrap caret (Menu UX Phase 1) --- */
.dropdown-toggle-no-caret::after {
    display: none;
}

/* Icon-only trigger must still meet the 44px touch-target minimum */
.dropdown-toggle-no-caret {
    min-width: 44px;
}

/* Grouped shopping list renders only in print output (Menu UX Phase 1) */
.shopping-list-print-only { display: none; }

@media print {
    .shopping-list-print-only { display: block !important; }
}

/* ============================================
   MEAL CARDS AND MEAL TYPE LABELS
   ============================================
   .meal-card is the per-slot container that menu-actions.js and
   menu-assistant.js address (busy overlay, dislike form, flash). It has no
   box of its own in this world; the row and the cell carry the rules. */

.meal-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-space-2);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-ink-muted);
}

.meal-badge--breakfast,
.meal-badge--lunch,
.meal-badge--dinner,
.meal-badge--snack {
    color: var(--mm-ink-muted);
}

.meal-card {
    position: relative;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--mm-ink);
    box-shadow: none;
    min-height: 0;
}

/* Busy overlay while a single slot's regenerate/swap AI call runs (~6-10s).
   Injected by menu-actions.js markSlotBusy(); removed with the container swap. */
.meal-slot-busy {
    position: relative;
    pointer-events: none;
}

.meal-busy-overlay {
    position: absolute;
    inset: -4px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--mm-paper) 88%, transparent);
    font-weight: 600;
    font-size: var(--mm-text-meta);
    color: var(--mm-accent-text);
    text-align: center;
    padding: 0.5rem;
}

.meal-card-header {
    padding: var(--mm-space-3) 0;
    border-bottom: var(--mm-rule-hairline);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mm-space-3);
}

.meal-card-body {
    padding: var(--mm-space-3) 0;
    color: var(--mm-ink);
}

.meal-item {
    padding: var(--mm-space-3) 0;
    border-top: var(--mm-rule-hairline);
    color: var(--mm-ink);
}

/* Dish name, meta line, course label, attribution: the cell anatomy. */
.meal-dish {
    display: inline;
    font-family: var(--font-body);
    font-size: var(--mm-text-cell);
    font-weight: 600;
    line-height: 1.35;
    color: var(--mm-ink);
    text-decoration: none;
}

.meal-dish:hover,
.meal-dish:focus {
    color: var(--mm-oxblood-hover);
    text-decoration: underline;
}

.meal-meta {
    font-size: 13px;
    color: var(--mm-ink-muted);
    margin-top: 3px;
    line-height: 1.4;
}

.meal-course {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-ink-muted);
    margin-bottom: 2px;
}

.meal-attribution {
    font-size: 13px;
    color: var(--mm-ink-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.meal-attribution i {
    color: var(--mm-accent-text);
}

/* Per-meal controls: love, dislike, save, and the "⋯" sheet trigger. One row of
   44px hairline boxes. On a desktop table cell they are revealed on hover and
   on focus-within; on touch devices and in select mode they are always shown. */
.meal-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: var(--mm-space-2);
}

.meal-controls .meal-feedback-buttons {
    /* !important beats Bootstrap's .d-flex (display: flex !important) so the pair joins the
       single control row. The class stays on the markup because the same server fragment is
       also swapped into meal-card-updated, which has no .meal-controls parent and needs it. */
    display: contents !important;
}

.meal-card-top {
    display: flex;
    align-items: center;
    gap: var(--mm-space-2);
}

@media (hover: hover) and (pointer: fine) {
    .menu-calendar-table .meal-controls {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .menu-calendar-table td:hover .meal-controls,
    .menu-calendar-table td:focus-within .meal-controls,
    .menu-calendar-table .meal-slot-busy .meal-controls,
    #menu-calendar-container.select-mode .meal-controls {
        opacity: 1;
    }
}

/* Empty slot */
.add-meal-btn {
    --bs-btn-color: var(--mm-ink-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--mm-hairline);
    --bs-btn-hover-color: var(--mm-ink);
    --bs-btn-hover-bg: var(--mm-paper-2);
    --bs-btn-hover-border-color: var(--mm-ink);
    --bs-btn-active-color: var(--mm-paper);
    --bs-btn-active-bg: var(--mm-ink);
    --bs-btn-active-border-color: var(--mm-ink);
    border-style: dashed;
    width: 100%;
}

.meal-empty {
    font-size: var(--mm-text-meta);
    color: var(--mm-ink-muted);
    font-style: italic;
}

/* Menu generation progress pane - completion celebration (one-shot payoff) */
.completion-celebration .checkmark-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--mm-oxblood);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}

.completion-celebration .checkmark-icon {
    font-size: 2.5rem;
    color: #f6f1e7;
    animation: fadeIn 0.3s ease-in 0.3s forwards;
    opacity: 0;
}

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

.completion-celebration .redirect-notice {
    transition: opacity 0.5s ease;
}

.navigate-away-banner {
    background: var(--mm-paper-2);
    border: 0;
    border-top: var(--mm-rule-ink);
}

/* Meal action buttons - mobile-friendly */
.meal-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.meal-actions .btn {
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .meal-actions {
        flex-direction: column;
    }

    .meal-actions .btn {
        width: 100%;
    }
}

/* ============================================
   MENU PAGE (Larder) — templates/menus/details.html and its fragments
   ============================================
   Desktop board: design/larder/MenuWeek.dc.html. Phone board:
   MenuWeekPhone.dc.html. This page's phone overrides live in the page-level
   MOBILE RESPONSIVE OVERRIDES block. */

.menu-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 0;
}

.menu-page-header .page-header-actions {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.menu-page-heading {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.mm-backlink {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-space-2);
    min-height: 44px;
    color: var(--mm-ink-muted);
    text-decoration: none;
}

.mm-backlink:hover,
.mm-backlink:focus {
    color: var(--mm-ink);
    text-decoration: underline;
}

.menu-page-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(38px, 4.5vw, var(--mm-display-title));
    line-height: 1;
    margin: 0;
    color: var(--mm-ink);
    overflow-wrap: anywhere;
}

.menu-page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: var(--mm-text-cell);
    color: var(--mm-ink-muted);
    margin: 0;
}

.menu-page-meta .mm-sep {
    color: var(--mm-hairline);
}

/* Failed / working / gaps notices sit between the header and the week. */
.menu-notice {
    margin-top: 28px;
}

/* Tonight block and the side column */
.menu-tonight-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.55fr);
    gap: var(--mm-space-16);
    align-items: stretch;
    border-top: var(--mm-rule-ink);
    margin-top: 28px;
    padding-top: 28px;
}

.menu-tonight-row--single {
    grid-template-columns: minmax(0, 1fr);
}

/* A past week has no Tonight block: let the side column use the full width,
   panel beside the stats instead of stacked over an empty column. */
.menu-tonight-row:not(:has(.menu-tonight)) {
    grid-template-columns: minmax(0, 1fr);
}

.menu-tonight-row:not(:has(.menu-tonight)) .menu-side {
    display: grid;
    grid-template-columns: minmax(300px, 0.55fr) minmax(0, 1fr);
    gap: var(--mm-space-16);
    align-items: start;
}

.menu-tonight-row:not(:has(.menu-tonight)) .menu-side-stats {
    padding-top: 0;
}

.menu-tonight {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.menu-tonight-dish {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 3.4vw, var(--mm-display-dish));
    line-height: 1.05;
    color: var(--mm-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.menu-tonight-dish:hover,
.menu-tonight-dish:focus {
    color: var(--mm-oxblood-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.08em;
}

.menu-tonight-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: var(--mm-text-body);
    color: var(--mm-ink-soft);
}

.menu-tonight-meta .mm-sep {
    color: var(--mm-hairline);
}

.menu-tonight-why {
    display: flex;
    align-items: center;
    gap: var(--mm-space-2);
    font-size: var(--mm-text-meta);
    color: var(--mm-ink-muted);
}

.menu-tonight-why i {
    color: var(--mm-accent-text);
}

.menu-tonight-note {
    font-size: var(--mm-text-meta);
    color: var(--mm-ink-muted);
}

.menu-tonight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-space-3);
    margin-top: 6px;
}

.menu-tonight-actions .btn-primary {
    --bs-btn-padding-x: 28px;
}

.menu-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.menu-side-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mm-space-6);
    padding-top: 18px;
}

.menu-side-stat {
    border-top: var(--mm-rule-hairline);
    padding-top: var(--mm-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--mm-space-2);
}

.menu-side-stat-value {
    font-size: var(--mm-text-body);
    font-weight: 600;
    color: var(--mm-ink);
}

.menu-side-stat-meta {
    font-size: var(--mm-text-meta);
    color: var(--mm-ink-muted);
}

.menu-side-stat a {
    font-size: var(--mm-text-meta);
    font-weight: 600;
}

/* The full week */
.menu-week-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--mm-space-4);
    margin: 44px 0 8px;
}

.menu-week-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(var(--mm-display-floor), 3vw, var(--mm-display-section));
    line-height: 1.1;
    margin: 0;
    color: var(--mm-ink);
}

.menu-week-hint {
    font-size: var(--mm-text-meta);
    color: var(--mm-ink-muted);
    text-align: right;
}

/* Toolbar above the calendar: swaps-left chip + Select button (owner only). */
.menu-calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mm-space-3);
    margin-bottom: var(--mm-space-3);
}

.swaps-left-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-ink-muted);
    border: 1px solid var(--mm-hairline);
    border-radius: var(--mm-radius-btn);
    padding: 4px 10px;
    white-space: nowrap;
    background: transparent;
}

/* Desktop week table: Day / Breakfast / Lunch / Dinner, hairline rows, a 2px ink
   rule under the header and under the last row. Today's row sits on paper-2. */
.menu-calendar-table .table {
    margin: 0;
}

.menu-calendar-table .table > :not(caption) > * > * {
    padding: var(--mm-space-4);
    vertical-align: top;
    border-bottom: var(--mm-rule-hairline);
    background: transparent;
}

.menu-calendar-table thead th {
    padding: var(--mm-space-3) var(--mm-space-4);
}

.menu-calendar-table tbody tr:last-child > td {
    border-bottom: var(--mm-rule-ink);
}

.menu-calendar-table td:first-child,
.menu-calendar-table th:first-child {
    width: 150px;
    padding-left: 0;
}

.menu-calendar-table td:last-child,
.menu-calendar-table th:last-child {
    padding-right: 0;
}

.menu-calendar-table td:hover {
    background: var(--mm-paper-2);
}

.menu-day-name {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mm-ink);
}

.menu-day-date {
    font-size: 13px;
    color: var(--mm-ink-muted);
    margin-top: 3px;
}

.menu-calendar-table tr.menu-today-row > td {
    background-color: var(--mm-paper-2);
}

.menu-today-row .menu-day-name,
.menu-today-row .menu-day-date,
.menu-today-card .menu-day-name,
.menu-today-card .menu-day-date,
.menu-today-row .meal-card--dinner .meal-dish,
.menu-today-card .meal-card--dinner .meal-dish {
    color: var(--mm-accent-text);
}

/* Today marker in the menu calendar (desktop row + phone day row) */
.today-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--mm-radius-btn);
    background: var(--mm-oxblood);
    color: #f6f1e7;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
    vertical-align: middle;
}

/* Phone week: one row per day, dinner first, breakfast and lunch beneath.
   Hidden on desktop by the dual-render toggle in the page-level MOBILE
   RESPONSIVE OVERRIDES block. */
.menu-calendar-cards {
    border-top: var(--mm-rule-ink);
}

.menu-day-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 10px;
    padding: var(--mm-space-3) 0;
    border-bottom: var(--mm-rule-hairline);
    min-height: 44px;
}

.menu-day-row.menu-today-card {
    background: var(--mm-paper-2);
    margin: 0 -12px;
    padding: var(--mm-space-3) 12px;
}

.menu-day-col {
    display: flex;
    flex-direction: column;
}

.menu-day-col .menu-day-date {
    margin-top: 0;
    font-size: var(--mm-text-meta);
}

.menu-day-meals {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.meal-line {
    display: flex;
    align-items: baseline;
    gap: var(--mm-space-2);
    min-width: 0;
}

.meal-line .meal-dish {
    font-size: var(--mm-text-body);
    line-height: 1.3;
}

.meal-line .mm-leader {
    min-width: 16px;
    flex-basis: 16px;
}

.meal-time {
    font-size: var(--mm-text-meta);
    font-weight: 600;
    color: var(--mm-ink-muted);
    white-space: nowrap;
}

.meal-card--secondary .meal-line .meal-dish {
    font-size: var(--mm-text-meta);
    color: var(--mm-ink-soft);
}

.meal-card--secondary .meal-type-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-ink-muted);
    margin-right: 6px;
}

.meal-type-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-ink-muted);
}

.menu-day-meals .meal-item {
    border-top: 0;
    padding: 0;
}

.menu-day-meals .compact-add-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--mm-space-4);
}

.menu-day-meals .compact-add-link {
    font-size: var(--mm-text-meta);
    color: var(--mm-ink-muted);
    text-decoration: underline;
    padding: 0;
    margin: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0;
    text-transform: none;
}

.menu-day-meals .compact-add-link:hover,
.menu-day-meals .compact-add-link:focus {
    color: var(--mm-ink);
}

/* Shopping list section below the week (also the print source). */
.menu-list-section {
    border-top: var(--mm-rule-ink);
    margin-top: 44px;
    padding-top: 20px;
}

.menu-list-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--mm-space-3);
}

.menu-list-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(var(--mm-display-floor), 3vw, var(--mm-display-section));
    line-height: 1.1;
    margin: 0;
    color: var(--mm-ink);
}

.menu-list-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mm-space-4);
    padding: var(--mm-space-4) 0;
}

.menu-list-summary p {
    margin: 0;
    color: var(--mm-ink-soft);
}

.menu-list-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mm-space-3);
    padding: var(--mm-space-4) 0;
    border-top: var(--mm-rule-hairline);
    font-size: var(--mm-text-meta);
    color: var(--mm-ink-muted);
}

.menu-list-foot a {
    font-weight: 600;
}

.shopping-section-group {
    margin-bottom: var(--mm-space-4);
}

.shopping-section-header {
    font-family: var(--font-body);
    font-size: var(--mm-caps-size);
    font-weight: 700;
    letter-spacing: var(--mm-caps-tracking);
    text-transform: uppercase;
    color: var(--mm-ink-muted);
    border-bottom: var(--mm-rule-hairline);
    padding: var(--mm-space-2) 0;
    margin-bottom: var(--mm-space-2);
}

/* Generation progress panel (fragments/menu-progress-indicator). */
.menu-progress-panel {
    border: 0;
    border-top: var(--mm-rule-ink);
    background: var(--mm-paper-2);
    padding: var(--mm-space-6);
    color: var(--mm-ink);
    box-shadow: none;
}

.menu-progress-panel .alert-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--mm-display-floor);
    line-height: 1.1;
    margin-bottom: var(--mm-space-2);
}

.menu-progress-panel .progress {
    height: 4px;
    background: var(--mm-hairline);
}

.menu-progress-panel .progress-bar {
    background: var(--mm-ink);
}

.menu-progress-panel p,
.menu-progress-panel small {
    color: var(--mm-ink-soft);
}

.menu-progress-icon {
    font-size: 1.5rem;
    color: var(--mm-accent-text);
}

/* Shopping list "updating" placeholder after a swap. */
.menu-list-updating {
    display: flex;
    align-items: center;
    gap: var(--mm-space-3);
    padding: var(--mm-space-6) 0;
    color: var(--mm-ink-muted);
}

/* Per-meal action sheet (Bootstrap offcanvas, bottom placement). */
.meal-action-sheet {
    height: auto;
    max-height: 85vh;
    border-radius: 0;
    border-top: var(--mm-rule-ink);
}

.meal-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.meal-sheet-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.6rem 0;
    border: 0;
    border-bottom: var(--mm-rule-hairline);
    background: transparent;
    color: var(--mm-ink);
    text-decoration: none;
    font-size: var(--mm-text-body);
    font-weight: 600;
    text-align: left;
}

.meal-sheet-action:hover,
.meal-sheet-action:focus-visible {
    background: var(--mm-paper-2);
    color: var(--mm-ink);
}

.meal-sheet-action i {
    font-size: 1.15rem;
    width: 1.5rem;
    text-align: center;
    color: var(--mm-ink-muted);
}

.meal-sheet-action--danger,
.meal-sheet-action--danger i {
    color: var(--mm-error-text);
}

@media (min-width: 768px) {
    .meal-action-sheet .offcanvas-header,
    .meal-action-sheet .offcanvas-body {
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

/* Select mode: checkboxes are hidden until the "Select" button is on */
.regen-select {
    display: none;
}

#menu-calendar-container.select-mode .regen-select {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    margin: 0 0 var(--mm-space-1);
    padding-left: 0;
    cursor: pointer;
}

.regen-select .regen-select-checkbox {
    float: none;
    margin: 0;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    cursor: pointer;
}

.regen-select .form-check-label {
    cursor: pointer;
    font-size: var(--mm-text-meta);
}

/* Sticky batch-regenerate bar (select mode): a dark bar like the grocery bar. */
.regen-selected-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: var(--mm-space-3) var(--mm-space-4);
    margin: var(--mm-space-3) 0;
    background: var(--mm-panel-bg);
    color: var(--mm-panel-fg);
    border: 1px solid var(--mm-panel-bg);
    border-radius: 0;
    box-shadow: none;
}

@media (prefers-color-scheme: dark) {
    .regen-selected-bar {
        border-color: var(--mm-hairline);
    }
}

.regen-selected-bar .regen-selected-count {
    font-weight: 600;
    color: var(--mm-panel-fg);
}

/* Phone grocery bar: pinned to the bottom, opens the list with the checked
   count. Hidden on desktop, where the side panel carries the same numbers. */
.mm-list-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--mm-panel-bg);
    color: var(--mm-panel-fg);
    border-top: 1px solid var(--mm-panel-bg);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    align-items: center;
    justify-content: space-between;
    gap: var(--mm-space-4);
}

@media (prefers-color-scheme: dark) {
    .mm-list-bar {
        border-top-color: var(--mm-hairline);
    }
}

.mm-list-bar-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.mm-list-bar-text .mm-progress {
    height: 3px;
    max-width: 180px;
}

.mm-list-bar-value {
    font-size: var(--mm-text-body);
    font-weight: 600;
    color: var(--mm-panel-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   MOBILE RESPONSIVE OVERRIDES (MM-193)
   ============================================
   Page-level mobile overrides live here. Overrides scoped to one component's
   own rules (e.g. a component's max-width breakpoint sitting right after its
   base styles) live with that component instead — this predates this PR and
   is not being consolidated. */

@media (max-width: 767.98px) {

    /* --- Cookie banner body padding (mobile only — desktop banner is fixed, no content shift needed) --- */
    body.cookie-banner-visible {
        padding-bottom: calc(var(--cookie-banner-height, 120px) + 1rem);
    }

    /* --- Hero: tighten so the CTAs clear the cookie banner (see .cookie-consent-banner) ---
       At 390x844 the hero's desktop rhythm (64px section padding plus 24-32px
       gaps between badge, title, subtitle and buttons) pushed "Get started free"
       to y=620-683 and the reassurance line to y=699-724. The consent banner
       overlays the bottom ~165px, so both sat underneath it on first load. These
       four values lift the CTA group about 56px; together with the shorter banner
       the buttons and the reassurance line are visible without scrolling.
       HomePageMobileLayoutTest pins the result. */
    .hero {
        padding: var(--space-8) 0;
    }
    .hero-badge {
        margin-bottom: var(--space-4);
    }
    .hero-title {
        margin-bottom: var(--space-4);
    }
    .hero-subtitle {
        margin-bottom: var(--space-6);
    }

    /* --- Page headers: stack title above buttons (MM-194, MM-195) --- */
    .page-header-mobile {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    .page-header-mobile .page-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .page-header-mobile .page-header-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
        --bs-btn-font-size: 12px;
        --bs-btn-padding-x: 12px;
    }
    .page-header-mobile .page-header-actions form {
        flex: 1 1 auto;
        display: grid;
    }

    /* --- Menu history: show cards, hide table (MM-197) --- */
    .menu-history-table { display: none !important; }
    .menu-history-cards { display: block !important; }

    /* --- Recipe Book: show cards, hide table (MM-256) --- */
    .recipe-book-table { display: none !important; }
    .recipe-book-cards { display: block !important; }

    /* --- Menu calendar: show cards, hide table (MM-196) --- */
    .menu-calendar-table { display: none !important; }
    .menu-calendar-cards { display: block !important; }

    /* --- Plan comparison: show cards, hide table (MM-325) --- */
    .plan-matrix-table-wrap { display: none !important; }
    .plan-matrix-cards { display: block !important; }

    /* --- Recipe: show mobile action bar, hide sidebar (MM-200) --- */
    .recipe-mobile-actions { display: flex !important; flex-wrap: wrap; }
    .recipe-sidebar-desktop { display: none !important; }

    /* --- Homepage: collapse onboarding sections (MM-201) --- */
    .onboarding-collapsible { display: none !important; }

    /* --- Footer touch targets (MM-203) --- */
    footer a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* --- Larder phone type: labels 14/700/0.12em, caps buttons 14/0.12em --- */
    .mm-caps,
    .navbar .nav-link,
    .form-label,
    .table thead th,
    .footer-heading,
    .cookie-consent-heading {
        font-size: var(--mm-caps-size-phone);
        letter-spacing: var(--mm-caps-tracking-phone);
    }
    .btn {
        --bs-btn-font-size: 14px;
        letter-spacing: 0.12em;
    }
    .btn-sm {
        --bs-btn-font-size: 12px;
    }
    .btn-link {
        --bs-btn-font-size: var(--mm-text-body);
        letter-spacing: 0;
    }
    .mm-wordmark {
        font-size: 28px;
    }
    .mm-leader {
        min-width: 16px;
        flex-basis: 16px;
    }

    /* --- Menu page (Larder): single column, Tonight first, dinner-first rows --- */
    .menu-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .menu-page-heading {
        gap: 6px;
    }
    .menu-page-title {
        font-size: 38px;
    }
    .menu-page-meta {
        font-size: var(--mm-text-meta);
        gap: 8px;
    }
    .menu-page-header .page-header-actions {
        justify-content: flex-start;
    }
    .menu-tonight-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 16px;
        padding-top: 14px;
    }
    .menu-tonight {
        gap: 8px;
    }
    .menu-tonight-dish {
        font-size: 32px;
    }
    .menu-tonight-meta {
        font-size: var(--mm-text-meta);
        gap: 8px;
    }
    .menu-tonight-actions {
        gap: 10px;
    }
    .menu-tonight-actions .btn {
        min-height: var(--mm-control-height-cta);
    }
    .menu-tonight-actions .btn-primary {
        flex: 1 1 auto;
    }
    /* The sticky grocery bar carries the list numbers on a phone. */
    .menu-side .mm-panel {
        display: none;
    }
    .menu-side-stats {
        gap: 16px;
        padding-top: 0;
    }
    .menu-tonight-row:not(:has(.menu-tonight)) .menu-side {
        display: flex;
        flex-direction: column;
    }
    .menu-week-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin: 18px 0 6px;
    }
    .menu-week-hint {
        text-align: left;
    }
    .menu-list-section {
        margin-top: 24px;
    }
    .menu-notice {
        margin-top: 16px;
    }
    .mm-list-bar {
        display: flex;
    }
    /* Reserve room under <main> for the fixed bar (and the select-mode bar above it).
       The AI launcher rule further down sets a larger value when the launcher renders. */
    body:has(.mm-list-bar) main {
        padding-bottom: 110px;
    }
    body.cookie-banner-visible .mm-list-bar {
        bottom: var(--cookie-banner-height, 120px);
    }
    body.cookie-banner-visible .regen-selected-bar {
        bottom: var(--cookie-banner-height, 120px);
    }
    body:has(.mm-list-bar) .regen-selected-bar {
        bottom: 96px;
    }
    body.cookie-banner-visible:has(.mm-list-bar) .regen-selected-bar {
        bottom: calc(var(--cookie-banner-height, 120px) + 96px);
    }
    body:has(.mm-list-bar) .ai-assistant-launcher {
        bottom: calc(96px + 1rem);
    }
    body.cookie-banner-visible:has(.mm-list-bar) .ai-assistant-launcher {
        bottom: calc(var(--cookie-banner-height, 120px) + 96px + 1rem);
    }

    /* --- Mobile history card styles --- */
    .menu-history-cards .card {
        border-left: 3px solid var(--color-primary-500);
    }
    .menu-history-cards .card .btn {
        font-size: 0.8125rem;
        min-height: 44px;
    }

    /* --- Mobile Recipe Book card styles (MM-256) --- */
    .recipe-book-cards .card {
        border-left: 3px solid var(--color-accent-500);
    }
    .recipe-book-cards .card .btn {
        font-size: 0.8125rem;
        min-height: 44px;
    }

    /* --- Recipe mobile action bar --- */
    .recipe-mobile-actions .btn {
        min-height: 44px;
    }

    /* --- AI assistant launcher: icon-only + reserve space below it (Task 10) ---
       The launcher pill (#menu-assistant-launcher / .ai-assistant-launcher,
       styled in menu-assistant.css) floats bottom-right above the Gleap bubble.
       On phones it was wide enough (~150px) to sit over meal-card titles and the
       save-star tap targets. Hiding the text label shrinks it to an icon-only
       button (the flex gap collapses automatically); the button's accessible
       name still comes from the button's own aria-label (set in
       menu-chat.html), so this is a purely visual change. */
    .ai-assistant-launcher .ai-launcher-label {
        display: none;
    }

    /* Reserve space at the bottom of <main> so the last meal card/shopping-list
       row can always scroll clear of the fixed launcher instead of sitting
       underneath it. :has() scopes this to pages that actually render the
       launcher (COMPLETED menu details, owner only) so no other page gets
       extra bottom padding. Sized from the launcher's own mobile geometry in
       menu-assistant.css: bottom offset 5.25rem (84px) + ~48px pill height +
       breathing room ≈ 160px; when the cookie banner is also visible the
       launcher is lifted further (bottom offset ~180px), so that combination
       needs more clearance still. This padding is on <main> and composes with
       (does not replace) the `body.cookie-banner-visible` padding above, which
       shifts the footer down instead. */
    body:has(.ai-assistant-launcher) main {
        padding-bottom: 160px;
    }
    body.cookie-banner-visible:has(.ai-assistant-launcher) main {
        padding-bottom: 260px;
    }

    /* --- Preferences "Saved" confirmation pill: top-center on mobile (Task 10) ---
       .pref-save-toast (created by preferences/index.html's showPrefSaveToast())
       defaults to bottom-right, which the Gleap support bubble sits on top of on
       phones. Move it to a top-center banner instead. The base rule's
       `animation: prefToastAnim 1.8s ease-in-out forwards;` shorthand still
       supplies duration/easing/fill-mode here — only animation-name is
       overridden below with a variant that keeps the horizontal centering
       transform through every keyframe (the original keyframes only translateY,
       which would fight the translateX(-50%) needed for centering). */
    .pref-save-toast {
        top: 12px;
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        animation-name: prefToastAnimMobile;
    }

    @keyframes prefToastAnimMobile {
        0% { opacity: 0; transform: translate(-50%, -20px); }
        15% { opacity: 1; transform: translate(-50%, 0); }
        75% { opacity: 1; transform: translate(-50%, 0); }
        100% { opacity: 0; transform: translate(-50%, -10px); }
    }

    /* --- Preference tabs: mobile overflow affordance (Task 11) ---
       #preferenceTabs (base overflow-x:auto scrolling is set up in the
       "PREFERENCE TAB MOBILE SCROLLING" block earlier in this file) renders
       951px wide across 6 tabs in a 332px viewport with zero visual hint
       that more tabs exist off-screen — 4 of the 6 tabs were effectively
       undiscoverable. Two changes, both mobile-only:
       1) A right-edge mask-image fade so the cut-off tab visibly trails off
          instead of ending in a hard edge. This fades #preferenceTabs's own
          pixels near the right edge, so it works directly on the scroll
          container without needing an extra wrapper div; -webkit- prefix
          required for Safari/iOS mask support.
       2) Tighter tab padding/font-size (overrides the values from the
          earlier block by appearing later in the cascade at equal
          specificity) so more of the next tab peeks into view as a scroll
          hint, without dropping below the 44px touch-target floor already
          enforced by accessibility.css's `.nav-link { min-height/min-width:
          44px }` rule (min-height/min-width are a floor, not a fixed size,
          so reduced padding on a multi-word label never shrinks below it).
       The active-tab scroll-into-view-on-load behavior lives in
       preferences/index.html's nonce'd script, not here. */
    #preferenceTabs {
        mask-image: linear-gradient(to right, black 85%, transparent);
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent);
    }
    #preferenceTabs .nav-link {
        padding: 0.5rem 0.625rem;
        font-size: 0.8rem;
    }
}

/* --- Desktop: inverse visibility --- */
@media (min-width: 768px) {
    .menu-history-cards { display: none !important; }
    .menu-calendar-cards { display: none !important; }
    .recipe-book-cards { display: none !important; }
    .plan-matrix-cards { display: none !important; }
    .recipe-mobile-actions { display: none !important; }

    /* --- Trial banner: stack columns vertically on phones (MM-226) --- */
    .trial-banner-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* --- Small phone overrides (MM-204) --- */
@media (max-width: 375px) {
    .page-title {
        font-size: 1.5rem;
    }
    .menu-calendar-cards .card-body,
    .menu-history-cards .card-body {
        padding: 0.75rem;
    }
    .page-header-mobile .page-header-actions .btn {
        --bs-btn-font-size: 11px;
        --bs-btn-padding-x: 8px;
    }
}

/* --- Sample proof (MM-338) — the homepage's real-curated-week block ---------------------- */
@media (max-width: 767.98px) {
    .sample-proof {
        padding: var(--space-8) 0;
    }

    /* Stats sit side by side rather than stacking: three short number/label pairs fit across
       390px, and stacking them pushes the day list and its CTAs off the first screen. */
    .sample-proof-stats {
        gap: var(--space-6);
    }

    .sample-proof-stat-number {
        font-size: 2rem;
    }

}

/* --- Menu page additions: AI summary disclosure, nutrition line, filled reaction states ---- */
.ai-summary {
    border-top: var(--mm-rule-hairline);
    margin-top: 28px;
    padding-top: var(--mm-space-3);
}

.ai-summary summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--mm-space-2);
    min-height: 44px;
    list-style: none;
}

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

.ai-summary summary::after {
    content: '+';
    font-weight: 700;
}

.ai-summary[open] summary::after {
    content: '\2013';
}

.ai-summary summary i {
    color: var(--mm-accent-text);
}

.ai-summary p {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 70ch;
    margin: var(--mm-space-2) 0 0;
    line-height: 1.6;
    color: var(--mm-ink-soft);
}

.menu-nutrition {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    border-top: var(--mm-rule-hairline);
    margin-top: 28px;
    padding-top: var(--mm-space-3);
    font-size: var(--mm-text-meta);
    color: var(--mm-ink-soft);
}

.menu-nutrition .mm-sep {
    color: var(--mm-hairline);
}

/* The server re-renders the reaction pair with .btn-loved / .btn-secondary for the
   chosen state; keep those filled oxblood inside the icon-button row. */
.meal-feedback-buttons .btn-loved,
.meal-feedback-buttons .btn-secondary,
.meal-controls .btn-saved {
    --bs-btn-color: #f6f1e7;
    --bs-btn-bg: var(--mm-oxblood);
    --bs-btn-border-color: var(--mm-oxblood);
    --bs-btn-hover-color: #f6f1e7;
    --bs-btn-hover-bg: var(--mm-oxblood-hover);
    --bs-btn-hover-border-color: var(--mm-oxblood-hover);
    --bs-btn-active-color: #f6f1e7;
    --bs-btn-active-bg: var(--mm-oxblood-hover);
    --bs-btn-active-border-color: var(--mm-oxblood-hover);
    --bs-btn-padding-x: 10px;
}

.meal-feedback-buttons .btn .ms-1 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* The inline dislike form drops in at the top of a .meal-card (afterbegin). */
.dislike-form-overlay {
    background: var(--mm-paper-2) !important;
    border: 0 !important;
    border-top: var(--mm-rule-ink) !important;
    padding: var(--mm-space-3);
    margin-bottom: var(--mm-space-2);
}

/* Phone: the per-meal control row reads lighter without its hairline boxes;
   the 44px targets stay, only the border goes. */
@media (max-width: 767.98px) {
    .menu-calendar-cards .meal-controls .btn {
        --bs-btn-border-color: transparent;
        --bs-btn-hover-border-color: var(--mm-hairline);
    }
    .menu-calendar-cards .meal-controls .btn-loved,
    .menu-calendar-cards .meal-controls .btn-saved,
    .menu-calendar-cards .meal-feedback-buttons .btn-secondary {
        --bs-btn-border-color: var(--mm-oxblood);
    }
    .menu-calendar-cards .meal-controls {
        margin-top: 2px;
        gap: 2px;
    }
}

/* Dismissible alerts keep room for the 44px close box on the right. */
.alert-dismissible {
    padding-right: 60px;
}

.alert-dismissible .btn-close {
    top: 4px;
    right: 8px;
    padding: 0;
}