/* LifeHUD mobile presentation layer.
   Desktop stays on the existing layout. Everything here is scoped to mobile widths. */

@media (max-width: 768px) {
    :root {
        --mobile-shell-pad: 12px;
        --mobile-card-radius: 10px;
        --mobile-card-border: rgba(125, 151, 178, .22);
        --mobile-card-border-warm: rgba(207, 197, 151, .22);
        --mobile-panel-bg: linear-gradient(180deg, rgba(17, 24, 28, .94), rgba(8, 12, 14, .98));
        --mobile-panel-bg-soft: linear-gradient(180deg, rgba(23, 29, 31, .92), rgba(10, 14, 15, .97));
        --mobile-blue: #78adf0;
        --mobile-green: #8fca74;
        --mobile-gold: #d7a14e;
        --mobile-red: #d77b6e;

        /* Canonical mobile schema tokens. These are intentionally page-agnostic. */
        --lhm-radius: 10px;
        --lhm-bg: var(--bg, #0b0f0e);
        --lhm-panel: color-mix(in srgb, var(--panel, #151918) 94%, #050707);
        --lhm-panel-soft: color-mix(in srgb, var(--panel-2, #1a201e) 84%, #070909);
        --lhm-row: color-mix(in srgb, var(--panel-3, #1a211f) 56%, #070909);
        --lhm-border: var(--border, rgba(207, 197, 151, .16));
        --lhm-border-strong: rgba(207, 197, 151, .24);
        --lhm-text: var(--text, #ddd9c9);
        --lhm-muted: var(--muted, #a39b7c);
        --lhm-accent: var(--accent-2, #d0c287);
        --lhm-green: var(--success, #7e9f69);
        --lhm-orange: #b9894f;
        --lhm-red: var(--danger, #b36a5f);
        --lhm-blue: var(--accent, #a9a15f);
    }

    html,
    body {
        min-width: 0;
        overflow-x: hidden;
        background:
            radial-gradient(circle at 50% -10%, rgba(91, 132, 170, .12), transparent 36%),
            linear-gradient(180deg, #081014 0%, #080b0d 52%, #070808 100%);
    }

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

    .standard-app-shell,
    .app-shell {
        min-width: 0;
        width: 100%;
    }

    .standard-page-wrap,
    .page-wrap {
        width: 100%;
        min-width: 0;
        margin-left: 0 !important;
    }

    .standard-page-content,
    .page-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 12px var(--mobile-shell-pad) 22px;
        gap: 12px;
    }

    .standard-topbar,
    .topbar {
        position: sticky;
        top: 0;
        z-index: 31;
        min-height: 66px;
        padding: 10px var(--mobile-shell-pad);
        border-bottom: 1px solid rgba(125, 151, 178, .18);
        background:
            linear-gradient(180deg, rgba(8, 14, 17, .98), rgba(7, 10, 12, .96)),
            radial-gradient(circle at 20% 0%, rgba(120, 173, 240, .08), transparent 36%);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .32);
        backdrop-filter: blur(10px);
    }

    .standard-topbar-left,
    .topbar-left {
        gap: 10px;
        min-width: 0;
    }

    .standard-menu-btn,
    .menu-btn {
        flex: 0 0 46px;
        display: inline-grid !important;
        place-items: center;
        inline-size: 46px;
        block-size: 46px;
        width: 46px;
        min-width: 46px;
        max-width: 46px;
        height: 46px;
        min-height: 46px;
        max-height: 46px;
        padding: 0 !important;
        aspect-ratio: 1 / 1;
        line-height: 1;
        border-color: rgba(125, 151, 178, .26);
        background: rgba(255, 255, 255, .025);
        color: #e5ebef;
        border-radius: 9px;
    }

    .standard-menu-btn i,
    .menu-btn i {
        display: block;
        line-height: 1;
    }

    .standard-topbar-brand {
        min-width: 0;
        min-height: 44px;
        gap: 10px;
    }

    .standard-topbar-brand .brand-mark {
        width: 40px;
        height: 40px;
        border-color: rgba(207, 197, 151, .24);
        background: rgba(207, 197, 151, .06);
        border-radius: 9px;
    }

    .standard-topbar-brand .brand-name {
        display: inline-block;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: 'Chakra Petch', system-ui, sans-serif;
        font-size: clamp(24px, 8vw, 36px);
        line-height: 1;
        letter-spacing: .04em;
        color: #e2e5df;
        text-shadow: 0 0 12px rgba(120, 173, 240, .12);
    }

    .standard-topbar-user,
    .topbar-user {
        flex: 0 0 auto;
        gap: 8px;
        margin-left: auto;
        min-width: 0;
    }

    .standard-topbar-date,
    .standard-topbar-separator,
    .standard-account-copy,
    .standard-account-logout {
        display: none !important;
    }

    .standard-alert-indicator {
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        justify-content: center;
        border: 1px solid rgba(207, 197, 151, .15);
        background: rgba(255, 255, 255, .018);
        border-radius: 9px;
    }

    .standard-alert-indicator strong {
        min-width: 18px;
        height: 18px;
        border-radius: 6px;
    }

    .standard-account-block {
        min-width: 0;
        min-height: 40px;
        padding: 0;
    }

    .standard-account-avatar {
        width: 40px;
        height: 40px;
        border-radius: 9px;
        border-color: rgba(207, 197, 151, .26);
        background: linear-gradient(180deg, rgba(207, 197, 151, .12), rgba(120, 173, 240, .08));
        font-size: 13px;
    }

    .standard-page-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-height: 58px !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 1px solid var(--lhm-border) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .022), 0 12px 24px rgba(0, 0, 0, .22) !important;
    }

    .standard-title-block {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        align-self: stretch !important;
        display: flex !important;
        align-items: center !important;
    }

    .standard-title-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 10px !important;
    }

    .standard-title-icon {
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        border: 1px solid color-mix(in srgb, var(--lhm-accent) 32%, transparent) !important;
        border-radius: var(--lhm-radius) !important;
        background: color-mix(in srgb, var(--lhm-accent) 9%, var(--lhm-panel-soft)) !important;
        color: var(--lhm-accent) !important;
        font-size: 14px !important;
    }

    .standard-page-header h1,
    .standard-title-row h1 {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: clamp(24px, 7.2vw, 30px) !important;
        font-weight: 900 !important;
        line-height: .98 !important;
        letter-spacing: .035em !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .standard-page-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin-left: auto !important;
        align-self: stretch !important;
        padding: 10px 10px 10px 0 !important;
    }

    .standard-page-actions .btn,
    .standard-icon-btn,
    .btn {
        min-height: 42px;
    }

    .standard-panel {
        border-color: var(--mobile-card-border);
        border-radius: var(--mobile-card-radius);
        background: var(--mobile-panel-bg);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .024), 0 16px 28px rgba(0, 0, 0, .22);
        overflow: hidden;
    }

    .standard-panel-header {
        min-height: 54px;
        padding: 13px 14px;
        border-bottom-color: rgba(125, 151, 178, .18);
        background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .006));
    }

    .standard-panel-header h2 {
        font-size: 20px;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .standard-kicker {
        color: rgba(226, 222, 205, .58);
        letter-spacing: .05em;
    }

    .standard-panel-body {
        padding: 14px;
    }

    .standard-metric-grid {
        gap: 10px;
    }

    .standard-metric-grid.is-five,
    .standard-metric-grid.is-four,
    .standard-metric-grid.is-three,
    .standard-metric-grid.is-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .standard-metric-card {
        min-height: 84px;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding: 13px 12px;
        border-color: rgba(125, 151, 178, .18);
        border-radius: var(--mobile-card-radius);
        background: linear-gradient(180deg, rgba(18, 26, 30, .92), rgba(8, 12, 14, .96));
    }

    .metric-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        border-color: rgba(125, 151, 178, .22);
    }

    .metric-value {
        font-size: clamp(20px, 6vw, 28px);
        line-height: 1;
    }

    .metric-label {
        margin-top: 6px;
        font-size: 10px;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .standard-sidebar,
    .standard-sidebar.left-drawer,
    .left-drawer {
        width: min(92vw, 372px);
        max-width: 372px;
        border-right-color: rgba(125, 151, 178, .22);
        background: linear-gradient(180deg, rgba(13, 20, 24, .995), rgba(7, 10, 12, .995));
        box-shadow: 22px 0 48px rgba(0, 0, 0, .46);
    }

    #navDrawer.standard-sidebar,
    #navDrawer.standard-sidebar.left-drawer {
        width: 100vw;
        max-width: none;
        border-right-width: 0;
    }

    .standard-sidebar-inner {
        padding: 12px;
    }

    .standard-sidebar-brand {
        min-height: 58px;
        border-bottom-color: rgba(125, 151, 178, .18);
    }

    .standard-sidebar-brand-button .brand-mark {
        border-radius: 9px;
    }

    .standard-nav .nav-link,
    .standard-nav summary {
        min-height: 46px;
        border-radius: 9px;
        border-color: rgba(125, 151, 178, .14);
    }

    .standard-nav .nav-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .drawer-backdrop.is-visible {
        opacity: .72;
        backdrop-filter: blur(5px);
    }

    .side-panel,
    .side-panel.large-width,
    .side-panel.standard-wide-drawer,
    .side-panel.standard-narrow-drawer,
    .side-panel.standard-fullscreen-drawer {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        border-left: 0;
        background: linear-gradient(180deg, rgba(12, 18, 21, .995), rgba(7, 10, 12, 1));
    }

    .drawer-inner.standard-drawer,
    .standard-drawer {
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }

    .standard-drawer-header {
        position: sticky;
        top: 0;
        z-index: 4;
        min-height: 72px;
        padding: 16px 14px 12px;
        background: linear-gradient(180deg, rgba(15, 22, 25, .995), rgba(10, 14, 16, .985));
        border-bottom-color: rgba(125, 151, 178, .18);
    }

    .standard-drawer-header h2,
    .standard-drawer-title {
        font-size: 22px;
        letter-spacing: .02em;
    }

    .standard-drawer-close {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        border-radius: 9px;
    }

    .standard-drawer-body {
        padding: 14px;
        overflow-x: hidden;
    }

    .standard-drawer-actions,
    .drawer-actions {
        position: sticky;
        bottom: 0;
        z-index: 4;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(10, 14, 16, .92), rgba(7, 10, 12, .995));
        border-top: 1px solid rgba(125, 151, 178, .18);
    }

    .standard-drawer-actions .btn,
    .drawer-actions .btn {
        flex: 1 1 120px;
        min-height: 44px;
    }

    .standard-table-scroll,
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lifehud-tier-warning,
    .standard-alert {
        border-radius: var(--mobile-card-radius);
    }

    .lifehud-ad-panel {
        border-style: dashed;
        border-color: rgba(215, 123, 110, .34);
    }

    .lifehud-ad-slot {
        min-height: 86px;
        border-radius: 8px;
    }
}

@media (max-width: 390px) {
    .standard-page-content,
    .page-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .standard-topbar-brand .brand-name {
        max-width: 38vw;
        font-size: 24px;
    }

    .standard-metric-grid.is-five,
    .standard-metric-grid.is-four,
    .standard-metric-grid.is-three,
    .standard-metric-grid.is-two {
        grid-template-columns: 1fr;
    }
}

.desktop-action-label { display: inline; }
.mobile-action-label { display: none; }

@media (max-width: 768px) {
    .desktop-action-label { display: none !important; }
    .mobile-action-label { display: inline !important; }

    .mobile-command-card,
    .mobile-card,
    .mobile-filter-card {
        border: 1px solid var(--mobile-card-border);
        border-radius: var(--mobile-card-radius);
        background: var(--mobile-panel-bg);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .024), 0 14px 28px rgba(0, 0, 0, .22);
        overflow: hidden;
    }

    .mobile-card-header {
        min-height: 52px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(125, 151, 178, .16);
        background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.006));
    }

    .mobile-eyebrow {
        margin: 0 0 5px;
        color: rgba(120, 173, 240, .84);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

    .mobile-compact-action {
        min-height: 38px;
        padding: 8px 10px;
        border-radius: 9px;
        font-size: 10px;
        letter-spacing: .10em;
        white-space: nowrap;
    }

    .mobile-action-strip {
        display: flex;
        align-items: stretch;
        gap: 5px;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .mobile-action-strip > * {
        flex: 1 1 0;
        min-width: 0;
    }

    .mobile-action-strip .btn,
    .mobile-action-strip button,
    .mobile-action-strip a {
        width: 100%;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
    }

    .mobile-kpi-strip.standard-metric-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        min-width: 0;
    }

    .mobile-stat-strip {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        min-width: 0;
    }

    .mobile-stat-strip.is-four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mobile-kpi-strip .standard-metric-card {
        min-height: 76px;
        grid-template-columns: 1fr;
        justify-items: center;
        align-content: center;
        gap: 5px;
        padding: 9px 5px;
        text-align: center;
    }

    .mobile-kpi-strip .metric-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .mobile-kpi-strip .metric-value {
        font-size: clamp(15px, 4.4vw, 20px);
        line-height: 1;
    }

    .mobile-kpi-strip .metric-label {
        max-width: 100%;
        overflow: hidden;
        color: rgba(226, 222, 205, .62);
        font-size: 8px;
        line-height: 1.15;
        letter-spacing: .07em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .mobile-filter-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        gap: 8px;
        padding: 10px;
        align-items: end;
    }

    .mobile-filter-field {
        display: grid;
        gap: 5px;
        min-width: 0;
    }

    .mobile-filter-field > span {
        color: rgba(226, 222, 205, .60);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .mobile-filter-field select,
    .mobile-filter-field input {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 8px 28px 8px 10px;
        border: 1px solid rgba(125, 151, 178, .22);
        border-radius: 9px;
        background: rgba(4, 8, 10, .72);
        color: #eef1ed;
        font: inherit;
        font-size: 12px;
        font-weight: 750;
    }

    .mobile-filter-submit {
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 9px;
        font-size: 10px;
        letter-spacing: .10em;
        white-space: nowrap;
    }

    .mobile-list-stack {
        display: grid;
        gap: 9px;
    }
}

@media (max-width: 430px) {
    .mobile-filter-card {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-filter-submit {
        grid-column: 1 / -1;
    }

    .mobile-kpi-strip.standard-metric-grid {
        gap: 4px;
    }
}

/* Mobile focus-view utilities. Kept generic so module pages can reuse them. */
@media (max-width: 768px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .standard-page-wrap,
    .standard-main,
    .standard-page-content,
    .standard-page-content > [data-page] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    .mobile-view-action-row {
        display: flex;
        align-items: stretch;
        gap: 7px;
        width: 100%;
        min-width: 0;
    }

    .mobile-view-action-row > form,
    .mobile-view-action-row > button,
    .mobile-view-action-row > a {
        flex: 1 1 0;
        min-width: 0;
    }

    .mobile-view-action-row .btn,
    .mobile-view-action-row button,
    .mobile-view-action-row a {
        width: 100%;
        min-height: 42px;
        justify-content: center;
        border-radius: var(--mobile-card-radius, 10px);
        white-space: nowrap;
    }

    .mobile-date-status-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 6px 10px;
        border: 1px solid rgba(125, 151, 178, .22);
        border-radius: var(--mobile-card-radius, 10px);
        background: rgba(4, 8, 10, .70);
        color: rgba(226, 222, 205, .78);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .12em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .mobile-date-status-chip.is-partial {
        border-color: rgba(215, 161, 78, .44);
        background: rgba(215, 161, 78, .10);
        color: var(--mobile-gold, #d7a14e);
    }

    .mobile-date-status-chip.is-filled {
        border-color: rgba(143, 202, 116, .44);
        background: rgba(143, 202, 116, .11);
        color: var(--mobile-green, #8fca74);
    }

    .mobile-date-status-rail {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        min-width: 0;
    }

    .mobile-date-status-pill {
        display: grid;
        place-items: center;
        gap: 2px;
        min-height: 50px;
        padding: 6px 3px;
        border: 1px solid rgba(125, 151, 178, .18);
        border-radius: var(--mobile-card-radius, 10px);
        background: rgba(0, 0, 0, .42);
        color: rgba(226, 222, 205, .70);
        text-decoration: none;
    }

    .mobile-date-status-pill span {
        font-size: 8px;
        font-weight: 850;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .mobile-date-status-pill strong {
        color: #eef1ed;
        font-size: 17px;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .mobile-date-status-pill.is-partial {
        border-color: rgba(215, 161, 78, .42);
        background: rgba(215, 161, 78, .105);
    }

    .mobile-date-status-pill.is-filled {
        border-color: rgba(143, 202, 116, .42);
        background: rgba(143, 202, 116, .11);
    }

    .mobile-date-status-pill.is-selected {
        border-color: rgba(120, 173, 240, .58);
        box-shadow: inset 0 0 0 1px rgba(120, 173, 240, .16), 0 0 0 1px rgba(120, 173, 240, .06);
    }
}

/* M5 mobile scroll authority: keep mobile pages document-scrolled, not viewport-locked. */
@media (max-width: 768px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .standard-app-shell,
    .app-shell,
    .standard-page-wrap,
    .page-wrap,
    .standard-page-content,
    .page-content,
    .standard-page-content > [data-page],
    .page-content > [data-page] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    .standard-page-content,
    .page-content {
        overflow-x: hidden !important;
        touch-action: pan-y;
    }
}

/* M6: keep mobile pages on normal document scrolling. Some desktop/mobile emulation
   combinations fire wheel events without moving the viewport unless the root scroller
   is explicitly allowed to handle vertical chaining. */
@media (max-width: 768px) {
    html,
    body {
        overscroll-behavior-y: auto !important;
        scroll-behavior: auto !important;
        touch-action: pan-y;
    }

    body:not(.has-open-drawer):not(.drawer-open):not(.modal-open) {
        overflow-y: auto !important;
    }

    #mealPlannerPage,
    #mealPlannerPage .mobile-meal-planner,
    #mealPlannerPage .mobile-meal-focused-shell,
    #mealPlannerPage .mobile-meal-stack {
        overscroll-behavior-y: auto !important;
        touch-action: pan-y;
    }
}

/* M8: align mobile presentation colors with the existing desktop LifeHUD palette. */
@media (max-width: 768px) {
    :root {
        --mobile-card-radius: 10px;
        --mobile-card-border: var(--border, rgba(207,197,151,.18));
        --mobile-card-border-warm: var(--border-strong, rgba(207,197,151,.28));
        --mobile-panel-bg: linear-gradient(180deg, color-mix(in srgb, var(--panel, #151918) 94%, transparent), color-mix(in srgb, var(--panel-2, #0e1111) 98%, transparent));
        --mobile-panel-bg-soft: linear-gradient(180deg, color-mix(in srgb, var(--panel-3, #1a1f1d) 78%, var(--panel, #151918)), color-mix(in srgb, var(--panel-2, #0e1111) 96%, transparent));
        --mobile-blue: var(--accent-2, #d0c287);
        --mobile-green: var(--success, #7e9f69);
        --mobile-gold: #b9894f;
        --mobile-red: var(--danger, #b36a5f);
    }

    html,
    body {
        background:
            radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--accent, #a9a15f) 10%, transparent), transparent 36%),
            linear-gradient(180deg, var(--bg, #080a0a) 0%, var(--bg-2, #0d1111) 54%, var(--bg, #080a0a) 100%);
        color: var(--text, #ddd9c9);
    }

    .standard-topbar,
    .topbar {
        border-bottom-color: var(--border, rgba(207,197,151,.14));
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--panel, #151918) 96%, transparent), color-mix(in srgb, var(--panel-2, #0e1111) 97%, transparent)),
            radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent, #a9a15f) 8%, transparent), transparent 36%);
    }

    .standard-menu-btn,
    .menu-btn,
    .standard-topbar-action,
    .topbar-action {
        border-color: var(--border-strong, rgba(207,197,151,.28));
        color: var(--accent-2, #d0c287);
        background: color-mix(in srgb, var(--panel-3, #1a1f1d) 72%, transparent);
    }

    .mobile-card,
    .mobile-command-card,
    .mobile-filter-card,
    .mobile-stat-card {
        border-color: var(--mobile-card-border);
        background: var(--mobile-panel-bg);
        color: var(--text, #ddd9c9);
    }

    .mobile-card-header,
    .mobile-eyebrow,
    .mobile-muted {
        color: var(--muted, #a39b7c);
    }

    .mobile-card-header strong,
    .mobile-card-header h2,
    .mobile-card-header h3,
    .mobile-kpi-number {
        color: var(--text, #ddd9c9);
    }
}

/* Mobile standard focus-page components used after the Meal Planner pass. */
@media (max-width: 768px) {
    .mobile-focused-shell {
        width: 100%;
        min-width: 0;
        gap: 10px;
    }

    .mobile-card-stack {
        display: grid;
        gap: 10px;
        width: 100%;
        min-width: 0;
    }

    .mobile-info-card {
        border: 1px solid var(--mobile-card-border);
        border-radius: var(--mobile-card-radius);
        background: var(--mobile-panel-bg);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .024), 0 14px 28px rgba(0, 0, 0, .22);
        overflow: hidden;
    }

    .mobile-info-card-head {
        min-height: 50px;
        padding: 11px 12px;
        border-bottom: 1px solid rgba(207,197,151,.11);
        background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.004));
    }

    .mobile-info-card-head h2,
    .mobile-info-card-head h3 {
        margin: 0;
        color: var(--text, #ddd9c9);
        font-size: 17px;
        line-height: 1.05;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

    .mobile-empty-state {
        margin: 0;
        padding: 12px;
        color: var(--muted, #a39b7c);
        font-size: 11px;
        line-height: 1.45;
    }
}

/* M10: shared mobile focus header and scroll standard. Keep the Meal Planner
   header treatment as the reusable pattern for mobile module pages. */
@media (max-width: 768px) {
    html,
    body {
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        scroll-behavior: auto !important;
        touch-action: pan-y;
    }

    body:not(.has-open-drawer):not(.drawer-open):not(.modal-open),
    body:not(.has-open-drawer):not(.drawer-open):not(.modal-open) .standard-page-wrap,
    body:not(.has-open-drawer):not(.drawer-open):not(.modal-open) .page-wrap,
    body:not(.has-open-drawer):not(.drawer-open):not(.modal-open) .standard-page-content,
    body:not(.has-open-drawer):not(.drawer-open):not(.modal-open) .page-content,
    body:not(.has-open-drawer):not(.drawer-open):not(.modal-open) .standard-page-content > [data-page],
    body:not(.has-open-drawer):not(.drawer-open):not(.modal-open) .page-content > [data-page] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        overscroll-behavior-y: auto !important;
    }

    .mobile-focused-shell,
    .mobile-card-stack,
    .mobile-card,
    .mobile-info-card,
    .mobile-filter-card,
    .mobile-command-card,
    .mobile-list-stack {
        overscroll-behavior-y: auto !important;
        touch-action: pan-y;
    }

    .mobile-focused-user-card {
        overflow: hidden;
    }

    .mobile-focused-user-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 58px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(207,197,151,.11);
        background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.004));
    }

    .mobile-focused-user-head > div {
        min-width: 0;
    }

    .mobile-focused-user-head h2,
    .mobile-focused-user-head h3 {
        margin: 0;
        color: var(--text, #ddd9c9);
        font-size: 17px;
        line-height: 1.05;
        letter-spacing: .055em;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-focused-user-head span {
        display: block;
        margin-top: 4px;
        color: var(--muted, #a39b7c);
        font-size: 11px;
        letter-spacing: .035em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-focused-kpi-strip {
        padding: 10px;
        border-top: 0;
        background: color-mix(in srgb, var(--panel-2, #0e1111) 70%, transparent);
    }
}


/* M21 canonical mobile module schema.
   Meal Planner is the visual source of truth. Food/ingredient/grocery pages
   inherit these rules instead of carrying their own competing mobile layouts. */
@media (max-width: 768px) {
    #mealPlannerPage,
    .mobile-library-page {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    }

    .standard-page-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-height: 58px !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 1px solid var(--lhm-border) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.022), 0 12px 24px rgba(0,0,0,.22) !important;
    }

    .standard-title-block {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        align-self: stretch !important;
        display: flex !important;
        align-items: center !important;
    }

    .standard-title-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 10px !important;
    }

    .standard-title-icon {
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        border: 1px solid color-mix(in srgb, var(--lhm-accent) 32%, transparent) !important;
        border-radius: var(--lhm-radius) !important;
        background: color-mix(in srgb, var(--lhm-accent) 9%, var(--lhm-panel-soft)) !important;
        color: var(--lhm-accent) !important;
        font-size: 14px !important;
    }

    .standard-title-row h1 {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: clamp(24px, 7.2vw, 30px) !important;
        font-weight: 900 !important;
        line-height: .98 !important;
        letter-spacing: .035em !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .standard-page-actions,
    .grocery-page-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin: 0 0 0 auto !important;
        align-self: stretch !important;
        padding: 10px 10px 10px 0 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    #mealPlannerPage .planner-week-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 0 0 auto !important;
        align-self: stretch !important;
        padding: 10px 10px 10px 0 !important;
        overflow: visible !important;
    }

    .planner-week-actions > .standard-icon-btn,
    .standard-page-actions > .standard-icon-btn,
    .grocery-page-actions > .standard-icon-btn {
        display: inline-grid !important;
        place-items: center !important;
        position: static !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border: 1px solid var(--lhm-border-strong) !important;
        border-radius: var(--lhm-radius) !important;
        background: color-mix(in srgb, var(--panel-3, #1a211f) 72%, #080a0a) !important;
        color: var(--lhm-text) !important;
        font-size: 13px !important;
    }

    #mealPlannerPage .planner-metric-grid,
    #mealPlannerPage #plannerChartSection {
        display: none !important;
    }

    #mealPlannerPage #plannerCalendarSection {
        display: none !important;
    }

    .mobile-meal-planner {
        display: grid !important;
        gap: 8px !important;
        padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-filter-card,
    .mobile-meal-filter-form,
    .mobile-library-page .standard-filter-bar.is-library-filter,
    .mobile-library-page .grocery-filter-bar,
    .mobile-library-page .grocery-panel-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid var(--lhm-border) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-panel-soft) !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .mobile-library-page .standard-filter-bar.is-library-filter {
        grid-template-columns: minmax(0, 1fr) minmax(92px, .58fr) 38px 38px !important;
    }

    .mobile-filter-card label,
    .mobile-library-page .standard-filter-bar.is-library-filter label,
    .mobile-library-page .grocery-filter-bar label {
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: var(--lhm-accent) !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
    }

    .mobile-filter-card input,
    .mobile-filter-card select,
    .mobile-library-page .standard-filter-bar.is-library-filter input,
    .mobile-library-page .standard-filter-bar.is-library-filter select,
    .mobile-library-page .grocery-filter-bar input,
    .mobile-library-page .grocery-filter-bar select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 7px 8px !important;
        border: 1px solid var(--lhm-border) !important;
        border-radius: calc(var(--lhm-radius) - 2px) !important;
        background: rgba(0,0,0,.38) !important;
        color: var(--lhm-text) !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: .02em !important;
    }

    .mobile-library-page .standard-filter-bar.is-library-filter .standard-input-with-icon input {
        padding-left: 28px !important;
    }

    .mobile-view-action-row,
    .mobile-action-strip {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    .mobile-view-action-row .btn,
    .mobile-action-strip .btn {
        width: 100% !important;
        min-height: 34px !important;
        height: 34px !important;
        border-radius: var(--lhm-radius) !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        letter-spacing: .07em !important;
        text-transform: uppercase !important;
    }

    #mealPlannerPage .mobile-meal-user-card,
    #mealPlannerPage .mobile-meal-day-card,
    .mobile-library-page .standard-library-panel,
    .mobile-library-page .grocery-panel {
        overflow: hidden !important;
        border: 1px solid var(--lhm-border) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 14px 28px rgba(0,0,0,.24) !important;
    }

    #mealPlannerPage .mobile-meal-user-head,
    #mealPlannerPage .mobile-meal-day-head,
    .mobile-library-page .standard-panel-header,
    .mobile-library-page .grocery-header-row,
    .mobile-library-panel-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-height: 54px !important;
        padding: 10px 12px !important;
        border-bottom: 1px solid rgba(207,197,151,.10) !important;
        background: var(--lhm-panel-soft) !important;
        background-image: none !important;
    }

    #mealPlannerPage .mobile-meal-eyebrow,
    .mobile-library-page .standard-panel-header .standard-muted,
    .mobile-library-page .grocery-header-row .standard-muted {
        margin: 0 0 4px !important;
        color: var(--lhm-accent) !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
    }

    #mealPlannerPage .mobile-meal-user-head h3,
    .mobile-library-page .standard-panel-header h2,
    .mobile-library-page .grocery-header-row h2 {
        margin: 0 !important;
        color: var(--lhm-text) !important;
        font-size: clamp(18px, 5.6vw, 23px) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .05em !important;
        text-transform: uppercase !important;
    }

    #mealPlannerPage .mobile-meal-user-pill {
        flex: 0 0 auto !important;
        padding: 5px 8px !important;
        border-radius: calc(var(--lhm-radius) - 1px) !important;
        border: 1px solid color-mix(in srgb, var(--lhm-green) 36%, transparent) !important;
        background: color-mix(in srgb, var(--lhm-green) 14%, transparent) !important;
        color: var(--lhm-green) !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }

    .mobile-library-page .standard-panel-body,
    .mobile-library-page .grocery-panel-body {
        padding: 8px !important;
    }

    #mealPlannerPage .mobile-meal-macro-grid,
    .mobile-library-page > .mobile-kpi-strip,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    #mealPlannerPage .mobile-meal-user-head + .mobile-meal-macro-grid {
        margin: 0 !important;
        padding: 10px 10px 0 !important;
    }

    #mealPlannerPage .mobile-meal-macro-card,
    .mobile-library-page .mobile-kpi-strip .standard-metric-card,
    .mobile-library-page .grocery-metric-grid .standard-metric-card {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-content: center !important;
        justify-items: start !important;
        gap: 3px 4px !important;
        min-width: 0 !important;
        min-height: 64px !important;
        padding: 8px 7px 7px !important;
        overflow: hidden !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 3px solid var(--mobile-card-accent, var(--lhm-accent)) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.016), 0 8px 16px rgba(0,0,0,.14) !important;
        text-align: left !important;
    }

    #mealPlannerPage .mobile-meal-macro-card::after,
    .mobile-library-page .mobile-kpi-strip .standard-metric-card::after,
    .mobile-library-page .grocery-metric-grid .standard-metric-card::after {
        display: none !important;
        content: none !important;
    }

    #mealPlannerPage .mobile-meal-macro-card.tone-orange,
    .mobile-library-page .metric-card-orange { --mobile-card-accent: var(--lhm-orange); }
    #mealPlannerPage .mobile-meal-macro-card.tone-green,
    .mobile-library-page .metric-card-green { --mobile-card-accent: var(--lhm-green); }
    #mealPlannerPage .mobile-meal-macro-card.tone-blue,
    .mobile-library-page .metric-card-blue { --mobile-card-accent: var(--lhm-accent); }
    #mealPlannerPage .mobile-meal-macro-card.tone-gold,
    .mobile-library-page .metric-card-olive,
    .mobile-library-page .metric-card-yellow { --mobile-card-accent: var(--lhm-orange); }
    .mobile-library-page .metric-card-red { --mobile-card-accent: var(--lhm-red); }

    #mealPlannerPage .mobile-meal-macro-head {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        color: var(--mobile-card-accent, var(--lhm-accent)) !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .07em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #mealPlannerPage .mobile-meal-macro-head i {
        color: var(--mobile-card-accent, var(--lhm-accent)) !important;
        font-size: 9px !important;
    }

    .mobile-library-page .mobile-kpi-strip .standard-metric-card > div,
    .mobile-library-page .grocery-metric-grid .standard-metric-card > div {
        display: contents !important;
    }

    .mobile-library-page .mobile-kpi-strip .metric-icon,
    .mobile-library-page .grocery-metric-grid .metric-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 12px !important;
        min-width: 12px !important;
        height: 12px !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--mobile-card-accent, var(--lhm-accent)) !important;
        font-size: 9px !important;
    }

    .mobile-library-page .mobile-kpi-strip .metric-label,
    .mobile-library-page .grocery-metric-grid .metric-label {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 6.8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .06em !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #mealPlannerPage .mobile-meal-macro-card strong,
    .mobile-library-page .mobile-kpi-strip .metric-value,
    .mobile-library-page .grocery-metric-grid .metric-value {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        margin: 4px 0 0 !important;
        color: var(--lhm-text) !important;
        font-size: clamp(16px, 4.8vw, 21px) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .025em !important;
        text-align: center !important;
        font-variant-numeric: tabular-nums !important;
    }

    #mealPlannerPage .mobile-meal-macro-card small,
    #mealPlannerPage .mobile-meal-macro-card em,
    #mealPlannerPage .mobile-meal-progress {
        display: none !important;
    }

    .mobile-library-page .mobile-kpi-strip > .standard-metric-card:nth-child(n+5),
    .mobile-library-page .grocery-metric-grid.mobile-kpi-strip > .standard-metric-card:nth-child(n+5) {
        display: none !important;
    }

    #mealPlannerPage .mobile-meal-day-stack {
        padding: 10px !important;
    }

    #mealPlannerPage .mobile-meal-slot-list,
    .mobile-list-stack {
        display: grid !important;
        gap: 8px !important;
    }

    #mealPlannerPage .mobile-meal-slot-card {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 74px !important;
        width: 100% !important;
        padding: 0 !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 3px solid var(--mobile-slot-accent, var(--lhm-accent)) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.015) !important;
        color: var(--lhm-text) !important;
        text-align: left !important;
    }

    #mealPlannerPage .mobile-meal-slot-card.is-breakfast { --mobile-slot-accent: var(--lhm-orange); }
    #mealPlannerPage .mobile-meal-slot-card.is-lunch { --mobile-slot-accent: var(--lhm-green); }
    #mealPlannerPage .mobile-meal-slot-card.is-dinner { --mobile-slot-accent: var(--lhm-accent); }
    #mealPlannerPage .mobile-meal-slot-card.is-snack { --mobile-slot-accent: var(--lhm-blue); }
    #mealPlannerPage .mobile-meal-slot-card.is-additional { --mobile-slot-accent: var(--lhm-orange); }

    #mealPlannerPage .mobile-meal-slot-icon {
        display: inline-grid !important;
        place-items: center !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        border: 1px solid var(--lhm-border) !important;
        border-radius: calc(var(--lhm-radius) - 2px) !important;
        background: color-mix(in srgb, var(--mobile-slot-accent, var(--lhm-accent)) 8%, transparent) !important;
        color: var(--mobile-slot-accent, var(--lhm-accent)) !important;
        font-size: 13px !important;
    }

    #mealPlannerPage .mobile-meal-slot-copy {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    #mealPlannerPage .mobile-meal-slot-label {
        color: var(--mobile-slot-accent, var(--lhm-accent)) !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .11em !important;
        text-transform: uppercase !important;
    }

    #mealPlannerPage .mobile-meal-slot-copy strong {
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    #mealPlannerPage .mobile-meal-slot-copy small,
    #mealPlannerPage .mobile-meal-slot-nutrition {
        color: var(--lhm-muted) !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    #mealPlannerPage .mobile-meal-chevron,
    #mealPlannerPage .mobile-meal-side-add {
        display: inline-grid !important;
        place-items: center !important;
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        border: 1px solid color-mix(in srgb, var(--lhm-green) 36%, transparent) !important;
        border-radius: calc(var(--lhm-radius) - 2px) !important;
        background: color-mix(in srgb, var(--lhm-green) 14%, transparent) !important;
        color: var(--lhm-text) !important;
        font-size: 13px !important;
    }

    .mobile-table-cards {
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mobile-table-cards .standard-table,
    .mobile-table-cards .standard-table thead,
    .mobile-table-cards .standard-table tbody,
    .mobile-table-cards .standard-table tr,
    .mobile-table-cards .standard-table th,
    .mobile-table-cards .standard-table td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        border: 0 !important;
    }

    .mobile-table-cards .standard-table {
        width: 100% !important;
        table-layout: auto !important;
        border-collapse: separate !important;
    }

    .mobile-table-cards .standard-table thead {
        display: none !important;
    }

    .mobile-table-cards .standard-table tbody {
        display: grid !important;
        gap: 5px !important;
    }

    .mobile-table-cards .standard-table tr {
        display: grid !important;
        align-items: center !important;
        gap: 5px !important;
        min-height: 52px !important;
        padding: 6px 6px 6px 8px !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 1px solid var(--lhm-border) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.015) !important;
    }

    .mobile-ingredients-table-cards .standard-table tr,
    .mobile-meals-table-cards .standard-table tr {
        grid-template-columns: minmax(0, 1fr) 38px 38px 30px 40px !important;
    }

    .mobile-grocery-recommended-cards .standard-table tr {
        grid-template-columns: minmax(0, 1fr) 58px 38px !important;
    }

    .mobile-grocery-manual-cards .standard-table tr {
        grid-template-columns: 30px minmax(0, 1fr) 38px 36px 34px !important;
    }

    .mobile-table-cards .standard-table td {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        padding: 0 !important;
        color: var(--lhm-text) !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .mobile-table-cards .standard-table td.mobile-card-title {
        overflow: hidden !important;
    }

    .mobile-table-cards .standard-row-title {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .mobile-table-cards .standard-row-title strong {
        display: block !important;
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1.05 !important;
        letter-spacing: .025em !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .mobile-table-cards .standard-row-title span,
    .mobile-table-cards .meal-missing-reasons,
    .mobile-table-cards .standard-chip-row,
    .mobile-table-cards .standard-status-chip,
    .mobile-table-cards td[data-mobile-label="Brand"],
    .mobile-table-cards td[data-mobile-label="Scope"],
    .mobile-table-cards td[data-mobile-label="Type"],
    .mobile-table-cards td[data-mobile-label="Serv"],
    .mobile-table-cards td[data-mobile-label="Source"],
    .mobile-table-cards td[data-mobile-label="Status"] {
        display: none !important;
    }

    .mobile-table-cards td[data-mobile-label="Cal"]::before,
    .mobile-table-cards td[data-mobile-label="Pro"]::before,
    .mobile-table-cards td[data-mobile-label="Qty"]::before,
    .mobile-table-cards td[data-mobile-label="Unit"]::before {
        display: none !important;
        content: none !important;
    }

    .mobile-table-cards .number-cell,
    .mobile-table-cards td[data-mobile-label="Cal"],
    .mobile-table-cards td[data-mobile-label="Pro"],
    .mobile-table-cards td[data-mobile-label="Qty"],
    .mobile-table-cards td[data-mobile-label="Unit"] {
        justify-content: center !important;
        color: var(--lhm-muted) !important;
        font-size: 9px !important;
        text-align: center !important;
        font-variant-numeric: tabular-nums !important;
    }

    .mobile-table-cards .mobile-card-favorite-cell,
    .mobile-table-cards .mobile-card-action-cell,
    .mobile-table-cards .mobile-card-check-cell,
    .mobile-table-cards .center-cell {
        justify-content: center !important;
    }

    .mobile-table-cards .standard-row-actions,
    .mobile-table-cards .inline-form,
    .mobile-table-cards .table-action-form,
    .mobile-table-cards .favorite-toggle-form {
        width: 100% !important;
        margin: 0 !important;
    }

    .mobile-table-cards .standard-row-action-btn,
    .mobile-table-cards .btn {
        display: inline-grid !important;
        place-items: center !important;
        width: 100% !important;
        min-height: 28px !important;
        height: 28px !important;
        padding: 4px 5px !important;
        border-radius: calc(var(--lhm-radius) - 2px) !important;
        font-size: 7px !important;
        line-height: 1 !important;
        letter-spacing: .04em !important;
    }

    .mobile-table-cards .standard-favorite-btn,
    .mobile-table-cards .standard-favorite-static {
        display: inline-grid !important;
        place-items: center !important;
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        min-height: 26px !important;
        border-radius: calc(var(--lhm-radius) - 3px) !important;
    }

    #groceryListPage .grocery-page-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #groceryListPage .grocery-recommended-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin-left: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #groceryListPage .grocery-recommended-actions .standard-chip {
        display: none !important;
    }
}

/* M24 canonical compact mobile schema.
   This is the shared mobile source of truth for the focused food/planner pages. */
.mobile-library-search-panel {
    display: none !important;
}

@media (max-width: 768px) {
    /* Shared title card + panel reset: flat desktop palette, no mobile gradients. */
    .standard-page-header,
    .standard-panel,
    .standard-library-panel,
    .grocery-panel,
    .mobile-card,
    #mealPlannerPage .mobile-meal-user-card,
    #mealPlannerPage .mobile-meal-day-card {
        border-left: 1px solid var(--lhm-border) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
    }

    .standard-page-header::before,
    .standard-page-header::after,
    .standard-panel::before,
    .standard-panel::after,
    .standard-library-panel::before,
    .standard-library-panel::after,
    .grocery-panel::before,
    .grocery-panel::after,
    .mobile-card::before,
    .mobile-card::after {
        display: none !important;
        content: none !important;
    }

    .standard-title-row {
        padding: 10px !important;
    }

    .standard-page-actions,
    .grocery-page-actions,
    #mealPlannerPage .planner-week-actions {
        align-items: center !important;
        padding: 10px 10px 10px 0 !important;
    }

    /* Shared KPI cards: four compact cards directly under the page title/header. */
    .mobile-kpi-strip,
    .mobile-meal-macro-grid,
    .grocery-metric-grid.mobile-kpi-strip {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    #mealPlannerPage .mobile-meal-user-head + .mobile-meal-macro-grid {
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    .mobile-kpi-strip > .standard-metric-card,
    .grocery-metric-grid.mobile-kpi-strip > .standard-metric-card,
    #mealPlannerPage .mobile-meal-macro-card {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 13px minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        align-content: center !important;
        align-items: center !important;
        justify-items: start !important;
        gap: 4px 4px !important;
        min-width: 0 !important;
        min-height: 58px !important;
        padding: 7px 6px 7px 8px !important;
        overflow: hidden !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 3px solid var(--mobile-card-accent, var(--lhm-accent)) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.016), 0 6px 12px rgba(0,0,0,.12) !important;
        text-align: left !important;
    }

    .mobile-kpi-strip > .standard-metric-card::before,
    .mobile-kpi-strip > .standard-metric-card::after,
    #mealPlannerPage .mobile-meal-macro-card::before,
    #mealPlannerPage .mobile-meal-macro-card::after {
        display: none !important;
        content: none !important;
    }

    .mobile-kpi-strip > .standard-metric-card > div,
    .grocery-metric-grid.mobile-kpi-strip > .standard-metric-card > div {
        display: contents !important;
    }

    .mobile-kpi-strip .metric-icon,
    .grocery-metric-grid.mobile-kpi-strip .metric-icon,
    #mealPlannerPage .mobile-meal-macro-head i {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 13px !important;
        min-width: 13px !important;
        height: 13px !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--mobile-card-accent, var(--lhm-accent)) !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    .mobile-kpi-strip .metric-label,
    .grocery-metric-grid.mobile-kpi-strip .metric-label,
    #mealPlannerPage .mobile-meal-macro-head {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 6.9px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .055em !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #mealPlannerPage .mobile-meal-macro-head {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        color: var(--lhm-muted) !important;
    }

    #mealPlannerPage .mobile-meal-macro-head i {
        position: static !important;
        flex: 0 0 13px !important;
    }

    .mobile-kpi-strip .metric-value,
    .grocery-metric-grid.mobile-kpi-strip .metric-value,
    #mealPlannerPage .mobile-meal-macro-card strong {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        align-self: center !important;
        max-width: 100% !important;
        margin: 2px 0 0 !important;
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: clamp(15px, 4.6vw, 20px) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .02em !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums !important;
    }

    #mealPlannerPage .mobile-meal-macro-card small,
    #mealPlannerPage .mobile-meal-macro-card em,
    #mealPlannerPage .mobile-meal-progress {
        display: none !important;
    }

    .metric-card-orange,
    #mealPlannerPage .mobile-meal-macro-card.tone-orange { --mobile-card-accent: var(--lhm-orange); }
    .metric-card-green,
    #mealPlannerPage .mobile-meal-macro-card.tone-green { --mobile-card-accent: var(--lhm-green); }
    .metric-card-blue,
    #mealPlannerPage .mobile-meal-macro-card.tone-blue { --mobile-card-accent: var(--lhm-accent); }
    .metric-card-yellow,
    .metric-card-olive,
    #mealPlannerPage .mobile-meal-macro-card.tone-gold { --mobile-card-accent: var(--lhm-orange); }
    .metric-card-red { --mobile-card-accent: var(--lhm-red); }

    /* Search/filter sits outside the content panel on mobile. */
    .mobile-library-search-panel {
        display: grid !important;
    }

    .mobile-library-page .library-filter-panel-body {
        display: none !important;
    }

    .mobile-filter-card,
    .mobile-meal-filter-form,
    .mobile-library-search-panel,
    .mobile-library-page .grocery-filter-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(90px, .55fr) 34px 34px !important;
        gap: 5px !important;
        margin: 0 0 8px !important;
        padding: 6px !important;
        border: 1px solid var(--lhm-border) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .mobile-meal-filter-form {
        grid-template-columns: minmax(0, 1fr) minmax(104px, .68fr) 34px !important;
    }

    .mobile-filter-card label,
    .mobile-library-search-panel label,
    .mobile-library-page .grocery-filter-bar label {
        gap: 3px !important;
        font-size: 7.5px !important;
        letter-spacing: .11em !important;
    }

    .mobile-filter-card input,
    .mobile-filter-card select,
    .mobile-library-search-panel input,
    .mobile-library-search-panel select,
    .mobile-library-page .grocery-filter-bar input,
    .mobile-library-page .grocery-filter-bar select {
        min-height: 30px !important;
        height: 30px !important;
        padding: 6px 7px !important;
        font-size: 9px !important;
    }

    .mobile-library-search-panel .standard-input-with-icon input {
        padding-left: 26px !important;
    }

    /* Shared content panel treatment. */
    #mealPlannerPage .mobile-meal-user-card,
    #mealPlannerPage .mobile-meal-day-card,
    .mobile-library-page .standard-library-panel,
    .mobile-library-page .grocery-panel {
        overflow: hidden !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 1px solid var(--lhm-border) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 10px 20px rgba(0,0,0,.18) !important;
    }

    #mealPlannerPage .mobile-meal-user-head,
    #mealPlannerPage .mobile-meal-day-head,
    .mobile-library-page .standard-panel-header,
    .mobile-library-page .grocery-header-row,
    .mobile-library-panel-header {
        min-height: 46px !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid rgba(207,197,151,.10) !important;
        background: var(--lhm-panel-soft) !important;
        background-image: none !important;
    }

    #mealPlannerPage .mobile-meal-user-head h3,
    .mobile-library-page .standard-panel-header h2,
    .mobile-library-page .grocery-header-row h2 {
        font-size: clamp(14px, 4.4vw, 17px) !important;
        line-height: 1 !important;
        letter-spacing: .045em !important;
    }

    .mobile-library-page .standard-panel-header h2 i,
    .mobile-library-page .grocery-header-row h2 i {
        margin-right: 4px !important;
        font-size: 12px !important;
    }

    #mealPlannerPage .mobile-meal-eyebrow,
    .mobile-library-page .standard-panel-header .standard-muted,
    .mobile-library-page .grocery-header-row .standard-muted {
        font-size: 7.5px !important;
        letter-spacing: .11em !important;
    }

    .mobile-library-page .standard-panel-body,
    .mobile-library-page .grocery-panel-body {
        padding: 6px !important;
    }

    #mealPlannerPage .mobile-meal-day-stack {
        padding: 8px !important;
    }

    #mealPlannerPage .mobile-meal-slot-list,
    .mobile-list-stack,
    .mobile-table-cards .standard-table tbody {
        gap: 4px !important;
    }

    /* Meal assignments: assigned = green, empty = yellow/orange. */
    #mealPlannerPage .mobile-meal-slot-card {
        min-height: 56px !important;
        grid-template-columns: 32px minmax(0, 1fr) 28px !important;
        gap: 6px !important;
        padding: 5px 6px !important;
        border-left: 3px solid var(--mobile-slot-accent, var(--lhm-orange)) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
    }

    #mealPlannerPage .mobile-meal-slot-card.is-assigned {
        --mobile-slot-accent: var(--lhm-green) !important;
        border-left-color: var(--lhm-green) !important;
    }

    #mealPlannerPage .mobile-meal-slot-card.is-empty {
        --mobile-slot-accent: var(--lhm-orange) !important;
        border-left-color: var(--lhm-orange) !important;
    }

    #mealPlannerPage .mobile-meal-slot-icon {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }

    #mealPlannerPage .mobile-meal-slot-label {
        color: var(--mobile-slot-accent, var(--lhm-orange)) !important;
        font-size: 8px !important;
    }

    #mealPlannerPage .mobile-meal-slot-copy strong {
        font-size: 12px !important;
    }

    #mealPlannerPage .mobile-meal-slot-copy small,
    #mealPlannerPage .mobile-meal-slot-nutrition {
        font-size: 8px !important;
    }

    #mealPlannerPage .mobile-meal-chevron,
    #mealPlannerPage .mobile-meal-side-add {
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }

    /* Mobile table rows: tighter, no colored row edge. */
    .mobile-table-cards .standard-table tr {
        min-height: 40px !important;
        gap: 4px !important;
        padding: 4px 5px 4px 7px !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 1px solid var(--lhm-border) !important;
        border-radius: calc(var(--lhm-radius) - 1px) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012) !important;
    }

    .mobile-table-cards .standard-table tr::before,
    .mobile-table-cards .standard-table tr::after {
        display: none !important;
        content: none !important;
    }

    .mobile-ingredients-table-cards .standard-table tr,
    .mobile-meals-table-cards .standard-table tr {
        grid-template-columns: minmax(0, 1fr) 28px 36px !important;
    }

    .mobile-ingredients-table-cards td[data-mobile-label="Cal"],
    .mobile-ingredients-table-cards td[data-mobile-label="Pro"],
    .mobile-meals-table-cards td[data-mobile-label="Serv"],
    .mobile-meals-table-cards td[data-mobile-label="Cal"],
    .mobile-meals-table-cards td[data-mobile-label="Pro"] {
        display: none !important;
    }

    .mobile-table-cards .standard-row-title strong {
        font-size: 10.5px !important;
        line-height: 1 !important;
        letter-spacing: .02em !important;
    }

    .mobile-table-cards .standard-table td {
        font-size: 8.5px !important;
        line-height: 1 !important;
    }

    .mobile-table-cards .standard-row-action-btn,
    .mobile-table-cards .btn {
        min-height: 24px !important;
        height: 24px !important;
        padding: 3px 4px !important;
        font-size: 7px !important;
    }

    .mobile-table-cards .standard-favorite-btn,
    .mobile-table-cards .standard-favorite-static {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
    }

    .mobile-grocery-recommended-cards .standard-table tr {
        grid-template-columns: minmax(0, 1fr) 56px 34px !important;
    }

    .mobile-grocery-manual-cards .standard-table tr {
        grid-template-columns: 24px minmax(0, 1fr) 38px 34px !important;
    }

    .mobile-grocery-manual-cards .mobile-card-action-cell,
    .mobile-grocery-manual-cards td[data-mobile-label="Action"] {
        display: none !important;
    }


    #groceryListPage .grocery-panel-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        margin-left: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* M25 mobile spacing + food schema hardening. Keep this shared, not page-specific. */
