:root {
  color-scheme: light;
  --background: #f7faff;
  --surface: #ffffff;
  --surface-highlight: #f0f6ff;
  --surface-2: #eaf2ff;
  --surface-3: #dce9fb;
  --surface-strong: #ffffff;
  --scrim: rgba(7, 19, 33, 0.4);
  --topbar-surface: rgba(247, 250, 255, 0.82);
  --nav-surface: rgba(255, 255, 255, 0.78);
  --surface-overlay: transparent;
  --surface-variant-overlay: transparent;
  --text: #10233f;
  --frost: var(--text);
  --muted: #596881;
  --sage: #216bd7;
  --heat-0: #ffffff;
  --heat-1: #c4d9f8;
  --heat-2: #7faaeb;
  --heat-3: #216bd7;
  --heat-4: #164396;
  --heat-text-0: #10233f;
  --heat-text-1: #10233f;
  --heat-text-2: #10233f;
  --heat-text-3: #ffffff;
  --heat-text-4: #ffffff;
  --heat-ring: #216bd7;
  --heat-stroke: rgba(96, 112, 138, 0.55);
  --primary: var(--sage);
  --clay: #ff6f66;
  --blue: #3a8dff;
  --violet: #6753d6;
  --mint: #23815e;
  --rose: #ff7a9a;
  --gold: #c87908;
  --danger: #b42318;
  --on-danger: #ffffff;
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --primary-container: #dceaff;
  --secondary-container: #e8effa;
  --tertiary-container: #e6fbf4;
  --line: #dce5f2;
  --outline: #b7c4d7;
  --outline-variant: #dce5f2;
  --topbar-outline: rgba(183, 196, 215, 0.58);
  --nav-outline: rgba(183, 196, 215, 0.58);
  /* Flat tonal hero family: one solid surface for every hero/brand card, dark text, solid blue capsule, flat fills only. */
  --hero-surface: #eef4ff;
  --hero-outline: #dce5f2;
  --hero-text: #10233f;
  /* Light-theme text on the tonal surface #eef4ff reaches 5.1:1 (muted #596881, link/accent text #1f64c9); fills keep --hero-accent. */
  --hero-muted: #596881;
  --hero-tile: #ffffff;
  --hero-action: #216bd7;
  --hero-on-action: #ffffff;
  --hero-action-label: #1f64c9;
  --hero-track: #dce5f2;
  --hero-accent: #216bd7;
  --hero-accent-text: #1f64c9;
  /* Brand fill family for first-plan style cards: white text stays >=4.5:1 at the base, >=3:1 at the bright end. */
  --brand-fill: #216bd7;
  /* Accent text on blue-tinted fills (chips, pills, set badges, current set card): darker than --sage so it keeps 4.5:1 on the tint. */
  --accent-on-tint: #1b5cba;
  --muted-on-tint: #4f5e77;
  --brand-fill-bright: #3a8dff;
  /* DESIGN.md elevation: flat by default; shadows only for floating menus/toasts and reorder drag-lift. */
  --shadow-floating: 0 6px 18px rgba(16, 35, 63, 0.12);
  --reorder-lift-shadow: 0 8px 20px rgba(16, 35, 63, 0.16);
  --radius-xs: 14px;
  /* DESIGN.md radii.capsule: every button, chip and toast. */
  --radius-capsule: 999px;
  --radius-sm: 18px;
  --radius-md: 20px;
  --radius-lg: 26px;
  /* Fluid Focus geometry: controls, compact surfaces, panels. */
  --radius-control: 18px;
  --radius-compact: 20px;
  --radius-panel: 26px;
  --radius-xl: 32px;
  --radius: var(--radius-sm);
  --bottom-nav-height: 72px;
  --bottom-nav-offset: 10px;
  --bottom-nav-clearance: calc(var(--bottom-nav-height) + var(--bottom-nav-offset) + 34px + env(safe-area-inset-bottom));
  /* Motion tokens used by the route view transitions: a screen fades in over --motion-fade-in, the leaving one over --motion-fade-out, and a drill-in slides over --motion-standard. */
  --motion-fade-in: 150ms;
  --motion-fade-out: 90ms;
  --motion-standard: 300ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Noto Sans", sans-serif;
}

html.frame-pending body { visibility: hidden !important; }
html.frame-blocked body {
  visibility: visible;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}
.frame-blocked-message {
  max-width: 36rem;
  padding: 24px;
  border: 1px solid var(--outline);
  border-radius: 24px;
  background: var(--surface-strong);
  color: var(--text);
  text-align: center;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #071321;
  --surface: #0d1d30;
  --surface-highlight: #112744;
  --surface-2: #142a43;
  --surface-3: #1a3553;
  --surface-strong: #0d1d30;
  --scrim: rgba(0, 0, 0, 0.56);
  --topbar-surface: rgba(7, 19, 33, 0.8);
  --nav-surface: rgba(13, 29, 48, 0.78);
  --surface-overlay: transparent;
  --surface-variant-overlay: transparent;
  --text: #f4f8ff;
  --frost: var(--text);
  --muted: #aabbd1;
  --sage: #8bb9ff;
  --heat-0: #172c47;
  --heat-1: #1e4378;
  --heat-2: #2b63b0;
  --heat-3: #4a8eef;
  --heat-4: #7fb2ff;
  --heat-text-0: #f2f6fc;
  --heat-text-1: #f2f6fc;
  --heat-text-2: #f2f6fc;
  --heat-text-3: #071321;
  --heat-text-4: #071321;
  --heat-ring: #7fb2ff;
  --heat-stroke: rgba(167, 182, 203, 0.45);
  --clay: #ff9d94;
  --blue: #7fb2ff;
  --violet: #b4a6ff;
  --mint: #77ddb7;
  --rose: #ff8fa9;
  --gold: #ffc56b;
  --danger: #ffb4ab;
  --on-danger: #690005;
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --primary-container: #173d70;
  --secondary-container: #203753;
  --tertiary-container: #163f3a;
  --line: #263e59;
  --outline: #49617d;
  --outline-variant: #263e59;
  --topbar-outline: rgba(73, 97, 125, 0.58);
  --nav-outline: rgba(73, 97, 125, 0.62);
  --hero-surface: #10233a;
  --hero-outline: #22395a;
  --hero-text: #f2f6fc;
  --hero-muted: #a7b6cb;
  --hero-tile: #172c47;
  --hero-action: #2e72d2;
  --hero-on-action: #ffffff;
  --hero-action-label: #7fb2ff;
  --hero-track: #22395a;
  --hero-accent: #7fb2ff;
  --hero-accent-text: #7fb2ff;
  --brand-fill: #2e72d2;
  --accent-on-tint: var(--sage);
  --muted-on-tint: var(--muted);
  --brand-fill-bright: #3f84e5;
  --shadow-floating: 0 6px 18px rgba(0, 0, 0, 0.36);
  --reorder-lift-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html {
  touch-action: manipulation;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--background);
  color: var(--text);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Landscape: keep content clear of the notch and rounded corners; the insets are 0 in portrait. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Words wrap whole; only a single word wider than its line may break (never mid-word at large text sizes). */
h1,
h2,
h3,
p { overflow-wrap: break-word; }

h1,
h2,
h3 { text-wrap: balance; }

.panel h2,
.modal-panel h2,
.section-title h2,
.workout-title,
.mission-row h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: -0.0056em;
}

.panel h3,
.material-card h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375rem;
}

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--background);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: none;
}

button,
input,
select,
textarea { font: inherit; }

button { border: 0; }

button,
[role="button"],
.clickable { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sage) 72%, transparent);
  outline-offset: 2px;
}

.app-shell {
  height: calc(100dvh - env(safe-area-inset-top));
  overflow: hidden;
  background: var(--background);
}

.topbar {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  height: 64px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-surface);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  transition: margin-top 180ms ease, opacity 140ms ease;
}

.app-shell.topbar-collapsed .topbar {
  margin-top: -64px;
  opacity: 0;
  pointer-events: none;
}

.app-shell.topbar-collapsed .screen { height: 100%; }

/* Root tabs (Today, Exercises, Progress, Profile) share one large left-aligned title in the body. Their top bar is an overlay that takes no layout space: transparent at rest, and once content scrolls 24px under it the bar material, hairline and compact centred title fade in (DESIGN.md scroll-edge effect). The h1 stays in the DOM for the document and screen readers. */
.root-route-shell { position: relative; }
.topbar.topbar-root-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
}
.root-route-shell.title-collapsed .topbar.topbar-root-title { opacity: 1; }
.topbar.topbar-root-title + .screen { height: 100%; }
.root-route-shell.title-collapsed .continue-workout-bar { top: 70px; }

.topbar h1 {
  min-width: 0;
  margin: 0;
  /* The bar keeps its 64px height, so the title is capped relative to the screen width (like a system navigation bar)
     and wraps to two lines at large text instead of being cut off with an ellipsis. */
  font-size: min(1.375rem, 6.2vw);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.0091em;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: break-word;
}

.screen {
  width: 100%;
  height: calc(100% - 64px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 10px 16px;
  scrollbar-gutter: stable;
}

.screen:not(.screen-workouts) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.screen-missions,
.screen-exercises,
.screen-progress,
.screen-leaderboard {
  padding-bottom: var(--bottom-nav-clearance);
}

.screen-workouts {
  display: block;
  overflow-y: auto;
  padding: 0;
}

.screen-copy {
  display: grid;
  gap: 6px;
}

.screen-copy h2,
.screen-copy p { margin: 0; }
.screen-copy h2 { font-size: 2rem; line-height: 2.375rem; letter-spacing: -0.01em; }
.screen-copy p { color: var(--muted); }
.screen-copy.compact { gap: 0; padding-bottom: 0; }
/* One root-tab title rhythm: 10px from the top, a 44px row (the Exercises add button and the Today History shortcut are 44px), title centred in it. */
.screen-copy.root-title,
.workouts-screen-copy,
.exercises-header { min-height: 44px; align-items: center; }
.profile-screen-copy {
  gap: 6px;
  padding: 8px 2px 4px;
}
.profile-screen-copy .eyebrow {
  color: var(--sage);
}
.workouts-screen-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 16px 12px;
}
.workouts-screen-copy .button { margin-top: 0; }
.workouts-screen-copy > div { display: grid; gap: 2px; }
.history-shortcut { flex: 0 0 auto; min-height: 44px; }
.workouts-screen-copy .eyebrow {
  color: var(--sage);
  font-weight: 700;
  letter-spacing: 0.0818em;
}

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

.exercises-header h2 { min-width: 0; }

/* Header rhythm on the spacing scale: 8px between the title row and the search row, 12px between the chip row and the list. */
.exercises-header { margin-bottom: 8px; }
.screen-exercises .exercise-list { margin-top: 12px; }

.exercise-add-button {
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: var(--brand-fill);
  cursor: pointer;
}

.exercise-add-button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}

.exercise-search-panel {
  display: grid;
  gap: 12px;
}

.exercise-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.exercise-search-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--muted);
  background: var(--surface);
}

.exercise-search-field:focus-within {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset: 1px;
}

.exercise-search-field svg { flex: 0 0 auto; }

.exercise-search-field input[type="search"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
  margin: -1px 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: max(1rem, 1em);
  -webkit-appearance: none;
  appearance: none;
}

.exercise-search-field input[type="search"]::-webkit-search-cancel-button { display: none; }
.exercise-search-field .icon-button { position: relative; flex: 0 0 auto; width: 40px; height: 40px; }
/* 44px hit area around the 40px clear button. */
.exercise-search-field .icon-button::before { content: ""; position: absolute; inset: -2px; }

.exercise-filter-menu-wrap {
  position: relative;
  flex: 0 0 44px;
}

.exercise-filter-trigger {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--outline-variant);
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.exercise-filter-trigger svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exercise-filter-trigger.active {
  border-color: var(--primary);
  color: #ffffff;
  background: var(--brand-fill);
}

.exercise-filter-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brand-fill-bright);
  box-shadow: 0 0 0 2px var(--surface);
}

.exercise-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 18;
  display: grid;
  gap: 2px;
  width: min(260px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  box-shadow: var(--shadow-floating);
}

.exercise-filter-heading {
  display: block;
  padding: 10px 12px 4px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.exercise-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.exercise-filter-option:focus-visible { background: color-mix(in srgb, var(--primary) 10%, transparent); }

@media (hover: hover) and (pointer: fine) {
  .exercise-filter-option:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
}
.exercise-filter-option svg { flex: 0 0 auto; width: 20px; height: 20px; }

.exercise-filter-check {
  margin-left: auto;
  color: var(--primary);
  font-weight: 700;
  visibility: hidden;
}

.exercise-filter-option[aria-checked="true"] { font-weight: 600; }
.exercise-filter-option[aria-checked="true"] .exercise-filter-check { visibility: visible; }

.exercise-muscle-chips { padding-bottom: 0; }

.exercise-muscle-chips .chip {
  min-height: 44px;
  padding-inline: 14px;
  border: 0;
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-2);
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 400;
}

.exercise-muscle-chips .chip.selected {
  color: #ffffff;
  background: var(--brand-fill);
  box-shadow: none;
  font-weight: 600;
}

.exercise-more-sheet,
.exercise-more-actions {
  display: grid;
  gap: 14px;
}

.exercise-more-sheet > h2 { margin: 0; }

.exercise-library-heading {
  display: grid;
  gap: 4px;
}

.exercise-library-heading h2,
.exercise-library-heading p { margin: 0; }


.draft-exercise-title { min-width: 0; flex: 1 1 auto; }

.exercise-media-thumb {
  position: relative;
  flex: 0 0 76px;
  width: 76px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 72%, transparent);
}

