/* ================================================================
   One Fitness Hub Design System
   Inspired by Robinhood × X — Built for strength
   ================================================================ */

/* Ensure [hidden] always wins over display rules like .overlay { display: grid } */
[hidden] { display: none !important; }

/* === CSS Variables === */
/* BEGIN GENERATED by tools/shared-contract/generate.mjs from shared/. Do not edit by hand. */
:root {
  --bg: #090909;
  --surface: #131313;
  --surface-2: #1B1B1B;
  --surface-3: #232323;
  --surface-hover: #2A2A2A;
  --border: #272727;
  --border-subtle: #1D1D1D;

  --brand: #E40311;
  --brand-hover: #C9000D;
  --brand-dim: rgba(228,3,17,0.1);
  --brand-glow: rgba(228,3,17,0.2);
  --brand-rgb: 228,3,17;
  --brand-strong: #A30000;
  --brand-default: #E40311;
  --brand-default-hover: #C9000D;
  --brand-default-strong: #A30000;

  --gold: #F59E0B;
  --gold-dim: rgba(245,158,11,0.12);
  --silver: #94A3B8;
  --bronze: #CD853F;

  --green: #10B981;
  --green-dim: rgba(16,185,129,0.1);
  --red: #F87171;
  --red-dim: rgba(248,113,113,0.1);

  --text-1: #F2F2F2;
  --text-2: #8A8A8A;
  --text-3: #6F6F6F;

  --info: #60A5FA;
  --macro-protein: #3987e5;
  --macro-carbs: #d95926;
  --macro-fat: #199e70;
  --chart-trend: #9085e9;
  --water: #22b3cc;
  --fasting: #c084fc;
  --dose: #F472B6;
  --dose-dim: rgba(244,114,182,0.14);
  --body-waist: #199e70;
  --body-fat: #d95926;
  --scan-reading: #F87171;
  --scan-reading-dim: rgba(248,113,113,0.14);
  --scan-locked: #10B981;
  --scan-locked-dim: rgba(16,185,129,0.16);
  --yearly-cardio: #FF9C9E;
  --yearly-strength: #E40311;
  --yearly-both: #A5122E;
  --muscle-primary: #E40311;
  --muscle-secondary: #FF8A8D;
  --muscle-inactive: #3A3A3A;
  --pr-actual: #8B5CF6;
  --on-gold: #111111;
  --account-action-bg: #C80000;
  --account-action-text: #FFFFFF;
  --yearly-nutrition-under: #6EE7B7;
  --yearly-nutrition-maintenance: #FDE68A;
  --yearly-nutrition-over: #FB923C;
  --yearly-nutrition-ink: #111111;
  --chart-lift-1: #4A8DE0;
  --chart-lift-2: #B8820F;
  --chart-lift-3: #9677EE;
  --club-logo-preview-dark: #1B1B1B;
  --club-logo-preview-light: #F0F0F0;
  --icon-ink: #FFFFFF;
  --icon-ink-light: #090909;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-full: 9999px;
  --ease: 150ms ease;
  --ease-out: 200ms cubic-bezier(0.2,0,0.1,1);
  --sidebar-w: 240px;
  --mobile-nav-h: 64px;
  --page-max-w: none;
}

html[data-theme="light"] {
  --bg: #F4F4F4;
  --surface: #FFFFFF;
  --surface-2: #F0F0F0;
  --surface-3: #E8E8E8;
  --surface-hover: #EAEAEA;
  --border: #E0E0E0;
  --border-subtle: #EBEBEB;

  --brand: #E40311;
  --brand-hover: #C9000D;
  --brand-dim: rgba(228,3,17,0.08);
  --brand-glow: rgba(228,3,17,0.15);
  --brand-rgb: 228,3,17;
  --brand-strong: #A30000;
  --brand-default: #E40311;
  --brand-default-hover: #C9000D;
  --brand-default-strong: #A30000;

  --gold: #D97706;

  --green: #059669;
  --red: #DC2626;

  --text-1: #111111;
  --text-2: #666666;
  --text-3: #757575;

  --macro-protein: #2a78d6;
  --macro-carbs: #eb6834;
  --macro-fat: #1baf7a;
  --chart-trend: #4a3aa7;
  --water: #0a7f95;
  --fasting: #7e22ce;
  --dose: #BE185D;
  --dose-dim: rgba(190,24,93,0.10);
  --body-waist: #1baf7a;
  --body-fat: #eb6834;
  --scan-reading: #DC2626;
  --scan-reading-dim: rgba(220,38,38,0.12);
  --scan-locked: #059669;
  --scan-locked-dim: rgba(5,150,105,0.14);
  --yearly-cardio: #F28086;
  --yearly-strength: #E40311;
  --yearly-both: #7A0C1E;
  --muscle-primary: #E40311;
  --muscle-secondary: #FF9C9E;
  --muscle-inactive: #D9D9D9;
  --pr-actual: #7C3AED;
  --account-action-bg: #C80000;
  --account-action-text: #FFFFFF;
  --chart-lift-1: #1F5FBF;
  --chart-lift-2: #9A6200;
  --chart-lift-3: #6A3FC8;
  --club-logo-preview-dark: #1B1B1B;
  --club-logo-preview-light: #F0F0F0;
  --icon-ink: #FFFFFF;
  --icon-ink-light: #090909;
}

html[data-theme="blue"] {
  --bg: #06080D;
  --surface: #0E121A;
  --surface-2: #141B25;
  --surface-3: #1B2430;
  --surface-hover: #222E3D;
  --border: #273449;
  --border-subtle: #1A2535;

  --brand: #5DA9FF;
  --brand-hover: #7CB9FF;
  --brand-dim: rgba(93,169,255,0.14);
  --brand-glow: rgba(93,169,255,0.3);
  --brand-rgb: 93,169,255;
  --brand-strong: #3E7FCE;
  --brand-default: #5DA9FF;
  --brand-default-hover: #7CB9FF;
  --brand-default-strong: #3E7FCE;

  --account-action-bg: #236DB7;
  --account-action-text: #FFFFFF;
  --club-logo-preview-dark: #1B1B1B;
  --club-logo-preview-light: #F0F0F0;
  --icon-ink: #FFFFFF;
  --icon-ink-light: #090909;
}

html[data-theme="black-red"] {
  --bg: #0A0707;
  --surface: #140E0F;
  --surface-2: #1C1416;
  --surface-3: #251A1D;
  --surface-hover: #2F2024;
  --border: #3A252B;
  --border-subtle: #26181C;

  --brand: #E40311;
  --brand-hover: #C9000D;
  --brand-dim: rgba(228,3,17,0.14);
  --brand-glow: rgba(228,3,17,0.28);
  --brand-rgb: 228,3,17;
  --brand-strong: #A30000;
  --brand-default: #E40311;
  --brand-default-hover: #C9000D;
  --brand-default-strong: #A30000;

  --account-action-bg: #C80000;
  --account-action-text: #FFFFFF;
  --club-logo-preview-dark: #1B1B1B;
  --club-logo-preview-light: #F0F0F0;
  --icon-ink: #FFFFFF;
  --icon-ink-light: #090909;
}
/* END generated design tokens */

/* Page gutter (native-app-ui-guardrails.md §7, app-shell-navigation.md §3c): content on a phone never sits
   closer to the screen edge than 16px, and never inside a rounded corner or
   cutout. --safe-left/right come from env() in a browser; the native app
   overrides them on <html> because Android WebViews often report 0. */
:root {
  --page-gutter: 16px;
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --pad-l: max(var(--page-gutter), var(--safe-left));
  --pad-r: max(var(--page-gutter), var(--safe-right));
}

/* === Reset === */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.5;
  font-size: 15px;
  padding-left: 2px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button,input,select,textarea { font:inherit; }
a { color:var(--brand); text-decoration:none; }

/* === Layout Shell === */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  flex: 1 0 auto;
  max-width: var(--page-max-w);
  width: 100%;
  margin-inline: auto;
  border-right: 1px solid var(--border-subtle);
}

.shell.shell-guest {
  grid-template-columns: 1fr;
  border-right: 0;
  max-width: 1280px;
}

/* === Sidebar === */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 12px 24px;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface);
  overflow-y: auto;
  overflow-x: hidden;
}

/* === Brand === */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 6px 18px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 10px;
}

.brand-logo {
  display: block;
  width: min(100%, 140px); /* Compact 1FH mark; preserve its supplied aspect ratio. */
  height: auto;
}

/*
 * Dark/light brand-asset swap. Markup provides two <img> tags per logo
 * placement — one with class "-dark" (shown by default, since the app's
 * default and "blue"/"black-red" themes all have dark backgrounds) and one
 * with class "-light" (shown only when the light theme is active). Apply
 * this pair of classes to any element using an asset from assets/brand/.
 */
[class$="-logo-light"], [class*="-logo-light "] { display: none; }
html[data-theme="light"] [class$="-logo-dark"],
html[data-theme="light"] [class*="-logo-dark "] { display: none; }
html[data-theme="light"] [class$="-logo-light"],
html[data-theme="light"] [class*="-logo-light "] { display: block; }

/* === Nav Buttons === */
.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background var(--ease), color var(--ease);
  white-space: nowrap;
}
.nav-btn svg { flex-shrink:0; opacity:0.65; transition:opacity var(--ease); }
.nav-btn:hover { background:var(--surface-2); color:var(--text-1); }
.nav-btn:hover svg { opacity:1; }
.nav-btn.active { background:var(--brand-dim); color:var(--brand); font-weight:600; }
.nav-btn.active svg { opacity:1; }
.activity-unread-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--brand);
  border: 1px solid rgba(255,255,255,0.2);
}

/* === Profile Incomplete Badge (nav dot) === */
.profile-incomplete-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  border: 2px solid var(--surface-1);
  flex-shrink: 0;
  margin-left: auto;
}
/* Unread likes/comments waiting in the feed's notification list. */
.nav-notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF4444;
  border: 2px solid var(--surface-1);
  flex-shrink: 0;
  margin-left: auto;
}
.nav-notification-dot + .activity-unread-badge {
  margin-left: 6px;
}
/* The mobile tray stacks icon over label, so anchor the dot to the icon's
   corner instead of letting it wrap onto a line of its own. */
.mobile-nav .nav-btn {
  position: relative;
}
.mobile-nav .nav-notification-dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  margin-left: 0;
}
.mobile-nav .profile-incomplete-badge {
  margin-left: 0;
  margin-top: -2px;
}
.profile-incomplete-tab-dot[hidden],
.profile-incomplete-notice[hidden] { display: none; }
.profile-incomplete-tab-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* === Profile Incomplete Notice Banner === */
.profile-incomplete-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--r-sm);
  color: var(--text-1);
}
.profile-incomplete-notice svg { color: #f59e0b; }
.profile-incomplete-notice-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.profile-incomplete-notice-body strong { font-size: 14px; }
.profile-incomplete-notice-cta { font-size: 13px; white-space: nowrap; }

/* === Coach invite: its own marker (product owner, 2026-10-14) ===
   An envelope badge in --info, never the amber profile dot: on the avatar's
   lower corner (the amber dot keeps the upper one, so both can show), beside
   My Profile in the sidebar, on My Gym in the drawer and the desktop tab, and
   leading the "Coach invite waiting" notice. coach-mode.md §7. */
.coach-invite-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--info);
  color: var(--surface);
  border: 2px solid var(--surface);
  box-sizing: content-box;
  flex-shrink: 0;
  margin-left: auto;
}
.coach-invite-marker[hidden] { display: none; }
/* The tripled class outranks `.sidebar .nav-btn svg` and the drawer's svg rule,
   which would otherwise grow the envelope and dim or recolour it. */
.coach-invite-marker.coach-invite-marker.coach-invite-marker svg { width: 10px; height: 10px; opacity: 1; flex-shrink: 0; stroke: var(--surface); }
.profile-incomplete-badge + .coach-invite-marker { margin-left: 6px; }
.mobile-header-btn .coach-invite-marker {
  position: absolute;
  bottom: 1px;
  right: 1px;
  margin: 0;
}
.mobile-nav .coach-invite-marker { margin-left: 0; margin-top: -2px; }
.coach-invite-marker--tab { margin-left: 6px; vertical-align: middle; width: 14px; height: 14px; border-width: 0; }
.coach-invite-marker.coach-invite-marker.coach-invite-marker--tab svg { width: 9px; height: 9px; }
.coach-invite-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--info) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 40%, transparent);
  border-radius: var(--r-sm);
  color: var(--text-1);
}
.coach-invite-marker--notice { width: 26px; height: 26px; margin-left: 0; border-width: 0; }
.coach-invite-marker.coach-invite-marker.coach-invite-marker--notice svg { width: 15px; height: 15px; }

/* === Spacer === */
.spacer { flex:1; min-height:12px; }

/* === User Profile Button in Sidebar === */
#userProfileWrap {
  position: relative;
}

.user-profile-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
  text-align: left;
  min-width: 0;
}
.user-profile-btn:hover {
  background: var(--surface-3);
  border-color: var(--border);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-dim);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(var(--brand-rgb),0.25);
  overflow: hidden;
  letter-spacing: 0.3px;
}
.user-avatar.has-image { border-color: var(--border); background: transparent; }
.user-avatar img, .user-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Sidebar profile box: the amber dot (upper right) and coach-invite envelope
   (lower right) sit on the avatar, as on the phone's header avatar. */
.user-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.user-avatar-wrap .profile-incomplete-badge,
.user-avatar-wrap .coach-invite-marker { position: absolute; margin: 0; }
.user-avatar-wrap .profile-incomplete-badge { top: -2px; right: -2px; border-color: var(--surface-2); }
.user-avatar-wrap .coach-invite-marker { bottom: -3px; right: -3px; border-color: var(--surface-2); }

#userProfileName {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.user-profile-chevron {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform var(--ease);
}
#userProfileWrap:has(#userPanel:not([hidden])) .user-profile-chevron {
  transform: rotate(180deg);
}

/* === User Panel (Dropdown) === */
.user-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
  z-index: 200;
  overflow: hidden;
}

.user-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
}

.user-panel-avatar-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 2px;
}

.user-panel-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  display: block;
}

.user-panel-avatar-initials {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-dim);
  color: var(--brand);
  border: 2px solid rgba(var(--brand-rgb),0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.user-panel-avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--surface-2);
  transition: filter var(--ease);
}
.user-panel-avatar-edit:hover { filter: brightness(1.15); }

.user-panel-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.2px;
}
.user-panel-role {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-dim);
  padding: 2px 8px;
  border-radius: var(--r-full);
  text-transform: capitalize;
  letter-spacing: 0.2px;
}

.user-panel-section {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.user-panel-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.user-panel-prefs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
.user-panel-prefs-grid label {
  margin-bottom: 8px;
  font-size: 11px;
}
.user-panel-prefs-grid select {
  font-size: 13px;
  padding: 7px 30px 7px 10px;
}

.initialized-height-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
.initialized-height-row label {
  margin-bottom: 8px;
  font-size: 11px;
}

.user-panel-footer {
  padding: 10px 14px 14px;
}
/* Help (the public /help.html) sits above Send feedback, styled like it. */
.user-panel-help {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  text-decoration: none;
}
/* The legal links that used to be a footer on every page: small, quiet, at the
   foot of the account panel (app-shell-navigation.md §5b). */
.user-panel-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-top: 10px;
  font-size: 11px;
}
.user-panel-legal a { color: var(--text-2); text-decoration: none; }
.user-panel-legal a:hover, .user-panel-legal a:focus-visible { color: var(--text-1); text-decoration: underline; }

/* === Main Content Area === */
.main {
  padding: 24px 28px 100px;
  min-width: 0;
}

/* === Page Header === */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
/* Keep the feed's account-level controls reachable while its timeline moves
   underneath them. Other views retain the normal document-flow header. */
body:has(#feedView.active) .top {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg);
}
.top h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-1);
}

/* === Pages === */
.page { display:none; }
.page.active { display:block; }

.app-legal-footer {
  text-align: center;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg);
  text-wrap: balance;
}
.app-legal-footer a { color: var(--brand); font-weight: 600; }

/* === Cards === */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
}
.card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 14px;
  letter-spacing: -0.1px;
}
.card.soft {
  background: var(--surface-2);
  border-color: var(--border-subtle);
}

/* === Metric Cards === */
.metrics {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--ease);
}
.metric:hover { border-color: var(--brand-dim); }
.metric span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-3);
}
.metric strong {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-top: 8px;
  color: var(--text-1);
  line-height: 1;
}
.metric .metric-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 6px;
}
.metric .change { font-size:12px; font-weight:600; margin-top:5px; }
.metric .change.up { color:var(--green); }
.metric .change.down { color:var(--red); }
/* Exercise History KPIs (My Profile → Overview → Strength) */
.exercise-kpis { margin-bottom:16px; }
.exercise-kpis .hint { margin-bottom:12px; }
.exercise-kpis .metrics { margin-bottom:0; }
.exercise-kpis .metric strong { font-size:26px; }
.exercise-kpis .metric span { overflow-wrap:anywhere; }
@media (max-width: 920px) {
  .exercise-kpis .metric { padding:14px; }
  .exercise-kpis .metric strong { font-size:21px; letter-spacing:-0.5px; }
}
/* Yearly View (My Profile → Overview; profile-yearly-view.md). One square a
   day in Monday-first week columns; the grid shrinks to fit, never scrolls. */
.yearly-view { margin-bottom:16px; --yearly-fill: var(--brand); }
.yearly-view[data-yearly-kind-shown="checkins"] { --yearly-fill: var(--chart-trend); }
.yearly-view[data-yearly-kind-shown="nutrition"] { --yearly-fill: var(--gold); }
.yearly-kinds .tab { line-height: 1.2; }
.yearly-view .hint { margin-bottom:12px; }
.yearly-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.yearly-toolbar .tabs { margin-bottom:0; }
.yearly-toolbar .tab { min-height:44px; }
.yearly-kinds { flex:1 1 260px; }
.yearly-years { display:flex; gap:4px; padding:4px; background:var(--surface-2); border-radius:var(--r-md); overflow-x:auto; }
.yearly-years .tab { flex:0 0 auto; }
.yearly-ranges { flex:0 0 auto; margin-bottom:0; }
.yearly-ranges .tab { min-width:48px; }
.yearly-stats { grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:14px; }
.yearly-stats .metric span { overflow-wrap:anywhere; }
.yearly-stats .metric-sub { overflow-wrap:anywhere; }
.yearly-headline { font-weight:600; margin:0 0 8px; }
.yearly-calendar { --yearly-gap:3px; position:relative; }
.yearly-grid .yearly-cell { cursor:pointer; }
.yearly-cell.is-active { outline:2px solid var(--text-1); outline-offset:1px; }
/* A day's tooltip: text only (textContent), above the square it names. */
.yearly-tip { position:absolute; z-index:2; padding:6px 10px; border-radius:var(--r-sm); background:var(--surface-3); border:1px solid var(--border); color:var(--text-1); font-size:12px; font-weight:600; white-space:nowrap; pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,0.35); }
.yearly-status { margin:12px 0; }
.yearly-month-labels,
.yearly-grid { display:grid; grid-template-columns:repeat(var(--yearly-weeks),minmax(0,1fr)); column-gap:var(--yearly-gap); }
.yearly-month-labels { font-size:11px; color:var(--text-2); margin-bottom:4px; white-space:nowrap; }
.yearly-grid { grid-template-rows:repeat(7,auto); grid-auto-flow:column; row-gap:var(--yearly-gap); }
.yearly-cell { display:block; aspect-ratio:1; border-radius:2px; background:var(--surface-3); }
.yearly-cell.is-logged { background:var(--yearly-fill); }
.yearly-cell.is-logged.is-cardio { background:var(--yearly-cardio); }
.yearly-cell.is-logged.is-strength { background:var(--yearly-strength); }
.yearly-cell.is-logged.is-both { background:var(--yearly-both); }
.yearly-cell.is-logged.is-nutrition-under, .yearly-nutrition-status.is-nutrition-under { background:var(--yearly-nutrition-under); }
.yearly-cell.is-logged.is-nutrition-maintenance, .yearly-nutrition-status.is-nutrition-maintenance { background:var(--yearly-nutrition-maintenance); }
.yearly-cell.is-logged.is-nutrition-over, .yearly-nutrition-status.is-nutrition-over { background:var(--yearly-nutrition-over); }
.yearly-cell.is-logged.is-nutrition-unknown { background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--text-2); }
.yearly-cell[role="button"]:focus-visible { outline:2px solid var(--text-1); outline-offset:1px; }
.yearly-view[data-yearly-kind-shown="nutrition"] .yearly-cell.is-logged b { color:var(--yearly-nutrition-ink); }
.yearly-view[data-yearly-kind-shown="nutrition"] .yearly-cell.is-nutrition-unknown b { color:var(--text-1); }
.yearly-nutrition-change { margin:0 0 16px; }
.yearly-nutrition-change h4 { margin:0 0 8px; }
.yearly-nutrition-periods { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; margin-bottom:10px; }
.yearly-nutrition-period { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:12px; background:var(--surface-2); border-radius:var(--r-md); min-width:0; }
.yearly-nutrition-period > span { font-size:12px; color:var(--text-2); overflow-wrap:anywhere; }
.yearly-nutrition-period b { font-size:24px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.yearly-nutrition-period small { font-size:12px; font-weight:400; }
.yearly-nutrition-period .yearly-nutrition-status { padding:4px 8px; border-radius:var(--r-sm); color:var(--yearly-nutrition-ink); font-weight:600; }
.yearly-month-change { max-width:100%; font-size:10px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.yearly-cell.is-future { opacity:.35; }
/* Phone: the last three months by default, a 44px button for the whole year. */
.yearly-cell.is-pad { visibility:hidden; }
/* Closer ranges say more (2026-09-30): 3M adds weekday labels; 1M a day number
   and exercise count in each square; 7D is a list, not a grid. */
.yearly-calendar[data-range="3m"],
.yearly-calendar[data-range="1m"] { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:8px; }
.yearly-calendar[data-range="3m"] .yearly-month-labels,
.yearly-calendar[data-range="1m"] .yearly-month-labels { grid-column:2; }
.yearly-calendar[data-range="3m"] .yearly-grid,
.yearly-calendar[data-range="1m"] .yearly-grid { grid-column:2; }
.yearly-calendar[data-range="3m"] .yearly-weekdays,
.yearly-calendar[data-range="1m"] .yearly-weekdays { grid-column:1; grid-row:2; display:grid; grid-template-rows:repeat(7,minmax(0,1fr)); row-gap:var(--yearly-gap); font-size:11px; color:var(--text-2); align-items:center; }
.yearly-calendar[data-range="1m"] { --yearly-gap:6px; max-width:440px; }
.yearly-calendar[data-range="3m"] { --yearly-gap:4px; max-width:760px; }
.yearly-calendar[data-range="1m"] .yearly-cell { position:relative; border-radius:var(--r-sm); }
.yearly-cell b { position:absolute; top:4px; left:6px; font-size:12px; font-weight:600; color:var(--text-2); line-height:1; }
.yearly-cell em { position:absolute; right:6px; bottom:4px; font-size:12px; font-style:normal; font-weight:700; line-height:1; }
.yearly-cell.is-logged b, .yearly-cell.is-logged em { color:#fff; }
.yearly-cell.is-logged.is-cardio b, .yearly-cell.is-logged.is-cardio em { color:var(--bg); }
.yearly-week { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.yearly-day-row { display:grid; grid-template-columns:64px 14px minmax(0,1fr); gap:12px; align-items:start; min-height:44px; padding:10px 12px; background:var(--surface-2); border-radius:var(--r-sm); }
.yearly-day-row .yearly-cell { width:14px; height:14px; margin-top:3px; }
.yearly-day-name { display:flex; flex-direction:column; font-size:12px; color:var(--text-2); }
.yearly-day-name strong { font-size:14px; color:var(--text-1); }
.yearly-day-body { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:13px; color:var(--text-2); overflow-wrap:anywhere; }
.yearly-day-body strong { font-size:14px; color:var(--text-1); }
.yearly-day-row:not(.is-logged) .yearly-day-body strong { font-weight:500; color:var(--text-2); }
.yearly-day-meta { font-weight:600; color:var(--text-1); }
.yearly-legend { display:flex; gap:6px 16px; flex-wrap:wrap; font-size:12px; color:var(--text-2); margin-top:10px; }
.yearly-legend span { display:inline-flex; align-items:center; gap:6px; }
.yearly-legend .yearly-cell { width:10px; height:10px; }
.yearly-months { list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; }
.yearly-months li { display:flex; }
/* A month tile is a button: a tap shows that month and the two around it. */
.yearly-month { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:44px; padding:6px 0; background:var(--surface-2); border:1px solid transparent; border-radius:var(--r-sm); font:inherit; font-size:11px; color:var(--text-2); cursor:pointer; }
.yearly-month:hover { background:var(--surface-3); }
.yearly-month.is-shown { border-color:var(--border); }
.yearly-month[aria-pressed="true"] { border-color:var(--text-1); }
.yearly-month strong { font-size:14px; color:var(--text-1); }
@media (max-width: 920px) {
  .yearly-calendar { --yearly-gap:1px; }
  .yearly-month-labels { font-size:9px; }
  .yearly-stats .metric { padding:12px; }
  .yearly-stats .metric strong { font-size:18px; letter-spacing:-0.5px; }
  .metrics.yearly-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .yearly-stats .metric:last-child { grid-column:1 / -1; }
  .yearly-months { grid-template-columns:repeat(6,minmax(0,1fr)); }
}

/* === Workspace Grid === */
.workspace-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}
.workspace-grid .wide { grid-column:1/-1; }
.workspace-grid.body-trends { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* === Analytics Section Header === */
.analytics-section-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 28px 0 14px;
}

/* === Body Metrics Row === */
.metrics.body-metrics-row { margin-bottom: 16px; }

/* === Charts === */
.chart { height:260px; }

/* === Favorite Lifts === */
.fav-lift-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  min-height: 32px;
  align-items: center;
}
.fav-lift-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-1);
}
.fav-lift-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.fav-lift-chip-remove:hover { color: var(--text-1); background: var(--surface-3); }
.fav-lift-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* === Buttons === */
.btn,
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
  white-space: nowrap;
  letter-spacing: -0.1px;
}
.btn:hover,
.primary:hover { filter:brightness(1.1); }
.btn:active,
.primary:active { transform:scale(0.98); }

.btn--secondary,
.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  white-space: nowrap;
}
.btn--secondary:hover,
.ghost:hover { background:var(--surface-2); color:var(--text-1); }

.btn--cta,
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--r-sm);
  border: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--brand-glow);
  transition: filter var(--ease), transform var(--ease), box-shadow var(--ease);
  letter-spacing: -0.1px;
}
.btn--cta:hover,
.cta:hover { filter:brightness(1.08); box-shadow:0 6px 22px var(--brand-glow); }
.btn--cta:active,
.cta:active { transform:scale(0.98); }

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-loading,
.primary:disabled,
.ghost:disabled,
.cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
  transform: none;
  box-shadow: none;
}

.btn--primary,
.primary {
  background: var(--brand);
  color: #fff;
  border: none;
}

.btn--danger {
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.35);
}
.btn--danger:hover {
  background: rgba(248, 113, 113, 0.24);
}

.btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
}

.auth-hint-bottom { margin-bottom: 10px; }
.auth-submit-spaced { margin-top: 20px; }
.auth-hint-centered { margin-top: 14px; text-align: center; }

.danger { color:var(--red) !important; border-color:rgba(248,113,113,0.25) !important; }
.danger:hover { background:var(--red-dim) !important; border-color:rgba(248,113,113,0.4) !important; }

/* === Forms === */
label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.2px;
  margin-bottom: 14px;
}
input,select,textarea {
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 15px;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
input:focus,select:focus,textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px var(--brand-dim);
}
input::placeholder,textarea::placeholder { color:var(--text-3); }
/* Checkboxes and radios draw themselves, everywhere (cross-platform-parity.md
   Rules → Forms). The rule above sets appearance: none, and handing a box back
   to the engine (appearance: auto) is not reliable: the Android app's WebView
   left the fasting goal-alert box an empty square whose tick never showed, so
   a tap only moved the focus ring. A box picks its "on" colour with --check-on
   (default --brand); its size comes from the area's own rule. */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--text-3);
  border-radius: 5px;
  background-color: var(--surface-2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% 80%;
  vertical-align: middle;
  cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked {
  border-color: var(--check-on, var(--brand));
  background-color: var(--check-on, var(--brand));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}
input[type="radio"]:checked {
  border-color: var(--check-on, var(--brand));
  background-image: radial-gradient(circle, var(--check-on, var(--brand)) 0 42%, transparent 48%);
  background-size: 100% 100%;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus { box-shadow: none; }
input[type="checkbox"]:focus:not(:checked),
input[type="radio"]:focus { background-color: var(--surface-2); }
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
.checkbox-row span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

/* Prevent iOS zoom on focus */
@media (max-width: 920px) {
  input,select,textarea { font-size:16px; }
}

/* === Registration form helpers === */
.reg-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--brand);
  margin-bottom: 10px;
}
.reg-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.reg-row label { min-width: 0; }
.reg-lift-block {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.reg-lift-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 10px;
}
.tab-panel.active#registerForm {
  max-height: 72vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* === Tabs === */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  margin-bottom: 20px;
}
.tab {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.tab.active {
  background: var(--surface);
  color: var(--text-1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* === Tables === */
.table-wrap {
  overflow: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
table { width:100%; border-collapse:collapse; min-width:0; font-size:13px; }
/* Opt-in helper for views that intentionally need horizontal table scrolling. */
.table-wrap.table-scroll table { min-width:480px; }
thead { background:var(--surface-2); }
th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-2);
}
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--surface-2); color:var(--text-1); }

/* === Clickable Rows === */
.leaderboard-row { cursor:pointer; transition:background var(--ease); }
.leaderboard-row.selected td { background:var(--brand-dim); color:var(--text-1); }
.lb-detail-close,
.lb-detail-scrim,
.lb-sheet-handle { display: none; }
.history-row { cursor:pointer; transition:background var(--ease), color var(--ease); }
.history-row:hover td { background:var(--gold-dim); }
.history-row:hover td,
.history-row:hover td div { color:var(--gold) !important; }
.history-exercise-cell {
  transition: color var(--ease), text-shadow var(--ease);
}
.history-exercise-cell:hover {
  color: var(--gold) !important;
  text-shadow: 0 0 10px rgba(245,158,11,0.28);
}
.history-row.selected td { background:var(--brand-dim); color:var(--text-1); }
.history-session-row td {
  background: rgba(245, 158, 11, 0.08);
  border-top: 1px solid rgba(245, 158, 11, 0.2);
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
  padding-top: 10px;
  padding-bottom: 10px;
}
.history-session-title {
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
}
.history-session-review {
  color: var(--text-3);
  font-size: 11px;
  margin-top: 3px;
}
.history-session-toggle {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.history-session-chevron {
  color: var(--gold);
  font-size: 14px;
  width: 14px;
  flex: 0 0 14px;
}
.history-row-collapsed {
  display: none;
}

/* === Exercise Hover Tooltip === */
.exercise-hover-tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: var(--surface);
  border: 1.5px solid var(--gold);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(245,158,11,0.15);
  padding: 14px 16px;
  min-width: 220px;
  max-width: 300px;
  font-size: 13px;
}
.eht-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.2px;
  margin-bottom: 2px;
}
.eht-date {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 10px;
}
.eht-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 10px;
}
.eht-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.eht-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
}
.eht-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.eht-gold { color: var(--gold) !important; }
.eht-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}
.eht-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  padding: 3px 6px 4px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.eht-table td {
  padding: 3px 6px 3px 0;
  color: var(--text-1);
  font-weight: 600;
}
.eht-notes {
  font-size: 12px;
  color: var(--text-2);
  font-style: italic;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
  margin-top: 4px;
}
.eht-video-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border-radius: var(--r-full);
  padding: 2px 8px;
}

/* === Detail Panel Notes & Video === */
.detail-notes {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.detail-notes-text {
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.detail-video-wrap {
  margin-top: 16px;
  padding-bottom: 4px;
}

/* === Rank Badges === */
.rank-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.rank-1 { background:var(--gold-dim); color:var(--gold); }
.rank-2 { background:rgba(148,163,184,0.12); color:var(--silver); }
.rank-3 { background:rgba(205,133,63,0.12); color:var(--bronze); }
.rank-other { background:var(--surface-2); color:var(--text-3); font-size:10px; }

.member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-dim);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(var(--brand-rgb),0.2);
  overflow: hidden;
}
.member-avatar.has-image { background: transparent; border-color: var(--border); }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* === Status Badges === */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.badge-green    { background:var(--green-dim); color:var(--green); }
.badge-red      { background:var(--red-dim); color:var(--red); }
.badge-gold     { background:var(--gold-dim); color:var(--gold); }
.badge-muted    { background:var(--surface-2); color:var(--text-2); }
.badge-brand    { background:var(--brand-dim); color:var(--brand); }
.badge-blue     { background:var(--brand-dim); color:var(--brand); }
.badge-bronze   { background:rgba(205,133,63,0.12); color:#CD853F; }
.badge-silver   { background:rgba(148,163,184,0.12); color:#94A3B8; }
.badge-platinum { background:rgba(139,92,246,0.12); color:#8B5CF6; }

/* PR badges (log-workout-entry.md §5b): actual = solid gold + the seal,
   estimated = dashed gold outline. Markup from assets/utils/pr-badge.js. */
.pr-badge { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.badge-pr-actual { background: var(--gold); color: var(--on-gold); border: 1px solid var(--gold); padding: 2px 8px; }
.badge-pr-est { background: transparent; color: var(--gold); border: 1px dashed var(--gold); padding: 2px 8px; }
.pr-seal { width: 16px; height: 16px; flex: none; color: var(--pr-actual); }
.pr-seal .pr-seal-check { stroke: white; }

/* ===========================
   Achievement / Badge Cards
   =========================== */
.badges-section {
  margin-bottom: 20px;
}
.badges-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.badges-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-2);
}
.badges-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
}
.badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.badges-grid-compact {
  gap: 6px;
}
.badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  cursor: default;
  transition: transform var(--ease);
  min-width: 88px;
  max-width: 110px;
  text-align: center;
}
.badge-card:hover { transform: translateY(-2px); }
.badge-card-sm {
  padding: 8px 10px;
  min-width: 64px;
  max-width: 80px;
  gap: 3px;
}
.badge-card-icon {
  font-size: 26px;
  line-height: 1;
}
.badge-card-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1px;
  line-height: 1.3;
}
.badge-card--tier {
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
}
.badge-card-name--tier {
  color: var(--badge-text);
}
.badge-card-date {
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.2;
}
.profile-tier-group {
  margin-bottom: 16px;
}
.profile-tier-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.profile-tier-group-title {
  margin: 0;
}
.badge-explorer-card--row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--explorer-bg);
  border: 1px solid var(--explorer-border);
}
.badge-explorer-icon {
  font-size: 28px;
  line-height: 1;
  opacity: var(--explorer-icon-opacity);
  flex-shrink: 0;
}
.badge-explorer-body {
  flex: 1;
  min-width: 0;
}
.badge-explorer-name {
  font-weight: 600;
  color: var(--explorer-accent);
  margin-bottom: 2px;
}
.badge-explorer-meta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--explorer-subtle);
  margin-bottom: 4px;
  opacity: 0.8;
}
.badge-explorer-req {
  font-size: 11px;
  line-height: 1.4;
}

/* ── Clickable badge cards ── */
.badge-card--clickable {
  cursor: pointer;
}
.badge-card--clickable:focus-visible {
  outline: 2px solid var(--badge-border, rgba(255,255,255,0.3));
  outline-offset: 2px;
}

/* ── Badge detail modal ── */
.badge-detail-modal {
  max-width: 380px;
}
.badge-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 4px;
}
.badge-detail-icon {
  font-size: 48px;
  line-height: 1;
  flex-shrink: 0;
}
.badge-detail-header-info {
  flex: 1;
  min-width: 0;
}
.badge-detail-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--detail-text, var(--text-1));
  margin-bottom: 6px;
  line-height: 1.2;
}
.badge-detail-tier-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.badge-detail-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  margin-top: 12px;
}
.badge-detail-status.earned {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.badge-detail-status.locked {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
}
.badge-detail-status-icon {
  font-size: 22px;
  flex-shrink: 0;
}

/* ── Badge ladder explorer ── */
.badge-explorer-ladders {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 8px;
}
.badge-ladder-group {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.badge-ladder-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.badge-ladder-group-name {
  font-weight: 700;
  font-size: 13px;
  flex: 1;
  min-width: 0;
}
.badge-ladder-rungs {
  display: flex;
  flex-direction: column;
}
.badge-ladder-rung {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--rung-bg);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: filter 0.15s ease;
}
.badge-ladder-rung:last-child {
  border-bottom: none;
}
.badge-ladder-rung:hover {
  filter: brightness(1.1);
}
.badge-ladder-rung:focus-visible {
  outline: 2px solid var(--rung-border, rgba(255,255,255,0.3));
  outline-offset: -2px;
}
.badge-ladder-rung-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 48px;
  text-align: center;
  flex-shrink: 0;
}
.badge-ladder-tier-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
}
.badge-ladder-rung-body {
  flex: 1;
  min-width: 0;
}
.badge-ladder-rung-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--rung-text);
  margin-bottom: 2px;
}
.badge-ladder-rung-req {
  font-size: 11px;
  line-height: 1.3;
}
.badge-ladder-rung-status {
  flex-shrink: 0;
}
.badge-ladder-status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.badge-ladder-status-pill.pill-earned {
  background: rgba(16,185,129,0.15);
  color: #10B981;
  border: 1px solid rgba(16,185,129,0.3);
}
.badge-ladder-status-pill.pill-next {
  background: rgba(245,158,11,0.12);
  color: #F59E0B;
  border: 1px solid rgba(245,158,11,0.3);
}
.badge-ladder-status-pill.pill-locked {
  background: rgba(255,255,255,0.05);
  color: var(--text-3);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ── Set marks: Failure and Belt (log-workout-entry.md §9) ──
   One-tap toggles under each set, at least 44px to tap, and the same pills
   on every history surface (utils/set-marks.js). The belt is a drawn icon. */
.set-marks-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.set-mark-toggle {
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.set-mark-toggle:hover { color: var(--text-1); }
.set-mark-toggle[aria-pressed="true"] {
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), 0.45);
  background: var(--brand-dim);
}
.set-mark-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.belt-icon { width: 16px; height: 16px; flex: none; }
.set-failure-hint { font-size: 12px; }
.set-marks { display: inline-flex; gap: 4px; vertical-align: middle; flex-wrap: wrap; }
.set-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-1);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.set-mark .belt-icon { width: 13px; height: 13px; }
.set-mark-failure {
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), 0.45);
  background: var(--brand-dim);
}

