/* ============================================================================
   BioProfile — Components. App shell, navigation, buttons, cards, data-viz,
   forms, and the "Now" daily feed. Mobile-first; desktop hover/animation
   enhancements are gated behind (min-width) + (hover:hover) queries.
   ========================================================================== */

/* ===========================================================================
   LOGO LOCKUP
   The signature "dotted analysis ring" mark is drawn in SVG (.bp-ring) so it
   is crisp, recolorable, and can animate during analysis. Wordmark uses the
   brand PNG for fidelity, or Poppins fallback.
   =========================================================================== */
.bp-logo { display:inline-flex; align-items:center; gap:10px; }
.bp-logo img { height:26px; width:auto; }
.bp-logo--sm img { height:22px; }

.bp-ring { width:26px; height:26px; flex:none; color:var(--bp-teal); }
.bp-ring circle { fill:currentColor; }
.bp-ring.is-spinning { animation:bp-ring-spin 2.4s linear infinite; transform-origin:50% 50%; }
@keyframes bp-ring-spin { to { transform:rotate(360deg); } }

/* Wordmark fallback if PNG not used */
.bp-wordmark { font-weight:var(--w-med); font-size:1.15rem; letter-spacing:-.01em; color:var(--bp-teal); }
.bp-wordmark b { font-weight:var(--w-med); color:var(--bp-teal); }
.on-dark .bp-wordmark, .on-dark .bp-ring { color:#fff; }

/* ===========================================================================
   APP SHELL  (topbar + pillar sidebar + content)
   =========================================================================== */
.app { min-height:100dvh; background:var(--paper-2); }

.topbar {
  position:sticky; top:0; z-index:60;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); padding-inline:var(--s-4);
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
/* the thin brand gradient hairline at the very top (from the mockups) */
.topbar::before {
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--bp-lime),var(--bp-olive) 38%,var(--bp-emerald) 68%,var(--bp-teal));
}
.topbar__left { display:flex; align-items:center; gap:var(--s-3); min-width:0; }
.topbar__right { display:flex; align-items:center; gap:var(--s-2); }

.user-chip { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:var(--r-pill); }
/* auth-state toggles: the display rules above/below would beat the UA [hidden] rule */
.user-chip[hidden], .btn[hidden], .user-menu-wrap[hidden], .user-menu[hidden] { display:none; }
.user-chip:hover { background:var(--paper-3); }

/* Minimal account menu: signed-in email + log out, anchored under the chip */
.user-menu-wrap { position:relative; display:inline-flex; }
.user-menu {
  position:absolute; top:calc(100% + 10px); right:0; z-index:70;
  min-width:230px; max-width:300px; padding:14px 16px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-3);
  display:flex; flex-direction:column; align-items:flex-start;
}
.user-menu__email {
  font-weight:var(--w-med); font-size:var(--t-sm); color:var(--ink);
  word-break:break-all; margin:2px 0 12px;
}
.user-chip__name { font-weight:var(--w-med); font-size:var(--t-sm); color:var(--ink); }
.user-chip .avatar { width:34px; height:34px; }
.avatar {
  width:36px; height:36px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--bp-sand); display:grid; place-items:center;
  color:var(--bp-teal); font-weight:var(--w-semi); font-size:.8rem;
  box-shadow:0 0 0 2px var(--paper), 0 0 0 3px var(--line);
}
.avatar img { width:100%; height:100%; object-fit:cover; }
.icon-btn {
  width:40px; height:40px; border-radius:var(--r-pill); display:grid; place-items:center;
  color:var(--ink-2); position:relative;
}
.icon-btn:hover { background:var(--paper-3); color:var(--ink); }
.icon-btn .dot { position:absolute; top:9px; right:9px; width:7px; height:7px;
  border-radius:50%; background:var(--bp-lime); box-shadow:0 0 0 2px var(--paper); }

.app__body { display:block; }

/* ---- Content ------------------------------------------------------------ */
.content { padding:var(--s-4) var(--s-4) var(--s-20); }
.content__inner { max-width:var(--content-max); margin-inline:auto; }

/* Page header with round pillar-coloured icon (from every dashboard screen) */
.page-head {
  display:flex; align-items:center; gap:var(--s-4);
  padding:var(--s-4) 0 var(--s-5);
  border-bottom:1px solid var(--line); margin-bottom:var(--s-6);
  flex-wrap:wrap;
}
.page-head__icon {
  width:54px; height:54px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff; background:var(--bp-olive);
}
.page-head__icon svg { width:24px; height:24px; }
.page-head h1 { font-size:var(--t-h1); font-weight:var(--w-med); }
.page-head .grow { min-width:120px; }
.page-head__actions { display:flex; gap:var(--s-3); flex-wrap:wrap; }
@media (max-width:560px){ .page-head__actions .btn { flex:1 1 auto; } }

/* ===========================================================================
   NAVIGATION — the 4-pillar gradient
   Desktop: fixed left sidebar, each pillar a brand-framework colour, with a
   hover flyout of sub-items. Mobile: a horizontal 4-tab strip under the
   topbar that expands a sub-item sheet on tap.
   Pillars map old->new: Analysis(lime) Advice(olive) Coach(emerald) Now(teal)
   =========================================================================== */