@media (max-width: 768px) {
    :root {
        --lhm-space-title-to-cards: 10px;
        --lhm-space-cards-to-panel: 10px;
        --lhm-space-panel-to-panel: 10px;
        --lhm-mobile-row-gap: 3px;
    }

    .standard-page-header {
        margin-bottom: 0 !important;
    }

    .mobile-kpi-strip,
    .mobile-meal-macro-grid,
    .standard-metric-grid.mobile-kpi-strip {
        margin: 0 !important;
        gap: 5px !important;
    }

    .mobile-filter-card,
    .mobile-library-search-panel,
    .mobile-meal-filter-form {
        margin: 0 !important;
    }

    .standard-panel,
    .mobile-card,
    #mealPlannerPage .mobile-meal-user-card,
    #mealPlannerPage .mobile-meal-day-card,
    .grocery-panel,
    .standard-library-panel {
        margin: 0 !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 1px solid var(--lhm-border) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 10px 20px rgba(0,0,0,.20) !important;
    }

    .standard-panel::before,
    .standard-panel::after,
    .grocery-panel::before,
    .grocery-panel::after,
    .standard-library-panel::before,
    .standard-library-panel::after,
    .mobile-card::before,
    .mobile-card::after,
    #mealPlannerPage .mobile-meal-user-card::before,
    #mealPlannerPage .mobile-meal-user-card::after,
    #mealPlannerPage .mobile-meal-day-card::before,
    #mealPlannerPage .mobile-meal-day-card::after {
        display: none !important;
        content: none !important;
    }

    .standard-panel-header,
    .grocery-header-row,
    .mobile-library-panel-header,
    #mealPlannerPage .mobile-meal-user-head,
    #mealPlannerPage .mobile-meal-day-head {
        min-height: 38px !important;
        padding: 7px 9px !important;
        background: var(--lhm-panel-soft) !important;
        background-image: none !important;
        border-bottom: 1px solid rgba(207,197,151,.10) !important;
    }

    .standard-panel-header h2,
    .grocery-header-row h2,
    .mobile-library-panel-header h2,
    #mealPlannerPage .mobile-meal-user-head h3,
    #mealPlannerPage .mobile-meal-day-head strong {
        font-size: 13px !important;
        line-height: 1.05 !important;
        letter-spacing: .04em !important;
    }

    /* Shared KPI/card schema: one layout for Meal Planner/Food/Grocery mobile. */
    .mobile-kpi-strip .standard-metric-card,
    .mobile-meal-macro-card,
    .mobile-standard-kpi-card {
        display: grid !important;
        grid-template-columns: 22px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: start !important;
        gap: 2px 5px !important;
        min-height: 54px !important;
        padding: 6px 6px 5px 8px !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 3px solid var(--mobile-card-accent, var(--lhm-orange)) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.014) !important;
        overflow: hidden !important;
    }

    .mobile-kpi-strip .standard-metric-card::before,
    .mobile-kpi-strip .standard-metric-card::after,
    .mobile-meal-macro-card::before,
    .mobile-meal-macro-card::after {
        display: none !important;
        content: none !important;
    }

    .mobile-kpi-strip .standard-metric-card.metric-card-green,
    .mobile-meal-macro-card.metric-card-green { --mobile-card-accent: var(--lhm-green); }
    .mobile-kpi-strip .standard-metric-card.metric-card-blue,
    .mobile-meal-macro-card.metric-card-blue { --mobile-card-accent: var(--lhm-accent); }
    .mobile-kpi-strip .standard-metric-card.metric-card-olive,
    .mobile-kpi-strip .standard-metric-card.metric-card-yellow,
    .mobile-meal-macro-card.metric-card-olive { --mobile-card-accent: var(--lhm-gold, #cfc597); }
    .mobile-kpi-strip .standard-metric-card.metric-card-orange,
    .mobile-kpi-strip .standard-metric-card.metric-card-red,
    .mobile-meal-macro-card.metric-card-orange { --mobile-card-accent: var(--lhm-orange); }

    .mobile-kpi-strip .metric-icon,
    .mobile-meal-macro-card .metric-icon,
    .mobile-kpi-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        display: inline-grid !important;
        place-items: center !important;
        margin: 0 !important;
        border: 1px solid rgba(207,197,151,.16) !important;
        border-radius: 6px !important;
        color: var(--mobile-card-accent, var(--lhm-orange)) !important;
        font-size: 10px !important;
        background: rgba(0,0,0,.16) !important;
    }

    .mobile-kpi-strip .standard-metric-card > div,
    .mobile-kpi-copy {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        min-width: 0 !important;
        display: grid !important;
        align-content: start !important;
        gap: 2px !important;
    }

    .mobile-kpi-strip .metric-label,
    .mobile-kpi-label {
        order: 0 !important;
        font-size: 7px !important;
        line-height: 1 !important;
        letter-spacing: .09em !important;
        text-transform: uppercase !important;
        color: var(--lhm-muted) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-kpi-strip .metric-value,
    .mobile-kpi-value {
        order: 1 !important;
        font-size: clamp(12px, 3.8vw, 16px) !important;
        line-height: 1 !important;
        letter-spacing: .01em !important;
        color: var(--lhm-text) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-kpi-meta {
        order: 2 !important;
        display: flex !important;
        gap: 4px !important;
        font-size: 6.5px !important;
        line-height: 1 !important;
        color: var(--lhm-muted) !important;
        white-space: nowrap !important;
    }

    /* Meal Planner assignment rows. */
    #mealPlannerPage .mobile-meal-slot-wrap {
        position: relative !important;
        display: block !important;
    }

    #mealPlannerPage .mobile-meal-slot-card {
        width: 100% !important;
        min-height: 46px !important;
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 5px 8px !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 3px solid var(--mobile-slot-accent, var(--lhm-orange)) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012) !important;
        text-align: left !important;
    }

    #mealPlannerPage .mobile-meal-slot-card.is-assigned {
        --mobile-slot-accent: var(--lhm-green) !important;
        border-left-color: var(--lhm-green) !important;
    }

    #mealPlannerPage .mobile-meal-slot-card.is-empty {
        --mobile-slot-accent: var(--lhm-orange) !important;
        border-left-color: var(--lhm-orange) !important;
    }

    #mealPlannerPage .mobile-meal-slot-card.is-additional-side {
        width: calc(100% - 18px) !important;
        margin-left: 18px !important;
    }

    #mealPlannerPage .mobile-meal-slot-icon {
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        min-height: 26px !important;
        font-size: 11px !important;
    }

    #mealPlannerPage .mobile-meal-slot-copy {
        min-width: 0 !important;
        padding-right: 32px !important;
    }

    #mealPlannerPage .mobile-meal-slot-label {
        font-size: 7px !important;
        line-height: 1 !important;
        color: var(--mobile-slot-accent, var(--lhm-orange)) !important;
    }

    #mealPlannerPage .mobile-meal-slot-copy strong {
        font-size: 11px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #mealPlannerPage .mobile-meal-slot-copy small {
        font-size: 7px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #mealPlannerPage .mobile-meal-slot-nutrition,
    #mealPlannerPage .mobile-meal-slot-card.is-assigned .mobile-meal-chevron {
        display: none !important;
    }

    #mealPlannerPage .mobile-meal-side-add {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        z-index: 2 !important;
        width: 25px !important;
        min-width: 25px !important;
        height: 25px !important;
        min-height: 25px !important;
        padding: 0 !important;
        display: inline-grid !important;
        place-items: center !important;
        border-radius: 7px !important;
        background: rgba(88,137,92,.18) !important;
        border: 1px solid rgba(88,137,92,.44) !important;
        color: var(--lhm-green) !important;
    }

    #mealPlannerPage .mobile-meal-slot-card.is-empty .mobile-meal-chevron {
        display: inline-grid !important;
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        place-items: center !important;
        margin-left: auto !important;
    }

    /* Tight mobile table rows for library/grocery pages. */
    .mobile-table-cards .standard-table,
    .mobile-table-cards .standard-table tbody {
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    .mobile-table-cards .standard-table tbody {
        gap: var(--lhm-mobile-row-gap) !important;
    }

    .mobile-table-cards .standard-table tr {
        min-height: 34px !important;
        padding: 3px 5px !important;
        gap: 3px !important;
        border: 1px solid rgba(207,197,151,.12) !important;
        border-left: 1px solid rgba(207,197,151,.12) !important;
        border-radius: 7px !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .mobile-table-cards .standard-table-wrap,
    .standard-table-wrap.mobile-table-cards,
    .grocery-table-wrap,
    .library-table-wrap {
        border: 0 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        padding: 4px !important;
    }

    .mobile-table-cards .standard-table tr::before,
    .mobile-table-cards .standard-table tr::after {
        display: none !important;
        content: none !important;
    }

    .mobile-ingredients-table-cards .standard-table tr,
    .mobile-meals-table-cards .standard-table tr {
        grid-template-columns: minmax(0, 1fr) 24px 30px !important;
    }

    .mobile-ingredients-table-cards .standard-row-title span,
    .mobile-meals-table-cards .standard-row-title span,
    .mobile-grocery-manual-cards .standard-row-title span,
    .mobile-grocery-recommended-cards .standard-row-title span {
        display: none !important;
    }

    .mobile-ingredients-table-cards td:not(.mobile-card-title):not(.mobile-card-favorite-cell):not(.mobile-card-action-cell),
    .mobile-meals-table-cards td:not(.mobile-card-title):not(.mobile-card-favorite-cell):not(.mobile-card-action-cell) {
        display: none !important;
    }

    .mobile-table-cards .standard-row-title strong {
        font-size: 10px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-table-cards .standard-table td {
        padding: 0 !important;
        font-size: 8px !important;
        line-height: 1 !important;
    }

    .mobile-table-cards .standard-favorite-btn,
    .mobile-table-cards .standard-favorite-static {
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        padding: 0 !important;
        display: inline-grid !important;
        place-items: center !important;
        font-size: 8px !important;
    }

    .mobile-grocery-manual-cards .standard-table tr {
        grid-template-columns: 20px minmax(0, 1fr) 34px 32px !important;
    }

    .mobile-grocery-recommended-cards .standard-table tr {
        grid-template-columns: minmax(0, 1fr) 52px 30px !important;
    }


    .mobile-library-page .standard-table,
    .mobile-library-page .standard-table tbody,
    .mobile-library-page .standard-table tr,
    #groceryListPage .grocery-table,
    #groceryListPage .grocery-table tbody,
    #groceryListPage .grocery-table tr {
        background-image: none !important;
    }

    .btn i,
    .standard-icon-btn i,
    .standard-row-action-btn i {
        display: inline-grid !important;
        place-items: center !important;
        line-height: 1 !important;
    }
}

/* M26 shared mobile spacing/card enforcement.
   Keep Meal Planner, Ingredients, Meals, and Grocery using one spacing/card system. */
@media (max-width: 768px) {
    :root {
        --lhm-mobile-section-gap: 10px;
        --lhm-mobile-card-gap: 6px;
        --lhm-mobile-panel-gap: 10px;
        --lhm-mobile-panel-pad: 8px;
        --lhm-mobile-row-gap: 4px;
        --lhm-mobile-kpi-height: 66px;
    }

    #mealPlannerPage,
    .mobile-library-page {
        gap: var(--lhm-mobile-section-gap) !important;
    }

    #mealPlannerPage > .standard-page-header,
    .mobile-library-page > .standard-page-header {
        margin: 0 !important;
    }

    #mealPlannerPage .mobile-meal-planner,
    .mobile-library-page {
        row-gap: var(--lhm-mobile-section-gap) !important;
    }

    #mealPlannerPage .mobile-meal-macro-grid,
    .mobile-library-page > .mobile-kpi-strip,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: var(--lhm-mobile-card-gap) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mealPlannerPage .mobile-meal-macro-grid + .mobile-filter-card,
    #mealPlannerPage .mobile-meal-macro-grid + .mobile-view-action-row,
    #mealPlannerPage .mobile-view-action-row + .mobile-meal-user-card,
    .mobile-library-page > .mobile-kpi-strip + .mobile-filter-card,
    .mobile-library-page > .mobile-kpi-strip + .standard-filter-bar,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip + .grocery-panel,
    .mobile-library-page > .standard-filter-bar + .standard-library-panel,
    .mobile-library-page > .mobile-filter-card + .standard-library-panel {
        margin-top: 0 !important;
    }

    #mealPlannerPage .mobile-meal-macro-card,
    .mobile-library-page .mobile-kpi-strip .standard-metric-card,
    .mobile-library-page .grocery-metric-grid .standard-metric-card {
        min-height: var(--lhm-mobile-kpi-height) !important;
        height: var(--lhm-mobile-kpi-height) !important;
        padding: 7px 6px 6px !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 3px solid var(--mobile-card-accent, var(--lhm-accent)) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012), 0 7px 14px rgba(0,0,0,.12) !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .mobile-kpi-copy,
    .mobile-library-page .mobile-kpi-strip .standard-metric-card > div,
    .mobile-library-page .grocery-metric-grid .standard-metric-card > div {
        display: contents !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-icon,
    .mobile-library-page .mobile-kpi-strip .metric-icon,
    .mobile-library-page .grocery-metric-grid .metric-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 12px !important;
        min-width: 12px !important;
        height: 12px !important;
        min-height: 12px !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--mobile-card-accent, var(--lhm-accent)) !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-label,
    .mobile-library-page .mobile-kpi-strip .metric-label,
    .mobile-library-page .grocery-metric-grid .metric-label {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 6.7px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .055em !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-value,
    .mobile-library-page .mobile-kpi-strip .metric-value,
    .mobile-library-page .grocery-metric-grid .metric-value {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        max-width: 100% !important;
        margin: 3px 0 0 !important;
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: clamp(11px, 3.45vw, 15px) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .01em !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .mobile-kpi-meta {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        justify-content: center !important;
        gap: 5px !important;
        margin: 2px 0 0 !important;
        color: var(--lhm-muted) !important;
        font-size: 6px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: .02em !important;
    }

    .mobile-library-page .mobile-kpi-strip .metric-value,
    .mobile-library-page .grocery-metric-grid .metric-value {
        font-size: clamp(13px, 4vw, 17px) !important;
    }

    #mealPlannerPage .mobile-view-action-row,
    #mealPlannerPage .mobile-filter-card,
    .mobile-library-page .standard-filter-bar.is-library-filter,
    .mobile-library-page .grocery-filter-bar,
    .mobile-library-page .grocery-panel-actions {
        margin: 0 !important;
    }

    #mealPlannerPage .mobile-meal-user-card,
    #mealPlannerPage .mobile-meal-day-card,
    .mobile-library-page .standard-library-panel,
    .mobile-library-page .grocery-panel {
        margin: 0 !important;
        border-left: 1px solid var(--lhm-border) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
    }

    #mealPlannerPage .mobile-meal-day-stack,
    .mobile-library-page .standard-panel-body,
    .mobile-library-page .grocery-panel-body {
        padding: var(--lhm-mobile-panel-pad) !important;
    }

    #mealPlannerPage .mobile-meal-slot-list,
    .mobile-list-stack,
    .mobile-table-cards .standard-table tbody {
        gap: var(--lhm-mobile-row-gap) !important;
    }

    #mealPlannerPage .mobile-meal-slot-card {
        min-height: 46px !important;
        grid-template-columns: 28px minmax(0, 1fr) !important;
        padding: 5px 8px !important;
    }

    #mealPlannerPage .mobile-meal-slot-card.is-empty {
        padding-right: 36px !important;
    }

    #mealPlannerPage .mobile-meal-slot-card.is-empty .mobile-meal-chevron {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        z-index: 2 !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        border: 1px solid color-mix(in srgb, var(--lhm-orange) 44%, transparent) !important;
        border-radius: 7px !important;
        background: color-mix(in srgb, var(--lhm-orange) 13%, transparent) !important;
        color: var(--lhm-orange) !important;
        font-size: 11px !important;
    }

    #mealPlannerPage .mobile-meal-slot-card.is-assigned .mobile-meal-chevron,
    #mealPlannerPage .mobile-meal-slot-nutrition {
        display: none !important;
    }

    #mealPlannerPage .mobile-meal-slot-card.is-additional-side {
        width: calc(100% - 20px) !important;
        margin-left: 20px !important;
    }

    .mobile-table-cards .standard-table tr,
    #groceryListPage .grocery-table tr {
        border-collapse: collapse !important;
        border-left: 1px solid var(--lhm-border) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
    }
}