.profile-card-spaced {
  margin-bottom: 16px;
}
.thousand-club-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.thousand-club-title {
  margin: 0;
}
.thousand-club-summary {
  margin-bottom: 12px;
  font-size: 12px;
}
.thousand-club-track {
  background: rgba(255,255,255,0.07);
  border-radius: 6px;
  height: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
.thousand-club-fill {
  width: var(--progress);
  height: 100%;
  background: var(--status-color);
  border-radius: 6px;
  transition: width 0.4s;
}
.thousand-club-progress-label {
  text-align: right;
  margin-bottom: 16px;
  font-size: 11px;
}
.thousand-club-lift-row {
  display: grid;
  grid-template-columns: 140px 1fr 70px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.thousand-club-lift-name {
  font-size: 13px;
  color: var(--text-2);
}
.thousand-club-lift-track {
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.thousand-club-lift-fill {
  width: var(--lift-pct);
  height: 100%;
  background: var(--lift-color);
  border-radius: 4px;
  transition: width 0.4s;
}
.thousand-club-lift-value {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.thousand-club-status {
  margin-top: 8px;
  font-size: 12px;
}
.thousand-club-status--verified {
  color: #8B5CF6;
}
.thousand-club-status--eligible {
  margin: 0;
  color: #F59E0B;
  flex: 1 1 240px;
}
.thousand-club-eligible-row {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* === Toast === */
#toastStack {
  position: fixed;
  right: 16px;
  bottom: 84px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  max-width: 320px;
}
.toast {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: toastIn 0.18s ease forwards;
}
@keyframes toastIn {
  from { opacity:0; transform:translateX(12px); }
  to { opacity:1; transform:translateX(0); }
}

/* === Mobile Nav === */
.mobile-nav {
  --mobile-nav-columns: 4;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(19,19,19,0.96);
  border-top: 1px solid var(--border);
  padding: 8px max(12px, var(--safe-right)) max(env(safe-area-inset-bottom,8px),8px) max(12px, var(--safe-left));
  grid-template-columns: repeat(var(--mobile-nav-columns), 1fr);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-theme="light"] .mobile-nav { background:rgba(255,255,255,0.96); }

.mobile-nav .nav-btn {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: var(--r-sm);
  min-height: 48px;
}
.sidebar .nav-btn svg { width: 18px; height: 18px; }
.mobile-nav .nav-btn svg { width:18px; height:18px; }
.mobile-nav .activity-unread-badge {
  margin-left: 0;
  margin-top: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
}

/* ========================
   AUTH PAGE
   ======================== */
#authView.active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 48px);
  padding: 24px;
}
/* Shown instead of the login form while a refresh re-establishes an existing
   session (see assets/utils/session-boot.js). */
.auth-restore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 24px 16px;
  max-width: 360px;
  width: 100%;
}
.auth-restore img { height: 30px; width: auto; }
.auth-restore-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: #FA0005;
  animation: auth-restore-spin 0.9s linear infinite;
}
@keyframes auth-restore-spin { to { transform: rotate(360deg); } }
.auth-restore-msg { color: var(--text-2); font-size: 14px; margin: 0; }
.auth-restore-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.auth-restore-actions button { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .auth-restore-spinner { animation: none; } }
.auth-container {
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}
.auth-hero {
  background: linear-gradient(160deg, #1C0800 0%, #0D0D0D 60%);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 520px;
}
.auth-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -10%;
  width: 120%;
  height: 80%;
  background: radial-gradient(ellipse at 40% 30%, rgba(var(--brand-rgb),0.18) 0%, transparent 65%);
  pointer-events: none;
}
.auth-hero-brand {
  margin-bottom: auto;
  position: relative;
  z-index: 1;
}
.auth-hero-brand .brand-logo {
  width: min(100%, 176px); /* square shield: scaled down from 240px so it doesn't overwhelm the hero panel */
}
.auth-hero-content { position:relative; z-index:1; padding-top: 32px; }
.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--brand-dim);
  border: 1px solid rgba(var(--brand-rgb),0.2);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.3px;
  margin-bottom: 18px;
}
.auth-hero h2 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--text-1);
}
.auth-hero p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 340px;
  margin-bottom: 28px;
}
.auth-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.auth-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-md);
  padding: 14px 12px;
}
.auth-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text-1);
  line-height: 1;
}
.auth-stat span {
  font-size: 10px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
}
.auth-form-panel {
  background: var(--surface);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.auth-form-panel h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.auth-form-panel > p {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 28px;
}
.auth-submit {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  margin-top: 6px;
  border-radius: var(--r-md);
}
.auth-link-btn {
  border: none;
  background: transparent;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-link-btn:hover { opacity: 0.8; }
.auth-help-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 6px;
}
.auth-help-sep {
  color: var(--text-3, var(--text-2));
  font-size: 12px;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  color: var(--text-3, var(--text-2));
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.btn--facebook {
  background: #1877F2;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
}
.btn--facebook::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.885v2.27h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z'/%3E%3C/svg%3E") no-repeat center/contain;
  flex-shrink: 0;
}
.btn--facebook:hover { background: #166FE5; color: #fff; }

/* ========================
   DASHBOARD
   ======================== */
.dashboard-hero {
  background: linear-gradient(135deg, #160800, #0D0D0D);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
html[data-theme="light"] .dashboard-hero {
  background: linear-gradient(135deg, #FFF5F0, #FFFFFF);
}
.dashboard-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(var(--brand-rgb),0.08) 0%, transparent 65%);
  pointer-events: none;
}
.dashboard-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.hero-value {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--text-1);
  line-height: 1;
  margin-bottom: 6px;
}
.hero-sub {
  font-size: 13px;
  color: var(--text-2);
}
.hero-metrics {
  display: flex;
  gap: 32px;
}
.hero-metric { text-align: right; }
.hero-metric .hm-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1);
  display: block;
}
.hero-metric .hm-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 2px;
  display: block;
}

/* ========================
   LOG PAGE
   ======================== */
.log-grid { display:grid; gap:16px; }
.log-grid.single { grid-template-columns: 1fr; }
.log-session-date {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-1);
  margin-bottom: 14px;
}
.log-session-add-wrap {
  display: flex;
  justify-content: center;
  margin: 12px 0 16px;
}
.log-session-add-btn {
  min-width: 220px;
  font-size: 16px;
}
.log-session-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.log-date-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 12px;
  flex-wrap: nowrap;
}
.log-date-nav .icon-btn {
  width: 36px;
  min-width: 36px;
  padding: 8px 0;
  line-height: 1;
}
.date-nav-label {
  flex: 1;
  min-width: 0;
  display: block;
}
.date-nav-input {
  width: 100%;
}
.date-nav-input::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
  filter: var(--date-picker-icon-filter, invert(92%) sepia(13%) saturate(216%) hue-rotate(180deg) brightness(103%) contrast(93%));
}
[data-theme="light"] .date-nav-input::-webkit-calendar-picker-indicator {
  filter: var(--date-picker-icon-filter-light, invert(13%) sepia(13%) saturate(554%) hue-rotate(173deg) brightness(96%) contrast(92%));
}
.session-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

/* Big + button */
.session-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s;
}
.session-add-btn:hover { background: var(--brand-hover); }
.session-add-btn span { font-size: 22px; line-height: 1; }

/* Action menu popup */
.session-action-menu {
  position: absolute;
  z-index: 1300;
}
.session-action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  min-width: 220px;
  overflow: hidden;
}
.session-action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-1);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.session-action-item:last-child { border-bottom: none; }
.session-action-item:hover { background: var(--surface-2); }
.session-action-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-shrink: 0;
}
.session-action-item-icon svg { width: 16px; height: 16px; color: var(--text-1); }

/* Exercise search modal */
.exercise-search-overlay {
  align-items: flex-start;
  padding: 0;
  background: rgba(8,10,20,0.55);
}
.exercise-search-modal {
  width: 100%;
  max-width: 560px;
  max-height: 100dvh;
  background: var(--surface);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* On larger screens center it */
  margin: 0 auto;
  border: 1px solid var(--border);
}
@media (min-width: 600px) {
  .exercise-search-overlay { align-items: center; padding: 16px; }
  .exercise-search-modal { border-radius: var(--r-lg); max-height: 88vh; }
}
.exercise-search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.exercise-search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.exercise-search-icon {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--text-3);
  pointer-events: none;
}
.exercise-search-input-wrap input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  color: var(--text);
}
.exercise-search-cancel {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 2px;
  white-space: nowrap;
}
.exercise-search-subtitle {
  margin: 0;
  padding: 10px 16px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.exercise-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px 24px;
  overscroll-behavior: contain;
}
.exercise-search-group { margin-bottom: 18px; }
/* Recent | All (log-workout-entry.md §7) */
.exercise-search-tabs { margin: 10px 14px 0; }
.exercise-search-empty { text-align: center; padding: 28px 0; }
.exercise-search-empty .hint { margin: 0 0 12px; }
.exercise-search-cat-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  padding: 8px 4px 6px;
  text-transform: capitalize;
}
.exercise-search-cat-items {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.exercise-search-item {
  display: block;
  width: 100%;
  padding: 13px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
.exercise-search-item:last-child { border-bottom: none; }
.exercise-search-item:hover,
.exercise-search-item:active { background: var(--brand-dim); }

/* ── Exercise search modal: create new exercise section ── */
.esm-create-section {
  border-top: 1px solid var(--border);
  padding: 12px 16px 16px;
  flex-shrink: 0;
}
.esm-create-toggle {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  width: 100%;
  text-align: left;
}
.esm-create-toggle:hover { opacity: 0.8; }
.esm-create-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.esm-create-form input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  box-sizing: border-box;
}
.esm-create-row {
  display: flex;
  gap: 8px;
}
.esm-create-row select {
  flex: 1;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}
.esm-create-error {
  font-size: 12px;
  color: var(--danger, #e74c3c);
  padding: 2px 0;
}
.esm-create-submit-btn {
  padding: 10px 16px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.esm-create-submit-btn:hover { opacity: 0.88; }
.esm-create-submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Body scroll lock when any overlay is open */
body.modal-open { overflow: hidden; }
body:has(.overlay:not([hidden])) { overflow: hidden; }
.log-session-list-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
}
.log-session-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.log-session-item-name {
  color: var(--text-1);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap; /* a PR badge that doesn't fit drops under the name */
  align-items: center;
  gap: 4px 6px;
}
.log-session-item-meta {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 12px;
}
.session-item-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Wraps the single session reflection button — see
   renderSessionReflectionCard in pages/log.js. */
.log-session-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.session-reflection-status {
  margin: 6px 0 0;
  text-align: center;
}
.session-reflection-status:empty {
  display: none;
}
.session-reflection-sheet-error {
  color: var(--danger-color, #FF4444);
  margin-top: 4px;
}
.session-reflection-sheet-error:empty {
  display: none;
}
.session-reflection-textarea {
  width: 100%;
  resize: vertical;
  min-height: 44px;
}
.session-reflection-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.session-reflection-photo-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.session-reflection-photo-label.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* One thumbnail per attached session photo. Picking more photos appends to
   this grid instead of replacing what is already there — each thumb owns
   its own remove button. */
.session-reflection-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.session-reflection-photo-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.session-reflection-photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.session-reflection-photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 15px;
  line-height: 26px;
  cursor: pointer;
}
.session-reflection-photo-remove:hover,
.session-reflection-photo-remove:focus-visible {
  background: rgba(0, 0, 0, 0.82);
}
.session-reflection-photo-count {
  margin: 0;
}
.log-session-reflection-btn {
  flex: 1;
  width: auto;
}
/* Check-in form: Save (primary) then Share (secondary, 25%), then Cancel
   while editing (feed-sharing.md §2). */
.checkin-submit-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.checkin-submit-row .checkin-save-btn {
  flex: 1;
  padding: 14px;
  font-size: 15px;
}
.checkin-submit-row .checkin-share-btn {
  flex: 0 0 calc(25% - 6px);
  min-width: 0;
  min-height: 44px;
  padding-left: 8px;
  padding-right: 8px;
}
/* Share sits right of the reflection button, 3:1, like Save/Notes in the
   entry form: the reflection button (flex: 1) takes the rest of the row
   (feed-sharing.md §1). */
.log-session-footer .log-session-share-btn {
  flex: 0 0 calc(25% - 5px);
  min-width: 0;
  min-height: 44px;
  padding-left: 8px;
  padding-right: 8px;
}
/* Share on a saved check-in — its History row and the details view save on
   the spot (feed-sharing.md §2a). */
.checkin-details-share { margin: 12px 0 4px; }
.checkin-details-share .checkin-row-share-btn { width: 100%; min-height: 44px; }
.log-session-share-btn.is-shared,
.checkin-share-btn.is-shared,
.checkin-row-share-btn.is-shared {
  color: var(--text-1);
  border-color: var(--brand);
}

.type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 24px;
}
.type-btn {
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: -0.1px;
}
.type-btn.active {
  background: var(--brand-dim);
  color: var(--brand);
  border-color: rgba(var(--brand-rgb),0.3);
}
.type-btn:hover:not(.active) {
  background: var(--surface-3);
  color: var(--text-1);
}

.category-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.pill-btn {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
  letter-spacing: 0.1px;
  text-transform: capitalize;
}
.pill-btn.active { background:var(--brand-dim); color:var(--brand); border-color:rgba(var(--brand-rgb),0.3); }
.pill-btn:hover:not(.active) { background:var(--surface-2); color:var(--text-1); }

.set-row,
.set-row-wide {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  border: 1px solid var(--border-subtle);
}
.set-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.set-row-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.set-row-inputs input {
  min-width: 0;
}
.set-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0;
}
.set-estimate {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  text-align: center;
  min-width: 72px;
}
.set-estimate strong { color:var(--brand); font-size:13px; }

/* ─── Exercise stats card (log-workout-entry.md §5c) ───────────────────────
   e1RM with its "Show as" chips and the next-badge ring, the last sessions
   beside today, and the next badge's progress — one card. Last N is gold,
   Today is info blue; a change is an arrow in ink, never red or green. The
   badge ring and bar are gold; the badge's emoji carries its tier. */
.ex-stats-card {
  margin: 10px 0 12px;
  padding: 14px 16px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.ex-stats-card[hidden], .ex-stats-card [hidden] { display: none !important; }
.esc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.esc-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.esc-value { margin: 4px 0 10px; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--brand); white-space: nowrap; font-variant-numeric: tabular-nums; }
.esc-unit { margin-left: 3px; font-size: 15px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.esc-ring {
  position: relative; flex: none; width: 60px; height: 60px; padding: 0;
  display: grid; place-items: center; background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.esc-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.esc-ring circle { fill: none; stroke-width: 6; }
.esc-ring-track { stroke: var(--surface-3); }
.esc-ring-fill { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: calc(var(--pct, 0) * 1) 100; transition: stroke-dasharray var(--ease-out); }
.esc-ring-icon { position: relative; font-size: 20px; line-height: 1; }
.esc-ring:focus-visible, .esc-goal:focus-visible, .esc-rm-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.esc-rm { display: flex; flex-wrap: wrap; gap: 6px; }
.esc-rm-btn {
  min-height: 32px; min-width: 44px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); color: var(--text-2);
  font-size: 12px; font-weight: 700; cursor: pointer; transition: background var(--ease), color var(--ease);
}
.esc-rm-btn[aria-pressed="true"] { background: var(--text-1); border-color: var(--text-1); color: var(--bg); }
.esc-talk { margin: 8px 0 0; }
.esc-table { width: 100%; margin-top: 12px; border-collapse: collapse; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.esc-table thead th { padding: 10px 0 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: right; }
.esc-table th[scope="row"] { padding: 6px 0; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); text-align: left; background: none; border: 0; }
.esc-table td { padding: 6px 0 6px 10px; border: 0; font-size: 15px; text-align: right; white-space: nowrap; }
.esc-table .esc-past { color: var(--gold); font-weight: 600; }
.esc-table .esc-now { color: var(--info); font-weight: 700; }
.esc-table .esc-delta { width: 64px; font-size: 12px; font-weight: 600; color: var(--text-1); }
.esc-table .esc-same { color: var(--text-2); font-weight: 500; }
.esc-goal {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  margin-top: 10px; padding: 12px 0 2px; background: none; border: 0; border-top: 1px solid var(--border);
  border-radius: 0; color: var(--text-1); text-align: left; cursor: pointer;
}
.esc-goal-icon { flex: none; font-size: 22px; line-height: 1; }
.esc-goal[data-state="none"] .esc-goal-icon { opacity: .5; }
.esc-goal-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 6px; }
.esc-goal-name { font-size: 14px; font-weight: 600; }
.esc-goal-sub { font-size: 12px; color: var(--text-2); }
.esc-bar { display: block; height: 6px; overflow: hidden; border-radius: var(--r-full); background: var(--surface-3); }
.esc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width var(--ease-out); }
.esc-chev { flex: none; font-size: 22px; color: var(--text-2); }
@media (max-width: 920px) {
  .esc-value { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .esc-ring-fill, .esc-bar i { transition: none; }
}

/* ─── Achievements panel modal ────────────────────────────────────────────── */
.ach-panel-modal {
  width: min(500px, 100%);
  max-height: 80vh;
  overflow-y: auto;
}
.ach-section { margin-bottom: 20px; }
.ach-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 10px;
}
.ach-all-section { border: none; }
.ach-all-section > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.ach-all-section > summary::-webkit-details-marker { display: none; }
.ach-all-summary { margin-bottom: 0; }

/* Next badge goal card */
.ach-next-goal {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.ach-next-goal-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.ach-next-goal-info { min-width: 0; flex: 1; }
.ach-next-goal-label { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.ach-next-goal-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ach-tier-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 20px;
}
.ach-next-goal-target { font-size: 12px; margin-bottom: 8px; }
.ach-next-goal-sub { font-size: 11px; margin-top: 4px; }
.ach-mastered { }

/* Progress bar */
.ach-progress-bar-wrap { display: flex; align-items: center; gap: 8px; }
.ach-progress-bar-track {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.ach-progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ach-progress-pct { font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--text-2); }

.row-actions { display:flex; gap:8px; margin:4px 0 16px; }

.inline-create-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: -4px 0 10px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.form-row-2 > label { margin-bottom: 0; }
.workout-time-row .workout-end-time-label { display: flex; }

.cardio-stats-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cs-label { font-size:10px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; }
.cs-value { font-size:16px; font-weight:700; color:var(--text-1); margin-top:3px; }

.cardio-distance-row { display:grid; grid-template-columns:1fr 140px; gap:8px; margin-bottom:10px; }
.cardio-distance-row > label { margin-bottom:0; }

.hint { font-size:12px; color:var(--text-3); line-height:1.5; }

/* ========================
   HISTORY PAGE
   ======================== */
.history-grid { align-items:start; }
.history-hint-top { margin-top: 4px; }
.history-cat-badge { margin-left: 6px; }
.history-empty-row {
  text-align: center;
  color: var(--text-3);
  padding: 28px;
}
.history-date-cell { white-space: nowrap; }
.history-date-primary {
  font-weight: 600;
  color: var(--text-1);
}
.history-date-secondary {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.history-exercise-name {
  font-weight: 600;
  color: var(--text-1);
}
.history-work-value {
  font-weight: 700;
  color: var(--text-1);
}
.history-work-secondary { margin-top: 2px; }
.detail-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.dr-value-brand { color: var(--brand); }
.detail-section-top { margin-top: 16px; }
.detail-table-muted { color: var(--text-3); }
.detail-table-brand { color: var(--brand); }
.detail-label-spacer-sm { margin-bottom: 6px; }
.detail-label-spacer-md { margin-bottom: 8px; }

.details-panel { display:flex; flex-direction:column; gap:0; }
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
}
.detail-row:last-of-type { border-bottom:none; }
.dr-label { color:var(--text-2); font-weight:500; }
.dr-value { color:var(--text-1); font-weight:600; text-align:right; }

.history-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

/* ========================
   LEADERBOARD PAGE
   ======================== */
#leaderboardsView .lb-section-head .pill-btn,
#leaderboardsView #challengeWindowPills .pill-btn,
#leaderboardsView #challengeBoardPills .pill-btn { min-height: 44px; }
.lb-row-me { background: var(--brand-dim); }
.lb-challenge-table td { vertical-align: middle; }
.lb-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.lb-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.lb-member-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lb-rel-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
}

.lb-rel-tag.is-friend {
  border-color: var(--ok);
  color: var(--ok);
}

.lb-rel-tag.is-pending {
  border-color: var(--warn);
  color: var(--warn);
}

.lb-rel-cancel-btn {
  border: 1px solid var(--warn);
  background: transparent;
  color: var(--warn);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  line-height: 1.3;
}

.lb-rel-cancel-btn:hover {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.lb-type-tabs {
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0;
}

.lb-type-tabs .tab {
  font-size: 13px;
  padding: 6px 14px;
}

.lb-main-tabs {
  margin-bottom: 16px;
  overflow-x: auto;
  flex-wrap: nowrap;
}
/* Leaderboards are opt-in (leaderboards.md §3): the join card, or the joined line with Leave. */
.lb-opt-in { margin-bottom: 16px; }
.lb-opt-in h3 { margin: 0 0 6px; }
.lb-opt-in .primary { min-height: 44px; margin-top: 10px; }
.lb-opt-in-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.lb-opt-in-leave { min-height: 44px; }
.lb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.lb-section-title { margin-bottom: 0; }
.lb-filter-pills--tight { margin-bottom: 0; }
.lb-type-tabs-row {
  margin-bottom: 12px;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.lb-deep-head { margin-bottom: 16px; }
.lb-deep-title { margin-bottom: 4px; }
.lb-hint-tight { margin: 0; }
.lb-empty-state {
  padding: 20px 0;
  text-align: center;
}
.lb-section-intro { margin-bottom: 12px; }
.lb-split-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.lb-subhead { margin-bottom: 8px; }
.lb-verified-tag-wrap { margin-top: 3px; }
.lb-verified-badge { font-size: 10px; }
.lb-deep-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb-deep-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid transparent;
}
.lb-deep-entry.is-top-1 {
  background: var(--surface-2);
  border-color: rgba(245, 158, 11, 0.2);
}
.lb-deep-entry.is-top-2 {
  background: var(--surface-2);
  border-color: rgba(148, 163, 184, 0.15);
}
.lb-deep-entry.is-top-3 {
  background: var(--surface-2);
  border-color: rgba(205, 133, 63, 0.15);
}
.lb-deep-member {
  flex: 1;
  min-width: 0;
}
.lb-deep-date {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}
.lb-deep-score { text-align: right; }
.lb-deep-score-value {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.3px;
  color: var(--text-1);
}
.lb-deep-score-value.is-top-1 { color: var(--gold); }
.lb-deep-score-value.is-top-2 { color: var(--silver); }
.lb-deep-score-value.is-top-3 { color: var(--bronze); }
.lb-deep-score-label {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.lb-deep-score-meta,
.lb-cell-score-meta {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
}
.lb-more {
  text-align: center;
  padding: 8px 0;
}
.lb-empty-cell {
  text-align: center;
  color: var(--text-3);
  padding: 28px;
}
.lb-cell-strong {
  font-weight: 600;
  color: var(--text-1);
}
.lb-cell-bold {
  font-weight: 700;
  color: var(--text-1);
}
.lb-cell-score-value {
  font-weight: 800;
  color: var(--text-1);
}
.lb-cell-score-label {
  font-size: 11px;
  color: var(--text-3);
}
.lb-empty-inline { padding: 8px 0; }
/* Biggest Loser: highlight whichever of % / lbs is the active sort column */
.lb-sort-active { color: var(--brand); }
.lb-member-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ========================
   PROFILE PAGE
   ======================== */

/* Legacy form grid (kept for compat) */
.metrics-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

/* New 2-col entry grid that stays 2-col on mobile */
.metrics-entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

.friend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.friend-row:last-child {
  border-bottom: 0;
}

.leaderboard-member-btn {
  border: 0;
  background: transparent;
  color: var(--text-1);
  padding: 0;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.leaderboard-member-btn:hover {
  color: var(--brand);
  text-decoration: underline;
}

.lb-exercise-name {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.lb-exercise-prefix {
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
}

.lb-exercise-main {
  color: var(--text-1);
  font-weight: 600;
  min-width: 0;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 20, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 1200;
  padding: 16px;
  overflow-y: auto;
}
.overlay > .modal-card {
  /* Centre in viewport when short; starts at top when content is tall */
  margin: auto;
  flex-shrink: 0;
}

/* Custom confirm dialog */
.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 20, 0.72);
  display: grid;
  place-items: center;
  z-index: 1500;
  padding: 16px;
}
.confirm-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 20px 18px;
  width: min(340px, 100%);
  box-shadow: 0 24px 55px rgba(0,0,0,.55);
}
.confirm-dialog-msg {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--text-1);
  line-height: 1.5;
}
.confirm-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.modal-title { margin: 0 0 8px; }
.modal-subtitle { margin-bottom: 12px; }

.leaderboard-member-modal {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.55);
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
}

.mini-stat {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 10px;
}

.mini-stat span {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  margin-bottom: 3px;
}

.mini-stat strong {
  color: var(--text-1);
  font-size: 14px;
}

/* Profile Hero */
.profile-hero {
  background: linear-gradient(135deg, #160800, #0D0D0D);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
html[data-theme="light"] .profile-hero {
  background: linear-gradient(135deg, #FFF5F0, #FFFFFF);
}
.profile-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(var(--brand-rgb),0.08) 0%, transparent 65%);
  pointer-events: none;
}
.profile-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.profile-hero-avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.profile-hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
}
.profile-hero-avatar-edit {
  /* A label, so reset the global label's column layout and bottom margin —
     the margin lifted the pencil onto the avatar's left middle. Lower right,
     like the desktop account panel's pencil. */
  bottom: -2px;
  right: -2px;
  margin: 0;
  gap: 0;
  font-size: 11px;
  border-color: var(--surface);
}
.profile-hero-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-hero-avatar-initials {
  width: 100%;
  height: 100%;
  background: var(--brand-dim);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.profile-hero-info { min-width: 0; }
.profile-hero-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-1);
  line-height: 1.2;
}
.profile-hero-role {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-dim);
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  text-transform: capitalize;
  margin-top: 4px;
  letter-spacing: 0.2px;
}
.profile-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
  z-index: 1;
}
.profile-stat {
  text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--r-md);
  padding: 10px 8px;
}
html[data-theme="light"] .profile-stat {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.06);
}
.profile-stat-val {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1);
  line-height: 1;
}
.profile-stat-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}

/* Profile Tab Panels */
.profile-tab-panel { }
.profile-tab-panel + .card,
.profile-tab-panel .card:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.profile-overview-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

/* Account Management uses direct task rows and full-screen phone editors. */
.account-management-grid {
  display: grid;
  /* Two even columns: Profile · Preferences, then Security · Help, then
     Personal data across — never one group left alone in a row. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.account-management-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
}

.account-management-card-content > .hint,
.account-management-card-content > form > .hint {
  margin-top: 0 !important;
}

[data-account-panel][hidden] { display: none !important; }
.account-management-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.account-management-heading h2 { font-size: 26px; margin-bottom: 6px; }
.account-management-heading p { margin: 0; }
.account-management-search { flex: 0 1 280px; margin: 0; }
.account-management-search input { min-height: 44px; width: 100%; }
.account-management-group { padding: 0 !important; margin: 0 !important; overflow: hidden; min-width: 0; }
.account-management-group > h3 { margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--border); font-size: 14px; }
.account-task-action {
  width: calc(100% - 36px); min-height: 84px; margin: 0 18px; padding: 16px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 0; border-radius: 0; background: transparent; color: var(--text-1); text-align: left;
}
.account-task-action + .account-task-action { border-top: 1px solid var(--border); }
.account-task-action:hover { background: transparent; color: var(--text-1); }
.account-task-action:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: var(--r-sm); }
.account-task-copy { flex: 1; min-width: 0; }
.account-task-title { display: flex; align-items: center; gap: 8px; }
.account-task-copy strong { display: block; font-size: 14px; line-height: 1.45; font-weight: 600; }
/* The profile-incomplete dot on the row that needs updating (and on each
   field inside its editor), so the trail ends on what to change. */
.account-task-dot, .account-field-dot { display: inline-block; margin-left: 0; border-color: var(--surface); }
.account-field-dot[hidden] { display: none; }
.account-field-label { display: inline-flex; align-items: center; gap: 6px; }
.account-task-copy small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.account-task-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 100px; min-height: 44px; padding: 10px 12px; flex-shrink: 0;
  border-radius: var(--r-sm); background: var(--account-action-bg); color: var(--account-action-text);
  font-size: 12px; font-weight: 650;
}
.account-task-cta svg { width: 14px; height: 14px; }
.account-task-action:hover .account-task-cta { box-shadow: 0 0 0 2px var(--text-2); }
.account-management-data { grid-column: 1 / -1; }
.account-management-membership { grid-column: 1 / -1; }
.account-data-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding: 18px; }
.account-data-layout > div > strong { font-size: 14px; }
.account-data-layout p { margin: 8px 0 0; line-height: 1.6; }
.account-data-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.account-data-actions button { min-height: 44px; }
.account-data-removal { border-left: 1px solid var(--border); padding-left: 24px; }
.account-data-removal summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 600; }
.account-data-removal summary svg { width: 18px; height: 18px; flex-shrink: 0; }
.account-data-removal[open] summary svg { transform: rotate(90deg); }
.account-data-removal summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.account-search-empty, .account-save-result { margin-top: 16px; }
.account-save-result { color: var(--green); }
.account-management-board [hidden] { display: none !important; }
.profile-hero-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.account-photo-row { display: flex; align-items: center; gap: 16px; margin: 14px 0; }
.account-photo-preview { display: flex; align-items: center; flex-shrink: 0; }
.account-photo-preview img, .account-photo-preview .profile-hero-avatar-initials { width: 80px; height: 80px; border-radius: var(--r-full); object-fit: cover; }
.account-photo-choose { min-width: 0; }
.account-photo-choose .hint { margin: 8px 0 0; }
/* The picker is a secondary button like every other one; the file input
   stays in the label (so it opens on a tap) but is visually hidden. */
.account-photo-picker {
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
  min-height: 44px; margin: 0; padding: 10px 16px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); background: transparent;
  color: var(--text-1); font-size: 14px; font-weight: 600; letter-spacing: 0;
}
.account-photo-picker:hover { background: var(--surface-2); }
.account-photo-picker:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.account-photo-picker input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); }
dialog.account-editor-sheet.is-visible {
  margin: 0; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 48px)); height: auto; max-height: min(850px, calc(100dvh - 48px));
  padding: 0; border: 1px solid var(--border); color: var(--text-1); background: var(--surface);
  display: flex; flex-direction: column; overflow: hidden;
}
.account-editor-sheet::backdrop, .account-confirm-dialog::backdrop { background: rgba(0,0,0,.65); }
.account-editor-sheet .feedback-sheet-header { flex-shrink: 0; }
.account-editor-sheet .account-editor-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.account-editor-sheet [data-account-panel] { padding: 0; }
.chatgpt-connected-account { padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md); overflow-wrap: anywhere; }
.chatgpt-connected-account p { margin: 8px 0 0; }
.chatgpt-sharing-group { margin: 16px 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); min-width: 0; }
.chatgpt-sharing-group legend { font-size: 14px; font-weight: 700; }
.chatgpt-sharing-group small { display: block; color: var(--text-3); }
.chatgpt-goals { white-space: pre-wrap; overflow-wrap: anywhere; }
.chatgpt-disconnect-review { padding: 12px 0; }
.account-editor-sheet [data-chatgpt-actions], .account-editor-sheet [data-chatgpt-disconnect-actions] { margin-top: 16px; }
.account-editor-sheet [data-account-panel="session"] button, .account-editor-sheet [data-chatgpt-actions] a { min-height: 44px; }
.account-editor-sheet [data-chatgpt-identity] summary { min-height: 44px; padding: 10px 0; box-sizing: border-box; }
.account-editor-sheet form { margin: 0; }
/* Every editor's fields read the same: one label style, one control height. */
.account-editor-sheet .account-management-card-content { padding-top: 0; }
.account-editor-sheet .account-management-card-content > .hint,
.account-editor-sheet .account-management-card-content > form > .hint:first-child { margin: 0 0 8px; }
.account-editor-sheet .user-panel-prefs-grid { gap: 0 12px; }
.account-editor-sheet .user-panel-prefs-grid label,
.account-editor-sheet .checkin-date-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.account-editor-sheet .user-panel-prefs-grid label { margin-bottom: 14px; }
.account-editor-sheet .user-panel-prefs-grid select { font-size: 15px; padding: 11px 36px 11px 14px; }
.account-editor-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.account-editor-sheet select { height: 46px; min-height: 46px; box-sizing: border-box; }
.account-editor-sheet #profilePasswordResetLinkBtn { align-self: flex-start; min-height: 44px; }
.account-editor-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0;
}
.account-editor-actions button, .account-editor-actions .btn { min-height: 44px; min-width: 84px; margin: 0; width: auto; }
.account-editor-state { margin-right: auto; color: var(--text-2); font-size: 12px; }
.account-editor-error { color: var(--red); border: 1px solid var(--red); background: var(--red-dim); border-radius: var(--r-sm); padding: 12px; margin: 0 0 16px; }
.account-data-warning { border: 1px solid var(--border); padding: 12px; border-radius: var(--r-sm); color: var(--text-2); background: var(--surface-2); }
.account-import-filename { overflow-wrap: anywhere; }
.account-import-counts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.account-import-counts > div { background: var(--surface-2); border-radius: var(--r-sm); padding: 12px; }
.account-import-counts dt { font-size: 12px; color: var(--text-2); }
.account-import-counts dd { margin: 4px 0 0; font-size: 22px; font-weight: 600; }
.account-confirm-dialog { padding: 24px; width: min(440px,calc(100vw - 32px)); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text-1); background: var(--surface); }
.account-confirm-dialog p { color: var(--text-2); margin: 14px 0; }
.account-confirm-dialog form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.account-confirm-dialog button { min-height: 44px; }
@media (max-width: 920px) {
  .account-management-heading { display: block; }
  .account-management-search { margin-top: 16px; }
  #profileMainTabAccount .account-management-group { width: 100% !important; margin: 0 !important; border-radius: var(--r-lg); border: 1px solid var(--border); }
  .account-task-action { width: calc(100% - 32px); margin: 0 16px; }
  .account-management-group > h3 { padding-left: 16px; padding-right: 16px; }
  .account-data-layout { grid-template-columns: minmax(0,1fr); padding: 16px; gap: 18px; }
  .account-data-removal { border-left: 0; border-top: 1px solid var(--border); padding: 12px 0 0; }
  dialog.account-editor-sheet.is-visible {
    inset: auto; top: auto; left: 0; bottom: 0; width: 100%; height: var(--sheet-avail-h,100dvh);
    max-height: var(--sheet-avail-h,100dvh); margin: 0; transform: none; border-radius: 0; border: 0;
  }
  .account-editor-sheet .feedback-sheet-header, .account-editor-sheet .feedback-sheet-body {
    padding-left: var(--pad-l,16px); padding-right: var(--pad-r,16px);
  }
  .account-editor-actions { padding: 16px var(--pad-r,16px) calc(16px + var(--safe-bottom,0px)) var(--pad-l,16px); }
  .account-editor-actions button, .account-editor-actions .btn { flex: 1; min-width: 0; }
  .account-editor-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .account-editor-sheet .user-panel-prefs-grid { grid-template-columns: minmax(0,1fr); }
  .account-editor-sheet input, .account-editor-sheet select, .account-editor-sheet textarea { font-size: 16px; }
}

@media (max-width: 700px) {
  .account-management-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .account-management-data { grid-column: auto; }
  .account-management-membership { grid-column: auto; }
}

.email-preference-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  margin: 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.email-preference-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  padding: 0;
}

.email-preference-row > span {
  min-width: 0;
}

/* Push Notifications card (app-feed.md §2d) */
.push-preferences-intro { margin: 10px 0; }
.push-device-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 4px;
}
.push-device-status { margin: 0; flex: 1 1 200px; }
.push-preference-label { display: block; }
.push-preference-group { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
.push-preference-group legend { padding: 0; margin-bottom: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.notification-section + .notification-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.notification-section-title { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--text-1); }

/* Progress Photos */
.progress-photos-section {
  margin-bottom: 20px;
}
.progress-photos-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.progress-photos-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: -0.1px;
}
.progress-photos-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}
.progress-photos-strip::-webkit-scrollbar { height: 3px; }
.progress-photos-strip::-webkit-scrollbar-track { background: transparent; }
.progress-photos-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.progress-photo-thumb {
  flex-shrink: 0;
  width: 100px;
  height: 140px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  scroll-snap-align: start;
  background: var(--surface-2);
  position: relative;
  padding: 0;
  cursor: pointer;
  display: block;
}
.progress-photo-thumb:hover,
.progress-photo-thumb:focus-visible {
  border-color: var(--brand);
  outline: none;
}
.progress-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.progress-photo-thumb-date {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 6px;
  font-size: 10px;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.progress-photo-thumb.checkin-compare-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand);
}

/* Upload Zones */
.progress-upload-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}
.upload-section-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.upload-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.upload-section-hint {
  font-size: 11px;
  color: var(--text-3);
}
.upload-zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.initialized-upload-zones {
  grid-template-columns: repeat(3, minmax(0, 72px));
  justify-content: start;
}
.initialized-upload-zones .upload-zone {
  aspect-ratio: 1 / 1.25;
}
.upload-zone {
  position: relative;
  border-radius: var(--r-md);
  border: 1.5px dashed var(--border);
  background: var(--surface-2);
  overflow: hidden;
  aspect-ratio: 3/4;
  transition: border-color var(--ease), background var(--ease);
  cursor: pointer;
}
.upload-zone:hover { border-color: var(--brand); background: var(--brand-dim); }
.upload-zone.has-image { border-style: solid; border-color: var(--brand); }
.upload-zone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  color: var(--text-3);
}
.upload-zone-icon { display: flex; align-items: center; }
.upload-zone-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--r-md) - 2px);
}
.upload-zone-label-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.upload-zone.has-image .upload-zone-label-text {
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--r-full);
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.upload-zone.has-image .upload-zone-icon { display: none; }
.upload-zone-clear {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--ease);
}
.upload-zone-clear:hover { background: var(--red); }

.checkin-compare-controls {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.checkin-compare-angle-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.checkin-compare-board {
  margin-top: 12px;
  display: block;
}
.checkin-compare-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 8px;
}
.checkin-compare-card--single {
  width: 100%;
}
.checkin-compare-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.checkin-compare-pane {
  min-width: 0;
}
.checkin-compare-photo-wrap {
  margin-top: 6px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
}
.checkin-compare-photo {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  cursor: zoom-in;
}
.checkin-compare-photo-empty {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 12px;
}
.checkin-compare-metrics {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}
.checkin-compare-metrics > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.checkin-compare-metrics span { color: var(--text-3); }
.checkin-compare-metrics strong { color: var(--text-1); font-size: 13px; }
.checkin-compare-share-mark {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.checkin-compare-share-mark img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.checkin-calendar-wrap {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: var(--surface-2);
  margin-bottom: 14px;
}
.checkin-calendar-title {
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}
.checkin-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.checkin-calendar-weekdays span {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
}
.checkin-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.checkin-calendar-day {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  border-radius: 10px;
  min-height: 36px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.checkin-calendar-day--empty {
  background: transparent;
  border-color: transparent;
  min-height: 36px;
}
.checkin-calendar-day.is-measured {
  background: #19de80;
  border-color: #19de80;
  color: #04110b;
  cursor: pointer;
}
.checkin-calendar-day:disabled {
  opacity: 0.35;
}
.checkin-calendar-day.is-measured:hover {
  filter: brightness(0.95);
}
.checkin-calendar-day.has-photos {
  position: relative;
}
.checkin-calendar-day.has-photos::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(4, 17, 11, 0.35);
}

.checkin-photo-flag {
  font-size: 15px;
  line-height: 1;
}
.checkin-photo-flag--empty {
  color: var(--text-3);
}

[data-checkin-history-row] {
  cursor: pointer;
}
[data-checkin-history-row]:hover {
  background: var(--surface-2);
}
[data-checkin-history-row].checkin-compare-selected {
  background: color-mix(in srgb, var(--brand) 18%, var(--surface-1));
}
tr[data-checkin-history-row].checkin-compare-selected > td {
  background: color-mix(in srgb, var(--brand) 18%, var(--surface-1));
  color: var(--text-1);
}
.checkin-calendar-day.checkin-compare-selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 55%, #ffffff);
}

