/* ==========================================================================
   Leaderboard — a CSS rebuild of inputDocs/SVG/leaderboard.svg.
   Gradient angles and stops below are converted straight from the source
   <linearGradient> definitions; column widths are the artwork's polygon
   widths expressed as a percentage of the 1157.8px table span.
   ========================================================================== */

.board {
  flex: 1 1 auto;
  display: grid;
  /* artwork: table 1157.8px : circuit panel 593.4px  →  66 : 34 */
  grid-template-columns: minmax(0, 66fr) minmax(260px, 34fr);
  gap: clamp(22px, 3.6vw, 60px);
  align-items: start;
  padding: clamp(16px, 2.6vw, 40px) var(--gutter) clamp(20px, 3vw, 40px);
}

/* ── table head ──────────────────────────────────────────────────────────── */
.board__head {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: end;
  margin-bottom: clamp(8px, 1vw, 14px);
  padding-inline-start: 1.2%;
  font-size: clamp(12px, 1.6vw, 26px);
  font-weight: 700; font-style: italic; letter-spacing: .01em;
}
.board__head span:nth-child(3) { padding-inline-start: 3%; }

/* ── rows ────────────────────────────────────────────────────────────────── */
/* Exact artwork proportions: rank 188.56 | gap 15.17 | player 759.23 | gap 6.28 | time 188.56 */
.rows {
  --cols: 16.29% 1.31% 65.58% .54% 16.29%;
  --row-h: clamp(38px, 4.7vw, 58px);
  display: flex; flex-direction: column;
  gap: clamp(4px, .58vw, 7px);
  list-style: none; padding: 0; margin: 0;
}
.board__head { --cols: 16.29% 1.31% 65.58% .54% 16.29%; }

.row {
  display: grid;
  grid-template-columns: var(--cols);
  min-height: var(--row-h);
}
/* Only the first paint sweeps in — see render() in leaderboard.js. */
.rows[data-animate="true"] .row {
  animation: row-in .42s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}
@keyframes row-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.row__cell { position: relative; display: flex; align-items: center; transform: skewX(var(--skew)); }
.row__cell > * { transform: skewX(calc(var(--skew) * -1)); }
.row__gap { grid-column: span 1; }

/* Rank badge — source .cls-7 / linear-gradient-2, brightest at the inner edge */
.row__rank {
  grid-column: 1;
  justify-content: center;
  background: linear-gradient(281deg,
    rgba(237,28,36,1)   0%,
    rgba(237,28,36,.91) 13%,
    rgba(237,28,36,.69) 39%,
    rgba(237,28,36,.33) 77%,
    rgba(237,28,36,.1) 100%);
}
/* The artwork gives ranks 1–3 the full-strength badge and 4+ a 50% one. */
.row[data-podium="false"] .row__rank { opacity: .5; }

/* Player bar — .cls-22 / linear-gradient-6 (#58595b @ .35) */
.row__player {
  grid-column: 3;
  padding-inline: 3.2%;
  background: linear-gradient(282deg,
    rgba(88,89,91,.35)  0%,
    rgba(88,89,91,.33)  21%,
    rgba(88,89,91,.26)  48%,
    rgba(88,89,91,.16)  79%,
    rgba(88,89,91,.07) 100%);
}
.row__time { grid-column: 5; justify-content: flex-start; padding-inline-start: 8%; }

/* Leader row — .cls-6 / linear-gradient-4 on the name bar, .cls-20 on the time */
.row--leader .row__player {
  background: linear-gradient(102deg,
    rgba(237,28,36,1)   0%,
    rgba(237,28,36,.73) 26%,
    rgba(237,28,36,.4)  62%,
    rgba(237,28,36,.18) 88%,
    rgba(237,28,36,.1) 100%);
}
.row--leader .row__time {
  background: linear-gradient(281deg,
    rgba(237,28,36,.45) 0%,
    rgba(237,28,36,.41) 13%,
    rgba(237,28,36,.31) 39%,
    rgba(237,28,36,.15) 77%,
    rgba(237,28,36,.05) 100%);
}

