/* ============================================================
   FatLossOperator™ — members portal styles
   (training.html + coach.html)
   ============================================================ */

.t-wrap{padding:34px 0 100px;max-width:820px}
.t-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.t-head h1{font-size:clamp(28px,4.4vw,42px);margin:12px 0 6px}

/* view tabs */
.viewtabs{display:flex;gap:0;border:1px solid var(--line);margin-bottom:24px;max-width:420px}
.viewtabs button{
  flex:1;background:transparent;border:0;border-right:1px solid var(--line);
  color:var(--ink-dim);cursor:pointer;padding:13px 10px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;transition:all .18s;
}
.viewtabs button:last-child{border-right:0}
.viewtabs button[aria-pressed="true"]{background:var(--bronze);color:var(--deep);font-weight:600}
.viewtabs button:hover:not([aria-pressed="true"]){color:var(--cream)}

/* day picker */
.daypick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.daypick button{
  background:transparent;border:1px solid var(--line);color:var(--ink-dim);cursor:pointer;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;transition:all .18s;
}
.daypick button[aria-pressed="true"]{background:var(--bronze);color:var(--deep);border-color:var(--bronze);font-weight:600}
.daypick button:hover:not([aria-pressed="true"]){border-color:var(--bronze);color:var(--cream)}
.lastnote{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:20px}

/* exercise card */
.ex{border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--bg));margin-bottom:16px;overflow:hidden}
.ex-head{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:20px;align-items:start}
@media(max-width:600px){.ex-head{grid-template-columns:1fr}}
.ex-demo{border:1px solid var(--line);aspect-ratio:1;overflow:hidden;background:var(--deep);position:relative}
.ex-demo img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.ex-demo .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase;text-align:center;padding:10px}
.ex-name{font-family:var(--font-display);font-size:21px;text-transform:uppercase;letter-spacing:.02em;font-weight:600}
.ex-target{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;color:var(--bronze);text-transform:uppercase;margin:7px 0 10px}
.ex-cues{font-size:14px;color:var(--ink-dim)}

/* set rows */
.sets{border-top:1px solid var(--line-soft);padding:6px 20px 18px}
.set-row{display:grid;grid-template-columns:52px 1fr 1fr 46px 92px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.set-row:last-child{border-bottom:0}
.set-row.hdr{border-bottom:1px solid var(--line)}
@media(max-width:560px){
  .set-row{grid-template-columns:44px 1fr 1fr 40px;row-gap:4px}
  .set-row .lastset{grid-column:2/-1;text-align:left}
  .set-row.hdr .set-hdr:last-child{display:none}
}
.set-row .sn{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--bronze-2);text-transform:uppercase}
.set-row input{
  width:100%;background:var(--deep);border:1px solid var(--line);color:var(--cream);
  font-family:var(--font-mono);font-size:15px;padding:10px;text-align:center;
}
.set-row input:focus{outline:0;border-color:var(--bronze)}
.set-row input::-webkit-outer-spin-button,.set-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.set-row input[type=number]{-moz-appearance:textfield}
.set-hdr{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;text-align:center}
.lastset{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--bronze-2);text-align:center}
.lastset.dim{color:var(--ink-faint)}
.chk{
  width:30px;height:30px;border:1px solid var(--line);background:var(--deep);cursor:pointer;
  display:flex;align-items:center;justify-content:center;margin:0 auto;padding:0;
  transition:background .2s ease,border-color .2s ease,transform .28s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.chk[aria-pressed="true"]{background:var(--bronze);border-color:var(--bronze);transform:scale(1.08);}
.chk[aria-pressed="true"]::after{content:"✓";color:var(--deep);font-weight:700;font-size:16px}
.chk:active{transform:scale(.86);}
.chk:hover{border-color:var(--bronze)}

/* finish block */
.finish{border:1px solid var(--line);background:var(--deep);padding:26px;margin-top:26px}
.finish h2{font-size:19px;margin-bottom:14px}
.finish textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--cream);
  font-family:var(--font-body);font-size:15px;padding:13px;min-height:90px;resize:vertical;margin-bottom:16px;
}
.finish textarea:focus{outline:0;border-color:var(--bronze)}
.finish .btn{width:100%;justify-content:center;padding:16px}