.nav { --pill-fg:#fff; }
.nav__list { display:flex; }
/* min-width:0 lets 4 tabs share a 360px phone. NOT position:relative here:
   on mobile the .nav__sub sheet is absolutely positioned and must span the
   whole nav bar, so its containing block has to be .nav (sticky = positioned),
   never the quarter-width tab. A relative tab shrank the open sheet to ~97px
   on a 390px phone (Jesse's 2026-07-18 screenshots). Desktop restores
   position:relative for the hover flyout anchor. */
.nav__item { flex:1 1 0; min-width:0; }
.nav__link {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-width:0; padding:13px 6px; color:#fff; font-weight:var(--w-med);
  text-transform:uppercase; letter-spacing:.05em; font-size:.68rem;
  transition:filter var(--dur-1) var(--ease), background var(--dur-1);
}
.nav__link svg { width:18px; height:18px; flex:none; }
.nav__ico-label { display:flex; flex-direction:column; align-items:center; gap:4px; }

/* pillar colours */
.nav__item--analysis .nav__link { background:var(--bp-lime); }
.nav__item--advice   .nav__link { background:var(--bp-olive); }
.nav__item--coach    .nav__link { background:var(--bp-emerald); }
.nav__item--now      .nav__link { background:var(--bp-forest); }
/* Hover DARKENS the pillar so the white label keeps strong contrast on every
   colour. A lighten (the old behaviour) washed the white text out on the bright
   lime pillar until the label read as the same colour as the background. */
/* color:#fff repeated here because the global `a:hover { color:var(--bp-teal-600) }`
   (base.css) outranks .nav__link on hover and turned the label teal - invisible on
   the teal NOW pillar. The pillar label stays white in every state. */
.nav__link:hover { filter:brightness(0.9); color:#fff; }
.nav__item.is-active .nav__link { box-shadow:inset 0 -3px 0 rgba(255,255,255,.9); }

/* Sub-item flyout / sheet */
.nav__sub { list-style:none; }
.nav__sub a {
  display:flex; align-items:center; gap:12px; padding:13px 18px;
  color:var(--ink); font-weight:var(--w-reg); font-size:.92rem;
  border-bottom:1px solid var(--line);
}
.nav__sub a svg { width:18px; height:18px; color:var(--bp-olive); flex:none; }
.nav__sub a:hover { background:var(--paper-3); }
.nav__sub a.is-active { box-shadow:inset 3px 0 0 var(--bp-lime); background:var(--bp-teal-08); font-weight:var(--w-med); }

/* -- MOBILE nav (default) -- */
.nav { position:sticky; top:var(--topbar-h); z-index:55; box-shadow:var(--sh-1); }
.nav__ico-label .nav__ico { display:grid; place-items:center; }
.nav__sub {
  position:absolute; left:0; right:0; top:100%;
  background:var(--paper); box-shadow:var(--sh-3);
  max-height:0; overflow:hidden; transition:max-height var(--dur-2) var(--ease);
}
.nav__item.is-open .nav__sub { max-height:60vh; overflow:auto; }

/* -- DESKTOP nav -- */
@media (min-width:900px){
  .app__body { display:grid; grid-template-columns:var(--sidebar-w) 1fr; }
  .nav {
    position:sticky; top:var(--topbar-h); align-self:start;
    height:calc(100dvh - var(--topbar-h));
    box-shadow:none; background:var(--paper);
    border-right:1px solid var(--line);
  }
  /* Compact contiguous rows at the top — not full-height colour blocks. */
  .nav__list { flex-direction:column; height:100%; justify-content:flex-start; }
  .nav__item { position:relative; flex:0 0 auto; height:var(--nav-row-h); }
  .nav__link {
    justify-content:flex-start; height:100%; padding:0 20px; gap:12px;
    font-size:.72rem; letter-spacing:.07em;
  }
  .nav__link svg { width:17px; height:17px; }
  .nav__item.is-active .nav__link { box-shadow:inset 4px 0 0 rgba(255,255,255,.92); } /* subtle left indicator */
  .nav__ico-label { flex-direction:row; gap:12px; }
  .content { padding:var(--s-8) var(--s-10) var(--s-24); }

  /* hover flyout */
  .nav__sub {
    position:absolute; left:100%; top:0; width:280px; max-height:none; overflow:visible;
    background:var(--paper); border-radius:0 var(--r-lg) var(--r-lg) 0;
    box-shadow:var(--sh-4); padding:8px 0;
    opacity:0; visibility:hidden; transform:translateX(-8px); pointer-events:none;
    transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
    z-index:70;
  }
  .nav__sub a { border-bottom:1px solid var(--line); }
  .nav__sub a:last-child { border-bottom:none; }
  /* the hovered/focused pillar sits above its siblings so a fading-out
     neighbour flyout can never overlap or trap the one being opened */
  .nav__item:hover, .nav__item:focus-within { z-index:6; }
}
@media (min-width:900px) and (hover:hover){
  .nav__item:hover .nav__sub { opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; }
  .nav__item:hover .nav__link { filter:brightness(0.9); }
}
/* keyboard access: focus within opens the flyout too */
@media (min-width:900px){
  .nav__item:focus-within .nav__sub { opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; }
}

/* ===========================================================================
   BUTTONS
   =========================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 22px; border-radius:var(--r-pill);
  font-weight:var(--w-med); font-size:.82rem; letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap;
  transition:transform var(--dur-1) var(--ease), background var(--dur-1), box-shadow var(--dur-1), color var(--dur-1);
}
.btn svg { width:17px; height:17px; }
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--bp-teal); color:#fff; box-shadow:var(--sh-2); }
.btn--primary:hover { background:var(--bp-teal-600); color:#fff; box-shadow:var(--sh-3); }
.btn--accent { background:var(--bp-lime); color:var(--ink); }
.btn--accent:hover { filter:brightness(1.04); }
.btn--ghost { background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { box-shadow:inset 0 0 0 1px var(--bp-teal-40); color:var(--bp-teal); }
.btn--on-dark { background:#fff; color:var(--bp-teal); }
.btn--on-dark:hover { background:var(--bp-sand-soft); }
.btn--block { width:100%; }
.btn--lg { padding:15px 30px; font-size:.86rem; }
.btn--sm { padding:9px 16px; font-size:.74rem; }
.btn[disabled] { opacity:.5; pointer-events:none; }

/* dropdown-style select trigger ("SHOW ME: Latest plan") */
.select-trigger {
  display:inline-flex; align-items:center; gap:10px; padding:11px 14px;
  border-radius:var(--r-md); background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-2); font-size:.9rem; color:var(--ink);
}
.select-trigger .chev { margin-left:6px; padding-left:12px; border-left:1px solid var(--line); color:var(--ink-3); }

/* ===========================================================================
   CARDS & SURFACES
   =========================================================================== */
.card {
  background:var(--paper); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); border:1px solid var(--line);
}
.card--pad { padding:var(--s-5); }
.card--hover { transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.card--hover:hover { transform:translateY(-3px); box-shadow:var(--sh-3); }
.card__title { font-weight:var(--w-med); font-size:var(--t-h3); }

.section-head { display:flex; align-items:center; gap:14px; margin:var(--s-8) 0 var(--s-4); flex-wrap:wrap; }
.section-head__badge {
  width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--bp-sand); color:var(--bp-teal);
}
.section-head__badge svg { width:19px; height:19px; }
.section-head h2 { font-size:var(--t-h2); font-weight:var(--w-med); }

