/* Home-only track direction. Light strength and line opacity are independent. */
:root {
 --home-accent:color-mix(in srgb,var(--accent) 76%,#d2ef9a);
 --home-companion:#9373bd;
 --home-glow-strength:16%;--home-line-opacity:.32;
 --home-base:color-mix(in srgb,var(--accent) 2%,#090e0d);
 --home-card:color-mix(in srgb,var(--accent) 2%,#171f20);
 --home-edge:#303b3c;--home-text:#edf1ed;--home-muted:#a6b2b1;
}
:root[data-accent=orange]{--home-companion:#729fab}
:root[data-accent=purple]{--home-companion:#8ba66f}
:root[data-accent=red]{--home-companion:#8b8fbd}
:root[data-theme=light]{
 --home-base:color-mix(in srgb,var(--accent) 2%,#f0f2ed);
 --home-card:#fafbf8;--home-edge:#d1d8d0;--home-text:#1c2925;--home-muted:#566760;
 --home-glow-strength:9%;--home-line-opacity:.19;
 --home-accent:color-mix(in srgb,var(--accent) 48%,#354d35);
}
.home-track-art{display:none}
body:has(#homeScreen:not([hidden])):not(.has-app-screen){background:var(--home-base)!important}
body:has(#homeScreen:not([hidden])):not(.has-app-screen) .shell{
 position:relative;isolation:isolate;min-height:100dvh;
 background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--home-companion) var(--home-glow-strength),transparent),transparent 39%),radial-gradient(ellipse at 0% 100%,color-mix(in srgb,var(--home-accent) var(--home-glow-strength),transparent),transparent 42%);
}
body:has(#homeScreen:not([hidden])):not(.has-app-screen) .home-track-art{
 display:block;position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:-1;pointer-events:none;
 fill:none;stroke:var(--home-companion);stroke-width:1.5;opacity:var(--home-line-opacity);
}
.home-track-art path:last-child{stroke:var(--home-accent)}
body:has(#homeScreen:not([hidden])):not(.has-app-screen) .topbar{color:var(--home-text)}
body:has(#homeScreen:not([hidden])):not(.has-app-screen) .topbar-title{color:var(--home-text)!important}
body:has(#homeScreen:not([hidden])):not(.has-app-screen) .topbar-date{color:var(--home-muted)!important}
#homeScreen{color:var(--home-text)}
#homeScreen .home-status>strong{color:var(--home-text)!important}
#homeScreen .home-section-label,#homeScreen small,#homeScreen .home-status small{color:var(--home-muted)!important}
#homeScreen .continue-card,#homeScreen .week-widget,#homeScreen .home-actions>button{
 background:var(--home-card)!important;border:1px solid var(--home-edge)!important;color:var(--home-text)!important;border-radius:12px!important;box-shadow:none!important;
}
#homeScreen #startWorkoutButton{border-color:color-mix(in srgb,var(--home-accent) 65%,var(--home-edge))!important;background:color-mix(in srgb,var(--home-accent) 5%,var(--home-card))!important}
#homeScreen .home-actions>button:hover,#homeScreen .continue-card:hover{background:color-mix(in srgb,var(--home-accent) 7%,var(--home-card))!important;border-color:var(--home-accent)!important}
#homeScreen .menu-icon{background:transparent!important;color:var(--home-companion)!important}
#homeScreen .menu-icon svg{width:28px!important;height:28px!important;color:inherit!important;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#homeScreen #startWorkoutButton .menu-icon{color:var(--home-accent)!important}
#homeScreen .home-chevron{color:var(--home-muted)!important}
#homeScreen strong,#homeScreen h3{color:var(--home-text)}
#homeScreen .continue-card>span,#homeScreen .continue-card>button{min-width:0}
#homeScreen .continue-card strong,#homeScreen .week-stats strong{overflow-wrap:anywhere}
#homeScreen .week-stats{color:var(--home-muted)}
#homeScreen .more-button{color:var(--home-muted)!important}
