/* Race Club -- css/championship.css
   championship.html loads css/style.css + css/league.css + this file. The page uses the League
   Hub's own markup and class names (body.rc-league-page), so the layout is identical; this file
   only (1) swaps league.css's dark --rcl-* color tokens for the light member-page palette and
   (2) styles the few championship-only pieces (black link bar, standings tabs, popups' forms).
   Colors come only from the site tokens (--rc-*) and league.css's own --rcl-* tokens. */

/* -------------------------------------------------------------------- */
/* Light palette                                                         */
/* -------------------------------------------------------------------- */
body.rc-league-page.rcc-page {
  --rcl-bg: var(--rc-offwhite);
  --rcl-bg-raised: var(--rc-white);
  --rcl-bg-raised-2: var(--rc-offwhite);
  --rcl-line: var(--rc-silver);
  --rcl-line-bright: color-mix(in srgb, var(--rc-steel) 45%, var(--rc-white));
  --rcl-ink: var(--rc-carbon);
  --rcl-ink-dim: var(--rc-steel);
  --rcl-ink-faint: color-mix(in srgb, var(--rc-steel) 75%, var(--rc-white));
  /* Championship accent: navy blue (the site's --rc-balanced token), used for the ticker's category
     labels and the hero's "Season N" in place of the hub's gold. */
  --rcc-navy: var(--rc-balanced);
  background: var(--rcl-bg);
  color: var(--rcl-ink);
}

/* The few spots league.css colors directly instead of through a token. */
/* Loading lights: identical to Account.html's. league.css restyles the lights for the hub's dark
   page (gray pill, dim text, a see-through dark overlay, lights frozen under reduced motion); undo
   all of that here so the page loader and popup spinners use style.css's own look. The page loader
   is a plain off-white page with Account's white card at the same height: Account's card sits
   70px header + 32px .rc-main padding + 180px .rc-inline-spinner-page margin from the top; this
   overlay already starts below the 70px header, so 32px of padding puts the card at the same spot. */
.rcc-page .rcl-page-loader {
  background: var(--rc-offwhite);
  justify-content: flex-start;
  padding-top: 32px;
}
.rcc-page .rcl-page-loader .rc-startlights,
.rcc-page .rcl-modal-dialog .rc-startlights {
  background: var(--rc-offwhite);
  border-color: #e6e9eb;
}
.rcc-page .rcl-page-loader .rc-loading-text,
.rcc-page .rcl-modal-dialog .rc-loading-text { color: var(--rc-steel); }
@media (prefers-reduced-motion: reduce) {
  .rcc-page .rcl-page-loader .rc-startlight {
    animation-duration: 3.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background: var(--rc-carbon);
    border-color: #9a9a9a;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6);
  }
  .rcc-page .rcl-page-loader .rc-startlight:nth-child(1) { animation-name: rc-startlight-1; }
  .rcc-page .rcl-page-loader .rc-startlight:nth-child(2) { animation-name: rc-startlight-2; }
  .rcc-page .rcl-page-loader .rc-startlight:nth-child(3) { animation-name: rc-startlight-3; }
  .rcc-page .rcl-page-loader .rc-startlight:nth-child(4) { animation-name: rc-startlight-4; }
  .rcc-page .rcl-page-loader .rc-startlight:nth-child(5) { animation-name: rc-startlight-5; }
}
.rcc-page .rcl-panel { box-shadow: 0 1px 3px color-mix(in srgb, var(--rc-carbon) 10%, transparent), 0 6px 16px color-mix(in srgb, var(--rc-carbon) 6%, transparent); }
.rcc-page .rcl-panel-title,
.rcc-page .rcl-hero-title { text-shadow: none; }
.rcc-page .rcl-report-name { color: var(--rc-carbon); font-weight: 400; }
.rcc-page .rcl-report-name.rcc-report-me { font-weight: 700; }
/* Race Report on the light page (Matt): no bold clauses, and the collision yellow darkened to amber
   so it reads on white. Only the player's name stays bold. */
.rcc-page .rcl-report-line [class^="rcl-report-clause-"] { font-weight: 400; }
.rcc-page .rcl-report-clause-car { color: #a16207; }
.rcc-page .rcl-modal-overlay { background: color-mix(in srgb, var(--rc-carbon) 55%, transparent); }
/* The hub's banner photo is dark; on a light page it sits further back so the title stays legible. */
.rcc-page .rcl-hero::before { opacity: 0.16; }
/* "CHAMPIONSHIP" title in black (the hub's is red); the "RACE CLUB" eyebrow above it stays red. */
.rcc-page .rcl-hero-title-hub { color: var(--rc-carbon); -webkit-text-stroke-color: var(--rc-carbon); }
/* "Season N" in the championship navy instead of the hub's gold. */
.rcc-page .rcl-hero-season-num { color: var(--rcc-navy); }

/* Manufacturers' podium rank numbers: the hub's pale gold/silver/bronze are tuned for black and
   disappear on white, so they're darkened here. */
.rcc-page .rcl-mfr-tile-p1 .rcl-mfr-tile-rank { color: color-mix(in srgb, var(--rcl-gold) 70%, var(--rc-carbon)); }
.rcc-page .rcl-mfr-tile-p2 .rcl-mfr-tile-rank { color: var(--rc-steel); }
.rcc-page .rcl-mfr-tile-p3 .rcl-mfr-tile-rank { color: color-mix(in srgb, var(--rcl-gold) 40%, var(--rc-red-dark)); }

/* Hero meta line under "Season N / Name" -- tucked right under it (negative margin eats part of
   the season line's own line-height). */
.rcc-hero-meta {
  margin-top: -3px;
  font-family: var(--rc-font-body);
  font-size: 15px;
  color: var(--rcl-ink-dim);
}
.rcc-hero-meta-name,
.rcc-hero-meta-num { font-weight: 700; }
/* Season title in white; "Season N" stays navy and the slash red (Matt). */
.rcc-page .rcl-hero-season-name { color: var(--rc-white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.25); }
/* Car maker logo in front of the team name, sized like the ticker's logos. */
.rcc-hero-meta-logo {
  display: inline-block;
  height: 16px;
  width: auto;
  max-width: 36px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 6px;
}

/* -------------------------------------------------------------------- */
/* Highlights ticker (league.css look, light-page colors)                */
/* -------------------------------------------------------------------- */
/* Category labels in the championship navy instead of the hub's gold (hard to read on white). */
.rcc-page .rcl-ticker-item-tag { color: var(--rcc-navy); }
/* The hub's ranks are white for a black ticker; dark here so they show on white. */
.rcc-page .rcl-ticker-driver-rank { color: var(--rc-carbon); }

/* Calendar card button: the hub's hover fills it with the ink color and turns the text near-black,
   which on this page is black on black. Text goes white instead. */
.rcc-page .rcl-carousel-hero-btn:not(:disabled):hover { color: var(--rc-white); }

/* -------------------------------------------------------------------- */
/* Black link bar under the hero                                         */
/* -------------------------------------------------------------------- */
.rcc-actionbar {
  background: var(--rc-carbon);
  border-bottom: 2px solid var(--rc-red);
}
.rcc-actionbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 48px;
}
.rcc-actionbar-links { display: flex; flex-wrap: wrap; align-items: center; }
.rcc-actionbar-link {
  background: none;
  border: none;
  padding: 14px 14px;
  font-family: var(--rc-font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-white);
  cursor: pointer;
  position: relative;
}
.rcc-actionbar-link + .rcc-actionbar-link::before {
  content: '·';
  position: absolute;
  left: -3px;
  color: var(--rc-steel);
}
.rcc-actionbar-link:first-child { padding-left: 0; }
.rcc-actionbar-link:hover:not(:disabled) { color: var(--rc-red); }
.rcc-actionbar-link:disabled { color: var(--rc-steel); cursor: not-allowed; }
a.rcc-actionbar-link { display: inline-block; text-decoration: none; }
/* Season Tools: the link plus its slide-out links. Dots separate it from its neighbours; the slide-out
   opens to the right of a "|" and pushes Help along (Matt). */
