/*
 * Homepage layout and components.
 *
 * Structure: the model is the anchor in the middle column on desktop, and stays
 * full-width and large on mobile — never shrunk to an illustration. The
 * evidence ladder in the region panel is the one place the design raises its
 * voice; everything around it stays quiet.
 */

/* ------------------------------------------------------------------- shell */

.boot {
  min-height: 60vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: var(--s6);
}

.boot[hidden] {
  display: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4) clamp(var(--s4), 3vw, var(--s7));
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(to bottom, rgba(10, 15, 23, 0.9), rgba(10, 15, 23, 0.4));
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
}

.topbar__brand {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.topbar__mark {
  width: 10px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to bottom, var(--blue-bright), var(--blue-deep));
  box-shadow: 0 0 18px -2px rgba(124, 196, 245, 0.5);
}

.topbar__nav {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: var(--step--1);
  padding: 0 var(--s3);
  border-radius: var(--radius-pill);
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.topbar__link:hover {
  color: var(--text);
  background: rgba(148, 184, 224, 0.07);
}

.topbar__link.is-current {
  color: var(--text);
  background: rgba(62, 143, 214, 0.14);
}

/* --------------------------------------------------------------- hero grid */

.hero {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: clamp(var(--s4), 2vw, var(--s6));
  align-items: start;
  max-width: 1620px;
  margin: 0 auto;
  padding: clamp(var(--s5), 4vw, var(--s8)) clamp(var(--s4), 3vw, var(--s7)) var(--s7);
}

.hero__lead,
.hero__stage {
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

.quality-wrap {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 clamp(var(--s4), 3vw, var(--s7)) var(--s6);
}

/* ------------------------------------------------------------------ typography */

.eyebrow {
  margin: 0 0 var(--s2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}

.section-title {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.section-sub {
  margin: var(--s2) 0 0;
  color: var(--text-dim);
  max-width: 56ch;
}

/* ---------------------------------------------------------------- status */

.status {
  padding: var(--s5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(160deg, rgba(28, 76, 122, 0.28), rgba(14, 21, 32, 0.7));
  box-shadow: var(--shadow);
}

.status-headline {
  margin: 0;
  font-size: var(--step-4);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.status-supporting {
  margin: var(--s3) 0 0;
  color: var(--text-dim);
  max-width: 40ch;
}

.observations {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

.observation {
  position: relative;
  padding-left: var(--s4);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 46ch;
}

.observation::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-neutral);
}

.observation[data-tone='positive']::before {
  background: var(--status-progressing);
}

.observation[data-tone='watch']::before {
  background: var(--status-monitor);
}

.status-basis {
  margin-top: var(--s4);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s3);
}

.status-basis__label {
  margin: var(--s3) 0 0;
  color: var(--text-dim);
  font-size: var(--step--1);
}

.status-basis summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.status-basis summary:hover {
  color: var(--text-dim);
}

.status-inputs {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s1);
}

.status-input {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-size: var(--step--1);
  padding: var(--s1) 0;
  border-bottom: 1px solid var(--hairline);
}

.status-input__label {
  color: var(--text-dim);
}

.status-input__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.status-basis__note {
  margin: var(--s3) 0 0;
  font-size: var(--step--1);
  color: var(--text-faint);
  line-height: 1.55;
}

/* ----------------------------------------------------------------- stage */

.stage {
  position: relative;
  background: radial-gradient(60% 50% at 50% 42%, rgba(38, 96, 152, 0.16), transparent 72%);
  overflow: hidden;
  min-height: min(74vh, 700px);
  display: grid;
  grid-template-rows: 1fr auto auto;
}

.stage__canvas {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
}

.body-canvas,
.anatomy-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  /* Vertical gestures stay with the page so the model never traps the scroll. */
  touch-action: pan-y;
}

.body-canvas.is-dragging,
.anatomy-canvas.is-dragging {
  cursor: grabbing;
}

.stage__hover {
  position: absolute;
  top: var(--s4);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-pill);
  background: rgba(7, 10, 16, 0.82);
  border: 1px solid var(--hairline-strong);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.stage__hover::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: var(--s2);
  vertical-align: middle;
  background: var(--status-neutral);
}

.stage__hover[data-status='progressing']::before { background: var(--status-progressing); }
.stage__hover[data-status='monitor']::before { background: var(--status-monitor); }
.stage__hover[data-status='plateau']::before { background: var(--status-plateau); }
.stage__hover[data-status='imbalance']::before { background: var(--status-imbalance); }
.stage__hover[data-status='no-data']::before { background: var(--status-no-data); }

/* ------------------------------------------------------- anatomy viewer */
/* Overlays inside .stage-canvas, positioned relative to .stage like
   .stage__hover above — loading/fallback/error state and the compact
   click-to-open muscle info panel. See src/anatomy/. */

.anatomy-status {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  z-index: 2;
  margin: 0;
  max-width: min(70%, 320px);
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-pill);
  background: rgba(7, 10, 16, 0.82);
  border: 1px solid var(--hairline-strong);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-dim);
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.anatomy-status[data-state='error'] {
  color: var(--status-imbalance);
  border-color: rgba(214, 84, 78, 0.45);
}