.checkin-details-modal {
  width: min(860px, 100%);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.checkin-details-section {
  margin-top: 14px;
}
.checkin-details-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.checkin-details-section-title {
  font-size: 13px;
}
.checkin-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.checkin-details-grid > div {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
}
.checkin-details-grid span {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  margin-bottom: 4px;
}
.checkin-details-grid strong {
  color: var(--text-1);
  font-size: 14px;
}
.checkin-details-photo-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.checkin-details-photo-btn {
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  flex: 0 0 clamp(108px, 28vw, 180px);
}
.checkin-details-photo-btn img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
.checkin-details-photo-btn span {
  display: block;
  padding: 6px 8px;
  text-align: center;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.checkin-details-cta-wrap {
  margin-bottom: 10px;
}
.checkin-details-compare-cta {
  width: 100%;
}

.reauth-modal {
  max-width: 420px;
}
.reauth-modal-message {
  color: var(--text-2);
  margin-bottom: 16px;
  font-size: 14px;
}
.reauth-modal-field {
  display: block;
  margin-bottom: 14px;
}
.reauth-modal-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-3);
}
.reauth-modal-input {
  margin-top: 6px;
  width: 100%;
}
.reauth-modal-actions {
  display: flex;
  gap: 10px;
}
.reauth-modal-btn { flex: 1; }
.reauth-modal-error {
  color: var(--red);
  font-size: 12px;
  margin-top: 10px;
}
.checkin-photo-viewer-overlay { padding: 20px; }
.checkin-photo-viewer-modal {
  max-width: min(96vw, 1200px);
  width: auto;
  padding: 0;
  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(255,255,255,0.16);
}
.checkin-photo-viewer-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: min(96vw, 1200px);
  max-height: 90vh;
  object-fit: contain;
}

/* ========================
   ADMIN PAGE
   ======================== */
.admin-controls {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.admin-actions { display:flex; gap:6px; flex-wrap:wrap; }
.admin-actions .ghost { padding:5px 10px; font-size:11px; }
.admin-action-select {
  min-width: 160px;
  font-size: 12px;
  padding: 6px 8px;
}

.admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-table-wrap table {
  min-width: 760px;
}

/* Admin → Members: sortable column headings */
.admin-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.admin-sort-btn:hover,
.admin-sort-btn.active { color: var(--text-1); }
.admin-sort-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.admin-sort-arrow { font-size: 9px; opacity: 0.45; }
.admin-sort-btn.active .admin-sort-arrow { opacity: 1; color: var(--brand); }

/* Admin → 1000 Club: remove a submission */
.tc-delete-btn { margin-top: 6px; font-size: 12px; padding: 4px 10px; }

/* ========================
   SIDEBAR PREFERENCES
   ======================== */
.sidebar .card.compact {
  margin-top: 10px;
  padding: 14px;
  background: var(--surface-2);
  border-color: var(--border-subtle);
}
.sidebar .card.compact h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.sidebar .card.compact label { font-size:11px; margin-bottom:10px; }
.sidebar .card.compact input,
.sidebar .card.compact select { padding:7px 10px; font-size:13px; }
.sidebar .card.compact .primary { width:100%; font-size:13px; padding:9px; margin-top:4px; }

/* ========================
   RESPONSIVE
   ======================== */
@media (max-width: 920px) {
  body.checkin-details-open {
    overflow: hidden;
  }
  body.workout-history-details-open {
    overflow: hidden;
  }
  .checkin-details-overlay {
    padding: 0;
    align-items: end;
    place-items: end stretch;
  }
  .history-details-overlay {
    padding: 0;
    align-items: end;
    place-items: end stretch;
  }
  .checkin-details-modal {
    width: 100%;
    max-width: 100%;
    height: min(84vh, 760px);
    max-height: min(84vh, 760px);
    border-radius: 18px 18px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .history-details-overlay .history-details-modal {
    width: 100%;
    max-width: 100%;
    height: min(84vh, 760px);
    max-height: min(84vh, 760px);
    border-radius: 18px 18px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
  }
  #authView.active { padding: 16px; align-items: flex-start; }
  .shell { grid-template-columns:1fr; border-right:0; }
  .sidebar { display:none; }
  .mobile-nav { display:grid; }
  .main { padding: 0 0 84px; }
  .app-legal-footer {
    font-size: 11px;
    padding: 10px 12px calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 14px);
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    z-index: 1;
  }
  .top {
    margin-bottom: 6px;
    padding: 8px var(--pad-r) 6px var(--pad-l);
  }
  .top h1 { font-size:15px; }
  .page { width: 100%; }
  #dashboardView,
  #feedView,
  #logView,
  #nutritionView,
  #protocolsView,
  #coachView,
  #historyView,
  #checkinsView,
  #leaderboardsView,
  #performanceView,
  #profileView,
  #adminView {
    padding-left: var(--pad-l);
    padding-right: var(--pad-r);
  }
  #dashboardView .card,
  #feedView .card,
  #logView .card,
  #nutritionView .card,
  #protocolsView .card,
  #coachView .card,
  #historyView .card,
  #checkinsView .card,
  #leaderboardsView .card,
  #performanceView .card,
  #profileView .card,
  #adminView .card {
    /* The card's surface still runs edge to edge; its content sits in the
       gutter (the view's padding is undone by the negative margin). */
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin-left: calc(-1 * var(--pad-l));
    margin-right: calc(-1 * var(--pad-r));
    padding-left: var(--pad-l);
    padding-right: var(--pad-r);
    box-sizing: border-box;
  }
  #dashboardView .card .card,
  #feedView .card .card,
  #logView .card .card,
  #nutritionView .card .card,
  #protocolsView .card .card,
  #coachView .card .card,
  #historyView .card .card,
  #checkinsView .card .card,
  #leaderboardsView .card .card,
  #performanceView .card .card,
  #profileView .card .card,
  #adminView .card .card {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  #logView .tabs {
    border-radius: 0;
    margin-bottom: 0;
    margin-left: calc(-1 * var(--pad-l));
    margin-right: calc(-1 * var(--pad-r));
    padding-left: var(--pad-l);
    padding-right: var(--pad-r);
  }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .workspace-grid,
  .workspace-grid.body-trends { grid-template-columns:1fr; }
  .log-grid { grid-template-columns:1fr; }
  .auth-container { grid-template-columns:1fr; border-radius:var(--r-lg); }
  .auth-hero { min-height:auto; padding:28px 24px; }
  .auth-hero h2 { font-size:26px; }
  .auth-form-panel { padding:28px 24px; }
  .tos-modal {
    width: 100%;
    max-height: calc(100vh - 12px);
    padding: 16px 14px 0;
  }
  .tos-actions {
    position: sticky;
    bottom: 0;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  }
  .tos-accept-btn {
    min-height: 52px;
    font-size: 16px;
  }
  .admin-controls { grid-template-columns:1fr; }

  .admin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs .tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .admin-log-toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
  }
  .admin-log-summary {
    width: 100%;
  }
  .ex-admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #adminView .admin-table-wrap table {
    min-width: 640px;
  }
  #adminView .admin-members-table th:nth-child(4),
  #adminView .admin-members-table td:nth-child(4),
  #adminView .admin-members-table th:nth-child(5),
  #adminView .admin-members-table td:nth-child(5) {
    display: none;
  }
  #adminView .admin-achievements-table th:nth-child(5),
  #adminView .admin-achievements-table td:nth-child(5),
  #adminView .admin-achievements-table th:nth-child(7),
  #adminView .admin-achievements-table td:nth-child(7) {
    display: none;
  }
  #adminView .admin-logs-table th:nth-child(4),
  #adminView .admin-logs-table td:nth-child(4),
  #adminView .admin-logs-table th:nth-child(6),
  #adminView .admin-logs-table td:nth-child(6) {
    display: none;
  }
  .hero-metrics { display:none; }
  .dashboard-hero-grid { grid-template-columns:1fr; }
  #toastStack { bottom:76px; right:12px; }
  .metrics-form-grid { grid-template-columns:1fr; }
  .metrics-entry-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cardio-stats-panel { grid-template-columns: 1fr 1fr; }
  .profile-hero-stats { grid-template-columns: repeat(2,1fr); }
  .profile-stat-val { font-size:16px; }
  .progress-photo-thumb { width:80px; height:110px; }
  .upload-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .checkin-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkin-details-photo-btn { flex-basis: min(32vw, 160px); }
  .checkin-compare-angle-controls { margin-left: 0; width: 100%; justify-content: flex-start; }
  .form-row-2 { grid-template-columns: 1fr; }
  .workout-time-row .workout-end-time-label { display: none; }
  /* cardio-distance-row stays 2-col so distance value + unit are always side by side */
  .set-row-inputs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .set-row-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .set-estimate { text-align: center; min-width: 68px; }

  /* Leaderboard mobile */
  #leaderboardsView .workspace-grid { gap: 10px; }
  #leaderboardsView .card { padding-top: 10px; padding-bottom: 10px; border-color: transparent; }
  #leaderboardsView .tabs { gap: 2px; padding: 2px; margin-bottom: 10px; }
  #leaderboardsView .tab { padding: 8px 6px; font-size: 11px; letter-spacing: -0.2px; }
  #leaderboardsView .tab.active { box-shadow: none; }
  /* Hide avatars in exercise table to free up horizontal space */
  #lbTable .member-avatar { display: none; }
  #leaderboardsView .lb-rel-tag { display: none; } /* hide friend tags to save space */
  /* Truncate long exercise names and member names to prevent overflow */
  #lbTable { table-layout: fixed; width: 100%; }
  #lbTable td:nth-child(1),
  #lbTable td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
  #lbTable .lb-exercise-name { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
  #lbTable .lb-exercise-prefix { font-size: 10px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #lbTable .lb-exercise-main { line-height: 1.2; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #lbTable .leaderboard-member-btn { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Match history tab behavior: allow leaderboard tables to shrink to viewport width */
  #leaderboardsView .table-wrap { border: 0; }
  #leaderboardsView .table-wrap table { min-width: 0; }
  /* Leaderboard table density tuned for narrow screens */
  #leaderboardsView .table-wrap table th,
  #leaderboardsView .table-wrap table td { padding: 6px 8px; font-size: 12px; }
  /* Biggest Loser shows % and lb together on mobile too - it's a combined
     measure, not a metric to drop for space. Keep both columns, just tight. */
  #leaderboardsView #biggestLoserMonth th,
  #leaderboardsView #biggestLoserMonth td,
  #leaderboardsView #biggestLoserYear th,
  #leaderboardsView #biggestLoserYear td { padding: 6px 5px; }
  /* 1000+ Leaders: hide individual lift columns, keep combined */
  #leaderboardsView #thousandPlusMount th:nth-child(4),
  #leaderboardsView #thousandPlusMount td:nth-child(4),
  #leaderboardsView #thousandPlusMount th:nth-child(5),
  #leaderboardsView #thousandPlusMount td:nth-child(5),
  #leaderboardsView #thousandPlusMount th:nth-child(6),
  #leaderboardsView #thousandPlusMount td:nth-child(6) { display: none; }
  /* Deep rankings: fix row selector and tighten padding; truncate member names */
  #deepLeaderboardContent > div > div { gap: 8px !important; padding: 6px !important; border: 0 !important; }
  #deepLeaderboardContent .leaderboard-member-btn { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .leaderboard-member-btn { font-size: 13px; }
  .rank-badge { width: 22px; height: 22px; font-size: 10px; }
  .member-avatar { width: 24px; height: 24px; font-size: 10px; }
  #leaderboardsView .lb-detail-panel {
    position: fixed;
    z-index: 1301;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(78vh, 680px);
    overflow-y: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 12px var(--pad-r) calc(18px + env(safe-area-inset-bottom)) var(--pad-l);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border: 1px solid var(--border);
    border-bottom: 0;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, .48);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform var(--ease), visibility var(--ease);
  }
  #leaderboardsView .lb-detail-panel.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  #leaderboardsView .lb-detail-scrim {
    display: block;
    position: fixed;
    z-index: 1300;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(8, 10, 20, .72);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ease), visibility var(--ease);
  }
  #leaderboardsView .lb-detail-scrim.is-open { opacity: 1; visibility: visible; }
  #leaderboardsView .lb-detail-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 28px;
    cursor: pointer;
  }
  #leaderboardsView .lb-sheet-handle {
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: var(--border);
  }
  #leaderboardsView .lb-deep-head { padding-right: 42px; }

  @media (prefers-reduced-motion: reduce) {
    #leaderboardsView .lb-detail-panel,
    #leaderboardsView .lb-detail-scrim { transition: none; }
  }

  /* History: remove min-width so tables fit mobile viewport */
  .history-grid .table-wrap table,
  #historyDetailsBody .table-wrap table { min-width: 0; }

  /* History: hide Type column on mobile */
  .history-grid .table-wrap table th:nth-child(3),
  .history-grid .table-wrap table td:nth-child(3) { display: none; }

  /* History detail sets table: compact on mobile */
  #historyDetailsBody .table-wrap table th,
  #historyDetailsBody .table-wrap table td { padding: 6px 8px; font-size: 12px; }

  /* Log workout: category pills scroll horizontally instead of wrapping */
  .category-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .category-pills::-webkit-scrollbar { display: none; }
  .pill-btn { padding: 4px 8px; border-radius: 7px; }

  /* Log workout: compact type toggle buttons */
  .type-btn { padding: 10px 8px; font-size: 13px; }

  /* Log workout: hide verbose cardio hint to save space */
  #cardioForm .hint { display: none; }

  /* Log workout: collapsible create-exercise row (hidden until toggled) */
  .log-create-wrap { display: none; }
  .log-create-wrap.open { display: block; }
  .log-create-toggle { display: block; font-size: 12px; padding: 4px 10px; margin-bottom: 8px; }
}

@media (min-width: 921px) and (max-width: 1100px) {
  .auth-container {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
  }
  .auth-hero,
  .auth-form-panel {
    padding: 36px 32px;
  }
}

@media (max-width: 640px) {
  .auth-stats { grid-template-columns:repeat(2,1fr); }
  .hero-value { font-size:36px; }
  .metric strong { font-size:24px; }
}

@media (max-width: 480px) {
  .upload-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .checkin-details-grid { grid-template-columns: 1fr; }
  .checkin-details-photo-btn { flex-basis: min(40vw, 150px); }
  .initialized-upload-zones {
    grid-template-columns: repeat(3, minmax(0, 72px));
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

@media (max-width: 380px) {
  .auth-stats { grid-template-columns: 1fr; }
}

/* ========================
   DESKTOP ENHANCEMENTS
   ======================== */

/* Desktop baseline (≥ 921px): fixes & layout improvements */
@media (min-width: 921px) {
  /* Keep all authenticated views — and the page header — at the same desktop width.
     Change --page-max-w in :root to resize every page at once. */


  /* Feed: narrower single-column social card, not the full page width — a
     bare .feed-card stretched to --page-max-w reads as an over-stretched
     panel with a small centered photo, not a feed. */
  .feed-shell {
    max-width: 600px;
    margin: 0 auto;
  }

  /* Toast no longer needs to clear the mobile nav bar */
  #toastStack { bottom: 24px; right: 20px; }

  /* Log workout: create-exercise rows always visible on desktop */
  .log-create-wrap { display: block; }
  .log-create-toggle { display: none; }

  /* Cap progress photo upload zones so they don't stretch too tall on desktop */
  .upload-zones { max-width: 360px; }

  /* Progress photos: larger thumbnails on desktop */
  .progress-photo-thumb { width: 150px; height: 210px; }

  /* Profile hero: horizontal layout — avatar+name left, stats right */
  .profile-hero {
    flex-direction: row;
    align-items: center;
    padding: 24px 32px;
    gap: 28px;
  }
  .profile-hero-left { flex-shrink: 0; min-width: 180px; }
  .profile-hero-stats { flex: 1; }

  /* History: single-column layout */
  .history-grid { grid-template-columns: minmax(0, 1fr); }

  /* Leaderboard: exercise table wider, deep-rankings panel fixed */
  #leaderboardsView .workspace-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
}

/* Large desktop ≥ 1280px */
@media (min-width: 1280px) {
  .main { padding: 28px 40px 80px; }
  .chart { height: 300px; }
  .dashboard-hero { padding: 32px 40px; }
  .workspace-grid { gap: 20px; }
  .metrics { gap: 14px; }
}

/* Extra-large desktop ≥ 1600px */
@media (min-width: 1600px) {
  .main { padding: 32px 48px 80px; }
  .chart { height: 320px; }
  .dashboard-hero { padding: 36px 48px; }
  .hero-value { font-size: 56px; letter-spacing: -2.5px; }
}

/* ─── 1000 Club ─────────────────────────────────────────────────── */
.thousand-club-modal { max-width: 520px; width: 100%; }
.tc-header { text-align: center; margin-bottom: 20px; }
.tc-trophy {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 16px rgba(245,158,11,0.5));
}
.tc-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--gold, #F59E0B);
  letter-spacing: -0.5px;
}
.tc-subtitle { color: var(--text-2); font-size: 15px; margin: 0; }
.tc-subtitle strong { color: var(--brand); }
.video-link {
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 6px;
  transition: background 0.15s;
}
.video-link:hover { background: rgba(99,102,241,0.1); }
.tc-admin-notes {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text-1);
  font-size: 12px;
}

/* === Activity Feed === */
.feed-shell {
  display: grid;
  gap: 12px;
}
.feed-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  /* The scope tabs hold this row alone: the notification bell is a header
     control on every view and viewport (app-feed.md §2a). */
  flex-wrap: nowrap;
}
.notification-list {
  display: grid;
  gap: 2px;
}
.notification-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 8px;
  background: none;
  border: none;
  border-radius: var(--r-md);
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}
.notification-row:hover {
  background: var(--surface-2);
}
.notification-row.is-unread {
  background: rgba(239, 68, 68, 0.06);
}
.notification-row-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.notification-row-line {
  font-size: 14px;
}
.notification-row-preview,
.notification-row-when {
  color: var(--text-2);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification-row-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #EF4444;
}
.notification-empty {
  margin: 0;
  padding: 18px 4px;
  color: var(--text-2);
  font-size: 14px;
  text-align: center;
}
.feed-filters {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.feed-scope-tabs {
  margin-bottom: 0;
}
.feed-scope-tabs .tab {
  text-transform: capitalize;
}
.feed-scroll {
  display: grid;
  gap: 14px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.feed-day-group,
.feed-day-group-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.feed-day-group-header {
  display: block;
  list-style: none;
  font-weight: 700;
  color: var(--text-1);
  padding: 12px 14px;
}
.feed-day-group-body,
.feed-day-group-inner > .feed-day-group-body {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}
.feed-day-group--today {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.feed-day-group--plain,
.feed-day-group-inner.feed-day-group--plain {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.feed-day-group--today > .feed-day-group-header {
  color: var(--text-2);
  font-weight: 600;
  padding: 2px 2px 8px;
}
.feed-day-group--plain > .feed-day-group-header {
  color: var(--text-2);
  font-weight: 600;
  padding: 2px 2px 8px;
}
.feed-day-group--today > .feed-day-group-body {
  padding: 0;
}
.feed-day-group--plain > .feed-day-group-body {
  padding: 0;
}
.feed-session-duration {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 12px;
  color: var(--text-2);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--surface-2);
}
.feed-session-post {
  display: grid;
  gap: 10px;
}
.feed-session-exercises {
  display: grid;
  gap: 8px;
}
/* === Instagram-style feed post: swipeable media carousel === */
.feed-ig-carousel {
  position: relative;
}
.feed-ig-media {
  margin: 10px -14px 0;
  display: flex;
  justify-content: center;
}
.feed-ig-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  background: var(--surface-2);
}
.feed-ig-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  aspect-ratio: 1 / 1;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.feed-ig-track::-webkit-scrollbar {
  display: none;
}
.feed-ig-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  scroll-snap-align: start;
}
.feed-ig-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.feed-ig-slide-workout {
  height: 100%;
  /* No overflow-y here on purpose: a swipeable carousel slide and an
     internal scrollbar fight over the same gesture. The exercise list is
     capped to a preview (see workoutSlidePreviewCount() in feed.js) with a
     "View all" button instead of ever scrolling in place. */
  padding: 14px 42px;
  background: var(--surface-2);
}
.feed-ig-workout-slide-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.feed-ig-workout-slide-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.feed-ig-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.feed-ig-arrow-prev {
  left: 8px;
}
.feed-ig-arrow-next {
  right: 8px;
}
@media (hover: none) {
  .feed-ig-arrow {
    display: none;
  }
}
.feed-ig-arrow.is-hidden {
  display: none;
}
.feed-ig-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 0;
}
.feed-ig-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.feed-ig-dot.active {
  background: var(--brand);
  transform: scale(1.25);
}
.feed-ig-media-tap {
  position: relative;
}
.feed-ig-like-pop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}
.feed-ig-like-pop.is-animating {
  animation: feed-ig-like-pop-anim 0.7s ease;
}
@keyframes feed-ig-like-pop-anim {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; transform: scale(1.15); }
  45% { transform: scale(0.95); }
  65% { transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1); }
}
.feed-ig-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.feed-ig-like-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.feed-ig-like-btn,
.feed-ig-comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-1);
  cursor: pointer;
  line-height: 1;
  transition: transform var(--ease), color var(--ease);
}
.feed-ig-like-btn:hover,
.feed-ig-comment-btn:hover {
  transform: scale(1.06);
}
.feed-ig-like-btn.is-liked {
  color: var(--brand);
}
.feed-ig-like-count,
.feed-ig-comment-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.feed-ig-view-all-exercises {
  width: fit-content;
}
.feed-ig-caption {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-1);
}
.feed-ig-caption-name {
  margin-right: 6px;
}
.feed-ig-caption-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.feed-ig-caption-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-3);
}
.feed-ig-view-all {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
}
.feed-ig-view-all:hover,
.feed-ig-view-all:focus-visible {
  color: var(--text-1);
}
@media (max-width: 920px) {
  .feed-ig-media {
    margin: 10px 0 0;
  }
}
.feed-exercise-card {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
}
.feed-exercise-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.feed-exercise-summary,
.feed-exercise-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-2);
}
.feed-exercise-note {
  color: var(--text-3);
}
.feed-card {
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
}
@keyframes feed-card-pulse {
  0%   { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
  60%  { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
  100% { border-color: var(--border); box-shadow: none; }
}
.feed-card-linked {
  animation: feed-card-pulse 2.5s ease forwards;
}
.feed-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.feed-card-head > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.feed-member {
  color: var(--text-1);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-member-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: color var(--ease);
}
.feed-member-link:hover,
.feed-member-link:focus-visible {
  color: var(--brand);
}
.feed-meta {
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-exercise-link {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: left;
  flex: 1;
  min-width: 0;
}
.feed-exercise-link:hover {
  color: var(--text-1);
}
.feed-media {
  margin-top: 10px;
}
.feed-video {
  width: 100%;
  max-height: 60vh;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: #000;
}
.feed-video-embed {
  aspect-ratio: 16 / 9;
  height: auto;
}
.feed-video-short {
  aspect-ratio: 9 / 16;
  max-height: 70vh;
}
.feed-video-placeholder {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  background: var(--surface-2);
}
.feed-body-placeholder {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-3);
  background: var(--surface-2);
  font-size: 12px;
}
.feed-body-photo-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.feed-body-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  cursor: zoom-in;
}
.feed-summary {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 13px;
}
.feed-note {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 13px;
}
.feed-note-present {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--brand);
  background: var(--brand-dim);
  color: var(--text-1);
}
.feed-note-label {
  font-weight: 700;
  color: var(--brand);
}
.feed-awards {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.feed-awards-summary {
  margin-top: 8px;
}
.feed-awards-summary-caret {
  transition: transform var(--ease);
}
.feed-awards-summary-caret.is-open {
  transform: rotate(180deg);
}
.feed-award-badge {
  cursor: pointer;
  box-shadow: none;
  filter: none;
  min-width: 34px;
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.workout-details-modal {
  max-width: 460px;
  width: 100%;
}
.history-details-modal {
  max-width: 760px;
  max-height: min(86vh, 860px);
  overflow: auto;
}
.workout-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.workout-sets-table-wrap table {
  min-width: 0;
  width: 100%;
}

body.comments-tray-open {
  overflow: hidden;
}

/* === Detail Sheet: exercise details + "view all N exercises", shared chrome
   with the comments tray — a large centered popup (Instagram desktop-modal
   style) at >=921px, a full bottom sheet on mobile. === */
.detail-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(8, 10, 20, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.detail-sheet-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.detail-sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1210;
  width: min(680px, 92vw);
  max-height: min(85vh, 760px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.26s ease;
}
.detail-sheet.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.detail-sheet-handle {
  display: none;
}
/* Grid, not space-between flex, so the title stays centered regardless of
   how wide the close icon and (when present) the Done button are — the
   .detail-sheet-done button only renders for sheets that pass an onDone to
   openReflectionSheet(), see pages/log.js. */
.detail-sheet-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.detail-sheet-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-sheet-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--hint);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
}
.detail-sheet-done {
  justify-self: end;
  padding: 6px 14px;
  font-size: 13px;
}
.detail-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px max(14px, env(safe-area-inset-bottom));
}
body.detail-sheet-open {
  overflow: hidden;
}
@media (max-width: 920px) {
  .detail-sheet {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: none;
    height: min(86vh, 720px);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .detail-sheet.is-visible {
    transform: translateY(0);
  }
  .detail-sheet-handle {
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
}

@media (max-width: 920px) {
  .feed-shell {
    gap: 8px;
  }
  .feed-scroll {
    max-height: none;
    gap: 10px;
    padding-right: 0;
  }
  .feed-topbar {
    align-items: center;
  }
  .feed-topbar .feed-scope-tabs {
    align-self: stretch;
  }
  .feed-topbar .feed-scope-tabs .tab {
    flex: 1;
  }
  .feed-filters {
    flex: 1;
  }
  .feed-day-group > summary,
  .feed-day-group-inner > summary {
    padding: 10px 0;
  }
  .feed-day-group-body,
  .feed-day-group-inner > .feed-day-group-body {
    gap: 8px;
    padding: 0 0 8px;
  }
  .feed-day-group,
  .feed-day-group-inner,
  .feed-card,
  .feed-exercise-card {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .feed-card {
    padding: 10px 0;
  }
  .feed-exercise-card {
    padding: 7px 0;
  }
  .feed-video {
    max-height: 45vw;
    min-height: 160px;
  }
  .feed-video-short {
    max-height: 72vw;
  }
  /* Prevent iOS auto-zoom on comment input focus */
  .comment-textarea { font-size: 16px; }
  /* Always show delete button on touch (no hover state) */
  .comment-delete-btn { opacity: 1; }
  .comment-item {
    transition: transform 0.18s ease;
    touch-action: pan-y;
  }
}

/* === Comments Tray (Instagram-style: full thread + composer, every viewport) === */
.comment-tray-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.comment-tray-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Desktop (>=921px): a large centered popup, post media in focus on the
   left and the comments tray as a fixed-width sidebar on the right —
   Instagram's desktop post-modal, not the old small bottom-anchored card.
   Mobile keeps the full bottom slide-up sheet (see the 920px query below),
   with the media pane hidden — the feed card above the tray already shows
   the post. */
.comment-tray {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 300;
  width: min(935px, 92vw);
  max-height: min(85vh, 800px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.26s ease;
}
.comment-tray.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.comment-tray-media {
  flex: 1 1 58%;
  min-width: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comment-tray-media .feed-ig-carousel {
  width: 100%;
}
.comment-tray-media .feed-ig-media {
  margin: 0;
}
.comment-tray-media .feed-ig-frame {
  max-width: 100%;
}
.comment-tray-panel {
  flex: 1 1 42%;
  min-width: 340px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.comment-tray-handle {
  display: none;
}
.comment-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.comment-tray-header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.comment-tray-post-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.comment-tray-post-head-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.comment-tray-post-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.comment-tray-post-time {
  font-size: 11px;
  color: var(--hint);
}
.comment-tray-label {
  display: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
}
.comment-tray-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--hint);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comment-tray-context {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.comment-tray-context p {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comment-tray-view-post {
  min-height: 44px;
  color: var(--text-1);
}
.comments-tray-list {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 12px 16px;
}
.comment-tray-body {
  position: relative;
  padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.comment-tray-compose-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.comment-tray-textarea {
  width: auto;
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  resize: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  padding: 9px 10px;
  font-family: inherit;
}
.comment-tray-mention-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 16px;
  right: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
  z-index: 310;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
}
.comment-tray-post-btn {
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
  flex-shrink: 0;
}
@media (max-width: 920px) {
  .comment-tray {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: none;
    height: min(86vh, 720px);
    border-radius: 18px 18px 0 0;
    flex-direction: column;
    transform: translateY(100%);
  }
  .comment-tray.is-visible {
    transform: translateY(0);
  }
  .comment-tray-media {
    display: none;
  }
  .comment-tray-panel {
    max-width: none;
    min-width: 0;
    flex: 1;
    min-height: 0;
  }
  .comment-tray-post-head {
    display: flex;
  }
  .comment-tray-label {
    display: inline;
  }
  .comment-tray-handle {
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  .comment-tray-textarea {
    font-size: 16px; /* Prevent iOS auto-zoom on focus */
    max-height: min(120px, calc(var(--tray-avail-h, 60vh) - 170px));
  }
}

/* === Log workout: Save/Update + Notes row, and the notes tray ===
   One row, every viewport: the save (or "Update …" while editing) is the
   primary action at three quarters of the width, Notes the secondary one at
   a quarter. Notes opens the feed's comment tray chrome (`.comment-tray`
   above) with no media pane and no thread — just the compose row. See
   docs/design-specification/log-workout-entry.md. */
.log-submit-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 8px;
}
.log-submit-row .log-submit-btn {
  flex: 0 0 calc(75% - 4px);
  min-width: 0;
  min-height: 44px;
  white-space: normal;
}
.log-submit-row .log-notes-btn {
  flex: 0 0 calc(25% - 4px);
  min-width: 0;
  min-height: 44px;
  padding-left: 8px;
  padding-right: 8px;
}
.log-notes-btn.has-notes {
  color: var(--text-1);
  border-color: var(--brand);
}
@media (min-width: 921px) {
  .comment-tray.log-notes-tray {
    width: min(480px, 92vw);
  }
}
.log-notes-tray .comment-tray-panel {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}
/* The tray's title shows on every viewport here: there is no post-head to
   stand in for it on desktop. */
.log-notes-tray .comment-tray-label {
  display: inline;
}
.log-notes-tray .comment-tray-body {
  border-top: none;
}
.log-notes-tray .comment-tray-textarea {
  min-height: 88px;
}
@media (max-width: 920px) {
  /* A note has no thread above it, so the sheet is only as tall as its
     composer rather than the comment tray's 86vh. */
  .comment-tray.log-notes-tray {
    height: auto;
    max-height: 86vh;
  }
}

/* === Badge Earned Popup === */
.badge-popup-modal {
  max-width: 480px;
  width: 100%;
  text-align: center;
}
.badge-popup-header {
  margin-bottom: 20px;
}
.badge-popup-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.badge-popup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--r-md);
  min-width: 120px;
  max-width: 160px;
  text-align: center;
  animation: badgeCardIn 0.3s cubic-bezier(0.2,0,0.1,1) forwards;
}
@keyframes badgeCardIn {
  from { opacity:0; transform:scale(0.85) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* ================================================================
   Activity Feed Interactions: Reactions, Comments, @Mentions
   ================================================================ */

.feed-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: color var(--ease), background var(--ease);
}
.feed-action-btn:hover {
  color: var(--text-1);
  background: var(--surface-2);
}

/* Comments section */
.comments-section {
  margin-top: 8px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
}
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.comments-empty {
  padding: 6px 0;
}
.comment-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 7px;
}
.comment-meta {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.comment-author {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--ease);
  text-decoration: none;
}
.comment-author:hover {
  color: var(--brand);
}
.comment-time {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.comment-reply-btn {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.comment-reply-btn:hover,
.comment-reply-btn:focus-visible {
  text-decoration: underline;
}
.comment-body {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 0 33px;
  line-height: 1.5;
  word-break: break-word;
}
.comment-delete-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  padding: 3px;
  border-radius: 4px;
  opacity: 0.55;
  transition: color var(--ease), opacity var(--ease);
  flex-shrink: 0;
}
.comment-item:hover .comment-delete-btn,
.comment-item:focus-within .comment-delete-btn {
  opacity: 1;
}
.comment-delete-btn:hover {
  color: var(--red);
}

/* @mention highlight */
.mention {
  color: var(--brand);
  font-weight: 600;
}
.mention-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.mention-link:hover,
.mention-link:focus-visible {
  text-decoration-color: var(--brand);
}

/* Comment input area */
.comment-input-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.comment-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.comment-mention-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
.comment-textarea {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  resize: none;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.4;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 9px 10px;
}
.comment-post-btn {
  padding: 9px 14px;
  font-size: 14px;
  flex-shrink: 0;
}


/* @mention dropdown */
.mention-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 50;
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-1);
  font-size: 13px;
  text-align: left;
  transition: background var(--ease);
}
.mention-item:hover {
  background: var(--surface-2);
}
.mention-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.mention-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
}

/* === Onboarding Tour === */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
}

.tour-tooltip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 20px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
}

.tour-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tour-progress {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.tour-skip {
  font-size: 12px !important;
  padding: 3px 8px !important;
  color: var(--text-3) !important;
  border-color: transparent !important;
}
.tour-skip:hover { color: var(--text-2) !important; }

.tour-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 8px;
  line-height: 1.3;
}

.tour-body {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 16px;
}

.tour-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tour-footer-spacer { flex: 1; }

.tour-prev {
  font-size: 13px !important;
  padding: 6px 12px !important;
}

.tour-next {
  min-width: 72px;
}

/* Birthday confetti celebration */
.birthday-confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.birthday-confetti-piece {
  position: absolute;
  top: -60px;
  animation: birthdayFall linear forwards;
  user-select: none;
  line-height: 1;
}

@keyframes birthdayFall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(720deg) scale(0.6);
    opacity: 0;
  }
}

.birthday-toast {
  background: linear-gradient(135deg, #FA0005, #ff8c00) !important;
  font-weight: 700;
  font-size: 15px;
}

.feed-birthday-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(250,0,5,0.15), rgba(255,140,0,0.12));
  border: 1px solid rgba(255,140,0,0.35);
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  color: #ff8c00;
}

.feed-birthday-banner-sub {
  font-weight: 400;
  font-size: 13px;
  color: #cfcfcf;
}

/* ─── Routines ─────────────────────────────────────────────────────────────── */

.routine-list-item {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
}

.routine-list-info { min-width: 0; overflow-wrap: anywhere; }
.routine-list-name { font-weight: 600; font-size: 16px; color: var(--text-1); }
/* An assigned copy (coach-mode.md Phase 6): who it is from, in words, and each exercise's prescription. */
.routine-from-coach { background: var(--brand-dim); color: var(--brand); border: 1px solid var(--brand); font-size: 11px; font-weight: 700; vertical-align: middle; }
.routine-prescription { display: block; font-size: 13px; color: var(--text-2); }
.routine-list-meta { font-size: 14px; margin-top: 4px; color: var(--text-2); }
/* A coach routine's dates or pause (coach-mode.md §27): ink, never a warning colour. */
.routine-list-window { font-size: 13px; margin: 4px 0 0; color: var(--text-2); }
.routine-list-window.is-closed { color: var(--text-1); font-weight: 600; }
.routine-list-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.routine-list-details { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.routine-list-details > summary {
  min-height: 44px;
  align-content: center;
  cursor: pointer;
  color: var(--text-1);
}
.routine-list-details ol { padding-left: 24px; }
.routine-list-coaching { white-space: pre-wrap; }
.routine-list-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Routine queue in session shell */

.routine-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.routine-queue-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.routine-queue-clear {
  font-size: 12px;
}

/* Several started routines stack, one card each (log-workout-entry.md). */
.routine-queue {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.routine-queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.routine-queue-item:last-child {
  border-bottom: none;
}

.routine-queue-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.routine-queue-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}

/* ─── Rest bar (log-workout-entry.md §8) ─────────────────────────────────────
   A countdown ring, the time, Start or Skip, then 1:00 · 2:00 · 3:00 · Custom
   and a 15-second stepper. Docked above Save on the exercise page; on the
   Workouts page only while a rest runs. */

.rest-bar {
  display: grid;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px 12px;
  margin: 4px 0 12px;
}
.rest-bar.is-running { border-color: rgba(var(--brand-rgb), 0.45); }
.rest-bar-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.rest-ring { width: 48px; height: 48px; }
.rest-ring circle { fill: none; stroke-width: 5; }
.rest-ring-track { stroke: var(--surface-3); }
.rest-ring-value {
  stroke: var(--brand);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s linear;
}
.rest-bar-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rest-bar-count {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.rest-bar-count.rest-timer-running { color: var(--brand); }
.rest-bar-start,
.rest-bar-skip { min-height: 44px; min-width: 72px; }
.rest-seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.rest-seg button {
  min-height: 44px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.rest-seg button[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--text-1);
  box-shadow: 0 0 0 1px var(--border);
}
.rest-custom {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 8px;
}
.rest-custom[hidden] { display: none; }
.rest-custom button { min-height: 44px; }
.rest-custom-value {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .rest-ring-value { transition: none; }
}

/* ─── Routine status badge ───────────────────────────────────────────────────── */

.routine-status-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(var(--brand-rgb, 99,102,241), 0.15);
  color: var(--brand);
  vertical-align: middle;
}

.routine-queue-item--done .routine-queue-item-name {
  color: var(--text-2);
  text-decoration: line-through;
  text-decoration-color: var(--text-3, var(--text-2));
}

.routine-done-check {
  color: var(--brand);
  font-style: normal;
}

/* ─── Set last session hint button ───────────────────────────────────────────── */

.set-last-session-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  color: var(--brand);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.set-last-session-btn:hover {
  opacity: 0.75;
}

/* ─── Weight history modal ───────────────────────────────────────────────────── */

.wh-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.wh-header-row .modal-title {
  margin-bottom: 0;
}

.wh-full-history-btn {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.wh-full-history-btn:hover {
  opacity: 0.75;
}

.wh-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 340px;
  overflow-y: auto;
}

.wh-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wh-row-top {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.wh-row:last-child {
  border-bottom: none;
}

.wh-date {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  min-width: 100px;
}

.wh-sets {
  font-size: 13px;
  color: var(--text-1);
  flex: 1;
}

.wh-notes {
  font-size: 12px;
  color: var(--text-2);
  font-style: italic;
}

.wh-row-footer {
  display: flex;
  justify-content: flex-end;
}

.wh-view-workout-btn {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wh-view-workout-btn:hover {
  opacity: 0.75;
}

/* ─── Full exercise history modal ────────────────────────────────────────────── */

.fh-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.fh-sort-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  padding: 3px 10px;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.fh-sort-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.fh-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 440px;
  overflow-y: auto;
}

.fh-entry {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.fh-entry:last-child {
  border-bottom: none;
}

.fh-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
}

.fh-sets {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fh-set {
  font-size: 13px;
  color: var(--text-1);
}

.fh-e1rm {
  font-size: 12px;
  color: var(--text-2);
}

/* ─── Session workout modal ──────────────────────────────────────────────────── */

.sw-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 400px;
  overflow-y: auto;
}

.sw-exercise {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.sw-exercise:last-child {
  border-bottom: none;
}

.sw-exercise-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
}

.sw-sets {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sw-set {
  font-size: 13px;
  color: var(--text-1);
}

.sw-cardio-meta {
  font-size: 13px;
  color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP-STYLE EXERCISE ENTRY (Titan-inspired redesign)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Exercise entry header ──────────────────────────────────────────────── */

.ex-entry-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 10px;
}

.ex-header-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}

.ex-header-btn:hover {
  background: var(--surface-hover);
  color: var(--text-1);
}

.ex-header-confirm-btn {
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), 0.4);
  background: var(--brand-dim);
  font-size: 16px;
  font-weight: 700;
}