.rcc-tools { position: relative; display: inline-flex; align-items: center; }
.rcc-actionbar-link + .rcc-tools::before,
.rcc-tools + .rcc-actionbar-link::before { content: '\00B7'; position: absolute; left: -3px; color: var(--rc-steel); }
.rcc-tools + .rcc-actionbar-link { position: relative; }
.rcc-tools-menu { display: inline-flex; align-items: center; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.28s ease, opacity 0.2s ease; }
.rcc-tools-open .rcc-tools-menu { max-width: 900px; opacity: 1; }
.rcc-tools-open .rcc-tools-toggle { color: var(--rc-red); }
.rcc-tools-sep { color: var(--rc-steel); font-weight: 400; padding: 0 2px 0 0; }
.rcc-tools-links { display: inline-flex; align-items: center; }
.rcc-tools-links .rcc-actionbar-link:first-child { padding-left: 14px; }
.rcc-tools .rcc-tools-toggle { padding-left: 14px; }
@media (prefers-reduced-motion: reduce) { .rcc-tools-menu { transition: none; } }
.rcc-actionbar-season {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--rc-font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-silver);
}
.rcc-actionbar-season select {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  max-width: 320px;
}

/* -------------------------------------------------------------------- */
/* Class standings boards (one panel per class)                          */
/* -------------------------------------------------------------------- */
.rcc-board .rcl-standings-class-header { margin-bottom: 20px; }
/* Wide boards (many rounds) scroll sideways inside the panel instead of widening the page. */
.rcc-board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rcc-board-table { width: 100%; }
.rcc-board-row {
  display: grid;
  grid-template-columns: var(--rcc-board-cols);
  align-items: center;
  column-gap: 6px;
}
.rcc-board-head {
  /* Same 6px sides as the rows (.rcl-standings-row) so every header sits over its column. */
  padding: 6px 6px;
  border-bottom: 1px solid var(--rc-silver);
  font-family: var(--rc-font-heading);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-steel);
}
/* The rank badges bleed 6px into the row's left padding (.rcl-standings-pos); the "Pos" label does
   the same so it stays centered over them. */
.rcc-board-head > div:first-child { text-align: center; margin-left: -6px; }
.rcc-board-round-head { display: flex; justify-content: center; align-items: center; }
/* "Drivers" / "Teams" label left-aligned over the names (the logo and N° have their own columns). */
.rcc-board-name-head { text-align: left; }
/* Car number column: "N" with a raised degree circle in the header, "#007"-style numbers below. */
.rcc-board-num-head { text-align: center; }
.rcc-board-logo-head { text-align: center; }
.rcc-board-num-deg { font-size: 12px; line-height: 0; margin-left: 0; position: relative; top: 1px; }
.rcc-board-num { text-align: center; font-size: 14.5px; font-weight: 400; color: var(--rc-carbon); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The name cell holds only the name; it cuts off with "..." before the round columns shrink. */
.rcc-board-name-cell { min-width: 0; }
.rcc-board .rcl-standings-name { min-width: 0; }
.rcc-board-total-head { text-align: right; }
.rcc-board-flag { width: 28px; height: 19px; object-fit: cover; border-radius: 2px; border: 1px solid var(--rc-silver); display: block; }
.rcc-board-round {
  text-align: center;
  font-family: var(--rc-font-heading);
  font-size: 13px;
  font-weight: 400;
  color: var(--rc-carbon);
  font-variant-numeric: tabular-nums;
}
.rcc-board-bonus { font-size: 9px; font-weight: 400; color: var(--rcc-navy); margin-left: 1px; vertical-align: super; line-height: 0; }
/* Driver and team names in ALL CAPS. league.css already does the boards, Last Race podium and
   mention cards, results popups and race report (.rcl-standings-name, .rcl-lr-podium-name, ...);
   these are the championship-only spots: Team Information, Choose Your Team and the signing
   reveal. The ticker and the hero subtitle are left as they are. */
.rcc-myteam-name,
.rcc-grid-team,
.rcc-grid-crew,
.rcc-page .rc-team-name,
.rcc-page .rc-signing-reveal-team { text-transform: uppercase; }
/* Names, car numbers and team names in normal weight; the PTS total and rank badges stay bold. */
.rcc-board .rcl-standings-name,
.rcc-board .rcl-standings-carnum,
.rcc-board .rcl-standings-team { font-weight: 400; }
/* Footer under each board: bonus points note (and the phone-only "view on PC" note), in the
   page's navy instead of the League Hub's gold. */
.rcc-board-note { color: var(--rcc-navy); }
.rcc-board-footer .rcc-board-note + .rcc-board-note { margin-top: 4px; }

/* Metal Drivers / Teams switch in a class panel's header (not shown for Hypercar). Light brushed
   silver, lighter than the class header bar under it so it doesn't pull the eye away from the board
   (Matt). The page's navy is the accent: the selected label and a thin line along the knob's bottom
   edge. */
.rcc-switch-slot { display: flex; align-items: center; }
.rcc-metal-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 176px;
  height: 34px;
  padding: 3px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--rc-steel) 35%, var(--rc-silver));
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 1px, rgba(0, 0, 0, 0.015) 1px 3px),
    linear-gradient(180deg, #f6f7f8 0%, #e9ecee 48%, #e1e4e7 52%, #f1f3f4 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.rcc-metal-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 6px;
  border: 1px solid #b4bbc2;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, rgba(0, 0, 0, 0.03) 1px 2px),
    linear-gradient(180deg, #ffffff 0%, #eef0f2 45%, #dfe3e7 55%, #f8f9fa 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 var(--rcc-navy);
  transition: transform 0.22s ease;
}
.rcc-metal-switch-teams .rcc-metal-knob { transform: translateX(100%); }
.rcc-metal-label {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--rc-font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-steel);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: color 0.22s ease;
}
.rcc-metal-switch:not(.rcc-metal-switch-teams) .rcc-metal-label-drivers,
.rcc-metal-switch-teams .rcc-metal-label-teams { color: var(--rcc-navy); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.rcc-metal-switch:focus-visible { outline: 2px solid var(--rcc-navy); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .rcc-metal-knob, .rcc-metal-label { transition: none; }
}

/* -------------------------------------------------------------------- */
/* Standings tabs (Drivers / Teams) in the panel header                  */
/* -------------------------------------------------------------------- */
.rcc-panel-head-tabs { flex-wrap: wrap; }
.rcc-tabs { display: flex; gap: 6px; }
.rcc-tab {
  background: var(--rc-white);
  border: 1px solid var(--rc-silver);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--rc-font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-steel);
  cursor: pointer;
}
.rcc-tab:hover { background: var(--rc-offwhite); }
.rcc-tab-active,
.rcc-tab-active:hover { background: var(--rc-carbon); border-color: var(--rc-carbon); color: var(--rc-white); }

