/*
 * Dashboard visual redesign — style 8a (light-blue / violet app direction).
 * Structure and behaviour stay owned by dashboard/index.html and dashboard.js;
 * this file only restyles the existing .dash-* components.
 */

.dash-body {
  --dv-bg: #c8dbf7;
  --dv-paper: #ffffff;
  --dv-tint: #e4eefb;
  --dv-ink: #2e5182;
  --dv-ink2: #3a5c87;
  --dv-tab: #476d9b;
  --dv-action: #4a72b0;
  --dv-accent: #5b4a9e;
  --dv-illustration: #8fb0df;
  --dv-ink-illus: #1f3a5f;
  --dv-outline: #a9c4ea;
  --dv-navy: #1f3a5f;
  --dv-shadow: 0 4px 14px rgba(46, 81, 130, .12);
  --dv-shadow-lg: 0 6px 18px rgba(46, 81, 130, .16);

  background: var(--dv-bg);
  color: var(--dv-ink);
  /* dashboard.css sets overflow-x:hidden here, which makes body a CSS
     scroll container and breaks position:sticky for every descendant
     (dash-topbar, training-session-bar…); html now owns the horizontal
     clip instead (see home-redesign.css). */
  overflow-x: visible;
}
.dash-body,
.dash-body * { font-family: "Archivo", Arial, sans-serif !important; }

.dash-bg,
.dash-halo { display: none !important; }

/* ── Sidebar ───────────────────────────────────────────────────────── */
.dash-side {
  background: var(--dv-paper);
  border-right: 0;
  box-shadow: var(--dv-shadow-lg);
  backdrop-filter: none;
}
.dash-nav-label { color: var(--dv-ink2); }
.dash-plan-badge {
  display: inline-block; margin-left: 12px; padding: 3px 8px; transform: rotate(-10deg);
  border: 2px solid var(--dv-navy); border-radius: 6px; color: #fff; background: var(--dv-action); box-shadow: 2px 2px 0 var(--dv-navy);
  font-size: .64rem; font-weight: 900; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; vertical-align: middle; white-space: nowrap;
}
.dash-plan-badge--free { background: #687587; }
.dash-plan-badge[hidden] { display: none; }
.dash-nav a, .dash-side-bottom > a, .dash-side-support button { color: var(--dv-tab); }
.dash-nav a span, .dash-side-bottom > a:not(.dash-side-profile) > span, .dash-side-support button span { color: var(--dv-tab); }
/* Menu icons are line drawings in a fixed 20px box, so every label starts at the same place. */
.dash-nav a > span, .dash-side-bottom > a:not(.dash-side-profile) > span, .dash-side-support button > span { display: grid; place-items: center; flex: none; width: 20px; height: 20px; }
.dash-nav-icon { display: block; width: 20px; height: 20px; }
.dash-nav a:hover, .dash-side-bottom > a:hover, .dash-side-support button:hover { color: var(--dv-ink); background: var(--dv-tint); }
.dash-nav a.is-active { color: var(--dv-ink); background: var(--dv-tint); border: 0; font-weight: 700; }
.dash-nav a.is-active span { color: var(--dv-accent); }
.dash-side-support { border-top-color: var(--dv-outline); }
.dash-side-bottom > .dash-side-profile { border-top-color: var(--dv-outline); color: var(--dv-ink); }
.dash-side-bottom > .dash-side-profile:hover { color: var(--dv-ink); background: var(--dv-tint); }
.dash-side-profile small { color: var(--dv-ink2); }
.dash-side-profile small:last-child { color: var(--dv-tab); }
.dash-avatar { color: #fff; background: var(--dv-accent); box-shadow: none; }
.dash-overlay { background: rgba(31, 58, 95, .45); }

/* ── Topbar (mobile off-canvas trigger) ───────────────────────────── */
.dash-topbar { background: var(--dv-bg); border-bottom-color: var(--dv-outline); backdrop-filter: none; }
.dash-topbar-copy span { color: var(--dv-ink2); }
.dash-topbar-copy strong { color: var(--dv-ink); }
.dash-menu-button, .dash-icon-button {
  color: var(--dv-ink);
  background: var(--dv-paper);
  border-color: transparent;
  box-shadow: var(--dv-shadow);
}
.dash-icon-button span { color: #fff; background: var(--dv-accent); }

/* ── Site nav layout tweaks reused from home-redesign on .home-v2 ──── */
.has-site-nav .dash-side { top: 74px; }
/* In the drawer (tablet and phone), the browser bars fold away while scrolling and the drawer grows with the
   screen. Settings and support follow the menu at a fixed gap instead of the drawer's bottom edge, so they stay
   put, and scrolling the drawer no longer scrolls the page behind it. */
@media (max-width: 1100px) {
  .dash-side { overscroll-behavior: contain; }
  .dash-side-bottom { margin-top: 28px; }
}

/* ── Hero welcome banner ──────────────────────────────────────────── */
.dash-eyebrow, .dash-kicker { color: var(--dv-ink2); font-weight: 700; }
.dash-welcome h1 { color: var(--dv-ink); font-style: italic; font-weight: 800; letter-spacing: -.01em; }
.dash-welcome p:last-child { color: var(--dv-ink2); }
.dash-welcome--image > div { text-shadow: 0 2px 10px rgba(31, 58, 95, .28); }
.dash-welcome--image .dash-eyebrow,
.dash-welcome--image h1,
.dash-welcome--image p:last-child { color: #fff; }

.dash-primary {
  color: #fff;
  background: var(--dv-navy);
  box-shadow: none;
  border-radius: 14px;
  font-style: italic;
  font-weight: 800;
}
.dash-primary:hover { color: #fff; background: #172c48; transform: none; }

.dash-ghost-button, .dash-link-button {
  color: var(--dv-action);
  background: var(--dv-tint);
  border-radius: 999px;
  font-weight: 700;
}
.dash-link-button { background: var(--dv-tint); }
.dash-ghost-button:hover, .dash-link-button:hover { color: #fff; background: var(--dv-action); }

/* ── Cards ─────────────────────────────────────────────────────────── */
.dash-card, .dash-metrics article {
  background: var(--dv-paper);
  border: 0;
  box-shadow: var(--dv-shadow);
  backdrop-filter: none;
}
.dash-card h2 { color: var(--dv-ink); font-style: italic; font-weight: 800; letter-spacing: -.01em; }

/* Progress ring: the completed arc carries the same moving stripes as the program progress bar, no glow. */
.progress-ring {
  background:
    conic-gradient(transparent calc(var(--progress) * 1%), var(--dv-tint) 0),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.32) 0, rgba(255,255,255,.32) 8px, rgba(255,255,255,0) 8px, rgba(255,255,255,0) 16px),
    #8477b6;
  background-size: auto, 32px 32px, auto;
  box-shadow: none;
  animation: dashRingShine 1.2s linear infinite;
}
.progress-ring::before { background: var(--dv-paper); box-shadow: none; }
.progress-ring strong { color: var(--dv-ink); }
.progress-ring span { color: var(--dv-ink2); }
@keyframes dashRingShine { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 32px 0, 0 0; } }

.dash-program-copy > p { color: var(--dv-ink); }
.dash-linear { background: var(--dv-tint); }
.dash-linear span {
  background-color: #8477b6;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.32) 0, rgba(255,255,255,.32) 8px, rgba(255,255,255,0) 8px, rgba(255,255,255,0) 16px);
  background-size: 32px 32px;
  animation: dashProgressShine 1.2s linear infinite;
}
@keyframes dashProgressShine { to { background-position: 32px 0; } }
@media (prefers-reduced-motion: reduce) { .progress-ring, .dash-linear span { animation: none; } }
.dash-program-copy dl div { border-left-color: var(--dv-outline); }
.dash-program-copy dt { color: var(--dv-ink2); }
.dash-program-copy dd { color: var(--dv-ink); }

.dash-status, .dash-day-chip { color: var(--dv-action); background: var(--dv-tint); border: 0; }

.dash-score-row strong { color: var(--dv-ink); }
.dash-score-row strong span { color: var(--dv-ink2); }
.dash-score-row p { color: var(--dv-ink2); }

.dash-facts div { background: var(--dv-tint); border: 0; }
.dash-facts dt { color: var(--dv-ink2); }
.dash-facts dd { color: var(--dv-ink); }

.dash-bars label { color: var(--dv-ink2); }
.dash-bars b { color: var(--dv-ink); }
.dash-bars i { background: var(--dv-tint); }
.dash-bars em { background: var(--dv-accent); }

/* ── Metric tiles ──────────────────────────────────────────────────── */
.dash-metrics article > span { color: var(--dv-ink2); }
.dash-metrics strong { color: var(--dv-ink); }
.dash-metrics strong span { color: var(--dv-ink2); }
.dash-metrics small { color: var(--dv-action); }

/* ── Achievement summary ───────────────────────────────────────────── */
.dash-achievement-badge {
  color: #fff;
  background: var(--dv-accent);
  border: 0;
  box-shadow: none;
}
.dash-achievement-unlocked h2 { font-style: italic; font-weight: 800; color: var(--dv-ink); }
.dash-achievement-unlocked p { color: var(--dv-ink2); }
.dash-achievement-unlocked p strong, .dash-achievement-unlocked p b { color: var(--dv-accent); }
.dash-achievement-next { border-left-color: var(--dv-outline); }
.dash-achievement-next span { color: var(--dv-ink2); }
.dash-achievement-next strong { color: var(--dv-ink); }
.dash-achievement-next b { color: var(--dv-action); }
.dash-achievement-next > i { background: var(--dv-tint); }
.dash-achievement-next > i span {
  background-color: #8477b6;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.32) 0, rgba(255,255,255,.32) 8px, rgba(255,255,255,0) 8px, rgba(255,255,255,0) 16px);
  background-size: 32px 32px;
  animation: dashProgressShine 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .dash-achievement-next > i span { animation: none; } }

/* ── Calendar — spec: filled #8FB0DF/#1F3A5F, empty #E4EEFB/#3A5C87, today #1F3A5F/white ── */
.calendar-controls button { color: var(--dv-ink2); background: var(--dv-tint); border-color: transparent; }
.calendar-controls button:hover { color: var(--dv-ink); background: var(--dv-outline); }
.cal-weekday { color: var(--dv-ink2); }
.cal-day { color: var(--dv-ink2); background: var(--dv-tint); }
.cal-day:hover { background: var(--dv-outline); }
.cal-day.is-outside { color: var(--dv-outline); background: transparent; }
.cal-day.is-today { color: #fff; background: var(--dv-navy); box-shadow: none; }
.cal-day.is-planned:not(.is-today) { box-shadow: inset 0 0 0 2px var(--dv-outline); }
.cal-day.is-planned:not(.is-today)::before { background: var(--dv-action); }
.cal-day.is-next-planned:not(.is-today) { color: var(--dv-ink); box-shadow: inset 0 0 0 2px var(--dv-accent); background: var(--dv-tint); }
.cal-day.is-selected:not(.is-today) { box-shadow: inset 0 0 0 2px var(--dv-action); }
.calendar-legend b { color: var(--dv-ink); }
.cal-day.has-workout:not(.is-today) { color: var(--dv-ink-illus); background: var(--dv-illustration); }
.cal-day.has-workout:not(.is-today)::after { background: var(--dv-ink-illus); }
.cal-day.has-pr::before { color: var(--dv-accent); }
.calendar-legend { color: var(--dv-ink2); }
.calendar-legend i { background: var(--dv-illustration); }

/* ── Next session card ─────────────────────────────────────────────── */
.dash-workout-visual { background: var(--dv-illustration); }
.dash-workout-visual img { filter: none; }
.dash-next-session li { color: var(--dv-ink2); }
.dash-next-session li strong { color: var(--dv-ink); }

/* ── Volume chart ──────────────────────────────────────────────────── */
.chart-grid { stroke: var(--dv-outline); }
.chart-line { stroke: var(--dv-accent); }
.dash-chart circle { fill: var(--dv-accent); stroke: var(--dv-paper); }
.dash-chart-meta { color: var(--dv-ink2); }
.dash-chart-meta strong { color: var(--dv-ink); }
.dash-positive { color: var(--dv-action); }
/* Exercise progress chart: a scale that follows the values, axis labels, and the value of the nearest session on
   hover or touch. */
.exercise-chart { position: relative; margin-bottom: 6px; color: var(--dv-accent); }
.exercise-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.exercise-chart .chart-grid { stroke: var(--dv-outline); stroke-dasharray: 3 5; }
.exercise-chart .chart-line { stroke-width: 3; stroke-linejoin: round; }
.exercise-chart-axis { fill: var(--dv-ink2); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.exercise-chart-empty { fill: var(--dv-ink2); font-size: 12px; font-weight: 700; }
.exercise-chart .exercise-chart-dot { fill: var(--dv-paper); stroke: var(--dv-accent); stroke-width: 2.5; }
.exercise-chart .exercise-chart-dot.is-last { fill: var(--dv-accent); stroke: var(--dv-paper); stroke-width: 3; }
.exercise-chart-focus[hidden] { display: none; }
.exercise-chart-focus path { stroke: var(--dv-accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.exercise-chart .exercise-chart-focus circle { fill: var(--dv-accent); stroke: var(--dv-paper); stroke-width: 3; }
.exercise-chart-tip { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 1px; padding: 7px 12px; border-radius: 10px; color: #fff; background: var(--dv-navy); box-shadow: 0 6px 16px rgba(31, 58, 95, .28); transform: translate(-50%, calc(-100% - 16px)); pointer-events: none; white-space: nowrap; }
.exercise-chart-tip[hidden] { display: none; }
.exercise-chart-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--dv-navy); }
.exercise-chart-tip strong { font-size: .92rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.exercise-chart-tip span { font-size: .68rem; font-weight: 600; opacity: .8; }

/* ── Profile / notification popovers ──────────────────────────────── */
.dash-profile-menu summary { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.dash-profile-menu summary i { color: var(--dv-accent); }
.dash-profile-popover {
  color: var(--dv-ink);
  background: var(--dv-paper);
  border: 0;
  box-shadow: var(--dv-shadow-lg);
}
.dash-profile-popover small { color: var(--dv-ink2); }
.dash-profile-popover a { color: var(--dv-ink2); }
.dash-profile-popover a:hover { color: var(--dv-ink); background: var(--dv-tint); }

.mobile-notification-dialog { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow-lg); }
.mobile-notification-dialog::backdrop { background: rgba(31, 58, 95, .45); }
.mobile-notification-dialog > header { border-bottom-color: var(--dv-outline); }
.mobile-notification-dialog > header span { color: var(--dv-ink2); }
.mobile-notification-dialog > header button { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
.mobile-notification-dialog__toolbar button { color: var(--dv-action); }
.mobile-notification-dialog__toolbar button:disabled { color: var(--dv-outline); }

.dash-toast { color: var(--dv-ink); background: var(--dv-paper); border: 0; border-left: 4px solid #2f9e5c; box-shadow: var(--dv-shadow-lg); }
.dash-toast::before { background: #2f9e5c; color: #fff; }
.dash-toast.is-error { border-left-color: #d64545; }
.dash-toast.is-error::before { background: #d64545; }

.support-dialog { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow-lg); }
.support-dialog::backdrop { background: rgba(31, 58, 95, .45); }
.support-dialog-close { color: var(--dv-ink2); background: var(--dv-tint); }
.support-dialog header p { color: var(--dv-ink2); }
.support-dialog label { color: var(--dv-ink2); }
.support-dialog input, .support-dialog textarea { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.support-dialog input:focus, .support-dialog textarea:focus { box-shadow: 0 0 0 2px var(--dv-action); }
.support-dialog form > small { color: var(--dv-ink2); }
.support-dialog-status { color: var(--dv-ink2); }
.support-dialog-status.is-success { color: var(--dv-accent); }
.support-dialog-status.is-error { color: #a13f2c; }
.support-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--dv-tint); }
.support-kind[hidden] { display: none; }
.support-dialog .support-kind label { position: relative; display: block; cursor: pointer; }
.support-dialog .support-kind input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.support-kind span { display: block; padding: 10px 12px; border-radius: 9px; color: var(--dv-ink2); font-size: .74rem; font-weight: 700; text-align: center; transition: background .15s ease, color .15s ease; }
.support-kind input:checked + span { color: #fff; background: var(--dv-action); box-shadow: var(--dv-shadow); }
.support-kind input:focus-visible + span { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
.support-image-picker > span small { color:var(--dv-ink2); background:var(--dv-tint); }
.support-image-picker > strong { color:var(--dv-action); background:var(--dv-tint); border-color:var(--dv-action); }
.support-image-picker:hover > strong,.support-image-picker:focus-within > strong { color:var(--dv-paper); background:var(--dv-action); border-color:var(--dv-action); }
.support-image-picker > small { color:var(--dv-ink2); }
.support-image-previews > div { background:var(--dv-tint); }
.support-help-grid > a, .support-help-grid > button { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.support-help-grid > a:hover, .support-help-grid > button:hover { color: var(--dv-ink); background: var(--dv-outline); }
.support-help-grid > a > span, .support-help-grid > button > span { color: var(--dv-accent); background: var(--dv-paper); }
.support-help-grid small { color: var(--dv-ink2); }
.support-help-faq details { border:0; background:var(--dv-tint); }
.support-help-faq summary { color:var(--dv-ink); }
.support-help-faq summary::after { color:var(--dv-accent); }
.support-help-faq p { color:var(--dv-ink2); }
.support-help-faq p strong { color:var(--dv-ink); }
.support-help-contact { background:var(--dv-tint); }
.support-help-contact strong { color:var(--dv-ink); }
.support-help-contact small { color:var(--dv-ink2); }

[data-dashboard-state="error"] [data-dashboard-summary] { color: #a13f2c; }

/* Safety net: plain <button> tags with no class inside dialogs (e.g.
   "Cancel" buttons) otherwise inherit base.css's dark default. */
.dash-body dialog button:not([class]) { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.dash-body dialog button:not([class]):hover { background: var(--dv-outline); border: 0; }

/* ════════════════════════════════════════════════════════════════════
 * Shared app-shell classes (app-pages.css) — Training, Programs,
 * Progress, Nutrition, Supplements, Settings all build on these.
 * ════════════════════════════════════════════════════════════════════ */
.app-dashboard-link { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow); }
.app-dashboard-link:hover { color: #fff; background: var(--dv-action); }
.app-page-head h1 { color: var(--dv-ink); font-style: italic; font-weight: 800; }
.app-page-head p:last-child { color: var(--dv-ink2); }
.app-section-heading h2 { color: var(--dv-ink); font-style: italic; font-weight: 800; }
.app-section-heading > span { color: var(--dv-ink2); }
.app-section-note { margin: 6px 0 0; color: var(--dv-ink2); font-size: .74rem; line-height: 1.5; }
.app-panel { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); backdrop-filter: none; }
.app-muted { color: var(--dv-ink2); }
.app-pill { color: var(--dv-action); background: var(--dv-tint); border: 0; }
.app-button { color: #fff; background: var(--dv-accent); border: 0; }
.app-button:hover { color: #fff; background: #4a3c81; border: 0; }
.app-button-secondary { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.app-button-secondary:hover { color: #fff; background: var(--dv-action); border: 0; }
.app-button[aria-busy="true"] { gap: 0; cursor: progress; opacity: .85; }
.progress-checkin-button { background: var(--dv-action); }
.progress-checkin-button:hover { background: #3c5f95; }
.app-empty-action { color: var(--dv-ink2); background: var(--dv-tint); border: 2px dashed var(--dv-outline); }
.app-linear { background: var(--dv-tint); }
.app-linear span { background: var(--dv-accent); }

/* ── Training (landing) ──────────────────────────────────────────── */
.training-meta { color: var(--dv-ink2); }
.exercise-row { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.exercise-number { color: var(--dv-action); background: var(--dv-tint); }
.exercise-name small { color: var(--dv-ink2); }
.exercise-metric span { color: var(--dv-ink2); }
.exercise-metric strong { color: var(--dv-ink); }
.exercise-check { color: var(--dv-action); background: var(--dv-tint); border: 0; }
.week-day { background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.week-day > span { color: var(--dv-ink2); }
.week-day small { color: var(--dv-ink2); }
.week-day i { background: var(--dv-outline); }
.week-day.is-done i { background: var(--dv-accent); }
.recent-workout { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.recent-workout span { color: var(--dv-ink2); }
.recent-workout strong { color: var(--dv-ink); }
.recent-workout small { color: var(--dv-ink2); }

.training-resume { color: var(--dv-ink); background: var(--dv-tint); border: 0; box-shadow: none; }
.training-resume:hover { color: var(--dv-ink); border: 0; background: var(--dv-outline); }
.training-resume-continue { color: inherit; background: transparent; border: 0; box-shadow: none; }
.training-resume-icon { color: #fff; background: var(--dv-accent); }
.training-resume small { color: var(--dv-ink2); }
.training-resume i { color: var(--dv-accent); }
.training-resume-discard { color: #a13f2c; background: transparent; border: 0; }
.training-resume-discard:hover { color: #a13f2c; background: rgba(211, 115, 93, .14); }
.training-card-heading h2 { color: var(--dv-ink); font-style: italic; font-weight: 800; }
.training-plan-meta span { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
.training-plan-preview { grid-template-columns: 1fr; }
.training-plan-preview span { color: var(--dv-ink2); background: var(--dv-tint); border-left-color: var(--dv-accent); }
.training-week-card p { color: var(--dv-ink2); }
.training-week-days [data-weekday] { width: 100%; padding: 0; color: var(--dv-ink2); background: var(--dv-tint); border: 0; font: inherit; appearance: none; -webkit-appearance: none; }
.training-week-days [data-weekday]:disabled { cursor: default; opacity: 1; }
.training-week-days [data-weekday] i { color: var(--dv-action); }
.training-week-days .is-scheduled { color: var(--dv-action); box-shadow: inset 0 0 0 2px var(--dv-action); }
.training-week-days .is-done { color: var(--dv-ink); background: var(--dv-illustration); }
.training-week-days .is-today { color: #fff; background: var(--dv-navy); }
.training-week-days .is-today i { color: #fff; }
/* Weekly target editor: pick the days that hold the program sessions. */
.training-week-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }
.training-week-foot p, .training-week-card .training-week-foot p { margin: 0; }
.training-week-card .app-linear span {
  background-color: #8477b6;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.32) 0, rgba(255,255,255,.32) 8px, rgba(255,255,255,0) 8px, rgba(255,255,255,0) 16px);
  background-size: 32px 32px;
  transition: width 1.1s cubic-bezier(.22,.9,.3,1);
  animation: dashProgressShine 1.2s linear infinite;
}
.training-week-streak { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--dv-ink2); font-size: .6rem; opacity: .75; }
.training-week-streak svg { flex: none; width: 12px; height: 12px; color: var(--dv-accent); }
.training-week-streak.is-safe svg { color: #c9772c; }
.training-week-card.is-editing .training-week-streak { display: none; }
@media (prefers-reduced-motion: reduce) { .training-week-card .app-linear span { transition: none; animation: none; } }
.training-week-edit, .training-week-actions .dash-ghost-button { min-height: 36px; padding: 0 16px; border: 0; cursor: pointer; }
.training-week-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.training-week-actions .training-week-save { color: #fff; background: var(--dv-action); }
.training-week-actions .training-week-save:hover { background: var(--dv-navy); }
.training-week-actions .training-week-save:disabled { color: var(--dv-ink2); background: var(--dv-tint); cursor: not-allowed; }
.training-week-card.is-editing .training-week-days [data-weekday] { color: var(--dv-ink2); background: var(--dv-tint); box-shadow: inset 0 0 0 2px transparent; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease; }
.training-week-card.is-editing .training-week-days [data-weekday]:hover { box-shadow: inset 0 0 0 2px var(--dv-action); }
.training-week-card.is-editing .training-week-days [data-weekday].is-selected { color: #fff; background: var(--dv-action); box-shadow: none; }
.training-week-card.is-editing .training-week-days [data-weekday]:not(.is-done) i { visibility: hidden; }
.training-week-card.is-editing .training-week-days [data-weekday].is-selected i { color: #fff; }
.training-week-days [data-weekday]:focus-visible { outline: 3px solid var(--dv-action); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .training-week-card.is-editing .training-week-days [data-weekday] { transition: none; } }
.training-template { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow); }
.training-template:hover { color: var(--dv-ink); background: var(--dv-paper); box-shadow: var(--dv-shadow-lg); }
.training-template small { color: var(--dv-ink2); }
.training-template > span:not(.training-template-icon) { color: var(--dv-ink2); }
.training-template i { color: var(--dv-action); }
.training-template-icon { color: var(--dv-action); background: var(--dv-tint); }
.training-sync i { background: var(--dv-accent); box-shadow: none; }
.training-sync small { color: var(--dv-ink2); }
.training-sync button { color: #a13f2c; background: rgba(211, 115, 93, .08); border: 0; }
.training-sync button:hover { background: rgba(211, 115, 93, .16); }
.training-empty { color: var(--dv-ink2); background: var(--dv-tint); border: 2px dashed var(--dv-outline); }
.training-empty > span { color: #fff; background: var(--dv-accent); }
.training-empty p { color: var(--dv-ink2); }
.training-add-exercise { color: var(--dv-ink); background: var(--dv-tint); border: 2px dashed var(--dv-outline); }
.training-add-exercise:hover { background: var(--dv-outline); }
.training-add-exercise > span { color: #fff; background: var(--dv-accent); }
.training-add-exercise small { color: var(--dv-ink2); }
.training-start-primary:disabled { color: var(--dv-ink2); background: var(--dv-tint); }
.training-program-picker { color: var(--dv-ink); background: var(--dv-paper); }
.training-program-picker__copy h2 { color: var(--dv-ink); }
.training-program-picker__copy p { color: var(--dv-ink2); }
.training-program-picker__field > span { color: var(--dv-ink2); }
.training-program-picker__field select { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.training-program-picker__field select:focus { box-shadow: 0 0 0 2px var(--dv-action); }
.training-program-picker__field small { color: var(--dv-ink2); }

/* ── Training (focused workout session) ──────────────────────────── */
.training-session-bar { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow-lg); backdrop-filter: none; }
.training-round-button { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.training-session-title small { color: var(--dv-ink2); }
.training-session-title input { color: var(--dv-accent); }
/* The sticky session bar carries the workout name, Finish, then time, volume and sets done out of the planned
   total. The line above it opens with a glowing "Live · now" on the left, with Discard on the right. */
.training-session-bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "exit title finish" "stats stats stats"; row-gap: 12px; margin-bottom: 14px; }
.training-session-bar > .training-round-button { grid-area: exit; }
.training-session-bar > .training-session-title { grid-area: title; }
.training-session-bar > .training-finish { grid-area: finish; }
.training-sync { align-items: center; min-height: 30px; }
.training-sync .training-live { display: inline-flex; align-items: center; gap: 7px; color: #2f8a52; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.training-sync .training-live i { width: 8px; height: 8px; border-radius: 50%; background: #3cc46f; box-shadow: 0 0 0 3px rgba(60, 196, 111, .2), 0 0 10px rgba(60, 196, 111, .75); animation: trainingLivePulse 1.6s ease-in-out infinite; }
@keyframes trainingLivePulse { 50% { box-shadow: 0 0 0 5px rgba(60, 196, 111, .08), 0 0 14px rgba(60, 196, 111, .9); } }
.training-bar-stats { display: grid; grid-area: stats; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-radius: 14px; background: var(--dv-tint); }
.training-bar-stats > div { min-width: 0; padding: 9px 8px 10px; border-left: 1px solid var(--dv-outline); text-align: center; }
.training-bar-stats > div:first-child { border-left: 0; }
.training-bar-stats dt { color: var(--dv-ink2); font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.training-bar-stats dd { margin: 3px 0 0; color: var(--dv-navy); font-size: 1.3rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.training-bar-stats dd small { color: var(--dv-ink2); font-size: .7rem; font-weight: 700; }
.training-bar-stats .training-bar-stats__time { color: #2f8a52; }
/* The live status says it all while saving works: the sync status only speaks up while loading or on errors. */
.training-sync > i, .training-sync:not(.is-loading):not(.is-error) > :is(span:not(.training-live), small) { display: none; }
.training-sync.is-error > span:not(.training-live) { color: #a13f2c; font-weight: 700; }
.training-sync button { margin-left: auto; }
@media (max-width: 560px) {
  .training-session-bar { row-gap: 9px; }
  .training-bar-stats > div { padding: 7px 4px 8px; }
  .training-bar-stats dd { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) { .training-sync .training-live i { animation: none; } }
.workout-exercise { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.workout-exercise-image { background: var(--dv-tint); }
.workout-exercise-name > button { color: var(--dv-ink); }
.workout-exercise-name > button:hover { color: var(--dv-accent); }
.workout-exercise-name small { color: var(--dv-ink2); }
.exercise-menu { color: var(--dv-ink2); }
.exercise-note { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.exercise-note:focus { box-shadow: 0 0 0 2px var(--dv-action); }
.rest-select { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.set-head { color: var(--dv-ink2); }
.set-row:not(.set-head) { background: transparent; }
.set-number { color: var(--dv-ink); background: var(--dv-tint); }
.set-previous { color: var(--dv-ink2); }
.set-input { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.set-input:focus { box-shadow: 0 0 0 2px var(--dv-action); }
.set-input.is-missing { box-shadow: 0 0 0 2px #d24b4b; background: #fdeeee; animation: setMissingShake .32s ease; }
@keyframes setMissingShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .set-input.is-missing { animation: none; } }
.set-complete { color: var(--dv-accent); background: var(--dv-tint); border: 0; }
.set-row.is-complete { color: #fff; background: var(--dv-ink) !important; }
.set-row.is-complete .set-number, .set-row.is-complete .set-complete { color: var(--dv-ink); background: #fff; }
.set-row.is-complete .set-previous, .set-row.is-complete .set-delete { color: rgba(255,255,255,.82); }
.set-row.is-complete .set-input { color: #fff; background: rgba(255,255,255,.1); box-shadow: none; }
.set-row.is-complete .set-input::placeholder { color: rgba(255,255,255,.72); }
.add-set { color: var(--dv-action); background: var(--dv-tint); border: 2px dashed var(--dv-outline); }
.add-set:hover { background: var(--dv-outline); }
.set-delete { color: var(--dv-ink2); }
.set-delete:hover { color: #a13f2c; background: rgba(211, 115, 93, .08); border-color: transparent; }

.rest-timer { color: #fff; background: var(--dv-action); border: 0; box-shadow: var(--dv-shadow-lg); backdrop-filter: none; }
.rest-timer-copy small { color: rgba(255,255,255,.82); }
.rest-progress { background: rgba(255,255,255,.3); }
.rest-progress span { background: #fff; }
.rest-timer button { color: #fff; background: rgba(255,255,255,.14); border: 0; }
.rest-timer button:hover { background: rgba(255,255,255,.24); }
.rest-timer.is-done { border: 0; background: var(--dv-action); }

.training-dialog, .exit-dialog, .finish-dialog { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow-lg); }
.training-dialog::backdrop, .finish-dialog::backdrop { background: rgba(31, 58, 95, .45); }
.training-dialog h2, .exit-dialog h2, .finish-dialog h2 { color: var(--dv-ink); }
.training-dialog-head { border-bottom-color: var(--dv-outline); }
.training-dialog-head button { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
.exercise-picker-controls { border-bottom-color: var(--dv-outline); }
.exercise-picker-controls label { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.exercise-picker-controls input { color: var(--dv-ink); }
.exercise-picker-controls > div button { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
.exercise-picker-controls > div button.is-active { color: #fff; background: var(--dv-accent); border: 0; }
.exercise-pick { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow); }
.exercise-pick:hover { color: var(--dv-ink); box-shadow: var(--dv-shadow-lg); }

/* ── Exercise detail dialog ───────────────────────────────────────── */
.exercise-detail-fulllink { color: var(--dv-action); }
.exercise-detail-tabs { border-bottom-color: var(--dv-outline); }
.exercise-detail-tabs button { color: var(--dv-ink2); }
.exercise-detail-tabs button.is-active { color: var(--dv-accent); border-bottom-color: var(--dv-accent); }
.exercise-detail-media { background: var(--dv-tint); }
.exercise-detail-dialog svg { color: var(--dv-accent); }
.exercise-detail-metric-toggle button { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
.exercise-detail-metric-toggle button.is-active { color: #fff; background: var(--dv-accent); }
.exercise-detail-records h3 { color: var(--dv-ink); }
.exercise-detail-record { color: var(--dv-ink2); border-top-color: var(--dv-outline); }
.exercise-detail-record strong { color: var(--dv-ink); }
.exercise-detail-empty { color: var(--dv-ink2); }
.exercise-detail-empty strong { color: var(--dv-ink); }
.exercise-history-session > header strong { color: var(--dv-ink); }
.exercise-history-session > header span { color: var(--dv-ink2); }
.exercise-history-session .exercise-history-set-row { color: var(--dv-ink); }
.exercise-history-session .exercise-history-set-row:nth-child(even) { background: var(--dv-tint); }
.exercise-history-session .exercise-history-set-row span:first-child { color: var(--dv-ink2); }
[data-exercise-howto-steps] { color: var(--dv-ink); }
[data-exercise-howto-steps] li::marker { color: var(--dv-accent); }
.exercise-pick small { color: var(--dv-ink2); }
.exercise-pick-add { color: #fff; background: var(--dv-accent); }
.exercise-pick-info { color: var(--dv-ink2); background: var(--dv-tint); }
.exercise-pick-info:hover { color: #fff; background: var(--dv-action); }
.exercise-picker-loading, .exercise-picker-empty { color: var(--dv-ink2); }

.exit-visual { color: #fff; background: var(--dv-accent); border: 0; }
.exit-dialog.is-danger .exit-visual { color: #a13f2c; background: rgba(211, 115, 93, .14); border: 0; box-shadow: 0 0 0 6px rgba(211, 115, 93, .09); }
.exit-dialog > p { color: var(--dv-ink2); }
.exit-dialog.is-danger h2 { color: #a13f2c; }
.exit-dialog.is-danger [data-confirm-ok] { color: #fff; background: #a13f2c; border-color: transparent; }
.exit-dialog.is-danger [data-confirm-ok]:hover { background: #8a3423; }
.discard-workout { color: #a13f2c; background: rgba(211, 115, 93, .08); border: 0; }
.discard-workout:hover { background: rgba(211, 115, 93, .16); }

.finish-visual { color: #fff; background: var(--dv-navy); box-shadow: none; }
.finish-body > p { color: var(--dv-ink2); }
.finish-body > .finish-count { display: inline-block; margin: 4px 0 10px; padding: 7px 16px; border-radius: 999px; color: var(--dv-navy); background: rgba(31, 58, 95, .1); font-size: .95rem; font-weight: 700; }
.finish-body > .finish-count b { font-weight: 900; }
.finish-body > .finish-count[hidden] { display: none; }
/* Workout summary: a shorter card whose content scrolls while the two actions stay pinned at the bottom. */
/* Also a training dialog, so the selector outranks the full-height mobile dialog rule further down. */
.training-dialog.finish-dialog { max-height: min(560px, 72vh); max-height: min(560px, 72dvh); padding: 0; overflow: hidden; }
.finish-dialog[open] { display: flex; flex-direction: column; }
.finish-body { flex: 1 1 auto; min-height: 0; padding: 22px 22px 16px; overflow-y: auto; overscroll-behavior: contain; }
.finish-dialog .finish-visual { width: 46px; height: 46px; margin-bottom: 10px; font-size: 1.2rem; }
/* Workout summary: the check and the save button use the dark site blue, not the violet accent. */
.finish-dialog .finish-actions .app-button:not(.app-button-secondary) { background: var(--dv-navy); }
.finish-dialog .finish-actions .app-button:not(.app-button-secondary):hover { background: #2e5182; }
.finish-dialog .finish-actions { flex: 0 0 auto; padding: 14px 22px 18px; border-top: 1px solid var(--dv-outline); background: var(--dv-paper); box-shadow: 0 -12px 18px -14px rgba(31, 58, 95, .45); }
.finish-stats div { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.finish-stats span { color: var(--dv-ink2); }
/* New personal records stand out in a light green, the same soft tone as the blue cards, with a medal. */
.finish-stats .finish-stat-records span svg { display: none; }
.finish-stats .finish-stat-records.has-records { color: #1f6b3e; background: #e1f4e7; }
.finish-stats .finish-stat-records.has-records span { display: flex; align-items: center; justify-content: center; gap: 5px; color: #23784a; font-weight: 800; }
.finish-stats .finish-stat-records.has-records span svg { display: block; width: 12px; height: 15px; }
.finish-stats .finish-stat-records.has-records strong { color: #1f6b3e; }
.finish-records { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 18px; border: 0; border-radius: 16px; background: #e1f4e7; }
.finish-records[hidden] { display: none; }
.finish-records__medal { display: block; transform-origin: 50% 0; animation: finishMedalSwing 1.1s cubic-bezier(.3, 1.6, .5, 1) both; }
.finish-records__medal svg { display: block; width: 34px; height: 41px; filter: drop-shadow(1.5px 2px 0 rgba(31, 58, 95, .22)); }
.finish-records .finish-records__title { margin-bottom: 8px; color: #23784a; letter-spacing: .12em; }
.finish-records__list > div { padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .65); }
.finish-records .finish-records__list strong { color: var(--dv-navy); }
.finish-records .finish-records__list span { color: #2a6b45; font-weight: 600; }
@keyframes finishMedalSwing { 0% { opacity: 0; transform: translateY(-10px) rotate(-18deg) scale(.6); } 60% { opacity: 1; transform: rotate(8deg) scale(1.06); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .finish-records__medal { animation: none; } }
.finish-muscles { border: 0; background: var(--dv-tint); }
.finish-muscles > span { color: var(--dv-accent); }
/* Muscles trained: each muscle gets its own bar, filled to its share of the workout. */
.finish-muscle-list { display: grid; gap: 10px; }
.finish-muscle-row { display: grid; grid-template-columns: minmax(70px, 30%) minmax(0, 1fr) 38px; align-items: center; gap: 12px; }
.finish-muscle-row > span { overflow: hidden; color: var(--dv-ink); font-size: .84rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.finish-muscle-track { display: block; height: 10px; overflow: hidden; border-radius: 99px; background: rgba(46, 81, 130, .1); }
.finish-muscle-track b { display: block; height: 100%; border-radius: 99px; }
.finish-muscle-row > em { color: var(--dv-ink2); font-size: .8rem; font-style: normal; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.finish-muscle-track b[data-muscle-color="0"] { background: #5b4a9e; }
.finish-muscle-track b[data-muscle-color="1"] { background: #3a5c87; }
.finish-muscle-track b[data-muscle-color="2"] { background: #4d8f7b; }
.finish-muscle-track b[data-muscle-color="3"] { background: #c9974f; }
.finish-muscle-track b[data-muscle-color="4"] { background: #c2635a; }
.finish-muscle-track b[data-muscle-color="5"] { background: #7a7f93; }

.custom-workout-empty { border: 2px dashed var(--dv-outline); background: var(--dv-tint); }
.custom-workout-empty > span { color: var(--dv-action); background: var(--dv-paper); }
.custom-workout-empty small { color: var(--dv-ink2); }
.custom-workout-empty button { color: var(--dv-action); background: var(--dv-paper); border: 0; }
.custom-workout-card { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.custom-workout-card > small { color: var(--dv-ink2); }
.custom-workout-card > strong { color: var(--dv-ink); }
.custom-workout-card > p { color: var(--dv-ink2); }
.custom-workout-card-meta span { color: var(--dv-ink2); background: var(--dv-tint); }
.custom-workout-card-actions button { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
.custom-workout-card-actions .custom-start { color: #fff; background: var(--dv-accent); }
.custom-workout-card-actions .custom-delete { color: #a13f2c; }
/* Folders of custom workouts: a collapsible group whose workouts repeat in order when it is the active program. */
.custom-workouts-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.custom-workouts-head-actions .dash-ghost-button { cursor: pointer; }
.workout-folder { grid-column: 1 / -1; border-radius: 18px; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.workout-folder.is-active-program { box-shadow: 0 0 0 2px var(--dv-action), var(--dv-shadow); }
.workout-folder__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px 12px 8px; }
.workout-folder__toggle { display: flex; flex: 1 1 260px; min-width: 0; align-items: center; gap: 12px; padding: 4px 6px; border: 0; border-radius: 12px; color: var(--dv-ink); background: transparent; text-align: left; cursor: pointer; }
.workout-folder__toggle:hover { background: var(--dv-tint); }
.workout-folder__toggle:focus-visible, .workout-folder__actions button:focus-visible { outline: 3px solid var(--dv-accent); outline-offset: 2px; }
.workout-folder__chevron { flex: none; width: 18px; color: var(--dv-ink2); font-size: 1.3rem; line-height: 1; text-align: center; transition: transform .2s ease; }
.workout-folder.is-open .workout-folder__chevron { transform: rotate(90deg); }
.workout-folder__icon { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--dv-accent); background: var(--dv-tint); }
.workout-folder__icon svg { width: 22px; height: 22px; }
.workout-folder__title { display: grid; min-width: 0; gap: 2px; }
.workout-folder__title strong { overflow: hidden; font-size: 1.05rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.workout-folder__title small { color: var(--dv-ink2); font-size: .74rem; font-weight: 600; }
.workout-folder.is-active-program .workout-folder__title small { color: var(--dv-action); font-weight: 800; }
.workout-folder__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.workout-folder__actions button { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; color: var(--dv-ink2); background: var(--dv-tint); font-weight: 800; cursor: pointer; }
.workout-folder__actions button:hover { color: #fff; background: var(--dv-action); }
.workout-folder__actions svg { width: 17px; height: 17px; }
.workout-folder__actions .workout-folder__activate { padding: 0 14px; color: #fff; background: var(--dv-action); font-size: .74rem; }
.workout-folder__actions .workout-folder__activate:hover { background: #3a5f98; }
.workout-folder__actions [data-folder-delete]:hover { background: #a13f2c; }
.workout-folder__add { font-size: 1.1rem; }
.workout-folder__body { padding: 0 14px 14px 50px; border-top: 1px solid var(--dv-outline); padding-top: 14px; }
.workout-folder__grid .custom-workout-card { background: var(--dv-tint); box-shadow: none; }
.workout-folder__grid .custom-workout-card-meta span, .workout-folder__grid .custom-workout-card-actions button:not(.custom-start) { background: var(--dv-paper); }
.workout-folder__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 2px dashed var(--dv-outline); border-radius: 14px; }
.workout-folder__empty p { margin: 0; color: var(--dv-ink2); font-size: .8rem; }
.workout-folder__empty button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; color: var(--dv-action); background: var(--dv-tint); font-weight: 800; cursor: pointer; }
.custom-workout-card.is-in-folder { position: relative; }
/* Drag and drop inside a folder: a grip lifts the card, a dashed slot shows where it will land. */
.custom-workout-grip { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; color: var(--dv-ink2); background: var(--dv-paper); cursor: grab; touch-action: none; }
.custom-workout-grip svg { width: 18px; height: 18px; }
.custom-workout-grip:hover { color: #fff; background: var(--dv-action); }
.custom-workout-grip:focus-visible { outline: 3px solid var(--dv-accent); outline-offset: 2px; }
.workout-folder__grid .custom-workout-card.is-drag-placeholder { background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 2px var(--dv-outline); }
.custom-workout-card.is-drag-placeholder > * { visibility: hidden; }
.custom-workout-card.is-drag-ghost { position: fixed; z-index: 1000; margin: 0; background: var(--dv-paper); box-shadow: 0 18px 40px rgba(31, 58, 95, .3); pointer-events: none; }
.custom-workout-card.is-drag-ghost .custom-workout-grip { color: #fff; background: var(--dv-action); }
body.is-dragging-workout { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.custom-workout-loose-title { grid-column: 1 / -1; margin: 8px 0 -2px; color: var(--dv-ink2); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.builder-folder-field[hidden] { display: none; }
.folder-dialog { width: min(460px, calc(100vw - 28px)); }
.folder-dialog-form { display: grid; gap: 12px; padding: 18px 20px 20px; }
.folder-dialog-hint { margin: 0; color: var(--dv-ink2); font-size: .8rem; line-height: 1.5; }
@media (max-width: 560px) {
  .workout-folder__body { padding: 12px; }
  .workout-folder__actions { width: 100%; padding-left: 36px; }
}
@media (prefers-reduced-motion: reduce) { .workout-folder__chevron { transition: none; } }

.builder-fields label > span { color: var(--dv-ink2); }
.builder-fields input { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.builder-fields input:focus { box-shadow: 0 0 0 2px var(--dv-action); }
.builder-section-head small { color: var(--dv-ink2); }
.builder-section-head button { color: var(--dv-action); background: var(--dv-tint); border: 0; }
.builder-section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.builder-section-actions button { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.builder-section-actions button[hidden] { display: none; }
.builder-section-actions svg { width: 14px; height: 14px; }
@media (max-width: 560px) {
  .builder-section-head { flex-wrap: wrap; }
  .builder-section-actions { flex-wrap: nowrap; }
}
.builder-empty { color: var(--dv-ink2); border: 2px dashed var(--dv-outline); }
.builder-exercise { border: 0; background: var(--dv-tint); }
.builder-exercise-name small { color: var(--dv-ink2); }
.builder-exercise-visual { padding: 0; overflow: hidden; border: 0; cursor: pointer; }
.builder-exercise-visual img { width: 100%; height: 100%; border-radius: 0; }
.builder-exercise-name strong button { display: block; width: 100%; overflow: hidden; padding: 0; border: 0; color: inherit; background: none; font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.builder-exercise-name strong button:hover { color: var(--dv-accent); }
.builder-exercise label span { color: var(--dv-ink2); }
.builder-exercise input, .builder-exercise select { color: var(--dv-ink); background: var(--dv-paper); border: 0; }
.builder-remove { color: #a13f2c; background: rgba(211, 115, 93, .08); border: 0; }
.builder-footer { border-top-color: var(--dv-outline); }
.builder-footer > span { color: var(--dv-ink2); }

/* ── Programs ─────────────────────────────────────────────────────── */
.program-card { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow); }
.program-card:hover { color: var(--dv-ink); box-shadow: var(--dv-shadow-lg); transform: translateY(-2px); }
.program-card-visual { background: var(--dv-illustration); }
/* Program cards show each program's banner in full: the visual takes the artwork's own ratio. */
.program-card-visual--banner { height: auto; aspect-ratio: 620 / 315; background: #7ea6dd; }
.program-card-visual--banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.program-card-body h3 { color: var(--dv-ink); }
.program-card-body p { color: var(--dv-ink2); }
.program-hover-details span { color: var(--dv-ink2); background: var(--dv-tint); }
.program-hover-details b { color: var(--dv-ink); }
.program-card-meta { color: var(--dv-ink2); }
.program-card-progress { color: var(--dv-action); }
.program-card-cta { color: var(--dv-accent); }
.program-lock { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow); }
[data-programs-page]:not([data-program-ready]) .program-library-grid > .program-card { opacity: 0; pointer-events: none; }
[data-membership-offer] .hub-plans { margin-top: 30px; }
.program-price { color: var(--dv-ink); }
.program-test-badge { color: var(--dv-action); background: var(--dv-tint); border: 0; }
.program-test-badge.is-complete { color: #236b43; background: #dff4d7; box-shadow: inset 0 0 0 1px rgba(35, 107, 67, .16); }
.program-card-progress b { color: var(--dv-ink); }
.program-abandon { color: #a13f2c; background: rgba(211, 115, 93, .08); border: 0; }
/* Locked programs: buy right from the card, or open the sales page from anywhere else on the card.
   Only the artwork stays grey, so the buy button keeps the site blue. */
.program-card.is-locked { filter: none; }
.program-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: auto; padding-top: 14px; }
.program-card-actions .program-card-cta { position: static; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-weight: 700; text-decoration: none; }
.program-card-actions .program-card-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.program-card-actions .program-card-cta:focus-visible { outline: 0; }
/* The link covers the whole card, so hovering the card hovers the link: it keeps the site purple. */
.program-card-actions .program-card-cta:hover { color: var(--dv-accent); }
/* Best seller sticker beside the price on the Hero Project offers. */
.program-card-tags { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.program-card-tags .program-test-badge { position: static; }
.program-best-seller {
  display: inline-flex; align-items: center; padding: 4px 10px; border: 2px solid var(--dv-navy); border-radius: 999px; transform: rotate(-3deg);
  color: var(--dv-navy); background: #ffd24a; box-shadow: 2px 2px 0 var(--dv-navy);
  font-size: .62rem; font-weight: 900; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; white-space: nowrap;
}
.program-card:has(.program-card-cta:focus-visible) { outline: 3px solid var(--dv-accent); outline-offset: 3px; }
.program-card-buy {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px;
  border: 0; border-radius: 999px; color: #fff; background: var(--dv-action); font-size: .78rem; font-weight: 800; cursor: pointer;
  transition: background .15s ease;
}
.program-card-buy:hover { color: #fff; background: #3a5f98; }
.program-card-buy:focus-visible { outline: 3px solid var(--dv-accent); outline-offset: 3px; }
.program-card-buy:disabled { cursor: progress; opacity: .75; }
.program-card-status { position: relative; z-index: 2; margin: 8px 0 0; color: var(--dv-ink2); font-size: .72rem; font-weight: 600; }
.program-card-status:empty { display: none; }
.program-card-status[data-tone="error"] { color: #a13f2c; }
@media (prefers-reduced-motion: reduce) { .program-card-buy { transition: none; } }
.program-progress-top h2 { color: var(--dv-ink); font-style: italic; font-weight: 800; }
.program-progress-top > strong { color: var(--dv-accent); }
.program-progress-facts { color: var(--dv-ink2); }
.program-next-panel p { color: var(--dv-ink2); }
.program-session-meta span { color: var(--dv-ink2); background: var(--dv-tint); }
.program-session-row { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.program-session-row > span { color: var(--dv-ink2); background: var(--dv-tint); }
.program-session-row small { color: var(--dv-ink2); }
.program-session-row b { color: var(--dv-ink2); }
.program-session-row.is-current { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow-lg); }
.program-session-row.is-current > span { color: #fff; background: var(--dv-accent); }
.program-session-row.is-current b, .program-session-row.is-done b { color: var(--dv-accent); }
.program-session-row.is-done > span { color: var(--dv-accent); background: var(--dv-tint); }
.program-principles p { color: var(--dv-ink2); }

/* ── Progress ─────────────────────────────────────────────────────── */
.progress-metric { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.progress-metric--ratio { background: var(--dv-paper); }
.progress-metric span { color: var(--dv-ink2); }
.progress-metric strong { color: var(--dv-ink); }
.progress-metric strong i { color: var(--dv-ink2); }
.progress-metric small { color: var(--dv-action); }
.progress-chart-tabs button { color: var(--dv-ink2); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow); }
/* Body check-ins: one segmented control, with body parts and a left/right switch only under Measurements. */
.physical-metric-tabs { align-self: flex-start; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--dv-tint); }
.physical-metric-tabs button, .physical-part-chips button, .physical-side-toggle button { font: inherit; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.physical-metric-tabs button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 0; border-radius: 999px; color: var(--dv-ink2); background: transparent; font-size: .8rem; }
.physical-metric-tabs button:hover { color: var(--dv-ink); background: rgba(255, 255, 255, .65); }
.physical-metric-tabs button.is-active { color: #fff; background: var(--dv-accent); box-shadow: 0 4px 10px rgba(91, 74, 158, .28); }
.physical-measure-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: -4px; }
.physical-measure-row[hidden], .physical-side-toggle[hidden] { display: none; }
.physical-part-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.physical-part-chips button { min-height: 34px; padding: 0 15px; border: 1.5px solid var(--dv-tint); border-radius: 999px; color: var(--dv-ink2); background: #fff; font-size: .76rem; }
.physical-part-chips button:hover { border-color: var(--dv-accent); }
.physical-part-chips button.is-active { border-color: var(--dv-accent); color: var(--dv-accent); background: rgba(91, 74, 158, .08); }
.physical-side-toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--dv-tint); }
.physical-side-toggle button { min-height: 30px; padding: 0 15px; border: 0; border-radius: 999px; color: var(--dv-ink2); background: transparent; font-size: .74rem; }
.physical-side-toggle button.is-active { color: var(--dv-ink); background: #fff; box-shadow: var(--dv-shadow); }
.physical-metric-tabs button:focus-visible, .physical-part-chips button:focus-visible, .physical-side-toggle button:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
@media (max-width: 560px) {
  .physical-metric-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 18px; }
  .physical-metric-tabs button { border-radius: 14px; padding: 0 10px; }
}
.progress-chart-tabs button:hover { color: var(--dv-ink); transform: none; box-shadow: var(--dv-shadow-lg); }
.progress-chart-tabs button.is-active { color: var(--dv-ink); border: 0; background: var(--dv-tint); box-shadow: none; }
.progress-tab-icon { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
.progress-chart-tabs button.is-active .progress-tab-icon { color: #fff; border: 0; background: var(--dv-accent); }
.progress-tab-copy small { color: var(--dv-ink2); }
.progress-chart-tabs button.is-active .progress-tab-copy small { color: var(--dv-ink2); }
.progress-range-filter button { color:var(--dv-ink2); border:0; background:var(--dv-tint); }
.progress-range-filter button.is-active { color:#fff; background:var(--dv-action); }
.membership-free .progress-range-filter button:not(.is-active) { color:var(--dv-ink2); background:var(--dv-tint); opacity:.78; }
.progress-chart-stage { --progress-chart-accent: var(--dv-accent); }
.progress-big-chart .axis { stroke: var(--dv-outline); }
.progress-chart-scale { color: var(--dv-ink2); }
.progress-chart-tooltip { border: 0; background: var(--dv-ink); box-shadow: var(--dv-shadow-lg); }
.progress-chart-tooltip { padding: 10px 14px; }
.progress-chart-tooltip span { color: rgba(255, 255, 255, .78); font-size: .72rem; }
.progress-chart-tooltip strong { margin-top: 4px; color: #fff; font-size: 1.05rem; font-weight: 800; }
.progress-target-line { stroke: var(--dv-accent); }
.progress-target-label { fill: var(--dv-accent); }
.measurement-row { background: var(--dv-tint); }
.measurement-row span { color: var(--dv-ink2); }
.measurement-row small { color: var(--dv-action); }
.adonis-ratio { border: 0; background: var(--dv-tint); }
.adonis-ratio-head span { color: var(--dv-ink2); }
.adonis-ratio-head strong { color: var(--dv-ink); }
.adonis-ratio-head small { color: var(--dv-accent); }
.adonis-ratio-track { background: var(--dv-outline); }
.adonis-ratio-track span { background: var(--dv-accent); box-shadow: none; }
.adonis-ratio p { color: var(--dv-ink2); }
.progress-chart-empty { color: var(--dv-ink); background: var(--dv-paper); }
.progress-chart-empty small { color: var(--dv-ink2); }
.progress-checkin-latest, .progress-checkin-panel .adonis-ratio { margin-bottom: 20px; }
.progress-checkin-panel .adonis-ratio { margin-top: 0; }
.progress-checkin-panel .progress-checkin-button { margin-top: auto; }
.progress-checkin-latest > div { border: 0; background: var(--dv-tint); }
.progress-checkin-latest span { color: var(--dv-ink2); }
.progress-checkin-latest strong { color: var(--dv-ink); }
.progress-measurement-details__grid > div { border:0; background:var(--dv-tint); }
.progress-measurement-details__grid span { color:var(--dv-ink2); }
.progress-measurement-details__grid strong { color:var(--dv-ink); }
.progress-measurement-details.is-locked::after { background:linear-gradient(180deg,rgba(198,220,247,.05),rgba(198,220,247,.94)); }
.progress-photo-upload { color: var(--dv-action); border-color: var(--dv-outline); background: var(--dv-tint); }
.progress-photo-upload:hover { border-color: var(--dv-action); background: var(--dv-outline); }
.progress-photo-upload small { color: var(--dv-ink2); }
.progress-photo-card { border: 0; background: var(--dv-tint); box-shadow: var(--dv-shadow); }
.progress-photo-media { border: 0; background: var(--dv-tint); box-shadow: var(--dv-shadow); }
.progress-photo-card figcaption { color: var(--dv-ink2); }

/* Check-in history, edit and delete. */
.progress-checkin-dialog .progress-checkin-date { grid-column: 1 / -1; }
.progress-checkin-dialog footer .progress-checkin-delete { margin-right: auto; border: 1.5px solid rgba(179, 38, 30, .35); color: #b3261e; background: transparent; font-weight: 700; }
.progress-checkin-dialog footer .progress-checkin-delete.is-confirming { border-color: #b3261e; color: #fff; background: #b3261e; }
.progress-checkin-dialog footer .progress-checkin-delete[hidden] { display: none; }
.physical-history { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dv-tint); }
.physical-history[hidden] { display: none; }
.physical-history__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.physical-history__head strong { color: var(--dv-ink); font-size: .92rem; }
.physical-history__head span { color: var(--dv-ink2); font-size: .74rem; }
.physical-history__list { display: grid; gap: 6px; max-height: 268px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.physical-history__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--dv-tint); }
.physical-history__list li > div { min-width: 0; }
.physical-history__list strong { display: block; color: var(--dv-ink); font-size: .84rem; }
.physical-history__list small { display: block; margin-top: 2px; color: var(--dv-ink2); font-size: .74rem; }
.physical-history__list button { flex: 0 0 auto; min-height: 32px; padding: 0 16px; border: 0; border-radius: 999px; color: var(--dv-accent); background: #fff; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.physical-history__list button:hover, .physical-history__list button:focus-visible { color: #fff; background: var(--dv-accent); }

/* Photo check-ins open in a full-size viewer. */
.progress-photo-card .progress-photo-open { position: static; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; opacity: 1; cursor: zoom-in; }
.progress-photo-card .progress-photo-open:focus-visible { outline: 3px solid var(--dv-accent); outline-offset: -3px; }
.progress-photo-viewer { width: min(760px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 22px; overflow: hidden; border: 0; border-radius: 22px; color: var(--dv-ink); background: #fff; box-shadow: var(--dv-shadow-lg); }
.progress-photo-viewer::backdrop { background: rgba(20, 34, 58, .72); backdrop-filter: blur(6px); }
.progress-photo-viewer header { padding-right: 44px; }
.progress-photo-viewer h2 { margin: 4px 0 14px; color: var(--dv-ink); font-size: 1.35rem; }
.progress-photo-viewer__stage { position: relative; display: flex; align-items: center; justify-content: center; height: min(calc(100dvh - 190px), 700px); overflow: hidden; border-radius: 16px; background: var(--dv-tint); }
.progress-photo-viewer__stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.progress-photo-viewer__nav { position: absolute; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--dv-ink); background: rgba(255, 255, 255, .92); box-shadow: var(--dv-shadow); font-size: 1.6rem; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.progress-photo-viewer__nav[hidden] { display: none; }
.progress-photo-viewer__nav--prev { left: 12px; }
.progress-photo-viewer__nav--next { right: 12px; }
.progress-photo-viewer__nav:hover, .progress-photo-viewer__nav:focus-visible { color: #fff; background: var(--dv-accent); }
@media (max-width: 560px) {
  .progress-photo-viewer { width: calc(100% - 16px); padding: 18px 14px; }
  .progress-photo-viewer__stage { height: min(calc(100dvh - 160px), 620px); }
}
.progress-photos-empty { color: var(--dv-ink2); }

/* Photo check-ins: a timeline that scrolls sideways, oldest first, with each day's weight and body fat. */
.progress-photos-actions { display: flex; align-items: center; gap: 10px; }
.progress-photos-actions > span { color: var(--dv-ink2); font-size: .8rem; font-weight: 700; }
.progress-photos-compare { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; color: #fff; background: var(--dv-action); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.progress-photos-compare:hover { background: #3a5f98; }
.progress-photos-compare:focus-visible { outline: 3px solid var(--dv-accent); outline-offset: 2px; }
.progress-photos-compare[hidden] { display: none; }
.progress-photos-grid.progress-photos-timeline { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.progress-photos-timeline > * { flex: 0 0 160px; scroll-snap-align: end; }
.progress-photos-timeline .progress-photo-upload { align-self: flex-start; height: auto; aspect-ratio: 3 / 4; }
.progress-photo-card figcaption { display: grid; gap: 2px; }
.progress-photo-card figcaption small { color: var(--dv-ink2); font-size: .7rem; font-weight: 700; }
@media (max-width: 560px) { .progress-photos-timeline > * { flex-basis: 42%; } }

/* The photo slot of a check-in (Pro), and the locked row everyone else sees. */
.progress-checkin-photo { display: grid; gap: 8px; grid-column: 1 / -1; }
.progress-checkin-photo__label { display: flex; align-items: baseline; gap: 8px; color: var(--dv-ink); font-size: .74rem; font-weight: 700; }
.progress-checkin-photo__label small { color: var(--dv-ink2); font-size: .68rem; font-weight: 600; }
.progress-checkin-photo__slot { position: relative; width: 132px; }
.progress-checkin-dialog .progress-checkin-photo__picker { display: grid; place-items: center; width: 132px; aspect-ratio: 3 / 4; overflow: hidden; border: 2px dashed var(--dv-outline); border-radius: 14px; color: var(--dv-action); background: var(--dv-tint); cursor: pointer; }
.progress-checkin-dialog .progress-checkin-photo__picker:hover, .progress-checkin-dialog .progress-checkin-photo__picker.is-dragging { border-color: var(--dv-action); }
.progress-checkin-dialog .progress-checkin-photo__picker:focus-visible { outline: 3px solid var(--dv-accent); outline-offset: 2px; }
.progress-checkin-dialog .progress-checkin-photo__picker.has-photo { border: 0; }
.progress-checkin-photo__picker img { width: 100%; height: 100%; object-fit: cover; }
.progress-checkin-photo__picker img[hidden], .progress-checkin-photo__empty[hidden] { display: none; }
.progress-checkin-photo__empty { display: grid; justify-items: center; gap: 4px; padding: 8px; text-align: center; }
.progress-checkin-photo__empty svg { width: 28px; height: 28px; }
.progress-checkin-photo__empty strong { color: var(--dv-action); font-size: .82rem; font-weight: 800; }
.progress-checkin-photo__empty small { color: var(--dv-ink2); font-size: .62rem; }
.progress-checkin-photo__remove { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(31, 58, 95, .82); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.progress-checkin-photo__remove:hover { background: #a13f2c; }
.progress-checkin-photo__remove[hidden] { display: none; }
.progress-checkin-photo-lock { display: none; grid-column: 1 / -1; align-items: center; gap: 12px; padding: 12px 14px; border: 2px dashed var(--dv-outline); border-radius: 14px; color: var(--dv-ink2); background: var(--dv-tint); font: inherit; text-align: left; cursor: pointer; }
.progress-checkin-photo-lock svg { flex: none; width: 20px; height: 20px; }
.progress-checkin-photo-lock span { display: grid; gap: 2px; }
.progress-checkin-photo-lock strong { color: var(--dv-ink); font-size: .84rem; }
.progress-checkin-photo-lock small { color: var(--dv-action); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.membership-free .progress-checkin-photo-lock { display: flex; }

/* A photo opens beside the check-in of its day. */
.progress-photo-viewer { width: min(980px, calc(100% - 28px)); overflow: auto; }
.progress-photo-viewer__body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
.progress-photo-viewer__body .progress-photo-viewer__stage { height: min(calc(100dvh - 190px), 640px); }
.progress-photo-viewer__details { display: grid; align-content: start; gap: 12px; }
.progress-photo-viewer__details h3 { margin: 0; color: var(--dv-ink); font-size: 1rem; }
.progress-photo-viewer__details dl { display: grid; gap: 6px; margin: 0; }
.progress-photo-viewer__details dl:empty { display: none; }
.progress-photo-viewer__details dl > div, .progress-photo-compare__changes dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; background: var(--dv-tint); }
.progress-photo-viewer__details dt, .progress-photo-compare__changes dt { color: var(--dv-ink2); font-size: .78rem; font-weight: 600; }
.progress-photo-viewer__details dd { margin: 0; color: var(--dv-ink); font-size: .88rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.progress-photo-viewer__details p { margin: 0; color: var(--dv-ink2); font-size: .82rem; line-height: 1.45; }
.progress-photo-viewer__details p[hidden] { display: none; }
.progress-photo-viewer__actions { display: grid; gap: 8px; margin-top: 4px; }
.progress-photo-viewer__actions button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; color: #fff; background: var(--dv-action); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.progress-photo-viewer__actions button:hover { background: #3a5f98; }
.progress-photo-viewer__actions .is-danger { color: #a13f2c; background: rgba(211, 115, 93, .1); }
.progress-photo-viewer__actions .is-danger:hover { color: #fff; background: #a13f2c; }
@media (max-width: 760px) {
  .progress-photo-viewer__body { grid-template-columns: 1fr; }
  .progress-photo-viewer__body .progress-photo-viewer__stage { height: min(60dvh, 540px); }
  .progress-photo-viewer__details dl { grid-template-columns: 1fr 1fr; }
  .progress-photo-viewer__details dl > div { display: grid; justify-content: start; gap: 2px; }
}

/* Compare two photos side by side, with what changed between their check-ins. */
.progress-photo-compare { width: min(900px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 22px; overflow: auto; border: 0; border-radius: 22px; color: var(--dv-ink); background: #fff; box-shadow: var(--dv-shadow-lg); }
.progress-photo-compare::backdrop { background: rgba(20, 34, 58, .72); backdrop-filter: blur(6px); }
.progress-photo-compare header { padding-right: 44px; }
.progress-photo-compare h2 { margin: 4px 0 14px; color: var(--dv-ink); font-size: 1.35rem; }
.progress-photo-compare__panes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.progress-photo-compare__panes figure { display: grid; gap: 8px; min-width: 0; margin: 0; }
.progress-photo-compare__panes label { display: grid; gap: 4px; color: var(--dv-ink2); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.progress-photo-compare__panes select { width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; color: var(--dv-ink); background: var(--dv-tint); font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.progress-photo-compare__panes select:focus-visible { outline: 3px solid var(--dv-accent); outline-offset: 1px; }
.progress-photo-compare__media { height: min(56dvh, 520px); overflow: hidden; border-radius: 14px; background: var(--dv-tint); }
.progress-photo-compare__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.progress-photo-compare__panes figcaption { color: var(--dv-ink); font-size: .84rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.progress-photo-compare__changes { margin-top: 16px; }
.progress-photo-compare__changes h3 { margin: 0 0 8px; color: var(--dv-ink); font-size: 1rem; }
.progress-photo-compare__changes dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.progress-photo-compare__changes dl:empty { display: none; }
.progress-photo-compare__changes dd { display: grid; justify-items: end; gap: 1px; margin: 0; text-align: right; }
.progress-photo-compare__changes dd span { color: var(--dv-ink2); font-size: .72rem; font-variant-numeric: tabular-nums; }
.progress-photo-compare__changes dd b { color: var(--dv-ink); font-size: .9rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.progress-photo-compare__changes dd b.is-flat { color: var(--dv-ink2); font-weight: 700; }
.progress-photo-compare__changes p { margin: 0; color: var(--dv-ink2); font-size: .82rem; }
.progress-photo-compare__changes p[hidden] { display: none; }
@media (max-width: 560px) {
  .progress-photo-compare { width: calc(100% - 16px); padding: 18px 14px; }
  .progress-photo-compare__media { height: min(42dvh, 360px); }
  .progress-photo-compare__changes dl { grid-template-columns: 1fr; }
}
.progress-checkin-form-error { color: #a13f2c; }
.progress-loading > span { border-color: var(--dv-outline); border-top-color: var(--dv-accent); }
.progress-loading small { color: var(--dv-ink2); }
.progress-error p { color: var(--dv-ink2); }
.progress-best { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.progress-best > span { color: var(--dv-action); background: var(--dv-tint); }
.progress-best small { color: var(--dv-ink2); }
.progress-best > b { color: var(--dv-accent); }
.progress-best > b.is-negative { color: #a13f2c; }
.progress-empty { color: var(--dv-ink); background: var(--dv-tint); border: 2px dashed var(--dv-outline); }
.progress-empty small { color: var(--dv-ink2); }
.progress-exercise-head { color: var(--dv-ink2); }
.progress-exercise-list, .progress-session-list { border: 0; box-shadow: var(--dv-shadow); }
.progress-exercise-row, .progress-session-row { border-bottom-color: var(--dv-outline); background: var(--dv-paper); }
.progress-exercise-row div small { color: var(--dv-ink2); }
.progress-exercise-row > span { color: var(--dv-ink2); }
.progress-exercise-row > span b { color: var(--dv-ink); }
.progress-session-row time strong { color: var(--dv-accent); }
.progress-session-row time small, .progress-session-row div small { color: var(--dv-ink2); }
.progress-session-row > span { color: var(--dv-ink2); }
.progress-session-row > b { color: var(--dv-action); background: var(--dv-tint); }
.progress-session-row > i { color: var(--dv-ink2); }

/* ── Nutrition ────────────────────────────────────────────────────── */
.nutrition-hero {
  position: relative;
  min-height: 310px;
  margin: -42px clamp(-52px, -3.2vw, -20px) 28px;
  padding: 56px clamp(20px, 3.2vw, 52px) 76px;
  overflow: visible;
  isolation: isolate;
}
.nutrition-hero::before {
  position: absolute;
  inset: 0 0 -76px;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: url('/images/nutrition-dashboard.webp') center 46% / cover no-repeat;
  opacity: .76;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.38) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.38) 88%, transparent 100%);
}
.nutrition-hero > * { position: relative; z-index: 1; }
.nutrition-hero > div { text-shadow: 0 2px 10px rgba(31, 58, 95, .28); }
.nutrition-hero .dash-eyebrow,
.nutrition-hero h1,
.nutrition-hero p:last-child { color: #fff; }
.calorie-ring { background: conic-gradient(var(--dv-accent) var(--calorie-progress, 0%), var(--dv-tint) 0); }
.calorie-ring::before { background: var(--dv-paper); }
.calorie-ring span { color: var(--dv-ink2); }
.macro-summary > div { color: var(--dv-ink2); }
.macro-summary b { color: var(--dv-ink); }
.nutrition-text-button { color: var(--dv-action); }
.nutrition-text-button:hover { background: var(--dv-tint); }
.nutrition-water button { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
/* Daily water goal, edited in place with a general guideline. */
.nutrition-water-goal { display: flex; justify-content: flex-end; margin-top: 8px; }
.nutrition-water-form { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--dv-tint); }
.nutrition-water-form label { display: grid; gap: 6px; color: var(--dv-ink2); font-size: .72rem; font-weight: 700; }
.nutrition-water-form input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--dv-outline); border-radius: 10px; color: var(--dv-ink); background: #fff; font: inherit; font-size: .9rem; }
.nutrition-water-form input:focus { border-color: var(--dv-action); outline: 3px solid rgba(74, 114, 176, .2); }
.nutrition-water-guideline { display: block; color: var(--dv-ink2); font-size: .66rem; font-weight: 500; line-height: 1.45; }
.nutrition-dialog .nutrition-water-guideline { margin-top: 2px; }
.nutrition-water-actions { display: flex; justify-content: flex-end; gap: 8px; }
.nutrition-water-actions button { min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: .7rem; font-weight: 800; cursor: pointer; }
.nutrition-water-actions button[type="button"] { border: 0; color: var(--dv-action); background: #fff; }
.nutrition-meals .app-section-heading > span { color: var(--dv-ink2); }
.nutrition-meals .app-section-heading > span b { color: var(--dv-ink); }
.nutrition-empty p { color: var(--dv-ink2); }
.meal-row { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.meal-icon { background: var(--dv-tint); }
.meal-row strong { color: var(--dv-ink); }
.meal-row small { color: var(--dv-ink2); }
.meal-calories { color: var(--dv-ink); }
.meal-calories span { color: var(--dv-ink2); }
.meal-row button { color: #a13f2c; border-color: transparent; background: rgba(211, 115, 93, .08); }
.meal-row button:hover { background: rgba(211, 115, 93, .16); border-color: transparent; }
.nutrition-insight { background: var(--dv-tint); }
.nutrition-insight strong { color: var(--dv-ink); }
.nutrition-insight small { color: var(--dv-ink2); }

/* ── Supplements ──────────────────────────────────────────────────── */
.supplement-metrics article { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.supplement-metrics span { color: var(--dv-ink2); }
.supplement-metrics strong { color: var(--dv-ink); }
.supplement-metrics small { color: var(--dv-action); }
.supplement-card { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.supplement-card { grid-template-columns: 64px minmax(0, 1fr) auto auto; }
.supplement-icon { position: relative; width: 64px; height: 64px; background: var(--dv-tint); overflow: hidden; }
.supplement-icon img { position: absolute; inset: 6px; display: block; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.supplement-info small { color: var(--dv-ink2); }
.supplement-stock strong { color: var(--dv-ink); }
.supplement-stock span { color: var(--dv-ink2); }
.supplement-stock.is-low strong { color: #a13f2c; }
.supplement-card.is-low .app-linear span { background: #a13f2c; }
.supplement-library article { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.supplement-library small { color: var(--dv-ink2); }
.supplement-library article > span {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  background: var(--dv-tint); border-radius: 16px;
  overflow: hidden;
}
.supplement-library article > span img { display: block; max-width: 72px; max-height: 72px; width: auto; height: auto; object-fit: contain; }

/* Popular-supplement quick pick inside the add-supplement dialog */
.supplement-picker { margin-bottom: 18px; }
.supplement-picker > .dash-kicker { display: block; margin-bottom: 10px; }
.supplement-picker-rail { position: relative; }
.supplement-picker-rail::after {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 6px;
  width: 72px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--dv-paper) 88%);
  transition: opacity .2s ease;
}
.supplement-picker-rail.is-at-end::after { opacity: 0; }
.supplement-picker-grid {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.supplement-picker-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: 0 0 auto; width: 104px;
  padding: 12px 8px 10px;
  border: 0; border-radius: 14px;
  color: var(--dv-ink); background: var(--dv-tint);
  font-size: .68rem; font-weight: 700; text-align: center;
}
.supplement-picker-grid button:hover { color: #fff; background: var(--dv-action); }
.supplement-picker-grid button:hover span { background: var(--dv-paper); }
.supplement-picker-grid button:hover small { color: #fff; opacity: .85; }
.supplement-picker-grid button > span {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 56px; height: 56px;
  background: var(--dv-paper); border-radius: 12px;
  overflow: hidden;
}
.supplement-picker-grid button img { display: block; max-width: 52px; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.supplement-picker-grid button strong { font-size: .74rem; font-weight: 800; line-height: 1.2; }
.supplement-picker-grid button small { font-size: .6rem; font-weight: 600; line-height: 1.25; color: var(--dv-ink2); }
.supplement-partner { border: 0; background: var(--dv-tint); }
.supplement-partner span { color: var(--dv-ink2); }
.supplement-empty p { color: var(--dv-ink2); }
.supplement-today-row { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.supplement-today-row small { color: var(--dv-ink2); }
.supplement-today-actions button { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
.supplement-today-actions b { color: var(--dv-accent); }
.supplement-today-row.is-complete { border: 0; background: var(--dv-tint); }
.supplement-next { border: 0; background: var(--dv-tint); }
.supplement-next p { color: var(--dv-ink2); }
.supplement-card .supplement-remove { color: #a13f2c; background: rgba(211, 115, 93, .08); border: 0; }
.supplement-card .supplement-remove:hover { background: rgba(211, 115, 93, .16); }
.supplement-card .supplement-edit { color: var(--dv-action); background: var(--dv-tint); border: 0; }
.supplement-card .supplement-edit:hover { background: var(--dv-outline); }

/* ── Shared tracker dialogs (nutrition / supplement / history / progress) ── */
.nutrition-dialog, .supplement-dialog, .history-dialog,
.nutrition-confirm, .supplement-confirm, .history-confirm,
.progress-checkin-dialog, .progress-photo-dialog {
  color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow-lg);
}
.nutrition-dialog::backdrop, .supplement-dialog::backdrop, .history-dialog::backdrop,
.nutrition-confirm::backdrop, .supplement-confirm::backdrop, .history-confirm::backdrop,
.progress-checkin-dialog::backdrop, .progress-photo-dialog::backdrop { background: rgba(31, 58, 95, .45); }
.nutrition-dialog-close, .supplement-dialog-close, .history-dialog-close,
.progress-dialog-close { color: var(--dv-ink2); background: var(--dv-tint); }
.progress-dialog-close:focus-visible { outline-color: var(--dv-action); }
.progress-checkin-dialog h2, .progress-photo-dialog h2 { color: var(--dv-ink); }
.nutrition-dialog h2, .supplement-dialog h2, .history-dialog h2,
.support-dialog h2, .settings-delete-dialog h2 { color: var(--dv-ink); }
.nutrition-dialog header p, .supplement-dialog header p, .history-dialog header p,
.progress-checkin-dialog header p, .progress-photo-dialog header p { color: var(--dv-ink2); }
.nutrition-dialog label, .supplement-dialog label, .progress-checkin-dialog label { color: var(--dv-ink2); }
.nutrition-dialog input, .nutrition-dialog select,
.supplement-dialog input, .supplement-dialog select,
.progress-checkin-dialog input, .progress-checkin-dialog select {
  color: var(--dv-ink); background: var(--dv-tint); border: 0;
}
.nutrition-dialog input:focus, .nutrition-dialog select:focus,
.supplement-dialog input:focus, .supplement-dialog select:focus,
.progress-checkin-dialog input:focus, .progress-checkin-dialog select:focus { box-shadow: 0 0 0 2px var(--dv-action); }
.progress-checkin-dialog label small { color: var(--dv-ink2); }
.supplement-name-toggle { color: var(--dv-ink2); }
.supplement-name-options { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow-lg); }
.supplement-name-options button { color: var(--dv-ink); }
.supplement-name-options button:hover, .supplement-name-options button:focus-visible { background: var(--dv-tint); }
.supplement-name-empty { color: var(--dv-ink2); }
.nutrition-dialog footer, .supplement-dialog footer,
.progress-checkin-dialog footer, .progress-photo-dialog footer { border-top-color: var(--dv-outline); }
.nutrition-confirm > span, .supplement-confirm > span, .history-confirm > span { color: #a13f2c; background: rgba(211, 115, 93, .1); }
.nutrition-confirm p, .supplement-confirm p, .history-confirm p { color: var(--dv-ink2); }
.nutrition-confirm [data-delete-confirm], .supplement-confirm [data-delete-confirm],
.history-confirm [data-history-confirm-delete] { color: #fff; background: #a13f2c; border-color: transparent; }
.history-program-chip { color: var(--dv-action); background: var(--dv-tint); }
.history-detail-stats div { border: 0; background: var(--dv-tint); }
.history-detail-stats dt { color: var(--dv-ink2); }
.history-detail-stats dd { color: var(--dv-ink); }
.history-detail-heading { color: var(--dv-ink); }
.history-detail-heading small { color: var(--dv-ink2); }
.history-exercise { border: 0; background: var(--dv-tint); }
.history-exercise > div:first-child span { color: var(--dv-ink2); }
.history-set-list span { color: var(--dv-ink2); background: var(--dv-paper); }
.history-dialog footer { border-top-color: var(--dv-outline); }
.history-dialog footer p { color: var(--dv-ink2); }
.history-delete { color: #a13f2c; background: rgba(211, 115, 93, .08); border-color: transparent; }

/* ── History (list page) ─────────────────────────────────────────── */
.history-loading > span { border-color: var(--dv-outline); border-top-color: var(--dv-accent); }
.history-loading small { color: var(--dv-ink2); }
.history-error p { color: var(--dv-ink2); }
.history-metrics article { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.history-metrics span { color: var(--dv-ink2); }
.history-metrics strong { color: var(--dv-ink); }
.history-metrics small { color: var(--dv-action); }
.history-panel { background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.history-toolbar { border-bottom-color: var(--dv-outline); }
.history-toolbar label { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
.history-toolbar input, .history-toolbar select { color: var(--dv-ink); }
.history-toolbar select { background: var(--dv-tint); border: 0; }
.history-row { border-bottom-color: var(--dv-outline); }
.history-row:hover { color: var(--dv-ink); background: var(--dv-tint); }
.history-row time strong { color: var(--dv-ink); }
.history-row time small, .history-row-copy small { color: var(--dv-ink2); }
.history-row-copy strong { color: var(--dv-ink); }
.history-row-stat { color: var(--dv-ink); }
.history-row-stat small { color: var(--dv-ink2); }
.history-row-arrow { color: var(--dv-action); }
.history-empty p { color: var(--dv-ink2); }

/* ── Achievements ─────────────────────────────────────────────────── */
.ach-dashboard-link { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow); }
.ach-dashboard-link:hover { color: #fff; background: var(--dv-action); }
.ach-hero h1 { color: var(--dv-ink); font-style: italic; font-weight: 800; }
.ach-hero > div:first-child > p:last-child { color: var(--dv-ink2); }
.ach-overview { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.ach-overview-ring { background: conic-gradient(var(--dv-accent) calc(var(--progress) * 1%), var(--dv-tint) 0); }
.ach-overview-ring::before { background: var(--dv-paper); }
.ach-overview-ring span { color: var(--dv-ink2); }
.ach-overview > div:last-child strong { color: var(--dv-ink); }
.ach-overview > div:last-child span { color: var(--dv-ink2); }
.ach-stats article { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.ach-stats span { color: var(--dv-ink2); }
.ach-stats small { color: var(--dv-action); }
.ach-runtime-state, .ach-runtime-error { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.ach-runtime-state > span { border-color: var(--dv-outline); border-top-color: var(--dv-accent); }
.ach-runtime-state small { color: var(--dv-ink2); }
.ach-runtime-error p { color: var(--dv-ink2); }
.ach-runtime-error button { color: #fff; background: var(--dv-accent); }
.ach-toolbar { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); backdrop-filter: none; }
.ach-tabs button { color: var(--dv-ink2); background: transparent; }
.ach-tabs button span { color: var(--dv-outline); }
.ach-tabs button.is-active { color: #fff; background: var(--dv-accent); }
.ach-tabs button.is-active span { color: rgba(255, 255, 255, .75); }
.ach-search { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
.ach-search input { color: var(--dv-ink); }
.ach-search input::placeholder { color: var(--dv-ink2); }
.ach-section-head h2 { color: var(--dv-ink); font-style: italic; font-weight: 800; }
.ach-section-head > span { color: var(--dv-ink2); }
.ach-card { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.ach-card:hover { color: var(--dv-ink); transform: translateY(-2px); background: var(--dv-paper); box-shadow: var(--dv-shadow-lg); }
.ach-card[data-status="unlocked"] { box-shadow: var(--dv-shadow); }
.ach-badge { color: #fff; border: 0; box-shadow: none; overflow: hidden; }
.ach-badge img, .dash-achievement-badge img, .achievement-unlock-visual img { display: block; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(20, 16, 50, .35)); }
.ach-badge img, .dash-achievement-badge img { width: 62%; height: 62%; }
.ach-card.is-locked .ach-badge img { filter: grayscale(1) brightness(1.15); opacity: .75; }
.ach-card[data-status="in-progress"] .ach-badge img { filter: saturate(.18) brightness(1.06) drop-shadow(0 3px 5px rgba(20, 16, 50, .35)); }
.ach-badge--common, .ach-badge--rare, .ach-badge--epic, .ach-badge--legendary { background: var(--dv-accent); }
.ach-card-copy strong { color: var(--dv-ink); }
.ach-card-copy small { color: var(--dv-ink2); }
.ach-card-state { color: var(--dv-action); background: var(--dv-tint); }
.ach-card > i { background: var(--dv-tint); }
.ach-card:not(.is-locked) > i::after {
  background-color:#8477b6;
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.32) 0,rgba(255,255,255,.32) 8px,rgba(255,255,255,0) 8px,rgba(255,255,255,0) 16px);
  background-size:32px 32px;
  animation:achievementProgressShine 1.2s linear infinite;
}
.ach-card.is-locked .ach-card-state { color: var(--dv-ink2); background: var(--dv-tint); }
.ach-card.is-locked > i::after { background: var(--dv-outline); }
.achievement-modal { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow-lg); }
.achievement-modal::backdrop { background: rgba(31, 58, 95, .45); }
.achievement-modal-close { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
/* Achievement scene: the trophy floats over a pedestal that fades into the dialog. */
.achievement-modal-visual {
  --ped-w: 780px;
  --ped-h: calc(var(--ped-w) * .1994);
  --plateau: calc(var(--ped-h) * .7);
  min-height: 300px;
  display: block;
  border-bottom: 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 62%, var(--dv-paper) 100%),
    radial-gradient(ellipse 60% 74% at 50% 50%, #d3e3fa 0%, #e4eefb 40%, rgba(228, 238, 251, .5) 64%, var(--dv-paper) 88%);
}
.achievement-modal-visual::before, .achievement-modal-visual::after { content: none; }
.achievement-modal-tags { position: absolute; top: 18px; left: 20px; z-index: 1; display: flex; align-items: center; gap: 6px; }
.achievement-modal-tags > i { position: static; padding: 4px 9px; border: 0; border-radius: 999px; color: var(--dv-ink); background: var(--dv-paper); box-shadow: var(--dv-shadow); font-size: .58rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.achievement-lock { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--dv-ink); background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.achievement-lock[hidden] { display: none; }
.achievement-lock svg { width: 13px; height: 13px; }
.achievement-meta { grid-template-columns: 1fr 1fr; }
.ach-stats strong em { color: var(--dv-ink2); font-size: .62em; font-style: normal; font-weight: 700; }
.achievement-scene { position: absolute; inset: 0; overflow: hidden; }
.achievement-scene__pedestal {
  position: absolute; bottom: 0; left: 50%;
  width: var(--ped-w); max-width: none; height: var(--ped-h);
  transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 76% at 50% 30%, #000 42%, rgba(0,0,0,.6) 62%, rgba(0,0,0,.18) 80%, transparent 97%);
  mask-image: radial-gradient(ellipse 50% 76% at 50% 30%, #000 42%, rgba(0,0,0,.6) 62%, rgba(0,0,0,.18) 80%, transparent 97%);
}
.achievement-scene__rays {
  position: absolute; left: 50%; bottom: calc(var(--plateau) + 40px);
  width: 420px; height: 420px; margin: 0 0 -210px -210px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .75) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.4) 34%, transparent 64%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.4) 34%, transparent 64%);
  animation: achievementRays 36s linear infinite;
}
.achievement-scene__glow {
  position: absolute; left: 50%; bottom: calc(var(--plateau) + 8px);
  width: 250px; height: 190px; margin-left: -125px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 206, 110, .62), rgba(255, 180, 80, .22) 52%, rgba(255, 180, 80, 0) 100%);
  animation: achievementGlow 3.4s ease-in-out infinite;
}
.achievement-scene__shadow {
  position: absolute; left: 50%; bottom: calc(var(--plateau) - 7px);
  width: 104px; height: 16px; margin-left: -52px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31, 58, 95, .34), rgba(31, 58, 95, 0));
  animation: achievementShadow 3.4s ease-in-out infinite;
}
.achievement-scene__icon {
  position: absolute; left: 50%; bottom: calc(var(--plateau) + 8px);
  width: 128px; height: 128px; margin-left: -64px;
  filter: drop-shadow(0 0 14px rgba(255, 184, 72, .6)) drop-shadow(0 0 34px rgba(255, 214, 130, .45));
  animation: achievementFloat 3.4s ease-in-out infinite;
}
.achievement-scene__particles { position: absolute; left: 50%; bottom: calc(var(--plateau) - 10px); width: 380px; height: 240px; margin-left: -190px; }
.achievement-scene__particles i {
  position: absolute; left: var(--x); bottom: var(--y);
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: #fff3c4;
  box-shadow: 0 0 6px 2px rgba(255, 196, 84, .9), 0 0 14px 4px rgba(255, 214, 130, .45);
  opacity: 0;
  animation: achievementParticle var(--duration) ease-in-out var(--delay) infinite;
}
.achievement-scene__particles i.is-cool { background: #fff; box-shadow: 0 0 6px 2px rgba(120, 170, 255, .85), 0 0 14px 4px rgba(160, 200, 255, .5); }
/* Only unlocked achievements get the warm rays, glow and golden particles. */
.achievement-modal-visual[data-status="in-progress"] .achievement-scene__icon { filter: saturate(.18) brightness(1.04) drop-shadow(0 6px 10px rgba(31, 58, 95, .18)); }
.achievement-modal-visual[data-status="locked"] .achievement-scene__icon { opacity: .6; filter: grayscale(1) brightness(1.05) drop-shadow(0 6px 10px rgba(31, 58, 95, .18)); }
.achievement-modal-visual[data-status="in-progress"] .achievement-scene__glow,
.achievement-modal-visual[data-status="in-progress"] .achievement-scene__rays,
.achievement-modal-visual[data-status="locked"] .achievement-scene__glow,
.achievement-modal-visual[data-status="locked"] .achievement-scene__rays { display: none; }
.achievement-modal-visual[data-status="in-progress"] .achievement-scene__particles i,
.achievement-modal-visual[data-status="locked"] .achievement-scene__particles i { background: #fff; box-shadow: 0 0 5px 1px rgba(143, 176, 223, .8); }
@keyframes achievementFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes achievementShadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.78); opacity: .6; } }
@keyframes achievementGlow { 0%, 100% { opacity: .78; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes achievementRays { to { transform: rotate(360deg); } }
@keyframes achievementParticle {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  18% { opacity: 1; }
  70% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--drift), calc(var(--rise) * -1)) scale(1.1); }
}
@media (max-width: 560px) {
  .achievement-modal-visual { --ped-w: 540px; min-height: 270px; }
  .achievement-scene__icon { width: 108px; height: 108px; margin-left: -54px; }
  .achievement-scene__particles { width: 280px; margin-left: -140px; }
}
@media (prefers-reduced-motion: reduce) {
  .achievement-scene__icon, .achievement-scene__shadow, .achievement-scene__glow, .achievement-scene__rays { animation: none; }
  .achievement-scene__particles i { animation: none; opacity: .7; }
}
.achievement-modal-heading h2 { color: var(--dv-ink); font-style: italic; font-weight: 800; }
.achievement-modal-heading > span { color: var(--dv-action); background: var(--dv-tint); }
.achievement-modal-description { color: var(--dv-ink2); }
.achievement-requirement { border-left-color: var(--dv-accent); background: var(--dv-tint); }
.achievement-requirement span { color: var(--dv-ink2); }
.achievement-requirement strong { color: var(--dv-ink); }
.achievement-progress-copy { color: var(--dv-ink2); }
.achievement-progress-copy strong { color: var(--dv-ink); }
.achievement-progress { background: var(--dv-tint); }
.achievement-progress span {
  background-color:#8477b6;
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.32) 0,rgba(255,255,255,.32) 8px,rgba(255,255,255,0) 8px,rgba(255,255,255,0) 16px);
  background-size:32px 32px;
  animation:achievementProgressShine 1.2s linear infinite;
}
.achievement-meta div { border: 0; background: var(--dv-tint); }
.achievement-meta dt { color: var(--dv-ink2); }
.achievement-meta dd { color: var(--dv-ink); }
/* ── Settings ─────────────────────────────────────────────────────── */
.settings-nav { border: 0; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.settings-nav a { color: var(--dv-ink2); }
.settings-nav a:hover, .settings-nav a.is-active { color: var(--dv-ink); background: var(--dv-tint); }
.settings-nav a.is-active { color: #fff; background: var(--dv-accent); }
.settings-profile-head { border-bottom-color: var(--dv-outline); }
.settings-profile-head small { color: var(--dv-ink2); }
.settings-profile-head button, .settings-security button { color: var(--dv-action); background: var(--dv-tint); border: 0; }
.settings-form-grid label > span { color: var(--dv-ink2); }
.settings-form-grid input, .settings-form-grid select { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.settings-form-grid input:focus, .settings-form-grid select:focus { box-shadow: 0 0 0 2px var(--dv-action); }
.settings-form-grid input[readonly] { color: var(--dv-ink2); }
.settings-row { border-top-color: var(--dv-outline); }
.settings-row small { color: var(--dv-ink2); }
.settings-segment { border: 0; background: var(--dv-tint); }
.settings-segment button { color: var(--dv-ink2); }
.settings-segment button.is-selected { color: #fff; background: var(--dv-accent); }
.settings-toggles > label, .settings-security > div { border-top-color: var(--dv-outline); }
.settings-toggles strong, .settings-security strong { color: var(--dv-ink); }
.settings-toggles small, .settings-security small { color: var(--dv-ink2); }
.settings-toggles input[type=checkbox], .settings-security input[type=checkbox] { background: var(--dv-outline); }
.settings-toggles input[type=checkbox]::after, .settings-security input[type=checkbox]::after { background: var(--dv-paper); }
.settings-toggles input:checked, .settings-security input:checked { background: var(--dv-accent); }
.settings-toggles input:checked::after, .settings-security input:checked::after { background: #fff; }
.settings-security button.is-danger { color: #a13f2c; background: rgba(211, 115, 93, .08); border-color: transparent; }
.settings-section-copy { color: var(--dv-ink2); }
.settings-training-days span { color: var(--dv-ink2); background: var(--dv-tint); border: 0; }
.settings-training-days b { color: var(--dv-ink); }
.settings-training-days input:checked + span { color: #fff; background: var(--dv-accent); border: 0; }
.settings-training-days input:checked + span b { color: #fff; }
.settings-training-days input:focus-visible + span { outline: 2px solid var(--dv-ink); }
.settings-profile-head .dash-avatar-large { color: #fff; background: var(--dv-accent); }
.settings-delete-dialog { color: var(--dv-ink); background: var(--dv-paper); border: 0; box-shadow: var(--dv-shadow-lg); }
.settings-delete-dialog::backdrop { background: rgba(31, 58, 95, .45); }
.settings-dialog-close { color: var(--dv-ink2); background: var(--dv-tint); }
.settings-delete-dialog > span { color: #a13f2c; background: rgba(211, 115, 93, .1); }
.settings-delete-dialog > p { color: var(--dv-ink2); }
.settings-delete-dialog label { color: var(--dv-ink2); }
.settings-delete-dialog label b { color: #a13f2c; }
.settings-delete-dialog input { color: var(--dv-ink); background: var(--dv-tint); border: 0; }
.settings-delete-dialog input:focus { box-shadow: 0 0 0 2px #a13f2c; }
.settings-delete-status { color: #a13f2c; border: 0; background: rgba(211, 115, 93, .1); }
.settings-delete-status[data-tone="progress"] { color: var(--dv-ink); background: var(--dv-tint); }
.settings-delete-dialog form .is-danger { color: #fff; background: #a13f2c; border-color: transparent; }

@media (max-width: 820px) {
  /* iOS zooms the viewport when a focused form control is rendered below
     16px. Keep every app input at the native mobile threshold instead of
     disabling user zoom in the viewport meta tag. */
  .dash-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  .dash-body select,
  .dash-body textarea { font-size:16px !important; line-height:1.25; touch-action:manipulation; }
  .nutrition-hero { min-height: 330px; margin-top: -30px; padding-top: 72px; }
  .nutrition-hero::before { background-position: 54% center; }
}

@media (max-width: 560px) {
  .nutrition-hero { min-height: 300px; margin: -24px -14px 24px; padding: 56px 14px 42px; overflow:hidden; }
  .nutrition-hero::before { inset:0 auto 0 50%; width:100vw; transform:translateX(-50%); background-color:#c8dbf7; background-image:url('/images/nutrition-dashboard-2-mobile.webp'); background-position:44% 26%; background-size:auto 46%; opacity:.68; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.12) 60%,transparent 72%); mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.12) 60%,transparent 72%); }
  .nutrition-hero::after { position:absolute; right:auto; bottom:0; left:50%; z-index:1; width:100vw; height:70%; transform:translateX(-50%); content:""; pointer-events:none; background:linear-gradient(to bottom,rgba(200,219,247,0) 0%,rgba(200,219,247,.86) 42%,#c8dbf7 72%); }
  .nutrition-hero > * { z-index:2; }
  .nutrition-content > [data-nutrition-content] { position:relative; z-index:4; margin-top:-145px; }
  .nutrition-content > [data-nutrition-loading], .nutrition-content > [data-nutrition-error] { position:relative; z-index:4; }
  .nutrition-dialog, .supplement-dialog, .history-dialog,
  .support-dialog, .settings-delete-dialog, .training-dialog {
    width:calc(100% - 16px);
    max-width:none;
    max-height:calc(100dvh - 16px);
    margin:auto;
    overscroll-behavior:contain;
    scroll-padding-block:76px;
    -webkit-overflow-scrolling:touch;
  }
  .nutrition-dialog, .supplement-dialog { padding:20px 15px max(15px,env(safe-area-inset-bottom)); }
  .nutrition-dialog footer, .supplement-dialog footer {
    position:sticky;
    bottom:-15px;
    z-index:5;
    margin:4px -15px 0;
    padding:14px 15px max(15px,env(safe-area-inset-bottom));
    background:var(--dv-paper);
  }
  .nutrition-dialog footer button, .supplement-dialog footer button { min-width:0; min-height:46px; flex:1 1 0; }
  .supplement-picker-grid { overscroll-behavior-inline:contain; scroll-snap-type:x proximity; touch-action:pan-x; -webkit-overflow-scrolling:touch; }
  .supplement-picker-grid button { scroll-snap-align:start; }
  .supplement-card { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .supplement-icon { width: 52px; height: 52px; }
}

@media (max-width: 360px) {
  .nutrition-dialog footer, .supplement-dialog footer { flex-direction:column-reverse; }
  .nutrition-dialog footer button, .supplement-dialog footer button { width:100%; flex-basis:auto; }
}

/* Drop sets: reduced-weight rounds sit as indented sub-rows under their main set. */
.set-row.set-drop-row { min-height: 46px; margin-top: -4px; padding-top: 2px; padding-bottom: 2px; }
.set-drop-row .set-input { height: 36px; font-size: .86rem; }
.set-drop-label { display: grid; place-items: center; width: 32px; color: #e5484d; font-size: 1rem; font-weight: 800; }
.set-drop-row .set-drop-name { color: #e5484d; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.set-row.is-complete .set-drop-label, .set-row.is-complete .set-drop-name { color: #fff; }
.set-drop-actions { padding: 0 8px 6px 64px; }
.set-add-drop { min-height: 30px; padding: 0 12px; border: 1.5px dashed rgba(229, 72, 77, .55); border-radius: 999px; color: #c2383d; background: transparent; font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; }
.set-add-drop:hover { color: #fff; border-style: solid; background: #e5484d; }
/* Rest-pause sets: mini-sets after a short pause sit under the main set like drops, each with a 10 s pause timer. */
.set-pause-row .set-drop-label, .set-pause-row .set-drop-name { color: #0c8599; }
.set-row.is-complete.set-pause-row .set-drop-label, .set-row.is-complete.set-pause-row .set-drop-name { color: #fff; }
.set-pause-timer { display: grid; place-items: center; width: 36px; height: 32px; padding: 0; border: 1.5px solid rgba(12, 133, 153, .5); border-radius: 9px; color: #0a6f80; background: #fff; font: inherit; font-size: .64rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.set-pause-timer:hover, .set-pause-timer:focus-visible { color: #fff; border-color: #0c8599; background: #0c8599; }
.set-row.is-complete .set-pause-timer { color: #fff; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); }
.set-add-pause { border-color: rgba(12, 133, 153, .55); color: #0a6f80; }
.set-add-pause:hover { color: #fff; border-style: solid; background: #0c8599; }
/* Level ladder (program-only exercises): the first set's level with a stepper, then a level picker under each set. */
.exercise-level { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: var(--dv-tint); }
.exercise-level-copy { display: grid; gap: 2px; min-width: 0; }
.exercise-level-copy span { color: var(--dv-ink2); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.exercise-level-copy strong { color: var(--dv-ink); font-size: .92rem; font-weight: 800; }
.exercise-level-copy small { color: var(--dv-ink2); font-size: .72rem; }
.exercise-level-stepper { display: flex; align-items: center; gap: 6px; }
.exercise-level-stepper button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 11px; color: #fff; background: var(--dv-action); font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.exercise-level-stepper button:hover { background: var(--dv-navy); }
.exercise-level-stepper button:disabled { color: var(--dv-ink2); background: #fff; opacity: .6; cursor: not-allowed; }
.exercise-level-stepper b { min-width: 34px; color: var(--dv-ink); font-size: .78rem; text-align: center; font-variant-numeric: tabular-nums; }
.exercise-level-hint { grid-column: 1 / -1; margin: 4px 0 0; color: #2f7a4f; font-size: .76rem; font-weight: 600; }
.exercise-level-hint button { margin-left: 2px; padding: 0; border: 0; color: inherit; background: none; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.set-row.set-level-row { display: flex; align-items: center; gap: 8px; min-height: 42px; margin-top: -4px; padding-top: 0; padding-bottom: 5px; }
.set-level-row .set-drop-label { flex: none; color: var(--dv-accent); }
.set-level-pick { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; max-width: 460px; }
.set-level-pick img { flex: none; width: 46px; height: 34px; padding: 2px; border-radius: 8px; background: #fff; object-fit: contain; }
.set-level-pick select { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 30px 0 10px; border: 0; border-radius: 9px; color: var(--dv-ink); background: var(--dv-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f3a5f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center / 11px; font: inherit; font-size: .8rem; font-weight: 700; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; cursor: pointer; }
.set-level-pick select:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
.set-row.is-complete.set-level-row .set-drop-label { color: #fff; }
.set-row.is-complete .set-level-pick select { color: #fff; background-color: rgba(255, 255, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Program alternatives: one tap from the exercise card. */
.workout-exercise-name > .exercise-swap-chip { display: inline-flex; align-items: center; gap: 4px; width: max-content; margin-top: 6px; padding: 4px 11px; border: 1.5px solid var(--dv-outline); border-radius: 999px; color: var(--dv-action); background: #fff; font: inherit; font-size: .72rem; font-weight: 800; text-transform: none; cursor: pointer; }
.workout-exercise-name > .exercise-swap-chip:hover, .workout-exercise-name > .exercise-swap-chip:focus-visible { color: #fff; border-color: var(--dv-action); background: var(--dv-action); }
/* Switch exercise dialog in the light Hub theme. */
.exercise-swap-body section > span { color: var(--dv-ink2); }
.exercise-swap-option { color: var(--dv-ink); background: #fff; border: 1.5px solid var(--dv-tint); cursor: pointer; }
.exercise-swap-option:hover, .exercise-swap-option:focus-visible { border-color: var(--dv-accent); background: var(--dv-tint); }
.exercise-swap-option > span { background: var(--dv-tint); }
.exercise-swap-option strong { color: var(--dv-ink); font-size: .8rem; text-transform: capitalize; }
.exercise-swap-option b { color: var(--dv-accent); }
.exercise-swap-footer { border-top-color: var(--dv-outline); }
/* Active program overview: every session with its exercises, sets, reps, rest and tempo. */
.training-plan-overview { width: 100%; min-height: 40px; margin: 0 0 10px; border: 0; cursor: pointer; }
.program-overview-dialog { width: min(880px, calc(100vw - 28px)); }
.program-overview-dialog .training-dialog-head p { margin: 4px 0 0; color: var(--dv-ink2); font-size: .8rem; }
.program-overview-body { display: grid; gap: 16px; max-height: min(640px, calc(100dvh - 170px)); padding: 18px 20px 22px; overflow: auto; overscroll-behavior: contain; }
.program-overview-session { padding: 14px; border: 1.5px solid var(--dv-tint); border-radius: 18px; background: #fff; }
.program-overview-session.is-next { border-color: var(--dv-accent); box-shadow: 0 0 0 1px var(--dv-accent); }
.program-overview-session > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.program-overview-session > header span { color: var(--dv-ink2); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.program-overview-session.is-next > header span { color: var(--dv-accent); }
.program-overview-session h3 { margin: 2px 0 0; color: var(--dv-ink); font-size: 1.15rem; font-style: italic; font-weight: 800; }
.program-overview-session > header p { margin: 2px 0 0; color: var(--dv-ink2); font-size: .78rem; }
.program-overview-session > header b { flex: none; padding: 5px 10px; border-radius: 999px; color: var(--dv-ink); background: var(--dv-tint); font-size: .72rem; white-space: nowrap; }
.program-overview-session ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.program-overview-exercise { display: grid; grid-template-columns: 48px minmax(0, 1fr) 316px; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 13px; background: var(--dv-tint); }
.program-overview-thumb { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 10px; background: #fff; }
.program-overview-thumb img { width: 100%; height: 100%; object-fit: contain; }
.program-overview-main { display: grid; gap: 4px; min-width: 0; }
.program-overview-main strong { color: var(--dv-ink); font-size: .9rem; text-transform: capitalize; }
.program-overview-main p { margin: 0; color: var(--dv-ink2); font-size: .74rem; line-height: 1.45; }
.program-overview-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.program-overview-tag { padding: 2px 8px; border-radius: 999px; color: var(--dv-action); background: #fff; font-size: .66rem; font-weight: 800; }
.program-overview-exercise .superset-badge { margin: 0; }
.program-overview-exercise dl { display: grid; grid-template-columns: 38px minmax(0, 1fr) 44px 46px; gap: 10px; margin: 0; }
.program-overview-exercise dl div { display: grid; gap: 1px; }
.program-overview-exercise dt { color: var(--dv-ink2); font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.program-overview-exercise dd { margin: 0; color: var(--dv-ink); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .program-overview-body { padding: 14px 12px 18px; }
  .program-overview-session { padding: 11px; }
  .program-overview-session > header { flex-direction: column; gap: 6px; }
  .program-overview-exercise { grid-template-columns: 44px minmax(0, 1fr); }
  .program-overview-thumb { width: 44px; height: 44px; }
  .program-overview-exercise dl { grid-column: 1 / -1; grid-template-columns: 40px minmax(0, 1fr) 46px 48px; padding-top: 6px; border-top: 1px solid rgba(31, 58, 95, .1); }
}
/* How-to of a program-only exercise. */
.exercise-guide { display: grid; gap: 12px; color: var(--dv-ink); font-size: .84rem; line-height: 1.55; }
.exercise-guide[hidden] { display: none; }
.exercise-guide h3 { margin: 6px 0 0; color: var(--dv-ink); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.exercise-guide ol, .exercise-guide ul { display: grid; gap: 7px; margin: 0; padding-left: 20px; }
.exercise-guide li::marker { color: var(--dv-accent); font-weight: 800; }
.exercise-guide-purpose { margin: 0; color: var(--dv-ink2); }
.exercise-guide-rule { margin: -4px 0 0; color: var(--dv-ink2); font-size: .78rem; }
.exercise-guide-level { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px; border: 1.5px solid var(--dv-tint); border-radius: 14px; background: #fff; }
.exercise-guide-level img { width: 84px; height: 64px; object-fit: contain; }
.exercise-guide-level span { color: var(--dv-ink2); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.exercise-guide-level strong { display: block; color: var(--dv-ink); font-size: .9rem; }
.exercise-guide-level p { margin: 3px 0 0; color: var(--dv-ink2); font-size: .8rem; }
.exercise-guide-level.is-current { border-color: var(--dv-accent); box-shadow: 0 0 0 1px var(--dv-accent); }
.exercise-guide-level.is-current span { color: var(--dv-accent); }
.exercise-guide-current .exercise-guide-level { background: var(--dv-tint); }
.exercise-guide-levels { padding-left: 0 !important; list-style: none; }
@media (max-width: 560px) {
  .exercise-level { grid-template-columns: minmax(0, 1fr) auto; padding: 9px 10px; }
  .exercise-level-copy strong { font-size: .84rem; }
  .set-level-pick img { width: 40px; height: 30px; }
  .exercise-guide-level { grid-template-columns: 70px minmax(0, 1fr); }
  .exercise-guide-level img { width: 70px; height: 54px; }
}

/* Mobile: the Previous column is too wide, so the last performance shows under weight and reps. */
@media (max-width: 560px) {
  .set-row:not(.set-head) .set-previous { display: block; grid-column: 2 / 4; grid-row: 2; margin: -3px 0 2px; overflow: hidden; color: var(--dv-ink2); font-size: .68rem; font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .set-row:not(.set-head) .set-previous::before { content: 'Last: '; font-weight: 800; }
  /* On a validated (navy) row the last performance turns soft white so it stays readable. */
  .set-row.is-complete:not(.set-head) .set-previous { color: rgba(255, 255, 255, .62); }
  .set-row:not(.set-head) .set-previous.is-empty, .set-row.set-drop-row .set-previous { display: none; }
  .set-drop-actions { padding-left: 40px; }
}

/* Set types: one colored badge per set in the builder and the live session. */
.set-type-badge { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; color: var(--dv-ink); background: #fff; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.set-row .set-type-badge { width: 32px; height: 32px; }
.set-type-badge:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
.set-row .set-type-badge.set-type--normal { color: var(--dv-ink); background: var(--dv-tint); }
.set-row.is-complete .set-type-badge.set-type--normal { background: #fff; }
.set-type-badge.set-type--warmup, .set-row .set-type-badge.set-type--warmup { color: #fff; background: #f08c2e; }
.set-type-badge.set-type--drop, .set-row .set-type-badge.set-type--drop { color: #fff; background: #e5484d; }
.set-type-badge.set-type--rest-pause, .set-row .set-type-badge.set-type--rest-pause { color: #fff; background: #0c8599; }
.set-type-badge.set-type--cluster, .set-row .set-type-badge.set-type--cluster { color: #fff; background: #8e4ec6; }
.set-type-badge.set-type--amrap, .set-row .set-type-badge.set-type--amrap { color: #fff; background: #2f9e6b; }
.set-type-badge.set-type--emom, .set-row .set-type-badge.set-type--emom { color: #fff; background: #3e63dd; }
.set-type-badge.set-type--failure, .set-row .set-type-badge.set-type--failure { color: #fff; background: #b42318; }
.set-type-option .set-type-badge.set-type--normal { color: #fff; background: #4b5563; }

/* Live personal records: medals under the validated set that beats the training history. */
.set-records { display: flex; flex-wrap: wrap; grid-column: 2 / -1; gap: 4px 14px; margin: -2px 0 2px; font-size: .74rem; font-weight: 800; }
.set-record { display: inline-flex; align-items: center; gap: 4px; color: #fff; }
.set-record-medal { flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.set-records.is-new .set-record { animation: setRecordPop .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.set-records.is-new .set-record + .set-record { animation-delay: .12s; }
@keyframes setRecordPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .set-row:not(.set-head) .set-records { grid-column: 2 / 4; grid-row: 3; justify-content: center; margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .set-records.is-new .set-record { animation: none; } }

/* Builder: rest per exercise, then one row per set with its type and rep target. */
.builder-exercise { grid-template-columns: 48px minmax(150px, 1fr) 130px 34px; }
.builder-sets { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 4px; }
.builder-set-head, .builder-set-row { display: grid; grid-template-columns: 40px minmax(0, 220px) 30px; align-items: center; gap: 8px; }
.builder-set-head span { color: var(--dv-ink2); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.builder-set-row input { width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; outline: 0; color: var(--dv-ink); background: #fff; font: inherit; font-size: .86rem; font-weight: 700; }
.builder-set-row input:focus { box-shadow: 0 0 0 2px var(--dv-action); }
.builder-set-remove { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; color: #a13f2c; background: rgba(211, 115, 93, .1); font-size: 1rem; cursor: pointer; }
.builder-set-remove[hidden] { display: block; visibility: hidden; }
.builder-add-set { justify-self: start; min-height: 34px; margin-top: 2px; padding: 0 14px; border: 1.5px dashed var(--dv-action); border-radius: 999px; color: var(--dv-action); background: transparent; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.builder-add-set:hover { color: #fff; border-style: solid; background: var(--dv-action); }
@media (max-width: 560px) {
  .builder-exercise { grid-template-columns: 44px minmax(0, 1fr) 34px; }
  .builder-exercise > .builder-exercise-name { grid-column: 2; }
  .builder-exercise > .builder-remove { grid-column: 3; }
  .builder-exercise > label:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; }
  .builder-sets { grid-row: 3; }
  .builder-set-head, .builder-set-row { grid-template-columns: 40px minmax(0, 1fr) 30px; }
}

/* Plate calculator: the floating shortcut over a barbell weight, then one side of the loaded bar. */
.plate-calc-chip {
  position: absolute; z-index: 60; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px;
  border: 1.5px solid var(--dv-outline); border-radius: 999px; color: var(--dv-navy); background: var(--dv-paper);
  box-shadow: 0 6px 18px rgba(31, 58, 95, .18); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer;
  animation: plateChipIn .16s ease-out;
}
.plate-calc-chip[hidden] { display: none; }
.plate-calc-chip:hover { border-color: var(--dv-action); }
.plate-calc-chip:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
.plate-calc-chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@keyframes plateChipIn { from { opacity: 0; transform: translateY(4px); } }
.plate-calc-dialog { width: min(540px, calc(100vw - 28px)); }
.plate-calc-body { display: grid; gap: 18px; max-height: min(620px, calc(100dvh - 120px)); padding: 18px 20px 22px; overflow: auto; }
.plate-viz { display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 14px 8px; border-radius: 16px; background: var(--dv-tint); overflow: hidden; }
.plate-viz__sleeve { display: grid; place-items: center; flex: 0 1 120px; height: 22px; border-radius: 4px 0 0 4px; color: #fff; background: #8a94a3; font-size: .74rem; font-weight: 800; }
.plate-viz__collar { flex: none; width: 10px; height: 36px; border-radius: 3px; background: #6f7a8a; }
.plate-viz__plate {
  display: grid; place-items: center; flex: none; width: clamp(30px, 8vw, 40px); height: calc(122px * var(--size)); margin-left: 3px;
  border-radius: 6px; color: #fff; background: var(--dv-action); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
  font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.plate-viz__end { flex: none; width: 22px; height: 22px; margin-left: 3px; border-radius: 0 4px 4px 0; background: #8a94a3; }
.plate-calc-summary { margin: 0; color: var(--dv-ink2); font-size: .92rem; line-height: 1.5; text-align: center; }
.plate-calc-summary strong { color: var(--dv-navy); font-weight: 900; }
.plate-calc-section h3 { margin: 0 0 10px; color: var(--dv-navy); font-size: .82rem; font-weight: 800; }
.plate-calc-section h3 span { color: var(--dv-ink2); font-weight: 600; }
.plate-calc-options { display: flex; flex-wrap: wrap; gap: 8px; }
.plate-calc-plate, .plate-calc-bar {
  border: 1.5px solid var(--dv-tint); color: var(--dv-ink); background: var(--dv-paper); font: inherit; font-weight: 800; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.plate-calc-plate { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: .78rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plate-calc-bar { padding: 9px 12px; border-radius: 999px; font-size: .8rem; }
.plate-calc-plate.is-on, .plate-calc-bar.is-on { border-color: var(--dv-action); color: #fff; background: var(--dv-action); }
.plate-calc-plate:focus-visible, .plate-calc-bar:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
.plate-calc-note { margin: 0; color: var(--dv-ink2); font-size: .74rem; line-height: 1.45; }
@media (max-width: 560px) {
  .plate-calc-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .plate-calc-body { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  /* The seven plates stay on one row. */
  .plate-calc-options { gap: 6px; }
  .plate-calc-plate { width: 43px; height: 43px; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) { .plate-calc-chip { animation: none; } }

/* Set type picker. */
.set-type-dialog { width: min(440px, calc(100vw - 28px)); }
.set-type-list { display: grid; gap: 8px; max-height: min(560px, calc(100dvh - 150px)); padding: 16px 18px 20px; overflow: auto; }
.set-type-option { display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1.5px solid var(--dv-tint); border-radius: 12px; color: var(--dv-ink); background: #fff; font: inherit; text-align: left; cursor: pointer; }
.set-type-option:hover { border-color: var(--dv-outline, #a9c4ea); }
.set-type-option.is-selected { border-color: var(--dv-accent); background: rgba(91, 74, 158, .06); }
.set-type-option strong { display: block; font-size: .9rem; }
.set-type-option small { display: block; margin-top: 2px; color: var(--dv-ink2); font-size: .74rem; }
.set-type-check { color: var(--dv-accent); font-size: .95rem; visibility: hidden; }
.set-type-option.is-selected .set-type-check { visibility: visible; }
@media (max-width: 560px) {
  .set-type-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .set-type-list { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* ── Dashboard recap: this week, today, progress ─────────────────── */
.dash-grid-week { position: relative; z-index: 1; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); }
.dash-grid-today { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.dash-grid-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-card-head h2 { overflow-wrap: anywhere; }

.dash-week-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 22px; margin-top: 18px; }
.dash-week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.dash-week-days li { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 10px 3px; border-radius: 12px; background: var(--dv-tint); text-align: center; }
.dash-week-days b { color: var(--dv-ink2); font-size: .6rem; font-weight: 700; letter-spacing: .08em; }
.dash-week-days i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--dv-ink2); background: var(--dv-paper); font-size: .68rem; font-style: normal; font-weight: 700; }
.dash-week-days small { max-width: 100%; overflow: hidden; color: var(--dv-ink2); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.dash-week-days .is-done i { color: #fff; background: var(--dv-accent); }
.dash-week-days .is-done small { color: var(--dv-ink); font-weight: 700; }
.dash-week-days .is-today { background: var(--dv-paper); box-shadow: inset 0 0 0 1.5px var(--dv-navy); }
.dash-week-days .is-today i { color: #fff; background: var(--dv-navy); }
.dash-week-days .is-planned:not(.is-today) i { box-shadow: inset 0 0 0 1.5px var(--dv-outline); }
.dash-week-days .is-rest, .dash-week-days .is-missed { opacity: .62; }
.dash-week-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; color: var(--dv-ink2); font-size: .64rem; }
.dash-week-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--dv-accent); }
.dash-week-legend .is-today::before { background: var(--dv-navy); }
.dash-week-legend .is-planned::before { background: var(--dv-paper); box-shadow: inset 0 0 0 1.5px var(--dv-outline); }
.dash-week-legend .is-rest::before { background: var(--dv-tint); }

.dash-week-side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-streak-card { grid-column: 1 / -1; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--dv-accent), #3f3380); box-shadow: var(--dv-shadow); }
.dash-streak-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .16); }
.dash-streak-icon svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 4px rgba(255, 106, 31, .35)); }
/* The current streak in the top bar: the flame and the number of weeks, left of the notifications. */
.dash-streak-chip { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 13px 0 10px; border-radius: 999px; color: var(--dv-ink); background: var(--dv-paper); box-shadow: var(--dv-shadow); font-size: .95rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.dash-streak-chip[hidden] { display: none; }
.dash-streak-chip svg { width: 20px; height: 20px; }
.dash-streak-card > div > span { font-size: .68rem; font-weight: 700; }
.dash-streak-card strong { display: block; margin-top: 4px; font-size: 1.55rem; line-height: 1; }
.dash-streak-card strong b { font: inherit; }
.dash-streak-card strong span { font-size: .7rem; font-weight: 600; }
.dash-streak-best { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .64rem; font-weight: 700; }
.dash-streak-total { display: flex; flex-direction: column; align-self: stretch; justify-content: center; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .22); }
.dash-streak-total > span { font-size: .68rem; font-weight: 700; }
.dash-streak-total small { margin-top: 8px; color: rgba(255, 255, 255, .72); font-size: .64rem; font-weight: 600; }
@media (max-width: 380px) {
  .dash-streak-card { grid-template-columns: 50px minmax(0, 1fr); }
  .dash-streak-total { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
  .dash-streak-total small { margin-top: 0; }
  .dash-streak-total strong { order: 1; margin: 0 0 0 auto; }
}
.dash-week-stat { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; border-radius: 15px; background: var(--dv-paper); box-shadow: var(--dv-shadow); }
.dash-week-stat > span { color: var(--dv-ink2); font-size: .68rem; }
.dash-week-stat strong { margin-top: 10px; color: var(--dv-ink); font-size: 1.4rem; line-height: 1; }
.dash-week-stat strong b { font: inherit; }
.dash-week-stat strong span { color: var(--dv-ink2); font-size: .7rem; font-weight: 600; }
.dash-week-stat small { margin-top: 8px; color: var(--dv-action); font-size: .63rem; }

.dash-stack-list { display: grid; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.dash-stack-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--dv-tint); }
.dash-stack-list strong { display: block; color: var(--dv-ink); font-size: .78rem; }
.dash-stack-list small { display: block; margin-top: 1px; color: var(--dv-ink2); font-size: .63rem; }
.dash-stack-list em { color: var(--dv-ink2); font-size: .66rem; font-style: normal; font-weight: 700; }
.dash-stack-check { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--dv-outline); border-radius: 8px; color: transparent; background: var(--dv-paper); font-size: .78rem; font-weight: 800; cursor: pointer; }
.dash-stack-check:disabled { cursor: wait; opacity: .6; }
.dash-stack-list li.is-done .dash-stack-check { border-color: var(--dv-accent); color: #fff; background: var(--dv-accent); }
.dash-stack-list li.is-partial .dash-stack-check { border-color: var(--dv-accent); background: linear-gradient(to top, rgba(91, 74, 158, .32) 50%, var(--dv-paper) 50%); }
.dash-stack-list li.is-done strong { color: var(--dv-ink2); }
.dash-stack-alert { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; color: #9a4a12; background: #fbf0e6; font-size: .68rem; font-weight: 700; }
.dash-stack-alert[hidden], .dash-stack-empty[hidden] { display: none; }
.dash-stack-alert a { color: inherit; }
.dash-stack-alert.is-out { color: #b42318; background: #fde8e7; }
.dash-stack-empty { display: grid; justify-items: start; gap: 10px; margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--dv-tint); }
.dash-stack-empty p { margin: 0; color: var(--dv-ink2); font-size: .7rem; }
.dash-stack-card { position: relative; overflow: hidden; }
.dash-stack-card.is-pro-locked > :not(.dash-card-pro-lock) { opacity: .58; filter: grayscale(.08); pointer-events: none; user-select: none; }
.dash-card-pro-lock { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(228,238,251,.62)); backdrop-filter: blur(.7px); -webkit-backdrop-filter: blur(.7px); }
.dash-card-pro-lock[hidden] { display: none; }
.dash-card-pro-lock > span { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--dv-action); font-size: 1rem; box-shadow: 0 8px 18px rgba(79,127,189,.24); }
.dash-card-pro-lock > span .pro-lock-icon { width: 18px; height: 18px; }
.dash-card-pro-lock > div { display: grid; gap: 2px; min-width: 0; }
.dash-card-pro-lock small { color: var(--dv-action); font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.dash-card-pro-lock strong { color: var(--dv-ink); font-size: .82rem; }
.dash-card-pro-lock .dash-ghost-button { flex: 0 0 auto; min-height: 38px; border: 0; color: #fff; background: var(--dv-action); cursor: pointer; }
.dash-card-pro-lock .dash-ghost-button:hover, .dash-card-pro-lock .dash-ghost-button:focus-visible { background: var(--dv-navy); }

.dash-last-meta, .dash-program-chapter, .dash-card-note { margin: 6px 0 0; color: var(--dv-ink2); font-size: .7rem; }
.dash-last-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; }
.dash-last-stats div { min-width: 0; padding: 9px 10px; border-radius: 12px; background: var(--dv-tint); }
.dash-last-stats dt { color: var(--dv-ink2); font-size: .6rem; }
.dash-last-stats dd { margin: 4px 0 0; color: var(--dv-ink); font-size: .95rem; font-weight: 800; }
.dash-last-top { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.dash-last-top li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--dv-tint); font-size: .7rem; }
.dash-last-top li:last-child { border-bottom: 0; }
.dash-last-top span { overflow: hidden; color: var(--dv-ink2); text-overflow: ellipsis; white-space: nowrap; }
.dash-last-top b { flex: 0 0 auto; color: var(--dv-ink); }
.dash-last-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.dash-last-foot [hidden] { display: none; }
.dash-status[hidden] { display: none; }

.dash-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.dash-quick-grid a { display: grid; justify-items: start; align-content: start; gap: 2px; min-width: 0; padding: 12px; border-radius: 14px; color: var(--dv-ink); background: var(--dv-tint); text-decoration: none; transition: background .2s ease, color .2s ease; }
.dash-quick-grid a:hover, .dash-quick-grid a:focus-visible { color: #fff; background: var(--dv-action); }
.dash-quick-grid i { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 10px; color: var(--dv-accent); background: var(--dv-paper); }
.dash-quick-grid i svg { width: 18px; height: 18px; }
.dash-quick-grid a:hover i, .dash-quick-grid a:focus-visible i { color: #fff; background: rgba(255, 255, 255, .18); }
.dash-quick-grid strong { font-size: .76rem; }
.dash-quick-grid small { color: var(--dv-ink2); font-size: .62rem; }
.dash-quick-grid a:hover small, .dash-quick-grid a:focus-visible small { color: rgba(255, 255, 255, .85); }
.dash-quick-grid a.is-pro-locked { position: relative; overflow: hidden; cursor: pointer; }
.dash-quick-grid a.is-pro-locked > :not(.dash-quick-pro-lock) { opacity: .58; filter: grayscale(.08); }
.dash-quick-grid a.is-pro-locked:hover, .dash-quick-grid a.is-pro-locked:focus-visible { color: var(--dv-ink); background: var(--dv-tint); }
.dash-quick-grid a.is-pro-locked:hover small, .dash-quick-grid a.is-pro-locked:focus-visible small { color: var(--dv-ink2); }
.dash-quick-pro-lock { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(79,127,189,.2); border-radius: 50%; color: var(--dv-action); background: rgba(255,255,255,.78); box-shadow: 0 7px 18px rgba(31,58,95,.12); backdrop-filter: blur(2px); }
.dash-quick-pro-lock[hidden] { display: none; }
.dash-quick-pro-lock .pro-lock-icon { width: 14px; height: 14px; }

.dash-program-card, .dash-record-card, .dash-weight-card { display: flex; flex-direction: column; }
.dash-program-progress[hidden] { display: none; }
.dash-program-card .dash-linear { margin-top: 14px; }
.dash-program-meta { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0; color: var(--dv-ink2); font-size: .66rem; font-weight: 700; }
.dash-program-action { align-self: flex-start; margin-top: auto; padding-top: 0; }
.dash-program-card .dash-program-action { margin-top: 16px; min-height: 40px; padding: 0 16px; font-size: .74rem; }
.dash-program-card.is-empty .dash-program-chapter { max-width: 34ch; }
.dash-big-value { margin-top: 12px; color: var(--dv-ink); font-size: 1.55rem; font-weight: 800; line-height: 1.05; }
.dash-weight-spark { width: 100%; height: 56px; margin-top: auto; padding-top: 10px; }
.dash-weight-spark[hidden] { display: none; }

@media (max-width: 1180px) {
  .dash-grid-today { grid-template-columns: 1fr 1fr; }
  .dash-grid-today .dash-stack-card { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .dash-grid-week { grid-template-columns: 1fr; }
  .dash-grid-progress { grid-template-columns: 1fr 1fr; }
  .dash-grid-progress .dash-program-card { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .dash-grid-today, .dash-grid-progress { grid-template-columns: 1fr; }
  .dash-week-body { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .dash-week-plan { width: 100%; }
  .dash-week-days { gap: 4px; }
  .dash-week-days li { padding: 8px 2px; }
  .dash-week-days small { display: none; }
  .dash-week-days i { width: 26px; height: 26px; }
  .dash-week-legend { justify-content: center; }
  .dash-card-pro-lock { flex-wrap: wrap; text-align: left; }
  .dash-card-pro-lock .dash-ghost-button { flex-basis: 100%; }
}

/* The body check-in chart fills with its own gradient, tinted like its line (the shared rule points at the volume chart's green one). */
.progress-physical-chart .area { fill: url(#physicalArea); }

/* Progress photos load with a soft shimmer. */
.progress-photo-media.is-loading { background: linear-gradient(100deg, var(--dv-tint) 30%, #f3f7fd 50%, var(--dv-tint) 70%) 0 0 / 250% 100%; animation: progressPhotoShimmer 1.2s ease-in-out infinite; }
.progress-photo-media.is-loading img { opacity: 0; }
.progress-photo-media img { transition: opacity .25s ease; }
@keyframes progressPhotoShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .progress-photo-media.is-loading { animation-duration: 2.4s; } }

/* Achievements: the latest unlocks lead the page. */
.ach-recent { margin: 0 0 26px; }
.ach-recent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ach-recent-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 0; border-radius: 16px; color: var(--dv-ink); background: var(--dv-paper); box-shadow: var(--dv-shadow); font: inherit; text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.ach-recent-card:hover { transform: translateY(-2px); box-shadow: var(--dv-shadow-lg); }
.ach-recent-card:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 3px; }
.ach-recent-card .ach-badge { background: var(--dv-accent); }
.ach-recent-copy { display: grid; gap: 3px; min-width: 0; }
.ach-recent-copy strong { color: var(--dv-ink); font-size: .84rem; line-height: 1.2; }
.ach-recent-copy small { color: var(--dv-ink2); font-size: .68rem; }
.ach-recent-points { justify-self: start; margin-top: 3px; padding: 2px 8px; border-radius: 999px; color: var(--dv-accent); background: rgba(91, 74, 158, .1); font-size: .66rem; font-weight: 800; }
@media (max-width: 1100px) { .ach-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ach-recent-grid { grid-template-columns: 1fr; gap: 8px; } .ach-recent-card { padding: 12px; } }

/* Workout in progress: a floating bar on every Hero Hub page that leads back to the live workout. */
.live-workout-bar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 80;
  display: flex; align-items: center; gap: 14px; width: min(560px, calc(100% - 24px)); padding: 10px 22px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .75); border-radius: 999px; color: var(--dv-navy); text-decoration: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, .9) 35%, rgba(205, 240, 219, .92));
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 14px 34px rgba(31, 58, 95, .22); transform: translateX(-50%); animation: liveWorkoutIn .3s cubic-bezier(.2, .7, .2, 1);
}
.live-workout-bar:hover { color: var(--dv-navy); box-shadow: 0 16px 38px rgba(31, 58, 95, .28); }
.live-workout-bar:focus-visible { outline: 3px solid var(--dv-accent); outline-offset: 3px; }
.live-workout-bar__open { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; color: var(--dv-navy); background: rgba(31, 58, 95, .08); }
.live-workout-bar__open svg { width: 22px; height: 22px; }
.live-workout-bar__copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.live-workout-bar__copy strong { overflow: hidden; font-size: 1.05rem; font-weight: 900; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
.live-workout-bar__copy small { display: flex; align-items: center; gap: 7px; color: var(--dv-ink2); font-family: var(--dv-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.live-workout-bar__copy small i { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 4px rgba(47, 191, 113, .18); animation: liveWorkoutPulse 1.6s ease-in-out infinite; }
.live-workout-bar__time { flex: none; color: var(--dv-navy); font-size: 1.75rem; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.live-workout-bar.is-paused { background: linear-gradient(100deg, rgba(255, 255, 255, .92) 35%, rgba(255, 236, 205, .92)); }
.live-workout-bar.is-paused .live-workout-bar__copy small i { background: #e0a52d; box-shadow: 0 0 0 4px rgba(224, 165, 45, .2); animation: none; }
/* Room under the last card for the bar; on a wide screen it centres on the content, beside the menu. */
body.has-live-workout .dash-main { padding-bottom: 96px; }
@media (min-width: 1101px) { .live-workout-bar { left: calc(50% + var(--sidebar, 248px) / 2); width: min(560px, calc(100% - var(--sidebar, 248px) - 48px)); } }
@keyframes liveWorkoutIn { from { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes liveWorkoutPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .live-workout-bar, .live-workout-bar__copy small i { animation: none; } }

/* Exercise picker: the equipment chips under the muscle chips, and the note when the list is cut. The attribute
   selector outweighs the dialog rule that fills buttons without a class. */
.exercise-picker-controls > .exercise-picker-equipment { margin-top: 8px; }
.exercise-picker-controls > .exercise-picker-equipment button[data-equipment] { color: var(--dv-ink2); background: transparent; border: 1.5px solid var(--dv-tint); }
.exercise-picker-controls > .exercise-picker-equipment button[data-equipment].is-active { color: var(--dv-navy); background: var(--dv-tint); border-color: var(--dv-outline); }
.exercise-picker-more { margin: 4px 0 8px; color: var(--dv-ink2); font-size: .78rem; text-align: center; }