/* M27 mobile table/grocery cleanup.
   Keep this as shared mobile schema rather than per-page drift. */
@media (max-width: 768px) {
    /* Kill old table gradients/background washes everywhere in the mobile table-card schema. */
    .mobile-table-cards,
    .mobile-table-cards .standard-table-wrap,
    .mobile-table-cards .standard-table,
    .mobile-table-cards .standard-table thead,
    .mobile-table-cards .standard-table tbody,
    .mobile-table-cards .standard-table tr,
    .mobile-table-cards .standard-table th,
    .mobile-table-cards .standard-table td,
    .mobile-library-page .standard-table,
    .mobile-library-page .standard-table tbody,
    .mobile-library-page .standard-table tr,
    .mobile-library-page .standard-table td,
    #groceryListPage .grocery-table,
    #groceryListPage .grocery-table tbody,
    #groceryListPage .grocery-table tr,
    #groceryListPage .grocery-table td {
        background-image: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mobile-table-cards .standard-table tr,
    #groceryListPage .grocery-table tr {
        background: var(--lhm-row) !important;
        background-image: none !important;
    }

    /* Ingredients/Meals: collapsed compact rows. */
    .mobile-ingredients-table-cards .standard-table,
    .mobile-ingredients-table-cards .standard-table tbody,
    .mobile-meals-table-cards .standard-table,
    .mobile-meals-table-cards .standard-table tbody {
        display: block !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    .mobile-ingredients-table-cards .standard-table tbody,
    .mobile-meals-table-cards .standard-table tbody {
        gap: 0 !important;
    }

    .mobile-ingredients-table-cards .standard-table tr,
    .mobile-meals-table-cards .standard-table tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 26px 50px !important;
        min-height: 30px !important;
        height: 30px !important;
        gap: 4px !important;
        padding: 2px 5px 2px 7px !important;
        border: 1px solid rgba(207,197,151,.12) !important;
        border-bottom-width: 0 !important;
        border-radius: 0 !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .mobile-ingredients-table-cards .standard-table tbody tr:first-child,
    .mobile-meals-table-cards .standard-table tbody tr:first-child {
        border-top-left-radius: 7px !important;
        border-top-right-radius: 7px !important;
    }

    .mobile-ingredients-table-cards .standard-table tbody tr:last-child,
    .mobile-meals-table-cards .standard-table tbody tr:last-child {
        border-bottom-width: 1px !important;
        border-bottom-left-radius: 7px !important;
        border-bottom-right-radius: 7px !important;
    }

    .mobile-ingredients-table-cards .standard-row-title strong,
    .mobile-meals-table-cards .standard-row-title strong {
        font-size: 9.5px !important;
        line-height: 1 !important;
        letter-spacing: .015em !important;
    }

    .mobile-ingredients-table-cards .standard-table td,
    .mobile-meals-table-cards .standard-table td {
        min-height: 24px !important;
        height: 24px !important;
        align-items: center !important;
        font-size: 8px !important;
        line-height: 1 !important;
    }

    .mobile-ingredients-table-cards .standard-favorite-btn,
    .mobile-ingredients-table-cards .standard-favorite-static,
    .mobile-meals-table-cards .standard-favorite-btn,
    .mobile-meals-table-cards .standard-favorite-static {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 !important;
    }

    .mobile-ingredients-table-cards .standard-row-action-btn,
    .mobile-meals-table-cards .standard-row-action-btn,
    .mobile-ingredients-table-cards .mobile-card-action-cell .btn,
    .mobile-meals-table-cards .mobile-card-action-cell .btn {
        width: 50px !important;
        min-width: 50px !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 7px !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .mobile-ingredients-table-cards .standard-row-action-btn::before,
    .mobile-meals-table-cards .standard-row-action-btn::before {
        display: none !important;
        content: none !important;
    }

    /* Grocery recommended rows: make Merge fit, and keep the quantity column usable. */
    .mobile-grocery-recommended-cards .standard-table tr {
        grid-template-columns: minmax(0, 1fr) 64px 70px !important;
        min-height: 34px !important;
    }

    .mobile-grocery-recommended-cards .mobile-card-action-cell,
    .mobile-grocery-recommended-cards .mobile-card-action-cell form {
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-grocery-recommended-cards .mobile-card-action-cell .btn,
    .mobile-grocery-recommended-cards .standard-primary-btn {
        width: 70px !important;
        min-width: 70px !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 7px !important;
        display: inline-grid !important;
        grid-auto-flow: column !important;
        grid-template-columns: auto auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        letter-spacing: .035em !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .mobile-grocery-recommended-cards .mobile-card-action-cell .btn i,
    .mobile-grocery-recommended-cards .standard-primary-btn i {
        margin: 0 !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }
}

/* M28 mobile standard: shared cards, buttons, and spacing authority.
   Keep this generic and last-loaded so page-specific mobile files cannot drift. */
@media (max-width: 768px) {
    :root {
        --lhm-mobile-section-gap: 10px;
        --lhm-mobile-card-gap: 5px;
        --lhm-mobile-panel-gap: 10px;
        --lhm-mobile-panel-pad: 7px;
        --lhm-mobile-kpi-height: 62px;
        --lhm-mobile-button-height: 28px;
        --lhm-mobile-button-pad-x: 7px;
    }

    .standard-page-header {
        margin: 0 !important;
    }

    .mobile-kpi-strip,
    .mobile-meal-macro-grid,
    .grocery-metric-grid.mobile-kpi-strip,
    .standard-metric-grid.mobile-kpi-strip {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: var(--lhm-mobile-card-gap) !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    .mobile-filter-card,
    .mobile-library-search-panel,
    .mobile-meal-filter-form,
    .mobile-library-page .grocery-filter-bar,
    #mealPlannerPage .mobile-view-action-row {
        margin: 0 !important;
    }

    .standard-panel,
    .standard-library-panel,
    .grocery-panel,
    #mealPlannerPage .mobile-meal-user-card,
    #mealPlannerPage .mobile-meal-day-card {
        margin: 0 !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 1px solid var(--lhm-border) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.014), 0 9px 18px rgba(0,0,0,.18) !important;
    }

    .standard-panel::before,
    .standard-panel::after,
    .standard-library-panel::before,
    .standard-library-panel::after,
    .grocery-panel::before,
    .grocery-panel::after,
    #mealPlannerPage .mobile-meal-user-card::before,
    #mealPlannerPage .mobile-meal-user-card::after,
    #mealPlannerPage .mobile-meal-day-card::before,
    #mealPlannerPage .mobile-meal-day-card::after {
        display: none !important;
        content: none !important;
    }

    /* One KPI card schema for Meal Planner, Ingredients, Meals, and Grocery. */
    .mobile-kpi-strip > .standard-metric-card,
    .standard-metric-grid.mobile-kpi-strip > .standard-metric-card,
    .grocery-metric-grid.mobile-kpi-strip > .standard-metric-card,
    #mealPlannerPage .mobile-meal-macro-card,
    .mobile-standard-kpi-card {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 15px minmax(0, 1fr) !important;
        grid-template-rows: 15px minmax(0, 1fr) !important;
        align-items: center !important;
        justify-items: stretch !important;
        gap: 3px 4px !important;
        min-width: 0 !important;
        min-height: var(--lhm-mobile-kpi-height) !important;
        height: var(--lhm-mobile-kpi-height) !important;
        padding: 7px 6px 6px 7px !important;
        overflow: hidden !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 3px solid var(--mobile-card-accent, var(--lhm-accent)) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012), 0 6px 12px rgba(0,0,0,.12) !important;
        text-align: left !important;
    }

    .mobile-kpi-strip > .standard-metric-card::before,
    .mobile-kpi-strip > .standard-metric-card::after,
    #mealPlannerPage .mobile-meal-macro-card::before,
    #mealPlannerPage .mobile-meal-macro-card::after,
    .mobile-standard-kpi-card::before,
    .mobile-standard-kpi-card::after {
        display: none !important;
        content: none !important;
    }

    .mobile-kpi-strip > .standard-metric-card > div,
    .standard-metric-grid.mobile-kpi-strip > .standard-metric-card > div,
    .grocery-metric-grid.mobile-kpi-strip > .standard-metric-card > div,
    #mealPlannerPage .mobile-meal-macro-card .mobile-kpi-copy,
    .mobile-standard-kpi-card .mobile-kpi-copy {
        display: contents !important;
    }

    .mobile-kpi-strip .metric-icon,
    .standard-metric-grid.mobile-kpi-strip .metric-icon,
    .grocery-metric-grid.mobile-kpi-strip .metric-icon,
    #mealPlannerPage .mobile-meal-macro-card .metric-icon,
    .mobile-standard-kpi-card .metric-icon,
    .mobile-kpi-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 14px !important;
        min-width: 14px !important;
        height: 14px !important;
        min-height: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--mobile-card-accent, var(--lhm-accent)) !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    .mobile-kpi-strip .metric-icon i,
    .standard-metric-grid.mobile-kpi-strip .metric-icon i,
    .grocery-metric-grid.mobile-kpi-strip .metric-icon i,
    #mealPlannerPage .mobile-meal-macro-card .metric-icon i,
    .mobile-standard-kpi-card .metric-icon i {
        display: grid !important;
        place-items: center !important;
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .mobile-kpi-strip .metric-label,
    .standard-metric-grid.mobile-kpi-strip .metric-label,
    .grocery-metric-grid.mobile-kpi-strip .metric-label,
    #mealPlannerPage .mobile-meal-macro-card .metric-label,
    .mobile-standard-kpi-card .metric-label,
    .mobile-kpi-label {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: start !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 6.8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .055em !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .mobile-kpi-strip .metric-value,
    .standard-metric-grid.mobile-kpi-strip .metric-value,
    .grocery-metric-grid.mobile-kpi-strip .metric-value,
    #mealPlannerPage .mobile-meal-macro-card .metric-value,
    .mobile-standard-kpi-card .metric-value,
    .mobile-kpi-value {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: center !important;
        max-width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: clamp(12px, 3.6vw, 16px) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .01em !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .mobile-kpi-meta,
    .mobile-standard-kpi-card .mobile-kpi-meta {
        display: none !important;
    }

    .metric-card-green,
    #mealPlannerPage .mobile-meal-macro-card.metric-card-green,
    #mealPlannerPage .mobile-meal-macro-card.tone-green { --mobile-card-accent: var(--lhm-green); }
    .metric-card-blue,
    #mealPlannerPage .mobile-meal-macro-card.metric-card-blue,
    #mealPlannerPage .mobile-meal-macro-card.tone-blue { --mobile-card-accent: var(--lhm-accent); }
    .metric-card-yellow,
    .metric-card-olive,
    #mealPlannerPage .mobile-meal-macro-card.metric-card-olive,
    #mealPlannerPage .mobile-meal-macro-card.tone-gold { --mobile-card-accent: var(--lhm-gold, #cfc597); }
    .metric-card-orange,
    .metric-card-red,
    #mealPlannerPage .mobile-meal-macro-card.metric-card-orange,
    #mealPlannerPage .mobile-meal-macro-card.tone-orange { --mobile-card-accent: var(--lhm-orange); }

    /* Button standard: tight, balanced padding, centered icons/text. */

    .mobile-grocery-recommended-cards .mobile-card-action-cell .btn,
    .mobile-grocery-recommended-cards .standard-primary-btn {
        min-width: 58px !important;
        width: 58px !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 5px !important;
        gap: 3px !important;
        font-size: 7.7px !important;
        letter-spacing: .02em !important;
    }

    .mobile-grocery-recommended-cards .mobile-card-action-cell .btn i,
    .mobile-grocery-recommended-cards .standard-primary-btn i {
        width: 10px !important;
        height: 10px !important;
        font-size: 9px !important;
    }

    .mobile-ingredients-table-cards .standard-row-action-btn,
    .mobile-meals-table-cards .standard-row-action-btn,
    .mobile-ingredients-table-cards .mobile-card-action-cell .btn,
    .mobile-meals-table-cards .mobile-card-action-cell .btn {
        width: 50px !important;
        min-width: 50px !important;
        padding: 0 6px !important;
    }

    /* Kill remaining table gradients/washes and keep rows flat. */
    .mobile-table-cards,
    .mobile-table-cards .standard-table-wrap,
    .standard-table-wrap.mobile-table-cards,
    .mobile-table-cards .standard-table,
    .mobile-table-cards .standard-table thead,
    .mobile-table-cards .standard-table tbody,
    .mobile-table-cards .standard-table tr,
    .mobile-table-cards .standard-table th,
    .mobile-table-cards .standard-table td,
    .grocery-table-wrap,
    #groceryListPage .grocery-table,
    #groceryListPage .grocery-table tbody,
    #groceryListPage .grocery-table tr,
    #groceryListPage .grocery-table td {
        background-image: none !important;
        box-shadow: none !important;
    }

    .mobile-table-cards .standard-table tr,
    #groceryListPage .grocery-table tr {
        background: var(--lhm-row) !important;
        background-image: none !important;
    }
}

