.results-page { min-width: 0; box-sizing: border-box; }
.results-page .body-heading { flex-wrap: wrap; gap: 1rem; }
.results-page .body-heading h1 { min-width: 0; overflow-wrap: anywhere; }
.results-summary, .results-filters { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; align-items: end; }
.results-filters label { display: grid; gap: .35rem; }
.results-table-card { min-width: 0; max-width: 100%; overflow: hidden; margin-top: 1rem; }
.results-page .tabulator { max-width: 100%; }
.results-page .tabulator-cell a { color: var(--color-accent); }
.results-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 1rem 0; }
.results-cards .card { padding: 1rem; margin: 0; display: grid; gap: .4rem; }
.results-cards strong { font-size: 1.35rem; }
.results-chart { width: 100%; min-width: 0; height: 340px; }
.results-load-status:empty { display: none; }
@media (max-width: 600px) {
  .results-filters label { flex: 1 1 130px; min-width: 0; }
  .results-page .body-heading h1 { font-size: 1.5rem; }
  .results-summary { gap: .5rem 1rem; }
}

/* Keep the dropdown anchored to its toggle despite shared header form rules. */
.results-runner-name { position: relative; display: inline-block; padding-left: 20px; }
.results-runner-flag { position: absolute; top: 50%; left: 0; width: 14px; height: 10px; margin-top: -5px; object-fit: cover; border-radius: 1px; box-shadow: 0 0 0 1px rgba(127, 127, 127, .35); }
/* Status icons and colors match the tracking live table. */
.results-status { display: inline-flex; align-items: center; gap: 6px; }
.results-status-icon { display: inline-flex; flex: 0 0 auto; }
.results-status-icon svg { height: 18px; width: auto; fill: currentColor; }
.results-status-icon--finished { color: var(--color-success); }
.results-status-icon--dnf { color: var(--color-danger); }
.results-status-icon--dns { color: var(--color-pink); }
.results-status-icon--dsq { color: var(--color-secondary-darker); }
.results-penalty { color: var(--color-danger); font-weight: 700; }
.results-page .tab-button__wrapper { flex-wrap: wrap; }

.results-summary > span + span::before { content: " || "; white-space: pre; }
.results-summary { column-gap: 0; }
.results-summary > strong { margin-inline-end: .5rem; }

.results-runner-header { margin-block: 1rem; }
.results-runner-metrics { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-block: 1rem; }
.results-runner-metrics dt { font-size: .9rem; }
.results-runner-metrics dd { margin: .25rem 0 0; font-size: 1.8rem; font-weight: 700; }
.results-runner-metrics small { font-size: 1rem; font-weight: 400; }





