/* ============================================================
   FLO IVORY — master cream & gold theme (2026-10-27)
   Loaded LAST on every page, after site.css / portal.css.
   Ivory ground, gold for accents and actions, deep ink for type,
   one "night" tone for the few contrast bands. Program colours
   (Comply OD green, Cycle rose, Legacy burgundy) become accents.
   Remove this file's <link> to return to the previous dark look.
   ============================================================ */
:root{
  --ivory:#F7F1E6;      /* page ground */
  --parchment:#EFE6D5;  /* alternate band */
  --paper:#FFFCF6;      /* raised cards */
  --gold:#C9A45C;       /* decorative gold: rules, fills, map lines */
  --gold-ink:#8A6526;   /* gold that passes contrast as text / button fill */
  --ink:#1E1A13;
  --night:#17140F;      /* contrast bands only */
  --night-2:#231E16;

  --deep:var(--parchment);
  --bg:var(--ivory);
  --surface:var(--paper);
  --bronze:var(--gold-ink);
  --bronze-2:#6F5120;
  --cream:var(--ink);                       /* the old "primary text" token */
  --ink-dim:#5E574B;
  --ink-faint:#8A8275;
  --line:rgba(138,101,38,.22);
  --line-soft:rgba(138,101,38,.12);
  --shadow:0 1px 2px rgba(60,45,20,.06),0 8px 24px -12px rgba(60,45,20,.18);
}
html{background:var(--ivory)}
body{background:var(--ivory);color:var(--ink)}
::selection{background:rgba(201,164,92,.35)}

/* header: frosted ivory. The top inset stays dark so an installed iPhone app keeps a readable clock. */
header.bar{
  background:
    linear-gradient(var(--night),var(--night)) top/100% env(safe-area-inset-top,0px) no-repeat,
    rgba(247,241,230,.86);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--line);
}
nav.links a{color:var(--ink-dim)}
nav.links a:hover{color:var(--ink);background:rgba(138,101,38,.06)}
nav.links a[aria-current="page"]{color:var(--gold-ink);border-bottom-color:var(--gold)}
.brand{color:var(--ink)}
.brand span{color:var(--gold-ink)}

/* buttons: gold is the action, ink is the quiet alternative */
.btn-solid{background:var(--gold-ink);border-color:var(--gold-ink);color:var(--paper);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 18px -8px rgba(138,101,38,.55)}
.btn-solid:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-ghost{color:var(--ink);border-color:rgba(30,26,19,.22)}
.btn-ghost:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.btn-text{color:var(--ink)}
.marker{color:var(--gold-ink)}
.marker::before{background:var(--gold)}
.h-eyebrow{color:var(--gold-ink)}
.accent{color:var(--gold-ink)}