.pill-tag {
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px;
  border-radius:var(--r-pill); font-size:var(--t-xs); font-weight:var(--w-med);
  background:var(--bp-teal-08); color:var(--bp-teal);
}
.pill-tag--lime { background:#f3f6dd; color:#5f6e15; }
.pill-tag--alert { background:var(--alert-08); color:var(--alert); }
.pill-tag--ok { background:var(--ok-08); color:var(--ok); }

/* help "?" affordance shown on chart cards */
.help-dot {
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper-3); color:var(--ink-3); font-size:.72rem; font-weight:var(--w-semi);
}
.help-dot:hover { background:var(--bp-teal); color:#fff; }

/* ===========================================================================
   TABS  (Analysis Results domain tabs; day tabs; workout tabs)
   =========================================================================== */
.tabs {
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar { display:none; }
.tab {
  padding:12px 14px; white-space:nowrap; color:var(--ink-3);
  font-weight:var(--w-med); font-size:.92rem; position:relative;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--dur-1);
}
.tab:hover { color:var(--ink); }
.tab.is-active { color:var(--ink); border-bottom-color:var(--bp-teal); }

/* ===========================================================================
   DATA VISUALISATION  — the analysis engine's dynamic graphs
   Bars are built from CSS custom props so JS only sets --score / height.
   =========================================================================== */

/* --- The signature vertical "score meter" bar chart --- */
.chart {
  position:relative; display:grid; gap:14px;
  grid-template-columns:auto 1fr; align-items:stretch;
}
.chart__yaxis {
  display:flex; flex-direction:column-reverse; justify-content:space-between;
  font-size:.68rem; color:var(--ink-3); padding:2px 0 20px;
  text-align:right; min-width:34px;
}
.chart__plot {
  position:relative; display:flex; align-items:flex-end; justify-content:space-evenly;
  gap:4%; padding-bottom:20px; min-height:280px;
}
/* horizontal gridlines */
.chart__plot::before {
  content:""; position:absolute; inset:0 0 20px 0; pointer-events:none;
  background:repeating-linear-gradient(to top, transparent, transparent calc(10% - 1px), var(--line) 10%);
  opacity:.7;
}
/* A bar "column": non-clipping wrapper so markers + tooltips can escape. */
.bar-col { position:relative; flex:1 1 0; min-width:0; max-width:72px; height:100%; cursor:pointer; }
/* The bar track itself clips the coloured fill/gap to rounded corners. */
.bar { position:relative; width:100%; height:100%; border-radius:7px;
  overflow:hidden; background:var(--viz-track); }
.bar__label { position:absolute; bottom:-20px; left:0; right:0; text-align:center;
  font-size:.7rem; color:var(--ink-3); }
/* achieved score, filled from the bottom; height driven by --score (0..100) on .bar-col */
.bar__fill {
  position:absolute; left:0; right:0; bottom:0; height:0; background:var(--viz-score);
  transition:height var(--dur-chart) var(--ease-out); border-radius:7px 7px 0 0;
}
.is-drawn .bar__fill { height:calc(var(--score,0) * 1%); }
/* headroom/gap sits above the fill */
.bar__gap {
  position:absolute; left:0; right:0; top:0;
  height:calc((100 - var(--score,0)) * 1%);
  background:var(--viz-gap); opacity:0;
  transition:opacity var(--dur-chart) var(--ease-out) .1s; border-radius:7px 7px 0 0;
}
.is-drawn .bar__gap { opacity:1; }

/* marker dot + tooltip (the "82% Feb 25" popover) — positioned on the .bar-col */
.bar__marker {
  position:absolute; left:50%; transform:translate(-50%,50%);
  bottom:calc(var(--score,0) * 1%); width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 4px var(--bp-teal); opacity:0; transition:opacity var(--dur-2) .5s; z-index:3;
}
.is-drawn .bar__marker { opacity:1; }
.bar__tip {
  position:absolute; left:50%; bottom:calc(var(--score,0) * 1% + 22px);
  transform:translateX(-50%) translateY(6px);
  background:var(--paper); box-shadow:var(--sh-3); border-radius:var(--r-md);
  padding:8px 12px; text-align:center; white-space:nowrap; z-index:5;
  opacity:0; visibility:hidden; transition:opacity var(--dur-1), transform var(--dur-1), visibility var(--dur-1);
}
.bar__tip b { font-size:1.05rem; font-weight:var(--w-semi); }
.bar__tip span { display:block; font-size:.7rem; color:var(--ink-3); }
.bar__tip::after {
  content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:var(--paper); box-shadow:2px 2px 4px rgba(20,48,47,.06);
}
.bar-col:hover .bar__tip, .bar-col:focus-visible .bar__tip { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* --- Mini multi-bar card (top-3 imbalances; 3 dated readings) --- */
.mini-chart { display:flex; align-items:flex-end; justify-content:space-evenly;
  gap:8%; height:170px; padding-bottom:22px; position:relative; }
.mini-chart .bar-col { max-width:40px; }
.mini-chart .bar__label { font-size:.62rem; line-height:1.2; }

/* --- Radial score ring (assessment completion / overall vitality) --- */
.ring-stat { display:inline-grid; place-items:center; position:relative; }
.ring-stat svg { transform:rotate(-90deg); }
.ring-stat__track { fill:none; stroke:var(--viz-track); }
.ring-stat__val   { fill:none; stroke:var(--bp-teal); stroke-linecap:round;
  transition:stroke-dashoffset var(--dur-chart) var(--ease-out); }
.ring-stat__center { position:absolute; inset:0; }
/* number pinned to the exact centre of the circle; caption hangs just below it */
.ring-stat__center b {
  position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);
  text-align:center; font-size:1.5rem; font-weight:var(--w-semi); line-height:1;
}
.ring-stat__center small {
  position:absolute; left:0; right:0; top:65%; text-align:center;
  font-size:.52rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; line-height:1;
}

/* --- Delta stat ("↗14%  Congrats!") --- */
.delta { display:flex; align-items:flex-start; gap:10px; }
.delta__num { font-size:clamp(2.6rem,2rem+2vw,3.4rem); font-weight:var(--w-light); line-height:1; color:var(--ink); }
.delta__num sup { font-size:.4em; font-weight:var(--w-reg); color:var(--ink-3); }
.delta__arrow { color:var(--bp-olive); margin-top:.4em; }

/* --- Horizontal profile score row (10-profile list view) --- */
.score-row { display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line); }
.score-row__name { font-weight:var(--w-med); font-size:.95rem; }
.score-row__val { font-weight:var(--w-semi); color:var(--bp-teal); font-variant-numeric:tabular-nums; }
.score-row__meter { grid-column:1 / -1; height:8px; border-radius:var(--r-pill);
  background:var(--viz-track); overflow:hidden; }
.score-row__meter i {
  display:block; height:100%; width:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--bp-teal),var(--bp-emerald));
  transition:width var(--dur-chart) var(--ease-out);
}
.is-drawn .score-row__meter i { width:calc(var(--score,0) * 1%); }

/* ===========================================================================
   TABLES  ->  reflow to stacked label/value cards on mobile
   =========================================================================== */
.data-table { width:100%; }
.data-table thead th {
  text-align:left; font-size:var(--t-eyebrow); text-transform:uppercase;
  letter-spacing:var(--ls-caps); color:var(--ink-3); font-weight:var(--w-med);
  padding:0 16px 12px; border-bottom:1px solid var(--line);
}
.data-table tbody td { padding:18px 16px; border-bottom:1px solid var(--line); vertical-align:top; font-size:.92rem; }
.data-table tbody tr:hover { background:var(--paper-2); }
.data-table td .t-strong { font-weight:var(--w-med); color:var(--ink); }

@media (max-width:760px){
  .data-table, .data-table tbody, .data-table tr, .data-table td { display:block; width:100%; }
  .data-table thead { display:none; }
  .data-table tr { background:var(--paper); border:1px solid var(--line);
    border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:6px 4px; margin-bottom:var(--s-4); }
  .data-table tbody td { border:none; padding:10px 16px; display:grid; grid-template-columns:38% 1fr; gap:10px; }
  .data-table tbody td::before {
    content:attr(data-label); font-size:var(--t-eyebrow); text-transform:uppercase;
    letter-spacing:var(--ls-caps); color:var(--ink-3); font-weight:var(--w-med); padding-top:2px;
  }
}
/* horizontal scroll container for wide tables that must stay tabular */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ===========================================================================
   FORMS  (questionnaire + account)
   =========================================================================== */
