:root {
  /* Neumorphism is one warm putty tone throughout; elevation comes from the
     shadow pair below, not from different background colors. */
  --bg-base: #e8e4da;
  --bg-surface: #e8e4da;
  /* Distinct from bg-base on purpose: silhouette/thumbnail SVG fills sit inside
     an inset well and need a shade of their own to read as a shape, not a hole. */
  --bg-surface-elevated: #dcd6c7;
  --bg-surface-hover: #e2ded2;
  --text-main: #4b473d;
  /* Darkened from the original #918c7d, which measured ~2.6:1 on the bone
     ground — well under WCAG AA. This shade holds ~5:1 at every muted-text
     size in the app while keeping the same warm-gray hue. */
  --text-muted: #635e51;
  --accent: #b5673c;
  --accent-hover: #a05a32;
  /* Terracotta darkened further for use as small/normal-weight TEXT (labels,
     active tab/badge/link color): --accent itself only clears ~3.3:1 on bone,
     enough for large glyphs (stat numbers) but not body-sized text. Fills,
     borders and focus rings keep using --accent since those only need 3:1. */
  --accent-strong: #8f4a2a;
  --accent-text: #ffffff;
  --accent-soft: #ecd9cd;
  --status-danger: #b23b3b;
  /* success/warning darkened from #4f8f63 / #b8842e (~3:1 and ~2.6:1 on bone,
     both failing AA) to shades that clear 4.5:1 for badge/status text. */
  --status-success: #3c6d4c;
  --status-warning: #7d5a1c;
  --border: #d9d4c5;
  --border-light: #c9c3b0;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-out: 8px 8px 16px rgba(163, 157, 138, 0.5), -8px -8px 16px rgba(255, 255, 255, 0.85);
  --shadow-out-sm: 4px 4px 8px rgba(163, 157, 138, 0.5), -4px -4px 8px rgba(255, 255, 255, 0.85);
  --shadow-in: inset 5px 5px 10px rgba(163, 157, 138, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.85);
  --shadow-in-sm: inset 3px 3px 6px rgba(163, 157, 138, 0.5), inset -3px -3px 6px rgba(255, 255, 255, 0.85);
  /* The one deliberate departure from pure neumorphism: every genuinely
     clickable control (never a decorative .panel) carries this whisper-thin
     accent-tinted ring stacked onto its existing shadow, so touch/click
     surfaces read as touchable at a glance instead of blending into the
     bone-on-bone panels around them. Strengthens on hover/focus. */
  --edge-accent: 0 0 0 1px rgba(181, 103, 60, 0.22);
  --edge-accent-hover: 0 0 0 1.5px rgba(181, 103, 60, 0.4);

  --font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Quicksand', var(--font-family);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-family);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body[dir="rtl"] {
  text-align: right;
  direction: rtl;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-main);
}

button {
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-sm);
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Every button gets a raised shadow plus a thin accent edge so it reads as
   liftable AND clickable, not just a same-toned panel; hovering lifts and
   brightens the edge, and pressing it (active/aria-pressed) flips to the
   inset shadow, the neumorphic stand-in for :hover feedback on a same-color
   surface. */
.btn-primary, .btn-secondary, .btn-danger {
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-out-sm), var(--edge-accent);
  font-weight: 600;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: box-shadow 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover {
  box-shadow: var(--shadow-out), var(--edge-accent-hover);
  transform: translateY(-1px);
}
.btn-primary:active, .btn-secondary:active, .btn-danger:active {
  box-shadow: var(--shadow-in-sm);
  transform: translateY(0);
}
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled {
  box-shadow: var(--shadow-out-sm);
  transform: none;
}

.btn-primary {
  background-color: var(--accent-soft);
  color: var(--accent-strong);
}

.btn-secondary {
  color: var(--text-main);
  padding: 0 16px;
  font-weight: 600;
}
.btn-secondary.active, .btn-secondary[aria-selected="true"] {
  box-shadow: var(--shadow-in-sm);
  color: var(--accent-strong);
}

