/* ============================================================
   FAMILY HUB — Dark Theme CSS
   ============================================================ */

/* ── Structural variables (layout only, theme-agnostic) ─────── */
:root {
    --sidebar-width: 220px;
    --topbar-height: 48px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --transition: 0.18s ease;
    --glass-blur: 16px;
}

/* ── Dark Theme ─────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg: #0f1117;
    --surface: #1a1d27;
    --surface-alt: #222636;
    --surface-raised: #1f2335;
    --surface-active: #252a3d;
    --border: #2d3148;
    --border-light: #3a3f5c;
    --text: #e4e6f0;
    --text-muted: #8b8fa8;
    --text-dim: #5c6078;
    --accent: #6c8cff;
    --accent-soft: rgba(108, 140, 255, 0.12);
    --green: #4ade80;
    --green-soft: rgba(74, 222, 128, 0.12);
    --orange: #fb923c;
    --orange-soft: rgba(251, 146, 60, 0.12);
    --red: #f87171;
    --red-soft: rgba(248, 113, 113, 0.12);
    --yellow: #facc15;
    /* semantic macro + chart colours */
    --color-protein: #4ade80;
    --color-carbs:   #f59e0b;
    --color-fat:     #f472b6;
    --color-fiber:   #a78bfa;
    --color-blue:    #3b82f6;
    /* elevation */
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.22);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.28);
    --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
    /* bottom-only variants — a card that sits flush against its neighbours
       wants a drop below it, not a glow all round */
    --shadow-under:       0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-under-hover: 0 3px 8px rgba(0, 0, 0, 0.38);
    /* glass */
    --glass-bg: rgba(26, 29, 39, 0.72);
    --glass-border: rgba(255, 255, 255, 0.07);
}

/* ── Light Theme ─────────────────────────────────────────────── */
[data-theme="light"] {
    --bg: #f0f4f8;
    --surface: rgba(255, 255, 255, 0.85);
    --surface-alt: rgba(235, 238, 246, 0.8);
    --surface-raised: rgba(255, 255, 255, 0.97);
    --surface-active: rgba(228, 231, 242, 0.9);
    --border: rgba(0, 0, 0, 0.09);
    --border-light: rgba(0, 0, 0, 0.16);
    --text: #1a1a2e;
    --text-muted: #4a4a6a;
    --text-dim: #6b6b88;
    --accent: #4b6cf7;
    --accent-soft: rgba(75, 108, 247, 0.1);
    --green: #059669;
    --green-soft: rgba(5, 150, 105, 0.1);
    --orange: #d97706;
    --orange-soft: rgba(217, 119, 6, 0.1);
    --red: #dc2626;
    --red-soft: rgba(220, 38, 38, 0.09);
    --yellow: #b45309;
    /* semantic macro + chart colours (lighter for light bg readability) */
    --color-protein: #059669;
    --color-carbs:   #d97706;
    --color-fat:     #c026d3;
    --color-fiber:   #7c3aed;
    --color-blue:    #2563eb;
    /* elevation */
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-3: 0 8px 30px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-under:       0 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-under-hover: 0 3px 8px rgba(0, 0, 0, 0.14);
    /* glass */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv11', 'ss01';
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1 { font-size: 1.5rem; font-weight: 600; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }

img { max-width: 100%; height: auto; }

/* ============================================================
   APP LAYOUT (Desktop)
   ============================================================ */

.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    height: 100vh;
    overflow: hidden;
}

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-brand-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color var(--transition), background var(--transition);
}

.sidebar-toggle-btn:hover {
    color: var(--text);
    background: var(--surface-alt);
}

.sidebar-nav {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 4px;
}

.nav-section-title {
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    color: var(--text-muted);
    font-size: 13.5px;
    border-left: 2px solid transparent;
    transition: all var(--transition);
}

.nav-link:hover {
    color: var(--text);
    background: var(--surface-alt);
    text-decoration: none;
    border-left-color: var(--border-light);
}

.nav-link.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-left-color: var(--accent);
}

/* ── Admin nav section ───────────────────────────────────────── */
.nav-section--admin {
    margin-top: 4px;
    border-top: 1px solid var(--border);
    padding-top: 4px;
}

/* Toggle button styled like a section title */
.nav-admin-toggle {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: color var(--transition);
    box-sizing: border-box;
}

.nav-admin-toggle:hover {
    color: var(--text-muted);
}

.nav-admin-toggle-icon {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.nav-section--admin-open .nav-admin-toggle-icon {
    transform: rotate(180deg);
}

/* Admin links: slightly smaller and dimmer than primary */
.nav-link--admin {
    font-size: 12.5px;
    padding: 6px 16px;
    color: var(--text-dim);
}

.nav-link--admin:hover {
    color: var(--text-muted);
}

.nav-link--admin.active {
    color: var(--accent);
}

/* Collapsed body: hidden by default, shown when open */
.nav-admin-body {
    display: none;
}

.nav-section--admin-open .nav-admin-body {
    display: block;
}

.sidebar-stats {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

.sidebar-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-muted);
}

.sidebar-stat-value {
    color: var(--text);
    font-weight: 500;
}

.main-area {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
}

.topbar {
    height: var(--topbar-height);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 0 8px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

/* ── Search pill ─────────────────────────────────────────────── */
.topbar-search-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 0 10px;
    height: 32px;
    background: var(--surface-alt, rgba(255,255,255,0.06));
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    flex-shrink: 0;
}
.topbar-search-pill:hover {
    border-color: var(--accent, #6366f1);
    color: var(--text);
    background: var(--surface-alt, rgba(255,255,255,0.09));
}
.topbar-search-icon { flex-shrink: 0; opacity: 0.7; }
.topbar-search-label { font-size: 13px; }
.topbar-search-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    background: var(--surface, rgba(255,255,255,0.04));
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    font-family: monospace;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── Topbar right cluster ────────────────────────────────────── */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* kept for back-compat but no longer rendered */
.topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── User menu ───────────────────────────────────────────────── */
.user-menu-wrap {
    position: relative;
}

.user-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent, #6366f1);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: none;
    cursor: pointer;
    transition: opacity var(--transition), box-shadow var(--transition);
    flex-shrink: 0;
}
.user-avatar-btn:hover { opacity: 0.88; box-shadow: 0 0 0 3px rgba(99,102,241,0.28); }
.user-avatar-btn:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: 2px; }

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    border-radius: var(--radius, 10px);
    padding: 6px;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform-origin: top right;
}
.user-menu-dropdown.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}
.user-menu-avatar-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent, #6366f1);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.user-menu-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.user-menu-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu-email {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: calc(var(--radius, 10px) - 2px);
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.user-menu-item:hover {
    background: var(--surface-alt, rgba(255,255,255,0.07));
    color: var(--text);
}
.user-menu-item:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 1px;
}

.content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

/* ============================================================
   AUTH LAYOUT
   ============================================================ */

.auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 15% 20%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 75%, color-mix(in srgb, var(--green) 6%, transparent) 0%, transparent 50%);
}

/* Left panel — branding/tagline, visible at >= 768px */
.auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 56px;
    position: relative;
    overflow: hidden;
}

.auth-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 60%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 65%),
        radial-gradient(ellipse at 70% 20%, color-mix(in srgb, var(--green) 5%, transparent) 0%, transparent 50%);
    pointer-events: none;
}

.auth-panel-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 48px;
    position: relative;
}

.auth-panel-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent);
    flex-shrink: 0;
}

.auth-panel-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.auth-panel-tagline {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    position: relative;
}

.auth-panel-tagline em {
    font-style: normal;
    color: var(--accent);
}

.auth-panel-body {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 340px;
    position: relative;
}

.auth-panel-dots {
    display: flex;
    gap: 8px;
    margin-top: 48px;
    position: relative;
}

.auth-panel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-light);
}

.auth-panel-dot:first-child {
    background: var(--accent);
    width: 24px;
    border-radius: 4px;
}

/* Right panel — form */
.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    border-left: 1px solid var(--border);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 36px;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    box-shadow: var(--shadow-3);
}

@supports not (backdrop-filter: blur(1px)) {
    .auth-card { background: var(--surface-raised); }
}

.auth-card h1 {
    margin-bottom: 8px;
    font-size: 1.4rem;
}

.auth-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 24px;
}

/* Tablet: stack vertically, hide left panel */
@media (max-width: 900px) {
    .auth-layout {
        grid-template-columns: 1fr;
        align-items: center;
    }

    .auth-panel {
        display: none;
    }

    .auth-form-panel {
        min-height: 100vh;
        border-left: none;
        padding: 40px 20px;
    }
}

/* Phone: compact padding */
@media (max-width: 480px) {
    .auth-form-panel {
        padding: 24px 16px;
        align-items: flex-start;
        padding-top: 48px;
    }

    .auth-card {
        padding: 28px 22px;
    }
}

.auth-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

/* ============================================================
   PHONE LAYOUT
   ============================================================ */

.phone-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
}

.phone-content {
    flex: 1;
    padding-bottom: 64px;
    overflow-y: auto;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--text-muted);
    font-size: 11px;
    padding: 8px 16px;
    text-decoration: none;
    transition: color var(--transition);
}

.bottom-nav-item.active,
.bottom-nav-item:hover {
    color: var(--accent);
    text-decoration: none;
}

/* ── Mobile Shopping ─────────────────────────────────────── */

.m-shopping {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.m-shopping-header {
    background: var(--surface);
    padding: 16px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.m-shopping-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.m-shopping-title {
    font-size: 20px;
    font-weight: 700;
}

.m-shopping-progress-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
}

.m-store-tabs {
    display: flex;
    overflow-x: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0 4px;
    -webkit-overflow-scrolling: touch;
}

.m-store-tab {
    padding: 10px 16px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.m-store-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.m-shopping-list {
    flex: 1;
    padding-bottom: 80px;
}

.m-category {
    border-bottom: 1px solid var(--border);
}

.m-category-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface);
    border: none;
    cursor: pointer;
    text-align: left;
}

.m-category-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.m-category-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.m-category-count {
    font-size: 12px;
    color: var(--text-dim);
}

.m-category-chevron {
    font-size: 10px;
    color: var(--text-dim);
    transition: transform 0.2s ease;
}

.m-shopping-item {
    border-bottom: 1px solid var(--border);
}

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

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

.m-shopping-item--checked {
    opacity: 0.6;
}

.m-shopping-item-tap {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: rgba(108, 140, 255, 0.15);
    transition: background 0.1s;
}

.m-shopping-item-tap:active {
    background: var(--accent-soft);
}

.m-shopping-item-check {
    width: 28px;
    height: 28px;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--accent);
    transition: background 0.1s, border-color 0.1s;
}

.m-shopping-item--checked .m-shopping-item-check {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.m-shopping-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m-shopping-item-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}

.m-shopping-item-qty {
    font-size: 13px;
    color: var(--text-muted);
}

.m-shopping-item-price {
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.m-shopping-item-notes {
    font-size: 12px;
    color: var(--text-dim);
    padding: 0 16px 10px 58px;
    font-style: italic;
}

.m-fab {
    position: fixed;
    bottom: 76px;
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 28px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(108, 140, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: transform 0.2s, box-shadow 0.2s;
}

.m-fab:active {
    transform: scale(0.93);
    box-shadow: 0 2px 6px rgba(108, 140, 255, 0.3);
}

.m-add-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    z-index: 200;
    animation: slideUp 0.25s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.m-add-panel-inner {
    padding: 20px 16px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.m-add-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.m-add-panel-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.m-add-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
}

.m-shopping-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 60px;
    font-size: 14px;
    color: var(--text-muted);
}

/* ============================================================
   TABLET LAYOUT
   ============================================================ */

.tablet-layout {
    min-height: 100vh;
    background: var(--bg);
}

.tablet-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    cursor: pointer;
    border-radius: var(--radius);
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.4;
}

.btn:hover {
    background: var(--border);
    text-decoration: none;
    color: var(--text);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: color-mix(in srgb, var(--accent) 85%, #000 15%);
    border-color: color-mix(in srgb, var(--accent) 85%, #000 15%);
    color: #fff;
}

.btn-danger {
    background: var(--red-soft);
    border-color: var(--red);
    color: var(--red);
}

.btn-danger:hover {
    background: var(--red);
    color: #fff;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12.5px;
}

.btn-xs {
    padding: 2px 8px;
    font-size: 12px;
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--surface-alt);
    border-color: var(--border);
}

/* ============================================================
   FORMS
   ============================================================ */

.form-group {
    margin-bottom: 16px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
    display: block;
    width: 100%;
    padding: 9px 12px;
    min-height: 40px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background-color: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
    outline: none;
    box-sizing: border-box;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
    background-color: var(--surface-active);
}

.form-control:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
input[type="search"]:focus-visible,
input[type="url"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
    outline: none;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Themed select chevron — both themes via CSS filter trick on the SVG fill */
select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%238b8fa8' d='M7 9.5L2 4.5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    padding-right: 32px;
    cursor: pointer;
}

/* Light theme: darker chevron to stay visible on light background */
[data-theme="light"] select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%235c6078' d='M7 9.5L2 4.5h10z'/%3E%3C/svg%3E");
}

select[multiple] {
    padding-right: 12px;
}

textarea {
    resize: vertical;
    min-height: 80px;
}

/* Compact inline input for table edit rows */
.form-control-inline {
    display: inline-block;
    width: auto;
    min-height: 32px;
    padding: 4px 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background-color: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    box-sizing: border-box;
    max-width: 100%;
}

.form-control-inline:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Select variant */
select.form-control-inline {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14'%3E%3Cpath fill='%238b8fa8' d='M7 9.5L2 4.5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
    padding-right: 26px;
    cursor: pointer;
}

.form-error {
    color: var(--red);
    font-size: 12px;
    margin-top: 4px;
    list-style: none;
}

.form-help {
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 4px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}

/* ============================================================
   TABLES
   ============================================================ */

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.table thead th {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

.table tbody tr:last-child {
    border-bottom: none;
}

.table tbody tr:hover {
    background: var(--surface-alt);
}

.table td {
    padding: 10px 14px;
    color: var(--text);
    font-size: 13.5px;
    vertical-align: middle;
}

.table .actions {
    text-align: right;
    white-space: nowrap;
}

.table .actions-inner {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

/* ============================================================
   FLASH MESSAGES
   ============================================================ */

.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius);
    font-size: 13.5px;
    border: 1px solid;
}

.flash-success {
    background: var(--green-soft);
    border-color: var(--green);
    color: var(--green);
}

.flash-error,
.flash-danger {
    background: var(--red-soft);
    border-color: var(--red);
    color: var(--red);
}

.flash-warning {
    background: var(--orange-soft);
    border-color: var(--orange);
    color: var(--orange);
}

.flash-info {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* ============================================================
   PAGE COMPONENTS
   ============================================================ */

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

.page-header h1 {
    font-size: 1.4rem;
    color: var(--text);
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.empty-state p {
    font-size: 15px;
    margin-bottom: 16px;
}

.empty-state .empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.4;
}

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

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid;
}

.badge-accent {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.badge-green {
    background: var(--green-soft);
    border-color: var(--green);
    color: var(--green);
}

.badge-orange {
    background: var(--orange-soft);
    border-color: var(--orange);
    color: var(--orange);
}

.badge-red {
    background: var(--red-soft);
    border-color: var(--red);
    color: var(--red);
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */

.progress-bar {
    height: 6px;
    background: var(--surface-alt);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
    background: var(--accent);
}

.progress-bar-fill.on-track { background: var(--green); }
.progress-bar-fill.low { background: var(--orange); }
.progress-bar-fill.over { background: var(--red); }

/* ============================================================
   TABS
   ============================================================ */

.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.tab-link {
    padding: 8px 16px;
    font-size: 13.5px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all var(--transition);
    text-decoration: none;
}

.tab-link:hover {
    color: var(--text);
    text-decoration: none;
}

.tab-link.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ============================================================
   SUMMARY BOXES
   ============================================================ */

.summary-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.summary-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.summary-box-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.summary-box-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.summary-box-sub {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ============================================================
   RECIPE CARDS
   ============================================================ */

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.recipe-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition);
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.recipe-card:hover {
    border-color: var(--border-light);
    text-decoration: none;
}

.recipe-card-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: var(--surface-alt);
}

.recipe-card-no-image {
    width: 100%;
    height: 140px;
    background: var(--surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 32px;
}

.recipe-card-body {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.recipe-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.3;
}

.recipe-card-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.recipe-card-macros {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-dim);
}

.macro-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.macro-chip-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.macro-chip-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* ============================================================
   PLANNER
   ============================================================ */

.planner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.planner-week-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* The refresh control is a form (it POSTs). Make the form itself the flex item
   rather than `display: contents`, which some browsers use to drop the form's
   semantics from the accessibility tree. */
.planner-refresh-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.planner-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.planner-week-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.planner-members {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.member-tab {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-muted);
    background: var(--surface);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.member-tab:hover,
.member-tab.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    text-decoration: none;
}

.planner-wrap {
    overflow-x: auto;
}

.planner-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(140px, 1fr));
    gap: 8px;
    min-width: 980px;
}

.planner-day-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.planner-day-col.today {
    border-color: var(--accent);
}

.planner-day-header {
    padding: 8px 10px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.planner-day-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.planner-day-date {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-top: 2px;
}

.planner-day-col.today .planner-day-date {
    color: var(--accent);
}

.planner-slot {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    min-height: 60px;
}

.planner-slot:last-of-type {
    border-bottom: none;
    flex: 1;
}

.planner-slot-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.planner-slot-empty {
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 6px;
    text-align: center;
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--transition);
}

.planner-slot-empty:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.plan-entry-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 4px;
    font-size: 12px;
    cursor: grab;
    position: relative;
}

.plan-entry-card:hover {
    border-color: var(--border-light);
}

.plan-entry-card.leftover {
    border-color: var(--orange);
    background: var(--orange-soft);
}

.plan-entry-card.quick-entry {
    border-style: dashed;
}

.plan-entry-name {
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
    line-height: 1.3;
}

.plan-entry-meta {
    font-size: 11px;
    color: var(--text-dim);
}

.planner-macro-bar {
    padding: 6px 8px;
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
    font-size: 11px;
}

.macro-row {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.macro-row strong {
    color: var(--text);
}

/* ============================================================
   STAR RATING
   ============================================================ */

.star-rating {
    display: flex;
    gap: 2px;
}

.star {
    font-size: 18px;
    color: var(--border-light);
    cursor: pointer;
    transition: color var(--transition);
}

.star.filled,
.star:hover ~ .star {
    color: var(--yellow);
}

.star-rating:hover .star {
    color: var(--yellow);
}

.star-rating .star:hover ~ .star {
    color: var(--border-light);
}

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

.shopping-category {
    margin-bottom: 16px;
}

.shopping-category-header {
    padding: 8px 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.shopping-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    transition: background var(--transition);
}

.shopping-item:last-child {
    border-radius: 0 0 var(--radius) var(--radius);
}

.shopping-item.checked {
    opacity: 0.5;
}

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

.shopping-item-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.shopping-item-name {
    flex: 1;
    font-size: 14px;
    color: var(--text);
}

.shopping-item-qty {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.shopping-item-price {
    font-size: 13px;
    color: var(--text-dim);
    white-space: nowrap;
}

/* ============================================================
   COOK MODE
   ============================================================ */

.cook-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    padding: 24px;
    background: var(--bg);
    min-height: 100vh;
}

.cook-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cook-step-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.cook-step-number {
    font-size: 13px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.cook-step-instruction {
    font-size: 22px;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 24px;
    flex: 1;
}

.cook-step-dots {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: background var(--transition);
}

.step-dot.active { background: var(--accent); }
.step-dot.done { background: var(--green); }

.cook-nav {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.cook-nav .btn {
    padding: 12px 24px;
    font-size: 16px;
    flex: 1;
    justify-content: center;
}

.cook-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cook-ingredient-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    flex: 1;
}

.cook-ingredient-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition);
}

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

.cook-ingredient-item:hover {
    background: var(--surface-alt);
}

.cook-ingredient-item.checked {
    opacity: 0.5;
    text-decoration: line-through;
}

.cook-timer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}

.cook-timer-display {
    font-size: 36px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    margin: 8px 0;
}

/* ============================================================
   SEARCH & FILTERS
   ============================================================ */

.search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    align-items: center;
}

.search-input-wrap {
    flex: 1;
    position: relative;
}

.search-input-wrap input {
    padding-left: 36px;
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
}

.filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filter-chip {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
    background: var(--surface);
}

.filter-chip:hover,
.filter-chip.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* ============================================================
   RECIPE FORM — collection items
   ============================================================ */

.collection-item {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 8px;
    position: relative;
}

.collection-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.collection-remove {
    color: var(--red);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}

.collection-add {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px dashed var(--accent);
    padding: 8px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    width: 100%;
    justify-content: center;
    transition: all var(--transition);
}

.collection-add:hover {
    background: var(--accent);
    color: #fff;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-accent { color: var(--accent); }
.text-green { color: var(--green); }
.text-orange { color: var(--orange); }
.text-red { color: var(--red); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }

.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

.w-full { width: 100%; }

.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.ml-2 { margin-left: 8px; }

.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }

.form-inline { display: inline; }
.overflow-x-auto { overflow-x: auto; }
.font-mono { font-family: monospace; }
.text-center { text-align: center; }
.display-contents { display: contents; }
.text-md { font-size: 16px; }
.text-13 { font-size: 13px; }
.max-w-sm { max-width: 400px; }
.max-w-md { max-width: 600px; }
.max-w-lg { max-width: 700px; }

/* Error pages */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
}
.error-page-icon { font-size: 64px; margin-bottom: 16px; }
.error-page-title { font-size: 28px; margin-bottom: 8px; }
.error-page-desc { max-width: 400px; margin-bottom: 32px; }

/* Cook complete */
.cook-complete { text-align: center; padding: 48px 24px; }
.cook-complete-icon { font-size: 64px; margin-bottom: 16px; }
.cook-complete-title { font-size: 28px; margin-bottom: 8px; }
.cook-complete-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Page intro paragraph */
.page-intro { color: var(--text-muted); margin-bottom: 20px; font-size: 13px; }

/* Ingredient nutrition panel */
.ingredient-nutrition-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
.ingredient-nutrition-item { text-align: center; }
.ingredient-nutrition-value { font-size: 20px; font-weight: 600; }
.ingredient-nutrition-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Tab bar with bottom margin */
.tab-bar-spaced { margin-bottom: 20px; }

/* Validation / import result sections */
.validation-errors { color: var(--red); margin-bottom: 8px; }
.validation-unresolved { color: var(--orange); margin-bottom: 8px; }
.validation-success { color: var(--green); margin-bottom: 8px; }
.validation-skipped { color: var(--text-muted); margin-bottom: 8px; }

/* Alert list spacing */
.alert-list { margin: 6px 0 0 0; padding-left: 18px; }

/* Template card body */
.template-card-body { padding: 12px 16px; }
.template-card-day { margin-bottom: 8px; }
.template-card-day-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.template-card-entry { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.template-card-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--border); }

/* Section header row (h3 + action button) */
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

/* Pantry two-column layout */
.pantry-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.pantry-category { margin-bottom: 20px; }
.pantry-category-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.pantry-category-card { padding: 0; overflow: hidden; }

/* Two-column layouts used in prep/template pages */
.sidebar-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.template-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.template-list { display: flex; flex-direction: column; gap: 16px; }
.template-card-save-body { padding: 16px; }

/* Shopping grids */
.shopping-store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.shopping-store-card-progress { margin-top: 8px; }
.shopping-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.shopping-generate-center { text-align: center; margin-top: -8px; }
.shopping-generate-empty { padding: 24px 16px; text-align: center; }

/* Manual add form grids */
.manual-add-row-1 {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: end;
}

.manual-add-row-1 > *:first-child { /* Item name: flex-grow */
    min-width: 0;
}

.manual-add-qty-field {
    width: 90px;
}

.manual-add-unit-field {
    width: 110px;
}

.manual-add-row-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    margin-top: 10px;
    align-items: end;
}

.manual-add-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 600px) {
    .manual-add-row-1 {
        grid-template-columns: 1fr 1fr;
    }

    .manual-add-row-1 > *:first-child {
        grid-column: 1 / -1; /* Item name full width on phone */
    }

    .manual-add-qty-field,
    .manual-add-unit-field {
        width: 100%;
    }

    .manual-add-row-2 {
        grid-template-columns: 1fr;
    }
}

