/* ============================================================
   vi1: VISUAL IDENTITY (BR-01/02/03/14/15/16/17, BR-34 accent).
   #A7CFF2 replaces #8792A2 as the accent. It is a fill colour:
   anything filled with it carries dark ink (--accent-ink). Words
   and thin lines that used the accent take --accent-text, the
   same blue deep enough to read on white. Surfaces, shadows and
   the typeface stay as they were. Every place the blue lands is
   named below; nothing is a global replace.
   ============================================================ */

:root:not([data-theme="dark"]){
  --accent:#A7CFF2; --accent-hover:#BCDBF6; --accent-soft:#E6F1FB; --accent-ink:#10161F;
  --accent-text:#2F6A9A; --accent-line:#5B95C8; --accent-deep:#7FB3E0;
  --sky:#A7CFF2; --sky-lo:#2F6A9A; --sky-soft:#E6F1FB;
  --vr-steel:#2F6A9A; --vr-steel-2:#A7CFF2; --vr-steel-soft:#E6F1FB; --vr-steel-deep:#2F6A9A;
  --vr-steelfill:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 100%),linear-gradient(#A7CFF2,#A7CFF2);
  /* the studio the whole app stands in, one definition for every place that paints it */
  --app-bg:
    linear-gradient(104deg,rgba(255,255,255,0) 58%,rgba(255,255,255,.55) 66%,rgba(255,255,255,0) 74%),
    radial-gradient(1100px 620px at 18% -8%,#FFFFFF 0%,rgba(255,255,255,0) 60%),
    radial-gradient(900px 700px at 110% 104%,#D9D8D5 0%,rgba(217,216,213,0) 62%),
    linear-gradient(180deg,#F6F5F2 0%,#EDECE9 46%,#E4E3E0 100%);
  --app-bg-solid:#EDECE9}
:root[data-theme="dark"]{
  --accent:#A7CFF2; --accent-hover:#BCDBF6; --accent-soft:rgba(167,207,242,.16); --accent-ink:#10161F;
  --accent-text:#A7CFF2; --accent-line:#A7CFF2; --accent-deep:#7FB3E0;
  --app-bg:linear-gradient(var(--bg),var(--bg)); --app-bg-solid:var(--bg)}/* ---------- 1. words and thin lines in the accent: the readable blue ---------- */


body.pm-premium .repmore.repup,.door.acc b,body.pm-premium .door.acc b,
#sessRest .rf-word,#sessDone .df-word,#sessDone .df-pr .pw,.wkday.now em,.runw i,.rf-nx em,.rf-nx .rf-chg,
.sl-row .ovm.now,.sl-add,.srcard .sh,.srrow button.go,.repup,.bcopy,.whyrow .wr-l,.whyrow .wr-b.acc,
.cact .ca-h,#homeDone .hd-check,.ovm.done,.ovm.now,.ballist em,.rf-fx,.wr-imp,.trio button.on,
body.pm-premium .whyrow .wr-b.acc,body.pm-premium .trio button.on,body.pm-premium .cact .ca-h,.cact.done .ap-a,.ai-go,
body.pm-premium .wh-m i .mp,.wh-m i .mp,.setstrip i.now span,body.pm-premium .sq.done i::after,
body.pm-premium #coachChips .chipbtn.ca .ca-ob{color:var(--accent-text)}
:root:not([data-theme="dark"]) body.pm-premium .runw i,:root:not([data-theme="dark"]) body.pm-premium .sess .runw i{color:var(--accent-text)!important}
.fh svg,.sr-top svg,.df-check path{stroke:var(--accent-text)}/* charts and dials: a mid blue that holds its line on white */

.ring .ra,body.pm-premium .ring .ra,:root:not([data-theme="dark"]) body.pm-premium .ring .ra,.spark path,.lchart .ln,
.hw-ring .a,body.pm-premium .gauge .ra,body.pm-premium .wpath .wp-prog,body.pm-premium #wkHero.noweek .wh-pathpre path,
body.pm-premium #sessRest .rr-arc-f{stroke:var(--accent-line)}
.spark circle,.lchart .enddot{fill:var(--accent-line)}
.bm,.bm-ok{stroke:var(--accent-line)}
body.pm-premium .wave i,.wave i{background:var(--accent-line)}/* Nutrition is outside this pass: its dial keeps the colours it had */

.fuel-dial .ra{stroke:#8792A2}
#proArc{stroke:#8792A2}/* ---------- 2. fills: pale blue, dark ink on it ---------- *//* the tutorial's go key (primary buttons stay graphite: a later layer already made .btn.acc graphite) */



:root:not([data-theme="dark"]) body.pm-premium .tgo{
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 100%),linear-gradient(#A7CFF2,#A7CFF2);color:var(--on-key,#10161F);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -2px 0 rgba(30,31,33,.22) inset,0 12px 26px -12px rgba(30,31,33,.55)}/* a chosen option */

.onb-opt.on,.onb-chip.on,.phr-kind.on,.phr-size.on,#ctl-equip .opt.sel,#ctl-limits .opt.sel,#ctl-customex .opt.sel,
.ap-week.after span:not(.r),.onb-build .ln2.done i,
:root:not([data-theme="dark"]) body.pm-premium .sess .setstrip i.now{
  background:linear-gradient(180deg,#DCEBF9 0%,#A7CFF2 100%);color:var(--on-key,#10161F);border-color:transparent}
.onb-opt.on,#ctl-equip .opt.sel,#ctl-limits .opt.sel,#ctl-customex .opt.sel,:root:not([data-theme="dark"]) body.pm-premium .sess .setstrip i.now{
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 28px -12px rgba(30,31,33,.5)}/* a finished set: the pale fill takes dark ink, not white */

:root:not([data-theme="dark"]) body.pm-premium .sess .setstrip i.done,
body.pm-premium .sess.cockpit .sess-right .sl-row .ovm.done{color:var(--on-key,#10161F)!important}/* progress bars */

body.pm-premium #sessRest .rf-ring i,body.pm-premium .sess-bar i,
:root:not([data-theme="dark"]) body.pm-premium .sess-bar i,:root:not([data-theme="dark"]) body.pm-premium #sessRest .rf-ring i,.onb-prog i{
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0)),linear-gradient(90deg,#A7CFF2,#7FB3E0)!important}/* the active tab's icon */

.tabs button.on .ni .nc,.topnav .tn-tabs button.on .ni .nc{fill:#A7CFF2}/* a tick or check drawn on a pale fill */

.meal.logged .tick,.lift.done .ltick,.lift.done .lglyph{color:var(--on-key,#10161F)}
body.pm-premium .wpath .hw-days i.on b svg,body.pm-premium #progress #whubWeek .wpath .hw-days i.on b svg{stroke:var(--on-key,#10161F)}
body.pm-premium .ob-ready{color:var(--on-key,#10161F)}/* ---------- 3. the Week Path: blue only for what is done and for today ---------- */


body.pm-premium .wpx-svg .wx-done .wx-edge{stroke:#7FB3E0}
body.pm-premium .wpx-svg .wx-done .wx-body{stroke:#A7CFF2}
body.pm-premium .wpx-svg .wx-done .wx-under{stroke:rgba(47,106,154,.22)}
body.pm-premium .wpx-svg .wx-done .wx-hi{stroke:rgba(255,255,255,.7)}
body.pm-premium .wpx-days i.on b{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.2) 24%,rgba(255,255,255,0) 44%),
    radial-gradient(circle at 62% 80%,rgba(47,106,154,.18) 0%,rgba(47,106,154,0) 55%),#A7CFF2;
  box-shadow:0 0 0 calc(3px * var(--wxs)) #F0F1F2,0 0 0 calc(3.6px * var(--wxs)) rgba(127,179,224,.9),
    0 calc(5px * var(--wxs)) calc(8px * var(--wxs)) calc(-1px * var(--wxs)) rgba(28,29,30,.24),
    inset 0 calc(-2px * var(--wxs)) calc(3px * var(--wxs)) rgba(30,31,33,.16),inset 0 1px 1px rgba(255,255,255,.7)}
body.pm-premium .wpx-days i.on b svg{stroke:var(--on-key,#10161F);filter:drop-shadow(0 .8px 0 rgba(255,255,255,.45))}
body.pm-premium .wpx-days i.today b{background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.34) 16%,rgba(255,255,255,0) 40%),
    radial-gradient(circle at 64% 82%,rgba(47,106,154,.2) 0%,rgba(47,106,154,0) 55%),#A7CFF2;
  box-shadow:0 0 0 calc(4.5px * var(--wxs)) #F6F6F7,0 0 0 calc(5.2px * var(--wxs)) rgba(127,179,224,.9),
    0 calc(13px * var(--wxs)) calc(15px * var(--wxs)) calc(-5px * var(--wxs)) rgba(28,29,30,.36),0 2px 3px rgba(28,29,30,.14),
    inset 0 calc(-3px * var(--wxs)) calc(5px * var(--wxs)) rgba(30,31,33,.18),inset 0 2px 2px rgba(255,255,255,.8)}
body.pm-premium .wpx-days i.today.rest b{background:radial-gradient(circle at 50% 38%,#E9E6DE 0%,#F3F1EB 50%,#FCFBF8 100%);
  box-shadow:0 0 0 calc(4px * var(--wxs)) #F5F4F0,0 0 0 calc(4.7px * var(--wxs)) rgba(127,179,224,.9),0 calc(9px * var(--wxs)) calc(12px * var(--wxs)) calc(-5px * var(--wxs)) rgba(28,29,30,.30),inset 0 calc(2px * var(--wxs)) calc(4px * var(--wxs)) rgba(118,110,94,.30)}
body.pm-premium .wpx-days i.sel b{outline-color:rgba(47,106,154,.6)}/* ---------- 4. one background, edge to edge ---------- *//* The studio is one fixed layer the size of the screen, so it never repeats or seams as the page
   scrolls (a phone ignores a "fixed" page background and repeats it instead). */



html{background:var(--app-bg-solid)}
#appbg{position:fixed;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;background:var(--app-bg)}/* The top safe area, behind the phone's clock and battery: the same studio, the same pixels, so
   there is no strip. It still covers what scrolls up under the clock, and fades out just below it. */

#sbar{position:fixed;left:0;right:0;top:0;bottom:0;height:auto;z-index:var(--z-nav,45);pointer-events:none;background:var(--app-bg);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 env(safe-area-inset-top,0px),transparent calc(env(safe-area-inset-top,0px) * 1.3));
  mask-image:linear-gradient(180deg,#000 0,#000 env(safe-area-inset-top,0px),transparent calc(env(safe-area-inset-top,0px) * 1.3))}
#sbar::after,:root[data-theme="dark"] #sbar::after{content:none;display:none}/* the first thing on a page starts below the clock, never under it */

body.pm-premium .col{padding-top:max(44px,calc(env(safe-area-inset-top,0px) + 14px))}/* onboarding stands in the same studio: the cropped stage photo left a pale band at the top
   and blocks at the bottom on a phone */

:root:not([data-theme="dark"]) .onb{background:var(--app-bg)}
:root:not([data-theme="dark"]) .onb .onb-env{display:none}
:root:not([data-theme="dark"]) .onb::before{content:"";position:fixed;left:0;right:0;top:0;bottom:0;z-index:3;pointer-events:none;background:var(--app-bg);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 env(safe-area-inset-top,0px),transparent calc(env(safe-area-inset-top,0px) * 1.3));
  mask-image:linear-gradient(180deg,#000 0,#000 env(safe-area-inset-top,0px),transparent calc(env(safe-area-inset-top,0px) * 1.3))}/* ---------- 5. Home: the hero in the accent ---------- *//* the one action: a dark disc on the pale slab *//* the figure's frame ended in a hard vertical cut through the arm, hidden on the dark slab and plain on the pale one: its left edge now fades *//* ---------- 6. Home: the week and the readings without cards ---------- */


body.pm-premium #today #heroProg{background:none!important;box-shadow:none!important;border:none!important;border-radius:0!important;padding:6px 0 0!important}/* the track keeps the exact width it had inside the card, so its drawing and node sizes are unchanged */

body.pm-premium #today #heroProg .wpx{margin-left:18px;margin-right:18px}
body.pm-premium #today #heroProg .wpx-detail{margin-left:0;margin-right:0}/* bodyweight is the scale's door: a tap opens the same sheet as Profile */