.anatomy-info {
  position: absolute;
  left: var(--s4);
  bottom: var(--s4);
  z-index: 3;
  max-width: min(86%, 320px);
  padding: var(--s4);
  border-radius: var(--radius);
  border: 1px solid var(--hairline-strong);
  background: rgba(14, 21, 32, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.anatomy-info__close {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: var(--step-1);
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.anatomy-info__close:hover {
  color: var(--text);
  background: rgba(148, 184, 224, 0.08);
}

.anatomy-info__eyebrow {
  margin: 0 0 var(--s1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue-bright);
}

.anatomy-info__title {
  margin: 0 var(--s6) var(--s2) 0;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.anatomy-info__blurb {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--step--1);
  line-height: 1.55;
}

.stage__controls {
  display: flex;
  justify-content: center;
  gap: var(--s2);
  padding: 0 var(--s4) var(--s2);
}

.icon-button {
  appearance: none;
  border: 1px solid var(--hairline);
  background: rgba(19, 28, 41, 0.7);
  color: var(--text-dim);
  font: inherit;
  font-size: var(--step--1);
  min-height: 40px;
  min-width: 44px;
  padding: 0 var(--s3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.icon-button:hover {
  color: var(--text);
  border-color: var(--hairline-strong);
}

.stage__hint {
  margin: 0;
  padding: 0 var(--s5) var(--s4);
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-dim);
  transition: opacity var(--duration) var(--ease), color var(--duration) var(--ease);
}

.stage__hint[data-dismissed='true'] {
  color: var(--text-faint);
  opacity: 0.7;
}

.stage-notice {
  padding: var(--s6);
  text-align: center;
  max-width: 38ch;
  margin: auto;
}

.stage-notice__title {
  margin: 0 0 var(--s2);
  font-size: var(--step-2);
  font-weight: 600;
}

.stage-notice__body {
  margin: 0;
  color: var(--text-dim);
}

/* ---------------------------------------------------------------- legend */

.legend {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  background: var(--inset);
}

.legend__title {
  margin: 0 0 var(--s2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  font-weight: 500;
}

.legend__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.legend__item {
  display: grid;
  grid-template-columns: 10px auto 1fr;
  align-items: center;
  gap: var(--s2);
  font-size: var(--step--1);
}

.legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--status-neutral);
}

.legend__item[data-status='progressing'] .legend__swatch { background: var(--status-progressing); }
.legend__item[data-status='monitor'] .legend__swatch { background: var(--status-monitor); }
.legend__item[data-status='plateau'] .legend__swatch { background: var(--status-plateau); }
.legend__item[data-status='imbalance'] .legend__swatch { background: var(--status-imbalance); }
.legend__item[data-status='no-data'] .legend__swatch { background: var(--status-no-data); }

.legend__desc {
  color: var(--text-faint);
}

/* ----------------------------------------------------------- region list */

.region-list-wrap {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--inset);
  padding: var(--s3) var(--s4);
}

.region-list-wrap[data-primary='true'] {
  border-color: var(--hairline-strong);
  background: var(--surface);
}

.region-list-wrap summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.region-list {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s3);
}

.region-list__heading {
  margin: 0 0 var(--s2);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-dim);
}