/* Dashboard quick links */
.dashboard-quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }

/* Macros tab */
.macros-tab-header { margin-bottom: 20px; }
.macros-tab-chart { margin-bottom: 20px; }
.macro-weekly-target { margin-top: 12px; }

/* Planner tab */
.planner-tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.planner-tab-meta { color: var(--text-muted); font-size: 13px; }
.planner-tab-action { margin-top: 12px; }

/* Prep tab */
.prep-tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.prep-tab-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.prep-progress-bar-wrap { flex: 1; }

/* Shopping tab */
.shopping-tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.shopping-tab-actions { display: flex; gap: 8px; }

/* Alias form */
.alias-card-warning { border-left: 3px solid var(--orange); }
.alias-form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.alias-form-group-sm { flex: 1; min-width: 180px; }
.alias-form-group-lg { flex: 2; min-width: 220px; }

/* Intervals test result */
.intervals-test-result { font-size: 0.85rem; }

/* Intervals form group with inline action */
.form-group-action { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

/* Inline checkbox label */
.checkbox-label-inline { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; }

/* Recipe show tags row */
.recipe-tags-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

/* Recipe form collection header */
.collection-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

/* Ingredient row remove button */
.row-remove-btn { display: flex; align-items: flex-end; padding-bottom: 4px; }

/* Recipe form actions border */
.form-actions-bordered { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Prep progress in prep index */
.prep-progress-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.prep-progress-bar-fixed { width: 120px; }

/* Import JSON textarea */
.import-json-textarea { font-family: monospace; font-size: 13px; }

/* Import flex buttons */
.import-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Import details reference */
.import-reference { margin-top: 20px; }
.import-reference-pre { font-size: 12px; overflow-x: auto; color: var(--text-muted); }

/* Recipe search sidebar hint */
.recipe-search-hint { color: var(--text-muted); font-size: 13px; }

/* Sidebar household toggle margin */
.sidebar-household-margin { margin-bottom: 10px; }

/* Ingredient filter max-width */
.ingredient-search-input { max-width: 260px; }

/* Pantry form grids */
.pantry-qty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Shopping mobile empty page */
.m-shopping-empty { padding: 24px 16px; text-align: center; }

/* Shopping mobile add grid */
.m-add-qty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

/* Member row inactive badge */
.badge--inactive { background: var(--surface-alt); border-color: var(--border); color: var(--text-dim); }

/* Member integration link active */
.integration-link--connected { color: var(--green); }

/* Summary boxes variant with top margin */
.summary-boxes-mt { margin-top: 16px; }

/* Meal dashboard index value small */
.summary-box-value--sm { font-size: 16px; }

/* Recipe image preview */
.recipe-image-preview { margin-bottom: 8px; }
.recipe-image-preview img { max-height: 120px; border-radius: 4px; }

/* Recipe form empty collection hint */
.empty-collection-hint { color: var(--text-muted); font-size: 13px; }

/* Rating row margin */
.ratings-list { margin-bottom: 16px; }

/* Rating form label */
.rating-form-label { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 6px; }

/* Rating comment input */
.rating-comment-input { font-size: 13px; }

/* Auth heading */
.auth-heading { font-size: 1.3rem; margin-bottom: 4px; }
.auth-submit { justify-content: center; padding: 10px; }

/* Shopping show tab bar */
.tab-bar-nav { margin-bottom: 20px; }
.tab-bar-border { gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }

/* 14px text helper */
.text-14 { font-size: 14px; }

/* Padding utility */
.p-6 { padding: 24px; }

/* Bottom nav icon */
.bottom-nav-icon { font-size: 20px; }

/* Sidebar footer stat row */
.sidebar-stat-footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* Empty state SVG icon */
.empty-state-svg { opacity: 0.3; color: var(--text-muted); }

/* Auth remember-me row */
.auth-remember-row { display: flex; align-items: center; gap: 8px; }
.auth-remember-label { margin: 0; font-size: 13px; color: var(--text-muted); cursor: pointer; }

hr.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

.section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Mobile hamburger button (hidden on desktop) ────────────── */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    transition: color var(--transition), background var(--transition);
    flex-shrink: 0;
    /* flush to the left edge of topbar padding */
    margin-left: -4px;
}
.mobile-menu-btn:hover { color: var(--text); background: var(--surface-alt); }
.mobile-menu-btn:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: 1px; }

/* ── Mobile sidebar backdrop ─────────────────────────────────── */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.55);
}
.sidebar-backdrop[hidden] { display: none !important; }

@media (max-width: 900px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 200;
        width: min(var(--sidebar-width), 85vw);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        height: 100dvh;
    }

    .sidebar--mobile-open {
        transform: translateX(0);
        box-shadow: 6px 0 32px rgba(0, 0, 0, 0.45);
    }

    .sidebar--mobile-open ~ .sidebar-backdrop {
        display: block;
    }

    .mobile-menu-btn {
        display: flex;
    }

    /* On tablet/mobile, hide the ⌘K hint — touch users don't have keyboards */
    .topbar-search-kbd {
        display: none;
    }

    .recipe-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 600px) {
    .content {
        padding: 16px;
    }
    /* UI-05: stale rule removed — scroll-snap handles phone layout */
    .summary-boxes {
        grid-template-columns: repeat(2, 1fr);
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .cook-layout {
        grid-template-columns: 1fr;
    }
    .cook-step-instruction {
        font-size: 18px;
    }

    /* Phone: topbar title hidden (hamburger + icon-only search is enough) */
    .topbar-title {
        display: none;
    }
    /* Phone: search label hidden — icon-only pill */
    .topbar-search-label {
        display: none;
    }
    .topbar-search-pill {
        width: 36px;
        padding: 0;
        justify-content: center;
    }
    /* Phone: theme toggle stays visible — compact pill fits the row */
}

/* ============================================================
   RECIPE LAYOUT
   ============================================================ */

.recipe-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
}

.recipe-filters {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    position: sticky;
    top: 0;
}

.filter-group {
    margin-bottom: 14px;
}

.filter-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.filter-tags-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 160px;
    overflow-y: auto;
    padding-right: 2px;
}

.filter-tag-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    padding: 2px 0;
}

.filter-tag-item input[type="checkbox"] {
    flex-shrink: 0;
}

.filter-nutrition-row {
    display: grid;
    grid-template-columns: 50px 1fr 1fr;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.filter-nutrition-label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.filter-nutrition-input {
    padding: 4px 6px;
    font-size: 12px;
}

.filter-tag-item span {
    line-height: 1.3;
}

/* ---- Filter accordion ---- */
.filter-accordion {
    border-bottom: 1px solid var(--border);
}

.filter-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.filter-accordion-header::-webkit-details-marker { display: none; }
.filter-accordion-header::marker { display: none; }

.filter-accordion-header .filter-label {
    margin-bottom: 0;
}

.filter-accordion-arrow {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    display: inline-block;
    line-height: 1;
}

.filter-accordion[open] > .filter-accordion-header .filter-accordion-arrow {
    transform: rotate(90deg);
}

.filter-accordion-body {
    padding-bottom: 12px;
}

.filter-accordion-body .filter-nutrition-row:first-child {
    margin-top: 2px;
}

.badge-cuisine {
    background: color-mix(in srgb, var(--purple, #7c3aed) 15%, transparent);
    color: var(--purple, #7c3aed);
    border: 1px solid color-mix(in srgb, var(--purple, #7c3aed) 30%, transparent);
}

.recipe-results-count {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* ============================================================
   RECIPE CARD (EXTRA)
   ============================================================ */

.recipe-card {
    position: relative;
}

.recipe-card-plan-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, background 0.15s ease;
}

.recipe-card:hover .recipe-card-plan-btn {
    opacity: 1;
    pointer-events: auto;
}

.recipe-card-plan-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

@media (hover: none) {
    .recipe-card-plan-btn {
        opacity: 1;
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.6);
    }
}

.recipe-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.recipe-card-link:hover {
    text-decoration: none;
}

.recipe-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
}

.recipe-favourite-indicator {
    color: var(--yellow);
    font-size: 14px;
    flex-shrink: 0;
}

.recipe-time,
.recipe-kcal {
    font-size: 12px;
    color: var(--text-muted);
}

.recipe-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 6px;
    flex: 1;
}

.recipe-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.badge-tag {
    background: var(--surface-alt);
    border-color: var(--border-light);
    color: var(--text-muted);
    font-weight: 500;
}

.badge-meal-type {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.badge-muted {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--text-dim);
}

.btn-favourite-active {
    color: var(--yellow);
    border-color: var(--yellow);
    background: rgba(250, 204, 21, 0.08);
}

/* ============================================================
   RECIPE SHOW PAGE
   ============================================================ */

.recipe-show-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 20px;
    align-items: start;
}

.recipe-show-image {
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}

.recipe-show-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.recipe-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
}

.recipe-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: var(--radius);
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.recipe-meta-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.recipe-meta-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.macro-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.macro-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.macro-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.macro-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

.ingredient-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}

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

.ingredient-optional {
    opacity: 0.7;
}

.ingredient-qty {
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    min-width: 70px;
}

.ingredient-name {
    color: var(--text);
    flex: 1;
}

.ingredient-notes {
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
}

.step-list {
    list-style: none;
    padding: 0;
    counter-reset: none;
}

.step-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

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

.step-number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

.step-content {
    flex: 1;
}

.step-instruction {
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 4px;
}

.step-timer {
    font-size: 12px;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.ratings-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.rating-avg {
    font-size: 28px;
    font-weight: 700;
    color: var(--yellow);
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

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

.star-display {
    color: var(--yellow);
    letter-spacing: 2px;
}

/* Phone: collapse the two-column layout so Steps go full-width
   (otherwise Steps are crushed into the 1fr right column). */
@media (max-width: 700px) {
    .recipe-show-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   RECIPE FORM
   ============================================================ */

.recipe-form-layout {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 20px;
    align-items: start;
}

.recipe-form-main {
    min-width: 0;
}

.recipe-form-side {
    min-width: 0;
    position: sticky;
    top: 0;
}

/* Steps: full-width section below the two-column area.
   Instructions are long-form, so each step gets a comfortable card
   in a 2-up grid rather than being crammed into the slim side column. */
.recipe-form-steps {
    margin-top: 20px;
}

.steps-collection-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.steps-collection-grid > .collection-row {
    margin-bottom: 0;
}

.recipe-form-steps textarea {
    min-height: 64px;
}

/* Stack everything on tablet/phone — the 1fr 440px grid overflowed below 900px */
@media (max-width: 900px) {
    .recipe-form-layout {
        grid-template-columns: 1fr;
    }
    .recipe-form-side {
        position: static;
    }
    .steps-collection-grid {
        grid-template-columns: 1fr;
    }
}

.collection-row {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
    position: relative;
}

.step-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.step-row-number {
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.step-row-label {
    font-size: 11px;
    color: var(--text-dim);
    display: block;
    margin-top: 2px;
}

.step-row-fields {
    flex: 1;
    min-width: 0;
}

.ingredient-row-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ============================================================
   STAR RATING
   ============================================================ */

.star-input {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.star-btn {
    font-size: 24px;
    cursor: pointer;
    color: var(--text-dim);
    transition: color var(--transition), transform 0.1s;
    user-select: none;
    line-height: 1;
}

.star-btn:hover,
.star-btn.star-preview {
    color: var(--yellow);
    transform: scale(1.1);
}

.star-btn.star-active {
    color: var(--yellow);
}

.rating-form {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 4px;
}

/* ============================================================
   PLANNER - MEAL SLOTS & ENTRY CARDS (new naming)
   ============================================================ */

.member-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.meal-slot {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    min-height: 70px;
}

.meal-slot:last-of-type {
    border-bottom: none;
    flex: 1;
}

.meal-slot-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px 6px;
    /* Day columns go down to 140px, where the label plus totals will not fit on
       one line — let the totals wrap onto their own row instead of clipping. */
    flex-wrap: wrap;
}

/* Slot macro totals, pushed to the right of the meal-type label. */
.meal-slot-total {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    letter-spacing: 0;
    text-transform: none;
}
.meal-slot-total-macro {
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.meal-slot-total-macro em {
    font-style: normal;
    font-weight: 600;
    opacity: 0.65;
    margin-left: 1px;
}
/* Same hues as the entry-card macros, so the column reads as one scale. */
.meal-slot-total-macro--kcal { color: var(--accent); }
.meal-slot-total-macro--protein { color: var(--color-protein); }

.meal-slot-add {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.slot-add-btn,
.slot-quick-btn {
    flex: 1;
    padding: 3px 0;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition);
}

.slot-add-btn:hover,
.slot-quick-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.meal-slot.drag-over {
    background: var(--accent-soft);
    border-color: var(--accent);
    border-style: dashed;
}

/* Entry cards (planner grid) */
.entry-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 4px;
    font-size: 12px;
    cursor: grab;
    position: relative;
    transition: border-color var(--transition);
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
}

.entry-card--has-image {
    /* padding is set in "ENTRY CARDS — RECLAIM THE COLUMN WIDTH" at the end of
       this file. It cannot live here: the later plain .entry-card rule has the
       same specificity and would win, which is exactly what went wrong before. */
    flex-direction: column;
}

.entry-card-thumb {
    width: 100%;
    height: 70px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.entry-card-content {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    /* position: relative so absolute actions anchor to the card, not content */
    position: static;
}

.entry-card:hover {
    border-color: var(--border-light);
}

.entry-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.entry-card.entry-leftover {
    border-color: var(--orange);
    background: var(--orange-soft);
}

.entry-card.entry-note {
    border-style: dashed;
    border-color: var(--text-dim);
    background: transparent;
}

.entry-card-name {
    color: var(--text);
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 2px;
    font-weight: 500;
}

.entry-card-macros {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}
.entry-macro {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.entry-macro em {
    font-style: normal;
    font-weight: 400;
    margin-left: 1px;
    font-size: 10px;
    opacity: 0.75;
}
.entry-macro--kcal    { color: var(--accent); }
.entry-macro--protein { color: var(--color-protein); }
.entry-macro--carbs   { color: var(--color-carbs); }
.entry-macro--fat     { color: var(--color-fat); }
.entry-macro--fiber   { color: var(--color-fiber); }

.entry-card-actions {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    /* Absolute overlay in top-right — no height cost, no clipped footer */
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity var(--transition);
}

.entry-card:hover .entry-card-actions,
.entry-card:focus-within .entry-card-actions {
    opacity: 1;
}

/* Touch devices — always show actions */
@media (hover: none) {
    .entry-card-actions {
        opacity: 1;
        position: static;
        margin-top: 4px;
    }
}

.entry-action-link,
.entry-action-btn {
    font-size: 11px;
    padding: 1px 4px;
    border-radius: 3px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
}

.entry-action-link:hover {
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}

.btn-danger-inline:hover {
    color: var(--red);
    border-color: var(--red);
}

/* Recipe search sidebar (floating panel) */
.recipe-search-sidebar {
    position: fixed;
    right: 0;
    top: var(--topbar-height);
    width: 300px;
    height: calc(100vh - var(--topbar-height));
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 100;
    overflow-y: auto;
    padding: 16px;
    box-shadow: -4px 0 16px rgba(0,0,0,0.3);
}

.sidebar-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.search-result-item {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--transition);
    border-radius: 4px;
}

.search-result-item:hover {
    background: var(--surface-alt);
}

.search-result-name {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}

.search-result-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

/* ── Shopping List ─────────────────────────────────────────── */

.shopping-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shopping-category {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.shopping-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.shopping-category-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0;
}

.shopping-category-count {
    font-size: 11px;
}

.shopping-category-items {
    display: flex;
    flex-direction: column;
}

.shopping-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

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

.shopping-item--checked {
    opacity: 0.5;
}

.shopping-item--checked .shopping-item-name {
    text-decoration: line-through;
}

.shopping-item--manual {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.shopping-item--carried {
    background: color-mix(in srgb, var(--yellow) 8%, transparent);
}

.shopping-item-check {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-light);
    border-radius: 4px;
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.1s, background 0.1s;
}

.shopping-item--checked .shopping-item-check {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.shopping-item-check:hover {
    border-color: var(--accent);
}

.shopping-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shopping-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.shopping-item-qty {
    font-size: 12px;
    color: var(--text-muted);
}

.shopping-item-notes {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
}

.shopping-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.shopping-item-price {
    font-size: 12px;
    color: var(--text-muted);
}

.progress-bar-wrap {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ── Pantry ─────────────────────────────────────────────────── */

.pantry-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

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

.pantry-row-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.pantry-row-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pantry-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ── Cooking Mode (Tablet) ───────────────────────────────────── */

.cook-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
}

.cook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    gap: 16px;
    flex-wrap: wrap;
}

.cook-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cook-title {
    font-size: 22px;
    font-weight: 700;
}

.cook-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 0;
    flex: 1;
    overflow: hidden;
}

.cook-steps-panel {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    overflow-y: auto;
}

.cook-ingredients-panel {
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding: 20px;
}

.cook-step-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    flex: 1;
}

.cook-step-number {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 12px;
}

.cook-step-instruction {
    font-size: 20px;
    line-height: 1.6;
    color: var(--text);
}

.cook-timer {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cook-timer-label {
    font-size: 13px;
    color: var(--text-muted);
    min-width: 60px;
}

.cook-timer-display {
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    min-width: 80px;
}

.cook-timer-controls {
    display: flex;
    gap: 8px;
}

.cook-nav-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cook-nav-btn {
    padding: 10px 24px;
    font-size: 16px;
}

.cook-step-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.cook-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.cook-step-dot.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.cook-step-dot.done {
    background: var(--green-soft);
    border-color: var(--green);
    color: var(--green);
}

.cook-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.cook-servings-scaler {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.cook-servings-label {
    font-size: 13px;
    color: var(--text-muted);
    flex: 1;
}

.cook-servings-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background: var(--surface-alt);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cook-servings-count {
    font-size: 18px;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
}

.cook-ingredient-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cook-ingredient-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

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

.cook-ingredient-check {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-light);
    border-radius: 4px;
    background: transparent;
    color: var(--green);
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cook-ingredient-item--checked .cook-ingredient-check {
    background: var(--green-soft);
    border-color: var(--green);
}

.cook-ingredient-qty {
    font-size: 13px;
    color: var(--text-muted);
    min-width: 60px;
}

.cook-ingredient-name {
    font-size: 14px;
    color: var(--text);
    flex: 1;
}

.cook-ingredient-name--done {
    text-decoration: line-through;
    color: var(--text-dim);
}

/* ── Meal Prep ──────────────────────────────────────────────── */
.prep-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prep-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: opacity 0.2s;
}

.prep-note--done {
    opacity: 0.55;
}

.prep-note--done .prep-note-content {
    text-decoration: line-through;
    color: var(--text-dim);
}

.prep-note-check {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 2px solid var(--border-light);
    border-radius: 50%;
    background: transparent;
    color: var(--green);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
}

.prep-note--done .prep-note-check {
    background: var(--green-soft);
    border-color: var(--green);
}

.prep-note-body {
    flex: 1;
    min-width: 0;
}

.prep-note-content {
    font-size: 14px;
    color: var(--text);
    margin: 0 0 2px;
    word-break: break-word;
}

.prep-note-recipe {
    font-size: 12px;
}

.prep-note-actions {
    flex-shrink: 0;
}

/* ── Phase 14 Polish ───────────────────────────────────────── */

/* Turbo progress bar */
.turbo-progress-bar {
    height: 3px;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
}

/* Loading state for turbo frames */
turbo-frame[busy] {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* Button loading state */
.btn[data-loading],
button[data-loading] {
    opacity: 0.65;
    pointer-events: none;
    cursor: wait;
}

/* Device toggle */
.device-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
}

.device-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    color: var(--text-muted);
    transition: background 0.15s;
}

.device-btn:hover {
    background: var(--surface-active);
    color: var(--text);
}

.device-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Responsive refinements — hide sidebar on small screens */
@media (max-width: 768px) {
    .app-sidebar {
        display: none;
    }
    .app-content {
        padding: 12px;
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    margin-top: 24px;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: background 0.15s;
}

.pagination-btn:hover {
    background: var(--surface-raised);
}

.pagination-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.pagination-btn:disabled,
.pagination-btn[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

/* Confirmation dialog styling (native browser) */
/* Empty state refinements */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.empty-state h3 {
    font-size: 16px;
    color: var(--text);
    margin-bottom: 6px;
}

.empty-state p {
    font-size: 13px;
    max-width: 320px;
    margin: 0 auto 16px;
}

/* ============================================================
   UI IMPROVEMENTS — Phase 15
   ============================================================ */

/* ── T1.1 Semantic Meal-type Badge Colours ───────────────── */

:root {
    --meal-breakfast: #f59e0b;
    --meal-breakfast-soft: rgba(245,158,11,0.12);
    --meal-lunch: #34d399;
    --meal-lunch-soft: rgba(52,211,153,0.12);
    --meal-dinner: #818cf8;
    --meal-dinner-soft: rgba(129,140,248,0.12);
    --meal-snack: #f472b6;
    --meal-snack-soft: rgba(244,114,182,0.12);
}

.badge-meal-breakfast {
    background: var(--meal-breakfast-soft);
    border-color: var(--meal-breakfast);
    color: var(--meal-breakfast);
}

.badge-meal-lunch {
    background: var(--meal-lunch-soft);
    border-color: var(--meal-lunch);
    color: var(--meal-lunch);
}

.badge-meal-dinner {
    background: var(--meal-dinner-soft);
    border-color: var(--meal-dinner);
    color: var(--meal-dinner);
}

.badge-meal-snack {
    background: var(--meal-snack-soft);
    border-color: var(--meal-snack);
    color: var(--meal-snack);
}

/* ── T1.2 CSS line-clamp ─────────────────────────────────── */

.recipe-card-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ── T1.3 Aspect Ratio + Shimmer ─────────────────────────── */

@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.recipe-card-image {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
    object-fit: cover;
    background: var(--surface-alt);
}

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

.recipe-card-no-image {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
    background: linear-gradient(
        90deg,
        var(--surface-alt) 25%,
        var(--border) 50%,
        var(--surface-alt) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--text-dim);
}

/* ── T1.4 Toast Flash Messages ───────────────────────────── */

@keyframes toast-in {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes toast-countdown {
    from { width: 100%; }
    to   { width: 0%; }
}

.flash-region {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
    width: 100%;
    pointer-events: none;
}

.flash-region .flash {
    pointer-events: all;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    animation: toast-in 0.25s ease forwards;
    padding-bottom: 14px;
    cursor: pointer;
}

.flash-region .flash::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    animation: toast-countdown var(--toast-duration, 5000ms) linear forwards;
}

.flash-region .flash-success::after { background: var(--green); }
.flash-region .flash-error::after,
.flash-region .flash-danger::after  { background: var(--red); }
.flash-region .flash-warning::after { background: var(--orange); }
.flash-region .flash-info::after    { background: var(--accent); }

/* ── T1.5 Sidebar: active glow + logo mark ───────────────── */

.nav-link.active {
    box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}

/* ── T1.7 Summary Box Trend Indicators ───────────────────── */

.summary-box-trend {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.trend-up   { color: var(--green); }
.trend-down { color: var(--red); }

/* ── T1.8 Auth Branding ──────────────────────────────────── */
/* (background-image is now part of .auth-layout in AUTH LAYOUT section) */

/* In-card brand mark — shown on tablet/phone when left panel is hidden */
.auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

/* Hide in-card logo at desktop (left panel already shows branding) */
@media (min-width: 901px) {
    .auth-logo {
        display: none;
    }
}

.auth-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

.auth-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.auth-logo-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.auth-logo-tagline {
    font-size: 11px;
    color: var(--text-dim);
}

/* ── T1.10 Entry Card Meal-type Border Stripe ────────────── */

.meal-slot[data-meal-type="breakfast"] .entry-card { border-left: 3px solid var(--meal-breakfast); }
.meal-slot[data-meal-type="lunch"]     .entry-card { border-left: 3px solid var(--meal-lunch); }
.meal-slot[data-meal-type="dinner"]    .entry-card { border-left: 3px solid var(--meal-dinner); }
.meal-slot[data-meal-type="snack"]     .entry-card { border-left: 3px solid var(--meal-snack); }

/* ── T1.10a Empty Meal Slot State ────────────────────────── */

.meal-slot.meal-slot-empty {
    display: flex;
    flex-direction: column;
    min-height: 90px;
}

.meal-slot-empty-zone {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex: 1;
}

/* Ghost "+ Add" — minimal, single affordance per empty slot */
.slot-add-ghost {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    padding: 5px 4px;
    font-size: 12px;
    font-weight: 500;
    transition: color var(--transition), background var(--transition);
    text-align: left;
    min-height: 32px;
}

.slot-add-ghost:hover {
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 4px;
}

.slot-add-ghost-plus {
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    opacity: 0.6;
    flex-shrink: 0;
}

.slot-add-ghost-label {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
    letter-spacing: 0.02em;
}

.slot-add-ghost:hover .slot-add-ghost-plus,
.slot-add-ghost:hover .slot-add-ghost-label {
    opacity: 1;
}

/* Quick-note icon button — icon only, revealed on hover (desktop) */
.slot-note-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;                 /* hidden until slot hovered */
    transition: opacity var(--transition), color var(--transition), background var(--transition);
}

/* Show icon on slot hover or when note is open */
.meal-slot:hover .slot-note-icon-btn,
.meal-slot:focus-within .slot-note-icon-btn,
.meal-slot.note-open .slot-note-icon-btn {
    opacity: 1;
}

.slot-note-icon-btn:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

/* Keep the existing "filled slot" add/quick buttons */
.slot-add-large {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px;
    transition: color var(--transition), background var(--transition);
    min-height: 28px;
    width: 100%;
    font-size: 11px;
    font-weight: 500;
}

.slot-add-large:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.slot-empty-plus {
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    opacity: 0.6;
}

.slot-empty-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.7;
}

.slot-quick-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition), color var(--transition), background var(--transition);
}

.meal-slot:hover .slot-quick-small,
.meal-slot:focus-within .slot-quick-small {
    opacity: 1;
}

.slot-quick-small:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

/* Meal-type hover colours for empty slot ghost button */
.meal-slot[data-meal-type="breakfast"] .slot-add-ghost:hover {
    color: var(--meal-breakfast);
    background: var(--meal-breakfast-soft);
}
.meal-slot[data-meal-type="lunch"] .slot-add-ghost:hover {
    color: var(--meal-lunch);
    background: var(--meal-lunch-soft);
}
.meal-slot[data-meal-type="dinner"] .slot-add-ghost:hover {
    color: var(--meal-dinner);
    background: var(--meal-dinner-soft);
}
.meal-slot[data-meal-type="snack"] .slot-add-ghost:hover {
    color: var(--meal-snack);
    background: var(--meal-snack-soft);
}

/* ── T1.11 Modal CSS Transition ──────────────────────────── */

.modal-overlay {
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.modal-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

.modal-box {
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.is-open .modal-box {
    transform: scale(1);
}

/* ── T2.2 Skeleton Loader (Turbo Frame busy shimmer) ─────── */

turbo-frame[busy] {
    position: relative;
}

turbo-frame[busy]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 25%,
        rgba(255,255,255,0.04) 50%,
        transparent 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    pointer-events: none;
    border-radius: inherit;
    z-index: 10;
}

.skeleton-card {
    background: linear-gradient(
        90deg,
        var(--surface-alt) 25%,
        var(--border) 50%,
        var(--surface-alt) 75%
    );
    background-size: 200% 100%;
    border-radius: var(--radius);
    height: 80px;
    animation: shimmer 1.5s infinite;
}

.skeleton-text {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--surface-alt) 25%,
        var(--border) 50%,
        var(--surface-alt) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ── T2.3 Confirm Inline ─────────────────────────────────── */

.confirm-inline {
    position: absolute;
    inset: 0;
    background: var(--surface);
    border-radius: 4px;
    padding: 10px 12px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.confirm-inline-message {
    color: var(--text);
    font-size: 12px;
    line-height: 1.3;
}

.confirm-inline-actions {
    display: flex;
    gap: 6px;
}

/* Anchored variant, used when the controller guards a form or a link. The
   default fills its parent, which for these is one small button — the message
   had nowhere to go. This one is a fixed popover placed by the controller
   against the viewport, so an ancestor's overflow (CRUD rows sit inside
   .table-scroll) cannot clip it. */
.confirm-inline--anchored {
    position: fixed;
    inset: auto;
    width: 240px;
    max-width: calc(100vw - 16px);
    border: 1px solid var(--border-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 2000;
}

/* ── T2.4 Shopping Progress Animation ────────────────────── */

.progress-bar {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar.progress-complete {
    background: var(--green) !important;
    animation: progress-pulse 1.5s ease 3;
}

@keyframes progress-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* ── T2.5 Cook Timer Urgency ─────────────────────────────── */

.cook-timer.timer-urgent {
    animation: timer-pulse 1s ease-in-out infinite;
}

@keyframes timer-pulse {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 0 6px rgba(248,113,113,0.25); }
}

/* ── T3.1 Command Palette ────────────────────────────────── */

.command-palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.command-palette-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

.command-palette {
    width: 560px;
    max-width: 90vw;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
    transform: scale(0.95) translateY(-8px);
    transition: transform 0.15s ease;
}

.command-palette-overlay.is-open .command-palette {
    transform: scale(1) translateY(0);
}

.command-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.command-palette-icon {
    color: var(--text-dim);
    flex-shrink: 0;
}

.command-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--text);
    font-family: inherit;
}

.command-palette-input::placeholder {
    color: var(--text-dim);
}

.command-palette-results {
    max-height: 380px;
    overflow-y: auto;
    padding: 6px 0;
}

.command-palette-section-title {
    padding: 6px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
}

.command-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none;
    color: var(--text);
    font-size: 14px;
}

.command-palette-item:hover,
.command-palette-item.is-active {
    background: var(--accent-soft);
    color: var(--accent);
    text-decoration: none;
}

.command-palette-item-icon {
    width: 18px;
    flex-shrink: 0;
    color: var(--text-dim);
    display: flex;
    align-items: center;
}

.command-palette-item-meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-dim);
}

