/* Sports and teams (S11). The signature is the athlete's line: the injured side as a share of the other, week by week, against two thresholds. */

@media (min-width: 1024px) {
  .sp-head .page-head__words { max-width: 760px; }
  .sp-head .page-head__aside { width: 420px; }
}
.sp-head .t-display, .sp-title { text-wrap: wrap; }
.sp-title { letter-spacing: var(--tracking-display); }

/* ---------- The athlete's line. ---------- */
.sp-line { padding-top: 24px; display: flex; align-items: flex-start; gap: 64px; }
.sp-line__fig { width: 460px; flex-shrink: 0; background: #FFFFFF; }
.sp-line__fig img { width: 100%; height: auto; }
.sp-line__words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sp-line__pills { display: flex; flex-wrap: wrap; gap: 12px; }

/* The chart keeps its board geometry and scales with its column; labels stay 12 mono, readings 17. */
.sp-chart { position: relative; width: 100%; container-type: inline-size; }
.sp-chart--wide { max-width: 640px; aspect-ratio: 640 / 380; margin-top: 8px; }
.sp-chart--phone { display: none; aspect-ratio: 358 / 246; }
.sp-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sp-chart > span { position: absolute; white-space: nowrap; }
.sp-chart__th { color: var(--color-foreground); }
.sp-chart__reading { padding: 0 4px; background: #FFFFFF; color: var(--color-primary); font-family: var(--font-mono); font-size: 17px; line-height: 24px; font-weight: 500; }
.sp-chart__pen { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-chart__words { font-size: max(17px, 3.75cqw); line-height: 1.1667; }

.sp-chart--wide .sp-chart__th--95 { left: 9.375%; top: 8.42%; }
.sp-chart--wide .sp-chart__th--90 { left: 9.375%; top: 22.1%; }
.sp-chart--wide .sp-chart__x { top: 88.42%; }
.sp-chart--wide .sp-chart__x--day { left: 6.25%; }
.sp-chart--wide .sp-chart__x--mid { left: 50.31%; }
.sp-chart--wide .sp-chart__x--end { right: 2.34%; }
.sp-chart--wide .sp-chart__reading--first { left: 4.375%; top: 79.47%; }
.sp-chart--wide .sp-chart__reading--last { left: 90.94%; top: 3.68%; }
.sp-chart--wide .sp-chart__words { left: 65.625%; top: 48.42%; }

.sp-chart--phone .sp-chart__th--95 { left: 0; top: 4.88%; }
.sp-chart--phone .sp-chart__th--90 { left: 0; top: 21.95%; }
.sp-chart--phone .sp-chart__x { top: 91.87%; }
.sp-chart--phone .sp-chart__x--day { left: 7.82%; }
.sp-chart--phone .sp-chart__x--mid { left: 53.91%; }
.sp-chart--phone .sp-chart__x--end { right: 0; }
.sp-chart--phone .sp-chart__reading { padding: 0; background: none; }
.sp-chart--phone .sp-chart__reading--first { left: 0; top: 73.98%; }
.sp-chart--phone .sp-chart__reading--last { left: 88.27%; top: 0.81%; }
.sp-chart--phone .sp-chart__words { left: 46.93%; top: 56.1%; font-size: max(17px, 5.31cqw); line-height: 1.263; }

/* ---------- Teams and events, and Optimise. ---------- */
.sp-teams { padding-top: 96px; display: flex; align-items: flex-start; gap: 96px; }
.sp-teams__list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sp-rows { padding-top: 8px; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--color-border); }
.sp-row:first-child { border-top-color: var(--color-foreground); }
.sp-row:last-child { border-bottom: 1px solid var(--color-border); }
.sp-row .pill { align-self: center; }
.sp-row__year { flex-shrink: 0; }
.sp-opt { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.sp-opt__action { padding-top: 8px; }

@media (max-width: 1279px) {
  .sp-line { gap: 48px; }
  .sp-line__fig { width: min(460px, 38%); }
  .sp-teams { gap: 64px; }
  .sp-opt { width: 360px; }
}

@media (max-width: 1023px) {
  .sp-line { padding-top: 8px; flex-direction: column; gap: 40px; }
  .sp-line__fig { width: min(420px, 100%); }
  .sp-line__words { width: 100%; }
  .sp-teams { padding-top: 72px; flex-direction: column; align-items: stretch; gap: 56px; }
  .sp-opt { width: auto; max-width: 640px; }
}

@media (max-width: 767px) {
  .sp-head__line.t-muted { color: var(--color-foreground); font-weight: 600; }
  .sp-line { padding-top: 0; gap: 32px; }
  .sp-line__fig { width: 100%; }
  .sp-line__words { gap: 12px; }
  .sp-chart--wide { display: none; }
  .sp-chart--phone { display: block; margin-top: 12px; }
  .sp-line__pills { gap: 8px; padding-top: 16px; }

  .sp-teams { padding-top: 40px; padding-bottom: 0; gap: 0; }
  .sp-teams__list { gap: 12px; padding-bottom: 48px; }
  .sp-row { align-items: flex-start; line-height: 24px; }
  .sp-row__year { line-height: 24px; }
  .sp-row .pill { align-self: flex-start; height: 22px; padding: 0 8px; font-size: 12px; margin-top: 1px; }
  .sp-opt { max-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 40px var(--gutter) 48px; background: var(--color-surface); gap: 12px; }
  .sp-opt__action .btn { display: flex; width: 100%; }
}