.btn-danger {
  color: var(--status-danger);
  padding: 0 16px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background-color: var(--bg-base);
  box-shadow: 0 6px 14px -8px rgba(163, 157, 138, 0.55);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.header-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.prototype-banner {
  text-align: center;
  padding: 8px 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
  background-color: var(--bg-surface);
  letter-spacing: 0.02em;
}

.offline-banner {
  text-align: center;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  /* Was #38bdf8 on a tint of itself — same hue, ~1.6:1. Darkened, same hue
     family so it still reads as distinct from the terracotta/status colors. */
  color: #145d7d;
  background: rgba(56, 189, 248, 0.12);
  border-bottom: 1px solid rgba(56, 189, 248, 0.3);
  letter-spacing: 0.02em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* Layout Containers */
.container {
  width: 100%;
}
.container-member {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 16px 120px 16px;
}
.container-coach {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 24px 100px 24px;
  display: grid;
  gap: 28px;
  grid-template-columns: 240px 1fr;
}
@media (max-width: 860px) {
  .container-coach {
    grid-template-columns: 1fr;
    padding: 16px 16px 100px 16px;
  }
}

/* Typography Hierarchy */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main);
}
h1 { font-size: 1.85rem; margin-bottom: 20px; }
h2 { font-size: 1.45rem; margin-bottom: 14px; }
h3 { font-size: 1.15rem; margin-bottom: 10px; }
h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 8px; }

.text-muted { color: var(--text-muted); font-size: 0.9rem; }
.text-accent { color: var(--accent-strong); }
.text-danger { color: var(--status-danger); }
.text-success { color: var(--status-success); }
.text-warning { color: var(--status-warning); }

/* Structural Panels */
.panel {
  background-color: var(--bg-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-out);
  padding: 20px;
  margin-bottom: 20px;
}

.exercise-panel {
  background-color: var(--bg-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-out);
  padding: 20px;
  margin-bottom: 18px;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.exercise-panel.is-skipped {
  opacity: 0.6;
  box-shadow: var(--shadow-in);
}

/* Collapsed row for a done or not-yet-started exercise in the active workout —
   only the exercise currently being worked gets the full .exercise-panel. */
.exercise-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: start;
  background-color: var(--bg-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-out-sm), var(--edge-accent);
  padding: 12px 16px;
  margin-bottom: 10px;
  color: var(--text-main);
  min-height: 56px;
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.exercise-summary:hover {
  box-shadow: var(--shadow-out), var(--edge-accent-hover);
}
.exercise-summary:active {
  box-shadow: var(--shadow-in-sm);
  transform: translateY(1px);
}
.exercise-summary.done { opacity: 0.75; }
.exercise-summary.upcoming { opacity: 0.65; }
.exercise-summary-check {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-out-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-muted);
}
.exercise-summary.done .exercise-summary-check {
  box-shadow: var(--shadow-in-sm);
  color: var(--accent-strong);
}
.exercise-summary-text { flex: 1; min-width: 0; }
.exercise-summary-name { font-weight: 700; font-size: 0.95rem; }
.exercise-summary-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: var(--font-mono);
}
.exercise-summary-chevron {
  color: var(--text-muted);
  flex: 0 0 auto;
}

.flex-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.flex-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.justify-between {
  justify-content: space-between;
}
.align-start {
  align-items: flex-start;
}

/* Numeric & Stat Hierarchy */
/* Every mono numeral display gets tabular-nums so digits line up in a
   column (set counts, PRs, timers, load bars) — JetBrains Mono is already
   fixed-width, but this keeps figure alignment explicit and correct even if
   the font stack ever falls back. */