/* M29 mobile hard standard: buttons, cards, spacing, and shopping drawer.
   This is intentionally generic and must remain below page-level mobile rules. */
@media (max-width: 768px) {
    :root {
        --lhm-mobile-section-gap: 10px;
        --lhm-mobile-card-gap: 5px;
        --lhm-mobile-panel-gap: 10px;
        --lhm-mobile-panel-pad: 7px;
        --lhm-mobile-kpi-height: 62px;
        --lhm-mobile-button-height: 28px;
        --lhm-mobile-button-pad-x: 8px;
        --lhm-mobile-button-gap: 4px;
        --lhm-mobile-button-font-size: 8.5px;
    }

    /* One spacing schema across Meal Planner, Ingredients, Meals, and Grocery. */
    #mealPlannerPage,
    .mobile-library-page {
        padding-bottom: 12px !important;
    }

    #mealPlannerPage > .standard-page-header,
    .mobile-library-page > .standard-page-header {
        margin: 0 !important;
    }

    #mealPlannerPage > .planner-metric-grid,
    #mealPlannerPage > .planner-panel:not(.mobile-keep-panel),
    #mealPlannerPage > .planner-nutrition-panel:not(.mobile-keep-panel) {
        display: none !important;
    }

    #mealPlannerPage .mobile-meal-planner {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mealPlannerPage .mobile-meal-macro-grid,
    .mobile-library-page > .mobile-kpi-strip,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip,
    .standard-metric-grid.mobile-kpi-strip {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: var(--lhm-mobile-card-gap) !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    #mealPlannerPage .mobile-filter-card,
    #mealPlannerPage .mobile-view-action-row,
    .mobile-library-page .mobile-library-search-panel,
    .mobile-library-page .standard-filter-bar.is-library-filter,
    .mobile-library-page .grocery-filter-bar,
    .mobile-filter-card {
        margin: 0 !important;
    }

    #mealPlannerPage .mobile-meal-user-card,
    #mealPlannerPage .mobile-meal-day-card,
    .mobile-library-page .standard-library-panel,
    .mobile-library-page .grocery-panel,
    .standard-panel {
        margin: 0 !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 1px solid var(--lhm-border) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.014), 0 9px 18px rgba(0,0,0,.18) !important;
    }

    /* One KPI/card schema. Meal Planner is no longer special. */
    #mealPlannerPage .mobile-meal-macro-card,
    .mobile-kpi-strip > .standard-metric-card,
    .standard-metric-grid.mobile-kpi-strip > .standard-metric-card,
    .grocery-metric-grid.mobile-kpi-strip > .standard-metric-card,
    .mobile-standard-kpi-card {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 15px minmax(0, 1fr) !important;
        grid-template-rows: 15px minmax(0, 1fr) !important;
        align-items: center !important;
        justify-items: stretch !important;
        gap: 3px 4px !important;
        min-width: 0 !important;
        min-height: var(--lhm-mobile-kpi-height) !important;
        height: var(--lhm-mobile-kpi-height) !important;
        padding: 7px 6px 6px 7px !important;
        overflow: hidden !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 3px solid var(--mobile-card-accent, var(--lhm-accent)) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012), 0 6px 12px rgba(0,0,0,.12) !important;
        text-align: left !important;
    }

    #mealPlannerPage .mobile-meal-macro-card::before,
    #mealPlannerPage .mobile-meal-macro-card::after,
    .mobile-kpi-strip > .standard-metric-card::before,
    .mobile-kpi-strip > .standard-metric-card::after,
    .mobile-standard-kpi-card::before,
    .mobile-standard-kpi-card::after {
        display: none !important;
        content: none !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .mobile-kpi-copy,
    .mobile-kpi-strip > .standard-metric-card > div,
    .standard-metric-grid.mobile-kpi-strip > .standard-metric-card > div,
    .grocery-metric-grid.mobile-kpi-strip > .standard-metric-card > div,
    .mobile-standard-kpi-card .mobile-kpi-copy {
        display: contents !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-icon,
    .mobile-kpi-strip .metric-icon,
    .standard-metric-grid.mobile-kpi-strip .metric-icon,
    .grocery-metric-grid.mobile-kpi-strip .metric-icon,
    .mobile-standard-kpi-card .metric-icon,
    .mobile-kpi-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 14px !important;
        min-width: 14px !important;
        height: 14px !important;
        min-height: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--mobile-card-accent, var(--lhm-accent)) !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-icon i,
    .mobile-kpi-strip .metric-icon i,
    .standard-metric-grid.mobile-kpi-strip .metric-icon i,
    .grocery-metric-grid.mobile-kpi-strip .metric-icon i,
    .mobile-standard-kpi-card .metric-icon i {
        display: grid !important;
        place-items: center !important;
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-label,
    .mobile-kpi-strip .metric-label,
    .standard-metric-grid.mobile-kpi-strip .metric-label,
    .grocery-metric-grid.mobile-kpi-strip .metric-label,
    .mobile-standard-kpi-card .metric-label,
    .mobile-kpi-label {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: start !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 6.8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .055em !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-value,
    .mobile-kpi-strip .metric-value,
    .standard-metric-grid.mobile-kpi-strip .metric-value,
    .grocery-metric-grid.mobile-kpi-strip .metric-value,
    .mobile-standard-kpi-card .metric-value,
    .mobile-kpi-value {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: center !important;
        max-width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: clamp(12px, 3.6vw, 16px) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .01em !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .mobile-kpi-meta,
    .mobile-standard-kpi-card .mobile-kpi-meta {
        display: none !important;
    }

    /* Mobile buttons are standardized in the canonical block near the end of this file. */

    .mobile-ingredients-table-cards .standard-table tr,
    .mobile-meals-table-cards .standard-table tr {
        grid-template-columns: minmax(0, 1fr) 28px max-content !important;
    }

    .mobile-ingredients-table-cards .standard-row-action-btn,
    .mobile-meals-table-cards .standard-row-action-btn,
    .mobile-ingredients-table-cards .mobile-card-action-cell .btn,
    .mobile-meals-table-cards .mobile-card-action-cell .btn {
        width: auto !important;
        min-width: max-content !important;
    }

    .mobile-grocery-recommended-cards .standard-table tr {
        grid-template-columns: minmax(0, 1fr) minmax(52px, auto) max-content !important;
    }

    .mobile-grocery-recommended-cards .mobile-card-action-cell .btn,
    .mobile-grocery-recommended-cards .standard-primary-btn {
        width: auto !important;
        min-width: max-content !important;
        padding: 0 var(--lhm-mobile-button-pad-x) !important;
    }

    /* Shopping mode is already full-screen; remove the duplicate drawer title area on mobile. */
    .grocery-shopping-panel .standard-drawer-header {
        display: none !important;
    }

    .grocery-shopping-panel .grocery-shopping-body {
        padding-top: var(--lhm-mobile-panel-pad) !important;
    }
}

/* M30 canonical mobile card/filter/button pass.
   Keep this generic so Meal Planner, Ingredients, Meals, and Groceries inherit the same schema. */
@media (max-width: 768px) {
    :root {
        --lhm-space-title-to-cards: 10px;
        --lhm-space-cards-to-filter: 6px;
        --lhm-space-filter-to-actions: 6px;
        --lhm-space-actions-to-panel: 8px;
        --lhm-space-panel-to-panel: 10px;
        --lhm-kpi-card-height: 58px;
        --lhm-kpi-gap: 5px;
        --lhm-mobile-button-height: 30px;
        --lhm-mobile-button-pad-x: 10px;
        --lhm-mobile-button-gap: 5px;
    }

    .standard-page-header {
        margin-bottom: 0 !important;
    }

    .mobile-kpi-strip,
    .mobile-meal-macro-grid,
    .standard-metric-grid.mobile-kpi-strip,
    .grocery-metric-grid.mobile-kpi-strip {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: var(--lhm-kpi-gap) !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .mobile-filter-card,
    .mobile-library-search-panel,
    .mobile-meal-filter-form {
        margin: 0 !important;
        padding: 6px !important;
        min-height: 0 !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        border: 1px solid var(--lhm-border) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012) !important;
    }

    .mobile-view-action-row,
    .mobile-action-strip {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: var(--lhm-mobile-button-gap) !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .mobile-view-action-row > form,
    .mobile-action-strip > form,
    .mobile-view-action-row > a,
    .mobile-view-action-row > button,
    .mobile-action-strip > a,
    .mobile-action-strip > button {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    .mobile-filter-submit,
    #mealPlannerPage .mobile-meal-filter-form .mobile-filter-submit {
        display: none !important;
    }

    .mobile-filter-card label,
    .mobile-filter-field {
        min-height: 34px !important;
        padding: 4px 6px !important;
        gap: 2px !important;
    }

    .mobile-filter-card label > span,
    .mobile-filter-field > span {
        font-size: 7px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .mobile-filter-card input,
    .mobile-filter-card select {
        min-height: 22px !important;
        height: 22px !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    /* One KPI card schema. Title/icon on top; value gets the full card width so numbers stop truncating. */
    .mobile-kpi-strip > .standard-metric-card,
    .grocery-metric-grid.mobile-kpi-strip > .standard-metric-card,
    .standard-metric-grid.mobile-kpi-strip > .standard-metric-card,
    .mobile-meal-macro-card,
    .mobile-standard-kpi-card {
        display: grid !important;
        grid-template-columns: 20px minmax(0, 1fr) !important;
        grid-template-rows: 18px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 3px 5px !important;
        min-height: var(--lhm-kpi-card-height) !important;
        height: var(--lhm-kpi-card-height) !important;
        padding: 6px 6px 5px 8px !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 3px solid var(--mobile-card-accent, var(--lhm-orange)) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .mobile-kpi-strip > .standard-metric-card::before,
    .mobile-kpi-strip > .standard-metric-card::after,
    .mobile-meal-macro-card::before,
    .mobile-meal-macro-card::after,
    .mobile-standard-kpi-card::before,
    .mobile-standard-kpi-card::after {
        display: none !important;
        content: none !important;
    }

    .mobile-kpi-strip .metric-icon,
    .mobile-meal-macro-card .metric-icon,
    .mobile-kpi-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        display: inline-grid !important;
        place-items: center !important;
        margin: 0 !important;
        border: 1px solid rgba(207,197,151,.15) !important;
        border-radius: 6px !important;
        color: var(--mobile-card-accent, var(--lhm-orange)) !important;
        font-size: 9px !important;
        background: rgba(0,0,0,.16) !important;
        z-index: 2 !important;
    }

    .mobile-kpi-strip .standard-metric-card > div,
    .grocery-metric-grid.mobile-kpi-strip .standard-metric-card > div,
    .mobile-kpi-copy {
        grid-column: 1 / -1 !important;
        grid-row: 1 / -1 !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 20px minmax(0, 1fr) !important;
        grid-template-rows: 18px minmax(0, 1fr) !important;
        column-gap: 5px !important;
        row-gap: 2px !important;
        align-items: start !important;
        align-content: start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-kpi-strip .metric-label,
    .grocery-metric-grid.mobile-kpi-strip .metric-label,
    .mobile-kpi-label {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        font-size: 6.8px !important;
        line-height: 1 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
        color: var(--lhm-muted) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
    }

    .mobile-kpi-strip .metric-value,
    .grocery-metric-grid.mobile-kpi-strip .metric-value,
    .mobile-kpi-value {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        align-self: end !important;
        min-width: 0 !important;
        font-size: clamp(10px, 3.05vw, 12px) !important;
        line-height: 1 !important;
        letter-spacing: -.02em !important;
        color: var(--lhm-text) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        margin: 0 !important;
    }

    .mobile-kpi-meta {
        display: none !important;
    }

    /* Tone mapping remains shared across pages. */
    .mobile-kpi-strip .standard-metric-card.metric-card-green,
    .mobile-meal-macro-card.metric-card-green { --mobile-card-accent: var(--lhm-green); }
    .mobile-kpi-strip .standard-metric-card.metric-card-blue,
    .mobile-meal-macro-card.metric-card-blue { --mobile-card-accent: var(--lhm-accent); }
    .mobile-kpi-strip .standard-metric-card.metric-card-olive,
    .mobile-kpi-strip .standard-metric-card.metric-card-yellow,
    .mobile-meal-macro-card.metric-card-olive { --mobile-card-accent: var(--lhm-gold, #cfc597); }
    .mobile-kpi-strip .standard-metric-card.metric-card-orange,
    .mobile-kpi-strip .standard-metric-card.metric-card-red,
    .mobile-meal-macro-card.metric-card-orange { --mobile-card-accent: var(--lhm-orange); }

    /* Meal Planner now follows the same spacing as Ingredients/Meals/Groceries. */
    #mealPlannerPage .mobile-meal-macro-grid {
        margin: 0 !important;
    }

    #mealPlannerPage .mobile-meal-macro-grid + .mobile-meal-filter-form {
        margin-top: 0 !important;
    }

    #mealPlannerPage .mobile-meal-filter-form + .mobile-view-action-row {
        margin-top: 0 !important;
    }

    #mealPlannerPage .mobile-view-action-row + .mobile-meal-user-card {
        margin-top: 0 !important;
    }

    #mealPlannerPage .mobile-meal-user-card,
    #mealPlannerPage .mobile-meal-day-card,
    .standard-panel,
    .grocery-panel,
    .standard-library-panel {
        margin-bottom: 0 !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 1px solid var(--lhm-border) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012), 0 10px 20px rgba(0,0,0,.20) !important;
    }
}

/* M31 mobile standard cleanup: title actions and card/filter spacing.
   Keep this generic so Ingredients, Meals, Grocery, and Meal Planner inherit one schema. */
@media (max-width: 768px) {
    :root {
        --lhm-space-cards-to-filter: 10px;
        --lhm-space-title-to-cards: 10px;
        --lhm-space-filter-to-actions: 6px;
        --lhm-space-actions-to-panel: 8px;
        --lhm-space-panel-to-panel: 10px;
    }

    /* Page title cards should only keep compact utility/permissions buttons on mobile. */
    .standard-page-header .mobile-title-add-action,
    .standard-page-header .mobile-title-generate-action,
    .standard-page-header .standard-page-actions > .standard-primary-btn:not(.standard-icon-btn),
    .standard-page-header .standard-page-actions > .standard-secondary-btn:not(.standard-icon-btn),
    .standard-page-header .grocery-page-actions > .standard-primary-btn:not(.standard-icon-btn),
    .standard-page-header .grocery-page-actions > .standard-secondary-btn:not(.standard-icon-btn) {
        display: none !important;
    }

    .standard-page-header .standard-page-actions,
    .standard-page-header .grocery-page-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        padding: 10px !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .standard-page-header .standard-page-actions > .standard-icon-btn,
    .standard-page-header .grocery-page-actions > .standard-icon-btn {
        display: inline-flex !important;
    }

    /* One exact gap from KPI cards to the next search/filter panel. */
    #mealPlannerPage .mobile-meal-macro-grid,
    .mobile-library-page > .mobile-kpi-strip,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip,
    .standard-metric-grid.mobile-kpi-strip {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #mealPlannerPage .mobile-meal-macro-grid + .mobile-meal-filter-form,
    .mobile-library-page > .mobile-kpi-strip + .mobile-library-search-panel,
    .mobile-library-page > .mobile-kpi-strip + .standard-filter-bar,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip + .grocery-panel,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip + .mobile-library-search-panel {
        margin-top: 0 !important;
    }

    #mealPlannerPage .mobile-view-action-row,
    #mealPlannerPage .mobile-action-strip {
        justify-content: flex-end !important;
    }
}

/* M32 authoritative mobile spacing/card/button standard.
   This block intentionally sits last. Do not reintroduce page-specific card/title/button spacing elsewhere. */
@media (max-width: 768px) {
    :root {
        --lhm-mobile-title-to-cards-gap: 8px;
        --lhm-mobile-cards-to-filter-gap: 10px;
        --lhm-mobile-filter-to-actions-gap: 6px;
        --lhm-mobile-actions-to-panel-gap: 8px;
        --lhm-mobile-panel-gap: 10px;
        --lhm-mobile-card-gap: 5px;
        --lhm-mobile-kpi-height: 58px;
        --lhm-mobile-button-height: 30px;
        --lhm-mobile-button-pad-x: 10px;
        --lhm-mobile-button-gap: 5px;
    }

    /* Title card spacing is standard across mobile module pages. */
    .standard-page-header {
        margin: 0 !important;
        padding: 0 !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        border: 1px solid var(--lhm-border) !important;
        border-radius: var(--lhm-radius) !important;
    }

    .standard-title-row {
        padding: 10px !important;
    }

    .standard-page-actions,
    .grocery-page-actions,
    #mealPlannerPage .planner-week-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 10px !important;
        align-self: stretch !important;
    }

    /* One card grid and one gap for Meal Planner / Ingredients / Meals / Grocery. */
    #mealPlannerPage .mobile-meal-macro-grid,
    .mobile-library-page > .mobile-kpi-strip,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip,
    .standard-metric-grid.mobile-kpi-strip {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: var(--lhm-mobile-card-gap) !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    /* One card body schema. Meal Planner cards must not be taller than Ingredients/Meals/Grocery. */
    #mealPlannerPage .mobile-meal-macro-card,
    .mobile-kpi-strip > .standard-metric-card,
    .standard-metric-grid.mobile-kpi-strip > .standard-metric-card,
    .grocery-metric-grid.mobile-kpi-strip > .standard-metric-card,
    .mobile-standard-kpi-card {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 18px minmax(0, 1fr) !important;
        grid-template-rows: 18px minmax(0, 1fr) !important;
        align-items: start !important;
        align-content: stretch !important;
        justify-items: stretch !important;
        gap: 3px 5px !important;
        min-width: 0 !important;
        min-height: var(--lhm-mobile-kpi-height) !important;
        height: var(--lhm-mobile-kpi-height) !important;
        max-height: var(--lhm-mobile-kpi-height) !important;
        margin: 0 !important;
        padding: 6px 6px 5px 7px !important;
        overflow: hidden !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 3px solid var(--mobile-card-accent, var(--lhm-accent)) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012) !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    #mealPlannerPage .mobile-meal-macro-card::before,
    #mealPlannerPage .mobile-meal-macro-card::after,
    .mobile-kpi-strip > .standard-metric-card::before,
    .mobile-kpi-strip > .standard-metric-card::after,
    .mobile-standard-kpi-card::before,
    .mobile-standard-kpi-card::after {
        display: none !important;
        content: none !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .mobile-kpi-copy,
    .mobile-kpi-strip > .standard-metric-card > div,
    .standard-metric-grid.mobile-kpi-strip > .standard-metric-card > div,
    .grocery-metric-grid.mobile-kpi-strip > .standard-metric-card > div,
    .mobile-standard-kpi-card .mobile-kpi-copy {
        grid-column: 1 / -1 !important;
        grid-row: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 18px minmax(0, 1fr) !important;
        grid-template-rows: 18px minmax(0, 1fr) !important;
        column-gap: 5px !important;
        row-gap: 2px !important;
        align-content: stretch !important;
        align-items: start !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-icon,
    .mobile-kpi-strip .metric-icon,
    .standard-metric-grid.mobile-kpi-strip .metric-icon,
    .grocery-metric-grid.mobile-kpi-strip .metric-icon,
    .mobile-standard-kpi-card .metric-icon,
    .mobile-kpi-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(207,197,151,.15) !important;
        border-radius: 6px !important;
        background: rgba(0,0,0,.16) !important;
        color: var(--mobile-card-accent, var(--lhm-accent)) !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-icon i,
    .mobile-kpi-strip .metric-icon i,
    .standard-metric-grid.mobile-kpi-strip .metric-icon i,
    .grocery-metric-grid.mobile-kpi-strip .metric-icon i,
    .mobile-standard-kpi-card .metric-icon i,
    .mobile-kpi-icon i {
        display: grid !important;
        place-items: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-label,
    .mobile-kpi-strip .metric-label,
    .standard-metric-grid.mobile-kpi-strip .metric-label,
    .grocery-metric-grid.mobile-kpi-strip .metric-label,
    .mobile-standard-kpi-card .metric-label,
    .mobile-kpi-label {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: start !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 6.8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .075em !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-value,
    .mobile-kpi-strip .metric-value,
    .standard-metric-grid.mobile-kpi-strip .metric-value,
    .grocery-metric-grid.mobile-kpi-strip .metric-value,
    .mobile-standard-kpi-card .metric-value,
    .mobile-kpi-value {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        align-self: end !important;
        justify-self: stretch !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: clamp(10px, 3.05vw, 12px) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -.02em !important;
        text-align: center !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .mobile-kpi-meta,
    .mobile-kpi-meta {
        display: none !important;
    }

    /* One exact relationship between cards, filter/search, actions, and panels. */
    #mealPlannerPage .mobile-meal-macro-grid + .mobile-meal-filter-form,
    .mobile-library-page > .mobile-kpi-strip + .mobile-library-search-panel,
    .mobile-library-page > .mobile-kpi-strip + .standard-filter-bar,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip + .mobile-library-search-panel,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip + .grocery-panel {
        margin-top: 0 !important;
    }

    .mobile-filter-card,
    .mobile-meal-filter-form,
    .mobile-library-search-panel,
    .mobile-library-page .grocery-filter-bar {
        margin: 0 !important;
        padding: 6px !important;
        border: 1px solid var(--lhm-border) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012) !important;
    }

    #mealPlannerPage .mobile-view-action-row,
    #mealPlannerPage .mobile-action-strip {
        justify-content: flex-end !important;
        margin: 0 !important;
    }

    #mealPlannerPage .mobile-view-action-row + .mobile-meal-user-card,
    .mobile-library-search-panel + .standard-library-panel,
    .mobile-filter-card + .standard-library-panel,
    .grocery-metric-grid.mobile-kpi-strip + .grocery-panel {
        margin-top: 0 !important;
    }

    #mealPlannerPage .mobile-meal-user-card,
    #mealPlannerPage .mobile-meal-day-card,
    .standard-library-panel,
    .grocery-panel,
    .standard-panel {
        margin: 0 !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        border: 1px solid var(--lhm-border) !important;
        border-left: 1px solid var(--lhm-border) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012), 0 9px 18px rgba(0,0,0,.18) !important;
    }

}


/* M33 mobile Ingredients pass: shared mobile spacing/buttons plus rich ingredient rows. */
.mobile-only-ingredient-table-wrap,
.mobile-only-meal-table-wrap {
    display: none;
}

.ingredient-image-current,
.meal-image-current {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--muted, #9aa39b);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.ingredient-image-current .ingredient-mobile-image,
.ingredient-image-current img,
.meal-image-current .meal-mobile-image,
.meal-image-current img,
.meal-view-image .meal-mobile-image,
.meal-view-image img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border: 1px solid var(--border, rgba(207,197,151,.2));
    border-radius: 8px;
    background: rgba(0,0,0,.18);
}

@media (max-width: 768px) {
    :root {
    }

    .desktop-only-metric {
        display: none !important;
    }

    #mealPlannerPage .mobile-meal-macro-grid,
    .mobile-library-page > .mobile-kpi-strip,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip,
    .standard-metric-grid.mobile-kpi-strip {
        margin-bottom: 0 !important;
    }

    .mobile-kpi-strip .metric-label,
    .standard-metric-grid.mobile-kpi-strip .metric-label,
    .grocery-metric-grid.mobile-kpi-strip .metric-label,
    #mealPlannerPage .mobile-meal-macro-card .metric-label,
    .mobile-standard-kpi-card .metric-label,
    .mobile-kpi-label {
        font-size: 7.4px !important;
        letter-spacing: .052em !important;
    }

    .mobile-kpi-strip .metric-value,
    .standard-metric-grid.mobile-kpi-strip .metric-value,
    .grocery-metric-grid.mobile-kpi-strip .metric-value,
    #mealPlannerPage .mobile-meal-macro-card .metric-value,
    .mobile-standard-kpi-card .metric-value,
    .mobile-kpi-value {
        font-size: clamp(13px, 4vw, 17px) !important;
    }

    .mobile-only-ingredient-table-wrap {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 4px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mobile-ingredient-rich-cards .standard-table,
    .mobile-ingredient-rich-cards .standard-table thead,
    .mobile-ingredient-rich-cards .standard-table tbody,
    .mobile-ingredient-rich-cards .standard-table tr,
    .mobile-ingredient-rich-cards .standard-table th,
    .mobile-ingredient-rich-cards .standard-table td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        border: 0 !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .mobile-ingredient-rich-cards .standard-table thead {
        display: none !important;
    }

    .mobile-ingredient-rich-cards .standard-table tbody {
        display: grid !important;
        gap: 5px !important;
    }

    .mobile-ingredient-rich-cards .standard-table tr {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1.55fr) minmax(76px, .68fr) 38px !important;
        align-items: stretch !important;
        gap: 7px !important;
        min-height: 74px !important;
        padding: 7px !important;
        border: 1px solid rgba(207,197,151,.14) !important;
        border-left: 3px solid var(--lhm-green, #5f8f65) !important;
        border-radius: 8px !important;
        background: var(--lhm-row) !important;
    }

    .mobile-ingredient-rich-cards .standard-table td {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        padding: 0 !important;
        color: var(--lhm-text) !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .ingredient-mobile-info-cell,
    .ingredient-mobile-nutrition-cell,
    .ingredient-mobile-action-cell {
        min-width: 0 !important;
        border-left: 1px solid rgba(207,197,151,.12) !important;
        padding-left: 7px !important;
    }

    .ingredient-mobile-photo-cell {
        justify-content: center !important;
    }

    .ingredient-mobile-image {
        display: inline-grid !important;
        place-items: center !important;
        width: 52px !important;
        height: 52px !important;
        overflow: hidden !important;
        border: 1px solid rgba(207,197,151,.18) !important;
        border-radius: 7px !important;
        background: rgba(0,0,0,.18) !important;
    }

    .ingredient-mobile-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .ingredient-mobile-image.is-placeholder img {
        object-fit: contain !important;
        padding: 5px !important;
        opacity: .82 !important;
    }

    .ingredient-mobile-stack,
    .ingredient-mobile-nutrition {
        display: grid !important;
        align-content: center !important;
        min-width: 0 !important;
        gap: 3px !important;
    }

    .ingredient-mobile-stack strong {
        display: -webkit-box !important;
        max-height: 29px !important;
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: 13.5px !important;
        font-weight: 900 !important;
        line-height: 1.08 !important;
        letter-spacing: .012em !important;
        text-transform: uppercase !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .ingredient-mobile-stack span,
    .ingredient-mobile-stack em {
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 10px !important;
        font-style: normal !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .ingredient-mobile-stack em {
        color: var(--lhm-green, #5f8f65) !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
    }

    .ingredient-mobile-nutrition strong {
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .04em !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .ingredient-mobile-nutrition-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    .ingredient-mobile-nutrient {
        display: grid !important;
        min-width: 0 !important;
        gap: 1px !important;
        padding: 2px 1px !important;
        border-left: 1px solid rgba(207,197,151,.10) !important;
    }

    .ingredient-mobile-nutrient:first-child {
        border-left: 0 !important;
    }

    .ingredient-mobile-nutrient b,
    .ingredient-mobile-nutrient em {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        font-style: normal !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .ingredient-mobile-nutrient b {
        color: var(--lhm-muted) !important;
        font-size: 6.8px !important;
        font-weight: 900 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
    }

    .ingredient-mobile-nutrient em {
        color: var(--lhm-text) !important;
        font-size: 8.6px !important;
        font-weight: 900 !important;
        font-variant-numeric: tabular-nums !important;
    }

    .ingredient-mobile-nutrient.is-pro em,
    .ingredient-mobile-nutrient.is-fib em {
        color: var(--lhm-green, #7e9f69) !important;
    }

    .ingredient-mobile-nutrient.is-carb em,
    .ingredient-mobile-nutrient.is-sug em {
        color: var(--lhm-blue, #d0c287) !important;
    }

    .ingredient-mobile-nutrient.is-fat em {
        color: var(--lhm-orange, #b9894f) !important;
    }

    .ingredient-mobile-action-cell {
        justify-content: center !important;
        padding-left: 5px !important;
    }

    .ingredient-mobile-action-cell .standard-row-action-btn,
    .ingredient-mobile-action-cell .btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 4px !important;
        font-size: 7.3px !important;
        font-weight: 900 !important;
        letter-spacing: .025em !important;
        text-transform: uppercase !important;
    }

    .mobile-only-meal-table-wrap {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 4px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .meal-desktop-table-wrap {
        display: none !important;
    }

    .mobile-meal-rich-cards .standard-table,
    .mobile-meal-rich-cards .standard-table thead,
    .mobile-meal-rich-cards .standard-table tbody,
    .mobile-meal-rich-cards .standard-table tr,
    .mobile-meal-rich-cards .standard-table th,
    .mobile-meal-rich-cards .standard-table td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        border: 0 !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .mobile-meal-rich-cards .standard-table thead {
        display: none !important;
    }

    .mobile-meal-rich-cards .standard-table tbody {
        display: grid !important;
        gap: 5px !important;
    }

    .mobile-meal-rich-cards .standard-table tr {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1.55fr) minmax(76px, .68fr) 38px !important;
        align-items: stretch !important;
        gap: 7px !important;
        min-height: 74px !important;
        padding: 7px !important;
        border: 1px solid rgba(207,197,151,.14) !important;
        border-left: 3px solid var(--lhm-green, #5f8f65) !important;
        border-radius: 8px !important;
        background: var(--lhm-row) !important;
    }

    .mobile-meal-rich-cards .standard-table td {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        padding: 0 !important;
        color: var(--lhm-text) !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .meal-mobile-info-cell,
    .meal-mobile-nutrition-cell,
    .meal-mobile-action-cell {
        min-width: 0 !important;
        border-left: 1px solid rgba(207,197,151,.12) !important;
        padding-left: 7px !important;
    }

    .ingredient-mobile-photo-cell,
    .meal-mobile-photo-cell {
        justify-content: center !important;
    }

    .mobile-photo-favorite-wrap {
        position: relative !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 52px !important;
        height: 52px !important;
    }

    .mobile-image-favorite-overlay {
        position: absolute !important;
        top: -5px !important;
        left: -5px !important;
        z-index: 2 !important;
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-image-favorite-overlay form,
    .mobile-image-favorite-overlay .table-action-form {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
    }

    .mobile-image-favorite-overlay .standard-favorite-btn,
    .mobile-image-favorite-overlay .standard-favorite-static {
        display: inline-grid !important;
        place-items: center !important;
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(207,197,151,.22) !important;
        border-radius: 6px !important;
        background: rgba(7,10,12,.88) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,.28) !important;
        color: var(--lhm-muted) !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .mobile-image-favorite-overlay .standard-favorite-btn.is-favorite,
    .mobile-image-favorite-overlay .standard-favorite-static.is-favorite {
        color: var(--lhm-orange, #b9894f) !important;
    }

    .meal-mobile-image {
        display: inline-grid !important;
        place-items: center !important;
        width: 52px !important;
        height: 52px !important;
        overflow: hidden !important;
        border: 1px solid rgba(207,197,151,.18) !important;
        border-radius: 7px !important;
        background: rgba(0,0,0,.18) !important;
    }

    .meal-mobile-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .meal-mobile-image.is-placeholder img {
        object-fit: contain !important;
        padding: 5px !important;
        opacity: .82 !important;
    }

    .meal-mobile-stack,
    .meal-mobile-nutrition {
        display: grid !important;
        align-content: center !important;
        min-width: 0 !important;
        gap: 3px !important;
    }

    .meal-mobile-stack strong {
        display: -webkit-box !important;
        max-height: 29px !important;
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: 13.5px !important;
        font-weight: 900 !important;
        line-height: 1.08 !important;
        letter-spacing: .012em !important;
        text-transform: uppercase !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .meal-mobile-stack span,
    .meal-mobile-stack em {
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 10px !important;
        font-style: normal !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .meal-mobile-stack em {
        color: var(--lhm-green, #5f8f65) !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
    }

    .meal-mobile-nutrition strong {
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .04em !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .meal-mobile-nutrition-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    .meal-mobile-nutrient {
        display: grid !important;
        min-width: 0 !important;
        gap: 1px !important;
        padding: 2px 1px !important;
        border-left: 1px solid rgba(207,197,151,.10) !important;
    }

    .meal-mobile-nutrient:first-child {
        border-left: 0 !important;
    }

    .meal-mobile-nutrient b,
    .meal-mobile-nutrient em {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        font-style: normal !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .meal-mobile-nutrient b {
        color: var(--lhm-muted) !important;
        font-size: 6.8px !important;
        font-weight: 900 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
    }

    .meal-mobile-nutrient em {
        color: var(--lhm-text) !important;
        font-size: 8.6px !important;
        font-weight: 900 !important;
        font-variant-numeric: tabular-nums !important;
    }

    .meal-mobile-nutrient.is-pro em,
    .meal-mobile-nutrient.is-fib em {
        color: var(--lhm-green, #7e9f69) !important;
    }

    .meal-mobile-nutrient.is-carb em,
    .meal-mobile-nutrient.is-sug em {
        color: var(--lhm-blue, #d0c287) !important;
    }

    .meal-mobile-nutrient.is-fat em {
        color: var(--lhm-orange, #b9894f) !important;
    }

    .meal-mobile-action-cell {
        justify-content: center !important;
        padding-left: 5px !important;
    }

    .meal-mobile-action-cell .standard-row-action-btn,
    .meal-mobile-action-cell .btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 4px !important;
        font-size: 7.3px !important;
        font-weight: 900 !important;
        letter-spacing: .025em !important;
        text-transform: uppercase !important;
    }

}

/* M28 workout planner mobile day-view schema. Desktop stays on the week grid. */
.workout-mobile-metric-grid,
.workout-mobile-date-picker-card,
.workout-mobile-day-panel {
    display: none;
}

@media (max-width: 768px) {
    #workoutPlannerPage {
        display: grid !important;
        gap: var(--lhm-mobile-section-gap, 8px) !important;
    }

    #workoutPlannerPage > .standard-page-header {
        margin: 0 !important;
    }

    #workoutPlannerPage .workout-week-button-group,
    #workoutPlannerPage .workout-desktop-metric-grid,
    #workoutPlannerPage .workout-week-panel {
        display: none !important;
    }

    #workoutPlannerPage .workout-mobile-metric-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: var(--lhm-mobile-card-gap, 6px) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #workoutPlannerPage .workout-mobile-metric-grid .standard-metric-card {
        min-height: var(--lhm-mobile-kpi-height, 66px) !important;
        height: var(--lhm-mobile-kpi-height, 66px) !important;
    }

    #workoutPlannerPage .workout-mobile-metric-grid .metric-value {
        font-size: clamp(11px, 3.4vw, 15px) !important;
    }

    #workoutPlannerPage .workout-mobile-date-picker-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid var(--lhm-border) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 10px 20px rgba(0,0,0,.18) !important;
    }

    #workoutPlannerPage .workout-mobile-date-picker-card .mobile-filter-field {
        gap: 5px !important;
    }

    #workoutPlannerPage .workout-mobile-date-picker-card input[type="date"] {
        min-height: 42px !important;
        padding: 8px 10px !important;
        border: 1px solid rgba(207,197,151,.18) !important;
        border-radius: var(--lhm-radius) !important;
        background: rgba(4, 8, 10, .72) !important;
        color: var(--lhm-text) !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        letter-spacing: .03em !important;
    }

    #workoutPlannerPage .workout-layout-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--lhm-mobile-panel-gap, 8px) !important;
        margin: 0 !important;
    }

    #workoutPlannerPage .workout-mobile-day-panel {
        display: block !important;
        margin: 0 !important;
        border: 1px solid var(--lhm-border) !important;
        border-radius: var(--lhm-radius) !important;
        background: var(--lhm-panel) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 10px 20px rgba(0,0,0,.18) !important;
    }

    #workoutPlannerPage .workout-mobile-day-header {
        min-height: 38px !important;
        padding: 7px 9px !important;
        background: var(--lhm-panel-soft) !important;
        background-image: none !important;
        border-bottom: 1px solid rgba(207,197,151,.10) !important;
    }

    #workoutPlannerPage .workout-mobile-day-header h2 {
        font-size: 13px !important;
        line-height: 1.05 !important;
        letter-spacing: .04em !important;
    }

    #workoutPlannerPage .workout-mobile-day-header .standard-status-chip {
        min-height: 26px !important;
        padding: 5px 7px !important;
        font-size: 7px !important;
        letter-spacing: .08em !important;
        white-space: nowrap !important;
    }

    #workoutPlannerPage .workout-mobile-day-body {
        display: grid !important;
        gap: var(--lhm-mobile-row-gap, 4px) !important;
        padding: var(--lhm-mobile-panel-pad, 8px) !important;
    }

    #workoutPlannerPage .workout-mobile-session-card {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1.05fr) minmax(86px, .85fr) 38px !important;
        align-items: center !important;
        gap: 7px !important;
        min-height: 72px !important;
        padding: 7px !important;
        border: 1px solid rgba(207,197,151,.14) !important;
        border-left: 3px solid var(--lhm-green) !important;
        border-radius: 8px !important;
        background: var(--lhm-row) !important;
        color: var(--lhm-text) !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    #workoutPlannerPage .workout-mobile-session-icon {
        display: inline-grid !important;
        place-items: center !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid rgba(207,197,151,.18) !important;
        border-radius: 7px !important;
        background: rgba(0,0,0,.20) !important;
        color: var(--lhm-green) !important;
        font-size: 16px !important;
    }

    #workoutPlannerPage .workout-mobile-session-main,
    #workoutPlannerPage .workout-mobile-session-data {
        display: grid !important;
        align-content: center !important;
        min-width: 0 !important;
        gap: 3px !important;
        padding-left: 7px !important;
        border-left: 1px solid rgba(207,197,151,.12) !important;
    }

    #workoutPlannerPage .workout-mobile-session-main strong {
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: 13.5px !important;
        font-weight: 900 !important;
        line-height: 1.05 !important;
        letter-spacing: .012em !important;
        text-transform: uppercase !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #workoutPlannerPage .workout-mobile-session-main span,
    #workoutPlannerPage .workout-mobile-session-main em,
    #workoutPlannerPage .workout-mobile-session-data strong,
    #workoutPlannerPage .workout-mobile-session-data span,
    #workoutPlannerPage .workout-mobile-session-data em {
        overflow: hidden !important;
        font-style: normal !important;
        line-height: 1.05 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #workoutPlannerPage .workout-mobile-session-main span,
    #workoutPlannerPage .workout-mobile-session-data strong {
        color: var(--lhm-muted) !important;
        font-size: 10px !important;
        font-weight: 850 !important;
    }

    #workoutPlannerPage .workout-mobile-session-main em,
    #workoutPlannerPage .workout-mobile-session-data em {
        color: var(--lhm-green) !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
    }

    #workoutPlannerPage .workout-mobile-session-data span {
        color: var(--lhm-text) !important;
        font-size: 9px !important;
        font-weight: 850 !important;
    }

    #workoutPlannerPage .workout-mobile-session-action {
        display: inline-grid !important;
        place-items: center !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 4px !important;
        font-size: 7.3px !important;
        font-weight: 900 !important;
        letter-spacing: .025em !important;
        text-transform: uppercase !important;
    }

    #workoutPlannerPage .workout-mobile-exercise-list {
        display: grid !important;
        gap: 4px !important;
        margin-top: 3px !important;
    }

    #workoutPlannerPage .workout-mobile-exercise-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(82px, .8fr) !important;
        gap: 7px !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 6px 7px !important;
        border: 1px solid rgba(207,197,151,.12) !important;
        border-radius: 7px !important;
        background: rgba(0,0,0,.16) !important;
    }

    #workoutPlannerPage .workout-mobile-exercise-card > div {
        display: grid !important;
        min-width: 0 !important;
        gap: 2px !important;
    }

    #workoutPlannerPage .workout-mobile-exercise-card > div + div {
        padding-left: 7px !important;
        border-left: 1px solid rgba(207,197,151,.10) !important;
    }

    #workoutPlannerPage .workout-mobile-exercise-card strong,
    #workoutPlannerPage .workout-mobile-exercise-card span,
    #workoutPlannerPage .workout-mobile-exercise-card em,
    #workoutPlannerPage .workout-mobile-exercise-card small {
        overflow: hidden !important;
        line-height: 1.05 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #workoutPlannerPage .workout-mobile-exercise-card strong {
        color: var(--lhm-text) !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
    }

    #workoutPlannerPage .workout-mobile-exercise-card span,
    #workoutPlannerPage .workout-mobile-exercise-card small {
        color: var(--lhm-muted) !important;
        font-size: 8px !important;
        font-weight: 800 !important;
    }

    #workoutPlannerPage .workout-mobile-exercise-card em {
        color: var(--lhm-green) !important;
        font-size: 8px !important;
        font-style: normal !important;
        font-weight: 900 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
    }

    #workoutPlannerPage .workout-mobile-full-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 42px !important;
        margin-top: 4px !important;
        text-align: center !important;
    }

    #workoutPlannerPage .workout-mobile-empty-state {
        display: grid !important;
        gap: 4px !important;
        text-align: left !important;
    }

    #workoutPlannerPage .workout-mobile-empty-state strong {
        color: var(--lhm-text) !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
    }

    #workoutPlannerPage .workout-mobile-empty-state span {
        color: var(--lhm-muted) !important;
        font-size: 10px !important;
    }

    #workoutPlannerPage .workout-builder-header .standard-muted,
    #workoutPlannerPage .selected-exercise-meta {
        display: none !important;
    }

    #workoutPlannerPage .workout-progress-panel {
        margin: 0 !important;
    }
}