/* H2H: runner A uses the accent, runner B a warm contrast. */
.h2h { min-width:0; --h2h-a:var(--color-accent); --h2h-b:#f0a43a; }
.light .h2h { --h2h-b:#c46a12; }
.h2h-a { color:var(--h2h-a); }
.h2h-b { color:var(--h2h-b); }
.h2h-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.h2h-eyebrow { color:var(--color-accent); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; }
.h2h-mark { font-size:2.5rem; font-style:italic; font-weight:900; color:var(--color-accent); }
.h2h-muted { color:var(--color-secondary-darker); font-size:.85rem; }
.h2h-replay { display:flex; align-items:center; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; margin-top:2.5rem; padding:1.5rem; border-radius:12px; border:1px solid var(--color-primary-light);
  background:linear-gradient(100deg, color-mix(in srgb,var(--h2h-a) 16%,var(--color-primary-lighter)), var(--color-primary-lighter) 50%, color-mix(in srgb,var(--h2h-b) 16%,var(--color-primary-lighter))); }
.h2h-replay h3 { margin:.25rem 0; }
.h2h-empty,.h2h-coming { padding:2rem; border:1px dashed var(--color-primary-light); border-radius:12px; text-align:center; margin-top:1.5rem; }
.h2h-section { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--color-primary-light); }
.h2h-details .h2h-section { margin-top:2rem; padding-top:0; border-top:0; }
.h2h-section > h3 { font-size:1.25rem; margin-bottom:.35rem; }

/* Scoreboard */
.h2h-board { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; border-radius:16px; overflow:hidden;
  background:linear-gradient(100deg, color-mix(in srgb,var(--h2h-a) 22%,var(--color-primary-lighter)) 0%, var(--color-primary-lighter) 45%, var(--color-primary-lighter) 55%, color-mix(in srgb,var(--h2h-b) 22%,var(--color-primary-lighter)) 100%);
  border:1px solid var(--color-primary-light); }
.h2h-athlete { --side:var(--h2h-a); min-width:0; display:grid; justify-items:center; align-content:start; gap:.4rem; padding:1.75rem 1rem; text-align:center; overflow-wrap:anywhere; transition:opacity .2s; }
.h2h-athlete--b { --side:var(--h2h-b); grid-column:3; grid-row:1; }
.h2h-board--a .h2h-athlete--b,.h2h-board--b .h2h-athlete--a { opacity:.72; }
.h2h-athlete h3 { font-size:1.5rem; line-height:1.15; }
.h2h-athlete h3 span { display:block; font-size:1rem; font-weight:400; }
.h2h-avatar { position:relative; width:96px; height:96px; border-radius:50%; background:color-mix(in srgb,var(--side) 25%,var(--color-primary)); color:var(--side); display:grid; place-items:center; font-size:1.9rem; font-weight:800; overflow:hidden; box-shadow:0 0 0 3px var(--side); }
.h2h-athlete.is-winner .h2h-avatar { box-shadow:0 0 0 3px var(--side),0 0 28px color-mix(in srgb,var(--side) 55%,transparent); }
.h2h-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.h2h-crown { display:inline-block; padding:.15rem .6rem; border-radius:999px; background:var(--side); color:var(--color-primary); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.h2h-time { font-size:2rem; font-weight:900; font-variant-numeric:tabular-nums; color:var(--side); }
.h2h-place { font-weight:700; }
.h2h-center { grid-column:2; grid-row:1; display:grid; place-content:center; justify-items:center; gap:.35rem; padding:1rem .5rem; }
.h2h-versus { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--color-primary); border:2px solid var(--color-secondary-darker); font-weight:900; font-style:italic; font-size:1.2rem; }
.h2h-gap { font-size:1.4rem; font-weight:900; font-variant-numeric:tabular-nums; }

/* Sector wins tug of war */
.h2h-tug { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.4rem 1rem; margin:1.25rem 0 0; }
.h2h-tug > strong { font-size:2rem; font-weight:900; font-variant-numeric:tabular-nums; }
.h2h-tug__bar { height:14px; border-radius:999px; background:var(--h2h-b); overflow:hidden; }
.h2h-tug__bar span { display:block; height:100%; width:var(--share); background:var(--h2h-a); border-right:3px solid var(--color-primary); }
.h2h-tug__label { grid-column:1 / -1; text-align:center; color:var(--color-secondary-darker); font-size:.8rem; }

/* Key moments */
.h2h-moments { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.75rem; margin-top:1.75rem; }
.h2h-moment { --side:var(--color-secondary-darker); padding:1rem; border-radius:12px; background:var(--color-primary-lighter); border:1px solid var(--color-primary-light); border-top:3px solid var(--side); display:grid; gap:.3rem; align-content:start; min-width:0; overflow-wrap:anywhere; }
.h2h-moment--a { --side:var(--h2h-a); } .h2h-moment--b { --side:var(--h2h-b); }
.h2h-moment .h2h-eyebrow { color:var(--color-secondary-darker); font-size:.68rem; }
.h2h-moment strong { font-size:1.6rem; font-weight:900; color:var(--side); font-variant-numeric:tabular-nums; line-height:1.1; }
.h2h-moment p { font-size:.82rem; color:var(--color-secondary-darker); }

/* Charts: SVG draws lines in a stretched 0-100 box; dots and axis labels are HTML. */
.h2h-plot { position:relative; height:280px; margin:1rem 0 2.25rem 3.5rem; }
.h2h-plot svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.h2h-plot svg * { vector-effect:non-scaling-stroke; }
.h2h-plot__y { position:absolute; right:calc(100% + .5rem); transform:translateY(-50%); font-size:.72rem; font-weight:700; color:var(--color-secondary-darker); white-space:nowrap; font-variant-numeric:tabular-nums; }
.h2h-plot__y.h2h-a { color:var(--h2h-a); } .h2h-plot__y.h2h-b { color:var(--h2h-b); }
.h2h-plot__x { position:absolute; top:calc(100% + .6rem); transform:translateX(-50%); font-size:.72rem; color:var(--color-secondary-darker); white-space:nowrap; }
.h2h-grid { stroke:var(--color-primary-light); stroke-width:1; stroke-dasharray:3 4; }
.h2h-zero { stroke:var(--color-secondary-darker); stroke-width:1.5; }
.h2h-fill-a { fill:color-mix(in srgb,var(--h2h-a) 28%,transparent); }
.h2h-fill-b { fill:color-mix(in srgb,var(--h2h-b) 28%,transparent); }
.h2h-line { fill:none; stroke:var(--color-secondary); stroke-width:2.5; stroke-linejoin:round; }
.h2h-line--a { stroke:var(--h2h-a); stroke-width:3; } .h2h-line--b { stroke:var(--h2h-b); stroke-width:3; }
.h2h-dot { position:absolute; width:12px; height:12px; padding:0; transform:translate(-50%,-50%); border-radius:50%; border:2.5px solid var(--color-secondary-darker); background:var(--color-primary); cursor:pointer; z-index:1; }
.h2h-dot--a { border-color:var(--h2h-a); } .h2h-dot--b { border-color:var(--h2h-b); }
.h2h-dot--change { width:20px; height:20px; border-width:3px; background:var(--color-secondary); }
.h2h-dot:hover,.h2h-dot:focus-visible { transform:translate(-50%,-50%) scale(1.35); outline:none; z-index:3; }
.h2h-dot::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); min-width:11rem; padding:.5rem .7rem; border-radius:8px; background:var(--color-primary-dark); color:var(--color-secondary); border:1px solid var(--color-primary-light); box-shadow:0 6px 18px rgba(0,0,0,.35); font-size:.72rem; font-weight:600; line-height:1.45; text-align:left; white-space:pre-line; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .12s; }
.h2h-dot--start::after { left:-4px; transform:none; } .h2h-dot--end::after { left:auto; right:-4px; transform:none; }
.h2h-dot:hover::after,.h2h-dot:focus::after { opacity:1; visibility:visible; }
.h2h-legend { display:flex; gap:1.5rem; flex-wrap:wrap; font-size:.85rem; font-weight:700; margin-top:.5rem; }

