/* KOTH live results. Built on the site's own tokens (global.css) so the page
   reads as part of hardcoreharrys.com.au: near-black ground, dark cards,
   Inter, the site blue for accents. Volt is kept for the course line and the
   selected athlete only. Numbers that tick use tabular figures in fixed
   slots so nothing beside them moves. */
.kl { --volt:#D3FE18; --live:#ff3a3a; --card:var(--bg-card, #181818); --panel:var(--bg-section, #121212);
  --ink:var(--text-primary, #fff); --muted:var(--text-secondary, #b0b0b0); --line:var(--border, rgba(255,255,255,.06));
  background:var(--bg-primary, #080808); color:var(--ink); font-family:Inter,system-ui,sans-serif; padding-top:84px; }
.kl b, .kl-num, .kl-rank, .kl-bib { font-variant-numeric:tabular-nums; }

/* ---------- race bar */
.kl-bar { display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center; max-width:1200px; margin:0 auto; padding:12px 16px 16px; }
.kl-live { display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 10px; border-radius:999px; background:var(--card);
  border:1px solid rgba(255,255,255,.1); font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; line-height:1; }
.kl-dot { width:8px; height:8px; border-radius:50%; background:#666; }
.kl-live[data-state="live"] .kl-dot { background:var(--live); box-shadow:0 0 0 0 rgba(255,58,58,.6); animation:kl-pulse 1.6s infinite; }
@keyframes kl-pulse { 0% { box-shadow:0 0 0 0 rgba(255,58,58,.55); } 70% { box-shadow:0 0 0 8px rgba(255,58,58,0); } 100% { box-shadow:0 0 0 0 rgba(255,58,58,0); } }
@media (prefers-reduced-motion: reduce) { .kl-live[data-state="live"] .kl-dot { animation:none; } }
.kl-slot { display:inline-flex; align-items:baseline; gap:7px; white-space:nowrap; }
.kl-slot b { font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1; display:inline-block; text-align:right; min-width:2.2ch; }
.kl-slot-clock b { min-width:4.6ch; }
.kl-slot span { font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); line-height:1.2; }
.kl-updated { margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:12ch; text-align:right; }
.kl-updated.is-stale { color:#FFB547; }
@media (max-width:700px){ .kl { padding-top:72px; } .kl-bar { padding-top:12px; gap:8px 18px; } .kl-updated { margin-left:0; min-width:0; text-align:left; width:100%; } }

/* ---------- $100 sale strip (above the map): ticket, offer, countdown */
.kl-sale { position:relative; display:flex; align-items:center; gap:18px; max-width:1200px; margin:12px auto 0; padding:14px 18px; overflow:hidden;
  background:#0b0f15; border:1px solid rgba(255,255,255,.08); border-radius:16px; color:var(--ink); text-decoration:none; }
.kl-sale[hidden] { display:none; }
@media (max-width:1232px){ .kl-sale { margin-left:16px; margin-right:16px; } }
.kl-sale-k { font-size:11px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:var(--muted); line-height:1.2; }
.kl-sale-cta { margin-left:auto; flex:none; padding:11px 18px; border-radius:14px; background:var(--cta, #64ffe9); color:#0a0a0a; font-size:14px; font-weight:700; line-height:1; }
.kl-s-text { display:flex; flex-direction:column; gap:4px; min-width:0; }
.kl-s-text b { font-size:clamp(18px,2.4vw,26px); font-weight:900; letter-spacing:-.03em; line-height:1; text-transform:uppercase; }
.kl-s-ends { font-size:14px; color:var(--muted); }
.kl-s-ends [data-endsin] { color:var(--volt); font-weight:700; font-variant-numeric:tabular-nums; }
.kl-sale { padding:10px 18px 10px 10px; }
.kl-s-thumb { flex:none; width:150px; height:76px; object-fit:cover; border-radius:10px; transition:transform .4s ease; }
.kl-sale:hover .kl-s-thumb { transform:rotate(-2deg) scale(1.04); }
@media (max-width:700px){
  .kl-sale { flex-wrap:wrap; }
  .kl-s-thumb { width:110px; height:58px; }
  .kl-sale .kl-sale-cta { margin-left:0; width:100%; text-align:center; }
}

/* ---------- map */
.kl-map { position:relative; height:72vh; min-height:440px; overflow:hidden; }
@media (max-width:700px){ .kl-map { height:62vh; min-height:380px; } }
.kl-map canvas { display:block; width:100%; height:100%; touch-action:none; }
.kl-map.is-unavailable { height:auto; min-height:0; padding:24px 16px; }
.kl-nomap { max-width:1200px; margin:60px auto 0; color:var(--muted); font-size:15px; line-height:1.4; }
.map-overlay { position:absolute; inset:0; pointer-events:none; }
.map-leader { position:absolute; inset:0; overflow:visible; }
.map-leader line { stroke:#fff; stroke-width:1.5; }
.kl-search { position:absolute; top:14px; left:14px; width:min(320px, calc(100% - 28px)); z-index:6; } /* its list must sit over the 3D/2D/Reset buttons */
.kl-search input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(18,18,18,.92); color:#fff; font:600 15px/1.2 Inter,sans-serif; }
.kl-search ul { list-style:none; margin:6px 0 0; padding:4px; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:12px; }
.kl-search li button, .kl-chooser button { display:flex; gap:8px; align-items:center; width:100%; text-align:left; padding:9px 10px; background:none;
  border:0; color:#fff; font:600 14px/1.2 Inter,sans-serif; border-radius:8px; cursor:pointer; }
.kl-search li button span { margin-left:auto; color:var(--muted); font-weight:600; }
.kl-search li button:hover, .kl-search li button:focus, .kl-chooser button:hover, .kl-chooser button:focus { background:rgba(255,255,255,.07); }
.kl-tools { position:absolute; top:14px; right:14px; display:flex; gap:6px; z-index:3; }
.kl-tools button { padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(18,18,18,.92);
  color:#fff; font:700 12px/1 Inter,sans-serif; letter-spacing:1.2px; text-transform:uppercase; cursor:pointer; }
.kl-tools button[aria-pressed="true"] { background:#fff; color:#0a0a0a; }
@media (max-width:700px){ .kl-tools { top:66px; left:14px; right:auto; } }

/* the callout: small, dark, beside the dot, joined to it by the leader line */
.kl-callout { position:absolute; left:0; top:0; width:300px; padding:12px 14px 12px; border-radius:14px; pointer-events:auto;
  background:rgba(18,18,18,.96); border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.45); }
.kl-x { position:absolute; top:6px; right:6px; width:26px; height:26px; border:0; border-radius:8px; background:none; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; }
.kl-x:hover { background:rgba(255,255,255,.07); color:#fff; }
.kl-c-name { display:flex; gap:7px; align-items:center; padding-right:22px; font-size:16px; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.kl-c-mode { margin:3px 0 10px; font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); line-height:1.3; }
.kl-c-stats { display:grid; grid-auto-flow:column; grid-auto-columns:auto; justify-content:space-between; gap:6px 12px; }
.kl-c-stats b { display:block; font-size:16px; font-weight:800; line-height:1.1; }
.kl-c-stats span { white-space:nowrap; font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); line-height:1.2; }
.kl-c-rank { margin-top:9px; font-size:12px; font-weight:700; color:var(--volt); line-height:1.3; }
.kl-c-more { display:inline-block; margin-top:8px; font-size:13px; font-weight:700; color:var(--accent, #2ca3ff); text-decoration:none; }
.kl-c-more:hover { text-decoration:underline; }
.kl-chooser { position:absolute; left:0; top:0; z-index:4; width:210px; padding:4px; border-radius:12px;
  background:rgba(18,18,18,.97); border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.45); }
.kl-flag { width:20px; height:14px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.12); flex:none; vertical-align:-2px; }

/* ---------- store card (after the map): one link, real product photos */
.kl-store { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:18px; max-width:1200px;
  margin:28px auto 0; padding:24px; border-radius:20px; color:var(--ink); text-decoration:none; overflow:hidden;
  /* the same near-black and blue haze as the campaign photo, so card and photo read as one image */
  background:radial-gradient(55% 90% at 62% 55%, rgba(5,39,69,.55) 0%, rgba(5,39,69,0) 70%), #06090d;
  border:1px solid rgba(255,255,255,.06); }
.kl-store[hidden] { display:none; }
@media (max-width:1232px){ .kl-store { margin-left:16px; margin-right:16px; } }
@media (max-width:700px){ .kl-store { grid-template-columns:1fr; } }
.kl-store-text { display:flex; flex-direction:column; gap:6px; }
.kl-store-k { font-size:11px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:var(--muted); line-height:1.2; }
.kl-store b { font-size:clamp(28px,3.6vw,40px); font-weight:900; letter-spacing:-.04em; line-height:.95; text-transform:uppercase; }
.kl-store-text > span:not(.kl-store-k):not(.kl-store-cta) { color:var(--muted); font-size:15px; line-height:1.4; }
.kl-store-cta { align-self:flex-start; margin-top:8px; padding:12px 18px; border-radius:14px; background:var(--cta, #64ffe9); color:#0a0a0a; font-size:14px; font-weight:700; line-height:1; }
.kl-store-photos { position:relative; height:230px; }
/* Campaign photo: fills the right side and fades into the card on its left edge. */
.kl-store-photos[data-art="photo"] { margin:-24px -24px -24px 0; height:auto; align-self:stretch; min-height:300px; }
/* crop from near the top of the photo, so nobody's head is cut off; legs give way first */
.kl-campaign { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 6%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%); mask-image:linear-gradient(90deg, transparent 0, #000 22%); }
@media (max-width:700px){
  /* phones: the whole photo under the text, nobody cropped, only a short fade at the very top */
  .kl-store-photos[data-art="photo"] { margin:4px -24px -24px; min-height:0; height:auto; }
  .kl-campaign { position:static; display:block; width:100%; height:auto;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%); mask-image:linear-gradient(180deg, transparent 0, #000 9%); }
}

/* ---------- sections */
.kl-section { max-width:1200px; margin:0 auto; padding:44px 16px 8px; }
.kl-section h2 { font-size:clamp(28px,4vw,44px); font-weight:900; letter-spacing:-.04em; line-height:.95; text-transform:uppercase; margin:0 0 18px; }
.kl-empty { color:var(--muted); }

.kl-boards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .kl-boards { grid-template-columns:1fr; } }
.kl-board { background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; }
.kl-board h3 { margin:0 0 10px; font-size:12px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; line-height:1.1; color:var(--muted); }
.kl-board-top { display:block; color:#fff; text-decoration:none; margin-bottom:10px; }
.kl-board-top b { display:block; font-size:clamp(40px,6vw,64px); font-weight:900; letter-spacing:-.04em; line-height:.95; }
.kl-board-top span { display:inline-flex; gap:6px; align-items:center; font-size:14px; color:var(--muted); }
.kl-board ol { margin:0; padding-left:22px; color:var(--muted); }
.kl-board li { display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid rgba(255,255,255,.06); }
.kl-board li a { display:inline-flex; gap:6px; align-items:center; color:#fff; text-decoration:none; font-weight:600; }

.kl-controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.kl-tabs { display:flex; gap:6px; }
.kl-tabs button { padding:9px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:none; color:#fff; font:700 13px/1 Inter,sans-serif; cursor:pointer; }
.kl-tabs button[aria-selected="true"] { background:#fff; color:#0a0a0a; }
.kl-controls input { padding:9px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:var(--card); color:#fff; font:600 14px/1.2 Inter,sans-serif; min-width:200px; }
.kl-table-wrap { overflow-x:auto; }
.kl-table { width:100%; border-collapse:collapse; font-size:14px; }
.kl-table th { text-align:left; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); padding:8px; line-height:1.2; white-space:nowrap; }
.kl-table td { padding:11px 8px; border-top:1px solid rgba(255,255,255,.06); }
.kl-table tbody tr { cursor:pointer; }
.kl-table tbody tr:hover { background:rgba(255,255,255,.035); }
.kl-table .kl-num { text-align:right; }
.kl-rank { width:3.5em; font-weight:800; }
.kl-bib { width:4em; color:var(--muted); }
.kl-name { font-weight:700; }
.kl-name .kl-flag { margin-right:8px; }
.kl-sort { background:none; border:0; padding:0; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.kl-sort[aria-sort="ascending"] { color:#fff; text-decoration:underline; text-underline-offset:3px; }

.kl-ath-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-bottom:14px; }
.kl-ath-head h2 { margin:0; display:inline-flex; gap:10px; align-items:center; }
.kl-ath-meta { font-size:12px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
.kl-ath-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin-bottom:16px; }
.kl-ath-stats div { background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:14px; }
.kl-ath-stats b { display:block; font-size:20px; white-space:nowrap; font-weight:900; letter-spacing:-.02em; line-height:1.05; }
.kl-ath-stats span { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); line-height:1.2; }
.kl-chart { margin:0 0 18px; background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px; }
.kl-chart svg { width:100%; height:auto; font:600 11px Inter,sans-serif; fill:var(--muted); }
.kl-chart .kl-line { fill:none; stroke:var(--accent, #2ca3ff); stroke-width:2.5; }
.kl-chart circle { fill:#fff; }
.kl-chart .kl-avg { stroke:rgba(255,255,255,.35); stroke-dasharray:5 5; }
.kl-chart figcaption { font-size:12px; color:var(--muted); margin-top:6px; }
.kl-link { background:none; border:0; color:var(--accent, #2ca3ff); font:700 14px Inter,sans-serif; padding:0; text-decoration:underline; cursor:pointer; }
.kl-prev { padding-bottom:64px; }
.kl-prev a { color:var(--accent, #2ca3ff); font-weight:700; text-decoration:none; }
.kl-prev a:hover { text-decoration:underline; }


/* results: 20 at a time, detail opens under the row */
.kl-table tr.is-open td { background:rgba(255,255,255,.04); }
.kl-table tr.is-open .kl-name { color:var(--volt); }
.kl-table tr.kl-detail { cursor:default; }
.kl-table tr.kl-detail:hover { background:none; }
.kl-table tr.kl-detail > td { padding:4px 8px 22px; border-top:0; background:rgba(255,255,255,.04); }
.kl-det-mode { margin:2px 0 12px; font-size:12px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
.kl-more { display:flex; gap:8px; justify-content:center; padding:18px 0 0; }
.kl-more button { padding:11px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:var(--card); color:#fff; font:700 14px/1 Inter,sans-serif; cursor:pointer; }
.kl-more button:first-child { background:#fff; color:#0a0a0a; border-color:#fff; }

/* The site nav is transparent for the first 80 px of scroll, which lets it sit
   over the race bar here. On this page it is solid from the top. */
body:has(.kl) .sticky-nav { background:rgba(8,8,8,.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }

/* the one label on the map */
.map-sf { position:absolute; left:0; top:0; padding:5px 9px; border-radius:8px; background:#fff; color:#0a0a0a;
  font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; line-height:1; white-space:nowrap; pointer-events:none; }

/* phones: the race bar becomes a grid (live + updated, then three equal
   columns), and the pill docks along the bottom of the map */
@media (max-width:700px){
  .kl-bar { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px 10px; align-items:end; }
  .kl-live { grid-column:1 / 3; justify-self:start; }
  .kl-updated { grid-column:3; grid-row:1; align-self:center; text-align:right; width:auto; }
  .kl-slot { flex-direction:column; align-items:flex-start; gap:4px; }
  .kl-slot[hidden] { display:none; }
  .kl-slot b, .kl-slot-clock b { min-width:0; text-align:left; font-size:22px; }
  .kl-slot span { font-size:10px; white-space:normal; }
  .kl-callout { width:calc(100% - 24px); }
}
.kl-slot[hidden], .kl-callout[hidden], .kl-chooser[hidden] { display:none; }
.kl-short { display:none; }
@media (max-width:700px){
  .kl-table .kl-bib { display:none; }   /* still searchable, and shown in the athlete's detail */
  .kl-table th, .kl-table td { padding-left:6px; padding-right:6px; }
  .kl-long { display:none; } .kl-short { display:inline; }
  .kl-table tr.kl-detail > td { padding:4px 6px 18px; }
}

/* fastest-lap place: a small superscript chip at the top right of the time */
.kl-rank-chip { display:inline-block; margin-left:4px; padding:1px 5px; border-radius:999px; background:var(--volt); color:#0a0a0a;
  font-style:normal; font-size:9px; font-weight:800; line-height:1.35; letter-spacing:0; text-transform:none; vertical-align:top;
  position:relative; top:-3px; }
.kl-ath-stats .kl-rank-chip { font-size:10px; top:-2px; }


/* desktop pill: the fastest-lap chip sits in the gap above the time, so it
   takes no width and the three columns stay evenly spaced (phones keep it
   inline beside the time, where there is room) */
@media (min-width:701px){
  .kl-c-stats { margin-top:24px; }
  .kl-c-stats > div { position:relative; }
  .kl-c-stats .kl-rank-chip { position:absolute; left:0; top:-17px; margin:0; }
}

/* a little more air between the status line and the numbers on phones too */
.kl-c-mode { margin-bottom:12px; }

/* the crowd picker: five rows, then it scrolls inside itself */
.kl-chooser { width:220px; padding:0; overflow:hidden; }
.kl-chooser-h { padding:10px 12px 6px; font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); }
.kl-chooser-list { max-height:calc(5 * 38px); overflow-y:auto; overscroll-behavior:contain; padding:0 4px 6px; }
.kl-chooser-list button { height:38px; }

/* first-visit gesture hint */
.kl-hint { position:absolute; left:50%; bottom:22px; z-index:4; display:flex; align-items:center; gap:10px; padding:11px 16px;
  border-radius:999px; background:rgba(18,18,18,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12); color:var(--muted); font-size:13px; line-height:1.2; white-space:nowrap; pointer-events:none;
  opacity:0; transform:translate(-50%, 8px); transition:opacity .5s ease, transform .5s ease; }
.kl-hint.is-on { opacity:1; transform:translate(-50%, 0); }
.kl-hint b { color:#fff; font-weight:700; }
.kl-hint span { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.3); }
@media (max-width:700px){ .kl-hint { bottom:16px; font-size:12px; padding:10px 14px; gap:8px; } }

/* a crowd of runners: one bubble with the count */
.map-cluster { position:absolute; left:0; top:0; min-width:30px; height:30px; padding:0 8px; border-radius:999px; pointer-events:auto; cursor:pointer;
  background:#fff; color:#0a0a0a; border:3px solid rgba(8,8,8,.9); box-shadow:0 0 0 6px rgba(255,255,255,.14);
  font:800 12px/24px Inter,sans-serif; font-variant-numeric:tabular-nums; }
.map-cluster[hidden] { display:none; }
.map-cluster:hover { box-shadow:0 0 0 8px rgba(255,255,255,.22); }

/* athlete detail: six tiles in a row on a computer at any width, three rows of two on a phone */
.kl-ath-stats { grid-template-columns:repeat(6, minmax(0, 1fr)); }
@media (max-width:700px){ .kl-ath-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:701px) and (max-width:1000px){ .kl-ath-stats b { font-size:17px; } .kl-ath-stats div { padding:12px 10px; } }

/* lap list: fastest and slowest tagged; on phones the rows are padded in from the edges */
.kl-lap-tag { margin-left:8px; padding:2px 7px; border-radius:999px; font-style:normal; font-size:10px; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase; vertical-align:1px; }
.kl-lap-tag.is-fast { background:var(--volt); color:#0a0a0a; }
.kl-lap-tag.is-slow { background:rgba(255,99,99,.16); color:#ff8a8a; }

/* lap table: Lap, Split 1, Split 2, Lap time - kept to a sensible width so
   there is no gulf in the middle; fastest and slowest rows tinted */
.kl-lapt { width:100%; border-collapse:collapse; margin:0 0 6px; font-size:14px; font-variant-numeric:tabular-nums; }
.kl-lapt th { text-align:left; font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); padding:8px 14px; }
.kl-lapt td { padding:10px 14px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); white-space:nowrap; }
.kl-lapt td:first-child { color:#fff; }
.kl-lapt td b { color:#fff; font-weight:700; }
.kl-lapt th.kl-num, .kl-lapt td.kl-num { text-align:right; }
.kl-lapt tr.is-fast td { background:rgba(211,254,24,.07); }
.kl-lapt tr.is-slow td { background:rgba(255,99,99,.07); }
.kl-lapt tr.is-fast td:first-child { box-shadow:inset 3px 0 0 var(--volt); }
.kl-lapt tr.is-slow td:first-child { box-shadow:inset 3px 0 0 #ff6363; }
@media (max-width:700px){ .kl-lapt th, .kl-lapt td { padding:9px 8px; font-size:13px; } .kl-lapt th { font-size:9px; } .kl-lap-tag { display:block; width:max-content; margin:4px 0 0; } }
.kl-all { display:inline-block; margin:6px 22px 14px 0; }

/* chart: snap-to-point hover / tap */
.kl-chart .kl-hit { fill:transparent; cursor:crosshair; touch-action:pan-y; }
.kl-chart .kl-xtick { stroke:rgba(255,255,255,.25); }
.kl-chart .kl-guide { stroke:rgba(255,255,255,.25); stroke-dasharray:3 4; }
.kl-chart .kl-ring { fill:var(--volt); stroke:#0a0a0a; stroke-width:2; }
.kl-chart .kl-tip rect { fill:#fff; }
.kl-chart .kl-tip-lap { fill:#555; font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
.kl-chart .kl-tip-time { fill:#0a0a0a; font-size:14px; font-weight:800; }


/* lap table extras: against their own average, and that lap's place in the field */
.kl-lapt .is-under { color:var(--volt); font-weight:700; }
.kl-lapt .is-over { color:#ff8a8a; }
.kl-lapt small { color:var(--muted); font-size:11px; }
@media (max-width:700px){ .kl-lapt .kl-wide { display:none; } }

/* results rows stay on ONE line: long names end in an ellipsis, and on a
   phone the status is a coloured dot instead of words */
.kl-table td.kl-name { max-width:0; width:100%; }
.kl-name-in { display:flex; align-items:center; gap:8px; min-width:0; }
.kl-name-in .kl-flag { margin-right:0; }
.kl-name-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* stacking on the map: count bubbles and the start/finish label sit behind
   the athlete pill and the crowd list */
.map-sf { z-index:1; transform-origin:50% 100%; }
.map-cluster { z-index:2; } /* above the start/finish label, below the pills */
.kl-callout, .kl-chooser { z-index:3; }
@media (max-width:700px){ .kl-chooser { width:calc(100% - 24px); } }

/* the crowd list lives in the map's overlay, which ignores taps; the list itself must take them */
.kl-chooser { pointer-events:auto; }

/* Status column: red out, amber awaiting, blue still in (slow pulse) */
.kl-table .kl-status { width:3.8em; text-align:center; }
.kl-sdot { display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle; }
.kl-sdot.is-out { background:#ff5a5a; }
.kl-sdot.is-wait { background:#FFB547; }
.kl-sdot.is-in { background:var(--accent, #2ca3ff); animation:kl-breathe 3.2s ease-in-out infinite; }
@keyframes kl-breathe { 0%, 100% { box-shadow:0 0 0 0 rgba(44,163,255,.55); opacity:1; } 50% { box-shadow:0 0 0 5px rgba(44,163,255,0); opacity:.7; } }
@media (prefers-reduced-motion: reduce) { .kl-sdot.is-in { animation:none; } }

/* phones: the status dot sits in the Laps cell, so the names keep their room */
.kl-table .kl-sdot-in { display:none; }
@media (max-width:700px){
  .kl-table th.kl-status, .kl-table td.kl-status { display:none; }
  .kl-table .kl-sdot-in { display:inline-block; margin-right:7px; vertical-align:1px; }
}
.kl-table td.kl-num { white-space:nowrap; }

/* the ticket block at the foot of the page: show, don't tell - the picture, then the button */
.kl-tix { display:flex; flex-direction:column; align-items:center; gap:18px; max-width:1200px; margin:8px auto 72px;
  color:var(--ink); text-decoration:none; }
.kl-tix[hidden] { display:none; }
@media (max-width:1232px){ .kl-tix { margin-left:16px; margin-right:16px; } }
.kl-tix-img { display:block; width:100%; height:auto; border-radius:20px; border:1px solid rgba(255,255,255,.06); transition:transform .4s ease; }
.kl-tix:hover .kl-tix-img { transform:translateY(-3px); }
.kl-tix .kl-sale-cta { margin:0; padding:14px 26px; font-size:16px; }
.kl-prev { padding-bottom:24px; }

/* Watch it live: the runners on the hill, full width, with a frosted-glass play button */
.kl-watch { position:relative; display:block; max-width:1200px; margin:44px auto 0; aspect-ratio:21 / 8; min-height:260px;
  border-radius:20px; overflow:hidden; color:var(--ink); text-decoration:none; background:#06090d; border:1px solid rgba(255,255,255,.06); }
.kl-watch[hidden] { display:none; }
@media (max-width:1232px){ .kl-watch { margin-left:16px; margin-right:16px; } }
.kl-w-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.kl-watch:hover .kl-w-bg { transform:scale(1.03); }
.kl-watch::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(6,9,13,.92) 0%, rgba(6,9,13,.55) 45%, rgba(6,9,13,.08) 100%); }
.kl-w-over { position:absolute; left:32px; top:50%; transform:translateY(-50%); z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.kl-w-over b { font-size:clamp(34px,5vw,60px); font-weight:900; letter-spacing:-.04em; line-height:.95; text-transform:uppercase; }
.kl-w-live { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:6px; background:#ff3a3a; color:#fff;
  font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; line-height:1; }
.kl-w-live i { width:6px; height:6px; border-radius:50%; background:currentColor; animation:kl-pulse-w 1.6s ease-in-out infinite; }
@keyframes kl-pulse-w { 0%, 100% { opacity:1; } 50% { opacity:.3; } }
/* the play button: solid red, the triangle drawn so it balances in the
   middle of the circle (no nudging) */
.kl-w-play { position:absolute; right:24px; bottom:24px; z-index:1; width:56px; height:56px; border-radius:50%; /* bottom-right corner */
  display:grid; place-items:center; background:#ff3a3a; box-shadow:0 12px 32px rgba(0,0,0,.45); transition:transform .3s ease; }
.kl-w-play svg { display:block; width:32px; height:32px; fill:#fff; }
.kl-watch:hover .kl-w-play { transform:scale(1.07); }
@media (prefers-reduced-motion: reduce) { .kl-w-live i { animation:none; } }
.kl-watch.is-soon .kl-w-live { background:rgba(255,255,255,.14); }
.kl-watch.is-soon .kl-w-live i { display:none; }
@media (max-width:700px){
  .kl-watch { aspect-ratio:4 / 3; }
  .kl-w-over { left:20px; }
  .kl-w-play { right:16px; bottom:16px; width:46px; height:46px; }
  .kl-w-play svg { width:27px; height:27px; }
}

/* On a computer the three promo cards (store, watch it live, tickets) share
   one height, so the page reads as a set. Phones keep their own stacking. */
@media (min-width:701px){
  .kl-store { --promo-h:300px; height:var(--promo-h); box-sizing:border-box; }
  .kl-store-photos[data-art="photo"] { min-height:0; height:calc(100% + 48px); }
  .kl-watch { aspect-ratio:auto; min-height:0; height:300px; }
  /* the whole ticket photo on the right (nothing cropped), fading into the
     card's dark ground on the left, button on the left - like the store card */
  .kl-tix { position:relative; display:block; height:300px; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.06); background:#0b0f15; }
  .kl-tix-img { position:absolute; top:0; right:0; width:auto; height:100%; border:0; border-radius:0;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%); mask-image:linear-gradient(90deg, transparent 0, #000 22%); }
  .kl-tix:hover .kl-tix-img { transform:scale(1.02); }
  .kl-tix .kl-sale-cta { position:absolute; left:28px; top:50%; transform:translateY(-50%); z-index:1; }
}
@media (max-width:700px){ .kl-sale .kl-s-text { flex:1 1 0; } }