@media (max-width: 390px) {
    #workoutPlannerPage .workout-mobile-session-card {
        grid-template-columns: 38px minmax(0, 1fr) 34px !important;
    }

    #workoutPlannerPage .workout-mobile-session-data {
        grid-column: 2 / span 2 !important;
        grid-row: 2 !important;
        padding-top: 5px !important;
        padding-left: 7px !important;
    }

    #workoutPlannerPage .workout-mobile-session-action {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 34px !important;
        min-width: 34px !important;
    }

    #workoutPlannerPage .workout-mobile-exercise-card {
        grid-template-columns: 1fr !important;
    }

    #workoutPlannerPage .workout-mobile-exercise-card > div + div {
        padding-top: 4px !important;
        padding-left: 0 !important;
        border-top: 1px solid rgba(207,197,151,.10) !important;
        border-left: 0 !important;
    }
}

/* M29 workout planner mobile polish. Desktop remains unchanged. */
@media (max-width: 768px) {
    #workoutPlannerPage > .standard-page-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    #workoutPlannerPage > .standard-page-header .standard-title-block {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    #workoutPlannerPage .workout-page-actions {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        margin-left: auto !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    #workoutPlannerPage .workout-builder-header,
    #workoutPlannerPage .workout-edit-exercises-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    #workoutPlannerPage .workout-builder-header > div,
    #workoutPlannerPage .workout-edit-exercises-header > h3 {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    #workoutPlannerPage #workoutEditPanel .workout-status-control {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #workoutPlannerPage #workoutEditPanel .workout-status-control .seg-choice span {
        min-height: 36px !important;
        padding: 9px 4px !important;
        font-size: 9px !important;
        line-height: 1 !important;
        display: grid !important;
        place-items: center !important;
        white-space: nowrap !important;
    }

    #workoutPlannerPage .workout-mobile-set-stack {
        display: grid !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    #workoutPlannerPage .workout-mobile-exercise-card .workout-mobile-set-stack small {
        display: block !important;
        overflow: visible !important;
        color: var(--lhm-muted) !important;
        font-size: 7.8px !important;
        line-height: 1.15 !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    #workoutPlannerPage .workout-edit-set-table {
        display: grid !important;
        gap: 5px !important;
    }

    #workoutPlannerPage .workout-edit-set-table .workout-set-header {
        display: none !important;
    }

    #workoutPlannerPage .workout-edit-set-table .workout-set-row {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 58px !important;
        gap: 5px !important;
        align-items: center !important;
        padding: 6px !important;
        border: 1px solid rgba(207,197,151,.10) !important;
        border-radius: 7px !important;
        background: rgba(0,0,0,.13) !important;
    }

    #workoutPlannerPage .workout-edit-set-table .workout-set-row > span:first-child {
        display: inline-grid !important;
        place-items: center !important;
        height: 31px !important;
        border: 1px solid rgba(207,197,151,.12) !important;
        border-radius: 6px !important;
        color: var(--lhm-muted) !important;
        font-size: 9px !important;
        font-weight: 900 !important;
    }

    #workoutPlannerPage .workout-edit-set-table .workout-set-row input,
    #workoutPlannerPage .workout-edit-set-table .workout-set-row select {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 31px !important;
        padding: 5px 6px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 390px) {
}
/* M30 mobile page-header alignment follow-up. Keep headers consistent across module pages. */
@media (max-width: 768px) {
    .standard-page-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 8px !important;
        min-height: 58px !important;
        overflow: hidden !important;
    }

    .standard-page-header .standard-title-block {
        grid-column: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .standard-page-header .standard-title-row {
        min-width: 0 !important;
        width: 100% !important;
        padding: 9px 0 9px 9px !important;
        gap: 8px !important;
    }

    .standard-page-header .standard-title-icon {
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .standard-page-header h1,
    .standard-title-row h1 {
        min-width: 0 !important;
        font-size: clamp(20px, 5.8vw, 24px) !important;
        line-height: 1 !important;
        letter-spacing: .025em !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .standard-page-header .standard-page-actions,
    .standard-page-header .grocery-page-actions,
    #mealPlannerPage .planner-week-actions,
    #workoutPlannerPage .workout-page-actions {
        grid-column: 2 !important;
        align-self: center !important;
        justify-self: end !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px 8px 8px 0 !important;
    }

    #workoutPlannerPage .workout-progress-note {
        display: none !important;
    }
}

