/* §13 sport load modifier. Tokens only — no colour or size literals (§12.2).
 *
 * Restraint is deliberate. §12.5b spends boldness in one place (the tier ramp
 * and the active-session accent), so a heavy day is marked with the warn line
 * already used for "outside the landmark range" rather than with a new hue: it
 * is the same kind of statement, made about the same bars. */

/* ---- the per-day field ---- */

.sport-field {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--card-pad);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

.sport-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

.sport-note {
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.sport-segs {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

/* §12.4: this is touched with the same hands that are about to touch the set
   row, so the floor is 48px on every instance of the control. */
.sport-seg {
  flex: 1 1 0;
  min-height: var(--tap);
  padding: 0 var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-bottom-color: var(--edge-shade);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}

/* §12.5a: the selected state is an edge, not a fill — a filled accent block
   reads as a button, an edge reads as "you are here". */
.sport-seg--on {
  border-color: var(--accent-line);
  border-bottom: var(--edge-active) solid var(--accent);
  color: var(--text);
}

.sport-seg--heavy.sport-seg--on {
  border-color: var(--warn-line);
  border-bottom-color: var(--warn);
  color: var(--warn);
}

/* ---- the plan editor's week strip ---- */

.sport-week {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--card-pad);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

.sport-week > .vol-head { min-height: var(--tap); }

/* Wraps rather than scrolling: seven fixed columns at 360px would be 45px of
   select each, and §12.4 forbids the horizontal scroll that fixing that with a
   min-width would produce. */
.sport-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--s-2);
  padding-top: var(--s-2);
}

.sport-day {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--inset-1);
}

.sport-day--today {
  border-left: var(--edge-active) solid var(--accent);
}

.sport-day--heavy {
  border-color: var(--warn-line);
}

.sport-day-name {
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--ls-caps);
}

.sport-day-date {
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.sport-sel {
  min-height: var(--tap);
  width: 100%;
}

/* ---- the §13 warning, and its quiet mid-session form ---- */

.sport-warn {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--card-pad);
  background: var(--surface);
  border: var(--hair) solid var(--warn-line);
  border-left: var(--edge-active) solid var(--warn);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
}

.sport-warn-head {
  color: var(--warn);
  font-weight: 650;
}

.sport-warn-sub {
  color: var(--text-dim);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
}

/* One line, no control (§12.3 — exactly one obvious thing to touch). */
.sport-line {
  margin: var(--s-2) 0;
  color: var(--warn);
  font-size: var(--fs-label);
}

/* ---- what the cap looks like on the §9 bars ---- */

.vol-note--sport {
  color: var(--warn);
}

/* The window the cap replaced, drawn behind the live one so the reduction reads
   as a reduction rather than as a band that was always this size. */
.vol-window--was {
  background: var(--surface-alt);
  border: var(--hair) dashed var(--warn-line);
  border-radius: var(--r-pill);
}

.vol-row--capped .vol-window {
  background: var(--warn-line);
}

.vol-range { display: flex; flex-direction: column; align-items: flex-end; }

.vol-was {
  color: var(--text-dim);
  font-size: var(--fs-label);
  text-decoration: line-through;
}

/* ---- the raised RIR floor on the set row and the preview ---- */

.preview-rir {
  color: var(--warn);
  font-size: var(--fs-label);
}

.active-target--sport { color: var(--warn); }

/* Marked, never disabled — §9.2's "warn, never block" applies to every
   recommendation in this app, and the floor is a recommendation. */
.chip--below-floor {
  border-style: dashed;
  opacity: 0.55;
}