.command-palette-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--text-dim);
}

.command-palette-kbd {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.command-palette-kbd kbd {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    font-family: monospace;
}


/* ── Household / Shared Entry ───────────────────────────────────────────── */
.entry-card.entry-household {
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.entry-household-badge {
    font-size: 10px;
    color: var(--accent);
    margin-right: 2px;
}

/* ── Everyone / Just Me Toggle ──────────────────────────────────────────── */
.household-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3px;
}

.household-toggle-btn {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: calc(var(--radius) - 2px);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.household-toggle-btn.active {
    background: var(--accent);
    color: #fff;
}

/* ── Recipe Import & Alias Pages ─────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 14px;
}
.alert-success {
    background: var(--green-soft);
    border-color: var(--green);
    color: var(--green);
}
.alert-warning {
    background: var(--orange-soft);
    border-color: var(--orange);
    color: var(--orange);
}
.alert-danger {
    background: var(--red-soft);
    border-color: var(--red);
    color: var(--red);
}
.alert-info {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.tab-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.tab-btn-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data-table th,
.data-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.data-table th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.data-table tr:last-child td {
    border-bottom: none;
}

/* ============================================================
   LIGHT / DARK THEME — OVERRIDES & TRANSITIONS
   ============================================================ */

/* ── Body backgrounds ───────────────────────────────────────── */

[data-theme="dark"] body {
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 15% 10%, rgba(108, 140, 255, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(74, 222, 128, 0.03) 0%, transparent 45%);
    background-attachment: fixed;
}

[data-theme="light"] body {
    background: #f0f4f8;
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(75, 108, 247, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(5, 150, 105, 0.04) 0%, transparent 45%),
        linear-gradient(160deg, #f0f4f8 0%, #e8ecf5 100%);
    background-attachment: fixed;
}

/* ── Select dropdown chevron (needs a darker arrow on light bg) */

[data-theme="light"] select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236a6e84' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ── Auth layout tint ───────────────────────────────────────── */

/* Auth layout light: slightly stronger glass card border */
[data-theme="light"] .auth-card {
    --glass-border: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-3), 0 0 0 1px rgba(255,255,255,0.8) inset;
}

/* ── Turbo frame busy shimmer — invert for light backgrounds ── */

[data-theme="light"] turbo-frame[busy]::after {
    background: linear-gradient(
        90deg,
        transparent 25%,
        rgba(0,0,0,0.03) 50%,
        transparent 75%
    );
}

/* ── Smooth theme-switch transitions on major containers ─────── */

body,
.sidebar,
.main-area,
.topbar,
.content,
.auth-card,
.auth-layout,
.auth-panel,
.auth-form-panel,
.card,
.table,
.modal-box,
.command-palette,
.recipe-search-sidebar,
.m-add-panel,
.m-shopping-header {
    transition: background-color 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Light-mode surface shadows (replaces deep rgba(0,0,0) glows) */

[data-theme="light"] .recipe-search-sidebar {
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .modal-box {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .command-palette {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
}

/* ── Skeleton shimmer for light mode ─────────────────────────── */

[data-theme="light"] .skeleton-card,
[data-theme="light"] .skeleton-text,
[data-theme="light"] .recipe-card-no-image {
    background: linear-gradient(
        90deg,
        var(--surface-alt) 25%,
        var(--border-light) 50%,
        var(--surface-alt) 75%
    );
    background-size: 200% 100%;
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */

/*
 * Pill: [☀ sun] [🌙 moon]
 * Light mode: indicator on LEFT (sun side = current)
 * Dark mode:  indicator slides RIGHT (moon side = current)
 *
 * Pill inner width: 2px pad + 22px + 2px gap + 22px + 2px pad = 50px
 * Track translation for dark mode: 22px (icon) + 2px (gap) = 24px
 */

.theme-toggle-pill {
    display: inline-flex;
    align-items: center;
    height: 26px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    cursor: pointer;
    position: relative;
    padding: 2px;
    gap: 2px;
    transition: border-color 0.3s ease, background 0.3s ease;
    user-select: none;
    flex-shrink: 0;
    outline: none;
}

.theme-toggle-pill:hover {
    border-color: var(--border-light);
}

.theme-toggle-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Sliding indicator dot */
.theme-toggle-track {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    transition: transform 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

/* Light mode: indicator at sun (left) — default position */
[data-theme="light"] .theme-toggle-track {
    transform: translateX(0);
}

/* Dark mode: indicator slides to moon (right) */
[data-theme="dark"] .theme-toggle-track {
    transform: translateX(24px);
}

/* Icon wrapper */
.theme-toggle-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

/* Sun icon — active in light mode (white, under indicator), dim in dark mode */
.theme-toggle-sun {
    color: var(--text-dim);
}

[data-theme="light"] .theme-toggle-sun {
    color: #fff;
    transform: rotate(0deg);
    opacity: 1;
}

[data-theme="dark"] .theme-toggle-sun {
    color: var(--text-dim);
    transform: rotate(-30deg);
    opacity: 0.6;
}

/* Moon icon — active in dark mode (white, under indicator), dim in light mode */
.theme-toggle-moon {
    color: var(--text-dim);
}

[data-theme="dark"] .theme-toggle-moon {
    color: #fff;
    transform: rotate(0deg);
    opacity: 1;
}

[data-theme="light"] .theme-toggle-moon {
    color: var(--text-dim);
    transform: rotate(30deg);
    opacity: 0.6;
}

/* ── Add-to-Planner Modal (recipe_add_to_planner_controller) ─── */
.atp-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    align-items: flex-end;
    justify-content: center;
}
.atp-modal.is-open {
    display: flex;
}
.atp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}
.atp-modal-panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: atp-slide-up 0.22s ease;
}
@keyframes atp-slide-up {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@media (min-width: 600px) {
    .atp-modal {
        align-items: center;
    }
    .atp-modal-panel {
        border-radius: var(--radius);
        max-height: 85vh;
    }
}
.atp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.atp-modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.atp-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 4px 6px;
    border-radius: var(--radius);
    line-height: 1;
    transition: background var(--transition), color var(--transition);
}
.atp-close-btn:hover {
    background: var(--surface-alt);
    color: var(--text);
}
.atp-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}
.atp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.atp-recipe-name {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    font-style: italic;
}
.atp-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 8px;
    margin-top: 16px;
}
.atp-section-label:first-child,
.atp-section-label + .atp-section-label {
    margin-top: 0;
}
.atp-label-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-dim);
}

/* Day grid */
.atp-day-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.atp-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.atp-day-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 2px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    min-width: 0;
}
.atp-day-btn:hover {
    background: var(--surface-active);
    border-color: var(--border-light);
}
.atp-day-btn.is-today {
    border-color: var(--accent);
}
.atp-day-btn.is-selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.atp-day-btn.is-past {
    opacity: 0.5;
}
.atp-day-name {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: inherit;
    opacity: 0.75;
}
.atp-day-num {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
}
.atp-month-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
    margin-top: 1px;
}

/* Meal type pills */
.atp-meal-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.atp-meal-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-alt);
    color: var(--text);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.atp-meal-btn:hover {
    background: var(--surface-active);
    border-color: var(--border-light);
}
.atp-meal-btn.is-selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* For everyone / Just me toggle */
.atp-toggle-group {
    display: flex;
    gap: 6px;
}
.atp-toggle-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-alt);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.atp-toggle-btn:hover {
    background: var(--surface-active);
    color: var(--text);
}
.atp-toggle-btn.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Member select */
.atp-member-select {
    margin-top: 8px;
    width: 100%;
}

/* Servings input */
.atp-servings-input {
    width: 90px;
}

/* Error / success */
.atp-error {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius);
    color: #f87171;
    font-size: 0.85rem;
}
.atp-success {
    margin-top: 16px;
    text-align: center;
    padding: 20px;
    background: var(--green-soft);
    border: 1px solid rgba(74, 222, 128, 0.25);
    border-radius: var(--radius);
}
.atp-success-icon {
    font-size: 2rem;
    color: var(--green);
    margin-bottom: 8px;
}
.atp-success p {
    color: var(--text);
    font-weight: 500;
    margin: 0 0 4px;
}
.atp-success-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

/* ── Planner weekly nutrition bar ───────────────────────────────────────────── */
.planner-nutrition-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 24px;
    margin-bottom: 18px;
}

.nutrition-bar-heading {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.nutrition-members-row {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.nutrition-member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.nutrition-member-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.03em;
}

.nutrition-donuts {
    display: flex;
    gap: 14px;
    align-items: center;
}

.nutrition-donut-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.nutrition-donut-wrap canvas {
    width: 100px !important;
    height: 100px !important;
}

.nutrition-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.nutrition-donut-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.nutrition-donut-label {
    font-size: 0.58rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 3px;
}

.nutrition-targets {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nutrition-target-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.nt-swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Per-day nutrition footer (inside each planner day column) ───────────── */
.day-nutrition-footer {
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
    padding: 8px 10px 9px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.day-nutrition-member {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Separator between members when there are multiple */
.day-nutrition-member + .day-nutrition-member {
    padding-top: 5px;
    border-top: 1px solid var(--border);
}

.day-nutrition-name {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 1px;
}

.day-nutrition-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.day-nutrition-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    width: 34px;
    flex-shrink: 0;
}

.day-nutrition-track {
    flex: 1;
    height: 5px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    min-width: 0;
}

.day-nutrition-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.day-nutrition-fill--kcal {
    background: var(--accent);
}

.day-nutrition-fill--protein {
    background: var(--color-protein);
}
.day-nutrition-fill--carbs {
    background: var(--color-carbs);
}
.day-nutrition-fill--fat {
    background: var(--color-fat);
}
.day-nutrition-fill--fiber {
    background: var(--color-fiber);
}

.day-nutrition-fill--over {
    background: var(--red);
}

.day-nutrition-value {
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1;
}

.day-nutrition-value--over {
    color: var(--red);
}

.day-nutrition-target {
    color: var(--text-muted);
    font-size: 0.65rem;
}

/* Collapsible secondary macros (carbs/fat/fiber) */
.day-nutrition-extra {
    display: none;
    flex-direction: column;
    gap: 5px;
}

.day-nutrition-extra--visible {
    display: flex;
}

/* Expand / collapse toggle button */
.day-nutrition-toggle {
    all: unset;
    cursor: pointer;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 2px 0;
    margin-top: 1px;
    transition: color var(--transition);
    line-height: 1;
}

.day-nutrition-toggle:hover {
    color: var(--accent);
}

.day-nutrition-member--expanded .day-nutrition-toggle {
    color: var(--text-dim);
}

/* ============================================================
   DASHBOARD — WEEK PLAN PREVIEW
   ============================================================ */

.dashboard-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

@media (max-width: 900px) {
    .dashboard-week-grid {
        grid-template-columns: repeat(7, minmax(110px, 1fr));
    }
}

.dashboard-week-day {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 8px;
    min-height: 100px;
}

.dashboard-week-day--today {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.dashboard-week-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.dashboard-week-day-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.dashboard-week-day-date {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}

.dashboard-week-today-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 3px;
    padding: 1px 5px;
    margin-top: 2px;
}

.dashboard-week-day-meals {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.dashboard-week-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 48px;
}

.dashboard-week-add-link {
    font-size: 11px;
    color: var(--text-dim);
    text-decoration: none;
    transition: color var(--transition);
}

.dashboard-week-add-link:hover {
    color: var(--accent);
}

.dashboard-meal-chip {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    line-height: 1.3;
    background: var(--surface-raised);
    border-radius: 4px;
    padding: 3px 6px;
    overflow: hidden;
}

.dashboard-meal-chip-type {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    width: 10px;
}

.dashboard-meal-chip-name {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.dashboard-meal-chip--breakfast .dashboard-meal-chip-type { color: var(--color-carbs); }
.dashboard-meal-chip--lunch    .dashboard-meal-chip-type { color: var(--color-protein); }
.dashboard-meal-chip--dinner   .dashboard-meal-chip-type { color: var(--accent); }
.dashboard-meal-chip--snack    .dashboard-meal-chip-type { color: var(--color-fat); }

/* ── Dashboard Quick Links ───────────────────────────────── */

.dashboard-quick-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: border-color var(--transition), background var(--transition);
}

.dashboard-quick-link:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
}

.dashboard-quick-link-icon {
    font-size: 18px;
    line-height: 1;
}

/* ============================================================
   SIDEBAR COLLAPSE
   ============================================================ */

/* Shrink the grid column when collapsed */
.app-layout:has(.sidebar--collapsed) {
    grid-template-columns: 48px 1fr;
}

/* Header: stack logo + toggle vertically, centred */
.sidebar--collapsed .sidebar-header {
    flex-direction: column;
    align-items: center;
    padding: 12px 4px;
    gap: 6px;
}

.sidebar--collapsed .sidebar-brand-name {
    display: none;
}

/* Rotate the chevron to point right when collapsed */
.sidebar--collapsed .sidebar-toggle-btn svg {
    transform: rotate(180deg);
}

/* Hide section labels */
.sidebar--collapsed .nav-section-title {
    display: none;
}

/* Icon-only nav links */
.sidebar--collapsed .nav-link {
    justify-content: center;
    padding: 9px 0;
    margin: 1px 6px;
    border-left: none;
    border-radius: var(--radius);
}

.sidebar--collapsed .nav-link.active {
    box-shadow: none;
}

.sidebar--collapsed .nav-link-label {
    display: none;
}

/* Admin section in icon-only mode: always show links, hide toggle */
.sidebar--collapsed .nav-admin-toggle {
    display: none;
}

.sidebar--collapsed .nav-admin-body {
    display: block;
}

.sidebar--collapsed .nav-section--admin {
    border-top-color: var(--border);
}

/* Hide footer stats */
.sidebar--collapsed .sidebar-stats {
    display: none;
}

/* ============================================================
   NUTRITION TARGETS — Per-day kcal targets & meal rules
   ============================================================ */

/* ── Planner: day header additions ─────────────────────────── */
.planner-day-kcal-target {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.01em;
    margin-top: 1px;
}

.planner-day-kcal-default {
    color: var(--text-dim);
    font-weight: 400;
}

.planner-day-training-badge {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 1px;
}

/* ── Planner: meal slot rule additions ──────────────────────── */
.carb-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

.carb-badge--low_carb {
    background: var(--orange-soft);
    color: var(--orange);
    border: 1px solid rgba(251, 146, 60, 0.3);
}

.carb-badge--high_carb {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.carb-badge--normal {
    background: var(--surface-alt);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.meal-slot-rule-note {
    font-size: 0.67rem;
    color: var(--text-dim);
    font-style: italic;
    padding: 2px 0 4px;
    line-height: 1.3;
    /* Single line with ellipsis for overflow — full text in title attr */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Entry card: protein indicator ─────────────────────────── */
.protein-tick {
    font-size: 0.65rem;
    color: var(--green);
    margin-left: 2px;
    font-style: normal;
}

.protein-warn {
    font-size: 0.65rem;
    color: var(--orange);
    margin-left: 2px;
    font-style: normal;
}

/* ── Nutrition editor page ──────────────────────────────────── */
.nutrition-globals {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.nutrition-globals-row {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.nutrition-global-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

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

.nutrition-global-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
}

.nutrition-global-hint {
    font-size: 0.7rem;
    color: var(--text-dim);
}

.nutrition-global-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nutrition-global-input {
    width: 80px;
    padding: 0.35rem 0.5rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
}

.nutrition-global-input:focus {
    outline: none;
    border-color: var(--accent);
}

.nutrition-global-unit {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.nutrition-weekly-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--green);
}

/* ── Nutrition day grid ─────────────────────────────────────── */
.nutrition-day-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

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

@media (max-width: 700px) {
    .nutrition-day-grid {
        grid-template-columns: 1fr;
    }
}

/* Glass day cards */
.nutrition-day-col {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    backdrop-filter: blur(8px) saturate(1.3);
    border-radius: var(--radius);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Collapsible day card wrapper (for ≤700px) */
.nutrition-day-col details {
    display: contents;
}

.nutrition-day-col summary {
    display: none; /* only shown at small widths */
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 0.5rem 0;
}

.nutrition-day-col summary::-webkit-details-marker {
    display: none;
}

@media (max-width: 700px) {
    .nutrition-day-col {
        padding: 0;
        overflow: hidden;
    }

    .nutrition-day-col details {
        display: block;
    }

    .nutrition-day-col summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.65rem 0.75rem;
        border-bottom: 1px solid var(--border);
    }

    .nutrition-day-col summary .summary-day-name {
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--text);
    }

    .nutrition-day-col summary .summary-kcal {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--accent);
        font-variant-numeric: tabular-nums;
    }

    .nutrition-day-col summary .summary-chevron {
        font-size: 0.65rem;
        color: var(--text-dim);
        transition: transform var(--transition);
        margin-left: auto;
    }

    .nutrition-day-col details[open] summary .summary-chevron {
        transform: rotate(180deg);
    }

    .nutrition-day-col .nutrition-day-inner {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (min-width: 701px) {
    .nutrition-day-col .nutrition-day-inner {
        display: contents;
    }
}

.nutrition-day-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-align: center;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}

/* Kcal input: min-width ensures 4 digits + 'kcal' suffix never clip */
.nutrition-kcal-input {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--accent);
    transition: border-color var(--transition);
    box-sizing: border-box;
    /* Remove browser spinner arrows that take up horizontal space */
    -moz-appearance: textfield;
}

.nutrition-kcal-input::-webkit-outer-spin-button,
.nutrition-kcal-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.nutrition-kcal-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
    background: var(--surface-active);
}

.nutrition-kcal-input::placeholder {
    color: var(--text-dim);
    font-weight: 400;
    font-size: 1rem;
}

.nutrition-training-input {
    width: 100%;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: border-color var(--transition);
}

.nutrition-training-input:focus {
    outline: none;
    border-color: var(--border-light);
    color: var(--text);
}

.nutrition-training-input::placeholder {
    color: var(--text-dim);
    font-style: italic;
}

/* Visual bar */
.nutrition-day-bar {
    height: 4px;
    background: var(--surface-alt);
    border-radius: 2px;
    overflow: hidden;
}

.nutrition-day-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.25s ease, background 0.25s ease;
    width: 0%;
    background: var(--text-dim);
}

/* Meal rules toggle */
.nutrition-rules-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 0.25rem 0;
    width: 100%;
    text-align: left;
    transition: color var(--transition);
}