.field { display:block; }
.field__label { display:block; font-size:var(--t-eyebrow); text-transform:uppercase;
  letter-spacing:var(--ls-caps); color:var(--ink-3); font-weight:var(--w-med); margin-bottom:7px; }
.field__label .req { color:var(--bp-olive); }
/* border:0 is load-bearing, not tidy-up. These three draw their outline with an
   inset box-shadow ring; without the reset the browser's own control border
   renders on top of it and every field shows a doubled edge. Found on the first
   form-heavy page (expert backend settings, 2026-07-21) and fixed here so no
   page has to patch it locally again. */
.input, .textarea, .select {
  width:100%; padding:12px 14px; border-radius:var(--r-md); border:0;
  background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow var(--dur-1); font-size:.95rem;
}
.input:focus, .textarea:focus, .select:focus { outline:none; box-shadow:inset 0 0 0 2px var(--bp-teal); }
.input--valid { box-shadow:inset 0 0 0 1px var(--ok); }
.textarea { resize:vertical; min-height:96px; }

/* progress line for the questionnaire */
.qz-progress { display:flex; align-items:center; gap:12px; }
.qz-progress__bar { flex:1; height:8px; border-radius:var(--r-pill); background:var(--viz-track); overflow:hidden; }
.qz-progress__bar i { display:block; height:100%; background:var(--bp-lime); border-radius:var(--r-pill);
  transition:width var(--dur-3) var(--ease); }

/* radio / choice options (the questionnaire) */
.choice { display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--line-2); cursor:pointer;
  transition:box-shadow var(--dur-1), background var(--dur-1); }
.choice:hover { box-shadow:inset 0 0 0 1px var(--bp-teal-40); }
.choice__mark { width:22px; height:22px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 2px var(--line-2); display:grid; place-items:center; transition:box-shadow var(--dur-1); }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice input:checked + .choice__mark { box-shadow:inset 0 0 0 2px var(--bp-lime); }
.choice input:checked + .choice__mark::after { content:""; width:11px; height:11px; border-radius:50%; background:var(--bp-lime); }
.choice:has(input:checked) { box-shadow:inset 0 0 0 2px var(--bp-lime); background:#fbfdf1; }
.choice__text { font-size:.95rem; }
/* Checkbox variant of the same row. The mark above is a radio dot, which is
   correct for the questionnaire but wrong for the two independent opt-ins at
   the gate: two round marks under one heading read as pick-one. A square mark
   with a tick says "as many as you like" without a second component. */
.choice:has(input[type=checkbox]) .choice__mark { border-radius:6px; }
.choice:has(input[type=checkbox]) input:checked + .choice__mark::after {
  width:11px; height:6px; border-radius:0; background:none;
  border-left:2px solid var(--bp-lime); border-bottom:2px solid var(--bp-lime);
  transform:rotate(-45deg) translate(1px,-2px); }

/* horizontal scale (No / A little / Pretty much / Definitely) */
.scale { display:flex; flex-wrap:wrap; gap:10px; }
.scale .choice { flex:1 1 120px; justify-content:flex-start; }

/* segmented toggle (Male / Female) */
.segmented { display:inline-flex; padding:4px; gap:4px; background:var(--paper-3); border-radius:var(--r-md); }
.segmented label { padding:9px 18px; border-radius:var(--r-sm); font-size:.9rem; cursor:pointer; color:var(--ink-2); }
.segmented input { position:absolute; opacity:0; }
.segmented label:has(input:checked) { background:var(--paper); color:var(--ink); box-shadow:var(--sh-1); font-weight:var(--w-med); }

/* ===========================================================================
   "NOW" — the daily do-this-now feed (the retention core)
   =========================================================================== */
.now-head { display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap;
  padding:var(--s-5); background:linear-gradient(135deg,var(--bp-teal),var(--bp-forest));
  color:#fff; border-radius:var(--r-xl); box-shadow:var(--sh-2); }
.now-head h1 { color:#fff; font-weight:var(--w-med); }
.now-head .lead { color:rgba(255,255,255,.82); }
.now-head .ring-stat__track { stroke:rgba(255,255,255,.25); }
.now-head .ring-stat__val { stroke:#fff; }
.now-head .ring-stat__center b, .now-head .ring-stat__center small { color:#fff; }

.now-scores { display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-4); }
.now-score { flex:1 1 120px; background:rgba(255,255,255,.12); border-radius:var(--r-md); padding:12px 14px; }
.now-score b { font-size:1.3rem; font-weight:var(--w-semi); }
.now-score span { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; opacity:.85; }

.now-daypart { margin:var(--s-8) 0 var(--s-3); display:flex; align-items:center; gap:10px; }
.now-daypart .eyebrow { color:var(--bp-teal); }
.now-daypart::after { content:""; flex:1; height:1px; background:var(--line); }

/* a task card in the feed — swipeable / checkable */
.task {
  display:flex; align-items:center; gap:var(--s-4); padding:var(--s-4);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); margin-bottom:var(--s-3);
  transition:transform var(--dur-2) var(--ease), opacity var(--dur-2), box-shadow var(--dur-2), border-color var(--dur-2);
  touch-action:pan-y;
}
.task__icon { width:46px; height:46px; border-radius:14px; flex:none; display:grid; place-items:center; color:#fff; }
.task__icon svg { width:22px; height:22px; }
.task--move .task__icon { background:var(--bp-emerald); }
.task--food .task__icon { background:var(--bp-olive); }
.task--supp .task__icon { background:var(--bp-teal); }
.task--mind .task__icon { background:var(--bp-slate); }
.task--sleep .task__icon { background:var(--bp-forest); }
.task__body { flex:1; min-width:0; }
.task__body h3 { font-size:1rem; font-weight:var(--w-med); }
.task__meta { font-size:.8rem; color:var(--ink-3); }
.task__check {
  width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  box-shadow:inset 0 0 0 2px var(--line-2); color:transparent; transition:all var(--dur-1);
}
.task__check:hover { box-shadow:inset 0 0 0 2px var(--bp-teal); }
.task.is-done { border-color:var(--ok); background:#fbfefc; }
.task.is-done .task__check { background:var(--ok); box-shadow:none; color:#fff; }
.task.is-done .task__body h3 { color:var(--ink-3); text-decoration:line-through; }
.task.is-skipped { opacity:.55; }
.task.is-skipped .task__check { box-shadow:inset 0 0 0 2px var(--ink-4); }

/* swipe hint chips */
.swipe-hints { display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-3); margin-bottom:var(--s-4); }
.swipe-hints b { color:var(--ok); }
.swipe-hints i { color:var(--alert); font-style:normal; }

/* ===========================================================================
   COACH marketplace card
   =========================================================================== */
.coach-card { display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-5); }
.coach-card__top { display:flex; gap:var(--s-4); align-items:center; }
.coach-card .avatar { width:60px; height:60px; }
.coach-card__name { font-weight:var(--w-med); font-size:1.05rem; }
.coach-card__spec { font-size:.82rem; color:var(--ink-3); }
.coach-card__tags { display:flex; flex-wrap:wrap; gap:6px; }
.stars { color:var(--bp-lime); letter-spacing:2px; font-size:.9rem; }

/* ===========================================================================
   FEEDBACK-FROM-COACH note cards (2-col on desktop)
   =========================================================================== */
.note-grid { display:grid; gap:var(--s-4); grid-template-columns:1fr; }
@media (min-width:760px){ .note-grid { grid-template-columns:1fr 1fr; } }
.note { padding:var(--s-5); }
.note h3 { color:var(--bp-teal); font-size:1.05rem; font-weight:var(--w-med); margin-bottom:6px; }
.note p { color:var(--ink-2); font-size:.92rem; }
.read-more { display:inline-block; margin-top:12px; font-size:var(--t-eyebrow);
  text-transform:uppercase; letter-spacing:var(--ls-caps); font-weight:var(--w-med);
  color:var(--bp-teal); border-bottom:1.5px solid var(--bp-lime); padding-bottom:2px; }

/* metadata strip */
.meta-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s-4);
  padding:var(--s-4); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); }
.meta-strip__item .eyebrow { margin-bottom:3px; }
.meta-strip__item b { font-weight:var(--w-med); font-size:.92rem; }

/* ===========================================================================
   ADVICE — PROTOCOL CARDS
   The reusable "advice item" template: a colour-coded card that replaces the
   flat table. Each item carries the health area it targets (--c), why it is
   there, and a clean 3-fact spec strip. Reused across Supplements, Workouts
   and Nutrition. Colour comes only from --c, so one class serves every page.
   =========================================================================== */

/* Summary tiles above the list */
.protocol-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:var(--s-3); margin-bottom:var(--s-6); }
.psum { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:15px 18px; box-shadow:var(--sh-1); }
.psum b { display:block; font-size:1.4rem; font-weight:var(--w-semi); line-height:1.1; color:var(--ink); }
.psum b.psum--sm { font-size:1.02rem; }
.psum span { font-size:var(--t-eyebrow); text-transform:uppercase; letter-spacing:var(--ls-caps);
  color:var(--ink-3); font-weight:var(--w-med); }