.region-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.region-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: rgba(19, 28, 41, 0.6);
  color: var(--text-dim);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

.region-chip:hover {
  color: var(--text);
  border-color: var(--hairline-strong);
}

.region-chip.is-selected {
  color: var(--text);
  background: rgba(62, 143, 214, 0.18);
  border-color: rgba(124, 196, 245, 0.4);
}

.region-chip__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-neutral);
  flex: none;
}

.region-chip[data-status='progressing'] .region-chip__swatch { background: var(--status-progressing); }
.region-chip[data-status='monitor'] .region-chip__swatch { background: var(--status-monitor); }
.region-chip[data-status='plateau'] .region-chip__swatch { background: var(--status-plateau); }
.region-chip[data-status='imbalance'] .region-chip__swatch { background: var(--status-imbalance); }
.region-chip[data-status='no-data'] .region-chip__swatch { background: var(--status-no-data); }

.region-chip__status {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------ panel */

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

.panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}

.panel__title {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.panel__reason {
  margin: var(--s2) 0 0;
  color: var(--text-dim);
  font-size: var(--step--1);
}

.panel__prose {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.62;
}

.panel__empty {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--step--1);
}

.panel__action-label {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

.panel__action-note,
.panel__provenance {
  margin: var(--s2) 0 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  line-height: 1.5;
}

/* ------------------------------------------------- the evidence ladder */
/* The signature element: four fixed rungs, always in the same order, so it is
   always visible where measurement stops and interpretation begins. */

.ladder {
  margin-top: var(--s5);
  display: grid;
  gap: var(--s5);
  position: relative;
}

.ladder::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--blue-deep),
    rgba(148, 184, 224, 0.2) 60%,
    rgba(53, 198, 168, 0.5)
  );
}

.ladder__rung {
  display: grid;
  grid-template-columns: 11px 1fr;
  column-gap: var(--s4);
  row-gap: var(--s2);
  align-items: start;
}

.ladder__marker {
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 3px;
  background: var(--canvas);
  border: 1px solid var(--hairline-strong);
  grid-row: span 2;
}

.ladder__rung[data-rung='fact'] .ladder__marker {
  background: var(--blue);
  border-color: var(--blue-bright);
}

.ladder__rung[data-rung='trend'] .ladder__marker {
  background: var(--blue-deep);
  border-color: var(--blue);
}

.ladder__rung[data-rung='interpretation'] .ladder__marker {
  background: transparent;
  border-style: dashed;
  border-color: var(--text-faint);
}

.ladder__rung[data-rung='action'] .ladder__marker {
  background: var(--teal);
  border-color: var(--teal);
  border-radius: 50%;
}

.ladder__head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}

.ladder__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
}

.ladder__hint {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.ladder__body {
  grid-column: 2;
}

/* --------------------------------------------------------- metric rows */

.metric-rows {
  margin: 0;
  display: grid;
  gap: var(--s2);
}

.metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--hairline);
}

.metric-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.metric-row dt {
  color: var(--text-dim);
  font-size: var(--step--1);
}

.metric-row dd {
  margin: 0;
  text-align: right;
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.metric-row__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}

.metric-row__unit {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
}

.metric-row__note {
  font-size: 0.6875rem;
  color: var(--text-faint);
  flex-basis: 100%;
}

.metric-row__delta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

[data-tone='good'] { color: var(--status-progressing); }
[data-tone='bad'] { color: var(--status-monitor); }
[data-tone='flat'] { color: var(--text-faint); }