.nutrition-rules-toggle:hover {
    color: var(--text);
}

.nutrition-rules-arrow {
    font-size: 0.6rem;
    transition: transform var(--transition);
}

.nutrition-rules-toggle.collapsed .nutrition-rules-arrow {
    transform: rotate(-90deg);
}

.nutrition-rule-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(108, 140, 255, 0.25);
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    line-height: 1;
}

/* Meal rules panel */
.nutrition-rules {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
}

.nutrition-rules.collapsed {
    display: none;
}

.nutrition-rule-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nutrition-rule-meal-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.nutrition-rule-select {
    width: 100%;
    padding: 0.3rem 1.8rem 0.3rem 0.5rem;
    font-size: 0.78rem;
    font-family: inherit;
    background-color: var(--surface-alt);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14'%3E%3Cpath fill='%238b8fa8' d='M7 9.5L2 4.5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 12px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
}

.nutrition-rule-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.nutrition-rule-fields {
    display: flex;
    gap: 0.4rem;
}

.nutrition-rule-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nutrition-rule-field-label {
    font-size: 0.6rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nutrition-rule-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nutrition-rule-input-num {
    width: 100%;
    min-width: 0;
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    box-sizing: border-box;
    /* Remove spinner arrows */
    -moz-appearance: textfield;
}

.nutrition-rule-input-num::-webkit-outer-spin-button,
.nutrition-rule-input-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.nutrition-rule-input-num:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.nutrition-rule-unit {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.nutrition-rule-note-input {
    width: 100%;
    padding: 0.25rem 0.4rem;
    font-size: 0.72rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-style: italic;
}

.nutrition-rule-note-input:focus {
    outline: none;
    border-color: var(--border-light);
    color: var(--text);
    font-style: normal;
}

.nutrition-rule-note-input::placeholder {
    color: var(--text-dim);
}

/* Actions row */
.nutrition-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding-top: 0.5rem;
}

/* ============================================================
   PLANNER — VISUAL REFINEMENT
   Improves readability, type scale, colour identity, and
   visual hierarchy throughout the weekly planner grid.
   ============================================================ */

/* ── Header: week navigation ────────────────────────────────── */
.planner-header {
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.planner-week-label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* ── Grid: breathing room between columns ────────────────────── */
.planner-grid {
    gap: 10px;
}

/* ── Day column ──────────────────────────────────────────────── */
.planner-day-col {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ── Day header: more padding, sharper type ──────────────────── */
.planner-day-header {
    padding: 10px 12px 8px;
    border-bottom: 2px solid var(--border);
}

.planner-day-name {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text-muted);     /* was --text-dim: much more legible */
}

.planner-day-date {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 1px;
}

/* Today: stronger highlight — gradient tint on header */
.planner-day-col.today .planner-day-header {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-alt));
    border-bottom-color: var(--accent);
}

.planner-day-col.today .planner-day-name {
    color: var(--accent);
}

/* ── Kcal target + training badge in day header ──────────────── */
.planner-day-kcal-target {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 4px;
}

.planner-day-kcal-default {
    color: var(--text-dim);
    font-weight: 400;
}

.planner-day-training-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--green-soft);
    color: var(--green);
    border-radius: 3px;
    padding: 1px 5px;
    margin-top: 3px;
}

/* ── Meal slots: more room, colour-coded labels ──────────────── */
.meal-slot {
    padding: 8px 10px;
    min-height: 80px;
    border-bottom: 1px solid var(--border);
}

.meal-slot-label {
    font-size: 11px;         /* was 10px */
    font-weight: 700;
    letter-spacing: 0.07em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Meal-type colour identity on the slot label */
.meal-slot[data-meal-type="breakfast"] .meal-slot-label { color: var(--meal-breakfast); }
.meal-slot[data-meal-type="lunch"]     .meal-slot-label { color: var(--meal-lunch); }
.meal-slot[data-meal-type="dinner"]    .meal-slot-label { color: var(--meal-dinner); }
.meal-slot[data-meal-type="snack"]     .meal-slot-label { color: var(--meal-snack); }

/* Subtle left-side meal-type accent on the slot itself */
.meal-slot[data-meal-type="breakfast"] { border-left: 3px solid var(--meal-breakfast); }
.meal-slot[data-meal-type="lunch"]     { border-left: 3px solid var(--meal-lunch); }
.meal-slot[data-meal-type="dinner"]    { border-left: 3px solid var(--meal-dinner); }
.meal-slot[data-meal-type="snack"]     { border-left: 3px solid var(--meal-snack); }

/* Rule note: slightly more legible */
.meal-slot-rule-note {
    font-size: 0.7rem;
    color: var(--text-muted);    /* was --text-dim */
    margin-bottom: 4px;
}

/* ── Entry cards: sharper name, more readable macros ─────────── */
.entry-card {
    padding: 6px 8px;
    border-radius: 8px;
    margin-bottom: 5px;
    /* Glass treatment — like training cards, native in both themes */
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    backdrop-filter: blur(8px) saturate(1.4);
    box-shadow: var(--shadow-1);
    transition: transform var(--transition), box-shadow var(--transition);
    overflow: hidden;
}

.entry-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
    border-color: var(--border-light);
}

.entry-card-name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 3px;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entry-card-macros {
    gap: 4px;
    margin-top: 3px;
    /* Wraps rather than clips. A day column is only ~125-190px wide on
       desktop, and the five chips need ~170px, so "never wraps" meant
       the fat and fibre values were simply cut in half by the card's
       overflow: hidden. Row-aligned slots absorb the extra line. */
    flex-wrap: wrap;
    row-gap: 3px;
}

.entry-macro {
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.entry-macro em {
    font-size: 9px;
    font-weight: 500;
    opacity: 0.8;
}

.protein-tick,
.protein-warn {
    font-size: 0.7rem;           /* was 0.65rem */
    margin-left: 2px;
}

/* ── Nutrition footer: more legible progress bars ────────────── */
.day-nutrition-footer {
    padding: 8px 10px;           /* more breathing room */
}

.day-nutrition-row {
    gap: 5px;
    margin-bottom: 4px;
}

.day-nutrition-label {
    font-size: 0.7rem;           /* was 0.68rem */
    font-weight: 700;
    width: 34px;                 /* slightly wider to avoid truncation */
    color: var(--text-muted);    /* was --text-dim — much more legible */
}

.day-nutrition-track {
    height: 6px;                 /* was 5px — easier to see */
    border-radius: 3px;
}

.day-nutrition-fill {
    border-radius: 3px;
}

.day-nutrition-value {
    font-size: 0.72rem;          /* was 0.7rem */
    min-width: 56px;
}

.day-nutrition-target {
    font-size: 0.66rem;          /* was 0.65rem */
}

/* ── Carb badge: slightly tighter + more legible ─────────────── */
.carb-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
}

/* ── Day header: split date number / month ───────────────────── */
.planner-day-date-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    line-height: 1;
    margin-top: 2px;
}

.planner-day-date {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-top: 0;              /* reset block margin from original rule */
}

.planner-day-month {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    text-transform: uppercase;
    padding-bottom: 2px;        /* optical alignment with the large number */
}

.planner-day-col.today .planner-day-month {
    color: var(--accent);
}

/* ============================================================
   PLANNER — TYPOGRAPHY PASS 2
   Targeted fixes: column width, kcal-target prominence, empty-
   slot legibility, macro pill backgrounds, today column tint,
   and nutrition footer truncation.
   ============================================================ */

/* 1. Widen minimum column from 140px → 160px */
.planner-grid {
    grid-template-columns: repeat(7, minmax(160px, 1fr));
}

/* 2. Kcal target in day header — restore accent colour and bump
      size. The prior refinement section changed colour to
      var(--text-muted); the original feature used var(--accent). */
.planner-day-kcal-target {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    margin-top: 5px;
}

/* "Default" (no custom per-day target) stays dim */
.planner-day-kcal-default {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-dim);
}

/* 3. Empty slot interactive labels — 11px minimum */
.slot-empty-label,
.slot-add-ghost-label {
    font-size: 11px;
    font-weight: 600;
}

/* 4. Quick note icon button sizing */
.slot-quick-small,
.slot-note-icon-btn {
    font-size: 11px;
}

/* 5. Empty slot "+" icon */
.slot-empty-plus,
.slot-add-ghost-plus {
    font-weight: 500;
}

/* 5. Entry macro chips — colour-tinted pill background per
      macro so individual values group visually */
.entry-macro {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    padding: 1px 4px 2px;
    border-radius: 4px;
    background: var(--surface-active);
}

.entry-macro--kcal    { background: color-mix(in srgb, var(--accent)         15%, transparent); }
.entry-macro--protein { background: color-mix(in srgb, var(--color-protein)  15%, transparent); }
.entry-macro--carbs   { background: color-mix(in srgb, var(--color-carbs)    15%, transparent); }
.entry-macro--fat     { background: color-mix(in srgb, var(--color-fat)      15%, transparent); }
.entry-macro--fiber   { background: color-mix(in srgb, var(--color-fiber)    15%, transparent); }

/* 6. Today column — subtle full-column tint so the entire
      column reads as distinct, not just its header */
.planner-day-col.today {
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

/* 7. Nutrition footer value — widen to hold "1842 / 2000"
      now that the template removes the thousands separator */
.day-nutrition-value {
    min-width: 68px;
    font-size: 0.73rem;
}

.day-nutrition-target {
    font-size: 0.68rem;
}

/* ============================================================
   INGREDIENT FILTER BAR + CATEGORY PILLS
   ============================================================ */
.ingredient-filter-bar { margin-bottom: 4px; }

.ingredient-filter-search-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}

.ingredient-category-pills {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px;
}

.ingredient-cat-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; font-size: 12.5px; font-weight: 500;
    border: 1px solid var(--border); border-radius: 20px;
    background: var(--surface-alt); color: var(--text-muted);
    cursor: pointer; font-family: inherit; white-space: nowrap;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), box-shadow var(--transition);
}

.ingredient-cat-pill:hover {
    background: var(--surface-active);
    border-color: var(--border-light);
    color: var(--text);
}

.ingredient-cat-pill--active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    font-weight: 600;
}

.ingredient-cat-pill--active:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.ingredient-cat-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; padding: 0 4px; height: 16px;
    font-size: 10.5px; font-weight: 700; border-radius: 10px;
    background: var(--surface-raised); border: 1px solid var(--border);
    color: var(--text-muted); line-height: 1;
}

.ingredient-cat-pill--active .ingredient-cat-count {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 600px) {
    .ingredient-category-pills {
        flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch; padding-bottom: 4px;
    }
}

/* ── Intervals.icu Training Cards ───────────────────────────── */

.training-slot {
    padding: 0;
    margin-bottom: 0;
    /* A day can hold more than one session. The cards no longer carry a bottom
       margin, so the separation lives here instead — and a single-card slot
       gets none of it. */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.training-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    /* Glass treatment — uses theme vars so it works in both themes */
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    /* Bottom-only shadow: enough to lift the card off the column without the
       full ambient glow, which read as heavy once the slot lost its padding. */
    box-shadow: var(--shadow-under);
    margin-bottom: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    /* One height for every training slot — a session with a two-line name, a
       session with a one-line name, and a rest day — so the meal rows below
       line up across the week instead of starting at three different heights. */
    min-height: 52px;
}

.training-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-under-hover);
}

/* Rest day: no glass, just a very subtle surface */
.training-card--rest {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    box-shadow: none;
    /* A rest card is one short line with no meta row beneath it, so there is
       nothing to top-align against — centre it in the taller box instead. */
    align-items: center;
}

.training-card--rest:hover {
    transform: none;
    box-shadow: none;
}

.training-card--rest .training-icon {
    background: var(--surface-active);
    color: var(--text-dim);
}

.training-card--rest .training-name {
    color: var(--text-dim);
    font-weight: 400;
}

.training-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    /* Vertically aligned with the first line of the name */
    margin-top: 1px;
}

.training-info {
    flex: 1;
    min-width: 0;
}

.training-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);           /* theme token — readable in both themes */
    display: block;
    /* Allow 2-line wrap; long names get title attr for hover tooltip */
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    margin-bottom: 3px;
}

.training-meta {
    font-size: 0.68rem;
    color: var(--text-muted);     /* theme token */
    /* Must be a block, not a flex container: the content is one run of
       text, so as a flex box it became a single anonymous flex item and
       text-overflow had nothing to ellipsise — a narrow column cut the
       line mid-number ("3h · 70% · 14") with no sign it had been cut.
       It still truncates at a character boundary ("1h 10m · 77…"), but
       the ellipsis now says so. */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.training-intensity {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 2px;
}

.training-intensity--recovery  { background: var(--green-soft);                                   color: var(--green); }
.training-intensity--endurance { background: color-mix(in srgb, var(--color-blue) 15%, transparent); color: var(--color-blue); }
.training-intensity--tempo     { background: color-mix(in srgb, var(--color-carbs) 15%, transparent); color: var(--color-carbs); }
.training-intensity--hard      { background: var(--red-soft);                                        color: var(--red); }

.training-badge {
    margin-left: auto;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 6px;
    flex-shrink: 0;
    /* Align badge with the icon row top */
    align-self: flex-start;
    margin-top: 2px;
}

.training-completed {
    background: var(--green-soft);
    color: var(--green);
}

.training-planned {
    background: var(--surface-alt);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* ── Ingredient Taste Setup ─────────────────── */
/* Remove content-area padding so the taste screen fills edge-to-edge */
.content:has(.taste-setup) {
  padding: 0;
}

/* Flows with the page: no inner scroll container, no fixed height. On mobile
   the old `height: 100%` + `overflow-y: auto` trapped the whole screen in a
   box that scrolled independently of the page. */
.taste-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 24px;
  max-width: 420px;
  margin: 0 auto;
  overflow-x: hidden;
}

.taste-topbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 8px;
}

.taste-progress-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.taste-counter { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.taste-progress-bar-track { height: 4px; background: var(--border-light); border-radius: 2px; overflow: hidden; }
.taste-progress-bar { height: 100%; background: linear-gradient(90deg, var(--color-carbs), var(--red)); border-radius: 2px; transition: width 0.4s ease; width: 0%; }

.taste-undo-btn {
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.taste-undo-btn:hover:not(:disabled) { background: var(--surface-active); color: var(--text); }
.taste-undo-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.taste-meals-counter {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 4px 0 8px;
  text-align: center;
}
.taste-meals-counter[hidden] { display: none; }
.taste-meals-counter span { font-weight: 700; color: var(--color-carbs); font-size: 1.1rem; }

.taste-deck {
  width: 100%;
  max-width: 340px;
  position: relative;
  /* Cards are absolutely positioned, so the deck carries the height itself. */
  height: clamp(260px, 44vh, 380px);
  margin: 0 auto;
}
/* Hidden outright when the end state takes over, so its fixed height does not
   linger as a gap above it. */
.taste-deck[hidden] { display: none; }

.taste-card {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  /* Intentionally immersive dark deck — stays dark in both themes */
  background: linear-gradient(145deg, rgba(28,28,40,0.97), rgba(18,18,30,0.99));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 24px;
  cursor: grab;
  user-select: none;
  transform-origin: bottom center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
  /* glass-frame highlight */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.taste-card--peek:nth-last-child(2) {
  transform: translateY(12px) scale(0.95);
  opacity: 0.7;
  z-index: 1;
}
.taste-card--peek:nth-last-child(3) {
  transform: translateY(22px) scale(0.90);
  opacity: 0.4;
  z-index: 0;
}
.taste-card--top { z-index: 2; }
.taste-card--top:active { cursor: grabbing; }

.taste-card-emoji { font-size: 4rem; line-height: 1; margin-bottom: 4px; }
.taste-card-name { font-size: 1.4rem; font-weight: 700; color: #fff; text-align: center; line-height: 1.2; }
.taste-card-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.taste-card-category {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
}
.taste-card-meals {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
}

.taste-card-overlay {
  position: absolute;
  top: 20px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.taste-card-overlay--like { right: 20px; border: 3px solid #22c55e; color: #22c55e; transform: rotate(15deg); }
.taste-card-overlay--dislike { left: 20px; border: 3px solid #ef4444; color: #ef4444; transform: rotate(-15deg); }

.taste-actions {
  width: 100%;
  max-width: 340px;
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
/* `hidden` alone loses to the `display: flex` above on specificity, so the
   attribute needs an explicit rule to actually hide the row. */
.taste-actions[hidden] { display: none; }
.taste-btn {
  flex: 1;
  padding: 14px 10px;
  border-radius: 16px;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}
.taste-btn--dislike {
  background: var(--red-soft);
  color: var(--red);
  border: 2px solid color-mix(in srgb, var(--red) 30%, transparent);
}
.taste-btn--dislike:hover {
  background: color-mix(in srgb, var(--red) 20%, transparent);
  transform: scale(1.03);
}
.taste-btn--like {
  background: var(--green-soft);
  color: var(--green);
  border: 2px solid color-mix(in srgb, var(--green) 30%, transparent);
}
.taste-btn--like:hover {
  background: color-mix(in srgb, var(--green) 20%, transparent);
  transform: scale(1.03);
}
.taste-btn--skip {
  flex: 0 0 92px;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 2px dashed var(--border-light);
}
.taste-btn--skip:hover {
  background: var(--surface-active);
  color: var(--text);
  transform: scale(1.03);
}

/* In-flow, not an absolutely positioned panel. As an `inset: 0` overlay with
   a solid background it covered the entire screen from first paint — `hidden`
   could not hide it, because `display: flex` here outranks `[hidden]`. */
.taste-end {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.taste-end[hidden] { display: none; }
.taste-end-content { text-align: center; padding: 32px; }
.taste-end-icon { font-size: 4rem; margin-bottom: 16px; }
.taste-end-content h2 { font-size: 1.8rem; color: var(--text); margin-bottom: 8px; }
.taste-end-content p { color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; }

.taste-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(239,68,68,0.9);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ── Recipe taste-filter toggle ─────────────────────────────── */
.taste-filter-toggle { border-top: 1px solid var(--border); padding-top: 10px; }

.taste-filter-toggle__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--text-dim);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
/* Visually hide the showAll checkbox; the wrapping label is the control. */
.taste-filter-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.taste-filter-toggle__btn:hover {
    color: var(--text);
    background: var(--surface-active);
    text-decoration: none;
}
.taste-filter-toggle__btn--active {
    color: var(--color-carbs);
    border-color: color-mix(in srgb, var(--color-carbs) 35%, transparent);
    background: color-mix(in srgb, var(--color-carbs) 10%, transparent);
}
.taste-filter-toggle__btn--active:hover { color: var(--orange); }

/* ── Recipe dislike warning banner ──────────────────────────── */
.taste-dislike-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: var(--orange-soft);
    border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
    color: var(--orange);
    font-size: 0.85rem;
    line-height: 1.5;
}
.taste-dislike-banner svg { flex-shrink: 0; margin-top: 2px; }
.taste-dislike-banner strong { color: var(--orange); }

/* ============================================================
   UI-01 — GLASS DESIGN SYSTEM FOUNDATION
   Tokens, elevation, blur, and glass utility class.
   Applied to sidebar, topbar, cards, recipe-filters, toasts,
   and the mobile sidebar overlay.
   ============================================================ */

/* ── .glass utility ─────────────────────────────────────────── */

.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    box-shadow: var(--shadow-1);
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    .glass {
        background: var(--surface);
    }
}

/* ── Sidebar — glass chrome ──────────────────────────────────── */

.sidebar {
    background: var(--glass-bg);
    border-right-color: var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}

@supports not (backdrop-filter: blur(1px)) {
    .sidebar {
        background: var(--surface);
    }
}

/* ── Topbar — glass chrome ───────────────────────────────────── */

.topbar {
    background: var(--glass-bg);
    border-bottom-color: var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    box-shadow: var(--shadow-1);
}

@supports not (backdrop-filter: blur(1px)) {
    .topbar {
        background: var(--surface);
    }
}

/* ── Cards — elevation + hover lift ─────────────────────────── */

.card {
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--transition), transform var(--transition),
                background-color 0.3s ease, border-color 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

/* ── Recipe filters panel — glass ───────────────────────────── */

.recipe-filters {
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

/* ── Toast flash messages — glass ───────────────────────────── */

.flash-region .flash {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-color: var(--glass-border);
    box-shadow: var(--shadow-2);
    border-radius: var(--radius);
}

@supports not (backdrop-filter: blur(1px)) {
    .flash-region .flash {
        background: var(--surface);
    }
}

/* ── Phone bottom-nav — glass ───────────────────────────────── */

.bottom-nav {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    background: var(--glass-bg);
    border-top-color: var(--glass-border);
    box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.15);
}

@supports not (backdrop-filter: blur(1px)) {
    .bottom-nav {
        background: var(--surface);
    }
}

/* ── Mobile shopping header — glass ─────────────────────────── */

.m-shopping-header {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    background: var(--glass-bg);
    border-bottom-color: var(--glass-border);
}

/* ── Mobile sidebar overlay — MUST be fully readable ────────── */
/*
 * The critical fix from the issue: the light-theme sidebar was
 * semi-transparent (rgba surface) WITHOUT backdrop-filter, causing
 * page content to bleed through and make navigation unreadable.
 * We apply glass WITH a stronger opacity so text is always clear.
 */

@media (max-width: 900px) {
    .sidebar {
        /* Stronger opacity base so nav text is never washed out */
        background: var(--glass-bg);
        -webkit-backdrop-filter: blur(20px) saturate(1.6);
        backdrop-filter: blur(20px) saturate(1.6);
        /* Shadow on the open edge for depth */
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.32), var(--shadow-3);
    }

    @supports not (backdrop-filter: blur(1px)) {
        .sidebar {
            /* Without backdrop-filter: use fully opaque surface */
            background: var(--surface);
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }
    }
}

/* Dark theme: glass-bg is already 72% opaque — good.
   Light theme: glass-bg is 65% which may still bleed through on mobile.
   Override for light theme mobile to be more opaque. */
[data-theme="light"] .sidebar {
    --glass-bg: rgba(245, 247, 252, 0.88);
}

/* ── Buttons — updated radius ────────────────────────────────── */

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

/* ── Form inputs — updated radius ───────────────────────────── */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
    border-radius: var(--radius-sm);
}

/* ── Auth card — radius + shadow ────────────────────────────── */

.auth-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
}

/* ── Modal box — shadow elevation ───────────────────────────── */

.modal-box {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
}

/* ── Command palette — shadow elevation ─────────────────────── */

.command-palette {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
}

/* ── Light theme: re-override shadows for crisper look ──────── */

[data-theme="light"] .card {
    box-shadow: var(--shadow-1);
}

[data-theme="light"] .card:hover {
    box-shadow: var(--shadow-2);
}

[data-theme="light"] .topbar {
    box-shadow: var(--shadow-1);
}


/* ==== ICONS ============================================================== */
/* Lucide inline SVG icons — sizing and vertical alignment helpers          */

.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

/* Ensure icon inherits colour from parent text */
.icon path,
.icon line,
.icon polyline,
.icon circle,
.icon rect,
.icon polygon {
    vector-effect: non-scaling-stroke;
}

/* Nav links: flex so icon + label sit on the same baseline */
.nav-link,
.nav-link--admin,
.nav-admin-toggle,
.dashboard-quick-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Bottom-nav items stay column (icon above label) */
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* Bottom nav icon wrapper — remove the old emoji container sizing */
.bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
}

/* Recipe card time / kcal metadata inline icons */
.recipe-time,
.recipe-kcal {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

/* Training card icon — switch from Font Awesome <i> to inline SVG */
.training-icon svg {
    display: block;
}

/* Button label + icon pairs */
.btn .icon,
.btn-favourite-active .icon {
    flex-shrink: 0;
}

/* Entry card action icons */
.entry-action-link .icon,
.entry-action-btn .icon {
    display: block;
}

/* Inline edit trigger icon */
.inline-edit-trigger .icon {
    opacity: 0.6;
    transition: opacity 0.15s;
}

.inline-edit-trigger:hover .icon {
    opacity: 1;
}

/* Favourite indicator */
.recipe-favourite-indicator .icon {
    color: var(--amber);
}

/* Dashboard quick link icon slot */
.dashboard-quick-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-alt, rgba(99, 102, 241, 0.12));
    color: var(--accent);
    flex-shrink: 0;
}

/* ATP modal close / success icons */
.atp-close-btn .icon,
.atp-success-icon .icon {
    display: block;
}

/* Step timer icon */
.step-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ==== UI-03 — RECIPE LIBRARY RESPONSIVE FIX ========================= */
/*
 * Problem: .recipe-layout was grid 220px 1fr with no breakpoint — at 390px
 * the sidebar consumed most of the viewport and cards were clipped.
 * Fix: collapse to single-column at ≤900px, filter panel becomes a glass
 * slide-over/bottom-sheet opened by a Filters pill button.
 */

/* ── Toolbar: search + Filters pill (mobile/tablet) ──────────────────── */

.recipe-filters-toolbar {
    display: none; /* hidden on desktop — desktop uses the sidebar */
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.recipe-filters-search-wrap {
    flex: 1 1 0;
    min-width: 0;
}

.recipe-filters-search-input {
    width: 100%;
}

/* The Filters pill button */
.recipe-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border: 1px solid var(--border-light);
    background: var(--surface-alt);
    color: var(--text);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition);
}