/* The card */
.rx { display:grid; gap:var(--s-4); }
.rx-card {
  --c: var(--bp-teal);
  position:relative; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  display:grid; grid-template-columns:auto 1fr; gap:2px 16px;
  grid-template-areas:"icon name" "icon why" "meta meta";
  padding:18px 20px 18px 24px;
  transition:box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.rx-card:hover { box-shadow:var(--sh-3); transform:translateY(-2px); }
.rx-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--c); }
.rx-card__icon { grid-area:icon; align-self:start; width:46px; height:46px; border-radius:13px;
  display:grid; place-items:center; color:#fff; background:var(--c); }
.rx-card__icon svg { width:22px; height:22px; }
.rx-card__top { grid-area:name; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.rx-card__name { font-weight:var(--w-med); font-size:1.06rem; }
.rx-card__why { grid-area:why; color:var(--ink-2); font-size:.9rem; margin-top:3px; max-width:62ch; }
.rx-card__meta { grid-area:meta; }
.rx-card--primary { background:#f5faf7; background:color-mix(in srgb, var(--c) 6%, #fff);
  border-color:#cfe4da; border-color:color-mix(in srgb, var(--c) 28%, var(--line)); }

/* the health area this item targets */
.target-tag { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:var(--r-pill);
  font-size:.7rem; font-weight:var(--w-med);
  background:#eef3f1; background:color-mix(in srgb, var(--c) 12%, #fff); color:var(--c); }
.target-tag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--c); }
.badge-primary { display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--r-pill);
  font-size:.64rem; font-weight:var(--w-semi); text-transform:uppercase; letter-spacing:.08em;
  background:var(--c); color:#fff; }

/* the 3-fact spec strip (dosage / when / frequency) */
.rx-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:14px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.rx-fact { background:var(--paper-2); padding:10px 13px; display:flex; flex-direction:column; gap:4px; }
.rx-fact .k { font-size:.6rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
  font-weight:var(--w-med); display:flex; align-items:center; gap:6px; }
.rx-fact .k svg { width:13px; height:13px; }
.rx-fact .v { font-size:.9rem; font-weight:var(--w-med); color:var(--ink); }
@media (max-width:560px){
  .rx-facts { grid-template-columns:1fr; }
  .rx-card { padding-left:20px; }
}

/* ===========================================================================
   ADVICE sub-pages — extra patterns
   Nutrition (favor/limit foods), Menu Plan (day timeline), Workouts (media
   cards). Lifestyle + Nutrition principles reuse .rx-card. Colour via --c.
   =========================================================================== */

/* 4-fact variant of the spec strip (Workouts: sets/reps/rest/tempo) */
.rx-facts--4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:560px){ .rx-facts--4 { grid-template-columns:repeat(2,1fr); } }

/* ---- Nutrition: favor / limit foods ---------------------------------- */
.foods { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ .foods { grid-template-columns:1fr 1fr; } }
.foods__col { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--sh-1); }
.foods__col h3 { display:flex; align-items:center; gap:11px; font-size:1rem; font-weight:var(--w-med); margin-bottom:6px; }
.foods__col h3 .ic { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; flex:none; }
.foods__col h3 .ic svg { width:17px; height:17px; }
.foods__col--good h3 .ic { background:var(--bp-emerald); }
.foods__col--limit h3 .ic { background:var(--warn); }
.foods__col p.muted { font-size:.85rem; margin-bottom:14px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:var(--r-pill);
  font-size:.85rem; font-weight:var(--w-med); }