.ex-header-confirm-btn:hover {
  background: rgba(var(--brand-rgb), 0.2);
}

.ex-header-center {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.ex-header-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ex-header-sub-btns {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ex-header-change-btn {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background var(--ease);
  letter-spacing: 0.2px;
}

.ex-header-change-btn:hover {
  background: var(--brand-dim);
}

/* ─── Compact type toggle ────────────────────────────────────────────────── */

.type-toggle-sm {
  margin: 0 0 12px;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
}

.type-toggle-sm .type-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: var(--surface-2);
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}

.type-toggle-sm .type-btn.active {
  background: var(--surface-3);
  color: var(--text-1);
}

/* ─── New-style set rows (NSR) ───────────────────────────────────────────── */

.set-row.nsr {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color var(--ease);
}

.nsr-main {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.nsr-num-col {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  background: var(--surface-3);
  border-right: 1px solid var(--border-subtle);
}

.nsr-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}

.nsr-body {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
}

.nsr-hint-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  min-height: 16px;
}

.nsr-e1rm {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

.nsr-e1rm strong {
  color: var(--brand);
  font-size: 11px;
}

.nsr-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nsr-weight {
  width: 80px;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  text-align: center;
}

.nsr-weight:focus {
  border-color: var(--brand);
  outline: none;
}

.nsr-reps-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  max-width: 140px;
}

.nsr-step-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-1);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--ease);
  font-weight: 300;
}

.nsr-step-btn:hover {
  background: var(--surface-hover);
}

.nsr-reps-input {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  background: transparent;
  border: none;
  padding: 4px 4px;
}

.nsr-reps-input:focus {
  outline: none;
  background: var(--surface-3);
  border-radius: 4px;
}

/* ─── NSR set controls (+/- row) ────────────────────────────────────────── */

.nsr-set-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 8px 0 12px;
}

.nsr-ctrl-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ease);
}

.nsr-ctrl-btn:hover {
  background: var(--surface-hover);
}

.nsr-ctrl-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ─── NSR failure row (matches existing behaviour) ───────────────────────── */

.set-row.nsr .set-failure-row {
  padding: 4px 10px 8px 10px;
  border-top: 1px solid var(--border-subtle);
}

/* ─── Hide old set-row styles when using NSR ────────────────────────────── */

.set-row.nsr .set-row-header,
.set-row.nsr .set-row-inputs {
  display: none;
}

/* ─── Games ──────────────────────────────────────────────────────────────── */

.games-hub { padding: 20px; max-width: 1000px; margin: 0 auto; }
.games-hub-head { margin-bottom: 16px; }
.games-hub-head h2 { margin: 0 0 8px 0; font-size: 24px; }
.games-hub-head .hint { margin: 0; }

.games-hub-tabs { margin-bottom: 20px; }

.games-timer-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.games-timer-row .hint { white-space: nowrap; }
.games-timer-row .pill-btn { padding: 6px 14px; font-size: 12px; }

.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.game-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); cursor: pointer; transition: all var(--ease); }
.game-card:hover { border-color: var(--brand); background: var(--surface-3); transform: translateY(-1px); }
.game-card-icon { width: 56px; height: 56px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.game-icon-flappy { background: linear-gradient(135deg, #38bdf8, #0369a1); }
.game-icon-snake { background: linear-gradient(135deg, #4ade80, #166534); }
.game-icon-pong { background: linear-gradient(135deg, #a78bfa, #4c1d95); }
.game-icon-tetris { background: linear-gradient(135deg, #fb923c, #7c2d12); }
.game-icon-pacman { background: linear-gradient(135deg, #fde047, #854d0e); }
.game-card-body { flex: 1; }
.game-card-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.game-card-best { font-size: 12px; color: var(--brand); margin-top: 6px; font-weight: 600; }

.games-bests { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.games-bests-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-2); margin-bottom: 12px; }
.games-bests-list { display: grid; gap: 8px; }
.games-bests-row { display: flex; justify-content: space-between; padding: 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; }
.games-bests-row strong { color: var(--brand); }

.game-view { display: flex; flex-direction: column; gap: 12px; padding: 0; height: 100%; }
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.game-header .game-back-btn { flex-shrink: 0; }
.game-header .game-title { flex: 1; font-weight: 600; text-align: center; }
.game-header div { font-size: 13px; white-space: nowrap; }

.game-canvas-wrap { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 300px; background: #000; border-radius: 0; overflow: hidden; }
.game-canvas { display: block; width: 100%; height: 100%; }

.game-timer-hud { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(0,0,0,0.6); border-radius: var(--r-md); color: white; font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,0.2); }
.game-timer-hud svg { width: 12px; height: 12px; }
.game-timer-display { font-family: 'Courier New', monospace; }
.gtimer-up { color: #ff6b6b; }

.game-hint { margin: 0; padding: 12px 16px; font-size: 12px; border-top: 1px solid var(--border); text-align: center; }

.game-dpad { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 16px; }
.game-dpad > div { display: flex; gap: 8px; }
.dpad-btn { width: 48px; height: 48px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-1); font-size: 18px; cursor: pointer; transition: all var(--ease); }
.dpad-btn:active { background: var(--brand); border-color: var(--brand); color: white; }

@media (max-width: 768px) {
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .dpad-btn { width: 44px; height: 44px; font-size: 16px; }
}

/* Web sign-in follows the native Android login layout. Scoped to auth only. */
.shell-guest:has(.auth-native-layout) > .main > .top,
.shell-guest:has(.auth-native-layout) > .main > .hint { display: none; }
.shell-guest:has(.auth-native-layout) > .main { padding: 0; }
#authView.active:has(.auth-native-layout) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 0 10px 24px;
}
.auth-native-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 520px;
  min-height: 42px;
  padding: 10px 0;
}
.auth-native-header img { width: 152px; max-width: 55vw; height: 24px; object-fit: contain; }
.auth-container.auth-native-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.auth-native-layout .auth-hero {
  background: var(--surface-2);
  min-height: 0;
  padding: 28px 24px;
  text-align: center;
  align-items: center;
}
.auth-native-layout .auth-hero::before { display: none; }
.auth-native-layout .auth-hero-brand { margin: 0 0 14px; }
.auth-native-layout .auth-hero-brand .brand-logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
  margin-inline: auto;
}
.auth-native-layout .auth-hero-content { padding-top: 0; width: 100%; }
.auth-native-layout .auth-badge {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0;
}
.auth-native-layout .auth-badge svg { display: none; }
.auth-native-layout .auth-hero h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin: 0 0 18px;
}
.auth-native-layout .auth-hero p {
  font-size: 14px;
  line-height: 1.35;
  max-width: 400px;
  margin: 0 auto;
}
.auth-native-layout .auth-form-panel { padding: 28px 24px; gap: 16px; }
.auth-native-layout .auth-form-panel h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.auth-native-layout .auth-form-panel > .auth-eligibility {
  font-size: 13px;
  line-height: 1.3;
  margin: 0;
}
.auth-native-layout .tabs {
  display: flex;
  background: var(--surface-2);
  padding: 4px;
  border: 0;
  border-radius: 0;
  margin: 0 0 10px;
  gap: 4px;
}
.auth-native-layout .tabs .tab {
  flex: 1;
  min-height: 36px;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.auth-native-layout .tabs .tab.active { background: var(--surface); color: var(--text-1); }
.auth-native-layout #loginForm > label:not(.checkbox-row) { font-size: 12px; color: var(--text-2); }
.auth-native-layout input:not([type=checkbox]):not([type=hidden]) { min-height: 48px; }
.auth-native-layout a:focus-visible,
.auth-native-layout button:focus-visible { outline: 2px solid var(--text-1); outline-offset: 3px; }
.auth-native-header .brand-logo-light,
.auth-native-layout .brand-logo-light { display: none; }
html[data-theme="light"] .auth-native-header .brand-logo-dark,
html[data-theme="light"] .auth-native-layout .brand-logo-dark { display: none; }
html[data-theme="light"] .auth-native-header .brand-logo-light,
html[data-theme="light"] .auth-native-layout .brand-logo-light { display: block; }

/* Shared app branding, matching the native header. */
.sidebar .brand { align-items: center; text-align: center; }
.sidebar .brand .brand-logo { margin-inline: auto; }
.top { gap: 12px; }
.top .page-title-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.app-header-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.app-header-brand img { width: 110px; max-width: 100%; height: 28px; object-fit: contain; }
.top #startWorkoutBtn { flex-shrink: 0; }
@media (max-width: 480px) {
  .app-header-brand img { width: 100px; height: 27px; }
  .top { gap: 8px; }
}

/* === Mobile header actions (<=920px) ===
   The sidebar (and its account button) is hidden on phones, so the header's
   top-right corner carries the avatar, which opens My Profile, and — for
   admins only — the Admin gear. Both replaced tray entries; see
   docs/design-specification/app-shell-navigation.md. Desktop keeps the
   sidebar account button and never shows this cluster. */
.mobile-header-actions {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.mobile-header-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;   /* 44pt tap target, matching the native header avatar */
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--ease), background var(--ease);
}
.mobile-header-btn svg { width: 22px; height: 22px; opacity: 0.8; }
.mobile-header-btn:hover,
.mobile-header-btn.active { color: var(--brand); background: var(--brand-dim); }
.mobile-header-btn:hover svg,
.mobile-header-btn.active svg { opacity: 1; }
.mobile-profile-btn .user-avatar { width: 34px; height: 34px; font-size: 13px; }
.mobile-profile-btn.active .user-avatar { box-shadow: 0 0 0 2px var(--brand); }
.mobile-header-btn .profile-incomplete-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  margin: 0;
}
/* The notification bell: a header action rather than a nav button, so it
   carries the unread count itself instead of the Feed item's plain dot.
   See docs/design-specification/app-feed.md §2a. */
/* The slot is rendered into by app.js; `contents` keeps the button itself as
   the flex item, so the cluster's gap spaces it like the other two. */
#mobileHeaderActionSlot { display: contents; }
/* Desktop's bell: in the page header on every view, pushed right, before the
   Log Workout button (app-feed.md §2a). Phones use the cluster above. */
.desktop-header-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.mobile-header-action svg { width: 24px; height: 24px; }
/* .mobile-header-btn sets display, which would otherwise beat [hidden]. */
.mobile-header-btn[hidden] { display: none; }
.mobile-header-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #EF4444;
  border: 2px solid var(--surface);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
}

@media (max-width: 920px) {
  /* The ribbon's "Log Workout" CTA is redundant with the tray's centre Log button. */
  .top #startWorkoutBtn { display: none; }
  .mobile-header-actions { display: flex; }
  .desktop-header-actions { display: none; }

  /* Raised centre Log button: logging is the app's main data point, so it
     reads as the tray's primary action instead of one tab among five. */
  .mobile-nav .nav-btn--primary,
  .mobile-nav .nav-btn--primary:hover,
  .mobile-nav .nav-btn--primary.active { background: transparent; }
  .mobile-nav .nav-btn--primary svg {
    width: 26px;
    height: 26px;
    box-sizing: content-box;
    padding: 15px;                  /* 56px circle */
    margin-top: -28px;              /* lifts the circle above the tray edge */
    border-radius: 50%;
    color: #fff;
    opacity: 1;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    border: 3px solid var(--surface);
    box-shadow: 0 6px 18px var(--brand-glow);
    transition: transform var(--ease), box-shadow var(--ease), filter var(--ease);
  }
  .mobile-nav .nav-btn--primary:active svg { transform: scale(0.96); }
  .mobile-nav .nav-btn--primary.active svg {
    filter: brightness(1.08);
    box-shadow: 0 0 0 3px var(--brand-dim), 0 6px 18px var(--brand-glow);
  }
  .mobile-nav .nav-btn--primary [data-nav-label] { font-weight: 700; }
  .mobile-nav .nav-btn--primary.active [data-nav-label] { color: var(--brand); }
}

/* Keep awards identifiable even on devices missing a particular emoji glyph. */
.feed-award-badge { gap: 6px; border-radius: 999px; }
.feed-award-icon { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.feed-award-name { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 11px; line-height: 1.25; }

/* Shared community support: the same compact surfaces, wording and order on web/native. */
.support-menu-trigger { flex-shrink:0; min-width:44px; min-height:44px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--text-2); font:700 24px/1 sans-serif; cursor:pointer; }
.support-menu-trigger:hover,.support-menu-trigger:focus-visible { background:var(--surface-2); color:var(--text-1); outline:2px solid var(--brand); outline-offset:2px; }
.support-overlay { position:fixed; inset:0; z-index:20000; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; padding:18px; }
.support-dialog { width:min(480px,100%); max-height:85dvh; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 20px 70px #0006; color:var(--text-1); }
.support-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.support-dialog h3 { font-size:18px; margin:0; }
.support-dialog p { font-size:14px; line-height:1.55; margin:0 0 14px; }
.support-close { min-width:44px; min-height:44px; font-size:24px; }
.support-options { display:grid; gap:8px; }
.support-options button { text-align:left; min-height:48px; font-size:14px; }
.support-reasons { display:grid; gap:8px; padding:0; margin:16px 0; border:0; }
.support-reason { display:flex; flex-direction:row; align-items:center; gap:12px; padding:12px; min-height:44px; border:1px solid var(--line); border-radius:8px; font-size:14px; cursor:pointer; }
.support-reason:has(input:checked) { border-color:var(--brand); background:var(--surface-2); }
.support-reason input { width:20px; height:20px; flex:0 0 20px; margin:0; }
.support-details-label { display:grid; gap:8px; font-size:14px; }
.support-details-label textarea { width:100%; box-sizing:border-box; font:inherit; resize:vertical; }
.support-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.support-actions button { min-height:44px; font-size:14px; }
.support-error { color:var(--red,#ef4444); white-space:pre-wrap; }
.support-error:empty { display:none; }
.support-blocked-row { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); }
.support-blocked-row p { margin:4px 0 0; }
.support-report-card { margin-bottom:16px; }
.support-report-card pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:260px; overflow:auto; padding:12px; background:var(--surface-2); font-size:13px; }
.support-report-card form { display:grid; gap:10px; }
.support-report-card textarea { width:100%; box-sizing:border-box; }
.support-report-card details { margin:12px 0; }
.support-filters { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
/* Removal requests (admin-console.md §9): table first, the answer in a pop-up. */
.removal-requests { margin-bottom:16px; }
.removal-requests .removal-location { max-width:36ch; overflow-wrap:anywhere; }
.removal-requests .removal-overdue td:first-child strong { color:var(--brand); }
.removal-details { display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:0 0 12px; }
.removal-details dt { font-weight:700; }
.removal-details dd { margin:0; overflow-wrap:anywhere; }
.removal-location-full { white-space:pre-wrap; }
.support-dialog button:disabled { opacity:.55; cursor:wait; }

.support-dialog .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Native app host (?embed=native): the page renders inside the native app's
   own header and bottom tray (see cross-platform-parity.md §6), so the web
   shell's own copies of both would read as a second navigation bar stacked
   on top of the native one. The sidebar is already hidden at this width by
   the existing <=920px mobile rules; only the top header and bottom tray
   need suppressing here. Gated on the embed-native class app.js sets from
   the ?embed=native query parameter, never on user-agent sniffing, so the
   same URL opened in a real mobile browser is unaffected. */
html.embed-native header.top,
html.embed-native #mobileNav,
html.embed-native .app-legal-footer { display: none !important; }

/* === Account drawer (<=920px) ===
   The slide-out panel the header avatar opens. Identity at the top, then My
   Profile's sections as vertical links — they stopped being a horizontal tab
   strip on phones — then, under a divider, the account controls the desktop
   sidebar keeps in its account dropdown. The native app draws the same panel
   from the same contract. See
   docs/design-specification/app-shell-navigation.md §5. */
.account-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.55);
}
.account-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  width: min(84vw, 340px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-right: 1px solid var(--border);
  /* Starts off-canvas so .open animates it in; the shell adds that class on
     the frame after the panel is unhidden. */
  transform: translateX(-100%);
  transition: transform var(--ease-out);
}
.account-drawer.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .account-drawer { transition: none; }
}
body.account-drawer-open { overflow: hidden; }

.account-drawer-identity { padding: 4px 18px 16px; }
.account-drawer-avatar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.account-drawer-avatar,
.account-drawer-avatar-img,
.account-drawer-avatar-initials {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.account-drawer-avatar-img { object-fit: cover; }
.account-drawer-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--brand);
  font-size: 20px;
  font-weight: 700;
}
.account-drawer-close {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.account-drawer-close svg { width: 20px; height: 20px; }
.account-drawer-close:hover { color: var(--text-1); background: var(--surface-2); }
.account-drawer-name { font-size: 20px; font-weight: 800; color: var(--text-1); }
.account-drawer-role { font-size: 13px; color: var(--text-2); text-transform: capitalize; }
.founding-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 2px 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--gold); background: var(--gold-dim);
  border: 1px solid var(--gold); border-radius: var(--r-full);
}
.founding-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
/* Membership plan (membership-billing.md §9): the member's own badge, never another member's. */
.account-drawer-badges, .profile-hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.account-drawer-badges:empty, .profile-hero-badges:empty { display: none; }
.account-drawer-badges .founding-badge, .profile-hero-badges .founding-badge { margin-top: 6px; }
.plan-badge {
  display: inline-flex; align-items: center;
  margin-top: 6px; padding: 2px 9px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.3px;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-full);
}
.plan-badge[data-plan="plus"] { color: var(--brand); border-color: var(--brand); background: var(--brand-dim); }
.plan-badge[data-plan="plus_ai"] { color: var(--info); border-color: var(--info); background: var(--surface-2); }
.account-drawer-stats { display: flex; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.account-drawer-stat strong { color: var(--text-1); font-weight: 700; }

.account-drawer-group { display: flex; flex-direction: column; }
.account-drawer-divider {
  height: 1px;
  margin: 10px 18px;
  background: var(--border);
}
.account-drawer-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 52px;          /* comfortably past the 44px tap minimum */
  padding: 12px 18px;
  border: none;
  background: transparent;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.account-drawer-link svg { width: 24px; height: 24px; flex-shrink: 0; opacity: 0.85; }
.account-drawer-link:hover { background: var(--surface-2); }
.account-drawer-link.active { color: var(--brand); }
.account-drawer-link.active svg { opacity: 1; }
.account-drawer-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* The account group below the divider reads as secondary, the way the X-style
   panel keeps settings and help quieter than the destinations above it. */
.account-drawer-group[data-drawer-group="account"] .account-drawer-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}
.account-drawer-group[data-drawer-group="account"] .account-drawer-link:hover { color: var(--text-1); }
.account-drawer-link--danger,
.account-drawer-group[data-drawer-group="account"] .account-drawer-link--danger { color: var(--red); }
.account-drawer-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.account-drawer-dot { margin-left: auto; }

/* === My Profile's mobile section bar (<=920px) ===
   The profile shows one section at a time on a phone; this names it and
   reopens the drawer. Desktop keeps the tab strip and never shows this. */
.profile-section-bar { display: none; align-items: center; gap: 6px; margin-bottom: 12px; }
.profile-section-menu {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.profile-section-menu svg { width: 22px; height: 22px; }
.profile-section-menu:hover { color: var(--brand); background: var(--brand-dim); }
.profile-section-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-1); }

@media (max-width: 920px) {
  .profile-section-bar { display: flex; }
  /* The drawer is the switcher on a phone; a tab strip beside it would be a
     second one. */
  #profileView .profile-main-tabs { display: none; }
  /* The identity block belongs to the drawer here, so only Overview — the
     section that is about the member's own numbers — repeats it. */
  #profileView[data-profile-section]:not([data-profile-section="overview"]) .profile-hero { display: none; }
}
/* Inside the native host the native drawer is the switcher and the native
   header carries the avatar, so the web section bar would be a second one. */
html.embed-native .profile-section-bar { display: none; }

/* === Feedback sheet ===
   Leaving feedback is the same gesture as leaving a comment, so it uses the
   feed comment tray's shape (`.comment-tray` above): a bottom slide-up sheet
   with a grab handle on a phone, a centred card on desktop, behind the same
   fading backdrop. The native app opens its own bottom sheet
   (`ClubPage.ShowSheet`) for the same reason. See
   docs/design-specification/app-shell-navigation.md §5. */
.feedback-sheet-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.feedback-sheet-backdrop.is-visible { opacity: 1; pointer-events: auto; }
.feedback-sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 300;
  width: min(480px, 92vw);
  max-height: min(85vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.26s ease;
}
.feedback-sheet.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.feedback-sheet-handle { display: none; }
.feedback-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.feedback-sheet-header h3 { margin: 0; font-size: 17px; }
.feedback-sheet-close {
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
}
.feedback-sheet-close:hover { color: var(--text-1); background: var(--surface-2); }
.feedback-sheet-body {
  padding: 14px 16px max(14px, env(safe-area-inset-bottom));
  overflow-y: auto;
  min-height: 0;
}
.feedback-sheet-body .hint { margin: 0 0 12px; }
.feedback-sheet-body textarea { resize: vertical; }
.feedback-sheet-actions { display: flex; gap: 10px; margin-top: 4px; }
.feedback-sheet-actions button { min-height: 44px; }

@media (max-width: 920px) {
  .feedback-sheet {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: none;
    height: auto;
    max-height: 86vh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    transform: translateY(100%);
  }
  .feedback-sheet.is-visible { transform: translateY(0); }
  /* The grab handle is what says "drag me down" on a phone, the same cue the
     comment tray gives. */
  .feedback-sheet-handle {
    display: block;
    width: 38px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: var(--r-full);
    background: var(--border);
    flex-shrink: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-sheet, .feedback-sheet-backdrop { transition: none; }
}
body.feedback-sheet-open { overflow: hidden; }

/* Quick add: the sheet the tray's centre + opens (app-shell-navigation.md §3b).
   Feedback-sheet chrome; one 56px row per action, the current tab's row first
   and marked by a border, never by colour alone (it is also first). */
.quick-add-list { display: grid; gap: 8px; padding-bottom: 6px; }
.quick-add-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 10px 12px; border-radius: var(--r-lg); border: 1px solid transparent;
  background: var(--surface-2); color: var(--text-1); text-align: left; cursor: pointer;
  font: inherit; transition: background var(--ease), border-color var(--ease);
}
.quick-add-row:hover { background: var(--surface-hover); }
.quick-add-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.quick-add-row.is-lead { border-color: var(--border); background: var(--surface-3); }
.quick-add-icon {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface); color: var(--text-1);
}
.quick-add-icon svg { width: 20px; height: 20px; }
.quick-add-text { display: grid; gap: 2px; min-width: 0; }
.quick-add-text strong { font-size: 15px; font-weight: 600; }
.quick-add-text small { font-size: 12.5px; color: var(--text-2); }

/* Admin → Exercise Data Manager. Forms live in dialogs (.ex-admin-dialog),
   never inline on the page — see exercises-admin.js. */
.ex-admin { margin-top: 20px; }
.ex-admin h3 { margin: 0 0 12px; }
.ex-admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ex-admin-toolbar { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ex-admin-toolbar input[type="search"] { flex: 1; min-width: 0; }
.ex-admin-toolbar .hint, .ex-admin-panel > .hint { margin: 0 0 10px; }
.ex-admin-list { display: grid; gap: 8px; }
.ex-admin-list-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 10px; }
.ex-admin-dup-group { display: grid; gap: 6px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.ex-admin-dup-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ex-admin-dup-badge { white-space: nowrap; }
.ex-admin-dup-group .admin-actions { align-items: center; }
.ex-admin-dup-very-likely { background: var(--red-dim); color: var(--red); }
.ex-admin-dup-likely { background: var(--gold-dim); color: var(--gold); }
.ex-admin-dup-possible { background: var(--surface-2); color: var(--text-2); }
.ex-admin-empty { text-align: center; color: var(--text-3); }
.ex-admin-dialog { width: min(460px, 100%); }
.ex-admin-dialog-form { display: grid; gap: 10px; margin-top: 8px; }
.ex-admin-dialog-form .hint { margin: 0; }
.ex-admin-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.ex-admin-preview summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
.ex-admin-preview ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.ex-admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ex-admin-stat { display: grid; gap: 2px; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 10px; }
.ex-admin-stat strong { font-size: 18px; }
.ex-admin-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ex-admin-recent li { border-bottom: 1px solid var(--border-subtle); padding-bottom: 8px; }
.ex-admin-tabs .primary .hint { color: inherit; opacity: 0.8; }
.ex-admin-toolbar select { flex: 0 0 auto; width: auto; min-width: 180px; }
/* Muscles tab and its dialog (muscle-map-admin.js). */
.ex-admin-muscle-flag { white-space: nowrap; }
.ex-admin-muscle-credit { margin-top: 10px; }
.ex-admin-muscle-dialog { width: min(720px, 100%); max-height: 90vh; overflow-y: auto; }
.ex-admin-muscle-warning { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--red-dim); color: var(--red); font-size: 14px; }
.ex-admin-muscle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ex-admin-muscle-region { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 6px 10px 10px; margin: 0; display: grid; gap: 6px; }
.ex-admin-muscle-region legend { padding: 0 4px; font-weight: 600; font-size: 13px; color: var(--text-2); }
.ex-admin-muscle-pick { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 13px; }
.ex-admin-muscle-pick select { width: auto; min-width: 104px; }
.ex-admin-muscle-error:not([hidden]) { color: var(--red); }

/* WOD (workout of the day) — the WOD form sheet, WOD rows in the feed, and
   the member's gym programming (My Gym and the
   gym-post sheet). Specs: docs/design-specification/wod-logging.md and
   gym-programming-feed.md. Colours come from the generated tokens only. */
.wod-sheet { width: min(560px, 94vw); }
.wod-form { display: flex; flex-direction: column; gap: 10px; }
.wod-form label { margin-bottom: 0; }
.wod-form-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.wod-form-tools .wod-benchmark-label { flex: 1 1 220px; }
.wod-gym-btn { min-height: 44px; }
.wod-segment { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wod-segment legend { font-size: 13px; color: var(--text-2); margin-bottom: 6px; padding: 0; }
.wod-segment-option { position: relative; margin: 0; }
.wod-segment-option { display: block; }
.wod-segment-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; cursor: pointer; }
.wod-segment-option span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-2); font-size: 14px; font-weight: 600;
}
.wod-segment-option input:checked + span { background: var(--brand); border-color: var(--brand); color: white; }
.wod-segment-option input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.wod-score-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wod-score-grid [hidden], .wod-form [hidden] { display: none !important; }
.wod-capped-row { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--text-1); }
.wod-capped-row input[type="checkbox"] { width: 22px; height: 22px; }
.wod-movement-picker select { width: 100%; }
.wod-movement-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wod-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px;
  border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-1);
}
.wod-chip button { min-width: 32px; min-height: 32px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; border-radius: 50%; }
.wod-chip--static { padding: 3px 10px; font-size: 12px; }
.wod-form-error { margin: 0; color: var(--red); font-size: 14px; }
/* A time is Minutes + Seconds boxes, minutes uncapped (a 90-minute chipper is 90 · 0). */
.wod-clock { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.wod-clock legend { font-size: 13px; color: var(--text-2); margin-bottom: 6px; padding: 0; }
.wod-clock label { flex: 1 1 0; min-width: 0; }
.wod-clock-sep { padding-bottom: 12px; font-weight: 700; color: var(--text-2); }
/* Desktop: the WOD form sits in the Log card like an exercise's entry panel. */
.log-wod-entry-panel .wod-form { padding-bottom: 8px; }

.feed-wod-score { font-weight: 700; color: var(--text-1); }
.feed-wod-description {
  margin: 6px 0 0; white-space: pre-line; color: var(--text-2); font-size: 13px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-wod-description.is-full { display: block; -webkit-line-clamp: unset; overflow: visible; }
.feed-wod-movements { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }

.gym-picker-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.gym-picker-form label { flex: 1 1 220px; margin-bottom: 0; }
.gym-picker-form button { min-height: 44px; }
.gym-unavailable { color: var(--red); margin: 0 0 10px; }
.gym-post { border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); }
.gym-post-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.gym-post-title { font-size: 15px; }
.gym-post-body { margin-top: 6px; }
.gym-post-heading { margin: 10px 0 4px; font-size: 14px; color: var(--brand); }
.gym-post-text { margin: 0 0 8px; white-space: pre-line; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.gym-post-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--brand); }
.gym-post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; }
.gym-post-sheet .gym-post { border: 0; padding: 0; background: transparent; }

@media (max-width: 920px) {
  .wod-sheet { width: auto; }
}
.gym-admin-check { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--text-1); }
.gym-admin-check input[type="checkbox"] { width: 22px; height: 22px; }
.gym-admin-url { max-width: 280px; overflow-wrap: anywhere; font-size: 12px; color: var(--text-2); }
.gym-admin-test { font-size: 13px; color: var(--text-2); }
.gym-admin-test ul { margin: 4px 0 0; padding-left: 18px; }
.gym-admin-error { margin: 0; color: var(--red); font-size: 14px; }

/* Admin → Data → Foods (pages/foods-admin.js). */
.food-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.food-admin-grid--macros { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.food-admin-dialog { width: min(640px, 94vw); }
@media (max-width: 600px) { .food-admin-grid--macros { grid-template-columns: 1fr 1fr; } }
.admin-foods-status { margin: 10px 0 0; }
.admin-foods-sentinel { height: 1px; }
.admin-foods-facts { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.admin-foods-facts caption { text-align: left; }
.admin-foods-facts th, .admin-foods-facts td { padding: 4px 0; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; }
.admin-foods-facts td { text-align: right; font-variant-numeric: tabular-nums; }
.admin-foods-portions { margin: 0 0 10px; padding-left: 18px; }
[data-food-catalog] .ghost { margin-left: 4px; min-height: 32px; }

/* Log: the session's time and total volume (log-workout-entry.md §5a),
   side by side above its active calories — never a row per stat. */
.log-session-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.log-session-total { background: var(--surface-2); border-radius: var(--r-md); padding: 8px 12px; min-width: 0; }
.log-session-total dt { font-size: 12px; color: var(--text-2); }
.log-session-total dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }

/* Log: more than one session a day (log-workout-entry.md §5d). Each session
   has a head (its name — the member's or the time of day — its span and a ⋯
   for Rename · Merge · Split), its own totals, workouts and reflection/Share
   row; a ruled break line sits between sessions. */
.log-session-head { display: flex; align-items: center; gap: 8px; }
.log-session-head-id { flex: 1; min-width: 0; }
.log-session-head .log-session-name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text-1); }
.log-session-span { margin: 2px 0 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.log-session-options-btn { min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); border-color: transparent; background: transparent; }
.log-session-group { display: flex; flex-direction: column; gap: 8px; }
.log-session-break { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; padding: 4px 0; }
.log-session-break::before, .log-session-break::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.log-day-summary { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-1); }
.log-session-notice { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 6px 6px 6px 12px; font-size: 13px; color: var(--text-1); }
.log-session-notice span { flex: 1; min-width: 0; }
.log-session-notice button { min-height: 44px; }
.log-session-day-status { margin: 0; text-align: center; }
.log-session-day-status:empty { display: none; }
.log-session-options { display: flex; flex-direction: column; gap: 8px; }
.log-session-options button { width: 100%; min-height: 44px; justify-content: flex-start; text-align: left; }
.log-session-rename { width: 100%; }
.log-session-split-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.log-session-split-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.log-session-split-row button { min-height: 44px; flex: 0 0 auto; }

/* Log: a session's active calories, the number Nutrition adds to the day. */
.log-session-active-kcal { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.log-session-item-kcal { font-variant-numeric: tabular-nums; }

/* Admin → Members plan dialogs (membership-billing.md §8). */
.plan-admin-dialog { width: min(560px, 92vw); }
.plan-admin-form { display: flex; flex-direction: column; gap: 12px; }
.plan-admin-form .table-wrap { max-height: 240px; overflow: auto; }
.plan-admin-check { flex-direction: row; align-items: center; gap: 8px; }
.plan-admin-error { color: var(--red); margin: 0; }
.plan-admin-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Membership & billing sheet (membership-billing.md §9): a sheet like every member form,
   the whole screen on a phone; plans side by side on desktop, stacked on a phone. */
.membership-sheet { color: var(--text-1); }
.membership-sheet h3, .membership-sheet h4 { color: var(--text-1); }
.membership-sheet #membershipSheetTitle:focus { outline: none; }
.membership-body { display: flex; flex-direction: column; gap: 14px; }
.membership-current-head { display: flex; align-items: center; gap: 10px; }
.membership-current-head .plan-badge { margin-top: 0; }
.membership-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.membership-actions button { min-height: 44px; }
.membership-alert { margin: 0; padding: 10px 12px; border-radius: var(--r-md, 10px); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-1); }
.membership-error { color: var(--red); margin: 0; }
.membership-founding { border-color: var(--gold); }
.membership-founding h4 { color: var(--gold); margin: 0 0 6px; }
.membership-interval { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.membership-interval [role="radio"] { min-height: 44px; padding: 0 16px; border-radius: var(--r-full); border: 1px solid var(--border); background: transparent; color: var(--text-2); }
.membership-interval [role="radio"][aria-checked="true"] { color: var(--text-1); border-color: var(--text-1); }
.membership-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.membership-plan { display: flex; flex-direction: column; gap: 8px; }
.membership-plan.is-current { border-color: var(--text-2); }
.membership-plan h4 { margin: 0; }
.membership-plan .plan-badge { margin-top: 0; font-size: 13px; }
.membership-plan ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 14px; flex: 1; }
.membership-plan button { min-height: 44px; }
.membership-price { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-1); }
.membership-current-tag { font-size: 13px; font-weight: 700; color: var(--text-2); }
.membership-usage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.membership-usage li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.membership-usage li button { min-height: 44px; }
.membership-keep-form { display: flex; flex-direction: column; gap: 8px; }
.membership-keep-row { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; }
/* A gym's cancel panel and a closed gym's delete confirmation (membership-billing.md §6). */
.membership-gym-close, .membership-gym-delete { margin-top: 12px; }
.membership-gym-close h5 { margin: 0 0 6px; font-size: 1rem; }
.membership-gym-close fieldset { border: 0; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.membership-gym-close legend { padding: 0; margin-bottom: 6px; color: var(--text-1); font-weight: 600; }
.membership-radio { flex-direction: row; align-items: flex-start; gap: 10px; min-height: 44px; color: var(--text-1); }
.membership-radio input { flex: 0 0 auto; margin-top: 2px; }
.billing-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-md, 10px); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-1); }
.billing-banner p { margin: 0; flex: 1 1 220px; }
.billing-banner button { min-height: 44px; }
.billing-analytics-note { margin: 0 0 12px; }
/* The Membership page (owner, 2026-10-15): wide on desktop, the whole screen on a phone;
   My plan and My gym tabs; auto-renew as a switch; changes confirm with their price. */
@media (min-width: 921px) { .feedback-sheet.membership-page { width: min(960px, 94vw); max-height: min(92vh, 960px); } }
@media (max-width: 920px) { .feedback-sheet.membership-page { top: 0; height: 100dvh; max-height: none; border-radius: 0; } }
.membership-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); }
.membership-tabs [role="tab"] { min-height: 44px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-2); font-weight: 700; margin-bottom: -1px; }
.membership-tabs [role="tab"][aria-selected="true"] { color: var(--text-1); border-bottom-color: var(--text-1); }
.membership-panel { display: flex; flex-direction: column; gap: 14px; }
.membership-panel[hidden] { display: none; }
.membership-renew { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md, 10px); }
.membership-renew-text p { margin: 2px 0 0; }
.membership-switch { flex: 0 0 auto; position: relative; width: 52px; min-width: 52px; height: 32px; min-height: 32px; padding: 0; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface-2); }
.membership-switch::before { content: ''; position: absolute; inset: -6px; } /* 44px tap target */
.membership-switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--text-2); transition: transform .15s ease; }
.membership-switch[aria-checked="true"] { background: var(--green); border-color: var(--green); }
.membership-switch[aria-checked="true"] span { transform: translateX(20px); background: #fff; }
.membership-gym .membership-interval { margin: 4px 0 12px; }
/* The three club options: Starter · Monthly Club · Yearly Club, a comparison and the seat price
   (owner, 2026-10-16; membership-billing.md §6). Cards reuse .membership-plan-grid. */
.membership-gym .membership-plan-grid { margin: 12px 0; }
.membership-plan .hint { margin: 0; }
.membership-compare-wrap { overflow-x: auto; margin: 4px 0 12px; -webkit-overflow-scrolling: touch; }
.membership-compare { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.membership-compare th, .membership-compare td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); color: var(--text-2); }
.membership-compare thead th { color: var(--text-1); font-weight: 700; }
.membership-compare tbody th { color: var(--text-1); font-weight: 600; width: 24%; }
.membership-seat-pricing h5 { margin: 0 0 4px; font-size: 1rem; color: var(--text-1); }
.membership-seats { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.membership-seats h5 { margin: 0 0 4px; font-size: 1rem; color: var(--text-1); }
.membership-seats p { margin: 0 0 6px; }
.membership-confirm-inline { margin-top: 8px; }
.membership-confirm-inline p { margin: 0; color: var(--text-1); }
.membership-confirm h4 { margin: 0 0 8px; }
.membership-confirm h4:focus { outline: none; }
.membership-confirm p { margin: 0 0 8px; }
.membership-confirm-amount { font-size: 20px; font-weight: 800; color: var(--text-1); }
@media (prefers-reduced-motion: reduce) { .membership-switch span { transition: none; } }
@media (max-width: 920px) {
  .membership-plan-grid { grid-template-columns: minmax(0, 1fr); }
}

/* A club's launch page, the coach invite sign-up and "Club not found" (coach-mode.md §28). */
.auth-club .auth-club-brand { margin: 0 0 14px; }
.auth-club-brand img { display: block; max-width: 180px; max-height: 120px; margin-inline: auto; object-fit: contain; }
.auth-club-brand.is-wide img { max-width: min(100%, 300px); max-height: 96px; }
.auth-club-brand .auth-club-icon { width: 96px; height: 96px; border-radius: 22%; }
.auth-club-header-name { font-weight: 800; font-size: 17px; color: var(--text-1); overflow-wrap: anywhere; }
/* The club's logo in the top bar keeps its own shape (the Club wordmark's 60×18 box above is for it alone). */
.auth-native-header .auth-club-header-logo .coach-brand-logo { width: auto; height: 32px; max-height: 32px; max-width: min(220px, 60vw); object-fit: contain; }
.auth-invite-banner { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--brand-dim); border: 1px solid rgba(var(--brand-rgb),0.3); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.auth-invite-banner--invalid { background: var(--red-dim); border-color: var(--red); }
.auth-invite-scopes { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; padding: 0; border: 0; min-width: 0; }
.auth-invite-scopes legend { margin-bottom: 8px; font-weight: 700; }
.auth-not-found { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 520px; margin: 0 auto; padding: 32px 0; text-align: center; }
.auth-not-found-logo { width: 96px; height: 96px; object-fit: contain; }
html[data-theme="light"] .auth-not-found-logo.brand-logo-dark,
html:not([data-theme="light"]) .auth-not-found-logo.brand-logo-light { display: none; }
.auth-not-found h2 { margin: 0; font-size: 26px; }
.auth-not-found h2:focus { outline: none; } /* focused by script so a screen reader starts here; it is not a control */
.auth-not-found h3 { margin: 8px 0 0; font-size: 15px; }
.auth-not-found p { margin: 0; color: var(--text-2); line-height: 1.5; overflow-wrap: anywhere; }
.auth-club-suggestions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; }
.auth-club-suggestion { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-1); text-align: start; text-decoration: none; }
.auth-club-suggestion:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.auth-club-suggestion img { flex: none; width: 44px; height: 44px; border-radius: 22%; }
.auth-club-suggestion > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.auth-not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.auth-not-found-actions .btn { min-height: 44px; min-width: 140px; }