/* states */
.state{padding:70px 24px;text-align:center;border:1px dashed var(--line)}
.state p{color:var(--ink-faint);font-size:15px;max-width:40ch;margin:12px auto 0}
.done{border:1px solid var(--bronze);background:rgba(196,174,137,.08);padding:34px;text-align:center}
.done h2{font-size:26px;margin-bottom:10px}
.done p{color:var(--ink-dim);margin-bottom:22px}
.dimline{color:var(--ink-faint);font-size:14px;padding:16px 0}

/* history cards */
.history{display:grid;gap:14px}
.h-card{border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--bg));padding:20px 22px}
.h-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.h-day{font-family:var(--font-display);font-size:19px;text-transform:uppercase;letter-spacing:.02em;font-weight:600}
.h-date{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase;margin-top:5px}
.h-count{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--bronze);text-transform:uppercase;white-space:nowrap}
.h-ex{display:grid;grid-template-columns:1fr auto;gap:10px;padding:8px 0;align-items:baseline}
.h-name{font-size:15px;color:var(--cream)}
.h-sets{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-dim);text-align:right}
.h-best{grid-column:2;font-family:var(--font-mono);font-size:10.5px;color:var(--bronze);letter-spacing:.1em;text-transform:uppercase}
.h-notes{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:14.5px;color:var(--ink-dim);font-style:italic}

/* coach dashboard */
.c-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:34px}
.c-stat{background:var(--deep);padding:22px 24px}
.c-stat .n{font-family:var(--font-display);font-weight:700;font-size:38px;color:var(--bronze);line-height:1}
.c-stat .l{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-top:8px}
@media(max-width:620px){.c-stats{grid-template-columns:1fr}}
.c-panel{border:1px solid var(--line);background:var(--deep)}
.c-panel-head{padding:0 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.c-panel-head h2{font-size:17px;letter-spacing:.03em}
.c-panel .c-panel-head{padding:18px 22px 14px;margin-bottom:0}
.c-roster{padding:8px 22px 18px}
.c-row{display:grid;grid-template-columns:12px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.c-row:last-child{border-bottom:0}
.c-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.c-dot.warm{background:var(--bronze)}
.c-dot.mid{background:var(--bronze-2);opacity:.7}
.c-dot.cold{background:rgba(226,210,186,.22)}
.c-name{font-size:15.5px}
.c-last{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,11,5,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:90vh;object-fit:contain;border:1px solid var(--line)}


/* Whop link card */
.whopcard{
  display:block;border:1px solid var(--bronze);background:linear-gradient(120deg,rgba(196,174,137,.10),transparent);
  padding:18px 22px;margin-bottom:22px;transition:background .2s,transform .18s;
}
.whopcard:hover{background:rgba(196,174,137,.16);transform:translateY(-2px)}
.wc-k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-2);display:block}
.wc-t{font-family:var(--font-display);font-size:20px;text-transform:uppercase;letter-spacing:.02em;color:var(--bronze);display:block;margin-top:6px;font-weight:600}
.wc-n{display:block;margin-top:8px;font-size:14px;color:var(--ink-dim)}

