/* ==========================================================================
   pastwinners.css — the Past Winners timeline.

   Modelled on iracing/css/endurance.css so the two pages read as one site: the
   same row shape, the same filter bar, the same panel colours. Scoped under
   .pastwinners so it cannot reach the header, footer or any other page.

   Everything it inherits (--panel, --line, --muted, --ink, --red, --blue-br,
   --amber) comes from /css/datapages.css.
   ========================================================================== */

.pastwinners { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* --- filter bar ---------------------------------------------------------- */
.pastwinners .filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin: 18px 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.pastwinners .f-field { display: flex; flex-direction: column; gap: 4px; }
.pastwinners .f-lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted);
}
.pastwinners select {
  appearance: none; background: var(--panel) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238397b3' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 10px; border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 7px 30px 7px 11px; font: inherit; font-size: 13.5px;
  font-family: ui-sans-serif, system-ui, sans-serif; cursor: pointer;
}
.pastwinners select:focus-visible { outline: 2px solid var(--blue-br); outline-offset: 1px; }

/* Discipline chips. Colour is never the only signal — each is a labelled
   button, and the active one is also outlined and darkened. */
.pastwinners .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pastwinners .chip {
  appearance: none; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-2); font: inherit; font-size: 12.5px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.pastwinners .chip:hover { color: var(--ink); border-color: #35507a; }
.pastwinners .chip[aria-pressed="true"] { color: #fff; background: #1b2c47; border-color: var(--blue-br); }
.pastwinners .chip .n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pastwinners .chip[aria-pressed="true"] .n { color: #b9cbe4; }
.pastwinners .chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.pastwinners .chip.ghost { border-style: dashed; }

/* ONE HUE PER DISCIPLINE — Sharky, 2026-07-31. These are the site's own header
   lane colours, so the page speaks the league's existing language: the Oval lane
   is red, the Dirt lane white, the Road lane blue. Handicap has no lane, so it
   takes the amber already used elsewhere on the data pages.

   Colour never carries meaning on its own here — every chip, tag and spine sits
   beside the written word.

   Defined once, used three times (chip dot, row tag, row spine), so they cannot
   drift apart. */
.pastwinners {
  --disc-oval:      #e4002b;   /* headerRed   */
  --disc-road:      #007ac2;   /* headerBlue  */
  --disc-dirt:      #ffffff;   /* headerWhite */
  --disc-handicap:  #f5b53d;
  --disc-other:     #a78bfa;
}
.pastwinners .d-oval       { background: var(--disc-oval); }
.pastwinners .d-road       { background: var(--disc-road); }
.pastwinners .d-handicap   { background: var(--disc-handicap); }
.pastwinners .d-dirt-oval,
.pastwinners .d-dirt-road  { background: var(--disc-dirt); }
.pastwinners .d-other,
.pastwinners .d-hill-climb,
.pastwinners .d-figure-8,
.pastwinners .d-land-rush,
.pastwinners .d-drag-race  { background: var(--disc-other); }

.pastwinners .f-count { margin-left: auto; font-size: 12.5px; color: var(--muted); align-self: center; }

/* --- timeline ------------------------------------------------------------ */
.pastwinners .timeline { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.pastwinners .monthhead {
  font-family: "Racing Sans One", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px; color: var(--ink-2); letter-spacing: .4px;
  margin: 20px 0 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 10px;
}
.pastwinners .monthhead .n { font-size: 12px; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; }

.pastwinners .night {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
/* the left spine carries the discipline colour, mirroring the chips */
.pastwinners .night { border-left: 3px solid var(--line); }
.pastwinners .night.is-oval       { border-left-color: var(--disc-oval); }
.pastwinners .night.is-road       { border-left-color: var(--disc-road); }
.pastwinners .night.is-handicap   { border-left-color: var(--disc-handicap); }
.pastwinners .night.is-dirt-oval,
.pastwinners .night.is-dirt-road  { border-left-color: var(--disc-dirt); }
.pastwinners .night.is-hill-climb,
.pastwinners .night.is-figure-8,
.pastwinners .night.is-land-rush,
.pastwinners .night.is-drag-race  { border-left-color: var(--disc-other); }

/* Arrived here from a link to this exact night — /past-winners.html#night=<date>,
   which the Stats page timeline uses. The ring says "this is the one you asked
   for": the page scrolls it to the middle of a list of 138 otherwise identical
   cards, and without a mark there is nothing to say which one it stopped at.
   It fades rather than staying, so it does not read as a permanent state. */
.pastwinners .night.linked {
  box-shadow: 0 0 0 2px var(--blue-br);
  animation: pw-linked 2.4s ease-out 1 forwards;
}
@keyframes pw-linked {
  0%, 55% { box-shadow: 0 0 0 2px var(--blue-br); }
  100%    { box-shadow: 0 0 0 2px transparent; }
}
/* A movement-triggered flash is exactly what this setting exists to stop, so
   the ring simply stays put instead of animating. */
@media (prefers-reduced-motion: reduce) {
  .pastwinners .night.linked { animation: none; box-shadow: 0 0 0 2px var(--blue-br); }
}

.pastwinners .night-head {
  display: grid; grid-template-columns: 96px 108px 1fr auto; gap: 14px;
  align-items: center; padding: 10px 14px; width: 100%;
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.pastwinners .night-head:hover { background: rgba(255,255,255,.03); }
.pastwinners .night-head:focus-visible { outline: 2px solid var(--blue-br); outline-offset: -2px; }

.pastwinners .when { display: flex; flex-direction: column; gap: 1px; }
.pastwinners .when .d {
  font-family: "Racing Sans One", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px; color: var(--ink); line-height: 1.1;
}
.pastwinners .when .wd { font-size: 11px; color: var(--muted); }

/* The night's own screenshot, in the slot the endurance page gives the series
   logo. object-fit: cover keeps a 16:9 grab from distorting in a 108x62 box. */
.pastwinners .shot {
  width: 108px; height: 62px; object-fit: cover; border-radius: 7px;
  background: #0b1220; display: block;
}
.pastwinners .shot.ph {
  display: grid; place-items: center; font-size: 20px;
  background: repeating-linear-gradient(45deg, #16233a, #16233a 6px, #131f33 6px, #131f33 12px);
  color: var(--muted);
}

.pastwinners .who { min-width: 0; }
.pastwinners .who h3 {
  font-size: 15.5px; line-height: 1.25; margin: 0;
  font-family: "Racing Sans One", ui-sans-serif, system-ui, sans-serif;
}
/* Winner badges. Uniform circles, artwork contained rather than cropped —
   the five pieces of art run 1.00 to 2.48 aspect (assets/badges/README.md), so
   letting them size themselves would make a row of them read as broken.
   Each carries a title and aria-label, so the picture is never the only signal. */
.pastwinners .who h3 .wbadge {
  display: inline-block; width: 19px; height: 19px; border-radius: 50%;
  background-color: rgba(255,255,255,.07); background-size: contain;
  background-repeat: no-repeat; background-position: center;
  border: 1px solid var(--line); vertical-align: -3px; margin-left: 5px;
}
.pastwinners .who h3 .sep { color: var(--muted); }

.pastwinners .who .where {
  font-size: 12.5px; color: var(--muted); margin: 2px 0 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Cars raced. Up to three, then a "+N more" chip -- 73 of 137 nights ran more
   than one and one ran nine, so the row must not grow with the field. */
.pastwinners .who .cars {
  display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.pastwinners .car {
  display: inline-flex; align-items: center; gap: 5px; max-width: 210px;
  background: rgba(255,255,255,.045); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px 2px 2px; font-size: 11.5px; color: var(--ink-2);
}
.pastwinners .car-pic {
  width: 30px; height: 18px; object-fit: cover; border-radius: 999px; flex: 0 0 30px;
  background: #0b1220;
}
.pastwinners .car-pic.ph { display: grid; place-items: center; font-size: 10px; }
.pastwinners .car-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "+N more" / "show fewer" — a real button, so it needs the reset the rest of
   the chips do not. It sits inside a div-acting-as-button and stops the click
   travelling on, so expanding the cars never opens the results drawer. */
.pastwinners button.car.more {
  padding: 3px 10px; color: var(--ink-2); cursor: pointer;
  font: inherit; font-size: 11.5px; font-family: ui-sans-serif, system-ui, sans-serif;
  border-style: dashed;
}
.pastwinners button.car.more:hover { color: #fff; border-color: var(--blue-br); background: #1b2c47; }
.pastwinners button.car.more:focus-visible { outline: 2px solid var(--blue-br); outline-offset: 1px; }

/* Expanded, the list can be nine chips, so let it wrap freely rather than
   pushing the row's other columns around. */
.pastwinners .who .cars { max-width: 100%; }

.pastwinners .who .tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 0; }
.pastwinners .who .tag {
  display: inline-block; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  color: #0b1220; border: 1px solid transparent; border-radius: 999px;
  padding: 1px 8px; font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 700;
}
/* the violet fallback belongs to an UNRECOGNISED DISCIPLINE, never to a class */
.pastwinners .who .tag:not(.cls) { background: var(--disc-other); }
/* The discipline tag carries its lane colour. Text is near-black on every one of
   them, including white, so contrast holds without a per-colour exception. */
.pastwinners .night.is-oval       .tag:not(.cls) { background: var(--disc-oval); color: #fff; }
.pastwinners .night.is-road       .tag:not(.cls) { background: var(--disc-road); color: #fff; }
.pastwinners .night.is-handicap   .tag:not(.cls) { background: var(--disc-handicap); }
.pastwinners .night.is-dirt-oval  .tag:not(.cls),
.pastwinners .night.is-dirt-road  .tag:not(.cls) { background: var(--disc-dirt); }
/* The car class is CONTEXT, not a discipline, so it takes no lane colour at all:
   a quiet outlined chip beside the solid one.

   It briefly did inherit the discipline fallback's violet while keeping its own
   muted text, which put grey-blue on violet and was unreadable. Sharky caught it.
   Hence `background: none` stated outright rather than left to inherit. */
.pastwinners .who .tag.cls {
  background: none; color: var(--ink-2); border-color: var(--line);
  border-style: dashed; text-transform: none; letter-spacing: .2px; font-weight: 600;
}

/* Track map. The layers share viewBox 0 0 1920 1080 and carry no size of their
   own, so THE BOX is what gets sized — never the svg inside it. */
.pastwinners .map { width: 128px; height: 62px; display: grid; place-items: center; }
.pastwinners .map img { width: 100%; height: 100%; object-fit: contain; opacity: .82; }
.pastwinners .night-head:hover .map img { opacity: 1; }

.pastwinners .caret { color: var(--muted); font-size: 13px; transition: transform .15s; }
.pastwinners .night.open .caret { transform: rotate(90deg); }

/* --- the results drawer -------------------------------------------------- */
.pastwinners .drawer { display: none; border-top: 1px solid var(--line); padding: 4px 14px 14px; }
.pastwinners .night.open .drawer { display: block; }

.pastwinners .drawer .sess-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px;
}
.pastwinners .drawer .sess-head h4 {
  margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--ink-2);
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.pastwinners .drawer .sess-head .meta { font-size: 12px; color: var(--muted); }

/* The practice caveat is a full-width note, not a footnote: a practice list is
   not a finishing order and must not be read as one. */
.pastwinners .drawer .caveat {
  font-size: 12.5px; color: var(--ink-2); border-left: 3px solid var(--amber);
  background: rgba(245,181,61,.07); padding: 8px 12px; border-radius: 0 8px 8px 0;
  margin: 0 0 10px; max-width: 76ch; font-family: ui-sans-serif, system-ui, sans-serif;
}

.pastwinners table { width: 100%; border-collapse: collapse; font-family: ui-sans-serif, system-ui, sans-serif; }
.pastwinners table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pastwinners table td {
  padding: 6px 8px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.045);
  color: var(--ink-2);
}
.pastwinners table tr:last-child td { border-bottom: 0; }
.pastwinners table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pastwinners table .pos { width: 34px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pastwinners table .drv { color: var(--ink); }
.pastwinners table tr.is-winner td { background: rgba(228,0,43,.09); }
.pastwinners table tr.is-winner .drv { color: #fff; }

/* Best lap reads green. The session's OUTRIGHT fastest is brighter and bold --
   the one people scan for, and on a Handicap night often not the winner.
   Both carry the number itself, so colour never says anything the text does not. */
.pastwinners table td.lap { color: #6ee7a8; }
.pastwinners table td.lap.best { color: #34e07f; font-weight: 700; }

.pastwinners .drawer .loading { color: var(--muted); font-size: 13px; padding: 10px 0; }


.pastwinners .empty { color: var(--muted); padding: 28px 0; text-align: center; }
.pastwinners .foot-note { color: var(--muted); font-size: 12px; margin: 26px 0 0; max-width: 74ch; }


/* --- the "Full session data" button ------------------------------------- */
/* At the TOP of the drawer, so it is not buried under a long finishing order. */
.pastwinners .drawer .actions { margin: 14px 0 4px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pastwinners .act {
  appearance: none; font: inherit; font-size: 13px; font-weight: 600;
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 8px 15px; border-radius: 8px; cursor: pointer;
  background: var(--blue-br); color: #05121f; border: 0;
}
.pastwinners .act:hover { background: #6cc4f2; }
.pastwinners .act:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pastwinners .act-note { font-size: 12px; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; }

/* ANIMATION -- an <a>, so it needs the button's look putting back on, and it
   is deliberately the quieter of the two: Full session data is the thing most
   people want, and this sits beside it rather than competing with it. */
.pastwinners .act-anim,
.fv-actions .act-anim {
  appearance: none; font: inherit; font-size: 13px; font-weight: 600;
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 8px 15px; border-radius: 8px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--blue-br);
  border: 1px solid var(--blue-br);
}
.pastwinners .act-anim:hover,
.fv-actions .act-anim:hover { background: rgba(108, 196, 242, .15); color: #9ad8f7; }
.pastwinners .act-anim::before,
.fv-actions .act-anim::before { content: "\25B6"; font-size: 10px; }

/* Inside the overlay the actions row has no drawer to inherit spacing from. */
.fv-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }

/* --- the full session overlay -------------------------------------------- */
/* Appended to <body>, so it is NOT scoped under .pastwinners like everything
   else here. Its own prefix keeps it from reaching anything. */
.fullview {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
  background: rgba(2, 6, 23, .86); backdrop-filter: blur(2px);
  animation: fvIn .14s ease-out;
}
@keyframes fvIn { from { opacity: 0; } to { opacity: 1; } }

.fv-box {
  width: 100%; max-width: 1000px; background: #0f1b2e;
  border: 1px solid #24344f; border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #cbd5e1;
}
.fv-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px 14px; border-bottom: 1px solid #24344f;
  position: sticky; top: 0; background: #0f1b2e; border-radius: 14px 14px 0 0; z-index: 1;
}
.fv-title { flex: 1; min-width: 0; }
.fv-head h2 {
  margin: 0; font-family: "Racing Sans One", ui-sans-serif, system-ui, sans-serif;
  font-size: 21px; color: #f1f5f9; line-height: 1.15;
}
.fv-sub { margin: 4px 0 0; font-size: 13px; color: #8397b3; }
.fv-close {
  appearance: none; background: none; border: 1px solid #24344f; color: #8397b3;
  font: inherit; font-size: 15px; line-height: 1; padding: 7px 11px;
  border-radius: 8px; cursor: pointer; flex: 0 0 auto;
}
.fv-close:hover { color: #fff; border-color: #38a9e8; background: #16233a; }
.fv-close:focus-visible { outline: 2px solid #38a9e8; outline-offset: 2px; }

.fv-body { padding: 16px 20px 22px; }

.fv-winner { margin: 0 0 14px; font-size: 15px; color: #f1f5f9; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.fv-wlabel {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px;
  color: #8397b3; margin-right: 9px;
}
.fv-winner .sep { color: #8397b3; }
.fv-winner .wbadge {
  display: inline-block; width: 21px; height: 21px; border-radius: 50%;
  background-color: rgba(255,255,255,.07); background-size: contain;
  background-repeat: no-repeat; background-position: center;
  border: 1px solid #24344f; margin-left: 6px;
}

/* THE SCREENSHOT, LARGE — the thing Sharky asked to see here. It links to
   itself, so the original opens full size in a new tab. */
.fv-media { display: grid; grid-template-columns: 1fr 240px; gap: 16px; align-items: start; }
.fv-shot { display: block; border-radius: 10px; overflow: hidden; background: #0b1220; border: 1px solid #24344f; }
.fv-shot img { width: 100%; height: auto; display: block; }
.fv-shot.ph { display: grid; place-items: center; min-height: 220px; font-size: 34px; color: #8397b3;
  background: repeating-linear-gradient(45deg, #16233a, #16233a 8px, #131f33 8px, #131f33 16px); }
.fv-map { background: #0b1220; border: 1px solid #24344f; border-radius: 10px; padding: 10px; }
/* the layers share one viewBox and carry no size, so the BOX is sized */
.fv-map img { width: 100%; height: auto; display: block; }

.fv-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.fv-fact {
  background: #16233a; border: 1px solid #24344f; border-radius: 9px;
  padding: 7px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 96px;
}
.fv-fact .k { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #8397b3; }
.fv-fact .v { font-size: 15px; color: #f1f5f9; font-variant-numeric: tabular-nums; }

.fv-sess { margin-top: 20px; padding-top: 6px; border-top: 1px solid #24344f; }

/* The results tables are built by the same code the drawer uses, so they need
   the same rules — restated here because the overlay is outside .pastwinners. */
.fv-box .sess-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; }
.fv-box .sess-head h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1.1px; color: #cbd5e1; }
.fv-box .sess-head .meta { font-size: 12px; color: #8397b3; }
.fv-box .caveat {
  font-size: 12.5px; color: #cbd5e1; border-left: 3px solid #f5b53d;
  background: rgba(245,181,61,.07); padding: 8px 12px; border-radius: 0 8px 8px 0;
  margin: 0 0 10px; max-width: 76ch;
}
.fv-box table { width: 100%; border-collapse: collapse; }
.fv-box table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: #8397b3; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #24344f; white-space: nowrap;
}
.fv-box table td { padding: 6px 8px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.045); color: #cbd5e1; }
.fv-box table tr:last-child td { border-bottom: 0; }
.fv-box table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fv-box table .pos { width: 34px; color: #8397b3; font-variant-numeric: tabular-nums; }
.fv-box table .drv { color: #f1f5f9; }
.fv-box table tr.is-winner td { background: rgba(228,0,43,.09); }
.fv-box table tr.is-winner .drv { color: #fff; }
.fv-box table td.lap { color: #6ee7a8; }
.fv-box table td.lap.best { color: #34e07f; font-weight: 700; }

@media (max-width: 760px) {
  .fullview { padding: 0; }
  .fv-box { border-radius: 0; border: 0; min-height: 100%; }
  .fv-head { border-radius: 0; }
  .fv-media { grid-template-columns: 1fr; }
  .fv-map { max-width: 300px; }
  .fv-box table .hide-sm { display: none; }
}

/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 760px) {
  .pastwinners .night-head { grid-template-columns: 74px 88px 1fr; gap: 10px; }
  .pastwinners .shot { width: 88px; height: 50px; }
  .pastwinners .map, .pastwinners .caret { display: none; }
  .pastwinners .when .d { font-size: 15px; }
  .pastwinners .f-count { margin-left: 0; }
  .pastwinners table .hide-sm { display: none; }
}