/* The player's own rows and name, everywhere. */
/* The player's row: a faint tint only (the red bar over the position badge was removed, Matt). */
.rcc-row-me { background: color-mix(in srgb, var(--rc-red) 6%, transparent); }
.rcc-me-text { color: var(--rc-red); }
/* On the standings boards the player's name is bold and black like the rest of the list (Matt). */
.rcc-board .rcc-me-text { color: var(--rc-carbon); font-weight: 700; }

/* -------------------------------------------------------------------- */
/* Race Recap results tables: the player's own row in bold (everyone else is normal weight). */
.rcl-race-grid-recap .rcc-board-num { font-size: 14.5px; font-weight: 400; color: var(--rc-carbon); }
.rcl-race-grid-recap .rcc-me-text { color: var(--rc-carbon); }
.rcl-race-grid-recap.rcc-row-me .rcl-race-row-num,
.rcl-race-grid-recap.rcc-row-me .rcl-race-row-pts,
.rcl-race-grid-recap.rcc-row-me .rcl-race-row-bestlap,
.rcl-race-grid-recap.rcc-row-me .rcl-race-row-avg,
.rcl-race-grid-recap.rcc-row-me .rcl-race-row-gap,
.rcl-race-grid-recap.rcc-row-me .rcc-board-num,
.rcl-race-grid-recap.rcc-row-me .rcl-standings-name { font-weight: 700; }
.rcc-recap-dnf { color: var(--rc-steel); }
@media (max-width: 640px) { .rcl-race-grid-recap .rcc-board-num { font-size: 13px; } }

/* Last Race extras                                                      */
/* -------------------------------------------------------------------- */
.rcc-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--rc-silver);
  border-left: 3px solid var(--rc-red);
  border-radius: 6px;
  background: var(--rc-white);
}
.rcc-cta-text { font-size: 14px; color: var(--rc-carbon); }
.rcc-you-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rc-silver);
}
.rcc-you-label {
  font-family: var(--rc-font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-steel);
}
.rcc-you-value { font-size: 14px; font-weight: 700; color: var(--rc-carbon); }
.rcc-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--rc-red);
  cursor: pointer;
}
.rcc-link-btn:hover { text-decoration: underline; }

/* -------------------------------------------------------------------- */
/* Popups                                                                */
/* -------------------------------------------------------------------- */
.rcc-confirm-text, .rcc-reg-intro { font-size: 14px; color: var(--rc-steel); line-height: 1.5; margin: 0 0 16px; }
.rcc-btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rcc-btn-row-end { justify-content: flex-end; margin-top: 18px; }
.rcc-error-line { color: var(--rc-red); font-size: 13px; margin-top: 8px; min-height: 0; }
.rcc-error-line:empty { display: none; }
/* While a write is in flight the popup's X is locked (js sets disabled); league.css has no disabled
   look for it, so it dims here, and every other button in the popup grays out and ignores clicks. */