.exercise-media-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.exercise-media-thumb.empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  padding: 0 4px;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.exercise-media-thumb.empty > span {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

/* Tiles narrower than 72px (compact 58px and the 60px catalog rows) show the icon only; the caption stays for assistive tech. */
.exercise-media-thumb.empty.compact > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.exercise-media-placeholder-icon {
  width: 22px;
  height: 22px;
  margin: 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exercise-media-play {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-fill);
  color: var(--on-accent);
}

.exercise-media-play svg { width: 16px; height: 16px; }

.exercise-media-thumb.compact {
  flex-basis: 58px;
  width: 58px;
  height: 52px;
  border-radius: 13px;
}

.exercise-media-thumb.progress {
  flex-basis: 84px;
  width: 84px;
  height: 72px;
  /* The generic .progress bar rule (999px radius) also matches this size class; keep the rounded rectangle. */
  border-radius: 16px;
}

/* The "progress" size class also matches the generic `.progress span` bar rule; keep the play badge a small circle. */
.exercise-media-thumb.progress .exercise-media-play {
  display: grid;
  width: 28px;
  height: 28px;
  background: var(--brand-fill);
}

/* The Progress picker card uses the same 76x64 thumbnail as the shared media button on iOS. */
.progress-picker-selected .exercise-media-thumb.progress {
  flex-basis: 76px;
  width: 76px;
  height: 64px;
}

.exercise-card-identity,
.progress-exercise-heading,
.exercise-history-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.exercise-card-identity { flex: 1 1 auto; }
.exercise-card-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.exercise-card-identity .exercise-name,
.exercise-history-heading h2 { margin: 0; }

/* Exercise history hero like iPhone: bold title above a 76x64 rounded thumbnail (13px radius). */
.exercise-history-heading {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.exercise-history-heading h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5625rem;
}

.exercise-history-heading .exercise-media-thumb.progress {
  flex: none;
  width: 76px;
  height: 64px;
  border-radius: 13px;
}
.exercise-search-reason {
  color: var(--muted);
  line-height: 1.25;
}
.progress-exercise-heading label { flex: 1 1 auto; }

.exercise-media-sheet { display: grid; gap: 16px; }

.exercise-media-stage {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: #f7faff;
  box-shadow: inset 0 0 0 1px rgba(16, 35, 63, 0.08);
}

.exercise-media-stage.empty {
  align-content: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.exercise-media-stage.empty p { margin: 0; max-width: 34ch; }
.exercise-media-empty-icon { width: 48px; height: 48px; color: var(--primary); }

.exercise-media-frame {
  grid-area: 1 / 1;
  width: 100%;
  height: min(52vh, 360px);
  object-fit: contain;
}

.exercise-media-stage.animated .frame-1 {
  animation: exercise-reference-cycle 2.4s ease-in-out infinite;
}

.exercise-media-state {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #10233f;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: var(--shadow-floating);
}

.exercise-media-file-label { cursor: pointer; }

@keyframes exercise-reference-cycle {
  0%, 38%, 100% { opacity: 0; transform: scale(0.985); }
  50%, 88% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .exercise-media-stage.animated {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exercise-media-stage.animated .exercise-media-frame {
    grid-area: auto;
    height: min(34vh, 220px);
  }

  .exercise-media-stage.animated .frame-1 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

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

.theme-preference-card {
  display: grid;
  gap: 10px;
}

.theme-preference-copy {
  display: grid;
  gap: 3px;
}

.theme-preference-copy h2,
.theme-preference-copy p { margin: 0; }

.theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.theme-option {
  min-width: 0;
  min-height: 48px;
  padding: 8px 6px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-weight: 500;
  line-height: 1.125rem;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .theme-option:not(.selected):hover {
    color: var(--text);
    background: color-mix(in srgb, var(--sage) 8%, transparent);
  }
}

.theme-option.selected {
  color: var(--on-accent);
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  box-shadow: none;
  font-weight: 600;
}

.filter-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.filter-scroll::-webkit-scrollbar { display: none; }
.filter-scroll .chip { flex: 0 0 auto; }

.screen-leaderboard {
  gap: 12px;
  padding-top: 4px;
  padding-right: 16px;
  padding-left: 16px;
}

.screen-add,
.screen-summary {
  gap: 12px !important;
}

.screen-detail {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

.active-more-note { margin: 0; font-size: 0.8125rem; line-height: 1.125rem; }

.screen-active {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.icon-button:active {
  background: color-mix(in srgb, var(--sage) 10%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .icon-button:hover {
    background: color-mix(in srgb, var(--sage) 10%, transparent);
  }
}

.topbar-action {
  border: 1px solid var(--topbar-outline);
  background: var(--topbar-surface);
}

.topbar-slot { width: 48px; height: 48px; }

.language-selector {
  position: relative;
  min-width: 48px;
  height: 48px;
}

.language-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 48px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}

.language-menu {
  position: absolute;
  top: 54px;
  right: 0;
  z-index: 18;
  width: 168px;
  padding: 8px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xs);
  background: var(--surface-strong);
  box-shadow: var(--shadow-floating);
}

.language-option {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.language-option.selected { color: var(--sage); }
.language-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.language-option svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.language-option[aria-checked="true"] { font-weight: 600; }

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

.icon-button svg,
.tab-button svg,
.small-icon {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Inline icons next to text scale with it; bar icons keep their fixed hit-target size. */
.button .small-icon,
.hero-text-button .small-icon,
.focus-lens-edit .small-icon,
.focus-lens-action .small-icon,
.pill .small-icon {
  width: 1.3125rem;
  height: 1.3125rem;
}

.icon-button svg.filled-icon,
.tab-button svg.filled-icon,
svg.filled-icon.small-icon {
  fill: currentColor;
  stroke: none;
}

.rotate-180 { transform: rotate(180deg); }

.panel,
.workout-item,
.exercise-row,
.mission-row,
.modal-panel,
.hero-panel {
  border: 1px solid color-mix(in srgb, var(--outline-variant) 82%, transparent);
  border-radius: var(--radius-lg);
}

.panel,
.workout-item,
.exercise-row,
.mission-row,
.modal-panel {
  background: var(--surface);
}

.panel {
  padding: 16px;
  margin: 0;
}

:where(.workout-item, .exercise-row, .mission-row, .leaderboard-row, .active-workout-exercise),
.profile-hub-panel > .panel,
.panel .panel {
  box-shadow: none;
}

.panel.compact { padding: 6px; }
.highlighted {
  background: var(--hero-surface);
  border-color: var(--hero-outline);
}

.material-card {
  padding: 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.material-card h2,
.material-card p { margin: 0; }

.material-card h2 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375rem;
}

.account-card p { margin-top: 2px; color: var(--muted); }

.garmin-device-list {
  display: grid;
  gap: 10px;
}

.garmin-device-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.garmin-device-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.garmin-device-row strong,
.garmin-device-row span { overflow-wrap: anywhere; }

.garmin-device-row > div > span {
  color: var(--muted);
  font-size: 0.8125rem;
}

.garmin-device-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  color: var(--muted);
  background: var(--surface);
}

.garmin-device-icon.connected { color: var(--sage); }
.garmin-device-icon svg { width: 26px; height: 26px; }

.backup-card,
.mappings-card {
  display: grid;
  gap: 8px;
}

.exercise-add-row { flex: 0 0 auto; }

.exercise-add-row input { min-width: 0; }

.mapping-row {
  min-height: 48px;
  padding: 2px 0;
}

.progress-selector {
  display: grid;
  gap: 8px;
}

.progress-selector select { margin: 0; }

.progress-selector label,
.field-caption {
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.125rem;
}

.progress-exercise-picker {
  display: grid;
  gap: 12px;
}

.progress-exercise-picker > h2,
.progress-exercise-picker > p { margin: 0; }
.progress-picker-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.375rem; }

.progress-picker-selected {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-picker-change {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.progress-picker-copy { display: grid; flex: 1; gap: 4px; min-width: 0; }
.progress-picker-copy strong { font-size: 1.0625rem; font-weight: 600; line-height: 1.375rem; overflow-wrap: break-word; }
.progress-picker-copy small { color: var(--muted); font-size: 0.75rem; line-height: 1rem; }

.progress-picker-search {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--accent-on-tint);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.progress-picker-search svg { width: 18px; height: 18px; }

.progress-exercise-picker-sheet {
  display: grid;
  gap: 12px;
}

.progress-exercise-picker-sheet > h2 { margin: 0; }

.progress-exercise-options {
  display: grid;
  gap: 0;
  max-height: min(52vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.progress-exercise-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--outline-variant);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.progress-exercise-option:last-child { border-bottom: 0; }
.progress-exercise-option.selected strong { font-weight: 700; }

.progress-exercise-option-check {
  display: inline-flex;
  color: var(--sage);
}

.progress-exercise-option-check svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.progress-exercise-option-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.progress-exercise-option-copy strong,
.progress-exercise-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-exercise-option-copy small { color: var(--muted); }

.progress-summary {
  display: grid;
  gap: 10px;
}

.progress-summary .metric-grid { margin-top: 0; }

.progress-summary .metric-grid > div {
  min-height: 76px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--sage) 9%, var(--outline-variant));
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.progress-summary .metric-grid strong {
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.progress-summary .metric-grid.three {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exercise-muscle-breakdown {
  display: grid;
  gap: 12px;
}

.exercise-muscle-breakdown:not(.panel) { padding: 0; }

/* The count pill sits beside the title and wraps under it when both do not fit on one line. */
.exercise-muscle-breakdown-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}

.exercise-muscle-breakdown-heading h3 { margin: 0; min-width: 0; }
.exercise-muscle-breakdown-heading .pill { flex: 0 0 auto; }
.exercise-muscle-breakdown-heading .pill .small-icon { width: 15px; height: 15px; }

.exercise-muscle-breakdown-bars {
  display: grid;
  gap: 10px;
}

.exercise-muscle-breakdown-row {
  display: grid;
  gap: 5px;
}

.exercise-muscle-breakdown-row > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.exercise-muscle-breakdown-row strong {
  color: var(--muted);
  font-size: 0.75rem;
}

.exercise-muscle-breakdown-row .bar-track { height: 7px; }

.progress-spotlight,
.trend-panel,
.add-workout-hero,
.note-panel,
.summary-hero {
  display: grid;
  gap: 10px;
  /* A bare grid column would grow to the widest unbreakable word and push the tiles past the card edge at large text. */
  grid-template-columns: minmax(0, 1fr);
  container-type: inline-size;
}

.progress-month-empty { justify-items: center; text-align: center; }
.progress-month-empty-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--muted); }
.progress-month-empty-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.progress-month-empty h2 { font-size: 1.0625rem; font-weight: 600; line-height: 1.375rem; }
.progress-month-empty p { color: var(--muted); }

.progress-spotlight { gap: 12px; }
.progress-spotlight .metric-grid { margin-top: 0; }
.spotlight-deltas { display: grid; gap: 8px; justify-items: start; }
.spotlight-deltas .hero-info-pill { max-width: 100%; }
.add-workout-hero .hero-button { margin-top: 0; }
.note-panel .chip-row { margin-top: 0; }

.workout-template-panel,
.training-profile-panel,
.smart-coach-panel,
.watch-plan-panel {
  display: grid;
  gap: 12px;
}

.training-profile-panel { padding: 0; }
.training-profile-panel > .detail-summary { padding: 14px 16px; }
.training-profile-panel[open] > .detail-summary::after,
.add-secondary-controls[open] > .detail-summary::after { content: "^"; }
.training-profile-content {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}

.add-secondary-controls { padding: 0; }
.add-secondary-summary { padding: 14px 16px; }
.add-secondary-title { display: flex; align-items: center; gap: 8px; margin: 0; }
.add-secondary-title svg { flex: none; }
.training-profile-panel .detail-summary span {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.0625rem;
}
.add-secondary-content {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}
.add-secondary-content .subpanel { display: grid; gap: 10px; }
.add-secondary-content :where(h3, p) { margin: 0; }

.shared-workout-pending {
  display: grid;
  gap: 14px;
  margin-bottom: 2px;
}

.shared-workout-metrics { margin-top: 0; }

.shared-workout-preview-list {
  display: grid;
  gap: 8px;
}

.shared-workout-preview-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.shared-workout-preview-list article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--accent-on-tint);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: 0.75rem;
  font-weight: 800;
}

.shared-workout-preview-list article div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.shared-workout-preview-list strong,
.shared-workout-preview-list small {
  overflow-wrap: anywhere;
}

.shared-workout-preview-list small {
  color: var(--muted);
  line-height: 1.4;
}

.workout-template-panel .button + .button { margin-top: -4px; }
.training-profile-panel > .chip-row { margin-top: -4px; }

.exercise-builder-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}

.exercise-builder-heading > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.exercise-builder-heading h2,
.exercise-builder-heading p {
  margin: 0;
}

.exercise-builder-heading h2 {
  font-size: 1.375rem;
  line-height: 1.75rem;
}

.exercise-builder-heading p { color: var(--muted); }

.button.exercise-builder-add,
.button.exercise-builder-voice {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
}

.exercise-builder-add svg,
.exercise-builder-voice svg { flex-shrink: 0; }

.exercise-builder-heading > div:first-child { flex: 1 1 6rem; }
.exercise-builder-heading > .plan-menu-wrap { flex: 0 0 auto; }
.exercise-builder-heading .pill {
  justify-self: start;
  max-width: 100%;
  white-space: normal;
  padding-block: 4px;
}

/* Voice workout dictation sheet */
.voice-workout-dictation { display: grid; gap: 10px; }
.voice-workout-dictation textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font: inherit;
  font-size: max(1rem, 1em);
}
.voice-workout-privacy { margin: 0; font-size: 0.8125rem; }
.voice-workout-listening,
.voice-workout-unavailable {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
}
.voice-workout-listening::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  animation: voice-workout-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-workout-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .voice-workout-listening::before { animation: none; } }
.voice-workout-error,
.voice-workout-issue { margin: 0; color: var(--danger); font-size: 0.875rem; }
.voice-workout-notice { margin: 0; color: var(--muted); }
.voice-workout-heading { margin: 16px 0 8px; font-size: 0.9375rem; }
.voice-workout-block { display: grid; gap: 8px; margin-bottom: 10px; }
.voice-workout-spoken { margin: 0; font-size: 0.8125rem; }
.voice-workout-block select { width: 100%; }
.voice-workout-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.voice-workout-set input { min-width: 0; width: 100%; }
.voice-workout-block-actions { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.voice-workout-block-actions .danger-text { color: var(--danger); }
.voice-workout-apply { margin-top: 12px; }
.voice-workout-confirm { display: grid; gap: 8px; margin-top: 12px; }
.voice-workout-confirm h3,
.voice-workout-confirm p { margin: 0; }

.save-workout-button { min-height: 54px; }

.trend-panel { gap: 18px; padding: 16px; }
.trend-panel > h2,
.trend-panel > p,
.chart-section h3,
.chart-section p { margin: 0; }

.chart-section {
  display: grid;
  gap: 8px;
}

.trend-chart-plot {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.trend-chart-plot svg {
  display: block;
  width: 100%;
  height: 180px;
  overflow: visible;
}

.chart-guide {
  fill: none;
  stroke: var(--outline-variant);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-line-fill {
  fill: color-mix(in srgb, var(--sage) 14%, transparent);
  stroke: none;
}

.chart-line {
  fill: none;
  stroke: var(--sage);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart-dot {
  fill: var(--sage);
  stroke: var(--surface-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-dot.latest {
  fill: var(--clay);
}

/* DESIGN.md charts: bars use accent-mark (--hero-accent). */
.chart-bar {
  fill: var(--hero-accent);
}

.chart-bar.latest { fill: var(--clay); }

.chart-labels {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1rem;
}

.chart-labels span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-hero { gap: 16px; }
.summary-hero-title > div { min-width: 0; }
.summary-hero .summary-hero-title h2 { overflow-wrap: break-word; font-size: min(1.375rem, 8vw); line-height: 1.2; }

.summary-hero-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.summary-hero-title > svg {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  fill: currentColor;
}

.summary-hero-title h2,
.summary-hero-title p {
  margin: 0;
}

.summary-hero-title { align-items: flex-start; }
.summary-hero-title p { font-size: 0.9375rem; line-height: 1.25rem; }

.summary-hero-xp,
.summary-hero-level { display: grid; gap: 2px; }

.summary-hero-xp strong {
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 2.5rem;
  font-variant-numeric: tabular-nums;
}

.summary-hero-xp span,
.summary-hero-level > span {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--hero-muted);
}

.summary-hero-xp span { font-weight: 600; }

.summary-hero-level { gap: 8px; }
.summary-hero-level strong { font-size: 0.9375rem; font-weight: 600; line-height: 1.25rem; }
.summary-hero .progress { height: 4px; margin: 0; }
.summary-hero .progress > span { background: var(--hero-accent); }

.summary-records h2,
.summary-badges h2 { margin: 0 0 12px; font-size: 1.125rem; }

.summary-record-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.summary-record-row + .summary-record-row { margin-top: 12px; }

.summary-record-row .exercise-media-thumb.summary-record-thumb,
.summary-record-thumb.fallback {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.summary-record-thumb.empty span { display: none; }
.summary-record-thumb .exercise-media-placeholder-icon { width: 20px; height: 20px; }
.summary-record-thumb .exercise-media-play { display: none; }

.summary-record-thumb.fallback {
  display: grid;
  place-items: center;
  color: var(--gold);
  background: var(--surface-2);
}

.summary-record-thumb.fallback svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.summary-record-copy { display: grid; gap: 2px; min-width: 0; }

.summary-record-copy strong,
.summary-record-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-record-copy strong { font-size: 0.9375rem; font-weight: 600; line-height: 1.25rem; }
.summary-record-copy span { color: var(--muted); font-size: 0.75rem; line-height: 1rem; }

.achievement-tile.static { cursor: default; }

.summary-actions { display: grid; gap: 10px; }

.summary-details-button {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  color: var(--primary);
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.summary-rewards-heading {
  display: grid;
  gap: 4px;
  padding-top: 2px;
}

.summary-rewards-heading .eyebrow {
  color: var(--sage);
}

.summary-rewards-heading h2,
.summary-rewards-heading p { margin: 0; }

.summary-rewards-heading h2 {
  font-size: 1.6875rem;
  font-weight: 700;
  line-height: 1.9375rem;
  letter-spacing: -0.0222em;
}

.summary-rewards-heading p { color: var(--muted); }
.reward-card { padding: 16px; }

.hero-panel {
  margin: 0;
  padding: 20px;
  border-radius: var(--radius-xl);
  color: var(--hero-text);
  background: var(--hero-surface);
  border-color: var(--hero-outline);
}

.hero-panel h2 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.75rem;
  letter-spacing: -0.0091em;
}

.hero-panel p,
.panel p {
  margin: 4px 0;
  color: var(--muted);
}

.hero-panel p,
.hero-panel .muted {
  color: var(--hero-muted);
}

.hero-panel .metric-grid > div {
  background: var(--hero-tile);
  border-color: var(--hero-outline);
  color: var(--hero-text);
}

.hero-stat,
.hero-pill,
.solo-progress-hero .metric-grid > div,
.hero-info-pill {
  background: var(--hero-tile);
  border-color: var(--hero-outline);
  color: var(--hero-text);
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}

.hero-stat {
  min-width: 112px;
  padding: 12px 14px;
  border: 1px solid var(--hero-outline);
  border-radius: var(--radius-lg);
  text-align: right;
}

.hero-stat span,
.eyebrow,
.muted {
  color: var(--muted);
}

.hero-panel .hero-stat span,
.hero-panel .metric-grid span,
.hero-panel .eyebrow {
  color: var(--hero-muted);
}

.solo-progress-hero {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-color: var(--hero-outline);
  background: var(--hero-surface);
}

.solo-progress-hero .metric-grid,
.solo-progress-hero .progress { margin-top: 0; }

.solo-progress-hero .eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: none;
}

.solo-identity { display: grid; gap: 6px; min-width: 0; }
.solo-identity p { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--hero-muted); }

.solo-identity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
}

.solo-progress-hero .hero-pill {
  flex: 0 0 auto;
  min-height: 0;
  padding: 7px 11px;
  border-color: transparent;
  border-radius: 999px;
  background: var(--hero-tile);
  color: var(--hero-action-label);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  text-transform: none;
}

.solo-identity-row h2 { min-width: 0; hyphens: none; overflow-wrap: break-word; }

.solo-xp {
  margin-left: auto;
  color: var(--hero-accent-text);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.solo-xp-earned { display: none; }

.solo-identity-row.xp-wrapped .solo-xp {
  flex: 1 0 100%;
  margin-left: 0;
  color: var(--hero-accent-text);
  font-size: 0.9375rem;
  font-weight: 600;
}

.solo-identity-row.xp-wrapped .solo-xp-compact { display: none; }
.solo-identity-row.xp-wrapped .solo-xp-earned { display: inline; }

.solo-progress-hero .metric-grid > div {
  background: var(--hero-tile);
  border-color: var(--hero-outline);
}

.solo-progress-hero .metric-grid span {
  color: var(--hero-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
}

.solo-ranks-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-capsule);
  color: var(--hero-action-label);
  background: var(--hero-tile);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25rem;
  cursor: pointer;
}

.solo-ranks-button .small-icon { width: 18px; height: 18px; }

/* Opt-in tile style for the Progress overview: equal height per row, sentence-case labels
   that never hyphenate, and bold values. Other screens keep the default metric tile. */
.metric-grid.tile-emphasized { align-items: stretch; }

.metric-grid.tile-emphasized > div {
  min-width: 0;
  min-height: 74px;
  padding: 12px;
}

.metric-grid.tile-emphasized span {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.metric-grid.tile-emphasized strong {
  margin-top: 5px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.75rem;
  hyphens: none;
}

.metric-grid.tile-emphasized.tile-compact strong {
  font-size: 1.0625rem;
  line-height: 1.5rem;
}

/* Lifetime tiles reserve a two-line label slot so every value sits on the same baseline. */
.lifetime-progress-card .metric-grid.tile-emphasized > div {
  display: flex;
  flex-direction: column;
  padding-inline: 10px;
}

.lifetime-progress-card .metric-grid.tile-emphasized span {
  display: block;
  min-height: 2.25rem;
  overflow: visible;
}

.lifetime-progress-card .metric-grid.tile-emphasized strong {
  margin-top: auto;
  padding-top: 5px;
}

/* A long value (such as "80,7 тыс. кг") starts smaller so the fit step keeps it on one line instead of clipping it. */
.metric-grid.tile-emphasized strong.long-value {
  font-size: 0.875rem;
  line-height: 1.5rem;
  white-space: nowrap;
}

.heatmap-header { align-items: flex-start; flex-wrap: wrap; row-gap: 10px; }
.heatmap-title { display: grid; gap: 3px; min-width: 0; }
.heatmap-header .pill { flex: 0 0 auto; }
.heatmap-header .pill .small-icon { width: 15px; height: 15px; }

.month-navigator-inline { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 2px; width: 100%; min-width: 0; }

.month-navigator-inline .month-nav-chevron { flex: 0 0 auto; width: 44px; height: 44px; }
.month-navigator-inline .month-nav-chevron svg { width: 15px; height: 15px; stroke-width: 2.4; }
.month-navigator-inline .month-nav-chevron:disabled { opacity: 0.35; cursor: default; }

.month-nav-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 44px;
  padding: 0 2px;
  color: var(--muted);
  background: transparent;
  font-size: 0.75rem;
  line-height: 1rem;
  cursor: pointer;
}

.month-nav-month { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-nav-badge { flex: 0 0 auto; color: var(--sage); font-size: 0.6875rem; font-weight: 600; line-height: 0.875rem; white-space: nowrap; }

.training-settings-link {
  justify-self: start;
  min-height: 44px;
  padding: 0;
  color: var(--sage);
  background: transparent;
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: left;
  cursor: pointer;
}

.progress-spotlight h2,
.screen-leaderboard > .hero-panel h2 {
  font-size: 1.6875rem;
  line-height: 1.9375rem;
  letter-spacing: -0.0222em;
}

.hero-info-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hero-info-row.date-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

.hero-info-pill {
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--hero-outline);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-grid span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.125rem;
  text-transform: none;
  letter-spacing: 0;
  hyphens: none;
  overflow-wrap: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.hero-stat strong,
.metric-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.75rem;
  overflow: hidden;
  white-space: nowrap;
  hyphens: none;
  font-variant-numeric: tabular-nums;
}

.hero-button {
  width: 100%;
  margin-top: 8px;
}

.hero-icon-button { color: var(--hero-action-label); }

.hero-icon-button:active {
  background: color-mix(in srgb, var(--hero-action) 12%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .hero-icon-button:hover {
    background: color-mix(in srgb, var(--hero-action) 12%, transparent);
  }
}

.section-title,
.row-head,
.row-line,
.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field-stack {
  display: grid;
  gap: 12px;
}

.auth-screen {
  width: min(560px, 100%);
  max-width: 560px;
  height: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 18px 16px;
  justify-content: flex-start;
  gap: 16px !important;
}

.auth-shell { overflow-y: auto; }

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 28px;
  padding: 0;
}

.auth-links a,
.auth-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--sage);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  white-space: nowrap;
}

.auth-link .small-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

@media (max-width: 360px) {
  .auth-links {
    flex-direction: column;
    align-items: center;
  }
}

.auth-hero {
  display: grid;
  gap: 6px;
  padding: 20px;
}

.auth-hero h1 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.75rem;
  letter-spacing: -0.0091em;
}

.auth-wordmark {
  min-width: 0;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.75rem;
  letter-spacing: -0.0091em;
}

.auth-brand-panel {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-color: var(--hero-outline);
  background: var(--hero-surface);
}

.auth-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-brand-mark {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 22%;
}

/* Quiet text-level affordance: forgot password, continue offline, sheet Cancel. */
.auth-quiet-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  cursor: pointer;
}

.auth-quiet-link.auth-forgot-link {
  color: var(--sage);
  font-weight: 500;
}

.auth-quiet-link .small-icon { width: 16px; height: 16px; flex: 0 0 16px; }

.auth-offline-row.embedded { margin-top: 16px; }

/* Sign-in sits behind one 56px row under the store downloads; the chevron is the only motion. */
.auth-access { display: grid; gap: 16px; min-width: 0; }
.auth-access-body { display: grid; gap: 16px; min-width: 0; }
.auth-access-body[hidden] { display: none; }
.auth-disclosure-card { padding: 0 16px; }
.auth-disclosure-toggle { min-height: 56px; padding-block: 6px; border-radius: var(--radius-sm); }
.auth-disclosure-toggle .settings-row-trailing svg { transition: transform 160ms ease; }
.auth-disclosure-toggle[aria-expanded="true"] .settings-row-trailing svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .auth-disclosure-toggle .settings-row-trailing svg { transition: none; }
}

.auth-divider {
  height: 1px;
  margin: 0 0 4px;
  border: 0;
  background: color-mix(in srgb, var(--outline) 50%, transparent);
}

.auth-mode-switch {
  margin-top: 16px;
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.auth-mode-switch button {
  min-height: 44px;
  padding: 6px;
  text-align: center;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.auth-mode-switch button strong {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
}

.auth-mode-switch button.selected {
  color: var(--on-accent);
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  box-shadow: none;
  font-weight: 600;
}

.auth-mode-switch button.selected strong { font-weight: 600; }

.password-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.password-field-control { position: relative; }

.password-field-control input { padding-inline-end: 48px; }

.password-toggle {
  position: absolute;
  inset-inline-end: 2px;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.password-toggle .small-icon { width: 20px; height: 20px; }
.password-toggle .password-icon-hide,
.password-toggle[aria-pressed="true"] .password-icon-show { display: none; }
.password-toggle[aria-pressed="true"] .password-icon-hide { display: block; }

.auth-legal-card {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  text-align: center;
}

.auth-legal-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.1875rem;
}

.offline-account-sheet {
  display: grid;
  gap: 14px;
}

.offline-account-sheet h2,
.offline-account-sheet h3,
.offline-account-sheet p { margin: 0; }

.offline-account-sheet h2 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.75rem;
}

/* Primary actions on the auth screen share the brand fill with white text in both themes. */
.auth-panel .button:not(.ghost):not(.secondary),
.offline-account-sheet .button:not(.ghost):not(.secondary) {
  color: #ffffff;
  background: var(--brand-fill);
}

.offline-account-sheet .actions.vertical { gap: 4px; }

.saved-offline-profiles {
  display: grid;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--outline-variant);
}

.saved-offline-profile {
  justify-content: space-between;
  text-align: left;
}

