:root{
  color-scheme:dark;

  /* ══════════════════════════════════════════════════════════════════
     FORMIQ DESIGN SYSTEM — v1 (Phase 1)
     Additive token layer. Every legacy token below is preserved so all
     existing UI keeps working unchanged; new namespaced tokens alias the
     legacy ones where they map. The per-profile accent (set at runtime by
     applyAccent) still flows through --a1/--a2/--a3/--accent/--accent-ink.
     ══════════════════════════════════════════════════════════════════ */

  /* ── LEGACY (unchanged — do not remove) ── */
  --bg:#07090C;
  --card:#12161B;
  --card2:#1B2129;
  --ink:#F2F5F8;
  --mute:#8794A3;
  --line:#2A313A;
  --dark:#040608;
  --steel:#B9C6D4;
  --a1:#00C3FE;
  --a2:#0A9CFA;
  --a3:#006EEB;
  --accent:#0A9CFA;
  --accent-ink:#3FB2FF;
  --mag:var(--a2);
  --cyan:var(--a1);
  --vio:var(--a3);
  --sun:var(--a2);
  --lime:var(--a1);
  --gold:var(--steel);
  --sand:var(--a2);
  --grad:linear-gradient(100deg,var(--a3),var(--a2) 52%,var(--a1));
  --r:20px;
  --f:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif;

  /* ── COLOR — backgrounds & surfaces (aliased to legacy) ── */
  --ds-bg:var(--bg);                 /* app background — near-black */
  --ds-surface:var(--card);          /* default elevated surface */
  --ds-surface-2:var(--card2);       /* interactive / raised surface */
  --ds-surface-3:#232B34;            /* highest elevation (new tint) */

  /* ── COLOR — borders ── */
  --ds-border:var(--line);           /* fine hairline border */
  --ds-border-hi:color-mix(in srgb, var(--accent) 55%, transparent); /* cyan edge accent */

  /* ── COLOR — text ── */
  --ds-text:var(--ink);              /* primary white */
  --ds-text-2:var(--steel);          /* secondary cool gray */
  --ds-text-3:var(--mute);           /* muted / tertiary */

  /* ── COLOR — accent (follows per-profile theme) ── */
  --ds-accent:var(--accent);         /* main cyan/blue accent */
  --ds-accent-2:var(--accent-ink);   /* lighter accent for text on dark */
  --ds-accent-grad:var(--grad);      /* the FormIQ gradient */

  /* ── COLOR — semantic ── */
  --ds-success:#37D67A;
  --ds-warning:#FFB020;
  --ds-danger:#FF4D5E;
  --ds-success-ink:#5FE39A;
  --ds-warning-ink:#FFC24D;
  --ds-danger-ink:#FF6B7A;

  /* ── EFFECTS (used sparingly) ── */
  --ds-glow-soft:0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  --ds-glow-accent:0 0 18px -4px color-mix(in srgb, var(--accent) 60%, transparent);
  --ds-shadow-card:0 6px 20px -12px rgba(0,0,0,.6);
  --ds-shadow-raised:0 10px 30px -14px rgba(0,0,0,.7);

  /* ── SPACING scale (4 → 48) ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px;

  /* ── RADIUS ── */
  --r-sm:10px;      /* small controls: chips, steppers, tags */
  --r-md:14px;      /* standard cards, buttons */
  --r-lg:20px;      /* large cards (= legacy --r) */
  --r-xl:24px;      /* hero / sheet corners */
  --r-pill:999px;   /* pill controls */
  --r-round:50%;    /* circular controls */

  /* ── TYPOGRAPHY (size / line-height / weight) ── */
  --fs-display:32px;   --lh-display:1.05;  --fw-display:800;
  --fs-title:26px;     --lh-title:1.1;     --fw-title:800;   /* page/screen title */
  --fs-section:18px;   --lh-section:1.2;   --fw-section:800; /* section title */
  --fs-card:16px;      --lh-card:1.25;     --fw-card:700;    /* card title */
  --fs-body:14px;      --lh-body:1.5;      --fw-body:500;    /* body */
  --fs-small:13px;     --lh-small:1.45;    --fw-small:500;   /* small body */
  --fs-caption:12px;   --lh-caption:1.4;   --fw-caption:600; /* caption */
  --fs-label:10.5px;   --lh-label:1.2;     --fw-label:800;   /* UPPERCASE labels */
  --ls-label:.06em;
  --fs-metric:30px;    --lh-metric:1;      --fw-metric:800;  /* metric */
  --fs-metric-lg:44px; --lh-metric-lg:1;   --fw-metric-lg:800; /* large metric */

  /* ── FORMIQ BRAND ACCENT (fixed cyan — shell components use this, NOT the
     per-profile --accent, so the app shell stays consistently FormIQ cyan) ── */
  --fq-brand:#0A9CFA;
  --fq-brand-ink:#3FB2FF;
  --fq-brand-grad:linear-gradient(100deg,#006EEB,#0A9CFA 52%,#00C3FE);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* App shell: the page itself never scrolls. That stops the tab bar drifting,
   the URL bar collapsing mid-scroll, and the whole app rubber-banding. */
html{background:#07090C;height:100%;overflow:hidden;
  -webkit-text-size-adjust:100%;text-size-adjust:100%}

/* App behaviour, not page behaviour:
   no pinch-zoom, no double-tap zoom, no text selection, no long-press callout,
   no blue tap flash. Inputs keep selection, obviously. */
*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text}
body{position:fixed;inset:0;width:100%;height:100%;background:#07090C;color:#F2F5F8;
  font-family:var(--f);font-size:15px;line-height:1.45;
  overflow:hidden;overscroll-behavior:none}
img,svg,canvas,video{max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
.hide{display:none!important}
.num{font-variant-numeric:tabular-nums}
#app{width:100%;max-width:480px;margin:0 auto;min-height:100dvh;position:relative;background:var(--bg);overflow-x:clip}
#ob,#main{background:var(--bg)}

/* the app shell: header pinned, content scrolls, tab bar pinned */
#main{position:fixed;inset:0;width:100%;max-width:480px;margin:0 auto;
  display:flex;flex-direction:column;overflow:hidden}
#view{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;max-width:100%;
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  padding-bottom:14px}
.obh h1,.greet h1,.sh h2{color:var(--ink)}
main{padding-bottom:104px}
/* Home overflow guard: no scroll-view child may exceed the viewport width. Cards
   keep their own margin:0 20px; this only clamps anything that would bleed past. */
#view>*{max-width:100%}
#view img,#view svg,#view canvas{max-width:100%;height:auto}

/* ── top bar ───────────────────────────── */
.top{flex:0 0 auto;padding:calc(14px + env(safe-area-inset-top)) 20px 4px;display:flex;align-items:center;justify-content:space-between}
.logo{height:38px;padding:0;background:none;border:none;display:grid;place-items:center}  /* the existing Fi asset stands on its own — no card, no border, no wordmark */
.logo img{height:26px;width:auto;display:block}
.avs{display:flex;gap:8px;align-items:center}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;border:2.5px solid transparent;opacity:.42;transition:.15s}
.av.on{opacity:1;border-color:var(--ink)}
.av.plus{background:transparent;color:var(--mute);border:1.5px dashed var(--line);opacity:1;font-weight:600}

.greet{padding:12px 20px 18px}
.greet .h{color:var(--mute);font-size:14px;font-weight:500}
.greet h1{font-size:29px;font-weight:800;letter-spacing:-.02em;margin-top:1px}

/* ── date strip ────────────────────────── */
/* .strip defined once, below, as a true 7-col grid */

/* original .dpill .ring removed — see the single clean definition below */








.wknav{display:flex;align-items:center;justify-content:space-between;padding:0 20px 10px}
.wknav .lab{font-size:13px;font-weight:700}
.wknav .lab small{display:block;font-size:11px;font-weight:600;color:var(--mute)}
.wknav button{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink)}
.wknav button:disabled{opacity:.3}
.wknav button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.wknav .now{width:auto;padding:0 12px;font-size:12px;font-weight:700}
.prev-note{margin:12px 20px 0;padding:11px 14px;background:var(--card);border:1px dashed var(--line);border-radius:14px;font-size:12.5px;color:var(--mute);text-align:center;font-weight:600}


/* ── section head ──────────────────────── */
.sh{display:flex;align-items:center;justify-content:space-between;padding:0 20px 12px}
.sh h2{font-size:19px;font-weight:800;letter-spacing:-.01em}
.sh .c{font-size:12.5px;color:var(--mute);font-weight:600}

/* ── hero workout card ─────────────────── */
.hero{margin:0 20px;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);position:relative;box-shadow:0 8px 30px rgba(10,156,250,.14)}
.hero .media{height:216px;position:relative;display:grid;place-items:center;overflow:hidden}
.hero .media .glyph{font-size:clamp(40px,13vw,66px);font-weight:800;font-style:italic;color:rgba(255,255,255,.07);letter-spacing:-.02em;line-height:1;user-select:none;text-transform:uppercase;text-align:center;padding:0 20px;max-width:100%}
.hero .media:after{content:'';position:absolute;inset:0;
  background:radial-gradient(60% 42% at 50% 82%,rgba(185,198,212,.55),transparent 62%),
             repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.10) 3px 4px)}
.pill{position:absolute;top:14px;left:14px;z-index:2;background:rgba(7,9,12,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:999px}
.hero .foot{padding:16px 18px 18px;display:flex;align-items:flex-end;gap:12px;background:var(--card);border-top:1px solid var(--line)}
.hero .foot .t{flex:1;min-width:0;overflow-wrap:anywhere}
.hero .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.hero .foot h3{color:#fff;font-size:22px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.005em;line-height:1.1;overflow-wrap:anywhere}
.play{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 3px 12px rgba(0,0,0,.25)}
.play svg{width:17px;height:17px;fill:#07090C;margin-left:2px}
.pgs{display:flex;gap:5px;justify-content:center;padding:12px 0 0}
.pgs i{width:5px;height:5px;border-radius:50%;background:var(--line)}
.pgs i.on{background:var(--ink);width:16px;border-radius:999px}

/* ── versus card ───────────────────────── */
.vs{margin:22px 20px 0;background:var(--card);border-radius:var(--r);border:1px solid var(--line);overflow:hidden}
.vs .hd{padding:16px 18px 12px;display:flex;justify-content:space-between;align-items:center}
.vs .hd .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.vs .hd .w{font-size:11.5px;font-weight:700;color:var(--accent-ink)}
.vsrow{display:flex;align-items:center;gap:12px;padding:0 18px 14px}
.vsrow .who{flex:1}
.vsrow .who.r{text-align:right}
.vsrow .nm{font-size:15px;font-weight:700}
.vsrow .pt{font-size:12px;color:var(--mute);font-weight:600}
.vsrow .x{font-size:11px;font-weight:800;color:var(--mute)}
.trk{height:9px;margin:0 18px 16px;background:var(--card2);border-radius:999px;display:flex;overflow:hidden;gap:2px}
.trk div{border-radius:999px;transition:flex .4s}
.mini{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.mini div{padding:13px 6px;text-align:center;border-right:1px solid var(--line)}
.mini div:last-child{border:none}
.mini .v{font-size:20px;font-weight:800;letter-spacing:-.02em}
.mini .k{font-size:10px;font-weight:600;color:var(--mute);margin-top:1px}

/* ── generic card / rows ───────────────── */
.card{margin:0 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.row:last-child{border:none}
.row .ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.row .ic.done{background:var(--a1);color:var(--bg);font-size:17px}
.row .b{flex:1;min-width:0;overflow-wrap:anywhere}
.row .n{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.row .s{font-size:12.5px;color:var(--mute);margin-top:1px}
.row .acts{display:flex;gap:6px;flex:none}
.ib{width:34px;height:34px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;color:var(--mute)}
.ib svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.ib.on{background:var(--accent);border-color:var(--accent-ink);color:#07090C}
.tg{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 6px;border-radius:5px;background:var(--bg);color:var(--mute)}
.tg.gym{background:var(--cyan);color:#07090C}
.tg.bike{background:var(--accent);color:var(--bg)}
.tg.lime{background:var(--mag);color:var(--bg)}

.btn{display:block;width:calc(100% - 40px);margin:18px 20px;padding:16px;border-radius:16px;background:var(--grad);color:#fff;font-weight:700;font-size:15.5px;box-shadow:0 4px 20px rgba(10,156,250,.28)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);box-shadow:none}
.btn:active{transform:scale(.99)}
.note{padding:0 20px;font-size:12.5px;color:var(--mute);text-align:center;margin-top:-8px}

.empty{padding:52px 24px;text-align:center}
.empty h2{font-size:20px;font-weight:800;margin-bottom:6px}
.empty p{color:var(--mute);font-size:14px}

.fsec{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:16px 0 8px}
.frow,.feedrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.frow:last-child,.feedrow:last-child{border-bottom:none}
.fav{width:40px;height:40px;flex:none;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.fb{flex:1;min-width:0}
.fb .n{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb .m{font-size:12px;color:var(--mute)}
.frx{flex:none;padding:6px 12px;border-radius:8px;background:transparent;border:1px solid var(--line);color:var(--mute);font-size:11.5px;font-weight:700}

.expask{background:linear-gradient(180deg,#111820,#0B0F15);border:1px solid color-mix(in srgb,var(--fq-brand) 45%,#27313B);border-radius:16px;padding:14px 14px 13px;margin:0 20px 12px;box-shadow:0 14px 34px -28px rgba(0,0,0,.95)}
.expask .t{font-size:13.5px;font-weight:850;color:var(--ds-text);letter-spacing:-.01em;margin-bottom:10px}
.expask .ex3{display:flex;gap:7px}
.expask .ex3 button{flex:1;padding:10px 4px;border-radius:10px;background:#151D26;border:1px solid #283442;color:var(--ds-text);font-size:12px;font-weight:800}
.expask .s{font-size:11.5px;color:var(--ds-text-3);margin-top:9px;line-height:1.4}
.built{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 16px;margin:0 20px 14px}
.built .k{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.built .v{font-size:15px;font-weight:800;margin:3px 0 2px}
.built .d{font-size:12px;color:var(--mute)}
.psec{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:16px 0 8px}
.prow{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--card2)}
.prow.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.prow .pb{flex:1;min-width:0}
.prow .pb .n{font-size:14px;font-weight:800}
.prow .pb .m{font-size:12px;color:var(--mute);margin:2px 0 4px;line-height:1.4}
.prow .pb .tags{font-size:10.5px;font-weight:700;color:var(--accent-ink)}
.prow .pgo{flex:none;font-size:12px;font-weight:800;color:var(--accent-ink);padding:6px 12px;border:1px solid var(--accent);border-radius:9px}
.prow.on .pgo{background:var(--accent);color:#fff;border:none}

.ssbadge{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--accent-ink);
  padding:7px 12px 3px;text-transform:uppercase}
.ssrow{border-left:2px solid var(--accent)}

.psum{text-align:left;margin-bottom:10px}
.psh{font-weight:800;font-size:15px;margin-bottom:4px}
.pstally{font-size:12px;color:var(--mute);margin-bottom:12px;font-weight:600}
.pslist{display:flex;flex-direction:column;gap:10px}
.psrow{display:flex;gap:11px;align-items:flex-start}
.psi{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0;background:rgba(185,198,212,.16)}
.ps-improved .psi{background:rgba(52,199,89,.18);color:#34c759}
.ps-ontarget .psi{background:rgba(90,140,255,.18);color:var(--accent-ink)}
.ps-rebuild .psi{background:rgba(185,198,212,.18);color:var(--accent-ink)}
.psn{font-weight:700;font-size:14px}
.psd{font-size:12.5px;color:var(--mute);margin-top:1px}
.psnext{font-size:12px;color:var(--ink);opacity:.8;margin-top:3px}
.pspr{font-size:12px;color:#ff9f0a;font-weight:700;margin-top:3px}











.ptagss{font-size:9px;font-weight:800;letter-spacing:.06em;background:var(--accent);color:#fff;padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:middle}

/* ── tabs ──────────────────────────────── */
.tabs{flex:0 0 auto;z-index:40;
  background:rgba(7,9,12,.92);backdrop-filter:blur(16px);border-top:1px solid var(--line);
  display:flex;padding-bottom:env(safe-area-inset-bottom)}
.tabs button{flex:1 1 0;min-width:0;padding:11px 0 12px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--mute)}
.tabs button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.tabs button span{font-size:9.5px;font-weight:600;white-space:nowrap}
.tabs button.on{color:var(--ink)}
.tabs button.on svg{stroke:var(--accent);stroke-width:2.2}

/* ── PLAYER ────────────────────────────── */
#play{position:fixed;inset:0;z-index:60;background:var(--bg);width:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden}
/* STABLE responsive media height — fixed per viewport via clamp(), NEVER changes on scroll.
   ~small phone 165px / standard ~190px / large ~215px. No JS height changes, no transitions. */
.pmedia{flex:none;height:clamp(104px, 15vh, 150px);position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(160deg,#141A21,#0B0F14 60%,#080B0F)}
/* compact strip content: small label + expand, shown only when compact */






.pmedia .glyph{font-size:190px;font-weight:800;font-style:italic;color:rgba(255,255,255,.16);text-shadow:0 0 50px rgba(255,255,255,.15);letter-spacing:-.06em;line-height:1;user-select:none}
.pmedia:after{content:'';position:absolute;inset:0;
  background:radial-gradient(55% 38% at 50% 86%,rgba(185,198,212,.5),transparent 62%),
             repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.10) 3px 4px)}

.pbar .clock button svg{width:11px;height:11px;fill:#fff}
.pbar .toggle button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}


.pbody{flex:1 1 auto;min-height:0;background:var(--bg);border-radius:22px 22px 0 0;margin-top:-18px;position:relative;z-index:2;padding:12px 20px 14px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;box-shadow:0 -1px 0 var(--ds-border)}



.pmeta{font-size:12px;font-weight:600;color:var(--mute);margin-bottom:10px}




.pbest{font-size:12.5px;font-weight:600;color:var(--accent-ink);margin:-12px 0 18px}






.inp input::-webkit-outer-spin-button,











/* list mode */
.plist{padding:0 0 20px}
.plrow{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line)}
.plrow.cur{font-weight:700}
.plrow .d{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:grid;place-items:center}
.plrow .d svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3}
.plrow.dn .d{background:var(--accent);border-color:var(--accent-ink)}
.plrow.cur .d{border-color:var(--accent-ink);border-width:3px}
.plrow .b{flex:1}
.plrow .n{font-size:14.5px;font-weight:600}
.plrow.cur .n{font-weight:800}
.plrow .s{font-size:12px;color:var(--mute)}

/* rest sheet */

/* ── DONE SCREEN ───────────────────────── */
#done{position:fixed;inset:0;z-index:80;width:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;color:var(--ds-text);background:var(--ds-bg);padding:calc(18px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom))}
#done:before{content:'';position:absolute;inset:0;background:linear-gradient(175deg,#0A9CFA 0%,#006EEB 38%,#12161B 68%,#040608 100%);z-index:-2}
#done:after{content:'';position:absolute;inset:0;background:radial-gradient(80% 45% at 50% 8%,rgba(185,198,212,.45),transparent 62%);z-index:-1}
#done .x{align-self:flex-end;width:38px;height:38px;border-radius:50%;background:var(--ds-surface-2);border:1px solid var(--ds-border);display:grid;place-items:center;color:var(--ds-text-2);cursor:pointer}
#done .mid{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
#done h1{font-size:34px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;color:var(--ds-text);margin-top:6px}
#done .sub{color:var(--ds-text-3);font-size:14px;font-weight:600;margin-top:8px}
#done .pr{margin-top:16px;background:color-mix(in srgb,var(--fq-brand) 16%,transparent);color:var(--fq-brand-ink);font-size:12.5px;font-weight:800;padding:8px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--fq-brand) 40%,transparent)}
.dstats{display:flex;gap:10px;margin:28px 0 16px;width:100%}
.dstats div{flex:1;text-align:center}
.dstats .ic{width:26px;height:26px;margin:0 auto 8px;color:rgba(255,255,255,.55)}
.dstats .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.dstats .v{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1}
.dstats .k{font-size:11px;color:rgba(255,255,255,.6);font-weight:600;margin-top:5px}
.dcard{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:16px;padding:14px;text-align:left;flex:1;min-width:0}
.dcard .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.dcard .v{font-size:19px;font-weight:800;margin:3px 0 5px}
.dcard .d{font-size:12px;color:rgba(255,255,255,.6);font-weight:500}
.drow{display:flex;gap:12px;margin-top:auto;padding-top:16px}
.drow button{padding:15px 10px;border-radius:14px;font-weight:800;font-size:clamp(14px,4vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .share{flex:1.15;min-width:0;background:var(--ds-surface-2);color:var(--ds-text);border:1px solid var(--ds-border);white-space:nowrap}
.drow .fin{flex:1.35;min-width:0;background:var(--fq-brand-ink);color:#062132;display:flex;align-items:center;justify-content:center;gap:8px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}

/* ── progress ──────────────────────────── */
.chart{padding:18px 16px}
.bars{display:flex;align-items:flex-end;gap:6px;height:112px}
.bars .b{flex:1;background:var(--accent);border-radius:6px 6px 2px 2px;min-height:3px;opacity:.32}
.bars .b.cur{opacity:1}
.xl{display:flex;gap:6px;margin-top:8px}
.xl span{flex:1;text-align:center;font-size:10px;color:var(--mute);font-weight:600}

/* ── forms ─────────────────────────────── */
.fld{padding:16px;border-bottom:1px solid var(--line)}
.fld:last-child{border:none}
.fld label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.fld input[type=text]{width:100%;padding:13px;background:var(--card2);border:1.5px solid var(--line);border-radius:13px;font-size:15px;font-weight:600}
.fld input[type=text]:focus{outline:none;border-color:var(--accent-ink)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.dwpick{display:flex;gap:4px}
.dw{flex:1 1 0;min-width:0;height:46px;border-radius:13px;border:1.5px solid var(--line);background:var(--card);font-size:13px;font-weight:700;color:var(--mute)}
.dw.on{background:var(--accent);border-color:var(--accent-ink);color:#07090C}
.dwhint{font-size:12px;color:var(--mute);font-weight:600;margin-top:9px}
.dwhint.bad{color:#FF4D5E}
.opt{padding:10px 15px;border:1.5px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:600;color:var(--mute);background:var(--card)}
.opt.on{border-color:var(--accent-ink);background:var(--accent);color:#07090C}
.opt.c0.on{background:#006EEB;border-color:#006EEB}
.opt.c1.on{background:#0A9CFA;border-color:#0A9CFA}
.opt.c2.on{background:#00C3FE;border-color:#00C3FE}

/* ── onboard ───────────────────────────── */
#ob{position:fixed;inset:0;z-index:55;background:var(--bg);
  width:100%;max-width:480px;margin:0 auto;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:0 0 calc(40px + env(safe-area-inset-bottom))}
/* Slim brand bar. This was a landing-page hero — a 46px heartbeat tile, an
   unsized 63px wordmark and a paragraph — stacked ABOVE a step screen that
   already carries its own rail, "N of 4", title and subtitle. Two headers read
   as two designs. The wordmark stays for brand presence; the duplicate copy is
   gone, and it was stale anyway: it promised three questions when onboarding
   is four steps. */
.obh{padding:calc(12px + env(safe-area-inset-top)) 20px 10px}
.obh-mark{height:20px;width:auto;display:block}
.obh .m{width:46px;height:46px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:20px}
.obh .m svg{width:24px;height:24px;stroke:var(--cyan);fill:none;stroke-width:2.2;stroke-linecap:round}
.obh h1{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:10px}
.obh p{color:var(--mute);font-size:14.5px;max-width:33ch;line-height:1.5}

/* ── segmented ─────────────────────────── */
.seg{display:flex;gap:4px;margin:0 20px 18px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px}
.seg button{flex:1;padding:9px;border-radius:10px;font-size:13.5px;font-weight:700;color:var(--mute)}
.seg button.on{background:var(--accent);color:#07090C}

/* ── leaderboard ───────────────────────── */
.lb{margin:22px 20px 0;background:var(--card);border-radius:var(--r);border:1px solid var(--line);overflow:hidden}
.lbr{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line)}
.lbr:last-child{border:none}
.lbr .rk{width:20px;font-size:12px;font-weight:800;color:var(--mute);flex:none}
.lbr .av2{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none}
.lbr .b{flex:1;min-width:0}
.lbr .n{font-size:14px;font-weight:700}
.lbr .bar{height:6px;background:var(--card2);border-radius:999px;margin-top:5px;overflow:hidden}
.lbr .bar i{display:block;height:100%;border-radius:999px}
.lbr .p{font-size:15px;font-weight:800;flex:none}
.lbr .p small{font-size:10px;color:var(--mute);font-weight:600;margin-left:2px}
.lbr.mine{background:var(--card2)}

/* ── photos ────────────────────────────── */
.pact{display:flex;gap:10px;margin:0 20px 16px}
.pact button{flex:1;padding:13px;border-radius:14px;font-size:14px;font-weight:700;border:1.5px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;gap:7px}
.pact button.pri{background:var(--grad);color:#fff;border-color:transparent}
.pact button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.pact button.on{background:var(--card2);border-color:var(--accent);color:var(--accent-ink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px}
.ph{position:relative;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);aspect-ratio:3/4}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff}
.ph .cap .d{font-size:11.5px;font-weight:700}
.ph .cap .w{font-size:10.5px;opacity:.75;font-weight:600}
.ph .sel{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.ph.picked{outline:3px solid var(--accent);outline-offset:-3px}
.ph.picked .sel{background:var(--accent);border-color:var(--accent-ink)}

/* photo sheet */
.sheet{position:fixed;left:0;right:0;top:0;z-index:92;overscroll-behavior:contain;
  background:rgba(5,4,14,.72);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  /* height tracks the VISUAL viewport (set by JS from visualViewport). On iOS the
     software keyboard shrinks visualViewport but NOT the layout viewport, so a plain
     inset:0 overlay would keep the sheet pinned behind the keyboard. Using the visual
     height keeps flex-end ABOVE the keyboard. Falls back to 100dvh when JS hasn't run. */
  height:var(--vvh,100dvh)}
.sheet .inner{width:100%;max-width:480px;background:var(--bg);border-radius:24px 24px 0 0;
  padding:14px 20px calc(20px + env(safe-area-inset-bottom));
  /* fill the visible overlay height at most, and scroll internally if the content
     plus keyboard leaves little room — the Add Water button stays reachable. */
  max-height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.sheet-x{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:13px;padding:7px 13px 7px 9px;border-radius:11px;margin-bottom:12px;cursor:pointer}
.sheet-x:active{background:var(--card2)}
.sheet .inner::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}
.sheet h3{font-size:19px;font-weight:800;margin-bottom:14px}
.sheet .prev{width:100%;max-height:38vh;object-fit:contain;border-radius:16px;background:var(--card);margin-bottom:14px}
.sheet .fld{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:12px 14px}
.sheet .fld label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.sheet .fld input{width:100%;border:none;background:none;outline:none;font-size:16px;font-weight:600}
.sheet .rw{display:flex;gap:10px;margin-top:6px}
.sheet .rw button{flex:1;padding:15px;border-radius:14px;font-weight:700;font-size:15px}
.sheet .rw .go{background:var(--grad);color:#fff}
.sheet .rw .no{background:var(--card);border:1.5px solid var(--line)}
.sheet .rw .del{background:#FF4D5E;color:#fff}

/* viewer / compare */
#view2{position:fixed;inset:0;z-index:88;background:#040608;width:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;
  padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));color:#fff}
#view2 .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
#view2 .hd .x{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:19px;line-height:1}
#view2 .hd .ttl{font-size:15px;font-weight:700}
#view2 .frame{flex:1;display:flex;gap:8px;min-height:0}
#view2 .pane{flex:1;display:flex;flex-direction:column;min-width:0}
#view2 .pane img{flex:1;width:100%;object-fit:contain;min-height:0;border-radius:12px;background:#000}
#view2 .pane .m{text-align:center;padding-top:9px}
#view2 .pane .m .d{font-size:13px;font-weight:700}
#view2 .pane .m .w{font-size:11.5px;color:rgba(255,255,255,.6);font-weight:600}
#view2 .delta{text-align:center;padding:12px 0 4px;font-size:13.5px;font-weight:700;color:var(--cyan)}
#view2 .delta{text-align:center;margin:14px 0 4px}
#view2 .delta-days{font-size:16px;font-weight:800;color:var(--ink)}
#view2 .delta-sub{font-size:14px;font-weight:700;margin-top:3px}
#view2 .delta-sub.down{color:#37D67A}
#view2 .delta-sub.flat{color:var(--mute)}
#view2 .note{color:rgba(255,255,255,.65);font-size:13px;text-align:center;padding-top:8px}
#view2 .act{display:flex;gap:10px;margin-top:12px}
#view2 .act button{flex:1;padding:13px;border-radius:13px;font-weight:700;font-size:14px;background:rgba(255,255,255,.14);color:#fff}
#view2 .act button.del{background:#FF4D5E}

/* ── meals ─────────────────────────────── */
.macro.plan .planintro{font-size:12px;color:var(--mute);font-weight:500;line-height:1.5;margin:-2px 0 14px}
.planhd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.macro.plan .chip{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;background:var(--card2);color:var(--mute);border:1px solid var(--line)}
.macro.plan .pd{font-size:11.5px;font-weight:700;color:var(--mute)}
.cmphd{display:grid;grid-template-columns:1fr auto 52px;gap:10px;padding:0 0 8px;
  font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);
  border-bottom:1px solid var(--line)}
.cmphd span:last-child{text-align:right}
.cmp{display:grid;grid-template-columns:1fr auto 52px;gap:10px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line)}
.cmp:last-of-type{border-bottom:none}
.cmp .ck{font-size:13px;font-weight:700;color:var(--ink)}
.cmp .cv{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap}
.cmp .cv s{text-decoration:none;font-size:12px;font-weight:600;color:var(--mute);margin-left:5px}
.cmp .cv s::before{content:'/ '}
.cmp .cd{text-align:right;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.cmp .cd.ok{color:var(--mute)}
.cmp .cd.over{color:#FFB43D}
.cmp .cd.under{color:var(--accent-ink)}
.planfoot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;color:var(--mute);line-height:1.5}
.planfoot b{color:var(--accent-ink);font-weight:800}
.macro{margin:0 20px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.macro .kc{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.macro .kc .big{font-size:28px;font-weight:800;letter-spacing:-.03em}
.macro .kc .big small{font-size:12px;color:var(--mute);font-weight:600;margin-left:3px}
.macro .kc .tgt{font-size:12px;color:var(--mute);font-weight:600}
.mbars{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-width:0}
.mb{min-width:0}
.mb .top{display:flex;justify-content:space-between;gap:2px;font-size:10.5px;font-weight:700;margin-bottom:4px;white-space:nowrap}
.mb .top .k{color:var(--mute);letter-spacing:.05em;text-transform:uppercase}
.mb .trkm{height:6px;background:var(--card2);border-radius:999px;overflow:hidden}
.mb .trkm i{display:block;height:100%;border-radius:999px}
.mcard{margin:0 20px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex}
.mcard .sw{width:66px;flex:none;display:grid;place-items:center;color:rgba(255,255,255,.9);font-size:10px;font-weight:800;letter-spacing:.08em}
.mcard .bd{flex:1;padding:13px 14px;min-width:0;overflow-wrap:anywhere}
.mcard .sl{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.mcard h4{font-size:15px;font-weight:700;margin:2px 0 4px;line-height:1.25}
.mcard .mm{font-size:11.5px;color:var(--mute);font-weight:600;overflow-wrap:anywhere}
.mcard .mmac{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:5px;font-size:11.5px;color:var(--mute);font-weight:600}
.mcard .mmac b{color:var(--ink);font-weight:700}
.mcard .ac{display:flex;flex-direction:column;gap:5px;padding:12px 12px 12px 0;justify-content:center}
.svy{display:inline-flex;align-items:center;background:var(--card2);border-radius:8px;padding:2px 8px;font-size:10.5px;font-weight:700;margin-left:8px;text-transform:none;letter-spacing:normal;color:var(--accent-ink)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:8px}
.gbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.setup{margin:0 20px;background:var(--card);border:1px dashed var(--line);border-radius:var(--r);padding:22px 18px;text-align:center}
.setup h3{font-size:18px;font-weight:800;margin-bottom:6px}
.setup p{color:var(--mute);font-size:13.5px;margin-bottom:14px}
.frow{display:flex;gap:8px;min-width:0}
.frow .fld{flex:1 1 0;min-width:0;padding:0;border-bottom:none}
.inl{width:100%;min-width:0;padding:12px 6px;background:var(--card2);border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-weight:600;text-align:center}
.inl:focus{outline:none;border-color:var(--accent-ink)}
/* Meals setup card: uniform labels + fields, no stray dividers */
.setup{text-align:left}
.setup .sfield{margin-bottom:12px}
.setup .sfield:last-of-type{margin-bottom:0}
.setup .slabel{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.setup .frow{margin-bottom:0;align-items:flex-end}
.setup .frow .fld{padding:0;border:none;display:flex;flex-direction:column}
.setup .frow .slabel{text-align:center;font-size:10px}
.setup .inl{padding:13px 6px}
.setup .shelp{font-size:12px;color:var(--mute);font-weight:500;margin-top:6px;line-height:1.45}
.setup .selw select{width:100%}
/* grocery */
#gro{position:fixed;inset:0;z-index:86;background:var(--bg);width:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden}
#gro .hd{padding:calc(14px + env(safe-area-inset-top)) 20px 12px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
#gro .hd h2{flex:1;font-size:20px;font-weight:800}
#gro .hd .x{width:34px;height:34px;border-radius:50%;background:var(--card2);display:grid;place-items:center;font-size:20px;line-height:1}
#gro .who{display:flex;flex-wrap:wrap;gap:6px;padding:12px 20px}
#gro .who button{flex:none;padding:7px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:12.5px;font-weight:700;color:var(--mute)}
#gro .who button.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
#gro .bdy{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 20px calc(24px + env(safe-area-inset-bottom))}
.aisle{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:18px 0 8px}
.gitem{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.gitem .bx{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;background:var(--card)}
.gitem .bx svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3}
.gitem.ck .bx{background:var(--accent);border-color:var(--accent-ink)}
.gitem.ck .n{text-decoration:line-through;color:var(--mute)}
.gitem .n{flex:1;min-width:0;font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.gitem .q{flex:none;font-size:12.5px;color:var(--mute);font-weight:700;white-space:nowrap}

/* ── motion ────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes flame{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.08)}}
#view>*{animation:rise .5s cubic-bezier(.22,1,.36,1) both}
#view>*:nth-child(1){animation-delay:.02s}
#view>*:nth-child(2){animation-delay:.06s}
#view>*:nth-child(3){animation-delay:.10s}
#view>*:nth-child(4){animation-delay:.14s}
#view>*:nth-child(5){animation-delay:.18s}
#view>*:nth-child(6){animation-delay:.22s}
#view>*:nth-child(7){animation-delay:.26s}
#view>*:nth-child(8){animation-delay:.30s}
#view>*:nth-child(n+9){animation-delay:.34s}
.sheet{animation:fadeIn .18s ease both}
.sheet .inner{animation:sheetUp .34s cubic-bezier(.2,.9,.25,1.06) both}
button:active{transform:scale(.975)}
.btn:active,.play:active,
.card,.hero,.macro,.mcard,.vs,.lb{transition:transform .18s,box-shadow .18s}

/* ── streak ────────────────────────────── */
.streak{margin:0 20px 18px;padding:16px 18px;border-radius:var(--r);
  background:linear-gradient(105deg,rgba(10,156,250,.18),rgba(0,110,235,.12) 55%,transparent);
  border:1px solid var(--line);display:flex;align-items:center;gap:14px}
.streak .fl{font-size:30px;line-height:1;animation:flame 2.6s ease-in-out infinite}
.streak .b{flex:1;min-width:0}
.streak .n{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.streak .n small{font-size:13px;font-weight:700;color:var(--mute);margin-left:5px;letter-spacing:0}
.streak .s{font-size:12.5px;color:var(--mute);font-weight:600;margin-top:2px}
.streak .lv{flex:none;text-align:right}
.streak .lv .t{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.streak .lv .v{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1}

/* ── food log ──────────────────────────── */
.logact{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 20px 16px}
.logact button{padding:14px 6px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink)}
.logact button .e{font-size:19px}
.mealgrp{margin:0 20px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mealgrp .h{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
.mealgrp .h .n{font-size:14px;font-weight:800}
.mealgrp .h .v{font-size:12px;font-weight:700;color:var(--mute)}
.mealgrp .h .add{width:28px;height:28px;border-radius:9px;background:var(--card2);color:var(--accent-ink);
  font-size:17px;font-weight:800;line-height:1;display:grid;place-items:center;margin-left:8px}
.fitem{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line)}
.fitem:last-child{border-bottom:none}
.fitem .b{flex:1;min-width:0}
.fitem .n{font-size:14px;font-weight:600}
.fitem .m{font-size:11px;font-weight:700;color:var(--mute);margin-top:2px}
.fitem .m b{font-weight:800}
.fitem .k{font-size:14px;font-weight:800;flex:none}
.fitem .x{flex:none;width:26px;height:26px;border-radius:8px;background:var(--card2);color:var(--mute);
  font-size:15px;line-height:1;display:grid;place-items:center}
.fempty{padding:16px;text-align:center;font-size:12.5px;color:var(--mute);font-weight:600}
.srchbox{width:100%;padding:13px 14px;background:var(--card);border:1.5px solid var(--line);
  border-radius:13px;font-size:15px;font-weight:600;margin-bottom:10px}
.srchbox:focus{outline:none;border-color:var(--accent-ink)}
.fres{max-height:44vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
.fres .r{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.fres .r:last-child{border-bottom:none}
.fres .r .b{flex:1;min-width:0}
.fres .r .n{font-size:14px;font-weight:600}
.fres .r .m{font-size:11px;color:var(--mute);font-weight:700}
.fres .r .star{flex:none;font-size:15px;opacity:.3}
.fres .r .star.on{opacity:1}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}

/* ── challenges ────────────────────────── */
.chal{margin:0 20px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;position:relative;overflow:hidden}
.chal:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(185,198,212,.14),transparent 60%)}
.chal>*{position:relative}
.chal .t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
.chal .t .d{font-size:24px;font-weight:800;letter-spacing:-.02em}
.chal .t .d small{font-size:13px;color:var(--mute);font-weight:700}
.chal .t .e{font-size:11px;font-weight:700;color:var(--mute)}
.chal .n{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:10px}
.chal .bar{height:8px;background:var(--card2);border-radius:999px;overflow:hidden}
.chal .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--mag));
  transition:width .9s cubic-bezier(.22,1,.36,1)}
.chal .st{display:flex;justify-content:space-between;margin-top:9px;font-size:11.5px;font-weight:700;color:var(--mute)}
.chal .st b{color:var(--ink)}

/* ── today panel ───────────────────────── */
.today{margin:0 20px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.today .hd{display:flex;align-items:center;justify-content:space-between;padding:15px 18px 12px}
.today .hd .k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.today .hd .go{font-size:12px;font-weight:800;color:var(--accent-ink)}
.plan-hint{margin:2px 18px 16px;padding:10px 12px;background:var(--card2);border-radius:10px;
  font-size:12.5px;color:var(--mute);line-height:1.5}
.plan-hint b{color:var(--ink);font-weight:700}
.kcal{display:flex;align-items:flex-end;justify-content:space-between;padding:0 18px 10px;gap:12px}
.kcal .big{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:.95}
.kcal .big small{font-size:12px;font-weight:700;color:var(--mute);letter-spacing:0;margin-left:5px}
.kcal .rt{text-align:right;flex:none}
.kcal .rt .v{font-size:17px;font-weight:800;line-height:1.1}
.kcal .rt .l{font-size:10.5px;font-weight:700;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.trk2{height:8px;margin:0 18px 16px;background:var(--card2);border-radius:999px;overflow:hidden}
.trk2 i{display:block;height:100%;border-radius:999px;background:var(--grad);transition:width .9s cubic-bezier(.22,1,.36,1)}
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 18px 16px}
.mg .c{min-width:0}
.mg .c .t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;gap:4px}
.mg .c .n{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mg .c .v{font-size:13px;font-weight:800;white-space:nowrap}
.mg .c .v s{text-decoration:none;color:var(--mute);font-weight:700;font-size:11px}
.mg .c .b{height:5px;background:var(--card2);border-radius:999px;overflow:hidden}
.mg .c .b i{display:block;height:100%;border-radius:999px;transition:width .9s cubic-bezier(.22,1,.36,1)}
.mg .c .lf{font-size:10.5px;font-weight:700;color:var(--mute);margin-top:4px}

.wat{display:flex;align-items:center;gap:13px;padding:14px 18px;border-top:1px solid var(--line);background:var(--card2)}
.wat .ic{width:36px;height:36px;border-radius:11px;background:rgba(0,195,254,.20);display:grid;place-items:center;font-size:17px;flex:none}
.wat .b{flex:1;min-width:0}
.wat .b .t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.wat .b .t .n{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.wat .b .t .v{font-size:13.5px;font-weight:800}
.wat .b .t .v s{text-decoration:none;color:var(--mute);font-size:11px;font-weight:700}
.wat .b .bar{height:5px;background:var(--card);border-radius:999px;overflow:hidden}
.wat .b .bar i{display:block;height:100%;border-radius:999px;background:var(--cyan);transition:width .8s cubic-bezier(.22,1,.36,1)}
.wat .add{flex:none;width:40px;height:40px;border-radius:13px;background:var(--cyan);color:#07090C;
  font-size:22px;font-weight:700;line-height:1;display:grid;place-items:center}

/* water sheet */
.wbig{text-align:center;padding:8px 0 18px}
.wbig .v{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1}
.wbig .v small{font-size:15px;color:var(--mute);font-weight:700;margin-left:4px}
.wbig .bar{height:8px;background:var(--card2);border-radius:999px;overflow:hidden;margin:14px 0 0}
.wbig .bar i{display:block;height:100%;border-radius:999px;background:var(--cyan)}
.wquick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.wquick button{padding:14px 4px;border-radius:13px;background:var(--card);border:1.5px solid var(--line);
  font-size:14px;font-weight:800;color:var(--ink)}
.wquick button:active{border-color:var(--cyan)}
.wrow{display:flex;gap:8px;margin-bottom:12px}
.wrow input{flex:1;min-width:0;padding:14px;background:var(--card);border:1.5px solid var(--line);
  border-radius:13px;font-size:16px;font-weight:700;text-align:center}
.wrow input:focus{outline:none;border-color:var(--cyan)}
.wrow button{flex:none;padding:0 20px;border-radius:13px;background:var(--cyan);color:#07090C;font-weight:800;font-size:14px}

/* exercise row thumbnails */
.exth{border-radius:12px;flex:none;overflow:hidden;display:grid;place-items:center}
.exth svg{width:100%;height:auto}

/* ── rings ─────────────────────────────── */
.rings{margin:0 20px 18px;padding:18px 12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rg{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.rg .w{position:relative;width:76px;height:76px}
.rg svg{width:100%;height:100%;transform:rotate(-90deg)}
.rg circle{fill:none;stroke-linecap:round}
.rg .bg{stroke:var(--card2);stroke-width:7}
.rg .fg{stroke-width:7;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
.rg .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.rg .mid .v{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1}
.rg .mid .u{font-size:9px;font-weight:700;color:var(--mute)}
.rg .k{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.rg .tap{display:flex;gap:5px;margin-top:-2px}
.rg .tap button{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  background:var(--card2);color:var(--ink);font-size:14px;font-weight:800;line-height:1}

/* ── coach ─────────────────────────────── */
.coach{margin:0 20px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;position:relative;overflow:hidden}
.coach:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.coach .k{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:7px}
.coach p{font-size:14.5px;line-height:1.5;font-weight:500}
.coach p b{font-weight:800;color:var(--ink)}
.coach .more{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--accent-ink)}

/* ── week progress ─────────────────────── */
.wprog{margin:0 20px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.wprog .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.wprog .top .k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.wprog .top .v{font-size:15px;font-weight:800}
.wprog .top .v small{color:var(--mute);font-weight:700}
.wpb{display:flex;gap:4px}
.wpb i{flex:1;height:8px;border-radius:999px;background:var(--card2);transition:background .5s}
.wpb i.on{background:var(--grad)}
.wprog .xpb{height:5px;background:var(--card2);border-radius:999px;margin-top:14px;overflow:hidden}
.wprog .xpb i{display:block;height:100%;background:var(--grad);border-radius:999px;
  transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.wprog .xl2{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;font-weight:700;color:var(--mute)}

/* ── badges ────────────────────────────── */
.badges{display:flex;gap:8px;overflow-x:auto;padding:2px 0}
.bdg{flex:none;width:64px;text-align:center}
.bdg .c{width:52px;height:52px;margin:0 auto 6px;border-radius:16px;display:grid;place-items:center;
  font-size:22px;background:var(--card2);border:1px solid var(--line);filter:grayscale(1);opacity:.35}
.bdg.on .c{filter:none;opacity:1;background:linear-gradient(145deg,rgba(10,156,250,.25),rgba(0,195,254,.15));border-color:var(--accent-ink)}
.bdg .n{font-size:9.5px;font-weight:700;color:var(--mute);line-height:1.25}
.bdg.on .n{color:var(--ink)}

/* ── auth ──────────────────────────────── */
#auth{position:fixed;inset:0;z-index:60;background:var(--bg);
  width:100%;max-width:480px;margin:0 auto;
  display:flex;flex-direction:column;justify-content:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(40px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom))}
#auth .brand{margin-bottom:22px;text-align:center}
#auth .brand .lock{width:100%;max-width:210px;height:auto;display:block;margin:0 auto 14px;border-radius:12px}
#auth .brand h1:empty{display:none}
#auth .sub:empty{display:none;margin:0}
#auth .fine:empty{display:none;margin:0}

#auth h1{font-size:30px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;line-height:1;margin-bottom:14px;text-align:center}
#auth .sub{color:var(--mute);font-size:15px;line-height:1.5;max-width:32ch}
#auth .fields{margin-bottom:14px}
#auth input{width:100%;padding:15px 16px;background:var(--card);border:1.5px solid var(--line);
  border-radius:14px;font-size:16px;font-weight:600;margin-bottom:10px}
#auth input:focus{outline:none;border-color:var(--accent-ink)}
#auth .msg{font-size:13px;font-weight:600;color:#FF4D5E;margin-bottom:10px;min-height:18px}
#auth .swap{text-align:center;margin-top:18px;font-size:14px;color:var(--mute);font-weight:600}
#auth .swap b{color:var(--accent-ink);font-weight:800}
#auth .fine{margin-top:26px;font-size:11.5px;color:var(--mute);line-height:1.5;text-align:center}
#auth .load{position:fixed;inset:0;background:rgba(7,9,12,.94);z-index:200;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:16px}
#auth .load .t{font-size:14px;font-weight:700;color:var(--mute)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── dropdowns ─────────────────────────── */
.selw{position:relative}
.selw:after{content:'';position:absolute;right:16px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
  transform:translateY(-72%) rotate(45deg);pointer-events:none}
select{width:100%;appearance:none;-webkit-appearance:none;padding:13px 38px 13px 14px;
  background:var(--card2);border:1.5px solid var(--line);border-radius:13px;
  font-size:14.5px;font-weight:600;color:var(--ink)}
select:focus{outline:none;border-color:var(--accent-ink)}
option{background:#12161B;color:#F2F5F8}
.dd{position:relative}
.ddbtn{display:block;width:100%;box-sizing:border-box;min-height:50px;
  padding:13px 38px 13px 14px;background:var(--card2);border:1.5px solid var(--line);
  border-radius:13px;font-size:14.5px;line-height:22px;font-weight:600;color:var(--ink);
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ddbtn.ph{color:var(--mute);font-weight:500}








/* ── demo library ──────────────────────── */
#lib{position:fixed;inset:0;z-index:87;background:var(--bg);width:100%;max-width:480px;
  margin:0 auto;display:flex;flex-direction:column;overflow:hidden}
#lib .hd{padding:calc(14px + env(safe-area-inset-top)) 20px 12px;background:var(--card);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
#lib .hd h2{flex:1;font-size:20px;font-weight:800}
#lib .hd .x{width:34px;height:34px;border-radius:50%;background:var(--card2);display:grid;place-items:center;font-size:20px;line-height:1}
#lib .srch{padding:12px 20px}
#lib .srch input{width:100%;padding:12px 14px;background:var(--card2);border:1.5px solid var(--line);
  border-radius:13px;font-size:15px;font-weight:600}
#lib .srch input:focus{outline:none;border-color:var(--accent-ink)}
#lib .bdy{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 20px calc(24px + env(safe-area-inset-bottom))}
.libr{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.libr .th{width:58px;height:58px;border-radius:12px;flex:none;overflow:hidden;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:rgba(255,255,255,.75)}
.libr .th img{width:100%;height:100%;object-fit:cover}
.libr .b{flex:1;min-width:0}
.libr .n{font-size:14px;font-weight:700}
.libr .s{font-size:11.5px;color:var(--mute);font-weight:600}
.libr .go{flex:none;font-size:11px;font-weight:800;padding:7px 11px;border-radius:9px;
  border:1.5px solid var(--line);color:var(--mute)}
.libr.has .go{background:var(--accent);border-color:var(--accent-ink);color:#07090C}

/* ── exercise tile ─────────────────────── */
.exth img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.exth .gl{font-size:11px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.82)}
.libr .th .gl{font-size:12px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.82)}
.pmedia .anatwrap{position:absolute;inset:0;display:grid;place-items:center;padding:50px 26px 16px;z-index:1}
.pmedia .anatwrap svg{max-height:100%;width:auto}

/* ── exercise history ──────────────────── */
.lastbox{background:linear-gradient(100deg,rgba(0,195,254,.14),rgba(0,110,235,.08));
  border:1px solid rgba(0,195,254,.3);border-radius:16px;padding:14px 16px;margin-bottom:12px}
.lastbox .k{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.lastbox .v{font-size:19px;font-weight:800;letter-spacing:-.02em}
.lastbox .d{font-size:11.5px;color:var(--mute);font-weight:700;margin-top:3px}
.lastbox .sug{margin-top:10px;padding-top:10px;border-top:1px solid rgba(0,195,254,.2);
  font-size:13px;font-weight:600;line-height:1.45}
.lastbox .sug b{color:var(--cyan);font-weight:800}

.hist{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:12px}
.hist .hr{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line)}
.hist .hr:last-child{border-bottom:none}
.hist .hr .d{font-size:11.5px;font-weight:700;color:var(--mute);width:52px;flex:none}
.hist .hr .s{flex:1;min-width:0;font-size:13.5px;font-weight:700}
.hist .hr .e{font-size:12px;font-weight:800;flex:none}
.hist .hr .e .hist .hr .e.dn{color:var(--mute)}

.logbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 15px;margin-bottom:12px}
.logbox .k{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.logrow{display:flex;gap:8px;margin-bottom:10px}
.logrow .f{flex:1;min-width:0}
.logrow .f label{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.logrow input{width:100%;padding:12px 8px;background:var(--card2);border:1.5px solid var(--line);
  border-radius:12px;font-size:17px;font-weight:800;text-align:center}
.logrow input:focus{outline:none;border-color:var(--accent-ink)}
.logrow .go{flex:none;align-self:flex-end;padding:0 18px;height:46px;border-radius:12px;
  background:var(--accent);color:#07090C;font-weight:800;font-size:14px}
.todayset{display:flex;flex-wrap:wrap;gap:6px}
.todayset .p{font-size:12px;font-weight:800;padding:6px 10px;border-radius:9px;
  background:rgba(10,156,250,.16);color:var(--mag);border:1px solid rgba(10,156,250,.3)}
.todayset .un{font-size:12px;font-weight:700;padding:6px 10px;border-radius:9px;
  background:var(--card2);color:var(--mute);border:1px solid var(--line)}
.exnote{width:100%;padding:12px 14px;background:var(--card2);border:1.5px solid var(--line);
  border-radius:12px;font-size:14px;font-weight:500;font-family:inherit;resize:none;color:var(--ink)}
.exnote:focus{outline:none;border-color:var(--accent-ink)}

/* ── target ────────────────────────────── */
.tcard{margin:0 20px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.tcard h4{font-size:14px;font-weight:800;margin-bottom:4px}
.tcard .tsub{font-size:12.5px;color:var(--mute);line-height:1.5;margin-bottom:14px}
.tcard input{width:100%;padding:12px 14px;background:var(--card2);border:1.5px solid var(--line);
  border-radius:12px;font-size:15px;font-weight:700;color:var(--ink)}
.tcard input:focus{outline:none;border-color:var(--accent)}
.tlab{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin:16px 0 10px}
.shapes{display:flex;gap:6px}
.shape{flex:1;min-width:0;background:#0A0A0C;border:1.5px solid var(--line);border-radius:12px;
  padding:6px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:border-color .15s,box-shadow .15s}
.shape .fig{width:100%;height:auto;display:block;border-radius:7px;
  filter:brightness(.92) saturate(.85);transition:filter .15s}
.shape.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 16px -2px var(--accent)}
.shape.on .fig{filter:brightness(1.25) saturate(1.05)}
.shape .n{font-size:9px;font-weight:800;color:var(--mute);letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap}
.shape.on .n{color:var(--accent-ink)}
.tnote{font-size:12px;color:var(--mute);line-height:1.5;margin-top:12px}
.goalrow{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--mute);font-weight:600}
.goalrow b{color:var(--accent-ink);font-weight:800}

/* ── cloud ─────────────────────────────── */
.cloud{margin:0 20px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.cloud h4{font-size:14px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:7px}
.cloud .dot{width:8px;height:8px;border-radius:50%;flex:none}
.cloud .dot.on{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.cloud .dot.off{background:var(--mute)}
.cloud .dot.err{background:#FF4D5E}
.cloud .sub{font-size:12.5px;color:var(--mute);line-height:1.5;margin-bottom:12px}
.cloud input{width:100%;padding:12px 14px;background:var(--card2);border:1.5px solid var(--line);
  border-radius:12px;font-size:14px;font-weight:600;margin-bottom:8px}
.cloud input:focus{outline:none;border-color:var(--accent)}
.code{display:flex;align-items:center;justify-content:space-between;background:var(--card2);
  border:1.5px dashed var(--line);border-radius:12px;padding:12px 14px;margin:10px 0}
.code .v{font-family:ui-monospace,Menlo,monospace;font-size:20px;font-weight:800;letter-spacing:.15em;color:var(--accent-ink)}
.code .l{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.cloud .two{display:flex;gap:8px;margin-top:2px}
.cloud .two .btn{flex:1;margin:0;padding:13px 10px;font-size:13.5px}

/* ── data & backup ─────────────────────── */
.dcardz{margin:0 20px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.dcardz h4{font-size:14px;font-weight:800;margin-bottom:10px}
.dstat{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.dstat:last-of-type{border-bottom:none}
.dstat .k{color:var(--mute);font-weight:600}
.dstat .v{font-weight:800}
.dstat .v.good{color:var(--cyan)}
.dstat .v.warn{color:#FFB43D}
.dstat .v.bad{color:#FF4D5E}
.tog{width:52px;height:30px;border-radius:999px;background:var(--card2);border:1px solid var(--line);
  position:relative;padding:0;transition:background .18s}
.tog.on{background:var(--accent);border-color:var(--accent)}
.tog .knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;
  background:#fff;transition:left .18s}
.tog.on .knob{left:24px}
.tinybtn{margin-left:8px;padding:4px 11px;border-radius:8px;background:var(--card2);
  border:1px solid var(--line);color:var(--accent-ink);font-size:11px;font-weight:800}
.invhd{display:flex;justify-content:space-between;align-items:center;margin:14px 0 8px;
  font-size:13px;font-weight:800}
.invrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.invrow:last-child{border-bottom:none}
.invrow.done{opacity:.55}
.invrow .ic{font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:13px;
  letter-spacing:.06em;color:var(--accent-ink);background:var(--card2);
  padding:6px 9px;border-radius:8px;border:1px solid var(--line);white-space:nowrap}
.invrow .ib2{flex:1;min-width:0}
.invrow .ib2 .n{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invrow .ib2 .m{font-size:11px;color:var(--mute)}
.invx{width:26px;height:26px;flex:none;border-radius:7px;background:transparent;border:1px solid var(--line);color:var(--mute);font-size:16px;line-height:1}
.invused{font-size:11px;font-weight:700;color:var(--mute);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.05em}
.dbar{height:6px;background:var(--card2);border-radius:999px;overflow:hidden;margin:10px 0 4px}
.dbar i{display:block;height:100%;border-radius:999px;background:var(--grad)}
.dnote{font-size:11.5px;color:var(--mute);line-height:1.5;margin-top:10px}

/* ── bulk import ───────────────────────── */
.imp{margin:0 20px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.imp h4{font-size:14px;font-weight:800;margin-bottom:6px}
.imp p{font-size:12.5px;color:var(--mute);line-height:1.5;font-weight:500;margin-bottom:12px}
.imp .bar{height:6px;background:var(--card2);border-radius:999px;overflow:hidden;margin-bottom:8px}
.imp .bar i{display:block;height:100%;background:var(--grad);width:0;transition:width .2s}
.imp .st{font-size:11.5px;font-weight:700;color:var(--mute)}
.imp .st b{color:var(--cyan)}
.imp .st .bad{color:var(--gold)}

/* ── anatomy ───────────────────────────── */
.anat{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:14px 10px 10px;margin-bottom:12px}
.anat .lbl{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);text-align:center;margin-top:8px}
.mchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.mchip{font-size:11px;font-weight:700;padding:5px 9px;border-radius:8px;
  background:rgba(10,156,250,.16);color:var(--mag);border:1px solid rgba(10,156,250,.3)}
.mchip.sec{background:var(--card2);color:var(--mute);border-color:var(--line)}
.steps{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:12px}
.step{padding:13px 15px;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .h{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.step .h.a{color:var(--cyan)} .step .h.b{color:var(--mag)} .step .h.c{color:var(--gold)}
.step p{font-size:14px;line-height:1.5;font-weight:500}
.pmedia .anatwrap{position:absolute;inset:0;display:grid;place-items:center;padding:44px 20px 14px;z-index:1}
.pmedia .anatwrap svg{max-height:100%;width:auto;opacity:.95}

/* ── exercise demo ─────────────────────── */
.demo{width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--card2);
  display:grid;place-items:center;margin-bottom:14px;position:relative}
.demo img{width:100%;height:100%;object-fit:cover}
.demo .ph0{font-size:64px;font-weight:800;font-style:italic;color:rgba(255,255,255,.14)}
.demo .hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:11.5px;color:var(--mute);font-weight:600}
.dact{display:flex;gap:8px;margin-bottom:12px}
.dact a,.dact button{flex:1;padding:12px;border-radius:13px;font-size:13.5px;font-weight:700;text-align:center;
  text-decoration:none;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  display:flex;align-items:center;justify-content:center;gap:6px}
.dact .yt{background:#FF4D5E;border-color:#FF4D5E;color:#fff}
.dact svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.pmedia .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero .media .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.9}

.qchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}

#err{position:fixed;left:10px;right:10px;bottom:10px;z-index:999;background:#FF4D5E;color:#fff;
  border-radius:14px;padding:12px 14px;font-size:12px;font-family:ui-monospace,Menlo,monospace;
  line-height:1.45;max-height:40vh;overflow:auto;box-shadow:0 8px 30px rgba(0,0,0,.5)}
#err b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
#err .x{position:absolute;top:8px;right:10px;font-size:18px;line-height:1;color:#fff}

canvas#fx{position:fixed;inset:0;pointer-events:none;z-index:95}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Profile redesign ── */
.psubline{font-size:13px;color:var(--mute);font-weight:600;margin-top:3px}
.pseg{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:14px;position:sticky;top:0;z-index:5}
.pseg-b{flex:1;border:0;background:transparent;color:var(--mute);font-weight:700;font-size:13.5px;padding:9px 0;border-radius:9px;cursor:pointer;transition:.15s}
.pseg-b.on{background:var(--accent);color:#fff}
.ocard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 16px;margin-bottom:12px}
.ocard-h{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--mute)}
.ocard-big{font-size:20px;font-weight:800;margin-top:5px}
.ocard-l{font-size:13.5px;color:var(--mute);margin-top:3px}
.ocard-edit{margin-top:12px;background:transparent;border:1px solid var(--accent-ink);color:var(--accent-ink);font-weight:700;font-size:13px;padding:7px 15px;border-radius:9px;cursor:pointer}
.scard{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:12px}
.srow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 16px;cursor:pointer;color:var(--ink)}
.scard .srow:last-child{border-bottom:0}
.srow-b{flex:1;min-width:0}
.srow-l{font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.03em}
.srow-v{font-size:15px;font-weight:700;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.srow-s{font-size:12px;color:var(--mute);margin-top:2px}
.srow-e{flex-shrink:0;font-size:12.5px;font-weight:800;color:var(--accent-ink)}

.sgroup{margin-bottom:18px}
.sgroup-h{font-size:12.5px;font-weight:800;letter-spacing:.05em;color:var(--ink);margin:0 4px 8px;text-transform:uppercase;opacity:.85}
.swatches{display:flex;gap:9px;margin-top:4px}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.swatch.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg) inset}

/* ── IA restructure additions ── */
.prow-top{display:flex;align-items:flex-start;gap:12px}
.backt{background:transparent;border:0;color:var(--accent-ink);font-weight:700;font-size:14px;cursor:pointer;padding:4px 0}

.tunehint{background:linear-gradient(100deg,rgba(10,156,250,.16),rgba(0,110,235,.08));border:1px solid rgba(10,156,250,.4);border-radius:12px;padding:10px 12px;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--ink);line-height:1.4}
.tunehint .tk{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:3px}

/* ═══ RECIPE DETAIL — the "special" meal screen ═══ */
.rhero{margin:4px -20px 0;padding:24px 20px 20px;border-radius:18px 18px 0 0;position:relative;overflow:hidden}
.rhero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,10,14,.55));pointer-events:none}
.rhero-tag{position:relative;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:8px}
.rhero-t{position:relative;font-size:25px;font-weight:800;font-style:italic;letter-spacing:-.01em;line-height:1.05;color:#fff;margin:0}
.rstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 0}
.rstat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 8px;text-align:center}
.rstat .rv{font-size:20px;font-weight:800;letter-spacing:-.02em}
.rstat .rl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:3px}
.rmac{display:flex;justify-content:center;gap:16px;margin:12px 0 4px;font-size:13px;color:var(--mute);font-weight:600;flex-wrap:wrap}
.rmac b{color:var(--ink);font-weight:800}
.rsec{margin-top:20px}
.rsec-h{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.rsec-s{font-size:12.5px;color:var(--mute);font-weight:500;line-height:1.5;margin-bottom:12px}
.achips{display:flex;flex-wrap:wrap;gap:8px}
.achip{background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:700;padding:8px 13px;border-radius:11px;cursor:pointer;transition:all .15s}
.achip:active{transform:scale(.96)}
.achip.on{background:var(--grad);border-color:transparent;color:#fff}
.swaps{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.swap{display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid rgba(10,156,250,.35);border-radius:12px;padding:11px 13px;font-size:13.5px}
.swap .sf{color:var(--mute);font-weight:600;text-decoration:line-through}
.swap .sar{color:var(--accent-ink);font-weight:800}
.swap .st{color:var(--ink);font-weight:700;flex:1}
.ringlist{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ingrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line)}
.ingrow:last-child{border-bottom:none}
.ingrow.sw{background:rgba(10,156,250,.07)}
.ingrow .rn{font-size:14.5px;font-weight:600;display:flex;flex-direction:column;line-height:1.3}
.ingrow .rn .was{font-size:11px;color:var(--mute);font-weight:600;margin-top:2px;text-decoration:line-through}
.ingrow .rq{font-size:13px;font-weight:700;color:var(--mute);white-space:nowrap}
.rsteps{display:flex;flex-direction:column;gap:8px}
.rstep{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;cursor:pointer;transition:background .15s}
.rstep:active{background:var(--card2)}
.rstep .rsbox{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--card2);border:1.5px solid var(--line);color:var(--mute);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.rstep .rsbox svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:3}
.rstep .rst{font-size:14.5px;font-weight:500;line-height:1.45;padding-top:2px;color:var(--ink)}
.rstep.done{background:rgba(10,156,250,.06);border-color:rgba(10,156,250,.3)}
.rstep.done .rsbox{background:var(--grad);border-color:transparent}
.rstep.done .rst{color:var(--mute);text-decoration:line-through}

/* ═══ compact preference rows (Food preferences) ═══ */
.prefcard{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pref{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:15px 16px;cursor:pointer;transition:background .15s}
.pref:last-child{border-bottom:none}
.pref:active{background:var(--card2)}
.pref-b{flex:1;min-width:0}
.pref-l{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.pref-v{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pref-v.ph{color:var(--mute);font-weight:500}
.pref-e{flex-shrink:0;font-size:22px;color:var(--mute);line-height:1}

.atag{display:inline-flex;align-items:center;background:var(--card2);border:1px solid var(--line);color:var(--mute);font-size:12px;font-weight:700;padding:6px 11px;border-radius:9px}
.atag.warn{border-color:rgba(255,159,64,.5);color:#FF9F40}

/* ═══ ONBOARDING — clean, visual, well-spaced ═══ */
#ob{padding:28px 20px calc(30px + env(safe-area-inset-bottom))}
#ob-form{margin-top:4px}
.obsec{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin:22px 2px 10px}
.obhelp{font-size:12.5px;color:var(--mute);font-weight:500;line-height:1.5;margin:0 2px 12px}
/* the merged visual goal picker */
.goalfigs{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.gfig{background:#0A0A0C;border:1.5px solid var(--line);border-radius:13px;padding:8px 3px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;min-width:0;
  transition:border-color .15s,box-shadow .15s}
.gfig .fig{width:100%;height:auto;display:block;border-radius:8px;
  filter:brightness(.9) saturate(.82);transition:filter .15s}
.gfig .gn{font-size:9.5px;font-weight:800;color:var(--mute);letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap}
.gfig.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 18px -3px var(--accent)}
.gfig.on .fig{filter:brightness(1.28) saturate(1.08)}
.gfig.on .gn{color:var(--accent-ink)}
.gfig:active{transform:scale(.97)}
/* give the compact rows a touch more breathing room so nothing crowds the edges */
#ob .pref{padding:16px 16px}
#ob .pref-v{padding-right:4px}

/* ═══ upgraded dropdown picker — spaced pills, accent glow, clean check ═══ */
.ddlist{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.ddopt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  background:var(--card2);border:1.5px solid var(--line);border-radius:14px;padding:15px 16px;cursor:pointer;
  transition:border-color .16s,background .16s,box-shadow .16s,transform .1s}
.ddopt:active{transform:scale(.985)}
.ddopt .ddt{flex:1;min-width:0;font-size:15px;font-weight:650;color:var(--ink);line-height:1.3}
.ddopt .ddck{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;background:transparent;transition:background .16s,border-color .16s}
.ddopt .ddck svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ddopt.on{border-color:var(--accent);background:linear-gradient(100deg,rgba(10,156,250,.14),rgba(10,156,250,.05));
  box-shadow:0 0 0 1px var(--accent),0 6px 20px -8px var(--accent)}
.ddopt.on .ddt{color:var(--ink)}
.ddopt.on .ddck{background:var(--grad);border-color:transparent}

/* upgraded editor rows (Settings pickers) — match the .ddopt pill look, check on left */
.card .ddrow, .ddrow{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  background:var(--card2);border:1.5px solid var(--line);border-radius:14px;padding:14px 15px;
  margin-bottom:8px;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s,transform .1s}
.ddrow:last-child{margin-bottom:0}
.ddrow:active{transform:scale(.985)}
.ddrow .bx{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;background:transparent;margin-top:1px;transition:background .16s,border-color .16s}
.ddrow .bx svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ddrow .t{flex:1;min-width:0;font-size:15px;font-weight:650;color:var(--ink);line-height:1.35}
.ddrow.on{border-color:var(--accent);background:linear-gradient(100deg,rgba(10,156,250,.14),rgba(10,156,250,.05));
  box-shadow:0 0 0 1px var(--accent),0 6px 20px -8px var(--accent)}
.ddrow.on .bx{background:var(--grad);border-color:transparent}
/* the editor cards that wrap ddrows shouldn't add their own border now */
.sheet .card:has(.ddrow){background:none;border:none;padding:0}

/* Plan tab — actual-eaten tracker rows (0 until logged) */
.eatrow{padding:12px 0;border-bottom:1px solid var(--line)}
.eatrow:last-of-type{border-bottom:none}
.er-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.er-k{font-size:14.5px;font-weight:700;color:var(--ink)}
.er-v{font-size:15px;font-weight:800;color:var(--ink)}
.er-v s{text-decoration:none;font-size:13px;font-weight:600;color:var(--mute)}
.er-bar{height:7px;border-radius:4px;background:var(--card2);overflow:hidden}
.er-bar i{display:block;height:100%;border-radius:4px;background:var(--grad);transition:width .4s cubic-bezier(.2,.9,.2,1)}
.er-left{font-size:11.5px;font-weight:600;color:var(--mute);margin-top:5px}
.menu-ref{display:block;color:var(--mute);margin-bottom:4px}

/* workout hero — meaningful watermark + real swipe dots */
.glyph-word{font-size:clamp(44px,15vw,84px);font-weight:800;font-style:italic;letter-spacing:-.04em;
  color:rgba(255,255,255,.14);text-shadow:0 0 40px rgba(255,255,255,.12);line-height:1;white-space:nowrap;
  max-width:92%;overflow:hidden;text-overflow:ellipsis}
.doneflag{position:absolute;top:14px;right:14px;z-index:2;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;padding:5px 10px;border-radius:9px}
.pgs{display:flex;gap:7px;justify-content:center;padding:14px 0 0}
.pgdot{width:7px;height:7px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;
  transition:background .2s,width .2s,transform .1s}
.pgdot.on{background:var(--accent);width:20px;border-radius:4px}
.pgdot:active{transform:scale(.85)}

/* first-load splash — logo centered, subtle loader, fades out when ready */
#splash{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;transition:opacity .45s ease;will-change:opacity}
#splash.gone{opacity:0;pointer-events:none}
.splash-logo{width:min(180px,52vw);height:auto;animation:splashpulse 1.6s ease-in-out infinite}
.splash-bar{width:120px;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.splash-bar i{display:block;height:100%;width:40%;border-radius:2px;background:var(--grad);
  animation:splashslide 1.1s ease-in-out infinite}
@keyframes splashpulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes splashslide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* player footer polish — clearer up-next + a real Skip button */









/* player footer — back(+prev) on the left, up-next(+✓) on the right */











/* player: hard guarantee nothing overflows horizontally */
.pbody, #play{overflow-x:hidden}
.pbody *{max-width:100%}
/* superset header rows: name + load on one tidy line, load wraps under if long */





/* per-exercise set tracker under the title */





/* active progress segment gets a subtle glow */


/* toast */
#toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);
  background:var(--card2);border:1px solid var(--line);color:var(--ink);font-size:13.5px;font-weight:700;
  padding:11px 18px;border-radius:12px;z-index:300;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 30px rgba(0,0,0,.5)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* recap entry button */
.recapbtn{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  color:var(--ink);font-size:13px;font-weight:800;padding:9px 14px;border-radius:12px;cursor:pointer;margin-top:4px}
.recapbtn svg{width:16px;height:16px;stroke:var(--accent-ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.recapbtn:active{background:var(--card2)}
/* the shareable recap card */
.recap{background:linear-gradient(160deg,#0B0F14,#12161B);border:1px solid var(--line);border-radius:20px;
  padding:22px 20px;overflow:hidden;position:relative}
.recap:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad)}
.rc-head{text-align:center;margin-bottom:18px}
.rc-brand{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;justify-content:center;gap:6px}
.rc-fi{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--grad);color:#fff;font-style:italic;font-weight:800;font-size:12px}
.rc-title{font-size:27px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;margin-top:8px}
.rc-range{font-size:12.5px;color:var(--mute);font-weight:600;margin-top:4px}
.rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.rc-stat{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:16px 12px;text-align:center}
.rc-stat.big{grid-column:span 1}
.rc-v{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.rc-v small{font-size:14px;color:var(--mute);font-weight:700;margin-left:2px}
.rc-k{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin-top:7px}
.rc-prs{margin-top:14px}
.rc-sec{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.rc-pr{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
.rc-pr:last-child{border-bottom:none}
.rc-pn{font-size:14.5px;font-weight:700}
.rc-pv{font-size:15px;font-weight:800;color:var(--accent-ink)}
.rc-pv small{font-size:10px;color:var(--mute);font-weight:700}
.rc-foot{text-align:center;font-size:11.5px;color:var(--mute);font-weight:600;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.rc-empty{text-align:center;color:var(--mute);font-size:14px;line-height:1.6;padding:30px 10px}
.rcperiods{display:flex;gap:8px;justify-content:center;margin:14px 0}
.rcpill{background:var(--card2);border:1px solid var(--line);color:var(--mute);font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:11px;cursor:pointer}
.rcpill.on{background:var(--grad);border-color:transparent;color:#fff}

/* workout overall progress bar (top of player body) */






/* ═══════════════════════════════════════════════════════════════
   ACTIVE WORKOUT SCREEN — redesigned. Spacing scale: 4 8 12 16 20 24 32
   Hierarchy: demo → name → set → cue → prescription → logging → up-next → action
   ═══════════════════════════════════════════════════════════════ */

/* progress bar (top of body) */






/* header group: title + set progress + cue, designed as one unit */
.phead{margin-bottom:12px}




.setdots{display:inline-flex;align-items:center;gap:6px}
.setdots .sd{width:9px;height:9px;border-radius:50%;background:transparent;border:2px solid var(--line);box-sizing:border-box;transition:background .2s,border-color .2s}
.setdots .sd.done{background:var(--fq-brand);border-color:var(--fq-brand)}
.setdots .sd.cur{border-color:var(--fq-brand);background:color-mix(in srgb,var(--fq-brand) 30%,transparent)}



/* coaching card — compact, cyan used sparingly */
.pprog{background:var(--ds-surface-2);border:1px solid var(--ds-border);border-left:3px solid var(--fq-brand);border-radius:0 var(--r-md) var(--r-md) 0;padding:9px 13px;margin-bottom:12px}
.pp-main{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pp-today{display:flex;align-items:baseline;gap:10px;min-width:0}
.pp-lbl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);flex:none}
.pp-val{font-size:18px;font-weight:800;color:var(--accent-ink);letter-spacing:-.01em}
.pp-prev{font-size:12px;color:var(--mute);font-weight:600;text-align:right;flex:none}
.pp-coach{margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}
.pp-ct{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:2px}
.pp-cm{font-size:13.5px;color:var(--ink);line-height:1.5;opacity:.92}
.pp-beat{color:var(--accent-ink);font-weight:600;opacity:1;margin-top:4px}

/* reps + weight controls — large tap targets, clean, equal */












/* ── FIXED FOOTER: Up Next (layer 1) + action bar (layer 2) ── */
.pfooter{flex:none;position:relative;z-index:4;background:var(--bg);
  padding:12px 20px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(0,0,0,.6)}
.pfooter:empty{display:none}
/* layer 1 — up next preview (subtle) */






/* layer 2 — action bar: secondary back + primary complete pill */
.pactions{display:flex;align-items:stretch;gap:10px}
.pnav{flex:none;width:44px;height:52px;border-radius:14px;background:none;border:1px solid var(--line);color:var(--mute);opacity:.6;display:grid;place-items:center;cursor:pointer;transition:opacity .12s,background .12s,transform .1s}
.pnav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pnav:active{background:var(--card2);opacity:1;transform:scale(.95)}
.pnav:disabled{opacity:.3;pointer-events:none}

.pcomplete svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}




/* ═══ ACTIVE WORKOUT V2 additions ═══ */
/* compact superset status strip */












/* visible set history */





.sh-row.done:active{background:var(--card2)}










/* edit-set sheet */
.editset{display:flex;gap:12px}
.es-f{flex:1}
.es-f label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.es-f input{width:100%;padding:14px;border-radius:13px;background:var(--card2);border:1.5px solid var(--line);color:var(--ink);font-size:20px;font-weight:800;text-align:center;outline:none}
.es-f input:focus{border-color:var(--accent)}

/* rest state — distinct, prominent countdown + next preview */








.pprog .pp-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pprog .pp-lbl{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pprog .pp-val{font-size:15px;font-weight:800;color:var(--accent-ink);letter-spacing:-.01em}
.pprog .pp-prev{font-size:11.5px;color:var(--mute);font-weight:600;margin-left:auto}
.pprog .pprog .pp-guide{font-size:12px;color:var(--mute);line-height:1.4;margin-top:3px}
.pprog .pp-guide.pp-beat{color:var(--accent-ink);font-weight:600;opacity:1;margin-top:3px}







/* ═══════════════════════════════════════════════════════════════════════
   FORMIQ DESIGN SYSTEM — reusable base classes (Phase 1)
   Opt-in classes prefixed `fq-`. Additive: they don't alter any existing
   class, so current screens are unchanged until a later phase adopts them.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Surfaces / cards ── */
.fq-surface{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--r-lg)}
.fq-surface-2{background:var(--ds-surface-2);border:1px solid var(--ds-border);border-radius:var(--r-md)}
.fq-card{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--r-lg);box-shadow:var(--ds-shadow-card)}
.fq-card--raised{box-shadow:var(--ds-shadow-raised)}
.fq-card--accent{border-color:var(--ds-border-hi);box-shadow:var(--ds-glow-accent)}
.fq-card--interactive{cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.fq-card--interactive:active{transform:scale(.99);background:var(--ds-surface-2)}
.fq-divider{height:1px;background:var(--ds-border);border:0;margin:0}

/* ── Typography helpers ── */
.fq-display{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--fw-display);color:var(--ds-text);letter-spacing:-.01em}
.fq-title{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:var(--fw-title);color:var(--ds-text)}
.fq-section{font-size:var(--fs-section);line-height:var(--lh-section);font-weight:var(--fw-section);color:var(--ds-text)}
.fq-card-title{font-size:var(--fs-card);line-height:var(--lh-card);font-weight:var(--fw-card);color:var(--ds-text)}
.fq-body{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-body);color:var(--ds-text-2)}
.fq-small{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-small);color:var(--ds-text-3)}
.fq-caption{font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--fw-caption);color:var(--ds-text-3)}
.fq-label{font-size:var(--fs-label);line-height:var(--lh-label);font-weight:var(--fw-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ds-text-3)}
.fq-label--accent{color:var(--ds-accent-2)}
.fq-metric{font-size:var(--fs-metric);line-height:var(--lh-metric);font-weight:var(--fw-metric);color:var(--ds-text);letter-spacing:-.02em}
.fq-metric-lg{font-size:var(--fs-metric-lg);line-height:var(--lh-metric-lg);font-weight:var(--fw-metric-lg);color:var(--ds-text);letter-spacing:-.02em}
.fq-accent{color:var(--ds-accent-2)}
.fq-muted{color:var(--ds-text-3)}

/* ── Buttons ── */
.fq-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--f);font-size:15px;font-weight:800;letter-spacing:.01em;
  border:none;border-radius:var(--r-md);padding:0 var(--s5);height:52px;cursor:pointer;
  transition:transform .1s,box-shadow .12s,background .12s,opacity .12s;-webkit-user-select:none;user-select:none}
.fq-btn:active{transform:scale(.98)}
.fq-btn:disabled{opacity:.4;pointer-events:none}
.fq-btn--primary{background:var(--ds-accent-grad);color:#fff;box-shadow:var(--ds-glow-accent)}
.fq-btn--primary:active{box-shadow:0 3px 12px -8px var(--ds-accent)}
.fq-btn--secondary{background:var(--ds-surface-2);color:var(--ds-text);border:1px solid var(--ds-border)}
.fq-btn--ghost{background:none;color:var(--ds-text-2);border:1px solid var(--ds-border)}
.fq-btn--block{display:flex;width:100%}
.fq-btn:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}

/* ── Icon button ── */
.fq-iconbtn{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);
  background:var(--ds-surface);border:1px solid var(--ds-border);color:var(--ds-text-2);cursor:pointer;
  transition:background .12s,transform .1s,color .12s}
.fq-iconbtn:active{background:var(--ds-surface-2);transform:scale(.94)}
.fq-iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.fq-iconbtn:disabled{opacity:.35;pointer-events:none}

/* ── Chips / filter chips / tags ── */
.fq-chip{display:inline-flex;align-items:center;gap:var(--s1);font-size:13px;font-weight:700;
  color:var(--ds-text-3);background:var(--ds-surface-2);border:1px solid var(--ds-border);
  border-radius:var(--r-pill);padding:var(--s2) var(--s4);cursor:pointer;transition:all .15s}
.fq-chip:active{transform:scale(.96)}
.fq-chip--selected{background:var(--ds-accent-grad);border-color:transparent;color:#fff}
.fq-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ds-accent-2);background:color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius:var(--r-sm);padding:3px 8px}

/* ── Inputs ── */
.fq-input{width:100%;font-family:var(--f);font-size:15px;font-weight:600;color:var(--ds-text);
  background:var(--ds-surface-2);border:1.5px solid var(--ds-border);border-radius:var(--r-md);
  padding:14px 16px;outline:none;transition:border-color .15s,box-shadow .15s}
.fq-input::placeholder{color:var(--ds-text-3);font-weight:500}
.fq-input:focus{border-color:var(--ds-accent);box-shadow:var(--ds-glow-soft)}
.fq-input:disabled{opacity:.5;pointer-events:none}

/* ── Progress bar ── */
.fq-progress{height:6px;border-radius:var(--r-pill);background:var(--ds-surface-2);overflow:hidden}
.fq-progress>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--ds-accent-grad);
  transition:width .35s cubic-bezier(.2,.9,.2,1)}

/* ── Tab item (bottom nav) base state ── */
.fq-tab{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;
  color:var(--ds-text-3);cursor:pointer;transition:color .12s;font-size:10px;font-weight:700}
.fq-tab.is-selected{color:var(--ds-accent-2)}
.fq-tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}

/* ── Media surface (for photography with legible overlay) ── */
.fq-media{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--ds-surface-2)}
.fq-media>img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.fq-media--overlay::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(4,6,8,.72));pointer-events:none}
.fq-media__content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s4);z-index:1}
/* graceful fallback: when no <img> is present, show the gradient/glyph placeholder */
.fq-media:empty,.fq-media--placeholder{background:linear-gradient(160deg,#141A21 0%,#0C1116 55%,#0A0E13 100%)}
/* PRE-EXISTING OVERFLOW, fixed: the placeholder word is always rendered behind the
   image, and a long theme name ("PUSH THE TOP END") at clamp(34px,11vw,64px) was
   wider than the card at 320px, pushing #view's scrollWidth past the viewport.
   It is decorative, so clip it instead of letting it size the container. */
.fq-media__ph{position:absolute;inset:0;z-index:0;display:grid;place-items:center;font-weight:800;font-style:italic;font-size:clamp(34px,11vw,64px);letter-spacing:-.02em;color:rgba(255,255,255,.06);text-transform:uppercase;text-align:center;padding:0 18px;pointer-events:none;overflow:hidden;max-width:100%;overflow-wrap:anywhere;line-height:1}


/* ═══ NAVIGATION SHELL (Phase 2) ═══ */
.fq-tabs{flex:0 0 auto;z-index:40;position:relative;
  background:color-mix(in srgb, var(--ds-bg) 92%, transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--ds-border);
  display:flex;align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom)}
.fq-tabs .fq-tab{flex:1 1 0;min-width:0;padding:10px 0 11px;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:none;color:var(--ds-text-3);cursor:pointer;position:relative;
  transition:color .16s;font-family:var(--f)}
.fq-tabs .fq-tab svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.fq-tabs .fq-tab span{font-size:10px;font-weight:700;letter-spacing:.01em}
.fq-tabs .fq-tab:active svg{transform:scale(.9)}
/* selected → FIXED FormIQ cyan brand (not per-profile), per Phase 2 brand decision */
.fq-tabs .fq-tab.is-selected{color:var(--fq-brand-ink)}
.fq-tabs .fq-tab.is-selected svg{stroke:var(--fq-brand-ink)}
.fq-tabs .fq-tab.is-selected::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2.5px;border-radius:0 0 3px 3px;background:var(--fq-brand)}
/* center Workout: subtly emphasized, NOT a floating FAB */
.fq-tabs .fq-tab--center svg{width:25px;height:25px}
.fq-tabs .fq-tab--center.is-selected svg{filter:drop-shadow(0 0 8px color-mix(in srgb, var(--fq-brand) 55%, transparent))}

/* ═══ HEADER FAMILY (Phase 2) — shared rhythm, per-screen variants ═══ */
.fq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
  padding:0 var(--s5);margin:0 0 var(--s5)}
.fq-head--simple{margin-bottom:var(--s4)}
.fq-head .fq-head-actions{display:flex;align-items:center;gap:var(--s2);flex:none}
/* Home header variant: wordmark row + greeting */
.fq-head--home{flex-direction:column;gap:var(--s3)}
.fq-head--home .fq-head-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.fq-head-greet .fq-greet-k{font-size:13px;color:var(--ds-text-3);font-weight:600}
.fq-head-greet .fq-greet-n{font-size:26px;font-weight:800;color:var(--ds-text);line-height:1.1;margin-top:2px}
.fq-avatar{width:38px;height:38px;border-radius:var(--r-round);background:var(--fq-brand-grad);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex:none;overflow:hidden}
.fq-avatar img{width:100%;height:100%;object-fit:cover}

/* ═══ WORKOUT HUB (Phase 2 shell) ═══ */
.fq-hub{padding:0 var(--s5) var(--s5)}
.fq-hub-sec{margin-top:var(--s5)}
.fq-hub-sec .fq-label{margin:0 2px var(--s2)}
.fq-hub-resume,.fq-hub-today{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;padding:var(--s4)}
.fq-hub-resume{border-color:var(--ds-border-hi);box-shadow:var(--ds-glow-accent);margin-bottom:var(--s2)}
.fq-hub-ic{flex:none;width:44px;height:44px;border-radius:var(--r-md);background:var(--fq-brand-grad);display:grid;place-items:center}
.fq-hub-ic svg{width:20px;height:20px;fill:#fff}
.fq-hub-b{flex:1;min-width:0}
.fq-hub-b .fq-card-title{margin-top:2px}
.fq-hub-chev,.fq-hub-go{flex:none;color:var(--ds-text-3);font-size:20px}
.fq-hub-go{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--fq-brand-ink)}
.fq-hub-row{display:flex;align-items:center;gap:var(--s3);padding:11px 14px;border-bottom:1px solid var(--ds-border);font-size:14px}
.fq-hub-row:last-child{border-bottom:none}
.fq-hub-row.is-today{background:color-mix(in srgb, var(--fq-brand) 6%, transparent)}
.fq-hub-day{flex:none;width:34px;font-weight:800;font-size:12px;color:var(--ds-text-3)}
.fq-hub-name{flex:1;min-width:0;font-weight:600;color:var(--ds-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq-hub-status{flex:none}
.fq-hub-check{width:18px;height:18px;stroke:var(--ds-success);fill:none;stroke-width:3}

/* ═══ SECONDARY NAV ROWS (Nutrition / Community in Profile) ═══ */
.fq-explore{margin:var(--s4) 20px var(--s3)}
.fq-explore .sgroup-h{margin-bottom:var(--s2)}
.fq-navrow{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);margin-bottom:var(--s2);cursor:pointer;transition:background .12s}
.fq-navrow:active{background:var(--ds-surface-2)}
.fq-navrow-ic{flex:none;width:38px;height:38px;border-radius:var(--r-sm);background:var(--ds-surface-2);display:grid;place-items:center;color:var(--fq-brand-ink)}
.fq-navrow-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.fq-navrow-t{flex:1;min-width:0;display:flex;flex-direction:column}
.fq-navrow-l{font-size:15px;font-weight:700;color:var(--ds-text)}
.fq-navrow-s{font-size:12px;color:var(--ds-text-3);margin-top:1px}
.fq-navrow-chev{flex:none;color:var(--ds-text-3);font-size:20px}


/* ═══ HOME (Phase 3) — premium cinematic ═══ */
/* compact greeting override (smaller than Phase 2 example) */
.fq-head--home .fq-greet-n{font-size:23px}
.fq-head--home{margin-bottom:var(--s3)}
.fq-head--home{padding-top:calc(6px + env(safe-area-inset-top))}

/* Today's Workout hero */
.fqh-shell{margin:0 20px 6px;border:1px solid #25313C;border-radius:19px;
  background:#0C1117;box-shadow:0 18px 40px -32px rgba(0,0,0,.96);overflow:hidden}
.fqh{margin:0}
/* PRE-EXISTING OVERFLOW, fixed: aspect-ratio + min-height with no width constraint
   lets the browser derive WIDTH from height — 260px * (4/3.4) = 306px — which is
   wider than the 280px card at a 320px viewport, so the hero media (and the image
   inside it) spilled past the card edge. Pin the width to the card. */
.fqh-media{aspect-ratio:auto;height:clamp(210px,56vw,232px);min-height:0;width:100%;max-width:100%;border-radius:18px;background:linear-gradient(160deg,#111922,#090D12 62%,#05070A);box-shadow:none}
.fqh-shell--action .fqh-media{border-radius:18px 18px 0 0}
#home-exlist:empty{display:none}
.fqh--rest .fqh-media{height:auto;min-height:0}
.fqh--rest .fq-media__content{position:relative;inset:auto;min-height:0;padding:14px 15px 15px;gap:10px;justify-content:flex-start}
.fqh--rest .fqh-title{font-size:24px}
.fqh--rest .fqh-state-copy{margin-top:4px;font-size:12px}
.fqh--rest .fqh-cta{margin-top:10px}
/* stronger legibility scrim so text/CTA read on any photo AND on the dark placeholder */
.fqh-media.fq-media--overlay::after{background:linear-gradient(180deg,rgba(3,6,10,.32) 0%,rgba(3,6,10,.08) 30%,rgba(3,6,10,.62) 66%,rgba(3,6,10,.94) 100%)}
/* a faint cyan floor-glow — selective accent, not a panel */
.fqh-media::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:radial-gradient(120% 80% at 50% 130%, color-mix(in srgb, var(--fq-brand) 18%, transparent), transparent 72%);
  pointer-events:none;z-index:0}
.fqh-media .fq-media__content{padding:16px;justify-content:space-between}
.fqh-top{display:flex;align-items:center;justify-content:space-between}
.fqh-done{font-size:10.5px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:color-mix(in srgb,var(--ds-success) 72%,#06100B);padding:4px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ds-success) 58%,transparent)}
.fqh-bottom{display:flex;flex-direction:column}
.fqh-title{font-size:clamp(24px,6.5vw,28px);font-weight:850;font-style:italic;color:#fff;line-height:1.02;letter-spacing:-.02em;text-shadow:0 2px 16px rgba(0,0,0,.72)}
.fqh-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.fqh-chip{font-size:9.5px;font-weight:850;letter-spacing:.055em;text-transform:uppercase;color:#F7FAFD;
  background:rgba(7,12,18,.58);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(5px);padding:4px 8px;border-radius:999px}
.fqh-meta{display:flex;gap:13px;margin-top:7px;font-size:12px;font-weight:750;color:rgba(255,255,255,.88)}
.fqh-meta span{display:inline-flex;align-items:center;gap:6px}
.fqh-i{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.fqh-cta{margin-top:10px;height:42px;font-size:14.5px;background:linear-gradient(100deg,#006EEB,#0A9CFA 58%,#22B9FF);box-shadow:0 10px 24px -18px var(--fq-brand), inset 0 1px 0 rgba(255,255,255,.18)}
.fqh-locked{margin-top:8px;font-size:11.5px;font-weight:650;color:rgba(255,255,255,.72)}
.fqh-dots{display:flex;gap:6px;justify-content:center;padding:7px 0 0}
.fqh-dot{width:6px;height:6px;border-radius:50%;background:#2A3540;border:none;padding:0;cursor:pointer;transition:width .2s,background .2s}
.fqh-dot.on{background:var(--fq-brand-ink);width:18px;border-radius:4px}

/* Weekly activity */
.fqw{margin:8px 20px 0;padding:12px 13px 11px;background:linear-gradient(180deg,#121820,#0E1319);border-color:#26313C}
.fqw-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.fqw-total{font-size:21px;font-weight:850;color:var(--ds-text);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.fqw-total small{font-size:11.5px;color:var(--ds-text-3);font-weight:750;margin-left:2px}
.fqw-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;height:58px}
.fqw-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.fqw-bar{width:100%;max-width:18px;border-radius:6px 6px 3px 3px;background:#242E38;transition:height .35s cubic-bezier(.2,.9,.2,1)}
.fqw-bar.on{background:linear-gradient(180deg,#22B9FF,#0A9CFA 58%,#006EEB)}
.fqw-lbl{font-size:9.5px;font-weight:800;color:#95A4B3}

/* Compact stat cards */
.fqstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:8px 20px 0;
  border:1px solid #25313C;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#111820,#0D1218)}
.fqstat{padding:11px 6px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;border:0;border-radius:0;box-shadow:none}
.fqstat+.fqstat{border-left:1px solid #25313C}
.fqstat-ic{width:22px;height:22px;display:grid;place-items:center;color:var(--fq-brand-ink);margin-bottom:0}
.fqstat-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.fqstat-v{font-size:21px;font-weight:850;color:var(--ds-text);letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
.fqstat-k{font-size:9.5px;font-weight:800;letter-spacing:.035em;text-transform:uppercase;color:#96A4B2;line-height:1.2}

/* FormIQ Insights secondary card */
.fqins{margin:10px 20px 4px;padding:14px;background:linear-gradient(180deg,#111820,#0D1218);border-color:#25313C}



/* placeholder icon color for stat cards where PR star is filled */
.fqstat-ic svg[viewBox] path{}


.fqins{margin:10px 20px 4px;padding:11px 14px;background:linear-gradient(180deg,#111820,#0D1218);border-color:#25313C}
.fqins-lead{font-size:14.5px;font-weight:800;color:var(--ds-text);letter-spacing:-.01em;line-height:1.32;margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fqins-sub{font-size:12px;font-weight:600;color:#94A2B1;line-height:1.35;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ═══ PROGRAMS (Phase 4) ═══ */
.fqp{padding:0 20px var(--s5)}
/* current program card */
.fqp-current{display:block;width:100%;text-align:left;padding:var(--s4)}
.fqp-cur-top{display:flex;align-items:center;justify-content:space-between}
.fqp-cur-pct{font-size:20px;font-weight:800;color:var(--fq-brand-ink);letter-spacing:-.02em}
.fqp-cur-name{font-size:19px;font-weight:800;color:var(--ds-text);margin-top:6px;line-height:1.15}
.fqp-cur-meta{font-size:12.5px;color:var(--ds-text-3);font-weight:600;margin-top:3px}
.fqp-cur-bar{margin-top:12px}
.fqp-cur-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--ds-text-3);font-weight:600}
.fqp-cur-go{color:var(--fq-brand-ink);font-weight:800}
/* section label + filters */
.fqp-sec-lbl{margin:var(--s5) 2px var(--s3)}
.fqp-filters{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin-bottom:var(--s4);scrollbar-width:none}
.fqp-filters::-webkit-scrollbar{display:none}
.fqp-filters .fq-chip{flex:none;white-space:nowrap}
.fqp-filters .fq-chip--selected{background:var(--fq-brand-grad)}
/* program cards */
.fqp-cards{display:flex;flex-direction:column;gap:12px}
.fqp-card{display:block;width:100%;text-align:left;background:none;border:none;padding:0;cursor:pointer}
.fqp-card:active{transform:scale(.99)}
.fqp-card-media{aspect-ratio:16/10;min-height:170px;border-radius:var(--r-lg)}
.fqp-card-media .fq-media__content{padding:var(--s4);justify-content:space-between}
.fqp-card-top{display:flex;align-items:center;justify-content:space-between}
.fqp-card-lvl{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.16);backdrop-filter:blur(4px);padding:4px 9px;border-radius:var(--r-sm)}
.fqp-card-active{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:color-mix(in srgb,var(--ds-success) 88%,transparent);padding:4px 9px;border-radius:var(--r-sm)}
.fqp-card-bot{display:flex;flex-direction:column}
.fqp-card-name{font-size:22px;font-weight:800;font-style:italic;color:#fff;line-height:1.05;letter-spacing:-.01em}
.fqp-card-focus{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--fq-brand-ink);margin-top:6px}
.fqp-card-blurb{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82);line-height:1.4;margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fqp-card-cta{margin-top:10px}
.fqp-card-use{font-size:12.5px;font-weight:800;color:#fff}
.fqp-card-using{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ds-success-ink)}
.fqp-card.is-current .fqp-card-media{box-shadow:0 0 0 2px var(--ds-success),var(--ds-shadow-card)}
/* create custom */
.fqp-custom{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;margin-top:var(--s4);
  background:var(--ds-surface);border:1px dashed var(--ds-border-hi);border-radius:var(--r-lg);padding:var(--s4);cursor:pointer;transition:background .12s}
.fqp-custom:active{background:var(--ds-surface-2)}
.fqp-custom-ic{flex:none;width:40px;height:40px;border-radius:var(--r-md);background:var(--fq-brand-grad);display:grid;place-items:center}
.fqp-custom-ic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round}
.fqp-custom-t{flex:1;min-width:0;display:flex;flex-direction:column}
.fqp-custom-l{font-size:15px;font-weight:800;color:var(--ds-text)}
.fqp-custom-s{font-size:12px;color:var(--ds-text-3);margin-top:1px}
.fqp-custom-chev{flex:none;color:var(--ds-text-3);font-size:20px}
.fqp-empty{text-align:center;color:var(--ds-text-3);font-size:13px;padding:24px}


/* Phase 5: cinematic exercise media scrim + Watch-form affordance */
.pmedia::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,8,.45) 0%,transparent 22%,transparent 60%,rgba(4,6,8,.85) 100%)}
.pmedia .shot,.pmedia .anatwrap{z-index:1}
.pmedia .glyph{z-index:1}
/* the body sheet lifts over the media with a hairline top edge */
.pbody{box-shadow:0 -1px 0 var(--ds-border)}


/* ═══════════════════════════════════════════════════════════════════════
   ACTIVE WORKOUT — matched to Lovable reference (flat, image-led, cyan accent)
   ═══════════════════════════════════════════════════════════════════════ */

/* top session bar: close · timer · progress+count · video */
.pbar{position:absolute;top:calc(10px + env(safe-area-inset-top));left:14px;right:14px;z-index:4;
  display:flex;align-items:center;gap:12px}
.pbar-x{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.pbar-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.pbar-clock{flex:none;background:none;border:none;color:#fff;font-size:19px;font-weight:800;letter-spacing:.01em;cursor:pointer;font-variant-numeric:tabular-nums}
.pbar-prog{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.pbar-bar{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.pbar-bar i{display:block;height:100%;border-radius:999px;background:var(--fq-brand-ink);transition:width .35s cubic-bezier(.2,.9,.2,1)}
.pbar-cnt{flex:none;font-size:13px;font-weight:800;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.pbar-vid{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.pbar-vid svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}

/* exercise media: FORM CHECK caption sits bottom-left over the scrim */
.pmedia{border-radius:0}

/* metadata line (GLUTES · COMPOUND) + info button */
.pmetaline{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.pmetaline .mm{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fq-brand-ink)}
.pmetaline .dot{color:var(--ds-text-3);font-weight:800}
.pmetaline .pinfo{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;background:var(--ds-surface-2);
  border:1px solid var(--ds-border);color:var(--ds-text-2);font-style:italic;font-weight:800;font-size:12px;font-family:Georgia,serif;display:grid;place-items:center;cursor:pointer}
.ptitle2{font-size:26px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;line-height:1.06;color:var(--ds-text);overflow-wrap:anywhere}
.pcue{font-size:14px;color:var(--ds-text-3);line-height:1.45;margin-top:8px}
.phr{height:1px;background:var(--ds-border);margin:16px 0}

/* flat superset section (hairline, no card) */
.ssflat{margin-bottom:16px}
.ssf-h{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ds-text-3);margin-bottom:10px}
.ssf-row{display:flex;align-items:center;gap:12px;padding:5px 0;font-size:15px}
.ssf-code{flex:none;width:26px;font-weight:800;font-size:14px;color:var(--ds-text-3)}
.ssf-row.cur .ssf-code{color:var(--fq-brand-ink)}
.ssf-nm{flex:1;min-width:0;font-weight:600;color:var(--ds-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssf-row.cur .ssf-nm{color:var(--ds-text);font-weight:700}
.ssf-cur{flex:none;font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--fq-brand-ink)}
.ssf-next{flex:none;font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--ds-text-3)}
.ssf-done{flex:none;font-size:13px;font-weight:700;color:var(--ds-success-ink)}
.ssf-wait{flex:none;color:var(--ds-text-3)}
.ssflat+*{border-top:1px solid var(--ds-border);padding-top:16px}

/* Today prescription strip (label + cyan value | coaching line right) */
.pprog{background:none;border:none;padding:0;margin:0 0 16px}
.pprog .pp-line{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.pprog .pp-lbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fq-brand-ink)}
.pprog .pp-today-v,.pprog .pp-val{font-size:26px;font-weight:800;color:var(--ds-text);letter-spacing:-.01em}
.pprog .pp-guide{font-size:14px;color:var(--ds-text-3);font-weight:500}
.pprog .pp-lead{display:flex;flex-direction:column;gap:2px;min-width:0}

/* ── THE LOGGER — one shared panel, two halves, circular steppers, center divider ── */
.logger{display:grid;grid-template-columns:1fr 1px 1fr;align-items:stretch;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--r-lg);padding:18px 4px;margin-bottom:22px;min-width:0}
.logger.off{opacity:.5;pointer-events:none}
.lg-div{background:var(--ds-border);width:1px;align-self:stretch;margin:6px 0}
.lg-half{min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 2px}
.lg-lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-text-3)}
.lg-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;width:100%;gap:2px}
.lg-stp{position:relative;width:42px;height:42px;border-radius:50%;background:var(--ds-surface-2);border:1px solid var(--ds-border);color:var(--ds-text-2);display:grid;place-items:center;cursor:pointer;justify-self:center;flex:none;transition:background .12s,color .12s,transform .1s;-webkit-user-select:none;user-select:none}
.lg-stp svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.lg-stp::after{content:"";position:absolute;inset:-8px;border-radius:50%}
.lg-stp:active{background:var(--fq-brand);color:#fff;transform:scale(.92)}
.lg-stp:disabled{opacity:.3;pointer-events:none}
.lg-val{min-width:0;width:100%;max-width:100%;text-align:center;font-size:clamp(22px,6.4vw,36px);font-weight:800;letter-spacing:-.01em;border:none;background:none;outline:none;color:var(--ds-text);padding:0 2px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:clip}
.lg-unit{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-text-3);margin-top:-4px}

/* flat set history */




.shr:last-child{border-bottom:none}




.shr-n.done svg{width:19px;height:19px;stroke:var(--fq-brand-ink);fill:none;stroke-width:2.6}


.shr-v b{font-weight:800}



/* Up Next row with thumbnail */
.upn{display:flex;align-items:center;gap:14px;border-top:1px solid var(--ds-border);padding:16px 0 4px}
.upn-thumb{flex:none;width:56px;height:56px;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(150deg,#1b2129,#0e131a)}
.upn-thumb img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.upn-thumb-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:800;font-style:italic;color:rgba(255,255,255,.22)}
.upn-t{flex:1;min-width:0}
.upn-k{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fq-brand-ink)}
.upn-v{font-size:17px;font-weight:800;color:var(--ds-text);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upn-s{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ds-text-3);margin-top:1px}
.upn-chev{flex:none;color:var(--ds-text-3)}
.upn-chev svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}

/* footer: small back + dominant solid-cyan LOG SET */
.pfooter{flex:none;position:relative;z-index:4;background:var(--bg);
  padding:12px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--ds-border)}
.pactions{display:flex;align-items:stretch;gap:12px}
.pnav{flex:none;width:64px;height:60px;border-radius:14px;background:var(--ds-surface-2);border:1px solid var(--ds-border);
  color:var(--ds-text-2);display:grid;place-items:center;cursor:pointer;transition:background .12s,transform .1s}
.pnav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.pnav:active{background:var(--ds-surface);transform:scale(.97)}
.pnav:disabled{opacity:.35;pointer-events:none}

.pcomplete svg{width:22px;height:22px;stroke:#062132;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}



.pmedia-cap{position:absolute;left:16px;bottom:14px;z-index:3;font-size:12px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.9);display:none}
.pmedia.has-photo .pmedia-cap{display:block}

/* ── logger: guarantee the number fits (incl. "405"/"22.5") on narrow phones ── */
@media (max-width:400px){
  .lg-stp{width:38px;height:38px}
  .lg-val{font-size:clamp(20px,6.4vw,32px);letter-spacing:-.02em}
}
@media (max-width:360px){
  .logger{padding:16px 2px}
  .lg-half{padding:0 1px}
  .lg-stp{width:34px;height:34px}
  .lg-stp svg{width:17px;height:17px}
  .lg-val{font-size:26px;letter-spacing:-.03em}
  .lg-lbl{font-size:10px}
}
@media (max-width:335px){
  .lg-stp{width:32px;height:32px}
  .lg-val{font-size:23px}
}


/* ── Today prescription: clean hierarchy on narrow widths ── */
@media (max-width:360px){
  .pprog .pp-line{flex-direction:column;align-items:flex-start;gap:4px}
  .pprog .pp-guide{margin-top:0}
}


/* ═══ REST TIMER (Phase 6) — full centered overlay, circular ring, FormIQ language ═══ */
#rest{position:fixed;inset:0;z-index:70;width:100%;max-width:480px;margin:0 auto;
  background:var(--ds-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 24px calc(24px + env(safe-area-inset-bottom));
  opacity:0;pointer-events:none;transition:opacity .22s ease}
#rest.up{opacity:1;pointer-events:auto}
.rest-in{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center}
.rest-ring{position:relative;width:min(72vw,264px);aspect-ratio:1}
.rest-svg{width:100%;height:100%;display:block}
.rest-track{fill:none;stroke:var(--ds-surface-2);stroke-width:12}
.rest-prog{fill:none;stroke:var(--fq-brand-ink);stroke-width:12;stroke-linecap:round;
  transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--fq-brand) 45%,transparent))}
.rest-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.rest-lbl{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ds-text-3)}
.rest-time{font-size:clamp(48px,16vw,68px);font-weight:800;letter-spacing:-.03em;color:var(--ds-text);line-height:1;font-variant-numeric:tabular-nums}
.rest-guide{font-size:14px;color:var(--ds-text-3);font-weight:500;margin-top:22px;text-align:center}
.rest-btns{display:flex;gap:12px;margin-top:22px;width:100%}
.rest-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:14px;
  background:var(--ds-surface-2);border:1px solid var(--ds-border);color:var(--ds-text);
  font-size:15px;font-weight:800;cursor:pointer;transition:background .12s,transform .1s}
.rest-btn svg{width:18px;height:18px;stroke:currentColor;fill:currentColor;stroke-width:0}
.rest-btn:active{background:var(--ds-surface);transform:scale(.98)}
.rest-btn--skip svg{fill:currentColor}
/* Up Next preview */
.rest-next{display:flex;align-items:center;gap:14px;width:100%;margin-top:26px;padding-top:20px;border-top:1px solid var(--ds-border)}
.rest-next .rn-thumb{flex:none;width:56px;height:56px;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(150deg,#1b2129,#0e131a)}
.rest-next .rn-thumb img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.rest-next .rn-thumb-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:800;font-style:italic;color:rgba(255,255,255,.22)}
.rest-next .rn-t{flex:1;min-width:0}
.rest-next .rn-k{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fq-brand-ink)}
.rest-next .rn-sub{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ds-text-3);margin-top:2px}
.rest-next .rn-v{font-size:17px;font-weight:800;color:var(--ds-text);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rest-next .rn-tgt{font-size:12.5px;color:var(--ds-text-3);font-weight:600;margin-top:2px}
@media (max-width:335px){ .rest-btns{gap:8px} .rest-btn{font-size:14px} }

#done .x svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}
.dstats>div{flex:1;min-width:0;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:16px;padding:14px 12px;text-align:center}
.dstats .ic{width:24px;height:24px;margin:0 auto 8px;color:var(--fq-brand-ink)}
.dstats .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.dstats .v{font-size:22px;font-weight:800;color:var(--ds-text);letter-spacing:-.02em;line-height:1}
.dstats .k{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ds-text-3);margin-top:5px}
.dcard .k{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ds-text-3)}
.dcard .v{font-size:17px;font-weight:800;color:var(--ds-text);margin-top:3px}
.dcard .d{font-size:12.5px;color:var(--ds-text-3);margin-top:2px}
/* success checkmark moment */
.d-check{width:76px;height:76px;border-radius:50%;background:color-mix(in srgb,var(--fq-brand) 16%,transparent);
  border:2px solid var(--fq-brand);display:grid;place-items:center;margin:0 auto;
  box-shadow:0 0 0 8px color-mix(in srgb,var(--fq-brand) 8%,transparent);animation:dpop .4s cubic-bezier(.2,1.3,.4,1)}
.d-check svg{width:38px;height:38px;stroke:var(--fq-brand-ink);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:32;stroke-dashoffset:32;animation:ddraw .5s .15s ease forwards}
.d-kicker{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fq-brand-ink);margin-top:16px}
@keyframes dpop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes ddraw{to{stroke-dashoffset:0}}
.drow button{height:56px;border-radius:14px;font-size:16px;font-weight:800;border:none;cursor:pointer;transition:transform .1s,filter .1s}
.drow button:active{transform:scale(.98)}
.fin svg{width:20px;height:20px;stroke:#062132;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:340px){
  .drow{gap:8px}
  .drow button{font-size:13.5px;padding:15px 6px}
  .fin svg{width:16px;height:16px}
}


/* ═══ EXERCISE DETAIL (Phase 8) — matches the workout player language ═══ */
.xd{margin:-4px 0 18px}
.xd-media{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,#141A21,#0B0F14 60%,#080B0F);border:1px solid var(--ds-border);margin-bottom:16px}
.xd-media img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.xd-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(4,6,8,.55))}
.xd-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(28px,9vw,46px);
  font-weight:800;font-style:italic;color:rgba(255,255,255,.07);text-transform:uppercase;z-index:0}
.xd-media.noimg .xd-ph{z-index:1}
.xd-meta{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.xd-m{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fq-brand-ink)}
.xd-dot{color:var(--ds-text-3);font-weight:800}
.xd-title{font-size:24px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.08;color:var(--ds-text);overflow-wrap:anywhere;margin-bottom:10px}
.xd-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.xd-tag{font-size:11px;font-weight:700;color:var(--ds-text-3);background:var(--ds-surface-2);
  border:1px solid var(--ds-border);border-radius:var(--r-pill);padding:4px 11px}
.xd-sec{margin-top:20px;padding-top:16px;border-top:1px solid var(--ds-border)}
.xd-h{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ds-text-3);margin-bottom:11px}
.xd-list{list-style:none;margin:0;padding:0}
.xd-list li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:15px;font-weight:600;color:var(--ds-text)}
.xd-b{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ds-border)}
.xd-b.prim{background:var(--fq-brand)}
.xd-role{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ds-text-3)}
.xd-steps{list-style:none;margin:0;padding:0;counter-reset:xd}
.xd-steps li{display:flex;gap:13px;padding:8px 0}
.xd-n{flex:none;font-size:13px;font-weight:800;color:var(--fq-brand-ink);font-variant-numeric:tabular-nums;padding-top:1px}
.xd-steps p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ds-text-2)}
.xd-cues{list-style:none;margin:0;padding:0}
.xd-cues li{position:relative;padding:6px 0 6px 18px;font-size:14.5px;line-height:1.5;color:var(--ds-text-2)}
.xd-cues li::before{content:"";position:absolute;left:2px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--fq-brand)}
.xd-sec--warn{border-top-color:var(--ds-border)}
.xd-h--warn{color:var(--ds-warning-ink)}
.xd-warn{margin:0;font-size:14.5px;line-height:1.5;color:var(--ds-text-2);
  background:color-mix(in srgb,var(--ds-warning) 8%,transparent);
  border-left:3px solid var(--ds-warning);border-radius:0 10px 10px 0;padding:11px 13px}
@media (max-width:340px){ .xd-title{font-size:21px} .xd-list li,.xd-steps p,.xd-cues li,.xd-warn{font-size:13.5px} }


/* ═══ EXERCISE DETAIL (Phase 8) — information-first, matches the workout player ═══ */
.xd{margin:-4px 0 18px}
.xd-media{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,#141A21,#0B0F14 60%,#080B0F);border:1px solid var(--ds-border)}
.xd-media img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.xd-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(28px,9vw,46px);
  font-weight:800;font-style:italic;color:rgba(255,255,255,.07);letter-spacing:-.02em;text-align:center;padding:0 16px}
.xd-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(4,6,8,.55))}
.xd-meta{display:flex;align-items:center;gap:7px;margin-top:14px}
.xd-m{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fq-brand-ink)}
.xd-dot{color:var(--ds-text-3);font-weight:800}
.xd-title{font-size:clamp(21px,6.4vw,26px);font-weight:800;font-style:italic;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.08;color:var(--ds-text);margin-top:5px;overflow-wrap:anywhere}
.xd-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.xd-tag{font-size:11px;font-weight:700;color:var(--ds-text-3);background:var(--ds-surface-2);
  border:1px solid var(--ds-border);border-radius:var(--r-sm);padding:4px 9px;white-space:nowrap}
.xd-sec{margin-top:22px}
.xd-h{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-text-3);margin-bottom:10px}
.xd-list{list-style:none;padding:0;margin:0}
.xd-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--ds-border);
  font-size:15px;font-weight:600;color:var(--ds-text)}
.xd-list li:last-child{border-bottom:none}
.xd-b{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ds-text-3)}
.xd-b.prim{background:var(--fq-brand-ink);box-shadow:0 0 8px color-mix(in srgb,var(--fq-brand) 55%,transparent)}
.xd-role{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ds-text-3)}
.xd-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.xd-steps li{display:flex;gap:12px;align-items:flex-start}
.xd-n{flex:none;font-size:12px;font-weight:800;color:var(--fq-brand-ink);letter-spacing:.04em;
  min-width:22px;padding-top:2px;font-variant-numeric:tabular-nums}
.xd-steps p{font-size:14px;line-height:1.5;color:var(--ds-text-2);margin:0}
.xd-cues{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.xd-cues li{position:relative;padding-left:16px;font-size:14px;line-height:1.45;color:var(--ds-text-2)}
.xd-cues li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--fq-brand-ink)}
.xd-sec--warn{background:var(--ds-surface-2);border:1px solid var(--ds-border);
  border-left:3px solid var(--ds-warning);border-radius:0 var(--r-md) var(--r-md) 0;padding:12px 14px;margin-top:20px}
.xd-h--warn{color:var(--ds-warning-ink);margin-bottom:6px}
.xd-warn{font-size:13.5px;line-height:1.45;color:var(--ds-text-2);margin:0}


/* ═══ PROGRESS (Phase 9) ═══ */
.pgseg{display:flex;gap:8px;padding:0 20px 16px;overflow-x:auto;scrollbar-width:none}
.pgseg::-webkit-scrollbar{display:none}
.pgseg-b{flex:none;white-space:nowrap;font-size:13px;font-weight:700;color:var(--ds-text-3);
  background:var(--ds-surface-2);border:1px solid var(--ds-border);border-radius:var(--r-pill);
  padding:8px 15px;cursor:pointer;transition:all .15s}
.pgseg-b.on{background:var(--fq-brand-grad);border-color:transparent;color:#fff}
.pgwrap{padding:0 20px}

/* summary stat cards */
.pgstats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px}
.pgstat{padding:14px 8px;text-align:center}
.pgstat-v{font-size:23px;font-weight:800;color:var(--ds-text);letter-spacing:-.02em;line-height:1}
.pgstat-k{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ds-text-3);margin-top:5px}

/* weekly volume chart */
.pgchart{padding:var(--s4);margin-bottom:12px}
.pgchart-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.pgchart-v{font-size:19px;font-weight:800;color:var(--ds-text);letter-spacing:-.02em;white-space:nowrap}
.pgchart-v small{font-size:11px;color:var(--ds-text-3);font-weight:700;margin-left:2px}
.pgb-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:5px;height:96px}
.pgb-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.pgb{width:100%;max-width:22px;border-radius:5px;background:var(--ds-surface-3);transition:height .35s cubic-bezier(.2,.9,.2,1)}
.pgb.on{background:var(--fq-brand-grad)}
.pgb-x{font-size:9.5px;font-weight:700;color:var(--ds-text-3)}
.pgchart-f{text-align:center;font-size:10px;color:var(--ds-text-3);font-weight:600;margin-top:10px}

/* level card */
.pglevel{padding:var(--s4);margin-bottom:12px}
.pglevel-v{font-size:13px;color:var(--ds-text-3);font-weight:600;margin-top:4px}

/* best lifts */
.pgsec{margin-top:18px}
.pgsec-h{margin:0 2px 8px}
.pgpr{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--ds-border);cursor:pointer}
.pgpr:last-child{border-bottom:none}
.pgpr-n{flex:1;min-width:0;font-size:14.5px;font-weight:700;color:var(--ds-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgpr-v{flex:none;text-align:right;display:flex;flex-direction:column}
.pgpr-v b{font-size:14px;font-weight:800;color:var(--ds-text);white-space:nowrap}
.pgpr-v small{font-size:10px;color:var(--ds-text-3);font-weight:600;margin-top:1px}

/* history rows */
.pghist{padding:0}
.pgh{display:flex;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid var(--ds-border)}
.pgh:last-child{border-bottom:none}
.pgh-t{flex:1;min-width:0}
.pgh-n{font-size:15.5px;font-weight:800;color:var(--ds-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgh-d{font-size:12px;color:var(--ds-text-3);font-weight:600;margin-top:2px}
.pgh-m{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;color:var(--ds-text-3);font-weight:600}
.pgh-m b{color:var(--ds-text);font-weight:800}
.pgh-pr b{color:var(--fq-brand-ink)}
@media (max-width:340px){
  .pgstat-v{font-size:20px}
  .pgh-n{font-size:14.5px}
  .pgh-m{font-size:11px}
}


/* ═══ PROFILE (Phase 10) ═══ */
.pfwrap{padding:0 20px}
.pfid{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pfid-av{flex:none;width:60px;height:60px;border-radius:50%;background:var(--fq-brand-grad);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:21px;letter-spacing:.02em}
.pfid-t{flex:1;min-width:0}
.pfid-n{font-size:23px;font-weight:800;color:var(--ds-text);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfid-s{font-size:13px;color:var(--ds-text-3);font-weight:600;margin-top:2px}
.pflevel{padding:13px 15px;margin-bottom:20px}
.pflevel-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pflevel-x{font-size:12.5px;font-weight:700;color:var(--ds-text-3);white-space:nowrap}
.pfsec{margin-bottom:18px}
.pfsec-h{margin:0 2px 8px}
.pfgroup{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--r-lg);overflow:hidden}
.pfrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--ds-border);padding:14px 15px;cursor:pointer;transition:background .12s}
.pfrow:last-child{border-bottom:none}
.pfrow:active{background:var(--ds-surface-2)}
.pfrow-ic{flex:none;width:34px;height:34px;border-radius:var(--r-sm);background:var(--ds-surface-2);
  display:grid;place-items:center;color:var(--fq-brand-ink)}
.pfrow-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.pfrow-t{flex:1;min-width:0;display:flex;flex-direction:column}
.pfrow-l{font-size:15px;font-weight:700;color:var(--ds-text);overflow-wrap:anywhere}
.pfrow-s{font-size:12px;color:var(--ds-text-3);margin-top:1px;overflow-wrap:anywhere}
.pfrow-v{flex:none;font-size:12.5px;font-weight:700;color:var(--ds-text-3);max-width:38%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.pfrow-chev{flex:none;color:var(--ds-text-3);font-size:19px;line-height:1}
@media (max-width:340px){
  .pfid-av{width:52px;height:52px;font-size:18px}
  .pfid-n{font-size:20px}
  .pfrow-v{max-width:30%;font-size:11.5px}
  .pfrow-l{font-size:14.5px}
}


/* secondary-destination header (Nutrition / Community) */
.sechead{align-items:center;gap:12px}
.sechead .fq-iconbtn{flex:none}
.sechead-t{flex:1;min-width:0}
.sechead-t .fq-title{font-size:22px}
.sechead-s{font-size:12.5px;color:var(--ds-text-3);font-weight:600;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* meals/friends tab segments → FormIQ chips */
.pseg-b,#view .seg button{font-weight:700}
.pseg-b.on{background:var(--fq-brand-grad);border-color:transparent;color:#fff}


/* ═══ INVITES ═══ */
.invwrap{padding:0 20px}
.invintro{color:var(--ds-text-3);line-height:1.5;margin:0 0 16px}
.invnew{padding:18px 16px;text-align:center;margin-bottom:14px;
  border-color:color-mix(in srgb,var(--fq-brand) 40%,var(--ds-border))}
.invcode{font-size:clamp(28px,9vw,38px);font-weight:800;letter-spacing:.14em;
  color:var(--ds-text);margin:8px 0 6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.invnew-s{font-size:12.5px;color:var(--ds-text-3);line-height:1.45;margin:0 0 14px}
.invacts{display:flex;gap:10px}
.invacts .fq-btn{flex:1;min-width:0;white-space:nowrap}
.invlist-h{margin:22px 2px 8px}
.invlist{padding:0}
.invrow{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--ds-border)}
.invrow:last-child{border-bottom:none}
.invrow-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.invrow-c{font-size:15px;font-weight:800;letter-spacing:.08em;color:var(--ds-text);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.invrow-c.is-used{color:var(--ds-text-3);text-decoration:line-through}
.invrow-n,.invrow-w{font-size:11.5px;color:var(--ds-text-3)}
.invtag{flex:none;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--fq-brand-ink);background:color-mix(in srgb,var(--fq-brand) 14%,transparent);
  border-radius:var(--r-sm);padding:4px 8px;white-space:nowrap}
.invtag.is-used{color:var(--ds-text-3);background:var(--ds-surface-2)}
.invmini{flex:none;font-size:11.5px;font-weight:700;color:var(--ds-text-3);background:var(--ds-surface-2);
  border:1px solid var(--ds-border);border-radius:var(--r-sm);padding:5px 9px;cursor:pointer}
@media (max-width:340px){
  .invacts{flex-direction:column}
  .invrow-c{font-size:14px}
  .invmini{padding:5px 7px}
}


/* completed-today hero state (replaces Start/Resume once the day is done) */
.fqh-complete{display:flex;align-items:center;gap:9px;width:100%;margin-top:10px;
  background:color-mix(in srgb,var(--fq-brand) 15%,rgba(8,12,16,.55));
  border:1px solid color-mix(in srgb,var(--fq-brand) 38%,transparent);
  border-radius:12px;padding:8px 11px;backdrop-filter:blur(6px)}
.fqh-complete-i{flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--fq-brand-grad);display:grid;place-items:center}
.fqh-complete-i svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.fqh-complete-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.fqh-complete-t b{font-size:13.5px;font-weight:800;color:#fff;letter-spacing:.01em}
.fqh-complete-t small{font-size:11px;color:rgba(255,255,255,.72)}


/* simplified Home header: name + single avatar, no nested button shapes */
.fq-whoami{display:flex;align-items:center;gap:9px;background:none;border:none;
  padding:0;cursor:pointer;max-width:58%;min-width:0}
.fq-whoami-n{font-size:14px;font-weight:700;color:var(--ds-text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq-whoami--home .fq-whoami-n{display:none}
.fq-greet-one{font-size:22px;font-weight:800;color:var(--ds-text);line-height:1.15;
  letter-spacing:-.01em;overflow-wrap:anywhere}
@media (max-width:340px){
  .fq-whoami-n{display:none}          /* keep just the avatar when space is tight */
  .fq-greet-one{font-size:20px}
}


/* ═══ CHECKLIST SET LOGGER ═══ */
.cklist{display:flex;flex-direction:column;gap:8px;margin-top:var(--s4)}
.ckrow{border:1px solid var(--ds-border);border-radius:var(--r-lg);background:var(--ds-surface)}
/* completed → collapsed summary row */
.ckrow.is-done{display:flex;align-items:center;gap:10px;padding:11px 13px}
.ckrow.is-done .ck-lbl{flex:none;font-size:13.5px;font-weight:700;color:var(--ds-text-3)}
.ck-val{flex:1;min-width:0;text-align:right;font-size:14px;font-weight:800;color:var(--ds-text);
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-edit{flex:none;font-size:12px;font-weight:700;color:var(--fq-brand-ink);background:none;
  border:none;padding:4px 2px 4px 8px;cursor:pointer}
/* upcoming → muted placeholder */
.ckrow.is-todo{display:flex;align-items:center;gap:10px;padding:11px 13px;opacity:.55}
.ckrow.is-todo .ck-lbl{flex:none;font-size:13.5px;font-weight:700;color:var(--ds-text-3)}
.ck-todo{flex:1;text-align:right;font-size:12.5px;color:var(--ds-text-3)}
/* current → expanded, owns the logger */
.ckrow.is-current{padding:11px 11px 12px;background:var(--ds-surface-2);
  border-color:color-mix(in srgb,var(--fq-brand) 42%,var(--ds-border));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--fq-brand) 16%,transparent)}
.ck-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.ckrow.is-current .ck-lbl{flex:1;font-size:15px;font-weight:800;color:var(--ds-text)}
.ck-now{flex:none;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fq-brand-ink)}
.ck-mark{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;color:var(--ds-text-3);background:var(--ds-surface-3)}
.ck-mark.done{background:var(--fq-brand-grad);color:#fff}
.ck-mark.done svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.ck-mark.cur{background:var(--fq-brand-grad);color:#fff}
.ckrow.is-current .logger{margin:0}
.ck-log{width:100%;margin-top:10px;padding:12px;border:none;border-radius:var(--r-md);
  background:var(--fq-brand-ink);color:#062132;font-size:15px;font-weight:800;
  letter-spacing:.02em;cursor:pointer;font-family:var(--f)}
.ck-log:active{transform:scale(.99)}
/* footer now carries only Back */
.pactions--backonly{justify-content:flex-start}
.pactions--backonly .pnav{flex:none;display:flex;align-items:center;gap:7px;padding:10px 16px;width:auto}
.pnav-t{font-size:13.5px;font-weight:700}
@media (max-width:340px){
  .ck-val{font-size:13px}
  .ck-log{font-size:14px;padding:13px}
}


/* ═══ COMPACT ACTIVE-WORKOUT LOGGER ═══
   The expanded card was ~273px tall, pushing its Log Set button behind the sticky
   footer, and the value input had only ~30px of width at 320px (a "22.5" needs
   ~79px, so it clipped). Everything below is sizing only — no engine, no markup. */
.ckrow.is-current .logger{padding:9px 2px;margin-bottom:0;gap:0}
.ckrow.is-current .lg-half{gap:7px}
.ckrow.is-current .lg-lbl{font-size:10.5px;letter-spacing:.05em}
.ckrow.is-current .lg-stp{width:34px;height:34px}
.ckrow.is-current .lg-stp svg{width:15px;height:15px}
.ckrow.is-current .lg-val{font-size:clamp(19px,5.4vw,26px)}
.ckrow.is-current .lg-unit{font-size:10.5px;margin-top:-2px}
/* the scroll area must clear the sticky footer — the button was landing behind it */
.pbody{padding-bottom:26px}
@media (max-width:400px){
  .ckrow.is-current .lg-stp{width:32px;height:32px}
  .ckrow.is-current .lg-val{font-size:23px}
}
@media (max-width:360px){
  .pbody{padding-left:14px;padding-right:14px}      /* reclaim width for the values */
  .ckrow.is-current{padding:10px 9px 11px}
  .ckrow.is-current .lg-stp{width:30px;height:30px}
  .ckrow.is-current .lg-val{font-size:22px}
  .ck-log{padding:11px;font-size:14px}
  .ckrow.is-done,.ckrow.is-todo{padding:9px 11px}
}


/* With no exercise photo the media is just an empty gradient — shrink it further so
   the set logger is reachable without scrolling. `has-photo` is set by drawPlayer()
   only when a real image loads, so this needs no JS change. */
.pmedia:not(.has-photo){height:clamp(78px, 11vh, 108px)}
@media (max-width:360px){
  .pmedia{height:clamp(92px, 13vh, 124px)}
  .pmedia:not(.has-photo){height:clamp(70px, 10vh, 92px)}
}
/* the glyph watermark scales with the smaller placeholder */
.pmedia:not(.has-photo) .glyph{font-size:clamp(20px,7vw,34px)}


/* the fixed bar owns identity; give it the right proportions */
.top .fq-whoami{max-width:62vw}
.top .fq-avatar{width:34px;height:34px;font-size:12.5px}
.fq-head--home{padding-top:2px}


/* ═══ WATER CARD (Nutrition) ═══ */
.wcard{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--r-lg);
  padding:14px 15px 13px;margin:0 20px 14px}
.wcard-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.wcard-edit{background:none;border:none;font-size:12px;font-weight:700;
  color:var(--fq-brand-ink);cursor:pointer;padding:2px 0}
.wcard-v{display:flex;align-items:baseline;gap:7px;margin-bottom:9px;flex-wrap:wrap}
.wcard-now{font-size:24px;font-weight:800;color:var(--ds-text);font-variant-numeric:tabular-nums}
.wcard-goal{font-size:12.5px;color:var(--ds-text-3)}
.wcard-bar{height:7px;border-radius:99px;background:var(--ds-surface-3);overflow:hidden}
.wcard-bar i{display:block;height:100%;border-radius:99px;background:var(--fq-brand-grad);
  transition:width .28s ease}
.wcard-bar i.hit{background:linear-gradient(90deg,#12B981,#0EA5A5)}
.wcard-q{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.wcard-q button{flex:1;min-width:64px;padding:9px 6px;border-radius:var(--r-sm);
  background:var(--ds-surface-2);border:1px solid var(--ds-border);color:var(--ds-text);
  font-size:13px;font-weight:700;cursor:pointer;font-family:var(--f);white-space:nowrap}
.wcard-q button:active{transform:scale(.98)}
.wcard-q .wcard-undo{flex:0 0 auto;min-width:0;padding:9px 12px;color:var(--ds-text-3)}
@media (max-width:360px){
  .wcard-q button{min-width:0;font-size:12px;padding:9px 4px}
}

/* ═══ NUTRITION (Plan) ═══════════════════════════════════════════════════
   Every selector here is fqn-*. The screen deliberately owns no shared class:
   .strip/.dpill belong to Home's week strip, .seg/.gbtn/.note are app-wide, and
   restyling any of them would change tabs this pass is not touching. */
.fqn-head{padding:2px 20px 14px}
.fqn-title{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.fqn-tag{font-size:13.5px;color:var(--ds-text-2);font-weight:600;margin-top:5px}
.fqn-date{font-size:13.5px;color:var(--ds-text-3);font-weight:600;margin-top:1px}

.fqn-seg{display:flex;gap:4px;margin:0 20px 16px;background:var(--ds-surface);
  border:1px solid var(--ds-border);border-radius:var(--r-pill);padding:4px}
.fqn-seg button{flex:1;min-width:0;padding:11px 8px;border-radius:var(--r-pill);
  font-size:14px;font-weight:700;color:var(--ds-text-3);background:none;border:none;
  font-family:var(--f);cursor:pointer;white-space:nowrap}
.fqn-seg button.on{background:var(--fq-brand-grad);color:#07090C;
  box-shadow:0 2px 12px var(--ds-glow-accent)}

.fqn-wk{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 20px 12px}
.fqn-wk-l{flex:1;text-align:center;font-size:15px;font-weight:800;letter-spacing:-.01em}
.fqn-wk-l small{display:block;font-size:12px;font-weight:600;color:var(--ds-text-3);margin-top:2px}
.fqn-wk-a{flex:none;width:44px;height:44px;border-radius:var(--r-round);
  border:1px solid var(--ds-border);background:var(--ds-surface);color:var(--ds-text);
  display:grid;place-items:center;cursor:pointer}
.fqn-wk-a:disabled{opacity:.28}
.fqn-wk-a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fqn-wk-now{width:auto;padding:0 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:800;font-family:var(--f)}

.fqn-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:0 16px 16px}
.fqn-day{display:flex;flex-direction:column;align-items:center;gap:7px;
  background:none;border:none;padding:0;cursor:pointer;min-width:0}
.fqn-day-n{width:clamp(38px,11.5vw,46px);aspect-ratio:1;max-width:100%;border-radius:var(--r-round);
  display:grid;place-items:center;font-size:15px;font-weight:700;
  border:1.5px solid var(--ds-border);background:var(--ds-surface);color:var(--ds-text);
  font-variant-numeric:tabular-nums}
.fqn-day-l{font-size:11.5px;font-weight:600;color:var(--ds-text-3)}
.fqn-day.td .fqn-day-n{border-color:var(--ds-border-hi)}
.fqn-day.on .fqn-day-n{background:var(--fq-brand-grad);border-color:transparent;color:#07090C;
  box-shadow:0 0 0 2px var(--ds-bg),0 0 0 3.5px var(--fq-brand)}
.fqn-day.on .fqn-day-l{color:var(--ds-text);font-weight:700}

.fqn-sum{margin:0 16px 16px;padding:16px;border-radius:var(--r-lg);
  background:var(--ds-surface);border:1px solid var(--fq-brand-ink,var(--ds-border));
  box-shadow:var(--ds-shadow-card),0 0 22px -12px var(--fq-brand)}
.fqn-sum-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fqn-sum-t{font-size:17px;font-weight:800;letter-spacing:-.02em;min-width:0}
/* full width, below the header row: sharing the row with "Cal planned" forced a
   two-line wrap at every size */
.fqn-sum-s{font-size:12.5px;color:var(--ds-text-3);font-weight:600;margin-top:3px}
.fqn-sum-p{flex:none;text-align:right;font-size:11px;color:var(--ds-text-3);font-weight:600;line-height:1.25}
.fqn-sum-p b{display:block;font-size:15px;color:var(--ds-text);font-weight:800;font-variant-numeric:tabular-nums}
.fqn-sum-f{margin-top:12px;padding-top:11px;border-top:1px solid var(--ds-border);
  font-size:12.5px;color:var(--ds-text-3);font-weight:600;line-height:1.5}
.fqn-sum-f b{color:var(--fq-brand);font-weight:800;cursor:pointer}

/* Five equal columns. The first layout gave the macros a 4-up sub-grid and the
   water ring a fixed sibling, which at 320 squeezed the macros to 43px while
   water kept 50 — visibly mismatched, and the labels ("Calories" next to
   "Protein") ran into each other. One grid, one width, divider drawn as a
   pseudo-element so it costs no column space. */
.fqn-rings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:14px}
.fqn-rings-w{position:relative;background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--f);min-width:0}
.fqn-rings-w::before{content:"";position:absolute;left:-3px;top:4px;bottom:20px;
  width:1px;background:var(--ds-border)}
.fqn-ring{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
/* width first, aspect-ratio second, and max-width capping both. Height follows the
   USED width, which is the safe direction (deriving width from a min-height is what
   overflowed the hero at 320 in v115). */
.fqn-ring-g{position:relative;width:clamp(42px,15.5vw,64px);max-width:100%;aspect-ratio:1}
.fqn-ring-g svg{width:100%;height:100%;display:block;overflow:visible}
.fqn-ring-t{fill:none;stroke:var(--ds-surface-3);stroke-width:3.5}
.fqn-ring-v{fill:none;stroke:var(--fq-brand);stroke-width:3.5;stroke-linecap:round;
  transition:stroke-dashoffset .45s cubic-bezier(.2,.9,.2,1)}
.fqn-ring-n{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;pointer-events:none}
.fqn-ring-n b{font-size:clamp(12.5px,4vw,15px);font-weight:800;letter-spacing:-.03em;
  color:var(--ds-text);font-variant-numeric:tabular-nums;line-height:1;
  max-width:94%;white-space:nowrap;overflow:hidden;text-overflow:clip}
.fqn-ring-n s{text-decoration:none;font-size:clamp(8.5px,2.6vw,9.5px);font-weight:600;
  color:var(--ds-text-3);line-height:1.15;white-space:nowrap;letter-spacing:-.02em}
/* labels must never touch their neighbour: one line, shrink before they meet */
.fqn-ring-l{display:flex;align-items:center;justify-content:center;gap:3px;
  font-size:clamp(9px,2.9vw,11.5px);font-weight:700;letter-spacing:-.01em;
  color:var(--ds-text-2);line-height:1.2;white-space:nowrap;max-width:100%}
.fqn-ring--w .fqn-ring-v{stroke:var(--ds-accent-2,var(--fq-brand))}
.fqn-ring--w.hit .fqn-ring-v{stroke:var(--ds-success)}
.fqn-drop{width:11px;height:11px;flex:none;stroke:var(--ds-accent-2,var(--fq-brand));
  fill:none;stroke-width:2;stroke-linejoin:round}

/* The label used to share a flex row with the buttons, so at 390 the four
   buttons split ~190px and every label truncated ("+12 …", "Cust…"). Stacked,
   they get the full card width at every size. */
.fqn-wq{margin-top:14px;padding-top:13px;border-top:1px solid var(--ds-border)}
.fqn-wq-l{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:12.5px;font-weight:700;color:var(--ds-text-2);margin-bottom:9px}
.fqn-undo{background:none;border:none;padding:0;font-family:var(--f);font-size:11.5px;
  font-weight:700;color:var(--ds-text-3);text-decoration:underline;cursor:pointer}
.fqn-wq-b{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.fqn-wq-b button{padding:10px 2px;border-radius:var(--r-md);background:var(--ds-surface-2);
  border:1px solid var(--ds-border);color:var(--ds-text);font-family:var(--f);
  font-size:clamp(11px,3.4vw,12.5px);font-weight:700;cursor:pointer;white-space:nowrap}
.fqn-wq-b button:active{transform:scale(.97);border-color:var(--fq-brand)}

.fqn-meal{display:flex;align-items:stretch;gap:0;margin:0 16px 10px;
  background:var(--ds-surface);border:1px solid var(--ds-border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--ds-shadow-card)}
.fqn-meal-sp{flex:none;width:4px;align-self:stretch}
/* Fixed-size tile, centred in the column, and the <img> sized in the same pixels.
   Every percentage version of this leaves the photo at its intrinsic size on the
   first layout pass — the .fq-media box measured 79px while the <img> stayed at
   68, so a real photo sat letterboxed above a strip of the fallback gradient.
   Definite pixels resolve immediately and keep cards uniform whatever the title
   wraps to. --fqn-tile is the single place to change the size. */
.fqn-meal-m{--fqn-tile:68px;flex:none;display:flex;align-items:center;
  padding:8px 0 8px 8px;cursor:pointer}
.fqn-meal-img{flex:none;width:var(--fqn-tile);height:var(--fqn-tile);border-radius:var(--r-md)}
.fqn-meal-img>img{width:var(--fqn-tile);height:var(--fqn-tile);object-fit:cover;display:block}
/* the generic placeholder is a huge italic wordmark; in a 68px tile it wrapped
   BREAKFAST's "BRE" onto two lines */
.fqn-meal-img .fq-media__ph{font-size:12px;font-style:normal;letter-spacing:.08em;
  white-space:nowrap;color:rgba(255,255,255,.92)}
.fqn-meal-b{flex:1;min-width:0;padding:11px 10px 11px 12px;cursor:pointer;overflow-wrap:anywhere}
.fqn-meal-s{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ds-text-3)}
.fqn-meal-b h4{font-size:15px;font-weight:700;margin:3px 0 4px;line-height:1.22;letter-spacing:-.015em}
.fqn-meal-mm{font-size:11.5px;color:var(--ds-text-3);font-weight:600;line-height:1.3}
.fqn-meal-a{flex:none;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px 10px 10px 0}
.fqn-ib{width:32px;height:32px;border-radius:var(--r-md);border:1px solid var(--ds-border);
  background:var(--ds-surface-2);display:grid;place-items:center;color:var(--ds-text-3);cursor:pointer}
.fqn-ib svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fqn-ib.on{background:var(--fq-brand-grad);border-color:transparent;color:#07090C}

/* planned side, tucked under the meal it belongs to — deliberately quiet so the
   meal card still reads as the meal */
.fqn-side{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  margin:-6px 16px 10px;padding:8px 12px 9px 14px;
  background:var(--ds-surface);border:1px solid var(--ds-border);border-top:none;
  border-radius:0 0 var(--r-lg) var(--r-lg)}
.fqn-side-l{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fq-brand)}
.fqn-side-i{font-size:12.5px;font-weight:600;color:var(--ds-text-2);overflow-wrap:anywhere}
.fqn-side-i b{font-weight:700;color:var(--ds-text-3);margin-left:4px}
/* the meal card above a side loses its bottom rounding so the two read as one */
.fqn-meal:has(+ .fqn-side){margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
@media (max-width:360px){ .fqn-side{padding:7px 10px 8px 12px} .fqn-side-i{font-size:12px} }

.fqn-act{display:flex;align-items:center;gap:12px;width:calc(100% - 32px);margin:0 16px 10px;
  padding:15px 14px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text);font-family:var(--f);
  text-align:left;cursor:pointer}
.fqn-act-i{width:20px;height:20px;flex:none;stroke:var(--ds-text-3);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.fqn-act-t{flex:1;min-width:0;font-size:14.5px;font-weight:700}
.fqn-act-c{width:17px;height:17px;flex:none;stroke:var(--ds-text-3);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.fqn-act--pri{background:var(--fq-brand-grad);border-color:transparent;color:#07090C;
  box-shadow:0 4px 18px -8px var(--fq-brand)}
.fqn-act--pri .fqn-act-i,.fqn-act--pri .fqn-act-c{stroke:#07090C}
.fqn-act:active{transform:scale(.995)}
.fqn-note{padding:2px 20px 0;font-size:12.5px;color:var(--ds-text-3);font-weight:600;text-align:center}

@media (max-width:360px){
  .fqn-title{font-size:30px}
  .fqn-sum{padding:14px 12px}
  .fqn-sum-t{font-size:16px}
  .fqn-rings{gap:3px}
  .fqn-rings-w::before{left:-2px}
  .fqn-act{padding:14px 12px;gap:10px}
  .fqn-act-t{font-size:13.5px}
  .fqn-meal-m{--fqn-tile:60px}
  /* "BRE" at 12px/.08em measures 65 in a 60px tile — it was being clipped */
  .fqn-meal-img .fq-media__ph{font-size:10px;letter-spacing:.02em}
}

/* ═══ NUTRITION · LOG WHAT I ATE ════════════════════════════════════════════
   Shares the Plan screen's head / seg / week / day classes so the two sub-tabs
   are one screen with two views. Everything specific to the log is fql-*; no
   shared class is restyled here. */
.fql-sum{margin:0 16px 14px;padding:16px;border-radius:var(--r-lg);
  background:var(--ds-surface);border:1px solid var(--fq-brand-ink,var(--ds-border));
  box-shadow:var(--ds-shadow-card),0 0 22px -12px var(--fq-brand)}
.fql-sum-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fql-sum-t{font-size:17px;font-weight:800;letter-spacing:-.02em;min-width:0}
.fql-sum-n{flex:none;font-size:11.5px;font-weight:600;color:var(--ds-text-3)}
.fql-kcal{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px}
.fql-kcal-b{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;
  color:var(--ds-text);font-variant-numeric:tabular-nums;min-width:0}
.fql-kcal-b small{display:block;margin-top:5px;font-size:11.5px;font-weight:600;
  letter-spacing:0;color:var(--ds-text-3)}
.fql-kcal-r{flex:none;text-align:right}
.fql-kcal-r b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;
  color:var(--fq-brand);font-variant-numeric:tabular-nums;line-height:1}
.fql-kcal-r b.over{color:var(--ds-warning,#F5A524)}
.fql-kcal-r span{font-size:11px;font-weight:600;color:var(--ds-text-3)}
.fql-trk{height:8px;border-radius:99px;background:var(--ds-surface-3);overflow:hidden;margin-top:12px}
.fql-trk i{display:block;height:100%;border-radius:99px;background:var(--fq-brand-grad);
  transition:width .45s cubic-bezier(.2,.9,.2,1)}
.fql-trk i.over{background:linear-gradient(90deg,#F5A524,#F97316)}
.fql-macs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--ds-border)}
.fql-mac{min-width:0}
/* Name above value, not beside it. Side by side, a 3-column grid gives each macro
   ~80px at 320 and "Protein" + "38 / 177g" cannot both fit — the name was being
   ellipsised to "Prote…". Stacked, neither ever truncates. */
.fql-mac-t{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  font-size:11.5px;font-weight:700;color:var(--ds-text-2);margin-bottom:6px}
.fql-mac-v{font-variant-numeric:tabular-nums;white-space:nowrap}
.fql-mac-v b{font-weight:800;color:var(--ds-text)}
.fql-mac-v s{text-decoration:none;font-size:10px;font-weight:600;color:var(--ds-text-3)}
.fql-mac-b{height:5px;border-radius:99px;background:var(--ds-surface-3);overflow:hidden}
.fql-mac-b i{display:block;height:100%;border-radius:99px;transition:width .45s cubic-bezier(.2,.9,.2,1)}
.fql-mac-b i.p{background:var(--mag)} .fql-mac-b i.c{background:var(--cyan)} .fql-mac-b i.f{background:var(--gold)}
.fql-mac-l{margin-top:5px;font-size:10.5px;font-weight:600;color:var(--ds-text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fql-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 16px 16px}
.fql-acts button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:14px 4px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text);font-family:var(--f);cursor:pointer}
.fql-acts button svg{width:19px;height:19px;stroke:var(--fq-brand);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.fql-acts button span{font-size:11.5px;font-weight:700;line-height:1.2;text-align:center;
  overflow-wrap:anywhere}
.fql-acts button:active{transform:scale(.98);border-color:var(--fq-brand)}

.fql-grp{margin:0 16px 10px;background:var(--ds-surface);border:1px solid var(--ds-border);
  border-radius:var(--r-lg);overflow:hidden}
.fql-grp-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 12px 12px 14px;border-bottom:1px solid var(--ds-border)}
.fql-grp-n{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ds-text-2)}
.fql-grp-r{display:flex;align-items:center;gap:10px;flex:none}
.fql-grp-k{font-size:12.5px;font-weight:700;color:var(--ds-text-3);font-variant-numeric:tabular-nums}
.fql-add{width:30px;height:30px;flex:none;border-radius:var(--r-md);border:1px solid var(--ds-border);
  background:var(--ds-surface-2);display:grid;place-items:center;cursor:pointer}
.fql-add svg{width:15px;height:15px;stroke:var(--fq-brand);fill:none;stroke-width:2.4;stroke-linecap:round}
.fql-add:active{background:var(--fq-brand);border-color:transparent}
.fql-add:active svg{stroke:#07090C}
.fql-rows{display:flex;flex-direction:column}
.fql-row{display:flex;align-items:center;gap:10px;padding:11px 12px 11px 14px;
  border-bottom:1px solid var(--ds-border)}
.fql-row:last-child{border-bottom:none}
.fql-row-b{flex:1;min-width:0}
.fql-row-n{font-size:14.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.fql-row-m{margin-top:3px;font-size:11.5px;font-weight:600;color:var(--ds-text-3);overflow-wrap:anywhere}
.fql-row-k{flex:none;font-size:14.5px;font-weight:800;color:var(--ds-text);
  font-variant-numeric:tabular-nums}
.fql-del{width:28px;height:28px;flex:none;border-radius:var(--r-md);border:1px solid var(--ds-border);
  background:none;display:grid;place-items:center;cursor:pointer}
.fql-del svg{width:13px;height:13px;stroke:var(--ds-text-3);fill:none;stroke-width:2.2;stroke-linecap:round}
.fql-del:active{border-color:var(--ds-danger,#FF4D5E)}
.fql-del:active svg{stroke:var(--ds-danger,#FF4D5E)}
.fql-empty{padding:16px 14px;font-size:12.5px;font-weight:600;color:var(--ds-text-3)}

.fql-locked{display:flex;align-items:flex-start;gap:11px;margin:2px 16px 0;padding:15px 14px;
  border-radius:var(--r-lg);background:var(--ds-surface);border:1px dashed var(--ds-border);
  flex-wrap:wrap}
.fql-locked>svg{width:19px;height:19px;flex:none;margin-top:1px;stroke:var(--ds-text-3);
  fill:none;stroke-width:1.8;stroke-linecap:round}
.fql-locked div{flex:1;min-width:0}
.fql-locked b{display:block;font-size:13.5px;font-weight:700;color:var(--ds-text)}
.fql-locked span{display:block;margin-top:3px;font-size:12.5px;font-weight:500;
  line-height:1.45;color:var(--ds-text-3)}
.fql-locked-go{flex:none;margin-top:2px;background:none;border:none;padding:0;
  font-family:var(--f);font-size:12.5px;font-weight:800;color:var(--fq-brand);cursor:pointer}

@media (max-width:360px){
  .fql-sum{padding:14px 12px}
  .fql-kcal-b{font-size:30px}
  .fql-macs{gap:7px}
  .fql-mac-t{font-size:10.5px}
  .fql-mac-v s{font-size:9px}
  .fql-acts{gap:6px}
  .fql-acts button{padding:13px 2px}
  .fql-acts button span{font-size:10.5px}
  .fql-row-n{font-size:14px}
}

/* ═══ FOOD PICKER SHEET ════════════════════════════════════════════════════
   All fp-*. Deliberately does NOT touch .srchbox (shared with the quick-add and
   custom-food sheets), .fsec (shared with Friends) or .tg (shared with the
   workout list). The old .fres/.ftab/.ftabs/.r rules are left in place but are
   no longer referenced by this screen. */
/* own size, so the shared .sheet h3 rule doesn't set the rhythm here */
h3.fp-title{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:4px 0 14px}

.fp-srch{display:flex;align-items:center;gap:10px;padding:0 14px;height:52px;
  background:var(--ds-surface);border:1.5px solid var(--ds-border);
  border-radius:var(--r-lg);transition:border-color .16s ease,box-shadow .16s ease}
.fp-srch:focus-within{border-color:var(--fq-brand);box-shadow:0 0 0 3px var(--ds-glow-accent)}
.fp-srch-i{width:19px;height:19px;flex:none;stroke:var(--ds-text-3);fill:none;stroke-width:2;
  stroke-linecap:round}
.fp-srch:focus-within .fp-srch-i{stroke:var(--fq-brand)}
.fp-srch-in{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ds-text);
  font-family:var(--f);font-size:16px;font-weight:600}
.fp-srch-in::placeholder{color:var(--ds-text-3);font-weight:500}
.fp-srch-in::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.fp-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0 14px}
.fp-tab{padding:10px 4px;border-radius:var(--r-pill);background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text-3);font-family:var(--f);
  font-size:clamp(11.5px,3.5vw,13.5px);font-weight:700;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fp-tab.on{background:var(--fq-brand-grad);border-color:transparent;color:#07090C;
  box-shadow:0 2px 12px var(--ds-glow-accent)}

/* ONE scroll surface: no max-height and no overflow here. The sheet shell
   (.sheet .inner) is the only scroller, so iOS never has two to fight over and
   the last row plus the safe-area padding are always reachable. */
.fp-list{display:flex;flex-direction:column;gap:8px}
.fp-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 12px 10px 10px;background:var(--ds-surface);border:1px solid var(--ds-border);
  border-radius:var(--r-lg);font-family:var(--f);color:var(--ds-text);cursor:pointer}
.fp-row:active{border-color:var(--fq-brand);background:var(--ds-surface-2)}
.fp-thumb{width:52px;height:52px;flex:none;border-radius:var(--r-md);overflow:hidden;
  position:relative;display:grid;place-items:center}
.fp-thumb--none{background:linear-gradient(160deg,#1A222B,#0E141A)}
.fp-thumb>img{position:absolute;inset:0;width:52px;height:52px;object-fit:cover;z-index:1}
.fp-thumb-g{width:20px;height:20px;stroke:var(--ds-text-3);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.fp-row-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fp-row-top{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.fp-row-n{font-size:14.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;
  overflow-wrap:anywhere}
/* brand is its own muted chip, not part of the name, so a long brand can never
   push the calories out of the row */
/* Wraps rather than truncating mid-word — an ellipsised brand hides the part that
   tells two similar products apart. Capped at two lines so one pathological USDA
   brand can't turn a 320px result card into a 224px slab; short brands are
   untouched because the clamp only engages past two lines. The full string stays
   on the title attribute. */
.fp-row-br{font-size:10.5px;font-weight:700;color:var(--ds-text-3);min-width:0;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.fp-row-m{font-size:11.5px;font-weight:600;color:var(--ds-text-2);overflow-wrap:anywhere;letter-spacing:-.01em}
.fp-row-u{font-size:11px;font-weight:600;color:var(--ds-text-3);overflow-wrap:anywhere}
/* Star only. The badge used to live here too, which cost the text column ~60px
   at 390 and pushed both the name and the macro line onto extra lines. Inline
   after the name it reads as a label on the food, and the macros fit one line. */
.fp-row-r{flex:none;display:flex;align-items:center}
.fp-badge{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:99px;white-space:nowrap;
  background:var(--ds-surface-2);border:1px solid var(--ds-border);color:var(--ds-text-3)}
.fp-badge--usda{color:var(--ds-text-2)}
.fp-badge--mine{color:var(--fq-brand);border-color:color-mix(in srgb,var(--fq-brand) 34%,transparent)}
/* 34px hit area with the glyph inset, so the star is comfortably tappable
   without widening the row */
.fp-star{width:34px;height:34px;margin:-4px -4px -4px 0;flex:none;display:grid;
  place-items:center;cursor:pointer}
.fp-star svg{width:17px;height:17px;fill:none;stroke:var(--ds-text-3);stroke-width:1.7;
  stroke-linejoin:round}
.fp-star.on svg{fill:var(--fq-brand);stroke:var(--fq-brand)}

.fp-sec{display:flex;align-items:center;gap:10px;margin:18px 2px 9px;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ds-text-3)}
.fp-sec::after{content:"";flex:1;height:1px;background:var(--ds-border)}
.fp-note{display:flex;align-items:flex-start;gap:9px;padding:13px 14px;border-radius:var(--r-lg);
  background:var(--ds-surface);border:1px solid var(--ds-border);
  font-size:12.5px;font-weight:600;color:var(--ds-text-3)}
.fp-note>svg{width:17px;height:17px;flex:none;margin-top:1px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round}
.fp-note span{min-width:0}
.fp-note b{display:block;font-weight:700;color:var(--ds-text-2)}
.fp-note i{display:block;margin-top:3px;font-style:normal;font-weight:500;color:var(--ds-text-3)}
.fp-note--warn{border-color:color-mix(in srgb,#FF6B7A 32%,var(--ds-border));color:#FFB4A2}
.fp-spin{flex:none;width:13px;height:13px;border-radius:50%;
  border:2px solid var(--ds-border);border-top-color:var(--fq-brand);
  animation:fpspin .7s linear infinite}
@keyframes fpspin{to{transform:rotate(360deg)}}

.fp-empty{display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:30px 22px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px dashed var(--ds-border);text-align:center}
.fp-empty svg{width:26px;height:26px;stroke:var(--ds-text-3);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.fp-empty p{font-size:13px;font-weight:600;line-height:1.5;color:var(--ds-text-3);max-width:34ch}

.fp-new{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:12px;padding:15px;border-radius:var(--r-lg);background:var(--fq-brand-grad);
  border:none;color:#07090C;font-family:var(--f);font-size:14.5px;font-weight:800;cursor:pointer}
.fp-new svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
/* breathing room at the end of the single scroll surface */
.fp-foot{height:8px}

@media (max-width:360px){
  h3.fp-title{font-size:24px}
  .fp-srch{height:48px;padding:0 12px}
  .fp-srch-in{font-size:15.5px}
  .fp-tabs{gap:4px}
  .fp-tab{padding:9px 2px}
  .fp-row{gap:9px;padding:10px 10px 10px 9px}
  .fp-thumb{width:46px;height:46px}
  .fp-thumb>img{width:46px;height:46px}
  .fp-row-n{font-size:14px}
}

/* ═══ QUANTITY SHEET ═══════════════════════════════════════════════════════
   fqx-* only. The sheet shell (.sheet .inner) stays the single scroll surface
   and supplies the safe-area padding; nothing here scrolls on its own. */
h3.fqx-title{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.12;
  margin:4px 0 6px;overflow-wrap:anywhere}
.fqx-per{font-size:13px;font-weight:600;color:var(--ds-text-3);margin-bottom:16px;
  overflow-wrap:anywhere}

.fqx-ctx{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-lg);
  background:var(--ds-surface);border:1px solid var(--ds-border);margin-bottom:20px}
.fqx-ctx-t{width:54px;height:54px;flex:none;border-radius:var(--r-md);display:grid;
  place-items:center;font-size:12px;font-weight:800;letter-spacing:.08em;color:#07090C}
.fqx-ctx-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fqx-ctx-l{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ds-text-3)}
.fqx-ctx-n{font-size:16.5px;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.fqx-ctx-d{font-size:12.5px;font-weight:600;color:var(--ds-text-3)}

/* Side by side while both fit. At 320 the helper squeezed the title into three
   lines, so below 380 the helper drops underneath instead — the title keeps its
   size rather than shrinking to defend a one-line layout that no longer fits. */
.fqx-sec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.fqx-sec h4{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.fqx-sec span{flex:none;font-size:11.5px;font-weight:600;color:var(--ds-text-3)}
@media (max-width:379px){
  .fqx-sec{display:block}
  .fqx-sec span{display:block;margin-top:3px;font-size:11px}
}
.fqx-pre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.fqx-pill{padding:14px 2px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text);font-family:var(--f);
  font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}
.fqx-pill.on{background:var(--fq-brand-grad);border-color:transparent;color:#07090C;
  box-shadow:0 2px 14px var(--ds-glow-accent)}

.fqx-qty{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 14px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1.5px solid color-mix(in srgb,var(--fq-brand) 40%,var(--ds-border));margin-bottom:20px}
.fqx-step{width:52px;height:52px;flex:none;border-radius:var(--r-round);
  border:1px solid var(--ds-border);background:var(--ds-surface-2);display:grid;
  place-items:center;cursor:pointer}
.fqx-step svg{width:20px;height:20px;stroke:var(--ds-text);fill:none;stroke-width:2.4;stroke-linecap:round}
.fqx-step:disabled{opacity:.32}
.fqx-step:active:not(:disabled){background:var(--fq-brand)}
.fqx-step:active:not(:disabled) svg{stroke:#07090C}
.fqx-qty-b{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
/* the editable input, restyled as the big centred number */
.fqx-qty-n{width:100%;background:none;border:none;outline:none;text-align:center;
  font-family:var(--f);font-size:34px;font-weight:800;letter-spacing:-.03em;
  color:var(--ds-text);line-height:1.05;-moz-appearance:textfield}
.fqx-qty-n::-webkit-outer-spin-button,.fqx-qty-n::-webkit-inner-spin-button{
  -webkit-appearance:none;appearance:none;margin:0}
.fqx-qty-l{font-size:12.5px;font-weight:600;color:var(--ds-text-3);text-align:center;
  overflow-wrap:anywhere}

.fqx-nut{padding:14px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px solid var(--ds-border);margin-bottom:20px}
.fqx-nut h4{font-size:14.5px;font-weight:800;letter-spacing:-.02em;margin-bottom:11px}
.fqx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.fqx-stat{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 2px;
  border-radius:var(--r-md);background:var(--ds-surface-2);border:1px solid var(--ds-border);
  min-width:0}
.fqx-stat b{font-size:clamp(15px,4.6vw,18px);font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fqx-stat s{text-decoration:none;font-size:10.5px;font-weight:600;color:var(--ds-text-3);
  white-space:nowrap}

.fqx-go{display:block;width:100%;padding:17px;border-radius:var(--r-lg);border:none;
  background:var(--fq-brand-grad);color:#07090C;font-family:var(--f);font-size:16.5px;
  font-weight:800;letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 6px 24px -10px var(--fq-brand)}
.fqx-go:active{transform:scale(.995)}
.fqx-locked{padding:15px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px dashed var(--ds-border);text-align:center;font-size:13px;font-weight:600;
  color:var(--ds-text-3)}
.fqx-alt{display:block;width:100%;margin-top:12px;padding:10px;background:none;border:none;
  font-family:var(--f);font-size:14px;font-weight:800;color:var(--fq-brand);cursor:pointer}
.fqx-foot{height:6px}

@media (max-width:360px){
  h3.fqx-title{font-size:23px}
  .fqx-ctx-t{width:48px;height:48px;font-size:11px}
  .fqx-pill{padding:13px 1px;font-size:14px}
  .fqx-step{width:46px;height:46px}
  .fqx-qty-n{font-size:30px}
  .fqx-stats{gap:5px}
  .fqx-stat{padding:11px 1px}
  .fqx-stat s{font-size:10px}
  .fqx-go{font-size:15.5px;padding:16px}
}

/* ═══ PROGRESS · OVERVIEW ══════════════════════════════════════════════════
   Refinement of the existing screen, not a rebuild: the same pg* class names are
   kept and restyled so History/Stats/Photos and every other screen are untouched. */
.pghead-t{min-width:0}
.pghead-s{margin-top:2px;font-size:13.5px;font-weight:600;color:var(--ds-text-3)}

/* headline stats: icon tile left, number + label right */
.pgstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 16px 12px}
.fq-card.pgstat{display:flex;align-items:center;gap:10px;padding:13px 11px;min-width:0}
.pgstat-i{width:38px;height:38px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;background:color-mix(in srgb,var(--fq-brand) 15%,transparent)}
.pgstat-i svg{width:18px;height:18px;stroke:var(--fq-brand);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pgstat-b{min-width:0;display:flex;flex-direction:column;gap:1px}
.pgstat-v{font-size:clamp(20px,6vw,25px);font-weight:800;letter-spacing:-.03em;
  line-height:1.05;font-variant-numeric:tabular-nums}
/* the original .pgstat-k set uppercase + letter-spacing + margin-top; a later rule
   only overrides what it declares, so those are reset explicitly here */
.pgstat-k{font-size:11.5px;font-weight:600;color:var(--ds-text-3);line-height:1.25;
  overflow-wrap:break-word;text-transform:none;letter-spacing:-.005em;margin-top:0}

/* training activity */
.fq-card.pgchart{margin:0 16px 12px;padding:15px 14px}
.pgchart-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:6px}
.pgchart-t{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;
  letter-spacing:-.02em}
.pgchart-i{width:26px;height:26px;flex:none;display:grid;place-items:center}
.pgchart-i svg{width:19px;height:19px;stroke:var(--fq-brand);fill:none;stroke-width:2.2;
  stroke-linecap:round}
.pgchart-f{font-size:clamp(10.5px,3vw,11.5px);font-weight:600;color:var(--ds-text-3);
  text-align:right;min-width:0}
.pgchart-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px;
  padding-top:13px;border-top:1px solid var(--ds-border)}
.pgmini{display:flex;align-items:center;gap:10px;min-width:0}
.pgmini+.pgmini{padding-left:12px;border-left:1px solid var(--ds-border)}
.pgmini-i{width:36px;height:36px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;background:color-mix(in srgb,var(--fq-brand) 15%,transparent)}
.pgmini-i svg{width:17px;height:17px;stroke:var(--fq-brand);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.pgmini-b{min-width:0;display:flex;flex-direction:column}
.pgmini-b b{font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.pgmini-b small{font-size:11.5px;font-weight:600;color:var(--ds-text-3);overflow-wrap:anywhere}

/* level */
.fq-card.pglevel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:12px;margin:0 16px 16px;padding:15px 14px}
.pglevel-i{width:44px;height:44px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;background:color-mix(in srgb,var(--fq-brand) 16%,transparent)}
.pglevel-i svg{width:21px;height:21px;stroke:var(--fq-brand);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pglevel-b{min-width:0;display:flex;flex-direction:column;gap:2px}
.pglevel-t{font-size:19px;font-weight:800;letter-spacing:-.025em}
.pglevel-v{font-size:12.5px;font-weight:600;color:var(--ds-text-3);overflow-wrap:anywhere}
.pglevel-p{flex:none;padding:6px 11px;border-radius:var(--r-pill);font-size:13px;
  font-weight:800;color:var(--fq-brand);
  border:1px solid color-mix(in srgb,var(--fq-brand) 34%,transparent);
  background:color-mix(in srgb,var(--fq-brand) 10%,transparent)}
.pglevel-bar{grid-column:1/-1;margin-top:4px}

/* best lifts */
.pgsec{margin:0 16px 12px}
.pgsec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 2px 9px}
.pgsec-h h3{font-size:19px;font-weight:800;letter-spacing:-.025em}
.pgsec-all{background:none;border:none;padding:0;font-family:var(--f);font-size:13.5px;
  font-weight:800;color:var(--fq-brand);cursor:pointer;white-space:nowrap}
.fq-card.pgpr-card{padding:0;overflow:hidden}
.pgpr{display:flex;align-items:center;gap:9px;padding:12px 10px;
  border-bottom:1px solid var(--ds-border);cursor:pointer}
.pgpr:last-child{border-bottom:none}
.pgpr:active{background:var(--ds-surface-2)}
.pgpr-i{width:32px;height:32px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;background:var(--ds-surface-2);border:1px solid var(--ds-border)}
.pgpr-i svg{width:16px;height:16px;stroke:var(--ds-text-2);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* same reset reason: the original truncated the name with nowrap + ellipsis,
   which cut "Goblet Squat" to "G…" once the icon and chevron took their width */
/* break-word, not anywhere: "Goblet Squat" must wrap at the space if it has to,
   never mid-word into "Gob / let Squ / at" */
.pgpr-n{flex:1 1 auto;min-width:0;font-size:14.5px;font-weight:700;letter-spacing:-.015em;
  overflow-wrap:break-word;white-space:normal;overflow:visible;text-overflow:clip;
  line-height:1.22}
/* the delta line is the widest thing in the row, so it is allowed to shrink
   rather than dictating the row and squeezing the lift name to nothing */
.pgpr-v{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-end;
  gap:1px;text-align:right}
.pgpr-v b{font-size:14.5px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.pgpr-v small{font-size:10.5px;font-weight:600;color:var(--ds-text-3);white-space:nowrap;
  letter-spacing:-.01em}
.pgpr-v small.up{color:var(--ds-success,#38D39F)}
.pgpr-c{width:14px;height:14px;flex:none;stroke:var(--ds-text-3);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

@media (max-width:360px){
  .pgstats{gap:8px;margin:0 12px 10px}
  .fq-card.pgstat{gap:9px;padding:12px 10px}
  .pgstat-i{width:36px;height:36px}
  .pgstat-i svg{width:17px;height:17px}
  .pgstat-k{font-size:11px}
  .fq-card.pgchart,.fq-card.pglevel{margin-left:12px;margin-right:12px}
  .pgchart-t{font-size:15.5px}
  .pgmini-i{width:32px;height:32px}
  .pgmini-b b{font-size:15px}
  .pgmini+.pgmini{padding-left:9px}
  .pglevel-t{font-size:17px}
  .pgsec{margin-left:12px;margin-right:12px}
  .pgpr{gap:9px;padding:11px 10px}
  .pgpr-i{width:32px;height:32px}
  .pgpr-n{font-size:14px}
  .pgpr-v b{font-size:13.5px}
  .pgpr-v small{font-size:10.5px}
}

/* Narrow-width corrections for the Progress overview.
   At 320 the delta line ("+ 2 reps from previous best") is wider than the space
   left once the icon, name and chevron are placed, and because it was nowrap it
   escaped its box and printed over the lift name. Letting it wrap fixes the
   collision without shortening the copy. */
@media (max-width:379px){
  .pgpr-v{max-width:52%}
  .pgpr-v small{white-space:normal;text-align:right;line-height:1.25}
  /* "Workouts" was being split as "Workout / s" — wrap at spaces only */
  .pgstat-k{overflow-wrap:normal;word-break:normal;hyphens:none}
}
/* Four tabs at 320 overflowed the (scrollable) row so "Photos" sat off-screen.
   An equal-width grid keeps all four visible at every phone size; the row is no
   longer a scroller, so nothing can hide off the right edge. */
.pgseg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow-x:visible}
.pgseg-b{width:100%;font-size:clamp(11px,3.3vw,13px);padding-left:2px;padding-right:2px;
  overflow:hidden;text-overflow:ellipsis}


/* ═══ PROGRESS · HISTORY ═══════════════════════════════════════════════════
   Same card language as the approved Overview. All new class names are pgh-*;
   the old flat-list rules (.pghist, .pgh-t, .pgh-m) are no longer referenced. */
.pgh-wrap{padding:0 16px}
.pgh-group{margin:14px 2px 8px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ds-text-3)}
.pgh-group:first-child{margin-top:0}

.fq-card.pgh{margin:0 0 9px;padding:0;overflow:hidden;display:block}
.fq-card.pgh.pr{border-color:color-mix(in srgb,var(--fq-brand) 30%,var(--ds-border))}
.fq-card.pgh.on{border-color:color-mix(in srgb,var(--fq-brand) 42%,var(--ds-border))}
.pgh-hd{display:flex;align-items:flex-start;gap:11px;width:100%;padding:13px 12px;
  background:none;border:none;text-align:left;font-family:var(--f);color:var(--ds-text);
  cursor:pointer}
.pgh-hd:active{background:var(--ds-surface-2)}
.pgh-i{width:38px;height:38px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;margin-top:1px;
  background:color-mix(in srgb,var(--fq-brand) 15%,transparent)}
.pgh-i svg{width:18px;height:18px;stroke:var(--fq-brand);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pgh-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
/* wraps instead of truncating — the old rule ellipsised any real session name */
.pgh-n{font-size:15.5px;font-weight:800;letter-spacing:-.015em;line-height:1.22;
  overflow-wrap:break-word;white-space:normal;overflow:visible;text-overflow:clip}
.pgh-d{font-size:12px;font-weight:600;color:var(--ds-text-3);overflow-wrap:anywhere}
.pgh-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.pgh-chip{padding:3px 8px;border-radius:var(--r-pill);font-size:11px;font-weight:600;
  color:var(--ds-text-3);background:var(--ds-surface-2);border:1px solid var(--ds-border);
  white-space:nowrap}
.pgh-chip b{font-weight:800;color:var(--ds-text);font-variant-numeric:tabular-nums}
.pgh-chip--pr{color:var(--fq-brand);border-color:color-mix(in srgb,var(--fq-brand) 34%,transparent);
  background:color-mix(in srgb,var(--fq-brand) 10%,transparent)}
.pgh-chip--pr b{color:var(--fq-brand)}
.pgh-c{width:16px;height:16px;flex:none;margin-top:11px;stroke:var(--ds-text-3);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s ease}
.pgh.on .pgh-c{transform:rotate(90deg);stroke:var(--fq-brand)}

.pgh-x{border-top:1px solid var(--ds-border);padding:4px 12px 10px}
.pgh-xr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--ds-border)}
.pgh-xr:last-child{border-bottom:none}
.pgh-xn{flex:0 1 auto;min-width:0;font-size:13.5px;font-weight:700;overflow-wrap:break-word}
.pgh-xs{flex:0 1 auto;min-width:0;text-align:right;font-size:12px;font-weight:600;
  color:var(--ds-text-3);overflow-wrap:normal;word-break:normal}
.pgh-xe{padding:10px 0;font-size:12.5px;font-weight:600;color:var(--ds-text-3)}
.pgh-note{margin:12px 2px 0;font-size:12px;font-weight:600;color:var(--ds-text-3);text-align:center}

.fq-card.pgh-empty{margin:0 16px;padding:30px 22px;display:flex;flex-direction:column;
  align-items:center;gap:11px;text-align:center;border-style:dashed}
.pgh-empty-i{width:46px;height:46px;border-radius:var(--r-round);display:grid;place-items:center;
  background:color-mix(in srgb,var(--fq-brand) 13%,transparent)}
.pgh-empty-i svg{width:21px;height:21px;stroke:var(--fq-brand);fill:none;stroke-width:1.9;
  stroke-linecap:round}
.fq-card.pgh-empty h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.fq-card.pgh-empty p{font-size:13px;font-weight:600;line-height:1.5;color:var(--ds-text-3);max-width:32ch}

@media (max-width:360px){
  .pgh-wrap{padding:0 12px}
  .pgh-hd{gap:9px;padding:12px 10px}
  .pgh-i{width:34px;height:34px}
  .pgh-n{font-size:14.5px}
  .pgh-chip{font-size:10.5px;padding:3px 7px}
  .pgh-x{padding:4px 10px 9px}
  .pgh-xn{font-size:13px}
  .pgh-xs{font-size:11.5px}
  .fq-card.pgh-empty{margin:0 12px}
}

/* ═══ PROGRESS · STATS ═════════════════════════════════════════════════════
   All new selectors are pgs-*. The shared .card/.chart/.mini/.bars/.xl/.row/.sh
   rules are untouched — .card.chart in particular is also the Photos bodyweight
   chart. The Best Lifts rows deliberately REUSE .pgpr from the approved Overview
   so the two lists cannot drift apart; only the extra date line is pgs-*. */
.pgs-wrap{padding:0 16px}
.fq-card.pgs-card{margin:0 0 14px;padding:15px 14px}
.pgs-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:10px}
.pgs-t{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.pgs-ti{width:26px;height:26px;flex:none;display:grid;place-items:center}
.pgs-ti svg{width:19px;height:19px;stroke:var(--fq-brand);fill:none;stroke-width:2.2;stroke-linecap:round}
.pgs-help{font-size:clamp(10.5px,3vw,11.5px);font-weight:600;color:var(--ds-text-3);
  text-align:right;min-width:0}

/* tappable weeks — replaces title= tooltips, which do not exist on touch */
.pgs-bars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;
  align-items:end;height:128px}
.pgs-b{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:6px;height:100%;background:none;border:none;padding:0;cursor:pointer;min-width:0}
.pgs-b-f{width:100%;max-width:26px;border-radius:5px;background:var(--ds-surface-3);
  transition:background .16s ease}
.pgs-b-x{font-size:10.5px;font-weight:600;color:var(--ds-text-3);font-variant-numeric:tabular-nums}
.pgs-b.cur .pgs-b-f{background:var(--fq-brand-grad)}
.pgs-b.sel .pgs-b-f{background:var(--fq-brand-grad);
  box-shadow:0 0 0 2px var(--ds-bg),0 0 0 3.5px var(--fq-brand)}
.pgs-b.sel .pgs-b-x{color:var(--ds-text);font-weight:800}

.pgs-pick{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--ds-border)}
.pgs-pick-w{font-size:12.5px;font-weight:700;color:var(--ds-text-2);min-width:0;
  overflow-wrap:anywhere}
.pgs-pick-v{flex:none;text-align:right;display:flex;flex-direction:column;gap:1px}
.pgs-pick-v b{font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pgs-pick-v small{font-size:11px;font-weight:600;color:var(--ds-text-3);white-space:nowrap}
.pgs-trend{margin-top:11px;padding:9px 11px;border-radius:var(--r-md);font-size:13px;
  font-weight:800;text-align:center;background:var(--ds-surface-2);
  border:1px solid var(--ds-border);color:var(--ds-text-2)}
.pgs-trend--up{color:var(--fq-brand);border-color:color-mix(in srgb,var(--fq-brand) 32%,transparent);
  background:color-mix(in srgb,var(--fq-brand) 9%,transparent)}
.pgs-trend--down{color:var(--ds-warning,#F5A524);
  border-color:color-mix(in srgb,var(--ds-warning,#F5A524) 30%,transparent);
  background:color-mix(in srgb,var(--ds-warning,#F5A524) 9%,transparent)}

/* explicit window label — the old screen mixed 8-week and all-time silently */
.pgs-sech{margin:0 2px 8px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ds-text-3)}
.pgstats.pgs-stats{margin:0 0 10px}
.fq-card.pglevel.pgs-level{margin:0 0 4px}

.pgsec.pgs-lifts{margin:18px 0 0}
.pgs-note{flex:none;font-size:11.5px;font-weight:600;color:var(--ds-text-3);white-space:nowrap}
/* the date sits under the lift name rather than in the value column, so the
   delta line keeps its own width and cannot crush the name */
.pgs-lift-d{display:block;margin-top:2px;font-size:11px;font-weight:600;
  color:var(--ds-text-3)}
.pgs-liftempty{padding:20px 14px;font-size:13px;font-weight:600;color:var(--ds-text-3);
  text-align:center}

.fq-card.pgs-empty{margin:0;padding:30px 22px;display:flex;flex-direction:column;
  align-items:center;gap:11px;text-align:center;border-style:dashed}
.pgs-empty-i{width:46px;height:46px;border-radius:var(--r-round);display:grid;place-items:center;
  background:color-mix(in srgb,var(--fq-brand) 13%,transparent)}
.pgs-empty-i svg{width:21px;height:21px;stroke:var(--fq-brand);fill:none;stroke-width:1.9;
  stroke-linecap:round}
.fq-card.pgs-empty h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.fq-card.pgs-empty p{font-size:13px;font-weight:600;line-height:1.5;color:var(--ds-text-3);max-width:34ch}

@media (max-width:360px){
  .pgs-wrap{padding:0 12px}
  .pgs-t{font-size:15.5px}
  .pgs-bars{height:112px;gap:3px}
  .pgs-b-x{font-size:9.5px}
  .pgs-pick-v b{font-size:15.5px}
  .pgs-trend{font-size:12px}
  .pgs-note{font-size:10.5px}
}

/* ═══ PROGRESS · PHOTOS ════════════════════════════════════════════════════
   All new selectors are pgp-*. Shared .card/.chart/.grid/.ph/.pact/.empty/.note/
   .goalrow are untouched, and nothing here reads or writes photo storage. */
.pgp-wrap{padding:0 16px}

.fq-card.pgp-bw{margin:0 0 12px;padding:15px 14px}
.pgp-bw-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pgp-bw-l{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ds-text-3)}
.pgp-bw-v{font-size:24px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pgp-bw-v small{font-size:13px;font-weight:700;color:var(--ds-text-3)}
/* replaces the bare "-8.2": direction, amount, unit and the date it is measured from */
.pgp-bw-d{margin-top:3px;font-size:12.5px;font-weight:700;color:var(--ds-text-3)}
.pgp-bw-d--down{color:var(--fq-brand)}
.pgp-bw-d--up{color:var(--ds-warning,#F5A524)}

/* uniform scaling — the viewBox aspect is the rendered aspect, so the slope on
   screen is the slope of the data */
.pgp-chart{position:relative;margin-top:10px}
.pgp-chart svg{display:block;width:100%;height:auto}
.pgp-ax{position:absolute;right:0;font-size:10px;font-weight:700;color:var(--ds-text-3);
  background:color-mix(in srgb,var(--ds-surface) 78%,transparent);padding:1px 4px;
  border-radius:4px;pointer-events:none;font-variant-numeric:tabular-nums}
.pgp-ax--hi{top:0}
.pgp-ax--lo{bottom:20px}
.pgp-bw-x{display:flex;justify-content:space-between;margin-top:2px;font-size:10.5px;
  font-weight:600;color:var(--ds-text-3)}
.pgp-goal{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--ds-border);
  font-size:12.5px;font-weight:600;color:var(--ds-text-3)}
.pgp-goal b{color:var(--ds-text);font-weight:800}
.pgp-goal-a{color:var(--fq-brand);font-weight:700}
.pgp-hint{margin-top:9px;font-size:12.5px;font-weight:600;line-height:1.45;color:var(--ds-text-3)}

.pgp-acts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 12px}
.pgp-acts:has(> :only-child){grid-template-columns:1fr}
.pgp-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;
  border-radius:var(--r-lg);background:var(--ds-surface);border:1px solid var(--ds-border);
  color:var(--ds-text);font-family:var(--f);font-size:14.5px;font-weight:800;cursor:pointer}
.pgp-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.pgp-btn--pri{background:var(--fq-brand-grad);border-color:transparent;color:#07090C;
  box-shadow:0 4px 18px -9px var(--fq-brand)}
.pgp-btn.on{border-color:var(--fq-brand);color:var(--fq-brand)}
.pgp-hint-bar{margin:0 0 11px;padding:10px 12px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--fq-brand) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--fq-brand) 30%,transparent);
  font-size:12.5px;font-weight:700;color:var(--fq-brand);text-align:center}
.pgp-hint-bar b{font-weight:800}

.pgp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pgp-ph{position:relative;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;
  background:var(--ds-surface);border:1px solid var(--ds-border);padding:0;cursor:pointer;
  display:block;width:100%}
.pgp-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pgp-ph.picked{border-color:var(--fq-brand);box-shadow:0 0 0 2px var(--fq-brand)}
/* scrim so the caption stays readable over a bright photo */
.pgp-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 9px;
  display:flex;flex-direction:column;gap:1px;text-align:left;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 45%,transparent 100%)}
.pgp-cap-d{font-size:12.5px;font-weight:800;color:#fff;letter-spacing:-.01em}
.pgp-cap-w{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.82)}
.pgp-sel{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:var(--r-round);
  display:grid;place-items:center;font-size:13px;font-weight:800;
  background:rgba(8,12,16,.6);border:1.5px solid rgba(255,255,255,.55);color:#fff}
.pgp-ph.picked .pgp-sel{background:var(--fq-brand);border-color:transparent;color:#07090C}
/* skeleton instead of a blank <img src=""> that repaints once the blob loads */
.pgp-sk{position:absolute;inset:0;background:linear-gradient(100deg,
  var(--ds-surface) 30%,var(--ds-surface-2) 50%,var(--ds-surface) 70%);
  background-size:220% 100%;animation:pgpsk 1.3s linear infinite}
@keyframes pgpsk{from{background-position:120% 0}to{background-position:-120% 0}}

.pgp-priv{margin-top:14px;font-size:11.5px;font-weight:600;line-height:1.5;
  color:var(--ds-text-3);text-align:center}

.fq-card.pgp-empty{margin:0;padding:30px 22px;display:flex;flex-direction:column;
  align-items:center;gap:11px;text-align:center;border-style:dashed}
.pgp-empty-i{width:46px;height:46px;border-radius:var(--r-round);display:grid;place-items:center;
  background:color-mix(in srgb,var(--fq-brand) 13%,transparent)}
.pgp-empty-i svg{width:22px;height:22px;stroke:var(--fq-brand);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.fq-card.pgp-empty h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.fq-card.pgp-empty p{font-size:13px;font-weight:600;line-height:1.55;color:var(--ds-text-3);max-width:36ch}

@media (max-width:360px){
  .pgp-wrap{padding:0 12px}
  .pgp-bw-v{font-size:21px}
  .pgp-btn{font-size:13.5px;padding:13px 8px;gap:6px}
  .pgp-grid{gap:8px}
  .pgp-cap-d{font-size:11.5px}
  .pgp-cap-w{font-size:11px}
  .pgp-ax{font-size:9.5px}
}

/* ═══ PROFILE HUB ══════════════════════════════════════════════════════════
   Matches Home / Workout / Nutrition / Progress. All new selectors are pfh-*;
   the level card deliberately REUSES .pglevel from Progress so the two cannot
   drift. The old .pfwrap/.pfid/.pflevel/.pfsec/.pfgroup rules are left in place
   but are no longer referenced by this screen. */
.pfh-head{min-width:0}
.pfh-sub{margin-top:2px;font-size:13.5px;font-weight:600;color:var(--ds-text-3)}
.pfh-wrap{padding:0 16px}

.fq-card.pfh-id{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:14px 13px}
.pfh-av{width:48px;height:48px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;font-size:17px;font-weight:800;letter-spacing:.02em;color:#07090C;
  background:var(--fq-brand-grad)}
.pfh-idt{min-width:0;display:flex;flex-direction:column;gap:2px}
.pfh-n{font-size:18px;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.pfh-s{font-size:12.5px;font-weight:600;color:var(--ds-text-3);overflow-wrap:anywhere}
.fq-card.pglevel.pfh-level{margin:0 0 6px}

.pfh-sec{margin-top:16px}
.pfh-sech{margin:0 2px 8px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ds-text-3)}
.fq-card.pfh-group{padding:0;overflow:hidden}
/* compact rows: icon tile, label + subtitle, optional right-hand value, chevron */
.pfh-group .pfrow{display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 12px 12px 12px;background:none;border:none;border-bottom:1px solid var(--ds-border);
  text-align:left;font-family:var(--f);color:var(--ds-text);cursor:pointer}
.pfh-group .pfrow:last-child{border-bottom:none}
.pfh-group .pfrow:active{background:var(--ds-surface-2)}
.pfh-group .pfrow-ic{width:36px;height:36px;flex:none;border-radius:var(--r-round);
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--fq-brand) 14%,transparent)}
.pfh-group .pfrow-ic svg{width:18px;height:18px;stroke:var(--fq-brand);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pfh-group .pfrow-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pfh-group .pfrow-l{font-size:15px;font-weight:700;letter-spacing:-.01em;
  overflow-wrap:break-word;white-space:normal}
/* the preferences summary can run long — wrap it rather than truncating */
.pfh-group .pfrow-s{font-size:11.5px;font-weight:600;color:var(--ds-text-3);
  line-height:1.35;overflow-wrap:break-word;white-space:normal}
.pfh-group .pfrow-v{flex:0 1 auto;min-width:0;text-align:right;font-size:12.5px;
  font-weight:700;color:var(--ds-text-2);overflow-wrap:anywhere}
/* the row markup already contains a › glyph — style it, don't draw a second one */
.pfh-group .pfrow-chev{flex:none;color:var(--ds-text-3);font-size:18px;line-height:1}

@media (max-width:360px){
  .pfh-wrap{padding:0 12px}
  .pfh-av{width:42px;height:42px;font-size:15px}
  .pfh-n{font-size:16.5px}
  .pfh-group .pfrow{gap:9px;padding:11px 10px}
  .pfh-group .pfrow-ic{width:32px;height:32px}
  .pfh-group .pfrow-ic svg{width:16px;height:16px}
  .pfh-group .pfrow-l{font-size:14px}
  .pfh-group .pfrow-s{font-size:11px}
  .pfh-group .pfrow-v{font-size:11.5px}
}

/* ═══ TRAINING PREFERENCES ═════════════════════════════════════════════════
   All new selectors are tp-*. Nothing from the old sheet styling (.ddrow/.card)
   is reused here, and no shared class is restyled. */
.tp-head{display:flex;align-items:flex-start;gap:10px;min-width:0}
.tp-back{flex:none;margin-top:4px}
.tp-headt{min-width:0}
.tp-sub{margin-top:2px;font-size:13.5px;font-weight:600;color:var(--ds-text-3)}
.tp-wrap{padding:0 16px}

.tp-sec{margin-bottom:22px}
.tp-sech{margin:0 2px 4px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ds-text-3)}
.tp-help{margin:0 2px 10px;font-size:12.5px;font-weight:600;line-height:1.45;
  color:var(--ds-text-3)}
.tp-grid{display:flex;flex-direction:column;gap:8px}

.tp-card{display:flex;align-items:center;gap:11px;width:100%;padding:13px 12px;
  border-radius:var(--r-lg);background:var(--ds-surface);border:1px solid var(--ds-border);
  color:var(--ds-text);font-family:var(--f);text-align:left;cursor:pointer;
  transition:border-color .15s ease,background .15s ease}
.tp-card:active{transform:scale(.995)}
.tp-card.on{border-color:var(--fq-brand);
  background:color-mix(in srgb,var(--fq-brand) 9%,var(--ds-surface));
  box-shadow:0 0 0 1px var(--fq-brand)}
.tp-ic{width:38px;height:38px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;background:var(--ds-surface-2);border:1px solid var(--ds-border)}
.tp-ic svg{width:18px;height:18px;stroke:var(--ds-text-3);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.tp-card.on .tp-ic{background:color-mix(in srgb,var(--fq-brand) 16%,transparent);
  border-color:transparent}
.tp-card.on .tp-ic svg{stroke:var(--fq-brand)}
.tp-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tp-l{font-size:15px;font-weight:700;letter-spacing:-.01em;overflow-wrap:break-word}
.tp-d{font-size:11.5px;font-weight:600;color:var(--ds-text-3);line-height:1.35;
  overflow-wrap:break-word}
.tp-tick{width:20px;height:20px;flex:none;border-radius:var(--r-round);
  border:1.5px solid var(--ds-border);position:relative}
.tp-card.on .tp-tick{background:var(--fq-brand);border-color:transparent}
.tp-card.on .tp-tick::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;
  border-right:2px solid #07090C;border-bottom:2px solid #07090C;transform:rotate(45deg)}

.tp-bal{margin-bottom:10px}
.tp-sugg{margin:0 2px 10px;padding:9px 11px;border-radius:var(--r-md);
  font-size:11.5px;font-weight:600;line-height:1.45;color:var(--fq-brand);
  background:color-mix(in srgb,var(--fq-brand) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--fq-brand) 28%,transparent)}
.tp-chips{display:flex;flex-wrap:wrap;gap:7px}
.tp-chip{padding:10px 13px;border-radius:var(--r-pill);background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text-2);font-family:var(--f);
  font-size:13px;font-weight:700;cursor:pointer}
.tp-chip.on{background:var(--fq-brand-grad);border-color:transparent;color:#07090C;
  box-shadow:0 2px 12px var(--ds-glow-accent)}

/* one save affordance, pinned above the bottom nav */
/* sticky INSIDE #view, not fixed to the viewport: the shell is a flex column
   (#view scrolls, .tabs sits below it) and #main is a centred 480px column, so a
   viewport-fixed bar would both cover the bottom nav and span the full width on
   a wide screen. */
.tp-bar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:9px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  margin-top:-8px;
  background:color-mix(in srgb,var(--ds-bg) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--ds-border)}
.tp-save{flex:1;min-width:0;padding:15px 10px;border-radius:var(--r-lg);border:none;
  background:var(--fq-brand-grad);color:#07090C;font-family:var(--f);font-size:15.5px;
  font-weight:800;cursor:pointer;box-shadow:0 4px 18px -9px var(--fq-brand);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-discard{flex:none;padding:15px 14px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text-2);font-family:var(--f);
  font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}

@media (max-width:360px){
  .tp-wrap{padding:0 12px}
  .tp-card{gap:9px;padding:12px 10px}
  .tp-ic{width:34px;height:34px}
  .tp-l{font-size:14px}
  .tp-d{font-size:11px}
  .tp-chip{font-size:12px;padding:9px 11px}
  .tp-bar{padding:9px 12px;gap:7px}
  .tp-save{font-size:14.5px;padding:14px 8px}
  .tp-discard{font-size:13px;padding:14px 11px}
}

/* ═══ TRAINING SETUP ═══════════════════════════════════════════════════════
   Reuses the Training Preferences card/bar language (tp-*) so the two Profile
   screens cannot drift; only the two compact pickers are new. */
.ts-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.ts-day{padding:13px 2px;border-radius:var(--r-md);background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text-3);font-family:var(--f);
  font-size:clamp(11px,3.3vw,13px);font-weight:700;cursor:pointer;white-space:nowrap}
.ts-day.on{background:var(--fq-brand-grad);border-color:transparent;color:#07090C;
  box-shadow:0 2px 10px var(--ds-glow-accent)}
/* the last remaining day cannot be turned off; it reads as fixed, not broken */
.ts-day.locked{cursor:default;opacity:.92}
.ts-day.locked::after{content:"";display:block;width:3px;height:3px;margin:3px auto 0;
  border-radius:50%;background:rgba(7,9,12,.55)}

.ts-lens{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ts-len{display:flex;flex-direction:column;align-items:center;gap:1px;padding:12px 2px;
  border-radius:var(--r-md);background:var(--ds-surface);border:1px solid var(--ds-border);
  color:var(--ds-text-3);font-family:var(--f);cursor:pointer}
.ts-len b{font-size:clamp(14px,4.2vw,16px);font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.ts-len span{font-size:10px;font-weight:600}
.ts-len.on{background:var(--fq-brand-grad);border-color:transparent;color:#07090C;
  box-shadow:0 2px 10px var(--ds-glow-accent)}
.tp-card.locked{cursor:default}

@media (max-width:360px){
  .ts-days{gap:3px}
  .ts-day{padding:12px 1px}
  .ts-lens{gap:4px}
  .ts-len{padding:11px 1px}
}

/* ═══ MY PROGRAM (overview) ════════════════════════════════════════════════
   Reads as a Profile screen, not the Programs tab: no accordion, no Start
   buttons, no edit controls. Shares the tp-* head/section language. */
.fq-card.mp-sum{margin:0 0 18px;padding:15px 14px}
.mp-sum-h{display:flex;align-items:center;gap:12px;padding-bottom:13px;
  border-bottom:1px solid var(--ds-border)}
.mp-sum-i{width:44px;height:44px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;background:color-mix(in srgb,var(--fq-brand) 15%,transparent)}
.mp-sum-i svg{width:21px;height:21px;stroke:var(--fq-brand);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.mp-sum-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.mp-sum-n{font-size:19px;font-weight:800;letter-spacing:-.025em;overflow-wrap:break-word}
.mp-sum-s{font-size:12px;font-weight:600;color:var(--ds-text-3)}
.mp-facts{display:flex;flex-direction:column}
.mp-fact{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--ds-border)}
.mp-fact:last-child{border-bottom:none;padding-bottom:0}
.mp-fact-l{flex:none;font-size:12.5px;font-weight:600;color:var(--ds-text-3)}
.mp-fact-v{min-width:0;text-align:right;font-size:13.5px;font-weight:700;
  overflow-wrap:break-word}

.fq-card.mp-days{padding:0;overflow:hidden}
/* read-only rows: no pointer affordance at all */
.mp-day{display:flex;align-items:center;gap:11px;padding:12px;
  border-bottom:1px solid var(--ds-border)}
.mp-day:last-child{border-bottom:none}
.mp-day-d{width:36px;flex:none;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ds-text-3)}
.mp-day-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mp-day-n{font-size:14.5px;font-weight:700;letter-spacing:-.01em;overflow-wrap:break-word}
.mp-day-s{font-size:11.5px;font-weight:600;color:var(--ds-text-3)}
.mp-day-st{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:30px}
.mp-day-st i{font-style:normal;font-size:11px;font-weight:700;color:var(--ds-text-3);
  font-variant-numeric:tabular-nums}
.mp-day-st svg{width:16px;height:16px;stroke:var(--fq-brand);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.mp-day.done .mp-day-n{color:var(--ds-text-2)}
.mp-day.done .mp-day-st i{color:var(--fq-brand)}

.fq-card.mp-why{padding:13px 14px}
.mp-why ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.mp-why li{position:relative;padding-left:16px;font-size:13px;font-weight:600;
  line-height:1.5;color:var(--ds-text-2);overflow-wrap:break-word}
.mp-why li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--fq-brand)}
.mp-why b{font-weight:800;color:var(--ds-text)}

.mp-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 12px;border-radius:var(--r-lg);border:none;background:var(--fq-brand-grad);
  color:#07090C;font-family:var(--f);font-size:15.5px;font-weight:800;cursor:pointer;
  box-shadow:0 4px 18px -9px var(--fq-brand)}
.mp-cta svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round}
.mp-cta--ghost{background:var(--ds-surface);border:1px solid var(--ds-border);
  color:var(--ds-text);box-shadow:none;margin-top:4px}
.mp-note{margin:10px 2px 0;font-size:11.5px;font-weight:600;line-height:1.45;
  color:var(--ds-text-3);text-align:center}

.fq-card.mp-empty{padding:26px 20px;display:flex;flex-direction:column;align-items:center;
  gap:9px;text-align:center;border-style:dashed}
.fq-card.mp-empty h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.fq-card.mp-empty p{font-size:13px;font-weight:600;line-height:1.5;color:var(--ds-text-3);max-width:34ch}

@media (max-width:360px){
  .mp-sum-n{font-size:17px}
  .mp-fact{gap:10px}
  .mp-fact-l{font-size:11.5px}
  .mp-fact-v{font-size:12.5px}
  .mp-day{gap:9px;padding:11px 10px}
  .mp-day-d{width:32px;font-size:11px}
  .mp-day-n{font-size:13.5px}
  .mp-why li{font-size:12.5px}
  .mp-cta{font-size:14.5px}
}

/* ═══ BROWSE PROGRAMS ══════════════════════════════════════════════════════
   Gradient/icon cards, not media tiles: assets/images/programs does not ship, so
   the old photo cards rendered a wall of fqMedia placeholders. PRESETS is
   untouched — cat drives grouping only, never eligibility. */
.fq-card.bp-cur{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;
  padding:13px;text-align:left;cursor:pointer;
  border-color:color-mix(in srgb,var(--fq-brand) 26%,var(--ds-border))}
.bp-cur-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bp-cur-l{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fq-brand)}
.bp-cur-n{font-size:17px;font-weight:800;letter-spacing:-.02em;overflow-wrap:break-word}
.bp-cur-m{font-size:11.5px;font-weight:600;color:var(--ds-text-3);overflow-wrap:break-word}
.bp-cur-go{flex:none;font-size:12px;font-weight:800;color:var(--fq-brand);white-space:nowrap}

/* wraps rather than scrolls: there are now 7 chips (All + every goal in PRESETS),
   and a horizontal scroller hid the last few off-screen with no affordance */
.bp-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.bp-chip{flex:0 1 auto;min-width:0;padding:8px 12px;border-radius:var(--r-pill);
  background:var(--ds-surface);border:1px solid var(--ds-border);color:var(--ds-text-3);
  font-family:var(--f);font-size:clamp(11.5px,3.2vw,12.5px);font-weight:700;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-chip.on{background:var(--fq-brand-grad);border-color:transparent;color:#07090C}

.bp-grid{display:flex;flex-direction:column;gap:10px}
.fq-card.bp-card{padding:14px 13px}
.fq-card.bp-card.on{border-color:var(--fq-brand);
  background:color-mix(in srgb,var(--fq-brand) 7%,var(--ds-surface))}
.bp-card-h{display:flex;align-items:center;gap:11px}
.bp-card-i{width:40px;height:40px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;background:color-mix(in srgb,var(--fq-brand) 15%,transparent)}
.bp-card-i svg{width:19px;height:19px;stroke:var(--fq-brand);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* a quiet hue shift per goal so the grid does not read as one repeated card */
.bp-card-i[data-g="strength"]{background:color-mix(in srgb,#7C8CF8 18%,transparent)}
.bp-card-i[data-g="strength"] svg{stroke:#9AA6FF}
.bp-card-i[data-g="lean"]{background:color-mix(in srgb,#F5A524 16%,transparent)}
.bp-card-i[data-g="lean"] svg{stroke:#F5A524}
.bp-card-i[data-g="athletic"]{background:color-mix(in srgb,#38D39F 16%,transparent)}
.bp-card-i[data-g="athletic"] svg{stroke:#38D39F}
.bp-card-i[data-g="tone"]{background:color-mix(in srgb,#E879C7 16%,transparent)}
.bp-card-i[data-g="tone"] svg{stroke:#E879C7}
.bp-card-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bp-card-n{font-size:16px;font-weight:800;letter-spacing:-.02em;overflow-wrap:break-word}
/* the category line also disambiguates the duplicate names in PRESETS
   ("Beginner Full Body" and "Strength" each appear twice) */
.bp-card-c{font-size:11px;font-weight:700;color:var(--ds-text-3)}
.bp-badge{flex:none;padding:4px 9px;border-radius:var(--r-pill);font-size:10.5px;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#07090C;
  background:var(--fq-brand-grad);white-space:nowrap}
.bp-blurb{margin-top:10px;font-size:12.5px;font-weight:600;line-height:1.45;
  color:var(--ds-text-2);overflow-wrap:break-word}
.bp-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.bp-tag{display:flex;align-items:baseline;gap:5px;padding:5px 9px;border-radius:var(--r-pill);
  background:var(--ds-surface-2);border:1px solid var(--ds-border);font-size:11.5px;
  font-weight:700;overflow-wrap:break-word}
.bp-tag i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ds-text-3)}
.bp-focus{display:flex;align-items:baseline;gap:6px;margin-top:9px;font-size:12px;
  font-weight:600;color:var(--ds-text-3)}
.bp-focus i{flex:none;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase}
.bp-focus span{min-width:0;color:var(--ds-text-2);overflow-wrap:break-word}
.bp-choose{width:100%;margin-top:13px;padding:13px 10px;border-radius:var(--r-lg);border:none;
  background:var(--fq-brand-grad);color:#07090C;font-family:var(--f);font-size:14.5px;
  font-weight:800;cursor:pointer;box-shadow:0 4px 16px -10px var(--fq-brand)}
.bp-using{margin-top:13px;padding:12px 10px;border-radius:var(--r-lg);text-align:center;
  font-size:13px;font-weight:800;color:var(--fq-brand);
  background:color-mix(in srgb,var(--fq-brand) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--fq-brand) 30%,transparent)}
.fq-card.bp-empty{padding:26px 18px;text-align:center;font-size:13px;font-weight:600;
  color:var(--ds-text-3);border-style:dashed}

/* confirmation sheet */
.psw-h{font-size:19px;font-weight:800;letter-spacing:-.025em;margin-bottom:12px;
  overflow-wrap:break-word}
.psw-rows{display:flex;flex-direction:column;border:1px solid var(--ds-border);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:13px}
.psw-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 12px;border-bottom:1px solid var(--ds-border)}
.psw-row:last-child{border-bottom:none}
.psw-l{flex:none;font-size:12px;font-weight:700;color:var(--ds-text-3)}
.psw-v{min-width:0;text-align:right;font-size:13px;font-weight:700;overflow-wrap:break-word}
.psw-v s{color:var(--ds-text-3);text-decoration-color:var(--ds-text-3);margin-right:7px;
  font-weight:600}
.psw-v b{color:var(--fq-brand);font-weight:800}
.psw-v.same{color:var(--ds-text-3);font-weight:600}
.psw-p{font-size:13px;font-weight:600;line-height:1.5;color:var(--ds-text-2);margin-bottom:8px}
.psw-keep{font-size:12.5px;font-weight:800;line-height:1.45;color:var(--fq-brand);margin-bottom:16px}
.psw-acts{display:flex;flex-direction:column;gap:8px}
.psw-go{padding:15px;border-radius:var(--r-lg);border:none;background:var(--fq-brand-grad);
  color:#07090C;font-family:var(--f);font-size:15.5px;font-weight:800;cursor:pointer}
.psw-no{padding:14px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text-2);font-family:var(--f);
  font-size:14px;font-weight:700;cursor:pointer}

@media (max-width:360px){
  .fq-card.bp-cur{gap:9px;padding:12px 10px}
  .bp-cur-n{font-size:15.5px}
  .bp-cur-go{font-size:11px}
  .bp-chip{padding:7px 10px}
  .fq-card.bp-card{padding:12px 10px}
  .bp-card-n{font-size:15px}
  .bp-tag{font-size:11px;padding:4px 8px}
  .bp-blurb{font-size:12px}
}

/* ═══ CHALLENGES ═══════════════════════════════════════════════════════════
   Reuses the tp-* section language and bp-tag chips. Observational only. */
.fq-card.ch-act{padding:15px 14px;border-color:color-mix(in srgb,var(--fq-brand) 30%,var(--ds-border))}
.fq-card.ch-act.ready{border-color:var(--fq-brand);
  box-shadow:0 0 0 1px var(--fq-brand),0 8px 30px -18px var(--fq-brand)}
.ch-act-h{display:flex;align-items:center;gap:11px}
.ch-act-i{width:42px;height:42px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;background:color-mix(in srgb,var(--fq-brand) 15%,transparent)}
.ch-act-i svg{width:20px;height:20px;stroke:var(--fq-brand);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ch-act-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.ch-act-n{font-size:17px;font-weight:800;letter-spacing:-.02em;overflow-wrap:break-word}
.ch-act-d{font-size:11.5px;font-weight:600;color:var(--ds-text-3)}
.ch-blurb{margin-top:10px;font-size:12.5px;font-weight:600;line-height:1.45;
  color:var(--ds-text-2);overflow-wrap:break-word}
.ch-nums{display:flex;align-items:baseline;gap:7px;margin-top:13px;flex-wrap:wrap}
.ch-now{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.ch-of{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ds-text-3);
  overflow-wrap:break-word}
.ch-pct{flex:none;font-size:14px;font-weight:800;color:var(--fq-brand)}
.ch-bar{margin-top:9px}
.ch-track{display:flex;align-items:baseline;gap:6px;margin-top:11px;font-size:12px;
  font-weight:600;color:var(--ds-text-3)}
.ch-track i{flex:none;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase}
.ch-track span{min-width:0;color:var(--ds-text-2);overflow-wrap:break-word}
.ch-togo{margin-top:12px;padding:11px;border-radius:var(--r-lg);text-align:center;
  font-size:13px;font-weight:700;color:var(--ds-text-3);background:var(--ds-surface-2);
  border:1px solid var(--ds-border)}
.ch-togo b{color:var(--ds-text);font-weight:800}
.ch-claim{width:100%;margin-top:12px;padding:15px 10px;border-radius:var(--r-lg);border:none;
  background:var(--fq-brand-grad);color:#07090C;font-family:var(--f);font-size:15.5px;
  font-weight:800;cursor:pointer;box-shadow:0 4px 18px -9px var(--fq-brand)}
.ch-quit{width:100%;margin-top:8px;padding:12px;border-radius:var(--r-lg);background:none;
  border:1px solid var(--ds-border);color:var(--ds-text-3);font-family:var(--f);
  font-size:13px;font-weight:700;cursor:pointer}

.fq-card.ch-card{padding:14px 13px}
.fq-card.ch-card.locked{opacity:.66}
.ch-card-h{display:flex;align-items:center;gap:10px}
.ch-card-i{width:36px;height:36px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;background:var(--ds-surface-2);border:1px solid var(--ds-border)}
.ch-card-i svg{width:17px;height:17px;stroke:var(--ds-text-2);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ch-card-n{min-width:0;font-size:16px;font-weight:800;letter-spacing:-.02em;
  overflow-wrap:break-word}
.ch-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.ch-start{width:100%;margin-top:13px;padding:13px 10px;border-radius:var(--r-lg);border:none;
  background:var(--fq-brand-grad);color:#07090C;font-family:var(--f);font-size:14.5px;
  font-weight:800;cursor:pointer;box-shadow:0 4px 16px -10px var(--fq-brand)}
.ch-locked{margin-top:13px;padding:11px 10px;border-radius:var(--r-lg);text-align:center;
  font-size:12px;font-weight:700;color:var(--ds-text-3);background:var(--ds-surface-2);
  border:1px dashed var(--ds-border);overflow-wrap:break-word}

.fq-card.ch-hist{padding:0;overflow:hidden}
.ch-hrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px;border-bottom:1px solid var(--ds-border)}
.ch-hrow:last-child{border-bottom:none}
.ch-hb{min-width:0;display:flex;flex-direction:column;gap:2px}
.ch-hn{font-size:14px;font-weight:700;overflow-wrap:break-word}
.ch-hs{font-size:11.5px;font-weight:600;color:var(--ds-text-3)}
.ch-hx{flex:none;padding:5px 10px;border-radius:var(--r-pill);font-size:11.5px;font-weight:800;
  white-space:nowrap;background:var(--ds-surface-2);border:1px solid var(--ds-border);
  color:var(--ds-text-3)}
.ch-hx.ok{color:var(--fq-brand);border-color:color-mix(in srgb,var(--fq-brand) 32%,transparent);
  background:color-mix(in srgb,var(--fq-brand) 10%,transparent)}
.psw-go.cq-danger{background:var(--ds-danger,#FF4D5E);color:#fff}

@media (max-width:360px){
  .fq-card.ch-act,.fq-card.ch-card{padding:12px 10px}
  .ch-act-n{font-size:15.5px}
  .ch-now{font-size:24px}
  .ch-card-n{font-size:15px}
  .ch-hn{font-size:13.5px}
  .ch-hx{font-size:11px;padding:4px 8px}
}

/* ═══ COMMUNITY ════════════════════════════════════════════════════════════
   One consolidated Profile-native screen: friends, requests, add-by-code,
   feed, sharing control and invites. All new selectors are cm-*. */
.fq-card.cm-me{display:flex;align-items:center;gap:11px;margin:0 0 4px;padding:13px}
.cm-me-av{width:44px;height:44px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;font-size:16px;font-weight:800;color:#07090C;background:var(--fq-brand-grad)}
.cm-me-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cm-me-n{font-size:16px;font-weight:800;letter-spacing:-.02em;overflow-wrap:break-word}
.cm-me-h{font-size:11.5px;font-weight:600;color:var(--ds-text-3);overflow-wrap:anywhere}
.cm-me-c{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.cm-me-c i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ds-text-3)}
.cm-me-c b{font-size:14px;font-weight:800;letter-spacing:.1em;
  font-family:ui-monospace,Menlo,monospace;color:var(--fq-brand)}

.fq-card.cm-add{padding:12px}
.cm-addrow{display:flex;gap:8px}
.cm-addrow input{flex:1;min-width:0;padding:12px 12px;border-radius:var(--r-md);
  background:var(--ds-surface-2);border:1px solid var(--ds-border);color:var(--ds-text);
  font-family:ui-monospace,Menlo,monospace;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase}
.cm-addbtn{flex:none;padding:0 18px;border-radius:var(--r-md);border:none;
  background:var(--fq-brand-grad);color:#07090C;font-family:var(--f);font-size:14px;
  font-weight:800;cursor:pointer}
.cm-hint{margin-top:8px;font-size:11.5px;font-weight:600;color:var(--ds-text-3)}
.cm-err{margin-top:8px;font-size:12px;font-weight:700;color:var(--ds-danger,#FF4D5E);
  overflow-wrap:break-word}

.fq-card.cm-list{padding:0;overflow:hidden}
.cm-row{display:flex;align-items:center;gap:11px;padding:12px;
  border-bottom:1px solid var(--ds-border)}
.cm-row:last-child{border-bottom:none}
.cm-row--muted{opacity:.62}
.cm-av{width:36px;height:36px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;font-size:13px;font-weight:800;color:var(--ds-text-2);
  background:var(--ds-surface-2);border:1px solid var(--ds-border)}
.cm-rb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cm-rn{font-size:14.5px;font-weight:700;overflow-wrap:break-word}
.cm-rn b{font-weight:600;color:var(--ds-text-3)}
.cm-rm{font-size:11.5px;font-weight:600;color:var(--ds-text-3);overflow-wrap:anywhere}
.cm-rx{flex:none;padding:7px 11px;border-radius:var(--r-pill);background:none;
  border:1px solid var(--ds-border);color:var(--ds-text-3);font-family:var(--f);
  font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.cm-acc{flex:none;padding:8px 14px;border-radius:var(--r-pill);border:none;
  background:var(--fq-brand-grad);color:#07090C;font-family:var(--f);font-size:12.5px;
  font-weight:800;cursor:pointer;white-space:nowrap}
.cm-pend{flex:none;font-size:11px;font-weight:700;color:var(--ds-text-3);white-space:nowrap}
.fq-card.cm-none{padding:18px 14px;font-size:12.5px;font-weight:600;line-height:1.5;
  color:var(--ds-text-3);text-align:center}

.fq-card.cm-share{display:flex;align-items:center;gap:12px;padding:13px}
.cm-share-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cm-share-n{font-size:15px;font-weight:700}
.cm-share-d{font-size:11.5px;font-weight:600;line-height:1.4;color:var(--ds-text-3);
  overflow-wrap:break-word}

.cm-sub{margin:14px 2px 8px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ds-text-3)}
.cm-code{flex:none;font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:800;
  letter-spacing:.1em;color:var(--fq-brand)}
.cm-code.is-used{color:var(--ds-text-3);text-decoration:line-through}
.cm-mini{flex:none;padding:7px 12px;border-radius:var(--r-pill);background:var(--ds-surface-2);
  border:1px solid var(--ds-border);color:var(--ds-text-2);font-family:var(--f);
  font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.cm-mini.wide{flex:1}
.fq-card.cm-new{padding:15px 14px;margin-bottom:10px;border-color:var(--fq-brand);
  background:color-mix(in srgb,var(--fq-brand) 8%,var(--ds-surface))}
.cm-new-l{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fq-brand)}
.cm-new-c{margin:6px 0 11px;font-family:ui-monospace,Menlo,monospace;font-size:26px;
  font-weight:800;letter-spacing:.16em;overflow-wrap:anywhere}
.cm-new-a{display:flex;gap:8px}
.cm-share-btn{flex:1;padding:11px;border-radius:var(--r-pill);border:none;
  background:var(--fq-brand-grad);color:#07090C;font-family:var(--f);font-size:12.5px;
  font-weight:800;cursor:pointer}

/* skeletons — shown while a request is in flight, so the screen never claims
   "no friends" before the answer arrives */
.fq-card.cm-sk{padding:0;overflow:hidden}
.cm-sk-row{display:flex;align-items:center;gap:11px;padding:13px 12px;
  border-bottom:1px solid var(--ds-border)}
.cm-sk-row:last-child{border-bottom:none}
.cm-sk-av{width:36px;height:36px;flex:none;border-radius:var(--r-round)}
.cm-sk-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cm-sk-b i{display:block;height:11px;width:58%;border-radius:5px}
.cm-sk-b i.s{width:36%;height:9px}
.cm-sk-av,.cm-sk-b i{background:linear-gradient(100deg,var(--ds-surface-2) 30%,
  var(--ds-surface-3) 50%,var(--ds-surface-2) 70%);background-size:220% 100%;
  animation:pgpsk 1.3s linear infinite}

.fq-card.cm-empty{padding:30px 22px;display:flex;flex-direction:column;align-items:center;
  gap:11px;text-align:center;border-style:dashed}
.cm-empty-i{width:46px;height:46px;border-radius:var(--r-round);display:grid;place-items:center;
  background:color-mix(in srgb,var(--fq-brand) 13%,transparent)}
.cm-empty-i svg{width:21px;height:21px;stroke:var(--fq-brand);fill:none;stroke-width:2;
  stroke-linecap:round}
.fq-card.cm-empty h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.fq-card.cm-empty p{font-size:13px;font-weight:600;line-height:1.5;color:var(--ds-text-3);max-width:34ch}

@media (max-width:360px){
  .fq-card.cm-me{gap:9px;padding:11px 10px}
  .cm-me-av{width:38px;height:38px;font-size:14px}
  .cm-me-n{font-size:15px}
  .cm-me-c b{font-size:12.5px}
  .cm-row{gap:9px;padding:11px 10px}
  .cm-rn{font-size:13.5px}
  .cm-addrow input{font-size:14px;padding:11px 10px}
  .cm-new-c{font-size:22px}
}

/* ═══ APP SETTINGS ═════════════════════════════════════════════════════════
   Profile-native. The dead PEDIT save bar is gone (nothing on this screen ever
   wrote to PEDIT), and the storage panel renders from STORE_INFO rather than
   being injected after the fact. */
.fq-card.as-card{padding:0;overflow:hidden}
.as-row{display:flex;align-items:center;gap:11px;width:100%;padding:13px 12px;
  background:none;border:none;border-bottom:1px solid var(--ds-border);text-align:left;
  font-family:var(--f);color:var(--ds-text);cursor:pointer}
.as-row:last-child{border-bottom:none}
.as-row:active{background:var(--ds-surface-2)}
.as-row--static{cursor:default}
.as-row--static:active{background:none}
.as-rb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.as-rl{font-size:15px;font-weight:700;letter-spacing:-.01em;overflow-wrap:break-word}
.as-rs{font-size:11.5px;font-weight:600;line-height:1.4;color:var(--ds-text-3);
  overflow-wrap:break-word}
/* cap the value column so a long summary ("DB standard rack · cable 5lb")
   cannot squeeze the label into three lines */
.as-rv{flex:0 1 auto;min-width:0;max-width:46%;text-align:right;font-size:12.5px;
  font-weight:700;color:var(--ds-text-2);overflow-wrap:break-word}
.as-rv--mute{color:var(--ds-text-3);font-variant-numeric:tabular-nums}
.as-rc{flex:none;color:var(--ds-text-3);font-size:18px;line-height:1}

.fq-card.as-accent{padding:14px 13px;display:flex;flex-direction:column;gap:3px}
.as-sw{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}
.as-swatch{width:32px;height:32px;border-radius:var(--r-round);border:2px solid transparent;
  cursor:pointer;padding:0}
.as-swatch.on{border-color:var(--ds-text);box-shadow:0 0 0 2px var(--ds-bg),0 0 0 4px var(--ds-text)}

.as-store{padding:4px 12px 13px;border-top:1px solid var(--ds-border)}
.as-stat{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 0;font-size:12.5px;font-weight:600;color:var(--ds-text-3)}
.as-stat b{font-weight:800;color:var(--ds-text-2);text-align:right;overflow-wrap:break-word}
.as-good{color:var(--ds-success,#38D39F)!important}
.as-warn{color:var(--ds-warning,#F5A524)!important}
.as-bad{color:var(--ds-danger,#FF4D5E)!important}
.as-bar{height:6px;border-radius:3px;background:var(--ds-surface-2);overflow:hidden;margin-top:4px}
.as-bar i{display:block;height:100%;border-radius:3px;background:var(--fq-brand-grad)}
.as-note{margin-top:10px;font-size:11.5px;font-weight:600;line-height:1.5;color:var(--ds-text-3)}
.as-dim{padding:10px 0;font-size:12.5px;font-weight:600;color:var(--ds-text-3)}
/* App Settings' own status line — deliberately not the cloud-sync one */
.as-msg{padding:10px 12px;font-size:12px;font-weight:700;color:var(--fq-brand);
  border-top:1px solid var(--ds-border)}

.fq-card.as-danger{padding:14px 13px;display:flex;flex-direction:column;gap:3px;
  border-color:color-mix(in srgb,var(--ds-danger,#FF4D5E) 30%,var(--ds-border))}
.as-del{margin-top:12px;padding:13px;border-radius:var(--r-lg);background:none;
  border:1px solid color-mix(in srgb,var(--ds-danger,#FF4D5E) 45%,transparent);
  color:var(--ds-danger,#FF4D5E);font-family:var(--f);font-size:14.5px;font-weight:800;
  cursor:pointer}

/* typed delete confirmation */
.dp-list{list-style:none;margin:0 0 12px;display:flex;flex-direction:column;gap:6px}
.dp-list li{position:relative;padding-left:16px;font-size:13px;font-weight:600;
  line-height:1.45;color:var(--ds-text-2);overflow-wrap:break-word}
.dp-list li::before{content:"";position:absolute;left:3px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--ds-danger,#FF4D5E)}
.dp-list b{font-weight:800;color:var(--ds-text)}
.dp-warn{font-size:12.5px;font-weight:800;line-height:1.45;color:var(--ds-danger,#FF4D5E);
  margin-bottom:14px}
.dp-lbl{display:block;font-size:12px;font-weight:700;color:var(--ds-text-3);margin-bottom:7px}
.dp-lbl b{color:var(--ds-text);font-weight:800}
#dp-in{width:100%;padding:13px 12px;border-radius:var(--r-md);background:var(--ds-surface-2);
  border:1px solid var(--ds-border);color:var(--ds-text);font-family:var(--f);font-size:15px;
  margin-bottom:14px}
#dp-in:focus{outline:none;border-color:var(--ds-danger,#FF4D5E)}
.psw-go.dp-go{background:var(--ds-danger,#FF4D5E);color:#fff}
.psw-go.dp-go:disabled{background:var(--ds-surface-2);color:var(--ds-text-3);cursor:not-allowed;
  box-shadow:none}

@media (max-width:360px){
  .as-row{gap:9px;padding:12px 10px}
  .as-rl{font-size:14px}
  .as-rs{font-size:11px}
  .as-rv{font-size:11.5px}
  .as-swatch{width:29px;height:29px}
}

/* ═══ ACCOUNT & CLOUD SYNC ═════════════════════════════════════════════════
   Rendered from state (syncState()); paintCloud's innerHTML panel is gone. */
.ac-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--ds-text-3)}
.ac-dot.ok{background:var(--ds-success,#38D39F);box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-success,#38D39F) 22%,transparent)}
.ac-dot.busy{background:var(--fq-brand);animation:acpulse 1.1s ease-in-out infinite}
.ac-dot.warn{background:var(--ds-warning,#F5A524)}
.ac-dot.bad{background:var(--ds-danger,#FF4D5E)}
.ac-dot.off{background:var(--ds-text-3)}
@keyframes acpulse{0%,100%{opacity:1}50%{opacity:.35}}

.fq-card.ac-acct{display:flex;align-items:center;gap:12px;padding:14px 13px}
.ac-av{width:44px;height:44px;flex:none;border-radius:var(--r-round);display:grid;
  place-items:center;font-size:16px;font-weight:800;color:#07090C;background:var(--fq-brand-grad)}
.ac-acct-b{min-width:0;display:flex;flex-direction:column;gap:2px}
.ac-acct-e{font-size:15.5px;font-weight:800;letter-spacing:-.015em;overflow-wrap:anywhere}
.ac-acct-s{font-size:11.5px;font-weight:600;color:var(--ds-text-3)}

.fq-card.ac-sync{padding:14px 13px}
.ac-sync-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ac-sync-t{font-size:16px;font-weight:800;letter-spacing:-.02em}
.ac-sync-w{flex:1;min-width:0;text-align:right;font-size:11px;font-weight:600;
  color:var(--ds-text-3);white-space:nowrap}
.ac-sync-d{margin-top:7px;font-size:12.5px;font-weight:600;line-height:1.45;
  color:var(--ds-text-3);overflow-wrap:break-word}
.fq-card.ac-sync--error{border-color:color-mix(in srgb,var(--ds-danger,#FF4D5E) 34%,var(--ds-border))}
.fq-card.ac-sync--error .ac-sync-d{color:var(--ds-danger,#FF4D5E);font-weight:700}
.fq-card.ac-sync--offline{border-color:color-mix(in srgb,var(--ds-warning,#F5A524) 30%,var(--ds-border))}

.ac-btn{width:100%;margin-top:12px;padding:14px 10px;border-radius:var(--r-lg);border:none;
  font-family:var(--f);font-size:14.5px;font-weight:800;cursor:pointer}
.ac-btn.pri{background:var(--fq-brand-grad);color:#07090C;box-shadow:0 4px 16px -10px var(--fq-brand)}
.ac-btn.retry{background:var(--ds-danger,#FF4D5E);color:#fff}
.ac-btn.ghost{background:var(--ds-surface-2);border:1px solid var(--ds-border);color:var(--ds-text-2)}
.ac-btn:disabled{opacity:.55;cursor:default}

.fq-card.ac-what{padding:0;overflow:hidden}
.ac-w-row{display:flex;align-items:center;gap:11px;padding:11px 12px;
  border-bottom:1px solid var(--ds-border)}
.ac-w-row:last-child{border-bottom:none}
.ac-w-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ac-w-t b{font-size:14px;font-weight:700;overflow-wrap:break-word}
.ac-w-t small{font-size:11.5px;font-weight:600;color:var(--ds-text-3);overflow-wrap:break-word}
.ac-w-ok{flex:none;width:20px;height:20px;display:grid;place-items:center}
.ac-w-ok svg{width:15px;height:15px;stroke:var(--ds-success,#38D39F);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

.fq-card.ac-priv{display:flex;align-items:center;gap:12px;padding:13px}
.ac-priv-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ac-priv-t{font-size:14.5px;font-weight:700}
.ac-priv-t b{font-weight:800;color:var(--fq-brand)}
.ac-priv-d{font-size:11.5px;font-weight:600;line-height:1.4;color:var(--ds-text-3);
  overflow-wrap:break-word}
.ac-mini{flex:none;padding:8px 12px;border-radius:var(--r-pill);background:var(--ds-surface-2);
  border:1px solid var(--ds-border);color:var(--fq-brand);font-family:var(--f);
  font-size:11.5px;font-weight:800;cursor:pointer;white-space:nowrap}

.fq-card.ac-out{padding:13px}
.ac-out .ac-btn{margin-top:0}
.ac-hint{margin-top:9px;font-size:11.5px;font-weight:600;color:var(--ds-text-3);text-align:center}

/* sign-in surface */
.fq-card.ac-auth{padding:16px 14px}
.ac-auth-h{font-size:19px;font-weight:800;letter-spacing:-.025em}
.ac-auth-s{margin:5px 0 13px;font-size:12.5px;font-weight:600;line-height:1.45;
  color:var(--ds-text-3);overflow-wrap:break-word}
.fq-card.ac-auth input{width:100%;margin-bottom:9px;padding:13px 12px;border-radius:var(--r-md);
  background:var(--ds-surface-2);border:1px solid var(--ds-border);color:var(--ds-text);
  font-family:var(--f);font-size:15px}
.fq-card.ac-auth input:focus{outline:none;border-color:var(--fq-brand)}
.fq-card.ac-auth input.ac-code{font-family:ui-monospace,Menlo,monospace;letter-spacing:.12em;
  text-transform:uppercase}
.ac-auth-a{display:flex;gap:8px;margin-top:4px}
.ac-auth-a .ac-btn{margin-top:0;flex:1}
.ac-msg{margin-top:11px;font-size:12.5px;font-weight:700;text-align:center;color:var(--fq-brand);
  overflow-wrap:break-word}
.ac-msg.bad{color:var(--ds-danger,#FF4D5E)}

.fq-card.ac-empty{padding:30px 22px;display:flex;flex-direction:column;align-items:center;
  gap:11px;text-align:center;border-style:dashed}
.fq-card.ac-empty h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.fq-card.ac-empty p{font-size:13px;font-weight:600;line-height:1.5;color:var(--ds-text-3);max-width:34ch}

@media (max-width:360px){
  .fq-card.ac-acct{gap:9px;padding:12px 10px}
  .ac-av{width:38px;height:38px;font-size:14px}
  .ac-acct-e{font-size:14px}
  .ac-sync-t{font-size:15px}
  .ac-sync-w{flex:1 0 100%;text-align:left}
  .ac-auth-a{flex-direction:column}
  .ac-w-t b{font-size:13.5px}
}

/* ═══ INSIGHT DETAIL SHEET ═══════════════════════════════════════════════ */
.ins-sub{margin:-6px 0 14px;font-size:12.5px;font-weight:600;color:var(--ds-text-3)}
.ins-list{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.ins-item{padding:13px 13px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px solid var(--ds-border)}
.ins-item.lead{border-color:color-mix(in srgb,var(--fq-brand) 34%,var(--ds-border));
  background:color-mix(in srgb,var(--fq-brand) 7%,var(--ds-surface))}
/* full text — the Home card's 2-line clamp does not apply here */
.ins-t{font-size:14px;font-weight:600;line-height:1.5;color:var(--ds-text-2);
  overflow-wrap:break-word}
.ins-t b{font-weight:800;color:var(--ds-text)}
.ins-cta{margin-top:10px;padding:0;background:none;border:none;font-family:var(--f);
  font-size:13px;font-weight:800;color:var(--fq-brand);cursor:pointer}
.ins-close{width:100%}
@media (max-width:360px){ .ins-t{font-size:13.5px} .ins-item{padding:12px 11px} }

/* ═══ ADAPTIVE TRAINING (player) ═══════════════════════════════════════════ */
.padj{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin:10px 0 4px;padding:11px 12px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text-2);font-family:var(--f);
  font-size:13.5px;font-weight:700;cursor:pointer}
.padj svg{width:16px;height:16px;stroke:var(--fq-brand);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ad-sub{margin:-6px 0 13px;font-size:12.5px;font-weight:600;line-height:1.45;
  color:var(--ds-text-3);overflow-wrap:break-word}
.ad-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ad-opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
  padding:13px 13px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text);font-family:var(--f);
  text-align:left;cursor:pointer}
.ad-opt:active{border-color:var(--fq-brand)}
.ad-opt b{font-size:15px;font-weight:800;letter-spacing:-.01em;overflow-wrap:break-word}
.ad-opt small{font-size:11.5px;font-weight:600;color:var(--ds-text-3);overflow-wrap:break-word}
.ad-msg{margin-bottom:12px;font-size:14px;font-weight:700;line-height:1.5;color:var(--ds-text-2);
  overflow-wrap:break-word}
.ad-msg.ok{color:var(--ds-text)}
@media (max-width:360px){ .ad-opt{padding:12px 11px} .ad-opt b{font-size:14px} }

/* Phase 2 explanation line in the player — additive, only when something changed */
.adwhy{margin:8px 0 2px;padding:9px 11px;border-radius:var(--r-md);font-size:12px;font-weight:600;
  line-height:1.45;color:var(--ds-text-2);background:color-mix(in srgb,var(--fq-brand) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--fq-brand) 24%,transparent);overflow-wrap:break-word}

.adwhy--row{margin:6px 0 0;padding:7px 9px;font-size:11.5px}

/* ═══ PLAYER BATCH: review mode, overview, timed-set countdown ═══════════ */
.phero-tap{cursor:pointer}
.phero-tap .phero-name{text-decoration:underline;text-decoration-color:color-mix(in srgb,#fff 35%,transparent);
  text-underline-offset:4px;text-decoration-thickness:1.5px}
.prev-banner{margin:0 0 12px;padding:12px;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--ds-warning,#F5A524) 11%,var(--ds-surface));
  border:1px solid color-mix(in srgb,var(--ds-warning,#F5A524) 38%,transparent)}
.prev-k{display:block;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ds-warning,#F5A524)}
.prev-t{display:block;margin-top:3px;font-size:13px;font-weight:600;color:var(--ds-text-2);overflow-wrap:break-word}
.prev-t b{color:var(--ds-text);font-weight:800}
.prev-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.prev-btn{flex:1 1 auto;min-width:0;padding:11px 12px;border-radius:var(--r-md);background:var(--ds-surface-2);
  border:1px solid var(--ds-border);color:var(--ds-text);font-family:var(--f);font-size:13px;font-weight:800;cursor:pointer}
.prev-btn--pri{background:var(--fq-brand-grad);border-color:transparent;color:#07090C}
.prev-done{flex:1 1 auto;text-align:center;font-size:12.5px;font-weight:800;color:var(--ds-success,#38D39F)}
#play.is-reviewing #p-media{filter:saturate(.55) brightness(.8)}
.pnav3{display:flex;align-items:center;gap:8px}
.pnav3 .pnav{flex:none}
.pnav3 .pnav:disabled{opacity:.32}
.pov{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;
  border-radius:var(--r-lg);background:var(--ds-surface);border:1px solid var(--ds-border);color:var(--ds-text);
  font-family:var(--f);font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
.pov svg{width:17px;height:17px;stroke:var(--fq-brand);fill:none;stroke-width:2.2;stroke-linecap:round}
.ov-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ov-row{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border-radius:var(--r-lg);
  background:var(--ds-surface);border:1px solid var(--ds-border);color:var(--ds-text);font-family:var(--f);
  text-align:left;cursor:pointer}
.ov-row.ov--ss{border-left:3px solid var(--fq-brand)}
.ov-row.ov--current{border-color:var(--fq-brand);box-shadow:0 0 0 1px var(--fq-brand)}
.ov-row.ov--viewing{border-color:var(--ds-warning,#F5A524)}
.ov-row.ov--done{opacity:.72}
.ov-mark{width:28px;height:28px;flex:none;border-radius:var(--r-round);display:grid;place-items:center;
  font-size:12px;font-weight:800;background:var(--ds-surface-2);border:1px solid var(--ds-border);color:var(--ds-text-2)}
.ov--current .ov-mark{background:var(--fq-brand-grad);border-color:transparent;color:#07090C}
.ov--done .ov-mark{background:color-mix(in srgb,var(--ds-success,#38D39F) 18%,transparent);border-color:transparent}
.ov--done .ov-mark svg{width:14px;height:14px;stroke:var(--ds-success,#38D39F);fill:none;stroke-width:2.8}
.ov-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ov-n{font-size:14.5px;font-weight:700;overflow-wrap:break-word}
.ov-s{font-size:11.5px;font-weight:600;color:var(--ds-text-3);overflow-wrap:break-word}
.ov-st{flex:none;font-size:11px;font-weight:800;color:var(--ds-text-3);white-space:nowrap}
.ov--current .ov-st{color:var(--fq-brand)}
/* The countdown OVERLAYS the stepper row, which keeps its natural height (30–34 px
   by width) and only turns invisible while live. Nothing below can move when Start
   is tapped, at any width, and no height is added. */
.ht-slot{position:relative}
.lg-half--timer .ht-live{position:absolute;inset:0;display:flex;flex-direction:row;align-items:center;
  justify-content:center;gap:5px;visibility:hidden}
.lg-half--timer .ht-t{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.lg-half--timer .ht-of{font-size:11px;font-weight:700;color:var(--ds-text-3);white-space:nowrap}
/* live: the countdown replaces the editable seconds; the input stays in the DOM so
   the fill at zero and Log set read it exactly as before */
.lg-half--timer.is-live .lg-row{visibility:hidden}
.lg-half--timer.is-live .ht-live{visibility:visible}
.lg-half--timer.is-run .ht-t{color:var(--fq-brand)}
.lg-half--timer.is-done .ht-t{color:var(--ds-success,#38D39F)}
.lg-half--timer .ht-btns{display:flex;gap:6px;margin-top:8px}
.lg-half--timer .ht-go{flex:1;min-width:0;padding:8px 6px;border-radius:var(--r-md);border:none;
  background:var(--fq-brand-grad);color:#07090C;font-family:var(--f);font-size:13px;font-weight:800;cursor:pointer}
.lg-half--timer .ht-reset{flex:none;width:36px;padding:0;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--ds-surface);border:1px solid var(--ds-border);cursor:pointer}
.lg-half--timer .ht-reset svg{width:15px;height:15px;stroke:var(--ds-text-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:360px){ .pov{font-size:12.5px;gap:6px} .lg-half--timer .ht-t{font-size:21px} .prev-btn{font-size:12px;padding:10px} }

/* compact tappable exercise header (player) */
.pxh{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 10px;padding:10px 12px;
  border-radius:var(--r-lg);background:var(--ds-surface);border:1px solid var(--ds-border);
  color:var(--ds-text);font-family:var(--f);text-align:left;cursor:pointer}
.pxh:active{border-color:var(--fq-brand)}
.pxh-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pxh-n{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.2;overflow-wrap:break-word}
.pxh-m{font-size:11.5px;font-weight:600;color:var(--ds-text-3);overflow-wrap:break-word}
.pxh-m:empty{display:none}
.pxh-a{margin-top:2px;font-size:11.5px;font-weight:800;color:var(--fq-brand)}
.pxh-c{flex:none;width:28px;height:28px;border-radius:var(--r-round);display:grid;place-items:center;
  background:color-mix(in srgb,var(--fq-brand) 14%,transparent)}
.pxh-c svg{width:15px;height:15px;stroke:var(--fq-brand);fill:none;stroke-width:2.4;stroke-linecap:round}
#play.is-reviewing .pxh{border-color:color-mix(in srgb,var(--ds-warning,#F5A524) 45%,var(--ds-border))}
@media (max-width:360px){ .pxh{padding:9px 10px} .pxh-n{font-size:15.5px} }
/* short screens (iPhone SE, or Display Zoom): one line — the name stays visible and
   tappable, the muscle line and action label give way to the set logger */
@media (max-height:700px){
  /* the coaching sentence under the prescription gives way to the set controls —
     but a Phase 2 adaptation explanation is never hidden */
  .pp-guide:not(.pp-guide--adapt){display:none}
  .pxh{padding:7px 10px;margin-bottom:8px}
  .pxh-m,.pxh-a{display:none}
  .pxh-n{font-size:15.5px}
  .pxh-c{width:24px;height:24px}
}

/* ═══ GENERATION BATCH: split choice + per-day length ═══════════════════ */
.ts-splits .ts-split .tp-b{min-width:0}
.ts-week{display:block;margin-top:5px;font-size:11px;font-weight:700;color:var(--fq-brand);
  line-height:1.4;overflow-wrap:break-word}
.ts-perday{margin-top:12px;border-radius:var(--r-lg);background:var(--ds-surface);border:1px solid var(--ds-border);overflow:hidden}
.ts-pdh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 12px;
  border-bottom:1px solid var(--ds-border);font-size:12px;font-weight:800;color:var(--ds-text-2)}
.ts-pdh small{font-size:11px;font-weight:600;color:var(--ds-text-3)}
.ts-pdrow{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;background:none;border:none;
  border-bottom:1px solid var(--ds-border);color:var(--ds-text);font-family:var(--f);text-align:left;cursor:pointer}
.ts-pdrow:last-child{border-bottom:none}
.ts-pdd{flex:1;min-width:0;font-size:14px;font-weight:700;overflow-wrap:break-word}
.ts-pdv{flex:none;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.ts-pdt{flex:none;min-width:52px;text-align:right;font-size:11px;font-weight:700;color:var(--ds-text-3)}
.ts-pdrow.is-custom .ts-pdt{color:var(--fq-brand)}
.ts-pdc{flex:none;width:18px;height:18px;display:grid;place-items:center}
.ts-pdc svg{width:14px;height:14px;stroke:var(--ds-text-3);fill:none;stroke-width:2.4;stroke-linecap:round}
.ad-opt.on{border-color:var(--fq-brand);box-shadow:0 0 0 1px var(--fq-brand)}
@media (max-width:360px){ .ts-pdrow{gap:7px;padding:10px} .ts-pdd{font-size:13px} .ts-pdt{min-width:44px} }

/* split minimum-days guard */
.ts-split.is-disabled{opacity:.46;cursor:not-allowed;filter:saturate(.5)}
.ts-split.is-disabled .tp-tick{visibility:hidden}
.ts-split.is-invalid{border-color:var(--ds-warning,#F5A524)!important;box-shadow:0 0 0 1px var(--ds-warning,#F5A524)}
.ts-split.is-invalid .tp-d{color:var(--ds-warning,#F5A524);font-weight:700}
.ts-warn{margin:0 0 10px;padding:12px;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--ds-warning,#F5A524) 11%,var(--ds-surface));
  border:1px solid color-mix(in srgb,var(--ds-warning,#F5A524) 40%,transparent)}
.ts-warn b{display:block;font-size:13.5px;font-weight:800;color:var(--ds-text);overflow-wrap:break-word}
.ts-warn span{display:block;margin-top:3px;font-size:12px;font-weight:600;line-height:1.45;color:var(--ds-text-2)}
.ts-warn-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ts-warn-go,.ts-warn-alt{flex:1 1 auto;min-width:0;padding:10px 12px;border-radius:var(--r-md);font-family:var(--f);
  font-size:13px;font-weight:800;cursor:pointer}
.ts-warn-go{border:none;background:var(--fq-brand-grad);color:#07090C}
.ts-warn-alt{background:var(--ds-surface-2);border:1px solid var(--ds-border);color:var(--ds-text)}

/* Browse Programs: presets whose split needs more training days */
.bp-card--off{opacity:.62}
.bp-card--off.on{opacity:1}
.bp-unavail{margin-top:12px;padding:11px 12px;border-radius:var(--r-md);text-align:center;
  background:var(--ds-surface-2);border:1px dashed var(--ds-border);color:var(--ds-text-3);
  font-size:12.5px;font-weight:700;line-height:1.4;overflow-wrap:break-word}
.bp-card.on .bp-unavail{border-color:color-mix(in srgb,var(--ds-warning,#F5A524) 45%,transparent);color:var(--ds-warning,#F5A524)}

/* swipe-back edge feedback — a slim tab on the far left edge, never over content.
   Hidden unless a swipe is actively in progress; gone the instant it ends. */
#swipe-hint{position:fixed;left:0;top:50%;z-index:950;width:10px;height:44px;border-radius:0 6px 6px 0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ds-text-2,#aab4c0) 22%,transparent);
  opacity:0;visibility:hidden;transform:translate(-10px,-50%);pointer-events:none;transition:none}
#swipe-hint.on{visibility:visible}
#swipe-hint svg{width:8px;height:8px;stroke:var(--ds-text,#e6ebf0);fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
#swipe-hint.armed{background:var(--fq-brand,#1BA8F0)}
#swipe-hint.armed svg{stroke:#07090C}

/* ═══ AI COACH ═════════════════════════════════════════════════════════════ */
.ai-status{flex:none;align-self:flex-start;margin-top:4px;padding:4px 9px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.ai-status--on{background:color-mix(in srgb,var(--ds-success,#38D39F) 16%,transparent);color:var(--ds-success,#38D39F)}
.ai-status--off,.ai-status--recon{background:color-mix(in srgb,var(--ds-warning,#F5A524) 16%,transparent);color:var(--ds-warning,#F5A524)}
.ai-wrap{display:flex;flex-direction:column;gap:10px}
.ai-empty{padding:6px 2px 2px}
.ai-empty-t{font-size:15px;font-weight:800;letter-spacing:-.01em}
.ai-empty-s{margin-top:5px;font-size:12.5px;font-weight:600;line-height:1.5;color:var(--ds-text-3);overflow-wrap:break-word}
.ai-starts{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ai-start{width:100%;padding:12px 13px;border-radius:var(--r-lg);background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text);font-family:var(--f);font-size:13.5px;font-weight:700;
  text-align:left;cursor:pointer;overflow-wrap:break-word}
.ai-start:active{border-color:var(--fq-brand)}
.ai-list{display:flex;flex-direction:column;gap:10px}
.ai-row{display:flex}
.ai-row--me{justify-content:flex-end}
.ai-msg{max-width:88%;padding:11px 12px;border-radius:var(--r-lg);font-size:14px;font-weight:600;line-height:1.5;
  overflow-wrap:break-word;word-break:break-word}
.ai-msg--me{background:var(--fq-brand-grad);color:#07090C;font-weight:700;border-bottom-right-radius:6px}
.ai-msg--co{background:var(--ds-surface);border:1px solid var(--ds-border);color:var(--ds-text-2);border-bottom-left-radius:6px}
.ai-msg--safe{border-color:color-mix(in srgb,var(--ds-warning,#F5A524) 45%,transparent)}
.ai-body p{margin:0 0 8px}
.ai-body p:last-child{margin-bottom:0}
.ai-body b{font-weight:800;color:var(--ds-text)}
.ai-ul{margin:0 0 8px;padding-left:16px;list-style:disc}
.ai-ul li{margin:3px 0}
.ai-time{display:inline-block;font-size:10px;font-weight:700;opacity:.62}
.ai-msg--me .ai-time{margin-left:8px}
.ai-foot{display:flex;align-items:center;gap:10px;margin-top:8px}
.ai-mini{padding:0;background:none;border:none;font-family:var(--f);font-size:11.5px;font-weight:800;
  color:var(--fq-brand);cursor:pointer}
.ai-typing{display:flex;gap:5px;align-items:center;padding:14px 13px}
.ai-typing i{width:6px;height:6px;border-radius:50%;background:var(--ds-text-3);animation:aidot 1.1s infinite}
.ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s}
@keyframes aidot{0%,60%,100%{opacity:.3}30%{opacity:1}}
.ai-err{padding:10px 12px;border-radius:var(--r-md);font-size:12.5px;font-weight:700;line-height:1.45;
  background:color-mix(in srgb,var(--ds-warning,#F5A524) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--ds-warning,#F5A524) 38%,transparent);color:var(--ds-text-2);overflow-wrap:break-word}
.ai-link{padding:0;background:none;border:none;font-family:var(--f);font-size:12.5px;font-weight:800;color:var(--fq-brand);cursor:pointer}
.ai-composer{position:sticky;bottom:0;display:flex;align-items:flex-end;gap:8px;padding:8px 0 4px;background:var(--ds-bg,#0b0e13)}
#ai-in{flex:1;min-width:0;min-height:44px;max-height:132px;padding:12px;border-radius:var(--r-lg);
  background:var(--ds-surface-2);border:1px solid var(--ds-border);color:var(--ds-text);font-family:var(--f);
  font-size:15px;line-height:1.35;resize:none;overflow-y:hidden;overflow-x:hidden;box-sizing:border-box}
#ai-in:focus{outline:none;border-color:var(--fq-brand)}
#ai-in:disabled{opacity:.55}
.ai-send{flex:none;width:44px;height:44px;border-radius:var(--r-round);border:none;background:var(--fq-brand-grad);
  display:grid;place-items:center;cursor:pointer}
.ai-send:disabled{opacity:.45}
.ai-send svg{width:20px;height:20px;stroke:#07090C;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ai-send--stop{background:var(--ds-surface-2);border:1px solid var(--ds-border);color:var(--ds-text);font-size:13px;font-weight:800}
.ai-disc{font-size:11px;font-weight:600;line-height:1.45;color:var(--ds-text-3);text-align:center;overflow-wrap:break-word}
.ai-ask{width:100%;margin-bottom:8px;padding:12px;border-radius:var(--r-lg);background:var(--ds-surface-2);
  border:1px solid color-mix(in srgb,var(--fq-brand) 40%,transparent);color:var(--fq-brand);
  font-family:var(--f);font-size:13.5px;font-weight:800;cursor:pointer}
.fq-card.ai-home{position:relative;display:flex;align-items:center;gap:12px;width:calc(100% - 40px);margin:8px 20px 0;padding:12px 13px 12px 16px;text-align:left;cursor:pointer;overflow:hidden;
  background:linear-gradient(105deg,color-mix(in srgb,var(--fq-brand) 15%,#101720),#0D1218 58%);
  border-color:color-mix(in srgb,var(--fq-brand) 34%,#25313C);box-shadow:0 16px 34px -30px rgba(0,110,235,.72)}
.fq-card.ai-home::before{content:"";position:absolute;inset:9px auto 9px 0;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#22B9FF,#006EEB)}
.ai-home-i{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:#087DEB;border:1px solid #3DBBFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.ai-home-i svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linejoin:round}
.ai-home-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ai-home-t{font-size:15px;font-weight:850;color:#F7FAFD;letter-spacing:-.012em}
.ai-home-s{font-size:11.5px;font-weight:650;color:#A6B4C2;overflow-wrap:break-word}
.ai-home-c{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#DDF4FF;font-size:18px;line-height:1;background:rgba(0,110,235,.18);border:1px solid rgba(61,187,255,.2)}
@media (max-width:360px){ .ai-msg{max-width:92%;font-size:13.5px} .ai-home-t{font-size:13.5px} .ai-start{font-size:12.5px} }

/* rest screen: Up Next is view-only but tappable, plus links into the same sheets */
.rest-next[role="button"]{cursor:pointer}
.rest-next .rn-chev{flex:none;width:18px;height:18px;display:grid;place-items:center;opacity:.5}
.rest-next .rn-chev svg{width:14px;height:14px;stroke:var(--ds-text-2);fill:none;stroke-width:2.4;stroke-linecap:round}
.rest-links{display:flex;gap:10px;width:100%;margin-top:12px}
.rest-link{flex:1;min-width:0;padding:11px 8px;border-radius:12px;background:var(--ds-surface);
  border:1px solid var(--ds-border);color:var(--ds-text-2);font-family:var(--f);font-size:12.5px;
  font-weight:800;cursor:pointer;overflow-wrap:break-word}
.rest-link:active{border-color:var(--fq-brand)}
.upn{width:100%;text-align:left;cursor:pointer}
@media (max-width:360px){ .rest-link{font-size:11.5px;padding:10px 6px} }

/* KAI composer dock: a flex sibling above #tabs, so layout does the anchoring */
#kai-dock{flex:0 0 auto;display:none;padding:8px 16px;background:var(--ds-bg,#0b0e13);
  border-top:1px solid var(--ds-border);z-index:41}
#kai-dock .ai-composer{position:static;display:flex;align-items:flex-end;gap:8px;padding:0;background:none}
/* keyboard open: #main is the visual-viewport shell and the tab bar collapses to
   nothing inside it, so the dock lands exactly on the keyboard */
#main.kai-open .fq-tabs{height:0;min-height:0;padding:0;border-top:none;background:transparent;backdrop-filter:none}
#main.kai-open .fq-tabs > *{visibility:hidden;pointer-events:none}
#main.kai-open .ai-disc,#main.kai-open .ai-ident,#main.kai-open .ai-tail{display:none}

/* KAI identity + FAB */
.kai-role{display:block;font-size:12.5px;font-weight:800;color:var(--fq-brand);letter-spacing:-.01em}
.ai-ident{margin-top:6px;font-size:10px;font-weight:700;letter-spacing:.02em;
  color:var(--ds-text-3);opacity:.7;text-align:center;overflow-wrap:break-word}
.ai-think{font-size:11.5px;font-weight:700;color:var(--ds-text-3);margin-left:4px}
/* anchored to the TOP EDGE of the tab bar: no JS offset, so it can never paint at a
   stale position when the safe-area inset resolves late */
#kai-fab{position:absolute;right:16px;bottom:calc(100% + 12px);z-index:45;width:48px;height:48px;border-radius:var(--r-round);
  display:none;place-items:center;border:none;background:var(--fq-brand-grad);cursor:pointer;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb,var(--fq-brand) 35%,transparent)}
#kai-fab.on{display:grid}
#kai-fab:active{transform:scale(.94)}
#kai-fab svg{width:24px;height:24px;stroke:#07090C;fill:none;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
/* clearance so the last row can always scroll clear of the button, whatever the
   screen's wrapper is (Nutrition and the Workout hub do not use .pgwrap) */
#main.has-fab #view::after{content:'';display:block;height:76px;flex:none}
@media (max-width:360px){ #kai-fab{right:12px;width:46px;height:46px} #kai-fab svg{width:22px;height:22px} }

/* custom water amount sheet */
.wcustom{margin-top:4px}
.wcustom-row{display:flex;align-items:center;gap:10px;margin-top:6px;
  background:var(--ds-surface-2);border:1px solid var(--ds-border);
  border-radius:var(--r-md);padding:10px 14px}
.wcustom-row input{flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--ds-text);font-size:26px;font-weight:800;font-family:var(--f);
  font-variant-numeric:tabular-nums}
.wcustom-u{flex:none;font-size:13px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ds-text-3)}
.wcustom-err{color:#FF6B7A;font-size:12.5px;margin-top:8px}


/* ═══ 320px SPACING ═══ */
/* Hero: .fqh-media .fq-media__content already sets padding:var(--s5) on ALL FOUR
   sides, so title, chips, meta and CTA share one content column. An earlier fix of
   mine overrode only left/right to var(--s4), leaving 20px top/bottom against 16px
   sides and shifting the CTA off that column — removed. Nothing here uses a
   viewport width, a margin offset, a translate, or a calc(). */
.fqh-cta{width:100%;margin-left:0;margin-right:0;box-sizing:border-box}

/* The icon+label group was centred as a unit, so the 18px icon plus its 8px gap
   pushed the LABEL 13px right of true centre — that is the "off-centre" look.
   A 3-column grid gives the icon a fixed slot and mirrors it with an equal empty
   slot, so the label sits at the exact centre of the button. */
/* The hero CONTENT WRAPPER owns the inset: equal horizontal padding, so the title,
   chips, meta and CTA all start and end on the same column. The button itself only
   fills that column. No translateX, no margin-left hack, no vw, no calc(). */
.fqh .fq-media__content{padding-left:16px;padding-right:16px;box-sizing:border-box}
.fqh-cta{display:grid;grid-template-columns:26px minmax(0,1fr) 26px;align-items:center;
  text-align:center;padding-left:var(--s4);padding-right:var(--s4);
  margin-inline:auto;box-sizing:border-box;width:100%}
.fqh-cta svg{grid-column:1;justify-self:start}

/* Water actions: five buttons with min-width:64 need 348px but only ~262px exists at
   320, so flex-wrap split them unevenly. Below 380 lay them out explicitly:
   row 1 = the three quick adds, row 2 = Custom + Undo. Equal gaps, equal margins,
   tap targets kept at a readable size. */
@media (max-width:420px){
  .wcard-q{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .wcard-q button{min-width:0;width:100%;font-size:12.5px;padding:10px 4px}
  .wcard-q #w-custom{grid-column:1 / span 2}
  /* with no water logged there is no Undo button, so Custom takes the whole row
     rather than leaving a dead third column */
  .wcard-q #w-custom:last-child{grid-column:1 / -1}
  .wcard-q .wcard-undo{grid-column:3 / span 1;flex:none;padding:10px 4px}
}


/* ═══ WEEK DATE STRIP ═══
   Was display:flex with padding:0 16px, so the row sat outside the 20px content
   column every other block uses, and the first/last day looked inset differently
   from the gaps between days. An explicit 7-column grid guarantees identical
   column widths; the selected day restyles inside its own column and cannot take
   extra width (box-sizing is border-box globally, so its thicker ring border does
   not change the box). */



/* ═══ WEEK DATE STRIP — single source of truth ═══
   True 7-column grid. Each .dpill is one column; the .ring is a fixed-size circle
   CENTRED in that column via justify-self, so the selected/today ring (which only
   changes colour + border-width) can never widen its box or overlap a neighbour.
   The circle has an explicit width AND height so aspect-ratio can't stretch it. */
.strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;padding:0 20px 22px;overflow:hidden}
.dpill{display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:0;width:100%;background:none;border:none;padding:0}
.dpill .ring{width:var(--ringsz,40px);height:var(--ringsz,40px);max-width:100%;
  aspect-ratio:auto;border-radius:50%;box-sizing:border-box;
  display:grid;place-items:center;border:1px solid #2A3540;background:#10161D;
  font-size:13.5px;font-weight:800;color:#DCE6F0;font-variant-numeric:tabular-nums}
.dpill .lbl{font-size:10.5px;font-weight:750;color:#8796A6;
  width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpill .tick{width:4px;height:4px;border-radius:50%;background:#2C3742}
/* .today is ALSO a card component (.today{margin:0 20px 18px;background;border}).
   That bare rule leaked its margin/background/border onto .dpill.today, pushing the
   selected day out of its grid column (overlap) and drawing an oval box behind it.
   Reset those inherited card properties on the day pill — the ring alone carries the
   today styling. THIS is the real fix; earlier attempts edited the wrong rules. */
.dpill.today{margin:0;background:none;border:none;border-radius:0;overflow:visible}
.dpill.today .ring{background:linear-gradient(145deg,#006EEB,#0A9CFA 62%,#22B9FF);border-color:#61C7FF;color:#fff;box-shadow:0 8px 18px -16px var(--fq-brand)}
.dpill.today .lbl{color:#F4F8FC}
.dpill.done  .ring{background:#00C3FE;border-color:#75DDFF;color:#061016}
.dpill.done  .ring svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:3}
.dpill.sel   .ring{border-color:#EAF3FC;border-width:2px}
.dpill.sel   .lbl{color:#EAF3FC}
.dpill.has   .tick{background:var(--fq-brand-ink)}
/* circle size scales with viewport, never exceeding its column */
.strip{--ringsz:40px}
@media (max-width:400px){ .strip{--ringsz:38px;gap:3px} }
@media (max-width:340px){ .strip{--ringsz:34px} }


/* weekly activity: progress headline + supporting detail */
.fqw-prog{font-size:13px;font-weight:850;color:var(--ds-text);font-variant-numeric:tabular-nums}
.fqw-track{height:4px;border-radius:99px;background:#242E38;overflow:hidden;margin:6px 0 1px}
.fqw-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#006EEB,#0A9CFA 58%,#00C3FE);transition:width .3s ease}
.fqw-sub{margin-top:7px;font-size:11px;color:#95A3B2;line-height:1.35}


/* Progress overview: 4 plain-language stats + explained volume */
.pgstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.pgstat-k{font-size:11px;line-height:1.3;text-transform:none;letter-spacing:0}
.pgchart-sub{margin-top:10px;padding-top:10px;border-top:1px solid var(--ds-border);
  font-size:11.5px;color:var(--ds-text-3);line-height:1.5}
/* Was: 4 columns at >=430. That suited the old centred stat card, but the
   refreshed card places the icon beside the number, so a quarter-width column
   forced the label to render one letter per line. Two up at every phone width. */
@media (min-width:430px){ .pgstats{grid-template-columns:repeat(2,minmax(0,1fr))} }


/* Program setup save bar. It was position:fixed;bottom:0, which put it UNDERNEATH
   the bottom nav (measured 66px of overlap). The nav is a normal flex sibling, so a
   sticky footer INSIDE the scroll area docks above it correctly at any nav height,
   with no magic offsets. */
.psavebar{position:sticky;bottom:0;z-index:20;
  display:flex;gap:10px;margin:14px -20px 0;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ds-bg) 96%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--ds-border)}
/* Save needs ~224px for its label; a 50/50 split left it 133px at 320 and clipped.
   Cancel now sizes to its own text and Save takes ALL remaining width. */
/* .btn is a full-width block (width:calc(100% - 40px); margin:18px 20px), which in a
   flex row made Cancel ~280px wide and squeezed Save to 20px. Reset those inside the
   bar: Cancel sizes to its own text, Save takes every remaining pixel. */
.psavebar .btn{width:auto;margin:0;white-space:nowrap;padding:14px;font-size:15px}
.psavebar .btn.ghost{flex:0 0 auto;padding-left:16px;padding-right:16px}
.psavebar .btn:not(.ghost){flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
@media (max-width:360px){
  .psavebar{gap:8px;padding-left:14px;padding-right:14px}
  .psavebar .btn{font-size:14px;padding:13px 10px}
  .psavebar .btn.ghost{padding-left:12px;padding-right:12px}
}


/* sticky Done footer inside a scrolling sheet */
.sheet-done{position:sticky;bottom:calc(-1 * env(safe-area-inset-bottom));z-index:5;
  margin:10px -20px calc(-20px - env(safe-area-inset-bottom));
  padding:10px 20px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--ds-border)}
.sheet-done .btn{width:100%;margin:0}   /* base .btn carries margin:18px 20px — reset it,
                                           or width:100% overflows 20px to the right */
/* the sticky footer sits ON the scroll content, so reserve its height at the end of
   the list — otherwise the final option can never scroll clear of it */
.sheet .inner:has(.sheet-done) > *:not(.sheet-done):last-of-type{margin-bottom:8px}
.sheet-done{margin-top:14px}


/* ═══ FOOD LOGGER TABS (phase 1) ═══ */
.ftabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0 12px}
.ftab{padding:9px 4px;border-radius:var(--r-sm);border:1px solid var(--ds-border);
  background:var(--ds-surface-2);color:var(--ds-text-3);
  font-family:var(--f);font-size:12.5px;font-weight:700;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ftab.on{background:var(--fq-brand-grad);border-color:transparent;color:#fff}
.fempty{padding:22px 16px;text-align:center;color:var(--ds-text-3);
  font-size:13px;line-height:1.5}
@media (max-width:360px){
  .ftabs{gap:4px}
  .ftab{font-size:11.5px;padding:9px 2px}
}


/* ═══ USDA SECTION (phase 2) ═══ */
.fsec{margin:14px 2px 6px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ds-text-3)}
.fnote{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--ds-surface-2);border:1px solid var(--ds-border);
  font-size:12.5px;color:var(--ds-text-3);line-height:1.45}
.fnote.fwarn{color:#FFB4A2;border-color:color-mix(in srgb,#FF6B7A 32%,var(--ds-border))}
.fspin{flex:none;width:13px;height:13px;border-radius:50%;
  border:2px solid var(--ds-border);border-top-color:var(--fq-brand-ink);
  animation:fspin .7s linear infinite}
@keyframes fspin{to{transform:rotate(360deg)}}
.fres .r .tg{margin-left:6px;font-size:10px;padding:2px 6px;border-radius:5px;
  background:var(--ds-surface-3);color:var(--ds-text-3);font-weight:700}
@media (prefers-reduced-motion:reduce){ .fspin{animation:none} }


/* ═══ ONBOARDING · SCREEN 1 ═══
   Layered dark cards with per-group icons. The value is the largest element in each
   card and the label is quiet sentence case, so a field reads as a stat rather than
   a form blank. Radii step down by nesting (card 22 > well 15 > pill 9) so the
   grouping is legible rather than one radius on everything. */
.ob1{margin:0 0 4px}

/* ── hero ──────────────────────────────────────────────────────────────────
   No athlete photo ships with the app, so the "figure" is a sculpted light
   gradient in the same position the reference uses. Drop a cutout at
   assets/images/onboarding/hero.webp and it layers in automatically. */
.ob1-hero{position:relative;padding:2px 0 24px;isolation:isolate;overflow:hidden}
.ob1-figure{position:absolute;right:0;top:-26px;width:52%;height:250px;
  z-index:-1;pointer-events:none;border-radius:0 0 0 70%;
  background:
    radial-gradient(120% 90% at 78% 22%, color-mix(in srgb,var(--fq-brand) 34%,transparent) 0%, transparent 60%),
    radial-gradient(90% 70% at 92% 8%, rgba(255,255,255,.10) 0%, transparent 58%),
    linear-gradient(200deg, color-mix(in srgb,var(--fq-brand) 16%,transparent), transparent 62%);
  filter:blur(2px);opacity:.85;
  -webkit-mask-image:linear-gradient(255deg,#000 18%,transparent 82%);
          mask-image:linear-gradient(255deg,#000 18%,transparent 82%)}
.ob1-figure{background-size:cover;background-position:top right}
.ob1-top{display:flex;align-items:center;gap:12px;margin:4px 0 20px}
.ob1-rail{display:flex;gap:5px}
.ob1-rail i{width:22px;height:3px;border-radius:99px;background:var(--ds-surface-3);display:block}
.ob1-rail i.on{width:34px;background:var(--fq-brand-grad);box-shadow:0 0 12px -2px var(--fq-brand)}
.ob1-step{font-size:12px;font-weight:600;color:var(--ds-text-3)}
.ob1-t{font-size:clamp(28px,8.6vw,34px);font-weight:800;letter-spacing:-.032em;
  line-height:1.06;color:var(--ds-text);margin:0 0 11px}
.ob1-t span{color:var(--fq-brand-ink)}
.ob1-s{font-size:13.5px;line-height:1.55;color:var(--ds-text-3);margin:0;max-width:30ch}

/* ── cards ── */
.ob1-card{background:linear-gradient(168deg,
    color-mix(in srgb,var(--ds-surface-2) 88%,var(--fq-brand) 4%), var(--ds-surface));
  border:1px solid var(--ds-border);border-radius:22px;padding:15px 16px 16px;
  margin-bottom:10px;box-shadow:0 16px 34px -28px rgba(0,0,0,.95)}
.ob1-duo{display:flex;gap:10px;margin-bottom:10px}
.ob1-duo>*{flex:1;min-width:0;margin-bottom:0}
.ob1-duo--tight{gap:10px;margin-bottom:0}

.ob1-ch{display:flex;align-items:center;gap:9px;margin-bottom:10px;min-width:0}
.ob1-ic{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--fq-brand) 15%,transparent);color:var(--fq-brand-ink)}
.ob1-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ob1-l{font-size:12.5px;font-weight:600;color:var(--ds-text-3);
  letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob1-ch .ob1-pills{margin-left:auto;flex:none}

/* ── values ── */
.ob1-in{width:100%;min-width:0;background:none;border:none;outline:none;
  color:var(--ds-text);font-family:var(--f);font-weight:800;font-size:24px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;padding:2px 0;
  border-radius:0;-webkit-appearance:none}
.ob1-in--text{font-size:20px;letter-spacing:-.01em;font-variant-numeric:normal;
  padding:4px 0 9px;border-bottom:1.5px solid var(--ds-border);transition:border-color .16s ease}
.ob1-in--text:focus{border-bottom-color:var(--fq-brand-ink)}
.ob1-in::placeholder{color:var(--ds-text-3);font-weight:700;opacity:.5}
.ob1-in:focus-visible{outline:2px solid var(--fq-brand-ink);outline-offset:3px;border-radius:5px}
.ob1-val{position:relative;display:block;min-width:0}
.ob1-val .ob1-in{padding-right:40px}
.ob1-suf{position:absolute;right:0;bottom:5px;font-style:normal;font-size:12.5px;
  font-weight:700;color:var(--ds-text-3);pointer-events:none}
/* inset well for measured values */
.ob1-well{background:var(--ds-bg);border:1px solid var(--ds-border);
  border-radius:15px;padding:11px 14px;min-width:0}
.ob1-well:focus-within{border-color:color-mix(in srgb,var(--fq-brand) 55%,var(--ds-border))}
.ob1-well .ob1-suf{bottom:13px;right:14px}

/* ── sex segment with sliding thumb ── */
.ob1-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;
  background:var(--ds-bg);border:1px solid var(--ds-border);
  border-radius:13px;padding:3px;overflow:hidden}
.ob1-thumb{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);
  border-radius:10px;background:var(--fq-brand-grad);
  box-shadow:0 6px 16px -9px var(--fq-brand);
  transition:transform .22s cubic-bezier(.4,0,.2,1)}
.ob1-seg[data-on="1"] .ob1-thumb{transform:translateX(100%)}
/* nothing chosen yet: hide the thumb entirely so neither option looks selected */
.ob1-seg--none .ob1-thumb{opacity:0}
.ob1-seg--none{border-color:color-mix(in srgb,var(--fq-brand) 30%,var(--ds-border))}
.ob1-segb{position:relative;z-index:1;padding:9px 2px;border:none;background:none;
  color:var(--ds-text-3);font-family:var(--f);font-size:13.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;min-width:0;transition:color .18s ease}
.ob1-segb.on{color:#fff}

/* ── unit pills ── */
.ob1-pills{display:flex;gap:2px;background:var(--ds-bg);border:1px solid var(--ds-border);
  border-radius:11px;padding:2px}
.ob1-pill{padding:5px 10px;border:none;border-radius:9px;background:none;
  color:var(--ds-text-3);font-family:var(--f);font-size:11px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:background .16s ease,color .16s ease}
.ob1-pill.on{background:var(--fq-brand-ink);color:#052030}

/* ── note ── */
.ob1-note{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.5;
  color:var(--ds-text-3);margin:14px 2px 0;max-width:42ch}
.ob1-note-ic{flex:none;color:var(--ds-text-3);opacity:.8}
.ob1-note-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;display:block;margin-top:1px}

@media (max-width:360px){
  .ob1-card{padding:13px 13px 14px;border-radius:19px}
  .ob1-duo{gap:8px}
  .ob1-ch{gap:7px;margin-bottom:9px}
  .ob1-ic{width:26px;height:26px;border-radius:9px}
  .ob1-ic svg{width:14px;height:14px}
  .ob1-l{font-size:11.5px}
  .ob1-in{font-size:21px}
  .ob1-in--text{font-size:18px}
  .ob1-segb{font-size:12px;padding:9px 0;letter-spacing:-.01em}
  .ob1-pill{padding:5px 7px;font-size:10.5px}
  .ob1-well{padding:10px 12px;border-radius:13px}
  .ob1-well .ob1-suf{right:12px}
}
@media (prefers-reduced-motion:reduce){ .ob1-thumb{transition:none} }

/* ═══ ONBOARDING · BUTTON ALIGNMENT ═══
   #ob already supplies 20px of horizontal padding, but .btn adds its own
   `width:calc(100% - 40px); margin:18px 20px` on top. The Next button therefore sat
   at 40->280 while every field sat at 20->300 — symmetric, so it never looked
   off-centre on its own, but 20px narrower on each side than the content above it.
   Cancel the extra inset so the button spans exactly the content column. */
/* Spans exactly the card column: #ob supplies 20px padding, so the base .btn
   margin is cancelled rather than stacked on top of it. */
#ob > .btn{width:100%;margin-left:auto;margin-right:auto;margin-top:22px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:18px;border-radius:999px;font-size:16.5px;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 12px 34px -12px var(--fq-brand), inset 0 1px 0 rgba(255,255,255,.16)}
#ob > .btn::after{content:'';width:17px;height:17px;flex:none;
  background:currentColor;
  -webkit-mask:no-repeat center/17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
          mask:no-repeat center/17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E")}
#ob > .btn:active{transform:translateY(1px)}
#ob > .btn:focus-visible{outline:2px solid var(--fq-brand-ink);outline-offset:3px}


/* ═══ ONBOARDING · POLISH (presentation only — no markup or logic changes) ═══

   Measured problems at 320px before this block:
     • 5 goal cards across a 280px row = 50px each; "Athletic", "Muscular" and
       "Powerful" were all clipped and the row itself overflowed.
     • .pref-v is white-space:nowrap + ellipsis, so "Monday, Wednesday, Friday"
       and "Dumbbells, Resistance band" truncated mid-word.
   Both are fixed by letting the content reflow, not by shrinking type further. */

/* ── section rhythm: more air, and a quieter eyebrow so the cards lead ── */
.obsec{font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--ds-text);margin:30px 2px 6px}
.obhelp{font-size:12.5px;line-height:1.55;color:var(--ds-text-3);margin:0 2px 14px;max-width:44ch}
.prefcard{background:linear-gradient(168deg,
    color-mix(in srgb,var(--ds-surface-2) 88%,var(--fq-brand) 4%), var(--ds-surface));
  border:1px solid var(--ds-border);border-radius:20px;overflow:hidden;
  box-shadow:0 16px 34px -28px rgba(0,0,0,.95)}

/* ── goal cards: 5-across only when there is room for it ── */
.goalfigs{gap:9px}
@media (max-width:430px){
  /* three per row keeps every label on one line and the tap target honest */
  .goalfigs{grid-template-columns:repeat(3,1fr);gap:9px}
}
.gfig{background:var(--ds-bg);border:1.5px solid var(--ds-border);border-radius:16px;
  padding:12px 6px 10px;gap:7px;transition:border-color .16s ease,background .16s ease}
.gfig.on{border-color:var(--fq-brand-ink);
  background:color-mix(in srgb,var(--fq-brand) 10%,var(--ds-bg));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--fq-brand) 14%,transparent)}
.gfig .gn{font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--ds-text-3);white-space:nowrap}
.gfig.on .gn{color:var(--ds-text)}

/* ── pref rows: let long values wrap instead of truncating mid-word ── */
.pref{padding:15px 16px;gap:12px}
.pref-l{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--ds-text-3);margin-bottom:5px}
.pref-v{font-size:15px;font-weight:700;color:var(--ds-text);
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;
  overflow-wrap:anywhere}
@media (max-width:360px){
  .pref{padding:14px 13px;gap:9px}
  .pref-v{font-size:14.5px}
  .gfig{padding:11px 4px 9px;border-radius:14px}
  .gfig .gn{font-size:10.5px}
  .obsec{margin-top:26px}
}

/* ── CTA: give it room and weight so it reads as the step's action ── */
#ob > .btn{margin-top:28px}
#ob{padding-bottom:calc(46px + env(safe-area-inset-bottom))}

/* ── screen 1 breathing room ── */
.ob1{margin-bottom:8px}
.ob1-card{margin-bottom:11px}
.ob1-duo{margin-bottom:11px}
.ob1-note{margin-top:16px}


/* ═══ ONBOARDING · SECTIONS 2 & 3 — visual parity with the profile cards ═══
   CSS only. Markup, handlers, wording, ids and the 320px wrapping all unchanged.
   The aim is that .prefcard reads as the same component family as .ob1-card:
   identical gradient, border, shadow and value hierarchy — without the rows
   becoming bulky, so the section stays scannable. */

/* card shell: same gradient/border/shadow as .ob1-card, matching 22px radius */
.prefcard{background:linear-gradient(168deg,
    color-mix(in srgb,var(--ds-surface-2) 88%,var(--fq-brand) 4%), var(--ds-surface));
  border:1px solid var(--ds-border);border-radius:22px;overflow:hidden;
  box-shadow:0 16px 34px -28px rgba(0,0,0,.95)}

/* rows: a hairline inset divider rather than a full-bleed border, so the card
   edge stays clean the way the profile cards do */
.prefcard .pref{position:relative;border-bottom:none;padding:15px 16px;
  background:none;transition:background .15s ease}
.prefcard .pref:not(:last-child)::after{content:'';position:absolute;
  left:16px;right:16px;bottom:0;height:1px;
  background:color-mix(in srgb,var(--ds-border) 82%,transparent)}
.prefcard .pref:active{background:color-mix(in srgb,var(--fq-brand) 7%,transparent)}

/* value hierarchy: quiet label, confident value — same relationship as the
   Height/Weight cards, where the value is the element that carries weight */
.prefcard .pref-l{font-size:12px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ds-text-3);margin-bottom:5px}
.prefcard .pref-v{font-size:15px;font-weight:700;color:var(--ds-text);
  letter-spacing:-.005em;line-height:1.35}
.prefcard .pref-v.ph{font-weight:600;color:var(--ds-text-3);opacity:.75}

/* chevron: lighter, smaller, and nudged by the row's active state instead of
   sitting there as a heavy glyph */
.prefcard .pref-e{font-size:17px;font-weight:400;line-height:1;
  color:var(--ds-text-3);opacity:.55;
  transition:opacity .15s ease,transform .15s ease}
.prefcard .pref:active .pref-e{opacity:.95;transform:translateX(1px)}

@media (max-width:360px){
  .prefcard{border-radius:19px}
  .prefcard .pref{padding:14px 13px}
  .prefcard .pref:not(:last-child)::after{left:13px;right:13px}
  .prefcard .pref-e{font-size:16px}
}

/* goal cards: only the promised tiny spacing adjustment, nothing else */
.goalfigs{margin-top:2px}


/* ═══ ONBOARDING · SCREEN 2 (goal selection) ═══
   Visual only. Same data-gfig handler, same single-select, same GOAL_FIGS copy.
   Shares Screen 1's rail/step/card language so the flow reads as one system. */
.ob2{margin:34px 0 4px}
.ob2-head{position:relative;padding:0 0 20px;isolation:isolate;overflow:hidden}
.ob2-head::before{content:'';position:absolute;inset:-24px 0 auto;height:170px;z-index:-1;
  background:radial-gradient(ellipse 110% 100% at 26% 0%,
    color-mix(in srgb,var(--fq-brand) 17%,transparent) 0%, transparent 64%);
  pointer-events:none}
.ob2-t{font-size:clamp(25px,7.6vw,31px);font-weight:800;letter-spacing:-.03em;
  line-height:1.08;color:var(--ds-text);margin:0 0 10px}
.ob2-t span{color:var(--fq-brand-ink)}
.ob2-s{font-size:13px;line-height:1.55;color:var(--ds-text-3);margin:0;max-width:40ch}

/* ── goal cards ──────────────────────────────────────────────────────────── */
.goalfigs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2px}
@media (max-width:430px){ .goalfigs{grid-template-columns:repeat(3,minmax(0,1fr))} }
.gfig{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;
  background:linear-gradient(170deg,
    color-mix(in srgb,var(--ds-surface-2) 84%,var(--fq-brand) 5%), var(--ds-bg));
  border:1.5px solid var(--ds-border);border-radius:18px;
  padding:10px 9px 11px;overflow:hidden;cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease}
.gfig:active{transform:scale(.985)}
.gfig-art{display:block;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 70%)}
.gfig .fig{width:100%;height:auto;display:block;border-radius:12px;
  filter:brightness(.82) saturate(.7) contrast(1.05);
  transition:filter .2s ease}
.gn{display:block;margin-top:9px;text-align:center;
  font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--ds-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .18s ease}
/* selected: brighter border, soft outer glow, lifted figure */
.gfig.on{border-color:var(--fq-brand-ink);
  box-shadow:0 0 0 1px var(--fq-brand-ink),
             0 0 26px -6px color-mix(in srgb,var(--fq-brand) 70%,transparent),
             inset 0 1px 0 rgba(255,255,255,.08)}
.gfig.on .fig{filter:brightness(1.18) saturate(1.05) contrast(1.06)}
.gfig.on .gn{color:var(--ds-text)}
/* tick badge, only on the selected card */
.gfig-tick{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--fq-brand-grad);
  opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease;
  box-shadow:0 3px 10px -3px var(--fq-brand)}
.gfig.on .gfig-tick{opacity:1;transform:scale(1)}
.gfig-tick svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

/* ── selected-goal description ── */
.ob2-blurb{display:flex;align-items:center;gap:12px;margin-top:12px;
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--ds-surface-2) 88%,var(--fq-brand) 4%), var(--ds-surface));
  border:1px solid var(--ds-border);border-radius:18px;padding:14px 15px;
  box-shadow:0 16px 34px -28px rgba(0,0,0,.95);
  font-size:12.5px;line-height:1.5;color:var(--ds-text-2,var(--ds-text-3))}
.ob2-blurb-ic{flex:none;width:34px;height:34px;border-radius:12px;display:grid;
  place-items:center;background:color-mix(in srgb,var(--fq-brand) 15%,transparent);
  color:var(--fq-brand-ink)}
.ob2-blurb-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

@media (max-width:360px){
  .ob2{margin-top:30px}
  .goalfigs{gap:8px}
  .gfig{padding:8px 7px 9px;border-radius:15px}
  .gfig .fig,.gfig-art{border-radius:10px}
  .gn{font-size:10.5px;margin-top:8px}
  .gfig-tick{width:18px;height:18px;top:6px;right:6px}
  .ob2-blurb{padding:12px 13px;gap:10px;font-size:12px;border-radius:15px}
  .ob2-blurb-ic{width:30px;height:30px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  .gfig,.gfig .fig,.gfig-tick,.gn{transition:none}
}



/* ═══ ONBOARDING · STEP CHROME ═══ (navigation only, no screen redesign) */
.obback{display:block;width:100%;margin:18px auto 0;padding:13px;
  background:none;border:1px solid var(--ds-border);border-radius:999px;
  color:var(--ds-text-3);font-family:var(--f);font-size:14px;font-weight:700;cursor:pointer;
  order:2}
.obback:active{background:color-mix(in srgb,var(--fq-brand) 7%,transparent)}
.obback.hide{display:none}
/* Back sits BELOW the primary CTA so the forward action stays the obvious one */
#ob>.btn{order:1}
#ob{display:flex;flex-direction:column}
#ob>.obh,#ob>#ob-form{order:0}
.ob2-head--plain{padding-bottom:16px}
.ob2-head--plain::before{height:140px}
@media (max-width:360px){ .obback{padding:12px;font-size:13.5px} }


/* ═══ SCREEN 2 · crop the baked-in labels out of the physique artwork ═══
   The 150x185 FIGS assets have the goal name ("LEAN", "MUSCULAR", ...) baked into
   the bottom edge, already clipped mid-glyph when the assets were produced — the
   top slivers of the letters sit in rows 183-184. The card renders its own label
   underneath, so that band must never be shown.

   Fix without touching the artwork or the markup: give the wrapper a slightly
   shorter aspect ratio than the image and let object-fit:cover with
   object-position:top crop from the BOTTOM only.
     image   150 x 185  -> 0.8108
     wrapper 150 x 178  -> 0.8427   (7px, ~3.8%, removed from the bottom)
   cover preserves aspect (no stretch) and every card uses the same ratio, so the
   figure scale stays identical across all five and for both sexes. */
/* The assets are now normalised: baked card frames and the clipped label band were
   cropped out of the artwork itself, and Athletic's warm colour cast was matched to
   the other four. No CSS crop needed, so the full figure shows undistorted. */
.gfig-art{aspect-ratio:150 / 185;overflow:hidden;display:block}
.gfig .fig{width:100%;height:100%;object-fit:cover;object-position:center}


/* ═══ ONBOARDING · SCREEN 3 (your schedule) ═══
   Shares Screen 1/2's card language: same gradient, border, shadow, icon chip and
   cyan selected treatment. Presentation only — controls carry the original
   data-dwo / data-omin / data-oexp attributes. */
.ob3{margin:34px 0 4px}
.ob3-card{background:linear-gradient(168deg,
    color-mix(in srgb,var(--ds-surface-2) 88%,var(--fq-brand) 4%), var(--ds-surface));
  border:1px solid var(--ds-border);border-radius:22px;padding:15px 15px 16px;
  margin-bottom:11px;box-shadow:0 16px 34px -28px rgba(0,0,0,.95)}
.ob3-ch{display:flex;align-items:flex-start;gap:11px;margin-bottom:13px}
.ob3-cb{display:flex;flex-direction:column;gap:3px;min-width:0}
.ob3-t{font-size:15px;font-weight:700;color:var(--ds-text);letter-spacing:-.01em}
.ob3-s{font-size:12px;line-height:1.4;color:var(--ds-text-3)}

/* shared check dot — empty ring when off, cyan tick when on */
.ob3-dot{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--ds-border);background:transparent;
  transition:background .16s ease,border-color .16s ease}
.on>.ob3-dot{border-color:transparent;background:var(--fq-brand-grad);
  box-shadow:0 3px 10px -3px var(--fq-brand)}
.ob3-dot svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

/* ── day chips: 7 across, wrapping to 4+3 when there isn't room ── */
.ob3-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ob3-day{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:9px 2px 8px;min-width:0;cursor:pointer;
  background:var(--ds-bg);border:1.5px solid var(--ds-border);border-radius:14px;
  transition:border-color .16s ease,background .16s ease,transform .1s ease}
.ob3-day:active{transform:scale(.96)}
.ob3-dl{font-size:11.5px;font-weight:700;color:var(--ds-text-3);white-space:nowrap;
  transition:color .16s ease}
.ob3-day.on{border-color:transparent;
  background:linear-gradient(170deg,var(--fq-brand),color-mix(in srgb,var(--fq-brand) 72%,#0b3d63));
  box-shadow:0 0 18px -6px color-mix(in srgb,var(--fq-brand) 75%,transparent)}
.ob3-day.on .ob3-dl{color:#fff}
.ob3-day.on .ob3-dot{background:rgba(255,255,255,.22);border-color:transparent;box-shadow:none}
.ob3-note{margin:11px 2px 0;font-size:12px;color:var(--ds-text-3)}

/* ── option cards (session length + experience) ── */
.ob3-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:8px}
.ob3-grid+.ob3-grid{margin-top:8px}
.ob3-opt{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:13px 8px 12px;min-width:0;cursor:pointer;text-align:center;
  background:var(--ds-bg);border:1.5px solid var(--ds-border);border-radius:16px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .1s ease}
.ob3-opt:active{transform:scale(.98)}
.ob3-ov{font-size:19px;font-weight:800;color:var(--ds-text);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.ob3-ov--sm{font-size:14px;letter-spacing:-.01em;line-height:1.2;white-space:nowrap}
.ob3-os{font-size:11px;line-height:1.35;color:var(--ds-text-3)}
.ob3-opt.on{border-color:var(--fq-brand-ink);
  background:color-mix(in srgb,var(--fq-brand) 9%,var(--ds-bg));
  box-shadow:0 0 0 1px var(--fq-brand-ink),
             0 0 24px -8px color-mix(in srgb,var(--fq-brand) 70%,transparent)}
.ob3-opt.on .ob3-ov{color:#fff}
.ob3-opt.on .ob3-os{color:var(--ds-text-2,#cfd8e3)}
.ob3-opt--exp .ob3-os{min-height:2.7em}

@media (max-width:400px){
  /* 7 chips across gets too tight — wrap to 4 + 3, still one tap each */
  .ob3-days{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .ob3-opt--exp .ob3-os{min-height:0}
}
@media (max-width:360px){
  .ob3-card{padding:13px 13px 14px;border-radius:19px}
  .ob3-days{gap:6px}
  .ob3-day{padding:8px 2px 7px;border-radius:12px;gap:6px}
  .ob3-dot{width:18px;height:18px}
  .ob3-dl{font-size:11px}
  .ob3-grid{gap:7px}
  .ob3-opt{padding:11px 5px 10px;border-radius:14px}
  .ob3-ov{font-size:17px}

  .ob3-os{font-size:10.5px}
  .ob3-t{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .ob3-day,.ob3-opt,.ob3-dot{transition:none}
}



/* ═══ SCREEN 3 · experience cards stack vertically ═══
   Three across never fitted honestly: at 320px each column gave 69.3px of inner
   width while "Intermediate" needs 96.8px and "Advanced" 74.1px, and three cards
   at their required width totalled 335px against 294px available. A breakpoint
   that swapped layouts at 390px worked but meant two different presentations.
   Stacking at every width is simpler and always fits: full-size labels on one
   line, bigger tap targets, and the subtitle can breathe beside the name. */
.ob3-card .ob3-grid:has(.ob3-opt--exp){grid-template-columns:1fr;gap:8px}
.ob3-opt--exp{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;column-gap:12px;row-gap:2px;
  padding:13px 14px;text-align:left}
.ob3-opt--exp .ob3-dot{grid-row:1 / span 2;align-self:center}
.ob3-opt--exp .ob3-ov{grid-column:2;text-align:left;align-self:end;font-size:14.5px}
.ob3-opt--exp .ob3-os{grid-column:2;text-align:left;align-self:start;
  min-height:0;white-space:normal;font-size:11.5px}
@media (max-width:360px){
  .ob3-opt--exp{padding:12px 12px;column-gap:10px}
  .ob3-opt--exp .ob3-ov{font-size:14px}
  .ob3-opt--exp .ob3-os{font-size:11px}
}


/* ═══ ONBOARDING · SCREEN 4 (what you train with) ═══
   Reuses Screen 3's card shell, icon chip, check dot and note. Presentation only:
   controls carry the existing data-ogym / data-oequip attributes. */
.ob4{margin:34px 0 4px}

/* ── gym access: two wide cards, stacked so the subtitles stay readable ── */
.ob4-yn{display:grid;grid-template-columns:1fr;gap:8px}
.ob4-yn-b{display:grid;grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;column-gap:12px;row-gap:2px;
  padding:13px 14px;cursor:pointer;text-align:left;
  background:var(--ds-bg);border:1.5px solid var(--ds-border);border-radius:16px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .1s ease}
.ob4-yn-b:active{transform:scale(.985)}
.ob4-yn-ic{display:grid;place-items:center;width:26px;height:26px;color:var(--fq-brand-ink);opacity:.85}
.ob4-yn-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ob4-yn-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ob4-yn-t{font-size:15px;font-weight:800;color:var(--ds-text);letter-spacing:-.01em}
.ob4-yn-b.on{border-color:var(--fq-brand-ink);
  background:color-mix(in srgb,var(--fq-brand) 9%,var(--ds-bg));
  box-shadow:0 0 0 1px var(--fq-brand-ink),
             0 0 24px -8px color-mix(in srgb,var(--fq-brand) 70%,transparent)}
.ob4-yn-b.on .ob4-yn-ic{opacity:1}

/* ── equipment tiles: icon + label, badge top-right ── */
.ob4-eq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ob4-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:13px 12px 12px;min-width:0;cursor:pointer;text-align:left;
  background:var(--ds-bg);border:1.5px solid var(--ds-border);border-radius:16px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .1s ease}
.ob4-tile:active{transform:scale(.985)}
.ob4-tile-ic{display:grid;place-items:center;width:30px;height:30px;
  color:var(--ds-text-3);transition:color .18s ease}
.ob4-tile-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ob4-tile-l{font-size:12.5px;font-weight:700;color:var(--ds-text-3);line-height:1.25;
  overflow-wrap:anywhere;transition:color .18s ease}
.ob4-tile-badge{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;border:1.5px solid var(--ds-border);background:transparent;
  transition:background .16s ease,border-color .16s ease}
.ob4-tile-badge svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.ob4-tile.on{border-color:var(--fq-brand-ink);
  background:color-mix(in srgb,var(--fq-brand) 9%,var(--ds-bg));
  box-shadow:0 0 0 1px var(--fq-brand-ink),
             0 0 24px -8px color-mix(in srgb,var(--fq-brand) 70%,transparent)}
.ob4-tile.on .ob4-tile-ic{color:var(--fq-brand-ink)}
.ob4-tile.on .ob4-tile-l{color:#fff}
.ob4-tile.on .ob4-tile-badge{border-color:transparent;background:var(--fq-brand-grad);
  box-shadow:0 3px 10px -3px var(--fq-brand)}
.ob4-tile-l{padding-right:22px}   /* clear the badge */

/* ── info panel ── */
.ob4-info{display:flex;align-items:center;gap:12px;margin-top:11px;
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--ds-surface-2) 88%,var(--fq-brand) 4%), var(--ds-surface));
  border:1px solid var(--ds-border);border-radius:18px;padding:14px 15px;
  box-shadow:0 16px 34px -28px rgba(0,0,0,.95);
  font-size:12.5px;line-height:1.5;color:var(--ds-text-3)}

@media (min-width:420px){
  .ob4-yn{grid-template-columns:1fr 1fr}
  .ob4-yn-b{grid-template-columns:auto minmax(0,1fr);row-gap:3px}
  .ob4-yn-b .ob3-dot{grid-row:1 / span 2}
  .ob4-yn-ic{display:none}
}
@media (max-width:360px){
  .ob4-eq{gap:7px}
  .ob4-tile{padding:11px 10px 10px;border-radius:14px;gap:8px}
  .ob4-tile-ic{width:26px;height:26px}
  .ob4-tile-ic svg{width:21px;height:21px}
  .ob4-tile-l{font-size:11.5px;padding-right:20px}
  .ob4-tile-badge{width:18px;height:18px;top:8px;right:8px}
  .ob4-yn-b{padding:12px;column-gap:10px}
  .ob4-yn-t{font-size:14px}
  .ob4-info{padding:12px 13px;gap:10px;font-size:12px;border-radius:15px}
}
@media (prefers-reduced-motion:reduce){
  .ob4-tile,.ob4-yn-b,.ob4-tile-badge{transition:none}
}



/* ═══ HOME DASHBOARD ═══
   Presentation only. Section order changed and the exercise list collapsed to a
   nav row; every data-* attribute, #home-day / #home-exlist / .strip and the
   hero's Start/Resume/Complete states are untouched. */

/* ── header: greeting block + avatar ── */
/* The art layer is sized by the header box, so the header needs real banner
   height: at 91px tall, object-fit:cover showed only ~43% of a 4:3 photo — the
   head and nothing else. min-height gives the figure room, and the extra bottom
   padding is the runway the fade needs so the image dissolves rather than ending
   on a hard edge. */
.fq-head--home.hdash{display:block;padding:4px 20px 28px;min-height:162px;background:linear-gradient(180deg,#070B10 0%,#07090C 100%)}
.hdash-l{min-width:0}
.hdash-greet{font-size:13px;font-weight:700;color:#95A3B2;line-height:1.2}
.hdash-name{font-size:clamp(25px,7.2vw,31px);font-weight:850;letter-spacing:-.035em;
  color:#F7FAFD;line-height:1.05;margin:2px 0 5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdash-tag{font-size:12px;font-weight:600;color:#95A3B2;line-height:1.35}

/* ── weekly goal card (nav + strip merged) ── */
.hweek{margin:0 20px 10px;padding:13px 13px 11px;background:linear-gradient(180deg,#111820,#0C1117);border-color:#25313C;box-shadow:0 16px 36px -30px rgba(0,0,0,.95)}
.hweek-head{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.hweek-lab{font-size:13.5px;font-weight:850;color:var(--ds-text);letter-spacing:-.01em;line-height:1.12;min-width:0}
.hweek-lab small{display:block;font-size:11px;font-weight:650;color:#94A2B1;margin-top:2px}
.hweek-prog{margin-left:auto;font-size:11px;font-weight:800;color:var(--fq-brand-ink);
  white-space:nowrap}
.hweek-arw,.hweek-now{flex:none;width:30px;height:30px;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;background:#10161D;
  border:1px solid #283442;color:#A8B6C5}
.hweek-arw svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.hweek-arw:disabled{opacity:.35}
.hweek-now{width:auto;padding:0 11px;font-family:var(--f);font-size:11px;font-weight:800;
  color:var(--fq-brand-ink)}
.hweek .strip{margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}

/* ── compact workout footer attached to the hero shell ── */
.hview{display:flex;align-items:center;gap:10px;width:100%;margin:0;
  padding:10px 13px;cursor:pointer;text-align:left;
  background:linear-gradient(180deg,#101720,#0C1218);
  border:0;border-top:1px solid #25313C;border-radius:0;
  box-shadow:none;
  transition:border-color .16s ease}
.hview:active{border-color:color-mix(in srgb,var(--fq-brand) 55%,var(--ds-border))}
.hview-b{display:flex;flex-direction:row;align-items:baseline;gap:7px;min-width:0;flex:1}
.hview-t{flex:none;font-size:13.5px;font-weight:850;color:#F2F7FC;letter-spacing:-.012em}
.hview-s{font-size:11px;font-weight:650;color:#8F9EAD;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hview-c{flex:none;width:15px;height:15px;fill:none;stroke:var(--fq-brand-ink);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6}

@media (max-width:360px){
  /* keep the app-wide 20px gutter — .fqh/.fqins/.fqw/.fqstats all use it, so
     narrowing only these two cards misaligned them against the rest of Home */
  .fq-head--home.hdash{padding:4px 20px 25px;min-height:154px}
  .hweek{padding:12px 12px 10px}
  .hweek-lab{font-size:13px}
  .hweek-prog{font-size:11px}
  .hview{padding:10px 12px}
  .hview-b{gap:5px}
  .hview-t{font-size:13px}
  .hview-s{font-size:10.5px}
}


/* ═══ HOME · HEADER HERO IMAGE ═══
   The art sits in its own absolutely-positioned layer behind the greeting. It is
   right-weighted and masked so it dissolves into the background before it reaches
   the text, and it is clipped to the header so it can never cause sideways scroll
   or sit under the avatar. A missing file leaves the plain dark header — no shift. */
.fq-head--home.hdash{position:relative;overflow:hidden;isolation:isolate}
.hdash-art{position:absolute;inset:0 0 0 auto;width:72%;max-width:340px;
  z-index:-1;pointer-events:none}
.hdash-art .fq-media,.hdash-media{position:absolute;inset:0;width:100%;height:100%;
  border-radius:0;background:none}
.hdash-art img{width:100%;height:100%;object-fit:cover;object-position:72% 16%;
  display:block;opacity:.64;
  /* Three masks, intersected:
       • fade LEFT   so the greeting always sits on near-black
       • fade TOP    so nothing hardens under the status bar
       • fade BOTTOM so the banner dissolves into the background instead of
         stopping on a straight cut above the week card */
  -webkit-mask-image:linear-gradient(to left,#000 22%,transparent 94%),
                     linear-gradient(to bottom,transparent 0,#000 12%),
                     linear-gradient(to top,transparent 0,#000 40%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to left,#000 22%,transparent 94%),
                     linear-gradient(to bottom,transparent 0,#000 12%),
                     linear-gradient(to top,transparent 0,#000 40%);
          mask-composite:intersect}
/* the dark wash that guarantees text contrast regardless of the photo */
.hdash-art::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to right,#07090C 0%,
      color-mix(in srgb,#07090C 78%,transparent) 45%, transparent 80%),
    linear-gradient(to top,#07090C 0%,transparent 32%),
    linear-gradient(120deg,transparent 48%,color-mix(in srgb,var(--fq-brand) 10%,transparent) 100%)}
/* placeholder state: no photo yet -> show nothing rather than a grey block */
.hdash-art .fq-media--placeholder{background:none;border:none}
.hdash-art .fq-media__ph{display:none}
/* text and avatar must always win over the art */
.hdash-l{position:relative;z-index:1}
.hdash-name,.hdash-greet,.hdash-tag{text-shadow:0 1px 10px rgba(0,0,0,.58)}

@media (max-width:360px){
  /* narrower art so the name never overlaps the subject at 320px */
  .hdash-art{width:62%}
  .hdash-art img{object-position:78% 16%;opacity:.62}
}
@media (min-width:430px){
  .hdash-art{width:66%}
}


/* ═══ HOME · actionable FormIQ Insights ═══
   The card becomes a <button> only when coach() attached a destination. The
   non-actionable "No insights yet" state stays a <div> with no chevron. Text is
   capped by the existing 2-line clamp, so the JS character clip (which produced
   "Dehydration c…") is gone and the copy is untouched. */
.fqins--go{position:relative;display:block;width:calc(100% - 40px);
  text-align:left;cursor:pointer;font-family:var(--f);
  border:1px solid #25313C;
  padding-right:38px;                 /* runway for the chevron */
  transition:border-color .16s ease,transform .1s ease}
.fqins--go:active{transform:scale(.995);
  border-color:color-mix(in srgb,var(--fq-brand) 55%,var(--ds-border))}
.fqins--go:focus-visible{outline:2px solid var(--fq-brand-ink);outline-offset:3px}
.fqins-c{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;fill:none;stroke:var(--fq-brand-ink);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.55;
  transition:opacity .16s ease,transform .16s ease}
.fqins--go:active .fqins-c{opacity:.95;transform:translateY(-50%) translateX(1px)}
/* the clamped paragraphs must not inherit the button's centring or colour */
.fqins--go .fqins-lead,.fqins--go .fqins-sub{text-align:left}
@media (max-width:360px){
  .fqins--go{width:calc(100% - 40px);padding-right:34px}
  .fqins-c{right:12px;width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){
  .fqins--go,.fqins-c{transition:none}
}


/* ═══ WORKOUT TAB ═══
   Presentation only. Handlers (data-hubtoday / data-hubresume / data-start /
   id="quick") and all player, logging, superset, progression and rest logic are
   untouched. Shares Home's card language: same gradient, border, shadow, cyan. */
.wko-head{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;
  padding-bottom:0;margin-bottom:9px}
.wko-head .fq-title{font-size:27px;letter-spacing:-.025em}
.wko-sub{font-size:11.5px;line-height:1.3;color:#8795A4;margin:0;font-weight:650}
.fq-hub{padding:0 20px 18px}
.fq-hub .fq-hub-sec{margin-top:14px;margin-bottom:0}
.fq-hub .fq-hub-sec>.fq-label{margin:0 1px 7px;color:#8EA0B1;font-size:10.5px;letter-spacing:.075em}

/* active session: clear but secondary */
.fq-hub-resume{position:relative;margin:0 0 12px;padding:12px 13px;border-radius:16px;
  background:linear-gradient(180deg,#101821,#0C1218);border-color:#263544;
  box-shadow:0 14px 30px -28px rgba(0,0,0,.95);overflow:hidden}
.fq-hub-resume::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--fq-brand-grad)}
.fq-hub-resume .fq-hub-ic{width:36px;height:36px;border-radius:12px;
  background:color-mix(in srgb,var(--fq-brand) 18%,#101820)}
.fq-hub-resume .fq-hub-ic svg{width:16px;height:16px}
.fq-hub-resume .fq-label{font-size:9.5px;letter-spacing:.08em}
.fq-hub-resume .fq-card-title{font-size:15px}
.fq-hub-resume .fq-small{font-size:11.5px;color:#91A0AE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fq-hub-resume .fq-hub-chev{font-size:22px;color:var(--fq-brand-ink);opacity:.75}

/* ── hero ── */
.wko-hero{margin:0}
.wko-hero-media{aspect-ratio:4/3.05;min-height:272px;width:100%;max-width:100%;
  border-radius:21px;background:linear-gradient(160deg,#132033,#0B1119 58%,#070B10);
  border:1px solid #263645;box-shadow:0 24px 54px -34px rgba(0,0,0,.98);
  isolation:isolate}
.wko-hero-media img{object-position:72% 40%}
.wko-hero-media.fq-media--overlay::after{background:
  linear-gradient(180deg,rgba(3,7,12,.28) 0%,rgba(4,8,13,.06) 28%,rgba(3,7,12,.72) 70%,rgba(3,6,10,.96) 100%),
  radial-gradient(105% 78% at 50% 110%,color-mix(in srgb,var(--fq-brand) 28%,transparent),transparent 70%)}
.wko-hero-media::before{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;
  background:radial-gradient(120% 80% at 50% 118%,color-mix(in srgb,var(--fq-brand) 24%,transparent),transparent 68%);
  z-index:1;pointer-events:none}
.wko-hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:18px;height:100%;justify-content:flex-end;min-width:0}
.wko-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;
  background:rgba(5,11,18,.48);backdrop-filter:blur(5px);
  border:1px solid color-mix(in srgb,var(--fq-brand) 34%,rgba(255,255,255,.1));
  color:rgba(245,250,255,.84);font-size:9px;font-weight:800;letter-spacing:.065em;white-space:nowrap}
.wko-chip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round}
.wko-name{font-size:clamp(29px,8.2vw,36px);font-weight:900;font-style:italic;letter-spacing:-.035em;
  line-height:1.02;color:#fff;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.72);
  overflow-wrap:anywhere}
.wko-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;font-weight:750;color:rgba(255,255,255,.88)}
.wko-meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.wko-meta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.wko-meta i{width:1px;height:12px;background:rgba(255,255,255,.28);flex:none}
.wko-blurb{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.82);margin:0;max-width:34ch}
.wko-cta{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:48px;margin:7px 0 0;padding:0 16px;border-radius:999px;font-size:15px;font-weight:850;
  background:linear-gradient(100deg,#006EEB,#0A9CFA 58%,#22B9FF);
  box-shadow:0 14px 28px -16px var(--fq-brand), inset 0 1px 0 rgba(255,255,255,.18)}
.wko-cta svg{width:16px;height:16px;fill:#fff;flex:none}
.wko-done{display:flex;align-items:center;gap:11px;width:100%;margin-top:5px;
  padding:12px 14px;border-radius:15px;
  background:linear-gradient(100deg,color-mix(in srgb,#19c37d 22%,rgba(0,0,0,.55)),rgba(5,12,18,.62));
  border:1px solid color-mix(in srgb,#19c37d 48%,transparent)}
.wko-done svg{width:19px;height:19px;flex:none;fill:none;stroke:#37e59b;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.wko-done span{display:flex;flex-direction:column;gap:1px;min-width:0}
.wko-done b{font-size:14px;font-weight:850;color:#fff}
.wko-done small{font-size:11.5px;color:rgba(255,255,255,.72)}

/* ── genuine rest state (no session today or later this week) ── */
.wko-rest{display:flex;align-items:center;gap:14px;margin:0;padding:17px 15px;border-radius:18px;
  background:linear-gradient(140deg,#111A23,#0B1117 70%);border-color:#273747;
  box-shadow:0 16px 36px -30px rgba(0,0,0,.95)}
.wko-rest-ic{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(145deg,color-mix(in srgb,var(--fq-brand) 24%,#101821),#0E151D);
  color:var(--fq-brand-ink);border:1px solid color-mix(in srgb,var(--fq-brand) 32%,transparent)}
.wko-rest-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.wko-rest-b{min-width:0}
.wko-rest .fq-card-title{font-size:17px;font-weight:850}
.wko-rest .fq-small{font-size:12px;line-height:1.35;color:#93A2B1}

/* ── this week ── */
.wko-wk-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.wko-wk-h .fq-label{margin:0;color:#8EA0B1;font-size:10.5px;letter-spacing:.075em}
.wko-viewall{background:#101821;border:1px solid #273645;border-radius:999px;cursor:pointer;
  padding:6px 10px;font-family:var(--f);font-size:11.5px;font-weight:800;color:var(--fq-brand-ink);
  line-height:1}
.wko-week{margin:0;padding:2px 0;overflow:hidden;border-radius:16px;background:linear-gradient(180deg,#101720,#0B1117);
  border-color:#253341;box-shadow:none}
.wko-row{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;gap:9px;width:100%;min-height:44px;padding:10px 12px;cursor:pointer;
  background:none;border:none;text-align:left;font-family:var(--f);
  transition:background .15s ease}
.wko-row:not(:last-child)::after{content:'';position:absolute;left:12px;right:12px;bottom:0;
  height:1px;background:color-mix(in srgb,var(--ds-border) 82%,transparent)}
.wko-row:active{background:color-mix(in srgb,var(--fq-brand) 7%,transparent)}
.wko-row-day{font-size:11.5px;font-weight:850;color:#8B9AA8;text-transform:uppercase;letter-spacing:.035em}
.wko-row-name{font-size:14px;font-weight:750;color:#E8F0F7;letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wko-row-st{flex:none;display:grid;place-items:center}
/* today: cyan wash + badge */
.wko-row.is-today{background:linear-gradient(90deg,color-mix(in srgb,var(--fq-brand) 15%,transparent),transparent 74%)}
.wko-row.is-today::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--fq-brand-grad)}
.wko-row.is-today .wko-row-day,.wko-row.is-today .wko-row-name{color:#fff}
.wko-badge{display:inline-block;padding:4px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--fq-brand) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--fq-brand) 55%,transparent);
  color:var(--fq-brand-ink);font-size:9.5px;font-weight:850;letter-spacing:.065em;
  white-space:nowrap}
/* completed: green tick */
.wko-tick{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,#19c37d 18%,transparent);
  border:1px solid color-mix(in srgb,#19c37d 50%,transparent)}
.wko-tick svg{width:13px;height:13px;fill:none;stroke:#37e59b;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.wko-row.is-done{background:linear-gradient(90deg,color-mix(in srgb,#19c37d 6%,transparent),transparent 70%)}
.wko-row.is-done .wko-row-day,.wko-row.is-done .wko-row-name{color:#8F9EAD}
/* upcoming: status dot, deliberately quieter than an interactive control */
.wko-dot{width:6px;height:6px;border-radius:50%;border:0;display:block;margin:0 7px;
  background:#394755;opacity:.7}

/* ── custom workout ── */
.wko-custom{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:12px;margin:0;padding:13px;cursor:pointer;text-align:left;border-radius:16px;
  background:linear-gradient(180deg,#0F161E,#0B1117);border-color:#273341;
  font-family:var(--f);transition:border-color .16s ease,background .16s ease}
.wko-custom:active{border-color:color-mix(in srgb,var(--fq-brand) 55%,var(--ds-border));
  background:linear-gradient(180deg,#121B24,#0C131A)}
.wko-custom-ic{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--fq-brand) 12%,#101821);color:var(--fq-brand-ink);
  border:1px solid color-mix(in srgb,var(--fq-brand) 24%,transparent)}
.wko-custom-ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.wko-custom-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.wko-custom .fq-card-title{font-size:15px;font-weight:850}
.wko-custom .fq-small{font-size:11.5px;line-height:1.32;color:#8F9EAD}
.wko-custom-go{flex:none;display:inline-flex;align-items:center;gap:3px;border-radius:999px;
  background:color-mix(in srgb,var(--fq-brand) 10%,transparent);border:1px solid color-mix(in srgb,var(--fq-brand) 24%,transparent);
  padding:6px 9px;font-size:10.5px;font-weight:850;letter-spacing:.06em;color:var(--fq-brand-ink)}
.wko-custom-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* Keep the Workout footer action clear of the last card without changing KAI elsewhere. */
#main:has(.fq-hub) #kai-fab{right:8px;bottom:calc(100% + 6px)}

@media (max-width:360px){
  .fq-hub{padding-left:20px;padding-right:20px}
  .wko-hero{margin:0}
  .wko-hero-media{min-height:248px;border-radius:19px}
  .wko-hero-in{padding:14px 14px 13px;gap:8px}
  .wko-name{font-size:27px}
  .wko-meta{font-size:12px;gap:8px}
  .wko-cta{height:46px;font-size:14.5px}
  .wko-row{grid-template-columns:38px minmax(0,1fr) auto;padding:10px 11px;gap:8px}
  .wko-row-name{font-size:13.5px}
  .wko-badge{padding:4px 8px;font-size:9px}
  .wko-custom{padding:12px;gap:10px}
  .wko-custom-ic{width:38px;height:38px;border-radius:13px}
  .wko-custom-go{font-size:10px;padding:6px 8px}
  .wko-rest{padding:15px 13px}
}
@media (prefers-reduced-motion:reduce){
  .wko-row,.wko-custom,.fq-hub-resume{transition:none}
}


/* ═══ ACTIVE PLAYER ═══
   Presentation only. p-ok logging, nextStep()/advance() traversal, steppers
   (data-stp), Back (p-back), pause (p-pause), list mode (p-mode-b), rest overlay,
   supersets and progression are all untouched. */

/* ── top status bar ── */
.pbar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;
  gap:9px;padding:10px 14px}
.pbar-pi{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--ds-border);cursor:pointer;
  color:var(--fq-brand-ink)}
.pbar-pi svg{width:15px;height:15px;fill:currentColor;stroke:none}

/* ── logger: the reps/weight block reported scrollWidth > clientWidth at every
   width because the halves and steppers had no min-width:0 and the inputs could
   not shrink. Constrain them so the controls stay usable at 320px. ── */
.logger{display:flex;align-items:stretch;gap:0;min-width:0}
.logger .lg-half{flex:1 1 0;min-width:0}
.logger .lg-row{display:flex;align-items:center;gap:6px;min-width:0}
/* the stepper icon needed 36px inside a 28px button (8px overflow that cascaded
   up through .lg-row and .lg-half), so pin the box and shrink the glyph to fit */
.logger .lg-stp{flex:0 0 auto;width:32px;height:32px;padding:0;
  display:grid;place-items:center;box-sizing:border-box;overflow:hidden}
.logger .lg-stp svg{width:15px;height:15px;display:block}
.logger .lg-val{flex:1 1 auto;min-width:0;width:100%}
.pbar-x,.pbar-vid{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--ds-border);cursor:pointer;
  color:var(--fq-brand-ink)}
.pbar-x svg,.pbar-vid svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.pbar-clock{flex:none;background:none;border:none;padding:0 2px;cursor:pointer}
.pbar-clock .t{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.pbar-prog{display:flex;align-items:center;gap:10px;min-width:0}
.pbar-bar{flex:1;min-width:0;height:4px;border-radius:99px;background:rgba(255,255,255,.14);
  overflow:hidden}
.pbar-bar i{display:block;height:100%;border-radius:99px;background:var(--fq-brand-grad);
  transition:width .3s ease}
.pbar-cnt{flex:none;font-size:13.5px;font-weight:800;color:var(--fq-brand-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── hero: neutral anatomy + overlay ── */
.pmedia{position:relative;overflow:hidden}
.anatwrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.anatwrap svg{max-height:100%;width:auto}
.anatwrap.is-under{opacity:0}           /* real movement art loaded: hide the diagram */
.shot--neutral{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.phero-in{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:10px;justify-content:flex-end;
  min-height:262px;padding:14px 16px 16px;
  background:linear-gradient(to top,rgba(4,7,11,.94) 0%,rgba(4,7,11,.72) 34%,transparent 72%)}
.phero-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--fq-brand) 22%,rgba(0,0,0,.5));
  border:1px solid color-mix(in srgb,var(--fq-brand) 50%,transparent);
  color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.07em;white-space:nowrap}
.phero-chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.phero-b{min-width:0;width:100%}
.phero-name{font-size:clamp(24px,7vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.08;
  color:#fff;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.7);overflow-wrap:anywhere}
.phero-cue{font-size:13px;line-height:1.45;color:rgba(255,255,255,.82);margin:5px 0 0;max-width:38ch}
/* The info button was absolutely positioned at top:12px/right:14px, which put it
   UNDER the top bar overlapping the list-mode button — two circles stacked. It now
   sits inline at the end of the hero's bottom row, clear of the bar entirely. */
.phero-i{position:absolute;right:16px;bottom:16px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(180deg,#171C23,#0C1015);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 4px 12px -4px rgba(0,0,0,.8);
  color:#fff;font-family:var(--f);font-size:13.5px;font-weight:800;font-style:italic}
.phero-i:active{border-color:var(--fq-brand-ink);transform:scale(.94)}
/* keep the cue clear of it */
.phero-cue{padding-right:44px}
.pmedia-cap{display:none}                /* the cue in the hero replaces it */

/* ── prescription + set cards ── */
.pbody{padding-bottom:6px}
.pmeta{font-size:12px;font-weight:600;color:var(--ds-text-3);margin:14px 20px 0}
.phr{display:none}

@media (max-width:360px){
  .pbar{padding:9px 12px;gap:8px}
  .pbar-x,.pbar-vid{width:34px;height:34px}
  .pbar-clock .t{font-size:19px}
  .pbar-cnt{font-size:12.5px}
  .phero-in{min-height:240px;padding:12px 14px 14px}
  .phero-name{font-size:22px}
  .phero-cue{font-size:12.5px}
  .logger .lg-stp{width:30px;height:30px}
  .logger .lg-stp svg{width:14px;height:14px}
}
@media (prefers-reduced-motion:reduce){ .pbar-bar i{transition:none} }


/* ═══ PLAYER TOP BAR — contrast pass (visual only) ═══
   The bar is absolutely positioned over .pmedia, whose background is a bright
   per-exercise gradient set inline by drawPlayer(). The controls used
   rgba(255,255,255,.08), which washed out against it and stopped reading as
   buttons. Fixed with dark charcoal fills, real borders, bright icons and a scrim
   behind the whole bar. Handlers, ids, timer, pause and progression are untouched. */

/* scrim: guarantees contrast whatever colour the exercise gradient happens to be */
.pmedia::before{content:'';position:absolute;top:0;left:0;right:0;
  height:calc(78px + env(safe-area-inset-top));z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,rgba(4,7,11,.86) 0%,rgba(4,7,11,.55) 58%,transparent 100%)}

/* Five grid items in DOM order: close · clock · pause-icon · progress · list-mode.
   The flexible column must be the FOURTH (progress); when the pause-icon button was
   added it shifted the columns and 1fr landed on that icon, leaving the progress
   track sized `auto` — it collapsed to 0px wide and the bar vanished. */
.pbar{position:absolute;top:calc(10px + env(safe-area-inset-top));left:14px;right:14px;z-index:4;
  display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:0}

/* every circular control shares one treatment */
.pbar-x,.pbar-vid,.pbar-pi{flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(180deg,#171C23,#0C1015);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09);
  transition:border-color .15s ease,box-shadow .15s ease,transform .1s ease}
.pbar-x svg,.pbar-vid svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round}
.pbar-pi svg{width:15px;height:15px;fill:var(--fq-brand-ink);stroke:none}
.pbar-vid svg{stroke:var(--fq-brand-ink)}
/* pressed / active: cyan glow, still obviously a button at rest */
.pbar-x:active,.pbar-vid:active,.pbar-pi:active{transform:scale(.94);
  border-color:var(--fq-brand-ink);
  box-shadow:0 0 0 1px var(--fq-brand-ink),
             0 0 18px -4px color-mix(in srgb,var(--fq-brand) 80%,transparent)}
.pbar-vid.on{border-color:var(--fq-brand-ink);
  box-shadow:0 0 0 1px var(--fq-brand-ink),
             0 0 16px -5px color-mix(in srgb,var(--fq-brand) 70%,transparent)}

/* elapsed timer: dark pill so the digits never sit on a light gradient */
.pbar-clock{flex:none;display:grid;place-items:center;cursor:pointer;
  padding:0 12px;height:38px;border-radius:999px;
  background:linear-gradient(180deg,#171C23,#0C1015);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09)}
.pbar-clock .t{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.pbar-clock:active{transform:scale(.97);border-color:var(--fq-brand-ink)}

/* progress: brighter track, cyan fill with a faint glow, high-contrast count */
.pbar-prog{display:flex;align-items:center;gap:10px;min-width:0}
.pbar-bar{flex:1;min-width:0;height:5px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.pbar-bar i{display:block;height:100%;border-radius:99px;background:var(--fq-brand-grad);
  box-shadow:0 0 10px -2px var(--fq-brand);transition:width .3s ease}
.pbar-cnt{flex:none;font-size:13.5px;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.75)}

/* the hero overlay must clear the taller bar */
.phero-in{padding-top:calc(58px + env(safe-area-inset-top))}

@media (max-width:360px){
  .pbar{left:12px;right:12px;gap:7px}
  .pbar-x,.pbar-vid,.pbar-pi{width:34px;height:34px}
  .pbar-x svg,.pbar-vid svg{width:15px;height:15px}
  .pbar-clock{height:34px;padding:0 10px}
  .pbar-clock .t{font-size:16.5px}
  .pbar-cnt{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .pbar-x,.pbar-vid,.pbar-pi,.pbar-clock,.pbar-bar i{transition:none}
}


/* ═══ EXERCISE INFO SHEET — neutral anatomy hero ═══
   Visual only. Sheet content, history, progression, media attach/remove/save,
   navigation and every caller are unchanged. */

/* Anatomy variant: bodySVG is 200×185 (two half-figures, ≈1.08:1), so the 16:10
   photo box would letterbox it badly. Give it a matching ratio and centre it; the
   SVG keeps height:auto so it is never stretched. */
.xd-media--anat{aspect-ratio:200 / 168;position:relative;box-sizing:border-box}
/* The wrapper needs a DEFINITE box: height:100% on the svg was resolving against
   a content-sized parent (a circular dependency), so it computed to auto and the
   figure overflowed. Absolute inset gives a definite height, and the svg's own
   viewBox + preserveAspectRatio then fits it inside without stretching. */
.xd-anat{position:absolute;inset:10px 8px;z-index:1;
  display:grid;place-items:center}
/* bodySVG() hardcodes an INLINE style="width:100%;height:auto", which beats a
   stylesheet rule — so at 390px the figure computed taller than the box and was
   silently clipped by overflow:hidden (feet cut off). Overriding both dimensions
   lets the SVG's own viewBox + default preserveAspectRatio="xMidYMid meet" fit it
   inside without stretching. */
.xd-anat svg{width:100% !important;height:100% !important;display:block}
/* optional neutral per-exercise art sits over the diagram only once it loads */
.xd-neutral{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;z-index:2;display:block}
.xd-media--anat.has-art .xd-anat{opacity:0}
/* the watermark is only a last resort — hide it whenever anatomy is drawn */
.xd-media--anat .xd-ph{display:none}
.xd-media--anat.noimg .xd-ph{display:grid}

@media (max-width:360px){
  .xd-media--anat{aspect-ratio:200 / 176}
  .xd-anat{inset:8px 6px}
}


/* ═══ WORKOUT PLAYER · PHASE 1 ════════════════════════════════════════════
   CSS-only presentation layer. Every selector is contained by #play, #rest,
   or #done; IDs, data hooks, runtime widths and player state stay untouched. */

/* ── shell + compact session status ── */
#play{background:#05080C;color:#F4F8FC}
#play .pmedia{height:clamp(172px,23vh,202px);min-height:172px;
  background-color:#08101A;border-bottom:1px solid #1C2A37}
#play .pmedia:not(.has-photo){height:clamp(172px,23vh,202px)}
#play .pmedia::after{background:
  linear-gradient(180deg,rgba(3,7,12,.28) 0%,rgba(3,7,12,.08) 32%,rgba(3,7,12,.96) 100%)}
#play .pmedia::before{height:calc(66px + env(safe-area-inset-top));
  background:linear-gradient(to bottom,rgba(3,7,12,.88),rgba(3,7,12,.42) 68%,transparent)}
#play .pbar{top:calc(8px + env(safe-area-inset-top));left:12px;right:12px;gap:7px}
#play .pbar-x,#play .pbar-pi,#play .pbar-vid{width:34px;height:34px;
  background:rgba(6,12,19,.86);border-color:rgba(255,255,255,.13);box-shadow:none}
#play .pbar-x svg,#play .pbar-vid svg{width:15px;height:15px}
#play .pbar-pi svg{width:13px;height:13px}
#play .pbar-clock{height:34px;padding:0 9px;background:rgba(6,12,19,.86);
  border-color:rgba(255,255,255,.13);box-shadow:none}
#play .pbar-clock .t{font-size:15.5px;font-weight:800;letter-spacing:0}
#play .pbar-prog{gap:7px}
#play .pbar-bar{height:4px;background:rgba(255,255,255,.16);box-shadow:none}
#play .pbar-bar i{background:linear-gradient(90deg,#087EED,#22B9FF);box-shadow:none}
#play .pbar-cnt{font-size:11.5px;color:rgba(255,255,255,.78);text-shadow:none}

/* ── exercise media + hierarchy ── */
#play .anatwrap{inset:40px 8px 0;opacity:.72}
#play .shot--neutral{object-fit:contain;opacity:.84}
#play .phero-in{height:100%;min-height:0;z-index:3;padding:calc(48px + env(safe-area-inset-top)) 52px 14px 16px;
  gap:5px;justify-content:flex-end;background:
  linear-gradient(to top,rgba(4,8,13,1) 0%,rgba(4,8,13,.88) 45%,rgba(4,8,13,.14) 86%)}
#play .phero-chip{gap:5px;padding:4px 8px;background:rgba(5,12,19,.68);
  border-color:rgba(56,183,255,.35);font-size:9px;letter-spacing:.06em}
#play .phero-chip svg{width:11px;height:11px}
#play .phero-name{font-size:clamp(25px,7.2vw,32px);font-weight:900;font-style:italic;
  line-height:1.02;letter-spacing:-.03em;color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.95),0 6px 20px rgba(0,0,0,.82)}
#play .phero-cue{max-width:40ch;margin-top:3px;padding-right:0;font-size:11.5px;
  line-height:1.32;color:rgba(255,255,255,.9);text-shadow:0 1px 5px rgba(0,0,0,.95);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#play .phero-i{right:14px;bottom:14px;width:30px;height:30px;background:rgba(7,14,22,.9);
  border-color:rgba(255,255,255,.15);box-shadow:none}

/* ── current exercise + coaching ── */
#play .pbody{background:#070B10;border-radius:16px 16px 0 0;margin-top:-10px;
  padding:12px 16px 18px;box-shadow:0 -1px 0 #20303E}
#play .pxh{margin:0 0 7px;padding:7px 9px;border-radius:9px;background:#0D141C;
  border-color:#22313E;gap:7px}
#play .pxh-b{gap:0}
#play .pxh-n{display:none}
#play .pxh-m{font-size:10px;line-height:1.15;color:#8D9BAA}
#play .pxh-a{margin-top:1px;font-size:10px;line-height:1.15;color:#58C4FF}
#play .pxh-c{width:25px;height:25px;background:#101F2C}
#play .pmeta{margin:0 0 9px;font-size:10.5px;font-weight:750;letter-spacing:.035em;
  text-transform:uppercase;color:#8291A0}
#play .pprog{margin:0 0 10px;padding:9px 10px;border:1px solid #223342;
  border-left:3px solid #168FF2;border-radius:0 9px 9px 0;background:#0B131B}
#play .pprog .pp-line{align-items:center;gap:6px 12px}
#play .pprog .pp-lead{gap:0}
#play .pprog .pp-lbl{font-size:9px;color:#69C9FF}
#play .pprog .pp-val{font-size:18px;font-weight:900;color:#F5F9FD}
#play .pprog .pp-guide{font-size:11.5px;line-height:1.3;color:#98A7B5;max-width:24ch}
#play .adwhy{margin:0 0 9px;padding:8px 10px;border-radius:9px;font-size:11.5px;
  background:#0B1721;border-color:#21445D;color:#ABC0D1}
#play .padj{margin:0 0 8px;padding:9px 10px;border-radius:10px;background:transparent;
  border-color:#243440;color:#9FAEBC;font-size:12px}
#play .prev-banner{margin-bottom:9px;padding:10px;border-radius:10px;background:#17150F;
  border-color:#514328}
#play.is-reviewing #p-media{filter:none}
#play.is-reviewing #p-media::after{background:
  linear-gradient(180deg,rgba(3,7,12,.34) 0%,rgba(3,7,12,.14) 32%,rgba(3,7,12,.96) 100%)}

/* ── superset pairing ── */
#play .ssflat{margin:0 0 10px;padding:10px 11px;border:1px solid #244058;
  border-left:3px solid #168FF2;border-radius:10px;background:#0A131C}
#play .ssf-h{margin-bottom:7px;font-size:9.5px;color:#7FCFFF}
#play .ssf-row{min-height:31px;padding:3px 0;gap:9px}
#play .ssf-code{width:29px;height:23px;border-radius:6px;display:grid;place-items:center;
  background:#131E29;font-size:11px;color:#82909D}
#play .ssf-row.cur .ssf-code{background:#087EEB;color:#fff}
#play .ssf-nm{font-size:13px}
#play .ssf-cur,#play .ssf-next{font-size:9px}
#play .ssflat+*{border-top:0;padding-top:0}

/* ── set logger + history ── */
#play .cklist{gap:7px;margin-top:8px}
#play .ckrow{border-radius:11px;border-color:#202E3A;background:#0B1118;overflow:hidden}
#play .ckrow.is-current{position:relative;padding:11px;background:
  linear-gradient(110deg,rgba(8,126,235,.14),#0D151D 42%);border-color:#267AB8;
  box-shadow:inset 3px 0 0 #168FF2}
#play .ck-head{margin-bottom:9px}
#play .ckrow.is-current .ck-lbl{font-size:14px}
#play .ck-now{color:#78D0FF;font-size:9px}
#play .ck-mark{width:23px;height:23px;background:#111B25;border-color:#30404E;font-size:10.5px}
#play .ck-mark.cur{background:#087EEB;color:#fff;border-color:#42B7FF}
#play .ckrow.is-done{padding:9px 11px;background:rgba(17,116,79,.07);border-color:#1B3A30}
#play .ckrow.is-done .ck-lbl{font-size:12.5px;color:#82968E}
#play .ck-val{font-size:12.5px;color:#B9C9C2}
#play .ck-edit{font-size:11px;color:#62CAA2}
#play .ckrow.is-todo{padding:9px 11px;background:#080D12;border-color:#18232D;opacity:.58}
#play .ckrow.is-todo .ck-lbl,#play .ck-todo{font-size:11.5px}
#play .ckrow.is-current .logger{padding:12px 3px 10px;background:#091019;
  border-color:#263B4C;border-radius:10px}
#play .logger .lg-half{gap:8px;padding:0 3px}
#play .logger .lg-lbl{font-size:9.5px;color:#8998A7}
#play .logger .lg-row{gap:4px}
#play .logger .lg-stp{width:38px;height:38px;border-radius:10px;background:#14202B;
  border-color:#344555;color:#DDE9F3;overflow:visible}
#play .logger .lg-stp svg{width:17px;height:17px}
#play .logger .lg-stp:active{background:#087EEB;color:#fff;border-color:#54C2FF}
#play .logger .lg-val{font-size:clamp(23px,7vw,30px);font-weight:900;letter-spacing:0}
#play .logger .lg-unit{font-size:9.5px;color:#81909E}
#play .lg-div{background:#263644;margin:3px 0}
#play .ck-log{min-height:47px;margin-top:9px;border-radius:10px;background:
  linear-gradient(100deg,#0675E5,#0A9CFA 60%,#24B9FF);color:#fff;font-size:14px;
  font-weight:900;box-shadow:0 10px 24px -18px #159EF6}
#play .lg-half--timer .ht-go{background:#087EEB;color:#fff}

/* ── up next + footer navigation ── */
#play .upn{min-height:54px;margin-top:9px;padding:10px 1px 2px;gap:10px;
  border-top-color:#1C2934;background:none}
#play .upn-thumb{width:42px;height:42px;border-radius:9px}
#play .upn-k{font-size:9px;color:#61C8FF}
#play .upn-v{font-size:13.5px}
#play .upn-s{font-size:9px}
#play .upn-chev svg{width:18px;height:18px}
#play .pfooter{padding:8px 16px calc(9px + env(safe-area-inset-bottom));
  background:rgba(5,8,12,.97);border-top-color:#1D2A35;box-shadow:0 -10px 28px -24px #000}
#play .pactions{gap:8px}
#play .pnav3 .pnav{width:44px;height:44px;border-radius:10px;background:#0B1219;
  border-color:#263541;color:#94A3B1;opacity:1}
#play .pnav3 .pnav:disabled{opacity:.28}
#play .pov{height:44px;padding:0 10px;border-radius:10px;background:#0E171F;
  border-color:#2A3A47;font-size:12.5px;color:#DCE7F0}
#play .pov svg{width:15px;height:15px}

/* ── rest overlay ── */
#rest{background:
  radial-gradient(72% 42% at 50% 24%,rgba(18,69,103,.16),transparent 72%),
  linear-gradient(180deg,#050A10 0%,#03070B 100%);
  padding:18px 20px calc(18px + env(safe-area-inset-bottom))}
#rest .rest-in{max-width:350px}
#rest .rest-ring{width:min(64vw,238px)}
#rest .rest-track{stroke:#14202A;stroke-width:10}
#rest .rest-prog{stroke:#20B7FF;stroke-width:10;filter:none}
#rest .rest-lbl{font-size:10px;color:#7E8E9D}
#rest .rest-time{font-size:clamp(56px,17vw,72px);font-weight:900;color:#F8FBFE;letter-spacing:0}
#rest .rest-guide{margin-top:13px;font-size:12.5px;color:#8C9AA8}
#rest .rest-btns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
#rest .rest-btn{height:54px;border-radius:11px;background:#111A23;border-color:#2B3A47;
  font-size:15px;color:#F0F5F9}
#rest .rest-btn--skip{grid-column:1/-1;height:44px;background:transparent;
  border-color:#263641;color:#AFC0CD;font-size:13px}
#rest .rest-next{margin-top:17px;padding:12px;border:1px solid #243747;border-radius:11px;
  background:#0A121A;gap:11px}
#rest .rn-thumb{width:46px;height:46px;border-radius:9px}
#rest .rn-k{font-size:9px;color:#62C9FF}
#rest .rn-sub{font-size:9px}
#rest .rn-v{font-size:14.5px}
#rest .rn-tgt{font-size:11px}
#rest .rest-links{gap:8px;margin-top:9px}
#rest .rest-link{min-height:40px;padding:8px;border-radius:9px;background:#0B1219;
  border-color:#21303C;font-size:11.5px;color:#93A4B2}

/* ── restrained completion state ── */
#done{background:#05080C;padding:calc(14px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom))}
#done::before{background:linear-gradient(180deg,#07192A 0%,#07101A 28%,#05080C 62%)}
#done::after{background:radial-gradient(70% 28% at 50% 7%,rgba(25,151,241,.2),transparent 72%);pointer-events:none}
#done .x{width:34px;height:34px;background:#0D151D;border-color:#263541;color:#B8C6D2}
#done .mid{flex:none;padding:14px 0 18px}
#done .d-check{position:relative;isolation:isolate;width:64px;height:64px;margin:4px auto 0;background:#071B28;
  border:1px solid #168FF2;box-shadow:0 0 0 5px rgba(22,143,242,.06);animation:none}
#done .d-check::before{content:"";position:absolute;inset:-2px;z-index:-1;border:1px solid rgba(62,190,255,.68);
  border-radius:50%;opacity:0;pointer-events:none}
#done .d-check svg{width:30px;height:30px;stroke:#4CC5FF;stroke-dashoffset:0;animation:none}
#done .d-kicker{margin-top:13px;font-size:10px;color:#63CAFF}
#done h1{margin-top:4px;font-size:30px;text-transform:none;font-style:normal;letter-spacing:0}
#done .sub{margin-top:5px;font-size:12.5px;color:#91A1AF}
#done .pr{margin-top:11px;padding:7px 12px;border-radius:8px;background:#122019;
  border-color:#285B44;color:#62D39D;font-size:11.5px}
#done .dstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 10px}
#done .dstats>div{padding:11px 6px;border-radius:11px;background:#0B1219;border-color:#21303B}
#done .dstats .ic{width:20px;height:20px;margin-bottom:6px;color:#51C4FF}
#done .dstats .ic svg{width:19px;height:19px}
#done .dstats .v{position:relative;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
#done .dstats .v::after{content:none}
#done .dstats .k{font-size:8.5px;color:#7F8E9C}
#done .dcard{padding:11px 12px;border-radius:11px;background:#0B1219;border-color:#21303B}
#done .dcard .k{font-size:9px;color:#7F8F9D}
#done .dcard .v{font-size:15px}
#done .dcard .d{font-size:11.5px;color:#8999A7}
#done #d-xp{padding-top:9px;padding-bottom:9px;background:#080E14!important;border-color:#1B2833!important}
#done #d-xp .v{font-size:14px;color:#C8D3DC}
#done #d-xp .d{font-size:10.5px;color:#748391}
#done #d-xp + .dcard{padding-top:10px;padding-bottom:10px}
#done #d-xp + .dcard .v{margin:2px 0;font-size:14.5px}
#done #d-xp + .dcard .d{margin-top:0;font-size:11px}
#done .psum{margin-bottom:8px;padding:10px 12px}
#done .psh{margin-bottom:2px;font-size:14px;line-height:1.25}
#done .pstally{margin-bottom:5px;font-size:10.5px;line-height:1.3;color:#8EA0AE}
#done .pslist{gap:0}
#done .psrow{gap:8px;padding:6px 0;border-top:1px solid #182631}
#done .psrow:first-child{border-top:0}
#done .psi{width:20px;height:20px;border-radius:6px;background:#10202C;color:#63CAFF;font-size:12px}
#done .psb{min-width:0;flex:1}
#done .psn{font-size:13.5px;font-weight:800;line-height:1.2;color:#F0F5F9}
#done .psd,#done .psnext,#done .pspr{font-size:10.5px;line-height:1.25}
#done .psd{margin-top:1px;color:#7F8F9D}
#done .psnext{margin-top:2px;color:#A8B5C0}
#done .pspr{margin-top:2px}
#done .drow{gap:8px;padding-top:10px}
#done .drow button{height:48px;border-radius:10px;font-size:13px}
#done .drow .share{background:#0C141C;border-color:#263541;color:#B5C4D0}
#done .drow .fin{background:linear-gradient(100deg,#087EEB,#20B7FF);color:#fff}

/* One-shot completion entrance. Metric text stays final in the DOM; the temporary
   data-count layer is presentation-only and is removed after the sequence. */
#done.is-entering::after{animation:done-light 1.15s ease-out both}
#done.is-entering .d-check{animation:done-check .48s cubic-bezier(.2,.9,.25,1.25) both}
#done.is-entering .d-check::before{animation:done-pulse .72s .16s ease-out both}
#done.is-entering .d-check svg{stroke-dashoffset:32;animation:done-draw .48s .16s ease-out forwards}
#done.is-entering .d-kicker,#done.is-entering h1{opacity:0;animation:done-copy .42s ease-out forwards}
#done.is-entering .d-kicker{animation-delay:.28s}
#done.is-entering h1{animation-delay:.36s}
#done.is-entering .dstats>div{opacity:0;animation:done-stat .4s ease-out forwards}
#done.is-entering .dstats>div:nth-child(1){animation-delay:.46s}
#done.is-entering .dstats>div:nth-child(2){animation-delay:.54s}
#done.is-entering .dstats>div:nth-child(3){animation-delay:.62s}
#done.is-entering .dstats .v{color:transparent}
#done.is-entering .dstats .v::after{content:attr(data-count);position:absolute;inset:0;color:#F4F8FC}
@keyframes done-check{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
@keyframes done-draw{to{stroke-dashoffset:0}}
@keyframes done-pulse{0%{opacity:.55;transform:scale(.88)}100%{opacity:0;transform:scale(1.65)}}
@keyframes done-copy{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes done-stat{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes done-light{0%{opacity:0;transform:translateY(-10px) scale(.9)}35%{opacity:1}100%{opacity:1;transform:none}}

@media (max-width:360px){
  #play .pmedia,#play .pmedia:not(.has-photo){height:164px;min-height:164px}
  #play .phero-in{padding-left:13px;padding-right:48px}
  #play .phero-name{font-size:23px}
  #play .phero-cue{font-size:11px}
  #play .pbody{padding-left:13px;padding-right:13px}
  #play .logger .lg-stp{width:35px;height:35px}
  #play .logger .lg-val{font-size:23px}
  #play .pfooter{padding-left:13px;padding-right:13px}
  #rest{padding-left:16px;padding-right:16px}
  #rest .rest-ring{width:min(62vw,218px)}
  #done{padding-left:14px;padding-right:14px}
  #done .dstats{gap:5px}
  #done .dstats>div{padding-left:4px;padding-right:4px}
}
@media (max-height:700px){
  #play .pmedia,#play .pmedia:not(.has-photo){height:150px;min-height:150px}
  #play .phero-cue{display:none}
  #rest .rest-ring{width:min(50vh,205px)}
  #rest .rest-guide{margin-top:8px}
  #rest .rest-btns{margin-top:10px}
  #rest .rest-next{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  #play .pbar-bar i,#play .pbar-x,#play .pbar-pi,#play .pbar-vid,#play .pbar-clock,
  #play .logger .lg-stp,#rest,#rest .rest-prog,#done::after,#done .d-check,#done .d-check::before,
  #done .d-check svg,#done .d-kicker,#done h1,#done .dstats>div{transition:none!important;animation:none!important}
  #done.is-entering .dstats .v{color:#F4F8FC}
  #done.is-entering .dstats .v::after{content:none}
}