/* ============================================================================
   CF.Foodie Planner — design foundation (D51: "Fresh Kitchen" brand)
   Tokens first; every component references tokens, never raw hex. The visual
   *polish* pass (imagery, motion, dark mode) comes later — this is the base.
   ============================================================================ */

/* ── Brand fonts ─────────────────────────────────────────────────────────────
   Offline-first: bundle the woff2 files in wwwroot/fonts and uncomment these to
   switch on the brand type. Until then the system fallbacks below render. See
   wwwroot/fonts/README.md for the exact files (both OFL-licensed).

@font-face {
    font-family: 'Fraunces'; font-style: normal; font-weight: 400 700;
    font-display: swap; src: url('fonts/Fraunces.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 400 700;
    font-display: swap; src: url('fonts/Inter.woff2') format('woff2');
}
*/

:root {
    /* Brand palette (raw) */
    --green-700: #2F6B3C;   /* primary */
    --green-800: #275A32;   /* primary hover/pressed */
    --green-100: #E4EFE6;   /* primary tint (chips, active) */
    --tomato-600: #E2553B;  /* accent */
    --tomato-700: #C8472F;  /* accent strong */
    --cream:     #FBF8F3;   /* page surface */
    --white:     #FFFFFF;   /* cards */
    --ink-900:   #2B2A27;   /* text */
    --ink-600:   #6B675F;   /* muted text */
    --line-200:  #E7E1D6;   /* borders on cream */
    --amber-500: #B5780A;   /* warning (AA on cream) */
    --danger-600:#C23B22;   /* destructive */
    --danger-100:#F7E4DF;   /* destructive tint */

    /* Semantic tokens */
    --color-primary: var(--green-700);
    --color-primary-strong: var(--green-800);
    --color-primary-tint: var(--green-100);
    --color-accent: var(--tomato-600);
    --color-accent-strong: var(--tomato-700);
    --surface: var(--cream);
    --surface-card: var(--white);
    --surface-landing: #FBFCFA;   /* off-white landing/login background (brand mock) */
    --text: var(--ink-900);
    --text-muted: var(--ink-600);
    --text-on-primary: #FFFFFF;
    --border: var(--line-200);
    --color-success: var(--green-700);
    --color-warn: var(--amber-500);
    --color-danger: var(--danger-600);

    /* Typography */
    --font-heading: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.4rem;
    --text-2xl: 1.65rem;
    --line-tight: 1.2;
    --line-base: 1.5;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* Radius & elevation */
    --radius-sm: 0.4rem;
    --radius: 0.7rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(43, 42, 39, 0.06);
    --shadow: 0 4px 16px rgba(43, 42, 39, 0.10);
    --shadow-lg: 0 8px 28px rgba(43, 42, 39, 0.16);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html, body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--surface);
    line-height: var(--line-base);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    line-height: var(--line-tight);
    color: var(--text);
    margin: 0 0 var(--space-3);
}
h1 { font-size: var(--text-2xl); font-weight: 600; }
h2 { font-size: var(--text-lg); font-weight: 600; }

a, .btn-link { color: var(--color-accent-strong); }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--color-primary-tint);
    color: var(--color-primary-strong);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
}

h1:focus { outline: none; }

/* ── App bar + content ───────────────────────────────────────────────────────*/
.app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: var(--shadow-sm);
}
.app-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); }
.app-content { padding: 0; }

/* Reworked top bar (Slice 8 — D61): ⚙ Settings · brand · 👥 Household */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.9rem; height: 2.9rem; border-radius: var(--radius-pill);
    background: transparent; border: none; color: #fff; cursor: pointer;
    font-size: 1.6rem; line-height: 1;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.16); }
.app-brand {
    display: inline-flex; align-items: center; gap: var(--space-2);
    color: #fff; text-decoration: none; border-radius: var(--radius-sm);
}
.app-logo-img { height: 2rem; width: auto; display: block; }
.household-menu { position: relative; }