/* Club Settings → Launch page & Home Screen: the address, and a preview of the icon the server makes. */
.coach-launch-address { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
.coach-launch-prefix { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; max-width: 60%; padding: 0 4px 0 12px; color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-gym-section .coach-launch-address input:not([type="color"]) { flex: 1 1 8em; min-width: 0; width: auto; border: 0; border-radius: 0; background: transparent; }
.coach-launch-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; }
.coach-launch-tile-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 22%; background: var(--launch-tile-bg, var(--bg)); color: var(--icon-ink); font-size: 26px; font-weight: 800; overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
.coach-launch-tile.is-light .coach-launch-tile-icon { color: var(--icon-ink-light); }
.coach-launch-tile-icon img { width: 56%; height: 56%; object-fit: contain; }
.coach-launch-tile-name { max-width: 100%; font-size: 12px; color: var(--text-1); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-launch-live { margin: 0; overflow-wrap: anywhere; }
.coach-launch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-launch-actions > * { min-height: 44px; display: inline-flex; align-items: center; }
.coach-launch-create { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.coach-launch-create button { min-height: 44px; }
.coach-launch-create p { margin: 0; overflow-wrap: anywhere; }
.coach-launch-status { min-height: 1.4em; margin: 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.coach-launch-status.is-ok { color: var(--green); }
.coach-launch-status.is-bad { color: var(--red); }
/* A logo that fills the icon, edge to edge, as the server draws it (coach_portal_icon_png()). */
.coach-launch-tile.is-fill .coach-launch-tile-icon img { width: 100%; height: 100%; }
/* The club's link atop the Club area (coach-mode.md §28): the link, then Copy link and Open. */
.coach-club-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 14px 16px; }
.coach-club-link-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.coach-club-link-text a { color: var(--brand); font-weight: 600; overflow-wrap: anywhere; }
.coach-club-link.is-off p { margin: 0; flex: 1 1 220px; }
.coach-club-link > button { min-height: 44px; }
/* A switch row in Club Settings (publish, ChatGPT access): the box keeps its own size, never the fields' full width. */
.coach-gym-section .email-preference-row input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; }

/* === Nutrition ===
   The fifth area: today's calorie meter, macro bars, meals and workout
   credit. Over is a neutral state (text ink, never the error red) — the page
   is adherence-neutral. Macro hues are the categorical --macro-* tokens, and
   every bar carries its own text label, so identity is never colour alone.
   Sheets reuse .feedback-sheet. The page takes the shell's full width, like
   Log and Check-ins — never a narrower cap of its own.
   See docs/design-specification/nutrition.md. */
.nutrition-page { display: flex; flex-direction: column; gap: 12px; }
.nutrition-daybar { display: flex; align-items: center; gap: 8px; }
.nutrition-day-step { min-width: 44px; min-height: 44px; font-size: 20px; padding: 0 12px; }
.nutrition-daynav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.nutrition-day-label { min-width: 120px; text-align: center; font-size: 16px; color: var(--text-1); }
.nutrition-summary { position: relative; display: flex; flex-direction: column; gap: 14px; }
/* The summary card's corner (nutrition.md §5): the plan notes behind an (i)
   and Targets as a sliders icon — never a row of their own. 44px taps, bare
   icons in --text-2. The notes open on hover, and on a tap or Enter. */
.nutrition-summary-corner { position: absolute; top: 4px; right: 4px; display: flex; gap: 0; z-index: 2; }
.nutrition-corner-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--text-2); border-radius: 50%; cursor: pointer; }
.nutrition-corner-btn:hover, .nutrition-corner-btn:focus-visible, .nutrition-corner-btn[aria-expanded="true"] { color: var(--text-1); background: var(--surface-2); }
.nutrition-corner-btn svg { width: 20px; height: 20px; }
.nutrition-info { position: relative; }
.nutrition-info-pop { display: none; position: absolute; top: 44px; right: 0; width: min(300px, calc(100vw - 48px)); padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); text-align: left; }
.nutrition-info-pop p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-1); }
.nutrition-info-pop p + p { margin-top: 8px; }
.nutrition-info.is-open .nutrition-info-pop { display: block; }
@media (hover: hover) {
  .nutrition-info:hover .nutrition-info-pop { display: block; }
}
/* Day summary (nutrition.md §5): Eaten · the calorie ring · Burned, then
   three macro rings. Colours are identities, never adherence: eaten calories
   --brand, each macro its own token, "over" in --text-2. */