.stat-value, .set-number, .set-prev-ghost, .timer-display, .load-value,
.bmi-value, .pr-card-value, .set-pr-badge, .chat-voice-time {
  font-variant-numeric: tabular-nums;
}
.stat-block {
  display: flex;
  flex-direction: column;
}
.stat-value {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  font-family: var(--font-mono);
  color: var(--text-main);
}
.stat-value-accent {
  color: var(--accent);
}
.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Workout Session Live Header */
.workout-live-header {
  background-color: var(--bg-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-out-sm);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Set Table */
.set-table-header {
  display: grid;
  grid-template-columns: 44px minmax(70px, 1.2fr) 1fr 1fr 48px;
  gap: 8px;
  padding-bottom: 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: center;
}
.set-row {
  display: grid;
  grid-template-columns: 44px minmax(70px, 1.2fr) 1fr 1fr 48px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}
.set-number {
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-align: center;
  font-size: 0.95rem;
}
.set-prev-ghost {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.75;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
.set-type-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  background-color: var(--bg-base);
  box-shadow: var(--shadow-out-sm), var(--edge-accent);
  color: var(--text-muted);
  transition: all 0.15s ease;
}
.set-type-btn:hover {
  filter: brightness(1.15);
  box-shadow: var(--shadow-out-sm), var(--edge-accent-hover);
}
.set-type-btn:active {
  box-shadow: var(--shadow-in-sm);
}
/* Warmup/drop/failure were pulled from a dark-theme palette and measured
   ~1.8:1 on this bone ground — unreadable. Same three hues (amber, violet,
   the shared danger red), darkened enough to clear 4.5:1. */
.set-type-warmup {
  color: #7a5313;
  background-color: rgba(122, 83, 19, 0.16);
}
.set-type-drop {
  color: #6a3fb0;
  background-color: rgba(106, 63, 176, 0.15);
}
.set-type-failure {
  color: var(--status-danger);
  background-color: rgba(178, 59, 59, 0.14);
}

.set-input {
  background-color: var(--bg-base);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-in-sm), var(--edge-accent);
  color: var(--text-main);
  padding: 8px 12px;
  width: 100%;
  font-family: var(--font-mono);
  font-weight: 600;
  text-align: center;
  min-height: 44px;
}
.set-input:focus {
  outline-offset: 0;
}
.set-input-text {
  text-align: left;
  font-family: var(--font-family);
  font-weight: 400;
}
body[dir="rtl"] .set-input-text {
  text-align: right;
}

.set-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--bg-base);
  box-shadow: var(--shadow-out-sm), var(--edge-accent);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 1.1rem;
  transition: box-shadow 0.12s ease, color 0.12s ease;
}
.set-check:hover:not(.completed):not(:disabled) {
  box-shadow: var(--shadow-out-sm), var(--edge-accent-hover);
  color: var(--accent-strong);
}
.set-check:active:not(:disabled) {
  box-shadow: var(--shadow-in-sm);
}
.set-check.completed {
  box-shadow: var(--shadow-in-sm), var(--edge-accent-hover);
  color: var(--accent-strong);
}
.set-check:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tabs */
.nav-tabs {
  display: flex;
  margin-bottom: 24px;
  gap: 8px;
  padding-bottom: 4px;
}
.nav-tab {
  padding: 10px 18px;
  border-radius: 999px;
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-out-sm), var(--edge-accent);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.88rem;
  transition: box-shadow 0.12s ease, color 0.12s ease;
}
.nav-tab:hover {
  color: var(--text-main);
  box-shadow: var(--shadow-out-sm), var(--edge-accent-hover);
}
.nav-tab:active {
  box-shadow: var(--shadow-in-sm);
}
.nav-tab.active {
  color: var(--accent-strong);
  box-shadow: var(--shadow-in-sm), var(--edge-accent-hover);
}

/* Coach Sidebar */
.coach-sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coach-sidebar-title {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 12px;
  margin-bottom: 6px;
}
.coach-sidebar .nav-tab {
  display: flex;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-out-sm), var(--edge-accent);
}
body[dir="rtl"] .coach-sidebar .nav-tab {
  text-align: right;
}
.coach-sidebar .nav-tab.active {
  box-shadow: var(--shadow-in-sm), var(--edge-accent-hover);
  color: var(--accent-strong);
}

/* Inline Charts */
.chart-container {
  width: 100%;
  height: 160px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-in);
  background-color: var(--bg-base);
  margin-top: 14px;
  position: relative;
}
.chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart-area {
  fill: var(--accent);
  opacity: 0.08;
}

/* Exercise Video & Media Demos */
.exercise-media-section {
  margin: 14px 0 18px 0;
}
.exercise-media-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}
body[dir="rtl"] .exercise-media-header {
  justify-content: flex-start;
}
.exercise-media-status {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.exercise-video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--bg-base);
  border-radius: var(--radius);
  box-shadow: var(--shadow-in);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.exercise-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background-color: #000;
}
.exercise-media-attribution {
  margin: 10px 0 16px 0;
  font-size: 0.8rem;
  line-height: 1.45;
}
.exercise-media-credit {
  color: var(--text-muted);
  font-size: 0.78rem;
}
.exercise-media-credit a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.exercise-media-credit a:hover {
  color: var(--text-main);
}
.exercise-media-creator {
  font-weight: 500;
  color: var(--text-main);
}
.exercise-media-notice {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 6px 0 0 0;
  opacity: 0.85;
}
.exercise-secondary-diagram {
  margin-top: 14px;
}
.exercise-secondary-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
/* Durable Rest Timer Bar */
.timer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-surface);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
  box-shadow: 0 -6px 14px -8px rgba(163, 157, 138, 0.55);
}
.timer-display {
  font-size: 1.6rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
}