/* Screen-reader-only text (keeps an <h1> for FocusOnNavigate without a visible duplicate — D50) */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Page containers (members/dietary/settings + the 1a onboarding/today screens) */
.page, .today, .onboarding, .settings {
    padding: var(--space-5) var(--space-4) var(--space-6);
    max-width: 40rem;
    margin: 0 auto;
}
.page-head { display: flex; align-items: center; gap: var(--space-3); }
.page-head h1 { font-size: var(--text-xl); margin: var(--space-1) 0; }
.page-sub { color: var(--text-muted); margin-top: 0; }
.link-back {
    background: transparent; border: none; color: var(--color-primary-strong);
    cursor: pointer; padding: 0; font-size: var(--text-base);
}
.section-label {
    font-size: var(--text-xs); text-transform: uppercase; color: var(--text-muted);
    letter-spacing: 0.04em; margin: var(--space-4) 0 var(--space-2); font-weight: 600;
}

/* ── Avatar menu ─────────────────────────────────────────────────────────────*/
.avatar-menu { position: relative; }
.avatar-btn {
    display: inline-flex; align-items: center; gap: var(--space-1);
    background: transparent; border: none; color: #fff; cursor: pointer; font-size: var(--text-base);
}
.avatar-initials {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: var(--radius-pill);
    background: #fff; color: var(--color-primary); font-weight: 700; font-size: var(--text-sm);
}
.avatar-initials.sm {
    width: 1.7rem; height: 1.7rem; font-size: var(--text-xs);
    background: var(--color-primary-tint); color: var(--color-primary-strong);
}
.menu-backdrop { position: fixed; inset: 0; z-index: 25; }
.menu-panel {
    position: absolute; right: 0; top: 2.8rem; min-width: 15rem;
    background: var(--surface-card); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: var(--space-2); z-index: 30;
}
.menu-head { padding: var(--space-2) var(--space-2) var(--space-3); display: flex; flex-direction: column; }
.menu-sub { color: var(--text-muted); font-size: var(--text-sm); }
.menu-label {
    padding: var(--space-2) var(--space-2) var(--space-1); font-size: var(--text-xs);
    text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.04em; font-weight: 600;
}
.menu-item {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    text-align: left; background: transparent; border: none;
    padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm);
    cursor: pointer; font-size: var(--text-base); color: var(--text);
}
.menu-item:hover { background: var(--color-primary-tint); }
.menu-role { color: var(--text-muted); font-size: var(--text-sm); }
.menu-danger { color: var(--color-danger); }
.menu-divider { height: 1px; background: var(--border); margin: var(--space-2) var(--space-1); }