/* Sector duel */
.h2h-duel { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.35rem; max-width:860px; }
.h2h-duel__row { display:grid; grid-template-columns:5.5rem 1fr 5.5rem; grid-template-areas:"label label label" "ta track tb" ". margin ."; align-items:center; gap:.15rem .6rem; padding:.55rem .6rem; border-radius:8px; font-variant-numeric:tabular-nums; }
.h2h-duel__row.is-decisive { background:var(--color-primary-lighter); outline:1px solid var(--color-secondary-darker); }
.h2h-duel__row.is-empty { opacity:.5; }
.h2h-duel__label { grid-area:label; font-size:.85rem; }
.h2h-duel__label em { font-style:normal; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:.05rem .45rem; border-radius:999px; background:var(--color-secondary); color:var(--color-primary); margin-left:.35rem; }
.h2h-duel__time { font-size:.85rem; font-weight:700; color:var(--color-secondary-darker); }
.h2h-duel__time--a { grid-area:ta; text-align:right; }
.h2h-duel__time--b { grid-area:tb; }
.h2h-duel__time.h2h-a { color:var(--h2h-a); } .h2h-duel__time.h2h-b { color:var(--h2h-b); }
.h2h-duel__track { grid-area:track; display:grid; grid-template-columns:1fr 1fr; height:14px; }
.h2h-duel__half { display:flex; background:var(--color-primary-lighter); }
.h2h-duel__half--a { justify-content:flex-end; border-right:2px solid var(--color-secondary-darker); border-radius:999px 0 0 999px; }
.h2h-duel__half--b { border-radius:0 999px 999px 0; }
.h2h-duel__bar { display:block; min-width:4px; height:100%; }
.h2h-duel__half--a .h2h-duel__bar { background:var(--h2h-a); border-radius:999px 0 0 999px; }
.h2h-duel__half--b .h2h-duel__bar { background:var(--h2h-b); border-radius:0 999px 999px 0; }
.h2h-duel__margin { grid-area:margin; text-align:center; font-size:.75rem; font-weight:800; color:var(--color-secondary-darker); }

/* Tale of the tape */
.h2h-tape { max-width:860px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem 1rem; margin-top:1rem; font-variant-numeric:tabular-nums; }
.h2h-tape__name { font-weight:800; overflow-wrap:anywhere; }
.h2h-tape__name.h2h-b { text-align:right; }
.h2h-tape__label { text-align:center; font-size:.8rem; color:var(--color-secondary-darker); max-width:9rem; }
.h2h-tape__side { --side:var(--h2h-a); display:flex; align-items:center; gap:.6rem; justify-content:flex-end; min-width:0; }
.h2h-tape__side--b { --side:var(--h2h-b); justify-content:flex-start; }
.h2h-tape__side strong { white-space:nowrap; font-size:1rem; }
.h2h-tape__side.is-better strong { color:var(--side); }
.h2h-tape__bar { height:10px; border-radius:999px; background:color-mix(in srgb,var(--side) 35%,transparent); max-width:60%; flex:none; }
.h2h-tape__side.is-better .h2h-tape__bar { background:var(--side); }