/* M31 workout mobile header/button correction. Desktop remains unchanged. */
@media (max-width: 768px) {
    #workoutPlannerPage > .standard-page-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 8px !important;
        min-height: 58px !important;
        overflow: hidden !important;
    }

    #workoutPlannerPage > .standard-page-header .standard-title-block {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    #workoutPlannerPage > .standard-page-header .workout-page-actions {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px 8px 8px 0 !important;
    }

    #workoutPlannerPage > .standard-page-header .workout-week-button-group {
        display: none !important;
    }

    #workoutPlannerPage .workout-builder-header,
    #workoutPlannerPage .workout-edit-exercises-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #workoutPlannerPage .workout-progress-controls-panel .standard-graph-control-note.workout-progress-note,
    #workoutPlannerPage .workout-progress-controls-panel .workout-progress-note,
    #workoutPlannerPage .workout-progress-note *,
    #workoutProgressExerciseName,
    #workoutProgressEntryCount {
        display: none !important;
    }
}

@media (max-width: 390px) {
}


/* M32 canonical mobile buttons.
   Keep this generic: no page-scoped button selectors. */
@media (max-width: 768px) {
    :root {
        --lhm-mobile-button-min-height: 34px;
        --lhm-mobile-button-pad-x: 10px;
        --lhm-mobile-button-pad-y: 7px;
        --lhm-mobile-button-gap: 6px;
        --lhm-mobile-button-font-size: 9px;
    }

    .btn,
    button.btn,
    a.btn,
    .standard-primary-btn,
    .standard-secondary-btn,
    .standard-danger-btn,
    .standard-nav-btn,
    .standard-row-action-btn,
    .mobile-panel-add-action,
    .mobile-panel-generate-action,
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--lhm-mobile-button-gap) !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        min-height: var(--lhm-mobile-button-min-height) !important;
        height: auto !important;
        margin: 0 !important;
        padding: var(--lhm-mobile-button-pad-y) var(--lhm-mobile-button-pad-x) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        font-size: var(--lhm-mobile-button-font-size) !important;
        line-height: 1 !important;
        letter-spacing: .035em !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .btn > i,
    button.btn > i,
    a.btn > i,
    .standard-primary-btn > i,
    .standard-secondary-btn > i,
    .standard-danger-btn > i,
    .standard-nav-btn > i,
    .standard-row-action-btn > i,
    .mobile-panel-add-action > i,
    .mobile-panel-generate-action > i {
        display: inline-grid !important;
        flex: 0 0 12px !important;
        place-items: center !important;
        width: 12px !important;
        min-width: 12px !important;
        height: 12px !important;
        min-height: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
    }


    .standard-page-actions,
    .grocery-page-actions,
    .standard-panel-header,
    .standard-section-header,
    .grocery-header-row,
    .standard-drawer-actions,
    .drawer-actions,
    .button-row,
    .button-row.wrap,
    .mobile-view-action-row,
    .mobile-action-strip,
    .grocery-panel-actions,
    .grocery-recommended-actions {
        display: flex !important;
        align-items: center !important;
        gap: var(--lhm-mobile-button-gap) !important;
    }

    .standard-drawer-actions,
    .drawer-actions,
    .button-row,
    .button-row.wrap,
    .mobile-view-action-row,
    .mobile-action-strip,
    .grocery-panel-actions,
    .grocery-recommended-actions {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    .standard-page-actions,
    .grocery-page-actions,
    .standard-panel-header,
    .standard-section-header,
    .grocery-header-row {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
    }

    .standard-drawer-actions > .btn,
    .drawer-actions > .btn,
    .button-row > .btn,
    .mobile-view-action-row > .btn,
    .mobile-action-strip > .btn,
    .grocery-panel-actions > .btn,
    .grocery-recommended-actions > .btn,
    .standard-panel-header > .btn,
    .standard-section-header > .btn,
    .grocery-header-row > .btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
    }

    .standard-page-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 8px !important;
    }

    .standard-page-header .standard-title-block {
        grid-column: 1 !important;
        min-width: 0 !important;
    }

    .standard-page-header .standard-page-actions,
    .standard-page-header .grocery-page-actions {
        grid-column: 2 !important;
        justify-self: end !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px !important;
    }
}