.rcc-page .rcl-modal-close:disabled,
.rcc-page .rcl-modal-close:disabled:hover { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.rcc-page .rc-modal-busy .rcl-modal-body button:not(:disabled) { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.rcc-page .rc-modal-busy .rcl-modal-body select,
.rcc-page .rc-modal-busy .rcl-modal-body input { pointer-events: none; }
/* Pending write button: gray, disabled, "...ing" label until the server answers. */
.rc-btn-primary.rcc-btn-pending,
.rc-btn-primary.rcc-btn-pending:hover { background: var(--rc-silver); color: var(--rc-steel); cursor: default; }
.rcc-team-desc { color: var(--rc-steel); font-size: 13px; margin: 8px 0; }

/* Season wizard */
.rcc-wizard label { margin-top: 0; }
/* A locked dropdown (Chance of Rain in dry weather) reads as unavailable. */
.rcc-wizard select:disabled { opacity: 0.5; cursor: not-allowed; }
.rcc-wiz-section { padding: 18px 0; border-bottom: 1px solid var(--rc-silver); }
.rcc-wiz-section:first-child { padding-top: 0; }
.rcc-wiz-section-title {
  font-family: var(--rc-font-heading);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-carbon);
  margin-bottom: 12px;
}
.rcc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rcc-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.rcc-class-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.rcc-class-row { display: grid; grid-template-columns: 22px 110px 1fr; align-items: center; gap: 10px; }
/* A class with no cars in the season's year: grayed out and unclickable. */
.rcc-class-row-off { opacity: 0.45; }
.rcc-class-row-off .rcc-class-label { cursor: not-allowed; }
.rcc-class-row select { height: 36px; }
.rcc-class-label { margin: 0; font-weight: 800; color: var(--rc-carbon); }
.rcc-class-count { font-size: 12px; color: var(--rc-steel); }
.rcc-points-row { display: grid; grid-template-columns: 80px 110px 1fr; gap: 12px; align-items: end; margin-bottom: 10px; }
/* Points per finishing position: ten small boxes, P1 to P10. */
.rcc-points-boxes { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.rcc-points-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rcc-points-pos { font-size: 11px; font-weight: 800; color: var(--rc-steel); text-align: center; }
.rcc-points-cell input { margin-top: 0; padding: 6px 4px; text-align: center; height: 38px; }
/* A shared-points crew line ("Name, Name, Name") wraps instead of cutting names off. */
.rcc-page .rcc-name-row-wrap { flex-wrap: wrap; overflow: visible; }
.rcc-page .rcc-name-row-wrap .rcl-standings-name { white-space: normal; overflow: visible; }
.rcc-page .rcc-name-row-wrap .rcl-standings-team { flex-basis: auto; }
/* "Bonus" row label lines up with the Sprint / Medium / Long labels above it. */
.rcc-bonus-row { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: end; }
.rcc-bonus-row .rcc-bonus-grid { margin-bottom: 0; }
.rcc-upload-round { font-size: 14px; font-weight: 700; color: var(--rc-carbon); padding: 10px 0 2px; }
.rcc-points-tier { font-weight: 800; color: var(--rc-carbon); padding-bottom: 12px; }
.rcc-rounds { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.rcc-round { border: 1px solid var(--rc-silver); border-radius: 6px; padding: 12px 14px; background: var(--rc-white); }
.rcc-round-locked { background: var(--rc-offwhite); }
.rcc-round-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rcc-round-num { font-family: var(--rc-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rc-carbon); }
.rcc-round-tools { display: flex; gap: 6px; }
.rcc-round-locked-text { font-size: 13px; color: var(--rc-steel); }

/* Upload */
.rcc-upload-out { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.rcc-upload-line { font-size: 13px; line-height: 1.45; padding: 6px 10px; border-radius: 4px; background: var(--rc-offwhite); color: var(--rc-carbon); }
.rcc-upload-ok { border-left: 3px solid var(--rc-carbon); }
.rcc-upload-bad { border-left: 3px solid var(--rc-red); color: var(--rc-red); }
.rcc-upload-note, .rcc-upload-skip { color: var(--rc-steel); }

/* Team information */
.rcc-myteam { padding: 14px 16px; margin-bottom: 18px; border: 1px solid var(--rc-silver); border-left: 3px solid var(--rc-red); border-radius: 6px; background: var(--rc-white); }
.rcc-myteam-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rc-red); margin-bottom: 8px; }
.rcc-myteam .rcc-seat-line { margin: 0; }
.rcc-myteam-desc { margin-top: 10px; }
/* FACTORY / PRIVATEER pill after the team number: very light gray fill, white text, same size as the class pill (Matt). */
/* Pills in the seat line (header, Team Information): class pill a little smaller than the site's
   default, FACTORY / PRIVATEER the same size as a light gray dashed outline (Matt). */
.rcc-seat-line .rc-badge-chip-abbrev { padding: 1px 5px; font-size: 10.5px; line-height: 1.5; align-self: center; }
.rcc-seat-line .rcc-badge-entry { background: none; border: 1px dashed #b4bcc6; color: #9aa3ae; padding: 0 4px; letter-spacing: 0.04em; }
/* YOU tag centred on the team name instead of sitting on its baseline. */
.rcc-seat-line .rcc-tag { align-self: center; line-height: 1.4; }
/* Team Information: every car picture gets the same 150px box so the team names line up. */
.rcc-myteam .rc-cs-logo-wrap,
.rcc-grid-row .rc-cs-logo-wrap { width: 150px; }
.rcc-grid-row .rcc-seat-line { margin: 0; flex: 1 1 auto; min-width: 0; }
.rcc-grid-row .rcc-grid-crew { margin-top: 3px; }
@media (max-width: 640px) {
  .rcc-myteam .rc-cs-logo-wrap,
  .rcc-grid-row .rc-cs-logo-wrap { width: 100px; }
  .rcc-myteam .rc-cs-row, .rcc-grid-row .rc-cs-row { gap: 12px; }
}
.rcc-myteam-name { font-size: 18px; font-weight: 800; color: var(--rc-carbon); }
.rcc-myteam-sub { font-size: 13px; color: var(--rc-steel); }
.rcc-myteam-desc { font-size: 13px; color: var(--rc-steel); margin: 8px 0 0; }
.rcc-grid-row { display: flex; gap: 12px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--rc-offwhite); }
.rcc-grid-logo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 34px; }
.rcc-grid-info { min-width: 0; }
.rcc-grid-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rcc-grid-team { font-weight: 800; color: var(--rc-carbon); }
.rcc-grid-model { font-size: 12px; color: var(--rc-steel); }
.rcc-grid-crew { font-size: 13px; color: var(--rc-carbon); }
.rcc-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--rc-silver); color: var(--rc-steel); }
.rcc-tag-factory { border-color: var(--rc-carbon); color: var(--rc-carbon); }
.rcc-tag-me { border-color: var(--rc-red); color: var(--rc-red); }

/* My Laps table */
.rcc-laps-table { overflow-x: auto; margin-top: 6px; }
.rcc-laps-row { display: grid; grid-template-columns: 60px 50px 90px 76px 76px 76px 84px 56px 140px 90px; gap: 8px; padding: 5px 6px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--rc-carbon); border-bottom: 1px solid var(--rc-offwhite); min-width: 880px; }
.rcc-laps-head { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rc-steel); border-bottom: 1px solid var(--rc-silver); }
.rcc-laps-best { font-weight: 800; }
.rcc-laps-pit { color: var(--rc-steel); }
.rcc-laps-events { margin-top: 12px; }

@media (max-width: 640px) {
  .rcc-actionbar-inner { padding: 0 16px; }
  .rcc-actionbar-link { padding: 10px 8px; }
  .rcc-class-row { grid-template-columns: 22px 1fr 1fr; }
  .rcc-points-row { grid-template-columns: 1fr; }
  .rcc-points-boxes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rcc-bonus-row { grid-template-columns: 1fr; }
  /* Standings on a phone: Pos, Drivers/Teams and Pts only (no round columns), like the League Hub.
     The column list is set inline per board, so !important is needed to replace it here. */
  .rcc-board-table { --rcc-board-cols: 40px 42px 34px minmax(0, 1fr) 50px !important; min-width: 0 !important; }
  .rcc-board-table.rcc-board-has-car { --rcc-board-cols: 40px 42px 64px 34px minmax(0, 1fr) 50px !important; }
  .rcc-board .rcc-board-car-slot { width: 64px; height: 24px; }
  .rcc-board .rcc-board-car { max-width: 64px; max-height: 24px; }
  .rcc-board .rcl-standings-mfr-logo-slot { width: 34px; }
  .rcc-board-head { font-size: 13px; }
  .rcc-board-logo-head { letter-spacing: 0.02em; white-space: nowrap; }
  .rcc-board .rcl-standings-mfr-logo { max-width: 34px; }
  .rcc-board-num { font-size: 13px; }
  .rcc-board-round-head,
  .rcc-board-round { display: none; }
  .rcc-board-footer .rcl-standings-status-mobile-note { display: block; }
}

/* -------------------------------------------------------------------- */
/* Help popup (rccOpenHelp). Section layout comes from style.css's        */
/* .rc-rulebook-* rules (the League Hub's rulebook look); these add the   */
/* numbered step circles, the folder path box and the file-name table.    */
/* -------------------------------------------------------------------- */
/* Clears the popup's sticky title bar when a Jump To link scrolls here. */
.rcc-help-body .rc-rulebook-section { scroll-margin-top: 84px; }
.rcc-help-steps { list-style: none; counter-reset: rcc-step; margin: 10px 0 16px; padding: 0; }
.rcc-help-steps > li {
  counter-increment: rcc-step;
  position: relative;
  min-height: 30px;
  padding: 4px 0 0 44px;
  margin-bottom: 12px;
}
.rcc-help-steps > li::before {
  content: counter(rcc-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rcc-navy);
  color: var(--rc-white);
  font-family: var(--rc-font-heading);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--rcc-navy) 35%, transparent);
}
.rcc-help-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px !important;
  background: var(--rc-offwhite);
  border: 1px solid var(--rc-silver);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
}
.rcc-help-table { border-collapse: collapse; width: auto; }
.rcc-help-table td { padding: 6px 14px 6px 0; font-size: 13px; color: var(--rc-carbon); border-bottom: 1px solid var(--rc-silver); }