/* ── Cards & helper text ─────────────────────────────────────────────────────*/
.card {
    background: var(--surface-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--space-4); margin: var(--space-3) 0;
    box-shadow: var(--shadow-sm);
}
.card h2 { margin: 0 0 var(--space-2); }
.hint { color: var(--text-muted); font-size: var(--text-sm); }
.error { color: var(--color-danger); font-size: var(--text-sm); }
.warning {
    background: #FBEFD6; color: #6b4e09; border: 1px solid #ECD9A8;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.saved { color: var(--color-success); font-size: var(--text-sm); font-weight: 600; }
.setting-line { margin: var(--space-1) 0; }

/* ── Buttons ─────────────────────────────────────────────────────────────────*/
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-weight: 600; line-height: 1; cursor: pointer;
    padding: 0.6rem 1rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface-card); color: var(--text);
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:hover { background: #f3efe7; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--color-primary); color: var(--text-on-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-strong); border-color: var(--color-primary-strong); }
.btn-sm { padding: 0.3rem 0.65rem; font-size: var(--text-sm); }
.btn-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-outline-danger { background: var(--surface-card); color: var(--color-danger); border-color: #E3B9AF; }
.btn-outline-danger:hover { background: var(--danger-100); }
.link {
    background: transparent; border: none; color: var(--color-primary-strong);
    cursor: pointer; padding: var(--space-1) 0; font-size: var(--text-base); font-weight: 600;
}

/* ── Forms ───────────────────────────────────────────────────────────────────*/
.field { display: block; margin: var(--space-2) 0; }
.field-label { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-1); }
input, select {
    font: inherit; color: var(--text); background: var(--surface-card);
    padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.field input, .field select { width: 100%; box-sizing: border-box; }
.inline-form { display: flex; gap: var(--space-2); }
.inline-form input { flex: 1; }
.actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.onboarding input { width: 100%; box-sizing: border-box; margin-bottom: var(--space-2); }

/* ── Badges / chips ─────────────────────────────────────────────────────────*/
.role-badge, .role {
    font-size: var(--text-sm); color: var(--color-primary-strong); background: var(--color-primary-tint);
    padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); font-weight: 600;
}
.tag {
    font-size: var(--text-xs); background: #ECE6DB; color: var(--text-muted);
    padding: 0.05rem 0.45rem; border-radius: var(--radius-pill); margin-left: var(--space-2);
}

/* ── Invite code ─────────────────────────────────────────────────────────────*/
.invite-code { display: flex; align-items: center; gap: var(--space-3); }
.invite-code code, .invite {
    font-size: var(--text-lg); letter-spacing: 0.06em; padding: 0.4rem 0.7rem;
}

/* ── Members list ────────────────────────────────────────────────────────────*/
.member-list { list-style: none; padding: 0; margin: 0; }
.member { border-bottom: 1px solid var(--border); }
.member-row {
    display: flex; align-items: center; gap: var(--space-3); width: 100%;
    background: transparent; border: none; padding: var(--space-3) var(--space-1);
    cursor: pointer; text-align: left;
}
.member-row:hover { background: var(--color-primary-tint); border-radius: var(--radius-sm); }
.member-name { flex: 1; display: flex; flex-direction: column; }
.member-meta { color: var(--text-muted); font-size: var(--text-sm); }
.member-detail { padding: var(--space-2) var(--space-1) var(--space-4); }
.detail-block { margin: var(--space-2) 0; }
.detail-label { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
.role-toggle { display: inline-flex; gap: var(--space-2); }
.confirm-text { display: block; margin-bottom: var(--space-2); color: var(--color-danger); font-size: var(--text-sm); }

/* ── Dietary editor ──────────────────────────────────────────────────────────*/
.allergen-list { list-style: none; padding: 0; margin: 0; }
.allergen-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2) 0; border-bottom: 1px solid var(--border);
}

/* ── Reference & master data (Slice 2) ───────────────────────────────────────*/
.ref-hub { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.ref-hub-row, .ref-item-row {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: var(--space-3); margin-bottom: var(--space-2); cursor: pointer; text-align: left;
    font: inherit; color: inherit;
}
.ref-hub-row:hover, .ref-item-row:hover { background: var(--color-primary-tint); }
.ref-hub-name { font-weight: 600; }
.ref-hub-count { color: var(--text-muted); }

.ref-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.ref-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) 0; border-bottom: 1px solid var(--border);
}
.ref-item-name { flex: 1; }
/* Expanded inline edit (name + category + preferred-shops picker) stacks full-width in the row. */
.ref-edit { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.ref-item-row { margin-bottom: 0; border: none; border-radius: var(--radius-sm); }

.warning-card { border-color: #E3B9AF; }
.dup-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: var(--space-2) 0;
}
.dup-names { color: var(--text-muted); font-size: var(--text-sm); }

.aisle-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.aisle-row {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) 0; border-bottom: 1px solid var(--border);
}
.aisle-order { color: var(--text-muted); font-size: var(--text-sm); min-width: 1.5rem; }
.aisle-name, .aisle-edit { flex: 1; }
.aisle-actions { display: inline-flex; align-items: center; gap: var(--space-2); }
.link-danger { color: var(--color-danger); }

.unit-item { gap: var(--space-3); }
.unit-code { font-weight: 600; min-width: 3.5rem; }
.unit-name { flex: 1; }
.unit-factor { color: var(--text-muted); font-size: var(--text-sm); }
.unit-fields { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.unit-fields .field { margin: var(--space-1) 0; }
.unit-edit { width: 100%; }
.checkbox-field { display: flex; align-items: center; gap: var(--space-2); }
.checkbox-field input { width: auto; }

/* ── Keyboard focus indicator (D50) ──────────────────────────────────────────*/
.menu-item:focus-visible,
.member-row:focus-visible,
.ref-hub-row:focus-visible,
.ref-item-row:focus-visible,
.meal-card:focus-visible,
.plan-card:focus-visible,
.list-card:focus-visible,
.slot-meal:focus-visible,
.seg-btn:focus-visible,
.picker-option:focus-visible,
.tab:focus-visible,
.version-head:focus-visible,
.link:focus-visible,
.link-back:focus-visible,
.btn:focus-visible,
.launch-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.avatar-btn:focus-visible,
.icon-btn:focus-visible,
.app-brand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.menu-panel:focus-visible { outline: none; }

/* ── Template-provided: error UI, validation, iOS safe area ──────────────────*/
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: none;
}
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); }
.invalid { outline: 1px solid var(--color-danger); }
.validation-message { color: var(--color-danger); }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.status-bar-safe-area { display: none; }

