/*
 * rider-stats.css — rider career stat row, replica boxes and bests.  v4 (30 Jul 2026)
 *
 * Loaded by BOTH /results and /race-database alongside rider-stats.js, so the card looks identical
 * in the two rider views and only has to be changed once.
 * Colours are site variables, plus the award colours below which are taken from the OFFICIAL
 * result sheets so the web card and the printed PDF agree.
 */

/* the silver and bronze in the printed result sheets (mgpBikeSvg in the PDF builder) */
:root{
  --rs-silver:#8f9499;
  --rs-bronze:#a9713d;
  --rs-gold:#C9A227;
  --rs-red:#c0392b;      /* the site danger red, reused rather than inventing a fourth red */
}

/* ── the rider name (v4: 50% bigger, and room before the boxes) ────────────────────────────────
   These selectors belong to race-database.css and results.css, but they live here because this
   file loads after both on both pages and this is the one place the two views share. */
.rd-rname{ font-size:32px !important; line-height:1.1; }          /* was 21px */
.rname{ font-size:clamp(33px,5.1vw,45px) !important; line-height:1.06; }  /* was clamp(22,3.4vw,30) */
.rd-rname, .rname{ margin-bottom:18px; }

.rd-rname, .rname,
.rd-rmeta, .rmeta{ text-align:center; }

/* ── the numeric tiles ───────────────────────────────────────────────────────────────────────── */
.rstats{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:2px 0 12px;
}
.rstat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:66px;padding:9px 11px;
  border-radius:12px;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(40,152,81,.30);
  text-decoration:none;
}
/* Inter, NOT the Gravesend data face: in Gravesend the numeral 1 is all but identical to a capital
   I, so the best-finish tile rendered "P1" as "PI". */
.rstat b{
  font-family:var(--body);font-weight:700;font-style:normal;
  font-size:20px;line-height:1;letter-spacing:-.2px;
  color:var(--cream);
}
.rstat i{
  font-family:var(--body);font-style:normal;font-weight:600;
  font-size:12px;line-height:1;letter-spacing:.4px;text-transform:uppercase;
  color:#9fb3a8;white-space:nowrap;
}

/* ── animated borders (v4) ───────────────────────────────────────────────────────────────────
   ⚠ Only border-COLOUR and box-shadow animate. Never border-width, never padding: those are
   layout and would make the whole row judder — the house rule. */
@keyframes rsGold{
  0%,100%{ border-color:rgba(201,162,39,.42); box-shadow:0 0 0 0 rgba(201,162,39,0); }
  50%    { border-color:rgba(201,162,39,1);   box-shadow:0 0 13px 0 rgba(201,162,39,.38); }
}
@keyframes rsGreen{
  0%,100%{ border-color:rgba(40,152,81,.40); box-shadow:0 0 0 0 rgba(40,152,81,0); }
  50%    { border-color:rgba(40,152,81,1);   box-shadow:0 0 13px 0 rgba(40,152,81,.36); }
}
@keyframes rsRed{
  0%,100%{ border-color:rgba(192,57,43,.40); box-shadow:0 0 0 0 rgba(192,57,43,0); }
  50%    { border-color:rgba(192,57,43,1);   box-shadow:0 0 13px 0 rgba(192,57,43,.36); }
}
@keyframes rsSilver{
  0%,100%{ border-color:rgba(143,148,153,.38); box-shadow:0 0 0 0 rgba(143,148,153,0); }
  50%    { border-color:rgba(143,148,153,1);   box-shadow:0 0 14px 0 rgba(143,148,153,.34); }
}
@keyframes rsBronze{
  0%,100%{ border-color:rgba(169,113,61,.38); box-shadow:0 0 0 0 rgba(169,113,61,0); }
  50%    { border-color:rgba(169,113,61,1);   box-shadow:0 0 14px 0 rgba(169,113,61,.34); }
}

.rstat-win  { animation:rsGold  3.2s ease-in-out infinite; }
.rstat-win b{ color:var(--rs-gold); }
.rstat-best { animation:rsGreen 3.2s ease-in-out infinite; }
.rstat-best:hover b{ color:var(--leaf); }
.rhon-fast  { animation:rsRed   3.2s ease-in-out infinite; }
.rhon-fast:hover b{ color:var(--rs-red); }

/* a linked tile still has to look clickable */
a.rstat, a.rhon-i{ cursor:pointer; }
a.rstat:focus-visible, a.rhon-i:focus-visible{ outline:2px solid var(--orange);outline-offset:3px; }