/* Modal Overlay & Content */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(12, 12, 12, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  background-color: var(--bg-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-out);
  padding: 28px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

/* Feedback & Banners */
.toast-feedback {
  background-color: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.9rem;
  margin-bottom: 16px;
  color: var(--accent-strong);
}
.inline-error {
  color: var(--status-danger);
  font-size: 0.85rem;
  margin-top: 8px;
  display: block;
}

/* Badges & Tags */
.badge {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-in-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}
.badge-accent {
  color: var(--accent-strong);
}
.badge-danger {
  color: var(--status-danger);
}
.badge-warning {
  color: var(--status-warning);
}
.badge-success {
  color: var(--status-success);
}
.badge-muted {
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   EXERCISE INDEX, BODY MAP, PROGRAMS, METRICS, GOALS
   ========================================================= */

/* Seven tabs no longer fit a 390px screen, so the strip scrolls sideways
   instead of wrapping into an unstable two-row bar. */
.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.nav-tab {
  white-space: nowrap;
  flex-shrink: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 400;
  max-width: min(480px, calc(100vw - 32px));
  text-align: center;
}

.btn-toggle-on {
  box-shadow: var(--shadow-in-sm);
  color: var(--accent-strong);
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-main);
  font: inherit;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
}
.link-button:hover { color: var(--accent-strong); }

.filter-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.detail-p {
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 14px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
}
.empty-state p:first-child {
  font-size: 1.05rem;
}

.details-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  /* min-height 44px via padding, not display:flex — flex would drop the
     native list-item disclosure triangle marker entirely. */
  padding: 13px 0;
  color: var(--text-main);
  transition: color 0.12s ease;
}
.details-summary::marker {
  color: var(--accent-strong);
}
.details-summary:hover {
  color: var(--accent-strong);
}
.factor-list {
  margin: 10px 0 0 20px;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}
.week-block {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-in-sm);
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg-base);
}
.day-row {
  font-size: 0.85rem;
  padding: 4px 0;
  border-bottom: 1px dotted var(--border);
}

/* ---------- Body map ---------- */

.body-map-wrap {
  display: flex;
  justify-content: center;
  padding: 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-in);
}
.body-map {
  width: 100%;
  max-width: 200px;
  height: auto;
}
.bm-outline {
  fill: var(--bg-surface-elevated);
  stroke: none;
}
/* Muted by default so the figure reads as a body, not a warning light;
   the accent is reserved for the region actually selected. */
.bm-region {
  fill: var(--text-muted);
  stroke: var(--bg-base);
  stroke-width: 0.4;
  cursor: pointer;
  transition: fill 0.12s ease, filter 0.12s ease;
}
.bm-region:hover { fill: var(--accent); filter: brightness(1.1); }
.bm-region:focus-visible {
  outline: 2px solid var(--text-main);
  outline-offset: 1px;
}
.bm-selected {
  fill: var(--accent);
  stroke: var(--text-main);
  stroke-width: 0.8;
  opacity: 1 !important;
}
.selected-muscle-row {
  text-align: center;
  margin-top: 10px;
  min-height: 26px;
}

/* ---------- Exercise cards ---------- */