.chip::before { content:""; width:6px; height:6px; border-radius:50%; }
.chip--good { background:#e9f4ef; background:color-mix(in srgb,var(--bp-emerald) 12%,#fff); color:#1c6f4f; }
.chip--good::before { background:var(--bp-emerald); }
.chip--limit { background:var(--warn-08); color:#8a5a12; }
.chip--limit::before { background:var(--warn); }

/* ---- Menu Plan: the day timeline ------------------------------------- */
.day-plan { display:grid; gap:14px; }
.meal-card { --c:var(--bp-olive); display:grid; grid-template-columns:76px 1fr;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-1); transition:box-shadow var(--dur-2) var(--ease); }
.meal-card:hover { box-shadow:var(--sh-2); }
.meal-card__rail { background:#f1f6ee; background:color-mix(in srgb,var(--c) 11%,#fff);
  border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; padding:14px 6px; text-align:center; }
.meal-card__time { font-weight:var(--w-semi); color:var(--c); font-size:.92rem; }
.meal-card__part { font-size:.56rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:var(--w-med); }
.meal-card__body { padding:15px 18px; }
.meal-card__what { font-weight:var(--w-med); font-size:1rem; }
.meal-card__desc { color:var(--ink-2); font-size:.9rem; margin-top:4px; }
.meal-card__tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.nutri-tag { font-size:.68rem; font-weight:var(--w-med); padding:3px 9px; border-radius:var(--r-pill);
  background:var(--paper-3); color:var(--ink-2); }

/* ---- Workouts: exercise media cards ---------------------------------- */
.ex-grid { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .ex-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1060px){ .ex-grid { grid-template-columns:1fr 1fr 1fr; } }
.ex-card { --c:var(--bp-teal); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.ex-card:hover { transform:translateY(-3px); box-shadow:var(--sh-3); }
.ex-thumb { position:relative; aspect-ratio:16/10; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--c),#0e2a28); }
.ex-thumb__ic { width:58px; height:58px; color:rgba(255,255,255,.42); }
.ex-play { position:absolute; inset:0; margin:auto; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.94); display:grid; place-items:center; color:var(--ink);
  box-shadow:var(--sh-2); transition:transform var(--dur-2) var(--ease); }
.ex-card:hover .ex-play { transform:scale(1.08); }
.ex-play svg { width:19px; height:19px; margin-left:2px; }
.ex-badge { position:absolute; top:10px; left:10px; padding:3px 9px; border-radius:var(--r-pill);
  background:rgba(6,20,19,.42); color:#fff; font-size:.64rem; font-weight:var(--w-semi); letter-spacing:.05em; }
.ex-body { padding:14px 16px 0; }
.ex-name { font-weight:var(--w-med); font-size:1.02rem; }
.ex-body .target-tag { margin-top:8px; }
.ex-facts { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:14px;
  background:var(--line); border-top:1px solid var(--line); }
.ex-facts .rx-fact { background:var(--paper-2); }

/* ===========================================================================
   WORKOUTS — three layers: periodization → weekly plan → workout detail.
   The workout detail is flexible: a session can be weights, cardio, a combo,
   or rest. Cardio carries its own interval/zone structure.
   =========================================================================== */

/* Layer 1 — periodization stepper */
.periods { display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:820px){ .periods { grid-template-columns:repeat(3,1fr); } }
.period { position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:18px 18px 16px; box-shadow:var(--sh-1); overflow:hidden; }
.period::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--line); }
.period--done::before { background:var(--bp-emerald); }
.period--active::before { background:var(--bp-teal); }
.period--active { border-color:#bcd7d3; box-shadow:var(--sh-2); }
.period__state { display:inline-flex; align-items:center; gap:6px; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.08em; font-weight:var(--w-semi); color:var(--ink-3); }
.period--done .period__state { color:var(--bp-emerald); }
.period--active .period__state { color:var(--bp-teal); }
.period__state svg { width:13px; height:13px; }
.period__name { font-weight:var(--w-med); font-size:1.08rem; margin-top:8px; }
.period__weeks { font-size:.78rem; color:var(--ink-3); }
.period__focus { font-size:.88rem; color:var(--ink-2); margin-top:8px; }
.period__prog { margin-top:12px; }
.period__prog .pbar { height:6px; border-radius:var(--r-pill); background:var(--viz-track); overflow:hidden; }
.period__prog .pbar i { display:block; height:100%; background:var(--bp-teal); border-radius:var(--r-pill); }
.period__prog span { font-size:.7rem; color:var(--ink-3); display:block; margin-top:5px; }

/* Layer 2 — weekly plan day strip */
.week { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
@media (max-width:640px){ .week { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:76px;
  overflow-x:auto; scrollbar-width:none; padding-bottom:4px; } .week::-webkit-scrollbar{ display:none; } }
.wday { --c:var(--bp-teal); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:11px 6px 12px; text-align:center; cursor:pointer; display:grid; gap:7px; justify-items:center;
  transition:border-color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1); }
.wday:hover { border-color:color-mix(in srgb,var(--c) 45%,var(--line)); transform:translateY(-1px); }
.wday.is-active { border-color:var(--c); box-shadow:inset 0 0 0 1px var(--c), var(--sh-1); }
.wday__d { font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:var(--w-med); }
.wday__ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; background:var(--c); }
.wday__ic svg { width:18px; height:18px; }
.wday--rest .wday__ic { background:var(--paper-3); color:var(--ink-3); }
.wday__t { font-size:.6rem; color:var(--ink-2); font-weight:var(--w-med); line-height:1.15; }

/* Layer 3 — workout detail (weights / cardio / combo / rest) */
.workout { --c:var(--bp-teal); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; margin-top:18px; }
.workout__head { padding:16px 20px; border-bottom:1px solid var(--line);
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.workout__bar { align-self:stretch; width:4px; border-radius:2px; background:var(--c); }
.workout__h { flex:1; min-width:180px; }
.workout__title { font-weight:var(--w-semi); font-size:1.18rem; }
.workout__meta { font-size:.82rem; color:var(--ink-3); margin-top:2px; }
.type-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:var(--w-med);
  background:#e9f1f0; background:color-mix(in srgb,var(--c) 13%,#fff); color:var(--c); }
.type-badge svg { width:14px; height:14px; }
.workout__body { padding:4px 20px 20px; }

.wblock { padding-top:16px; }
.wblock__title { display:flex; align-items:center; gap:9px; margin:8px 0 8px; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2); font-weight:var(--w-semi); }
.wblock__title .n { width:23px; height:23px; border-radius:7px; display:grid; place-items:center; color:#fff; flex:none; }
.wblock__title .n svg { width:13px; height:13px; }
.wblock__note { font-size:.82rem; color:var(--ink-3); margin:-2px 0 10px; }

.lift { display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--line); }
.lift:last-child { border-bottom:none; }
.lift__name { font-weight:var(--w-med); font-size:.96rem; }
.lift__name .sub { display:block; font-size:.76rem; color:var(--ink-3); font-weight:var(--w-reg); }
.lift__specs { display:flex; gap:16px; flex-wrap:wrap; }
.lift__spec { font-size:.8rem; color:var(--ink-3); }
.lift__spec b { color:var(--ink); font-weight:var(--w-semi); font-variant-numeric:tabular-nums; }
@media (max-width:520px){ .lift { grid-template-columns:1fr; } }

.cardio { display:grid; gap:8px; }
.cardio-seg { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:12px 14px; border-radius:var(--r-md); background:var(--paper-2); border:1px solid var(--line); }
.cardio-seg__zone { --z:var(--bp-emerald); font-size:.64rem; font-weight:var(--w-semi); color:#fff;
  background:var(--z); border-radius:var(--r-pill); padding:4px 9px; white-space:nowrap; }