/* ── replica boxes: ONE PER TIER, the bike mark above the wording (v4) ───────────────────────── */
.reps{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:0 0 12px;
}
.rep{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-width:150px;padding:12px 16px 11px;
  border-radius:14px;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(228,228,216,.18);
}
/* both tiers get the SAME image size, as asked */
.rep-bike{ display:block;width:96px;height:auto; }
.rep-n{
  font-family:var(--body);font-weight:700;
  font-size:12.5px;line-height:1.2;letter-spacing:.4px;text-transform:uppercase;
  color:var(--cream);text-align:center;
}
.rep-silver       { animation:rsSilver 3.4s ease-in-out infinite; }
.rep-silver .rep-bike{ color:var(--rs-silver); }
.rep-bronze       { animation:rsBronze 3.4s ease-in-out infinite; }
.rep-bronze .rep-bike{ color:var(--rs-bronze); }
.rep-gold         { animation:rsGold   3.4s ease-in-out infinite; }
.rep-gold .rep-bike  { color:var(--rs-gold); }

/* ── the fastest-ride box ────────────────────────────────────────────────────────────────────── */
.rhon{ display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 14px; }
.rhon-i{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
  padding:8px 12px;border-radius:12px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(40,152,81,.22);
  text-decoration:none;
}
.rhon-i i{
  font-family:var(--body);font-style:normal;font-weight:600;
  font-size:11px;line-height:1;letter-spacing:.5px;text-transform:uppercase;color:#9fb3a8;
}
.rhon-i b{ font-family:var(--body);font-weight:700;font-size:14.5px;line-height:1.15;color:var(--cream); }
.rhon-i em{ font-style:normal;font-family:var(--body);font-size:12px;line-height:1.15;color:#9fb3a8; }
.rhon-note{
  font-family:var(--body);font-size:12.5px;line-height:1.35;color:#9fb3a8;
  background:none;border:0;padding:2px 0;max-width:40ch;
  margin:0 auto 12px;text-align:center;
}

/* ── reduced motion: hold the borders at their bright state, do not pulse ───────────────────── */
@media(prefers-reduced-motion:reduce){
  .rstat-win,.rstat-best,.rhon-fast,.rep-silver,.rep-bronze,.rep-gold{ animation:none; }
  .rstat-win { border-color:var(--rs-gold); }
  .rstat-best{ border-color:var(--leaf); }
  .rhon-fast { border-color:var(--rs-red); }
  .rep-silver{ border-color:var(--rs-silver); }
  .rep-bronze{ border-color:var(--rs-bronze); }
  .rep-gold  { border-color:var(--rs-gold); }
}

/* ── light theme (the staff consoles render these views on desert-sand) ─────────────────────── */
[data-theme="light"] .rstat{ background:rgba(17,40,27,.05);border-color:rgba(17,40,27,.18); }
[data-theme="light"] .rstat b{ color:var(--forest); }
[data-theme="light"] .rstat i{ color:#4a5d52; }
[data-theme="light"] .rep,
[data-theme="light"] .rhon-i{ background:rgba(17,40,27,.04);border-color:rgba(17,40,27,.14); }
[data-theme="light"] .rep-n,
[data-theme="light"] .rhon-i b{ color:var(--forest); }
[data-theme="light"] .rhon-i i,
[data-theme="light"] .rhon-i em,
[data-theme="light"] .rhon-note{ color:#4a5d52; }

/* ── Phones ───────────────────────────────────────────────────────────────────────────────────
   A wrap-flex row put the fifth tile on a line of its own stretched to full width (measured at
   375px: 283px wide, row 2 lines tall). An explicit 5-column grid is deterministic instead. */
@media(max-width:430px){
  .rstats{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px; }
  .rstat{ min-width:0;padding:7px 2px; }
  .rstat b{ font-size:17px; }
  .rstat i{ font-size:10px;letter-spacing:0; }
  /* two replica boxes side by side still fit at 375; the bike shrinks with them */
  .reps{ gap:6px; }
  .rep{ min-width:0;flex:1 1 0;padding:10px 8px 9px; }
  .rep-bike{ width:74px; }
  .rep-n{ font-size:10.5px;letter-spacing:.2px; }
  .rhon-i{ width:100%;padding:7px 10px; }
  .rhon-i b{ font-size:13.5px; }
  .rd-rname{ font-size:26px !important; }
  .rname{ font-size:clamp(26px,7.4vw,34px) !important; }
  .rd-rname, .rname{ margin-bottom:14px; }
}
/* Very narrow: five columns cannot hold "PODIUMS" without clipping it, and a clipped label is
   worse than a second line. */
@media(max-width:359px){
  .rstats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rstat i{ font-size:10.5px; }
  .rep-bike{ width:64px; }
}

/* ══ v5: the two replica boxes are the SAME WIDTH ══════════════════════════════════════════════
   Measured at 768px they came out 189px and 199px, because "2 × BRONZE REPLICAS" is a wider
   caption than "9 × SILVER REPLICAS". The images were already identical, but boxes that differ by
   10px read as sloppy — the same complaint the rider record itself drew. A fixed width equalises
   them and still centres a lone box. */
.rep{ flex:0 0 auto;width:200px; }
@media(max-width:430px){
  /* on a phone they share the row instead, so they stay equal AND fit */
  .rep{ flex:1 1 0;width:auto; }
}

/* ══ v6 (30 Jul 2026, owner feedback) ═════════════════════════════════════════════════════════
   "the replica boxes can be maybe 25% smaller they are too big" — and the Finisher's Medal joins
   them on the same line. The fastest ride comes OUT of its cube onto one divided line. */

/* ── replica / medal boxes, 25% down from v5 ──────────────────────────────────────────────── */
.rep{ width:150px;padding:9px 12px 8px;gap:5px;border-radius:12px; }   /* was 200px / 12px 16px 11px */
.rep-bike{ width:72px; }                                              /* was 96px */
.rep-n{ font-size:11px;letter-spacing:.3px; }                         /* was 12.5px */
/* the medal is a portrait mark, so it is sized by HEIGHT to sit level with the bikes */
.rep-medal{ width:auto;height:52px; }
.rep-finisher{ animation:rsMedal 3.4s ease-in-out infinite; }
@keyframes rsMedal{
  0%,100%{ border-color:rgba(217,169,63,.38); box-shadow:0 0 0 0 rgba(217,169,63,0); }
  50%    { border-color:rgba(217,169,63,1);   box-shadow:0 0 14px 0 rgba(217,169,63,.32); }
}

/* ── the fastest ride: ONE LINE, dividers drawn as borders ─────────────────────────────────── */
.rhon-line .rhon-i{
  flex-direction:row;align-items:center;gap:0;
  padding:0;overflow:hidden;
}
.rhon-line .rhon-i > i,
.rhon-line .rhon-i > b,
.rhon-line .rhon-i > em{
  padding:8px 13px;
  border-left:1px solid rgba(228,228,216,.16);
  white-space:nowrap;
}
/* no divider before the first cell */
.rhon-line .rhon-i > :first-child{ border-left:0; }

@media(max-width:430px){
  .rep{ width:auto;padding:8px 6px 7px; }
  .rep-bike{ width:58px; }        /* was 74px */
  .rep-medal{ width:auto;height:44px; }
  .rep-n{ font-size:10px;letter-spacing:.1px; }
  /* the fastest line still fits at 375 because the cells are short, but let it wrap rather than
     overflow if a class name ever gets long */
  .rhon-line .rhon-i{ flex-wrap:wrap; }
  .rhon-line .rhon-i > i,
  .rhon-line .rhon-i > b,
  .rhon-line .rhon-i > em{ padding:7px 10px; }
}
@media(max-width:359px){
  .rep-bike{ width:50px; }
  .rep-medal{ width:auto;height:38px; }
}

/* ══ v7: PHOTOS / VIDEOS placeholder panels ═══════════════════════════════════════════════════
   The owner wants the slots on the card now, clearly unfinished, ready to carry galleries later.
   Deliberately FADED, dashed, and captioned "coming soon" so nobody mistakes them for live links.
   The glyph sits BEHIND the wording as a watermark and the faint diagonal banding reads as
   under-construction without resorting to hazard tape. */
.soon{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:0 0 14px;
}
.soon-i{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:150px;min-height:78px;padding:10px 12px;
  border-radius:12px;
  border:1px dashed rgba(228,228,216,.26);
  background:
    repeating-linear-gradient(135deg,
      rgba(228,228,216,.035) 0 8px,
      rgba(228,228,216,0)    8px 16px),
    rgba(0,0,0,.22);
  opacity:.62;                       /* the "faded" the owner asked for */
  cursor:default;
}
/* the watermark glyph — behind everything, and it must not intercept a tap */
.soon-g{
  position:absolute;right:6px;bottom:2px;
  width:56px;height:56px;
  color:var(--cream);opacity:.10;
  pointer-events:none;
}
.soon-t{
  position:relative;
  font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--cream);
}
.soon-s{
  position:relative;
  font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.6px;
  text-transform:uppercase;color:#9fb3a8;
}

@media(max-width:430px){
  .soon{gap:6px}
  .soon-i{width:auto;flex:1 1 0;min-height:66px;padding:9px 8px}
  .soon-t{font-size:11.5px}
  .soon-s{font-size:9.5px;letter-spacing:.3px}
  .soon-g{width:44px;height:44px;right:4px;bottom:0}
}