.exercise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.exercise-card {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: start;
  padding: 12px;
  background: var(--bg-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-out-sm), var(--edge-accent);
  color: var(--text-main);
  cursor: pointer;
  min-height: 88px;
  width: 100%;
  transition: box-shadow 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.exercise-card:hover {
  color: var(--accent-strong);
  box-shadow: var(--shadow-out), var(--edge-accent-hover);
  transform: translateY(-1px);
}
.exercise-card:active {
  box-shadow: var(--shadow-in-sm);
  transform: translateY(0);
}
.exercise-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.exercise-card-visual {
  flex: 0 0 46px;
  width: 46px;
  height: 82px;
  background: var(--bg-base);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-in-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.exercise-card-visual svg {
  width: 100%;
  height: 100%;
}
/* Illustrations are square; the muscle-map figure is tall and narrow. */
.exercise-card-visual.has-art {
  flex-basis: 74px;
  width: 74px;
  height: 74px;
  background: #ffffff;
}
.ex-art-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
}
.exercise-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.exercise-card-body strong {
  font-size: 0.92rem;
  line-height: 1.3;
}
.exercise-card-meta {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  color: var(--text-muted);
  gap: 2px;
}
.exercise-card .badge {
  align-self: flex-start;
  margin-top: 2px;
}

.exercise-media-block { margin-bottom: 14px; }
.exercise-video {
  width: 100%;
  background: var(--bg-base);
  border-radius: var(--radius);
  box-shadow: var(--shadow-in);
}
.exercise-media-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 16px 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.exercise-media-meta a { color: var(--text-muted); }

/* ---------- Program panels ---------- */

.program-panel { margin-bottom: 12px; }

.program-table-wrap {
  overflow-x: auto;
  margin-top: 14px;
}
.program-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.program-table th {
  text-align: start;
  padding: 8px 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.program-table td {
  padding: 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.program-table .row-input {
  width: 100%;
  min-width: 60px;
  padding: 8px 6px;
}
.row-actions {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}
.row-actions button {
  min-width: 40px;
  min-height: 40px;
  padding: 6px;
}
.row-actions button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.load-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.load-row {
  display: grid;
  grid-template-columns: 88px 1fr 34px;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}
.load-label { color: var(--text-muted); }
.load-track {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-base);
  box-shadow: var(--shadow-in-sm);
}
.load-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}
.load-value {
  text-align: end;
  color: var(--text-main);
  font-family: var(--font-mono);
}

/* ---------- Body metrics ---------- */

.bmi-readout {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
}
.bmi-value {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
  line-height: 1;
}
.bmi-caveat {
  margin-top: 12px;
  font-size: 0.82rem;
  line-height: 1.6;
  border-inline-start: 2px solid var(--status-warning);
  padding-inline-start: 12px;
}

/* ---------- Goals ---------- */

.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.goal-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start;
  padding: 14px;
  background: var(--bg-base);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-out-sm), var(--edge-accent);
  color: var(--text-main);
  cursor: pointer;
  min-height: 80px;
  transition: box-shadow 0.12s ease, color 0.12s ease;
}
.goal-card span { font-size: 0.78rem; line-height: 1.5; }
.goal-card:hover {
  box-shadow: var(--shadow-out), var(--edge-accent-hover);
}
.goal-card:active {
  box-shadow: var(--shadow-in-sm);
}
.goal-selected {
  box-shadow: var(--shadow-in-sm), var(--edge-accent-hover);
  color: var(--accent-strong);
}
.goal-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.suggestion-card {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-out-sm);
  padding: 14px;
  background: var(--bg-base);
  margin-bottom: 8px;
}

