/* STERVITU THEME: black + white, with the logo blue as the only accent. Loaded after newlook.css.
   To go back to the old look, remove the <link> to this file in index.html. */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  color-scheme:light;
  --bg:#FFFFFF; --bg-2:#F4F4F5; --surface:#FFFFFF; --surface-2:#FAFAFA; --elevated:#FFFFFF; --inset:#F4F4F5;
  --text:#0A0A0A; --text-2:#4A4A52; --text-3:#5E5E68; --placeholder:#7A7A84;
  --line:#E7E7E9; --line-2:#E0E0E4; --line-3:#CFCFD6;
  --hover:rgba(10,10,10,.035); --hover-2:rgba(10,10,10,.065);
  --primary:#0A0A0A; --primary-hover:#262626; --on-primary:#FFFFFF; --primary-grad:linear-gradient(180deg,#3a3a3d 0%,#0A0A0A 100%);
  --accent:#2C5A98; --accent-soft:#E6EEF9; --accent-line:rgba(44,90,152,.3);
  --chart:#2C5A98; --chart-2:#8A8A94; --chart-fill:rgba(44,90,152,.14); --grid:rgba(10,10,10,.07);
  --yellow:#2C5A98;
  --topbar-bg:rgba(255,255,255,.9); --scrim:rgba(10,10,10,.4);
  --side-bg:#FAFAFA; --side-text:#0A0A0A; --side-text-2:#52525B; --side-line:#E7E7E9; --side-hover:#F0F0F1; --side-active:#E6EEF9; --side-accent:#2C5A98;
  --brand-grad:linear-gradient(135deg,#1E3A66 0%,#0D1422 55%,#050608 100%);
  --cream:#FFFFFF; --midnight:#050608; --royal:#2C5A98; --navy:#0D1422;
}}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FFFFFF; --bg-2:#F4F4F5; --surface:#FFFFFF; --surface-2:#FAFAFA; --elevated:#FFFFFF; --inset:#F4F4F5;
  --text:#0A0A0A; --text-2:#4A4A52; --text-3:#5E5E68; --placeholder:#7A7A84;
  --line:#E7E7E9; --line-2:#E0E0E4; --line-3:#CFCFD6;
  --hover:rgba(10,10,10,.035); --hover-2:rgba(10,10,10,.065);
  --primary:#0A0A0A; --primary-hover:#262626; --on-primary:#FFFFFF; --primary-grad:linear-gradient(180deg,#3a3a3d 0%,#0A0A0A 100%);
  --accent:#2C5A98; --accent-soft:#E6EEF9; --accent-line:rgba(44,90,152,.3);
  --chart:#2C5A98; --chart-2:#8A8A94; --chart-fill:rgba(44,90,152,.14); --grid:rgba(10,10,10,.07);
  --yellow:#2C5A98;
  --topbar-bg:rgba(255,255,255,.9); --scrim:rgba(10,10,10,.4);
  --side-bg:#FAFAFA; --side-text:#0A0A0A; --side-text-2:#52525B; --side-line:#E7E7E9; --side-hover:#F0F0F1; --side-active:#E6EEF9; --side-accent:#2C5A98;
  --brand-grad:linear-gradient(135deg,#1E3A66 0%,#0D1422 55%,#050608 100%);
  --cream:#FFFFFF; --midnight:#050608; --royal:#2C5A98; --navy:#0D1422;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0A0A0B; --bg-2:#0E0E10; --surface:#131316; --surface-2:#19191D; --elevated:#202025; --inset:#0C0C0E;
  --text:#F5F5F7; --text-2:#B9B9C2; --text-3:#9A9AA5; --placeholder:#85858F;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.26);
  --hover:rgba(255,255,255,.04); --hover-2:rgba(255,255,255,.07);
  --primary:#FFFFFF; --primary-hover:#E9E9EE; --on-primary:#0A0A0B; --primary-grad:linear-gradient(180deg,#FFFFFF 0%,#DADAE0 100%);
  --accent:#5B9BE8; --accent-soft:rgba(91,155,232,.14); --accent-line:rgba(91,155,232,.4);
  --chart:#5B9BE8; --chart-2:#9A9AA5; --chart-fill:rgba(91,155,232,.2); --grid:rgba(255,255,255,.08);
  --yellow:#5B9BE8;
  --topbar-bg:rgba(10,10,11,.82); --scrim:rgba(0,0,0,.7);
  --shadow-1:none;
  --side-bg:#070708; --side-text:#F5F5F7; --side-text-2:#A3A3AE; --side-line:rgba(255,255,255,.08); --side-hover:rgba(255,255,255,.05); --side-active:rgba(91,155,232,.16); --side-accent:#8DB8F0;
  --brand-grad:linear-gradient(135deg,#1E3A66 0%,#0D1422 55%,#050608 100%);
  --cream:#FFFFFF; --midnight:#050608; --royal:#2C5A98; --navy:#0D1422;
  --focus-bg:#131316;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0A0B; --bg-2:#0E0E10; --surface:#131316; --surface-2:#19191D; --elevated:#202025; --inset:#0C0C0E;
  --text:#F5F5F7; --text-2:#B9B9C2; --text-3:#9A9AA5; --placeholder:#85858F;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.26);
  --hover:rgba(255,255,255,.04); --hover-2:rgba(255,255,255,.07);
  --primary:#FFFFFF; --primary-hover:#E9E9EE; --on-primary:#0A0A0B; --primary-grad:linear-gradient(180deg,#FFFFFF 0%,#DADAE0 100%);
  --accent:#5B9BE8; --accent-soft:rgba(91,155,232,.14); --accent-line:rgba(91,155,232,.4);
  --chart:#5B9BE8; --chart-2:#9A9AA5; --chart-fill:rgba(91,155,232,.2); --grid:rgba(255,255,255,.08);
  --yellow:#5B9BE8;
  --topbar-bg:rgba(10,10,11,.82); --scrim:rgba(0,0,0,.7);
  --shadow-1:none;
  --side-bg:#070708; --side-text:#F5F5F7; --side-text-2:#A3A3AE; --side-line:rgba(255,255,255,.08); --side-hover:rgba(255,255,255,.05); --side-active:rgba(91,155,232,.16); --side-accent:#8DB8F0;
  --brand-grad:linear-gradient(135deg,#1E3A66 0%,#0D1422 55%,#050608 100%);
  --cream:#FFFFFF; --midnight:#050608; --royal:#2C5A98; --navy:#0D1422;
  --focus-bg:#131316;
}
.exlog .num-badge{color:#fff}
.card.glow{box-shadow:inset 3px 0 0 var(--accent)}

/* old yellow leftovers */
.brand-mark{background:#0D1422;border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 22px -10px rgba(44,90,152,.55)}
.auth-logo,.nf-logo{filter:drop-shadow(0 10px 28px rgba(44,90,152,.4))}
.nav-link .count{background:var(--accent-soft);color:var(--side-accent)}
.logbar,.rest{border-color:rgba(255,255,255,.2)}
.card.brand .big em,.auth-art .big span,.eyebrow.on-brand{color:#8DB8F0}
.start-steps li.done .tick{background:var(--accent);border-color:var(--accent)}
.nf-code{background:linear-gradient(180deg,#fff,#8DB8F0);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-hero2{border-color:rgba(255,255,255,.12)}
.p-streak{background:rgba(141,184,240,.14);border-color:rgba(141,184,240,.4);color:#BCD6F6}

/* areas that are always dark (hero, brand cards, pills): light-blue accents there, in light mode too */
.p-hero2,.card.brand,.auth-art,.nf-page,.logbar,.rest,.cover-band{--yellow:#8DB8F0;--accent:#E6E6EA;--accent-soft:rgba(255,255,255,.08);--accent-line:rgba(255,255,255,.22)}
.p-kick{color:rgba(255,255,255,.72)}
.p-ring-l{fill:rgba(255,255,255,.75)}
.p-go{background:#FFFFFF;color:#0A0A0B;box-shadow:0 14px 30px -12px rgba(141,184,240,.4)}

/* leftover yellows from newlook.css -> blue */
.bdg.on .bdg-i,.bdg-i.on{background:linear-gradient(135deg,#8DB8F0,#2C5A98);color:#fff}
.sv-ic.pr{background:rgba(91,155,232,.14);border-color:rgba(91,155,232,.45)}
.sv-week{background:rgba(91,155,232,.12);border:1px solid rgba(91,155,232,.4)}
.modal.sv-modal{--accent:var(--c-green);--accent-soft:color-mix(in srgb,var(--c-green) 14%,transparent);--accent-line:color-mix(in srgb,var(--c-green) 38%,transparent);--hi-grad:linear-gradient(145deg,#6FE3B3,#2FA878);--hi-ink:#06281a;--hi-glow:rgba(70,211,154,.3)}
.sv-sic{background:var(--hover-2);color:var(--text-2)}
.sv-week{background:var(--accent-soft)}
.sv-ic{box-shadow:0 0 0 8px rgba(91,155,232,.06)}
.report-card{border-color:rgba(91,155,232,.5);background:linear-gradient(135deg,rgba(91,155,232,.14),transparent 70%)}
.report-card .btn,.report-card .btn.primary{background:#0A0A0B!important;color:#8DB8F0!important;border-color:#0A0A0B!important}
.report-ic{background:#2C5A98;color:#fff}
.pex-seg button[aria-pressed=true]{background:#2C5A98;color:#fff}
.nf-code{background:linear-gradient(180deg,#BCD6F6,#5B9BE8);-webkit-background-clip:text;background-clip:text}

/* blue is only for: links, focus, progress/data, selected-today fills. Decorative accents are white (dark) / black (light). */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--accent:#0A0A0A;--accent-soft:rgba(10,10,10,.055);--accent-line:rgba(10,10,10,.2);--side-active:rgba(10,10,10,.07);--side-accent:#0A0A0A}}
:root[data-theme="light"]{--accent:#0A0A0A;--accent-soft:rgba(10,10,10,.055);--accent-line:rgba(10,10,10,.2);--side-active:rgba(10,10,10,.07);--side-accent:#0A0A0A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent:#F5F5F7;--accent-soft:rgba(255,255,255,.07);--accent-line:rgba(255,255,255,.2);--side-active:rgba(255,255,255,.09);--side-accent:#FFFFFF}}
:root[data-theme="dark"]{--accent:#F5F5F7;--accent-soft:rgba(255,255,255,.07);--accent-line:rgba(255,255,255,.2);--side-active:rgba(255,255,255,.09);--side-accent:#FFFFFF}
a,.linkbtn,.toast.undo .btn,.lg-toc a,.lg-foot a{color:var(--yellow)}
details.ex-inline>summary{color:var(--text-2)}details.ex-inline>summary:hover{color:var(--text)}
:focus-visible{outline-color:var(--text-2)}
input:focus,select:focus,textarea:focus{border-color:var(--text-2);box-shadow:0 0 0 4px var(--hover-2)}
.bar i,.lb-bar i,.lb-month-bar i,.rg-bar i,.p-weeks i.done,.p-weeks i.now,.stepper i.on::after{background:var(--yellow)}
.card.glow{box-shadow:inset 3px 0 0 var(--line-3)}
.glyph,.sv-ic.pr,.bdg-i.on,.bdg.on .bdg-i{color:var(--accent)}
.bdg.on .bdg-i,.bdg-i.on{background:var(--hover-2);color:var(--text);border:1px solid var(--line-3)}
.exlog .num-badge{background:var(--hover-2);color:var(--text)}
.report-ic{background:var(--primary);color:var(--on-primary)}
.report-card{border-color:var(--line-3);background:var(--surface)}
.report-card .btn,.report-card .btn.primary{background:var(--primary)!important;color:var(--on-primary)!important;border-color:var(--primary)!important}
.pex-seg button[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}
.p-streak{background:var(--hover-2);border-color:var(--line-3);color:var(--text-2)}
.p-hero2 .p-streak,.card.brand .p-streak{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.88)}

/* ===== colour per feature: every section has its own colour so the app is easy to scan ===== */
:root{--c-blue:#5B9BE8;--c-teal:#3CCFD6;--c-green:#46D39A;--c-orange:#FF9F4A;--c-purple:#A98BFF;--c-pink:#FF72A8;--c-amber:#FFC84A;--c-red:#FF7A7A}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--c-blue:#2C5A98;--c-teal:#0E8A93;--c-green:#13875E;--c-orange:#C65F0A;--c-purple:#6B48D6;--c-pink:#C4306F;--c-amber:#9A6A00;--c-red:#C73B3B}}
:root[data-theme="light"]{--c-blue:#2C5A98;--c-teal:#0E8A93;--c-green:#13875E;--c-orange:#C65F0A;--c-purple:#6B48D6;--c-pink:#C4306F;--c-amber:#9A6A00;--c-red:#C73B3B}
/* staff menu */
.nav-link{--c:var(--text-2)}
.nav-link[href="#/"]{--c:var(--c-blue)}.nav-link[href="#/clients"]{--c:var(--c-teal)}.nav-link[href="#/inbox"]{--c:var(--c-pink)}
.nav-link[href="#/assessments"]{--c:var(--c-orange)}.nav-link[href="#/programs"]{--c:var(--c-purple)}.nav-link[href="#/exercises"]{--c:var(--c-green)}
.nav-link[href="#/progress"]{--c:var(--c-green)}.nav-link[href="#/leaderboard"]{--c:var(--c-amber)}.nav-link[href="#/report"]{--c:var(--c-blue)}
.nav-link[href="#/team"]{--c:var(--c-teal)}.nav-link[href="#/security"]{--c:var(--c-red)}.nav-link[href="#/settings"]{--c:var(--text-2)}
.nav-link .icon{color:var(--c)}
.nav-link[aria-current="page"]{background:color-mix(in srgb,var(--c) 16%,transparent)}
.nav-link[aria-current="page"] .icon{color:var(--c)}
.nav-link[aria-current="page"]::before{background:var(--c)}
.nav-link .count{background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--c)}
/* dashboard cards */
.metric{--c:var(--c-blue)}
.metric[href^="#/progress"]{--c:var(--c-green)}.metric[href^="#/assessments"]{--c:var(--c-orange)}.metric[href^="#/programs"]{--c:var(--c-purple)}
.metric .mh .icon{box-sizing:content-box;padding:7px;border-radius:10px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.card.glow{box-shadow:inset 3px 0 0 var(--c)}
/* client app tabs */
.p-tabs a,.p-bar a{--c:var(--text-2)}
.p-tabs a[href="#/"],.p-bar a[href="#/"]{--c:var(--c-blue)}
.p-tabs a[href="#/program"],.p-bar a[href="#/program"]{--c:var(--c-purple)}
.p-tabs a[href="#/history"],.p-bar a[href="#/history"]{--c:var(--c-orange)}
.p-tabs a[href="#/progress"],.p-bar a[href="#/progress"]{--c:var(--c-green)}
.p-tabs a[href="#/account"],.p-bar a[href="#/account"]{--c:var(--c-pink)}
.p-tabs a .icon,.p-bar a .icon{color:var(--c)}
.p-tabs a[aria-current="page"],.p-bar a[aria-current="page"]{background:color-mix(in srgb,var(--c) 16%,transparent)}
.p-tabs a[aria-current="page"] .icon{color:var(--c)}
/* staff phone bar */
.tabbar a .icon{color:var(--text-2)}
.tabbar a[aria-current="page"] .icon{color:var(--c-blue)}
/* small cards and chips */
.p-lib-ic{background:color-mix(in srgb,var(--c-teal) 16%,transparent);color:var(--c-teal)}
.bdg-news .bdg-i.on{background:color-mix(in srgb,var(--c-amber) 20%,transparent);color:var(--c-amber);border-color:color-mix(in srgb,var(--c-amber) 50%,transparent)}
.p-week .done b{color:var(--c-green)}
.p-week .done{border-color:color-mix(in srgb,var(--c-green) 45%,transparent)}
.delta.good{color:var(--c-green)}
.steps-list li::before{background:var(--primary);color:var(--on-primary)}

/* ===== motion: everything eases in, reacts to touch, and data grows into place ===== */
@keyframes sv-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sv-fade{from{opacity:0}to{opacity:1}}
@keyframes sv-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes sv-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--text) 30%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
@keyframes sv-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg) scale(1.15)}40%{transform:rotate(10deg) scale(1.15)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
@keyframes sv-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sv-growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sv-sheen{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(220%) skewX(-18deg)}}
@keyframes sv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sv-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}}

/* cards and blocks rise in one after another when the page changes */
body.sv-nav :is(.card,.metric,.p-hero2,.p-days>*,.bdg,.lb-row,.ex-card,.p-week>*,.tl>*,.p-ex>li){animation:sv-rise .5s cubic-bezier(.2,.8,.25,1) both}
body.sv-nav :is(.card,.metric,.ex-card,.bdg,.lb-row):nth-child(2){animation-delay:.05s}
body.sv-nav :is(.card,.metric,.ex-card,.bdg,.lb-row):nth-child(3){animation-delay:.1s}
body.sv-nav :is(.card,.metric,.ex-card,.bdg,.lb-row):nth-child(4){animation-delay:.15s}
body.sv-nav :is(.card,.metric,.ex-card,.bdg,.lb-row):nth-child(5){animation-delay:.2s}
body.sv-nav :is(.card,.metric,.ex-card,.bdg,.lb-row):nth-child(n+6){animation-delay:.25s}
body.sv-nav .p-days>*:nth-child(odd){animation-delay:.08s}

/* hover and touch feedback */
.card,.metric,.ex-card,.p-lib,.bdg-news{transition:transform .2s cubic-bezier(.2,.8,.25,1),box-shadow .25s,border-color .2s,background .2s}
a.card:hover,.metric.link:hover,.ex-card:hover,.p-lib:hover,.bdg-news:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--c,var(--yellow)) 55%,transparent);border-color:color-mix(in srgb,var(--c,var(--yellow)) 55%,var(--line-2))}
.btn,.p-go,.tick,.p-days>*,.fchip,.pick span,.seg label,button{transition:transform .15s cubic-bezier(.2,.8,.25,1),filter .2s,background .2s,box-shadow .2s,border-color .2s}
.btn:hover,.p-go:hover{transform:translateY(-1px)}
.btn:active,.p-go:active,.tick:active,button:active,.p-days>*:active,.fchip:active,.nav-link:active{transform:scale(.95)}
.nav-link{transition:background .2s,color .2s,transform .2s}
.nav-link:hover{transform:translateX(3px)}
.nav-link:hover .icon{animation:sv-pop .4s both}
.nav-link[aria-current="page"] .icon,.tabbar a[aria-current="page"] .icon,.p-tabs a[aria-current="page"] .icon,.p-bar a[aria-current="page"] .icon{animation:sv-pop .45s cubic-bezier(.2,.9,.3,1.3) both}
.metric .mh .icon{transition:transform .25s}
.metric:hover .mh .icon{transform:rotate(-8deg) scale(1.12)}

/* things that should feel alive all the time */
.p-days>*[aria-current="date"],.p-days>.today,.p-week .now{animation:sv-pulse 2.4s ease-out infinite}
.p-streak .icon,.p-streak svg{display:inline-block;transform-origin:50% 80%;animation:sv-wiggle 2.8s ease-in-out 1.2s infinite}
.p-hero2::after,.card.brand::after{pointer-events:none}
.p-hero2 svg[class*="art"],.p-hero2 .p-art,.p-hero2>svg:not(.icon){animation:sv-float 6s ease-in-out infinite}
.p-go,.btn.primary{position:relative;overflow:hidden}
.p-go::after,.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-120%) skewX(-18deg);animation:sv-sheen 3.6s ease-in-out 1.4s infinite;pointer-events:none}
.btn.primary:disabled::after{display:none}

/* data grows into place */
body.sv-nav :is(.bar i,.lb-bar i,.lb-month-bar i,.rg-bar i,.logprog i,.as-prog i){transform-origin:left;animation:sv-grow .9s cubic-bezier(.2,.8,.25,1) .15s both}
body.sv-nav :is(.p-weeks i,.p-cal-w i){animation:sv-pop .45s both}
body.sv-nav :is(.p-weeks i,.p-cal-w i):nth-child(2){animation-delay:.05s}
body.sv-nav :is(.p-weeks i,.p-cal-w i):nth-child(3){animation-delay:.1s}
body.sv-nav :is(.p-weeks i,.p-cal-w i):nth-child(4){animation-delay:.15s}
body.sv-nav :is(.p-weeks i,.p-cal-w i):nth-child(n+5){animation-delay:.2s}
.p-ring,.p-ring-p{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.25,1)}
body.sv-nav svg :is(.p-ring-p){animation:sv-fade .6s both}
.toast{animation:sv-rise .35s cubic-bezier(.2,.9,.3,1.2) both}
.modal{animation:sv-pop .3s cubic-bezier(.2,.9,.3,1.15) both}
.bdg.on .bdg-i,.bdg-news .bdg-i{animation:sv-float 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== requested changes: neutral week pill, plain client tabs, white camera button, gold medals + small size ===== */
.p-week .now{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.p-week .now b{color:var(--on-primary)}
.p-tabs a,.p-bar a{--c:var(--text-2)}
.p-tabs a .icon,.p-bar a .icon,.p-tabs a[aria-current="page"] .icon,.p-bar a[aria-current="page"] .icon{color:inherit}
.p-tabs a[aria-current="page"],.p-bar a[aria-current="page"]{background:var(--hover-2);color:var(--text)}
.tabbar a[aria-current="page"] .icon{color:var(--text)}
.avatar-edit .cam{background:var(--primary);color:var(--on-primary)}
.bdg.on{background:rgba(255,200,60,.09);outline:1px solid rgba(255,200,60,.35)}
.bdg.on .bdg-i,.bdg-i.on,.bdg-news .bdg-i.on{background:linear-gradient(135deg,#ffe26a,#d9a400);color:#1b1b1b;border:0}
.bdg-news{border-color:rgba(255,200,60,.4)}
.bdg-card .on-small{display:none}
.bdg-card.small .on-big{display:none}
.bdg-card.small .on-small{display:inline}
.bdg-card.small .bdg-grid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
.bdg-card.small .bdg{padding:8px 4px;gap:0}
.bdg-card.small .bdg b,.bdg-card.small .bdg .t-small{display:none}
.bdg-card.small .bdg-more>summary{min-height:38px}
.p-week .now,.p-week .now *{color:var(--on-primary)!important}
/* theme picker previews follow the new palette */
.pv{--pv-bg:#0A0A0B;--pv-card:#19191D;--pv-bar:#5B9BE8}
.pv i{background:#070708}
.pv.light{--pv-bg:#F4F4F5;--pv-card:#FFFFFF;--pv-bar:#2C5A98}
.pv.system s{background:linear-gradient(135deg,#0A0A0B 50%,#F4F4F5 50%)}
.pv.system u:first-child{background:#5B9BE8}

/* calendar: fills the card, bigger rounded squares, month names, green = trained */
.p-calx{display:grid;gap:6px;max-width:560px}
.p-cal{display:flex;gap:5px;overflow:visible;padding:0}
.p-cal-w,.p-cal-d{gap:5px;flex:1 1 0;max-width:none;min-width:0}
.p-cal-d{flex:0 0 14px}
.p-cal-mo{display:flex;gap:5px}
.p-cal-mo>i{flex:0 0 14px}
.p-cal-mo>span{flex:1 1 0;min-width:0;font:600 10.5px/1 var(--ui);color:var(--text-3);white-space:nowrap;overflow:visible}
.p-cal-w i,.p-cal-key{border-radius:7px;min-height:0}
.p-cal-w i.on,.p-cal-key.on{background:var(--c-green);box-shadow:0 0 12px color-mix(in srgb,var(--c-green) 35%,transparent)}
.p-cal-w i.fut{opacity:.25}
.p-cal-w i.today{outline:2px solid var(--text);outline-offset:1px}
.p-cal-key{width:14px;height:14px;border-radius:5px}
.p-calx{max-width:calc(14px + var(--wk,12) * 50px)}
.p-cal-w i.gone{visibility:hidden}

/* calendar v2: month blocks like a phone calendar */
.p-cm{display:grid;gap:6px;max-width:320px}
.p-cm-h,.p-cm-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0;text-align:center}
.p-cm-h span{font:700 10.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding-bottom:4px}
.p-cm-m{grid-column:1/-1;justify-self:start;margin:10px 0 4px;padding:4px 10px;border-radius:99px;background:var(--hover-2);font:700 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.p-cm-m:first-child{margin-top:0}
.p-cm-d{position:relative;justify-self:center;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.p-cm-d b{font:600 13px/1 var(--ui);color:var(--text)}
.p-cm-d.fut b{color:var(--text-3);font-weight:500}
.p-cm-d.on{background:var(--hover-2)}
.p-cm-d.on b{font-weight:700}
.p-cm-d.on svg{position:absolute;top:-3px;right:-3px;width:14px;height:14px;padding:2px;border-radius:50%;background:var(--c-green);box-sizing:border-box}
.p-cm-d.today{outline:2px solid var(--text);outline-offset:1px}

/* add-measurement form */
.mf{display:grid;gap:14px}
.mf-top{display:flex}
.mf-date{max-width:210px}
.mf-main,.mf-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mf-big,.mf-card{display:grid;gap:6px;padding:12px 14px;border-radius:16px;background:var(--inset);border:1px solid var(--line-2);cursor:text;transition:border-color .2s,transform .2s}
.mf-big:focus-within,.mf-card:focus-within{border-color:var(--text-2);transform:translateY(-1px)}
.mf-big{grid-template-columns:auto 1fr;grid-template-areas:"ic l" "in in";align-items:center;gap:8px 10px}
.mf-ic{grid-area:ic;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c-teal) 18%,transparent);color:var(--c-teal)}
.mf-big:nth-child(2) .mf-ic{background:color-mix(in srgb,var(--c-orange) 18%,transparent);color:var(--c-orange)}
.mf-big .mf-l{grid-area:l}.mf-big .mf-in{grid-area:in}
.mf-l{font:600 12.5px/1.2 var(--ui);color:var(--text-2)}
.mf-in{display:flex;align-items:baseline;gap:6px}
.mf-in input{all:unset;flex:1;min-width:0;width:100%;font:700 22px/1.2 var(--display);color:var(--text)}
.mf-card .mf-in input{font-size:18px}
.mf-in input::placeholder{color:var(--text-3);font-weight:500}
.mf-in em{font:600 12px/1 var(--ui);font-style:normal;color:var(--text-3)}
.mf-sec{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:4px;border-top:1px solid var(--line)}
.mf-sec{margin-top:2px;padding-top:14px}
.mf-sec b{font:700 14px/1 var(--ui)}
.mf-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mf-pair>b{grid-column:1/-1;font:700 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:-4px}
.mf-save{justify-self:stretch;min-height:48px}
@media(min-width:700px){.mf-save{justify-self:start;min-width:220px}}
.p-metrics button.none:not([aria-pressed="true"]){opacity:.55}
.p-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.p-metrics button{padding:8px 4px;text-align:center;justify-content:center;display:flex;align-items:center}
@media(min-width:700px){.p-metrics{grid-template-columns:repeat(7,auto);width:max-content;max-width:100%}.p-metrics button{padding:8px 16px}}
.p-side{justify-self:start;width:max-content;max-width:100%}
.p-side button{min-width:96px;padding:8px 16px;font-size:13px;min-height:36px}
.p-side button.none:not([aria-pressed="true"]){opacity:.55}

/* warm-up / stretch / cardio lists: one soft card per exercise */
.wu-card{padding:14px 14px 16px}
.wu-list{gap:10px;margin-top:12px}
.wu-row{border-top:0;background:var(--inset);border:1px solid var(--line);border-radius:16px;padding:12px 12px 12px 12px;gap:6px 12px;transition:opacity .25s,border-color .25s,transform .2s}
.wu-k-wu .wu-row{border-top-color:var(--line)}
.wu-row:active{transform:scale(.99)}
.wu-row .tick{width:38px;height:38px;border-radius:50%}
.wu-row .tick[aria-pressed="true"]{background:var(--c-green);border-color:var(--c-green);color:#06281a}
.wu-row.done{opacity:.62;border-color:color-mix(in srgb,var(--c-green) 35%,transparent)}
.wu-tx{gap:5px}
.wu-tx b{font-size:15px;font-weight:700;line-height:1.25}
.wu-dose{display:inline-flex;width:max-content;padding:3px 10px;border-radius:99px;background:var(--hover-2);font-size:12px;font-weight:600;color:var(--text-2)}
.wu-tx small{font-size:12.5px;line-height:1.35;color:var(--text-3)}
.wu-how{margin-top:2px}
details.ex-inline.wu-how>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;padding:5px 11px;border-radius:99px;background:var(--hover-2);font-size:12.5px;font-weight:600;color:var(--text-2)}
details.ex-inline.wu-how>summary::-webkit-details-marker{display:none}
details.ex-inline.wu-how[open]>summary{margin-bottom:10px}

/* stretch + cardio: teal instead of blue, readable buttons */
.wu-k-cd,.wu-k-kd{--cool:var(--c-teal);--cool-soft:color-mix(in srgb,var(--c-teal) 9%,transparent);--cool-line:color-mix(in srgb,var(--c-teal) 32%,transparent)}
.exlog.wu-k-cd,.exlog.wu-k-kd{border-color:var(--cool-line)}
:root[data-theme="light"] .exlog.wu-k-cd{background:linear-gradient(180deg,var(--cool-soft),transparent 140%),#fff!important}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .exlog.wu-k-cd{background:linear-gradient(180deg,var(--cool-soft),transparent 140%),#fff!important}}
.wu-k-cd .cg-go,.wu-k-kd .cg-go,.wu-k-wu .cg-go{background:var(--primary)!important;background-image:none!important;border-color:transparent!important;color:var(--on-primary)!important;min-height:48px;border-radius:14px}
.wu-k-cd .cg-go .faint,.wu-k-kd .cg-go .faint,.wu-k-wu .cg-go .faint{color:var(--on-primary)!important;opacity:.6}

/* compact rows: name, then dose + "how" on one line */
.wu-card{padding:10px 12px 12px}
.wu-list{gap:6px;margin-top:8px}
.wu-row{padding:8px 8px 8px 12px;gap:2px 8px;border-radius:14px;align-items:center}
.wu-row .tick{width:34px;height:34px}
.wu-tx{gap:4px}
.wu-tx b{font-size:14px;line-height:1.2}
.wu-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wu-dose{padding:2px 8px;font-size:11.5px}
.wu-meta details.ex-inline.wu-how{display:inline-block;margin:0}
.wu-meta details.ex-inline.wu-how[open]{flex-basis:100%;display:block}
details.ex-inline.wu-how>summary{padding:3px 9px;font-size:11.5px;gap:5px}
details.ex-inline.wu-how>summary svg{width:14px;height:14px}
.wu-tx small{font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wu-time{padding:4px 8px;font-size:12.5px;min-height:32px}
.wu-det>summary{min-height:34px}
.wu-h{font-size:14.5px}
.wu-k-cd .wu-h svg{width:20px;height:20px;stroke-width:1.9}