.recipe-filters-btn:hover {
    background: var(--surface-active);
    border-color: var(--accent);
    color: var(--text);
}

.recipe-filters-btn--active {
    border-color: var(--accent);
    color: var(--accent);
}

/* Active-filter count badge inside the pill */
.recipe-filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.recipe-filters-badge[hidden] { display: none !important; }

/* ── Backdrop ─────────────────────────────────────────────────────────── */

.recipe-filters-backdrop {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.recipe-filters-backdrop[hidden] { display: none !important; }

/* ── Panel close button & header (mobile only) ────────────────────────── */

.recipe-filters-panel-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.recipe-filters-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color var(--transition);
}

.recipe-filters-close-btn:hover { color: var(--text); }

/* ── Desktop layout — unchanged ───────────────────────────────────────── */
/* .recipe-layout is already 220px 1fr at desktop; no changes needed.     */

/* ── Tablet (768–900px): narrower sidebar or collapse ────────────────── */

@media (max-width: 900px) {
    /* Show the toolbar (search + Filters pill) */
    .recipe-filters-toolbar {
        display: flex;
    }

    /* Show the panel close button */
    .recipe-filters-panel-header {
        display: flex;
    }

    /* Hide the search field inside the aside — toolbar handles it */
    .recipe-filters-search-group {
        display: none;
    }

    /* Collapse the grid to a single column */
    .recipe-layout {
        grid-template-columns: 1fr;
    }

    /* The filter panel becomes a fixed glass slide-over from the right */
    .recipe-filters {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 300;
        width: min(320px, 88vw);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
        border-right: none;
        /* glass treatment matching UI-01 */
        background: var(--glass-bg);
        border-color: var(--glass-border);
        -webkit-backdrop-filter: blur(20px) saturate(1.6);
        backdrop-filter: blur(20px) saturate(1.6);
        box-shadow: var(--shadow-3);
        /* start off-screen to the right */
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        /* make it feel like a native sheet */
        padding-top: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    @supports not (backdrop-filter: blur(1px)) {
        .recipe-filters {
            background: var(--surface);
        }
    }

    /* Slide in when open */
    .recipe-filters--open {
        transform: translateX(0);
    }

    /* Override the sticky positioning that only makes sense in-grid */
    .recipe-filters {
        position: fixed; /* already set above */
    }

    /* Recipe grid: comfortable 2-col on tablet */
    .recipe-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ── Phone (≤600px): 2-column card grid ─────────────────────────────── */

@media (max-width: 600px) {
    /* Ensure content area has no horizontal overflow */
    .recipe-layout {
        grid-template-columns: 1fr;
        overflow: hidden;
    }

    /* 2-column recipe grid on phones */
    .recipe-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Panel takes more width on small phones */
    .recipe-filters {
        width: min(300px, 92vw);
    }
}

/* ── Light theme: make the slide-over more opaque ────────────────────── */

[data-theme="light"] .recipe-filters {
    --glass-bg: rgba(245, 247, 252, 0.92);
}

/* ==== UI-04 — DATA TABLES MOBILE FIX ================================= */

/* ── 1. Contained horizontal scroll (ingredients, aliases) ──────────── */

.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    /* Edge-fade hint so users know more content exists */
    background:
        linear-gradient(to right, var(--surface) 30%, transparent) left center / 30px 100% no-repeat,
        linear-gradient(to left,  var(--surface) 30%, transparent) right center / 30px 100% no-repeat,
        linear-gradient(to right, var(--border), var(--border)) left center / 1px 100% no-repeat,
        linear-gradient(to left,  var(--border), var(--border)) right center / 1px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.table-scroll .table,
.table-scroll .data-table {
    /* Prevent table from collapsing narrower than its content */
    min-width: 520px;
}

/* Inline row-edit form: the <form> wrapping the row cells must not generate a
   box, or the cells drop out of the (CSS) table layout. display:contents makes
   the cells direct children of the row for layout. */
.tr-edit-form {
    display: contents;
}

/* ── CRUD list "tables" (store / member / ingredient) ────────────────────────
   Rendered as a CSS table on <div>s rather than a real <table>, because the
   HTML parser foster-parents <turbo-frame> out of a <table> — which broke the
   per-row inline-edit frames (the edit form rendered above the table). On
   <div>s the per-row <turbo-frame> nests validly. */
.crud-table { display: table; width: 100%; }
.crud-table-head { display: table-row; }
.crud-table-head > span {
    display: table-cell;
    padding: 8px 14px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    text-align: left;
}
.crud-row { display: table-row; }              /* each <turbo-frame> is a row */
.crud-row .tr-edit-form { display: contents; } /* form passes through */
.crud-cell {
    display: table-cell;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.crud-table--wide  { min-width: 760px; }        /* many columns — scroll inside .table-scroll */
.crud-table--xwide { min-width: 1040px; }       /* members: 8 columns + 4-button actions */
.crud-cell--grow { width: 100%; }              /* absorbs slack, hugs others right */
.crud-cell--actions { white-space: nowrap; text-align: right; }
.crud-cell--actions .actions-inner { display: inline-flex; gap: 8px; justify-content: flex-end; align-items: center; }
.crud-row:hover .crud-cell { background: var(--surface-alt); }

@media (max-width: 700px) {
    .crud-table { display: block; }
    .crud-table-head { display: none; }
    .crud-row {
        display: block;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 10px;
    }
    .crud-cell {
        display: flex;
        align-items: baseline;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }
    .crud-cell::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-dim);
        min-width: 90px;
        flex-shrink: 0;
    }
    .crud-cell--actions { justify-content: flex-end; border-bottom: none; }
    .crud-cell--actions::before { display: none; }
    .crud-row:hover .crud-cell { background: transparent; }
}

/* ── 2. Card-row tables (members, stores) at ≤ 700px ───────────────── */

@media (max-width: 700px) {

    /* Hide the thead — labels come from data-label pseudo-elements */
    .table--card-rows thead {
        display: none;
    }

    /* Each tbody row becomes a card */
    .table--card-rows tbody,
    .table--card-rows turbo-frame {
        display: block;
    }

    .table--card-rows tbody tr {
        display: block;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 10px;
        padding: 4px 0;
        /* Override the inherited border-bottom from .table tbody tr */
        border-bottom: 1px solid var(--border);
    }

    /* Remove the last-child border override that hides the border */
    .table--card-rows tbody tr:last-child {
        border-bottom: 1px solid var(--border);
    }

    /* Hover still works on the whole card */
    .table--card-rows tbody tr:hover {
        background: var(--surface-alt);
    }

    /* Each cell: full-width flex row with label on left, value on right */
    .table--card-rows td {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 7px 14px;
        border-bottom: 1px solid var(--border);
        width: 100%;
        box-sizing: border-box;
    }

    /* Last data cell (before actions) — no bottom border */
    .table--card-rows td:last-of-type {
        border-bottom: none;
    }

    /* Pseudo-element label from data-label */
    .table--card-rows td[data-label]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-dim);
        white-space: nowrap;
        min-width: 80px;
        flex-shrink: 0;
    }

    /* The actions cell: full-width, justify buttons to the right */
    .table--card-rows td.actions {
        border-bottom: none;
        justify-content: flex-end;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Don't show a label for the actions cell */
    .table--card-rows td.actions::before {
        display: none;
    }

    .table--card-rows td.actions .actions-inner {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
    }

    /* Ensure action buttons have good touch targets */
    .table--card-rows .btn-sm {
        min-height: 36px;
        padding: 6px 14px;
        display: inline-flex;
        align-items: center;
    }

    /* Edit form row: inputs take remaining space */
    .table--card-rows td.actions + td,
    .table--card-rows .tr-edit-row td {
        flex-wrap: wrap;
    }

    .table--card-rows .tr-edit-row td input,
    .table--card-rows .tr-edit-row td select {
        flex: 1;
        min-width: 0;
        max-width: 100%;
        width: auto !important; /* override inline styles on phone */
    }

    /* Don't show .table border/radius — cards replace it */
    .table--card-rows {
        background: transparent;
        border: none;
        border-radius: 0;
    }
}

/* ── 3. Pantry responsive: stack layout and prevent input overflow ───── */

@media (max-width: 700px) {
    /* Stack the two-column pantry layout into a single column */
    .pantry-layout {
        grid-template-columns: 1fr;
    }

    .pantry-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
        align-items: flex-start;
    }

    .pantry-row-name {
        width: 100%;
        flex: none;
    }

    .pantry-row-form {
        flex: 1;
        flex-wrap: wrap;
        gap: 6px;
    }

    .pantry-row-form .form-control {
        /* Allow inputs to shrink on small screens */
        min-width: 60px;
        flex: 1;
    }

    .pantry-row-form .form-control[style*="width: 80px"] {
        width: auto !important;
    }

    .pantry-row-form .form-control[style*="width: 70px"] {
        width: auto !important;
    }
}

/* ── 4. Ingredient category pill row: scrollable, no wrapping ────────── */
/*    (The existing @media(max-width:600px) block wraps without edge fade  */
/*     — this replaces/overrides it with a proper scrollable strip.)       */

@media (max-width: 700px) {
    .ingredient-category-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        /* Edge-fade on the right to hint scrollability */
        -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
        mask-image: linear-gradient(to right, black 80%, transparent 100%);
        /* Extend to full bleed so fade doesn't get clipped */
        margin-left: -4px;
        padding-left: 4px;
        margin-right: -4px;
        padding-right: 4px;
        /* Scrollbar hidden — still scrollable by touch */
        scrollbar-width: none;
    }

    .ingredient-category-pills::-webkit-scrollbar {
        display: none;
    }

    .ingredient-filter-search-row {
        flex-wrap: wrap;
    }

    .ingredient-filter-search-row .ingredient-search-input {
        flex: 1;
        min-width: 0;
    }
}

/* ── 5. Aliases form: add-alias row stacks on phone ─────────────────── */

@media (max-width: 600px) {
    .alias-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .alias-form-group-sm,
    .alias-form-group-lg {
        width: 100%;
    }
}

/* ==== END UI-04 ======================================================= */

/* ==== END UI-03 ======================================================= */

/* ============================================================
   UI-05 — PLANNER RESPONSIVE OVERHAUL
   Phone (≤700px): single-day scroll-snap view + sticky day pager
   Tablet (700–1100px): multi-column snap + edge affordance
   Desktop (>1100px): unchanged 7-column layout
   ============================================================ */

/* ── Day-chip pager: hidden by default (desktop), shown on ≤1100px ── */
.planner-day-pager {
    display: none;
}

/* ── planner-wrap: the scroll container on phone/tablet ─────────────
   On desktop this is just overflow-x: auto (existing rule).
   On phone/tablet we override it to be the snap container.
   ------------------------------------------------------------------ */

/* ── turbo-frame wrappers: must not collapse to zero width ──────────
   turbo-frame is display:block by default; no change needed.
   The planner-day-col gets an id added in the template for the
   IntersectionObserver to target.
   ------------------------------------------------------------------ */

/* ════════════════════════════════════════════════════════════
   TABLET  700px – 1100px
   Multi-column, snap-align per column, edge affordance
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) and (min-width: 701px) {

    /* Show the pager bar */
    .planner-day-pager {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0 0 10px;
        margin-bottom: 4px;
    }

    .planner-day-pager::-webkit-scrollbar { display: none; }

    /* Header: wrap onto two rows on narrow tablet */
    .planner-header {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Scroll container */
    .planner-wrap {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        /* Hide scrollbar but keep scroll functionality */
        scrollbar-width: none;
        /* Edge-fade to hint more content */
        -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
        mask-image: linear-gradient(to right, black 88%, transparent 100%);
        /* Counteract padding so fade extends to edge */
        margin-right: -4px;
        padding-right: 4px;
    }

    .planner-wrap::-webkit-scrollbar { display: none; }

    /* Grid: fixed 180px columns so we see ~4 on an 834px tablet */
    .planner-grid {
        grid-template-columns: repeat(7, 180px);
        min-width: unset;
    }

    /* Each column is a snap point */
    .planner-day-col {
        scroll-snap-align: start;
    }

    /* turbo-frame must not shrink — it wraps planner-day-col */
    .planner-grid > turbo-frame {
        scroll-snap-align: start;
    }
}

