/*
 * riders2026.css — the 2026 entry.  v1 (13 Aug 2026)
 *
 * Sits on the shared page chrome (stripes + .pagetitle + blurred-logo background), exactly as
 * roll-of-honour.css does, so this file only styles the list. Colours come from the site
 * variables — never a hardcoded hex, except the two PLATE colours, which are the confirmed
 * race plates and are the same values the vMix graphics use.
 *
 * FONT LAW: labels are Gravesend whatever they say, figures are Plex Mono, prose is Inter.
 */

/* ── the count strip ─────────────────────────────────────────────────────────────────────── */
.r26-tally{
  display:flex;flex-wrap:wrap;justify-content:center;gap:26px;
  max-width:900px;margin:38px auto 26px;padding:15px 18px;
  background:rgba(0,0,0,.34);border:1px solid rgba(228,228,216,.13);border-radius:14px;
}
.r26-tally div{display:flex;flex-direction:column;gap:2px;text-align:center}
.r26-tally b{font-family:var(--num);font-weight:700;font-size:22px;line-height:1;color:var(--cream)}
.r26-tally span{font-family:var(--disp);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:#9fb3a8}

/* ── filters — segmented, never a native select ──────────────────────────────────────────── */
.r26-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:900px;margin:0 auto 8px}
.r26-fb{
  font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--cream);text-decoration:none;cursor:pointer;
  padding:6px 13px;border-radius:999px;
  background:rgba(0,0,0,.34);border:1px solid rgba(40,152,81,.34);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.r26-fb:hover{background:rgba(40,152,81,.20);border-color:var(--leaf);transform:translateY(-2px)}