/* ------------------------------------------------------------------ chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-neutral);
}

.chip[data-status='progressing'] .chip__dot { background: var(--status-progressing); }
.chip[data-status='monitor'] .chip__dot { background: var(--status-monitor); }
.chip[data-status='plateau'] .chip__dot { background: var(--status-plateau); }
.chip[data-status='imbalance'] .chip__dot { background: var(--status-imbalance); }
.chip[data-status='no-data'] .chip__dot { background: var(--status-no-data); }

/* ----------------------------------------------------------------- buttons */

.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: var(--s4);
  padding: 0 var(--s4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  text-align: center;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.button--primary {
  background: rgba(53, 198, 168, 0.14);
  border-color: rgba(53, 198, 168, 0.42);
  color: #d6fbf2;
}

.button--primary:hover {
  background: rgba(53, 198, 168, 0.22);
}

.button--ghost:hover {
  background: rgba(148, 184, 224, 0.08);
}

.button--quiet {
  margin-top: 0;
  min-height: 34px;
  padding: 0 var(--s3);
  border-color: var(--hairline);
  color: var(--text-dim);
  font-size: var(--step--1);
}

.button--quiet:hover {
  color: var(--text);
  border-color: var(--hairline-strong);
}

.button--quiet.is-active {
  color: var(--text);
  background: rgba(62, 143, 214, 0.18);
  border-color: rgba(124, 196, 245, 0.35);
}

/* ------------------------------------------------------------- data quality */

.quality {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--inset);
}

.quality[data-stale='true'] {
  border-color: rgba(217, 162, 58, 0.4);
}

.quality__item {
  display: grid;
}

.quality__label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.quality__value {
  font-size: var(--step--1);
  color: var(--text-dim);
}

.quality__note {
  flex: 1 1 18ch;
  font-size: 0.6875rem;
  color: var(--text-faint);
  line-height: 1.5;
}

/* -------------------------------------------------------------- evolution */

.evolution {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 clamp(var(--s4), 3vw, var(--s7)) var(--s8);
}

.evolution__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--hairline);
}

.evolution__presets {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.rail {
  position: relative;
  height: 104px;
  margin-top: var(--s6);
}

.rail__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--hairline-strong) 8%, var(--hairline-strong) 92%, transparent);
}

.rail__point {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--s1) var(--s2);
  color: var(--text-faint);
  font: inherit;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: var(--s2);
  min-width: 56px;
  border-radius: var(--radius-sm);
  transition: color var(--duration) var(--ease);
}

.rail__point:hover {
  color: var(--text-dim);
}