/* ── Live presence & connection cues (Slice 9a — D30) ────────────────────────*/
.household-cue {
    display: flex; align-items: baseline; gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    background: var(--color-primary-strong); color: #fff;
    font-size: var(--text-xs);
}
.household-cue .cue-label { opacity: 0.75; text-transform: uppercase; letter-spacing: 0.04em; }
.household-cue .cue-name { font-weight: 600; }

.live-status {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    margin: var(--space-2) 0 var(--space-3);
}
.conn-pill {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: 600;
    background: var(--surface-card); border: 1px solid var(--border); color: var(--text-muted);
}
.conn-dot { width: 0.55rem; height: 0.55rem; border-radius: var(--radius-pill); background: currentColor; }
.conn-live { color: var(--color-primary-strong); border-color: var(--color-primary-tint); }
.conn-reconnecting { color: var(--color-accent-strong); border-color: var(--color-accent); }
.conn-reconnecting .conn-dot { animation: conn-pulse 1s ease-in-out infinite; }
.conn-offline { color: var(--text-muted); }
@keyframes conn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.presence { display: inline-flex; align-items: center; gap: var(--space-2); }
.presence-dots { display: inline-flex; }
.presence-dot {
    width: 0.7rem; height: 0.7rem; border-radius: var(--radius-pill);
    background: var(--color-accent); border: 2px solid var(--surface);
    margin-left: -0.25rem;
}
.presence-dot:first-child { margin-left: 0; }
.presence-text { font-size: var(--text-xs); color: var(--text-muted); }

/* A row/badge briefly highlights when another member changes it (D30). */
.shop-item.flash, .curation-item.flash { animation: row-flash 1.5s ease-out; }
.slot-badge.flash { animation: badge-flash 1.5s ease-out; }
@keyframes row-flash {
    0% { background: var(--color-primary-tint); }
    100% { background: transparent; }
}
@keyframes badge-flash {
    0% { transform: scale(1.25); }
    60% { transform: scale(1); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .conn-reconnecting .conn-dot,
    .shop-item.flash, .curation-item.flash, .slot-badge.flash { animation: none; }
    .spinner { animation: none; }
}

/* ── Offline & conflict cues (Slice 9b increment 3 — D32/D63) ─────────────────*/
.offline-note {
    margin: var(--space-2) 0; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm); font-size: var(--text-sm);
    background: var(--color-primary-tint); color: var(--color-primary-strong);
}
.conflict-cue {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    margin: var(--space-2) 0; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm); font-size: var(--text-sm);
    background: var(--danger-100); color: var(--color-accent-strong); border: 1px solid var(--color-accent);
}
.conflict-cue span { flex: 1 1 auto; }

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: var(--color-primary);
        width: 100%;
        z-index: 1;
    }
}

/* ── Meals: cookbook (Slice 3a) ──────────────────────────────────────────────*/
.meal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.meal-card {
    width: 100%; display: flex; align-items: center; gap: var(--space-3);
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-3); text-align: left; cursor: pointer; box-shadow: var(--shadow-sm);
}
.meal-thumb {
    flex: 0 0 auto; width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xl); background: var(--color-primary-tint); border-radius: var(--radius-sm);
}
.meal-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.meal-name { font-weight: 600; color: var(--text); }
.meal-meta { font-size: var(--text-sm); color: var(--text-muted); display: flex; gap: var(--space-1); flex-wrap: wrap; }
.meal-go { flex: 0 0 auto; color: var(--text-muted); font-size: var(--text-lg); }
.stars { color: var(--color-accent); letter-spacing: 1px; }