/* Detailed data */
.h2h-details { margin-top:2.5rem; border-top:1px solid var(--color-primary-light); padding-top:1rem; }
.h2h-details summary { cursor:pointer; font-weight:700; color:var(--color-accent); }
.h2h-table-wrap { overflow-x:auto; }
.h2h-table { width:100%; font-variant-numeric:tabular-nums; }
.h2h-table th,.h2h-table td { padding:.85rem .6rem; border-bottom:1px solid var(--color-primary-light); text-align:center; }
.h2h-table th:first-child { text-align:left; width:34%; }
.h2h-table thead { font-size:.8rem; color:var(--color-secondary-darker); }
.h2h-table td { white-space:nowrap; font-weight:700; }
.h2h-table td small { display:block; font-size:.65rem; }
.h2h-table .h2h-win { color:var(--color-success); background:color-mix(in srgb,var(--color-success) 9%,transparent); }
.h2h-table .h2h-loss { color:var(--color-danger); }
.h2h-difference { font-size:.8rem; color:var(--color-secondary-darker); }

@media(max-width:600px) {
  .h2h-board { grid-template-columns:1fr 1fr; }
  .h2h-athlete { padding:1.25rem .5rem; } .h2h-athlete--b { grid-column:2; }
  .h2h-center { grid-column:1 / -1; grid-row:2; grid-auto-flow:column; padding:.5rem; border-top:1px solid var(--color-primary-light); }
  .h2h-versus { width:40px; height:40px; font-size:.9rem; }
  .h2h-avatar { width:64px; height:64px; font-size:1.3rem; }
  .h2h-athlete h3 { font-size:1.1rem; } .h2h-time { font-size:1.35rem; }
  .h2h-moments { grid-template-columns:1fr 1fr; } .h2h-moment strong { font-size:1.25rem; }
  .h2h-duel__row { grid-template-columns:4.5rem 1fr 4.5rem; padding:.45rem .25rem; }
  .h2h-plot { height:220px; margin-left:2.75rem; }
  .h2h-tape { gap:.5rem; } .h2h-tape__label { max-width:6rem; font-size:.7rem; }
  .h2h-table th,.h2h-table td { padding:.7rem .35rem; font-size:.75rem; }
}

/* Statistics tab */
.results-stats { min-width:0; --stats-line:color-mix(in srgb,var(--color-secondary-darker) 35%,transparent); }
.results-stats__status.tracking-live-race-summary { padding:0; min-height:0; margin:1rem 0 1.5rem; }
.results-stats__status .tracking-live-race-summary__item { flex:1 1 130px; width:auto; height:61.5px; padding:9px 12px; border:1px solid var(--stats-line); }
.results-stats__status .tracking-live-race-summary__item--total { color:var(--color-accent); }
.results-stats__status .tracking-live-race-summary__icon svg { height:26px; }
.results-stats__status .tracking-live-race-summary__field strong { font-size:1.25rem; }
.results-stats__status .tracking-live-race-summary__field span { font-size:.75rem; }

.results-stats__hero { display:grid; grid-template-columns:auto 1fr; gap:1.5rem 2.5rem; align-items:center; padding:1.5rem; border-radius:14px; border:1px solid var(--stats-line); background:var(--color-primary-lighter); }
.results-stats__ring { --rate:0; position:relative; width:150px; height:150px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--color-success) calc(var(--rate) * 1%), color-mix(in srgb,var(--color-danger) 70%,transparent) 0); }
.results-stats__ring::before { content:""; position:absolute; inset:14px; border-radius:50%; background:var(--color-primary-lighter); }
.results-stats__ring > div { position:relative; display:grid; justify-items:center; text-align:center; gap:.15rem; max-width:105px; }
.results-stats__ring strong { font-size:1.6rem; font-weight:900; font-variant-numeric:tabular-nums; }
.results-stats__ring span { font-size:.7rem; color:var(--color-secondary-darker); line-height:1.2; }
.results-stats__hero-body { min-width:0; display:grid; gap:1rem; }
.results-stats__share { display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--stats-line); }
.results-stats__share-part { height:100%; }
.results-stats__share-part + .results-stats__share-part { border-left:2px solid var(--color-primary-lighter); }
.results-stats__share-part--finished { background:var(--color-success); }
.results-stats__share-part--dnf { background:var(--color-danger); }
.results-stats__share-part--dsq { background:var(--color-secondary-darker); }
.results-stats__legend { display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; font-size:.8rem; color:var(--color-secondary-darker); margin-top:-.4rem; }
.results-stats__key::before { content:""; display:inline-block; width:.65rem; height:.65rem; border-radius:50%; margin-right:.4rem; vertical-align:-.05rem; }
.results-stats__key--finished::before { background:var(--color-success); }
.results-stats__key--dnf::before { background:var(--color-danger); }
.results-stats__key--dsq::before { background:var(--color-secondary-darker); }
.results-stats__times { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:0; }
.results-stats__times dt { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-secondary-darker); }
.results-stats__times dd { margin:.3rem 0 0; font-size:1.6rem; font-weight:900; font-variant-numeric:tabular-nums; }
.results-stats__times div:first-child dd { color:var(--color-accent); }
.results-stats__warning { margin-top:1rem; padding:.75rem 1rem; border-left:3px solid var(--color-warning); background:color-mix(in srgb,var(--color-warning) 10%,transparent); border-radius:6px; }

