/* Neutral page surfaces; preserve the existing green action palette. */
:root[data-theme="light"]{--bg:#ffffff;--card:#ffffff;--ink:#191919;--muted:#707070;--line:#e7e7e7}
:root[data-theme="dark"]{--bg:#000000;--card:#111111;--ink:#f5f5f5;--muted:#aaaaaa;--line:#2b2b2b}
:root[data-theme="light"] body.pc{background:#ffffff}
:root[data-theme="dark"] body.pc{background:#000000}
:root[data-theme="light"]{--surface-subtle:#f7f7f7;--surface-raised:#ffffff}
:root[data-theme="dark"]{--surface-subtle:#151515;--surface-raised:#111111}
body.pc>header.cf{background:color-mix(in srgb,var(--bg) 90%,transparent)}
body[data-view="home"] .page-title,.demo-note,.empty,.insight-panel,.watch-bottom{background:var(--surface-subtle)}
.panel,.shopping-card,.pc-card,dialog{background:var(--surface-raised)}
.pc-media,.card-image{background:var(--surface-subtle)}
.pc-gauge{background:var(--surface-subtle)}
:root[data-theme="dark"] .brand-logo,:root[data-theme="light"] .brand-logo{background:transparent;border:0;box-shadow:none}
:root[data-theme="dark"] .brand-logo img{filter:none}
:root[data-theme="light"] .brand-logo img{filter:none}
/* Keep current button shapes and green fills; neutralize only surrounding fields. */
#cf #searchForm{background:var(--surface-subtle)}
#cf #searchForm:focus-within{background:var(--card)}
#cf #moreMenu{background:var(--card)}
/* Header controls requested by the user. */
#cf #moreToggle{border:0;box-shadow:none;background:transparent;border-radius:0}
#cf #moreToggle:hover,#cf #moreToggle[aria-expanded="true"]{border:0;background:transparent;box-shadow:none;color:var(--accent)}
#cf #moreToggle:not([aria-expanded="true"]) i:nth-child(1){transform:translateY(-7px)}
#cf #moreToggle:not([aria-expanded="true"]) i:nth-child(2){transform:none}
#cf #moreToggle:not([aria-expanded="true"]) i:nth-child(3){transform:translateY(7px)}
#cf #themeToggle{border-radius:50%;aspect-ratio:1}

/* Mobile search is revealed only on request; desktop search remains inline. */
#cf #mobileSearchToggle{display:none;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);place-items:center;flex:none}#cf #mobileSearchToggle svg{width:21px;height:21px}#cf #mobileSearchToggle[aria-expanded="true"]{color:var(--accent)}
@media(max-width:860px){#cf #mobileSearchToggle{display:grid}#cf:not(.search-open) #searchForm{display:none}#cf.search-open #searchForm{display:flex;animation:mobile-search-in .2s cubic-bezier(.2,.8,.2,1)}#cf .cf-in{padding-bottom:9px}#cf.search-open .cf-in{padding-bottom:12px}html{scroll-padding-top:90px}html:has(#cf.search-open){scroll-padding-top:150px}}
@media(max-width:420px){#cf .brand-logo{width:120px}#cf .cf-tools{gap:4px}#cf #mobileSearchToggle,#cf #themeToggle,#cf #moreToggle,#cf #mobileFavorites{width:35px;height:35px}}
@keyframes mobile-search-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#cf.search-open #searchForm{animation:none}}
/* Mobile favorites belongs inside the overflow menu. */
#cf #mobileFavorites{display:none!important}
#cf #moreMenu [data-nav="savedNav"] .cf-badge{margin-left:auto}
@media(max-width:420px){#cf .brand-logo{width:145px}#cf .cf-tools{gap:6px}#cf #mobileSearchToggle,#cf #themeToggle,#cf #moreToggle{width:38px;height:38px}}
/* One mobile header row, with a separately animated search disclosure. */
#cf .mobile-search-reveal,#cf .mobile-search-clip{display:contents}
#cf #mobileSearchToggle{position:relative}
#cf #mobileSearchToggle svg{position:absolute;transition:opacity .2s,transform .28s cubic-bezier(.2,.8,.2,1)}
#cf #mobileSearchToggle .search-open-icon{opacity:1;transform:rotate(0) scale(1)}
#cf #mobileSearchToggle .search-close-icon{opacity:0;transform:rotate(-90deg) scale(.55)}
#cf #mobileSearchToggle[aria-expanded="true"] .search-open-icon{opacity:0;transform:rotate(90deg) scale(.55)}
#cf #mobileSearchToggle[aria-expanded="true"] .search-close-icon{opacity:1;transform:rotate(0) scale(1)}
@media(max-width:860px){
#cf .cf-in,#cf.scrolled .cf-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;row-gap:0;width:100%;height:auto;padding:9px 14px}
#cf .cf-in>.brand-logo{grid-column:1;grid-row:1;min-width:0;width:min(145px,100%);max-width:100%;height:47px;justify-self:start}
#cf .cf-tools{grid-column:2;grid-row:1;display:flex;flex-wrap:nowrap;gap:6px;margin:0;width:auto;min-width:0;justify-self:end}
#cf .cf-nav{display:none}
#cf .mobile-search-reveal{grid-column:1/-1;grid-row:2;display:grid;grid-template-rows:0fr;min-width:0;opacity:0;transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
#cf.search-open .mobile-search-reveal{grid-template-rows:1fr;opacity:1}
#cf .mobile-search-clip{display:block;min-height:0;min-width:0;overflow:hidden;padding:0 5px;transition:padding .3s cubic-bezier(.2,.8,.2,1)}
#cf.search-open .mobile-search-clip{padding:10px 5px 5px}
#cf:not(.search-open) #searchForm,#cf.search-open #searchForm{display:flex;grid-column:auto;grid-row:auto;width:100%;max-width:none;margin:0;height:46px;animation:none;transform:none}
#cf:not(.search-open) #searchForm{visibility:hidden;transition:visibility 0s .3s}
#cf.search-open #searchForm{visibility:visible;transition:visibility 0s}
#cf.search-open .cf-in{padding-bottom:9px}
#cf #mobileSearchToggle,#cf #themeToggle,#cf #moreToggle{width:38px;height:38px;flex-shrink:0}
}
@media(max-width:340px){#cf .cf-in{padding-inline:10px;column-gap:4px}#cf .cf-tools{gap:3px}#cf #mobileSearchToggle,#cf #themeToggle,#cf #moreToggle{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){#cf .mobile-search-reveal,#cf .mobile-search-clip,#cf #mobileSearchToggle svg,#cf #searchForm{transition:none!important}}
/* Expand mobile search inside the existing header row, without adding height. */
@media(max-width:860px){
#cf .cf-in,#cf.scrolled .cf-in,#cf.search-open .cf-in{position:relative;grid-template-rows:47px;height:65px;padding:9px 14px}
#cf .mobile-search-reveal,#cf.search-open .mobile-search-reveal{position:absolute;left:9px;right:60px;top:4px;height:57px;display:block;grid-template-rows:none;grid-column:auto;grid-row:auto;min-width:0;opacity:0;clip-path:inset(0 0 0 100%);pointer-events:none;transition:clip-path .32s cubic-bezier(.2,.8,.2,1),opacity .2s;z-index:2}
#cf.search-open .mobile-search-reveal{opacity:1;clip-path:inset(0 0 0 0);pointer-events:auto}
#cf .mobile-search-clip,#cf.search-open .mobile-search-clip{display:block;height:57px;padding:5px;overflow:visible;transition:none}
#cf .cf-in>.brand-logo{transition:opacity .18s,transform .25s,visibility .18s;opacity:1;transform:none}
#cf.search-open .cf-in>.brand-logo{opacity:0;transform:translateX(-10px);visibility:hidden;pointer-events:none}
#cf.search-open .cf-tools{grid-column:2;justify-self:end}
#cf.search-open #themeToggle,#cf.search-open #moreToggle{display:none}
#cf.search-open #mobileSearchToggle{margin-left:0}
#cf:not(.search-open) #searchForm,#cf.search-open #searchForm{height:46px;min-width:0}
html:has(#cf.search-open){scroll-padding-top:90px}
}
@media(max-width:340px){#cf .cf-in,#cf.scrolled .cf-in,#cf.search-open .cf-in{padding-inline:10px}#cf .mobile-search-reveal,#cf.search-open .mobile-search-reveal{left:5px;right:49px}}
@media(prefers-reduced-motion:reduce){#cf .mobile-search-reveal,#cf .cf-in>.brand-logo{transition:none!important}}
/* Neutral search field, including its focused state. */
#cf #searchForm,#cf #searchForm:focus-within{border:1px solid var(--line);box-shadow:none;outline:none;background:var(--surface-subtle)}
#cf #query,#cf #query:focus,#cf #query:focus-visible{outline:none;box-shadow:none}