/* M35 canonical mobile vertical rhythm and content-fit buttons.
   Gap handles page spacing; top-level cards/panels should not add their own margins. */
@media (max-width: 768px) {
    :root {
        --lhm-mobile-page-gap: 10px;
        --lhm-mobile-button-min-height: 34px;
        --lhm-mobile-button-pad-x: 10px;
        --lhm-mobile-button-pad-y: 7px;
        --lhm-mobile-button-gap: 5px;
        --lhm-mobile-button-font-size: 10px;
    }

    .standard-title-row h1::after {
        content: none !important;
        display: none !important;
    }

    .standard-page-content,
    .page-content,
    .standard-page-content > [data-page],
    .page-content > [data-page],
    .mobile-library-page,
    .grocery-page-grid,
    #mealPlannerPage,
    #workoutPlannerPage {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start !important;
        gap: var(--lhm-mobile-page-gap) !important;
    }

    .standard-page-header,
    .mobile-kpi-strip,
    .mobile-meal-macro-grid,
    .grocery-metric-grid.mobile-kpi-strip,
    .standard-metric-grid.mobile-kpi-strip,
    .mobile-filter-card,
    .mobile-library-search-panel,
    .mobile-meal-filter-form,
    .mobile-library-page .grocery-filter-bar,
    #mealPlannerPage .mobile-view-action-row,
    #mealPlannerPage .mobile-action-strip,
    .standard-panel,
    .standard-library-panel,
    .grocery-panel,
    #mealPlannerPage .mobile-meal-user-card,
    #mealPlannerPage .mobile-meal-day-card {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #mealPlannerPage .standard-page-header .planner-week-button-group,
    #mealPlannerPage .standard-page-header .planner-clear-week-form {
        display: none !important;
    }

    .btn,
    button.btn,
    a.btn,
    .standard-primary-btn,
    .standard-secondary-btn,
    .standard-danger-btn,
    .standard-nav-btn,
    .standard-row-action-btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .mobile-panel-add-action,
    .mobile-panel-generate-action {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--lhm-mobile-button-gap) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: var(--lhm-mobile-button-min-height) !important;
        height: auto !important;
        margin: 0 !important;
        padding: var(--lhm-mobile-button-pad-y) var(--lhm-mobile-button-pad-x) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        font-size: var(--lhm-mobile-button-font-size) !important;
        line-height: 1 !important;
        letter-spacing: .035em !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .btn > i,
    button.btn > i,
    a.btn > i,
    .standard-primary-btn > i,
    .standard-secondary-btn > i,
    .standard-danger-btn > i,
    .standard-nav-btn > i,
    .standard-row-action-btn > i,
    .mobile-panel-add-action > i,
    .mobile-panel-generate-action > i {
        display: inline-grid !important;
        flex: 0 0 auto !important;
        place-items: center !important;
        width: 1em !important;
        min-width: 1em !important;
        height: 1em !important;
        min-height: 1em !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1em !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    .standard-icon-btn,
    button.standard-icon-btn,
    a.standard-icon-btn,
    .standard-icon-only-btn,
    button.standard-icon-only-btn,
    a.standard-icon-only-btn {
        display: inline-grid !important;
        flex: 0 0 var(--lhm-mobile-button-min-height) !important;
        place-items: center !important;
        width: var(--lhm-mobile-button-min-height) !important;
        min-width: var(--lhm-mobile-button-min-height) !important;
        max-width: var(--lhm-mobile-button-min-height) !important;
        height: var(--lhm-mobile-button-min-height) !important;
        min-height: var(--lhm-mobile-button-min-height) !important;
        padding: 0 !important;
        aspect-ratio: 1 / 1 !important;
        text-align: center !important;
    }

    .standard-icon-btn > i,
    button.standard-icon-btn > i,
    a.standard-icon-btn > i,
    .standard-icon-only-btn > i,
    button.standard-icon-only-btn > i,
    a.standard-icon-only-btn > i {
        display: inline-grid !important;
        place-items: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    .button-row > form,
    .button-row.wrap > form,
    .standard-drawer-actions > form,
    .drawer-actions > form,
    .grocery-panel-actions > form,
    .grocery-recommended-actions > form,
    .standard-page-actions > form,
    .grocery-page-actions > form {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .button-row,
    .button-row.wrap,
    .standard-drawer-actions,
    .drawer-actions,
    .grocery-panel-actions,
    .grocery-recommended-actions,
    .mobile-view-action-row,
    .mobile-action-strip {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: var(--lhm-mobile-button-gap) !important;
    }
}


/* M35 mobile spacing/table cleanup: gap is the only vertical rhythm source. */
@media (max-width: 768px) {
    #appMain,
    .app-main,
    main,
    [data-page],
    .mobile-library-page,
    .mobile-focused-shell,
    .mobile-meal-planner,
    .grocery-page-grid,
    .health-dashboard-grid {
        gap: var(--lhm-mobile-section-gap, 10px) !important;
    }

    .standard-page-header,
    .standard-title-row,
    .standard-metric-grid,
    .standard-metric-grid.mobile-kpi-strip,
    .mobile-kpi-strip,
    .mobile-health-stat-grid,
    .mobile-filter-card,
    .mobile-library-search-panel,
    .standard-filter-bar,
    .standard-panel,
    .standard-library-panel,
    .grocery-panel,
    .mobile-card,
    .mobile-info-card,
    .mobile-meal-user-card,
    .mobile-meal-day-card,
    .mobile-view-action-row,
    .mobile-meal-filter-panel,
    .mobile-meal-filter-form {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .library-filter-panel-body {
        display: none !important;
    }

    .ingredient-desktop-table-wrap {
        display: none !important;
    }

    .mobile-only-ingredient-table-wrap {
        display: block !important;
    }

    #mealPlannerPage .mobile-meal-filter-panel {
        display: grid !important;
        gap: var(--lhm-mobile-button-gap, 6px) !important;
    }

    #mealPlannerPage .mobile-meal-filter-panel .mobile-meal-filter-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #mealPlannerPage .mobile-meal-filter-panel .mobile-view-action-row {
        justify-content: flex-end !important;
        width: 100% !important;
        padding-top: 2px !important;
    }

    #groceryListPage .grocery-metric-grid.mobile-kpi-strip,
    #groceryListPage .grocery-panel,
    #groceryListPage .grocery-panel-body,
    #groceryListPage .grocery-recommended-actions,
    #healthPage .mobile-health-view,
    #healthPage .mobile-health-stack,
    #healthPage .mobile-card,
    #healthPage .mobile-info-card,
    #healthPage .standard-panel {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #groceryListPage .grocery-panel-actions .grocery-action-label,
    #groceryListPage .grocery-recommended-actions .grocery-action-label,
    #groceryListPage .mobile-grocery-recommended-cards .grocery-action-label,
    #groceryListPage .mobile-panel-generate-action .grocery-action-label {
        display: none !important;
    }

    #groceryListPage .grocery-panel-actions .btn,
    #groceryListPage .grocery-recommended-actions .btn,
    #groceryListPage .mobile-grocery-recommended-cards .btn,
    #groceryListPage .mobile-panel-generate-action {
        display: inline-grid !important;
        place-items: center !important;
        width: var(--lhm-mobile-button-min-height, 30px) !important;
        min-width: var(--lhm-mobile-button-min-height, 30px) !important;
        max-width: var(--lhm-mobile-button-min-height, 30px) !important;
        height: var(--lhm-mobile-button-min-height, 30px) !important;
        min-height: var(--lhm-mobile-button-min-height, 30px) !important;
        padding: 0 !important;
        font-size: 11px !important;
    }

    #groceryListPage .grocery-panel-actions .btn i,
    #groceryListPage .grocery-recommended-actions .btn i,
    #groceryListPage .mobile-grocery-recommended-cards .btn i,
    #groceryListPage .mobile-panel-generate-action i {
        margin: 0 !important;
        line-height: 1 !important;
    }

    .mobile-grocery-manual-cards .standard-row-title span,
    .mobile-grocery-recommended-cards .standard-row-title span,
    .mobile-grocery-manual-cards td,
    .mobile-grocery-recommended-cards td {
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
    }

    #healthPage .mobile-health-stat-grid {
        padding: 0 !important;
        border-top: 0 !important;
        background: transparent !important;
    }
}