/* ── row typography ──────────────────────────────────────────────────────── */
.row__num {
  font-size: clamp(13px, 1.62vw, 25px); font-weight: 700; font-style: italic;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.row__name {
  font-size: clamp(12.5px, 1.58vw, 24.5px); font-weight: 700; font-style: italic;
  letter-spacing: .005em; line-height: 1.1;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__lap {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.4vw, 22px); font-weight: 700; font-style: italic;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1;
  white-space: nowrap;
}
.row__lap[data-empty="true"] { color: var(--muted-dim); }

/* Position movement since the previous poll */
.row__delta {
  margin-inline-start: 8px; font-family: var(--font-mono); font-size: .62em;
  font-style: normal; font-weight: 700; letter-spacing: 0; opacity: .95;
}
.row__delta[data-dir="up"]   { color: #6ee7a4; }
.row__delta[data-dir="down"] { color: #ff9ba1; }
.row__delta[data-dir="new"]  { color: var(--warn); }
.row--moved { animation: flash 1.1s var(--ease); }
@keyframes flash { 0% { filter: brightness(2.1); } 100% { filter: none; } }

/* ── loading / empty states ──────────────────────────────────────────────── */
.skeleton .row__rank, .skeleton .row__player, .skeleton .row__time {
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05));
  background-size: 220% 100%; animation: shimmer 1.35s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }
.empty {
  padding: clamp(34px, 7vw, 74px) 8%; text-align: center;
  background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.14);
}
.empty h2 { font-size: clamp(17px, 2.2vw, 26px); font-style: italic; margin-bottom: 8px; }
.empty p  { color: var(--muted); font-size: 14px; font-weight: 600; max-width: 46ch; margin-inline: auto; }

/* ── circuit panel ───────────────────────────────────────────────────────── */
.circuit { display: flex; justify-content: center; }
.circuit__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 595.42 / 692.44;   /* the artwork's frame polygon bounds */
  container-type: inline-size;
}
.circuit__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.circuit__name {
  position: absolute; left: 0; right: 0; top: 13.6%;
  text-align: center; font-size: 9.8cqw; font-weight: 700; font-style: italic;
  letter-spacing: .012em; line-height: 1;
}
.circuit__country {
  position: absolute; left: 0; right: 0; top: 22.1%;
  text-align: center; color: var(--gr-red);
  font-family: var(--font-mono); font-size: 3.6cqw; font-weight: 700; font-style: italic;
  letter-spacing: .01em; line-height: 1;
}
/* Circuit outline — placed from its bbox relative to the frame polygon */
.circuit__map { position: absolute; left: 16.4%; top: 36.3%; width: 66.8%; }
.circuit__meta {
  position: absolute; left: 12%; right: 12%; bottom: 6.5%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 6px;
}
.circuit__meta div { text-align: center; }
.circuit__meta dt {
  font-size: 2.6cqw; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.circuit__meta dd {
  margin: 2px 0 0; font-family: var(--font-mono); font-size: 3.6cqw; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── status strip above the table ────────────────────────────────────────── */
.board__status {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  margin-bottom: clamp(10px, 1.4vw, 18px);
}
.board__status p { color: var(--muted); font-size: 13px; font-weight: 600; }
.board__status .spacer { flex: 1 1 auto; }
.board__count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }

/* ══ tablet ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  /* The standings are the reason for the page — keep the circuit art below them
     rather than pushing the table a screen and a half down. */
  .circuit { order: 2; max-width: 320px; margin: clamp(20px, 5vw, 36px) auto 0; width: 100%; }
  #fullscreen { display: none; }
  .rows { --row-h: clamp(42px, 6.6vw, 56px); }
  .row__num  { font-size: clamp(14px, 2.3vw, 22px); }
  .row__name { font-size: clamp(13px, 2.2vw, 21px); }
  .row__lap  { font-size: clamp(12px, 2vw, 19px); }
}

/* ══ phone — stack name over lap time inside one bar ═════════════════════ */
@media (max-width: 600px) {
  .board { padding-inline: clamp(10px, 3vw, 18px); }
  .rows { --cols: 21% 2% 77%; --row-h: 54px; }
  .board__head { display: none; }

  .row { grid-template-columns: var(--cols); }
  .row__time { display: none; }               /* folded into the player bar */
  .row__player { grid-column: 3; flex-direction: column; align-items: flex-start; justify-content: center;
                 padding-inline: 6% 4%; gap: 2px; }
  .row__player > * { width: 100%; }
  .row__name { font-size: 15px; letter-spacing: 0; }
  .row__lap--inline {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 13px; color: rgba(255,255,255,.88);
  }
  .row__lap--inline .row__lap-label {
    font-family: var(--font-display); font-size: 9.5px; font-weight: 700; font-style: normal;
    letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
  .row--leader .row__lap--inline { color: #fff; }
  .row__num { font-size: 19px; }
  .circuit { max-width: 280px; }
  .board__status { gap: 8px 12px; }
  .board__status p, .board__count { font-size: 12px; }
  .board__status .spacer { display: none; }
  .board__count { order: 3; }
}
@media (min-width: 601px) { .row__lap--inline { display: none; } }

/* ── the just-finished driver ────────────────────────────────────────────
   The board shows the top N, then pins whoever most recently posted a time so
   a driver walking up to the screen sees their own result without waiting for
   a scroll. Inside the top N they are highlighted in place instead.        */
.rows__break {
  display: flex; align-items: center; gap: 12px;
  padding: clamp(6px, 1vw, 12px) 2% clamp(2px, .5vw, 6px);
  color: var(--muted-dim); font-size: clamp(10px, 1.05vw, 12.5px);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.rows__break::before,
.rows__break::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.26) 0 5px, transparent 5px 11px);
}
.rows__break span { flex: none; }