/* ── Meal editor / detail ────────────────────────────────────────────────────*/
.field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.field-row .field { flex: 1 1 6rem; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.action-row { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

.hero { margin-bottom: var(--space-4); }
.hero-placeholder {
    display: flex; align-items: center; justify-content: center;
    height: 9rem; background: var(--color-primary-tint); border-radius: var(--radius);
    font-size: 2.5rem; color: var(--color-primary-strong);
}
.hero-img { width: 100%; height: 11rem; object-fit: cover; border-radius: var(--radius); display: block; }
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.hero-note { font-size: var(--text-xs); color: var(--text-muted); }
.meal-thumb-img { object-fit: cover; padding: 0; }
.meal-summary { display: flex; gap: var(--space-1); flex-wrap: wrap; color: var(--text-muted); font-size: var(--text-sm); }
.tag-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.tag-row .tag { margin-left: 0; }
.tag-type { background: var(--color-primary-tint); color: var(--color-primary-strong); }

.tag-pick { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.tag-toggle { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

/* Ingredient lines (editor + detail) */
.line-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.line-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.line-name { font-weight: 500; flex: 1 1 7rem; min-width: 0; }
.line-qty { width: 4.5rem; }
.line-notes { flex: 1 1 6rem; }
.line-qty-text { color: var(--text-muted); font-size: var(--text-sm); }
.line-note-text { color: var(--text-muted); font-size: var(--text-sm); font-style: italic; }
.line-shop-text { color: var(--text-muted); font-size: var(--text-sm); }
.line-shop { display: flex; align-items: center; gap: var(--space-2); flex-basis: 100%; }

/* ── Ingredient autosuggest picker ───────────────────────────────────────────*/
.ingredient-picker { position: relative; }
.picker-list {
    list-style: none; margin: var(--space-1) 0 0; padding: var(--space-1);
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); max-height: 14rem; overflow-y: auto;
}
.picker-option {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text);
}
.picker-option:hover { background: var(--color-primary-tint); }
.picker-create { color: var(--color-primary-strong); font-weight: 600; }

/* ── Recipe method + version history (Slice 3bc) ─────────────────────────────*/
.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.tab {
    background: none; border: none; cursor: pointer; padding: var(--space-2) var(--space-3);
    color: var(--text-muted); font-size: var(--text-sm); font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab-active { color: var(--color-primary-strong); border-bottom-color: var(--color-primary); }

.step-list { margin: var(--space-2) 0 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); color: var(--text); }
.step-list li { padding-left: var(--space-1); }

.step-edit-list { list-style: none; margin: var(--space-2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.step-edit-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.step-edit-row textarea { flex: 1 1 auto; }
.step-num {
    flex: 0 0 auto; width: 1.6rem; height: 1.6rem; margin-top: var(--space-1);
    display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: 600;
    background: var(--color-primary-tint); color: var(--color-primary-strong); border-radius: var(--radius-sm);
}

.version-choice { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.version-choice legend { padding: 0 var(--space-2); }

.version-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.version-row { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.version-head {
    width: 100%; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    background: var(--surface-card); border: none; cursor: pointer; text-align: left; padding: var(--space-3);
}
.version-head:hover { background: var(--color-primary-tint); }
.version-num { font-weight: 600; color: var(--text); }
.version-meta { color: var(--text-muted); font-size: var(--text-sm); }
.version-detail { padding: 0 var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Meal planning (Slice 4) ─────────────────────────────────────────────────*/
.empty { text-align: center; padding: var(--space-6) var(--space-3); color: var(--text-muted); }
.empty-icon { font-size: 2.5rem; display: block; margin-bottom: var(--space-2); }

.seg { display: flex; gap: 0; margin-bottom: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; }
.seg-btn { background: var(--surface-card); border: none; cursor: pointer; padding: var(--space-2) var(--space-3); color: var(--text-muted); font-weight: 600; font-size: var(--text-sm); }
.seg-btn:not(:last-child) { border-right: 1px solid var(--border); }
.seg-btn:disabled { opacity: .5; cursor: not-allowed; }
.seg-on { background: var(--color-primary); color: #fff; }

.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.plan-card {
    width: 100%; display: flex; align-items: center; gap: var(--space-3);
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-3); cursor: pointer; text-align: left;
}
.plan-card:hover { background: var(--color-primary-tint); }
.plan-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.plan-name { font-weight: 600; color: var(--text); }
.plan-meta { color: var(--text-muted); font-size: var(--text-sm); }
.plan-status { font-size: var(--text-sm); color: var(--text-muted); text-transform: capitalize; }
.plan-go { color: var(--text-muted); }

.day-section { margin-top: var(--space-4); }
.day-head { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 var(--space-1); }
.slot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.slot-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.slot-name { flex: 0 0 5.5rem; color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; }
.slot-meal { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-2); background: none; border: none; cursor: pointer; text-align: left; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--text); }
.slot-meal:hover { background: var(--color-primary-tint); }
.slot-meal-name { font-weight: 600; }
.slot-tag { font-size: var(--text-sm); color: var(--color-primary-strong); }
.slot-override { color: var(--text-muted); font-style: italic; }
.slot-empty { color: var(--text-muted); }
.add-slot { margin-top: var(--space-2); font-size: var(--text-sm); }
.plan-cta { margin-top: var(--space-6); align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Completion badges + plan % (Slice 7 — D38): derived from shopping check-off, live via SignalR. */
.plan-progress { margin: var(--space-3) 0 0; }
.slot-badge { flex: 0 0 auto; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.slot-badge.part { color: var(--color-warn); }
.slot-badge.done { color: var(--color-success); }
.plan-pct {
    flex: 0 0 auto; font-size: var(--text-sm); font-weight: 600;
    color: var(--color-primary-strong); background: var(--color-primary-tint);
    padding: 0 var(--space-2); border-radius: var(--radius-pill);
}
.plan-pct.done { color: #fff; background: var(--color-success); }

.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }
.sheet {
    position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 41;
    width: min(34rem, 100%); max-height: 90vh; overflow-y: auto;
    background: var(--surface-card); border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-lg, 0 -4px 24px rgba(0,0,0,.18));
    padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; }
.meal-choice { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.meal-choice legend { padding: 0 var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.radio { display: flex; align-items: center; gap: var(--space-2); }
.radio input { width: auto; }
.meal-select, .override-input, .servings-field { margin-left: var(--space-5); }

/* ── Shopping lists (Slice 5 — D19/D25/D54) ──────────────────────────────── */
.list-index, .list-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.list-card {
    width: 100%; display: flex; align-items: center; gap: var(--space-3);
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-3); cursor: pointer; text-align: left;
}
.list-card:hover { background: var(--color-primary-tint); }
.list-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.list-name { font-weight: 600; color: var(--text); }
.list-meta { color: var(--text-muted); font-size: var(--text-sm); }

.gen-result { margin-top: var(--space-4); }
.gen-result-head { display: flex; align-items: center; justify-content: space-between; }
.gen-result-head h2 { margin: 0; }
.warn { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-accent, #E2553B); border-radius: var(--radius-sm); background: var(--color-accent-tint, rgba(226,85,59,.08)); }
.warn p { margin: 0 0 var(--space-1); }

.cat-section { margin-top: var(--space-4); }
.cat-head { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 var(--space-1); }
.shop-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.shop-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.shop-item-check { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; flex: 1 1 auto; }
.shop-item-check input { width: auto; flex: 0 0 auto; }
.shop-item-name { color: var(--text); }
.shop-item.ticked .shop-item-name { text-decoration: line-through; color: var(--text-muted); }
.shop-item-qty { color: var(--color-primary-strong); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.shop-item.ticked .shop-item-qty { color: var(--text-muted); }
.qty-na { color: var(--text-muted); font-style: italic; font-weight: 400; }
.list-foot { margin-top: var(--space-4); }

/* ── Shopping experience: In-Shop + Curation modes (Slice 6a — D36/D37) ───── */
.seg-btn[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
.progress { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.progress-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-strong); white-space: nowrap; }
.progress-track { flex: 1 1 auto; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-primary); transition: width .18s ease; }
.marker { margin-left: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
.checked-by { margin-left: var(--space-1); color: var(--text-muted); font-weight: 400; }
.curation-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.curation-name { flex: 1 1 8rem; color: var(--text); }
.curation-qty { color: var(--color-primary-strong); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.curation-item.editing { gap: var(--space-1); }
.edit-name { flex: 1 1 8rem; }
.edit-qty { flex: 0 0 4.5rem; }
.edit-unit { color: var(--text-muted); font-size: var(--text-sm); }
.add-item { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.add-name { flex: 1 1 8rem; }
.add-qty { flex: 0 0 6rem; }
.btn-add { margin-top: var(--space-3); width: 100%; border-style: dashed; color: var(--color-primary-strong); }

/* ── Plan calendar: landscape day-grid (Slice 4) ─────────────────────────────
   Portrait (phone upright) keeps the vertical day list. Rotate to landscape —
   or open on a tablet/wide screen — and the days lay out as columns so the extra
   width is used. CSS-only; the BlazorWebView re-applies on rotation. */
.day-grid { display: flex; flex-direction: column; }

@media (orientation: landscape) {
    .page.plan-detail { max-width: 72rem; }
    .day-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
        gap: var(--space-3);
        align-items: start;
    }
    .day-grid .day-section {
        margin-top: 0;
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: var(--space-3);
        box-shadow: var(--shadow-sm);
    }
    /* Stack slot name above the meal so narrow day columns don't crush the row. */
    .day-grid .slot-row { flex-wrap: wrap; }
    .day-grid .slot-name { flex-basis: 100%; }
    .day-grid .slot-meal { flex-basis: 0; }
}

/* Plan toolbar: prefill / clear-all actions above the day grid (Slice 4) */
.plan-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }

/* ── Landing / login screen (brand mock) ─────────────────────────────────────*/
.landing {
    min-height: 100vh; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center;
    background: var(--surface-landing);
    padding: var(--space-5) var(--space-4) var(--space-4);
}
.landing-main {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--space-4); padding-top: 16vh; width: 100%; max-width: 22rem;
}
.landing-logo {
    width: 8.5rem; height: 8.5rem; object-fit: contain;
    border-radius: var(--radius-lg);
}
.landing-title {
    font-family: var(--font-body); font-weight: 700; font-size: var(--text-2xl);
    color: var(--text); margin: 0;
}
.landing-login { min-width: 11rem; padding: 0.6rem 1.5rem; }
.landing-loading {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    color: var(--text-muted); font-size: var(--text-sm);
}
.spinner {
    width: 1.15rem; height: 1.15rem; flex: none; border-radius: 50%;
    border: 2px solid var(--color-primary-tint);
    border-top-color: var(--color-primary);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.landing-footer {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    padding-bottom: var(--space-2);
}
.landing-poweredby { font-size: var(--text-xs); color: var(--text-muted); }
.landing-cf { height: 1.4rem; width: auto; }

/* ── Today screen (Slice 8 — D61) ────────────────────────────────────────────*/
.today-section { margin-bottom: var(--space-4); }
/* A hairline separator between each Today section. */
.today-section + .today-section {
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
}

/* Tonight hero — today's assigned meal(s) from the current plan */
.tonight-card {
    display: flex; gap: var(--space-3); align-items: stretch;
    background: var(--surface-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    overflow: hidden; margin-bottom: var(--space-3);
}
.tonight-photo {
    flex: 0 0 8rem; display: flex; align-items: center; justify-content: center;
    background: var(--color-primary-tint);
}
.tonight-photo img { width: 100%; height: 100%; object-fit: cover; }
.tonight-photo-empty { font-size: 2.25rem; }
.tonight-body {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-3); min-width: 0;
}
.tonight-slot {
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); font-weight: 600;
}
.tonight-name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; }
.tonight-meta { font-size: var(--text-sm); color: var(--text-muted); }
.tonight-body .action-row { margin-top: auto; padding-top: var(--space-2); }

/* Active shopping lists picker */
.today-list-select { width: 100%; box-sizing: border-box; }

/* Main launcher grid */
.launcher { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.launch-btn {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 3.5rem; padding: var(--space-3);
    background: var(--surface-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    color: var(--text); font-size: var(--text-base); font-weight: 600; cursor: pointer;
}
.launch-btn:hover { background: var(--color-primary-tint); border-color: var(--color-primary); }
.launch-wide { grid-column: 1 / -1; }

/* Footer */
.today-footer {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border);
}
.today-footer .powered { font-size: var(--text-xs); color: var(--text-muted); }
.today-cf { height: 1.6rem; width: auto; }