/* KNGMVMT client portal. White page, black type, gold accent (client documents are white per the brand). */
:root {
  --paper: #ffffff; --ink: #111111; --soft: #5f5b54; --faint: #a29d94; --line: #ebe8e2; --tile: #f5f4f1;
  --gold: #c9a84c; --gold-ink: #8a6d1f; --gold-wash: #f7f0dc; --good: #1f7546; --good-wash: #e5f3ea;
  --disp: "Bebas Neue", "DIN Condensed", Impact, sans-serif; --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.me { max-width: 560px; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) calc(110px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); display: grid; gap: 18px; }
/* Grid children may shrink below their content (22 Oct 2026): a long chip row (two meal plans) or a long name otherwise
   widens the whole page past the phone and pushes the meal ticks off the screen. */
.me > *, .s-card > *, .mi > * { min-width: 0; }
.mi summary > span { min-width: 0; }
.logo { width: 130px; display: block; }
.state { color: var(--soft); margin: 0; }
.hello { display: flex; justify-content: space-between; align-items: center; }
.av { width: 38px; height: 38px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; font-family: var(--disp); font-size: 19px; color: var(--gold-ink); }
.h { font-family: var(--disp); font-weight: 400; font-size: 46px; line-height: .92; letter-spacing: .015em; margin: 6px 0 0; text-wrap: balance; }
.h2 { font-family: var(--disp); font-weight: 400; font-size: 27px; letter-spacing: .02em; line-height: 1; margin: 0; }
.lab { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); font-weight: 600; }
.sub { color: var(--soft); font-size: 14px; line-height: 1.5; margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.block { display: grid; gap: 10px; }
.bhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.linkb { font-size: 14px; color: var(--gold-ink); font-weight: 600; text-decoration: none; border: 0; background: none; padding: 12px 0; margin-block: -12px; }   /* 44px tap area, same spacing (25 Oct 2026 audit) */
.tile { background: var(--tile); border-radius: 18px; padding: 14px; }
.next { background: var(--ink); color: var(--paper); border-radius: 24px; padding: 18px; display: grid; gap: 8px; }
.next .lab { color: var(--gold); }
.next b { font-family: var(--disp); font-weight: 400; font-size: 32px; letter-spacing: .02em; line-height: 1; }
.next .row2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: #d6d2ca; }
.next a { border: 1px solid #3d3c39; border-radius: 99px; padding: 7px 14px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--paper); white-space: nowrap; }
.week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.week div { background: var(--tile); border-radius: 16px; padding: 12px; display: grid; gap: 4px; }
.week b { font-family: var(--disp); font-weight: 400; font-size: 30px; line-height: 1; }
.week small { font-size: 12px; color: var(--soft); }
.week .of { font-size: 18px; color: var(--faint); }
.bar { height: 5px; border-radius: 9px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 9px; }
.bar.ok i { background: var(--good); }
.note { border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: grid; gap: 8px; }
.note .who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--soft); }
.note .who .av { width: 30px; height: 30px; font-size: 15px; background: var(--ink); color: var(--gold); }
.note p { margin: 0; line-height: 1.55; white-space: pre-line; }
.wins { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding-inline: 18px; }
.wins::-webkit-scrollbar { display: none; }
.win { flex: none; width: 152px; border-radius: 16px; padding: 12px; background: var(--gold-wash); display: grid; gap: 6px; align-content: start; }
.win b { font-size: 14px; line-height: 1.3; } .win small { font-size: 12px; color: var(--gold-ink); font-weight: 600; }
.seg { display: inline-flex; background: var(--tile); border-radius: 99px; padding: 3px; }
.seg button { border: 0; background: none; border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--soft); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(17,17,17,.12); }
.chart svg { width: 100%; height: auto; display: block; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trio div { border-top: 1px solid var(--line); padding-top: 8px; }
.trio b { display: block; font-size: 17px; } .trio small { font-size: 12px; color: var(--soft); }
.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 99px; background: var(--tile); color: var(--soft); }
.chip.good { background: var(--good-wash); color: var(--good); } .chip.gold { background: var(--gold-wash); color: var(--gold-ink); }
.scores { display: grid; gap: 10px; }
.score { display: grid; grid-template-columns: minmax(0, 122px) 1fr 30px; align-items: center; gap: 10px; font-size: 13px; }
.score span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dots { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; align-items: end; height: 28px; }
.dots i { background: #d9d5cd; border-radius: 3px; } .dots i:last-child { background: var(--gold); }
.score b { text-align: right; }
.list { display: grid; }
.li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.li:last-child { border-bottom: 0; }
.li small { display: block; font-size: 13px; color: var(--soft); margin-top: 2px; }
.btn { display: block; border: 0; border-radius: 14px; padding: 14px 16px; font-weight: 600; font-size: 15px; background: var(--ink); color: var(--paper); text-align: center; text-decoration: none; }
.btn.alt { background: var(--tile); color: var(--ink); }
.btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.days div { border-radius: 12px; padding: 8px 2px; text-align: center; background: var(--tile); display: grid; gap: 2px; min-width: 0; }
.days small { font-size: 11px; color: var(--soft); } .days b { font-size: 11px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.days .today { background: var(--ink); color: var(--paper); } .days .today small { color: var(--gold); }
.days .done { background: var(--good-wash); } .days .done b { color: var(--good); }
.macros { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.ring { position: relative; width: 112px; height: 112px; }
.ring svg { width: 112px; height: 112px; transform: rotate(-90deg); }
.ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring b { font-family: var(--disp); font-weight: 400; font-size: 28px; line-height: 1; } .ring small { font-size: 11px; color: var(--soft); }
.mlist { display: grid; gap: 8px; font-size: 14px; }
.mlist div { display: flex; justify-content: space-between; gap: 8px; }
.mlist i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.past { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.past:last-child { border-bottom: 0; }
.past b { font-size: 14px; } .past p { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-line; }
.fold { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fold:last-child { border-bottom: 0; }

/* photos */
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.thumbs img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; background: var(--tile); display: block; }
.thumbs figure { margin: 0; display: grid; gap: 4px; } .thumbs figcaption { font-size: 12px; color: var(--soft); }
.strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding: 2px 18px 4px; scroll-snap-type: x proximity; }
.strip::-webkit-scrollbar { display: none; }
.pick { flex: none; width: 74px; border: 0; background: none; padding: 0; display: grid; gap: 4px; position: relative; scroll-snap-align: start; }
.pick img { width: 74px; height: 98px; object-fit: cover; border-radius: 12px; display: block; background: var(--tile); outline: 2px solid transparent; outline-offset: 2px; }
.pick.on img { outline-color: var(--gold); }
.pick small { font-size: 11px; color: var(--soft); text-align: center; }
.pick .badge { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.cmp-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmp-pick label { display: grid; gap: 4px; font-size: 12px; color: var(--soft); font-weight: 600; }
.cmp-pick select { font: inherit; font-size: 16px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); width: 100%; }
.side { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.side figure { margin: 0; position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 3/4; background: var(--tile); }
.side img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; display: block; background: var(--tile); }
.side figcaption, .ov .tag { position: absolute; left: 8px; top: 8px; background: rgba(17,17,17,.72); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 99px; }
.ov { position: relative; width: 100%; aspect-ratio: 3/4; max-width: 100%; border-radius: 16px; overflow: hidden; background: var(--tile); touch-action: none; user-select: none; }
.ov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ov .pw { position: absolute; inset: 0; overflow: hidden; }
.ov .pw.after { clip-path: inset(0 0 0 var(--cut, 50%)); }
.ov .handle { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(17,17,17,.15); }
.ov .handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 16px; box-shadow: 0 4px 14px rgba(17,17,17,.25); }
.ov .tag.r { left: auto; right: 8px; }
.ov input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.fade { display: grid; gap: 6px; }
.fade input { width: 100%; accent-color: var(--gold); }

/* tab bar */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 8px max(6px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); }
.tabs div { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
.tabs button { border: 0; background: none; display: grid; justify-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--faint); padding: 4px 0; min-height: 48px; }
.tabs button[aria-current="page"] { color: var(--ink); }
.tabs svg { width: 22px; height: 22px; }
.tabs button[aria-current="page"] svg { stroke: var(--gold-ink); }
.foot { font-size: 12px; color: var(--soft); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

/* home-screen install (17 Oct 2026) */
.inst { border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: grid; gap: 12px; }
.inst .top { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.inst .top img { width: 52px; height: 52px; border-radius: 12px; display: block; }
.inst .top b { display: block; font-size: 16px; } .inst .top span { font-size: 13px; color: var(--soft); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; }
.steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 99px; background: var(--tile); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.steps svg { width: 18px; height: 18px; vertical-align: -3px; color: #0a84ff; }
.inst .acts { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.inst .acts .btn.alt { padding-inline: 18px; }

/* passcode lock (17 Oct 2026) */
.lk { min-height: calc(100vh - 160px); display: grid; align-content: start; justify-items: center; gap: 18px; text-align: center; padding-top: 4vh; }
.lk-top { display: grid; justify-items: center; gap: 14px; } .lk-top .logo { margin: 0 auto; }
.lk-msg { display: grid; gap: 6px; max-width: 300px; } .lk-msg b { font-size: 17px; }
.lk-dots { display: flex; gap: 14px; justify-content: center; padding: 6px 0; }
.lk-dots i { width: 13px; height: 13px; border-radius: 99px; border: 1.5px solid var(--ink); transition: background .12s; }
.lk-dots i.on { background: var(--ink); }
.lk-dots.bad { animation: lkshake .35s; } .lk-dots.bad i { border-color: #b3261e; }
@keyframes lkshake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.lk-err { min-height: 20px; margin: -6px 0 0; font-size: 14px; color: #b3261e; max-width: 300px; }
.lk-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px 22px; justify-content: center; }
.lk-pad button { width: 76px; height: 76px; border-radius: 99px; border: 0; background: var(--tile); color: var(--ink); font: 400 30px/1 var(--disp); display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.lk-pad button:active { background: var(--line); } .lk-pad button[data-k="del"] { background: none; }
.lk-pad button:disabled { opacity: .45; } .lk-pad svg { width: 26px; height: 26px; }
.lk-foot { display: flex; gap: 18px; justify-content: center; }
.lk-link { border: 0; background: none; color: var(--gold-ink); font: 600 14px var(--body); padding: 8px; }
.lk-acts { display: grid; gap: 8px; width: 100%; max-width: 300px; }
@media (prefers-reduced-motion: reduce) { .lk-dots.bad { animation: none; } }
.lk-err.wait { color: var(--soft); }

/* meals and shopping list (17 Oct 2026) */
.meal { border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: grid; gap: 10px; }
.meal .mh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.meal .mh b { font-size: 16px; } .meal .mh small { font-size: 12px; color: var(--soft); white-space: nowrap; }
.meal .opts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .meal .opts::-webkit-scrollbar { display: none; }
.chipb { border: 1px solid var(--line); background: var(--paper); border-radius: 99px; padding: 6px 12px; font: 600 13px var(--body); color: var(--soft); white-space: nowrap; }
.chipb[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.food { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.food:last-child { border-bottom: 0; } .food span:last-child { color: var(--soft); font-variant-numeric: tabular-nums; }
.mnote { font-size: 13px; color: var(--soft); background: var(--tile); border-radius: 12px; padding: 9px 12px; margin: 0; }
.btn.gold { background: var(--gold); color: var(--ink); }
.btn svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; }
.sheet { position: fixed; inset: 0; z-index: 30; background: var(--paper); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet .in { max-width: 560px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); display: grid; gap: 18px; }
.sheet .top { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--paper); padding: 6px 0; z-index: 1; }
.xbtn { border: 0; background: var(--tile); width: 38px; height: 38px; border-radius: 99px; display: grid; place-items: center; }
.xbtn svg { width: 18px; height: 18px; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stepper .ctl { display: flex; align-items: center; gap: 4px; background: var(--tile); border-radius: 99px; padding: 4px; }
.stepper .ctl button { width: 40px; height: 40px; border: 0; border-radius: 99px; background: var(--paper); font: 400 24px/1 var(--disp); box-shadow: 0 1px 2px rgba(17,17,17,.08); }
.stepper .ctl button:disabled { opacity: .35; } .stepper .ctl b { min-width: 40px; text-align: center; font: 400 26px/1 var(--disp); }
.stepper span small { display: block; font-size: 12px; color: var(--soft); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.aisle { display: grid; gap: 2px; }
.aisle h3 { margin: 0 0 4px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.item i { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #cfcac1; display: grid; place-items: center; }
.item i svg { width: 14px; height: 14px; opacity: 0; }
.item b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item span small { display: block; font-size: 12px; color: var(--soft); }
.item.on i { background: var(--ink); border-color: var(--ink); } .item.on i svg { opacity: 1; color: var(--paper); }
.item.on span, .item.on b { color: var(--faint); text-decoration: line-through; }
.shopsum { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--soft); }
.optrow { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .optrow::-webkit-scrollbar { display: none; }

/* zoom and line up (17 Oct 2026) */
.ov img, .side img { transform-origin: 50% 50%; will-change: transform; }
.side img { height: 100%; border-radius: 0; pointer-events: none; }
.ov.adj, .side.adj figure { touch-action: none; cursor: grab; box-shadow: inset 0 0 0 2px var(--gold); }
.ov.adj input[type=range] { pointer-events: none; }
.ov .tag, .ov .handle, .side figcaption { z-index: 2; }
.ztools { display: grid; gap: 8px; }
.zrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zbtns { display: inline-flex; gap: 4px; background: var(--tile); border-radius: 99px; padding: 3px; }
.zbtns button { width: 36px; height: 36px; border: 0; border-radius: 99px; background: var(--paper); font: 400 22px/1 var(--disp); box-shadow: 0 1px 2px rgba(17,17,17,.08); }
#zreset { margin-left: auto; } #zreset:disabled { opacity: .35; }
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; }   /* no double-tap zoom on the interface */
.ov.adj::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--gold); border-radius: 16px; pointer-events: none; z-index: 3; }

/* profile picture (17 Oct 2026) */
.avbtn { border: 0; background: none; padding: 0; border-radius: 50%; }
.avbtn[aria-current="page"] .av { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold); }
.av { overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.big { width: 96px; height: 96px; font-size: 44px; }
.avedit { display: flex; align-items: center; gap: 18px; }
.avbtns { display: grid; gap: 8px; justify-items: start; }
.avbtns .btn { padding: 11px 18px; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 40; max-width: 90vw; }

/* profile photo crop (17 Oct 2026) */
#crop { z-index: 45; }
.crstage { position: relative; overflow: hidden; border-radius: 18px; background: #111; touch-action: none; cursor: grab; max-width: 100%; }
.crstage img { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.crmask { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(17,17,17,.55); border: 2px solid rgba(255,255,255,.85); pointer-events: none; }
.crz { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; font: 400 22px/1 var(--disp); color: var(--soft); }
.crz input { flex: 1; accent-color: var(--gold); }

/* programme blocks and goals (17 Oct 2026) */
.phase { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; }
.phase.now { background: var(--ink); color: var(--paper); border-color: var(--ink); padding: 16px; gap: 8px; }
.phase.now b { font-family: var(--disp); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: .02em; }
.phase.now p { margin: 0; color: #d9d6cf; font-size: 14px; } .phase.now small { color: #a9a59c; font-size: 12px; }
.phase.now .bar { background: #34322e; } .phase.now .bar i { background: var(--gold); }
.phase summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.phase summary::-webkit-details-marker { display: none; }
.phase summary small { display: block; font-size: 12px; color: var(--soft); font-weight: 400; }
.phase p { margin: 4px 0 0; font-size: 14px; }
.phase .why { font-style: italic; color: var(--soft); } .phase.now .why { color: #e8e4da; }
.phase .why span { font-style: normal; font-size: 12px; font-weight: 600; color: var(--gold-ink); margin-left: 4px; } .phase.now .why span { color: var(--gold); }
.phases { display: grid; gap: 8px; }
.goal { border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: grid; gap: 10px; }
.goal > b { font-size: 17px; line-height: 1.3; } .goal .sub { margin: -4px 0 0; }
.gp { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 14px; } .gp .num { text-align: right; } .gp small { color: var(--soft); }
.gp .bar { grid-column: 1 / -1; }
.ftrend { width: 100%; height: auto; display: block; margin: 6px 0 2px; }

/* in-app booking (17 Oct 2026) */
.daysrow { padding-bottom: 2px; }
.daychip { flex: 0 0 auto; width: 58px; border: 1px solid var(--line); background: var(--paper); border-radius: 14px; padding: 8px 0; display: grid; justify-items: center; gap: 1px; font-family: var(--body); color: var(--ink); }
.daychip small { font-size: 11px; color: var(--soft); } .daychip b { font: 400 24px/1 var(--disp); }
.daychip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .daychip[aria-pressed="true"] small { color: var(--gold); }
.timegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.timegrid .chipb { padding: 10px 0; text-align: center; }
.bconfirm { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 12px 12px 12px 16px; box-shadow: 0 8px 24px rgba(17,17,17,.10); }
.bconfirm small { display: block; font-size: 12px; color: var(--soft); } .bconfirm .btn { padding: 12px 20px; }

/* photo comparison, rebuilt (17 Oct 2026) */
.pslots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.pslot { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--paper); border-radius: 16px; padding: 8px; font-family: var(--body); color: var(--ink); min-width: 0; }
.pslot img { width: 48px; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.pslot span { display: grid; min-width: 0; } .pslot small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; }
.pslot b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pslot em { font-style: normal; font-size: 12px; color: var(--soft); }
.parrow { color: var(--faint); font-size: 18px; }
.stage { position: relative; width: 100%; aspect-ratio: 3/4; max-width: 100%; border-radius: 16px; overflow: hidden; background: #1c1b19; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.stage.slider { cursor: ew-resize; }
.side .stage { border-radius: 14px; }
.ly { position: absolute; inset: 0; overflow: hidden; }
.ly img, .side .ly img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; opacity: 0; transition: opacity .2s; pointer-events: none; -webkit-user-drag: none; aspect-ratio: auto; border-radius: 0; object-fit: fill; background: none; }
.ly.cut { clip-path: inset(0 0 0 var(--cut, 50%)); }
.stage .handle { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(17,17,17,.15); z-index: 2; pointer-events: none; }
.stage .handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.stage .tag { position: absolute; left: 8px; top: 8px; z-index: 2; background: rgba(17,17,17,.72); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 99px; pointer-events: none; }
.stage .tag.r { left: auto; right: 8px; }
.fadelab { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 12px; } .fadelab input { accent-color: var(--gold); width: 100%; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pcell { position: relative; border: 2px solid transparent; border-radius: 14px; padding: 0; background: var(--tile); overflow: hidden; display: grid; font-family: var(--body); }
.pcell img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.pcell small { font-size: 12px; padding: 5px 0 6px; color: var(--ink); }
.pcell.on { border-color: var(--gold); }
.pcell .badge { position: absolute; left: 6px; top: 6px; background: var(--gold); color: #111; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.pcell .badge.alt { background: #111; color: #fff; }

/* share picture (17 Oct 2026) */
.shopts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shprev { display: grid; place-items: center; background: var(--tile); border-radius: 16px; padding: 12px; min-height: 240px; }
.shprev canvas { display: block; max-width: 100%; max-height: 58vh; height: auto; border-radius: 10px; box-shadow: 0 6px 24px rgba(17,17,17,.18); touch-action: none; }
.shprev.story canvas { aspect-ratio: 9/16; width: auto; } .shprev.post canvas { aspect-ratio: 4/5; width: auto; }
.shprev canvas.tool-draw { cursor: crosshair; } .shprev canvas.tool-move { cursor: grab; }
.pen { width: 34px; height: 34px; border-radius: 50%; background: var(--pen); border: 2px solid var(--line); flex: 0 0 auto; }
.pen[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.chipb.stk { font-size: 14px; }
.shtools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; } .shhist { display: flex; gap: 6px; } .shhist .chipb:disabled { opacity: .4; }
.pvbar { background: #111; color: #e0c06a; font-size: 12px; font-weight: 600; text-align: center; padding: 8px 12px; border-radius: 12px; }
a.hflink { text-decoration: none; color: inherit; }
.mreqbtn { justify-self: start; font-size: 13px; padding: 2px 0; }
.mrnote { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 14px; padding: 12px; font: 15px/1.5 var(--body); color: var(--ink); background: var(--paper); resize: vertical; }
.goalrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.goalrow input { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: 600 18px var(--body); color: var(--ink); background: var(--paper); min-width: 0; }
.goalrow .btn { padding: 12px 18px; }

/* add progress photos (17 Oct 2026) */
.apdate { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 600 15px var(--body); color: var(--ink); background: var(--paper); }
.aplist { display: grid; gap: 12px; }
.apose { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.apose.ok { border-color: var(--good); }
.apimgs { display: flex; gap: 6px; }
.apref, .apnew { width: 66px; height: 88px; border-radius: 10px; overflow: hidden; background: var(--tile); display: grid; place-items: center; position: relative; font-size: 11px; color: var(--soft); text-align: center; }
.apnew { border: 1.5px dashed #cfcac1; cursor: pointer; } .apnew span { font: 400 30px/1 var(--disp); color: var(--ink); }
.apref img, .apnew img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.apref small, .apnew small { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(17,17,17,.65); color: #fff; font-size: 10px; padding: 2px 0; }
.aptext { display: grid; gap: 2px; } .aptext b { font-size: 15px; } .aptext span { font-size: 13px; color: var(--soft); }
.duecard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--gold); background: #fbf7ea; border-radius: 16px; padding: 12px 14px; }
.duecard b { display: block; font-size: 15px; } .duecard span { font-size: 13px; color: var(--soft); } .duecard .btn { padding: 11px 16px; white-space: nowrap; }
.duecard.over { border-color: #e5484d; background: #fdf1f1; }
.payhist summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--gold-ink); padding: 4px 0; list-style: none; } .payhist summary::-webkit-details-marker { display: none; }
.payhist summary::after { content: " ›"; } .payhist[open] summary::after { content: " ⌄"; } .payhist .tile { margin-top: 8px; }
.payover { color: #b42318; } .chip.bad { background: #fdecec; color: #b42318; }

/* More, supplements, help (17 Oct 2026) */
.tabs button.dot { position: relative; } .tabs button.dot::after { content: ""; position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
.backb { justify-self: start; font-size: 14px; }
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mtile { display: grid; gap: 4px; align-content: start; justify-items: start; text-align: left; background: var(--tile); border: 1px solid var(--line); border-radius: 18px; padding: 16px 14px; min-height: 128px; font: inherit; color: inherit; cursor: pointer; }
.mtile svg { width: 26px; height: 26px; color: var(--gold-ink); margin-bottom: 6px; } .mtile b { font-size: 16px; } .mtile small { font-size: 12.5px; color: var(--soft); line-height: 1.35; } .mtile .chip { margin-top: 6px; }
.sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stile { display: grid; gap: 3px; align-content: start; background: var(--tile); border: 1px solid var(--line); border-radius: 16px; padding: 14px; color: inherit; text-decoration: none; min-width: 0; }
.stile b { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; } .stile .sdose { font-family: var(--disp); font-size: 22px; line-height: 1.05; color: var(--ink); } .stile small { font-size: 12.5px; color: var(--soft); }
.stile p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--soft); } .stile .slink { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--gold-ink); }
.pgate .li.pchk { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; } .pgate .pchk input { width: 20px; height: 20px; margin-top: 2px; accent-color: #1a1a1a; }
.pbreak { white-space: pre-line; font-size: 14.5px; line-height: 1.6; }
.pfoot { font-size: 11.5px; line-height: 1.5; color: var(--soft); } .pfoot b { display: block; font-size: 12px; color: var(--ink); margin-bottom: 4px; } .pfoot p { margin: 0 0 8px; }
.chat { display: grid; gap: 8px; } .cmsg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; white-space: pre-line; }
.cmsg.tri { background: var(--tile); border: 1px solid var(--line); justify-self: start; border-bottom-left-radius: 6px; } .cmsg.me { background: #1a1a1a; color: #fff; justify-self: end; border-bottom-right-radius: 6px; } .cmsg.typing { color: var(--soft); }
.chatin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .chatin input { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; min-width: 0; }
.daily { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--soft); font-style: italic; max-width: 34ch; }
.alerts { display: grid; gap: 8px; }
.alert { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; font: inherit; color: inherit; background: #fbf7ea; border: 1px solid var(--gold); border-radius: 16px; padding: 12px 14px; cursor: pointer; }
.alert b { display: block; font-size: 15px; } .alert small { font-size: 13px; color: var(--soft); } .alert .ago { font-size: 13px; font-weight: 700; color: var(--gold-ink); white-space: nowrap; }
.alert.bad { background: #fdf1f1; border-color: #e5484d; } .alert.bad .ago { color: #b42318; }

/* This week / Today (17 Oct 2026) */
.wkc { display: grid; gap: 4px; text-align: left; font: inherit; color: inherit; background: var(--ink); color: #fff; border: 0; border-radius: 20px; padding: 16px; cursor: pointer; }
.wkc .lab { color: var(--gold); } .wkc b { font-family: var(--disp); font-weight: 400; font-size: 26px; line-height: 1.05; letter-spacing: .01em; } .wkc small { font-size: 13.5px; color: #cfcac0; line-height: 1.4; }
.wkc .more { font-size: 13px; font-weight: 700; color: var(--gold); margin-top: 4px; }
.wkc.today { background: var(--tile); color: var(--ink); border: 1px solid var(--line); } .wkc.today .lab { color: var(--gold-ink); } .wkc.today small { color: var(--soft); } .wkc.today .more { color: var(--gold-ink); }
.tgs { display: grid; gap: 6px; margin: 6px 0 2px; } .tg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 14px; }
.tg b { font-family: inherit; font-size: 14.5px; font-weight: 700; white-space: nowrap; } .tg span { overflow-wrap: anywhere; }
#wks .li small.why { display: block; margin-top: 3px; color: var(--soft); font-size: 12px; line-height: 1.4; } #wks .tile p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; }
.item small.pick { display: block; width: auto; text-align: left; margin-top: 3px; font-size: 12.5px; color: var(--soft); line-height: 1.35; } .item small.pick a { color: var(--gold-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
/* shopping list: the client's version of an item (17 Oct 2026) */
.item small.pick .usepick { font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--tile); border: 1px solid var(--line, #ddd8cf); border-radius: 999px; padding: 2px 9px; margin: 0 4px; cursor: pointer; white-space: nowrap; }
.item small.pick .usepick.on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.item small.pick.lab2 { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; font-weight: 700; margin-top: 6px; }
/* stack page: vitamins by time of day (17 Oct 2026) */
.vgroup { display: grid; gap: 6px; } .vgroup + .vgroup { margin-top: 10px; }
.vslot { font-size: 13px; font-weight: 700; color: var(--gold-ink); }
.vgroup .li small { display: block; color: var(--soft); font-size: 12px; margin-top: 2px; }
.vgroup a.li { color: inherit; text-decoration: none; }
/* Today card v2 (17 Oct 2026) */
div.wkc { cursor: default; }
.wkc .tdh { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.wkc .where { font-size: 12px; font-weight: 700; color: var(--soft); }
.wkc.today > b { font-size: 22px; margin-top: 2px; }
.tg2 { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.tgh { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.tgh span, .tgh b { min-width: 0; overflow-wrap: anywhere; }
.tag { font-style: normal; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--bg, #f6f4ef); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.tag.up { background: var(--gold); border-color: var(--gold); }
.tgl { display: flex; gap: 8px; align-items: baseline; font-size: 14px; } .tgl b { font-family: inherit; font-size: 14.5px; font-weight: 700; }
.tgl.soft { color: var(--soft); font-size: 13px; }
.lab3 { width: 40px; flex: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--soft); }
.wkc .eff b, .wkc .eff { font-family: inherit; font-size: 13.5px; } .wkc .eff b { font-weight: 700; color: var(--ink); margin-right: 4px; }
.wkc .cheer { color: var(--ink) !important; font-weight: 600; }
.tda { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .tda .btn { flex: 1 1 auto; text-align: center; }
.wset { display: grid; gap: 8px; }
table.sets { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.sets th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); font-weight: 700; padding: 0 6px 4px 0; }
table.sets td { padding: 5px 6px 5px 0; border-top: 1px solid var(--line); white-space: nowrap; }

/* Exercise demo videos (19 Oct 2026, draft) */
.tgr { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vbtn { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 Inter, system-ui, sans-serif; color: var(--gold-ink, #8a6d1f); background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 6px 10px; cursor: pointer; white-space: nowrap; opacity: .9; }
.vbtn svg { width: 9px; height: 9px; fill: currentColor; }
.li .vbtn { margin-left: auto; }
.vframe { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Simpler Home and Training (19 Oct 2026, draft, demo client only) */
.s-card { background: var(--tile); border-radius: 20px; padding: 20px; display: grid; gap: 14px; }
.s-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.s-k { font-size: 13px; font-weight: 600; color: var(--gold-ink); }
.s-t { font-family: var(--disp); font-size: 34px; line-height: 1; margin: 0; letter-spacing: .3px; }
.s-sub { font-size: 14px; color: var(--soft); margin: 0; display: block; }
.s-ex { display: grid; }
.s-exr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.s-exr:first-child { border-top: 0; padding-top: 0; }
.s-exn { font-size: 15px; font-weight: 500; }
.s-exn small { display: block; font-size: 13px; color: var(--soft); font-weight: 400; margin-top: 3px; }
.s-up { font-style: normal; font-size: 9px; color: var(--good); vertical-align: 2px; }
.s-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--tile); border: 0; border-radius: 16px; padding: 16px 18px; font: inherit; color: inherit; }
.s-line small { display: block; font-size: 12px; color: var(--soft); margin-bottom: 2px; }
.s-line b { font-size: 16px; font-weight: 600; }
.s-when { font-size: 14px; color: var(--soft); text-align: right; }
.s-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.s-stats div { background: var(--tile); border-radius: 16px; padding: 14px; display: grid; gap: 2px; }
.s-stats b { font-family: var(--disp); font-size: 28px; line-height: 1; }
.s-stats b span { font-size: 18px; color: var(--soft); }
.s-stats b.ok { color: var(--good); }
.s-stats small { font-size: 12px; color: var(--soft); }
.s-prog { display: grid; gap: 6px; margin-top: 10px; }
.s-prog small { font-size: 13px; color: var(--soft); }
.s-more { border-radius: 16px; }
.s-more > summary { cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; padding: 14px 18px; background: var(--tile); border-radius: 16px; display: flex; justify-content: space-between; }
.s-more > summary::after { content: "›"; color: var(--soft); transform: rotate(90deg); }
.s-more[open] > summary::after { transform: rotate(-90deg); }
.s-more > summary::-webkit-details-marker { display: none; }
.s-more > :not(summary) { margin-top: 10px; }
.s-more .btns { display: grid; gap: 8px; }
.s-goal { margin: -6px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.s-tl { display: flex; gap: 8px; align-items: baseline; font-size: 14px; margin-top: 4px; }
.s-tl em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--soft); min-width: 40px; }
.s-tl b { font-weight: 600; }
.s-tl.soft { color: var(--soft); margin-top: 2px; }

/* Week strip as buttons, session states, workout screen (19 Oct 2026, demo client first) */
.s-days button { font: inherit; color: inherit; border: 0; cursor: pointer; }
.s-days button:disabled { cursor: default; opacity: .55; }
.s-days button.sel { outline: 2px solid var(--gold); outline-offset: -2px; }
.s-done { background: var(--good-wash); }
.s-done .s-k { color: var(--good); }
.wo .in { gap: 14px; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
.wo-time { font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.wo-ex { background: var(--tile); border-radius: 18px; padding: 16px; display: grid; gap: 12px; }
.wo-ex.done { background: var(--good-wash); }
.wo-ex b { font-size: 16px; font-weight: 600; }
.wo-sets { display: grid; gap: 8px; }
.wo-h, .wo-r { display: grid; grid-template-columns: 52px minmax(0, 1fr) 68px 58px 44px; gap: 8px; align-items: center; }
.wo-h span { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--soft); }
.wo-n { font-weight: 600; font-size: 15px; }
.wo-n small { display: block; font-size: 11px; font-weight: 400; color: var(--soft); }
.wo-l { font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.wo-r input::placeholder { color: var(--mute, #9a9a9a); opacity: .55; font-weight: 500; }
.wo-r input { width: 100%; box-sizing: border-box; font: 600 16px/1 var(--body); text-align: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.wo-c { width: 44px; height: 40px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--faint); font-size: 18px; font-weight: 700; cursor: pointer; }
.wo-c.on { background: var(--good); border-color: var(--good); color: #fff; }
.wo-r.on input { background: transparent; border-color: transparent; }
.wo-tick { justify-self: start; border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; padding: 9px 16px; font: 600 14px var(--body); color: var(--ink); cursor: pointer; }
.wo-tick.on { background: var(--good); border-color: var(--good); color: #fff; }
.wo-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: -4px; }
.wo-unit { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--paper); }
.wo-unit button { border: 0; background: none; font: 600 12.5px var(--body); color: var(--soft); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.wo-unit button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.wo-swapped { font-size: 12.5px; color: var(--soft); text-align: right; }
.wo-from { display: block; font-size: 12.5px; color: var(--soft); margin: 2px 0 6px; }
.wo-swap { display: grid; gap: 8px; background: var(--paper); border-radius: 14px; padding: 12px; }
.wo-swap > small { color: var(--soft); font-size: 12.5px; }
.wo-swap > .wo-swh { color: var(--gold-ink); font-weight: 700; font-size: 12px; letter-spacing: .04em; margin-top: 2px; }
.wo-alt { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.wo-alt > span { flex: 1; min-width: 0; }
.wo-alt b { display: block; font-size: 14.5px; }
.wo-alt small { display: block; color: var(--soft); font-size: 12.5px; }
.wo-swap > .linkb { justify-self: start; }
.wo-confirm { background: var(--gold-wash); border-radius: 18px; padding: 16px; display: grid; gap: 12px; }
.wo-confirm p { margin: 0; font-weight: 600; }
.wo-rest { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; display: flex; align-items: center; justify-content: center; gap: 16px; background: var(--ink); color: var(--paper); padding: 16px max(18px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); }
.wo-rest span { font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.wo-rest b { font-family: var(--disp); font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.wo-rest .linkb { color: var(--gold); }
.wo-done { text-align: left; }
.wo-big { font-size: 20px; line-height: 1.35; margin: 0; }
.s-days button { border-radius: 12px; padding: 8px 2px; text-align: center; background: var(--tile); display: grid; gap: 2px; min-width: 0; }
.s-days button.today { background: var(--ink); color: var(--paper); } .s-days button.today small { color: var(--gold); }
.s-days button.done { background: var(--good-wash); } .s-days button.done b { color: var(--good); }

/* Session picker, review page (19 Oct 2026) */
.s-pick { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.s-pick::-webkit-scrollbar { display: none; }
.s-pick button { flex: 0 0 auto; min-width: 96px; text-align: left; border: 1.5px solid transparent; background: var(--tile); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; font: inherit; color: inherit; cursor: pointer; }
.s-pick button small { font-size: 11px; color: var(--soft); font-weight: 600; }
.s-pick button b { font-size: 14px; }
.s-pick button.done { background: var(--good-wash); } .s-pick button.done small { color: var(--good); }
.s-pick button.sel { border-color: var(--ink); }
.s-hint { font-size: 13px; color: var(--soft); margin: 0; }
.s-okline { background: var(--good-wash); } .s-okline b { color: var(--good); }
.diff { display: grid; gap: 8px; }
.diff button { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; text-align: left; border: 1.5px solid var(--line); background: var(--paper); border-radius: 14px; padding: 12px 14px; font: inherit; color: inherit; cursor: pointer; }
.diff .em { font-size: 26px; line-height: 1; }
.diff b { font-size: 15px; } .diff small { font-size: 12px; color: var(--soft); }
.diff button.on { border-color: var(--gold); background: var(--gold-wash); }
.wo-rev textarea { width: 100%; box-sizing: border-box; font: 16px/1.5 var(--body); padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); resize: vertical; }
.opt { font-family: var(--body); font-size: 12px; font-weight: 500; color: var(--soft); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.btn[disabled] { opacity: .45; }

/* Rest notification prompt (19 Oct 2026) */
.wo-push { display: grid; gap: 10px; background: var(--gold-wash); border-radius: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.45; }
.wo-pb { display: flex; gap: 14px; align-items: center; }
.btn.sm { padding: 9px 16px; font-size: 14px; width: auto; }

/* Activity from Apple Health (19 Oct 2026) */
.hl { display: grid; gap: 14px; }
.hl-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 90px; align-items: end; }
.hl-bars div { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; text-align: center; }
.hl-bars i { align-self: end; display: block; background: var(--gold); border-radius: 6px 6px 2px 2px; min-height: 3px; }
.hl-bars small { font-size: 11px; color: var(--soft); }
.hl .s-stats div { background: var(--paper); }
.hl .s-stats b { font-size: 22px; }
.wo-adj { min-width: 52px; height: 40px; border-radius: 12px; border: 1.5px solid currentColor; background: transparent; color: inherit; font: 600 15px var(--body); cursor: pointer; }

/* Workout summary (19 Oct 2026) */
.sm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-tiles div { background: var(--tile); border-radius: 16px; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; }
.sm-tiles small { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--gold-ink); margin-bottom: 4px; }
.sm-tiles b { font-family: var(--disp); font-size: 34px; line-height: 1; }
.sm-tiles span { font-size: 14px; color: var(--soft); }
.sm-tiles .pr small { color: var(--good); }
.sm-ex { background: var(--tile); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.sm-ex > b { font-size: 16px; font-weight: 600; }
.sm-t { display: grid; grid-template-columns: 34px 1.3fr 0.8fr 0.8fr 1fr; row-gap: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.sm-t span { padding: 8px 0; border-top: 1px solid var(--line); }
.sm-t span:nth-child(-n+5) { border-top: 0; font-size: 12px; color: var(--soft); padding-top: 0; }
.sm-f { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
.sm-v { display: grid; justify-items: end; gap: 2px; }
.sm-v b { font-size: 15px; }
.sm-v small { font-size: 12px; color: var(--soft); }
.sm-v small.up { color: var(--good); font-weight: 600; }
.sm-pr { font-size: 12px; font-weight: 600; background: var(--gold-wash); color: var(--gold-ink); border-radius: 999px; padding: 5px 10px; }
.li.lb { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: inherit; cursor: pointer; }
.s-next b { font-family: var(--disp); font-size: 26px; font-weight: 400; letter-spacing: .3px; }
.s-nb { display: flex; align-items: center; gap: 14px; }

/* Check-in review on Home (19 Oct 2026) */
.note.rv { display: grid; gap: 10px; }
.rv-h { font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0; color: var(--ink); }
.rv-read b { font-size: 15px; }
.s-today .s-nb { justify-content: space-between; }
.s-today .s-nb .btn { width: auto; flex: 1; }

/* Finished exercise folds to one line (19 Oct 2026) */
.wo-fold { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left; border: 0; width: 100%; font: inherit; color: inherit; cursor: pointer; padding: 12px 16px; }
.wo-tickc { width: 28px; height: 28px; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.wo-fn b { display: block; font-size: 15px; font-weight: 600; }
.wo-fn small { display: block; font-size: 12px; color: var(--soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-chev { color: var(--soft); font-size: 18px; }

/* Track today's weight (19 Oct 2026) */
.wi { background: var(--gold-wash); }
.wi-row { display: flex; align-items: baseline; gap: 8px; }
.wi-row input { width: 130px; font: 400 42px var(--disp); border: 0; border-bottom: 2px solid var(--gold); background: transparent; color: var(--ink); padding: 0; letter-spacing: .5px; }
.wi-row input:focus { outline: none; }
.wi-row .btn { margin-left: auto; align-self: center; }
.wi-done b { font-size: 20px; }

/* Weight graph (19 Oct 2026) */
.wtip { font-size: 12px; color: var(--soft); margin: 4px 0 0; min-height: 18px; }
.wtip b { color: var(--ink); }
.wstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.wstats div { background: var(--tile); border-radius: 12px; padding: 10px; display: grid; gap: 2px; }
.wstats small { font-size: 11px; color: var(--soft); }
.wstats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.chart .seg button { padding-inline: 10px; }

/* Make payment now (19 Oct 2026) */
.paybox { background: var(--gold-wash); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; }
.paybox.bad { background: #fdecea; }
.paybox b { font-size: 16px; }

/* Skinfold results (19 Oct 2026) */
.sfres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.sfres div { background: var(--tile); border-radius: 14px; padding: 12px; display: grid; gap: 2px; }
.sfres span { font-size: 12px; color: var(--soft); }
.sfres b { font-family: var(--disp); font-size: 26px; font-weight: 400; line-height: 1.05; }
.sfres small { font-size: 11px; color: var(--soft); line-height: 1.3; }
.sfres small.up { color: var(--good); font-weight: 600; }

/* Booking: type chooser and month calendar (19 Oct 2026) */
.bopt { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; background: var(--tile); border: 0; border-radius: 16px; padding: 14px; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.bopt .ic { width: 44px; height: 44px; border-radius: 14px; background: var(--paper); display: grid; place-items: center; font-size: 20px; }
.bopt b { display: block; font-size: 16px; } .bopt small { display: block; font-size: 13px; color: var(--soft); }
.bopt .chev { color: var(--soft); font-size: 20px; }
.bcal { display: grid; gap: 10px; }
.bcalh { display: flex; align-items: center; justify-content: space-between; }
.bcalh b { font-family: var(--disp); font-weight: 400; font-size: 26px; letter-spacing: .5px; }
.bcalh button { width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--tile); font-size: 18px; cursor: pointer; color: var(--ink); }
.bcalh button:disabled { opacity: .3; cursor: default; }
.bgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bgrid .wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--faint); padding-bottom: 4px; }
.bcd { aspect-ratio: 1; border: 0; border-radius: 12px; background: none; font: 500 15px var(--body); color: var(--faint); display: grid; place-items: center; position: relative; padding: 0; }
.bcd.av { color: var(--ink); cursor: pointer; background: var(--tile); font-weight: 600; }
.bcd.av::after { content: ""; position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.bcd.today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.bcd.sel { background: var(--ink); color: var(--paper); }
.daysrow[hidden] { display: none !important; }

/* Check-ins in the app (19 Oct 2026) */
.ci-due { background: var(--gold-wash); }
.s-line .chev { color: var(--soft); font-size: 20px; }
.cq { background: var(--tile); border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.cq p { margin: 0; font-size: 15px; font-weight: 500; }
.cin { width: 100%; box-sizing: border-box; font: 16px/1.4 var(--body); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); color: var(--ink); }
.cnum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cnum .cin { width: 140px; }
.cnum .auto { font-size: 12px; color: var(--good); font-weight: 600; flex-basis: 100%; }
.cscale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.cscale button, .cchoice button { border: 1.5px solid var(--line); background: var(--paper); border-radius: 9px; padding: 9px 0; font: 600 13px var(--body); color: var(--ink); cursor: pointer; }
.cchoice { display: flex; flex-wrap: wrap; gap: 6px; } .cchoice button { padding: 9px 14px; }
.cscale button.on, .cchoice button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cq .yn { display: flex; gap: 8px; }
.cq .yn button { flex: 1; border: 1.5px solid var(--line); background: var(--paper); border-radius: 10px; padding: 10px; font: 600 14px var(--body); color: var(--ink); cursor: pointer; }
.cq .yn button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Physio check (19 Oct 2026) */
.phchk { display: flex; gap: 10px; align-items: flex-start; background: var(--tile); border-radius: 14px; padding: 14px; font-size: 15px; }
.phchk input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--good); }

/* Messages (19 Oct 2026) */
.msgs .cmsg small { display: block; font-size: 11px; opacity: .6; margin-top: 4px; }
.chatf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.chatf textarea { width: 100%; box-sizing: border-box; font: 16px/1.4 var(--body); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--paper); color: var(--ink); resize: none; }
.chatf .btn { width: auto; padding: 12px 18px; }

/* Chat button in the top bar (19 Oct 2026) */
.hello { gap: 10px; }
.hello .logo { margin-right: auto; }
.chatbtn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--tile); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.chatbtn svg { width: 22px; height: 22px; }
.chatbtn[aria-current="page"] { background: var(--ink); color: var(--paper); }
.chatbtn .dot { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: #d93a3a; color: #fff; font: 700 11px/18px var(--body); font-style: normal; text-align: center; padding: 0 4px; }

/* iMessage-style chat (David, 19 Oct 2026) */
.imhead { display: grid; justify-items: center; gap: 1px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.imhead b { font-size: 16px; } .imhead span { font-size: 12px; color: var(--soft); }
.imlist { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 8px; }
.imtime { align-self: center; font-size: 11.5px; color: var(--soft); margin: 12px 0 6px; font-weight: 500; }
.imb { max-width: 75%; padding: 8px 13px; border-radius: 18px; font-size: 16px; line-height: 1.32; white-space: pre-wrap; overflow-wrap: anywhere; }
.imb.own { align-self: flex-end; background: #0a84ff; color: #fff; }
.imb.them { align-self: flex-start; background: #e9e9eb; color: #111; }
.imb.own.tail { border-bottom-right-radius: 5px; margin-bottom: 6px; }
.imb.them.tail { border-bottom-left-radius: 5px; margin-bottom: 6px; }
.imb.pending { opacity: .6; }
.imstat { align-self: flex-end; font-size: 11px; color: var(--soft); margin: -3px 2px 4px; font-weight: 600; }
.imempty { text-align: center; color: var(--soft); font-size: 14px; margin: 30px 0; }
.imbar { position: sticky; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; align-items: flex-end; background: var(--paper); padding: 8px 0; }
.imbar textarea { flex: 1; min-width: 0; font: 16px/1.3 var(--body); border: 1px solid var(--line); border-radius: 20px; padding: 8px 14px; resize: none; background: var(--paper); color: var(--ink); max-height: 140px; }
.imsend { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #0a84ff; color: #fff; display: grid; place-items: center; margin-bottom: 3px; cursor: pointer; }
.imsend svg { width: 18px; height: 18px; }
@media (prefers-color-scheme: dark) { .imb.them { background: #26252a; color: #f2f2f2; } }

/* Check-ins page (20 Oct 2026) */
.ck-now { display: flex; align-items: center; gap: 12px; background: var(--tile); border-radius: 18px; padding: 14px 16px; }
.ck-now.due { background: var(--gold-wash); }
.ck-now span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ck-now small { font-size: 12.5px; color: var(--soft); }
.ck-now b { font-size: 16px; }
.ck-list { display: grid; border-top: 1px solid var(--line); }
.ck { border-bottom: 1px solid var(--line); }
.ck summary { list-style: none; display: grid; gap: 6px; padding: 11px 0; cursor: pointer; }
.ck summary::-webkit-details-marker { display: none; }
.ck-d { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14.5px; }
.ck-d span { color: var(--soft); font-size: 13.5px; display: flex; gap: 10px; align-items: baseline; }
.ck-r { font-style: normal; color: var(--gold-ink, #8a6d1f); font-weight: 600; }
.ck-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ck-chip { font-size: 12px; color: var(--soft); background: var(--tile); border-radius: 999px; padding: 3px 9px; }
.ck-chip b { color: var(--ink); }
.ck[open] summary { padding-bottom: 8px; }
.ck-h { margin: 0 0 8px; font-weight: 600; }
.ck-note { background: var(--gold-wash); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.ck-note small { font-size: 12px; color: var(--soft); }
.ck-note p { margin: 2px 0 0; font-size: 14px; }
.ck-a { margin: 0 0 12px; display: grid; font-size: 13.5px; }
.ck-a > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.ck-a > div.long { display: grid; gap: 2px; }
.ck-a dt { color: var(--soft); }
.ck-a dd { margin: 0; font-weight: 600; text-align: right; }
.ck-a > div.long dd { text-align: left; font-weight: 400; }

/* ── New design, demo account first (20 Oct 2026, David). Everything below applies only with html.v3. ── */
html.v3 { --ink: #000; --soft: #5f646b; --faint: #9a9fa6; --line: #e4e4df; --tile: #f2f2ee; --gold-wash: #f6efd9; --gold-ink: #775c14;   /* soft and gold-ink darkened to 4.5:1 on tiles (25 Oct 2026 polish) */
  --disp: "Big Shoulders Display", Impact, sans-serif; --body: "Figtree", "Helvetica Neue", Arial, sans-serif; }
html.v3 body::before { content: ""; position: fixed; top: calc(36px + env(safe-area-inset-top, 0px)); right: -70px; width: 270px; height: 175px; background: url(/me/mark-dark.svg?v=1) no-repeat center / contain; opacity: .06; pointer-events: none; z-index: 0; }
html.v3 .me { position: relative; z-index: 1; }
html.v3 .h { font-weight: 800; letter-spacing: 0; font-size: 46px; line-height: .92; }
html.v3 .h2 { font-weight: 800; letter-spacing: 0; font-size: 26px; }
html.v3 .lab { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
html.v3 .hd-date { color: var(--soft); font-weight: 500; margin-top: 4px; }
html.v3 .daily { margin: 6px 0 0; font-size: 14.5px; }
html.v3 .chatbtn { background: var(--paper); border: 1.5px solid var(--ink); }
html.v3 .chatbtn[aria-current="page"] { background: var(--ink); color: var(--paper); }
/* alerts: red for anything overdue */
html.v3 .alert { background: var(--tile); border: 0; border-radius: 16px; }
html.v3 .alert.bad { background: #b3261e; color: #fff; } html.v3 .alert.bad small, html.v3 .alert.bad .ago { color: #fff; }
/* the block as a loaded barbell */
html.v3 .bb { display: grid; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
html.v3 .bb-r { display: flex; justify-content: space-between; align-items: baseline; }
html.v3 .bb-w { font: 800 30px/1 var(--disp); } html.v3 .bb-w span { color: var(--soft); }
html.v3 .bb svg { width: 100%; max-width: 350px; height: auto; }
html.v3 .pl-bar { fill: var(--ink); } html.v3 .pl-on { fill: var(--gold); }
html.v3 .pl-now { fill: var(--paper); stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 5 3; } html.v3 .pl-off { fill: var(--paper); stroke: #d6d6d0; stroke-width: 1.5; }
html.v3 .bb-ph { display: grid; grid-template-columns: 70fr 105fr 70fr 35fr; margin-left: 10.3%; margin-right: 8%; font-size: 11.5px; color: var(--soft); font-weight: 600; line-height: 1.2; }
html.v3 .bb-ph span { border-top: 2px solid var(--line); padding-top: 5px; margin-right: 6px; } html.v3 .bb-ph span.on { border-color: var(--gold); color: var(--ink); }
html.v3 .bb-ph b { display: block; font-size: 13px; }
html.v3 .bb-aim { display: flex; gap: 10px; align-items: baseline; font-size: 14px; flex-wrap: wrap; } html.v3 .bb-aim span { color: var(--soft); }
html.v3 .bb-aim i { margin-left: auto; font-style: normal; font-weight: 700; color: var(--gold-ink); }
/* Up next: one black card */
html.v3 .un { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: 22px; padding: 18px 20px; display: grid; gap: 12px; }
html.v3 .un::before { content: ""; position: absolute; right: -40px; top: -20px; width: 250px; height: 162px; background: url(/me/mark-white.svg) no-repeat center / contain; opacity: .11; pointer-events: none; }
html.v3 .un > * { position: relative; }
html.v3 .un-t { font: 800 34px/1 var(--disp); }
html.v3 .un p { margin: 0; color: #c9cbce; }
html.v3 .un-g { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; font-size: 13.5px; color: #c9cbce; }
html.v3 .un-g b { color: #fff; font-weight: 600; white-space: nowrap; } html.v3 .un-g .up { color: var(--gold); font-style: normal; }
html.v3 .un-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; } html.v3 .un-f .linkb { color: #c9cbce; }
/* your week and wins: open, not boxed */
html.v3 .s-stats { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html.v3 .s-stats div { background: none; border-radius: 0; padding: 12px 0 12px 12px; border-left: 1px solid var(--line); } html.v3 .s-stats div:first-child { border-left: 0; padding-left: 0; }
html.v3 .s-stats b { font-weight: 800; }
html.v3 .win { background: none; border: 2px solid var(--gold-wash); }
/* training: sliding sessions, done ones gold */
html.v3 .s-pick button { background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px; }
html.v3 .s-pick button.done { background: var(--gold-wash); border-color: var(--gold-wash); } html.v3 .s-pick button.done small { color: var(--gold-ink); }
html.v3 .s-pick button.sel { border: 2px solid var(--ink); }
html.v3 .s-card { background: var(--paper); border: 1.5px solid var(--line); }
/* workout: dark for the gym floor */
html.v3 #wo:not(.day) { background: #000; color: #fff; --paper: #000; --ink: #fff; --tile: #0d0e10; --line: #26282c; --soft: #a9adb2; --faint: #5c6066; --good: var(--gold); --good-wash: #0d0e10; }
html.v3 #wo .in { position: relative; }
html.v3 #wo:not(.day) .wo-ex { border: 1px solid #23252a; }
html.v3 #wo:not(.day) .wo-r input { background: #16181b; border-color: #16181b; color: #fff; font-family: var(--disp); font-weight: 800; font-size: 20px; }
html.v3 #wo:not(.day) .wo-r input::placeholder { color: #fff; opacity: .32; }
html.v3 #wo:not(.day) .wo-c.on { background: var(--gold); border-color: var(--gold); color: #000; }
html.v3 #wo:not(.day) .wo-tickc { background: var(--gold); color: #000; }
/* Night mode readability (25 Oct 2026 audit): the cream panels keep dark-mode colours of their own. */
html.v3 #wo:not(.day) .wo-push { background: #1a170f; color: #fff; border: 1px solid #3a3220; }
html.v3 #wo:not(.day) .wo-push .linkb, html.v3 #wo:not(.day) .wo-push button:not(.btn) { color: var(--gold); }
html.v3 #wo:not(.day) .diff button.on { background: #1f1a0e; border-color: var(--gold); color: #fff; }
html.v3 #wo:not(.day) .diff button.on small { color: #d9d4ca; }
html.v3 #wo:not(.day) .linkb, html.v3 #wo:not(.day) .vbtn { color: var(--gold); }
html.v3 #wo:not(.day) .bar i { background: var(--gold); }
html.v3 #wo:not(.day) .wo-unit { background: #16181b; border-color: #26282c; } html.v3 #wo:not(.day) .wo-unit button[aria-pressed="true"] { background: #fff; color: #000; }
html.v3 #wo:not(.day) .wo-alt { border-color: #26282c; } html.v3 #wo:not(.day) .wo-swh { color: var(--gold); } html.v3 #wo:not(.day) .wo-swap { background: #0d0e10; }
html.v3 #wo:not(.day) .btn.gold { color: #000; }
html.v3 #wo:not(.day) .wo-rest { background: #16181b; color: #fff; }
html.v3 .wo-plates { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--soft); border-top: 1px solid var(--line); padding-top: 10px; }
html.v3 .wo-plates svg { width: 96px; height: 36px; flex: none; } html.v3 .wo-plates b { color: var(--ink); }
html.v3 .wo-plates > span { flex: 1; min-width: 0; } html.v3 .wo-plates small { color: var(--soft); }
html.v3 .wo-bar { flex: none; border: 1px solid var(--line); background: none; color: var(--gold); border-radius: 999px; padding: 6px 10px; font: 600 12px var(--body); }
html.v3 #wo.day .wo-bar { color: var(--gold-ink); }   /* readable on white (25 Oct 2026 audit) */
html.v3 .wo-plates .pb { fill: #5c6066; } html.v3 .wo-plates .pg { fill: var(--gold); } html.v3 .wo-plates .pw { fill: #e6e7e9; }
/* shopping list: compact */
html.v3 .item { padding: 7px 0; gap: 8px; grid-template-columns: 20px minmax(0, 1fr) auto; }
html.v3 .item i { width: 18px; height: 18px; border-radius: 6px; }
html.v3 .item.on i { background: var(--gold); border-color: var(--gold); }
html.v3 .item span { font-size: 14.5px; }
html.v3 .aisle h3 { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--soft); margin-top: 8px; }
/* nutrition: open meals */
html.v3 .meal { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 14px 0 6px; }
html.v3 .meal .mh b { font: 800 24px/1 var(--disp); }
/* more */
html.v3 .mtile { background: var(--paper); border: 1.5px solid var(--line); border-radius: 20px; }
html.v3 .mtile svg { color: var(--ink); }
/* tabs */
html.v3 .tabs button[aria-current="page"] svg { stroke: var(--ink); }
html.v3 .mbar { display: grid; gap: 8px; }
html.v3 .mbar-k { display: flex; justify-content: space-between; align-items: baseline; } html.v3 .mbar-k b { font: 800 40px/1 var(--disp); } html.v3 .mbar-k small { color: var(--soft); font-size: 13px; }
html.v3 .mbar-s { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
html.v3 .mbar-l { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; } html.v3 .mbar-l span { display: inline-flex; align-items: center; gap: 6px; } html.v3 .mbar-l i { width: 8px; height: 8px; border-radius: 2px; }
html.v3 .mbar .p { background: var(--ink); } html.v3 .mbar .c { background: var(--gold); } html.v3 .mbar .f { background: #cfd1d4; }
/* round 2 (20 Oct 2026): the rest of the approved mockups */
html.v3 .wi3 { border: 1.5px solid var(--ink); border-radius: 16px; padding: 10px 12px; display: grid; gap: 6px; }
html.v3 .wi3-r { display: flex; align-items: center; gap: 10px; }
html.v3 .wi3-l { flex: 1; min-width: 0; display: grid; } html.v3 .wi3-l b { font-size: 15px; } html.v3 .wi3-l small { font-size: 12.5px; color: var(--soft); }
html.v3 .wi3-in { display: flex; align-items: center; gap: 4px; background: var(--tile); border-radius: 10px; padding: 0 10px; height: 42px; }
html.v3 .wi3-in input { width: 58px; border: 0; background: none; font: 800 22px var(--disp); text-align: right; color: var(--ink); } html.v3 .wi3-in input:focus { outline: none; } html.v3 .wi3-in small { color: var(--soft); }
html.v3 .btn.ink { background: var(--ink); color: var(--paper); }
html.v3 .wins3 { display: grid; gap: 10px; }
html.v3 .win3 { display: flex; gap: 12px; align-items: center; } html.v3 .win3 > span:last-child { display: grid; }
html.v3 .win3 b { font-size: 15px; } html.v3 .win3 small { font-size: 13px; color: var(--soft); }
html.v3 .medal { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 2px solid var(--gold); display: grid; place-items: center; color: var(--gold-ink); font: 800 16px var(--disp); }
html.v3 .note.rv { border: 0; border-left: 3px solid var(--gold); border-radius: 0; padding: 2px 0 2px 14px; }
html.v3 .s-line { border-radius: 16px; }
/* progress */
html.v3 .goal { border: 1.5px solid var(--ink); border-radius: 20px; padding: 16px; }
html.v3 .wstats { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html.v3 .wstats div { background: none; border-radius: 0; padding: 10px 0 10px 10px; border-left: 1px solid var(--line); } html.v3 .wstats div:first-child { border-left: 0; padding-left: 0; }
html.v3 .wstats b { font: 800 20px var(--disp); }
html.v3 .tile { background: var(--paper); border: 1.5px solid var(--line); }
/* nutrition */
html.v3 .mnote { background: var(--gold-wash); color: var(--ink); }
html.v3 .optrow { background: var(--tile); border-radius: 14px; padding: 4px; gap: 4px; }
html.v3 .optrow .chipb { flex: 1; border: 0; background: none; border-radius: 11px; padding: 10px; font-weight: 700; color: var(--soft); }
html.v3 .optrow .chipb[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* shopping list controls: one compact panel */
html.v3 #shop .block:first-of-type { background: var(--tile); border-radius: 18px; padding: 12px 14px; gap: 8px; }
html.v3 #shop .presets .chipb, html.v3 #shop .shopts .chipb { padding: 5px 10px; font-size: 12.5px; }
html.v3 .item small.pick { font-size: 12px; margin-top: 1px; }
/* account */
html.v3 .paybox.bad { background: #b3261e; color: #fff; } html.v3 .paybox.bad .sub { color: #fff; }
html.v3 .paybox.bad .btn.gold { background: #fff; color: #b3261e; } html.v3 .paybox.bad .btn.alt { background: none; border: 1.5px solid #fff; color: #fff; }
/* supplements */
html.v3 .sgrid > * { background: var(--paper); border: 1.5px solid var(--line); border-radius: 18px; }
html.v3 .sdose { font: 800 22px var(--disp); }
/* more: messages stands out */
html.v3 .mtile[data-tab="messages"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } html.v3 .mtile[data-tab="messages"] svg { color: var(--paper); } html.v3 .mtile[data-tab="messages"] small { color: #c9cbce; }
/* 5-4-3 week (20 Oct 2026) */
.fx { display: grid; gap: 10px; margin-top: 4px; }
.fx-h { display: grid; } .fx-h b { font-size: 15px; } .fx-h small { font-size: 13px; color: var(--soft); }
.fx-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--tile); border-radius: 14px; padding: 4px; gap: 4px; }
.fx-seg button { border: 0; background: none; border-radius: 11px; padding: 10px; font: 700 14px var(--body); color: var(--soft); }
.fx-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.fx-prev { display: grid; gap: 8px; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.fx-s { display: grid; gap: 1px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.fx-s b { font-size: 15px; } .fx-s small { font-size: 12px; color: var(--gold-ink); font-weight: 600; } .fx-s span { font-size: 13px; color: var(--soft); }
.fx-v { margin: 0; font-size: 13.5px; } .fx-v b { font-weight: 700; }
.peruse { display: grid; gap: 1px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.peruse small { font-size: 12px; color: var(--soft); } .peruse b { font-size: 15px; color: var(--ink); }
.plist .prow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plist .prow > span:first-child { display: grid; min-width: 0; } .plist .prow b { font-size: 15px; } .plist small { font-size: 12.5px; color: var(--soft); }
.plist .pamt { display: grid; text-align: right; flex: none; } .plist .pamt b { font: 800 22px/1.05 var(--disp); }
.plist + .plist { margin-top: 10px; }
.pstack .phead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: var(--gold-wash); margin: -14px -14px 0; padding: 10px 14px; border-radius: 16px 16px 0 0; }
.pstack .phead b { font-size: 13.5px; } .pstack .phead small { font-size: 12.5px; color: var(--gold-ink); font-weight: 600; }
.plist .pamt.hold b { font: 600 13px var(--body); color: var(--soft); }
.plist .prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.palts { grid-column: 1 / -1; display: grid; gap: 4px; margin-top: 2px; }
.palts span { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 6px 10px; border-radius: 10px; background: var(--tile); }
.palts span.rec { background: var(--gold-wash); } .palts b { font-weight: 700; font-size: 12.5px; white-space: nowrap; } .palts small { color: var(--soft); font-size: 12.5px; text-align: right; }

/* warm-up and cool-down in the workout (21 Oct 2026) */
.wo-part { display: grid; gap: 8px; }
.wo-pn { color: var(--soft); font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.wo-pi { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.wo-pi:first-of-type { border-top: 0; }
.wo-pi .wo-fn { flex: 1; min-width: 0; }
.wo-pi .wo-fn small { display: block; color: var(--soft); font-size: 12.5px; white-space: normal; }
.wo-pi .wo-note { font-style: italic; }
.wo-pi.on .wo-fn b { color: var(--soft); }
.wo-pi .wo-c { width: 38px; height: 34px; flex: none; }
.s-part { margin: 6px 0 4px; font-size: 13px; }

/* Cardio page (21 Oct 2026) */
.cx-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cx-stat { border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--paper); display: grid; gap: 2px; }
.cx-stat small { color: var(--soft); font-size: 12.5px; }
.cx-stat b { font: 400 34px/1 var(--disp); letter-spacing: .5px; }
.cx-stat b i { font: 600 13px var(--body, inherit); font-style: normal; color: var(--soft); margin-left: 4px; }
.cx-form { display: grid; gap: 10px; }
.cx-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-k { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13.5px; cursor: pointer; }
.cx-k[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cx-in { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px; background: var(--paper); color: var(--ink); }
.cx-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cx-row label { display: grid; gap: 4px; }
.cx-row small { color: var(--soft); font-size: 12px; }
.cx-days { display: inline-flex; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; justify-self: start; }
.cx-days button { border: 0; background: transparent; color: var(--ink); padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.cx-days button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.cx-plan { display: grid; gap: 8px; }
.cx-pi { border-left: 3px solid var(--gold); padding: 4px 0 4px 12px; }
.cx-pi b { display: block; font-size: 14.5px; }
.cx-pi p { margin: 2px 0 0; color: var(--soft); font-size: 14px; line-height: 1.45; }
.cx-list { display: grid; }
.cx-l { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.cx-d { width: 52px; flex: none; color: var(--soft); font-size: 13px; }
.cx-w { flex: 1; min-width: 0; }
.cx-w b { display: block; font-size: 15px; }
.cx-w small { color: var(--soft); font-size: 12.5px; }

/* Food log on Nutrition (21 Oct 2026) */
.fl { display: grid; gap: 10px; }
.fl-days { display: inline-flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.fl-days button { border: 0; background: transparent; color: var(--ink); padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.fl-days button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.fl-k { display: flex; align-items: baseline; gap: 8px; }
.fl-k b { font: 400 40px/1 var(--disp); letter-spacing: .5px; }
.fl-k span { color: var(--soft); font-size: 14px; }
.fl-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fl-m > span { display: grid; gap: 2px; min-width: 0; }
.fl-m small { color: var(--soft); font-size: 12px; }
.fl-m b { font-size: 15px; font-weight: 600; }
.fl-m b i { font-style: normal; font-weight: 400; color: var(--soft); font-size: 12.5px; }
.fl-mb { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; display: block; }
.fl-mb i { display: block; height: 100%; background: var(--ink); }
.fl-mb i.c { background: var(--gold); }
.fl-mb i.f { background: var(--soft); }
.fl-list { display: grid; border-top: 1px solid var(--line); }
.fl-l { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fl-l > span:first-child { flex: 1; min-width: 0; }
.fl-l b { display: block; font-size: 14.5px; font-weight: 600; }
.fl-l small { color: var(--soft); font-size: 12.5px; }
.fl-kc { font-size: 13.5px; white-space: nowrap; }
.fl-ate { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--good-wash); border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--good); }
.fl-atebtn { justify-self: start; }
.fl-search { display: flex; gap: 8px; align-items: center; }
.fl-search .cx-in { flex: 1; }
.fl-results { display: grid; gap: 10px; }
.fl-rs { display: grid; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.fl-r { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; border-top: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 10px 14px; font: inherit; cursor: pointer; }
.fl-r:first-child { border-top: 0; }
.fl-r > span:first-child { flex: 1; min-width: 0; }
.fl-r b { display: block; font-size: 14.5px; font-weight: 600; }
.fl-r small { color: var(--soft); font-size: 12.5px; }
.fl-amt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fl-amt .cx-in { width: 110px; font-size: 20px; }
.fl-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; background: var(--tile); border-radius: 14px; padding: 12px; }
.fl-sum span { display: grid; text-align: center; }
.fl-sum b { font: 400 26px/1.1 var(--disp); }
.fl-sum small { color: var(--soft); font-size: 11.5px; }
.fl-cam { position: relative; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; max-width: 100%; }
.fl-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-aim { position: absolute; left: 12%; right: 12%; top: 32%; bottom: 32%; border: 2.5px solid var(--gold); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.fl-code { display: flex; gap: 8px; }
.fl-code input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--paper); color: var(--ink); }
.cx-row.fq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mh-r { display: inline-flex; align-items: center; gap: 10px; }
.fl-tick { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); color: var(--faint); font-size: 15px; font-weight: 700; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.fl-tick.on { background: var(--good); border-color: var(--good); color: #fff; }
.meal.eaten .food span, .meal.eaten .mh b { color: var(--soft); }
.fls { display: grid; gap: 10px; }
.fl-xb { display: flex; gap: 18px; }
.fl-x .fl-l:first-of-type { border-top: 1px solid var(--line); }
.fl-fab { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 11; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--gold); color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(17, 17, 17, .22); cursor: pointer; }
.fl-fab svg { width: 24px; height: 24px; }
.fl-x { margin-bottom: 64px; }
/* Nutrition: Your plan | Food log switch (21 Oct 2026) */
.nseg { display: grid; grid-template-columns: 1fr 1fr; background: var(--tile); border-radius: 12px; padding: 3px; }
.nseg button { border: 0; background: transparent; color: var(--soft); font: inherit; font-size: 14.5px; font-weight: 600; padding: 9px 0; border-radius: 10px; cursor: pointer; }
.nseg button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(17, 17, 17, .12); }
.fls .mbar-k { display: flex; justify-content: space-between; align-items: baseline; }
.fls .mbar-k b { font: 800 40px/1 var(--disp); } .fls .mbar-k small { color: var(--soft); font-size: 13px; }
.fl-l.on b { color: var(--soft); }
/* Micronutrients on the Food log (21 Oct 2026) */
.mi { border-top: 1px solid var(--line); padding-top: 8px; }
.mi summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; }
.mi summary::-webkit-details-marker { display: none; }
.mi summary small { flex: 1; min-width: 0; text-align: right; color: var(--soft); font-weight: 400; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi summary::after { content: "›"; color: var(--soft); transform: rotate(90deg); }
.mi[open] summary::after { transform: rotate(-90deg); }
.mi-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 10px; }
.mi-r { display: grid; gap: 2px; min-width: 0; }
.mi-r small { color: var(--soft); font-size: 12px; }
.mi-r b { font-size: 14px; font-weight: 600; } .mi-r b i { font-style: normal; font-weight: 400; color: var(--soft); font-size: 12px; }
.fl-mb i.mi { background: var(--good); }
/* David's short health and injury notes (21 Oct 2026) */
.hnote { border-left: 3px solid var(--gold); background: var(--gold-wash); border-radius: 0 12px 12px 0; padding: 10px 14px; display: grid; gap: 2px; }
.hnote .hn-k { font-size: 12px; font-weight: 700; color: var(--gold-ink); }
.hnote p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
/* Health page (21 Oct 2026) */
.ht-form { display: grid; gap: 10px; }
.ht-form textarea { resize: vertical; }
.ht-date { display: grid; gap: 4px; } .ht-date small { color: var(--soft); font-size: 12px; }
.ht-list { display: grid; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.ht-r { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; border-top: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 11px 14px; font: inherit; cursor: pointer; }
.ht-r:first-child { border-top: 0; }
.ht-r > span:first-child { flex: 1; min-width: 0; }
.ht-r b { display: block; font-size: 15px; font-weight: 600; }
.ht-r small { display: block; color: var(--soft); font-size: 13px; line-height: 1.4; }
.ht-r.res b { color: var(--soft); }
.ht-sy { display: flex; gap: 22px; }
.ht-sy span { display: grid; } .ht-sy b { font: 400 30px/1 var(--disp); } .ht-sy small { color: var(--soft); font-size: 12px; }
a.s-line { text-decoration: none; color: inherit; }
/* Bodybuilding prep page (21 Oct 2026) */
.pp-arc { display: grid; gap: 12px; }
.pp-bar { display: flex; gap: 4px; height: 10px; }
.pp-bar i { position: relative; background: var(--line); border-radius: 5px; }
.pp-bar i.done { background: var(--gold); }
.pp-bar i.on { background: var(--gold-wash); box-shadow: inset 0 0 0 1.5px var(--gold); }
.pp-bar em { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.pp-blocks { display: grid; gap: 8px; }
.pp-blocks > div { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; }
.pp-blocks > div.on { border-color: var(--gold); }
.pp-blocks b { font-size: 15px; margin-right: 6px; } .pp-blocks small { color: var(--soft); font-size: 12.5px; }
.pp-blocks p { margin: 2px 0; font-size: 14px; line-height: 1.4; }
.pp-f { border-top: 1px solid var(--line); padding: 12px 0; }
.pp-f summary { cursor: pointer; list-style: none; font: 800 22px/1.1 var(--disp); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pp-f summary::-webkit-details-marker { display: none; }
.pp-f summary::after { content: "›"; font: 400 20px var(--body); color: var(--soft); transform: rotate(90deg); }
.pp-f[open] summary::after { transform: rotate(-90deg); }
.pp-f summary small { font: 500 12.5px var(--body); color: var(--soft); flex: 1; text-align: right; }
.pp-b { margin-top: 10px; }
.pp-kv { display: grid; gap: 10px; }
.pp-kv div { display: grid; gap: 2px; } .pp-kv b { font-size: 14.5px; } .pp-kv span { color: var(--soft); font-size: 14px; line-height: 1.45; }
.pp-t { display: grid; }
.pp-t > div { display: flex; gap: 12px; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); }
.pp-t > div:first-child { border-top: 0; }
.pp-t span:first-child { min-width: 0; } .pp-t b { display: block; font-size: 14.5px; } .pp-t small { display: block; color: var(--soft); font-size: 12.5px; line-height: 1.4; }
.pp-n { text-align: right; flex: none; max-width: 48%; } .pp-n b { font: 400 22px/1 var(--disp); }
.pp-vt { overflow-x: auto; }
.pp-vt table { border-collapse: collapse; font-size: 13px; width: 100%; }
.pp-vt th, .pp-vt td { padding: 6px 6px; text-align: center; border-top: 1px solid var(--line); white-space: nowrap; }
.pp-vt th small { display: block; color: var(--soft); font-weight: 400; font-size: 11px; }
.pp-vt td:first-child, .pp-vt th:first-child { text-align: left; white-space: normal; min-width: 96px; }
.pp-vt tr.rir td { color: var(--soft); }
/* Share card (21 Oct 2026) */
.shr { z-index: 40; }
.shr-img { width: 100%; max-width: 100%; border-radius: 16px; display: block; }
.shr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.shr-btn svg { width: 18px; height: 18px; }
/* App shell (21 Oct 2026): the page stays still and only #scroller scrolls, so iPhones can't shift the fixed menu bar
   when their toolbar collapses or the keyboard closes. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
#scroller { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
/* Warm-up and cool-down section on Training (21 Oct 2026) */
.wu-card { display: grid; gap: 4px; }
.wu-b { border-top: 1px solid var(--line); padding: 8px 0; }
.wu-b:first-of-type { border-top: 0; }
.wu-b summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.wu-b summary::-webkit-details-marker { display: none; }
.wu-b summary small { display: block; color: var(--soft); font-size: 12px; } .wu-b summary b { font-size: 15px; }
.wu-l { display: grid; margin-top: 6px; }
.wu-i { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.wu-i > span { flex: 1; min-width: 0; } .wu-i b { display: block; font-size: 14.5px; font-weight: 600; } .wu-i small { display: block; color: var(--soft); font-size: 12.5px; }
.wo-sec { margin-top: 6px; }
/* Snap a meal (21 Oct 2026) */
.fl-3 { grid-template-columns: 1fr 1fr 1fr; display: grid; gap: 8px; }
.ph-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 16px; display: block; }
.ph-list { display: grid; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.ph-r { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ph-r:first-child { border-top: 0; }
.ph-r > span:first-child { flex: 1; min-width: 0; } .ph-r b { display: block; font-size: 14.5px; } .ph-r small { color: var(--soft); font-size: 12.5px; }
.ph-r.low small { color: var(--gold-ink); }
.ph-g { display: inline-flex; align-items: center; gap: 4px; } .ph-g input { width: 64px; border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 8px; font: inherit; font-size: 15px; text-align: right; background: var(--paper); color: var(--ink); }
.ph-g span { color: var(--soft); font-size: 13px; }
.ph-hint { display: flex; gap: 8px; } .ph-hint .cx-in { flex: 1; min-width: 0; }
/* Voice notes (21 Oct 2026) */
.imbar .immic { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--tile); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.immic svg { width: 20px; height: 20px; }
.imb.voice { padding: 8px 12px; }
.vn { display: inline-flex; align-items: center; gap: 10px; min-width: 190px; }
.vn-p { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.25); color: inherit; flex: none; }
.imb.them .vn-p { background: var(--ink); color: var(--paper); }
.vn-p svg { width: 16px; height: 16px; }
.vn-bar { flex: 1; height: 4px; border-radius: 2px; background: currentColor; opacity: .35; position: relative; overflow: hidden; }
.vn-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: currentColor; opacity: 1; }
.vn small { font-size: 12px; font-variant-numeric: tabular-nums; }
.vn-box { position: absolute; inset: 4px 0; z-index: 2; } .vn-box .vn-rec { height: 100%; box-sizing: border-box; }
#msgf { position: sticky; }
.vn-rec { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 12px; background: var(--paper); font-size: 14px; }
.vn-rec span { flex: 1; color: var(--soft); }
.vn-rec .vn-t { font-variant-numeric: tabular-nums; }
.vn-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; animation: vnblink 1s infinite; }
@keyframes vnblink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .vn-dot { animation: none; } }
.vn-x, .vn-send { border: 0; border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.vn-x { background: var(--tile); color: var(--ink); } .vn-send { background: var(--gold); color: #111; }
/* Daily score and streak (21 Oct 2026) */
.sc { display: grid; gap: 12px; }
.sc-top { display: flex; align-items: center; gap: 14px; }
.sc-ring { width: 64px; height: 64px; flex: none; }
.sc-bg { fill: none; stroke: var(--line); stroke-width: 7; } .sc-fg { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; }
.sc-ring text { font: 800 22px var(--disp); fill: var(--ink); }
.sc-t { flex: 1; min-width: 0; display: grid; } .sc-t small { color: var(--soft); font-size: 12.5px; } .sc-t b { font-size: 15px; line-height: 1.3; }
.sc-wk { display: flex; gap: 4px; align-items: flex-end; height: 44px; }
.sc-wk i { position: relative; width: 9px; height: 100%; border-radius: 3px; background: var(--line); overflow: hidden; display: block; }
.sc-wk i::before { content: ""; position: absolute; inset: auto 0 0; height: var(--h); background: var(--line); }
.sc-wk i.part::before { background: var(--gold-wash); box-shadow: inset 0 0 0 1px var(--gold); } .sc-wk i.hit::before { background: var(--gold); }
.sc-wk i.now { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.sc-wk em { display: none; }
.sc-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-p { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 5px 11px 5px 6px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sc-p span { min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; font-size: 11px; background: var(--tile); color: var(--soft); padding: 0 4px; }
.sc-p.on { background: var(--gold-wash); border-color: var(--gold); cursor: default; } .sc-p.on span { background: var(--gold); color: #111; }
/* Meal plan chooser (22 Oct 2026): two long plan names share the width and wrap instead of running off the screen. */
.optrow.planpick .chipb { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.25; }
/* Body weight history under the chart (22 Oct 2026) */
.chart svg[data-wpts] { -webkit-user-select: none; user-select: none; }
.whist { border-top: 1px solid var(--line); padding-top: 10px; }
.whist summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; }
.whist summary::-webkit-details-marker { display: none; }
.whist summary::after { content: "Show"; margin-left: auto; font-weight: 500; font-size: 13px; color: var(--soft); }
.whist[open] summary::after { content: "Hide"; }
.whist summary small { color: var(--soft); font-weight: 400; }
.wh-list { max-height: 320px; overflow-y: auto; margin-top: 8px; }
.wh-r { display: grid; grid-template-columns: 1fr auto 64px; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.wh-r small { text-align: right; color: var(--soft); font-variant-numeric: tabular-nums; }
.wh-r b { font-variant-numeric: tabular-nums; }
/* Discard a workout (22 Oct 2026) */
.wo-disc { justify-self: center; color: var(--soft); font-size: 14px; margin-top: 4px; }
/* Chat in the brand (22 Oct 2026, David: messaging "redesigned more professionally"): David's photo and name at the
   top, the client's messages in black, David's in the warm grey, no iMessage blue. */
.imhead { position: sticky; top: 0; z-index: 2; background: var(--paper); display: flex; align-items: center; justify-items: start; gap: 12px; padding: 8px 0 10px; }
.imav { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--gold); }
.imwho { display: grid; gap: 0; } .imwho b { font-size: 16.5px; } .imwho span { font-size: 12.5px; color: var(--soft); }
.imb.own { background: var(--ink); color: var(--paper); }
.imb.them { background: var(--tile); color: var(--ink); }
@media (prefers-color-scheme: dark) { .imb.them { background: var(--tile); color: var(--ink); } }
.imb.own .vn-p { background: var(--gold); color: var(--ink); } .imb.own .vn-bar { background: rgba(255,255,255,.25); } .imb.own .vn-bar i { background: var(--gold); } .imb.own .vn small { color: var(--paper); }
.imsend { background: var(--gold); color: var(--ink); }
.imhead .imwho b { color: var(--ink); opacity: 1; font-weight: 700; }
/* Prep page, redesigned (22 Oct 2026): a hero card with the week and today's targets, the blocks as steps, the plan in
   brief, then quiet folding sections. */
.pq-hero { background: var(--ink); color: var(--paper); border-radius: 22px; padding: 20px; display: grid; gap: 16px; }
.pq-where { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pq-where > div:first-child { display: grid; gap: 2px; min-width: 0; }
.pq-where small, .pq-th small { color: rgba(255,255,255,.62); font-size: 12.5px; font-weight: 600; }
.pq-big { font: 400 48px/0.95 var(--disp); color: var(--gold); letter-spacing: .01em; }
.pq-where span { color: rgba(255,255,255,.8); font-size: 14px; }
.pq-show { text-align: center; border: 1.5px solid rgba(201,168,76,.5); border-radius: 14px; padding: 8px 12px; flex: none; }
.pq-show b { display: block; font: 400 30px/1 var(--disp); color: var(--gold); } .pq-show small { font-size: 11px; color: rgba(255,255,255,.7); line-height: 1.2; display: block; }
.pq-track { display: flex; gap: 4px; height: 8px; }
.pq-track i { position: relative; background: rgba(255,255,255,.14); border-radius: 4px; }
.pq-track i.done { background: var(--gold); } .pq-track i.on { background: rgba(201,168,76,.35); }
.pq-track em { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--paper); }
.pq-today { background: rgba(255,255,255,.07); border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.pq-th { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pq-th b { font-size: 15px; font-weight: 600; } .pq-kcal { font: 400 30px/1 var(--disp); color: var(--paper); margin-right: 2px; }
.pq-mac { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pq-mac span { background: rgba(255,255,255,.08); border-radius: 12px; padding: 8px 10px; display: grid; }
.pq-mac b { font: 400 24px/1 var(--disp); color: var(--gold); } .pq-mac small { color: rgba(255,255,255,.65); font-size: 11.5px; }
.pq-why { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.72); } .pq-why b { color: var(--paper); font-weight: 600; }
.pq-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pq-steps li { display: flex; gap: 14px; padding: 12px 0; position: relative; }
.pq-steps li + li { border-top: 1px solid var(--line); }
.pq-num { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--tile); color: var(--soft); }
.pq-steps li.on .pq-num { background: var(--gold); color: var(--ink); } .pq-steps li.done .pq-num { background: var(--ink); color: var(--gold); }
.pq-steps li > div { min-width: 0; display: grid; gap: 3px; }
.pq-st { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .pq-st b { font-size: 16px; } .pq-st small { color: var(--soft); font-size: 12.5px; }
.pq-steps p { margin: 0; font-size: 14.5px; line-height: 1.45; } .pq-steps li > div > small { color: var(--soft); font-size: 12.5px; }
.pq-steps li.on .pq-st b::after { content: "Now"; margin-left: 8px; font-size: 11px; font-weight: 700; background: var(--gold-wash); color: var(--gold-ink); padding: 2px 7px; border-radius: 99px; vertical-align: 2px; }
.pq-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pq-facts div { background: var(--tile); border-radius: 14px; padding: 12px; display: grid; gap: 3px; min-width: 0; }
.pq-facts small { color: var(--soft); font-size: 12px; font-weight: 600; } .pq-facts b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.pq-list { display: grid; }
.pq-f { border-top: 1px solid var(--line); }
.pq-f:last-child { border-bottom: 1px solid var(--line); }
.pq-f summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 15px 0; font-weight: 600; font-size: 16px; }
.pq-f summary::-webkit-details-marker { display: none; }
.pq-f summary span { flex: 1; min-width: 0; }
.pq-f summary small { color: var(--soft); font-weight: 500; font-size: 12.5px; text-align: right; }
.pq-f summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--soft); border-bottom: 2px solid var(--soft); transform: rotate(45deg); margin: -4px 4px 0 2px; transition: transform .15s; flex: none; }
.pq-f[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.pq-b { padding: 0 0 16px; }
.pq-kv { display: grid; gap: 12px; } .pq-kv div { display: grid; gap: 2px; } .pq-kv b { font-size: 14.5px; } .pq-kv span { color: var(--soft); font-size: 14px; line-height: 1.5; }
.pq-t { display: grid; }
.pq-t > div { display: flex; gap: 12px; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.pq-t > div:first-child { border-top: 0; }
.pq-t > div.on { background: var(--gold-wash); margin: 0 -10px; padding: 10px; border-radius: 12px; border-top-color: transparent; }
.pq-t span:first-child { min-width: 0; } .pq-t b { display: block; font-size: 14.5px; } .pq-t small { display: block; color: var(--soft); font-size: 12.5px; line-height: 1.4; }
.pq-n { text-align: right; flex: none; max-width: 48%; } .pq-n b { font: 400 22px/1 var(--disp); }
@media (prefers-reduced-motion: reduce) { .pq-f summary::after { transition: none; } }
/* entry on Training */
.pq-entry { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--ink); color: var(--paper); border: 0; border-radius: 18px; padding: 16px 18px; }
.pq-entry > span:first-child { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pq-entry small { color: var(--gold); font-size: 12px; font-weight: 700; } .pq-entry b { font-size: 17px; } .pq-entry em { font-style: normal; color: rgba(255,255,255,.7); font-size: 13px; }
.pq-entry i { font-style: normal; font-size: 22px; color: var(--gold); }
.pq-facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Habits on Home (22 Oct 2026) */
.hb-l { display: grid; gap: 8px; }
.hb-i { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 12px; color: var(--ink); }
.hb-c { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; font-weight: 800; flex: none; }
.hb-i.on { border-color: var(--gold); background: var(--gold-wash); } .hb-i.on .hb-c { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.hb-t { display: grid; } .hb-t b { font-size: 15px; font-weight: 600; } .hb-t small { color: var(--soft); font-size: 12.5px; }
.hb-w { display: flex; align-items: center; gap: 5px; } .hb-w i { width: 14px; height: 14px; border-radius: 50%; background: var(--line); } .hb-w i.some { background: var(--gold-wash); box-shadow: inset 0 0 0 2px var(--gold); } .hb-w i.all { background: var(--gold); }
.hb-w small { color: var(--soft); font-size: 12px; margin-left: 6px; }

/* Welcome pages (22 Oct 2026) */
.wl-dots { display: flex; gap: 6px; justify-content: center; }
.wl-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.wl-dots i.on { width: 20px; border-radius: 4px; background: var(--ink); }
.wl-dots i.done { background: var(--ink); opacity: .45; }
.wl-coach { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.wl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; max-width: 340px; width: 100%; }
.wl-list li { display: grid; gap: 1px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.wl-list b { font-size: 15px; } .wl-list span { font-size: 14px; color: var(--soft, #666); }
/* MVMT welcome steps (25 Oct 2026) */
.wl-hc { width: 100%; max-width: 340px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; border-radius: 20px; background: var(--tile); }
.wl-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 340px; }
.wl-yn button, .wl-scale button { min-height: 44px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 12px; font: 600 15px var(--body); cursor: pointer; }
.wl-yn button.on, .wl-scale button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wl-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
.wl-parq { display: grid; gap: 10px; width: 100%; max-width: 380px; text-align: left; }
.wl-q { display: grid; gap: 8px; background: var(--tile); border-radius: 14px; padding: 12px; }
.wl-q p { margin: 0; font-size: 14px; }
.wl-q textarea, .wl-kg input { width: 100%; box-sizing: border-box; font: 16px/1.4 var(--body); padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.wl-q .wl-yn { max-width: none; }
.wl-flag { margin: 0; max-width: 380px; text-align: left; background: var(--gold-wash); color: var(--ink); border-radius: 12px; padding: 12px; font-size: 14px; }
.wl-kg { display: flex; align-items: center; gap: 10px; max-width: 220px; }
.wl-kg input { font: 600 28px/1 var(--body); text-align: center; }
.wl-commit { display: grid; gap: 8px; width: 100%; max-width: 380px; text-align: left; }
.wl-commit label { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.wl-commit input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }
.wl-commit b { display: block; font-size: 15px; } .wl-commit small { font-size: 13px; color: var(--soft); }
.wl-bell { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; background: var(--line); }
.wl-steps { text-align: left; max-width: 320px; }

/* Session card styles (22 Oct 2026) */
.shr-th { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--tile); border-radius: 12px; padding: 4px; }
.shr-th button { border: 0; background: transparent; padding: 9px 6px; border-radius: 9px; font: 600 14px var(--body); color: var(--soft); }
.shr-th button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.shr-ph { justify-self: center; }
.shr-sz { grid-template-columns: repeat(2, 1fr); }
.shr-img { max-height: 60vh; width: auto; margin: 0 auto; }
.shr-wrap { position: relative; display: flex; justify-content: center; }
.shr-drag { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.shr-wrap canvas.shr-img { border-radius: 16px; max-width: 100%; max-height: 60vh; width: auto; height: auto; display: block; }
.shr-panel { display: grid; gap: 14px; }
.shr-fonts { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.shr-fonts::-webkit-scrollbar { display: none; }
.shr-fonts button { flex: none; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 8px 14px; font-size: 16px; color: var(--ink); white-space: nowrap; }
.shr-fonts button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shr-sw { display: flex; gap: 10px; flex-wrap: wrap; }
.shr-sw button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); padding: 0; box-shadow: inset 0 0 0 2px var(--paper); }
.shr-sw button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.shr-al { grid-template-columns: repeat(3, 1fr); }
.shr-tx { display: grid; gap: 6px; font: 600 14px var(--body); color: var(--soft); }
.shr-tx input { font: 500 16px var(--body); padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.shr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.shr-tg { display: flex; align-items: center; gap: 8px; font: 500 15px var(--body); }
.shr-tg input { width: 20px; height: 20px; accent-color: var(--ink); }
.shr-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shr-sel { display: grid; gap: 6px; font: 600 13px var(--body); color: var(--soft); min-width: 0; }
.shr-sel select { font: 500 15px var(--body); padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); min-width: 0; width: 100%; }
.shr-zm { display: flex; align-items: center; gap: 12px; font: 600 14px var(--body); color: var(--soft); }
.shr-zm input { flex: 1; accent-color: var(--gold, #c9a84c); }

/* Share prompt on the finished-workout screen */
.shr-cta { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: 20px; background: var(--ink); color: var(--paper); }
.shr-cta-card { border: 0; padding: 0; background: none; border-radius: 10px; overflow: hidden; display: block; position: relative; align-self: start; }
.shr-cta-card .shr-cta-ph { position: absolute; inset: 0; opacity: 0; }
.shr-cta-plus { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px dashed var(--gold, #c9a84c); border-radius: 12px; display: grid; place-items: center; color: var(--gold, #c9a84c); font-size: 28px; line-height: 1; background: rgba(0, 0, 0, 0.55); }
.shr-cta-card.swap .shr-cta-ph { animation: shrSwap 7s ease-in-out infinite; }
.shr-cta-card.swap .shr-cta-plus { animation: shrPlus 7s ease-in-out infinite; }
@keyframes shrSwap { 0%, 45% { opacity: 0; } 55%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shrPlus { 0%, 45% { opacity: 1; } 55%, 92% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shr-cta-card.swap .shr-cta-ph, .shr-cta-card.swap .shr-cta-plus { animation: none; } }
.shr-cta .shr-cta-skip { display: block; margin: 10px 0 0; padding: 4px 0; color: inherit; opacity: 0.7; font-size: 14px; }
.shr-cta canvas { width: 96px; height: auto; display: block; border-radius: 10px; }
.shr-cta b { font-size: 18px; display: block; }
.shr-cta p { margin: 4px 0 12px; font-size: 14px; line-height: 1.4; opacity: 0.75; }
.shr-cta .btn { padding: 11px 14px; }

/* Day/night on the workout screen (23 Oct 2026, David): black by default, the sun button beside the timer turns it white. Remembered on the phone. */
.wo-mid { display: inline-flex; align-items: center; gap: 8px; }
.wo-night { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--tile); color: var(--ink); display: grid; place-items: center; padding: 0; }
.wo-night svg { width: 16px; height: 16px; }
/* The KNGMVMT mark sits faintly behind the workout, fixed in place while the sets scroll over it. */
#wo::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: url(/me/mark-dark.svg?v=1) no-repeat center 58% / min(80vw, 440px) auto; opacity: .05; }
html.v3 #wo:not(.day)::before { background-image: url(/me/mark-white.svg); opacity: .08; }
#wo > .in { position: relative; z-index: 1; }

/* Their own coach beside David in Messages (23 Oct 2026). Only shows for clients with a sub-coach. */
.imavs { position: relative; flex: none; width: 52px; height: 44px; }
.imavs .imav { position: absolute; left: 0; top: 0; }
.imav-i { display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 800 20px var(--disp); }
.imavs .imav2 { width: 26px; height: 26px; left: auto; right: 0; top: auto; bottom: -2px; box-shadow: 0 0 0 2px var(--paper); }
.imby { align-self: flex-start; font-size: 11.5px; color: var(--soft); margin: 4px 0 -2px 12px; }

/* MVMT Challenges (23 Oct 2026). */
.chc { display: grid; gap: 6px; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--tile); border-radius: 18px; padding: 16px; color: var(--ink); font: inherit; }
/* Getting started (25 Oct 2026) */
.stq-l { display: grid; gap: 8px; }
.stq-i { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.stq-i b { display: block; font-size: 15px; } .stq-i small { display: block; font-size: 13px; color: var(--soft); margin-top: 2px; }
.stq-c { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.stq-i.done .stq-c { background: var(--good); border-color: var(--good); color: #fff; }
.stq-i .stq-tip { color: var(--ink); background: var(--tile); border-radius: 10px; padding: 8px 10px; margin-top: 6px; }
.chc-inv { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chc-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.chc b { font-size: 18px; } .chc p { margin: 0; font-size: 14px; line-height: 1.45; opacity: .85; }
.chc-m { font-size: 12.5px; color: var(--soft); } .chc-inv .chc-m { color: inherit; opacity: .7; }
.chc-t { font-size: 14px; font-weight: 600; }
.chc-a { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .chc-a .btn { padding: 11px 18px; } .chc-inv .linkb { color: inherit; opacity: .75; }
.chs { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; } .chs label { flex: 1; display: grid; gap: 4px; font-size: 13px; color: var(--soft); }
.chs input { font: 600 16px var(--body); padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.chc-leave { justify-self: start; margin-top: 4px; font-size: 13px; color: var(--soft); }
.chb { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.chb-i { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 14px 10px; border-radius: 16px; background: var(--tile); }
.chb-i svg { width: 34px; height: 34px; fill: var(--gold); } .chb-i b { font-size: 14px; } .chb-i small { font-size: 12px; color: var(--soft); }
/* Badge medallions (25 Oct 2026) */
.chb { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.chb-i .bdg-svg { width: 84px; height: 84px; fill: none; }
.chb-i.todo b { color: var(--soft); }
.stq-b { width: 40px; height: 40px; } .stq-b .bdg-svg { width: 40px; height: 40px; display: block; }
.stq-i:has(.stq-b) { grid-template-columns: 40px 1fr; }
/* Levels (25 Oct 2026) */
.lvl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; font: inherit; cursor: pointer; }
.lvl-row b { display: block; font-size: 15px; } .lvl-row small { display: block; font-size: 13px; color: var(--soft); }
.lvl-strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 6px 0 2px; }
.lvl-s { display: grid; place-items: center; height: 28px; border-radius: 8px; font: 600 12px var(--body); background: var(--tile); color: var(--soft); }
.lvl-s.done { background: var(--ink); color: var(--paper); } .lvl-s.on { background: var(--gold); color: #111; }
.bdgpop-a { display: grid; gap: 6px; justify-items: center; margin-top: 4px; }
.bdgpop-a .linkb { color: var(--gold); }
.bdgpop-in.lvlup { background: radial-gradient(120% 80% at 50% 0%, #2a2410 0%, #0d0d0d 60%); border: 1px solid #3a3220; }
.bdgpop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0,0,0,.55); padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.bdgpop-in { width: 100%; max-width: 340px; background: #0d0d0d; color: #fff; border-radius: 26px; padding: 28px 22px 24px; display: grid; justify-items: center; gap: 10px; text-align: center; animation: bdgin .45s cubic-bezier(.2,1.4,.4,1); }
.bdgpop-in .k { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.bdgpop-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bdgpop-row .bdg-svg { animation: bdgspin .7s ease-out; }
.bdgpop-in h3 { font: 400 36px/1 var(--disp); margin: 4px 0 0; letter-spacing: .5px; }
.bdgpop-in p { margin: 0; color: #cfcac0; font-size: 14px; line-height: 1.5; }
.bdgpop-in .btn { margin-top: 8px; min-width: 140px; }
@keyframes bdgin { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bdgspin { from { transform: rotateY(180deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Cycle calendar (23 Oct 2026). Estimates are dashed; logged period days are filled. */
.cy-c p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; }
.cy-f { display: grid; gap: 4px; font-size: 13px; color: var(--soft); } .cy-f select { font: 500 16px var(--body); padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.cy-ok { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .cy-ok input { margin-top: 3px; width: 18px; height: 18px; }
.cy-nav { display: flex; justify-content: space-between; }
.cy-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cy-h { text-align: center; font-size: 11px; color: var(--soft); font-weight: 600; }
.cy-d { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid transparent; background: var(--tile); font: 600 14px var(--body); color: var(--ink); padding: 0; }
.cy-d:disabled { opacity: .45; }
.cy-d.ph-period { background: #c0504a; color: #fff; } .cy-d.ph-period.est { background: transparent; color: var(--ink); border: 1.5px dashed #c0504a; }
.cy-d.ph-ovulation.est { border: 1.5px dashed var(--gold); background: transparent; }
.cy-d.ph-luteal.est { background: var(--gold-wash); } .cy-d.ph-follicular.est { background: var(--tile); }
.cy-d.now { box-shadow: 0 0 0 2px var(--ink); } .cy-d.sel { box-shadow: 0 0 0 2px var(--gold); }
.cy-d i { position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.cy-log { display: grid; gap: 10px; } .cy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cy-row > span { width: 70px; font-size: 13px; color: var(--soft); }
.cy-del { justify-self: start; color: #c0504a; margin-top: 6px; }

/* MVMT HQ branding (23 Oct 2026): another business's app has no KNGMVMT mark behind it, and a text name where no logo is set. */
html.brand-x body::before, html.brand-x #wo::before, html.brand-x .un::before { display: none !important; }
.brand-name { font-family: var(--disp); font-size: 26px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }

/* Cycle tracking preview and upgrade (24 Oct 2026). A black hero with the cycle as a ring, then the features on sample data. */
.cyp { display: grid; gap: 26px; }
.cyp-hero { background: #000; color: #fff; border-radius: 22px; padding: 26px 20px 22px; display: grid; justify-items: center; text-align: center; gap: 8px; }
.cyp-hero .h { color: #fff; font-size: 52px; margin: 4px 0 0; }
.cyp-hero .sub { color: #c9c6bf; max-width: 30ch; margin: 0; }
.cyp-tag { margin: 4px 0 0; font-size: 11.5px; color: #8d8a83; }
.cyp-ring { width: min(220px, 64vw); height: auto; }
.cyp-ring .cyp-per { stroke: #c0504a; } .cyp-ring .cyp-fol { stroke: #3a3936; } .cyp-ring .cyp-ovu { stroke: var(--gold); } .cyp-ring .cyp-lut { stroke: #5b5850; }
.cyp-mk circle { fill: #fff; stroke: #000; stroke-width: 4; }
.cyp-mk { transform-origin: 100px 100px; transform: rotate(calc(8.5 / 29 * 360deg)); animation: cyp-go 1.6s cubic-bezier(.3, .7, .2, 1) .2s both; }
@keyframes cyp-go { from { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .cyp-mk { animation: none; } }
.cyp-big { font: 400 38px var(--disp); fill: #fff; letter-spacing: .03em; } .cyp-sm { font: 600 11px var(--body); fill: var(--gold); }
.cyp-sec { display: grid; gap: 10px; } .cyp-sec > p { margin: 0; color: var(--soft); font-size: 14.5px; line-height: 1.5; }
.cyp-sec .h2 { margin: 0; }
.cyp-g .cy-d { display: grid; place-items: center; }
.cyp-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--soft); }
.cyp-key span { display: inline-flex; align-items: center; gap: 6px; } .cyp-key i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.cyp-key .k-per { background: #c0504a; } .cyp-key .k-ovu { border: 1.5px dashed var(--gold); } .cyp-key .k-est { border: 1.5px dashed #c0504a; }
.cyp-log { display: grid; gap: 10px; pointer-events: none; }
.cyp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cyp-stats > div { background: var(--tile); border-radius: 16px; padding: 14px; display: grid; }
.cyp-stats b { font: 400 34px/1 var(--disp); letter-spacing: .02em; } .cyp-stats small { color: var(--soft); font-size: 12.5px; }
.cyp-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; height: 120px; padding: 0 4px; }
.cyp-bars > div { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; text-align: center; }
.cyp-bars span { align-self: end; height: calc(var(--h) * 100%); background: linear-gradient(var(--gold), var(--gold-ink)); border-radius: 8px 8px 3px 3px; }
.cyp-bars small { font-size: 11.5px; color: var(--soft); }
.cyp-cap { font-size: 12.5px !important; }
.cyp-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cyp-list li { background: var(--tile); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; color: var(--soft); } .cyp-list b { color: var(--ink); }
.cyp-buy { border: 1.5px solid var(--gold); background: var(--gold-wash); border-radius: 20px; padding: 20px; display: grid; gap: 12px; justify-items: start; }
.cyp-buy .h2, .cyp-buy p { margin: 0; } .cyp-buy > p:not(.s-hint):not(.cyp-price) { font-size: 14.5px; line-height: 1.5; }
.cyp-price { margin: 0; display: flex; align-items: baseline; gap: 8px; } .cyp-price b { font: 400 54px/1 var(--disp); } .cyp-price small { color: var(--soft); font-size: 14px; }
.cyp-buy .btn { width: 100%; justify-content: center; }
.cyp-acts { display: grid; gap: 8px; width: 100%; justify-items: center; }
.cyp-log .cy-row > .chipb { width: auto; font-size: 13px; color: var(--soft); }
.cyp-log .cy-row > .chipb[aria-pressed="true"] { color: var(--paper); }
.wo-r .wo-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 360 px: no overlap with the kg box (launch audit) */
@media (max-width: 370px) { .wo-h, .wo-r { gap: 6px; } .wo-r .wo-l { font-size: 12.5px; } }
/* Narrow phones (25 Oct 2026 audit, c1): Last moves under its set row, so the headers and last-time values never squash. */
.wo-lk { display: none; font-style: normal; }
@media (max-width: 380px) {
  .wo-h, .wo-r { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 4px 8px; }
  .wo-h span:nth-child(2), .wo-r .wo-lw { display: none; }
  .wo-r .wo-l { grid-row: 2; grid-column: 2 / 5; font-size: 12.5px; white-space: normal; overflow: visible; }
  .wo-lk { display: inline; }
}

/* Cycle pages, softer look (24 Oct 2026, David: "more pretty for women"). Blush and rose with lilac and gold phases,
   an italic serif for the big numbers, KNGMVMT gold kept for the ovulation window. Scoped to .cyp only. */
:root { --cy-rose: #d8667b; --cy-rose-ink: #b44a60; --cy-rose-wash: #fcebee; --cy-blush: #fdf4f2; --cy-lilac: #c9bbe6; --cy-lilac-wash: #f3effa;
  --cy-peach: #f0cbb9; --cy-gold: #d4ad55; --cy-plum: #5e3450; --cy-mauve: #94707f; --cy-line: #f1dde1; --cy-serif: "Fraunces", Georgia, "Times New Roman", serif; }
.cyp { gap: 22px; color: var(--cy-plum); }
.cyp .h2 { font-family: var(--cy-serif); font-weight: 600; font-size: 23px; letter-spacing: 0; text-transform: none; color: var(--cy-plum); }
.cyp-sec > p, .cyp-sec p { color: var(--cy-mauve); }
.cyp-hero { background: radial-gradient(130% 95% at 50% 0%, #fff 0%, var(--cy-blush) 48%, #f8e2e6 100%); color: var(--cy-plum); border: 1px solid var(--cy-line); box-shadow: 0 18px 40px -28px rgba(180, 74, 96, .45); }
.cyp-hero .h { color: var(--cy-plum); font-family: var(--cy-serif); font-style: italic; font-weight: 500; font-size: 40px; line-height: 1.05; letter-spacing: 0; }
.cyp-hero .sub { color: var(--cy-mauve); }
.cyp-tag { color: #a98a99; }
.cyp-ring .cyp-per { stroke: var(--cy-rose); } .cyp-ring .cyp-fol { stroke: var(--cy-lilac); } .cyp-ring .cyp-ovu { stroke: var(--cy-gold); } .cyp-ring .cyp-lut { stroke: var(--cy-peach); }
.cyp-ring circle { stroke-linecap: round; }
.cyp-mk { transform: rotate(var(--rot, 106deg)); }
.cyp-mk circle { fill: #fff; stroke: var(--cy-rose); stroke-width: 4; }
.cyp-big { font: italic 500 31px var(--cy-serif); fill: var(--cy-plum); letter-spacing: 0; } .cyp-sm { font: 600 11px var(--body); fill: var(--cy-mauve); }
.cyp-ph { margin: 0; background: #fff; color: var(--cy-plum); border: 1px solid var(--cy-line); border-radius: 99px; padding: 4px 12px; font: 600 12.5px var(--body); }
.cyp-qa { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.cyp .btn.gold { background: var(--cy-rose); border-color: var(--cy-rose); color: #fff; justify-content: center; }
.cyp .btn.gold:active { background: var(--cy-rose-ink); }
.cyp-ghost { background: #fff; color: var(--cy-plum); border: 1px solid var(--cy-line); justify-content: center; }
.cyw { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cyw-d { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 0 10px; border-radius: 16px; border: 1.5px solid transparent; background: var(--cy-blush); color: var(--cy-plum); font: inherit; }
.cyw-d small { font-size: 11px; color: var(--cy-mauve); } .cyw-d b { font: italic 500 19px var(--cy-serif); }
.cyw-d:disabled { opacity: .7; }
.cyw-d.ph-period { background: var(--cy-rose); color: #fff; } .cyw-d.ph-period small { color: #ffe3e8; }
.cyw-d.ph-period.est { background: var(--cy-rose-wash); color: var(--cy-plum); border: 1.5px dashed var(--cy-rose); } .cyw-d.ph-period.est small { color: var(--cy-mauve); }
.cyw-d.ph-ovulation { border: 1.5px dashed var(--cy-gold); background: #fdf7e8; }
.cyw-d.ph-follicular { background: var(--cy-lilac-wash); } .cyw-d.ph-luteal { background: #fcf0ea; }
.cyw-d.now { box-shadow: 0 0 0 2px var(--cy-plum); }
.cyw-d i { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.cyi { background: linear-gradient(135deg, var(--cy-lilac-wash), var(--cy-rose-wash)); border-radius: 22px; padding: 16px 18px; display: grid; gap: 6px; }
.cyi small { font: 600 12px var(--body); color: var(--cy-rose-ink); }
.cyi p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--cy-plum); }
.cyp .cy-d { background: var(--cy-blush); color: var(--cy-plum); }
.cyp .cy-d.ph-period { background: var(--cy-rose); color: #fff; } .cyp .cy-d.ph-period.est { background: transparent; color: var(--cy-plum); border: 1.5px dashed var(--cy-rose); }
.cyp .cy-d.ph-ovulation.est, .cyp .cy-d.ph-ovulation { border: 1.5px dashed var(--cy-gold); background: #fdf7e8; }
.cyp .cy-d.ph-luteal.est { background: #fcf0ea; } .cyp .cy-d.ph-follicular.est { background: var(--cy-lilac-wash); }
.cyp .cy-d.now { box-shadow: 0 0 0 2px var(--cy-plum); } .cyp .cy-d.sel { box-shadow: 0 0 0 2px var(--cy-rose); }
.cyp .cy-h { color: var(--cy-mauve); }
.cyp-key .k-per { background: var(--cy-rose); } .cyp-key .k-ovu { border-color: var(--cy-gold); } .cyp-key .k-est { border-color: var(--cy-rose); }
.cyp-key { color: var(--cy-mauve); }
.cyp-logs { pointer-events: auto; background: #fff; border: 1px solid var(--cy-line); border-radius: 22px; padding: 16px; gap: 14px; box-shadow: 0 14px 34px -26px rgba(94, 52, 80, .5); }
.cy-grp { display: grid; gap: 6px; } .cy-grp > span { font: 600 13px var(--body); color: var(--cy-plum); } .cy-grp > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cyp .chipb { background: #fff; border-color: var(--cy-line); color: var(--cy-plum); }
.cyp .chipb[aria-pressed="true"] { background: var(--cy-rose); border-color: var(--cy-rose); color: #fff; }
.cyp-logs textarea { font: 400 16px var(--body); padding: 10px 12px; border: 1px solid var(--cy-line); border-radius: 14px; color: var(--cy-plum); background: var(--cy-blush); resize: vertical; }
.cyp-stats > div { background: var(--cy-blush); border: 1px solid var(--cy-line); }
.cyp-stats b { font: italic 500 34px/1 var(--cy-serif); color: var(--cy-plum); letter-spacing: 0; } .cyp-stats small { color: var(--cy-mauve); }
.cyh { display: grid; gap: 8px; }
.cyh-r { display: grid; grid-template-columns: 52px minmax(0, 1fr) 60px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--cy-mauve); }
.cyh-r b { text-align: right; color: var(--cy-plum); font-weight: 600; }
.cyh-b { display: flex; height: 10px; border-radius: 99px; background: #f6edef; overflow: hidden; }
.cyh-b i { display: block; height: 100%; background: var(--cy-lilac); } .cyh-b i.cyh-p { background: var(--cy-rose); }
.cyp-bars span { background: linear-gradient(var(--cy-rose), var(--cy-plum)); }
.cyp-bars small { color: var(--cy-mauve); }
.cyp-list li { background: var(--cy-blush); color: var(--cy-mauve); } .cyp-list b { color: var(--cy-plum); }
.cyp-buy { border-color: var(--cy-rose); background: linear-gradient(160deg, #fff, var(--cy-rose-wash)); }
.cyp-price b { font: italic 500 54px/1 var(--cy-serif); color: var(--cy-plum); } .cyp-price small { color: var(--cy-mauve); }
.cyp .bhead .linkb, .cyp .cy-nav .linkb { color: var(--cy-rose-ink); }
.cyp .cy-f { color: var(--cy-mauve); }
.cyp .cy-nav { display: flex; gap: 2px; } .cyp .cy-nav .linkb { font-size: 24px; line-height: 1; padding: 6px 12px; border-radius: 12px; background: var(--cy-blush); }
.cyp-setup { gap: 14px; } .cyp-setup .cy-f select { border-color: var(--cy-line); border-radius: 14px; background: #fff; color: var(--cy-plum); } .cyp .cy-ok { color: var(--cy-plum); } .cyp .cy-ok input { accent-color: var(--cy-rose); }
/* 24 Oct 2026, David: ovulation window solid light green; estimated period days easier to see. */
:root { --cy-green: #cdebd6; --cy-green-ink: #2e6b47; --cy-green-ring: #8fcfa4; --cy-rose-est: #f8cfd7; }
.cyp-ring .cyp-ovu { stroke: var(--cy-green-ring); }
.cyp .cy-d.ph-ovulation, .cyp .cy-d.ph-ovulation.est, .cyw-d.ph-ovulation { background: var(--cy-green); border: 1.5px solid var(--cy-green); color: var(--cy-green-ink); }
.cyw-d.ph-ovulation small { color: var(--cy-green-ink); }
.cyp-key .k-ovu { background: var(--cy-green); border: 1.5px solid var(--cy-green-ring); }
.cyp .cy-d.ph-period.est, .cyw-d.ph-period.est { background: var(--cy-rose-est); border: 2px dashed var(--cy-rose); color: var(--cy-rose-ink); font-weight: 700; }
.cyw-d.ph-period.est small { color: var(--cy-rose-ink); }
.cyp-key .k-est { background: var(--cy-rose-est); border: 2px dashed var(--cy-rose); }
.cyp .cy-d.ph-period.est:disabled, .cyw-d.ph-period.est:disabled, .cyp .cy-d.ph-ovulation:disabled, .cyw-d.ph-ovulation:disabled { opacity: 1; }
.cyfb textarea { font: 400 16px var(--body); padding: 10px 12px; border: 1px solid var(--cy-line); border-radius: 14px; color: var(--cy-plum); background: var(--cy-blush); resize: vertical; }
.cyfb > .btn { justify-self: start; }
.cyfb-ok { color: var(--cy-green-ink) !important; font-weight: 600; }
.cyfb-list { display: grid; gap: 8px; }
.cyfb-i { background: #fff; border: 1px solid var(--cy-line); border-radius: 16px; padding: 10px 14px; }
.cyfb-i small { color: var(--cy-mauve); font-size: 12px; } .cyfb-i p { margin: 4px 0 0; color: var(--cy-plum); font-size: 14px; }
.cyfb-s { color: var(--cy-mauve) !important; font-size: 12.5px !important; } .cyfb-r { background: var(--cy-green); border-radius: 10px; padding: 6px 10px; color: var(--cy-green-ink) !important; }
/* Meal plan request (24 Oct 2026) */
.mpq { display: grid; gap: 10px; } .mpq > .btn { justify-self: start; }
.mpq-q { display: grid; gap: 6px; } .mpq-q > span { font: 600 14px var(--body); }
.mpq-o { display: flex; flex-wrap: wrap; gap: 6px; }
.mpq textarea { font: 400 16px var(--body); padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); resize: vertical; }
.mpq-sg { display: grid; gap: 2px; background: var(--gold-wash); border-radius: 14px; padding: 12px 14px; }
.mpq-sg small { color: var(--gold-ink); font-weight: 600; font-size: 12px; } .mpq-sg b { font-size: 17px; } .mpq-sg span { color: var(--soft); font-size: 13.5px; }
.mpq-est { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
/* Day log as a sheet over the page (24 Oct 2026): the page underneath never moves. */
.cy-ov { position: fixed; inset: 0; background: rgba(60, 30, 45, .28); z-index: 60; }
.cy-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: 24px 24px 0 0 !important; padding: 18px max(16px, env(safe-area-inset-left, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  max-width: 560px; margin: 0 auto; animation: cy-up .22s ease-out; }
@keyframes cy-up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cy-sheet { animation: none; } }
.cy-pbig { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; border-radius: 18px; border: 2px solid var(--cy-rose); background: #fff; color: var(--cy-rose-ink); font: 700 16px var(--body); }
.cy-pbig.on { background: var(--cy-rose); color: #fff; }
.cy-pbig .cy-dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.cy-ov { z-index: 1000; } .cy-sheet { z-index: 1001; }
body:has(.cy-sheet) .tabs { display: none; }   /* the day sheet covers the tab bar while it is open */
.cy-sheet > .cy-row:last-child { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom, 0px)); background: #fff; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); margin-bottom: calc(-18px - env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cy-line); } .cy-sheet > .cy-row:last-child .btn { flex: 1; justify-content: center; }
.cy-mk { display: grid; gap: 8px; } .cy-mk .chipb { text-align: left; padding: 12px 14px; font-size: 14.5px; } .cy-miss .btn { justify-self: start; } .cy-sheet p { margin: 0; color: var(--cy-plum); font-size: 14.5px; line-height: 1.5; }
.cy-loading { opacity: .45; transition: opacity .15s; }
.cy-estq { display: grid; gap: 8px; background: var(--cy-rose-wash); border: 1.5px dashed var(--cy-rose); border-radius: 16px; padding: 12px 14px; } .cy-estq .btn { justify-self: start; }
/* Your phases (24 Oct 2026) */
.cyph { display: grid; gap: 8px; }
.cyph-c { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 14px; border-radius: 18px; border: 1.5px solid var(--cy-line); background: #fff; color: var(--cy-plum); font: inherit; }
.cyph-c.now { border-color: var(--cy-plum); box-shadow: 0 10px 24px -20px rgba(94, 52, 80, .6); }
.cyph-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; }
.cyph-c.ph-period .cyph-dot { background: var(--cy-rose); } .cyph-c.ph-follicular .cyph-dot { background: var(--cy-lilac); }
.cyph-c.ph-ovulation .cyph-dot { background: var(--cy-green-ring); } .cyph-c.ph-luteal .cyph-dot { background: var(--cy-peach); }
.cyph-t { display: grid; gap: 3px; min-width: 0; } .cyph-t b { font: 600 15.5px var(--body); } .cyph-t b i { font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--cy-plum); border-radius: 99px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }
.cyph-t small { color: var(--cy-rose-ink); font-size: 12.5px; font-weight: 600; } .cyph-t > span { color: var(--cy-mauve); font-size: 14px; line-height: 1.45; }
.cyph-t .cyph-more { color: var(--cy-plum); margin-top: 4px; }
/* Notes and missed periods (24 Oct 2026) */
.cy-mine { display: grid; gap: 8px; margin-top: 6px; }
.cy-mi { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: #fff; border: 1px solid var(--cy-line); border-radius: 14px; padding: 10px 14px; }
.cy-mi > span { display: grid; min-width: 0; } .cy-mi b { font-size: 14.5px; color: var(--cy-plum); } .cy-mi small { color: var(--cy-mauve); font-size: 12.5px; }
.cy-rm { color: var(--cy-rose-ink) !important; white-space: nowrap; }
.cyp .cy-d.mk-skipped { border: 1.5px dotted var(--cy-mauve); background: transparent; }
.cyp .cy-d.mk-skipped::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 1.5px; background: var(--cy-mauve); transform: rotate(-35deg); opacity: .6; }
/* Phases in the ring (24 Oct 2026) */
.cyp-hit { cursor: pointer; pointer-events: stroke; }
.cyph-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; background: rgba(255,255,255,.7); border-radius: 14px; padding: 4px; }
.cyph-tab { display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; background: none; border-radius: 10px; padding: 8px 2px; font: 600 12px var(--body); color: var(--cy-mauve); }
.cyph-tab[aria-selected="true"] { background: #fff; color: var(--cy-plum); box-shadow: 0 2px 8px -4px rgba(94, 52, 80, .35); }
.cyph-tab .cyph-dot { width: 9px; height: 9px; margin: 0; }
.cyph-tab.ph-period .cyph-dot, .cyph-card.ph-period::before { background: var(--cy-rose); } .cyph-tab.ph-follicular .cyph-dot, .cyph-card.ph-follicular::before { background: var(--cy-lilac); }
.cyph-tab.ph-ovulation .cyph-dot, .cyph-card.ph-ovulation::before { background: var(--cy-green-ring); } .cyph-tab.ph-luteal .cyph-dot, .cyph-card.ph-luteal::before { background: var(--cy-peach); }
.cyph-card { position: relative; display: grid; gap: 4px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--cy-line); border-radius: 16px; padding: 12px 14px 10px 22px; overflow: hidden; }
.cyph-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.cyph-card b { font: 600 15.5px var(--body); color: var(--cy-plum); } .cyph-card b i { font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--cy-plum); border-radius: 99px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }
.cyph-card small { color: var(--cy-rose-ink); font-size: 12.5px; font-weight: 600; } .cyph-card > span { color: var(--cy-mauve); font-size: 14px; line-height: 1.45; }
.cyph-card .cyph-more { color: var(--cy-plum); } .cyph-card .linkb { justify-self: start; color: var(--cy-rose-ink); font-size: 13px; }
.cyp-mk { animation: none; } .cyp-mk.go { animation: cyp-go 1.6s cubic-bezier(.3, .7, .2, 1) .2s both; } @media (prefers-reduced-motion: reduce) { .cyp-mk.go { animation: none; } }
.cyp-sm { font-size: 9.5px; letter-spacing: .01em; }   /* fits inside the thicker ring */
/* Start period menu, dates, predictions, stat cards (24 Oct 2026) */
.cysts { display: flex; gap: 8px; overflow-x: auto; width: 100%; padding: 2px 2px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cysts::-webkit-scrollbar { display: none; }
.cyst { flex: 0 0 auto; min-width: 96px; display: grid; gap: 1px; text-align: left; background: #fff; border: 1px solid var(--cy-line); border-radius: 16px; padding: 10px 12px; }
.cyst small { font: 600 11px var(--body); color: var(--cy-mauve); } .cyst b { font: italic 500 20px var(--cy-serif); color: var(--cy-plum); white-space: nowrap; } .cyst span { font-size: 11px; color: var(--cy-mauve); white-space: nowrap; }
.cy-menu { display: grid; gap: 8px; }
.cy-mbtn { width: 100%; text-align: left; font: inherit; cursor: pointer; } .cy-mbtn .chev { color: var(--cy-rose-ink); font-size: 20px; }
.cy-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cy-dates input { font: 500 16px var(--body); padding: 10px 12px; border: 1px solid var(--cy-line); border-radius: 12px; color: var(--cy-plum); background: #fff; width: 100%; min-width: 0; }
.cy-pred small { display: flex; align-items: center; gap: 6px; } .pd { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .pd.per { background: var(--cy-rose); } .pd.ovu { background: var(--cy-green-ring); }
/* Notes and settings buttons on My cycle (24 Oct 2026) */
.cy-top { display: flex; align-items: center; justify-content: space-between; }
.cy-top > span { display: flex; gap: 8px; }
.cy-ib { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cy-line); background: #fff; color: var(--cy-plum); display: grid; place-items: center; padding: 0; }
.cy-ib svg { width: 20px; height: 20px; }
.cy-ib i { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--cy-rose); color: #fff; font: 700 10.5px/18px var(--body); font-style: normal; padding: 0 4px; }
.cyp .cy-link, .cyp .linkb[data-cymiss] { color: var(--cy-rose-ink); }
/* labels under the three top icons */
.cy-top > span { gap: 10px; } .cy-ib { margin-bottom: 14px; } .cy-ib::after { content: attr(data-lbl); position: absolute; top: 44px; left: 50%; transform: translateX(-50%); font: 600 10.5px var(--body); color: var(--cy-mauve); white-space: nowrap; }
/* Today at a glance, GP summary (24 Oct 2026) */
.cy-glance { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--cy-line); border-radius: 16px; padding: 10px 12px; font: inherit; color: var(--cy-plum); }
.cy-glance small { font: 700 12px var(--body); color: var(--cy-rose-ink); } .cy-glance span { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cy-glance i { font-style: normal; font-size: 12px; background: var(--cy-blush); border-radius: 99px; padding: 3px 8px; } .cy-glance b { font-size: 12.5px; color: var(--cy-rose-ink); }
.cyp-qa2 { margin-top: 2px; }
.cygp .h { font-family: var(--cy-serif); font-style: italic; font-weight: 500; font-size: 36px; color: var(--cy-plum); }
.cygp-t { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--cy-plum); }
.cygp-t th, .cygp-t td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--cy-line); vertical-align: top; } .cygp-t th { font-weight: 600; color: var(--cy-mauve); width: 45%; }
.cygp-t thead th { width: auto; }
@media print { .tabs, .hello, .backb, .noprint, .pvbar { display: none !important; } body { background: #fff; } .cygp { gap: 14px; } }

/* 320px screens (iPhone SE, Display Zoom): cycle sections shrink to fit, no sideways scroll (24 Oct 2026) */
.cyp-hero, .cyp-sec { min-width: 0; max-width: 100%; }
.cyp-hero select, .cyp-sec select { width: 100%; max-width: 100%; }

/* In-page question sheet (25 Oct 2026 audit): second workout, weigh-in check. No browser confirm() boxes. */
.ask { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; justify-content: center; }
.ask-c { width: 100%; max-width: 560px; box-sizing: border-box; background: var(--paper); color: var(--ink); border-radius: 22px 22px 0 0; padding: 22px max(18px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); display: grid; gap: 10px; }
.ask-c > b { font-size: 18px; line-height: 1.3; }
.ask-c .sub { margin: 0; }
.ask-c .btns { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 6px; }
.ask-c .linkb { justify-self: center; }
/* Undo after Remove (25 Oct 2026 audit, c9) */
.toast.undo { display: flex; align-items: center; gap: 14px; padding: 4px 6px 4px 16px; min-width: 220px; justify-content: space-between; }
.toast.undo button { min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--gold); font: 700 15px var(--body); cursor: pointer; }
/* Tap targets (25 Oct 2026 audit, a-zoom): everything a client taps is at least 44px tall; zoom stays locked as David chose.
   Text links (.linkb above) take a taller tap area and give the space back with a negative margin, so nothing moves.
   Outlined pills keep their look and get an invisible 44px tap area; buttons and boxes are simply 44px. */
.vbtn, .sc-p, .wo-bar, .wo-unit button, .wo-night, .avbtn { position: relative; }
.vbtn::after, .sc-p::after, .wo-bar::after, .wo-unit button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }
.wo-night::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
/* More 44px tap areas (25 Oct 2026 launch polish): chips and range buttons get a taller invisible area; small square
   buttons that stand alone get a 44px square. The look doesn't change. */
.chipb, .mreqbtn, [data-nseg], [data-range], [data-ptag], [data-cmode], .fl-tick, [data-zstep], .bcalh button, [data-bday] { position: relative; }
.chipb::after, .mreqbtn::after, [data-nseg]::after, [data-range]::after, [data-ptag]::after, [data-cmode]::after, [data-bday]::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }
.fl-tick::after, [data-zstep]::after, .bcalh button::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(44px, 100%); height: max(44px, 100%); transform: translate(-50%, -50%); }
.avbtn { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.xbtn { width: 44px; height: 44px; }
.wo-c, .wo-pi .wo-c { min-width: 44px; height: 44px; }
.imsend, .imbar .immic { width: 44px; height: 44px; }
.btn.sm, .cx-k, .cx-days button, .fl-days button, .fx-seg button, .cq .yn button, .cscale button, .cchoice button, .lk-link, select { min-height: 44px; }
.wi-row input, html.v3 .wi3-in input { min-height: 44px; }
.phase summary { min-height: 44px; }
.payhist summary { padding: 12px 0; margin: -8px 0; }
.cyp .cy-nav .linkb { margin-block: 0; padding-block: 10px; }
@media (max-width: 400px) { .cscale { grid-template-columns: repeat(5, 1fr); gap: 6px; } }   /* 1 to 10 in two rows of five on small phones */
/* Renewal card on Home (25 Oct 2026): recap, next block, their plan, Keep going then Agree. */
.rn { border: 1px solid var(--gold-wash); }
.rn .rn-h { margin: 0; font: 400 26px/1.05 var(--disp); overflow-wrap: anywhere; }
.rn-rc { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.rn-rc span { background: var(--paper); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.rn-rc b { display: block; font-size: 15px; overflow-wrap: anywhere; } .rn-rc small { color: var(--soft); font-size: 12px; }
.rn-nx { margin: 0; font-size: 14px; line-height: 1.5; color: var(--soft); } .rn-nx b { color: var(--ink); }
.rn-cur { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.rn .linkb { justify-self: start; min-height: 44px; }
.rn .btn { min-height: 48px; width: 100%; }
.rn-pl { display: grid; gap: 8px; }
.rn-p { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; text-align: left; min-height: 56px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.rn-p.on { border-color: var(--gold); }
.rn-p span:first-child { min-width: 0; } .rn-p b { display: block; font-size: 15px; } .rn-p small { display: block; color: var(--soft); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.rn-pr { flex: none; text-align: right; font-weight: 600; font-size: 14px; white-space: nowrap; }
.rn-sign { background: var(--paper); border-radius: 14px; padding: 14px; display: grid; gap: 6px; }
.rn-sign p { margin: 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.rn-fine { font-size: 12px; }
.rn-ok b { font: 400 22px/1.1 var(--disp); }

/* The all-100 prize line (25 Oct 2026) */
.chc-prize { font-size: 12px; font-weight: 600; color: var(--gold-ink); }
.lvl-prize { background: var(--gold-wash); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; display: grid; gap: 4px; }
.lvl-prize small { font-size: 12px; font-weight: 400; color: var(--soft); }

/* Height and weight ask (25 Oct 2026) */
.bodyask-in { width: 100%; max-width: 340px; background: var(--paper); color: var(--ink); border-radius: 24px; padding: 24px 22px 18px; display: grid; gap: 10px; text-align: left; }
.bodyask-in .k { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.bodyask-in h3 { font: 400 32px/1 var(--disp); margin: 0; }
.bodyask-in p { margin: 0; color: var(--soft); font-size: 14px; }
.bodyask-in label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.bodyask-i { display: flex; align-items: center; gap: 8px; }
.bodyask-i input { flex: 1; min-width: 0; min-height: 48px; font: 600 20px var(--body); padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.bodyask-in .btn { margin-top: 4px; } .bodyask-in .linkb { justify-self: center; min-height: 44px; }

/* Readable labels and greens (25 Oct 2026 polish) */
.stq .chc-k { color: var(--gold-ink); }
html.v3 { --good: #1f7546; }
html.v3 #wo:not(.day) .s-k { color: var(--gold); }   /* gold on the night workout screen (25 Oct 2026 polish) */

/* Weekly review (25 Oct 2026, David: "clean, branded and easy for them to go through and listen") */
.rvx-card { display: grid; gap: 8px; width: 100%; text-align: left; border: 0; border-radius: 20px; padding: 18px; background: #0d0d0d; color: #fff; font: inherit; cursor: pointer; }
.rvx-card-k { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.rvx-card b { font: 600 18px/1.35 var(--body); }
.rvx-card-f { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #c9c5bc; }
.rvx-card-go { color: var(--gold); font-weight: 600; white-space: nowrap; }
.rvx { display: grid; gap: 14px; }
.rvx-hero { display: grid; gap: 8px; background: #0d0d0d; color: #fff; border-radius: 24px; padding: 22px 20px 18px; }
.rvx-k { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.rvx-d { font-size: 13px; color: #b9b5ad; }
.rvx-h { font: 400 34px/1.02 var(--disp); margin: 4px 0 2px; color: #fff; text-wrap: balance; }
.rvx-by { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rvx-by b { display: block; font-size: 15px; } .rvx-by small { display: block; font-size: 12px; color: #b9b5ad; }
.rvx-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); display: grid; place-items: center; background: #1c1c1c; color: var(--gold); font: 400 20px var(--disp); flex: none; }
.rvx-av img { width: 100%; height: 100%; object-fit: cover; }
.rvx-voice { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; background: var(--gold-wash); border: 1px solid #e8d9a8; border-radius: 20px; padding: 14px; }
.rvx-play { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #0d0d0d; display: grid; place-items: center; cursor: pointer; }
.rvx-play svg { width: 24px; height: 24px; fill: var(--gold); } .rvx-play .pa { display: none; } .rvx-voice.on .rvx-play .pa { display: block; } .rvx-voice.on .rvx-play .pl { display: none; }
.rvx-vm { display: grid; gap: 4px; min-width: 0; } .rvx-vm b { font-size: 15px; color: var(--ink); }
.rvx-bar input { width: 100%; accent-color: #0d0d0d; height: 24px; margin: 0; }
.rvx-vt { display: flex; justify-content: space-between; font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; }
.rvx-speed { min-width: 48px; min-height: 44px; border: 1px solid #d9c98f; border-radius: 12px; background: var(--paper); font: 700 14px var(--body); color: var(--ink); cursor: pointer; }
.rvx-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.rvx-nav::-webkit-scrollbar { display: none; }
.rvx-nav button { flex: none; min-height: 40px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 8px 14px; font: 600 13px var(--body); color: var(--ink); cursor: pointer; position: relative; }
.rvx-nav button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.rvx-intro p, .rvx-outro p { margin: 0 0 8px; font-size: 16px; line-height: 1.55; }
.rvx-sec { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; scroll-margin-top: 80px; }
.rvx-st { display: flex; align-items: center; gap: 8px; font: 400 22px/1.1 var(--disp); letter-spacing: .3px; margin-bottom: 8px; color: var(--ink); }
.rvx-sec p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink); } .rvx-sec p:last-child { margin-bottom: 0; }
.rvx-focus { background: #0d0d0d; border-color: #0d0d0d; } .rvx-focus .rvx-st { color: var(--gold); }
.rvx-ticks { display: grid; gap: 8px; }
.rvx-tick { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; min-height: 44px; padding: 10px 12px; border-radius: 14px; background: #1a1a1a; color: #fff; font-size: 15px; line-height: 1.4; cursor: pointer; }
.rvx-tick input { width: 22px; height: 22px; margin: 0; accent-color: var(--gold); }
.rvx-tick input:checked + span { color: #a9a49a; text-decoration: line-through; }
.rvx-sig { display: block; font: 400 26px var(--disp); color: var(--gold-ink); margin-top: 4px; }
.rvx-cta { display: grid; }
.rvx-past { display: grid; gap: 4px; width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.rvx-list .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; min-height: 52px; padding: 10px 0; }
.rvx-list small { display: block; color: var(--soft); font-size: 13px; }

.ck-open { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; margin: 4px 0; padding: 10px 14px; border: 0; border-radius: 14px; background: #0d0d0d; color: #fff; font: 600 15px var(--body); cursor: pointer; text-align: left; }
.ck-open span:last-child { color: var(--gold); font-size: 20px; }
.rv-ready b { color: var(--ink); }
.alert.gold { background: #0d0d0d; border-color: #0d0d0d; color: #fff; } .alert.gold small { color: rgba(255,255,255,.75); } .alert.gold .ago { color: var(--gold); }
html.v3 .alert.gold { background: #0d0d0d; color: #fff; } html.v3 .alert.gold small { color: rgba(255,255,255,.75); } html.v3 .alert.gold .ago { color: #d4af37; }

/* Badges, one design (25 Oct 2026): slim Home bar, level box and tiles on Challenges */
.bdg-bar { display: grid; gap: 8px; width: 100%; padding: 12px 16px; border: 1px solid var(--line, #e6e3dc); border-radius: 16px; background: var(--paper); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bdg-bar-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.bdg-bar-n { font-weight: 700; color: var(--gold-ink, #8a6d1f); white-space: nowrap; }
.bdg-bar .bar, .bdg-lv .bar { height: 6px; }
.bdg-lv { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--tile); color: var(--ink); margin-bottom: 12px; }
.bdg-lv-t { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .bdg-lv-t span { font-weight: 700; }
.bdg-lv small { color: var(--soft); line-height: 1.45; } .bdg-lv .lvl-strip { margin: 2px 0 0; }
.chb-i.todo small { line-height: 1.3; }
#badges .lvl-prize { margin-top: 12px; }

/* David's own app, opened from HQ (26 Oct 2026): a slim bar back to HQ */
.selfbar { display: block; margin: 0 0 10px; padding: 9px 14px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 14px; text-decoration: none; text-align: center; }
.selfbar b { color: var(--gold); }
.selfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: -2px 0 12px; } .selfacts a { padding: 10px 12px; border-radius: 12px; background: var(--tile); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; text-align: center; }
.selfacts b { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--gold); color: #111; font-size: 12px; }
.bc-in { text-align: left; } .bc-body { font-size: 16px; line-height: 1.5; color: var(--ink); max-height: 50vh; overflow-y: auto; }
/* Personal bests as a one-line list (26 Oct 2026, David's pick) */
.st-tab { display: grid; background: var(--tile); border-radius: 16px; padding: 4px 0; }
.st-th, .st-tr { display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; gap: 12px; align-items: baseline; padding: 0 14px; }
.st-th { padding-top: 6px; padding-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--soft); } .st-th span:nth-child(n+2) { text-align: right; }
.st-tr { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; gap: 12px; align-items: baseline; padding: 9px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.st-tr:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 10px; }
.st-tr.on { background: var(--gold-wash); }
.st-tn { font-size: 14px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.st-tr b { font-size: 16px; text-align: right; white-space: nowrap; } .st-tr b small { font-size: 11px; color: var(--soft); font-weight: 500; margin: 0 2px 0 1px; }
.st-tr > span.num { font-size: 13px; color: var(--soft); text-align: right; white-space: nowrap; }
.st-more-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .st-more-h b { font-size: 15px; min-width: 0; }
/* Check-in workout video (26 Oct 2026) */
.civ-pick { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.civ { display: grid; gap: 8px; }
.civ-bar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; } .civ-bar i { display: block; height: 100%; background: var(--gold); transition: width .2s; }
.civ-ok { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--good-wash); color: var(--good); font-weight: 600; }
.civ-ok span { min-width: 0; overflow-wrap: anywhere; }
/* Save to the phone, easier (26 Oct 2026, David): only their own phone's steps, a looping demo for iPhone, a gold
   arrow at the real button, "you're all set" on the first Home Screen open. The phone drawings keep phone colours. */
.sv { display: grid; gap: 16px; text-align: left; justify-items: stretch; }
.sheet .in.sv { max-width: 420px; padding-top: calc(36px + env(safe-area-inset-top, 0px)); padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.sv-wl { display: grid; gap: 16px; text-align: left; width: 100%; max-width: 380px; }
.sv-head { display: grid; gap: 8px; }
.sv-k { font-size: 13px; font-weight: 600; color: var(--gold-ink); }
.sv-h { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 44px; line-height: .95; letter-spacing: .5px; text-wrap: balance; }
.sv-p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--soft); }
.sv-p.sm { font-size: 14px; line-height: 1.5; }
.sv-p b, .sv-t b { color: var(--ink); }
.sv-p svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; vertical-align: -3px; }
.sv-ok { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--good-wash); color: var(--good); font-size: 15px; font-weight: 600; line-height: 1.4; }
.sv .lk-acts, .sv-wl .lk-acts { max-width: none; }
.sv .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; vertical-align: -3px; margin-right: 8px; }
.linkb.in { display: inline; padding: 0; font-size: inherit; }
.sv-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sv-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--tile); }
.sv-steps li.on { background: var(--gold-wash); box-shadow: inset 0 0 0 2px var(--gold); }
.sv-steps li.col { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
.sv-row2 { display: flex; align-items: center; gap: 12px; }
.sv-n { flex: none; width: 30px; height: 30px; border-radius: 15px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.sv-t { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.sv-t svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; vertical-align: -3px; }
.sv-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgb(255,255,255); color: rgb(17,17,17); display: flex; align-items: center; justify-content: center; }
.sv-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-ic .sv-dots3 { gap: 3px; } .sv-ic .sv-dots3 i { width: 5px; height: 5px; }
.sv-dots3 { display: inline-flex; align-items: center; gap: 2px; } .sv-dots3 i { width: 4px; height: 4px; border-radius: 3px; background: rgb(17,17,17); }
.sv-addb { font-size: 14px; font-weight: 700; }
.sv-hint { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--paper); font-size: 14px; color: var(--soft); line-height: 1.35; }
.sv-safari { flex: none; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(rgb(90,200,250), rgb(26,115,232)); position: relative; }
.sv-safari::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid rgb(255,255,255); }
.sv-arrow { position: fixed; z-index: 31; width: 32px; height: 40px; color: var(--gold); animation: svbob 1.1s ease-in-out infinite; pointer-events: none; }
.sv-arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.sv-arrow-ios { right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
.sv-arrow-android { right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
.sv-arrow-top { right: calc(6px + env(safe-area-inset-right, 0px)); top: calc(6px + env(safe-area-inset-top, 0px)); transform: rotate(180deg); animation-name: svbobup; }
@keyframes svbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes svbobup { 0%, 100% { transform: rotate(180deg) translateY(0); } 50% { transform: rotate(180deg) translateY(9px); } }
/* the looping demo: four frames, 3.5 s each */
.sv-demo { background: var(--tile); border-radius: 24px; padding: 14px 0 12px; display: grid; justify-items: center; gap: 10px; }
.sv-ph { zoom: .8; width: 200px; height: 362px; border-radius: 32px; background: rgb(17,17,17); padding: 8px; box-sizing: border-box; }
.sv-scr { position: relative; width: 100%; height: 100%; border-radius: 25px; overflow: hidden; background: rgb(255,255,255); color: rgb(17,17,17); font-size: 11px; }
.sv-f { position: absolute; inset: 0; opacity: 0; animation: svcyc 14s infinite; }
.sv-f2 { animation-delay: 3.5s; } .sv-f3 { animation-delay: 7s; } .sv-f4 { animation-delay: 10.5s; }
@keyframes svcyc { 0% { opacity: 0; } 3% { opacity: 1; } 23% { opacity: 1; } 26% { opacity: 0; } 100% { opacity: 0; } }
.sv-pg { padding: 24px 12px 0; display: grid; gap: 8px; } .sv-pg b { font-family: var(--disp); font-weight: 400; font-size: 20px; }
.sv-pg i { height: 30px; border-radius: 9px; background: rgb(245,244,241); } .sv-pg i:first-of-type { height: 48px; background: rgb(17,17,17); }
.sv-sbar { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: rgb(236,236,236); display: flex; align-items: center; gap: 6px; padding: 0 9px; }
.sv-sbar > i { width: 30px; height: 30px; border-radius: 15px; background: rgb(255,255,255); }
.sv-sbar > span { flex: 1; height: 30px; border-radius: 15px; background: rgb(255,255,255); color: rgb(162,157,148); font-size: 10px; display: flex; align-items: center; justify-content: center; }
.sv-sbar > em { width: 30px; height: 30px; border-radius: 15px; background: rgb(255,255,255); box-shadow: 0 0 0 2px var(--gold); display: flex; align-items: center; justify-content: center; }
.sv-f2 { background: rgba(0,0,0,.25); }
.sv-menu { position: absolute; right: 8px; bottom: 60px; width: 146px; border-radius: 14px; background: rgb(255,255,255); box-shadow: 0 6px 20px rgba(0,0,0,.25); overflow: hidden; display: grid; }
.sv-menu > * { padding: 10px 12px; } .sv-menu span { border-top: 1px solid rgb(235,232,226); color: rgb(95,91,84); }
.sv-menu b, .sv-sheet b { display: flex; justify-content: space-between; align-items: center; background: rgb(247,240,220); }
.sv-menu svg, .sv-sheet svg { width: 12px; height: 12px; fill: none; stroke: rgb(17,17,17); stroke-width: 2.4; }
.sv-f3, .sv-f4 { background: rgb(242,242,242); }
.sv-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 64px; background: rgb(255,255,255); border-radius: 16px 16px 0 0; padding: 12px; display: grid; align-content: start; gap: 6px; }
.sv-grab { justify-self: center; width: 34px; height: 4px; border-radius: 2px; background: rgb(214,210,202); }
.sv-sheet > span, .sv-sheet > b { padding: 9px 10px; border-radius: 9px; } .sv-sheet > span { background: rgb(245,244,241); color: rgb(95,91,84); }
.sv-sheet > b { box-shadow: 0 0 0 2px var(--gold); }
.sv-add { display: flex; justify-content: space-between; align-items: center; padding: 16px 10px 10px; } .sv-add span { color: rgb(95,91,84); }
.sv-add em { font-style: normal; font-weight: 700; padding: 3px 7px; border-radius: 8px; box-shadow: 0 0 0 2px var(--gold); background: rgb(247,240,220); }
.sv-row { margin: 6px 10px; padding: 10px; border-radius: 12px; background: rgb(255,255,255); display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.sv-row img { width: 36px; height: 36px; border-radius: 9px; } .sv-row:has(img) { justify-content: flex-start; }
.sv-tog { width: 30px; height: 18px; border-radius: 9px; background: rgb(52,199,89); position: relative; } .sv-tog::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 7px; background: rgb(255,255,255); }
.sv-tap { position: absolute; width: 32px; height: 32px; border-radius: 16px; background: rgba(201,168,76,.55); border: 3px solid var(--gold); box-sizing: border-box; animation: svtap 3.5s infinite; }
@keyframes svtap { 0%, 30% { transform: scale(1.4); opacity: 0; } 45% { transform: scale(1); opacity: .85; } 70% { transform: scale(.85); opacity: .85; } 100% { transform: scale(1); opacity: 0; } }
.sv-cap { position: relative; height: 22px; width: 100%; font-size: 16px; font-weight: 700; text-align: center; }
/* Android's install box, and the Home Screen with their icon */
.sv-pic { background: var(--tile); border-radius: 22px; padding: 18px; display: grid; gap: 12px; }
.sv-pic-k { font-size: 12px; font-weight: 600; color: var(--soft); }
.sv-inst { background: rgb(255,255,255); color: rgb(17,17,17); border-radius: 18px; padding: 16px; display: grid; gap: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.sv-inst img { width: 42px; height: 42px; border-radius: 21px; } .sv-inst small { display: block; font-size: 13px; color: rgb(95,91,84); }
.sv-inst-b { display: flex; justify-content: flex-end; gap: 10px; font-size: 14px; font-weight: 600; } .sv-inst-b span { padding: 8px 14px; color: rgb(60,111,216); }
.sv-inst-b b { padding: 8px 18px; border-radius: 20px; background: rgb(60,111,216); color: rgb(255,255,255); box-shadow: 0 0 0 3px var(--gold); }
.sv-hs { background: rgb(29,39,51); border-radius: 24px; padding: 24px 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px; }
.sv-hs > span { display: grid; justify-items: center; gap: 5px; } .sv-hs i { width: 52px; height: 52px; border-radius: 14px; background: rgb(75,90,107); } .sv-hs s { width: 32px; height: 6px; border-radius: 3px; background: rgb(75,90,107); }
.sv-hs .me img { width: 52px; height: 52px; border-radius: 14px; animation: svglow 1.6s ease-in-out infinite; } .sv-hs .me b { font-size: 10px; color: rgb(255,255,255); font-weight: 600; }
@keyframes svglow { 0%, 100% { box-shadow: 0 0 0 3px var(--gold); } 50% { box-shadow: 0 0 0 7px rgba(201,168,76,.45); } }
/* "You're all set" */
.sheet.sv-done { background: rgb(17,17,17); color: rgb(255,255,255); }
.sv-done .in { justify-items: center; text-align: center; padding-top: calc(16vh + env(safe-area-inset-top, 0px)); max-width: 400px; }
.sv-done .sv-p { color: rgb(207,202,192); max-width: 320px; } .sv-done .linkb { color: var(--gold); }
.sv-tick { width: 100px; height: 100px; border-radius: 50px; background: var(--gold); display: flex; align-items: center; justify-content: center; animation: svpop .7s ease-out both; }
.sv-tick svg { width: 52px; height: 52px; fill: none; stroke: rgb(17,17,17); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes svpop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sv-arrow, .sv-tap, .sv-hs .me img, .sv-tick { animation: none; } .sv-arrow-top { transform: rotate(180deg); } .sv-f { animation: none; } .sv-f1 { opacity: 1; } }
@media (max-width: 360px) { .sv-h { font-size: 38px; } .sv-t { font-size: 16px; } }

/* ── Dark backgrounds (generated 25 Oct 2026 by scripts/gen-dark.py; don't edit by hand) ── */
html.dk .next { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .note .who .av { background-color: var(--raise) !important; }
html.dk .btn { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .days .today { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .pick .badge { color: #111 !important; }
html.dk .ov .handle { background-color: var(--paper) !important; }
html.dk .ov .handle::after { background-color: var(--paper) !important; }
html.dk .tabs { background-color: var(--tile) !important; }
html.dk .lk-dots i.on { background-color: var(--raise) !important; }
html.dk .lk-err { color: #ff8a80 !important; }
html.dk .chipb[aria-pressed="true"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .btn.gold { color: #111 !important; }
html.dk .item i { border-color: var(--line) !important; }
html.dk .item.on i { background-color: var(--raise) !important; }
html.dk .toast { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .crstage { background-color: var(--raise) !important; }
html.dk .phase.now { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .daychip[aria-pressed="true"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .stage .handle { background-color: var(--paper) !important; }
html.dk .stage .handle::after { background-color: var(--paper) !important; color: var(--ink) !important; }
html.dk .pcell .badge.alt { background-color: var(--raise) !important; }
html.dk .pvbar { background-color: var(--raise) !important; }
html.dk .apnew { border-color: var(--line) !important; }
html.dk .duecard { background-color: var(--tile) !important; }
html.dk .duecard.over { background-color: var(--tile) !important; border-color: var(--line) !important; }
html.dk .payover { color: #ff8a80 !important; }
html.dk .chip.bad { background-color: var(--tile) !important; color: #ff8a80 !important; }
html.dk .cmsg.me { background-color: var(--raise) !important; }
html.dk .chatin input { background-color: var(--paper) !important; }
html.dk .alert { background-color: var(--tile) !important; }
html.dk .alert.bad { background-color: var(--tile) !important; border-color: var(--line) !important; }
html.dk .alert.bad .ago { color: #ff8a80 !important; }
html.dk .wkc { background-color: var(--raise) !important; }
html.dk .item small.pick .usepick.on { color: #111 !important; }
html.dk .vframe { background-color: var(--raise) !important; }
html.dk .wo-unit button[aria-pressed="true"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .wo-rest { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .s-days button.today { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .paybox.bad { background-color: var(--tile) !important; }
html.dk .bcd.sel { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .cscale button.on, html.dk .cchoice button.on { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .cq .yn button.on { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .chatbtn[aria-current="page"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .imb.them { color: var(--ink) !important; }
html.v3.dk .chatbtn[aria-current="page"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.v3.dk .un { background-color: var(--raise) !important; }
html.v3.dk .mbar .p { background-color: var(--raise) !important; }
html.v3.dk .btn.ink { background-color: var(--raise) !important; color: var(--ink) !important; }
html.v3.dk .optrow .chipb[aria-pressed="true"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.v3.dk .paybox.bad .btn.gold { background-color: var(--paper) !important; color: #ff8a80 !important; }
html.v3.dk .mtile[data-tab="messages"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .fx-seg button[aria-pressed="true"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .cx-k[aria-pressed="true"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .cx-days button[aria-pressed="true"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .fl-days button[aria-pressed="true"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .fl-mb i { background-color: var(--raise) !important; }
html.dk .fl-cam { background-color: var(--raise) !important; }
html.dk .fl-fab { color: #111 !important; }
html.dk .pp-bar em { background-color: var(--raise) !important; }
html.dk .imb.them .vn-p { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .imb.own { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .imb.own .vn-p { color: #111 !important; }
html.dk .imsend { color: #111 !important; }
html.dk .pq-hero { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .pq-steps li.on .pq-num { color: #111 !important; }
html.dk .pq-steps li.done .pq-num { background-color: var(--raise) !important; }
html.dk .pq-entry { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .hb-i.on .hb-c { color: #111 !important; }
html.dk .wl-dots i.on { background-color: var(--raise) !important; }
html.dk .wl-dots i.done { background-color: var(--raise) !important; }
html.dk .wl-yn button.on, html.dk .wl-scale button.on { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .shr-th button[aria-pressed="true"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .shr-fonts button[aria-pressed="true"] { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .shr-cta { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .imav-i { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .chc-inv { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .lvl-s.done { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .bdgpop-in { background-color: var(--raise) !important; }
html.dk .cy-del { color: #ff8a80 !important; }
html.dk .cyp-hero { background-color: var(--raise) !important; }
html.dk .cyp-ph { background-color: var(--paper) !important; }
html.dk .cyp-ghost { background-color: var(--paper) !important; }
html.dk .cyw-d.ph-ovulation { background-color: var(--tile) !important; }
html.dk .cyw-d.ph-luteal { background-color: var(--tile) !important; }
html.dk .cyp .cy-d.ph-ovulation.est, html.dk .cyp .cy-d.ph-ovulation { background-color: var(--tile) !important; }
html.dk .cyp .cy-d.ph-luteal.est { background-color: var(--tile) !important; }
html.dk .cyp-logs { background-color: var(--paper) !important; }
html.dk .cyp .chipb { background-color: var(--paper) !important; }
html.dk .cyh-b { background-color: var(--tile) !important; }
html.dk .cyp-setup .cy-f select { background-color: var(--paper) !important; }
html.dk .cyfb-i { background-color: var(--paper) !important; }
html.dk .cy-pbig { background-color: var(--paper) !important; }
html.dk .cy-sheet > .cy-row:last-child { background-color: var(--paper) !important; }
html.dk .cyph-c { background-color: var(--paper) !important; }
html.dk .cy-mi { background-color: var(--paper) !important; }
html.dk .cyph-tabs { background-color: var(--tile) !important; }
html.dk .cyph-tab[aria-selected="true"] { background-color: var(--paper) !important; }
html.dk .cyph-card { background-color: var(--paper) !important; }
html.dk .cyst { background-color: var(--paper) !important; }
html.dk .cy-dates input { background-color: var(--paper) !important; }
html.dk .cy-ib { background-color: var(--paper) !important; }
html.dk .cy-glance { background-color: var(--paper) !important; }
html.dk .rvx-card { background-color: var(--raise) !important; }
html.dk .rvx-hero { background-color: var(--raise) !important; }
html.dk .rvx-voice { border-color: var(--line) !important; }
html.dk .rvx-play { background-color: var(--raise) !important; }
html.dk .rvx-focus { background-color: var(--raise) !important; }
html.dk .rvx-tick { background-color: var(--raise) !important; }
html.dk .ck-open { background-color: var(--raise) !important; }
html.dk .alert.gold { background-color: var(--raise) !important; }
html.v3.dk .alert.gold { background-color: var(--raise) !important; }
html.dk .bdg-bar { border-color: var(--line) !important; }
html.dk .selfbar { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk .sv-n { background-color: var(--raise) !important; color: var(--ink) !important; }
html.dk { color-scheme: dark; }
html.dk button.li { background-color: transparent !important; color: var(--ink) !important; }
html.dk .btn.gold, html.v3.dk .btn.gold { background-color: var(--gold) !important; color: #111 !important; }
html.dk.look-darkacc .btn.gold { color: #fff !important; }
html.dk body::before { opacity: .05; filter: invert(1); }
html.dk img[src*="kngmvmt-logo-dark"] { filter: invert(1) hue-rotate(180deg); }
html.dk input, html.dk select, html.dk textarea { background-color: var(--tile); color: var(--ink); border-color: var(--line); }

/* ── Corner styles (generated 25 Oct 2026 from the rules above; re-run when radii change). A coach picks Rounded (as
   designed), Soft or Sharp in HQ > Settings > Your brand. Pills and circles stay round. ── */
html.r-soft .tile { border-radius: 10px !important; }
html.r-soft .next { border-radius: 13px !important; }
html.r-soft .week div { border-radius: 9px !important; }
html.r-soft .bar { border-radius: 5px !important; }
html.r-soft .bar i { border-radius: 5px !important; }
html.r-soft .note { border-radius: 10px !important; }
html.r-soft .win { border-radius: 9px !important; }
html.r-soft .btn { border-radius: 8px !important; }
html.r-soft .days div { border-radius: 7px !important; }
html.r-soft .thumbs img { border-radius: 7px !important; }
html.r-soft .pick img { border-radius: 7px !important; }
html.r-soft .cmp-pick select { border-radius: 7px !important; }
html.r-soft .side figure { border-radius: 8px !important; }
html.r-soft .side img { border-radius: 8px !important; }
html.r-soft .ov { border-radius: 9px !important; }
html.r-soft .inst { border-radius: 11px !important; }
html.r-soft .inst .top img { border-radius: 7px !important; }
html.r-soft .meal { border-radius: 10px !important; }
html.r-soft .mnote { border-radius: 7px !important; }
html.r-soft .ov.adj::after { border-radius: 9px !important; }
html.r-soft .toast { border-radius: 7px !important; }
html.r-soft .crstage { border-radius: 10px !important; }
html.r-soft .phase { border-radius: 9px !important; }
html.r-soft .goal { border-radius: 10px !important; }
html.r-soft .daychip { border-radius: 8px !important; }
html.r-soft .bconfirm { border-radius: 10px !important; }
html.r-soft .pslot { border-radius: 9px !important; }
html.r-soft .pslot img { border-radius: 6px !important; }
html.r-soft .stage { border-radius: 9px !important; }
html.r-soft .side .stage { border-radius: 8px !important; }
html.r-soft .pcell { border-radius: 8px !important; }
html.r-soft .shprev { border-radius: 9px !important; }
html.r-soft .shprev canvas { border-radius: 6px !important; }
html.r-soft .pvbar { border-radius: 7px !important; }
html.r-soft .mrnote { border-radius: 8px !important; }
html.r-soft .goalrow input { border-radius: 7px !important; }
html.r-soft .apdate { border-radius: 7px !important; }
html.r-soft .apose { border-radius: 9px !important; }
html.r-soft .apref, html.r-soft .apnew { border-radius: 6px !important; }
html.r-soft .duecard { border-radius: 9px !important; }
html.r-soft .mtile { border-radius: 10px !important; }
html.r-soft .stile { border-radius: 9px !important; }
html.r-soft .cmsg { border-radius: 9px !important; }
html.r-soft .chatin input { border-radius: 8px !important; }
html.r-soft .alert { border-radius: 9px !important; }
html.r-soft .wkc { border-radius: 11px !important; }
html.r-soft .vframe { border-radius: 8px !important; }
html.r-soft .s-card { border-radius: 11px !important; }
html.r-soft .s-line { border-radius: 9px !important; }
html.r-soft .s-stats div { border-radius: 9px !important; }
html.r-soft .s-more { border-radius: 9px !important; }
html.r-soft .s-more > summary { border-radius: 9px !important; }
html.r-soft .wo-ex { border-radius: 10px !important; }
html.r-soft .wo-r input { border-radius: 6px !important; }
html.r-soft .wo-c { border-radius: 7px !important; }
html.r-soft .wo-swap { border-radius: 8px !important; }
html.r-soft .wo-alt { border-radius: 7px !important; }
html.r-soft .wo-confirm { border-radius: 10px !important; }
html.r-soft .s-days button { border-radius: 7px !important; }
html.r-soft .s-pick button { border-radius: 8px !important; }
html.r-soft .diff button { border-radius: 8px !important; }
html.r-soft .wo-rev textarea { border-radius: 8px !important; }
html.r-soft .wo-push { border-radius: 9px !important; }
html.r-soft .wo-adj { border-radius: 7px !important; }
html.r-soft .sm-tiles div { border-radius: 9px !important; }
html.r-soft .sm-ex { border-radius: 10px !important; }
html.r-soft .wstats div { border-radius: 7px !important; }
html.r-soft .paybox { border-radius: 9px !important; }
html.r-soft .sfres div { border-radius: 8px !important; }
html.r-soft .bopt { border-radius: 9px !important; }
html.r-soft .bopt .ic { border-radius: 8px !important; }
html.r-soft .bcalh button { border-radius: 7px !important; }
html.r-soft .bcd { border-radius: 7px !important; }
html.r-soft .cq { border-radius: 9px !important; }
html.r-soft .cin { border-radius: 7px !important; }
html.r-soft .cscale button, html.r-soft .cchoice button { border-radius: 5px !important; }
html.r-soft .cq .yn button { border-radius: 6px !important; }
html.r-soft .phchk { border-radius: 8px !important; }
html.r-soft .chatf textarea { border-radius: 8px !important; }
html.r-soft .chatbtn .dot { border-radius: 5px !important; }
html.r-soft .imb { border-radius: 10px !important; }
html.r-soft .imbar textarea { border-radius: 11px !important; }
html.r-soft .ck-now { border-radius: 10px !important; }
html.r-soft .ck-note { border-radius: 7px !important; }
html.v3.r-soft .alert { border-radius: 9px !important; }
html.v3.r-soft .un { border-radius: 12px !important; }
html.v3.r-soft .s-pick button { border-radius: 9px !important; }
html.v3.r-soft .mtile { border-radius: 11px !important; }
html.v3.r-soft .wi3 { border-radius: 9px !important; }
html.v3.r-soft .wi3-in { border-radius: 6px !important; }
html.v3.r-soft .s-line { border-radius: 9px !important; }
html.v3.r-soft .goal { border-radius: 11px !important; }
html.v3.r-soft .optrow { border-radius: 8px !important; }
html.v3.r-soft .optrow .chipb { border-radius: 6px !important; }
html.v3.r-soft #shop .block:first-of-type { border-radius: 10px !important; }
html.v3.r-soft .sgrid > * { border-radius: 10px !important; }
html.r-soft .fx-seg { border-radius: 8px !important; }
html.r-soft .fx-seg button { border-radius: 6px !important; }
html.r-soft .fx-prev { border-radius: 9px !important; }
html.r-soft .palts span { border-radius: 6px !important; }
html.r-soft .cx-stat { border-radius: 9px !important; }
html.r-soft .cx-in { border-radius: 7px !important; }
html.r-soft .cx-days { border-radius: 7px !important; }
html.r-soft .fl-days { border-radius: 6px !important; }
html.r-soft .fl-ate { border-radius: 7px !important; }
html.r-soft .fl-rs { border-radius: 8px !important; }
html.r-soft .fl-sum { border-radius: 8px !important; }
html.r-soft .fl-cam { border-radius: 10px !important; }
html.r-soft .fl-aim { border-radius: 6px !important; }
html.r-soft .fl-code input { border-radius: 7px !important; }
html.r-soft .nseg { border-radius: 7px !important; }
html.r-soft .nseg button { border-radius: 6px !important; }
html.r-soft .ht-list { border-radius: 8px !important; }
html.r-soft .shr-img { border-radius: 9px !important; }
html.r-soft .ph-img { border-radius: 9px !important; }
html.r-soft .ph-list { border-radius: 8px !important; }
html.r-soft .ph-g input { border-radius: 6px !important; }
html.r-soft .vn-rec { border-radius: 9px !important; }
html.r-soft .vn-x, html.r-soft .vn-send { border-radius: 6px !important; }
html.r-soft .sc-p span { border-radius: 6px !important; }
html.r-soft .pq-hero { border-radius: 12px !important; }
html.r-soft .pq-show { border-radius: 8px !important; }
html.r-soft .pq-today { border-radius: 9px !important; }
html.r-soft .pq-mac span { border-radius: 7px !important; }
html.r-soft .pq-facts div { border-radius: 8px !important; }
html.r-soft .pq-t > div.on { border-radius: 7px !important; }
html.r-soft .pq-entry { border-radius: 10px !important; }
html.r-soft .hb-i { border-radius: 8px !important; }
html.r-soft .wl-list li { border-radius: 7px !important; }
html.r-soft .wl-hc { border-radius: 11px !important; }
html.r-soft .wl-yn button, html.r-soft .wl-scale button { border-radius: 7px !important; }
html.r-soft .wl-q { border-radius: 8px !important; }
html.r-soft .wl-q textarea, html.r-soft .wl-kg input { border-radius: 7px !important; }
html.r-soft .wl-flag { border-radius: 7px !important; }
html.r-soft .wl-commit label { border-radius: 7px !important; }
html.r-soft .shr-th { border-radius: 7px !important; }
html.r-soft .shr-th button { border-radius: 5px !important; }
html.r-soft .shr-wrap canvas.shr-img { border-radius: 9px !important; }
html.r-soft .shr-tx input { border-radius: 7px !important; }
html.r-soft .shr-sel select { border-radius: 7px !important; }
html.r-soft .shr-cta { border-radius: 11px !important; }
html.r-soft .shr-cta-card { border-radius: 6px !important; }
html.r-soft .shr-cta-plus { border-radius: 7px !important; }
html.r-soft .shr-cta canvas { border-radius: 6px !important; }
html.r-soft .chc { border-radius: 10px !important; }
html.r-soft .stq-i { border-radius: 8px !important; }
html.r-soft .stq-i .stq-tip { border-radius: 6px !important; }
html.r-soft .chs input { border-radius: 7px !important; }
html.r-soft .chb-i { border-radius: 9px !important; }
html.r-soft .lvl-row { border-radius: 8px !important; }
html.r-soft .lvl-s { border-radius: 4px !important; }
html.r-soft .bdgpop-in { border-radius: 14px !important; }
html.r-soft .cy-f select { border-radius: 7px !important; }
html.r-soft .cyp-hero { border-radius: 12px !important; }
html.r-soft .cyp-stats > div { border-radius: 9px !important; }
html.r-soft .cyp-bars span { border-radius: 4px 4px 4px 4px !important; }
html.r-soft .cyp-list li { border-radius: 8px !important; }
html.r-soft .cyp-buy { border-radius: 11px !important; }
html.r-soft .cyw-d { border-radius: 9px !important; }
html.r-soft .cyi { border-radius: 12px !important; }
html.r-soft .cyp-logs { border-radius: 12px !important; }
html.r-soft .cyp-logs textarea { border-radius: 8px !important; }
html.r-soft .cyp .cy-nav .linkb { border-radius: 7px !important; }
html.r-soft .cyp-setup .cy-f select { border-radius: 8px !important; }
html.r-soft .cyfb textarea { border-radius: 8px !important; }
html.r-soft .cyfb-i { border-radius: 9px !important; }
html.r-soft .cyfb-r { border-radius: 6px !important; }
html.r-soft .mpq textarea { border-radius: 7px !important; }
html.r-soft .mpq-sg { border-radius: 8px !important; }
html.r-soft .cy-pbig { border-radius: 10px !important; }
html.r-soft .cy-estq { border-radius: 9px !important; }
html.r-soft .cyph-c { border-radius: 10px !important; }
html.r-soft .cy-mi { border-radius: 8px !important; }
html.r-soft .cyph-tabs { border-radius: 8px !important; }
html.r-soft .cyph-tab { border-radius: 6px !important; }
html.r-soft .cyph-card { border-radius: 9px !important; }
html.r-soft .cyst { border-radius: 9px !important; }
html.r-soft .cy-dates input { border-radius: 7px !important; }
html.r-soft .cy-ib i { border-radius: 5px !important; }
html.r-soft .cy-glance { border-radius: 9px !important; }
html.r-soft .rn-rc span { border-radius: 7px !important; }
html.r-soft .rn-p { border-radius: 8px !important; }
html.r-soft .rn-sign { border-radius: 8px !important; }
html.r-soft .lvl-prize { border-radius: 7px !important; }
html.r-soft .bodyask-in { border-radius: 13px !important; }
html.r-soft .bodyask-i input { border-radius: 7px !important; }
html.r-soft .rvx-card { border-radius: 11px !important; }
html.r-soft .rvx-hero { border-radius: 13px !important; }
html.r-soft .rvx-voice { border-radius: 11px !important; }
html.r-soft .rvx-speed { border-radius: 7px !important; }
html.r-soft .rvx-sec { border-radius: 11px !important; }
html.r-soft .rvx-tick { border-radius: 8px !important; }
html.r-soft .ck-open { border-radius: 8px !important; }
html.r-soft .bdg-bar { border-radius: 9px !important; }
html.r-soft .bdg-lv { border-radius: 9px !important; }
html.r-sharp .tile { border-radius: 4px !important; }
html.r-sharp .next { border-radius: 4px !important; }
html.r-sharp .week div { border-radius: 4px !important; }
html.r-sharp .bar { border-radius: 4px !important; }
html.r-sharp .bar i { border-radius: 4px !important; }
html.r-sharp .note { border-radius: 4px !important; }
html.r-sharp .win { border-radius: 4px !important; }
html.r-sharp .btn { border-radius: 4px !important; }
html.r-sharp .days div { border-radius: 4px !important; }
html.r-sharp .thumbs img { border-radius: 4px !important; }
html.r-sharp .pick img { border-radius: 4px !important; }
html.r-sharp .cmp-pick select { border-radius: 4px !important; }
html.r-sharp .side figure { border-radius: 4px !important; }
html.r-sharp .side img { border-radius: 4px !important; }
html.r-sharp .ov { border-radius: 4px !important; }
html.r-sharp .inst { border-radius: 4px !important; }
html.r-sharp .inst .top img { border-radius: 4px !important; }
html.r-sharp .meal { border-radius: 4px !important; }
html.r-sharp .mnote { border-radius: 4px !important; }
html.r-sharp .ov.adj::after { border-radius: 4px !important; }
html.r-sharp .toast { border-radius: 4px !important; }
html.r-sharp .crstage { border-radius: 4px !important; }
html.r-sharp .phase { border-radius: 4px !important; }
html.r-sharp .goal { border-radius: 4px !important; }
html.r-sharp .daychip { border-radius: 4px !important; }
html.r-sharp .bconfirm { border-radius: 4px !important; }
html.r-sharp .pslot { border-radius: 4px !important; }
html.r-sharp .pslot img { border-radius: 4px !important; }
html.r-sharp .stage { border-radius: 4px !important; }
html.r-sharp .side .stage { border-radius: 4px !important; }
html.r-sharp .pcell { border-radius: 4px !important; }
html.r-sharp .shprev { border-radius: 4px !important; }
html.r-sharp .shprev canvas { border-radius: 4px !important; }
html.r-sharp .pvbar { border-radius: 4px !important; }
html.r-sharp .mrnote { border-radius: 4px !important; }
html.r-sharp .goalrow input { border-radius: 4px !important; }
html.r-sharp .apdate { border-radius: 4px !important; }
html.r-sharp .apose { border-radius: 4px !important; }
html.r-sharp .apref, html.r-sharp .apnew { border-radius: 4px !important; }
html.r-sharp .duecard { border-radius: 4px !important; }
html.r-sharp .mtile { border-radius: 4px !important; }
html.r-sharp .stile { border-radius: 4px !important; }
html.r-sharp .cmsg { border-radius: 4px !important; }
html.r-sharp .chatin input { border-radius: 4px !important; }
html.r-sharp .alert { border-radius: 4px !important; }
html.r-sharp .wkc { border-radius: 4px !important; }
html.r-sharp .vframe { border-radius: 4px !important; }
html.r-sharp .s-card { border-radius: 4px !important; }
html.r-sharp .s-line { border-radius: 4px !important; }
html.r-sharp .s-stats div { border-radius: 4px !important; }
html.r-sharp .s-more { border-radius: 4px !important; }
html.r-sharp .s-more > summary { border-radius: 4px !important; }
html.r-sharp .wo-ex { border-radius: 4px !important; }
html.r-sharp .wo-r input { border-radius: 4px !important; }
html.r-sharp .wo-c { border-radius: 4px !important; }
html.r-sharp .wo-swap { border-radius: 4px !important; }
html.r-sharp .wo-alt { border-radius: 4px !important; }
html.r-sharp .wo-confirm { border-radius: 4px !important; }
html.r-sharp .s-days button { border-radius: 4px !important; }
html.r-sharp .s-pick button { border-radius: 4px !important; }
html.r-sharp .diff button { border-radius: 4px !important; }
html.r-sharp .wo-rev textarea { border-radius: 4px !important; }
html.r-sharp .wo-push { border-radius: 4px !important; }
html.r-sharp .wo-adj { border-radius: 4px !important; }
html.r-sharp .sm-tiles div { border-radius: 4px !important; }
html.r-sharp .sm-ex { border-radius: 4px !important; }
html.r-sharp .wstats div { border-radius: 4px !important; }
html.r-sharp .paybox { border-radius: 4px !important; }
html.r-sharp .sfres div { border-radius: 4px !important; }
html.r-sharp .bopt { border-radius: 4px !important; }
html.r-sharp .bopt .ic { border-radius: 4px !important; }
html.r-sharp .bcalh button { border-radius: 4px !important; }
html.r-sharp .bcd { border-radius: 4px !important; }
html.r-sharp .cq { border-radius: 4px !important; }
html.r-sharp .cin { border-radius: 4px !important; }
html.r-sharp .cscale button, html.r-sharp .cchoice button { border-radius: 4px !important; }
html.r-sharp .cq .yn button { border-radius: 4px !important; }
html.r-sharp .phchk { border-radius: 4px !important; }
html.r-sharp .chatf textarea { border-radius: 4px !important; }
html.r-sharp .chatbtn .dot { border-radius: 4px !important; }
html.r-sharp .imb { border-radius: 4px !important; }
html.r-sharp .imbar textarea { border-radius: 4px !important; }
html.r-sharp .ck-now { border-radius: 4px !important; }
html.r-sharp .ck-note { border-radius: 4px !important; }
html.v3.r-sharp .alert { border-radius: 4px !important; }
html.v3.r-sharp .un { border-radius: 4px !important; }
html.v3.r-sharp .s-pick button { border-radius: 4px !important; }
html.v3.r-sharp .mtile { border-radius: 4px !important; }
html.v3.r-sharp .wi3 { border-radius: 4px !important; }
html.v3.r-sharp .wi3-in { border-radius: 4px !important; }
html.v3.r-sharp .s-line { border-radius: 4px !important; }
html.v3.r-sharp .goal { border-radius: 4px !important; }
html.v3.r-sharp .optrow { border-radius: 4px !important; }
html.v3.r-sharp .optrow .chipb { border-radius: 4px !important; }
html.v3.r-sharp #shop .block:first-of-type { border-radius: 4px !important; }
html.v3.r-sharp .sgrid > * { border-radius: 4px !important; }
html.r-sharp .fx-seg { border-radius: 4px !important; }
html.r-sharp .fx-seg button { border-radius: 4px !important; }
html.r-sharp .fx-prev { border-radius: 4px !important; }
html.r-sharp .palts span { border-radius: 4px !important; }
html.r-sharp .cx-stat { border-radius: 4px !important; }
html.r-sharp .cx-in { border-radius: 4px !important; }
html.r-sharp .cx-days { border-radius: 4px !important; }
html.r-sharp .fl-days { border-radius: 4px !important; }
html.r-sharp .fl-ate { border-radius: 4px !important; }
html.r-sharp .fl-rs { border-radius: 4px !important; }
html.r-sharp .fl-sum { border-radius: 4px !important; }
html.r-sharp .fl-cam { border-radius: 4px !important; }
html.r-sharp .fl-aim { border-radius: 4px !important; }
html.r-sharp .fl-code input { border-radius: 4px !important; }
html.r-sharp .nseg { border-radius: 4px !important; }
html.r-sharp .nseg button { border-radius: 4px !important; }
html.r-sharp .ht-list { border-radius: 4px !important; }
html.r-sharp .shr-img { border-radius: 4px !important; }
html.r-sharp .ph-img { border-radius: 4px !important; }
html.r-sharp .ph-list { border-radius: 4px !important; }
html.r-sharp .ph-g input { border-radius: 4px !important; }
html.r-sharp .vn-rec { border-radius: 4px !important; }
html.r-sharp .vn-x, html.r-sharp .vn-send { border-radius: 4px !important; }
html.r-sharp .sc-p span { border-radius: 4px !important; }
html.r-sharp .pq-hero { border-radius: 4px !important; }
html.r-sharp .pq-show { border-radius: 4px !important; }
html.r-sharp .pq-today { border-radius: 4px !important; }
html.r-sharp .pq-mac span { border-radius: 4px !important; }
html.r-sharp .pq-facts div { border-radius: 4px !important; }
html.r-sharp .pq-t > div.on { border-radius: 4px !important; }
html.r-sharp .pq-entry { border-radius: 4px !important; }
html.r-sharp .hb-i { border-radius: 4px !important; }
html.r-sharp .wl-list li { border-radius: 4px !important; }
html.r-sharp .wl-hc { border-radius: 4px !important; }
html.r-sharp .wl-yn button, html.r-sharp .wl-scale button { border-radius: 4px !important; }
html.r-sharp .wl-q { border-radius: 4px !important; }
html.r-sharp .wl-q textarea, html.r-sharp .wl-kg input { border-radius: 4px !important; }
html.r-sharp .wl-flag { border-radius: 4px !important; }
html.r-sharp .wl-commit label { border-radius: 4px !important; }
html.r-sharp .shr-th { border-radius: 4px !important; }
html.r-sharp .shr-th button { border-radius: 4px !important; }
html.r-sharp .shr-wrap canvas.shr-img { border-radius: 4px !important; }
html.r-sharp .shr-tx input { border-radius: 4px !important; }
html.r-sharp .shr-sel select { border-radius: 4px !important; }
html.r-sharp .shr-cta { border-radius: 4px !important; }
html.r-sharp .shr-cta-card { border-radius: 4px !important; }
html.r-sharp .shr-cta-plus { border-radius: 4px !important; }
html.r-sharp .shr-cta canvas { border-radius: 4px !important; }
html.r-sharp .chc { border-radius: 4px !important; }
html.r-sharp .stq-i { border-radius: 4px !important; }
html.r-sharp .stq-i .stq-tip { border-radius: 4px !important; }
html.r-sharp .chs input { border-radius: 4px !important; }
html.r-sharp .chb-i { border-radius: 4px !important; }
html.r-sharp .lvl-row { border-radius: 4px !important; }
html.r-sharp .lvl-s { border-radius: 4px !important; }
html.r-sharp .bdgpop-in { border-radius: 4px !important; }
html.r-sharp .cy-f select { border-radius: 4px !important; }
html.r-sharp .cyp-hero { border-radius: 4px !important; }
html.r-sharp .cyp-stats > div { border-radius: 4px !important; }
html.r-sharp .cyp-bars span { border-radius: 4px 4px 3px 3px !important; }
html.r-sharp .cyp-list li { border-radius: 4px !important; }
html.r-sharp .cyp-buy { border-radius: 4px !important; }
html.r-sharp .cyw-d { border-radius: 4px !important; }
html.r-sharp .cyi { border-radius: 4px !important; }
html.r-sharp .cyp-logs { border-radius: 4px !important; }
html.r-sharp .cyp-logs textarea { border-radius: 4px !important; }
html.r-sharp .cyp .cy-nav .linkb { border-radius: 4px !important; }
html.r-sharp .cyp-setup .cy-f select { border-radius: 4px !important; }
html.r-sharp .cyfb textarea { border-radius: 4px !important; }
html.r-sharp .cyfb-i { border-radius: 4px !important; }
html.r-sharp .cyfb-r { border-radius: 4px !important; }
html.r-sharp .mpq textarea { border-radius: 4px !important; }
html.r-sharp .mpq-sg { border-radius: 4px !important; }
html.r-sharp .cy-pbig { border-radius: 4px !important; }
html.r-sharp .cy-estq { border-radius: 4px !important; }
html.r-sharp .cyph-c { border-radius: 4px !important; }
html.r-sharp .cy-mi { border-radius: 4px !important; }
html.r-sharp .cyph-tabs { border-radius: 4px !important; }
html.r-sharp .cyph-tab { border-radius: 4px !important; }
html.r-sharp .cyph-card { border-radius: 4px !important; }
html.r-sharp .cyst { border-radius: 4px !important; }
html.r-sharp .cy-dates input { border-radius: 4px !important; }
html.r-sharp .cy-ib i { border-radius: 4px !important; }
html.r-sharp .cy-glance { border-radius: 4px !important; }
html.r-sharp .rn-rc span { border-radius: 4px !important; }
html.r-sharp .rn-p { border-radius: 4px !important; }
html.r-sharp .rn-sign { border-radius: 4px !important; }
html.r-sharp .lvl-prize { border-radius: 4px !important; }
html.r-sharp .bodyask-in { border-radius: 4px !important; }
html.r-sharp .bodyask-i input { border-radius: 4px !important; }
html.r-sharp .rvx-card { border-radius: 4px !important; }
html.r-sharp .rvx-hero { border-radius: 4px !important; }
html.r-sharp .rvx-voice { border-radius: 4px !important; }
html.r-sharp .rvx-speed { border-radius: 4px !important; }
html.r-sharp .rvx-sec { border-radius: 4px !important; }
html.r-sharp .rvx-tick { border-radius: 4px !important; }
html.r-sharp .ck-open { border-radius: 4px !important; }
html.r-sharp .bdg-bar { border-radius: 4px !important; }
html.r-sharp .bdg-lv { border-radius: 4px !important; }
/* Accent too dark for black text: text on accent turns white */
html.look-darkacc :is(.btn.gold, .usepick.on, .vn-send, .imb.own .vn-p, .imsend, .pq-steps li.on .pq-num, .lvl-s.on, .pcell .badge, .pick .badge, .sc-p.on span, .wo-c.on, .wo-tickc, .tag.up, .item.on i) { color: #fff !important; }
html.look .alert.gold .ago { color: var(--gold) !important; } html.look.look-darkacc .alert.gold .ago { color: #fff !important; }
/* Exercise photos and steps (26 Oct 2026): start and finish photos that move between each other, then the steps */
.vph { background: #fff; aspect-ratio: 3 / 2; }
.vph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease; }
.vph img.b { opacity: 0; }
.vph.on img.b { opacity: 1; }
.vst { margin: 14px 0 4px; padding-left: 20px; line-height: 1.5; }
.vst li { margin: 6px 0; }
html.dk .vframe.vph { background-color: #fff !important; }
.wl-app { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.18); } /* save to phone, first welcome step (26 Oct 2026) */
/* Refer and offers (26 Oct 2026) */
.rf { display: grid; gap: 12px; }
.rf-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.rf-link input { min-width: 0; font: inherit; font-size: 14px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--tile); color: inherit; }
.rf-list { display: grid; }
.rf-li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.rf-li:first-child { border-top: 0; }
.rf-li span { display: grid; } .rf-li small { color: var(--soft); }
.rf .rn-h, .rf > p { margin: 0; }
/* Refer and offers, more engaging (26 Oct 2026) */
.rf-hero { display: grid; gap: 10px; padding: 22px 18px 18px; border-radius: 22px; background: #0d0d0c; color: #fff; }
.rf-k { font-weight: 600; font-size: 14px; color: #d8b955; }
.rf-big { margin: 0; font-family: var(--disp); font-size: 88px; line-height: .9; color: #d8b955; letter-spacing: .5px; }
.rf-sub { margin: 0; font-size: 16px; color: #e9e6df; }
.rf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.rf-tile { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 16px; border: 1.5px solid #2c2b28; background: #171715; color: #fff; font: inherit; cursor: pointer; text-align: center; }
.rf-tile b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.rf-tile.on { border-color: #d8b955; background: #221f15; }
.rf-ic { width: 46px; height: 46px; display: grid; place-items: center; color: #d8b955; }
.rf-ic svg { width: 40px; height: 40px; }
.rf-ic.ph img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 15%; }
.rf-what { margin: 0; font-size: 14px; color: #bdb8ad; min-height: 1.4em; }
.rf-track { display: grid; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid #2c2b28; font-size: 14px; color: #e9e6df; }
.rf-dots { display: flex; gap: 8px; }
.rf-dots i { flex: 1; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-style: normal; font-weight: 700; font-size: 13px; background: #222220; color: #77736b; }
.rf-dots i.on { background: #d8b955; color: #111; }
.rf-dots i:last-child::after { content: " ×2"; }
.rf-mine { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.rf-mine input { width: 20px; height: 20px; accent-color: var(--gold, #c9a94a); }
.rf-msg { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--tile); font-size: 14px; line-height: 1.45; }
.rf-share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rf-lt { display: grid; gap: 4px; min-width: 0; }
.rf-steps { display: flex; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--soft); }
.rf-steps li { padding: 3px 8px; border-radius: 999px; background: var(--tile); }
.rf-steps li.on { background: var(--gold-wash, #f6efd9); color: var(--gold-ink, #775c14); font-weight: 600; }
.rf-qr { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0,0,0,.6); padding: 20px; }
.rf-qr-in { width: min(100%, 380px); display: grid; justify-items: center; gap: 14px; padding: 24px 20px; border-radius: 24px; background: #fff; color: #111; text-align: center; }
.rf-qr-logo { width: 170px; }
.rf-qr-code { width: 100%; max-width: 300px; } .rf-qr-code svg { width: 100%; height: auto; display: block; }
.rf-qr-in p { margin: 0; font-size: 15px; }
.rn-ref { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rn-ref p { margin: 0; }

/* Strength: estimated 1-rep max on Progress (26 Oct 2026) */
.st-list { display: grid; background: var(--tile); border-radius: 18px; overflow: hidden; }
.st + .st { border-top: 1px solid var(--line); }
.st-row { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.st-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 12px; }
.st-n { min-width: 0; display: grid; gap: 2px; } .st-n b { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; } .st-n small { font-size: 12px; color: var(--soft); }
.st-sp { width: 100%; height: 44px; } .st-sp polyline { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .st-sp circle { fill: var(--gold); }
.st-pb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; } .st-pb b { font-size: 22px; line-height: 1.1; white-space: nowrap; } .st-pb b small { font-size: 13px; color: var(--soft); font-weight: 500; } .st-pb > small { font-size: 12px; font-weight: 700; color: var(--gold-ink); }
.st-v { display: grid; justify-items: end; line-height: 1.1; padding-left: 12px; border-left: 1px solid var(--line); } .st-v b { font-size: 16px; white-space: nowrap; } .st-v small { font-size: 11px; color: var(--soft); font-weight: 500; } .st-v > small { font-size: 11px; } .st-v em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--good); margin-top: 2px; white-space: nowrap; }
.st-more { display: grid; gap: 8px; margin-top: 10px; padding: 14px; border-radius: 16px; background: var(--tile); }
.st-all { justify-self: start; margin-top: 6px; }
.st-best { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; background: var(--gold-wash); border-radius: 12px; padding: 10px 12px; }
.st-best span { font-size: 13px; color: var(--gold-ink); font-weight: 600; } .st-best b { font-size: 18px; grid-row: span 2; align-self: center; } .st-best small { font-size: 12px; color: var(--soft); }
.st-pct { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } .st-pct div { background: var(--paper); border-radius: 10px; padding: 7px 2px; text-align: center; display: grid; gap: 1px; } .st-pct small { font-size: 11px; color: var(--soft); } .st-pct b { font-size: 14px; }
.st-hist div { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line); } .st-hist span:first-child { color: var(--soft); }
@media (max-width: 360px) { .st-pct { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Research for you (27 Oct 2026) */
.rs-card { display: grid; gap: 10px; width: 100%; text-align: left; padding: 18px; border: 0; border-radius: 18px; background: #111111; color: #ffffff; font: inherit; cursor: pointer; }
.rs-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.rs-top b { color: #e0c06a; } .rs-top small { color: #b5b5b5; font-size: 12px; }
.rs-t { font-family: var(--disp); font-size: 32px; line-height: .95; }
.rs-s { font-size: 14px; line-height: 1.45; color: #d6d6d6; }
.rs-go { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 18px; border-radius: 23px; background: var(--gold); color: #111111; font-weight: 700; }
.rs-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 24px; background: var(--tile); }
.rs-tabs button { height: 40px; border: 0; border-radius: 20px; background: transparent; color: var(--ink); font: 700 14px var(--body); cursor: pointer; }
.rs-tabs button.on { background: #111111; color: #ffffff; }
.rs-qa { display: grid; gap: 1px; border-radius: 16px; overflow: hidden; background: #2a2a2a; }
.rs-qa div { display: grid; gap: 6px; padding: 18px; background: #111111; }
.rs-qa b { font-family: var(--disp); font-weight: 400; font-size: 24px; line-height: 1.05; color: #e0c06a; }
.rs-qa p { margin: 0; font-size: 15px; line-height: 1.6; color: #ffffff; }
.rs-h { margin: 0; font-size: 20px; }
.rs-p { margin: 0; font-size: 15px; line-height: 1.6; }
.rs-n { font-size: 13px; line-height: 1.5; color: var(--soft); }
.rs-rec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rs-rec div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--tile); text-align: center; }
.rs-rec b { font-family: var(--disp); font-weight: 400; font-size: 30px; line-height: 1; }
.rs-rec span { font-size: 12px; color: var(--soft); }
.rs-rec div.on { background: #111111; } .rs-rec div.on b { color: #e0c06a; } .rs-rec div.on span { color: #d6d6d6; }
.rs-tbl { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 14px; line-height: 1.45; }
.rs-tbl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rs-tbl > div:last-child { border-bottom: 0; }
.rs-tbl small { display: block; color: var(--soft); font-size: 13px; font-weight: 400; }
.rs-tbl b.num { white-space: nowrap; text-align: right; }
.rs-bars { display: grid; gap: 10px; }
.rs-bars > div { display: grid; gap: 4px; }
.rs-bars > div > span { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.rs-bars > div > i { display: block; height: 12px; border-radius: 6px; background: var(--tile); }
.rs-bars > div > i > i { display: block; height: 100%; border-radius: 6px; background: #8f8b82; }
.rs-bars > div > i > i.b1 { background: #5e5a52; } .rs-bars > div > i > i.b2 { background: var(--gold); }
.rs-fx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rs-fx div { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 14px; background: var(--tile); }
.rs-fx b { font-family: var(--disp); font-weight: 400; font-size: 28px; line-height: 1; }
.rs-fx span { font-size: 13px; line-height: 1.4; color: var(--soft); }

/* This week's sessions as small tabs that all fit on screen, no sideways slider (28 Oct 2026, David) */
.s-pick { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; overflow: visible; padding-bottom: 0; }
.s-pick button, html.v3 .s-pick button { min-width: 0; padding: 7px 3px 8px; border-radius: 12px; text-align: center; gap: 1px; align-content: start; }
.s-pick button small { font-size: 10.5px; }
.s-pick button b { font-size: clamp(10px, 2.85vw, 12px); line-height: 1.2; letter-spacing: -0.1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: manual; }
html.v3 .s-pick button.sel { border-width: 2px; }
/* Add an exercise and log cardio in a workout (28 Oct 2026) */
.wo-more { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wo-more .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.wo-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wo-addtag { display: inline-block; vertical-align: 2px; margin-left: 4px; background: var(--good-wash, #f3ecd9); color: var(--gold-ink, #8a6d1f); border-radius: 8px; padding: 2px 7px; font-size: 11px; font-weight: 700; }
.wo-addp { gap: 10px; }
.wo-addp .wo-swh { color: var(--gold-ink); font-weight: 700; font-size: 12px; letter-spacing: .04em; margin-top: 4px; }
.wo-addr { display: grid; gap: 8px; }
.wo-addr > .linkb { justify-self: start; }
#wo .cx-in { font-size: 16px; }
.wo-cxl { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.wo-cxl > span { display: grid; gap: 2px; min-width: 0; }
.wo-cxl small { color: var(--soft); font-size: 12px; }
.wo-cxl b { font-size: 15px; }
html.v3 #wo:not(.day) .wo-addtag { background: #2a2414; color: var(--gold); }
html.v3 #wo:not(.day) .wo-more .btn.alt { background: #111; color: #fff; border-color: #3a3a3a; }
.wo-addp, .wo-ex { scroll-margin-top: 80px; }
.wo-tl { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.wo-ex > .wo-rm { justify-self: start; }
.wo-setb { display: flex; gap: 18px; padding-top: 2px; }
/* Exercise history sheet (28 Oct 2026) */
#exh { z-index: 31; }
.exh-ch { display: grid; gap: 6px; } .exh-ch svg { width: 100%; height: 80px; overflow: visible; }
.exh-list { display: grid; }
.exh-r { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.exh-d { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .exh-d small { color: var(--soft); font-size: 12px; text-align: right; min-width: 0; }
.exh-s { display: flex; flex-wrap: wrap; gap: 6px; } .exh-s span { font-variant-numeric: tabular-nums; font-size: 14px; padding: 3px 9px; border-radius: 999px; background: var(--tile); }
.exh-b { font-size: 12px; color: var(--soft); } .exh-b.pr { color: var(--gold-ink); font-weight: 600; }
html.v3 #exh.wonight { background: #000; color: #fff; --paper: #000; --ink: #fff; --tile: #16181b; --line: #26282c; --soft: #a9adb2; --gold-ink: var(--gold); }
.trio.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .trio.four b { font-size: 15px; }
/* Past check-ins open in full (28 Oct 2026) */
.ck-row { display: grid; gap: 6px; width: 100%; padding: 11px 0; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: inherit; font: inherit; cursor: pointer; }
.ck-row .chev { margin-left: 6px; color: var(--faint); }
.ck-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--tile); margin-bottom: 8px; }
.ck-seg button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13.5px; color: var(--soft); }
.ck-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); font-weight: 600; }
.ckv-sec { display: grid; gap: 8px; }
.ckv-ph { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ckv-ph button { display: grid; gap: 4px; padding: 0; border: 0; background: none; text-align: left; color: var(--soft); font: inherit; font-size: 11.5px; }
.ckv-ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--tile); }
.ckv-big { width: 100%; border-radius: 12px; }
.ckv-vid { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.ckv-a dd { white-space: pre-wrap; }
.rn-p small.rn-note { color: var(--gold-ink); font-weight: 600; }

/* Saves waiting for signal (28 Oct 2026): kept on the phone, sent by itself; a tap tries now */
#oqpill { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 11; max-width: calc(100vw - 32px); min-height: 36px; padding: 0 14px; border: 1px solid var(--gold); border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 13px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.12); }

/* Sync with Kahunas (29 Oct 2026): David's own app, beside Back to HQ */
.selfrow { display: flex; gap: 8px; align-items: stretch; margin: 0 0 10px; } .selfrow .selfbar { flex: 1; margin: 0; }
.ksync { flex: none; width: 42px; border: 0; border-radius: 12px; background: var(--ink); color: var(--gold); display: grid; place-items: center; cursor: pointer; }
.ksync.on svg { animation: kspin 1s linear infinite; } @keyframes kspin { to { transform: rotate(360deg); } }
html.dk .ksync { background-color: var(--raise) !important; }
@media (prefers-reduced-motion: reduce) { .ksync.on svg { animation: none; opacity: .6; } }

/* Optional sessions (29 Oct 2026) */
.x-items { margin: 0; padding: 4px 18px 14px 36px; display: grid; gap: 6px; font-size: 14px; }
.s-more > summary small { font-weight: 400; color: var(--soft); margin-left: auto; padding-right: 10px; }
.x-items li { display: grid; gap: 2px; }
.x-items li small { color: var(--soft); font-size: 13px; }
.x-go { margin: 0 18px 16px; }
/* Cardio and timed holds in the workout screen (29 Oct 2026) */
.wo-cx { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wo-cx label { display: grid; gap: 4px; }
.wo-cx small { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--soft); }
.wo-cx input { width: 100%; box-sizing: border-box; font: 600 16px/1 var(--body); text-align: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.wo-hbtn { height: 40px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: 600 13px var(--body); cursor: pointer; font-variant-numeric: tabular-nums; }
.wo-hbtn.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Paused account (30 Oct 2026, David): the opening screen's moving logo (keyframes in boot.css), why they see it, and the way back */
.pz { min-height: calc(100vh - 120px); display: grid; align-content: center; justify-items: center; gap: 16px; text-align: center; padding: 24px 8px; }
.pz .b-brand { display: grid; justify-items: center; gap: 16px; margin-bottom: 8px; }
.pz .b-mark { width: min(150px, 40vw); height: auto; overflow: visible; fill: currentColor; }
.pz .b-mark path { transform-box: fill-box; transform-origin: center; }
.pz .b-k { animation: bIn .5s cubic-bezier(.2,.8,.2,1) both; }
.pz .b-arm { animation: bIn .5s .12s cubic-bezier(.2,.8,.2,1) both; }
.pz .b-leg { animation: bIn .5s .22s cubic-bezier(.2,.8,.2,1) both; }
.pz .b-head { animation: bPop .45s .36s cubic-bezier(.3,1.6,.5,1) both; }
.pz .b-s1 { animation: bRun 1.1s .5s cubic-bezier(.4,0,.2,1) infinite; }
.pz .b-s2 { animation: bRun 1.1s .62s cubic-bezier(.4,0,.2,1) infinite; }
.pz .b-word { width: min(200px, 55vw); height: auto; }
.pz .b-logo { max-width: min(200px, 56vw); max-height: 90px; object-fit: contain; }
.pz .b-name { font: 400 40px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .02em; }
.pz-b { display: grid; justify-items: center; gap: 16px; }
.pz p { max-width: 340px; margin: 0; }
.pz .btn { min-width: 240px; }
@media (prefers-reduced-motion: reduce) { .pz .b-mark path { animation: none !important; } }

.fl-tabs { display: flex; gap: 6px; }
.rest-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rest-t { display: grid; gap: 2px; text-align: left; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 14px; padding: 12px 14px; font: inherit; cursor: pointer; }
.rest-t b { font-size: 14.5px; font-weight: 600; }
.rest-t small { color: var(--soft); font-size: 12.5px; }
.fl-results, .rest-g { min-width: 0; max-width: 100%; }
.rest-t { min-width: 0; overflow: hidden; }
.rest-t b, .rest-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rest-t { display: flex; align-items: center; gap: 10px; }
.rest-t > span:last-child { display: grid; gap: 2px; min-width: 0; text-align: left; }
.rl { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); flex: none; }
.rl.sm { width: 30px; height: 30px; border-radius: 8px; }
.rl.lg { width: 48px; height: 48px; border-radius: 12px; }
.rl-i { display: grid; place-items: center; font: 700 13px var(--body); color: var(--soft); background: var(--tile); }
.rest-h { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.fl-r > .rl { margin: 0; }
.fl-r > span.rl, .fl-r > img.rl { flex: none; width: 30px; }
.fl-r > .rl + span { flex: 1; min-width: 0; }
/* Skinfolds with a PT session (31 Oct 2026): the opt-in on a PT booking, and the due card's two choices */
.skadd { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; text-align: left; background: var(--tile); border: 1px solid var(--gold); border-radius: 16px; padding: 12px 14px; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.skadd .box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--gold); display: grid; place-items: center; font-weight: 700; color: var(--ink); }
.skadd[aria-pressed="true"] .box { background: var(--gold); }
.skadd b { display: block; font-size: 15px; } .skadd small { display: block; font-size: 13px; color: var(--soft); margin-top: 2px; }
.duecard:has(.btns) { grid-template-columns: minmax(0, 1fr); }
/* Best times for skinfolds with PT (31 Oct 2026): no one else's session gets pushed */
.chipb.best { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.bcd.best { position: relative; } .bcd.best::after { content: ""; position: absolute; bottom: 5px; left: 50%; margin-left: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.bcal-key { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; } .bdot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; }
/* Skinfolds: three ways when due (31 Oct 2026) */
.skopts { display: grid; gap: 8px; }
.skopts .skadd { border-color: transparent; } .skopts .skadd[aria-pressed="true"] { border-color: var(--gold); }