.nutrition-gauge-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.nutrition-gauge { position: relative; width: 190px; height: 190px; margin: 0; }
.nutrition-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nutrition-gauge circle { fill: none; stroke-width: 10; }
.nutrition-gauge-track { stroke: var(--surface-3); }
.nutrition-gauge-fill { stroke: var(--brand); stroke-linecap: round; }
.nutrition-gauge-over { stroke: var(--text-2); stroke-linecap: round; }
.nutrition-gauge figcaption {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.nutrition-gauge-value { font-size: 40px; font-weight: 700; color: var(--text-1); line-height: 1.1; font-variant-numeric: tabular-nums; }
.nutrition-gauge figcaption span { font-size: 12px; color: var(--text-2); }
.nutrition-gauge-of { font-variant-numeric: tabular-nums; }
.nutrition-side { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.nutrition-side svg { width: 22px; height: 22px; color: var(--text-2); }
.nutrition-side--eaten svg { color: var(--brand); }
.nutrition-side--burned svg { color: var(--gold); }
.nutrition-side strong { font-size: 24px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1.15; }
.nutrition-side span { font-size: 13px; color: var(--text-2); }
.nutrition-macro-rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nutrition-macro-ring { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.nutrition-macro-dial { position: relative; width: min(96px, 100%); aspect-ratio: 1; }
.nutrition-macro-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nutrition-macro-dial circle { fill: none; stroke-width: 8; }
.nutrition-ring-track { stroke: var(--surface-3); }
.nutrition-ring-fill { stroke-linecap: round; }
.nutrition-macro-ring--protein .nutrition-ring-fill { stroke: var(--macro-protein); }
.nutrition-macro-ring--carbs .nutrition-ring-fill { stroke: var(--macro-carbs); }
.nutrition-macro-ring--fat .nutrition-ring-fill { stroke: var(--macro-fat); }
.nutrition-macro-dial strong { position: absolute; inset: 0; display: grid; place-content: center; font-size: 22px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.nutrition-macro-dial small { font-size: 12px; font-weight: 600; color: var(--text-2); margin-left: 1px; }
.nutrition-macro-ring figcaption, .nutrition-macro-caption { display: flex; flex-direction: column; gap: 2px; }
.nutrition-macro-name { font-size: 14px; font-weight: 700; }
.nutrition-macro-ring--protein .nutrition-macro-name { color: var(--macro-protein); }
.nutrition-macro-ring--carbs .nutrition-macro-name { color: var(--macro-carbs); }
.nutrition-macro-ring--fat .nutrition-macro-name { color: var(--macro-fat); }
.nutrition-macro-left { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nutrition-budget-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-2); }
.nutrition-budget-details[open] summary { margin-bottom: 6px; }
.nutrition-equation { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.nutrition-equation div { display: flex; justify-content: space-between; gap: 12px; }
.nutrition-equation dt { color: var(--text-2); }
.nutrition-equation dd { margin: 0; color: var(--text-1); font-variant-numeric: tabular-nums; }
.nutrition-equation-total { border-top: 1px solid var(--border); padding-top: 6px; font-weight: 700; }
.nutrition-privacy { margin: 0; }
.nutrition-meal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nutrition-meal-head h3 { margin-bottom: 8px; }
.nutrition-meal-kcal { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nutrition-entries { list-style: none; margin: 0 0 8px; padding: 0; }
.nutrition-entry, .nutrition-workout {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border: none; border-bottom: 1px solid var(--border-subtle); background: transparent;
  color: var(--text-1); font-size: 14px; text-align: left; cursor: pointer;
}
.nutrition-workout { cursor: default; }
.nutrition-entry-name, .nutrition-workout span:first-child { display: flex; flex-direction: column; min-width: 0; }
.nutrition-entry small, .nutrition-workout small { color: var(--text-2); font-size: 12px; }
.nutrition-entry-kcal { color: var(--text-2); font-variant-numeric: tabular-nums; }
.nutrition-add-btn { min-height: 44px; width: 100%; }
/* + Add food 3/4 · Scan 1/4 in the Day's first card (nutrition.md §5). */
.nutrition-add-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 8px; }
.nutrition-notice .nutrition-add-row, .nutrition-setup-card .nutrition-add-row { margin-top: 12px; }
.nutrition-add-primary, .nutrition-add-scan { min-height: 44px; min-width: 0; }
.nutrition-add-primary { font-size: 15px; white-space: normal; }
.nutrition-add-scan { display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.nutrition-add-scan svg { width: 22px; height: 22px; }
.nutrition-setup-start { width: 100%; min-height: 44px; }
.nutrition-form { display: flex; flex-direction: column; gap: 10px; }
.nutrition-form [hidden] { display: none; }
.nutrition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nutrition-grid .hint { grid-column: 1 / -1; margin: 0; }
.nutrition-grid--amount { grid-template-columns: 1fr 2fr; }
/* Calories follow the macros (nutrition.md §5k): grams first, then the
   Calories field, read-only while it is their 4/4/9 sum. */
.nutrition-grid--macros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nutrition-macro-field::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.nutrition-macro-field { display: block; }
.nutrition-macro-field input { display: block; margin-top: 6px; }
.nutrition-macro-field--protein::before { background: var(--macro-protein); }
.nutrition-macro-field--carbs::before { background: var(--macro-carbs); }
.nutrition-macro-field--fat::before { background: var(--macro-fat); }
.nutrition-kcal-field { display: flex; flex-direction: column; gap: 4px; }
.nutrition-kcal-field label { margin-bottom: 0; }
.nutrition-kcal-field .hint { margin: 0; font-variant-numeric: tabular-nums; }
.nutrition-kcal-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nutrition-kcal-chip { padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--r-full); font-size: 11px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.nutrition-kcal-field input.is-auto { background: transparent; border-style: dashed; font-weight: 700; cursor: default; }
.nutrition-kcal-field input.is-auto:focus { border-color: var(--border); box-shadow: none; }
.nutrition-kcal-switch { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text-1); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nutrition-kcal-switch:hover { color: var(--text-2); }
.nutrition-grid select { min-width: 0; width: 100%; text-overflow: ellipsis; }
.nutrition-notice-inline { display: flex; flex-direction: column; gap: 8px; }
.nutrition-search { width: 100%; }
/* Add food (nutrition.md §5h): tabs across the top, food rows with their
   icon and a round +, the search bar docked at the bottom of the sheet. The
   active tab is underlined in ink, never brand red. */
.nutrition-add-tabs { display: flex; gap: 2px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.nutrition-add-tabs::-webkit-scrollbar { display: none; }
.nutrition-add-tabs button { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-2); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.nutrition-add-tabs button:hover { color: var(--text-1); }
.nutrition-add-tabs button[aria-current="page"] { color: var(--text-1); border-bottom-color: var(--text-1); }
.nutrition-food-row { justify-content: flex-start; gap: 12px; }
.nutrition-food-row .nutrition-entry-name { flex: 1; font-weight: 600; }
.nutrition-food-row small { font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nutrition-food-source { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--text-2); overflow-wrap: anywhere; }
.nutrition-food-heading { display: flex; flex-direction: column; min-width: 0; }
.nutrition-food-heading .nutrition-food-source { font-weight: 400; }
.nutrition-food-icon { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }
.nutrition-food-icon--lg { width: 48px; height: 48px; flex-basis: 48px; }
.nutrition-food-title { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.nutrition-recent-strip { list-style: none; margin: 0 -16px 12px; padding: 4px 16px 6px; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.nutrition-recent-strip::-webkit-scrollbar { display: none; }
.nutrition-recent-strip li { flex: 0 0 auto; scroll-snap-align: start; }
.nutrition-recent-tile { width: 84px; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-1); cursor: pointer; }
.nutrition-recent-tile:hover, .nutrition-recent-tile:focus-visible { background: var(--surface-2); }
.nutrition-recent-icon { position: relative; width: 52px; height: 52px; }
.nutrition-food-icon--tile { width: 52px; height: 52px; flex-basis: 52px; }
.nutrition-recent-plus { position: absolute; right: -4px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); border: 2px solid var(--surface); color: var(--text-1); font-size: 15px; line-height: 1; }
.nutrition-recent-name { width: 100%; font-size: 12px; line-height: 1.25; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; hyphens: auto; }
.nutrition-food-plus { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-1); font-size: 20px; line-height: 1; }
.nutrition-food-row:hover .nutrition-food-plus, .nutrition-food-row:focus-visible .nutrition-food-plus { background: var(--surface-hover); }
.nutrition-search-dock { position: sticky; bottom: calc(-1 * max(14px, env(safe-area-inset-bottom))); margin: 8px -16px calc(-1 * max(14px, env(safe-area-inset-bottom))); padding: 10px 16px max(10px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border-subtle); }
.nutrition-sheet .nutrition-search-field { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); }
.nutrition-search-field:focus-within { border-color: var(--text-2); }
.nutrition-search-field svg { width: 18px; height: 18px; flex: 0 0 auto; }
.nutrition-sheet .nutrition-search-field .nutrition-search { flex: 1; min-width: 0; min-height: 0; margin: 0; border: 0; border-radius: 0; background: transparent; padding: 10px 0; box-shadow: none; outline: none; color: var(--text-1); font-size: 16px; }
.nutrition-create-from-search { margin-top: 8px; }
.nutrition-create-from-search .nutrition-action-primary { overflow-wrap: anywhere; }
.nutrition-results-label { margin: 4px 0; font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; }
.nutrition-preview { margin: 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nutrition-food-name { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.nutrition-inline-btn { min-height: 44px; font-size: 12px; }
.nutrition-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 600; vertical-align: middle; }
.nutrition-ingredient { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border-subtle); padding: 4px 0; }
.nutrition-ingredient .nutrition-entry-name { font-size: 14px; }
.nutrition-remove { min-width: 44px; min-height: 44px; padding: 0; }
.nutrition-action-back { flex: 1; min-height: 44px; }
.nutrition-facts { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; border: 1px solid var(--border); border-radius: var(--r-sm); }
.nutrition-fact-hero { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 10px; align-items: end; padding: 18px 4px 20px; font-variant-numeric: tabular-nums; }
.nutrition-fact-energy, .nutrition-fact-macro { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.nutrition-fact-energy strong { font-size: clamp(30px, 8vw, 42px); line-height: 1; color: var(--text-1); }
.nutrition-fact-energy span, .nutrition-fact-macro > span:last-child { color: var(--text-2); font-size: 13px; }
.nutrition-fact-macro strong { font-size: clamp(22px, 6vw, 30px); line-height: 1.1; color: var(--text-1); }
.nutrition-fact-pct { min-width: 44px; padding: 3px 9px; margin-bottom: 8px; border-radius: var(--r-full); color: var(--surface); font-size: 12px; font-weight: 700; }
.nutrition-fact-macro--protein .nutrition-fact-pct { background: var(--macro-protein); }
.nutrition-fact-macro--fat .nutrition-fact-pct { background: var(--macro-fat); }
.nutrition-fact-macro--carbs .nutrition-fact-pct { background: var(--macro-carbs); }
/* "Detailed nutrition facts" shares its row with the food's source (i); the
   credit opens upward from it, never as a line under every food. */
.nutrition-facts-row { display: flex; align-items: flex-start; gap: 4px; }
.nutrition-facts-row > .nutrition-facts-details { flex: 1; min-width: 0; }
.nutrition-source-info .nutrition-info-pop { top: auto; bottom: 44px; }
.nutrition-source-info .nutrition-credit { margin: 0; }
.nutrition-facts-details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-2); }
.nutrition-facts-details[open] > summary { margin-bottom: 6px; }
.nutrition-facts-details .nutrition-facts caption.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nutrition-facts caption { text-align: left; font-weight: 700; color: var(--text-1); padding: 0 0 6px; }
.nutrition-facts th, .nutrition-facts td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); text-align: right; text-transform: none; letter-spacing: normal; }
.nutrition-facts th[scope="row"] { text-align: left; color: var(--text-1); font-weight: 500; }
.nutrition-facts thead th { color: var(--text-2); font-size: 12px; font-weight: 600; }
.nutrition-facts-kcal th, .nutrition-facts-kcal td { font-weight: 700; color: var(--text-1); }
@media (max-width: 390px) {
  .nutrition-fact-hero { gap: 4px; }
  .nutrition-fact-pct { min-width: 38px; padding-inline: 6px; }
}
/* Primary at three quarters, secondary at a quarter — the Log form's row. */
.nutrition-actions { display: flex; gap: 8px; margin-top: 4px; }
.nutrition-action-primary { flex: 0 0 calc(75% - 4px); min-width: 0; min-height: 44px; white-space: normal; }
.nutrition-action-secondary { flex: 0 0 calc(25% - 4px); min-width: 0; min-height: 44px; padding-left: 8px; padding-right: 8px; }
/* Trend weight range: 1 · 3 · 6 · 12 months */
.nutrition-range { display: inline-grid; grid-template-columns: repeat(4, minmax(44px, auto)); gap: 4px; padding: 3px; margin-bottom: 8px; border-radius: var(--r-sm); background: var(--surface-2); }
.nutrition-range-btn { min-height: 44px; min-width: 44px; padding: 0 10px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.nutrition-range-btn.is-active { background: var(--surface); color: var(--text-1); }
.nutrition-range-change { margin: 0 0 6px; }

/* The shared date picker (components/date-nav.js) inside Nutrition and the
   check-in form: same row as Log Workout, 44pt taps. */
.nutrition-daynav .log-date-nav, .checkin-date-field .log-date-nav { margin: 0; width: 100%; min-width: 0; }
.nutrition-daynav { min-width: 0; }
.nutrition-daynav .date-nav-input, .checkin-date-field .date-nav-input { min-width: 0; }
.nutrition-daynav .log-date-nav .icon-btn, .checkin-date-field .log-date-nav .icon-btn { width: 44px; min-width: 44px; min-height: 44px; }
.nutrition-daynav .log-date-nav [data-date-today], .checkin-date-field .log-date-nav [data-date-today] { min-height: 44px; }
.nutrition-weekbar { flex-wrap: wrap; }
.nutrition-week-range { flex-basis: 100%; text-align: center; font-size: 15px; color: var(--text-1); }
.checkin-date-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.checkin-date-label { font-size: 13px; font-weight: 600; color: var(--text-2); }

/* Day · Week · History */
.nutrition-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--surface-2); }
.nutrition-tab { min-height: 44px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.nutrition-tab.is-active { background: var(--surface); color: var(--text-1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.nutrition-week-summary { display: flex; flex-direction: column; gap: 6px; }
.nutrition-week-left { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nutrition-week-left span { color: var(--text-2); font-size: 14px; }
.nutrition-week-line { margin: 0; color: var(--text-1); font-size: 14px; }
.nutrition-week-summary .hint { margin: 0; }
.nutrition-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nutrition-card-head h3 { margin-bottom: 8px; }
.nutrition-table-toggle { min-height: 44px; font-size: 12px; }
.nutrition-legend { display: flex; gap: 16px; list-style: none; margin: 0 0 8px; padding: 0; font-size: 12px; color: var(--text-2); }
.nutrition-legend li { display: flex; align-items: center; gap: 6px; }
.nutrition-key { display: inline-block; }
.nutrition-key--bar { width: 10px; height: 10px; border-radius: 2px; background: var(--brand); }
.nutrition-key--tick { width: 12px; height: 2px; background: var(--text-2); }
.nutrition-key--line { width: 14px; height: 2px; border-radius: 1px; background: var(--chart-trend); }
.nutrition-key--dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.nutrition-chart, .nutrition-weight { position: relative; }
.nutrition-bars { display: flex; align-items: stretch; gap: 2px; height: 180px; padding-top: 28px; }
.nutrition-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 0 2px; border: none; border-radius: var(--r-sm); background: transparent; color: inherit; cursor: pointer; font: inherit;
}
div.nutrition-col { cursor: default; }
.nutrition-col.is-hovered, .nutrition-col:focus-visible { background: var(--surface-2); outline: none; }
.nutrition-col-plot { position: relative; flex: 1; border-bottom: 1px solid var(--border); }
.nutrition-col-bar { position: absolute; left: 20%; right: 20%; bottom: 0; border-radius: 4px 4px 0 0; background: var(--brand); }
.nutrition-col-target { position: absolute; left: 8%; right: 8%; height: 2px; margin-bottom: -1px; background: var(--text-2); }
.nutrition-col--ahead .nutrition-col-target { background: transparent; border-top: 2px dashed var(--text-3); height: 0; }
.nutrition-col-label { font-size: 11px; color: var(--text-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nutrition-col-value { font-size: 11px; color: var(--text-1); text-align: center; font-variant-numeric: tabular-nums; min-height: 14px; }
.nutrition-col--today .nutrition-col-label { color: var(--text-1); font-weight: 700; }
.nutrition-tooltip {
  position: absolute; z-index: 2; top: 0; pointer-events: none; display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-3);
  font-size: 12px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.nutrition-tooltip[hidden] { display: none; }
.nutrition-tooltip strong { color: var(--text-1); font-variant-numeric: tabular-nums; }
.nutrition-tooltip span { color: var(--text-2); }
.nutrition-averages h3 { margin-bottom: 10px; }
.nutrition-average-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.nutrition-average-grid dt { font-size: 12px; color: var(--text-2); }
.nutrition-average-grid dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.nutrition-weight { padding-top: 40px; }
.nutrition-weight-plot { position: relative; height: 160px; margin-left: 44px; border-bottom: 1px solid var(--border); }
.nutrition-weight-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nutrition-weight-line { fill: none; stroke: var(--chart-trend); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
/* Water (nutrition.md §5c): the fourth ring beside the macros, in the --water
   hue; never part of the calorie ring. The ring is a button that opens the
   Water sheet (quick adds, other amount, goal). Past the goal the ring stays
   full — never a warning colour. Without targets it keeps a card of its own. */
button.nutrition-macro-ring { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: var(--r-md); }
button.nutrition-macro-ring:hover .nutrition-ring-track, button.nutrition-macro-ring:focus-visible .nutrition-ring-track { stroke: var(--surface-3); }
button.nutrition-macro-ring:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.nutrition-water-sheet { display: flex; flex-direction: column; gap: 12px; }
.nutrition-water-total { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.nutrition-water-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
/* The tracker row under the rings (nutrition.md §5c, §5j): one tap adds a
   cup; the Fasting tile runs live and opens the Fasting sheet. */
.nutrition-trackers { display: flex; gap: 8px; }
.nutrition-tracker { flex: 1 1 0; min-width: 0; min-height: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-1); text-align: left; font: inherit; cursor: pointer; }
.nutrition-tracker:hover, .nutrition-tracker:focus-visible { border-color: var(--text-2); }
.nutrition-tracker:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.nutrition-tracker-icon { display: inline-flex; }
.nutrition-tracker-icon svg { width: 22px; height: 22px; }
.nutrition-tracker--water .nutrition-tracker-icon { color: var(--water); }
.nutrition-tracker--fasting .nutrition-tracker-icon { color: var(--fasting); }
.nutrition-tracker-text { display: flex; flex-direction: column; min-width: 0; }
.nutrition-tracker-text strong, .nutrition-tracker-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nutrition-tracker-text strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.nutrition-tracker-text small { font-size: 12px; color: var(--text-2); }
.nutrition-tracker .nutrition-fast-meter { grid-column: 1 / -1; display: block; height: 4px; margin-top: 6px; }
.nutrition-tracker .nutrition-fast-fill { display: block; }
.nutrition-macro-ring--water .nutrition-ring-fill { stroke: var(--water); }
.nutrition-macro-ring--water .nutrition-macro-name { color: var(--water); }
.nutrition-macro-ring--water .nutrition-macro-dial small { font-size: 11px; margin-left: 2px; }
.nutrition-water { position: relative; display: flex; flex-direction: column; gap: 10px; }
.nutrition-macro-rings--water { grid-template-columns: minmax(0, 1fr); }
.nutrition-water-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nutrition-water-icon svg { width: 20px; height: 20px; }
.nutrition-water-add, .nutrition-water-goal-btn { min-height: 44px; flex: 1 1 auto; padding: 0 6px; font-size: 13px; white-space: nowrap; }
.nutrition-water-goal-btn { flex: 0 0 auto; color: var(--text-2); }
.nutrition-entry--water .nutrition-water-icon { width: 32px; height: 32px; align-items: center; justify-content: center; color: var(--water); }
.nutrition-entry--water .nutrition-water-icon svg { width: 22px; height: 22px; }
.nutrition-entry-water { color: var(--water); font-weight: 600; }

/* Fasting (nutrition.md §5j): a tile in the summary's tracker row and a sheet. Its meter is the
   --fasting hue, stays full past the goal and is never a warning. */
.nutrition-fasting { display: flex; flex-direction: column; gap: 10px; }
.nutrition-fast-elapsed { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.nutrition-fast-elapsed strong { font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.nutrition-fast-meter { height: 14px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.nutrition-fast-fill { height: 100%; width: 0; border-radius: var(--r-full); background: var(--fasting); transition: width 0.4s ease; }
.nutrition-fast-times { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0; }
.nutrition-fast-start, .nutrition-fast-past { min-height: 44px; width: 100%; }
.nutrition-fast-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nutrition-fast-row { min-height: 44px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; }
.nutrition-fast-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.nutrition-fast-row small { color: var(--text-2); }
.nutrition-fast-goals { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nutrition-fast-goals legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.nutrition-fast-goal-row { display: flex; flex-wrap: wrap; gap: 6px; }
.nutrition-fast-goal { position: relative; display: inline-flex; }
.nutrition-fast-goal input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.nutrition-fast-goal span { min-height: 44px; min-width: 56px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-full); font-variant-numeric: tabular-nums; }
.nutrition-fast-goal input:checked + span { border-color: var(--text-1); background: var(--surface-3); font-weight: 600; }
.nutrition-fast-goal input:focus-visible + span { outline: 2px solid var(--text-1); outline-offset: 2px; }
.nutrition-fast-label { margin: 4px 0 0; font-weight: 600; }
.nutrition-fast-stamp { display: flex; flex-direction: column; gap: 8px; }
/* A row, box first: the global label rule is a column, which stacked the box above its words. */
.nutrition-fast-notify { display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 44px; margin: 0; font-size: 14px; font-weight: 600; color: var(--text-1); cursor: pointer; }
/* Drawn by the shared checkbox rule (Forms, near the top); ticked in the fasting colour. */
.nutrition-check input[type="checkbox"] { width: 24px; height: 24px; --check-on: var(--fasting); }
.nutrition-fast-notify + .hint { margin-top: -6px; }
@media (prefers-reduced-motion: reduce) { .nutrition-fast-fill { transition: none; } }
/* Phones: a Nutrition sheet sits on top of the on-screen keyboard (its inline
   bottom is the keyboard's height, set by nutrition.js) and fits what's left,
   so the field being typed in is never under the keys. */
@media (max-width: 920px) {
  .nutrition-sheet { max-height: min(86vh, calc(var(--sheet-avail-h, 100vh) - 12px)); }
}
/* Desktop: a Nutrition sheet scales with the screen like the exercise picker
   (.exercise-search-modal) — 560px wide, up to 88% of the viewport's height —
   instead of the feedback sheet's fixed 480 × 720 card, so a long form such as
   Set your targets isn't a small scrolling box on a large screen. */
@media (min-width: 921px) {
  .nutrition-sheet { width: min(560px, 92vw); max-height: 88vh; }
}
/* Nutrition & Targets (Week tab, nutrition.md §5a): seven day columns of
   four thin bars — calories --brand, then each macro's token — and the chosen
   day's numbers beside them. Over is a neutral cap, never red; a day not
   logged is a dashed outline (not counted), a day ahead is dimmed. */
.nutrition-targets { position: relative; }
.nutrition-targets-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.nutrition-targets-head h3 { margin: 0; }
.nutrition-targets-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; max-width: 760px; }
.nutrition-targets-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.nutrition-tcol { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 8px 0 6px; border: 1.5px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-2); cursor: pointer; }
.nutrition-tcol:hover { background: var(--surface-2); }
.nutrition-tcol.is-selected { border-color: var(--text-1); color: var(--text-1); }
.nutrition-tcell { position: relative; width: 10px; height: 40px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.nutrition-tfill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 3px; background: var(--tfill); }
.nutrition-tcell--kcal { --tfill: var(--brand); }
.nutrition-tcell--protein { --tfill: var(--macro-protein); }
.nutrition-tcell--carbs { --tfill: var(--macro-carbs); }
.nutrition-tcell--fat { --tfill: var(--macro-fat); }
.nutrition-tcell.is-over::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--text-1); }
.nutrition-tcol--ahead .nutrition-tcell { opacity: 0.45; }
.nutrition-tcol--not_logged .nutrition-tcell { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.nutrition-tcol-label { font-size: 12px; font-weight: 600; }
.nutrition-targets-values { margin: 0; padding-top: 9.5px; display: grid; grid-auto-rows: 40px; row-gap: 8px; min-width: 84px; }
.nutrition-tvalue { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.nutrition-tvalue dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.nutrition-tvalue--kcal dt { color: var(--brand); }
.nutrition-tvalue--protein dt { color: var(--macro-protein); }
.nutrition-tvalue--carbs dt { color: var(--macro-carbs); }
.nutrition-tvalue--fat dt { color: var(--macro-fat); }
.nutrition-tvalue dd { margin: 0; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.nutrition-tvalue strong { font-size: 15px; color: var(--text-1); font-variant-numeric: tabular-nums; }
.nutrition-tvalue small { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nutrition-targets-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nutrition-targets-mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-full); background: var(--surface-2); }
.nutrition-targets-mode button { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-2); font-weight: 600; cursor: pointer; }
.nutrition-targets-mode button[aria-pressed="true"] { background: var(--text-1); color: var(--bg); }
.nutrition-targets-open { min-height: 44px; }
.nutrition-targets .nutrition-tooltip { z-index: 2; }
/* Phones: the chosen day's numbers go under the bars, four across, so each
   day column keeps a full tap target. */
@media (max-width: 560px) {
  .nutrition-targets-body { grid-template-columns: minmax(0, 1fr); }
  .nutrition-targets-grid { gap: 2px; }
  .nutrition-targets-values { padding-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 8px; }
  .nutrition-tvalue dd { flex-direction: column; align-items: flex-start; gap: 0; }
}
/* Phase 3 (nutrition.md §§5d, 5e): saved meals, complete days and the weekly
   check-in. Neutral ink throughout — completing a day or a check-in is never
   praise or blame in colour. */
/* The Day as a timeline of hours (product owner, 2026-10-02). */
.nutrition-timeline { display: flex; flex-direction: column; gap: 2px; }
.nutrition-hour { border-radius: 10px; padding: 2px 0; transition: background .12s ease; }
.nutrition-hour.is-drop-target { background: var(--surface-3, var(--border-subtle)); outline: 2px dashed var(--text-2); outline-offset: -2px; }
.nutrition-hour-head { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.nutrition-hour-label { min-width: 54px; padding: 4px 10px; border-radius: 999px; background: var(--surface-3, var(--border-subtle)); color: var(--text-2); font-size: 13px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.nutrition-hour-add { width: 44px; height: 44px; border: none; border-radius: 50%; background: transparent; color: var(--text-1); font-size: 22px; line-height: 1; cursor: pointer; }
.nutrition-hour-add:hover, .nutrition-hour-add:focus-visible { background: var(--border-subtle); }
.nutrition-hour-totals { margin-left: auto; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nutrition-hour-entries { margin: 0 0 4px; }
.nutrition-timeline-item { display: flex; align-items: center; gap: 8px; position: relative; }
.nutrition-timeline-item > .nutrition-entry { flex: 1; min-width: 0; }
.nutrition-entry-time { flex: 0 0 40px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nutrition-entry-icon { flex: 0 0 auto; display: inline-flex; }
.nutrition-hour-entries .nutrition-entry { justify-content: flex-start; }
.nutrition-hour-entries .nutrition-entry-name { flex: 1; }
.nutrition-hour-entries .nutrition-food-icon { width: 32px; height: 32px; }
.nutrition-drag-hint { margin: 4px 0 8px; }
.nutrition-timeline-item .nutrition-entry { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.nutrition-timeline-item.is-dragging { z-index: 5; pointer-events: none; opacity: .9; background: var(--surface, var(--bg)); border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.nutrition-timeline.is-dragging-entry, .is-dragging-entry { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.nutrition-pick { display: flex; flex-direction: row; align-items: center; gap: 10px; flex: 1; min-height: 44px; margin: 0; cursor: pointer; }
.nutrition-pick > span { display: flex; flex-direction: column; min-width: 0; }
.nutrition-pick input { width: 20px; height: 20px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .nutrition-hour { transition: none; } }
.nutrition-meal-actions { display: flex; gap: 8px; }
.nutrition-meal-actions > button { flex: 1; min-height: 44px; }
.nutrition-day-complete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nutrition-day-complete p { margin: 0; flex: 1 1 200px; }
.nutrition-day-complete button, .nutrition-mark-complete button { min-height: 44px; }
/* A coach's recommendation (coach-mode.md §2.4): the gym colour edges it; Use 3/4 · Keep 1/4. */
.nutrition-coach-rec { border-color: var(--brand); display: flex; flex-direction: column; gap: 6px; }
.nutrition-coach-rec h3 { margin: 0; font-size: 16px; }
.nutrition-coach-rec p { margin: 0; }
.nutrition-coach-rec-kcal strong { font-size: 22px; }
.nutrition-coach-rec-note { white-space: pre-wrap; }
.nutrition-coach-rec .nutrition-actions { margin-top: 6px; }
.nutrition-mark-complete { display: flex; flex-direction: column; gap: 6px; }
.nutrition-mark-complete .hint { margin: 0; }
.nutrition-saved-items li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.nutrition-saved-items small { display: block; color: var(--text-2); }
.nutrition-saved-total { margin: 8px 0; }
.nutrition-danger-link { min-height: 44px; width: 100%; margin-top: 8px; }
.nutrition-inline-btn { min-height: 44px; margin-left: 4px; }
/* Phase 4 (nutrition.md §5f): barcode scanner, label reading and the day's
   micronutrients. Informational, neutral ink — never a warning colour. */
.nutrition-scanner { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.nutrition-scanner-video { width: 100%; max-height: 40vh; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--surface-3); }
.nutrition-scanner.is-unavailable .nutrition-scanner-view { display: none; }
.nutrition-label-scan { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.nutrition-label-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.nutrition-label-scan .hint { margin: 0; }
/* Scanner feedback (nutrition.md §5f): a frame to aim with, then a box around
   what's recognised — --scan-reading (red) while reading, --scan-locked
   (green) once it has what it needs. Scanner-only tokens: the error --red
   never appears in Nutrition, so red can't be read as "over". */
.nutrition-scanner-view { position: relative; overflow: hidden; border-radius: var(--r-md); }
.nutrition-scanner-view .nutrition-scanner-video { display: block; }
.nutrition-scan-frame { position: absolute; left: 10%; right: 10%; top: 30%; bottom: 30%; border: 2px dashed var(--text-2); border-radius: var(--r-md); pointer-events: none; transition: border-color .2s; }
.nutrition-scan-frame--label { top: 8%; bottom: 8%; left: 18%; right: 18%; }
.nutrition-scan-frame::after { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--scan-reading); opacity: .8; animation: nutrition-scan-sweep 1.6s ease-in-out infinite alternate; }
.nutrition-scan-frame--label::after { display: none; }
.nutrition-scanner-view.is-reading .nutrition-scan-frame { border-color: var(--scan-reading); }
.nutrition-scanner-view.is-locked .nutrition-scan-frame { border-style: solid; border-color: var(--scan-locked); }
.nutrition-scanner-view.is-locked .nutrition-scan-frame::after { display: none; }
.nutrition-scan-box { position: absolute; border: 3px solid var(--scan-reading); border-radius: 6px; background: var(--scan-reading-dim); pointer-events: none; transition: left .15s, top .15s, width .15s, height .15s, border-color .2s, background-color .2s; }
.nutrition-scanner-view.is-locked .nutrition-scan-box { border-color: var(--scan-locked); background: var(--scan-locked-dim); }
@keyframes nutrition-scan-sweep { from { transform: translateY(-40px); } to { transform: translateY(40px); } }
/* The label reader (2026-09-27, "show it recognising the label"): a sweep down
   the frame while it reads, a highlight on every label word it recognises, a
   check mark when it locks, and each checklist chip pops with its value. */
.nutrition-scanner-view.is-scanning .nutrition-scan-frame--label::after { display: block; top: 0; left: 4%; right: 4%; animation: nutrition-scan-sweep-label 2s ease-in-out infinite alternate; box-shadow: 0 0 12px var(--scan-reading); }
@keyframes nutrition-scan-sweep-label { from { top: 0; } to { top: calc(100% - 2px); } }
.nutrition-scan-words { position: absolute; inset: 0; pointer-events: none; }
.nutrition-scan-word { position: absolute; border-radius: 3px; background: var(--scan-reading-dim); box-shadow: 0 0 0 1px var(--scan-reading); animation: nutrition-scan-word-in .25s ease-out both; }
.nutrition-scanner-view.is-locked .nutrition-scan-word { background: var(--scan-locked-dim); box-shadow: 0 0 0 1px var(--scan-locked); }
@keyframes nutrition-scan-word-in { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }
.nutrition-scan-check { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--scan-locked); color: var(--surface); font-size: 36px; font-weight: 700; opacity: 0; transform: scale(.4); pointer-events: none; transition: opacity .2s, transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.nutrition-scanner-view.is-locked .nutrition-scan-check { opacity: 1; transform: scale(1); }
.nutrition-scanner-view.is-locked { animation: nutrition-scan-flash .5s ease-out; }
@keyframes nutrition-scan-flash { from { box-shadow: inset 0 0 0 6px var(--scan-locked); } to { box-shadow: inset 0 0 0 0 var(--scan-locked); } }
.nutrition-label-value:not(:empty) { margin-left: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nutrition-label-checklist li { transition: background-color .2s, border-color .2s; }
.nutrition-label-checklist li.is-new { animation: nutrition-chip-pop .45s ease-out; }
@keyframes nutrition-chip-pop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .nutrition-scan-frame::after, .nutrition-scanner-view.is-scanning .nutrition-scan-frame--label::after { animation: none; }
  .nutrition-scan-box, .nutrition-scan-check, .nutrition-label-checklist li { transition: none; }
  .nutrition-scan-word, .nutrition-scanner-view.is-locked, .nutrition-label-checklist li.is-new { animation: none; }
}
.nutrition-label-live { margin-top: 8px; }
.nutrition-label-checklist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nutrition-label-checklist li { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font-size: .85rem; }
.nutrition-label-checklist li::before { content: '○ '; }
.nutrition-label-checklist li.is-found { border-color: var(--scan-locked); color: var(--text); background: var(--scan-locked-dim); }
.nutrition-label-checklist li.is-found::before { content: '✓ '; color: var(--scan-locked); }
.nutrition-micros-fields summary, .nutrition-micros summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.nutrition-micros summary h3 { margin: 0; font-size: inherit; }
.nutrition-micros-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nutrition-micros-table th, .nutrition-micros-table td { padding: 6px 4px; text-align: left; border-top: 1px solid var(--border-subtle); }
.nutrition-micros-table td:last-child { text-align: right; color: var(--text-2); }
.nutrition-micros-table small, .nutrition-facts small { display: block; color: var(--text-2); font-weight: 400; }
.nutrition-facts-micros th[scope="rowgroup"] { color: var(--text-2); font-weight: 600; padding-top: 10px; }
.nutrition-credit { margin: 6px 0 0; }
/* Past the recommended pace: a note, not an error — ink, never --red. */
.nutrition-pace-warning { color: var(--text-1); font-weight: 600; }
.nutrition-plan-line { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.nutrition-key--plan { width: 14px; height: 0; border-top: 2px dashed var(--text-2); }
.nutrition-date-goal { display: flex; flex-direction: column; gap: 10px; }
.nutrition-date-goal [hidden], .nutrition-form [data-field][hidden] { display: none; }
/* Calorie calculator (calculator.net's table, nutrition.md §3.1a): one
   ≥ 44px row per goal, the share of maintenance beside the calories, and the
   floor as an ink note — never --red. */
.nutrition-form [data-katch-note][hidden] { display: none; }
.nutrition-calculator { border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.nutrition-calculator h3 { margin: 0 0 4px; font-size: 16px; }
.nutrition-calculator-rows { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nutrition-calculator-row { width: 100%; min-height: 44px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 8px 12px; text-align: left; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font: inherit; }
.nutrition-calculator-row:hover, .nutrition-calculator-row:focus-visible { border-color: var(--text-2); }
.nutrition-calculator-name small, .nutrition-calculator-kcal small { display: block; color: var(--text-2); font-size: 12px; font-weight: 400; }
.nutrition-calculator-kcal { text-align: right; font-variant-numeric: tabular-nums; }
.nutrition-calculator-floor { grid-column: 1 / -1; font-size: 12px; color: var(--text-1); font-weight: 600; }
.nutrition-workouts.is-not-credited .nutrition-meal-kcal { color: var(--text-2); }
.nutrition-weight-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 0 2px var(--surface); }
.nutrition-weight-focus { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--chart-trend); box-shadow: 0 0 0 2px var(--surface); }
.nutrition-crosshair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text-3); }
.nutrition-crosshair[hidden], .nutrition-weight-focus[hidden] { display: none; }
.nutrition-weight-hit { position: absolute; inset: 0; cursor: crosshair; }
.nutrition-weight-hit:focus-visible { outline: 2px solid var(--chart-trend); outline-offset: 2px; }
.nutrition-axis { position: absolute; left: 0; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.nutrition-axis--top { top: 32px; }
.nutrition-axis--bottom { bottom: 22px; }
.nutrition-weight-dates { display: flex; justify-content: space-between; margin-left: 44px; padding-top: 4px; font-size: 11px; color: var(--text-2); }
.nutrition-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.nutrition-table th, .nutrition-table td { padding: 8px 6px; border-bottom: 1px solid var(--border-subtle); text-align: right; }
.nutrition-table th:first-child { text-align: left; }
.nutrition-table thead th { color: var(--text-2); font-weight: 600; font-size: 12px; }
@media (max-width: 480px) {
  .nutrition-gauge { width: 164px; height: 164px; }
  .nutrition-gauge-value { font-size: 34px; }
  .nutrition-side strong { font-size: 20px; }
  .nutrition-macro-dial { width: min(76px, 100%); }
  .nutrition-macro-dial strong { font-size: 17px; }
  .nutrition-macro-name { font-size: 13px; }
  .nutrition-macro-left { font-size: 12px; }
}

/* Timed holds (Plank): the set row's time box replaces the reps stepper
   (log.js applySetMode, utils/timed-sets.js). [hidden] must win over the
   row's own display rules. */
.set-row [hidden] { display: none !important; }
.nsr-time { width: 96px; text-align: center; }

/* Exercise muscle information (exercise-muscle-map.md §15). */
.exercise-info-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.62); }
.exercise-info-dialog { width: min(760px, 100%); max-height: min(88vh, 900px); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface); color: var(--text-1); box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.exercise-info-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); background: var(--surface); }
.exercise-info-header h3 { margin: 0; }
.exercise-info-close { min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 28px; }
.exercise-info-body { overflow: auto; padding: 20px; }
.exercise-explorer-dialog { width: min(1080px, 100%); height: 90vh; }
.exercise-explorer-body { flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.exercise-explorer-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--surface); }
.exercise-info-section { margin-top: 20px; }
.exercise-info-section h4 { margin: 0 0 8px; }
.exercise-info-section p { white-space: pre-wrap; }
.exercise-info-list { margin: 0; padding-left: 22px; }
.muscle-map { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.muscle-map-view { width: min(210px, 44%); margin: 0; text-align: center; }
.muscle-map-svg { display: block; width: 100%; height: auto; max-height: 390px; }
.muscle-map-svg [data-muscle] { fill: var(--muscle-inactive) !important; stroke: currentColor; stroke-width: 1; }
.muscle-map-svg .muscle-map-secondary { fill: var(--muscle-secondary) !important; stroke-dasharray: 6 3; stroke-width: 2; }
.muscle-map-svg .muscle-map-primary { fill: var(--muscle-primary) !important; stroke-dasharray: none; stroke-width: 3; }
.exercise-info-media { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.exercise-info-media figure { margin: 0; text-align: center; }
.exercise-info-media img { width: 100%; max-height: 280px; object-fit: contain; border-radius: 12px; background: var(--surface-2); }
.exercise-info-credit { display: inline-block; margin-top: 20px; }
#exerciseInfoBtn { min-width: 44px; min-height: 44px; }
@media (max-width: 920px) {
  .exercise-info-overlay { place-items: end stretch; padding: 0; }
  .exercise-info-dialog { width: 100%; max-height: calc(100dvh - max(12px, env(safe-area-inset-top))); border-radius: 18px 18px 0 0; }
  .exercise-info-header { padding-top: max(16px, env(safe-area-inset-top)); }
  .exercise-info-media { grid-template-columns: 1fr; }
}

/* Admin → System → Backend: one card per service (admin-console.md §6). */
.system-intro h3 { margin-bottom: 4px; }
.system-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.system-card { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.system-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.system-card-head h4 { margin: 0; }
.system-card-body { flex: 1; }
.system-card-body .hint { margin: 0 0 4px; overflow-wrap: anywhere; }
.system-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.system-dialog-grid { display: grid; gap: 10px; }
.system-admin-dialog .checkbox-row { display: flex; align-items: center; gap: 8px; }
.system-test-result { margin: 0; font-size: 13px; color: var(--text-2); }

/* Nutrition → History: surplus / deficit waterfall. Each week floats from the
   running total; surplus (up) neutral ink, deficit (down) brand, the Total
   column dark; projected weeks faded. Never red. */
.nutrition-key--surplus { width: 10px; height: 10px; border-radius: 2px; background: var(--text-2); }
.nutrition-wf { position: relative; display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nutrition-wf-plot::before { content: ''; position: absolute; left: 0; right: 0; bottom: var(--zero, 0%); border-top: 1px solid var(--border); }
.nutrition-balance-summary { margin: 8px 0 4px; font-weight: 600; }
.nutrition-key--ahead { width: 10px; height: 10px; border-radius: 2px; background: var(--text-2); opacity: .45; }
.nutrition-wf-col { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: var(--r-sm); outline: none; }
.nutrition-wf-col.is-hovered, .nutrition-wf-col:focus-visible { background: var(--surface-2); }
.nutrition-wf-plot { position: relative; height: 160px; }
.nutrition-wf-bar { position: absolute; left: 15%; right: 15%; border-radius: 3px; }
.nutrition-wf-bar--surplus { background: var(--text-2); }
.nutrition-wf-bar--deficit { background: var(--brand); }
.nutrition-wf-bar--total { background: var(--text-1); }
.nutrition-wf-col--ahead .nutrition-wf-bar { opacity: .45; }
.nutrition-wf-col small { height: 20px; font-size: 10px; color: var(--text-2); text-align: center; white-space: nowrap; overflow: visible; }
.nutrition-wf-col--ahead:first-of-type, .nutrition-wf-col--past + .nutrition-wf-col--ahead { margin-left: 8px; }

/* Admin → Metrics (admin-console.md §7): tiles per section, one grid. */
.metrics-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.metrics-head .hint { margin-top:0; max-width:60ch; }
.metrics-head .tabs { margin-bottom:0; }
.metrics-section { margin-bottom:20px; }
.metrics-section h3 { margin-bottom:4px; }
.metrics-scope { margin:0 0 10px; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.kpi-tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; min-width:0; }
.kpi-label { display:block; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-3); }
.kpi-value { display:block; font-size:28px; font-weight:800; letter-spacing:-1px; margin-top:8px; line-height:1.1; color:var(--text-1); overflow-wrap:anywhere; }
.kpi-detail { font-size:12px; color:var(--text-2); margin-top:6px; overflow-wrap:anywhere; }
.kpi-untracked .kpi-value { font-size:18px; font-weight:600; color:var(--text-3); letter-spacing:0; }
.metrics-definitions { margin-top:8px; color:var(--text-2); font-size:13px; }
.metrics-definitions summary { cursor:pointer; font-weight:600; color:var(--text-1); }
.metrics-definitions ul { margin:8px 0 0; padding-left:18px; }
.metrics-definitions li { margin-bottom:4px; }
/* Member activity (§7a): named lists in tiles, one row per member. */
.metrics-list { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.metrics-list li { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--text-1); min-width:0; }
.metrics-list-name { font-weight:600; flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.metrics-list-meta { font-size:12px; color:var(--text-2); flex-basis:100%; }
.metrics-list-count { font-size:13px; font-weight:700; color:var(--text-2); white-space:nowrap; }
.metrics-ranked { counter-reset:metrics-rank; }
.metrics-ranked li::before { counter-increment:metrics-rank; content:counter(metrics-rank); font-size:12px; font-weight:700; color:var(--text-3); min-width:1.2em; }

/* Admin → Traffic (admin-console.md §8): tiles, a visitors-per-day bar chart
   with a page-drawn tooltip, and breakdown tables with thin share bars. */
.traffic-tiles { margin-bottom:16px; }
.traffic-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; min-width:0; }
.traffic-card h4 { margin:0 0 10px; font-size:14px; display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.traffic-card h4 .hint { margin:0; font-weight:500; }
.traffic-card .table-wrap { margin:0; }
.traffic-card td, .traffic-card th { padding:6px 8px; }
.traffic-card td:first-child { overflow-wrap:break-word; min-width:9ch; }
.traffic-card--wide { grid-column:1 / -1; }
.traffic-card .table-wrap { overflow-x:auto; }
.traffic-card .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.traffic-trend { margin-bottom:16px; }
.traffic-chart { position:relative; height:160px; }
.traffic-chart-svg { display:block; width:100%; height:100%; overflow:visible; }
.traffic-day { outline:none; cursor:default; }
.traffic-day-hit { fill:transparent; }
.traffic-day-bar { fill:var(--brand); }
.traffic-day:hover .traffic-day-bar, .traffic-day:focus .traffic-day-bar { fill:var(--text-1); }
.traffic-day:focus-visible .traffic-day-hit { fill:var(--surface-2); }
.traffic-tip { position:absolute; top:-6px; transform:translate(-50%,-100%); background:var(--surface-3); color:var(--text-1); border:1px solid var(--border); border-radius:var(--r-sm); padding:6px 8px; font-size:12px; white-space:nowrap; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.traffic-axis { display:flex; justify-content:space-between; font-size:11px; color:var(--text-3); margin-top:6px; border-top:1px solid var(--border); padding-top:4px; }
.traffic-table-view { margin-top:8px; font-size:13px; color:var(--text-2); }
.traffic-table-view summary { cursor:pointer; }
.traffic-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:12px; margin-bottom:12px; }
.traffic-share { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.traffic-share-bar { width:56px; height:6px; flex:none; }
.traffic-share-track { fill:var(--border); }
.traffic-share-fill { fill:var(--brand); }
.admin-area-tabs { margin-bottom:16px; }

/* === Admin mode ===
   The Admin view takes over the main navigation (product owner, 2026-10-03):
   the sidebar and the phone tray list the admin areas, the sidebar ends in
   "Member mode", the phone header's gear switches back, and a pill beside the
   wordmark says the shell is in admin mode. Markup: components/admin-mode.js.
   See docs/design-specification/admin-console.md §1a. */
.admin-mode-heading {
  padding: 4px 12px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--gold);
}
.admin-mode-areas { display: flex; flex-direction: column; gap: 2px; }
/* Coach areas can be dragged into the coach's own order (coach-mode.md §18). */
.coach-area-reorderable > [data-coach-area-nav],
.coach-area-reorderable > [data-coach-area] { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.coach-area-reorderable > .is-dragging { opacity: 0.6; cursor: grabbing; }
.admin-mode-divider { height: 1px; margin: 10px 4px; background: var(--border-subtle); }
.admin-mode-exit { color: var(--text-2); }
/* Member mode's mode switches (My Program, Coach Mode, Admin) at the sidebar's
   foot, under the same divider Member mode sits under inside a mode
   (app-shell-navigation.md §6e). */
.sidebar-modes { display: flex; flex-direction: column; gap: 2px; }
.sidebar-modes .nav-btn:not(.active) { color: var(--text-2); }
.admin-mode-pill {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--gold);
  background: var(--gold-dim);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-mode-pill[hidden] { display: none; }
body.admin-mode .top #startWorkoutBtn { display: none !important; }
.admin-area-title { margin: 0 0 16px; font-size: 22px; font-weight: 700; }
.mobile-nav .admin-mode-exit { display: none; }
@media (min-width: 921px) {
  /* Desktop names the mode in the sidebar heading; the pill is for phones. */
  .admin-mode-pill { display: none; }
}
@media (max-width: 920px) {
  .admin-area-title { font-size: 18px; margin-bottom: 12px; }
}

/* ─── Coach Mode (coach-mode.md) ───────────────────────────────────────────
   Head coaches, coaches and app admins enter it like admin mode. The page:
   the gym header, the client tree beside the selected client's dashboard
   (one then the other on a phone), invites, coaches and the gym's setup.
   Colours are tokens only; a gym's brand arrives as --brand* on <html>. */
.coach-mode-pill { border-color: var(--brand); background: var(--brand-dim); color: var(--brand); }
body.coach-mode .top #startWorkoutBtn { display: none !important; }
.mobile-nav .coach-mode-exit { display: none; }
@media (min-width: 921px) { .coach-mode-pill { display: none; } }
.coach-mode-exit-header svg,
.admin-mode-exit-header svg { width: 22px; height: 22px; }

/* The gym's mark in place of the One Fitness Hub logos (applyCoachBrand()). */
.coach-brand-mark { display: none; align-items: center; min-width: 0; }
html.coach-branded .coach-brand-mark { display: inline-flex; }
html.coach-branded .app-header-brand > img,
html.coach-branded .sidebar .brand > .brand-logo { display: none !important; }
.coach-brand-logo { display: block; max-height: 28px; max-width: 160px; object-fit: contain; }
.coach-brand-mark--sidebar .coach-brand-logo { max-height: 44px; max-width: 180px; }
.coach-brand-name { font-weight: 800; font-size: 15px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.coach-brand-mark--sidebar .coach-brand-name { font-size: 17px; }

.coach-page { display: flex; flex-direction: column; gap: 12px; }
.coach-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.coach-header-brand .coach-brand-logo { max-height: 44px; }
.coach-header-text { flex: 1; min-width: 0; }
.coach-header-text h2 { margin: 0; font-size: 20px; }
.coach-header-text .hint { margin: 2px 0 0; }
.coach-switch-gym { min-height: 44px; }
.coach-area-tabs, .coach-sub-tabs, .coach-client-tabs { overflow-x: auto; flex-wrap: nowrap; margin-bottom: 0; }
.coach-area-tabs .tab, .coach-sub-tabs .tab, .coach-client-tabs .tab { min-height: 44px; }

.coach-split { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.coach-tree { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 140px); overflow: auto;
  padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); }
.coach-tree-tools { display: flex; flex-direction: column; gap: 8px; }
.coach-tree-search { width: 100%; min-height: 44px; }
/* The search box's own Recent list: a dropdown over the tree (nothing moves when it closes), open on focus with nothing typed. */
.coach-search { position: relative; }
.coach-recents { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; padding: 4px;
  border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.coach-recents[hidden] { display: none; }
.coach-recents-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 0 8px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.coach-recents-clear { min-height: 44px; padding: 0 8px; font-size: 13px; }
.coach-recents ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.coach-recent { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px; border-radius: var(--r-sm); color: var(--text-1); cursor: pointer; }
.coach-recent:hover, .coach-recent.is-active { background: var(--surface-2); }
.coach-tree-row-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-filter { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 3px; border-radius: var(--r-sm); background: var(--surface-2); }
.coach-filter-btn { min-height: 44px; padding: 0 12px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-weight: 600; cursor: pointer; }
.coach-filter-btn.is-active { background: var(--surface); color: var(--text-1); }
.coach-invite-btn, .coach-roster-export { min-height: 44px; }
.coach-tree-group > summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 700; cursor: pointer; color: var(--text-1); }
.coach-tree-count { color: var(--text-2); font-weight: 600; font-size: 13px; }
.coach-tree-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.coach-tree-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-1); text-align: left; cursor: pointer; }
.coach-tree-row:hover { background: var(--surface-2); }
.coach-tree-row.is-selected { background: var(--brand-dim); border-color: var(--brand); }
.coach-tree-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.coach-tree-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-tree-row-meta { font-size: 12px; color: var(--text-2); }
.coach-tree-empty { padding: 6px 8px; }
.coach-tree-legend { margin: 0; font-size: 12px; }
/* Slipping is said in words with a dashed outline, never colour alone, never red. */
.coach-slipping { flex-shrink: 0; padding: 2px 8px; border: 1px dashed var(--text-2); border-radius: var(--r-full); font-size: 11px; font-weight: 700; color: var(--text-2); }
.coach-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: var(--coach-avatar, 32px); height: var(--coach-avatar, 32px); border-radius: 50%;
  background: var(--surface-2); color: var(--text-1); font-size: 12px; font-weight: 700; overflow: hidden; }
.coach-avatar img { width: 100%; height: 100%; object-fit: cover; }

.coach-detail { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.coach-back { display: none; align-self: flex-start; min-height: 44px; }
.coach-client-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.coach-client-head-text { flex: 1; min-width: 180px; }
.coach-client-head-text h3 { margin: 0 0 2px; }
.coach-shares { margin: 6px 0 0; font-size: 13px; }
.coach-client-actions { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.coach-client-actions button { min-height: 44px; }
.coach-reassign select { width: auto; min-height: 44px; }
.coach-tiles { margin-bottom: 0; }
.coach-not-shared { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px dashed var(--border); border-radius: var(--r-md); color: var(--text-2); }
.coach-not-shared strong { color: var(--text-1); }
.coach-history-day + .coach-history-day { margin-top: 14px; }
.coach-history-day h5 { margin: 0 0 6px; font-size: 13px; color: var(--text-2); font-weight: 700; }
.coach-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.coach-history-list li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.coach-history-name { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.coach-history-sets { font-size: 13px; color: var(--text-1); }
.coach-history-notes { font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.coach-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.coach-table th { text-align: left; color: var(--text-2); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.coach-table td { padding: 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.coach-row-actions { white-space: nowrap; text-align: right; }
/* A table that scrolls sideways on a phone keeps its row actions in view (2026-10-17: Assign and the ⋯ menu sat off-screen). */
.coach-table td.coach-row-actions, .coach-table th:last-child:empty { position: sticky; right: 0; background: var(--surface); }
.coach-table td.coach-row-actions { box-shadow: -10px 0 8px -8px rgba(0, 0, 0, .45); }
.coach-row-actions button { min-height: 44px; }
.coach-table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.coach-table-toolbar h3 { margin: 0; }
.coach-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.coach-toolbar-actions button, .coach-table-toolbar > button { min-height: 44px; }
.coach-name-cell { display: inline-flex; align-items: center; gap: 8px; }
.coach-table-toggle { margin-top: 10px; }
.coach-table-toggle > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--text-2); }
.coach-notes-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.coach-notes-head h4 { margin: 0; }
.coach-notes-head button { min-height: 44px; }
.coach-note-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.coach-note { padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.coach-note p { margin: 0 0 4px; white-space: pre-wrap; }
.coach-note-actions { display: flex; gap: 8px; }
.coach-note-actions button { min-height: 44px; }
.coach-note-form textarea { width: 100%; }
.coach-empty h3 { margin-top: 0; }

.coach-gym-form { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.coach-gym-form h3 { margin: 0; }
.coach-gym-logo { border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.coach-gym-logo legend { padding: 0 4px; font-weight: 600; }
.coach-gym-logo-preview { display: flex; align-items: center; min-height: 64px; }
.coach-gym-logo-preview img { max-height: 64px; max-width: 200px; object-fit: contain; }
.coach-color-row { display: flex; gap: 8px; align-items: center; }
.coach-color-row input[type="color"] { width: 52px; min-height: 44px; padding: 2px; }
.coach-color-row input:not([type="color"]) { flex: 1; min-height: 44px; }
.coach-brand-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.coach-brand-preview-bar { display: flex; align-items: center; min-height: 32px; }
.coach-brand-preview .primary { pointer-events: none; }
.coach-feed-test { padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 13px; }
.coach-sheet-error { color: var(--text-1); font-weight: 600; margin: 0; }
.coach-sheet-error[hidden] { display: none; }
.coach-org-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.coach-org-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); color: var(--text-1); text-align: left; cursor: pointer; }
.coach-org-row:hover { border-color: var(--brand); }

/* The member's side: invites and the coach card in My Gym, the accept sheet. */
.coach-invite-card, .coach-card { display: flex; flex-direction: column; gap: 8px; }
.coach-invite-card button, .coach-card-actions button { min-height: 44px; }
.coach-card-head { display: flex; gap: 12px; align-items: center; }
.coach-card-head h3 { margin: 0; }
.coach-card-head p { margin: 2px 0 0; }
.coach-invite-brand:empty, .coach-header-brand:empty { display: none; }
.coach-invite-brand .coach-brand-logo { max-height: 48px; }
.coach-card-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.coach-sheet-subhead { margin: 8px 0 4px; font-size: 14px; }
.coach-scope-list { display: flex; flex-direction: column; gap: 4px; }
.coach-scope-row { flex-direction: row; align-items: flex-start; gap: 12px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.coach-scope-row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; }
.coach-scope-text { display: flex; flex-direction: column; gap: 2px; }
.coach-scope-text .hint { margin: 0; }
.coach-never-shared { margin: 8px 0 0; }

/* Analytics (coach-analytics.js): tiles that say who they count, named lists,
   the active-days spread; the client's Habits tab draws weekly bars. Bars use
   --brand (the gym colour) for the figure and ink for the week in progress. */
.coach-analytics { display: flex; flex-direction: column; gap: 12px; }
.coach-analytics-toolbar .coach-filter-btn { min-height: 44px; }
.coach-analytics-coach { display: inline-flex; align-items: center; gap: 6px; }
.coach-analytics-coach select { width: auto; min-height: 44px; }
.coach-analytics-section h4 { margin: 0 0 10px; }
.metric--not-tracked strong { color: var(--text-2); font-size: 16px; }
.coach-buckets { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.coach-buckets h5 { margin: 0 0 4px; font-size: 13px; color: var(--text-2); }
.coach-bucket { display: grid; grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) 32px; gap: 8px; align-items: center; font-size: 13px; }
.coach-bucket-bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.coach-bucket-bar > span { display: block; height: 100%; background: var(--brand); }
.coach-bucket-count { text-align: right; font-variant-numeric: tabular-nums; }
.coach-analytics-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.coach-analytics-list h4 { margin: 0 0 8px; }
.coach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.coach-list-row { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; color: var(--text-1); text-align: left; cursor: pointer; }
.coach-list-row:hover .coach-list-row-name { color: var(--brand); }
.coach-list-row-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-list-row-meta { font-size: 12px; color: var(--text-2); text-align: right; }
.coach-habits { display: flex; flex-direction: column; gap: 12px; }
.coach-habit-chart h4 { margin: 0 0 4px; }
.coach-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 140px; margin-top: 8px; }
.coach-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.coach-bar-fill { width: 100%; max-width: 36px; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--brand); }
.coach-bar.is-current .coach-bar-fill { background: var(--text-2); }
.coach-bar-value { font-size: 12px; font-variant-numeric: tabular-nums; }
.coach-bar-label { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.coach-slots { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.coach-slots li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); font-size: 13px; }

.coach-rec-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0; }
.coach-rec-macros legend { padding: 0; margin-bottom: 4px; }
.coach-rec-total { font-weight: 700; margin: 4px 0; }
.coach-recs .coach-table-toolbar h4 { margin: 0; }
.coach-bmr { margin: 12px 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.coach-bmr h5 { margin: 0 0 4px; }
.coach-bmr p { margin: 4px 0; }
.coach-bmr-main strong { font-size: 1.4rem; }
.coach-bmr-formulas { list-style: none; margin: 8px 0 0; padding: 0; }
.coach-bmr-formulas li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }

/* Library (coach-library.js): table first; the builder and assign forms are sheets. */
.coach-library { display: flex; flex-direction: column; gap: 12px; }
.coach-library-search { min-height: 44px; width: 220px; max-width: 100%; }
.coach-toolbar-actions select { width: auto; min-height: 44px; }
.coach-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.coach-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); }
.coach-row-actions { white-space: nowrap; }
.coach-row-actions button { min-height: 44px; }
.coach-row-menu { display: inline-block; position: relative; }
.coach-row-menu > summary { list-style: none; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--r-md); }
.coach-row-menu > summary::-webkit-details-marker { display: none; }
.coach-row-menu-items { position: fixed; top: 0; left: 0; z-index: 60; display: flex; flex-direction: column; min-width: 160px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.coach-table td.coach-row-actions.menu-open { z-index: 30; }
.coach-row-menu-items button { justify-content: flex-start; text-align: left; }
.coach-review-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.coach-review-row button { min-height: 44px; }
.coach-builder, .coach-assign-form { display: flex; flex-direction: column; gap: 10px; }
.coach-builder-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.coach-builder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.coach-builder-row { padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 8px; }
.coach-builder-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.coach-builder-row-head button { min-height: 44px; }
.coach-builder-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.coach-check { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.coach-check input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; }
.coach-assign-clients { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; }
.coach-assign-group { margin: 8px 0 0; font-size: 13px; color: var(--text-2); font-weight: 700; }
.coach-routine-preview { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

.coach-import-form { display: flex; flex-direction: column; gap: 10px; }
.coach-csv-rejected { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); }

/* Calendar (coach-calendar.js): planned workouts are rounded with a dashed
   edge, appointments square with a solid one, and both say their kind in
   words; a client's colour is a dot and the edge, beside their name. Colours
   reuse existing tokens (never a hex here). */
.coach-cal-c0 { --cal-client: var(--info); } .coach-cal-c1 { --cal-client: var(--macro-carbs); }
.coach-cal-c2 { --cal-client: var(--macro-fat); } .coach-cal-c3 { --cal-client: var(--chart-trend); }
.coach-cal-c4 { --cal-client: var(--water); } .coach-cal-c5 { --cal-client: var(--fasting); }
.coach-cal-c6 { --cal-client: var(--gold); } .coach-cal-c7 { --cal-client: var(--macro-protein); }
.coach-cal { display: flex; flex-direction: column; gap: 12px; }
.coach-cal-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.coach-cal-nav, .coach-cal-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.coach-cal-nav button, .coach-cal-controls button, .coach-cal-controls select { min-height: 44px; }
.coach-cal-controls select { width: auto; }
.coach-cal-title { margin: 0 4px; font-size: 16px; }
.coach-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.coach-cal-day { min-width: 0; min-height: 140px; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); }
.coach-cal-day.is-today { border-color: var(--brand); }
.coach-cal-day.is-outside { opacity: 0.55; }
.coach-cal-day.is-drop { background: var(--brand-dim); }
.coach-cal-day-head { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.coach-cal-day-open { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--text-1); font-weight: 700; font-size: 13px; cursor: pointer; text-align: left; }
.coach-cal-add { min-width: 44px; min-height: 44px; border: 1px dashed var(--border); border-radius: var(--r-md); background: transparent; color: var(--text-2); cursor: pointer; font-size: 18px; }
.coach-cal-day-body { display: flex; flex-direction: column; gap: 4px; }
.coach-cal-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 44px; padding: 4px 6px 4px 8px; text-align: left; font-size: 12px;
  background: var(--surface-2); color: var(--text-1); border: 1px solid var(--border-subtle); border-left: 3px solid var(--cal-client, var(--info)); cursor: pointer; }
.coach-cal-chip--planned { border-radius: 10px; border-left-style: dashed; }
.coach-cal-chip--appointment { border-radius: 2px; }
.coach-cal-chip-kind { font-size: 11px; color: var(--text-2); font-weight: 700; }
.coach-cal-chip-title { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-cal-chip-client { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cal-client, var(--info)); flex-shrink: 0; }
.coach-cal-chip-state { font-size: 11px; font-weight: 700; color: var(--text-1); }
.coach-cal-chip.is-missed .coach-cal-chip-state, .coach-cal-chip.is-no_show .coach-cal-chip-state { text-decoration: underline; }
.coach-cal-chip--planned { background: color-mix(in srgb, var(--info) 12%, var(--surface-2)); }
.coach-cal-chip.is-done, .coach-cal-chip.is-attended { background: var(--green-dim); border-color: var(--green); border-left-style: solid; }
/* A completed session (coach-mode.md §20): green and solid, with a tick and the word Completed — a planned workout stays blue and dashed. */
.coach-cal-done { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 44px; padding: 4px 6px 4px 8px; text-align: left; font-size: 12px;
  background: var(--green-dim); color: var(--text-1); border: 1px solid var(--green); border-left: 3px solid var(--cal-client, var(--green)); border-radius: 10px; cursor: pointer; }
.coach-cal-done .coach-cal-chip-kind { color: var(--green); }
.coach-cal-allday .coach-cal-done { width: auto; max-width: 260px; }
.coach-cal-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin: 0 2px 0 6px; }
.coach-cal-key--planned { background: color-mix(in srgb, var(--info) 12%, var(--surface-2)); border: 1px dashed var(--info); }
.coach-cal-key--done { background: var(--green-dim); border: 1px solid var(--green); }
.coach-session-detail { display: flex; flex-direction: column; gap: 14px; }
.coach-session h4, .coach-session-planned h4 { margin: 0 0 6px; }
.coach-session-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.coach-session-items li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.coach-session-items li.is-done > span:first-child, .coach-session-items li.is-done .coach-session-item-state { color: var(--green); font-weight: 700; }
.coach-session-item-state { font-size: 12px; color: var(--text-2); }
.coach-cal-ghost { display: block; font-size: 11px; color: var(--text-2); padding: 3px 6px; border: 1px dashed var(--border); border-radius: 10px; }
.coach-cal-more { min-height: 32px; border: 0; background: transparent; color: var(--text-2); font-size: 12px; cursor: pointer; text-align: left; }
.coach-cal-count { display: none; }
.coach-cal-weekdays, .coach-cal-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.coach-cal-weekdays span { font-size: 12px; color: var(--text-2); text-align: center; }
.coach-cal-month .coach-cal-day { min-height: 110px; }
.coach-cal-agenda { display: flex; flex-direction: column; gap: 6px; }
.coach-cal-agenda .coach-cal-day { min-height: 0; }
.coach-cal-allday { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.coach-cal-allday .coach-cal-chip { width: auto; max-width: 260px; }
.coach-cal-allday-label { font-size: 12px; color: var(--text-2); font-weight: 700; }
.coach-cal-grid { position: relative; border-top: 1px solid var(--border-subtle); }
.coach-cal-hour { height: 48px; border-bottom: 1px solid var(--border-subtle); font-size: 11px; color: var(--text-2); }
.coach-cal-hour span { display: inline-block; width: 56px; padding-top: 2px; }
.coach-cal-grid-events { position: absolute; inset: 0 0 0 60px; }
.coach-cal-slot { position: absolute; padding: 1px; box-sizing: border-box; }
.coach-cal-slot .coach-cal-chip { height: 100%; overflow: hidden; }
.coach-cal-drafts h4 { margin: 0 0 4px; }
.coach-event-form { display: flex; flex-direction: column; gap: 10px; }
.coach-event-kind, .coach-event-repeat { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; }
.coach-event-weekdays { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.coach-event-attended, .coach-event-delete { display: flex; gap: 8px; flex-wrap: wrap; }
.coach-event-attended button, .coach-event-delete button { min-height: 44px; }
.coach-event-attended .is-active { border-color: var(--brand); color: var(--brand); }
@media (max-width: 920px) {
  .coach-cal-week { grid-template-columns: minmax(0, 1fr); }
  .coach-cal-week .coach-cal-day { min-height: 0; }
}
@media (max-width: 600px) {
  .coach-cal-month .coach-cal-day { min-height: 56px; padding: 2px; }
  .coach-cal-month .coach-cal-chip, .coach-cal-month .coach-cal-more, .coach-cal-month .coach-cal-ghost, .coach-cal-month .coach-cal-done, .coach-cal-month .coach-cal-add { display: none; }
  .coach-cal-month .coach-cal-count { display: inline-block; font-size: 11px; font-weight: 700; color: var(--brand); }
  .coach-cal-month .coach-cal-day-open { width: 100%; }
}

/* Plans → Schedule, design A (coach-mode.md §25): the workload board — clients
   down the side, the week across — its workload strip and "Needs you" chips,
   the client picker, the workout editor that slides out on the right, Apply a
   program, and the client page's switcher, week strip and Plan weeks. A state
   is a shape and a word, never colour alone: done is a filled dot with a tick,
   missed a dashed ring with the word underlined, planned an open ring, an
   appointment a diamond. Tokens only (no hex here). */
.coach-mark { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--info); background: transparent; position: relative; }
.coach-mark.is-done { background: var(--green); border-color: var(--green); }
.coach-mark.is-done::after { content: ''; position: absolute; left: 3px; top: 0; width: 3px; height: 6px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.coach-mark.is-missed { border-style: dashed; border-color: var(--text-1); }
.coach-mark.is-today { border-color: var(--brand); }
.coach-mark.is-appointment { border-radius: 2px; transform: rotate(45deg) scale(0.85); border-color: var(--gold); background: var(--gold-dim); }
.coach-board-bell { display: inline-block; flex: none; width: 10px; height: 10px; border: 2px solid var(--text-2); border-bottom-width: 3px; border-radius: 6px 6px 2px 2px; }
.coach-board-wrap { display: flex; flex-direction: column; gap: 12px; }
.coach-workload { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.coach-workload > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.coach-workload b { font-size: 20px; color: var(--text-1); }
.coach-workload span { font-size: 12px; color: var(--text-2); }
.coach-needs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.coach-need { min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-1); font-weight: 600; cursor: pointer; }
.coach-need b { margin-right: 4px; }
.coach-need.is-missed b { text-decoration: underline; }
.coach-need.is-active { border-color: var(--brand); background: var(--brand-dim); box-shadow: inset 0 0 0 1px var(--brand); }
.coach-board-scroll { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.coach-board { width: 100%; min-width: 860px; border-collapse: collapse; table-layout: fixed; }
.coach-board th, .coach-board td { border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); vertical-align: top; padding: 6px; }
.coach-board thead th { font-size: 12px; color: var(--text-2); font-weight: 600; text-align: left; background: var(--surface-2); }
.coach-board thead th b { margin-left: 4px; color: var(--text-1); }
.coach-board thead th.is-today { color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); }
.coach-board .coach-board-client { width: 220px; text-align: left; background: var(--surface); position: sticky; left: 0; z-index: 1; }
/* An open row menu lifts its sticky cell above the rows after it (focus-within for browsers without :has). */
.coach-board .coach-board-client:focus-within { z-index: 5; }
.coach-board .coach-board-client:has(details[open]) { z-index: 5; }
.coach-board-client-inner { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.coach-board-client-open { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--text-1); text-align: left; cursor: pointer; }
.coach-board-client-open > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.coach-board-client-open strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-board-client-meta { font-size: 12px; font-weight: 400; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-board-cell { min-height: 72px; display: table-cell; }
.coach-board-cell.is-today { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.coach-board-cell.is-drop { background: var(--brand-dim); }
.coach-board-chip { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; margin-bottom: 4px; padding: 5px 6px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-1); text-align: left; font-size: 12px; cursor: pointer; }
.coach-board-chip:hover { background: var(--surface-hover); }
.coach-board-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.coach-board-chip.is-done { background: var(--green-dim); border-color: var(--green); }
.coach-board-chip.is-missed { border-style: dashed; border-color: var(--text-2); }
.coach-board-chip.is-appointment { border-left: 3px solid var(--gold); }
.coach-board-chip.is-logged { background: transparent; border-style: dashed; border-color: var(--green); }
.coach-board-chip-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.coach-board-chip-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-board-chip.is-missed .coach-board-chip-title { text-decoration: underline; }
.coach-board-chip-meta { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 11px; min-width: 0; }
.coach-board-chip-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-1); }
.coach-board-add { width: 100%; min-height: 44px; border: 1px dashed var(--border); border-radius: var(--r-sm); background: transparent; color: var(--text-3); font-size: 18px; cursor: pointer; opacity: 0.6; }
.coach-board-add:hover, .coach-board-add:focus-visible { opacity: 1; color: var(--text-1); border-color: var(--brand); }
.coach-board-phone { display: none; }
.coach-board-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.coach-board-strip button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 6px 0; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); font-size: 12px; cursor: pointer; }
.coach-board-strip button b { font-size: 16px; color: var(--text-1); }
.coach-board-strip button.is-today b { color: var(--brand); }
.coach-board-strip button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-dim); }
.coach-board-strip-marks { display: flex; gap: 2px; min-height: 12px; }
.coach-board-strip-marks .coach-mark { width: 8px; height: 8px; border-width: 1.5px; }
.coach-board-agenda { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.coach-board-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.coach-board-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.coach-cal--board .coach-cal-controls { justify-content: flex-end; }
.coach-add-menu > summary.primary { min-width: 0; padding: 0 16px; color: var(--bg); background: var(--brand); font-weight: 700; }
.coach-add-menu .coach-row-menu-items { min-width: 260px; }
.coach-add-menu .coach-row-menu-items button { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; }
.coach-add-menu .coach-row-menu-items .hint { margin: 0; font-size: 12px; font-weight: 400; }

/* The client picker: one sheet wherever a coach chooses clients. */
.coach-picker-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-1); font-weight: 600; cursor: pointer; }
.coach-picker-btn.is-narrowed { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.coach-picker-btn.is-empty { border-style: dashed; color: var(--text-2); }
.coach-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-picker-avatar, .client-picker-avatar { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--text-1); font-size: 11px; font-weight: 700; }
.client-picker { display: flex; flex-direction: column; gap: 10px; }
.client-picker-search input { width: 100%; min-height: 44px; }
.client-picker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: min(60vh, 520px); overflow-y: auto; }
.client-picker-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-1); text-align: left; cursor: pointer; }
.client-picker-row:hover { background: var(--surface-hover); }
.client-picker-row.is-chosen { border-color: var(--brand); }
.client-picker-box { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--border); border-radius: 4px; font-size: 13px; font-weight: 700; }
.client-picker-row.is-chosen .client-picker-box { border-color: var(--brand); background: var(--brand); color: var(--bg); }
.client-picker-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.client-picker-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-picker-flag { font-size: 12px; color: var(--text-2); }
.client-picker-flag.is-missed { color: var(--text-1); text-decoration: underline; }
.client-picker-flag.is-ending, .client-picker-flag.is-empty, .client-picker-flag.is-slipping { color: var(--text-1); }
.client-picker-current { font-size: 12px; color: var(--brand); font-weight: 700; }

