/* RACE "Crono escalada" (Task C1, Ruling A186): the public climb ranking, timing/climb.php. Layout only: the tokens, badges, medal
   and the two-line rider row are U1's race-tokens.css (the one look: navy bar with the red rule, Barlow Condensed + Inter, tabular
   figures, states as text + colour + shape). Phone first (360-414 px), one column; from 900 px the same list, centred, with the
   tabs and the category select on one line. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.cl { margin: 0; min-height: 100vh; background: var(--rt-bg); color: var(--rt-ink); font: 400 16px/1.4 var(--rt-body); }
.cl [hidden] { display: none !important; }
:where(.cl) :is(h1, p) { margin: 0; padding: 0; }
:where(.cl) :is(button, select) { font: inherit; color: inherit; }

/* ===== top bar: logo and event ===== */
.cl-top { position: sticky; top: 0; z-index: 20; background: var(--rt-navy); color: #fff; border-bottom: 3px solid var(--rt-red); }
.cl-top-in { max-width: 820px; margin: 0 auto; height: 48px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
             display: flex; align-items: center; gap: 10px; }
.cl-logo { flex: none; display: block; }
.cl-logo img { height: 22px; width: auto; display: block; }
.cl-ev { flex: 1; min-width: 0; font: 700 17px/1 var(--rt-head); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
         overflow: hidden; text-overflow: ellipsis; }
/* Task C2 (Ruling A194): "← En vivo", back to live.php?comp=N (the public default page), small, in the bar that stays on screen */
.cl-back { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .45);
           border-radius: 18px; color: #fff; font: 700 14px/1 var(--rt-head); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
           white-space: nowrap; }
.cl-back:focus-visible { outline: 3px solid var(--rt-red); outline-offset: 2px; }
.cl-back::after { content: ''; position: absolute; inset: -5px 0; }   /* Task U6 (B4): a 44-px tap around the 36-px pill (padding box 34 px), inside the 48-px bar */

/* ===== heading: title, the segment, the rule, the data age ===== */
.cl-main { max-width: 820px; margin: 0 auto; padding: 0 8px 16px; }
.cl-head { padding: 16px 6px 8px; }
.cl-h1 { font: 800 var(--rt-fs-h1)/1 var(--rt-head); letter-spacing: .01em; text-transform: uppercase; color: var(--rt-ink); }
.cl-seg { margin-top: 8px; font: 700 18px/1.25 var(--rt-head); letter-spacing: .02em; color: var(--rt-ink-2); overflow-wrap: anywhere; }
.cl-rule { margin-top: 6px; display: inline-block; padding: 4px 8px; border-radius: 4px; background: var(--rt-red-strong); color: #fff;
           font: 700 var(--rt-fs-label)/1 var(--rt-body); letter-spacing: .08em; text-transform: uppercase; }
.cl-fresh { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--rt-green-ink); }
.cl-fresh::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--rt-green); vertical-align: 1px; }
.cl-fresh.amber { color: var(--rt-amber-ink); }
.cl-fresh.amber::before { background: var(--rt-amber); }
.cl-fresh.red { color: var(--rt-dnf-ink); }
.cl-fresh.red::before { background: #EF4444; }

/* ===== tabs Hombres / Mujeres / E-bike and the category select (stay under the bar while the list scrolls) ===== */
.cl-ctrl { position: sticky; top: 51px; z-index: 10; margin: 0 -8px; padding: 8px; background: var(--rt-bg); display: flex; flex-wrap: wrap; gap: 8px; }
.cl-tabs { flex: 1 1 100%; min-width: 0; display: flex; background: #fff; border: 1px solid var(--rt-line-2); border-radius: 8px; overflow: hidden; }
.cl-tab { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; white-space: nowrap;
          font: 700 16px/1 var(--rt-head); letter-spacing: .04em; text-transform: uppercase; color: var(--rt-ink-2); }
.cl-tab + .cl-tab { border-left: 1px solid var(--rt-line); }
.cl-tab[aria-selected="true"] { background: var(--rt-navy); color: #fff; }
.cl-tab em { margin-left: 4px; font: 600 12px/1 var(--rt-body); font-style: normal; font-variant-numeric: tabular-nums; opacity: .8; }
.cl-tab:focus-visible, .cl-sel select:focus-visible { outline: 3px solid var(--rt-red); outline-offset: -3px; }
.cl-sel { flex: 1 1 100%; min-width: 0; position: relative; display: block; }
.cl-sel select { width: 100%; height: 44px; padding: 0 36px 0 12px; border: 1px solid var(--rt-line-2); border-radius: 8px; background: #fff;
                 font: 600 15px/1 var(--rt-body); color: var(--rt-ink); -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.cl-sel::after { content: ''; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--rt-ink);
                 border-bottom: 2px solid var(--rt-ink); transform: rotate(45deg); pointer-events: none; }
.cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== the list: race-tokens.css' rows without the star column ===== */
.cl-board { margin-top: 4px; }
.cl .rt-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding-right: 12px; }
.cl-nmrow { display: flex; align-items: baseline; gap: 6px; min-width: 0; }   /* the name, then "3º general" in a category view */
.cl-nmrow > .rt-nm { flex: 0 1 auto; min-width: 0; }
.cl-gen { flex: none; font: 600 12px/1 var(--rt-body); color: var(--rt-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl .rt-sub > .cl-cat { flex: none; font-weight: 600; color: var(--rt-ink-2); }
.cl .rt-sub > .cl-cat::before, .cl .rt-sub > .cl-club::before { content: '\00b7'; margin-right: 6px; color: var(--rt-faint); font-weight: 400; }
.cl .rt-sub > .cl-club { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-best { font-size: 24px; }
.cl-meta { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--rt-body); color: var(--rt-mute); white-space: nowrap;
           font-variant-numeric: tabular-nums; }
.cl .rt-row.out { background: #FAFAFB; }
.cl .rt-row.out .cl-best { color: var(--rt-mute); }
.cl .rt-grp { padding: 16px 6px 6px; }
.cl-empty { margin: 16px 0; padding: 28px 16px; background: #fff; border: 1px solid var(--rt-line); border-radius: 8px; text-align: center;
            color: var(--rt-mute); font-size: 15px; line-height: 1.45; }
.cl-foot { padding: 20px 12px 32px; text-align: center; color: var(--rt-faint); font-size: 12px; }

@media (max-width: 370px) {
    .cl-h1 { font-size: 30px; }
    .cl-best { font-size: 22px; }
    .cl-tab { font-size: 15px; }
}
@media (min-width: 900px) {
    .cl-head { padding-top: 24px; }
    .cl-h1 { font-size: 42px; }
    .cl-seg { font-size: 20px; }
    .cl-ctrl { flex-wrap: nowrap; align-items: center; }
    .cl-tabs { flex: 0 1 auto; }
    .cl-tab { flex: 0 0 auto; padding: 0 22px; }
    .cl-sel { flex: 0 1 320px; margin-left: auto; }
    .cl .rt-row { min-height: 62px; padding-left: 14px; padding-right: 18px; column-gap: 14px; }
}