.r26-fb.on{background:var(--orange);border-color:var(--orange);color:#2a1d05}
/* Newcomers cuts ACROSS the races — a newcomer is IN a race, not instead of one — so it is set
   apart and carries the newcomer green rather than sitting among the race filters. */
.r26-fb.nc{margin-left:10px;border-color:var(--leaf)}
.r26-fb.nc b{font-family:var(--num);font-size:11px;margin-left:5px;
  background:var(--leaf);color:#04220f;border-radius:4px;padding:1px 5px}
.r26-note{font-family:var(--body);font-size:12px;color:#9fb3a8;text-align:center;margin:0 auto 22px}
/* the filter bar gets air beneath it too, so the list does not butt into it */
.r26-filters{margin-bottom:26px}

/* ── the list ────────────────────────────────────────────────────────────────────────────── */
.r26-list{display:flex;flex-direction:column;gap:7px;max-width:980px;margin:0 auto}

/* One rider. A grid, not a table: the row carries four different kinds of thing and a table
   would fight every breakpoint — the same lesson the orders console learned. */
.r26-row{
  display:grid;grid-template-columns:minmax(0,1fr) 178px 168px 14px;gap:14px;align-items:stretch;
  position:relative;overflow:hidden;text-decoration:none;color:inherit;
  padding:8px 14px;border-radius:12px;
  background:rgba(0,0,0,.40);border:1px solid rgba(228,228,216,.12);
  transition:border-color .2s ease,background .2s ease;
}
.r26-row:hover{border-color:rgba(243,146,0,.55);background:rgba(0,0,0,.52)}

/* The flag is a BACKDROP, not a badge — his own 2018 treatment. It costs the row no width and
   must never compete with the name, hence the low opacity and the fade to nothing. */
.r26-flag{
  position:absolute;inset:0 auto 0 0;width:240px;
  background-size:cover;background-position:center;
  opacity:.5;filter:brightness(.58) saturate(1.05);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 48%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 48%,transparent 100%);
}

/* ── ONE FRAME FOR EVERY COLUMN ────────────────────────────────────────────────────────
   A fixed band above, the primary item, a fixed band below. Because the band above is the same
   height in all three columns, the primaries begin at the same offset and sit on one line by
   construction. Measured, not nudged: name / plate figure / history figure all level.
   The plate keeps its race labels in the band ABOVE it, which is the whole point of the design. */
.r26-who,.r26-bike,.r26-hist{
  display:grid;grid-template-rows:22px auto 16px;align-content:center;
}
.r26-who{position:relative;min-width:0;text-align:left}
.r26-nm{grid-row:2;align-self:end}
.r26-nat{grid-row:3}
.r26-bl{grid-row:1;align-self:end}
.r26-plate{grid-row:2}
.r26-hs{grid-row:2;align-self:end}
.r26-hl{grid-row:3}
/* the empty second slot must hold the same frame or the row collapses unevenly */
.r26-bike:empty{display:grid}
/* nothing to show in this column: keep the frame, print nothing */
.r26-none{grid-row:2;align-self:center}
/* both are SPANS inside a span — without this they run together on one line */
.r26-nm,.r26-nat{display:block}
.r26-nm{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:17px;line-height:1.2;color:var(--cream);letter-spacing:.3px}
.r26-nat{font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:1.2px;
  text-transform:uppercase;color:#9fb3a8}
.r26-new{display:inline-block;font-family:var(--disp);font-size:9px;letter-spacing:1.1px;
  text-transform:uppercase;padding:2px 6px;border-radius:4px;
  background:var(--leaf);color:#04220f;margin-left:7px;vertical-align:2px}

/* ── THE PLATES ──────────────────────────────────────────────────────────────────────────────
   ONE PLATE PER BIKE, not one chip per race. A pairing IS a bike and it carries ONE number, so
   printing it against each race was the same figure twice over. Junior & Sportbike run the RED
   plate, Senior & Supersport the WHITE — the confirmed 2026 plates.
   Two fixed slots, so the plates line up in two columns down the page and an absent bike leaves
   a gap rather than sliding across. A rider on both bikes shows both numbers, which is the point:
   31 of the 32 carry a different one in each. */
.r26-bikes{position:relative;display:grid;grid-template-columns:82px 82px;gap:14px;justify-content:center;align-items:stretch}
.r26-bl{align-items:center}

.r26-bl{display:flex;flex-direction:column;line-height:1.2;justify-content:flex-end}
.r26-bl span{font-family:var(--disp);font-size:8.5px;letter-spacing:1.1px;text-transform:uppercase;color:#9fb3a8;text-align:center}
.r26-plate{
  font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:21px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  height:36px;border-radius:6px;padding:0 6px;
}
.r26-plate.red{background:#c0392b;color:#fff}
.r26-plate.white{background:#f4f4f2;color:#123f8c}

/* ── history ─────────────────────────────────────────────────────────────────────────────── */
.r26-hist{position:relative;text-align:center}
.r26-hs{font-family:var(--num);font-weight:700;font-size:14px;line-height:1.15;color:var(--cream)}
.r26-hl{font-family:var(--disp);font-size:8.5px;letter-spacing:1.1px;text-transform:uppercase;color:#9fb3a8;display:block}
.r26-hs{display:block}
.r26-none{font-family:var(--disp);font-size:9px;letter-spacing:1.1px;text-transform:uppercase;color:#7d8f85;display:block;line-height:1.35}

@media(max-width:760px){
  .r26-row{grid-template-columns:minmax(0,1fr) 178px 14px;gap:10px}
  .r26-chev{grid-row:1;grid-column:3}
  .r26-hist{grid-column:1 / -1;text-align:left;display:flex;align-items:baseline;gap:8px}
  .r26-hl{margin:0}
  .r26-flag{width:165px}
}
@media(max-width:430px){
  .r26-row{grid-template-columns:minmax(0,1fr) 14px}
  .r26-bikes{grid-column:1 / -1}
  .r26-tally{gap:16px}
}

/* a rider the archive does not hold is not a link — same bar, no hover promise */
.r26-row.nolink{cursor:default}
.r26-row.nolink:hover{border-color:rgba(228,228,216,.12);background:rgba(0,0,0,.40)}

/* ══ THE ACCORDION ═══════════════════════════════════════════════════════════════════════════
   A rider opens IN PLACE — his instruction, 13 Aug: not a kick to another page.
   ★ NOTHING HERE ANIMATES LAYOUT. The panel is hidden or shown outright and only its opacity
     moves. A height or max-height transition is the thing the build rules forbid, and on an
     83-row list it would also fight the browser's own scrolling.                              */
.r26-item{display:block}
/* the bar is now a BUTTON, so its own chrome has to be cleared before it looks like a bar */
button.r26-row{width:100%;border:1px solid rgba(228,228,216,.12);font:inherit;text-align:inherit;
  cursor:pointer;-webkit-appearance:none;appearance:none}
button.r26-row:disabled{cursor:default;opacity:1}
button.r26-row:disabled:hover{border-color:rgba(228,228,216,.12);background:rgba(0,0,0,.40)}
button.r26-row:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* the chevron — turns with the panel. transform only. */
.r26-chev{position:relative;width:11px;height:11px;justify-self:end;align-self:center;
  border-right:2px solid #9fb3a8;border-bottom:2px solid #9fb3a8;
  transform:rotate(45deg);transition:transform .18s ease,border-color .18s ease}
.r26-item.open .r26-chev{transform:rotate(-135deg);border-color:var(--orange)}
.r26-item.open > button.r26-row{border-color:rgba(243,146,0,.55);background:rgba(0,0,0,.55);
  border-bottom-left-radius:0;border-bottom-right-radius:0}

.r26-panel{
  background:rgba(0,0,0,.52);
  border:1px solid rgba(243,146,0,.35);border-top:0;
  border-radius:0 0 12px 12px;
  padding:4px 14px 10px;
  animation:r26fade .18s ease both;      /* opacity only */
}
@keyframes r26fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.r26-panel{animation:none}.r26-chev{transition:none}}

/* one grid for the head and every result row, so the columns cannot drift */
.r26-thead,.r26-res{
  display:grid;
  grid-template-columns:54px minmax(84px,1fr) 44px minmax(0,1.5fr) 108px 78px 46px;
  gap:10px;align-items:center;
}
.r26-thead{
  font-family:var(--disp);font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:#7d8f85;padding:7px 4px 5px;border-bottom:1px solid rgba(228,228,216,.10);
}
.r26-res{padding:5px 4px;border-bottom:1px solid rgba(228,228,216,.06)}
.r26-res:last-child{border-bottom:0}
.r26-c{text-align:center}
.r26-r{text-align:right}

/* A YEAR STAYS GRAVESEND — the font law's own exception. Every other figure is Plex Mono. */
.r26-y{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--cream)}
.r26-rc{font-family:var(--disp);font-weight:500;font-size:10.5px;letter-spacing:1.1px;
  text-transform:uppercase;color:#9fb3a8}
.r26-p{font-family:var(--num);font-weight:700;font-size:14px;color:var(--cream)}
.r26-m{font-family:var(--body);font-size:12px;color:#c9d6cf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r26-rep{display:inline-block;font-family:var(--disp);font-style:normal;font-size:8.5px;
  letter-spacing:1.1px;text-transform:uppercase;color:#04220f;background:#c8b273;
  border-radius:3px;padding:1px 5px;margin-left:7px;vertical-align:1px}
.r26-t,.r26-s{font-family:var(--num);font-size:12px;color:#c9d6cf;font-variant-numeric:tabular-nums}
.r26-pdf a{font-family:var(--disp);font-size:9px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--orange);text-decoration:none;border:1px solid rgba(243,146,0,.4);
  border-radius:4px;padding:2px 6px}
.r26-pdf a:hover{background:rgba(243,146,0,.14)}

@media(max-width:760px){
  .r26-thead{display:none}
  .r26-res{grid-template-columns:46px 1fr 40px;grid-template-areas:"y rc p" "m m m" "t s pdf";gap:3px 10px;
    padding:9px 4px}
  .r26-y{grid-area:y}.r26-rc{grid-area:rc}.r26-p{grid-area:p;text-align:right}
  .r26-m{grid-area:m;white-space:normal}
  .r26-t{grid-area:t;text-align:left}.r26-s{grid-area:s;text-align:left}
  .r26-pdf{grid-area:pdf;text-align:right}
}
/* ── the panel's two sections ────────────────────────────────────────────────────────────
   THIS MEETING'S SESSIONS sit above the race record, because they are what is happening now.
   They are visibly a different thing: a green rule and no position column, so a qualifying
   lap can never be read as a race result.                                                  */
.r26-sect{
  font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--leaf);
  padding:10px 4px 5px;margin-top:2px;
  border-bottom:1px solid rgba(40,152,81,.30);
}
.r26-shead,.r26-sess{
  display:grid;grid-template-columns:minmax(0,1.6fr) 116px 104px 74px 46px;
  gap:10px;align-items:center;
}
.r26-shead{
  font-family:var(--disp);font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:#7d8f85;padding:7px 4px 5px;border-bottom:1px solid rgba(228,228,216,.10);
}
.r26-sess{padding:5px 4px;border-bottom:1px solid rgba(228,228,216,.06)}
.r26-sess:last-of-type{border-bottom:0}
.r26-sn{font-family:var(--body);font-size:12px;color:#c9d6cf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r26-sk{font-family:var(--disp);font-weight:500;font-size:9.5px;letter-spacing:1.1px;
  text-transform:uppercase;color:#9fb3a8}
@media(max-width:760px){
  .r26-shead{display:none}
  .r26-sess{grid-template-columns:1fr auto;grid-template-areas:"sn sk" "t s" "pdf pdf";gap:3px 10px;padding:9px 4px}
  .r26-sn{grid-area:sn;white-space:normal}.r26-sk{grid-area:sk;text-align:right}
  .r26-sess .r26-t{grid-area:t;text-align:left}.r26-sess .r26-s{grid-area:s;text-align:left}
  .r26-sess .r26-pdf{grid-area:pdf;text-align:right}
}
/* an uncredited block — visibly set apart, and dimmed so it cannot be mistaken for the record */
.r26-sect.r26-warn{color:#c8a24a;border-bottom-color:rgba(200,162,74,.30);
  text-transform:none;letter-spacing:.4px;font-family:var(--body);font-size:11px;font-weight:700}
.r26-res.r26-dim{opacity:.62}
/* ── the fold ────────────────────────────────────────────────────────────────────────────
   One line standing in for the whole pre-Covid record. Reads as a control, not as a result:
   its own row, dimmer than a result line, with the count carried in Plex Mono because it is a
   figure and the words beside it in the display face because they are a label.             */
.r26-more{
  display:flex;align-items:center;gap:9px;width:100%;
  margin:6px 0 2px;padding:7px 4px;
  background:transparent;border:0;border-top:1px solid rgba(228,228,216,.10);
  font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.r26-more:hover .r26-morel{color:var(--cream)}
.r26-more:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.r26-morec{font-family:var(--num);font-weight:700;font-size:13px;color:var(--cream)}
.r26-morel{font-family:var(--disp);font-weight:500;font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;color:#7d8f85;transition:color .18s ease}
.r26-chev2{margin-left:auto;width:8px;height:8px;
  border-right:2px solid #7d8f85;border-bottom:2px solid #7d8f85;
  transform:rotate(45deg);transition:transform .18s ease,border-color .18s ease}
.r26-more.open .r26-chev2{transform:rotate(-135deg);border-color:var(--orange)}
@media(prefers-reduced-motion:reduce){.r26-chev2{transition:none}}