/* The workout editor: a centred pop-up's chrome, docked to the right on a
   computer so the board stays in view; the whole screen on a phone (the
   phone rules above). */
@media (min-width: 921px) {
  .feedback-sheet.is-side { left: auto; right: 0; top: 0; width: min(520px, 100vw); height: 100dvh; max-height: 100dvh; border-radius: 0; border-width: 0 0 0 1px; transform: translateX(100%); }
  .feedback-sheet.is-side.is-visible { transform: translateX(0); }
  .feedback-sheet-backdrop.is-side { background: rgba(0, 0, 0, 0.3); }
  .feedback-sheet.is-side .feedback-sheet-body { flex: 1 1 auto; }
}
.coach-editor-form, .coach-apply-form { display: flex; flex-direction: column; gap: 12px; }
.coach-editor-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); }
.coach-editor-tabs button { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-2); font-weight: 600; cursor: pointer; }
.coach-editor-tabs button.is-active { color: var(--text-1); border-bottom-color: var(--brand); }
.coach-editor-panel { display: flex; flex-direction: column; gap: 10px; }
.coach-editor-panel[hidden] { display: none; }
.coach-editor-client { display: flex; flex-direction: column; gap: 4px; }
.coach-editor-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.coach-editor-workout { display: flex; flex-direction: column; gap: 8px; }
.coach-editor-workout[hidden] { display: none; }
.coach-editor-preview { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); }
.coach-editor-preview h4 { margin: 0 0 4px; font-size: 13px; color: var(--text-2); }
.coach-notif-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.coach-notif { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--surface); }
.coach-notif strong { font-size: 14px; }
.coach-notif p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.coach-notif-logo { flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--brand); }
.coach-apply-clients { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.coach-apply-chosen { display: flex; flex-wrap: wrap; gap: 4px; }
.coach-apply-preview p { margin: 0 0 6px; }
.coach-apply-clashes { margin: 0; padding-left: 18px; font-size: 13px; }
.coach-apply-clash { border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 8px 12px; margin: 0; }
.coach-goal { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-full); font-size: 12px; font-weight: 600; color: var(--text-1); background: var(--surface-2); }
.coach-goal.is-strength { border-color: var(--macro-protein); } .coach-goal.is-fat_loss { border-color: var(--macro-fat); }
.coach-goal.is-conditioning { border-color: var(--info); } .coach-goal.is-muscle { border-color: var(--macro-carbs); }
.coach-goal.is-mobility { border-color: var(--water); } .coach-goal.is-general { border-color: var(--text-3); }
.coach-goal-pick { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 0; padding: 0; margin: 0; }
.coach-goal-pick legend { margin-bottom: 4px; font-weight: 600; }
.coach-goal-option { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.coach-prog-day-reminders { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }

/* The client page: ‹ name ▾ › beside Back; Overview's week strip; Plan's weeks. */
.coach-client-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.coach-client-nav .coach-back { margin: 0; }
.coach-client-switch { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-left: auto; }
.coach-client-switch > button.ghost { min-width: 44px; min-height: 44px; }
.coach-client-switch .coach-picker-btn { max-width: 240px; }
.coach-plan-strip h4 { margin: 0 0 8px; }
.coach-plan-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.coach-plan-day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 72px; padding: 6px 0; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-2); font-size: 12px; cursor: pointer; }
.coach-plan-day b { font-size: 16px; color: var(--text-1); }
.coach-plan-day.is-today { border-color: var(--brand); }
.coach-plan-day-marks { display: flex; gap: 3px; min-height: 14px; align-items: center; color: var(--text-3); }
.coach-plan { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.coach-plan-program { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.coach-plan-program h4 { margin: 0; }
.coach-plan-program .hint { margin: 2px 0 0; }
.coach-plan-program .coach-row-actions { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
.coach-plan-program .coach-row-actions button { min-height: 44px; }
.coach-plan-progress { flex-basis: 100%; display: flex; gap: 3px; }
.coach-plan-progress i { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--surface-3); }
.coach-plan-progress i.is-done { background: var(--brand); }
.coach-plan-progress i.is-now { background: var(--brand); opacity: 0.5; box-shadow: inset 0 0 0 1px var(--brand); }
.coach-plan-weeks .coach-board { min-width: 560px; }
.coach-plan-weeks .coach-board-client { width: 112px; }
.coach-plan-weeks .coach-board th, .coach-plan-weeks .coach-board td { padding: 4px; }
.coach-plan-week-label { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.coach-plan-week-label .hint { margin: 0; font-size: 12px; font-weight: 400; }
.coach-plan-week-label button { min-height: 44px; max-width: 100%; padding: 4px 8px; font-size: 12px; white-space: normal; text-align: left; }
.coach-plan-phone { display: none; }
.coach-plan-daylist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.coach-plan-daylist li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.coach-plan-daylist li.is-today .coach-plan-daylist-day { color: var(--brand); }
.coach-plan-daylist-day { font-size: 13px; font-weight: 600; color: var(--text-2); padding-top: 12px; }
@media (max-width: 920px) {
  .coach-workload { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coach-workload > div:nth-child(n + 4) { display: none; }
  .coach-cal--board .coach-board-scroll, .coach-plan .coach-plan-weeks { display: none; }
  .coach-board-phone, .coach-plan-phone { display: block; }
  .coach-client-switch { margin-left: 0; width: 100%; }
  .coach-client-switch .coach-picker-btn { flex: 1; max-width: none; }
  .coach-plan-days { gap: 3px; }
}

.coach-schedule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.coach-schedule-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-left: 3px solid var(--brand); }
.coach-schedule-item.coach-cal-chip--planned { border-radius: 10px; border-left-style: dashed; }
.coach-schedule-when { font-size: 12px; color: var(--text-2); font-weight: 700; }
.coach-schedule-notes { white-space: pre-wrap; }
.coach-schedule-open { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }

/* Routine manager (coach-routine-manager.js): a spreadsheet — sticky header
   and first column, scrolling inside its own frame on a phone, never the page. */
.coach-library-views { margin-bottom: 0; }
/* A routine row opens to its clients (Library): chevron first, detail row spans the table. */
.coach-expand-cell { width: 48px; padding-right: 0; }
.coach-expand { min-width: 44px; min-height: 44px; padding: 0; }
.coach-library-table tr.is-open > td { border-bottom-color: transparent; }
.coach-routine-detail > td { background: var(--surface-2); padding: 0; }
.coach-routine-detail-body { position: sticky; left: 0; box-sizing: border-box; max-width: calc(100vw - 48px); padding: 10px 14px 12px 52px; }
.coach-routine-clients { width: auto; min-width: 0; }
.coach-routine-clients th, .coach-routine-clients td { white-space: nowrap; text-align: left; font-weight: 400; }
.coach-routine-clients tbody th { font-weight: 600; color: var(--text-1); text-transform: none; letter-spacing: 0; font-size: inherit; }
.coach-routine-detail-body .hint { margin: 8px 0 0; }
.coach-manager-table tbody th { position: sticky; left: 0; background: var(--surface); z-index: 1; text-align: left; font-weight: 600; min-width: 140px; }
.coach-manager-table td, .coach-manager-table th { border-right: 1px solid var(--border-subtle); white-space: nowrap; }
.coach-manager-table td:last-child { white-space: normal; min-width: 240px; }
.coach-manager-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.coach-manager-chip { display: inline-flex; gap: 4px; align-items: baseline; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; }
.coach-manager-chip-meta { color: var(--text-2); font-size: 11px; }
.coach-manager-chip.is-outdated, .coach-manager-chip.is-pending_review { border-style: dashed; }
.coach-manager-chip.is-deleted_by_client { opacity: 0.6; text-decoration: line-through; }

/* Library → Programs (coach-programs.js): weeks of day cells; by client, a day-by-day table. */
.coach-prog-views { margin-bottom: 12px; }
/* The program builder (owner, 2026-10-17, "Design A"): one row of seven day cells per week, a day's
   editor under the grid on a computer; on a phone the weeks are tabs, one at a time, and a day opens its own sheet. */
@media (min-width: 921px) {
  .feedback-sheet.coach-program-sheet { width: min(980px, calc(100vw - 48px)); max-height: min(92vh, 860px); }
}
.coach-prog-setup { display: grid; gap: 12px; }
@media (min-width: 921px) { .coach-prog-setup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .coach-prog-setup .coach-check { grid-column: 1 / -1; } }
.coach-prog-length { margin: 12px 0 8px; }
.coach-prog-grid { display: flex; flex-direction: column; gap: 12px; }
.coach-prog-tabs { display: none; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.coach-prog-tabs button { flex: 0 0 auto; min-width: 64px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-1); font-weight: 600; cursor: pointer; }
.coach-prog-tabs button.on { border-color: var(--brand); color: var(--brand); }
.coach-prog-tabs button:disabled { opacity: .5; cursor: default; }
.coach-prog-week { margin: 0; padding: 0; border: 0; min-width: 0; }
.coach-prog-week-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; }
.coach-prog-week-head h4 { margin: 0; font-size: 14px; }
.coach-prog-week-head .hint { margin: 0; }
.coach-prog-week-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.coach-prog-week-actions button { min-height: 44px; }
.coach-prog-repeat { min-height: 44px; }
.coach-prog-week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.coach-prog-day { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 76px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-1); text-align: left; cursor: pointer; overflow: hidden; }
.coach-prog-day.is-rest { border-style: dashed; background: transparent; color: var(--text-2); }
.coach-prog-day.is-selected { border-color: var(--brand); outline: 2px solid var(--brand); }
.coach-prog-day-title { font-weight: 700; font-size: 12px; color: var(--text-2); }
.coach-prog-day-line.hint { margin: 0; }
.coach-prog-day-line { max-width: 100%; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-prog-add-week { min-height: 44px; border-style: dashed; width: 100%; }
.coach-prog-drawer { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.coach-prog-editor { display: flex; flex-direction: column; gap: 8px; }
.coach-prog-editor-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.coach-prog-editor-head h4 { margin: 0; }
.coach-prog-editor-head .hint { margin: 0; }
.coach-prog-editor-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.coach-prog-editor-actions button { min-height: 44px; }
.coach-prog-editor select, .coach-prog-editor input { min-height: 44px; width: 100%; }
.coach-prog-routines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.coach-prog-routines li { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 4px 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow-wrap: anywhere; }
.coach-prog-routine-actions { display: flex; flex-shrink: 0; }
.coach-prog-move { min-width: 44px; min-height: 44px; }
.coach-prog-remove { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; font-size: 18px; }
.coach-prog-note { margin: 0; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 920px) {
  .coach-prog-tabs { display: flex; }
  .coach-prog-week { display: none; }
  .coach-prog-week.is-current { display: block; }
  .coach-prog-week-days { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
  .coach-prog-day { flex-direction: row; align-items: center; gap: 12px; min-height: 56px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
  .coach-prog-day:last-child { border-bottom: 0; }
  .coach-prog-day.is-selected { outline: 0; box-shadow: inset 4px 0 0 var(--brand); }
  .coach-prog-day-title { flex: 0 0 56px; font-size: 14px; color: var(--text-1); }
  .coach-prog-day-line { flex: 1; font-size: 14px; }
  .coach-prog-day-line + .coach-prog-day-line { display: none; }
  .coach-prog-drawer { display: none; }
  .coach-prog-add-week { display: none; }
  .coach-program-form .nutrition-actions { position: sticky; bottom: 0; background: var(--surface); }
}
.coach-program-form .nutrition-actions { margin-top: 16px; }
.coach-prog-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.coach-prog-nav button { min-width: 44px; min-height: 44px; }
.coach-prog-summary { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.coach-prog-summary li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Pause… · Resume · Last day… (coach-mode.md §27): 44px buttons that wrap under the line. */
.coach-prog-dates { flex-basis: 100%; }
.coach-prog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-prog-actions button { min-height: 44px; }
.coach-pause-form { display: flex; flex-direction: column; gap: 12px; }
.coach-progressions { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-2); }
.coach-prog-days tr.is-today th { color: var(--brand); }
.coach-prog-days tr.is-rest td, .coach-prog-days tr.is-rest th { color: var(--text-2); }
.coach-prog-state { font-size: 12px; font-weight: 700; }
.coach-prog-state.is-missed { text-decoration: underline; }
.coach-schedule-programs { margin: 0 0 8px; padding: 0; list-style: none; font-weight: 700; }

/* Direct messages (components/coach-thread.js): the client's bubbles left, yours right; text, never colour alone. */
.coach-unread { flex-shrink: 0; min-width: 22px; padding: 2px 7px; border-radius: var(--r-full); background: var(--brand); color: var(--surface); font-size: 12px; font-weight: 800; text-align: center; }
.coach-thread { display: flex; flex-direction: column; gap: 8px; }
.coach-thread-list { max-height: min(60vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.coach-thread-day { display: flex; flex-direction: column; gap: 6px; }
.coach-thread-date { margin: 6px 0 2px; text-align: center; font-size: 12px; color: var(--text-2); }
.coach-msg { align-self: flex-start; max-width: min(80%, 520px); padding: 8px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-2); }
.coach-msg.is-mine { align-self: flex-end; background: var(--brand-dim); }
.coach-msg-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-1); }
.coach-msg-meta { display: block; margin-top: 2px; font-size: 11px; color: var(--text-2); }
.coach-msg.is-mine .coach-msg-meta { text-align: right; }
.coach-thread-compose { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.coach-thread-compose textarea { min-height: 44px; width: 100%; resize: vertical; }
.coach-thread-compose button { min-height: 44px; }
.coach-my-messages { margin: 12px 0; }
.coach-thread-alerts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.coach-thread-alerts button { min-height: 44px; }

/* Print the analytics report: the page, not the app around it. */
@media print {
  body.coach-mode .sidebar, body.coach-mode .mobile-nav, body.coach-mode .top, body.coach-mode .mobile-header, body.coach-mode .coach-toolbar-actions { display: none !important; }
  body.coach-mode .coach-analytics .card { break-inside: avoid; }
  /* A client's own data never prints from Coach Mode (owner, 2026-10-14: no export of personal data). */
  body.coach-mode .coach-detail, body.coach-mode .coach-client-panel { display: none !important; }
}

@media (max-width: 920px) {
  /* One then the other: the tree, or the selected client with ← Clients. */
  .coach-split { grid-template-columns: minmax(0, 1fr); }
  .coach-tree { position: static; max-height: none; padding: 0; border: 0; background: transparent; }
  .coach-split.has-selection .coach-tree { display: none; }
  .coach-split:not(.has-selection) .coach-detail { display: none; }
  .coach-back { display: inline-flex; }
  .coach-table { font-size: 12px; }
  .coach-header-text h2 { font-size: 18px; }
}

/* ─── Body tab: Progress and the check-in sheet (body-checkins.md) ──────────
   Trend first: one large chart for the chosen metric, tiles that switch it,
   the newest check-ins. Each metric keeps one colour (--chart-trend weight,
   --body-waist, --body-fat; the rest ink); up or down is never red or green.
   On desktop the chart takes the left column, tiles and recent the right. */
.body-tabs { margin-bottom: 14px; }
.body-panel.active { display: grid; gap: 12px; align-content: start; }
.body-progress { display: contents; }
@media (min-width: 921px) {
  .body-panel.active { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; }
  .body-panel .body-hero { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .body-panel .body-tiles { grid-column: 2; grid-row: 1; }
  .body-panel .body-recent { grid-column: 2; grid-row: 2; }
  .body-panel .body-empty { grid-column: 1 / -1; }
}
.body-hero { position: relative; display: grid; gap: 12px; min-width: 0; }
.body-hero-corner { position: absolute; top: 4px; right: 4px; }
.body-info-btn { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--text-2); border-radius: var(--r-md); cursor: pointer; }
.body-info-btn:hover, .body-info-btn[aria-expanded="true"] { color: var(--text-1); background: var(--surface-2); }
.body-info-note { margin: 0; }
.body-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.body-big { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 2px; }
.body-big small { font-size: 15px; font-weight: 600; color: var(--text-2); margin-left: 4px; letter-spacing: 0; }
.body-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.body-pill { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-1); }
.body-range { display: flex; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); }
.body-range button { flex: 1; min-height: 36px; padding: 6px 4px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-2); font-size: 12px; font-weight: 700; cursor: pointer; }
.body-range button[aria-pressed="true"] { background: var(--surface); color: var(--text-1); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.body-chart { position: relative; min-width: 0; touch-action: pan-y; }
.body-chart:focus-visible { outline: 2px solid var(--text-1); outline-offset: 4px; border-radius: var(--r-md); }
.body-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.body-chart-grid { stroke: var(--border); stroke-width: 1; }
.body-chart-axis { fill: var(--text-3); font-size: 10px; font-family: inherit; }
.body-chart-goal { stroke: var(--text-1); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .7; }
.body-chart-goal-label { fill: var(--text-2); }
.body-chart-dot { fill: var(--text-3); opacity: .7; }
.body-chart-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.body-chart-point, .body-chart-end { stroke: var(--surface); stroke-width: 2; }
.body-chart-cross line { stroke: var(--text-3); stroke-width: 1; }
.body-chart-cross circle { stroke: var(--surface); stroke-width: 2; }
.body-chart-tip { position: absolute; z-index: 3; pointer-events: none; display: grid; gap: 1px; padding: 6px 9px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.25); font-size: 12px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.body-chart-tip strong { color: var(--text-1); }
.body-chart-empty { margin: 24px 0; text-align: center; }
.body-chart-table { max-height: 320px; overflow: auto; }
.body-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-2); }
.body-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.body-key--dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.body-key--goal { background: repeating-linear-gradient(90deg, var(--text-1) 0 4px, transparent 4px 7px); }
.body-eta { margin: 0; font-size: 13px; color: var(--text-2); }
.body-actions { display: flex; gap: 8px; }
.body-actions .body-checkin-btn { flex: 1; min-height: 44px; }
.body-actions .ghost { flex: 0 0 calc(25% - 6px); min-width: 0; min-height: 44px; padding-left: 8px; padding-right: 8px; }
.body-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.body-tile { display: grid; gap: 2px; min-width: 0; text-align: left; padding: 10px 12px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); color: var(--text-1); cursor: pointer; font: inherit; }
.body-tile:hover { background: var(--surface-hover); }
.body-tile[aria-pressed="true"] { border-color: var(--text-1); box-shadow: inset 0 0 0 1px var(--text-1); }
.body-tile:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.body-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.body-tile-value { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.body-tile-value small { font-size: 12px; font-weight: 600; color: var(--text-2); margin-left: 3px; }
.body-tile-change { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.body-spark { display: block; width: 100%; height: 28px; margin-top: 4px; }
.body-spark path { fill: none; stroke-width: 2; }
.body-recent { min-width: 0; }
.body-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.body-recent-head h3 { margin: 0; font-size: 15px; }
.body-history-link { width: auto; min-height: 44px; padding: 6px 10px; }
.body-recent-list { list-style: none; margin: 4px 0 0; padding: 0; }
.body-recent-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; align-items: center; gap: 10px; min-height: 44px; padding: 8px 4px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; cursor: pointer; border-radius: var(--r-sm); }
.body-recent-row:last-child { border-bottom: 0; }
.body-recent-row:hover { background: var(--surface-2); }
.body-recent-row:focus-visible { outline: 2px solid var(--text-1); outline-offset: -2px; }
.body-recent-date { font-weight: 700; }
.body-recent-values { color: var(--text-2); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.body-recent-values b { color: var(--text-1); }
.body-recent-row .checkin-photo-flag svg { width: 16px; height: 16px; color: var(--text-2); }
.body-empty { display: grid; gap: 10px; justify-items: start; }
.body-empty h3, .body-empty p { margin: 0; }
.body-empty .body-checkin-btn { min-height: 44px; padding-left: 28px; padding-right: 28px; }

/* The check-in sheet: Nutrition's sizes — on top of the keyboard on a phone,
   min(560px, 92vw) × up to 88vh on desktop. Weight first, big, with − / +. */
@media (max-width: 920px) {
  .checkin-sheet { max-height: min(90vh, calc(var(--sheet-avail-h, 100vh) - 12px)); }
}
@media (min-width: 921px) {
  .checkin-sheet { width: min(560px, 92vw); max-height: 88vh; }
}
.checkin-form { display: grid; gap: 12px; }
.checkin-form .checkin-submit-row { margin-top: 4px; }
.checkin-weigh { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 8px; }
.checkin-nudge { width: 56px; height: 56px; padding: 0; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-1); font-size: 24px; line-height: 1; cursor: pointer; }
.checkin-nudge:hover { background: var(--surface-hover); }
.checkin-weigh-field { display: block; margin: 0; min-width: 0; }
.checkin-weigh-field input { width: 100%; margin: 0; text-align: center; font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 4px 0; border: 1px solid transparent; background: transparent; color: var(--text-1); -moz-appearance: textfield; }
.checkin-weigh-field input::-webkit-outer-spin-button, .checkin-weigh-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.checkin-weigh-field input:focus { border-color: var(--border); background: var(--surface-2); }
.checkin-weigh-unit { margin: -4px 0 0; text-align: center; font-size: 13px; color: var(--text-2); }
.checkin-more { border: 1px solid var(--border); border-radius: var(--r-xl); }
.checkin-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.checkin-more > summary::-webkit-details-marker { display: none; }
.checkin-more > summary::after { content: '+'; font-size: 20px; color: var(--text-2); }
.checkin-more[open] > summary::after { content: '\2013'; }
.checkin-more-body { display: grid; gap: 12px; padding: 0 14px 14px; }
.checkin-more-body .hint { margin: 0; }
.checkin-more-body .progress-upload-section { margin: 0; }
.checkin-estimate { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.checkin-estimate-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.checkin-estimate-head .hint { margin: 2px 0 0; }
.checkin-estimate-head strong { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.checkin-estimate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.checkin-estimate-grid > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.checkin-estimate-grid strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.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; }

/* === Protocols — shots and peptides (protocols.md) ===
   Today's list, a compound (level · weight · doses, its vial or pen, the
   plan), Injection sites, and three sheets. One colour identity: --dose.
   Missed and skipped are ink or dashed, never red; a change in weight is
   ink, never red or green. */
.protocols-page { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.protocols-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.protocols-head h2 { margin: 0; font-size: 18px; }
.protocols-count, .protocols-muted, .protocols-none { color: var(--text-2); font-size: 13px; }
.protocols-none { margin: 0; }
.protocols-subhead { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); }
.protocols-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.protocols-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.protocols-row-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 44px; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.protocols-row-static { cursor: default; }
.protocols-row-main strong { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.protocols-row-main > span { font-size: 12px; color: var(--text-2); }
.protocols-check { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--text-3); display: grid; place-items: center; color: var(--surface); }
.protocols-check.is-on { background: var(--dose); border-color: var(--dose); }
.protocols-check svg { width: 18px; height: 18px; }
.protocols-ring, .protocols-empty-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--dose-dim); color: var(--dose); }
.protocols-ring svg { width: 18px; height: 18px; }
.protocols-mark { min-height: 44px; min-width: 64px; padding: 0 12px; font-size: 13px; }
.protocols-chev { color: var(--text-3); font-size: 20px; padding: 0 4px; }
.protocols-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; width: 100%; max-width: 180px; margin-top: 4px; }
.protocols-week i { height: 5px; border-radius: 2px; background: var(--surface-3); }
.protocols-week i.is-taken { background: var(--dose); }
.protocols-week i.is-skipped, .protocols-week i.is-missed { background: transparent; box-shadow: inset 0 0 0 1px var(--text-3); }
.protocols-week i.is-due, .protocols-week i.is-upcoming { background: transparent; box-shadow: inset 0 0 0 1px var(--dose); }
.protocols-week i.is-today { outline: 1.5px solid var(--text-1); outline-offset: 1px; }
.protocols-actions { margin-top: 0; }
.protocols-card { display: flex; flex-direction: column; gap: 8px; }
.protocols-card h3 { margin: 0; font-size: 15px; }
.protocols-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.protocols-card-head h2 { margin: 0; font-size: 20px; }
.protocols-card-icon { color: var(--text-2); display: inline-flex; }
.protocols-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.protocols-card-icon svg { width: 20px; height: 20px; }
.protocols-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0; font-size: 13px; }
.protocols-kv dt { color: var(--text-2); min-width: 0; }
.protocols-kv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.protocols-sites-link { flex-direction: row; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--text-1); cursor: pointer; }
.protocols-sites-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); }
.protocols-sites-text strong { color: var(--text-1); font-size: 15px; }
.protocols-body { width: 170px; max-width: 100%; align-self: center; }
.protocols-body.is-small { width: 56px; flex: none; }
.protocols-body .figure { fill: var(--surface-2); stroke: var(--text-3); stroke-width: 1; }
.protocols-body .site { fill: var(--surface-3); stroke: var(--text-3); stroke-width: 0.8; }
.protocols-body .site.is-week, .protocols-body .site.is-selected { fill: var(--dose); stroke: var(--dose); }
.protocols-body .site.is-fortnight { fill: var(--dose); fill-opacity: 0.45; stroke: var(--dose); }
.protocols-body .site.is-suggested { stroke: var(--dose); stroke-width: 1.6; stroke-dasharray: 2.5 2; }
.protocols-body [data-pick-site] { cursor: pointer; }
.protocols-body [data-pick-site]:focus-visible { outline: none; stroke: var(--text-1); stroke-width: 2; }
.protocols-suggest { margin: 0; text-align: center; font-weight: 600; }
.protocols-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: 12px; color: var(--text-2); }
.protocols-legend span { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: -6px; }
.protocols-legend .key-week, .protocols-legend .key-dose { background: var(--dose); }
.protocols-legend .key-fortnight { background: var(--dose); opacity: 0.45; }
.protocols-legend .key-rested { background: var(--surface-3); }
.protocols-legend .key-trend { background: var(--chart-trend); height: 3px; }
.protocols-legend .key-scale { background: var(--text-3); width: 6px; height: 6px; border-radius: 50%; }
.protocols-seg { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; padding: 3px; border-radius: var(--r-md); background: var(--surface-2); }
.protocols-seg button { min-height: 44px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; }
.protocols-seg button.is-on { background: var(--surface); color: var(--text-1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.protocols-big { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--text-2); font-size: 13px; }
.protocols-big strong { color: var(--text-1); font-size: 22px; font-variant-numeric: tabular-nums; }
.protocols-chart-wrap { touch-action: pan-y; border-radius: var(--r-md); }
.protocols-chart-wrap:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.protocols-chart { width: 100%; height: auto; display: block; overflow: visible; }
.protocols-chart .grid { stroke: var(--border); stroke-width: 1; }
.protocols-chart .axis { fill: var(--text-3); font-size: 9px; font-family: inherit; }
.protocols-chart .level-line { fill: none; stroke: var(--dose); stroke-width: 2; stroke-linejoin: round; }
.protocols-chart .level-area { fill: var(--dose); opacity: 0.1; }
.protocols-chart .level-ahead { fill: none; stroke: var(--dose); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: 0.8; }
.protocols-chart .level-dot { fill: var(--dose); stroke: var(--surface); stroke-width: 1.5; }
.protocols-chart .trend-line { fill: none; stroke: var(--chart-trend); stroke-width: 2.2; stroke-linejoin: round; }
.protocols-chart .trend-dot { fill: var(--chart-trend); stroke: var(--surface); stroke-width: 1.5; }
.protocols-chart .scale-dot { fill: var(--text-3); opacity: 0.7; }
.protocols-chart .today-line { stroke: var(--text-3); stroke-dasharray: 2 2; }
.protocols-chart .dose-tick { stroke: var(--dose); stroke-width: 1.4; }
.protocols-chart .skip-tick { stroke: var(--text-3); stroke-width: 1.4; stroke-dasharray: 1.5 1.5; }
.protocols-chart .cursor { stroke: var(--text-1); stroke-width: 1; }
.protocols-chart.is-stacked .panel-label { font-weight: 600; fill: var(--text-2); }
/* Calories tab (2026-10-11): eaten is Nutrition's --brand, an incomplete day an
   outline, the 7-day average ink; the level below keeps --dose. */
.protocols-chart .eaten-bar { fill: var(--brand); opacity: 0.85; }
.protocols-chart .eaten-open { fill: none; stroke: var(--brand); stroke-width: 1; stroke-dasharray: 2 1.5; }
.protocols-chart .eaten-avg { fill: none; stroke: var(--text-1); stroke-width: 1.6; stroke-linejoin: round; }
.protocols-legend .key-eaten { background: var(--brand); opacity: 0.85; }
.protocols-legend .key-open { background: transparent; box-shadow: inset 0 0 0 1px var(--brand); }
.protocols-legend .key-avg { background: var(--text-1); height: 2px; }
.protocols-cycle-title { margin: 6px 0 0; }
.protocols-cycle-peak { margin: 0; font-size: 14px; color: var(--text-1); }
.protocols-cycle { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.protocols-cycle li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; grid-template-areas: "day bar kcal" ". meta meta"; gap: 2px 10px; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.protocols-cycle li.is-peak .protocols-cycle-day, .protocols-cycle li.is-peak .protocols-cycle-kcal { font-weight: 700; }
.protocols-cycle-day { grid-area: day; color: var(--text-1); }
.protocols-cycle-bar { grid-area: bar; width: 100%; height: 8px; display: block; }
.protocols-cycle-bar rect { fill: var(--brand); opacity: 0.85; }
.protocols-cycle-kcal { grid-area: kcal; color: var(--text-1); text-align: right; }
.protocols-cycle-meta { grid-area: meta; color: var(--text-3); font-size: 12px; }
.protocols-readout { margin: 0; min-height: 1.4em; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-1); }
.protocols-note, .protocols-disclaimer { margin: 0; font-size: 12px; color: var(--text-2); }
.protocols-disclaimer { text-align: center; color: var(--text-3); }
.protocols-back { align-self: flex-start; min-height: 44px; }
.protocols-wide { width: 100%; min-height: 44px; }
.protocols-stopped summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--text-2); font-weight: 600; }
.protocols-empty { align-items: flex-start; }
.protocols-empty h2 { margin: 4px 0 0; font-size: 20px; }
.protocols-empty p { margin: 0; color: var(--text-2); }
.protocols-empty-icon svg { width: 18px; height: 18px; }
.protocols-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
/* Option A (2026-10-10): a card per compound on Today — plan on one line,
   Taken · Log… · Plan, newest doses, Plan opening in place. */