.rail__tick {
  width: 11px;
  height: 11px;
  margin-top: 17px;
  border-radius: 50%;
  background: var(--canvas);
  border: 1px solid var(--hairline-strong);
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.rail__date {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.rail__role {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

.rail__point[data-role~='baseline'] .rail__tick {
  background: var(--blue-deep);
  border-color: var(--blue);
}

.rail__point[data-role~='current'] {
  color: var(--text);
}

.rail__point[data-role~='current'] .rail__tick {
  background: var(--blue-bright);
  border-color: var(--blue-bright);
  transform: scale(1.25);
  box-shadow: 0 0 16px -1px rgba(124, 196, 245, 0.7);
}

.rail__hint {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-faint);
}

.evolution__deltas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
}

.delta {
  padding: var(--s4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.delta__label {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-dim);
}

.delta__values {
  margin: var(--s2) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.delta__from {
  color: var(--text-faint);
}

.delta__arrow {
  color: var(--text-faint);
}

.delta__to {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
}

.delta__unit {
  font-size: var(--step--1);
  color: var(--text-faint);
}

.delta__change {
  margin: var(--s1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.delta[data-tone='good'] .delta__change { color: var(--status-progressing); }
.delta[data-tone='bad'] .delta__change { color: var(--status-monitor); }
.delta[data-tone='flat'] .delta__change { color: var(--text-faint); }

.evolution__all {
  margin-top: var(--s5);
}

.evolution__all summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.evolution__table {
  margin-top: var(--s4);
  overflow-x: auto;
}

.scan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: 460px;
}

.scan-table caption {
  text-align: left;
  color: var(--text-faint);
  font-size: 0.6875rem;
  padding-bottom: var(--s2);
}

.scan-table th,
.scan-table td {
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--hairline);
}

.scan-table thead th {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-weight: 500;
}

.scan-table tbody th {
  font-weight: 400;
  color: var(--text-dim);
}

.scan-table .num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.scan-table .unit {
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.evolution__training,
.evolution__observations {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
}

.evolution__training-title {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
}

.training-windows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s4);
  margin-top: var(--s4);
}

.training-window {
  padding: var(--s4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.training-window__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.training-window__text {
  margin: var(--s2) 0 0;
  font-size: var(--step-0);
  line-height: 1.5;
}

.evolution__observations .observations {
  margin-top: var(--s4);
}

/* --------------------------------------------------------------- workouts */

.workouts {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 clamp(var(--s4), 3vw, var(--s7)) var(--s8);
}

.workouts__header {
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--hairline);
}

.workouts__list {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
}

.workouts__hint {
  margin-top: var(--s5);
  color: var(--text-faint);
  font-size: var(--step--1);
  max-width: 68ch;
}

.workout-entry {
  padding: var(--s4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.workout-entry__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.workout-entry__date {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
}

.workout-entry__title {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  flex: 1 1 auto;
}

.workout-entry__exercises {
  margin: var(--s2) 0 0;
  color: var(--text-dim);
  font-size: var(--step--1);
}

.workout-entry__volume {
  margin: var(--s2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
}

.workout-entry__insight {
  margin: var(--s3) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--text-dim);
}

/* -------------------------------------------------------------- plateaus */

.plateaus {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 clamp(var(--s4), 3vw, var(--s7)) var(--s8);
}

.plateaus__header {
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--hairline);
}

.plateaus__list {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
}

.plateau-entry {
  padding: var(--s4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-raised);
  border-left: 3px solid var(--status-plateau);
}

.plateau-entry__title {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
}

.plateau-entry__reason {
  margin: var(--s2) 0 0;
  color: var(--text-dim);
}

.plateau-entry__factors {
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s2);
}

.plateau-entry__factors li {
  padding-top: var(--s2);
  border-top: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--text-dim);
  line-height: 1.5;
}

.plateau-entry__factors strong {
  color: var(--text);
}

/* ----------------------------------------------------------------- footer */

.footer {
  max-width: 1620px;
  margin: 0 auto;
  padding: var(--s5) clamp(var(--s4), 3vw, var(--s7)) var(--s7);
  border-top: 1px solid var(--hairline);
  color: var(--text-faint);
  font-size: var(--step--1);
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}

.footer p {
  margin: 0;
  max-width: 68ch;
}

.footer__links {
  display: flex;
  gap: var(--s4);
}

.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--text-dim);
  text-decoration: none;
}

.footer a:hover {
  color: var(--text);
}

/* ------------------------------------------------------------ responsive */

/* Tablet: model stays central and large, the lead column falls beneath it. */
@media (max-width: 1180px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero__stage {
    order: 1;
  }

  .hero__lead {
    order: 2;
  }
}

/* Mobile: status → model → region summary → evolution. */
@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: var(--s5);
  }

  .hero__stage,
  .hero__lead {
    grid-column: 1;
  }

  /* Order is set explicitly so the model sits under the status, ahead of
     the region panel. */
  .hero__lead { display: contents; }

  .status { order: 1; }
  .hero__stage { order: 2; }
  #region-panel { order: 3; }

  .stage {
    /* Portrait view — deliberately tall. The model is never reduced to a
       thumbnail on a phone. */
    min-height: min(68vh, 560px);
  }

  .status,
  .panel {
    padding: var(--s4);
  }

  .status-headline {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }

  .rail {
    height: 116px;
  }

  .evolution__header {
    align-items: flex-start;
  }

  .footer {
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  /* `display: contents` on the lead column breaks its own grid gap, so restore
     spacing on the children that are now direct grid items. */
  .status,
  #region-panel {
    margin: 0;
  }
}