/* ---------- homepage ---------- */
.hero{background:
  radial-gradient(90% 70% at 85% 0%, rgba(201,164,92,.22), transparent 60%),
  radial-gradient(70% 60% at 0% 100%, rgba(201,164,92,.10), transparent 60%),
  linear-gradient(180deg,#FBF6EC,var(--ivory) 80%)}
.hero h1{color:var(--ink)}
.portrait{border-color:var(--line);box-shadow:0 30px 60px -30px rgba(60,45,20,.45)}
.portrait::after{background:linear-gradient(180deg,transparent 65%,rgba(30,26,19,.28) 100%)}
.portrait img{filter:saturate(.9) contrast(1.02)}
.coords{border-top-color:var(--line)}
.terrain{--terrain:#B58E45;--terrain-ink:1.35}
@media (max-width:860px){ .hero .terrain{--terrain-ink:1.05} }
.auth-wrap .terrain{--terrain-ink:1.15}

.picker,.how,.latest{background:var(--ivory)}
.how-steps,.how-steps li{background:var(--paper)}
.how-steps{background:var(--line);border-color:var(--line);box-shadow:var(--shadow)}
.how-n{color:var(--gold-ink)}

/* program cards keep their locked identities: Comply black + OD green, Cycle cream + rose, Legacy burgundy + gold */
.pick{box-shadow:var(--shadow);border-radius:2px}
.pick:hover{box-shadow:0 2px 4px rgba(60,45,20,.08),0 22px 40px -18px rgba(60,45,20,.35)}
.pick-comply{background:#0E0E0E;border-color:#0E0E0E;color:#FFFFFF}
.pick-comply .pick-k,.pick-comply .pick-go{color:#8FB06A}
.pick-comply .pick-d{color:#A8A8A8}
.pick-cycle{background:#F8F1EA;border-color:#E8C3CC;color:#2D2520}
.pick-cycle .pick-k,.pick-cycle .pick-go{color:#A8536A}
.pick-cycle .pick-d{color:#6B5D54}
.pick-legacy{background:#5C1A2B;border-color:#5C1A2B;color:#F4EAD4}
.pick-legacy .pick-k,.pick-legacy .pick-go{color:#D9B878}
.pick-legacy .pick-d{color:#E8D4A8}

.record,.sec-light{background:var(--parchment);color:var(--ink)}
.sec-light h1,.sec-light h2,.sec-light h3{color:var(--ink)}
.sec-light p,.sec-light .entry p,.sec-light .phase p{color:var(--ink-dim)}
.entry .thumb::after{background:linear-gradient(180deg,transparent 55%,rgba(30,26,19,.25))}
.entry .thumb img{filter:saturate(.9) contrast(1.02)}

.sec-bordeaux,.system{background:var(--ivory)}
.sec-bordeaux p{color:var(--ink-dim)}
.sec-bordeaux .marker,.sec-bordeaux .phase h3 small{color:var(--gold-ink)}
.sec-bordeaux .phase,.phase{border-color:var(--line)}
.sec-bordeaux .phase .no,.phase .no{color:var(--gold)}
.phase:hover .no{color:var(--gold-ink)}

/* the one dark moment mid-page: the numbers */
.sec-warm{background:var(--parchment)}
.proof{background:var(--night);color:#F3EBDC}
.proof .stats{background:rgba(201,164,92,.22);border-color:rgba(201,164,92,.28)}
.proof .stat{background:var(--night)}
.proof .stat .n{color:#D9B878}
.proof .stat .l{color:rgba(243,235,220,.66)}
.proof .marker{color:#D9B878}.proof .marker::before{background:#D9B878}

.appshow{background:var(--parchment);border-top-color:var(--line)}
.appshow-list li{border-top-color:var(--line)}
/* phone mock now shows the ivory app */
.phone{border-color:#1E1A13;background:var(--ivory);box-shadow:0 40px 70px -30px rgba(30,26,19,.55)}
.ph-screen{color:var(--ink)}
.ph-card{background:var(--paper);border-color:var(--line)}
.ph-week i{border-color:rgba(138,101,38,.35)}
.ph-week i.d{background:var(--gold);border-color:var(--gold)}
.ph-week i.t{border-color:var(--gold-ink)}
.ph-row{border-top-color:var(--line)}
.ph-chips span{border-color:var(--line)}
.ph-chips span.on,.ph-btn{background:var(--gold-ink);border-color:var(--gold-ink);color:var(--paper)}
.ph-tabs{background:var(--paper);border-top-color:var(--line)}

.teaser,.sec-rose{background:var(--ivory)}
.teaser-inner,.sec-rose .teaser-inner{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow)}
.teaser .num-demo,.sec-rose .num-demo{background:var(--parchment);border-color:var(--line)}
.sec-rose .num-demo .k,.sec-rose .accent,.sec-rose .marker{color:var(--gold-ink)}
.sec-rose .marker::before{background:var(--gold)}
.sec-rose .num-demo .v{color:var(--ink)}
.sec-rose .btn-solid{background:var(--gold-ink);border-color:var(--gold-ink);color:var(--paper)}
.sec-rose .btn-solid:hover{background:var(--ink);border-color:var(--ink)}
.teaser-photo{border-color:var(--line)}

.track,.sec-light .track{background:var(--paper);border-color:var(--line)}
.track.her,.sec-light .track.her{background:#F8F1EA}
.track.legacy,.sec-light .track.legacy{background:#F4EAD4}
.arch .a1{background:#0E0E0E}.arch .a2{background:#F8F1EA}.arch .a3{background:#5C1A2B}
.arch .a2 .t{color:#A8536A}.arch .a2 .d{color:#6B5D54}
.badge-wrap img,.arch img,.hero-badges img{filter:drop-shadow(0 6px 14px rgba(60,45,20,.25))}

.roomstrip,.roomgrid figure{background:var(--parchment)}
.roomgrid{background:var(--line)}
.legwrap{background:#5C1A2B}

/* closing band: photo under warm ink */
.band::after{background:linear-gradient(180deg,rgba(23,20,15,.82),rgba(23,20,15,.66)),radial-gradient(90% 140% at 15% 0%, rgba(201,164,92,.22), transparent 60%)}
.band{color:#F3EBDC}
.band h2{color:#FBF6EC}
.band p{color:rgba(243,235,220,.78)}
.band .marker{color:#D9B878}.band .marker::before{background:#D9B878}
.band .btn-ghost{color:#F3EBDC;border-color:rgba(243,235,220,.4)}
.band .btn-ghost:hover{color:#D9B878;border-color:#D9B878}

.versebar,.sec-light .versebar{background:var(--parchment);border-color:var(--line)}
.versebar .v-text{color:var(--ink)}
footer{background:var(--parchment);border-top-color:var(--line)}
.pagebanner{background:var(--parchment)}
.posters figure{background:var(--paper)}
.posters figcaption{background:var(--paper);color:var(--ink-dim)}

.latest-frame{border-color:var(--line);box-shadow:var(--shadow);background:#1E1A13}
.latest-sound{background:rgba(23,20,15,.72);color:#F3EBDC}

/* ---------- forms (calculator, apply, app) ---------- */
.intro{background:linear-gradient(180deg,var(--parchment),var(--ivory))}
.panel{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow)}
input[type=number],input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],select,textarea{background:var(--paper);color:var(--ink);border-color:rgba(30,26,19,.18)}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
select option{background:var(--paper);color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--gold-ink);color:var(--paper)}
.readout,.cell{background:var(--paper)}
.macrobar .c{background:rgba(138,101,38,.18)}
.note{background:rgba(201,164,92,.10)}

/* ============================================================
   APP — every program on the ivory ground, program colour as accent
   ============================================================ */
body[data-program]{
  --bg:var(--ivory);--deep:var(--parchment);--surface:var(--paper);
  --cream:var(--ink);--ink:#1E1A13;--ink-dim:#5E574B;
  --line:rgba(138,101,38,.22);
  background:var(--ivory);color:var(--ink);
}
body[data-program="compliance"]{--prog:#4E6B34;--prog-soft:rgba(78,107,52,.12);--bronze:var(--gold-ink);--bronze-2:#4E6B34;--od:#3C5629;--od-bright:#4E6B34}
body[data-program="cycle"]{--prog:#A8536A;--prog-soft:rgba(168,83,106,.12);--bg:#F8F1EA;--bronze:#A8536A;--bronze-2:#A8536A}
body[data-program="legacy"]{--prog:#6E2234;--prog-soft:rgba(110,34,52,.10);--bg:#F6EEDF;--bronze:var(--gold-ink);--bronze-2:#6E2234}
body[data-program="cycle"],body[data-program="legacy"]{background:var(--bg)}

/* app header + tab bar: frosted ivory for every program */
body[data-program] header.bar{
  background:linear-gradient(var(--night),var(--night)) top/100% env(safe-area-inset-top,0px) no-repeat,rgba(247,241,230,.88);
  border-bottom-color:var(--line)}
body[data-program] header.bar a,body[data-program] .brand{color:var(--ink)}
body[data-program] header.bar .tab-home svg{stroke:currentColor}
body[data-program] .brand span{color:var(--gold-ink)}
.tabbar{background:rgba(255,252,246,.92) !important;-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-top:1px solid var(--line) !important}
.tabbar a{color:var(--ink-faint) !important}
.tabbar a[aria-current="page"]{color:var(--prog,var(--gold-ink)) !important}

/* headings: ink, program typefaces stay */
body[data-program] h1,body[data-program] h2,body[data-program] .ex-name{color:var(--ink)}
body[data-program="legacy"] h1,body[data-program="legacy"] h2,body[data-program="legacy"] .ex-name{color:#5C1A2B}
body[data-program] .progsig,body[data-program] .blocklabel,body[data-program] .marker,body[data-program] .ex-target{color:var(--gold-ink)}
body[data-program="cycle"] .progsig,body[data-program="cycle"] .blocklabel,body[data-program="cycle"] .marker,body[data-program="cycle"] .ex-target{color:#A8536A}

/* actions: gold everywhere; the program colour marks progress and choices */
body[data-program] .btn-solid{background:var(--gold-ink);border-color:var(--gold-ink);color:var(--paper);font-weight:500}
body[data-program] .btn-solid:hover{background:var(--ink);border-color:var(--ink)}
body[data-program="cycle"] .btn-solid{background:#A8536A;border-color:#A8536A}
body[data-program] .btn-ghost{color:var(--ink);border-color:rgba(30,26,19,.2)}
body[data-program] .daypick button{border-color:var(--line);color:var(--ink-dim)}
body[data-program] .daypick button[aria-pressed="true"]{background:var(--prog);border-color:var(--prog);color:#fff}
body[data-program] .chk{border-color:rgba(30,26,19,.25)}
body[data-program] .chk[aria-pressed="true"]{background:var(--prog);border-color:var(--prog)}
body[data-program] .rx{background:var(--paper);border-color:var(--line)}
body[data-program] .rx b{color:var(--prog)}
body[data-program] .ex,body[data-program] .finish,body[data-program] .h-card{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow)}
body[data-program] .set-row input{background:var(--ivory);border-color:rgba(30,26,19,.16);color:var(--ink)}
body[data-program] .noimg{background:var(--parchment);color:var(--ink-faint)}
body[data-program] .done{background:var(--prog-soft);border-color:var(--prog)}
body[data-program] .h-name,body[data-program] .h-day{color:var(--ink)}
body[data-program] .verse *{color:var(--ink-dim)}

/* cards and panels across the app */
.c-panel{background:var(--paper);box-shadow:var(--shadow)}
.mi-card,.ph-consent,.ph-add,.au-card,.sh-box,.push-card{background:var(--paper);box-shadow:var(--shadow)}
.whopcard{background:linear-gradient(120deg,rgba(201,164,92,.16),transparent)}
.lightbox{background:rgba(23,20,15,.92)}
.modal{background:rgba(23,20,15,.6)}

/* messages */
.wa{background:var(--paper);box-shadow:var(--shadow)}
.wa-side{background:var(--paper)}
.wa-head{background:rgba(247,241,230,.9)}
.chat-fill .chat-thread{background-color:var(--ivory);background-image:radial-gradient(circle at 1px 1px, rgba(138,101,38,.12) 1px, transparent 0)}
.chat-msg.me .chat-bubble{background:#F1E3C4;color:var(--ink)}
.chat-msg.them .chat-bubble{background:var(--paper);color:var(--ink);box-shadow:0 1px .5px rgba(60,45,20,.16)}
body[data-program="cycle"] .chat-msg.me .chat-bubble{background:#F3DCE2;color:#2D2520}
.chat-send,.wa-badge,.wa-cam,.push-on{background:var(--gold-ink);color:var(--paper)}
body[data-program="cycle"] .chat-send,body[data-program="cycle"] .wa-badge,body[data-program="cycle"] .wa-cam,body[data-program="cycle"] .push-on{background:#A8536A;color:#fff}
.chat-tick.read{color:#2B7BD9}
.chat-day span{background:var(--paper)}
.wa-row:hover,.wa-row.active{background:rgba(201,164,92,.10)}

/* builder */
.b-week.on{color:var(--ink);background:rgba(201,164,92,.16)}

@media (prefers-reduced-motion:reduce){ .btn-solid{box-shadow:none} }

/* ---------- Today: "This week" panel ---------- */
.tt-dash{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;margin:14px 0 16px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.td-ring{position:relative;width:92px;height:92px;grid-row:1;justify-self:center}
.td-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.td-track{fill:none;stroke:rgba(138,101,38,.16);stroke-width:6}
.td-fill{fill:none;stroke:var(--prog,var(--gold-ink));stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.td-ring-n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.td-ring-n b{font:600 28px/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.td-ring-n small{font-size:11.5px;color:var(--ink-dim);margin-top:3px}
.td-stats{display:flex;flex-direction:column;gap:12px;min-width:0}
.td-stat{display:flex;align-items:baseline;gap:10px;min-width:0}
.td-stat b{font:600 24px/1 var(--font-display);color:var(--ink);min-width:2.4ch;font-variant-numeric:tabular-nums}
.td-stat span{font-size:13.5px;color:var(--ink-dim);line-height:1.3}
.td-cap{grid-column:1;font-size:11.5px;color:var(--ink-dim);text-align:center;white-space:nowrap;justify-self:center}
@media (prefers-reduced-motion:reduce){ .td-fill{transition:none} }

/* ---------- homepage: the "how it works" rule draws in as the steps arrive ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .how-steps{position:relative}
    .how-steps::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--gold);transform-origin:left;transform:scaleX(0);
      animation:flo-rule linear both;animation-timeline:view();animation-range:entry 10% cover 45%;z-index:1}
    @keyframes flo-rule{to{transform:scaleX(1)}}
    .phase .no{animation:flo-num linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    @keyframes flo-num{from{opacity:.15;transform:translateY(10px)}to{opacity:1;transform:none}}
  }
}

body[data-program] .wk-day.wk-done .wk-dot{background:var(--prog);border-color:var(--prog);color:#fff}
body[data-program] .wk-day.wk-today .wk-dot{border-color:var(--prog)}
#autoPanel,#resultsPanel{padding:0 22px 22px}
#autoPanel>.c-panel-head,#resultsPanel>.c-panel-head{margin:0 -22px 16px}
@media (max-width:520px){ #autoPanel,#resultsPanel{padding:0 14px 16px} #autoPanel>.c-panel-head,#resultsPanel>.c-panel-head{margin:0 -14px 14px} }
.store .t1,.store .t2{display:block}

/* ============================================================
   COMPLY stays dark (2026-10-27): locked palette
   near-black #0E0E0E, OD green #5A7C40 for actions, sage #7A8C5E for
   accent text, gray #A8A8A8 sub-copy, white headlines.
   Clients only: the coach's own screens stay ivory.
   ============================================================ */
body[data-program="compliance"]:not(.is-coach){
  --ivory:#0E0E0E;--parchment:#121212;--paper:#161616;
  --gold:#7A8C5E;--gold-ink:#5A7C40;
  --bg:#0E0E0E;--deep:#090909;--surface:#161616;
  --ink:#FFFFFF;--cream:#FFFFFF;--ink-dim:#A8A8A8;--ink-faint:#707070;
  --line:rgba(122,140,94,.26);--line-soft:rgba(122,140,94,.13);
  --bronze:#7A8C5E;--bronze-2:#7A8C5E;--prog:#5A7C40;--prog-soft:rgba(90,124,64,.16);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset;
  background:#0E0E0E;color:#FFFFFF;
}
html:has(body[data-program="compliance"]:not(.is-coach)){background:#0E0E0E}
body[data-program="compliance"]:not(.is-coach) header.bar{
  background:linear-gradient(#000,#000) top/100% env(safe-area-inset-top,0px) no-repeat,rgba(14,14,14,.9);border-bottom-color:rgba(122,140,94,.22)}
body[data-program="compliance"]:not(.is-coach) header.bar a,
body[data-program="compliance"]:not(.is-coach) .brand{color:#FFFFFF}
body[data-program="compliance"]:not(.is-coach) .brand span,
body[data-program="compliance"]:not(.is-coach) .progsig,
body[data-program="compliance"]:not(.is-coach) .blocklabel,
body[data-program="compliance"]:not(.is-coach) .marker,
body[data-program="compliance"]:not(.is-coach) .ex-target,
body[data-program="compliance"]:not(.is-coach) .tt-note-h,
body[data-program="compliance"]:not(.is-coach) .tt-reply,
body[data-program="compliance"]:not(.is-coach) a.mi-link,
body[data-program="compliance"]:not(.is-coach) .rx b{color:#7A8C5E}
body[data-program="compliance"]:not(.is-coach) .tabbar{background:rgba(14,14,14,.94) !important;border-top-color:rgba(122,140,94,.22) !important}
body[data-program="compliance"]:not(.is-coach) .tabbar a{color:#8A8A8A !important}
body[data-program="compliance"]:not(.is-coach) .tabbar a[aria-current="page"]{color:#9DB57E !important}
/* actions: OD green with white type */
body[data-program="compliance"]:not(.is-coach) .btn-solid,
body[data-program="compliance"]:not(.is-coach) .chat-send,
body[data-program="compliance"]:not(.is-coach) .wa-badge,
body[data-program="compliance"]:not(.is-coach) .wa-cam,
body[data-program="compliance"]:not(.is-coach) .push-on,
body[data-program="compliance"]:not(.is-coach) .ck-chip[aria-pressed="true"],
body[data-program="compliance"]:not(.is-coach) .ph-poses button[aria-checked="true"],
body[data-program="compliance"]:not(.is-coach) .ob-next,
body[data-program="compliance"]:not(.is-coach) .ob-big{background:#5A7C40;border-color:#5A7C40;color:#FFFFFF;box-shadow:none}
body[data-program="compliance"]:not(.is-coach) .btn-solid:hover{background:#6B8F4D;border-color:#6B8F4D}
body[data-program="compliance"]:not(.is-coach) .btn-ghost{color:#FFFFFF;border-color:rgba(255,255,255,.22)}
body[data-program="compliance"]:not(.is-coach) .wk-day.wk-done .wk-dot{background:#5A7C40;border-color:#5A7C40;color:#fff}
body[data-program="compliance"]:not(.is-coach) .wk-day.wk-today .wk-dot{border-color:#7A8C5E}
/* cards */
body[data-program="compliance"]:not(.is-coach) .tt-dash,
body[data-program="compliance"]:not(.is-coach) .tt-note,
body[data-program="compliance"]:not(.is-coach) .mi-card,
body[data-program="compliance"]:not(.is-coach) .ph-consent,
body[data-program="compliance"]:not(.is-coach) .ph-add,
body[data-program="compliance"]:not(.is-coach) .push-card,
body[data-program="compliance"]:not(.is-coach) .ex,
body[data-program="compliance"]:not(.is-coach) .finish{background:#161616;border-color:rgba(122,140,94,.24);box-shadow:none}
body[data-program="compliance"]:not(.is-coach) .td-track{stroke:rgba(122,140,94,.18)}
body[data-program="compliance"]:not(.is-coach) .td-ring-n b,
body[data-program="compliance"]:not(.is-coach) .td-stat b{color:#FFFFFF}
/* messages */
body[data-program="compliance"]:not(.is-coach) .wa{background:#161616;box-shadow:none}
body[data-program="compliance"]:not(.is-coach) .wa-head{background:rgba(22,22,22,.94)}
body[data-program="compliance"]:not(.is-coach) .chat-fill .chat-thread{background-color:#0E0E0E;background-image:radial-gradient(circle at 1px 1px, rgba(122,140,94,.14) 1px, transparent 0)}
body[data-program="compliance"]:not(.is-coach) .chat-msg.me .chat-bubble{background:#2C3D1F;color:#FFFFFF}
body[data-program="compliance"]:not(.is-coach) .chat-msg.them .chat-bubble{background:#1C1C1C;color:#FFFFFF}
body[data-program="compliance"]:not(.is-coach) .chat-tick.read{color:#6FB1FF}
body[data-program="compliance"]:not(.is-coach) .chat-day span{background:#161616}

/* ============================================================
   SESSION MODE (2026-10-27): one-tap logging
   ============================================================ */
.sess-bar{position:sticky;top:calc(var(--hdr-h,0px) + 6px);z-index:20;display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:10px 14px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow)}
.sess-txt{font-size:13px;color:var(--ink-dim);white-space:nowrap}
.sess-txt b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.sess-track{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.sess-fill{display:block;height:100%;width:0;border-radius:3px;background:var(--prog,var(--gold-ink));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.sess-bar.complete .sess-txt b{color:var(--prog,var(--gold-ink))}

/* sets: bigger tap targets, one-tap check */
.set-row input{min-height:46px;font-size:17px;text-align:center}
.set-row input::placeholder{color:var(--ink-faint);opacity:.75}
.chk{width:46px !important;height:46px !important;border-radius:50% !important;cursor:pointer;transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .15s,border-color .15s}
body[data-program] .chk[aria-pressed="true"]::after,.chk[aria-pressed="true"]::after{color:#fff}
.set-row.just{animation:flo-setdone .5s ease}
@keyframes flo-setdone{0%{background:transparent}30%{background:var(--prog-soft,rgba(201,164,92,.18))}100%{background:transparent}}
.set-row:has(.chk[aria-pressed="true"]) input{color:var(--ink-dim)}

/* a finished exercise folds away */
.ex{transition:opacity .3s}
.ex.is-done:not(.open) .sets,.ex.is-done:not(.open) .ex-cues,.ex.is-done:not(.open) .rx-row,.ex.is-done:not(.open) .ex-mod{display:none}
.ex.is-done:not(.open) .ex-head{padding-top:14px;padding-bottom:14px}
.ex.is-done:not(.open) .ex-demo{width:56px;height:56px;overflow:hidden;border-radius:10px}
.ex.is-done:not(.open) .ex-head{grid-template-columns:56px 1fr !important}
.ex.is-done{opacity:.82}
.ex-donebadge{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:2px;padding:6px 12px;border-radius:999px;border:1px solid var(--prog,var(--gold-ink));background:var(--prog-soft,rgba(201,164,92,.12));color:var(--ink);font:500 12.5px var(--font-body);cursor:pointer}
.ex-donebadge::before{content:"✓";color:var(--prog,var(--gold-ink));font-weight:700}
.ex.is-done.open .ex-donebadge{opacity:.7}

/* rest timer */
.rest-pill{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:120;display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 10px;border-radius:999px;background:var(--ink);color:var(--paper);box-shadow:0 14px 40px -12px rgba(0,0,0,.5);
  transform:translate(-50%,24px);opacity:0;transition:transform .32s cubic-bezier(.2,.9,.3,1.2),opacity .25s;max-width:calc(100vw - 24px)}
body[data-program="compliance"]:not(.is-coach) .rest-pill{background:#1F2A17;color:#fff;border:1px solid rgba(122,140,94,.4)}
.rest-pill.show{transform:translate(-50%,0);opacity:1}
@media (min-width:900px){ .rest-pill{bottom:28px} }
.rest-ring{width:36px;height:36px;transform:rotate(-90deg);flex:0 0 auto}
.rr-bg{fill:none;stroke:rgba(255,255,255,.18);stroke-width:3}
.rr-fg{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
body[data-program="cycle"] .rr-fg{stroke:#E8B5A6}
.rest-txt{display:flex;flex-direction:column;line-height:1.1;min-width:0;margin-right:4px}
.rest-txt b{font:600 20px/1 var(--font-body);font-variant-numeric:tabular-nums}
.rest-txt small{font-size:11.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.rest-btn{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:transparent;color:inherit;font:500 13px var(--font-body);cursor:pointer;white-space:nowrap}
.rest-btn:active{transform:scale(.95)}
.rest-pill.done{background:var(--prog,var(--gold-ink))}
.rest-pill.done .rest-txt small{opacity:1;font-weight:500}

/* in-page messages */
.flo-toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:400;max-width:min(440px,calc(100vw - 32px));padding:12px 16px;border-radius:14px;
  background:var(--ink);color:var(--paper);font-size:14px;line-height:1.4;box-shadow:0 14px 40px -12px rgba(0,0,0,.45);
  transform:translate(-50%,-20px);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.9,.3,1.2),opacity .25s}
.flo-toast.show{transform:translate(-50%,0);opacity:1}
.flo-toast.warn{background:#7A2E1F;color:#fff}

/* session sent */
.sess-done{text-align:center;padding:34px 22px;border-radius:18px;background:var(--paper) !important;border:1px solid var(--line) !important;box-shadow:var(--shadow)}
.done-check{width:64px;height:64px;margin:0 auto 10px;display:block}
.done-check circle{fill:none;stroke:var(--prog,var(--gold-ink));stroke-width:3;stroke-dasharray:145;stroke-dashoffset:145;animation:flo-draw .7s .1s ease forwards}
.done-check path{fill:none;stroke:var(--prog,var(--gold-ink));stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:flo-draw .45s .65s ease forwards}
@keyframes flo-draw{to{stroke-dashoffset:0}}
.sd-stats{display:flex;justify-content:center;gap:10px;margin:20px 0 14px;flex-wrap:wrap}
.sd-stats div{min-width:96px;padding:12px 10px;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:2px}
.sd-stats b{font:600 26px/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.sd-stats span{font-size:12px;color:var(--ink-dim)}
.sd-prs{list-style:none;margin:0 auto 20px;padding:0;max-width:340px;text-align:left}
.sd-prs li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.sd-prs li span{color:var(--ink-dim)}
@media (prefers-reduced-motion:reduce){
  .rest-pill,.flo-toast,.sess-fill{transition:none}
  .set-row.just{animation:none}
  .done-check circle,.done-check path{animation:none;stroke-dashoffset:0}
}
body[data-program="compliance"]:not(.is-coach) .chk{background:transparent;border:1.5px solid rgba(255,255,255,.3)}
body[data-program="compliance"]:not(.is-coach) .chk[aria-pressed="true"]{background:#5A7C40;border-color:#5A7C40}
body[data-program="compliance"]:not(.is-coach) .set-row input{background:#1C1C1C;border:1px solid rgba(255,255,255,.14);color:#fff}
body[data-program="compliance"]:not(.is-coach) .set-row input:focus{border-color:#7A8C5E}

/* ============================================================
   APP SIGNATURE MOTION (2026-10-27)
   ============================================================ */
/* Today header: the live terrain map behind the greeting, in each program's colour */
.today-top{position:relative;isolation:isolate;padding:18px 16px 16px;margin:0 -16px 18px;border-radius:0 0 22px 22px;overflow:hidden}
.today-top > :not(canvas){position:relative;z-index:1}
.today-top .tt-terrain{z-index:0;--terrain:#B58E45;--terrain-ink:1.1;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
body[data-program="cycle"] .today-top .tt-terrain{--terrain:#C77D8E}
body[data-program="legacy"] .today-top .tt-terrain{--terrain:#A0783A}
body[data-program="compliance"]:not(.is-coach) .today-top .tt-terrain{--terrain:#7A8C5E;--terrain-ink:1}
@media (min-width:700px){ .today-top{margin:0 0 18px;border-radius:22px} }

/* screens assemble: cards rise in sequence the first time a screen loads */
@media (prefers-reduced-motion: no-preference){
  .app-enter #app > *,.app-enter .today-top > *:not(canvas),.app-enter .ex,.app-enter .mi > *,.app-enter .wa-row,.app-enter .c-panel,.app-enter .tt-check,.app-enter .tt-note{
    animation:flo-enter .6s cubic-bezier(.2,.8,.2,1) both}
  .app-enter .today-top > *:nth-child(2){animation-delay:.04s}
  .app-enter .today-top > *:nth-child(3){animation-delay:.12s}
  .app-enter .today-top > *:nth-child(4){animation-delay:.2s}
  .app-enter #app > *:nth-child(2),.app-enter .ex:nth-of-type(2),.app-enter .wa-row:nth-child(2),.app-enter .mi > *:nth-child(2){animation-delay:.08s}
  .app-enter #app > *:nth-child(3),.app-enter .ex:nth-of-type(3),.app-enter .wa-row:nth-child(3),.app-enter .mi > *:nth-child(3){animation-delay:.16s}
  .app-enter #app > *:nth-child(4),.app-enter .ex:nth-of-type(4),.app-enter .wa-row:nth-child(4),.app-enter .mi > *:nth-child(4){animation-delay:.24s}
  .app-enter #app > *:nth-child(n+5),.app-enter .ex:nth-of-type(n+5),.app-enter .wa-row:nth-child(n+5),.app-enter .mi > *:nth-child(n+5){animation-delay:.3s}
  @keyframes flo-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  /* weight chart draws its line in */
  .mi-chart polyline{stroke-dasharray:1200;stroke-dashoffset:1200;animation:flo-draw 1.4s .25s cubic-bezier(.4,0,.2,1) forwards}
  .mi-chart circle{animation:flo-fade .4s 1.3s both}
}

/* ---------- Builder folders + client folder picker (2026-11-03) ---------- */
.b-weekact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.b-foldername{font:600 20px/1.2 var(--font-display);color:var(--ink);margin-right:2px}
.b-curnote{font-size:12.5px;color:var(--gold-ink);padding:0 4px}
.b-rename{display:flex;gap:8px;align-items:center;flex:1 1 320px}
.b-rename input{flex:1;min-width:0;min-height:40px;padding:0 12px;border:1px solid var(--gold-ink);background:var(--paper);color:var(--ink);font:16px var(--font-body)}
.b-week span{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weekpick button{display:inline-flex;align-items:center;gap:7px;text-transform:none;letter-spacing:.01em;font:500 13px var(--font-body)}
.weekpick button[aria-pressed="true"]{background:var(--prog,var(--gold-ink));border-color:var(--prog,var(--gold-ink));color:#fff}
.b-weekact span.b-curnote{margin-right:0}
.b-week{text-transform:none;letter-spacing:.01em;font:500 14px var(--font-body)}
.b-week small{font-size:11.5px}

/* ============================================================
   SWIPEABLE STRIPS + TRANSITIONS (2026-11-03)
   ============================================================ */
/* sideways strips: momentum scroll, gentle snap, fades on the edge with more tabs */
.strip{display:flex;flex-wrap:nowrap !important;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:16px}
.strip::-webkit-scrollbar{display:none}
.strip > *{flex:0 0 auto;scroll-snap-align:center}
.strip.strip-scroll{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.strip.strip-scroll.at-start{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%)}
.strip.strip-scroll.at-end{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px);mask-image:linear-gradient(to right,transparent 0,#000 28px)}
.strip.strip-scroll.at-start.at-end{-webkit-mask-image:none;mask-image:none}
/* phones: strips run edge to edge so a thumb can drag them */
@media (max-width:760px){
  .weekpick.strip,.daypick.strip,.scan-switch.strip,.b-weeks.strip,.b-daytabs.strip{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .daypick.strip button,.weekpick.strip button{min-height:44px}
}
header.bar nav.links a.tapped{color:var(--gold-ink)}
.daypick button,.weekpick button,.b-week,.b-daytab,.scan-switch a{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .15s ease}
.daypick button:active,.weekpick button:active,.b-week:active,.b-daytab:active,.scan-switch a:active{transform:scale(.95)}

/* Today's session / My history: a pill that slides to the side you picked */
.viewtabs{position:relative;isolation:isolate}
.viewtabs button{position:relative;z-index:1;background:transparent !important;transition:color .3s ease}
.viewtabs::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:0;width:50%;background:var(--prog,var(--gold-ink));transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
body[data-program="cycle"] .viewtabs::before{background:#A8536A}
body[data-program="compliance"]:not(.is-coach) .viewtabs::before{background:#5A7C40}
.viewtabs:has(button:nth-child(2)[aria-pressed="true"])::before{transform:translateX(100%)}
.viewtabs button[aria-pressed="true"]{color:#fff !important}
@media (prefers-reduced-motion: no-preference){
  .viewtabs:has(button:nth-child(2)[aria-pressed="true"])::before{animation:flo-pill-r .38s cubic-bezier(.3,1.3,.5,1)}
  .viewtabs:has(button:nth-child(1)[aria-pressed="true"])::before{animation:flo-pill-l .38s cubic-bezier(.3,1.3,.5,1)}
  @keyframes flo-pill-r{from{transform:none}to{transform:translateX(100%)}}
  @keyframes flo-pill-l{from{transform:translateX(100%)}to{transform:none}}
}

/* bottom tab bar: a pill slides to the tab you tap */
.tabbar{position:fixed}
.tb-ink{position:absolute;top:6px;left:0;height:50px;border-radius:14px;background:var(--prog-soft,rgba(201,164,92,.16));opacity:0;pointer-events:none;
  transition:transform .42s cubic-bezier(.3,1.25,.45,1),width .3s ease,opacity .2s}
body[data-program="compliance"]:not(.is-coach) .tb-ink{background:rgba(90,124,64,.22)}
.tabbar a{position:relative;z-index:1}

/* screens slide in from the side you're heading to (Chrome, Edge, Safari 18.2+) */
@media (prefers-reduced-motion: no-preference){
  html.dir-fwd::view-transition-old(root){animation:flo-vt-out-l .3s cubic-bezier(.4,0,.2,1) both}
  html.dir-fwd::view-transition-new(root){animation:flo-vt-in-r .36s cubic-bezier(.2,.8,.2,1) both}
  html.dir-back::view-transition-old(root){animation:flo-vt-out-r .3s cubic-bezier(.4,0,.2,1) both}
  html.dir-back::view-transition-new(root){animation:flo-vt-in-l .36s cubic-bezier(.2,.8,.2,1) both}
  @keyframes flo-vt-out-l{to{opacity:0;transform:translateX(-14%)}}
  @keyframes flo-vt-in-r{from{opacity:0;transform:translateX(18%)}}
  @keyframes flo-vt-out-r{to{opacity:0;transform:translateX(14%)}}
  @keyframes flo-vt-in-l{from{opacity:0;transform:translateX(-18%)}}
  /* browsers without page transitions: the first cards come in from that side instead of from below */
  html.dir-fwd .app-enter #app > *{animation-name:flo-enter-r}
  html.dir-back .app-enter #app > *{animation-name:flo-enter-l}
  @keyframes flo-enter-r{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
  @keyframes flo-enter-l{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

  /* switching folders or workouts: the session list fades across */
  .daypick button[aria-pressed="true"],.weekpick button[aria-pressed="true"]{animation:flo-chip .32s cubic-bezier(.3,1.5,.5,1)}
  @keyframes flo-chip{from{transform:scale(.9)}to{transform:none}}
  /* check-in answers pop when picked */
  .ck-chip[aria-pressed="true"]{animation:flo-chip .3s cubic-bezier(.3,1.6,.5,1)}
  /* week dots: done days pop in */
  .wk-day.wk-done .wk-dot{animation:flo-chip .4s cubic-bezier(.3,1.6,.5,1) both}
  .wk-day.wk-done:nth-child(2) .wk-dot{animation-delay:.05s}.wk-day.wk-done:nth-child(3) .wk-dot{animation-delay:.1s}
  .wk-day.wk-done:nth-child(4) .wk-dot{animation-delay:.15s}.wk-day.wk-done:nth-child(5) .wk-dot{animation-delay:.2s}
  .wk-day.wk-done:nth-child(n+6) .wk-dot{animation-delay:.25s}
  /* loading screens shimmer instead of sitting still */
  .state{position:relative;overflow:hidden}
  .state::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(201,164,92,.12) 50%,transparent 70%);
    transform:translateX(-100%);animation:flo-shimmer 1.6s ease-in-out infinite;pointer-events:none}
  @keyframes flo-shimmer{to{transform:translateX(100%)}}
  /* cards lift under a mouse, press under a finger */
  @media (hover:hover) and (pointer:fine){
    .ex,.tt-note,.tt-dash,.pick,.c-panel,.how-steps li{transition:transform .25s ease,box-shadow .25s ease}
    .ex:hover,.tt-note:hover,.pick:hover{transform:translateY(-2px)}
  }
  .wa-row:active,.tt-note:active,.tt-measure:active{transform:scale(.985)}
}