/* 25manna live results – beta view. Loaded only on /beta pages; everything is scoped under .beta. */
.beta {
  --ink: #15191E; --ink-2: #2A3037; --ink-3: #3A414A; --muted: #5A626B; --faint: #8A929B;
  --ground: #F2F3EF; --card: #FFFFFF; --line: #E2E4E0; --line-2: #EEEFEB; --chip: #EDEEEA;
  --flag: #F26B1D; --accent: #C2410C; --tint: #FFF4EC; --tint-line: #F6C9A8; --up: #1D4ED8; --down: #6B7280;
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--ground); color: var(--ink);
  font-family: 'Barlow', system-ui, sans-serif; font-size: 16px; line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.beta *, .beta *::before, .beta *::after { box-sizing: border-box; }
.beta a { color: inherit; text-decoration: none; }
@media (hover: hover) { .beta a:hover { color: var(--accent); } }
.beta h1, .beta h2, .beta h3 { font-family: 'Barlow Condensed', system-ui, sans-serif; margin: 0; line-height: 1.05; }
.beta h1 { font-weight: 700; font-size: 40px; }
.beta h2 { font-weight: 600; font-size: 24px; }
.beta h3 { font-weight: 600; font-size: 20px; }
.beta .cond { font-family: 'Barlow Condensed', system-ui, sans-serif; }
.beta .wrap { max-width: 1280px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.beta .muted { color: var(--muted); }
.beta .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.beta main { flex: 1; width: 100%; }

/* top bar */
.beta .b-top { background: var(--ink); color: #FFF; }
.beta .b-top .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 12px; padding-bottom: 12px; }
.beta .brand { display: flex; align-items: center; gap: 10px; color: #FFF; }
.beta .brand-logo { display: block; width: auto; height: 40px; flex: none; }
.beta .brand b { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: .02em; }
.beta .brand span { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 19px; color: #B9BFC6; }
.beta .b-nav { display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.beta .b-nav::-webkit-scrollbar { display: none; }
.beta .b-nav a { flex: none; padding: 10px 12px; border-radius: 8px; color: #D5D9DD; font-size: 15px; white-space: nowrap; }
@media (max-width: 700px) {
  /* the menu scrolls sideways on a phone; the fade on the right shows there is more */
  .beta .b-nav { margin-right: -16px; padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
}
@media (hover: hover) { .beta .b-nav a:hover { color: #FFF; background: var(--ink-2); } }
.beta .b-nav a.on { background: var(--ink-2); color: #FFF; font-weight: 600; }

/* page header band */
.beta .band { background: var(--ink); color: #FFF; padding-bottom: 22px; }
.beta .band .sub { color: #B9BFC6; font-size: 15px; margin-top: 6px; }
@media (hover: hover) { .beta .band a:hover { color: #FFF; } }
.beta .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.beta .tile { background: var(--ink-2); border-radius: 12px; padding: 10px 14px; }
.beta .tile .k { font-size: 13px; color: #B9BFC6; }
.beta .tile .v { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.1; }
.beta .tile .n { font-size: 12px; color: #F9B98A; }
.beta .progress { height: 10px; background: var(--ink-2); border-radius: 5px; overflow: hidden; }
.beta .progress > span { display: block; height: 100%; background: var(--flag); border-radius: 5px; }
.beta .progress-text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 14px; color: #D5D9DD; margin-top: 6px; }
.beta .legtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.beta .legtabs a { min-width: 64px; min-height: 44px; padding: 4px 10px; border-radius: 8px; background: var(--ink-2); color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.1; }
.beta .legtabs a small { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 11px; opacity: .85; }
.beta .legtabs a.on { background: var(--flag); color: var(--ink); }
/* generic cards and lists */
.beta .section { display: flex; flex-direction: column; gap: 10px; }
.beta .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; padding: 0 4px; }
.beta .section-head a { font-size: 14px; font-weight: 600; color: var(--accent); }
.beta .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.beta .card.hl { border-color: var(--flag); box-shadow: 0 0 0 1px var(--flag); }
.beta .rows > * { border-top: 1px solid var(--line-2); }
.beta .rows > *:first-child { border-top: 0; }
.beta .lrow { display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 50px; }
.beta .lrow.followed, .beta .followed { background: var(--tint); }
/* A leg's not-ranked rows: bib, team, runners in (or status). */
.beta .lrow .lb { font-size: 13px; min-width: 32px; }
.beta .lrow .ln { font-weight: 600; }
.beta .lrow .lc { font-size: 13px; min-width: 64px; text-align: right; }
.beta .lrow .ls { font-size: 13px; }
.beta .bib { min-width: 42px; height: 28px; padding: 0 6px; border-radius: 6px; background: var(--chip); display: inline-flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 17px; flex: none; }
.beta .name { flex: 1; min-width: 0; font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Team names wrap instead of being cut, so the club's team number (OK Linné 1 or 2) always shows. */
.beta .team { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; text-overflow: clip; }
.beta .num { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 18px; }
.beta .up { color: var(--up); font-weight: 600; }
.beta .down { color: var(--down); font-weight: 600; }
.beta .same { color: #B9BFC6; }
.beta .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: start; }
.beta .note { font-size: 13px; line-height: 1.5; color: var(--muted); padding: 0 4px; }
.beta .empty { padding: 16px; color: var(--muted); font-size: 15px; }
.beta .pad { padding-top: 22px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 24px; }

/* search box */
.beta .search { display: flex; align-items: center; gap: 10px; background: #FFF; border-radius: 12px; padding: 0 6px 0 14px; height: 50px; }
.beta .search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 17px; color: var(--ink); background: transparent; }
.beta .search button { height: 38px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--ink); color: #FFF; font: inherit; font-weight: 600; cursor: pointer; }
.beta .search button:focus-visible, .beta .search input:focus-visible { outline: 2px solid var(--flag); outline-offset: 2px; }

/* follow star (uses today's toggleFavorite(), which switches the class between star and nostar) */
.beta .star, .beta .nostar { width: 44px; height: 44px; flex: none; display: inline-block; cursor: pointer; border-radius: 999px;
  background: no-repeat center/22px url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F26B1D' stroke='%23F26B1D' stroke-width='1.5' stroke-linejoin='round'%3e%3cpath d='M12 3l2.8 5.9 6.2.8-4.6 4.3 1.2 6.2L12 17.2 6.4 20.2l1.2-6.2L3 9.7l6.2-.8z'/%3e%3c/svg%3e"); filter: none; vertical-align: middle; }
.beta .nostar { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A929B' stroke-width='1.5' stroke-linejoin='round'%3e%3cpath d='M12 3l2.8 5.9 6.2.8-4.6 4.3 1.2 6.2L12 17.2 6.4 20.2l1.2-6.2L3 9.7l6.2-.8z'/%3e%3c/svg%3e"); }
.beta .band .nostar { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D5D9DD' stroke-width='1.5' stroke-linejoin='round'%3e%3cpath d='M12 3l2.8 5.9 6.2.8-4.6 4.3 1.2 6.2L12 17.2 6.4 20.2l1.2-6.2L3 9.7l6.2-.8z'/%3e%3c/svg%3e"); }

/* home: followed team cards */
/* Home's own part, filled by beta.js: the followed teams' cards and "Last visited", spaced as the section's other blocks. */
.beta .follow-cards, .beta [data-last-visited] { display: flex; flex-direction: column; gap: 10px; }
.beta .follow-cards:empty, .beta [data-last-visited][hidden] { display: none; }
.beta .fcard { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.beta .fcard .top { display: flex; align-items: center; gap: 12px; }
.beta .fcard .top .name { font-weight: 600; font-size: 17px; white-space: normal; }
.beta .fcard .bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.beta .fcard .pos { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 36px; line-height: .9; }
.beta .fcard .status { font-size: 13px; color: var(--muted); text-align: right; }
/* Legs in progress: one row each; the box turns warmer when someone is coming in. */
.beta .fcard .live-legs { display: flex; flex-direction: column; background: var(--tint); border-radius: 10px; overflow: hidden; }
.beta .fcard .live-legs.coming { background: #FFE9D9; box-shadow: inset 3px 0 0 var(--flag); }
.beta .fcard .live { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 14px; }
.beta .fcard .live + .live { border-top: 1px solid var(--tint-line); }
.beta .fcard .live > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.beta .fcard .live .what { font-weight: 600; }
.beta .fcard .live .sub { font-size: 13px; color: var(--muted); }
.beta .fcard .live .sub.hot { color: var(--accent); font-weight: 600; }
.beta .fcard .live .sub.warn, .beta .tl-card .warn { color: #B42318; font-weight: 600; font-size: 13px; }
.beta .fcard .live-legs .more { padding: 6px 12px 8px 28px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--tint-line); }
.beta .fcard .trend { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.beta .fcard .trend svg { color: var(--ink); flex: none; }
.beta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--flag); flex: none; }
.beta .leglinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.beta .leglinks a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.beta .leglinks a b { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 20px; }
.beta .leglinks a span { font-size: 13px; color: var(--muted); }

/* leg results */
.beta .res { display: grid; grid-template-columns: 52px 46px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 0 16px; min-height: 52px; }
.beta .res .p { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; }
.beta .res .d { font-size: 13px; }
.beta .res .t { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 19px; text-align: right; }
.beta .res .who { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.beta .res .who .b { font-size: 13px; color: var(--muted); min-width: 30px; }
.beta .res .who .name { font-weight: 600; }
/* Leg results: the start number in its own column before the team name. */
.beta .res.lg { grid-template-columns: 52px 46px 40px minmax(0, 1fr) auto; grid-template-areas: "p d b n t"; }
.beta .res.lg > .p { grid-area: p; }
.beta .res.lg > .d { grid-area: d; }
.beta .res.lg > .b { grid-area: b; font-size: 13px; color: var(--muted); }
.beta .res.lg > .n { grid-area: n; font-weight: 600; }
.beta .res.lg > .t { grid-area: t; }
.beta .res-head > .t { text-align: right; }
.beta .res-head > .n, .beta .res-head > .b, .beta .res-head > .p { font-family: inherit; font-weight: 600; font-size: 12px; color: var(--muted); }
.beta .res-head { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); min-height: 36px; }
.beta .runner-dots { font-size: 15px; letter-spacing: 2px; }

/* team page */
/* Bib, name and follow star stay on one row: a long name wraps in place, the bib and star stay at its first line. */
/* The star follows right after the name; bib and star are centred on the name's first line (--lh). */
.beta .team-title { --lh: 44px; display: flex; align-items: flex-start; gap: 12px; flex: 1 1 320px; min-width: 0; }
.beta .team-title h1 { flex: 0 1 auto; min-width: 0; line-height: var(--lh); }
.beta .team-title .bib, .beta .team-title .star, .beta .team-title .nostar { flex: none; }
.beta .team-title .bib { margin-top: calc((var(--lh) - 36px) / 2); }
.beta .team-title .star, .beta .team-title .nostar { margin: calc((var(--lh) - 44px) / 2) 0 0 -6px; }
@media (max-width: 640px) { .beta .team-title { --lh: 38px; } }
.beta .team-title .bib { background: #FFF; color: var(--ink); min-width: 52px; height: 36px; font-size: 22px; font-weight: 700; }
.beta .team-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.beta .team-layout > .side { flex: 1 1 340px; max-width: 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* One column (where side and legs would wrap anyway): Now first, then the legs, and Race so far after the result list. */
@media (max-width: 923px) {
  .beta .team-layout { flex-direction: column; align-items: stretch; }
  .beta .team-layout > .side { display: contents; }
  .beta .team-layout .now { order: 0; }
  .beta .team-layout > .legs { order: 1; flex-basis: auto; }
  .beta .team-layout .race { order: 2; }
}
/* Race so far: position after each leg (line, 1st at the top) over time behind the leader (bars), sharing the leg axis. */
.beta .race { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.beta .race-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.beta .race-head h2 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 22px; }
.beta .race-head .muted { font-size: 13px; }
.beta .race-k { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.beta .race-pos { position: relative; height: 100px; }
.beta .race-pos svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.beta .race-pos polyline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.beta .race-pos .pt { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid #FFF; box-sizing: border-box; background: var(--ink); }
.beta .race-pos .pt.last { background: var(--flag); }
.beta .race-pos .pl { position: absolute; transform: translate(-50%, -24px); font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; white-space: nowrap; }
.beta .race-pos .pl.last { color: var(--accent); }
.beta .race-gap { display: grid; align-items: end; height: 88px; border-bottom: 1px solid #D5D9DD; }
.beta .race-gap > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; min-width: 0; }
.beta .race-gap .gl { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 11px; white-space: nowrap; color: #3D444C; }
.beta .race-gap .gl.lead { color: var(--accent); }
/* Many legs: the gaps sit in two fixed rows at the top, alternating, so neighbouring labels never meet. */
.beta .race-gap.stagger { height: 108px; }
.beta .race-gap.stagger > div { justify-content: space-between; }
.beta .race-gap.stagger .gl { line-height: 13px; }
.beta .race-gap.stagger .gl:not(.up) { margin-top: 13px; }
.beta .race-gap .bar { display: block; width: 60%; max-width: 22px; border-radius: 3px 3px 0 0; background: var(--ink-3); }
.beta .race-gap .bar.hot { background: var(--flag); }
.beta .race-legs { display: grid; font-size: 11px; color: var(--muted); text-align: center; }
.beta .race-axis { font-size: 11px; color: var(--faint); text-align: center; margin-top: -4px; }
/* Team spread: every control of the parallel legs on one axis, the changeovers as named ticks. */
.beta .race-note { font-size: 12px; color: var(--muted); line-height: 1.35; }
.beta .race-gapnow { font-size: 14px; font-weight: 600; }
.beta .spread { position: relative; height: 120px; margin-top: 4px; border-bottom: 1px solid #D5D9DD; }
.beta .spread .sband { position: absolute; top: 0; bottom: 0; padding: 2px 4px; font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.beta .spread .sband.alt { background: #F6F7F4; }
.beta .spread .tick { position: absolute; top: 0; bottom: -6px; width: 1px; background: #C9CDD1; }
.beta .spread .ymax { position: absolute; right: 0; top: 0; font-size: 10px; color: var(--faint); }
.beta .spread svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.beta .spread path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.beta .spread path.dashed { stroke: var(--flag); stroke-dasharray: 4 3; }
.beta .spread .sp { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink); }
.beta .spread .sp.open { background: #FFF; border: 2px solid var(--flag); box-sizing: border-box; width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.beta .spread .sl { position: absolute; transform: translate(-50%, -20px); font-size: 10px; font-weight: 600; color: var(--accent); white-space: nowrap; }
/* Who passed who on a parallel leg: one line per runner, in the colour of their initials (o1–o3: still out). */
/* Compare teams */
.beta .cmp-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 10px; flex-wrap: wrap; }
.beta .cmp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.beta .cmp-fav { flex: none; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }
.beta .cmp-clear { color: var(--muted); }
.beta .cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
@media (min-width: 641px) { .beta .cmp-chips.hscroll { flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none; } }
.beta .cmp-chip { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 2px; border-radius: 999px; background: var(--card); border: 2px solid; font-size: 13px; max-width: 100%; }
/* Tap a team to highlight it in the graph; tap again to let go. */
.beta .cmp-pick { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 999px; min-width: 0; }
.beta .cmp-pick .nm { min-width: 0; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta .cmp-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.beta .cmp-pick[aria-pressed="true"] { background: var(--ink); color: #FFF; }
.beta .cmp-chip:has(.cmp-pick[aria-pressed="true"]) { box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.beta .cmp-chip .sw { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.beta .cmp-chip .x { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--muted); }
.beta .cmp-card { padding: 14px 0 12px; }
.beta .cmp-card .race-note { padding: 0 16px 8px; }
.beta .cmp-settings { display: flex; flex-wrap: wrap; gap: 0 20px; }
.beta .cmp-scale { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.beta .cmp-scale > .muted { font-size: 13px; flex: none; }
.beta .cmp-scale .hscroll { display: flex; gap: 2px; background: var(--chip); border-radius: 10px; padding: 3px; min-width: 0; }
.beta .cmp-scale a { flex: none; min-width: 40px; height: 34px; padding: 0 10px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #3D444C; }
.beta .cmp-scale a.on { background: var(--ink); color: #FFF; }
.beta .cmp-wrap { position: relative; }
.beta .cmp-scroll { overflow-x: auto; overflow-y: hidden; }
.beta .cmp { position: relative; width: max(100%, 1100px); }
/* The plot: 56px in from the left (the time labels) and 28px from the right (the last bib labels). */
.beta .cmp-plot { position: absolute; top: 0; bottom: 0; left: 56px; right: 28px; }
/* Leg bands; the leg number sits in the strip above 0:00, clear of the lines. */
.beta .cmp .sband { position: absolute; top: 0; bottom: 0; padding: 4px 4px 0; font-size: 11px; line-height: 14px; font-weight: 600; color: var(--muted); box-sizing: border-box; }
.beta .cmp .sband.alt { background: #F6F7F4; }
.beta .cmp .grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #E2E4E0; }
.beta .cmp .on { position: absolute; top: 0; width: 1px; height: 1px; }
.beta .cmp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.beta .cmp path { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.beta .cmp .pt { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; }
.beta .cmp .pt.lt { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
/* Layers: light parallel-leg lines, the teams' lines, their points, the bib labels – and a highlighted team above them all. */
.beta .cmp svg.lt { z-index: 1; } .beta .cmp .pt.lt { z-index: 2; }
.beta .cmp svg.mn { z-index: 3; } .beta .cmp .pt { z-index: 4; } .beta .cmp .end { z-index: 5; }
.beta .cmp svg.lt.hl { z-index: 6; } .beta .cmp .pt.lt.hl { z-index: 7; }
.beta .cmp svg.mn.hl { z-index: 8; }
.beta .cmp .pt.hl { z-index: 9; }
.beta .cmp .end.hl { z-index: 10; }
/* The parallel-leg runners behind the team's line: faint, medium, strong or full (the "Parallel runners" setting). */
.beta .cmp svg.lt, .beta .cmp .pt.lt, .beta .cmp .rst.lt { opacity: .2; }
.beta .cmp.op50 svg.lt, .beta .cmp.op50 .pt.lt, .beta .cmp.op50 .rst.lt { opacity: .5; }
.beta .cmp.op75 svg.lt, .beta .cmp.op75 .pt.lt, .beta .cmp.op75 .rst.lt { opacity: .75; }
.beta .cmp.op100 svg.lt, .beta .cmp.op100 .pt.lt, .beta .cmp.op100 .rst.lt { opacity: 1; }
/* A line starting in the restart: a * just above and left of its first point (a tap still reaches the point). */
.beta .cmp .rst { position: absolute; z-index: 4; transform: translate(-130%, -95%); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; line-height: 1; pointer-events: none; }
.beta .cmp .rst.hl { z-index: 9; }
.beta .cmp.has-hl .rst[data-team]:not(.hl) { opacity: .2; }
/* A tapped point: a ring on the point and its time in a bubble above it (below near the top). */
.beta .cmp .pt.sel { z-index: 11; outline: 2px solid var(--ink); outline-offset: 2px; }
.beta .cmp-tip { position: absolute; z-index: 12; transform: translate(-50%, calc(-100% - 12px)); background: var(--ink); color: #FFF; border-radius: 8px; padding: 6px 9px; font-size: 12px; line-height: 1.3; width: max-content; max-width: 240px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: pointer; }
.beta .cmp-tip.below { transform: translate(-50%, 12px); }
.beta .cmp-tip[hidden] { display: none; }
.beta .cmp-tip b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; }
.beta .cmp-tip strong { display: block; font-weight: 600; }
.beta .cmp-tip span { display: block; color: #D5D9DD; }
/* Several points under the finger: step between them. */
.beta .cmp-tip .steps { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #3A414A; }
.beta .cmp-tip .steps i { font-style: normal; font-size: 12px; color: #D5D9DD; }
.beta .cmp-tip .step { all: unset; box-sizing: border-box; width: 36px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: #FFF; background: #2A3037; cursor: pointer; }
.beta .cmp-tip .step:focus-visible { outline: 2px solid #FFF; outline-offset: 1px; }
/* The same bubble on the team page's graphs, pinned to the screen (beta.js places it) so a card's edge never cuts it off. */
.beta .gtip { position: fixed; transform: none; z-index: 100; }
.beta .gsel { outline: 2px solid var(--ink); outline-offset: 2px; z-index: 5; }
.beta [data-tip] { cursor: pointer; }
/* With a team highlighted, the other teams' lines and points fade to 20 %; their bib labels stay. */
.beta .cmp.has-hl svg[data-team]:not(.hl), .beta .cmp.has-hl .pt[data-team]:not(.hl) { opacity: .2; }
.beta .cmp .end { position: absolute; transform: translate(6px, -50%); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; }
.beta .cmp .end.left { transform: translate(calc(-100% - 6px), -50%); }
.beta .cmp-y { position: absolute; left: 0; top: 0; width: 54px; pointer-events: none; background: linear-gradient(90deg, var(--card) 80%, transparent); }
.beta .cmp-y span { position: absolute; left: 12px; transform: translateY(-50%); font-size: 10px; color: var(--faint); white-space: nowrap; }
.beta .cmp-hint { font-size: 12px; color: var(--muted); padding: 8px 16px 0; }
.beta .passings { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.beta .pass { position: relative; height: 150px; margin: 8px 18px 0 6px; border-bottom: 1px solid #D5D9DD; }
.beta .pass .tick { position: absolute; top: 0; bottom: -6px; width: 1px; background: #E2E4E0; }
.beta .pass .ytop, .beta .pass .ymax { position: absolute; left: 4px; font-size: 10px; color: var(--faint); }
.beta .pass .ytop { top: -14px; }
.beta .pass .ymax { bottom: 2px; }
.beta .pass svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.beta .pass path { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.beta .pass .pp { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; border: 1.5px solid #FFF; box-sizing: content-box; }
.beta .pass .pl { position: absolute; transform: translate(8px, -50%); font-size: 10px; font-weight: 700; white-space: nowrap; }
.beta .pass .pl.left { transform: translate(calc(-100% - 8px), -50%); }
.beta .passings .spread-ticks { margin: 4px 18px 0 6px; }
.beta .pass path.a1 { stroke: var(--flag); } .beta .pass .pp.a1 { background: var(--flag); } .beta .pass .pl.a1 { color: var(--accent); }
.beta .pass path.a2 { stroke: #A9AFB6; } .beta .pass .pp.a2 { background: #A9AFB6; } .beta .pass .pl.a2 { color: #6B737C; }
.beta .pass path.a3 { stroke: #6B737C; } .beta .pass .pp.a3 { background: #6B737C; } .beta .pass .pl.a3 { color: #6B737C; }
.beta .pass path.a4 { stroke: var(--ink); } .beta .pass .pp.a4 { background: var(--ink); } .beta .pass .pl.a4 { color: var(--ink); }
.beta .pass path.o1 { stroke: #1D4ED8; } .beta .pass .pp.o1 { background: #1D4ED8; } .beta .pass .pl.o1 { color: #1D4ED8; }
.beta .pass path.o2 { stroke: #0F766E; } .beta .pass .pp.o2 { background: #0F766E; } .beta .pass .pl.o2 { color: #0F766E; }
.beta .pass path.o3 { stroke: #7C3AED; } .beta .pass .pp.o3 { background: #7C3AED; } .beta .pass .pl.o3 { color: #7C3AED; }
.beta .spread-ticks { position: relative; height: 16px; font-size: 11px; color: var(--muted); }
.beta .spread-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.beta .team-layout > .legs { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.beta .now .head { padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.beta .kicker { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.beta .kicker.hot { color: var(--accent); }
.beta .now .title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.1; }
.beta .now .body { font-size: 14px; line-height: 1.45; color: #3D444C; }
.beta .now .leg { border-top: 1px solid var(--line-2); padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.beta .strip { position: relative; margin: 0 14px; }
.beta .strip .line { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: #D5D9DD; }
.beta .strip .tick { position: absolute; top: 9px; width: 2px; height: 12px; margin-left: -1px; background: var(--faint); }
.beta .strip .mark { position: absolute; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 2px solid #FFF; background: var(--ink); color: #FFF; }
.beta .strip .mark.pre { background: var(--accent); }
.beta .strip-labels { position: relative; margin: 0 14px; height: 16px; font-size: 11px; color: var(--muted); }
.beta .strip-labels span { position: absolute; white-space: nowrap; transform: translateX(-50%); }
.beta .strip-labels span:first-child { transform: none; }
.beta .strip-labels span:last-child { transform: translateX(-100%); }
.beta .rstar { color: var(--accent); font-weight: 700; min-width: 10px; flex-shrink: 0; }
/* A read from before the runner set off: shown as ERR, never as a passing. */
.beta .strip-labels span.err, .beta .spread .sl.err { color: #B42318; font-weight: 700; }
.beta .spread .sp.err { background: #FFF; border: 2px solid #B42318; box-sizing: border-box; width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.beta .who-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-top: 6px; }
.beta .ini { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: var(--ink); color: #FFF; }
.beta .ini.in { background: #E4E6E1; color: var(--muted); }
.beta .ini.first { background: var(--flag); color: var(--ink); }
.beta .ini.wait { background: #FFF; color: var(--faint); border: 1px dashed var(--faint); }
.beta .ini.pre { background: var(--accent); color: #FFF; }
.beta .who-row .nm { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beta .who-row .at { font-size: 12px; color: var(--muted); }
.beta .who-row .at.pre { color: var(--accent); font-weight: 600; }
/* All legs: every leg is one line that opens in place. Single legs open to the runner's splits,
   parallel legs to their runners – and each runner opens to their own splits. */
/* Detail level for all legs: Legs (all closed) · Runners (legs open) · Splits (runners open too). */
.beta .seg { display: flex; background: #E4E6E1; border-radius: 10px; padding: 3px; gap: 2px; flex: none; }
.beta .seg[hidden] { display: none; }
.beta .seg button { all: unset; box-sizing: border-box; min-width: 44px; height: 34px; padding: 0 12px; border-radius: 7px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #3D444C; font-size: 13px; font-weight: 600; cursor: pointer; }
.beta .seg button[aria-pressed="true"] { background: var(--ink); color: #FFF; }
.beta .seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.beta .seg button svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .beta .seg button { padding: 0 10px; } .beta .seg button svg { display: none; } }
.beta .legcard { border-color: var(--line); }
.beta .legcard[open] { border-color: var(--ink-3); }
.beta .lrow-leg { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 20px; gap: 10px; align-items: center; padding: 12px 12px 12px 14px; min-height: 60px; box-sizing: border-box; list-style: none; cursor: pointer; }
.beta div.lrow-leg { cursor: default; }
.beta .lrow-leg::-webkit-details-marker, .beta .lrun > summary::-webkit-details-marker { display: none; }
.beta .lrow-leg:focus-visible, .beta .lrun > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 12px; }
.beta .legcard .lno { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; line-height: 1; }
.beta .legcard a.lno { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--line); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
@media (hover: hover) { .beta .legcard a.lno:hover { color: var(--accent); text-decoration-color: currentColor; } }
.beta .legcard a.lno:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.beta .legcard .lno small { display: block; font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 11px; color: var(--muted); }
.beta .legcard.live .lno, .beta .legcard.live a.lno { color: var(--accent); }
.beta .legcard.upcoming { background: #F8F8F6; }
.beta .legcard.upcoming .lno, .beta .legcard.upcoming a.lno { color: var(--faint); }
.beta .legcard .lmid { min-width: 0; }
.beta .legcard .lmid b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beta .legcard .lmid small { display: block; font-size: 12px; color: var(--muted); }
.beta .legcard .lres { text-align: right; }
.beta .legcard .lres span { display: flex; gap: 6px; align-items: baseline; justify-content: flex-end; }
.beta .legcard .lres .p { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; line-height: 1; }
.beta .legcard .lres .p.oc { font-size: 17px; color: var(--accent); }
.beta .legcard .lres .up, .beta .legcard .lres .down { font-size: 13px; }
.beta .legcard .lres small { display: block; font-size: 12px; color: var(--muted); }
.beta .chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform .15s; }
.beta details[open] > summary .chev { transform: rotate(180deg); }
/* When the runners of a parallel leg came in: first to last on one line. Same colours as their initials. */
.beta .lstrip { display: block; position: relative; height: 12px; margin: 5px 6px 0; }
.beta .lstrip::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--line); }
.beta .lstrip i { position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 1.5px solid #FFF; box-sizing: border-box; background: #CDD1D6; }
.beta .lstrip i.a1, .beta .ini.a1 { background: var(--flag); color: var(--ink); }
.beta .lstrip i.a2, .beta .ini.a2 { background: #CDD1D6; color: var(--ink); }
.beta .lstrip i.a3, .beta .ini.a3 { background: #6B737C; color: #FFF; }
.beta .lstrip i.a4, .beta .ini.a4 { background: var(--ink); color: #FFF; }
.beta .lbody { padding: 0 14px 12px; }
.beta .lbody.single { padding-left: 68px; }
.beta .lrun { border-top: 1px solid var(--line-2); }
.beta .lrun > .lrun-head { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 16px; gap: 10px; align-items: center; padding: 8px 0; min-height: 44px; box-sizing: border-box; }
.beta .lrun > summary { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 16px; gap: 10px; align-items: center; padding: 8px 0; min-height: 44px; box-sizing: border-box; list-style: none; cursor: pointer; }
.beta .lrun .nm { display: block; font-weight: 600; font-size: 14px; }
.beta .lrun .st { display: block; font-size: 12px; color: var(--muted); }
.beta .lrun .st .first { color: var(--accent); font-weight: 600; }
.beta .lrun .st .last { color: var(--ink); font-weight: 600; }
.beta .lrun .tm { text-align: right; }
.beta .lrun .tm b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.1; }
.beta .lrun .tm small { display: block; font-size: 12px; color: var(--muted); }
.beta .lrun .lsplits { margin: 0 0 6px 36px; width: calc(100% - 36px); }
.beta .lsplits { width: 100%; border-collapse: collapse; font-size: 13px; }
.beta .lsplits th { text-align: left; font-weight: 600; }
.beta .lsplits th, .beta .lsplits td { padding: 5px 0; border-top: 1px solid var(--line-2); }
.beta .lsplits td { text-align: right; }
.beta .lsplits td + td { width: 64px; padding-left: 12px; color: var(--muted); }
.beta .lsplits tr.none td { color: #B9BFC6; }
.beta .lsplits tr.err td { color: #B42318; font-weight: 600; }
.beta .lfoot { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* counters */
.beta .chart { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 8px; }
.beta .chart a { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; color: #FFF; }
.beta .chart .val { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; text-align: center; }
.beta .chart .colbar { display: flex; flex-direction: column; justify-content: flex-end; height: 110px; background: #20262C; border-radius: 6px; overflow: hidden; }
.beta .chart .colbar .c { background: #6B4A36; }
.beta .chart .colbar .f { background: #D5D9DD; }
.beta .chart .colbar .f.front { background: var(--flag); }
.beta .chart .lbl { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; text-align: center; color: #B9BFC6; }
.beta .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: #D5D9DD; }
.beta .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.beta .legend i.sw-f { background: #D5D9DD; }
.beta .legend i.sw-front { background: var(--flag); }
.beta .legend i.sw-c { background: #6B4A36; }
.beta .lead-note { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #D5D9DD; }
.beta .band .kicker { color: #B9BFC6; }
.beta .counter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.beta .ccard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.beta .ccard.front { border-color: var(--flag); box-shadow: 0 0 0 1px var(--flag); }
.beta .ccard .big { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 34px; line-height: 1; text-align: right; }
.beta .ccard .big small { font-size: 20px; color: var(--faint); }
.beta .bar2 { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--chip); }
.beta .bar2 .f { background: var(--ink); }
.beta .bar2 .f.front { background: var(--flag); }
.beta .bar2 .c { background: #F4B489; }
.beta .subcount { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 13px; }
.beta .subcount .b { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.beta .subcount .b span { display: block; height: 100%; background: var(--faint); border-radius: 4px; }
.beta .subcount .b span.all { background: var(--ink); }

/* teams page */
.beta .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.beta .chips a { min-height: 40px; padding: 0 16px; border-radius: 999px; background: #FFF; border: 1px solid #D5D9DD; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }
.beta .chips a.on { background: var(--ink); color: #FFF; border-color: var(--ink); }
.beta .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.beta .team-grid .trow { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 0 0 14px; min-height: 52px; }
.beta .team-grid .trow.followed { background: var(--tint); border-color: var(--tint-line); }
.beta mark { background: #FDE3CF; color: inherit; border-radius: 3px; padding: 0; }

/* search */
.beta .tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.beta .tabs a { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid #5A626B; color: #FFF; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }
.beta .tabs a.on { background: #FFF; color: var(--ink); border-color: #FFF; }
.beta .legbadge { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 17px; background: var(--chip); border-radius: 6px; padding: 3px 10px; white-space: nowrap; }

/* about */
.beta .sponsors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.beta .sponsor-tile { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; }
.beta .sponsor-tile .logo { height: 96px; display: flex; align-items: center; justify-content: center; padding: 6px 10px; }
.beta .sponsor-tile img { max-width: 100%; max-height: 84px; object-fit: contain; }
.beta .sponsor-tile span { font-size: 13px; color: var(--muted); text-align: center; }
.beta .info { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; max-width: 820px; }
.beta .info a { color: var(--accent); text-decoration: underline; font-weight: 600; }

/* team leader */
/* Top: the title, with "+ Add team" beside it – also on a phone, so the first card starts high up. */
.beta .tl-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 10px; }
.beta .tl-add { flex: none; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #FFF; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }
@media (hover: hover) { .beta .tl-add:hover { color: #FFF; background: var(--ink-3); } }
@media (max-width: 640px) { .beta .tl-top .sub { display: none; } .beta .tl-top { align-items: center; } }
/* Remove a team from its own card. */
.beta .tl-remove { flex: none; width: 40px; height: 40px; margin: -10px -10px -10px 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: #B9BFC6; }
@media (hover: hover) { .beta .tl-remove:hover { color: #FFF; background: var(--ink-3); text-decoration: none; } }
.beta .tl-picker { background: #FFF; color: var(--ink); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.beta .tl-addbtn { height: 34px; padding: 0 14px; border-radius: 8px; background: var(--ink); color: #FFF !important; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; }
.beta .tl-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.beta .tl-cards { flex: 999 1 640px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.beta .tl-feed { flex: 1 1 300px; max-width: 400px; min-width: 0; }
/* Each team card starts with a dark bar, so the switch to the next team is easy to see while scrolling. */
.beta .tl-head { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--ink); color: #FFF; }
.beta .tl-head .bib { background: #FFF; color: var(--ink); font-weight: 700; }
.beta .tl-head .muted { color: #B9BFC6; }
/* Position with its change in front, side by side on one baseline. */
.beta .tl-pos { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; font-weight: 700; font-size: 24px; line-height: 1; }
.beta .tl-pos .up, .beta .tl-pos .down { font-size: 14px; white-space: nowrap; }
.beta .tl-head .up { color: #9DB8FF; }
.beta .tl-head .down { color: #B9BFC6; }
@media (hover: hover) { .beta .tl-head a:hover { color: #FFF; text-decoration: underline; } }
.beta .tl-progress { flex: 1; height: 6px; border-radius: 3px; background: var(--ink-3); overflow: hidden; }
.beta .tl-progress span { display: block; height: 100%; background: var(--flag); border-radius: 3px; }
.beta .tl-alert { margin: 10px 12px; border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; background: #F6F7F4; font-size: 13px; line-height: 1.4; }
.beta .tl-alert b { font-size: 15px; }
.beta .tl-alert .dot { margin-top: 5px; width: 10px; height: 10px; background: var(--faint); }
.beta .tl-alert.hot { background: var(--tint); box-shadow: inset 0 0 0 1px var(--flag); }
.beta .tl-alert.hot .dot { background: var(--flag); }
.beta .tl-head + .tl-sec { border-top: 0; }
.beta .tl-sec { border-top: 1px solid var(--line); padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.beta .tl-out { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.beta .tl-out .ini { width: 28px; height: 28px; }
.beta .tl-out .nm { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beta .tl-out .at { font-size: 12px; color: var(--muted); }
.beta .tl-out .at.pre { color: var(--accent); font-weight: 600; }
.beta .tl-out .gap { font-size: 12px; font-weight: 600; color: #3D444C; }
.beta .tl-out .gap.first { color: var(--ink); }
.beta .tl-spread { display: flex; align-items: center; gap: 10px; background: #F6F7F4; border-radius: 10px; padding: 8px 10px; }
.beta .tl-spread svg { flex: none; }
.beta .tl-spread b { display: block; font-size: 14px; }
.beta .tl-spread small { display: block; font-size: 12px; color: var(--muted); }
.beta .tl-track { grid-column: 2 / span 2; position: relative; height: 14px; }
.beta .tl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--line); }
.beta .tl-track .fill { position: absolute; left: 0; top: 6px; height: 2px; background: var(--ink); }
.beta .tl-track .tick { position: absolute; top: 3px; width: 2px; height: 8px; margin-left: -1px; background: #B9BFC6; }
.beta .tl-track .pos { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid #FFF; background: var(--ink); }
.beta .tl-track .pos.pre { background: var(--accent); }
.beta .tl-trackinfo { grid-column: 2 / span 2; display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--faint); margin-top: -2px; }
.beta .tl-next { border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; background: #F6F7F4; }
.beta .tl-next.ready { background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
.beta .tl-tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.beta .tl-next.ready .tl-tag { color: var(--accent); }
.beta .tl-item { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.35; color: #3D444C; }
.beta .tl-item .lbl { min-width: 58px; font-size: 12px; font-weight: 700; color: var(--faint); }
.beta .tl-item.first { color: var(--ink); font-weight: 600; }
.beta .tl-item.go { color: var(--ink); font-weight: 700; }
.beta .tl-item.go .lbl { color: var(--accent); }
.beta .tl-event { display: grid; grid-template-columns: 62px 40px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 16px; border-top: 1px solid var(--line-2); }
.beta .tl-event.pre { background: var(--tint); }

/* beta notice at the bottom of every page */
.beta .beta-note { margin-top: 48px; background: var(--tint); border-top: 1px solid var(--tint-line); }
.beta .beta-note .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding-top: 14px; padding-bottom: 18px; font-size: 13px; }
.beta .beta-note .badge { background: var(--accent); color: #FFF; font-weight: 700; font-size: 11px; letter-spacing: .08em; border-radius: 999px; padding: 3px 8px; margin-right: 8px; }
.beta .beta-note a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent); text-decoration: underline; }

@media (max-width: 640px) {
  .beta h1 { font-size: 34px; }
  .beta .res { grid-template-columns: 40px 36px minmax(0, 1fr) auto; padding: 0 12px; gap: 0 8px; }
  .beta .res .who { flex-direction: column; gap: 0; align-items: stretch; overflow: hidden; }
  .beta .res .who .name { max-width: 100%; }
  /* Phone: team number with gained or lost under it in one narrow column, so the team name gets the width. */
  .beta .res.lg { grid-template-columns: 36px 34px minmax(0, 1fr) auto; grid-template-areas: "p b n t" "p d n t"; gap: 0 8px; align-content: center; }
  .beta .res.lg > .b { align-self: end; line-height: 1.2; }
  .beta .res.lg > .d { align-self: start; font-size: 11px; line-height: 1.2; white-space: nowrap; }
  .beta .res.lg > .d:not(:has(*)), .beta .res.lg > .d .same { display: none; }
  .beta .res.lg:has(> .d:not(:has(*))) > .b, .beta .res.lg:has(> .d .same) > .b { grid-row: 1 / span 2; align-self: center; }
  .beta .res, .beta .lrow, .beta .team-grid .trow { padding-top: 6px; padding-bottom: 6px; }
  .beta .tile .v { font-size: 24px; }
}

/* Light page header: only the menu is dark. The header sits on the page colour, so menu and page read as two parts. */
.beta .band { background: var(--ground); color: var(--ink); padding-bottom: 6px; }
.beta .band .sub, .beta .band .kicker, .beta .lead-note, .beta .progress-text, .beta .legend, .beta .chart .lbl { color: var(--muted); }
@media (hover: hover) { .beta .band a:hover { color: var(--accent); } }
.beta .band .search { border: 1px solid var(--line); }
/* Home keeps its search inside the dark header, as part of the top of the site. */
.beta .band.dark { background: var(--ink); color: #FFF; padding-bottom: 22px; }
.beta .band.dark .search { border: 0; }
/* Results: a dark grey header under the menu, one step lighter than it, with the leg picker on it. */
.beta .band.shade { background: var(--ink-2); color: #FFF; padding-bottom: 18px; }
.beta .band.shade .sub, .beta .band.shade .progress-text { color: #D5D9DD; }
@media (hover: hover) { .beta .band.shade a:hover { color: #FFF; } }
.beta .band.shade .progress { background: var(--ink-3); }
.beta .band.shade .legtabs a { background: var(--ink-3); color: #FFF; border: 0; }
.beta .band.shade .legtabs a.on { background: var(--flag); color: var(--ink); }
/* A row that never wraps: it scrolls sideways, and fades out at an edge where more is hidden (beta.js sets the fades). */
.beta .hscroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%); }
.beta .hscroll::-webkit-scrollbar { display: none; }
.beta .hscroll > * { flex: none; }
.beta .band .nostar { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A929B' stroke-width='1.5' stroke-linejoin='round'%3e%3cpath d='M12 3l2.8 5.9 6.2.8-4.6 4.3 1.2 6.2L12 17.2 6.4 20.2l1.2-6.2L3 9.7l6.2-.8z'/%3e%3c/svg%3e"); }
/* Team page */
.beta .team-title .bib { background: var(--ink); color: #FFF; }
.beta .tile { background: var(--card); border: 1px solid var(--line); }
.beta .tile .k { color: var(--muted); }
.beta .tile .n { color: var(--accent); }
/* Leg page */
.beta .progress { background: var(--chip); }
.beta .legtabs a { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.beta .legtabs a.on { background: var(--ink); color: #FFF; border-color: var(--ink); }
/* Search */
.beta .tabs a { background: var(--card); color: var(--ink); border-color: var(--line); }
.beta .tabs a.on { background: var(--ink); color: #FFF; border-color: var(--ink); }
/* Team leader */
.beta .tl-picker { border: 1px solid var(--line); }
/* Leg counters: the chart on the page colour */
.beta .chart a { color: var(--ink); }
.beta .chart .colbar { background: var(--chip); }
.beta .chart .colbar .f, .beta .legend i.sw-f { background: var(--ink-3); }
.beta .chart .colbar .c, .beta .legend i.sw-c { background: var(--tint-line); }

/* Phone: each section heading gets an orange tab, so a new section is easy to see when scrolling. */
@media (max-width: 640px) {
  .beta .section-head h2, .beta .tl-feed h2 { display: flex; align-items: center; gap: 10px; }
  .beta .section-head h2::before, .beta .tl-feed h2::before { content: ""; flex: none; width: 4px; height: 22px; border-radius: 2px; background: var(--flag); }
}

/* Leg page views: Teams · Individual · At each control (plain links), and on a parallel leg All runners · Team as one. */
.beta .legview { display: flex; margin: 0 0 14px; min-width: 0; }
.beta .legview .hscroll { display: flex; gap: 2px; background: var(--chip); border-radius: 10px; padding: 3px; min-width: 0; max-width: 100%; }
.beta .legview a { flex: none; min-width: 44px; height: 36px; padding: 0 12px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #3D444C; white-space: nowrap; }
.beta .legview a.on { background: var(--ink); color: #FFF; }
.beta .legview a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.beta .legview.sub { margin-top: -6px; }
.beta .legview.sub a { height: 32px; font-size: 13px; }
/* A second line under a time (time on the leg, or the runner's time and pace) and under a name (the team). */
.beta .res .t small { display: block; font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 12px; line-height: 1.2; color: var(--muted); }
.beta .res-head > .t small { font-weight: 600; font-size: 11px; }
/* Individual and team-as-one rows: place, bib, runner (team below), time. */
.beta .res.ind { grid-template-columns: 48px 40px minmax(0, 1fr) auto; grid-template-areas: "p b n t"; padding-top: 6px; padding-bottom: 6px; }
.beta .res.ind > .p { grid-area: p; }
.beta .res.ind > .b { grid-area: b; font-size: 13px; color: var(--muted); }
.beta .res.ind > .n { grid-area: n; min-width: 0; }
.beta .res.ind > .n .name { font-weight: 600; }
.beta .res.ind > .n small { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta .res.ind > .t { grid-area: t; }
.beta .res-head.ind { padding-top: 0; padding-bottom: 0; }

/* ---- Compact result lists (the "Compact" switch on the results page; the class is the reader's own, set by beta.js
   from the browser). One line per row, about as many teams on a phone as the classic page: smaller type, the second
   line (pace, time on the leg) left out, the team next to the runner, and a slimmer header. */
.beta .legview-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0 0 14px; min-width: 0; }
.beta .legview-row .legview { margin: 0; flex: 1 1 auto; }
.beta .compact-toggle { flex: none; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: #3D444C; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.beta .compact-toggle[aria-pressed="true"] { background: var(--ink); color: #FFF; border-color: var(--ink); }
.beta .compact-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.beta.compact .band.legpage { padding-bottom: 8px; }
.beta.compact .legpage.band .leghead { gap: 8px !important; padding-top: 6px !important; }
.beta.compact .legpage h1 { font-size: 26px; }
.beta.compact .legpage .sub { margin-top: 2px; font-size: 13px; }
.beta.compact .legpage .cond { font-size: 22px !important; }
.beta.compact .legpage .progress, .beta.compact .legpage .progress-text { display: none; }
.beta.compact .legpage .legtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.beta.compact .legpage .legtabs a { min-height: 30px; min-width: 50px; padding: 2px 8px; font-size: 15px; flex: none; }
.beta.compact .legpage .legtabs a small { display: none; }
.beta.compact .legpage.pad { padding-top: 8px; }
.beta.compact .legpage .legview-row { margin-bottom: 8px; }
.beta.compact .legpage .legview a { height: 30px; padding: 0 10px; font-size: 13px; }
.beta.compact .legpage .legview.sub { margin: -4px 0 8px; }
.beta.compact .legpage .legview.sub a { height: 28px; font-size: 12px; }
.beta.compact .legpage .compact-toggle { height: 36px; }
.beta.compact .legpage .section { gap: 4px; }
.beta.compact .legpage .section-head .note { display: none; }
.beta.compact .legpage .section-head h2 { font-size: 18px; }
.beta.compact .legpage .card { border-radius: 8px; }

.beta.compact .legpage .res { min-height: 28px; padding-top: 2px; padding-bottom: 2px; gap: 0 6px; font-size: 14px; }
.beta.compact .legpage .res .p { font-size: 16px; }
.beta.compact .legpage .res .t { font-size: 15px; }
.beta.compact .legpage .res .t small { display: none; }
.beta.compact .legpage .res-head { min-height: 24px; font-size: 11px; }
.beta.compact .legpage .res.lg { grid-template-columns: 32px 30px minmax(0, 1fr) auto auto; grid-template-areas: "p b n d t"; }
.beta.compact .legpage .res.lg > .b, .beta.compact .legpage .res.lg > .d { align-self: center; font-size: 11px; line-height: 1; }
.beta.compact .legpage .res.lg > .d .same { display: none; }
.beta.compact .legpage .res.lg > .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta.compact .legpage .res.ind { grid-template-columns: 32px 30px minmax(0, 1fr) auto; padding-top: 2px; padding-bottom: 2px; }
.beta.compact .legpage .res.ind > .b { font-size: 11px; }
.beta.compact .legpage .res.ind > .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beta.compact .legpage .res.ind > .n small { display: inline; margin-left: 6px; font-size: 12px; }
.beta.compact .legpage .lrow { min-height: 28px; padding-top: 2px; padding-bottom: 2px; gap: 8px; font-size: 14px; }
.beta.compact .legpage .lrow .lb, .beta.compact .legpage .lrow .lc, .beta.compact .legpage .lrow .ls { font-size: 12px; }
.beta.compact .legpage .note { font-size: 12px; }
@media (max-width: 640px) {
  .beta.compact .legpage .res, .beta.compact .legpage .lrow { padding-left: 8px; padding-right: 8px; }
  .beta.compact .legpage .res.lg, .beta.compact .legpage .res.ind { grid-template-columns: 30px 28px minmax(0, 1fr) auto auto; }
  .beta.compact .legpage .res.ind { grid-template-columns: 30px 28px minmax(0, 1fr) auto; }
}
/* The phone layout puts the bib under the position (two rows, with :has() rules of their own): in compact everything
   is on one line, so the areas are set outright. */
.beta.compact .legpage .res.lg > .p, .beta.compact .legpage .res.ind > .p { grid-area: p !important; }
.beta.compact .legpage .res.lg > .b, .beta.compact .legpage .res.ind > .b { grid-area: b !important; align-self: center !important; line-height: 1 !important; }
.beta.compact .legpage .res.lg > .d { grid-area: d !important; align-self: center !important; }
.beta.compact .legpage .res.lg > .n, .beta.compact .legpage .res.ind > .n { grid-area: n !important; }
.beta.compact .legpage .res.lg > .t, .beta.compact .legpage .res.ind > .t { grid-area: t !important; }
.beta.compact .legpage .res-head > .p, .beta.compact .legpage .res-head > .b { white-space: nowrap; letter-spacing: 0; font-size: 10px; }
.beta.compact .legpage .res.ind > .n .name { display: inline; }
/* The first list's heading only repeats the view tab that is on: left out in compact. */
.beta.compact .legpage > .section:not(.section ~ .section) > .section-head { display: none; }
/* Team names may wrap elsewhere (.team); on a compact row they stay on the line and are cut with an ellipsis. */
.beta.compact .legpage .res .team, .beta.compact .legpage .lrow .team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; line-height: 1.2; }