/* -------------------------------------------------------------------- */
/* Race Recap: bonus winners centered in the popup, and the Race Details */
/* block under them (_rccRaceDetails).                                    */
/* -------------------------------------------------------------------- */
.rcc-page .rcl-modal-dialog-allresults .rcl-race-categories-inclass { justify-content: center; }
.rcc-page .rcl-modal-dialog-allresults .rcl-race-category { flex: 0 1 200px; text-align: center; }
.rcc-page .rcl-modal-dialog-allresults .rcl-race-category-title,
.rcc-page .rcl-modal-dialog-allresults .rcl-race-category-row { justify-content: center; }
.rcc-race-details { margin: 4px 0 22px; }
.rcc-race-details .rcl-race-class-name { margin-bottom: 10px; }
.rcc-race-details-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 28px; }
.rcc-race-details-head { font-family: var(--rc-font-heading); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rcc-navy); margin-bottom: 6px; }
.rcc-race-details .rcl-seasonfmt-row { font-size: 13px; margin-bottom: 3px; }

/* Header subtitle: "[logo] Team #n" opens Team Information; the name opens the public profile. */
.rcc-hero-meta-team {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.rcc-hero-meta-team:hover,
.rcc-hero-meta-team:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
a.rcc-hero-meta-name { color: inherit; }

/* Season Preview popup */
.rcc-preview-title { font-family: var(--rc-font-heading); font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--rc-carbon); margin-bottom: 14px; }
.rcc-preview-body .rcl-hero-stats-group { margin-bottom: 18px; }

/* Season wizard: Season Name 50% | Series 25% | Year 25%; a round's second row of settings. */
.rcc-season-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; align-items: end; }
.rcc-season-row .rcc-field { margin: 0; }
.rcc-round-row2 { margin-top: 0; }
@media (max-width: 640px) {
  .rcc-season-row { grid-template-columns: 1fr 1fr; }
  .rcc-season-row .rcc-field:first-child { grid-column: 1 / -1; }
}
/* Help popup: callout titles sit on their own line instead of "Label:". */
.rcc-help-body .rcc-help-callout-title { display: block; margin-bottom: 4px; color: var(--rc-carbon); }

/* Ticker round entries: flag, event and " at track" as one inline group (no flex gap inside). */
.rcc-ticker-event { white-space: nowrap; }
.rcc-ticker-flag { height: 12px; width: auto; vertical-align: -1px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }

/* ===================== DRIVER REPORT (js/championship-report.js) ===================== */
.rcr-report { margin: 28px 0 8px; }
.rcr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rcr-head .rcl-race-class-name { margin: 0; }
.rcr-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: linear-gradient(180deg, #eef0f3, #dfe3e8); box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); }
.rcr-seg-btn { border: 0; background: transparent; font-family: var(--rc-font-heading); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #5b6573; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.rcr-seg-btn.rcr-seg-on { background: #fff; color: var(--rc-carbon); box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.rcr-seg-btn:focus-visible { outline: 2px solid var(--rcc-navy); outline-offset: 1px; }
.rcr-seg-sm .rcr-seg-btn { font-size: 10px; padding: 5px 10px; }
.rcr-note { font-size: 13px; color: #5b6573; margin: 6px 0 14px; }
.rcr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.rcr-tile { border-radius: 10px; padding: 12px 14px; background: linear-gradient(180deg, #ffffff, #f3f5f7); border: 1px solid #e3e6ea; }
.rcr-tile-label { font-family: var(--rc-font-heading); font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; }
.rcr-tile-value { font-family: var(--rc-font-heading); font-size: 24px; font-weight: 800; color: var(--rc-carbon); margin-top: 4px; font-variant-numeric: tabular-nums; }
.rcr-tile-sub { font-size: 12px; color: #5b6573; margin-top: 3px; }
.rcr-tile-hero { background: linear-gradient(135deg, #1f2937, #374151); border-color: #1f2937; }
.rcr-tile-hero .rcr-tile-label, .rcr-tile-hero .rcr-tile-sub { color: #cbd2db; }
.rcr-tile-hero .rcr-tile-value { color: #fff; }
.rcr-tile-hero.rcr-up .rcr-tile-sub { color: #7ee2a4; font-weight: 700; }
.rcr-tile-hero.rcr-down .rcr-tile-sub { color: #ffb4ab; font-weight: 700; }
.rcr-block { margin: 0 0 22px; padding-top: 16px; border-top: 1px solid #e3e6ea; }
.rcr-block-head { margin-bottom: 10px; }
.rcr-block-title { font-family: var(--rc-font-heading); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rcc-navy); }
.rcr-block-sub { font-size: 12.5px; color: #5b6573; margin-top: 2px; }
.rcr-mini-title { font-family: var(--rc-font-heading); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; margin: 14px 0 8px; }
.rcr-chart { position: relative; }
.rcr-svg { width: 100%; height: auto; display: block; overflow: visible; }
.rcr-grid { stroke: #e7eaee; stroke-width: 1; }
.rcr-axis { font-family: var(--rc-font-body); font-size: 11px; fill: #6b7280; }
.rcr-cross { stroke: #9aa3af; stroke-width: 1; stroke-dasharray: 3 3; }
.rcr-tip { position: absolute; display: none; z-index: 5; pointer-events: none; background: #111827; color: #f3f4f6; font-size: 12px; line-height: 1.45; padding: 8px 10px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); white-space: nowrap; }
.rcr-tip b { color: #fff; }
.rcr-tip-head { font-weight: 800; margin-bottom: 3px; }
.rcr-tip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.rcr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 12px; color: #374151; }
.rcr-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.rcr-legend-swatch { width: 16px; height: 4px; border-radius: 2px; border: 1px solid transparent; }
.rcr-legend-dash { border-top: 2px dashed; height: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.rcr-bars { display: flex; flex-direction: column; gap: 5px; }
.rcr-bar-row, .rcr-div-row { display: grid; grid-template-columns: 150px 1fr 120px; align-items: center; gap: 10px; font-size: 12.5px; }
.rcr-bar-name { color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcr-bar-you .rcr-bar-name, .rcr-bar-you .rcr-bar-val { font-weight: 800; color: var(--rc-carbon); }
.rcr-bar-track { height: 12px; background: #f1f3f5; border-radius: 6px; overflow: hidden; }
.rcr-bar-fill { height: 100%; border-radius: 6px; }
.rcr-bar-val { text-align: right; font-variant-numeric: tabular-nums; color: #374151; }
.rcr-div { display: flex; flex-direction: column; gap: 6px; }
.rcr-div-track { position: relative; height: 14px; background: #f1f3f5; border-radius: 7px; }
.rcr-div-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: #9aa3af; }
.rcr-div-fill { position: absolute; top: 0; bottom: 0; border-radius: 7px; }
.rcr-div-good { background: #2f6fb5; }
.rcr-div-bad { background: #a86f12; }
.rcr-div-key { display: flex; justify-content: space-between; font-size: 11px; color: #6b7280; margin: 2px 130px 0 160px; }
.rcr-div-key-good { color: #2f6fb5; font-weight: 700; }
.rcr-div-key-bad { color: #8a5a0e; font-weight: 700; }
.rcr-tyre-grid { display: grid; grid-template-columns: minmax(300px, 1fr) 1.2fr; gap: 22px; align-items: start; }
.rcr-car-box { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rcr-car-holder { display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; gap: 8px; width: 100%; }
.rcr-car { width: 140px; height: auto; }
.rcr-car-body { fill: #e9ecf0; stroke: #8a94a3; stroke-width: 2; stroke-linejoin: round; }
.rcr-car-line { fill: none; stroke: #b8c0cb; stroke-width: 1.5; stroke-linecap: round; }
.rcr-car-glass { fill: #3b4656; }
.rcr-car-roof { fill: #d3d8df; stroke: #8a94a3; stroke-width: 1; }
.rcr-car-mirror { fill: #8a94a3; }
.rcr-car-wing { fill: #4b5563; }
.rcr-car-splitter { fill: #5b6573; stroke: #3b4656; stroke-width: 1.5; }
.rcr-car-tyre { stroke: #1f2937; stroke-width: 2; opacity: 0.95; }
.rcr-corners { display: flex; flex-direction: column; justify-content: space-between; gap: 46px; }
.rcr-corner-r { text-align: left; }
.rcr-corner-l { text-align: right; }
.rcr-corner-name { font-family: var(--rc-font-heading); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; }
.rcr-corner-pct { font-family: var(--rc-font-heading); font-size: 22px; font-weight: 800; color: var(--rc-carbon); font-variant-numeric: tabular-nums; }
.rcr-corner-sub { font-size: 11.5px; color: #5b6573; }
.rcr-corner-cmp { font-size: 11.5px; font-weight: 700; }
.rcr-good { color: #1f7a45; }
.rcr-bad { color: #b3261e; }
.rcr-strat { display: flex; flex-direction: column; gap: 6px; }
.rcr-strat-row { display: grid; grid-template-columns: 170px 1fr 70px; align-items: center; gap: 10px; font-size: 12.5px; }
.rcr-strat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #374151; }
.rcr-strat-you .rcr-strat-name, .rcr-strat-you .rcr-strat-sum { font-weight: 800; color: var(--rc-carbon); }
.rcr-strat-track { position: relative; height: 18px; }
.rcr-strat-bar { position: absolute; left: 0; top: 5px; height: 8px; border-radius: 4px; background: #c3c9d2; }
.rcr-strat-pit { position: absolute; top: -1px; transform: translateX(-50%); height: 20px; min-width: 22px; padding: 0 5px; border-radius: 10px; background: #5b6573; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; cursor: default; }
.rcr-strat-tyres { background: #1f2937; }
.rcr-strat-icon { font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; }
.rcr-strat-sum { text-align: right; font-variant-numeric: tabular-nums; color: #374151; }
.rcr-strat-ticks { height: 14px; }
.rcr-strat-ticks span { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: #6b7280; white-space: nowrap; }
.rcr-contact-line { position: relative; height: 54px; margin: 6px 6px 0; border-bottom: 2px solid #c3c9d2; }
.rcr-contact { position: absolute; bottom: 0; transform: translate(-50%, 50%); border-radius: 50%; background: rgba(215, 38, 30, 0.75); box-shadow: 0 0 0 2px #fff; }
.rcr-contact-wall { background: rgba(31, 41, 55, 0.75); }
.rcr-limit { position: absolute; bottom: 0; width: 11px; height: 11px; transform: translate(-50%, 50%) rotate(45deg); background: #d4a017; box-shadow: 0 0 0 2px #fff; }
.rcr-contact-axis { display: flex; justify-content: space-between; font-size: 11px; color: #6b7280; margin: 16px 6px 10px; }
.rcr-contact-list { display: flex; flex-direction: column; gap: 5px; }
.rcr-contact-item { display: grid; grid-template-columns: 56px 180px 1fr 110px; gap: 10px; align-items: center; font-size: 12.5px; color: #374151; }
.rcr-contact-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcr-contact-meter { height: 8px; background: #f1f3f5; border-radius: 4px; overflow: hidden; }
.rcr-contact-meter-fill { display: block; height: 100%; background: #d7261e; border-radius: 4px; }
.rcr-contact-val { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .rcr-tyre-grid { grid-template-columns: 1fr; }
  .rcr-bar-row, .rcr-div-row { grid-template-columns: 96px 1fr 84px; font-size: 11.5px; }
  .rcr-div-key { margin: 2px 94px 0 106px; }
  .rcr-strat-row { grid-template-columns: 104px 1fr 48px; font-size: 11.5px; }
  .rcr-contact-item { grid-template-columns: 48px 1fr 70px; }
  .rcr-contact-meter { display: none; }
  .rcr-tile-value { font-size: 20px; }
}
.rcr-popup-round { font-family: var(--rc-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rcc-navy); margin: -4px 0 6px; }
.rcc-page .rcl-carousel-hero-btns { flex-direction: row; flex-wrap: wrap; justify-content: center; }

/* ===================== WELCOME + DEMO ===================== */
.rcc-welcome-body { padding: 22px 24px 26px; font-size: 15px; line-height: 1.6; color: var(--rc-carbon); }
.rcc-welcome-body p { margin: 0 0 14px; }
.rcc-welcome-lead { font-size: 17px; font-weight: 600; }
.rcc-welcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 18px 0 20px; }
.rcc-welcome-grid > div { padding: 14px 16px; border-radius: 10px; background: linear-gradient(180deg, #ffffff, #f3f5f7); border: 1px solid #e3e6ea; }
.rcc-welcome-grid strong { display: block; font-family: var(--rc-font-heading); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rcc-navy); margin-bottom: 4px; }
.rcc-welcome-grid span { font-size: 13.5px; color: #4b5563; line-height: 1.5; }
.rcc-welcome-cta { display: flex; justify-content: center; margin-top: 8px; }
.rcc-welcome-demo { text-decoration: none; }
/* Locked demo buttons keep their normal look and hover colour; clicking does nothing. */
.rcc-demo .rcc-demo-locked { cursor: not-allowed; }
.rcc-demo-pill { position: fixed; bottom: 16px; right: 16px; z-index: 900; background: #111; color: #fff; border: 0; border-radius: 999px; padding: 10px 18px; font-family: var(--rc-font-heading); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); cursor: pointer; }
.rcc-demo-pill:hover { background: #2b2b2b; }
.rcc-demo-pill:focus-visible { outline: 2px solid var(--rcc-navy); outline-offset: 2px; }
/* CLOSE DEMO PAGE sits in the bottom right corner, the same gap below as to the right (Matt). */
@media (max-width: 640px) { .rcc-demo-pill { bottom: 10px; right: 10px; padding: 8px 14px; font-size: 11px; } }
/* Welcome ticker: bold navy welcome line; perk labels bold navy, perk text normal black. */
.rcc-page .rcc-ticker-lead { font-weight: 800; color: var(--rcc-navy); }
.rcc-page .rcl-ticker-item-tag.rcc-ticker-tag-bold { font-weight: 800; }
.rcc-page .rcc-ticker-plain { font-weight: 400; color: var(--rc-carbon); }

/* RACE RECAP button in the Last Race header: the metal switch's track with a single full-width knob. */
.rcc-metal-btn {
  display: inline-flex; align-items: stretch; height: 34px; padding: 3px; border-radius: 9px; flex: none;
  border: 1px solid color-mix(in srgb, var(--rc-steel) 35%, var(--rc-silver));
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 1px, rgba(0, 0, 0, 0.015) 1px 3px),
    linear-gradient(180deg, #f6f7f8 0%, #e9ecee 48%, #e1e4e7 52%, #f1f3f4 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.rcc-metal-btn-face {
  display: flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 6px;
  border: 1px solid #b4bbc2;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, rgba(0, 0, 0, 0.03) 1px 2px),
    linear-gradient(180deg, #ffffff 0%, #eef0f2 45%, #dfe3e7 55%, #f8f9fa 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 var(--rcc-navy);
  font-family: var(--rc-font-heading); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rcc-navy); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); transition: filter 0.15s ease;
}
.rcc-metal-btn:hover .rcc-metal-btn-face { filter: brightness(1.04); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 var(--rcc-navy); }
.rcc-metal-btn:active .rcc-metal-btn-face { transform: translateY(1px); }
.rcc-metal-btn:focus-visible { outline: 2px solid var(--rcc-navy); outline-offset: 2px; }
.rcr-report-who { margin: 0 0 14px; }
/* Driver Report owner line: driver name bold black, then team and number normal weight in steel. */
.rcr-who-name .rcr-who-driver { font-weight: 700; color: var(--rc-carbon); }
.rcr-who-name .rcr-who-team { font-weight: 400; color: var(--rc-steel); }
/* Header seat line (same as the Driver Report's): the name links to the profile, the team opens
   Team Information. Links keep the line's own colors; underline on hover. */
.rcc-hero-meta .rcc-seat-line { margin: 6px 0 0; }
/* Hero band the same height as league.html's (Matt), with the text block centred as a unit.
   League Hub: eyebrow + title + season line inside 46px top / 58px bottom padding. Championship has
   the same lines (same fonts, so the same heights at every width) plus the seat line, so its
   padding is cut by the seat line's height and split evenly top and bottom:
   - no seat line (welcome, no team yet): 53.4px + 53.4px (League's 104px plus the empty meta
     line's -3px pull-up);
   - with the seat line (about 55px taller): 24.3px + 24.3px.
   Phones: League is a 150px centred band; the seat line's car box shrinks to 36px tall so it fits. */
@media (min-width: 641px) {
  .rcc-page .rcl-hero { padding-top: 53.4px; padding-bottom: 53.4px; }
  .rcc-page .rcl-hero:has(.rcc-seat-line) { padding-top: 24.3px; padding-bottom: 24.3px; }
}
@media (max-width: 640px) {
  .rcc-page .rcl-hero:has(.rcc-seat-line) { padding-top: 7.5px; padding-bottom: 7.5px; }
  .rcc-hero-meta .rcc-seat-line { margin-top: 4px; }
  .rcc-hero-meta .rc-cs-logo-wrap { height: 36px; min-width: 0; }
  .rcc-hero-meta .rc-cs-logo { max-height: 36px; max-width: 90px; }
}
a.rcr-who-driver { color: var(--rc-carbon); text-decoration: none; }
.rcc-seat-line-team { background: none; border: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
a.rcr-who-driver:hover, a.rcr-who-driver:focus-visible,
.rcc-seat-line-team:hover, .rcc-seat-line-team:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.rcc-hero-meta-team-text { white-space: nowrap; }
/* Car profile pictures (assets/cars/<year>-<number>.png): podium tiles and the standings CAR column. */
.rcc-podium-car { display: block; max-width: 132px; max-height: 52px; width: auto; height: auto; object-fit: contain; margin: 0 auto; }
@media (max-width: 640px) { .rcc-podium-car { max-width: 92px; max-height: 38px; } }

/* Standings CAR column: pictures up to 110px wide or 35px tall (Matt). */
.rcc-board .rcc-board-car-slot { width: 110px; height: 40px; }
.rcc-board .rcc-board-car { max-width: 110px; max-height: 35px; }
/* Podium: car number after the driver's name. */
.rcc-podium-num { white-space: nowrap; }
@media (max-width: 640px) {
  .rcc-board .rcc-board-car-slot { width: 64px; height: 24px; }
  .rcc-board .rcc-board-car { max-width: 64px; max-height: 24px; }
}
/* Standings maker logos: up to 34px tall, width limit unchanged (50px) (Matt). Their slot, like the
   CAR slot, is 40px tall (3px above and below a full-height logo), so every row is the same height
   whether or not the board has the CAR column. */
.rcc-board .rcl-standings-mfr-logo-slot:not(.rcc-board-car-slot) { height: 40px; width: 58px; padding: 0 4px; box-sizing: border-box; } /* 4px each side of the logo's 50px max width */
.rcc-board .rcl-standings-mfr-logo:not(.rcc-board-car) { max-height: 34px; }
@media (max-width: 640px) {
  .rcc-board .rcl-standings-mfr-logo-slot:not(.rcc-board-car-slot) { height: 24px; width: 42px; }
  .rcc-board .rcl-standings-mfr-logo:not(.rcc-board-car) { max-height: 24px; }
}

/* Standings: both boards are built once; the Drivers/Teams switch hides one with the hidden attribute. */
#rcc-standings-panels [hidden] { display: none !important; }
/* The Teams board is the second board in the panel, so league.css's spacing between stacked class
   boards gave it a 22px top margin and the board jumped down on the switch. Both sit at the top. */
#rcc-standings-panels .rcl-panel-body > .rcc-board { margin-top: 0; }

/* Race Recap: dropdowns locked while a page loads. */
.rcc-page .rcl-allresults-select:disabled,
.rcc-page .rcl-allresults-session-select:disabled { opacity: 0.55; cursor: not-allowed; }

/* Manufacturers' Standings, 4th place and on (Matt): the two columns are always exactly half each
   (minmax(0, 1fr), so a long name can't widen one column and squeeze the other); long names end in
   "..."; logos up to 28px tall, max width unchanged (46px). */
.rcc-page .rcl-mfr-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rcc-page .rcl-mfr-rest-item { min-width: 0; }
.rcc-page .rcl-mfr-rest-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcc-page .rcl-mfr-rest-logo-slot { height: 28px; }
.rcc-page .rcl-mfr-rest-logo { max-height: 28px; }
@media (max-width: 640px) { .rcc-page .rcl-mfr-rest { grid-template-columns: minmax(0, 1fr); } }

/* Tips (Matt, 2026-10-11): important, quick-to-read notes get a lightbulb, a blue-gray accent bar on
   the left and a thinner blue-gray border all the way round. Used for .rcc-tip (Driver Report) and
   every callout in Help. */
.rcc-tip,
.rcc-help-body .rc-rulebook-callout {
  position: relative;
  background: #f4f7fa;
  border: 1px solid #b9c6d3;
  border-left: 4px solid #5f7d99;
  border-radius: 6px;
  padding: 12px 16px 12px 46px;
  color: var(--rc-carbon);
  font-size: 13.5px;
  line-height: 1.55;
}
.rcc-tip::before,
.rcc-help-body .rc-rulebook-callout::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 12px;
  width: 20px;
  height: 20px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7d99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.74c.6.45 1 1.16 1 1.93V17h6v-.33c0-.77.4-1.48 1-1.93A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}
.rcc-tip-title { display: block; font-weight: 700; margin-bottom: 3px; color: var(--rc-carbon); }
.rcc-tip p { margin: 0 0 6px; }
.rcc-tip p:last-child { margin-bottom: 0; }
.rcr-block .rcc-tip { margin: 14px 0 4px; }

/* Driver Report: tyre compound circles (Matt): S red, M yellow, H white, W blue. */
.rcr-comp { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-family: var(--rc-font-heading); font-size: 11px; font-weight: 800; line-height: 1; flex: 0 0 auto; box-sizing: border-box; }
.rcr-comp-s { background: #d7261e; color: #fff; }
.rcr-comp-m { background: #f2c230; color: #1f2937; }
.rcr-comp-h { background: #fff; color: #1f2937; border: 1.5px solid #8a94a3; }
.rcr-comp-w { background: #2f6fb5; color: #fff; }
.rcr-corner-pct { display: flex; align-items: center; gap: 8px; }
.rcr-corner-l .rcr-corner-pct { justify-content: flex-end; }
.rcr-corner-r .rcr-corner-pct { justify-content: flex-start; }
/* Tyre sets table. */
.rcr-sets { display: grid; gap: 0; margin-top: 6px; font-size: 13px; }
.rcr-sets-row { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) 56px; gap: 12px; align-items: center; padding: 7px 6px; border-bottom: 1px solid var(--rc-offwhite); }
.rcr-sets-head { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rc-steel); }
.rcr-sets-you { background: color-mix(in srgb, #d7261e 6%, transparent); font-weight: 700; }
.rcr-sets-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcr-sets-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rcr-set { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 3px; border: 1px solid #d5dbe2; border-radius: 999px; background: #fff; font-weight: 400; }
.rcr-set-pace { font-variant-numeric: tabular-nums; color: var(--rc-carbon); }
.rcr-set-laps, .rcr-set-wear { color: var(--rc-steel); }
.rcr-set-none { color: var(--rc-steel); }
.rcr-sets-tyres { text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .rcr-sets-head { display: none; } .rcr-sets-row { grid-template-columns: minmax(0, 1fr) auto; } .rcr-sets-tyres::after { content: ' tyres'; color: var(--rc-steel); font-weight: 400; } .rcr-sets-chips { grid-column: 1 / -1; order: 3; } }
/* Legend: pit stop circle; space under the pit strategy key. */
.rcr-legend-circle { border-radius: 50%; border-width: 2px; border-style: solid; width: 10px; height: 10px; }
.rcr-legend-gap { margin-bottom: 18px; }

/* Season Stories (2026-10-11): League News layout (league.css .rcl-news-*), plus the writing notice,
   standfirst and thumbs feedback. */
.rcc-story-status { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #b9c6d3; border-left: 4px solid #5f7d99; border-radius: 6px; background: #f4f7fa; font-size: 13px; }
.rcc-story-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rcc-story-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--rc-red); flex: 0 0 auto; animation: rcc-story-pulse 1s ease-in-out infinite alternate; }
@keyframes rcc-story-pulse { from { opacity: 0.25; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rcc-story-pulse { animation: none; } }
.rcc-story-failed { border-left-color: var(--rc-red); }
.rcc-story-retry { font-weight: 700; }
.rcc-story-standfirst { margin: 8px 0 0; font-size: 15px; font-style: italic; color: var(--rc-steel); line-height: 1.5; }
.rcc-story-dialog .rcl-news-body { font-size: 15px; line-height: 1.7; color: var(--rc-carbon); }
.rcc-story-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rc-offwhite); }
.rcc-story-vote-q { font-size: 13px; font-weight: 700; color: var(--rc-steel); }
.rcc-thumb { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #c9d1da; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.rcc-thumb svg { width: 18px; height: 18px; fill: #8a94a3; }
.rcc-thumb-down svg { transform: rotate(180deg); }
.rcc-thumb:hover svg { fill: var(--rc-carbon); }
.rcc-thumb-up.rcc-thumb-on { background: #2e9e5b; border-color: #2e9e5b; }
.rcc-thumb-down.rcc-thumb-on { background: var(--rc-red); border-color: var(--rc-red); }
.rcc-thumb-on svg { fill: #fff; }
.rcc-story-why { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.rcc-story-why textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid #c9d1da; border-radius: 6px; resize: vertical; }
.rcc-story-why-text { flex: 1 1 100%; font-size: 12px; color: var(--rc-steel); }

/* Season Stories header title in white over the news banner (Matt). */
.rcc-page #rcc-stories-panel .rcl-panel-title { color: var(--rc-white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }

/* More Stories: round badge before each headline (RD over 01, or PRE), about 1.5 lines tall. */
.rcc-story-prev { display: flex; align-items: center; gap: 10px; text-align: left; }
.rcc-story-badge { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 4px; background: var(--rcc-navy); color: var(--rc-white); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--rc-font-heading); line-height: 1; box-shadow: inset 0 -2px 0 var(--rc-red); }
.rcc-story-badge-rd { font-size: 8px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.85; }
.rcc-story-badge-num { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; margin-top: 1px; }
.rcc-story-badge-pre .rcc-story-badge-num { font-size: 10px; letter-spacing: 0.06em; margin-top: 0; }
.rcc-story-prev-title { min-width: 0; }
.rcc-page .rcl-report-line .rcc-report-penalty { color: var(--rc-red); font-weight: 700; }

/* Driver Report: drive-through penalty bubble on the charts and in the key (Matt, 2026-10-11). */
.rcr-dt-dot { fill: var(--rc-red, #c8102e); stroke: #fff; stroke-width: 1.5; }
.rcr-dt-text { fill: #fff; font-size: 8px; font-weight: 700; pointer-events: none; }
.rcr-legend-swatch.rcr-legend-dt { width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--rc-red, #c8102e); color: #fff;
  font-size: 7.5px; font-weight: 700; line-height: 18px; text-align: center; letter-spacing: 0; }