/* ==========================================================================
   Points Championship page — CONTENT styling only.

   Everything here is scoped under .racedata.pts and builds on datapages.css,
   which already owns the tiles, tabs, tables, chips and foot-notes. Only what
   is genuinely new to this page lives here: the ladder, the season grid, the
   race picker and the schedule.

   THE COLOURS MEAN WHAT THEY MEAN IN THE SPREADSHEET. The S.tig standings
   workbook has used the same three for years — red for a race win, green for
   a driver's best finish, grey for a dropped score — so anyone who has read
   that workbook can read this grid without being told.
   ========================================================================== */

.racedata.pts { --gold: #f5b53d; --drop: #64748b; }

/* --------------------------------------------------------------- width */
/* datapages.css caps .racedata at 1100px, which is right for a page of
   prose and wrong for this one: the season grid is 36 columns wide and was
   scrolling sideways on a monitor with room to spare.

   Overridden HERE, scoped to .racedata.pts, rather than in datapages.css —
   that file is shared by Past Winners, Roster, Awards and Stats, and widening
   it would silently reflow all four.

   Prose does NOT get wider with the page. The lede, the foot-note and the
   rules box keep their max-width in `ch`, because a 3000px line of text is
   unreadable no matter how much room there is. Only the things that are
   genuinely tabular grow. */
.racedata.pts {
  max-width: none;
  padding: 22px clamp(16px, 2.2vw, 44px) 120px;
}

/* --------------------------------------------------- season notes */
/* The titlebar becomes two columns: the title on the left, the arguable stats
   in the space to the right of it, which was empty at full width. */
.racedata.pts .titlebar {
  display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap;
}
.racedata.pts .tb-main { min-width: 300px; flex: 0 1 auto; }
.racedata.pts .funstats {
  flex: 1 1 460px; min-width: 0; align-self: stretch;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  padding: 12px 16px 14px;
}
.racedata.pts .funstats[hidden] { display: none; }
.racedata.pts .funstats .fh {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px;
  color: var(--muted); margin: 0 0 10px;
}
.racedata.pts .fgrid {
  display: grid; gap: 10px 18px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.racedata.pts .fitem {
  display: grid; grid-template-columns: auto 1fr; gap: 0 9px;
  align-items: baseline; min-width: 0;
}
.racedata.pts .fitem .ft {
  grid-column: 1 / -1; font-size: 10px; text-transform: uppercase;
  letter-spacing: .9px; color: var(--muted);
}
.racedata.pts .fitem .fv {
  font-family: "Racing Sans One", sans-serif; font-size: 19px; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.racedata.pts .fitem .fn {
  font-size: 13px; color: var(--ink-2); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.racedata.pts .fitem .fd {
  grid-column: 2; font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A couple carry their own colour, because they are the ones worth teasing
   somebody about. */
.racedata.pts .f-cleanest .fv { color: var(--good); }
.racedata.pts .f-roughest .fv { color: var(--bad); }
.racedata.pts .f-slider .fv { color: var(--bad); }
.racedata.pts .f-charger .fv { color: var(--good); }
.racedata.pts .f-poles .fv, .racedata.pts .f-led .fv { color: var(--gold); }
.racedata.pts .f-fastlaps .fv { color: #c084fc; }

@media (max-width: 1100px) {
  .racedata.pts .funstats { flex-basis: 100%; }
}

/* ------------------------------------------------------- which night */
/* Deliberately NOT styled like the view tabs below it. These pick a whole
   championship; those pick a view of one. Making them look the same invites
   the reading that there are six tabs at the same level, and there are not. */
.racedata.pts nav.nights {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 0;
}
.racedata.pts .night {
  appearance: none; font: inherit; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: 12px; padding: 10px 18px; text-align: left;
  display: flex; flex-direction: column; gap: 2px; min-width: 148px;
  transition: border-color .15s, background-color .15s;
}
.racedata.pts .night:hover { border-color: #33507a; color: var(--ink); }
.racedata.pts .night:focus-visible { outline: 2px solid var(--blue-br); outline-offset: 2px; }
.racedata.pts .night[aria-selected="true"] {
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  border-color: var(--red); color: var(--ink);
  box-shadow: inset 3px 0 0 var(--red);
}
.racedata.pts .night .nl { font-size: 15px; font-family: "Racing Sans One", sans-serif; letter-spacing: .3px; }
.racedata.pts .night .ns { font-size: 11.5px; color: var(--muted); }
.racedata.pts .night.todo .nl { color: var(--muted); }

/* ----------------------------------------------- both, side by side */
/* The landing view. Two championships at once, so the answer to "who is
   winning" is there before anything is clicked. */
.racedata.pts .both[hidden] { display: none; }
.racedata.pts .both { margin: 22px 0 0; }
.racedata.pts .bcards {
  display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* The series poster, at the top of its own card. Contained, never cropped --
   one is a tall poster and the other a wide banner, and cover-cropping either
   would cut the wording off. */
/* Poster and sponsor SIDE BY SIDE, not stacked. The two posters are different
   shapes -- one tall, one wide -- so the row centres them and neither is
   cropped. min-width: 0 on the image lets it shrink rather than shoving the
   logo out of the box. */
.racedata.pts .promo {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: #0b1424; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; min-height: 190px;
}
.racedata.pts .promo > img {
  max-width: 100%; max-height: 250px; display: block; min-width: 0;
  flex: 0 1 auto;
}

/* Sponsor logos arrive at every shape and on every background, so this keeps
   them small and uncropped rather than trying to make them uniform. */
.racedata.pts .spon {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  flex: 0 0 auto; padding-left: 16px; border-left: 1px solid var(--line);
  align-self: stretch; justify-content: center;
}
.racedata.pts .spon .sl {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted);
}
.racedata.pts .spon img { max-height: 76px; max-width: 130px; display: block; }
.racedata.pts .spon .sn { font-size: 13px; color: var(--ink-2); text-align: center; }

@media (max-width: 620px) {
  /* Too narrow to sit beside anything. */
  .racedata.pts .promo { flex-direction: column; }
  .racedata.pts .spon {
    flex-direction: row; border-left: 0; border-top: 1px solid var(--line);
    padding: 6px 0 0; width: 100%; align-self: auto;
  }
}

.racedata.pts .blurb {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0;
  max-width: 60ch;
}
.racedata.pts .blurb b { color: var(--ink); font-weight: 600; }

/* the most recent night: small picture, result beside it */
.racedata.pts .lastnight {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 13px;
  align-items: center; background: #0e1a30; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 13px;
}
.racedata.pts .lshot {
  display: block; width: 132px; height: 76px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--line); line-height: 0;
}
.racedata.pts .lshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.racedata.pts .lshot:hover { border-color: var(--blue-br); }
.racedata.pts .lshot.none {
  display: grid; place-items: center; color: var(--muted); font-size: 10px;
  text-align: center; line-height: 1.3; border-style: dashed;
}
.racedata.pts .lwho { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.racedata.pts .ltag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted);
}
.racedata.pts .ltrack {
  font-family: "Racing Sans One", sans-serif; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.racedata.pts .lmeta { font-size: 12px; color: var(--muted); }
.racedata.pts .lwin { font-size: 13px; color: var(--gold); margin-top: 2px; }

.racedata.pts .night.home {
  min-width: 0; border-style: dashed; background: transparent;
}
.racedata.pts .night.home .nl { font-size: 13px; }
.racedata.pts .ncard {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.racedata.pts .ncard header { display: flex; flex-direction: column; gap: 3px; }
.racedata.pts .ncard h2 { font-size: 21px; }
.racedata.pts .ncard .cmeta { color: var(--muted); font-size: 12.5px; margin: 0; }
.racedata.pts .ncard .cmeta b { color: var(--ink-2); font-weight: 600; }
.racedata.pts .ncard.todo { opacity: .8; border-style: dashed; }

/* The league's own screenshot of the most recent night. Capped in height so a
   tall grab cannot push the standings off the card. */
.racedata.pts .nshot { display: block; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--line); line-height: 0; }
.racedata.pts .nshot img {
  width: 100%; height: auto; max-height: 260px; object-fit: cover;
  object-position: center top; display: block;
}
.racedata.pts .nshot:hover { border-color: #33507a; }

.racedata.pts .mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.racedata.pts .mini li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 84px 46px;
  gap: 10px; align-items: center; font-size: 13.5px; padding: 3px 0;
}
.racedata.pts .mini .mr { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.racedata.pts .mini .mn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.racedata.pts .mini .mv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.racedata.pts .mini li:first-child .mn { color: var(--gold); }
.racedata.pts .cmore { color: var(--muted); font-size: 12px; margin: 0; }
.racedata.pts .chip.go {
  align-self: flex-start; cursor: pointer; background: #0e1a30; font: inherit;
  font-size: 12.5px; padding: 8px 14px; color: var(--ink-2); margin-top: auto;
}
.racedata.pts .chip.go:hover { color: #fff; border-color: var(--red); }
.racedata.pts .chip.go:focus-visible { outline: 2px solid var(--blue-br); outline-offset: 2px; }

/* ------------------------------------------------------- pending night */
.racedata.pts .pending[hidden] { display: none; }
.racedata.pts .pending {
  margin: 24px 0 0; background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: 0 14px 14px 0;
  padding: 22px 24px; max-width: 74ch;
}
.racedata.pts .pending h2 { font-size: 20px; margin-bottom: 8px; }
.racedata.pts .pending p { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.racedata.pts .pending p:last-child { margin-bottom: 0; }
.racedata.pts .pending .waiting {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.1px; color: var(--amber);
  margin-bottom: 10px;
}
.racedata.pts .pending .waiting::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
}
.racedata.pts #p-scored[hidden] { display: none; }

/* ---------------------------------------------------------------- tiles */
/* Four across like the other pages, but the leader tile carries a name
   rather than a number, so it gets room to breathe. */
.racedata.pts .pt-tiles { margin-top: 18px; }
.racedata.pts .tile .v.name { font-size: 19px; line-height: 1.25; }
.racedata.pts .tile .v small { display: block; margin-top: 2px; }

/* ------------------------------------------------------------- ladder */
.racedata.pts .ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

.racedata.pts .rung {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  overflow: hidden; transition: border-color .15s;
}
.racedata.pts .rung:hover { border-color: #33507a; }
.racedata.pts .rung.open { border-color: #33507a; }

/* The clickable summary row. Grid rather than flex so the numbers line up
   down the page instead of drifting with name length. */
.racedata.pts .rung > .head {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 46px minmax(0, 1fr) 132px 96px 74px;
  width: 100%; padding: 12px 16px; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
}
.racedata.pts .rung > .head:focus-visible { outline: 2px solid var(--blue-br); outline-offset: -2px; }

.racedata.pts .pos {
  font-family: "Racing Sans One", sans-serif; font-size: 22px; color: var(--ink-2);
  text-align: center; font-variant-numeric: tabular-nums;
}
.racedata.pts .rung:nth-child(1) .pos { color: var(--gold); }
.racedata.pts .rung:nth-child(2) .pos { color: #cbd5e1; }
.racedata.pts .rung:nth-child(3) .pos { color: #c9834a; }

.racedata.pts .who { min-width: 0; }
.racedata.pts .who .nm {
  font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.racedata.pts .who .meta { color: var(--muted); font-size: 12px; margin-top: 3px; }
.racedata.pts .who .meta b { color: var(--ink-2); font-weight: 600; }

/* Share-of-leader bar. Deliberately not a share of anything else: the number
   beside it is the championship total, and the bar is that number. */
.racedata.pts .share { display: flex; flex-direction: column; gap: 5px; }
.racedata.pts .share .bar { min-width: 0; }
.racedata.pts .share .gap { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.racedata.pts .score { text-align: right; }
.racedata.pts .score .big {
  font-family: "Racing Sans One", sans-serif; font-size: 24px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.racedata.pts .score .lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .9px; margin-top: 4px; }

.racedata.pts .drops { text-align: right; font-size: 12px; color: var(--muted); }
.racedata.pts .drops b { display: block; font-size: 16px; color: var(--ink-2); font-weight: 600; }
.racedata.pts .drops.spent b { color: var(--amber); }

/* the expanded season strip */
.racedata.pts .rung > .season { border-top: 1px solid var(--line); padding: 14px 16px 16px; background: #0e1a30; }
.racedata.pts .rung > .season[hidden] { display: none; }
.racedata.pts .strip { display: flex; flex-wrap: wrap; gap: 5px; }
.racedata.pts .wk {
  width: 46px; border-radius: 8px; border: 1px solid var(--line); background: #14233d;
  padding: 5px 0 6px; text-align: center; font-variant-numeric: tabular-nums;
}
.racedata.pts .wk .n { font-size: 9.5px; color: var(--muted); letter-spacing: .4px; }
.racedata.pts .wk .p { font-size: 14px; margin-top: 1px; }
.racedata.pts .wk .f { font-size: 9.5px; color: var(--muted); }
.racedata.pts .wk.win { background: rgba(228,0,43,.22); border-color: var(--red); }
.racedata.pts .wk.win .p { color: #fff; }
.racedata.pts .wk.best { background: rgba(56,209,122,.16); border-color: #2b7a4d; }
.racedata.pts .wk.dropped { opacity: .45; }
.racedata.pts .wk.dropped .p { text-decoration: line-through; }
.racedata.pts .wk.miss { background: transparent; border-style: dashed; }
.racedata.pts .wk.miss .p { color: var(--drop); }
.racedata.pts .wk.dnf .p { color: var(--bad); font-size: 11px; padding: 2px 0; }
.racedata.pts .wk.future { opacity: .3; border-style: dotted; }

.racedata.pts .season .sline { color: var(--muted); font-size: 12px; margin: 11px 0 0; }
.racedata.pts .season .sline b { color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------------- the grid */
.racedata.pts .gridwrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; max-height: 76vh; }
.racedata.pts table.grid { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: max-content; }
.racedata.pts table.grid th, .racedata.pts table.grid td {
  padding: 6px 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: center;
}
.racedata.pts table.grid thead th {
  position: sticky; top: 0; z-index: 3; background: #0e1a30; color: var(--muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
/* rank + driver stay put while the weeks scroll */
.racedata.pts table.grid .stick { position: sticky; left: 0; z-index: 2; background: var(--panel); text-align: left; }
.racedata.pts table.grid .stick.r { left: 0; width: 38px; text-align: center; color: var(--muted); }
.racedata.pts table.grid .stick.d { left: 38px; min-width: 150px; box-shadow: 1px 0 0 var(--line); }
.racedata.pts table.grid thead .stick { z-index: 4; background: #0e1a30; }
.racedata.pts table.grid tbody tr:hover td { background: #13203a; }
.racedata.pts table.grid tbody tr:hover .stick { background: #13203a; }

/* VERTICAL HEADERS, so every column is the same narrow width and a number sits
   under its own heading. With horizontal headings the column was as wide as
   its track name, the widths varied wildly across 36 weeks, and the grid
   stopped reading as rows and columns at all. */
.racedata.pts table.grid thead th.wk,
.racedata.pts table.grid thead th.vt {
  width: 34px; min-width: 34px; max-width: 34px;
  height: 128px; padding: 8px 2px 6px; vertical-align: bottom;
}
.racedata.pts table.grid thead th .vlabel {
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: block; margin: 0 auto; white-space: nowrap;
  max-height: 104px; overflow: hidden; text-overflow: ellipsis;
  font-size: 10.5px; letter-spacing: .3px; text-transform: none;
}
.racedata.pts table.grid thead th .wnum {
  display: block; font-size: 9px; margin-top: 5px; color: #5b6f8d;
  letter-spacing: 0;
}
.racedata.pts table.grid thead th.tot .vlabel,
.racedata.pts table.grid thead th.net .vlabel { color: var(--ink-2); }

/* Every fifth week gets a faint rule, so the eye can find its place along a
   36-column row without counting. */
.racedata.pts table.grid td.c, .racedata.pts table.grid th.wk {
  width: 34px; min-width: 34px; max-width: 34px;
}
.racedata.pts table.grid .c5 { border-left: 1px solid #1d2c45; }
.racedata.pts table.grid td.win { background: rgba(228,0,43,.25); color: #fff; font-weight: 700; }
.racedata.pts table.grid td.best { background: rgba(56,209,122,.18); }
.racedata.pts table.grid td.dropped { color: var(--drop); text-decoration: line-through; }
.racedata.pts table.grid td.miss { color: #33445f; }
.racedata.pts table.grid td.dnf { color: var(--bad); }
.racedata.pts table.grid td.tot { background: #16233f; font-weight: 700; }
.racedata.pts table.grid td.net { background: rgba(245,181,61,.12); font-weight: 700; }
.racedata.pts table.grid th.futurewk { color: #40536f; }

.racedata.pts .key { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.racedata.pts .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.racedata.pts .sw.win { background: rgba(228,0,43,.55); border-color: var(--red); }
.racedata.pts .sw.best { background: rgba(56,209,122,.35); border-color: #2b7a4d; }
.racedata.pts .sw.drop { background: #24344f; }
.racedata.pts .sw.miss { background: transparent; border-style: dashed; }

/* ------------------------------------------------------------- races */
.racedata.pts .racepick { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.racedata.pts .rchip {
  appearance: none; background: #0e1a30; border: 1px solid var(--line); color: var(--ink-2);
  font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 7px;
}
.racedata.pts .rchip:hover { color: var(--ink); border-color: #33507a; }
.racedata.pts .rchip.active { background: rgba(228,0,43,.15); border-color: var(--red); color: #fff; }
.racedata.pts .rchip:focus-visible { outline: 2px solid var(--blue-br); outline-offset: 2px; }
.racedata.pts .rchip .w { font-size: 10px; color: var(--muted); }
.racedata.pts .rchip.active .w { color: #f0a6b4; }

.racedata.pts .rhead {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 14px;
}
/* "If it ended today" -- a what-if, not the championship, so it is set apart
   from "After drops" rather than sitting beside it as a second opinion. */
.racedata.pts .grid th.ifnow,
.racedata.pts .grid td.ifnow {
  border-left: 2px solid var(--line);
  background: rgba(148, 163, 184, .07);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.racedata.pts .grid td.ifnow .mv { font-size: 9px; margin-left: 3px; }
.racedata.pts .grid td.ifnow .mv.up { color: #37c26a; }
.racedata.pts .grid td.ifnow .mv.dn { color: #e0524a; }
.racedata.pts .gridnote {
  margin: 12px 2px 0;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 88ch;
  line-height: 1.55;
}
.racedata.pts .gridnote strong { color: var(--ink-2); }

.racedata.pts .rhead h2 { font-size: 21px; }
.racedata.pts .rhead .rmeta { color: var(--muted); font-size: 13px; }

/* WATCH THIS RACE. An <a>, so middle-click and "copy link" behave; outlined
   rather than filled, because the finishing order below is the point of the
   tab and this sits beside it rather than shouting over it. */
.racedata.pts .rhead .ranim {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 8px;
  color: var(--blue-br); border: 1px solid var(--blue-br);
}
.racedata.pts .rhead .ranim::before { content: "\25B6"; font-size: 9px; }
.racedata.pts .rhead .ranim:hover { background: rgba(108, 196, 242, .15); color: #9ad8f7; }

.racedata.pts .carno {
  display: inline-block; min-width: 26px; padding: 1px 5px; border-radius: 4px;
  background: #14233d; border: 1px solid var(--line); font-size: 11.5px;
  text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.racedata.pts tr.winner td { background: rgba(228,0,43,.10); }
.racedata.pts tr.winner td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.racedata.pts .movein { color: var(--good); } .racedata.pts .moveout { color: var(--bad); }

/* ------------------------------------------------------------- schedule */
.racedata.pts .sched { display: grid; gap: 6px; }
.racedata.pts .srow {
  display: grid; grid-template-columns: 42px 62px 68px 104px minmax(0,1fr) auto; gap: 12px;
  align-items: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 14px; font-size: 13.5px;
}

/* The track map. THE CONTAINER IS SIZED, NEVER THE IMAGE: every layer shares
   viewBox="0 0 1920 1080" and carries no width or height of its own, so
   setting a size on the svg is how they stop lining up. */
.racedata.pts .smap {
  width: 62px; height: 36px; display: block; flex: none;
  display: grid; place-items: center;
}
.racedata.pts .smap img { max-width: 100%; max-height: 100%; display: block; opacity: .85; }
.racedata.pts .srow:hover .smap img { opacity: 1; }
.racedata.pts .smap.empty { border: 1px dashed var(--line); border-radius: 6px; }

/* The night's screenshot on a schedule row, and on a race result. */
.racedata.pts .sshot {
  width: 68px; height: 38px; display: block; border-radius: 5px;
  overflow: hidden; border: 1px solid var(--line); line-height: 0;
}
.racedata.pts .sshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.racedata.pts .sshot:hover { border-color: var(--blue-br); }
.racedata.pts .sshot.none { border-style: dashed; opacity: .45; }

.racedata.pts .rshot {
  display: block; float: right; width: 260px; margin: 0 0 12px 18px;
  border-radius: 11px; overflow: hidden; border: 1px solid var(--line); line-height: 0;
}
.racedata.pts .rshot img { width: 100%; height: auto; display: block; }
.racedata.pts .rshot:hover { border-color: var(--blue-br); }
.racedata.pts .srow .wn { font-family: "Racing Sans One", sans-serif; color: var(--ink-2); text-align: center; }
.racedata.pts .srow .sd { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.racedata.pts .srow .st { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.racedata.pts .srow.done { border-left: 3px solid var(--good); }
.racedata.pts .srow.next { border-color: #2b5a3d; box-shadow: inset 0 0 0 1px rgba(56,209,122,.25); }
.racedata.pts .srow.todo { opacity: .72; }
.racedata.pts .srow.excl { border-left: 3px solid var(--amber); opacity: .9; }
.racedata.pts .srow .winner { color: var(--ink-2); font-size: 12.5px; }
.racedata.pts .srow .winner b { color: var(--gold); font-weight: 600; }

/* ------------------------------------------------------------- rules box */
.racedata.pts .rules { margin-top: 30px; }
.racedata.pts .rules .box { margin-top: 12px; }
.racedata.pts .scale { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.racedata.pts .scale span {
  font-size: 11.5px; padding: 3px 8px; border-radius: 6px; background: #0e1a30;
  border: 1px solid var(--line); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.racedata.pts .scale span.p1 { background: rgba(228,0,43,.2); border-color: var(--red); color: #fff; }
.racedata.pts .scale span.tail { background: rgba(245,181,61,.12); border-color: #6b5522; }

/* pole / fastest-lap badges in a race result */
.racedata.pts td.bon { white-space: nowrap; }
.racedata.pts .bdg {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 6px; border-radius: 5px; margin-right: 4px; color: #06182b;
}
.racedata.pts .bdg.pole { background: var(--amber); }
.racedata.pts .bdg.fl { background: #c084fc; }
.racedata.pts .plus { color: var(--good); font-size: 11px; font-weight: 600; }
.racedata.pts .rules p { font-size: 13.5px; color: var(--ink-2); margin: 10px 0 0; line-height: 1.6; max-width: 72ch; }
.racedata.pts .rules p:first-child { margin-top: 0; }
.racedata.pts .rules h3 { font-size: 15px; margin-bottom: 2px; }

.racedata.pts .st-hint { color: var(--muted); font-size: 12.5px; margin: 12px 0 0; max-width: 78ch; }

/* Prose keeps a readable measure even when the page does not. datapages.css
   caps .note-lede and .datanote in `ch` already, but .foot-note has no cap --
   at 1100px it never needed one, and at full width it became a single line
   the width of the monitor. */
.racedata.pts .foot-note { max-width: 88ch; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------- the alt total */
/* The other number: raw total when the ladder is sorted by the championship,
   and the championship total when it is sorted by raw points. Hidden until
   there is room for it — below that width, the ladder shows one total and the
   expanded season carries both, which is enough on a laptop. */
.racedata.pts .alt { display: none; text-align: right; }
.racedata.pts .alt .v { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.racedata.pts .alt .lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .9px; margin-top: 4px; }

/* ------------------------------------------------------- wide screens */
/* What the extra width is actually FOR. The bar is the element that gains
   most from it — comparing 54 drivers by eye works when the bars are long
   and does not when they are 130px. */
@media (min-width: 1400px) {
  .racedata.pts .rung > .head {
    grid-template-columns: 58px minmax(200px, 1fr) minmax(240px, 2.4fr) 104px 116px 86px;
    gap: 22px; padding: 13px 22px;
  }
  .racedata.pts .alt { display: block; }
  .racedata.pts .who .nm { font-size: 16.5px; }
  .racedata.pts .score .big { font-size: 26px; }
  .racedata.pts .pos { font-size: 24px; }

  /* Two abreast halves a 36-row schedule to 18. */
  .racedata.pts .sched { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* More of the season visible before the strip wraps. */
  .racedata.pts .wk { width: 52px; }

  /* The grid stops being the constraint, so let it use the height too. */
  .racedata.pts .gridwrap { max-height: 82vh; }
  .racedata.pts table.grid th, .racedata.pts table.grid td { padding: 7px 11px; }
}

@media (min-width: 2100px) {
  /* Ultrawide: three schedule columns, and the ladder stops stretching the
     name column into a corridor of whitespace. */
  .racedata.pts .sched { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .racedata.pts .rung > .head {
    grid-template-columns: 64px minmax(240px, 0.8fr) minmax(320px, 3fr) 120px 132px 96px;
  }
}

/* ------------------------------------------------------------- narrow */
@media (max-width: 820px) {
  .racedata.pts .rung > .head { grid-template-columns: 34px minmax(0,1fr) 78px; gap: 10px; padding: 11px 12px; }
  .racedata.pts .share { display: none; }          /* the number stays, the bar goes */
  .racedata.pts .drops { display: none; }          /* it is repeated inside the strip */
  .racedata.pts .pos { font-size: 18px; }
  .racedata.pts .score .big { font-size: 20px; }
  .racedata.pts .bcards { grid-template-columns: 1fr; }
  .racedata.pts .srow { grid-template-columns: 34px 52px 60px 1fr; row-gap: 3px; }
  .racedata.pts .srow .sd { grid-column: 4; }
  .racedata.pts .srow .st { grid-column: 4; }
  .racedata.pts .srow .winner { grid-column: 4; }
  .racedata.pts .smap { width: 52px; height: 30px; grid-row: span 2; }
  .racedata.pts table.grid .stick.d { min-width: 118px; }
}