/* Members' area kit: one look for every signed-in page.
   Rules and how to add it to a page: docs/members-design.md.
   Load this LAST in <head>, after any page or shared styles, so it wins. */

/* ─── 1. Tokens ─────────────────────────────────────────────────────── */
:root[data-theme="light"],:root:not([data-theme]){
  color-scheme:light;
  --bg:#F2F3F6; --ink:#14161C; --ink-2:#3B3F4A; --muted:#6B7080; --faint:#B4B8C2;
  --line:rgba(20,22,28,.08); --track:rgba(20,22,28,.07);
  --card:rgba(255,255,255,.64); --card-edge:rgba(255,255,255,.95); --card-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 44px -16px rgba(34,42,80,.16);
  --side:rgba(255,255,255,.5); --pill:rgba(20,22,28,.05); --pill-ink:#3B3F4A;
  --mint-a:#D9F2E1; --mint-b:#F1F8DE; --peach-a:#FFE5CC; --peach-b:#FFF2E0; --rose-a:#FFE2E1; --rose-b:#FFF0EA; --plain-a:rgba(255,255,255,.74); --plain-b:rgba(255,255,255,.52);
  --good:#25794A; --good-bg:rgba(86,196,128,.2); --bad:#B23B3B; --bad-bg:rgba(240,90,90,.15); --warn:#A8651A; --warn-bg:rgba(255,170,60,.2);
  --bar:#CFCBF2; --bar-on:#7C73D6; --line-blue:#6BA8F0; --accent:#5B4FE0;
  --blob1:rgba(170,232,200,.55); --blob2:rgba(255,205,160,.5); --blob3:rgba(196,184,255,.45);
  --orb-track:rgba(20,22,28,.06); --disc:rgba(255,255,255,.78); --node:#FFD84A;
  --dark-pill:#14161C; --dark-pill-ink:#fff; --tip:rgba(255,255,255,.96);
  /* The app's four rings, outside to inside, in the colours they have on the phone: a warm golden
     yellow, soft green, orchid violet and burnt orange. The same in both themes (a faint dark edge
     on the ring keeps them readable on pale grey). Each ring end has a lighter knob. */
  --ring-protocol:#E6D44A; --ring-recovery:#6DE889; --ring-sleep:#B65CE6; --ring-training:#D9622A;
  --knob-protocol:#F9E66B; --knob-recovery:#84F68A; --knob-sleep:#D878F5; --knob-training:#EE8030;
  --ring-protocol-track:rgba(230,212,74,.18); --ring-recovery-track:rgba(109,232,137,.18); --ring-sleep-track:rgba(182,92,230,.16); --ring-training-track:rgba(217,98,42,.16);
  --sun-a:#FFF3B8; --sun-b:#FFF9DC; --lilac-a:#EFE0FD; --lilac-b:#F8F0FF; --ember-a:#FFDACB; --ember-b:#FFEDE4;

  /* Older shared names, re-pointed so existing page styles follow along. */
  --surface:rgba(255,255,255,.62); --elevated:#FFFFFF; --border:rgba(20,22,28,.09); --border-strong:rgba(20,22,28,.18);
  --text:#14161C; --text-bright:#14161C; --text-muted:#5E6370; --text-dim:#6B7080;
  --action:#5B4FE0; --green:#1E8F52; --violet:#7C4DDB; --blue:#2F6FD6; --cyan:#0E8AAE; --orange:#D9600F; --coral:#D9543A;
  --c-fitness:#2F6FD6; --c-fatigue:#E0603F; --c-form:#B88600;
  --phase-R:#0E8AAE; --phase-A:#2F6FD6; --phase-C:#B88600; --phase-E:#D9543A;
  --z1:#0E8AAE; --z2:#1E8F52; --z3:#C99700; --z4:#D9600F; --z5:#D92D4F;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0D12; --ink:#F2F4F7; --ink-2:#C9CED8; --muted:#8E96A3; --faint:#4B5361;
  --line:rgba(255,255,255,.09); --track:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.05); --card-edge:rgba(255,255,255,.1); --card-shadow:0 18px 50px -20px rgba(0,0,0,.7);
  --side:rgba(255,255,255,.03); --pill:rgba(255,255,255,.07); --pill-ink:#C9CED8;
  --mint-a:rgba(70,170,120,.26); --mint-b:rgba(150,190,90,.12); --peach-a:rgba(255,150,70,.24); --peach-b:rgba(255,190,100,.1); --rose-a:rgba(255,100,110,.2); --rose-b:rgba(255,150,120,.08); --plain-a:rgba(255,255,255,.07); --plain-b:rgba(255,255,255,.03);
  --good:#7DDFA3; --good-bg:rgba(86,196,128,.18); --bad:#FF8A8A; --bad-bg:rgba(240,90,90,.18); --warn:#FFC26B; --warn-bg:rgba(255,170,60,.16);
  --bar:rgba(150,140,230,.35); --bar-on:#A89DFF; --line-blue:#7DB8FF; --accent:#B3A9FF;
  --blob1:rgba(60,160,120,.22); --blob2:rgba(255,140,60,.16); --blob3:rgba(120,100,255,.2);
  --orb-track:rgba(255,255,255,.08); --disc:rgba(20,24,34,.8); --node:#FFE500;
  --dark-pill:#F2F4F7; --dark-pill-ink:#0A0D12; --tip:rgba(22,26,34,.97);
  --ring-protocol:#E6D44A; --ring-recovery:#6DE889; --ring-sleep:#B65CE6; --ring-training:#D9622A;
  --knob-protocol:#F9E66B; --knob-recovery:#84F68A; --knob-sleep:#D878F5; --knob-training:#EE8030;
  --ring-protocol-track:rgba(230,212,74,.18); --ring-recovery-track:rgba(109,232,137,.18); --ring-sleep-track:rgba(182,92,230,.16); --ring-training-track:rgba(217,98,42,.16);
  --sun-a:rgba(255,229,0,.2); --sun-b:rgba(255,229,0,.06); --lilac-a:rgba(191,95,255,.2); --lilac-b:rgba(191,95,255,.06); --ember-a:rgba(252,76,2,.22); --ember-b:rgba(252,76,2,.07);

  --surface:rgba(255,255,255,.05); --elevated:#161B24; --border:rgba(255,255,255,.1); --border-strong:rgba(255,255,255,.2);
  --text:#F2F4F7; --text-bright:#FFFFFF; --text-muted:#A3ABB8; --text-dim:#8E96A3;
  --action:#B3A9FF; --green:#6FDC9C; --violet:#C3A2FF; --blue:#7DB0FF; --cyan:#5FD3F0; --orange:#FF9A57; --coral:#FF8A6B;
  --c-fitness:#7DB0FF; --c-fatigue:#FF8A6B; --c-form:#FFD84A;
  --phase-R:#5FD3F0; --phase-A:#7DB0FF; --phase-C:#FFD84A; --phase-E:#FF8A6B;
  --z1:#5FD3F0; --z2:#6FDC9C; --z3:#FFD84A; --z4:#FF9A57; --z5:#FF5C7A;
}
:root.ub-shell{
  --mono:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --private-card:linear-gradient(155deg,var(--plain-a),var(--plain-b));
  --private-card-elevated:linear-gradient(155deg,var(--plain-a),var(--plain-b));
  --private-card-border:var(--card-edge);
  --private-shadow:var(--card-shadow);
  --private-radius:28px; --private-radius-compact:20px;
  --ubs-side-w:256px;
}