/* ════════════════════════════════════════════════════════════
   PHONE  ≤700px
   Single-day scroll-snap, sticky pager, compact header
   ════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

    /* ── Compact content padding ───────────────────────────── */
    .content {
        padding: 12px 12px 24px;
    }

    /* ── Planner header: stack into two rows ───────────────── */
    .planner-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 10px;
        position: sticky;
        top: 0;
        z-index: 30;
        background: var(--bg, #0f0f1a);
        /* Glass-style blurred background */
        background: color-mix(in srgb, var(--bg, #0f0f1a) 85%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 10px 0 8px;
        /* Extend to full bleed */
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Week nav row: compress, no wrapping on label */
    .planner-week-nav {
        flex-wrap: nowrap;
        gap: 6px;
        width: 100%;
    }

    .planner-week-label {
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        text-align: center;
    }

    /* Member tabs: full-width row, no wrap */
    .member-tabs {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .member-tabs::-webkit-scrollbar { display: none; }

    .member-tab {
        white-space: nowrap;
        font-size: 12px;
        padding: 4px 10px;
        flex-shrink: 0;
    }

    /* ── Day-chip pager ────────────────────────────────────── */
    .planner-day-pager {
        display: flex;
        align-items: center;
        gap: 5px;
        position: sticky;
        top: 0; /* will be pushed below planner-header via JS is fine, but let CSS stack naturally */
        z-index: 29;
        background: color-mix(in srgb, var(--bg, #0f0f1a) 90%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 8px 12px 8px;
        margin-left: -12px;
        margin-right: -12px;
        overflow-x: auto;
        scrollbar-width: none;
        border-bottom: 1px solid var(--border, #2d2d4a);
        margin-bottom: 10px;
    }

    .planner-day-pager::-webkit-scrollbar { display: none; }

    /* ── Scroll container: one day per snap point ──────────── */
    .planner-wrap {
        /* Override the desktop overflow-x: auto */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        /* Negative margin so columns can bleed to screen edge */
        margin-left: -12px;
        margin-right: -12px;
        /* Compensate padding so interior padding-left shows correctly */
        padding-left: 12px;
        padding-right: 12px;
    }

    .planner-wrap::-webkit-scrollbar { display: none; }

    /* Grid: single-day layout.
       Each column = viewport minus (2 × 12px padding) minus peek (16px on right).
       The "peek" of the next day is achieved by padding-right on .planner-wrap
       and using calc(100% - 16px) for column width.
    */
    .planner-grid {
        display: flex;
        gap: 8px;
        min-width: unset;
        /* Extend grid to reach the right edge of planner-wrap */
        padding-right: 8px;
    }

    /* Each turbo-frame + day-col pair = one snap point */
    .planner-grid > turbo-frame {
        flex: 0 0 calc(100vw - 24px - 16px); /* viewport - 2×12px padding - 16px peek */
        min-width: 0;
        scroll-snap-align: start;
    }

    .planner-day-col {
        width: 100%;
        /* Day header becomes sticky within the scrolling day column */
    }

    /* Sticky day header within its column */
    .planner-day-header {
        position: sticky;
        top: 0;
        z-index: 10;
        /* Re-apply background so it paints over content when sticky */
        background: var(--surface-alt, #252542);
    }

    /* Nutrition footer: ensure it's visible, not clipped */
    .day-nutrition-footer {
        border-top: 1px solid var(--border, #2d2d4a);
        margin-top: 4px;
    }
}

/* ── Day-chip pager styles (shared across phone + tablet) ─────────── */
@media (max-width: 1100px) {

    .planner-pager-chip {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        padding: 5px 8px;
        border: 1px solid var(--border, #2d2d4a);
        border-radius: 8px;
        background: var(--surface, #1a1a2e);
        color: var(--text-muted, #8888a8);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s ease;
        flex-shrink: 0;
    }

    .planner-pager-chip:hover {
        border-color: var(--border-light, #3d3d5a);
        color: var(--text, #e8e8f0);
        background: var(--surface-alt, #252542);
    }

    .planner-pager-chip.active {
        border-color: var(--accent, #6366f1);
        color: var(--accent, #6366f1);
        background: color-mix(in srgb, var(--accent, #6366f1) 12%, var(--surface, #1a1a2e));
    }

    .planner-pager-chip.today {
        border-color: var(--accent, #6366f1);
    }

    .planner-pager-chip.today.active {
        background: color-mix(in srgb, var(--accent, #6366f1) 20%, var(--surface, #1a1a2e));
    }

    .planner-pager-chip-name {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        line-height: 1;
    }

    .planner-pager-chip-date {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        margin-top: 2px;
    }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP  >1100px
   Hide pager, keep existing 7-column layout unchanged
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1101px) {
    .planner-day-pager {
        display: none !important;
    }

    /* Ensure desktop grid is unaffected by any flex rules above */
    .planner-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(160px, 1fr));
    }
}

/* ==== END UI-05 ======================================================= */

/* ════════════════════════════════════════════════════════════════════════
   UI-07 — Phone bottom navigation
   The .app-bottom-nav is inside layouts/app.html.twig and is hidden at
   ≥701px. At ≤700px it becomes the primary 5-tab navigation bar.
   The phone layout (layouts/phone.html.twig) has its own .bottom-nav
   wrapper and is a separate layout — no double-stacking can occur.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hide the app-layout bottom nav on non-phone viewports ─────────── */
.app-bottom-nav {
    display: none;
}

@media (max-width: 700px) {
    /* ── Show bottom nav ─────────────────────────────────────────── */
    .app-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(60px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        align-items: center;
        justify-content: space-around;
        z-index: 200;
        /* Glass */
        background: var(--glass-bg);
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
        backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
        border-top: 1px solid var(--glass-border);
        box-shadow: 0 -1px 16px rgba(0, 0, 0, 0.2);
    }

    @supports not (backdrop-filter: blur(1px)) {
        .app-bottom-nav {
            background: var(--surface);
        }
    }

    /* ── Bottom-nav items: icon above 10px label ─────────────────── */
    .app-bottom-nav .bottom-nav-item {
        font-size: 10px;
        padding: 6px 10px;
        flex: 1;
        border: none;
        background: none;
        cursor: pointer;
    }

    /* ── Push .content above the bar ────────────────────────────── */
    .content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    /* ── Planner: ensure day columns + recipe grid don't hide behind bar ─ */
    .planner-wrap {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    .recipe-grid {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* ── More button resets (button element used for sidebar#openMobile) ─── */
.bottom-nav-more {
    font-family: inherit;
    color: var(--text-muted);
    transition: color var(--transition);
}

.bottom-nav-more:hover,
.bottom-nav-more:focus-visible {
    color: var(--accent);
    outline: none;
}

/* ==== END UI-07 ======================================================= */

/* ============================================================
   UI-08 — DASHBOARD REDESIGN
   Hero row, glass stat cards, week strip, content cards,
   tonight's dinner, training summary, quick links.
   ============================================================ */

/* ── Hero ────────────────────────────────────────────────────── */

.db-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-top: 4px;
}

.db-hero-greeting {
    min-width: 0;
}

.db-hero-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    margin-bottom: 4px;
}

.db-hero-date {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.db-hero-household {
    display: inline-flex;
    align-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 99px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
}

.db-hero-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Section header ──────────────────────────────────────────── */

.db-section {
    margin-bottom: 24px;
}

/* Per-member weekly nutrition grid — N equal columns on desktop, set inline via
   --db-nutrition-cols (2 members → halves, 3 → thirds, …). Stacks on mobile. */
.db-nutrition-grid {
    display: grid;
    grid-template-columns: repeat(var(--db-nutrition-cols, 1), minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}
.db-nutrition-col {
    min-width: 0; /* let inner tables/charts shrink instead of overflowing */
}
.db-nutrition-member-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.db-nutrition-member-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
@media (max-width: 900px) {
    .db-nutrition-grid {
        grid-template-columns: 1fr; /* stack full-width on mobile/tablet */
    }
}

/* Today's meals — one card per meal type, wrapping to stack on narrow screens. */
.db-today-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.db-today-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
    border-left: 3px solid var(--border);
}
.db-today-card--breakfast { border-left-color: var(--color-carbs); }
.db-today-card--lunch     { border-left-color: var(--color-protein); }
.db-today-card--dinner    { border-left-color: var(--accent); }
.db-today-card--snack     { border-left-color: var(--color-fat); }
.db-today-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.db-today-meal {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.db-today-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-alt);
    border-radius: 999px;
    padding: 1px 8px;
}
.db-today-meals {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-today-meal-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.db-today-meal-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
    color: var(--text-muted);
}
.db-today-meal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.db-today-meal-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.db-today-meal-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.db-today-meal-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.db-today-empty {
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: none;
    padding: 4px 0;
}
.db-today-empty:hover { color: var(--accent); }

.db-section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.db-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

.db-section-range {
    font-size: 12px;
}

/* ── Generic db-card ─────────────────────────────────────────── */

.db-card {
    border-radius: var(--radius);
    overflow: hidden;
}

.db-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--glass-border);
}

.db-card-icon {
    color: var(--accent);
    display: flex;
    align-items: center;
}

.db-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* ── Training list ───────────────────────────────────────────── */

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

.db-training-item {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--glass-border);
    font-size: 13px;
}

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

.db-training-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-training-name {
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-training-meta {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}

/* ── Today's training slot (in-list, no separate banner) ───────── */
/* Today's completed training occupies its own list row, tinted green,
   carrying the activity row(s) plus the kcal/distance/time/compliance stats. */
.db-training-today {
    padding: 11px 16px 13px;
    background: var(--green-soft);
    border-bottom: 1px solid var(--glass-border);
}

.db-training-today-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--green);
}

.db-training-today-activity {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
}

/* Planned-but-not-completed training that happens to fall on today */
.db-training-item.is-today {
    background: var(--accent-soft);
}

.db-today-training-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 8px;
}

.db-today-training-stat {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.db-today-training-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
}

.db-today-training-value.is-good { color: var(--green); }
.db-today-training-value.is-ok   { color: var(--accent); }
.db-today-training-value.is-low  { color: var(--red); }

.db-today-training-label {
    font-size: 11px;
    color: var(--text-dim);
}

/* ── btn-accent convenience ──────────────────────────────────── */

.btn-accent {
    background: var(--accent);
    color: #fff;
    border: none;
}

.btn-accent:hover {
    background: var(--accent);
    opacity: 0.88;
    color: #fff;
}

/* ── Tablet breakpoint ───────────────────────────────────────── */

@media (max-width: 1024px) {
    .db-hero-title {
        font-size: 22px;
    }
}

/* ── Phone breakpoint ────────────────────────────────────────── */

@media (max-width: 900px) {
    .db-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .db-stat {
        flex-direction: column;
        gap: 8px;
        padding: 12px 12px 14px;
    }

    .db-stat-icon {
        width: 32px;
        height: 32px;
    }

    .db-stat-value {
        font-size: 22px;
    }

    .db-content-row {
        grid-template-columns: 1fr;
    }

    /* Week strip: snap-scroll row with edge fade */
    .db-week-strip {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
        /* Edge fade */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
        /* Prevent grid column override */
        grid-template-columns: unset;
    }

    .db-week-tile {
        flex: 0 0 80px;
        scroll-snap-align: start;
        min-height: 80px;
    }

    .db-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
    }

    .db-hero-title {
        font-size: 20px;
    }

    .db-hero-cta {
        align-self: flex-start;
    }
}

/* ── Suppress legacy dashboard-quick-link default underline ──── */
/* (overrides stale rule at line ~5385 and ~6872 that didn't set
   text-decoration: none on all states including :focus) */
.dashboard-quick-link,
.dashboard-quick-link:visited,
.dashboard-quick-link:hover,
.dashboard-quick-link:focus {
    text-decoration: none;
    outline: none;
}

.dashboard-quick-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ==== END UI-08 ======================================================= */

/* ============================================================
   UI-09 — PLANNER VISUAL REFINEMENT
   Calm empty-slot noise, theme training cards, glass entry
   cards, compact macro row, fix clipped footer, unify badges.
   ============================================================ */

/* ── Entry card: border-left works with glass background ─────── */
/* Meal-type border-left is set in the existing rules at ~4071;
   override here to be compatible with the glass card (slightly
   stronger so it reads through the blur). */

.meal-slot[data-meal-type="breakfast"] .entry-card { border-left-width: 3px; }
.meal-slot[data-meal-type="lunch"]     .entry-card { border-left-width: 3px; }
.meal-slot[data-meal-type="dinner"]    .entry-card { border-left-width: 3px; }
.meal-slot[data-meal-type="snack"]     .entry-card { border-left-width: 3px; }

/* ── Entry card: leftover / note variants with glass base ─────── */
.entry-card.entry-leftover {
    border-color: var(--orange);
    background: color-mix(in srgb, var(--orange) 10%, var(--glass-bg));
}

.entry-card.entry-note {
    border-style: dashed;
    border-color: var(--border-light);
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ── Empty slot: reduce min-height now that content is compact ── */
.meal-slot.meal-slot-empty {
    min-height: 52px;
}

/* ── Filled slot footer: ensure "+ add" row is never clipped ──── */
.meal-slot-add {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 2px;
    /* No overflow: hidden here — let it breathe */
}

/* ── Quick-note inline input (shown on demand via JS) ─────────── */
.slot-note-input-row {
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.slot-note-input-row.is-open {
    display: flex;
}

.slot-note-input {
    flex: 1;
    font-size: 11px;
    padding: 3px 6px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--surface-alt);
    color: var(--text);
    min-width: 0;
}

.slot-note-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-active);
}

.slot-note-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition);
}

.slot-note-submit-btn:hover {
    background: var(--accent);
    color: #fff;
}

/* ── Carb badge: unified sizing across the planner ────────────── */
.carb-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
}

/* ── Rule note: title attr provides full text on hover ────────── */
.meal-slot-rule-note[title] {
    cursor: help;
}

/* ── Training card: ensure left border colour shows through glass */
/* ── Planner min-height fix: slots with only ghost buttons ─────── */
.meal-slot-empty .meal-slot-empty-zone {
    min-height: 32px;
}

/* ── Touch / mobile: always show entry-card actions ────────────── */
@media (hover: none) {
    .entry-card-actions {
        position: static;
        margin-top: 4px;
    }
    .slot-note-icon-btn,
    .slot-quick-small {
        opacity: 1;
    }
}

/* ==== END UI-09 ======================================================= */

/* ============================================================
   UI-10 — EMPTY STATES, LOADING STATES & LAZY-CONTENT POLISH
   Glass empty states, skeleton system, toast polish.
   ============================================================ */

/* ── Empty state — glass panel ─────────────────────────────── */

.empty-state--glass {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

@supports not (backdrop-filter: blur(1px)) {
    .empty-state--glass {
        background: var(--surface);
    }
}

/* Small / compact variant */

.empty-state--sm {
    padding: 24px 16px;
    gap: 6px;
}

.empty-state--sm .empty-state-icon-circle {
    width: 36px;
    height: 36px;
}

/* Icon tinted circle */

.empty-state-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.empty-state-icon-circle--accent {
    background: var(--accent-soft);
    color: var(--accent);
}

.empty-state-icon-circle--green {
    background: var(--green-soft);
    color: var(--green);
}

.empty-state-icon-circle--red {
    background: var(--red-soft);
    color: var(--red);
}

.empty-state-icon-circle--orange {
    background: var(--orange-soft);
    color: var(--orange);
}

.empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.empty-state--sm .empty-state-title {
    font-size: 13px;
}

.empty-state-desc {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 300px;
    margin: 0;
    line-height: 1.5;
}

.empty-state--sm .empty-state-desc {
    font-size: 12px;
    max-width: 240px;
}

.empty-state-cta {
    margin-top: 4px;
}

/* ── Skeleton loader system (shimmer on glass) ──────────────── */

.skeleton-tab-content {
    padding: 4px 0;
}

.skeleton-tab-header {
    margin-bottom: 20px;
}

/* Reuse existing skeleton-card + skeleton-text for composing skeletons. */
/* Additional glass-tinted variant for frames inside glass panels: */

.skeleton-glass {
    background: linear-gradient(
        90deg,
        var(--glass-bg) 25%,
        var(--glass-border) 50%,
        var(--glass-bg) 75%
    );
    background-size: 200% 100%;
    border-radius: var(--radius);
    animation: shimmer 1.5s infinite;
}

/* ── Toast / flash polish ───────────────────────────────────── */

/* Layout: icon | message | dismiss */
.flash-region .flash {
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 18px;
}

.flash-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.9;
}

.flash-message {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    word-break: break-word;
}

.flash-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--text-muted);
    border-radius: 4px;
    flex-shrink: 0;
    transition: color var(--transition), background var(--transition);
}

.flash-dismiss:hover {
    color: var(--text);
    background: var(--surface-alt);
}

/* Type-specific icon tints */

.flash-success .flash-icon { color: var(--green); }
.flash-error   .flash-icon,
.flash-danger  .flash-icon { color: var(--red); }
.flash-warning .flash-icon { color: var(--orange); }
.flash-info    .flash-icon { color: var(--accent); }

/* Slide-in + slide-out animations */

@keyframes toast-slide-in {
    from {
        transform: translateX(24px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
        max-height: 80px;
        margin-bottom: 0;
    }
    to {
        transform: translateX(24px);
        opacity: 0;
        max-height: 0;
        margin-bottom: -8px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.flash-region .flash {
    animation: toast-slide-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.flash-region .flash.flash--leaving {
    animation: toast-slide-out 0.28s ease forwards;
    pointer-events: none;
    overflow: hidden;
}

/* Keep the progress bar animation */
.flash-region .flash::after {
    animation: toast-countdown var(--toast-duration, 5s) linear forwards;
}

/* ==== END UI-10 ======================================================= */

/* ============================================================
   UI-11 — RECIPE LIBRARY & DETAIL PAGE POLISH
   Cards: glass, scrim, clamp, single meta row, tag overflow,
   source chip. Detail: action bar, glass stat tiles, hero cap,
   Delete demoted, star rating 44px tappable.
   ============================================================ */

/* ── Recipe card: glass surface ──────────────────────────────── */

.recipe-card {
    /* Override base: glass replaces plain surface */
    background: var(--glass-bg);
    border-color: var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--transition), transform var(--transition),
                border-color var(--transition);
    /* Structural */
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.recipe-card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

@supports not (backdrop-filter: blur(1px)) {
    .recipe-card { background: var(--surface); }
}

/* ── Image wrapper + gradient scrim ──────────────────────────── */

.recipe-card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-alt);
}

.recipe-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.recipe-card:hover .recipe-card-img {
    transform: scale(1.03);
}

.recipe-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.18) 40%,
        transparent 70%
    );
    pointer-events: none;
}

/* No-image placeholder inside wrapper */
.recipe-card-image-wrap .recipe-card-no-image {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
}

/* ── Favourite heart — top-right of image ────────────────────── */

.recipe-card-fav-frame {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: block;
}

.recipe-card-fav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
    padding: 0;
}

.recipe-card-fav-btn:hover {
    background: rgba(0, 0, 0, 0.65);
    color: var(--yellow);
    border-color: rgba(255, 255, 255, 0.25);
}

.recipe-card-fav-btn.is-active {
    color: var(--yellow);
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(250, 204, 21, 0.4);
}

/* ── "+ Plan" pill — bottom-right of image ──────────────────── */

.recipe-card-plan-btn {
    position: absolute;
    top: auto;      /* reset the old top: 8px from the earlier ruleset */
    bottom: 8px;
    right: 8px;
    z-index: 3;
    /* glass pill */
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--text);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    height: auto;   /* prevent flex-container stretch */
    /* Desktop: hover-reveal */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, background var(--transition);
}

.recipe-card:hover .recipe-card-plan-btn {
    opacity: 1;
    pointer-events: auto;
}

.recipe-card-plan-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Touch devices: always show */
@media (hover: none) {
    .recipe-card-plan-btn {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── Card links: image-link fills the image-wrap, body-link wraps text */

.recipe-card-image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.recipe-card-link,
.recipe-card-body-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.recipe-card-link:hover,
.recipe-card-image-link:hover,
.recipe-card-body-link:hover {
    text-decoration: none;
}

/* ── Card body ───────────────────────────────────────────────── */

.recipe-card-body {
    padding: 10px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Title: 2-line clamp ─────────────────────────────────────── */

.recipe-card-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    /* 2-line clamp */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
}

/* ── Single metadata row ─────────────────────────────────────── */

.recipe-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

/* Inline meta pill: clock+time, flame+kcal */
.recipe-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1;
}

/* ── Tag chips row ───────────────────────────────────────────── */

.recipe-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

/* Overflow chip "+N" — same style as badge-tag but slightly dimmer */
.badge-overflow {
    opacity: 0.7;
}

/* Source chip — quiet label with link icon */
.badge-source {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text-muted);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ── Show page: hero image (phone capped ~40vh) ──────────────── */

.recipe-show-hero {
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}

.recipe-show-hero img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

@media (max-width: 600px) {
    .recipe-show-hero img {
        height: 40vh;
        max-height: 260px;
    }
}

/* ── Compact action bar ──────────────────────────────────────── */

.recipe-action-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.recipe-action-bar-title {
    flex: 1;
    min-width: 0;
}

.recipe-show-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin: 0 0 4px;
}

.recipe-show-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
    /* Single-line clamp on phone */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.recipe-action-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Icon-only square button variant */
.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
    flex-shrink: 0;
}

.btn-icon-only:hover {
    background: var(--surface-active);
    border-color: var(--border-light);
    color: var(--text);
    text-decoration: none;
}

/* Favourite active state on icon-only show page button */
.btn-icon-only.btn-favourite-active {
    color: var(--yellow);
    border-color: rgba(250, 204, 21, 0.35);
    background: rgba(250, 204, 21, 0.08);
}

/* ── Glass stat tiles ────────────────────────────────────────── */

.recipe-stat-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.recipe-stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    min-width: 70px;
}

.recipe-stat-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
}

.recipe-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

/* Smaller value text for meal type (can be "Breakfast, Lunch") */
.recipe-stat-value--sm {
    font-size: 13px;
    font-weight: 600;
}

/* ── Show page footer with Back + Delete ─────────────────────── */

.recipe-show-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
}

/* Quiet danger link — demoted delete button */
.btn-danger-quiet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    text-decoration: none;
}

.btn-danger-quiet:hover {
    color: var(--red);
    background: var(--red-soft);
}

/* ── Star rating: 44px tappable targets ──────────────────────── */

.star-btn {
    /* Override existing 24px — make tappable at 44px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 26px;
    padding: 0;
    cursor: pointer;
    color: var(--text-dim);
    background: transparent;
    border: none;
    transition: color var(--transition), transform 0.1s;
    user-select: none;
    line-height: 1;
    border-radius: 4px;
}

.star-btn:hover,
.star-btn.star-preview {
    color: var(--yellow);
    transform: scale(1.12);
}

.star-btn.star-active {
    color: var(--yellow);
}

/* Star display glyphs (non-interactive, in ratings summary + rows) */
.star-glyph {
    color: var(--text-dim);
    font-size: 16px;
    letter-spacing: 1px;
}

.star-glyph--filled {
    color: var(--yellow);
}

/* Ensure star-input row doesn't get cramped */
.star-input {
    display: flex;
    gap: 0;
    margin-bottom: 4px;
}

/* ── Responsive adjustments ──────────────────────────────────── */

@media (max-width: 600px) {
    .recipe-action-bar {
        flex-direction: column;
        gap: 10px;
    }

    .recipe-action-bar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .recipe-show-desc {
        /* Allow wrapping on phone — it's in its own block now */
        white-space: normal;
    }

    .recipe-stat-tiles {
        gap: 6px;
    }

    .recipe-stat-tile {
        padding: 8px 12px;
        min-width: 60px;
    }

    .recipe-stat-value {
        font-size: 16px;
    }
}

/* ==== END UI-11 ======================================================= */

/* ==== UI-13 — SHOPPING & COOK MODE POLISH ============================= */

/* ── Shopping: Glass segmented store-tab control ─────────────────── */

.shopping-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.shopping-header-row .page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.shopping-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Glass segmented control — store tabs */
.segmented-tabs {
    display: inline-flex;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-radius: calc(var(--radius) + 4px);
    padding: 3px;
    gap: 2px;
}

.segmented-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    position: relative;
}

.segmented-tab:hover {
    color: var(--text);
    text-decoration: none;
    background: rgba(255,255,255,0.05);
}

.segmented-tab.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,0.35);
}

.segmented-tab .tab-badge {
    font-size: 11px;
    font-weight: 600;
    background: rgba(255,255,255,0.18);
    border-radius: 20px;
    padding: 1px 6px;
    line-height: 1.4;
}

.segmented-tab:not(.active) .tab-badge {
    background: var(--surface-alt);
    color: var(--text-muted);
}

/* ── Shopping: Budget summary as glass stat tiles ────────────────── */

.budget-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.budget-tile {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.budget-tile-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.budget-tile-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.5px;
}

.budget-tile-value--accent { color: var(--accent); }
.budget-tile-value--green  { color: var(--green);  }
.budget-tile-value--amber  { color: var(--amber);  }

.budget-tile-sub {
    font-size: 11px;
    color: var(--text-dim);
}

/* ── Shopping: Generated-at meta line ────────────────────────────── */

.shopping-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 12px;
}

/* ── Shopping: Item rows — 44px touch target, check animation ────── */

/* Override existing shopping-item to raise touch height */
.shopping-item {
    min-height: 44px;
    padding: 10px 14px;
    transition: background 0.12s;
}

.shopping-item:hover {
    background: var(--surface-alt);
}

/* Themed checkbox with satisfying animation */
.shopping-item-check {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-light);
    border-radius: 5px;
    background: transparent;
    color: transparent;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.15s, background 0.2s, transform 0.15s, color 0.1s;
}

.shopping-item-check:hover {
    border-color: var(--accent);
    transform: scale(1.1);
}

.shopping-item--checked .shopping-item-check {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: scale(1.08);
    animation: check-pop 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes check-pop {
    0%   { transform: scale(0.7); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1.08); }
}

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

.shopping-item--checked {
    opacity: 0.6;
    transition: opacity 0.3s;
}

/* ── Shopping: Category group headers — sticky within list ────────── */

.shopping-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shopping-category {
    border-radius: var(--radius);
    overflow: visible; /* allow sticky headers */
}

.shopping-category-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--bg) 92%, var(--accent));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 6px 14px;
    cursor: pointer;
}

/* ── Mobile shopping: glass system alignment ─────────────────────── */

/* Mobile store tabs — upgrade to segmented look */
.m-store-tabs {
    padding: 8px 12px;
    background: transparent;
    border-bottom: none;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.m-store-tabs::-webkit-scrollbar { display: none; }

.m-store-tab {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.m-store-tab:hover {
    color: var(--text);
    border-color: var(--accent);
}

.m-store-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    border-bottom: none;
}

/* Mobile item rows: increase check touch target */
.m-shopping-item-check {
    width: 30px;
    height: 30px;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: transparent;
    transition: background 0.15s, border-color 0.15s, transform 0.15s, color 0.1s;
}

.m-shopping-item--checked .m-shopping-item-check {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    animation: check-pop 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
}

.m-shopping-item-tap:active .m-shopping-item-check:not(.m-shopping-item--checked .m-shopping-item-check) {
    transform: scale(1.15);
    border-color: var(--accent);
}

/* Mobile add-panel — glass treatment */
.m-add-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-top: 1px solid var(--glass-border);
}

/* Mobile FAB — glass ring */
.m-fab {
    box-shadow: 0 4px 16px rgba(99,102,241,0.45), 0 0 0 3px rgba(99,102,241,0.12);
}

/* ── Cook mode: glass step cards ─────────────────────────────────── */

.cook-step-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-radius: calc(var(--radius) + 4px);
}

/* ── Cook mode: "Step N of M" progress bar ───────────────────────── */

.cook-step-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.cook-step-progress-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    white-space: nowrap;
    min-width: 90px;
}

.cook-step-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.cook-step-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Cook mode: big Prev/Next buttons (thumb-reachable) ──────────── */

.cook-nav-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.cook-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    min-width: 120px;
    justify-content: center;
    border-radius: var(--radius);
    transition: transform 0.1s, box-shadow 0.15s;
}

.cook-nav-btn:active {
    transform: scale(0.97);
}

.cook-nav-btn--prev {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    color: var(--text);
}

.cook-nav-btn--next {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}

.cook-nav-btn--finish {
    background: var(--green);
    border: 1px solid var(--green);
    color: #fff;
    box-shadow: 0 4px 14px rgba(34,197,94,0.35);
}

/* ── Cook mode: animated progress ring timer ─────────────────────── */

.cook-timer {
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cook-timer-ring-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

.cook-timer-ring-svg {
    transform: rotate(-90deg);
    overflow: visible;
}

.cook-timer-ring-track {
    fill: none;
    stroke: var(--border);
    stroke-width: 5;
}

.cook-timer-ring-fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.5s;
}

.cook-timer-ring-fill.timer-ring--urgent {
    stroke: var(--red);
}

.cook-timer-ring-fill.timer-ring--warning {
    stroke: var(--amber);
}

.cook-timer-ring-fill.timer-ring--done {
    stroke: var(--green);
}

.cook-timer-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: center;
    /* rotate back to normal since parent is rotated */
}

.cook-timer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cook-timer-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.cook-timer-display {
    font-size: 28px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1;
}

.cook-timer-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Timer finished state */
.cook-timer--done .cook-timer-display {
    color: var(--green);
}

.cook-timer--running .cook-timer-ring-fill {
    /* pulsing accent glow while running */
    filter: drop-shadow(0 0 4px rgba(99,102,241,0.5));
}

/* ── Cook mode: ingredient checklist same check interaction ──────── */

.cook-ingredient-check {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-light);
    border-radius: 5px;
    background: transparent;
    color: transparent;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.15s, background 0.2s, transform 0.15s, color 0.1s;
}

.cook-ingredient-check:hover {
    border-color: var(--green);
    transform: scale(1.1);
}

.cook-ingredient-item--checked .cook-ingredient-check {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    animation: check-pop 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
}

.cook-ingredient-item--checked .cook-ingredient-name {
    text-decoration: line-through;
    color: var(--text-dim);
}

.cook-ingredient-item--checked {
    opacity: 0.6;
}

/* Glass treatment for ingredients panel */
.cook-ingredients-panel {
    background: var(--glass-bg);
    border-left: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
}

/* ── Cook mode: header glass ─────────────────────────────────────── */

.cook-header {
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}

/* ── Cook complete — glass card ──────────────────────────────────── */

.cook-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 48px 24px;
}

.cook-complete-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-radius: calc(var(--radius) + 6px);
    padding: 48px 40px;
    text-align: center;
    max-width: 480px;
    width: 100%;
}

/* ── Mobile cook: responsive Prev/Next ───────────────────────────── */

@media (max-width: 768px) {
    .cook-body {
        grid-template-columns: 1fr;
    }

    .cook-ingredients-panel {
        border-left: none;
        border-top: 1px solid var(--glass-border);
    }

    .cook-nav-btn {
        padding: 16px 20px;
        font-size: 17px;
    }

    .cook-timer-ring-wrap {
        width: 60px;
        height: 60px;
    }

    .cook-timer-display {
        font-size: 24px;
    }

    .budget-tiles {
        grid-template-columns: repeat(3, 1fr);
    }

    .budget-tile-value {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .shopping-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .shopping-header-actions {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }

    .segmented-tabs {
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: none;
    }

    .segmented-tabs::-webkit-scrollbar { display: none; }

    .cook-nav-btn {
        flex: 1;
        padding: 18px 12px;
    }
}

/* ==== END UI-13 ======================================================= */

/* ============================================================
   UI-15 — MICRO-INTERACTIONS, ACCESSIBILITY & FINAL QA SWEEP
   Motion system, focus rings, touch targets, ARIA polish,
   scrollbars, selection colour, iOS zoom, safe-area, error pages.
   ============================================================ */

/* ── 1. Motion variables ────────────────────────────────────── */

:root {
    --ease-out-soft:   cubic-bezier(0.22, 0.68, 0, 1.2);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:        120ms;
    --dur-base:        180ms;
    --dur-slow:        280ms;
}

/* ── 2. Button press micro-interaction ──────────────────────── */

.btn:active {
    transform: scale(0.97);
    transition-duration: var(--dur-fast);
}

.btn-primary:active {
    background: color-mix(in srgb, var(--accent) 80%, #000 20%);
}

/* Broader interactive press targets */
.user-avatar-btn:active {
    transform: scale(0.93);
}

.mobile-menu-btn:active {
    transform: scale(0.9);
}

/* ── 3. Global :focus-visible ring ─────────────────────────── */

/*
  Single authoritative rule: every interactive element that
  receives keyboard focus shows a 2px accent ring.
  We use :where() so specificity stays low and local
  overrides win without !important.
*/
:where(
  a,
  button,
  [role="button"],
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Forms already have a box-shadow ring — suppress duplicate outline */
:where(
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea
):focus-visible {
    outline: none;
}

/* Nav links — use offset so the ring doesn't fight the left border */
.nav-link:focus-visible,
.nav-link--admin:focus-visible {
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* Bottom nav items */
.bottom-nav-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 6px;
}

/* Day pager chips */
.planner-day-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Segmented tabs */
.segmented-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Star rating buttons */
.star-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Ghost slot / quick-action buttons */
.slot-add-ghost:focus-visible,
.slot-quick-small:focus-visible,
.slot-note-icon-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    opacity: 1;
}

/* Favourite heart buttons */
.recipe-fav-btn:focus-visible,
.fav-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Command palette items */
.command-palette-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* ── 4. Card hover lifts ────────────────────────────────────── */

.db-card.glass,
.recipe-card {
    transition:
        box-shadow var(--dur-base) var(--ease-in-out),
        transform var(--dur-base) var(--ease-in-out);
}

.db-card.glass:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

/* ── 5. Consistent hover transitions via variable ───────────── */

.nav-link,
.nav-link--admin,
.bottom-nav-item,
.btn,
.topbar-search-pill,
.user-menu-item {
    transition-duration: var(--dur-base);
    transition-timing-function: var(--ease-in-out);
}

/* ── 6. Touch targets ≥44px ─────────────────────────────────── */

/* Sidebar nav links: increase vertical padding */
.nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 44px;
}

.nav-link--admin {
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 40px;
}

/* Bottom nav items: already have ~60px height bar, but ensure
   each item has a generous tap area */
.app-bottom-nav .bottom-nav-item {
    min-height: 44px;
    padding: 8px 10px;
}

/* Slot quick-action ghost buttons: expand via pseudo-element */
.slot-quick-small,
.slot-note-icon-btn {
    position: relative;
}

.slot-quick-small::after,
.slot-note-icon-btn::after {
    content: '';
    position: absolute;
    inset: -9px;
}

/* ── 7. aria-current="page" nav highlighting ────────────────── */

/* Treat aria-current="page" same as .active for nav and bottom-nav */
.nav-link[aria-current="page"] {
    color: var(--accent);
    background: var(--accent-soft);
    border-left-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.bottom-nav-item[aria-current="page"] {
    color: var(--accent);
}

/* ── 8. Themed subtle scrollbars ────────────────────────────── */

/* Sidebar, content, and main scrollable panels */
.sidebar,
.content,
.sidebar-nav,
.recipe-grid,
.recipe-filters-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
}

.sidebar::-webkit-scrollbar,
.content::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.recipe-grid::-webkit-scrollbar,
.recipe-filters-panel::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.recipe-grid::-webkit-scrollbar-thumb,
.recipe-filters-panel::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.recipe-grid::-webkit-scrollbar-track,
.recipe-filters-panel::-webkit-scrollbar-track {
    background: transparent;
}

/* ── 9. Text selection colour ───────────────────────────────── */

::selection {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--text);
}