.row--latest .row__name { color: #fff; }
.row--latest .row__player { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.row--latest .row__rank   { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }

/* Pinned below the cut: brighten the bar so it reads as a separate statement. */
.row--pinned .row__player {
  background: linear-gradient(282deg,
    rgba(88,89,91,.62) 0%, rgba(88,89,91,.5) 48%, rgba(88,89,91,.24) 100%);
}
.row--pinned .row__rank { opacity: 1; }

/* "JUST NOW" chip */
.row__flag {
  margin-inline-start: 10px; padding: 3px 9px;
  background: var(--white); color: var(--ink);
  font-family: var(--font-display); font-size: .5em; font-weight: 700; font-style: normal;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  vertical-align: middle;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.row--leader .row__flag { background: var(--ink); color: var(--white); }

@media (max-width: 600px) {
  .row__flag { margin-inline-start: 7px; padding: 2px 6px; font-size: 8.5px; letter-spacing: .08em; }
  .rows__break { padding-inline: 4%; font-size: 9.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TV / venue-screen fit
   ─────────────────────────────────────────────────────────────────────────
   A leaderboard on a mounted screen must fill it exactly: no scrollbar, no
   clipped footer, nobody walking over to nudge a mouse. Everything above was
   sized off viewport *width*, which is fine on a desktop but overflows a 16:9
   panel — 37px at 1080p, 352px at 720p.

   So the page becomes exactly one viewport tall and the rows share whatever
   height is left over. Type is capped against viewport height as well as
   width, so a short screen shrinks the text instead of losing the footer.
   ══════════════════════════════════════════════════════════════════════════ */

.plate--fit {
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}

.plate--fit .masthead { flex: 0 0 auto; padding-block: clamp(6px, 1.4vh, 22px); }
.plate--fit .footer   { flex: 0 0 auto; padding-block: clamp(6px, 1.4vh, 26px); }
.plate--fit .notice   { flex: 0 0 auto; }

.plate--fit .board {
  flex: 1 1 auto;
  min-height: 0;                       /* lets the grid shrink below content */
  padding-block: clamp(6px, 1.6vh, 40px);
  /* The status strip takes only what it needs; the standings and circuit take
     the rest. Without explicit rows the grid stretches both evenly and leaves
     a screen-sized gap above the table. */
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
}
.plate--fit .board > div:has(.rows) {   /* the table column */
  display: flex; flex-direction: column; min-height: 0;
}
.plate--fit .board__status { flex: 0 0 auto; margin-bottom: clamp(4px, 1vh, 18px); }

/* Rows divide the leftover height between them rather than each claiming a
   fixed one — so ten rows, or ten plus a pinned finisher, both fit. */
.plate--fit .rows {
  flex: 1 1 auto;
  min-height: 0;
  gap: clamp(2px, .5vh, 7px);
}
.plate--fit .row {
  flex: 1 1 0;
  min-height: 0;
}
.plate--fit .rows__break { flex: 0 0 auto; padding-block: clamp(1px, .4vh, 10px); }

/* Cap type against height as well as width. */
.plate--fit .row__num  { font-size: min(clamp(13px, 1.62vw, 25px),   4.2vh); }
.plate--fit .row__name { font-size: min(clamp(12.5px, 1.58vw, 24.5px), 4vh); }
.plate--fit .row__lap  { font-size: min(clamp(11px, 1.4vw, 22px),    3.6vh); }
.plate--fit .board__head { font-size: min(clamp(12px, 1.6vw, 26px),  3.4vh); }
.plate--fit .masthead__logo  { width: min(clamp(104px, 13vw, 186px), 26vh); }
.plate--fit .masthead__label { font-size: min(clamp(15px, 2.1vw, 30px), 4.4vh); }
.plate--fit .masthead__title { font-size: min(clamp(15px, 2.9vw, 46px), 6vh); }
.plate--fit .footer__toyota  { width: min(clamp(96px, 11vw, 158px),  9vh); }
.plate--fit .footer__ekk     { width: min(clamp(100px, 11.5vw, 164px), 9.4vh); }
.plate--fit .footer__gr img  { width: min(clamp(150px, 20vw, 300px), 18vh); }

/* The circuit panel is width-driven by aspect-ratio; stop it dictating height. */
.plate--fit .circuit { align-items: center; min-height: 0; }
.plate--fit .circuit__inner {
  width: auto; height: 100%; max-height: 100%; max-width: 100%;
}

/* Below ~600px tall there is no room for decoration — drop the circuit panel
   and let the standings have the whole screen. */
@media (max-height: 620px) {
  .plate--fit .circuit { display: none; }
  .plate--fit .board { grid-template-columns: minmax(0, 1fr); }
  .plate--fit .footer { padding-block: 4px; }
}