.results-stats__section { margin-top:2.5rem; }
.results-stats__section h2,.results-stats__chart-card h3 { font-size:1.2rem; margin-bottom:1rem; }
.results-stats__spread { position:relative; height:44px; margin:0 .5rem; }
.results-stats__spread::before { content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--stats-line); }
.results-stats__spread-whisker { position:absolute; top:50%; height:18px; transform:translateY(-50%); border-left:2px solid var(--color-accent); border-right:2px solid var(--color-accent); background:linear-gradient(var(--color-accent),var(--color-accent)) center/100% 3px no-repeat; }
.results-stats__spread-box { position:absolute; top:4px; bottom:4px; border-radius:6px; background:color-mix(in srgb,var(--color-accent) 35%,transparent); border:2px solid var(--color-accent); }
.results-stats__spread-median { position:absolute; top:0; bottom:0; width:4px; margin-left:-2px; border-radius:2px; background:var(--color-secondary); }
.results-stats__spread-ends { display:flex; justify-content:space-between; font-size:.75rem; color:var(--color-secondary-darker); margin:.35rem .5rem 0; font-variant-numeric:tabular-nums; }
.results-stats__percentiles { list-style:none; padding:0; margin:1.25rem 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.6rem; }
.results-stats__percentile { display:grid; gap:.25rem; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--stats-line); background:var(--color-primary-lighter); }
.results-stats__percentile span { font-size:.72rem; font-weight:700; color:var(--color-secondary-darker); }
.results-stats__percentile strong { font-size:1.15rem; font-variant-numeric:tabular-nums; }
.results-stats__percentile.is-box { border-color:var(--color-accent); }
.results-stats__percentile.is-median { border-color:var(--color-secondary); box-shadow:inset 0 3px 0 var(--color-secondary); }

.results-stats__charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2.5rem; }
.results-stats__chart-card { min-width:0; padding:1.25rem 1.25rem .5rem; border-radius:14px; border:1px solid var(--stats-line); background:var(--color-primary-lighter); }
.results-stats__chart-card .results-chart { height:300px; }
.results-stats__notes { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--stats-line); display:grid; gap:.3rem; font-size:.78rem; color:var(--color-secondary-darker); }

@media (max-width: 900px) {
  .results-stats__charts { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .results-stats__hero { grid-template-columns:1fr; justify-items:center; padding:1.25rem; }
  .results-stats__hero-body { width:100%; }
  .results-stats__times dd { font-size:1.15rem; }
  .results-stats__percentiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .results-stats__percentile.is-median { grid-column:1 / -1; }
}

/* The logged-in runner's own row: accent tint plus an accent bar on the left. */
.results-page .tabulator .tabulator-row.results-row--me,
.results-page .tabulator .tabulator-row.results-row--me:hover { background-color: var(--color-accent-dark); }
.results-page .tabulator .tabulator-row.results-row--me .tabulator-cell:first-child { box-shadow: inset 4px 0 0 var(--color-accent); }
.results-page .tabulator .tabulator-row.results-row--me .tabulator-cell { font-weight: 700; }
.results-page .tabulator .tabulator-row.results-row--me .tabulator-frozen { background-color: var(--color-accent-dark); }
/* Tabulator mounts tooltips on <body>; match the site's .tooltip__content look. */
.tabulator-tooltip { background-color: var(--color-secondary-darker); color: var(--color-primary); padding: 10px;
  border: 0; border-radius: 6px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); font-size: 0.875rem; max-width: 300px; white-space: pre-line; }