.contextual-field-help { display: none; }
.auth-panel:has(#signup-password:focus) .contextual-field-help,
.auth-panel:has(#signup-password-confirm:focus) .contextual-field-help,
.auth-panel:has(.password-field-control:focus-within) .contextual-field-help {
  display: block;
  margin: -2px 0 0;
}

.auth-panel {
  padding: 16px;
  background: var(--surface-highlight);
}

.auth-panel h2 {
  margin-bottom: 8px;
}

.auth-panel .field-stack,
.auth-panel .login-row {
  margin-top: 16px;
}

.auth-panel .auth-mode-switch + .field-stack { margin-top: 16px; }

.auth-panel .email-confirmation-status { margin-top: 12px; }

.auth-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.auth-actions > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.auth-actions.stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.store-download-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.store-download-copy {
  display: grid;
  gap: 3px;
}

.store-download-copy h2,
.store-download-copy p {
  margin: 0;
}

.store-download-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Official store badges: equal artwork height (Google's PNG carries 29/250 transparent padding top and bottom). */
.store-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.store-badge-link {
  display: inline-flex;
  border-radius: 10px;
  line-height: 0;
}

.store-badge-link:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

.store-badge {
  width: auto;
  max-width: 100%;
}

.store-badge-apple {
  height: 48px;
}

.store-badge-google {
  height: 62.5px;
  margin-block: -7.25px;
}

/* Garmin's badge artwork spans y 1.5–93.5 of its 95-unit box. */
.store-badge-garmin {
  height: 49.5px;
  margin-block: -0.75px;
}

.store-download-actions > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.store-download-link {
  min-width: 0;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface-strong);
  text-decoration: none;
}

.store-download-link:focus-visible {
  border-color: color-mix(in srgb, var(--sage) 54%, var(--outline));
  background: color-mix(in srgb, var(--sage) 8%, var(--surface-strong));
}

@media (hover: hover) and (pointer: fine) {
  .store-download-link:hover {
    border-color: color-mix(in srgb, var(--sage) 54%, var(--outline));
    background: color-mix(in srgb, var(--sage) 8%, var(--surface-strong));
  }
}

.store-download-icon {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  color: var(--sage);
  fill: currentColor;
}

.store-download-icon.store-download-icon-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.store-download-link > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.store-download-link small {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 0.75rem;
  letter-spacing: 0.05em;
}

.store-download-link strong {
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.1875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-confirmation-preview {
  margin: 12px 0 0;
  text-align: center;
}

.email-confirmation-panel {
  display: grid;
  gap: 16px;
  border-color: color-mix(in srgb, var(--sage) 34%, var(--outline));
  background: color-mix(in srgb, var(--primary-container) 58%, var(--surface-highlight));
}

.email-confirmation-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.email-confirmation-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.email-confirmation-heading span:not(.email-confirmation-icon) {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.email-confirmation-heading strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.email-confirmation-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--accent-on-tint);
  background: color-mix(in srgb, var(--sage) 14%, transparent);
  font-size: 1.3125rem;
}

.email-confirmation-copy {
  display: grid;
  gap: 8px;
}

.email-confirmation-copy h2,
.email-confirmation-copy p {
  margin: 0;
}

.email-confirmation-status {
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--sage) 30%, var(--outline));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--sage) 10%, var(--surface));
}

.email-confirmation-status.error {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--outline));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
}

.email-confirmation-actions {
  display: grid;
  gap: 8px;
}

.local-account-details {
  width: 100%;
}

.local-account-details > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--outline);
  border-radius: 24px;
  color: var(--sage);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.local-account-details > summary::-webkit-details-marker { display: none; }
.local-account-details[open] > summary { margin-bottom: 10px; }
.saved-accounts { display: grid; gap: 4px; margin-top: 12px; }
.saved-accounts .chip-row { margin-top: 0; }

.auth-callback-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-callback-panel {
  width: min(420px, 100%);
  padding: 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--sage) 38%, transparent);
  border-radius: var(--radius-lg);
}

.auth-callback-icon {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 14px;
  color: var(--on-accent);
  background: var(--brand-fill);
  border-radius: 999px;
}

.auth-callback-icon svg {
  width: 34px;
  height: 34px;
}

.auth-callback-panel h1 {
  margin: 0 0 8px;
}

.auth-callback-panel p {
  margin: 0 0 18px;
  color: var(--muted);
}

.login-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.signup-details {
  margin-top: 12px;
}

.signup-details summary {
  color: var(--sage);
  cursor: pointer;
  font-weight: 500;
}

.signup-details .field-stack {
  margin-top: 12px;
}

.login-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 10px;
}

.section-title {
  margin: 0;
}

.section-title h2,
.panel h2,
.modal-panel h2,
.workout-title,
.exercise-row h3,
.mission-row h3 {
  margin: 0;
}

.section-title p,
.row-line p {
  margin: 3px 0 0;
  color: var(--muted);
}

.mapping-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mapping-row small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.25;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-capsule);
  color: var(--on-accent);
  background: var(--brand-fill);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, border-color 160ms ease;
}

.button.secondary {
  color: var(--accent-on-tint);
  background: color-mix(in srgb, var(--sage) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--sage) 34%, var(--outline));
}

.button.ghost {
  color: var(--sage);
  background: transparent;
  border: 1px solid var(--outline);
}

.button.hero-outline {
  color: var(--hero-action-label);
  background: var(--hero-tile);
  border: 1px solid var(--hero-outline);
}

.button.danger {
  color: var(--on-danger);
  background: var(--danger);
}

/* In the exercise menu Delete is a destructive outline row; fill stays for the sole confirm in a dialog. */
.exercise-more-actions .button.danger {
  color: var(--danger);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--outline));
}

.button.mini {
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.8125rem;
}

/* Press feedback (DESIGN.md motion.press): scale .97 in 100ms, ~200ms ease-out release; the tab icon scales .92. */
.icon-button,
.tab-button .tab-icon,
.active-set-step,
.set-editor-step,
.active-set-rest-pill,
.active-set-confirmation-undo,
.active-set-log-compact {
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.active-set-step,
.set-editor-step {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.button:not(:disabled):active,
.buttonlike:active,
.icon-button:active,
.active-set-step:not(:disabled):active,
.set-editor-step:not(:disabled):active,
.active-set-rest-pill:not(:disabled):active,
.active-set-confirmation-undo:active,
.active-set-log-compact:not(:disabled):active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}

.tab-button:active .tab-icon {
  transform: scale(0.92);
  transition: transform 100ms ease-out;
}

.button.full,
.full { width: 100%; }

.button:disabled,
button:disabled {
  opacity: 0.45;
  cursor: default;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.actions.vertical { flex-direction: column; }

.bottom-nav {
  position: fixed;
  left: calc(12px + env(safe-area-inset-left));
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(var(--bottom-nav-offset) + env(safe-area-inset-bottom));
  z-index: 11;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  height: var(--bottom-nav-height);
  padding: 0 6px;
  border: 1px solid var(--nav-outline);
  border-radius: var(--radius-lg);
  background: var(--nav-surface);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

.tab-button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 60px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.tab-button.active {
  color: var(--sage);
}

.tab-icon {
  display: grid;
  place-items: center;
  width: min(56px, 100%);
  height: 32px;
  border-radius: 10px;
}

.tab-button.active .tab-icon {
  background: color-mix(in srgb, var(--sage) 14%, var(--nav-surface));
}

/* The label scales with the text size but is capped by the tab width, so "Упражнения" and "Прогресс" never collide at 130-200%. */
.tab-button > span:last-child {
  max-width: 100%;
  min-width: 0;
  font-size: min(0.75rem, 3.4vw);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 460px) {
  .bottom-nav {
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    padding-inline: 2px;
  }

  html[lang="ru"] .tab-button > span:last-child {
    width: 100%;
    max-width: none;
    padding-inline: 1px;
    font-size: min(0.6875rem, 3.4vw);
    line-height: 1.25;
    letter-spacing: -0.0073em;
    overflow: visible;
    text-overflow: clip;
  }
}

.leaderboard-list {
  display: grid;
  gap: 8px;
  margin-top: 0;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.leaderboard-row.highlighted {
  background: var(--hero-surface);
  border-color: var(--hero-outline);
}

.leaderboard-row h3,
.leaderboard-row p {
  margin: 0;
}

.leaderboard-row p {
  color: var(--muted);
  font-size: 0.8125rem;
}

button.leaderboard-row {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.social-friend-row:focus-visible {
  border-color: color-mix(in srgb, var(--sage) 60%, var(--outline-variant));
  background: var(--surface-highlight);
}

@media (hover: hover) and (pointer: fine) {
  .social-friend-row:hover {
    border-color: color-mix(in srgb, var(--sage) 60%, var(--outline-variant));
    background: var(--surface-highlight);
  }
}

.profile-hub-passport {
  position: relative;
  flex-shrink: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--hero-text);
  background: var(--hero-surface);
  border: 1px solid var(--hero-outline);
}

.profile-hub-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hero-outline);
  border-radius: 17px;
  color: var(--hero-accent-text);
  background: var(--hero-tile);
}

.profile-hub-avatar svg { width: 25px; height: 25px; fill: currentColor; }
.profile-hub-identity { min-width: 0; }
.profile-hub-identity h2,
.profile-hub-identity p { margin: 0; }
.profile-hub-identity h2 {
  overflow: hidden;
  font-size: 1.125rem;
  line-height: 1.4375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-hub-identity p { color: var(--hero-muted); }

/* Unread pill: only rendered when something needs attention; nothing fills the slot otherwise. */
.profile-unread-pill {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: #501b16;
  background: #ffb4aa;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* Friends / Account uses the shared .segmented control with single-line labels. */
.segmented.profile-hub-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
}

.segmented.profile-hub-switch button {
  min-height: 48px;
  padding: 7px 6px;
  text-align: center;
}

.profile-hub-switch button strong {
  overflow: hidden;
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hub-panel { display: grid; gap: 10px; }
.profile-hub-panel[hidden] { display: none; }

.progress-hub,
.progress-hub-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.progress-empty-state {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 12px;
  padding: 20px;
}

.progress-empty-state h2,
.progress-empty-state p { margin: 0; }

.progress-empty-state h2 {
  max-width: 24ch;
  font-size: 1.375rem;
  line-height: 1.75rem;
}

.progress-empty-state p {
  max-width: 48ch;
  color: var(--hero-muted);
}

.progress-empty-state .button { min-width: min(100%, 220px); }

.progress-hub-switch {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.progress-hub-switch button {
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  font-weight: 500;
  cursor: pointer;
}

.progress-hub-switch button span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.progress-hub-switch button.selected {
  color: var(--on-accent);
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  box-shadow: none;
  font-weight: 600;
}
.profile-urgent-stack {
  display: grid;
  gap: 10px;
  padding-left: 10px;
  border-left: 3px solid var(--clay);
}
.profile-urgent-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 2px 0;
}
.profile-urgent-heading h2,
.profile-urgent-heading .eyebrow { margin: 0; }
.profile-urgent-heading h2 { font-size: 1.0625rem; line-height: 1.375rem; }
.profile-live-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--clay);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--clay) 14%, transparent);
}

.friends-circle-card { display: grid; gap: 11px; }
.friends-circle-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.friends-circle-metrics span {
  padding: 6px 9px;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.6875rem;
}
.friends-circle-metrics strong { color: var(--text); font-size: 0.8125rem; }
.friend-circle-list {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--outline-variant);
}

.social-privacy-card > summary,
.friend-safety-actions > summary,
.friend-connect-details > summary,
.account-management-details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.social-privacy-card > summary > span,
.friend-connect-details > summary > span,
.account-management-details > summary > span { display: grid; gap: 2px; }
.friend-connect-details > summary small,
.account-management-details > summary small { color: var(--muted); }
.social-privacy-controls { display: grid; gap: 10px; padding-top: 10px; }
.friend-connect-details .field-row,
.account-management-details .account-actions { margin-top: 10px; }

.social-request-list,
.social-invite-list,
.social-share-friends,
.friend-detail-sheet {
  display: grid;
  gap: 10px;
}

.social-request-list > h2,
.social-invite-list > h2,
.friend-detail-sheet > h3 {
  margin: 8px 0 0;
}

.social-request-card,
.social-invite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.social-request-card p,
.social-invite-card p,
.social-invite-banner p {
  margin: 4px 0 0;
}

.social-code-card .field-row input,
.workout-share-sheet .button {
  min-width: 0;
}

.social-privacy-card {
  display: grid;
  gap: 12px;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.toggle-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--sage);
}

.toggle-row > span { min-width: 0; display: grid; gap: 2px; }
.toggle-row > span small { color: var(--muted); font-size: 0.75rem; line-height: 1.0625rem; }

.workout-share-sheet {
  display: grid;
  gap: 14px;
}

.share-panel .social-share-friend-card {
  background: var(--surface-2);
  box-shadow: none;
}

.social-share-friend-card.preferred {
  border-color: color-mix(in srgb, var(--sage) 52%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary-container) 54%, var(--surface));
}
.social-share-friend-card .eyebrow { display: block; margin-bottom: 2px; }

.friend-detail-sheet .leaderboard-row strong {
  max-width: 16ch;
  text-align: right;
  font-size: 0.8125rem;
}

.friend-workout-history-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.friend-workout-history-row > span:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.friend-workout-history-row small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-workout-chevron {
  color: var(--muted);
  font-size: 1.5rem;
  font-weight: 400;
}

.friend-workout-page-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.friend-workout-page-status.warning { color: var(--clay); }

.friend-record-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
.friend-record-value {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: right;
}
.friend-record-value span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.friend-record-value strong {
  max-width: none !important;
  color: var(--text);
  font-size: 0.75rem !important;
  font-weight: 650;
}

.friend-training-card {
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, #39b58a 36%, var(--outline-variant));
  border-radius: var(--radius-lg);
  background: var(--tertiary-container);
}
.friend-training-card h3,
.friend-training-card p { margin: 0; }
.friend-training-card .eyebrow { color: color-mix(in srgb, #147857 82%, var(--text)); }
.friend-training-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.friend-workout-detail,
.friend-workout-detail-list {
  display: grid;
  gap: 12px;
}

.friend-workout-detail header {
  display: grid;
  gap: 3px;
}

.friend-workout-detail header > span,
.friend-workout-detail header > p {
  color: var(--muted);
  font-size: 0.8125rem;
}

.friend-workout-detail header h2,
.friend-workout-detail header p,
.friend-workout-exercise h3,
.friend-workout-exercise p { margin: 0; }

.friend-workout-back { justify-self: start; }
.friend-workout-exercise { padding: 0; overflow: hidden; }
.friend-workout-exercise > details > summary { padding: 12px; }
.friend-workout-exercise .table { margin: 0 12px 12px; }
.friend-safety-actions { margin-top: 4px; }
.friend-safety-actions > div { padding-top: 8px; }

.friend-workout-picker { display: grid; gap: 12px; }
.friend-workout-picker h2,
.friend-workout-picker p { margin: 0; }
.friend-workout-picker-list {
  max-height: min(52vh, 500px);
  display: grid;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.friend-workout-choice {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.friend-workout-choice > span { min-width: 0; display: grid; gap: 3px; }
.friend-workout-choice small { color: var(--muted); }
.friend-workout-choice b { color: var(--sage); font-size: 0.75rem; }
.friend-workout-choice:focus-visible {
  border-color: color-mix(in srgb, var(--sage) 58%, var(--outline-variant));
  background: var(--surface-highlight);
}

@media (hover: hover) and (pointer: fine) {
  .friend-workout-choice:hover {
    border-color: color-mix(in srgb, var(--sage) 58%, var(--outline-variant));
    background: var(--surface-highlight);
  }
}

.rank-place {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--accent-on-tint);
  background: color-mix(in srgb, var(--sage) 14%, transparent);
  font-weight: 700;
}

.fab {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(112px + env(safe-area-inset-bottom));
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: var(--radius-capsule);
  color: var(--on-accent);
  background: var(--brand-fill);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-floating);
}

.finish-fab {
  bottom: calc(16px + env(safe-area-inset-bottom));
  color: var(--on-primary);
  background: var(--clay);
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.workouts-controls .segmented { margin: 0 16px 10px; }

.mission-period-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
}

.mission-period-tabs button,
.segmented.mission-period-tabs button.selected {
  min-height: 48px;
  padding: 7px 6px;
  text-align: center;
}

.segmented.mission-period-tabs button {
  display: grid;
  place-items: center;
  text-align: center;
}

.segmented button,
.period-tabs button {
  min-height: 58px;
  padding: 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.segmented.auth-mode-switch button {
  text-align: center;
}

.segmented button span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
}

.segmented .selected,
.period-tabs .selected {
  color: var(--on-accent);
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  box-shadow: none;
  font-weight: 600;
}

.segmented button.selected span,
.period-tabs button.selected span { color: inherit; }

.chip.selected {
  color: var(--on-accent);
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  box-shadow: none;
  font-weight: 600;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

/* Summary metrics: two tiles per row only while both really fit; a single column at large text. */
.summary-metrics .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}

.metric-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-grid.post {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-grid > div {
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.workouts-controls { flex: 0 0 auto; }
.workouts-scroll .workouts-controls .segmented { margin: 10px 0 0; }

.workouts-controls .segmented button {
  min-height: 48px;
  padding: 12px;
  text-align: center;
}

.workouts-controls .segmented .selected {
  color: var(--on-accent);
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  box-shadow: none;
  font-weight: 600;
}

.workouts-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  padding: 0 16px var(--bottom-nav-clearance);
}

.focus-overview { display: block; }

.focus-lens {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 14px;
  min-height: 0;
  padding: 22px;
  overflow: hidden;
  color: var(--hero-text);
  border: 1px solid var(--hero-outline);
  border-radius: 28px;
  background: var(--hero-surface);
}

.focus-lens-copy { max-width: 650px; }
.focus-lens-copy h2 {
  max-width: 18ch;
  margin: 8px 0 6px;
  color: var(--hero-text);
  font-size: clamp(1.875rem, 4vw, 2.375rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.05rem;
}
.focus-lens-copy p {
  max-width: 44ch;
  margin: 0;
  color: var(--hero-muted);
  font-size: 0.9375rem;
  line-height: 1.375rem;
}
.focus-lens.active .focus-lens-copy h2 {
  max-width: none;
  margin: 0 0 6px;
  font-size: 1.375rem;
  line-height: 1.75rem;
  letter-spacing: -0.0091em;
}
.focus-lens.active .focus-lens-copy p {
  color: var(--hero-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.focus-lens-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 600px;
}
.focus-lens-metrics.single { grid-template-columns: minmax(0, 1fr); }
.focus-lens-metrics.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.focus-lens-metrics > div { display: grid; gap: 2px; }
.focus-lens-metrics strong {
  font-size: 1.5625rem;
  font-weight: 720;
  line-height: 1.875rem;
  font-variant-numeric: tabular-nums;
}
.focus-lens-metrics span {
  color: var(--hero-muted);
  font-size: 0.75rem;
  line-height: 1rem;
}
.focus-lens-plan-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 600px;
}
.focus-lens-plan-metrics.retained-plan-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.focus-lens-plan-metrics > div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--hero-outline);
  border-radius: 14px;
  background: var(--hero-tile);
}
.focus-lens-plan-metrics strong,
.focus-lens-plan-metrics span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}
/* Fallback of the value fit step: when even the smallest size overflows, the unit wraps to its own line. */
:is(.metric-grid, .weekly-summary-metrics, .summary-hero-stats) strong.fit-wrap.fit-wrap.fit-wrap {
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
}
.focus-lens-details,
.focus-lens-more {
  display: grid;
  gap: 10px;
}
.focus-lens-details > summary,
.focus-lens-more > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--outline-variant);
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.focus-lens-details > summary::-webkit-details-marker,
.focus-lens-more > summary::-webkit-details-marker { display: none; }
.focus-lens-details > summary::after,
.focus-lens-more > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}
.focus-lens-details[open] > summary::after,
.focus-lens-more[open] > summary::after { content: "−"; }
.focus-lens-details > summary,
.focus-lens-more > summary {
  color: var(--hero-action-label);
  border-color: var(--hero-outline);
  background: var(--hero-tile);
}
.focus-lens-more .focus-lens-discard { width: 100%; }
.focus-lens-manual {
  color: var(--hero-action-label);
  border-color: var(--hero-outline);
  background: var(--hero-tile);
}
.focus-lens-details-content,
.activation-options-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-top: 2px;
}
.focus-lens-plan-metrics strong {
  color: var(--hero-text);
  font-size: 1.125rem;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  line-height: 1.375rem;
  overflow-wrap: anywhere;
  white-space: normal;
}
.focus-lens-plan-metrics span {
  display: -webkit-box;
  margin-top: 2px;
  color: var(--hero-muted);
  font-size: 0.75rem;
  line-height: 1rem;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 360px) {
  .focus-lens-plan-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .focus-lens-plan-metrics > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.weekly-workout-summary {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: none;
  touch-action: pan-y;
}
.weekly-workout-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.weekly-workout-summary-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
}
.weekly-workout-summary-head span {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--accent-on-tint);
  background: color-mix(in srgb, var(--sage) 10%, var(--surface));
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.week-switcher {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.week-current-button {
  display: grid;
  place-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 48px;
  padding: 3px 6px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}
.week-current-button strong,
.week-current-button span {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.week-current-button span {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1rem;
}
.week-current-button:disabled {
  opacity: 1;
  cursor: default;
}
.weekly-summary-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.weekly-summary-day {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
}
.weekly-summary-day.today { color: var(--text); }
.weekly-summary-day i {
  display: block;
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
}
.weekly-summary-day.trained i {
  background: color-mix(in srgb, #27c99a 86%, var(--surface));
}
.weekly-summary-day.today i {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}
.weekly-summary-metrics {
  width: 100%;
  max-width: none;
}
.weekly-summary-metrics > div {
  border-color: var(--outline-variant);
  background: var(--surface-2);
}
.weekly-summary-metrics strong {
  color: var(--text);
  overflow-wrap: normal;
  white-space: nowrap;
}
.weekly-summary-metrics span { color: var(--muted); }
.weekly-session-list {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--outline-variant);
}
.weekly-session-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.weekly-session-list-head h4 { margin: 0; }
.weekly-session-list-head span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.weekly-session-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 9px 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xs);
  color: var(--text);
  background: var(--surface-2);
  text-align: left;
  cursor: pointer;
}
.weekly-session-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.weekly-session-row strong,
.weekly-session-row small { overflow-wrap: anywhere; }
.weekly-session-row small,
.weekly-session-row svg { color: var(--muted); }
.training-history {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: none;
  touch-action: pan-y;
}
.training-history.swiping {
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.training-week-review,
.activity-heatmap-card,
.progress-month-swipe {
  touch-action: pan-y;
}
.progress-month-swipe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.training-week-review.swiping,
.activity-heatmap-card.swiping,
.progress-month-swipe.swiping {
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.training-history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.training-history-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.625rem;
}
.training-history-head > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--accent-on-tint);
  background: color-mix(in srgb, var(--sage) 10%, var(--surface));
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.training-history-period {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.training-history-period button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}
.training-history-period button.selected {
  color: var(--on-accent);
  border-color: var(--brand-fill);
  background: var(--brand-fill);
}
.training-history-switcher {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.training-history-current {
  display: grid;
  place-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 48px;
  padding: 3px 6px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}
.training-history-current strong,
.training-history-current span {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.training-history-current span {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1rem;
}
.training-history-current:disabled { opacity: 1; cursor: default; }
.training-history-month-weekdays,
.training-history-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}
.training-history-month-weekdays span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
}
.training-history-month-grid > span,
.training-history-month-grid > i {
  display: grid;
  min-width: 0;
  min-height: 32px;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  font-size: 0.75rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.training-history-month-grid > span.trained {
  color: var(--on-secondary-container, var(--text));
  background: color-mix(in srgb, #27c99a 24%, var(--surface));
  font-weight: 800;
}
.training-history-month-grid > span.today {
  outline: 2px solid var(--sage);
  outline-offset: -2px;
}
.training-history-list {
  display: grid;
  padding-top: 2px;
  border-top: 1px solid var(--outline-variant);
}
.training-history-list > .muted { margin: 12px 2px 2px; }
.training-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--outline-variant);
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.training-history-row:last-child { border-bottom: 0; }
.training-history-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.training-history-row strong,
.training-history-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.training-history-row small,
.training-history-row svg { color: var(--muted); }
.training-history-row > b {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.focus-lens.completed.compact {
  gap: 10px;
  padding: 18px;
}
.focus-lens.completed.compact .focus-lens-copy h2 {
  margin-block: 4px;
  font-size: 1.6875rem;
  line-height: 2rem;
}
.focus-lens.completed.compact .focus-lens-copy p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.focus-lens.completed.compact .focus-lens-actions { max-width: none; grid-template-columns: minmax(0, 1fr); }
.workout-date-actions { align-items: center; }
.workout-date-weekday {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.focus-lens-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  margin-top: auto;
  padding: 0 22px;
  color: var(--hero-on-action);
  border: 1px solid var(--hero-action);
  border-radius: 999px;
  background: var(--hero-action);
  font-weight: 700;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .focus-lens-action:hover { background: color-mix(in srgb, var(--hero-action) 88%, var(--hero-text)); }
}
.focus-lens-action:active { transform: scale(0.98); }
.focus-lens-action.secondary {
  color: var(--hero-action-label);
  border-color: var(--hero-outline);
  background: var(--hero-tile);
  box-shadow: none;
}

.empty-workouts-scroll { padding-top: 2px; }
.activation-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  color: var(--hero-text);
  border-color: var(--hero-outline);
  border-radius: 28px;
  background: var(--hero-surface);
}
.activation-card .field-caption { color: var(--hero-muted); }
.activation-card .chip-row { margin: -4px 0 0; }
.activation-card .chip {
  color: var(--hero-text);
  background: var(--hero-tile);
  border-color: var(--hero-outline);
  box-shadow: none;
}
.activation-card .chip.selected {
  color: var(--hero-on-action);
  background: var(--hero-action);
  border-color: var(--hero-action);
}
.activation-card .activation-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.activation-card .activation-goals .chip { justify-content: center; min-width: 0; }
.activation-plan-heading h2,
.activation-plan-heading .eyebrow { margin: 0; }
.activation-plan-heading h2 { margin-top: 3px; color: var(--hero-text); }
.activation-plan-heading p {
  max-width: 48ch;
  margin: 7px 0 0;
  color: var(--hero-muted);
  line-height: 1.375rem;
}
.activation-plan-heading .eyebrow { color: var(--hero-muted); }
.activation-plan-unavailable { color: var(--hero-muted); }
.activation-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 2px; }
.activation-actions .button {
  color: var(--hero-on-action);
  background: var(--hero-action);
  border: 1px solid var(--hero-action);
}
.activation-actions .button.secondary {
  color: var(--hero-action-label);
  border-color: var(--hero-outline);
  background: var(--hero-tile);
}
.activation-actions .button.ghost { color: var(--hero-action-label); border-color: transparent; background: transparent; }
.activation-card-retained {
  background: var(--hero-surface);
}
.activation-card-retained .activation-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.activation-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.activation-title-row h2 { min-width: 0; align-self: center; }
.activation-card > *,
.activation-plan-heading,
.activation-options-content > *,
.smart-coach-panel > * { min-width: 0; max-width: 100%; }
.activation-options-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--hero-action-label);
  background: var(--hero-tile);
  cursor: pointer;
}
.activation-options-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.activation-options-toggle.open {
  color: var(--hero-on-action);
  background: var(--hero-action);
}
.activation-options-toggle:focus-visible {
  outline: 2px solid var(--hero-action);
  outline-offset: 2px;
}
.activation-options-content .button.ghost {
  min-height: 48px;
  color: var(--hero-action-label);
  border-color: transparent;
  background: transparent;
}
.activation-actions .activation-manual {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  color: var(--hero-action-label);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.activation-actions .activation-manual:focus-visible {
  outline: 2px solid var(--hero-action);
  outline-offset: -2px;
  border-radius: 12px;
}
.today-empty-hint {
  margin: 0;
  padding: 16px 12px 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.25rem;
  text-align: center;
}

@keyframes social-push-arrival {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sage) 38%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--sage) 18%, transparent); }
}

.social-push-target {
  border-color: color-mix(in srgb, var(--sage) 72%, var(--outline-variant)) !important;
  animation: social-push-arrival 900ms ease-in-out 2;
}

.workout-feedback { padding: 12px; container-type: inline-size; }
.workout-feedback h2 { margin: 0 4px 8px; font-size: 1rem; }
.segmented.workout-feedback-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
/* Three chips per row while each can be 4.5rem wide, otherwise one per row (never two plus one). */
@container (max-width: 14.5rem) {
  .segmented.workout-feedback-options { grid-template-columns: 1fr; }
}

.segmented.workout-feedback-options button {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-capsule);
  color: var(--text);
  background: var(--surface-2);
  font-size: 0.9375rem;
  text-align: center;
  /* Wraps by words at large text instead of cutting the label with an ellipsis. */
  white-space: normal;
  border-radius: 22px;
}

.segmented.workout-feedback-options button strong {
  display: block;
  max-width: 100%;
  font-weight: 600;
  overflow-wrap: break-word;
}

.segmented.workout-feedback-options button.selected {
  color: var(--on-accent);
  background: var(--brand-fill);
  border-color: var(--brand-fill);
}

@media (max-width: 340px) {
  .segmented.workout-feedback-options { grid-template-columns: 1fr; }
}

.focus-lens-actions { max-width: 420px; }
.workout-date-actions { align-items: center; }
.workout-date-weekday {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.focus-lens-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  margin-top: auto;
  padding: 0 22px;
  color: var(--hero-on-action);
  border: 1px solid var(--hero-action);
  border-radius: 999px;
  background: var(--hero-action);
  font-weight: 700;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .focus-lens-action:hover { background: color-mix(in srgb, var(--hero-action) 88%, var(--hero-text)); }
}
.focus-lens-action:active { transform: scale(0.98); }
.focus-lens-action.secondary {
  color: var(--hero-action-label);
  border-color: var(--hero-outline);
  background: var(--hero-tile);
  box-shadow: none;
}

.empty-workouts-scroll { padding-top: 2px; }
.activation-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  color: var(--hero-text);
  border-color: var(--hero-outline);
  border-radius: 28px;
  background: var(--hero-surface);
}
.activation-card .field-caption { color: var(--hero-muted); }
.activation-card .chip-row { margin: -4px 0 0; }
.activation-card .chip {
  color: var(--hero-text);
  background: var(--hero-tile);
  border-color: var(--hero-outline);
  box-shadow: none;
}
.activation-card .chip.selected {
  color: var(--hero-on-action);
  background: var(--hero-action);
  border-color: var(--hero-action);
}
.activation-card .activation-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.activation-card .activation-goals .chip { justify-content: center; min-width: 0; }
.activation-plan-heading h2,
.activation-plan-heading .eyebrow { margin: 0; }
.activation-plan-heading h2 { margin-top: 3px; color: var(--hero-text); }
.activation-plan-heading p {
  max-width: 48ch;
  margin: 7px 0 0;
  color: var(--hero-muted);
  line-height: 1.375rem;
}
.activation-plan-heading .eyebrow { color: var(--hero-muted); }
.activation-plan-unavailable { color: var(--hero-muted); }
.activation-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 2px; }
.activation-actions .button {
  color: var(--hero-on-action);
  background: var(--hero-action);
  border: 1px solid var(--hero-action);
}
.activation-actions .button.secondary {
  color: var(--hero-action-label);
  border-color: var(--hero-outline);
  background: var(--hero-tile);
}
.activation-actions .button.ghost { color: var(--hero-action-label); border-color: transparent; background: transparent; }
.activation-card-retained {
  background: var(--hero-surface);
}
.activation-card-retained .activation-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.activation-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.activation-title-row h2 { min-width: 0; align-self: center; }
.activation-card > *,
.activation-plan-heading,
.activation-options-content > *,
.smart-coach-panel > * { min-width: 0; max-width: 100%; }
.activation-options-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--hero-action-label);
  background: var(--hero-tile);
  cursor: pointer;
}
.activation-options-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.activation-options-toggle.open {
  color: var(--hero-on-action);
  background: var(--hero-action);
}
.activation-options-toggle:focus-visible {
  outline: 2px solid var(--hero-action);
  outline-offset: 2px;
}
.activation-options-content .button.ghost {
  min-height: 48px;
  color: var(--hero-action-label);
  border-color: transparent;
  background: transparent;
}
.activation-actions .activation-manual {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  color: var(--hero-action-label);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.activation-actions .activation-manual:focus-visible {
  outline: 2px solid var(--hero-action);
  outline-offset: -2px;
  border-radius: 12px;
}
.today-empty-hint {
  margin: 0;
  padding: 16px 12px 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.25rem;
  text-align: center;
}

@keyframes social-push-arrival {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sage) 38%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--sage) 18%, transparent); }
}

.social-push-target {
  border-color: color-mix(in srgb, var(--sage) 72%, var(--outline-variant)) !important;
  animation: social-push-arrival 900ms ease-in-out 2;
}

.workout-feedback { padding: 12px; }
.workout-feedback h2 { margin: 0 4px 8px; font-size: 1rem; }
.workout-feedback-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.workout-feedback-options button {
  min-height: 44px;
  border-radius: var(--radius-capsule);
  padding: 8px;
  text-align: center;
  white-space: normal;
}

.workout-feedback-options button strong { display: block; overflow-wrap: break-word; }

@media (max-width: 340px) {
  .workout-feedback-options { grid-template-columns: 1fr; }
}

.focus-lens-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: auto;
}

.focus-lens-actions .focus-lens-action { margin-top: 0; }

.focus-lens-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 112px;
  min-height: 54px;
  padding: 0 18px;
  color: var(--hero-action-label);
  border: 1px solid var(--hero-outline);
  border-radius: 999px;
  background: var(--hero-tile);
  font-weight: 700;
  cursor: pointer;
}

.focus-lens-edit span,
.focus-lens-action span { text-wrap: balance; text-align: center; }

.focus-lens-edit:focus-visible { background: color-mix(in srgb, var(--hero-action) 10%, var(--hero-tile)); }

@media (hover: hover) and (pointer: fine) {
  .focus-lens-edit:hover { background: color-mix(in srgb, var(--hero-action) 10%, var(--hero-tile)); }
}


.focus-lens-discard {
  min-width: 92px;
  min-height: 54px;
  padding: 0 18px;
  color: var(--hero-action-label);
  border: 1px solid var(--hero-outline);
  border-radius: 999px;
  background: var(--hero-tile);
  font-weight: 700;
  cursor: pointer;
}

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

.workout-section-header > div { min-width: 0; }
.workout-section-header h2,
.workout-section-header p { margin: 0; }
.workout-section-header p { margin-top: 4px; }

.workout-list,
.exercise-list,
.mission-list,
.draft-list,
.list-gap,
.bars {
  display: grid;
  gap: 10px;
}

.workout-item,
.exercise-row {
  padding: 16px;
}

.mission-row {
  display: grid;
  gap: 9px;
  padding: 13px 16px;
}

.mission-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mission-card-icon {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--primary);
}

.mission-card-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.mission-card-copy {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.mission-card-copy h3,
.mission-card-copy p {
  margin: 0;
}

.mission-card-copy h3 {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.375rem;
}

.mission-card-copy p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.25rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.mission-reward {
  flex: 0 0 auto;
  color: var(--clay);
}

.mission-row.highlighted .mission-reward { color: var(--sage); }

.mission-row .progress { margin: 0; }

.mission-row .progress span { background: var(--mint); }
.mission-row.highlighted .progress span { background: var(--primary); }

.mission-card-counter {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 4px;
}

.mission-counter {
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.375rem;
  white-space: nowrap;
}

.mission-completed-pill { min-height: 26px; padding: 0 8px; font-size: 0.75rem; }
.mission-completed-pill .small-icon { width: 13px; height: 13px; }

.workout-item {
  background: var(--surface-highlight);
  border-color: color-mix(in srgb, var(--sage) 36%, var(--outline-variant));
}

.exercise-row {
  padding: 16px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.exercise-name {
  min-width: 0;
  flex: 1;
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 0;
}

.clickable { cursor: pointer; }

.workout-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.workout-head > :first-child { min-width: 0; }
.workout-head .muted { display: block; overflow-wrap: anywhere; }
.workout-head .actions { flex: 0 0 auto; }

.workout-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  font-size: 0.75rem;
  line-height: 1.125rem;
}

.workout-stats span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chip,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--sage) 16%, transparent);
  border-radius: var(--radius-capsule);
  color: var(--accent-on-tint);
  background: color-mix(in srgb, var(--sage) 10%, transparent);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.125rem;
  white-space: nowrap;
}

.buttonlike {
  min-height: 44px;
  padding-inline: 12px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8125rem;
}

input,
select,
textarea {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-xs);
  padding: 12px 16px;
  color: var(--text);
  background: transparent;
  /* Never below 16px on touch browsers (smaller sizes make iOS Safari zoom the page on focus) and it scales with the root. */
  font-size: max(1rem, 1em);
  outline: none;
}

select option { color: var(--text); background: var(--background); }

textarea {
  min-height: 104px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 1px var(--sage);
}

.draft-exercise {
  display: grid;
  gap: 11px;
}

.set-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

/* Plan editor sets share the active/saved capsule editor; a divider separates sets, 10px above and below. */
.set-entry {
  display: grid;
  gap: 8px;
  padding: 10px 0;
}

.set-entry + .set-entry { border-top: 1px solid var(--outline-variant); }

.set-badge {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--accent-on-tint);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.set-row .set-editor-capsules { flex-wrap: nowrap; }

.set-chips {
  display: flex;
  gap: 8px;
  padding-left: 40px;
  overflow-x: auto;
  scrollbar-width: none;
}

.set-chips::-webkit-scrollbar { display: none; }

.set-chip {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  /* 44px hit area; the visible 36px pill is drawn by ::before. */
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--primary);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.125rem;
  cursor: pointer;
}

.set-chip::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  z-index: -1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.set-chip:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Dashed full-width add buttons (+ Set, + Add exercise, Choose exercise), matching the active and saved screens. */
.draft-dashed-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px dashed color-mix(in srgb, var(--brand-fill) 50%, transparent);
  border-radius: var(--radius-capsule);
  color: var(--primary);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.draft-list { display: grid; gap: 12px; }

/* Plan card: the active/saved card look without the collapse; one 12px rhythm from header to the last set. */
.draft-exercise.active-workout-exercise { gap: 12px; }
.draft-exercise .subpanel.smart { border-color: color-mix(in srgb, var(--primary) 24%, transparent); }
.draft-exercise .subpanel.smart svg { color: var(--primary); }
.smart-set-list { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.smart-set { white-space: nowrap; font-variant-numeric: tabular-nums; }

.draft-last-logged { font-size: 0.75rem; line-height: 1rem; }

.smart-plan-focus {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.375rem;
}

.smart-plan-focus svg { flex: 0 0 auto; }
.smart-plan-note { font-size: 0.8125rem; line-height: 1.125rem; color: var(--muted); }

.plan-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.button.exercise-builder-more {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
}

.plan-menu-trigger { cursor: pointer; }

.plan-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 18;
  display: grid;
  gap: 2px;
  width: min(240px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  box-shadow: var(--shadow-floating);
}

.plan-menu-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.plan-menu-option.danger { color: var(--danger, #c0392b); }
.plan-menu-option:focus-visible { background: color-mix(in srgb, var(--primary) 10%, transparent); }

@media (hover: hover) and (pointer: fine) {
  .plan-menu-option:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
}
.plan-menu-option svg { flex: 0 0 auto; width: 20px; height: 20px; }

.active-workout-hero,
.active-workout-finish {
  display: grid;
  gap: 14px;
}

.active-live-switch {
  display: grid;
  gap: 6px;
}

.active-live-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.active-live-tabs button {
  min-width: 0;
  min-height: 46px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.active-live-tabs button.selected {
  color: var(--on-accent);
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  box-shadow: none;
  font-weight: 600;
}

.active-live-tabs button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sage) 58%, transparent);
  outline-offset: 2px;
}

.active-live-connection {
  justify-self: end;
  padding-right: 4px;
  color: var(--muted);
  font-size: 0.6875rem;
}

/* One-shot: app.js emits data-enter only on the render that follows a participant tab switch. */
.active-live-participant-panel[data-enter]:not([hidden]) {
  animation: active-live-panel-enter 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.active-live-participant-panel[hidden] { display: none; }

@keyframes active-live-panel-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.active-peer-view,
.active-peer-set-list {
  display: grid;
  gap: 10px;
}

.active-peer-exercise h2 { margin: 0; }

.active-peer-set {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--outline-variant);
  border-radius: 14px;
  background: var(--surface-2);
}

.active-peer-set > span:last-child { color: var(--muted); }
.active-peer-set.completed { background: var(--surface-highlight); }

.workout-exercise-choice {
  display: grid;
  gap: 10px;
}

.workout-exercise-picker {
  display: grid;
  gap: 14px;
}

.workout-exercise-picker .exercise-search-panel { margin: 0; }

.workout-exercise-picker-list {
  display: grid;
  gap: 10px;
  max-height: min(48vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.workout-exercise-picker-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.workout-exercise-picker-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workout-exercise-picker-row strong,
.workout-exercise-picker-row small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.workout-exercise-picker-row small { color: var(--muted); }
.workout-exercise-picker-row .button.secondary { color: var(--hero-accent-text); }

.active-workout-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.active-workout-list,
.active-set-list {
  display: grid;
  gap: 10px;
}

.active-workout-exercise {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.active-workout-exercise > details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.active-workout-exercise.completed {
  border-color: var(--outline-variant);
  background: color-mix(in srgb, var(--sage) 15%, var(--surface));
}

.active-workout-exercise.current {
  border-color: var(--outline-variant);
  background: var(--hero-surface);
}

.active-workout-exercise.upcoming {
  border-color: color-mix(in srgb, var(--outline-variant) 68%, transparent);
  background: color-mix(in srgb, var(--surface-2) 52%, var(--surface));
}

.active-workout-exercise-summary { margin: 0; }

/* One confirmation per recorded set: check, text wrapping to at most two lines, trailing Undo. */
.active-set-confirmation {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, transparent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* One-shot enter (data-enter set once per confirmation by activeSetConfirmationMarkup). */
.active-set-confirmation[data-enter] { animation: active-enter-drop 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes active-enter-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes active-enter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.active-set-confirmation-icon { display: grid; flex: 0 0 auto; color: var(--primary); }
.active-set-confirmation-icon svg { width: 20px; height: 20px; }

.active-set-confirmation-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.25;
  overflow-wrap: normal;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.active-set-confirmation-undo,
.active-set-confirmation-dismiss {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  background: transparent;
  color: var(--primary);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.active-set-confirmation-dismiss { display: grid; place-items: center; padding: 0; color: var(--muted); }
.active-set-confirmation-dismiss svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Latest completed row: one line, rest controls wrap under it when space runs out. */
.active-set-completed-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
}

[data-active-set-undoable] .active-set-completed-line {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.active-set-rest {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.active-set-rest[hidden] { display: none; }

/* Rest ran out: the timer is highlighted for ~600ms while the pills fade out over 150ms, then app.js hides the group. */
.active-set-rest-pill { transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms cubic-bezier(0.22, 1, 0.36, 1); }
.active-set-rest.rest-ended .active-set-rest-pill { opacity: 0; pointer-events: none; }
.active-set-rest.rest-ended .active-set-rest-time {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  animation: active-rest-ended 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes active-rest-ended {
  0% { transform: scale(1); }
  30% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.active-set-rest-time {
  margin-right: 4px;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ~32px pill visual inside a >=44x44 tap target. */
.active-set-rest-pill {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.active-set-rest-pill::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--surface);
}

.active-set-rest-pill > span { position: relative; display: grid; place-items: center; }
.active-set-rest-pill svg { width: 14px; height: 14px; }
.active-set-rest-stop svg path { fill: currentColor; stroke: none; }
.active-set-rest-pill:disabled { opacity: 0.5; cursor: default; }

/* Keyboard alternative to long-press for Delete: hidden until it receives focus. */
.active-set-delete-key {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.active-set-delete-key:focus-visible {
  position: static;
  width: auto;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  overflow: visible;
  clip: auto;
  justify-self: start;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Standing Undo on the latest recorded set: flat accent text in a >=44px target, pushed to the trailing edge. */
.active-set-undo-key {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.active-set-list { gap: 0; }
.active-set-list,
.active-set-list > *,
.active-set-row { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Set rows: upcoming and completed sets are bare rows split by hairlines; only the current set is a card. */
.active-set-row {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.active-set-row + .active-set-row { border-top: 1px solid var(--outline-variant); }

.active-set-row.current {
  margin: 2px 0;
  padding: 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand-fill) 10%, transparent);
  /* Supporting text on the blue-tinted current set card keeps 4.5:1 in light. */
  --muted: var(--muted-on-tint);
}

.active-set-row.current + .active-set-row,
.active-set-row + .active-set-row.current { border-top: 0; }

.active-set-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  list-style: none;
}

.active-set-summary::-webkit-details-marker { display: none; }
summary.active-set-summary { min-height: 44px; cursor: pointer; }
.active-set-summary-text { font-size: 0.9375rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

.active-set-index {
  display: grid;
  place-items: center;
  flex: 0 0 max(22px, 1.9em);
  width: max(22px, 1.9em);
  height: max(22px, 1.9em);
  border: 1.5px solid var(--outline);
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.active-set-check {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 18%, transparent);
}

.active-set-check svg { width: 16px; height: 16px; }

/* One-shot set-completion motion: data-enter is emitted only on the render right after a record. */
.active-set-check[data-enter] { animation: active-set-check-pop 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.active-set-row.current[data-enter] { animation: active-live-panel-enter 150ms cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes active-set-check-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
.active-set-chevron { margin-left: auto; display: grid; color: var(--muted); }
.active-set-chevron svg { width: 16px; height: 16px; }
.active-set-details[open] .active-set-chevron { transform: rotate(180deg); }
.active-set-editor { display: block; padding: 2px 0 6px 0; }
.active-set-editor-input { width: 96px; min-height: 44px; padding: 6px 12px; text-align: center; }
.active-set-hidden-input { display: none; }

.active-set-current-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; }
.active-set-title { color: var(--accent-on-tint); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }

.active-set-previous {
  white-space: normal;
  text-align: right;
  margin: -8px 0 -8px auto;
  min-height: 44px;
  padding: 0 4px;
  color: var(--accent-on-tint);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.active-set-value-line { display: flex; align-items: baseline; justify-content: center; gap: 4px; }

.active-set-row .active-set-weight-input {
  width: auto;
  min-width: 1.2ch;
  padding: 0;
  border: 0;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  box-shadow: none;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  field-sizing: content;
  /* 44px hit area; the negative margin keeps the value line at its previous height. */
  min-height: 44px;
  margin-block: -3.5px;
}

.active-set-row .active-set-weight-input:focus,
.active-set-row .active-set-weight-input:focus-visible {
  border-bottom-color: var(--primary);
  box-shadow: none;
  outline: none;
}

.active-set-unit { color: var(--muted); font-size: 0.9375rem; }
.active-set-times { color: var(--muted); font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; }
.active-set-editor .active-set-times { font-size: 0.9375rem; line-height: 1.25rem; }
.active-set-reps-value { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.active-set-row .active-set-reps-input {
  position: absolute;
  width: 1px;
  min-height: 0;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.active-set-steppers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 360px) { .active-set-steppers { grid-template-columns: minmax(0, 1fr); } }

.active-set-capsule { position: relative; display: flex; align-items: center; }

.active-set-capsule::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 34px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--surface);
}

.active-set-step {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--accent-on-tint);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.active-set-step svg { width: 16px; height: 16px; }

.active-set-capsule-label {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  color: var(--muted);
  font-size: 0.6875rem;
}

/* Current card: stepper capsules plus the trash icon on one row. */
.active-set-stepper-row { display: flex; align-items: center; gap: 8px; }
.active-set-stepper-row .active-set-steppers { flex: 1; min-width: 0; }

/* Shared set editor (pending active sets and saved sets): [−] [12 kg] [+]  [−] [4] [+]  [trash]. */
.set-editor-capsules { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }

.set-editor-capsule {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  min-width: 0;
  height: 44px;
  border-radius: 999px;
  background: var(--surface);
}

/* The weight capsule gets more room so "102.5 kg" never clips; reps stays the same height and style. */
.set-editor-capsule[data-step-field="weight"] { flex: 1.35 1 0; }
.set-editor-capsule[data-step-field="reps"] { flex: 1 1 0; }

.set-editor-step {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  color: var(--primary);
  background: transparent;
  cursor: pointer;
}

.set-editor-step svg { width: 16px; height: 16px; }
/* 44px-wide hit area around the 36px step capsule; the visible size is unchanged. */
.set-editor-step { position: relative; }
.set-editor-step::before { content: ""; position: absolute; inset: 0 -4px; }
.set-editor-step:disabled { opacity: 0.4; cursor: default; }

.set-editor-value {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.set-editor-input {
  width: 4ch;
  min-width: 3ch;
  max-width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  box-shadow: none;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  field-sizing: content;
}

@supports (field-sizing: content) {
  .set-editor-input { width: auto; }
}

.set-editor-input:focus,
.set-editor-input:focus-visible {
  border-bottom-color: var(--primary);
  box-shadow: none;
  outline: none;
}

.set-editor-input.set-editor-input-invalid,
.set-editor-input[aria-invalid="true"] {
  border-bottom-color: var(--danger);
  color: var(--danger);
}

.set-editor-capsule:has(.set-editor-input[aria-invalid="true"]) {
  box-shadow: inset 0 0 0 1.5px var(--danger);
}

.set-editor-unit { color: var(--muted); font-size: 0.8125rem; }

.set-delete-icon {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  color: var(--danger);
  background: transparent;
  cursor: pointer;
}

.set-delete-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.active-set-stepper-row .set-delete-icon { flex: 0 0 44px; }

/* Expanded set rows (live workout, saved-workout edit) and plan-draft set rows: two capsules on their own row so
   every stepper and input reaches the 44px tap minimum. Expanded rows put the trash icon on a trailing row. */
:is(.active-set-editor, .set-row) .set-editor-capsule { width: auto; }
:is(.active-set-editor, .set-row) .set-editor-step { width: 44px; }
:is(.active-set-editor, .set-row) .set-editor-input { min-width: 44px; min-height: 44px; padding: 10px 0; border-bottom: 0; }
:is(.active-set-editor, .set-row) .set-editor-capsule:has(.set-editor-input:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--primary); }
:is(.active-set-editor, .set-row) .set-editor-capsule:has(.set-editor-input[aria-invalid="true"]),
:is(.active-set-editor, .set-row) .set-editor-capsule:has(.set-editor-input-invalid) { box-shadow: inset 0 0 0 1.5px var(--danger); }
.active-set-editor .set-editor-capsules { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px; }
.active-set-editor .set-editor-capsules .set-delete-icon { grid-column: 1 / -1; justify-self: end; }

/* Plan draft: the set badge and trash icon share a header row above the two capsules (the editor wrapper is
   layout-transparent, so its capsules and trash become cells of the row grid). */
.set-row { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px; }
.set-row .set-badge { grid-row: 1; grid-column: 1; justify-self: start; }
.set-row .set-editor-capsules { display: contents; }
.set-row .set-editor-capsule[data-step-field="weight"] { grid-row: 2; grid-column: 1; }
.set-row .set-editor-capsule[data-step-field="reps"] { grid-row: 2; grid-column: 2; }
.set-row .set-delete-icon { grid-row: 1; grid-column: 2; justify-self: end; }
.set-entry .set-chips { padding-left: 0; margin: -4px 0; }

/* Narrow phones: stack the capsules so the 44px steppers keep room for the value. */
@media (max-width: 359px) {
  .active-set-editor .set-editor-capsules { grid-template-columns: minmax(0, 1fr); }
  .set-row { grid-template-columns: minmax(0, 1fr) auto; }
  .set-row .set-badge { grid-column: 1; }
  .set-row .set-delete-icon { grid-column: 2; }
  .set-row .set-editor-capsule[data-step-field] { grid-column: 1 / -1; }
  .set-row .set-editor-capsule[data-step-field="weight"] { grid-row: 2; }
  .set-row .set-editor-capsule[data-step-field="reps"] { grid-row: 3; }
}

/* Only very large text sizes stack the capsules; phones keep weight, reps and trash on one row down to 320px. */
@media (max-width: 280px) {
  .set-editor-capsules { flex-direction: column; align-items: stretch; }
  .set-editor-capsule,
  .set-editor-capsule[data-step-field] { flex: 0 0 44px; }
  .set-editor-capsules .set-delete-icon { align-self: flex-end; }
  .active-set-editor .set-editor-capsules { grid-template-columns: minmax(0, 1fr); }
}

/* The voice container is layout-transparent: its transcript and action row are rows of the current card. */
.active-set-voice { display: contents; }
.active-set-action-row { display: flex; align-items: stretch; gap: 8px; }

.active-set-row[data-voice-phase="listening"] .active-set-value-line,
.active-set-row[data-voice-phase="listening"] .active-set-stepper-row { display: none; }

.active-set-mic {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: var(--primary);
  background: var(--surface);
  cursor: pointer;
}

.active-set-mic.stop { color: var(--on-primary); background: var(--brand-fill); }
.active-set-mic.stop svg { fill: currentColor; stroke: none; }
.active-set-mic.cancel { color: var(--muted); }

.active-set-log {
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  color: var(--on-primary);
  background: var(--brand-fill);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 3rem;
  font-size: 1rem;
  font-weight: 600;
}

.active-set-log-rest { font-size: 0.875rem; font-weight: 400; color: inherit; }

/* Out-of-order logging and delete for unrecorded rows; the exercise overflow menu sits outside the summary. */
.active-set-row.upcoming { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 8px; }
.active-set-row-actions { display: flex; align-items: center; gap: 4px; }
/* Expanded editor spans the full row; the Log button stays on the summary line, overlaid at the right. */
.active-set-row.upcoming > .active-set-row-actions { grid-column: 2; grid-row: 1; align-self: start; position: relative; z-index: 1; }
.active-set-row.upcoming:has(> .active-set-details[open]) > .active-set-details { grid-column: 1 / -1; grid-row: 1; }
.active-set-row.upcoming:has(> .active-set-row-actions):has(> .active-set-details[open]) > .active-set-details > summary { padding-right: 112px; }
.saved-set-row.upcoming > .active-set-details { grid-column: 1 / -1; }
.active-set-log-compact {
  min-width: 64px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--accent-on-tint);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.active-set-log-compact:disabled {
  color: color-mix(in srgb, var(--primary) 38%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
[data-active-set-deletable] .active-set-details > summary,
[data-active-set-deletable] .active-set-current-head {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.active-workout-exercise { position: relative; }
.active-exercise-menu { position: absolute; top: 20px; right: 6px; width: 44px; height: 44px; }
/* Keep the overflow button on the header row's centre line (thumbnail and chevron): 16px inset inside the card border + half the row height. */
.active-workout-exercise:is(.completed, .upcoming):has(> details:not([open])) > .active-exercise-menu { top: 24.5px; }
.saved-workout-exercise-card > .active-exercise-menu { top: 20.5px; }
.active-workout-exercise:has(> .active-exercise-menu) .active-workout-exercise-summary { padding-right: 48px; }

.active-set-voice-transcript { display: grid; gap: 4px; text-align: center; }
.active-set-voice-interim { font-size: 1.25rem; line-height: 1.625rem; font-weight: 600; overflow-wrap: anywhere; }
.active-set-voice-hint { color: var(--muted); font-size: 0.75rem; }

.active-set-listening-pill {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 0 6px 0 14px;
  border-radius: 999px;
  background: var(--surface);
}

.active-set-listening-pill > svg { flex: 0 0 auto; color: var(--primary); }
.active-set-listening-label { font-size: 0.875rem; font-weight: 600; }

.active-set-type-instead {
  margin-left: auto;
  min-height: 44px;
  padding: 0 8px;
  color: var(--primary);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.active-set-typed { position: relative; flex: 1; min-width: 0; }

.active-set-typed input {
  min-height: 48px;
  padding: 0 48px 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
}

.active-set-send {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--on-primary);
  background: var(--brand-fill);
  cursor: pointer;
}

/* Footer: two equal columns, no divider. Dashed "+ Set" leads, solid "Finish" trails (iOS exercise card footer). */
.active-exercise-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.active-exercise-actions .button {
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-capsule);
  color: var(--primary);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
}

.active-exercise-actions .active-exercise-add { border: 1px dashed color-mix(in srgb, var(--brand-fill) 50%, transparent); }
.active-exercise-actions .active-exercise-finish { border: 1px solid color-mix(in srgb, var(--brand-fill) 70%, transparent); }

.workout-share-sheet > h2 { margin: 0; }

.share-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: none;
}

.share-hero > div { min-width: 0; }

.share-hero-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--sage);
  background: var(--hero-tile);
}

.share-hero-icon svg { width: 22px; height: 22px; }

.share-panel {
  display: grid;
  gap: 12px;
  box-shadow: none;
}

.share-panel h3,
.share-hero h3,
.share-panel p,
.share-hero p { margin: 0; }

.share-panel p,
.share-hero p { margin-top: 4px; overflow-wrap: anywhere; }

.share-panel > .button,
.share-refresh { min-height: 44px; }

.share-state-note { margin: 0; }

.share-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.0625rem;
  overflow-wrap: anywhere;
}

.share-privacy-note svg { flex: 0 0 auto; margin-top: 1px; }

.friend-profile-scorecard,
.friend-activity-panel {
  display: grid;
  gap: 12px;
}

.friend-profile-scorecard h2 { margin: 0; }

.friend-sharing-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.friend-sharing-strip > span {
  display: grid;
  gap: 2px;
}

.friend-sharing-strip small { color: var(--muted); }

.friend-detail-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inline-status {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.inline-status.success { border-color: color-mix(in srgb, var(--sage) 50%, var(--outline-variant)); }
.inline-status.warning { border-color: color-mix(in srgb, var(--gold) 55%, var(--outline-variant)); }
.inline-status.error {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--outline-variant));
  border-left-width: 4px;
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}
.inline-status span { color: var(--muted); }

.cloud-sync-card { display: grid; gap: 12px; }
.sync-state-dot { width: 16px; height: 16px; border: 3px solid var(--outline-variant); border-radius: 50%; background: var(--surface-2); }
.sync-state-dot.synced { border-color: var(--sage); background: var(--sage); }
.sync-state-dot.pending,
.sync-state-dot.saving,
.sync-state-dot.checking { border-color: var(--sage); background: color-mix(in srgb, var(--sage) 30%, var(--surface)); }
.sync-state-dot.error,
.sync-state-dot.conflict { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 28%, var(--surface)); }

.subpanel {
  padding: 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 46%, transparent);
}

.smart {
  border-color: color-mix(in srgb, var(--sage) 24%, transparent);
}

.smart-effort-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.smart-effort-chips .chip {
  justify-content: center;
  min-height: 44px;
}

.smart-effort-chips .chip.selected {
  color: var(--on-accent);
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  box-shadow: none;
  font-weight: 600;
}

.smart-plan-status {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--sage) 22%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 56%, transparent);
}

.smart-plan-status p { margin: 0; }

.smart-rir-guidance {
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text) !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

.smart-alternatives-button { margin-top: 10px; }

.smart-alternatives-sheet {
  display: grid;
  gap: 10px;
}

.smart-alternatives-sheet > h2,
.smart-alternatives-sheet > p { margin: 0; }

.smart-alternative-list {
  display: grid;
  gap: 8px;
}

.smart-alternative-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 48%, transparent);
}

.smart-alternative-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.smart-alternative-card strong,
.smart-alternative-card small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.smart-alternative-card small { color: var(--muted); }

@media (max-width: 430px) {
  .smart-alternative-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .smart-alternative-card > .button {
    grid-column: 1 / -1;
  }
}

.progress,
.bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.hero-panel .progress { background: var(--hero-track); }
.mission-row .progress { height: 8px; }
.achievement .progress { height: 6px; }

.progress span,
.bar-fill {
  display: block;
  height: 100%;
  background: var(--sage);
}

.percentage-0 { width: 0; }
.percentage-5 { width: 5%; }
.percentage-10 { width: 10%; }
.percentage-15 { width: 15%; }
.percentage-20 { width: 20%; }
.percentage-25 { width: 25%; }
.percentage-30 { width: 30%; }
.percentage-35 { width: 35%; }
.percentage-40 { width: 40%; }
.percentage-45 { width: 45%; }
.percentage-50 { width: 50%; }
.percentage-55 { width: 55%; }
.percentage-60 { width: 60%; }
.percentage-65 { width: 65%; }
.percentage-70 { width: 70%; }
.percentage-75 { width: 75%; }
.percentage-80 { width: 80%; }
.percentage-85 { width: 85%; }
.percentage-90 { width: 90%; }
.percentage-95 { width: 95%; }
.percentage-100 { width: 100%; }

.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.heatmap-caption {
  margin: 8px 0 0;
  font-size: 0.8125rem;
}

.heatmap-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.heatmap-weekdays + .heatmap-grid {
  margin-top: 6px;
}

.heat-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.3;
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  font-weight: 600;
}

.heat-cell.outside {
  background: transparent;
  color: transparent;
}

.heat-cell.is-today {
  outline: 2px solid var(--heat-ring);
  outline-offset: 2px;
}

.heat-cell.heat-0,
.heat-sw.heat-0 { background: var(--heat-0); color: var(--heat-text-0); box-shadow: inset 0 0 0 1px var(--outline-variant); }
.heat-cell.heat-1,
.heat-sw.heat-1 { background: var(--heat-1); color: var(--heat-text-1); }
.heat-cell.heat-2,
.heat-sw.heat-2 { background: var(--heat-2); color: var(--heat-text-2); }
.heat-cell.heat-3,
.heat-sw.heat-3 { background: var(--heat-3); color: var(--heat-text-3); }
.heat-cell.heat-4,
.heat-sw.heat-4 { background: var(--heat-4); color: var(--heat-text-4); }

.legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.75rem;
}

.legend i {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.period-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.period-tabs button {
  min-height: 44px;
  text-align: center;
  border: 1px solid var(--outline-variant);
}

.body-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.body-map-svg-wrap {
  margin: 14px auto 8px;
  max-width: 560px;
}

.body-map-svg {
  display: block;
  width: 100%;
  height: min(58vh, 430px);
}

.body-region {
  stroke: var(--heat-stroke);
  stroke-width: 0.12;
  cursor: pointer;
  transition: stroke-width 160ms ease;
}

.body-region.heat-0 { fill: var(--heat-0); }
.body-region.heat-1 { fill: var(--heat-1); }
.body-region.heat-2 { fill: var(--heat-2); }
.body-region.heat-3 { fill: var(--heat-3); }
.body-region.heat-4 { fill: var(--heat-4); }

.body-region.heat-0.selected { stroke: var(--heat-text-0); stroke-width: 0.34; }

@media (hover: hover) and (pointer: fine) {
  .body-region.heat-0[data-action]:hover { stroke: var(--heat-text-0); stroke-width: 0.34; }
}
.body-region.heat-1.selected { stroke: var(--heat-text-1); stroke-width: 0.34; }

@media (hover: hover) and (pointer: fine) {
  .body-region.heat-1[data-action]:hover { stroke: var(--heat-text-1); stroke-width: 0.34; }
}
.body-region.heat-2.selected { stroke: var(--heat-text-2); stroke-width: 0.34; }

@media (hover: hover) and (pointer: fine) {
  .body-region.heat-2[data-action]:hover { stroke: var(--heat-text-2); stroke-width: 0.34; }
}
.body-region.heat-3.selected { stroke: var(--heat-text-3); stroke-width: 0.34; }

@media (hover: hover) and (pointer: fine) {
  .body-region.heat-3[data-action]:hover { stroke: var(--heat-text-3); stroke-width: 0.34; }
}
.body-region.heat-4.selected { stroke: var(--heat-text-4); stroke-width: 0.34; }

@media (hover: hover) and (pointer: fine) {
  .body-region.heat-4[data-action]:hover { stroke: var(--heat-text-4); stroke-width: 0.34; }
}

.body-labels {
  display: flex;
  justify-content: space-around;
  color: var(--muted);
  font-weight: 720;
  font-size: 0.8125rem;
}

.muscle-map-selector {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 2px 1px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.muscle-map-selector .chip {
  flex: 0 0 auto;
  min-height: 48px;
  display: grid;
  gap: 2px;
  text-align: left;
}

.muscle-map-selector small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.muscle-tile {
  min-height: 64px;
  padding: 9px;
  border: 1px solid rgba(232, 238, 242, 0.1);
  border-radius: var(--radius-sm);
  color: var(--frost);
  background: color-mix(in srgb, var(--sage) calc(var(--i, 0) * 56%), var(--surface-2));
  text-align: left;
  cursor: pointer;
}

.muscle-tile.selected {
  outline: 2px solid var(--sage);
}

.muscle-tile span,
.muscle-tile small {
  display: block;
}

.muscle-tile small {
  margin-top: 5px;
  color: var(--muted);
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(98px, 1fr) 2fr minmax(74px, 0.9fr);
  align-items: center;
  gap: 9px;
  min-height: 30px;
}

.achievements-section {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.achievements-heading { display: grid; gap: 5px; padding: 8px 2px 0; }
.achievements-heading h2,
.achievements-heading p { margin: 0; }
.achievements-heading p { color: var(--muted); line-height: 1.25rem; }
.achievements-eyebrow { color: var(--primary); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1rem; }

.achievements-summary { display: flex; align-items: center; gap: 8px; }
.achievements-summary .pill .small-icon { width: 15px; height: 15px; }
.achievements-summary-caption { color: var(--muted); font-size: 0.75rem; line-height: 1rem; }

.achievement-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 12px;
}

.achievement-tile.rarity-common,
.achievement-sheet.rarity-common { --badge-color: var(--mint); }
.achievement-tile.rarity-uncommon,
.achievement-sheet.rarity-uncommon { --badge-color: var(--primary); }
.achievement-tile.rarity-rare,
.achievement-sheet.rarity-rare { --badge-color: var(--violet); }
.achievement-tile.rarity-epic,
.achievement-sheet.rarity-epic { --badge-color: color-mix(in srgb, var(--violet) 60%, #e11d9a); }
.achievement-tile.rarity-legendary,
.achievement-sheet.rarity-legendary { --badge-color: var(--gold); }

.achievement-tile {
  --badge-color: var(--mint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 108px;
  padding: 10px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.achievement-ring {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 60px;
  height: 60px;
}

.achievement-ring-svg { position: absolute; inset: 0; width: 60px; height: 60px; }
.achievement-ring-track,
.achievement-ring-arc { fill: none; stroke-width: 4; }
.achievement-ring-track { stroke: var(--outline-variant); }
.achievement-ring-arc { stroke: var(--primary); stroke-linecap: round; }
.achievement-tile.unlocked .achievement-ring-arc { stroke: var(--badge-color); }

.achievement-icon { display: grid; place-items: center; color: var(--badge-color); }
.achievement-tile.locked .achievement-icon { color: var(--muted); opacity: 0.4; }
.achievement-icon svg,
.achievement-disc svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.achievement-icon svg { width: 22px; height: 22px; }
.achievement-icon svg.filled-icon,
.achievement-disc svg.filled-icon { fill: currentColor; stroke: none; }

.achievement-lock {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--outline-variant);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface);
}

.achievement-lock svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.achievement-name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.0625rem;
  text-align: center;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.achievement-tile.locked .achievement-name { opacity: 0.55; }

.achievement-sheet { display: grid; gap: 16px; }
.achievement-sheet-hero { display: grid; justify-items: center; gap: 10px; text-align: center; }
.achievement-sheet-hero h2 { margin: 0; }
/* Sheet titles reserve room for the close button on the end side only; this hero reserves it on both sides so the title stays on the disc's axis. */
.modal-panel > .achievement-sheet > .achievement-sheet-hero > h2 { padding-inline: var(--sheet-close-clearance); }

.achievement-disc {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  color: var(--badge-color);
  background: color-mix(in srgb, var(--badge-color) 12%, transparent);
}

.achievement-sheet.locked .achievement-disc {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.achievement-disc svg { width: 38px; height: 38px; }

.achievement-rarity-pill {
  color: var(--badge-color);
  border-color: color-mix(in srgb, var(--badge-color) 22%, transparent);
  background: color-mix(in srgb, var(--badge-color) 12%, transparent);
}

.achievement-sheet-description { margin: 0; color: var(--muted); }
.achievement-sheet-progress { display: grid; gap: 8px; }
.achievement-sheet-progress { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.achievement-sheet-progress .progress { grid-column: 1 / -1; }
.achievement-sheet-progress .achievement-sheet-reward { justify-self: end; text-align: right; }
.achievement-sheet-progress .progress { height: 8px; margin: 0; }
.achievement-sheet.unlocked .achievement-sheet-progress .progress span { background: var(--badge-color); }
.achievement-sheet-count { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

.achievement-sheet-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.achievement-sheet.unlocked .achievement-sheet-status { color: var(--badge-color); }
.achievement-sheet-status .small-icon { width: 16px; height: 16px; }

@media (max-width: 340px) {
  .achievement-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.favorite-toggle.selected { color: var(--primary); }

.favorite-filter svg { flex: 0 0 auto; }
.favorite-filter.selected {
  color: var(--accent-on-tint);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.exercise-row {
  display: grid;
  gap: 10px;
}

.exercise-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel.exercise-row { padding: 10px 12px; }
.exercise-card-head .exercise-card-title { flex: 1 1 auto; }

.exercise-media-thumb.exercise-list-thumb {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 14px;
}

.exercise-list-thumb .exercise-media-play {
  right: 4px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  font-size: 0.6875rem;
}

.exercise-list-thumb .exercise-media-play svg { width: 12px; height: 12px; }
.exercise-list-thumb.empty { font-size: 0.6875rem; }

.exercise-row .exercise-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.375rem;
  overflow-wrap: break-word;
}

.exercise-row-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}

.exercise-row-actions .icon-button { width: 44px; height: 44px; }

.exercise-more-actions .danger { margin-top: 4px; }

.table {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.table-head,
.table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr 104px;
  align-items: center;
  gap: 8px;
}

.table-head {
  color: var(--muted);
  font-weight: 720;
}

.mapping-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.exercise-muscle-map {
  margin: 0;
}

.exercise-muscle-layout {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
}

.exercise-muscle-layout .body-map-svg-wrap {
  margin: 0;
}

.exercise-muscle-layout .body-map-svg {
  max-height: 245px;
}

.empty {
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--outline) 72%, transparent);
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-align: left;
  background: color-mix(in srgb, var(--surface-2) 42%, transparent);
}

.empty-state-panel {
  display: grid;
  align-items: start;
  gap: 8px;
  padding: 20px;
  border-style: dashed;
  background: color-mix(in srgb, var(--surface-highlight) 70%, var(--surface));
}

.empty-state-panel h2,
.empty-state-panel h3,
.empty-state-panel p { margin: 0; }

.empty-state-panel .button {
  width: fit-content;
  margin-top: 4px;
}

.onboarding-tour {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.onboarding-spotlight {
  position: fixed;
  min-width: 1px;
  min-height: 1px;
  border: 2px solid color-mix(in srgb, var(--sage) 82%, white);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 9999px rgba(5, 18, 38, 0.72), 0 0 0 6px color-mix(in srgb, var(--sage) 20%, transparent);
  transition: left 180ms ease, top 180ms ease, width 180ms ease, height 180ms ease;
}

.onboarding-coach {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: auto;
  max-width: 390px;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--sage) 36%, var(--outline-variant));
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-floating);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  pointer-events: auto;
}

.onboarding-coach h2,
.onboarding-coach p { margin: 0; }
.onboarding-coach h2 { font-size: 1.3125rem; line-height: 1.6875rem; }
.onboarding-coach p { color: var(--muted); line-height: 1.3125rem; }

.onboarding-progress,
.onboarding-actions,
.onboarding-actions > div {
  display: flex;
  align-items: center;
}

.onboarding-progress,
.onboarding-actions { justify-content: space-between; gap: 12px; }
.onboarding-progress > span { color: var(--sage); font-size: 0.75rem; font-weight: 750; }
.onboarding-actions {
  position: sticky;
  bottom: -18px;
  z-index: 1;
  margin: 2px -4px -12px;
  padding: 8px 4px 12px;
  background: var(--surface);
}
.onboarding-actions > div { gap: 7px; }
.onboarding-actions .button { min-height: 44px; }
.onboarding-actions .button.onboarding-skip {
  color: var(--text);
  background: var(--surface-3);
  border: 0;
}

@media (min-width: 760px) {
  .onboarding-coach {
    right: auto;
    bottom: auto;
    width: min(390px, calc(100vw - 32px));
  }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: end center;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background: transparent;
  overscroll-behavior: contain;
}

/* Scrim: its opacity follows the drag progress (--sheet-progress is set from JS while dragging). */
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: calc(1 - var(--sheet-progress, 0));
  overscroll-behavior: contain;
  touch-action: none;
}

.modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(88dvh, 820px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 18px calc(28px + env(safe-area-inset-bottom));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface-strong);
  /* Fills the strip an upward rubber-band drag would otherwise open under the sheet (off-screen at rest). */
  box-shadow: 0 24px 0 0 var(--surface-strong);
}

/* Sheet material (DESIGN.md materials.sheet): translucent fill + blur; solid fallbacks follow. */
.modal-panel {
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}

:root[data-theme="dark"] .modal-panel {
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-panel,
  :root[data-theme="dark"] .modal-panel { background: var(--surface-strong); }
}

@media (prefers-reduced-transparency: reduce) {
  .modal-panel,
  :root[data-theme="dark"] .modal-panel {
    background: var(--surface-strong);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* DESIGN: at most two live blur layers. While a sheet is open the sheet and its scrim keep theirs; the top bar and tab bar drop theirs (class set on #app by the sheet engine). */
.sheet-open .topbar,
.sheet-open .bottom-nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.confirm-sheet-body { white-space: pre-line; overflow-wrap: anywhere; }
.confirm-sheet-form { display: grid; gap: 12px; }
.confirm-sheet-fields { margin-block-start: 4px; }
.confirm-sheet-fields input[readonly] { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-overflow: ellipsis; }
.confirm-sheet-fields input[aria-invalid="true"] { border-color: var(--danger); }
.confirm-sheet-error { margin: 0; color: var(--danger); font-size: 0.875rem; overflow-wrap: anywhere; }

/* Grab area: the full-width top strip; the visible 36x5 pill sits 8px from the top. Content still starts 37px down. */
.sheet-handle {
  position: relative;
  height: 37px;
  margin: -18px -18px 0;
  cursor: grab;
  touch-action: none;
}

.sheet-handle::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 24%, transparent);
}

/* Set by the sheet engine: the first heading is part of the grab area; short sheets can be pulled from anywhere by touch. */
.sheet-drag-zone { touch-action: none; cursor: grab; }
.modal-panel.sheet-fits:not(:has(textarea)) { touch-action: none; }

/* A closing sheet is animated from JS on a detached copy that must never take input. */
.sheet-ghost { pointer-events: none; }

/* Enter: slide up (300ms, spring-standard-like curve) with the scrim fading in over 150ms. A re-render mid-enter resumes via --sheet-enter-skip. */
@keyframes sheet-rise {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes sheet-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal.sheet-enter .modal-panel {
  animation: sheet-rise 300ms cubic-bezier(0.2, 0.9, 0.1, 1) var(--sheet-enter-skip, 0ms) backwards;
}

.modal.sheet-enter .sheet-scrim {
  animation: sheet-fade-in 150ms linear var(--sheet-enter-skip, 0ms) backwards;
}

/* Reduced motion: no slide; 150ms cross-fade in (the global reduced-motion rule would otherwise cut it to 0.01ms). */
@media (prefers-reduced-motion: reduce) {
  .modal.sheet-enter .modal-panel {
    animation: sheet-fade-in 150ms linear var(--sheet-enter-skip, 0ms) backwards !important;
  }

  .modal.sheet-enter .sheet-scrim {
    animation: sheet-fade-in 150ms linear var(--sheet-enter-skip, 0ms) backwards !important;
  }
}

/* While dragging, the finger owns the transform and scrim: any still-running enter animation must not fight it (placed after the enter rules on purpose). */
.modal.sheet-dragging .modal-panel {
  animation: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.modal.sheet-dragging .sheet-scrim { animation: none !important; }

.sheet-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
}

/* The close button hangs 10px from the sheet edge; titles wrap before it instead of running under it. */
.modal-panel {
  --sheet-close-clearance: 52px;
}

/* Sheets with their own Done or Cancel have no X, so their titles and trailing Done use the full width. */
.modal-panel.no-sheet-close {
  --sheet-close-clearance: 0px;
}

.modal-panel > h2,
.modal-panel > * > h2,
.modal-panel > * > div:first-child > h2,
.modal-panel > * > .section-title:first-child,
.modal-panel > .exercise-history-heading {
  padding-inline-end: var(--sheet-close-clearance);
}

/* The add-exercise sheet keeps 12px between its field and the primary action. */
.modal-panel > #new-exercise-name + .button { margin-top: 12px; }

/* A sheet heading that sits directly above a field keeps the 16px rhythm instead of touching it. */
.modal-panel > h2 + :is(input, select, textarea, label) { margin-top: 16px; }

/* Persistent toast host (DESIGN.md toasts): one polite live region on <body>, outside #app, above the sheet engine's .modal (z 20) and the tour (z 40).
   Toasts overlap in one grid cell so a replacement cross-fades instead of stacking. */
.toast-region {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(104px + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: end;
  max-width: 560px;
  margin: 0 auto;
  pointer-events: none;
}

.toast {
  grid-area: 1 / 1;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-capsule);
  color: var(--text);
  background: var(--surface-strong);
  font-weight: 500;
  box-shadow: var(--shadow-floating);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  animation: toast-rise 300ms cubic-bezier(0.2, 0.9, 0.1, 1) backwards;
}

.toast-leaving { pointer-events: none; }

.toast-text {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: break-word;
}

.toast-action {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0 -8px 0 0;
  padding: 0 8px;
  background: transparent;
  color: var(--primary);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

/* Chip material (DESIGN.md materials.chip): surface at 0.70 light / 0.66 dark, blur 14, saturate 140, hairline edge; solid fallbacks follow. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .toast {
    background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }

  :root[data-theme="dark"] .toast { background: color-mix(in srgb, var(--surface-strong) 66%, transparent); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .toast,
  :root[data-theme="dark"] .toast { background: var(--surface-strong); }
}

@media (prefers-reduced-transparency: reduce) {
  .toast,
  :root[data-theme="dark"] .toast {
    background: var(--surface-strong);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@keyframes toast-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes toast-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Reduced motion: opacity only, 150ms in (90ms out is set from JS). */
@media (prefers-reduced-motion: reduce) {
  .toast { animation: toast-fade-in 150ms linear backwards !important; }
}

/* A banner that is leaving: an in-flow placeholder whose height collapses from JS while the banner fades out. */
.banner-exit { overflow: hidden; pointer-events: none; }

.hidden { display: none !important; }

.garmin-header .metric-grid,
.garmin-metrics .metric-grid {
  margin-top: 10px;
}

.garmin-metrics small,
.garmin-header small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.garmin-set-intervals {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.garmin-set-intervals .section-title h3,
.garmin-set-card h4 {
  margin: 0;
}

.garmin-workout-timeline {
  display: block;
  width: 100%;
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--surface-2);
}

.garmin-timeline-set {
  fill: var(--outline);
}

.garmin-timeline-set.confidence-high { fill: var(--sage); }
.garmin-timeline-set.confidence-medium { fill: var(--gold); }
.garmin-timeline-set.confidence-low { fill: var(--clay); }

.garmin-set-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-highlight);
}

.garmin-set-card > .row-head {
  align-items: flex-start;
}

.garmin-set-card > .row-head > strong {
  color: var(--muted);
  font-size: 0.82rem;
}

.garmin-hr-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.garmin-hr-strip > div {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-strong);
  text-align: center;
}

.garmin-hr-strip span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.garmin-hr-strip strong {
  font-size: 1.18rem;
  line-height: 1.25;
}

.garmin-zone-stack {
  display: block;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.garmin-zone-stack .zone-0 { fill: #8fa1b8; }
.garmin-zone-stack .zone-1 { fill: #4da3ff; }
.garmin-zone-stack .zone-2 { fill: #35b979; }
.garmin-zone-stack .zone-3 { fill: #e5b23c; }
.garmin-zone-stack .zone-4 { fill: #f07b46; }
.garmin-zone-stack .zone-5 { fill: #e14f6c; }

.garmin-zone-legend .zone-0 { background: #8fa1b8; }
.garmin-zone-legend .zone-1 { background: #4da3ff; }
.garmin-zone-legend .zone-2 { background: #35b979; }
.garmin-zone-legend .zone-3 { background: #e5b23c; }
.garmin-zone-legend .zone-4 { background: #f07b46; }
.garmin-zone-legend .zone-5 { background: #e14f6c; }

.garmin-zone-legend,
.garmin-set-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.garmin-zone-legend span,
.garmin-set-facts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.garmin-zone-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.garmin-no-zone { margin: 0; }

.workout-exercise-card details {
  display: grid;
  gap: 12px;
}

.saved-workout-exercise-list {
  display: grid;
  gap: 10px;
}

.saved-workout-exercise-card { padding: 13px 14px; }
.saved-workout-exercise-copy p { overflow: hidden; text-overflow: ellipsis; }

.progress-history-table .table-row {
  grid-template-columns: minmax(54px, 1fr) minmax(72px, 1fr) minmax(48px, 0.8fr);
}

/* Saved workout: the live screen's card, set rows and dashed add buttons; only the pieces below are new. */
.saved-exercise-actions { grid-template-columns: minmax(0, 1fr); }

.saved-workout-add-exercise {
  min-height: 48px;
  border: 1px dashed color-mix(in srgb, var(--brand-fill) 50%, transparent);
  border-radius: var(--radius-capsule);
  color: var(--primary);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Active and saved screens share one footer/add-exercise rhythm: 48px targets, capsule radius, 12px above the footer. */
.active-exercise-actions,
.saved-exercise-actions { margin-top: 12px; }
.active-exercise-actions .button,
.saved-workout-add-exercise,
.active-workout-add-exercise {
  min-height: 48px;
  border-radius: var(--radius-capsule);
}
.active-workout-add-exercise { margin: 0 0 12px; }
.active-set-row.completed { min-height: 44px; }

.saved-set-editor { display: grid; gap: 10px; padding: 4px 0 8px 0; align-items: stretch; }
.saved-set-save { min-height: 44px; }

[data-saved-set-deletable] .active-set-details > summary {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.saved-workout-details { display: grid; gap: 12px; }
.saved-workout-details label { display: grid; gap: 6px; }
.saved-workout-details textarea { min-height: 88px; resize: vertical; }

.hero-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hero-actions .icon-button { width: 44px; height: 44px; }

.hero-text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  color: var(--hero-action-label);
  background: var(--hero-tile);
  font-size: 0.875rem;
  font-weight: 600;
  /* Wraps at large text instead of running past the hero's edge. */
  white-space: normal;
  text-align: left;
  padding-block: 8px;
}

.garmin-metrics-disclosure { padding: 0; }

.garmin-metrics-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 14px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.garmin-metrics-summary::-webkit-details-marker { display: none; }

.garmin-metrics-summary::after {
  content: "v";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-strong);
  font-weight: 900;
}

.garmin-metrics-disclosure[open] .garmin-metrics-summary::after { content: "^"; }
.garmin-metrics-summary h2,
.garmin-metrics-summary p { margin: 0; }

.garmin-metrics-peek {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.garmin-metrics-peek span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.garmin-metrics-content {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

.garmin-metrics-content > h3 { margin: 0; }

.draft-exercise-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.draft-exercise-head h2,
.draft-exercise-head p { margin: 0; }

.detail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.detail-summary::-webkit-details-marker {
  display: none;
}

.detail-summary::after {
  content: "v";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text);
  font-weight: 900;
}

.workout-exercise-card details[open] .detail-summary::after {
  content: "^";
}

.workout-exercise-card details[open] .detail-summary p { display: none; }

.detail-muscle-map .body-map-svg-wrap { margin: 0 auto; }
.detail-muscle-map .body-region { cursor: default; }

.detail-collapsed-map {
  flex: 0 0 96px;
  width: 96px;
  height: 72px;
  margin: 0;
  overflow: hidden;
}

.detail-collapsed-map .body-map-svg { height: 72px; }
.workout-exercise-card details[open] .detail-summary .detail-collapsed-map {
  display: none;
}

.detail-expanded-map {
  display: none;
  gap: 4px;
  margin-top: 12px;
}

.detail-expanded-map .body-map-svg { height: 132px; }
.workout-exercise-card details[open] > .detail-expanded-map { display: grid; }

.detail-summary h2,
.detail-summary p {
  margin: 0;
}

.workout-exercise-card details > .table,
.workout-exercise-card details > .empty,
.workout-exercise-card details > .button {
  margin-top: 12px;
}

.workout-detail-hero,
.garmin-header,
.workout-comparison-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* Tiles drop to one column as soon as two would not fit (large text), and never push the card wider. */
.workout-comparison-card .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}

.workout-comparison-card .metric-grid > div {
  min-width: 0;
}

.workout-detail-hero {
  gap: 8px;
  padding: 16px;
}

.workout-detail-hero .row-head h2 {
  font-size: 1.25rem;
  line-height: 1.625rem;
}

.workout-detail-hero p {
  margin: 0;
}

.workout-detail-hero .hero-summary-line,
.workout-detail-hero .hero-note {
  font-size: 0.875rem;
  line-height: 1.25rem;
  opacity: 0.88;
}

.workout-detail-hero .hero-text-button,
.garmin-header .hero-text-button {
  justify-self: start;
  min-height: 44px;
}

.garmin-header { gap: 8px; padding: 16px; }

.workout-detail-hero .metric-grid,
.garmin-header .metric-grid,
.workout-comparison-card .metric-grid {
  margin-top: 0;
}

.workout-detail-hero .metric-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workout-comparison-card small .nowrap { white-space: nowrap; }

/* Like the iPhone card: the delta is semibold, and only an increase takes the Recovery Mint tint
   (--mint: #23815E light, #77DDB7 dark). A decrease keeps the muted colour; the +/− sign and the
   "no change" text carry the meaning, so colour is never the only cue. */
.workout-comparison-card small .comparison-delta { font-weight: 600; }
.workout-comparison-card small .comparison-delta.up { color: var(--mint); }

.workout-comparison-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.0625rem;
}

@media (max-width: 760px) {
  .garmin-metrics-summary { grid-template-columns: minmax(0, 1fr) 30px; }
  .garmin-metrics-peek { grid-column: 1 / -1; justify-content: flex-start; }

  .exercise-muscle-layout {
    grid-template-columns: 1fr;
  }



  .bar-row {
    grid-template-columns: 92px 1fr;
  }

  .bar-row .muted {
    grid-column: 2;
  }
}

@media (max-width: 460px) {
  .topbar {
    padding-left: 8px;
    padding-right: 8px;
  }

  .segmented,
  .metric-grid,
  .body-map,
  .mapping-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mission-period-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .set-row {
    gap: 6px;
  }

  .table-head,
  .table-row {
    grid-template-columns: minmax(44px, 0.8fr) minmax(58px, 1fr) minmax(38px, 0.65fr) 96px;
    gap: 4px;
  }

  .button {
    padding: 0 11px;
  }

  .auth-actions,
  .store-download-actions {
    grid-template-columns: 1fr;
  }

  .auth-actions > :last-child:nth-child(odd),
  .store-download-actions > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .workout-exercise-picker-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .workout-exercise-picker-row > .button { grid-column: 1 / -1; }

  .focus-lens {
    min-height: 0;
    padding: 20px;
    border-radius: 24px;
  }

  .focus-lens-copy h2 {
    max-width: 18ch;
    font-size: 1.875rem;
  }

  .focus-lens-metrics { gap: 10px; }
  .focus-lens-metrics.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .focus-lens-metrics strong { font-size: 1.375rem; }
  .focus-lens-plan-metrics { gap: 6px; }
  .focus-lens-plan-metrics > div { padding: 7px 8px; }
  .focus-lens-plan-metrics strong { font-size: 1.0625rem; line-height: 1.3125rem; }
  .focus-lens-action { width: 100%; }
  .focus-lens-actions { grid-template-columns: 1fr; }
  .focus-lens-discard,
  .focus-lens-edit { width: 100%; }
  .activation-actions { grid-template-columns: 1fr; }

  .login-actions,
  .login-row {
    grid-template-columns: 1fr;
  }

  .login-actions .button,
  .login-row .button {
    width: 100%;
  }

  .profile-hub-passport {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px;
  }

  .profile-hub-avatar { width: 42px; height: 42px; border-radius: 15px; }
  .segmented.profile-hub-switch button { padding: 7px 4px; }
  .profile-hub-switch button strong { font-size: 0.8125rem; }
  .progress-hub-switch button {
    min-height: 50px;
    flex-direction: column;
    gap: 3px;
    font-size: 0.6875rem;
    line-height: 0.875rem;
  }
  .progress-hub-switch button span { width: 100%; overflow-wrap: normal; white-space: nowrap; }
  .progress-hub-switch button { padding-inline: 2px; }
  .solo-progress-hero .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .friend-training-actions { grid-template-columns: 1fr; }
  .friend-workout-choice { grid-template-columns: minmax(0, 1fr); }
  .friend-workout-choice b { justify-self: start; }

}

@media (max-width: 460px) and (max-height: 640px) {
  .workouts-screen-copy { margin-block: 4px 8px; }
  .focus-lens {
    gap: 8px;
    padding: 14px;
  }
  .focus-lens-copy h2 {
    margin-block: 4px;
    font-size: 1.5625rem;
    line-height: 1.05;
  }
  .focus-lens-metrics strong { font-size: 1.1875rem; line-height: 1.4375rem; }
  .focus-lens-details > summary { min-height: 44px; padding-block: 7px; }
  .focus-lens-action { min-height: 50px; }
}

@media (max-width: 560px) {
  .social-request-card,
  .social-invite-card {
    align-items: stretch;
    flex-direction: column;
  }

  .social-request-card .actions,
  .social-invite-card .actions {
    width: 100%;
  }

  .social-request-card .actions .button,
  .social-invite-card .actions .button {
    flex: 1;
  }

  .social-code-card .field-row {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (min-width: 900px) {
  /* Profile rows read as one column, like the settings sheets. */
  .screen-leaderboard > * {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }

  .app-shell:not(.root-route-shell) .screen {
    width: min(calc(100% - 48px), 960px);
    margin-inline: auto;
  }

  .root-route-shell .topbar {
    width: calc(100% - 112px);
    margin-left: 112px;
  }

  .root-route-shell .screen {
    width: min(calc(100% - 144px), 1180px);
    margin-inline: auto;
    padding-bottom: 28px;
    transform: translateX(48px);
  }

  .root-route-shell .screen-workouts { padding: 0; }
  .root-route-shell .workouts-scroll { padding-bottom: 28px; }

  .root-route-shell .bottom-nav {
    left: 16px;
    right: auto;
    top: 50%;
    bottom: auto;
    width: 88px;
    height: auto;
    min-height: 320px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(68px, 1fr));
    padding: 8px 6px;
    transform: translateY(-50%);
  }

  .root-route-shell .tab-button { min-height: 68px; }

  html[lang="ru"] .root-route-shell .tab-button > span:last-child {
    width: 100%;
    max-width: none;
    padding-inline: 0;
    font-size: 0.6875rem;
    letter-spacing: -0.0073em;
    overflow: visible;
    text-overflow: clip;
  }

  .root-route-shell .screen-exercises .exercise-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .screen-workouts .workouts-scroll,
  .screen-workouts .workouts-controls,
  .screen-workouts .workouts-screen-copy {
    width: min(100%, 1040px);
    margin-left: auto;
    margin-right: auto;
  }

  /* The title sits on the same 16px inset as the panels below it. */
  .screen-workouts .workouts-screen-copy { padding-inline: 16px; }

  .focus-lens {
    min-height: 0;
    padding: 28px;
  }

  .focus-lens-copy h2 { font-size: 2.375rem; }
}

/* Bar material (DESIGN.md materials.bar): solid fallbacks keep the 1px hairline edges (.topbar border-bottom, .bottom-nav border). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--background); }
  .bottom-nav { background: var(--surface); }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .bottom-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .topbar { background: var(--background); }
  .bottom-nav { background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .focus-lens-action { transition: none; }
  .focus-lens-action:active { transform: none; }
  .button:not(:disabled):active,
  .buttonlike:active,
  .icon-button:active,
  .active-set-step:not(:disabled):active,
  .set-editor-step:not(:disabled):active,
  .active-set-rest-pill:not(:disabled):active,
  .active-set-confirmation-undo:active,
  .active-set-log-compact:not(:disabled):active,
  .tab-button:active .tab-icon {
    transform: none;
    opacity: 0.7;
  }
  .onboarding-spotlight { transition: none; }
  .social-push-target { animation: none; }
  /* Opacity-only entries; the highlight stays but does not move; the ring jumps. */
  .active-live-participant-panel[data-enter]:not([hidden]),
  .active-set-row.current[data-enter] { animation: active-enter-fade 150ms linear !important; }
  .active-set-confirmation[data-enter],
  .active-set-check[data-enter] { animation: active-enter-fade 150ms linear !important; }
  .active-set-rest.rest-ended .active-set-rest-time { animation: none; }
  .active-set-rest-pill { transition: opacity 150ms linear !important; }
  .active-hero-ring-arc { transition: none !important; }
}

.training-week-review { display: grid; gap: 12px; }
.training-week-navigation { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px; }
.training-week-navigation p { margin: 0; text-align: center; }
.training-week-navigation .icon-button { width: 48px; height: 48px; }
/* The weekly workouts toggle is a full-width 44px row with a trailing chevron that turns down when open, like iPhone. */
.training-week-sessions > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.training-week-sessions > summary::-webkit-details-marker { display: none; }
.training-week-sessions > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sage) 72%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}
.training-week-sessions-chevron {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.training-week-sessions[open] > summary .training-week-sessions-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .training-week-sessions-chevron { transition: none; } }
/* The status caption is muted regular caption text sitting 4px above the count (12px grid gap minus 8px). */
.training-week-review > h3 { margin: 0; }
.training-week-status {
  margin: 0 0 -8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem;
}
.training-week-insight summary { min-height: 48px; padding: 8px 0; cursor: pointer; }
.training-adapt-row { padding: 12px 0; border-bottom: 1px solid var(--outline-variant); }
.training-program details > p { margin: 8px 0; }

.training-program { display: grid; gap: 12px; }
.training-program > p, .training-program > h2 { margin: 0; }
.training-program-week summary, .training-program-options summary { min-height: 48px; padding: 12px 0; cursor: pointer; font-weight: 600; }
.training-program-week ol { list-style: none; padding: 0; margin: 8px 0 0; }
.training-program-week li { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--outline-variant); }
.training-program .button { white-space: normal; overflow-wrap: anywhere; }
.training-adapt-row p { margin: 8px 0 0; font-variant-numeric: tabular-nums; }

/* Live personal records, plate math and friends' results in the active workout. */
.active-set-row .personal-record-badge {
  justify-self: start;
  min-height: 24px;
  padding: 0 8px;
  border-color: transparent;
  color: var(--on-accent);
  background: var(--brand-fill);
  font-size: 0.6875rem;
  font-weight: 700;
}

.active-set-row .personal-record-badge svg { width: 14px; height: 14px; }

.plate-calculator { position: relative; justify-self: start; }

.plate-calculator-toggle {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  /* 44px hit area; the visible 28px pill is drawn by ::before and the negative margin keeps the row height. */
  min-height: 44px;
  margin: -8px 0;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--accent-on-tint);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.plate-calculator-toggle::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  z-index: -1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.plate-calculator-toggle::-webkit-details-marker { display: none; }

.plate-calculator-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 6;
  min-width: 200px;
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-floating);
  font-variant-numeric: tabular-nums;
}

.active-set-row .plate-calculator-panel span { color: var(--text); font-size: 0.8125rem; line-height: 1.125rem; }

.friend-ghost {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.friend-ghost[hidden] { display: none; }

.friend-ghost svg { width: 14px; height: 14px; flex: none; }

.today-friend-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  color: var(--hero-action-label);
  border: 1px solid var(--hero-outline);
  border-radius: 999px;
  background: var(--hero-tile);
  font-weight: 700;
  cursor: pointer;
}

/* Invite state is the louder pill: tonal fill, Active Current label and a solid count badge. */
.today-friend-pill.invite {
  border-color: var(--hero-action);
  background: color-mix(in srgb, var(--hero-action) 12%, var(--hero-tile));
}

.today-friend-pill:focus-visible { background: color-mix(in srgb, var(--hero-action) 10%, var(--hero-tile)); }

@media (hover: hover) and (pointer: fine) {
  .today-friend-pill:hover { background: color-mix(in srgb, var(--hero-action) 10%, var(--hero-tile)); }
}
.today-friend-pill.invite:focus-visible { background: color-mix(in srgb, var(--hero-action) 18%, var(--hero-tile)); }

@media (hover: hover) and (pointer: fine) {
  .today-friend-pill.invite:hover { background: color-mix(in srgb, var(--hero-action) 18%, var(--hero-tile)); }
}

.today-friend-badge {
  min-width: 22px;
  padding: 2px 6px;
  color: var(--hero-on-action);
  border-radius: 999px;
  background: var(--hero-action);
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: center;
}

.today-friend-picker { display: grid; gap: 12px; }
.today-friend-picker h2 { margin: 0; }

.training-settings-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 4px 0;
  color: var(--muted);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.training-settings-summary span {
  flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.25rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.training-settings-summary strong { flex: none; color: var(--primary); font-weight: 600; }
.training-settings-summary.on-hero { color: var(--hero-muted); }
.training-settings-summary.on-hero strong { color: var(--hero-action-label); }
/* Link-style text on the tonal hero surface uses the hero tokens so it stays above 4.5:1 in both themes. */
.hero-panel .training-settings-summary,
.focus-lens .training-settings-summary { color: var(--hero-muted); }
.hero-panel .training-settings-summary strong,
.focus-lens .training-settings-summary strong { color: var(--hero-action-label); }

.training-settings-sheet { display: grid; gap: 16px; }
.training-settings-sheet .section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.training-settings-sheet h2 { margin: 0; }
/* The title and Done stay pinned while the sheet body scrolls; the solid panel colour hides what passes beneath. */
.training-settings-sheet { --training-settings-header-height: 64px; }
.training-settings-sheet > .section-title:first-child {
  position: sticky;
  top: -18px; /* the panel's top padding; keeps content from showing above the pinned header */
  z-index: 2;
  box-sizing: border-box;
  min-height: var(--training-settings-header-height);
  margin-top: -16px;
  padding-block: 16px 8px;
  background: var(--surface-strong);
}
.training-settings-sheet > .training-settings-group { scroll-margin-top: var(--training-settings-header-height); }
.training-settings-group { display: grid; gap: 6px; }
.training-settings-group .field-caption { color: var(--muted); font-weight: 600; }

.training-settings-options {
  display: grid;
  padding: 2px 16px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.training-settings-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0;
  color: var(--text);
  border: 0;
  border-top: 1px solid var(--outline-variant);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.training-settings-option:first-child { border-top: 0; }
.training-settings-option svg { color: var(--primary); }

.training-settings-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }

.training-settings-days button {
  min-height: 48px;
  color: var(--text);
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.training-settings-days button.selected { color: var(--on-primary); background: var(--primary); }

/* Account sheet and shared settings rows */
.settings-panel {
  display: grid;
  padding: 0 16px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  color: var(--text);
  border: 0;
  border-top: 1px solid var(--outline-variant);
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.settings-row:first-child { border-top: 0; }
.settings-row.has-subtitle { min-height: 56px; }
.settings-row + .settings-row { position: relative; border-top: 0; }
.settings-row + .settings-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 40px;
  height: 1px;
  background: var(--outline-variant);
}

.settings-row-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  color: var(--primary);
}

.settings-row-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-row-icon svg.filled-icon,
.account-identity-icon svg.filled-icon { fill: currentColor; stroke: none; }

.settings-row-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
/* Row titles and subtitles wrap at spaces instead of truncating, so large text sizes keep the whole label. */
.settings-row-text strong { color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.375rem; overflow-wrap: break-word; }
.settings-row-text small { color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; overflow-wrap: break-word; }
/* External link rows (legal, support, store) wrap instead of truncating; the arrow keeps its own width. */
a.settings-row .settings-row-text strong { white-space: normal; overflow-wrap: break-word; }

.settings-row-trailing { flex: none; display: inline-flex; color: var(--muted); }
.settings-row-trailing svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-row.danger .settings-row-icon,
.settings-row.danger .settings-row-text strong { color: var(--danger); }

/* Rows wrapped for a menu or disclosure still share the inset hairline divider. */
.settings-panel > * + * { position: relative; }
.settings-panel > * + *::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 40px;
  height: 1px;
  background: var(--outline-variant);
}
.settings-panel > * + .settings-row { border-top: 0; }

.settings-row-trailing { align-items: center; gap: 6px; }
.missions-rank-panel .settings-row { min-height: 48px; padding-block: 10px; }
.missions-rank-panel .settings-row-text strong { font-size: 0.9375rem; line-height: 1.25rem; white-space: normal; }
.settings-row-value { color: var(--muted); font-size: 1rem; line-height: 1.375rem; }

/* In-app switch row (Haptics): the row is a role="switch" button; the track is decorative. */
.settings-switch {
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: var(--outline-variant);
  transition: background-color var(--motion-fade-in) var(--ease-standard);
}
.settings-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transition: transform var(--motion-fade-in) var(--ease-standard);
}
.settings-switch.on { background: var(--brand-fill); }
.settings-switch.on i { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) {
  .settings-switch, .settings-switch i { transition: none; }
}
@media (forced-colors: active) {
  .settings-switch { border: 2px solid ButtonText; }
  .settings-switch.on { background: Highlight; }
}


.settings-language { position: relative; }
.settings-language .language-menu { top: calc(100% - 6px); }

.settings-disclosure > summary { list-style: none; }
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.settings-disclosure > summary .settings-row-trailing svg { transition: transform 160ms ease; }
.settings-disclosure[open] > summary .settings-row-trailing svg { transform: rotate(90deg); }
.settings-disclosure-body { display: grid; gap: 10px; padding: 0 0 14px 40px; }
.settings-disclosure-body p { margin: 0; }
.profile-settings-list { margin: 0; }

.account-settings-sheet { display: grid; gap: 16px; }
.account-settings-sheet .section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-settings-sheet h2 { margin: 0; }

.account-identity {
  display: grid;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--hero-outline);
  border-radius: var(--radius-panel);
  background: var(--surface-highlight);
}

.account-identity-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-identity-icon { flex: none; display: grid; place-items: center; width: 28px; color: var(--primary); }
.account-identity-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.account-identity-text { display: grid; gap: 2px; min-width: 0; }
.account-identity-text strong { color: var(--text); font-size: 1.125rem; font-weight: 700; line-height: 1.5rem; overflow-wrap: anywhere; }
.account-identity-text span { color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }

.account-id-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 0 40px; }
.account-id-text { display: grid; gap: 2px; min-width: 0; }
.account-id-label { color: var(--muted); font-size: 0.75rem; font-weight: 600; line-height: 1rem; }
.account-id-value { overflow: hidden; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; line-height: 1rem; text-overflow: ellipsis; white-space: nowrap; }

.account-id-copy {
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  color: var(--accent-on-tint);
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.account-links-group { display: grid; gap: 10px; }
.account-privacy-caption { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font-size: 0.75rem; line-height: 1rem; }
.account-privacy-caption svg { flex: none; width: 16px; height: 16px; }
.account-danger-zone .settings-row { justify-content: center; border-top: 0; }
.account-danger-zone .settings-row .settings-row-text { flex: 0 1 auto; }
.garmin-profile-card .garmin-unpair { margin-top: 12px; }

.rank-hero { display: grid; gap: 12px; }

.rank-hero-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.75rem;
  line-height: 2.125rem;
}

.rank-hero-title svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rank-hero-subtitle,
.rank-hero-caption { margin: 0; }

.rank-hero .rank-hero-track {
  height: 6px;
  margin: 0;
  background: var(--hero-track);
}

.rank-hero .rank-hero-track > span { background: var(--hero-accent); }

.rank-ladder-panel { padding: 8px 16px; }

.rank-ladder {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rank-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 56px;
  padding: 10px 0;
  border-radius: 12px;
}

.rank-row + .rank-row { position: relative; }

.rank-row + .rank-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 50px;
  height: 1px;
  background: var(--outline-variant);
}

.rank-row.current { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.rank-row.current::before,
.rank-row.current + .rank-row::before { display: none; }

.rank-icon {
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-2);
}

.rank-row.unlocked .rank-icon {
  color: var(--accent-on-tint);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.rank-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rank-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 6px;
}

.rank-name { font-size: 1.0625rem; line-height: 1.375rem; }
.rank-detail { color: var(--muted); font-size: 0.75rem; }
.rank-row .rank-row-track { height: 6px; margin: 0; }
.rank-remaining { color: var(--primary); font-size: 0.6875rem; font-weight: 600; }

/* Active workout frame: text Minimize action, brand hero, thumbnail-first exercise header. */
/* The outer columns keep the full "Свернуть" label and the menu button; the title takes what is left and ellipsizes first at large text. */
.topbar:has(.topbar-text-action) {
  grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr);
}
.topbar:has(.topbar-text-action) > .topbar-action { justify-self: end; }
.topbar-leading { justify-self: start; min-width: 0; }
.topbar-text-action {
  min-height: 44px;
  padding: 0 10px;
  white-space: nowrap;
  border: 0;
  border-radius: var(--radius-capsule);
  background: transparent;
  color: color-mix(in srgb, var(--brand-fill) 72%, var(--text));
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.topbar-text-action:active { background: color-mix(in srgb, var(--brand-fill) 10%, transparent); }

@media (hover: hover) and (pointer: fine) {
  .topbar-text-action:hover { background: color-mix(in srgb, var(--brand-fill) 10%, transparent); }
}

.active-workout-hero {
  gap: 10px;
  padding: 18px;
  border-color: var(--hero-outline);
  background: var(--hero-surface);
}
.active-hero-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.active-hero-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.active-hero-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--hero-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
}
.active-hero-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
}
.active-hero-elapsed {
  color: var(--hero-text);
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-variant-numeric: tabular-nums;
}
.active-hero-now {
  overflow: hidden;
  color: var(--hero-muted);
  font-size: 0.75rem;
  line-height: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-hero-ring {
  position: relative;
  flex: none;
  /* 68px at the default text size; grows with it so the count stays inside the ring. */
  width: max(68px, 4.25rem);
  height: max(68px, 4.25rem);
}
.active-hero-ring svg { display: block; width: 100%; height: 100%; }
.active-hero-ring-track { stroke: var(--hero-track); }
.active-hero-ring-arc { stroke: var(--hero-accent); transition: stroke-dasharray 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.active-hero-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--hero-text);
}
.active-hero-ring-text strong {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.active-hero-ring-text span {
  color: var(--hero-muted);
  font-size: 0.6875rem;
  line-height: 0.75rem;
}
.active-workout-hero .active-workout-note {
  color: var(--hero-text);
  background: var(--hero-tile);
}

.active-workout-exercise-summary { gap: 12px; justify-content: flex-start; }
.active-workout-exercise-summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 8px 0 auto;
  border: 0 solid var(--muted);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: transparent;
  transform: translateY(-2px) rotate(45deg);
}
.active-workout-exercise details[open] > .active-workout-exercise-summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.active-workout-exercise-copy { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.active-workout-exercise-copy h2 { overflow-wrap: break-word; }
.active-workout-exercise-copy p { color: var(--muted); font-size: 0.75rem; line-height: 1rem; }
.active-exercise-collapsed-line { display: grid; gap: 2px; }
.active-workout-exercise details[open] .active-exercise-collapsed-line,
.active-workout-exercise details:not([open]) .active-exercise-open-line,
.active-workout-exercise details:not([open]) .friend-ghost { display: none; }
.active-exercise-progress {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.active-exercise-progress.done { color: var(--sage); }
.active-exercise-dotted {
  width: 14px;
  height: 14px;
  border: 2px dotted currentColor;
  border-radius: 50%;
}
.active-exercise-status { font-size: 0.75rem; font-weight: 600; }

/* Launch splash: one continuous frame with the system launch screen (same mark, size, centre, canvas colour). */
.boot-splash {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--background);
  color: var(--text);
  /* Safety net: if the app script never dismisses the splash, it clears itself instead of covering the app. */
  animation: boot-splash-failsafe 1ms linear 8s forwards;
}
.boot-splash-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border-radius: 22%;
  transform: translate(-50%, -50%);
}
.boot-splash-stack {
  position: absolute;
  top: calc(50% + 60px + 24px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(440px, 100%);
  padding: 0 32px;
  text-align: center;
  transform: translateX(-50%);
}
.boot-splash-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: boot-splash-fade-in 250ms ease-out both;
}
.boot-splash-title {
  margin: 0;
  color: var(--text);
  font-size: 2.125rem;
  line-height: 2.5625rem;
  font-weight: 700;
}
.boot-splash-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.375rem;
  font-weight: 600;
}
.boot-splash-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  animation: boot-splash-fade-in 250ms ease-out both;
}
.boot-splash-spinner-ring {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--outline-variant);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: boot-splash-spin 0.9s linear infinite;
}
.boot-splash.leaving {
  opacity: 0;
  transform: scale(1.015);
  pointer-events: none;
  transition: opacity 280ms ease-out, transform 280ms ease-out;
}
@keyframes boot-splash-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-splash-spin { to { transform: rotate(360deg); } }
@keyframes boot-splash-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .boot-splash-copy,
  .boot-splash-spinner { animation: none; }
  .boot-splash.leaving { transform: none; transition: none; }
}

/* Smart Coach card: collapsed single row with an expand chevron. */
.smart-coach-header { display: flex; align-items: center; gap: 8px; min-width: 0; }
.smart-coach-toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  color: var(--text);
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.smart-coach-toggle-text { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.smart-coach-toggle-text strong { font-size: 1rem; line-height: 1.375rem; }
.smart-coach-toggle-text small {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}
.smart-coach-chevron { display: grid; place-items: center; flex: none; min-width: 44px; margin-inline: -8px; min-height: 44px; color: var(--muted); cursor: pointer; transition: transform 160ms ease; }
.smart-coach-chevron.expanded { transform: rotate(180deg); }
.smart-coach-edit {
  flex: none;
  min-height: 44px;
  padding: 0 4px;
  color: var(--primary);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.smart-coach-body { display: grid; gap: 12px; min-width: 0; }
.smart-coach-panel.collapsed { gap: 6px; padding-block: 6px; }
@media (prefers-reduced-motion: reduce) { .smart-coach-chevron { transition: none; } }

.summary-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}
/* Three tiles per row while each can be 4.5rem wide, otherwise one per row (never two plus one). */
@container (max-width: 14.5rem) {
  .summary-hero-stats { grid-template-columns: 1fr; }
}
.summary-hero-stats > div {
  min-width: 0;
  padding: 10px 8px 10px 10px;
  border: 1px solid var(--hero-outline);
  border-radius: var(--radius-lg);
  background: var(--hero-tile);
  color: var(--hero-text);
}
.summary-hero-stats span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--hero-muted);
  font-size: 0.75rem;
  line-height: 1rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.summary-hero-stats strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5rem;
  text-overflow: clip;
  white-space: nowrap;
}

.continue-workout-bar {
  position: sticky;
  top: 6px;
  z-index: 5;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 58px;
  margin: 6px 4px 0;
  border: 1px solid var(--hero-outline);
  border-radius: 20px;
  background: var(--hero-surface);
  box-shadow: none;
}

.continue-workout-bar-main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
  padding: 6px 4px 6px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.continue-workout-bar-play {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  fill: var(--hero-action);
}

.continue-workout-bar-play path { fill: var(--hero-on-action); }

.continue-workout-bar-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.continue-workout-bar-copy strong {
  overflow: hidden;
  color: var(--hero-action);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.continue-workout-bar-copy span {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.continue-workout-bar-discard {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-inline-end: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
}

.continue-workout-bar-discard svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.continue-workout-bar-main:focus-visible,
.continue-workout-bar-discard:focus-visible {
  outline: 2px solid var(--hero-action);
  outline-offset: -2px;
}

.workout-template-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

button.workout-template-row {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.workout-template-row h3,
button.workout-template-row p {
  margin: 0;
}

button.workout-template-row .workout-template-names {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

button.workout-template-row small {
  font-size: 0.75rem;
}

button.workout-template-row:focus-visible {
  border-color: color-mix(in srgb, var(--sage) 60%, var(--outline-variant));
}

@media (hover: hover) and (pointer: fine) {
  button.workout-template-row:hover {
    border-color: color-mix(in srgb, var(--sage) 60%, var(--outline-variant));
  }
}

/* Muscle map tiles and period chips stay whole at 390px: one-line chips, labels that fit without clipping. */
.muscle-map-card .period-tabs button {
  padding-inline: 6px;
  white-space: nowrap;
}

.muscle-map-card .metric-grid.tile-emphasized > div {
  padding-inline: 10px;
}

.muscle-map-card .metric-grid.tile-emphasized span {
  font-size: 0.75rem;
  display: block;
  white-space: nowrap;
  overflow: visible;
}

.muscle-map-card .metric-grid.tile-emphasized strong {
  font-size: 1.0625rem;
  line-height: 1.5rem;
}

/* Exercise history: values stay on one line; labels may wrap to two lines so the longer Russian and Ukrainian labels never clip at 390px; the muscle map header never splits its button label. */
.metric-grid.three.exercise-history-metrics {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
}

.exercise-history-metrics > div {
  padding-inline: 10px;
}

.exercise-history-metrics span {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: normal;
  overflow-wrap: normal;
  overflow: visible;
}

.exercise-history-metrics > div { min-width: 0; }

.exercise-history-metrics strong {
  font-size: 1.0625rem;
  line-height: 1.5rem;
  white-space: nowrap;
}

.exercise-history-metrics strong.long-value {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.button.mini {
  flex: 0 0 auto;
  white-space: nowrap;
}

.exercise-muscle-map > .row-head {
  flex-wrap: wrap;
  align-items: flex-start;
}

.exercise-muscle-map > .row-head > div {
  flex: 1 1 160px;
  min-width: 0;
}

/* Muscle group mapping: the shared selected chip (accent fill, on-accent text) plus a check so selection is not colour only. */
.mapping-grid .mapping-chip {
  justify-content: center;
}

.mapping-grid .mapping-chip .mapping-chip-check {
  display: none;
  flex: 0 0 auto;
}

.mapping-grid .mapping-chip.selected {
  color: var(--on-accent);
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  box-shadow: none;
  font-weight: 600;
}

.mapping-grid .mapping-chip.selected .mapping-chip-check {
  display: block;
}

.mapping-overview { padding: 0; }
.mapping-overview-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.mapping-overview-summary::-webkit-details-marker { display: none; }
.mapping-overview-trailing { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.mapping-overview-chevron { display: inline-flex; transition: transform 0.15s ease; }
.mapping-overview[open] .mapping-overview-chevron { transform: rotate(90deg); }
.mapping-overview > .mapping-row,
.mapping-overview > .empty { margin: 0 12px; }
.mapping-overview[open] { padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .mapping-overview-chevron { transition: none; } }

.exercise-history-muscles { margin: 12px 0; }

.achievement-sheet-subtitle { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; text-align: center; }
.achievement-sheet-reward { color: var(--primary); font-size: 0.875rem; font-weight: 600; text-align: right; }

/* Drag to reorder exercises. The handle is pointer-only (aria-hidden, not focusable): the draggable surface is the
   44px grip alone, so the rest of the card keeps scrolling normally. */
.exercise-drag-handle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.exercise-drag-handle svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.draft-exercise-head > .exercise-drag-handle { margin: 0 -4px 0 -10px; }
.active-workout-exercise > .active-exercise-drag-handle { position: absolute; top: 20px; left: 4px; z-index: 1; }
.active-workout-exercise:is(.completed, .upcoming):has(> details:not([open])) > .active-exercise-drag-handle { top: 24.5px; }
.active-workout-exercise:has(> .active-exercise-drag-handle) .active-workout-exercise-summary { padding-left: 32px; }

/* While a drag is armed: no text selection, neighbours part with a snappy spring-like curve (the dragged card
   follows the finger 1:1, so its own transform is never transitioned except for the lift and the drop). */
.reorder-active { user-select: none; -webkit-user-select: none; }
.reorder-active > :is(.draft-exercise, .active-workout-exercise) { transition: transform 200ms cubic-bezier(0.2, 0.9, 0.1, 1); }
.reorder-active > :is(.draft-exercise, .active-workout-exercise).is-dragging {
  position: relative;
  z-index: 20;
  box-shadow: var(--reorder-lift-shadow);
  transition: box-shadow 160ms ease;
  will-change: transform;
  cursor: grabbing;
}
.reorder-active > :is(.draft-exercise, .active-workout-exercise).is-dragging.is-dropping { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .reorder-active > :is(.draft-exercise, .active-workout-exercise) { transition: none; }
}

/* Route view transitions: render() sets :root[data-nav-transition] to "tab" (cross-fade), "push" (drill-in slides in from the right, the old screen drifts left and dims) or "pop" (mirrored) while document.startViewTransition runs. The toast host and, on tab switches, the bottom bar keep their own layer so they neither slide nor flicker. */
:root[data-nav-transition] .toast-region { view-transition-name: toast-region; }
:root[data-nav-transition="tab"] .bottom-nav { view-transition-name: bottom-nav; }
::view-transition-group(toast-region),
::view-transition-group(bottom-nav) { animation-duration: 0s; }
::view-transition-old(bottom-nav),
::view-transition-new(bottom-nav) { animation-duration: var(--motion-fade-in); animation-timing-function: var(--ease-standard); }

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-timing-function: var(--ease-standard);
  animation-fill-mode: both;
}

/* The old screen stays opaque until the new one covers it, then fades, so a cross-fade never dips through the background. */
:root[data-nav-transition="tab"]::view-transition-old(root) { animation-name: nav-fade-out; animation-duration: var(--motion-fade-out); animation-delay: calc(var(--motion-fade-in) - var(--motion-fade-out)); }
:root[data-nav-transition="tab"]::view-transition-new(root) { animation-name: nav-fade-in; animation-duration: var(--motion-fade-in); }

:root[data-nav-transition="push"]::view-transition-old(root) { animation-name: nav-drift-out-left; animation-duration: var(--motion-standard); }
:root[data-nav-transition="push"]::view-transition-new(root) { animation-name: nav-slide-in-right; animation-duration: var(--motion-standard); }

:root[data-nav-transition="pop"]::view-transition-old(root) { z-index: 1; animation-name: nav-slide-out-right; animation-duration: var(--motion-standard); }
:root[data-nav-transition="pop"]::view-transition-new(root) { animation-name: nav-drift-in-left; animation-duration: var(--motion-standard); }

@keyframes nav-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nav-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes nav-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes nav-slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes nav-drift-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-28%); opacity: 0.4; } }
@keyframes nav-drift-in-left { from { transform: translateX(-28%); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }

/* Reduced motion: no slide or drift; every route change is the 150ms cross-fade (the global reduced-motion rule above does not reach view-transition pseudo-elements). */
@media (prefers-reduced-motion: reduce) {
  :root[data-nav-transition]::view-transition-old(root) { z-index: auto; animation-name: nav-fade-out; animation-duration: var(--motion-fade-out); animation-delay: calc(var(--motion-fade-in) - var(--motion-fade-out)); }
  :root[data-nav-transition]::view-transition-new(root) { animation-name: nav-fade-in; animation-duration: var(--motion-fade-in); }
}

/* Increased contrast (DESIGN.md Accessibility): borders switch from the hairline to the outline family, secondary text takes the primary text color, focus rings turn solid, and the glass materials become solid like the reduced-transparency fallbacks. Tokens only; no new colors. */
@media (prefers-contrast: more) {
  :root,
  :root[data-theme="dark"] {
    --outline: color-mix(in srgb, var(--text) 62%, var(--background));
    --line: var(--outline);
    --outline-variant: var(--outline);
    --topbar-outline: var(--outline);
    --nav-outline: var(--outline);
    --hero-outline: var(--outline);
    --muted: var(--text);
    --hero-muted: var(--hero-text);
  }

  .panel,
  .subpanel,
  .modal-panel,
  .hero-panel,
  .chip,
  .pill,
  .toast { border-color: var(--outline); }

  .material-card { box-shadow: inset 0 0 0 1px var(--outline); }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible,
  a:focus-visible,
  [role="tab"]:focus-visible,
  .active-live-tabs button:focus-visible,
  .training-week-sessions > summary:focus-visible,
  .exercise-search-field:focus-within {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 1px var(--text);
  }

  .topbar,
  .bottom-nav,
  .modal-panel,
  :root[data-theme="dark"] .modal-panel,
  .toast,
  :root[data-theme="dark"] .toast {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .topbar { background: var(--background); }
  .bottom-nav { background: var(--surface); }

  .modal-panel,
  :root[data-theme="dark"] .modal-panel,
  .toast,
  :root[data-theme="dark"] .toast { background: var(--surface-strong); }
}

/* The "How did it feel?" panel keeps the 16px panel padding (the shared compact panel is 6px). */
.panel.compact.workout-feedback { padding: 16px; }
.panel.compact.workout-feedback h2 { margin: 0 0 12px; }
.panel.compact.workout-feedback .segmented.workout-feedback-options { gap: 6px; padding: 0; }
.panel.compact.workout-feedback .segmented.workout-feedback-options button { padding-inline: 4px; }

/* One selected treatment for every segmented control and chip group (DESIGN.md Chips and segments):
   selected = accent fill + on-accent semibold text, unselected = surface-strong (--surface-2) + primary text. */
.segmented.panel.compact,
.progress-hub-switch,
.auth-mode-switch,
.theme-options { background: var(--surface-2); }

.period-tabs button:not(.selected),
.training-history-period button:not(.selected),
.exercise-muscle-chips .chip:not(.selected),
.muscle-map-selector .chip:not(.selected),
.smart-effort-chips .chip:not(.selected),
.mapping-grid .mapping-chip:not(.selected),
.training-profile-panel > .chip-row .chip:not(.selected) {
  color: var(--text);
  border-color: transparent;
  background: var(--surface-2);
}

.training-history-period button.selected {
  box-shadow: none;
  font-weight: 600;
}

.muscle-map-selector .chip.selected small { color: var(--on-accent); }

/* Progress is always the accent mark; a finished mission shows a success-coloured check and nothing else green. */
.progress span,
.bar-fill { background: var(--hero-accent); }
.mission-row .progress span,
.mission-row.highlighted .progress span { background: var(--hero-accent); }
.mission-row.highlighted .mission-card-icon,
.mission-completed-pill .small-icon { color: var(--mint); }
.mission-completed-pill {
  color: var(--text);
  border-color: var(--outline-variant);
  background: var(--surface-2);
}

/* Weekly review rhythm: 12 between rows, 16 before the workouts disclosure, 44px targets without extra visual gaps. */
.training-week-review > p { margin: 0; }
.training-week-review > .training-settings-link { margin-block: -14px; }
.training-week-sessions { margin-top: 4px; border-top: 1px solid var(--outline-variant); }

/* Desktop content width (DESIGN.md Layout): lists, forms and settings 640, dashboards 960, centred, one left edge per tab. */
@media (min-width: 900px) {
  .root-route-shell .screen-exercises,
  .root-route-shell .screen-leaderboard { width: min(calc(100% - 144px), 640px); }

  .root-route-shell .screen-workouts,
  .root-route-shell .screen-progress { width: min(calc(100% - 144px), 960px); }

  .screen-leaderboard > * { max-width: none; }

  .root-route-shell .screen-exercises .exercise-list { grid-template-columns: minmax(0, 1fr); }
}

/* Large text: labels wrap by words instead of being cut with an ellipsis, and two-line clamps leave room for a third word. */
.training-history-current strong,
.training-history-current span,
.training-history-row strong,
.training-history-row small,
.month-nav-month {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
}
.month-nav-current { flex-wrap: wrap; row-gap: 0; text-align: center; }
.smart-coach-toggle-text small { -webkit-line-clamp: 4; line-clamp: 4; }
button.workout-template-row .workout-template-names { -webkit-line-clamp: 4; line-clamp: 4; }
.achievement-name { -webkit-line-clamp: 3; line-clamp: 3; }
.metric-grid:not(.three) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.metric-grid span { -webkit-line-clamp: 3; line-clamp: 3; }

/* Root screen titles never break inside a word at large text. */
.screen-copy h2 { font-size: min(2rem, 9vw); line-height: 1.2; }

/* Exercise rows: the actions drop below the name instead of squeezing it into a column a few letters wide. */
.exercise-card-head { flex-wrap: wrap; row-gap: 4px; }
.exercise-card-head .exercise-card-title { flex: 1 1 7rem; min-width: min(7rem, 100%); }
.exercise-card-head .exercise-row-actions { margin-left: auto; }
.exercise-row .exercise-name { -webkit-line-clamp: 6; line-clamp: 6; }

/* The plan summary wraps by words. */
.smart-coach-toggle-text small { overflow-wrap: break-word; }

/* Plan editor rows wrap their trailing controls under the text at large sizes. */
.smart-coach-header { flex-wrap: wrap; row-gap: 0; }
.smart-coach-toggle { flex: 1 1 11rem; }
.draft-exercise-head { flex-wrap: wrap; row-gap: 4px; }
.draft-exercise-head .draft-exercise-title { flex: 1 1 8rem; min-width: min(8rem, 100%); }
.draft-exercise-head > .plan-menu-wrap { margin-left: auto; }
.exercise-builder-heading > div:first-child { flex: 1 1 min(100%, 8rem); }

/* Hub switches: three tabs per row while each can hold its label, one tab per row otherwise (never squeezed labels). */
.progress-hub { container-type: inline-size; }
@container (max-width: 14rem) {
  .progress-hub-switch { grid-auto-flow: row; grid-auto-columns: auto; }
  .progress-hub-switch button { flex-direction: row; gap: 7px; font-size: 0.875rem; line-height: 1.25rem; }
  .progress-hub-switch button span { width: auto; white-space: normal; overflow-wrap: break-word; }
}
.profile-hub-switch button strong { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; }

.weekly-summary-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.achievement-gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr)); }
button.workout-template-row .workout-template-names { -webkit-line-clamp: 6; line-clamp: 6; }

/* Badge names break at word boundaries where possible and shrink a little on narrow phones. */
.achievement-name { overflow-wrap: break-word; hyphens: none; }
@media (max-width: 380px) {
  .achievement-tile { padding-inline: 4px; }
  .achievement-name { font-size: 0.75rem; }
}

/* Two-column metric values wrap by words instead of being cut off ("2 в этом м"). */
.metric-grid:not(.three) strong { white-space: normal; overflow-wrap: break-word; }

/* Single-column grids never grow past the screen because of one long word (the profile list, search panel, rank hero, solo identity, goals list). */
.profile-hub-panel,
.exercise-search-panel,
.settings-panel,
.rank-hero,
.rank-ladder,
.solo-identity,
.mission-list,
.account-settings-sheet,
.rank-copy,
.settings-row-text,
.mission-row,
.account-identity { grid-template-columns: minmax(0, 1fr); }
/* The mapping summary drops its counter under the title instead of pushing it off the screen. */
.mapping-overview-summary { flex-wrap: wrap; row-gap: 4px; }
.mapping-overview-title { min-width: 0; overflow-wrap: break-word; }

/* Rank names keep growing with the text size (rem floor) but are capped by the screen width, so a long rank does not break inside a word. */
.solo-identity-row h2 { font-size: min(1.375rem, max(1.0625rem, 8vw)); line-height: 1.25; overflow-wrap: normal; }
.rank-hero.hero-panel .rank-hero-title { font-size: min(1.75rem, max(0.9375rem, 7vw)); line-height: 1.2; }
.rank-name { font-size: min(1.0625rem, max(0.875rem, 6.2vw)); }
.rank-hero-title > span { overflow-wrap: normal; }

/* The language row drops its current value under the label instead of squeezing the label ("Langua/ge"). */
.settings-language .settings-row { flex-wrap: wrap; row-gap: 2px; }
.settings-language .settings-row-text { flex: 1 1 auto; min-width: min-content; }
.settings-language .settings-row-trailing { margin-left: auto; }

/* Row titles keep growing with the text size (rem floor), capped by the screen width so long words stay whole ("Налаштування"). */
.settings-row-text strong { font-size: min(1rem, max(0.9375rem, 6vw)); }
/* Three-tile metric rows: three columns while each tile is at least 5.5rem wide, otherwise one per row (never two plus one). */
.metric-grid.three { grid-template-columns: repeat(auto-fit, minmax(clamp(5.5rem, calc((16.5rem + 16px - 100%) * 1000), 100%), 1fr)); }

/* Bar rows: the label column grows to the longest word at large text instead of running under the bar; the detail wraps beneath. */
@media (max-width: 560px) {
  .bar-row { grid-template-columns: minmax(min-content, 5.75rem) minmax(0, 1fr); }
  .bar-row > span:first-child { overflow-wrap: normal; }
}
/* Period switch (all time / month / week): three columns while each is at least 5.5rem wide, otherwise one per row (never two plus one). */
.period-tabs { grid-template-columns: repeat(auto-fit, minmax(clamp(5.5rem, calc((16.5rem + 16px - 100%) * 1000), 100%), 1fr)); }
.period-tabs button { white-space: normal; overflow-wrap: break-word; }