/* =============================================================================
   RACE RESULTS — APP STYLESHEET
   Styles specific to the race results app.
   All colour values are CSS custom properties from ../styles/main.css.
   Components in sections 2–11 that appear in other apps should be promoted
   to main.css (the trigger is two apps needing the same pattern).
   ============================================================================= */


/* =============================================================================
   SECTION 1 — ACCENT COLOUR OVERRIDES
   All elements that take the app accent (pink = sport) in one place.
   ============================================================================= */

.page-title .accent      { color: var(--color-pink); }

/* Segment left-border colours */
.split-row--swim  { border-left-color: var(--color-lime); }
.split-row--t     { border-left-color: var(--color-text-muted); }
.split-row--bike  { border-left-color: var(--color-gold); }
.split-row--run   { border-left-color: var(--color-pink); }

/* Segment row labels match their left-border colour */
.split-row--swim .split-row__label { color: var(--color-lime); }
.split-row--bike .split-row__label { color: var(--color-gold); }
.split-row--run  .split-row__label { color: var(--color-pink); }

/* Large chip times — pink on both home card and dashboard */
.event-card__time   { color: var(--color-pink); }
.dash-summary__time { color: var(--color-pink); }

/* Position numbers (44th, 2nd) within the summary card */
.dash-summary__positions strong { color: var(--color-pink); }

/* Section headings — lime to match the Blenheim phase-header convention */
.dash-section-heading { color: var(--color-lime); }
.section-card__title  { color: var(--color-lime); }

/* Active pill uses pink */
.pill--active { color: var(--color-pink); border-color: var(--color-pink); }

/* Percentile table — Rob's row accent */
.pct-table__rob td { color: var(--color-text); font-weight: 500; }


/* =============================================================================
   SECTION 2 — HOME SCREEN
   ============================================================================= */

/* Year group heading between event card clusters */
.year-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-lg) 0 var(--space-sm);
  padding-left: 2px;
}

/* Event card — extends .card from main.css */
.event-card {
  display: block;           /* override flex on .card for vertical layout */
  padding: var(--space-md);
  text-decoration: none;
}

.event-card__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

/* Sport + distance pills below the event name */
.event-card__badges {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}

/* Sport / distance category badges on event cards */
.sport-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(var(--color-pink-rgb), 0.15);
  color: var(--color-pink);
  border: 0.5px solid rgba(var(--color-pink-rgb), 0.35);
  white-space: nowrap;
}

.dist-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(var(--color-text-muted-rgb), 0.12);
  color: var(--color-text-muted);
  border: 0.5px solid rgba(var(--color-text-muted-rgb), 0.25);
  white-space: nowrap;
}

.event-card__meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.event-card__result {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.event-card__time {
  font-family: var(--font-display);
  font-size: 22px;
  /* colour set in Section 1 */
}

.event-card__positions {
  font-size: 13px;
  color: var(--color-text-muted);
}


/* =============================================================================
   SECTION 3 — DASHBOARD HEADER
   ============================================================================= */

/* Breadcrumb — row of badges (sport type, distance category) */
.dash-badges {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

/* Event title — Playfair, smaller than page-title */
.dash-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
}

.dash-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* Summary row: chip time, positions, bib */
.dash-summary {
  background: rgba(var(--color-bg-card-rgb), 0.85);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dash-summary__time {
  font-family: var(--font-display);
  font-size: 38px;
  /* colour set in Section 1 */
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.dash-summary__positions {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.dash-summary__positions strong {
  /* colour set in Section 1 */
}

.dash-summary__bib {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Results URL buttons */
.results-links {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.results-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: rgba(var(--color-bg-card-rgb), 0.85);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}

.results-link-btn:hover {
  border-color: rgba(var(--color-text-muted-rgb), 0.5);
  color: var(--color-text);
}


/* =============================================================================
   SECTION 4 — SPLITS LIST (expandable rows)
   ============================================================================= */

/* Promotion candidate: if another app needs an expandable list, move to main.css */

.splits-list {
  background: rgba(var(--color-bg-card-rgb), 0.85);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-bottom: var(--space-md);
}

/* Each tappable segment row */
.split-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px var(--space-md);
  border-left: 3px solid transparent;
  border-bottom: 0.5px solid var(--color-border);
  cursor: pointer;
  /* Reset button styles — rows rendered as divs but still keyboard-accessible */
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  color: inherit;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.split-row:last-child   { border-bottom: none; }
.split-row:hover        { background: rgba(var(--color-bg-rgb), 0.3); }
.split-row:active       { background: rgba(var(--color-bg-rgb), 0.5); }

/* Non-interactive total row at the bottom */
.split-row--total {
  cursor: default;
  background: rgba(var(--color-bg-rgb), 0.35);
}
.split-row--total:hover { background: rgba(var(--color-bg-rgb), 0.35); }

.split-row__label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  width: 48px;
  flex-shrink: 0;
}

.split-row__dist {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
}

.split-row__time {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-text);
  flex-shrink: 0;
  min-width: 68px;
}

/* Total row gets a slightly larger time */
.split-row--total .split-row__time { font-size: 26px; }

.split-row__note {
  font-size: 13px;
  color: var(--color-text-muted);
  flex: 1;
}

.split-row__chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  transition: transform var(--transition);
}

/* Rotate chevron when row is expanded */
.split-row[aria-expanded="true"] .split-row__chevron {
  transform: rotate(180deg);
}


/* =============================================================================
   SECTION 5 — SEGMENT DETAIL (expanded content within a split row)
   ============================================================================= */

.split-detail {
  border-bottom: 0.5px solid var(--color-border);
  background: rgba(var(--color-bg-rgb), 0.25);
  padding: var(--space-md);
}

.split-detail:last-child { border-bottom: none; }

/* Key–value pairs within segment detail */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-md);
}

.detail-pair {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-pair__key {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.detail-pair__val {
  font-size: 16px;
  color: var(--color-text);
}

/* Strava external link button */
.strava-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #FC4C02;   /* Strava brand orange — intentional hardcode, not a design token */
  background: rgba(252, 76, 2, 0.08);
  border: 0.5px solid rgba(252, 76, 2, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  margin-top: var(--space-sm);
}

.strava-btn:hover {
  background: rgba(252, 76, 2, 0.14);
  border-color: rgba(252, 76, 2, 0.4);
}

/* Lap chart canvas wrapper */
.lap-chart-wrap {
  position: relative;
  height: 160px;
  margin-bottom: var(--space-md);
  margin-top: var(--space-sm);
}

/* Lap data table */
.lap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

.lap-table th {
  text-align: right;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 6px;
  border-bottom: 0.5px solid var(--color-border);
}

.lap-table th:first-child { text-align: left; }

.lap-table td {
  text-align: right;
  padding: 6px 6px;
  border-bottom: 0.5px solid rgba(var(--color-border-rgb), 0.5);
  color: var(--color-text);
}

.lap-table td:first-child {
  text-align: left;
  color: var(--color-text-muted);
  font-weight: 500;
}

.lap-table tr:last-child td { border-bottom: none; }

/* Highlight fastest lap */
.lap-table tr.lap--fastest td { color: var(--color-lime); }
.lap-table tr.lap--fastest td:first-child { color: var(--color-lime); }


/* =============================================================================
   SECTION 6 — COLLAPSIBLE SECTION CARDS (Conditions, Percentiles, Notes)
   ============================================================================= */

/* Promotion candidate: similar pattern in blenheim week-card toggles */

.section-card {
  background: rgba(var(--color-bg-card-rgb), 0.85);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-bottom: var(--space-md);
}

.section-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md);
  background: none;
  border: none;
  font-family: var(--font-body);
  color: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition);
}

.section-card__header:hover { background: rgba(var(--color-bg-rgb), 0.2); }

.section-card__title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* colour set in Section 1 */
}

.section-card__chevron {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.section-card__header[aria-expanded="true"] .section-card__chevron {
  transform: rotate(180deg);
}

.section-card__body {
  padding: 0 var(--space-md) var(--space-md);
  border-top: 0.5px solid var(--color-border);
}

/* Conditions layout */
.cond-block {
  margin-top: var(--space-md);
}

.cond-block__heading {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.cond-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: 6px 0;
  border-bottom: 0.5px solid rgba(var(--color-border-rgb), 0.5);
  font-size: 14px;
}

.cond-row:last-of-type { border-bottom: none; }

.cond-row__key {
  font-size: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.cond-row__val {
  color: var(--color-text);
  text-align: right;
}

.cond-note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  font-style: italic;
}


/* =============================================================================
   SECTION 7 — PILL FILTERS (percentile section)
   ============================================================================= */

.pill-group {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

/* Discipline pills scroll horizontally on narrow screens */
.pill-group--scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar — visual noise without value */
  scrollbar-width: none;
}
.pill-group--scroll::-webkit-scrollbar { display: none; }

.pill {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 20px;
  border: 0.5px solid var(--color-border);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.pill:hover {
  color: var(--color-text);
  border-color: rgba(var(--color-text-muted-rgb), 0.5);
}

/* .pill--active colour set in Section 1 */
.pill--active {
  background: rgba(var(--color-pink-rgb), 0.1);
}


/* =============================================================================
   SECTION 8 — HISTOGRAM CHART (percentile section)
   ============================================================================= */

.hist-wrap {
  margin: var(--space-sm) 0;
}

.hist-canvas-wrap {
  position: relative;
  height: 160px;
}

/* Stats line beneath histogram */
.hist-stats {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
  font-size: 13px;
  color: var(--color-text-muted);
}

.hist-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hist-stat__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.hist-stat__swatch--rob    { background: var(--color-pink); }
.hist-stat__swatch--median { background: var(--color-text-muted); }

.hist-stat strong { color: var(--color-text); }


/* =============================================================================
   SECTION 9 — PERCENTILE TABLE
   ============================================================================= */

.pct-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--space-md);
}

.pct-table {
  width: 100%;
  min-width: 380px;
  border-collapse: collapse;
  font-size: 12px;
}

.pct-table th {
  text-align: right;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 4px 6px;
  border-bottom: 0.5px solid var(--color-border);
  white-space: nowrap;
}

.pct-table th:first-child { text-align: left; }

.pct-table td {
  text-align: right;
  padding: 7px 6px;
  border-bottom: 0.5px solid rgba(var(--color-border-rgb), 0.5);
  color: var(--color-text-muted);
}

.pct-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--color-text-muted);
}

.pct-table tr:last-child td { border-bottom: none; }

/* Percentile values colour-coded by quality */
.pct--top5  { color: var(--color-lime);  font-weight: 500; }
.pct--top10 { color: var(--color-gold);  font-weight: 500; }
.pct--top25 { color: var(--color-text);  font-weight: 500; }

.pct-footnote {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 0.5px solid rgba(var(--color-border-rgb), 0.5);
  line-height: 1.5;
}


/* =============================================================================
   SECTION 10 — NOTES
   ============================================================================= */

.notes-blockquote {
  border-left: 3px solid var(--color-pink);
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: rgba(var(--color-pink-rgb), 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
}


/* =============================================================================
   SECTION 11 — SECTION HEADING (between dashboard sections)
   ============================================================================= */

.dash-section-heading {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* colour set in Section 1 */
  margin: var(--space-lg) 0 var(--space-sm);
  padding-left: 2px;
}