.protocols-compound { gap: 10px; }
.protocols-compound.is-due { border-color: var(--dose); }
.protocols-compound h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.protocols-pill.is-due { color: var(--dose); border-color: var(--dose); background: var(--dose-dim); }
.protocols-plan-line { display: flex; flex-wrap: wrap; gap: 6px; }
.protocols-chip-static { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: var(--text-1); }
.protocols-card-actions { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.protocols-card-actions button { min-height: 44px; min-width: 0; padding: 0 10px; white-space: nowrap; }
.protocols-card-actions .protocols-span2 { grid-column: span 2; }
.protocols-card-actions .ghost { color: var(--text-1); }
.protocols-recent { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 2px; }
.protocols-recent-row { width: 100%; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-1); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.protocols-recent-row:hover { background: var(--surface-2); }
.protocols-recent-row:focus-visible { outline: 2px solid var(--text-1); outline-offset: 1px; }
.protocols-recent-row > span:last-child { color: var(--text-2); font-variant-numeric: tabular-nums; }
.protocols-recent-row.is-just { background: var(--dose-dim); }
.protocols-just { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dose); }
.protocols-recent-empty { margin: 0; padding-top: 6px; border-top: 1px solid var(--border-subtle); }
.protocols-plan { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--border); }
.protocols-plan > p { margin: 0; }
.protocols-plan-row { min-height: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-1); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.protocols-plan-row > span:first-child { font-weight: 600; }
.protocols-plan-row > span:last-child { text-align: right; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.protocols-plan-row:focus-visible, .protocols-trends-link:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.protocols-trends-link { align-self: flex-end; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.protocols-stopped .protocols-compound { margin-top: 8px; }
/* Sheets: forms in .feedback-sheet (whole screen on a phone, see the last rule). */
.protocols-form { display: flex; flex-direction: column; }
.protocols-form [hidden] { display: none !important; }
.protocols-row-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.protocols-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.protocols-chips { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.protocols-chips legend, .protocols-site-field legend { width: 100%; margin-bottom: 6px; padding: 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
/* A chip is a radio or checkbox drawn as a pill: the input stays in the form
   (and in the tab order) under its label; :checked and focus show on the pill. */
.protocols-chip { position: relative; display: inline-flex; flex-direction: row; margin: 0; }
.protocols-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.protocols-chip span { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); color: var(--text-1); font-size: 13px; font-weight: 500; cursor: pointer; }
.protocols-chip input:checked + span { border-color: var(--text-1); box-shadow: inset 0 0 0 1px var(--text-1); font-weight: 700; }
.protocols-chip input:focus-visible + span { outline: 2px solid var(--text-1); outline-offset: 2px; }
.protocols-days .protocols-chip span { padding: 0 10px; }
.protocols-site-field { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.protocols-site-pick { display: flex; gap: 12px; align-items: flex-start; }
.protocols-site-pick .protocols-body { width: 120px; flex: none; }
.protocols-site-chips { margin: 0; }
.protocols-check-label { flex-direction: row; align-items: center; gap: 10px; color: var(--text-1); font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.protocols-check-label input[type="checkbox"] { width: 24px; height: 24px; --check-on: var(--dose); }
.protocols-mix { display: flex; flex-direction: column; gap: 4px; margin: -4px 0 12px; }
.protocols-mix:empty { display: none; }
.protocols-mix p { margin: 0; font-size: 13px; }
.protocols-error { margin: 0 0 8px; color: var(--text-1); font-weight: 600; font-size: 13px; }
.protocols-error:empty { display: none; }
@media (min-width: 921px) {
  .protocols-sheet { width: min(560px, 92vw); max-height: 88vh; }
}
@media (max-width: 420px) {
  .protocols-site-pick { flex-direction: column; align-items: stretch; }
  .protocols-site-pick .protocols-body { align-self: center; }
}

/* === Coach Mode: a client's Overview (coach-mode.md §16) ===================
   One component, two layouts: ≥921px the flyer's laptop screen (a side column of
   compliance and PRs beside the figures and the lift chart); ≤920px a status-first
   brief (Needs you, compliance and this week, figures, lift trend rows). Done and
   missed are shapes and words on neutral surfaces — never red/green — and a change
   up or down is ink. */
.coach-ov { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.coach-ov-attn { border-left: 3px solid var(--brand); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.coach-ov-attn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.coach-ov-attn-head h4, .coach-ov h4, .coach-ov h5 { margin: 0; }
.coach-ov-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); font-size: 12.5px; font-weight: 700; color: var(--text-1); }
.coach-ov-pill.is-missed span:first-child, .coach-ov-pill.is-slipping span:first-child { color: var(--text-1); }
.coach-ov-attn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.coach-ov-attn-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--border); font-size: 14px; overflow-wrap: anywhere; }
.coach-ov-attn-item:first-child { border-top: 0; }
.coach-ov-attn-item button, .coach-ov > button, .coach-ov summary { min-height: 44px; }
.coach-ov summary { display: flex; align-items: center; }
.coach-ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 290px); gap: 12px; align-items: start; }
.coach-ov-main { order: 1; }
.coach-ov-side { order: 2; }
.coach-ov-side, .coach-ov-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.coach-ov-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.coach-ov-compliance { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.coach-ov-compliance-top { display: flex; align-items: center; gap: 14px; }
.coach-ov-compliance-top > div { min-width: 0; }
.coach-ov-ring { width: 84px; height: 84px; flex: none; }
.coach-ov-ring-track { fill: none; stroke: var(--surface-3); stroke-width: 10; }
.coach-ov-ring-fill { fill: none; stroke: var(--brand); stroke-width: 10; stroke-linecap: round; }
.coach-ov-ring-text { fill: var(--text-1); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.coach-ov-sub { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.coach-ov-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.coach-ov-day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.coach-ov-day-name { font-size: 12px; color: var(--text-2); font-weight: 700; }
.coach-ov-day-mark { width: 100%; max-width: 44px; min-height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text-1); font-weight: 700; }
.coach-ov-day.is-done .coach-ov-day-mark { background: var(--surface-3); border-color: var(--text-2); }
.coach-ov-day.is-missed .coach-ov-day-mark { border: 2px dashed var(--text-1); background: transparent; }
.coach-ov-day.is-upcoming .coach-ov-day-mark { border: 2px solid var(--text-2); background: transparent; color: var(--text-2); }
.coach-ov-day[aria-current="date"] .coach-ov-day-name { color: var(--brand); }
.coach-ov-day[aria-current="date"] .coach-ov-day-mark { box-shadow: 0 0 0 2px var(--brand); }
.coach-ov-day-word { font-size: 10px; color: var(--text-2); text-align: center; white-space: nowrap; line-height: 1.15; min-height: 12px; }
.coach-ov-day.is-missed .coach-ov-day-word { text-decoration: underline; color: var(--text-1); }
.coach-ov-lifts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.coach-ov-lifts-rows { display: none; }
.coach-ov-chart-wrap { min-width: 0; }
.coach-ov-legend { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-2); }
.coach-ov-legend li { display: inline-flex; align-items: center; gap: 6px; }
.coach-ov-chart { position: relative; }
.coach-ov-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.coach-ov-chart line.coach-ov-gridline { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.coach-ov-axis { fill: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.coach-ov-endlabel { fill: var(--text-1); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.coach-ov-end { stroke: var(--surface); stroke-width: 2; }
.coach-ov-hit { fill: transparent; cursor: default; }
.coach-ov-hit:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; fill: var(--surface-hover); fill-opacity: .5; }
.coach-ov-hit:hover { fill: var(--surface-hover); fill-opacity: .35; }
.coach-ov-tip { position: absolute; top: 0; transform: translateY(-4px); padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text-1); font-size: 12.5px; max-width: 260px; pointer-events: none; z-index: 2; }
.coach-ov-key { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; background: var(--lift); }
.coach-ov-table td, .coach-ov-table th { white-space: nowrap; }
.coach-ov-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.coach-ov-spark { display: block; width: 90px; height: auto; margin-left: auto; }
.coach-ov-spark-cell { width: 100px; }
.coach-ov-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.coach-ov-pr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.coach-ov-pr-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--border); }
.coach-ov-pr-list li:first-child { border-top: 0; }
.coach-ov-pr-name { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 920px) {
  .coach-ov-grid { grid-template-columns: minmax(0, 1fr); }
  .coach-ov-side { display: contents; }
  .coach-ov-compliance { order: 1; }
  .coach-ov-main { order: 2; }
  .coach-ov-prs { order: 3; }
  .coach-ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-ov-lifts-chart { display: none; }
  .coach-ov-lifts-rows { display: block; }
  .coach-ov-table td:first-child { white-space: normal; }
}
@media (prefers-reduced-motion: no-preference) {
  .coach-ov-ring-fill { transition: stroke-dasharray var(--ease-out); }
}

/* === Phones: every slide-up sheet is the whole screen ===
   Product owner, 2026-10-05: "I would like these slide ups to take the entire
   page everywhere, its hard to use when its only part". At ≤920px each sheet
   still slides up from the bottom, but fills the screen edge to edge — no
   strip of page above it, no rounded top, no grab handle; ✕ in the header
   closes it. With the keyboard up a sheet fills the space above the keys:
   the page scripts set its inline bottom to the keyboard's height and
   --sheet-avail-h / --tray-avail-h to what's left. Desktop is unchanged
   (centred pop-ups). See app-shell-navigation.md §5a. */
@media (max-width: 920px) {
  .feedback-sheet,
  .nutrition-sheet,
  .checkin-sheet,
  .comment-tray,
  .comment-tray.log-notes-tray,
  .detail-sheet {
    top: auto;
    bottom: 0;
    height: var(--sheet-avail-h, var(--tray-avail-h, 100%));
    max-height: none;
    border: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .checkin-details-modal,
  .history-details-overlay .history-details-modal,
  .exercise-info-dialog {
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .checkin-details-modal,
  .history-details-overlay .history-details-modal { padding-top: max(16px, env(safe-area-inset-top, 0px)); }
  /* The body fills the screen under the header, so Add food's search bar
     (nutrition.md §5h) stays docked at the bottom, by the thumb, even when
     the list above it is short. */
  .feedback-sheet-body { flex: 1 1 auto; }
  .feedback-sheet-body:has(> .nutrition-search-dock) { display: flex; flex-direction: column; }
  .feedback-sheet-body > .nutrition-search-dock { margin-top: auto; }
  .feedback-sheet-handle,
  .comment-tray-handle,
  .detail-sheet-handle { display: none; }
  /* The exercise picker is a sheet too: slides up, fills the screen, ✕ closes. */
  .exercise-search-overlay { align-items: stretch; padding: 0; }
  .exercise-search-modal {
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
    animation: exercise-search-slide-up 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .exercise-search-cancel { font-size: 20px; min-width: 44px; min-height: 44px; color: var(--hint); }
}
@keyframes exercise-search-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .exercise-search-modal { animation: none; } }
/* Keep long notes out of the action row, including on narrow phones. */

.routine-list-actions > .primary { flex: 1; min-width: 0; min-height: 44px; }
.routine-list-options { flex: 0 0 auto; }
.routine-list-options > summary {
  display: grid;
  place-items: center;
  list-style: none;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 24px;
  cursor: pointer;
  color: var(--text-1);
}
.routine-list-options > summary::-webkit-details-marker { display: none; }
/* Open in flow so controls cannot be clipped by the scrolling modal. */
.routine-list-options-actions { display: grid; gap: 4px; margin-top: 4px; }
.routine-list-options-actions > button { min-height: 44px; }
.routine-create { width: 100%; min-height: 44px; }
.routine-list-details > summary:focus-visible,
.routine-list-options > summary:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }

/* Log → Routines and the routine builder (wod-logging.md §4a): the list and
   the builder are sheets (components/routines-sheet.js, routine-builder.js),
   full screen on a phone like every sheet, a wider centred card on desktop.
   Coach Mode's library builds with the same sheet. */
@media (min-width: 921px) {
  .feedback-sheet.routines-sheet,
  .feedback-sheet.routine-builder-sheet,
  .feedback-sheet.routine-picker-sheet { width: min(640px, 94vw); max-height: 88vh; }
}
.routines-panel { display: flex; flex-direction: column; gap: 12px; }

/* The Log's Video (components/exercise-video-sheet.js): a coach's reference
   video for a gym exercise plays in a sheet over the exercise, 16:9, full
   width; the padding box keeps the ratio on older engines too. */
@media (min-width: 921px) {
  .feedback-sheet.exercise-video-sheet { width: min(760px, 94vw); max-height: 88vh; }
}
.exercise-video { display: flex; flex-direction: column; gap: 12px; }
.exercise-video-frame { position: relative; width: 100%; height: 0; padding-top: 56.25%; overflow: hidden; border-radius: 12px; background: var(--surface-2); }
.exercise-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.exercise-video-hint { margin: 0; }
.exercise-video-open { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; }
.routines-toolbar { display: flex; flex-direction: column; gap: 8px; }
.routines-search { min-height: 44px; }
.routines-status:empty { display: none; }
.routines-status { margin: 0; }
.routine-list-names {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.routine-builder { display: flex; flex-direction: column; gap: 10px; }
.routine-builder-hint { margin: 0; }
.routine-builder-title { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.routine-builder-index,
.routine-queue-index {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}
.routine-builder-moves { display: flex; gap: 4px; flex: 0 0 auto; }
.routine-builder-icon { min-width: 44px; min-height: 44px; padding: 0; font-size: 18px; line-height: 1; }
.routine-builder-targets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 560px) { .routine-builder-targets { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.routine-builder-targets input,
.routine-builder-targets select { min-height: 44px; min-width: 0; }
.routine-builder-add { display: flex; gap: 8px; flex-wrap: wrap; }
.routine-builder-add > button { flex: 1 1 160px; min-height: 44px; }
.routine-picker { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.routine-picker-search { min-height: 44px; }
.routine-picker-tabs { margin: 0; }
.routine-picker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; }
.routine-pick-row { border-bottom: 1px solid var(--border-subtle); }
.routine-pick-name { flex: 1; min-width: 0; color: var(--text-1); overflow-wrap: anywhere; }
.routine-pick-meta { flex: 0 0 auto; font-size: 12px; color: var(--text-2); }
.routine-picker-more { padding: 8px 0; }
.routine-picker-actions { position: sticky; bottom: 0; padding: 8px 0 4px; background: var(--surface); }
.routine-queue-item > button { min-height: 44px; min-width: 72px; }
.routine-last-time { font-size: 12px; }
.routine-update-card {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.routine-update-title { margin: 0; font-weight: 600; color: var(--text-1); }
.routine-update-changes,
.routine-update-done { margin: 0; }

/* Creation origin, shared with the ChatGPT card and Ui.AiBadge on native. */
.ai-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-inline-start: 4px;
  padding: 2px 7px;
  border: 1px solid var(--info);
  border-radius: 999px;
  color: var(--info);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

/* Coach daily work: an inbox and compact client controls. */
.coach-client-actions > summary, .coach-more-tabs > summary, .coach-inbox-context > summary,
.coach-upcoming > summary, .coach-alert-settings > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.coach-client-management { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding-top: 8px; }
.coach-client-tabs { flex-wrap: wrap; overflow: visible; gap: 4px; }
.coach-client-tabs > .tab { flex: 1 1 auto; }
.coach-more-tabs { position: relative; }
.coach-more-tabs > summary { padding: 0 12px; }
.coach-more-tabs > div { position: absolute; right: 0; top: 100%; min-width: 160px; z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; display: grid; gap: 4px; box-shadow: 0 4px 16px var(--brand-glow); }
.coach-more-tabs button { min-height: 44px; }
.coach-inbox { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.coach-inbox-list { display: flex; flex-direction: column; gap: 8px; max-height: 75vh; overflow: auto; }
.coach-inbox-list h3, .coach-chat-heading h3 { margin: 0; }
.coach-inbox-list input, .coach-inbox-list > button { min-height: 44px; }
.coach-inbox-row { display: flex; align-items: center; gap: 10px; min-height: 64px; width: 100%; padding: 10px; background: transparent; color: var(--text-1); border: 1px solid transparent; border-radius: var(--r-sm); text-align: left; }
.coach-inbox-row.is-selected { background: var(--brand-dim); border-color: var(--brand); }
.coach-inbox-row > span:not(.coach-avatar):not(.coach-unread) { display: grid; gap: 4px; flex: 1; min-width: 0; }
.coach-inbox-row .hint { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-inbox-context { margin-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.coach-inbox-context .coach-history-list { max-height: 220px; overflow: auto; }
.coach-thread-input { display: block; min-width: 0; }
.coach-thread-older { align-self: center; min-height: 44px; }
.coach-today { display: grid; gap: 8px; padding: 12px 0; }
.coach-today h3, .coach-today p { margin: 0; }
.coach-today-event { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.coach-schedule-open.primary { text-decoration: none; justify-content: center; }
.coach-card-actions > button { min-height: 44px; }
.coach-chat-sheet { width: min(760px, 92vw); height: min(760px, 88vh); max-height: 88vh; }
.coach-chat-sheet .feedback-sheet-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.coach-chat-sheet [data-my-thread], .coach-chat-sheet [data-coach-thread] { flex: 1; min-height: 0; }
.coach-chat-sheet .coach-thread { height: 100%; min-height: 0; }
.coach-chat-sheet .coach-thread-list { flex: 1; min-height: 0; max-height: none; }
.coach-chat-sheet .coach-thread-compose { flex-shrink: 0; }
.coach-chat-sheet .coach-inbox-context { flex-shrink: 0; }
@media (max-width: 920px) {
  .coach-inbox { display: block; }
  .coach-inbox-list { max-height: none; }
  .coach-inbox-chat { display: none; }
  .coach-chat-sheet { width: 100%; height: var(--sheet-avail-h, 100dvh); max-height: none; }
  .coach-client-head-text { min-width: 0; }
  .coach-client-actions { margin-left: auto; }
  .coach-card-actions { gap: 8px; }
  .coach-today-event { padding: 12px; }
}

/* Program Mode uses the same hosted page on the web and native. */
#programView { display: none; gap: 16px; }
#programView.active { display: grid; }
#programView [data-program-body] { display: grid; gap: 16px; min-width: 0; }
.program-actions { display: flex; justify-content: flex-end; }
.program-actions[hidden] { display: none; }
.program-actions button { min-height: 44px; }
.program-hosted-nav { display: none; flex-wrap: wrap; gap: 8px; }
.embed-native .program-hosted-nav { display: flex; }
.program-hosted-nav .nav-btn { width: auto; flex: 1; }
.program-hosted-nav .nav-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.program-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.program-macros dt { color: var(--text-2); }
.program-macros dd { margin: 6px 0; font-size: 1.2rem; font-weight: 700; }
.program-event { display: grid; justify-items: start; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); }
.program-event h4, .program-event p { margin: 0; }
.program-event details { width: 100%; }
.program-event summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.program-event li { margin: 10px 0; }
.program-calendar-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.program-calendar-tools [aria-pressed="true"] { border-color: var(--brand); color: var(--brand); }
.program-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.program-calendar-day { min-height: 84px; min-width: 0; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--surface-2); color: var(--text-1); border: 1px solid var(--line); border-radius: var(--r-sm); }
.program-calendar-day small { font-size: .7rem; }
.program-calendar-day[aria-current="date"] { font-weight: 700; }
.program-calendar-day[aria-pressed="true"] { border-color: var(--brand); outline: 2px solid var(--brand); }
/* Day marks (coach-mode.md §23): one small shape per thing that happened that day, under the
   date. Shape and colour both carry the meaning, so colour is never the only cue; the key
   under the grid names each one and the words reach a screen reader. */
.program-day-marks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; min-height: 12px; }
.program-mark { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; box-sizing: border-box; }
.program-mark-done { border-radius: 50%; background: var(--green); }
.program-mark-missed { border-radius: 50%; border: 2px solid var(--text-2); }
.program-mark-upcoming { border-radius: 50%; border: 2px dashed var(--brand); }
.program-mark-appointment { background: var(--text-1); transform: rotate(45deg) scale(.85); }
.program-mark-water { width: 9px; height: 9px; border-radius: 50% 50% 50% 0; background: var(--water); transform: rotate(-45deg); }
.program-mark-target { border-radius: 50%; border: 2px solid var(--green); background: radial-gradient(circle, var(--green) 0 2px, transparent 3px); }
.program-calendar-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: .8rem; }
.program-calendar-key li { display: inline-flex; align-items: center; gap: 6px; }
.program-day-details > .program-event:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 920px) {
  #programView { padding-left: var(--pad-l); padding-right: var(--pad-r); }
  #programView .card { min-width: 0; }
  .program-macros { grid-template-columns: repeat(2, 1fr); }
  .program-calendar-grid { gap: 3px; }
  .program-calendar-day { min-height: 80px; font-size: .7rem; overflow-wrap: anywhere; }
  .program-calendar-day small { font-size: .6rem; }
  html:not(.embed-native) .program-actions { display: none; }
}
@media (min-width: 921px) {
  .program-day-sheet { width: min(680px, 92vw); }
}

.program-calendar-scroll { padding: 3px; }
/* A phone's seven columns share the card's width, whatever it is (2026-10-17: the Sunday
   column was clipped at 390px). */
@media (max-width: 920px) {
  .program-calendar-day { padding: 8px 2px; }
  .program-calendar-day time { text-align: center; }
}

/* Coach workspace audit: one local navigator, comfortable touch targets and
   fluid desktop space shared by every authenticated role. */
.shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.coach-default-logo-light { display: none; }
html[data-theme="light"] .coach-default-logo-dark { display: none; }
html[data-theme="light"] .coach-default-logo-light { display: block; }
.coach-workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coach-workspace-heading h3 { margin: 0; }
.coach-workspace-heading button { min-height: 44px; }
.coach-workspace-links { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 4px; }
.coach-workspace-links button { min-height: 44px; }
.coach-workspace-links .active, .coach-client-sections .active { background: var(--brand-dim); border-color: var(--brand); color: var(--text-1); font-weight: 700; }
.coach-client-workspace { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 16px; align-items: start; }
.coach-client-sections { display: grid; gap: 4px; position: sticky; top: 16px; }
.coach-client-sections button { min-height: 44px; text-align: left; }
.coach-client-panel { min-width: 0; display: grid; gap: 12px; }
/* Coach Mode → Class timer (coach-mode.md §21): the builder, then a full-screen stage in the club's own brand. */
.class-timer-page { display: flex; flex-direction: column; gap: 12px; }
.class-templates { display: flex; gap: 8px; flex-wrap: wrap; }
.class-templates button { min-height: 44px; border-radius: var(--r-full); }
.class-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.class-field input { min-height: 44px; }
.class-field-grow { flex: 1 1 160px; min-width: 0; }
.class-field-num { flex: 0 0 84px; }
.class-section { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); padding: 12px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.class-section-head, .class-exercise { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.class-timer-page button, .class-timer-page input { min-height: 44px; }
.class-icon-btn { min-width: 44px; min-height: 44px; padding: 0; }
.class-summary { margin: 0; }
.class-actions .primary { width: 100%; min-height: 52px; font-weight: 700; }
.class-saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.class-saved-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.class-saved-name { display: flex; flex-direction: column; min-width: 0; }
.coach-class-form { display: flex; flex-direction: column; gap: 12px; }
.coach-class-sheet .class-readonly ul { margin: 6px 0 0; padding-inline-start: 18px; }
.class-stage-open { overflow: hidden; }
.class-stage { position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-columns: minmax(0, 1fr) 300px; background: var(--bg); color: var(--text-1); --phase: var(--brand); }
.class-stage.rest { --phase: var(--green); }
.class-stage.done { --phase: var(--gold); }
.class-stage-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--phase) 22%, transparent), transparent 62%); }
.class-stage-top { display: flex; align-items: center; gap: 12px; padding: 14px var(--pad-r) 14px var(--pad-l); }
.class-stage-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.class-stage-brand .coach-brand-logo { max-height: 44px; max-width: 160px; }
.class-stage-club { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.class-stage-title { flex: 1; min-width: 0; font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.class-stage-btn { min-width: 44px; min-height: 44px; }
.class-stage-bar { height: 10px; background: var(--surface-2); }
.class-stage-bar i { display: block; height: 100%; width: 0; background: var(--phase); transition: width 250ms linear; }
.class-stage-ringwrap { --ring: min(68vh, 80vw, 560px); flex: 1; min-height: 0; display: grid; place-items: center; padding: 12px; }
/* Everything inside the ring is sized from the ring itself, so no word can reach the line: the inner circle is .85 of it. */
.class-stage-dial { position: relative; width: var(--ring); height: var(--ring); }
.class-stage-dial svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.class-ring-track, .class-ring-arc { fill: none; stroke-width: 10; }
.class-ring-track { stroke: var(--surface-2); }
.class-ring-arc { stroke: var(--phase); stroke-linecap: round; transition: stroke-dashoffset 250ms linear, stroke 200ms; }
.class-stage-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--ring) * .012); padding: 0 calc(var(--ring) * .13); }
.class-stage-phase { letter-spacing: .2em; font-weight: 800; color: var(--phase); font-size: calc(var(--ring) * .05); line-height: 1.1; }
.class-stage-time { font-size: calc(var(--ring) * .25); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.class-stage-time.is-long { font-size: calc(var(--ring) * .16); }
.class-stage-name { max-width: calc(var(--ring) * .66); font-size: calc(var(--ring) * .062); font-weight: 800; line-height: 1.12; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.class-stage-round { max-width: calc(var(--ring) * .56); color: var(--text-2); font-size: calc(var(--ring) * .036); line-height: 1.2; overflow-wrap: anywhere; }
.class-stage-controls { display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 14px var(--pad-r) calc(14px + var(--safe-bottom, 0px)) var(--pad-l); }
.class-stage-controls .class-stage-btn { min-height: 56px; min-width: 56px; }
.class-stage-next { flex: 1; color: var(--text-2); min-width: 0; }
.class-stage-outline { border-left: 1px solid var(--border); background: var(--surface); padding: 16px; overflow: auto; }
.class-stage-outline h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin: 0 0 10px; }
.class-outline-section { margin-top: 10px; font-weight: 700; }
.class-outline-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-md); color: var(--text-2); border-left: 4px solid transparent; }
.class-outline-row.done { text-decoration: line-through; opacity: .5; }
.class-outline-row.current { background: var(--surface-2); color: var(--text-1); border-left-color: var(--brand); }
@media (max-width: 760px) {
  .class-stage { grid-template-columns: minmax(0, 1fr); }
  .class-stage-outline { display: none; }
  .class-stage-club, .class-stage-title { display: none; }
  .class-stage-top { justify-content: space-between; }
  .class-stage-controls { flex-wrap: wrap; justify-content: center; }
  .class-stage-next { flex-basis: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .class-ring-arc, .class-stage-bar i { transition: none; } }
.coach-client-section-picker, .coach-plan-picker { display: none; }
.coach-roster-actions > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--text-2); }
.coach-message-client { min-height: 44px; }
.coach-inbox { align-items: stretch; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.coach-inbox-list { position: sticky; top: 16px; }
.coach-inbox-row { cursor: pointer; }
.coach-inbox-row:hover { background: var(--surface-2); }
.coach-inbox-chat { min-width: 0; display: flex; flex-direction: column; height: clamp(500px, calc(100dvh - 220px), 1000px); }
.coach-inbox-chat > [data-coach-thread] { flex: 1; min-height: 0; }
.coach-inbox-chat .coach-thread { height: 100%; min-height: 0; }
.coach-inbox-chat .coach-thread-list { flex: 1; min-height: 0; max-height: none; overscroll-behavior: contain; }
.coach-thread-compose { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.coach-thread-compose textarea { min-height: 44px; max-height: 160px; resize: none; overflow-y: auto; border-radius: var(--r-xl); padding: 10px 14px; }
.coach-thread-send { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 80px; padding-inline: 14px; }
.coach-thread-send svg { width: 18px; height: 18px; flex-shrink: 0; }
.coach-compose-hint { margin: 0; font-size: 12px; }
.coach-gym-form { max-width: none; }
.coach-gym-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
.coach-gym-section { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.coach-gym-section > p { margin: 0; }
.coach-gym-section input:not([type="color"]) { width: 100%; min-height: 44px; }
.coach-gym-section > button { align-self: flex-start; min-height: 44px; }
.coach-logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.coach-gym-logo { min-width: 0; margin: 0; }
.coach-gym-logo input[type="file"] { max-width: 100%; font-size: 12px; }
.coach-gym-logo button { min-height: 44px; white-space: normal; }
.coach-gym-logo-preview { justify-content: center; min-height: 96px; background: var(--surface-2); border-radius: var(--r-md); padding: 12px; }
.coach-gym-logo-preview img { max-width: 100%; max-height: 72px; }
.coach-gym-logo-preview.is-wide img { max-width: 100%; max-height: 48px; }
.coach-color-row { flex-wrap: wrap; }
.coach-color-row input:not([type="color"]) { min-width: 100px; width: 120px; }
.coach-gym-save { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.coach-gym-save button { min-height: 44px; }
/* Program Mode → My Club (coach-mode.md §14; owner, 2026-10-17: design A). */
.club-page { width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.club-head { display: flex; align-items: center; gap: 14px; }
.club-head-logo { flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: var(--r-lg); background: var(--surface-2); overflow: hidden; }
.club-head-logo img { width: 100%; height: 100%; object-fit: contain; }
.club-head-who { flex: 1; min-width: 0; }
.club-head-who h2 { margin: 0; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.club-head-actions { display: flex; gap: 6px; }
.club-icon-btn { width: 44px; height: 44px; padding: 0; color: var(--text-1); }
.club-icon-btn svg, .club-tabs svg, .club-post-chevron svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.club-icon-btn.is-loading-icon svg { animation: club-spin .8s linear infinite; }
@keyframes club-spin { to { transform: rotate(360deg); } }
.club-page [data-club-status] { margin: 0; }
.club-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.club-today .club-today-title { margin: 4px 0 2px; font-size: 24px; line-height: 1.2; }
.club-today .gym-post-text { color: var(--text-1); font-size: 15px; }
.club-today .gym-post-actions { gap: 8px 16px; margin-top: 12px; }
.club-log-wod { min-height: 44px; text-decoration: none; }
.club-tabs { margin-bottom: 0; border: 1px solid var(--border); }
.club-tabs .tab { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.club-post-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.club-post-list li + li { border-top: 1px solid var(--border-subtle); }
.club-post-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; border: 0; background: transparent; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.club-post-row:hover { background: var(--surface-hover); }
.club-post-row:focus-visible { outline: 2px solid var(--text-1); outline-offset: -2px; }
.club-post-day { display: flex; flex-direction: column; align-items: center; line-height: 1.1; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--text-2); }
.club-post-day b { font-size: 20px; color: var(--text-1); }
.club-post-main strong { display: block; }
.club-post-main .hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.club-post-chevron { color: var(--text-3); }
.gym-instagram-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.gym-instagram-bar .hint { flex: 1 1 260px; margin: 0; }
.gym-instagram .gym-post-link { min-height: 44px; display: inline-flex; align-items: center; }
.gym-instagram-frame { display: block; width: 100%; height: clamp(480px, 75vh, 860px); border: 0; border-radius: var(--r-md); background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .club-icon-btn.is-loading-icon svg { animation: none; } }
.coach-page :is(button, input, select, textarea, summary, a):focus-visible,
.coach-chat-sheet :is(button, textarea, summary):focus-visible { outline: 2px solid var(--text-1); outline-offset: 3px; }
@media (min-width: 921px) {
  .protocols-page { max-width: none; }
}
@media (min-width: 921px) and (max-width: 1250px) {
  .coach-split { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
  .coach-client-workspace { grid-template-columns: minmax(0, 1fr); }
  .coach-client-sections { display: flex; flex-wrap: wrap; position: static; }
  .coach-gym-grid, .coach-logo-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .coach-client-workspace, .coach-gym-grid { grid-template-columns: minmax(0, 1fr); }
  .coach-client-sections, .coach-plan-links { display: none; }
  .coach-client-section-picker, .coach-plan-picker { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
  .coach-client-section-picker select, .coach-plan-picker select { min-height: 44px; }
  .coach-workspace-links button { flex: 1 1 auto; }
  .coach-inbox-chat { display: none; }
  .coach-inbox-list { position: static; }
  .coach-chat-sheet .coach-chat-heading { display: none; }
  .coach-thread-send { min-width: 72px; padding-inline: 12px; }
  .coach-client-head .coach-client-actions { width: 100%; }
  .coach-gym-form, .coach-gym-grid, .coach-gym-section { min-width: 0; }
  .coach-logo-grid { grid-template-columns: minmax(0, 1fr); }
  .club-head-who h2 { font-size: 17px; }
  .club-head-logo { width: 76px; height: 76px; }
  .club-today .club-today-title { font-size: 21px; }
  .club-today .club-log-wod { flex: 1; }
  .gym-instagram-frame { height: clamp(440px, 70vh, 720px); }
}

/* Supporting copy remains readable on both club themes. */
.coach-page .hint, .coach-chat-sheet .hint,
.coach-page input::placeholder, .coach-thread-compose textarea::placeholder { color: var(--text-2); }
@media (max-width: 920px) {
  #coachView:has(.coach-split.has-selection) .coach-workspace-heading { display: none; }
}

#programView [data-program-club] { display: grid; gap: 16px; min-width: 0; }

/* Analytics is its own lens. Hosted native pages draw the same area switcher. */
.performance-header { margin-bottom: 16px; }
.performance-header h2 { margin-bottom: 6px; }
.performance-hosted-nav { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.embed-native .performance-hosted-nav { display: flex; }
.performance-hosted-nav .nav-btn { flex: 1 1 40%; min-height: 44px; }
.performance-hosted-nav .nav-btn:last-child { flex-basis: 100%; }
.performance-lens #mobileHeaderActionSlot .nav-btn { min-height: 44px; }
@media (max-width: 920px) {
  .performance-lens #mobileHeaderActionSlot .nav-btn span { display: none; }
  .performance-lens #mobileHeaderActionSlot .nav-btn { width: 44px; padding: 10px; }
}

.nutrition-page [data-open-nutrition-analytics] { min-height: 44px; }
/* The Body log (body-checkins.md §1a): weigh in on the page, the last 30
   days, this week, progress photos and the newest check-ins. Desktop is two
   columns (weigh-in and this week left, the glance and photos right, the
   check-ins full width); a phone stacks them. Changes are ink, never red or
   green. */
.body-log { display: grid; gap: 12px; align-items: start; }
.body-log > .card { min-width: 0; margin: 0; }
.body-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.body-card-head h3 { margin: 0; font-size: 15px; }
.body-card-link { width: auto; min-height: 44px; padding: 6px 10px; }
.body-status { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.body-status.is-done { color: var(--text-1); }
.body-weighin-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.body-weighin-form > * { min-width: 0; }
.body-weighin-form .checkin-date-field { margin-bottom: 4px; }
.body-weighin .checkin-weigh-field input { font-size: 48px; }
.body-weighin-actions { display: grid; grid-template-columns: 3fr 1fr; gap: 8px; margin-top: 6px; }
.body-weighin-actions button { min-height: 44px; min-width: 0; }
.body-glance { display: grid; gap: 10px; }
.body-glance .body-card-head { margin-bottom: 0; }
.body-glance-nums { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.body-week-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.body-week-day { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 64px; padding: 6px 2px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle); font-size: 12px; font-weight: 600; color: var(--text-2); }
.body-week-day b { font-size: 13px; color: var(--text-1); font-variant-numeric: tabular-nums; }
.body-week-day.is-logged { border-color: color-mix(in srgb, var(--chart-trend) 55%, transparent); background: color-mix(in srgb, var(--chart-trend) 12%, var(--surface-2)); }
.body-week-day.is-today { outline: 2px solid var(--text-1); outline-offset: 1px; }
.body-week-day.is-future { opacity: .5; }
.body-week-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.body-week-tape { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.body-week-metric { display: grid; gap: 2px; min-width: 0; }
.body-week-metric b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.body-week-metric small { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.body-week-tape-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.body-angle { flex: 0 1 220px; }
.body-photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.body-photo-pair:has(> :only-child) { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
.body-photo { margin: 0; min-width: 0; cursor: pointer; border-radius: var(--r-lg); }
.body-photo:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.body-photo img { display: block; width: 100%; height: 240px; object-fit: cover; object-position: center top; border-radius: var(--r-lg); background: var(--surface-2); }
.body-photo figcaption { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.body-photos .hint { margin: 8px 0 0; }
.body-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.body-photo-actions button { flex: 1 1 auto; width: auto; min-height: 44px; }
.body-recent--log .body-recent-list { margin-top: 0; }
.body-recent-row--log { min-height: 52px; font-size: 14px; }
.body-recent-weight { font-variant-numeric: tabular-nums; }
.body-recent-weight b { color: var(--text-1); }
.body-recent-unit { color: var(--text-2); font-size: 12px; }
.body-recent-change { margin-left: 8px; color: var(--text-2); font-size: 13px; }
.body-recent-sub { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.body-recent-sub:empty { display: none; }
.body-recent-col, .body-recent-colhead { display: none; }
.body-recent-foot { display: flex; justify-content: center; padding-top: 8px; }
@media (min-width: 921px) {
  .body-log { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .body-weighin { grid-column: 1; grid-row: 1; }
  .body-glance { grid-column: 2; grid-row: 1; }
  .body-week { grid-column: 1; grid-row: 2; }
  .body-photos { grid-column: 2; grid-row: 2; }
  .body-log > .body-empty { grid-column: 2; grid-row: 1; }
  .body-recent--log { grid-column: 1 / -1; }
  .body-weighin, .body-glance { align-self: stretch; }
  .body-weighin .checkin-weigh-field input { font-size: 56px; }
  .body-recent-row--log { grid-template-columns: minmax(110px, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 24px; }
  .body-recent-col { display: block; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
  .body-recent-colhead { display: grid; min-height: 36px; cursor: default; font-size: 12px; font-weight: 700; color: var(--text-2); border-bottom: 1px solid var(--border); }
  .body-recent-colhead:hover { background: transparent; }
  .body-recent-colhead .body-swatch { border-radius: 2px; }
  .body-recent-sub { display: none; }
}
@media (min-width: 1400px) {
  .body-log { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@media (max-width: 920px) {
  .body-recent-row--log { grid-template-columns: 64px minmax(0, 1fr) 24px; grid-template-areas: "date weight photo" "date sub photo"; row-gap: 2px; }
  .body-recent-row--log > .body-recent-date { grid-area: date; }
  .body-recent-row--log > .body-recent-weight { grid-area: weight; }
  .body-recent-row--log > .body-recent-sub { grid-area: sub; }
  .body-recent-row--log > :last-child { grid-area: photo; }
  .body-photo img { height: 190px; }
}
.body-angle button { min-height: 44px; }

/* Coach Mode: allocation includes the places held by pending invitations. */
.coach-seat-usage { display:flex; flex-direction:column; gap:4px; margin:0; }
.coach-seat-usage strong { color:var(--text-1); font-weight:600; }
.coach-tree-count { white-space:nowrap; }

/* Coach → client → History: a month calendar; a worked day opens its details. */
.coach-history-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.coach-history-cal-head h4 { margin: 0; }
.coach-history-cal-head button { min-width: 44px; min-height: 44px; }
.coach-history-cal-weekdays, .coach-history-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.coach-history-cal-weekdays { margin: 8px 0 6px; }
.coach-history-cal-weekdays span { font-size: 11px; color: var(--text-3); text-align: center; }
.coach-history-cal-day { min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); font-size: 13px; padding: 0; }
.coach-history-cal-day.is-empty { border-color: transparent; background: transparent; }
.coach-history-cal-day.is-today { border-color: var(--brand); }
.coach-history-cal-day.has-workouts { background: var(--brand-dim); color: var(--text-1); font-weight: 700; cursor: pointer; }
.coach-history-switch { display: inline-flex; gap: 6px; margin-bottom: 10px; }
.coach-history-switch button { min-height: 44px; padding: 0 16px; }
.coach-history-switch button.is-active { background: var(--brand-dim); color: var(--text-1); border-color: var(--brand); font-weight: 700; }
.coach-history-feed-end { height: 1px; }
.coach-history-cal-day small { font-size: 10px; color: var(--text-2); }

/* Club identity settings: compatible presets and theme-specific upload previews. */
.coach-brand-colors { border: 0; padding: 0; min-width: 0; }
.coach-color-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.coach-color-preset { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.coach-color-preset span { display: block; width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--preset-color); }
.coach-color-preset[aria-pressed="true"] { outline: 2px solid var(--text-1); outline-offset: 1px; }
.coach-custom-color summary { min-height: 44px; cursor: pointer; padding: 10px 0; }
.coach-gym-section select { min-height: 44px; width: 100%; }
.coach-gym-logo-preview[data-logo-theme="dark"] { background: var(--club-logo-preview-dark); }
.coach-gym-logo-preview[data-logo-theme="light"] { background: var(--club-logo-preview-light); }

/* Coach/client messaging: a full-width writing area with a calm utility row. */
.coach-thread { gap: 12px; }
.coach-thread-list { padding-block: 12px; gap: 16px; }
.coach-thread-day { gap: 12px; }
.coach-msg { padding: 12px 16px; }
.coach-msg-body { line-height: 1.55; }
.coach-msg-sender { display: block; margin-bottom: 6px; font-size: 12px; }
.coach-msg-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.coach-msg-meta { margin: 0; }
.coach-msg-like { display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 8px; color: var(--text-2); }
.coach-msg-like svg { width: 18px; height: 18px; }
.coach-msg-like[aria-pressed="true"] { color: var(--brand); }
.coach-msg-attachment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; overflow-wrap: anywhere; }
.coach-thread-compose { padding-top: 16px; gap: 12px; }
.coach-thread-input { grid-column: 1 / -1; grid-row: 3; margin: 0; }
.coach-thread-compose textarea { min-height: 72px; border-radius: var(--r-md); padding: 14px 16px; line-height: 1.5; }
.coach-thread-send { grid-column: 2; grid-row: 4; align-self: end; }
.coach-compose-tools { grid-column: 1; grid-row: 4; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.coach-compose-tools button { display: inline-flex; align-items: center; gap: 6px; padding: 8px; }
.coach-compose-tools svg { width: 18px; height: 18px; }
.coach-compose-tools > .hint { font-size: 12px; margin: 0; }
.coach-thread-files { grid-column: 1 / -1; grid-row: 1; display: grid; gap: 8px; }
.coach-thread-files[hidden], .coach-staged-files:empty { display: none; }
.coach-staged-files { display: grid; gap: 8px; }
.coach-staged-file { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); overflow-wrap: anywhere; }
.coach-staged-file > span { min-width: 0; }
.coach-staged-file small { color: var(--text-2); }
.coach-staged-file button { min-width: 44px; }
.coach-staged-thumb { width: 40px; height: 40px; flex: 0 0 40px; object-fit: cover; border-radius: var(--r-sm); }
.coach-staged-voice { flex-wrap: wrap; }
.coach-staged-voice audio { flex: 1 1 100%; min-width: 0; height: 44px; order: 3; }
/* Pictures, videos and voice messages are drawn in the thread (coach-mode.md §26). Lengths, not
   percentages: a bubble is as wide as its content, and a percentage of that collapses to nothing. */
.coach-msg-media { display: block; margin-top: 8px; max-width: 100%; }
.coach-msg-media--image { line-height: 0; border-radius: var(--r-sm); overflow: hidden; }
.coach-msg-media--image img { display: block; width: auto; height: auto; max-width: min(100%, 360px); max-height: 320px; min-width: 96px; min-height: 96px; object-fit: contain; border-radius: var(--r-sm); background: var(--surface-2); }
.coach-msg-media--video video { display: block; width: min(320px, calc(100vw - 112px)); max-width: 100%; max-height: 360px; border-radius: var(--r-sm); background: var(--surface-2); }
.coach-msg-media--audio { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.coach-msg-media--audio audio { width: min(280px, calc(100vw - 112px)); max-width: 100%; height: 44px; }
.coach-msg-voice-length { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.coach-msg-media .coach-msg-attachment { margin-top: 4px; min-height: 44px; font-size: 12px; }
.coach-msg-voice-save[hidden] { display: none; }
/* The recorder above the composer while a voice message is being taken. */
.coach-recorder { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-2); }
.coach-recorder[hidden] { display: none; }
.coach-recorder-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--brand); }
@media (prefers-reduced-motion: no-preference) { .coach-recorder-dot { animation: coach-recorder-pulse 1.2s ease-in-out infinite; } }
@keyframes coach-recorder-pulse { 50% { opacity: 0.35; } }
.coach-recorder-time { font-variant-numeric: tabular-nums; }
.coach-recorder-bar { flex: 1 1 80px; min-width: 80px; height: 6px; border-radius: 3px; background: var(--border-subtle); overflow: hidden; }
.coach-recorder-bar > span { display: block; height: 100%; width: var(--progress, 0%); background: var(--brand); }
.coach-recorder button { min-width: 44px; min-height: 44px; }
.coach-emoji-picker { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 8px; gap: 4px; background: var(--surface-2); border-radius: var(--r-md); }
.coach-emoji-picker[hidden] { display: none; }
.coach-emoji-picker button { font-size: 22px; min-width: 0; padding: 4px; }
.coach-thread-alerts { border-top: 1px solid var(--border-subtle); padding-top: 12px; font-size: 12px; }
.coach-conversation-detail { margin: 0 0 16px; line-height: 1.5; }
.coach-scope-list { gap: 8px; }
.coach-scope-row { padding-block: 16px; margin: 0; }
.coach-scope-text { gap: 6px; line-height: 1.5; }
.coach-never-shared { margin: 16px 0 0; line-height: 1.6; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); }
.coach-group-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.coach-group-heading h4 { margin: 0; }
.coach-group-heading button { min-height: 44px; }
.coach-group-row { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; min-height: 64px; gap: 12px; padding: 12px; }
.coach-group-row > span:first-child { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.coach-group-row .hint { margin: 0; }
.coach-editor-form { display: grid; gap: 20px; }
.coach-editor-form label { margin: 0; gap: 8px; }
.coach-editor-form input, .coach-editor-form select { min-height: 46px; }
.coach-editor-form fieldset { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.coach-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.coach-recipient-list { max-height: 240px; overflow: auto; }
.coach-recipient-list label, .coach-check-row, .coach-weekdays label { display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 44px; }
.coach-editor-form input[type="checkbox"] { min-height: 22px; width: 22px; height: 22px; flex: 0 0 22px; }
.coach-weekdays { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.coach-reminders-sheet { width: min(800px, 92vw); }
.coach-reminder-header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; }
.coach-reminder-header p { flex: 1; min-width: 220px; margin: 0; line-height: 1.6; }
.coach-reminder-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
.coach-reminder-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.coach-reminder-row p { margin: 6px 0 0; line-height: 1.5; }
.coach-reminder-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-reminder-actions button { min-height: 44px; }
.coach-auto-reminders { margin: 24px 0; }
.coach-auto-reminders summary { min-height: 44px; cursor: pointer; }
.coach-client-reminders { margin-bottom: 20px; padding: 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.coach-client-reminders h4 { margin: 0 0 12px; }
.coach-client-reminders p { margin: 8px 0; line-height: 1.5; }
@media (max-width: 920px) {
  .coach-emoji-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .coach-compose-tools > .hint { flex-basis: 100%; }
  .coach-editor-grid { grid-template-columns: minmax(0, 1fr); }
  .coach-reminders-sheet { width: 100%; }
  .coach-msg { max-width: 90%; }
}
.coach-msg-like { border: 0; background: transparent; }
.coach-chat-sheet .feedback-sheet-body { flex: 1; }

@media (max-width: 920px) {
  .exercise-explorer-dialog { height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .exercise-explorer-body { padding-bottom:env(safe-area-inset-bottom); }
}

/* Workout help reads as an app workspace; the selected workout remains mounted. */
.exercise-explorer-dialog { position:fixed; inset:0; width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; box-shadow:none; }
.exercise-explorer-back { display:inline-flex; align-items:center; gap:8px; width:auto; border-radius:0; white-space:nowrap; font-size:.9rem; }
.exercise-explorer-dialog .exercise-info-header h3 { font-size:1rem; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Database release status, shared by the admin DB actions. */
.db-release-values { display:flex; flex-wrap:wrap; gap:24px; margin:16px 0; }
.db-release-values dt { color:var(--text-2); font-size:12px; }
.db-release-values dd { margin:4px 0 0; font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }