/* Editorial experiment: common shell, semantic themes, and training page compositions. */
:root {
  color-scheme: dark;
  --fd-surface-canvas: #151715;
  --fd-surface-base: #1d211e;
  --fd-surface-raised: #282e29;
  --fd-surface-sunken: #191d1a;
  --fd-surface-overlay: #282e29;
  --fd-text-primary: #f2efe7;
  --fd-text-secondary: #b8bcb3;
  --fd-text-tertiary: #a9ada4;
  --fd-border-default: #353b35;
  --fd-border-subtle: #2e342e;
  --fd-border-focus: #e58b69;
  --fd-focus-halo: transparent;
  --fd-action-primary: #ad4b33;
  --fd-action-primary-hover: #c15a3f;
  --fd-action-primary-text: #fffaf2;
  --product-accent: #e58b69;
  --product-accent-soft: #34261f;
  --product-viz-progress: #30d158;
  --product-viz-gamification: #c6a2f2;
  --product-viz-measurement: #64a9ff;
  --product-viz-health: #66c9e3;
  --product-display-font: 'Iowan Old Style', 'Baskerville', 'Times New Roman', serif;
  --product-interface-font: 'Avenir Next', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --green: var(--product-viz-progress);
  --editorial-nav: #0b100f;
  --editorial-nav-active: #202622;
  --editorial-nav-text: #c0c1bb;
  --editorial-nav-accent: #e58b69;
  --editorial-xp-surface: #262131;
  --editorial-positive: #65d984;
  --editorial-blue-surface: #192b36;
}
:root[data-theme='light'] {
  color-scheme: light;
  --fd-surface-canvas: #f7f4ed;
  --fd-surface-base: #fffdf8;
  --fd-surface-raised: #f0ece3;
  --fd-surface-sunken: #f4eee6;
  --fd-surface-overlay: #fffdf8;
  --fd-text-primary: #191c19;
  --fd-text-secondary: #565c53;
  --fd-text-tertiary: #696b64;
  --fd-border-default: #e2ded5;
  --fd-border-subtle: #e9e5dd;
  --fd-border-focus: #9e4933;
  --product-accent: #ad4b33;
  --product-accent-soft: #f4e6df;
  --product-viz-progress: #22733b;
  --product-viz-gamification: #7944a8;
  --product-viz-measurement: #1767ae;
  --product-viz-health: #087a94;
  --product-viz-comparison: #a86200;
  --fd-feedback-danger: #a14134;
  --editorial-xp-surface: #f3edf7;
  --editorial-positive: #22733b;
  --editorial-blue-surface: #eaf3f8;
}
body { font-size: 14px; line-height: 1.5; }
button, input, select { font-family: var(--product-interface-font); }
header {
  background: var(--bg); border-bottom: 1px solid var(--border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.editorial-wordmark, .rail-brand {
  color: var(--text);
}
.editorial-wordmark { display: block; width: 124px; height: 37px; }
.brand-lockup { display: block; width: 124px; height: 37px; }
.brand-lockup-light { display: none; }
:root[data-theme='light'] header .brand-lockup-dark { display: none; }
:root[data-theme='light'] header .brand-lockup-light { display: block; }
.icon-btn { background: transparent; border: 0; border-radius: 6px; }
.icon-btn:hover { background: var(--fd-surface-raised); }
.jump-btn svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.rail-brand { display: none; }
main { padding: 24px 18px 104px; }
.card, .hero-week { border-radius: 6px; padding: 20px; box-shadow: none; }
.card h2, #sec-home .card h2, #sec-log .card h2,
#sec-detail .card h2, #sec-health .card h2 {
  font: 500 22px/1.2 var(--product-display-font);
  color: var(--text); text-transform: none; letter-spacing: -.025em;
}
.sec h1, .workout-detail-title, .exercise-detail-header h1 {
  font-family: var(--product-display-font); font-weight: 500;
  font-size: clamp(28px, 4vw, 32px); line-height: 1.12;
  letter-spacing: -.035em; overflow-wrap: anywhere;
}
[class$='-eyebrow'] { font-weight: 500; letter-spacing: .08em; }
[class$='-intro-copy'] { color: var(--muted); font-size: 14px; }
.hero-week-stat .value { font-weight: 500; color: var(--product-accent); }
.hero-week-stat { padding: 0 20px; border-left: 1px solid var(--border); }
.hero-week-stat:first-child { padding-left: 0; border-left: 0; }
.hero-week-stat:last-child { padding-right: 0; }
.hero-ref strong { color: var(--text); font-weight: 500; }
.home-status.ready::before { background: var(--green); }
.xp-card { background: var(--editorial-xp-surface); }
.xp-level, .xp-head, .xp-earned { color: var(--purple); }
.xp-fill { background: var(--purple); }
.xp-bar { background: var(--fd-surface-raised); }
.next-focus-main { font: 500 28px/1.15 var(--product-display-font); }
.next-kicker { color: var(--muted); text-transform: none; letter-spacing: 0; }
.btn, .btn-primary, .error-action {
  min-height: 44px; background: var(--fd-action-primary); color: var(--fd-action-primary-text);
  border-radius: 6px; border-color: transparent;
}
.btn:hover { background: var(--fd-action-primary-hover); }
.btn-ghost, .btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.detail-back { color: var(--muted); padding-bottom: 0; margin-bottom: 12px; }
.detail-back:hover, .workout-detail-link:hover { color: var(--product-accent); }
.lw-stat { background: none; border-radius: 0; text-align: left; padding: 4px 14px; border-left: 1px solid var(--border); min-width: 0; }
.lw-stat:first-child { border-left: 0; padding-left: 0; }
.lw-stat .v { font: 500 23px/1.2 var(--product-interface-font); }
.lw-stat .l { letter-spacing: .04em; }
.workout-detail-summary .lw-stats, .workout-health .lw-stats { gap: 0; }
.workout-detail-link { border-top: 1px solid var(--border); margin-top: 16px; }
.workout-detail-link-title { font-weight: 500; }
.lw-set { background: var(--fd-surface-raised); border: 0; border-radius: 4px; }
.lw-ex { padding: 16px 0; }
.lw-ex-name { font-size: 16px; }
.seg { border: 1px solid var(--border); background: transparent; border-radius: 6px; }
.seg-btn { border-radius: 4px; min-height: 40px; }
.seg-btn.active, .sort-btn.active { background: var(--fd-action-primary); color: var(--fd-action-primary-text); }
.m-search, .settings-input, .settings-select, input, select { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: 6px; }
input::placeholder { color: var(--muted); opacity: 1; }
.wk-delta.up, .trend-chip.up, .pr-gain { color: var(--editorial-positive); }
.wk-delta.flat { color: var(--muted); }
#sec-log .log-card { background: transparent; border: 0; padding: 0; }
#sec-log .log-row { padding: 22px 0; min-height: 100px; }
.log-title { white-space: normal; overflow-wrap: anywhere; font-weight: 500; font-size: 16px; }
.log-day { font: 500 30px/1 var(--product-display-font); }
.log-month { font: 500 22px/1.2 var(--product-display-font); letter-spacing: -.02em; color: var(--text); margin: 28px 0 10px; }
.log-performance { padding-left: 12px; border-left: 1px solid var(--border); }
.log-score { flex-direction: column; gap: 4px; align-items: flex-end; }
.log-score-value { font-weight: 500; font-size: 24px; }
.log-meta { font-size: 13px; }
.log-more { border-color: var(--border); }
.badge-name, .badge-sub { color: var(--text); }
.badge-sub { color: var(--muted); }
.workout-health-title, .health-card h3 { color: var(--text); }
.workout-health-note, .workout-detail-meta, .workout-health-source,
.health-source-note, .health-loading, .health-metric-note { color: var(--muted); }
.health-metric .value { color: var(--blue); }
.health-period-btn.active { background: var(--fd-action-primary); color: var(--fd-action-primary-text); }
#sec-settings .settings-row { border-color: var(--border); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--fd-border-focus); outline-offset: 3px; box-shadow: none; }
@media (max-width: 820px) {
  header { height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 18px 0; }
  .jumpbar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    height: calc(68px + env(safe-area-inset-bottom)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    max-width: none; margin: 0; border: 0; border-top: 1px solid #353b35; border-radius: 0;
    background: var(--editorial-nav); backdrop-filter: none; -webkit-backdrop-filter: none;
    gap: 0; overflow: visible;
  }
  .jump-btn { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 0; padding: 4px 0; min-height: 44px; color: var(--editorial-nav-text); font-size: 12px; border-radius: 4px; }
  .jump-btn.active { color: var(--editorial-nav-accent); background: transparent; }
  .jump-btn:focus-visible { outline-color: var(--editorial-nav-accent); outline-offset: -2px; }
  .card, .hero-week { padding: 16px; }
  .card h2, #sec-home .card h2, #sec-detail .card h2 { font-size: 21px; }
  .workout-detail-title-row { align-items: flex-start; flex-wrap: wrap; }
  #sec-home .xp-card { padding: 12px 16px; }
}
@media (max-width: 560px) {
  .hero-week-stat { padding: 4px 12px; }
  .hero-week-stat:nth-child(n+3) { border-color: var(--border); }
  .lw-stats:not(.cols-2):not(.cols-3) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .lw-stat:nth-child(odd), #last-workout-content .lw-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .lw-stat:nth-child(even), #last-workout-content .lw-stat:nth-child(even) { padding-right: 0; }
  .lw-stat:nth-child(n+3), #last-workout-content .lw-stat:nth-child(n+3) { padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--border); }
  .hero-week-stat .value { font-size: 2.6rem; }
  #sec-log .log-row { grid-template-columns: 36px minmax(0,1fr) auto 8px; gap: 8px; padding: 18px 0; }
  #sec-log .log-date { width: 36px; }
  .log-title { font-size: 14px; }
  .log-performance { padding-left: 8px; }
  .log-performance .xp-earned, .log-score-label { font-size: 12px; }
  .next-focus { flex-wrap: wrap; }
  .health-chart-meta { max-width: none; }
}
@media (min-width: 821px) {
  body { padding-left: 184px; }
  header { height: 64px; padding: 0 28px; justify-content: flex-end; }
  header .brand-home { display: none; }
  .jumpbar, .jumpbar.detail-mode {
    position: fixed; top: 0; bottom: 0; left: 0; width: 184px; height: 100dvh;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 6px;
    margin: 0; padding: 22px 12px; border: 0; border-right: 1px solid #202622; border-radius: 0;
    background: var(--editorial-nav); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .rail-brand { display: block; min-height: 44px; text-align: left; margin-bottom: 28px; padding: 0 12px;
    color: #fffaf1; border: 0; background: transparent; cursor: pointer; }
  .jump-btn { display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    flex: 0 0 auto; min-height: 48px; padding: 0 12px; font-size: 14px; color: var(--editorial-nav-text); border-radius: 5px; }
  .jump-btn.active { color: #fffaf1; background: var(--editorial-nav-active); box-shadow: inset 2px 0 var(--editorial-nav-accent); }
  .jump-btn.active svg { color: var(--editorial-nav-accent); }
  .jump-btn:hover { background: var(--editorial-nav-active); }
  .jump-btn:focus-visible, .rail-brand:focus-visible { outline-color: var(--editorial-nav-accent); }
  main { width: min(100%, 1280px); margin: 0 auto; padding: 28px 28px 64px; }
  section.sec.active { max-width: none; }
  #sec-home.active { display: block; }
  #sec-home > .home-intro { padding-bottom: 22px; }
  #sec-home .home-columns { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 18px; align-items: start; }
  #sec-home .home-primary, #sec-home .home-secondary { min-width: 0; }
  #sec-home .home-columns .card { margin-top: 0; margin-bottom: 18px; }
  #sec-home > .xp-card { padding: 14px 20px; }
  .xp-card .xp-track { grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); align-items: center; }
  .xp-card .xp-head { display: flex; flex-wrap: wrap; }
  .hero-week-stat .value { font-size: 44px; }
  .card, .hero-week { border-radius: 6px; padding: 20px; }
  #sec-log, #sec-detail { max-width: 1000px; margin: 0 auto; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  #sec-home .home-columns { grid-template-columns: minmax(0,1fr); gap: 0; }
}

.home-primary, .home-secondary { min-width: 0; }
/* Literal inline colors in older components must also retain readable theme roles. */
.home-status.stale, .home-status.error, .health-error-title, .health-coverage-status.error { color: var(--orange); }
.health-coverage-status.ready { color: var(--editorial-positive); }

.muscles-worked-title { font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.wk-target-track { display: block; height: 5px; border-radius: 3px; background: var(--fd-surface-raised); margin: 8px 0 0 16px; max-width: 240px; }
.wk-target-fill { display: block; height: 100%; border-radius: inherit; }
.wk-row-l { padding-right: 12px; }

@media (max-width: 820px) { .seg-btn { min-height: 44px; } }