/* RACE shared look (Task U1, Ruling A172; Task 12.7's identity, Task U0 §3.1): tokens, type scale, status badges, medal
   and the two-line rider row, for live.php's new page first and then the announcer, result.php's main.v2 and the public v2
   content. Load assets/fonts/fonts.css before it (Barlow Condensed + Inter, self-hosted).
   - Red #E63946 for accents, #C72A37 for red fills under white text (5.5:1), navy #06080D.
   - Text is >= 4.5:1 on its background everywhere (sunlight); tabular figures for every time, gap and place.
   - A state is always text + colour + shape (.st-*), never colour alone. Out of the race is grey, never a medal.
   - Every name is prefixed (--rt-*, .rt-*, .st, .medal) so the public site's own classes (Bootstrap's .row / .card) and
     variables never collide with these. */
:root {
    --rt-red: #E63946;
    --rt-red-strong: #C72A37;
    --rt-red-soft: #FFE5E8;
    --rt-navy: #06080D;
    --rt-ink: #111827;
    --rt-ink-2: #374151;
    --rt-mute: #4B5563;
    --rt-faint: #6B7280;
    --rt-line: #E5E7EB;
    --rt-line-2: #D1D5DB;
    --rt-soft: #F3F4F6;
    --rt-bg: #F4F5F7;
    --rt-amber: #F59E0B;
    --rt-amber-soft: #FEF3C7;
    --rt-amber-ink: #92400E;
    --rt-star: #D97706;
    --rt-fav-bg: #FFFBEB;
    --rt-green: #10B981;
    --rt-green-ink: #047857;
    --rt-green-soft: #D1FAE5;
    --rt-dnf-bg: #FEE2E2;
    --rt-dnf-ink: #B91C1C;
    --rt-dsq: #7F1D1D;
    --rt-gold: #E2B33C;
    --rt-silver: #B8BEC8;
    --rt-bronze: #C68A55;
    --rt-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --rt-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* type scale */
    --rt-fs-label: 12px;     /* group labels, table heads: Inter 700, spaced capitals */
    --rt-fs-sub: 13.5px;     /* a row's second line */
    --rt-fs-name: 17px;      /* names: Barlow Condensed */
    --rt-fs-num: 19px;       /* times and places */
    --rt-fs-h2: 24px;
    --rt-fs-h1: 34px;
}

.rt-num { font-family: var(--rt-head); font-variant-numeric: tabular-nums; }
.rt-tnum { font-variant-numeric: tabular-nums; }
.rt-label { font: 700 var(--rt-fs-label)/1 var(--rt-body); letter-spacing: .08em; text-transform: uppercase; color: var(--rt-mute); }

/* ===== Status badges: text + colour + shape ===== */
.st { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 4px;
      font: 700 13px/1 var(--rt-head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.st-run { color: var(--rt-green-ink); background: var(--rt-green-soft); }
.st-run::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rt-green); }
.st-fin { color: var(--rt-ink-2); background: var(--rt-soft); }
.st-fin::before { content: '\2713'; font: 700 12px/1 var(--rt-body); }
.st-lap { color: var(--rt-amber-ink); background: var(--rt-amber-soft); }
.st-dnf { color: var(--rt-dnf-ink); background: var(--rt-dnf-bg); }
.st-dsq { color: #fff; background: var(--rt-dsq); }
.st-dns { color: var(--rt-mute); background: #fff; box-shadow: inset 0 0 0 1.5px var(--rt-line-2); }
.st-pend { color: var(--rt-mute); background: #fff; box-shadow: inset 0 0 0 1.5px var(--rt-line-2); }
.st-pend::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--rt-faint); }
.st-prov { color: var(--rt-amber-ink); background: var(--rt-amber-soft); box-shadow: inset 0 0 0 1.5px #F2C94C; }
.st-off { color: #fff; background: var(--rt-navy); }
.st-sm { height: 18px; padding: 0 6px; font-size: 11.5px; }

/* "● CP2 · V3": where a rider on course was last seen */
.rt-cp { display: inline-flex; align-items: center; gap: 5px; font: 700 15px/1 var(--rt-head); letter-spacing: .04em; color: var(--rt-green-ink); white-space: nowrap; }
.rt-cp::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rt-green); }

/* ===== Medal: places 1-3 of the finishers only ===== */
.medal { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
         font: 800 18px/1 var(--rt-head); font-variant-numeric: tabular-nums; color: var(--rt-ink); }
.medal.m1 { background: #F3D27A; }
.medal.m2 { background: #D7DBE1; }
.medal.m3 { background: #E7B48A; }

/* ===== Rows: place | SURNAMES First I. / #bib · flag · club | time and gap | star ===== */
.rt-grp { display: flex; align-items: center; gap: 8px; padding: 12px 6px 6px; font: 700 var(--rt-fs-label)/1 var(--rt-body);
          letter-spacing: .08em; text-transform: uppercase; color: var(--rt-mute); }
.rt-grp b { font-weight: 700; color: var(--rt-ink); }
.rt-card { background: #fff; border: 1px solid var(--rt-line); border-radius: 8px; overflow: hidden; }
.rt-row { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 40px; column-gap: 8px; align-items: center;
          min-height: 58px; padding: 7px 0 7px 8px; border-top: 1px solid var(--rt-soft); }
.rt-row:first-child { border-top: 0; }
.rt-pos { display: flex; justify-content: center; font: 800 var(--rt-fs-num)/1 var(--rt-head); font-variant-numeric: tabular-nums; color: var(--rt-ink); }
.rt-who { min-width: 0; }
.rt-nm { font: 600 var(--rt-fs-name)/1.15 var(--rt-head); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rt-ink-2); }
.rt-nm b { font-weight: 700; color: var(--rt-ink); text-transform: uppercase; }
.rt-sub { margin-top: 3px; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--rt-fs-sub); line-height: 1.2; color: var(--rt-mute); white-space: nowrap; overflow: hidden; }
.rt-sub > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.rt-bib { flex: none; font: 700 13px/1 var(--rt-head); color: var(--rt-faint); font-variant-numeric: tabular-nums; }
.rt-flag { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.rt-tm { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.rt-t { font: 700 var(--rt-fs-num)/1 var(--rt-head); font-variant-numeric: tabular-nums; color: var(--rt-ink); white-space: nowrap; }
.rt-g { font: 600 15px/1 var(--rt-head); font-variant-numeric: tabular-nums; color: var(--rt-mute); white-space: nowrap; }
.rt-star { display: flex; align-items: center; justify-content: center; width: 40px; height: 44px; padding: 0; border: 0; background: none;
           font-size: 22px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--rt-faint); cursor: pointer; }
.rt-row.fav { background: var(--rt-fav-bg); box-shadow: inset 4px 0 0 var(--rt-star); }
.rt-star[aria-pressed="true"] { color: var(--rt-star); -webkit-text-stroke: 1.5px var(--rt-amber-ink); }
.rt-row.out .rt-nm, .rt-row.out .rt-nm b { color: var(--rt-mute); }
.rt-row.out .rt-pos { color: var(--rt-faint); font-size: 16px; }
.rt-hl { background: #FEF08A; border-radius: 2px; color: inherit; }
@media (max-width: 370px) {
    .rt-nm { font-size: 16px; }
    .rt-t { font-size: 18px; }
}