/* ── 10. iOS input zoom prevention ─────────────────────────── */
/*
   iOS zooms the viewport when an input's font-size < 16px.
   Scope to text-like inputs at ≤700px; exclude compact editors
   (nutrition-editor uses .nutrition-global-input etc which we do NOT
   touch as they are explicitly compact fields).
*/
@media (max-width: 700px) {
    input[type="text"]:not(.form-control-inline):not(.nutrition-global-input):not(.nutrition-kcal-input):not(.nutrition-training-input):not(.nutrition-rule-input-num):not(.nutrition-rule-note-input):not(.slot-note-input):not(.command-palette-input),
    input[type="email"]:not(.form-control-inline),
    input[type="password"]:not(.form-control-inline),
    input[type="search"]:not(.form-control-inline),
    input[type="url"]:not(.form-control-inline),
    select:not(.form-control-inline):not(.nutrition-rule-select),
    textarea:not(.form-control-inline) {
        font-size: 16px;
    }
}

/* ── 11. Error page — match new system ──────────────────────── */

.error-page {
    min-height: 60vh;
    color: var(--text);
}

.error-page-icon {
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

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

/* ── 12. Training icon sizing ────────────────────────────────── */
/*
   Dashboard training list icon column: ensure 16px rendered
   icons don't get squashed below their natural size.
*/
.db-training-icon svg,
.db-training-icon .icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
}

.db-training-item {
    grid-template-columns: 24px 1fr auto;
}

/* ── 13. Skip-to-content link ───────────────────────────────── */

.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius);
    text-decoration: none;
    transition: left 0s;
}

.skip-to-content:focus {
    left: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── 14. Command palette: role=dialog focus trap indication ─── */

.command-palette-overlay {
    /* Ensure it sits in the ARIA landmark sense above page content */
    isolation: isolate;
}

/* ── 15. Reduced motion — kill all transforms/animations ─────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* Kill specific named animations */
    .check-pop,
    @keyframes check-pop,
    @keyframes slideUp,
    @keyframes fadeIn,
    @keyframes shimmer,
    @keyframes spin {
        animation: none !important;
    }

    /* Remove transforms used for hover/press interactions */
    .btn:active,
    .user-avatar-btn:active,
    .mobile-menu-btn:active,
    .db-stat.glass:hover,
    .db-card.glass:hover,
    .star-btn:hover,
    .star-btn.star-preview,
    .shopping-item-check:hover,
    .shopping-item--checked .shopping-item-check,
    .m-shopping-item--checked .m-shopping-item-check,
    .cook-ingredient-check:hover,
    .cook-ingredient-item--checked .cook-ingredient-check {
        transform: none !important;
    }

    /* Disable sidebar slide animation */
    .sidebar {
        transition: none !important;
    }

    /* Disable modal scale */
    .modal-box {
        transform: none !important;
    }

    /* Disable command palette translate */
    .user-menu-dropdown {
        transform: none !important;
    }
}

/* ==== END UI-15 ======================================================= */

/* ============================================================================
   RECIPE SHORTLIST — shared household "this week's candidates"
   ============================================================================ */

/* ── Card bookmark — top-left of image (mirrors the favourite heart) ──────── */
.recipe-card-shortlist-frame {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: block;
}

.recipe-card-shortlist-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
    padding: 0;
}

.recipe-card-shortlist-btn:hover {
    background: rgba(0, 0, 0, 0.65);
    color: var(--accent);
    border-color: rgba(255, 255, 255, 0.25);
}

.recipe-card-shortlist-btn.is-active {
    color: var(--accent);
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(108, 140, 255, 0.45);
}

/* Show-page action-bar bookmark active state */
.btn-shortlist-active {
    color: var(--accent);
    border-color: rgba(108, 140, 255, 0.45);
}

/* ── Drag source feedback ─────────────────────────────────────────────────── */
.recipe-card[draggable="true"] { cursor: grab; }
.recipe-card.is-dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

/* ── Floating drop zone (recipe index, desktop only) ──────────────────────── */
.shortlist-dropzone {
    display: none; /* shown only on pointer-capable wide viewports below */
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 40;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    transition: border-color var(--transition), box-shadow var(--transition),
                transform var(--transition);
}

@media (hover: hover) and (min-width: 1025px) {
    .shortlist-dropzone { display: flex; }
}

.shortlist-dropzone.is-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-3);
    transform: translateY(-2px);
}

@keyframes shortlist-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.shortlist-dropzone.just-added .shortlist-dropzone-count {
    animation: shortlist-pop 0.35s ease;
}

.shortlist-dropzone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}

.shortlist-dropzone-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.shortlist-dropzone-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.shortlist-dropzone-hint {
    font-size: 11px;
    color: var(--text-muted);
}

.shortlist-dropzone-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.shortlist-dropzone-count.is-empty {
    background: var(--surface-active);
    color: var(--text-muted);
}

.shortlist-dropzone-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--text-muted);
    transition: background var(--transition), color var(--transition);
}
.shortlist-dropzone-link:hover {
    background: var(--surface-active);
    color: var(--accent);
}

/* ── Planner shortlist tray ───────────────────────────────────────────────── */
/* Full-width block BELOW the (horizontally scrolling) week grid — never a grid
   child, so it stays reachable on mobile. */
.shortlist-tray {
    display: block;
    width: 100%;
    margin-top: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.shortlist-tray-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    list-style: none;
    user-select: none;
}
.shortlist-tray-summary::-webkit-details-marker { display: none; }
.shortlist-tray-title { flex-shrink: 0; }

.shortlist-tray-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.shortlist-tray-chevron {
    margin-left: auto;
    color: var(--text-muted);
    transition: transform var(--transition);
}
.shortlist-tray[open] .shortlist-tray-chevron { transform: rotate(180deg); }

.shortlist-tray-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 14px;
}

.shortlist-tray-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 220px;
    max-width: 100%;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: grab;
    transition: border-color var(--transition), transform var(--transition);
}
.shortlist-tray-item:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.shortlist-tray-item.dragging { opacity: 0.5; }