/* prescription chips + block labels (imported rich sessions) */
.rx-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rx{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-dim);border:1px solid var(--line);padding:4px 9px;text-transform:uppercase}
.rx b{color:var(--bronze);font-weight:600;margin-right:5px}
.ex-mod{margin-top:8px;font-size:13px;color:var(--ink-faint);font-style:italic}
.blocklabel{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.blocklabel:first-child{margin-top:0}

/* finish actions: send + reset side by side */
.finish-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media(max-width:520px){.finish-actions{flex-direction:column;align-items:stretch}}

/* ============================================================
   PER-PROGRAM FULL-IMMERSION THEMING
   profile.program sets <body data-program="compliance|cycle|legacy">.
   Each program is its own environment: background, accent, buttons,
   type personality, and mood all shift.
   ============================================================ */

/* ---------- COMPLIANCE — tactical: black / OD green / white / gold ---------- */
body[data-program="compliance"]{
  --bg:#0B0D08;
  --deep:#060704;
  --surface:#12160D;
  --line:#242b18;
  --bronze:#C4AE89;      /* gold accent */
  --bronze-2:#8f9c6a;    /* OD green secondary */
  --od:#4d5a2e;          /* deep OD green */
  --od-bright:#6f8043;
}
body[data-program="compliance"] h1,
body[data-program="compliance"] .ex-name{
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.01em;text-transform:uppercase;
}
body[data-program="compliance"] .progsig{color:var(--bronze)}
body[data-program="compliance"] .daypick button[aria-pressed="true"]{
  background:var(--od-bright);color:#fff;border-color:var(--od-bright);font-weight:600;
}
body[data-program="compliance"] .chk[aria-pressed="true"]{background:var(--od-bright);border-color:var(--od-bright)}
body[data-program="compliance"] .btn-solid{background:var(--od-bright);color:#fff;border-color:var(--od-bright)}
body[data-program="compliance"] .btn-solid:hover{background:#7d9049;border-color:#7d9049}
body[data-program="compliance"] .blocklabel{color:var(--bronze)}
body[data-program="compliance"] .rx b{color:var(--od-bright)}

/* ---------- CYCLE — soft feminine: light cream / blush / rose ---------- */
body[data-program="cycle"]{
  --bg:#F7EDE6;          /* warm cream ground — the only LIGHT theme */
  --deep:#F1E2D8;
  --surface:#FFFFFF;
  --line:#E7D2C6;
  --cream:#2A1D18;       /* dark text on light bg */
  --ink:#2A1D18;
  --ink-dim:#7A6157;
  --bronze:#C77D8E;      /* rose accent */
  --bronze-2:#A8536A;    /* deep rose */
}
body[data-program="cycle"]{background:var(--bg);color:var(--ink)}
body[data-program="cycle"] h1,
body[data-program="cycle"] h2,
body[data-program="cycle"] .ex-name{
  font-family:'Cormorant Garamond',serif;font-weight:600;color:#2A1D18;
}
body[data-program="cycle"] .progsig{color:var(--bronze-2)}
body[data-program="cycle"] .marker,
body[data-program="cycle"] .ex-target{color:var(--bronze-2)}
body[data-program="cycle"] .ex,
body[data-program="cycle"] .finish{background:var(--surface);border-color:var(--line)}
body[data-program="cycle"] .set-row input{background:#FBF4EF;border-color:var(--line);color:#2A1D18}
body[data-program="cycle"] .daypick button{border-color:var(--line);color:#7A6157}
body[data-program="cycle"] .daypick button[aria-pressed="true"]{
  background:var(--bronze);color:#fff;border-color:var(--bronze);
}
body[data-program="cycle"] .chk{border-color:#D9B9A8}
body[data-program="cycle"] .chk[aria-pressed="true"]{background:var(--bronze);border-color:var(--bronze)}
body[data-program="cycle"] .btn-solid{background:var(--bronze-2);color:#fff;border-color:var(--bronze-2)}
body[data-program="cycle"] .btn-solid:hover{background:#96475c;border-color:#96475c}
body[data-program="cycle"] .btn-ghost{border-color:var(--bronze);color:var(--bronze-2)}
body[data-program="cycle"] .blocklabel{color:var(--bronze-2)}
body[data-program="cycle"] .noimg{background:#F1E2D8;color:#B79385}
body[data-program="cycle"] .rx{background:#FBF4EF;border-color:var(--line)}
body[data-program="cycle"] .rx b{color:var(--bronze-2)}
body[data-program="cycle"] .ex-mod{color:var(--bronze-2)}

/* ---------- LEGACY — burgundy & gold: rich, dignified, editorial ---------- */
body[data-program="legacy"]{
  --bg:#2A0A10;          /* deep burgundy ground */
  --deep:#1E060B;
  --surface:#3A1219;
  --line:#5a2730;
  --cream:#F4E9D8;
  --ink:#F4E9D8;
  --ink-dim:#C9A87F;
  --bronze:#D4AF6A;      /* champagne gold */
  --bronze-2:#B8935A;
}
body[data-program="legacy"] h1,
body[data-program="legacy"] h2,
body[data-program="legacy"] .ex-name{
  font-family:'Playfair Display',serif;font-weight:600;color:var(--bronze);
}
body[data-program="legacy"] .progsig{color:var(--bronze)}
body[data-program="legacy"] .marker,
body[data-program="legacy"] .ex-target{color:var(--bronze)}
body[data-program="legacy"] .daypick button[aria-pressed="true"]{
  background:var(--bronze);color:#2A0A10;border-color:var(--bronze);font-weight:600;
}
body[data-program="legacy"] .chk[aria-pressed="true"]{background:var(--bronze);border-color:var(--bronze)}
body[data-program="legacy"] .btn-solid{background:var(--bronze);color:#2A0A10;border-color:var(--bronze);font-weight:600}
body[data-program="legacy"] .btn-solid:hover{background:#e0bd7a;border-color:#e0bd7a}
body[data-program="legacy"] .btn-ghost{border-color:var(--bronze);color:var(--bronze)}
body[data-program="legacy"] .blocklabel{color:var(--bronze)}
body[data-program="legacy"] .rx b{color:var(--bronze)}

/* ---------- COMPLIANCE is the default look, so base styles already fit ---------- */

/* program signature bar under the header */
.progsig{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:24px;
}
body[data-program="cycle"] .progsig,
body[data-program="legacy"] .progsig{font-family:var(--font-mono)}
.progsig::before{content:"";width:26px;height:1px;background:var(--bronze)}
.progsig .pg-badge{width:22px;height:22px;border-radius:50%;object-fit:contain}

/* ============================================================
   FULL-PAGE PROGRAM THEMING — header, body, nav shift too
   (so it's a whole environment, not just the content area)
   ============================================================ */

/* body background follows the theme var on every themed page */
body[data-program="cycle"]{background:var(--bg);color:var(--ink)}
body[data-program="legacy"]{background:var(--bg);color:var(--ink)}
body[data-program="compliance"]{background:var(--bg)}

/* HEADER BAR per program */
body[data-program="cycle"] header.bar{
  background:rgba(247,237,230,.92);border-bottom-color:var(--line);
}
body[data-program="cycle"] header.bar .brand,
body[data-program="cycle"] header.bar a{color:#2A1D18}
body[data-program="cycle"] header.bar .tab-home svg{stroke:#2A1D18}
body[data-program="cycle"] .links a[aria-current="page"],
body[data-program="cycle"] .links a:hover{color:var(--bronze-2)}

body[data-program="legacy"] header.bar{
  background:rgba(42,10,16,.92);border-bottom-color:var(--line);
}
body[data-program="legacy"] header.bar a,
body[data-program="legacy"] header.bar .brand{color:var(--bronze)}

body[data-program="compliance"] header.bar{
  background:rgba(11,13,8,.94);border-bottom-color:var(--line);
}

/* macrobar (progress) recolors */
body[data-program="cycle"] .macrobar{border-color:var(--line)}
body[data-program="cycle"] .macrobar .p{background:var(--bronze)}
body[data-program="cycle"] .macrobar .f{background:var(--bronze-2)}
body[data-program="legacy"] .macrobar .p{background:var(--bronze)}
body[data-program="compliance"] .macrobar .p{background:var(--od-bright)}

/* history / state / cards inherit surface + text so nothing stays dark on cycle */
body[data-program="cycle"] .state,
body[data-program="cycle"] .hcard,
body[data-program="cycle"] .whopcard{background:var(--surface);border-color:var(--line);color:var(--ink)}
body[data-program="cycle"] .lastnote,
body[data-program="cycle"] .ex-cues{color:var(--ink-dim)}
body[data-program="cycle"] .set-hdr,
body[data-program="cycle"] .sn{color:var(--ink-dim)}

/* lightbox stays dark regardless (photos read better) — no override needed */

/* verse / footer text on cycle */
body[data-program="cycle"] .verse,
body[data-program="cycle"] .verse *{color:#6b4f45}

/* member-view surfaces that need per-theme correction */
/* "done" confirmation box tint per program */
body[data-program="cycle"] .done{background:rgba(199,125,142,.08);border-color:var(--bronze)}
body[data-program="legacy"] .done{background:rgba(212,175,106,.10);border-color:var(--bronze)}
body[data-program="compliance"] .done{background:rgba(111,128,67,.10);border-color:var(--od-bright)}

/* history text that used --cream needs to be dark on the light cycle theme */
body[data-program="cycle"] .h-name{color:#2A1D18}
body[data-program="cycle"] .h-day{color:#2A1D18}
body[data-program="cycle"] .h-card{background:linear-gradient(180deg,#fff,#F7EDE6)}
body[data-program="legacy"] .h-day{color:var(--bronze)}

/* history count / best chips recolor with accent automatically via --bronze */