/* Shared visual and interaction foundations for every MacroMuse page. */
/* Keep the page scrollbar consistent, including Blog and Pro pages. */
html{--ng-scrollbar-thumb:#cbd5e1;--ng-scrollbar-track:#eff7f4;--ng-scrollbar-hover:#94a3b8;scrollbar-color:var(--ng-scrollbar-thumb) var(--ng-scrollbar-track);scrollbar-width:thin}
html.dark{--ng-scrollbar-thumb:#334155;--ng-scrollbar-track:#0f172a;--ng-scrollbar-hover:#475569}
html::-webkit-scrollbar{width:10px;height:10px;background:var(--ng-scrollbar-track)}
html::-webkit-scrollbar-track{background:var(--ng-scrollbar-track)}
html::-webkit-scrollbar-thumb{background-color:var(--ng-scrollbar-thumb);border-radius:9999px;border:2px solid var(--ng-scrollbar-track)}
html::-webkit-scrollbar-thumb:hover{background-color:var(--ng-scrollbar-hover)}
:root{--ng-ink:#0f172a;--ng-muted:#475569;--ng-accent:#047857;--ng-line:#cbd5e1;--ng-surface:#fff;--ng-control-radius:12px;--ng-card-radius:24px;--ng-space:24px}
html.dark,body.dark{--ng-ink:#e2e8f0;--ng-muted:#b6c4d6;--ng-accent:#6ee7b7;--ng-line:#475569;--ng-surface:#1e293b}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}
button{font-weight:600;cursor:pointer;min-height:44px}
button:disabled{cursor:wait}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{min-height:44px;border-radius:var(--ng-control-radius)}
input::placeholder,textarea::placeholder{color:var(--ng-muted);opacity:1}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ng-accent)!important;outline-offset:3px;box-shadow:0 0 0 2px var(--ng-surface)!important}
[aria-invalid=true]{border-color:#b91c1c!important;outline-color:#b91c1c!important}
.text-slate-400,.text-slate-500,.text-slate-600{color:var(--ng-muted)}
.text-brand{color:var(--ng-accent)}
.site-footer .text-brand{color:#6ee7b7}
:is(button,a).bg-brand,.ng-button-primary{background:#047857;color:#fff}
:is(button,a).bg-brand:hover,.ng-button-primary:hover{background:#065f46;color:#fff}
html.dark :is(button,a).bg-brand,body.dark :is(button,a).bg-brand,html.dark .ng-button-primary,body.dark .ng-button-primary{background:#6ee7b7;color:#0f172a}
.ng-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:var(--ng-control-radius);font-weight:600;text-decoration:none;border:1px solid transparent;line-height:1.4}
.ng-button-secondary{background:var(--ng-surface);border-color:var(--ng-line);color:var(--ng-ink)}
.ng-button-secondary:hover{border-color:var(--ng-accent)}
.site-nav .nav-link,.site-nav .site-mobile-links>a,.site-footer .footer-link{min-height:44px;display:inline-flex;align-items:center}
.site-nav #profile-btn,.site-nav #profile-btn-mobile,.site-nav .site-menu-toggle,.site-nav #dark-toggle{min-height:44px;min-width:44px}
html.dark .site-nav,body.dark .site-nav{background:#059669!important}
html.dark .site-nav .nav-link::after,body.dark .site-nav .nav-link::after{background:#e2e8f0}
:is(#dashboard-page,#meals-page,#progress-page,#settings-page,#chef-page) h1{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.035em;font-size:clamp(28px,3vw,36px);line-height:1.2}
:is(#dashboard-page,#meals-page,#progress-page,#settings-page,#chef-page) h2{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.025em}
:is(.workspace-card,.chef-chat-card,.chef-recipe-card){border-radius:var(--ng-card-radius)}
:is(.workspace-card,.chef-recipe-card)>h2{margin-bottom:16px}
button svg[stroke],a svg[stroke]{stroke-width:1.8}
#water-drops button{min-height:44px}
button[role=switch]:has(>span[id*=thumb]){position:relative!important;min-width:60px;width:60px!important;height:44px!important;min-height:44px;padding:0!important;background:transparent!important;flex-shrink:0}
button[role=switch]:has(>span[id*=thumb])::before{content:'';position:absolute;inset:10px 8px;border-radius:99px;background:#64748b}
button[role=switch][aria-checked=true]:has(>span[id*=thumb])::before{background:var(--ng-accent)}
button[role=switch]>span[id*=thumb]{position:absolute;left:10px;top:12px;width:20px;height:20px;margin:0!important;transform:none!important;translate:none!important;background:#fff;border-radius:99px;transition:left .18s}
button[role=switch][aria-checked=true]>span[id*=thumb]{left:30px}
.skip-link{position:fixed;top:12px;left:12px;z-index:10000;transform:translateY(-180%);padding:12px 18px;background:var(--ng-surface);color:var(--ng-ink);border:2px solid var(--ng-accent);border-radius:12px;font-weight:700}
.skip-link:focus{transform:translateY(0)}
:where(#main-content,main,#landing-hero){scroll-margin-top:90px}
.text-red-500,.text-red-600{color:#b91c1c}
html.dark .text-red-500,body.dark .text-red-500,html.dark .text-red-600,body.dark .text-red-600{color:#fca5a5}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media(forced-colors:active){:focus-visible{outline:3px solid Highlight!important}button[role=switch]::before{border:1px solid ButtonText}button[aria-checked=true]::before{background:Highlight!important}}
@media print{.skip-link,.chef-view-tabs,.saved-recipes-tools,.chef-recipe-controls{display:none!important}}
/* Resolve older per-page colors through the same semantic palette. */
html body .text-muted{color:var(--ng-muted)!important}
html body.dark .text-muted,html.dark body .text-muted{color:var(--ng-muted)!important}
html body .workspace-page{--ws-muted:var(--ng-muted)}
html body #progress-page{--pg-muted:var(--ng-muted)}
html body #meals-page{--meal-muted:var(--ng-muted)}
html body .text-red-400{color:#b91c1c}
html body.dark .text-red-400,html.dark body .text-red-400{color:#fca5a5}
html body.dark nav.site-nav.bg-brand,html.dark body nav.site-nav.bg-brand{background:#059669!important}
html body .site-footer [class~="text-white/40"]{color:#aab8c9}
html body [class~="text-brand/70"]{color:var(--ng-accent)}
html body .text-amber-600{color:#92400e}
html body.dark .text-amber-600,html.dark body .text-amber-600{color:#fcd34d}
html body .cal-day.text-slate-300{color:var(--ng-muted)}
html body #progress-daily-tip{color:var(--ng-muted)!important}
.chef-recipe-details summary{min-height:44px;display:list-item;padding-block:10px}
.cal-day.bg-brand{background:#047857;color:#fff}
.cal-day.bg-amber-400{color:#0f172a}
.site-footer a[aria-label]{min-width:44px;min-height:44px}
#star-rating .star-btn{min-width:44px;min-height:44px}
html body .hero-benefits{color:var(--ng-muted)}
html body.download-page{--dl-muted:var(--ng-muted)}
html body .phone-brand>span:first-child{color:#0f172a}
html body.landing-page section:has(#daily-tip) :is(.text-muted,.text-brand){color:var(--ng-ink)!important}
html.dark body :is(a,button).bg-brand,body.dark :is(a,button).bg-brand{background:#6ee7b7!important;color:#0f172a!important}
html.dark body [class~="text-charcoal/90"],html.dark body [class~="text-charcoal/80"]{color:var(--ng-ink)}
html body button{min-height:44px}
html body .bottom-nav-link{color:var(--ng-muted);min-height:52px}
html body .bottom-nav-link.active{color:var(--ng-accent)}

.site-nav > div:first-child > div > a:first-child{min-height:44px;display:inline-flex;align-items:center}
button[aria-label]:has(>svg:only-child):not(#water-drops button){min-width:44px}
html.dark body .site-nav #mobile-menu a:not(.site-nav-cta),body.dark .site-nav #mobile-menu a:not(.site-nav-cta){color:#e2e8f0}
html.dark body .site-nav #mobile-menu a[aria-current=page],html.dark body .site-nav #mobile-menu a:not(.site-nav-cta):hover{background:#064e3b;color:#fff}
html body button[role=switch]:has(>span[id*=thumb]){background:transparent!important}
html.dark button[role=switch][aria-checked=true]>span[id*=thumb],body.dark button[role=switch][aria-checked=true]>span[id*=thumb]{background:#0f172a}
.site-nav{--ng-nav-ink:#0f172a}
html.dark .site-nav,body.dark .site-nav{--ng-nav-ink:#e2e8f0}
html body .site-nav #mobile-menu :is(a,button,[class*="text-charcoal"]){color:var(--ng-nav-ink)!important}
html body .site-nav #mobile-menu :is(a.bg-charcoal,.site-nav-cta){color:#fff!important}
html.dark body .site-nav #mobile-menu :is(a.bg-charcoal,.site-nav-cta),body.dark .site-nav #mobile-menu :is(a.bg-charcoal,.site-nav-cta){color:#0f172a!important}

/* Keep bottom navigation icons uniform across every mobile page. */
#bottom-nav .bottom-nav-link{min-width:0;gap:4px;line-height:1.2;padding:9px 2px 8px;text-align:center;white-space:nowrap}
#bottom-nav .bottom-nav-link>svg{display:block;width:22px;height:22px;flex:0 0 22px;stroke-width:2;overflow:visible}

/* Mint chrome in light mode and deep green liquid glass in dark mode. */
html body nav.site-nav .nav-link { color:var(--ng-nav-ink)!important; }
html body :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar) {
  --ng-nav-glass:#59cbaa;
  --ng-nav-solid:#59cbaa;
  --ng-nav-overlay:none;
  background:var(--ng-nav-solid)!important;
  border-bottom:1px solid #ffffff40;
  box-shadow:0 6px 24px #064e3b12;
}
html.dark body :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar),html body.dark :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar) {
  --ng-nav-glass:#064e3bf2;
  --ng-nav-solid:#064e3b;
  --ng-nav-overlay:linear-gradient(120deg,#ffffff24,transparent 55%,#ffffff08);
  background:var(--ng-nav-solid)!important;
  border-bottom-color:#6ee7b733;
  box-shadow:inset 0 1px 0 #ffffff1a,0 6px 24px #02061730;
}
html body :is(#bottom-nav,.mobile-quick-actions) {
  --ng-nav-glass:#ffffffb3;
  --ng-nav-solid:#fff;
  background:var(--ng-nav-solid)!important;
  border-top:1px solid #ffffff80!important;
  box-shadow:inset 0 1px 0 #ffffff80,0 -6px 24px #0f172a0d;
}
html.dark body :is(#bottom-nav,.mobile-quick-actions),html body.dark :is(#bottom-nav,.mobile-quick-actions) {
  --ng-nav-glass:#1e293bf2;
  --ng-nav-solid:#1e293b;
  background:var(--ng-nav-solid)!important;
  border-top-color:#ffffff26!important;
  box-shadow:inset 0 1px 0 #ffffff14,0 -6px 24px #02061730;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html body :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar),html.dark body :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar),html body.dark :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar),
  html body :is(#bottom-nav,.mobile-quick-actions),html.dark body :is(#bottom-nav,.mobile-quick-actions),html body.dark :is(#bottom-nav,.mobile-quick-actions) {
    background:var(--ng-nav-overlay,linear-gradient(120deg,#ffffff24,transparent 55%,#ffffff08)),var(--ng-nav-glass)!important;
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    backdrop-filter:blur(20px) saturate(150%);
  }
}
@media (prefers-reduced-transparency:reduce) {
  html body :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar),html.dark body :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar),html body.dark :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar),
  html body :is(#bottom-nav,.mobile-quick-actions),html.dark body :is(#bottom-nav,.mobile-quick-actions),html body.dark :is(#bottom-nav,.mobile-quick-actions) {
    background:var(--ng-nav-solid)!important;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
@media (forced-colors:active) {
  html body :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar),html.dark body :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar),html body.dark :is(nav.site-nav:is(.bg-brand,.site-nav),.loading-navbar),
  html body :is(#bottom-nav,.mobile-quick-actions),html.dark body :is(#bottom-nav,.mobile-quick-actions),html body.dark :is(#bottom-nav,.mobile-quick-actions) {
    background:Canvas!important;border-color:CanvasText!important;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  }
}

/* Homepage action buttons retain the glass finish. App buttons use solid page styles. */
body.landing-page {
  --glass-button-fill:#fff;--glass-button-primary:#10b981;--glass-button-primary-ink:#0f172a;
  --glass-button-danger:#fff1f2;--glass-button-danger-ink:#b91c1c;
  --glass-button-edge:#64748b40;--glass-button-shine:#ffffff40;--glass-button-blur:none;
}
html.dark body.landing-page,body.landing-page.dark {
  --glass-button-fill:#1e293b;--glass-button-primary:#6ee7b7;
  --glass-button-danger:#451a1a;--glass-button-danger-ink:#fecaca;
  --glass-button-edge:#cbd5e140;--glass-button-shine:#ffffff24;
}
html:root body.landing-page :is(.ng-button,.lp-button,.site-nav-cta,.site-nav a.bg-charcoal) {
  background:linear-gradient(120deg,var(--glass-button-shine),transparent 55%,#ffffff08),var(--glass-button-tint,var(--glass-button-fill))!important;
  color:var(--glass-button-ink,var(--ng-ink))!important;
  border:1px solid var(--glass-button-edge)!important;
  box-shadow:inset 0 1px 0 var(--glass-button-shine),0 3px 12px #0f172a0d!important;
  -webkit-backdrop-filter:var(--glass-button-blur);backdrop-filter:var(--glass-button-blur);
}
.landing-page :is(.ng-button-primary,.lp-button-primary,.site-nav-cta,.site-nav a.bg-charcoal) {
  --glass-button-tint:var(--glass-button-primary);--glass-button-ink:var(--glass-button-primary-ink);
}
.landing-page .app-dialog-danger {
  --glass-button-tint:var(--glass-button-danger);--glass-button-ink:var(--glass-button-danger-ink);
}
html body.landing-page .site-nav #mobile-menu :is(a.bg-charcoal,.site-nav-cta) { color:var(--glass-button-primary-ink)!important; }
html.dark body.landing-page .site-nav #mobile-menu :is(a.bg-charcoal,.site-nav-cta),body.landing-page.dark .site-nav #mobile-menu :is(a.bg-charcoal,.site-nav-cta) { color:var(--glass-button-primary-ink)!important; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  body.landing-page { --glass-button-fill:#ffffffb3;--glass-button-primary:#10b981b3;--glass-button-danger:#fff1f2d9;--glass-button-blur:blur(20px) saturate(150%); }
  html.dark body.landing-page,body.landing-page.dark { --glass-button-fill:#1e293bf2;--glass-button-primary:#6ee7b7f2;--glass-button-danger:#451a1af2; }
}
@media(prefers-reduced-transparency:reduce),(forced-colors:active) {
  body.landing-page { --glass-button-fill:#fff;--glass-button-primary:#10b981;--glass-button-danger:#fff1f2;--glass-button-blur:none;--glass-button-shine:transparent; }
  html.dark body.landing-page,body.landing-page.dark { --glass-button-fill:#1e293b;--glass-button-primary:#6ee7b7;--glass-button-danger:#451a1a; }
}
html body.landing-page :is(button,a):hover:not(:disabled) { --glass-button-shine:#ffffff60;--glass-button-edge:#05966966; }
html.dark body.landing-page :is(button,a):hover:not(:disabled),body.landing-page.dark :is(button,a):hover:not(:disabled) { --glass-button-shine:#ffffff30;--glass-button-edge:#6ee7b766; }

/* Shared solid actions use mint with dark text on app and public pages. */
:root{--ng-action-fill:#55cba7;--ng-action-hover:#43bd99;--ng-action-ink:#0f172a;--ng-action-line:#0f172a26}
html.dark,body.dark{--ng-action-fill:#59cbaa;--ng-action-hover:#0fa875;--ng-action-ink:#0f172a;--ng-action-line:#0f172a26}
html body:not(.landing-page)
:is(:is(button,a).bg-brand,button.bg-charcoal,.ng-button-primary,.chef-recipe-log,.empty-action-primary,.quick-action-primary,.download-primary,#login-page .btn-primary,.site-nav-cta,.site-nav a.bg-charcoal):not(.app-dialog-danger):not([role=switch]){
  background:var(--ng-action-fill)!important;color:var(--ng-action-ink)!important;
  border:1px solid var(--ng-action-line);
}
html body:not(.landing-page)
:is(:is(button,a).bg-brand,button.bg-charcoal,.ng-button-primary,.chef-recipe-log,.empty-action-primary,.quick-action-primary,.download-primary,#login-page .btn-primary,.site-nav-cta,.site-nav a.bg-charcoal):not(.app-dialog-danger):not([role=switch]):hover:not(:disabled){background:var(--ng-action-hover)!important}

/* Selected Chef tabs and user replies use the same solid action palette. */
html body #chef-page :is(.chef-view-tabs button[aria-selected="true"],#chat-log .chat-msg.justify-end > .bg-brand){
  background:var(--ng-action-fill)!important;color:var(--ng-action-ink)!important;
}

/* Light navigation text remains readable over the dark glass. */
html.dark body nav.site-nav .font-display span,html body.dark nav.site-nav .font-display span,
html.dark body nav.site-nav .nav-pro-button,html body.dark nav.site-nav .nav-pro-button,
html.dark body nav.site-nav #dark-toggle,html body.dark nav.site-nav #dark-toggle,
html.dark body nav.site-nav #mobile-profile-name,html body.dark nav.site-nav #mobile-profile-name{color:var(--ng-nav-ink)!important}
html.dark body nav.site-nav .nav-link::after,html body.dark nav.site-nav .nav-link::after{background:var(--ng-nav-ink)}
html.dark body nav.site-nav :is(#ham-top,#ham-mid,#ham-bot,.ham-bar),html body.dark nav.site-nav :is(#ham-top,#ham-mid,#ham-bot,.ham-bar){background:var(--ng-nav-ink)}
html.dark body .site-nav #mobile-menu a[aria-current=page],html.dark body .site-nav #mobile-menu a:not(.site-nav-cta):hover,
body.dark .site-nav #mobile-menu a[aria-current=page],body.dark .site-nav #mobile-menu a:not(.site-nav-cta):hover{background:#ffffff33;color:var(--ng-nav-ink)}

/* Public text links carry the mint accent without pale text on white surfaces. */
html body:not(.landing-page):not(:has(:is(#dashboard-page,#meals-page,#progress-page,#chef-page,#settings-page))) main
:is(a.text-brand,button.text-brand,.auth-home-link,.download-guide-link,.download-qr-card a,.blog-back-link,.blog-further-reading a,.blog-read-link){
  color:var(--ng-ink)!important;text-decoration:underline;text-decoration-color:var(--ng-action-fill);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
html body:not(.landing-page):not(:has(:is(#dashboard-page,#meals-page,#progress-page,#chef-page,#settings-page))) main
:is(a.text-brand,button.text-brand,.auth-home-link,.download-guide-link,.download-qr-card a,.blog-back-link,.blog-further-reading a,.blog-read-link):hover{
  text-decoration-thickness:3px;text-decoration-color:var(--ng-action-hover);
}
html body:not(.landing-page) .site-footer :is(a,button)[class~="hover:bg-brand"]:hover{
  background:var(--ng-action-fill)!important;color:var(--ng-action-ink)!important;
}
html body:not(.landing-page) .site-footer a[class~="hover:text-brand"]:hover{color:#59cbaa!important}
html body:not(.landing-page) .site-footer .footer-link:hover{color:#59cbaa!important}

/* Keep the same compact Clear all action on both meal lists. */
#dashboard-page #clear-btn,#meals-page #clear-all-btn { min-height:28px; padding:4px 8px; font-size:11px; line-height:18px; border-radius:8px; white-space:nowrap; }