.cardio-seg__label { font-weight:var(--w-med); font-size:.92rem; }
.cardio-seg__detail { font-size:.8rem; color:var(--ink-2); }
.cardio-seg__dur { font-size:.82rem; color:var(--ink-3); font-weight:var(--w-med); white-space:nowrap; }
.zone-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:.7rem; color:var(--ink-3); }
.zone-legend span { display:inline-flex; align-items:center; gap:6px; }
.zone-legend i { width:11px; height:11px; border-radius:3px; }
.rest-note { display:flex; gap:14px; align-items:center; padding:20px; color:var(--ink-2); }
.rest-note svg { width:30px; height:30px; color:var(--bp-slate); flex:none; }

/* ===========================================================================
   COACH — marketplace, profile, and messages.
   The first income model: browse vetted practitioners, pick one, and message.
   =========================================================================== */

/* filter bar */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; align-items:center; }
.filter-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--r-pill);
  background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2); font-size:.85rem; color:var(--ink); cursor:pointer;
  transition:box-shadow var(--dur-1), background var(--dur-1), color var(--dur-1); }
.filter-chip:hover { box-shadow:inset 0 0 0 1px var(--bp-teal-40); }
.filter-chip svg { width:15px; height:15px; color:var(--ink-3); }
.filter-chip.is-on { background:var(--bp-teal-08); box-shadow:inset 0 0 0 1px var(--bp-teal-40); color:var(--bp-teal); }
.filter-chip.is-on svg { color:var(--bp-teal); }

/* marketplace grid */
.coach-grid { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:680px){ .coach-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .coach-grid { grid-template-columns:1fr 1fr 1fr; } }

/* coach card (redefines the earlier stub) */
.coach-card { display:block; padding:0; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden;
  transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); position:relative; }