@media (max-width: 768px) {
    #mealPlannerPage .mobile-meal-planner,
    #groceryListPage .grocery-page-grid,
    #healthPage .mobile-health-view {
        display: grid !important;
        gap: var(--lhm-mobile-section-gap, 10px) !important;
    }
}

@media (max-width: 768px) {
    #mealPlannerPage .mobile-meal-filter-panel {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* M36 canonical mobile rhythm, checkbox cleanup, and grocery shopping polish. */
@media (max-width: 768px) {
    :root {
        --lhm-mobile-page-gap: 10px;
        --lhm-mobile-section-gap: 10px;
        --lhm-mobile-button-min-height: 34px;
        --lhm-mobile-button-pad-x: 10px;
        --lhm-mobile-button-pad-y: 7px;
        --lhm-mobile-button-gap: 5px;
    }

    .standard-page-content,
    .page-content,
    .standard-page-content > [data-page],
    .page-content > [data-page],
    #mealPlannerPage,
    .mobile-library-page,
    .mobile-meal-planner,
    .grocery-page-grid,
    #healthPage .mobile-health-view {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start !important;
        gap: var(--lhm-mobile-page-gap) !important;
        row-gap: var(--lhm-mobile-page-gap) !important;
    }

    .standard-page-header,
    .standard-title-row,
    .standard-metric-grid,
    .standard-metric-grid.mobile-kpi-strip,
    .mobile-kpi-strip,
    .mobile-meal-macro-grid,
    .mobile-filter-card,
    .mobile-library-search-panel,
    .standard-filter-bar,
    .standard-filter-bar.is-library-filter,
    #mealPlannerPage .mobile-meal-filter-panel,
    #mealPlannerPage .mobile-meal-filter-form,
    #mealPlannerPage .mobile-view-action-row,
    #mealPlannerPage .mobile-action-strip,
    .standard-panel,
    .standard-library-panel,
    .grocery-panel,
    .grocery-panel-body,
    .mobile-card,
    .mobile-info-card,
    .mobile-meal-user-card,
    .mobile-meal-day-card,
    .health-dashboard-grid,
    #healthPage .standard-panel,
    #healthPage .mobile-card,
    #healthPage .mobile-info-card {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .mobile-library-search-panel,
    .standard-filter-bar.is-library-filter,
    #mealPlannerPage .mobile-meal-filter-panel {
        margin: 0 !important;
    }

    #mealPlannerPage .mobile-meal-filter-panel {
        display: grid !important;
        gap: var(--lhm-mobile-button-gap) !important;
    }

    #mealPlannerPage .mobile-meal-filter-panel .mobile-meal-filter-form {
        margin: 0 !important;
    }

    #groceryListPage .grocery-panel-actions .grocery-action-label,
    #groceryListPage .grocery-recommended-actions .grocery-action-label,
    #groceryListPage .mobile-grocery-recommended-cards .grocery-action-label,
    #groceryListPage .mobile-panel-generate-action .grocery-action-label {
        display: none !important;
    }

    #groceryListPage .grocery-panel-actions .btn,
    #groceryListPage .grocery-recommended-actions .btn,
    #groceryListPage .mobile-grocery-recommended-cards .btn,
    #groceryListPage .mobile-panel-generate-action {
        display: inline-grid !important;
        place-items: center !important;
        justify-content: center !important;
        align-items: center !important;
        width: var(--lhm-mobile-button-min-height) !important;
        min-width: var(--lhm-mobile-button-min-height) !important;
        max-width: var(--lhm-mobile-button-min-height) !important;
        height: var(--lhm-mobile-button-min-height) !important;
        min-height: var(--lhm-mobile-button-min-height) !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    #groceryListPage .grocery-panel-actions .btn i,
    #groceryListPage .grocery-recommended-actions .btn i,
    #groceryListPage .mobile-grocery-recommended-cards .btn i,
    #groceryListPage .mobile-panel-generate-action i {
        display: inline-grid !important;
        place-items: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    .mobile-grocery-manual-cards .standard-table tr {
        grid-template-columns: 24px minmax(0, 1fr) 42px 34px !important;
        column-gap: 8px !important;
    }

    .mobile-grocery-manual-cards .grocery-cart-form,
    .grocery-shopping-check .grocery-cart-form {
        justify-content: center !important;
        width: 24px !important;
        min-width: 24px !important;
        margin: 0 !important;
    }

    .grocery-shopping-row {
        grid-template-columns: 24px minmax(0, 1fr) auto !important;
        column-gap: 10px !important;
    }

    .grocery-shopping-row-actions {
        display: none !important;
    }

    .grocery-shopping-panel .standard-drawer-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px !important;
    }

    .grocery-shopping-panel .standard-drawer-close {
        display: inline-grid !important;
        place-items: center !important;
        justify-self: end !important;
        width: var(--lhm-mobile-button-min-height) !important;
        min-width: var(--lhm-mobile-button-min-height) !important;
        height: var(--lhm-mobile-button-min-height) !important;
        min-height: var(--lhm-mobile-button-min-height) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* M37 final mobile rhythm: spacing comes from parent grid gaps, not child margins. */
@media (max-width: 768px) {
    :root {
        --lhm-mobile-page-gap: 10px;
        --lhm-mobile-section-gap: 10px;
    }

    .standard-page-content,
    .page-content,
    .standard-page-content > [data-page],
    .page-content > [data-page],
    #mealPlannerPage,
    #mealPlannerPage .mobile-meal-planner,
    .mobile-library-page,
    #groceryListPage .grocery-page-grid,
    #healthPage .mobile-health-view {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start !important;
        gap: var(--lhm-mobile-page-gap) !important;
        row-gap: var(--lhm-mobile-page-gap) !important;
    }

    .standard-page-header,
    .standard-title-row,
    #mealPlannerPage .mobile-meal-macro-grid,
    .mobile-library-page > .mobile-kpi-strip,
    .mobile-library-page > .grocery-metric-grid.mobile-kpi-strip,
    .standard-metric-grid.mobile-kpi-strip,
    .mobile-filter-card,
    .mobile-library-search-panel,
    .mobile-library-page .standard-filter-bar.is-library-filter,
    .mobile-library-page .grocery-filter-bar,
    #mealPlannerPage .mobile-meal-filter-panel,
    #mealPlannerPage .mobile-meal-filter-form,
    #mealPlannerPage .mobile-view-action-row,
    #mealPlannerPage .mobile-action-strip,
    .standard-panel,
    .standard-library-panel,
    .grocery-panel,
    .grocery-recommended-panel,
    .grocery-panel-body,
    .mobile-card,
    .mobile-info-card,
    .mobile-meal-user-card,
    .mobile-meal-day-card,
    #healthPage .standard-panel,
    #healthPage .mobile-card,
    #healthPage .mobile-info-card {
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .mobile-grocery-manual-cards .standard-table tr {
        grid-template-columns: 24px minmax(0, 1fr) 42px 34px !important;
        column-gap: 12px !important;
    }

    .grocery-shopping-row {
        grid-template-columns: 24px minmax(0, 1fr) !important;
        column-gap: 12px !important;
    }

    .mobile-grocery-recommended-cards .grocery-quantity-stack,
    .mobile-grocery-recommended-cards .grocery-quantity-stack span {
        color: var(--lhm-text, var(--text)) !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        letter-spacing: .01em !important;
    }

    .grocery-shopping-panel .standard-drawer-header {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 20 !important;
        display: block !important;
        grid-template-columns: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .grocery-shopping-panel .standard-drawer-header > div {
        display: none !important;
    }

    .grocery-shopping-panel .standard-drawer-close {
        display: inline-grid !important;
        place-items: center !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .grocery-shopping-toolbar {
        padding-right: 52px !important;
    }

    .grocery-shopping-toolbar .standard-muted {
        display: none !important;
    }

    .grocery-shopping-status,
    .grocery-shopping-row-actions {
        display: none !important;
    }

}

/* M36 shared mobile rich row table schema.
   Generic so vehicle/details-style pages can use the same four-column mobile row pattern
   without page-scoped button sizing hacks. */
.mobile-only-rich-table-wrap,
.mobile-only-metric {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only-metric {
        display: grid !important;
    }

    .mobile-hide-table-wrap {
        display: none !important;
    }

    .mobile-only-rich-table-wrap {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 4px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mobile-rich-card-table,
    .mobile-rich-card-table thead,
    .mobile-rich-card-table tbody,
    .mobile-rich-card-table tr,
    .mobile-rich-card-table th,
    .mobile-rich-card-table td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        border: 0 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .mobile-rich-card-table thead {
        display: none !important;
    }

    .mobile-rich-card-table tbody {
        display: grid !important;
        gap: 5px !important;
    }

    .mobile-rich-card-table tr {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1.55fr) minmax(78px, .72fr) 38px !important;
        align-items: stretch !important;
        gap: 7px !important;
        min-height: 74px !important;
        padding: 7px !important;
        border: 1px solid rgba(207,197,151,.14) !important;
        border-left: 3px solid var(--lhm-green, #5f8f65) !important;
        border-radius: 8px !important;
        background: var(--lhm-row) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.012) !important;
    }

    .mobile-rich-card-table td {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        padding: 0 !important;
        color: var(--lhm-text) !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .mobile-rich-photo-cell {
        justify-content: center !important;
    }

    .mobile-rich-info-cell,
    .mobile-rich-data-cell,
    .mobile-rich-action-cell {
        min-width: 0 !important;
        border-left: 1px solid rgba(207,197,151,.12) !important;
        padding-left: 7px !important;
    }

    .mobile-rich-icon-tile {
        display: inline-grid !important;
        place-items: center !important;
        width: 52px !important;
        height: 52px !important;
        overflow: hidden !important;
        border: 1px solid rgba(207,197,151,.18) !important;
        border-radius: 7px !important;
        background: rgba(0,0,0,.18) !important;
        color: var(--lhm-accent, #d0c287) !important;
        font-size: 18px !important;
    }

    .mobile-rich-stack,
    .mobile-rich-metrics {
        display: grid !important;
        align-content: center !important;
        min-width: 0 !important;
        gap: 3px !important;
        width: 100% !important;
    }

    .mobile-rich-stack strong {
        display: -webkit-box !important;
        max-height: 29px !important;
        overflow: hidden !important;
        color: var(--lhm-text) !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.08 !important;
        letter-spacing: .012em !important;
        text-transform: uppercase !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .mobile-rich-stack span,
    .mobile-rich-stack em {
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 9.5px !important;
        font-style: normal !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .mobile-rich-stack em {
        color: var(--lhm-green, #7e9f69) !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
    }

    .mobile-rich-metrics > strong {
        overflow: hidden !important;
        color: var(--lhm-muted) !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .04em !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .mobile-rich-metric-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    .mobile-rich-metric {
        display: grid !important;
        min-width: 0 !important;
        gap: 1px !important;
        padding: 2px 1px !important;
        border-left: 1px solid rgba(207,197,151,.10) !important;
    }

    .mobile-rich-metric:first-child {
        border-left: 0 !important;
    }

    .mobile-rich-metric b,
    .mobile-rich-metric em {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        font-style: normal !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .mobile-rich-metric b {
        color: var(--lhm-muted) !important;
        font-size: 6.8px !important;
        font-weight: 900 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
    }

    .mobile-rich-metric em {
        color: var(--lhm-text) !important;
        font-size: 8.4px !important;
        font-weight: 900 !important;
        font-variant-numeric: tabular-nums !important;
    }

    .mobile-rich-chip-row {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    .mobile-rich-chip-row .standard-status-chip {
        min-height: 16px !important;
        padding: 2px 4px !important;
        font-size: 6.8px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .mobile-rich-action-cell {
        justify-content: center !important;
        padding-left: 5px !important;
    }

    .mobile-rich-action-cell .standard-row-action-btn,
    .mobile-rich-action-cell .btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 4px !important;
        font-size: 7.3px !important;
        font-weight: 900 !important;
        letter-spacing: .025em !important;
        text-transform: uppercase !important;
    }

    .mobile-rich-card-table .standard-empty-state {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .mobile-rich-card-table tr.mobile-rich-empty-row {
        grid-template-columns: 1fr !important;
    }

    .mobile-rich-card-table tr.mobile-rich-empty-row td {
        display: block !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* M37 mobile rich-row refinements. Keep generic: quarter KPI strips and full-width metric rows. */
@media (max-width: 768px) {
    .mobile-kpi-strip.mobile-kpi-quarter,
    .standard-metric-grid.mobile-kpi-strip.mobile-kpi-quarter {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .mobile-rich-metric-row.is-single {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .mobile-rich-metric.is-full,
    .mobile-rich-metric-row.is-single .mobile-rich-metric {
        border-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mobile-rich-metric.is-full em,
    .mobile-rich-metric-row.is-single .mobile-rich-metric em {
        font-size: 9px !important;
    }
}

@media (max-width: 768px) {
    .standard-metric-grid.mobile-kpi-strip > .desktop-only-metric,
    .standard-metric-grid.mobile-kpi-strip > .budget-desktop-only-metric,
    .mobile-kpi-strip > .desktop-only-metric,
    .mobile-kpi-strip > .budget-desktop-only-metric {
        display: none !important;
    }
}

/* Meal Planner mobile macro cards: show selected-day totals and targets without truncating digits. */
@media (max-width: 768px) {
    #mealPlannerPage .mobile-meal-macro-card {
        overflow: hidden !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .metric-value.mobile-macro-value,
    #mealPlannerPage .mobile-meal-macro-card .mobile-kpi-value.mobile-macro-value {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
        white-space: normal !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .mobile-macro-current,
    #mealPlannerPage .mobile-meal-macro-card .mobile-macro-target {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
        text-align: center !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .mobile-macro-current {
        font-size: clamp(10px, 3.05vw, 13px) !important;
        font-weight: 950 !important;
        color: var(--lhm-text) !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .mobile-macro-target {
        margin-top: 1px !important;
        font-size: clamp(7px, 2.15vw, 9px) !important;
        font-weight: 850 !important;
        color: var(--lhm-muted) !important;
        opacity: .94 !important;
    }

    #mealPlannerPage .mobile-meal-macro-card .mobile-kpi-meta {
        display: none !important;
    }
}

/* Life Planner mobile: keep one KPI card set and compact live filters. */
@media (max-width: 768px) {
    #lifePlannerPage > .planner-desktop-metric-grid,
    #lifePlannerPage > .planner-metric-grid:not(.planner-mobile-metric-grid) {
        display: none !important;
    }

    #lifePlannerPage > .planner-mobile-metric-grid {
        display: grid !important;
    }

    #lifePlannerPage .planner-mobile-filter-panel {
        padding: 7px !important;
    }

    #lifePlannerPage .planner-mobile-filter-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
        gap: 6px !important;
        width: 100% !important;
    }

    #lifePlannerPage .planner-mobile-filter-form label {
        min-height: 0 !important;
        padding: 0 !important;
        gap: 3px !important;
    }

    #lifePlannerPage .planner-mobile-date-filter {
        grid-column: 1 / -1 !important;
    }

    #lifePlannerPage .planner-mobile-filter-form input,
    #lifePlannerPage .planner-mobile-filter-form select {
        min-height: 30px !important;
        height: 30px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
    }
}

/* HUD mobile dashboard action/refinement overrides. Keep this last so mobile-core does not resurrect HUD metric cards or button drift. */
@media (max-width: 768px) {
    .hud-command-header + .standard-metric-grid,
    .hud-command-header ~ .standard-metric-grid.hud-metric-grid,
    .hud-command-header ~ .hud-metric-grid,
    .hud-metric-grid,
    .standard-metric-grid.hud-metric-grid,
    .mobile-kpi-strip.hud-metric-grid {
        display: none !important;
    }

    .hud-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .hud-panel-grid,
    .hud-row-top,
    .hud-row-mid,
    .hud-row-bottom,
    .hud-row-extra {
        display: contents !important;
    }

    .hud-panel.standard-panel,
    .hud-panel,
    .hud-alert-item,
    .hud-mini-card,
    .hud-timeline-card,
    .hud-goal-card,
    .hud-moderation-row,
    .hud-weather-day,
    .hud-stat-grid > div,
    .hud-spending-overview,
    .hud-health-chart,
    .hud-bill-today-row {
        background-image: none !important;
    }

    .hud-panel::after {
        display: none !important;
    }

    .hud-alerts-panel,
    .hud-weather-panel,
    .hud-budget-panel,
    .hud-health-panel {
        grid-column: 1 / -1 !important;
    }

    .hud-events-panel,
    .hud-tasks-panel,
    .hud-grocery-panel,
    .hud-food-panel,
    .hud-books-panel,
    .hud-goals-panel,
    .hud-documents-panel,
    .hud-vehicle-panel,
    .hud-moderator-panel {
        grid-column: span 1 !important;
    }

    .hud-panel .standard-panel-header {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 0 !important;
        padding: 7px 8px 6px 10px !important;
    }

    .hud-panel .standard-panel-header > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .hud-panel .standard-panel-header h2 {
        font-size: 12px !important;
        line-height: 1.05 !important;
        gap: 5px !important;
    }

    .hud-panel .standard-panel-header .standard-kicker {
        display: none !important;
    }

    .hud-panel .standard-panel-header .standard-icon-btn,
    .hud-panel .standard-panel-header .standard-icon-only-btn,
    .hud-panel .standard-panel-header > .btn,
    .hud-panel .standard-panel-header > a.btn,
    .hud-panel .standard-panel-header > button.btn {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        flex: 0 0 28px !important;
        display: inline-grid !important;
        place-items: center !important;
        text-align: center !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    .hud-panel .standard-panel-header .standard-icon-btn > i,
    .hud-panel .standard-panel-header .standard-icon-only-btn > i {
        display: inline-grid !important;
        place-items: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-size: 12px !important;
        text-align: center !important;
    }

    .hud-panel .standard-panel-body {
        gap: 7px !important;
        padding: 8px 9px 9px 10px !important;
    }

    .hud-alerts-panel .hud-card-list,
    .hud-events-panel .hud-timeline-list,
    .hud-tasks-panel .hud-timeline-list,
    .hud-vehicle-scroll,
    .hud-food-panel .hud-card-list,
    .hud-grocery-panel .hud-card-scroll {
        max-height: 112px !important;
        overflow-y: auto !important;
        padding-right: 4px !important;
        scrollbar-gutter: stable !important;
    }

    .hud-food-panel .hud-card-list {
        max-height: 140px !important;
    }

    .hud-weather-panel .standard-panel-body {
        display: grid !important;
        grid-template-columns: 78px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 5px 7px 7px 8px !important;
        min-height: 44px !important;
    }

    .hud-weather-hero {
        display: block !important;
        min-height: 0 !important;
    }

    .hud-weather-hero img,
    .hud-weather-alert-badge {
        display: none !important;
    }

    .hud-current-weather {
        display: grid !important;
        gap: 0 !important;
        min-width: 0 !important;
    }

    .hud-current-weather strong {
        font-size: 22px !important;
        line-height: .95 !important;
    }

    .hud-current-weather span {
        font-size: 9px !important;
        line-height: 1.1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .hud-current-weather small {
        display: none !important;
    }

    .hud-weather-days {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    .hud-weather-day {
        min-width: 0 !important;
        padding: 4px 3px !important;
        gap: 1px !important;
        text-align: center !important;
    }

    .hud-weather-day strong,
    .hud-weather-day span {
        font-size: 8px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .hud-weather-day small {
        display: none !important;
    }

    .hud-panel-actions {
        width: 100% !important;
        margin-top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hud-books-read-actions {
        justify-content: flex-end !important;
    }

    .hud-books-read-actions .btn {
        width: auto !important;
        min-width: 74px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 420px) {
    .hud-weather-panel .standard-panel-body {
        grid-template-columns: 62px minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    .hud-current-weather strong {
        font-size: 19px !important;
    }

    .hud-weather-days {
        gap: 2px !important;
    }

    .hud-weather-day {
        padding: 3px 2px !important;
    }

    .hud-weather-day strong,
    .hud-weather-day span {
        font-size: 7px !important;
    }
}