@media (max-width: 480px) {
  .exercise-grid { grid-template-columns: 1fr; }
  .load-row { grid-template-columns: 76px 1fr 30px; }
  .body-map { max-width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-region { transition: none; }
}

/* Header wrapped and overlapped the brand at 375px; let it flow to two rows. */
@media (max-width: 520px) {
  .header {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px 16px;
  }
  .header-brand { font-size: 1.15rem; }
  .header-controls {
    gap: 8px;
    flex-wrap: wrap;
  }
  .header-controls .btn-secondary {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
}

/* ---------- Per-exercise muscle map ---------- */

.muscle-thumb {
  width: 100%;
  height: 100%;
  display: block;
}
.mt-outline {
  fill: var(--bg-surface-elevated);
  stroke: none;
}
.mt-region { stroke: none; }
.mt-idle { fill: var(--text-muted); opacity: 0.12; }
.mt-secondary { fill: var(--accent); opacity: 0.34; }
.mt-primary { fill: var(--accent); opacity: 0.95; }
/* Third tier: contracts hard but is not why you chose the exercise. */
.mt-works { fill: var(--text-muted); opacity: 0.42; }

.muscle-map-pair {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--bg-base);
  border-radius: var(--radius);
  box-shadow: var(--shadow-in);
  margin: 16px 0;
}
.muscle-map-fig {
  margin: 0;
  text-align: center;
  flex: 0 0 92px;
}
.muscle-map-fig .muscle-thumb { height: 172px; }
.muscle-map-fig figcaption {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
}
.muscle-map-key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.muscle-map-key li { display: flex; align-items: center; gap: 8px; }
.mk-swatch {
  width: 14px;
  height: 14px;
  background: var(--accent);
  display: inline-block;
}
.mk-secondary { opacity: 0.34; }
.mk-works { background: var(--text-muted); opacity: 0.42; }

.muscle-list {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
}
.muscle-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.muscle-list li:last-child { border-bottom: none; }
.muscle-plain { font-size: 0.9rem; color: var(--text-main); }
.muscle-anatomy { font-size: 0.78rem; color: var(--text-muted); font-style: italic; }

/* Exercise illustrations. White plate behind them: the artwork is drawn on
   white, so a dark card behind a non-transparent WebP shows a hard edge. */
.ex-art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.ex-art-single { grid-template-columns: 1fr; max-width: 50%; }
.ex-art-fig {
  margin: 0;
  text-align: center;
}
.ex-art-fig img {
  width: 100%;
  height: auto;
  display: block;
  background: #ffffff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-out);
}
.ex-art-fig figcaption {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
}
.app-credit {
  max-width: 720px;
  margin: 28px auto 40px auto;
  padding: 0 20px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}
.app-credit a { color: var(--text-muted); }

/* =========================================================
   Injuries / areas to protect
   ========================================================= */

.injury-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.injury-hint {
  font-size: 0.82rem;
  margin: 10px 0 12px 0;
  line-height: 1.5;
}

.injury-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

/* 44px minimum target so this is usable one-handed on a phone. */
.injury-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-out-sm), var(--edge-accent);
  font-size: 0.88rem;
  cursor: pointer;
  transition: box-shadow 0.12s ease;
}
.injury-option:hover {
  box-shadow: var(--shadow-out-sm), var(--edge-accent-hover);
}
.injury-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.injury-option input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--status-warning);
}

.injury-option-on {
  box-shadow: var(--shadow-in-sm);
  color: var(--status-warning);
  font-weight: 600;
}

.injury-filter-row {
  width: 100%;
}

/* Risk flags on exercises */

.risk-badge {
  align-self: flex-start;
}

.exercise-card-risk-avoid {
  outline: 2px solid var(--status-danger);
  outline-offset: -2px;
}

.exercise-card-risk-caution {
  outline: 2px solid var(--status-warning);
  outline-offset: -2px;
}

.risk-notice {
  border-inline-start: 4px solid var(--status-warning);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-in-sm);
  padding: 12px 14px;
  margin: 12px 0 16px 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.risk-notice-avoid {
  border-inline-start-color: var(--status-danger);
  color: var(--status-danger);
}

.risk-notice-caution {
  border-inline-start-color: var(--status-warning);
  color: var(--status-warning);
}

.risk-reason-list {
  margin: 8px 0 0 0;
  padding-inline-start: 18px;
  font-size: 0.84rem;
}

.risk-reason-list li {
  margin-top: 4px;
}

.risk-disclaimer {
  font-size: 0.76rem;
  margin: 10px 0 0 0;
  line-height: 1.45;
}

.program-row-avoid td:first-child,
.program-row-caution td:first-child {
  border-inline-start: 3px solid var(--status-warning);
  padding-inline-start: 8px;
}

.program-row-avoid td:first-child {
  border-inline-start-color: var(--status-danger);
}

/* =============================================================
   COACH <-> MEMBER CHAT
   Neumorphic reading: an incoming bubble is pressed into the surface, an
   outgoing one is raised off it. That is the only cue that separates the two
   sides, so it has to survive at small sizes — hence the extra border on the
   raised bubble rather than shadow alone.
   ============================================================= */

.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;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-header h3 { margin: 0; }

.chat-notice {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 6px 0 0 0;
}

.chat-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
  padding: 14px;
  height: 46vh;
  min-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius);
  background: var(--bg-base);
  box-shadow: var(--shadow-in);
}

.chat-empty {
  margin: auto;
  text-align: center;
  font-size: 0.9rem;
}

.chat-day {
  align-self: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 12px;
  margin: 6px 0 2px 0;
  border-radius: 999px;
  box-shadow: var(--shadow-out-sm);
}

.chat-row { display: flex; }
.chat-row-mine { justify-content: flex-end; }
.chat-row-theirs { justify-content: flex-start; }

.chat-bubble {
  max-width: min(78%, 460px);
  padding: 10px 14px 6px 14px;
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-in-sm);
}

