/* ============================================================
   Franco's Fit Coach — MFP-inspired light theme
   ============================================================ */

:root {
  --brand: #00b49c;
  --brand-dark: #009884;
  --brand-light: #e6f9f6;
  /* Text on a --brand-light chip. Ben, 9/2: "Once the workout is logged the RPE
     toggle is still blended in." Measured --brand on --brand-light at 2.4:1 and
     --brand-dark at 3.3:1, both under the 4.5 AA floor. This is 5.53:1 there and
     6.03:1 on white. It exists separately because --brand-dark is also a hover
     BACKGROUND in ~10 places, so it could not simply be darkened. */
  --brand-on-light: #00705f;
  --brand-mid: #ccf2ec;

  /* One horizontal gutter for the whole app. Sections that opt out of the
     global .tab-content padding were each inventing their own (16px, 14px,
     0px) against the global 20px, so buttons and numbers sat at different
     distances from the edge on every screen and some looked like they bled
     off it (Ben, 8/21). */
  --gutter: 20px;

  --sport: #6c3fff;
  --sport-light: #f0ebff;

  --bg: #f4f6f5;
  --surface: #ffffff;
  --surface2: #f9fafa;
  --border: #e8eceb;
  --border-dark: #d0d8d6;

  --text: #1a1a1a;
  --text-muted: #6b7c7a;
  --text-dim: #b0bbb9;

  /* Traffic light */
  --green: #27ae60;
  --green-bg: #eafaf1;
  --yellow: #f39c12;
  --yellow-bg: #fef9ec;
  --red: #e74c3c;
  --red-bg: #fdf0ef;

  /* Macros */
  --cal-color: #e74c3c;
  --protein-color: #2980b9;
  --carbs-color: #e67e22;
  --fat-color: #8e44ad;
  --fiber-color: #2e9e5b;
  --sugar-color: #d6457a;
  --sodium-color: #5f7480;

  --success: #27ae60;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
}

/* ── DARK MODE ──────────────────────────────────────────────────────────
 *
 * Ben, 9/18: "the toggle for light and dark put it in settings".
 *
 * THREE STATES, NOT TWO. data-theme="dark" and data-theme="light" are an
 * explicit choice; NO attribute means Auto, and only prefers-color-scheme
 * decides. Auto is the default because it is what most people want without
 * thinking about it. Every token is redefined in both places or a phone set
 * to dark would get one theme's text on the other theme's ground.
 *
 * The palette is the gym floor one from the session overlay, lifted one step
 * lighter: a full app read in daylight needs less contrast than a countdown
 * read across a gym. The session stays on its own darker, brighter values —
 * it is a different job.
 *
 * WHY THIS IS SAFE TO DO AT ALL, measured first:
 *   4,586 rules already resolve through var(--token)
 *     523 literal bg/text colours sit outside :root — but 165 of those are
 *         #fff on a coloured fill, which is correct in either theme
 *      43 are white text with no coloured background, and nearly all of
 *         those sit on gradient headers that are dark in both themes
 * So this is a token swap plus a short list of fix-ups, not a restyle. */
:root[data-theme="dark"],
:root[data-theme="dark"] body {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* One list, applied by both selectors below, so the two can never drift. */
:root[data-theme="dark"] {
  --bg: #101817;
  --surface: #18211f;
  --surface2: #131b1a;
  --border: #2b3835;
  --border-dark: #3a4a46;

  --text: #e9efed;
  --text-muted: #94a3a0;
  --text-dim: #6d7c79;

  --brand: #22cdb2;
  --brand-dark: #6ae8d3;        /* hover/darker in light = LIGHTER in dark */
  --brand-on-light: #04100e;    /* text on a brand fill, now a dark ink */
  --brand-light: #0f2a26;
  --brand-mid: #17423b;

  --green: #3ddc84;  --green-bg: #0f2a1c;
  --yellow: #ffc247; --yellow-bg: #2a2110;
  --red: #ff6b5b;    --red-bg: #2e1512;
  --success: #3ddc84;
  --sport: #9f7bff;  --sport-light: #1f1836;

  --cal-color: #ff6b5b; --protein-color: #5aa9e6;
  --carbs-color: #f0a35e; --fat-color: #b18aff;
  --fiber-color: #5fd08f; --sugar-color: #f27aa6; --sodium-color: #9fb4bf;

  --shadow: 0 1px 3px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 6px 22px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101817;
    --surface: #18211f;
    --surface2: #131b1a;
    --border: #2b3835;
    --border-dark: #3a4a46;

    --text: #e9efed;
    --text-muted: #94a3a0;
    --text-dim: #6d7c79;

    --brand: #22cdb2;
    --brand-dark: #6ae8d3;
    --brand-on-light: #04100e;
    --brand-light: #0f2a26;
    --brand-mid: #17423b;

    --green: #3ddc84;  --green-bg: #0f2a1c;
    --yellow: #ffc247; --yellow-bg: #2a2110;
    --red: #ff6b5b;    --red-bg: #2e1512;
    --success: #3ddc84;
    --sport: #9f7bff;  --sport-light: #1f1836;

    --cal-color: #ff6b5b; --protein-color: #5aa9e6;
    --carbs-color: #f0a35e; --fat-color: #b18aff;
    --fiber-color: #5fd08f; --sugar-color: #f27aa6; --sodium-color: #9fb4bf;

    --shadow: 0 1px 3px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
    --shadow-md: 0 6px 22px rgba(0,0,0,.5);
  }
}

/* The literals that actually invert. Found by scanning for a #fff text
 * colour with no coloured background in the same rule: 43 of them, and
 * nearly all sit on gradient headers that are dark in both themes. These
 * are the ones that are not. */
:root[data-theme="dark"] .btn-send-coach,
:root:not([data-theme="light"]) .btn-send-coach {
  /* white on var(--text) — the text token goes light in dark, so the label
   * would be white on near-white. */
  color: var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-send-coach { color: var(--bg); }
}

/* ── Appearance picker, in Settings ─────────────────────────────────── */
.theme-choices { display: flex; gap: 8px; padding: 4px 0 2px; flex-wrap: wrap; }
.theme-choice {
  flex: 1; min-width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 8px 10px;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface2); color: var(--text-muted);
  font: inherit; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.theme-choice svg { width: 20px; height: 20px; }
.theme-choice span { font-size: 13px; font-weight: 700; color: var(--text); }
.theme-choice small { font-size: 10.5px; font-weight: 500; color: var(--text-dim); }
.theme-choice:hover { border-color: var(--brand); }
.theme-choice[aria-checked="true"] {
  border-color: var(--brand); background: var(--brand-light);
  color: var(--brand-on-light);
}
.theme-choice[aria-checked="true"] span,
.theme-choice[aria-checked="true"] small { color: var(--brand-dark); }
.theme-choice:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-sess-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 2px 2px; font-size: 13px; color: var(--text);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ── Mobile global ───────────────────────────────────────────── */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Instant press feedback on all tappable elements */
.btn-primary:active,
.btn-primary-sm:active,
.btn-ghost:active,
.btn-ghost-sm:active,
.btn-outline:active,
.tab-btn:active,
.q-chip:active,
.sob-chip:active,
.sob-chip-multi:active,
.calc-chip:active,
.coach-style-btn:active,
.gob-goal-btn:active,
.gob-toggle-btn:active,
.gob-activity-btn:active,
.upload-card:active,
.supp-schedule-item:active,
.modal-option:active,
.meal-card:active {
  opacity: 0.75;
  transform: scale(0.98);
  transition: none;
}

input, select, textarea {
  font-size: 16px; /* prevents iOS zoom */
  -webkit-appearance: none;
}
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100dvh;
  overscroll-behavior: none;
  /* The page must NEVER pan sideways — any over-wide element (photo card,
     long name) let iOS drag the whole page horizontally. clip > hidden: no
     scroll context created; hidden kept as fallback for older WebKit. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  position: relative;
}

/* ── Header ──────────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-logo {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--brand);
}
.header-logo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.header-logo-fallback {
  width: 36px; height: 36px;
  background: var(--brand);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px; color: #fff;
  flex-shrink: 0;
}

.header-text { flex: 1; }
.app-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.app-tagline {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

.header-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: background 0.15s;
}
.header-btn:hover { background: var(--bg); }

.header-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}
.header-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 999;
  overflow: hidden;
}
.header-dropdown-item {
  display: block;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.header-dropdown-item:hover { background: var(--bg); }
.header-dropdown-item--danger { color: var(--red); border-top: 1px solid var(--border); }

/* App Store build (see window.isNativeApp in index.html): the iPhone app is
   the client app only — no Coach Mode, no prices, no checkout. */
.native-app [data-web-only] { display: none !important; }
:root:not(.native-app) [data-native-only] { display: none !important; }

/* ── Bottom Tab Nav ──────────────────────────────────────── */
.tab-nav {
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-btn {
  flex: 1;
  position: relative;   /* anchors .tab-flag-dot */
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  padding: 12px 4px 10px;
  min-height: 54px;
  cursor: pointer;
  transition: color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.2px;
}
.tab-btn .tab-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.tab-btn.active { color: var(--brand); }
.tab-btn.active .tab-icon { transform: scale(1.1); }
.tab-btn:hover:not(.active) { color: var(--text-muted); }

.sport-tab-btn.active { color: var(--sport); }

/* ── Tab Content ─────────────────────────────────────────── */
.tab-content {
  display: none;
  flex: 1;
  /* The bottom nav is fixed, so the page must reserve room for it. 104px was a
     flat guess that ignored the iPhone home-bar inset — on a modern iPhone the
     nav is taller than that and the last card sat underneath it, half covered
     (Ben, 8/11). Reserve the nav height PLUS the safe-area inset, plus a
     little breathing room so the last item is comfortably tappable. */
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px) + 16px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tab-content.active { display: block; }

/* ── Global mobile spacing ───────────────────────────────── */
/* Every direct child section of a tab gets consistent side padding */
.tab-content > *:not(.modal-overlay) {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* Sections that already handle their own horizontal padding */
.tab-content > #cwSessionOverlay,
.tab-content > #cwSummary,
.tab-content > .today-summary-card,
.tab-content > .missing-wrap,
.tab-content > .meal-list,
.tab-content > .past-day-trigger,
.tab-content > .quick-search-wrap,
.tab-content > .quick-list,
.tab-content > .sport-hero,
.tab-content > .sport-section,
.tab-content > .sport-plan-output,
.tab-content > #trendSection,
.tab-content > .supp-hero,
.tab-content > .supp-section,
.tab-content > .goals-form,
.tab-content > .camera-hero,
.tab-content > .analysis-area,
.tab-content > .clarify-panel,
.tab-content > .log-success,
.tab-content > .apple-health-btn {
  padding-left: 0;
  padding-right: 0;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: 0.1px;
}
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:active { transform: scale(0.98); }

.btn-primary-sm {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary-sm:hover { background: var(--brand-dark); }

.btn-secondary-sm {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-secondary-sm:hover { background: var(--bg); }

.btn-ghost {
  background: none;
  color: var(--text-muted);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 18px;
  min-height: 48px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-ghost:hover { background: var(--bg); color: var(--text); }

.btn-ghost-sm {
  background: none;
  color: var(--text-muted);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.btn-outline {
  background: none;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-outline:hover { background: var(--brand); color: #fff; }

.btn-full { width: 100%; }

.btn-upload {
  background: var(--surface);
  color: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
}
.btn-upload:hover { background: var(--brand); color: #fff; }
.btn-upload.done {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green);
}
.upload-saved {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.upload-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.upload-file-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
/* Ben, 8/23: an always-visible ✕ made uploaded labs "very easy to delete" —
   one stray tap destroyed a blood panel the client had to go and collect.
   Deleting now takes two deliberate actions: select the row, then confirm.
   Covers sleep, blood work, training logs and body composition — one renderer
   builds all four. */
.upload-file-row .btn-upload-sm.remove {
  display: none;
}
.upload-file-row.selected {
  border-color: var(--brand);
  background: var(--brand-light);
}
.upload-file-row.selected .btn-upload-sm.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.upload-file-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.upload-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.upload-dot.analyzed { background: #22c55e; }
.upload-dot.not-analyzed { background: #ef4444; }
.upload-dot.pending { background: #d1d5db; }
.upload-file-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.upload-file-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-file-preview {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.upload-file-date {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.btn-upload-sm.add-more {
  color: var(--brand);
  border-color: var(--brand);
}
.upload-saved-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.upload-saved-check {
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}
.upload-saved-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-saved-date {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.upload-saved-actions {
  display: flex;
  gap: 6px;
}
.btn-upload-sm {
  background: var(--surface);
  color: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
}
.btn-upload-sm:hover { background: var(--brand); color: #fff; }
.btn-upload-sm.remove {
  color: var(--red);
  border-color: var(--red);
}
.btn-upload-sm.remove:hover { background: var(--red); color: #fff; }

/* Upload sheet */
.upload-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.upload-sheet-overlay.open { opacity: 1; }
.upload-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 12px 20px 40px;
  width: 100%;
  max-width: 480px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1);
}
.upload-sheet-overlay.open .upload-sheet { transform: translateY(0); }
.upload-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border-dark);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.upload-sheet-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.upload-sheet-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.upload-sheet-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.upload-sheet-option:hover { border-color: var(--brand); background: var(--brand-light); }
.upload-sheet-option-icon { font-size: 24px; flex-shrink: 0; }
.upload-sheet-option-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.upload-sheet-option-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.upload-sheet-cancel {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  padding: 14px;
  cursor: pointer;
  margin-top: 4px;
}

/* ── Rex the analyzer (analysis loading mascot) ──────────── */
.rex-stage { display: flex; justify-content: center; margin: 2px 0 12px; }
.rex { width: 96px; height: auto; transform-origin: 50% 92%; animation: rexBounce 0.55s ease-in-out infinite alternate; }
.rex g { transform-box: fill-box; }
.rex-tail  { transform-origin: 90% 50%; animation: rexTail 0.55s ease-in-out infinite alternate; }
.rex-leg-l { transform-origin: 50% 10%; animation: rexLegL 0.55s ease-in-out infinite alternate; }
.rex-leg-r { transform-origin: 50% 10%; animation: rexLegR 0.55s ease-in-out infinite alternate; }
.rex-arm   { transform-origin: 10% 50%; animation: rexArm 0.28s ease-in-out infinite alternate; }
@keyframes rexBounce { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-7px) rotate(3deg); } }
@keyframes rexTail   { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes rexLegL   { from { transform: rotate(0deg) translateY(0); } to { transform: rotate(-12deg) translateY(-4px); } }
@keyframes rexLegR   { from { transform: rotate(12deg) translateY(-4px); } to { transform: rotate(0deg) translateY(0); } }
@keyframes rexArm    { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }

.rex-captions { position: relative; height: 22px; margin-top: 10px; text-align: center; }
.rex-captions span {
  position: absolute; left: 0; right: 0;
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  opacity: 0;
  animation: rexCap 10s linear infinite;
}
.rex-captions span:nth-child(2) { animation-delay: 2.5s; }
.rex-captions span:nth-child(3) { animation-delay: 5s; }
.rex-captions span:nth-child(4) { animation-delay: 7.5s; }
@keyframes rexCap {
  0% { opacity: 0; } 4% { opacity: 1; } 21% { opacity: 1; } 26% { opacity: 0; } 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rex, .rex-tail, .rex-leg-l, .rex-leg-r, .rex-arm { animation: none; }
  .rex-captions span { animation: none; opacity: 0; }
  .rex-captions span:first-child { opacity: 1; }
}

/* ── Rex the mascot — My Day engagement card ──────────────
   Same character and the SAME keyframes as the analyze loader above; only
   the TEMPO changes with the client's streak. The loader dances at 0.55s
   because it is working — a mascot that dances that hard all day is
   exhausting, so each step down slows him until he stops entirely. */
.rex-card {
  display: flex; align-items: center; gap: 14px;
  /* Ben, 10/3 ask: "show me more revisions" — --card-bg was never defined
     anywhere in the stylesheet, so this always fell back to a literal
     #fff: a glaring solid-white tile on a dark background. --surface is
     the real theme token every other card on this screen already uses. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
/* Ben, 10/7: "under today is rex, water, message, habits can we clean all
   that up too look better and even more fun not just line itemed" — Rex
   was a plain white card, visually identical to every other card on the
   page. A level-matched gradient instead: warm and bright at his thriving
   levels, flattening toward grey as he winds down — the card's own mood
   now matches his, rather than celebrating a sleeping dinosaur. */
.rex-lv-4.rex-card { background: linear-gradient(135deg, var(--brand-light), var(--surface) 70%); border-color: var(--brand-mid); }
.rex-lv-3.rex-card { background: linear-gradient(135deg, var(--brand-light), var(--surface) 85%); }
.rex-lv-2.rex-card, .rex-lv-1.rex-card, .rex-lv-0.rex-card { background: var(--surface2); }
.rex-card .rex-mascot { width: 92px; flex: 0 0 92px; height: auto; }
.rex-card-body { min-width: 0; }
.rex-card-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.rex-card-line  { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

/* Tempo per state. */
.rex-lv-4 { --rex-beat: 0.75s; --rex-arm: 0.38s; }
.rex-lv-3 { --rex-beat: 1.15s; --rex-arm: 0.6s;  }
.rex-lv-2 { --rex-beat: 1.9s;  --rex-arm: 1.1s;  }
.rex-lv-1 { --rex-beat: 3.2s;  --rex-arm: 2.2s;  }

.rex-mascot { transform-origin: 50% 92%;
              animation: rexBounce var(--rex-beat) ease-in-out infinite alternate; }
.rex-mascot g { transform-box: fill-box; }
.rex-mascot .rex-tail  { transform-origin: 90% 50%; animation: rexTail var(--rex-beat) ease-in-out infinite alternate; }
.rex-mascot .rex-leg-l { transform-origin: 50% 10%; animation: rexLegL var(--rex-beat) ease-in-out infinite alternate; }
.rex-mascot .rex-leg-r { transform-origin: 50% 10%; animation: rexLegR var(--rex-beat) ease-in-out infinite alternate; }
.rex-mascot .rex-arm   { transform-origin: 10% 50%; animation: rexArm  var(--rex-arm)  ease-in-out infinite alternate; }

/* Wings — thriving only. HOVER pattern: a fast, shallow buzz rather than a
   slow flap, with three separated primaries a side. Ben chose this on 8/27
   from five patterns shown in motion.
   The beat is deliberately NOT tied to --rex-beat: a hover cycles far faster
   than the body's gait, and half the body tempo read as a lazy flap.
   transform-origin is set in USER UNITS against the VIEWBOX (transform-box:
   view-box), not percentages. A percentage — or fill-box — is relative to the
   element's own bounding box, so reshaping the wings silently moved the hinge.
   54,66 is the shoulder joint in the 140x120 viewBox and stays put whatever
   shape the wings take. */
.rex-wing-far  { transform-box: view-box; transform-origin: 54px 66px; animation: rexWingFar  .34s ease-in-out infinite alternate; }
.rex-wing-near { transform-box: view-box; transform-origin: 54px 62px; animation: rexWingNear .34s ease-in-out infinite alternate; }
@keyframes rexWingFar  { from { transform: rotate(-9deg); } to { transform: rotate(4deg); } }
@keyframes rexWingNear { from { transform: rotate(9deg); }  to { transform: rotate(-4deg); } }

/* Jaw — hinged at the joint so the chin swings down, rather than the whole
   head splitting open. Double-snap: two fast bites then a rest, which is how
   an animal actually chews. The rest is what makes it read as alive. */
/* Asleep: all motion stops. Stillness reads as dormant without needing a sad
   face — the ABSENCE of the dance is the signal. */
.rex-lv-0 .rex-mascot,
.rex-lv-0 .rex-mascot .rex-tail, .rex-lv-0 .rex-mascot .rex-leg-l,
.rex-lv-0 .rex-mascot .rex-leg-r, .rex-lv-0 .rex-mascot .rex-arm { animation: none; }
.rex-lv-0 .rex-mascot { transform: translateY(2px) rotate(-2deg); }

@media (prefers-reduced-motion: reduce) {
  .rex-mascot, .rex-mascot g,
  .rex-wing-far, .rex-wing-near { animation: none !important; }
}

/* ── Manual-add unit row ─────────────────────────────────── */
.serving-row { flex-direction: column; align-items: stretch; gap: 8px; }
.serving-row-inner { display: flex; align-items: center; gap: 10px; }
#manualUnitToggle { margin-bottom: 2px; }

/* ── Meal-type chips on the clarify screen ───────────────── */
.meal-chips-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 10px 0 4px;
}
.meal-chips-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin-right: 2px;
}
.meal-chip {
  padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.meal-chip.active { border-color: var(--brand); background: var(--brand-light, rgba(0,180,156,.12)); color: var(--brand-on-light); }

/* ── Barcode product verdict (Olive/Yuka-style scorecard) ── */
.bv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: var(--shadow-sm);
}
.bv-score-head { display: flex; align-items: center; gap: 12px; }
.bv-score-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.bv-score-num { font-size: 26px; font-weight: 900; color: var(--text); line-height: 1.1; }
.bv-score-denom { font-size: 15px; font-weight: 700; color: var(--text-muted); }
.bv-score-word { font-size: 13px; font-weight: 800; }
.bv-est { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.bv-section-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin: 14px 0 8px;
}
.bv-analysis {
  background: var(--bg); border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--text);
}
.bv-analysis #bvBetterPick { font-weight: 700; color: var(--brand); }
.bv-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 6px; cursor: pointer;
}
.bv-row-label { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.bv-chip {
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px;
}
.bv-chip-0 { background: color-mix(in srgb, #1a9850 15%, transparent); color: #1a9850; }
.bv-chip-1 { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.bv-chip-2 { background: color-mix(in srgb, #ef4444 14%, transparent); color: #dc2626; }
.bv-row-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.bv-row-chev { font-size: 12px; color: var(--text-muted); }
.bv-row-detail {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
  padding: 2px 14px 10px; margin-top: -2px;
}

/* ── Pull-to-refresh + update pill ───────────────────────── */
.ptr-indicator {
  position: fixed; top: calc(6px + env(safe-area-inset-top)); left: 50%;
  transform: translate(-50%, 0);
  z-index: 9700;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px; font-weight: 700; color: var(--text);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.15));
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.update-pill {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  z-index: 9700;
  background: var(--brand); color: #fff;
  border: none; border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 40%, transparent);
  cursor: pointer;
  animation: splashIn 0.25s ease-out;
}

/* ── Coach Food Library pane ─────────────────────────────── */
.tr-foods-intro { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin: 4px 0 12px; }
.tr-foods-paste {
  width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; color: var(--text);
  font-family: inherit; resize: vertical; margin-bottom: 10px;
}
.tr-foods-preview-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 14px 0 8px; }
.tr-foods-preview-actions { display: flex; gap: 8px; margin: 12px 0 18px; }
.tr-foods-cancel {
  background: none; border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 8px 14px; cursor: pointer;
}
.tr-foods-list { margin-top: 14px; }

/* ── Coach Mode: movement-pattern review ───────────────────────────────────
   Built for scanning several hundred rows quickly: dense rows, a big hit area
   on the checkbox, and per-row save feedback so a failed write can never be
   mistaken for a saved one. */
.tr-pat-intro { margin-bottom: 14px; }
.tr-pat-title { font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 6px; }
.tr-pat-sub   { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 8px; }
.tr-pat-note  {
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
  background: var(--bg-subtle, rgba(127,127,127,0.06));
  border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0;
  padding: 8px 11px; margin: 0;
}
.tr-pat-status { font-size: 12px; font-weight: 700; color: var(--text-dim); margin: 12px 0 8px; }
.tr-pat-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.tr-pat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; min-height: 40px;
  border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.tr-pat-chip:hover { border-color: var(--brand); }
.tr-pat-chip.active { border-color: var(--brand); background: var(--brand); color: #fff; }
.tr-pat-chip-n {
  font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-subtle, rgba(127,127,127,0.12)); color: var(--text-muted);
}
.tr-pat-chip.active .tr-pat-chip-n { background: rgba(255,255,255,0.25); color: #fff; }
.tr-pat-listhead { margin: 14px 0 8px; }
.tr-pat-head-label { font-size: 15px; font-weight: 800; color: var(--text); }
.tr-pat-head-blurb { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.tr-pat-head-count { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-top: 6px; }
.tr-pat-list { display: flex; flex-direction: column; gap: 6px; }
.tr-pat-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg); cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
}
.tr-pat-row.on { border-color: var(--brand); background: var(--brand-light); }
.tr-pat-row.saving { opacity: 0.5; }
.tr-pat-row.save-failed { border-color: #cc3333; background: rgba(204,51,51,0.08); }
.tr-pat-check { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; cursor: pointer; accent-color: var(--brand); }
.tr-pat-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-pat-row-name { font-size: 14px; font-weight: 700; color: var(--text); }
.tr-pat-row-meta { font-size: 11.5px; color: var(--text-muted); }
.tr-pat-row-others { font-size: 11px; color: var(--text-dim); font-style: italic; }
.tr-pat-empty { font-size: 13.5px; color: var(--text-muted); text-align: center; padding: 22px 0; }

/* ── Coach Mode: system map ────────────────────────────────────────────────
   Health answers "is it working". This answers "how is it wired" — an
   architecture reference that stays honest because it's built from the code. */
.tr-sys-body { margin-top: 14px; }
.tr-sys-legend {
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
  background: var(--bg-subtle, rgba(127,127,127,0.06));
  border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0;
  padding: 9px 12px; margin-bottom: 18px;
}
.tr-sys-section { margin-bottom: 24px; }
.tr-sys-h { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.tr-sys-cap, .tr-sys-fansub {
  font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px;
}
/* Outside services */
.tr-sys-ext { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.tr-sys-extcard {
  border: 1.5px solid var(--border); border-left-width: 4px; border-radius: 10px;
  padding: 10px 12px; background: var(--bg);
}
.tr-sys-extname   { font-size: 13.5px; font-weight: 800; color: var(--text); }
.tr-sys-extdetail { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.tr-sys-extusers  { font-size: 11px; color: var(--text-dim); margin-top: 6px; word-break: break-word; }
.tr-sys-dim { opacity: 0.7; font-style: italic; }
.tr-sys-db    { border-left-color: #3ecf8e; }
.tr-sys-ai    { border-left-color: #b07cff; }
.tr-sys-pay   { border-left-color: #635bff; }
.tr-sys-push  { border-left-color: #ff8c1a; }
.tr-sys-food  { border-left-color: #3fa9ff; }
.tr-sys-video { border-left-color: #ff2e4d; }
.tr-sys-shop  { border-left-color: #ffd23f; }
.tr-sys-health{ border-left-color: #00b49c; }
/* Endpoints */
.tr-sys-ep {
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 11px 12px; margin-bottom: 8px; background: var(--bg);
}
.tr-sys-ep-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tr-sys-ep-path { font-size: 13.5px; font-weight: 800; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tr-sys-probe { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.tr-sys-probe.ok  { background: rgba(0,180,156,0.14); color: var(--brand); }
.tr-sys-probe.bad { background: rgba(204,51,51,0.12); color: #cc3333; }
.tr-sys-ep-role { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.tr-sys-ep-deps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tr-sys-tag {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
  background: var(--bg-subtle, rgba(127,127,127,0.1)); color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tr-sys-tag-ext { background: rgba(0,180,156,0.12); color: var(--brand); font-family: inherit; }
.tr-sys-ep-note {
  font-size: 11.5px; color: var(--text-dim); margin-top: 7px;
  padding-top: 7px; border-top: 1px dashed var(--border); line-height: 1.45;
}
/* Flows */
.tr-sys-flow { margin-bottom: 12px; }
.tr-sys-flow-label { font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.tr-sys-flow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tr-sys-step {
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 7px;
  background: var(--bg-subtle, rgba(127,127,127,0.08));
  border: 1px solid var(--border); color: var(--text-muted);
}
.tr-sys-arrow { font-size: 11px; color: var(--text-dim); }
/* Table fan-out */
.tr-sys-fan { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.tr-sys-fan-name { font-size: 12px; font-weight: 700; color: var(--text); width: 140px; flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tr-sys-fan-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-subtle, rgba(127,127,127,0.12)); overflow: hidden; }
.tr-sys-fan-fill { height: 100%; background: var(--brand); border-radius: 999px; }
.tr-sys-fan-n { font-size: 11px; font-weight: 700; color: var(--text-muted); width: 92px; text-align: right; flex-shrink: 0; }
/* Crons */
.tr-sys-cron {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.tr-sys-cron-when { font-size: 11.5px; font-weight: 800; color: var(--brand); width: 190px; flex-shrink: 0; }
.tr-sys-cron-what { font-size: 12.5px; color: var(--text); flex: 1; min-width: 160px; }
.tr-sys-cron-hits { font-size: 11px; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── Duplicate-meal confirmation ───────────────────────────────────────────
   Clients couldn't remember whether they'd already logged a meal. This asks
   rather than blocks — second helpings are real — and names the earlier entry
   with its time so the answer is obvious without leaving the screen. */
.dup-overlay {
  position: fixed; inset: 0; z-index: 1800;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0.45);
  padding: 16px;
}
@media (min-width: 620px) { .dup-overlay { align-items: center; } }
.dup-card {
  width: 100%; max-width: 460px;
  background: var(--surface, var(--bg)); color: var(--text);
  border-radius: 18px; padding: 20px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.28);
}
.dup-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.dup-body  { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.dup-q     { font-size: 14.5px; font-weight: 700; margin-top: 10px; }
.dup-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
@media (min-width: 460px) { .dup-actions { flex-direction: row-reverse; } }
.dup-btn-primary, .dup-btn-ghost {
  flex: 1; padding: 13px 16px; border-radius: 12px; min-height: 48px;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.dup-btn-primary { border: none; background: var(--brand); color: #fff; }
.dup-btn-ghost   { border: 1.5px solid var(--border); background: transparent; color: var(--text-muted); }

/* ── Coach workout editor: matches the client session card ─────────────────
   Ben wants ONE design in both places. The editor row reuses the client card's
   classes (cw-session-ex-card, cw-ex-controls, cw-target-toggle, cw-sets-wrap)
   so they can't drift; these rules only cover what's editor-specific. */
.tr-we-row.cw-session-ex-card {
  display: block; padding: 14px; margin-bottom: 12px;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface, var(--bg));
}
.tr-we-row.cw-session-ex-card .cw-session-ex-hdr {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.cw-session-ex-name-input {
  width: 100%; box-sizing: border-box; padding: 6px 9px;
  border: 1.5px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text);
  font-size: 15px; font-weight: 800; font-family: inherit; outline: none;
}
.cw-session-ex-name-input:hover  { border-color: var(--border); }
.cw-session-ex-name-input:focus  { border-color: var(--brand); background: var(--bg); }
/* Tempo + hold collapse until used — two always-open text boxes made every
   exercise look half-filled-in. Mirrors the client's chip behaviour. */
.cw-int-details {
  margin-bottom: 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-subtle, rgba(127,127,127,0.04));
}
.cw-int-details[open] { border-color: var(--brand); background: var(--brand-light); }
.cw-int-summary {
  list-style: none; cursor: pointer; padding: 8px 12px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim);
}
.cw-int-summary::-webkit-details-marker { display: none; }
.cw-int-summary::before { content: '+ '; font-weight: 800; }
.cw-int-details[open] .cw-int-summary::before { content: '– '; }
.cw-int-details[open] .cw-int-summary { color: var(--brand); }
.cw-int-summary-hint {
  margin-left: 8px; text-transform: none; letter-spacing: 0;
  font-weight: 600; color: var(--text-muted);
}
/* display:flex on a <details> child overrides the browser's own hiding —
   this bit us before on "More ways to log". */
.cw-int-details .cw-int-row { display: none; }
.cw-int-details[open] .cw-int-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 11px; }
.cw-int-field { flex: 1 1 46%; min-width: 150px; margin-bottom: 0 !important; }
.cw-ctrl-reps { width: 74px; text-align: center; }
/* Per-set weight + reps, then an optional note. The placeholders inherit the
   exercise defaults, so a coach only types where a set DIFFERS. */
.cn-set-weight, .cn-set-target {
  flex: 0 0 76px; padding: 6px 9px;
  border: 1.5px solid var(--border); border-radius: 7px;
  background: var(--bg); color: var(--text);
  font-size: 12.5px; font-family: inherit; text-align: center; outline: none;
}
.cn-set-weight:focus, .cn-set-target:focus { border-color: var(--brand); }
/* A set that overrides the default reads as filled-in at a glance */
.cn-set-weight:not(:placeholder-shown), .cn-set-target:not(:placeholder-shown) {
  border-color: var(--brand); background: var(--brand-light); font-weight: 700;
}
.cw-ex-note-full { margin-top: 10px; margin-bottom: 0 !important; }

/* ── Per-exercise photo/video attach (Ben, 10/2) ──────────────────────────
 * "if i could easily drag there videos or pics next to the exercise they
 * did that would be awesome and it needs to be able to store the data" —
 * a drop zone + thumbnail strip on the live session logger card, right
 * below the coach note. */
.tr-we-media { margin-top: 10px; }
.tr-we-media-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 6px;
}
.tr-we-med-item { position: relative; }
.tr-we-med-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--surface2); border: 1.5px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  overflow: hidden;   /* clips the real photo (.tr-we-med-thumb-img) to the box */
}
.tr-we-med-thumb:hover { border-color: var(--brand); color: var(--brand); }
.tr-we-med-video { color: var(--brand); }
/* Ben, 10/2: "can we show the actual pic in the thumbnail display" — the
   signed photo, once weSignMediaThumbs resolves it, replaces the generic
   camera icon. Same 44px box as the icon it swaps into, object-fit so a
   tall or wide photo still fills the square without distortion. */
.tr-we-med-thumb-img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.tr-we-med-rm {
  position: absolute; top: -5px; right: -5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); color: #fff; border: 1.5px solid var(--surface);
  font-size: 9px; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.tr-we-media-add-row { display: flex; align-items: stretch; gap: 6px; }
.tr-we-media-add {
  display: flex; align-items: center; gap: 6px; flex: 1;
  padding: 8px 10px; border-radius: 8px;
  border: 1.5px dashed var(--border-dark); color: var(--text-muted);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.tr-we-media-add:hover { border-color: var(--brand); color: var(--brand); }
/* Dragover state — toggled by weBindMediaDropZones, not :hover, since a
   file being dragged over the zone is not the same as a mouse hover. */
.tr-we-media.tr-we-media-over .tr-we-media-add {
  border-color: var(--brand); background: var(--brand-light); color: var(--brand);
}
/* Ben, 10/2: "i need to hit command shift 5... is there an easier way" —
   opens the Mac's own camera right in the session logger instead. Same
   height as the drop zone it sits beside, square so it reads as one tap
   target rather than a second text row. */
.tr-we-media-cam {
  display: flex; align-items: center; justify-content: center;
  width: 38px; flex-shrink: 0; border-radius: 8px;
  border: 1.5px solid var(--border-dark); background: none; color: var(--text-muted);
  cursor: pointer;
}
.tr-we-media-cam:hover { border-color: var(--brand); color: var(--brand); }
.tr-we-media-progress {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: 11.5px; color: var(--text-muted);
}
/* The track is a real element (.tr-we-media-track), not a pseudo-element —
   .tr-we-media-bar is a sibling <div> in the markup (data-wemedbar), so it
   needs a real positioned parent to size against, not a ::before it is not
   actually nested inside. */
.tr-we-media-track {
  flex: 1; height: 4px; border-radius: 2px; background: var(--surface2);
  position: relative; overflow: hidden;
}
.tr-we-media-bar {
  height: 4px; border-radius: 2px; background: var(--brand);
  width: 0%; transition: width .2s ease;
  position: absolute; left: 0; top: 0;
}
/* The real file input — kept functional but invisible; .tr-we-media-add
   (the label wrapping it) is what actually renders as the drop/pick zone. */
.tr-we-media-input { display: none; }
/* The viewer lightbox body (openWeMediaViewer) — loading text, then an
   <img> or <video>, centered in the reused .cw-video-card chrome. */
.tr-we-med-viewer-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; }
.tr-we-med-viewer-acts { display: flex; gap: 8px; margin-top: 10px; }
.tr-we-med-viewer-acts .cw-video-back { margin-top: 0; }
/* Ben, 10/5: "a way to playback the video slower would be great" — a small
   fixed set of speed stops under the native <video> controls, not a slider;
   nobody asked to dial in an exact rate, just to see a lift in slow motion. */
.tr-we-speed-row { display: flex; gap: 6px; margin-top: 10px; }
.tr-we-speed-btn {
  padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
}
.tr-we-speed-btn.is-active { background: #fff; color: #111; border-color: #fff; }
/* Ben, 10/8: "get rid of the markup on video i just want video no markup
   with it" — the draw-on-video telestrator layer (its own canvas overlay,
   timeline of saved moments, toolbar) removed entirely. Plain video only. */
.tr-we-med-video-wrap { position: relative; max-width: 100%; }
.tr-we-med-video { max-width: 100%; max-height: 70vh; border-radius: 12px; display: block; }

/* ── Program note (Ben, 10/6) ─────────────────────────────────────────────
 * "can we add a note icon on top of every program so either me the coach
 * or the user can write something that gets analyzed by the ai". */
.tr-pe-note-row { display: flex; flex-direction: column; gap: 6px; }
.tr-pe-note-btn {
  align-self: flex-start; display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.tr-pe-note-btn:hover { border-color: var(--brand); }
.tr-pe-client-note {
  font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 8px;
  background: var(--yellow-bg); border: 1px solid var(--yellow);
  color: var(--text);
}
.cw-video-card.tr-pe-note-card { max-width: 480px; }
.tr-pe-note-hd { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.tr-pe-note-sub { font-size: 12.5px; color: rgba(255,255,255,.65); margin-bottom: 10px; }
#trPeNoteText {
  width: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff; font-size: 14px; padding: 10px;
  resize: vertical; font-family: inherit;
}
/* The read-only markup preview in the viewer — an <img> with a transparent
   <canvas> drawn on top at the image's own rendered size, so a saved
   markup shows exactly where the coach put it without re-deriving layout. */
.tr-we-med-preview-wrap { position: relative; display: inline-block; max-width: 100%; }
.tr-we-med-preview-img { display: block; max-width: 100%; max-height: 70vh; border-radius: 12px; }
.tr-we-med-preview-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ── Markup editor (Ben, 10/2) ────────────────────────────────────────────
 * "ive been enjoying marking up my clients form with the apple marker
 * editor" — draw arrows/circles/freehand/text on an attached photo.
 *
 * Ben, 10/5, on the screenshot preview specifically but it turned out to be
 * true of every one of these cards: "this is still to small of a preview".
 * .cw-video-card's own base rule (`max-width: 560px`, further down this
 * file) has EQUAL specificity to a plain second class, so whichever rule
 * happens to be declared LATER in the file silently wins — and the base
 * rule sits after all five of these. Every one of them (markup, crop,
 * screencap, compare-pick, compare) has been capped at 560px this whole
 * time no matter what max-width it asked for. Qualified with .cw-video-card
 * so each one's own max-width reliably wins regardless of file order. */
.cw-video-card.tr-we-markup-card { max-width: 640px; }
.tr-we-markup-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px; border-radius: 10px; background: rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.tr-we-markup-tool {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1.5px solid transparent; background: none; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: .75;
}
.tr-we-markup-tool:hover { opacity: 1; background: rgba(255,255,255,.1); }
.tr-we-markup-tool.active { opacity: 1; border-color: #fff; background: rgba(255,255,255,.15); }
.tr-we-markup-sep { width: 1px; height: 22px; background: rgba(255,255,255,.2); margin: 0 2px; }
.tr-we-markup-colors { display: flex; gap: 5px; }
.tr-we-markup-color {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); cursor: pointer; padding: 0;
}
.tr-we-markup-color.active { border-color: #fff; }
.tr-we-markup-canvas-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 200px; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.3);
}
.tr-we-markup-img { display: block; max-width: 100%; max-height: 60vh; }
.tr-we-markup-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none;   /* the canvas owns the gesture — no page scroll mid-stroke */
  cursor: crosshair;
}
/* Ben, 10/6: "build a text field that i can attach" — a real <input> typed
   in place at the tap, matching drawMarkupShapes' own text styling (700
   18px -apple-system) so it looks the same while typing as once drawn.
   Shared by the still-photo editor and the video annotator (weOpenTextInput). */
.tr-we-markup-text-input {
  position: absolute; z-index: 2; transform: translateY(-50%);
  background: transparent; border: none; outline: none; padding: 0;
  font: 700 18px -apple-system, sans-serif;
  min-width: 40px; width: 200px;
}
.tr-we-markup-acts { display: flex; gap: 8px; margin-top: 12px; }
.tr-we-markup-acts .cw-video-back { margin-top: 0; flex: 1; }
.tr-we-markup-save { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Crop step after a screenshot capture (Ben, 10/3) — a window capture
   carries whatever chrome the OS/app drew around it (titlebar, traffic
   lights, name bar); drag a box here to keep only what matters before it
   saves. Reuses the markup editor's card/toolbar look. */
.cw-video-card.tr-we-crop-card { max-width: 640px; }
.tr-we-crop-hint { color: rgba(255,255,255,.75); font-size: 12.5px; margin: 0 0 10px; text-align: center; }
.tr-we-crop-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.3);
  touch-action: none;   /* the drag owns the gesture, same as the markup canvas */
  cursor: crosshair;
}
.tr-we-crop-img { display: block; max-width: 100%; max-height: 60vh; -webkit-user-drag: none; user-select: none; }
.tr-we-crop-box {
  position: absolute; border: 2px dashed #fff;
  background: rgba(255,255,255,.12);
  pointer-events: none;   /* the wrap element owns every pointer event, not the box drawn on top of it */
}

/* Ben, 10/5: "the screen shot lags... the screen is really small" — a live
   preview with an explicit Capture button, replacing the old blind-
   setTimeout single-frame grab. Sized wider than the crop/markup cards
   since this is the full shared screen/window, not a phone photo.
   Ben, 10/7: "can i make this preview bigger" — on a real desktop monitor
   820px was still leaving most of the window unused. 1400px covers a large
   laptop/external-monitor window share at something close to its real
   size; max-height raised to match so a tall window isn't cropped
   vertically while width still has room to grow. */
.cw-video-card.tr-we-screencap-card { max-width: 1400px; }
.tr-we-screencap-wrap { position: relative; }
.tr-we-screencap-video {
  display: block; width: 100%; max-height: 85vh; border-radius: 12px;
  background: rgba(0,0,0,.3);
}
/* Ben, 10/5: "can we add a record button as well for 10 second clip" — a
   small always-legible badge over the preview while a clip is recording,
   same red-dot convention as the rest timer / native camera apps use for
   "this is live right now". */
.tr-we-screencap-rec-badge {
  position: absolute; top: 10px; left: 10px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.65); color: #fff;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 5px 10px; border-radius: 999px;
}
.tr-we-screencap-rec-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  animation: tr-we-rec-pulse 1s ease-in-out infinite;
}
@keyframes tr-we-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .tr-we-screencap-rec-dot { animation: none; }
}

/* Compare mode (Ben, 10/2: "compare mode before and after") */
.cw-video-card.tr-we-compare-pick-card { max-width: 360px; }
.tr-we-compare-pick-list { display: flex; flex-direction: column; gap: 6px; }
.tr-we-compare-pick-item {
  padding: 10px 12px; border-radius: 8px; text-align: left;
  border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06);
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tr-we-compare-pick-item:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.cw-video-card.tr-we-compare-card { max-width: 900px; }
.tr-we-compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
/* Narrow enough that two side-by-side photos would be too small to read
   form off of — stack them instead, consistent with the page-wide rule
   that nothing is forced into a cramped row below phone width. */
@media (max-width: 560px) {
  .tr-we-compare-grid { grid-template-columns: 1fr; }
}
.tr-we-compare-grid .tr-we-med-preview-wrap { display: flex; justify-content: center; min-height: 120px; }
/* Ben, 10/8: "it still wants me to makup each picture independently" — each
   side is now handed straight to weInitCanvasMarkup and is live/drawable
   immediately (tr-we-markup-img/-canvas, the same classes the single-photo
   editor uses), not a separate read-only preview with its own Markup
   button. Scoped shorter than the single-photo editor's own 60vh — two
   photos share this card's width, so a full-card height would run each
   one off the bottom of the screen. */
.tr-we-compare-grid .tr-we-markup-img { max-height: 42vh; }
.tr-we-compare-side { display: flex; flex-direction: column; gap: 8px; }
/* Ben, 10/3: "create a before and after label thats perminent" — ordered by
   actual capture date, not just left/right position, so the label stays
   true however the coach happened to pick the two photos. */
.tr-we-compare-tag {
  align-self: flex-start; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  background: rgba(255,255,255,.12); color: #fff;
}
.tr-we-compare-tag-after { background: var(--brand); }

/* What the client wrote on this exercise, on this date. Ben, 9/17 — "see what
   they did" now opens the builder, so the client's own words have to travel
   with it. Deliberately NOT an input: it is a record, and a box that looks
   editable invites rewriting someone else's words. */
.cn-client-note {
  display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap;
  margin-top: 10px; padding: 7px 10px; border-radius: 8px;
  background: var(--brand-light); border-left: 3px solid var(--brand);
}
.cn-client-note-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--brand); flex-shrink: 0;
}
.cn-client-note-txt { font-size: 13px; font-style: italic; color: var(--text); line-height: 1.45; }
.tr-we-row .cw-sets-hdr-weight { flex: 0 0 76px; text-align: center; }
.tr-we-row .cw-sets-hdr-target { flex: 0 0 76px; width: auto; text-align: center; }
.cw-sets-hdr-setnote {
  flex: 1; font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-dim);
  /* Every input row ends with a 30px note button plus the 8px flex gap. The
     header has no such cell, so without this reservation the "Make it harder"
     label was 38px wider than the box it names and drifted left of it. */
  margin-right: 38px;
}
/* Per-set "make it harder" — replaced the full-width band, so a hold can sit
   on the last set only rather than the whole exercise. */
.cn-set-row-wrap { margin-bottom: 5px; }
.cn-set-hard {
  flex: 1; min-width: 0; padding: 6px 10px;
  border: 1.5px solid var(--border); border-radius: 7px;
  background: var(--bg); color: var(--text);
  font-size: 12.5px; font-family: inherit; outline: none;
}
.cn-set-hard:focus { border-color: var(--brand); }
.cn-set-hard:not(:placeholder-shown) {
  border-color: var(--brand); background: var(--brand-light); font-weight: 700;
}
/* Note is one tap away, not a permanent empty box on every set */
.cn-set-notebtn {
  flex: 0 0 30px; height: 30px; border-radius: 7px;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text-dim); font-size: 13px; font-weight: 800; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.cn-set-notebtn:hover { border-color: var(--brand); color: var(--brand); }
.cn-set-notebtn.on { border-color: var(--brand); background: var(--brand-light); color: var(--brand-on-light); }
.cn-set-note-line { margin: 4px 0 0 28px; width: calc(100% - 28px); }

/* Supplement quantity stepper (Ben, 9/18: "make all supplements have an
   adjustable number field the user can edit if they decide to up the
   dosage"). Sits under the name, above the strength line, so the number a
   person changes is the most prominent thing on the card after the name.
   44px targets on touch — this is tapped, not typed. */
.supp-qty {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 6px 0 4px;
}
.supp-qty-btn {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
  border: 1.5px solid var(--border-dark); background: var(--surface);
  color: var(--text); font-size: 17px; font-weight: 800; line-height: 1;
  cursor: pointer; padding: 0;
  transition: border-color .15s, background .15s, color .15s;
}
.supp-qty-btn:hover  { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.supp-qty-btn:active { background: var(--brand-mid); }
.supp-qty-val {
  min-width: 26px; text-align: center;
  font-size: 17px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.supp-qty-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); }

@media (pointer: coarse) {
  .supp-qty-btn { width: 40px; height: 40px; flex-basis: 40px; font-size: 20px; }
}

/* "Same as the set above" — Ben, 9/18, entering numbers live on a Zoom call
   from a laptop or a phone. Sized to the 30px sibling so the row stays on one
   line, but given a real 44px touch target on coarse pointers, where it
   matters most. Set 1 gets .cn-set-same-gap instead so every row's inputs
   stay in the same columns. */
.cn-set-same {
  flex: 0 0 30px; height: 30px; border-radius: 7px;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text-dim); font-size: 14px; font-weight: 800; cursor: pointer;
  line-height: 1; padding: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.cn-set-same:hover  { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.cn-set-same:active { background: var(--brand-mid); }
.cn-set-same-gap    { flex: 0 0 30px; }

@media (pointer: coarse) {
  /* Thumbs, mid-session. The button grows; the gap must grow with it or set 1
     and set 2 stop lining up. */
  .cn-set-same, .cn-set-same-gap { flex-basis: 40px; }
  .cn-set-same { height: 40px; font-size: 17px; }
}

/* Cardio / recovery inside a live session and on the summary. They used to
   live only on the workout tab BEFORE starting — but a finisher or a stretch
   happens mid-session or right after. Not a <details>: no reason to hide two
   buttons behind a tap when you're already in the flow. */
.cw-more-insession {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cw-more-insession .cw-more-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px;
}
.cw-more-insession .cw-recovery-row { display: flex; gap: 8px; }
.cw-more-insession .cw-recovery-btn { flex: 1; min-height: 44px; }
/* The body map inside a session — same control as the tab, but sized to sit
   under two buttons rather than headline a screen. */
/* Add button becomes a toggle — the sheet stays open for multi-add, so it has
   to show what's already in the list and let a mis-tap be undone. */
.sob-chip-on {
  background: var(--brand) !important; border-color: var(--brand) !important;
  color: #fff !important; font-weight: 800;
}
.cw-bodymap-insession { margin-top: 8px; width: 100%; }
.cw-bodymap-insession .cw-bodymap-title { font-size: 14px; }
.cw-bodymap-insession .cw-bodymap-sub   { font-size: 11.5px; }

/* ── Coach notes: per exercise and per set ─────────────────────────────────
   Ben coaches through cues ("hold the top 2 sec", "drop the weight on set 3").
   Shared by BOTH editors so a note written in one reads the same in the other.
   Indented under the exercise so it reads as belonging to it. */
.cn-block {
  margin: 0 0 10px 0; padding: 9px 12px 10px 14px;
  border-left: 2px solid var(--border); border-radius: 0 8px 8px 0;
  background: var(--bg-subtle, rgba(127,127,127,0.04));
}
.cn-block-grouped { margin-left: 3px; }
.cn-ex-input {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
  font-size: 13px; font-family: inherit; outline: none;
}
.cn-ex-input:focus { border-color: var(--brand); }
.cn-sets { display: flex; flex-direction: column; gap: 5px; }
.cn-set-row { display: flex; align-items: center; gap: 8px; }
.cn-set-num {
  flex-shrink: 0; width: 18px; text-align: center;
  font-size: 11px; font-weight: 800; color: var(--text-dim);
}
.cn-set-input {
  flex: 1; min-width: 0; padding: 6px 10px;
  border: 1.5px solid var(--border); border-radius: 7px;
  background: var(--bg); color: var(--text);
  font-size: 12.5px; font-family: inherit; outline: none;
}
.cn-set-input:focus { border-color: var(--brand); }
.cn-set-input::placeholder { color: var(--text-dim); }
/* A set that carries a cue reads as filled-in at a glance */
.cn-set-input:not(:placeholder-shown) { border-color: var(--brand); background: var(--brand-light); }
/* The client's view of a coach cue on their set — takes its own line so it
   can't squeeze the weight input (the mistake the hold badge made first). */
.cw-set-row-note { flex-wrap: wrap; }
.cw-set-coachnote {
  flex: 1 0 100%; margin: 5px 0 1px 28px;
  font-size: 11.5px; font-weight: 700; line-height: 1.45; color: var(--brand);
}
.cw-set-coachnote::before { content: 'Coach: '; opacity: 0.72; font-weight: 800; }

/* ── Program builder: YouTube suggestions ──────────────────────────────────
   A strip under the library results, always visible rather than behind a tab.
   Your own library wins by default; YouTube fills the gaps. */
.tr-yt-strip {
  border-top: 1.5px solid var(--border);
  background: var(--bg-subtle, rgba(127,127,127,0.05));
  padding: 10px 16px 12px;
}
.tr-yt-strip-hd { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.tr-yt-strip-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-dim);
}
.tr-yt-strip-note { font-size: 11px; color: var(--text-dim); }
.tr-yt-strip-row {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.tr-yt-card {
  flex: 0 0 132px; scroll-snap-align: start;
  border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--bg); cursor: pointer; padding: 0; text-align: left;
  transition: border-color .15s;
}
.tr-yt-card:hover { border-color: var(--brand); }
.tr-yt-card-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--border); }
.tr-yt-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; padding: 7px 8px 9px;
  font-size: 11.5px; font-weight: 700; line-height: 1.35; color: var(--text);
}
/* Save-to-library prompt */
.tr-ytpick-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45); padding: 18px;
}
.tr-ytpick-card {
  width: 100%; max-width: 420px; background: var(--surface, var(--bg));
  border-radius: 16px; padding: 22px; box-shadow: 0 18px 48px rgba(0,0,0,0.3);
}
.tr-ytpick-title { font-size: 15px; font-weight: 800; line-height: 1.4; margin-bottom: 8px; }
.tr-ytpick-q { font-size: 14px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }
.tr-ytpick-actions { display: flex; flex-direction: column; gap: 9px; }
.tr-ytpick-btn {
  padding: 13px 16px; min-height: 48px; border-radius: 11px;
  border: 1.5px solid var(--border); background: transparent; color: var(--text);
  font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.tr-ytpick-primary { border: none; background: var(--brand); color: #fff; }
.tr-ytpick-note { font-size: 11.5px; color: var(--text-dim); margin: 12px 0 0; line-height: 1.45; }
.tr-ytpick-cancel {
  display: block; margin: 14px auto 0; padding: 6px 12px;
  border: none; background: none; color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ── Coach Mode: session-note signals ──────────────────────────────────────
   Client notes carried real information ("shoulder felt tight") that was only
   visible inside an expanded session. This lifts it to the top of the client's
   workout pane. Pain gets a red rail; everything else stays quiet so the red
   still means something. */
.tr-sig-card {
  border: 1.5px solid var(--border); border-left: 4px solid var(--text-dim);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
  background: var(--bg-subtle, rgba(127,127,127,0.05));
}
.tr-sig-card-pain { border-left-color: #cc3333; background: rgba(204,51,51,0.05); }
.tr-sig-hd {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 11px;
}
.tr-sig-card-pain .tr-sig-hd { color: #cc3333; }
.tr-sig-row { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.tr-sig-row:first-of-type { border-top: none; padding-top: 0; }
.tr-sig-dot {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 6px; background: var(--text-dim);
}
.tr-sig-pain .tr-sig-dot        { background: #cc3333; }
.tr-sig-form .tr-sig-dot        { background: #b8860b; }
.tr-sig-progression .tr-sig-dot { background: var(--brand); }
.tr-sig-body { min-width: 0; flex: 1; }
.tr-sig-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin-bottom: 3px; }
.tr-sig-label { font-size: 12.5px; font-weight: 800; color: var(--text); }
.tr-sig-ex    { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.tr-sig-when  { font-size: 11px; color: var(--text-dim); }
.tr-sig-repeat {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; background: rgba(204,51,51,0.12); color: #cc3333;
}
.tr-sig-quote { font-size: 13px; color: var(--text-muted); line-height: 1.5; font-style: italic; }
.tr-sig-foot {
  font-size: 11px; color: var(--text-dim); margin-top: 10px;
  padding-top: 9px; border-top: 1px solid var(--border);
}

/* ── Coach Mode: quick add ─────────────────────────────────────────────────
   Sized for a phone held one-handed at a machine. The full 13-field form is
   still below for desk work; this is the gym-floor path. */
.tr-qa {
  border: 1.5px solid var(--brand); border-radius: 12px;
  background: var(--brand-light);
  padding: 12px; margin-bottom: 16px;
}
.tr-qa-head { margin-bottom: 9px; }
.tr-qa-title { font-size: 14px; font-weight: 800; color: var(--text); }
.tr-qa-sub   { font-size: 12px; color: var(--text-muted); margin-left: 7px; }
.tr-qa-row { display: flex; gap: 8px; }
.tr-qa-input {
  flex: 1; min-width: 0; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 11px;
  background: var(--bg); color: var(--text);
  /* 16px — anything smaller makes iOS zoom the page on focus. */
  font-size: 16px; font-weight: 600; outline: none;
}
.tr-qa-input:focus { border-color: var(--brand); }
.tr-qa-btn {
  min-height: 48px; padding: 12px 22px; flex-shrink: 0;
  border: none; border-radius: 11px;
  background: var(--brand); color: #fff;
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.tr-qa-btn:disabled { opacity: 0.6; cursor: default; }
.tr-qa-status { font-size: 12.5px; font-weight: 700; margin-top: 9px; color: var(--text-muted); }
.tr-qa-status-ok   { color: var(--brand); }
.tr-qa-status-bad  { color: #cc3333; }
.tr-qa-status-warn { color: #b8860b; }
.tr-qa-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tr-qa-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg);
}
.tr-qa-item-body { flex: 1; min-width: 0; }
.tr-qa-item-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.tr-qa-item-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
/* A real link, not a label — the coach has to be able to CHECK the clip the
   AI picked, which is the entire point of reviewing a quick-add. */
.tr-qa-vid   { color: var(--brand); font-weight: 700; text-decoration: underline; }
.tr-qa-vid:hover { color: var(--brand-dark); }
.tr-qa-thumb {
  width: 56px; height: 42px; object-fit: cover; border-radius: 7px;
  flex-shrink: 0; margin-right: 10px; background: var(--bg);
}
.tr-qa-novid { color: #b8860b; font-weight: 700; }
.tr-qa-undo {
  flex-shrink: 0; min-height: 36px; padding: 7px 13px;
  border: 1.5px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.tr-food-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.tr-food-info { flex: 1; min-width: 0; }
.tr-food-name { font-size: 14px; font-weight: 700; color: var(--text); }
.tr-food-macros { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.tr-food-del {
  background: none; border: none; color: var(--text-muted);
  font-size: 15px; cursor: pointer; padding: 6px; flex-shrink: 0;
}
.tr-food-del:hover { color: var(--red, #e74c3c); }

.tr-foods-search { margin: 14px 0 4px; }
.tr-food-row[role="button"] { cursor: pointer; }
.tr-food-row.editing { opacity: 0.55; }
.tr-food-edit-hint { font-size: 12px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }
.tr-food-editor {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin: 6px 0 10px;
}
.tr-food-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.tr-food-f input {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 14px; color: var(--text); width: 100%; box-sizing: border-box;
}
.tr-food-f-wide { margin-bottom: 8px; }
.tr-food-f-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px; }
.tr-food-f-grid-2 { grid-template-columns: 1fr 1fr; margin-bottom: 8px; }
.tr-food-unit-note { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-bottom: 10px; }
.tr-food-del-txt {
  background: none; border: none; color: var(--red, #e74c3c);
  font-size: 13px; font-weight: 600; cursor: pointer; margin-left: auto; padding: 8px;
}

/* ── Grocery Receipt Check ───────────────────────────────── */
.receipt-check-card {
  margin: 12px 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 14px;
}
.receipt-check-body { flex: 1; min-width: 0; }
.receipt-check-title { font-size: 15px; font-weight: 800; color: var(--text); }
.receipt-check-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
.receipt-check-btn { padding: 10px 14px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.receipt-check-btns { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.receipt-check-btn-alt {
  background: var(--surface);
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.receipt-check-btn-alt:hover { background: var(--brand-light, rgba(0,180,156,.1)); }

/* ── Smart Grocery List ──────────────────────────────────── */
.gl-ask-title { font-size: 16px; font-weight: 800; color: var(--text); margin-top: 4px; }
.gl-ask-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.gl-section { margin-top: 14px; }
.gl-section-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px;
}
.gl-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg); border-radius: 12px;
  padding: 11px 13px; margin-bottom: 6px; cursor: pointer;
}
.gl-check {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  border: 2px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: #fff;
}
.gl-item--done .gl-check { background: var(--brand); border-color: var(--brand); }
.gl-item--done .gl-item-name { text-decoration: line-through; color: var(--text-muted); }
.gl-item-name { font-size: 14px; font-weight: 700; color: var(--text); }
.gl-item-qty { font-weight: 600; color: var(--text-muted); font-size: 13px; }
.gl-item-why { font-size: 12px; color: var(--brand); font-weight: 600; margin-top: 2px; line-height: 1.4; }
/* Scan prompt on a grocery item. Ben, 8/27: nudge the client to check the
   label so they pick the version that fits their goal. Deliberately quiet —
   it is an offer, not a demand, and only some items carry one. */
.gl-scan {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  padding: 5px 10px 5px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: 11.5px; font-weight: 700;
  font-family: inherit; text-align: left; line-height: 1.35;
}
.gl-scan svg { width: 14px; height: 14px; flex-shrink: 0; }
.gl-scan:hover, .gl-scan:focus-visible { border-color: var(--brand); color: var(--brand); outline: none; }
/* Once the item is ticked off, the prompt has done its job. */
.gl-item--done .gl-scan { opacity: .45; }
.gl-add-row { display: flex; gap: 8px; margin-top: 4px; }
.gl-avoid {
  margin-top: 12px; font-size: 12.5px; font-weight: 600; color: #b45309;
  background: color-mix(in srgb, #f59e0b 13%, transparent);
  border-radius: 10px; padding: 10px 12px; line-height: 1.45;
}

/* Allergy heads-up banner (verdicts + analysis) */
.allergy-warn {
  display: flex; gap: 8px; align-items: flex-start;
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
  border-radius: 12px; padding: 10px 13px; margin: 10px 0;
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.45;
}

/* Shopping-mode result inside the scanner sheet */
.shop-result-name { font-size: 16px; font-weight: 800; color: var(--text); }
.shop-result-macros { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.shop-verdict-card { margin: 10px 0; }
.shop-result-actions { display: flex; gap: 8px; margin: 10px 0 4px; }
.shop-result-actions .btn-primary { flex: 1; padding: 12px; font-size: 14px; }

.receipt-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  max-width: 480px; margin: 0 auto;
  max-height: 86vh; overflow-y: auto;
  padding: 10px 20px calc(28px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.26s ease;
}
.receipt-sheet.open { transform: translateY(0); }
.receipt-sheet-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.receipt-sheet-title { font-size: 18px; font-weight: 800; color: var(--text); }
.receipt-sheet-close { background: none; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; line-height: 1; padding: 4px; }

.receipt-loading { padding: 26px 0 34px; }
.receipt-loading-text { text-align: center; font-size: 14px; color: var(--text-muted); margin-top: 12px; }
.receipt-summary { font-size: 14.5px; color: var(--text); line-height: 1.45; margin-bottom: 6px; }
.receipt-counts { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.receipt-group { border-top: 1px solid var(--border); padding: 12px 0; }
.receipt-group-title { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.receipt-group-good .receipt-group-title { color: var(--brand); }
.receipt-group-fine .receipt-group-title { color: var(--text-muted); }
.receipt-group-swap .receipt-group-title { color: #b45309; }
.receipt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.receipt-chip {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 11px;
}
.receipt-swap-item { padding: 8px 0; }
.receipt-swap-item + .receipt-swap-item { border-top: 1px dashed var(--border); }
.receipt-swap-name { font-size: 14px; font-weight: 700; color: var(--text); }
.receipt-swap-reason { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.receipt-swap-alt {
  font-size: 12.5px; font-weight: 600; color: var(--brand);
  margin-top: 4px; line-height: 1.4;
}
.receipt-unread { font-size: 11.5px; color: var(--text-muted); margin-top: 12px; }
.receipt-error { font-size: 14px; color: var(--text); padding: 18px 0 24px; text-align: center; line-height: 1.5; }
.receipt-disclaimer { font-size: 10.5px; color: var(--text-dim, var(--text-muted)); margin-top: 14px; line-height: 1.4; }

/* ── Recent Meals Bar ────────────────────────────────────── */
/* Card treatment matching .habits-card/.goals-card — this was a full-bleed
   strip with a bottom border and read as bleeding into the next section. */
.recent-meals-bar {
  margin: 12px 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px 12px;
  box-shadow: var(--shadow-sm);
}

/* My Habits card (client daily check-off) */
.habits-card {
  margin: 12px 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.habits-card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.habits-card-title { font-size: 15px; font-weight: 800; color: var(--text); }
.habits-card-progress {
  font-size: 13px; font-weight: 800; color: var(--brand);
  background: var(--brand-light); border-radius: 20px; padding: 2px 10px;
}
.habits-card-list { display: flex; flex-direction: column; gap: 8px; }
.habit-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface);
  cursor: pointer; text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.habit-item:hover { background: var(--bg); }
.habit-check {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border); display: flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 900; color: #fff;
  transition: background 0.12s, border-color 0.12s;
}
.habit-item.done .habit-check { background: var(--brand); border-color: var(--brand); }
.habit-item.done { border-color: var(--brand); background: var(--brand-light); }
.habit-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.habit-item-name { font-size: 14px; font-weight: 700; color: var(--text); }
.habit-item.done .habit-item-name { color: var(--text-muted); text-decoration: line-through; }
.habit-item-target {
  font-size: 12px; font-weight: 700; color: var(--brand);
  background: var(--brand-light); border-radius: 6px; padding: 1px 7px; margin-left: 3px;
}
.habit-item.done .habit-item-target { background: rgba(0,0,0,0.05); color: var(--text-muted); }
.habit-item-note { font-size: 12px; color: var(--text-muted); }
.habit-item-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.habit-item-streak {
  font-size: 11px; font-weight: 800; color: var(--brand);
  letter-spacing: 0.2px;
}
.habit-item.done .habit-item-streak { color: var(--text-muted); }

/* ── My Goals card ─────────────────────────────────────────── */
.goals-card {
  margin: 12px 16px 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.goals-add-btn {
  font-size: 13px; font-weight: 800; color: var(--brand);
  background: none; border: none; cursor: pointer; padding: 0;
}
.goals-card-list { display: flex; flex-direction: column; gap: 12px; }
.goals-empty { font-size: 13px; color: var(--text-dim); padding: 6px 0; }
.goal-item { display: flex; flex-direction: column; gap: 6px; }
.goal-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.goal-item-title { font-size: 14px; font-weight: 700; color: var(--text); }
.goal-edit-link {
  flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--brand);
  background: none; border: none; cursor: pointer; padding: 0;
}
.goal-bar {
  height: 8px; border-radius: 6px; background: var(--bg);
  overflow: hidden;
}
.goal-bar-fill {
  height: 100%; background: var(--brand); border-radius: 6px;
  transition: width 0.3s ease;
}
.goal-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.goal-stat { font-size: 12.5px; font-weight: 700; color: var(--text); }
.goal-stat-dim { color: var(--text-muted); font-weight: 600; }
.goal-due { font-size: 12px; color: var(--text-muted); }
.goal-auto-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--brand); background: var(--brand-light);
  border-radius: 5px; padding: 1px 6px; vertical-align: middle;
}
.goal-auto-toggle {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--brand-light); border-radius: 10px; padding: 10px 12px;
  margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; line-height: 1.35;
}
.goal-auto-toggle input { width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; margin-top: 1px; }

/* ── iPhone "Add to Home Screen" visual guide (older-user friendly) ── */
.ios-guide-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.ios-guide-card {
  position: relative; background: var(--surface); border-radius: 22px;
  width: 100%; max-width: 420px; padding: 28px 24px 24px;
  box-shadow: 0 12px 48px rgba(0,0,0,.3);
}
.ios-guide-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 30px; line-height: 1; color: var(--text-muted); cursor: pointer;
}
.ios-guide-logo { width: 64px; height: 64px; border-radius: 16px; display: block; margin: 0 auto 12px; }
.ios-guide-title {
  font-size: 21px; font-weight: 800; color: var(--text);
  text-align: center; line-height: 1.3; margin-bottom: 8px;
}
.ios-guide-intro { font-size: 15px; color: var(--text-muted); text-align: center; margin-bottom: 22px; }
.ios-guide-webview-warn {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 16px;
}
.ios-guide-step {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.ios-guide-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ios-guide-step-text { font-size: 16px; line-height: 1.45; color: var(--text); }
.ios-guide-step-text strong { color: var(--brand); }
.ios-guide-icon-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ios-guide-share-icon, .ios-guide-add-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border);
}
.ios-guide-add-icon { color: var(--text); }
.ios-guide-icon-label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.ios-guide-done-btn {
  width: 100%; margin-top: 20px; background: var(--brand); color: #fff;
  border: none; border-radius: 14px; padding: 15px; font-size: 17px; font-weight: 800; cursor: pointer;
}

/* Goal editor modal */
.goal-modal-overlay {
  position: fixed; inset: 0; z-index: 8600;
  background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.goal-modal {
  background: var(--surface); border-radius: 18px; width: 100%; max-width: 420px;
  max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column;
}
.goal-modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.goal-modal-title { font-size: 17px; font-weight: 800; color: var(--text); }
.goal-modal-body { padding: 16px 18px; }
.goal-field-label {
  display: block; font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px; margin: 12px 0 6px;
}
.goal-field-label:first-child { margin-top: 0; }
.goal-input {
  width: 100%; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text);
}
.goal-input:focus { outline: none; border-color: var(--brand); }
.goal-inspo-label {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.goal-inspo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.goal-inspo-chip {
  padding: 7px 11px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.goal-inspo-chip.active { border-color: var(--brand); color: var(--brand-on-light); background: var(--brand-light); }
.goal-why-line {
  font-size: 12.5px; font-style: italic; color: var(--text-muted);
  margin: 2px 0 6px; line-height: 1.35;
}
/* Progress card + check-in sheet */
.progress-card {
  border: 1px solid var(--border); border-radius: 16px;
  padding: 15px 16px; margin: 12px 0; background: var(--surface);
}
.progress-card-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--brand); margin-bottom: 8px;
}
.progress-empty { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin-bottom: 12px; }
.progress-compare { display: flex; gap: 10px; margin-bottom: 10px; }
.progress-cmp-cell { flex: 1; position: relative; }
.progress-cmp-cell img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; }
.progress-cmp-cell span {
  position: absolute; bottom: 6px; left: 6px; font-size: 11px; font-weight: 800;
  color: #fff; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 999px;
}
.progress-stats { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.progress-weight { font-size: 22px; font-weight: 800; color: var(--text); }
.progress-delta  { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.progress-section-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 8px;
}
.progress-photo-row { display: flex; gap: 10px; }
.progress-photo-slot {
  flex: 1; aspect-ratio: 3/4; border: 1.5px dashed var(--border); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; background-size: cover; background-position: center;
}
.progress-photo-slot.filled { border-style: solid; border-color: var(--brand); }
.progress-photo-slot.filled .progress-photo-plus { display: none; }
.progress-photo-slot.filled .progress-photo-label {
  background: rgba(0,0,0,.55); color: #fff; padding: 2px 8px; border-radius: 999px;
  align-self: flex-start; margin: auto 0 6px 6px;
}
.progress-photo-plus { font-size: 26px; color: var(--text-dim); line-height: 1; }
.progress-photo-label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.progress-mfield label {
  display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px;
}
.progress-mfield input {
  width: 100%; box-sizing: border-box; padding: 11px 12px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
}
.progress-mfield { margin-bottom: 10px; }
.progress-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* Weekly recap card */
.recap-card {
  border: 1.5px solid var(--brand); border-radius: 16px;
  padding: 15px 16px; margin: 12px 0; background: var(--brand-light);
}
.recap-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.recap-title { font-size: 14px; font-weight: 800; color: var(--text); }
.recap-stats { display: flex; gap: 18px; margin-bottom: 10px; }
.recap-stat { display: flex; flex-direction: column; }
.recap-num { font-size: 22px; font-weight: 800; color: var(--text); }
.recap-den { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.recap-lbl { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.recap-focus { font-size: 13px; color: var(--text); line-height: 1.45; }
.recap-focus span { font-weight: 800; color: var(--brand); }

/* Undo link inside toasts */
.toast-undo {
  color: var(--brand); font-weight: 800; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; margin-left: 2px;
}

/* Recovery quick-log row (workout tab) */
.cw-recovery-row { display: flex; gap: 8px; }
.cw-recovery-btn {
  flex: 1; padding: 12px 6px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); cursor: pointer;
  white-space: nowrap;
}

/* "Strong choice" badge — high health-score meals in Run It Back + Quick */
.strong-choice-badge {
  display: inline-block; font-size: 10px; font-weight: 800;
  color: var(--brand); background: var(--brand-light);
  border-radius: 999px; padding: 1px 7px; letter-spacing: 0.2px;
  vertical-align: middle;
}

/* GLP-1 badge on coach roster + drill header */
.client-glp1-badge {
  color: #7c3aed; background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.35); font-weight: 800;
}

/* Coach Video badge — the coach's own recording, not a stock tutorial */
.tr-ex-badge--coach {
  color: var(--brand); background: var(--brand-light);
  border: 1px solid var(--brand); font-weight: 800;
}

/* Workout tab: Today → Build → History structure */
.cw-section-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--brand); margin: 4px 0 8px;
}
.cw-gap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.cw-gap-chip.added { opacity: 0.55; }
.cw-build-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 0 8px;
}
.cw-build-hdr #cwBuildClearBtn {
  background: none; border: none; color: var(--text-muted);
  font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 0;
}

/* Coach Mode: week digest card (Clients tab, above the list) */
.cwd-card {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 16px; background: var(--surface);
}
.cwd-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--brand); margin-bottom: 10px;
}
.cwd-row {
  padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.cwd-row:last-child { border-bottom: none; }
.cwd-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cwd-name  { font-size: 14px; font-weight: 700; color: var(--text); }
.cwd-stats { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.cwd-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cwd-flag {
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px;
}
.cwd-flag--red   { color: #ef4444; background: rgba(239,68,68,.1); }
.cwd-flag--amber { color: #b45309; background: rgba(245,158,11,.12); }
.cwd-flag--green { color: var(--brand-on-light); background: var(--brand-light); }
.cwd-action { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-style: italic; }

/* Coach Mode: client staples + swap builder (drill-down Food tab) */
.cd-staples-card {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; margin-bottom: 16px; background: var(--surface);
}
.cd-staples-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--brand); margin-bottom: 8px;
}
/* ── Food patterns (Ben, 9/11) ─────────────────────────────────
   "clients are eating more of the same things but the ai is titling them
   differently based on a different veggie". Staples group by what the meal
   IS now; this is the evidence behind each group. */
/* ── Drafted swaps (Ben, 9/11) ─────────────────────────────────
   "when i hit swap it pop up what to buy instead and why but thats something
   that can look and feel better and be more automated". Zero swaps had ever
   been created — three blank boxes per swap was the whole bottleneck. */
.cd-swap-drafts { margin-bottom: 10px; }
.cd-swap-drafts-label {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.cd-swap-drafting {
  font-size: 12px; color: var(--text-muted);
  padding: 8px 2px; line-height: 1.45;
}
.cd-swap-draft {
  display: block; width: 100%;
  text-align: left;
  margin-bottom: 6px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  cursor: pointer;
}
.cd-swap-draft:active { background: var(--brand-light); }
.cd-swap-draft.on { border-color: var(--brand); background: var(--brand-light); }
.cd-swap-draft-to {
  display: block;
  font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.3;
}
.cd-swap-draft-why {
  display: block;
  font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin-top: 2px;
}
.cd-swap-draft-saves {
  display: inline-block; margin-top: 4px;
  padding: 1px 7px; border-radius: 20px;
  background: var(--brand-light); color: var(--brand-on-light);
  font-size: 10.5px; font-weight: 800;
}

.cd-variant-toggle {
  background: none; border: 0; padding: 0;
  color: var(--brand-on-light);
  font-size: 11px; font-weight: 800; font-family: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.cd-variant-list {
  margin-top: 6px;
  padding: 6px 8px;
  border-left: 2px solid var(--border-dark);
  background: var(--surface2);
  border-radius: var(--radius-sm);
}
.cd-variant-row { display: flex; gap: 7px; padding: 2px 0; align-items: baseline; }
.cd-variant-n {
  flex: none; min-width: 20px;
  font-size: 10.5px; font-weight: 800; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.cd-variant-name {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis;
}

.cd-staple-row, .cd-swap-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.cd-staple-row:last-of-type, .cd-swap-row:last-of-type { border-bottom: none; }
.cd-swap-btn {
  flex-shrink: 0; padding: 6px 14px; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--brand); border-radius: 999px;
  background: none; color: var(--brand); cursor: pointer;
}
.cd-swap-input {
  width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); margin-bottom: 8px;
}
/* GLP-1 mode card (My Day) — protein-first instrument */
.glp1-card {
  border: 1px solid var(--border); border-radius: 16px;
  padding: 15px 16px; margin: 12px 0; background: var(--surface);
}
.glp1-card-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--brand); margin-bottom: 8px;
}
.glp1-protein-row { display: flex; align-items: baseline; gap: 6px; }
.glp1-protein-num { font-size: 26px; font-weight: 800; color: var(--text); }
.glp1-protein-goal { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.glp1-bar {
  height: 8px; border-radius: 999px; background: var(--bg);
  margin: 8px 0 10px; overflow: hidden;
}
.glp1-bar-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width .4s; }
.glp1-bar-fill.low { background: #f59e0b; }
.glp1-shot-line { font-size: 12.5px; color: var(--text); font-weight: 600; margin-bottom: 6px; }
.glp1-tip { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.glp1-tip--warn { color: #ef4444; font-weight: 600; }

/* Push reminder opt-in card (success screen) */
.push-optin-card {
  margin-top: 12px; padding: 14px 15px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.push-optin-title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.push-optin-text  { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; margin-bottom: 10px; }
.push-optin-actions { display: flex; align-items: center; gap: 12px; }
.push-optin-actions #pushOptInLater {
  background: none; border: none; color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 4px;
}

/* Client: coach swap nudge on the success screen */
.swap-nudge-card {
  margin-top: 12px; padding: 13px 14px;
  border: 1.5px solid var(--brand); border-radius: 14px;
  background: var(--brand-light);
}
.swap-nudge-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--brand); margin-bottom: 5px;
}
.swap-nudge-text { font-size: 13.5px; color: var(--text); line-height: 1.45; }
.swap-nudge-sub { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.goal-type-toggle { display: flex; gap: 8px; }
.goal-type-btn {
  flex: 1; padding: 9px; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.goal-type-btn.active { border-color: var(--brand); color: var(--brand-on-light); background: var(--brand-light); }
.goal-num-row { display: flex; gap: 8px; }
.goal-num-row > div { flex: 1; min-width: 0; }
.goal-range { width: 100%; accent-color: var(--brand); }
.goal-modal-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--border);
}
.goal-delete-btn {
  font-size: 13px; font-weight: 700; color: var(--red);
  background: none; border: none; cursor: pointer; padding: 8px 0;
}
.goal-save-btn {
  margin-left: auto; background: var(--brand); color: #fff; border: none;
  border-radius: 10px; padding: 11px 22px; font-size: 15px; font-weight: 800; cursor: pointer;
}
.goal-save-btn:disabled { opacity: 0.6; }
.recent-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.recent-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.recent-clear-btn {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
}
.recent-clear-btn:hover { color: var(--text); }
.recent-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* extend the scroll lane to the card's inner edges so chips don't look
     cropped mid-card while scrolling */
  margin: 0 -16px;
  padding: 0 16px 2px;
  scrollbar-width: none;
}
.recent-scroll::-webkit-scrollbar { display: none; }

.recent-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  min-width: 76px;
  text-align: center;
}
.recent-chip:hover {
  border-color: var(--brand);
  background: var(--brand-light);
}
.recent-chip-icon { font-size: 22px; }
.recent-chip-photo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.recent-chip-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-chip-cals { font-size: 11px; color: var(--text-muted); }

/* ── Camera Hero ─────────────────────────────────────────── */
.camera-hero {
  padding: 20px var(--gutter) 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.camera-big-btn {
  width: 100%;
  background: var(--brand);
  border: none;
  border-radius: var(--radius);
  padding: 36px 20px 32px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
  box-shadow: var(--shadow-md);
}
.camera-big-btn:hover { background: var(--brand-dark); }
.camera-big-btn:active { transform: scale(0.99); }

.camera-icon { width: 52px; height: 52px; color: #fff; }
.camera-text {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}
.camera-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  text-align: center;
}

/* Upload Photo / Scan Barcode — larger, tappable secondary action cards */
.log-secondary-row {
  display: flex;
  gap: 12px;
}
.btn-log-secondary {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 76px;
  padding: 16px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  box-shadow: var(--shadow-sm);
}
.btn-log-secondary svg {
  width: 26px !important;
  height: 26px !important;
  color: var(--brand);
}
.btn-log-secondary:hover {
  background: var(--brand-light);
  border-color: var(--brand);
}
.btn-log-secondary:active { transform: scale(0.98); }

.log-secondary-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-height: 52px;
}
/* The exact-match results panel (offerExactMatch) and the "usual meal"
   suggestion (showUsualSuggest) are inserted as siblings of .text-entry-
   inline via insertAdjacentElement('afterend', …) — both land inside this
   same flex row. Without flex-basis:100% they compete for leftover row
   space next to the input instead of dropping to their own line, which on a
   phone squeezed the whole results card into a sliver next to the input box
   (Ben, 9/24 screenshot: "mobile is bunching this when i use the text
   search"). flex-wrap alone isn't enough — a child only wraps once nothing
   fits at its natural size, and these panels are narrow enough that they
   didn't reliably trigger that on their own. */
#exactMatchHost, #usualSuggestHost {
  flex-basis: 100%;
}

.or-pipe { color: var(--border-dark); font-size: 18px; flex-shrink: 0; }

.text-entry-inline {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* Anchors the type-ahead dropdown. Without this the list positions against
     the page and lands somewhere unrelated to the input. */
  position: relative;
}

.food-text-input-sm {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-size: 16px;
  padding: 4px 0;
  outline: none;
  min-width: 0;
}
.food-text-input-sm::placeholder { color: var(--text-dim); }

/* Accuracy callout — photo + words = better breakdown */
.accuracy-callout {
  background: var(--brand-light);
  border: 2px solid var(--brand);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.accuracy-callout-head {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.2px;
}
.accuracy-callout-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
}
.accuracy-callout-body strong { font-weight: 800; }

/* Photo hint step — "What is it?" between photo pick and analysis */
.photo-hint-step {
  background: var(--surface);
  border: 2px solid var(--brand);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.photo-hint-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.photo-hint-optional {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  margin-left: 4px;
}
.photo-hint-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.photo-hint-row .low-conf-text-input { flex: 1; }
.photo-hint-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Voice-to-text mic button */
.mic-btn {
  min-width: 42px;
  min-height: 42px;
  border: 1.5px solid var(--brand);
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.mic-btn:active { background: var(--brand-mid); transform: scale(0.94); }
.mic-btn.recording {
  color: #fff;
  background: var(--red);
  animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
}

/* ── Analysis Area ───────────────────────────────────────── */
.analysis-area { margin: 0 16px 16px; }

.photo-preview-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  max-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-preview { width: 100%; max-height: 400px; object-fit: contain; }

/* Wrong photo? Fix it without losing typed answers or "Start over"-ing
   the whole entry (Ben, 9/22: "no way to edit a photo if it's the wrong
   photo you uploaded"). */
.photo-retake-btn {
  position: absolute; top: 10px; right: 10px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,.62); color: #fff; border: 0;
  border-radius: 20px; padding: 7px 12px 7px 10px;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  backdrop-filter: blur(2px);
}
.photo-retake-btn:active { background: rgba(0,0,0,.8); }

.loading-bar {
  margin-top: 14px;
}
.loading-bar-track {
  background: var(--border);
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
}
.loading-bar-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 100px;
  width: 0%;
  animation: loadProgress 2s ease-in-out forwards;
}
@keyframes loadProgress {
  0% { width: 0%; }
  60% { width: 75%; }
  100% { width: 90%; }
}
.loading-text {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 10px;
}

/* ── Clarify Panel ───────────────────────────────────────── */
/* ── Drink recognition banner ── */
.drink-recog-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--brand-light);
  border: 1.5px solid var(--brand);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0 6px;
}
.drink-recog-banner.applied { border-style: dashed; }
.drink-recog-text { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.35; }
.drink-recog-sub { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 2px; }
.drink-recog-btn {
  flex-shrink: 0;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.drink-recog-btn:active { transform: scale(0.96); }

.clarify-panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--border);
  margin: 8px 16px 16px;
  box-shadow: var(--shadow);
}
.clarify-food-name {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text);
}
.clarify-prompt {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 18px;
}

/* Confidence badge */
.confidence-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
  width: fit-content;
}
.confidence-badge.high   { background: var(--green-bg);  color: var(--green); }
.confidence-badge.medium { background: var(--yellow-bg); color: var(--yellow); }
.confidence-badge.low    { background: var(--red-bg);    color: var(--red); }

.ai-reasoning {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 10px;
  opacity: 0.8;
}

/* Cups stepper */
.cups-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
}
.cups-btn {
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  font-size: 20px;
  font-weight: 300;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cups-btn:hover:not(:disabled) { background: var(--brand-light); color: var(--brand-dark); }
.cups-btn:disabled { color: var(--text-dim); cursor: default; }
.cups-display {
  min-width: 80px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0 8px;
  line-height: 44px;
}

/* Success confidence line */
.success-confidence {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  margin: -8px auto 10px;
  width: fit-content;
}
.success-confidence.high   { background: var(--green-bg);  color: var(--green); }
.success-confidence.medium { background: var(--yellow-bg); color: var(--yellow); }
.success-confidence.low    { background: var(--red-bg);    color: var(--red); }

/* ── Health Score Card ───────────────────────────────────────── */
.health-score-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 4px 0;
}
.health-score-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}
.health-score-number {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.health-score-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.health-score-right { flex: 1; }
.health-score-bar-wrap { display: flex; flex-direction: column; gap: 7px; }
.health-score-bar-row { display: flex; align-items: center; gap: 8px; }
.health-score-bar-label { font-size: 11px; color: var(--text-muted); width: 48px; flex-shrink: 0; }
.health-score-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; }
.health-score-bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s ease; }

/* ── Ingredient Breakdown ────────────────────────────────────── */
.ingredient-breakdown {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 4px 0;
}
.ingredient-breakdown-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.ingredient-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
/* ── Per-ingredient editing (clarify panel) ──────────────────── */
.item-edit-section {
  margin: 4px 0 12px;
}
.item-edit-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ── Micronutrients (collapsed section) ── */
.micros-wrap { margin-top: 10px; }
.micros-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.micros-chev { color: var(--text-muted); font-size: 12px; }
.micros-body { padding: 12px 4px 4px; }
.micro-row { margin-bottom: 10px; }
.micro-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.micro-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.micro-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: capitalize;
}
.micro-chip.good { background: var(--green-bg); color: var(--green); }
.micro-chip.low  { background: var(--yellow-bg); color: var(--yellow); }
.micro-note {
  font-size: 11px;
  color: #8a9794;
  margin-top: 4px;
  line-height: 1.4;
}
.item-edit-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 10px;
}
/* ── Item cards — tappable rows ─────────────────────────── */
.item-edit-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.item-edit-card.correcting { border-color: var(--brand); }
.item-tap-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.item-tap-row:active { opacity: 0.75; }
.item-tap-info { flex: 1; min-width: 0; }
.item-edit-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-edit-cal {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 2px;
}
.usda-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #16a34a;
  background: #dcfce7;
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.item-wrong-btn {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--border);
  border: none;
  border-radius: 20px;
  padding: 3px 9px;
  cursor: pointer;
  opacity: 0.7;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, color 0.15s;
}
.item-wrong-btn:active { opacity: 1; color: var(--brand); }
.item-edit-card.correcting .item-wrong-btn { opacity: 0; pointer-events: none; }
.item-tap-chevron {
  color: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
  font-size: 16px;
  transition: transform 0.2s, opacity 0.2s;
}
.item-edit-card.correcting .item-tap-chevron {
  transform: rotate(90deg);
  opacity: 1;
  color: var(--brand);
}

/* Correction panel — slides in smoothly */
.item-correction-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
/* Ben, 9/15. The cap was 260px with overflow:hidden, but the panel holds a
   label, input, live search suggestions, three action buttons, a barcode
   button, a macro toggle AND a four-field macro row — around 286px with
   macros open, more once suggestions appear. So the bottom was clipped
   exactly when the coach had opened the extra controls to use them.

   A bigger number would clip again the next time a row is added. 1000px is a
   ceiling the content cannot reach, so it animates open and then sizes to
   whatever is actually inside it. */
.item-correction-panel.open { max-height: 1000px; }
.item-correction-inner {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.item-correction-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.item-edit-input {
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  outline: none;
}
.item-correction-actions {
  display: flex;
  gap: 8px;
}
.item-edit-save {
  flex: 1;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.item-edit-cancel {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.item-edit-delete {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.item-edit-delete:hover {
  background: var(--red);
  color: #fff;
}
.item-edit-delete:active {
  opacity: 0.82;
}

/* Manual macro adjust — collapsed by default */
.item-macro-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.item-edit-macro-row {
  display: flex;
  gap: 6px;
}
.item-scan-barcode {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: var(--brand-light);
  border: 1.5px dashed var(--brand);
  border-radius: 12px;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.item-scan-barcode:active { transform: scale(0.99); }
.item-edit-macro-row label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  gap: 3px;
  flex: 1;
}
.item-macro-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  width: 100%;
  text-align: center;
}
.item-edit-cal {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.item-stepper-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.unit-toggle { display: flex; gap: 4px; }
.unit-toggle-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  cursor: pointer;
}
.unit-toggle-btn.active {
  background: var(--surface2);
  border-color: var(--brand);
  color: var(--brand);
}
.item-edit-stepper {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.item-size-hint {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 4px;
}
.item-mult-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.item-mult-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.stepper-delta {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.65;
  margin-left: 2px;
}
.stepper-delta.up   { color: #ef4444; }
.stepper-delta.down { color: #22c55e; }
.item-mult-btn.active .stepper-delta { opacity: 0.85; color: rgba(255,255,255,0.85); }

/* ── AI-anchored portion wheel ── */
.pwheel { position: relative; height: 64px; width: 100%; }
.pwheel-track {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  height: 64px;
  align-items: center;
  padding: 0 calc(50% - 32px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.pwheel-track::-webkit-scrollbar { display: none; }
.pwheel-tick {
  min-width: 64px;
  /* Grow with the label + keep breathing room so long labels (e.g. "2 samosas")
     can't overlap the neighbouring tick. */
  padding: 0 14px;
  box-sizing: border-box;
  flex: 0 0 auto;
  scroll-snap-align: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.pwheel-ai {
  font-size: 8.5px;
  font-weight: 800;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  height: 11px;
  opacity: 0;
}
.pwheel-tick.aimark .pwheel-ai { opacity: 1; }
.pwheel-v {
  font-size: 14px;
  font-weight: 600;
  color: #aebab8;
  transition: all 0.12s;
  white-space: nowrap;
}
.pwheel-tick.sel .pwheel-v { font-size: 19px; font-weight: 800; color: var(--brand-dark); }
.pwheel-center {
  position: absolute;
  top: 4px; bottom: 4px;
  left: 50%;
  width: 68px;
  transform: translateX(-50%);
  border: 1.5px solid var(--brand-light);
  border-radius: 12px;
  background: rgba(0, 180, 156, 0.05);
  pointer-events: none;
}
.pwheel-reset {
  display: block;
  margin: 4px auto 0;
  background: none;
  border: none;
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.pwheel-reset.show { opacity: 1; pointer-events: auto; }

/* ── Clean − / value / + portion stepper ── */
.pstepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 320px;
  margin: 2px auto 0;
}
.pstepper-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-dark);
  cursor: pointer;
  transition: transform 0.08s, background 0.15s, border-color 0.15s;
}
.pstepper-btn:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-light); }
.pstepper-btn:active:not(:disabled) { transform: scale(0.92); }
.pstepper-btn:disabled { opacity: 0.35; cursor: default; }
.pstepper-mid {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.pstepper-ai {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f59e0b;
  height: 12px;
}
.pstepper-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ingredient-row:last-child { border-bottom: none; }
.ingredient-row { flex-wrap: wrap; gap: 4px; }
.ingredient-name { color: var(--text); flex: 1; min-width: 0; }
.ingredient-macros { color: var(--text-muted); font-size: 12px; font-weight: 600; width: 100%; padding-left: 0; }
.ingredient-cal { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.ingredient-add-btn {
  background: rgba(0,180,156,.15);
  color: #00b49c;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.questions-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.question-item { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.question-label { font-size: 14px; font-weight: 600; color: var(--text); }

.hand-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hand-btn {
  background: var(--surface);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  line-height: 1.3;
}
.hand-btn:hover { border-color: var(--brand); background: var(--brand-light); }
.hand-btn.selected { background: var(--brand); border-color: var(--brand); color: #fff; }
.hand-btn-text { display: block; }

.question-options { display: flex; flex-wrap: wrap; gap: 7px; }
.q-option {
  background: var(--bg);
  border: 1.5px solid var(--border-dark);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text);
  font-weight: 500;
}
.q-option:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.q-option.selected { background: var(--brand); border-color: var(--brand); color: #fff; }

.question-input {
  background: var(--bg);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}
.question-input:focus { border-color: var(--brand); }

.coach-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--brand-light);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius);
  padding: 11px 13px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-dark);
  line-height: 1.5;
}

.clarify-actions { display: flex; flex-direction: column; gap: 8px; }
.clarify-actions .btn-primary { width: 100%; }

/* Portion selector */
.portion-selector {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.portion-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.portion-btn:hover { border-color: var(--brand); background: var(--brand-light); }
.portion-btn.selected { border-color: var(--brand); background: var(--brand-light); }
.portion-btn.selected svg path[fill="var(--brand)"],
.portion-btn.selected svg path { fill: var(--brand); }
.portion-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
}
.portion-btn.selected .portion-label { color: var(--brand-dark); }

/* Manual add */
.manual-add-wrap {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.btn-manual-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-light);
  border: 1.5px dashed var(--brand);
  color: var(--brand-dark);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  padding: 13px 16px;
  width: 100%;
  border-radius: 14px;
  margin-top: 6px;
  transition: all 0.15s;
}
.btn-manual-toggle:hover { background: var(--brand-mid); }
.btn-manual-toggle:active { transform: scale(0.99); }
.manual-add-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.manual-input {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.manual-input:focus { border-color: var(--brand); }
.manual-macros-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.manual-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.manual-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.manual-field .manual-input { padding: 8px 10px; }
.manual-add-form .btn-primary { width: 100%; }

/* Food search */
.food-search-row {
  display: flex;
  gap: 8px;
}
.food-search-row .manual-input { flex: 1; }
.btn-food-search {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--brand);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-food-search:hover { background: var(--brand-dark); }

#foodSearchResults {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.food-search-loading {
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 0;
  text-align: center;
}
.food-search-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 0;
  line-height: 1.5;
}
.food-result-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  width: 100%;
}
.food-result-row:hover { border-color: var(--brand); background: var(--brand-light); }
.food-result-row.selected { border-color: var(--brand); background: var(--brand-light); }
.food-result-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.food-result-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.food-result-brand {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}
.food-result-macros {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.food-result-cal {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.food-result-macro {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.food-result-serving {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: auto;
}
.food-result-manual {
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 600;
  background: none;
  border-style: dashed;
  text-align: center;
}
.food-result-manual:hover { background: var(--brand-light); }

/* Serving row */
.serving-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 2px;
}
.serving-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.serving-unit {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}

/* ── Log Success ─────────────────────────────────────────── */
.low-confidence-screen {
  text-align: center;
  padding: 40px 24px;
  animation: fadeIn 0.3s ease;
}
.low-conf-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.low-conf-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}
.low-conf-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.low-conf-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 280px;
  margin: 0 auto;
}
.low-conf-hint-input {
  display: flex;
  gap: 8px;
  max-width: 320px;
  margin: 0 auto 12px;
}
.low-conf-text-input {
  flex: 1;
  background: var(--surface2);
  border: 1.5px solid var(--brand);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.low-conf-text-input::placeholder { color: var(--text-muted); }

.log-success {
  text-align: center;
  padding: 36px var(--gutter) 32px;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animated check ring */
.success-check-wrap {
  width: 80px;
  height: 80px;
  background: var(--green-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popIn {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.success-check-svg {
  width: 40px;
  height: 40px;
  color: var(--green);
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
}
.success-headline {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.success-subline {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.success-auto-reset {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 16px;
}

/* Macro strip */
.success-macros {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.smacro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.smacro-val {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.smacro-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.smacro-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-dark);
  flex-shrink: 0;
}

/* Meal rating card */
.meal-rating-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  text-align: left;
}
@keyframes ratingPop {
  from { opacity: 0; transform: scale(0.95) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.meal-rating-card.rating-pop { animation: ratingPop 0.3s cubic-bezier(0.34,1.56,0.64,1); }

.meal-rating-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.meal-rating-dot.green  { background: var(--green);  box-shadow: 0 0 0 4px var(--green-bg); }
.meal-rating-dot.yellow { background: var(--yellow); box-shadow: 0 0 0 4px var(--yellow-bg); }
.meal-rating-dot.red    { background: var(--red);    box-shadow: 0 0 0 4px var(--red-bg); }
.meal-rating-dot.loading {
  background: var(--border-dark);
  box-shadow: none;
  animation: ratingPulse 1s ease-in-out infinite;
}
@keyframes ratingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.meal-rating-body { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.meal-rating-verdict {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.teachable-lesson {
  background: #f0fdf4;
  border: 1.5px solid #34c759;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  text-align: left;
}
.teachable-lesson-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #16a34a;
  margin-bottom: 4px;
}
.teachable-lesson-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}

.meal-action-callout {
  background: var(--brand-light);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  text-align: left;
}
.meal-action-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-dark);
  margin-bottom: 4px;
}
.meal-action-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

/* Why Modal */
.why-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  padding: 0;
  animation: fadeIn 0.3s ease;
}
.why-modal-card {
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 32px 24px 40px;
  width: 100%;
  max-width: 480px;
  animation: slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.why-modal-icon {
  font-size: 36px;
  margin-bottom: 12px;
  text-align: center;
}
.why-modal-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 8px;
}
.why-modal-question {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
  margin-bottom: 10px;
}
.why-modal-sub {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 20px;
}
.why-modal-input {
  width: 100%;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  resize: none;
  outline: none;
  background: var(--bg);
  margin-bottom: 16px;
  line-height: 1.5;
  transition: border-color 0.15s;
}
.why-modal-input:focus { border-color: var(--brand); }
.why-modal-btn { width: 100%; }

/* Psychology nudge on success screen */
/* ── Coach Style Toggle ────────────────────────────────────── */
.coach-style-toggle {
  display: flex;
  gap: 8px;
  width: 100%;
}
.coach-style-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  min-height: 80px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.coach-style-btn.active {
  border-color: var(--brand);
  background: var(--brand-light);
}
.coach-style-icon { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.coach-style-btn.active .coach-style-icon { color: var(--brand-dark); }
.coach-style-label { font-size: 14px; font-weight: 700; color: var(--text); }
.coach-style-sub { font-size: 12px; color: var(--text-muted); text-align: center; }

/* ── Coach iMessage Bubble ─────────────────────────────────── */
.coach-message-wrap {
  margin-bottom: 12px;
  padding: 0 4px;
  opacity: 0;
  transform: translateY(12px);
  animation: msgSlideIn 0.4s ease forwards;
}
@keyframes msgSlideIn {
  to { opacity: 1; transform: translateY(0); }
}
.coach-message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.coach-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a73e8, #0d47a1);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.coach-message-from {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.coach-message-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  font-style: normal;
}
.coach-message-bubble {
  background: #e8e8ed;
  border-radius: 18px 18px 18px 4px;
  padding: 10px 14px;
  max-width: 85%;
  display: inline-block;
}
.coach-message-text {
  font-size: 14px;
  line-height: 1.5;
  color: #1c1c1e;
}
.message-reveal {
  animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.coach-message-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  padding-left: 2px;
}

/* Typing dots */
.coach-message-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 2px;
}
.coach-message-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8e8e93;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.coach-message-typing span:nth-child(2) { animation-delay: 0.2s; }
.coach-message-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.coach-psych-nudge {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  text-align: center;
}
.coach-psych-text {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.5;
  font-style: italic;
}

.pattern-nudge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff8ec;
  border: 1.5px solid var(--yellow);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  text-align: left;
}
.pattern-nudge-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.pattern-nudge-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yellow);
  margin-bottom: 4px;
}
.pattern-nudge-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

/* Daily total banner */
.success-daily-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--brand-light);
  border: 1px solid var(--brand-mid);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 24px;
}
.sdaily-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-dark);
  font-weight: 700;
}
.sdaily-cals {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.02em;
}
.sdaily-protein {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.sdaily-remaining {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  margin-top: 2px;
}
.sdaily-remaining.over { color: var(--red); }

/* Buttons */
.success-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Today Tab ───────────────────────────────────────────── */
.today-summary-card {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 20px var(--gutter) 24px;
  margin-bottom: 16px;
}

.today-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.today-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.today-streak {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
}

/* Big calorie number */
.calorie-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.calorie-main {
  display: flex;
  flex-direction: column;
}
.calorie-number {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  color: var(--text);
  letter-spacing: -2px;
  transition: color 0.3s;
}
.calorie-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}
.calorie-dividers {
  display: flex;
  align-items: center;
  gap: 16px;
}
.calorie-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.calorie-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.calorie-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.calorie-divider-line {
  width: 1px;
  height: 32px;
  background: var(--border);
}

/* Calorie progress bar */
.calorie-bar-track {
  height: 8px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 20px;
}
.calorie-bar-fill {
  height: 100%;
  border-radius: 100px;
  width: 0%;
  background: var(--brand);
  transition: width 0.6s ease, background 0.3s;
}
.calorie-bar-fill.over { background: var(--red); }
.calorie-bar-fill.close { background: var(--yellow); }

/* Macro pills — 3 columns */
/* Macro carousel */
.macro-carousel-wrap {
  overflow: hidden;
}
.macro-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Swiping the macro pager must not also drag the page vertically */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.macro-carousel::-webkit-scrollbar { display: none; }
.macro-page {
  min-width: 100%;
  scroll-snap-align: start;
}
.macro-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 4px;
}
.macro-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.macro-dot--active {
  background: var(--accent);
  transform: scale(1.3);
}

.macro-pills {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.macro-pill {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.macro-pill-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
}
.macro-pill-bar {
  height: 100%;
  border-radius: 100px;
  width: 0%;
  transition: width 0.6s ease;
}
.macro-pill-bar.protein-fill { background: var(--protein-color); }
.macro-pill-bar.carbs-fill   { background: var(--carbs-color); }
.macro-pill-bar.fat-fill     { background: var(--fat-color); }
.macro-pill-bar.fiber-fill   { background: #34c759; }
.macro-pill-bar.sugar-fill   { background: #ff9f0a; }
.macro-pill-bar.sodium-fill  { background: #af52de; }

.macro-pill-nums {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.macro-pill-val {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
.macro-pill-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.macro-pill-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: auto;
}
.macro-pill-goal {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 500;
}

/* Keep old bar refs for JS compatibility */
.macro-bar-fill.protein-fill { background: var(--protein-color); }
.macro-bar-fill.carbs-fill   { background: var(--carbs-color); }
.macro-bar-fill.fat-fill     { background: var(--fat-color); }

/* Section headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-bottom: 8px;
}
.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

/* Meal list */
.meal-list {
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.meal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow);
}
.meal-card-thumb {
  width: 72px; height: 72px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.meal-card-thumb-placeholder {
  width: 72px; height: 72px;
  border-radius: 10px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.meal-card-body { flex: 1; min-width: 0; cursor: pointer; }
.meal-card-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.meal-card-expand {
  font-size: 10px;
  color: var(--text-secondary, #888);
  margin-left: 5px;
  font-weight: 400;
}
.meal-card-macros {
  display: flex;
  gap: 8px;
  font-size: 12px;
}
.mcm { color: var(--text-muted); font-weight: 500; }
.mcm strong { color: var(--text); font-weight: 700; }
.meal-card-time {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Phase 1: honest-estimate cue + one-tap "Not right?" nudge */
.meal-card-est {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted); background: var(--bg);
  border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: middle;
}
.meal-card-footer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 2px;
}
.meal-card-notright {
  font-size: 11px; font-weight: 700; color: var(--brand);
  background: none; border: none; cursor: pointer; padding: 2px 0;
}
.meal-card-nudge {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.meal-card-nudge-label { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-right: 2px; }
.meal-card-nudge-btn {
  font-size: 12px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 11px; cursor: pointer;
}
.meal-card-nudge-btn:hover { border-color: var(--brand); color: var(--brand); }
.meal-card-nudge-edit { color: var(--text-muted); }

/* Nutrient breakdown sheet — "why this matters" education blurb */
.nutrient-sheet-edu {
  font-size: 13.5px; line-height: 1.5; color: var(--text);
  background: var(--brand-light); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 16px;
}
.meal-card-cals {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  flex-shrink: 0;
  text-align: right;
}
.meal-card-cals-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  text-align: right;
}
.meal-card-delete,
.meal-card-edit {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  opacity: 0.55;
}
.meal-card-delete:hover { background: rgba(204,51,51,0.12); color: #cc3333; opacity: 1; }
.meal-card-edit:hover,
.meal-card-edit--active { opacity: 1; color: var(--accent); }

.meal-card-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  align-items: center;
}

/* Per-ingredient breakdown */
.meal-card-ingredients {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.meal-card-ingredient-row {
  display: flex;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-muted);
  gap: 0;
}
.mci-iname {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.mci-dot { color: var(--text-dim); margin: 0 2px; flex-shrink: 0; }
.mci-ical { flex: 1; }
.mci-serving { color: var(--text-dim); font-size: 11px; flex-shrink: 0; }

/* Inline macro editor */
.meal-card {
  flex-wrap: wrap;
}
.meal-card-inline-edit {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
.meal-card-inline-fields {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.mci-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  flex: 1;
}
.mci-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 6px;
  text-align: center;
  box-sizing: border-box;
}
.mci-input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.mci-save {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mci-save:hover { opacity: 0.88; }

/* Undo toast */
#undoToast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1c1c1e;
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
  white-space: nowrap;
}
#undoToast.undo-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#undoToastBtn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.apple-health-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.apple-health-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border-dark); }

/* ── What Am I Missing ───────────────────────────────────── */
.missing-wrap {
  padding: 4px var(--gutter) 12px;
  display: flex;
  gap: 10px;
}
.btn-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  background: var(--brand-light);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius);
  color: var(--brand-dark);
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: -0.01em;
}
.btn-missing:hover { background: var(--brand-mid); }
.btn-missing:active { transform: scale(0.98); }

.btn-weekly {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  background: var(--surface);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-weekly:hover { background: var(--bg); }
.btn-weekly:active { transform: scale(0.98); }

/* Weekly Report Modal */
.weekly-modal-card {
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  max-height: 85dvh;
  overflow-y: auto;
  /* Clear the fixed bottom nav (~64px) + the iPhone home bar so the last
     button/content isn't hidden behind the tab bar. */
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 4px 0 16px;
}
.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.week-day-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.week-day-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}
.week-day-cal {
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}
.week-day-cal span {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted);
}
.week-score {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 12px;
}
.week-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.week-score-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.week-score-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.week-score-item.green .week-score-num { color: var(--green); }
.week-score-item.yellow .week-score-num { color: var(--yellow); }
.week-score-item.red .week-score-num { color: var(--red); }
.week-score-item.none .week-score-num { color: var(--text-dim); }

.week-coach-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
}
.week-coach-card.win {
  background: var(--green-bg);
  border: 1.5px solid var(--green);
}
.week-coach-card.focus {
  background: var(--brand-light);
  border: 1.5px solid var(--brand);
}
.week-coach-icon { font-size: 22px; flex-shrink: 0; }
.week-coach-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.week-coach-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}
.btn-send-coach {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 15px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity 0.15s;
}
.btn-send-coach:hover { opacity: 0.88; }

.missing-modal-card {
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.25s ease;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.modal-close {
  width: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.modal-close:hover { color: var(--text); }
.missing-loading {
  padding: 24px 20px;
}
#missingResult {
  padding: 16px 20px 8px;
}
.gap-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.gap-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.gap-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gap-badge.high   { background: var(--red-bg);    color: var(--red); }
.gap-badge.medium { background: var(--yellow-bg);  color: var(--yellow); }
.gap-badge.low    { background: var(--green-bg);   color: var(--green); }
.gap-item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.gap-item-body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.gap-item-foods {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-dark);
}
.gap-disclaimer {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  padding: 8px 20px 16px;
  line-height: 1.5;
}

/* ── Past Day Sheet ──────────────────────────────────────── */
.past-day-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 16px 24px;
  width: calc(100% - 32px);
  padding: 13px;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.past-day-trigger:hover,
.past-day-trigger:active { border-color: var(--brand); color: var(--brand); }

.past-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 200;
  animation: fadeInBackdrop 0.2s ease;
}
.past-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
  z-index: 201;
  max-height: 88dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0 0 32px;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
}
.past-sheet.open { transform: translateY(0); }
.past-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 12px auto 4px;
  flex-shrink: 0;
}
.past-sheet-top {
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.past-sheet-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.past-sheet-picker {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 15px;
  color: var(--text);
  -webkit-appearance: none;
}
.past-sheet-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px 0;
}
.past-sheet-summary-cal {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
}
.past-sheet-summary-sub {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
}
.past-sheet-entries {
  padding: 10px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.past-entry-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--bg);
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
.past-sheet-entries .past-entry-row:first-child { border-radius: 12px 12px 0 0; }
.past-sheet-entries .past-entry-row:last-child  { border-radius: 0 0 12px 12px; border-bottom: none; }
.past-sheet-entries .past-entry-row:only-child  { border-radius: 12px; border-bottom: none; }
.past-entry-emoji { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.past-entry-info  { flex: 1; min-width: 0; }
.past-entry-name  { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.past-entry-macros { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.past-entry-del {
  background: none; border: none;
  color: var(--text-dim); font-size: 13px;
  cursor: pointer; padding: 6px 8px; border-radius: 6px;
  flex-shrink: 0; transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.past-entry-del:hover,
.past-entry-del:active { color: #cc3333; background: rgba(204,51,51,0.1); }

.past-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 14px 16px 4px;
}
.past-photo-wrap {
  padding: 10px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.past-photo-preview {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.past-sheet-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.past-sheet-action-btn:hover,
.past-sheet-action-btn:active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand); }

.past-type-form {
  padding: 10px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.past-type-input {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.past-type-input:focus { border-color: var(--brand); }
.past-type-submit { width: 100%; }

.past-quick-list {
  padding: 10px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.past-quick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.past-quick-list .past-quick-row:first-child { border-radius: 12px 12px 0 0; }
.past-quick-list .past-quick-row:last-child  { border-radius: 0 0 12px 12px; border-bottom: none; }
.past-quick-list .past-quick-row:only-child  { border-radius: 12px; border-bottom: none; }
.past-quick-emoji { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.past-quick-info  { flex: 1; min-width: 0; }
.past-quick-name  { font-size: 13px; font-weight: 600; }
.past-quick-macros { font-size: 11px; color: var(--text-dim); }
.past-quick-add {
  background: var(--brand);
  color: #fff; border: none;
  border-radius: 50%;
  width: 30px; height: 30px;
  font-size: 18px; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.past-quick-add--done { background: #2a9d5c; }

.past-day-empty {
  font-size: 13px;
  color: var(--text-dim);
  padding: 12px 0 4px;
  margin: 0;
}
.past-sheet-close {
  margin: 16px 16px 0;
  width: calc(100% - 32px);
  padding: 13px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.quick-search-wrap { padding: 18px 16px 10px; }

.quick-meal-filters {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.quick-meal-filters::-webkit-scrollbar { display: none; }
.quick-meal-filter {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.quick-meal-filter.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.quick-meal-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.quick-meal-badge--breakfast { background: #fff3cd; color: #856404; }
.quick-meal-badge--lunch     { background: #d1ecf1; color: #0c5460; }
.quick-meal-badge--dinner    { background: #d4edda; color: #155724; }
.quick-meal-badge--snack     { background: #f8d7da; color: #721c24; }
.quick-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quick-search {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s;
  box-shadow: var(--shadow);
}
.quick-search:focus { border-color: var(--brand); }
.quick-search::placeholder { color: var(--text-dim); }

.quick-add-new-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.quick-add-new-btn svg { width: 20px; height: 20px; }
.quick-add-new-btn:active { transform: scale(0.96); }

.quick-list { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 1px; }

.quick-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.quick-list .quick-item:first-child { border-radius: 14px 14px 0 0; }
.quick-list .quick-item:last-child  { border-radius: 0 0 14px 14px; border-bottom: 1px solid var(--border); }
.quick-list .quick-item:only-child  { border-radius: 14px; }
.quick-item:active { background: var(--bg); }
.quick-item-left { flex-shrink: 0; }
.quick-item-icon { font-size: 26px; display: block; }
.quick-item-body { flex: 1; min-width: 0; }
.quick-item-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick-item-macros { font-size: 12px; color: var(--text-dim); font-weight: 500; }
.quick-logged-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  color: var(--brand);
  vertical-align: middle;
  margin-left: 5px;
  letter-spacing: 0.02em;
}
.quick-item-add-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-item-plus-icon {
  width: 16px;
  height: 16px;
  color: var(--brand);
  stroke-width: 2.5;
}

/* ── Serving Size Sheet ───────────────────────────────────── */
.serving-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
}
.serving-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 12px 24px 40px;
  z-index: 201;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.serving-sheet.open { transform: translateY(0); }
.serving-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 20px;
}
.serving-sheet-name {
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 6px;
  color: var(--text);
}
.serving-sheet-macros {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 28px;
}
.serving-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-bottom: 28px;
}
.serving-step-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 28px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}
.serving-step-btn:active { background: var(--surface); transform: scale(0.93); }
.serving-value-wrap { text-align: center; }
.serving-value {
  font-size: 48px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
}
.serving-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.serving-log-btn { width: 100%; padding: 16px; font-size: 17px; }

/* ── Sport Mode Onboarding ───────────────────────────────── */
.sport-onboard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom));
  background: var(--bg);
  z-index: 99;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sport-onboard-overlay[hidden] { display: none; }

.sport-onboard-inner {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 20px 48px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sob-progress-track {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  margin-bottom: 8px;
  overflow: hidden;
}
.sob-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sport), #7c3aed);
  border-radius: 4px;
  transition: width 0.35s ease;
}
.sob-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 32px;
  text-align: center;
}

.sob-steps { flex: 1; }

.sob-step { display: none; }
.sob-step.active { display: flex; flex-direction: column; }

/* ── Wheel Picker ─────────────────────────────────────────── */
.wheel-picker-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wheel-picker-group {
  display: flex;
  gap: 16px;
}
.wheel-unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.wheel-picker {
  position: relative;
  width: 90px;
  height: 180px;
  overflow: hidden;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.wheel-picker-wide { width: 120px; }
.wheel-picker:active { cursor: grabbing; }

.wheel-picker-list {
  position: absolute;
  width: 100%;
  will-change: transform;
  transition: transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wheel-picker-list.is-flicking {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wheel-picker-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.35;
  transition: color 0.15s, font-size 0.15s, font-weight 0.15s, opacity 0.15s;
}
.wheel-picker-item.selected {
  color: var(--brand);
  font-size: 30px;
  font-weight: 800;
  opacity: 1;
  letter-spacing: -0.5px;
}

.wheel-picker-highlight {
  position: absolute;
  top: 50%;
  left: 4px;
  right: 4px;
  height: 44px;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 2px solid var(--brand);
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
}

.wheel-picker-mask {
  position: absolute;
  left: 0;
  right: 0;
  height: 68px;
  z-index: 2;
  pointer-events: none;
}
.wheel-picker-mask-top {
  top: 0;
  background: linear-gradient(to bottom, var(--bg) 20%, transparent);
}
.wheel-picker-mask-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 20%, transparent);
}

.sob-icon {
  font-size: 44px;
  text-align: center;
  margin-bottom: 16px;
}
.sob-icon-svg {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  color: var(--sport);
}
.sob-icon-svg svg { width: 100%; height: 100%; }

.sob-goal-icon-svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--sport);
}
.sob-goal-icon-svg svg { width: 100%; height: 100%; }
.sob-goal-card.selected .sob-goal-icon-svg { color: var(--sport); }

/* ── Completion screen ───────────────────────────────────── */
.sob-complete-step { align-items: center; text-align: center; }
.sob-complete-headline { margin-top: 4px; }

.sob-complete-ring {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
}
.sob-complete-svg {
  width: 88px;
  height: 88px;
  transform: rotate(-90deg);
}
.sob-ring-track { stroke: var(--border); }
.sob-ring-fill {
  stroke: var(--sport);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}
.sob-complete-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sport);
}
.sob-complete-check svg { width: 28px; height: 28px; }

.sob-next-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 24px 0 32px;
  text-align: left;
}
.sob-next-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.sob-ns-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sport);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.sob-ns-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.sob-ns-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.sob-complete-actions { width: 100%; }
.sob-complete-actions .btn-sob-finish { width: 100%; padding: 16px; font-size: 16px; }
.sob-headline {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  text-align: center;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.sob-body {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 28px;
}
.sob-opt-badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--border);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 100px;
  vertical-align: middle;
  margin-left: 6px;
}

.sob-fields { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.sob-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.sob-opt { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--text-muted); }
.sob-field-mt { margin-top: 4px; }

.sob-input-row { display: flex; align-items: center; gap: 8px; }
.sob-input {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--text);
  width: 100%;
  -webkit-appearance: none;
}
.sob-input:focus { outline: none; border-color: var(--sport); }
.sob-input-sm { width: 80px; flex-shrink: 0; }
.sob-input-full { width: 100%; }
.sob-unit { font-size: 13px; color: var(--text-muted); font-weight: 600; flex-shrink: 0; }

.sob-toggle-row { display: flex; gap: 10px; }
.sob-toggle-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.sob-toggle-btn.selected {
  background: var(--sport);
  border-color: var(--sport);
  color: #fff;
}

.sob-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.sob-chips-multi { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.sob-chip, .sob-chip-multi {
  padding: 11px 18px;
  min-height: 44px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.sob-chip.selected {
  background: var(--sport);
  border-color: var(--sport);
  color: #fff;
}
.sob-chip-multi.selected {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.sob-goal-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.sob-goal-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.sob-goal-card.selected {
  border-color: var(--sport);
  background: rgba(0, 180, 156, 0.06);
}
.sob-goal-icon { font-size: 26px; flex-shrink: 0; }
.sob-goal-title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 3px;
}
.sob-goal-sub { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.sob-biomarker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
.sob-bm-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.sob-nav {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}
.btn-sob-back {
  padding: 14px 20px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-sob-next {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: var(--sport);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-sob-next:hover { opacity: 0.9; }
.btn-sob-finish {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--sport), #7c3aed);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.sob-next-wrap {
  margin-top: 12px;
}
.sob-next-wrap .btn-sob-next {
  width: 100%;
  padding: 16px;
  font-size: 16px;
}

/* ── Sport Mode ──────────────────────────────────────────── */
.sport-hero {
  background: var(--sport);
  padding: 28px var(--gutter) 24px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  text-align: center;
}
.sport-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 10px;
}
.sport-title {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.sport-sub { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.6; }
.sob-edit-profile-btn {
  margin-top: 14px;
  padding: 8px 20px;
  border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: transparent;
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.sob-edit-profile-btn[hidden] { display: none; }

/* ── Daily check-in nudge (Ben, 9/10) ──────────────────────────
   "make it glow and pulse to draw attention to clients to fill it out."
   It is the most-used feature in the app (186 uses / 6 clients, ahead of photo
   logging), so it earns the attention until it is done — and gets out of the
   way afterwards. */
@keyframes checkin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 180, 156, .45); }
  50%      { box-shadow: 0 0 14px 4px rgba(0, 180, 156, .28); }
}
.checkin-nudge {
  border-color: var(--brand) !important;
  animation: checkin-pulse 2.4s ease-in-out infinite;
}
/* A card pulsing every morning is a migraine trigger for some people, and the
   browser already knows who those people are. */
@media (prefers-reduced-motion: reduce) {
  .checkin-nudge { animation: none; box-shadow: 0 0 0 2px rgba(0, 180, 156, .35); }
}

/* What replaces the card once the check-in is in. One quiet line, with a way
   back — hiding it outright would mean a wrong answer could never be fixed. */
.checkin-done-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 var(--gutter) 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.checkin-done-tick {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.checkin-done-edit {
  margin-left: auto; flex: none;
  background: none; border: 0; padding: 4px 2px;
  color: var(--brand-on-light);
  font-size: 12.5px; font-weight: 800;
  font-family: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

.sport-section {
  margin: 20px 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.sport-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.sport-section-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--sport); }
.sport-section-icon svg { width: 100%; height: 100%; }
.sport-section-title { font-size: 15px; font-weight: 800; color: var(--text); }
.sport-section-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.sport-section-toggle {
  margin-left: auto;
  background: var(--sport);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.sport-section-toggle:hover { background: #5a2ee0; }
.sport-section-toggle.open { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

/* Ben, 10/3: Option 1 from the Sport/Supps duplication mockup comparison
   (https://claude.ai/artifact/9Wcp9hgwK722S5oAZoD7t9) — a one-line summary
   instead of re-rendering the full supplement list a second time. This is
   read-only context ("used in plan building"), so it reads as a summary
   row to tap through, not as a second place to manage the stack. */
.sport-supp-summary {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 12px; padding: 12px 14px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 14px;
  font: inherit; text-align: left; cursor: pointer;
}
.sport-supp-summary:active { background: var(--sport-light); }
.sport-supp-summary-pills { display: flex; flex-shrink: 0; }
.sport-supp-pill {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sport-light); color: var(--sport);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  border: 2px solid var(--surface2); margin-left: -8px;
}
.sport-supp-pill:first-child { margin-left: 0; }
.sport-supp-summary-text {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sport-supp-summary-text b { color: var(--text); }
.sport-supp-summary-arrow { flex-shrink: 0; color: var(--sport); font-size: 16px; }

.sport-checkin-form {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
}

.checkin-group {
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--border);
}
.checkin-group:last-child { border-bottom: none; }
.checkin-group-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--sport);
  margin-bottom: 12px;
}
.checkin-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.checkin-item:last-child { margin-bottom: 0; }
.checkin-item label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.q-options-row { display: flex; flex-wrap: wrap; gap: 7px; }
/* The where+severity detail under "Pain during the night?", shown only
   after Yes is picked — same gap rhythm as the chip row above it so it
   reads as part of the same question, not a separate card. */
.checkin-night-pain-detail { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.q-chip {
  background: var(--bg);
  border: 1.5px solid var(--border-dark);
  border-radius: 100px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text);
  display: inline-flex;
  align-items: center;
}
.q-chip:hover { border-color: var(--sport); color: var(--sport); background: var(--sport-light); }
.q-chip.selected { background: var(--sport); border-color: var(--sport); color: #fff; }

.checkin-notes {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
  resize: vertical;
  font-family: var(--font);
  transition: border-color 0.15s;
}
.checkin-notes:focus { border-color: var(--sport); }
.checkin-notes::placeholder { color: var(--text-dim); }

.upload-cards {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
}
.upload-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.upload-card-icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--brand); }
.upload-card-icon svg { width: 100%; height: 100%; }
.upload-card-body { flex: 1; min-width: 160px; }
.upload-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
.upload-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.upload-card-status { flex-shrink: 0; margin-left: auto; }

.manual-entry-section {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}
.manual-entry-label { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text-muted); }
.manual-entry-text {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
  resize: vertical;
  font-family: var(--font);
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.manual-entry-text:focus { border-color: var(--sport); }
.manual-entry-actions { display: flex; gap: 8px; }

.sport-generate-section { margin: 16px 16px 20px; }

.data-completeness {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.dc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 0;
}
.dc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-dark);
  flex-shrink: 0;
  transition: background 0.3s;
}
.dc-item.done .dc-dot { background: var(--green); }
.dc-item.done { color: var(--text); }

.sport-disclaimer {
  font-size: 11px;
  color: var(--text-dim);
  padding: 10px 16px;
  line-height: 1.5;
  border-top: 1px solid var(--border);
}

.btn-sport-generate {
  width: calc(100% - 32px);
  margin: 12px 16px 16px;
  background: var(--sport);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 800;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 16px rgba(108,63,255,0.3);
}
.btn-sport-generate:hover { background: #5a2ee0; }
.btn-sport-generate:active { transform: scale(0.98); }
.btn-sport-generate:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.sport-plan-output {
  margin: 0 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.plan-header {
  background: var(--sport);
  padding: 16px;
}
.plan-title { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 4px; }
.plan-date { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.plan-confidence {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.plan-data-read {
  margin: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.plan-data-read-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.plan-data-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.plan-data-row:last-child { border-bottom: none; }
.plan-data-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.plan-data-val {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.plan-boost-card {
  border-top: 1px solid var(--border);
  padding: 16px;
  background: var(--surface);
}
.plan-boost-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.plan-boost-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.plan-boost-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.boost-question {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}
.boost-q-icon { flex-shrink: 0; }
.boost-input-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.boost-input-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.boost-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
}
.boost-input:focus { outline: none; border-color: var(--primary); }
.boost-submit-btn {
  width: 100%;
  margin-top: 4px;
}
.boost-upload-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  margin-bottom: 8px;
}
.boost-upload-btn:active { opacity: 0.7; }
.boost-upload-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.boost-upload-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.boost-upload-arrow {
  font-size: 18px;
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}
.plan-double-check-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: var(--yellow-bg);
  border-bottom: 1px solid #fce5b0;
  font-size: 12px;
  color: #856404;
  line-height: 1.5;
}
.plan-sections { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.plan-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--sport);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan-item {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 3px solid var(--sport);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sport);
}
.plan-item:last-child { margin-bottom: 0; }
.plan-item-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.plan-item-detail { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.plan-item-evidence { font-size: 11px; color: var(--text-dim); margin-top: 6px; font-style: italic; }
.plan-item-warning {
  font-size: 11px;
  color: #856404;
  margin-top: 6px;
  padding: 4px 8px;
  background: var(--yellow-bg);
  border-radius: 4px;
}
.plan-disclaimer-box {
  margin: 0 16px 16px;
  background: var(--red-bg);
  border: 1px solid #f5c6c2;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}
.plan-disclaimer-box strong { color: var(--red); }

/* ── Goals Tab ───────────────────────────────────────────── */
.goals-form { display: flex; flex-direction: column; gap: 0; padding-top: 8px; }

.goals-section {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 18px 16px;
}

.goals-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--brand);
  margin-bottom: 14px;
}

.goals-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  padding: 24px 16px 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.goals-sub {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 16px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

/* ── Calorie Calculator ───────────────────────────────────── */
.btn-calculate {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--brand-light);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius);
  color: var(--brand-dark);
  font-size: 14px;
  font-weight: 700;
  padding: 13px 16px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 0.15s;
}
.btn-calculate:hover { background: var(--brand-mid); }

.calc-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.calc-intro {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calc-field-full { grid-column: 1 / -1; }
.calc-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.calc-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.calc-height-wrap { gap: 6px; }
.calc-input-wrap input {
  flex: 1;
  background: var(--surface);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  min-width: 0;
  transition: border-color 0.15s;
}
.calc-input-wrap input:focus { border-color: var(--brand); }
.calc-unit {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.calc-toggle {
  display: flex;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.calc-toggle-btn {
  flex: 1;
  background: var(--surface);
  border: none;
  padding: 9px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  border-right: 1px solid var(--border-dark);
}
.calc-toggle-btn:last-child { border-right: none; }
.calc-toggle-btn.active { background: var(--brand); color: #fff; }
.calc-form .btn-primary { width: 100%; }

.calc-result {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.calc-result-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 4px 0;
}
.calc-result-label { color: var(--text-muted); }
.calc-result-val { font-weight: 700; color: var(--text); }
.calc-result-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.calc-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 14px 0 8px;
}
.calc-section-label:first-of-type { margin-top: 0; }
.calc-chips-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.calc-chip {
  background: var(--surface);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  min-height: 48px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.calc-chip.active {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 700;
}
.calc-chip:hover:not(.active) { background: var(--bg); }

.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  min-height: 52px;
  border-bottom: 1px solid var(--border);
}
.form-row:last-child { border-bottom: none; }
.form-row label {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
  color: var(--text);
  /* A flex item will not shrink below its own content without this, so a long
     label plus a fixed-width input pushed the whole page wider than the screen
     — the Goals page scrolled sideways and the text became unreadable
     (Ben, 8/21). */
  min-width: 0;
}
.form-row input, .form-row select {
  background: var(--bg);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 16px;   /* 16px+ or iOS zooms the page on focus */
  padding: 8px 10px;
  text-align: right;
  /* Was a hard 140px. On a narrow phone that could not compress, which is the
     other half of the overflow. Cap it instead and let it shrink. */
  width: 140px;
  max-width: 45%;
  min-width: 88px;
  flex: 0 1 auto;
  outline: none;
  transition: border-color 0.15s;
  font-family: var(--font);
}
.form-row input:focus, .form-row select:focus { border-color: var(--brand); }
.unit { font-size: 13px; color: var(--text-muted); width: 28px; }

.api-note, .apple-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 8px;
}

.btn-save-goals {
  width: calc(100% - 32px);
  margin: 16px;
  padding: 16px;
  font-size: 16px;
}
.save-confirm {
  text-align: center;
  color: var(--green);
  font-weight: 700;
  font-size: 15px;
  padding: 0 16px 16px;
}

/* ── Empty State ─────────────────────────────────────────── */
.empty-state {
  color: var(--text-dim);
  text-align: center;
  padding: 48px 24px;
  font-size: 14px;
  line-height: 1.7;
}
.empty-state strong { color: var(--text-muted); }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 480px;
  border-top: 1px solid var(--border);
  animation: slideUp 0.25s ease;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.modal h3 { font-size: 18px; font-weight: 800; margin-bottom: 6px; color: var(--text); }
.modal > p { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }
.modal-options { display: flex; gap: 10px; margin-bottom: 18px; }
.modal-option {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.modal-option:hover { border-color: var(--brand); background: var(--brand-light); }
.modal-option-icon { font-size: 26px; }
.modal-option span { font-size: 14px; font-weight: 700; }
.modal-option small { font-size: 11px; color: var(--text-muted); }
.apple-instructions {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.apple-instructions strong { color: var(--text); }
.apple-instructions ol { padding-left: 18px; }
.modal-close { width: 100%; }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--surface);
  padding: 11px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  z-index: 300;
  opacity: 0;
  transition: all 0.25s ease;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 360px) {
  .calorie-ring-wrap { width: 76px; height: 76px; }
  .calorie-ring { width: 76px; height: 76px; }
  .calorie-ring-number { font-size: 18px; }
}

/* ── Trends ──────────────────────────────────────────────────── */
.trend-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  border-top: 1px solid var(--border);
}
.trend-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.session-restore { display: flex; align-items: center; justify-content: center; min-height: 100dvh; }
.session-restore[hidden] { display: none; }
.session-restore-spinner { margin: 22px auto 0; }
.trend-loading-text { font-size: 13px; color: var(--text-muted); font-weight: 600; }

.trend-block {
  padding: 16px 16px 4px;
  border-top: 1px solid var(--border);
}
.trend-block-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.trend-block-sub {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
}
.trend-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 0 16px;
}

/* Macro bars */
.trend-macro-row { margin-bottom: 14px; }
.trend-macro-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.trend-macro-nums { font-size: 13px; font-weight: 700; color: var(--text); }
.trend-macro-nums.over { color: var(--red); }
.trend-macro-goal { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.trend-bar-track {
  height: 8px;
  background: var(--bg);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.trend-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Heatmap dots */
.trend-dots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  margin-bottom: 12px;
}
.trend-dot {
  aspect-ratio: 1;
  border-radius: 4px;
}
.trend-streak {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  padding-bottom: 12px;
}
.trend-streak strong { color: var(--brand); }

/* Action items */
.trend-actions-card {
  margin: 0 16px 16px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.trend-actions-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.trend-action-item {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.trend-action-item:last-child { border-bottom: none; }
.trend-action-header { margin-bottom: 6px; }
.trend-action-priority {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: block;
  margin-bottom: 4px;
}
.trend-action-priority.high { color: var(--red); }
.trend-action-priority.medium { color: #f59e0b; }
.trend-action-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.trend-action-detail {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 8px;
}
.trend-action-why {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
}

/* ── Supplements Tab ─────────────────────────────────────────── */
.supp-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 28px var(--gutter) 24px;
  text-align: center;
}
.supp-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 10px;
}
.supp-title { font-size: 24px; font-weight: 900; color: #fff; margin-bottom: 6px; letter-spacing: -0.5px; }
.supp-sub { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.6; }

.supp-consistency-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 16px 0;
  padding: 14px 16px;
  background: #fff8e6;
  border: 1.5px solid #f59e0b;
  border-radius: var(--radius);
}
.supp-consistency-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--brand);
}
.supp-consistency-icon svg { width: 100%; height: 100%; }
.supp-consistency-title {
  font-size: 14px;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 4px;
}
.supp-consistency-text {
  font-size: 12px;
  color: #78350f;
  line-height: 1.6;
}
.supp-consistency-text strong { font-weight: 800; }

.supp-section {
  margin: 20px 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.supp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}
.supp-section-title { font-size: 15px; font-weight: 800; color: var(--text); }
.supp-section-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.supp-add-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.supp-streak-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
}
.supp-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}

/* Stack list */
.supp-stack-list { border-top: 1px solid var(--border); }
.supp-stack-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.supp-stack-item:last-child { border-bottom: none; }
.supp-stack-body { flex: 1; min-width: 0; }
.supp-stack-name { font-size: 14px; font-weight: 700; color: var(--text); }
.supp-stack-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.supp-remove-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.supp-edit-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 12px;
  min-height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* Schedule */
.supp-schedule-list { border-top: 1px solid var(--border); }
.supp-time-group { padding: 10px 16px 4px; }
.supp-time-group-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--brand);
  margin-bottom: 8px;
}
.supp-schedule-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  min-height: 52px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity 0.2s;
}
.supp-schedule-item:last-child { border-bottom: none; }
.supp-schedule-item.done { opacity: 0.5; }
.supp-check-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.supp-check-circle.done {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.supp-schedule-name { font-size: 14px; font-weight: 700; color: var(--text); }
.supp-schedule-dose { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
/* With-food guidance chip on schedule rows */
.supp-schedule-food {
  display: inline-block; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.4px;
  border-radius: 5px; padding: 1px 6px; margin-left: 4px; vertical-align: middle;
  color: var(--text-muted); background: var(--bg);
}
.supp-schedule-food.sf-with  { color: var(--brand-on-light); background: var(--brand-light); }
.supp-schedule-food.sf-empty { color: var(--yellow); background: var(--yellow-bg); }
/* Gap banner — explains the red tab dot in plain language */
.supp-gap-banner {
  margin: 14px 16px 0;
  background: var(--red-bg);
  border: 1.5px solid var(--red, #e74c3c);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.supp-gap-banner strong { color: var(--red, #e74c3c); }

/* Trigger Finder (Food & Symptom Detective) */
.tf-note {
  font-size: 13px; color: var(--text-muted); line-height: 1.5;
  background: var(--bg); border-radius: 10px; padding: 12px 14px;
}
.tf-pattern {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; background: var(--surface);
}
.tf-pattern-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--text); }
.tf-pattern-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.tf-conf { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; border-radius: 5px; padding: 2px 7px; }
.tf-conf.tf-high { color: var(--red, #e74c3c); background: var(--red-bg); }
.tf-conf.tf-med  { color: var(--yellow); background: var(--yellow-bg); }
.tf-conf.tf-low  { color: var(--text-muted); background: var(--bg); }
.tf-safe    { font-size: 13px; color: var(--text); background: var(--brand-light); border-radius: 10px; padding: 10px 12px; margin-top: 4px; }
.tf-summary { font-size: 13.5px; color: var(--text); line-height: 1.55; margin-top: 10px; }
.tf-next    { font-size: 13.5px; color: var(--text); line-height: 1.5; margin-top: 8px; }
.tf-disclaimer { font-size: 11px; color: var(--text-dim); line-height: 1.4; margin-top: 12px; }

/* Timing education */
.supp-timing-list { border-top: 1px solid var(--border); }
.supp-timing-block {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.supp-timing-block:last-child { border-bottom: none; }
.supp-timing-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.supp-timing-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--brand);
  display: flex;
  align-items: center;
}
.supp-timing-icon svg { width: 100%; height: 100%; }
.supp-timing-block.avoid .supp-timing-icon { color: var(--red); }
.supp-timing-items {
  font-size: 13px;
  color: var(--brand-dark);
  font-weight: 600;
  margin-bottom: 5px;
  line-height: 1.5;
}
.supp-timing-why {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.supp-timing-block.avoid .supp-timing-label { color: var(--red); }
.supp-timing-block.avoid .supp-timing-items { color: var(--red); }

/* Evidence tiers */
.supp-evidence-list { border-top: 1px solid var(--border); }
.supp-evidence-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.supp-evidence-item:last-child { border-bottom: none; }
.supp-tier-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.supp-tier-badge.tier-a { background: #dcfce7; color: #166534; }
.supp-tier-badge.tier-b { background: #fef9c3; color: #854d0e; }
.supp-tier-badge.tier-c { background: #f1f5f9; color: var(--text-muted); }
.supp-tier-badge.tier-snake { background: #fee2e2; color: #991b1b; }
.supp-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.supp-pill {
  background: var(--bg);
  border: 1px solid var(--border-dark);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  color: var(--text);
}
.supp-pill-btn {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.supp-pill-btn:hover,
.supp-pill-btn:active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: scale(1.04);
}
.supp-evidence-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  font-style: italic;
}

/* Supplement Info Card */
.supp-info-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  animation: fadeInBackdrop 0.2s ease;
}
@keyframes fadeInBackdrop { from { opacity: 0; } to { opacity: 1; } }

.supp-info-card {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  z-index: 301;
  padding: 0 20px 40px;
  max-height: 88dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: slideUpSheet 0.28s cubic-bezier(0.32,0.72,0,1);
}
@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Drag handle */
.supp-info-card::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 12px auto 20px;
  flex-shrink: 0;
}
.supp-info-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.supp-info-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.supp-info-tier {
  align-self: flex-start;
}
.supp-info-dose-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
}
.supp-info-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  flex-shrink: 0;
  width: 54px;
  padding-top: 1px;
}
.supp-info-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}
.supp-info-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin: 18px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.supp-info-body,
.supp-info-research {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
}
.supp-info-warning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(204,51,51,0.08);
  border: 1px solid rgba(204,51,51,0.2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: #cc3333;
  line-height: 1.5;
}
.supp-info-warning {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
/* ── Affiliate (Thorne ambassador) ──────────────────────────────────────────
   Deliberately styled as a clearly-marked ad, NOT as coaching guidance. It's
   a secondary outline button, never the page's primary action, and the
   disclosure above it is plain readable text rather than fine print. */
.supp-info-shop {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.supp-affiliate-disclosure {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  background: var(--bg-subtle, rgba(127,127,127,0.06));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  /* 12.5px, normal weight, full contrast — legible, not buried. */
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
.supp-affiliate-disclosure-sm { font-size: 12px; padding: 8px 10px; }
.supp-affiliate-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; flex-shrink: 0;
}
.supp-affiliate-link {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: transparent; color: var(--text);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.supp-affiliate-link-main { display: inline-flex; align-items: center; gap: 6px; }
/* The link lands on Thorne's store, not the product page — name what to look
   for so the client isn't dropped on a homepage with no idea what to search. */
.supp-affiliate-hint { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.supp-affiliate-hint strong { font-weight: 800; color: var(--text-muted); }
.supp-affiliate-link:hover { border-color: var(--brand); color: var(--brand); }
.supp-affiliate-link-sm { padding: 5px 10px; font-size: 12px; margin-top: 6px; }
.supp-affiliate-ext { font-size: 11px; opacity: 0.7; }
/* Marks an affiliated product in the evidence pills, so the incentive is
   visible while browsing — not only after tapping through. */
.supp-pill-aff {
  margin-left: 6px; padding: 1px 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.3px;
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-dim);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.supp-info-close {
  width: 100%;
  margin-top: 20px;
}

/* Analyze section */
.supp-analyze-section { margin-bottom: 16px; }
.stack-analysis-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--border);
}
.stack-analysis-overall {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  font-weight: 600;
}
.stack-analysis-section {
  margin: 0 16px 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.stack-analysis-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.stack-analysis-item {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.stack-analysis-item:last-child { border-bottom: none; }

/* Add Supplement Modal */
.supp-modal-overlay { align-items: center; justify-content: center; padding: 20px; }
.supp-modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 420px;
}
.supp-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
}
.supp-modal-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.supp-modal-field { display: flex; flex-direction: column; gap: 6px; }
.supp-modal-field label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.supp-modal-field input {
  background: var(--bg);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  font-family: var(--font);
}
.supp-modal-field input:focus { border-color: var(--brand); }
.supp-time-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.supp-time-chip {
  background: var(--bg);
  border: 1.5px solid var(--border-dark);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.supp-time-chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.supp-scan-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.supp-scan-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 10px 12px;
  background: var(--sport-light);
  border: 1.5px solid var(--sport);
  border-radius: var(--radius-sm);
  color: var(--sport);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  justify-content: center;
}
.supp-scan-btn:active { opacity: 0.75; }
.supp-scan-status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  min-height: 18px;
}
.supp-modal-actions { display: flex; flex-direction: column; gap: 8px; }
.supp-time-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.supp-time-chip { padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.supp-time-chip.active { border-color: var(--brand); background: var(--brand); color: #fff; }
.supp-time-chip:hover:not(.active) { border-color: var(--brand); color: var(--brand); }
.supp-timing-hint {
  font-size: 11px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-radius: 6px;
  padding: 6px 8px;
  line-height: 1.4;
  margin-top: 4px;
}

/* ── Desktop / larger screen overrides ──────────────────── */
@media (min-width: 600px) {
  #app { max-width: 620px; }

  .tab-nav { max-width: 620px; }

  .app-header { padding: 18px 28px 16px; }

  .tab-content > *:not(.modal-overlay) {
    padding-left: 28px;
    padding-right: 28px;
  }

  .tab-content {
    padding-bottom: 110px;
  }

  /* Cards breathe more on desktop */
  .today-summary-card,
  .sport-plan-output,
  .clarify-panel,
  .log-success,
  .analysis-area,
  .supp-section,
  .sport-section {
    padding-left: 28px;
    padding-right: 28px;
  }

  .plan-section,
  .supp-stack-item,
  .upload-card {
    padding: 18px 20px;
  }

  .sport-hero,
  .supp-hero {
    padding: 36px 28px 28px;
  }

  .goals-form {
    padding: 24px 28px 40px;
  }

  .tab-btn {
    padding: 14px 8px 12px;
    font-size: 11px;
  }

  .tab-btn .tab-icon {
    width: 24px;
    height: 24px;
  }

  .btn-primary,
  .btn-ghost {
    padding: 15px 24px;
    font-size: 15px;
  }

  .question-item {
    padding: 16px 18px;
  }

  .plan-item {
    padding: 16px 18px;
  }

  .supp-consistency-callout {
    margin: 20px 28px 0;
  }

  .plan-boost-card {
    padding: 20px 28px;
  }

  .coach-message-wrap {
    padding: 0 8px;
  }
}

/* ── Global Onboarding ───────────────────────────────────────── */
.gob-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 400;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.gob-overlay[hidden] { display: none; }

.gob-inner {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 56px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gob-progress-track {
  height: 3px;
  background: var(--border);
  border-radius: 4px;
  margin-bottom: 8px;
  overflow: hidden;
}
.gob-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 4px;
  transition: width 0.4s ease;
  width: 0%;
}
.gob-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 36px;
  text-align: center;
}

.gob-steps { flex: 1; display: flex; flex-direction: column; }
.gob-step { display: none; flex-direction: column; flex: 1; }
.gob-step.active { display: flex; }

.gob-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
}
.gob-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 16px; }

.gob-icon-svg {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  color: var(--brand);
}
.gob-icon-svg svg { width: 100%; height: 100%; }

.gob-headline {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  text-align: center;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.gob-body {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 28px;
}

.gob-sub-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Name input */
.gob-name-row { margin-bottom: 20px; }
.gob-name-input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text);
  text-align: center;
  font-weight: 600;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.gob-name-input:focus { outline: none; border-color: var(--brand); }
.gob-name-input::placeholder { color: var(--text-muted); font-weight: 400; }
textarea.gob-name-input { text-align: left; font-weight: 400; line-height: 1.5; }

/* Goal grid */
.gob-goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
.gob-goal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.gob-goal-btn.selected {
  border-color: var(--brand);
  background: var(--brand-light);
}
.gob-goal-icon-svg {
  width: 28px;
  height: 28px;
  color: var(--brand);
}
.gob-goal-icon-svg svg { width: 100%; height: 100%; }
.gob-goal-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  display: block;
}
.gob-goal-sub {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  line-height: 1.4;
}

/* Fields */
.gob-fields { display: flex; flex-direction: column; gap: 24px; margin-bottom: 28px; }
.gob-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

/* Sex toggle */
.gob-toggle-row { display: flex; gap: 10px; }
.gob-toggle-btn {
  flex: 1;
  padding: 14px;
  min-height: 52px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.gob-toggle-btn.selected {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Activity list */
.gob-activity-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.gob-activity-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.gob-activity-btn.selected {
  border-color: var(--brand);
  background: var(--brand-light);
}
.gob-activity-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1.3;
}
.gob-activity-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Nav */
.gob-nav {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}
.btn-gob-back {
  padding: 14px 20px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-gob-next {
  flex: 1;
  padding: 15px;
  border-radius: 12px;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.btn-gob-primary {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  margin-top: auto;
}

/* Done screen */
.gob-done-step { align-items: center; text-align: center; }
.gob-done-ring {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
}
.gob-done-svg {
  width: 88px;
  height: 88px;
  transform: rotate(-90deg);
}
.gob-done-arc { stroke-linecap: round; }
.gob-done-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.gob-done-check svg { width: 28px; height: 28px; }
.gob-done-name { font-size: 28px; margin-bottom: 20px; }
.gob-done-targets {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.gob-done-target-pill {
  background: var(--brand-light);
  border: 1px solid var(--brand-mid);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-dark);
}
.gob-done-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.6;
}

/* ── Terms Screen ────────────────────────────────────────────── */
.terms-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}
.terms-screen[hidden] { display: none; }

.terms-card {
  max-width: 480px;
  width: 100%;
  padding: 32px 24px 40px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.terms-logo {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
}
.terms-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

.terms-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.terms-intro {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.5;
}

.terms-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.terms-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.terms-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.terms-section-body {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.65;
}
.terms-section-body strong {
  color: var(--text);
  font-weight: 700;
}

.terms-agree-wrap {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 80%, transparent);
  padding-top: 16px;
}
.btn-terms-agree {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: -0.2px;
}
.btn-terms-agree:hover { background: var(--brand-dark); }
.terms-fine {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}
.terms-fine a { color: var(--brand); text-decoration: underline; font-weight: 600; }

/* ── Client Drill-down: status chip ─────────────────────────── */
.cd-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cd-status-chip:active { opacity: 0.75; }
.cd-status-chip--active { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.cd-status-chip--paused { background: #fef9c3; color: #a16207; border-color: #fde68a; }
.cd-status-chip--deactivated { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* ── Client Drill-down: header btn (shared) ──────────────────── */
.client-drill-header-btn {
  padding: 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.client-drill-header-btn:hover { background: var(--bg); }

/* ── Client Drill-down: three-dot dropdown ───────────────────── */
.cd-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 900;
  overflow: hidden;
}
.cd-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}
.cd-dropdown-item:hover { background: var(--bg); }
.cd-dropdown-item--danger { color: #dc2626; }
.cd-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Client Drill-down: inline confirmation modals ───────────── */
.cd-inline-modal {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 800;
  border-radius: inherit;
}
.cd-inline-modal-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 28px 24px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cd-inline-modal-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.cd-inline-modal-body  { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.55; }
.cd-inline-modal-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.cd-inline-modal-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
}
.cd-inline-modal-actions { display: flex; gap: 10px; }

/* ── Login Screen ────────────────────────────────────────────── */
.login-screen {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
  overflow-y: auto;
}

/* ── Landing view ─────────────────────────────────────────────── */
.landing-view {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: auto;
  padding: 16px 0 32px;
}

.landing-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.landing-logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,180,156,.25);
}

.landing-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.5px;
}

.landing-tagline {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.5;
}

.landing-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 18px;
}

.landing-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.landing-feature-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.landing-feature-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.landing-feature-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.landing-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.landing-cta {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
}

.landing-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Google as the primary action: white surface, crisp border, strong shadow
   so the multi-color G stays legible while still reading as the main CTA. */
.landing-google-primary,
.landing-google-primary:hover {
  background: #fff;
  color: #1f1f1f;
  border: 1.5px solid #dadce0;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.landing-google-primary:hover { background: #f7f8f8; border-color: #c9ccd0; }
.landing-google-primary:active { background: #eef0f1; }

/* Sign in with Apple — Apple's own button rules: solid black, white logo,
   no smaller than the other sign-in buttons. Stays black in dark mode too
   (Apple allows white there, but black on our dark ground keeps its border
   so it still reads as a button). */
.landing-apple-btn,
.landing-apple-btn:hover {
  background: #000;
  color: #fff;
  border: 1.5px solid #000;
  font-weight: 700;
}
.landing-apple-btn:hover { background: #1a1a1a; }
:root[data-theme="dark"] .landing-apple-btn { border-color: #3a3a3a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing-apple-btn { border-color: #3a3a3a; }
}
.landing-apple-btn + .landing-google-btn { margin-top: 10px; }

/* Extra-large Google button for older users — bigger tap target + text. */
.landing-google-big {
  padding: 20px 16px;
  font-size: 19px;
  font-weight: 800;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.landing-nopass-note {
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
  font-weight: 600;
}

/* "Easiest way to sign in" label + per-button hints (older-user guidance) */
.signin-best-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--brand); text-align: center;
  margin: 0 0 8px;
}
.signin-best-hint {
  font-size: 12.5px; color: var(--text-muted); text-align: center;
  margin: 6px 0 0;
}

/* Passwordless email-code login — big, simple inputs for older users */
.code-label {
  display: block; font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 8px;
}
.code-big-input {
  width: 100%; padding: 16px 16px; font-size: 18px;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text);
}
.code-big-input:focus { outline: none; border-color: var(--brand); }
.code-digits {
  text-align: center; font-size: 30px; font-weight: 800;
  letter-spacing: 10px; padding: 14px;
}
.code-sent-note {
  font-size: 14px; color: var(--text-muted); line-height: 1.5;
  margin-bottom: 18px; text-align: center;
}

.landing-trial-note {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: -2px;
}

.landing-signin-link {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Sign-in card ─────────────────────────────────────────────── */
/* ── Sign-in view (matches landing page style) ────────────────── */
.signin-view {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: auto;
  padding: 16px 0 32px;
}

.signin-back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
  align-self: flex-start;
}

.signin-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.signin-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signin-field input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  padding: 14px 16px;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
}
.signin-field input:focus { border-color: var(--brand); }

.signin-field-pw { position: relative; }
.signin-field-pw input { padding-right: 48px; }

.pw-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pw-toggle:hover { color: var(--text); }

/* Onboarding password field has a label above — offset eye button below label */
.onb-pw-toggle {
  top: auto;
  bottom: 12px;
  transform: none;
}

.login-error {
  background: rgba(239,68,68,.12);
  color: #ef4444;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  text-align: left;
}

.signin-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.signin-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--text-muted);
  font-size: 12px;
}
.signin-divider::before,
.signin-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Coach Note Card ─────────────────────────────────────────── */
/* Ben, 10/7: "under today is rex, water, message, habits can we clean all
   that up too look better and even more fun not just line itemed" — moved
   off hardcoded hex-with-alpha (#00b49c18/44) onto the real --brand-light/
   --brand-mid tokens other gradient cards (Rex, just above) now use, so
   this actually adapts in dark mode instead of always drawing the same
   literal teal tint regardless of theme. Bigger avatar and a soft shadow
   for a bit more presence — a message from the coach reads as a message,
   not another flat status row. */
.coach-note-card {
  background: linear-gradient(135deg, var(--brand-light), var(--surface) 75%);
  border: 1px solid var(--brand-mid);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 12px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}
.coach-note-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.coach-note-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.coach-note-from {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.coach-note-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
/* Ben, 9/6. When the note was written — quiet, under the message itself. */
.coach-note-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Add a client by hand (Ben, 9/10) ──────────────────────────
   Reuses .tr-ex-overlay / .tr-ex-card so it matches every other coach modal;
   only the form layout below is new. */
.ac-body {
  padding: 4px 20px 8px;
  overflow-y: auto;
  max-height: min(62vh, 560px);
}
.ac-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ac-req {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-on-light);
  background: var(--brand-light);
  border-radius: 20px;
  padding: 1px 6px;
  margin-left: 6px;
}
.ac-hint {
  margin: 5px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.ac-height {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ac-height input { width: 100%; min-width: 0; }
.ac-unit {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  flex: none;
}
.ac-error {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--red-bg);
  border: 1px solid #e74c3c33;
  color: var(--red);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}
/* Result state — replaces the form once the account exists. */
.ac-done {
  padding: 22px 24px 10px;
  text-align: center;
}
.ac-done-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 46px;
}
.ac-done-title {
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
}
.ac-done-sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.ac-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ac-link-row input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 9px 10px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ac-link-note {
  margin: 9px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
@media (max-width: 560px) {
  .ac-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── View banner (Ben, 9/9) ────────────────────────────────────
   "my day, log it, quick, supplements is shown in the title bar i dont like it
    there it feels crammed move it down as a banner that fits better across the
    page under the title menu, also francos nutrition helper isnt readable"

   The view title used to be an h2 inside .app-header, sharing one row with the
   logo, the brand text, the avatar and three buttons — capped at max-width:38vw
   so on a phone the brand was squeezed to a sliver. Its own full-width strip
   below the header gives both names their room. */
.view-banner {
  /* Deliberately NOT sticky. .app-header is already `sticky; top:0; z-index:100`,
     so a banner at top:0 with a lower z-index slides underneath it on scroll and
     vanishes. Pinning it would mean hard-coding the header's height in two
     places and keeping them in sync across three media queries — the kind of
     coupling that silently breaks later. It scrolls away with the content. */
  position: relative;
  z-index: 1;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 9px var(--gutter);
}
.view-banner-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-on-light);
  /* Long names ("Sport & Training") must not wrap the strip onto two lines. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Chat button with the coach's face (Ben, 9/9) ──────────────
   Replaces the outline speech bubble. His photo is the reason they signed up;
   a generic glyph told them nothing about who was on the other end. */
.client-floating-chat-btn { padding: 0; overflow: visible; }
.cfc-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
}
.cfc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cfc-initial {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
/* The small bubble keeps the button legible as "chat" even behind a face. */
.cfc-glyph {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.cfc-glyph svg { width: 11px; height: 11px; display: block; }

/* ── Coach activation card (Ben, 9/9) ──────────────────────────
   Who has never logged a meal. Red-tinted because on this screen it outranks
   compliance: a client who never started is a different problem from one
   eating too little protein. */
.tract-card {
  background: var(--red-bg);
  border: 1px solid #e74c3c33;
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.tract-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.tract-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.tract-count {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--red);
  border-radius: 20px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.tract-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 8px;
}
.tract-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid #e74c3c22;
}
.tract-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tract-open {
  flex: none;
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

/* ── First-run card (Ben, 9/9) ─────────────────────────────────
   Day one, before any meal exists. Borrows .coach-note-card wholesale so it
   reads as a message from Franco rather than an app tooltip — his clients
   signed up for him. Only the two buttons are new. */
.firstrun-card {
  gap: 10px;
}
.firstrun-cta {
  width: 100%;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 13px;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.firstrun-cta:active { background: var(--brand-dark); }
.firstrun-skip {
  width: 100%;
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 2px 0 0;
  cursor: pointer;
}

/* ── Daily Brief Banner (Phase 2) ──────────────────────────── */
.brief-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 16px 4px;
  padding: 11px 14px;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border, #e8eceb);
  background: var(--surface, #fff);
  font-size: 14px;
}
.brief-banner.green {
  background: var(--green-bg, #eafaf1);
  border-color: var(--green, #27ae60);
}
.brief-banner.yellow {
  background: var(--yellow-bg, #fef9ec);
  border-color: var(--yellow, #f39c12);
}
.brief-banner.red {
  background: var(--red-bg, #fdf0ef);
  border-color: var(--red, #e74c3c);
}
.brief-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim, #b0bbb9);
}
.brief-banner.green .brief-banner-dot { background: var(--green, #27ae60); }
.brief-banner.yellow .brief-banner-dot { background: var(--yellow, #f39c12); }
.brief-banner.red .brief-banner-dot { background: var(--red, #e74c3c); }
.brief-banner-headline {
  flex: 1;
  font-weight: 600;
  color: var(--text, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brief-banner-action {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 20px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: var(--brand, #00b49c);
  color: #fff;
}
.brief-banner.yellow .brief-banner-action { background: var(--yellow, #f39c12); }
.brief-banner.red .brief-banner-action { background: var(--red, #e74c3c); }
.brief-banner-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted, #6b7c7a);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}

/* ── Calorie Adjustment Overlay ──────────────────────────── */
.cal-adjust-overlay {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 4px 0 2px;
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
  cursor: pointer;
}
.cal-adjust-overlay:active { transform: scale(0.97); }

/* ── Brief Detail Sheet body ──────────────────────────────── */
.brief-detail-body {
  padding: 12px 20px 24px;
}
.brief-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.brief-detail-color-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.brief-detail-color-dot.green { background: var(--green, #27ae60); }
.brief-detail-color-dot.yellow { background: var(--yellow, #f39c12); }
.brief-detail-color-dot.red { background: var(--red, #e74c3c); }
.brief-detail-color-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--text);
}
.brief-detail-stale-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
  margin-top: 2px;
}
.brief-detail-section {
  margin-bottom: 20px;
}
.brief-detail-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.brief-detail-section-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

/* ── Supplement Gap Badge (Phase 2, Plan 03) ──────────────── */
/* Small accent dot positioned at top-right of the Supps tab icon area */
.tab-flag-dot {
  /* Anchored to the button, top-right of the centered icon — no negative-margin
     flow hacks (those drifted out of line in the desktop sidebar layout). */
  position: absolute;
  top: 7px;
  left: 50%;
  margin-left: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red, #e74c3c);
  pointer-events: none;
}

/* ── Meal Detail Sheet ─────────────────────────────────────── */
.mds-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 300;
  animation: fadeInBackdrop 0.2s ease;
}
.mds-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  z-index: 301;
  max-height: 92dvh;
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 0 0 40px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.mds-sheet.open { transform: translateY(0); }
.mds-handle {
  width: 36px; height: 4px;
  background: var(--border); border-radius: 2px;
  margin: 12px auto 0; flex-shrink: 0;
}
.mds-photo-wrap img {
  width: 100%; max-height: 240px; object-fit: cover;
  display: block;
}
/* With a photo: image fills the top of the sheet with matching rounded corners,
   and the drag handle floats OVER the image so there's no white band above it. */
.mds-sheet.has-photo .mds-handle {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.mds-sheet.has-photo .mds-photo-wrap {
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}
.mds-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.mds-name-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
.mds-meal-name {
  font-size: 22px; font-weight: 800; color: var(--text);
  flex: 1;
}
.mds-edit-pencil-btn {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 7px; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.mds-edit-pencil-btn:active { background: var(--border); color: var(--accent); }
.mds-meal-time { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.mds-meal-cals { font-size: 32px; font-weight: 900; color: var(--text); line-height: 1; }
.mds-cals-label { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.mds-meal-macros {
  display: flex; gap: 12px; margin-top: 8px; cursor: pointer;
  flex-wrap: wrap; row-gap: 8px;
}
.mds-meal-macros:active { opacity: 0.75; }
/* Second pill row: fiber / sugar / sodium — smaller, same look */
.mds-macro-row-break { flex-basis: 100%; height: 0; }
.mds-macro-pill-sub { padding: 6px 10px; }
.mds-macro-pill-sub .mds-macro-pill-val { font-size: 13px; }
/* Meal card micro line under the main macros */
.meal-card-micros { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1px; }
.mcm-sub { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.mds-macro-pill {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; flex: 1; align-items: center;
}
.mds-macro-pill-val { font-size: 16px; font-weight: 800; color: var(--text); }
.mds-macro-pill-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.mds-section { padding: 14px 18px 0; }
.mds-section-title {
  font-size: 18px; font-weight: 800; color: var(--text);
  margin-bottom: 10px;
}
.mds-ingredient-row {
  display: flex; align-items: center;
  padding: 13px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s;
  gap: 10px;
}
.mds-ingredient-row:active { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.mds-ing-name { font-size: 15px; font-weight: 600; color: var(--text); flex: 1; }
.mds-ing-dot { color: var(--text-dim); }
.mds-ing-cal { font-size: 14px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.mds-ing-serving {
  font-size: 13px; color: var(--text-dim); font-weight: 500;
  white-space: nowrap; margin-left: auto;
}
.mds-ing-chevron { color: var(--text-dim); flex-shrink: 0; }
.mds-no-items { font-size: 13px; color: var(--text-dim); text-align: center; padding: 20px 0; line-height: 1.6; }

/* Add missed item button */
.mds-add-item-btn {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: 1.5px dashed var(--border);
  border-radius: 10px; color: var(--brand); font-size: 14px; font-weight: 700;
  padding: 10px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.mds-add-item-btn:hover { background: var(--brand-faint); border-color: var(--brand); }

/* Edit totals inline section */
.mds-edit-totals-row {
  display: flex; gap: 8px; padding: 4px 0 10px;
}
.mds-save-totals-btn {
  width: 100%; background: var(--brand); color: #fff;
  border: none; border-radius: 10px; font-size: 14px; font-weight: 700;
  padding: 11px; cursor: pointer; transition: opacity 0.15s;
}
.mds-save-totals-btn:hover { opacity: 0.85; }

/* Add item sub-view */
.mds-add-form { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.mds-add-input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border);
  border-radius: 10px; font-size: 15px; background: var(--surface-raised);
  color: var(--text); box-sizing: border-box;
}
.mds-add-input:focus { outline: none; border-color: var(--brand); }
.mds-add-macros-row { display: flex; gap: 8px; }
.mds-add-lookup-btn {
  width: 100%; background: none; border: 1.5px solid var(--brand);
  border-radius: 10px; color: var(--brand); font-size: 14px; font-weight: 700;
  padding: 11px; cursor: pointer; transition: background 0.15s;
}
.mds-add-lookup-btn:hover { background: var(--brand-faint); }
.mds-add-lookup-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mds-delete-btn {
  margin: 20px 18px 8px; width: calc(100% - 36px);
  background: none; border: 1.5px solid #cc3333; color: #cc3333;
  border-radius: 12px; font-size: 15px; font-weight: 700;
  padding: 13px; cursor: pointer; transition: background 0.15s;
}
.mds-delete-btn:hover { background: rgba(204,51,51,0.08); }
.mds-done-btn {
  margin: 0 18px; width: calc(100% - 36px);
  background: var(--text); color: var(--surface);
  border: none; border-radius: 14px; font-size: 16px; font-weight: 800;
  padding: 15px; cursor: pointer; transition: opacity 0.15s;
}
.mds-done-btn:hover { opacity: 0.85; }

/* Ingredient edit sub-view */
.mds-edit-topbar {
  display: flex; align-items: center;
  padding: 14px 16px 0; gap: 8px;
}
.mds-back-btn {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); flex-shrink: 0;
}
.mds-edit-title { flex: 1; text-align: center; font-size: 16px; font-weight: 700; color: var(--text); }
.mds-edit-remove-btn {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #cc3333; flex-shrink: 0;
}
.mds-edit-name {
  font-size: 28px; font-weight: 900; color: var(--text);
  padding: 18px 18px 6px;
}
.mds-edit-section-label {
  font-size: 14px; font-weight: 700; color: var(--text);
  padding: 10px 18px 8px;
}
.mds-unit-pills {
  display: flex; gap: 8px;
  padding: 0 18px 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mds-unit-pills::-webkit-scrollbar { display: none; }
.mds-unit-pill {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 22px; padding: 9px 18px;
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mds-unit-pill.active {
  background: var(--text); border-color: var(--text); color: var(--surface);
}
.mds-servings-row {
  display: flex; align-items: center;
  padding: 8px 18px 16px; gap: 12px;
}
.mds-servings-label { font-size: 15px; font-weight: 700; color: var(--text); flex: 1; }
.mds-servings-control {
  display: flex; align-items: center; gap: 0;
  border: 1.5px solid var(--border); border-radius: 12px;
  overflow: hidden; background: var(--bg);
}
.mds-serv-btn {
  background: none; border: none; color: var(--text);
  font-size: 20px; font-weight: 700; cursor: pointer;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
}
.mds-serv-input {
  width: 54px; text-align: center; font-size: 17px; font-weight: 800;
  color: var(--text); background: none; border: none;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  -moz-appearance: textfield;
}
.mds-serv-input::-webkit-inner-spin-button,
.mds-serv-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.mds-live-cals {
  margin: 4px 18px 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px;
  display: flex; align-items: baseline; gap: 6px;
}
.mds-live-cal-num { font-size: 36px; font-weight: 900; color: var(--text); }
.mds-live-cal-label { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.mds-live-macros {
  display: flex; gap: 8px; margin: 10px 18px 20px;
}
.mds-live-macro-box {
  flex: 1; background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px; text-align: center;
}
.mds-live-macro-val { font-size: 17px; font-weight: 800; color: var(--text); }
.mds-live-macro-lbl { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }

/* ── Week Strip ────────────────────────────────────────────── */
.week-strip-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.week-strip {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 2px;
}
.week-nav-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.week-nav-btn:hover { background: var(--bg); color: var(--text); }
.week-nav-btn:disabled { opacity: 0.25; cursor: default; }
.wk-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 12px;
  cursor: pointer;
  flex: 1;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.wk-cell:hover { background: var(--bg); }
.wk-future { opacity: 0.3; cursor: default; pointer-events: none; }
.wk-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.wk-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.wk-today .wk-num {
  border: 2.5px solid var(--accent);
  color: var(--accent);
}
/* Color-coded circles */
.wk-green .wk-num  { border: 2.5px solid #34c759; color: #34c759; }
.wk-yellow .wk-num { border: 2.5px solid #ff9f0a; color: #ff9f0a; }
.wk-red .wk-num    { border: 2.5px solid #ff3b30; color: #ff3b30; }
/* Selected always wins — solid fill, no border */
.wk-selected .wk-num {
  background: var(--text);
  color: var(--surface) !important;
  border: none !important;
}
.wk-selected .wk-name { color: var(--text); }

/* Past day banner */
.past-day-banner {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 16px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-bottom: 1px solid var(--border);
}
.past-day-banner button {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ── Log splash — full-screen "it saved" confirmation ─────── */
.log-splash {
  position: fixed; inset: 0; z-index: 9600; /* above the morning check-in sheet */
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 24px;
  overflow: hidden;
  animation: splashIn 0.18s ease-out;
}
.log-splash.leave { opacity: 0; transition: opacity 0.4s ease; }
@keyframes splashIn { from { opacity: 0; } to { opacity: 1; } }

.log-splash-badge {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 10px 32px color-mix(in srgb, var(--brand) 45%, transparent);
  animation: splashPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.log-splash-badge svg { width: 56px; height: 56px; }
.log-splash-circle { stroke: rgba(255, 255, 255, 0.35); stroke-width: 2.5; }
.log-splash-check {
  stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: splashCheck 0.4s ease-out 0.15s forwards;
}
@keyframes splashPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes splashCheck { to { stroke-dashoffset: 0; } }

.log-splash-title { font-size: 32px; font-weight: 900; color: var(--text); letter-spacing: -0.5px; }
.log-splash-food  { font-size: 16px; font-weight: 700; color: var(--text); max-width: 320px; }
.log-splash-cals  { font-size: 14px; font-weight: 600; color: var(--text-muted); }

.log-splash-confetti {
  position: absolute; top: 40%;
  border-radius: 2px; opacity: 0;
  animation: splashConfetti 1.1s ease-out forwards;
}
@keyframes splashConfetti {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift), -130px) rotate(260deg); }
}

@media (prefers-reduced-motion: reduce) {
  .log-splash, .log-splash-badge { animation: none; }
  .log-splash-check { animation: none; stroke-dashoffset: 0; }
  .log-splash-confetti { display: none; }
}

/* "Add food to this day" — shown on My Day when viewing a past day */
.add-past-food-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 12px auto 4px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 800;
  padding: 15px 20px;
  cursor: pointer;
  letter-spacing: 0.1px;
  transition: background 0.15s, transform 0.1s;
}
.add-past-food-btn:hover { background: var(--brand-dark); }
.add-past-food-btn:active { transform: scale(0.98); }

/* ── Onboarding health targets step ───────────────────────── */
.gob-health-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}
.gob-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  gap: 12px;
}
.gob-health-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gob-health-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.gob-health-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.gob-health-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
}
.gob-health-input {
  width: 56px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  background: none;
  border: none;
  -moz-appearance: textfield;
}
.gob-health-input::-webkit-inner-spin-button,
.gob-health-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.gob-health-input:focus { outline: none; }
.gob-health-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ── Go-to food cards ──────────────────────────────────────── */
.quick-goto-body { cursor: pointer; }
.quick-goto-log-btn {
  background: var(--accent);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.1s;
}
.quick-goto-log-btn:active { opacity: 0.8; transform: scale(0.92); }

/* ── Info (ⓘ) buttons ───────────────────────────────────────── */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1;
}
.info-btn:hover, .info-btn:active {
  border-color: var(--brand);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.info-btn-float {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.camera-hero { position: relative; }

/* ── Info popover ────────────────────────────────────────────── */
.info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 900;
}
.info-popover {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 901;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 36px;
  max-width: 540px;
  margin: 0 auto;
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.info-popover.info-popover-visible { transform: translateY(0); }
.info-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.info-popover-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.info-popover-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
}
.info-popover-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 14px;
}
.info-popover-protip {
  font-size: 12px;
  line-height: 1.5;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ── First-visit tip card ────────────────────────────────────── */
.tip-card {
  position: fixed;
  bottom: 68px;
  left: 12px;
  right: 12px;
  max-width: 520px;
  margin: 0 auto;
  z-index: 800;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.22s ease;
  pointer-events: none;
}
.tip-card.tip-card-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.tip-card-inner {
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.tip-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.tip-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brand);
}
.tip-card-close {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.tip-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.tip-card-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.tip-card-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.tip-card-btn:active { opacity: 0.8; }

/* ══════════════════════════════════════════════════════════════
   EAT OUT FEATURE  — v2 (selectable swaps + live summary)
   Remove this entire block + eat-out.js + HTML tab to delete
   ══════════════════════════════════════════════════════════════ */

/* Hero / input area */
.eo-hero {
  padding: 20px 16px 12px;
}
.eo-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.eo-tagline {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand);
  margin: 0 0 10px;
  line-height: 1.2;
}
.eo-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 20px;
}
.eo-camera-btn {
  width: 100%;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.15s;
}
.eo-camera-btn:active { opacity: 0.82; }
.eo-camera-icon {
  width: 22px; height: 22px; flex-shrink: 0;
}
.eo-preview {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-top: 14px;
  display: block;
}
.eo-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.eo-or::before,
.eo-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.eo-text-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-family: var(--font);
  padding: 12px 14px;
  resize: none;
  outline: none;
  line-height: 1.45;
  transition: border-color 0.15s;
}
.eo-text-input:focus { border-color: var(--brand); }
.eo-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.eo-clear-btn {
  flex: 0 0 auto;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 18px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.eo-clear-btn:active { opacity: 0.7; }
.eo-analyze-btn {
  flex: 1;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.eo-analyze-btn:disabled { opacity: 0.5; cursor: default; }
.eo-analyze-btn:not(:disabled):active { opacity: 0.82; }

/* Loading */
.eo-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.eo-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--brand-mid);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: eoSpin 0.75s linear infinite;
}
@keyframes eoSpin { to { transform: rotate(360deg); } }

/* Error */
.eo-error {
  margin: 0 16px;
  padding: 12px 14px;
  background: var(--red-bg);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 13px;
  line-height: 1.45;
}

/* Results container */
.eo-results {
  padding: 16px 16px 100px;
}

/* Dish header */
.eo-dish-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.eo-photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.eo-dish-info { flex: 1; }
.eo-dish-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1.3;
}
.eo-restaurant {
  font-size: 12px;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.eo-dish-summary {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* As-ordered macros */
.eo-asis-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.eo-macros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.eo-macro {
  flex: 1;
  min-width: 60px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eo-macro-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.eo-macro-lbl {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Swaps — selectable cards */
.eo-section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.eo-swaps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.eo-swap {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.eo-swap:active { opacity: 0.85; }
.eo-swap-selected {
  border-color: var(--brand);
  background: var(--brand-light);
}
.eo-swap-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.eo-swap-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.eo-swap-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.eo-swap-delta {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}
.eo-swap-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border-dark);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: transparent;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.eo-swap-selected .eo-swap-check {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.eo-swap-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--brand-dark);
  background: var(--brand-mid);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 6px;
}
.eo-swap-why {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 4px;
}
.eo-swap-enjoy {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
  font-style: italic;
}

/* How to order tip */
.eo-order-tip {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--brand-mid);
}
.eo-order-tip strong { color: var(--text); }

/* Live macro summary */
.eo-live-summary {
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.eo-live-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.eo-live-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}
.eo-live-saved {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
}
.eo-live-saved-pos {
  opacity: 1;
  color: #a8f5e8;
}
.eo-live-macros {
  display: flex;
  gap: 0;
}
.eo-live-macro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.eo-live-macro + .eo-live-macro {
  border-left: 1px solid rgba(255,255,255,0.2);
}
.eo-live-val {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.eo-live-lbl {
  font-size: 10px;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Coach note */
.eo-coach-note {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 20px;
  padding: 14px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--brand);
}

/* Log + Try again row */
.eo-log-row {
  display: flex;
  gap: 10px;
}
.eo-log-btn {
  flex: 1;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 20px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.eo-log-btn:disabled { opacity: 0.5; cursor: default; }
.eo-log-btn:not(:disabled):active { opacity: 0.82; }
.eo-again-btn {
  flex: 0 0 auto;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.eo-again-btn:active { opacity: 0.7; }

/* ── END EAT OUT FEATURE ── */

/* ══════════════════════════════════════════════════════════════
   COACH MODE FEATURE
   To remove: delete trainer.js + this CSS block
              + trainerTabBtn, tab-trainer, trainerPinModal in index.html
   ══════════════════════════════════════════════════════════════ */

/* ── PIN Modal ───────────────────────────────────────────────── */
.tr-pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-pin-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.tr-pin-card {
  position: relative;
  background: var(--surface);
  border-radius: 20px;
  padding: 36px 28px 28px;
  width: min(340px, calc(100vw - 40px));
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.tr-pin-lock-icon {
  width: 52px;
  height: 52px;
  background: var(--brand-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--brand);
}
.tr-pin-lock-icon svg { width: 24px; height: 24px; }
.tr-pin-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}
.tr-pin-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.tr-pin-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-align: center;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.tr-pin-input:focus { border-color: var(--brand); }
.tr-pin-error {
  font-size: 0.8rem;
  color: var(--red);
  margin: 8px 0 0;
}
.tr-pin-btns {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.tr-pin-cancel {
  flex: 1;
  padding: 13px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.tr-pin-cancel:active { opacity: 0.7; }
.tr-pin-submit {
  flex: 2;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.tr-pin-submit:active { opacity: 0.85; }
.tr-pin-submit:disabled { opacity: 0.5; cursor: default; }

/* ── Coach Panel ─────────────────────────────────────────────── */
.tr-panel {
  padding: 20px 16px 40px;
  max-width: 600px;
  margin: 0 auto;
}
.tr-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.tr-panel-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 3px;
}
.tr-panel-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}
.tr-lock-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tr-lock-btn:active { opacity: 0.7; }

/* ── Placeholder ─────────────────────────────────────────────── */
.tr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.tr-placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.tr-placeholder-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.tr-placeholder-sub {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}

/* ── Exercise Library ────────────────────────────────────────── */
.tr-library { padding-top: 4px; }

.tr-lib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tr-lib-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.tr-add-btn {
  padding: 8px 16px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.tr-add-btn:active { opacity: 0.85; }
.tr-ai-build-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--brand-light);
  color: var(--brand-dark);
  border: 1.5px solid var(--brand);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tr-ai-build-btn:hover {
  background: var(--brand);
  color: #fff;
}

.tr-search-wrap {
  position: relative;
  margin-bottom: 12px;
}
.tr-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  pointer-events: none;
}
.tr-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px 10px 36px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
}
.tr-search:focus { border-color: var(--brand); }

.tr-cat-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.tr-cat-scroll::-webkit-scrollbar { display: none; }
.tr-cat-chips {
  display: flex;
  gap: 7px;
  padding-bottom: 4px;
  width: max-content;
}
.tr-cat-chip {
  padding: 6px 13px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tr-cat-chip.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.tr-exercise-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 600px) {
  .tr-exercise-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .tr-exercise-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tr-lib-loading, .tr-lib-empty, .tr-lib-error {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
  padding: 32px 0;
  grid-column: 1 / -1;
}
.tr-lib-error { color: var(--red); }

/* Premium visual thumbnail cards */
.tr-ex-thumb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  cursor: pointer;
}
.tr-ex-thumb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: var(--border-dark);
}
.tr-ex-thumb-wrap {
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  position: relative;
  background: #1a1a1a;
  flex-shrink: 0;
  overflow: hidden;
}
.tr-ex-thumb-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.tr-ex-thumb-card:hover .tr-ex-thumb-img {
  transform: scale(1.04);
}
.tr-ex-thumb-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3c4443;
  color: #fff;
}
.tr-ex-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.tr-ex-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 180, 156, 0.85); /* brand translucent */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: transform 0.2s, background-color 0.2s;
  backdrop-filter: blur(2px);
}
.tr-ex-thumb-card:hover .tr-ex-play-btn {
  transform: scale(1.1);
  background: var(--brand);
}
.tr-ex-play-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  margin-left: 2px; /* optical centering */
}
.tr-ex-thumb-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.tr-ex-thumb-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.tr-ex-thumb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: auto;
}
.tr-ex-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.tr-ex-badge--cat {
  background: var(--brand-light);
  color: var(--brand-dark);
}
.tr-ex-badge--type {
  background: var(--sport-light);
  color: var(--sport);
}
.tr-ex-badge--diff {
  background: var(--bg);
  color: var(--text-muted);
}
/* Ben, 9/10: this was a dead <span> — a card whose video is dead looks exactly
   like a card with no video, and there was nothing to tap. It is a button now,
   opening the same picker as "+ Video". */
.tr-ex-badge--broken {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}
.tr-ex-badge--broken:active { background: #fca5a5; }
.tr-alert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fee2e2;
  border: 1.5px solid #fca5a5;
  color: #b91c1c;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 0.88rem;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.05);
  animation: slideDownFade 0.3s ease;
}
.tr-alert-banner--info {
  background: var(--brand-light);
  border: 1.5px solid var(--brand-trans);
  color: var(--brand-dark);
  box-shadow: 0 4px 12px rgba(0, 180, 156, 0.05);
}
.tr-alert-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tr-alert-btn {
  background: #b91c1c;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.tr-alert-btn:hover {
  background: #991b1b;
}
.tr-alert-btn:active {
  transform: scale(0.97);
}
.tr-alert-btn--info {
  background: var(--brand);
}
.tr-alert-btn--info:hover {
  background: var(--brand-dark);
}
@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tr-client-ai-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--brand-light);
  border: 1px solid var(--brand-trans);
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.tr-client-ai-btn:hover {
  background: var(--brand-trans);
  transform: translateY(-0.5px);
}
.tr-client-ai-btn:active {
  transform: translateY(0) scale(0.97);
}

/* ── Client drill — Delete button ──────────────────────────── */
.client-drill-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.08);
  color: #ef4444;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.client-drill-delete-btn:hover  { background: rgba(239,68,68,0.15); }
.client-drill-delete-btn:active { transform: scale(0.93); }
.client-drill-delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Client drill — Profile card ───────────────────────────── */
.client-drill-profile { margin-top: 12px; }

.cdp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.cdp-section {
  padding: 10px 14px 12px;
}
.cdp-section + .cdp-section {
  border-top: 1px solid var(--border);
}
.cdp-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.cdp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}
.cdp-label {
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.cdp-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
}
.tr-ai-client-context {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-light);
  border: 1.5px solid var(--brand-trans);
  color: var(--brand-dark);
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 4px;
  animation: slideDownFade 0.2s ease;
}
.tr-ex-thumb-edit-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  transition: transform 0.15s, background-color 0.15s;
}
.tr-ex-thumb-edit-btn:hover {
  transform: scale(1.05);
  background: #ffffff;
}
.tr-ex-thumb-edit-btn svg {
  width: 14px;
  height: 14px;
}

/* ── Add / Edit Modal ────────────────────────────────────────── */
.tr-ex-overlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 480px) {
  .tr-ex-overlay { align-items: center; }
}
.tr-ex-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
.tr-ex-card {
  position: relative;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 480px) {
  .tr-ex-card {
    border-radius: 20px;
    max-height: 88dvh;
  }
}
@media (min-width: 768px) {
  .tr-ex-card {
    max-width: 860px;
    width: 90%;
  }
}
.tr-ex-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.tr-ex-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.tr-ex-card-close {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--bg);
  color: var(--text-muted);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Two-column responsive layout */
.tr-ex-card-body-wrapper {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
}
.tr-ex-media-column, .tr-ex-form-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tr-ex-media-column {
  padding: 16px 20px 8px;
}
.tr-ex-form-column {
  padding: 8px 20px 20px;
}
@media (min-width: 768px) {
  .tr-ex-card-body-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 20px;
  }
  .tr-ex-media-column {
    padding: 0;
  }
  .tr-ex-form-column {
    padding: 0;
  }
}

.tr-ex-row {
  display: flex;
  gap: 12px;
}
.tr-ex-row .tr-ex-field { flex: 1; }
.tr-ex-field { display: flex; flex-direction: column; gap: 5px; }
.tr-ex-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.tr-ex-input {
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  font-family: inherit;
}
.tr-ex-input:focus { border-color: var(--brand); }
select.tr-ex-input { cursor: pointer; }
.tr-ex-textarea { resize: vertical; min-height: 72px; }
.tr-ex-hint {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 0;
}
.tr-ex-error {
  font-size: 0.8rem;
  color: var(--red);
  background: rgba(239,68,68,0.08);
  border-radius: 8px;
  padding: 8px 12px;
}
.tr-ex-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.tr-ex-delete {
  margin-right: auto;
  padding: 11px 16px;
  border: 1.5px solid var(--red);
  border-radius: 10px;
  background: transparent;
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.tr-ex-delete:active { opacity: 0.7; }
.tr-ex-delete:disabled { opacity: 0.4; cursor: default; }
.tr-ex-cancel {
  padding: 11px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.tr-ex-cancel:active { opacity: 0.7; }
.tr-ex-save {
  flex: 1;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.tr-ex-save:active { opacity: 0.85; }
.tr-ex-save:disabled { opacity: 0.5; cursor: default; }

/* Video Source Toggle */
.tr-video-source-toggle {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.tr-source-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tr-source-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* YouTube Autocomplete Results */
.tr-yt-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tr-yt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid var(--border);
}
.tr-yt-item:last-child {
  border-bottom: none;
}
.tr-yt-item:hover {
  background: var(--bg);
}
.tr-yt-thumb {
  width: 56px;
  height: 31.5px;
  border-radius: 4px;
  object-fit: cover;
  background: #333;
}
.tr-yt-info {
  flex: 1;
  min-width: 0;
}
.tr-yt-title {
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-yt-channel {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Video Drag-and-Drop Zone */
.tr-dropzone {
  border: 2px dashed var(--border-dark);
  border-radius: 12px;
  background: var(--bg);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.tr-dropzone:hover, .tr-dropzone.hovering {
  border-color: var(--brand);
  background-color: var(--brand-light);
}
.tr-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Video Preview Zone */
.tr-ex-video-preview {
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  position: relative;
  background: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.tr-ex-video-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.tr-ex-video-preview video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* YouTube: a real thumbnail link, never an embedded iframe (see
   trainer-exercises.js — embedding crashed the console before). */
.tr-ex-video-yt-link {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.tr-ex-video-yt-link img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tr-ex-video-yt-play {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 22px; line-height: 1; padding-left: 3px;
}
.tr-ex-video-yt-label {
  position: absolute; z-index: 1; bottom: 10px; left: 0; right: 0;
  text-align: center; color: #fff; font-size: 0.8rem; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* ── Exercise View Lightbox Modal ────────────────────────────── */
.tr-ex-lightbox-overlay {
  position: fixed;
  inset: 0;
  /* Highest z-index in the app (next is 2150) — this lightbox is meant to
     open ON TOP of whatever coach panel triggered it, including the workout
     editor (z-index 2050). At 1700 it rendered correctly but sat BEHIND that
     editor's opaque background, so nothing visibly happened when a coach
     clicked play on a card inside a built workout. */
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-ex-lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}
.tr-ex-lightbox-card {
  position: relative;
  background: var(--surface);
  border-radius: 20px;
  width: 90%;
  max-width: 680px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: trExFadeInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes trExFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tr-ex-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.2s;
}
.tr-ex-lightbox-close:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.05);
}
.tr-ex-lightbox-video {
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  position: relative;
  background: #000;
  flex-shrink: 0;
}
.tr-ex-lightbox-video iframe,
.tr-ex-lightbox-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.tr-ex-lightbox-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tr-ex-lightbox-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.tr-ex-lightbox-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -6px;
}
.tr-ex-lightbox-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tr-ex-lightbox-section h3 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.tr-ex-lightbox-section p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  white-space: pre-line;
}
.tr-ex-lightbox-edit-btn {
  margin-top: auto;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  text-align: center;
}
.tr-ex-lightbox-edit-btn:hover {
  background: var(--border);
  color: var(--text);
}
.tr-ex-lightbox-select-btn {
  margin-top: auto;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
  text-align: center;
  font-size: 0.95rem;
}
.tr-ex-lightbox-select-btn:hover {
  background: var(--brand-dark);
}
.tr-ex-lightbox-select-btn:active {
  transform: scale(0.98);
}
.tr-ex-lightbox-select-btn + .tr-ex-lightbox-edit-btn {
  margin-top: 8px !important;
}


/* ── Inner Tabs (Exercises / Programs) ──────────────────────── */
/* ── Quick-add review, before anything is saved ──────────────
   Ben, 8/23: the AI's reads "are not correct" often enough that saving first
   and offering Undo was the wrong shape — a mistake nobody noticed became a
   permanent library entry every client sees. */
.tr-qa-review {
  position: fixed; inset: 0; z-index: 9700;
  background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.tr-qa-review-card {
  background: var(--surface); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto;
  padding: 18px 18px calc(28px + env(safe-area-inset-bottom));
}
.tr-qa-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tr-qa-review-title { flex: 1; font-size: 17px; font-weight: 800; color: var(--text); }
.tr-qa-review-x {
  background: none; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--text-muted); padding: 0 2px;
}
.tr-qa-f {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.tr-qa-f input {
  font-size: 16px;   /* 16px+ or iOS zooms the page on focus */
  font-weight: 600; color: var(--text);
  padding: 11px 12px; border: 1px solid var(--border-dark); border-radius: 10px;
  background: var(--surface);
}
.tr-qa-f input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light);
}
.tr-qa-f-label { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.tr-qa-readonly {
  background: var(--bg); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
  font-size: 13px; color: var(--text); line-height: 1.7;
}
/* Playable inline — the coach cannot judge a clip they have to open elsewhere. */
.tr-qa-review-vid { margin-bottom: 12px; }
/* A loose match is flagged rather than presented with the same confidence as
   a strong one — the coach should know when YouTube had nothing good. */
.tr-qa-weak {
  background: #fef3e2; color: #a8563c; border: 1px solid #f3d5b5;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
  font-size: 12.5px; line-height: 1.45; font-weight: 600;
}
.tr-qa-vidtitle { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.tr-qa-review-vid iframe {
  width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: 10px; background: #000;
}
/* Ben, 9/10: "it doesnt pullup suggested you tube videos like the workout
   builder in the app i like the sugessted youtube videos." Opens the same
   12-result grid the builder uses, from inside the Quick add review sheet. */
.tr-qa-pickvid {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-light);
  color: var(--brand-on-light);
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.tr-qa-pickvid:active { background: var(--brand-mid); }

.tr-qa-drop {
  display: flex; align-items: center; gap: 8px; margin-top: 9px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.tr-qa-drop input { width: 17px; height: 17px; accent-color: var(--brand); }
.tr-qa-review-go { width: 100%; padding: 14px; font-size: 15px; font-weight: 800; margin-top: 4px; }
.tr-qa-review-cancel {
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13.5px; font-weight: 600; padding: 11px 0 2px;
}

/* Ben, 8/23: "the sections at the top are way to close".
   There are ELEVEN tabs here and they were `flex: 1`, so on a 390px phone each
   got ~30px — "principles" and "exercises" cannot fit in 30 pixels, so labels
   crushed together and truncated. Scroll horizontally instead of compressing:
   a tab you can read and reach beats eleven you can do neither with. */
.tr-inner-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  background: var(--bg);
  border-radius: 12px;
  padding: 5px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Momentum scroll snaps to a tab rather than stopping mid-label. */
  scroll-snap-type: x proximity;
}
.tr-inner-nav::-webkit-scrollbar { display: none; }
.tr-inner-tab {
  flex: 0 0 auto;          /* was flex:1 — the cause of the crush */
  white-space: nowrap;
  padding: 9px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background 0.15s, color 0.15s;
}
.tr-inner-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ── Programs Toolbar ────────────────────────────────────────── */
.tr-prog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}
.tr-prog-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.tr-prog-toolbar-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tr-prog-import-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tr-prog-import-btn:active { opacity: 0.7; }
.tr-prog-import-loading {
  font-size: 0.8rem;
  color: var(--brand);
}

/* ── Template Cards ──────────────────────────────────────────── */
.tr-prog-list { display: flex; flex-direction: column; gap: 10px; }
.tr-prog-empty { text-align: center; }

.tr-tmpl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tr-tmpl-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tr-tmpl-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.tr-tmpl-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.tr-tmpl-meta {
  font-size: 0.75rem;
  color: var(--brand);
  font-weight: 600;
}
.tr-tmpl-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.tr-tmpl-edit {
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.tr-tmpl-edit:active { background: var(--bg); }
/* Ben, 9/3: "after i create a clients workout or program i need the ability to
   edit and delete". Edit was on the card; delete existed but was reachable
   only from the editor footer, which starts hidden. This class was already
   written and never used by anything. */
.tr-tmpl-delete {
  padding: 6px 10px;
  border: 1.5px solid color-mix(in srgb, var(--red) 35%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
/* A destructive control needs a real target — at 6px padding this was ~27px
   against a 44px minimum, and a mis-tap here deletes a program. */
@media (pointer: coarse) {
  .tr-tmpl-delete, .tr-tmpl-edit, .tr-tmpl-start { min-height: 40px; }
}
.tr-tmpl-delete:active { opacity: 0.7; }

/* ── Template Editor Modal ───────────────────────────────────── */
.tr-prog-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.tr-prog-modal {
  background: var(--bg);
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 641px) {
  .tr-prog-overlay { align-items: center; background: rgba(0,0,0,0.4); }
  .tr-prog-modal { max-height: 92dvh; border-radius: 20px; }
}
.tr-prog-modal-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tr-prog-modal-back {
  width: 34px; height: 34px;
  border: none;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.tr-prog-modal-back:active { opacity: 0.7; }
.tr-prog-modal-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.tr-prog-save-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.tr-prog-save-btn:active   { opacity: 0.85; }
.tr-prog-save-btn:disabled { opacity: 0.5; cursor: default; }

.tr-prog-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tr-prog-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tr-prog-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  outline: none;
}
.tr-prog-name-input:focus { border-color: var(--brand); }
.tr-prog-desc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.88rem;
  outline: none;
}
.tr-prog-desc-input:focus { border-color: var(--brand); }

.tr-prog-days-wrap { display: flex; flex-direction: column; gap: 12px; }
.tr-prog-no-days {
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align: center;
  padding: 16px 0 8px;
}
.tr-prog-add-day {
  width: 100%;
  padding: 12px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--brand);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.tr-prog-add-day:active { background: var(--brand-light); }

/* Day blocks */
/* Day blocks in the template editor. Ben, 8/27: "the edit template needs to
   look like all the other exercise library cards" — these were tighter and
   flatter than .tr-ex-card, so the same content read as a different, cheaper
   surface. Radius, padding and header weight now match the library. */
.tr-day-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.tr-day-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.tr-day-name-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;              /* matches .tr-ex-card-title weight/scale */
  font-weight: 700;
  outline: none;
  min-width: 0;
}
.tr-day-name-input::placeholder { color: var(--text-dim); font-weight: 400; }
.tr-day-rm {
  width: 32px; height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tr-day-rm svg { width: 16px; height: 16px; }
.tr-day-rm:hover { background: var(--border); color: var(--text); }
.tr-day-rm:active { background: var(--border); color: var(--red); }

.tr-day-empty {
  font-size: 0.82rem;
  color: var(--text-dim);
  padding: 16px 16px 8px;
  margin: 0;
}
.tr-day-add-ex {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.tr-day-add-ex:active { background: var(--brand-light); }

/* Exercise rows inside a day */
.tr-day-ex {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  cursor: grab;
}
.tr-day-ex:active {
  cursor: grabbing;
}
.tr-day-ex:last-of-type { border-bottom: none; }

/* Drag and Drop Visual Cues */
.tr-day-ex.dragging {
  opacity: 0.35;
  border: 1.5px dashed var(--brand) !important;
  background: var(--bg);
}
.tr-day-ex.drag-over {
  border-top: 2px solid var(--brand);
  background: var(--brand-light);
}
.tr-day-exlist.drag-over {
  background: rgba(0, 180, 156, 0.05);
  border-radius: 8px;
}

.tr-day-ex-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tr-day-ex-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  pointer-events: none;
}
.tr-day-ex-thumb {
  width: 44px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  background: #1a1a1a;
  flex-shrink: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.tr-day-ex-thumb:hover {
  transform: scale(1.08);
}
.tr-day-ex-thumb-placeholder {
  width: 44px;
  height: 28px;
  border-radius: 4px;
  background: #3c4443;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.tr-day-ex-thumb-placeholder:hover {
  transform: scale(1.08);
}
.tr-day-ex-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-day-ex-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tr-day-ex-swap {
  padding: 3px 8px;
  border: 1px solid var(--border-dark);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.tr-day-ex-swap svg { width: 13px; height: 13px; flex-shrink: 0; }
/* Import is a <label>, so .disabled does nothing — this is the busy state. */
.tr-prog-import-btn.is-busy { opacity: .5; pointer-events: none; }

/* Forms: required toggle in the editor, and the marker it produces. */
.tr-form-req-toggle {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.tr-form-req-toggle input { width: 14px; height: 14px; accent-color: var(--brand); cursor: pointer; }
.tr-form-req-star { color: var(--red); font-weight: 800; }
.tr-day-ex-swap:hover {
  background: var(--brand-light);
  color: var(--brand-dark);
  border-color: var(--brand);
}
.tr-day-ex-rm {
  width: 22px; height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.72rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-day-ex-rm svg { width: 14px; height: 14px; }
.tr-day-ex-rm:hover { background: var(--border); color: var(--text); }
.tr-day-ex-rm:active { color: var(--red); }
.tr-day-ex-fields {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}
.tr-day-ex-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.68rem;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tr-day-ex-field--reps { flex: 1; }
.tr-day-ex-x {
  color: var(--text-dim);
  font-size: 0.8rem;
  padding-bottom: 8px;
}
.tr-day-ex-input {
  padding: 7px 9px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  width: 52px;
}
.tr-day-ex-field--reps .tr-day-ex-input { width: 70px; }
.tr-day-ex-input:focus { border-color: var(--brand); }
.tr-day-ex-notes {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
}
.tr-day-ex-notes:focus { border-color: var(--brand); }
.tr-day-ex-notes::placeholder { color: var(--text-dim); }

/* Delete button in editor footer */
.tr-prog-modal-footer {
  padding: 10px 16px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.tr-prog-delete-btn {
  width: 100%;
  padding: 11px;
  border: 1.5px solid var(--red);
  border-radius: 10px;
  background: transparent;
  color: var(--red);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.tr-prog-delete-btn:active { opacity: 0.7; }

/* ── Exercise Picker ─────────────────────────────────────────── */
.tr-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 2050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 480px) {
  .tr-picker-overlay { align-items: center; }
}
.tr-picker-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
.tr-picker-sheet {
  position: relative;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 680px;
  max-height: 70dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 480px) {
  .tr-picker-sheet {
    border-radius: 20px;
    max-height: 72dvh;
  }
}
.tr-picker-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  flex-shrink: 0;
}
.tr-picker-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.tr-picker-close {
  width: 28px; height: 28px;
  border: none;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
}
.tr-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.tr-picker-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tr-picker-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(0, 180, 156, 0.15);
}
.tr-picker-card:active {
  transform: translateY(0);
}
.tr-picker-thumb-wrap {
  position: relative;
  width: 100%;
  padding-top: 62.5%; /* 16:10 Ratio */
  background: #1a1a1a;
  overflow: hidden;
  flex-shrink: 0;
}
.tr-picker-thumb-wrap::before {
  content: '▶';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 180, 156, 0.85); /* brand translucent */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  padding-left: 2px; /* optical centering */
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: background-color 0.2s, transform 0.2s;
}
.tr-picker-thumb-wrap:hover::before {
  background: var(--brand);
  transform: translate(-50%, -50%) scale(1.1);
}
.tr-picker-thumb-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease;
}
.tr-picker-thumb-wrap:hover::after {
  background: rgba(0, 0, 0, 0.45);
}
.tr-picker-select-btn {
  margin-top: auto;
  padding: 6px 0;
  width: 100%;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.2s;
  box-sizing: border-box;
}
.tr-picker-card:hover .tr-picker-select-btn {
  background: var(--brand-dark);
}
.tr-picker-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tr-picker-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #252b2a;
  color: #4e5e5c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-picker-info {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.tr-picker-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.6em;
}
.tr-picker-cat {
  font-size: 0.68rem;
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tr-picker-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  padding: 20px 0 8px;
}
/* Ben, 9/2: "Make a (add it to the list of exercises) buttons so the coach can
   upload it." The primary action — it gets a video and can be reused. */
.tr-picker-tolib {
  display: block;
  width: calc(100% - 24px);
  margin: 14px auto 0;
  padding: 12px;
  border: 1.5px solid var(--brand);
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
/* The one-off stays available but reads as the lesser option. */
.tr-picker-custom {
  display: block;
  width: calc(100% - 24px);
  margin: 12px auto 0;
  padding: 11px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.tr-picker-custom:active { background: var(--brand-light); }

/* ── Day Picker ──────────────────────────────────────────────── */
.tr-day-pick-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.tr-day-pick-btn:hover { border-color: var(--brand); background: var(--brand-light); }
.tr-day-pick-btn:active { transform: scale(0.98); }
.tr-day-pick-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.tr-day-pick-meta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-light);
  padding: 3px 10px;
  border-radius: 20px;
}

/* ── Start Session button on template cards ──────────────────── */
.tr-tmpl-start {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.tr-tmpl-start:active { opacity: 0.85; }

/* ── Live Session Overlay ────────────────────────────────────── */
.tr-session-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.tr-session-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
}

/* Header */
.tr-session-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
.tr-session-hdr-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tr-session-day-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}
.tr-session-progress {
  font-size: 0.78rem;
  color: var(--brand);
  font-weight: 600;
}
.tr-session-end-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: #fee2e2;
  color: var(--red);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.tr-session-end-btn:active { opacity: 0.75; }

/* Session body */
.tr-session-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#trSessExList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.tr-sess-save-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.tr-sess-save-btn:active { opacity: 0.85; }

/* Exercise card header */
.tr-sess-ex-hdr {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tr-session-ex-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.tr-session-target {
  font-size: 0.78rem;
  color: var(--brand);
  font-weight: 600;
}

/* Past notes */
.tr-session-past-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tr-sess-past-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff8e1;
  border-radius: 10px;
  padding: 8px 12px;
}
.tr-sess-past-icon { font-size: 0.85rem; flex-shrink: 0; }
.tr-sess-past-text {
  font-size: 0.82rem;
  color: #5d4e00;
  flex: 1;
  line-height: 1.4;
}
.tr-sess-past-date {
  font-size: 0.7rem;
  color: #a08040;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Sets */
.tr-session-sets-wrap {
  padding: 0;
}
.tr-session-sets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.tr-sess-no-sets {
  font-size: 0.82rem;
  color: var(--text-dim);
  padding: 8px 0;
  margin: 0;
}
.tr-sess-set-row {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}
.tr-sess-set-row.tr-sess-set-logged { border-color: var(--brand); }
.tr-sess-set-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tr-sess-set-num {
  width: 20px;
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 700;
  flex-shrink: 0;
}
.tr-sess-set-weight {
  width: 72px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  outline: none;
}
.tr-sess-set-weight:focus { border-color: var(--brand); }
.tr-sess-set-unit {
  padding: 7px 6px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  outline: none;
}
.tr-sess-set-x { color: var(--text-dim); font-size: 0.9rem; }
.tr-sess-set-reps {
  width: 60px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  font-family: inherit;
}
.tr-sess-set-reps:focus { border-color: var(--brand); }
.tr-sess-rpe-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tr-sess-rpe-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-weight: 700;
  text-transform: uppercase;
}
.tr-sess-rpe-btns { display: flex; gap: 4px; }
.tr-sess-rpe-btn {
  width: 30px; height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.tr-sess-rpe-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.tr-sess-set-extras {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tr-sess-set-dur {
  width: 100px;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.82rem;
  outline: none;
  font-family: inherit;
}
.tr-sess-set-dur:focus { border-color: var(--brand); }
.tr-sess-set-side {
  padding: 7px 8px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  outline: none;
}
.tr-sess-log-btn {
  padding: 8px 14px;
  border: 1.5px solid var(--brand);
  border-radius: 9px;
  background: transparent;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  margin-left: auto;
}
.tr-sess-log-btn.logged {
  background: var(--brand);
  color: #fff;
}
.tr-sess-rm-set {
  width: 26px; height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.72rem;
  cursor: pointer;
}
.tr-sess-rm-set:active { color: var(--red); }
.tr-session-add-set {
  width: 100%;
  padding: 10px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--brand);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.tr-session-add-set:active { background: var(--brand-light); }

/* AI section */
.tr-session-ai-section {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tr-session-ai-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tr-sess-mic-btn {
  width: 40px; height: 40px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}
.tr-sess-mic-btn.listening {
  background: #fee2e2;
  border-color: var(--red);
  color: var(--red);
}
.tr-sess-ai-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
  font-family: inherit;
}
.tr-sess-ai-input:focus { border-color: var(--brand); }
.tr-sess-ask-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.tr-sess-ask-btn:active   { opacity: 0.85; }
.tr-sess-ask-btn:disabled { opacity: 0.5; cursor: default; }
.tr-sess-ai-response {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}
.tr-sess-ai-response-inner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.tr-sess-ai-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--brand);
  background: var(--brand-light);
  padding: 3px 7px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.tr-sess-ai-text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}
.tr-sess-speak-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.tr-sess-speak-btn:active { opacity: 0.7; }

/* Exercise note row */
.tr-session-note-row {
  padding: 0;
}
.tr-sess-ex-note {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  font-family: inherit;
}
.tr-sess-ex-note:focus { border-color: #f59e0b; }
.tr-sess-ex-note::placeholder { color: var(--text-dim); }

/* Navigation */
.tr-session-nav {
  display: flex;
  gap: 10px;
  padding: 10px 16px 24px;
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.tr-sess-nav-btn {
  flex: 1;
  padding: 13px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.tr-sess-nav-btn:disabled { opacity: 0.35; cursor: default; }
.tr-sess-nav-btn:active   { opacity: 0.7; }
.tr-sess-nav-next {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.tr-sess-nav-next:active { opacity: 0.85; }

/* ── Exercise Swap ───────────────────────────────────────────── */
.tr-sess-ex-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tr-sess-swap-btn {
  flex-shrink: 0;
  padding: 6px 13px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tr-sess-swap-btn:active { background: var(--bg); }

.tr-swap-ex-name {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}
.tr-swap-dir-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  flex-shrink: 0;
}
.tr-swap-dir {
  flex: 1;
  padding: 9px 6px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-align: center;
}
.tr-swap-dir[data-dir="easier"].active { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.tr-swap-dir[data-dir="same"].active   { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.tr-swap-dir[data-dir="harder"].active { background: #fce7f3; color: #9d174d; border-color: #f9a8d4; }

.tr-swap-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

/* ── END COACH MODE FEATURE ── */

/* ── Sport Mode Include Static PDFs Toggle ────────────────────── */
.include-static-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 15px 0 20px;
  padding: 12px 16px;
  background: var(--surface, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.include-static-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.include-static-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand, #00f2fe);
  cursor: pointer;
  margin: 0;
}

.include-static-row label {
  color: var(--text-muted, #a0aec0);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

/* ── Onboarding Wizard (Phase 3 — client invite flow) ────────── */

.onb-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 48px 20px 32px;
  box-sizing: border-box;
}

.onb-progress-bar-row {
  margin-bottom: 8px;
}

.onb-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
}

.onb-progress-track {
  height: 3px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.onb-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 4px;
  transition: width 0.4s ease;
  width: 0%;
}

.onb-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.onb-step {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
}

.onb-step.active {
  display: flex;
}

.onb-height-row {
  display: flex;
  gap: 8px;
}

.onb-height-row input {
  flex: 1;
}

/* Stepper control: − value + */
.onb-stepper {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.onb-stepper-btn {
  flex: 0 0 52px;
  height: 52px;
  font-size: 22px;
  font-weight: 400;
  color: var(--brand-dark);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}

.onb-stepper-btn:active {
  background: var(--brand-light);
}

.onb-stepper-val {
  flex: 1;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  pointer-events: none;
}

.onb-stepper-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 3px;
}

.onb-height-steppers {
  display: flex;
  gap: 10px;
}

.onb-stepper-sm {
  flex: 1;
}

.onb-sex-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.onb-goal-group {
  display: flex;
  gap: 10px;
}

.onb-goal-group .gob-toggle-btn,
.onb-sex-group .gob-toggle-btn {
  flex: 1;
}

.onb-chip-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onb-chip {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all .15s;
  line-height: 1.4;
}
.onb-chip:active { transform: scale(0.98); }
.onb-chip.selected {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.onb-multi-hint {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  text-transform: none; letter-spacing: 0; margin-left: 6px;
}

/* Health-target help (?) button + modal content */
.gob-help-btn, .gob-help-inline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-light); color: var(--brand);
  border: none; font-size: 12px; font-weight: 800; cursor: pointer;
  vertical-align: middle; margin-left: 5px; line-height: 1;
}
.gob-help-inline { cursor: default; }
.gob-help-btn:hover { background: var(--brand); color: #fff; }
.hh-lead { font-size: 14.5px; color: var(--text); line-height: 1.5; margin-bottom: 14px; }
.hh-lead em { font-style: italic; color: var(--text-muted); }
.hh-range {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--brand-light); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.hh-range span { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.hh-range strong { font-size: 17px; font-weight: 800; color: var(--brand); }
.hh-list { margin: 0 0 12px; padding-left: 18px; }
.hh-list li { font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 4px; }
.hh-foot { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.onb-consent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.onb-consent-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
}

.onb-targets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0;
}

.onb-target-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.onb-supplement-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onb-supplement-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
}

.onb-supplement-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
}

#onbCompletBtn:disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

.onb-error {
  font-size: 13px;
  color: var(--red);
  line-height: 1.4;
  margin-top: -8px;
}

.onb-h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.onb-sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.onb-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.onb-input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 16px;
  color: var(--text);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.onb-input:focus {
  outline: none;
  border-color: var(--brand);
}

/* ── Coach Clients Tab ───────────────────────────────────────── */
.client-tab-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Ben, 10/8, desktop screenshot: this pane stretched edge to edge with empty
   page on both sides at desktop width — nothing here was ever given an upper
   bound. Centering a capped width reads as a deliberate dashboard instead of
   a phone layout that happened to be stretched wide. */
@media (min-width: 1100px) {
  .client-tab-content { max-width: 1040px; margin: 0 auto; padding: 24px 16px; }
}
/* The three triage cards (never-logged, note alerts, incomplete workouts) —
   each may render empty, so this is an auto-fit grid, not a hardcoded 2-up:
   one card alone still fills the row, three sit side by side once there is
   room, and it drops back to a single column on its own at phone width. */
.tr-alert-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
.tr-alert-row:empty { display: none; }
@media (min-width: 760px) {
  .tr-alert-row { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
/* Grid gap already spaces these — the standalone margin-bottom these cards
   carry for their original stacked-column context would double up here. */
.tr-alert-row > .tract-card,
.tr-alert-row > .na-card { margin-bottom: 0; }
.tr-alert-row > #trNoteAlerts:empty,
.tr-alert-row > #trIncompleteAlerts:empty { display: none; }
.client-invite-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.client-invite-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.client-invite-link-row input[type=text] {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: text;
  min-height: 44px;
  box-sizing: border-box;
}
.client-invite-expiry {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0;
}
.client-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.client-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  cursor: pointer;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.client-row:active {
  opacity: 0.75;
  transform: scale(0.98);
  transition: none;
}
.client-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.client-row-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── 7-day log grid ─────────────────────────────────────────── */
.log-grid-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 2px;
}
.log-score {
  font-size: 11px;
  font-weight: 800;
  min-width: 26px;
}
.log-score--green  { color: #16a34a; }
.log-score--yellow { color: #d97706; }
.log-score--red    { color: #dc2626; }
.log-grid {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-shrink: 0; /* the 7-dot strip keeps its size — columns yield, not dots */
}
.log-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.log-dot--active {
  background: #16a34a;
}
.log-grid-label {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
}
.client-row-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.client-row-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.client-row-flag {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
}
/* Subscription status badge on client rows */
.client-sub-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.client-sub-badge--active   { background: rgba(34,197,94,.15);  color: #16a34a; }
.client-sub-badge--trial    { background: rgba(59,130,246,.15); color: #2563eb; }
.client-sub-badge--past_due { background: rgba(239,68,68,.15);  color: #dc2626; }
.client-sub-badge--cancelled{ background: rgba(107,114,128,.15);color: #6b7280; }

/* ── Archived Clients section ──────────────────────────────── */
.archived-clients-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.archived-clients-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.archived-toggle-chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  transition: transform 0.2s;
}
.archived-clients-toggle.open .archived-toggle-chevron {
  transform: rotate(180deg);
}
.archived-client-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  gap: 12px;
}
.archived-client-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.archived-client-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.archived-client-date {
  font-size: 11px;
  color: var(--text-dim);
}
.archived-client-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.archived-restore-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--brand);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.archived-restore-btn:active { opacity: 0.7; }
.archived-delete-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(239,68,68,.3);
  background: rgba(239,68,68,.08);
  color: #ef4444;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.archived-delete-btn:active { opacity: 0.7; }

.client-row-chevron {
  font-size: 18px;
  color: var(--text-dim);
}
.client-recovery-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.client-recovery-badge.state-green {
  background: var(--green-bg);
  color: var(--green);
}
.client-recovery-badge.state-yellow {
  background: var(--yellow-bg);
  color: var(--yellow);
}
.client-recovery-badge.state-red {
  background: var(--red-bg);
  color: var(--red);
}

/* ── Coach client list (v2) — grid rows with aligned columns ── */
.client-list-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Shared layout: avatar + name are fixed; the data columns and the Open button
   flow with flexbox so it works whether a tab has 2, 3, or 4 data columns. */
.client-col-headers,
.client-row-v2 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cch-avatar, .cr-avatar { flex: 0 0 40px; }
/* The name column is sized once, below with the other columns — a second
   `.cch-name, .cr-name-col` here only worked by source order and is exactly
   how the last two collisions started. */
/* Ben reported overlapping columns three times (8/26). The first two fixes
   changed widths and did nothing, because the sizing rules were never applying:
   they were written as `.cr-col:nth-of-type(2)`, and NTH-OF-TYPE COUNTS
   ELEMENTS, NOT CLASSES. The row's children are avatar div, name div, then the
   columns — so nth-of-type(2) matched .cr-name-col, which is not a .cr-col at
   all. The rule targeted nothing.
   Every column now carries an explicit class and is sized by name. */
.cch-col, .cr-col { flex: 1 1 0; min-width: 0; }

/* Activity: 26px score + 6px gap + 74px of dots = 106px of content, and the
   dot strip is flex-shrink:0 so it cannot give any of it back. */
.cch-col--wide, .cr-col--wide { flex: 0 1 auto; min-width: 118px; }

/* Last Active: "22h ago" on one line with the 48h+ flag beneath it. */
.cch-col--last, .cr-col--last { flex: 0 1 auto; min-width: 92px; }

/* Recovery: a Good/Fair/Low pill and nothing else. */
.cch-col--recovery, .cr-col--recovery { flex: 0 1 auto; min-width: 62px; }

/* The name column absorbs the slack instead of the data columns, so a wide
   window stretches the name rather than pushing values apart. */
.cch-name, .cr-name-col { flex: 1 1 130px; min-width: 110px; }

/* The Open button is a fixed-size end cap. margin-left:auto was letting it
   drift onto the Recovery pill once the columns stopped shrinking — the gap
   holds it clear now. */
.cch-action, .cr-open-btn { flex: 0 0 auto; margin-left: 0; }

/* Avatar initials — centered, rounded, filling the square (was top-left text). */
.client-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-sizing: border-box;
}
.client-avatar-img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.client-col-headers {
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.client-row-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.client-row-v2:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.cr-avatar { position: relative; width: 40px; height: 40px; }
/* `.cr-name-col { min-width: 0 }` used to sit here — the SIBLING of the
   `.cr-col` duplicate removed above, and the same trap. It cancelled the
   min-width:110px set ~45 lines earlier, so the column collapsed to nothing
   and .cr-name (overflow:hidden) clipped every client name to a sliver.
   Ben, 8/26: "now I can't see the name". Sized once, in one place. */
.cr-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-name-sub { margin-top: 2px; }
/* `.cr-col { min-width: 0 }` used to sit here. It has the SAME specificity as
   the sizing rules ~60 lines above and comes later, so it silently cancelled
   every min-width they set — which is why "1d ago" kept truncating and landing
   on top of the dot strip however wide I made the columns. (Ben, 8/26, twice.)
   The base rule at .cch-col/.cr-col already sets min-width: 0; the per-column
   overrides are the ones that must survive. */
/* Column labels only show on the header (narrow-screen card mode re-enables them) */
.cr-label { display: none; }
.cr-value {
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35;
  /* NOT nowrap on the container. The 48h+ flag below is a separate line, and
     nowrap + overflow:hidden on the parent clipped BOTH of them — which is why
     "22h ago" rendered as "22h…" and sat on top of the dot strip. The date
     itself is kept on one line by .cr-value-txt below; the flag is free to
     take its own row. (Ben, 8/26) */
  min-width: 0;
}
/* Just the date text — this is the part that must never break mid-phrase. */
.cr-value-txt {
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-value--big { font-size: 18px; font-weight: 800; }
.cr-green  { color: var(--green); }
.cr-yellow { color: var(--yellow, #f59e0b); }
.cr-red    { color: var(--red); }
/* The 48h+ flag sits on its own line below the date so "Never"/"3w ago" and the
   flag don't crush together in the narrow Last Active column. */
.cr-flag {
  display: table;      /* block-like but shrinks to content, forcing a line break */
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  background: var(--red-bg);
  padding: 1px 6px;
  border-radius: 20px;
  white-space: nowrap;
}
.cr-open-btn {
  justify-self: end;
  background: var(--brand-light);
  color: var(--brand-dark);
  border: 1.5px solid var(--brand);
  border-radius: 10px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.cr-open-btn:hover { background: var(--brand-mid); }

/* Narrow screens: wrap into a labeled card so nothing bunches up unlabeled
   (the previous broken behavior). Avatar + name + Open stay on the top line;
   the data columns wrap below, each with its own label. */
@media (max-width: 720px) {
  .client-col-headers { display: none; }
  .client-row-v2 { flex-wrap: wrap; row-gap: 10px; }
  .cr-avatar   { flex: 0 0 40px; }
  .cr-name-col { flex: 1 1 auto; }
  .cr-open-btn { flex: 0 0 auto; margin-left: auto; }
  /* Force the data columns onto a new full-width line, laid out evenly. */
  .cr-col {
    flex: 1 1 30%;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .cr-col:first-of-type { margin-left: 0; }
  /* Show the labels on mobile so each value is identified. */
  .cr-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
  }
}
.client-recovery-badge.state-unknown {
  background: var(--bg);
  color: var(--text-muted);
}
.client-drill-date-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 0 4px;
}
.client-drill-food-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.client-drill-food-info {
  flex: 1;
  min-width: 0;
}
.client-drill-food-photo {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface2);
}
.client-drill-food-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 2px;
}
.client-drill-checkin-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.tr-session-row { border-bottom: 1px solid var(--border); }
.tr-session-row-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; cursor: pointer; user-select: none;
}
.tr-session-row-hdr:active { opacity: 0.7; }
.tr-session-chevron { flex-shrink: 0; color: var(--text-dim); transition: transform 0.2s; }
.tr-session-detail { padding: 4px 0 12px; }
.client-drill-recovery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.client-drill-recovery-dot.state-green  { background: var(--green); }
.client-drill-recovery-dot.state-yellow { background: var(--yellow); }
.client-drill-recovery-dot.state-red    { background: var(--red); }
.client-drill-recovery-dot.state-unknown { background: var(--text-dim); }

/* ── Phase 4: In-App Chat ── */
.messages-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 8px 16px 4px;
  overflow: hidden;
}
.messages-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.messages-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.messages-card-badge {
  background: var(--red);
  color: #fff;
  border-radius: 100px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}
.messages-card-chevron {
  font-size: 16px;
  color: var(--text-dim);
  transition: transform 0.2s ease;
}
.messages-card.expanded .messages-card-chevron {
  transform: rotate(90deg);
}
.messages-card-body {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
  max-height: 45vh;
  background: var(--bg);
}
#clientDrillChat .chat-thread {
  max-height: 55vh;
  min-height: 200px;
}
.chat-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 78%;
}
.chat-bubble-wrap.mine   { align-self: flex-end;   align-items: flex-end; }
.chat-bubble-wrap.theirs { align-self: flex-start;  align-items: flex-start; }
.chat-bubble {
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  word-break: break-word;
  color: var(--text);
}
.chat-bubble.mine {
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble.theirs {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-bubble-time {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1;
}
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 16px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  align-items: center;
}
.chat-input-row input[type="text"] {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.chat-input-row input[type="text"]:focus {
  border-color: var(--brand);
  background: var(--surface);
}
.chat-input-row .chat-send-btn {
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.chat-input-row .chat-send-btn:active {
  opacity: 0.75;
}
.chat-input-row .chat-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.client-unread-badge {
  background: var(--red);
  color: #fff;
  border-radius: 100px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.chat-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
}
.chat-empty-state-icon {
  font-size: 28px;
  opacity: 0.4;
}
.chat-empty-state-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Phase 4.1: Coach Messages Panel ── */

/* §1 Messages Inner Tab Button */
.tr-inner-tab {
  position: relative;
}
.tr-inner-tab .client-unread-badge {
  font-size: 11px;
  padding: 4px 8px;
  margin-left: 4px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

/* §2 Messages Pane Container */
.msg-panel-wrap {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

.msg-panel-left {
  flex: 0 0 260px;
  width: 260px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg);
}

.msg-panel-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}

@media (max-width: 768px) {
  .msg-panel-wrap {
    position: relative;
    overflow: hidden;
  }
  .msg-panel-left {
    flex: 0 0 100%;
    width: 100%;
    border-right: none;
    transition: transform 0.28s ease;
  }
  .msg-panel-right {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: transform 0.28s ease;
  }
  .msg-panel-wrap.thread-open .msg-panel-left {
    transform: translateX(-100%);
  }
  .msg-panel-wrap.thread-open .msg-panel-right {
    transform: translateX(0);
  }
}

/* §3 Client List Item */
.msg-client-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  transition: background 0.12s;
}
.msg-client-item:hover {
  background: var(--surface);
}
.msg-client-item.active {
  background: var(--surface);
  border-left: 3px solid var(--brand);
  padding-left: 16px;
  box-sizing: border-box;
}

.msg-client-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.msg-client-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.msg-client-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-client-preview {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-client-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.msg-client-time {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  white-space: nowrap;
}

/* §4 Thread View */
.msg-thread-header {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .msg-thread-header {
    display: flex;
  }
}

.msg-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--brand);
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  margin-left: -8px;
}

.msg-thread-client-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-welcome {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Live Session scrolling cards */
.tr-sess-ex-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  transition: border-color 0.15s ease;
}

/* Progression spreadsheet table styles */
.tr-prog-cell-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.tr-prog-cell-input:focus {
  border-color: var(--brand);
  background: var(--surface);
}
.tr-day-progressions:active {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
}

.msg-date-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.msg-date-sep-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.msg-date-sep-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.chat-bubble-wrap.theirs {
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

.chat-bubble-with-avatar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.chat-bubble-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.msg-panel-right .chat-thread {
  flex: 1;
  max-height: none;
  min-height: 0;
}

/* §6 Desktop Right Panel Empty State */
.msg-panel-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}

.msg-panel-empty-icon {
  font-size: 28px;
  opacity: 0.3;
}

.msg-panel-empty-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.2;
}

.msg-panel-empty-body {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 220px;
}

/* ── Phase 5: Desktop Sidebar Navigation (Trainerize Style) ────── */
@media (min-width: 769px) {
  #app {
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 240px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
  }

  .tab-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 240px;
    max-width: 240px !important;
    height: 100vh;
    transform: none !important;
    flex-direction: column;
    border-top: none;
    border-right: 1px solid var(--border);
    background: var(--surface);
    padding: 24px 16px;
    gap: 8px;
    justify-content: flex-start;
    z-index: 101;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05);
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px 24px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .sidebar-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .sidebar-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .sidebar-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    letter-spacing: -0.2px;
  }

  .tab-btn {
    flex: none;
    width: 100%;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    min-height: 46px !important;
    border-radius: 8px;
    font-size: 14px !important;
    color: var(--text-muted) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    background: transparent;
    text-align: left;
  }
  
  .tab-btn:hover:not(.active) {
    background: var(--bg);
    color: var(--text) !important;
  }
  
  .tab-btn.active {
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    color: var(--brand) !important;
    font-weight: 600 !important;
  }
  
  .tab-btn.sport-tab-btn.active {
    color: var(--sport) !important;
    background: color-mix(in srgb, var(--sport) 8%, transparent);
  }
  
  .tab-btn .tab-icon {
    width: 20px !important;
    height: 20px !important;
    transition: transform 0.2s;
  }
  
  .tab-btn.active .tab-icon {
    transform: scale(1.05) !important;
  }
  
  .tab-btn .tab-flag-dot {
    position: static !important;
    margin-left: auto;
    transform: none !important;
    display: inline-block;
    width: 8px;
    height: 8px;
  }

  .app-header {
    max-width: 100% !important;
    margin-left: 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 16px 40px !important;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  /* Ben, 9/9: the brand used to be display:none here because the view title
     was fighting it for the same row. The title moved to its own banner, so
     "Franco's Nutrition" is readable again — which is what he asked for. */
  .app-header .header-logo,
  .app-header .header-text {
    display: flex !important;
  }
  .app-header .header-text { display: block !important; }

  .view-banner-title { font-size: 16px; }

  .tab-content {
    padding-bottom: 40px !important;
    padding-top: 24px !important;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  
  .tab-content > *:not(.modal-overlay) {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* Hide desktop elements on mobile */
@media (max-width: 768px) {
  .sidebar-brand {
    display: none !important;
  }
  /* Ben, 9/6 asked for a title bar naming the view; 9/9 he asked for it OUT of
     the header — "it feels crammed ... francos nutrition helper isnt readable".
     Both are satisfied by moving it to .view-banner below the header, so the
     old max-width:38vw squeeze on the brand is gone. */
  .view-banner { padding: 8px 16px; }
  .view-banner-title { font-size: 13.5px; }
  .app-title, .app-tagline {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ── Floating Chat Button for Clients ── */
.client-floating-chat-btn {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  transition: transform 0.15s, background-color 0.15s;
}
.client-floating-chat-btn:hover {
  background: var(--brand-dark);
  transform: scale(1.05);
}
.client-floating-chat-btn:active {
  transform: scale(0.95);
}
.client-floating-chat-btn svg {
  width: 24px;
  height: 24px;
}
.chat-unread-badge-floating {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sidebar-welcome {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Client Drill Modal Redesign (Trainerize Style) */
@media (min-width: 769px) {
  .client-drill-modal {
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    max-width: 1200px !important;
    width: 95% !important;
    height: 90% !important;
    max-height: 850px !important;
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
    transform: translate(-50%, -45%) scale(0.96) !important;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s !important;
    padding: 0 !important;
  }
  .client-drill-modal.open {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
  }
}

.client-drill-tab-btn {
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.client-drill-tab-btn:hover {
  color: var(--text);
}
.client-drill-tab-btn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.client-drill-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  min-height: 100%;
}
@media (max-width: 900px) {
  .client-drill-grid {
    grid-template-columns: 1fr;
  }
  .client-drill-col {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
}

.client-drill-action-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.client-drill-action-circle:hover {
  background: var(--brand-light);
  color: var(--brand);
  border-color: var(--brand);
}

/* Trainer Note Cards */
.tr-note-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: border-color 0.15s;
  text-align: left;
}
.tr-note-card.pinned {
  border-color: #f59e0b;
  background: #fffdf5;
}
.tr-note-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.tr-note-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.tr-note-card-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
  white-space: pre-wrap;
}
.tr-note-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 4px;
}
.tr-note-actions {
  display: flex;
  gap: 8px;
}
.tr-note-action-btn {
  background: transparent;
  border: none;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 10px;
}
.tr-note-action-btn--delete {
  color: var(--red);
}
.tr-note-action-btn--pin {
  color: #d97706;
}

/* Compliance Rings & Stat Rows */
.cd-rings-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cd-ring-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cd-ring {
  width: 54px;
  height: 54px;
  transform: rotate(-90deg);
}
.cd-ring circle {
  fill: none;
  stroke-width: 3.2;
}
.cd-ring circle:first-child {
  stroke: var(--border);
}
.cd-ring circle:last-child {
  stroke-linecap: round;
  transition: stroke-dasharray 0.35s;
}
.cd-ring.ring--green circle:last-child {
  stroke: #16a34a;
}
.cd-ring.ring--yellow circle:last-child {
  stroke: #d97706;
}
.cd-ring.ring--red circle:last-child {
  stroke: #dc2626;
}
.cd-ring-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}
.cd-ring-label strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.cd-ring-label span {
  font-size: 9px;
  color: var(--text-muted);
}
.cd-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.cd-stat-label {
  color: var(--text-muted);
  font-weight: 500;
}
.cd-stat-val {
  font-weight: 700;
  color: var(--text);
}
.cd-stat-val.cd-muted {
  color: var(--text-dim);
  font-weight: 400;
}
.cd-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  background: var(--brand-light);
  color: var(--brand);
  margin-top: 6px;
  text-align: center;
}
.cd-tag.cd-tag--red {
  background: #fef2f2;
  color: #dc2626;
}
.cd-tag.cd-tag--orange {
  background: #fffbeb;
  color: #d97706;
}

/* ── Phase 9: Client Self-Directed Workout ── */

/* Tab section */
.cw-tab-section { padding: 16px; display: flex; flex-direction: column; gap: 24px; }

/* Muscle Gap Banner — extends .brief-banner pattern */
.cw-gap-banner {
  background: var(--surface);
  border-radius: 14px;
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--brand);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow);
  transition: border-color 0.2s;
  cursor: pointer;
}
/* Suggestion, not an alert — one brand accent, no traffic-light colors */
.cw-gap-banner { border-left-color: var(--brand); }
.cw-gap-banner-muscle { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.cw-gap-banner-days { font-size: 13px; font-weight: 400; color: var(--text-muted); line-height: 1.4; }
/* The muscle-gap line now says everything in the headline, so this span is
   empty on the common path. Without this it still claims a flex gap and the
   banner keeps the height of the two-line version it replaced. */
.cw-gap-banner-days:empty { display: none; }
.cw-gap-banner-suggestion { font-size: 13px; font-weight: 700; color: var(--brand); line-height: 1.4; }
.cw-gap-banner-suggestion:empty { display: none; }
.cw-gap-banner-skeleton {
  height: 14px; border-radius: 6px; background: var(--border);
  animation: cw-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes cw-skeleton-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.5; }
}

/* ── Workout tab — section spacing matching rest of app ──── */
#tab-workout #cwSessionArea { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 0; }
#tab-workout #cwGapBanner   { margin: 12px 0 0; }

/* Build list */
.cw-build-list { display: flex; flex-direction: column; gap: 0; }
.cw-build-empty { padding: 32px 0; text-align: center; }
.cw-build-empty-head { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.cw-build-empty-body { font-size: 14px; color: var(--text-muted); margin: 0; }

/* Build cards — styled like meal-card rows */
.cw-build-card {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  display: flex;
  /* flex-start so the drag handle and the ✕ stay level with the first line
     of a wrapped exercise name rather than floating mid-card. */
  align-items: flex-start;
  gap: 12px;
  transition: opacity 0.15s;
  cursor: grab;
}
.cw-build-card:first-child { border-top: 1px solid var(--border); }
.cw-build-card-dragging { opacity: 0.4; }
.cw-build-card.drag-over { background: var(--brand-light); }
.cw-build-drag-handle {
  width: 20px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); cursor: grab; flex-shrink: 0;
}
.cw-build-card-thumb {
  width: 44px; height: 44px; border-radius: 10px;
  object-fit: cover; background: var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--text-muted);
}
.cw-build-card-thumb-fallback { background: var(--brand-light); color: var(--brand); }
.cw-build-card-info { flex: 1; min-width: 0; }
/* Same reason: "Seated DB Shoulder Press (Unilateral — Left Arm Focus)" is a
   real exercise in a live program, and the bracket is the coaching. */
.cw-build-card-name { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.cw-build-card-muscle-tag {
  display: inline-block; margin-top: 3px;
  font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; background: var(--brand-light); color: var(--brand);
}
.cw-build-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.cw-build-card-actions button {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: transparent; color: var(--text-dim);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.cw-build-card-actions button:active { background: var(--border); }
.cw-build-remove-btn:active { color: var(--red) !important; }

/* Scan + AI row — two equal pill buttons */
.cw-scan-area { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; }
.cw-scan-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 4px 0;
}
.cw-scan-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 10px 12px;
  border-radius: 14px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, color 0.15s;
}
.cw-scan-btn:active { border-color: var(--brand); color: var(--brand); }
.cw-ai-next-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; padding: 10px 12px;
  border-radius: 14px; border: 1.5px solid var(--brand);
  background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 0.15s;
}
.cw-ai-next-btn:active { background: var(--brand-dark); border-color: var(--brand-dark); }
.cw-ai-next-btn:disabled { opacity: 0.6; cursor: default; }
.cw-ai-next-card {
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow);
}
.cw-ai-next-name { font-size: 16px; font-weight: 800; color: var(--text); }
.cw-ai-next-rx { font-size: 13px; font-weight: 700; color: var(--brand); margin-left: 6px; }
.cw-ai-next-reason { font-size: 14px; color: var(--text-muted); line-height: 1.45; }
.cw-scan-loading {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-muted); padding: 8px 0;
}

/* Chip grid (equipment scan results) */
.cw-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.cw-ex-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 20px;
  background: var(--surface); border: 1.5px solid var(--border);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  min-height: 44px;
}
.cw-ex-chip:active, .cw-ex-chip.added { border-color: var(--brand); background: var(--brand-light); }
.cw-ex-chip-thumb {
  width: 28px; height: 28px; border-radius: 6px;
  object-fit: cover; background: var(--border);
}
.cw-ex-chip-label { font-size: 13px; font-weight: 700; color: var(--text); }
.cw-machine-prompt {
  background: var(--surface); border-radius: 16px;
  border: 1.5px solid var(--border); padding: 16px;
  font-size: 14px; color: var(--text);
}

/* Start session bar */
.cw-start-session-bar {
  width: 100%; height: 54px;
  background: var(--brand); color: #fff;
  border: none; border-radius: 14px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(var(--brand-rgb, 0,122,255),0.3);
  transition: background 0.15s, transform 0.1s;
  margin-top: 4px;
}
.cw-start-session-bar:active { background: var(--brand-dark); transform: scale(0.98); }

/* Gym selector */
.cw-gym-selector {
  background: var(--surface); border-radius: 16px;
  border: 1.5px solid var(--border); padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}

/* Session overlay — z-index 1500, ABOVE trainer overlay (1400) */
/* ── GYM FLOOR — the live session goes dark ─────────────────────────────
 *
 * Ben, 9/18, after comparing three styles side by side: "gym floor looks
 * grest". Then: "lets just build it in the workout for now".
 *
 * SCOPED TO THIS OVERLAY, NOT THE APP. #cwSessionOverlay is already a
 * position:fixed full-screen layer holding the session header, the rest
 * takeover and the exercise list — and nothing else. Browsing the workout
 * tab stays light; it goes dark when training actually starts, which is the
 * moment the context changes from planning to a phone on a bench.
 *
 * THIS IS A TOKEN OVERRIDE, NOT A RESTYLE. 4,586 of the rules in this file
 * already resolve through var(--token) and only 36 literals sit inside a
 * .cw- rule, 25 of which are #fff on a coloured button and correct either
 * way. So redefining the palette on one selector re-themes everything
 * inside it, and the handful that do not follow are fixed below.
 *
 * Why the brand colour changes, stated accurately: #00b49c is NOT unreadable
 * here — it measures 7.46:1 on #080d0d and passes AA comfortably. The change
 * is about legibility at distance, not a contrast failure. #00e0c0 is the
 * same hue at 11.57:1, and the number that matters is a rest countdown read
 * from across a room by someone not holding the phone.
 *
 * Numerals run 22% larger here. A weight or a countdown is read at arm's
 * length, mid-set, by someone who is not holding the phone. */
.cw-session-overlay {
  position: fixed; inset: 0;
  z-index: 1500;
  display: flex; flex-direction: column;
  overflow: hidden;

  --bg: #080d0d;
  --surface: #121a19;
  --surface2: #0c1413;
  --border: #26332f;
  --border-dark: #33423e;

  --text: #f2f7f6;
  --text-muted: #8b9a98;
  --text-dim: #65736f;

  --brand: #00e0c0;
  --brand-dark: #00e0c0;
  --brand-on-light: #04100e;   /* text ON a brand fill, which is now light */
  --brand-light: #0d2b27;
  --brand-mid: #16453d;

  --green: #3ddc84;  --green-bg: #0f2a1c;
  --yellow: #ffc247; --yellow-bg: #2a2110;
  --red: #ff6b5b;    --red-bg: #2e1512;
  --success: #3ddc84;
  --sport: #9f7bff;  --sport-light: #1f1836;

  --shadow: 0 1px 2px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 6px 22px rgba(0,0,0,.55);

  background: var(--bg);
  color: var(--text);
}

/* The literals inside this overlay that do NOT follow the tokens. Each was
 * written against a white ground and is illegible on black. */
.cw-session-overlay .cw-rest-adj-btn:active { background: var(--surface2); }
.cw-session-overlay .cw-sess-save-err {
  background: var(--red-bg);
  color: var(--red);
}
.cw-session-overlay .cw-circuit-label { color: var(--sport); }
/* #fff on a brand fill was black-on-teal by accident once the brand went
 * light. These read against the new fill instead. */
.cw-session-overlay .cw-restfull-btn--go,
.cw-session-overlay .cw-sheet-btn-primary,
.cw-session-overlay .cw-target-type-btn.active,
.cw-session-overlay .cw-time-chip.active,
/* .cw-int-pill is always brand-filled — there is no .on variant. The class
 * the JS adds is cw-int-pill-on, which does not exist in CSS; guessing
 * ".on" here would have matched nothing and looked like the rule worked. */
.cw-session-overlay .cw-int-pill,
.cw-session-overlay .cw-int-x { color: var(--brand-on-light); }
.cw-session-overlay .cw-int-pill .cw-int-where { color: rgba(4,16,14,.75); }
.cw-session-overlay .cw-int-pill .cw-int-x {
  background: rgba(4,16,14,.22);
  color: var(--brand-on-light);
}

/* Rest takeover: the one number someone reads from across a room. */
.cw-session-overlay .cw-restfull-num {
  font-size: clamp(76px, 22vw, 108px);
  letter-spacing: -.01em;
  color: var(--brand);
  text-shadow: 0 0 34px rgba(0, 224, 192, .26);
}
/* A client on a light phone who found the dark session jarring. Ben, 9/18:
 * "give them a pop up if they want to change it back". Resets the overlay's
 * tokens to the app's light values — the same list, so the two cannot drift
 * into a half-dark screen. */
.cw-session-overlay.cw-session-light {
  --bg: #f4f6f5;  --surface: #ffffff; --surface2: #f9fafa;
  --border: #e8eceb; --border-dark: #d0d8d6;
  --text: #1a1a1a; --text-muted: #6b7c7a; --text-dim: #b0bbb9;
  --brand: #00b49c; --brand-dark: #009884;
  --brand-on-light: #ffffff; --brand-light: #e6f9f6; --brand-mid: #ccf2ec;
  --green: #27ae60; --green-bg: #eafaf1;
  --yellow: #f39c12; --yellow-bg: #fef9ec;
  --red: #e74c3c;   --red-bg: #fdf0ef;
  --success: #27ae60; --sport: #6c3fff; --sport-light: #f0ebff;
  --shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
}
/* The countdown glow is a dark-ground effect; it muddies a white one. */
.cw-session-overlay.cw-session-light .cw-restfull-num { text-shadow: none; }

/* ── Focus mode chrome ──────────────────────────────────────────────────
 * Deliberately placed AFTER the gym-floor block rather than inside it.
 * These are ordinary component rules, not palette overrides — they resolve
 * through var(--token) and therefore take whichever theme they render in.
 * Keeping them out of the overlay's own section is what lets the scope test
 * above stay strict: everything between the token block and this comment
 * must be prefixed, and a future palette rule that forgets the prefix is
 * caught instead of hiding among component styles. */
.cw-focus-switch { display: flex; justify-content: flex-end; padding: 0 2px 8px; }
.cw-focus-toggle {
  height: 30px; padding: 0 11px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--surface2);
  color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.cw-focus-toggle:hover { border-color: var(--brand); color: var(--brand); }

.cw-focus-vid {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  background: #000; border-radius: 12px; overflow: hidden; max-width: 100%;
}
.cw-focus-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cw-focus-vid-none {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1.5px dashed var(--border);
  color: var(--text-dim); font-size: 12.5px; text-align: center; padding: 0 24px;
}
/* The loop has no controls, so a tap cannot accidentally pause it mid-set.
   This covers the frame and opens the real player instead. */
.cw-focus-expand {
  position: absolute; inset: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 0 10px 0;
}
.cw-focus-expand span {
  margin-right: 10px; background: rgba(0,0,0,.66); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 5px 9px; border-radius: 7px;
}
.cw-focus-expand:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.cw-focus-vidnote {
  margin: 6px 2px 0; font-size: 11.5px; font-weight: 600; color: var(--yellow);
}
.cw-focus-count {
  margin: 7px 0 2px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}
.cw-focus-nav { display: flex; gap: 8px; margin: 12px 0 4px; }
.cw-focus-nb {
  flex: 1; height: 46px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.cw-focus-nb:disabled { opacity: .38; cursor: not-allowed; }
.cw-focus-nb-primary {
  flex: 1.7; background: var(--brand); border-color: var(--brand);
  color: var(--brand-on-light);
}

/* ── Hide-with-icons for the focus card ─────────────────────────────────
 * Ben, 9/18-19: strip parts of the card down to chips, same pattern as
 * WORKOUT_CARDS on the tab, but scoped to one card's own parts rather than
 * whole cards on a screen — so its own lighter mechanism (fnhFocusHidden)
 * instead of the full-screen card picker. */
.cw-fhide-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; }
.cw-fhide-chip {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--surface2);
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cw-fhide-chip svg { width: 16px; height: 16px; }
.cw-fhide-chip:hover { border-color: var(--brand); color: var(--brand); }
.cw-fhide-cog { margin-left: auto; }
.cw-fhide-cog[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }

.cw-fhide-picker {
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 12px 4px; margin: 0 0 12px;
}
.cw-fhide-picker-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); padding: 0 12px 8px;
}
.cw-fhide-prow {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: 0; background: none; font: inherit;
  color: var(--text); font-size: 13.5px; font-weight: 650; cursor: pointer; text-align: left;
}
.cw-fhide-prow svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); }
.cw-fhide-prow span:not(.cw-fhide-sw) { flex: 1; }
.cw-fhide-sw {
  width: 38px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--border); position: relative; transition: background .15s;
}
.cw-fhide-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.cw-fhide-prow.on .cw-fhide-sw { background: var(--brand); }
.cw-fhide-prow.on .cw-fhide-sw::after { left: 18px; }

.cw-session-inner {
  display: flex; flex-direction: column;
  height: 100%;
  max-width: 640px; margin: 0 auto; width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Full-screen workout editor (Trainerize-style) */
.tr-we-overlay {
  position: fixed; inset: 0; z-index: 2050;
  background: var(--bg);
  display: none; flex-direction: column;
}
.tr-we-overlay.open { display: flex; }
.tr-we-hdr {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.tr-we-hdr input {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 800;
  border: none; border-bottom: 1.5px solid var(--border);
  background: transparent; color: var(--text);
  outline: none; padding: 4px 2px;
}
#trWeClose {
  border: none; background: none; font-size: 18px;
  color: var(--text-muted); cursor: pointer;
  min-width: 40px; min-height: 40px;
}
.tr-we-body {
  flex: 1; display: grid; grid-template-columns: 1.25fr 1fr;
  overflow: hidden;
}
.tr-we-left {
  padding: 14px 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  border-right: 1px solid var(--border);
}
.tr-we-right {
  padding: 14px 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 760px) {
  .tr-we-body { display: flex; flex-direction: column; overflow-y: auto; }
  .tr-we-left { border-right: none; border-bottom: 1px solid var(--border); overflow: visible; }
  .tr-we-right { overflow: visible; }
}
.tr-we-hdr-kicker {
  font-size: 13px; font-weight: 400; color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
}
.tr-we-section-label {
  font-size: 12px; font-weight: 800; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.6px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
/* Instructions read like app body text — border only appears on focus */
.tr-we-instructions {
  border: 1px solid transparent; border-radius: 8px;
  padding: 6px 4px; font-size: 13.5px; line-height: 1.55;
  background: transparent; color: var(--text);
  resize: vertical; outline: none; font-family: inherit;
}
.tr-we-instructions:hover { border-color: var(--border); }
.tr-we-instructions:focus { border-color: var(--brand); background: var(--surface); }
.tr-we-toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tr-we-toolbtn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 6px 12px;
  border: 1.5px solid var(--border-dark); border-radius: 8px;
  background: var(--surface); color: var(--text-muted);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.4px;
  cursor: pointer; transition: border-color 0.12s, color 0.12s;
}
.tr-we-toolbtn:hover, .tr-we-toolbtn:active { border-color: var(--brand); color: var(--brand); }
.tr-we-toolbtn-danger:hover, .tr-we-toolbtn-danger:active { border-color: var(--red); color: var(--red); }
.tr-we-colhead {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 8px 2px 70px; /* aligns past bubble + thumbnail */
  font-size: 11px; font-weight: 800; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.tr-we-colhead-name { flex: 1.4; min-width: 80px; }
@media (max-width: 760px) { .tr-we-colhead { display: none; } }
.tr-we-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px; margin-top: 6px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
}
.tr-we-row.drag-over { border-color: var(--brand); }

/* Dragging an exercise through a workout (Ben, 8/26). The drop line matters
   more than it looks: a highlighted row tells you WHICH row you are near but
   not whether you land above or below it, which is the only thing you
   actually care about while aiming. */
.tr-we-dropline {
  height: 3px; border-radius: 2px; margin: 3px 0;
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.tr-we-row.tr-we-dragging {
  opacity: .92;
  position: relative; z-index: 5;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  border-color: var(--brand);
  /* The row follows the finger via inline transform — no transition here, or
     it lags behind the pointer and feels broken. */
}
/* While lifting, kill text selection and the browser's own touch panning so
   the drag is the only thing responding to the finger. */
body.tr-we-dragging-body {
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: contain;
}
body.tr-we-dragging-body .tr-we-row { touch-action: none; }
.tr-we-row.selected { border-color: var(--brand); background: var(--brand-light); }
.tr-we-rest { background: var(--yellow-bg); border-color: var(--yellow); }
#trWeRows { min-height: 120px; }

/* Selection bubble — tap the row to fill it, then Superset/Circuit/Remove */
.tr-we-bubble {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border-dark);
  background: var(--bg);
  flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}
.tr-we-bubble.on { background: var(--brand); border-color: var(--brand); }
.tr-we-bubble.on::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.tr-we-f {
  font-size: 13px; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px; background: var(--bg); color: var(--text); outline: none;
}
.tr-we-namewrap { flex: 1.4; min-width: 80px; display: flex; align-items: center; gap: 4px; }
.tr-we-name { font-weight: 700; width: 100%; }
.tr-we-glabel { font-size: 11px; font-weight: 800; flex-shrink: 0; }
/* Ben, 9/10: "in client programs that ive built in the edit screen can we add
   a swap function on the exercises please." Sits next to the drag handle, same
   quiet weight — it is an occasional action, not the point of the row. */
.tr-we-swap {
  flex: none;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.tr-we-swap:hover  { color: var(--brand); background: var(--brand-light); }
.tr-we-swap:active { background: var(--brand-mid); }

/* Per-card remove (Ben, 9/15). Deliberately the same quiet shape as the swap
   beside it — it only goes red on hover, so a busy card does not read as a row
   of warnings, but the destructive action still announces itself before the
   click. */
.tr-we-del {
  flex: none;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.tr-we-del:hover  { color: var(--red); background: var(--red-bg); }
.tr-we-del:active { color: #fff; background: var(--red); }
.tr-we-del:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* Ben, 9/10: "the edit day needs to also double up as the log". SAVE AS DONE
   sits beside DONE and does something materially different — it writes a
   session record — so it must not read as the same button twice. */
.tr-we-log {
  background: var(--sport);
  border-color: var(--sport);
  margin-right: 6px;
}
.tr-we-log:active { filter: brightness(.92); }

.tr-we-drag { cursor: grab; color: var(--text-dim); font-size: 16px; padding: 0 4px; user-select: none; }
.tr-we-thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--border); }
.tr-we-thumbfallback {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--text-muted); background: var(--border);
}
.tr-we-thumb-play {
  position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 9px; line-height: 1; padding-left: 1px;
  border: none; cursor: pointer;
}
.tr-we-thumb-play:hover { background: rgba(0,0,0,0.75); }
/* Playing state — the thumbnail is swapped for a real embedded player
   right in the card, per Ben: "i need to be able to preview on the card."
   Sized to be actually watchable (16:9), not a postage-stamp thumbnail. */
.tr-we-thumb-video-box {
  position: relative;
  width: 220px; height: 124px;
  border-radius: 10px; overflow: hidden;
  background: #000; flex-shrink: 0;
}
.tr-we-thumb-video { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }
.tr-we-thumb-video-close {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 11px; border: none; cursor: pointer; line-height: 1;
}
.tr-we-thumb-video-close:hover { background: rgba(0,0,0,0.85); }
@media (max-width: 560px) {
  .tr-we-thumb-video-box { width: 160px; height: 90px; }
}
#trWeSearch {
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px; font-size: 14px;
  background: var(--surface); color: var(--text); outline: none;
}
#trWeSearch:focus { border-color: var(--brand); }
.tr-we-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tr-we-libcard {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); padding: 0 0 8px;
  cursor: grab; display: flex; flex-direction: column; gap: 5px;
  overflow: hidden; text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.tr-we-libcard:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.tr-we-libcard:active { border-color: var(--brand); cursor: grabbing; }
.tr-we-libcard img {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  object-fit: cover; display: block; background: var(--border);
}
.tr-we-libfallback {
  width: 100%; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: var(--text-muted); background: var(--border);
}
.tr-we-libname {
  font-size: 12.5px; font-weight: 700; padding: 0 8px; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Trainerize-style message composer */
.msg-composer {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.msg-composer textarea {
  width: 100%; max-height: 120px;
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 10px 12px; font-size: 14px; line-height: 1.4;
  background: var(--bg); color: var(--text);
  resize: none; outline: none; font-family: inherit;
}
.msg-composer textarea:focus { border-color: var(--brand); }
.msg-composer-icons { display: flex; align-items: center; gap: 2px; }
.msg-icon-btn {
  min-width: 38px; min-height: 38px;
  border: none; border-radius: 50%;
  background: transparent; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color 0.12s, background 0.12s;
}
.msg-icon-btn:hover { color: var(--brand); background: var(--brand-light); }
.msg-icon-btn.recording {
  color: #fff; background: var(--red);
  animation: mic-pulse 1.2s ease-in-out infinite;
}
.msg-emoji-pop {
  position: absolute; bottom: calc(100% + 6px); left: 12px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; z-index: 30;
  width: min(330px, calc(100% - 24px));
}
.msg-emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  max-height: 220px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.msg-emoji-opt {
  border: none; background: none; font-size: 20px;
  min-width: 36px; min-height: 36px; cursor: pointer; border-radius: 8px;
}
.msg-emoji-opt:hover { background: var(--brand-light); }
.msg-emoji-photo {
  border: 1.5px dashed var(--border-dark); border-radius: 10px;
  background: var(--bg); color: var(--brand);
  font-size: 12.5px; font-weight: 800;
  min-height: 36px; cursor: pointer;
}
.msg-emoji-photo:hover { border-color: var(--brand); }
.msg-emoji-matchrow {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 4px; border: 1.5px solid var(--brand);
  border-radius: 10px; background: var(--brand-light);
}

/* Product easy links sheet */
.tr-plink-row { display: flex; align-items: center; gap: 6px; }
.tr-plink-use {
  flex: 1; min-width: 0; text-align: left;
  display: flex; flex-direction: column; gap: 1px;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--bg); padding: 9px 12px;
  cursor: pointer; transition: border-color 0.12s;
}
.tr-plink-use:hover, .tr-plink-use:active { border-color: var(--brand); }
.tr-plink-name { font-size: 14px; font-weight: 800; color: var(--text); }
.tr-plink-url {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-plink-del {
  border: none; background: none; color: var(--text-dim);
  font-size: 15px; min-width: 36px; min-height: 36px; cursor: pointer;
}
.tr-plink-del:hover { color: var(--red); }

/* Clickable links inside chat bubbles */
.chat-link { color: inherit; font-weight: 700; text-underline-offset: 3px; word-break: break-all; }

/* Media bubbles */
.chat-media-img {
  display: block; max-width: 220px; max-height: 260px;
  border-radius: 12px; margin: 2px 0 4px;
  cursor: pointer; object-fit: cover; background: var(--border);
}
.chat-media-audio { display: block; max-width: 230px; margin: 2px 0 4px; }
.chat-media-sticker {
  display: block;
  width: 128px; height: 128px;
  object-fit: cover;
}
/* Sticker-only bubbles lose the bubble chrome — the sticker IS the message */
.chat-bubble--sticker {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.chat-media-file {
  border: none; background: none; padding: 0;
  font-size: 14px; font-weight: 700; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; text-align: left;
}

.msg-new-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 10px 12px 6px; padding: 10px;
  width: calc(100% - 24px);
  border: 1.5px dashed var(--border-dark); border-radius: 12px;
  background: var(--surface); color: var(--brand);
  font-size: 13.5px; font-weight: 800; cursor: pointer;
  transition: border-color 0.12s;
}
.msg-new-btn:hover, .msg-new-btn:active { border-color: var(--brand); }

/* ── Groups section (announce-only broadcasts) ── */
.msg-groups-section { margin: 4px 12px 8px; }
.msg-groups-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 4px 4px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim);
}
.msg-group-new {
  background: none; border: none; color: var(--brand);
  font-size: 12px; font-weight: 800; cursor: pointer; padding: 2px 4px;
}
.msg-groups-empty { font-size: 12px; color: var(--text-dim); padding: 6px 4px 10px; line-height: 1.4; }
.msg-group-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; margin-bottom: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; text-align: left; transition: border-color .12s, box-shadow .12s;
}
.msg-group-row:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.msg-group-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.msg-group-info { display: flex; flex-direction: column; min-width: 0; }
.msg-group-name { font-size: 14px; font-weight: 700; color: var(--text); }
.msg-group-count { font-size: 11.5px; color: var(--text-muted); }

/* ── Group modals (editor + broadcast) ── */
.msg-modal-overlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.msg-modal {
  background: var(--surface); border-radius: 18px; width: 100%; max-width: 440px;
  max-height: 85dvh; overflow-y: auto; padding: 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,.25);
}
.msg-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.msg-modal-head b { font-size: 18px; font-weight: 800; color: var(--text); }
.msg-modal-x { background: none; border: none; font-size: 24px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.msg-modal-sub { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 10px; line-height: 1.4; }
.msg-modal-input, .msg-modal-textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--text);
  background: var(--bg); box-sizing: border-box;
}
.msg-modal-input:focus, .msg-modal-textarea:focus { border-color: var(--brand); outline: none; }
.msg-modal-textarea { resize: vertical; margin-bottom: 12px; }
.msg-members-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 8px;
}
.msg-select-all {
  background: var(--brand-light); border: 1.5px solid var(--brand);
  color: var(--brand-dark); border-radius: 20px;
  padding: 4px 12px; font-size: 12px; font-weight: 800; cursor: pointer;
}
.msg-select-all:active { transform: scale(0.96); }
.msg-member-list {
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 12px; padding: 4px;
  margin-bottom: 16px;
}
.msg-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
.msg-member-row:hover { background: var(--bg); }
.msg-member-row input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.msg-member-name { font-size: 14px; font-weight: 600; color: var(--text); }
.msg-modal-actions { display: flex; gap: 10px; align-items: center; }
.msg-modal-del {
  background: none; border: 1.5px solid var(--red); color: var(--red);
  border-radius: 12px; padding: 11px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.msg-modal-edit-link { text-align: center; margin-top: 12px; }
.msg-modal-edit-link button { background: none; border: none; color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; }

/* ── Coach: System Health dashboard ─────────────────────────── */
.tr-health-wrap { padding: 4px 2px 20px; }
.tr-health-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.tr-health-title { font-size: 18px; font-weight: 800; color: var(--text); }
.tr-health-sub, .tr-health-hdr .tr-health-sub {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
.tr-health-summary {
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
  font-size: 13.5px; font-weight: 700;
}
.tr-health-summary-ok   { background: #e9f9f1; color: #0b7a4f; }
.tr-health-summary-warn { background: #fff4e5; color: #9a5b00; }
.tr-health-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 8px; background: var(--surface);
}
.tr-health-icon { font-weight: 800; font-size: 14px; width: 16px; text-align: center; }
.tr-health-label { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.tr-health-count { font-size: 14px; font-weight: 800; color: var(--text); }
.tr-health-ok  .tr-health-icon { color: #12a45f; }
.tr-health-bad { border-color: var(--red); background: #fff4f4; }
.tr-health-bad .tr-health-icon { color: var(--red); }
.tr-health-note { font-size: 11px; font-weight: 700; color: var(--red); }
/* Warn ≠ broken: a missing-but-not-erroring signal (e.g. nobody has written
   client notes) must not read as a red failure row. */
.tr-health-warn { border-color: var(--yellow); background: var(--yellow-bg); }
.tr-health-warn .tr-health-icon { color: var(--yellow); }
.tr-health-warn .tr-health-note { color: var(--text-muted); font-weight: 700; }
.tr-health-ok .tr-health-note   { color: var(--text-muted); font-weight: 700; }
.tr-health-hint {
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
  margin: -4px 0 10px; padding: 0 13px;
}

/* Fixable-issues panel with one-tap repair */
.tr-health-issues {
  border: 1.5px solid #f0c98a; background: #fffaf1;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.tr-health-issues-hdr {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.4px; color: #9a5b00; margin-bottom: 10px;
}
.tr-health-issue {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-top: 1px solid #f0dfc0;
}
.tr-health-issue:first-of-type { border-top: none; }
.tr-health-issue-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); }
.tr-health-fix-btn {
  flex-shrink: 0; background: var(--brand); color: #fff;
  border: none; border-radius: 8px; padding: 7px 16px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.tr-health-fix-btn:hover { background: var(--brand-dark); }
.tr-health-fix-btn:disabled { opacity: 0.6; cursor: default; }

/* Client logging engagement card (funnel + weekly trend) */
.tr-eng-card {
  border: 1.5px solid var(--brand); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px; background: var(--surface);
}
.tr-eng-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--brand); margin-bottom: 12px;
}
.tr-eng-funnel-row, .tr-eng-week-row {
  display: flex; align-items: center; gap: 10px; padding: 4px 0;
}
.tr-eng-funnel-label { flex: 0 0 120px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.tr-eng-week-label   { flex: 0 0 52px;  font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.tr-eng-funnel-bar, .tr-eng-week-bar {
  flex: 1; height: 8px; background: var(--bg); border-radius: 5px; overflow: hidden;
}
.tr-eng-funnel-fill { height: 100%; background: var(--brand); border-radius: 5px; }
.tr-eng-week-fill   { height: 100%; background: var(--brand); opacity: 0.65; border-radius: 5px; }
.tr-eng-funnel-val { flex: 0 0 74px; font-size: 12.5px; font-weight: 800; color: var(--text); text-align: right; }
.tr-eng-funnel-pct { font-weight: 600; color: var(--text-muted); }
.tr-eng-week-val   { flex: 0 0 118px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-align: right; }
.tr-eng-sub {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted); margin: 12px 0 4px;
}

/* Broadcast rich composer toolbar + attachment preview */
.bc-toolbar { display: flex; align-items: center; gap: 4px; margin: 8px 0 4px; }
.bc-toolbar .msg-icon-btn svg { width: 20px; height: 20px; }
.bc-attach-preview {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--brand-light); border: 1px solid var(--brand);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
  font-size: 13px; font-weight: 600; color: var(--brand-dark);
}
.bc-attach-preview > button {
  background: none; border: none; color: var(--red);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
/* Voice memo playback preview */
.bc-audio-preview { display: flex; align-items: center; gap: 8px; width: 100%; }
.bc-audio-preview audio { flex: 1; height: 36px; }
.bc-audio-preview button {
  flex-shrink: 0; background: none; border: none; color: var(--red);
  font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1;
}
/* Live recording bar with timer + Stop */
.bc-recording {
  display: flex; align-items: center; gap: 10px;
  background: #fff4f4; border: 1.5px solid var(--red);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 10px;
}
.bc-rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--red);
  animation: mic-pulse 1.1s ease-in-out infinite; flex-shrink: 0;
}
.bc-rec-label { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--red); }
.bc-rec-stop {
  background: var(--red); color: #fff; border: none;
  border-radius: 9px; padding: 6px 16px; font-size: 13px; font-weight: 800; cursor: pointer;
}
/* Emoji picker (modal-scoped, in-flow grid) */
.bc-emoji-pop {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; margin: 4px 0 10px; max-height: 160px; overflow-y: auto;
}
.bc-emoji-item {
  border: none; background: none; font-size: 22px;
  min-height: 38px; cursor: pointer; border-radius: 8px;
}
.bc-emoji-item:hover { background: var(--brand-light); }

/* New Message modal (multi-recipient broadcast) */
.tr-newmsg-overlay {
  position: fixed; inset: 0; z-index: 1900;
  background: rgba(0,0,0,0.45);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.tr-newmsg-overlay.open { display: flex; }
.tr-newmsg-modal {
  background: var(--surface);
  border-radius: 18px;
  width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto;
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-md);
}
.tr-newmsg-recips { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-newmsg-chip {
  border: 1.5px solid var(--border-dark); border-radius: 20px;
  background: var(--bg); color: var(--text);
  font-size: 13px; font-weight: 700;
  padding: 7px 14px; min-height: 38px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tr-newmsg-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Insights tab — compliance dots + graphs */
.tr-ins-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.tr-ins-title { font-size: 13px; font-weight: 800; color: var(--text); }
.tr-ins-sub { font-weight: 400; color: var(--text-dim); font-size: 11px; margin-left: 4px; }
.tr-ins-comp-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
}
.tr-ins-dots { display: flex; gap: 6px; }
.tr-ins-dot {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-block;
  background: var(--bg); border: 1.5px solid var(--border);
}
.tr-ins-dot--green   { background: var(--green);  border-color: var(--green); }
.tr-ins-dot--yellow  { background: var(--yellow); border-color: var(--yellow); }
.tr-ins-dot--red     { background: var(--red);    border-color: var(--red); opacity: 0.85; }
.tr-ins-dot--pending { border-color: var(--brand); }

/* Progressions view — per-date sets/targets table */
.tr-prview-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  display: none; flex-direction: column;
}
.tr-prview-overlay.open { display: flex; }
.tr-prview-hdr {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.tr-prog-scroll { flex: 1; overflow: auto; padding: 0 0 24px; }
.tr-prog-table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.tr-prog-table th, .tr-prog-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: top;
  min-width: 230px;
  background: var(--bg);
  text-align: left;
}
.tr-prog-table th {
  font-size: 13px; font-weight: 800; color: var(--text);
  background: var(--surface);
  position: sticky; top: 0; z-index: 2;
}
.tr-prog-sticky {
  position: sticky; left: 0; z-index: 3;
  background: var(--surface) !important;
  min-width: 180px !important; max-width: 220px;
}
th.tr-prog-sticky { z-index: 4; }
.tr-prog-basehdr {
  font-size: 11px; font-weight: 800; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.tr-prog-basedesc { font-size: 12px; color: var(--text-muted); line-height: 1.45; white-space: pre-line; max-height: 90px; overflow-y: auto; }
.tr-prog-exname { font-size: 13px; font-weight: 700; color: var(--text); }
.tr-prog-desc {
  width: 100%; min-width: 200px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px; font-size: 12px;
  background: var(--surface); color: var(--text);
  resize: vertical; outline: none; font-family: inherit;
}
.tr-prog-desc:disabled { opacity: 0.55; }
.tr-prog-cell { display: flex; gap: 5px; align-items: center; }
.tr-prog-f {
  font-size: 13px; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px; background: var(--surface); color: var(--text); outline: none;
  width: 44px; text-align: center;
}
.tr-prog-reps { flex: 1; min-width: 70px; width: auto; text-align: left; }
.tr-prog-f:disabled { opacity: 0.55; }
.tr-prog-f:focus, .tr-prog-desc:focus { border-color: var(--brand); }
.tr-prog-copy {
  border: 1.5px solid var(--border-dark); border-radius: 6px;
  background: var(--surface); color: var(--text-muted);
  font-size: 11px; font-weight: 800; padding: 3px 7px; cursor: pointer;
}
.tr-prog-copy:hover { border-color: var(--brand); color: var(--brand); }

/* Per-workout calendar scheduler (Trainerize Schedule popover) */
.tr-sched-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.tr-sched-dow {
  text-align: center; font-size: 11px; font-weight: 800;
  color: var(--text-dim); padding: 4px 0;
}
.tr-sched-day {
  position: relative;
  min-height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.tr-sched-day.today { border-color: var(--brand); }
.tr-sched-day.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.tr-sched-day.done {
  background: var(--brand); border-color: var(--brand); color: #fff;
  opacity: 0.85; cursor: default;
}
.tr-sched-day.busy { opacity: 0.5; pointer-events: none; }
.tr-sched-check {
  position: absolute; bottom: -2px; right: -2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--surface);
}
.tr-sched-otherdot {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-dim);
}

/* Assigned program: today's workout card (v12) */
.cw-assigned-card {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--brand);
  border-radius: 16px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow);
}
.cw-assigned-card.cw-assigned-done { border-color: var(--green); }
/* Ben, 10/6: "add a note icon on top of every program so either me the
   coach or the user can write something that gets analyzed by the ai" —
   the client half. */
.cw-assigned-note-btn {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cw-assigned-note-btn:hover { color: var(--text); border-color: var(--brand); }
.cw-program-note-sub { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin: 2px 0 8px; }
#cwProgramNoteText {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 8px; font-size: 14px; background: var(--bg); color: var(--text);
  resize: vertical; font-family: inherit;
}
.cw-program-note-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.cw-program-note-acts .sob-chip { margin: 0; }
.cw-assigned-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--brand);
}
.cw-assigned-done .cw-assigned-kicker { color: var(--green); }
.cw-assigned-name { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.25; }
.cw-assigned-meta { font-size: 13px; color: var(--text-muted); }

/* Rest-day actions (Ben, 9/15). The card used to carry a single button, so a
   plain block layout was enough; with three it needs to wrap rather than
   squeeze them off a narrow phone. */
.cw-assigned-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-assigned-actions .sob-chip { margin: 0; }

/* A finished day in the plan browser. Without this a completed session and a
   missed one look identical, which is the one distinction the list exists to
   make. */
.cwpc-swap-row.is-done { opacity: 0.6; }
.cwpc-swap-row.is-done .cwpc-swap-when { color: var(--green); font-weight: 700; }


/* Session header */
.cw-session-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
.cw-session-label { font-size: 16px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cw-sess-back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text); cursor: pointer;
  padding: 6px 8px 6px 0; margin-left: -4px; min-height: 44px; min-width: 36px;
  flex-shrink: 0;
}

#cwReturnBar {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 1400;
  background: var(--brand); color: #fff; border: none; border-radius: 14px;
  padding: 13px 16px; font-size: 14px; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  max-width: 456px; margin: 0 auto;
}
#cwReturnBar[hidden] { display: none; }

.quick-section-label {
  font-size: 12px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-muted);
  margin: 16px 4px 6px;
}
.quick-section-label:first-child { margin-top: 4px; }

/* Cardio sheet — shared shell for full-screen-ish branded bottom sheets */
.cw-sheet-overlay {
  position: fixed; inset: 0; z-index: 1750;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: flex-end; justify-content: center;
}
.cw-sheet-card {
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  width: 100%; max-width: 480px;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  max-height: 92dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cw-sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.cw-sheet-title { font-size: 19px; font-weight: 800; color: var(--text); }
.cw-sheet-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.cw-sheet-x {
  background: none; border: none; color: var(--text-muted);
  font-size: 26px; line-height: 1; cursor: pointer;
  padding: 0 4px; min-height: 44px; min-width: 36px; flex-shrink: 0;
}
.cw-field-label {
  display: block; font-size: 12px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 7px;
}
.cw-field-input {
  width: 100%; box-sizing: border-box;
  padding: 13px 14px; margin-bottom: 18px;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--bg); color: var(--text);
  font-size: 16px; font-family: inherit;
}
.cw-field-input:focus { outline: none; border-color: var(--brand); }
.cw-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cw-time-chip {
  padding: 10px 15px; min-height: 42px;
  border: 1.5px solid var(--border); border-radius: 11px;
  background: var(--bg); color: var(--text);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.cw-time-chip.active {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.cw-rpe-wrap { margin-bottom: 22px; }
.cw-rpe-slider {
  width: 100%; height: 36px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none;
}
.cw-rpe-slider::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(to right, var(--brand) var(--fill, 45%), var(--border) var(--fill, 45%));
}
.cw-rpe-slider::-moz-range-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(to right, var(--brand) var(--fill, 45%), var(--border) var(--fill, 45%));
}
.cw-rpe-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -10px;
  border-radius: 50%; background: var(--brand);
  border: 3px solid var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  cursor: pointer;
}
.cw-rpe-slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--surface); cursor: pointer;
}
/* ── Watch a demo mid-workout ───────────────────────────────
   Ben, 8/25. The thumbnail was decoration; a client wanting to check their
   form had to leave the session. */
.cw-thumb-play {
  position: relative; padding: 0; border: none; cursor: pointer;
  background: var(--bg); overflow: hidden;
}
.cw-thumb-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-thumb-play-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.34); color: #fff; font-size: 13px;
}
.cw-video-overlay {
  position: fixed; inset: 0; z-index: 9800; background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cw-video-card { width: 100%; max-width: 560px; }
/* Ben, 10/7: "i want the preview area to be full screen with the markup
   tool" — the real Fullscreen API (weWireFullscreenToggle), shared by the
   capture preview, the still-photo markup editor, and the video annotator.
   The UA's default fullscreen styling centers an element at its OWN size
   on a black backdrop rather than stretching it — without this the card
   would sit in the middle of a big black screen at the same 560-1400px
   size it already had, which is not what "full screen" asked for. The
   backdrop is also themed here (::backdrop defaults to transparent,
   showing whatever is behind the browser chrome on some platforms) so a
   bright OS desktop never flashes behind the card as it transitions. */
.cw-video-card:fullscreen {
  max-width: none; width: 100vw; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px; box-sizing: border-box; background: #000;
  overflow-y: auto;
}
.cw-video-card:fullscreen::backdrop { background: #000; }
.cw-video-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cw-video-name { flex: 1; color: #fff; font-size: 15px; font-weight: 700; }
.cw-video-head .cw-sheet-x { color: #fff; }
.cw-video-card iframe {
  width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: 12px; background: #000;
}
.cw-video-back {
  width: 100%; margin-top: 12px; font: inherit; font-size: 14.5px; font-weight: 700;
  padding: 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: none; color: #fff;
}
/* Ben, 10/5: Capture is disabled while a clip is recording (one live
   stream, one Save slot — committing to a still frame mid-recording would
   leave it unclear which one actually got attached). */
.cw-video-back:disabled { opacity: .4; cursor: default; }

/* ── Workout celebration ────────────────────────────────────
   Ben, 8/25: "once its logged i want a celebration animation."
   Mirrors the meal-log splash so the app congratulates you the same way
   whatever you just finished. */
.cw-celebrate {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none;      /* never intercept a tap on the buttons beneath */
}
.cw-celebrate-bit {
  position: absolute; top: 42%;
  border-radius: 2px; opacity: 0;
  animation: cwCelebrate 1.25s ease-out forwards;
}
@keyframes cwCelebrate {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.6); }
  12%  { opacity: 1; transform: translate(0, 0) rotate(20deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--drift), -150px) rotate(300deg) scale(.9); }
}
/* The tick is the moment — it lands just after the confetti launches. */
.cw-summary-check { animation: cwCheckPop .45s cubic-bezier(.34,1.56,.64,1) .1s both; }
@keyframes cwCheckPop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.cw-summary-title { animation: cwRise .4s ease-out .22s both; }
.cw-summary-stats { animation: cwRise .4s ease-out .32s both; }
@keyframes cwRise {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-celebrate { display: none; }
  .cw-summary-check, .cw-summary-title, .cw-summary-stats { animation: none; }
}

/* Ben, 8/25: "when you select rpe its very jumbled... everything is
   overlapped". The readout was styled by ID — #cwCardioRpeNum — so the SESSION
   sheet, which uses #cwSessRpeNum, inherited nothing at all and the number and
   word collapsed on top of each other. Shared classes, so the two sheets
   cannot drift again. */
.cw-rpe-read {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 10px; min-height: 34px;
}
.cw-rpe-num {
  font-size: 30px; font-weight: 800; color: var(--brand); line-height: 1;
  font-variant-numeric: tabular-nums; min-width: 40px; flex: 0 0 auto;
}
.cw-rpe-word {
  font-size: 14.5px; font-weight: 700; color: var(--text-muted);
  line-height: 1.3; min-width: 0;
}
/* Anchors for the scale — a bare 1-10 means nothing without ends. */
.cw-rpe-scale {
  display: flex; justify-content: space-between; margin-top: 2px;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
}

/* Kept so any markup still using the old IDs is not left unstyled. */
#cwCardioRpeNum { font-size: 30px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; min-width: 40px; }
#cwCardioRpeWord { font-size: 14.5px; font-weight: 700; color: var(--text-muted); }
.cw-sheet-cta { width: 100%; padding: 15px; font-size: 16px; font-weight: 800; }

/* Skipping the session-RPE prompt must be obviously available — a rating is
   never worth making someone feel their workout is being held hostage. */
/* ── Last time you did this ─────────────────────────────────
   Above the sets, because it is read BEFORE the first rep — the client is
   deciding what to load, and that happens before they touch a set row. */
.cw-last-time {
  background: var(--brand-light); border: 1px solid var(--brand-mid);
  border-radius: 10px; padding: 9px 11px; margin: 0 0 10px;
}
.cw-lt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cw-lt-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand-dark);
}
.cw-lt-pb { font-size: 11px; font-weight: 700; color: var(--brand-dark); opacity: .75; }
.cw-lt-sets { font-size: 16px; font-weight: 800; color: var(--text); margin-top: 3px; }
/* The client's own words from last session. Full text, never truncated —
   "left knee twinged, drop to 155" is useless cut in half. */
.cw-lt-note {
  font-size: 13px; color: var(--text); line-height: 1.45; margin-top: 6px;
  padding-left: 9px; border-left: 2px solid var(--brand);
  font-style: italic;
}
.cw-lt-use {
  margin-top: 8px; width: 100%; font: inherit; font-size: 13px; font-weight: 700;
  padding: 8px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--brand); background: var(--surface); color: var(--brand-dark);
}

/* ── "Anything you want to focus on?" ───────────────────────── */
.cw-focus-ask {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.cw-focus-card {
  background: var(--surface); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px;
  padding: 20px 18px calc(84px + env(safe-area-inset-bottom));
}
.cw-focus-title { font-size: 18px; font-weight: 800; color: var(--text); }
.cw-focus-sub { font-size: 13px; color: var(--text-muted); margin: 3px 0 14px; line-height: 1.4; }
.cw-focus-input {
  width: 100%; font-size: 17px;   /* 16px+ or iOS zooms the page on focus */
  padding: 13px 14px; border: 1px solid var(--border-dark); border-radius: 12px;
  background: var(--surface); color: var(--text);
}
.cw-focus-input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light);
}
/* Standing needs — a chronic complaint should not be re-typed every day. */
.cw-focus-standing { margin-top: 12px; }
.cw-focus-standing-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin-bottom: 6px;
}
.cw-focus-chip {
  display: inline-block; font-size: 12.5px; font-weight: 650; cursor: pointer;
  padding: 6px 11px; margin: 0 6px 6px 0; border-radius: 999px;
  background: var(--brand-light); color: var(--brand-dark);
}
.cw-focus-keep {
  display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 4px;
  font-size: 13px; color: var(--text); line-height: 1.4; cursor: pointer;
}
.cw-focus-keep input { width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.cw-focus-go { width: 100%; padding: 14px; font-size: 15px; font-weight: 800; margin-top: 12px; }
.cw-focus-skip {
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 11px 0 2px;
}

/* ── Camera or photo library, before a scan ────────────────── */
.cw-equip-pick {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.cw-equip-pick-card {
  background: var(--surface); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px;
  padding: 18px 18px calc(84px + env(safe-area-inset-bottom));  /* clears the tab nav */
  display: flex; flex-direction: column; gap: 10px;
}
.cw-equip-pick-title {
  font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 4px;
}
.cw-equip-pick-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  padding: 15px 16px; border-radius: 12px; text-align: left;
  border: 1px solid var(--border-dark); background: var(--surface); color: var(--text);
}
.cw-equip-pick-btn svg { width: 21px; height: 21px; color: var(--brand); flex-shrink: 0; }
.cw-equip-pick-btn:active { background: var(--brand-light); border-color: var(--brand); }
.cw-equip-pick-cancel {
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px; font-weight: 600; padding: 10px 0 2px;
}

/* ── Coach: client schedule ─────────────────────────────────
   Same calendar module as the client's own view, but coach-shaped. RED IS
   ALLOWED HERE and deliberately absent there: a wall of missed days is how a
   client quits, and noticing who slipped is the coach's entire job. */
.tr-sched-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tr-sched-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-dim); flex: 1;
}
.tr-sched-missed {
  font-size: 11px; font-weight: 800; color: var(--red);
  background: var(--red-bg); border-radius: 999px; padding: 3px 9px;
  /* Ben, 10/8: "can it pull up which ones were missed?" — this is now a real
     <button>, not decorative text; reset default button chrome so it still
     reads as the same small pill it always was. */
  border: 0; font-family: inherit; cursor: pointer;
}
.tr-sched-missed:active { opacity: .75; }
.tr-sched-missed-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; margin: 4px 0 14px; }
.tr-sched-missed-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--red-bg); border: 1px solid var(--red); border-radius: 10px;
  padding: 10px 12px; color: var(--text);
}
.tr-sched-missed-row:active { opacity: .8; }
.tr-sched-missed-date { font-size: 12.5px; font-weight: 800; color: var(--red); flex-shrink: 0; }
.tr-sched-missed-name { font-size: 12.5px; color: var(--text-muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-sched-empty {
  font-size: 13px; color: var(--text-muted); line-height: 1.5;
  background: var(--bg); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.tr-sched-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 10px; }
.tr-sched-day {
  font: inherit; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; gap: 1px; min-height: 66px;
  padding: 6px 3px; border-radius: 9px;
  border: 1.5px solid var(--border); background: var(--surface);
}
.tr-sched-dow { font-size: 9.5px; font-weight: 700; color: var(--text-muted); }
.tr-sched-num { font-size: 14px; font-weight: 800; color: var(--text); }
.tr-sched-name {
  font-size: 8.5px; color: var(--text-muted); line-height: 1.15;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tr-sched-day--done      { background: var(--brand-light); border-color: var(--brand-mid); }
.tr-sched-day--scheduled { border-color: var(--brand-mid); }
/* Ben, 10/8: "i see 1 missed but have no clue which one was missed or if its
   actually working" — reproduced: #fef2f2/#fca5a5 are light-mode-only hex,
   unlike every sibling state here (--done/--scheduled both already use real
   theme tokens). In dark mode this painted a near-invisible patch instead of
   the deliberately loud red the comment above this block calls for ("RED IS
   ALLOWED HERE... noticing who slipped is the coach's entire job"). --red-bg
   is already dark-aware (a dark red-tinted surface in dark mode, not a pale
   pink one), same token the "N missed" pill above already correctly uses. */
.tr-sched-day--missed    { background: var(--red-bg); border-color: var(--red); }
.tr-sched-day.is-today   { border-color: var(--brand); border-width: 2px; }

.tr-sched-later { margin-bottom: 8px; }
.tr-sched-later-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.tr-sched-later-wk { font-size: 11.5px; font-weight: 700; color: var(--text); width: 52px; }
.tr-sched-later-dots { display: flex; gap: 4px; flex: 1; }
.tr-sched-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.tr-sched-dot--done { background: var(--brand); }
.tr-sched-dot--scheduled { background: var(--border-dark); }
.tr-sched-dot--missed { background: #ef4444; }
/* Ben, 10/8: a missed day is now a real <button> (was a bare <span>) so it
   can be tapped and tell you which date it is — reset default button chrome,
   and give it a bigger invisible hit area than its own 7px so it is still
   usable on a phone, without visually growing the dot (which would blow out
   the tight 4px gap between seven of them in a row). */
button.tr-sched-dot--missed {
  border: 0; padding: 7px; margin: -7px; background-clip: content-box;
  cursor: pointer; appearance: none;
}
button.tr-sched-dot--missed:active { opacity: .7; }
.tr-sched-later-n { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tr-sched-hint { font-size: 11px; color: var(--text-dim); margin-bottom: 14px; }

/* ── Chat: attachments and receipts ─────────────────────────
   Ben, 8/25. Clients could already RECEIVE photos, voice notes and files but
   had no way to send one, and the coach's read timestamp was written and never
   displayed. */
.chat-attach-btn {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  touch-action: none;        /* holding the mic must not scroll the page */
}
.chat-attach-btn svg { width: 19px; height: 19px; }
.chat-attach-btn:active { background: var(--brand-light); color: var(--brand-dark); }
/* Recording is a held state — it has to be unmistakable, because letting go
   sends. */
.chat-attach-btn.recording {
  background: var(--brand); border-color: var(--brand); color: #fff;
  animation: chatRecPulse 1.1s ease-in-out infinite;
}
@keyframes chatRecPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,180,156,.5); }
  50%      { box-shadow: 0 0 0 7px rgba(0,180,156,0); }
}
.chat-bubble-receipt {
  font-size: 10.5px; color: var(--text-dim); align-self: flex-end;
  margin-top: 1px; letter-spacing: .02em;
}
@media (prefers-reduced-motion: reduce) {
  .chat-attach-btn.recording { animation: none; }
}

/* ── YouTube suggestions in the library ─────────────────────
   Ben, 8/25: "I typed in multifidus lift. I don't have that exercise... on the
   bottom it says YouTube suggestions, and I can scroll through until I find
   the exercise I want." Quick Add picked ONE video, which is wrong the moment
   it picks badly and leaves no way to choose differently. */
.tr-libyt { margin-top: 14px; }
.tr-libyt-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.tr-libyt-label {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}
.tr-libyt-note { font-size: 11.5px; color: var(--text-dim); }
/* Horizontal scroll: a row of thumbnails is scanned far faster than a stack,
   and it keeps the library list visible above. */
.tr-libyt-row {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.tr-libyt-row::-webkit-scrollbar { display: none; }
.tr-libyt-card {
  flex: 0 0 148px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px;
  font: inherit; text-align: left; cursor: pointer; padding: 0;
  background: none; border: none;
}
.tr-libyt-thumb {
  width: 148px; height: 84px; object-fit: cover; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--border);
}
.tr-libyt-card:hover .tr-libyt-thumb { border-color: var(--brand); }
.tr-libyt-title {
  font-size: 11.5px; line-height: 1.32; color: var(--text); font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Day picker: what goes on this day ──────────────────────
   Ben, 8/25. Day first, then what — a coach thinks "what is Clark doing
   Tuesday", not "which workout needs dates". */
.tr-dp-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin: 14px 0 6px;
}
.tr-dp-list { display: flex; flex-direction: column; gap: 6px; }
.tr-dp-item {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  font: inherit; cursor: pointer;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
}
.tr-dp-item:hover { border-color: var(--brand); background: var(--brand-light); }
.tr-dp-name { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--text); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-dp-sub { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.tr-dp-empty { font-size: 13px; color: var(--text-muted); padding: 10px 0; }
.tr-dp-repeat {
  display: flex; align-items: center; gap: 9px; margin: 16px 0 4px;
  font-size: 13.5px; color: var(--text); cursor: pointer;
}
.tr-dp-repeat input { width: 18px; height: 18px; accent-color: var(--brand); }
.tr-dp-repeat select {
  font: inherit; font-size: 13.5px; padding: 4px 8px; border-radius: 7px;
  border: 1px solid var(--border-dark); background: var(--surface); color: var(--text);
}

/* Programming inside the schedule — edits land on THIS day only. */
.tr-sched-overlay {
  position: fixed; inset: 0; z-index: 9700; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.tr-sched-sheet {
  background: var(--surface); border-radius: 18px 18px 0 0;
  width: 100%; max-width: 520px; max-height: 90dvh; overflow-y: auto;
  padding: 18px 18px calc(28px + env(safe-area-inset-bottom));
}
.tr-sched-sheet-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.tr-sched-sheet-date { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.tr-sched-sheet-name { font-size: 18px; font-weight: 800; color: var(--text); }
.tr-sched-done {
  font-size: 12.5px; color: #a8563c; background: #fef3e2;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 12px;
}
/* Ben, 10/8: "i need to see exactly what was logged on the card not just see
   what was logged in a sentence above" — the real sets/reps/weight, right in
   this popup, read-only (no inputs — correcting a number is still "Edit this
   day" below, which opens the live editor). Scrolls on its own inside the
   already-scrolling sheet so a 12-exercise session does not push the action
   buttons off screen. */
.tr-mc-logsum {
  max-height: 38vh; overflow-y: auto; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: 10px; padding: 2px 12px;
}
.tr-mc-logsum-ex { padding: 9px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.tr-mc-logsum-ex:last-child { border-bottom: none; }
.tr-mc-logsum-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.tr-mc-logsum-sets { font-size: 12.5px; color: var(--text-muted); }
.tr-mc-logsum-note { font-size: 12.5px; color: var(--text); font-style: italic; margin-top: 2px; }
.tr-mc-logsum-empty { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; }
.tr-sched-ex { padding: 10px 0; border-bottom: 1px solid var(--border); }
.tr-sched-ex:last-child { border-bottom: none; }
.tr-sched-ex-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tr-sched-ex-fields { display: flex; gap: 8px; }
.tr-sched-ex-fields label {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
  font-size: 10.5px; font-weight: 700; color: var(--text-muted);
}
.tr-sched-ex-fields input {
  font-size: 16px;   /* 16px+ or iOS zooms on focus */
  padding: 8px 10px; border: 1px solid var(--border-dark); border-radius: 8px;
  background: var(--surface); color: var(--text); width: 100%;
}
.tr-sched-note {
  display: flex; flex-direction: column; gap: 4px; margin: 14px 0 4px;
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
}
.tr-sched-note textarea {
  font-size: 15px; padding: 9px 11px; border: 1px solid var(--border-dark);
  border-radius: 10px; background: var(--surface); color: var(--text); font-family: inherit;
}
.tr-sched-save { width: 100%; padding: 13px; font-size: 15px; font-weight: 800; margin-top: 12px; }
.tr-sched-cancel {
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 10px 0 2px;
}

/* ── Program calendar — what is coming ─────────────────────
   Ben, 8/25. Forward-looking, this week big and the rest compact.
   DELIBERATELY NO RED: a missed day is styled exactly like a rest day. A
   calendar is the one screen that can show someone a month of failures at
   once, and a client opening it after a hard fortnight must not meet a wall. */
.cw-plan-cal { margin: 0 0 14px; }

/* Ben, 9/19: "give me the ability to go forward and backward" — this is the
   only nav on the calendar now that the separate month view is gone, so it
   sits above everything else, not tucked below the week. */
.cwpc-weeknav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.cwpc-weeknav-btn {
  min-width: 40px; min-height: 40px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: 18px; font: inherit; cursor: pointer;
}
.cwpc-weeknav-btn:disabled { opacity: .35; cursor: not-allowed; }
.cwpc-weeknav-btn:not(:disabled):hover { border-color: var(--brand); color: var(--brand); }
.cwpc-weeknav-label {
  font-size: 12.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}

.cwpc-today {
  background: var(--brand); color: #fff;
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
}
.cwpc-today--rest { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
/* Browsing any week but this one: neutral, not the brand-filled "today"
   treatment — there is no live decision to make on a past or distant week,
   just a date range to orient by. */
.cwpc-today--browse { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); }
.cwpc-today--browse .cwpc-today-label { color: var(--text-muted); }
.cwpc-today-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; opacity: .85;
}
.cwpc-today-name { font-size: 19px; font-weight: 800; margin-top: 2px; }
.cwpc-today-sub { font-size: 13.5px; margin-top: 3px; color: var(--text-muted); }
/* Ben, 9/20: no workout name here any more — #cwAssignedCard above already
   carries it. This head is now just the two actions that card does not
   already offer, side by side. */
.cwpc-today-actions { display: flex; gap: 8px; }
.cwpc-start {
  flex: 1; font: inherit; font-size: 14.5px; font-weight: 800;
  padding: 11px; border-radius: 10px; cursor: pointer;
  border: none; background: #fff; color: var(--brand-dark);
}
/* Ben, 10/3: "ive done all my workouts this week but id love to add a
   button for what should i do if ive already done everything but want to
   weorkout" — shown only once nothing is left scheduled this week but at
   least one real session was logged, so it reads as a reward for finishing,
   not competition with Start Workout (the two never render together). */
.cwpc-bonus {
  flex: 1; font: inherit; font-size: 14.5px; font-weight: 800;
  padding: 11px; border-radius: 10px; cursor: pointer;
  /* Was white-on-white (styled for a teal header that no longer exists). */
  border: 1.5px solid var(--brand); background: var(--brand); color: #fff;
}
.cwpc-bonus:disabled { opacity: .6; cursor: default; }

.cwpc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 10px; }
.cwpc-day {
  /* Ben, 9/13: "the selector isnt dialed in". Measured: these were ~54px tall
     with 5px gaps, against 66px on the coach strip where his taps land fine
     and a 44px platform minimum. Matched to the coach cell so the two screens
     behave the same, which is the comparison he keeps making. */
  min-height: 66px;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  border-radius: 10px; padding: 7px 2px 8px; text-align: center;
  border: 1.5px solid var(--border); background: var(--surface);
  /* A <button>, matching the coach schedule strip. Ben, 9/13: "why cant i make
     it work the same as it does on coach mode?" — the coach cells were buttons
     all along and his taps worked there; these were divs and did not. */
  font: inherit; color: inherit; cursor: pointer;
  /* NOT display:block — it sat below the flex rule above and silently won,
     collapsing the centring. width only. */
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* touch-action was `none`, which tells the browser this element handles its
     own gestures — and suppresses the synthetic click entirely. A tap then had
     nowhere to go, however many listeners were attached. `pan-y` keeps the
     page scrollable while still letting a horizontal drag move a workout. */
  touch-action: pan-y;
}
.cwpc-day:active { transform: scale(0.97); }
/* A dragging day takes over gestures for as long as the drag lasts. */
.cwpc-day.cwpc-dragging { touch-action: none; }
.cwpc-day-top { font-size: 10px; font-weight: 700; color: var(--text-muted); }
.cwpc-day-num { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.2; }
/* Ben, 10/3: "this week doesnt have check marks next to the days that were
   done that looks better" — a done day now renders a real checkmark SVG
   (see client-workout.js) instead of relying on the dot's color alone to
   say "finished" vs. "coming up". A SCHEDULED day has no icon — it stays
   the plain dot it always was, sized/positioned the same way so the icon
   does not shift the day cell's layout when it appears. */
.cwpc-day-mark {
  height: 14px; min-width: 5px; margin: 4px auto 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.cwpc-day-mark svg { width: 9px; height: 9px; }
/* Done and scheduled are the only two states that get a mark. Rest — which is
   also what a missed day looks like — gets nothing at all.
   Ben, 9/19: "use different colors to show up coming planned workouts and
   previous ones a different colors" — done and scheduled used to be two
   SHADES of the same brand teal (a light fill vs. a mid border), which read
   as "more of the same thing, slightly stronger" rather than two distinct
   states. Scheduled now takes --sport (purple), already the app's other
   accent (superset brackets use the same color) — done keeps brand teal. */
.cwpc-day--done .cwpc-day-mark {
  width: 14px; border-radius: 50%; background: var(--brand);
}
.cwpc-day--scheduled .cwpc-day-mark {
  width: 5px; height: 5px; border-radius: 50%; background: var(--sport);
}
.cwpc-day--scheduled { border-color: var(--sport); background: var(--sport-light); cursor: grab; }
.cwpc-day--done { background: var(--brand-light); border-color: var(--brand-mid); }
.cwpc-day.is-today { border-color: var(--brand); border-width: 2px; }
/* .cwpc-day.cwpc-over is defined once, with the drop label, further down.
   It was declared twice ~6,600 lines apart; the later rule won in the cascade
   so nothing was broken, but reading either one alone told you the wrong
   story. (Found 9/16 by a test that matched the first definition.) */
.cwpc-day.cwpc-dragging { opacity: .5; }

.cwpc-row {
  /* flex-start, not center: the name wraps to two or three lines now, and
     centring would float the day label and the grip in the middle of a tall
     row, away from the first line of the text they label. Stated here rather
     than left to align-self overrides three rules below. */
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
/* The day label must not shrink or wrap — it is three characters and it
   anchors the row. flex-none because a wrapping name would otherwise squeeze
   it. */
.cwpc-row-day { font-size: 11px; font-weight: 800; color: var(--text-muted);
  width: 28px; flex: none; padding-top: 2px; }

/* Ben, 9/15: "in the workout it says some of the exercise name i need to be
   able to see the entire thing."
   This row was the ONLY place a workout name was clamped to one line —
   white-space:nowrap with an ellipsis. Everywhere else in the app already
   wraps, including the assigned card directly above it, which is why the same
   name reads in full there and cut off here.
   His names carry real information ("WED – LUNGE/SINGLE-LEG FOCUS (Hip
   Flexibility & Core Strength)"), so the half after the ellipsis is the half
   that says what the session actually is. The row grows instead. */
.cwpc-row-name { flex: 1; font-size: 14px; font-weight: 650; color: var(--text); min-width: 0;
  overflow-wrap: anywhere; line-height: 1.35; }

/* Stays put at the top of a row that is now several lines tall, rather than
   floating in the vertical middle away from the text it belongs to. */
.cwpc-row-grip { color: var(--text-dim); font-size: 15px; flex: none; padding-top: 1px; }

.cwpc-later { margin-top: 12px; }
/* ── Schedule control (Ben, 9/10) ──────────────────────────────
   "i dont have the ability to move days around or do certain days on the
   plan". A flexible client gets real week grids for the whole block instead of
   a dot summary, plus a way to pull another session onto today. */
.cwpc-later-wk-full { margin-bottom: 12px; }
.cwpc-later-wk-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.cwpc-swap {
  /* Rest-day only since 10/8 (on a training day it lives in the Today
     card). Outlined in brand so it reads as a button, not a blank box. */
  display: block;
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.cwpc-swap:active { background: var(--surface2); }
.cwpc-swap-card { max-width: 460px; }
.cwpc-swap-note {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.cwpc-swap-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
}
.cwpc-swap-row {
  display: flex;
  /* flex-start for the same reason as .cwpc-row: the name wraps now, and
     centring would float the Done/Today/date tag in the middle of a tall row
     instead of beside the first line of the name. */
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.cwpc-swap-row:active { background: var(--brand-light); border-color: var(--brand); }
/* Same clamp as .cwpc-row-name carried, and the same reason to drop it: these
   rows are how a workout is CHOSEN, in "Do a different one" and in the plan
   browser. Picking between three days all reading "WED – LUNGE/SINGLE-LEG
   FOC…" is picking blind.
   Found by the test written for the row Ben reported, not by eye — the first
   read of this rule stopped short of the clamp. */
.cwpc-swap-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.cwpc-swap-when {
  flex: none;
  padding-top: 1px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
}

/* ── Ask the coach (Ben, 9/10) ─────────────────────────────────
   "a spot in the workout card that says ask the coach ... my ankle hurts then
   it will ask a few more questions and create a plan the client can use." */
.cw-ask-card {
  /* Ben, 10/3: this used to be its own horizontal margin ON TOP of the
     automatic .tab-content > * gutter padding every sibling already gets —
     a double indent that stayed hidden while this card sat mid-screen below
     #cwSessionArea, and became visible once the workout-tab redesign put it
     inline with cards that don't have the same bug. margin-bottom only now. */
  margin: 0 0 10px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.cw-ask-head { margin-bottom: 9px; }
.cw-ask-title { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.cw-ask-sub { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.cw-ask-row { display: flex; gap: 8px; }
.cw-ask-input {
  flex: 1; min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text);
  /* 16px or iOS zooms the whole page on focus, mid-gym, one-handed. */
  font-size: 16px;
  font-family: inherit;
}
.cw-ask-btn {
  flex: none;
  padding: 11px 18px;
  border: 0; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 800; font-family: inherit;
  cursor: pointer;
}
.cw-ask-btn:disabled { opacity: .6; }
/* One question at a time — a wall of three is how a phone form gets abandoned. */
.cw-ask-step {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); margin: -4px 0 8px;
}
.cw-ask-sheet { max-width: 460px; }
.cw-ask-summary { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text); }
.cw-ask-block { margin-bottom: 12px; }
.cw-ask-block-label {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.cw-ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-ask-chip {
  padding: 3px 9px; border-radius: 20px;
  background: var(--red-bg); color: var(--red);
  border: 1px solid #e74c3c33;
  font-size: 12px; font-weight: 700;
}
.cw-ask-swap {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.cw-ask-swap:last-child { border-bottom: 0; }
.cw-ask-from { font-size: 13px; color: var(--text-muted); text-decoration: line-through; }
.cw-ask-arrow { color: var(--text-dim); }
.cw-ask-to { font-size: 13.5px; font-weight: 800; color: var(--brand-on-light); }
.cw-ask-why { flex-basis: 100%; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.cw-ask-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-dim); }

.cwpc-later-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin-bottom: 7px;
}
.cwpc-later-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid var(--border);
}
.cwpc-later-row:last-child { border-bottom: none; }
.cwpc-later-wk { font-size: 12px; font-weight: 700; color: var(--text); width: 54px; }
.cwpc-later-dots { display: flex; gap: 4px; flex: 1; }
.cwpc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.cwpc-dot--done { background: var(--brand); }
.cwpc-dot--scheduled { background: var(--border-dark); }
.cwpc-later-n { font-size: 11.5px; color: var(--text-muted); }

.cwpc-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; text-align: center; }

/* ── Equipment scanning — Rex, not a silent toast ───────────
   z-index clears the session overlay (9000-range): the client scans a machine
   MID-SESSION, which is exactly when the build-area spinner is hidden behind
   it and only a 2.4s toast was showing for a 5-15s call. */
.cw-equip-scanning {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cw-equip-scanning-card {
  background: var(--surface); border-radius: 18px;
  padding: 26px 22px 22px; text-align: center;
  width: 100%; max-width: 300px;
}
.cw-equip-rex { width: 110px; margin: 0 auto 10px; }
.cw-equip-rex .rex-mascot { width: 100%; height: auto; }
.cw-equip-scanning-title {
  font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 4px;
}
.cw-equip-scanning-line {
  font-size: 13.5px; color: var(--text-muted); min-height: 19px;
  transition: opacity .2s;
}

/* ── Eat Out: whole-menu pick ───────────────────────────────── */
.eo-mode { display: flex; gap: 8px; margin: 12px 0 4px; }
.eo-mode-btn {
  flex: 1; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 10px 8px; border-radius: 10px;
  border: 1px solid var(--border-dark); background: var(--surface); color: var(--text-muted);
}
.eo-mode-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* The pick is the answer, so it carries the visual weight — everything else on
   the screen is context for it. */
.eo-best { border: 2px solid var(--brand); }
.eo-best-flag {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: #fff; background: var(--brand);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 8px;
}
.eo-dish { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.eo-dish-sm { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.eo-macros { font-size: 13px; font-weight: 700; color: var(--brand-dark); margin-bottom: 8px; }
.eo-order-it { font-size: 13px; color: var(--text); margin-top: 8px; line-height: 1.45; }
.eo-section-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 8px;
}
.eo-restaurant { font-size: 13px; font-weight: 700; color: var(--text-muted); margin: 10px 0 6px; }
.eo-runner { padding: 8px 0; border-bottom: 1px solid var(--border); }
.eo-runner:last-child { border-bottom: none; }
.eo-runner-dish { font-size: 14.5px; font-weight: 650; color: var(--text); }
.eo-runner-macros { font-size: 12.5px; color: var(--text-muted); margin-left: 6px; }
.eo-runner-why { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
/* Muted rather than alarming — this is guidance, not a warning. */
.eo-avoid { opacity: .82; }
.eo-note { font-size: 13px; color: var(--text-muted); margin: 10px var(--gutter); line-height: 1.45; }
.eo-disclaimer { font-size: 11.5px; color: var(--text-muted); margin: 8px var(--gutter) 0; line-height: 1.4; }

/* ── Meals held for a better connection ─────────────────────
   Reassurance, not an error: the photo is safe and nothing is lost. Brand
   colours rather than red — this is a normal state on a bad connection. */
.pending-meals {
  margin: 0 var(--gutter) 12px;
  padding: 12px 14px;
  background: var(--brand-light); border: 1px solid var(--brand-mid);
  border-radius: 12px;
}
.pending-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pending-count { font-size: 14px; font-weight: 750; color: var(--brand-dark); }
.pending-retry {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--brand); background: var(--surface); color: var(--brand-dark);
}
.pending-note { font-size: 12px; color: var(--brand-dark); opacity: .8; margin-top: 4px; line-height: 1.4; }

/* ── Type-ahead from logged foods ───────────────────────────
   Anchored to the input row, which is position:relative, so the list floats
   over the content below rather than pushing the camera hero down. */
.food-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  margin-top: 6px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(16,40,36,.14);
  max-height: 46vh; overflow-y: auto;
}
.food-suggest-item {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; background: none; border: none;
  padding: 10px 12px; border-radius: 9px;
}
.food-suggest-item:hover, .food-suggest-item:focus-visible {
  background: var(--brand-light); outline: none;
}
.fs-name { font-size: 15px; font-weight: 650; color: var(--text); }
.fs-sub  { font-size: 12px; color: var(--text-muted); }

/* ── Reminder settings ────────────────────────────────────── */
.notif-settings {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border);
}
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notif-title { font-size: 17px; font-weight: 800; color: var(--text); margin: 0; }
.notif-all {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--brand-dark); cursor: pointer;
}
.notif-all input { width: 18px; height: 18px; accent-color: var(--brand); }
.notif-tz { font-size: 12px; color: var(--text-muted); margin: 6px 0 14px; }

.notif-row {
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.notif-row:last-child { border-bottom: none; }
.notif-row-top { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.notif-toggle { width: 20px; height: 20px; accent-color: var(--brand); flex: 0 0 auto; }
.notif-label { font-size: 15px; font-weight: 650; color: var(--text); }
.notif-help {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.4; margin: 3px 0 0 30px;
}
/* A switched-off row fades but stays readable — turning it back on must not
   feel like hunting for something that disappeared. */
.notif-row.off .notif-label, .notif-row.off .notif-help { opacity: .55; }

.notif-slots { display: flex; gap: 6px; margin: 10px 0 0 30px; }
.notif-slot {
  flex: 1; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  padding: 8px 6px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.notif-slot.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.notif-slot-hr { font-size: 10.5px; font-weight: 600; opacity: .8; }

/* ── What Now — what to eat with the macros left ──────────── */
.btn-whatnow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 0 0 12px; padding: 14px;
  background: var(--brand); color: #fff; border: none; border-radius: 14px;
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.btn-whatnow svg { width: 18px; height: 18px; flex-shrink: 0; }

/* `.modal-card` is not a real class anywhere in this file — each modal defines
   its own box (see .weekly-modal-card). Reusing the name gave this sheet no
   width, no radius and no height cap, so it opened as a cut-off slab with the
   title wrapping and the footer button below the fold. */
.whatnow-card {
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  width: 100%; max-width: 480px;
  /* Ben, 8/23: "should be easier to scroll". Was max-height only, so a short
     result sat as a small sheet and a long one had a cramped scroll window.
     A fixed 88dvh gives the same generous, predictable area every time. */
  height: 88dvh;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
  animation: slideUp .25s ease;
}
/* The header stays put while the suggestions scroll under it. */
.whatnow-card .modal-header {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 18px 12px;
}
.whatnow-card .modal-title {
  font-size: 18px; font-weight: 800; color: var(--text);
  white-space: nowrap;          /* "What should I eat?" was wrapping to two lines */
}
.whatnow-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 0 18px calc(84px + env(safe-area-inset-bottom));  /* clears the fixed tab nav */
  /* Without this, scrolling past the end of the list drags the page BEHIND the
     sheet — the list appears to stick while the background moves. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
/* A grab handle: the affordance that says "this sheet scrolls and drags". */
.whatnow-card .modal-header::before {
  content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 2px; background: var(--border-dark);
}
.whatnow-card .modal-header { position: relative; padding-top: 20px; }
.whatnow-left {
  font-size: 13px; color: var(--text-muted);
  padding: 10px 12px; background: var(--bg); border-radius: 10px; margin-bottom: 12px;
}
.whatnow-left-cal { font-size: 20px; font-weight: 800; color: var(--text); }
.whatnow-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.4; }

.pantry-group { margin-bottom: 14px; }
.pantry-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 7px;
}
.pantry-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pantry-chip {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  transition: background .12s, color .12s, border-color .12s;
}
.pantry-chip.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
/* A dotted edge marks an item the client added themselves — the only ones a
   long-press can remove, so the affordance has to be visible. */
.pantry-chip.mine { border-style: dashed; }
.pantry-add {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 7px 12px; border-radius: 999px;
  border: 1px dashed var(--border-dark); background: none; color: var(--text-muted);
}
.pantry-add:hover { border-color: var(--brand); color: var(--brand-dark); }

.whatnow-go { width: 100%; padding: 14px; font-size: 15px; font-weight: 800; margin-top: 6px; }
/* ── Menu scan (Ben, 9/10) ─────────────────────────────────────
   "a spot on the what should i eat where i can take a picture of a restaurant
   menu and it tells me what to order to close the gap." */
.whatnow-menu {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px;
  border: 1px dashed var(--brand);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--brand-on-light);
  font-size: 13.5px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.whatnow-menu:active { background: var(--brand-light); }

.menu-picks { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.menu-pick {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.menu-pick-name { font-size: 14.5px; font-weight: 800; color: var(--text); }
.menu-pick-why  { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }
.menu-pick-macros {
  margin-top: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--brand-on-light);
  font-variant-numeric: tabular-nums;
}
.menu-total {
  margin: 4px 0 10px;
  font-size: 13px; line-height: 1.5; color: var(--text);
}
.menu-avoid {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--red-bg);
  border: 1px solid #e74c3c33;
}
.menu-avoid-label {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--red); margin-bottom: 5px;
}
.menu-avoid-row { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 3px 0; }
.menu-avoid-name { font-size: 13px; font-weight: 700; color: var(--text); }
.menu-avoid-why  { font-size: 12px; color: var(--text-muted); }
/* Restaurants do not publish most of their numbers. Saying so is the honest
   framing, and it is the same 35-40% error floor the food log lives with. */
.menu-caveat {
  margin: 8px 0 0;
  font-size: 11.5px; line-height: 1.45; color: var(--text-dim);
}

.whatnow-skip {
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 12px 0 2px;
}
.whatnow-loading { padding: 28px 0; text-align: center; color: var(--text-muted); font-size: 14px; }

.whatnow-card-item {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; margin-bottom: 10px; background: var(--surface);
}
.whatnow-name { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.whatnow-macros { font-size: 13px; color: var(--brand-dark); font-weight: 700; margin-bottom: 8px; }
.whatnow-portions { margin: 0 0 8px; padding-left: 18px; }
.whatnow-portions li { font-size: 14px; color: var(--text); line-height: 1.5; }
.whatnow-why { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.whatnow-note {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.5;
  padding: 12px; background: var(--bg); border-radius: 10px; margin-bottom: 10px;
}

/* ── Staple confirmation sheet ────────────────────────────
   Shown once when a meal hits its third log. Deliberately looks like the
   app's other bottom sheets rather than an alert: this is an offer, not a
   warning, and it must be as easy to dismiss as to act on. */
.staple-overlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.staple-sheet {
  background: var(--surface); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px; max-height: 88dvh; overflow-y: auto;
  /* Clears the fixed .tab-nav, same as every other bottom sheet. */
  padding: 20px 20px calc(78px + env(safe-area-inset-bottom));
}
.staple-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.staple-title { font-size: 18px; font-weight: 800; color: var(--text); margin: 0; flex: 1; }
.staple-why { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin: 0 0 14px; }
.staple-meal {
  font-size: 15px; font-weight: 700; color: var(--text);
  padding: 10px 12px; background: var(--bg); border-radius: 10px; margin-bottom: 14px;
}
.staple-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.staple-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.staple-grid input {
  font-size: 17px;   /* 16px+ or iOS zooms the page on focus */
  font-weight: 700; color: var(--text);
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); width: 100%;
}
.staple-grid input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light);
}
.staple-hint { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin: 0 0 14px; }
.staple-cta { width: 100%; padding: 15px; font-size: 16px; font-weight: 800; }

.cw-sheet-skip {
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px; font-weight: 600;
  padding: 12px 0 2px;
}
.cw-sheet-skip:hover { color: var(--text); }

/* ── Body map ─────────────────────────────────────────────────────────── */
.cw-bodymap-btn {
  display: flex; align-items: center; gap: 13px;
  width: 100%; margin: 12px 0 4px; padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border); border-radius: 14px;
  cursor: pointer; text-align: left;
}
.cw-bodymap-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 11px; background: var(--brand-mid, rgba(0,180,156,.12));
  color: var(--brand);
}
.cw-bodymap-icon svg { width: 24px; height: 24px; }
.cw-bodymap-text { flex: 1; min-width: 0; }
.cw-bodymap-title { display: block; font-size: 14.5px; font-weight: 800; color: var(--text); }
.cw-bodymap-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.cw-bodymap-chev { font-size: 20px; color: var(--text-muted); flex-shrink: 0; }

.bm-overlay {
  position: fixed; inset: 0; z-index: 1750;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: flex-end; justify-content: center;
}
.bm-card {
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  width: 100%; max-width: 480px;
  max-height: 94dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px 18px calc(24px + env(safe-area-inset-bottom));
}
.bm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bm-title { font-size: 19px; font-weight: 800; color: var(--text); }
.bm-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.bm-x {
  background: none; border: none; color: var(--text-muted);
  font-size: 26px; line-height: 1; cursor: pointer;
  padding: 0 4px; min-height: 44px; min-width: 36px; flex-shrink: 0;
}
.bm-toggle {
  display: flex; gap: 6px; margin: 16px auto 4px;
  background: var(--bg); border-radius: 12px; padding: 4px;
  width: fit-content;
}
.bm-toggle-btn {
  padding: 9px 26px; min-height: 40px;
  border: none; border-radius: 9px; background: none;
  color: var(--text-muted); font-size: 14px; font-weight: 800; cursor: pointer;
}
.bm-toggle-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

/* The figure sits on its own dark stage so the muscle heat reads clearly in
   both themes — the anatomy chart is the hero of this sheet. */
.bm-stage {
  background: #1b2426;
  border-radius: 18px;
  padding: 16px 12px 10px;
  margin: 14px 0 16px;
}
.bm-stats {
  display: flex; justify-content: space-around; align-items: flex-start;
  gap: 12px; margin-bottom: 4px;
}
.bm-stat { text-align: center; }
.bm-stat-num {
  display: block; font-size: 30px; font-weight: 800; line-height: 1;
  color: #f4f8f7; font-variant-numeric: tabular-nums;
}
.bm-stat-label {
  display: block; margin-top: 5px;
  font-size: 10px; font-weight: 700; line-height: 1.35;
  letter-spacing: .05em; text-transform: uppercase; color: #8fa3a0;
}
.bm-figure-wrap { display: flex; justify-content: center; padding: 2px 0; }
.bm-figure { width: 100%; max-width: 240px; height: auto; }
.bm-silhouette { fill: #3d4f54; }
.bm-silhouette path { fill: #3d4f54; }
/* Regions are groups of real anatomical paths — fill the group, no strokes */
.bm-region { cursor: pointer; }
.bm-region path {
  fill: #5d7075;
  stroke: none;
  transition: fill .18s ease;
}
.bm-region:hover path { fill: #ff9884; }
.bm-region:focus-visible { outline: none; }
.bm-region:focus-visible path { fill: #ff9884; }
/* Recovery scale. Three shades of one colour meant reading SHADE to tell
   "today" from "last week" — hard on a phone in a gym. Each state now gets
   its own bright hue, so the figure is readable at a glance:
     red    = worked today, still recovering
     orange = 1-3 days
     yellow = 4-7 days
     slate  = ready to train (the unshaded default) */
.bm-region.heat-2 path { fill: #ffd23f; }
.bm-region.heat-1 path { fill: #ff8c1a; }
.bm-region.heat-0 path { fill: #ff2e4d; }
.bm-region.sel path { fill: var(--brand); }

.bm-hint {
  text-align: center; margin-top: 2px;
  font-size: 13px; font-weight: 800; color: #f4f8f7;
  min-height: 18px;
}
.bm-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  /* Was 10.5px in dim grey — a key you have to squint at isn't a key. */
  margin: 10px 0 2px; font-size: 11.5px; font-weight: 700; color: #c4d4d1;
}
.bm-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.bm-legend-item b { font-weight: 700; color: #8fa3a0; }
.bm-dot {
  width: 10px; height: 10px; border-radius: 3px;
  background: #6b7f82; display: inline-block; flex-shrink: 0;
}
/* Must stay in lockstep with the .bm-region heat fills above */
.bm-dot.heat-0 { background: #ff2e4d; }
.bm-dot.heat-1 { background: #ff8c1a; }
.bm-dot.heat-2 { background: #ffd23f; }

.bm-results { border-top: 1px solid var(--border); padding-top: 14px; }
.bm-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bm-results-title { font-size: 16px; font-weight: 800; color: var(--text); }
.bm-results-meta { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.bm-empty { font-size: 13.5px; color: var(--text-muted); text-align: center; padding: 18px 0; }
.bm-list { display: flex; flex-direction: column; }
.bm-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.bm-row:last-child { border-bottom: none; }
.bm-row-media {
  position: relative; flex-shrink: 0;
  width: 60px; height: 45px; padding: 0;
  border: none; background: none; border-radius: 8px; overflow: hidden; cursor: pointer;
}
.bm-row-media[disabled] { cursor: default; }
.bm-thumb {
  width: 60px; height: 45px; object-fit: cover; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text-muted); font-weight: 800;
}
.bm-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.34); color: #fff; font-size: 14px;
}
.bm-row-info { flex: 1; min-width: 0; }
.bm-row-name { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-row-meta { font-size: 11.5px; color: var(--text-muted); text-transform: capitalize; }
.bm-row-add {
  flex-shrink: 0; padding: 8px 15px; min-height: 38px;
  border: 1.5px solid var(--brand); border-radius: 10px;
  background: none; color: var(--brand); font-size: 13px; font-weight: 800; cursor: pointer;
}
.bm-row-add.added { background: var(--brand); color: #fff; }

.tr-session-to-program {
  width: 100%; margin-top: 12px; padding: 11px 16px;
  border: 1.5px solid var(--brand); border-radius: 10px;
  background: none; color: var(--brand);
  font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.tr-session-to-program:disabled { opacity: .7; cursor: default; }

/* Duration wheels — every second reachable, iOS-picker feel */
.cw-wheel-wrap {
  position: relative;
  display: flex; justify-content: center; gap: 10px;
  margin: 4px 0 6px;
  height: 220px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.cw-wheel-highlight {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 44px; border-radius: 12px;
  background: var(--brand-light, rgba(0, 180, 156, .12));
  border: 1.5px solid var(--brand);
  pointer-events: none;
}
.cw-wheel {
  flex: 1; max-width: 140px;
  overflow-y: auto; scroll-snap-type: y mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  text-align: center;
}
.cw-wheel::-webkit-scrollbar { display: none; }
.cw-wheel-pad { height: 88px; }
.cw-wheel-item {
  height: 44px; line-height: 44px;
  scroll-snap-align: center;
  font-size: 21px; font-weight: 700;
  color: var(--text-muted); opacity: .45;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: opacity .12s ease, color .12s ease, transform .12s ease;
}
.cw-wheel-item.sel {
  color: var(--text); opacity: 1;
  font-size: 24px; font-weight: 800;
  transform: scale(1.04);
}
.cw-wheel-unit {
  font-size: 12px; font-weight: 700;
  color: var(--text-muted); margin-left: 4px;
  text-transform: uppercase; letter-spacing: .04em;
}
.cw-wheel-readout {
  text-align: center; font-size: 19px; font-weight: 800;
  color: var(--brand); margin: 6px 0 18px;
  font-variant-numeric: tabular-nums;
}
.cw-wheel-readout.empty { color: var(--text-muted); font-weight: 700; }

/* Scan-result exercise rows — thumbnail plays the tutorial, Add adds it */
.cw-ex-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.cw-ex-row:last-child { border-bottom: none; }
.cw-ex-row-media {
  position: relative; flex-shrink: 0;
  width: 64px; height: 48px;
  padding: 0; border: none; background: none; border-radius: 8px;
  overflow: hidden; cursor: pointer;
}
.cw-ex-row-media[disabled] { cursor: default; opacity: .85; }
.cw-ex-row-thumb {
  width: 64px; height: 48px; object-fit: cover; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text-muted); font-weight: 800;
}
.cw-ex-row-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .34); color: #fff; font-size: 15px;
}
.cw-ex-row-info { flex: 1; min-width: 0; }
.cw-ex-row-name {
  font-size: 14.5px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cw-ex-row-meta { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }
.cw-ex-row-add {
  flex-shrink: 0; padding: 9px 16px; min-height: 40px;
  border: 1.5px solid var(--brand); border-radius: 10px;
  background: none; color: var(--brand);
  font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.cw-ex-row-add.added {
  background: var(--brand); color: #fff; border-color: var(--brand);
}

/* Type-ahead dropdown under the "What'd you eat?" bar — floats over the page
   so it never widens the input row or pushes the layout around. */
#typeSuggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#typeSuggest[hidden] { display: none; }
#typeSuggest .item-suggest-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  min-height: 48px;
}
#typeSuggest .item-suggest-row:last-child { border-bottom: none; }
#typeSuggest .item-suggest-row:active { background: var(--bg); }
#typeSuggest .item-suggest-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#typeSuggest .item-suggest-cal {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.item-search-suggest {
  display: flex; flex-direction: column; gap: 4px;
  margin: 6px 0 2px;
}
.item-suggest-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; text-align: left;
}
.item-suggest-row:active { border-color: var(--brand); }
.item-suggest-name { font-size: 13px; font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-suggest-cal  { font-size: 12px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.cw-session-hdr-timer { display: flex; align-items: center; gap: 8px; }
/* Ben, 9/2: "Timer is stuck on 1:30 minutes with no way to change it."
   Only visible while a timer is running. */
/* Ben, 9/2: "The cardio and recovery needs a section to store notes." */
.cw-note-input { resize: vertical; min-height: 62px; line-height: 1.45; font-family: inherit; }
.cw-field-opt { font-weight: 600; color: var(--text-dim); text-transform: none; letter-spacing: 0; }

.cw-rest-adjust { display: flex; gap: 6px; }
.cw-rest-adj-btn {
  padding: 0 11px; height: 38px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.cw-rest-adj-btn:active { background: var(--bg-soft, #f1f3f5); }

.cw-rest-timer-btn {
  min-width: 44px; min-height: 44px;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.cw-rest-timer-btn:active { background: var(--border); }
.cw-sess-end-btn {
  padding: 8px 16px; min-height: 36px;
  border: none; border-radius: 20px;
  background: var(--red); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s;
}
.cw-sess-end-btn:active { opacity: 0.85; }
.cw-sess-end-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.cw-sess-save-err {
  background: #fff0f0; border: 1px solid var(--red);
  color: var(--red); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  margin: 0 16px 4px;
}

/* Session exercise list */
.cw-session-ex-list { display: flex; flex-direction: column; gap: 12px; padding: 16px; }

/* Session exercise card */
.cw-session-ex-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s;
}
.cw-session-ex-card.drag-over { border-color: var(--brand); background: var(--brand-light); }

/* Header row: drag handle + thumb (small) + name/tag + actions */
.cw-session-ex-hdr {
  /* flex-start so the thumbnail and the row actions stay level with the first
     line of a wrapped exercise name rather than floating mid-card. */
  display: flex; align-items: flex-start; gap: 10px;
}
.cw-session-ex-thumb-wrap { flex-shrink: 0; position: relative; }
.cw-session-ex-thumb {
  width: 44px; height: 44px; border-radius: 10px;
  object-fit: cover; display: block;
}
.cw-session-ex-thumb-fallback {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--brand-light); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.cw-session-ex-info { flex: 1; min-width: 0; }
/* The exercise name on the LIVE session card — the screen a client is looking
   at mid-set. "Seated DB Shoulder Press (Unilateral — Left Arm Focus)" is a
   real prescription and the bracket is the coaching; clamping it kept the
   press and dropped which arm. Found by the pattern test written for the two
   Ben reported, not by eye. */
.cw-session-ex-name {
  font-size: 15px; font-weight: 700; color: var(--text);
  line-height: 1.25; overflow-wrap: anywhere;
}
.cw-session-ex-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* ── Per-exercise rest icon (Ben, 9/30) ───────────────────────────────────
 * "instead of rest automatically popping up on a workout can we just put a
 * small timer icon next to each workout that gives it the corresponding
 * rest weve built in the exercise?" Replaces the old auto-start-on-logged-
 * set behavior — starting rest is now always this explicit tap. Same footprint
 * as the ⋯ trigger beside it so the two sit level in the header. */
.cw-ex-rest-btn {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  border: 1.5px solid transparent; background: none; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cw-ex-rest-btn:hover { background: var(--surface2); border-color: var(--border); color: var(--text); }
/* Running: the clock icon is replaced by the live countdown (see
   renderExRestBadge) — a pill rather than an icon so it reads as "counting
   down", not as a second identical button. */
.cw-ex-rest-running {
  width: auto; padding: 0 10px; border-color: var(--brand);
  background: var(--brand-light); color: var(--brand);
}
.cw-ex-rest-count {
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ── ⋯ menu trigger and panel (Ben, 9/18) ────────────────────────────────
 * Superset, swap, pain and delete used to sit open on every card. Measured
 * against 694 logged exercises before hiding them: superset/swap flagged 0
 * times, pain 0 times — so they move behind one trigger, and pain gets a
 * quiet indicator instead of permanent screen space when it IS used. */
.cw-ex-menu-btn {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  border: 1.5px solid transparent; background: none; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  margin: -6px -6px 0 0;
}
.cw-ex-menu-btn:hover, .cw-ex-menu-btn[aria-expanded="true"] {
  background: var(--surface2); border-color: var(--border); color: var(--text);
}
/* A dot, not the whole icon, so "pain was reported here" reads even with the
   menu closed — the one signal from this group worth surfacing by default. */
.cw-ex-menu-flagged { color: var(--red); position: relative; }
.cw-ex-menu-flagged::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  border: 1.5px solid var(--surface);
}
.cw-ex-menu {
  display: flex; flex-direction: column; gap: 2px;
  margin: 6px 0 0; padding: 6px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface2);
}
.cw-ex-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.cw-ex-menu button:hover { background: var(--surface); }
.cw-ex-menu button svg { flex-shrink: 0; color: var(--text-muted); }
.cw-ex-menu .cw-pain-icon-btn.is-flagged { color: var(--red); }
.cw-ex-menu .cw-pain-icon-btn.is-flagged svg { color: var(--red); }
.cw-ex-menu .cw-delete-ex-btn { color: var(--red); }
.cw-ex-menu .cw-delete-ex-btn span[aria-hidden] {
  width: 18px; text-align: center; font-size: 18px; line-height: 1; flex-shrink: 0;
}
.cw-ex-menu .cw-chain-icon.cw-chain-icon-active,
.cw-ex-menu .cw-swap-icon-btn.cw-chain-icon-active { color: var(--brand); }

/* ── Read-only prescription strip (Ben, 9/18) ────────────────────────────
 * "Read-only strip, edit behind a tap." Sets/Target/Rest render as plain
 * numbers; tapping reveals the exact same .cw-ex-controls that used to sit
 * open on every card. */
.cw-rx-strip {
  display: flex; align-items: flex-end; gap: 18px; width: 100%;
  margin: 10px 0 0; padding: 9px 0 0; border: 0; border-top: 1px solid var(--border);
  background: none; cursor: pointer; text-align: left;
}
.cw-rx-strip:hover .cw-rx-val b { color: var(--brand); }
.cw-rx-val { display: flex; flex-direction: column; gap: 1px; }
.cw-rx-val b {
  font-size: 20px; font-weight: 800; color: var(--text); line-height: 1;
  font-variant-numeric: tabular-nums; transition: color .15s;
}
.cw-rx-val small {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
}
.cw-rx-chev {
  width: 15px; height: 15px; margin-left: auto; flex-shrink: 0;
  color: var(--text-dim); align-self: center;
  transition: transform .15s;
}
.cw-rx-strip[aria-expanded="true"] .cw-rx-chev { transform: rotate(180deg); }
.cw-session-drag-handle {
  color: var(--text-dim); cursor: grab; flex-shrink: 0;
  display: flex; align-items: center;
  /* A thumb needs a real target. 4px of padding was a mouse-sized handle on a
     control whose whole job is dragging on a phone (Ben, 8/25). */
  padding: 10px 12px 10px 4px; min-width: 34px; min-height: 38px;
  touch-action: none;
}
.cw-session-drag-handle:active { color: var(--brand); }
/* While a card is being dragged, make the drop target unmistakable. */
.cw-session-ex-card.drag-over {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-light);
}
.cw-session-ex-card.cw-build-card-dragging { opacity: .55; }
.cw-session-drag-handle:active { cursor: grabbing; }

/* Sets area */
.cw-sets-wrap { display: flex; flex-direction: column; gap: 6px; }
.cw-sets-list { display: flex; flex-direction: column; gap: 6px; }
.cw-add-set {
  align-self: flex-start; background: none; border: none;
  color: var(--brand); font-size: 13px; font-weight: 700;
  cursor: pointer; padding: 4px 0; min-height: 36px;
}
.cw-session-add-ex-btn {
  width: 100%; padding: 12px; border-radius: 14px;
  border: 1.5px dashed var(--border); background: transparent;
  color: var(--text-muted); font-size: 14px; font-weight: 700;
  cursor: pointer; margin-top: 4px;
}
.cw-session-add-ex-btn:active { border-color: var(--brand); color: var(--brand); }
.cw-ex-client-note {
  width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  font-size: 13px; color: var(--text); line-height: 1.5;
  resize: none; font-family: inherit;
  transition: border-color 0.15s;
}
.cw-ex-client-note:focus { outline: none; border-color: var(--brand); }
.cw-ex-client-note::placeholder { color: var(--text-dim); }
/* Mic on the coach note — nobody types carefully between sets, and this is
   the box where pain gets reported. Sits inside the field so it can't be
   mistaken for a form control that submits something. */
.cw-ex-note-wrap { position: relative; }
.cw-ex-note-wrap .cw-ex-client-note { padding-right: 46px; }
.cw-note-mic {
  position: absolute; top: 7px; right: 7px;
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text-muted); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.cw-note-mic:hover { border-color: var(--brand); color: var(--brand); }
/* .recording is set by the shared wireVoiceInput */
.cw-note-mic.recording {
  border-color: var(--brand); background: var(--brand); color: #fff;
  animation: cw-mic-pulse 1.3s ease-in-out infinite;
}
@keyframes cw-mic-pulse { 0%,100% { opacity: 1 } 50% { opacity: .62 } }
@media (prefers-reduced-motion: reduce) { .cw-note-mic.recording { animation: none } }
/* ── Superset / circuit bracket (Ben, 9/11) ────────────────────
   "i know superset means the purple bar but this might be to subtle for the
   users is there a way to use the purple but create a full border around the
   workouts that are paired as supersets"
   Each paired card used to carry its own purple left border, so a superset
   read as two purple cards rather than one block of work. */
.cw-group-wrap {
  border: 2px solid var(--sport);
  border-radius: 14px;
  padding: 8px;
  margin-bottom: 10px;
  background: var(--sport-light);
}
.cw-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 2px 4px 8px;
}
.cw-group-name {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--sport);
}
.cw-group-how {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.35;
}
/* The thread between paired cards — this is the bit that says "no rest". */
.cw-group-link {
  height: 12px;
  margin: 0 auto;
  width: 2px;
  background: var(--sport);
  opacity: .55;
}
/* Inside a bracket the per-card purple is redundant and makes it noisy: the
   bracket is already saying it. Cards go back to their normal outline. */
.cw-group-wrap .cw-session-ex-card-paired {
  border-color: var(--border);
  margin-bottom: 0;
}

.cw-session-ex-card-paired { border-color: var(--sport); }
.cw-superset-label {
  font-size: 11px; font-weight: 700;
  color: var(--sport); background: var(--sport-light);
  padding: 2px 7px; border-radius: 20px;
  display: inline-block;
}

/* Chain-link icon */
.cw-chain-icon {
  min-width: 44px; min-height: 44px;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-dim); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, box-shadow 0.15s;
}
.cw-chain-icon-pending {
  color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-mid);
  animation: cw-chain-pulse 1s ease-in-out infinite;
}
@keyframes cw-chain-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--brand-mid); } 50% { box-shadow: 0 0 0 8px var(--brand-mid); } }
.cw-chain-icon-active { color: var(--sport); }

/* Best set muted hint */
.cw-best-set { font-size: 12px; color: var(--text-dim); font-weight: 400; padding: 0 2px; }

/* Exercise controls row (Sets / Target toggle / Rest) */
.cw-ex-controls {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 2px 0 4px;
  border-bottom: 1px solid var(--border);
}
.cw-ctrl-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px;
}
/* Ben, 10/5, marked up a screenshot: circled the Sets stepper and drew a
   line to the Target toggle on a card where they visibly sat at different
   heights, and asked for the fix everywhere — this row's controls never
   shared a height to begin with. .cw-ex-controls aligns every column to
   align-items: flex-end, which lines up BOTTOMS only; with the stepper
   explicitly 40px tall and every other control sized purely from its own
   padding + font-size (roughly 28-32px, all different from each other and
   from the stepper), their TOPS land at different rows no matter what
   align-items says. min-height: 40px on every sibling control is the
   actual fix — same floor as .cw-step-btn already had — not a per-card
   tweak, since every exercise card renders from this same template. */
.cw-ctrl-input {
  width: 52px; min-height: 40px; padding: 7px 8px; text-align: center;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text);
  font-size: 15px; font-weight: 700; outline: none;
}
.cw-ctrl-input:focus { border-color: var(--brand); }
.cw-ctrl-select {
  min-height: 40px; padding: 7px 6px; border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text);
  font-size: 13px; font-weight: 600; outline: none; cursor: pointer;
}
.cw-target-toggle {
  display: flex; min-height: 40px; border: 1.5px solid var(--border); border-radius: 9px; overflow: hidden;
}
.cw-target-type-btn {
  padding: 6px 12px; border: none; background: transparent;
  font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex; align-items: center;
}
.cw-target-type-btn.active { background: var(--brand); color: #fff; }
.cw-rx-bar {
  font-size: 12px; font-weight: 700; color: var(--brand);
  padding: 4px 0;
}

/* Tempo / isometric hold — one-tap chips under the Sets/Target/Rest row.
   These sit ALONGSIDE the rep target rather than replacing it, so a set can
   be "10 reps with a 15s hold". Dormant state is a quiet outline so an
   exercise without them doesn't shout. */
/* Its own labelled block, matching the Sets/Target/Rest controls above.
   Previously two 12px dashed-grey chips with no heading — they read as
   disabled metadata, so clients never discovered holds or tempo at all. */
.cw-int-block {
  margin: 2px 0 10px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--bg-subtle, rgba(127,127,127,0.05));
}
.cw-int-block-on { border-color: var(--brand); background: var(--brand-light); }
.cw-int-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 7px;
}
.cw-int-label-hint {
  text-transform: none; letter-spacing: 0; font-weight: 600;
  color: var(--text-muted);
}
/* Two equal halves. The hold and tempo buttons are the same control in two
   states, so they share IDENTICAL geometry — same width, height, radius and
   padding — and differ only in fill. Previously an "on" pill grew to fit its
   text while the other stayed small, so the pair looked mismatched. */
.cw-int-row { display: flex; gap: 8px; }
.cw-int-add, .cw-int-pill {
  /* flex-basis 0 + grow: both take exactly half the row regardless of label
     length, so adding "5s hold · set 3" can't unbalance the pair. */
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* min-height 44px is Apple's tap-target floor — these get pressed mid-set
     with sweaty hands, so they can't be 33px slivers. */
  padding: 10px 12px; min-height: 44px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  text-align: center; line-height: 1.25;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
/* Off: solid outline, reads as pressable (never dashed — that reads disabled) */
.cw-int-add {
  border: 1.5px solid var(--border);
  background: var(--bg); color: var(--text);
}
.cw-int-add:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
/* On: filled, same footprint */
.cw-int-pill {
  border: 1.5px solid var(--brand);
  background: var(--brand); color: #fff;
}
.cw-int-pill .cw-int-where { color: rgba(255,255,255,0.8); }
.cw-int-pill .cw-int-x { background: rgba(255,255,255,0.25); color: #fff; }
.cw-int-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 12px; line-height: 1;
}
/* Which set(s) it applies to — a hold usually belongs to ONE set, so the
   chip has to say which rather than implying the whole exercise. */
.cw-int-where { font-size: 10.5px; font-weight: 700; opacity: 0.75; }
/* Scope picker inside the sheet */
.cw-int-scope { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cw-int-scope-btn {
  padding: 6px 11px; border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text-muted);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.cw-int-scope-btn.active { border-color: var(--brand); background: var(--brand-light); color: var(--brand-on-light); }
.cw-int-scope-all { margin-left: auto; }
/* Per-set badge — sits on its own line under the set's inputs */
/* Per-set hold/tempo badge. It was flex-basis:100% inside a NON-wrapping row,
   so it could never take its own line — instead it sat inline, stretched, and
   squeezed the weight input (which is flex:1) down to nothing. It now sits on
   its own wrapped line, sized to its content. */
/* The button is just a full-width row slot; the pill inside it carries the
   visual treatment (see .cw-set-int-pill below). */
.cw-set-int {
  order: 99;
  background: transparent; color: var(--text-muted);
  font-size: 11px; font-weight: 700; line-height: 1.4;
  cursor: pointer;
}
/* The badge always takes its own line. `flex-wrap: wrap` alone was not enough:
   on a wide (desktop) row there was room left over, so the badge stayed inline
   and stole width from the weight input — 355px → 258px, exactly the squash in
   Ben's screenshot. Forcing a line break before it makes the behaviour
   identical at every width.
   Uses a class rather than :has() — Safari only shipped :has() in 15.4 and
   some clients are on older phones. */
.cw-set-row-int { flex-wrap: wrap; }
/* Claim the whole line (forces the wrap) but keep the PILL its natural size:
   the element is a full-width inline-flex box whose own content is left-
   aligned, rather than a pill stretched across the row. */
.cw-set-row-int > .cw-set-int {
  flex: 1 0 100%; width: 100%;
  display: flex; justify-content: flex-start;
  border: none; background: none; padding: 0; margin: 5px 0 1px 28px;
}
.cw-set-row-int > .cw-set-int > .cw-set-int-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px;
  white-space: nowrap;
}
.cw-set-row-int > .cw-set-int:hover > .cw-set-int-pill {
  border-color: var(--brand); color: var(--brand);
}
/* Picker sheet */
/* Which exercise the sheet is editing — the subtitle above it now explains
   what a hold/tempo IS, so the name moved here rather than being dropped. */
.cw-int-for {
  margin-top: 10px; font-size: 12px; font-weight: 700;
  color: var(--text-muted);
}
.cw-int-legend {
  font-size: 12px; color: var(--text-dim); font-weight: 600;
  margin: 10px 0 -4px;
}
.cw-int-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.cw-int-choice {
  padding: 9px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cw-int-choice:hover { border-color: var(--brand); }
.cw-int-choice.active { border-color: var(--brand); background: var(--brand-light); color: var(--brand-on-light); }
.cw-int-choices-tempo .cw-int-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 132px;
}
.cw-int-choice-v   { font-size: 15px; font-weight: 800; }
.cw-int-choice-why { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.cw-int-choice.active .cw-int-choice-why { color: var(--brand); }
.cw-int-custom { margin-top: 12px; }
.cw-sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.cw-sheet-btn-ghost, .cw-sheet-btn-primary {
  flex: 1; padding: 12px; border-radius: 11px;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.cw-sheet-btn-ghost   { border: 1.5px solid var(--border); background: transparent; color: var(--text-muted); }
.cw-sheet-btn-primary { border: none; background: var(--brand); color: #fff; }

/* Sets table header */
.cw-sets-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; margin-bottom: 2px;
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.4px;
}
/* Ben, 9/16: "reps weight, make it harder need to line up with the
   corresponding row."
   This was 20px against an 18px .cn-set-num, so every column after it sat 2px
   off. The header must track the ROW, never the other way round. */
.cw-sets-hdr-num  { width: 18px; text-align: center; flex-shrink: 0; }
/* Ben, 9/3: reps/time now comes before weight in the row, so the header has to
   swap with it. The widths follow the ROW, not the old header: the target input
   is fixed (60px reps / 72px time) and the weight input is the flexible one. */
.cw-sets-hdr-target { width: 64px; flex-shrink: 0; }
.cw-sets-hdr-weight { flex: 1; }
.cw-sets-hdr-done  { width: 58px; flex-shrink: 0; }

/* Set row — single inline row */
.cw-set-row {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.cw-set-row.logged { background: var(--brand-light); border-radius: 8px; padding: 6px 6px; }
.cw-set-num {
  width: 20px; font-size: 12px; font-weight: 700;
  color: var(--text-dim); flex-shrink: 0; text-align: center;
}
.cw-set-weight-input {
  flex: 1; min-width: 0; padding: 7px 8px; text-align: center;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text);
  font-size: 14px; font-weight: 600; outline: none;
}
.cw-set-weight-input:focus { border-color: var(--brand); }
.cw-set-unit-sel {
  padding: 7px 4px; border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text-muted);
  font-size: 12px; outline: none; flex-shrink: 0;
}
.cw-set-reps-input {
  width: 60px; padding: 7px 8px; text-align: center;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text);
  font-size: 14px; font-weight: 600; outline: none; flex-shrink: 0;
}
.cw-set-reps-input:focus { border-color: var(--brand); }

/* Ben, 9/16: "when i say use these numbers in a workout make the workout card
   look filled out and highlight something so i know it worked."
   A filled box looked identical to an empty one — same border, same
   background — so prefilling three sets changed nothing a client could see.
   The coach editor has had this since day one (.cn-set-weight
   :not(:placeholder-shown)); the client side never got it. */
.cw-set-weight-input:not(:placeholder-shown),
.cw-set-reps-input:not(:placeholder-shown) {
  border-color: var(--brand-mid);
  background: var(--brand-light);
  font-weight: 800;
}

/* The moment of confirmation. A brief wash of brand colour across the card
   that just changed, so the eye is drawn to WHICH exercise was filled — a
   toast at the bottom of the screen does not say that. */
@keyframes cw-prefill-flash {
  0%   { background: var(--brand-light); border-color: var(--brand); }
  100% { background: transparent; border-color: var(--border); }
}
.cw-session-ex-card.cw-just-filled {
  animation: cw-prefill-flash 1.1s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  /* No flash, but still say which card — a static tint that the next render
     clears. */
  .cw-session-ex-card.cw-just-filled { animation: none; background: var(--brand-light); }
}
/* "Both" mode fits weight + reps + time on one phone row: the time select
   narrows and the reps box gives up a little width. Without this the three
   inputs squeeze the weight field the way the hold badge used to.
   Uses a row class rather than :has() — Safari only shipped :has() in 15.4
   and some clients are on older phones. */
.cw-set-time-narrow { max-width: 82px; flex-shrink: 1; min-width: 62px; }
.cw-set-row-both .cw-set-reps-input { width: 48px; }
@media (max-width: 400px) {
  .cw-set-row-both .cw-set-weight-input { min-width: 54px; }
  .cw-set-row-both .cw-set-time-narrow { max-width: 74px; }
}

/* Single-leg/arm exercises (Ben, 9/22): two reps boxes where one used to
   be. flex-shrink lets each box give up width before it starts crowding
   the weight field the way .cw-set-row-both already had to solve. */
.cw-set-lr-wrap {
  display: flex; align-items: center; gap: 3px; flex-shrink: 1; min-width: 0;
}
.cw-set-lr-wrap .cw-set-reps-input {
  width: 40px; min-width: 32px; flex-shrink: 1; padding-left: 4px; padding-right: 4px;
}
.cw-set-lr-slash { color: var(--text-dim); font-size: 12px; font-weight: 700; flex-shrink: 0; }
@media (max-width: 400px) {
  .cw-set-lr-wrap .cw-set-reps-input { width: 34px; min-width: 28px; font-size: 13px; }
}
.cw-set-time-sel {
  width: 72px; padding: 7px 4px; border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text);
  font-size: 13px; font-weight: 600; outline: none; flex-shrink: 0; cursor: pointer;
}
.cw-done-btn {
  padding: 6px 10px; min-height: 34px; flex-shrink: 0;
  border: 1.5px solid var(--border); border-radius: 20px;
  background: transparent; color: var(--text-muted);
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
/* Ben, 9/2: "Once the workout is logged the RPE toggle is still blended in."
   Measured: brand #00b49c on brand-light #e6f9f6 is 2.4:1, well under the 4.5
   AA floor — the logged state was nearly invisible. #00705f gives 5.53:1.
   Same class of bug as the pain dots on 8/31. */
.cw-done-btn.logged {
  border-color: var(--brand); color: var(--brand-on-light); background: var(--brand-light);
  font-weight: 800;
}
.cw-rm-set {
  min-width: 28px; min-height: 28px; border-radius: 50%;
  border: none; background: transparent; color: var(--text-dim);
  font-size: 16px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cw-rm-set:active { color: var(--red); }

/* Inline exercise card action buttons */
.cw-swap-icon-btn, .cw-delete-ex-btn {
  min-width: 36px; min-height: 36px;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-dim); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: color 0.15s;
}
.cw-swap-icon-btn:hover { color: var(--text); }
.cw-delete-ex-btn {
  font-size: 20px; font-weight: 400; line-height: 1;
  color: var(--text-dim);
}
.cw-delete-ex-btn:hover { color: var(--red); }

/* Swap bottom sheet — .mds-sheet base */
.cw-swap-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  z-index: 1600;
  max-height: 80dvh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
  padding: 0 0 40px;
}
.cw-swap-sheet.open { transform: translateY(0); }
.cw-swap-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s;
  min-height: 64px;
}
.cw-swap-option:active { background: var(--bg); }
.cw-swap-option-thumb {
  width: 48px; height: 48px; border-radius: 10px;
  object-fit: cover; background: var(--border); flex-shrink: 0;
}
.cw-swap-option-info { flex: 1; min-width: 0; }
.cw-swap-option-name { font-size: 15px; font-weight: 700; color: var(--text); }
.cw-swap-option-rationale { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Resume toast */
.cw-resume-toast {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--yellow);
  border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.cw-resume-toast-msg, #cwResumeToastMsg { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 160px; }
.cw-resume-btn {
  min-height: 40px; padding: 8px 16px;
  border: none; border-radius: 20px;
  background: var(--yellow); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.cw-resume-btn:active { filter: brightness(0.95); }
.cw-start-fresh-btn {
  min-height: 40px; padding: 8px 14px;
  border: 1.5px solid var(--border-dark); border-radius: 20px;
  background: var(--surface); color: var(--text-muted);
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.cw-start-fresh-btn:active { border-color: var(--red); color: var(--red); }

/* Summary screen */
.cw-summary-screen {
  position: fixed; inset: 0; z-index: 1600;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 32px 16px; gap: 24px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
  overflow-y: auto;
}
.cw-summary-screen.open { transform: translateY(0); }
.cw-summary-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px; background: var(--surface);
  border-radius: 16px; border: 1px solid var(--border);
}
.cw-summary-stat-val { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.1; }
.cw-summary-stat-label { font-size: 14px; color: var(--text-muted); font-weight: 400; }

/* Calendar — the month grid this once belonged to is gone (9/19: "just use
   one calendar"). This rule stays because buildExpandedDayHtml's output
   still renders inside the day-detail sheet (.cwpc-day-list) that both
   openHistoryForDate and the plan calendar's own day tap use. */
.cw-calendar-day-expanded {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 12px 16px; margin-top: 4px;
  font-size: 14px; color: var(--text); display: flex; flex-direction: column; gap: 6px;
}

/* Gym profile manager */
.cw-gym-manager { display: flex; flex-direction: column; gap: 8px; }
.cw-gym-profile-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--surface);
  border-radius: 16px; border: 1.5px solid var(--border);
  min-height: 56px; cursor: pointer; transition: border-color 0.15s;
}
.cw-gym-profile-row.active { border-color: var(--brand); }
.cw-gym-profile-row-name { flex: 1; font-size: 15px; font-weight: 700; color: var(--text); }
.cw-gym-machine-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; min-height: 44px;
  border-bottom: 1px solid var(--border);
}
.cw-gym-machine-row-name { flex: 1; font-size: 14px; color: var(--text); }
.cw-machine-del-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 18px; line-height: 1;
  padding: 4px 6px; border-radius: 6px; min-width: 32px; min-height: 32px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.cw-machine-del-btn:hover { color: #e53e3e; background: rgba(229,62,62,0.08); }
.cw-machine-del-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Settings sheet */
.cw-settings-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  z-index: 1600;
  max-height: 80dvh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
  padding: 0 0 40px;
}
.cw-settings-sheet.open { transform: translateY(0); }

/* Skeleton loading */
.cw-skeleton {
  background: var(--border); border-radius: 6px;
  animation: cw-skeleton-pulse 1.4s ease-in-out infinite;
}

/* ── Barcode Scanner ──────────────────────────────────────── */
.barcode-btn {
  min-width: 38px;
  min-height: 38px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.barcode-btn:hover {
  color: var(--text);
  background: var(--border);
}
.barcode-btn:active {
  background: var(--border-dark);
}

.btn-barcode-search {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.btn-barcode-search:hover {
  background: var(--border) !important;
  color: var(--text) !important;
  border-color: var(--border-dark) !important;
}

#barcodeReader video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px;
}

/* scanner frame adjustments from html5-qrcode library */
#barcodeReader__scan_region {
  border: none !important;
}

/* Custom laser animation */
.scanner-laser {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 59, 48, 0.85);
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.85);
  z-index: 10;
  animation: scanning 2s linear infinite;
  display: none;
}

@keyframes scanning {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}

/* ── Forms Library pane ──────────────────────────────────────── */
.tr-forms-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}
.tr-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.tr-form-row:last-child { border-bottom: none; }
.tr-form-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.tr-form-row-meta {
  font-size: 11px;
  color: var(--text-dim);
}
.tr-form-preview-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: 1.5px solid var(--brand);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.tr-form-preview-btn:hover { background: var(--brand-light); }

/* ── Habits Library pane ─────────────────────────────────────── */
.tr-habits-wrap {
  display: flex;
  height: 100%;
  min-height: 400px;
}
.tr-habits-sidebar {
  width: 200px;
  flex-shrink: 0;
  border-right: 1.5px solid var(--border);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}
.tr-habits-sidebar-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
  gap: 6px;
}
.tr-habits-add-folder-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.tr-habits-add-folder-btn:hover { text-decoration: underline; }
.tr-habits-folder-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.tr-habits-folder-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 0;
  transition: background 0.12s;
}
.tr-habits-folder-btn:hover { background: var(--surface-2); }
.tr-habits-folder-btn.active {
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 700;
}
.tr-habits-folder-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-dim);
}
.tr-habits-folder-btn.active .tr-habits-folder-icon { color: var(--brand); }
.tr-habits-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-habits-folder-del {
  flex-shrink: 0; font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--text-dim); opacity: 0; padding: 2px 4px; border-radius: 4px;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.tr-habits-folder-btn:hover .tr-habits-folder-del { opacity: 0.7; }
.tr-habits-folder-del:hover { opacity: 1; color: var(--red); background: rgba(0,0,0,0.05); }
.tr-habits-folder-empty {
  font-size: 12px; color: var(--text-dim); padding: 14px 12px; line-height: 1.5;
}

.tr-habits-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  overflow-y: auto;
}
.tr-habits-main-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tr-habits-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tr-habit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.tr-habit-row:last-child { border-bottom: none; }
.tr-habit-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.tr-habit-row-actions {
  display: flex;
  gap: 6px;
}
.tr-habit-edit-btn {
  font-size: 12px;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
}
.tr-habit-edit-btn:hover { border-color: var(--brand); color: var(--brand); }
.tr-habit-assign-btn {
  font-size: 12px; font-weight: 700;
  color: #fff; background: var(--brand);
  border: 1px solid var(--brand); border-radius: 6px;
  padding: 3px 12px; cursor: pointer;
}
.tr-habit-assign-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* Assign-habit modal */
.tr-assign-body { padding: 4px 2px 8px; max-height: 60vh; overflow-y: auto; }
.tr-assign-field { margin-bottom: 14px; }
.tr-assign-field > label {
  display: block; font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px;
}
.tr-assign-target { display: flex; gap: 8px; }
.tr-assign-target input { flex: 1; min-width: 0; }
.tr-assign-field input {
  width: 100%; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.tr-assign-field input:focus { outline: none; border-color: var(--brand); }
.tr-assign-clients-label {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px; margin: 4px 0 8px;
}
.tr-assign-clients {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border); border-radius: 10px; padding: 4px;
}
.tr-assign-client {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.tr-assign-client:hover { background: var(--brand-light); }
.tr-assign-client input { width: 17px; height: 17px; accent-color: var(--brand); flex-shrink: 0; }

/* Client drill-down: assigned habits list */
.tr-chab-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.tr-chab-title { font-size: 16px; font-weight: 800; color: var(--text); }
.tr-chab-list { display: flex; flex-direction: column; gap: 8px; }
.tr-chab-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface);
}
.tr-chab-main { flex: 1; min-width: 0; }
.tr-chab-name { font-size: 14px; font-weight: 700; color: var(--text); }
.tr-chab-target {
  font-size: 12px; font-weight: 700; color: var(--brand);
  background: var(--brand-light); border-radius: 6px; padding: 1px 7px; margin-left: 4px;
}
.tr-chab-note { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.tr-chab-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tr-chab-stat {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--bg); border-radius: 6px; padding: 2px 8px;
}
.tr-chab-stat.on { color: var(--brand-on-light); background: var(--brand-light); }

/* Coach view: client goals */
.tr-cgoal {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface);
}
.tr-cgoal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tr-cgoal-title { font-size: 14px; font-weight: 700; color: var(--text); }
.tr-cgoal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.tr-cgoal-foot > span:first-child { font-weight: 700; color: var(--text); }
.tr-cgoal-who { color: var(--text-muted); }
.tr-chab-remove {
  flex-shrink: 0; font-size: 12px; color: var(--text-muted);
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 12px; cursor: pointer;
}
.tr-chab-remove:hover { border-color: var(--red); color: var(--red); }

/* ── Shared modal overlay / card ─────────────────────────────── */
.tr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tr-modal-card {
  background: var(--surface);
  border-radius: 16px;
  width: 100%;
  max-width: 860px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}
.tr-modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
  gap: 10px;
}
.tr-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.tr-modal-cancel-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}
.tr-modal-cancel-btn:hover { border-color: var(--text-muted); }
.tr-modal-preview-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}
.tr-modal-preview-btn:hover { border-color: var(--brand); color: var(--brand); }
.tr-modal-close-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
}
.tr-modal-close-x:hover { color: var(--text); }

/* ── New Form modal body ─────────────────────────────────────── */
.tr-modal-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.tr-form-meta-col {
  width: 220px;
  flex-shrink: 0;
  border-right: 1.5px solid var(--border);
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.tr-form-field-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: block;
  margin-bottom: 6px;
}
.tr-form-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg, var(--surface-2));
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.tr-form-input:focus { border-color: var(--brand); }
.tr-form-textarea { resize: none; font-family: inherit; }
.tr-form-qtypes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.tr-form-qtype-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: grab;
  background: var(--surface);
  user-select: none;
  transition: border-color 0.12s, background 0.12s;
}
.tr-form-qtype-item:hover { border-color: var(--brand); background: var(--brand-light); }
.tr-form-qtype-item.dragging { opacity: 0.4; }

.tr-form-canvas-col {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.tr-form-canvas {
  flex: 1;
  min-height: 300px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.tr-form-canvas.drag-over { border-color: var(--brand); background: var(--brand-light); }
.tr-form-canvas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tr-form-question-block {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.tr-form-question-block-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tr-form-question-type-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--brand);
  background: var(--brand-light);
  border-radius: 4px;
  padding: 2px 6px;
}
.tr-form-question-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--border);
  padding: 4px 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  outline: none;
}
.tr-form-question-input::placeholder { color: var(--text-dim); font-weight: 400; }
.tr-form-question-input:focus { border-bottom-color: var(--brand); }
.tr-form-question-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}
.tr-form-question-remove:hover { color: var(--red); background: rgba(var(--red-rgb,220,53,69),0.08); }
.tr-form-options-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.tr-form-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tr-form-option-row input[type=text] {
  flex: 1;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.tr-form-option-row input[type=text]:focus { border-color: var(--brand); }
.tr-form-add-option-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.tr-form-add-option-btn:hover { text-decoration: underline; }
.tr-form-remove-option-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.tr-form-remove-option-btn:hover { color: var(--red); }
.tr-form-rate-preview {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tr-form-rate-pip {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.tr-form-text-preview {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}

/* ── New Habit modal ─────────────────────────────────────────── */
.tr-habit-modal-card {
  max-width: 500px;
}
.tr-habit-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tr-habit-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1.5px solid var(--border);
  border-radius: 8px 8px 0 0;
  background: var(--surface-2);
  margin-top: 4px;
}
.tr-habit-format-select {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
.tr-habit-tool-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 6px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}
.tr-habit-tool-btn:hover { border-color: var(--brand); color: var(--brand); }
.tr-habit-content-editor {
  min-height: 180px;
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  background: var(--surface);
  overflow-y: auto;
}
.tr-habit-content-editor:empty:before {
  content: attr(placeholder);
  color: var(--text-dim);
  pointer-events: none;
}
.tr-habit-content-editor:focus { border-color: var(--brand); }
.tr-habit-modal-footer {
  padding: 14px 20px;
  border-top: 1.5px solid var(--border);
  flex-shrink: 0;
}
.tr-habit-modal-footer .tr-add-btn { width: 100%; justify-content: center; }

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 640px) {
  .tr-habits-sidebar { width: 140px; }
  .tr-modal-card { max-width: 100%; border-radius: 12px; }
  .tr-modal-body { flex-direction: column; }
  .tr-form-meta-col { width: 100%; border-right: none; border-bottom: 1.5px solid var(--border); }
}

/* ── Client Drill — OPEN button ──────────────────────────────── */
.cd-open-btn-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  margin-right: 4px;
}
.cd-open-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 6px 0 0 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  line-height: 1;
}
.cd-open-btn:hover { filter: brightness(1.1); }
.cd-open-chevron {
  background: var(--brand);
  color: #fff;
  border: none;
  border-left: 1px solid rgba(255,255,255,.3);
  border-radius: 0 6px 6px 0;
  padding: 7px 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 1;
}
.cd-open-chevron:hover { filter: brightness(1.1); }
.cd-open-chevron svg { width: 12px; height: 12px; stroke: #fff; }

/* ── Client Drill — Stats panel ──────────────────────────────── */
.cd-stats-panel {
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cd-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.cd-stat-row:last-child { border-bottom: none; }
.cd-stat-label { font-size: 12px; color: var(--text-muted); }
.cd-stat-val   { font-size: 12px; font-weight: 700; color: var(--text); }

/* ── Client Drill — Tags ─────────────────────────────────────── */
.cd-tags-section {
  margin: 8px 0 14px;
}
.cd-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  min-height: 24px;
}
.cd-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
  border-radius: 20px;
  padding: 3px 10px 3px 10px;
  font-size: 11px;
  font-weight: 600;
}
.cd-tag-remove {
  background: none;
  border: none;
  padding: 0 0 0 2px;
  color: #7c3aed;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.cd-tag-remove:hover { color: #b91c1c; }
.cd-add-tag-btn {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}
.cd-add-tag-btn:hover { border-color: var(--brand); color: var(--brand); }
.cd-tag-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.cd-tag-input {
  border: 1.5px solid var(--brand);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  outline: none;
  background: var(--surface);
  color: var(--text);
}
.cd-tag-input-save {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.cd-tag-input-cancel {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
}

/* ── Client Drill — 3-week Compliance cards ──────────────────── */
.cd-compliance-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.cd-compliance-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.cd-compliance-hdr h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.cd-comp-schedule-btn {
  font-size: 11px;
  color: var(--brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.cd-compliance-rings-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.cd-comp-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.cd-comp-week-label {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}
.cd-comp-goal-col {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding-left: 8px;
  border-left: 1.5px solid var(--border);
}

/* ── Compliance ring SVG ─────────────────────────────────────── */
.cd-ring-svg {
  width: 54px;
  height: 54px;
}
.cd-ring-svg circle { fill: none; stroke-linecap: round; }
.cd-ring-svg circle:nth-child(2) { transition: stroke-dasharray .4s; }
.cd-ring-svg.ring--grey  circle:nth-child(2) { stroke: var(--text-dim); }
.cd-ring-svg.ring--green circle:nth-child(2) { stroke: #22c55e; }
.cd-ring-svg.ring--yellow circle:nth-child(2) { stroke: #f59e0b; }
.cd-ring-svg.ring--red   circle:nth-child(2) { stroke: #ef4444; }
.cd-ring-svg text { fill: var(--text); font-family: inherit; }

/* ── Edit Profile modal ──────────────────────────────────────── */
.cd-edit-profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cd-edit-profile-card {
  background: var(--surface);
  border-radius: 14px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
.cd-edit-profile-hdr {
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.cd-edit-profile-hdr h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.cd-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
}
.cd-modal-close:hover { color: var(--text); }
.cd-edit-profile-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.cd-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.cd-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cd-edit-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cd-edit-field input,
.cd-edit-field select {
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.cd-edit-field input:focus,
.cd-edit-field select:focus { border-color: var(--brand); }
.cd-edit-field input:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; }
.cd-edit-section-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 0 0;
  border-top: 1.5px solid var(--border);
  margin-top: 4px;
}
.cd-edit-profile-footer {
  padding: 14px 20px;
  border-top: 1.5px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.cd-edit-cancel-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
}
.cd-edit-cancel-btn:hover { border-color: var(--text-muted); }
.cd-edit-save-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cd-edit-save-btn:hover { filter: brightness(1.1); }
.cd-edit-save-btn:disabled { opacity: .6; cursor: wait; }

@media (max-width: 640px) {
  .cd-edit-grid { grid-template-columns: 1fr; }
  .cd-edit-profile-card { max-width: 100%; }
}

/* ── Saved-meal shortcut ("log your usual?") ─────────────────── */
.usual-suggest {
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0;
  animation: fadeIn .2s ease;
}
.usual-suggest-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.usual-suggest-meal {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.usual-suggest-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Consultation Tab ──────────────────────────────────────── */
.consult-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  min-height: 100%;
}
.consult-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 20px;
  border-right: 1px solid var(--border);
}
.consult-section:last-child { border-right: none; }
.consult-section-hdr {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.consult-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.consult-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.consult-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.consult-input:focus { outline: none; border-color: var(--brand); }
.consult-textarea { resize: vertical; min-height: 60px; }
select.consult-input { cursor: pointer; }
.consult-save-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.consult-saved-msg {
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
}
@media (max-width: 900px) {
  .consult-grid { grid-template-columns: 1fr; }
  .consult-section { border-right: none; border-bottom: 1px solid var(--border); }
  .consult-section:last-child { border-bottom: none; }
}

/* ── Attachments Tab ───────────────────────────────────────── */
.attach-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
}
.attach-count { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.attach-upload-btn {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.attach-progress-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 20px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.attach-progress-bar {
  height: 4px; background: var(--brand); border-radius: 4px;
  width: 0%; transition: width 0.3s; flex: 1;
}
.attach-progress-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.attach-list { display: flex; flex-direction: column; padding: 8px 0; }
.attach-empty { padding: 40px; text-align: center; color: var(--text-dim); font-size: 13px; }
.attach-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.attach-row:hover { background: var(--bg); }
.attach-icon { font-size: 22px; flex-shrink: 0; }
.attach-meta { flex: 1; min-width: 0; }
.attach-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-sub  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.attach-actions { display: flex; gap: 8px; flex-shrink: 0; }
.attach-btn {
  font-size: 12px; font-weight: 600; padding: 4px 10px;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--brand); cursor: pointer; text-decoration: none;
  transition: background 0.12s;
}
.attach-btn:hover { background: var(--border); }
.attach-btn--del { color: var(--red); }

/* ── Badges ────────────────────────────────────────────────── */
.cd-badge-chip {
  font-size: 20px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px; display: inline-flex;
  align-items: center; justify-content: center; cursor: default;
}
.cd-badges-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
}
.cd-badges-modal {
  background: var(--surface); border-radius: 16px; width: 480px; max-width: 95vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25); overflow: hidden;
}
.cd-badges-modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 700; color: var(--text);
}
.cd-badges-modal-close {
  background: none; border: none; font-size: 16px; cursor: pointer; color: var(--text-dim);
}
.cd-badges-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px;
}
.cd-badge-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 10px;
}
.cd-badge-card-emoji { font-size: 28px; margin-bottom: 8px; }
.cd-badge-card-label { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cd-badge-card-desc  { font-size: 11px; color: var(--text-dim); }

/* ── Compliance Chart Modal ─────────────────────────────────── */
.cd-compliance-modal {
  background: var(--surface); border-radius: 16px;
  width: 720px; max-width: 96vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25); overflow: hidden;
}
.cd-comp-range-btns { display: flex; gap: 4px; }
.cd-comp-range-btn {
  font-size: 12px; font-weight: 700; padding: 4px 10px;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-muted); cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cd-comp-range-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.cd-comp-range-btn:hover:not(.active) { background: var(--border); }

/* ── Stripe Billing Card (Sales + Invoices tabs) ─────────────── */
.cd-billing-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
}
.cd-billing-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cd-billing-title { font-size: 14px; font-weight: 700; color: var(--text); }
.cd-billing-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 20px; text-transform: uppercase;
}
.cd-billing-badge--free      { background: var(--border); color: var(--text-dim); }
.cd-billing-badge--active    { background: rgba(34,197,94,.15); color: #16a34a; }
.cd-billing-badge--trialing  { background: rgba(59,130,246,.15); color: #2563eb; }
.cd-billing-badge--past_due  { background: rgba(239,68,68,.15); color: #dc2626; }
.cd-billing-badge--cancelled { background: rgba(107,114,128,.15); color: #6b7280; }
.cd-billing-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.cd-billing-row:last-of-type { border-bottom: none; }
.cd-billing-label { color: var(--text-dim); }
.cd-billing-value { color: var(--text); font-weight: 600; }
.cd-billing-mono  { font-family: monospace; font-size: 11px; color: var(--text-dim); }
.cd-billing-btn {
  font-size: 12px; font-weight: 700; padding: 8px 14px;
  border-radius: 8px; border: none; cursor: pointer; transition: opacity .15s;
}
.cd-billing-btn:hover { opacity: .85; }
.cd-billing-btn--primary   { background: var(--brand); color: #fff; }
.cd-billing-btn--secondary { background: var(--border); color: var(--text); }

/* Manual subscription override */
.cd-sub-edit-section {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 4px;
}
.cd-sub-edit-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cd-sub-edit-toggle-btn {
  background: none;
  border: 1.5px solid var(--border-dark);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.cd-sub-edit-toggle-btn:hover { border-color: var(--brand); color: var(--brand); }
.cd-sub-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cd-sub-edit-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cd-sub-edit-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  width: 90px;
  flex-shrink: 0;
}
.cd-sub-edit-select,
.cd-sub-edit-input {
  flex: 1;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  cursor: pointer;
}
.cd-sub-edit-select:focus,
.cd-sub-edit-input:focus { border-color: var(--brand); }
.cd-sub-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.cd-sub-edit-msg {
  font-size: 12px;
  color: var(--brand);
  flex: 1;
}

/* Coached rate row */
.cd-billing-coached-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  gap: 12px;
}
.cd-billing-coached-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.cd-billing-coached-save {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
}
.cd-billing-coached-msg {
  font-size: 12px;
  color: var(--brand);
  flex: 1;
}

/* iOS-style toggle switch */
.cd-coached-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.cd-coached-toggle input { display: none; }
.cd-coached-track {
  position: absolute;
  inset: 0;
  background: var(--border-dark);
  border-radius: 13px;
  cursor: pointer;
  transition: background .2s;
}
.cd-coached-track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s;
}
.cd-coached-toggle input:checked + .cd-coached-track { background: var(--brand); }
.cd-coached-toggle input:checked + .cd-coached-track::after { transform: translateX(18px); }

.cd-invoice-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; font-size: 13px;
}
.cd-invoice-desc { color: var(--text); font-weight: 600; }
.cd-invoice-date { color: var(--text-dim); font-size: 11px; margin-top: 2px; }
.cd-invoice-right { display: flex; align-items: center; gap: 10px; }
.cd-invoice-amount { font-weight: 700; color: var(--text); }
.cd-invoice-status {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  text-transform: uppercase;
}
.cd-invoice-status--paid   { background: rgba(34,197,94,.15); color: #16a34a; }
.cd-invoice-status--open   { background: rgba(239,68,68,.15); color: #dc2626; }
.cd-invoice-status--void   { background: var(--border); color: var(--text-dim); }
.cd-invoice-pdf-link {
  font-size: 11px; color: var(--brand); text-decoration: none; font-weight: 600;
}
.cd-invoice-pdf-link:hover { text-decoration: underline; }

/* ── Paywall plan cards ───────────────────────────────────────── */
.paywall-plan-btn {
  width: 100%; padding: 16px 18px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--border); background: var(--surface);
  transition: border-color .15s, box-shadow .15s; text-align: left;
}
.paywall-plan-btn:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,184,148,.12); }
.paywall-plan-btn--featured { border-color: var(--brand); background: rgba(0,184,148,.06); }

/* ── Plate Check Modal chips ─────────────────────────────────── */
.plate-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.plate-chip {
  padding: 8px 14px; border-radius: 20px; border: 2px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 14px;
  font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s;
  white-space: nowrap;
}
.plate-chip:hover  { border-color: var(--brand); }
.plate-chip.active { border-color: var(--brand); background: rgba(0,184,148,.12); color: var(--brand); }

/* ── Quick-fix correction sheet ──────────────────────────────── */
.fix-entry-link {
  display: block; margin: 8px auto 0; background: none; border: none;
  font-size: 12px; color: var(--text-dim); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; opacity: 0.7;
  padding: 4px 0;
}
.fix-entry-link:hover { opacity: 1; }

.fix-item-row {
  border-bottom: 1px solid var(--border); padding: 12px 0;
}
.fix-item-row:last-child { border-bottom: none; }
.fix-item-info { margin-bottom: 8px; }
.fix-item-name { font-size: 14px; font-weight: 700; color: var(--text); }
.fix-item-cal  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fix-item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fix-action-btn {
  padding: 6px 12px; border-radius: 16px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 12px;
  font-weight: 600; cursor: pointer; transition: border-color .12s;
}
.fix-action-btn:hover { border-color: var(--brand); color: var(--brand); }
.fix-action-remove { color: #ef4444; border-color: rgba(239,68,68,.3); }
.fix-action-remove:hover { border-color: #ef4444; background: rgba(239,68,68,.06); color: #ef4444; }

.fix-rename-form {
  display: flex; gap: 8px; align-items: center; margin-top: 10px;
}
.fix-rename-input {
  flex: 1; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13px;
}
.fix-rename-input:focus { border-color: var(--brand); outline: none; }

/* ── Morning check-in modal ──────────────────────────────────── */
/* Morning check-in modal — bottom sheet on mobile, centered card on desktop */
.morning-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.morning-modal-sheet {
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 28px 24px 44px;
  box-shadow: var(--shadow-md);
}

@media (min-width: 600px) {
  .morning-modal-backdrop {
    align-items: center;
  }
  .morning-modal-sheet {
    border-radius: 20px;
    padding: 36px 32px;
    max-width: 440px;
  }
}

.morning-section {
  margin-bottom: 20px;
}
.morning-label {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
.morning-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.morning-chip {
  padding: 9px 14px; border-radius: 20px; border: 2px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13px;
  font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s;
  white-space: nowrap;
}
.morning-chip:hover  { border-color: var(--brand); }
.morning-chip.active { border-color: var(--brand); background: rgba(0,184,148,.12); color: var(--brand); }

/* ── Onboarding avatar picker ─────────────────────────────── */
.onb-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.onb-avatar-btn {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px dashed var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .15s;
  padding: 0;
}
.onb-avatar-btn:hover { border-color: var(--brand); }
.onb-avatar-placeholder { color: var(--text-muted); display: flex; }
.onb-avatar-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.onb-avatar-edit-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-avatar-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.onb-photo-choice {
  display: flex; gap: 10px; margin: 0 0 16px;
}
.onb-photo-choice-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 10px; font-size: 14px; font-weight: 700;
  border-radius: 12px;
}
.onb-photo-choice-btn svg { flex-shrink: 0; color: var(--brand); }

/* ── Header user avatar ───────────────────────────────────── */
.header-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.header-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Goals tab profile avatar ─────────────────────────────── */
.profile-avatar-link {
  font-size: 13px; font-weight: 700; color: var(--brand);
  background: none; border: none; cursor: pointer; padding: 0; text-align: left;
}
.profile-avatar-link:hover { text-decoration: underline; }
.profile-avatar-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s;
}
.profile-avatar-btn:hover { border-color: var(--brand); }
.profile-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-avatar-initials {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
}

/* Saved workouts — re-run a session you liked */
.cw-saved-wrap { margin: 14px 0 4px; }
.cw-saved-list { display: flex; flex-direction: column; gap: 8px; }
.cw-saved-row {
  /* flex-start, not center: a 67-character name wraps to three lines now, and
     centring would float the Load button and the ✕ in the middle of a tall
     row, away from the name they belong to. Same lesson as the plan rows on
     9/15. */
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
}
.cw-saved-info { flex: 1; min-width: 0; }
/* Ben, 9/16: "in mobile on the workout it still doesnt say the full name of
   the workout can we fix that on mobile?"
   His workout names run to 67 characters — "THU – SQUAT & PUSH (Quads/Chest/
   Scap Control, Knee & Shoulder Safe)" — and the part after the dash is the
   part that says what the session IS. Clamping to one line kept the day and
   threw away the meaning. Same fix as the plan row on 9/15. */
.cw-saved-name {
  font-size: 14.5px; font-weight: 700; color: var(--text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.cw-saved-meta { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.cw-saved-load {
  flex-shrink: 0; padding: 9px 16px; min-height: 40px;
  border: 1.5px solid var(--brand); border-radius: 10px;
  background: none; color: var(--brand); font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.cw-saved-del {
  flex-shrink: 0; background: none; border: none;
  color: var(--text-muted); font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0 4px; min-height: 40px; min-width: 32px;
}
.cw-summary-save-btn {
  width: 100%; margin-bottom: 10px; padding: 13px;
  border: 1.5px solid var(--brand); border-radius: 12px;
  background: none; color: var(--brand); font-size: 15px; font-weight: 800; cursor: pointer;
}
.cw-summary-save-btn:disabled { opacity: .75; cursor: default; }

/* Workout history detail — the client's own sets, reps and weights */
.cw-hist-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: 13px; font-weight: 800; color: var(--text);
  margin-bottom: 8px;
}
.cw-hist-vol { font-size: 12px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.cw-hist-ex { padding: 7px 0; border-bottom: 1px solid var(--border); }
.cw-hist-ex:last-child { border-bottom: none; }
.cw-hist-ex-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cw-hist-ex-name { font-size: 13px; font-weight: 700; color: var(--text); }
.cw-hist-ex-count { font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; }
.cw-hist-sets {
  font-size: 12.5px; color: var(--text-muted); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.cw-hist-best { font-size: 11.5px; font-weight: 700; color: var(--brand); margin-top: 2px; }
.cw-hist-int  { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-top: 2px; }
.cw-hist-empty { font-size: 12.5px; color: var(--text-muted); font-style: italic; }

/* Setup answers in Goals — the onboarding intake, editable later */
.goals-profile { margin-top: 24px; }
.goals-profile-note {
  font-size: 13px; color: var(--text-muted);
  margin: -4px 0 14px; line-height: 1.45;
}
.goals-profile select,
.goals-profile textarea,
.goals-profile input[type="text"] {
  font-family: inherit; font-size: 16px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px;
}
.goals-profile textarea { width: 100%; resize: vertical; }
.form-row--stack { display: block; }
.form-row--stack label { display: block; margin-bottom: 6px; }
.form-row--stack input[type="text"] { width: 100%; box-sizing: border-box; }

/* Coach Style sits in a stacked row so the two cards get the full width.
   Ben, 8/31: side by side with the label they were ~86px each against ~120px
   of content, and the label collided with the sub-label. These guards stop it
   recurring on a narrow phone. */
.form-row--stack .coach-style-toggle { margin-top: 2px; }
.coach-style-btn { min-width: 0; }              /* a flex item will not shrink without this */
.coach-style-label, .coach-style-sub { text-align: center; line-height: 1.25; }
.coach-style-sub { font-size: 11px; }
/* Below ~340px two cards cannot hold their text — stack them rather than clip. */
@media (max-width: 340px) {
  .coach-style-toggle { flex-direction: column; }
  .coach-style-btn { min-height: 62px; flex-direction: row; justify-content: center; gap: 8px; }
}

/* Recovery type picker */
.cw-rec-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 4px;
}
.cw-rec-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 16px 14px;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 14px;
  cursor: pointer; text-align: left;
}
.cw-rec-tile:active { border-color: var(--brand); }
/* Was font-size, which sized an emoji GLYPH. An inline SVG needs real
   dimensions — leaving the font-size rule would have rendered these at
   whatever the browser felt like. (Ben, 8/26) */
.cw-rec-icon { line-height: 0; margin-bottom: 6px; color: var(--brand); }
.cw-rec-icon svg { width: 24px; height: 24px; display: block; }
/* The running figure on the Log Cardio button, aligned to the label text. */
.cw-btn-icon { width: 17px; height: 17px; vertical-align: -3px; }
.cw-rec-name { font-size: 14.5px; font-weight: 800; color: var(--text); }
.cw-rec-blurb { font-size: 11.5px; color: var(--text-muted); }

/* ── Workout tab, Option 2 of 3 (Ben, 10/3: "that screen is really
   confusing" — compared at https://claude.ai/artifact/HRQzfJWcjunYdGqb9KTatr,
   picked the one with no collapsed accordion and no single oversized hero).
   Every real action is now its own plain card, same chrome, ordered by what
   actually matters first — nothing is hidden behind a tap any more. ── */
.cw-sec-card {
  display: block; width: 100%; margin: 0 0 10px; padding: 14px 16px;
  background: var(--surface); border: 1.5px solid var(--border-dark); border-radius: 12px;
  /* Ben, 10/3: "the top i cant see it in dark mode" — --surface and --bg
     are nearly the same value in the dark palette (#18211f vs #101817), so
     a 1.5px --border outline alone read as barely-there. --border-dark is
     the stronger of the two border tokens, and the shadow is the same one
     .cw-assigned-card/.cw-gap-banner already rely on for real depth on a
     dark background, not just a thin outline. */
  box-shadow: var(--shadow);
  text-align: left; font: inherit; color: inherit;
}
.cw-sec-card-label {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 10px;
}

/* Start Workout — was a full-bleed gradient hero; slimmed to the same card
   chrome as everything else, but it is ALWAYS the first card (never
   reordered by the hide-cards preference below), because its subtitle is
   the only client-visible confirmation that the gap banner / muscle picker
   / "Train more this week" button actually queued something. */
.cw-hero-start-card {
  cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  border-color: var(--brand);
}
.cw-hero-start-card:active { background: var(--brand-light); }
.cw-hero-start-label { font-size: 15.5px; font-weight: 800; color: var(--brand-on-light); }
.cw-hero-start-sub { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }

.cw-more-body { display: flex; flex-direction: column; gap: 10px; }
.cw-more-body .cw-bodymap-btn { margin: 0; }

/* Today's suggestion — playable rows, not bare name chips */
#cwGapChips { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.cw-gap-row {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.cw-gap-row:last-child { border-bottom: none; }
.cw-gap-media {
  position: relative; flex-shrink: 0;
  width: 58px; height: 44px; padding: 0;
  border: none; background: none; border-radius: 8px; overflow: hidden; cursor: pointer;
}
.cw-gap-media[disabled] { cursor: default; }
.cw-gap-thumb {
  width: 58px; height: 44px; object-fit: cover; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text-muted); font-weight: 800;
}
.cw-gap-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .34); color: #fff; font-size: 13px;
}
.cw-gap-info { flex: 1; min-width: 0; }
.cw-gap-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cw-gap-meta { font-size: 11.5px; color: var(--text-muted); text-transform: capitalize; }
.cw-gap-add {
  flex-shrink: 0; padding: 8px 15px; min-height: 38px;
  border: 1.5px solid var(--brand); border-radius: 10px;
  background: none; color: var(--brand); font-size: 13px; font-weight: 800; cursor: pointer;
}
.cw-gap-add.added { background: var(--brand); color: #fff; }
/* Swap to another exercise for the same muscle group (Ben, 9/19) — sits
   between the exercise info and Add, same 38px touch target as Add. */
.cw-gap-swap {
  flex-shrink: 0; width: 38px; height: 38px; padding: 0;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: none; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cw-gap-swap svg { width: 17px; height: 17px; }
.cw-gap-swap:hover { border-color: var(--brand); color: var(--brand); }

/* ── Coach analysis panel ──────────────────────────────────────
   Verdict first, evidence beneath, every quote traceable to a real
   client note. Mirrors the approved mockup (Ben, 8/6). */
.ca-analyze {
  width: 100%; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--brand); color: #04211c;
  font-size: 15px; font-weight: 800; padding: 14px;
  font-family: inherit; letter-spacing: 0.01em;
}
.ca-analyze:disabled { opacity: 0.6; cursor: default; }
.ca-analyze-sub {
  font-size: 12px; color: var(--text-dim); text-align: center; margin: 8px 0 0;
}
.ca-out { margin-top: 14px; }

.ca-load-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--text-muted); padding: 3px 0;
}
.ca-load-row.ca-pending { color: var(--text-dim); }
.ca-tick { color: var(--brand); font-weight: 800; }
.ca-bar {
  height: 3px; background: var(--border); border-radius: 2px;
  overflow: hidden; margin: 12px 0 0;
}
.ca-bar i {
  display: block; height: 100%; width: 40%; background: var(--brand);
  border-radius: 2px; animation: caBar 1.6s ease-in-out infinite;
}
@keyframes caBar {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-bar i { animation: none; width: 100%; opacity: 0.5; }
}

.ca-verdict {
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: 12px; background: var(--surface);
  padding: 15px; margin-bottom: 12px;
}
.ca-verdict.ca-warn { border-left-color: var(--red); }
.ca-tag {
  display: inline-block; font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-light);
  padding: 3px 8px; border-radius: 4px; margin-bottom: 9px;
}
.ca-verdict.ca-warn .ca-tag { color: var(--red); background: rgba(229, 84, 75, 0.12); }
.ca-verdict-line { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0; }
.ca-verdict-sub {
  font-size: 13.5px; color: var(--text-muted); margin: 7px 0 0; line-height: 1.55;
}

.ca-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.ca-card-title {
  font-size: 11px; font-weight: 750; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px;
}
.ca-finding {
  display: flex; gap: 11px; padding: 13px 0; border-top: 1px solid var(--border);
}
.ca-finding:first-of-type { border-top: 0; padding-top: 2px; }
.ca-sev {
  width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 7px;
  background: var(--text-dim);
}
.ca-sev-pain  { background: var(--red); }
.ca-sev-watch { background: var(--yellow, #e0a63c); }
.ca-sev-good  { background: var(--brand); }
.ca-f-body { min-width: 0; flex: 1; }
.ca-f-head { font-size: 14.5px; font-weight: 700; margin: 0 0 3px; }
.ca-f-why  { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.55; }
.ca-quote {
  font-size: 13px; color: var(--text-muted); font-style: italic;
  border-left: 2px solid var(--border); padding: 3px 0 3px 10px; margin: 8px 0 0;
}
.ca-quote cite {
  display: block; font-style: normal; font-size: 11.5px;
  color: var(--text-dim); margin-top: 3px; letter-spacing: 0.02em;
}
.ca-f-do {
  font-size: 13.5px; margin: 9px 0 0; padding: 9px 11px; border-radius: 8px;
  background: var(--brand-light); color: var(--text); line-height: 1.5;
}
.ca-f-do b { color: var(--brand); font-weight: 750; }
.ca-foot {
  font-size: 11.5px; color: var(--text-dim); line-height: 1.5;
  border-top: 1px solid var(--border); padding-top: 10px; margin: 2px 0 0;
}
.ca-empty { font-size: 13.5px; color: var(--text-muted); margin: 0; }

/* ── Coaching principles library ───────────────────────────────
   Rules the AI follows. Retired ones stay visible but muted — a rule
   that shaped an assigned program has to remain explainable. */
.tr-prin-body { padding: 4px 0 20px; }
.tr-prin-count {
  font-size: 12.5px; color: var(--text-muted); margin: 0 0 12px; font-weight: 600;
}
.tr-prin-card {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); padding: 14px; margin-bottom: 10px;
}
.tr-prin-retired { opacity: 0.62; }
.tr-prin-rule { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.45; }
.tr-prin-note {
  font-size: 13px; color: var(--text-muted); margin-top: 5px; line-height: 1.5;
}
.tr-prin-scopes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tr-prin-scope {
  font-size: 11.5px; font-weight: 700; color: var(--brand);
  background: var(--brand-light); padding: 3px 9px; border-radius: 20px;
}
.tr-prin-meta {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px;
  font-size: 11.5px; color: var(--text-dim);
}
.tr-prin-actions { display: flex; gap: 8px; margin-top: 11px; }
.tr-prin-btn {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--brand);
  border: 1px solid var(--brand); padding: 7px 14px; border-radius: 20px;
  min-height: 36px;
}
.tr-prin-btn-quiet { color: var(--text-muted); border-color: var(--border); }
.tr-prin-btn-go { background: var(--brand); color: #fff; }
.tr-prin-btn:disabled { opacity: 0.6; cursor: default; }
.tr-prin-toggle {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--text-muted); border: 0;
  padding: 10px 0; margin-top: 4px;
}
.tr-prin-none { font-size: 13.5px; color: var(--text-muted); }

.tr-prin-empty { text-align: center; padding: 30px 18px; }
.tr-prin-empty-hd { font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.tr-prin-empty-sub {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.6;
  margin: 0 auto 18px; max-width: 46ch;
}

/* editor */
.tr-prin-ov {
  position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0; overflow-y: auto;
}
@media (min-width: 640px) { .tr-prin-ov { align-items: center; padding: 24px; } }
.tr-prin-modal {
  background: var(--surface); width: 100%; max-width: 520px;
  border-radius: 18px 18px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 92vh; overflow-y: auto;
}
@media (min-width: 640px) { .tr-prin-modal { border-radius: 18px; } }
.tr-prin-modal-hd { font-size: 17px; font-weight: 800; margin-bottom: 16px; }
.tr-prin-lbl {
  display: block; font-size: 12px; font-weight: 750; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin: 14px 0 5px;
}
.tr-prin-opt { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-dim); }
.tr-prin-help { font-size: 12.5px; color: var(--text-muted); margin: 0 0 9px; line-height: 1.5; }
.tr-prin-input {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 12px; resize: vertical;
}
.tr-prin-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tr-prin-scope-grid {
  display: grid; grid-template-columns: 1fr; gap: 2px;
}
@media (min-width: 420px) { .tr-prin-scope-grid { grid-template-columns: 1fr 1fr; } }
.tr-prin-check {
  display: flex; align-items: center; gap: 9px; padding: 9px 4px;
  font-size: 13.5px; color: var(--text); cursor: pointer; min-height: 40px;
}
.tr-prin-check input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.tr-prin-err { font-size: 13px; color: var(--red); font-weight: 700; margin: 12px 0 0; }
.tr-prin-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;
}

/* ── "Why did the weight drop?" prompt ─────────────────────────
   Fires only when a client drops weight mid-exercise — the moment they know
   something the coach doesn't. Skippable in one tap: a prompt that blocks the
   set would get dismissed reflexively and teach them to ignore it. */
.cw-why-ov {
  position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 640px) { .cw-why-ov { align-items: center; padding: 24px; } }
.cw-why-sheet {
  background: var(--surface); width: 100%; max-width: 480px;
  border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  animation: cwWhyUp 0.18s ease-out;
}
@media (min-width: 640px) { .cw-why-sheet { border-radius: 18px; } }
@keyframes cwWhyUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cw-why-sheet { animation: none; } }
.cw-why-hd { font-size: 16px; font-weight: 800; color: var(--text); }
.cw-why-sub { font-size: 13.5px; color: var(--text-muted); margin: 5px 0 14px; }
.cw-why-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cw-why-chip {
  font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 9px 14px; min-height: 40px;
}
.cw-why-chip-on { background: var(--brand-light); border-color: var(--brand); color: var(--brand-on-light); }
.cw-why-note-wrap { position: relative; }
.cw-why-text {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 44px 11px 12px; resize: vertical;
}
.cw-why-text:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cw-why-note-wrap .cw-note-mic { position: absolute; right: 7px; top: 7px; }
.cw-why-actions { display: flex; gap: 10px; margin-top: 14px; }
.cw-why-skip {
  flex: 1; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 12px; padding: 13px; min-height: 48px;
}
.cw-why-save {
  flex: 2; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 12px; padding: 13px; min-height: 48px;
}

/* ── AI program builder: what the consultation contributed ─────
   The intake data was being collected and ignored. Showing what the AI is
   working from makes the personalisation visible — and an empty file
   obvious BEFORE a generic program gets written. */
.tr-aip-consult {
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: 10px; background: var(--bg); padding: 10px 12px;
}
.tr-aip-consult-hd {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 4px;
}
.tr-aip-consult-body { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.tr-aip-consult-inj {
  font-size: 12.5px; color: var(--text); line-height: 1.5;
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border);
  font-weight: 650;
}
.tr-aip-consult-empty { border-left-color: var(--yellow); }
.tr-aip-consult-empty .tr-aip-consult-hd { color: var(--yellow); }

/* A YouTube suggestion mid-drag — matches the library card's drag feedback. */
.tr-yt-card-dragging { opacity: 0.5; border-color: var(--brand); }

/* Watch it before committing it to the library. */
.tr-ytpick-preview {
  margin: 10px 0 4px; border-radius: 10px; overflow: hidden;
  background: #000; aspect-ratio: 16 / 9;
}
.tr-ytpick-preview iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── YouTube suggestion cards, rebuilt simply (v388) ───────────
   Five attempts at a click-anywhere card with a popup dialog failed on Ben's
   machine. This version has no delegation, no dialog and no iframe: two
   ordinary buttons per card, wired directly to the element. The thumbnail is
   a plain link that opens YouTube in a new tab for previewing. */
.tr-yt-card2 {
  flex: 0 0 168px; scroll-snap-align: start;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column;
}
.tr-yt-card2-thumb {
  position: relative; display: block; aspect-ratio: 16/9;
  background: var(--border); text-decoration: none;
}
.tr-yt-card2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-yt-card2-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6);
  opacity: 0.9; transition: opacity .15s;
}
.tr-yt-card2-thumb:hover .tr-yt-card2-play { opacity: 1; }
.tr-yt-card2-name {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; padding: 8px 9px 6px;
  font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--text);
  flex: 1;
}
.tr-yt-card2-btns { display: flex; flex-direction: column; gap: 5px; padding: 0 9px 9px; }
.tr-yt-btn {
  font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer;
  border-radius: 8px; padding: 9px 8px; min-height: 38px; width: 100%;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
}
.tr-yt-btn-save { background: transparent; color: var(--brand); }
.tr-yt-btn:disabled { opacity: 0.6; cursor: default; }
.tr-yt-btn:active { transform: translateY(1px); }

/* ── Custom exercise dialog ────────────────────────────────────
   Modelled on the Trainerize screen Ben sent: drop zone left, details right,
   one save button. Video upload is gated on Supabase storage policies, so the
   drop zone works but reports clearly when storage is not switched on. */
.tr-cust-ov {
  position: fixed; inset: 0; z-index: 2600; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto;
}
.tr-cust-modal {
  position: relative; background: var(--surface); border-radius: 14px;
  width: 100%; max-width: 940px; max-height: 92vh; overflow-y: auto;
  padding: 26px 24px 24px;
}
.tr-cust-x {
  position: absolute; top: 10px; right: 12px; border: 0; background: none;
  font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer;
  padding: 4px 8px; min-height: 40px; min-width: 40px;
}
.tr-cust-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 820px) { .tr-cust-grid { grid-template-columns: 1.25fr 1fr; gap: 26px; } }

.tr-cust-drop {
  border: 2px dashed var(--border); border-radius: 12px;
  padding: 22px 18px; text-align: center; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tr-cust-over { border-color: var(--brand); background: var(--brand-light); }
.tr-cust-drop-hd { font-size: 18px; font-weight: 800; color: var(--text); }
.tr-cust-drop-sub {
  font-size: 13px; color: var(--text-muted); margin: 7px 0 14px;
  line-height: 1.5; max-width: 42ch;
}
.tr-cust-choose {
  font: inherit; font-size: 14px; font-weight: 750; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 10px; padding: 11px 20px; min-height: 44px;
}
.tr-cust-drop-note { font-size: 12.5px; color: var(--text-muted); margin: 10px 0 0; min-height: 18px; }
.tr-cust-bad { color: var(--red); font-weight: 700; }
.tr-cust-or {
  font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); margin: 16px 0 10px;
}
.tr-cust-drop .tr-cust-lbl { align-self: flex-start; }
.tr-cust-drop .tr-cust-input { text-align: left; }

.tr-cust-form { display: flex; flex-direction: column; }
.tr-cust-lbl {
  display: block; font-size: 12px; font-weight: 750; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin: 12px 0 5px;
}
.tr-cust-form .tr-cust-lbl:first-child { margin-top: 0; }
.tr-cust-input {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 12px;
}
.tr-cust-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tr-cust-area { resize: vertical; min-height: 120px; }
.tr-cust-err { font-size: 13px; color: var(--red); font-weight: 700; margin: 12px 0 0; }
.tr-cust-save {
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 10px; padding: 14px; min-height: 48px; margin-top: 18px;
}
.tr-cust-save:disabled { opacity: 0.6; cursor: default; }
.tr-cust-once {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--text-muted); border: 0;
  padding: 12px; min-height: 44px; margin-top: 4px;
}

/* Autofill — pulls sets/reps/weight from the client's own last performance. */
.cw-autofill-btn {
  font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer;
  background: transparent; color: var(--brand);
  border: 1px solid var(--brand); border-radius: 8px;
  padding: 8px 12px; min-height: 40px; white-space: nowrap;
}
.cw-autofill-btn:hover { background: var(--brand-light); }
.cw-autofill-btn:active { transform: translateY(1px); }

/* ── Unsaved program warning ───────────────────────────────────
   The workout editor only updates an in-memory array; the program reaches the
   database when the program screen's Save is pressed. Nothing said so, and a
   whole program was lost to that gap (8/7). */
.tr-pe-dirty-bar {
  background: var(--yellow-bg); color: #7a5210;
  border: 1px solid var(--yellow); border-radius: 10px;
  padding: 11px 13px; margin: 0 0 12px;
  font-size: 13.5px; font-weight: 700; line-height: 1.45;
}
.tr-pe-save-dirty {
  animation: peNudge 1.6s ease-in-out 2;
  box-shadow: 0 0 0 3px var(--brand-light);
}
@keyframes peNudge {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .tr-pe-save-dirty { animation: none; } }

/* ── WOD — workout of the day ──────────────────────────────────
   Traffic light throughout, per Ben: green go, amber caution, red watch out. */
:root {
  --wod-go: #1a9c62; --wod-go-bg: rgba(26,156,98,.10);
  --wod-caution: #b8791a; --wod-caution-bg: rgba(184,121,26,.10);
  --wod-watch: #c93a31; --wod-watch-bg: rgba(201,58,49,.10);
}
.tr-wod-body { padding: 4px 0 24px; }
.wod-vitals {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.wod-v { flex: 1; min-width: 90px; }
.wod-v dt {
  font-size: 10.5px; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim); margin: 0 0 3px;
}
.wod-v dd {
  margin: 0; font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.wod-v dd small { font-size: 12px; font-weight: 650; color: var(--text-dim); margin-left: 3px; }
.wod-v-go { color: var(--wod-go); }
.wod-v-caution { color: var(--wod-caution); }
.wod-v-watch { color: var(--wod-watch); }
.wod-nodata { font-size: 13.5px; color: var(--text-muted); margin: 0; }

.wod-nudge {
  border: 1px solid var(--border); border-left: 3px solid var(--wod-go);
  background: var(--wod-go-bg); border-radius: 12px; padding: 15px 16px; margin-top: 12px;
}
.wod-nudge.wod-caution { border-left-color: var(--wod-caution); background: var(--wod-caution-bg); }
.wod-nudge.wod-watch   { border-left-color: var(--wod-watch);   background: var(--wod-watch-bg); }
.wod-nudge-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wod-go); margin-bottom: 6px;
}
.wod-nudge.wod-caution .wod-nudge-tag { color: var(--wod-caution); }
.wod-nudge.wod-watch   .wod-nudge-tag { color: var(--wod-watch); }
.wod-nudge-line { font-size: 16px; font-weight: 750; line-height: 1.4; margin: 0; }
.wod-nudge-why { font-size: 13.5px; color: var(--text-muted); margin: 8px 0 0; line-height: 1.55; }

.wod-cols { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
@media (min-width: 860px) { .wod-cols { grid-template-columns: 1.4fr 1fr; } }
.wod-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
}
.wod-panel-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wod-panel-hd h4 { font-size: 14px; font-weight: 800; margin: 0; flex: 1; }
.wod-pill {
  font-size: 11px; font-weight: 750; color: var(--brand);
  background: var(--brand-light); padding: 3px 9px; border-radius: 20px;
}

.wod-row, .wod-suggest {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: 10px; margin-bottom: 8px; background: var(--bg);
}
.wod-row.wod-go { border-left-color: var(--wod-go); }
.wod-row.wod-caution { border-left-color: var(--wod-caution); background: var(--wod-caution-bg); }
.wod-row.wod-watch { border-left-color: var(--wod-watch); background: var(--wod-watch-bg); }
.wod-suggest { border-style: dashed; border-left-width: 1px; }
.wod-row-thumb {
  width: 36px; height: 36px; border-radius: 8px; background: var(--border);
  flex: none; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--text-dim); font-size: 14px;
}
.wod-row-name { flex: 1; min-width: 0; }
.wod-row-name b { display: block; font-size: 14px; font-weight: 700; }
.wod-row-name span { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wod-flag { font-size: 11.5px; font-weight: 750; white-space: nowrap; }
.wod-flag-caution { color: var(--wod-caution); }
.wod-flag-watch { color: var(--wod-watch); }
.wod-swap, .wod-add {
  font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer;
  background: transparent; color: var(--brand); border: 1px solid var(--brand);
  border-radius: 8px; padding: 7px 11px; min-height: 36px; white-space: nowrap;
}
.wod-x {
  font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--text-dim);
  padding: 4px 6px; min-height: 36px; min-width: 32px;
}
.wod-empty { font-size: 13.5px; color: var(--text-muted); margin: 6px 0; }
.wod-search {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; margin-top: 8px;
}
.wod-results { margin-top: 6px; }
.wod-hit {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; text-align: left;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 5px; min-height: 42px; color: var(--text);
}
.wod-hit-add { color: var(--brand); font-weight: 750; font-size: 12.5px; }
.wod-save {
  width: 100%; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 10px; padding: 13px; min-height: 48px; margin-top: 12px;
}
.wod-save:disabled { opacity: .6; cursor: default; }

/* swap sheet */
.wod-ov {
  position: fixed; inset: 0; z-index: 2700; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
}
.wod-sheet {
  background: var(--surface); border-radius: 14px; width: 100%; max-width: 620px;
  max-height: 92vh; overflow-y: auto; padding: 20px;
}
.wod-sheet-hd { font-size: 17px; font-weight: 800; margin: 0 0 3px; }
.wod-sheet-sub { font-size: 13px; color: var(--text-muted); margin: 0; }
.wod-keeps {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px; margin: 13px 0 16px;
}
.wod-keeps-hd {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px;
}
.wod-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.wod-tag {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: var(--wod-go-bg); color: var(--wod-go);
}
.wod-tag-bad { background: var(--wod-watch-bg); color: var(--wod-watch); }
.wod-keeps-note { font-size: 12.5px; color: var(--text-muted); margin: 9px 0 0; line-height: 1.5; }

.wod-opt {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px;
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: 10px; margin-bottom: 9px;
}
.wod-opt.wod-go { border-left-color: var(--wod-go); }
.wod-opt.wod-caution { border-left-color: var(--wod-caution); }
.wod-opt.wod-watch { border-left-color: var(--wod-watch); }
.wod-opt-body { flex: 1; min-width: 0; }
.wod-opt-name { font-size: 14.5px; font-weight: 750; margin: 0; }
.wod-opt-match { font-size: 12px; font-weight: 750; margin: 2px 0 0; }
.wod-opt.wod-go .wod-opt-match { color: var(--wod-go); }
.wod-opt.wod-caution .wod-opt-match { color: var(--wod-caution); }
.wod-opt.wod-watch .wod-opt-match { color: var(--wod-watch); }
.wod-opt-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.wod-mini {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  background: var(--bg); color: var(--text-dim); border: 1px solid var(--border);
}
.wod-mini-keep { background: var(--wod-go-bg); color: var(--wod-go); border-color: transparent; }
.wod-mini-lose { background: var(--wod-watch-bg); color: var(--wod-watch); border-color: transparent; }
.wod-pick {
  font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer;
  border-radius: 8px; padding: 8px 13px; min-height: 36px; flex: none;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
}
.wod-pick-ghost { background: transparent; color: var(--brand); }
.wod-keep {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px; min-height: 44px; width: 100%; margin-top: 6px;
}

/* ── WOD threshold tuning, in Health ─────────────────────────── */
.tr-tune-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; margin-bottom: 10px;
}
.tr-tune-hd { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.tr-tune-edited {
  font-size: 10.5px; font-weight: 750; color: var(--brand);
  background: var(--brand-light); padding: 2px 8px; border-radius: 20px; margin-left: 6px;
}
.tr-tune-intro { font-size: 12.5px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.55; }
.tr-tune-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--border);
}
.tr-tune-txt { flex: 1; min-width: 0; }
.tr-tune-label { font-size: 13.5px; font-weight: 700; }
.tr-tune-help { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.tr-tune-ctrl { display: flex; align-items: center; gap: 5px; flex: none; }
.tr-tune-input {
  width: 74px; font: inherit; font-size: 14.5px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 9px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.tr-tune-suffix { font-size: 13px; color: var(--text-dim); width: 14px; }
.tr-tune-actions { display: flex; gap: 8px; margin-top: 14px; }
.tr-tune-save {
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 10px; padding: 11px 18px; min-height: 44px;
}
.tr-tune-reset {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 16px; min-height: 44px;
}
.tr-tune-foot { font-size: 12.5px; color: var(--text-muted); margin: 10px 0 0; line-height: 1.5; }

/* Tuning panel — plain-English rows. The number is inline in the sentence so
   the setting reads as a statement, not a labelled field. */
.tr-tune-group {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin: 16px 0 2px;
}
.tr-tune-label { font-size: 14px; font-weight: 650; line-height: 1.45; color: var(--text); }
.tr-tune-n { font-weight: 800; color: var(--brand); }
.tr-tune-now { font-size: 12px; color: var(--text-muted); line-height: 1.45; margin-top: 3px; }
.tr-tune-go { color: var(--wod-go); font-weight: 750; }
.tr-tune-ca { color: var(--wod-caution); font-weight: 750; }
.tr-tune-wa { color: var(--wod-watch); font-weight: 750; }

/* WOD card inside a client's Workouts tab. */
.wod-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; margin: 16px 0;
}
.wod-card-hd { display: flex; align-items: center; gap: 10px; }
.wod-card-hd h4 { font-size: 15px; font-weight: 800; margin: 0; flex: 1; }
.wod-refresh {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--brand); border: 1px solid var(--brand);
  border-radius: 8px; padding: 7px 12px; min-height: 36px;
}
.wod-card-sub { font-size: 12.5px; color: var(--text-muted); margin: 3px 0 12px; line-height: 1.5; }
.wod-vitals-hd {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}

/* ── Client note alerts, top of the coach client list ──────────
   Ben: "I need an alert that tells me what a client has said" — rather than
   opening each client to find out. Pain outranks every compliance number on
   this screen, so it sits above the week digest. */
.na-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 12px; padding: 13px 14px; margin-bottom: 12px;
}
.na-card-pain { border-left-color: var(--red); }
.na-clear { border-left-color: #12a45f; }
.na-clear-txt { font-size: 13.5px; color: var(--text-muted); }
.na-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; flex-wrap: wrap; }
.na-title { font-size: 14px; font-weight: 800; }
.na-badge {
  font-size: 11.5px; font-weight: 800; color: #fff; background: var(--brand);
  min-width: 22px; text-align: center; padding: 2px 8px; border-radius: 20px;
}
.na-badge-pain { background: var(--red); }
.na-painline { font-size: 12px; font-weight: 750; color: var(--red); }

.na-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.na-row:first-of-type { border-top: 0; }
.na-pinned { background: var(--brand-light); border-radius: 8px; padding: 11px 10px; }
.na-body { flex: 1; min-width: 200px; }
.na-top { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.na-client { font-size: 14px; font-weight: 800; }
.na-ex { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.na-when { font-size: 12px; color: var(--text); font-weight: 650; }
/* The relative age stays, quieter — it is the triage signal, not the answer to
   "which session was that?" (Ben, 9/17). */
.na-ago { font-size: 11.5px; color: var(--text-dim); }
/* The workout the note was written in. Its own line: day names run long
   ("SHOULDER STRENGTH, SCAP CONTROL & CORE FINISHER") and wrapping it into the
   top row pushed the date off the card on a phone. */
.na-day {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.na-repeat {
  font-size: 10.5px; font-weight: 800; color: var(--red);
  background: rgba(231, 76, 60, .12); padding: 2px 7px; border-radius: 20px;
}
.na-quote {
  font-size: 13.5px; color: var(--text); line-height: 1.5;
  margin-top: 4px; font-style: italic;
}
.na-pain .na-client { color: var(--red); }
.na-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.na-btn {
  font: inherit; font-size: 12px; font-weight: 750; cursor: pointer;
  background: transparent; color: var(--brand); border: 1px solid var(--brand);
  border-radius: 20px; padding: 7px 12px; min-height: 36px; white-space: nowrap;
}
.na-btn-on { background: var(--brand); color: #fff; }
.na-btn-quiet { color: var(--text-muted); border-color: var(--border); }
.na-more { font-size: 12.5px; color: var(--text-muted); padding: 8px 0 0; }
.na-foot {
  font-size: 11.5px; color: var(--text-dim); line-height: 1.5;
  border-top: 1px solid var(--border); padding-top: 9px; margin-top: 9px;
}

/* ── Contraindication warning ──────────────────────────────────
   Advisory, never blocking. Ben decides — this only makes sure he decides
   knowingly, and offers the movement that trains the same thing safely. */
.cg-ov {
  position: fixed; inset: 0; z-index: 3200; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cg-card {
  background: var(--surface); border-radius: 14px; width: 100%; max-width: 460px;
  padding: 20px; border-top: 4px solid var(--yellow);
}
.cg-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 7px;
}
.cg-line { font-size: 16px; font-weight: 750; line-height: 1.4; margin: 0; }
.cg-why { font-size: 13px; color: var(--text-muted); margin: 7px 0 0; line-height: 1.5; }
.cg-alts-hd {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin: 16px 0 7px;
}
.cg-alts { display: flex; gap: 7px; flex-wrap: wrap; }
.cg-alt {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand);
  border-radius: 20px; padding: 9px 14px; min-height: 40px;
}
.cg-acts { display: flex; gap: 9px; margin-top: 18px; }
.cg-keep {
  flex: 1; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 10px; padding: 12px; min-height: 46px;
}
.cg-remove {
  flex: 1; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  background: var(--yellow); color: #fff; border: 0;
  border-radius: 10px; padding: 12px; min-height: 46px;
}

/* ── Exercises the AI proposed that aren't in the library yet ───
   Ben: "i dont want to limit them because they arent in my library ... you
   could give me a list and then ill give it the ok". Approval, not automatic. */
.tr-prop-card {
  background: var(--brand-light); border: 1px solid var(--brand);
  border-radius: 12px; padding: 14px; margin-bottom: 14px;
}
.tr-prop-hd { font-size: 14px; font-weight: 800; color: var(--brand); }
.tr-prop-sub { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 11px; line-height: 1.5; }
.tr-prop-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.tr-prop-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 4px;
  font-size: 14px; cursor: pointer; min-height: 40px;
}
.tr-prop-row input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.tr-prop-name { font-weight: 650; flex: 1; }
.tr-prop-mus { font-size: 11.5px; color: var(--text-muted); }
.tr-prop-add {
  width: 100%; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 10px; padding: 12px; min-height: 46px;
}
.tr-prop-add:disabled { opacity: .7; cursor: default; }
.tr-prop-note { font-size: 12.5px; color: var(--text-muted); margin: 9px 0 0; line-height: 1.5; }

/* Quick equipment/injury shortcuts on the AI program builder. */
.tr-aip-chip {
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
  background: var(--bg); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 11px; min-height: 32px;
}
.tr-aip-chip:hover { border-color: var(--brand); color: var(--brand); }

/* ── AI generation progress ────────────────────────────────────
   A 5-day block takes 60-70s. A bare spinner for that long reads as hung. */
.tr-gen-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.tr-gen-hd { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.tr-gen-steps { display: flex; flex-direction: column; gap: 7px; }
.tr-gen-step {
  font-size: 13.5px; color: var(--text-dim); padding-left: 22px; position: relative;
  transition: color .3s;
}
.tr-gen-step::before {
  content: '○'; position: absolute; left: 0; color: var(--text-dim);
}
.tr-gen-done { color: var(--text); }
.tr-gen-done::before { content: '✓'; color: var(--brand); font-weight: 800; }
.tr-gen-bar {
  height: 3px; background: var(--border); border-radius: 2px;
  overflow: hidden; margin: 14px 0 8px;
}
.tr-gen-bar i {
  display: block; height: 100%; width: 35%; background: var(--brand);
  border-radius: 2px; animation: genSlide 1.8s ease-in-out infinite;
}
@keyframes genSlide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .tr-gen-bar i { animation: none; width: 100%; opacity: .5; }
}
.tr-gen-time {
  font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.tr-gen-fail {
  background: var(--surface); border: 1px solid var(--red);
  border-radius: 12px; padding: 16px;
}
.tr-gen-fail-hd { font-size: 15px; font-weight: 800; color: var(--red); }
.tr-gen-fail-why { font-size: 13.5px; color: var(--text-muted); margin: 6px 0 14px; line-height: 1.55; }
.tr-gen-retry {
  font: inherit; font-size: 14px; font-weight: 750; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 10px; padding: 11px 18px; min-height: 44px;
}

/* ── Sets stepper ──────────────────────────────────────────────
   A bare number input means the tiny native spinner or the keypad — during a
   session, at the gym. 44px targets on both coach and client. */
.cw-step { display: flex; align-items: center; gap: 4px; }
.cw-step-btn {
  font: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; width: 38px; min-height: 40px; flex: none;
}
.cw-step-btn:active { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.cw-step-val {
  width: 48px !important; text-align: center;
  font-variant-numeric: tabular-nums;
  /* The native spinner is redundant next to real buttons and steals space. */
  -moz-appearance: textfield;
}
.cw-step-val::-webkit-outer-spin-button,
.cw-step-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* A circuit is not a superset — it needs to read as its own thing.
   group_kind was reaching the client and being ignored, so a 4-exercise
   circuit looked like two supersets (Ben, 8/10). */
.cw-card-circuit { border-left-color: var(--sport, #7b5cd6) !important; }
.cw-circuit-label {
  background: rgba(123, 92, 214, .14) !important;
  color: var(--sport, #7b5cd6) !important;
}

/* ── Meal photo lightbox ───────────────────────────────────────
   Coach taps a food photo to see it full size. Photos are in a private bucket
   behind signed URLs, so an expired link is reported rather than shown broken. */
.cd-photo-ov {
  position: fixed; inset: 0; z-index: 3400; background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px; padding: 24px; cursor: zoom-out;
}
.cd-photo-big {
  max-width: 100%; max-height: 82vh; border-radius: 12px;
  object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.cd-photo-cap {
  color: #fff; font-size: 14.5px; font-weight: 650; text-align: center;
  max-width: 40ch; line-height: 1.45;
}
.cd-photo-x {
  position: absolute; top: 14px; right: 16px;
  font: inherit; font-size: 30px; line-height: 1; cursor: pointer;
  background: none; border: 0; color: #fff; opacity: .85;
  min-width: 44px; min-height: 44px;
}
.client-drill-food-photo { cursor: zoom-in; }

/* Create a habit without leaving the client. It still lands in the library —
   the detour to another tab is what did not work mid-session (Ben, 8/10). */
.tr-newhabit {
  border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px;
}
.tr-newhabit-hd {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px;
}
.tr-newhabit-input {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 12px; margin-bottom: 8px;
}
.tr-newhabit-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tr-newhabit-btn {
  width: 100%; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 10px; padding: 11px; min-height: 44px;
}
.tr-newhabit-btn:disabled { opacity: .65; cursor: default; }
.tr-newhabit-note { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; line-height: 1.45; }

/* ── Habits & goals on the client Summary page ─────────────────
   Read-only. Editing stays on the Habits & Goals tab so two copies of the
   same control cannot drift apart. */
.cd-sum-hd { font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.cd-sum-sub {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); margin: 12px 0 6px;
}
.cd-sum-habits { display: flex; gap: 6px; flex-wrap: wrap; }
.cd-sum-habit {
  font-size: 12.5px; font-weight: 650; color: var(--brand);
  background: var(--brand-light); padding: 5px 10px; border-radius: 20px;
}
.cd-sum-more { font-size: 12.5px; color: var(--text-muted); padding: 5px 4px; }
.cd-sum-goal { margin-bottom: 10px; }
.cd-sum-goal-top {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; margin-bottom: 4px;
}
.cd-sum-goal-name { font-weight: 700; }
.cd-sum-goal-num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cd-sum-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.cd-sum-bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.cd-sum-empty { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
.cd-sum-link {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--brand); border: 1px solid var(--brand);
  border-radius: 20px; padding: 8px 14px; min-height: 38px; margin-top: 12px;
}

/* ── Program review — coach-only, before assigning ─────────────
   On-demand. The whole value is in NOT crying wolf, so a clean result is
   stated plainly rather than shown as an empty panel. */
.pr-card {
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: 12px; background: var(--surface);
  padding: 14px; margin-top: 10px;
}
.pr-card-high { border-left-color: var(--red); }
.pr-clear { border-left-color: #12a45f; }
.pr-clear-hd { font-size: 14.5px; font-weight: 800; color: #12a45f; }
.pr-clear-sub { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 0; line-height: 1.5; }
.pr-hd { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.pr-hd-title { font-size: 14px; font-weight: 800; }
.pr-hd-high { font-size: 12px; font-weight: 750; color: var(--red); }

.pr-row {
  display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
  padding: 11px 0; border-top: 1px solid var(--border);
}
.pr-row:first-of-type { border-top: 0; }
.pr-body { flex: 1; min-width: 200px; }
.pr-title { font-size: 14px; font-weight: 750; margin: 0; }
.pr-high .pr-title { color: var(--red); }
.pr-detail { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; line-height: 1.5; }
.pr-day { font-size: 11.5px; color: var(--text-dim); margin: 3px 0 0; }
.pr-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-fix, .pr-dismiss {
  font: inherit; font-size: 12px; font-weight: 750; cursor: pointer;
  border-radius: 20px; padding: 7px 12px; min-height: 36px; white-space: nowrap;
}
.pr-fix { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.pr-dismiss { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.pr-gone { opacity: .6; }
.pr-empty { font-size: 13px; color: var(--text-muted); }
.pr-settings-link {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: none; border: 0; color: var(--brand); padding: 10px 0 0;
}

.pr-ov {
  position: fixed; inset: 0; z-index: 3300; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
}
.pr-modal {
  background: var(--surface); border-radius: 14px; width: 100%; max-width: 520px;
  max-height: 92vh; overflow-y: auto; padding: 20px;
}
.pr-modal-hd { font-size: 17px; font-weight: 800; }
.pr-modal-sub { font-size: 12.5px; color: var(--text-muted); margin: 5px 0 14px; line-height: 1.55; }
.pr-check {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--border); cursor: pointer;
}
.pr-check input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; margin-top: 2px; }
.pr-check-locked { opacity: .8; cursor: default; }
.pr-check-txt b { display: block; font-size: 13.5px; font-weight: 700; }
.pr-check-txt em { display: block; font-size: 12px; font-style: normal; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }
.pr-thresh-hd {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin: 16px 0 6px;
}
.pr-thresh {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px;
}
.pr-n { color: var(--brand); font-weight: 800; }
.pr-thresh input {
  width: 76px; font: inherit; font-size: 14.5px; text-align: right;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 9px; color: var(--text);
}
.pr-modal-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.pr-modal-cancel {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 16px; min-height: 44px;
}
.pr-modal-save {
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 10px; padding: 11px 20px; min-height: 44px;
}

/* ── Per-item portions in the coach food log ───────────────────
   The client already computed these; they were discarded on save until v12.
   Absent for older meals — the block simply does not render. */
.cd-items {
  border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px;
}
.cd-item {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; padding: 3px 0;
}
.cd-item-name { flex: 1; color: var(--text); min-width: 0; }
.cd-item-portion {
  color: var(--brand); font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cd-item-cal {
  color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; min-width: 52px; text-align: right;
}
.cd-item-more { font-size: 11.5px; color: var(--text-dim); padding-top: 3px; }

/* ── Ask about a client ────────────────────────────────────────
   A specific question against the same grounded context the full analysis
   uses. Ben, 8/11: he wants to ask how someone is feeling and be told what to
   try next, not read a fixed report. */
.ca-ask { display: flex; gap: 8px; margin-top: 12px; }
.ca-ask-in {
  flex: 1; min-width: 0; font: inherit; font-size: 14.5px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 12px;
}
.ca-ask-in:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ca-ask-btn {
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 10px; padding: 11px 18px; min-height: 44px; flex: none;
}
.ca-ask-btn:disabled { opacity: .65; cursor: default; }
.ca-ask-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ca-ask-chip {
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 7px 12px; min-height: 36px;
}
.ca-ask-chip:hover { border-color: var(--brand); color: var(--brand); }
.ca-ask-answer {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand); border-radius: 12px;
  padding: 14px; margin-top: 12px;
}
.ca-ask-text { font-size: 15px; line-height: 1.55; margin: 0; color: var(--text); }
.ca-ask-ev { margin-top: 10px; }

/* ── "Suggest today's workout" — a full hour from your own history ──
   Ben, 8/11. Sits beside the body map: one says pick a muscle, the other
   says here is the whole session. */
.cw-plan-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand); border-radius: 14px;
  padding: 14px; margin-top: 10px;
}
.cw-plan-hd { display: flex; align-items: baseline; gap: 10px; }
.cw-plan-focus { font-size: 15px; font-weight: 800; flex: 1; }
.cw-plan-mins {
  font-size: 12px; font-weight: 750; color: var(--brand);
  background: var(--brand-light); padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.cw-plan-why { font-size: 13px; color: var(--text-muted); margin: 6px 0 10px; line-height: 1.5; }
.cw-plan-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--border);
}
.cw-plan-block {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim); width: 62px; flex: none; padding-top: 3px;
}
.cw-plan-main { flex: 1; min-width: 0; }
.cw-plan-main b { display: block; font-size: 14px; font-weight: 700; }
.cw-plan-main span {
  display: block; font-size: 12.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cw-plan-main em {
  display: block; font-size: 12px; color: var(--text-dim);
  font-style: normal; margin-top: 2px; line-height: 1.4;
}
.cw-plan-one {
  font: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
  background: var(--bg); color: var(--brand);
  border: 1px solid var(--brand); border-radius: 9px;
  width: 40px; min-height: 40px; flex: none;
}
.cw-plan-one:disabled { opacity: .5; border-color: var(--border); color: var(--text-dim); cursor: default; }
.cw-plan-acts { display: flex; gap: 8px; margin-top: 14px; }
.cw-plan-addall {
  flex: 2; font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 10px; padding: 12px; min-height: 46px;
}
.cw-plan-again {
  flex: 1; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 10px; padding: 12px; min-height: 46px;
}
.cw-plan-err { color: var(--text-muted); font-size: 14px; }

/* ── Scanner capture feedback ──────────────────────────────────
   Ben, 8/11: "some sort of green highlighter that lets the user know the
   barcode is being captured". Corner brackets breathe while the decoder is
   running, then snap solid green on a hit — so there is never a moment where
   the camera is live and the user cannot tell if anything is happening. */
.scan-frame {
  position: absolute;
  inset: 12%  6%;              /* roughly barcode-shaped, inset from the edges */
  pointer-events: none;
  z-index: 11;
}
.scan-corner {
  position: absolute;
  width: 34px; height: 34px;
  border: 3px solid rgba(46, 196, 166, 0.9);
  animation: scanBreathe 1.6s ease-in-out infinite;
}
.scan-corner.tl { top: 0;    left: 0;  border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.scan-corner.tr { top: 0;    right: 0; border-left: 0;  border-bottom: 0; border-radius: 0 10px 0 0; }
.scan-corner.bl { bottom: 0; left: 0;  border-right: 0; border-top: 0;    border-radius: 0 0 0 10px; }
.scan-corner.br { bottom: 0; right: 0; border-left: 0;  border-top: 0;    border-radius: 0 0 10px 0; }

@keyframes scanBreathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .scan-corner { animation: none; opacity: 0.85; }
}

/* Locked on — brackets go solid and the whole frame flashes green. */
.scan-frame.locked .scan-corner {
  animation: none;
  opacity: 1;
  border-color: #2ec4a6;
  box-shadow: 0 0 14px rgba(46, 196, 166, 0.9);
}
.scan-frame.locked::after {
  content: '';
  position: absolute; inset: -6%;
  border-radius: 12px;
  background: rgba(46, 196, 166, 0.22);
  animation: scanLock 0.45s ease-out;
}
@keyframes scanLock {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Client message composer ───────────────────────────────────
   Ben, 8/11: tapping the message icon opened the composer but did not put the
   cursor in it, so a client could not tell whether they had hit the right
   thing. Focus is claimed in JS inside the gesture; this makes the focused
   state unmistakable. */
#msgInput {
  caret-color: var(--brand);      /* a visible, branded blinking cursor */
  transition: border-color .15s, box-shadow .15s;
}
#msgInput:focus,
#msgInput:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}

/* Did they hit their goal that day? (Ben, 8/26)
   The verdict sits on the date header so it reads BEFORE the meals below it —
   a coach scanning the log wants the answer first, then the detail. */
.cd-day-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.cd-day-stats { display: flex; align-items: center; gap: 6px; }
.cd-day-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  padding: 3px 9px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Semantic, and deliberately NOT a red/green pass-fail. Ben coaches "meet them
   where they are": a heavy day is information, not a failing grade. */
.cd-day-chip--on   { border-color: var(--green);  color: var(--green); }
.cd-day-chip--over { border-color: var(--amber, #d98324); color: var(--amber, #d98324); }
.cd-day-chip--under{ border-color: var(--border); color: var(--text-muted); }
/* Partially logged is a LOGGING state, not a nutrition state — it must not
   look like a verdict about how they ate. */
.cd-day-chip--partial {
  border-style: dashed; color: var(--text-dim); background: transparent;
}
.cd-day-chip--hit  { border-color: var(--green); color: var(--green); }
.cd-day-chip--miss { border-color: var(--border); color: var(--text-muted); }
.cd-day-of    { opacity: .55; font-weight: 600; }
.cd-day-delta { margin-left: 5px; opacity: .8; }
.cd-day-note  { font-size: 11px; color: var(--text-dim); font-weight: 600; }

/* The whole day's nutrition, labelled (Ben, 10/8: "id love to see carbs and
   fat sugar sodium and fiber but in a clean format so i can easily identify
   each"). Every nutrient keeps its own colour dot and its full name, so it
   reads at a glance instead of decoding P/C/F letters. Six across on a wide
   screen, three by two on a phone. */
.cd-day-nutrients {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; margin: 4px 0 10px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.cd-nut { background: var(--bg); padding: 8px 10px; min-width: 0; }
.cd-nut-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.cd-nut-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cd-nut-val {
  margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cd-nut-unit { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-left: 1px; }
.cd-nut-of   { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-left: 3px; }
.cd-nut--hit  .cd-nut-val { color: var(--green); }
.cd-nut--high .cd-nut-val { color: var(--amber, #d98324); }
.cd-nut--protein .cd-nut-dot { background: var(--protein-color); }
.cd-nut--carbs   .cd-nut-dot { background: var(--carbs-color); }
.cd-nut--fat     .cd-nut-dot { background: var(--fat-color); }
.cd-nut--fiber   .cd-nut-dot { background: var(--fiber-color); }
.cd-nut--sugar   .cd-nut-dot { background: var(--sugar-color); }
.cd-nut--sodium  .cd-nut-dot { background: var(--sodium-color); }
@media (max-width: 640px) {
  .cd-day-nutrients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Shared touch-drag (Ben, 8/26: touch drag everywhere involving workouts).
   One set of visuals for every reorderable list, so the session, the builder
   and anything added later look and behave identically. */
.td-dropline {
  height: 3px; border-radius: 2px; margin: 3px 0;
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.td-dragging {
  opacity: .92; position: relative; z-index: 5;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  border-color: var(--brand);
  /* No transition — an animated transform lags the finger and reads as lag. */
}
body.td-dragging-body {
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: contain;
}
/* The grip must own the gesture, or the browser pans the page instead. The
   session handle already had this; the builder handle did not — one of the two
   reasons dragging a built workout did nothing on a phone. */
.cw-build-drag-handle { touch-action: none; }

/* Rest timer (Ben, 8/26). The running state has to read at a glance from arm's
   length, mid-set, so the countdown is the loudest thing on the button. */
.cw-rest-timer-count {
  color: var(--brand); font-weight: 800; font-size: 13px; margin-left: 4px;
  font-variant-numeric: tabular-nums;   /* digits must not jitter each tick */
}
.cw-rest-running {
  border-color: var(--brand) !important;
  background: color-mix(in srgb, var(--brand) 10%, transparent) !important;
}
/* A slow pulse so a resting timer is visible without being a distraction.
   Respects reduced-motion, like every other animation here. */
@keyframes cw-rest-pulse { 0%,100% { opacity: 1 } 50% { opacity: .62 } }
.cw-rest-running .cw-rest-timer-count { animation: cw-rest-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .cw-rest-running .cw-rest-timer-count { animation: none; }
}

/* Advanced-method summary (Ben, 8/26: "build a summary section that explains
   how to use them"). Reads as a briefing, not a warning — these are chosen on
   purpose, not problems. */
.tr-method-summary {
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: 10px; padding: 12px 14px; background: var(--surface);
  display: flex; flex-direction: column; gap: 10px;
}
.tr-method-summary-hd {
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--brand);
}
.tr-method-item { display: flex; flex-direction: column; gap: 2px; }
.tr-method-label { font-size: 13.5px; font-weight: 800; color: var(--text); }
.tr-method-how   { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.tr-method-load  { font-size: 12px; color: var(--text-dim); font-style: italic; }
.tr-method-foot  { font-size: 11px; color: var(--text-dim); }
/* On the client's exercise card — a pyramid changes every set, so it cannot
   live only in the summary at the top of the programme. */
/* Ben, 9/10: "Notes like pyramid should have a button that explains it in a
   way a non athletic person will understand." It was a <span> that said
   "Pyramid" and nothing else; it is a button now, and has to look like one. */
.cw-method-chip {
  font-weight: 800; color: var(--brand);
  border: 1px solid var(--brand);
  background: var(--brand-light);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  /* Sits inside a line of running text, so it must not shove the line apart. */
  line-height: 1.5;
  white-space: nowrap;
}
.cw-method-chip:active { background: var(--brand-mid); }

.cw-method-sheet { max-width: 420px; }
.cw-method-how {
  margin: 0 0 10px;
  font-size: 14.5px; line-height: 1.55; color: var(--text);
}
.cw-method-note {
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--brand-light);
  color: var(--brand-on-light);
  font-size: 13px; font-weight: 600; line-height: 1.45;
}

/* ── Month calendar (Ben, 8/26 — Trainerize-shaped) ──────────────────────
   Seven columns, every commitment stacked in its day, a circle that fills when
   it is done. The old view showed one week in full and dots for the rest. */
.tr-mc-head {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 8px;
}
.tr-mc-title { font-size: 15px; font-weight: 800; color: var(--text); flex: 1; }
.tr-mc-nav {
  width: 32px; height: 32px; border-radius: 8px; font-size: 18px; line-height: 1;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer;
}
.tr-mc-today {
  font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer;
}
/* The completed-this-month counts, mirroring the Trainerize sidebar. */
.tr-mc-sum {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px;
  font-size: 11.5px; color: var(--text-muted);
}
.tr-mc-sum b { color: var(--text); font-variant-numeric: tabular-nums; }

.tr-mc-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.tr-mc-dow {
  background: var(--surface); padding: 6px 4px; text-align: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-dim);
}
.tr-mc-day {
  background: var(--bg); min-height: 84px; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
}
/* Days from the neighbouring month stay visible but recede — removing them
   would break the seven-column rhythm. */
.tr-mc-day.out { opacity: .38; }
.tr-mc-day.today { box-shadow: inset 0 0 0 2px var(--brand); }
/* Ben, 9/16: "put text thats readable that says drag here please."
   Same fix as the client calendar. A month cell already shows the date and
   whatever is scheduled, so the label sits along the BOTTOM rather than
   covering it — the coach needs to see what is already on the day he is
   dropping onto. */
.tr-mc-day.tr-mc-over {
  background: color-mix(in srgb, var(--brand) 14%, var(--bg));
  position: relative;
  outline: 2px dashed var(--brand); outline-offset: -2px;
}
.tr-mc-day.tr-mc-over::after {
  content: 'Drop here';
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 0;
  background: var(--brand); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .3px; text-align: center;
  /* elementFromPoint drives the drop — this must never intercept it. */
  pointer-events: none;
}
.tr-mc-num {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  text-align: right; font-variant-numeric: tabular-nums;
}
.tr-mc-day.today .tr-mc-num { color: var(--brand); }

.tr-mc-row {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; line-height: 1.25;
  padding: 1px 2px; border-radius: 4px;
  min-width: 0;                      /* so the label can ellipsis */
}
/* Ben, 9/6: copy a workout as text to retype into Trainerize, which has no
   bulk import of its own. Quiet next to Remove — it is a utility, not an
   action with consequences. */
.tr-pe-copy { color: var(--text-muted); }
.tr-pe-copy:active { border-color: var(--brand); color: var(--brand-on-light); }

/* Ben, 9/3: the drag was "very difficult to use" on a phone. A row was ~15px
   tall against a 44px minimum touch target — 34% of it. A month grid cannot
   give every row 44px without breaking the layout, so the interactive rows get
   as much as fits and the day cell itself is the drop target in move mode. */
@media (pointer: coarse) {
  .tr-mc-row.tr-mc-workout, .tr-mc-row.tr-mc-prompt, .tr-mc-row.tr-mc-measurement {
    min-height: 26px; padding: 4px 3px;
  }
}
.tr-mc-row[draggable="true"] { cursor: grab; touch-action: none; }
.tr-mc-row.tr-mc-dragging { opacity: .5; }
.tr-mc-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-muted);
}
.tr-mc-row.is-done .tr-mc-label { color: var(--text); }

/* Hollow = outstanding, filled = done. One shape, two states — the same
   language as the legend, so nothing needs decoding. */
.tr-mc-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--text-dim); background: transparent;
  display: inline-block;
}
.tr-mc-row.is-done .tr-mc-dot { background: var(--green); border-color: var(--green); }
/* Each commitment type keeps its own hue while outstanding, so a glance
   separates a missed workout from a missed check-in. */
.tr-mc-workout   .tr-mc-dot { border-color: var(--brand); }
.tr-mc-habit     .tr-mc-dot { border-color: #d98324; }
.tr-mc-checkin   .tr-mc-dot { border-color: #7c3aed; }
.tr-mc-nutrition .tr-mc-dot { border-color: #0ea5e9; }

.tr-mc-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 8px; font-size: 11px; color: var(--text-dim);
}
.tr-mc-legend span { display: flex; align-items: center; gap: 5px; }
.tr-mc-legend i.tr-mc-dot.is-done { background: var(--green); border-color: var(--green); }
.tr-mc-legend i.tr-mc-note-key { font-style: normal; color: var(--brand); font-weight: 900; }

/* A day where the client wrote something. Ben, 9/17: "it should be attached in
   their calendar as well as a note was made and on what exercise."
   Deliberately NOT another dot — the dots already encode scheduled vs done for
   four row kinds, and a fifth would need decoding. A pencil reads as "they
   wrote something" without a legend, and the title attribute names the
   exercise. */
.tr-mc-note {
  margin-left: auto; flex-shrink: 0; font-style: normal;
  font-size: 11px; font-weight: 900; color: var(--brand); line-height: 1;
}
.tr-mc-hint { margin-left: auto; }

/* On a phone the labels cannot fit — the dots carry the information and the
   day opens for the detail. */
@media (max-width: 640px) {
  .tr-mc-day { min-height: 58px; }
  .tr-mc-label { display: none; }
  .tr-mc-row { gap: 0; }
  /* The label goes, the note marker STAYS. On a phone this is the only thing
     telling Ben a day is worth opening, which is the whole point of it. */
  .tr-mc-note { margin-left: 2px; }
}

/* Tap a scheduled workout in the month grid → edit or remove (Ben, 8/26). */
.tr-mc-actions {
  display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px;
}
.tr-mc-actions .btn-ghost { width: 100%; font-size: 14px; }
/* Destructive, and styled as such — but not shouty. It is undoable, and the
   undo toast is what actually protects the coach. */
.tr-mc-del {
  width: 100%; font-size: 14px; font-weight: 700;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  color: var(--red, #dc2626);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--red, #dc2626) 40%, transparent);
}
.tr-mc-del:active { background: color-mix(in srgb, var(--red, #dc2626) 10%, transparent); }
/* A scheduled workout is tappable — say so, or it reads as a static label. */
.tr-mc-workout { cursor: pointer; }

/* In-app confirm — replaces the browser's "nutritionhelper-chi.vercel.app
   says" dialog (Ben, 8/26: "That looks very ugly"). */
.cf-overlay {
  position: fixed; inset: 0; z-index: 2200;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cf-card {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px;
  width: 100%; max-width: 400px; padding: 22px 20px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.3);
  display: flex; flex-direction: column; gap: 10px;
}
.cf-title { font-size: 16px; font-weight: 800; }
/* pre-line so the \n\n in the longer warnings still breaks into paragraphs. */
.cf-body  { font-size: 14px; line-height: 1.5; color: var(--text-muted); white-space: pre-line; }
.cf-actions { display: flex; gap: 8px; margin-top: 6px; }
/* Text/number input for promptSheet — the in-app replacement for prompt().
   16px so iOS does not zoom the page when it takes focus. */
.cf-input {
  width: 100%; font-size: 16px; font-weight: 700; font-family: inherit;
  padding: 11px 13px; border-radius: 10px; margin-top: 2px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cf-input:focus { border-color: var(--brand); outline: none; }
/* Presets for the common answers — one tap, no keyboard on a phone. */
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cf-chip {
  padding: 7px 13px; border-radius: 999px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: 13px; font-weight: 700;
}
.cf-chip:hover, .cf-chip:focus-visible { border-color: var(--brand); color: var(--brand); outline: none; }
.cf-btn {
  flex: 1; padding: 11px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.cf-ok     { background: var(--brand); border-color: var(--brand); color: #fff; }
.cf-danger { background: var(--red); border-color: var(--red); color: #fff; }
.cf-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Habits the client already has — shown, not hidden (Ben, 8/26). Hiding one
   leaves the coach hunting for a habit that is already on the client. */
.tr-assign-client.is-assigned { opacity: .55; cursor: default; }
.tr-assign-has {
  margin-left: auto; font-size: 11px; font-style: normal;
  font-weight: 700; color: var(--text-dim);
}

/* ── Coach: recent activity (Ben, 8/26 — Trainerize dashboard) ─────────── */
.cd-act-card {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; background: var(--surface);
}
.cd-act-hd {
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 10px;
}
/* Capped so the feed cannot push everything else off the page. */
.cd-act-list { display: flex; flex-direction: column; gap: 12px; max-height: 460px; overflow-y: auto; }
.cd-act-row  { display: flex; gap: 10px; align-items: flex-start; }
.cd-act-body { min-width: 0; }
.cd-act-text { font-size: 13px; line-height: 1.4; color: var(--text); }
.cd-act-when { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.cd-act-empty { font-size: 13px; color: var(--text-dim); }
/* One colour per kind, so a scan separates a workout from a meal without
   reading every line. */
.cd-act-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
  background: var(--text-dim);
}
.cd-act--workout  .cd-act-dot { background: var(--brand); }
.cd-act--cardio   .cd-act-dot { background: #0ea5e9; }
.cd-act--meal     .cd-act-dot { background: var(--green); }
.cd-act--checkin  .cd-act-dot { background: #7c3aed; }
.cd-act--badge    .cd-act-dot { background: #d98324; }
.cd-act--photo    .cd-act-dot { background: #ec4899; }

/* ── Client: today at a glance ─────────────────────────────────────────── */
.mdd-card {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; background: var(--surface); margin: 0 0 12px;
}
.mdd-hd {
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.mdd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mdd-stat-val {
  font-size: 22px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
/* The target is context, not the headline — what they ATE is the number. */
.mdd-stat-of { font-size: 14px; font-weight: 700; color: var(--text-dim); }
.mdd-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.mdd-bar {
  height: 4px; border-radius: 2px; background: var(--border);
  margin-top: 6px; overflow: hidden;
}
.mdd-bar i { display: block; height: 100%; background: var(--brand); border-radius: 2px; }
.mdd-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mdd-check {
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px;
  border: 1px solid var(--border); color: var(--text-dim);
}
/* Done is stated, not celebrated — and not-done is neutral, never red. A
   client opening this at 9am has not failed at anything yet. */
.mdd-check.is-done { border-color: var(--green); color: var(--green); }

/* ── Grouped Coach Mode nav (Ben, 8/26) ──────────────────────────────────
   Eleven flat tabs scrolled sideways and none of them said what they were
   near. Five entries now; two of them open a flyout. */
.tr-nav-group { display: inline-flex; align-items: center; gap: 5px; }
.tr-nav-caret { width: 13px; height: 13px; opacity: .65; transition: transform .16s; }
.tr-nav-group[aria-expanded="true"] .tr-nav-caret { transform: rotate(180deg); opacity: 1; }

.tr-nav-flyout {
  position: fixed; z-index: 1400;
  min-width: 208px; max-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
  /* A long group must scroll rather than run off the bottom of a phone. */
  max-height: min(70vh, 520px); overflow-y: auto;
}
.tr-nav-sec { display: flex; flex-direction: column; gap: 2px; }
.tr-nav-sec + .tr-nav-sec { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.tr-nav-sec-hd {
  font-size: 10px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--text-dim);
  padding: 2px 8px 4px;
}
.tr-nav-item {
  display: block; width: 100%; text-align: left;
  font-size: 14px; font-weight: 600; color: var(--text);
  background: transparent; border: none; border-radius: 8px;
  padding: 9px 10px; cursor: pointer;
  /* 38px tall — a real touch target, not a desktop menu row. */
  min-height: 38px;
}
.tr-nav-item:hover, .tr-nav-item:focus-visible {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand); outline: none;
}

/* ── Habit schedule picker (Ben, 8/26) ───────────────────────────────────
   "it needs a calendar that shows what days you want the habit to pop up on
   and for how long." Defaults to every day, indefinitely — the behaviour
   habits already had, so ignoring this control changes nothing. */
.tr-hsched {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg);
}
.tr-hsched-hd {
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted);
}
.tr-hsched-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-hsched-preset {
  font-size: 12.5px; font-weight: 700; padding: 7px 12px;
  border-radius: 100px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}
.tr-hsched-preset.on {
  border-color: var(--brand); color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.tr-hsched-days { display: flex; flex-wrap: wrap; gap: 5px; }
.tr-hsched-day {
  /* 40px square — a real thumb target, not a desktop checkbox. */
  min-width: 40px; min-height: 40px;
  font-size: 12px; font-weight: 700; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}
.tr-hsched-day.on {
  border-color: var(--brand); color: #fff; background: var(--brand);
}
.tr-hsched-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tr-hsched-field { flex: 1 1 140px; display: flex; flex-direction: column; gap: 4px; }
.tr-hsched-field > span { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.tr-hsched-field input, .tr-hsched-field select {
  font-size: 13px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
/* Echoes the schedule that will actually be saved, so what the coach reads
   here cannot drift from what the client gets. */
.tr-hsched-summary {
  font-size: 12.5px; font-weight: 700; color: var(--brand);
}
/* An off day is not a miss — keep it neutral, never red. */
.tr-chab-off   { color: var(--text-dim); font-style: italic; }
.tr-chab-sched { color: var(--brand); }

/* ── Master Workouts (Ben, 8/26) ─────────────────────────────────────────
   Single sessions, separate from multi-week programs. A workout is a template
   with one day, tagged kind:workout. */
.tr-wo-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tr-wo-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; background: var(--surface);
}
.tr-wo-main { flex: 1 1 240px; min-width: 0; }
.tr-wo-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
/* est. minutes and exercise count — the two things that decide whether this
   is the right session for today. */
.tr-wo-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.tr-wo-desc {
  font-size: 12px; color: var(--text-dim); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-wo-acts { display: flex; gap: 6px; flex-shrink: 0; }
.tr-wo-btn {
  font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 8px;
  cursor: pointer; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); min-height: 36px;
}
.tr-wo-btn-quiet  { color: var(--text-muted); }
.tr-wo-btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }

/* ── Exercise picker fixes (Ben, 8/26) ───────────────────────────────────
   "when I hit swap, this is what I see in the library. This is very difficult
   for me to read and see." Plus: "fix the magnifying glass in the search bar." */

/* The wrapper used to carry an inline `padding: 0 16px 10px`. That pushed the
   INPUT 16px right while the icon stayed positioned against the wrapper at
   left:12px — so the magnifying glass sat outside the field, on top of the
   placeholder text. Fixed at the cause: the padding is a margin on the wrapper
   now, so the icon and the input share the same left edge again. */
.tr-picker-search-wrap { margin: 0 16px 10px; }

/* 130px columns left barely a line of text under each thumbnail, so a wall of
   near-identical gym clips was all that read. Wider cards, and the NAME is the
   loudest thing on them — a coach picks by name, not by frame. */
.tr-picker-list {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
.tr-picker-name {
  font-size: 0.86rem;
  font-weight: 700;
  -webkit-line-clamp: 3;      /* long names must not truncate to ambiguity */
}
.tr-picker-info { padding: 10px 11px; gap: 4px; }
/* The thumbnail is context, not the headline — shorter, so more cards fit and
   the names carry the grid. */
.tr-picker-thumb-wrap { padding-top: 56.25%; }
/* The dark scrim was fighting the thumbnails at this size. */
.tr-picker-thumb-wrap::after { background: rgba(0,0,0,.12); }
.tr-picker-thumb-wrap:hover::after { background: rgba(0,0,0,.35); }

@media (max-width: 420px) {
  /* Two columns on a phone rather than four cramped ones. */
  .tr-picker-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* The coach's own row in the client list (Ben, 8/26 — he uses the client side
   daily and wants to test against real data). Marked plainly: an unflagged
   self row reads as a client who happens to share his name. */
.client-row-v2.is-self {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  background: color-mix(in srgb, var(--brand) 4%, var(--surface));
}
.cr-self-badge {
  margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 6px; border-radius: 100px; vertical-align: 1px;
  background: var(--brand); color: #fff;
}

/* The WOD builder explains itself when empty (Ben, 8/26: "nowhere on it does
   it have a button that says create today's workout"). There is no Create
   button because the panel IS the builder — this says so. */
.wod-howto {
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
  background: var(--bg); border: 1px dashed var(--border);
  border-radius: 10px; padding: 11px 13px; margin: 0 0 10px;
}
.wod-howto b { color: var(--text); }
/* Disabled send — present so the flow is visible, obviously not yet usable. */
.wod-save--off {
  opacity: .5; cursor: not-allowed;
  background: var(--bg); color: var(--text-dim); border: 1px solid var(--border);
}

/* ── Day menu (Ben, 8/26) ────────────────────────────────────────────────
   "once I do click on a specific day, I need a little menu to pop up." */
.tr-daymenu {
  position: fixed; z-index: 1500;
  min-width: 196px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0,0,0,.20);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.tr-daymenu-hd {
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-dim);
  padding: 6px 10px 7px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.tr-daymenu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  font-size: 14px; font-weight: 600; color: var(--text);
  background: transparent; border: none; border-radius: 8px;
  padding: 10px; cursor: pointer;
  min-height: 40px;              /* a real thumb target */
}
.tr-daymenu-item svg { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; }
/* An option that cannot work yet. Still tappable — tapping explains why and
   offers the fix, which beats a dead button. */
.tr-daymenu-item.is-blocked { color: var(--text-dim); }
.tr-daymenu-item.is-blocked svg { opacity: .5; }
.tr-daymenu-why {
  margin-left: auto; padding-left: 8px; font-size: 10.5px;
  font-weight: 700; color: var(--text-dim); white-space: nowrap;
}
.tr-daymenu-item:hover, .tr-daymenu-item:focus-visible {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand); outline: none;
}
.tr-daymenu-item:hover svg { color: var(--brand); }

/* Scheduled prompts on the grid. Each kind keeps its own hue while
   outstanding, so a glance separates a missed weigh-in from a missed workout. */
.tr-mc-prompt .tr-mc-dot { border-color: #ec4899; }
.tr-mc-cardio .tr-mc-dot { border-color: #0ea5e9; }
.tr-mc-prompt, .tr-mc-cardio { cursor: pointer; }

/* Body stats form (Ben, 8/26: "body stats needs to pop up a screen"). Six
   number fields a coach fills in during or right after a session. */
/* Body stats — measurements either side of a figure, so the field for a bicep
   sits next to the bicep. Ben, 8/27, with a Trainerize screenshot. */
.tr-bs-sheet { max-width: 720px; }
.tr-bs-body { display: flex; gap: 18px; margin: 4px 0 12px; align-items: flex-start; }
/* Weight and body fat are not points on the body, so they get their own
   column rather than a leader line pointing at nothing. */
.tr-bs-primary {
  flex: 0 0 150px; display: flex; flex-direction: column; gap: 12px;
  padding-right: 18px; border-right: 1px solid var(--border);
}
.tr-bs-map { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-bs-side { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tr-bs-figure {
  flex: 0 0 128px; width: 128px; height: auto; color: var(--text-muted);
  align-self: stretch; max-height: 400px;
}
/* Dotted measurement guides. Ben, 8/27: "add dotted lines so the user knows
   where they should measure." Quiet by default so the figure still reads as a
   body; the line for the field being edited comes forward. */
.tr-bs-guide {
  stroke: var(--text-muted); opacity: .38;
  transition: opacity .15s ease, stroke-width .15s ease;
}
.tr-bs-guide.is-active { stroke: var(--brand); opacity: 1; stroke-width: 12; }
@media (prefers-reduced-motion: reduce) { .tr-bs-guide { transition: none; } }
.tr-bs-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tr-bs-field > span { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
/* The unit sits inside the field so a number is never ambiguous. */
.tr-bs-in { position: relative; display: block; }
.tr-bs-in em {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 11px; font-weight: 600;
  color: var(--text-dim); pointer-events: none;
}
.tr-bs-field input {
  font-size: 16px;              /* 16px so iOS does not zoom the sheet on focus */
  font-weight: 700; padding: 10px 34px 10px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-variant-numeric: tabular-nums; width: 100%;
}
.tr-bs-field input:focus { border-color: var(--brand); outline: none; }

/* On a phone the figure cannot hold three columns. Fields stack into a plain
   two-up grid and the diagram steps aside rather than shrinking to nothing. */
@media (max-width: 640px) {
  .tr-bs-body { flex-direction: column; gap: 14px; }
  .tr-bs-primary {
    flex: 1 1 auto; flex-direction: row; gap: 10px; width: 100%;
    padding-right: 0; padding-bottom: 14px;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  .tr-bs-primary .tr-bs-field { flex: 1 1 0; }
  /* The figure used to be hidden here. Once it carries the measurement guides
     that is exactly backwards — a phone is where someone is actually holding a
     tape measure. It moves above the fields instead of alongside them. */
  .tr-bs-map { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; width: 100%; }
  .tr-bs-figure {
    grid-column: 1 / -1; flex: none; width: 132px; max-height: 300px;
    margin: 0 auto 4px; order: -1;
  }
  .tr-bs-side { display: contents; }
}
.tr-bs-notes {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
}
.tr-bs-notes textarea {
  font-size: 14px; padding: 9px 11px; border-radius: 9px; resize: vertical;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.tr-bs-hint { font-size: 11.5px; color: var(--text-dim); margin: 8px 0 12px; }
.tr-bs-save { width: 100%; }

/* ── Body metrics trend chart (Ben, 10/7) ────────────────────────────────
 * "how could i as the trainer see a clients progress in all these areas at
 * different points in time i can show you the graph that trainerize uses"
 * — a screenshot of Trainerize's own Body Weight page: metric sidebar,
 * smoothed line, shaded fill, date-range toggle. Adapted as one card:
 * chips instead of a sidebar, one chart that swaps per tapped metric. */
.bmc-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  background: var(--surface); box-shadow: 0 2px 4px rgba(0,0,0,.02);
}
.bmc-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px; display: block;
  border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 12px;
}
.bmc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
/* Smaller than .sob-chip's own 44px/18px — that sizing fits a full-page
   onboarding flow, not a picker row inside an already-dense drill-down card. */
.bmc-chip { min-height: 30px; padding: 5px 12px; font-size: 12px; }
.bmc-range-row { display: flex; gap: 4px; margin-bottom: 10px; }
.bmc-range-btn {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text-muted); font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.bmc-range-btn:hover { border-color: var(--brand); color: var(--text); }
.bmc-range-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.bmc-chart-wrap { height: 220px; position: relative; }
.bmc-sub { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

/* ── Auto messages (Ben, 8/26) ───────────────────────────────────────────
   Written by him, sent as him, into the real thread. */
.tr-am-intro { font-size: 12.5px; color: var(--text-muted); margin: 8px 0 12px; max-width: 60ch; }
.tr-am-list { display: flex; flex-direction: column; gap: 8px; }
.tr-am-row {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; background: var(--surface);
}
/* A paused rule reads as deliberately off, not broken. */
.tr-am-row.is-off { opacity: .6; }
.tr-am-main { flex: 1 1 260px; min-width: 0; }
.tr-am-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.tr-am-off {
  margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 100px; text-transform: uppercase;
  background: var(--bg); color: var(--text-dim); border: 1px solid var(--border);
}
.tr-am-when { font-size: 11.5px; color: var(--brand); font-weight: 700; margin-top: 3px; }
/* The message itself, quoted — it is the thing the client will actually read. */
.tr-am-body {
  font-size: 12.5px; color: var(--text-muted); margin-top: 6px;
  font-style: italic; line-height: 1.45;
}
.tr-am-acts { display: flex; gap: 6px; flex-shrink: 0; }
.tr-am-btn {
  font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 8px;
  cursor: pointer; min-height: 36px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.tr-am-btn-quiet  { color: var(--text-muted); }
.tr-am-btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }

.tr-am-sheet { max-width: 520px; }
.tr-am-field {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
}
.tr-am-field em { font-style: normal; font-weight: 600; color: var(--text-dim); }
.tr-am-field input, .tr-am-field select, .tr-am-field textarea {
  font-size: 16px;              /* 16px so iOS does not zoom the sheet */
  font-weight: 500; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.tr-am-field textarea { resize: vertical; line-height: 1.5; }
.tr-am-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tr-am-hint { font-size: 11.5px; color: var(--text-dim); margin: -6px 0 12px; }
.tr-am-hint code {
  background: var(--bg); padding: 1px 5px; border-radius: 4px;
  font-size: 11px; border: 1px solid var(--border);
}
/* Echoes the rule as it will actually be stored, so what the coach reads here
   cannot drift from what the sender does. */
.tr-am-preview {
  font-size: 12.5px; font-weight: 700; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-radius: 9px; padding: 10px 12px; margin-bottom: 12px;
}

/* ── Dashboard Lab ─────────────────────────────────────────────
   Alternative My Day layouts, coach-selected. Ben, 8/27. These styles only
   ever apply inside #myDayDash when a layout is chosen — picking "Current"
   renders none of this. */
.dl { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }

.dl-big { text-align: center; padding: 18px 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; }
.dl-big-val { font-size: 44px; font-weight: 800; line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.dl-big-cap { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-top: 6px; }
.dl-big--warn .dl-big-val { color: var(--red); }

.dl-rings { display: flex; gap: 12px; }
.dl-ring { flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 14px 10px; text-align: center; }
/* conic-gradient ring — no library, no canvas, and it animates for free */
.dl-ring-art { width: 74px; height: 74px; margin: 0 auto 8px; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--pc) * 1%), var(--border) 0);
  display: flex; align-items: center; justify-content: center; }
.dl-ring-mid { width: 58px; height: 58px; border-radius: 50%; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dl-ring-val { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.dl-ring-target { font-size: 10px; font-weight: 600; color: var(--text-dim); }
.dl-ring-label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.dl-ring-label span { color: var(--text-dim); font-weight: 600; }

.dl-hero { background: var(--brand); border-radius: 18px; padding: 18px 16px; color: #fff; }
.dl-hero-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; opacity: .8; }
.dl-hero-title { font-size: 21px; font-weight: 800; line-height: 1.15; margin-top: 4px; }
.dl-hero-sub { font-size: 12.5px; font-weight: 600; opacity: .85; margin-top: 4px; }

.dl-note { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.dl-note-from { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--brand); margin-bottom: 3px; }

.dl-streak { background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 20px 12px; text-align: center; }
.dl-streak-icon { display: block; width: 32px; height: 32px; margin: 0 auto 6px; color: var(--brand); }
.dl-streak-icon svg { width: 100%; height: 100%; }
.dl-streak-num { display: block; font-size: 46px; font-weight: 800; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums; }
.dl-streak-cap { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }

.dl-strip { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.dl-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--text); }
.dl-row:last-child { border-bottom: 0; }
.dl-row-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-muted); }
.dl-row-icon svg { width: 100%; height: 100%; }
.dl-row-text { flex: 1; min-width: 0; }
.dl-row-meta { font-size: 11.5px; font-weight: 700; color: var(--text-dim); flex-shrink: 0; }
.dl-row.is-done .dl-row-icon { color: var(--brand); }
.dl-row.is-done .dl-row-text { color: var(--text-muted); }

/* The picker, in Coach Mode → Health. */
.dl-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dl-pick-btn { padding: 8px 13px; border-radius: 999px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  font-size: 12.5px; font-weight: 700; }
.dl-pick-btn.is-on { border-color: var(--brand); background: var(--brand-light); color: var(--brand-on-light); }

/* Health detail — the rows behind a count. Ben, 8/27: "there's no way to see
   which client ... I need access to that." A number with no name is a number,
   not a tool. */
.tr-health-row--open { cursor: pointer; }
.tr-health-row--open:hover .tr-health-label { color: var(--brand); }
.tr-health-chev { margin-left: 6px; font-size: 10px; opacity: .75; }
.tr-health-detail {
  margin: 2px 0 10px; padding: 4px 0;
  border-left: 2px solid var(--border); margin-left: 8px; padding-left: 12px;
}
.tr-health-det-head {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}
.tr-health-det-row {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
  font-size: 12.5px; border-bottom: 1px solid var(--border);
}
.tr-health-det-row:last-child { border-bottom: 0; }
.tr-health-det-label { font-weight: 700; color: var(--text); flex: 1; min-width: 0; }
.tr-health-det-meta  { color: var(--text-muted); font-weight: 600; font-size: 11.5px; }
.tr-health-det-date  { color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.tr-health-det-more  { font-size: 11px; color: var(--text-dim); padding-top: 6px; }

/* Check-in symptom flag. Ben, 8/30: "it doesn't tell me exactly what caused
   it." Symptoms and the meal the client blamed were already rendered, but in
   the same dot-separated run as sleep and soreness — so the one line that says
   what went wrong read like more telemetry. */
.ci-flag {
  margin: 2px 0 8px 18px; padding: 7px 10px;
  background: var(--surface); border-left: 2px solid var(--yellow, #f59e0b);
  border-radius: 0 8px 8px 0;
}
.ci-flag-symptoms { display: flex; flex-wrap: wrap; gap: 5px; }
.ci-symptom {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--brand-light); color: var(--brand-dark); text-transform: capitalize;
}
.ci-flag-suspect { font-size: 11.5px; color: var(--text); margin-top: 5px; line-height: 1.4; }
.ci-flag-lead { font-weight: 700; color: var(--text-muted); }

/* ── Minimal item cards ─────────────────────────────────────────
   Ben, 8/30: "theres just to many in your face options can we hide the
   measurements to only pop up once the user hit the card ... more like
   myfitnesspal and cal.ai".
   A 5-item meal was showing 5 rows of unit pills and 5 steppers before the
   client had questioned anything. The controls are unchanged — they are just
   behind a tap now, and the portion stays visible so the closed card still
   says what was logged. */
.item-stepper-wrap.is-collapsed { display: none; }

/* The portion, on the collapsed row: "2 buns", "6 oz". */
.item-portion-chip {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; background: var(--bg);
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  vertical-align: middle;
}
.item-edit-card.is-open .item-portion-chip { opacity: .5; }

/* A star on the collapsed row when the portion is still the AI's estimate.
   Ben, 8/30: the star used to live inside the stepper, which is now hidden —
   so a closed card could not say whether "1 bun" was a guess or a correction.
   Same amber as .pstepper-ai so the two read as one signal, and rendered as a
   ::before so it cannot be mistaken for part of the portion text. */
.item-portion-chip.is-ai::before {
  content: '★';
  margin-right: 4px;
  color: #f59e0b;
  font-size: 10px;
  vertical-align: baseline;
}
/* A corrected portion is the more interesting state, so it gets the stronger
   treatment: full-strength text rather than a marker. */
.item-portion-chip:not(.is-ai) {
  color: var(--text);
  background: var(--brand-light);
}

/* The whole row is the target, so it should look like one. */
.item-tap-row { cursor: pointer; }
.item-tap-chevron { transition: transform .15s ease; }
.item-edit-card.is-open { background: var(--surface); }

/* "Wrong?" is the rare action — quieter than the row it sits on, and it must
   not compete with the portion for attention. */
.item-wrong-btn { opacity: .6; }
.item-wrong-btn:hover, .item-wrong-btn:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .item-tap-chevron { transition: none; } }

/* ── Water ──────────────────────────────────────────────────────
   Ben, 8/30: "can you add a water measure thats fun and a button to use it?"
   The goal existed and synced; nothing tracked against it. The fun is glasses
   filling one at a time — the honesty is that overshooting the goal is shown
   as overshooting, not hidden behind a capped bar. */
.water-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 12px;
}
.water-card-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.water-card-title { font-size: 14px; font-weight: 800; color: var(--text); }
.water-card-count {
  font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.water-card.is-done .water-card-count { color: var(--brand); }

.water-glass-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.water-glass { width: 20px; height: 25px; display: block; }
.water-glass svg { width: 100%; height: 100%; }
/* Empty: outline only. Full: filled. The difference has to be obvious at a
   glance from arm's length, so it is fill AND colour, not colour alone. */
.water-glass path { fill: none; stroke: var(--border); stroke-width: 2; }
.water-glass.is-full path { fill: var(--brand); stroke: var(--brand); }
.water-glass.is-next path { stroke: var(--brand); opacity: .55; }
.water-glass.is-next { animation: waterNext 1.8s ease-in-out infinite; }
@keyframes waterNext { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* The pour — a quick squash as the glass fills. */
.water-glass.just-poured { animation: waterPour .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes waterPour {
  0%   { transform: scaleY(.55) translateY(4px); }
  60%  { transform: scaleY(1.08) translateY(-1px); }
  100% { transform: scaleY(1) translateY(0); }
}

.water-actions { display: flex; gap: 8px; align-items: center; }
.water-add-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 14px; border-radius: 12px; cursor: pointer; font-family: inherit;
  border: 0; background: var(--brand); color: #fff; font-size: 14px; font-weight: 800;
}
.water-add-btn svg { width: 16px; height: 16px; }
.water-add-btn:active { transform: scale(.98); }
.water-undo-btn {
  padding: 11px 14px; border-radius: 12px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: 13px; font-weight: 700;
}
.water-note { font-size: 12px; color: var(--text-dim); margin-top: 8px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .water-glass.is-next, .water-glass.just-poured { animation: none; }
  .water-add-btn:active { transform: none; }
}

/* ── My Day top tiles: Rex + compact Water/Habits (Ben, 10/7) ───────────
   "under today is rex, water, message, habits can we clean all that up too
   look better and even more fun not just line itemed". Rex stays full-width
   (he earns the room); Water and Habits become a 2-up tile row — real data,
   same ids/functions as the full-size cards they replace, just a smaller
   visual footprint. See index.html for which ids are preserved vs new. */
.myday-top-tiles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.myday-top-tiles .rex-card { margin-bottom: 0; }
.myday-tilerow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.myday-tile-icon { width: 18px; height: 18px; color: var(--text-muted); }
.myday-tile-content { display: flex; flex-direction: column; gap: 1px; }
.myday-tile-label { font-size: 10.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }

/* Water tile: a real rising fill level instead of the glass row, which this
   compact layout has no room for — the count above it is still the source
   of truth, same as the full card. */
.water-card.myday-tile {
  grid-column: 1; position: relative; overflow: hidden;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  min-height: 108px;
}
.water-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 35%, transparent), color-mix(in srgb, var(--brand) 55%, transparent));
  transition: height .4s ease; pointer-events: none;
}
.water-card.myday-tile .water-card-count { font-size: 16px; font-weight: 800; color: var(--text); position: relative; }
.water-card.myday-tile .myday-tile-icon { position: relative; color: var(--brand-dark); }
.water-card.myday-tile .myday-tile-content { position: relative; }
.myday-tile-tap {
  position: relative; width: 100%; padding: 8px; border-radius: 10px; cursor: pointer;
  font-family: inherit; border: 0; background: var(--brand); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.myday-tile-tap:active { transform: scale(.98); }
/* waterAddLabel stays in the DOM (initWaterCard() still sets its text, for
   anyone reading via the button's own content rather than its aria-label)
   but is not shown — there is no room for "Drink 8 oz" at this size; the
   button's icon + aria-label carry the same meaning. */
#waterAddLabel { display: none; }
.water-card.myday-tile .water-add-btn::before {
  content: ''; width: 16px; height: 16px;
  background: currentColor;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 2.7s5.5 5.6 5.5 9.8a5.5 5.5 0 0 1-11 0C6.5 8.3 12 2.7 12 2.7Z"/%3E%3C/svg%3E') center / contain no-repeat;
  mask-repeat: no-repeat;
}
.water-card.myday-tile .water-undo-btn { display: none; }

/* Habits tile: a tap-to-expand summary — real progress dots instead of a
   bare fraction, same visual language the Coach Feed streak strip uses.
   Tapping reveals habitsCardList, the exact same per-habit checklist
   (toggleHabitDone and all) that already existed, just hidden by default
   at this size instead of always-open. */
.habits-card.myday-tile {
  grid-column: 2; padding: 0; display: flex; flex-direction: column;
  min-height: 108px; overflow: hidden;
}
.habits-tile-toggle {
  flex: 1; width: 100%; padding: 12px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  font-family: inherit; text-align: left;
}
.habits-card.myday-tile .habits-card-progress { font-size: 16px; font-weight: 800; color: var(--text); }
.habit-dots { display: flex; gap: 5px; margin-top: 8px; }
.habit-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-dark); flex-shrink: 0; }
.habit-dot.done { background: var(--yellow); }
.habits-card.myday-tile .habits-card-list {
  border-top: 1px solid var(--border); padding: 10px 12px 12px; margin: 0;
}

@media (max-width: 400px) {
  /* A very narrow phone cannot hold two 50%-width tiles plus their padding
     without the water count or habit dots wrapping awkwardly — stack them
     instead, same as every other 2-up grid in this app already does below
     560px. */
  .myday-tilerow { grid-template-columns: 1fr; }
  .water-card.myday-tile, .habits-card.myday-tile { grid-column: 1; }
}

/* ── Pain reporting ─────────────────────────────────────────────
   Ben, 8/31: "create a spot to add if they have any pain so the workouts get
   modifified". Pain could only be reported in free text, or via a chip that
   appeared only after a weight drop — so a client who hurt on set one had
   nowhere to say so, and nothing acted on it. */
.cw-pain-icon-btn {
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--text-dim); display: inline-flex; align-items: center;
}
.cw-pain-icon-btn:hover { color: var(--red); }
/* Once flagged it stays visible — the client should see it was recorded. */
.cw-pain-icon-btn.is-flagged { color: var(--red); }

.cw-pain-levels { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.cw-pain-level {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 12px 14px; border-radius: 12px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface);
}
.cw-pain-level:hover, .cw-pain-level:focus-visible { border-color: var(--brand); outline: none; }
.cw-pain-level-label { font-size: 14px; font-weight: 800; color: var(--text); }
.cw-pain-level-hint  { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.cw-pain-where {
  width: 100%; font-size: 16px;   /* 16px so iOS does not zoom mid-session */
  padding: 11px 13px; border-radius: 10px; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.cw-pain-where:focus { border-color: var(--brand); outline: none; }

/* Coach side: pain must read at a glance, not hide inside note text. */
.tr-pain-tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
  background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5;
}

/* ── Pain check-in ──────────────────────────────────────────────
   Ben, 8/31: "an any pain button like the water one where the user types it
   and selects 1-10". Distinct from the per-exercise pain button (v571): that
   one fires mid-set and changes the workout; this one is for the day, and gets
   reported on rest days when a coach most wants to know. */
.pain-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 12px;
}
.pain-card-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.pain-card-title { font-size: 14px; font-weight: 800; color: var(--text); }
.pain-card-count { font-size: 12px; font-weight: 700; color: var(--text-muted); }

.pain-today:empty { display: none; }
.pain-entry {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.pain-entry:last-child { border-bottom: 0; }
.pain-entry-loc { font-weight: 700; color: var(--text); text-transform: capitalize; }
.pain-entry-note { color: var(--text-muted); font-size: 12px; width: 100%; }
.pain-entry-sev {
  font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Three bands. The NUMBER is always shown — colour is a second channel, never
   the only one, so this still reads for a colourblind client. */
.pain-sev-low  { background: var(--brand-light); color: var(--brand-dark); }
.pain-sev-mid  { background: #fef3c7; color: #92400e; }
.pain-sev-high { background: #fee2e2; color: #b91c1c; }

.pain-open-btn {
  width: 100%; margin-top: 10px; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; padding: 11px 14px; border-radius: 12px;
  cursor: pointer; font-family: inherit; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 14px; font-weight: 800;
}
.pain-open-btn svg { width: 16px; height: 16px; color: var(--text-muted); }
.pain-open-btn:hover { border-color: var(--brand); }
.pain-card.has-pain .pain-open-btn { font-size: 13px; font-weight: 700; color: var(--text-muted); }

/* The 1-10 scale. */
.pain-scale-label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-top: 4px; }
.pain-scale { display: flex; gap: 5px; }
.pain-dot {
  flex: 1; aspect-ratio: 1; min-width: 0; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 800;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* The severity colour must apply ONLY when selected — the class is on every
   dot from render, so without this all ten paint at once and the scale reads
   as already answered. */
.pain-dot:not(.is-on) { background: var(--surface) !important; color: var(--text-dim) !important; }

/* Ben, 9/1: "on pain the numbers dont show when selected".
   A CASCADE COLLISION, not a missing rule. .pain-sev-* and .pain-dot are both
   single-class selectors (0,1,0), and .pain-dot is declared LATER — so its
   `color: var(--text-dim)` beat the band colour on a selected dot. The tint
   applied, the number did not, and dim-grey on amber or red is invisible.
   Two classes (0,2,0) puts the band colour back on top for the selected state
   without touching the unselected one. */
/* One dot, not a filled bar (Ben, 9/1: "only be able to select one"). A single
   tinted square among ten is easy to miss, so the selected one also gets a
   ring and a slight lift — the marker has to carry on its own now that
   neighbouring dots no longer reinforce it. */
.pain-dot.is-on {
  border-color: currentColor; font-weight: 800;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px currentColor;
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) { .pain-dot.is-on { transform: none; } }
/* Not var(--brand-dark) — at 4.46:1 on the light tint it misses AA. This
   passes at 6.3:1, which matters for a number someone reads at a glance. */
.pain-dot.is-on.pain-sev-low  { background: var(--brand-light); color: #0c6152; }
.pain-dot.is-on.pain-sev-mid  { background: #fef3c7; color: #92400e; }
.pain-dot.is-on.pain-sev-high { background: #fee2e2; color: #b91c1c; }
.pain-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pain-scale-legend {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--text-dim); font-weight: 600;
}
.pain-sheet { max-width: 380px; }

/* ── Coach session logging ──────────────────────────────────────
   Ben, 8/31: he trains these clients on Zoom, so he has the numbers — there
   was nowhere to put them. Prefilled from the plan because he is typing during
   a call: the common case is confirming the plan with a couple of weights
   changed, not entering a session from scratch. */
.tr-log-sheet { max-width: 520px; }
.tr-log-intro { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }

/* Logging a workout on a past day that had nothing scheduled. Ben, 9/2:
   136 sessions logged in 90 days against 44 scheduled events — most training
   was happening off the calendar with no way to record it. */
.tr-log-title-lbl {
  display: block; font-size: 11px; font-weight: 800; color: var(--text-muted);
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px;
}
.tr-log-title {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 16px; font-weight: 600;  /* 16px: iOS zooms below it */
  letter-spacing: 0; text-transform: none;
}
.tr-log-free-name {
  width: 100%; padding: 9px 11px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 16px; font-weight: 600;
}
.tr-log-addrow {
  display: block; width: 100%; margin: 10px 0 4px; padding: 10px;
  border: 1.5px dashed var(--border); border-radius: 10px;
  background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.tr-log-addrow:active { border-color: var(--brand); color: var(--brand-on-light); }
.tr-log-list { max-height: 52vh; overflow-y: auto; margin-bottom: 12px; }
.tr-log-ex {
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.tr-log-ex:last-child { border-bottom: 0; }
.tr-log-ex-name { font-size: 14px; font-weight: 800; color: var(--text); }
.tr-log-ex-plan {
  font-size: 11px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px;
}
.tr-log-fields { display: flex; gap: 8px; }
.tr-log-fields label { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-log-fields span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim);
}
.tr-log-fields input, .tr-log-note {
  width: 100%; font-size: 16px;   /* 16px so iOS does not zoom mid-call */
  font-weight: 700; padding: 9px 11px; border-radius: 9px; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tr-log-note { margin-top: 8px; font-weight: 500; font-size: 16px; }
.tr-log-fields input:focus, .tr-log-note:focus { border-color: var(--brand); outline: none; }
.tr-log-empty { font-size: 13px; color: var(--text-dim); padding: 16px 0; }

/* ── Workouts: the three ways in ────────────────────────────────
   Ben, 8/31: he wanted Workouts to show "the templates in the program, some of
   the exercises, or I can just build a new workout". An empty list was the
   wrong answer — 0 saved workouts, but 10 program templates and 749 exercises
   sitting one tab away and unreachable from here. */
.tr-wo-start { padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.tr-wo-start-lead { font-size: 13px; color: var(--text-muted); margin: 4px 0 6px; }
.tr-wo-start-btn {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px 16px; border-radius: 12px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface);
}
.tr-wo-start-btn:hover, .tr-wo-start-btn:focus-visible { border-color: var(--brand); outline: none; }
.tr-wo-start-name { font-size: 14.5px; font-weight: 800; color: var(--text); }
.tr-wo-start-sub  { font-size: 12px; color: var(--text-muted); }

.tr-wo-daylist { max-height: 60vh; overflow-y: auto; padding: 0 16px 16px; }
.tr-wo-dayrow {
  width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 12px 4px; cursor: pointer; font-family: inherit;
  border: 0; border-bottom: 1px solid var(--border); background: transparent;
}
.tr-wo-dayrow:last-child { border-bottom: 0; }
.tr-wo-dayrow:hover .tr-wo-dayrow-name { color: var(--brand); }
.tr-wo-dayrow-name { font-size: 14px; font-weight: 700; color: var(--text); }
.tr-wo-dayrow-sub  { font-size: 11.5px; color: var(--text-muted); }

/* ── Verified-food suggestions ──────────────────────────────────
   Ben, 9/1: "what happens if someone keeps logging the same item ... especially
   if it sees a pattern?" The frequency memory already worked; what did not was
   VERIFICATION — only coach_foods short-circuits the AI, and it had 11 entries
   while 38 foods had been logged 3+ times.
   Suggest, never auto-promote: "blended green smoothie" sits at 904 cal across
   27 logs — a bad AI reading someone repeated. A coach glance is the safeguard. */
.tr-foods-suggest {
  margin: 0 0 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0;
}
.tr-sug-hd { font-size: 13.5px; font-weight: 800; color: var(--text); }
.tr-sug-sub { font-size: 12px; color: var(--text-muted); margin: 4px 0 10px; line-height: 1.45; }
.tr-sug-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.tr-sug-row:last-child { border-bottom: 0; }
.tr-sug-info { flex: 1; min-width: 0; }
.tr-sug-name {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-sug-meta { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tr-sug-add {
  flex-shrink: 0; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}
.tr-sug-add:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.tr-sug-add:disabled { opacity: .55; cursor: default; }

/* ── Milestones: "10 things you should be able to do" ───────────
   Ben, 9/1. Coach ticks it on the Zoom call; the client sees the scorecard
   and opts in to the work. */

/* Coach side */
.ms-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ms-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.ms-score { font-size: 38px; font-weight: 800; line-height: 1.1; color: var(--text); }
.ms-score em { font-style: normal; font-size: 17px; color: var(--text-dim); margin-left: 3px; }
.ms-prev {
  text-align: right; font-size: 11px; color: var(--text-muted); line-height: 1.5;
}
.ms-prev b { font-size: 15px; color: var(--text); }
.ms-prev span { display: block; color: var(--text-dim); font-size: 10.5px; }
.ms-help { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 12px; }

.ms-list { display: flex; flex-direction: column; }
.ms-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 4px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.ms-item:last-child { border-bottom: 0; }
.ms-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.ms-box {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--border); background: var(--surface);
}
.ms-item.is-pass .ms-box { background: var(--brand); border-color: var(--brand); }
.ms-item input:focus-visible + .ms-box { outline: 2px solid var(--brand); outline-offset: 2px; }
.ms-text { font-size: 14px; font-weight: 700; color: var(--text); }
.ms-item.is-pass .ms-text { color: var(--text-muted); }
.ms-note { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }
.ms-actions { margin-top: 14px; }
.ms-actions .btn-primary { width: 100%; }

.ms-need-age {
  padding: 18px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border);
}
.ms-need-age-hd { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.ms-need-age p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Client side */
.ms-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 12px;
}
.ms-card-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.ms-card-score { font-size: 34px; font-weight: 800; line-height: 1.15; color: var(--text); }
.ms-card-score em { font-style: normal; font-size: 15px; color: var(--text-dim); margin-left: 3px; }
.ms-card-hd { margin-bottom: 8px; }
.ms-card-item {
  display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.ms-card-item:last-child { border-bottom: 0; }
.ms-card-tick { width: 16px; flex-shrink: 0; color: var(--brand); }
.ms-card-body { flex: 1; min-width: 0; }
.ms-card-text { font-size: 13.5px; font-weight: 700; color: var(--text-muted); }
.ms-card-item.is-pass .ms-card-text { color: var(--text); }
.ms-card-working { font-size: 11.5px; font-weight: 700; color: var(--brand); margin-top: 3px; }
.ms-card-btn {
  margin-top: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700;
  border: 1px solid var(--brand); background: var(--surface); color: var(--brand-dark);
}
.ms-card-btn:disabled { border-color: var(--border); color: var(--text-dim); cursor: default; }

.ms-ch-card { max-width: 400px; }
.ms-ch-meta { font-size: 12.5px; font-weight: 700; color: var(--brand-dark); }
.ms-ch-drills { margin: 10px 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.ms-ch-caution {
  font-size: 12px; line-height: 1.45; padding: 9px 11px; border-radius: 8px;
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
}
.ms-ch-retest { font-size: 12px; color: var(--text-muted); margin-top: 10px; font-weight: 700; }

/* Milestone: measured value + cross-decade comparison.
   Ben, 9/1: "i know older clients will want to beat the younger persons
   numbers so this needs to be an option". A tick cannot prove that; a
   recorded number can — so the number box only appears on items where the
   figure IS the standard. */
.ms-item-wrap { border-bottom: 1px solid var(--border); }
.ms-item-wrap:last-child { border-bottom: 0; }
.ms-item-wrap .ms-item { border-bottom: 0; }
.ms-num {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 0 4px 11px 34px; font-size: 12px; color: var(--text-muted);
}
.ms-num input {
  width: 72px; font-size: 16px;   /* 16px so iOS does not zoom mid-assessment */
  font-weight: 700; padding: 6px 9px; border-radius: 8px; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ms-num input:focus { border-color: var(--brand); outline: none; }
.ms-num em { font-style: normal; font-weight: 700; color: var(--text-dim); }
.ms-num-why { width: 100%; font-size: 10.5px; color: var(--text-dim); }

.ms-cmp { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.ms-cmp-hd { font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.ms-cmp-bands { display: flex; gap: 6px; flex-wrap: wrap; }
.ms-cmp-band {
  padding: 6px 13px; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}
.ms-cmp-band.is-on { border-color: var(--brand); background: var(--brand-light); color: var(--brand-on-light); }
.ms-cmp-result { margin-top: 12px; }
.ms-cmp-score { font-size: 15px; font-weight: 700; color: var(--text); }
.ms-cmp-score b { font-size: 26px; color: var(--brand); }
.ms-cmp-score span { display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
/* Said plainly, because a partial comparison presented as a full one is a lie. */
.ms-cmp-why { font-size: 11px; color: var(--text-dim); line-height: 1.45; margin: 6px 0 10px; }
.ms-cmp-row {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 13px;
}
.ms-cmp-mark { width: 14px; font-weight: 800; flex-shrink: 0; }
.ms-cmp-yes .ms-cmp-mark { color: var(--brand); }
.ms-cmp-no .ms-cmp-mark, .ms-cmp-unknown .ms-cmp-mark { color: var(--text-dim); }
.ms-cmp-yes .ms-cmp-text { color: var(--text); font-weight: 700; }
.ms-cmp-text { flex: 1; min-width: 0; color: var(--text-muted); }
.ms-cmp-num { font-size: 11.5px; font-weight: 700; color: var(--brand-dark); flex-shrink: 0; }
.ms-cmp-note { font-size: 11px; color: var(--text-dim); line-height: 1.45; margin-top: 8px; }

/* Band picker — the coach can assess against any decade, not just the
   client's own. Ben, 9/1: "a 70yr old clients needs to be able to pick
   different assesmnets from different age groups even if its not there age". */
.ms-bandpick { margin: 10px 0 12px; }
.ms-bandpick-lbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
}
.ms-bandpick-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ms-bandpick-btn {
  position: relative; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}
.ms-bandpick-btn.is-on { border-color: var(--brand); background: var(--brand-light); color: var(--brand-on-light); }
/* Marks which list matches their actual age, so an off-band choice is
   deliberate rather than accidental. */
.ms-bandpick-btn em {
  display: block; font-style: normal; font-size: 9px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; opacity: .7;
}
.ms-bandpick-note {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.45; margin: 8px 0 0;
}
.ms-card-offband {
  font-size: 11.5px; font-weight: 700; color: var(--brand-dark); margin-top: 4px;
}

/* Coach-created challenges. Ben, 9/1: "a button to create a challenge thats
   specific to age like hold a plank for 30 seconds while one foot is elevated
   off the ground". Kept beside the ten, not inside them, so "7/10" keeps
   meaning the same thing for every client. */
.ms-custom { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.ms-custom-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px;
}
.ms-custom-empty { font-size: 12px; color: var(--text-dim); line-height: 1.45; margin: 0; }
.ms-ch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.ms-ch-row:last-child { border-bottom: 0; }
.ms-ch-info { flex: 1; min-width: 0; }
.ms-ch-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
/* Two challenges can share a name with different standards. The band tells
   them apart in the picker. */
.ms-ch-dupe {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  background: var(--bg-soft, #f1f3f5); color: var(--text-muted);
}
.ms-ch-standard { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.ms-ch-assign {
  flex-shrink: 0; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700;
  border: 1px solid var(--brand); background: var(--surface); color: var(--brand-dark);
}
.ms-ch-assign:disabled { border-color: var(--border); color: var(--text-dim); cursor: default; }

/* What the client is working on right now, and the only place a challenge can
   be closed. Ben, 9/2: 2 active challenges, 0 ever passed — nothing anywhere
   could mark one done, so assigned work could be started but never finished. */
.ms-working { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.ms-working-hd {
  font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px;
}
.ms-working-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.ms-working-row:last-child { border-bottom: 0; }
.ms-working-info { flex: 1; min-width: 0; }
.ms-working-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ms-working-when { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
/* Due for retest reads as the one thing needing attention. */
.ms-working-row.is-due .ms-working-when { color: var(--brand-dark); font-weight: 700; }
.ms-working-acts { display: flex; flex-shrink: 0; gap: 6px; }
.ms-working-pass, .ms-working-drop {
  flex-shrink: 0; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700;
}
.ms-working-pass { border: 1px solid var(--brand); background: var(--brand); color: #fff; }
.ms-working-drop {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}
.ms-working-pass:disabled, .ms-working-drop:disabled {
  opacity: .6; cursor: default;
}

/* The builder */
/* Ben, 9/2: "it creates the challenge but theres no way to input it still".
   .tr-picker-sheet is capped at 70dvh with overflow:hidden, so once the AI
   draft rendered — seven fields plus the band checkboxes plus Save — the form
   grew past the sheet and the Save button was CLIPPED with no way to reach it.
   The challenge was written and could never be saved.
   Every other sheet body in this file scrolls; this one did not. */
.tr-ch-body {
  padding: 0 16px 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;   /* a flex child will not shrink to allow scrolling without this */
}
.tr-ch-lead { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin: 0 0 10px; }
.tr-ch-input, .tr-ch-f input, .tr-ch-f textarea {
  width: 100%; font-size: 16px;   /* 16px so iOS does not zoom the sheet */
  font-family: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  resize: vertical;
}
.tr-ch-input:focus, .tr-ch-f input:focus, .tr-ch-f textarea:focus {
  border-color: var(--brand); outline: none;
}
.tr-ch-bands { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.tr-ch-bands-lbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); width: 100%;
}
.tr-ch-band {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
}
.tr-ch-band input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.tr-ch-out { margin-top: 14px; }
.tr-ch-err { font-size: 13px; color: var(--red); }
.tr-ch-draft { display: flex; flex-direction: column; gap: 10px; }
.tr-ch-f { display: flex; flex-direction: column; gap: 4px; }
.tr-ch-f > span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim);
}
.tr-ch-f2 { display: flex; gap: 10px; }
.tr-ch-f2 .tr-ch-f { flex: 1; min-width: 0; }

/* Client side */
.ms-assigned { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.ms-assigned-hd {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-dark); margin-bottom: 8px;
}
.ms-assigned-row {
  padding: 10px 12px; border-radius: 10px; background: var(--brand-light);
  margin-bottom: 8px;
}
.ms-assigned-name { font-size: 14px; font-weight: 800; color: var(--text); }
.ms-assigned-standard { font-size: 12.5px; color: var(--text); margin-top: 2px; line-height: 1.45; }
.ms-assigned-how { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.ms-assigned-scale { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
.ms-assigned-when { font-size: 11px; font-weight: 700; color: var(--brand-dark); margin-top: 5px; }
/* An overdue retest is the one thing on this card that needs acting on. */
.ms-assigned-when.is-due { color: var(--warn, #b45309); }

/* Pinned footer for the challenge builder. The sheet is capped at 70dvh, so a
   Save button placed after a seven-field draft simply fell off the bottom —
   the challenge could be written and never saved. It sits outside the
   scrolling body now, so it is always reachable. */
.tr-ch-foot {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.tr-ch-foot .btn-primary { width: 100%; }

/* A challenge written for another age group. Still assignable — Ben, 9/2:
   "some clients want to be tested in other age groups". Dimmed and labelled so
   the choice is deliberate rather than accidental. */
.ms-ch-row.is-other .ms-ch-name { color: var(--text-muted); }
.ms-ch-band-note {
  font-size: 10.5px; font-weight: 700; color: var(--text-dim); margin-top: 2px;
}

/* ── What you prescribe ─────────────────────────────────────────────────────
   Ben, 9/2: he asked for a questionnaire to work out what he prescribes most.
   The templates already record it, so this counts them and ranks what to film. */
.tr-prescribe-body { padding: 0 4px 40px; }
.tr-prescribe-loading, .tr-prescribe-empty {
  font-size: 13px; color: var(--text-muted); padding: 18px 2px; line-height: 1.5;
}
.tr-prescribe-sum {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 22px;
}
.tr-prescribe-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 10px; text-align: center;
}
.tr-prescribe-n {
  display: block; font-size: 22px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tr-prescribe-lbl {
  display: block; font-size: 10.5px; color: var(--text-muted);
  margin-top: 3px; line-height: 1.3;
}
/* The gap is the number that should prompt action. */
.tr-prescribe-stat.is-gap { border-color: var(--brand); }
.tr-prescribe-stat.is-gap .tr-prescribe-n { color: var(--brand-dark); }

.tr-prescribe-h {
  font-size: 13px; font-weight: 800; color: var(--text); margin: 24px 0 4px;
}
.tr-prescribe-note {
  font-size: 12px; color: var(--text-muted); line-height: 1.45; margin: 0 0 10px;
}
.tr-prescribe-done {
  font-size: 13px; color: var(--brand-dark); font-weight: 600; margin: 0 0 10px;
}
.tr-prescribe-list { list-style: none; margin: 0; padding: 0; counter-reset: presc; }
.tr-prescribe-row {
  counter-increment: presc;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 2px; border-bottom: 1px solid var(--border);
}
.tr-prescribe-row:last-child { border-bottom: 0; }
.tr-prescribe-rank {
  flex-shrink: 0; width: 20px; font-size: 11px; font-weight: 800;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.tr-prescribe-rank::before { content: counter(presc) "."; }
.tr-prescribe-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text); }
.tr-prescribe-times {
  flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tr-prescribe-tag {
  flex-shrink: 0; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .03em;
  background: var(--bg-soft, #f1f3f5); color: var(--text-muted);
}
.tr-prescribe-tag.is-ok { background: var(--brand-wash, #e8f6f2); color: var(--brand-dark); }
/* The full list is reference, so a filmed exercise recedes. */
.tr-prescribe-all .tr-prescribe-row.has-video .tr-prescribe-name { color: var(--text-muted); }


/* ── Moving a workout without dragging ──────────────────────────────────────
   Ben, 9/3: "the drag a workout function on the mobile is very difficult to
   use how can i fix that?" Drag is fixed (hold + slop), but this is the path
   that always works: tap the workout, tap Move, tap the day. The target is the
   whole 84px cell rather than a 15px row. */
.tr-mc-movebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2150;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--brand); color: #fff;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
}
.tr-mc-movebar-txt { font-size: 13.5px; font-weight: 600; }
.tr-mc-movebar-txt b { font-weight: 800; }
.tr-mc-movebar-x {
  flex-shrink: 0; padding: 9px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .55); background: transparent; color: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  min-height: 40px;                  /* a real touch target, unlike the row */
}
/* Every day reads as tappable while a move is in progress. */
body.tr-mc-moving .tr-mc-day { outline: 1.5px dashed var(--brand); outline-offset: -3px; }
body.tr-mc-moving .tr-mc-day.past { outline: none; opacity: .45; }
/* The row being moved stays visible so it is obvious what is in flight. */
.tr-mc-row.is-moving { background: var(--brand); color: #fff; font-weight: 700; }

/* While dragging, nothing else on the page should scroll or select. */
body.tr-mc-dragging-body { overscroll-behavior: none; user-select: none; }

/* ── A logged session, opened from the calendar ─────────────────────────────
   Ben, 9/6: "can i make it editable in the calendar also the ability to drag
   and drop it and all details attached". Everything the client recorded —
   weight, reps, RPE and their own note — with the numbers editable in place. */
.tr-sl-list { max-height: 52vh; overflow-y: auto; margin: 4px 0 14px; }
.tr-sl-ex {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px;
}
.tr-sl-ex-head { display: flex; align-items: center; gap: 8px; }
.tr-sl-ex-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: var(--text); }
.tr-sl-rm {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent; color: var(--text-dim);
  font-size: 19px; line-height: 1; cursor: pointer;
}
.tr-sl-rm:active { background: var(--bg-soft, #f1f3f5); color: var(--red); }
.tr-sl-ex-muscle {
  font-size: 11px; color: var(--text-muted); margin-top: 1px;
}
.tr-sl-set { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.tr-sl-set-n {
  width: 18px; flex-shrink: 0; text-align: center;
  font-size: 11px; font-weight: 800; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.tr-sl-set input {
  flex: 1; min-width: 0; padding: 7px 8px; text-align: center;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 16px;   /* 16px: iOS zooms below it */
  font-variant-numeric: tabular-nums;
}
.tr-sl-noset { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
/* The client's own words. This is the reason a coach opens the session. */
.tr-sl-note {
  margin-top: 8px; padding: 7px 10px; border-radius: 8px;
  background: var(--brand-light); color: var(--brand-on-light);
  font-size: 12.5px; line-height: 1.45; font-style: italic;
}
/* Ben, 10/6: "when i save the workout and then open up the saved day
   workout i dont see it" — the video/photo WAS saved; this fallback view
   (a session with no linked program_events row) just never rendered it.
   Read-only tap-to-view, same 44px thumb convention as the live editor's
   own .tr-we-med-thumb, no add/remove since this is history, not a draft. */
.tr-sl-media { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tr-sl-media-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--surface2); border: 1.5px solid var(--border);
  color: var(--text-muted); cursor: pointer;
}
.tr-sl-media-thumb:hover { border-color: var(--brand); color: var(--brand); }
.tr-sl-media-thumb.tr-sl-media-video { color: var(--brand); }

/* ── My Day: hidden-card icons ──────────────────────────────────────────────
   Ben, 9/6: "My day still looks cluttered, can we create icons that hide
   certain metrics?" A card turned off becomes an icon here — tap it to bring
   it back. The cog is always present, or the picker would be unreachable
   until you had already hidden something. */
.myday-hidden-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px var(--gutter) 0;
}
.myday-chip {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; padding: 0;
}
.myday-chip svg { width: 17px; height: 17px; }
.myday-chip:active { border-color: var(--brand); color: var(--brand-on-light); }
/* The cog is the way in, not a hidden card — set apart so it does not read as
   another metric waiting to be restored. */
.myday-chip-edit { margin-left: auto; border-style: dashed; }

/* The picker */
.myday-pick-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.myday-pick-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 2px; border-bottom: 1px solid var(--border); cursor: pointer;
  min-height: 44px;                       /* a real touch target */
}
.myday-pick-row:last-child { border-bottom: 0; }
.myday-pick-name { font-size: 14px; color: var(--text); }
.myday-pick-row input { width: 20px; height: 20px; accent-color: var(--brand); }

/* ── Header message button ──────────────────────────────────────────────────
   Ben, 9/6: "ADD A MESSAGE BUTTON AND ICON TO DISPLAY AND HIDE BUT MAKE SURE
   IT WORKS". Messaging already worked — the only ways in were a card buried on
   My Day and a floating bubble. This is a permanent door, with the unread
   count on it. Inherits .header-btn, so it is already a 44px target. */
.header-msg-btn { position: relative; }
.header-msg-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* Sits over the icon, so it needs its own edge against the header. */
  box-shadow: 0 0 0 2px var(--surface);
}
/* Open state, so the button says whether the panel is showing. */
.header-msg-btn.is-open { color: var(--brand-on-light); background: var(--brand-light); }

/* ── Log sheet: demo video + swap ───────────────────────────────────────────
   Ben, 9/8: "because I'm walking the client through live, and I'm looking at
   this input, I need to be able to see what that video is. Also, I need the
   ability to swap it." Every planned exercise already carried a thumbnail and
   a youtube_url — this sheet just never showed them. */
.tr-log-ex-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tr-log-ex-info { flex: 1; min-width: 0; }
.tr-log-thumb {
  position: relative; flex-shrink: 0;
  width: 56px; height: 42px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); overflow: hidden; cursor: pointer;
}
.tr-log-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-log-thumb-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .34); color: #fff; font-size: 13px;
}
.tr-log-swap {
  flex-shrink: 0; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted);
  font-family: inherit; font-size: 12px; font-weight: 700;
  min-height: 36px;
}
.tr-log-swap:active { border-color: var(--brand); color: var(--brand-on-light); }

/* The swap picker */
.tr-log-swap-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 6px; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; cursor: pointer; text-align: left;
  min-height: 52px;                       /* a real target mid-session */
}
.tr-log-swap-row:last-child { border-bottom: 0; }
.tr-log-swap-row:active { background: var(--brand-light); }
.tr-log-swap-thumb {
  width: 46px; height: 34px; flex-shrink: 0;
  border-radius: 6px; object-fit: cover; background: var(--bg);
  border: 1px solid var(--border);
}
.tr-log-swap-noimg { display: block; }
.tr-log-swap-name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); }
.tr-log-swap-cat {
  flex-shrink: 0; font-size: 10.5px; color: var(--text-muted);
}

/* ── "Used before" badge + who ──────────────────────────────────────────────
   Ben, 9/8: "I still have no way of knowing if the exercise was used
   previously until I click on it into someone's program ... a badge that says
   it was used before ... it needs to also be able to drill down and see which
   clients". It is a button, not a span, because tapping it opens the list. */
.tr-ex-badge--used {
  border: 1px solid var(--brand);
  background: var(--brand-light);
  color: var(--brand-on-light);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}
.tr-ex-badge--used:active { background: var(--brand); color: #fff; }

.tr-usage-list { margin: 4px 0 14px; max-height: 54vh; overflow-y: auto; }
.tr-usage-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid var(--border);
}
.tr-usage-row:last-child { border-bottom: 0; }
.tr-usage-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.tr-usage-tags { display: flex; gap: 6px; flex-shrink: 0; }
.tr-usage-tag {
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .03em;
  background: var(--bg-soft, #f1f3f5); color: var(--text-muted);
}
/* Actually trained it — a stronger fact than "it is in their program". */
.tr-usage-tag.is-done { background: var(--brand-light); color: var(--brand-on-light); }

/* ── Recovery temperature ───────────────────────────────────────────────────
   Ben, 9/8: "in recovery sauna and cold plunge have a what was the temp
   button" — with his own numbers remembered (cold plunge 50, sauna 190) and
   +/- 5 steps, because nobody types 185 when they meant 190. */
.cw-temp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cw-temp-input {
  flex: 1; min-width: 0; text-align: center;
  font-size: 18px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cw-temp-unit { font-size: 14px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.cw-temp-step {
  flex-shrink: 0; width: 48px; min-height: 44px;   /* a real target, wet hands */
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 14px; font-weight: 800;
  cursor: pointer;
}
.cw-temp-step:active { border-color: var(--brand); color: var(--brand-on-light); }

/* ── "+ Video" badge and the picker ─────────────────────────────────────────
   Ben, 9/9: "link it to YouTube so that way I can see other variations of
   videos available that I can pull to add easily to my master library.
   Remember, I want these videos to still be under three minutes."
   The picker existed but only fired when a search matched NOTHING — so an
   exercise that exists WITHOUT a video had no route to one. */
.tr-ex-badge--novid {
  border: 1px dashed var(--brand);
  background: transparent;
  color: var(--brand-on-light);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}
.tr-ex-badge--novid:active { background: var(--brand-light); }

/* Length on the thumbnail — a 2:59 and a 0:25 are different choices. */
.tr-libyt-card { position: relative; }
.tr-libyt-dur {
  position: absolute; right: 5px; top: 5px;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(0, 0, 0, .78); color: #fff;
  font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── PAR-Q screening rows ──────────────────────────────────────
   Reuses the terms screen shell. The two answers are equal-weight buttons
   rather than a checkbox: a checkbox left unticked is ambiguous between "no"
   and "did not read it", and this record has to mean something. */
.parq-row { display: flex; flex-direction: column; gap: 10px; }
.parq-q { margin: 0; }
.parq-answers { display: flex; gap: 8px; }
.parq-btn {
  flex: 1;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.parq-btn:hover { border-color: var(--brand); }
.parq-btn.sel {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-terms-agree:disabled {
  opacity: .5;
  cursor: default;
  background: var(--border);
}

/* A PAR-Q flag means the client answered yes to a health screening question.
   Amber rather than red: it is a "talk to them first", not an alarm.
   Matches .client-glp1-badge's shape so the two read as the same kind of fact. */
.client-parq-badge {
  color: #b45309; background: rgba(217,119,6,.12);
  border: 1px solid rgba(217,119,6,.35); font-weight: 800;
}
/* Probably eating more than they are logging (Ben, 9/16). Blue, not red: this
   is a prompt for a conversation, not a client doing something wrong. Measured
   on the live roster before shipping — 2 of 7 clients with a full week of data
   trip it, at 51% and 45% of target. */
.client-underlog-badge {
  color: #1d4ed8; background: rgba(37,99,235,.12);
  border: 1px solid rgba(37,99,235,.35); font-weight: 800;
}

/* ── Exact match from the food database ───────────────────────
   Offered on submit when USDA has the food, before spending ~12s on an AI
   estimate. Measured 9/11: 0.6-1.1s here vs ~12s there. Styled as a shortcut,
   not a warning — taking it is the better outcome, not a fallback. */
.exact-match {
  margin-top: 10px;
  border: 1.5px solid var(--brand);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.exact-match-head {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--brand);
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.exact-match-checking {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 2px;
}
.exact-match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.exact-match-row:hover { background: var(--surface2); }
.exact-match-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.exact-match-macros {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.exact-match-per { font-weight: 500; color: var(--text-dim); }
.exact-match-ai {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.exact-match-ai:hover { color: var(--text); background: var(--surface2); }

/* ── Week plan — their logged week, rebuilt ───────────────────
   Coach-side draft. Reads as a coach's notes, not a generated report: the
   headline and the problem lead, the lists support them. */
.cd-plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}
.cd-plan-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.cd-plan-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.cd-plan-btn {
  flex-shrink: 0;
  background: var(--brand); color: #fff;
  border: none; border-radius: 9px;
  padding: 8px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.cd-plan-btn:disabled { opacity: .6; cursor: default; }
.cd-plan-working, .cd-plan-empty {
  font-size: 12px; color: var(--text-dim); padding: 10px 0;
}
.cd-plan-locked { padding: 12px 0 2px; }
.cd-plan-locked-hd { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.cd-plan-locked p { font-size: 12px; color: var(--text-muted); margin: 0 0 6px; line-height: 1.5; }
.cd-plan-locked-sub { color: var(--text-dim) !important; }
.cd-plan-headline {
  font-size: 14px; font-weight: 700; line-height: 1.45;
  color: var(--text); margin: 12px 0 8px;
}
.cd-plan-problem {
  font-size: 12px; line-height: 1.55; color: var(--text-muted);
  border-left: 3px solid var(--brand);
  padding: 8px 0 8px 10px; margin-bottom: 12px;
}
.cd-plan-sec { margin-bottom: 12px; }
.cd-plan-sec-hd {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-dim);
  padding-bottom: 5px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cd-plan-keep { color: #16a34a; }
.cd-plan-swap { color: #b45309; }
.cd-plan-try  { color: var(--brand); }
.cd-plan-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.cd-plan-row:last-child { border-bottom: none; }
.cd-plan-food { font-size: 12.5px; font-weight: 700; color: var(--text); }
.cd-plan-meal {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-dim);
}
.cd-plan-why { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.cd-plan-why em { font-style: normal; font-weight: 700; color: var(--text); }
.cd-plan-hits {
  font-size: 12px; font-weight: 800; color: var(--text);
  padding-top: 8px; font-variant-numeric: tabular-nums;
}
.cd-plan-conf {
  font-size: 11px; line-height: 1.5; padding: 8px 10px;
  border-radius: 8px; background: var(--surface2); color: var(--text-muted);
}
.cd-plan-conf--low { background: rgba(217,119,6,.1); color: #b45309; }
.cd-plan-foot {
  font-size: 10.5px; color: var(--text-dim);
  margin: 8px 0 0; text-align: center;
}

/* ── Plan day sheet — what a tapped calendar day offers ────────
   Ben, 9/12: "as soon as i click on it it starts the workout i need options".
   Starting is still available, it is just no longer what a stray tap does. */
/* A solid card, not text floating on the dimmed calendar.
   Ben, 9/13: "the card that pops up when you click on a day needs to be
   bordered off so it doest show the calendar in the back."
   .cw-video-card was built for a video — the iframe supplied its own
   background, so the card never needed one. These sheets are text. */
.cwpc-day-card, .cwpc-swap-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  max-height: 86vh;
  overflow-y: auto;
}
/* The head sits on the card now, so its text is app-coloured, not white. */
.cwpc-day-card .cw-video-name,
.cwpc-swap-card .cw-video-name { color: var(--text); font-size: 16px; }
.cwpc-day-card .cw-sheet-x,
.cwpc-swap-card .cw-sheet-x { color: var(--text-muted); }
.cwpc-day-card .cw-video-head,
.cwpc-swap-card .cw-video-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px; margin-bottom: 12px;
}
.cwpc-day-card .cw-video-back,
.cwpc-swap-card .cw-video-back {
  border: 1.5px solid var(--border); color: var(--text-muted);
}
.cwpc-day-when {
  font-size: 12px; color: var(--text-dim);
  margin: 0 0 14px; font-weight: 600;
}
.cwpc-day-actions { display: flex; flex-direction: column; gap: 8px; }
.cwpc-day-act {
  width: 100%; padding: 13px 14px;
  border: 1.5px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.cwpc-day-act:hover { border-color: var(--brand); }
.cwpc-day-act--go {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.cwpc-day-act--primary { border-color: var(--brand-mid); }
.cwpc-day-note {
  font-size: 11.5px; color: var(--text-dim);
  margin: 12px 0 0; line-height: 1.5;
}
/* buildExpandedDayHtml is written for the calendar grid and returns a
   `grid-column: 1/-1` wrapper. Inside this sheet there is no grid, so the
   declaration is inert — but the card still needs its own padding reset so a
   logged session does not sit flush against the sheet edge. */
.cwpc-day-list .cw-calendar-day-expanded {
  grid-column: auto; margin: 0; padding: 0; background: none; border: none;
}
.cwpc-day-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 58vh; overflow-y: auto; margin-bottom: 6px;
}

/* The preview mirrors the session card the client trains from — thumbnail,
   name, coach cue, prescription — minus the controls, because nothing is
   logged here. Ben, 9/13: "it needs to open up like the workout editor we
   need to stay consistent". */
.cwpc-prev-block {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-dim);
  margin: 12px 0 4px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.cwpc-prev-block:first-child { margin-top: 0; }
.cwpc-prev-ex {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
}
.cwpc-prev-thumb {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 9px; object-fit: cover;
  background: var(--surface2);
}
.cwpc-prev-thumb--none {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--text-dim);
  border: 1px solid var(--border);
}
.cwpc-prev-main { flex: 1; min-width: 0; }
.cwpc-prev-name {
  font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3;
}
.cwpc-prev-note {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.45; margin-top: 2px;
}
.cwpc-prev-rx {
  flex-shrink: 0; font-size: 12.5px; font-weight: 800;
  color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Move mode — tapping a day to somewhere else ───────────────
   Ben, 9/13: "the drag and move date function arent to clear". Drag stays for
   anyone who finds it; this is the same operation as two ordinary taps, and it
   says what it is doing at every step. */
.cwpc-day--moving {
  border-color: var(--brand); border-width: 2px;
  background: var(--brand-light);
  animation: cwpc-move-pulse 1.4s ease-in-out infinite;
}
@keyframes cwpc-move-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}
.cwpc-day--target {
  border-color: var(--brand-mid);
  border-style: dashed;
  background: var(--surface);
  position: relative;          /* anchors the :active "Move here" label */
}
.cwpc-day--target:active { background: var(--brand-light); }
.cwpc-day--blocked { opacity: .32; }
@media (prefers-reduced-motion: reduce) {
  .cwpc-day--moving { animation: none; }
  .cwpc-day:active  { transform: none; }
}

/* A day being dragged should look picked up, not just highlighted. */
.cwpc-day.cwpc-dragging {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  border-color: var(--brand);
  opacity: .95;
}
/* Ben, 9/16: "when im dragging a workout i see a green bored where the new
   drag is stopping but also put text thats readable that says drag here
   please."
   The green border said WHERE it would land but not WHAT would happen. The
   cell is 66px and already holds a day label, a date and a dot, so the words
   go on top of it rather than inside — the date stays legible underneath. */
.cwpc-day.cwpc-over {
  border-color: var(--brand); border-style: dashed;
  background: var(--brand-light);
  position: relative;
}
.cwpc-day.cwpc-over::after {
  content: 'Drop here';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand);
  color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .3px;
  border-radius: 9px;
  /* Never intercepts the drop — elementFromPoint must still find the cell. */
  pointer-events: none;
}
/* Tap-to-move (no drag): every legal day is a target, so labelling all of them
   would be noise. The one being pressed says it instead. */
.cwpc-day--target:active::after {
  content: 'Move here';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .3px;
  border-radius: 9px; pointer-events: none;
}

.cwpc-hint--move {
  color: var(--brand); font-weight: 700;
  background: var(--brand-light); border-radius: 8px;
  padding: 8px 10px;
}

/* Reopen a logged session to fix or finish it.
   Ben, 9/13: "Need to be able to reopen and edit a completed logged session by
   clicking on it in the calendar". It was write-once before. */
.cw-hist-edit {
  width: 100%; margin-top: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.cw-hist-edit:hover { border-color: var(--brand); color: var(--brand); }

/* ── Classes that were rendered but never styled ───────────────
   Found by the lone-class sweep added 9/13 after .cw-sheet (the RPE panel)
   turned out to have no rule at all. Same shape: an element whose only class
   has no CSS, so nothing positions or spaces it. These were all readable by
   luck rather than design. */
.cw-summary-muscles {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.cw-gym-settings-btn {
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  padding: 8px 4px; min-height: 44px;
}
.cw-gym-settings-btn:hover { color: var(--brand); }

/* Coach: exercises in the library with no video attached. */
.tr-novid { display: flex; flex-direction: column; gap: 14px; }
.tr-novid-cat { display: flex; flex-direction: column; gap: 4px; }
.tr-novid-cat-hd {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-dim);
}
.tr-novid-names { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* The exercise list inside a scheduled day. */
.tr-sched-exs {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--text-muted);
}

/* Shared empty and loading states. */
.cd-loading, .tr-empty {
  font-size: 13px; color: var(--text-dim);
  padding: 14px 2px; margin: 0; line-height: 1.5;
}

/* Same sweep, the index.html half. */
.cw-gap-banner-content { flex: 1; min-width: 0; }
.cw-gap-banner-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); flex-shrink: 0;
}
/* Tab panes — visibility is toggled with [hidden], so these only need to
   be a block-level container that does not fight the toggle. */
.tr-pane, .tr-client-tab-pane { display: block; }
.tr-pane[hidden], .tr-client-tab-pane[hidden] { display: none; }
.tr-filter-rows { display: flex; flex-direction: column; gap: 8px; }
.tr-health-body { display: flex; flex-direction: column; gap: 12px; }
.tr-lib-search { width: 100%; }

/* Coach drill-down: compliance heading and the avatar editor. */
.cd-compliance-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted);
}
.cd-edit-avatar-row { display: flex; align-items: center; gap: 12px; }
.cd-edit-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; background: var(--surface2);
  border: 1px solid var(--border); flex-shrink: 0;
}
.cd-edit-hint {
  font-size: 11.5px; color: var(--text-dim);
  margin: 4px 0 0; line-height: 1.45;
}

/* ── Snacks (Ben, 9/16) ────────────────────────────────────────────────
   Clients log meals and nothing else: median 3 items/day, 9% under 120 cal.
   A handful of grapes never becomes a logging event, so the chip has to be
   faster than the snack — one tap, no camera, no confirm. */
.snack-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px 12px;
  margin: 10px 0 14px;
}
.snack-bar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.snack-bar-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-muted);
}
.snack-bar-edit {
  border: 0; background: none; color: var(--brand);
  font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.snack-bar-edit:hover { background: var(--brand-light); }

/* Horizontal scroll rather than wrap: five chips must not push the week strip
   down the page on a narrow phone. */
.snack-chips {
  display: flex; gap: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.snack-chips::-webkit-scrollbar { display: none; }

/* Ben, 9/25: "the easy to add snack button... should have the ability to
   edit the card on portion." .snack-chip is now a wrapper (border/background
   moved here from the old single <button>) holding TWO real buttons — tap
   the card to log at its saved portion, tap the pencil to fix that portion.
   A button nested inside a button is invalid HTML, hence the wrapper; the
   Quick tab's own card uses the same body/pencil split. */
.snack-chip {
  position: relative;
  flex: none;
  width: 78px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg);
  transition: border-color .15s;
}
.snack-chip:hover { border-color: var(--brand); }
.snack-chip-log {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; padding: 8px 6px;
  border: none; border-radius: inherit;
  background: none;
  font-family: inherit; cursor: pointer;
  transition: transform .08s;
}
.snack-chip-log:active { transform: scale(0.96); }
.snack-chip-img,
.snack-chip-letter {
  width: 40px; height: 40px; border-radius: 10px;
  object-fit: cover; flex: none;
}
.snack-chip-letter {
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-light); color: var(--brand);
  font-size: 17px; font-weight: 800;
}
.snack-chip-name {
  font-size: 11px; font-weight: 700; color: var(--text);
  line-height: 1.2; text-align: center;
  /* Two lines then clamp: a chip is 78px wide and "Trader Joe's chili lime
     cashews" must not make it four rows tall. The full name is on the
     aria-label and in the log. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.snack-chip-cal { font-size: 10px; font-weight: 700; color: var(--text-dim); }
/* The camera hint: this snack has no photo yet. Quiet — it is an invitation,
   not a task. Top-right, opposite the edit pencil, so they never collide. */
.snack-chip-cam {
  position: absolute; top: 5px; right: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 14px; text-align: center;
  pointer-events: none;
}
/* Small visually, generous to tap — a 44px target crammed onto a 78px chip
   would crowd the name/calorie text, so the padding extends the hit area
   past what's drawn instead of drawing it that large. */
.snack-chip-edit {
  position: absolute; top: 0; left: 0;
  width: 22px; height: 22px; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); opacity: 0.6;
}
.snack-chip-edit svg { width: 11px; height: 11px; }
.snack-chip-edit:hover, .snack-chip-edit:active { opacity: 1; color: var(--brand); }

/* Setup sheet */
.snack-setup-overlay {
  position: fixed; inset: 0; z-index: 9400;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.snack-setup-card {
  background: var(--surface); border-radius: 16px;
  padding: 20px; width: 100%; max-width: 380px;
  max-height: 92dvh; overflow-y: auto;
  box-shadow: var(--shadow);
}
.snack-setup-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--text); }
.snack-setup-sub { margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.snack-setup-rows { display: flex; flex-direction: column; gap: 8px; }
.snack-setup-input {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 15px;
}
.snack-setup-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.snack-setup-note { margin: 12px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-dim); }
.snack-setup-actions { display: flex; gap: 10px; margin-top: 16px; }
.snack-setup-actions .btn-primary { flex: 1; }

/* ── "Last time" on the workout editor card (Ben, 9/16) ────────────────
   "how am i supposed to see what the client did and logged last time
   especially notes. this needs to be more apparent for me the coach."
   The data was already loaded — historyFor() reads the same sessions for
   Autofill and discarded everything but sets. 31 client notes exist in
   production and rendered in exactly one place, nowhere near the screen where
   the next session is written. */
.tr-last-time {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin: 2px 0 8px;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-mid);
  border-radius: 8px;
}
.tr-last-when {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-muted);
  flex: none;
}
.tr-last-sets {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* The note is the point. Full width on its own line so it is never the thing
   that gets truncated, and italic so it reads as the client's voice rather
   than another prescribed number. */
.tr-last-note {
  flex-basis: 100%;
  font-size: 12.5px; font-style: italic; line-height: 1.4;
  color: var(--brand);
  overflow-wrap: anywhere;
}

/* ── Meal slots in the coach food log (Ben, 9/16) ──────────────────────
   "im having trouble pin pointing when the clients actually ate the meal."
   The log showed name and calories grouped by date only — the timestamp was
   in the table and was never selected by the query. */
.cd-meal-slot {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 4px;
}
.cd-meal-slot::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.cd-meal-slot-name {
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--brand);
  flex: none;
}
/* The time is the FACT; the slot heading above it is only a bucket. Quiet
   enough not to compete with the calories it sits beside, present enough to
   settle "when did they actually eat this". */
.cd-food-time {
  font-size: 11.5px; font-weight: 700; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ── Reading a check-in or a nutrition day from the calendar (Ben, 9/16) ──
   "i would love to also be able to click on the other things as well like
   check in and nutrition and open it up to kind of see what is there as
   well." Read-only: a check-in is the client's own account of their day, and
   a coach editing it would be rewriting what they said. */
.tr-mc-info-body { padding: 4px 0 10px; }
.tr-mc-kv { display: flex; flex-direction: column; }
.tr-mc-kv-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.tr-mc-kv-row:last-child { border-bottom: none; }
.tr-mc-kv-k {
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-muted); flex: none;
}
.tr-mc-kv-v {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  text-align: right; overflow-wrap: anywhere;
}
/* A reported symptom is the one line that should stop a coach mid-scroll. */
.tr-mc-flag {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: rgba(217,119,6,.10); border: 1px solid rgba(217,119,6,.3);
  color: #b45309; font-size: 12.5px; font-weight: 700;
}
/* The client's own words, in their own voice. */
.tr-mc-note {
  margin-top: 10px; font-size: 13px; font-style: italic; line-height: 1.45;
  color: var(--brand); overflow-wrap: anywhere;
}
.tr-mc-empty { padding: 14px 2px; font-size: 13px; color: var(--text-muted); }

.tr-mc-tot {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 9px 11px; margin-bottom: 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
  font-size: 12.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.tr-mc-tot b { color: var(--text); font-size: 14px; }
.tr-mc-meals { display: flex; flex-direction: column; }
.tr-mc-meal {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.tr-mc-meal:last-child { border-bottom: none; }
.tr-mc-meal-name {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  overflow-wrap: anywhere;
}
.tr-mc-meal-meta {
  font-size: 11.5px; font-weight: 700; color: var(--text-dim);
  flex: none; font-variant-numeric: tabular-nums;
}
/* These rows are now openable, so they must look it — the workout rows
   already do. */
.tr-mc-checkin, .tr-mc-nutrition { cursor: pointer; }
.tr-mc-checkin:hover .tr-mc-label,
.tr-mc-nutrition:hover .tr-mc-label { color: var(--brand); }

/* ── The derived "Today so far" line (Ben, 9/16) ───────────────────────
   "this f message from franco i still dont understand" — on a card headed
   MESSAGE FROM FRANCO showing a line he never wrote. The same card serves two
   things: a note the coach actually pinned, and a number the app derived. It
   now says which one it is, and drops the coach avatar when it is the latter. */
.coach-note-card.is-day-line .coach-note-from {
  color: var(--text-muted);
  font-weight: 800;
}
.coach-note-card.is-day-line {
  /* Ben, 10/7: the gradient/shadow upgrade above (same pass that gave Rex
     a level-matched background) made a REAL pinned note stand out more —
     which only works if the derived "Today so far" line stands out LESS.
     border-left-color was already dead code (no border-left ever set on
     .coach-note-card to tint) — replaced with an actual visual downgrade:
     the plain --surface2 this card used before any of this existed. */
  background: var(--surface2);
  border-color: var(--border);
  box-shadow: none;
}

/* ── The prescribed reps, where the client can see them (Ben, 9/16) ────
   "sets is easy to understand but reps isnt unless theyve already logged."

   SETS had a stepper with a real number in it. REPS had a grey placeholder
   that vanishes on the first keystroke, plus the middle of a dense green
   prescription line. Same row, same weight, same size as the sets value —
   the only difference is that this one is read, not edited: the client
   changes reps per set below, not here. */
.cw-ctrl-target {
  min-width: 52px;
  padding: 7px 10px;
  text-align: center;
  border: 1.5px solid var(--brand-mid);
  border-radius: 9px;
  background: var(--brand-light);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  /* "15 steps each direction" and "12, 10, 8" are real prescriptions. They
     wrap rather than truncate — a clipped rep target is the bug this fixes. */
  overflow-wrap: anywhere;
  line-height: 1.25;
  display: flex; align-items: center; justify-content: center;
}

/* ── Rest timer takeover (Ben, 9/16) ──────────────────────────────────
   "the timer looks weird but can i blow it up" — shown three layouts, he
   picked the full-screen takeover: the biggest readout, unmissable from
   across a gym floor.

   It also holds a Wake Lock while visible, which is the only thing that makes
   the in-app chime reliable on iOS — a locked or backgrounded page is frozen
   and never plays a sound. */
.cw-restfull {
  /* FIXED, not absolute. Its parent (.cw-session-inner) is the scrolling
     container, so an absolutely-positioned takeover scrolls away with the
     exercise list — the client scrolls down and the timer is gone. Fixed pins
     it to the viewport, which is what "takeover" has to mean.
     Ben's screenshot also caught the first version rendering INSIDE the
     session header: transparent, across the back button and Finish Session.
     That was a nesting bug, fixed in index.html; this is the positioning half
     of the same lesson. */
  position: fixed;
  /* Below the session header on purpose: the client can still see the clock,
     pause and Finish Session while resting.
     The offset is a CSS variable rather than a literal because the header has
     no fixed height — it is padding around its content, so a hard-coded 56px
     would drift the moment that padding or font size changes. */
  inset: var(--cw-sess-hdr-h, 56px) 0 0 0;
  z-index: 40;
  background: var(--brand-light);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  gap: 2px;
}
.cw-restfull-lab {
  font-size: 12px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--brand);
}
.cw-restfull-num {
  /* Scales with the screen so it fills a phone without overflowing a narrow
     one. Tabular so the digits do not jitter as it counts down. */
  font-size: clamp(56px, 22vw, 96px);
  font-weight: 800; line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 10px;
}
.cw-restfull-track {
  width: min(78%, 320px); height: 8px; border-radius: 99px;
  background: var(--brand-mid); overflow: hidden; margin-bottom: 16px;
}
.cw-restfull-fill {
  height: 100%; background: var(--brand); width: 100%;
  transition: width .25s linear;
}
.cw-restfull-next {
  font-size: 13.5px; color: var(--text-muted); margin-bottom: 18px;
  max-width: 88%; overflow-wrap: anywhere;
}
.cw-restfull-next:empty { display: none; }
.cw-restfull-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cw-restfull-btn {
  padding: 12px 18px; border-radius: 10px;
  border: 1.5px solid var(--brand); background: transparent;
  color: var(--brand); font-family: inherit; font-size: 14px; font-weight: 800;
  cursor: pointer; min-width: 84px;
}
.cw-restfull-btn:active { background: var(--brand-mid); }
.cw-restfull-btn--go { background: var(--brand); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .cw-restfull-fill { transition: none; }
}

/* ── Food suggestions: say these are YOURS, and offer a way past them ──
   Ben, 9/16: "why does it show me pancakes ive never had?" — he had, in June
   and July, but nothing said when. Then: "it needs to be more clear that
   those are previous also what if the user just has a plain new pancake?" */
.fs-head {
  padding: 8px 12px 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted);
}
/* The way OUT. Separated by a rule so it reads as "none of the above" rather
   than as a fifth old meal, and quieter than the real suggestions because it
   is the fallback, not the recommendation. */
.food-suggest-item.fs-fresh {
  border-top: 1px solid var(--border);
  border-radius: 0 0 9px 9px;
  margin-top: 4px;
}
.food-suggest-item.fs-fresh .fs-name {
  font-weight: 700; color: var(--brand); font-size: 14px;
  overflow-wrap: anywhere;
}

/* ── "You can just type it" (Ben, 9/16) ────────────────────────────────
   The USDA lookup answers in ~1s with exact values and no photo, but it fired
   invisibly after submit — the only way to find it was to try. A client who
   grabs a handful of almonds has no reason to believe typing is faster than
   a photo unless something says so. */
.food-text-hint {
  padding: 6px 2px 0;
  font-size: 11.5px; line-height: 1.4; color: var(--text-muted);
  /* Ben, 9/24: "the food text bar in analyze doesn't let me input anything."
     This lives inside .text-entry-inline, a flex ROW with the input, mic and
     analyze button — with no explicit width it competed for the same
     horizontal space as the input instead of sitting below it. On a narrow
     phone screen the hint's own text (249px+) left the input's flex-basis:0%
     nothing to grow into, so it rendered at 0px wide — present, but
     untappable and untypeable. flex-basis:100% forces it onto its own line
     without needing flex-wrap on the whole row (which would also wrap the
     mic/analyze buttons unpredictably). */
  flex-basis: 100%;
}

/* ── Injury guard badge on the exercise card (Ben, 9/17) ───────────────
   "bruce is experiencing some pain in his plan" → "i need to be able to do it
   in this window as i build it out."

   The guard existed and worked — it reads the client's injuries and names
   safer alternatives — but only fired when a library card was TAPPED. It
   never ran on AI-generated exercises, which is how ten flagged movements
   reached Bruce's live program without Ben seeing one warning.

   Amber, not red: this is advisory. Ben chose flag-and-override on 8/7, and
   the guard is deliberately over-cautious, so some flags are noise. */
.tr-we-guard {
  flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #d97706;
  background: rgba(217,119,6,.12);
  color: #b45309;
  font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tr-we-guard:hover  { background: #d97706; color: #fff; }
.tr-we-guard:focus-visible { outline: 2px solid #d97706; outline-offset: 1px; }

/* Program scheduler (Ben, 10/8). Its own class names: the old shared
   .tr-sched-day was defined twice for two different calendars, and the
   second definition was squaring off this one's cells. Each workout keeps
   one colour and one letter everywhere in the dialog, so a cell with
   A + C reads at a glance. */
.tr-ps-c0 { --ps-col: #18bfc7; }
.tr-ps-c1 { --ps-col: #e39a2d; }
.tr-ps-c2 { --ps-col: #8b6cf0; }
.tr-ps-c3 { --ps-col: #e2568a; }
.tr-ps-c4 { --ps-col: #3d8ee6; }
.tr-ps-c5 { --ps-col: #3fae68; }

.tr-ps-body { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.tr-ps-label {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: -6px;
}
.tr-ps-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.tr-ps-pick {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center; text-align: left;
  padding: 9px 11px; border-radius: 12px; cursor: pointer; font: inherit;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--text);
}
.tr-ps-pick:hover { border-color: var(--ps-col); }
.tr-ps-pick.is-active { border-color: var(--ps-col); box-shadow: 0 0 0 1px var(--ps-col) inset; background: var(--surface); }
.tr-ps-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tr-ps-letter {
  grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ps-col); color: #fff; font-size: 13px; font-weight: 800;
}
.tr-ps-pick-name { font-size: 13px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.tr-ps-pick-count { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.tr-ps-hint { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.tr-ps-hint strong { color: var(--text); }
.tr-ps-month { display: flex; align-items: center; justify-content: space-between; }
.tr-ps-month-label { font-size: 15px; font-weight: 800; }
.tr-ps-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.tr-ps-dow { text-align: center; font-size: 11px; font-weight: 800; color: var(--text-dim); padding: 2px 0; }
.tr-ps-day {
  min-height: 54px; padding: 5px 4px; border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid var(--border); background: var(--bg);
  transition: border-color .12s, background .12s;
}
.tr-ps-day:hover { border-color: var(--text-dim); }
.tr-ps-day.is-today { border-color: var(--brand); border-width: 2px; padding: 4px 3px; }
.tr-ps-day.is-mine { border-color: var(--ps-col); background: color-mix(in srgb, var(--ps-col) 14%, var(--bg)); }
.tr-ps-day.busy { opacity: .5; pointer-events: none; }
.tr-ps-num { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tr-ps-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.tr-ps-tag {
  min-width: 17px; height: 17px; padding: 0 3px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ps-col); color: #fff; font-size: 10px; font-weight: 800;
}
.tr-ps-tag svg { width: 11px; height: 11px; }
.tr-ps-tag.is-done { opacity: .75; }

/* Ben, 10/8: "there's no reason to see the other things in the back
   behind it ... like the other screens." An opaque page, not a dim — the
   scheduler is its own screen, the way the workout editor is. */
.tr-ps-backdrop {
  position: fixed; inset: 0; z-index: 1749; background: var(--bg);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.tr-ps-backdrop.open { opacity: 1; pointer-events: auto; }

/* Wide screens: a centred dialog, not a strip stuck to the bottom. */
@media (min-width: 900px) {
  .mds-sheet.tr-ps-sheet {
    top: 50%; bottom: auto; left: 50%; right: auto; margin: 0;
    width: min(720px, 92vw); max-width: none; max-height: 88dvh;
    border-radius: 18px; border: 1px solid var(--border); padding-bottom: 8px;
    transform: translate(-50%, -47%); opacity: 0; visibility: hidden;
    transition: transform .2s ease, opacity .2s ease, visibility .2s;
  }
  .mds-sheet.tr-ps-sheet.open { transform: translate(-50%, -50%); opacity: 1; visibility: visible; }
  .tr-ps-sheet .mds-handle { display: none; }
  .tr-ps-day { min-height: 62px; }
}
/* Phones: the whole screen, not a sheet with the page peeking above it. */
@media (max-width: 899px) {
  .mds-sheet.tr-ps-sheet {
    top: 0; max-width: none; max-height: none; height: 100dvh;
    border-radius: 0; border-top: 0; box-shadow: none;
    padding-top: env(safe-area-inset-top);
  }
  .tr-ps-sheet .mds-handle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mds-sheet.tr-ps-sheet, .tr-ps-backdrop { transition: none; }
}

/* Logged sessions — who led each one (Ben, 10/8). Coached reads as the
   brand colour because it is Ben's own work; on-their-own stays neutral,
   not a warning — training alone is the goal, not a lapse. */
.tr-sess-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 16px 0 6px;
}
.tr-sess-title {
  font-size: 12px; font-weight: 800; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .5px;
}
.tr-sess-summary { font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tr-coached-pill {
  font: inherit; font-size: 11px; font-weight: 800; white-space: nowrap;
  padding: 3px 9px; border-radius: 100px; cursor: pointer; min-width: 92px;
  border: 1.5px solid var(--border); background: transparent; color: var(--text-muted);
}
.tr-coached-pill.is-coached { background: var(--brand); border-color: var(--brand); color: #fff; }
.tr-coached-pill:hover { border-color: var(--brand); }
.tr-coached-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tr-coached-pill:disabled { opacity: .5; cursor: default; }
.tr-sess-freestyle { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.tr-sess-notes {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--brand);
}
.tr-sess-notes svg { width: 12px; height: 12px; }
.tr-we-coached {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: inherit; cursor: pointer;
}
.tr-we-coached input { width: 16px; height: 16px; accent-color: var(--brand); margin: 0; }

/* Clients see the program Coach Franco built, not tools for training outside
   it (Ben, 10/8). Tagged in index.html / client-workout.js; the class is set
   in app.js boot for every non-coach account. */
.client-viewer [data-coach-only] { display: none !important; }

/* Client Workout tab spacing (Ben, 10/8: "there's also some other
   overlapping"). Measured on the live page: the Today card ended at the
   exact pixel the week card began (no gap), and it was inset 20px while
   every other card ran edge to edge. One gutter, one gap, for all of them. */
#tab-workout > #cwAssignedCard { padding: 0 16px; margin: 0 0 12px; }
#tab-workout > #cwAssignedCard[hidden] { display: none; }
#tab-workout > .cw-sec-card,
#tab-workout > .cw-ask-card { width: auto; margin: 0 16px 12px; }
.cw-assigned-swap {
  font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
  padding: 11px; border-radius: 10px;
  border: 1.5px solid var(--brand); background: transparent; color: var(--brand-dark);
}
.cw-assigned-swap:active { background: var(--brand-light); }
/* The floating chat bubble sat right on top of Ask the coach. While that
   card is on screen it fades out — the card already reaches the coach. */
.client-floating-chat-btn.is-yielding { opacity: 0; pointer-events: none; transition: opacity .2s; }

/* Coach-controlled features (Ben, 10/8: "me the coach decides what everyone
   will have access too and i have master control toggles"). app.js sets
   .feat-off-<key> on <html> from the client's effective switches; anything
   tagged data-feature="<key>" disappears. Hidden, never deleted. */
.feat-off-food     [data-feature~="food"],
.feat-off-workouts [data-feature~="workouts"],
.feat-off-checkin  [data-feature~="checkin"],
.feat-off-supps    [data-feature~="supps"] { display: none !important; }

/* Spotlight: one area the coach wants a client to notice (Ben, 10/8). A soft
   brand-colour glow that breathes; with reduced motion it holds still. */
@keyframes spotlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 0%, transparent), 0 0 22px 4px color-mix(in srgb, var(--brand) 45%, transparent); }
}
.spotlight-glow {
  position: relative; border-radius: 14px;
  animation: spotlightPulse 1.8s ease-in-out infinite;
  outline: 2px solid color-mix(in srgb, var(--brand) 70%, transparent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .spotlight-glow { animation: none; box-shadow: 0 0 16px 3px color-mix(in srgb, var(--brand) 45%, transparent); }
}

/* What clients see — the coach's access sheet (Ben, 10/8). */
.tr-access-body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.tr-access-intro { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin: 0; }
.tr-access-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.tr-access-mode-btn {
  font: inherit; font-size: 13px; font-weight: 700; padding: 9px 8px; border-radius: 9px; cursor: pointer;
  border: 0; background: transparent; color: var(--text-muted);
}
.tr-access-mode-btn.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.tr-access-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tr-access-list.is-locked { opacity: .6; }
.tr-access-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; background: var(--surface); cursor: pointer;
}
.tr-access-row + .tr-access-row { border-top: 1px solid var(--border); }
.tr-access-list.is-locked .tr-access-row { cursor: default; }
.tr-access-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-access-label { font-size: 14px; font-weight: 700; color: var(--text); }
.tr-access-sub { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.tr-access-spot { display: flex; flex-direction: column; gap: 6px; }
.tr-access-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }