/*
 * Health UI
 * Light dashboard + distraction-free full-screen workout mode.
 */

@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/material-symbols-rounded.woff2") format("woff2");
}

.material-symbols-rounded {
  display: inline-block;
  direction: ltr;
  font-family: "Material Symbols Rounded";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
  font-feature-settings: "liga";
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

:root {
  color-scheme: light;

  --font-sans: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --page: #f6f7fb;
  --page-tint: #eef1ff;
  --surface: #ffffff;
  --surface-soft: #f8f9fc;
  --surface-strong: #e3e8f1;
  --ink: #182033;
  --ink-soft: #4f5a70;
  --ink-muted: #626d83;
  --line: #c9d1df;
  --line-strong: #aeb8c8;

  --primary: #5a53ed;
  --primary-hover: #4942d5;
  --primary-soft: #eeedff;
  --cyan: #06758c;
  --cyan-soft: #e4f8fc;
  --green: #087a57;
  --green-soft: #e8f9f2;
  --amber: #ed9b16;
  --amber-soft: #fff4d9;
  --coral: #b94439;
  --coral-soft: #fff0ed;
  --pink: #b93370;
  --pink-soft: #ffedf5;
  --danger: #c83242;
  --danger-soft: #ffedef;

  --shadow-xs: 0 1px 2px rgb(23 31 50 / 5%);
  --shadow-sm: 0 8px 24px rgb(29 38 64 / 7%);
  --shadow-md: 0 18px 48px rgb(29 38 64 / 11%);
  --shadow-lg: 0 28px 80px rgb(29 38 64 / 16%);
  --ring: 0 0 0 4px rgb(98 91 246 / 18%);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --space-1: 0.375rem;
  --space-2: 0.625rem;
  --space-3: 0.875rem;
  --space-4: 1.125rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.75rem;

  --content-width: 1320px;
  --header-height: 76px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1.3, 0.3, 1);
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 7% 0%, rgb(98 91 246 / 7%), transparent 27rem),
    radial-gradient(circle at 96% 12%, rgb(14 165 198 / 6%), transparent 24rem),
    var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.is-workout-open,
body.has-modal {
  overflow: hidden;
}

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

button,
select,
label,
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

button {
  border: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin-block-start: 0;
}

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

p {
  text-wrap: pretty;
}

::selection {
  background: rgb(98 91 246 / 22%);
}

:focus-visible {
  outline: 3px solid rgb(98 91 246 / 68%);
  outline-offset: 3px;
}

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

.is-hidden,
[hidden] {
  display: none !important;
}

/* Shared controls */

.button,
.icon-button,
.chip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 720;
  line-height: 1;
  transition:
    transform 160ms var(--ease-out),
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.button {
  min-height: 48px;
  padding: 0.8rem 1.15rem;
}

.button:hover,
.icon-button:hover,
.chip-button:hover {
  transform: translateY(-1px);
}

.button:active,
.icon-button:active,
.chip-button:active {
  transform: translateY(0) scale(0.98);
}

.button:disabled,
.icon-button:disabled,
.chip-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.button > .material-symbols-rounded,
.icon-button > .material-symbols-rounded,
.chip-button > .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 1.25rem;
}

.button > .accent-add-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.button--primary {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 10px 24px rgb(98 91 246 / 24%);
}

.button--primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 13px 30px rgb(98 91 246 / 30%);
}

.button--secondary {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.button--secondary:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.button--soft {
  background: var(--primary-soft);
  color: #4841cb;
}

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

.button--wide {
  width: 100%;
}

.button--large {
  min-height: 58px;
  padding-inline: 1.45rem;
  border-radius: var(--radius-md);
  font-size: 1.06rem;
}

.icon-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}

.chip-button {
  min-height: 38px;
  padding: 0.55rem 0.85rem;
  border-color: var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.chip-button.is-active {
  border-color: transparent;
  background: var(--primary-soft);
  color: var(--primary);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  min-height: 28px;
  padding: 0.28rem 0.68rem;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.025em;
}

.badge::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.badge--success {
  background: var(--green-soft);
  color: var(--green);
}

.badge--warning {
  background: var(--amber-soft);
  color: #b97108;
}

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

/* App shell and navigation */

.app-shell {
  min-height: 100vh;
}

.app-header {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: var(--header-height);
  border-bottom: 1px solid rgb(226 230 239 / 82%);
  background: rgb(255 255 255 / 86%);
  backdrop-filter: blur(18px) saturate(145%);
}

.app-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: min(calc(100% - 2.5rem), var(--content-width));
  min-height: var(--header-height);
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  font-size: 1.08rem;
  font-weight: 820;
  letter-spacing: -0.025em;
}

.brand__mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #766ffb, #5149e8);
  color: #ffffff;
  box-shadow: 0 8px 20px rgb(98 91 246 / 28%);
}

.brand__mark svg {
  width: 21px;
  height: 21px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 690;
  transition: background-color 160ms ease, color 160ms ease;
}

.nav-link svg {
  width: 1.1rem;
  height: 1.1rem;
}

.nav-link:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

.nav-link.is-active,
.nav-link[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
}

.mobile-nav {
  display: none;
}

.app-main {
  width: min(calc(100% - 2.5rem), var(--content-width));
  margin-inline: auto;
  padding-block: var(--space-7) var(--space-8);
}

.page-heading,
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
}

.page-heading {
  margin-bottom: var(--space-6);
}

.section-heading {
  align-items: center;
  margin-bottom: var(--space-4);
}

.page-heading h1 {
  margin-bottom: 0.45rem;
  font-size: clamp(2rem, 3.3vw, 3.35rem);
  letter-spacing: -0.05em;
}

.page-heading p,
.section-heading p {
  max-width: 62ch;
  margin-bottom: 0;
  color: var(--ink-soft);
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: -0.035em;
}

.eyebrow {
  margin-bottom: 0.55rem;
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Dashboard */

.dashboard {
  display: grid;
  gap: var(--space-6);
}

.dashboard-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.7fr);
  gap: var(--space-6);
  overflow: hidden;
  padding: clamp(1.5rem, 3.2vw, 3rem);
  border: 1px solid rgb(98 91 246 / 12%);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(120deg, rgb(255 255 255 / 96%), rgb(244 243 255 / 92%)),
    var(--surface);
  box-shadow: var(--shadow-md);
}

.dashboard-hero::before,
.dashboard-hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  filter: blur(2px);
}

.dashboard-hero::before {
  top: -10rem;
  right: -7rem;
  width: 26rem;
  height: 26rem;
  background: radial-gradient(circle, rgb(98 91 246 / 22%), transparent 68%);
}

.dashboard-hero::after {
  bottom: -10rem;
  left: 34%;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgb(14 165 198 / 14%), transparent 68%);
}

.dashboard-hero__content {
  align-self: center;
  max-width: 48rem;
}

.dashboard-hero__title {
  max-width: 13ch;
  margin-bottom: 0.85rem;
  font-size: clamp(2.2rem, 4.6vw, 4.5rem);
  letter-spacing: -0.06em;
}

.dashboard-hero__description {
  max-width: 55ch;
  margin-bottom: var(--space-5);
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
}

.dashboard-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.today-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 250px;
  padding: var(--space-5);
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 76%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.today-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 700;
}

.today-card__title {
  margin-bottom: 0.5rem;
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  letter-spacing: -0.04em;
}

.today-card__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.today-card__details span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.dashboard-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.card--padded {
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}

.card--interactive {
  transition:
    transform 200ms var(--ease-out),
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.card--interactive:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.card--accent {
  border-color: rgb(98 91 246 / 15%);
  background: linear-gradient(145deg, #ffffff, #f3f2ff);
}

.card--cyan {
  border-color: rgb(14 165 198 / 15%);
  background: linear-gradient(145deg, #ffffff, #eefdff);
}

.span-4 {
  grid-column: span 4;
}

.span-5 {
  grid-column: span 5;
}

.span-6 {
  grid-column: span 6;
}

.span-7 {
  grid-column: span 7;
}

.span-8 {
  grid-column: span 8;
}

.span-12 {
  grid-column: 1 / -1;
}

.stat-card {
  position: relative;
  overflow: hidden;
  min-height: 158px;
  padding: var(--space-5);
}

.stat-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-4);
  place-items: center;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
}

.stat-card__icon--green {
  background: var(--green-soft);
  color: var(--green);
}

.stat-card__icon--amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.stat-card__icon--pink {
  background: var(--pink-soft);
  color: var(--pink);
}

.stat-card__label {
  margin-bottom: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 680;
}

.stat-card__value {
  margin-bottom: 0;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  font-weight: 820;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.7rem;
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 740;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.summary-item {
  min-width: 0;
  padding: 1.1rem 1.35rem;
}

.summary-item + .summary-item {
  border-left: 1px solid var(--line);
}

.summary-item__label {
  display: block;
  overflow: hidden;
  margin-bottom: 0.25rem;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.summary-item__value {
  display: block;
  overflow: hidden;
  font-size: 1.08rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-progress {
  display: grid;
  gap: 0.75rem;
}

.week-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 720;
}

.progress-track {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
}

.progress-track__fill {
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #8b82ff);
  transition: width 600ms var(--ease-out);
}

.day-dots {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.55rem;
}

.day-dot {
  display: grid;
  gap: 0.42rem;
  justify-items: center;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 720;
}

.day-dot::before {
  width: 100%;
  max-width: 34px;
  aspect-ratio: 1;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface-soft);
  content: "";
}

.day-dot.is-complete::before {
  border-color: var(--green);
  background:
    center / 56% no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E"),
    var(--green);
}

.day-dot.is-today {
  color: var(--primary);
}

.day-dot.is-today::before {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

/* Plans, history and exercise lists */

.workout-list,
.history-list,
.exercise-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workout-item,
.history-row,
.exercise-row {
  display: grid;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.workout-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.workout-item:hover,
.exercise-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.workout-item.is-current {
  border-color: rgb(98 91 246 / 32%);
  background: var(--primary-soft);
}

.workout-item__day,
.exercise-row__index {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  background: var(--surface-strong);
  color: var(--ink-soft);
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.workout-item.is-current .workout-item__day {
  background: var(--primary);
  color: #ffffff;
}

.workout-item__title,
.history-row__title,
.exercise-row__title {
  margin-bottom: 0.2rem;
  font-weight: 780;
}

.workout-item__meta,
.history-row__meta,
.exercise-row__meta {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.exercise-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.history-row {
  grid-template-columns: minmax(8rem, 0.6fr) minmax(0, 1.5fr) repeat(2, auto);
}

.history-row__metric {
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.empty-state {
  display: grid;
  min-height: 240px;
  padding: var(--space-6);
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  text-align: center;
}

.empty-state__icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 1rem;
  place-items: center;
  border-radius: 21px;
  background: var(--primary-soft);
  color: var(--primary);
}

.empty-state h3 {
  margin-bottom: 0.45rem;
}

.empty-state p {
  max-width: 40ch;
  margin-bottom: 1.15rem;
  color: var(--ink-soft);
}

.chart-shell {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(25% - 1px),
      var(--line) 25%
    );
}

.chart-shell canvas,
.chart-shell svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Settings and form controls */

.settings-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
  display: grid;
  gap: 0.35rem;
}

.settings-nav__link {
  padding: 0.72rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 680;
}

.settings-nav__link:hover,
.settings-nav__link.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.settings-stack {
  display: grid;
  gap: var(--space-4);
}

.settings-section {
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.settings-section__header {
  margin-bottom: var(--space-5);
}

.settings-section__header h2 {
  margin-bottom: 0.35rem;
  font-size: 1.28rem;
}

.settings-section__header p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.48rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 720;
}

.field__hint {
  color: var(--ink-muted);
  font-size: 0.77rem;
}

.input,
.select,
.textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.input,
.select {
  min-height: 48px;
  padding: 0.72rem 0.9rem;
}

.textarea {
  min-height: 112px;
  padding: 0.8rem 0.9rem;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-muted);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 62px;
}

.setting-row + .setting-row {
  border-top: 1px solid var(--line);
}

.setting-row__copy strong {
  display: block;
  margin-bottom: 0.18rem;
  font-size: 0.93rem;
}

.setting-row__copy span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch__track {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.switch__track::after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 7px rgb(20 30 50 / 22%);
  content: "";
  transition: transform 220ms var(--ease-spring);
}

.switch input:checked + .switch__track {
  background: var(--primary);
}

.switch input:checked + .switch__track::after {
  transform: translateX(20px);
}

.switch input:focus-visible + .switch__track {
  box-shadow: var(--ring);
}

.segmented-control {
  display: inline-grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 3px;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

.segmented-control__item {
  min-height: 38px;
  padding: 0.55rem 0.85rem;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 720;
}

.segmented-control__item.is-active,
.segmented-control__item[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

/* Tabs */

.tabs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  min-height: 42px;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 720;
  white-space: nowrap;
}

.tab.is-active,
.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

/* Modal, confirmations and notifications */

.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  padding: 1.25rem;
  place-items: center;
  background: rgb(22 28 45 / 42%);
  opacity: 0;
  backdrop-filter: blur(8px);
  transition: opacity 220ms ease;
  visibility: hidden;
}

.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.modal,
dialog.modal {
  width: min(100%, 560px);
  max-height: min(84vh, 760px);
  overflow: auto;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  transform: translateY(16px) scale(0.98);
  transition: transform 260ms var(--ease-out);
}

.modal-backdrop.is-open .modal,
dialog.modal[open] {
  transform: translateY(0) scale(1);
}

dialog.modal::backdrop {
  background: rgb(22 28 45 / 42%);
  backdrop-filter: blur(8px);
}

.modal--wide,
dialog.modal--wide {
  width: min(100%, 780px);
}

.modal__header,
.modal__body,
.modal__footer {
  padding-inline: clamp(1.2rem, 4vw, 1.8rem);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.35rem 1rem;
  border-bottom: 1px solid var(--line);
}

.modal__header h2 {
  margin-bottom: 0.25rem;
  font-size: 1.45rem;
}

.modal__header p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.modal__body {
  padding-block: 1.3rem;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-block: 1rem 1.3rem;
  border-top: 1px solid var(--line);
}

.toast-stack {
  position: fixed;
  z-index: 130;
  right: 1.25rem;
  bottom: 1.25rem;
  display: grid;
  gap: 0.7rem;
  width: min(calc(100% - 2.5rem), 390px);
}

.toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 94%);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  animation: toast-in 320ms var(--ease-out) both;
}

.toast__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: var(--green-soft);
  color: var(--green);
}

.toast__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 760;
}

.toast__text {
  margin: 0.1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

/* Full-viewport workout experience */

.workout-view {
  --state-color: #625bf6;
  --state-strong: #423bb8;
  --state-soft: #e8e6ff;
  --state-screen: #f0f2ff;
  --state-glow: rgb(98 91 246 / 24%);
  --timer-size: clamp(19rem, min(39vw, 54vh), 34rem);
  --progress: 0;

  position: fixed;
  z-index: 80;
  inset: 0;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(0.75rem, 2vh, 1.5rem);
  min-width: 320px;
  min-height: 100dvh;
  overflow: auto;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background-color: var(--state-screen);
  background-image:
    radial-gradient(circle at 12% 8%, var(--state-glow), transparent 28rem),
    radial-gradient(circle at 88% 95%, rgb(255 255 255 / 72%), transparent 32rem);
  color: var(--ink);
  transition: background-color 700ms ease, color 400ms ease;
}

.workout-view::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 35%, rgb(255 255 255 / 26%) 52%, transparent 68%);
  content: "";
  opacity: 0.7;
  pointer-events: none;
  transform: translateX(-35%);
  transition: opacity 400ms ease;
}

.workout-view[data-state="ready"],
.workout-view.is-ready {
  --state-color: #625bf6;
  --state-strong: #423bb8;
  --state-soft: #e8e6ff;
  --state-screen: #f0f2ff;
  --state-glow: rgb(98 91 246 / 24%);
}

.workout-view[data-state="active"],
.workout-view.is-active {
  --state-color: #13ad78;
  --state-strong: #087653;
  --state-soft: #dff7ed;
  --state-screen: #eafbf4;
  --state-glow: rgb(19 173 120 / 23%);
}

.workout-view[data-state="rest"],
.workout-view.is-rest {
  --state-color: #ed9b16;
  --state-strong: #a86105;
  --state-soft: #ffedc1;
  --state-screen: #fff7df;
  --state-glow: rgb(237 155 22 / 25%);
}

.workout-view[data-state="paused"],
.workout-view.is-paused {
  --state-color: #8468e9;
  --state-strong: #5740ae;
  --state-soft: #e9e3ff;
  --state-screen: #f3f0ff;
  --state-glow: rgb(132 104 233 / 23%);
}

.workout-view[data-state="complete"],
.workout-view.is-complete {
  --state-color: #e84f91;
  --state-strong: #a92a64;
  --state-soft: #ffe0ee;
  --state-screen: #fff0f6;
  --state-glow: rgb(232 79 145 / 23%);
}

.workout-view.is-warning {
  --state-color: #f27335;
  --state-strong: #ac4210;
  --state-soft: #ffe1d1;
  --state-screen: #fff1e9;
  --state-glow: rgb(242 115 53 / 25%);
}

.workout-view.is-urgent {
  --state-color: #df4252;
  --state-strong: #9a2532;
  --state-soft: #ffdce1;
  --state-screen: #ffedf0;
  --state-glow: rgb(223 66 82 / 27%);
}

.workout-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.workout-topbar__start,
.workout-topbar__end {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.workout-topbar__end {
  justify-content: flex-end;
}

.workout-topbar__title {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: clamp(0.82rem, 1.2vw, 1rem);
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workout-progress-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.55rem 1rem;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 68%);
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 760;
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(10px);
  font-variant-numeric: tabular-nums;
}

.workout-view .icon-button {
  border-color: rgb(255 255 255 / 72%);
  background: rgb(255 255 255 / 68%);
  backdrop-filter: blur(10px);
}

.workout-stage {
  display: grid;
  grid-template-areas: "exercise timer next";
  grid-template-columns: minmax(15rem, 0.76fr) minmax(23rem, 1.4fr) minmax(14rem, 0.68fr);
  gap: clamp(1rem, 2.2vw, 2.2rem);
  align-items: center;
  width: min(100%, 1680px);
  min-height: 0;
  margin-inline: auto;
}

.exercise-panel,
.next-panel {
  min-width: 0;
  padding: clamp(1.1rem, 2vw, 1.65rem);
  border: 1px solid rgb(255 255 255 / 74%);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 68%);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
  transition: opacity 300ms ease, filter 300ms ease, transform 300ms var(--ease-out);
}

.exercise-panel {
  grid-area: exercise;
}

.next-panel {
  grid-area: next;
  align-self: center;
}

.exercise-panel__media,
.exercise-media-placeholder {
  position: relative;
  display: grid;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 1.15rem;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--state-color) 30%, transparent);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 25% 20%, rgb(255 255 255 / 68%), transparent 50%),
    var(--state-soft);
  color: var(--state-strong);
}

.exercise-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exercise-media-placeholder svg {
  width: clamp(2.5rem, 5vw, 4.5rem);
  height: clamp(2.5rem, 5vw, 4.5rem);
  opacity: 0.62;
}

.exercise-media-placeholder span {
  position: absolute;
  right: 0.7rem;
  bottom: 0.6rem;
  left: 0.7rem;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 720;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workout-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  min-height: 34px;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--state-soft);
  color: var(--state-strong);
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  font-weight: 820;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  transition: background-color 400ms ease, color 400ms ease;
}

.workout-status-pill::before {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--state-color);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--state-color) 13%, transparent);
  content: "";
}

.exercise-panel__title {
  margin: 0.85rem 0 0.5rem;
  font-size: clamp(1.65rem, 3vw, 3.1rem);
  letter-spacing: -0.05em;
}

.exercise-panel__target {
  margin-bottom: 1rem;
  color: var(--state-strong);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 770;
  font-variant-numeric: tabular-nums;
}

.instruction-list {
  display: grid;
  gap: 0.62rem;
  margin: 0;
  padding: 0;
  color: var(--ink-soft);
  font-size: clamp(0.85rem, 1vw, 1rem);
  list-style: none;
}

.instruction-list li {
  position: relative;
  padding-left: 1.45rem;
}

.instruction-list li::before {
  position: absolute;
  top: 0.48em;
  left: 0.15rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--state-color);
  content: "";
}

.timer-zone {
  grid-area: timer;
  display: grid;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.timer-ring {
  position: relative;
  display: grid;
  width: var(--timer-size);
  max-width: 100%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  filter: drop-shadow(0 22px 38px rgb(31 40 65 / 10%));
}

.timer-ring::before,
.timer-ring::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.timer-ring::before {
  inset: 11%;
  background: rgb(255 255 255 / 72%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 82%),
    0 18px 45px var(--state-glow);
  backdrop-filter: blur(12px);
}

.timer-ring::after {
  inset: 1%;
  border: 1px solid rgb(255 255 255 / 52%);
  opacity: 0.72;
}

.timer-ring svg {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.timer-ring circle {
  fill: none;
  stroke-width: 6;
  vector-effect: non-scaling-stroke;
}

.timer-ring__track {
  stroke: rgb(255 255 255 / 74%);
}

.timer-ring__progress {
  stroke: var(--state-color);
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--progress));
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px var(--state-glow));
  transition:
    stroke-dashoffset 900ms linear,
    stroke 500ms ease;
}

.timer-ring__center {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  width: 68%;
}

.timer-label {
  color: var(--state-strong);
  font-size: clamp(0.73rem, 1vw, 0.96rem);
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.timer-digits,
.timer-value {
  margin: 0;
  color: var(--ink);
  font-size: clamp(4.3rem, 8.6vw, 9.2rem);
  font-weight: 830;
  letter-spacing: -0.085em;
  line-height: 0.96;
  font-variant-numeric: tabular-nums lining-nums;
  text-indent: -0.07em;
  transform-origin: center;
}

.timer-unit,
.timer-caption {
  margin: 0.2rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(0.82rem, 1.2vw, 1.05rem);
  font-weight: 680;
}

.timer-digits.is-flipping,
.timer-value.is-flipping,
.timer-digit.is-changing,
.flip-number.is-flipping .flip-number__value {
  animation: timer-flip 380ms var(--ease-out) both;
}

.flip-number {
  display: inline-grid;
  perspective: 500px;
}

.flip-number__value {
  display: inline-block;
  transform-origin: 50% 48%;
  backface-visibility: hidden;
}

.rep-counter {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
}

.rep-counter__value {
  font-size: clamp(5rem, 10vw, 10rem);
  font-weight: 840;
  letter-spacing: -0.08em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.rep-counter__target {
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  font-weight: 720;
}

.set-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.set-dot {
  width: 0.68rem;
  height: 0.68rem;
  border: 2px solid color-mix(in srgb, var(--state-color) 28%, white);
  border-radius: 50%;
  background: transparent;
}

.set-dot.is-complete {
  border-color: var(--state-color);
  background: var(--state-color);
}

.set-dot.is-current {
  border-color: var(--state-color);
  box-shadow: 0 0 0 4px var(--state-soft);
}

.next-panel__label {
  margin-bottom: 0.6rem;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.next-panel__title {
  margin-bottom: 0.4rem;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: -0.035em;
}

.next-panel__meta {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(0.8rem, 1vw, 0.95rem);
}

.next-panel__number {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  place-items: center;
  border-radius: 15px;
  background: var(--state-soft);
  color: var(--state-strong);
  font-weight: 820;
}

.workout-footer {
  display: grid;
  gap: 0.7rem;
  width: min(100%, 1120px);
  margin-inline: auto;
}

.workout-actions {
  display: flex;
  justify-content: center;
  gap: clamp(0.65rem, 1.2vw, 1rem);
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 150px;
  min-height: clamp(58px, 7vh, 74px);
  padding: 0.9rem clamp(1.1rem, 2.3vw, 2rem);
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: clamp(17px, 2vw, 23px);
  background: rgb(255 255 255 / 72%);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-size: clamp(0.96rem, 1.35vw, 1.2rem);
  font-weight: 790;
  transition:
    transform 170ms var(--ease-out),
    background-color 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease;
  backdrop-filter: blur(12px);
  -webkit-tap-highlight-color: transparent;
}

.action-button svg {
  width: clamp(1.25rem, 2vw, 1.65rem);
  height: clamp(1.25rem, 2vw, 1.65rem);
}

.action-button:hover {
  transform: translateY(-2px);
  background: rgb(255 255 255 / 92%);
  box-shadow: var(--shadow-md);
}

.action-button:active {
  transform: scale(0.98);
}

.action-button--primary {
  min-width: clamp(190px, 24vw, 300px);
  border-color: transparent;
  background: var(--state-color);
  color: #ffffff;
  box-shadow: 0 16px 34px var(--state-glow);
}

.action-button--primary:hover {
  background: var(--state-strong);
  color: #ffffff;
}

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

.quick-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.quick-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 54%);
  color: var(--ink-soft);
  font-size: clamp(0.74rem, 0.95vw, 0.87rem);
  font-weight: 720;
  backdrop-filter: blur(8px);
}

.quick-button:hover {
  background: rgb(255 255 255 / 84%);
  color: var(--ink);
}

.quick-button svg {
  width: 1rem;
  height: 1rem;
}

.workout-view[data-state="active"] .timer-ring,
.workout-view.is-active .timer-ring {
  animation: ring-breathe 2.4s ease-in-out infinite;
}

.workout-view[data-state="paused"] .exercise-panel,
.workout-view[data-state="paused"] .next-panel,
.workout-view.is-paused .exercise-panel,
.workout-view.is-paused .next-panel {
  filter: saturate(0.65);
  opacity: 0.68;
}

.workout-view[data-state="paused"] .timer-ring__progress,
.workout-view.is-paused .timer-ring__progress {
  transition-duration: 0ms;
}

.workout-view[data-state="complete"] .timer-ring__progress,
.workout-view.is-complete .timer-ring__progress {
  stroke-dashoffset: 0;
}

.workout-view.is-urgent .timer-ring {
  animation: urgent-pulse 780ms ease-in-out infinite;
}

.completion-burst {
  position: absolute;
  z-index: 0;
  inset: -7%;
  opacity: 0;
  pointer-events: none;
}

.workout-view[data-state="complete"] .completion-burst,
.workout-view.is-complete .completion-burst {
  opacity: 1;
  animation: completion-pop 720ms var(--ease-out) both;
}

.completion-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--state-color);
  transform: rotate(var(--angle, 0deg)) translateY(-17rem);
}

.completion-burst i:nth-child(2n) {
  background: var(--amber);
}

.completion-burst i:nth-child(3n) {
  background: var(--cyan);
}

/* Compact session summary shown after completion */

.session-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  width: min(100%, 680px);
  margin-top: 1rem;
}

.session-summary__item {
  padding: 0.85rem;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 64%);
  backdrop-filter: blur(9px);
}

.session-summary__label {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
}

.session-summary__value {
  display: block;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

/* Animation hooks */

.screen-enter {
  animation: screen-enter 430ms var(--ease-out) both;
}

.state-enter {
  animation: state-enter 520ms var(--ease-out) both;
}

@keyframes timer-flip {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: perspective(500px) rotateX(0deg) translateY(0);
  }
  48% {
    opacity: 0.25;
    filter: blur(2px);
    transform: perspective(500px) rotateX(-28deg) translateY(-0.08em);
  }
  49% {
    transform: perspective(500px) rotateX(24deg) translateY(0.08em);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: perspective(500px) rotateX(0deg) translateY(0);
  }
}

@keyframes ring-breathe {
  0%,
  100% {
    filter: drop-shadow(0 22px 38px rgb(31 40 65 / 10%));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 26px 48px var(--state-glow));
    transform: scale(1.012);
  }
}

@keyframes urgent-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}

@keyframes completion-pop {
  from {
    opacity: 0;
    transform: scale(0.68) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes screen-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes state-enter {
  from {
    opacity: 0.4;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive dashboard */

@media (max-width: 1080px) {
  .main-nav {
    gap: 0.15rem;
  }

  .nav-link {
    padding-inline: 0.65rem;
  }

  .nav-link span {
    display: none;
  }

  .dashboard-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  }

  .span-4 {
    grid-column: span 6;
  }

  .workout-stage {
    grid-template-areas:
      "exercise timer"
      "next timer";
    grid-template-columns: minmax(14rem, 0.72fr) minmax(23rem, 1.28fr);
    align-content: center;
  }

  .exercise-panel__media,
  .exercise-media-placeholder {
    display: none;
  }

  .next-panel {
    align-self: start;
  }
}

@media (max-width: 800px) {
  :root {
    --header-height: 66px;
  }

  body {
    padding-bottom: 72px;
  }

  body.is-workout-open,
  body.has-modal {
    padding-bottom: 0;
  }

  .app-header__inner,
  .app-main {
    width: min(calc(100% - 1.5rem), var(--content-width));
  }

  .main-nav {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .header-actions .button:not(.button--icon-mobile) {
    display: none;
  }

  .mobile-nav {
    position: fixed;
    z-index: 40;
    right: 0.65rem;
    bottom: max(0.55rem, env(safe-area-inset-bottom));
    left: 0.65rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.2rem;
    min-height: 60px;
    padding: 0.35rem;
    border: 1px solid rgb(226 230 239 / 85%);
    border-radius: 21px;
    background: rgb(255 255 255 / 91%);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(18px) saturate(145%);
  }

  .mobile-nav__link {
    display: grid;
    gap: 0.15rem;
    place-items: center;
    border-radius: 16px;
    color: var(--ink-muted);
    font-size: 0.65rem;
    font-weight: 720;
  }

  .mobile-nav__link svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .mobile-nav__link.is-active {
    background: var(--primary-soft);
    color: var(--primary);
  }

  .app-main {
    padding-block: var(--space-5) var(--space-7);
  }

  .dashboard-hero {
    grid-template-columns: 1fr;
    padding: 1.35rem;
    border-radius: var(--radius-lg);
  }

  .dashboard-hero__title {
    font-size: clamp(2.25rem, 11vw, 3.7rem);
  }

  .today-card {
    min-height: 220px;
  }

  .summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .summary-item:nth-child(3),
  .summary-item:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .summary-item:nth-child(3) {
    border-left: 0;
  }

  .span-4,
  .span-5,
  .span-6,
  .span-7,
  .span-8 {
    grid-column: 1 / -1;
  }

  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    position: static;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .history-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .history-row__metric:nth-last-child(1) {
    display: none;
  }

  .workout-view {
    --timer-size: min(56vw, 38vh, 27rem);
    position: fixed;
    gap: 0.65rem;
  }

  .workout-topbar {
    grid-template-columns: 1fr auto;
  }

  .workout-progress-label {
    display: none;
  }

  .workout-stage {
    grid-template-areas:
      "timer"
      "exercise"
      "next";
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    align-content: start;
  }

  .timer-zone {
    align-self: center;
  }

  .exercise-panel,
  .next-panel {
    width: min(100%, 620px);
    margin-inline: auto;
    padding: 1rem;
    border-radius: var(--radius-md);
  }

  .exercise-panel__title {
    margin-top: 0.55rem;
    font-size: clamp(1.4rem, 6vw, 2.1rem);
  }

  .exercise-panel__target {
    margin-bottom: 0;
  }

  .instruction-list,
  .next-panel {
    display: none;
  }

  .workout-actions {
    display: grid;
    grid-template-columns: 0.75fr 1.5fr 0.75fr;
  }

  .action-button {
    min-width: 0;
    min-height: 58px;
    padding-inline: 0.75rem;
  }

  .action-button--primary {
    min-width: 0;
  }

  .action-button__optional-label {
    display: none;
  }
}

@media (max-width: 540px) {
  .page-heading,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-heading__actions,
  .section-heading__actions {
    width: 100%;
  }

  .page-heading__actions .button,
  .section-heading__actions .button {
    width: 100%;
  }

  .dashboard-hero__actions {
    display: grid;
  }

  .dashboard-hero__actions .button {
    width: 100%;
  }

  .stats-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .span-4,
  .span-5,
  .span-6,
  .span-7,
  .span-8,
  .span-12 {
    grid-column: 1;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .field--full {
    grid-column: 1;
  }

  .setting-row {
    gap: 0.85rem;
  }

  .workout-item,
  .exercise-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .workout-item > :last-child,
  .exercise-row > :last-child {
    grid-column: 1 / -1;
  }

  .modal__footer {
    display: grid;
  }

  .modal__footer .button {
    width: 100%;
  }

  .toast-stack {
    right: 0.75rem;
    bottom: 0.75rem;
    width: calc(100% - 1.5rem);
  }

  .workout-view {
    --timer-size: min(70vw, 34vh, 23rem);
  }

  .workout-topbar__title {
    max-width: 46vw;
  }

  .workout-topbar__end .button-label {
    display: none;
  }

  .timer-digits,
  .timer-value {
    font-size: clamp(4rem, 20vw, 6.8rem);
  }

  .workout-actions {
    gap: 0.5rem;
  }

  .action-button {
    border-radius: 17px;
    font-size: 0.9rem;
  }

  .action-button:not(.action-button--primary) span {
    display: none;
  }

  .quick-controls {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0.15rem 0.1rem;
    scrollbar-width: none;
  }

  .quick-controls::-webkit-scrollbar {
    display: none;
  }

  .quick-button {
    flex: 0 0 auto;
  }

  .session-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 740px) and (min-width: 801px) {
  .workout-view {
    --timer-size: min(34vw, 48vh, 26rem);
    gap: 0.55rem;
  }

  .exercise-panel,
  .next-panel {
    padding: 1rem;
  }

  .exercise-panel__media,
  .exercise-media-placeholder {
    display: none;
  }

  .workout-status-pill {
    min-height: 28px;
    padding-block: 0.3rem;
  }

  .action-button {
    min-height: 54px;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .workout-view {
    --timer-size: min(34vw, 60vh, 20rem);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .workout-stage {
    grid-template-areas: "exercise timer";
    grid-template-columns: minmax(15rem, 0.85fr) minmax(18rem, 1.15fr);
  }

  .next-panel,
  .instruction-list {
    display: none;
  }

  .workout-footer {
    position: fixed;
    z-index: 4;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: auto;
    pointer-events: none;
  }

  .workout-actions,
  .quick-controls {
    pointer-events: auto;
  }

  .workout-actions {
    justify-content: flex-end;
  }

  .quick-controls {
    display: none;
  }

  .action-button {
    min-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0ms !important;
    transition-duration: 1ms !important;
  }

  .timer-digits.is-flipping,
  .timer-value.is-flipping,
  .timer-digit.is-changing,
  .flip-number.is-flipping .flip-number__value {
    animation: none !important;
  }
}

/* Exercise dialog must stay wider than the generic form dialogs. */
.modal-card.exercise-modal-card {
  width: min(1040px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: hidden;
}

.modal-card.exercise-modal-card .exercise-detail-layout {
  max-height: calc(100dvh - 2rem);
}

@media (max-width: 840px) {
  .modal-card.exercise-modal-card {
    width: min(720px, calc(100vw - 1rem));
    max-height: calc(100dvh - 1rem);
  }

  .modal-card.exercise-modal-card .exercise-detail-layout {
    max-height: calc(100dvh - 1rem);
  }
}

/* Exercise library added to the actual application */

.exercise-view-header {
  align-items: center;
}

.exercise-filters {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 140px;
  min-width: 140px;
  min-height: 48px;
  padding-inline: 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-muted);
  box-shadow: var(--shadow-xs);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.search-field:focus-within {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.search-field > span {
  flex: 0 0 auto;
  font-size: 1.28rem;
  line-height: 1;
}

.search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
}

.search-field input::placeholder {
  color: var(--ink-muted);
}

.exercise-filters > select {
  width: 180px;
  min-height: 48px;
  max-width: 180px;
  padding: 0.7rem 2.2rem 0.7rem 0.82rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: var(--shadow-xs);
  outline: none;
}

.exercise-header-actions > .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.exercise-filters > select:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.exercise-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.exercise-library-layout {
  display: block;
}

.exercise-library-main {
  min-width: 0;
}

.exercise-library-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 430px;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition:
    transform 220ms var(--ease-out),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.exercise-library-card:hover,
.exercise-library-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgb(98 91 246 / 28%);
  box-shadow: var(--shadow-md);
}

.exercise-library-card:focus-visible {
  outline: 3px solid rgb(98 91 246 / 55%);
  outline-offset: 3px;
}

.exercise-card-visual {
  position: relative;
  display: grid;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  place-items: center;
  background:
    radial-gradient(circle at 24% 16%, rgb(255 255 255 / 90%), transparent 52%),
    linear-gradient(145deg, var(--primary-soft), #e6f9fd);
  color: var(--primary);
}

.exercise-library-card:nth-child(4n + 2) .exercise-card-visual {
  background:
    radial-gradient(circle at 24% 16%, rgb(255 255 255 / 90%), transparent 52%),
    linear-gradient(145deg, var(--green-soft), #eefcf7);
  color: var(--green);
}

.exercise-library-card:nth-child(4n + 3) .exercise-card-visual {
  background:
    radial-gradient(circle at 24% 16%, rgb(255 255 255 / 90%), transparent 52%),
    linear-gradient(145deg, var(--coral-soft), #fff7ef);
  color: var(--coral);
}

.exercise-library-card:nth-child(4n + 4) .exercise-card-visual {
  background:
    radial-gradient(circle at 24% 16%, rgb(255 255 255 / 90%), transparent 52%),
    linear-gradient(145deg, var(--cyan-soft), #f0fbff);
  color: var(--cyan);
}

.exercise-card-media {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  opacity: 0;
  place-items: center;
  pointer-events: none;
  transform: translateX(4%);
  transition:
    opacity 180ms ease,
    transform 240ms var(--ease-out),
    visibility 180ms ease;
  visibility: hidden;
}

.exercise-card-media--exercise {
  z-index: 1;
  background: inherit;
  color: inherit;
}

.exercise-card-media.is-before {
  transform: translateX(-4%);
}

.exercise-card-media.is-after {
  transform: translateX(4%);
}

.exercise-card-media.is-active {
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

.exercise-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exercise-card-media--exercise .exercise-illustration {
  font-size: clamp(5.2rem, 9vw, 7.2rem);
  opacity: 0.15;
  transition: transform 260ms var(--ease-out);
}

.exercise-library-card:hover .exercise-card-media--exercise .exercise-illustration {
  transform: scale(1.045);
}

.exercise-card-carousel-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(31 40 65 / 12%);
  border-radius: 50%;
  background: rgb(255 255 255 / 88%);
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  cursor: pointer;
  opacity: 0.72;
  transform: translateY(-50%);
  transition:
    opacity 160ms ease,
    background-color 160ms ease,
    transform 180ms var(--ease-out);
  backdrop-filter: blur(10px);
}

.exercise-card-carousel-arrow .material-symbols-rounded {
  display: block;
  font-size: 24px;
}

.exercise-card-carousel-arrow--previous {
  left: 0.65rem;
}

.exercise-card-carousel-arrow--next {
  right: 0.65rem;
}

.exercise-card-carousel-arrow:hover,
.exercise-card-carousel-arrow:focus-visible {
  background: #ffffff;
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
}

.exercise-card-carousel-arrow:focus-visible,
.exercise-card-carousel-dot:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.exercise-card-carousel-dots {
  position: absolute;
  z-index: 5;
  bottom: 0.72rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.35rem 0.48rem;
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: 999px;
  background: rgb(255 255 255 / 72%);
  box-shadow: var(--shadow-xs);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.exercise-card-carousel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(84 95 118 / 34%);
  cursor: pointer;
  transition:
    width 180ms var(--ease-out),
    background-color 180ms ease;
}

.exercise-card-carousel-dot.is-active {
  width: 20px;
  background: currentColor;
}

.exercise-card-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 1.15rem;
}

.exercise-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  margin-bottom: 0.9rem;
}

.exercise-card-tag {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0.32rem 0.58rem;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
}

.exercise-card-tag--category {
  background: var(--primary-soft);
  color: var(--primary);
}

.exercise-card-tag--stage {
  border: 1px solid color-mix(in srgb, var(--exercise-stage-color, var(--primary)) 24%, var(--line));
  background: color-mix(in srgb, var(--exercise-stage-color, var(--primary)) 10%, var(--surface));
  color: var(--exercise-stage-color, var(--primary));
}

.exercise-card-tag--usage {
  color: var(--ink-soft);
}

.exercise-card-content h2 {
  margin-bottom: 0.48rem;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  letter-spacing: -0.035em;
}

.exercise-card-content > p {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 1rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.exercise-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.exercise-card-footer-tags {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.exercise-card-footer > strong {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.18rem;
  color: var(--primary);
  font-size: 0.82rem;
}

.exercise-card-footer b {
  display: inline-block;
  margin-left: 0.18rem;
  transition: transform 160ms ease;
}

.exercise-library-card:hover .exercise-card-footer b {
  transform: translateX(3px);
}

/* Exercise detail modal */

.exercise-modal-card {
  width: min(100%, 1040px);
  max-height: min(92dvh, 900px);
  padding: 0;
  overflow: hidden;
}

.exercise-modal-card > .modal-close {
  top: 1rem;
  right: 1rem;
}

.exercise-detail-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr);
  max-height: min(92dvh, 900px);
  overflow: auto;
}

.exercise-detail-aside {
  position: sticky;
  top: 0;
  align-self: start;
  display: grid;
  gap: 1rem;
  min-height: 100%;
  padding: clamp(1.15rem, 2.5vw, 1.7rem);
  background: linear-gradient(160deg, var(--primary-soft), var(--cyan-soft));
}

.exercise-detail-placeholder {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  border: 1px dashed rgb(98 91 246 / 24%);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 48%);
  color: var(--primary);
}

.exercise-detail-placeholder > span {
  position: absolute;
  z-index: 1;
  top: 0.8rem;
  left: 0.8rem;
  display: grid;
  min-width: 44px;
  height: 44px;
  padding-inline: 0.55rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 15px;
  background: rgb(255 255 255 / 72%);
  font-size: 0.76rem;
  font-weight: 850;
  backdrop-filter: blur(9px);
}

.exercise-detail-placeholder .exercise-illustration {
  font-size: clamp(7rem, 15vw, 10rem);
  opacity: 0.15;
}

.exercise-detail-placeholder small {
  position: absolute;
  right: 0.6rem;
  bottom: 0.65rem;
  left: 0.6rem;
  color: #625aa9;
  font-size: 0.75rem;
  font-weight: 720;
  text-align: center;
  opacity: 1;
}

.exercise-used-in {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 48%);
}

.exercise-used-in > span {
  color: #625aa9;
  font-size: 0.74rem;
  font-weight: 790;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.exercise-used-in > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.exercise-used-in > div span {
  display: inline-grid;
  min-height: 32px;
  padding: 0.35rem 0.58rem;
  place-items: center;
  border-radius: 9px;
  background: rgb(255 255 255 / 74%);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 820;
}

.exercise-detail-content {
  min-width: 0;
  padding: clamp(1.4rem, 3.6vw, 2.6rem);
}

.exercise-category-badge {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin: 0 3rem 0.75rem 0;
  padding: 0.38rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 790;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.exercise-detail-content > h2 {
  margin-bottom: 0.55rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.055em;
}

.exercise-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.exercise-detail-actions .button {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.exercise-detail-actions .material-symbols-rounded {
  font-size: 1.1rem;
}

.exercise-detail-section {
  min-width: 0;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.exercise-detail-section h3 {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.exercise-detail-section ul,
.exercise-detail-section ol {
  margin: 0;
}

.exercise-detail-section .instruction-list {
  counter-reset: instruction-step;
  display: grid;
  gap: 0.65rem;
  padding: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  list-style: none;
}

.exercise-detail-section .instruction-list li {
  counter-increment: instruction-step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0;
}

.exercise-detail-section .instruction-list li::before {
  position: static;
  display: grid;
  width: 25px;
  height: 25px;
  margin: 0;
  place-items: center;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: none;
  content: counter(instruction-step);
  font-size: 0.72rem;
  font-weight: 820;
}

.settings-icon-violet {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Actual timer tick and toast lifecycle classes used by app.js */

.timer-center .timer-value.is-ticking {
  animation: timer-flip 380ms var(--ease-out) both;
}

.toast-region .toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 94%);
  box-shadow: var(--shadow-md);
  opacity: 0;
  animation: none;
  transform: translateX(18px) scale(0.98);
  transition: opacity 220ms ease, transform 260ms var(--ease-out);
  backdrop-filter: blur(12px);
}

.toast-region .toast.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.toast-region .toast > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 850;
}

.toast-region .toast-success > span:first-child {
  background: var(--green-soft);
  color: var(--green);
}

.toast-region .toast-error > span:first-child {
  background: var(--danger-soft);
  color: var(--danger);
}

.toast-region .toast p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 680;
}

@media (max-width: 1100px) {
  .exercise-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .exercise-library-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 840px) {
  .topbar .main-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .nav-item {
    font-size: 0.67rem;
  }

  .exercise-view-header {
    align-items: stretch;
    flex-direction: column;
  }

  .exercise-filters {
    width: 100%;
  }

  .search-field {
    min-width: 0;
    flex: 1;
  }

  .exercise-modal-card {
    width: min(100%, 720px);
  }

  .exercise-detail-layout {
    grid-template-columns: 1fr;
  }

  .exercise-detail-aside {
    position: static;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .exercise-detail-placeholder {
    aspect-ratio: 16 / 10;
  }

  .exercise-used-in {
    align-content: center;
  }
}

@media (max-width: 580px) {
  .topbar .main-nav {
    right: 0.4rem;
    left: 0.4rem;
    padding: 0.28rem;
  }

  .nav-item {
    min-height: 46px;
    padding-inline: 0.1rem;
    font-size: 0.6rem;
  }

  .exercise-filters {
    display: grid;
    grid-template-columns: 1fr;
  }

  .exercise-filters > select {
    width: 100%;
    max-width: none;
  }

  .exercise-library-grid {
    grid-template-columns: 1fr;
  }

  .exercise-library-card {
    min-height: 390px;
  }

  .exercise-detail-aside {
    grid-template-columns: 1fr;
  }

  .exercise-detail-placeholder {
    aspect-ratio: 16 / 9;
  }

  .exercise-detail-content {
    padding: 1.15rem;
  }

  .exercise-detail-content > h2 {
    font-size: clamp(1.8rem, 10vw, 2.7rem);
  }

  .exercise-detail-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .exercise-detail-actions .button {
    justify-content: center;
  }

}

@media (prefers-reduced-motion: reduce) {
  .timer-center .timer-value.is-ticking,
  .exercise-card-visual .exercise-illustration,
  .exercise-card-media,
  .exercise-card-carousel-arrow,
  .exercise-card-carousel-dot,
  .toast-region .toast {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: #c4cad6;
    --line-strong: #a4adbd;
    --ink-soft: #424b5e;
    --ink-muted: #626c80;
  }

  .button--primary,
  .action-button--primary {
    box-shadow: none;
  }

  .exercise-panel,
  .next-panel,
  .today-card,
  .workout-view .icon-button,
  .action-button,
  .quick-button {
    border-color: var(--line-strong);
    background: #ffffff;
  }
}

@media print {
  .app-header,
  .mobile-nav,
  .header-actions,
  .page-heading__actions,
  .workout-view,
  .toast-stack {
    display: none !important;
  }

  body {
    padding: 0;
    background: #ffffff;
  }

  .app-main {
    width: 100%;
    padding: 0;
  }

  .card,
  .settings-section,
  .summary-strip {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* ========================================================================== 
   Actual application markup compatibility layer
   These selectors map the design system above to static/index.html.
   ========================================================================== */

/* Actual shared buttons */

.button-primary {
  border-color: transparent;
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 10px 24px rgb(98 91 246 / 24%);
}

.button-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 13px 30px rgb(98 91 246 / 30%);
}

.button-secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

.button-secondary:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.button-logout {
  border-color: var(--danger);
  background: transparent;
  color: var(--danger);
  box-shadow: none;
}

.button-logout:hover {
  background: var(--danger-soft);
}

.button-quiet {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  color: var(--ink-soft);
}

.button-quiet:hover {
  background: var(--line);
  color: var(--ink);
}

.button-danger {
  border-color: transparent;
  background: var(--danger);
  color: #ffffff;
  box-shadow: 0 10px 22px rgb(223 66 82 / 20%);
}

.button-danger:hover {
  background: #c83242;
}

.button-large {
  min-height: 58px;
  padding-inline: 1.45rem;
  border-radius: var(--radius-md);
  font-size: 1.04rem;
}

.button-full {
  width: 100%;
}

.button-icon {
  display: inline-grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
  font-size: 0.7rem;
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  padding: 0.55rem 0;
  background: transparent;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 760;
  transition: color 160ms ease, transform 160ms ease;
}

.text-button .material-symbols-rounded {
  font-size: 1.05rem;
}

.text-button:hover {
  color: var(--primary-hover);
  transform: translateX(2px);
}

/* Actual top bar */

.topbar {
  position: sticky;
  z-index: 40;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3.5rem);
  min-height: var(--header-height);
  padding-inline: max(1.25rem, calc((100vw - var(--content-width)) / 2));
  border-bottom: 1px solid rgb(226 230 239 / 82%);
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 70%);
  backdrop-filter: blur(18px) saturate(145%);
}

.topbar .brand {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  background: transparent;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.topbar .brand > span:last-child {
  display: grid;
  min-width: 0;
}

.topbar .brand strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 820;
  letter-spacing: -0.025em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar .brand small {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.topbar .main-nav {
  --sliding-tabs-pill-background: var(--surface);
  --sliding-tabs-pill-radius: 11px;
  --sliding-tabs-pill-shadow: var(--shadow-xs);
  position: relative;
  justify-self: center;
  margin: 0;
  padding: 4px;
  border-radius: 15px;
  background: var(--surface-strong);
}

.nav-item {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0.58rem 0.9rem;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 720;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.nav-item:hover {
  color: var(--ink);
}

.nav-item.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

.topbar .main-nav.has-sliding-tabs .nav-item.is-active {
  background: transparent;
  box-shadow: none;
}

.topbar-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

.dev-workout-button {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.6rem);
  min-height: 38px;
  padding: 0.5rem 0.82rem;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--line));
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 800;
  transform: translateY(-50%);
  white-space: nowrap;
}

.dev-workout-button.is-view-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.dev-workout-button:hover {
  border-style: solid;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.date-pill {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0.5rem 0.82rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
}

.topbar-actions .icon-button {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.topbar-actions .header-settings-button {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
}

.header-settings-button .material-symbols-rounded {
  font-size: 20px;
}

.header-settings-button:hover,
.header-settings-button.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  transform: none;
}

.header-settings-button:active { transform: none; }

.sound-off-icon,
.icon-button.is-muted .sound-on-icon {
  display: none;
}

.icon-button.is-muted .sound-off-icon {
  display: block;
}

.icon-button.is-muted {
  background: var(--coral-soft);
  color: var(--coral);
}

/* Views and headings */

.page-content {
  width: min(calc(100% - 2.5rem), var(--content-width));
  margin-inline: auto;
  padding-block: var(--space-5) var(--space-8);
}

.app-view {
  display: none;
}

.app-view.is-active {
  display: block;
  animation: actual-view-enter 360ms var(--ease-out) both;
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: var(--space-6);
}

.view-header h1 {
  margin-bottom: 0;
  font-size: clamp(2.2rem, 4vw, 4rem);
  letter-spacing: -0.055em;
}

@media (min-width: 561px) {
  .view-header > :not(:first-child) {
    transform: translateY(0.3rem);
  }
}

.view-header p {
  max-width: 58ch;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(0.96rem, 1.25vw, 1.12rem);
}

.section-kicker,
.card-kicker {
  display: block;
  margin-bottom: 0.38rem;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.muted {
  color: var(--ink-muted);
  font-size: 0.88rem;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.panel > .section-heading {
  align-items: center;
}

.compact-heading {
  margin-bottom: 1rem;
}

/* Dashboard */

.app-view .dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.hero-card {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: clamp(350px, 39vw, 475px);
  overflow: hidden;
  padding: clamp(1.6rem, 4vw, 3.7rem);
  border: 1px solid rgb(98 91 246 / 13%);
  border-radius: clamp(26px, 3vw, 40px);
  background:
    radial-gradient(circle at 82% 42%, rgb(98 91 246 / 16%), transparent 24rem),
    radial-gradient(circle at 43% 110%, rgb(14 165 198 / 13%), transparent 25rem),
    linear-gradient(120deg, #ffffff 16%, #f3f2ff 100%);
  box-shadow: var(--shadow-md);
}

.hero-card::before {
  content: none;
}

.hero-copy {
  align-self: center;
  max-width: 55rem;
}

.eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.eyebrow-row .eyebrow {
  margin: 0;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.38rem 0.72rem;
  border: 1px solid rgb(98 91 246 / 13%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 62%);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 760;
  backdrop-filter: blur(8px);
}

.hero-card h1 {
  max-width: 14ch;
  margin-bottom: 0.8rem;
  font-size: clamp(2.65rem, 5.3vw, 5.7rem);
  letter-spacing: -0.065em;
}

.hero-card .hero-copy > p {
  max-width: 56ch;
  margin-bottom: 1.6rem;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.45vw, 1.3rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-orbit {
  position: relative;
  display: grid;
  align-self: center;
  justify-self: center;
  width: clamp(220px, 25vw, 330px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(98 91 246 / 18%);
  border-radius: 50%;
  box-shadow: 0 18px 44px rgb(98 91 246 / 10%);
}

.hero-orbit-ring {
  display: grid;
  width: 64%;
  aspect-ratio: 1;
  place-content: center;
  border: 1px solid rgb(255 255 255 / 86%);
  border-radius: 50%;
  background: rgb(255 255 255 / 78%);
  box-shadow:
    inset 0 0 0 1px rgb(98 91 246 / 8%),
    0 22px 55px rgb(98 91 246 / 16%);
  text-align: center;
  backdrop-filter: blur(12px);
}

.hero-orbit-value {
  color: var(--primary);
  font-size: clamp(4rem, 7vw, 6.7rem);
  font-weight: 840;
  letter-spacing: -0.09em;
  line-height: 0.86;
  text-indent: -0.08em;
  font-variant-numeric: tabular-nums;
}

.hero-orbit-label {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.orbit-dot {
  display: none;
}

.orbit-dot-one {
  top: 13%;
  right: 16%;
}

.orbit-dot-two {
  bottom: 12%;
  left: 18%;
  width: 13px;
  height: 13px;
  background: var(--cyan);
}

.resume-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgb(237 155 22 / 20%);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--amber-soft), #fffdf8);
  box-shadow: var(--shadow-xs);
}

.resume-card h2 {
  margin-bottom: 0.25rem;
  font-size: 1.28rem;
}

.resume-card p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.resume-card .card-kicker {
  color: #a86105;
}

.resume-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.6rem;
}

.summary-section {
  grid-column: 1 / -1;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.metric-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 162px;
  overflow: hidden;
  padding: 1.3rem;
  border: 1px solid var(--metric-line, var(--line));
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #ffffff 20%, var(--metric-soft, var(--surface-soft)) 130%);
  box-shadow: var(--shadow-xs);
}

.metric-card::after {
  content: none;
}

.metric-violet {
  --metric-color: var(--primary);
  --metric-soft: var(--primary-soft);
  --metric-line: rgb(98 91 246 / 15%);
}

.metric-mint {
  --metric-color: var(--green);
  --metric-soft: var(--green-soft);
  --metric-line: rgb(19 173 120 / 15%);
}

.metric-coral {
  --metric-color: var(--coral);
  --metric-soft: var(--coral-soft);
  --metric-line: rgb(244 103 87 / 15%);
}

.metric-sky {
  --metric-color: var(--cyan);
  --metric-soft: var(--cyan-soft);
  --metric-line: rgb(14 165 198 / 15%);
}

.metric-icon {
  display: grid;
  width: 39px;
  height: 39px;
  margin-bottom: auto;
  place-items: center;
  border-radius: 13px;
  background: var(--metric-soft);
  color: var(--metric-color);
  font-size: 1rem;
  font-weight: 820;
}

.metric-card > strong {
  display: block;
  overflow: hidden;
  margin-top: 1.05rem;
  color: var(--ink);
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 830;
  letter-spacing: -0.05em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.metric-card > span:not(.metric-icon),
.metric-card > small {
  margin-top: 0.42rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 650;
}

.schedule-panel {
  grid-column: span 7;
}

.recent-panel {
  grid-column: span 5;
}
.schedule-panel,
.recent-panel,
.chart-panel,
.history-panel {
  padding: clamp(1.15rem, 2.2vw, 1.7rem);
}

.week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.55rem;
}

.week-day {
  display: grid;
  min-width: 0;
  min-height: 132px;
  padding: 0.75rem 0.35rem;
  place-items: center;
  align-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  color: var(--ink-soft);
  transition:
    transform 180ms var(--ease-out),
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

button.week-day:hover {
  transform: translateY(-3px);
  border-color: rgb(98 91 246 / 30%);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.week-day-name {
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.week-day > strong {
  font-size: 1.45rem;
  font-weight: 820;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.week-day-plan {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 820;
}

.week-day-plan .material-symbols-rounded {
  font-size: 1rem;
}

.week-day > small {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-day.has-workout {
  background: #ffffff;
}

.week-day.is-today {
  border-color: rgb(98 91 246 / 42%);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 0 3px rgb(98 91 246 / 8%);
}

.week-day.is-today .week-day-plan {
  background: var(--primary);
  color: #ffffff;
}

.week-day.is-complete .week-day-plan {
  background: var(--green);
  color: #ffffff;
}

.week-day.is-recovery {
  border-style: dashed;
  background: rgb(250 251 255 / 56%);
}

.session-list,
.history-list {
  display: grid;
  gap: 0.65rem;
}

.session-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.78rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.session-code {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 14px;
  background: var(--session-soft, var(--primary-soft));
  color: var(--session-color, var(--primary));
  font-size: 0.78rem;
  font-weight: 840;
}

.session-code.workout-violet,
.workout-violet {
  --session-color: var(--primary);
  --session-soft: var(--primary-soft);
}

.session-code.workout-coral,
.workout-coral {
  --session-color: var(--coral);
  --session-soft: var(--coral-soft);
}

.session-code.workout-mint,
.workout-mint {
  --session-color: var(--green);
  --session-soft: var(--green-soft);
}

.session-code.workout-sky,
.workout-sky {
  --session-color: var(--cyan);
  --session-soft: var(--cyan-soft);
}

.session-info {
  display: grid;
  min-width: 0;
}

.session-info strong {
  overflow: hidden;
  font-size: 0.94rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-info span {
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.65rem;
  align-items: center;
  margin-right: 0.2rem;
  font-size: 0.72rem;
}

.session-feedback span {
  color: var(--ink-soft);
  white-space: nowrap;
}

.session-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 680;
}

.session-meta > span:not(.session-status) {
  white-space: nowrap;
}

.session-week,
.session-duration,
.session-status,
.session-resume-button,
.session-delete-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0.32rem 0.64rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.session-week {
  background: var(--surface-soft);
  color: var(--ink-soft);
}

.session-duration {
  border-color: color-mix(in srgb, var(--cyan) 22%, var(--line));
  background: var(--cyan-soft);
  color: var(--cyan);
}

.session-status {
  border-color: color-mix(in srgb, var(--green) 20%, var(--line));
  background: var(--green-soft);
  color: var(--green);
  font-weight: 760;
}

.session-status.status-in_progress {
  border-color: color-mix(in srgb, #a86105 20%, var(--line));
  background: var(--amber-soft);
  color: #a86105;
}

.session-status.status-interrupted {
  border-color: color-mix(in srgb, var(--coral) 20%, var(--line));
  background: var(--coral-soft);
  color: var(--coral);
}

.session-resume-button,
.session-delete-button {
  gap: 0.3rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.session-resume-button {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background: var(--primary);
  color: #ffffff;
}

.session-resume-button:hover {
  border-color: var(--primary);
  background: var(--primary-hover);
}

.session-resume-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent);
  outline-offset: 2px;
}

.session-delete-button {
  border-color: color-mix(in srgb, var(--coral) 24%, var(--line));
  background: var(--surface);
  color: var(--coral);
}

.session-delete-button:hover {
  border-color: color-mix(in srgb, var(--coral) 42%, var(--line));
  background: var(--coral-soft);
}

.session-delete-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--coral) 24%, transparent);
  outline-offset: 2px;
}

.session-resume-button > span:first-child,
.session-delete-button > span:first-child {
  font-size: 1rem;
  line-height: 1;
}

.recent-panel .empty-state,
.history-panel .empty-state {
  min-height: 190px;
}

.empty-icon {
  display: grid;
  width: 50px;
  height: 50px;
  margin: 0 auto 0.8rem;
  place-items: center;
  border-radius: 17px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.35rem;
}

/* Workout library */

.week-picker {
  display: grid;
  grid-template-columns: auto 76px;
  align-items: center;
  gap: 0.7rem;
  height: 48px;
  min-width: 190px;
  padding: 1px 1px 1px 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.week-picker > span {
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 720;
}

.week-picker select {
  min-height: 44px;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 790;
  outline: none;
}

.workout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

.workout-library-exercise-filters {
  margin-bottom: var(--space-5);
}

.workout-editor-create-action {
  display: flex;
  margin-top: var(--space-5);
  justify-content: center;
}

.workout-editor-list {
  display: grid;
  gap: 0.8rem;
}

.workout-editor-row {
  display: grid;
  min-width: 0;
  padding: 1rem 1.1rem;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.workout-editor-row-copy {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.workout-editor-row-copy > div {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.workout-editor-row-copy strong {
  overflow: hidden;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workout-editor-row-copy > div > span {
  padding: 0.25rem 0.48rem;
  border-radius: 999px;
  background: var(--session-soft);
  color: var(--session-color);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workout-editor-row-copy small {
  overflow: hidden;
  color: var(--ink-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workout-editor-row-meta,
.workout-editor-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.workout-editor-row-meta span {
  padding: 0.42rem 0.58rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.workout-editor-edit-button {
  display: inline-flex;
  min-height: 40px;
  padding: 0.45rem 0.68rem;
  gap: 0.4rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 740;
}

.workout-editor-edit-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.workout-editor-deleted-panel {
  margin: var(--space-5) 0 0;
}

@media (max-width: 800px) {
  .workout-editor-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .workout-editor-row-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 680px) {
  .workout-library-exercise-filters > .button {
    width: 100%;
  }

  .workout-editor-create-action .button {
    width: 100%;
  }
}

.workout-card {
  --session-color: var(--primary);
  --session-soft: var(--primary-soft);
  position: relative;
  isolation: isolate;
  display: flex;
  height: 100%;
  flex-direction: column;
  min-height: 390px;
  overflow: hidden;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--session-color) 17%, white);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 100% 0%, var(--session-soft), transparent 44%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}

.workout-card::after {
  content: none;
}

.workout-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.workout-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
}

.workout-card-title-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
}

.workout-card-title-row h2 {
  min-width: 0;
  margin: 0;
}

.workout-code {
  display: grid;
  min-width: 62px;
  height: 42px;
  padding-inline: 0.65rem;
  place-items: center;
  border-radius: 13px;
  background: var(--session-soft);
  color: var(--session-color);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--session-color) 8%, transparent);
}

.workout-day {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workout-card h2 {
  margin-bottom: 0.55rem;
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
  letter-spacing: -0.045em;
}

.workout-card > p {
  margin-bottom: 1.25rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.workout-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.workout-fact {
  --fact-color: var(--primary);
  --fact-soft: var(--primary-soft);
  --fact-line: rgb(98 91 246 / 15%);
  display: flex;
  min-height: 82px;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
  padding: 0.85rem;
  border: 1px solid var(--fact-line);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #ffffff 20%, var(--fact-soft) 135%);
  box-shadow: var(--shadow-xs);
}

.workout-fact-time {
  --fact-color: var(--coral);
  --fact-soft: var(--coral-soft);
  --fact-line: rgb(244 103 87 / 15%);
}

.workout-fact-stages {
  --fact-color: var(--primary);
  --fact-soft: var(--primary-soft);
  --fact-line: rgb(98 91 246 / 15%);
}

.workout-fact-approaches {
  --fact-color: var(--green);
  --fact-soft: var(--green-soft);
  --fact-line: rgb(19 173 120 / 15%);
}

.workout-fact strong {
  display: block;
  overflow: hidden;
  width: 100%;
  margin-top: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 830;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workout-fact > span:last-child {
  margin-top: 0.32rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 650;
}

.workout-exercise-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.workout-exercise-chips span,
.workout-exercise-more {
  max-width: 100%;
  overflow: hidden;
  padding: 0.38rem 0.62rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--session-soft);
  color: var(--session-color);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 690;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workout-exercise-extra {
  display: none;
}

.workout-exercise-chips.is-expanded .workout-exercise-extra {
  display: inline-flex;
}

.workout-exercise-more {
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--session-color) 22%, transparent);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.workout-exercise-more:hover {
  background: color-mix(in srgb, var(--session-soft) 72%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--session-color) 42%, transparent);
}

.workout-exercise-more:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--session-color) 24%, transparent);
  outline-offset: 2px;
}

.button-card-start {
  width: 100%;
  min-height: 52px;
  margin-top: auto;
  border-color: transparent;
  background: var(--session-color);
  color: #ffffff;
}

.button-card-start:hover {
  background: color-mix(in srgb, var(--session-color) 86%, #172033);
}

.button-card-start span {
  margin-left: auto;
  font-size: 1.2rem;
}

/* Statistics */

.stats-metrics {
  margin-bottom: var(--space-5);
}

.stats-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(360px, 0.78fr);
  gap: var(--space-5);
  align-items: stretch;
}
.chart-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.chart-panel {
  display: flex;
  flex-direction: column;
}

.calendar-panel-heading {
  align-items: center;
}

.calendar-panel-heading .calendar-panel-month-switcher {
  margin-inline: 0;
}

.activity-calendar-day {
  cursor: default;
}

.activity-calendar-day > small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.measurement-add-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  min-height: 38px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.measurement-add-button:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  transform: translateY(-1px);
}

.table-empty {
  padding-block: 1.5rem !important;
  color: var(--ink-muted);
  text-align: center !important;
}

.history-panel {
  margin-top: var(--space-5);
}

.history-panel .session-row {
  padding: 0.9rem;
  background: #ffffff;
}

.workout-history-panel {
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border-radius: var(--radius-xl);
}

.workout-history-panel .history-list {
  gap: 0;
}

.workout-history-panel .session-row {
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.workout-history-panel .session-row:last-child {
  border-bottom: 0;
}

.history-pagination {
  display: flex;
  margin-top: 1rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.history-page-button,
.history-pagination-gap {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 760;
}

.history-page-button {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}

.history-page-button:hover:not(:disabled):not(.is-current) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: var(--primary-soft);
  color: var(--primary);
}

.history-page-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 22%, transparent);
  outline-offset: 2px;
}

.history-page-button.is-current {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.history-page-button:disabled {
  cursor: default;
  opacity: 0.38;
}

.history-page-direction .material-symbols-rounded {
  font-size: 1.2rem;
}

.history-pagination-gap {
  color: var(--ink-muted);
}

/* Nutrition */

.nutrition-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.nutrition-header-actions .nutrition-view-menu {
  height: 48px;
  margin-bottom: 0;
  padding: 3px;
  border-radius: var(--radius-sm);
}

.nutrition-header-actions .nutrition-view-tab,
.sleep-dial-format .nutrition-view-tab {
  min-height: 40px;
  padding-block: 0.5rem;
}

.nutrition-view-menu {
  --sliding-tabs-pill-background: var(--surface);
  --sliding-tabs-pill-radius: 11px;
  --sliding-tabs-pill-shadow: var(--shadow-xs);
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  margin-bottom: 1rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-strong);
}

.nutrition-view-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 760;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.nutrition-view-tab:hover {
  color: var(--ink);
}

.nutrition-view-tab.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

.nutrition-view-menu.has-sliding-tabs .nutrition-view-tab.is-active {
  background: transparent;
  box-shadow: none;
}

.sliding-tabs-pill {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: var(--sliding-tabs-pill-radius);
  background: var(--sliding-tabs-pill-background);
  box-shadow: var(--sliding-tabs-pill-shadow);
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease),
    height var(--tabs-dur) var(--tabs-ease),
    opacity 160ms ease;
  pointer-events: none;
  will-change: transform, width, height;
}

.sliding-tab {
  transition:
    color var(--tabs-dur) var(--tabs-ease),
    background-color var(--tabs-dur) var(--tabs-ease),
    box-shadow var(--tabs-dur) var(--tabs-ease);
}

@media (prefers-reduced-motion: reduce) {
  .sliding-tabs-pill,
  .sliding-tab {
    transition: none !important;
  }
}

.nutrition-view-tab .material-symbols-rounded {
  font-size: 1.15rem;
}

.nutrition-month-panel {
  padding: 0;
}

#nutritionMonthView {
  --nutrition-blue: #2f67c7;
  --nutrition-blue-deep: #204a9f;
  --nutrition-blue-soft: #e8f1ff;
}

.nutrition-month-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.nutrition-month-toolbar h2 {
  margin: 0.25rem 0 0.3rem;
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
}

.nutrition-month-toolbar p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.nutrition-month-navigation {
  display: grid;
  grid-template-columns: 44px minmax(130px, auto) 44px auto;
  align-items: center;
  gap: 0.45rem;
}

.nutrition-month-navigation > strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.9rem;
  text-align: center;
  white-space: nowrap;
}

.nutrition-month-nav-button,
.nutrition-month-today-button {
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 760;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.nutrition-month-nav-button {
  width: 44px;
  padding: 0;
  font-size: 1.35rem;
}

.nutrition-month-today-button {
  padding-inline: 0.8rem;
  font-size: 0.78rem;
}

.nutrition-month-nav-button:hover:not(:disabled),
.nutrition-month-today-button:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.nutrition-month-nav-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.nutrition-month-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(360px, 0.78fr);
  gap: var(--space-5);
  align-items: stretch;
}

.nutrition-month-side {
  display: grid;
  min-width: 0;
  align-self: start;
  gap: 0.8rem;
}

.nutrition-month-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 50px;
  margin-bottom: 0.85rem;
}

.nutrition-month-card-heading span {
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nutrition-month-card-heading h3 {
  margin: 0.18rem 0 0;
  font-size: 1.08rem;
}

.nutrition-month-card-heading small {
  max-width: 25ch;
  padding-top: 0.2rem;
  color: var(--ink-muted);
  font-size: 0.72rem;
  text-align: right;
}

.nutrition-calendar-weekdays,
.nutrition-month-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.38rem;
}

.nutrition-calendar-weekdays {
  margin-bottom: 0.38rem;
}

.nutrition-calendar-weekdays span {
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 780;
  text-align: center;
}

.nutrition-calendar-spacer {
  min-height: 88px;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 52%, var(--surface-soft));
  opacity: 0.58;
}

.nutrition-calendar-day {
  --calendar-day-color: var(--ink-muted);
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 88px;
  align-content: space-between;
  justify-items: start;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: transform 160ms var(--ease-out), border-color 160ms ease, box-shadow 160ms ease;
}

.nutrition-calendar-day:hover {
  transform: translateY(-2px);
  border-color: var(--calendar-day-color);
  box-shadow: var(--shadow-sm);
}

.nutrition-calendar-day:focus-visible {
  outline: none;
}

.nutrition-calendar-day > span {
  color: var(--calendar-day-color);
  font-size: 0.75rem;
  font-weight: 820;
}

.nutrition-calendar-day > strong {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.nutrition-calendar-calories-compact {
  display: none;
}

.nutrition-calendar-day > small {
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.nutrition-calendar-day.is-below {
  --calendar-day-color: #96610a;
  border-color: color-mix(in srgb, var(--amber) 28%, var(--line));
  background: var(--amber-soft);
}

.nutrition-calendar-day.is-target {
  --calendar-day-color: var(--green);
  border-color: color-mix(in srgb, var(--green) 28%, var(--line));
  background: var(--green-soft);
}

.nutrition-calendar-day.is-over {
  --calendar-day-color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 26%, var(--line));
  background: var(--danger-soft);
}

#nutritionMonthCalendar .nutrition-calendar-day[data-nutrition-direction="below"],
#nutritionMonthCalendar .nutrition-calendar-day[data-nutrition-direction="over"] {
  --calendar-day-color: var(--nutrition-deviation-color);
  border-color: color-mix(in srgb, var(--calendar-day-color) 38%, var(--line));
  background: color-mix(in srgb, var(--calendar-day-color) 18%, var(--surface));
}

#nutritionMonthCalendar .nutrition-calendar-day[data-nutrition-direction="below"] > strong,
#nutritionMonthCalendar .nutrition-calendar-day[data-nutrition-direction="over"] > strong {
  color: color-mix(in srgb, var(--calendar-day-color) 78%, var(--ink));
}

#nutritionMonthCalendar .nutrition-calendar-day.is-target > strong {
  color: var(--green);
}

.nutrition-calendar-day.is-today {
  border-color: var(--primary);
  box-shadow: none;
}

.nutrition-calendar-day.is-today::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -1px;
  border: 3px solid var(--primary);
  border-radius: inherit;
  pointer-events: none;
}

#nutritionMonthCalendar .nutrition-calendar-day.is-selected {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 34%, var(--surface));
  box-shadow: none;
}

.nutrition-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  margin-top: 0.85rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.nutrition-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nutrition-calendar-legend i {
  width: 10px;
  height: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
}

.nutrition-calendar-legend i.is-below { border-color: var(--amber); background: var(--amber-soft); }
.nutrition-calendar-legend i.is-target { border-color: var(--green); background: var(--green-soft); }
.nutrition-calendar-legend i.is-over { border-color: var(--danger); background: var(--danger-soft); }

#nutritionMonthView .nutrition-calendar-legend i.is-below,
#nutritionMonthView .nutrition-calendar-legend i.is-over {
  width: 28px;
  border-color: transparent;
}

#nutritionMonthView .nutrition-calendar-legend i.is-below {
  background:
    linear-gradient(90deg, var(--danger-soft), var(--coral-soft), var(--amber-soft)) padding-box,
    linear-gradient(90deg, var(--danger), var(--coral), var(--amber)) border-box;
}

#nutritionMonthView .nutrition-calendar-legend i.is-over {
  background:
    linear-gradient(90deg, var(--amber-soft), var(--coral-soft), var(--danger-soft)) padding-box,
    linear-gradient(90deg, var(--amber), var(--coral), var(--danger)) border-box;
}

#nutritionMonthView.is-blue-below .nutrition-calendar-legend i.is-below {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--nutrition-blue-deep) 20%, var(--surface)), var(--nutrition-blue-soft), var(--cyan-soft)) padding-box,
    linear-gradient(90deg, var(--nutrition-blue-deep), var(--nutrition-blue), var(--cyan)) border-box;
}

.nutrition-month-chart-scroll {
  overflow: hidden;
}

.nutrition-month-chart {
  --month-chart-axis-height: 26px;
  --month-chart-inline-inset: 4px;
  position: relative;
  width: 100%;
  min-width: 0;
  height: 244px;
  overflow: hidden;
}

.nutrition-month-chart-zones {
  position: absolute;
  z-index: 0;
  inset: 0 var(--month-chart-inline-inset) var(--month-chart-axis-height);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.nutrition-month-chart-zones > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.nutrition-month-chart-zones .is-low,
.nutrition-month-chart-zones .is-over {
  background: color-mix(in srgb, var(--danger-soft) 72%, var(--surface));
}

.nutrition-month-chart-zones .is-below {
  background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface));
}

.nutrition-month-chart-zones .is-progress {
  background: color-mix(in srgb, var(--cyan-soft) 72%, var(--surface));
}

.nutrition-month-chart-zones .is-target {
  background: color-mix(in srgb, var(--green-soft) 78%, var(--surface));
}

#nutritionMonthChart .nutrition-month-chart-zones .is-below,
#nutritionMonthChart .nutrition-month-chart-zones .is-over {
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
}

#nutritionMonthChart .nutrition-month-chart-zones .is-target {
  border-block: 1px solid color-mix(in srgb, var(--green) 20%, var(--line));
  background: color-mix(in srgb, var(--green-soft) 70%, var(--surface));
}

#nutritionMonthChart .nutrition-month-chart-line-plot {
  position: absolute;
  z-index: 0;
  inset: 0 var(--month-chart-inline-inset) var(--month-chart-axis-height);
  display: grid;
  overflow: hidden;
  grid-template-rows: 22fr 20fr 16fr 20fr 22fr;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

#nutritionMonthChart .nutrition-month-chart-band {
  display: block;
}

#nutritionMonthChart .nutrition-month-chart-band.is-danger {
  background: color-mix(in srgb, var(--danger-soft) 72%, var(--surface));
}

#nutritionMonthChart .nutrition-month-chart-band.is-warning {
  background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface));
}

#nutritionMonthChart .nutrition-month-chart-band.is-target {
  background: color-mix(in srgb, var(--green-soft) 78%, var(--surface));
}

#nutritionMonthView.is-blue-below #nutritionMonthChart .nutrition-month-chart-band.is-warning.is-below {
  background: color-mix(in srgb, var(--cyan-soft) 72%, var(--surface));
}

#nutritionMonthView.is-blue-below #nutritionMonthChart .nutrition-month-chart-band.is-danger.is-below {
  background: color-mix(in srgb, var(--nutrition-blue-soft) 72%, var(--surface));
}

#nutritionMonthChart .nutrition-month-chart-target-line {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--green);
  opacity: 0.52;
  transform: translateY(-50%);
}

#nutritionMonthChart .nutrition-month-chart-line-days {
  position: absolute;
  z-index: 3;
  inset: 0 var(--month-chart-inline-inset);
  display: grid;
  grid-template-columns: repeat(var(--nutrition-days), minmax(0, 1fr));
}

#nutritionMonthChart .nutrition-month-chart-line-day {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--month-chart-axis-height);
  min-width: 0;
}

#nutritionMonthChart .nutrition-month-chart-line-day > span {
  position: relative;
  display: block;
  min-height: 0;
  border-radius: 6px;
  cursor: crosshair;
  transition: background 160ms ease;
}

#nutritionMonthChart .nutrition-month-chart-line-day i {
  --nutrition-point-size: clamp(10px, 2.2vw, 12px);

  position: absolute;
  z-index: 4;
  top: var(--nutrition-line-y);
  left: 50%;
  display: block;
  width: var(--nutrition-point-size);
  height: var(--nutrition-point-size);
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--nutrition-line-point-color);
  opacity: 0.96;
  transform: translate(-50%, -50%);
  transition:
    width 160ms var(--ease-out),
    height 160ms var(--ease-out),
    opacity 160ms ease;
}

#nutritionMonthChart.has-hovered-column .nutrition-month-chart-line-day:not(.is-hovered) i {
  opacity: 0.48;
}

#nutritionMonthChart .nutrition-month-chart-line-day.is-hovered > span {
  background: rgb(255 255 255 / 32%);
}

#nutritionMonthChart .nutrition-month-chart-line-day.is-hovered i {
  width: 15px;
  height: 15px;
  opacity: 1;
}

#nutritionMonthChart .nutrition-month-chart-line-day small {
  width: 100%;
  min-width: 0;
  overflow: visible;
  color: var(--ink-muted);
  font-size: 0.7rem;
  line-height: var(--month-chart-axis-height);
  text-align: center;
  white-space: nowrap;
}

#nutritionMonthChart .nutrition-month-chart-line-day:first-child small {
  text-align: left;
}

#nutritionMonthChart .nutrition-month-chart-line-day:last-child small {
  text-align: right;
}

.nutrition-month-chart-columns {
  position: absolute;
  z-index: 2;
  inset: 0 var(--month-chart-inline-inset);
  display: grid;
  grid-template-columns: repeat(var(--nutrition-days), minmax(0, 1fr));
  gap: clamp(1px, 0.2vw, 2px);
}

.nutrition-month-chart-column {
  --month-bar-color: var(--line-strong);
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--month-chart-axis-height);
  min-width: 0;
  align-items: end;
}

.nutrition-month-chart-column > span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
  padding-inline: 1px;
}

.nutrition-month-chart-column i {
  display: block;
  width: 100%;
  max-width: 14px;
  min-height: 0;
  border-radius: 5px 5px 2px 2px;
  background: var(--month-bar-color);
  transform-origin: bottom center;
  will-change: opacity, transform;
  transition:
    opacity 160ms ease,
    transform 160ms var(--ease-out),
    box-shadow 160ms ease;
}

.nutrition-month-chart.has-hovered-column .nutrition-month-chart-column:not(.is-hovered) i {
  opacity: 0.64;
}

.nutrition-month-chart-column.is-hovered {
  z-index: 3;
}

.nutrition-month-chart-column.is-hovered > span {
  border-radius: 7px 7px 3px 3px;
  background: rgb(255 255 255 / 32%);
}

.nutrition-month-chart-column.is-hovered i {
  opacity: 1;
  transform: scaleX(1.24) scaleY(1.025);
  box-shadow: 0 7px 14px color-mix(in srgb, var(--month-bar-color) 28%, transparent);
}

.nutrition-month-chart-column.is-below { --month-bar-color: var(--amber); }
.nutrition-month-chart-column.is-target { --month-bar-color: var(--green); }
.nutrition-month-chart-column.is-over { --month-bar-color: var(--danger); }

#nutritionMonthChart .nutrition-month-chart-column[data-nutrition-direction="below"],
#nutritionMonthChart .nutrition-month-chart-column[data-nutrition-direction="over"] {
  --month-bar-color: var(--nutrition-deviation-color);
}

.nutrition-month-chart-column small {
  width: 100%;
  min-width: 0;
  overflow: visible;
  color: var(--ink-muted);
  font-size: 0.7rem;
  line-height: var(--month-chart-axis-height);
  text-align: center;
  white-space: nowrap;
}

.nutrition-month-chart-column:first-child small {
  text-align: left;
}

.nutrition-month-chart-column:last-child small {
  text-align: right;
}

.month-chart-tooltip {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  max-width: min(280px, calc(100vw - 16px));
  padding: 0.48rem 0.68rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 9px;
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 10px 24px rgb(24 32 51 / 24%);
  font-size: 0.75rem;
  font-weight: 720;
  line-height: 1.25;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 11px));
  white-space: nowrap;
}

.month-chart-tooltip::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--ink);
  content: "";
  transform: translate(-50%, -55%) rotate(45deg);
}

.month-chart-tooltip.is-nutrition {
  --month-chart-tooltip-color: var(--ink);

  max-width: calc(100vw - 16px);
  padding: 0.55rem 0.72rem;
  border-color: color-mix(in srgb, var(--month-chart-tooltip-color) 68%, #ffffff);
  background: color-mix(in srgb, var(--month-chart-tooltip-color) 64%, var(--ink));
  text-align: center;
  white-space: normal;
}

.month-chart-tooltip.is-nutrition::after {
  background: color-mix(in srgb, var(--month-chart-tooltip-color) 64%, var(--ink));
}

.month-chart-tooltip__title,
.month-chart-tooltip__detail {
  display: block;
  white-space: nowrap;
}

.month-chart-tooltip__detail {
  margin-top: 0.22rem;
  color: rgb(255 255 255 / 84%);
  font-size: 0.7rem;
  font-weight: 650;
}

/* Walking */

.walking-month-side {
  display: grid;
  min-width: 0;
  align-self: start;
  gap: 0.8rem;
}

.compact-month-chart-card,
.nutrition-day-preview,
.walking-month-chart-card,
.walking-entry-panel {
  min-width: 0;
  padding: clamp(1.15rem, 2.2vw, 1.7rem);
}

/* Sleep */
.sleep-layout {
  align-items: start;
}

.sleep-entry-panel {
  align-self: start;
}

.sleep-entry-note,
.sleep-entry-status {
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.sleep-entry-note {
  margin: 0 0 1rem;
}

#sleepForm .sleep-fields {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sleep-fields > .sleep-duration-label,
.sleep-fields > .sleep-entry-status,
.sleep-fields > .button {
  grid-column: 1 / -1;
}

#sleepForm .sleep-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  grid-column: 1 / -1;
}

#sleepForm .sleep-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 0.65rem;
  width: 100%;
  max-width: 460px;
  justify-self: center;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: center;
}

.sleep-detail {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 0.35rem;
  padding: 0.72rem 0.5rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--sleep-time-color, var(--primary)) 18%, var(--surface));
  background: oklch(from var(--sleep-time-color, var(--primary)) 94% 0.045 h);
}

.sleep-detail-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
}

.sleep-detail strong {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.sleep-dial {
  position: relative;
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 420px);
  margin-block: -1.25rem;
  aspect-ratio: 1;
}

.sleep-dial > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sleep-dial-track { fill: none; stroke: color-mix(in srgb, var(--line) 45%, var(--surface)); stroke-width: 18; }
.sleep-dial-track.is-sky { stroke: none; }
.sleep-dial-sky { opacity: 0.32; filter: saturate(1.15); }
.sleep-dial-sky > path { fill: none; stroke-width: 18; stroke-linecap: butt; }
.sleep-dial-stars { pointer-events: none; }
.sleep-dial-star {
  fill: #fff;
  opacity: var(--star-opacity, 0.92);
}
.sleep-dial-star.is-steady { opacity: var(--star-opacity, 0.9); }
.sleep-dial-star.is-twinkle {
  animation: sleep-dial-star-twinkle var(--star-duration, 5s) ease-in-out var(--star-delay, 0s) infinite;
}
.sleep-dial-star.is-shimmer {
  animation: sleep-dial-star-shimmer var(--star-duration, 3.6s) ease-in-out var(--star-delay, 0s) infinite alternate;
}
@keyframes sleep-dial-star-twinkle {
  0%, 86% { opacity: var(--star-opacity, 0.9); }
  89%, 92% { opacity: 0; }
  96%, 100% { opacity: var(--star-opacity, 0.9); }
}
@keyframes sleep-dial-star-shimmer {
  0% { fill: #fff; opacity: var(--star-opacity, 0.9); }
  48% { fill: #eaf2ff; opacity: var(--star-bright-opacity, 0.96); }
  100% { fill: #f2edff; opacity: var(--star-opacity, 0.9); }
}
.sleep-dial-arc { fill: none; stroke-width: 18; stroke-linecap: butt; }
.sleep-dial-ring-hour { stroke: var(--surface); stroke-width: 1.5; stroke-opacity: 0.6; }
.sleep-dial-tick { stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; }
.sleep-dial-tick.is-hour { stroke: var(--ink-muted); stroke-width: 2; }
.sleep-dial-month-marks { pointer-events: none; }
.sleep-dial-month-mark {
  stroke-width: var(--sleep-month-mark-width, 2.25);
  stroke-linecap: round;
  stroke-opacity: var(--sleep-month-mark-opacity, 0.34);
}
.sleep-dial-hour {
  fill: var(--ink-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
}
.sleep-dial-marker { stroke: var(--surface); stroke-width: 3; }

@media (prefers-reduced-motion: reduce) {
  .sleep-dial-star.is-twinkle,
  .sleep-dial-star.is-shimmer {
    animation: none;
    opacity: var(--star-opacity, 0.9);
  }
}

.sleep-solar-event { color: var(--amber); }
.sleep-solar-event.is-sunset { color: #8a729d; }
.sleep-solar-time {
  fill: currentColor;
  font-family: inherit;
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  dominant-baseline: central;
}

.sleep-dial-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  pointer-events: none;
}

.sleep-dial-center strong {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--line) 32%, var(--surface));
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#sleepSummaryButton.is-empty #sleepSummaryDuration {
  padding: 0;
  background: transparent;
}

.sleep-dial-center .metric-unit {
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
}

.sleep-dial-center > span {
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
}

.sleep-dial-duration-label { display: none; }

.sleep-dial-center-time {
  position: absolute;
  left: 50%;
  display: grid;
  width: 104px;
  box-sizing: border-box;
  justify-items: center;
  gap: 2px;
  padding: 5px 10px 6px;
  transform: translateX(-50%);
  border-radius: 10px;
  background: transparent;
  color: var(--sleep-time-color, var(--primary));
  line-height: 1;
}

.sleep-dial-center-time.is-bedtime { top: 32%; }
.sleep-dial-center-time.is-wake { bottom: 32%; }

.sleep-dial-center-time small {
  color: var(--sleep-time-color, var(--primary));
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
}

.sleep-dial-center-time b {
  color: var(--sleep-time-color, var(--primary));
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.sleep-dial-center-time.is-wake small,
.sleep-dial-center-time.is-wake b {
  color: color-mix(in srgb, var(--sleep-time-color, var(--primary)) 55%, #075f94);
  color: oklch(from var(--sleep-time-color, var(--primary)) 56% 0.14 h);
}


.sleep-dial-format {
  display: grid;
  width: max-content;
  margin: 0;
}

.sleep-summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

#sleepForm .sleep-summary > .sleep-detail {
  display: none;
}

.sleep-fields input {
  min-width: 0;
}

.sleep-duration-label {
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 720;
}

.sleep-entry-status {
  margin: 0.3rem 0;
}

.nutrition-month-metrics .metric-card > strong,
.sleep-metrics .metric-card > strong,
.activity-hub-metrics .metric-card > strong {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.nutrition-month-metrics .metric-unit,
.activity-hub-metrics .metric-unit,
.sleep-metrics .metric-unit {
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
}

@media (min-width: 761px) and (min-height: 501px), (min-width: 951px) {
  .nutrition-month-metrics .metric-card,
  .sleep-metrics .metric-card,
  .activity-hub-metrics .metric-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    min-height: 0;
    align-content: start;
    gap: 8px;
  }

  .nutrition-month-metrics .metric-icon,
  .sleep-metrics .metric-icon,
  .activity-hub-metrics .metric-icon {
    width: 36px;
    height: 36px;
    min-height: 0;
    margin-bottom: 0;
    padding: 6px;
    grid-column: 2;
    grid-row: 1;
    border-radius: 11px;
    font-size: 1.15rem;
  }

  .nutrition-month-metrics .metric-icon svg,
  .sleep-metrics .metric-icon svg,
  .activity-hub-metrics .metric-icon svg {
    width: 24px;
    height: 24px;
  }

  .nutrition-month-metrics .metric-card > strong,
  .sleep-metrics .metric-card > strong,
  .activity-hub-metrics .metric-card > strong {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    white-space: normal;
    overflow-wrap: normal;
  }

  .nutrition-month-metrics .metric-card > span:last-child,
  .sleep-metrics .metric-card > span:last-child,
  .activity-hub-metrics .metric-card > span:last-child {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 13px;
    line-height: 1.45;
  }
}

.sleep-calendar-day.is-below {
  background: var(--amber-soft);
}

.sleep-calendar-day.is-target {
  background: var(--green-soft);
}

.sleep-calendar-day.is-progress {
  --calendar-day-color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--line));
  background: var(--cyan-soft);
}

.sleep-calendar-day.is-selected {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 34%, var(--surface));
  box-shadow: none;
}

.sleep-calendar-day:disabled {
  opacity: 0.4;
  cursor: default;
}

.walking-month-summary {
  margin-block: 0 var(--space-4);
}

.month-calendar-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-inline: auto;
}

.month-calendar-switcher h3 {
  min-width: 128px;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.month-calendar-switcher .nutrition-month-nav-button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 10px;
  font-size: 1.2rem;
}

.walking-entry-panel {
  padding: clamp(1.15rem, 2.2vw, 1.7rem);
}

.walking-entry-heading {
  min-height: 0;
  margin-bottom: 0.55rem;
}

.walking-entry-heading h3 {
  margin: 0.18rem 0 0;
  font-size: 1.08rem;
}

.walking-entry-heading small {
  max-width: none;
  text-align: right;
  white-space: nowrap;
}

.walking-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) minmax(190px, 1fr) auto auto;
  gap: 0.75rem;
  align-items: end;
}

.walking-entry-panel .walking-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.walking-form label {
  display: grid;
  gap: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 720;
}

.walking-form input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  outline: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.walking-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(90 83 237 / 12%);
}

.walking-entry-panel .walking-form input,
.walking-entry-panel .walking-form .button {
  min-height: 44px;
}

.walking-entry-panel .walking-form .button {
  width: 100%;
  height: 44px;
  padding-block: 0;
  padding-inline: 0.75rem;
}

#walkingForm:has(#deleteWalkingButton.is-hidden) > .button-primary {
  grid-column: 1 / -1;
}

.walking-month-summary article:nth-child(1) {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--line));
  background: var(--primary-soft);
}

.walking-month-summary article:nth-child(2) {
  border-color: color-mix(in srgb, var(--cyan) 16%, var(--line));
  background: var(--cyan-soft);
}

.walking-month-summary article:nth-child(3) {
  border-color: color-mix(in srgb, var(--amber) 16%, var(--line));
  background: var(--amber-soft);
}

.walking-month-summary article:nth-child(4) {
  border-color: color-mix(in srgb, var(--green) 16%, var(--line));
  background: var(--green-soft);
}

.walking-calendar-day.is-progress {
  --calendar-day-color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--line));
  background: var(--cyan-soft);
}

#walkingMonthCalendar .walking-calendar-day.is-selected {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 34%, var(--surface));
  box-shadow: none;
}

.walking-calendar-day.is-low {
  --calendar-day-color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
  background: var(--danger-soft);
}

.nutrition-calendar-legend i.is-low {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.nutrition-calendar-legend i.is-progress {
  border-color: var(--cyan);
  background: var(--cyan-soft);
}

.compact-month-chart-card,
.walking-month-chart-card {
  align-self: start;
}

.day-summary-list {
  display: grid;
  margin-top: 0;
}

.nutrition-day-preview-macro-values {
  display: flex !important;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.2rem 0.6rem !important;
}

.nutrition-day-preview-note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nutrition-day-preview-edit {
  cursor: pointer;
}

.nutrition-day-preview-arrow {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 1rem;
}

.compact-month-chart-card .nutrition-month-card-heading,
.walking-month-chart-card .nutrition-month-card-heading {
  min-height: 0;
  align-items: center;
  margin-bottom: 0.55rem;
}

.walking-month-chart-column.is-low {
  --month-bar-color: var(--danger);
}

.walking-month-chart-column.is-progress {
  --month-bar-color: var(--cyan);
}

.nutrition-panel {
  padding: 0;
}

.nutrition-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 0 var(--space-5);
}

.nutrition-summary article {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
  min-width: 0;
  min-height: 150px;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--nutrition-goal-color) 16%, var(--line));
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  container-type: inline-size;
}

.nutrition-summary article:nth-child(1) { --nutrition-goal-color: var(--primary); background: var(--primary-soft); }
.nutrition-summary article:nth-child(2) { --nutrition-goal-color: var(--cyan); background: var(--cyan-soft); }
.nutrition-summary article:nth-child(3) { --nutrition-goal-color: var(--coral); background: var(--coral-soft); }
.nutrition-summary article:nth-child(4) { --nutrition-goal-color: var(--green); background: var(--green-soft); }

.nutrition-summary article > span {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 720;
}

.nutrition-summary article > strong {
  overflow: hidden;
  font-size: clamp(1.4rem, 2.7vw, 2.1rem);
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.nutrition-summary article > small {
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.nutrition-share {
  position: absolute;
  top: 0.82rem;
  right: 0.95rem;
  display: grid;
  justify-items: end;
  gap: 0.12rem;
  line-height: 1;
}

.nutrition-share strong {
  color: var(--nutrition-goal-color);
  font-size: 0.88rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.nutrition-share small {
  color: var(--ink-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.nutrition-goal {
  grid-column: 1 / -1;
  align-self: end;
  min-width: 0;
  margin-top: 0.45rem;
}

.nutrition-goal-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.38rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 720;
  line-height: 1.35;
}

.nutrition-goal-label span {
  min-width: 0;
}

.nutrition-goal-status {
  white-space: nowrap;
}

.nutrition-goal-status-compact {
  display: none;
}

@container (max-width: 320px) {
  .nutrition-goal.is-below .nutrition-goal-status-full {
    display: none;
  }

  .nutrition-goal.is-below .nutrition-goal-status-compact {
    display: inline;
  }
}

.nutrition-goal-label strong {
  flex: none;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.nutrition-goal-track {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 2fr) minmax(0, 1fr);
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
  box-shadow: inset 0 0 0 1px rgb(13 35 67 / 12%);
}

.nutrition-goal.is-reached .nutrition-goal-label span {
  color: var(--green);
}

.nutrition-goal.is-over .nutrition-goal-label span {
  color: var(--danger);
}

.nutrition-goal-segment {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: transparent;
}

.nutrition-goal-track i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--nutrition-goal-color) 76%, white), var(--nutrition-goal-color) 36%);
  transition: width 280ms ease;
}

.nutrition-goal-segment.is-range i {
  background: var(--nutrition-goal-color);
}

.nutrition-goal-segment.is-overflow i {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 48%, var(--ink)) 0 3px, var(--danger) 3px 6px);
}

.nutrition-goal-segment.is-range b {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 50%;
  z-index: 1;
  width: 2px;
  background: rgb(13 35 67 / 58%);
  transform: translateX(-1px);
}

.nutrition-goal-segment.is-range::before,
.nutrition-goal-segment.is-range::after {
  position: absolute;
  top: 1px;
  bottom: 1px;
  z-index: 1;
  width: 1px;
  background: rgb(13 35 67 / 58%);
  content: "";
}

.nutrition-goal-segment.is-range::before { left: 0; }
.nutrition-goal-segment.is-range::after { right: 0; }

.nutrition-goal.has-no-tolerance .nutrition-goal-track {
  grid-template-columns: minmax(0, 1fr);
}

.nutrition-goal.has-no-tolerance .nutrition-goal-segment.is-range,
.nutrition-goal.has-no-tolerance .nutrition-goal-segment.is-overflow {
  display: none;
}

.nutrition-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.15rem;
}

.nutrition-chart-card {
  min-width: 0;
  min-height: 270px;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.nutrition-chart-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.nutrition-chart-heading span {
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nutrition-chart-heading h3 {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
}

.nutrition-chart-heading > small {
  padding-top: 0.2rem;
  color: var(--ink-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.nutrition-macro-chart {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(0.8rem, 2vw, 1.35rem);
  align-items: center;
  min-height: 185px;
}

.nutrition-donut {
  position: relative;
  display: grid;
  width: 150px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--green) 0 var(--protein-end),
    var(--coral) var(--protein-end) var(--fat-end),
    var(--cyan) var(--fat-end) 100%
  );
  box-shadow: 0 14px 28px rgb(29 38 64 / 9%);
}

.nutrition-donut::before {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--surface);
  content: "";
  box-shadow: inset 0 0 0 1px var(--line);
}

.nutrition-donut > div {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

.nutrition-donut strong {
  color: var(--ink);
  font-size: 1.45rem;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.nutrition-donut small {
  color: var(--ink-muted);
  font-size: 0.72rem;
}

.nutrition-macro-legend {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nutrition-macro-legend li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 0.45rem;
  padding: 0.52rem 0.6rem;
  border-radius: 11px;
  background: var(--surface);
}

.nutrition-macro-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--green);
}

.nutrition-macro-legend .macro-fat i { background: var(--coral); }
.nutrition-macro-legend .macro-carbs i { background: var(--cyan); }

.nutrition-macro-legend span,
.nutrition-macro-legend strong {
  font-size: 0.78rem;
}

.nutrition-macro-legend small {
  grid-column: 2 / -1;
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.nutrition-meal-chart {
  min-height: 185px;
  overflow-x: auto;
}

.nutrition-meal-bars {
  display: grid;
  grid-template-columns: repeat(var(--meal-count), minmax(58px, 1fr));
  gap: clamp(0.45rem, 1.4vw, 0.85rem);
  min-height: 185px;
}

.nutrition-meal-bar {
  display: grid;
  grid-template-rows: 20px 130px 26px;
  gap: 0.3rem;
  min-width: 58px;
  justify-items: center;
}

.nutrition-meal-bar > strong {
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.nutrition-meal-bar > span {
  position: relative;
  width: min(100%, 50px);
  height: 100%;
  border-radius: 12px 12px 4px 4px;
  background: var(--surface-strong);
}

.nutrition-meal-bar i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 4px;
  border-radius: inherit;
  background: linear-gradient(180deg, #8b84ff, var(--primary));
  box-shadow: 0 7px 16px rgb(98 91 246 / 20%);
}

.nutrition-meal-bar > small {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.7rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nutrition-chart-empty {
  display: grid;
  min-height: 185px;
  place-items: center;
  align-content: center;
  gap: 0.45rem;
  color: var(--ink-muted);
  text-align: center;
}

.nutrition-chart-empty .material-symbols-rounded {
  color: var(--primary);
  font-size: 2rem;
  opacity: 0.72;
}

.nutrition-chart-empty p {
  max-width: 28ch;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
}

.nutrition-list {
  display: grid;
  gap: 0.6rem;
}

.nutrition-add-entry {
  width: 100%;
  min-height: 94px;
  margin-top: var(--space-5);
  border-style: dashed;
  background: transparent;
  color: var(--ink-soft);
}

.nutrition-add-entry:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  transform: none;
}

.nutrition-add-entry:active {
  transform: none;
}

.nutrition-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.8rem;
  min-height: 94px;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 160ms ease;
}

.nutrition-entry-copy {
  min-width: 0;
}

.nutrition-entry:hover {
  border-color: var(--line-strong);
}

.nutrition-entry-icon {
  display: grid;
  width: 42px;
  height: 42px;
  align-self: center;
  place-items: center;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.25rem;
}

.nutrition-entry strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.22rem;
  margin-bottom: 0.25rem;
  font-size: 0.92rem;
}

.nutrition-entry-actions {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 0.1rem;
}

.nutrition-composition-button,
.nutrition-edit {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-muted);
}

.nutrition-composition-button > svg {
  width: 20px;
  height: 20px;
}

.nutrition-edit > .material-symbols-rounded {
  font-size: 1.1rem;
}

.nutrition-composition-button:hover,
.nutrition-edit:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.nutrition-entry-time {
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 560;
}

.nutrition-entry p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.nutrition-entry p span {
  color: var(--ink-muted);
}

.nutrition-entry p .nutrition-entry-calories,
.nutrition-entry p .nutrition-entry-protein,
.nutrition-entry p .nutrition-entry-fat,
.nutrition-entry p .nutrition-entry-carbs {
  font-weight: 720;
}

.nutrition-entry p .nutrition-entry-calories {
  color: var(--primary);
}

.nutrition-entry p .nutrition-entry-protein {
  color: var(--cyan);
}

.nutrition-entry p .nutrition-entry-fat {
  color: var(--coral);
}

.nutrition-entry p .nutrition-entry-carbs {
  color: var(--green);
}

.nutrition-entry-progress {
  display: grid;
  grid-template-columns: minmax(90px, 190px) auto;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.48rem;
}

.nutrition-entry-progress > span {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
}

.nutrition-entry-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b84ff, var(--primary));
}

.nutrition-entry-progress small {
  color: var(--ink-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.nutrition-products-list {
  display: grid;
  gap: 0.48rem;
  margin-top: 0.58rem;
}

.nutrition-product-item {
  display: grid;
  gap: 0.15rem;
  padding: 0.56rem 0.65rem;
  border-radius: 10px;
  background: var(--surface-soft);
}

.nutrition-product-item > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.nutrition-product-item strong {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 680;
  overflow-wrap: anywhere;
}

.nutrition-product-item span,
.nutrition-product-item small {
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.nutrition-delete {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 1.1rem;
}

.nutrition-delete:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.nutrition-empty {
  display: grid;
  min-height: 210px;
  place-items: center;
  align-content: center;
  gap: 0.4rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  text-align: center;
}

.nutrition-empty > .material-symbols-rounded {
  margin-bottom: 0.25rem;
  color: var(--primary);
  font-size: 2rem;
}

.nutrition-empty p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
}

/* Actual settings */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.settings-column {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--space-5);
}

.settings-card {
  height: auto;
  min-width: 0;
  overflow: hidden;
  padding: 1.35rem;
}

.settings-card-wide {
  grid-column: 1 / -1;
}

.nutrition-target-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
}

.nutrition-target-settings .field-row {
  border-top: 1px solid var(--line);
}

.nutrition-target-settings .field-row:nth-child(-n + 2) {
  border-top: 0;
}

.settings-card-personalization .field-row {
  min-height: 60px;
  padding-block: 0.6rem;
}

.settings-data-list {
  display: grid;
}

.settings-card-analysis {
  padding: 1.15rem;
}

.settings-card-analysis .settings-card-heading {
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.settings-card-profile .settings-card-heading,
.settings-card-nutrition .settings-card-heading,
.settings-card-nutrition-tolerances .settings-card-heading {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.profile-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.profile-actions .button {
  min-height: 36px;
  padding: 0.5rem 0.65rem;
  font-size: 0.8rem;
}

.profile-edit-button {
  width: 36px;
  height: 36px;
  border-color: transparent;
  background: transparent;
  color: var(--ink-muted);
  box-shadow: none;
}

.profile-edit-button:hover {
  background: var(--surface-soft);
  color: var(--primary);
}

.profile-value {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--ink);
  font: inherit;
}

#profileForm:not(.is-editing) input,
#profileForm:not(.is-editing) select,
#profileForm.is-editing .profile-value,
#nutritionTargetsForm:not(.is-editing) input,
#nutritionTargetsForm.is-editing .profile-value,
#nutritionTolerancesForm:not(.is-editing) input,
#nutritionTolerancesForm.is-editing .profile-value {
  display: none;
}

@media (max-width: 600px) {
  .settings-card-profile:has(#profileForm.is-editing) .profile-actions,
  .settings-card-nutrition:has(#nutritionTargetsForm.is-editing) .profile-actions,
  .settings-card-nutrition-tolerances:has(#nutritionTolerancesForm.is-editing) .profile-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
  }
}

.settings-card-analysis form {
  display: grid;
  gap: 0.75rem;
}

.settings-card-analysis {
  min-width: 0;
}

.account-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.account-detail {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
}

.account-detail small {
  color: var(--ink-muted);
  font-size: 0.72rem;
}

.account-detail strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-card-account .button-logout {
  margin-top: 1rem;
}

.analysis-periods {
  display: flex;
  min-width: 0;
  max-width: 100%;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 3px 2px 0.5rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.analysis-period-chip {
  display: grid;
  flex: 0 0 auto;
  min-width: 100px;
  min-height: 62px;
  gap: 0.2rem;
  align-content: center;
  justify-items: start;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink-soft);
  text-align: left;
  scroll-snap-align: start;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.analysis-period-chip > span {
  font-size: 0.84rem;
  font-weight: 700;
}

.analysis-period-chip > small {
  color: var(--ink-muted);
  font-size: 0.73rem;
}

.analysis-period-chip:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.analysis-period-chip.is-active {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--line));
  background: var(--primary-soft);
  color: var(--primary);
}

.analysis-period-chip.is-active > small {
  color: var(--primary);
}

.analysis-period-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.analysis-period-more {
  border-style: dashed;
}

.settings-data-section {
  display: grid;
  justify-items: start;
  gap: 0.7rem;
  padding-block: 0.8rem;
}

.settings-data-section + .settings-data-section {
  border-top: 1px solid var(--line);
}

.settings-data-copy {
  display: grid;
  gap: 0.2rem;
}

.settings-data-copy strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.settings-data-copy small {
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.settings-data-section > .button {
  justify-self: start;
}

.settings-card-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 0.7rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.settings-card-nutrition .settings-card-heading,
.settings-card-nutrition-tolerances .settings-card-heading,
.settings-card-profile .settings-card-heading {
  border-bottom: 0;
}

.settings-card-heading h2 {
  margin-bottom: 0.2rem;
  font-size: 1.2rem;
}

.settings-card-heading p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.settings-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1rem;
  font-weight: 820;
}

.settings-icon > svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.settings-icon-coral {
  background: var(--coral-soft);
  color: var(--coral);
}

.settings-icon-mint {
  background: var(--green-soft);
  color: var(--green);
}

.settings-icon-sky {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.field-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 76px;
  padding-block: 0.75rem;
}

.field-row + .field-row {
  border-top: 1px solid var(--line);
}

.field-row > span:first-child {
  display: grid;
  min-width: 0;
}

.field-row strong {
  font-size: 0.94rem;
}

.field-row small {
  margin-top: 0.18rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.field-row input:not(.switch-input):not([type="range"]),
.field-row select,
.field-row .profile-value {
  width: min(48%, 190px);
  min-height: 44px;
  padding: 0.62rem 0.72rem;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface-soft);
  outline: none;
}

.field-row input:focus,
.field-row select:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.switch-input {
  position: absolute;
  right: 0;
  width: 50px;
  height: 30px;
  margin: 0;
  opacity: 0;
}

.field-row > .switch {
  position: relative;
  display: block;
  width: 50px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.field-row > .switch::after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 7px rgb(20 30 50 / 22%);
  content: "";
  transition: transform 220ms var(--ease-spring);
}

.switch-input:checked + .switch {
  background: var(--primary);
}

.switch-input:checked + .switch::after {
  transform: translateX(20px);
}

.switch-input:focus-visible + .switch {
  box-shadow: var(--ring);
}

.field-row-slider {
  align-items: flex-end;
}

.field-row input[type="range"] {
  width: min(48%, 210px);
  height: 6px;
  margin-block: 0.6rem;
  border-radius: var(--radius-pill);
  appearance: none;
  background: var(--line);
  accent-color: var(--primary);
}

.field-row input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  appearance: none;
  background: var(--primary);
  box-shadow: 0 2px 10px rgb(98 91 246 / 32%);
}

.field-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 2px 10px rgb(98 91 246 / 32%);
}

.data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.settings-data-section .data-actions {
  margin-top: 0;
}

.settings-card-backup .data-actions > .button {
  flex: 1;
}

.file-button {
  position: relative;
  overflow: hidden;
}

.file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.settings-card-heading code {
  padding: 0.14rem 0.34rem;
  border-radius: 6px;
  background: var(--surface-strong);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

/* Actual dialogs */

.modal-backdrop:not(.is-hidden) {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  position: relative;
  width: min(100%, 560px);
  max-height: min(88dvh, 780px);
  overflow: auto;
  padding: clamp(1.35rem, 3.5vw, 2rem);
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(0.985);
  animation: actual-modal-enter 260ms var(--ease-out) both;
}

.modal-card > h2 {
  margin-bottom: 0.45rem;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  letter-spacing: -0.04em;
}

.modal-card > p {
  margin-bottom: 1.25rem;
  color: var(--ink-soft);
}

.modal-close {
  position: absolute;
  z-index: 2;
  top: 0.9rem;
  right: 0.9rem;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 1.4rem;
  line-height: 1;
}

.modal-close:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

.start-modal-card {
  width: min(100%, 620px);
}

.mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block: 1.25rem;
}

.mode-option {
  position: relative;
  display: grid;
  gap: 0.25rem;
  min-height: 142px;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  transition: border-color 170ms ease, background-color 170ms ease, box-shadow 170ms ease;
}

.mode-option:hover {
  border-color: var(--line-strong);
}

.mode-option.is-selected {
  border-color: rgb(98 91 246 / 38%);
  background: var(--primary-soft);
  box-shadow: 0 0 0 3px rgb(98 91 246 / 8%);
}

.mode-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mode-option-icon {
  display: grid;
  width: 36px;
  height: 36px;
  margin-bottom: 0.35rem;
  place-items: center;
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--ink-muted);
}

.mode-option.is-selected .mode-option-icon {
  background: var(--primary);
  color: #ffffff;
}

.mode-option strong {
  font-size: 1rem;
}

.mode-option small {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.start-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}

.start-checklist span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.62rem;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: #087653;
  font-size: 0.78rem;
  font-weight: 710;
}

.start-checklist span::before {
  content: "check";
  font-family: "Material Symbols Rounded";
  font-size: 0.9rem;
  font-feature-settings: "liga";
  font-weight: 400;
  line-height: 1;
  -webkit-font-feature-settings: "liga";
}

.modal-card .form-grid {
  margin-block: 1.25rem;
}

.modal-card.nutrition-modal-card {
  width: min(100%, 680px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nutrition-modal-card > h2 {
  flex-shrink: 0;
  padding-right: 2rem;
}

.nutrition-modal-card .nutrition-form-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-bottom: 0;
  padding: 4px;
  gap: 0.8rem;
}

.nutrition-macro-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}

.nutrition-modal-card .form-grid #nutritionLineInput {
  height: 76px;
  min-height: 76px;
  resize: none;
  overflow-y: auto;
}

.modal-card.nutrition-composition-card {
  width: min(100%, 640px);
  padding-top: 1rem;
}

.nutrition-composition-card > h2 {
  margin-bottom: 0.25rem;
}

.nutrition-composition-card > p {
  margin-bottom: 1rem;
  font-size: 0.84rem;
}

.nutrition-composition-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.nutrition-composition-total {
  --composition-total-color: var(--primary);
  --composition-total-background: var(--primary-soft);

  min-width: 0;
  padding: 0.7rem 0.75rem;
  border-radius: 12px;
  background: var(--composition-total-background);
}

.nutrition-composition-total.is-protein {
  --composition-total-color: var(--cyan);
  --composition-total-background: var(--cyan-soft);
}

.nutrition-composition-total.is-fat {
  --composition-total-color: var(--coral);
  --composition-total-background: var(--coral-soft);
}

.nutrition-composition-total.is-carbs {
  --composition-total-color: var(--green);
  --composition-total-background: var(--green-soft);
}

.nutrition-composition-total > small {
  display: block;
  margin-bottom: 0.22rem;
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 680;
}

.nutrition-composition-total > p {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 0;
  color: var(--composition-total-color);
  font-variant-numeric: tabular-nums;
}

.nutrition-composition-total strong {
  font-size: 1.2rem;
  line-height: 1;
}

.nutrition-composition-total span {
  font-size: 0.68rem;
  font-weight: 650;
}

.nutrition-composition-products {
  gap: 0.6rem;
  margin-top: 1rem;
}

.nutrition-composition-products .nutrition-product-item {
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--line);
}

.nutrition-composition-products .nutrition-product-item strong {
  font-size: 0.84rem;
}

.nutrition-composition-products .nutrition-product-item span,
.nutrition-composition-products .nutrition-product-item small {
  font-size: 0.76rem;
}

.nutrition-composition-products .nutrition-product-macros > span {
  font-weight: 720;
}

.nutrition-composition-products .nutrition-product-macros > span[aria-hidden="true"] {
  color: var(--ink-muted);
  font-weight: 400;
}

.nutrition-composition-products .nutrition-product-calories {
  color: var(--primary);
}

.nutrition-composition-products .nutrition-product-protein {
  color: var(--cyan);
}

.nutrition-composition-products .nutrition-product-fat {
  color: var(--coral);
}

.nutrition-composition-products .nutrition-product-carbs {
  color: var(--green);
}

.nutrition-line-import {
  display: grid;
  gap: 0.42rem;
}

.modal-actions.nutrition-form-actions {
  grid-template-columns: 1fr;
  flex-shrink: 0;
  padding-top: 0.85rem;
  margin-top: 0.85rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.nutrition-form-actions:has(#deleteNutritionButton:not(.is-hidden)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.nutrition-line-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.nutrition-line-status {
  color: var(--ink-muted);
  font-size: 0.77rem;
  line-height: 1.4;
}

.nutrition-line-status.is-success {
  color: var(--green);
}

.nutrition-line-status.is-warning {
  color: var(--amber);
}

.nutrition-line-status.is-error {
  color: var(--danger);
}

.nutrition-items-preview {
  margin-top: 0.35rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.nutrition-items-preview summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 650;
}

.nutrition-items-preview details[open] > summary {
  margin-bottom: 0.6rem;
}

.nutrition-items-preview summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.nutrition-items-preview .nutrition-products-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-card .form-grid label,
.completion-fields label {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

.modal-card .form-grid label > span,
.completion-fields label > span {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 720;
}

.modal-card .form-grid input,
.modal-card .form-grid select,
.modal-card .form-grid textarea,
.completion-fields input,
.completion-fields textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.68rem 0.78rem;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface-soft);
  outline: none;
}

.modal-card .form-grid textarea,
.completion-fields textarea {
  min-height: 84px;
  resize: vertical;
}

.modal-card .form-grid input:focus,
.modal-card .form-grid select:focus,
.modal-card .form-grid textarea:focus,
.completion-fields input:focus,
.completion-fields textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.form-span {
  grid-column: 1 / -1;
}

.confirm-card {
  width: min(100%, 460px);
  text-align: center;
}

.confirm-symbol {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 1rem;
  place-items: center;
  border-radius: 21px;
  background: var(--coral-soft);
  color: var(--coral);
  font-size: 1.8rem;
  font-weight: 820;
}

.modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1.25rem;
}

/* Full-screen actual workout markup */

body.workout-open {
  overflow: hidden;
}

.workout-screen {
  --phase-color: #625bf6;
  --phase-strong: #423bb8;
  --phase-soft: #e8e6ff;
  --phase-bg: #f7f7ff;
  --phase-glow: rgb(98 91 246 / 23%);
  --phase-wash: rgb(98 91 246 / 10%);
  --countdown-color: var(--phase-color);
  --countdown-strong: var(--phase-strong);
  --countdown-glow: var(--phase-glow);
  --workout-progress-color: #625bf6;
  --workout-progress-strong: #423bb8;
  --workout-progress-soft: #e8e6ff;
  --workout-progress-glow: rgb(98 91 246 / 20%);
  --workout-technique-color: #2563eb;
  --workout-technique-soft: #dbeafe;
  --actual-timer-size: clamp(20rem, min(40vw, 52vh), 36rem);

  position: fixed;
  z-index: 80;
  inset: 0;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(0.55rem, 1.4vh, 1rem);
  min-width: 320px;
  min-height: 100dvh;
  overflow: auto;
  padding:
    max(0.8rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(0.85rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background-color: var(--phase-bg);
  background-image:
    radial-gradient(circle at 10% 3%, var(--phase-wash), transparent 31rem),
    radial-gradient(circle at 94% 96%, rgb(255 255 255 / 78%), transparent 34rem);
  color: var(--ink);
  transition: background-color 320ms ease, color 240ms ease;
}

.workout-screen.phase-ready {
  --phase-color: #625bf6;
  --phase-strong: #423bb8;
  --phase-soft: #e8e6ff;
  --phase-bg: #f7f7ff;
  --phase-glow: rgb(98 91 246 / 23%);
  --phase-wash: rgb(98 91 246 / 10%);
}

.workout-screen.phase-active {
  --phase-color: #0d9488;
  --phase-strong: #0f766e;
  --phase-soft: #ccfbf1;
  --phase-bg: #f2fbf9;
  --phase-glow: rgb(13 148 136 / 24%);
  --phase-wash: rgb(13 148 136 / 11%);
}

.workout-screen.phase-rest {
  --phase-color: #3b82f6;
  --phase-strong: #1d4ed8;
  --phase-soft: #dbeafe;
  --phase-bg: #f4f8ff;
  --phase-glow: rgb(59 130 246 / 22%);
  --phase-wash: rgb(59 130 246 / 10%);
}

.workout-screen.phase-paused {
  --phase-color: #64748b;
  --phase-strong: #334155;
  --phase-soft: #e2e8f0;
  --phase-bg: #f8fafc;
  --phase-glow: rgb(100 116 139 / 18%);
  --phase-wash: rgb(100 116 139 / 8%);
}

.workout-screen.phase-complete {
  --phase-color: #16a34a;
  --phase-strong: #166534;
  --phase-soft: #dcfce7;
  --phase-bg: #f0fdf4;
  --phase-glow: rgb(22 163 74 / 22%);
  --phase-wash: rgb(22 163 74 / 10%);
}

.workout-screen.is-warning {
  --countdown-color: #d97706;
  --countdown-strong: #92400e;
  --countdown-glow: rgb(217 119 6 / 28%);
}

.workout-screen.is-urgent {
  --countdown-color: #c2410c;
  --countdown-strong: #9a3412;
  --countdown-glow: rgb(194 65 12 / 30%);
}

.workout-ambient,
.workout-ambient span {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.workout-ambient {
  display: none;
}

.workout-ambient span {
  width: 30rem;
  height: 30rem;
  background: var(--phase-glow);
  filter: blur(35px);
  opacity: 0.32;
  transition: background-color 500ms ease;
}

.workout-ambient span:nth-child(1) {
  top: -18rem;
  left: -12rem;
}

.workout-ambient span:nth-child(2) {
  top: 34%;
  right: -23rem;
  width: 38rem;
  height: 38rem;
  opacity: 0.24;
}

.workout-ambient span:nth-child(3) {
  bottom: -26rem;
  left: 35%;
  width: 42rem;
  height: 42rem;
  background: rgb(255 255 255 / 74%);
}

.workout-screen > .workout-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.round-button {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 15px;
  background: rgb(255 255 255 / 70%);
  color: var(--ink-soft);
  box-shadow: var(--shadow-xs);
  font-size: 1.45rem;
  line-height: 1;
  backdrop-filter: blur(12px);
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}

.round-button:hover {
  transform: translateY(-1px);
  background: #ffffff;
  color: var(--ink);
}

.round-button.is-active {
  border-color: color-mix(in srgb, var(--phase-color) 28%, white);
  background: var(--phase-soft);
  color: var(--phase-strong);
}

.round-button .material-symbols-rounded {
  font-size: 21px;
}

.workout-session-title {
  display: grid;
  min-width: 0;
  margin-right: auto;
}

.workout-session-title span {
  overflow: hidden;
  color: var(--phase-strong);
  font-size: 0.75rem;
  font-weight: 790;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.workout-session-title strong {
  overflow: hidden;
  font-size: clamp(0.9rem, 1.3vw, 1.08rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workout-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.compact-action,
.session-clock {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0.52rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: 13px;
  background: rgb(255 255 255 / 66%);
  color: var(--ink-soft);
  box-shadow: var(--shadow-xs);
  font-size: 0.76rem;
  font-weight: 750;
  backdrop-filter: blur(10px);
}

.compact-action:hover {
  background: #ffffff;
  color: var(--phase-strong);
}

.session-clock {
  min-width: 76px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.workout-overall-progress {
  width: min(100%, 1680px);
  margin-inline: auto;
}

.overall-progress-track {
  display: grid;
  gap: clamp(4px, 0.35vw, 6px);
}

.overall-progress-track {
  height: 34px;
  align-items: end;
}

.overall-stage-segment {
  position: relative;
  display: block;
  height: 10px;
  overflow: visible;
  border-radius: 4px;
  background: color-mix(in srgb, var(--workout-progress-color) 9%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workout-progress-color) 10%, transparent);
  transition: background-color 500ms ease, box-shadow 500ms ease;
}

.overall-stage-label {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.28rem);
  left: 0;
  display: -webkit-box;
  overflow: hidden;
  max-height: 2.1em;
  color: color-mix(in srgb, var(--ink-muted) 78%, transparent);
  font-size: clamp(0.48rem, 0.62vw, 0.64rem);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.overall-stage-segment.is-active .overall-stage-label {
  color: var(--workout-progress-strong);
  font-weight: 790;
}

.overall-stage-fill {
  position: absolute;
  z-index: 1;
  inset: 1px auto 1px 1px;
  width: calc(100% - 2px);
  border-radius: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--workout-progress-color) 86%, white), color-mix(in srgb, var(--workout-progress-color) 72%, white));
  transform: scaleX(var(--stage-fill-scale, 0));
  transform-origin: left center;
  transition: transform 600ms var(--ease-out);
}

.overall-stage-subsegments {
  position: absolute;
  z-index: 2;
  inset: 1px;
  display: grid;
  overflow: hidden;
  border-radius: 3px;
  grid-template-columns: repeat(var(--subsegment-count), minmax(0, 1fr));
  pointer-events: none;
}

.overall-stage-subsegments > i:not(:last-child) {
  border-right: 1px solid rgb(255 255 255 / 76%);
}

.overall-stage-rest-markers {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 1px;
  left: 1px;
  display: grid;
  height: 0;
  overflow: visible;
  grid-template-columns: repeat(var(--subsegment-count), minmax(0, 1fr));
  pointer-events: none;
}

.overall-stage-rest-marker {
  display: grid;
  width: 19px;
  height: 19px;
  align-self: start;
  justify-self: end;
  place-items: center;
  grid-column: var(--rest-column);
  border: 1px solid color-mix(in srgb, #43866a 22%, transparent);
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  color: #43866a;
  box-shadow: 0 2px 7px rgb(31 86 65 / 14%);
  opacity: 0.72;
  transform: translate(50%, -50%);
  transition: color 220ms ease, opacity 220ms ease, transform 220ms var(--ease-out);
}

.overall-stage-rest-marker svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.overall-stage-rest-marker.is-past {
  opacity: 0.34;
}

.overall-stage-rest-marker.is-current {
  color: #176b4a;
  opacity: 1;
  transform: translate(50%, -50%) scale(1.12);
}

.overall-stage-segment.is-complete .overall-stage-fill {
  background: color-mix(in srgb, var(--workout-progress-color) 56%, white);
}

.overall-stage-segment.is-active {
  background: color-mix(in srgb, var(--workout-progress-color) 15%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workout-progress-color) 16%, transparent);
}

.workout-screen > .workout-stage {
  display: grid;
  grid-template-areas: none;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(26rem, 1.36fr) minmax(15rem, 0.72fr);
  gap: clamp(1rem, 2.2vw, 2.25rem);
  align-items: center;
  width: min(100%, 1680px);
  min-height: 0;
  margin-inline: auto;
}

.exercise-visual-card,
.exercise-guide-card {
  min-width: 0;
  padding: clamp(1rem, 1.7vw, 1.45rem);
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 68%);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
  transition: opacity 300ms ease, filter 300ms ease, transform 300ms var(--ease-out);
}

.exercise-placeholder {
  position: relative;
  display: grid;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 1rem;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--phase-color) 32%, transparent);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 26% 18%, rgb(255 255 255 / 82%), transparent 50%),
    var(--phase-soft);
  color: var(--phase-strong);
}

.exercise-placeholder .exercise-illustration {
  font-size: clamp(7rem, 11vw, 10rem);
  opacity: 0.15;
}

.exercise-placeholder > span:last-child {
  position: absolute;
  right: 0.7rem;
  bottom: 0.65rem;
  left: 0.7rem;
  color: var(--phase-strong);
  font-size: 0.75rem;
  font-weight: 720;
  text-align: center;
  opacity: 1;
}

.placeholder-index {
  position: absolute;
  z-index: 1;
  top: 0.7rem;
  left: 0.7rem;
  display: grid;
  min-width: 40px;
  height: 40px;
  padding-inline: 0.5rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 13px;
  background: rgb(255 255 255 / 68%);
  color: var(--phase-strong);
  font-size: 0.72rem;
  font-weight: 840;
  backdrop-filter: blur(8px);
}

.exercise-position {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.exercise-position span {
  color: var(--ink-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.exercise-position strong {
  color: var(--phase-strong);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.timer-column {
  display: grid;
  min-width: 0;
  justify-items: center;
  align-content: start;
  text-align: center;
}

.phase-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
  min-height: 34px;
  margin-bottom: 0.55rem;
  padding: 0.42rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--phase-soft);
  color: var(--phase-strong);
  font-size: clamp(0.72rem, 0.92vw, 0.84rem);
  font-weight: 840;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: background-color 400ms ease, color 400ms ease;
}

.phase-pill::before {
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 50%;
  background: var(--phase-color);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--phase-color) 12%, transparent);
  content: "";
}

.timer-column > h1 {
  max-width: 19ch;
  margin-bottom: 0.25rem;
  font-size: clamp(1.8rem, 3.3vw, 3.7rem);
  letter-spacing: -0.055em;
}

.exercise-subtitle {
  max-width: 44ch;
  min-height: 1.5em;
  margin-bottom: 0.3rem;
  color: var(--ink-soft);
  font-size: clamp(0.86rem, 1.15vw, 1.05rem);
}

.timer-ring-wrap {
  position: relative;
  display: grid;
  width: var(--actual-timer-size);
  max-width: 100%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  filter: drop-shadow(0 22px 38px rgb(31 40 65 / 10%));
}

.timer-ring-wrap::before {
  position: absolute;
  inset: 10%;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 50%;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 18px 48px var(--phase-glow);
  content: "";
  backdrop-filter: blur(12px);
}

.timer-ring-wrap > svg.timer-ring {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  border-radius: 0;
  filter: none;
  transform: rotate(-90deg);
}

.timer-ring-wrap .timer-ring circle {
  fill: none;
  stroke-width: 6;
  vector-effect: none;
}

.timer-track {
  stroke: rgb(255 255 255 / 76%);
}

.timer-progress {
  stroke: var(--countdown-color);
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--countdown-glow));
  transition: stroke-dashoffset 120ms linear, stroke 450ms ease, opacity 120ms linear;
}

.timer-center {
  position: relative;
  z-index: 2;
  display: grid;
  width: 70%;
  justify-items: center;
}

.timer-center .timer-value {
  display: flex;
  max-width: 100%;
  margin: 0;
  justify-content: center;
  color: var(--ink);
  font-size: clamp(4.5rem, 8.7vw, 9.4rem);
  font-weight: 840;
  letter-spacing: 0;
  line-height: 0.94;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.timer-center .timer-digit,
.timer-center .timer-separator {
  display: inline-block;
  flex: 0 0 auto;
  text-align: center;
}

.timer-center .timer-digit {
  width: 0.56em;
  will-change: opacity, transform;
}

.timer-center .timer-separator {
  width: 0.3em;
  transform: translateY(-0.03em);
}

.timer-center .timer-digit.is-changing {
  animation: actual-timer-digit-change 180ms var(--ease-out) both;
}

@keyframes actual-timer-digit-change {
  from {
    opacity: 0.52;
    transform: translateY(0.07em) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.timer-center .timer-caption {
  margin-top: 0.45rem;
  color: var(--phase-strong);
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  font-weight: 740;
  transition: color 220ms ease;
}

.workout-screen.is-warning .timer-center .timer-caption,
.workout-screen.is-urgent .timer-center .timer-caption {
  color: var(--countdown-strong);
}

.workout-screen.is-warning .timer-ring-wrap::before,
.workout-screen.is-urgent .timer-ring-wrap::before {
  box-shadow: 0 18px 48px var(--countdown-glow);
}

.workout-screen.phase-active .timer-ring-wrap {
  animation: actual-ring-breathe 2.4s ease-in-out infinite;
}

.workout-screen.phase-paused .timer-progress {
  transition-duration: 0ms;
}

.workout-screen.phase-paused .exercise-visual-card,
.workout-screen.phase-paused .exercise-guide-card {
  filter: saturate(0.58);
  opacity: 0.65;
}

.workout-screen.is-urgent .timer-ring-wrap {
  animation: urgent-pulse 780ms ease-in-out infinite;
}

.reps-target {
  display: grid;
  min-height: var(--actual-timer-size);
  align-content: center;
  justify-items: center;
}

.reps-value {
  color: var(--ink);
  font-size: clamp(5.5rem, 11vw, 11rem);
  font-weight: 850;
  letter-spacing: -0.09em;
  line-height: 0.88;
  font-variant-numeric: tabular-nums;
}

.reps-target > span:last-child {
  margin-top: 0.9rem;
  color: var(--phase-strong);
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  font-weight: 760;
}

.time-adjusters {
  display: flex;
  gap: 0.45rem;
  margin-top: -0.25rem;
}

.time-adjusters button {
  min-height: 36px;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 62%);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 720;
  backdrop-filter: blur(8px);
}

.time-adjusters button:hover {
  background: #ffffff;
  color: var(--phase-strong);
}

.exercise-guide-card {
  display: grid;
  gap: 1rem;
}

.guide-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(226 230 239 / 72%);
}

.guide-target span,
.next-step-preview > span {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guide-target strong {
  color: var(--phase-strong);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.guide-section h2 {
  margin-bottom: 0.8rem;
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  letter-spacing: -0.03em;
}

.tip-list {
  display: grid;
  gap: 0.68rem;
  margin: 0;
  padding: 0;
  color: var(--ink-soft);
  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  list-style: none;
}

.tip-list li {
  position: relative;
  padding-left: 1.35rem;
}

.tip-list li::before {
  position: absolute;
  top: 0.45em;
  left: 0.05rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--phase-color);
  content: "";
  box-shadow: 0 0 0 4px var(--phase-soft);
}

.exercise-guide-card .tip-list li {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  padding-left: 0;
}

.exercise-guide-card .tip-list li::before {
  display: none;
}

.exercise-guide-card .tip-list li > span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 8px;
  background: var(--phase-soft);
  color: var(--phase-strong);
  font-size: 0.7rem;
  font-weight: 850;
}

.next-step-preview {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem;
  border-radius: var(--radius-md);
  background: var(--phase-soft);
}

.next-step-preview strong {
  overflow: hidden;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.next-step-preview small {
  color: var(--phase-strong);
  font-size: 0.7rem;
}

.workout-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.65rem, 1.5vw, 1.2rem);
  width: min(100%, 1180px);
  margin-inline: auto;
}

.control-cluster {
  display: flex;
  gap: 0.55rem;
}

.control-cluster-right {
  justify-content: flex-end;
}

.control-button,
.main-workout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: clamp(55px, 7vh, 70px);
  padding: 0.75rem clamp(0.8rem, 1.6vw, 1.35rem);
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: clamp(16px, 1.8vw, 21px);
  background: rgb(255 255 255 / 70%);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  font-weight: 770;
  backdrop-filter: blur(12px);
  transition: transform 170ms var(--ease-out), background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.control-button:hover,
.main-workout-button:hover {
  transform: translateY(-2px);
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow-md);
}

.control-button:active,
.main-workout-button:active {
  transform: scale(0.98);
}

.control-button:disabled,
.main-workout-button:disabled,
.time-adjusters button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}

.control-button > span {
  font-size: 1.15rem;
}

.main-workout-button {
  --workout-action-color: #4f46e5;
  --workout-action-hover: #4338ca;
  --workout-action-glow: rgb(79 70 229 / 24%);

  min-width: clamp(210px, 25vw, 320px);
  gap: 0.5rem;
  padding-inline: clamp(1.4rem, 3vw, 2.5rem);
  border-color: transparent;
  background: var(--workout-action-color);
  color: #ffffff;
  box-shadow: 0 15px 34px var(--workout-action-glow);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  transition: transform 170ms var(--ease-out), background-color 400ms ease, box-shadow 400ms ease;
}

.main-workout-button:hover {
  background: var(--workout-action-hover);
  color: #ffffff;
}

.main-workout-button.is-action-pause {
  --workout-action-color: #334155;
  --workout-action-hover: #1e293b;
  --workout-action-glow: rgb(51 65 85 / 22%);
}

.main-workout-button.is-action-complete {
  --workout-action-color: #15803d;
  --workout-action-hover: #166534;
  --workout-action-glow: rgb(21 128 61 / 24%);
}

.main-button-icon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  filter: drop-shadow(0 1px 1px rgb(20 25 45 / 24%));
}

.main-button-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.main-button-icon svg path {
  fill: currentColor;
}

.danger-control {
  color: var(--danger);
}

/* Completion */

.completion-overlay {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse at 20% 20%, rgb(90 83 237 / 16%), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgb(8 122 87 / 12%), transparent 50%),
    rgb(246 247 251 / 94%);
  backdrop-filter: blur(12px);
}

.completion-confetti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.completion-confetti i {
  position: absolute;
  top: 28%;
  left: 50%;
  width: 7px;
  height: 12px;
  border-radius: 3px;
  background: var(--primary);
  opacity: 0;
  animation: reward-confetti 1600ms var(--ease-out) 120ms both;
}

.completion-confetti i:nth-child(3n) { background: var(--green); border-radius: 50%; }
.completion-confetti i:nth-child(3n + 1) { background: var(--amber); }
.completion-confetti i:nth-child(1) { --x: -24vw; --y: 18vh; --spin: 130deg; }
.completion-confetti i:nth-child(2) { --x: 22vw; --y: 26vh; --spin: -160deg; }
.completion-confetti i:nth-child(3) { --x: -30vw; --y: 32vh; --spin: 220deg; }
.completion-confetti i:nth-child(4) { --x: 32vw; --y: 12vh; --spin: 170deg; }
.completion-confetti i:nth-child(5) { --x: -18vw; --y: -15vh; --spin: -120deg; }
.completion-confetti i:nth-child(6) { --x: 15vw; --y: -12vh; --spin: 150deg; }
.completion-confetti i:nth-child(7) { --x: -36vw; --y: 7vh; --spin: 270deg; }
.completion-confetti i:nth-child(8) { --x: 35vw; --y: 35vh; --spin: -200deg; }
.completion-confetti i:nth-child(9) { --x: -27vw; --y: 46vh; --spin: 180deg; }
.completion-confetti i:nth-child(10) { --x: 27vw; --y: 49vh; --spin: -230deg; }
.completion-confetti i:nth-child(11) { --x: -8vw; --y: -20vh; --spin: 110deg; }
.completion-confetti i:nth-child(12) { --x: 8vw; --y: -18vh; --spin: -170deg; }

.completion-card {
  position: relative;
  z-index: 2;
  width: min(100%, 680px);
  flex-shrink: 0;
  margin-block: auto;
  padding: clamp(1.15rem, 2.5vw, 1.7rem);
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--line));
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, var(--primary-soft), var(--surface) 38%);
  box-shadow: 0 24px 80px rgb(61 54 137 / 14%);
  text-align: center;
  animation: completion-card-enter 480ms var(--ease-out) both;
}

.completion-emblem {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.35rem;
  place-items: center;
  color: var(--primary);
  filter: drop-shadow(0 8px 14px rgb(90 83 237 / 18%));
  animation: reward-emblem 650ms var(--ease-spring) 100ms both;
}

.completion-emblem svg {
  width: 64px;
  height: 64px;
}

.completion-card h2 {
  margin: 0.25rem auto 0.9rem;
  font-size: clamp(1.7rem, 4vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
  outline: none;
}

.completion-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.completion-results > div {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.5rem;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
}

.completion-results > div:last-child {
  background: var(--green-soft);
  color: var(--green);
}

.completion-results strong {
  font-size: 1.85rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.completion-results span {
  font-size: 0.73rem;
  font-weight: 650;
}

.completion-reps {
  margin-bottom: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.completion-reps-heading {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.completion-reps-heading h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.3;
}

.completion-reps-list {
  overflow-x: auto;
  overflow-y: visible;
}

.completion-reps-table {
  width: 100%;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0.35rem 0.35rem;
}

.completion-reps-table th {
  padding: 0;
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 650;
  text-align: center;
}

.completion-reps-table tbody th {
  width: 100%;
  max-width: 16rem;
  overflow: hidden;
  padding-right: 0.35rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completion-reps-table input {
  width: 2.75rem;
  min-height: 34px;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}

.completion-reps-table input::placeholder {
  color: var(--ink-muted);
  opacity: 0.55;
}

.completion-reps-table input[data-status="skipped"]:placeholder-shown {
  border-color: color-mix(in srgb, var(--coral) 55%, var(--line));
  background: var(--coral-soft);
}

.completion-reps-table input::-webkit-inner-spin-button,
.completion-reps-table input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.completion-reps-table input:focus {
  border: 1px solid var(--primary);
  background: var(--surface);
  outline: none;
  box-shadow: none;
}

.completion-feedback-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.completion-feedback-heading h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.3;
}

.completion-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.completion-card .completion-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.completion-fields label {
  padding: 0;
  border: 0;
  background: transparent;
}

.completion-fields label > span {
  font-weight: 600;
  text-align: center;
}

.completion-score {
  width: min(100%, 7rem);
  justify-self: center;
}

.completion-score input {
  min-height: 44px;
  padding: 0.5rem;
  border: 1px solid transparent;
  background: var(--surface-soft);
  font-size: 1.15rem;
  font-weight: 650;
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}

.completion-score input::-webkit-inner-spin-button,
.completion-score input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.completion-card #finishCompletionButton {
  min-height: 50px;
  height: auto;
  white-space: normal;
  font-size: 0.95rem;
  background: linear-gradient(120deg, var(--primary), var(--primary-hover));
  box-shadow: 0 8px 20px rgb(90 83 237 / 20%);
}

@keyframes reward-emblem {
  from { opacity: 0; transform: scale(0.7) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes reward-confetti {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  15% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--spin)); }
}

@media (prefers-reduced-motion: reduce) {
  .completion-emblem,
  .completion-confetti i {
    animation: none;
  }
}

/* Toasts and loading */

.toast-region {
  position: fixed;
  z-index: 160;
  right: 1.1rem;
  bottom: 1.1rem;
  display: grid;
  gap: 0.65rem;
  width: min(calc(100% - 2.2rem), 390px);
  pointer-events: none;
}

.toast-region .toast,
.toast-region > div {
  pointer-events: auto;
}

.toast-region .toast-success {
  border-color: rgb(19 173 120 / 22%);
}

.toast-region .toast-error {
  border-color: rgb(223 66 82 / 22%);
}

.toast-region .toast-info {
  border-color: rgb(98 91 246 / 22%);
}

.loading-screen {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100dvh;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  background: var(--page);
  text-align: center;
}

.loading-screen__content {
  display: flex;
  width: min(100%, 28rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.loading-mark {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
  place-items: center;
  margin: 0;
  color: var(--primary);
  font-size: 3.25rem;
  line-height: 1;
  transform-origin: center;
  animation: loading-spin 950ms linear infinite;
}

.loading-screen__title {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.3;
}

.loading-screen.is-error .loading-screen__content {
  gap: 0.75rem;
}

.loading-screen.is-error .loading-mark {
  color: var(--danger);
  animation: none;
}

.loading-screen.is-error .loading-screen__title {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
}

.loading-screen__message {
  max-width: 32ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

.loading-screen__retry {
  min-width: 11rem;
  margin-top: 0.45rem;
}

@keyframes actual-view-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes actual-modal-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes actual-ring-breathe {
  0%, 100% { filter: drop-shadow(0 22px 38px rgb(31 40 65 / 10%)); transform: scale(1); }
  50% { filter: drop-shadow(0 25px 48px var(--phase-glow)); transform: scale(1.012); }
}

@keyframes completion-card-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

/* Actual markup responsive layouts */

@media (max-width: 1120px) {
  .topbar {
    gap: 1.25rem;
  }

  .topbar .nav-item {
    padding-inline: 0.65rem;
    font-size: 0.82rem;
  }

  .date-pill {
    display: none;
  }

  .schedule-panel,
  .recent-panel {
    grid-column: 1 / -1;
  }

  .stats-layout {
    grid-template-columns: 1fr;
  }

  .nutrition-month-layout {
    grid-template-columns: 1fr;
  }

  .workout-screen {
    --actual-timer-size: clamp(19rem, min(49vw, 48vh), 31rem);
  }

  .workout-screen > .workout-stage {
    grid-template-columns: minmax(13rem, 0.65fr) minmax(23rem, 1.35fr);
  }

  .exercise-guide-card {
    display: none;
  }
}

@media (max-width: 840px) {
  body:not(.workout-open) {
    padding-bottom: 0;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 66px;
    padding-inline: 0.8rem;
  }

  .topbar .main-nav {
    position: fixed;
    z-index: 45;
    right: 0.65rem;
    bottom: max(0.55rem, env(safe-area-inset-bottom));
    left: 0.65rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.2rem;
    min-height: 56px;
    border: 1px solid rgb(226 230 239 / 86%);
    border-radius: 21px;
    background: rgb(255 255 255 / 92%);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(18px) saturate(145%);
  }

  .nav-item {
    min-width: 0;
    padding-inline: 0.25rem;
    font-size: 0.72rem;
  }

  .topbar-actions {
    grid-column: 2;
  }

  .page-content {
    width: min(calc(100% - 1.4rem), var(--content-width));
    padding-block: var(--space-5) 5.8rem;
  }

  .nutrition-month-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .nutrition-month-navigation {
    grid-template-columns: 44px minmax(130px, 1fr) 44px auto;
  }

  .walking-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .view-header {
    align-items: center;
  }

  .hero-card {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 1.4rem;
  }

  .hero-orbit {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    width: 112px;
    opacity: 0.85;
    pointer-events: none;
  }

  .hero-orbit-ring {
    width: 70%;
  }

  .hero-orbit-value {
    font-size: 2.7rem;
  }

  .hero-orbit-label,
  .orbit-dot {
    display: none;
  }

  .hero-copy {
    position: relative;
    z-index: 2;
  }

  .hero-card h1 {
    max-width: 11ch;
    padding-right: 70px;
    font-size: clamp(2.35rem, 11vw, 4.4rem);
  }

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

  .workout-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .nutrition-summary,
  .nutrition-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nutrition-visual-grid {
    grid-template-columns: 1fr;
  }

  .workout-grid {
    grid-auto-rows: auto;
  }

  .settings-grid {
    grid-auto-rows: auto;
  }

  .settings-card {
    height: auto;
  }

  .workout-card {
    height: auto;
  }

  .workout-card {
    min-height: 350px;
  }

  .workout-screen {
    --actual-timer-size: min(61vw, 38vh, 28rem);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 0.55rem;
  }

  .workout-screen > .workout-stage {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    align-content: center;
  }

  .exercise-visual-card {
    display: none;
  }

  .timer-column > h1 {
    font-size: clamp(1.55rem, 5.8vw, 2.5rem);
  }

  .exercise-subtitle {
    margin-bottom: 0;
  }

  .workout-controls {
    grid-template-columns: 0.78fr 1.4fr 0.78fr;
  }

  .control-cluster .control-button:nth-child(2) {
    display: none;
  }

  .control-button {
    width: 100%;
    min-width: 0;
    padding-inline: 0.65rem;
  }

  .control-button:not(.danger-control) {
    font-size: 0;
  }

  .control-button:not(.danger-control) > span {
    font-size: 1.25rem;
  }

  .main-workout-button {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .topbar .brand small {
    display: none;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .view-header {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
  }

  .view-header > .button,
  .week-picker {
    width: 100%;
  }

  .nutrition-header-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .nutrition-header-actions .nutrition-view-menu,
  .nutrition-header-actions > .button {
    width: 100%;
  }

  .walking-form {
    grid-template-columns: 1fr;
  }

  .walking-entry-panel .walking-form {
    grid-template-columns: 1fr;
  }

  .walking-entry-heading {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
  }

  .walking-entry-heading small {
    text-align: left;
    white-space: normal;
  }

  .walking-form .button {
    width: 100%;
  }

  .nutrition-view-menu {
    display: grid;
    width: 100%;
  }

  .nutrition-view-tab {
    padding-inline: 0.55rem;
    font-size: 0.78rem;
  }

  .nutrition-month-navigation {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .nutrition-month-today-button {
    grid-column: 1 / -1;
  }

  .nutrition-month-card-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .nutrition-month-card-heading small {
    max-width: none;
    padding-top: 0;
    text-align: left;
  }

  .nutrition-calendar-weekdays,
  .nutrition-month-calendar {
    gap: 0.22rem;
  }

  .nutrition-calendar-spacer,
  .nutrition-calendar-day {
    min-height: 72px;
  }

  .nutrition-calendar-day {
    padding: 0.38rem 0.28rem;
    border-radius: 9px;
  }

  .nutrition-calendar-spacer {
    border-radius: 9px;
  }

  .nutrition-calendar-day > strong {
    font-size: 0.75rem;
  }

  .nutrition-calendar-calories-full {
    display: none;
  }

  .nutrition-calendar-calories-compact {
    display: inline;
  }

  .nutrition-calendar-day > small {
    display: block;
    font-size: 0.6rem;
  }

  .nutrition-calendar-legend {
    gap-inline: 0.65rem;
  }

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

  .nutrition-macro-chart {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .nutrition-macro-legend {
    width: 100%;
  }

  .nutrition-chart-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .nutrition-chart-heading > small {
    white-space: normal;
  }

  .hero-card h1 {
    padding-right: 35px;
  }

  .hero-actions,
  .resume-card,
  .resume-actions {
    display: grid;
  }

  .hero-actions .button,
  .resume-actions .button {
    width: 100%;
  }

  .resume-card {
    align-items: stretch;
  }

  .metric-card {
    min-height: 145px;
    padding: 1rem;
  }

  .metric-card > strong {
    font-size: 1.75rem;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }

  .compact-heading {
    flex-direction: row;
    align-items: flex-end;
  }

  .week-strip {
    gap: 0.3rem;
  }

  .week-day {
    min-height: 112px;
    padding-inline: 0.2rem;
    border-radius: 13px;
  }

  .week-day > small {
    display: none;
  }

  .session-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .session-meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 0.15rem;
  }

  .workout-facts {
    gap: 0.35rem;
  }

  .workout-fact {
    min-height: 78px;
    padding-inline: 0.3rem;
  }

  .field-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.65rem;
  }

  .field-row input:not(.switch-input):not([type="range"]),
  .field-row select,
  .field-row input[type="range"],
  .field-row .profile-value {
    width: 100%;
    max-width: none;
  }

  .field-row:has(.switch-input) {
    min-height: 76px;
    padding-right: 66px;
  }

  .field-row > .switch,
  .switch-input {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .mode-options,
  .modal-actions,
  .completion-fields {
    grid-template-columns: 1fr;
  }

  .mode-option {
    min-height: 120px;
  }

  .modal-card .form-grid {
    grid-template-columns: 1fr;
  }

  .modal-card .form-grid .form-span {
    grid-column: 1;
  }

  .workout-screen {
    --actual-timer-size: min(72vw, 34vh, 23rem);
    padding-inline: 0.65rem;
  }

  .workout-session-title {
    max-width: 42vw;
  }

  .compact-action {
    display: none;
  }

  .session-clock {
    min-width: 65px;
    padding-inline: 0.55rem;
  }

  .round-button {
    width: 42px;
    height: 42px;
  }

  .timer-center .timer-value {
    font-size: clamp(4.1rem, 20vw, 6.8rem);
  }

  .reps-value {
    font-size: clamp(5rem, 25vw, 8rem);
  }

  .workout-controls {
    grid-template-columns: 0.62fr 1.55fr 0.62fr;
    gap: 0.42rem;
  }

  .control-cluster {
    gap: 0;
  }

  .control-cluster-right .control-button:first-child {
    display: none;
  }

  .danger-control {
    font-size: 0;
  }

  .danger-control > span {
    font-size: 1rem;
  }

  .main-workout-button {
    min-height: 59px;
    padding-inline: 0.7rem;
    font-size: 0.92rem;
  }

  .completion-card {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
  }
}

@media (max-height: 760px) and (min-width: 841px) {
  .workout-screen {
    --actual-timer-size: min(34vw, 48vh, 27rem);
    gap: 0.45rem;
  }

  .exercise-placeholder {
    aspect-ratio: 16 / 9;
  }

  .exercise-visual-card,
  .exercise-guide-card {
    padding: 0.9rem;
  }

  .workout-controls button {
    min-height: 52px;
  }
}

@media (orientation: landscape) and (max-height: 580px) {
  .workout-screen {
    --actual-timer-size: min(30vw, 61vh, 20rem);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .workout-screen > .workout-stage {
    grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.2fr);
  }

  .exercise-guide-card {
    display: none;
  }

  .timer-column > h1 {
    font-size: clamp(1.4rem, 3vw, 2.3rem);
  }

  .workout-controls {
    position: fixed;
    z-index: 5;
    right: 0.8rem;
    bottom: 0.8rem;
    left: auto;
    display: flex;
    width: auto;
  }

  .control-cluster {
    display: none;
  }

  .main-workout-button {
    min-width: 200px;
    min-height: 52px;
  }
}

/* Combined activity preview */

.activity-hub-calendar-heading {
  gap: 0.85rem;
}

.activity-calendar-mode-menu {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.activity-hub-layout {
  grid-template-columns: minmax(0, 1.42fr) minmax(360px, 0.78fr);
  align-items: start;
}
.activity-hub-calendar-panel,
.activity-steps-chart-card {
  min-width: 0;
}

.activity-hub-calendar-panel {
  width: 100%;
  max-width: none;
  height: auto;
  align-self: start;
}

.activity-hub-calendar-day {
  cursor: pointer;
}

.activity-calendar-rotator {
  position: relative;
  display: inline-grid;
  max-width: 100%;
  justify-items: start;
  align-items: baseline;
  overflow: hidden;
  vertical-align: baseline;
  white-space: nowrap;
}

.activity-calendar-rotator > span {
  grid-area: 1 / 1;
  animation: activity-calendar-secondary 8s ease-in-out infinite;
  color: inherit;
}

.activity-calendar-rotator > span:first-child {
  animation-name: activity-calendar-primary;
}

.activity-hub-calendar-day.is-activity-rotating {
  --calendar-day-color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  animation: activity-calendar-day-tone 8s ease-in-out infinite;
}

.activity-hub-calendar-day.is-activity-rotating > span:first-child {
  animation: activity-calendar-day-number-tone 8s ease-in-out infinite;
}

@keyframes activity-calendar-primary {
  0%, 42% { opacity: 1; }
  50%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes activity-calendar-secondary {
  0%, 42% { opacity: 0; }
  50%, 92% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes activity-calendar-day-tone {
  0%, 42%, 100% {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  }
  50%, 92% {
    border-color: color-mix(in srgb, var(--green) 28%, var(--line));
    background: var(--green-soft);
  }
}

/* Stronger desktop hierarchy for the workout editor. */

@media (min-width: 801px) {
  .workout-builder-card .workout-weekdays-options input:checked + span {
    border: 2px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 17%, var(--surface));
    color: color-mix(in srgb, var(--primary) 76%, var(--ink));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent);
    font-weight: 950;
  }

  .workout-builder-card .builder-stage-nav {
    padding: 0.78rem 1rem 0.88rem;
    background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-list {
    gap: 0.55rem;
    padding: 0.2rem;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section {
    position: relative;
    overflow: hidden;
    padding: 0.58rem 0.65rem 0.68rem;
    border: 2px solid color-mix(in srgb, var(--ink-muted) 22%, var(--line));
    background: var(--surface);
    color: var(--ink-soft);
    box-shadow: 0 2px 7px rgb(18 27 45 / 4%);
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section:hover:not(.is-active) {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section.is-active {
    border: 2px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 13%, var(--surface));
    color: var(--ink);
    box-shadow: none;
    transform: none;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section strong {
    font-weight: 800;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section.is-active strong {
    color: color-mix(in srgb, var(--primary) 72%, var(--ink));
    font-weight: 800;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section.is-active small {
    color: var(--ink-soft);
    font-weight: 400;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section > b > i {
    background: color-mix(in srgb, var(--primary) 38%, var(--line));
  }

  .workout-builder-card .workout-builder-layout {
    background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  }

  .workout-builder-card .builder-library {
    background: color-mix(in srgb, var(--ink) 2%, var(--surface));
  }

  .workout-builder-card .builder-sections-panel {
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  }

  .workout-builder-card .builder-sections-panel > .builder-column-heading {
    background: var(--surface);
    border-bottom-color: color-mix(in srgb, var(--primary) 22%, var(--line));
  }

  .workout-builder-card .builder-sections {
    padding: 1rem 1.2rem 1.5rem;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  }

  .workout-builder-card .builder-add-section-actions button {
    --stage-button-accent: var(--primary);

    border-color: color-mix(in srgb, var(--stage-button-accent) 42%, var(--line));
    background: color-mix(in srgb, var(--stage-button-accent) 8%, var(--surface));
    color: color-mix(in srgb, var(--stage-button-accent) 78%, var(--ink));
    box-shadow: none;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
  }

  .workout-builder-card .builder-add-section-actions button:hover {
    border-color: color-mix(in srgb, var(--stage-button-accent) 68%, var(--line));
    background: color-mix(in srgb, var(--stage-button-accent) 15%, var(--surface));
    transform: translateY(-1px);
  }

  .workout-builder-card .builder-section-card {
    border-color: color-mix(in srgb, var(--ink-muted) 24%, var(--line));
    box-shadow: 0 3px 10px rgb(18 27 45 / 5%);
  }

  .workout-builder-card .builder-section-card.is-active {
    border-color: var(--primary);
    box-shadow: none;
  }

  .workout-builder-card .builder-section-card .builder-section-header {
    background: color-mix(in srgb, var(--ink) 2%, var(--surface));
  }

  .workout-builder-card .builder-section-card.is-active .builder-section-header {
    border-bottom-color: color-mix(in srgb, var(--primary) 32%, var(--line));
    background: color-mix(in srgb, var(--primary) 11%, var(--surface));
  }

  .workout-builder-card .builder-section-card .builder-section-index {
    border-color: color-mix(in srgb, var(--primary) 25%, var(--line));
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    color: var(--primary);
  }

  .workout-builder-card .builder-section-card.is-active .builder-section-title input {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  }

  .workout-builder-card .builder-section-card.is-active .builder-section-settings {
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  }

  .workout-builder-card .builder-stage-item {
    border-color: color-mix(in srgb, var(--ink-muted) 24%, var(--line));
    background: var(--surface);
    box-shadow: 0 2px 6px rgb(18 27 45 / 4%);
  }

  .workout-builder-card .builder-section-card.is-active .builder-stage-item {
    border-color: color-mix(in srgb, var(--primary) 25%, var(--line));
  }
}

@keyframes activity-calendar-day-number-tone {
  0%, 42%, 100% { color: var(--primary); }
  50%, 92% { color: var(--green); }
}

@media (prefers-reduced-motion: reduce) {
  .activity-calendar-rotator > span { animation: none; }
  .activity-calendar-rotator > span:last-child { display: none; }
  .activity-hub-calendar-day.is-activity-rotating { animation: none; }
  .activity-hub-calendar-day.is-activity-rotating > span:first-child { animation: none; }
}

.activity-hub-calendar-day.is-low {
  --calendar-day-color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
  background: var(--danger-soft);
}

.activity-hub-calendar-day.is-progress {
  --calendar-day-color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--line));
  background: var(--cyan-soft);
}

.activity-hub-calendar-day.is-running {
  --calendar-day-color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}



.activity-hub-legend i.is-running {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

.activity-hub-calendar-day.is-selected {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 34%, var(--surface));
}

.compact-month-chart-card .month-chart-average {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.day-summary-card .activity-journal-date-heading,
.sleep-entry-panel .activity-journal-date-heading {
  margin: 0 0 0.55rem;
  color: var(--ink);
  text-align: center;
}

.day-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.5;
}

.day-summary-row:last-child {
  border-bottom: 0;
}

.activity-journal-row {
  transition:
    border-color 160ms var(--ease-out),
    color 160ms var(--ease-out);
}

.activity-journal-row:hover {
  color: var(--primary);
  border-bottom-color: color-mix(in srgb, var(--primary) 28%, var(--line));
}

.activity-journal-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.activity-journal-name {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.activity-journal-name strong {
  font-weight: 650;
  overflow-wrap: anywhere;
}

.activity-journal-name small,
.activity-journal-value {
  color: var(--ink-muted);
  font-weight: 500;
}

.activity-journal-value {
  flex-shrink: 0;
  max-width: 55%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.day-summary-card .activity-journal-name {
  flex: 1;
  gap: 0.35rem;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}

.activity-record-marker {
  display: inline-flex;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
}

.activity-record-marker.is-recorded {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
}

.day-summary-card .activity-journal-value {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  max-width: none;
  flex-shrink: 1;
  overflow-wrap: anywhere;
  font-weight: 400;
}

.day-summary-card .activity-journal-value.has-data {
  color: var(--ink);
  font-weight: 400;
}

.day-summary-card .activity-journal-value:not(.has-data) {
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 500;
}

.activity-journal-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.activity-journal-number {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.day-summary-card .activity-journal-value.has-data .activity-journal-number {
  font-size: 1rem;
}

.activity-day-editor .activity-journal-time {
  margin-left: 0.3rem;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.activity-day-editor .activity-journal-time .activity-journal-number {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.activity-journal-time,
.activity-journal-metric {
  white-space: nowrap;
}

.activity-journal-unit {
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.activity-journal-separator {
  color: var(--ink-muted);
}

.activity-modal-secondary {
  margin-top: 0.5rem;
  border-color: color-mix(in srgb, var(--primary) 25%, var(--line));
  background: var(--primary-soft);
  box-shadow: none;
  color: var(--primary);
}

.activity-form-actions {
  display: grid;
  gap: 0.6rem;
}

.activity-form-actions > .button {
  min-height: 46px;
  margin: 0;
  padding: 0.7rem 1rem;
  border-radius: 11px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: none;
}

.activity-modal-delete {
  margin-top: 0.5rem;
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
  color: var(--danger);
  background: var(--danger-soft);
  box-shadow: none;
}

.activity-day-heading {
  min-height: 38px;
  margin-bottom: 0.85rem;
}

.activity-day-heading h2,
.compact-month-chart-card h2,
.day-summary-card h2,
.sleep-entry-panel h2 {
  margin: 0;
  font-size: 1.08rem;
}

.activity-day-section {
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
}

.activity-day-section h3 {
  margin: 0 0 0.55rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.activity-day-workouts {
  display: grid;
  gap: 0.5rem;
}

.activity-day-workout-card {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.activity-day-workout-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.activity-day-workout-card strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-day-workout-card small {
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.activity-day-steps {
  margin-top: auto;
}

.activity-walking-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.activity-walking-form .button {
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding-block: 0;
  padding-inline: 0.75rem;
}

.entry-form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  grid-column: 1 / -1;
}

.entry-form-actions > .button {
  grid-column: 1 / -1;
}

.entry-form-actions.is-editing > button[type="submit"],
.entry-form-actions.is-editing > .entry-cancel-button {
  grid-column: auto;
}

.walking-entry-panel .entry-form-actions > .entry-delete-button {
  height: auto;
  min-height: 36px;
  background: var(--danger-soft);
  box-shadow: none;
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 600;
}

.walking-entry-panel .entry-form-actions > .entry-delete-button:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
.compact-month-chart-card .nutrition-month-chart {
  height: 180px;
}

@media (max-width: 1120px) {
  .activity-hub-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .activity-hub-calendar-panel {
    max-width: none;
  }

}

@media (max-width: 840px) {
  .topbar .main-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

@media (max-width: 560px) {
  #view-activity .activity-calendar-mode-menu {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.1rem;
  }

  #view-activity .activity-calendar-mode-tab {
    padding-inline: 0.2rem;
    font-size: 0.72rem;
  }

  .activity-walking-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-walking-form .button {
    grid-column: 1 / -1;
  }

}

/* Active workout: symmetric information grid */

.workout-screen {
  --actual-timer-size: clamp(21rem, min(30vw, 52vh), 30rem);
  --actual-timer-half: clamp(10.5rem, min(15vw, 26vh), 15rem);

  gap: clamp(0.5rem, 1vh, 0.75rem);
  overflow: hidden;
}

.workout-screen > .workout-topbar,
.workout-overall-progress,
.workout-screen > .workout-stage,
.workout-controls {
  width: min(100%, 1680px);
  margin-inline: auto;
}

.workout-screen > .workout-topbar {
  position: relative;
}

.workout-screen > .workout-topbar .round-button {
  width: 46px;
  height: 46px;
  min-height: 46px;
}

.workout-screen .workout-session-title {
  display: flex;
  width: fit-content;
  height: 46px;
  min-height: 46px;
  max-width: min(42vw, 22rem);
  margin: 0;
  padding: 0.5rem 1rem;
  align-items: center;
  justify-content: center;
  justify-self: start;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 15px;
  background: rgb(255 255 255 / 70%);
  box-shadow: var(--shadow-xs);
  text-align: center;
  backdrop-filter: blur(12px);
}

.workout-screen .workout-session-title strong {
  font-size: 0.86rem;
  font-weight: 790;
}

.workout-screen .workout-header-end {
  display: inline-flex;
  height: 46px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 15px;
  background: rgb(255 255 255 / 70%);
  color: var(--danger);
  font-size: 0.76rem;
  font-weight: 780;
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(12px);
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}

.workout-screen .workout-header-end:hover {
  transform: translateY(-1px);
  background: #ffffff;
}

.workout-header-end svg {
  flex: 0 0 auto;
}

.workout-overall-progress {
  min-width: 0;
  margin-top: clamp(0.35rem, 0.7vh, 0.55rem);
  padding: 0.55rem 0.8rem 0.65rem;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 16px;
  background: rgb(255 255 255 / 44%);
  backdrop-filter: blur(12px);
}

.workout-screen > .workout-stage {
  display: grid;
  overflow: hidden;
  min-height: 0;
  padding: 0.15rem;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
}

.workout-primary-grid {
  --workout-side-column-width: clamp(19rem, 28vw, 31rem);

  display: grid;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-areas: "current focus session";
  grid-template-columns: var(--workout-side-column-width) minmax(26rem, 1fr) var(--workout-side-column-width);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(0.75rem, 1.2vw, 1rem);
  align-items: stretch;
}

.workout-current-column,
.workout-session-column {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: clamp(0.75rem, 1.2vw, 1rem);
  align-content: center;
}

.workout-current-column {
  grid-area: current;
}

.workout-session-column {
  grid-area: session;
}

.step-context-card,
.workout-guide-card,
.workout-preview-card,
.workout-total-card,
.workout-stage-progress-card {
  min-width: 0;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 70%);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.workout-preview-card {
  overflow: hidden;
  padding: 0.65rem;
}

.workout-preview-media {
  position: relative;
  display: grid;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  border-radius: calc(var(--radius-lg) - 8px);
  background:
    radial-gradient(circle at 24% 16%, rgb(255 255 255 / 88%), transparent 52%),
    var(--workout-progress-soft);
}

.workout-preview-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workout-preview-placeholder {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  color: var(--workout-progress-strong);
}

.workout-preview-placeholder .material-symbols-rounded {
  font-size: clamp(4.5rem, 7vw, 7rem);
  opacity: 0.2;
}

.workout-preview-placeholder small {
  font-size: 0.72rem;
  font-weight: 760;
}

.workout-step-navigation {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.65rem, 1vw, 0.85rem);
}

.step-context-card {
  display: grid;
  height: 9.5rem;
  min-height: 9.5rem;
  padding: clamp(0.8rem, 1.1vw, 1rem);
  grid-template-rows: auto 1fr;
  gap: 0.75rem;
}

.step-context-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.step-context-content {
  display: grid;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.35rem;
  text-align: center;
}

.step-context-content strong {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow-wrap: anywhere;
  font-size: clamp(0.92rem, 1.05vw, 1.15rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.step-context-content small {
  display: flex;
  min-height: 1.1rem;
  align-items: flex-end;
  justify-content: center;
  color: var(--workout-progress-strong);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.45;
}

.step-context-card.is-empty {
  background: rgb(255 255 255 / 46%);
  box-shadow: var(--shadow-xs);
}

.step-context-card.is-empty .step-context-content {
  opacity: 0.58;
}

.workout-focus-card {
  position: relative;
  display: grid;
  min-height: 0;
  padding: clamp(0.75rem, 1.2vw, 1.1rem) clamp(1rem, 1.5vw, 1.4rem);
  grid-area: focus;
  place-items: center;
  text-align: center;
}

.workout-focus-heading {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: calc(50% + var(--actual-timer-half) - 0.25rem);
  left: 0;
  display: grid;
  width: min(calc(100% - 1rem), 30rem);
  margin-inline: auto;
  padding: clamp(0.75rem, 1.1vw, 1rem) clamp(1rem, 1.5vw, 1.35rem);
  justify-items: center;
  gap: 0.35rem;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 18px;
  background: rgb(255 255 255 / 68%);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.workout-focus-status {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.workout-focus-card .phase-pill {
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.68rem;
  box-shadow: none;
}

.workout-focus-card .phase-pill::before {
  width: 0.42rem;
  height: 0.42rem;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--phase-color) 12%, transparent);
}

.workout-focus-card h1 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(1.45rem, 2vw, 2.25rem);
  letter-spacing: -0.05em;
  line-height: 1.08;
}

.workout-focus-display {
  position: absolute;
  inset: 0;
  display: grid;
  min-height: 0;
  place-items: center;
  transform: translateY(clamp(0.75rem, 1.5vh, 1rem));
}

.workout-focus-card .timer-ring-wrap {
  width: var(--actual-timer-size);
}

.workout-focus-card .timer-center {
  width: 84%;
}

.workout-focus-card .timer-value {
  font-size: clamp(4.5rem, min(6vw, 12vh), 7rem);
}

.workout-focus-card .reps-target {
  width: min(calc(var(--actual-timer-size) - clamp(2.5rem, 3.5vw, 3.5rem)), 100%);
  min-height: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  aspect-ratio: 1;
  place-content: center;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 18%, rgb(255 255 255 / 92%), transparent 54%),
    rgb(255 255 255 / 66%);
  box-shadow: 0 24px 56px var(--phase-glow), inset 0 0 0 1px rgb(98 91 246 / 7%);
  backdrop-filter: blur(14px);
}

.workout-focus-card .reps-value {
  font-size: clamp(5rem, min(9vw, 15vh), 8rem);
  letter-spacing: -0.065em;
}

.workout-guide-card {
  display: flex;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  padding: clamp(0.8rem, 1vw, 1rem);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 80%);
  flex-direction: column;
}

.workout-guide-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.workout-guide-heading > span {
  color: var(--workout-technique-color);
  font-size: 1.1rem;
}

.workout-guide-heading svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}

.workout-guide-errors .workout-guide-heading > span {
  color: var(--amber);
}

.workout-guide-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.workout-guide-card .tip-list {
  gap: 0.34rem;
  color: color-mix(in srgb, var(--ink) 72%, var(--ink-soft));
  font-size: clamp(0.8rem, 0.9vw, 0.9rem);
  font-weight: 540;
  line-height: 1.42;
  text-align: center;
}

.workout-guide-card .tip-list li {
  width: 100%;
  padding-left: 0;
  text-align: center;
}

.workout-guide-card .tip-list li::before {
  position: static;
  display: inline-block;
  width: 0.44rem;
  height: 0.44rem;
  margin-right: 0.55rem;
  background: var(--workout-technique-color);
  box-shadow: 0 0 0 3px var(--workout-technique-soft);
  vertical-align: 0.08em;
}

.workout-guide-errors .tip-list li::before {
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft);
}

.workout-guide-card .tip-empty {
  color: var(--ink-muted);
}

.workout-total-card {
  display: grid;
  min-height: 11.5rem;
  padding: clamp(1rem, 1.4vw, 1.25rem);
  place-items: center;
  align-content: center;
  gap: 0.65rem;
  text-align: center;
}

.workout-total-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--ink-muted);
}

.workout-total-heading h2 {
  margin: 0;
  font-size: 0.9rem;
}

.workout-total-card .session-clock {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: clamp(2.7rem, 4vw, 3.8rem);
  font-weight: 820;
  line-height: 1;
  backdrop-filter: none;
}

.workout-total-card .workout-remaining {
  display: inline-flex;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.75rem;
  box-shadow: none;
}

.workout-stage-progress-card {
  display: grid;
  min-height: 8.25rem;
  padding: clamp(1rem, 1.4vw, 1.25rem);
  align-content: center;
  gap: 0.55rem;
}

.workout-stage-progress-card > span:first-child {
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.workout-stage-progress-card > strong {
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  letter-spacing: -0.025em;
  text-align: center;
}

.workout-stage-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 720;
}

.workout-stage-progress-meta strong {
  color: var(--workout-progress-strong);
}

.workout-stage-progress-track {
  overflow: hidden;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
}

.workout-stage-progress-track > span {
  display: block;
  width: var(--stage-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--workout-progress-color);
  box-shadow: 0 0 12px var(--workout-progress-glow);
  transition: width 320ms var(--ease-out);
}

.workout-controls {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  display: grid;
  width: min(100%, 760px);
  grid-template-columns: minmax(7rem, 1fr) minmax(16rem, 1.7fr) minmax(7rem, 1fr);
  gap: 0.65rem;
}

.workout-controls > .control-button,
.workout-controls > .main-workout-button {
  width: 100%;
  height: clamp(54px, 6.5vh, 64px);
  min-width: 0;
  min-height: clamp(54px, 6.5vh, 64px);
  padding-block: 0.5rem;
  padding-inline: 0.85rem;
}

.workout-controls .control-button-label {
  font-size: clamp(0.72rem, 0.85vw, 0.84rem);
  line-height: 1.15;
  text-align: center;
}

.workout-controls .control-button-skip {
  border-color: color-mix(in srgb, var(--ink-muted) 18%, transparent);
  background: rgb(255 255 255 / 38%);
  color: var(--ink-muted);
  box-shadow: none;
}

.workout-controls .control-button-skip:hover {
  border-color: color-mix(in srgb, var(--ink-muted) 30%, transparent);
  background: rgb(255 255 255 / 68%);
  color: var(--ink-soft);
  box-shadow: var(--shadow-xs);
}

@media (max-width: 1180px) {
  .workout-screen {
    --actual-timer-size: min(64vw, 50vh, 28rem);
    --actual-timer-half: min(32vw, 25vh, 14rem);
  }

  .workout-primary-grid {
    --workout-side-column-width: clamp(12rem, 25vw, 21rem);

    grid-template-columns: var(--workout-side-column-width) minmax(20rem, 1fr) var(--workout-side-column-width);
  }
}

@media (max-height: 760px) and (min-width: 841px) {
  .workout-screen {
    --actual-timer-size: min(34vw, 42vh, 19rem);
    --actual-timer-half: min(17vw, 21vh, 9.5rem);
  }

  .workout-focus-heading {
    bottom: calc(50% + var(--actual-timer-half) - 0.35rem);
  }

  .workout-focus-display {
    transform: translateY(0.75rem);
  }
}

@media (max-width: 760px) {
  .workout-screen {
    --actual-timer-size: min(74vw, 39vh, 22rem);

    overflow: hidden;
    padding-inline: max(0.65rem, env(safe-area-inset-left));
  }

  .workout-screen > .workout-stage {
    align-content: stretch;
  }

  .workout-primary-grid {
    grid-template-areas: "focus";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .workout-focus-card {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .workout-focus-heading,
  .workout-focus-display {
    position: static;
    transform: none;
  }

  .workout-current-column,
  .workout-session-column {
    display: none;
  }

  .workout-controls {
    grid-template-columns: minmax(54px, 0.7fr) minmax(150px, 1.8fr) minmax(54px, 0.7fr);
    gap: 0.45rem;
  }
}

@media (max-width: 560px) {
  .workout-overall-progress {
    padding-inline: 0.7rem;
  }

  .overall-stage-label {
    font-size: 0.48rem;
  }

  .workout-screen .workout-header-end {
    width: 46px;
    padding: 0;
  }

  .workout-header-end > span:last-child {
    display: none;
  }

  .workout-top-actions {
    gap: 0.35rem;
  }

  .workout-focus-card {
    padding: 0.85rem;
  }

  .step-context-heading {
    font-size: 0.62rem;
  }

  .step-context-content small {
    font-size: 0.68rem;
  }

  .workout-controls .control-button-label {
    display: inline;
    font-size: 0.65rem;
  }
}

@media (orientation: landscape) and (max-height: 580px) {
  .workout-screen {
    --actual-timer-size: min(24vw, 42vh, 13rem);

    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .workout-screen > .workout-stage {
    overflow: hidden;
  }

  .workout-primary-grid {
    grid-template-areas: "focus";
    grid-template-columns: minmax(18rem, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .workout-focus-card {
    min-height: 17rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .workout-focus-heading,
  .workout-focus-display {
    position: static;
    transform: none;
  }

  .workout-current-column,
  .workout-session-column {
    display: none;
  }

  .workout-focus-card h1 {
    font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  }

  .workout-controls {
    width: min(100%, 680px);
    margin-inline: auto;
    grid-template-columns: minmax(90px, 1fr) minmax(180px, 1.7fr) minmax(90px, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-view.is-active,
  .modal-card,
  .completion-card,
  .workout-screen.phase-active .timer-ring-wrap,
  .workout-screen.is-urgent .timer-ring-wrap,
  .loading-mark {
    animation: none !important;
  }
}

/* Material Symbols optical sizing inside the existing controls. */

.button-icon.material-symbols-rounded {
  font-size: 1rem;
  font-weight: 400;
}

.main-button-icon.material-symbols-rounded {
  font-size: 24px;
  font-weight: 600;
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}

.metric-icon.material-symbols-rounded {
  font-size: 1.25rem;
  font-weight: 400;
}

.settings-icon.material-symbols-rounded {
  font-size: 1.35rem;
  font-weight: 400;
}

.placeholder-index.material-symbols-rounded {
  font-size: 1.2rem;
  font-weight: 400;
}

.exercise-card-footer .material-symbols-rounded,
.exercise-guide-card .tip-list li > .material-symbols-rounded {
  font-size: 1rem;
  font-weight: 400;
}

.toast-region .toast > .material-symbols-rounded:first-child {
  font-size: 1.1rem;
  font-weight: 400;
}

/* Mobile interface audit fixes */

.nav-mobile-icon,
.nav-mobile-label {
  display: none;
}

@media (max-width: 840px) {
  html,
  body {
    min-width: 0;
  }

  body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .topbar {
    background: rgb(255 255 255 / 97%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .topbar .main-nav {
    top: auto !important;
    left: 0.65rem;
    right: 0.65rem;
    width: calc(100% - 1.3rem);
    min-height: 62px;
    padding: 4px;
  }

  .topbar .nav-item {
    display: grid;
    min-height: 54px;
    align-content: center;
    justify-items: center;
    gap: 1px;
    padding: 0.2rem 0.1rem;
    font-size: 0.64rem;
    line-height: 1.1;
  }

  .nav-desktop-label {
    display: none;
  }

  .nav-mobile-icon,
  .nav-mobile-label {
    display: block;
  }

  .nav-mobile-icon.material-symbols-rounded {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
  }

  .nav-mobile-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-content {
    padding-bottom: calc(6.35rem + env(safe-area-inset-bottom));
  }

  .topbar-actions .header-settings-button,
  .modal-close,
  .round-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .topbar .brand {
    min-height: 44px;
  }

  .nutrition-header-actions .nutrition-view-tab,
  .nutrition-month-nav-button {
    min-height: 44px;
  }

  .nutrition-month-nav-button {
    width: 44px;
  }

  .month-calendar-switcher .nutrition-month-nav-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .session-resume-button,
  .session-delete-button {
    min-height: 44px;
    padding-inline: 0.75rem;
  }

  .history-pagination {
    gap: 0.25rem;
  }

  .history-page-button {
    width: 36px;
    height: 40px;
  }

  .history-pagination-gap {
    width: 24px;
    height: 40px;
  }

  .workout-card-actions.session-actions {
    --action-size: 44px;
  }

  .workout-card-actions.session-actions > .workout-card-actions-menu {
    right: auto;
    left: 0;
  }

  .exercise-card-carousel-dots {
    display: none;
  }

  .modal-backdrop {
    padding: 0.5rem;
  }

  .modal-card {
    max-height: calc(100dvh - 1rem);
    overscroll-behavior: contain;
  }

  .modal-card > h2 {
    padding-right: 3.25rem;
  }

  .modal-backdrop .modal-card.exercise-modal-card {
    width: 100%;
    max-width: 720px;
    max-height: calc(100dvh - 1rem);
  }

  .modal-card.exercise-modal-card .exercise-detail-layout {
    width: 100%;
    max-height: calc(100dvh - 1rem);
  }

  .modal-card .form-grid select {
    width: 100%;
    min-height: 48px;
    padding: 0.68rem 0.78rem;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: var(--surface-soft);
    outline: none;
  }

  .modal-card .form-grid select:focus {
    border-color: var(--primary);
    box-shadow: var(--ring);
  }

  .nutrition-entry {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }

  .nutrition-entry-icon {
    display: none;
  }

  .nutrition-entry-copy {
    min-width: 0;
  }

  .nutrition-entry-copy > strong {
    padding-right: 3rem;
  }

  .nutrition-entry.has-composition .nutrition-entry-copy > strong {
    padding-right: 6.25rem;
  }

  .nutrition-entry-actions {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
  }

  .nutrition-macro-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nutrition-modal-card .nutrition-form-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nutrition-composition-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .data-actions .button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .view-header h1 {
    font-size: clamp(2rem, 10vw, 2.45rem);
  }

  .settings-card {
    padding: 1rem;
  }

  .nutrition-target-settings {
    grid-template-columns: 1fr;
  }

  .nutrition-target-settings .field-row:nth-child(2) {
    border-top: 1px solid var(--line);
  }

  .settings-data-section > .button {
    width: 100%;
  }

  .nutrition-items-preview .nutrition-products-list {
    grid-template-columns: 1fr;
  }

  .overall-progress-labels {
    display: none;
  }

  .control-cluster-right .danger-control {
    display: inline-flex !important;
  }
}

@media (max-width: 480px) {
  .nutrition-summary {
    grid-template-columns: 1fr;
  }

  .nutrition-summary article {
    min-height: 132px;
    padding: 0.9rem;
  }

}

@media (orientation: landscape) and (max-height: 580px) and (max-width: 950px) {
  .workout-screen {
    --actual-timer-size: min(26vw, 48vh, 11rem);

    grid-template-rows: 44px 5px minmax(0, 1fr) 50px;
    gap: 0.35rem;
    min-width: 0;
    min-height: 100dvh;
    overflow: hidden;
    padding:
      max(0.45rem, env(safe-area-inset-top))
      max(0.65rem, env(safe-area-inset-right))
      max(0.45rem, env(safe-area-inset-bottom))
      max(0.65rem, env(safe-area-inset-left));
  }

  .workout-screen > .workout-topbar {
    gap: 0.55rem;
  }

  .workout-session-title {
    max-width: none;
  }

  .round-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .compact-action {
    min-height: 44px;
  }

  .overall-progress-labels {
    display: none;
  }

  .workout-screen > .workout-stage {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch;
  }

  .exercise-visual-card,
  .exercise-guide-card {
    display: none;
  }

  .timer-column {
    display: grid;
    width: 100%;
    grid-template-areas:
      "phase timer"
      "title timer"
      "subtitle timer"
      "adjusters timer";
    grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 11rem);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    column-gap: clamp(0.8rem, 2.5vw, 1.5rem);
    align-items: center;
    align-content: center;
    justify-items: start;
    text-align: left;
  }

  .timer-column > .phase-pill {
    grid-area: phase;
    justify-self: start;
    margin: 0;
  }

  .timer-column > h1 {
    grid-area: title;
    margin: 0;
    font-size: clamp(1.35rem, 3.5vw, 2rem);
  }

  .timer-column > .exercise-subtitle {
    grid-area: subtitle;
    margin: 0;
  }

  .timer-column > .timer-ring-wrap,
  .timer-column > .reps-target {
    grid-area: timer;
    justify-self: center;
  }

  .timer-column .timer-center {
    width: 100%;
  }

  .timer-column .timer-value {
    font-size: clamp(2.8rem, 7.2vw, 3.6rem);
  }

  .timer-column > .time-adjusters {
    grid-area: adjusters;
    margin: 0;
  }

  .workout-controls {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    width: min(100%, 23rem);
    margin-inline: auto 0;
    grid-template-columns: 50px minmax(150px, 1fr) 50px;
    gap: 0.4rem;
  }

  .control-cluster {
    display: flex;
    gap: 0;
  }

  .control-cluster .control-button:nth-child(2),
  .control-cluster-right .control-button:first-child {
    display: none;
  }

  .control-cluster-right .danger-control {
    display: inline-flex !important;
  }

  .control-button,
  .main-workout-button {
    width: 100%;
    min-width: 0;
    height: 50px;
    min-height: 50px;
    padding: 0.5rem;
  }

  .control-button {
    font-size: 0;
  }

  .control-button > span {
    font-size: 1.15rem;
  }

  .main-workout-button {
    font-size: 0.92rem;
  }
}

/* Unified dropdown arrow */

select,
select.select,
.week-picker select,
.exercise-filters > select,
.field-row select,
.modal-card .form-grid select {
  padding-right: 3rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%234f5a70'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 24px 24px;
}

select::-ms-expand {
  display: none;
}

/* Workout and exercise management */

.view-header > div > p {
  max-width: 680px;
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
}

.workout-library-header,
.workout-editor-header,
.exercise-view-header {
  align-items: center;
  gap: 1rem;
}

.workout-library-actions,
.exercise-header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.view-header > .workout-library-actions,
.view-header > .exercise-header-actions {
  transform: none;
}

.workout-library-actions {
  align-items: flex-start;
}

.workout-card-actions {
  --action-size: 36px;
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: var(--action-size);
  height: var(--action-size);
  line-height: 1;
}

.workout-card-actions[open] {
  z-index: 20;
}

.session-row:has(.workout-card-actions[open]),
.workout-editor-row:has(.workout-card-actions[open]) {
  position: relative;
  z-index: 20;
}

.workout-card-actions > summary {
  display: grid;
  width: var(--action-size);
  height: var(--action-size);
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgb(255 255 255 / 72%);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  list-style: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.workout-card-actions > summary::-webkit-details-marker {
  display: none;
}

.workout-card-actions > summary > span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(-1px);
}

.workout-card-actions > summary:hover,
.workout-card-actions[open] > summary {
  border-color: var(--primary);
  background: var(--surface);
  color: var(--primary);
}

.workout-card-actions > summary:focus-visible {
  outline: 3px solid rgb(98 91 246 / 18%);
  outline-offset: 2px;
}

.workout-card-actions.session-actions > summary {
  border-radius: 50%;
}

.workout-card-actions-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  width: max-content;
  min-width: 188px;
  gap: 0.2rem;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.workout-card-actions-menu button {
  display: flex;
  width: 100%;
  min-height: 40px;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 720;
  text-align: left;
  cursor: pointer;
}

.workout-card-actions-menu button:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.workout-card-actions-menu button[data-delete-workout]:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.workout-card-actions-menu button[data-delete-session]:hover,
.workout-card-actions-menu button[data-weight-delete]:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.session-duration-modal-card {
  width: min(100%, 480px);
}

.workout-card-actions .material-symbols-rounded {
  font-size: 1.1rem;
}

.management-action-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
}

.exercise-editor-card {
  width: min(720px, calc(100vw - 2rem));
}

.exercise-editor-card > h2 {
  margin-top: 0;
}

.editor-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: flex-end;
}

.workout-builder-backdrop {
  padding: clamp(0.5rem, 2vw, 1.5rem);
}

.modal-card.workout-builder-card {
  display: grid;
  width: min(1480px, calc(100vw - 2rem));
  max-width: none;
  height: min(900px, calc(100dvh - 2rem));
  max-height: none;
  padding: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgb(174 184 200 / 72%);
  border-radius: 24px;
}

.workout-builder-header {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.workout-builder-header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.workout-builder-header p {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
}

.workout-builder-header .modal-close {
  position: static;
  flex: 0 0 auto;
}

.workout-builder-meta > .builder-add-section-menu {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
}

.workout-builder-meta > .builder-add-section-menu > summary {
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  list-style: none;
}

.workout-builder-meta > .builder-add-section-menu > summary::-webkit-details-marker {
  display: none;
}

.workout-builder-meta > .builder-add-section-menu > summary:hover,
.workout-builder-meta > .builder-add-section-menu[open] > summary {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.workout-builder-meta > .builder-add-section-menu > summary .material-symbols-rounded {
  display: block;
  color: var(--primary);
  font-size: 1.1rem;
}

.workout-builder-meta > .builder-add-section-menu .builder-add-section-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  width: 190px;
  padding: 0.35rem;
  gap: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.workout-builder-meta > .builder-add-section-menu .builder-add-section-options button {
  display: flex;
  width: 100%;
  min-height: 36px;
  padding: 0 0.65rem;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}

.workout-builder-meta > .builder-add-section-menu .builder-add-section-options button:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.workout-builder-meta {
  position: relative;
  z-index: 9;
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem 1.4rem;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr) auto;
  align-items: end;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.workout-builder-meta > label,
.exercise-editor-card .form-grid > label {
  display: grid;
  gap: 0.35rem;
}

.workout-builder-meta label > span,
.exercise-editor-card .form-grid label > span {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 800;
}

.workout-builder-meta input,
.exercise-editor-card .form-grid input,
.exercise-editor-card .form-grid select,
.exercise-editor-card .form-grid textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background-color: var(--surface);
  outline: none;
}

.workout-builder-meta input:focus,
.exercise-editor-card .form-grid input:focus,
.exercise-editor-card .form-grid select:focus,
.exercise-editor-card .form-grid textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.builder-summary {
  position: relative;
  z-index: 9;
  display: flex;
  min-height: 46px;
  padding: 0.5rem 0.7rem;
  gap: 0.65rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  white-space: nowrap;
}

.builder-summary span {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.builder-summary strong {
  color: var(--ink);
  font-size: 1rem;
}

.workout-builder-layout {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(300px, 0.75fr) minmax(540px, 1.45fr);
  background: var(--surface);
}

.builder-library,
.builder-sections-panel {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.builder-library {
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
}

.builder-column-heading {
  display: flex;
  gap: 0.8rem;
  min-height: 70px;
  padding: 0.8rem 1rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.builder-column-heading > div {
  display: grid;
}

.builder-column-heading > div > span {
  font-weight: 850;
}

.builder-column-heading small {
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.builder-search {
  position: relative;
  width: min(150px, 45%);
}

.builder-search > span {
  position: absolute;
  top: 50%;
  left: 0.65rem;
  color: var(--ink-muted);
  font-size: 1.05rem;
  transform: translateY(-50%);
}

.builder-search input {
  width: 100%;
  height: 42px;
  padding: 0.55rem 0.65rem 0.55rem 2rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  outline: none;
}

.builder-search input:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.builder-exercise-list,
.builder-sections {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.builder-exercise-list {
  display: grid;
  padding: 0.8rem;
  gap: 0.55rem;
  align-content: start;
}

.builder-exercise-group {
  --builder-stage-color: #615bf6;
  display: grid;
  gap: 0;
}

.builder-exercise-group.category-tone-2 { --builder-stage-color: var(--coral); }
.builder-exercise-group.category-tone-3 { --builder-stage-color: var(--amber); }
.builder-exercise-group.category-tone-4 { --builder-stage-color: var(--green); }
.builder-exercise-group.category-tone-5 { --builder-stage-color: var(--cyan); }

.builder-exercise-group[data-builder-stage-index="0"] { --builder-stage-color: #d8792b; }
.builder-exercise-group[data-builder-stage-index="1"] { --builder-stage-color: #a65fc1; }
.builder-exercise-group[data-builder-stage-index="2"] { --builder-stage-color: #615bf6; }
.builder-exercise-group[data-builder-stage-index="3"] { --builder-stage-color: #168778; }
.builder-exercise-group[data-builder-stage-index="4"] { --builder-stage-color: #4679bd; }

.builder-exercise-group-heading {
  display: grid;
  min-width: 0;
  padding: 0 0.1rem;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  justify-items: center;
}

.builder-exercise-group-heading strong {
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  padding: 0.28rem 0.55rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--builder-stage-color) 26%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--builder-stage-color) 10%, var(--surface));
  color: var(--builder-stage-color);
  font-size: 0.7rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-exercise-group-heading small {
  min-width: 1.45rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--builder-stage-color) 18%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--builder-stage-color) 10%, var(--surface));
  color: var(--builder-stage-color);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.builder-exercise-group-items {
  display: grid;
  gap: 0.55rem;
}

.builder-exercise-item {
  display: grid;
  min-width: 0;
  padding: 0.6rem;
  gap: 0.55rem;
  grid-template-columns: 42px minmax(0, 1fr) 40px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.builder-exercise-item:hover {
  border-color: rgb(90 83 237 / 45%);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.builder-exercise-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 900;
}

.builder-exercise-copy {
  display: grid;
  min-width: 0;
}

.builder-exercise-copy strong,
.builder-exercise-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-exercise-copy strong {
  font-size: 0.9rem;
}

.builder-exercise-copy small {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.builder-exercise-item > button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: var(--primary);
  color: white;
}

.builder-exercise-item > button:hover {
  background: var(--primary-hover);
}

.builder-exercise-item > button .material-symbols-rounded {
  font-size: 1.2rem;
}

.builder-library-empty {
  padding: 2rem 1rem;
  color: var(--ink-soft);
  text-align: center;
}

.builder-sections {
  position: relative;
  padding: 1rem 1.2rem 1.5rem;
  background:
    linear-gradient(90deg, transparent 37px, rgb(90 83 237 / 9%) 37px, rgb(90 83 237 / 9%) 39px, transparent 39px),
    var(--surface);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.builder-empty {
  display: grid;
  min-height: 100%;
  padding: 2rem;
  place-content: center;
  justify-items: center;
  border: 2px dashed var(--line);
  border-radius: 18px;
  color: var(--ink-soft);
  text-align: center;
}

.builder-empty-arrow {
  margin-bottom: 0.4rem;
  color: var(--primary);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
}

.builder-empty small {
  margin-top: 0.2rem;
}

.workout-builder-footer {
  display: flex;
  gap: 1rem;
  min-height: 72px;
  padding: 0.85rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.workout-builder-footer > p {
  display: flex;
  margin: 0;
  gap: 0.4rem;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.builder-info-icon {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid currentcolor;
  border-radius: 50%;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 1050px) {
  .workout-library-header,
  .workout-editor-header,
  .exercise-view-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .workout-library-actions,
  .exercise-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .workout-builder-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .builder-summary {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .workout-builder-layout {
    grid-template-columns: minmax(260px, 0.7fr) minmax(460px, 1.3fr);
  }

}

@media (max-width: 800px) {
  .modal-card.workout-builder-card {
    width: calc(100vw - 1rem);
    height: calc(100dvh - 1rem);
    border-radius: 18px;
  }

  .workout-builder-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(120px, 0.7fr) minmax(160px, 1.3fr);
  }

  .builder-library {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .workout-builder-header,
  .workout-builder-meta,
  .workout-builder-footer {
    padding-inline: 1rem;
  }

  .workout-builder-footer {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 680px) {
  .workout-library-actions,
  .exercise-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .exercise-filters {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .search-field {
    width: 100%;
  }

  .exercise-filters > select,
  #exerciseTrainingStageSelect {
    width: 100%;
    max-width: none;
  }

  .workout-library-actions .button,
  .exercise-header-actions .button {
    width: 100%;
    min-height: 48px;
  }

  .workout-builder-header p,
  .workout-builder-footer > p {
    display: none;
  }

  .workout-builder-meta {
    grid-template-columns: 1fr;
  }

  .builder-summary {
    grid-column: auto;
    justify-content: space-between;
  }

  .builder-column-heading {
    min-height: 62px;
    padding: 0.65rem 0.75rem;
  }

  .builder-exercise-list {
    padding: 0.6rem;
  }

  .builder-sections {
    padding: 0.75rem 0.65rem 1rem;
    background:
      linear-gradient(90deg, transparent 26px, rgb(90 83 237 / 9%) 26px, rgb(90 83 237 / 9%) 28px, transparent 28px),
      var(--surface);
  }

  .workout-builder-footer {
    min-height: 66px;
    justify-content: flex-end;
  }

  .exercise-editor-card {
    width: calc(100vw - 1rem);
  }

  .editor-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 430px) {
  .builder-summary span {
    display: grid;
    justify-items: center;
  }

  .builder-search {
    width: 42%;
  }

  .builder-column-heading > div > small {
    display: none;
  }
}

@media (max-height: 500px) and (min-width: 681px) {
  .modal-card.workout-builder-card {
    height: calc(100dvh - 1rem);
  }

  .workout-builder-header {
    min-height: 56px;
    padding: 0.55rem 1rem;
  }

  .workout-builder-header p,
  .workout-builder-footer > p,
  .workout-builder-meta label > span {
    display: none;
  }

  .workout-builder-meta {
    padding: 0.45rem 1rem;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .workout-builder-meta input {
    min-height: 44px;
  }

  .builder-summary {
    grid-column: auto;
    padding: 0.25rem 0.7rem;
  }

  .builder-column-heading {
    min-height: 48px;
    padding: 0.4rem 0.7rem;
  }

  .workout-builder-footer {
    min-height: 58px;
    padding: 0.4rem 1rem;
  }
}

/* Exercise management and galleries. */

.workout-card-context {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
  gap: 0.55rem;
  align-items: center;
  justify-content: flex-end;
}

.workout-card-context .workout-day {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deleted-exercises-panel {
  display: flex;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgb(98 91 246 / 22%);
  border-radius: 16px;
  background: var(--primary-soft);
}

.deleted-exercises-panel > div:first-child {
  display: grid;
  gap: 0.12rem;
}

.deleted-exercises-panel small {
  color: var(--ink-soft);
}

#deletedExercisesList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

#deletedExercisesList button {
  display: inline-flex;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  gap: 0.55rem;
  align-items: center;
  border: 1px solid rgb(98 91 246 / 24%);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
}

#deletedExercisesList button strong {
  color: var(--primary);
}

.exercise-editor-card {
  width: min(860px, calc(100vw - 2rem));
}

.exercise-image-editor {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.exercise-image-editor-heading {
  display: grid;
  gap: 0.25rem;
}

.exercise-image-editor-heading small,
.exercise-image-status {
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.exercise-image-previews {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.exercise-image-upload-tile {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  aspect-ratio: 4 / 3;
  place-content: center;
  place-items: center;
  gap: 0.65rem;
  border: 1px dashed var(--line-strong);
  border-radius: 13px;
  background: var(--surface-muted);
  color: var(--ink-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.exercise-image-upload-tile:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  transform: translateY(-1px);
}

.exercise-image-upload-tile > .material-symbols-rounded {
  display: grid;
  overflow: hidden;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: 0 6px 18px rgb(30 42 68 / 9%);
}

.exercise-image-upload-tile > span:last-child {
  display: grid;
  gap: 0.2rem;
}

.exercise-image-upload-tile strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.exercise-image-upload-tile small {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
}

.exercise-image-upload-tile.is-empty {
  grid-column: 1 / -1;
  min-height: 148px;
  aspect-ratio: auto;
  grid-template-columns: auto minmax(0, max-content);
  text-align: left;
}

.exercise-image-upload-tile:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.exercise-image-preview {
  position: relative;
  overflow: hidden;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}

.exercise-image-preview > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exercise-image-preview > span {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 88%);
  color: var(--primary);
  font-size: 0.67rem;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

.exercise-image-preview > div {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  left: 0.4rem;
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(3, 1fr);
}

.exercise-image-preview button {
  display: grid;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 9px;
  background: rgb(255 255 255 / 88%);
  color: var(--ink);
  backdrop-filter: blur(8px);
}

.exercise-image-preview button:disabled {
  opacity: 0.4;
}

.exercise-image-preview button:last-child {
  color: var(--danger);
}

.exercise-image-status {
  margin: 0;
  text-align: right;
}

.exercise-training-stages {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.exercise-training-stages legend {
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
}

#exerciseTrainingStageOptions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 0.55rem;
}

.exercise-training-stage-option {
  --exercise-stage-color: var(--primary);
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.exercise-training-stage-option[data-training-stage-index="0"],
.exercise-card-tag--stage[data-training-stage-index="0"] {
  --exercise-stage-color: #d8792b;
}

.exercise-training-stage-option[data-training-stage-index="1"],
.exercise-card-tag--stage[data-training-stage-index="1"] {
  --exercise-stage-color: #6e62d9;
}

.exercise-training-stage-option[data-training-stage-index="2"],
.exercise-card-tag--stage[data-training-stage-index="2"] {
  --exercise-stage-color: #3578bc;
}

.exercise-training-stage-option[data-training-stage-index="3"],
.exercise-card-tag--stage[data-training-stage-index="3"] {
  --exercise-stage-color: #168676;
}

.exercise-training-stage-option[data-training-stage-index="4"],
.exercise-card-tag--stage[data-training-stage-index="4"] {
  --exercise-stage-color: #697386;
}

.exercise-training-stage-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.exercise-training-stage-option span {
  display: grid;
  min-height: 60px;
  padding: 0.65rem 0.7rem;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.25;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.exercise-training-stage-option span::before {
  content: "";
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--exercise-stage-color) 48%, var(--line));
  border-radius: 50%;
  background: var(--surface);
  color: white;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  transition: border-color 150ms ease, background 150ms ease;
}

.exercise-training-stage-option:hover span {
  border-color: color-mix(in srgb, var(--exercise-stage-color) 42%, var(--line));
  transform: translateY(-1px);
}

.exercise-training-stage-option input:checked + span {
  border-color: color-mix(in srgb, var(--exercise-stage-color) 58%, var(--line));
  background: color-mix(in srgb, var(--exercise-stage-color) 10%, var(--surface));
  color: var(--exercise-stage-color);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--exercise-stage-color) 14%, transparent);
}

.exercise-training-stage-option input:checked + span::before {
  content: "\2713";
  border-color: var(--exercise-stage-color);
  background: var(--exercise-stage-color);
}

.exercise-training-stage-option input:focus-visible + span {
  outline: 3px solid rgb(98 91 246 / 28%);
  outline-offset: 2px;
}

.button-danger-quiet {
  border-color: rgb(211 64 86 / 28%);
  background: var(--danger-soft);
  color: var(--danger);
}

.button-danger-quiet:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--danger);
}

:root form :is(input, select, textarea).is-field-valid:not(:disabled) {
  border-color: var(--green);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 10%, transparent);
}

:root form :is(input, select, textarea).is-field-invalid:not(:disabled) {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 10%, transparent);
}

.exercise-detail-gallery,
.exercise-detail-carousel {
  position: relative;
  display: grid;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-muted);
}

.exercise-detail-gallery .exercise-detail-placeholder {
  width: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 0;
}

.exercise-detail-carousel .exercise-card-carousel-dots {
  bottom: 0.6rem;
}

@media (max-width: 800px) {
  .deleted-exercises-panel {
    align-items: stretch;
    flex-direction: column;
  }

  #deletedExercisesList {
    justify-content: flex-start;
  }

}

@media (max-width: 520px) {
  .exercise-image-previews {
    grid-template-columns: 1fr 1fr;
  }

  .exercise-image-upload-tile.is-empty {
    min-height: 160px;
    grid-template-columns: 1fr;
    text-align: center;
  }

}

/* Workout editor v3: sections, explicit loads, and minimap. */

.workout-builder-meta {
  grid-template-columns: minmax(150px, 190px) minmax(260px, 1fr) 160px minmax(250px, 0.9fr) auto 46px;
}

.workout-duration-field,
.builder-section-kind,
.builder-minimap-kind,
.builder-section-title-label,
.builder-input-with-unit > small {
  display: none;
}

.builder-item-fields,
.builder-item-identity,
.builder-section-marker,
.builder-input-with-unit {
  display: contents;
}

.builder-section-inline-settings {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.builder-section-inline-settings label {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.builder-section-inline-settings label > span {
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 800;
}

.workout-weekdays-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.workout-weekdays-field > legend {
  margin-bottom: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 800;
}

.workout-weekdays-options {
  display: grid;
  grid-template-columns: repeat(7, minmax(30px, 1fr));
  gap: 0.3rem;
}

.workout-weekdays-options label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.workout-weekdays-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.workout-weekdays-options span {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 800;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.workout-weekdays-options input:checked + span {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  background: var(--primary-soft);
  color: var(--primary);
}

.workout-weekdays-options input:focus-visible + span {
  outline: 3px solid rgb(98 91 246 / 24%);
  outline-offset: 2px;
}

.workout-builder-meta select,
.builder-section-card input,
.builder-section-card select {
  width: 100%;
  min-height: 42px;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
}

.workout-builder-meta select:focus,
.builder-section-card input:focus,
.builder-section-card select:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.workout-builder-layout {
  grid-template-columns: minmax(260px, 0.72fr) minmax(520px, 1.55fr) minmax(210px, 0.55fr);
}

.builder-library,
.builder-sections-panel,
.builder-minimap {
  min-width: 0;
  min-height: 0;
}

.builder-minimap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid var(--line);
  background: var(--surface-soft);
}

.builder-add-section-actions {
  display: flex !important;
  gap: 0.35rem;
  align-items: center;
}

.builder-add-section-actions button {
  min-height: 36px;
  padding: 0.42rem 0.58rem;
  border: 1px solid rgb(98 91 246 / 24%);
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.builder-sections {
  display: grid;
  gap: 0.85rem;
  grid-auto-rows: max-content;
  align-content: start;
  background: var(--surface);
}

.builder-section-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.builder-section-card.is-active {
  border-color: rgb(98 91 246 / 52%);
  box-shadow: 0 0 0 3px rgb(98 91 246 / 10%);
}

.builder-section-header {
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.builder-section-index,
.builder-item-index {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 900;
}

.builder-section-title input {
  min-height: 38px;
  padding-block: 0.4rem;
  font-weight: 850;
}

.builder-section-actions,
.builder-item-actions {
  display: flex;
  gap: 0.3rem;
}

.builder-section-actions button,
.builder-item-actions button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-soft);
}

.builder-section-actions button:disabled,
.builder-item-actions button:disabled {
  opacity: 0.35;
}

.builder-section-actions .material-symbols-rounded,
.builder-item-actions .material-symbols-rounded {
  font-size: 1rem;
}

.builder-section-settings {
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  grid-template-columns: minmax(140px, 1fr) minmax(80px, 0.4fr) minmax(150px, 0.65fr);
  border-bottom: 1px solid var(--line);
}

.builder-section-settings label,
.builder-stage-item label {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.builder-section-settings label > span,
.builder-stage-item label > span {
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 800;
}

.builder-section-items {
  display: grid;
  min-height: 58px;
  padding: 0.55rem;
  gap: 0.45rem;
}

.builder-section-empty {
  display: grid;
  min-height: 54px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--ink-muted);
  font-size: 0.76rem;
  text-align: center;
}

.builder-stage-item {
  display: grid;
  min-width: 0;
  gap: 0.45rem;
  padding: 0.55rem;
  grid-template-columns: 28px minmax(130px, 1.2fr) minmax(88px, 0.65fr) minmax(76px, 0.5fr) minmax(105px, 0.7fr) minmax(120px, 1fr) auto;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.builder-item-name {
  display: grid;
  min-width: 0;
  align-self: center;
}

.builder-item-name strong,
.builder-item-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-item-name strong {
  font-size: 0.82rem;
}

.builder-item-name small {
  color: var(--ink-soft);
  font-size: 0.67rem;
}

.builder-stage-item input,
.builder-stage-item select {
  min-height: 38px;
  padding: 0.42rem 0.5rem;
  font-size: 0.78rem;
}

.builder-item-actions {
  align-self: end;
}

.builder-minimap-list {
  display: grid;
  min-height: 0;
  padding: 0.7rem;
  gap: 0.55rem;
  align-content: start;
  overflow: auto;
}

.builder-minimap-section {
  display: grid;
  width: 100%;
  padding: 0.65rem;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.builder-minimap-section.is-active {
  border-color: rgb(98 91 246 / 52%);
  box-shadow: 0 0 0 2px rgb(98 91 246 / 10%);
}

.builder-minimap-section > span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
}

.builder-minimap-section > span > i {
  grid-row: 1 / 3;
  color: var(--primary);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.builder-minimap-section strong,
.builder-minimap-section small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-minimap-section strong {
  font-size: 0.78rem;
}

.builder-minimap-section small {
  color: var(--ink-soft);
  font-size: 0.65rem;
}

.builder-minimap-section > b {
  display: flex;
  align-items: center;
  min-height: 7px;
  gap: 3px;
}

.builder-minimap-round-count {
  flex-shrink: 0;
  line-height: 1;
}

.builder-minimap-section > b > i {
  width: 100%;
  min-width: 4px;
  max-width: 22px;
  height: 7px;
  border-radius: 99px;
  background: rgb(98 91 246 / 34%);
}

.builder-minimap-empty {
  padding: 1rem 0.5rem;
  color: var(--ink-muted);
  font-size: 0.75rem;
  text-align: center;
}

#deletedWorkoutsList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

#deletedWorkoutsList button {
  display: inline-flex;
  min-height: 40px;
  padding: 0.4rem 0.65rem;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid rgb(98 91 246 / 24%);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

#deletedWorkoutsList button strong {
  color: var(--primary);
}

@media (max-width: 1180px) {
  .workout-builder-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .builder-summary {
    grid-column: auto;
  }

  .workout-builder-layout {
    grid-template-columns: minmax(240px, 0.7fr) minmax(480px, 1.3fr);
  }

  .builder-minimap {
    grid-column: 1 / -1;
    grid-template-rows: auto auto;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .builder-minimap-list {
    display: flex;
    overflow-x: auto;
  }

  .builder-minimap-section {
    min-width: 190px;
  }
}

@media (max-width: 800px) {
  .workout-builder-layout {
    display: flex;
    overflow-y: auto;
    flex-direction: column;
  }

  .builder-minimap {
    order: 1;
  }

  .builder-library {
    order: 2;
    min-height: 230px;
    border-bottom: 1px solid var(--line);
  }

  .builder-sections-panel {
    order: 3;
  }

  .builder-exercise-list,
  .builder-sections {
    overflow: visible;
  }

  .builder-stage-item {
    grid-template-columns: 28px minmax(0, 1fr) minmax(90px, 0.55fr);
  }

  .builder-stage-item label:nth-of-type(2),
  .builder-stage-item label:nth-of-type(3),
  .builder-item-note,
  .builder-item-actions {
    grid-column: span 2;
  }

  .builder-section-header {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .builder-section-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 560px) {
  .workout-builder-meta,
  .builder-section-settings {
    grid-template-columns: 1fr;
  }

  .builder-add-section-actions {
    width: 100%;
    grid-column: 1 / -1;
  }

  .builder-add-section-actions button {
    flex: 1;
  }

  .builder-stage-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .builder-item-name {
    grid-column: 3;
  }

  .builder-stage-item label,
  .builder-stage-item label:nth-of-type(2),
  .builder-stage-item label:nth-of-type(3),
  .builder-item-note,
  .builder-item-actions {
    grid-column: 2 / -1;
  }

  #deletedWorkoutsList {
    justify-content: flex-start;
  }
}

/* Canonical workout and exercise details */

.exercise-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.exercise-detail-description {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.exercise-detail-safety {
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger-soft) 64%, var(--surface));
}

.exercise-technique-link,
.active-technique-link {
  display: inline-flex;
  width: fit-content;
  min-height: 42px;
  padding: 0.55rem 0.8rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 780;
  text-decoration: none;
}

.exercise-checkbox-field {
  display: flex !important;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  gap: 0.65rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}

.exercise-checkbox-field input {
  width: 20px !important;
  min-height: 20px !important;
  margin: 0;
}

.builder-stage-item {
  grid-template-columns: 28px minmax(130px, 1.15fr) minmax(88px, 0.62fr) minmax(76px, 0.48fr) minmax(64px, 0.4fr) minmax(105px, 0.66fr) minmax(72px, 0.42fr) minmax(120px, 1fr) auto;
}

.builder-item-side input {
  width: 20px;
  min-height: 20px;
  margin: 8px auto 5px;
}

.workout-remaining {
  display: inline-flex;
  min-height: 38px;
  padding: 0.45rem 0.7rem;
  align-items: center;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 62%);
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 760;
  white-space: nowrap;
}

.active-exercise-description {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.reps-target > #repsUnit {
  margin-top: 0.9rem;
  color: var(--phase-strong);
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  font-weight: 760;
}

.actual-reps-field {
  display: grid;
  width: min(100%, 220px);
  margin-top: 1.2rem;
  gap: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 760;
  text-align: left;
}

.actual-reps-field input {
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--phase-color) 32%, var(--line));
  border-radius: 12px;
  background: rgb(255 255 255 / 80%);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  text-align: center;
}

.exercise-guide-card {
  max-height: min(70dvh, 660px);
  overflow: auto;
}

.exercise-guide-card .tip-list-errors li,
.exercise-guide-card .tip-list-warnings li {
  display: block;
  padding-left: 1.15rem;
}

.exercise-guide-card .tip-list-errors li::before,
.exercise-guide-card .tip-list-warnings li::before {
  display: block;
}

.exercise-guide-card .tip-list-warnings li::before {
  background: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-soft);
}

@media (max-width: 800px) {
  .builder-stage-item {
    grid-template-columns: 28px minmax(0, 1fr) minmax(90px, 0.55fr);
  }

  .builder-stage-item label,
  .builder-item-note,
  .builder-item-actions {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .workout-remaining {
    display: none;
  }

  .exercise-guide-card {
    max-height: none;
  }

  .workout-controls {
    grid-template-columns: 108px minmax(132px, 1fr) 108px;
  }

  .control-cluster {
    gap: 4px;
  }

  .control-cluster .control-button,
  .control-cluster-right .control-button {
    display: inline-flex !important;
    min-width: 0;
    padding-inline: 0.45rem;
    font-size: 0;
  }

  .control-cluster .control-button > span,
  .control-cluster-right .control-button > span {
    font-size: 1rem;
  }
}

/* Simplified desktop workout editor and exercise library. */

.exercise-library-grid {
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.exercise-library-category-group {
  --category-accent: var(--primary);

  display: grid;
  padding: 1rem;
  gap: 1rem;
  border: 1px solid color-mix(in srgb, var(--category-accent) 16%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--category-accent) 4%, var(--surface));
  box-shadow: var(--shadow-xs);
}

.exercise-library-category-group.category-tone-2 {
  --category-accent: var(--coral);
}

.exercise-library-category-group.category-tone-3 {
  --category-accent: var(--amber);
}

.exercise-library-category-group.category-tone-4 {
  --category-accent: var(--green);
}

.exercise-library-category-group.category-tone-5 {
  --category-accent: var(--cyan);
}

.exercise-library-category-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.45rem 0.25rem;
}

.exercise-library-category-heading h2 {
  display: flex;
  margin: 0;
  gap: 0.7rem;
  align-items: center;
  color: var(--ink);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  letter-spacing: -0.035em;
}

.exercise-library-category-heading h2::before {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--category-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--category-accent) 10%, transparent);
  content: "";
}

.exercise-library-category-heading span {
  padding: 0.38rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--category-accent) 16%, var(--line));
  border-radius: 999px;
  background: var(--surface);
  color: var(--category-accent);
  font-size: 0.8rem;
  font-weight: 800;
}

.exercise-library-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.exercise-library-category-grid .exercise-library-card {
  min-height: 330px;
  border-color: color-mix(in srgb, var(--category-accent) 14%, var(--line));
  background: var(--surface);
  box-shadow: none;
}

.exercise-library-category-group .exercise-library-card .exercise-card-visual {
  background:
    radial-gradient(circle at 28% 16%, rgb(255 255 255 / 82%), transparent 48%),
    color-mix(in srgb, var(--category-accent) 9%, var(--surface));
}

.exercise-library-category-grid .exercise-card-content {
  gap: 1rem;
}

.exercise-library-category-grid .exercise-card-content h2 {
  margin: 0;
}

.exercise-card-tag--target,
.exercise-target-badge {
  background: var(--primary-soft);
  color: var(--primary);
}

.exercise-card-library-category {
  display: none;
}

.exercise-detail-content > h2 {
  margin: 0;
  padding-right: 3rem;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  letter-spacing: -0.045em;
}

.exercise-modal-card {
  width: min(100%, 860px);
}

.exercise-modal-card .exercise-detail-layout {
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
}

.exercise-detail-content {
  display: flex;
  min-height: 360px;
  flex-direction: column;
}

.exercise-detail-content .exercise-detail-badges {
  margin-top: 0.15rem;
}

.exercise-detail-content .exercise-detail-actions {
  margin-top: auto;
}

.builder-stage-nav {
  min-width: 0;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.builder-stage-nav .builder-minimap-list {
  display: flex;
  min-width: 0;
  padding: 0;
  gap: 0.45rem;
  overflow-x: auto;
}

.builder-stage-nav .builder-minimap-section {
  --stage-accent: var(--primary);

  min-width: 0;
  padding: 0.55rem 0.65rem;
  flex: 1 1 0;
  gap: 0.4rem;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  box-shadow: none;
  text-align: center;
}

.builder-stage-nav .builder-minimap-section.kind-warmup {
  --stage-accent: var(--green);
}

.builder-stage-nav .builder-minimap-section.kind-finisher {
  --stage-accent: var(--coral);
}

.builder-stage-nav .builder-minimap-section.is-active {
  border-color: color-mix(in srgb, var(--stage-accent) 45%, var(--line));
  background: color-mix(in srgb, var(--stage-accent) 7%, var(--surface));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--stage-accent) 9%, transparent);
}

.builder-stage-nav .builder-minimap-section > span {
  grid-template-columns: 1fr;
  justify-items: center;
}

.builder-stage-nav .builder-minimap-round-count {
  display: inline-flex;
  position: absolute;
  top: 50%;
  left: calc(100% + 0.35rem);
  width: auto;
  min-width: 30px;
  height: 18px;
  padding: 0 0.3rem;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 5px;
  background: var(--line-strong);
  color: var(--ink-soft);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1;
}

.builder-stage-nav .builder-minimap-section > span > i {
  display: none;
}

.builder-stage-nav .builder-minimap-section strong {
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
}

.builder-stage-nav .builder-minimap-title-line {
  position: relative;
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  justify-self: center;
}

.builder-stage-nav .builder-minimap-title-line > strong {
  display: block;
}

.builder-stage-nav .builder-minimap-section > b {
  justify-content: center;
}

.builder-stage-nav .builder-minimap-section > b > i {
  background: color-mix(in srgb, var(--stage-accent) 38%, var(--line));
}

.builder-section-card {
  --stage-accent: var(--primary);

  border: 1px solid color-mix(in srgb, var(--stage-accent) 22%, var(--line));
  box-shadow: var(--shadow-xs);
}

.builder-section-card.kind-warmup {
  --stage-accent: var(--green);
}

.builder-section-card.kind-finisher {
  --stage-accent: var(--coral);
}

.builder-section-card .builder-section-header {
  background: color-mix(in srgb, var(--stage-accent) 5%, var(--surface));
}

.builder-section-card .builder-section-index {
  border: 1px solid color-mix(in srgb, var(--stage-accent) 22%, var(--line));
  background: color-mix(in srgb, var(--stage-accent) 9%, var(--surface));
  color: var(--stage-accent);
}

.builder-section-card.is-active {
  border-color: color-mix(in srgb, var(--stage-accent) 52%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-accent) 9%, transparent);
}

.overall-progress-track {
  height: 42px;
}

.overall-stage-label {
  max-height: 2.4em;
  color: var(--ink-soft);
  font-size: clamp(0.56rem, 0.68vw, 0.7rem);
  line-height: 1.15;
  text-transform: none;
}

@media (min-width: 801px) {
  .workout-builder-card .workout-builder-meta input,
  .workout-builder-card .workout-weekdays-options span,
  .workout-builder-card .builder-summary {
    height: 46px;
    min-height: 46px;
  }

  .exercise-library-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .exercise-library-category-group,
  .exercise-library-category-grid {
    display: contents;
  }

  .exercise-library-category-heading {
    display: none;
  }

  .exercise-library-category-grid .exercise-library-card {
    min-height: 0;
    border-color: color-mix(in srgb, var(--category-accent) 18%, var(--line));
    box-shadow: var(--shadow-xs);
  }

  .exercise-library-category-grid .exercise-card-content {
    padding: 0.82rem 0.9rem 0.88rem;
    gap: 0.48rem;
    border-top: 1px solid color-mix(in srgb, var(--category-accent) 14%, var(--line));
    background: color-mix(in srgb, var(--category-accent) 5%, var(--surface));
  }

  .exercise-library-category-grid .exercise-card-content h2 {
    display: -webkit-box;
    height: 2.36em;
    min-height: 2.36em;
    overflow: hidden;
    font-size: clamp(1.08rem, 1.35vw, 1.3rem);
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .exercise-library-category-grid .exercise-card-footer {
    margin-top: auto;
    padding-top: 0;
    gap: 0.45rem;
    justify-content: flex-start;
    border-top: 0;
  }

  .exercise-library-category-grid .exercise-card-footer-tags {
    flex-wrap: nowrap;
    gap: 0.32rem;
  }

  .exercise-library-category-grid .exercise-card-tag {
    min-height: 26px;
    padding: 0.28rem 0.5rem;
    font-size: 0.69rem;
    white-space: nowrap;
  }

  .exercise-library-card .exercise-card-library-category {
    display: inline-flex;
    border: 1px solid color-mix(in srgb, var(--category-accent) 24%, var(--line));
    background: color-mix(in srgb, var(--category-accent) 10%, var(--surface));
    color: var(--category-accent);
  }

  .modal-backdrop .modal-card.exercise-modal-card {
    width: min(390px, calc(100vw - 2rem));
    max-width: 390px;
    max-height: min(90dvh, 680px);
  }

  .exercise-modal-card .exercise-detail-layout {
    grid-template-columns: 1fr;
    max-height: min(90dvh, 680px);
  }

  .exercise-modal-card .exercise-detail-aside {
    position: static;
    display: block;
    min-height: 0;
    padding: 0;
    background: none;
  }

  .exercise-modal-card .exercise-detail-gallery,
  .exercise-modal-card .exercise-detail-carousel {
    aspect-ratio: 16 / 9;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  .exercise-modal-card .exercise-detail-content {
    min-height: 0;
    padding: 1.05rem 1.15rem 1.15rem;
    justify-content: flex-start;
  }

  .exercise-modal-card .exercise-detail-content > h2 {
    padding-right: 0;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    line-height: 1.08;
  }

  .exercise-modal-card .exercise-detail-placeholder .exercise-illustration {
    position: static;
    inset: auto;
    display: block;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 6rem;
  }

  .exercise-modal-card .exercise-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: center;
    margin-top: 0.65rem;
  }

  .exercise-modal-card .exercise-detail-meta-row {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
  }

  .exercise-modal-card .exercise-detail-category > span {
    display: none;
  }

  .exercise-modal-card .exercise-detail-meta .exercise-category-badge {
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 790;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
  }

  .exercise-modal-card .exercise-detail-meta .exercise-category-badge::before {
    width: 6px;
    height: 6px;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  .exercise-modal-card .exercise-detail-meta .exercise-detail-badges {
    display: flex;
    margin: 0;
  }

  .exercise-modal-card .exercise-detail-meta .exercise-used-in {
    margin: 0;
    padding: 0 0 0 0.55rem;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }

  .exercise-modal-card .exercise-detail-meta .exercise-used-in > span {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
    white-space: nowrap;
  }

  .exercise-modal-card .exercise-detail-meta .exercise-used-in > div {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
  }

  .exercise-modal-card .exercise-detail-meta .exercise-used-in > div span {
    display: inline;
    min-height: 0;
    padding: 0;
    background: none;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 740;
    line-height: 1.25;
    white-space: nowrap;
  }

  .exercise-modal-card .exercise-detail-meta .exercise-used-in > div span + span::before {
    margin-right: 0.35rem;
    color: var(--ink-muted);
    content: "\00b7";
  }

  .exercise-modal-card .exercise-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .exercise-modal-card .exercise-detail-actions .button {
    justify-content: center;
  }

  .exercise-modal-card .exercise-card-carousel-arrow {
    width: 38px;
    height: 38px;
  }

  .exercise-modal-card .exercise-card-carousel-dots {
    display: flex;
  }

  .workout-library-exercise-filters {
    grid-template-columns: auto minmax(220px, 1fr) 220px;
  }

  .exercise-editor-card {
    width: min(780px, calc(100vw - 3rem));
    max-height: min(90dvh, 820px);
  }

  .exercise-editor-card .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .modal-card.workout-builder-card {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }

  .workout-builder-card .workout-duration-field {
    display: grid;
    width: 160px;
  }

  .workout-builder-card .builder-stage-heading {
    display: grid;
    gap: 0.1rem;
  }

  .workout-builder-layout {
    grid-template-columns: minmax(290px, 0.62fr) minmax(600px, 1.65fr);
  }

  .workout-builder-card .builder-sections-panel {
    background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  }

  .workout-builder-card .builder-sections-panel > .builder-column-heading {
    position: relative;
    z-index: 4;
    border-bottom-color: color-mix(in srgb, var(--ink-muted) 18%, var(--line));
    background: var(--surface);
    box-shadow: 0 3px 12px rgb(18 27 45 / 5%);
  }

  .workout-builder-card .builder-sections {
    gap: 1rem;
    background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  }

  .builder-exercise-group:nth-child(5n + 1) { --builder-stage-color: #a65fc1; }
  .builder-exercise-group:nth-child(5n + 2) { --builder-stage-color: #d8792b; }
  .builder-exercise-group:nth-child(5n + 3) { --builder-stage-color: #615bf6; }
  .builder-exercise-group:nth-child(5n + 4) { --builder-stage-color: #168778; }
  .builder-exercise-group:nth-child(5n + 5) { --builder-stage-color: #4679bd; }

  .builder-exercise-group-heading {
    padding: 0.2rem;
  }

  .builder-exercise-group-heading strong {
    font-size: 0.9rem;
  }

  .workout-builder-card .builder-section-card {
    overflow: visible;
    border-color: transparent;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 5px 16px rgb(18 27 45 / 8%);
  }

  .workout-builder-card .builder-section-card.is-active {
    border-color: transparent;
    box-shadow: 0 5px 16px rgb(18 27 45 / 8%);
  }

  .workout-builder-card .builder-section-header {
    --builder-header-control-height: 48px;

    padding: 0.78rem 0.85rem;
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    gap: 0.65rem;
    align-items: center;
    border-bottom: 0;
    border-radius: 17px 17px 0 0;
    background: color-mix(in srgb, var(--stage-accent) 11%, var(--surface));
  }

  .workout-builder-card .builder-section-card.is-active .builder-section-header {
    border-bottom-color: transparent;
    background: color-mix(in srgb, var(--stage-accent) 11%, var(--surface));
  }

  .workout-builder-card .builder-section-marker {
    display: grid;
    height: var(--builder-header-control-height);
    padding: 0;
    grid-template-columns: var(--builder-header-control-height) auto;
    gap: 0.5rem;
    align-items: center;
    align-self: center;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .workout-builder-card .builder-section-kind {
    display: grid;
    height: var(--builder-header-control-height);
    min-height: var(--builder-header-control-height);
    padding: 0 0.75rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--stage-accent) 22%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--stage-accent) 8%, var(--surface));
    color: var(--stage-accent);
    font-size: 0.65rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .workout-builder-card .builder-section-card .builder-section-index {
    width: var(--builder-header-control-height);
    height: var(--builder-header-control-height);
    border: 1px solid color-mix(in srgb, var(--stage-accent) 22%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--stage-accent) 8%, var(--surface));
    color: var(--stage-accent);
  }

  .workout-builder-card .builder-section-title {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.22rem;
  }

  .workout-builder-card .builder-section-title-label,
  .workout-builder-card .builder-section-inline-settings label > span {
    display: block;
    color: var(--ink-soft);
    font-size: 0.65rem;
    font-weight: 740;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
  }

  .workout-builder-card .builder-section-title::after {
    position: absolute;
    right: 0.58rem;
    bottom: 1rem;
    color: color-mix(in srgb, var(--stage-accent) 62%, var(--ink-soft));
    content: "edit";
    font-family: "Material Symbols Rounded";
    font-size: 1rem;
    font-weight: normal;
    line-height: 1;
    pointer-events: none;
  }

  .workout-builder-card .builder-section-title input,
  .workout-builder-card .builder-section-card.is-active .builder-section-title input {
    height: var(--builder-header-control-height);
    min-height: var(--builder-header-control-height);
    padding: 0.45rem 2rem 0.45rem 0.65rem;
    border-color: color-mix(in srgb, var(--stage-accent) 25%, var(--line));
    background: rgb(255 255 255 / 84%);
    box-shadow: inset 0 1px 2px rgb(18 27 45 / 4%);
  }

  .workout-builder-card .builder-section-actions button {
    width: var(--builder-header-control-height);
    height: var(--builder-header-control-height);
    border-color: color-mix(in srgb, var(--stage-accent) 20%, var(--line));
    background: rgb(255 255 255 / 74%);
    color: color-mix(in srgb, var(--stage-accent) 42%, var(--ink-soft));
  }

  .workout-builder-card .builder-section-actions {
    align-self: center;
  }

  .workout-builder-card .builder-section-actions button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--stage-accent) 42%, var(--line));
    background: var(--surface);
    color: var(--stage-accent);
  }

  .workout-builder-card .builder-section-actions [data-section-action="delete"]:hover:not(:disabled),
  .workout-builder-card .builder-item-actions [data-item-action="delete"]:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
    background: var(--danger-soft);
    color: var(--danger);
  }

  .workout-builder-card .builder-section-inline-settings {
    display: grid;
    padding: 0;
    grid-column: auto;
    grid-template-columns: 100px 170px;
    gap: 0.5rem;
    align-items: center;
  }

  .workout-builder-card .builder-section-inline-settings label {
    gap: 0.22rem;
  }

  .workout-builder-card .builder-stage-item label > span {
    color: var(--ink-muted);
    font-weight: 720;
  }

  .workout-builder-card .builder-section-inline-settings input {
    height: var(--builder-header-control-height);
    min-height: var(--builder-header-control-height);
  }

  .workout-builder-card .builder-input-with-unit {
    position: relative;
    display: block;
  }

  .workout-builder-card .builder-input-with-unit > input {
    padding-right: 5rem;
  }

  .workout-builder-card .builder-input-with-unit > small {
    position: absolute;
    top: 50%;
    right: 0.62rem;
    display: block;
    color: var(--ink-muted);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .workout-builder-card .builder-section-inline-settings input,
  .workout-builder-card .builder-stage-item input,
  .workout-builder-card .builder-stage-item select {
    border-color: color-mix(in srgb, var(--ink-muted) 22%, var(--line));
    background-color: var(--surface);
    box-shadow: inset 0 1px 2px rgb(18 27 45 / 4%);
  }

  .workout-builder-card .builder-section-card input:focus,
  .workout-builder-card .builder-section-card select:focus {
    border-color: var(--stage-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-accent) 14%, transparent);
  }

  .workout-builder-card .builder-section-items {
    padding: 0.72rem;
    gap: 0.55rem;
    border-radius: 0 0 17px 17px;
    background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  }

  .workout-builder-card .builder-minimap-kind {
    display: block;
    margin-bottom: 0.14rem;
    color: var(--stage-accent);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 780;
    line-height: 1.1;
  }

  .workout-builder-card .builder-stage-item,
  .workout-builder-card .builder-section-card.is-active .builder-stage-item {
    width: 100%;
    margin-inline: 0;
    padding: 0.62rem;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: stretch;
    border: 0;
    background: var(--surface);
    box-shadow: 0 2px 8px rgb(18 27 45 / 7%);
  }

  .workout-builder-card .builder-item-identity {
    display: grid;
    min-height: 72px;
    padding: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .workout-builder-card .builder-item-identity .builder-item-index {
    width: 52px;
    height: 100%;
    min-height: 72px;
    border: 1px solid color-mix(in srgb, var(--stage-accent) 18%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--stage-accent) 8%, var(--surface));
    color: var(--stage-accent);
  }

  .workout-builder-card .builder-item-name {
    display: grid;
    min-width: 0;
    min-height: 72px;
    padding: 0.6rem 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    align-content: center;
    border: 1px solid color-mix(in srgb, var(--stage-accent) 18%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--stage-accent) 8%, var(--surface));
  }

  .workout-builder-card .builder-item-name strong {
    color: var(--ink);
    font-size: 0.88rem;
  }

  .workout-builder-card .builder-item-name small {
    max-width: 190px;
    padding: 0.28rem 0.52rem;
    border: 1px solid color-mix(in srgb, var(--stage-accent) 22%, var(--line));
    border-radius: 999px;
    background: var(--surface);
    color: color-mix(in srgb, var(--stage-accent) 48%, var(--ink-soft));
    font-size: 0.66rem;
    font-weight: 720;
  }

  .workout-builder-card .builder-item-fields {
    display: grid;
    padding: 0.42rem;
    grid-template-columns: 160px 150px auto;
    gap: 0.42rem;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--stage-accent) 18%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--stage-accent) 8%, var(--surface));
  }

  .workout-builder-card .builder-stage-item input,
  .workout-builder-card .builder-stage-item select,
  .workout-builder-card .builder-item-actions button {
    height: 42px;
    min-height: 42px;
  }

  .workout-builder-card .builder-item-actions {
    flex: 0 0 auto;
    align-self: center;
  }

  .workout-builder-card .builder-item-actions button {
    width: 42px;
    min-width: 42px;
    flex: 0 0 42px;
    border-color: color-mix(in srgb, var(--ink-muted) 20%, var(--line));
    background: var(--surface);
  }

  .workout-builder-card .builder-item-actions button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
    color: var(--primary);
  }

  .workout-builder-footer {
    justify-content: flex-end;
  }

  /* Desktop workout editor: one neutral hierarchy with color reserved for meaning. */
  .workout-builder-card {
    --builder-canvas: color-mix(in srgb, var(--ink) 4%, var(--surface));
    --builder-subtle: color-mix(in srgb, var(--ink) 2%, var(--surface));
    --builder-line: color-mix(in srgb, var(--ink-muted) 24%, var(--line));

    background: var(--surface);
  }

  .workout-builder-card,
  .workout-builder-card *,
  .workout-builder-card *::before,
  .workout-builder-card *::after {
    box-shadow: none !important;
  }

  .workout-builder-card .workout-builder-meta {
    border-color: var(--builder-line);
    background: var(--builder-subtle);
  }

  .workout-builder-card .workout-builder-meta input,
  .workout-builder-card .workout-weekdays-options span,
  .workout-builder-card .builder-summary,
  .workout-builder-card .builder-search input {
    border-color: var(--builder-line);
    background: var(--surface);
    color: var(--ink);
  }

  .workout-builder-card .workout-weekdays-options input:checked + span {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
  }

  .workout-builder-card .builder-stage-nav {
    border-color: var(--builder-line);
    background: var(--surface-soft);
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section {
    min-height: 80px;
    padding: 0.72rem 0.7rem;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 0.6rem;
    border-color: var(--builder-line);
    background: var(--surface);
    color: var(--ink-soft);
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section > span {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "kind"
      "title";
    align-items: center;
    justify-items: center;
    row-gap: 0.14rem;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section > span > .builder-minimap-kind {
    grid-area: kind;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section > span > .builder-minimap-title-line {
    grid-area: title;
    justify-self: center;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section:hover:not(.is-active) {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--builder-line));
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--ink);
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section.is-active strong {
    color: var(--ink);
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section.is-active .builder-minimap-round-count {
    border: 0;
    background: var(--line-strong);
    color: var(--ink-soft);
    font-weight: 800;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section > b > i {
    background: var(--line-strong);
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section > b {
    display: flex;
    width: 100%;
    min-height: 8px;
    gap: 4px;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section > b > i {
    width: 22px;
    min-width: 4px;
    height: 7px;
    flex: 0 1 22px;
  }

  .workout-builder-card .builder-stage-nav .builder-minimap-section.is-active > b > i {
    background: color-mix(in srgb, var(--primary) 58%, var(--line));
  }

  .workout-builder-card .builder-library,
  .workout-builder-card .builder-sections-panel,
  .workout-builder-card .builder-sections {
    background: var(--builder-canvas);
  }

  .workout-builder-card .builder-sections {
    padding: 0.8rem;
    gap: 0.55rem;
  }

  .workout-builder-card .builder-column-heading,
  .workout-builder-card .builder-sections-panel > .builder-column-heading {
    border-color: var(--builder-line);
    background: var(--surface);
  }

  .workout-builder-card .builder-exercise-group {
    --builder-stage-color: var(--primary);
  }

  .workout-builder-card .builder-exercise-group-heading strong {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--builder-line));
    background: var(--primary-soft);
    color: var(--primary);
  }

  .workout-builder-card .builder-exercise-item {
    border-color: var(--builder-line);
    background: var(--surface);
  }

  .workout-builder-card .builder-exercise-item:hover {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--builder-line));
    background: var(--surface);
  }

  .workout-builder-card .builder-exercise-icon {
    background: var(--primary-soft);
    color: var(--primary);
  }

  .workout-builder-card .builder-section-card,
  .workout-builder-card .builder-section-card.kind-warmup,
  .workout-builder-card .builder-section-card.kind-finisher {
    --stage-accent: var(--primary);
    --stage-kind-color: var(--primary);

    border-color: transparent;
    background: var(--surface);
  }

  .workout-builder-card .builder-section-card.kind-warmup {
    --stage-kind-color: var(--green);
  }

  .workout-builder-card .builder-section-card.kind-finisher {
    --stage-kind-color: var(--coral);
  }

  .workout-builder-card .builder-section-header,
  .workout-builder-card .builder-section-card.is-active .builder-section-header {
    background: var(--builder-subtle);
  }

  .workout-builder-card .builder-section-kind {
    border-color: color-mix(in srgb, var(--stage-kind-color) 28%, var(--builder-line));
    background: color-mix(in srgb, var(--stage-kind-color) 8%, var(--surface));
    color: var(--stage-kind-color);
  }

  .workout-builder-card .builder-section-card .builder-section-index,
  .workout-builder-card .builder-item-identity .builder-item-index {
    border-color: var(--builder-line);
    background: var(--surface);
    color: var(--ink-soft);
  }

  .workout-builder-card .builder-section-title input,
  .workout-builder-card .builder-section-card.is-active .builder-section-title input,
  .workout-builder-card .builder-section-inline-settings input,
  .workout-builder-card .builder-stage-item input,
  .workout-builder-card .builder-stage-item select {
    border-color: var(--builder-line);
    background-color: var(--surface);
    color: var(--ink);
  }

  .workout-builder-card .builder-section-title::after,
  .workout-builder-card .builder-input-with-unit > small {
    color: var(--ink-muted);
  }

  .workout-builder-card .builder-section-card input:focus,
  .workout-builder-card .builder-section-card select:focus,
  .workout-builder-card .workout-builder-meta input:focus,
  .workout-builder-card .builder-search input:focus {
    border-color: var(--primary);
  }

  .workout-builder-card .builder-section-actions button,
  .workout-builder-card .builder-item-actions button {
    border-color: var(--builder-line);
    background: var(--surface);
    color: var(--ink-soft);
  }

  .workout-builder-card .builder-section-actions button:hover:not(:disabled),
  .workout-builder-card .builder-item-actions button:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
  }

  .workout-builder-card .builder-section-actions [data-section-action="delete"]:hover:not(:disabled),
  .workout-builder-card .builder-item-actions [data-item-action="delete"]:hover:not(:disabled) {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
  }

  .workout-builder-card .builder-section-items {
    width: 100%;
    padding: 0;
    gap: 0.55rem;
    border-radius: 0;
    background: var(--builder-canvas);
  }

  .workout-builder-card .builder-sections > .builder-section-card,
  .workout-builder-card .builder-sections > .builder-section-card.is-active {
    border-radius: 0;
    background: transparent;
  }

  .workout-builder-card .builder-stage-item,
  .workout-builder-card .builder-section-card.is-active .builder-stage-item {
    padding: 0.6rem;
    grid-template-columns: 44px minmax(210px, 1fr) 150px 150px auto;
    gap: 0.55rem;
    align-items: center;
    border: 1px solid var(--builder-line);
    border-radius: 13px;
    background: var(--surface);
  }

  .workout-builder-card .builder-item-identity,
  .workout-builder-card .builder-item-fields {
    display: contents;
  }

  .workout-builder-card .builder-item-identity .builder-item-index {
    width: 44px;
    height: 42px;
    min-height: 42px;
    border-radius: 9px;
    background: var(--builder-subtle);
  }

  .workout-builder-card .builder-item-name,
  .workout-builder-card .builder-item-fields {
    border-color: var(--builder-line);
    background: var(--builder-subtle);
  }

  .workout-builder-card .builder-item-name {
    min-height: 42px;
    padding: 0 0.55rem;
    gap: 0.55rem;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .workout-builder-card .builder-item-name small {
    border-color: var(--builder-line);
    background: var(--surface);
    color: var(--ink-soft);
  }

  .workout-builder-card .builder-stage-editor-toolbar {
    display: grid;
    padding-block: 0.55rem;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
  }

  .workout-builder-card .builder-active-section-header {
    display: block;
    min-width: 0;
  }

  .workout-builder-card .builder-active-section-header:empty {
    display: none;
  }

  .workout-builder-card .builder-active-section-toolbar {
    width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .workout-builder-card .builder-active-section-toolbar.is-active .builder-section-header {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

}

@media (min-width: 801px) and (max-width: 1050px) {
  .exercise-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .exercise-library-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (orientation: landscape) and (max-height: 580px) {
  .workout-controls {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    width: min(100%, 34rem);
    margin-inline: auto 0;
    grid-template-columns: 104px minmax(180px, 1fr) 104px;
    gap: 0.4rem;
  }

  .control-cluster {
    display: flex;
    gap: 4px;
  }

  .control-cluster .control-button,
  .control-cluster-right .control-button {
    display: inline-flex !important;
    min-width: 0;
    padding-inline: 0.4rem;
    font-size: 0;
  }

  .control-cluster .control-button > span,
  .control-cluster-right .control-button > span {
    font-size: 1rem;
  }
}

/* Keep the active-workout grid authoritative over legacy responsive rules. */

@media (max-width: 640px) {
  .workout-controls {
    width: min(100%, 760px);
    margin-inline: auto;
    grid-template-columns: minmax(54px, 0.7fr) minmax(150px, 1.8fr) minmax(54px, 0.7fr);
    gap: 0.45rem;
  }
}

@media (orientation: landscape) and (max-height: 580px) {
  .workout-screen {
    --actual-timer-size: min(24vw, 42vh, 13rem);

    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .workout-screen > .workout-stage {
    overflow: hidden;
    gap: clamp(0.75rem, 1.2vw, 1rem);
    align-content: stretch;
  }

  .timer-column.workout-focus-card {
    display: grid;
    width: auto;
    grid-template-areas: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    align-content: stretch;
    justify-items: stretch;
    text-align: center;
  }

  .timer-column.workout-focus-card .timer-value {
    font-size: clamp(3rem, 7vw, 4.2rem);
  }

  .workout-controls {
    width: min(100%, 680px);
    margin-inline: auto;
    grid-template-columns: minmax(90px, 1fr) minmax(180px, 1.7fr) minmax(90px, 1fr);
    gap: 0.4rem;
  }
}