.chat-bubble-mine {
  background: var(--accent-soft);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-out-sm);
}

.chat-text {
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chat-image, .chat-video {
  display: block;
  max-width: 100%;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
}

.chat-image { cursor: zoom-in; }

.chat-voice { display: flex; align-items: center; gap: 8px; }
.chat-voice audio { height: 36px; max-width: 240px; }
.chat-voice-time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.chat-recording {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: var(--status-danger);
  font-variant-numeric: tabular-nums;
}

.chat-rec-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--status-danger);
  animation: chat-pulse 1.2s ease-in-out infinite;
}

/* A class selector outranks [hidden]'s display:none, so restate it. */
.chat-recording[hidden] { display: none; }

@keyframes chat-pulse { 50% { opacity: 0.25; } }

.chat-composer { display: flex; flex-direction: column; gap: 10px; }

.chat-input {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-main);
  background: var(--bg-base);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-in-sm);
}

.chat-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-input:disabled { opacity: 0.5; }

.chat-actions { display: flex; align-items: center; gap: 10px; }

/* Icon buttons are 44px so they stay tappable one-handed on a phone. */
.chat-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  color: var(--text-main);
  background: var(--bg-surface);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-out-sm);
}

.chat-icon-btn:hover { background: var(--bg-surface-hover); }
.chat-icon-btn:active { box-shadow: var(--shadow-in-sm); }
.chat-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-icon-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.chat-icon-btn-rec { color: var(--accent-text); background: var(--status-danger); }

.chat-send { margin-inline-start: auto; }

.chat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-inline-start: 6px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-text);
  /* accent-hover, not accent: white digits on --accent alone measured just
     under 4.5:1 at this badge's small bold size. */
  background: var(--accent-hover);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .chat-scroll { height: 52vh; padding: 10px; }
  .chat-bubble { max-width: 88%; }
  .chat-voice audio { max-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-rec-dot { animation: none; }
}

/* In-gym coach: equipment the member has marked unavailable right now.
   Pressed state needs to read without colour alone (the button also carries a
   leading ✕ and aria-pressed), so it inverts to a pressed-in inset shadow —
   the neumorphic palette's own way of showing "down". */
.busy-toggle.is-busy {
  color: var(--status-warning);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.14), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
  text-decoration: line-through;
}

/* Generated programs carry a day number on every row, so the flat table reads
   as a week instead of one long list. Plain rows have no day and no header. */
.program-day-row th {
  text-align: start;
  padding: 14px 8px 6px 8px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.program-day-row:first-child th { padding-top: 4px; }

/* Progress sub-tabs & PR / History styling */
.progress-subnav {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.progress-subnav-btn {
  flex: 1;
  min-width: 130px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  box-shadow: var(--shadow-out-sm), var(--edge-accent);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.progress-subnav-btn:hover {
  box-shadow: var(--shadow-out-sm), var(--edge-accent-hover);
  color: var(--text-main);
}
.progress-subnav-btn.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: var(--shadow-in-sm), var(--edge-accent-hover);
}

.pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 18px;
}
.pr-card {
  padding: 14px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-out-sm);
  border-radius: var(--radius-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pr-trophy {
  font-size: 1.4rem;
  margin-bottom: 4px;
}
.pr-card-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pr-card-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pr-card-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.history-card {
  padding: 16px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-out-sm);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  transition: box-shadow 0.12s ease;
}
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 8px;
}
.history-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}
.history-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.history-stats {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.history-stat-highlight {
  font-weight: 700;
  color: var(--text-main);
}
.history-exercises-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.history-exercise-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.history-exercise-row:last-child {
  border-bottom: none;
}

.set-pr-badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-inline-start: 6px;
}


/* ---- program thumbnails + injury search (web-features lane) ---- */
.program-exercise-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  background: var(--bg-base);
  flex: 0 0 36px;
}
.program-exercise-thumb-placeholder {
  border: 1px dashed var(--border);
}
.program-table .col-thumb {
  width: 44px;
  padding-inline-end: 0;
}
.program-table .col-name {
  min-width: 0;
  word-break: break-word;
}
.program-exercise-li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.injury-search-input {
  min-height: 44px;
  width: 100%;
  margin-bottom: 10px;
}
.injury-no-match {
  width: 100%;
  font-size: 0.85rem;
  padding: 8px 0;
}