.shortlist-tray-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-active);
    color: var(--text-muted);
    flex-shrink: 0;
}
.shortlist-tray-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shortlist-tray-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.shortlist-tray-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shortlist-tray-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.shortlist-tray-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}
.shortlist-tray-remove:hover {
    background: var(--surface-active);
    color: var(--danger, #ef4444);
}

.shortlist-tray-empty-msg {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0;
}
.shortlist-tray:not(.is-empty) .shortlist-tray-empty-msg { display: none; }

.shortlist-tray-footer {
    flex-basis: 100%;
    margin-top: 4px;
}
.shortlist-tray-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
}
.shortlist-tray-clear:hover { color: var(--danger, #ef4444); }

/* On touch devices a tap opens the picker, so show the tap cursor */
@media (hover: none) {
    .shortlist-tray-item { cursor: pointer; }
}

/* ── Shortlist tap-to-plan picker (touch fallback for drag) ──────────────── */

.shortlist-picker .shortlist-picker-box {
    width: 460px;
    max-width: 92vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.shortlist-picker-recipe { color: var(--accent); }

.shortlist-picker-days {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    margin: -4px -4px 0;
    padding: 4px;
}

.shortlist-picker-day {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.shortlist-picker-day.today {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.shortlist-picker-day-label {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 52px;
}
.shortlist-picker-day-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.shortlist-picker-day-date {
    font-size: 11px;
    color: var(--text-muted);
}

.shortlist-picker-meals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.shortlist-picker-meal {
    flex: 1 1 auto;
    min-width: 64px;
    padding: 8px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.shortlist-picker-meal:active,
.shortlist-picker-meal:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Phone: dock the picker to the bottom as a sheet */
@media (max-width: 600px) {
    .shortlist-picker { align-items: flex-end; }
    .shortlist-picker .shortlist-picker-box {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius) var(--radius) 0 0;
        max-height: 80vh;
        /* The sheet docks flush to the bottom, where the fixed 60px .bottom-nav
           (plus the device safe-area) sits — without extra bottom padding the
           last day row is hidden under the nav and can't be tapped. */
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Health / Weight tracking (per-member private metrics)
   ══════════════════════════════════════════════════════════════════════ */

.health-sync-since { display: flex; flex-direction: column; gap: 4px; }
.health-sync-since span { font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.health-sync-since .form-control { padding: 6px 9px; font-size: 13px; }

/* Sync modal (native <dialog>) */
.health-sync-dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    padding: 0;
    width: min(440px, 92vw);
    box-shadow: var(--shadow-2);
}
.health-sync-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.health-sync-dialog-form { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.health-sync-dialog-title { margin: 0; font-size: 16px; font-weight: 700; }
.health-sync-dialog-hint { margin: 0; font-size: 12px; line-height: 1.5; }
.health-sync-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* ── Metric selector pills ─────────────────────────────────────────── */
.health-metric-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
}
.health-pill {
    --pill-color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.health-pill:hover { color: var(--text); border-color: var(--pill-color); }
.health-pill.is-active {
    color: var(--text);
    border-color: var(--pill-color);
    background: var(--surface-active);
}
.health-pill-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pill-color);
    flex-shrink: 0;
}
.health-pill-unit { color: var(--text-dim); font-weight: 500; font-size: 11px; }
.health-pill-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--pill-color);
    background: color-mix(in srgb, var(--pill-color) 18%, transparent);
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 1.5;
}
.health-pill.is-empty { opacity: 0.55; }
.health-pill.is-empty .health-pill-dot { background: var(--text-dim); }
.health-pill--add { color: var(--text-dim); border-style: dashed; }
.health-add { position: relative; }
.health-add > summary { list-style: none; }
.health-add > summary::-webkit-details-marker { display: none; }
.health-add-form {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    box-shadow: var(--shadow-2);
    width: min(420px, 90vw);
}
.health-color-input { padding: 2px; height: 38px; width: 48px; }

/* ── Chart card ────────────────────────────────────────────────────── */
.health-chart-card { margin-bottom: 18px; }
.health-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
.health-chart-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.health-chart-name { font-size: 15px; font-weight: 700; color: var(--text); }
.health-chart-current { font-size: 20px; font-weight: 700; color: var(--accent); }
.health-chart-current-date { font-size: 12px; }
.health-chart-wrap { position: relative; height: 300px; }

.health-range-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 9px;
}
.health-range-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.health-range-btn:hover { color: var(--text); }
.health-range-btn.is-active { background: var(--surface-active); color: var(--text); box-shadow: var(--shadow-1); }

/* ── Target / prediction summary line ──────────────────────────────── */
.health-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}
.health-summary-item { display: inline-flex; align-items: center; gap: 6px; }
.health-summary-item strong { color: var(--text); }
.health-summary-verdict {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
}
.health-summary-verdict.is-on-track { color: var(--green); background: rgba(74, 222, 128, 0.12); }
.health-summary-verdict.is-behind { color: var(--orange); background: rgba(251, 146, 60, 0.12); }

/* ── Log + history + target columns ────────────────────────────────── */
.health-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.health-col-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.health-card-title { font-size: 14px; font-weight: 700; margin: 0 0 12px; }

.health-log-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.health-add-form.card { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.health-target-form { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.health-field { display: flex; flex-direction: column; gap: 4px; }
.health-field--grow { flex: 1 1 140px; min-width: 120px; }
.health-field label { font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }

.health-entry-table .crud-cell--actions form { margin: 0; }
.health-target-current { font-size: 14px; margin: 0 0 14px; color: var(--text-muted); }
.health-target-current strong { color: var(--text); }
.health-archive-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

@media (max-width: 880px) {
    .health-cols { grid-template-columns: 1fr; }
}


/* ── Recipe listing: Load more ─────────────────────────────────────────── */
.recipe-load-more {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 0.5rem;
}
.recipe-load-more-btn {
    min-width: 220px;
}
.recipe-load-more-btn.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ── Pantry expiry (#149) ──────────────────────────────────────────────── */
.pantry-row--expiring { box-shadow: inset 3px 0 0 var(--amber, #d97706); }
.pantry-expiry-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--surface-2, rgba(255,255,255,0.06));
    color: var(--text-muted);
}
.pantry-expiry-badge--soon { background: rgba(217,119,6,0.15); color: #d97706; }
.pantry-expiry-badge--expired { background: rgba(220,38,38,0.16); color: #ef4444; }

/* ── Dashboard: expiring soon / use it up (#149) ───────────────────────── */
.db-expiring { padding: 1rem 1.25rem; border-radius: var(--radius, 12px); }
.db-expiring-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.db-expiring-item {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.6rem; border-radius: 8px;
    background: var(--surface-2, rgba(255,255,255,0.05));
}
.db-expiring-name { font-size: 13px; font-weight: 500; }
.db-expiring-badge { font-size: 11px; font-weight: 700; }
.db-expiring-badge--soon { color: #d97706; }
.db-expiring-badge--expired { color: #ef4444; }
.db-useitup { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); }
.db-useitup-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.5rem; }
.db-useitup-recipes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.db-useitup-recipe {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.7rem; border-radius: 999px;
    background: var(--accent-soft, rgba(99,140,255,0.12));
    color: var(--accent, #6c8cff);
    font-size: 13px; text-decoration: none;
}
.db-useitup-recipe:hover { background: var(--accent-soft-hover, rgba(99,140,255,0.2)); }

/* ── Batch cook modal (#147) ───────────────────────────────────────────── */
.batch-cook-box { max-width: 540px; width: 100%; }
.batch-cook-recipe { color: var(--accent, #6c8cff); }
.batch-cook-hint { color: var(--text-muted); font-size: 13px; margin: 0 0 0.9rem; }
.batch-cook-days { display: flex; flex-direction: column; gap: 0.5rem; max-height: 50vh; overflow-y: auto; }
.batch-cook-day {
    display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0.5rem; border-radius: 8px; background: var(--surface-2, rgba(255,255,255,0.04));
}
.batch-cook-day.today { box-shadow: inset 2px 0 0 var(--accent, #6c8cff); }
.batch-cook-day-label { display: flex; flex-direction: column; line-height: 1.1; }
.batch-cook-day-name { font-weight: 700; font-size: 13px; }
.batch-cook-day-date { font-size: 11px; color: var(--text-muted); }
.batch-cook-meals { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.batch-cook-meal {
    padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 12px; cursor: pointer;
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    background: transparent; color: var(--text, #e8e8ea);
}
.batch-cook-meal:hover:not(:disabled) { border-color: var(--accent, #6c8cff); }
.batch-cook-meal.selected {
    background: var(--accent, #6c8cff); border-color: var(--accent, #6c8cff); color: #fff; font-weight: 600;
}
.batch-cook-meal:disabled, .batch-cook-meal.is-source { opacity: 0.35; cursor: not-allowed; }
.batch-cook-footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* ── Per-date kcal target: source badge + inline one-off editor ─────────── */
/* The day header figure is a <details> so the one-off editor needs no JS.    */
.day-kcal { position: relative; }
/* Row, not column: the source badge sits inline beside the figure so it doesn't
   add a line to every day header and push the grid down. */
.day-kcal-summary {
    list-style: none; cursor: pointer;
    display: flex; flex-direction: row; align-items: baseline; flex-wrap: nowrap;
    gap: 5px; min-width: 0;
}
.day-kcal-summary .planner-day-kcal-target { flex: 0 0 auto; white-space: nowrap; }
.day-kcal-summary::-webkit-details-marker { display: none; }
.day-kcal-summary:hover .planner-day-kcal-target { text-decoration: underline dotted; }

/* Source badges: a matched training rule or a one-off override both earn a tint. */
.planner-day-kcal-target.is-training_rule { color: var(--green, #4ecdc4); }
.planner-day-kcal-target.is-manual { color: var(--accent, #6c8cff); }

/* Truncates instead of wrapping — a long rule label must not grow the header. */
.planner-day-kcal-source {
    display: inline-block; min-width: 0; flex: 0 1 auto;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    border-radius: 3px; padding: 1px 5px;
    background-color: var(--surface-2, rgba(255,255,255,0.06)); color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.planner-day-kcal-unset { color: var(--text-dim); font-weight: 400; font-style: italic; }
.is-training_rule + .planner-day-kcal-source { background: var(--green-soft); color: var(--green); }
.is-manual + .planner-day-kcal-source { background: var(--accent-soft, rgba(99,140,255,0.15)); color: var(--accent, #6c8cff); }

/* Expands in the flow rather than floating: .planner-day-col is overflow:hidden,
   so an absolutely-positioned popover would be clipped by the column edge. */
.day-kcal-form {
    display: flex; flex-direction: column; gap: 0.4rem;
    width: 100%;
    margin-top: 6px; padding: 0.55rem;
    background-color: var(--surface, #1a1a1f);
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    border-radius: 8px;
}
.day-kcal-field { display: flex; flex-direction: column; gap: 2px; }
.day-kcal-field > span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.day-kcal-field input {
    width: 100%; padding: 0.3rem 0.45rem; font-size: 13px;
    background-color: var(--surface-2, rgba(255,255,255,0.04)); color: var(--text, #e8e8ea);
    border: 1px solid var(--border, rgba(255,255,255,0.14)); border-radius: 6px;
}
.day-kcal-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.day-kcal-hint { margin: 0; font-size: 10.5px; line-height: 1.35; color: var(--text-muted); }

/* ── Training kcal rules editor (nutrition page) ────────────────────────── */
.kcal-rules-section { margin-top: 2rem; }
.kcal-rules-header h2 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.kcal-rules-intro { margin: 0 0 1rem; max-width: 70ch; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.kcal-rules-warning {
    margin-bottom: 1rem; padding: 0.7rem 0.9rem; font-size: 13px; line-height: 1.5;
    background: var(--orange-soft, rgba(249,115,22,0.12));
    border: 1px solid var(--orange, #f97316); border-radius: var(--radius, 8px);
    color: var(--orange, #f97316);
}
.kcal-rules-warning a { color: inherit; font-weight: 600; }

/* CSS table on divs — a <turbo-frame> would be foster-parented out of a <table>. */
.kcal-rules-table { display: flex; flex-direction: column; gap: 0.4rem; }
.kcal-rules-row {
    display: grid; align-items: center; gap: 0.5rem;
    grid-template-columns: 34px 110px 1.2fr 1.2fr 1.2fr 100px 1.6fr 62px 78px;
    padding: 0.5rem; border-radius: 8px;
    background: var(--surface-2, rgba(255,255,255,0.04));
}
.kcal-rules-row-head {
    background: transparent; padding-bottom: 0;
    font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.kcal-rules-row.is-disabled { opacity: 0.5; }
.kcal-rules-row-new { border: 1px dashed var(--border, rgba(255,255,255,0.14)); background: transparent; }
.kcal-rules-empty { padding: 0.9rem; font-size: 13px; color: var(--text-muted); }
.kcal-rules-cell { min-width: 0; }
.kcal-rules-range { display: flex; align-items: center; gap: 0.2rem; }
.kcal-rules-range input { min-width: 0; flex: 1; }
.kcal-rules-dash { color: var(--text-muted); font-size: 12px; }
.kcal-rules-labels { display: flex; flex-direction: column; gap: 0.25rem; }
.kcal-rules-input-wrap { display: flex; align-items: center; gap: 0.25rem; }
.kcal-rules-unit { font-size: 11px; color: var(--text-muted); }
.kcal-rules-move { display: flex; gap: 0.2rem; }
.kcal-rules-delete-label { display: flex; align-items: center; gap: 0.3rem; font-size: 11px; color: var(--text-muted); cursor: pointer; }
/* background-COLOR only: the shorthand would wipe the theme's select chevron
   background-image sizing and leave it tiling across the control. */
.kcal-rules-row input[type="number"],
.kcal-rules-row input[type="text"],
.kcal-rules-row select {
    width: 100%; padding: 0.3rem 0.4rem; font-size: 12px;
    background-color: var(--surface, #1a1a1f); color: var(--text, #e8e8ea);
    border: 1px solid var(--border, rgba(255,255,255,0.14)); border-radius: 6px;
}
.kcal-rules-row select { padding-right: 1.5rem; }
.kcal-rules-row-warning {
    margin: -0.1rem 0 0.3rem 0.5rem; font-size: 11.5px; line-height: 1.4;
    color: var(--orange, #f97316);
}
.kcal-rules-footnote { margin: 0.8rem 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); max-width: 70ch; }

/* Stack the rules editor into labelled cards on narrow screens. */
@media (max-width: 900px) {
    .kcal-rules-row-head { display: none; }
    .kcal-rules-row {
        grid-template-columns: 1fr 1fr;
        border: 1px solid var(--border, rgba(255,255,255,0.14));
    }
    /* from–to pairs need the full row, and the injected ::before label needs its
       own line, or the inputs squeeze until the placeholders read "f"/"t". */
    .kcal-rules-labels,
    .kcal-rules-range { grid-column: 1 / -1; }
    .kcal-rules-range { flex-wrap: wrap; }
    .kcal-rules-range::before { flex: 0 0 100%; }
    .kcal-rules-cell[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block; margin-bottom: 2px;
        font-size: 9.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
        color: var(--text-muted);
    }
}

/* ── Week kcal balance strip (planner header) ───────────────────────────────
   Weekly budget for the active member: target, planned, remaining. The aim is
   to balance the week rather than each individual day. */
.week-balance {
    display: flex; flex-direction: column; gap: 5px;
    min-width: 220px; padding: 0.45rem 0.7rem;
    background-color: var(--surface-alt, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    border-radius: 8px;
}
.week-balance-figures { display: flex; align-items: baseline; gap: 1rem; }
.week-balance-item { display: flex; flex-direction: column; line-height: 1.15; }
.week-balance-label {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
.week-balance-value { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.week-balance-item--remaining .week-balance-value { color: var(--green, #4ade80); }
.week-balance.is-over .week-balance-item--remaining .week-balance-value { color: var(--orange, #f97316); }

.week-balance-bar {
    height: 4px; border-radius: 999px; overflow: hidden;
    background-color: var(--surface-2, rgba(255,255,255,0.08));
}
.week-balance-bar-fill {
    height: 100%; border-radius: 999px;
    background-color: var(--accent, #6c8cff);
    transition: width 0.25s ease;
}
.week-balance.is-over .week-balance-bar-fill { background-color: var(--orange, #f97316); }

@media (max-width: 700px) {
    .week-balance { min-width: 0; width: 100%; }
    .week-balance-figures { justify-content: space-between; gap: 0.5rem; }
}

/* ── Shortlist "who's it for?" confirm ───────────────────────────────────── */

.shortlist-who .shortlist-who-box {
    width: 380px;
    max-width: 92vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.shortlist-who-recipe { color: var(--accent); }

.shortlist-who-slot {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.shortlist-who-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    margin: -4px -4px 0;
    padding: 4px;
}

.shortlist-who-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.shortlist-who-option:active,
.shortlist-who-option:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.shortlist-who-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}
.shortlist-who-option.is-everyone .shortlist-who-avatar {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.shortlist-who-name { flex: 1; }

.shortlist-who-hint {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.shortlist-who-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

/* Phone: dock the sheet to the bottom, clear of the fixed bottom nav */
@media (max-width: 600px) {
    .shortlist-who { align-items: flex-end; }
    .shortlist-who .shortlist-who-box {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius) var(--radius) 0 0;
        max-height: 80vh;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Meal tuner: per-day ingredient sliders on a planned recipe ─────────── */
/* Click a planned recipe to dial its key ingredients up or down for that day. */
.entry-card--tunable { cursor: pointer; }
.entry-card--tuned { box-shadow: inset 0 0 0 1px var(--accent-soft, rgba(108,140,255,0.35)); }

.entry-tuned-badge {
    display: inline-flex; align-items: center;
    color: var(--accent, #6c8cff);
    vertical-align: -1px;
}

.meal-tuner-box { max-width: 560px; width: 100%; }
.meal-tuner-recipe { color: var(--accent, #6c8cff); }

.meal-tuner-slot {
    margin: 0; font-size: 12px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.meal-tuner-hint { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.meal-tuner-slot:empty, .meal-tuner-hint:empty { display: none; }

/* Macro readout — recalculated live as the sliders move, so the numbers here
   are the ones the entry card will show after saving. */
.meal-tuner-macros {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin: 0.9rem 0;
}
.meal-tuner-macro {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    min-width: 68px; padding: 0.45rem 0.6rem;
    border: 1px solid var(--border, rgba(255,255,255,0.14)); border-radius: 8px;
    background: var(--surface-2, rgba(255,255,255,0.04));
}
.meal-tuner-macro-value { font-size: 16px; font-weight: 700; line-height: 1.1; }
.meal-tuner-macro-label {
    font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
}
.meal-tuner-macro-shift { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.meal-tuner-macro-shift.is-up { color: var(--green, #4ade80); }
.meal-tuner-macro-shift.is-down { color: var(--orange, #fb923c); }
.meal-tuner-macro--kcal .meal-tuner-macro-value { color: var(--yellow, #facc15); }
.meal-tuner-macro--protein .meal-tuner-macro-value { color: var(--accent, #6c8cff); }

.meal-tuner-rows {
    display: flex; flex-direction: column; gap: 0.55rem;
    max-height: 46vh; overflow-y: auto;
}
.meal-tuner-empty { margin: 1rem 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

.meal-tuner-row {
    padding: 0.55rem 0.65rem; border-radius: 8px;
    border: 1px solid transparent;
    background: var(--surface-2, rgba(255,255,255,0.04));
}
.meal-tuner-row.is-tuned { border-color: var(--accent, #6c8cff); }

.meal-tuner-row-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
    margin-bottom: 0.35rem;
}
.meal-tuner-ingredient {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
    min-width: 0; font-size: 13px; font-weight: 600;
}
.meal-tuner-emoji { font-size: 14px; }

.meal-tuner-role {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 1px 5px; border-radius: 3px;
    background: var(--surface, #1a1d27); color: var(--text-muted);
}
.meal-tuner-role--protein { background: var(--accent-soft, rgba(108,140,255,0.15)); color: var(--accent, #6c8cff); }
.meal-tuner-role--carbs { background: var(--orange-soft, rgba(251,146,60,0.15)); color: var(--orange, #fb923c); }
.meal-tuner-role--fat { background: var(--green-soft, rgba(74,222,128,0.15)); color: var(--green, #4ade80); }

.meal-tuner-amount { flex: 0 0 auto; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.meal-tuner-amount strong { font-size: 14px; color: var(--text, #e4e6f0); }
.meal-tuner-amount em { margin-left: 5px; font-style: normal; font-size: 11.5px; font-weight: 700; }
.meal-tuner-amount em.is-more { color: var(--green, #4ade80); }
.meal-tuner-amount em.is-less { color: var(--orange, #fb923c); }

/* Amount row: drag it, or type it, or replace the ingredient outright. */
.meal-tuner-controls { display: flex; align-items: center; gap: 0.5rem; }

.meal-tuner-slider {
    display: block; flex: 1 1 auto; min-width: 0; margin: 0;
    accent-color: var(--accent, #6c8cff);
    /* Comfortably thumb-sized on a phone, where this is most likely used. */
    height: 24px; cursor: pointer;
}

/* The typed amount, for when the slider's grid is not the number you want. */
.meal-tuner-number {
    display: inline-flex; align-items: center; gap: 3px;
    flex: 0 0 auto; font-size: 11px; color: var(--text-dim);
}
.meal-tuner-number input {
    width: 62px; padding: 3px 5px;
    font-size: 12.5px; font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text, #e4e6f0);
    background: var(--surface, #1a1d27);
    border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 5px;
}
.meal-tuner-number input:focus-visible { outline: 2px solid var(--accent, #6c8cff); outline-offset: 1px; }

.meal-tuner-swap {
    flex: 0 0 auto; padding: 3px 8px;
    font-size: 11px; font-weight: 700; cursor: pointer;
    color: var(--text-muted);
    background: var(--surface, #1a1d27);
    border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 5px;
}
.meal-tuner-swap:hover, .meal-tuner-swap.is-open {
    color: var(--accent, #6c8cff); border-color: var(--accent, #6c8cff);
}

/* What this row replaced, and the way back. */
.meal-tuner-row.is-swapped { border-color: var(--accent, #6c8cff); }
.meal-tuner-swapped {
    margin: 0 0 0.35rem; font-size: 11.5px; line-height: 1.4; color: var(--text-muted);
}
.meal-tuner-undo {
    margin-left: 4px; padding: 0;
    font: inherit; font-weight: 700; cursor: pointer;
    color: var(--accent, #6c8cff); background: none; border: 0;
    text-decoration: underline;
}

.meal-tuner-optional {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-dim);
}
.meal-tuner-nomacros { margin: 0.3rem 0 0; font-size: 10.5px; line-height: 1.4; color: var(--text-dim); }

/* Swap search — a list of ingredients this one could become. */
.meal-tuner-search { margin-top: 0.45rem; }
.meal-tuner-search-input {
    width: 100%; padding: 5px 8px;
    font-size: 12.5px; color: var(--text, #e4e6f0);
    background: var(--surface, #1a1d27);
    border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 6px;
}
.meal-tuner-results {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 132px; overflow-y: auto; margin-top: 0.35rem;
}
.meal-tuner-result {
    padding: 5px 8px; text-align: left;
    font-size: 12.5px; cursor: pointer;
    color: var(--text, #e4e6f0);
    background: none; border: 0; border-radius: 5px;
}
.meal-tuner-result:hover { background: var(--accent-soft, rgba(108,140,255,0.15)); color: var(--accent, #6c8cff); }
.meal-tuner-results-note { margin: 0.35rem 0 0; font-size: 11.5px; line-height: 1.4; color: var(--text-dim); }

/* The ingredients that carry the meal lead; everything else is one click down. */
.meal-tuner-group { display: flex; flex-direction: column; gap: 0.55rem; }
/* An author-origin `display` outranks the UA's `[hidden] { display: none }`,
   so the disclosure needs saying explicitly or it hides nothing. */
.meal-tuner-group[hidden] { display: none; }
.meal-tuner-more {
    align-self: flex-start; padding: 4px 2px;
    font-size: 11.5px; font-weight: 700; cursor: pointer;
    color: var(--text-muted); background: none; border: 0;
    text-decoration: underline;
}
.meal-tuner-more:hover { color: var(--accent, #6c8cff); }

.meal-tuner-scale {
    display: flex; justify-content: space-between; gap: 0.5rem;
    font-size: 10.5px; color: var(--text-dim);
}
.meal-tuner-scale-base { color: var(--text-muted); }

.meal-tuner-footer { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.meal-tuner-footer-spacer { flex: 1; }
.meal-tuner-reset:disabled, .meal-tuner-footer .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* Phone: dock the sheet to the bottom, clear of the fixed bottom nav */
@media (max-width: 600px) {
    .meal-tuner-modal { align-items: flex-end; }
    .meal-tuner-modal .meal-tuner-box {
        width: 100%; max-width: 100%;
        border-radius: var(--radius) var(--radius) 0 0;
        max-height: 88vh;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
    .meal-tuner-rows { max-height: 40vh; }
}

/* Save-time failure, shown without clearing the sliders the user just set. */
.meal-tuner-error:empty { display: none; }
.meal-tuner-error {
    margin: 0.7rem 0 0; padding: 0.5rem 0.7rem;
    font-size: 12.5px; line-height: 1.45;
    border: 1px solid var(--red, #f87171); border-radius: 8px;
    background: var(--red-soft, rgba(248,113,113,0.12)); color: var(--red, #f87171);
}

/* ════════════════════════════════════════════════════════════════════════
   PLANNER SHORTLIST RAIL
   The shortlist lives outside .planner-wrap (the horizontal scroll
   container), so on a wide desktop we can sit it beside the week grid as a
   sticky rail — visually an 8th column after the last day, but it never
   scrolls away horizontally and stays pinned as the page scrolls down.
   Below the breakpoint .planner-layout is a no-op block and the tray keeps
   its original full-width-under-the-grid behaviour (which is what makes it
   reachable on phone/tablet).

   The 1600px breakpoint is arithmetic, not taste: usable width is the
   viewport minus the 220px sidebar, 48px of .content padding, and up to
   15px of classic scrollbar. The week grid's intrinsic minimum is
   7 x 160px + 6 x 10px gaps = 1180px, so a rail below ~1700px would push
   the grid into a horizontal scrollbar. Relaxing the column minimum to
   140px inside the rail brings that down to 1600, where days still render
   at ~148px. Going lower was tried and rejected: at 1500 columns fall to
   138px and day-header text starts clipping ("Mon cl…", "LO…").
   ════════════════════════════════════════════════════════════════════════ */

.planner-layout {
    display: block;
}

/* Pre-existing: .shortlist-tray-remove sets no background/border, and there
   is no global button reset, so it renders with the UA's grey outset chrome.
   Barely noticed in the wide tray; glaring in a narrow rail. */
.shortlist-tray-remove {
    background: none;
    border: none;
    padding: 0;
}

@media (min-width: 1600px) {

    .planner-layout {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    /* min-width: 0 is load-bearing — without it the grid's intrinsic minimum
       blows the flex container out instead of scrolling inside the wrap. */
    .planner-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Take the rail's width out of the days' slack rather than out of a
       horizontal scrollbar. The 140px floor is slack, not a target: days
       measure ~148px at 1600 and ~191px at 1920. */
    .planner-layout .planner-grid {
        grid-template-columns: repeat(7, minmax(140px, 1fr));
        min-width: 0;
    }

    /* The rail itself. Overrides the base width/margin/overflow at the
       "Planner shortlist tray" section above. .content is the scroll
       container (overflow-y: auto), so top: 0 sticks against its scrollport;
       .planner-header is only sticky at <=700px, so nothing to offset. */
    .shortlist-tray {
        flex: 0 0 clamp(190px, 13vw, 240px);
        width: auto;
        margin-top: 0;
        position: sticky;
        top: 0;
        max-height: calc(100vh - 150px);
        overflow: hidden auto;
    }

    /* Header stays put while the item list scrolls inside the rail. */
    .shortlist-tray-summary {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--surface);
    }

    /* Items stack vertically and fill the rail instead of wrapping in a row */
    .shortlist-tray-body {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .shortlist-tray-item {
        width: 100%;
    }

    /* A rail is too narrow to ellipsise a recipe name onto one line and
       still say anything useful — wrap to two instead. */
    .shortlist-tray-name {
        white-space: normal;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.25;
    }

    /* Collapsed: shrink to an icon strip so the week grid gets the width
       back. Driven purely by the <details> [open] attribute — no JS. */
    .shortlist-tray:not([open]) {
        flex-basis: 48px;
    }

    .shortlist-tray:not([open]) .shortlist-tray-summary {
        flex-direction: column;
        gap: 6px;
        padding: 10px 4px;
    }

    .shortlist-tray:not([open]) .shortlist-tray-title {
        display: none;
    }

    .shortlist-tray:not([open]) .shortlist-tray-chevron {
        margin-left: 0;
    }
}



/* ══════════════════════════════════════════════════════════════
   FINALISE WEEK — frozen nutrition figures
   A finalised week's macros are snapshotted onto its entries, so the
   planner stops recomputing them from the current recipes. The grid
   goes read-only to match; the API returns 409 either way.
   ══════════════════════════════════════════════════════════════ */

/* The finalise control is one button in both directions. A locked week is
   shown by the button itself rather than by a separate pill beside it, so the
   header keeps the same shape either way instead of gaining a control (and,
   on a phone, a whole extra row) when the week is frozen. */
.planner-finalise-btn.is-finalised {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.planner-finalise-btn.is-finalised:hover {
    background: var(--accent);
    color: var(--surface);
}

/* A locked week should not look broken, just settled — dim the card's
   affordance cues without draining the macros the user came to read. */
.entry-card--locked {
    cursor: default;
}

.entry-card--locked:hover {
    transform: none;
}

.planner-not-finalised-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 14px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius-sm);
    background: var(--orange-soft);
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

.planner-not-finalised-note .icon {
    flex-shrink: 0;
    color: var(--orange);
}

/* The week-nav row wraps on phones, so these controls keep their words.
   They used to shed them to save a line, which left a locked week showing
   nothing but a lock glyph and an unlock glyph: no way to tell that the week
   was frozen, or that the second button was the way out of it. That is the
   one state on this page a user cannot diagnose from the grid alone. */
@media (max-width: 767px) {
    .planner-week-nav {
        flex-wrap: wrap;
    }

    /* The label carries `flex: 1` on mobile, i.e. basis 0. It therefore
       contributes nothing when the row is measured, so every control packs
       onto one line and the date range is left with the few pixels that
       remain — 5px for 142px of text on a 412px screen, which showed one
       digit. It must claim its own width and let the buttons wrap below it. */
    .planner-week-label {
        flex: 0 0 auto;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ============================================================
   PLANNER — ROW-ALIGNED MEAL SLOTS (desktop)

   Each day column used to be its own flex stack, so Monday's
   breakfast sat at whatever height Monday's content needed and
   never lined up with Tuesday's. On desktop the seven days are
   already a real 7-column grid, so the columns are handed down
   as subgrids: all seven share one set of rows, and every meal
   type ends up one height across the whole week.

   Row map — the count comes from --planner-rows, set on
   .planner-grid in index.html.twig:
     1                      day header
     2                      training slot
     3 … 2 + mealTypes      meal slots (--slot-row, set per slot
                            in day_column.html.twig)
     last                   per-day nutrition footer

   Rows are placed explicitly rather than left to auto-placement:
   a Turbo Frame reload re-renders one whole day column on its
   own, and explicit rows keep that column in step even if its
   markup ever gains or loses an element.

   Tablet and phone deliberately keep the flex / scroll-snap
   layout defined above — there you see one or two days at a
   time, so padding every row out to the tallest day in the week
   would only add vertical scrolling.
   ============================================================ */

@media (min-width: 1101px) {
    @supports (grid-template-rows: subgrid) {

        .planner-grid {
            grid-template-rows: repeat(var(--planner-rows, 7), auto);
        }

        /* Both wrappers span the full row set and pass the tracks
           through, so the day column's own children land on the
           grid's rows rather than on rows of their own. */
        .planner-grid > turbo-frame,
        .planner-grid > turbo-frame > .planner-day-col {
            display: grid;
            grid-row: 1 / -1;
            grid-template-rows: subgrid;
            min-width: 0;
        }

        /* Grid items default to min-width: auto, so a column's children
           could never shrink below their own min-content width. A long
           recipe name or a full macro row (.entry-card-macros is
           nowrap, and its chips do not shrink) pushed the slot out to
           ~225px inside a 160px column, where .planner-day-col's
           overflow: hidden cropped it — and took the entry card's
           action buttons, absolutely positioned against the card's
           right edge, out of view with it. The min-width: 0 above is
           on the column, not on what the column contains. */
        .planner-day-col > * {
            min-width: 0;
        }

        .planner-day-col > .planner-day-header   { grid-row: 1; }
        .planner-day-col > .training-slot        { grid-row: 2; }
        .planner-day-col > .day-nutrition-footer { grid-row: -2 / -1; }

        /* Slots stretch to fill their shared row, so the meal-type
           stripe and bottom rule run to the same depth every day. */
        .planner-day-col > .meal-slot {
            grid-row: var(--slot-row);
            display: flex;
            flex-direction: column;
        }

        /* Entry cards stay under the label; the add row settles on
           the bottom of the slot so the "+" buttons line up too. */
        .planner-day-col > .meal-slot > .meal-slot-add {
            margin-top: auto;
        }
    }
}

/* Planner mutation feedback. Every planner API call used to fail silently, so a
   refusal — most often "this week is finalised" — was indistinguishable from
   the drag simply not registering. */
.planner-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(90vw, 420px);
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--surface-raised);
    border: 1px solid var(--border-light);
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
    box-shadow: var(--shadow-3);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* The message has to be allowed to shrink and to take a line of its own.
   Without this the non-shrinking action button squeezed it into a column one
   word wide on a phone. */
.planner-toast > span {
    flex: 1 1 180px;
    min-width: 0;
}

/* Clear the phone bottom nav (60px, fixed). The toast used to sit under it,
   which put the action button — the only way out of a finalised week from
   this screen — behind the tab bar. */
@media (max-width: 700px) {
    .planner-toast {
        left: 12px;
        right: 12px;
        max-width: none;
        transform: none;
        bottom: calc(60px + 16px);
        justify-content: space-between;
    }
}

/* A refusal the user can act on carries its own way out. The finalised-week
   409 is the case that matters: the header may still be rendered as editable,
   and then this button is the only route to un-finalising. */
.planner-toast-action {
    flex-shrink: 0;
    padding: 5px 12px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.planner-toast-action:hover {
    background: var(--accent);
    color: var(--surface);
}

.planner-toast-close {
    flex-shrink: 0;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--text-dim);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.planner-toast-close:hover {
    color: var(--text);
}

/* ── Planner compact mode ──────────────────────────────────────────────────
   A view preference toggled by the header button (planner-compact controller,
   which puts .planner-compact on <body> so the class survives the day columns
   being swapped as turbo-frames). It buys vertical space two ways: the recipe
   thumbnails go, and the training block shrinks to a single line. */

.planner-compact-btn.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.planner-compact-btn.is-active:hover {
    background: var(--accent);
    color: var(--surface);
}

/* Entry cards: drop the image and fall back to the plain text-card layout. */
.planner-compact .entry-card-thumb {
    display: none;
}

.planner-compact .entry-card--has-image {
    /* Matches the padding every other entry card carries, so a card that has
       lost its image is indistinguishable from one that never had one. Keep
       this in step with .entry-card in "ENTRY CARDS — RECLAIM THE COLUMN
       WIDTH" at the end of this file: the value is only ever a copy of that
       one, and the two drifting apart is what this rule exists to prevent. */
    padding: 6px;
    flex-direction: row;
}

.planner-compact .entry-card--has-image .entry-card-content {
    padding: 0;
}

/* Training: one tight line — smaller icon, name on a single line, no badge. */
.planner-compact .training-card {
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    min-height: 30px;
    align-items: center;
}

.planner-compact .training-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 0.7rem;
    margin-top: 0;
}

.planner-compact .training-name {
    font-size: 0.72rem;
    -webkit-line-clamp: 1;
    margin-bottom: 0;
}

.planner-compact .training-meta {
    font-size: 0.62rem;
}

.planner-compact .training-intensity {
    display: none;
}

.planner-compact .training-badge {
    align-self: center;
    margin-top: 0;
    padding: 1px 4px;
    font-size: 0.6rem;
}

/* ════════════════════════════════════════════════════════════════════════
   PLANNER — DAY HEADER ON ONE LINE

   The weekday name used to sit on its own line above the date, which spent
   a whole row of header height in all seven columns at once. It is now a
   flex item in .planner-day-date-row alongside the number and the month:
   "Fri 4 Sep" on a single baseline.
   ════════════════════════════════════════════════════════════════════════ */

.planner-day-date-row {
    gap: 5px;
    margin-top: 0;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Same optical nudge the month gets — the small caps would otherwise hang
   off the bottom of the 26px number they are aligned to. */
.planner-day-date-row > .planner-day-name {
    padding-bottom: 3px;
    flex-shrink: 0;
}

/* ── Clear week ──────────────────────────────────────────────────────────
   Sits with the other week-wide header actions but reads as destructive on
   hover, so it is not mistaken for Compact or Refresh at a glance. */
.planner-clear-btn:hover {
    color: var(--red);
    border-color: var(--red);
}

/* ── Family tab ──────────────────────────────────────────────────────────
   Sits first in .member-tabs and carries an icon, so it needs to lay its
   contents out on a line rather than relying on the inline flow the plain
   name tabs get. A hairline separator marks it as the household view
   rather than a third person. */
.member-tab--family {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 4px;
    padding-right: 14px;
    border-right: 1px solid var(--border);
}

.member-tab--family .icon {
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   ENTRY CARDS — RECLAIM THE COLUMN WIDTH

   A day column is 160px at 1440px, and 45px of that was going on nested
   padding before a single character of the recipe name:

     column 160  ->  meal slot 138  ->  card 135  ->  content 115

   Three things were paying for it. The slot padded 10px a side; the card
   padded 8px more; and .entry-card-content padded another 6px inside that,
   so every card was padded twice over.

   Worse, .entry-card--has-image asked for padding: 0 so its thumbnail could
   run the full width of the card — but the later plain .entry-card rule
   (the glass treatment) sets padding: 6px 8px at the same specificity and
   won. Every recipe thumbnail has been sitting in an 8px frame it was never
   meant to have. .planner-compact re-adds that padding with the comment
   "matches the padding every other entry card carries", which only makes
   sense if the 0 had been in effect: that rule was a no-op too.

   This section is at the end of the file so it beats all three by order,
   which is the thing the original attempt got wrong.

   Not going flush to the column edge: the cards would touch the meal-type
   stripe and each other, and stop reading as cards.
   ════════════════════════════════════════════════════════════════════════ */

.meal-slot {
    padding-left: 5px;
    padding-right: 5px;
}

/* One level of padding, not two. The card is the visual box, so it holds it
   and the content box inside holds none. */
.entry-card {
    padding: 6px;
}

.entry-card-content {
    padding: 0;
}

/* An image card is padded by its content instead, so the thumbnail reaches
   both edges of the card — what the rule at the top of this file has been
   asking for all along. */
.entry-card--has-image {
    padding: 0;
}

.entry-card--has-image .entry-card-content {
    padding: 5px 6px;
}

/* ── Planner listening mode ────────────────────────────────────────────────
   The header toggle for planner-listen. Off, it is an ordinary header button.
   On, it goes green with a slow pulsing dot — a live indicator has to read as
   "something is running" at a glance, or nobody trusts that the week in front
   of them is current. Green rather than the accent so it is not mistaken for
   Compact, which is the other stateful button in this row. */

.planner-listen-btn.is-active {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green);
    font-weight: 600;
}

/* The dot only exists while listening; off, the icon carries the button. */
.planner-listen-dot {
    display: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.planner-listen-btn.is-active .planner-listen-dot {
    display: inline-block;
    animation: planner-listen-pulse 2s ease-in-out infinite;
}

/* Refreshing is deferred while something on the page is open. Still listening,
   but no longer claiming the week in front of you is current — a modal nobody
   closed must not leave a confident green pill behind it. */
.planner-listen-btn.is-paused {
    border-color: var(--border);
    background: transparent;
    color: var(--text-muted);
}

.planner-listen-btn.is-paused .planner-listen-dot {
    animation: none;
    opacity: 0.45;
}

/* Checks are not getting through. Keep the button in its "on" shape — it is
   still listening — but drop the green claim that it is up to date. */
.planner-listen-btn.is-stalled {
    border-color: var(--yellow);
    background: transparent;
    color: var(--yellow);
}

.planner-listen-btn.is-stalled .planner-listen-dot {
    animation-duration: 1s;
}

@keyframes planner-listen-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
}

@media (prefers-reduced-motion: reduce) {
    .planner-listen-btn.is-active .planner-listen-dot {
        animation: none;
    }
}

/* ── Finalise-week warning ──────────────────────────────────────────────────
   The interstitial shown when Finalise is pressed on a week that still has
   active alerts. Deliberately a full page rather than a flash or a dialog:
   it can carry a dozen lines across four members, and it has to be readable
   long enough to decide whether to go back and fix the plan. */
.finalise-warning {
    max-width: 760px;
    margin: 0 auto;
}

.finalise-warning-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius-sm);
    background: var(--orange-soft);
}

.finalise-warning-head .icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--orange);
}

.finalise-warning-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}

.finalise-warning-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.finalise-warning-member {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.finalise-warning-member-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.finalise-warning-member-name {
    font-size: 14px;
    font-weight: 600;
}

.finalise-warning-member-count {
    color: var(--text-muted);
    font-size: 12px;
}

.finalise-warning-day {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid var(--border);
}

.finalise-warning-day-label {
    flex: 0 0 76px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.finalise-warning-day-label:hover {
    color: var(--accent);
    text-decoration: underline;
}

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

.finalise-warning-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1.6;
}

.finalise-warning-item .icon {
    flex-shrink: 0;
    color: var(--orange);
}

.finalise-warning-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 600px) {
    .finalise-warning-day {
        flex-direction: column;
        gap: 2px;
    }

    .finalise-warning-day-label {
        flex: 0 0 auto;
    }
}