/* ─── 2. Page surface ───────────────────────────────────────────────── */
html.ub-shell,html.ub-shell body{background-color:var(--bg)}
html.ub-shell body,html.ub-shell body[data-phase]{
  color:var(--ink);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-feature-settings:'tnum' 1,'cv11' 1;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(38vmax 34vmax at 18% 14%,var(--blob1),transparent 70%),radial-gradient(36vmax 32vmax at 88% 30%,var(--blob2),transparent 70%),radial-gradient(40vmax 34vmax at 52% 108%,var(--blob3),transparent 70%);
  background-attachment:fixed;background-repeat:no-repeat;
}
html.ub-shell ::selection{color:#fff;background:#6A5CFF}
html.ub-shell :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #6A5CFF;outline-offset:2px}

/* Skip link: off-screen until the keyboard reaches it. */
.ubs-skip{position:fixed;left:12px;top:-64px;z-index:100;padding:12px 18px;border-radius:12px;background:var(--ink);color:var(--bg);font:600 14px/1 'Inter',system-ui,sans-serif;text-decoration:none}
.ubs-skip:focus{top:12px}
html.ub-shell main:focus{outline:none}

/* ─── 3. Sidebar (built by unbroken-shell.mjs) ──────────────────────── */
html.ubs-on nav.nav{display:none!important}
:is(.ubs-side,.ubs-pal) [hidden],.ubs-pal[hidden]{display:none!important}
html.ubs-on body{padding-left:var(--ubs-side-w)}
.ubs-side{position:fixed;left:0;top:0;bottom:0;width:var(--ubs-side-w);z-index:40;padding:22px 16px 18px;display:flex;flex-direction:column;gap:14px;background:var(--side);border-right:1px solid var(--line);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);overflow-y:auto;font-family:'Inter',system-ui,sans-serif;color:var(--ink)}
/* Hide sidebar: a button in the sidebar, a small one on the page to bring it back, [ on the keyboard. */
.ubs-collapse,.ubs-reveal{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--card-edge);background:var(--plain-a);color:var(--ink-2);cursor:pointer;padding:0}
.ubs-collapse svg,.ubs-reveal svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ubs-collapse:hover,.ubs-reveal:hover{background:var(--pill);color:var(--ink)}
.ubs-collapse:focus-visible,.ubs-reveal:focus-visible{outline:2px solid var(--action,#FFE500);outline-offset:2px}
@media (min-width:1101px){
  .ubs-collapse{display:inline-flex;position:absolute;top:24px;right:14px}
  html.ubs-collapsed body{padding-left:14px}
  html.ubs-collapsed .ubs-side{transform:translateX(-100%);visibility:hidden}
  html.ubs-collapsed .ubs-reveal{display:inline-flex;position:fixed;top:12px;left:10px;z-index:41;width:30px;height:30px;border-radius:9px}
  html.ubs-anim body{transition:padding-left .25s ease}
  html.ubs-anim .ubs-side{transition:transform .25s ease,visibility 0s linear .25s}
  html.ubs-anim:not(.ubs-collapsed) .ubs-side{transition:transform .25s ease,visibility 0s}
}
@media (prefers-reduced-motion:reduce){ html.ubs-anim body,html.ubs-anim .ubs-side{transition:none!important} }
.ubs-side a{color:inherit;text-decoration:none}
.ubs-side svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ubs-brand{display:flex;align-items:center;gap:12px;padding:2px 8px}
.ubs-brand i{width:38px;height:38px;border-radius:12px;background:#0B0B0D;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.ubs-brand img{width:20px;height:auto;display:block}
.ubs-brand b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.ubs-search{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;border-radius:14px;border:1px solid var(--line);background:var(--plain-a);color:var(--muted);cursor:pointer;width:100%;text-align:left;font:inherit;font-size:14px}
.ubs-search svg{width:17px;height:17px;flex:0 0 auto}
.ubs-search kbd{margin-left:auto;font:500 11px 'Inter',sans-serif;padding:3px 7px;border-radius:7px;background:var(--pill);color:var(--muted)}
.ubs-env{align-self:flex-start;margin:0 8px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);padding:5px 10px;border-radius:999px;border:1px solid var(--line)}
.ubs-env.staging{color:#14161C;background:#FFE500;border-color:#FFE500}
.ubs-navg{display:flex;flex-direction:column;gap:3px}
.ubs-navl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:8px 12px 4px}
.ubs-nl{display:flex;align-items:center;gap:13px;height:44px;padding:0 12px;border-radius:14px;color:var(--ink-2);font-size:15px;font-weight:500;transition:background .15s ease,color .15s ease;border:0;background:none;font-family:inherit;cursor:pointer;width:100%;text-align:left}
.ubs-nl svg{width:20px;height:20px;flex:0 0 auto}
.ubs-nl:hover{background:var(--pill)}
.ubs-nl[aria-current="page"]{background:var(--pill);color:var(--ink);font-weight:600}
.ubs-grow{flex:1 1 auto}
.ubs-plan{border-radius:20px;padding:15px 15px 14px;background:var(--plain-a);border:1px solid var(--card-edge);box-shadow:var(--card-shadow);display:flex;flex-direction:column;gap:5px}
.ubs-plan-t{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px}
.ubs-plan-t i{width:26px;height:26px;border-radius:9px;background:var(--dark-pill);display:grid;place-items:center}
.ubs-plan-t i svg{width:14px;height:14px;stroke:var(--dark-pill-ink);stroke-width:2}
.ubs-plan p{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.ubs-plan a{margin-top:6px;display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 14px;border-radius:12px;background:var(--dark-pill);color:var(--dark-pill-ink)!important;font-weight:600;font-size:13px}
.ubs-plan a svg{width:15px;height:15px;stroke-width:2}
.ubs-foot{display:flex;flex-direction:column;gap:2px}
.ubs-side .ubs-quiet,.ubs-side #logout-btn{display:flex;align-items:center;gap:10px;min-height:40px;height:40px;padding:0 12px;border:0;background:none;color:var(--muted);font:500 13px 'Inter',sans-serif;letter-spacing:0;text-transform:none;cursor:pointer;border-radius:12px;width:100%;text-align:left}
.ubs-side .ubs-quiet:hover,.ubs-side #logout-btn:hover{background:var(--pill);color:var(--ink)}
.ubs-side .ubs-quiet svg,.ubs-side #logout-btn svg{width:17px;height:17px;flex:0 0 auto}

@media (max-width:1100px){
  html.ubs-on body{padding-left:0}
  .ubs-side{position:sticky;top:0;bottom:auto;width:auto;height:auto;flex-direction:row;align-items:center;gap:6px;padding:10px 12px;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none;background:var(--bg)}
  .ubs-side::-webkit-scrollbar{display:none}
  .ubs-brand b,.ubs-search,.ubs-navl,.ubs-plan,.ubs-grow,.ubs-env{display:none}
  .ubs-brand{padding:0 6px 0 2px}
  .ubs-navg,.ubs-foot{flex-direction:row;gap:2px}
  .ubs-nl{height:42px;padding:0 13px;font-size:14px;white-space:nowrap;flex:0 0 auto;width:auto}
  .ubs-nl svg{display:none}
  .ubs-side .ubs-quiet,.ubs-side #logout-btn{flex:0 0 auto;white-space:nowrap;width:auto}
  .ubs-side .ubs-quiet span{display:none}
}

/* ─── 4. Page search (⌘K) ───────────────────────────────────────────── */
.ubs-pal{position:fixed;inset:0;z-index:80;display:grid;place-items:start center;padding-top:14vh;background:rgba(20,22,30,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:'Inter',system-ui,sans-serif}
.ubs-pal[hidden]{display:none}
.ubs-pal-b{width:min(560px,92vw);border-radius:22px;background:var(--bg);border:1px solid var(--card-edge);box-shadow:0 30px 80px -20px rgba(0,0,0,.5);overflow:hidden;color:var(--ink)}
.ubs-pal-b input{width:100%;height:56px;border:0;border-bottom:1px solid var(--line);background:transparent;padding:0 20px;font:500 16px 'Inter',sans-serif;color:var(--ink);outline:none}
.ubs-pal-b ul{list-style:none;margin:0;padding:8px;max-height:50vh;overflow:auto}
.ubs-pal-b li a{display:flex;align-items:center;gap:13px;height:46px;padding:0 12px;border-radius:12px;font-size:15px;font-weight:500;color:inherit;text-decoration:none}
.ubs-pal-b li a svg{width:19px;height:19px;stroke:var(--muted);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ubs-pal-b li a[aria-selected="true"]{background:var(--pill)}
.ubs-pal-h{padding:10px 20px 14px;font-size:12px;color:var(--muted)}

/* ─── 5. Shared pieces older pages use ──────────────────────────────── */
/* Glass cards */
html.ub-shell :is(.tile,.ramp,.chart-card,.plan-load-card,.season-card,.form-card,.performance-brief,.load-tile,.planner,.cal-shell,.plan-audit,.agenda .ag-day,.panel-card){
  background:linear-gradient(155deg,var(--plain-a),var(--plain-b));
  border:1px solid var(--card-edge);box-shadow:var(--card-shadow);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--ink);
}
html.ub-shell :is(.chart-card,.plan-load-card,.season-card,.form-card,.performance-brief,.planner,.cal-shell,.plan-audit){border-radius:28px;padding:20px 22px}
html.ub-shell :is(.tile,.ramp,.load-tile){border-radius:24px}
html.ub-shell :is(.tile,.ramp,.load-tile)::after{display:none}
html.ub-shell .load-tile[data-k]{border-color:var(--card-edge)}

/* Inner wells */
html.ub-shell :is(.plan-week,.season-week,.performance-brief-widget,.evidence-case,.sess,.notice,.evidence-step,.execution-metrics span,.stat,.m,.vs){
  background:var(--pill);border-color:var(--line);box-shadow:none;
}
html.ub-shell :is(.plan-week,.season-week,.performance-brief-widget){border-radius:16px}
html.ub-shell :is(.plan-week.current,.season-week.current){background:var(--plain-a);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
html.ub-shell .season-week.has-race{border-color:var(--cyan)}
html.ub-shell .performance-brief-widget::after{display:none}
html.ub-shell :is(.load-track,.bar-track,.zbar){background:var(--track)}

/* Headings and labels */
html.ub-shell main h1{font-family:'Inter',system-ui,sans-serif;font-size:clamp(32px,3.4vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1.04;color:var(--ink)}
html.ub-shell main h2{letter-spacing:-.015em;color:var(--ink)}
html.ub-shell :is(.label,.sub,.rl,.lg,.plan-week-date,.season-date,.season-window,.plan-load-key,.load-num,.load-session-count,.sl .n,.sl .r,.performance-brief-label,.evidence-pill,.tip .d,.chart-reader label){
  font-family:'Inter',system-ui,sans-serif;letter-spacing:.04em;
}
html.ub-shell :is(.tile .value,.ramp .rv,.performance-brief-widget strong,.season-state strong,.tip .r b){font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:-.03em}
html.ub-shell :is(.tile .label,.ramp .rl,.performance-brief-label){font-size:11px;font-weight:600;color:var(--muted)}
html.ub-shell :is(.tile .sub,.plan-week-date,.season-date,.load-num,.load-session-count,.sl .n,.sl .r){font-size:11px}

/* Segmented buttons and pills */
html.ub-shell .tb-group{padding:4px;gap:2px;border:1px solid var(--card-edge);border-radius:999px;background:var(--plain-a);box-shadow:var(--card-shadow)}
html.ub-shell :is(.tb-btn,.navbtn){font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2);background:transparent;border:0;border-radius:999px;box-shadow:none;padding:0 16px;min-height:40px}
html.ub-shell :is(.tb-btn,.navbtn):hover{background:var(--pill);color:var(--ink)}
html.ub-shell .tb-btn[aria-pressed="true"]{background:var(--dark-pill);color:var(--dark-pill-ink);box-shadow:none}
html.ub-shell .navbtn{background:var(--plain-a);border:1px solid var(--card-edge)}
html.ub-shell :is(.chip,.phase-pill,.score-pill,.sport,.src,.evidence-state){border-radius:999px}
html.ub-shell .chip{background:var(--pill);color:var(--ink-2)}
html.ub-shell .evidence-pill{border-color:var(--good-bg);background:var(--good-bg);color:var(--good)}

/* Verdict sentences */
html.ub-shell :is(.verdict,.load-verdict,.plan-load-verdict){border:0;border-left:0;border-radius:18px;padding:14px 17px;background:var(--pill);color:var(--ink-2)}
html.ub-shell :is(.verdict,.load-verdict,.plan-load-verdict) strong{color:var(--ink)}

/* Tooltips, dialogs, skeletons */
html.ub-shell .tip{background:var(--tip);border:1px solid var(--card-edge);border-radius:14px;box-shadow:0 18px 40px -14px rgba(20,22,40,.35);color:var(--ink);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html.ub-shell :is(.move-dialog,dialog){color:var(--ink);background:var(--bg);border:1px solid var(--card-edge);border-radius:24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
html.ub-shell .skel{background:linear-gradient(90deg,rgba(128,128,150,.08) 25%,rgba(128,128,150,.16) 37%,rgba(128,128,150,.08) 63%);background-size:400% 100%;border-radius:20px}
html.ub-shell :is(input,select,textarea):not([type="range"]):not([type="checkbox"]):not([type="radio"]){color:var(--ink)}

/* Page to page: the sidebar holds still, the page content glides out and the next one in,
   and the highlight in the sidebar slides to the new page. Browsers without cross-page
   view transitions simply open the page as before. */
@view-transition{navigation:auto}
html.ub-shell .ubs-side{view-transition-name:ubs-side}
html.ub-shell main{view-transition-name:ubs-main}
html.ub-shell .ubs-nl[aria-current="page"]{view-transition-name:ubs-here}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(ubs-side){animation:none}
::view-transition-group(ubs-main){animation:none}
::view-transition-old(ubs-main){animation:ubs-page-out .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(ubs-main){animation:ubs-page-in .45s cubic-bezier(.2,.75,.2,1) .05s both}
::view-transition-group(ubs-here){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.75,.2,1)}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.75,.2,1)}
@keyframes ubs-page-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes ubs-page-in{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} }

/* Touchable charts (chart-scrub.mjs): a guide line and a small card with that point's numbers */
svg.ubs-sc{cursor:crosshair;outline:none;touch-action:pan-y}
svg.ubs-sc:focus-visible{box-shadow:0 0 0 3px var(--action);border-radius:10px}
svg.ubs-sc .ubs-sc-line{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s ease}
svg.ubs-sc.ubs-sc-on .ubs-sc-line{opacity:1}
.ubs-sc-tip{position:absolute;transform:translate(-50%,calc(-100% - 6px));pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:6;display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:12px;white-space:nowrap;background:linear-gradient(155deg,var(--plain-a),var(--plain-b));border:1px solid var(--card-edge);box-shadow:var(--card-shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font:500 12px Inter,system-ui,sans-serif;color:var(--ink-2)}
.ubs-sc-tip.on{opacity:1}
.ubs-sc-tip .t{font-weight:600;color:var(--muted);font-size:11.5px}
.ubs-sc-tip .r{display:flex;align-items:center;gap:6px} .ubs-sc-tip .r b{color:var(--ink);font-variant-numeric:tabular-nums}
.ubs-sc-tip i{width:9px;height:3px;border-radius:2px;display:inline-block}

/* Quiet note when saved numbers were refreshed and changed */
.ubs-fresh{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:linear-gradient(155deg,var(--plain-a),var(--plain-b));border:1px solid var(--card-edge);box-shadow:var(--card-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font:500 13px Inter,system-ui,sans-serif;color:var(--ink);animation:ubs-rise .4s cubic-bezier(.2,.75,.2,1) both}
.ubs-fresh button{min-height:40px;padding:0 14px;border:0;border-radius:999px;background:var(--dark-pill);color:var(--dark-pill-ink);font:600 13px Inter,system-ui,sans-serif;cursor:pointer}

/* Cards rise in, like the dashboard */
@keyframes ubs-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.ub-shell main > :is(section,.tiles,.page-head){animation:ubs-rise .7s cubic-bezier(.2,.75,.2,1) both}
html.ub-shell main > :nth-child(2){animation-delay:.04s} html.ub-shell main > :nth-child(3){animation-delay:.08s}
html.ub-shell main > :nth-child(4){animation-delay:.12s} html.ub-shell main > :nth-child(5){animation-delay:.16s}
html.ub-shell main > :nth-child(n+6){animation-delay:.2s}

@media (max-width:560px){
  /* Thumb-sized controls: range pills, day arrows, view switches, route tabs and chart toggles */
  html.ub-shell :is(.tb-btn,.chip,.lg){min-height:44px}
  html.ub-shell .tb-icon{min-width:44px}
  html.ub-shell :is(.chart-card,.plan-load-card,.season-card,.form-card,.performance-brief,.planner,.cal-shell,.plan-audit){border-radius:24px;padding:16px}
}
@media (prefers-reduced-motion:reduce){
  html.ub-shell main > *{animation:none!important}
}

.ubs-from{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 14px;padding:10px 16px;min-height:44px;border-radius:16px;background:var(--pill);border:1px solid var(--line);color:var(--ink-2);font:500 13px/1.4 'Inter',system-ui,sans-serif}
.ubs-from b{color:var(--ink);font-weight:600}
.ubs-from a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}

/* ─── Measure tones ─────────────────────────────────────────────────────
   Strong two-tone colours, one per measure, matching the tiles in the phone app:
   sun Protocol, mint Recovery, cyan HRV, lilac Sleep, ember Training, blue Fitness.
   hero is the one ember-to-purple gradient tile a screen gets. Add a tone class to any card:
   the text, rings, sparklines and bars inside re-colour themselves so they stay readable. */
html.ub-shell .tone-sun{--tone-a:#FFE500;--tone-b:#FFC400;--tone-ink:#1A1400;--tone-soft:rgba(26,20,0,.2)}
html.ub-shell .tone-mint{--tone-a:#2FEA93;--tone-b:#19C3A0;--tone-ink:#04241A;--tone-soft:rgba(4,36,26,.2)}
html.ub-shell .tone-cyan{--tone-a:#4FD8F0;--tone-b:#3E9BFF;--tone-ink:#0B2038;--tone-soft:rgba(11,32,56,.2)}
html.ub-shell .tone-blue{--tone-a:#6AA8FF;--tone-b:#4B63F0;--tone-ink:#FFFFFF;--tone-soft:rgba(255,255,255,.3)}
html.ub-shell .tone-lilac{--tone-a:#C16BFF;--tone-b:#7B6CFF;--tone-ink:#FFFFFF;--tone-soft:rgba(255,255,255,.3)}
html.ub-shell .tone-ember{--tone-a:#FC6A2C;--tone-b:#E0392F;--tone-ink:#FFFFFF;--tone-soft:rgba(255,255,255,.3)}
html.ub-shell :is(.tone-sun,.tone-mint,.tone-cyan,.tone-blue,.tone-lilac,.tone-ember){background:linear-gradient(145deg,var(--tone-a) 0%,var(--tone-b) 60%,color-mix(in srgb,var(--tone-b) 55%,transparent) 100%);border-color:rgba(255,255,255,.16)}
html.ub-shell .tone-hero{--tone-ink:#FFFFFF;--tone-soft:rgba(255,255,255,.3);background:linear-gradient(135deg,#F28A3C 0%,#F2584F 38%,#D8449A 72%,#8A4BE6 100%);border-color:transparent;box-shadow:0 22px 46px -22px rgba(216,68,154,.6)}
html.ub-shell :is(.tone-sun,.tone-mint,.tone-cyan,.tone-blue,.tone-lilac,.tone-ember,.tone-hero),
html.ub-shell :is(.tone-sun,.tone-mint,.tone-cyan,.tone-blue,.tone-lilac,.tone-ember,.tone-hero) *{color:var(--tone-ink)!important}
html.ub-shell :is(.tone-sun,.tone-mint,.tone-cyan,.tone-blue,.tone-lilac,.tone-ember,.tone-hero) :is(.w-foot,.w-side span,.w-big span,.w-ring-c span,.w-trio span,.w-race span){opacity:.85}
html.ub-shell :is(.tone-sun,.tone-mint,.tone-cyan,.tone-blue,.tone-lilac,.tone-ember,.tone-hero) .w-open::before{opacity:.7}
html.ub-shell :is(.tone-sun,.tone-mint,.tone-cyan,.tone-blue,.tone-lilac,.tone-ember,.tone-hero) svg :is(polyline,path){stroke:var(--tone-ink)}
html.ub-shell :is(.tone-sun,.tone-mint,.tone-cyan,.tone-blue,.tone-lilac,.tone-ember,.tone-hero) .w-ring svg circle{stroke:var(--tone-soft)}
html.ub-shell :is(.tone-sun,.tone-mint,.tone-cyan,.tone-blue,.tone-lilac,.tone-ember,.tone-hero) .w-ring svg circle + circle{stroke:var(--tone-ink)}
html.ub-shell :is(.tone-sun,.tone-mint,.tone-cyan,.tone-blue,.tone-lilac,.tone-ember,.tone-hero) .w-bars i{background:var(--tone-soft)!important}
html.ub-shell :is(.tone-sun,.tone-mint,.tone-cyan,.tone-blue,.tone-lilac,.tone-ember,.tone-hero) .w-bars i[style*="var(--violet)"]{background:var(--tone-ink)!important}