.coach-card:hover { transform:translateY(-3px); box-shadow:var(--sh-3); }
.coach-card__body { padding:var(--s-5); display:flex; flex-direction:column; gap:12px; }
.coach-card__top { display:flex; gap:14px; align-items:center; }
.coach-card .avatar { width:56px; height:56px; font-size:1rem; }
.coach-card__name { font-weight:var(--w-med); font-size:1.05rem; }
.coach-card__cred { font-size:.8rem; color:var(--ink-3); }
.coach-card__match { position:absolute; top:0; right:0; display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; font-size:.64rem; font-weight:var(--w-semi); text-transform:uppercase; letter-spacing:.06em;
  color:#fff; background:var(--bp-teal); border-radius:0 var(--r-lg) 0 var(--r-md); }
.coach-card__match svg { width:12px; height:12px; }
.coach-tags { display:flex; flex-wrap:wrap; gap:6px; }
.coach-meta { display:flex; align-items:center; gap:8px 16px; font-size:.82rem; color:var(--ink-2); flex-wrap:wrap; }
.coach-meta .m { display:inline-flex; align-items:center; gap:6px; }
.coach-meta svg { width:14px; height:14px; color:var(--ink-3); }
.stars { color:var(--bp-lime); letter-spacing:1px; font-size:.9rem; }
.rating b { color:var(--ink); font-weight:var(--w-semi); }
.coach-card__foot { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px var(--s-5); border-top:1px solid var(--line); background:var(--paper-2); }
.coach-price b { font-size:1.05rem; font-weight:var(--w-semi); }
.coach-price span { font-size:.72rem; color:var(--ink-3); }

/* coach profile hero (My Coach) */
.coach-hero { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.coach-hero .avatar { width:84px; height:84px; font-size:1.5rem; }
.coach-hero__name { font-size:var(--t-h2); font-weight:var(--w-med); }
.coach-hero__cred { color:var(--ink-3); font-size:.9rem; margin-top:2px; }
.next-session { display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:16px 18px; border-radius:var(--r-lg); background:linear-gradient(120deg,var(--bp-emerald),var(--bp-forest)); color:#fff; }
.next-session svg { width:26px; height:26px; flex:none; }
.next-session .grow b { font-size:1.02rem; font-weight:var(--w-med); display:block; }
.next-session .grow span { font-size:.82rem; opacity:.85; }

/* messages / chat */
.chat-wrap { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); overflow:hidden; display:flex; flex-direction:column; }
.chat-head { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.chat-head .avatar { width:42px; height:42px; }
.chat-head__name { font-weight:var(--w-med); }
.chat-head__status { font-size:.76rem; color:var(--bp-emerald); display:flex; align-items:center; gap:5px; }
.chat-head__status::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--bp-emerald); }
.chat { display:flex; flex-direction:column; gap:10px; padding:20px 18px; background:var(--paper-2); }
.chat-day { text-align:center; font-size:.7rem; color:var(--ink-3); margin:6px 0; }
.msg { max-width:76%; padding:11px 15px; border-radius:16px; font-size:.92rem; line-height:1.5; }
.msg--in { align-self:flex-start; background:var(--paper); box-shadow:var(--sh-1); border-bottom-left-radius:5px; }
.msg--out { align-self:flex-end; background:var(--bp-teal); color:#fff; border-bottom-right-radius:5px; }
.msg__time { font-size:.64rem; opacity:.65; margin-top:5px; display:block; }
.chat-input { display:flex; gap:10px; padding:13px 16px; border-top:1px solid var(--line); align-items:center; background:var(--paper); }
.chat-input .input { flex:1; border-radius:var(--r-pill); }
.chat-send { width:44px; height:44px; border-radius:50%; background:var(--bp-teal); color:#fff; display:grid; place-items:center; flex:none; }
.chat-send:hover { background:var(--bp-teal-600); }
.chat-send svg { width:19px; height:19px; }

/* ===========================================================================
   WORKOUTS — weights table (numbered A1/A2…, clean Sets·Reps·Rest·Tempo
   columns, and a video demo that drops down when the exercise name is clicked)
   =========================================================================== */
.set-table { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin-top:12px; }
.set-headrow, .set-main {
  display:grid; grid-template-columns:48px 1fr 54px 54px 64px 76px;
  grid-template-areas:"code name sets reps rest tempo"; align-items:center;
}
.set-headrow { background:var(--paper-2); border-bottom:1px solid var(--line); }
.set-headrow span { padding:9px 8px; font-size:.6rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); font-weight:var(--w-med); text-align:center; }
.set-headrow span.l { text-align:left; }
.set-row + .set-row { border-top:1px solid var(--line); }
.set-main > * { padding:12px 8px; }
.set-code { grid-area:code; text-align:center; }
.set-code b { display:inline-block; min-width:28px; padding:3px 6px; border-radius:6px;
  font-size:.72rem; font-weight:var(--w-semi); color:#fff; background:var(--gc,var(--bp-teal)); }
.set-name { grid-area:name; text-align:left; font-weight:var(--w-med); font-size:.95rem; cursor:pointer;
  display:flex; align-items:center; gap:9px; user-select:none; }
.set-name:hover { color:var(--bp-teal); }
.set-name__txt .sub { display:block; font-size:.74rem; color:var(--ink-3); font-weight:var(--w-reg); }
.set-name .chev { width:15px; height:15px; color:var(--ink-3); transition:transform var(--dur-1); flex:none; }
.set-row.is-open .set-name .chev { transform:rotate(180deg); }
.set-row.is-open .set-name { color:var(--bp-teal); }
.set-cell { text-align:center; font-size:.92rem; font-weight:var(--w-med); font-variant-numeric:tabular-nums; color:var(--ink); }
.set-cell--sets { grid-area:sets; } .set-cell--reps { grid-area:reps; }
.set-cell--rest { grid-area:rest; } .set-cell--tempo { grid-area:tempo; color:var(--ink-2); font-weight:var(--w-reg); }
.set-cell::before { content:attr(data-label); display:none; }

/* video demo drop-down */
.set-video { max-height:0; overflow:hidden; transition:max-height var(--dur-3) var(--ease); background:var(--paper-2); }
.set-row.is-open .set-video { max-height:420px; }
.set-video__in { padding:16px; display:grid; grid-template-columns:230px 1fr; gap:18px; border-top:1px solid var(--line); }
.set-video__thumb { aspect-ratio:16/10; border-radius:var(--r-md); position:relative; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--gc,var(--bp-teal)),#0e2a28); }
.set-video__thumb .ex-thumb__ic { width:46px; height:46px; }
.set-video__cues .eyebrow { margin-bottom:9px; }
.set-video__cues ul { display:grid; gap:8px; }
.set-video__cues li { display:flex; gap:9px; font-size:.87rem; color:var(--ink-2); }
.set-video__cues li svg { width:15px; height:15px; color:var(--bp-emerald); flex:none; margin-top:2px; }

@media (max-width:600px){
  .set-headrow { display:none; }
  .set-main { grid-template-columns:48px repeat(4,1fr);
    grid-template-areas:"code name name name name" "code sets reps rest tempo"; row-gap:2px; }
  .set-main > * { padding:10px 6px; }
  .set-name { padding-bottom:2px; }
  .set-cell { display:flex; flex-direction:column; gap:2px; }
  .set-cell::before { display:block; font-size:.55rem; text-transform:uppercase; letter-spacing:.04em;
    color:var(--ink-3); font-weight:var(--w-med); }
  .set-video__in { grid-template-columns:1fr; }
  .set-video__thumb { max-width:280px; }
}

/* ===========================================================================
   SUPPLEMENTS — view switching (by supplement / by moment / by form) +
   form pills (powder / capsule / drops) + the "blend into a smoothie" banner.
   All three views reuse the same .rx-card, so the design structure is intact.
   =========================================================================== */
.view-toggle { display:inline-flex; padding:4px; gap:4px; background:var(--paper-3);
  border-radius:var(--r-pill); margin-bottom:22px; flex-wrap:wrap; max-width:100%; }
.view-toggle button { padding:9px 15px; border-radius:var(--r-pill); font-size:.82rem; font-weight:var(--w-med);
  color:var(--ink-2); display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:background var(--dur-1), color var(--dur-1); }
.view-toggle button svg { width:15px; height:15px; }
.view-toggle button:hover { color:var(--ink); }
.view-toggle button.is-active { background:var(--paper); color:var(--bp-teal); box-shadow:var(--sh-1); }

/* the powder/capsule/drops tag that now sits on every card */
.form-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-pill);
  font-size:.66rem; font-weight:var(--w-med); background:var(--paper-3); color:var(--ink-2); }
.form-pill svg { width:12px; height:12px; }
.form-pill--powder  { background:#f3f6dd; color:#5f6e15; }
.form-pill--capsule { background:var(--bp-teal-08); color:var(--bp-teal); }
.form-pill--drops   { background:#eaf2f4; color:var(--bp-slate); }

/* moment sub-header inside a grouped view */
.moment-head { display:flex; align-items:center; gap:10px; margin:22px 0 12px; }
.moment-head:first-child { margin-top:4px; }
.moment-head .eyebrow { color:var(--bp-teal); }
.moment-head__t { font-size:.66rem; color:var(--ink-3); font-weight:var(--w-med); }
.moment-head::after { content:""; flex:1; height:1px; background:var(--line); }

/* the smoothie banner (powders that blend together) */
.smoothie { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:18px 20px;
  border-radius:var(--r-lg); background:linear-gradient(120deg,#eef4dd,#e6f1e4); border:1px solid #d7e6c9; margin-bottom:16px; }
.smoothie__icon { width:52px; height:52px; border-radius:15px; flex:none; display:grid; place-items:center;
  color:#fff; background:linear-gradient(140deg,var(--bp-olive),var(--bp-emerald)); }
.smoothie__icon svg { width:26px; height:26px; }
.smoothie h3 { font-weight:var(--w-med); font-size:1.06rem; }
.smoothie .chips { margin-top:11px; }

/* ===========================================================================
   QUESTIONNAIRE (the mini test / analysis flow) — design parity pass
   2026-07-18 (Jesse: "that design should be re-done with the input of the
   Analysis page as leading"). Kills the raw browser-default fieldset borders
   ("the lines around the answers") and the plain-black feel; every colour and
   radius comes from tokens.
   =========================================================================== */
.qz-card { }
.qz-items { margin-top:12px; }
/* .qz-item is a plain div group (NOT fieldset/legend): WebKit lays a floated
   legend out shrink-to-fit, which collapsed every control into a sliver
   outside the card (design wave 2, Jesse's 2026-07-18 screenshots). Plain
   block flow needs no float/clear tricks and renders identically everywhere. */
.qz-item {
  margin:0; min-width:0;
  padding:18px 18px 16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.qz-item + .qz-item { margin-top:14px; }
.qz-item__prompt {
  margin:0 0 10px;
  color:var(--ink); font-weight:var(--w-med); font-size:1.02rem; line-height:var(--lh-snug);
}
.qz-item__help { margin:-2px 0 10px; color:var(--ink-2); font-size:var(--t-sm); line-height:var(--lh-body); }
/* long labels (NL) may never wrap word-per-line in the pick rows */
.qz-item .scale .choice { flex:1 1 170px; min-width:150px; }
.qz-item .choice { background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-md); }
.qz-item .choice:hover { border-color:var(--bp-teal-40); box-shadow:none; }
.qz-item .choice:has(input:checked) { border-color:var(--bp-lime); box-shadow:inset 0 0 0 1px var(--bp-lime); background:#fbfdf1; }
.qz-num { border-color:var(--line-2); }
.qz-unit {
  display:inline-flex; align-items:center; padding:6px 12px;
  background:var(--bp-teal-08); color:var(--bp-teal);
  border-radius:var(--r-pill); font-size:.78rem; font-weight:var(--w-med); letter-spacing:.03em;
}
/* front page area chips */
.qz-areas { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.qz-area {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
}
.qz-area__ico { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none; }
.qz-area__ico svg { width:16px; height:16px; }
.qz-area__label { font-size:.85rem; font-weight:var(--w-med); color:var(--ink); }
.qz-note { margin-top:16px; padding:14px 16px; background:var(--bp-sand-soft); border-radius:var(--r-md); color:var(--ink-2); }