.sport-hero { padding-block: clamp(60px, 7vw, 82px); }
.sport-hero .eyebrow { margin: 0 0 18px; }
.sport-hero .page-title { margin-bottom: 24px; font-size: clamp(3.1rem, 6vw, 5.6rem); }
.sport-hero .page-title em { color: var(--jade); font-style: normal; }
.sport-hero .lead { margin: 0; }
.sport-date-range { margin: 34px 0 0; color: var(--orange); font: 700 .78rem/1.5 ui-monospace, Menlo, monospace; letter-spacing: .08em; }
.sport-stats { color: var(--white); background: var(--forest); }
.sport-stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sport-stat-grid > div { grid-column: span 2; min-width: 0; padding: 34px 28px 39px; border-left: 1px solid #5b7365; }
.sport-stat-grid > div:first-child { padding-left: 0; border-left: 0; }
.sport-stat-grid > div:nth-child(n+4) { grid-column: span 3; border-top: 1px solid #5b7365; }
.sport-stat-grid > div:nth-child(4) { padding-left: 0; border-left: 0; }
.sport-stat-label { display: block; margin-bottom: 8px; color: var(--gold); font-size: .85rem; }
.sport-stat-grid strong { display: block; font: 500 clamp(2.8rem, 5vw, 4.5rem)/1.1 var(--serif); letter-spacing: -.05em; white-space: nowrap; }
.sport-stat-distance strong { font-size: clamp(2.5rem, 4.6vw, 4.2rem); }
.sport-stat-unit { display: block; margin-top: 2px; color: #cad9ce; font-size: .8rem; }
.sport-calendar-section { border-top: 0; }
.heatmap-hint { display: none; }
.sport-heatmaps { border-top: 1px solid var(--ink); }
.heatmap-year { padding: 24px 0 28px; border-bottom: 1px solid var(--line); }
.heatmap-year-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 21px; }
.heatmap-year-heading h3 { margin: 0; font: 500 2.2rem/1.2 var(--serif); letter-spacing: -.03em; }
.heatmap-year-heading span { color: var(--muted); font-size: .8rem; }
.heatmap-scroll { max-width: 100%; overflow-x: auto; padding-bottom: 10px; }
.heatmap-calendar { --heat-cell: 13px; --heat-gap: 3px; display: grid; gap: 7px; width: max-content; }
.heatmap-month-row, .heatmap-body { display: grid; grid-template-columns: 28px auto; gap: 11px; }
.heatmap-months { display: grid; grid-template-columns: repeat(var(--weeks), var(--heat-cell)); column-gap: var(--heat-gap); width: max-content; min-height: 19px; }
.heatmap-months span { align-self: start; white-space: nowrap; color: var(--muted); font: 700 .7rem/1.3 var(--sans); }
.heatmap-weekdays { display: grid; grid-template-rows: repeat(7, var(--heat-cell)); gap: var(--heat-gap); color: var(--muted); font: 700 .65rem/var(--heat-cell) var(--sans); }
.heatmap-weekdays span { text-align: right; }
.heatmap-grid { display: grid; grid-auto-flow: column; grid-template-columns: repeat(var(--weeks), var(--heat-cell)); grid-template-rows: repeat(7, var(--heat-cell)); gap: var(--heat-gap); width: max-content; }
.heatmap-day { display: block; width: var(--heat-cell); height: var(--heat-cell); padding: 0; border: 0; border-radius: 2px; }
button.heatmap-day { cursor: pointer; }
button.heatmap-day:hover, button.heatmap-day:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
button.heatmap-day.is-selected { outline: 2px solid var(--ink); outline-offset: 2px; }
.level-0 { background: #e0e5dc; }
.level-1 { --land-color: #c1d5c2; --swim-color: #bdd9ea; background: var(--land-color); }
.level-2 { --land-color: #91b69a; --swim-color: #8cb9d4; background: var(--land-color); }
.level-3 { --land-color: #5e8b6d; --swim-color: #5b92ba; background: var(--land-color); }
.level-4 { --land-color: #2b5740; --swim-color: #2c668f; background: var(--land-color); }
.heatmap-day.swim { background: var(--swim-color); }
.heatmap-day.mixed { background: linear-gradient(135deg, var(--land-color) 50%, var(--swim-color) 50%); }
.heatmap-readout { min-height: 24px; margin: 11px 0 0 39px; color: var(--muted); font-size: .8rem; }
.sport-day-detail { margin: 22px 0 0 39px; padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: #fffdf8; }
.sport-day-detail[hidden], .sport-route-stage[hidden] { display: none; }
.sport-day-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 9px; }
.sport-day-heading h4 { margin: 0; font: 500 1.55rem/1.3 var(--serif); }
.sport-day-heading span { color: var(--muted); font-size: .84rem; }
.sport-session { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.sport-session-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.sport-session-label strong { font-size: .95rem; }
.sport-session-label span, .sport-no-route { color: var(--muted); font-size: .8rem; }
.sport-route-button { padding: 6px 13px; border: 1px solid var(--jade); border-radius: 100px; background: transparent; color: var(--jade); font: 700 .8rem/1.4 var(--sans); cursor: pointer; }
.sport-route-button:hover, .sport-route-button:focus-visible, .sport-route-button.is-selected { background: var(--jade); color: var(--white); }
.sport-route-stage { padding-top: 12px; border-top: 1px solid var(--line); }
.sport-route-heading { margin: 0 0 10px; font-weight: 700; font-size: .9rem; }
.sport-route-map { height: min(65vh, 570px); min-height: 350px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #e8eee7; }
.sport-day-loading, .sport-day-error, .sport-route-loading, .sport-route-error { margin: 0; color: var(--muted); font-size: .85rem; }
.sport-route-map .leaflet-control-attribution { font-size: 11px; }
.sport-type-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 28px; color: var(--muted); font-size: .8rem; }
.sport-type-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sport-type-legend i { display: inline-block; width: 15px; height: 15px; border-radius: 2px; }
.sport-type-legend .type-land { background: #5e8b6d; }
.sport-type-legend .type-swim { background: #5b92ba; }
.sport-type-legend .type-mixed { background: linear-gradient(135deg, #5e8b6d 50%, #5b92ba 50%); }
.sport-scale { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 14px; color: var(--muted); font-size: .77rem; }
.sport-scale span:first-child { margin-right: 5px; }
.sport-scale span:last-child { margin-left: 5px; }
.sport-scale i { width: 13px; height: 13px; display: inline-block; border-radius: 2px; }
.sport-scale-detail { margin: 8px 0 0; color: var(--muted); font-size: .74rem; text-align: right; }
@media (max-width: 640px) {
  .sport-hero { padding-block: 60px 70px; }
  .sport-stat-grid > div { padding: 27px 11px 30px; }
  .sport-stat-grid strong { font-size: clamp(2rem, 8.5vw, 3rem); }
  .sport-stat-distance strong { font-size: clamp(1.75rem, 7vw, 2.6rem); }
  .sport-stat-label { font-size: .72rem; }
  .sport-stat-unit { font-size: .7rem; }
  .heatmap-hint { display: block; margin: 0 0 10px; color: var(--muted); font-size: .76rem; text-align: right; }
  .heatmap-calendar { --heat-cell: 12px; }
  .heatmap-year-heading h3 { font-size: 1.8rem; }
  .heatmap-readout { margin-left: 0; }
  .sport-day-detail { margin-left: 0; padding: 17px; }
  .sport-route-map { height: 440px; min-height: 0; }
  .sport-scale { justify-content: flex-start; }
  .sport-scale-detail { text-align: left; }
}