/*
  Race Club — css/style.css  (v0.2.5, GitHub Pages edition)

  WHAT CHANGED VS. THE GOOGLE SITES VERSION:
  The source file scoped every rule under a single #rc-root selector
  because it had to coexist inside a Sites page's own styles with no
  guaranteed isolation. On real, separate pages we don't need that
  defensive scoping (each page owns its whole <body>), so this is a normal
  sitewide stylesheet loaded via <link rel="stylesheet" href="css/style.css">
  on every page. The #rc-root ::-webkit-scrollbar hiding hack and the
  iframe-resize-driven layout assumptions are gone entirely — see
  js/auth.js and each page's header comment for the rest of the Sites
  workarounds that were removed.

  This is also a full reskin: new color system (white / off-white / cool
  silver / steel blue / carbon black / racing red) for the authenticated
  shell (sidebar/dashboard), a dark sidebar for those pages, and a small
  checkered-flag accent used sparingly. All functional behavior (forms,
  validation, badges, panels) is preserved from the source; only the
  visual language changed.

  FONTS (updated): the site originally used Oswald (headings/nav/buttons)
  + Inter (body) via Google Fonts. Per a later request to match the
  original Sites-era login page's fonts and keep the whole site coherent,
  --rc-font-heading/--rc-font-body were both changed to the same plain
  system font stack the original login page used (no Google Fonts import
  needed anymore) -- see the auth-page section below for the rest of that
  match (colors, background, spacing scoped to .rc-auth-page only).
*/

/* Font choice matches the original Sites-era login page exactly (plain
   system font stack, no Google Fonts) -- applied once here via the shared
   --rc-font-* variables so every page pulls from the same source instead
   of each page picking its own fonts. */
:root {
  --rc-white: #FFFFFF;
  --rc-offwhite: #F5F5F3;
  --rc-silver: #D8DDE1;
  /* One step darker than --rc-silver (2026-09-20, Matt's ask: "make the
     gray border around the individual rounds slightly darker gray") --
     for a border that needs a bit more definition than the standard
     --rc-silver hairline without jumping all the way to --rc-steel. */
  --rc-silver-dark: #BEC6CD;
  --rc-steel: #536575;
  --rc-carbon: #171717;
  --rc-red: #F21B0C;
  --rc-red-dark: #c81509;
  --rc-ok: #2e7d32;

  /* Car class badge colors -- driver profile Current Seat number badge
     (see .rc-seat-number below) and reused anywhere else a class needs
     a consistent color. LMGT3 reuses --rc-ok (already green); Hypercar
     reuses --rc-red (already red); LMP3/LMP2 are new, matching the
     purple/blue already used for "working value" badges in the v0.3
     system map doc, so the palette stays consistent across the project.
     LMGTE (2026-09-20, Matt's ask: "the pill color is orange") -- a new
     rookie class below LMGT3 on the ladder, gets its own orange token. */
  --rc-class-lmgte: #e0791b;
  --rc-class-lmgt3: var(--rc-ok);
  --rc-class-lmp3: #6b3fa0;
  --rc-class-lmp2: #2b6cb0;
  --rc-class-hypercar: var(--rc-red);
  /* Fastest lap/sector purple (2026-09-27, Matt's report: "make the
     fastest sector times and fastest overall lap time more purple. It
     looks black right now but it's bold" -- the Lap Time Log table's
     fastest-cell highlight was reusing --rc-class-lmp3, a duller purple
     tuned to read as a class badge color, not an emphasis color, AND its
     selector (.rc-results-fastest alone) was losing a specificity fight
     to .rc-results-table td's own color rule -- font-weight applied fine
     since there was no competing bold rule, but color silently lost,
     which is exactly "bold but looks black." Both fixed below: a
     dedicated, more saturated purple token, and a higher-specificity
     selector so it actually wins. */
  --rc-fastest-purple: #7c3aed;

  /* Car Objective Tier badge colors (added 2026-08-30) -- standard gaming
     rarity convention: Low = gray, Mid = blue, High = purple. Gold is
     reserved for Elite, a one-per-class/one-per-season pick rather than a
     standing Cars.Tier value -- see CAR_TIER_BADGE_COLOR_VAR in
     js/reference-data.js. */
  --rc-tier-low: #8a94a3;
  --rc-tier-mid: #3b82f6;
  --rc-tier-high: #9333ea;
  --rc-tier-elite: #c9a227;

  /* Members list role pills (added 2026-09-19, Matt's call: "the catagory
     pills to go from gold, silver, bronze and then graphite for prospect
     and driver"; recolored 2026-09-21, Matt's exact hex list -- Admin/
     Organizer/Steward now each get their own named tone instead of
     reusing the gold/silver/bronze medal tokens, and Prospect splits off
     from Driver into its own plain gray so the two no longer share a
     color). --rc-role-admin/--rc-role-organizer/--rc-role-steward are
     Matt's exact hex values, brightest (Admin) down to a dark rust
     (Steward). --rc-graphite (Driver) is a dark near-black neutral, one
     step lighter than --rc-carbon; --rc-role-prospect (Prospect) is a
     separate, lighter blue-gray so Prospect reads as visibly "not staff,
     not yet a full driver" rather than identical to Driver.
     --rc-tier-silver/--rc-tier-bronze remain in use elsewhere (Data
     Management pills, etc. -- see .rc-badge-graphite below) even though
     the Members list role pills no longer read from them. */
  --rc-tier-silver: #9AA5AD;
  --rc-tier-bronze: #93582F;
  --rc-graphite: #3A3F45;
  --rc-role-admin: #f1c40f;
  --rc-role-organizer: #c27c0e;
  --rc-role-steward: #a84300;
  --rc-role-prospect: #7d8791;

  /* Semantic bonus/penalty/status colors (named 2026-09-13, sitewide review
     fix) -- these five hex values were previously hand-typed at 29 separate
     call sites across the file (--rc-positive alone at 15 of them), so a
     future "make the penalty red a bit darker" ask meant hunting down every
     occurrence instead of editing one line. Named here as the semantic
     concept they represent (not as a literal color name), matching how
     --rc-red/--rc-ok already work above. Only colors that repeated 2+ times
     were promoted -- a handful of true one-off hex values remain literal
     rather than invent a token for a single call site.
     --rc-positive: dark green -- Safe tier, bonus amounts, Active/Done
     status, upward deltas.
     --rc-positive-bright: a separate, more saturated green used only for
     the Recent Results pill outline and the sponsor risk/reward swing bar
     -- intentionally a different shade of "positive" than --rc-positive,
     not a duplicate of it (see the Recent Results comment further down).
     --rc-positive-bg/--rc-positive-border: the light-fill/border pair that
     goes with --rc-positive wherever a badge/chip needs a tinted
     background instead of a solid fill.
     --rc-negative: the site's "penalty" red -- deliberately distinct from
     --rc-red (which means "primary action" or "form error"), since a
     sponsor penalty or a negative result isn't either of those.
     --rc-negative-bg: the light-fill pairing for --rc-negative.
     --rc-balanced: the Balanced sponsor tier's blue, reused for the
     matching "Balanced"/"Scheduled" status meaning elsewhere.
     --rc-gold: the site's one non-tier gold accent (special calendar
     races, the gold stat pill) -- not the same token as --rc-tier-elite
     above, which is a Car Objective Tier color with its own separate
     meaning even though both happen to render as gold.
     --rc-warning/--rc-warning-accent: probation/pending-review amber.
     --rc-orange: the Risky sponsor tier's color (2026-09-13, Matt's call:
     Risky should read as orange, not red -- red was already claimed
     sitewide for "primary action"/"error"/penalty, so a Risky sponsor
     badge sitting next to a penalty number in the same red was reading
     as more alarming than intended). Reuses the exact value the
     Reputation bar's own orange zone already uses (.rc-rep-bar-orange,
     further down this file) rather than inventing a second orange. */
  --rc-positive: #1f5c25;
  --rc-positive-bright: #22c55e;
  --rc-positive-bg: #eaf6ec;
  --rc-positive-border: #bfe2c4;
  --rc-negative: #ff3b30;
  --rc-negative-bg: #fdecea;
  /* --rc-negative-border: the light-fill/border pairing for --rc-negative,
     matching how --rc-positive-border pairs with --rc-positive (2026-09-26,
     promoted from the one hardcoded #f4c2bd literal .rc-team-perk-penalty
     already used, once a second call site -- the protest-ruling/round-
     upload status circles below -- needed the exact same tint). */
  --rc-negative-border: #f4c2bd;
  --rc-balanced: #1a5276;
  --rc-gold: #b8860b;
  --rc-warning: #a3790a;
  --rc-warning-accent: #eab308;
  --rc-orange: #e8892b;

  --rc-font-heading: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --rc-font-body: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--rc-offwhite);
  color: var(--rc-carbon);
  font-family: var(--rc-font-body);
  font-size: 15px;
  line-height: 1.5;
  /* Belt-and-suspenders against any element (the hero banner especially)
     bleeding past the screen edge on mobile/tablet. The hero itself is
     already pinned to left:0/right:0, which is bounded by the viewport --
     but if ANYTHING else on the page is even one pixel wider than the
     viewport, the browser grows the whole scrollable area to fit it,
     which then makes fixed left:0/right:0 elements span that WIDER area
     instead of the visible screen. `clip`, not `hidden` (2026-09-13,
     found while chasing Matt's report "the index bottom part doesn't
     scroll over the banner"): `overflow-x: hidden` set on BOTH html and
     body is a known browser quirk that silently disables `position:
     sticky` for every descendant on the page -- the index.html hero
     banner (.rc-hero) went from sticking under the header to just
     scrolling away like a normal block, with no error or warning
     anywhere. `clip` gives the exact same "nothing bleeds past the
     screen edge" clipping behavior this rule was added for, without
     that side effect. Confirmed by direct test: same page, same
     scroll, .rc-hero's position went from drifting off-screen with
     `hidden` to correctly pinned at top:72px with `clip`. */
  overflow-x: clip;
  max-width: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--rc-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rc-carbon);
  margin: 0;
}

a { color: var(--rc-red); }
a:hover { color: var(--rc-red-dark); }

p { margin: 0 0 0.75em; }

/* -------------------------------------------------------------------- */
/* Checkered-flag accent — small, restrained, used under headings/logos */
/* -------------------------------------------------------------------- */
.rc-checker {
  width: 64px;
  height: 8px;
  margin: 10px auto 0;
  background-image:
    conic-gradient(var(--rc-carbon) 90deg, var(--rc-red) 90deg 180deg, var(--rc-carbon) 180deg 270deg, var(--rc-red) 270deg);
  background-size: 8px 8px;
}
.rc-checker.rc-checker-left { margin: 10px 0 0; }

/* -------------------------------------------------------------------- */
/* Buttons */
/* -------------------------------------------------------------------- */
.rc-btn-primary {
  display: inline-block;
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  font-family: var(--rc-font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--rc-red);
  color: var(--rc-white);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  /* Both button classes are sometimes used on an <a> (index.html's
     "Create Your Driver" CTA, Calendar's Register link) instead of a
     <button> -- without this, the sitewide `a { color: red }` link
     style leaves a default underline on those, which reads as a link,
     not a button. */
  text-decoration: none;
}
/* color explicitly repeated here (not just on the base .rc-btn-primary
   rule) because the sitewide "a:hover { color: var(--rc-red-dark); })"
   rule further up this file is MORE specific than plain ".rc-btn-primary"
   (element+pseudo-class beats a single class) -- so on any <a> styled as
   a primary button (e.g. the "Create Your Driver" CTA on index.html),
   that global link-hover rule was winning and turning the button's text
   dark red on hover, which read as invisible against the also-darkened
   red-dark hover background. Restating white color here, at matching
   .rc-btn-primary:hover specificity, wins back for real. */
.rc-btn-primary:hover { background: var(--rc-red-dark); color: var(--rc-white); }
.rc-btn-primary:disabled { background: var(--rc-silver); color: var(--rc-steel); cursor: default; }

/* Sitewide button rule (2026-09-13, Matt's call): every button is this
   gray outline/gray text style UNLESS it saves something to a sheet --
   a save button is .rc-btn-primary instead (solid red, darkens on
   hover). Don't hand-pick colors per button going forward; pick
   .rc-btn-primary or .rc-btn-secondary by that one question. See the
   race-club-ui-consistency skill for the full writeup and the audited
   list of which existing buttons are which. */
.rc-btn-secondary {
  padding: 8px 14px;
  font-family: var(--rc-font-heading);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--rc-silver);
  border-radius: 4px;
  background: var(--rc-white);
  color: var(--rc-steel);
  cursor: pointer;
  text-decoration: none;
}
.rc-btn-secondary:hover { background: var(--rc-offwhite); }
.rc-btn-secondary:disabled { opacity: 0.45; cursor: default; background: var(--rc-white); }
.rc-btn-secondary:disabled:hover { background: var(--rc-white); }

/* .rc-btn-primary is sized for its ORIGINAL context -- a full-width form
   submit button, hence the generous 12px padding and 20px top margin --
   and .rc-btn-secondary is sized for a small inline action. Mixing the
   two side by side (a button ROW: League Management's action row, the
   wizard's footer, its Create Season / Create a Future Season pair) made
   them render at visibly different heights and widths ("the red button
   is different from all the other buttons," "Next and Back are
   different sizes" -- Matt's bug reports). Add this alongside either
   base class to force the exact same compact box regardless of which
   variant or how long the label is.
   THIS is the site's one standard "row button" size -- every button that
   sits next to another button (not a lone full-width form submit) should
   carry .rc-btn-sm, full stop. min-width was originally 150px, which
   read fine for long labels ("Create Season," "Save & Close") but made a
   short one-word button like Save/Cancel/Approve/Reject look like a tiny
   word floating in an oversized box ("reduce the width of the Save
   button so it doesn't look like a small word in a wide button" --
   Matt's bug report). Dropped to 92px, which still comfortably covers
   every long label (those size to their own text anyway, min-width only
   ever affects the short ones) while letting short labels size to
   themselves. */
.rc-btn-sm {
  display: inline-block;
  width: auto;
  min-width: 92px;
  margin-top: 0;
  padding: 10px 20px;
  font-size: 12px;
  text-align: center;
}

/* Data Management panel's counts line (.rc-dm-summary/-line) removed
   2026-09-24 (Matt's call: "get rid of the member n, cars n and tracks n
   from the data management container... so the page only loads the
   buttons") -- the panel is just the Members/Tracks/Cars button row now. */

/* Wizard Next/Back only ("Make the Next and Back buttons slightly less
   wide" -- Matt's call) -- narrower than the shared .rc-btn-sm min-width
   so Save & Close / Create Season / League Management's row stay put. */
.rc-btn-nav {
  min-width: 78px;
}

/* Compact inline "row action" button -- Edit/Deactivate/Reactivate next
   to a list row (Data Management's Drivers/Tracks/Cars panels). Smaller
   than .rc-btn-sm on purpose: it sits inline with a line of list text,
   not in a page-level button row, so the standard 10px/20px box would
   look oversized there. Always paired with .rc-btn-secondary (never
   .rc-btn-primary -- a row action is never the primary/destructive
   action on the page). Replaces the identical inline
   `style.cssText = 'padding:4px 10px;font-size:12px;'` that used to be
   repeated at every call site -- one class here instead, so a future
   size tweak is a one-line change, not a find-and-replace. */
.rc-btn-row {
  padding: 4px 10px;
  font-size: 12px;
  min-width: 0;
}

/* .rc-btn-row-red (2026-09-13) was a one-off red outline modifier for
   Recompute Season/Edit Season. Removed the same day it was added --
   superseded by the sitewide rule below, where color is decided by
   save-vs-not, not by which row a button happens to sit in. */

.rc-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--rc-red);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--rc-font-body);
}

.rc-icon-btn {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  border: 1px solid var(--rc-silver);
  background: var(--rc-white);
  color: var(--rc-steel);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.rc-icon-btn:hover { background: var(--rc-offwhite); color: var(--rc-carbon); }
.rc-icon-btn svg { display: block; }

/* Small triangle/chevron disclosure toggle for expandable rows (League
   Management's Races toggle, 2026-09-13, Matt's call: "use triangles to
   open and close seasons") -- same border/background/hover treatment as
   .rc-btn-secondary + .rc-btn-row so it sits in that same button row
   without looking like a different kind of control, just icon-only and
   square instead of a text pill. The chevron itself rotates on open
   rather than swapping between two icons -- one element, one transition. */
.rc-disclosure-btn {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rc-silver);
  border-radius: 4px;
  background: var(--rc-white);
  color: var(--rc-steel);
  cursor: pointer;
}
.rc-disclosure-btn:hover { background: var(--rc-offwhite); color: var(--rc-carbon); }
.rc-disclosure-btn svg { display: block; transition: transform 0.15s ease; }
.rc-disclosure-btn.rc-disclosure-open svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .rc-disclosure-btn svg { transition: none; }
}

/* -------------------------------------------------------------------- */
/* Cards / panels */
/* -------------------------------------------------------------------- */
.rc-card {
  padding: 20px;
  border: 1px solid var(--rc-silver);
  border-radius: 8px;
  background: var(--rc-white);
}
.rc-panel {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--rc-silver);
  border-radius: 8px;
  background: var(--rc-white);
}
/* League Management's Seasons panel and Admin's Data Management panel
   (2026-08-30) reuse the Dashboard's own card chrome instead of a
   one-off treatment -- apply "rc-panel rc-dash-card" to the container and
   "rc-dash-card-title" to its h3, exactly like registrationStatusCard/
   currentSeatCard do, so every "featured panel" on the site stays
   visually consistent (Matt's call: "should look exactly like the cards
   we already designed on the dashboard... keep this design consistent
   moving forward"). See .rc-dash-card/.rc-dash-card-title further down
   this file for the actual rules -- nothing new needed here.
   Generic top-level grouping pattern -- a black pill heading a set of
   indented rows underneath, no tree glyph since it's the outermost level
   (see .rc-dm-season-head/.rc-dm-subrow-edit further down for the version
   nested one level deeper, e.g. Cars' Class -> Season). Originally built
   just for the Seasons panel's "group by creation year" (2026-08-30,
   named .rc-season-year-head/.rc-season-row then); generalized the same
   day to also back the Members list's Role grouping and the Tracks list's
   Region grouping, rather than growing three near-identical copies. */
.rc-group-head { display: flex; align-items: center; gap: 8px; padding: 14px 0 4px; }
.rc-group-head:first-of-type { padding-top: 6px; }
.rc-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--rc-offwhite);
}
.rc-group-row:last-child { border-bottom: none; }

/* -------------------------------------------------------------------- */
/* Data Management (Account.html) -- Drivers/Tracks/Cars panels          */
/* -------------------------------------------------------------------- */
/* Rounded-rectangle, white-on-color badge -- the same visual treatment
   real broadcast graphics use for car-class tags. Colors come from CSS
   vars so these stay in sync with CAR_CLASS_BADGE_COLOR_VAR
   (js/reference-data.js) wherever else a class badge shows up later.
   (WEC/ELMS badges were removed -- those turned out to be Layout entries,
   not a separate venue property -- see Core.gs's Tracks schema comment.) */
.rc-badge-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 5px;
  font-family: var(--rc-font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rc-white);
  line-height: 1.6;
}
.rc-badge-lmgte { background: var(--rc-class-lmgte); }
.rc-badge-lmgt3 { background: var(--rc-class-lmgt3); }
.rc-badge-lmp3 { background: var(--rc-class-lmp3); }
.rc-badge-lmp2 { background: var(--rc-class-lmp2); }
.rc-badge-hypercar { background: var(--rc-class-hypercar); }
/* Bigger type, tighter horizontal padding for every class pill specifically
   (2026-09-19, Matt's call: "increase the size of the font inside the
   class pills/reduce the padding so it takes up more room in the pill" --
   site-wide, wherever a class pill shows) -- scoped to just these five
   class-color classes (LMGTE added 2026-09-20) so it never touches
   .rc-badge-chip's other uses (status/tier/race pills, etc.), which stay
   their original size. */
.rc-badge-lmgte, .rc-badge-lmgt3, .rc-badge-lmp3, .rc-badge-lmp2, .rc-badge-hypercar { font-size: 13px; padding: 3px 8px; }
/* Neutral "grouping label" badge -- black rounded rectangle, same chip
   shape as the class badges above but always carbon/white regardless of
   the category inside it, since it's a structural grouping label, not a
   colored status. Originally added just for the Season year pill (Matt's
   call); reused as-is (2026-08-30) for the Members list's Role grouping
   and the Tracks list's Region grouping -- one shared "grouping" badge
   instead of near-identical copies per list. */
.rc-badge-group { background: var(--rc-carbon); }
/* Members list role pills (2026-09-19) -- see the --rc-tier-silver/
   --rc-tier-bronze/--rc-graphite token comment above for the color
   mapping. Admin/Organizer/Steward each get their own medal tone;
   Driver and Prospect intentionally share .rc-badge-graphite. */
/* Admin's fill (#f1c40f) is bright enough that .rc-badge-chip's default
   white text (readable on every other role's darker fill) fails contrast
   -- carbon text keeps this one pill legible without touching the shared
   base rule. */
.rc-badge-role-admin { background: var(--rc-role-admin); color: var(--rc-carbon); }
.rc-badge-role-organizer { background: var(--rc-role-organizer); }
.rc-badge-role-steward { background: var(--rc-role-steward); }
.rc-badge-role-driver { background: var(--rc-graphite); }
.rc-badge-role-prospect { background: var(--rc-role-prospect); }
/* Graphite grouping badge (2026-09-19, Matt's call: originally "make the
   track location pills graphite instead of black and the car year pills
   graphite instead of black" -- Tracks popup's Region pill, Cars popup's
   Season pill -- then extended the same day to the League Tools Seasons
   list's own year pill and the new News panel's year pills too, "make
   the year pills graphite along with the season year pills"). Same shape
   as .rc-badge-group, just a lighter dark-neutral fill. */
.rc-badge-graphite { background: var(--rc-graphite); }
/* Sponsor risk-tier badges (Data Management's Sponsors popup, and the
   Sponsors page's own full-catalog list) -- Safe/Balanced/Risky (renamed
   2026-08-31 from Safe/Balanced/Aggressive, Matt's call -- only
   Aggressive->Risky stuck; Safe stayed Safe), same chip shape as the
   class badges, colored by risk level (green -> steel blue -> red)
   rather than by class. */
.rc-badge-tier-safe { background: var(--rc-positive); }
.rc-badge-tier-balanced { background: var(--rc-balanced); }
.rc-badge-tier-risky { background: var(--rc-orange); }
/* Season status pill (League Management's Season Tools list, added
   2026-08-30) -- originally colored so Draft/Scheduled/Registration/
   Active/Completed read apart from each other at a glance in a flat list
   of seasons. RETIRED as of 2026-09-23 (Matt's call: "I don't like how it
   says REGISTRATION... I'd rather not see it" -- see .rc-badge-status-
   neutral below, which replaced this whole per-status color system with
   one plain LIVE/END pill). The four rules below are kept, unused, only
   because .rc-badge-status-completed is still a real dependency (the
   "Finalized" chip, buildSeasonRaceRow/renderStewardingSection) -- do not
   delete that one; the other three (-draft/-scheduled/-registration) have
   no remaining callers and are safe to remove outright in a future pass. */
.rc-badge-status-draft { background: var(--rc-tier-low); }
.rc-badge-status-scheduled { background: var(--rc-balanced); }
.rc-badge-status-registration { background: transparent; border: 1.5px dashed var(--rc-positive); color: var(--rc-positive); padding: 1.5px 8.5px; }
.rc-badge-status-active { background: var(--rc-red); }
.rc-badge-status-completed { background: var(--rc-steel); }
/* Per-race status pill (League Management's per-season Races list, added
   2026-09-07) -- same chip shape/colors as the season status pills above,
   reused for the same meaning: green = still ahead of it (Scheduled),
   red = something needs attention (Completed, no results posted yet),
   steel = fully settled (Completed, results posted). */
.rc-badge-race-scheduled { background: var(--rc-positive); }
.rc-badge-race-noresults { background: var(--rc-red); }
.rc-badge-race-posted { background: var(--rc-steel); }
/* Quiet/neutral status pill (2026-09-23, Matt's ask: League Tools' season
   status pill and the per-race Scheduled/no-results-yet pills were too
   bold/attention-grabbing -- "the colors too bold... should blend into
   the page more"). Light gray fill, steel text -- same unobtrusive
   treatment the button system's "gray unless it saves" rule already uses
   sitewide. Two class names on purpose, both sharing this one look:
   -status-neutral is the season-level LIVE/END pill (_rcSeasonStatusBadge,
   Account.html), -race-quiet is the per-race Scheduled/no-results-yet
   pill inside a season's expanded Races list (buildSeasonRaceRow).
   Deliberately NOT applied to the pre-existing .rc-badge-race-scheduled/
   .rc-badge-race-noresults classes above -- those two are also reused
   verbatim by Stewarding's "N Pending" badge and the Protests status
   pills, which Matt did not ask to change. */
.rc-badge-status-neutral,
.rc-badge-race-quiet { background: var(--rc-silver); color: var(--rc-steel); }
/* League Tools round status line (2026-09-23, Matt's ask; recolored
   2026-09-24, item 8) -- a small circle-icon + text line under a race
   row's date/track hint, replacing the old plain-gray partial-import
   note. No more per-stage red/yellow/green coding (those classes,
   .rc-round-status-red/-yellow/-green, and the icon-color-matches-text
   convention they drove, are removed) -- the text is always light gray
   and italic (.rc-round-status-text), and the icon reuses the Dashboard
   Protest card's own .rc-protest-dash-icon/-pending/-ruled classes
   directly (open gray circle, filled gray with a white checkmark only
   once finalized) instead of a separate icon here. */
.rc-round-status { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.rc-round-status-text { font-size: 12px; color: var(--rc-steel); font-style: italic; }
/* .rc-ruling-select/.rc-ruling-standards-btn removed (2026-09-26) -- both
   were sized to share one row (the ruling dropdown at 66%, the Penalty
   Standards opener filling the rest); the Penalty Standards popup is gone
   (Matt's ask -- he's building a "suggested penalty" system instead), so
   the select is back to plain full width, styled inline. */
/* Review & Finalize popup's protest list (openRoundEditFinalizeModal,
   Account.html) -- redesigned again 2026-09-26 (Matt's ask: "make the list
   of protests mimic the protests list, with a circle in front of the
   title") to reuse the Dashboard Protest card's own .rc-protest-dash-item/
   -icon/-item-body/-line markup and .rc-protest-dash-list's item spacing/
   divider directly, rather than the one-off .rc-round-review-item divider
   this popup used from 2026-09-25 (removed). The Apply Ruling/Finalize
   action bar moved out of this list entirely, up to its own row just below
   the modal header (same "add button row" placement Cars/Tracks/Members
   use, .rc-panel + a flex row above it) -- see openRoundEditFinalizeModal.
   Ruling controls (the tier dropdown, override box) render inside the
   tree-indent row (.rc-dm-subrow/.rc-dm-tree) below the infraction line
   for a still-Pending protest, and the ruling's outcome text renders there
   instead once it's been ruled on -- same "Drivers involved -> infraction
   -> indented ruling" order every entry now follows. */
/* Car Objective Tier pill (.rc-badge-cartier and its low/mid/high/elite
   color variants) removed entirely 2026-09-19 -- Matt's call: car Tier
   classification doesn't matter anymore, and tier information should
   never surface on the dashboard, Choose Your Team screen, or anywhere
   else on the site. The --rc-tier-low/-mid/-high/-elite color tokens
   themselves are kept -- they're general-purpose tokens reused elsewhere
   (Season status pills, Recent Results pills), not car-tier-specific. */
/* Compact abbreviated class pill (.rc-badge-chip-abbrev, added
   2026-09-19) -- the Dashboard's Current Seat card corner figure, sitting
   right before the "#n" car number (Matt's ask: "put a class pill before
   the number of the car"). Same colored rounded-rectangle treatment as
   .rc-badge-chip (the class classes -lmgt3/-lmp3/-lmp2/-hypercar layer on
   top exactly as before), just tighter padding/font-size for the shorter
   abbreviated label (HY/GT3/P3/P2) sitting inline next to header text. */
/* Font bumped, padding trimmed same as the other class pills above
   (2026-09-19, Matt's call) -- still visibly smaller than a full class
   pill since it's inline with header text, just less cramped than before.
   margin-right dropped (2026-09-19) -- the corner-figure flex row it sits
   in now provides that gap itself (see .rc-dash-card-corner-figure). */
.rc-badge-chip-abbrev { padding: 2px 6px; font-size: 12px; }
/* "Buy-in range" pill on the Choose Your Class screen -- sits directly
   next to the class badge instead of the exact cost living in its own
   centered column. Light gray outline, not a filled chip (2026-08-30,
   Matt's call) -- overrides .rc-badge-chip's white-on-color default with
   a plain outline + steel-colored numbers, since this is a range for
   reference, not a category badge like the class chip next to it. */
.rc-badge-cost-range { background: none; border: 1px solid var(--rc-silver); color: var(--rc-steel); margin-left: 6px; }
/* Recent Results pills (Dashboard's Recent Results card + the full
   Results page's "Your Race" chip row) -- 2026-09-08, Matt's call: give
   every pill its own outline color instead of the old mix of solid green/
   red/black fills so they read apart at a glance. Same outline shape/sizing
   trick as a transparent-fill, colored-border pill (padding trimmed by the
   border width). Bright green/red reuse the exact colors the Sponsors
   comparison table already uses for bonus/penalty
   (.rc-sponsor-swing-seg-bonus/-penalty) so "positive"/"negative" means the
   same color everywhere on the site. Fastest Lap reuses the tier-high
   (purple) color token for a distinct look. Pole keeps the existing gold
   tier-elite color; Most Laps Led gets its own amber now that Fastest Lap
   has moved off gold. Points/Qualifying/Laps/Pit Stops are informational
   counts, not a win or a loss, so they get a neutral steel outline --
   Points is the one exception, reusing the positive green since scoring
   points is always a good outcome. (.rc-badge-result-clean removed
   2026-09-23 -- Clean Race system removed sitewide, Matt's ask.) */
.rc-badge-result {
  background: none;
  font-weight: 700;
  padding: 1.5px 8.5px; /* trimmed by the 1.5px border */
}
.rc-badge-result-positive { border: 1.5px solid var(--rc-positive-bright); color: var(--rc-positive-bright); }
.rc-badge-result-negative { border: 1.5px solid var(--rc-negative); color: var(--rc-negative); }
.rc-badge-result-fastestlap { border: 1.5px solid var(--rc-tier-high); color: var(--rc-tier-high); }
.rc-badge-result-mostlapsled { border: 1.5px solid #d97706; color: #d97706; }
.rc-badge-result-neutral { border: 1.5px solid var(--rc-steel); color: var(--rc-steel); }
/* Sponsor hit pill (bonus or penalty) -- solid light gray fill rather than
   an outline, deliberately set apart from every other Recent Results pill
   since it already carries its own meaning (sponsor name + payout) and
   doesn't need color-coding by positive/negative on top of that. */
.rc-badge-result-sponsor { background: var(--rc-silver); color: var(--rc-carbon); }
/* .rc-team-card-elite (the Choose Your Team screen's gold-bordered Elite
   card) removed entirely 2026-09-19 -- the Elite Tier picker itself was
   removed from the Season Creation Wizard, so no team is ever marked Elite
   anymore. See season-1-mvp-scope.md-adjacent note in DataCache.gs. */
/* Manufacturer logo column in the Cars popup -- same fixed-width, centered
   treatment as .rc-dm-sponsor-logo-col below, so the text column's left
   edge lands in the same place row to row regardless of a given
   manufacturer logo's own aspect ratio. */
.rc-dm-car-logo-col {
  width: 120px;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* The logo image itself -- capped at 80px wide / 40px tall (whichever the
   image's own aspect ratio hits first) -- narrower than
   .rc-dm-sponsor-logo below (100px), since manufacturer marks are smaller/
   more square than sponsor wordmarks. Hidden automatically (onerror,
   wired in Account.html) if that manufacturer's logo file hasn't been
   uploaded yet, so a missing image never shows as a broken-image icon. */
.rc-dm-car-logo {
  width: auto;
  height: auto;
  max-width: 80px;
  max-height: 40px;
  object-fit: contain;
  flex: none;
}
/* Sponsor logo column in the Sponsors popup -- a fixed-width slot, logo
   right-justified inside it, so the sponsor name/bonus text next to it
   always starts at the same x position regardless of whether that row's
   actual logo file is a narrow square mark or a wide wordmark. Without
   this fixed column, a plain inline <img> would push the text column
   left/right by however wide that one logo happened to be. */
.rc-dm-sponsor-logo-col {
  /* Back down to 100px (2026-09-13, Matt's third pass on this size --
     100/40 was actually the very first value here, then 75/35, then
     150/35, now settled back on 100/40) alongside .rc-dm-sponsor-logo's
     own max-width below -- this column has to be at least as wide as
     the logo's cap or a wide wordmark gets clipped against the column's
     own fixed width regardless of what the image's max-width allows. */
  width: 100px;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* The logo image itself -- same idea as .rc-dm-car-logo above (hidden via
   onerror when the file's missing) but capped at 100px wide / 40px tall
   (whichever the image's own aspect ratio hits first), since sponsor
   logos are wordmarks/banners rather than small square manufacturer
   badges. object-fit: contain keeps it from ever stretching or cropping
   inside those bounds; .rc-dm-car-info's align-items: center is what
   centers the whole column against the two-line name/bonus text next to
   it. */
.rc-dm-sponsor-logo {
  width: auto;
  height: auto;
  /* 100px wide / 40px tall (2026-09-13, Matt's final call on this pass --
     100/40 -> 75/35 -> 150/35 -> back to 100/40). Only this list's
     logo cap changed; the picker/table/chip sponsor logos elsewhere in
     this file (rc-sponsor-pick-logo, rc-sponsor-table-logo,
     rc-pick-chip-logo) each have their own already-documented sizing for
     their own context and weren't touched. .rc-dm-sponsor-logo-col above
     is narrowed to match, so the column never sits wider than the logo's
     own cap. */
  max-width: 100px;
  max-height: 40px;
  object-fit: contain;
  flex: none;
}

/* Driver-facing sponsor picker -- shared by the registration flow's
   sponsor-pick step and the Sponsors page's "Choose Sponsors" modal
   (Matt's call, 2026-08-30: both list every sponsor, grouped by Tier
   (Safe/Balanced/Risky, same _rcTierBadge chip the admin Sponsors
   popup uses) with its bonus/penalty numbers and a logo capped at 140px
   wide / 80px tall, and both use this exact same component -- see
   buildSponsorPickerList() in Account.html). Scrolls internally past a
   handful of sponsors rather than growing the modal indefinitely. */
.rc-sponsor-pick-list { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; margin: 10px 0; }
/* Tier badges (_rcTierBadge output) sit inline in this same list, above
   each tier's group of cards -- a bit of top margin separates one tier's
   badge from the previous tier's last card. */
.rc-sponsor-pick-list .rc-badge-chip { margin-top: 6px; }
.rc-sponsor-pick-list .rc-badge-chip:first-child { margin-top: 0; }
.rc-sponsor-pick-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--rc-silver);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rc-sponsor-pick-card:hover { border-color: var(--rc-ok); }
/* Selected state, registration/Choose Sponsors modal only -- a light
   green fill plus a green border (Matt's call, 2026-08-30 -- NOT red,
   since red reads as an error/warning color everywhere else on the site). */
.rc-sponsor-pick-card-selected { border-color: var(--rc-ok); background: var(--rc-positive-bg); }
/* Read-only variant -- the Sponsors page's "your 3 sponsors" display, not
   a picker, so no hover/selection affordance. */
.rc-sponsor-pick-card-readonly { cursor: default; }
.rc-sponsor-pick-card-readonly:hover { border-color: var(--rc-silver); }
/* Fixed-width column (min 150px), logo centered inside it -- so the text
   column's left edge lands in the same place row to row no matter how
   wide any one sponsor's actual logo file is, same reasoning as the admin
   Sponsors popup's own logo column. */
.rc-sponsor-pick-logo-col { min-width: 150px; flex: none; display: flex; align-items: center; justify-content: center; }
.rc-sponsor-pick-logo { max-width: 140px; max-height: 70px; object-fit: contain; }
.rc-sponsor-pick-text { flex: 1 1 auto; min-width: 0; }
.rc-sponsor-pick-name { font-weight: 700; font-size: 14px; color: var(--rc-carbon); }
/* Amount + trigger name only, both on one line (2026-09-01, Matt's call:
   simplify the popup list, full descriptions moved to the Sponsors page's
   own trigger glossary). */
.rc-sponsor-pick-terms { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; margin-top: 4px; }
/* Bonus in green / Penalty in red -- Matt's call, 2026-08-30 -- so the
   upside and downside of a sponsor read apart from each other at a glance.
   Penalty red matches the Risk/Reward bar's penalty color (2026-09-01,
   Matt's call: keep every red penalty number the same red sitewide). */
.rc-sponsor-pick-bonus { color: var(--rc-ok); }
.rc-sponsor-pick-penalty { color: var(--rc-negative); }

/* -------------------------------------------------------------------- */
/* Sponsors page -- Comparison Table redesign (2026-09-01, Matt's call)  */
/* -------------------------------------------------------------------- */
/* .rc-sponsors-explainer and .rc-page-howto removed (2026-09-18) -- the
   last page-header explainer paragraphs and "how to use this page" boxes
   that used these (Career/Results/Protests) were all taken out per
   Matt's call to remove page descriptions now that the Help section
   covers this ground; nothing on the site references either class
   anymore. */

/* "Current Picks" -- a compact chip strip (2026-09-01, replacing the
   prior 3-column layout), always 3 slots wide. align-items: stretch (the
   flex row default) is what makes a filled chip and an Open Slot chip
   sitting side by side come out the same height. */
.rc-picks-strip { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.rc-pick-chip {
  flex: 1 1 0;
  min-width: 190px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rc-silver);
  border-radius: 8px;
  background: var(--rc-offwhite);
}
.rc-pick-chip-logo { max-width: 46px; max-height: 46px; object-fit: contain; flex: none; }
.rc-pick-chip-text { min-width: 0; }
.rc-pick-chip-name { font-weight: 700; font-size: 13.5px; color: var(--rc-carbon); }
.rc-pick-chip-tier { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; color: var(--rc-steel); }
.rc-tier-text-safe { color: var(--rc-positive); }
.rc-tier-text-balanced { color: var(--rc-balanced); }
.rc-tier-text-risky { color: var(--rc-orange); }
/* Open Slot -- same dashed/muted/uppercase treatment as the Calendar
   page's Bye Week card (.rc-cal-bye), so an unfilled pick reads the same
   "nothing here on purpose" way a bye week does. */
.rc-pick-chip-open {
  justify-content: center;
  border-style: dashed;
  border-color: var(--rc-silver);
  background: var(--rc-white);
}
.rc-pick-chip-open-label { font-size: 12px; font-weight: 600; color: var(--rc-steel); text-transform: uppercase; letter-spacing: 0.03em; }
/* Click-to-target picking (2026-09-02 redesign, replacing the Choose/
   Change Sponsors popup) -- a slot chip (filled or Open) becomes a
   button: click it, the page scrolls to All Sponsors below, click a row
   there to fill it. rc-pick-chip-active marks whichever slot is
   currently awaiting a pick -- same red ring treatment
   .rc-sponsor-table-row-clickable's own hover state uses below, so the
   "this is the thing waiting on you" signal reads the same in both
   places. */
.rc-pick-chip-clickable { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.rc-pick-chip-clickable:hover { border-color: var(--rc-carbon); }
.rc-pick-chip-active { border-color: var(--rc-red); box-shadow: 0 0 0 2px rgba(242, 27, 12, 0.18); }
.rc-pick-chip-open.rc-pick-chip-active { border-style: solid; }

/* Sub-heading inside a card that already has its own big rc-dash-card-
   title -- e.g. "Sponsor Goals" folded into the same card as Current
   Picks (2026-09-01, Matt's call: one container, not two). A light rule
   above plus smaller/tighter type than rc-dash-card-title, so it reads as
   a section break inside the card rather than a second card title. */
.rc-panel-subhead { font-family: var(--rc-font-heading); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc-carbon); margin: 22px 0 4px; padding-top: 18px; border-top: 1px solid var(--rc-offwhite); }

/* "Sponsor Goals" -- folded into the same card as Current Picks
   (2026-09-01, Matt's call): only this driver's own picked sponsors,
   Bonus/Penalty triggers as two side-by-side columns, so what's actually
   "in play" for the next race reads as one quick-glance checklist. */
.rc-sponsor-goals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 14px; }
.rc-sponsor-goals-col-head { font-family: var(--rc-font-heading); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 8px; border-bottom: 1px solid var(--rc-offwhite); }
.rc-sponsor-goals-col-head-bonus { color: var(--rc-positive); }
.rc-sponsor-goals-col-head-penalty { color: var(--rc-negative); }
.rc-sponsor-goal-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rc-offwhite); }
.rc-sponsor-goal-row:last-child { border-bottom: none; }
.rc-sponsor-goal-amt { flex: none; width: 62px; font-family: var(--rc-font-heading); font-size: 14px; font-weight: 700; }
.rc-sponsor-goal-amt-bonus { color: var(--rc-positive); }
.rc-sponsor-goal-amt-penalty { color: var(--rc-negative); }
.rc-sponsor-goal-text { min-width: 0; }
.rc-sponsor-goal-trigger { font-size: 12.5px; font-weight: 600; color: var(--rc-carbon); }
.rc-sponsor-goal-sponsor { font-size: 11.5px; color: var(--rc-steel); margin-top: 1px; }
@media (max-width: 560px) {
  .rc-sponsor-goals-grid { grid-template-columns: 1fr; gap: 18px 0; }
}

/* "All Sponsors" comparison table -- every active sponsor, one row per
   sponsor, grouped Safe -> Balanced -> Risky under a group-header row per
   tier. Grid columns: pick-mark / sponsor / bonus / penalty / risk-reward
   bar -- no separate Tier column (2026-09-01, Matt's call: the tier badge
   already sits on the group-header row, so repeating it per row was
   redundant); rows are inset under their tier's group header instead
   (.rc-sponsor-table-row's left padding below), the same "nested under
   its group" look Cars/Members use elsewhere. */
/* Clicking a Current Picks slot smooth-scrolls this panel into view (see
   handleSlotClick in Account.html) -- scroll-margin-top clears the site's
   72px fixed header the same way .rc-rulebook-section's own scroll target
   already does, so the panel doesn't land tucked half-behind it. */
.rc-sponsor-table-panel { scroll-margin-top: 88px; }
.rc-sponsor-table { margin-top: 6px; }
.rc-sponsor-table-head-row,
.rc-sponsor-table-row {
  display: grid;
  grid-template-columns: 22px 2.3fr 1.5fr 1.5fr 1.3fr;
  gap: 14px;
  align-items: center;
}
.rc-sponsor-table-head-row { padding: 0 0 8px; }
.rc-sponsor-table-head-cell { font-family: var(--rc-font-heading); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc-steel); }
.rc-sponsor-tier-group-head { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--rc-offwhite); }
.rc-sponsor-tier-group-count { font-size: 12px; color: var(--rc-steel); }
/* 28px left inset -- the "sponsors sit inside the tier folder" look --
   plus a matching negative margin on the two full-width rules (the
   group-header's border-top and this row's own) so those still span the
   panel's full width instead of getting cut short by the inset. */
.rc-sponsor-table-row { padding: 11px 0 11px 28px; margin-left: -28px; width: calc(100% + 28px); border-top: 1px solid var(--rc-offwhite); }
.rc-sponsor-tier-group-head { margin-left: -28px; width: calc(100% + 28px); padding-left: 28px; }
/* Interactive rows (2026-09-02 redesign). rc-sponsor-table-row-clickable
   sits on every row whenever the season isn't locked, but the hover
   highlight/pointer cursor only activate while .rc-sponsor-table itself
   also carries rc-sponsor-table-picking -- i.e. only while a Current
   Picks slot is actually targeted (see setPicking() in Account.html).
   Otherwise a click here is a no-op (see handleRowClick's activeTarget
   guard), so the table shouldn't visually invite clicks it would just
   ignore (Matt's call, 2026-09-02: "don't let the hover highlight
   anything on the table" outside of actually choosing a sponsor). */
.rc-sponsor-table.rc-sponsor-table-picking .rc-sponsor-table-row-clickable { cursor: pointer; transition: background-color 0.12s ease; }
.rc-sponsor-table.rc-sponsor-table-picking .rc-sponsor-table-row-clickable:hover { background-color: var(--rc-offwhite); }
/* Picked rows -- no row-level highlight (2026-09-01, Matt's call: drop the
   green row background/left-accent, the pickmark circle below is the only
   "you picked this one" signal now -- a solid green circle with a white
   checkmark. That green mark always shows, picking or not (2026-09-02,
   Matt's call: "keep the green circle white check after clicking"). */
.rc-sponsor-pickmark { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; transition: background-color 0.12s ease, border-color 0.12s ease; }
.rc-sponsor-pickmark-on { background: var(--rc-ok); }
/* The dashed "not picked yet" outline is a picking-mode-only affordance
   (2026-09-02, Matt's call: "don't show the dashed circle next to the
   sponsors" outside of actively choosing) -- invisible by default,
   visibility:hidden rather than display:none so the mark column doesn't
   shift width when it reappears. Hovering a row while picking fills it
   solid gray, previewing "this is what clicking here selects" before the
   click actually commits it (green only happens after the real pick). */
.rc-sponsor-pickmark-off { border: 1.5px dashed var(--rc-silver); visibility: hidden; }
.rc-sponsor-table-picking .rc-sponsor-pickmark-off { visibility: visible; }
.rc-sponsor-table-picking .rc-sponsor-table-row-clickable:hover .rc-sponsor-pickmark-off {
  border-style: solid;
  border-color: var(--rc-steel);
  background: var(--rc-steel);
}
.rc-sponsor-table-sponsor { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 100px wide / 40px tall (2026-09-13, Matt's third pass on this cap --
   34x34 -> 150x35 -> 100x40 -- this "All Sponsors" table on the Sponsors
   page is the other place drivers actually see a list of sponsor logos,
   kept matching Data Management's own Sponsors list cap at every step).
   .rc-pick-chip-logo (Current Picks strip, same page) deliberately keeps
   its own smaller 46x46 cap -- that's a compact summary chip, not a
   list row, and a 100px logo would still overrun its 190px-min-width
   card.

   width/height are now FIXED (2026-09-13, same-day follow-up -- was
   max-width/max-height) rather than just capped: .rc-sponsor-table-sponsor
   above has no fixed-width logo column the way the Data Management list's
   .rc-dm-sponsor-logo-col does, just a flat `gap: 10px` between the <img>
   and the name text -- so a narrow/square logo (rendered well under
   100px by object-fit: contain) let the name start closer than a wide
   wordmark's name did, and the whole list read as uneven going down the
   page. Fixing width/height turns object-fit: contain into a real
   letterbox: every logo now sits centered inside the SAME 100x40 box
   regardless of its own aspect ratio, so the gap to the name (and the
   name's own start position) is identical on every row. */
.rc-sponsor-table-logo { width: 100px; height: 40px; object-fit: contain; flex: none; }
.rc-sponsor-table-name { font-size: 13px; font-weight: 700; color: var(--rc-carbon); }
.rc-sponsor-table-amt { font-family: var(--rc-font-heading); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Bright green (2026-09-13, Matt's call: "same color green as the green
   bar to the right") -- matches .rc-sponsor-swing-seg-bonus's own bright
   green further down, which sits in the same row as this dollar amount.
   Was --rc-positive (the darker green used elsewhere for bonus text),
   which no longer matched once the swing bar switched to the brighter
   --rc-positive-bright shade. */
.rc-sponsor-table-amt-bonus { color: var(--rc-positive-bright); }
.rc-sponsor-table-amt-penalty { color: var(--rc-negative); }
.rc-sponsor-table-trigger { font-size: 11.5px; color: var(--rc-steel); margin-top: 2px; }
.rc-sponsor-swing { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.rc-sponsor-swing-row { display: flex; align-items: stretch; gap: 1px; height: 10px; width: 100%; }
.rc-sponsor-swing-seg { flex: 1; height: 100%; border-radius: 1px; min-width: 1px; }
.rc-sponsor-swing-seg-bonus { background: var(--rc-positive-bright); }
.rc-sponsor-swing-seg-penalty { background: var(--rc-negative); }
.rc-sponsor-swing-seg-empty { background: #e2e2e2; }
.rc-sponsor-swing-scale { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--rc-steel); }
.rc-sponsor-swing-scale-label { font-variant-numeric: tabular-nums; }
.rc-sponsor-swing-scale-tick { position: absolute; left: 50%; top: -1px; transform: translateX(-50%); width: 1px; height: 6px; background: var(--rc-silver); }
.rc-sponsor-table-legend { font-size: 11.5px; color: var(--rc-steel); margin: 14px 0 0; }
@media (max-width: 700px) {
  .rc-sponsor-table-head-row { display: none; }
  .rc-sponsor-table-row {
    grid-template-columns: 22px 1fr;
    grid-template-areas: "mark sponsor" "bonus penalty" "swing swing";
    row-gap: 8px;
  }
  .rc-sponsor-table-row > .rc-sponsor-pickmark { grid-area: mark; }
  .rc-sponsor-table-row > .rc-sponsor-table-sponsor { grid-area: sponsor; }
  .rc-sponsor-table-row > .rc-sponsor-table-bonus-col { grid-area: bonus; }
  .rc-sponsor-table-row > .rc-sponsor-table-penalty-col { grid-area: penalty; }
  .rc-sponsor-table-row > .rc-sponsor-swing { grid-area: swing; }
}

/* Trigger glossary -- Sponsors page's third container (2026-09-01, Matt's
   call): every bonus/penalty trigger, name on the left, full description
   in a column to the right. Same rc-dash-card chrome as the other two
   Sponsors-page panels; row/group-header shape borrowed from the
   comparison table just above it so all three containers read as one set. */
.rc-trigger-glossary-group { margin-top: 4px; }
.rc-trigger-glossary-group + .rc-trigger-glossary-group { margin-top: 8px; }
.rc-trigger-glossary-group-head { font-family: var(--rc-font-heading); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 14px 0 8px; border-top: 1px solid var(--rc-offwhite); }
.rc-trigger-glossary-group:first-child .rc-trigger-glossary-group-head { border-top: none; padding-top: 0; }
.rc-trigger-glossary-group-head-bonus { color: var(--rc-positive); }
.rc-trigger-glossary-group-head-penalty { color: var(--rc-negative); }
.rc-trigger-glossary-row { display: grid; grid-template-columns: 200px 1fr; gap: 18px; padding: 9px 0; align-items: baseline; }
.rc-trigger-glossary-row + .rc-trigger-glossary-row { border-top: 1px solid var(--rc-offwhite); }
.rc-trigger-glossary-name { font-weight: 700; font-size: 13px; }
.rc-trigger-glossary-name-bonus { color: var(--rc-positive); }
.rc-trigger-glossary-name-penalty { color: var(--rc-negative); }
.rc-trigger-glossary-desc { font-size: 12.5px; color: var(--rc-steel); line-height: 1.5; }
@media (max-width: 700px) {
  .rc-trigger-glossary-row { grid-template-columns: 1fr; gap: 3px; }
}

.rc-dm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rc-silver);
}
.rc-dm-row:last-child { border-bottom: none; }
/* Lighter divider variant -- the Tracks list's venue rows (2026-08-30,
   Matt's call: "make the border in between tracks even lighter, like it
   is between car team names") -- same offwhite line .rc-dm-subrow-edit
   already uses between car rows, instead of the darker silver default
   above (which stays as-is for Cars' Class head / Sponsors' Tier head,
   where the heavier line is still the right weight). */
/* 20px left inset (2026-09-13, Matt's call: "move all the tracks in
   slightly compared to the location pills") -- matches the indent every
   other list on this page already gives its rows relative to its own
   group-head pill (.rc-group-row's own padding-left: 20px, used by the
   Members list under this exact same .rc-group-head component). Track
   venue rows were the one list still sitting flush with their Region
   pill instead of inset under it. */
.rc-dm-row-light { padding-left: 20px; border-bottom-color: var(--rc-offwhite); }
.rc-dm-row-label { font-family: var(--rc-font-heading); font-size: 14px; font-weight: 600; color: var(--rc-carbon); }
/* Sub-rows (a track's layouts, a class's seasons, a season's cars) --
   indented and prefixed with a tree glyph rather than a bullet, so the
   parent/child relationship reads at a glance without a full tree-line
   graphic. */
.rc-dm-subrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 6px 20px;
  font-size: 13px;
  color: var(--rc-steel);
}
.rc-dm-subrow-edit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 8px 40px;
  border-top: 1px solid var(--rc-offwhite);
  font-size: 13px;
  color: var(--rc-carbon);
}
.rc-dm-tree { color: var(--rc-silver); font-weight: 700; flex: none; }
/* Groups the manufacturer logo + car label together as one flex item, so
   a 3-child row (logo, label, Edit button) still splits into a "left
   cluster / right button" layout under justify-content: space-between,
   instead of space-between spacing all three apart evenly. */
.rc-dm-car-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
/* Same rule as .rc-dm-car-info above, generically named for rows that
   have no logo column (the Season Tools list) -- keeps its left cluster
   (name + status pill + meta line) grouped as one flex item so
   space-between still reads as "left cluster / right buttons" instead of
   spacing every child apart evenly. */
.rc-dm-row-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
/* Holds the tree glyph + the season badge -- typography lives on the
   badge itself (.rc-badge-group) now rather than on this wrapper. */
.rc-dm-season-head { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px 20px; }
.rc-dm-group { margin-bottom: 4px; }
/* Suppresses .rc-dm-row's default border-bottom for a group header that
   shouldn't carry one -- currently the Cars list's Class badge head and
   the Tracks list's venue name row (2026-09-19, Matt's call). */
.rc-dm-row-noborder { border-bottom: none; }
/* Tracks list: the faded divider now sits BETWEEN tracks rather than
   between a track's name and its layout rows (2026-09-19, Matt's call).
   Adjacent-sibling rule so the first venue in a region never gets a
   leading line, matching how .rc-dm-row:last-child already avoids a
   trailing one elsewhere on this page. */
.rc-dm-venue-group + .rc-dm-venue-group {
  border-top: 1px solid var(--rc-offwhite);
  margin-top: 4px;
  padding-top: 8px;
}
/* Cars list: no divider line directly under a season/year head -- only
   the .rc-dm-subrow-edit's own border-top was creating it, landing right
   below .rc-dm-season-head since that row is always the first car in the
   season group (2026-09-19, Matt's call). Later cars within the same
   season keep their divider as normal. */
.rc-dm-season-head + .rc-dm-subrow-edit { border-top: none; }
.rc-dm-empty { padding: 14px 0; font-size: 13px; color: var(--rc-steel); }

/* Layout list inside the Track edit popup (openEditTrackModal) -- each
   row shows the layout name, an Active/Inactive status pill, and a
   toggle button that flips it (never deletes the row). */
.rc-dm-layout-list { border: 1px solid var(--rc-silver); border-radius: 6px; margin-top: 8px; }
.rc-dm-layout-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rc-silver);
}
.rc-dm-layout-row:last-child { border-bottom: none; }
.rc-dm-layout-name { flex: 1; font-size: 13px; color: var(--rc-carbon); }
.rc-dm-layout-row.rc-dm-layout-inactive .rc-dm-layout-name { color: var(--rc-steel); text-decoration: line-through; }
.rc-dm-status-pill {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--rc-font-heading);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rc-dm-status-pill-active { background: var(--rc-positive-bg); color: var(--rc-positive); }
.rc-dm-status-pill-inactive { background: var(--rc-offwhite); color: var(--rc-steel); }
/* Add-a-layout row -- text input + Add button, sits under the list. */
.rc-dm-add-row { display: flex; gap: 8px; margin-top: 10px; }
.rc-dm-add-row input { margin-top: 0; flex: 1; }

/* -------------------------------------------------------------------- */
/* Forms */
/* -------------------------------------------------------------------- */
input, select, textarea {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  font-family: var(--rc-font-body);
  border: 1px solid var(--rc-silver);
  border-radius: 4px;
  margin-top: 4px;
  background: var(--rc-white);
  color: var(--rc-carbon);
}
input, select { height: 44px; }
/* The block above sizes checkboxes the same as a full-width text box
   (100% width, 44px tall, 10px padding) since it targets every <input>
   with no type exclusion -- harmless for text/number/date inputs but a
   checkbox inherits it too, rendering as a giant clickable bar instead of
   a normal checkbox. Reset every checkbox on the site back to a real
   checkbox size here, once, instead of patching each usage site. Radio
   buttons (the Season Wizard's per-class season picker, v0.18) hit the
   exact same bug for the exact same reason -- same reset, same fix. */
input[type="checkbox"], input[type="radio"] {
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
textarea { resize: vertical; }

/* .rc-check-row (the email-notification opt-in checkbox's row style, on
   register.html and the Edit Profile popup) removed 2026-09-24 alongside
   the checkbox itself -- Matt's call: eliminate the in-app notification
   system entirely, moving to an external Discord bot. Nothing else on
   the site used this class. */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rc-red);
  box-shadow: 0 0 0 1px var(--rc-red);
}

label {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rc-carbon);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.rc-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rc-silver); }
.rc-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.rc-hint { color: var(--rc-steel); font-size: 12px; margin-top: 4px; }
.rc-hint.rc-ok { color: var(--rc-ok); }
.rc-hint.rc-error { color: var(--rc-red); }

.rc-message { margin-top: 14px; font-size: 14px; }
.rc-message.rc-error { color: var(--rc-red); }
.rc-message.rc-ok { color: var(--rc-ok); }

.rc-banner {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 13px;
  background: #fff1ef;
  border: 1px solid var(--rc-red);
  color: var(--rc-carbon);
}

.rc-role-info {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--rc-offwhite);
  border: 1px solid var(--rc-silver);
  font-size: 12px;
  color: var(--rc-carbon);
  line-height: 1.5;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
td { padding: 6px 4px; border-bottom: 1px solid var(--rc-silver); }

.rc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--rc-red);
  color: var(--rc-white);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* -------------------------------------------------------------------- */
/* Verification code boxes */
/* -------------------------------------------------------------------- */
.rc-code-row { display: flex; gap: 8px; justify-content: center; margin: 4px 0 0; }
.rc-code-box {
  width: 42px;
  height: 52px;
  padding: 0;
  margin-top: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}
.rc-code-box:focus { outline: none; border-color: var(--rc-red); box-shadow: 0 0 0 1px var(--rc-red); }
.rc-code-box.rc-code-error { border-color: var(--rc-red); }

/* -------------------------------------------------------------------- */
/* Auth pages (login/register/verify) — centered card layout           */
/*                                                                       */
/* Colors/background/spacing here are scoped to .rc-auth-page on        */
/* purpose, matching the original Sites-era login screen exactly        */
/* (white page, off-white/gray card, the original red/black/gray hex    */
/* values) without repainting the rest of the site (sidebar, dashboard, */
/* header) which keeps the newer palette. CSS custom properties         */
/* redeclared on .rc-auth-page cascade to every var(--rc-red) etc.      */
/* reference inside it, so .rc-card/.rc-btn-primary/.rc-checker/links   */
/* all pick up the old colors automatically with no other rule changes. */
/* -------------------------------------------------------------------- */
.rc-auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background: #ffffff;
  /* --rc-red/--rc-red-dark (2026-09-27, Matt's ask: "for consistency sake,
     just make the red on the auth pages the same color") -- these used to
     be their own near-identical-but-not-quite reds (#ed230d/#c81c0a)
     instead of just inheriting the sitewide --rc-red/--rc-red-dark
     (#F21B0C/#c81509) from :root. Removed entirely rather than
     re-pinned to matching literals, so this can never drift from the
     sitewide brand red again if that token ever changes. */
  --rc-carbon: #1a1a1a;
  --rc-steel: #8c8c8c;
  --rc-silver: #dbdbdb;
}
.rc-auth-page .rc-card { background: #f4f4f4; border-radius: 10px; }
.rc-auth-wrap { width: 100%; max-width: 420px; }
.rc-auth-wrap h1 {
  /* Top margin added so the heading gets real breathing room below the
     fixed navbar (.rc-auth-page's 72px padding-top clears the header
     itself, but left zero gap after that before the heading started) --
     applies sitewide to login/register/verify since they all share this
     one rule. */
  margin: 20px 0 24px;
  text-align: center;
  font-size: 22px;
  letter-spacing: 0.03em;
}
.rc-auth-subhead {
  text-align: center;
  margin-top: 24px;
}
.rc-auth-footer { text-align: center; font-size: 13px; margin-top: 16px; }

/* -------------------------------------------------------------------- */
/* Authenticated shell (Account.html) — sidebar + main content */
/* -------------------------------------------------------------------- */
.rc-shell { display: flex; min-height: 100vh; position: relative; }

.rc-sidebar {
  width: 220px;
  flex: none;
  background: var(--rc-carbon);
  color: var(--rc-white);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
}
.rc-sidebar-avatar {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  background: var(--rc-red);
  color: var(--rc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-family: var(--rc-font-heading);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.rc-sidebar-nav { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
/* Shown the instant the page loads, before the profile fetch resolves, so
   the sidebar never sits there blank while "Loading account
   information..." spins in the main content area (Matt's call -- only the
   main page is actually waiting on data, the sidebar itself has nothing to
   wait for). Nav items render immediately but aren't wired to real section
   content yet, so this dims them slightly and blocks clicks until the
   profile actually loads and buildFullProfileUI() rebuilds the nav for
   real (see Account.html). Removed at that point, not before. */
.rc-sidebar-nav.rc-nav-loading { pointer-events: none; opacity: 0.55; }
.rc-nav-divider { border: none; border-top: 1px solid #3a3a3a; margin: 12px 4px; }
.rc-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 4px;
  color: #cfd4d8;
  text-decoration: none;
  font-family: var(--rc-font-heading);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.rc-nav-item svg { flex: none; }
/* Discord's own PNG logo used as this nav item's icon (2026-09-24, Matt's
   ask), sized to match every other 16x16 nav icon on the site -- see
   .rc-nav-item svg above; object-fit: contain keeps a non-square source
   PNG from stretching to fill that box. */
.rc-nav-item img { flex: none; width: 16px; height: 16px; object-fit: contain; }
.rc-nav-item:hover { background: #262626; color: var(--rc-white); }
/* Discord row (2026-09-27, Matt's ask) -- hovers to Discord's own Blurple
   instead of the generic dark hover every other sidebar row gets, since
   this is the one link that leaves the site for Discord itself. */
.rc-nav-item-discord:hover { background: #5865F2; color: var(--rc-white); }
.rc-nav-item.rc-nav-active { background: var(--rc-red); color: var(--rc-white); }
/* Admin/League Tools/Stewarding now always render in the sidebar instead
   of being hidden from a role that can't use them (2026-09-19, Matt's
   call: "I want all buttons to be visible in the LEAGUE TOOLS... and only
   show disabled if they cannot be used... drivers can see the admin/
   league tools/stewarding section in the sidebar but the links are
   disabled") -- this is that disabled state: dimmed, no pointer, hover
   suppressed so it doesn't look clickable. See Account.html's
   setNavAccess() for what applies/removes it. */
.rc-nav-item:disabled { opacity: 0.4; cursor: not-allowed; }
.rc-nav-item:disabled:hover { background: none; color: #cfd4d8; }
.rc-main {
  flex: 1;
  min-width: 0;
  padding: 32px 40px 64px;
}
.rc-main h2 { font-size: 20px; }

.rc-topbar {
  display: none;
  align-items: center;
  justify-content: flex-start; /* hamburger-only now -- logo removed, was redundant with the fixed site header above it */
  background: var(--rc-carbon);
  padding: 10px 16px;
}
.rc-hamburger {
  background: none;
  border: none;
  color: var(--rc-white);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
}

@media (max-width: 768px) {
  .rc-shell { flex-direction: column; }
  /* .rc-shell's own padding-top:70px (below, sitewide) is what clears the
     fixed site header now (2026-09-28, Matt's ask: "remove that black bar
     altogether, the links are redundant" -- .rc-topbar, its own hamburger,
     and the .rc-sidebar slide-out it used to open are all removed below).
     Previously this was zeroed out here because .rc-topbar's own
     margin-top:70px was doing the clearing instead -- now that the topbar
     never shows, .rc-shell needs to do that job itself again, so this
     override is gone (the sitewide 70px just applies). A second, later
     override further down this file used to re-zero this on mobile too
     (and actually won the cascade, being later at the same specificity)
     -- that one is removed the same way, right next to .rc-topbar's own
     base margin-top rule. */
  .rc-sidebar { display: none; }
  .rc-topbar { display: none; }
  /* Applied to <body> via JS (openMobileMenu()/closeMobileMenu() in
     Account.html) while the mobile menu is open. Plain `overflow: hidden`
     on body does NOT reliably block touch-driven scrolling on iOS
     Safari -- the well-known working fix is to also pin the body in
     place with position: fixed (the dynamic top offset that undoes this
     without a visible jump is set/cleared by the JS, not here). */
  body.rc-scroll-locked {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  /* Top padding now matches the left/right side padding (16px) so the
     gap above the dashboard card reads as even on all sides, same as the
     gap on its left/right edges. */
  .rc-main { padding: 16px 16px 48px; }
}

/* -------------------------------------------------------------------- */
/* Profile header card */
/* -------------------------------------------------------------------- */
.rc-header-wrap { position: relative; }
.rc-avatar-col {
  position: absolute;
  top: 0;
  left: -112px;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rc-avatar {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  background: var(--rc-red);
  color: var(--rc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rc-font-heading);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.rc-badge-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rc-badge-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  color: var(--rc-white);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rc-badge-pill-red { background: var(--rc-red); }
.rc-badge-pill-gray { background: var(--rc-steel); }
.rc-badge-pill-green { background: var(--rc-ok); }
.rc-badge-pill-yellow { background: var(--rc-gold); color: var(--rc-white); }

@media (max-width: 900px) {
  .rc-avatar-col { position: static; left: auto; width: auto; flex-direction: row; margin-bottom: 12px; }
}

.rc-bio-text { font-size: 14px; line-height: 1.5; margin-top: 12px; color: var(--rc-carbon); }
.rc-meta-row { font-size: 12px; color: var(--rc-steel); margin-top: 2px; }
.rc-social-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rc-social-chip {
  display: inline-block;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 14px;
  background: var(--rc-white);
  border: 1px solid var(--rc-silver);
  color: var(--rc-red);
  text-decoration: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .rc-stack-box/.rc-box-head/.rc-box-icon/.rc-box-desc used to style the
   5-box "coming soon" stack (Schedule/Driver Score/Attributes/
   Rivalries/Objectives) removed from Account.html's dashboard in the
   Aug 2026 pass -- rules removed along with it, nothing else uses them. */

/* THE REAL REASON THIS WASN'T VISIBLY GETTING BIGGER: ".rc-main h2" further
   up this file (element + class = higher specificity than a single class
   selector) was overriding font-size back down to 20px every time,
   regardless of what got set here -- ".rc-main .rc-name-line" below beats
   it outright instead of relying on source order. Bumped up from 24px (36,
   then 48) and given a bit less letter-spacing than the base h1-h4 rule
   (0.04em reads as loose at this size) so it reads as a real focal point
   on the page instead of just a bigger label. No accent bar anymore
   (removed per Matt's call). */
.rc-main .rc-name-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.01em;
}
/* Country code badge (e.g. "US") -- replaces the old emoji flag glyph.
   Sits inline with the name at rc-name-line's align-items: center, no
   special vertical alignment needed since it's just text on a chip. */
.rc-country-badge {
  font-family: var(--rc-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--rc-steel);
  background: var(--rc-offwhite);
  border: 1px solid var(--rc-silver);
  border-radius: 4px;
  padding: 3px 7px;
}
/* Role badge (Driver/Organizer/Admin/Prospect) -- sits right next to the
   country code badge in the name line, same chip shape/size/spacing on
   purpose (Matt's call: "similarly styled pill"), just its own class so
   it can be recolored per role independently later without touching the
   country badge. text-transform here (not baked into the JS string) so
   the label always renders uppercase the same way nav labels do. */
.rc-role-badge {
  font-family: var(--rc-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-steel);
  background: var(--rc-offwhite);
  border: 1px solid var(--rc-silver);
  border-radius: 4px;
  padding: 3px 7px;
}
.rc-about-me { font-size: 14px; font-style: italic; color: var(--rc-carbon); margin: 6px 0 0; font-family: var(--rc-font-body); text-transform: none; letter-spacing: normal; }
.rc-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 18px; }
.rc-field-pair:first-child { margin-top: 0; }
.rc-field-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; margin-top: 18px; }
.rc-field-trio:first-child { margin-top: 0; }
/* First Name / Last Name / Suffix row in Edit Profile (2026-09-27, Matt's
   ask: 40% / 40%, Suffix fills the rest, not an even three-way split like
   the plain .rc-field-trio above). */
.rc-field-trio-name { display: grid; grid-template-columns: 40% 40% 1fr; gap: 0 16px; margin-top: 18px; }
.rc-field-trio-name:first-child { margin-top: 0; }

/* -------------------------------------------------------------------- */
/* Edit Profile -- avatar circle + Change Avatar picker (2026-08-30).    */
/* .rc-avatar-circle is the shared building block -- same shape/colors   */
/* as the header's .rc-header-avatar, just sized per context via the     */
/* -lg modifier, so an image or initials always reads as "the same       */
/* avatar" wherever it shows up.                                         */
/* -------------------------------------------------------------------- */
.rc-avatar-circle {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rc-carbon);
  color: var(--rc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rc-font-heading);
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
}
.rc-avatar-circle-lg { width: 72px; height: 72px; font-size: 22px; }
/* 2x the -lg size (added 2026-08-30, Matt's call: "make the avatar 2x in
   the edit profile window") -- Edit Profile's own avatar, centered above
   its Change/Delete links rather than sitting beside them. */
.rc-avatar-circle-xl { width: 144px; height: 144px; font-size: 44px; }
/* Edit Profile's avatar circle only (2026-09-27, Matt's ask: "leave a 3px
   gap and add a black 2px circle around it") -- scoped to
   .rc-avatar-edit-row (only ever used by openEditProfileModal) rather than
   the shared .rc-avatar-circle base, so the header avatar and every other
   place this class shows up are untouched.
   Recolored + thickened into a metallic graphite ring (2026-09-29, Matt's
   ask: "make the border around the avatar a metallic graphite border, and
   a little thicker so it looks like it's actually present and around the
   photo") -- the old flat 2px carbon (near-black) ring was thin enough to
   read as barely there. box-shadow can't paint a true conic/radial
   gradient around a circle, so the "metallic" read comes from stacking
   three concentric bands the same way a lot of brushed-metal edges work
   in print: a lighter graphite band closest to the photo (catches the
   light), a darker graphite body (the bulk of the ring), then a faint
   pale rim right at the outer edge (a thin highlight, like light glancing
   off a beveled edge) -- same "light-to-dark-to-light" logic as the
   brushed-nickel table header's satin sweep (.rcl-standings-class-header,
   css/league.css), just built from shadow rings instead of a background
   gradient since this shape is a circle. Overall ring is now 6px thick
   (3px-to-9px) vs. the old 2px (3px-to-5px). */
.rc-avatar-edit-row .rc-avatar-circle {
  box-shadow:
    0 0 0 3px transparent,
    0 0 0 5px #55575c,
    0 0 0 8px #26272b,
    0 0 0 9px rgba(255, 255, 255, 0.14);
}
.rc-avatar-circle-img { width: 100%; height: 100%; object-fit: cover; }
.rc-avatar-edit-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Uniform 10px gap replaced with per-pair spacing (2026-09-29, Matt's
     ask: "have CHANGE AVATAR and DELETE AVATAR closer together and move
     both 1 row away from the bottom of the avatar preview image") -- a
     flex column's own `gap` is one fixed value between every child, so it
     couldn't give the circle-to-links gap and the links-to-each-other gap
     two different sizes at once. Zeroed here; both real gaps now live as
     margins on the specific elements below instead. */
  gap: 0;
  margin-bottom: 20px;
}
/* Circle-to-links gap: roughly one extra text row below the (now thicker,
   see .rc-avatar-edit-row .rc-avatar-circle above) metallic ring, in
   place of the old 10px. */
.rc-avatar-edit-row .rc-avatar-circle-xl { margin-bottom: 24px; }
/* Change-to-Delete gap: tightened well below that, so the two links read
   as one grouped control under the photo. */
.rc-avatar-change-link { margin-bottom: 6px; }
.rc-avatar-change-link,
.rc-avatar-delete-link {
  font-family: var(--rc-font-heading);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rc-red);
}
.rc-avatar-change-link:hover { color: var(--rc-red-dark); }
/* Muted red-then-darker-red hover, same family as the Change link but
   visually secondary (Matt's call: Delete sits below Change) -- steel by
   default so it doesn't compete with Change Avatar for attention. */
.rc-avatar-delete-link { color: var(--rc-steel); }
.rc-avatar-delete-link:hover { color: var(--rc-red); }
/* Change Avatar popup -- 15 presets, 5 rows of 3. */
.rc-avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.rc-avatar-picker-item {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  /* Gray, not off-white (2026-09-21, Matt's ask: "gray outline around the
     avatars instead of white") -- the preset avatar art is circular on a
     transparent background, so this cell's own fill shows through as a
     ring around each one; --rc-offwhite (#F5F5F3) read as white against
     the page, --rc-silver (#D8DDE1) is a clear step darker/grayer. */
  background: var(--rc-silver);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  transition: border-color 0.15s ease;
}
.rc-avatar-picker-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* --rc-steel, not --rc-silver -- now that the cell's own fill is
   --rc-silver (above), a --rc-silver border would blend invisibly into it
   and the hover state would lose its ring entirely. */
.rc-avatar-picker-item:hover { border-color: var(--rc-steel); }
.rc-avatar-picker-item-selected,
.rc-avatar-picker-item-selected:hover { border-color: var(--rc-red); }
/* Paste-your-own-image-link row, below the preset grid (2026-09-27, Matt's
   ask). The "https://" prefix is a separate non-editable label, not part of
   the input's value -- that's what makes it structurally impossible to
   remove/edit, rather than something we have to keep re-validating. */
.rc-avatar-url-row {
  display: flex;
  align-items: stretch;
  margin-top: 4px;
}
.rc-avatar-url-prefix {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 44px;
  border: 1px solid var(--rc-silver);
  border-right: none;
  border-radius: 4px 0 0 4px;
  background: var(--rc-offwhite);
  color: var(--rc-steel);
  font-size: 14px;
  font-family: var(--rc-font-body);
  white-space: nowrap;
  flex: none;
}
.rc-avatar-url-row input {
  margin-top: 0;
  border-radius: 0 4px 4px 0;
  flex: 1;
  min-width: 0;
}
.rc-details-wrap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rc-silver); }
.rc-details-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; }
.rc-details-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin-top: 12px; }
.rc-detail-label { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--rc-steel); text-transform: uppercase; }
.rc-detail-value { font-size: 14px; color: var(--rc-carbon); margin-top: 2px; }
/* Current Seat -- driver profile hero card, replaces the old Time Zone/
   Birthday/Contact row.
   Bug fix (2026-08-21, Matt's call): dropped the manufacturer logo image
   and the colored car-number pill badge in favor of one plain-text header
   line -- see .rc-seat-text-header below and the matching
   .rc-team-details-header used by the Dashboard's Team Details widget.
   Dead rule cleanup (2026-09-13, sitewide review): .rc-seat-logo/
   .rc-seat-row/.rc-seat-team/.rc-seat-number (the old logo+pill markup
   this replaced) were left in place "in case a future spot wants the
   same look back," but a year+ later nothing in Account.html, the other
   pages, or the .gs templates references any of the four -- removed for
   real this time. */
.rc-seat-text-header { font-size: 19px; font-weight: 700; color: var(--rc-carbon); font-family: var(--rc-font-heading); margin-top: 4px; }
.rc-team-details-header { font-size: 15px; font-weight: 700; color: var(--rc-carbon); font-family: var(--rc-font-heading); }
.rc-accomplishments { margin-top: 14px; }
.rc-accomplishments h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: var(--rc-steel); text-transform: uppercase; }
.rc-accomplishments ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--rc-carbon); font-family: var(--rc-font-body); }

/* -------------------------------------------------------------------- */
/* Class-choice screen (Season Registration Step 1) -- v0.20.8            */
/* -------------------------------------------------------------------- */
.rc-reg-stats-panel { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; padding: 16px 18px; background: var(--rc-offwhite); border: 1px solid var(--rc-silver); border-radius: 8px; }
.rc-reg-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--rc-steel); text-transform: uppercase; }
.rc-reg-stat-bank { flex: 0 0 auto; }
/* Bank balance is the headline number here -- same treatment as the team
   card's total cost (v0.20.5), since it's the number a driver actually
   needs to weigh against every class's cost range below it. */
.rc-reg-stat-bank-value { font-family: var(--rc-font-heading); font-size: 26px; font-weight: 700; color: var(--rc-carbon); line-height: 1.15; margin-top: 2px; }
.rc-reg-stat-rep { flex: 1 1 220px; min-width: 220px; }
.rc-reg-stat-rep-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.rc-reg-stat-rep-value { font-family: var(--rc-font-heading); font-size: 14px; font-weight: 700; color: var(--rc-carbon); }
/* Long pill reputation bar -- four fixed color zones (see
   buildRegistrationStatsPanel()'s comment in Account.html for exactly why
   each zone is the width it is) plus a marker showing where the driver
   actually sits on the 0-1000 scale. */
.rc-rep-bar-track { position: relative; display: flex; width: 100%; height: 12px; border-radius: 6px; overflow: hidden; border: 1px solid var(--rc-silver); }
.rc-rep-bar-seg { height: 100%; }
/* Explicitly round the two end segments to match the track's own radius,
   rather than relying only on overflow:hidden clipping -- the green
   segment was reading as if it stopped short in a flat vertical edge
   before the pill's rounded end instead of filling all the way into the
   curve. Matching the corner radius directly here removes that gap
   regardless of how the browser handles the clip.
   Bug fix (2026-08-21): this used to key off :first-child/:last-child,
   which broke the moment the "you are here" marker (below) got appended
   into the same track as a later sibling -- the marker, not the green
   segment, became :last-child, so the rounding rule silently stopped
   applying to green. Keyed off the zone's own color class instead, so it
   no longer depends on DOM sibling order at all. */
.rc-rep-bar-seg.rc-rep-bar-red { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.rc-rep-bar-seg.rc-rep-bar-green { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.rc-rep-bar-red { background: #d9392c; }
.rc-rep-bar-orange { background: #e8892b; }
.rc-rep-bar-yellow { background: #e8c62b; }
.rc-rep-bar-green { background: var(--rc-ok); }
/* The "you are here" marker -- explicit black (not --rc-carbon's #171717)
   per Matt's ask for a black line, with a white halo (box-shadow) so it
   stays visible sitting on top of the darker orange/red zones too.
   Bug fix (2026-08-21): withTooltip() adds the .rc-tooltip class to this
   marker (for the "You: N" hover text), and .rc-tooltip sets its own
   `position: relative` further down this file -- same specificity as the
   plain `.rc-rep-bar-marker` rule below, and later in the cascade, so it
   was silently winning and turning the marker back into a normal in-flow
   element (which a flex track then squeezed away to nothing). Scoped to
   `.rc-rep-bar-track .rc-rep-bar-marker` instead so it outranks
   `.rc-tooltip` on specificity and always wins regardless of source
   order. */
.rc-rep-bar-track .rc-rep-bar-marker { position: absolute; top: -3px; width: 3px; height: 18px; background: #000; border-radius: 2px; transform: translateX(-1.5px); box-shadow: 0 0 0 1px #fff; cursor: default; }
/* Choose Your Class screen -- colored buttons, one per class, always all
   four regardless of whether this season fields cars in them (2026-09-19,
   Matt's redesign: "colored buttons to choose... Green for LMGT3, Purple
   for LMP3, Blue for LMP2 and Red for HY. Leave all the buttons up
   regardless if there is that class or not and just gray them out with a
   circle and line through it on hover"). Replaces the old plain list
   (.rc-class-pick-row/-row-dim, removed). Each button's accent color comes
   from the --rc-class-pick-color custom property set inline per button in
   JS (buildRegistrationModal's renderClassScreenBody), pulled from the
   same CAR_CLASS_BADGE_COLOR_VAR tokens every other class pill on the site
   already uses -- LMGT3/LMP3/LMP2/Hypercar already resolve to green/
   purple/blue/red respectively, so no new color tokens were needed. */
/* Sized down (2026-09-23, Matt's ask: "reduce size of Choose Your Class
   buttons") -- smaller min column width, tighter gap/padding, smaller
   type, while keeping the same colored-button shape/hover treatment. */
.rc-class-pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.rc-class-pick-btn {
  position: relative;
  overflow: hidden;
  background: var(--rc-class-pick-color);
  border: none;
  border-radius: 8px;
  padding: 13px 10px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rc-class-pick-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); }
.rc-class-pick-btn-content { position: relative; z-index: 1; }
.rc-class-pick-btn-name {
  font-family: var(--rc-font-heading);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rc-white);
}
.rc-class-pick-btn-seats { margin-top: 4px; font-size: 10.5px; color: rgba(255, 255, 255, 0.85); }
/* Locked (not offered this season, or every seat already taken) -- every
   locked button now renders in the SAME flat, neutral appearance
   (2026-09-23, Matt's ask: "make the inactive buttons all the same color
   and a little more 'inactive' appearing instead of just gray") rather
   than a grayscale/dimmed version of that class's own accent color --
   the old `filter: grayscale(1)` meant Hypercar's locked red and LMP2's
   locked blue still came out as two different shades of gray, which read
   as "duller," not "disabled." This drops --rc-class-pick-color entirely
   for this state in favor of the same flat offwhite/silver/steel
   treatment every other disabled control on the site uses
   (.rc-field-locked, .rc-btn-secondary:disabled) -- a locked class now
   reads unmistakably as not clickable, and every locked button matches
   every other one regardless of which class it is. The two-class
   selector here (specificity 0,2,0) beats the single-class
   `.rc-class-pick-btn` background rule above regardless of source
   order, so no `!important` is needed. */
.rc-class-pick-btn-locked {
  background: var(--rc-offwhite);
  border: 1px solid var(--rc-silver);
  cursor: not-allowed;
}
.rc-class-pick-btn-locked .rc-class-pick-btn-name,
.rc-class-pick-btn-locked .rc-class-pick-btn-seats { color: var(--rc-steel); }
/* A class that isn't offered THIS season at all (vs. one that's offered
   but every seat is currently taken) -- both share the same locked base
   above, but a never-in-season class reads even more washed out so a
   driver can tell "no seats left" from "not part of this season" at a
   glance (2026-09-23, Matt's ask). Opacity on the whole button (not just
   its text) so the button itself visually recedes, not just its label. */
.rc-class-pick-btn-inactive { opacity: 0.5; }
/* Circle-slash lock icon -- hidden by default, fades in centered over the
   button only while hovering a locked one (2026-09-19, Matt's exact ask).
   A dark scrim behind the icon keeps it legible against every class's
   underlying color once desaturated. */
.rc-class-pick-btn-lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.rc-class-pick-btn-locked:hover .rc-class-pick-btn-lock { opacity: 1; }
.rc-class-pick-totals {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rc-silver);
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rc-steel);
}
/* Season Registration Fee (fixed, same for every team) sits above Team
   Buy-In (the part that actually varies by team) -- Matt's ask. */
.rc-class-cost-season { font-size: 13px; color: var(--rc-carbon); font-weight: 600; }
.rc-class-cost-price { font-size: 12px; color: var(--rc-steel); margin-top: 2px; }

/* -------------------------------------------------------------------- */
/* Team-select popup (Season Registration Step 2) -- v0.20.5 redesign    */
/* -------------------------------------------------------------------- */
/* Fixed-size box every manufacturer logo sits inside. object-fit:contain
   here is only the fallback for the instant before an image's real
   dimensions are known -- the actual sizing (so a long/wide logo like
   McLaren/Mercedes-AMG and a tall/narrow one like Ferrari read at the same
   visual weight, not the wide one going tiny) is done in JS by area, once
   each logo loads. See sizeLogoByArea() in Account.html.
   90x55 (2026-09-23, Matt's exact spec) -- was briefly 110x69 earlier the
   same day, before that; originally 60x44. */
.rc-team-logo-box {
  width: 90px;
  height: 55px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-team-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Current Seat Info popup, mobile only (2026-09-30, Matt's ask: "decrease
   the size of the manufacturer logo slightly, move the # of the car to
   after the car name in the subhead... this is only on mobile") --
   scoped to .rc-seatinfo-card (buildSeatInfoPanel's own modifier class,
   Account.html) so neither Choose Your Team's registration card (which
   shares .rc-team-card/.rc-team-logo-box/.rc-team-name/.rc-team-subtitle)
   nor this popup's own desktop/tablet view are touched. Logo trimmed from
   90x55 to 74x45 -- same aspect ratio, just a modest step down, not a
   redesign. Car-number span pair flips which one shows (see
   .rc-seatinfo-carnum-mobile's base display:none above). */
@media (max-width: 640px) {
  .rc-seatinfo-card .rc-team-logo-box { width: 74px; height: 45px; }
  .rc-seatinfo-card .rc-seatinfo-carnum-desktop { display: none; }
  .rc-seatinfo-card .rc-seatinfo-carnum-mobile { display: inline; }
}
/* Manufacturer filter row (2026-09-23, Matt's ask) -- sits above the team
   card list, one bold "ALL" label at the left plus a manufacturer logo
   for every distinct manufacturer fielding a car in this class, spread
   evenly edge-to-edge (flex:1 on each logo button, so the row always
   stretches the full popup width whether there are 2 manufacturers or
   8). Logo height is 36px -- about 2/3 of the 55px logo box the team
   cards below use (Matt's exact spec) -- so this row reads as a lighter,
   secondary strip above the real cards. Clicking a logo (or ALL) marks
   it .rc-team-manu-filter-selected and dims (.rc-team-manu-filter-dim)
   every other entry in the row; see buildManufacturerFilterRow() in
   Account.html. */
.rc-team-manu-filter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  /* A bit more breathing room above and below the row (2026-09-23, Matt's
     ask) -- was padding-bottom only; padding-top added so the row isn't
     crowded up against the sticky CHOOSE YOUR TEAM header above it. */
  padding-top: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rc-silver);
}
.rc-team-manu-filter-all {
  flex: none;
  font-family: var(--rc-font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--rc-carbon);
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.rc-team-manu-filter-logo {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.rc-team-manu-filter-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rc-team-manu-filter-dim { opacity: 0.28; }
/* Team name + car number: 20px/700 (2026-09-23, Matt's exact spec) --
   was briefly 26px/800 earlier the same day, before that; originally
   17px/700. Car model line below it: 14px (Matt's spec), up from
   12.5px. */
.rc-team-name { font-family: var(--rc-font-heading); font-size: 20px; font-weight: 700; color: var(--rc-carbon); letter-spacing: 0.01em; line-height: 1.15; }
.rc-team-subtitle { font-size: 14px; color: var(--rc-steel); margin-top: 2px; }
/* Car number's mobile position (2026-09-30) -- see buildSeatInfoPanel's own
   comment (Account.html) for the full history. Desktop/tablet show the
   number on the team-name line by default (span just renders inline,
   inheriting .rc-team-name's own color/size); the mobile-only span is
   hidden until the breakpoint below flips both. */
.rc-seatinfo-carnum-mobile { display: none; }
/* Total cost -- bumped up to read as the headline number it actually is,
   not a caption (Matt's call: "increase the total cost in the top right
   corner"). */
.rc-team-cost-total { font-family: var(--rc-font-heading); font-size: 22px; font-weight: 700; color: var(--rc-carbon); line-height: 1.1; }
.rc-team-cost-breakdown { font-size: 12px; color: var(--rc-steel); margin-top: 2px; }

/* Seat-locking / seat-locked hero screens (2026-08-21, Matt's ask: "Join
   This Team" should feel like something happened, not just print a
   receipt) -- shown instantly on click (rc-seat-locking-hero, a "hang
   tight" holding state) and swapped for the real thing once joinTeam
   resolves (rc-seat-locked-hero). Both center a class-colored icon
   circle above the copy; still flat stroke icons + the site's existing
   color system, just given room and a little motion instead of sitting
   inline in a receipt-style summary. */
.rc-seat-locking-hero, .rc-seat-locked-hero { text-align: center; padding: 22px 10px 6px; }
.rc-seat-locking-icon, .rc-seat-locked-icon {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.rc-seat-locking-icon svg, .rc-seat-locked-icon svg { width: 32px; height: 32px; }
.rc-seat-locking-icon { animation: rc-seat-pulse 1.1s ease-in-out infinite; }
.rc-seat-locked-icon { animation: rc-seat-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.05); }
.rc-seat-locking-title { font-family: var(--rc-font-heading); margin: 4px 0 6px; }
.rc-seat-locking-sub { color: var(--rc-steel); font-size: 13px; margin: 0; }
.rc-seat-locked-kicker { font-weight: 800; letter-spacing: 0.14em; font-size: 12px; color: var(--rc-red); margin-bottom: 6px; }
.rc-seat-locked-title { font-family: var(--rc-font-heading); font-size: 24px; margin: 0 0 12px; color: var(--rc-carbon); }
@keyframes rc-seat-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.85; } }
@keyframes rc-seat-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.rc-team-card {
  padding: 18px 20px;
  border: 1px solid var(--rc-silver);
  border-radius: 8px;
  background: var(--rc-white);
  margin-top: 14px;
}
.rc-team-card-taken { opacity: 0.5; }
.rc-team-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rc-team-card-identity { display: flex; align-items: center; gap: 14px; }
/* Team bio -- replaces the old Pro/Con +/- pair (Matt's call: a real
   hand-written bio is more useful than a thin gamey strength/weakness
   line). Plain body copy, not a chip/badge -- it's prose, not a stat. */
.rc-team-bio { font-size: 13px; line-height: 1.5; color: var(--rc-steel); margin: 12px 0 0; font-family: var(--rc-font-body); }
/* Bonus/Penalty -- promoted from small gray sideline text to real,
   colored chips so they actually factor into the decision (Matt's call:
   "as they are now, you'd hardly even factor them into your decision").
   Tint backgrounds are flat hex (not color-mix()) to match the rest of
   this file's plain-hex convention -- light green/red at ~10% strength
   against --rc-ok/--rc-red. */
.rc-team-perks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rc-team-perk-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid;
  font-size: 13px;
  line-height: 1.3;
  flex: 1 1 220px;
}
.rc-team-perk-chip strong { font-family: var(--rc-font-heading); font-weight: 700; }
.rc-team-perk-bonus { background: var(--rc-positive-bg); border-color: var(--rc-positive-border); color: var(--rc-positive); }

.rc-team-perk-penalty { background: var(--rc-negative-bg); border-color: var(--rc-negative-border); color: var(--rc-negative); }
.rc-team-perk-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.rc-team-card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
/* Join button anchored bottom-right of the card (Matt's call), not just
   left-aligned wherever it happened to fall in document flow. */
.rc-team-card-footer .rc-btn-primary { margin-left: auto; margin-top: 0; }

/* -------------------------------------------------------------------- */
/* SIGNING SEQUENCE (2026-08-30, Matt's call: "I want this to feel       */
/* EPIC"; reworked 2026-09-18 -- video swapped for a full-viewport class */
/* welcome image) -- the cinematic overlay played after locking in a     */
/* team, before the recap settles into a normal .rc-modal. See           */
/* openSigningSequence() and showSigningContractModal() in Account.html  */
/* for the full sequence. One dark stage that fluidly resizes between    */
/* its two beats (suspense card -> full-viewport welcome image) via a    */
/* single width/height/padding/border-radius transition, rather than     */
/* separately-styled elements swapped in and out. z-index 5000 sits      */
/* above .rc-modal-backdrop's 2000 -- the registration modal underneath  */
/* is left open, just visually covered, until this overlay tears itself  */
/* down once Continue is clicked.                                        */
/* -------------------------------------------------------------------- */
.rc-signing-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(8, 8, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rc-signing-stage {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1), height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s ease, border-radius 0.4s ease;
}
/* Beat 1 -- small suspense card while the welcome image preloads. */
.rc-signing-stage-suspense { width: min(90vw, 420px); padding: 44px 32px; }
/* Beat 2 -- grows to fill the entire viewport for the class's welcome
   image (2026-09-18, Matt: "an image that I want displayed across the
   entire website"). position:fixed + inset:0 takes it out of the
   .rc-signing-overlay flex box's normal centering/padding entirely, so
   it reaches every edge regardless of the overlay's own 24px padding --
   the width/height transition inherited from .rc-signing-stage still
   animates the grow from the small suspense card up to fullscreen. */
.rc-signing-stage-welcome {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  background: #000;
}
/* Race Club wordmark as the actual logo file now (2026-09-18, Matt:
   "Instead of it saying RACE CLUB... I want Race Club (Full, Black).png
   to show"), replacing the old letter-spaced text label. Two sizes: a
   small one for the SUSPENSE card, a larger one above the reveal
   content once the class image dims. Sized by width with height:auto so
   the logo's own aspect ratio is preserved either way. No background
   "backing" card behind it (2026-09-19, Matt's catch: it was showing as
   a stray white/offwhite pill sitting over the welcome photo) -- the
   PNG itself is already a white + red wordmark on a transparent
   background, not black ink, so it's already legible straight over the
   near-black overlay / dimmed welcome image with nothing behind it. */
.rc-signing-wordmark-img {
  width: 140px;
  height: auto;
}
.rc-signing-wordmark-img-lg { width: 200px; margin-bottom: -4px; }
.rc-signing-message {
  font-size: 14px;
  color: var(--rc-offwhite);
  min-height: 20px;
  letter-spacing: 0.02em;
}
/* The class welcome image itself -- edge-to-edge cover, fading in from
   fully transparent, then dimming to half brightness once the reveal
   content appears on top of it (Matt: "It fades in, stays up for 3
   seconds, then dims to half brightness. That's when the congratulations
   message displays"). Both the opacity fade-in and the brightness dim
   are plain CSS transitions -- the JS in openSigningSequence just toggles
   the two modifier classes below at the right moments. */
.rc-signing-welcome-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  filter: brightness(1);
  transition: opacity 0.9s ease, filter 1.1s ease;
}
.rc-signing-welcome-img-visible { opacity: 1; }
.rc-signing-welcome-img-dim { filter: brightness(0.5); }
/* Reveal content layered on top of the dimmed welcome image, filling the
   same full-viewport stage and centered within it -- not a separate
   collapsed card the way the old video REVEAL beat was, since the
   welcome image itself is already the full-viewport backdrop. Starts
   invisible and fades in together with the image's dim transition. */
.rc-signing-welcome-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.rc-signing-welcome-overlay-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rc-signing-welcome-img { transition: none; }
  .rc-signing-welcome-overlay { transition: none; }
}
.rc-signing-congrats {
  font-family: var(--rc-font-heading);
  font-weight: 900;
  font-size: clamp(32px, 6vw, 56px);
  letter-spacing: 0.03em;
  color: var(--rc-white);
  animation: rc-signing-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
/* A real quote from the team, not just hype copy (2026-08-30, Matt: "add
   larger quotations in front and after it to show that someone from the
   team said it"). Quote marks sized well above the body text and pulled
   in tight against it with negative margin + line-height so they read as
   oversized punctuation, not separate floating characters. */
/* Explicit width (not max-width) so this is a real box for the quote and
   its right-aligned attribution to both share -- see the JS comment above
   openSigningSequence's advanceToReveal for why. */
.rc-signing-hype-wrap { width: min(480px, 90%); text-align: left; }
.rc-signing-hype { padding: 4px 16px; font-size: 15px; line-height: 1.5; color: var(--rc-silver); }
.rc-signing-hype-text { }
/* Normal-sized, plain white quote marks around the message (2026-08-30,
   Matt's call -- reverted from the earlier oversized red decorative
   treatment). Back in flow as ordinary inline punctuation. */
.rc-signing-hype-mark {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--rc-white);
}
.rc-signing-hype-mark-open { margin-right: 2px; }
.rc-signing-hype-mark-close { margin-left: 2px; }
/* Right-aligned, under the quote (2026-08-30, Matt: "Add emdash Team
   Principal underneath to the right") -- the em dash is part of this
   string, not a separate element, since it's always paired with the
   title. */
.rc-signing-hype-attribution {
  margin-top: 8px;
  text-align: right;
  font-size: 12.5px;
  font-style: italic;
  /* Full white, not the old 50%-opacity dim gray (2026-09-19, Matt's
     call: "make the team principal font white") -- was faint enough
     against the dark reveal stage to read as an afterthought; the "Team
     Principal" attribution should read clearly. */
  color: var(--rc-white);
}
/* Inverted to a white pill (2026-08-30, Matt's call) -- was a dark,
   near-transparent panel with white text; now a solid white background
   with the team name in black (see .rc-signing-reveal-team below), a
   deliberate bright beat against the dark reveal stage. Dropped to 90%
   opacity (2026-09-19, Matt's call) -- still reads as the same bright
   white pill, just with the faintest hint of the dimmed image showing
   through instead of a flat opaque card. */
.rc-signing-reveal-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 14px 20px;
  animation: rc-signing-pop 0.6s 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
.rc-signing-reveal-logo { width: 56px; height: 40px; object-fit: contain; }
/* Bumped from 18px (2026-08-30, Matt: "make the team name and number
   larger") -- this element already includes the car number appended to
   the team name (see openSigningSequence's dimAndReveal), so enlarging
   it covers both at once. Color flipped to black (2026-08-30) to match
   the pill's inverted white background above. */
.rc-signing-reveal-team { font-family: var(--rc-font-heading); font-weight: 800; font-size: 26px; color: var(--rc-carbon); }
/* Overrides .rc-btn-primary's default width:100% -- full-width would
   stretch oddly on the reveal overlay; this button sizes to its own
   label instead. Wins on cascade order alone (equal specificity,
   declared later in the file) rather than needing !important. */
.rc-signing-continue { width: auto; padding-left: 30px; padding-right: 30px; margin-top: 0; transition: opacity 0.4s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
/* Explicit hover (2026-09-19, Matt's call: "make a hover effect on the
   button to continue") -- adds a small lift + shadow on top of a slightly
   deeper shade so hovering the one interactive element on the reveal beat
   is unmistakable. Wins on cascade order alone (equal specificity,
   declared after .rc-btn-primary/.rc-btn-secondary above).
   Background switched from --rc-silver to --rc-red-dark (2026-09-19,
   same day as the button itself moving from .rc-btn-secondary to
   .rc-btn-primary per Matt's "make the CONTINUE button red" call) --
   --rc-silver was tuned for the old gray/white button and would have
   flashed the red button gray on hover instead of darkening it. */
.rc-signing-continue:hover {
  background: var(--rc-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
/* Row holding the reveal beat's Continue button (2026-09-18: the video-
   era "Replay Video" button that used to sit alongside it is gone --
   there's no video to replay any more -- so this is now a one-button
   row, kept as its own flex row rather than folded back into
   .rc-signing-continue so the fade-in timing/opacity toggle in
   openSigningSequence's dimAndReveal doesn't need to change). */
.rc-signing-reveal-btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
  transition: opacity 0.4s ease;
}
@keyframes rc-signing-pop {
  0% { opacity: 0; transform: scale(0.85) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-signing-stage { transition: none; }
  .rc-signing-congrats, .rc-signing-reveal-identity { animation: none; }
}

/* -------------------------------------------------------------------- */
/* Dashboard -- card grid (2026-08-29, first cards back after the pre-   */
/* ECO dashboard was dropped). .rc-quick-row holds Registration Status + */
/* Current Seat for now; more cards join it later, one at a time. Rows   */
/* now hold 2 or 3 cards each (Registration Status/Current Seat/Season   */
/* Objective; Finances/Reputation/Sponsors; Next Race/Recent Results;    */
/* Wager/Protests) -- see buildDashboardDataRows in Account.html.        */
/* -------------------------------------------------------------------- */
/* display: grid, not flex (2026-09-08, Matt's report: on a 3-card row,
   narrowing the window used to leave 2 cards on one line and strand the
   3rd alone on the next, and that lone 3rd card visibly stretched to
   fill the ENTIRE row width -- flexbox's flex-grow doing exactly what it
   was told, but not what a card grid should look like. That happened
   because .rc-panel > .rc-quick-row's cards each carry flex-grow: 1 (from
   `flex: 1 1 320px` -- see .rc-regstatus-card etc. below), so a lone item
   on its own line, with no sibling to share the line's width, grows to
   claim all of it.

   `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` fixes
   this at the layout-model level rather than patching it with extra
   breakpoints: the browser fits as many 280px-or-wider columns as the
   row has room for (3, then 2, then 1, as the row narrows), and every
   column in that count is the SAME width, splitting the row evenly. A
   card that ends up alone on the last row still only occupies ONE
   column's width, not the full row -- there's no flex-grow analog to
   fight here, grid items don't stretch across tracks they weren't
   explicitly placed to span. So a 3-card row now goes 3-across, then
   cleanly 2-across (both cards evenly sized, nothing stretched), then
   1-across, with no in-between state where one card is oddly full-width
   while its sibling above it isn't. The individual cards' own
   `flex: 1 1 320px; min-width: 280px;` (below) is simply ignored now
   that the parent is a grid, not a flex container -- harmless leftover,
   not worth stripping out row by row. A row with only one card (none
   currently, but the layout supports it) still fills the whole row: with
   only one item, `auto-fit` collapses every OTHER, empty column track to
   0 width, leaving that single item's one live track to claim the
   `1fr` maximum, which is the full row -- the "full-width banner card"
   behavior a lone card always had under flex is unchanged. */
.rc-quick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; align-items: stretch; }
/* Every Dashboard card in a quick row stretches to the row's tallest card
   height (align-items: stretch above); making the card itself a flex
   column, and pushing its bottom-left link down with margin-top: auto,
   is what keeps that link pinned to the card's actual bottom edge instead
   of floating up under the card's own (shorter) content -- Matt's call,
   2026-09-01. */
.rc-quick-row > .rc-panel { display: flex; flex-direction: column; }
.rc-dash-card-link { display: block; text-align: left; margin-top: auto; padding-top: 14px; }
/* Shared by every Dashboard card header (Matt's call: bigger, still all  */
/* caps) -- one class so every card's title reads at the same weight.    */
.rc-dash-card-title { position: relative; z-index: 1; margin: 0 0 16px; font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc-carbon); font-family: var(--rc-font-heading); padding-bottom: 12px; border-bottom: 2px solid var(--rc-red); }
/* Header row for cards that need a top-right corner figure alongside the
   title (2026-09-01, Matt's call) -- Current Seat's car number, Next
   Race's "Round n". Two prior fixes tried absolutely positioning the
   figure against .rc-dash-card; both failed (first, doubled the card's
   own padding inset; second, a same-specificity ".rc-dash-card > *" rule
   defined later in this file silently reset the figure back to
   position: relative, dropping it into normal flow as its own row).
   Replaced entirely with a real flex row: the title and the figure are
   plain sibling flex children, so there is no positioning context, no
   containing-block math, and no cascade/specificity race to get wrong.
   This row carries the border/spacing that used to live on
   .rc-dash-card-title itself; .rc-dash-card-header-title strips that
   back off the h3 so the two don't double up. */
.rc-dash-card-header-row { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--rc-red); }
.rc-dash-card-header-title { margin: 0; padding: 0; border: 0; font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc-carbon); font-family: var(--rc-font-heading); }
/* Plain flex child now -- no position/top/right/z-index needed, the row
   above places it. Mid-gray, same size as the card title (2026-09-01:
   briefly bumped to 32px, then reverted back to match per Matt's call),
   numbers stay tabular so multi-digit car numbers don't jitter in width.
   The row's align-items: baseline (above) keeps this and the title's
   text sitting on the same baseline -- since neither is lowercase/has
   descenders, that baseline IS each one's visual bottom edge, so the two
   stay flush along the bottom. */
/* Own flex row (2026-09-19, Matt's call: "move the class pill up more so
   it is vertically centered with the # in CURRENT SEAT") -- the pill
   (small font, its own line-height) and the "#n" text used to just sit
   inline together, whose default baseline alignment left the pill sitting
   a little low against the number. align-items: center here lines the two
   up by their actual vertical centers instead. */
.rc-dash-card-header-row .rc-dash-card-corner-figure { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--rc-font-heading); font-size: 20px; font-weight: 700; color: var(--rc-steel); font-variant-numeric: tabular-nums; }
/* Current Seat's class-pill corner figure only (2026-09-24, Matt's ask):
   align-self: center overrides the header row's own align-items: baseline
   (above) so the pill lines up on its vertical center against "CURRENT
   SEAT" instead of sitting on the title's text baseline. The pill itself
   is bumped up from .rc-badge-chip-abbrev's base 2px 6px/12px size --
   scoped to this one class so league.js's own report pill (which also
   uses .rc-badge-chip-abbrev) stays untouched. */
.rc-cs-corner-figure { align-self: center; }
.rc-cs-class-pill.rc-badge-chip-abbrev { padding: 4px 9px; font-size: 15px; }

/* Shared Dashboard card chrome (Matt's call, 2026-08-29): a faint
   checkered-flag corner that fades toward the card's center, a red
   "finish flag" accent along the top-left edge, and a slightly heavier
   drop shadow than a plain .rc-panel. Applied alongside .rc-panel and a
   card's own modifier class (e.g. "rc-panel rc-regstatus-card
   rc-dash-card") -- every new Dashboard card should carry rc-dash-card
   too so the set stays visually consistent. */
.rc-dash-card { position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(15, 17, 21, 0.10); }
.rc-dash-card > * { position: relative; z-index: 1; }
.rc-dash-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  width: 190px;
  height: 120px;
  background:
    conic-gradient(
      from 90deg,
      rgba(30, 30, 30, 0.055) 25%,
      transparent 0 50%,
      rgba(30, 30, 30, 0.055) 0 75%,
      transparent 0
    );
  background-size: 42px 42px;
  transform: skewX(-20deg);
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(circle at top right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 72%);
  mask-image: radial-gradient(circle at top right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
  z-index: 0;
}
.rc-dash-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 76%;
  height: 4px;
  background: var(--rc-red);
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 10px) 100%,
    0 100%
  );
  z-index: 2;
}

.rc-regstatus-card { flex: 1 1 320px; min-width: 280px; margin-top: 0; }
/* Flex column, filling whatever height .rc-quick-row's stretch gives the
   card (2026-09-01, Matt's call: "keep the line that separates the main
   card from the quick details the same distance from the bottom of the
   card for every card... don't make that line height dependent on
   whatever is written above it") -- lets .rc-regstatus-footer push itself
   to the bottom with margin-top: auto below, the same trick already used
   for .rc-dash-card-link. */
.rc-regstatus-body { display: flex; flex-direction: column; flex: 1 1 auto; }
/* Slightly larger gap under the row (2026-09-03, Matt's ask: "add a
   slightly larger space between the bottom of the registration circle to
   the line within the container") -- between the icon/headline row and
   the divider line above the Registered On/Class stats (.rc-regstatus-
   footer's border-top). Registration Status is a flex column with the
   footer pinned to the card's bottom via margin-top: auto (see the
   comment on .rc-regstatus-footer below), so this row previously had
   whatever leftover space was left over, which could read as tight when
   this card's content is close in height to its row-mates'. */
.rc-regstatus-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.rc-regstatus-row-clickable { cursor: pointer; }
.rc-regstatus-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 20px; font-weight: 700; border: 2px solid; }
.rc-regstatus-icon-none { color: var(--rc-steel); border-color: var(--rc-silver); }
/* Nudges the "+" glyph up and right a hair (2026-09-01, Matt's call: "more
   centered") -- the flex centering above is correct for the circle itself,
   but the "+" character's own glyph metrics sit it slightly low/left of
   true center. padding-bottom pushes the centered content up; padding-left
   pushes it right. */
.rc-regstatus-icon-open { color: var(--rc-warning); border-color: #e8b93a; background: #fdf6e3; padding-bottom: 2px; padding-left: 1px; }
.rc-regstatus-icon-done { color: var(--rc-positive); border-color: var(--rc-positive-border); background: var(--rc-positive-bg); }
.rc-regstatus-headline { font-family: var(--rc-font-heading); font-size: 15px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.rc-regstatus-headline-none { color: var(--rc-steel); }
.rc-regstatus-headline-open { color: var(--rc-warning); }
.rc-regstatus-headline-done { color: var(--rc-positive); }
.rc-regstatus-sub { font-size: 12.5px; color: var(--rc-steel); margin-top: 4px; }
/* .rc-regstatus-memo removed 2026-09-19 follow-up -- the roster-lock memo
   now REPLACES the "Your registration is complete." .rc-regstatus-sub
   line entirely (Matt's call) instead of sitting below it as its own
   italicized line, so it just uses the plain .rc-regstatus-sub style. */
/* padding-top back to the same 14px every other card's divider row uses
   (2026-09-01, Matt's call: "move up the date and class to the same
   level as the other cards' categories, don't change anything with the
   text size") -- .rc-regstatus-stat-value's smaller 14px text still makes
   this block shorter than .rc-cs-stats'/.rc-finrep-ranks' (24px value), so
   margin-bottom (blank space below the text, not above it) makes up the
   difference instead -- with margin-top: auto still filling everything
   above it, that pins the LINE at the same height as its row-mates' lines
   while the label/value text sits right under it, same gap as everywhere
   else, just smaller text like Matt wants kept. */
.rc-regstatus-footer { display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; margin-bottom: 17px; padding-top: 14px; border-top: 1px solid var(--rc-silver); }
.rc-regstatus-stat { flex: 1 1 100px; text-align: center; }
.rc-regstatus-stat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc-steel); }
.rc-regstatus-stat-value { font-size: 14px; font-weight: 700; color: var(--rc-carbon); margin-top: 2px; }
/* Registration Status flag (2026-09-08, Matt's call: "make a status
   section for those who have REGISTRATION status that is yellow or red...
   a yellow circle would show here and the reason below it") -- Probation
   (yellow) and Suspended/Removed (red), sits inside the same card between
   the top row and the footer stats, only rendered when a driver's
   Registration Status is actually one of those two states (see
   registrationStatusCard's renderRegistered, Account.html) -- the
   ordinary Active case never shows this block at all. Same solid-circle-
   plus-text shape as .rc-regstatus-icon-done above, just colored per
   severity instead of always green.
*/
.rc-regstatus-flag { display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; margin-bottom: 14px; padding: 10px 12px; border-radius: 6px; }
.rc-regstatus-flag-probation { background: #fef9e7; }
.rc-regstatus-flag-suspended { background: var(--rc-negative-bg); }
.rc-regstatus-flag-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; }
.rc-regstatus-flag-dot-probation { background: var(--rc-warning-accent); }
.rc-regstatus-flag-dot-suspended { background: var(--rc-red); }
.rc-regstatus-flag-label { font-family: var(--rc-font-heading); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.rc-regstatus-flag-label-probation { color: var(--rc-warning); }
.rc-regstatus-flag-label-suspended { color: var(--rc-red); }
.rc-regstatus-flag-reason { font-size: 12.5px; color: var(--rc-carbon); margin-top: 3px; line-height: 1.4; }

/* Finances page -- Account Status panel (2026-09-08, Matt's call: "show
   the last 3 changes in account status and have them slowly fade away so
   that the fourth status (not even displayed) would be assumed to be
   transparent") -- linear fade, most recent at full opacity, each older
   one a step lower, so a hypothetical 4th entry extrapolates to 0. */
.rc-status-history-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rc-offwhite); }
.rc-status-history-row:first-child { border-top: none; }
.rc-status-history-row:nth-child(1) { opacity: 1; }
.rc-status-history-row:nth-child(2) { opacity: 0.65; }
.rc-status-history-row:nth-child(3) { opacity: 0.35; }
.rc-status-history-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.rc-status-history-dot-active { background: var(--rc-positive); }
.rc-status-history-dot-probation { background: var(--rc-warning-accent); }
.rc-status-history-dot-suspended { background: var(--rc-red); }
.rc-status-history-label { font-size: 13px; font-weight: 700; color: var(--rc-carbon); }
.rc-status-history-reason { font-size: 12px; color: var(--rc-steel); margin-top: 2px; }
.rc-status-history-date { font-size: 11px; color: var(--rc-steel); margin-left: auto; flex: none; white-space: nowrap; }

/* Current Seat card -- manufacturer logo left, team/car identity + class
   pill next to it, Position/Points/Podiums stat row underneath (sourced
   from SeasonHistory.CurrentSeat's JSON once a round's results exist --
   see handleGetMyCurrentSeat, DataCache.gs). No car photo -- the
   reference mockup's car render doesn't exist as an asset in this
   project, logo + text only. */
.rc-currentseat-card { flex: 1 1 320px; min-width: 280px; margin-top: 0; }
/* Same flex-column body trick as .rc-regstatus-body above -- lets
   .rc-cs-stats push itself to the card's bottom with margin-top: auto
   regardless of how tall the logo/name/pill row above it ends up. */
.rc-cs-body { display: flex; flex-direction: column; flex: 1 1 auto; }
/* margin-bottom guarantees breathing room under the class/tier pills
   before the Position/Points/Podiums divider line, the same fix as
   .rc-finrep-meter's margin-bottom above (2026-09-01, Matt's call: "the
   line that separates the stats is far too close to them and crowding
   them"). */
.rc-cs-row { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
/* No circle/avatar container (Matt's call) -- the logo stands on its own,
   sized directly rather than cropped to fit a fixed box. */
.rc-cs-logo-wrap { flex: none; min-width: 60px; height: 50px; display: flex; align-items: center; justify-content: center; }
.rc-cs-logo { max-width: 118px; max-height: 50px; object-fit: contain; }
/* Grows to fill the row so .rc-cs-carnum (below) lands pinned to the
   card's right edge instead of sitting right after the team name text
   (2026-09-23, Matt's ask: move the car number out of the header corner
   and into this row, right-justified). */
.rc-cs-textcol { flex: 1 1 auto; min-width: 0; }
/* Matches .rc-regstatus-headline's weight/letter-spacing/uppercase
   treatment, just sized up slightly (2026-09-23, Matt's ask: "increase
   the size of the team name slightly" -- was an exact match at 15px). */
.rc-cs-team-name { font-family: var(--rc-font-heading); font-size: 17px; font-weight: 700; letter-spacing: 0.03em; color: var(--rc-carbon); text-transform: uppercase; }
.rc-cs-car-line { font-size: 13.5px; color: var(--rc-steel); margin-top: 3px; }
/* Car number, moved out of the header corner and into this row
   (2026-09-23, Matt's ask: "Move car # to the right of the team name and
   car... right justified and as tall as the logo is, in the same font
   color as it currently is, but maybe some more weight to it") -- the
   class pill stays behind in .rc-dash-card-corner-figure up in the
   header. height:50px/flex centering matches .rc-cs-logo-wrap's own box
   so the figure reads as tall as the logo; color carried over unchanged
   from the old .rc-dash-card-corner-figure treatment, weight bumped from
   700 to 800 since it's now a much bigger standalone figure than it was
   sharing the header row with a title. */
.rc-cs-carnum { flex: none; height: 50px; display: flex; align-items: center; justify-content: flex-end; font-family: var(--rc-font-heading); font-size: 34px; font-weight: 800; color: var(--rc-steel); font-variant-numeric: tabular-nums; }
.rc-cs-empty { color: var(--rc-steel); font-size: 13px; }

/* Dashboard Protest card line items (2026-09-24 redesign, Matt's spec: an
   open gray circle for a still-Pending protest, filled gray with a white
   checkmark once it's ruled/withdrawn, the sentence on one line, and a
   lighter-colored outcome/ruling line below it once resolved). See
   buildDashProtestItem in Account.html. */
.rc-protest-dash-list { display: flex; flex-direction: column; gap: 14px; }
.rc-protest-dash-item { display: flex; align-items: flex-start; gap: 10px; }
/* Divider between rows when a list has more than one protest (2026-09-24
   styling pass, Matt's ask). Only fires on the 2nd+ item, so a single-
   protest card/list never grows an orphan rule. */
.rc-protest-dash-list .rc-protest-dash-item + .rc-protest-dash-item { border-top: 1px solid var(--rc-silver); padding-top: 14px; }
.rc-protest-dash-icon { flex: none; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.rc-protest-dash-icon-pending { border: 2px solid var(--rc-silver); background: transparent; }
.rc-protest-dash-icon-ruled { background: var(--rc-steel); }
.rc-protest-dash-item-body { flex: 1; min-width: 0; }

/* Outcome-colored status circles (2026-09-26, Matt's ask) -- a second look
   for this same small circle-icon slot (.rc-protest-dash-icon above),
   alongside the plain open-ring (-pending) and solid-gray-fill (-ruled)
   looks that already existed. Matches the exact tinted-fill/colored-border/
   colored-glyph treatment the big green Registered .rc-regstatus-icon-done
   circle already uses elsewhere on the site (light tint background +
   matching-color border + matching-color glyph, not a solid dark fill with
   a white icon) -- just scaled down to this row icon's small 18px size,
   and extended with red/yellow variants that complement that same green
   rather than reuse it: green reuses --rc-positive/-border/-bg outright;
   red reuses --rc-negative/-border/-bg (the site's existing "penalty" red
   trio, see the :root comment above); yellow reuses the exact
   #fdf6e3/#e8b93a/--rc-warning trio .rc-regstatus-icon-open already
   established sitewide for "a yellow, in-between state." Two call sites
   share these classes directly rather than each getting their own copy,
   so both stay visually identical automatically:
     - Dashboard Protest card (buildDashProtestItem, Account.html) --
       green+check for Upheld, red+X for Denied, yellow+tilde for Upheld
       at Tier 1 (Warning, the mildest tier -- no real competitive effect,
       so it reads as "acknowledged" rather than a clean "case closed").
     - League Tools' per-round upload status line (buildRoundStatusLine,
       Account.html) -- yellow+tilde once only one of Qualify/Race is
       uploaded, yellow+check once both are in but not yet reviewed, green+
       check once the round is reviewed and finalized. The plain open gray
       ring (-pending above) still covers "nothing uploaded yet" for that
       same line, unchanged.
   The glyph itself is a plain text character (a checkmark, an X, or a
   tilde) set via innerHTML/textContent and colored via `color: currentColor`
   from whichever variant below is applied, exactly like .rc-regstatus-icon
   -done's own checkmark -- not an SVG, unlike the older -ruled look. */
.rc-statuscircle-green,
.rc-statuscircle-yellow,
.rc-statuscircle-red {
  border: 2px solid;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.rc-statuscircle-green { background: var(--rc-positive-bg); border-color: var(--rc-positive-border); color: var(--rc-positive); }
.rc-statuscircle-yellow { background: #fdf6e3; border-color: #e8b93a; color: var(--rc-warning); }
.rc-statuscircle-red { background: var(--rc-negative-bg); border-color: var(--rc-negative-border); color: var(--rc-negative); }
.rc-protest-dash-line { font-size: 13px; color: var(--rc-carbon); line-height: 1.5; }
.rc-protest-dash-date { color: var(--rc-steel); font-weight: 700; margin-right: 2px; }
/* .rc-protest-dash-outcome/.rc-protest-dash-pending removed (2026-09-26)
   -- the pending/ruled note under each protest is now a .rc-dm-subrow +
   .rc-dm-tree row (same tree-glyph sub-row the Data Management Cars/
   Tracks lists use), not its own styled line -- see buildDashProtestItem,
   Account.html. */
/* Edit/Withdraw actions appended to a Protests-popup history row
   (buildProtestPopupHistoryItem, Account.html) -- sits to the right of
   the row's icon+text body, right-justified and top-aligned with the
   date/first line (2026-09-24, item 6; confirmed placement 2026-09-24
   styling pass). */
.rc-protest-popup-item-actions { display: flex; flex-wrap: nowrap; gap: 8px; flex: none; margin-left: auto; align-self: flex-start; }
.rc-cs-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rc-silver); }
.rc-cs-stat { flex: 1 1 80px; text-align: center; }
.rc-cs-stat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc-steel); }
.rc-cs-stat-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; }

/* Next Race -- full-width banner card (its own .rc-quick-row below the
   Registration Status/Current Seat row, one card filling it). Loosely
   patterned on Matt's WEC reference mockup (event name + track + date/
   time + round pill + track image), rebuilt in the site's own light/red
   palette rather than copying the mockup's dark theme (Matt's established
   rule elsewhere -- see the Current Seat class-pill comment). No flag/
   location line -- Tracks has no country/location field yet to source
   one from. */
/* Half-width now (2026-08-30, Matt's call) -- shares its row with the new
   Finances & Reputation card instead of filling it alone. */
.rc-nextrace-card { flex: 1 1 320px; min-width: 280px; margin-top: 0; }
/* Left-justified info column (Event title, then Track/Layout, then the
   rest) with the track image to the right, vertically centered against
   the whole text block via align-items: center on this row (2026-08-30,
   Matt's call: "Left justify all the NEXT RACE details and to the right,
   add an image of the track... vertically centered with the text"). */
.rc-nextrace-body { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rc-nextrace-info { flex: 1 1 260px; min-width: 0; text-align: left; }
/* Date/time as a small caption line above the event title (2026-08-31,
   Matt's call) -- was a .rc-cal-stats pill below the title; pulled out
   into plain text instead so it reads as a subheading, not one more chip
   in the stats row. */
.rc-nextrace-date { font-size: 12px; font-weight: 700; color: var(--rc-steel); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.rc-nextrace-name { font-family: var(--rc-font-heading); font-size: 24px; font-weight: 800; letter-spacing: 0.02em; color: var(--rc-carbon); text-transform: uppercase; }
/* .rc-nextrace-track is back (2026-09-19 follow-up, Matt's catch: "I
   don't want the track names gone... what I don't want is the track
   images" -- only .rc-nextrace-track-img, the image, stays removed).
   Same size/color treatment .rc-cal-track always used. */
.rc-nextrace-track { font-size: 13px; color: var(--rc-steel); margin-top: 2px; }
.rc-nextrace-track strong { color: var(--rc-carbon); font-weight: 600; }
/* Track/layout row (2026-09-20: briefly carried the in-game race start
   time inline to the right, on this same space-between wrap Calendar's
   own .rc-cal-track-row uses; 2026-09-21, Matt's ask: "make the dashboard
   NEXT RACE look similar to the calendar container with a line below the
   race track and the in game time... below that" -- the in-game time
   moved to its own line below instead, via the shared .rc-cal-datetime
   class Calendar's own race cards already use, so no dedicated
   .rc-nextrace-igtime rule is needed here anymore). justify-content:
   space-between is now vestigial (this row only ever holds the track
   text) but harmless -- left as-is rather than churn it for no visual
   change. */
/* Faint gray divider below the track row (2026-09-21 follow-up, Matt's
   catch: "there should be a faint gray line below the track and then
   below the line should be the in-game start time data" -- same
   border-bottom/padding-bottom pairing Calendar's own .rc-cal-track-row
   already uses to separate its track line from the datetime row below
   it, just not yet applied to this card). */
.rc-nextrace-track-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--rc-offwhite); }
.rc-nextrace-track-row .rc-nextrace-track { margin-top: 0; }
.rc-nextrace-info .rc-cal-datetime { margin-top: 8px; }
.rc-nextrace-info .rc-cal-stats { margin-top: 14px; justify-content: flex-start; }
.rc-nextrace-pill {
  display: inline-block;
  margin-top: 16px;
  padding: 7px 16px;
  border-radius: 6px;
  background: var(--rc-carbon);
  color: var(--rc-white);
  font-family: var(--rc-font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rc-nextrace-pill-gold { background: var(--rc-gold); }
/* Server password pill, NEXT RACE dashboard card + Season Format panel
   (2026-09-21, Matt's ask: "make the server password pill in the NEXT
   RACE dashboard container metallic gold with a gold border so it stands
   out", reused for Season Format's own password pill same day) -- a
   scoped modifier on the shared .rc-cal-stat/.rc-cal-mini-stat chip (via
   calStat's own extraClass param, Account.html), so every other pill on
   these cards and elsewhere (Calendar's own race cards, etc.) is
   untouched. "Metallic" via a diagonal light/dark gold gradient rather
   than a flat fill, with --rc-gold as the border so it still reads as
   part of the same gold family as the Special Event pill above.
   Compound-selected as .rc-cal-stat.rc-nextrace-password-gold (2026-09-21
   fix, Matt's catch: "the pills for the next race password and the
   calendar password were never changed to a yellow/gold color") --
   .rc-cal-stat's own background/border/color/svg-color rules sit LATER
   in this file (its shared base is defined once, far below every one-off
   modifier), and a single-class selector loses a same-specificity tie to
   whichever rule comes last in source order, so the base chip's offwhite
   fill was silently winning over this gold override the whole time.
   Compounding onto .rc-cal-stat bumps this rule's specificity above the
   base rule's regardless of where either sits in the file.
   Dark stop lightened (2026-09-21, Matt's catch: "the dark part of the
   gold gradient background makes it hard to see the text") -- the old
   52% stop (#8a6410, a dark brown-gold) sat close enough to the pill's
   own dark brown text color (#3f2c00 below) that the text nearly
   disappeared into it at that point in the gradient. Swapped for a
   mid-tone gold (matching --rc-tier-elite) instead of a second dark
   stop, so the gradient still shimmers light-to-mid-to-light but never
   dips dark enough to fight the text. */
.rc-cal-stat.rc-nextrace-password-gold {
  background: linear-gradient(135deg, #f7dd8f 0%, #e0c168 28%, #c9a227 52%, #e8c464 76%, #fbe7a6 100%);
  border: 1px solid var(--rc-gold);
  color: #3f2c00;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.rc-cal-stat.rc-nextrace-password-gold svg { color: #5c3f00; }

/* Finances card + Reputation card (2026-08-31: split apart from the
   original combined "Finances & Reputation" card -- Finances shares the
   Next Race row, Reputation now sits alone on its own row). Both share
   this class for the same half-width sizing as every other Dashboard
   card. Finances shows real numbers off handleGetMyFinancesReputation
   (DataCache.gs) whenever this driver has any Transaction at all; Reputation
   is a shell only -- ECO defers the whole Reputation system to a later
   season, so it never shows a fabricated score, just a "not live yet" pill. */
.rc-finrep-card { flex: 1 1 320px; min-width: 280px; margin-top: 0; }
/* Dashboard Sponsors card (2026-09-01) -- same flex-basis as its dashboard
   siblings. Empty state centers a bold gray notice in the card body, with
   the "Choose Sponsors" link pinned to the bottom-left the same way Next
   Race's "View full season" link is (a separate block below, not part of
   the centered area). */
.rc-sponsors-dash-card { flex: 1 1 320px; min-width: 280px; margin-top: 0; }
.rc-sponsors-dash-empty { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 90px; padding: 0 8px; }
.rc-sponsors-dash-notice { font-weight: 700; color: var(--rc-steel); font-size: 14px; }
/* Picked-sponsor rows (2026-09-01, Matt's call: "take each sponsor out of
   their own containers, separate them by light gray lines... and list the
   bonus and penalty rules for each underneath. Remove the tier") -- plain
   rows, no chip/card container, divided by the same light gray line the
   Calendar page's own track name uses (.rc-cal-track's border-bottom). */
.rc-sponsors-dash-list { display: flex; flex-direction: column; }
.rc-sponsors-dash-row { padding: 12px 0; border-bottom: 1px solid var(--rc-offwhite); }
.rc-sponsors-dash-row:first-child { padding-top: 0; }
.rc-sponsors-dash-row:last-child { border-bottom: none; padding-bottom: 0; }
.rc-sponsors-dash-row-head { display: flex; align-items: center; gap: 10px; }
.rc-sponsors-dash-row-logo { width: 34px; height: 34px; object-fit: contain; flex: none; }
.rc-sponsors-dash-row-name { font-family: var(--rc-font-heading); font-weight: 700; font-size: 14px; color: var(--rc-carbon); }
.rc-sponsors-dash-row .rc-sponsor-pick-terms { margin-top: 6px; }
/* Balance + inline Frozen Balance sit on one row now (2026-08-31, Matt's
   call). Vertically centered, not baseline-aligned (2026-09-01, Matt's
   call: "make the frozen value title vertically centered with the
   account balance") -- the small gray Frozen figure now sits centered
   against the full height of the big balance number instead of pinned to
   its text baseline. */
.rc-finrep-balance-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.rc-finrep-balance { font-family: var(--rc-font-heading); font-size: 28px; font-weight: 800; color: var(--rc-carbon); font-variant-numeric: tabular-nums; }
/* Gray and smaller than the main balance on purpose -- it's supplementary
   context (how much of the balance to the left is locked in wagers), not
   a competing headline figure. */
.rc-finrep-frozen-inline { font-size: 13px; font-weight: 600; color: var(--rc-steel); font-variant-numeric: tabular-nums; }
.rc-finrep-delta { display: block; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; padding-bottom: 10px; }
.rc-finrep-delta-up { color: var(--rc-positive); }
.rc-finrep-delta-down { color: var(--rc-red); }
/* Bottom category row -- Finances: Frozen Balance/Bank Rank/Largest Win;
   Reputation: League Rank/Percentile. Same size/weight/border-top-divider
   look as Current Seat's Position/Points/Podiums stats (.rc-cs-stats
   family) and Registration Status's Registered On/Class stats
   (.rc-regstatus-stat family) -- every dashboard card's bottom category
   row now matches (2026-08-31, Matt's call). */
.rc-finrep-ranks { display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rc-silver); }
.rc-finrep-rank { flex: 1 1 80px; text-align: center; }
.rc-finrep-rank-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc-steel); }
.rc-finrep-rank-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; }
.rc-finrep-rank-value-empty { color: var(--rc-steel); }
.rc-finrep-rep-headline-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.rc-finrep-rep-headline { font-family: var(--rc-font-heading); font-size: 28px; font-weight: 800; color: var(--rc-silver); font-variant-numeric: tabular-nums; }
.rc-finrep-soon { display: inline-block; padding: 3px 10px; border-radius: 4px; background: var(--rc-offwhite); color: var(--rc-steel); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
/* Restored (2026-08-31) into the now-standalone Reputation card, unchanged
   from how it looked in the old combined Finances & Reputation card. */
/* margin-bottom guarantees breathing room above the League Rank/
   Percentile divider line even when the card is short enough that the
   margin-top: auto on .rc-finrep-ranks has little slack to work with
   (2026-09-01, Matt's call: "a little more padding underneath the
   reputation bar, it's sitting very close to the line"). */
.rc-finrep-meter { margin-top: 14px; margin-bottom: 18px; }
.rc-finrep-meter-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--rc-red), var(--rc-silver));
  opacity: 0.35;
}
.rc-finrep-meter-disabled .rc-finrep-meter-track { position: relative; }
.rc-finrep-meter-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--rc-steel); }

/* Season Objective card (2026-09-01) -- real progress bar (unlike
   Reputation's disabled decorative one above), plus a payout number that
   reuses .rc-finrep-rank-value's large-number treatment with its own
   bigger green variant. */
/* Same size/weight/letter-spacing/uppercase treatment as .rc-cs-team-name
   (2026-09-01, Matt's call: "make the Season Objective title the same ALL
   CAPS font style as the team name in Current Seat"). No margin-top --
   Current Seat's team name and Registration Status's headline both sit
   flush against the card's header divider with nothing extra above them;
   the 6px margin-top this used to carry was sitting this title noticeably
   further from the divider than either of those (2026-09-01, Matt's call:
   "move the season objective name and details up... so it matches the
   same distance from the line"). */
.rc-objective-name { font-family: var(--rc-font-heading); font-size: 15px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--rc-carbon); }
.rc-objective-desc { font-size: 12.5px; color: var(--rc-steel); line-height: 1.5; margin-top: 4px; }
/* margin-bottom guarantees breathing room under "Standings not available
   yet" (or whatever the count label reads) before the Progress/Payout
   divider line, same fix as .rc-cs-row/.rc-finrep-meter above
   (2026-09-01, Matt's call). */
.rc-objective-progress { margin-top: 16px; margin-bottom: 18px; }
.rc-objective-progress-track { height: 8px; border-radius: 4px; background: var(--rc-offwhite); overflow: hidden; }
.rc-objective-progress-fill { height: 100%; border-radius: 4px; background: var(--rc-steel); }
.rc-objective-progress-fill-met { background: var(--rc-ok); }
.rc-objective-progress-count { font-size: 11.5px; color: var(--rc-steel); margin-top: 6px; }
.rc-finrep-rank-value-payout { color: var(--rc-ok); }
.rc-finrep-rank-value-penalty { color: var(--rc-red); }

/* -------------------------------------------------------------------- */
/* Finances page (2026-09-02) -- a "checking account" style overview:    */
/* a bigger balance hero, a running ledger of every Transactions row,    */
/* and a Sponsorship Outlook panel reusing the same bonus/penalty grid   */
/* language as the Sponsors page's own "Sponsor Goals" (kept as its own  */
/* copy rather than sharing a function, so a future edit to either one   */
/* doesn't silently change the other). Team Objective reuses             */
/* seasonObjectiveCard() verbatim, so it needs no CSS of its own here.   */
/* -------------------------------------------------------------------- */
/* Finances page container chrome (2026-09-02, Matt's call: "make the
   container details like the top border and the line under the header...
   the same light gray color that we used in the CALENDAR page") -- every
   other page's cards use rc-dash-card-title's red-accent header underline
   (var(--rc-red)), matching the Calendar page's own .rc-cal-season-title.
   The Calendar page's individual race cards, though, are plain gray
   throughout: .rc-cal-race's whole border is var(--rc-silver) (already
   what .rc-panel's own top/side/bottom border uses -- no change needed
   there) and .rc-cal-track's under-header divider is var(--rc-offwhite).
   Scoped to #rc-section-finances only, on purpose -- this is a Finances-
   page-specific exception to the red-underline convention, not a
   sitewide change to rc-dash-card-title. (.rc-panel-subhead's own
   border-top is already var(--rc-offwhite) -- light gray by default,
   nothing to override there.) Also catches .rc-dash-card::before, the
   slanted red accent strip along each card's top-left edge -- easy to
   miss since it's a pseudo-element, not a plain border, but it's exactly
   what read as "the top red border" here. Matched to the same gray as
   .rc-panel's own outside border (var(--rc-silver)), per Matt's ask. */
#rc-section-finances .rc-dash-card-title { border-bottom-color: var(--rc-silver); }
#rc-section-finances .rc-dash-card::before { background: var(--rc-silver); }

/* Account Balance card exception (2026-09-09, Matt's call: "make account
   balance container in finances similar to the other containers in pages
   with the red border on top, the red line below the header") -- carved
   back out of the gray-Finances rule right above with a more specific
   selector, so this one card reads like every other page's rc-dash-card
   (red accent + red underline) while the rest of Finances stays gray. The
   checkered-flag corner (.rc-dash-card::after) was never touched by the
   gray override above, so it's already the plain gray Matt asked for here
   with no extra rule needed. */
#rc-section-finances .rc-fin-hero-card .rc-dash-card-title { border-bottom-color: var(--rc-red); }
#rc-section-finances .rc-fin-hero-card.rc-dash-card::before { background: var(--rc-red); }

/* Same gray-accent exception as Finances, applied one card at a time on
   pages that otherwise keep the red rc-dash-card convention (2026-09-09,
   Matt's call: "make wager history, protests, all sponsors, bonus and
   penalty triggers containers the same gray style border and lines as
   transaction ledger") -- Wager History (Wager page), All Sponsors and
   Bonus & Penalty Triggers (Sponsors page) each get their own class here
   rather than a section-wide rule like Finances gets, since every OTHER
   card on these same pages (the Wager trading card, Sponsor Goals, etc.)
   is meant to stay red. Higher specificity than the plain .rc-dash-card-
   title/::before rules further up, so no !important needed.
   .rc-protest-history-panel removed from this list (2026-09-20, Protests
   page redesign) -- the page is one single red rc-dash-card container
   now, no separate gray history card. */
.rc-wager-history-panel .rc-dash-card-title,
.rc-sponsor-table-panel .rc-dash-card-title,
.rc-trigger-glossary-panel .rc-dash-card-title { border-bottom-color: var(--rc-silver); }
.rc-wager-history-panel.rc-dash-card::before,
.rc-sponsor-table-panel.rc-dash-card::before,
.rc-trigger-glossary-panel.rc-dash-card::before { background: var(--rc-silver); }

/* Protests popup (2026-09-20 page redesign, then converted to a popup and
   simplified further 2026-09-24, Matt's ask: "remove the container within
   the popups" -- the old "Season N: Name" panel wrapper is gone; FILE
   PROTEST sits right below the popup's own red header line, then a
   bordered season-grouped history below that). See
   buildProtestPopupBody/buildProtestSeasonGroup/buildProtestHistoryItem,
   Account.html. The old locked/grayed-out Edit/Delete button treatment
   (.rc-protest-btn-locked/-lock) is gone too, 2026-09-24 -- Edit/Withdraw
   simply don't render any more once a protest is no longer modifiable,
   instead of showing disabled with a hover lock icon. */
.rc-protest-action-row { display: flex; justify-content: flex-end; margin-bottom: 16px; }
/* Top padding bumped 4px -> 12px (2026-09-26, Matt's ask: "a tiny more
   padding at the top of the container where the protests are listed") --
   left/right/bottom untouched, the top edge was sitting noticeably tighter
   against the first row than the box's own bottom edge did. */
.rc-protest-history-box { border: 1px solid var(--rc-silver); border-radius: 8px; padding: 12px 16px 4px; }
/* .rc-protest-season-group (the old per-season grouping pill/tree-line
   wrapper) removed 2026-09-24, item 6 -- the popup's history list is now
   one flat, newest-first list of Dashboard-style rows, no more season
   grouping. */

/* -------------------------------------------------------------------- */
/* WAGER (2026-09-02) -- the Wager page (renderWagerSection, Account.html)
   and the matching Dashboard preview card (wagerCard). */
/* -------------------------------------------------------------------- */

/* Wagers In Limbo -- portrait "card in the shape of a card" grid (Matt's
   own words). Each .rc-wager-card is the fixed-size 3D flip stage;
   .rc-wager-card-inner is what actually rotates; the two
   .rc-wager-card-face elements are stacked on top of each other via
   position:absolute + backface-visibility:hidden, so exactly one is ever
   readable at a time. */
.rc-wager-card-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
/* Height: 320 -> 400px when the flip/cancel icons first moved to the top
   corners, then trimmed back to 360px (2026-09-03, Matt's follow-up: "now
   that accept and deny live on the same row, you can reduce the height
   again") -- Accept+Deny sharing one row plus Counter below is only two
   button-rows tall, not three, so 400px had more slack than the new
   layout actually needs. Width is deliberately UNCHANGED throughout
   (Matt's earlier call: "don't make the card wider, just taller"). */
.rc-wager-card { width: 250px; height: 360px; perspective: 1200px; -webkit-perspective: 1200px; flex: none; }
.rc-wager-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.rc-wager-card-flipped .rc-wager-card-inner { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.rc-wager-card-face {
  position: absolute;
  inset: 0;
  /* -webkit- prefix is load-bearing, not decoration -- without it Safari
     never actually hides the face that's rotated away, and the "back"
     face's mirrored, reversed content shows straight through on top of
     whichever face should be readable (2026-09-03 bug report: "I can see
     the reverse of the backside of the card overtop the information
     part"). */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--rc-silver);
  border-radius: 10px;
  /* Faint card-stock gradient instead of flat white (2026-09-03, Matt's
     ask: "dress them up to look more like trading cards") -- subtle on
     its own, but sits underneath the checkered-corner/flag-stripe accent
     below for a bit more material presence than a plain UI panel. */
  background: linear-gradient(165deg, var(--rc-white) 0%, #f3f0ec 100%);
  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.10);
  /* clip-path, NOT overflow:hidden -- overflow:hidden on the same element
     as backface-visibility:hidden is a known Safari/Chrome bug where the
     browser silently drops the backface hiding once overflow clipping is
     also in play, which is exactly what was still letting the flipped-
     away face show through (2026-09-03 follow-up bug report: "the card
     is still see through on the backside" -- the earlier -webkit- prefix
     fix alone wasn't enough while this was still here). clip-path gives
     the same rounded-corner clipping for the checkered-corner/flag-stripe
     accents below without triggering that bug. */
  clip-path: inset(0 round 10px);
  /* Top padding grown 18px -> 42px (both faces) so the flip/cancel icons,
     now pinned to the top corners, never sit on top of the front face's
     centered avatar or the back face's left-aligned title -- everything
     below just flows down from a lower start instead of needing its own
     per-element clearance. */
  padding: 42px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Trading-card treatment (2026-09-03, Matt's ask: "dress them up to look
   more like trading cards... use the banner in assets as a vibe") --
   reuses this site's OWN established "Race Club" visual signature rather
   than inventing a new one: the same faint checkered-flag corner and
   angled red "finish flag" stripe every other Dashboard card already
   carries (see .rc-dash-card further up this file, which is exactly
   banner.jpg's own diagonal-checker + red-accent language, just already
   translated into this site's card chrome). Scaled down to fit a card
   this size instead of copy-pasting the larger dashboard-card numbers.
   Direct children get position:relative + z-index:1 so real content
   paints above these two decorative pseudo-elements -- the flip/cancel
   icon buttons need to stay position:absolute despite being direct
   children too, which their own rules (further down this file, so later
   in source order) still win on equal specificity. */
.rc-wager-card-face > * { position: relative; z-index: 1; }
.rc-wager-card-face::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 90px;
  background:
    conic-gradient(
      from 90deg,
      rgba(30, 30, 30, 0.07) 25%,
      transparent 0 50%,
      rgba(30, 30, 30, 0.07) 0 75%,
      transparent 0
    );
  background-size: 26px 26px;
  transform: skewX(-20deg);
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(circle at top right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 72%);
  mask-image: radial-gradient(circle at top right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
  z-index: 0;
}
.rc-wager-card-face::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 4px;
  /* Class-accent, not a fixed red (2026-09-03, Matt's ask) -- --rc-wager-accent
     is set inline per card, straight to the opponent's car-class color
     (buildWagerFlipCard, Account.html), same palette as every other
     class badge on the site (.rc-badge-lmgt3 etc.). Falls back to red
     only if the class is unknown -- Hypercar's own class color already
     IS red (--rc-class-hypercar: var(--rc-red)), so this never looks
     like a regression for that class, just a name change under the hood. */
  background: var(--rc-wager-accent, var(--rc-red));
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  z-index: 2;
}
.rc-wager-card-back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  align-items: flex-start;
  text-align: left;
}
.rc-wager-card-avatar-wrap { margin-bottom: 10px; }
/* Avatar bumped up slightly (2026-09-03, Matt's call), scoped to just
   this card so the shared .rc-avatar-circle-lg size used elsewhere on the
   site is untouched. A red-ringed portrait frame (white gap, then a red
   ring) is the other half of the "trading card" ask -- the same treatment
   a real driver/team trading card gives its portrait photo. */
.rc-wager-card-avatar-wrap .rc-avatar-circle-lg { width: 84px; height: 84px; font-size: 26px; }
.rc-wager-card-avatar-wrap .rc-avatar-circle { box-shadow: 0 0 0 3px var(--rc-white), 0 0 0 5px var(--rc-wager-accent, var(--rc-red)); }
.rc-wager-card-name { font-weight: 800; font-size: 14px; color: var(--rc-carbon); text-transform: uppercase; letter-spacing: 0.03em; font-family: var(--rc-font-heading); }
.rc-wager-card-condition { font-size: 12.5px; color: var(--rc-steel); margin-top: 4px; }
.rc-wager-card-stake { font-size: 21px; font-weight: 800; color: var(--rc-carbon); margin-top: 10px; font-variant-numeric: tabular-nums; }
.rc-wager-card-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; width: 100%; }
/* Accept + Deny share a row (2026-09-03, Matt's call), Counter is a
   separate full-width button below them -- was a bare text link before
   this, now an actual .rc-btn-secondary like Deny. */
.rc-wager-card-actions-row { display: flex; gap: 6px; width: 100%; }
.rc-wager-card-actions-row .rc-btn-sm { flex: 1; }
.rc-wager-card-actions .rc-btn-sm { width: 100%; }
.rc-wager-card-back-title { font-weight: 800; font-size: 14px; margin-bottom: 12px; color: var(--rc-carbon); text-transform: uppercase; letter-spacing: 0.03em; font-family: var(--rc-font-heading); }
.rc-wager-card-stat-row { font-size: 12.5px; color: var(--rc-carbon); margin-bottom: 8px; }
/* .rc-icon-btn is a 34px rounded-square; the flip control reads better as
   a true circle. Moved to the top-right corner of whichever face is
   currently showing (2026-09-03, Matt's call -- was bottom-right), which
   frees the whole bottom of the card for the Accept/Deny/Counter stack. */
.rc-wager-flip-btn { position: absolute; top: 12px; right: 12px; border-radius: 50%; font-size: 15px; line-height: 1; }

/* Cancel -- X in a rounded square (Matt's own spec), pinned to the
   top-left corner opposite the flip button (2026-09-03 -- was
   bottom-left). Only rendered while a wager is still Pending AND it
   isn't this driver's turn to Accept/Deny/Counter (see buildWagerFlipCard
   -- Matt's call: "if there is an APPROVE or DENY, there shouldn't be an
   X icon", since Deny already covers "I don't want this" for that side).
   Red on hover since it's a destructive, one-click action with no
   confirmation step. */
.rc-wager-cancel-btn { position: absolute; top: 12px; left: 12px; font-size: 12px; line-height: 1; }
.rc-wager-cancel-btn:hover { background: rgba(242, 27, 12, 0.1); color: var(--rc-red); border-color: var(--rc-red); }

.rc-wager-status-pill {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--rc-offwhite);
  color: var(--rc-steel);
}
/* "It's your move" -- awaiting THIS driver's response -- gets the one
   accent color on the card, same red the rest of the site reserves for
   something that needs attention. */
.rc-wager-status-pill-action { background: rgba(242, 27, 12, 0.1); color: var(--rc-red); }

.rc-wager-record-line { font-size: 13px; font-weight: 700; color: var(--rc-carbon); margin-bottom: 14px; }

/* Open (unfilled) wager slot -- same size as a real .rc-wager-card, same
   dashed/muted/uppercase "nothing here on purpose, click to fill it"
   treatment the Sponsors page's own open pick slot uses
   (.rc-pick-chip-open/.rc-pick-chip-clickable). */
.rc-wager-card-open {
  width: 250px;
  height: 360px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--rc-silver);
  border-radius: 10px;
  background: var(--rc-white);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.rc-wager-card-open:hover { border-color: var(--rc-carbon); }
.rc-wager-card-open-label { font-size: 12.5px; font-weight: 700; color: var(--rc-steel); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; padding: 0 20px; }

/* Dashboard preview card (wagerCard) -- plain stacked rows, same
   light-divider convention the Sponsors dashboard card already uses
   (.rc-sponsors-dash-row), not full flip-cards -- there's no room for
   those in a quick-glance dashboard tile. */
.rc-wager-dash-list { display: flex; flex-direction: column; gap: 10px; }
.rc-wager-dash-row { border-top: 1px solid var(--rc-offwhite); padding-top: 8px; }
.rc-wager-dash-row:first-child { border-top: none; padding-top: 0; }
.rc-wager-dash-row-name { font-weight: 700; font-size: 13px; color: var(--rc-carbon); }
/* Race the wager belongs to (2026-09-03, Matt's ask) -- sits between the
   opponent name and the condition/stake/status line, same steel gray as
   the rest of the card's secondary text but slightly smaller so it reads
   as a detail line, not a second headline. */
.rc-wager-dash-row-race { font-size: 11.5px; color: var(--rc-steel); margin-top: 1px; }
.rc-wager-dash-row-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--rc-steel); }

/* Dashboard wager card fade-in -- card renders invisible while its own
   getMyWagerSummary fetch is in flight (kept off the main dashboard
   batch, see the comment above dashboardDataPromise in Account.html),
   then fades to fully opaque once content lands, instead of showing an
   empty/loading card. */
.rc-dash-card-fade { opacity: 0; transition: opacity 0.55s ease; }
.rc-dash-card-fade-in { opacity: 1; }
.rc-fin-hero-card { padding: 26px 30px; }
.rc-fin-hero-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.rc-fin-hero-balance { font-family: var(--rc-font-heading); font-size: 44px; font-weight: 800; color: var(--rc-carbon); font-variant-numeric: tabular-nums; margin-top: 4px; }

/* Ledger -- flex rows rather than a strict grid so it wraps gracefully on
   narrow screens without a separate mobile layout, same "let flexbox do
   it" posture as most of this site's other list-style panels. */
.rc-ledger-summary { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--rc-silver); }
.rc-ledger-summary-item { flex: 1 1 120px; text-align: center; }
.rc-ledger-summary-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc-steel); }
.rc-ledger-summary-value { font-family: var(--rc-font-heading); font-size: 20px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--rc-carbon); }
.rc-ledger-summary-value-positive { color: var(--rc-ok); }
.rc-ledger-summary-value-negative { color: var(--rc-red); }
.rc-ledger-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rc-offwhite); flex-wrap: wrap; }
.rc-ledger-row:first-child { border-top: none; }
.rc-ledger-date { flex: 0 0 88px; font-size: 12px; color: var(--rc-steel); font-variant-numeric: tabular-nums; }
.rc-ledger-main { flex: 1 1 220px; min-width: 160px; }
.rc-ledger-event { font-size: 13px; font-weight: 700; color: var(--rc-carbon); }
.rc-ledger-note { font-size: 11.5px; color: var(--rc-steel); margin-top: 2px; }
.rc-ledger-season { flex: 0 0 110px; font-size: 11.5px; color: var(--rc-steel); text-align: right; }
.rc-ledger-amt { flex: 0 0 100px; text-align: right; font-family: var(--rc-font-heading); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-ledger-amt-positive { color: var(--rc-ok); }
.rc-ledger-amt-negative { color: var(--rc-red); }

/* Full Transaction History popup pager (2026-09-08). */
.rc-ledger-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rc-offwhite); }

/* Recent Results -- Dashboard card (2026-09-07), same "bordered rows
   stacked in a card" shape as the Ledger above, one row per race. */
.rc-recent-results-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rc-recent-results-name { font-size: 13px; font-weight: 700; color: var(--rc-carbon); }
/* Your Race -- the driver's own points/money/qualifying/callout chips.
   No background box around this (2026-09-07, Matt's call: "remove the
   colored cell that stretches across the card above the class
   positions" -- it used to sit in its own tinted offwhite strip); just
   plain spacing now, sitting in the card's own flow above the columns. */
.rc-recent-results-yours { margin-bottom: 8px; }
.rc-recent-results-yours-headline { font-family: var(--rc-font-heading); font-size: 15px; font-weight: 800; color: var(--rc-carbon); }
.rc-recent-results-yours-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Ordinal suffix (st/nd/rd/th) on the corner "1st PLACE" figure --
   smaller and raised against the number (2026-09-07, Matt's call). */
.rc-ordinal-suffix { font-size: 0.6em; vertical-align: super; }
/* One column per class present (2026-09-07, Matt's call: "up to 3
   columns for multiclass... if only one class, make it one column, 2
   classes, 2 columns") -- the modifier class sets the column count so a
   single-class season (this one, today) just renders one full-width
   column instead of a lonely narrow one. */
.rc-recent-results-columns { display: grid; gap: 18px; align-items: start; }
.rc-recent-results-columns-1 { grid-template-columns: 1fr; }
.rc-recent-results-columns-2 { grid-template-columns: 1fr 1fr; }
.rc-recent-results-columns-3 { grid-template-columns: 1fr 1fr 1fr; }
.rc-recent-results-columns-flex { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Results page (2026-09-07) -- one .rc-results-round panel per completed
   round, most recent first, each reusing the Dashboard Recent Results
   card's own row/column styling (uncapped here) plus a full per-class
   stats table below (every column DriverResults/SeasonHistory can supply,
   Matt's call: "a plethora of numbers and stats"). */
.rc-results-round-list { display: flex; flex-direction: column; gap: 16px; }
/* Nested container -- a bordered box (not a full rc-panel shadow, since
   these sit inside the season's own rc-panel) per race event. Redesigned
   2026-09-26 (Matt's ask: "remove the extra half border from the top of
   the inside container and just keep it a 1 line border that goes
   around") -- the old diagonal top accent (::before) is gone entirely,
   and the border weight/color now matches the rest of the account pages'
   own card border convention (.rc-cal-race's 2px var(--rc-silver-dark))
   instead of the very light --rc-offwhite this page used to use alone. */
.rc-results-round { position: relative; overflow: hidden; border: 2px solid var(--rc-silver-dark); border-radius: 10px; padding: 16px 18px; }
.rc-results-round .rc-hint { margin-top: 2px; margin-bottom: 8px; display: block; }
/* Round title -- same three-piece "Round N   EventName at Track: Layout"
   shape and weights as league.js's own All Results event title
   (_rclBuildEventTitleLine_, 2026-09-26, Matt's ask: "make the round
   number title at the top identical to the ALL RESULTS event title
   styling and format"), just this page's own light-theme colors instead
   of league's white-on-dark. */
.rc-results-round-title { font-family: var(--rc-font-heading); font-size: 15px; font-weight: 700; color: var(--rc-carbon); margin: 0; }
/* "Round N" lighter than the rest of the title (2026-09-27, Matt's ask) --
   was a bare text node inheriting the h3's 700 weight; now its own span,
   same pattern as -event/-track/-layout below. */
.rc-results-round-title-roundnum { font-weight: 400; color: var(--rc-carbon); }
.rc-results-round-title-event { font-weight: 800; color: var(--rc-carbon); }
.rc-results-round-title-track { font-weight: 500; color: var(--rc-carbon); }
.rc-results-round-title-layout { font-weight: 500; color: var(--rc-steel); }
.rc-results-season-standings { margin-bottom: 16px; }

/* Season picker -- past, Completed-season dropdown + RETRIEVE RESULTS
   button (2026-09-26, Matt's ask), sitting under the season header's red
   underline. 1/3-width select, button to its right; stacks full-width on
   narrow screens rather than squeezing. */
.rc-results-season-picker { display: flex; gap: 10px; align-items: stretch; margin: 12px 0 18px; }
.rc-results-season-select {
  flex: 0 0 33%;
  min-width: 0;
  font-family: var(--rc-font-body);
  font-size: 13px;
  color: var(--rc-carbon);
  background: var(--rc-white);
  border: 1px solid var(--rc-silver);
  border-radius: 6px;
  padding: 8px 10px;
}
.rc-results-season-retrieve { flex: none; }
@media (max-width: 640px) {
  .rc-results-season-picker { flex-direction: column; }
  .rc-results-season-select { flex-basis: auto; }
}

.rc-results-stat-strip { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 10px 0 14px; padding: 10px 0; border-top: 1px solid var(--rc-offwhite); border-bottom: 1px solid var(--rc-offwhite); }
.rc-results-stat { min-width: 0; }
.rc-results-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rc-steel); margin-bottom: 2px; }
.rc-results-stat-value { font-family: var(--rc-font-heading); font-size: 13px; font-weight: 700; color: var(--rc-carbon); white-space: nowrap; }
/* "Your Best Lap" purple in the Career page's own-race stat strip
   (2026-09-27, Matt's ask: "Make the best lap time for my career purple in
   the header") -- same --rc-fastest-purple token as every other fastest-
   lap/sector emphasis on this page (Lap Time Log, Race Report). Applied via
   resultsStatBlock's optional variant param. */
.rc-results-stat-value-purple { color: var(--rc-fastest-purple); }

.rc-results-class { margin-top: 16px; }
.rc-results-class-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }

.rc-results-table-wrap { overflow-x: auto; }
.rc-results-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.rc-results-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rc-steel); font-weight: 700; padding: 6px 10px; border-bottom: 2px solid var(--rc-offwhite); white-space: nowrap; }
.rc-results-table td { padding: 6px 10px; border-bottom: 1px solid var(--rc-offwhite); white-space: nowrap; color: var(--rc-carbon); }
.rc-results-table tbody tr:last-child td { border-bottom: none; }
.rc-results-row-you { background: var(--rc-offwhite); font-weight: 700; }
/* DNF/DSQ rows highlighted red instead of a text Status column
   (2026-09-09, Matt's call: "instead of STATUS, mark DNF by
   highlighting them in red") -- a faint red wash across the row plus
   red text, so it reads at a glance without needing a legend. */
.rc-results-row-dnf { background: rgba(198, 40, 40, 0.07); }
.rc-results-row-dnf td { color: var(--rc-red); }
.rc-results-row-dnf .rc-results-td-pos { color: var(--rc-red); }
.rc-results-td-pos { font-family: var(--rc-font-heading); font-weight: 800; color: var(--rc-steel); }

/* Results/Career per-race "your own race" summary + full session detail
   (2026-09-19) -- reuses .rc-results-stat-strip for the summary grid
   (same look as the race-wide conditions strip above it) and adds three
   new pieces: one .rc-results-session container per Practice/Qualify/
   Race session that has laps or events for this driver, a laps table
   (same .rc-results-table shape, just denser given the column count),
   and a plain-line RaceEvents list underneath it. */
.rc-results-you-summary { margin-bottom: 4px; }
.rc-results-you-summary .rc-results-stat-strip { border-top: none; }
.rc-results-sessions { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.rc-results-session { border-top: 1px solid var(--rc-offwhite); padding-top: 12px; }
/* Just ONE gray line below My Finish/My Grid, not two (2026-09-27, Matt's
   ask: "remove the double gray line and make it just one gray line below
   the YOUR FINISH YOUR GRID") -- .rc-results-stat-strip (the My Finish/My
   Grid/etc. strip, immediately above .rc-results-sessions) already draws
   its own border-bottom, so the first .rc-results-session's border-top
   right after it was a second line stacked close behind the first. The
   strip's own line stays; only the first session's redundant one is
   dropped -- a later session in a multi-session round still gets its
   border-top as the separator between it and the one before it. */
.rc-results-sessions .rc-results-session:first-child { border-top: none; padding-top: 0; }
.rc-results-session-title { font-family: var(--rc-font-heading); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rc-steel); margin-bottom: 8px; }
.rc-results-laps-table th, .rc-results-laps-table td { font-size: 11.5px; padding: 5px 8px; }
/* Fastest lap / fastest sector highlight (2026-09-26, Matt's ask:
   "fastest lap time bold purple" in Qualifying, "fastest lap and the
   fastest times in each sector bold and purple" in Race). REWORKED
   2026-09-27 (Matt's report: "it looks black right now but it's bold") --
   .rc-results-table td's own color rule (style.css) is two simple
   selectors (0,2,0) against this class alone at (0,1,0), so it was
   silently winning the color even though .rc-results-fastest's
   font-weight had nothing competing with it -- bold stayed, purple never
   showed. Qualified with the table/td ancestry to match that specificity
   (now (0,3,0)), and swapped to the new, more saturated --rc-fastest-
   purple token (was --rc-class-lmp3, tuned for a class BADGE, not an
   emphasis color -- too dull for this). */
.rc-results-table td.rc-results-fastest { font-weight: 700; color: var(--rc-fastest-purple); }

/* Race Report -- personal Results page. REWORKED 2026-09-27 (Matt's ask:
   "review the race report in ALL RESULTS on the league page and mimic
   that exactly... copy the exact way we figured it out on the league.html
   page") -- this now renders the SAME clause-tagged raceReport data and
   per-clause coloring league.js's .rcl-report-clause-* does (js/Account.html's
   resultsRaceReport), just recolored for this page's white-card background
   instead of the League Hub's dark theme. The row shape itself
   (.rc-results-report-lap/-lap-num/-lap-text/-line) is unchanged from the
   original 2026-09-26 version and still mirrors league.js's
   .rcl-report-lap/-lap-num/-lap-text/-line exactly. */
.rc-results-report { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rc-offwhite); }
.rc-results-report-title { font-family: var(--rc-font-heading); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rc-steel); margin-bottom: 8px; }
.rc-results-report-list { display: flex; flex-direction: column; }
.rc-results-report-lap { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--rc-offwhite); }
.rc-results-report-lap:last-child { border-bottom: none; }
.rc-results-report-lap-num { flex: none; width: 62px; font-family: var(--rc-font-heading); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rc-carbon); padding-top: 2px; }
.rc-results-report-lap-text { flex: 1 1 auto; min-width: 0; }
.rc-results-report-line { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--rc-carbon); }
.rc-results-report-line:last-child { margin-bottom: 0; }
/* Driver name -- bold, full-strength carbon (this page's "always white"
   equivalent on a light background), matching league.js's
   .rcl-report-name treatment of always-bold-emphasized names. */
.rc-results-report-name { color: var(--rc-carbon); font-weight: 700; }
.rc-results-report-timestamp { margin-right: 6px; color: var(--rc-steel); font-variant-numeric: tabular-nums; font-size: 12px; }
/* Clause color-coding within a report line -- light-theme counterpart of
   league.css's .rcl-report-clause-* (2026-09-27). Same color intent per
   clause kind, just this page's existing tokens instead of the League
   Hub's dark-theme ones: wall stays a plain dim gray, car-to-car contact
   is amber, damage/pit are orange, gains are green, losses are red (not
   bold, matching league.js), retirement is bold carbon, and fastest
   lap/sector is the same bold --rc-fastest-purple this page's
   .rc-results-fastest uses for the Lap Time Log table (both updated
   together 2026-09-27, Matt's report: "make the fastest sector times and
   fastest overall lap time more purple" -- was the duller --rc-class-lmp3
   class-badge color). No specificity fight here the way the table cell
   had -- this span has no ancestor rule competing for its own color, so
   it was already rendering purple, just the duller shade. */
.rc-results-report-clause-wall { color: var(--rc-steel); }
.rc-results-report-clause-car { color: var(--rc-warning-accent); font-weight: 700; }
.rc-results-report-clause-damage { color: var(--rc-orange); font-weight: 700; }
.rc-results-report-clause-pit { color: var(--rc-orange); font-weight: 700; }
.rc-results-report-clause-gain { color: var(--rc-ok); font-weight: 700; }
.rc-results-report-clause-loss { color: var(--rc-red); }
.rc-results-report-clause-retirement { color: var(--rc-carbon); font-weight: 700; }
.rc-results-report-clause-fastest { color: var(--rc-fastest-purple); font-weight: 700; }

/* Penalties Assessed -- personal Results page (2026-09-27, Matt's ask:
   "add a penalties assessed at the bottom, just like ALL RESULTS has").
   Reuses the exact same .rc-results-report-lap/-lap-num/-lap-text/-line/
   -name row shape above -- only the penalty effect itself
   (.rc-results-penalty-effect) gets its own bold-red treatment, same
   convention as league.css's .rcl-penalty-effect. */
.rc-results-penalties { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rc-offwhite); }
.rc-results-penalty-effect { color: var(--rc-red); font-weight: 700; }

.rc-recent-results-column > .rc-badge-chip { margin-bottom: 8px; }
/* Full finishing order -- one compact grid row per driver, position /
   name+car#, two-column shape (team name dropped, 2026-09-07) the whole
   way down so numbers and names both line up. */
.rc-recent-results-table { display: flex; flex-direction: column; }
/* 3rd grid track added (2026-09-09, Matt's call: "make it only 2 columns
   with the 2nd column containing the points gained that race") -- the
   position number and driver name together read as column 1, points
   gained this round is the new column 2. `auto` (not `1fr`) so the points
   text sizes to its own content and sits flush right, rather than
   stretching to share the driver name's leftover space. */
.rc-recent-results-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rc-offwhite); font-size: 12.5px; }
.rc-recent-results-row:first-child { border-top: none; }
.rc-recent-results-row-you { background: var(--rc-offwhite); border-radius: 4px; padding-left: 6px; margin-left: -6px; padding-right: 6px; margin-right: -6px; font-weight: 700; }
.rc-recent-results-pos { font-family: var(--rc-font-heading); font-weight: 800; color: var(--rc-steel); font-variant-numeric: tabular-nums; }
.rc-recent-results-driver { display: flex; align-items: center; gap: 5px; color: var(--rc-carbon); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rc-recent-results-points { font-family: var(--rc-font-heading); font-weight: 700; color: var(--rc-steel); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Manufacturer logo, inline between driver name and car number
   (2026-09-07) -- capped at exactly the row's own font height (Matt's
   call: "shouldn't be taller than the font is tall"), never the row's
   full line-height, so it never pushes the row taller than plain text
   would. Car number uses its own class (not the sitewide .rc-hint, which
   carries a margin-top that broke vertical centering against the logo,
   2026-09-07 fix) so both sit dead center on the flex row's cross axis. */
.rc-recent-results-mfr-logo { height: 1em; width: auto; max-width: 1.8em; object-fit: contain; flex: none; }
.rc-recent-results-carnum { color: var(--rc-steel); font-size: 12px; flex: none; }

/* Sponsorship Outlook -- same two-column bonus/penalty grid the Sponsors
   page's "Sponsor Goals" uses (rc-sponsor-goals-*), reused verbatim here
   since it's already exactly the right shape for "potential upside vs.
   potential downside per sponsor". */
.rc-fin-outlook-hint { font-size: 12.5px; color: var(--rc-steel); margin-top: 4px; }

@media (max-width: 900px) {
  .rc-details-row { grid-template-columns: 1fr; }
  .rc-details-row-2 { grid-template-columns: 1fr; }
  .rc-field-pair, .rc-field-trio, .rc-field-trio-name { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------- */
/* Shared fixed header (js/header.js) — every page                      */
/* -------------------------------------------------------------------- */
.rc-fixed-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  background: var(--rc-white);
  border-bottom: 1px solid var(--rc-silver);
  display: flex;
  align-items: center;
  /* justify-content: space-between (was) -> flex-start, with .rc-header-nav
     given margin-left: auto instead (2026-09-26, added for the League Hub
     badge below) -- space-between only works cleanly with exactly 2 flex
     children. The badge is now an optional 3rd child sitting right after
     the logo; margin-left: auto on the nav still pushes IT flush right
     exactly like space-between used to, whether or not the badge is
     present, while the badge itself stays put immediately next to the
     logo instead of floating in the middle of the header. */
  justify-content: flex-start;
  padding: 0 28px;
  z-index: 1000;
}
.rc-header-logo-link { display: flex; align-items: center; height: 100%; cursor: pointer; }
/* cursor: pointer + user-select: none explicitly on both the link and the
   image (2026-09-27, Matt's ask: "make sure both graphics on the left
   side of the navbar are clickable everywhere and don't show a text
   cursor on hover") -- belt-and-suspenders alongside the anchor's own
   default pointer cursor, so hovering anywhere over the logo graphic
   itself never shows a text-select (I-beam) cursor or lets a click-drag
   select it as text, on every page (this markup is shared by every page
   via renderHeader(), js/header.js). Matches the same treatment
   .rc-header-leaguehub-logo already had. */
.rc-header-logo { height: 58px; display: block; cursor: pointer; user-select: none; -webkit-user-drag: none; }
/* League Hub badge -- the league_hub_logo.png mark, sitting right after
   the Race Club logo (2026-09-26). Used to be opt-in per page via
   renderHeader({leagueHubBadge: true}); now unconditional (2026-09-27,
   Matt's ask: "add the league hub logo to the navbar on all parts of the
   site, not just the league.html navbar") -- see js/header.js. Hidden
   below 640px (same "hide the decorative extra before the functional
   stuff" convention as .rc-header-account-text) so it never crowds the
   LOGIN/REGISTER text or account menu on a narrow phone header.
   The "/" divider that used to sit here is gone (2026-09-26 follow-up,
   Matt's ask: "remove the forward slash from the navbar in between the
   logos") -- margin-left alone now keeps a large, deliberate gap between
   the two logos in its place (was 14px alongside the slash's own ~30px
   glyph width + 10px gap; 48px keeps roughly that same total breathing
   room now that the slash itself is gone). */
.rc-header-leaguehub-badge {
  display: none;
  align-items: center;
  height: 100%;
  margin-left: 48px;
}
/* Tablet (2026-09-27 follow-up, Matt's ask: "on tablet, if we move the
   league hub navbar graphic over by about 1/2 the distance to the race
   club logo, we can keep the tablet league hub graphic up. Right now it's
   awkwardly in the middle to middle left part of the navbar") -- shown
   again at tablet widths instead of only >=821px, with the gap to the
   Race Club logo halved (48px -> 24px) so it sits close to the logo
   instead of floating toward the middle of the header. Phone (<=640px)
   still hides it entirely below -- no room for it once the hamburger
   nav's own touch target is in play.
   Upper bound raised 820px -> 1024px (2026-09-27 third follow-up, Matt's
   catch: "viewing on my ipad pro tablet, nothing is changing style-wise")
   -- 820px matches a regular iPad's portrait width, but an iPad Pro's
   logical CSS viewport is wider (834px on the 11" model, 1024px on the
   12.9"/13"), so it was falling past this range entirely into the
   >=821px desktop rule below, which never had the halved gap applied.
   1024px covers both iPad Pro sizes in portrait; landscape on either
   (1194px/1366px) still falls to the desktop treatment below. */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Moved further left (2026-09-27 second follow-up, Matt's ask: "League
     Hub graphic needs to move to the left by 1/2 the distance it
     currently is to the Race Club graphic") -- halved again, 24px -> 12px,
     on top of the earlier 48px -> 24px halving from the first tablet
     pass. */
  .rc-header-leaguehub-badge { display: flex; margin-left: 12px; }
}
@media (min-width: 821px) {
  .rc-header-leaguehub-badge { display: flex; }
}
/* Logo now links to league.html (2026-09-26 follow-up, Matt's ask: "Make
   the league hub logo link to the league hub page") -- same
   display:flex/height:100% pattern as .rc-header-logo-link so the image
   inside it still centers vertically against the 70px header. */
.rc-header-leaguehub-logo-link { display: flex; align-items: center; height: 100%; cursor: pointer; }
/* Reads as a link, not a copyable/draggable image (2026-09-27, Matt's ask:
   "make sure my browser doesn't try to copy the letters from the logo...
   knows it's a graphic that's a link, not something to be copied") --
   user-select:none stops the browser from letting anyone click-drag-select
   the image (and its alt text, in browsers that expose it as selectable
   fallback content) the way it would a text run; -webkit-user-drag:none is
   Safari's equivalent of the draggable="false" attribute already on the
   <img> itself (header.js) for browsers that don't respect the attribute
   alone. This can't stop a deliberate right-click "Save Image As" (no
   browser-side trick reliably can, short of hurting accessibility), but it
   does stop the incidental drag/select behavior a plain <img> has by
   default. */
.rc-header-leaguehub-logo {
  height: 40px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
}
.rc-header-nav { display: flex; align-items: center; gap: 10px; position: relative; margin-left: auto; }
.rc-header-link {
  font-family: var(--rc-font-heading);
  font-size: 15px; /* bumped from 13px (2026-09-27, Matt's ask) -- the only
                       link this class renders is REGISTER/LOGIN, so this is
                       a safe, isolated size bump. */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rc-carbon);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.rc-header-link:hover { color: var(--rc-red); }
.rc-header-sep { color: var(--rc-silver); font-size: 13px; }

/* Avatar + name/role stack + chevron -- ONE clickable toggle button that
   opens/closes the account dropdown. The whole box gets the hover
   treatment together (not an isolated circle just behind the chevron) --
   Matt's call. */
.rc-header-account-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  font: inherit;
}
.rc-header-account-toggle:hover,
.rc-header-account-toggle[aria-expanded="true"] { background: var(--rc-offwhite); }
/* Red on hover for immediate feedback before a click, AND for as long as
   the dropdown is actually open (aria-expanded) -- not just on :hover --
   so it stays red while you're reading the menu with your mouse resting
   somewhere inside it. See js/header.js's hover-away-close comment for
   how it eventually turns back off. */
.rc-header-account-toggle:hover .rc-header-avatar,
.rc-header-account-toggle[aria-expanded="true"] .rc-header-avatar { background: var(--rc-red); }
.rc-header-account-chevron {
  flex: none;
  color: var(--rc-steel);
  transition: transform 0.15s ease;
}
.rc-header-account-toggle[aria-expanded="true"] .rc-header-account-chevron { transform: rotate(180deg); color: var(--rc-carbon); }
.rc-header-avatar {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rc-carbon);
  color: var(--rc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rc-font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
}
/* Sits on top of the initials text underneath (added 2026-08-30) -- its
   onerror just hides the <img> itself, same "silently fall back to
   initials" convention as Account.html's own buildAvatarCircle(). */
.rc-header-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Notification bell CSS (.rc-notif-dot, .rc-header-bell-icon-wrap,
   .rc-header-bell-toggle, .rc-header-notif-menu and everything else
   .rc-header-notif-* below) removed in full (2026-09-24, Matt's call:
   eliminate the in-app notification system entirely, moving to an
   external Discord bot). */
.rc-header-account-text {
  display: none; /* shown from ~480px up, see the media query below -- too cramped on a phone-width header otherwise */
  flex-direction: column;
  line-height: 1.25;
  text-align: left; /* Matt's call -- name/role never center-justify, even though they sit in a centered flex row */
}
.rc-header-account-name {
  font-family: var(--rc-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--rc-carbon);
}
/* Role pill (2026-09-21, Matt's call: "add a pill to the avatar section,
   below the name, with the correct pill for the profile") -- was plain
   text; now the same .rc-badge-role-* colored chip the Admin section's
   Members list uses (see header.js's RC_HEADER_ROLE_PILL_CLASS_ and the
   .rc-badge-role-* rules above), just scaled down to fit this compact
   header stack. align-self keeps the pill from stretching to the name's
   full width in the column flex layout; margin-top gives it a hair of
   breathing room under the name above it. */
.rc-header-account-role {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 9.5px;
  padding: 1px 7px;
}
.rc-header-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: var(--rc-white);
  border: 1px solid var(--rc-silver);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  padding: 6px;
  z-index: 1001;
}

.rc-header-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--rc-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rc-carbon);
  text-decoration: none;
}
.rc-header-menu-item:hover { background: var(--rc-offwhite); color: var(--rc-red); }
/* Discord row in the avatar dropdown -- originally (2026-09-27) a
   permanent Blurple pill with the Discord mark, to bring it in line with
   Discord's brand guidelines. Un-blurpled 2026-10-01 (Matt's ask: "leave
   it alone until it's hovered on" + drop the logo) -- it now sits plain
   like every other row in this menu and only goes Blurple on hover, same
   idea as the sidebar's own .rc-nav-item-discord (style.css, which has
   always worked this way). Specificity note: this rule must come after
   the plain .rc-header-menu-item:hover rule above so its background/color
   win on hover. */
.rc-header-menu-item-discord:hover { background: #5865F2; color: var(--rc-white); }
/* Divider between menu items (added 2026-09-18 for the League Hub /
   Dashboard+Edit Profile / Logout grouping) -- light theme equivalent of
   Account.html's dark-sidebar .rc-nav-divider. */
.rc-header-menu-divider { border: none; border-top: 1px solid var(--rc-silver); margin: 6px 4px; }

/* 480px -> 821px (2026-09-27, mobile nav pass) -- same unification as the
   League Hub badge above; this rule now only matters above the hamburger
   breakpoint, since .rc-header-account-text is hidden outright (along
   with the avatar and chevron) below it -- see the hamburger block below. */
@media (min-width: 821px) {
  .rc-header-account-text { display: flex; }
}

/* Hamburger icon + logged-out toggle button -- both hidden by default
   (desktop); shown only below the mobile breakpoint (2026-09-27, mobile
   nav pass, Matt's ask: "a menu icon that opens the nav links in a
   dropdown or slide-out panel"). The icon itself sits inside the SAME
   .rc-header-account-toggle button the avatar/name/role/chevron already
   use when logged in (js/header.js) -- only the visual swaps at mobile
   widths, so the click/open/close/outside-click wiring never has to know
   which one is showing. The standalone .rc-header-hamburger-toggle button
   only exists for the logged-out state, which has nothing else to
   collapse behind a menu on desktop. */
.rc-header-hamburger-icon { display: none; align-items: center; color: var(--rc-carbon); }
.rc-header-hamburger-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px;
  border-radius: 8px;
  color: var(--rc-carbon);
  cursor: pointer;
}
.rc-header-hamburger-toggle:hover,
.rc-header-hamburger-toggle[aria-expanded="true"] { background: var(--rc-offwhite); color: var(--rc-red); }

@media (max-width: 820px) {
  /* Logged in: collapse the avatar/name/role/chevron stack down to just
     the hamburger icon, inside the same toggle button. */
  .rc-header-avatar,
  .rc-header-account-text,
  .rc-header-account-chevron { display: none; }
  .rc-header-hamburger-icon { display: inline-flex; }
  .rc-header-account-toggle { padding: 8px; }

  /* Logged out: swap the plain REGISTER/LOGIN link for the hamburger
     toggle + its League Hub/Register-Login panel. */
  #rc-header-login-link { display: none; }
  .rc-header-hamburger-toggle { display: inline-flex; }

  /* Bigger tap target on phone widths (2026-09-28, Matt's ask: "make the
     navbar hamburger bigger on mobile") -- narrowed further at <=640px
     below, since a phone has even less competing header content than a
     tablet-width screen. The icon markup itself is a raw inline <svg
     width="22" height="22" ...> (RC_HEADER_ICON_HAMBURGER, header.js) --
     CSS width/height on the svg selector wins over those HTML attributes,
     so this is a real size bump, not just a bigger click area around the
     same-size glyph. */
  .rc-header-hamburger-icon svg,
  .rc-header-hamburger-toggle svg { width: 26px; height: 26px; }

  /* Slightly wider than the desktop dropdown's 180px min-width (shared
     .rc-header-account-menu rule above -- both the logged-in dropdown and
     the logged-out mobile panel use it) for more comfortable tap targets
     at mobile widths; still right-anchored under the hamburger rather
     than a full-bleed slide-out, since the menu's own item count is short
     enough that a right-aligned panel reads fine at any width down to a
     phone. */
  .rc-header-account-menu { min-width: 220px; }

  /* Tighter side padding reclaims a bit of width for the logo + hamburger
     on a phone-width header -- 28px a side was sized for a full desktop
     nav that no longer shows here. */
  .rc-fixed-header { padding: 0 16px; }
}
@media (max-width: 640px) {
  /* Bigger again at true phone widths (2026-09-28, Matt's ask: "make the
     navbar hamburger bigger on mobile") -- the tablet-range 26px bump
     above still reads small once the header has shrunk down to just logo
     + hamburger with nothing else competing for room (.rc-fixed-header's
     own 16px side padding at this width, set in the 820px block above). */
  .rc-header-hamburger-icon svg,
  .rc-header-hamburger-toggle svg { width: 30px; height: 30px; }

  /* Optically center the hamburger against the RACE CLUB wordmark
     (2026-09-29, Matt's ask: "make the hamburger in the navbar vertically
     centered with the raceclub graphic in the same navbar", mobile only).
     Measured: both the hamburger button and the logo <img> already sit on
     the exact same mathematical mid-line of the 70px header (flex
     align-items:center on .rc-fixed-header/.rc-header-nav puts both boxes'
     centers at the same y). The mismatch is optical, not layout -- the
     logo's own ink (bold RACE CLUB lettering) is concentrated in its
     upper portion, with only the thin tagline + double underline below,
     so the wordmark's visual weight sits a couple pixels above its own
     bounding-box center while the symmetric hamburger icon's visual
     center IS its bounding-box center. That reads as the hamburger
     sitting slightly low next to the logo. Nudging the hamburger buttons
     (not the logo) up by 2px lines up their visual centers instead of
     their invisible boxes. Covers both hamburger states: the logged-out
     .rc-header-hamburger-toggle button and the logged-in
     .rc-header-account-toggle (which swaps to the same icon at this
     width, see the 820px block above). */
  .rc-header-hamburger-toggle,
  .rc-header-account-toggle { position: relative; top: -2px; }
}

/* Pages other than index.html sit below the fixed header. */
.rc-auth-page { padding-top: 70px; }
.rc-shell { padding-top: 70px; }
/* .rc-topbar and its own margin-top:70px clearing rule are gone
   (2026-09-28, Matt's ask -- see the @media (max-width: 768px) block
   above where .rc-topbar/.rc-sidebar are hidden for good). .rc-shell's
   own 70px padding-top right above is what clears the fixed header at
   every width now, mobile included -- there used to be a SECOND mobile
   override here forcing this back to 0px (to cancel out .rc-topbar's own
   clearing margin, back when that bar still rendered on mobile); it's
   removed along with the topbar itself, so the plain 70px above just
   applies everywhere now, same as .rc-auth-page. */

/* -------------------------------------------------------------------- */
/* Toast notifications (js/header.js's showToast()) — the one sitewide  */
/* way any page reports a transient result now, per Matt's call: never  */
/* inside a form's own message box or a popup, always a temporary card  */
/* stacked bottom-right. Dark/carbon rather than the light theme most   */
/* of the site uses, deliberately, so a toast reads as chrome sitting   */
/* ON TOP of the page rather than another card that's part of it --     */
/* the same dark register the sidebar already uses elsewhere.           */
/* -------------------------------------------------------------------- */
.rc-toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}
.rc-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--rc-carbon);
  color: var(--rc-white);
  border-left: 4px solid var(--rc-steel);
  border-radius: 6px;
  padding: 12px 12px 12px 14px;
  font-family: var(--rc-font-body);
  font-size: 13.5px;
  line-height: 1.4;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.rc-toast-in { opacity: 1; transform: translateY(0); }
.rc-toast-out { opacity: 0; transform: translateY(8px); }
.rc-toast-success { border-left-color: var(--rc-ok); }
.rc-toast-error { border-left-color: var(--rc-red); }
.rc-toast-info { border-left-color: var(--rc-steel); }
.rc-toast-text { flex: 1; }
.rc-toast-close {
  flex: none;
  background: none;
  border: none;
  color: var(--rc-white);
  opacity: 0.55;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 4px;
}
.rc-toast-close:hover { opacity: 1; }
@media (max-width: 600px) {
  .rc-toast-container { left: 12px; right: 12px; max-width: none; bottom: 14px; }
}

/* -------------------------------------------------------------------- */
/* index.html — hero banner                                             */
/*                                                                       */
/* No longer `position: fixed` (2026-09-13, Matt's follow-up call: "the  */
/* image should not be sticky anywhere... I want it to scale when the   */
/* user shrinks the window"). The hero is sized by `aspect-ratio`        */
/* instead of viewport height, so it scales proportionally with the      */
/* window's WIDTH and never has to fill the screen top-to-bottom.        */
/*                                                                       */
/* `position: sticky` (2026-09-13, Matt's later follow-up call: "can we  */
/* still stick the banner to the top of the webpage and have the bottom  */
/* part scroll over top of it?") -- different from the old `fixed` setup */
/* in one key way: `fixed` forces the element's SIZE to be computed      */
/* from the viewport (which is why it needed `height: calc(100vh -      */
/* 72px)` and a matching spacer div to fake scroll distance). `sticky`   */
/* keeps the element's normal, in-flow size -- still driven by its own   */
/* `aspect-ratio` below, so the width-based scaling still works -- and   */
/* just pins it to `top: 72px` (right under the fixed header) once the   */
/* page scrolls that far, while the space it would have occupied stays   */
/* reserved in the document. That reserved space is exactly what lets    */
/* .rc-hero-content (opaque background, higher z-index, right after it   */
/* in the HTML) scroll up and visually cover the pinned banner once the   */
/* user has scrolled roughly the banner's own height -- no spacer needed  */
/* this time, sticky's reserved space does that job on its own.          */
/* `margin-top: 70px` still clears the fixed header for the banner's      */
/* normal (not-yet-stuck) position; `top: 70px` is what it sticks to      */
/* once scrolled -- same 70px both times since that's the header's own    */
/* height either way (locked at 70px, 2026-09-18). */
.rc-hero {
  position: sticky;
  top: 70px;
  margin-top: 70px;
  width: 100%;
  /* banner.jpg's own pixel ratio (2:1 landscape) -- sizing the box off   */
  /* the image's real proportions, rather than a fixed height, is what   */
  /* lets it scale cleanly at any window width instead of ever being     */
  /* stretched or letterboxed. */
  aspect-ratio: 2 / 1;
  z-index: 1;
  background-image: url('../assets/images/banner.jpg'); /* relative to THIS file (css/style.css), not the page -- assets/images/ is a sibling of css/, not a child of it */
  background-size: cover;
  /* left center, not plain center (2026-09-08, Matt's report: "the text on
     the left side keeps getting cut off when it gets pushed beyond the
     border of the window"). banner.jpg has its own text baked into the
     left side of the photo -- with `center`, `cover` crops evenly off
     BOTH edges as the window narrows, so the left edge (and that text
     with it) creeps further left out of frame the same amount the right
     edge does. Anchoring the crop to `left` instead means all the
     narrowing crops off the right side only; the left edge of the image,
     text included, stays pinned to the left edge of the window at every
     width until the image runs out of room and the portrait swap below
     takes over instead. */
  background-position: left center;
  background-repeat: no-repeat;
  background-color: var(--rc-carbon);
}
/* Portrait-swap image REMOVED (2026-09-13, Matt's follow-up call: "we can
   get rid of the index page using a different banner for portrait mode
   now that we have a scaling horizontal banner with text that also
   scales"). This used to swap in a dedicated banner-portrait.jpg below
   an aspect-ratio: 2/3 window threshold, back when the hero was sized
   off the VIEWPORT (needing a differently-cropped image once the window
   got too tall-and-narrow for the landscape crop to read well). Now that
   .rc-hero is sized off its own aspect-ratio (2:1) and scales smoothly
   with the window's WIDTH -- and the overlay text scales right along
   with it -- the single landscape banner.jpg holds up at every window
   shape on its own, so the second image and the swap rule are no longer
   needed. banner-portrait.jpg itself was left alone in assets/images/ in case
   it's wanted again later; only the CSS rule that referenced it is
   gone. */
/* Small watermark badge, bottom-right corner of the hero. .rc-hero is
   `position: sticky`, which is itself a positioning context (same as
   `relative` would be), so this can sit absolute against it directly
   with no extra wrapper needed.

   Fluid now, same clamp() approach as the hero text (2026-09-13, Matt's
   follow-up call: "make the Race Club logo in the bottom right also
   scale with the image but make it scale towards the bottom right of
   the image so it stays locked into that part of the banner") -- was a
   flat 52px with a single 600px-breakpoint jump to 38px. `bottom`/
   `right` are themselves fluid too, not just `height`: shrinking a
   bottom/right-anchored element by height ALONE (leaving bottom/right
   fixed) would already look reasonably anchored, but scaling its inset
   from the corner down in step with its own size is what actually
   reads as "the badge scales toward that corner" rather than just
   "the badge gets smaller while floating at a fixed distance from it" --
   same 360px-to-1600px range as everything else on this component. */
.rc-hero-badge {
  position: absolute;
  /* Shifted up 35px and left 35px (2026-09-24, Matt's ask) -- same clamp
     slope as before, just every number in it (min/preferred-constant/max)
     bumped by 35 so the badge moves by exactly 35px at every viewport
     width instead of only at one breakpoint. */
  bottom: clamp(49px, 46.68px + 0.65vw, 57px);
  right: clamp(49px, 46.68px + 0.65vw, 57px);
  height: clamp(38px, 33.94px + 1.13vw, 52px);
  width: auto;
  z-index: 2;
}
/* Phone (2026-09-27, Matt's ask: "the Race Club logo that resides in the
   lower right corner needs to shrink by 1/2 and move much closer to the
   corner, it currently is sitting too high and too much left") -- the
   clamp() above is tuned for the 360px-1600px desktop/tablet range and
   still reads oversized/too far from the corner at true phone widths, so
   this overrides both the size and the inset directly instead of
   extending the clamp's low end further. Roughly half the clamp's own
   height range, and a much tighter corner inset than the clamp ever
   reaches. */
@media (max-width: 640px) {
  .rc-hero-badge {
    height: 22px;
    /* Pulled in further (2026-09-27 second follow-up, Matt's ask: "the
       Race Club logo... needs to move a closer to the corner than where
       it's currently at") -- 10px -> 6px on top of the first pass.
       Eased back out slightly (2026-09-29, Matt's ask: "move the Race
       Club logo graphic... up SLIGHTLY and left SLIGHTLY... just add a
       little more gap to the logo and the edges of the image") -- 6px
       was sitting flush enough against the corner to read cramped;
       12px gives it a bit of breathing room without undoing the
       "much closer to the corner" call from the pass before. */
    bottom: 12px;
    right: 12px;
  }
}
/* Tablet (2026-09-27, Matt's ask: "on tablet... the logo can remain the
   same size but it should move 1/2 the distance closer to the right edge
   and bottom from where it is currently") -- size is untouched (still
   inherits the clamp() above), only the inset is roughly halved.
   Upper bound raised 820px -> 1024px (2026-09-27 third follow-up, same
   iPad Pro catch as .rc-header-leaguehub-badge above) -- an iPad Pro's
   portrait viewport (834px/1024px) is wider than a regular iPad's, so it
   was missing this override entirely and falling back to the desktop
   clamp(). */
@media (min-width: 641px) and (max-width: 1024px) {
  .rc-hero-badge {
    /* Pulled in further (2026-09-27 second follow-up, same ask as the
       phone override above) -- 26px -> 14px, about half again. */
    bottom: 14px;
    right: 14px;
  }
}
/* Hero overlay text -- "YOUR CAREER" / "YOUR LEGACY" plus a small all-caps
   tagline, middle-left over the hero photo (2026-09-13, Matt's call).
   Needs no extra positioning wrapper: .rc-hero is already `position:
   sticky`, which is itself a positioning context, same reason
   .rc-hero-badge above can sit `position: absolute` directly against it.
   Font treatment matches every h1-h4 and .rc-eyebrow on the site --
   var(--rc-font-heading), uppercase, bold -- rather than a one-off font,
   per Matt's call to keep this matching the rest of the site's type
   instead of introducing a second display face. */
.rc-hero-text {
  position: absolute;
  top: 50%;
  left: 0;
  /* Above dead-center (2026-09-13, Matt's follow-up call) -- stacked onto
     the same translateY that centers the block, rather than a separate
     top offset, so it stays exactly centered-then-shifted at every
     viewport height. The offset itself is now fluid too (2026-09-13,
     Matt's later follow-up: "make sure the text is scaling from the
     same vertical point between all text fields so it scales at the
     same point and looks the same when shrunk") -- 20px at 360px wide,
     50px at 1600px and up, same 360-1600 range as every other clamp()
     on this component. Before this it was a flat 50px at every width,
     which on a short, shrunk block reads as a much bigger jump above
     center than the same 50px does on a tall, full-size block -- that
     mismatch was what made the block's vertical anchor point drift as
     the window resized. */
  transform: translateY(calc(-50% - clamp(20px, 11.29px + 2.42vw, 50px)));
  z-index: 2;
  /* Fluid instead of two fixed breakpoints (2026-09-13, Matt's follow-up
     call: "make it scale smoothly as the window collapses") -- clamp()
     between a 360px phone and a 1600px desktop, a straight linear ramp
     in between, no jump at any particular width. Shifted 25px closer to
     the edge (2026-09-13, second follow-up: "reduce the padding to the
     left side... by 25px"), then another 10px (2026-09-13, third
     follow-up: "move all text over to the left 10px") -- 125px at
     1600px and up (was 160px originally), same slope throughout, just
     moved closer to the window edge at every width each time.
     Floor raised to 30px, not 0px (2026-09-13, Matt's follow-up calls:
     first "keep the padding on the left side of the image so the text
     doesn't shrink past the edge and get cut off", then "have it bottom
     out at 10px padding on the left side instead") -- .rc-hero-title-shift
     below pulls YOUR CAREER and the subtitle a further FIXED 20px left
     of whatever this padding-left computes to, so once this hit its old
     0px floor below ~640px wide, those two lines were landing at -20px
     -- past the hero's own left edge and clipped off-screen. A 30px
     floor here (20px of shift + Matt's requested 10px of breathing
     room) guarantees that shifted position never goes below 10px,
     whatever the window width. This affects EVERY line in .rc-hero-text
     equally (YOUR CAREER, YOUR LEGACY, and the subtitle all share this
     one padding-left); .rc-hero-title-shift below is the separate,
     additional offset that pulls just two of those three lines further
     left still. */
  padding-left: clamp(30px, -50.48px + 10.97vw, 125px);
  max-width: 100%;
}
.rc-hero-title {
  font-family: var(--rc-font-heading);
  /* Same fluid approach as padding-left above: 24px at 360px wide, 80px
     at 1600px and up. */
  font-size: clamp(24px, 7.74px + 4.52vw, 80px);
  font-weight: 800;
  font-style: italic;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--rc-white);
  margin: 0;
}
/* Left-justified (2026-09-13, Matt's follow-up call) -- YOUR CAREER and
   YOUR LEGACY both sit flush against .rc-hero-text's own left padding
   now, replacing the earlier staggered "CAREER offset inward" treatment. */
.rc-hero-title-accent { color: var(--rc-red); }
/* Shifted 20px left of the shared padding-left (2026-09-13, Matt's
   follow-up call: "move the YOUR CAREER and subtitle to the left 20px.
   Leave YOUR LEGACY where it's at") -- applied to just the first title
   line and the subtitle, not .rc-hero-title as a whole, so YOUR LEGACY
   stays flush with .rc-hero-text's own padding-left while these two
   pull 20px further toward the window edge. A fixed px offset (not a
   clamp()) since Matt asked for a flat 20px, not a value that scales
   with viewport width like the padding-left/font-size clamps above. */
.rc-hero-title-shift {
  margin-left: -20px;
}
.rc-hero-subtitle {
  font-family: var(--rc-font-heading);
  /* Widened again (2026-09-13, Matt's follow-up call: "the subtitle...
     still isn't changing size like the heading text above it") -- the
     previous 18px-to-25px range only shrank by 28% end to end, next to
     invisible compared to the title's dramatic 24px-to-80px swing (a
     70% shrink), so it looked static by comparison even though it WAS
     technically scaling. Now matches the title's own shrink RATIO
     (min is 30% of max on both): 8px at 360px wide, 25px at 1600px and
     up, so the subtitle visibly scales in step with the title instead
     of barely moving next to it. */
  font-size: clamp(8px, 3.06px + 1.37vw, 25px);
  /* Thin, not bold (2026-09-13, Matt's follow-up call) -- contrasts
     against the bold 800-weight title lines above it. */
  font-weight: 300;
  font-style: italic;
  /* Widened from 0.1em (2026-09-13, Matt's follow-up call: "add a little
     extra spacing between all the letters in the subtitle"). */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rc-white);
  /* Fluid now too, same reason as the block's own vertical offset above
     (2026-09-13, Matt's follow-up: "scaling from the same vertical
     point... looks the same when shrunk") -- 12px at 360px wide, 24px
     at 1600px and up. Was a flat 24px at every width, which meant the
     gap between YOUR LEGACY and the subtitle stayed full-size even as
     the text around it shrank, throwing off the block's proportions at
     narrow widths. */
  margin-top: clamp(12px, 8.52px + 0.97vw, 24px);
}
/* Red underline spanning just "RACE - EARN - PROGRESS" (2026-09-13,
   Matt's follow-up call) -- stops short of " - BE REMEMBERED", which
   stays plain white text with no line under it. border-bottom instead
   of text-decoration so the line's thickness/color/gap-from-text are
   all controllable independently of the italic subtitle font. Both the
   thickness and the gap are now fluid too (2026-09-13, Matt's follow-up
   call: "make sure the subtitle and line also scales with the window
   size change") -- same 360px-to-1600px clamp() range as the rest of
   the hero text, so the line doesn't stay a fixed pixel weight while
   the subtitle text it sits under shrinks and grows around it. */
.rc-hero-subtitle-underline {
  border-bottom: clamp(1px, 0.71px + 0.08vw, 2px) solid var(--rc-red);
  padding-bottom: clamp(2px, 1.42px + 0.16vw, 4px);
}
/* Was var(--rc-white), the same pure white as .rc-card/.rc-panel/
   .rc-highlight-card sit on top of -- since .rc-site-footer (like every
   other page's) has no background of its own and just shows through
   whatever it's sitting on, that made index.html's footer read pure
   white while every other page's footer (sitting directly on <body>,
   which is var(--rc-offwhite)) reads off-white -- a visible mismatch
   scrolling from one page to the next. Matched to --rc-offwhite here
   (2026-09-01, Matt's call) so the index page's background -- footer
   included -- is the same color the rest of the site already uses;
   every card/section on this page (.rc-highlight-card, .rc-tier-card,
   etc.) already sets its own explicit white background for contrast
   against the page, same "white card on off-white page" pattern
   Account.html's own .rc-panel/.rc-dash-card already establishes, so
   nothing else needed to change for this. */
.rc-hero-content {
  position: relative;
  z-index: 2;
  background: var(--rc-offwhite);
}
.rc-landing-inner { max-width: 960px; margin: 0 auto; padding: 56px 24px; }

/* Discord community CTA strip (2026-09-24, Matt's ask) -- sits between
   "What Is Race Club" and the "Why Race Club" section, a dark full-width
   band so it reads as its own moment rather than another paragraph.
   Redesigned 2026-09-27 (Matt's ask: comply with Discord's brand
   guidelines) -- a real Blurple (#5865F2, Discord's documented primary
   color) pill button carries the actual Discord branding; the eyebrow and
   heading around it stay in Race Club's own red/heading-font treatment so
   the strip still reads as this site's, not Discord's. */
.rc-discord-cta { background: var(--rc-carbon); padding: 48px 24px; text-align: center; }
.rc-discord-cta-inner { max-width: 560px; margin: 0 auto; }
.rc-discord-cta-heading {
  font-family: var(--rc-font-heading);
  font-size: 23px;
  color: var(--rc-white);
  margin: 0 0 10px;
  text-wrap: balance;
}
.rc-discord-cta-sub { font-size: 14px; color: #b8bcc2; margin: 0 0 24px; }
/* The button itself: solid Blurple, white mark + label -- generous
   padding keeps clear space around the logo (Discord's guideline), and
   height-only sizing on the logo (width: auto below) means it's never
   stretched or squashed. */
.rc-discord-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #5865F2;
  color: var(--rc-white);
  text-decoration: none;
  font-family: var(--rc-font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 15px 28px;
  border-radius: 999px;
  transition: background 0.12s ease, transform 0.12s ease;
}
.rc-discord-cta-btn:hover { background: #4752c4; color: var(--rc-white); transform: translateY(-1px); }
.rc-discord-cta-logo { height: 22px; width: auto; flex: none; }
@media (max-width: 560px) {
  .rc-discord-cta-heading { font-size: 19px; }
  .rc-discord-cta-btn { padding: 13px 22px; font-size: 13px; }
}
.rc-landing-inner h2 { font-size: 26px; }
.rc-landing-tagline { font-size: 16px; line-height: 1.6; color: var(--rc-steel); max-width: 680px; margin-top: 14px; }

/* Small uppercase red kicker label used above a couple of section
   headings on this page (e.g. "The Experience", "The Ladder") -- a cheap
   way to add a bit of editorial structure/depth without another whole
   heading level, and it's the ONE place red gets used as a label color
   outside buttons/links, which keeps it feeling like an accent rather
   than overuse. */
.rc-eyebrow {
  font-family: var(--rc-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-red);
  margin-bottom: 8px;
}

/* -------------------------------------------------------------------- */
/* "Meet The Grid" teaser (2026-09-01) -- real Season 1 team cards, see  */
/* index.html's own comment above the section for the full rationale.   */
/* Restored to this exact original rule set on 2026-09-13 (Matt's call,  */
/* after two reworks that didn't match what he actually wanted). Its own */
/* look, not a reuse of .rc-highlight-card, per Matt's ask that the      */
/* content read as "unique" -- a manufacturer logo + team identity       */
/* header (mirroring how Current Seat/team-select already pair a logo   */
/* with a team name elsewhere on the site), a thin red rule underneath   */
/* standing in for a start/finish line, then the hype line.             */
/* -------------------------------------------------------------------- */
/* One column of per-class groups (2026-09-20) -- was a single flat
   .rc-grid-teaser-row grid holding every team mixed together; split into
   one group per class so each class's own cards start a fresh row (see
   buildClassGroup_, index.html) and a rotated class label can sit next
   to it. margin-top (was on .rc-grid-teaser-row itself) moved up here. */
.rc-grid-teaser-groups { display: flex; flex-direction: column; gap: 36px; margin-top: 32px; }
.rc-grid-teaser-class-group { position: relative; }
.rc-grid-teaser-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
/* Rotated class-name label, forced to the left of its row without
   consuming any of the row's own grid space (2026-09-20, Matt's ask: "to
   the left of each row, please have a 90 degree ccw label of which class
   that row of teams belongs to... don't move the cards in any further to
   fit this label in, force the label to the left of the 1st card"). Sits
   just inside .rc-landing-inner's own 24px side padding via a negative
   left offset -- absolutely positioned (out of flow) so it never
   consumes grid space.
   2026-09-20 follow-up (Matt's catch): originally one label spanned the
   whole group's height (top:0/bottom:0), so a class wrapping into 2+ rows
   only got ONE label, centered against the group as a whole rather than
   either row. Now layoutClassLabels_ (index.html) measures each actual
   visual row and appends one label per row, setting top/height inline in
   px to match that row exactly -- so every row a class wraps into gets
   its own label, vertically centered against that row's own cards. No
   default top/bottom here any more; JS always sets both before a label is
   ever appended. */
.rc-grid-teaser-class-label {
  position: absolute;
  left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--rc-font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-silver-dark);
  white-space: nowrap;
  pointer-events: none;
}
.rc-grid-teaser-card {
  background: var(--rc-white);
  border: 1px solid var(--rc-silver);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(23, 23, 23, 0.05);
  opacity: 0;
  transform: translateY(18px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
    opacity 0.4s ease, transform 0.4s ease;
}
.rc-grid-teaser-card.rc-grid-teaser-visible {
  opacity: 1;
  transform: translateY(0);
}
.rc-grid-teaser-card.rc-grid-teaser-visible:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(23, 23, 23, 0.12);
  border-color: var(--rc-carbon);
}
@media (prefers-reduced-motion: reduce) {
  .rc-grid-teaser-card {
    transition: none;
    opacity: 1;
    transform: none;
  }
}
.rc-grid-teaser-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--rc-red);
}
/* Fixed width AND height (not max-width/max-height) so object-fit:contain
   actually letterboxes -- a wide logo that hits the width limit first gets
   even padding added above/below automatically to fill out the same 60px
   slot every card reserves, so every card's logo sits on the same
   baseline no matter its own aspect ratio (Matt's call, 2026-09-02). */
.rc-grid-teaser-logo { flex: none; width: 128px; height: 60px; object-fit: contain; }
.rc-grid-teaser-identity { min-width: 0; }
.rc-grid-teaser-name {
  font-family: var(--rc-font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--rc-carbon);
  line-height: 1.25;
}
.rc-grid-teaser-sub { font-size: 12.5px; color: var(--rc-steel); margin-top: 2px; }
.rc-grid-teaser-line { font-size: 13.5px; line-height: 1.55; color: var(--rc-steel); margin: 0; }
.rc-grid-teaser-footnote {
  margin-top: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--rc-steel);
}

/* -------------------------------------------------------------------- */
/* "Why Race Club" highlight cards                                      */
/*                                                                       */
/* Six short claims, icon + headline + one line each, instead of a wall */
/* of paragraph copy. Depth comes from a soft resting shadow that grows */
/* on hover plus a small lift (translateY), not from color -- keeps the */
/* section feeling calm/professional rather than busy, per Matt's "no   */
/* tacky checkered flags" note; the checker accent is intentionally not */
/* used anywhere in this section or the two below it.                   */
/* -------------------------------------------------------------------- */
.rc-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.rc-highlight-card {
  background: var(--rc-white);
  border: 1px solid var(--rc-silver);
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(23, 23, 23, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.rc-highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(23, 23, 23, 0.12);
  border-color: var(--rc-carbon);
}
.rc-highlight-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--rc-carbon), #2c2c2c);
  color: var(--rc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.rc-highlight-icon svg { width: 22px; height: 22px; }
.rc-highlight-card h3 { font-size: 15px; letter-spacing: 0.03em; }
.rc-highlight-card p { font-size: 13.5px; color: var(--rc-steel); margin-top: 8px; margin-bottom: 0; line-height: 1.55; }

/* -------------------------------------------------------------------- */
/* "What You'll Need" (2026-09-18) -- full-bleed dark band, deliberately */
/* not another row of white icon-top cards like "Why Race Club" right   */
/* above it. Plain icon-left list with hairline dividers instead of     */
/* boxed/shadowed cards, and an outlined (not filled) icon treatment --*/
/* the composition itself reads as different, not just the color.      */
/* -------------------------------------------------------------------- */
.rc-needs-section {
  background: var(--rc-carbon);
}
.rc-needs-section h2 { color: var(--rc-white); }
.rc-needs-section .rc-landing-tagline { color: rgba(255, 255, 255, 0.7); }
.rc-needs-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 32px;
}
.rc-needs-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.rc-needs-item + .rc-needs-item { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.rc-needs-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--rc-red);
  color: var(--rc-red);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-needs-icon svg { width: 20px; height: 20px; }
.rc-needs-body h3 { font-size: 15px; letter-spacing: 0.03em; color: var(--rc-white); }
.rc-needs-body p { font-size: 13.5px; color: rgba(255, 255, 255, 0.65); margin-top: 8px; margin-bottom: 0; line-height: 1.55; }
/* "our Discord server" inline link (2026-09-24, Matt's ask) -- the site's
   one red accent against this section's dim body text, same underline-
   on-hover convention as the rest of the site's text links. */
.rc-needs-body p a { color: var(--rc-red); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.12s ease; }
.rc-needs-body p a:hover { text-decoration-color: var(--rc-red); }
/* Whole Discord item is a link now (2026-09-27, Matt's ask: "make sure the
   Discord section in 'WHAT YOU'LL NEED' links appropriately to the invite
   link, same as the blurple button, a few sections above") -- the item
   used to only carry a link on a few words buried mid-sentence; now the
   entire card (icon, heading, and body) shares the same href/target/rel
   as .rc-discord-cta-btn above it, same destination, same new-tab
   behavior, just a much bigger, more obvious tap target. `a.rc-needs-item`
   needs the reset below since .rc-needs-item's own display:flex/padding/
   border rules (above) don't touch color or cursor, which an anchor
   otherwise inherits browser defaults for. */
a.rc-needs-item {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
a.rc-needs-item:hover { background: rgba(255, 255, 255, 0.06); }
@media (max-width: 860px) {
  .rc-needs-list { grid-template-columns: 1fr; }
  .rc-needs-item { border-left: none !important; }
  .rc-needs-item + .rc-needs-item { border-top: 1px solid rgba(255, 255, 255, 0.12); }
}

/* -------------------------------------------------------------------- */
/* "How It Works" steps (2026-09-13, then reworked same day per Matt's  */
/* "no containers, just circles with numbers" call) -- deliberately NOT */
/* a card component: no background, border, or shadow. Just a numbered  */
/* red circle, a headline, and one line underneath, open against the    */
/* page itself. Reads as a sequence rather than another set of claim    */
/* cards, and visually distinct from "Why Race Club"/"What You'll Need" */
/* right above and below it. 4/2/1 column breakpoints match the same    */
/* pattern .rc-tier-row and .rc-details-row already use elsewhere.      */
/* -------------------------------------------------------------------- */
.rc-steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 32px; }
@media (max-width: 900px) {
  .rc-steps-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .rc-steps-row { grid-template-columns: 1fr; }
}
.rc-step-card { text-align: center; }
.rc-step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rc-red);
  color: var(--rc-white);
  font-family: var(--rc-font-heading);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.rc-step-card h3 { font-size: 15px; letter-spacing: 0.03em; }
.rc-step-card p { font-size: 13.5px; color: var(--rc-steel); margin-top: 8px; margin-bottom: 0; line-height: 1.55; }

/* -------------------------------------------------------------------- */
/* Mid-page banner (assets/images/banner-highlights.jpg)                       */
/*                                                                       */
/* Plain full-bleed image in normal document flow -- NOT the top hero's */
/* fixed/spacer scroll-cover trick. It's meant to be scrolled past like */
/* any other section, sitting between "Why Race Club" and "Class Tiers" */
/* since that's the natural pivot from "here's the career feeling" to   */
/* "here's the literal ladder you climb." A dark gradient overlay keeps */
/* the centered headline readable regardless of what's in the photo.    */
/* -------------------------------------------------------------------- */
.rc-mid-banner {
  position: relative;
  width: 100%;
  min-height: 340px;
  height: 46vh;
  background-image: url('../assets/images/banner-highlights.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--rc-carbon);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-mid-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 23, 23, 0.25), rgba(23, 23, 23, 0.6));
}
.rc-mid-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 0 24px;
  text-align: center;
}
.rc-mid-banner-inner h2 { color: var(--rc-white); font-size: 32px; }
.rc-mid-banner-inner p { color: #e6e6e6; font-size: 15px; line-height: 1.6; margin-top: 12px; margin-bottom: 0; }

/* -------------------------------------------------------------------- */
/* Class Tiers — dark gradient cards, same visual language as the class */
/* ladder in the v0.3 system map, re-colored to this site's own palette */
/* (bronze/steel/gold already existed as accent colors here; "platinum" */
/* is new, added for LMP3, sitting tonally between silver and steel so  */
/* it reads as a distinct rung without introducing an off-palette hue). */
/* Ordered GT3 -> LMP3 -> LMP2 -> Hypercar on purpose now (was Hypercar- */
/* first) so it reads as an actual climb, not a ranked list.            */
/* -------------------------------------------------------------------- */
/* Grid, not flex-wrap -- with 4 cards, flex-wrap left a leftover 4th
   card stretched full-width alone on its own row at desktop widths
   instead of sitting evenly alongside the other three. Explicit 4/2/1
   column breakpoints (same pattern as .rc-details-row elsewhere in this
   file) keep all 4 cards evenly sized at every width, rather than
   auto-fit/minmax's fractional-fit math leaving an odd one out. */
/* 5 columns now (2026-09-20, LMGTE card added) -- was repeat(4, 1fr) with
   900px/560px breakpoints; added a 1024px breakpoint to drop to 3 columns
   before 5 get too cramped, otherwise unchanged. */
.rc-tier-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 28px; }
@media (max-width: 1024px) {
  .rc-tier-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .rc-tier-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .rc-tier-row { grid-template-columns: 1fr; }
}
.rc-tier-card {
  min-width: 0;
  text-align: center;
  color: var(--rc-white);
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(23, 23, 23, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rc-tier-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(23, 23, 23, 0.24); }
.rc-tier-card h3 { font-size: 17px; color: var(--rc-white); }
.rc-tier-card p { font-size: 13px; color: rgba(255, 255, 255, 0.78); margin-top: 10px; }
/* Difficulty label (2026-09-13) -- replaces the old "Season 1"/"Future
   Season" .rc-tier-label plus the .rc-tier-gate money-gate footer, now
   that the page no longer gates classes by affordability. One label per
   card instead of two, so it just takes over the old gate's footer
   position/border-top treatment, colored to match each tier's accent. */
.rc-tier-difficulty {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--rc-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* LMGTE (2026-09-20) -- matches --rc-class-lmgte (#e0791b), the same
   orange used for this class's pill everywhere else on the site. */
.rc-tier-orange { background: linear-gradient(160deg, #e0791b, #a8570f); }
.rc-tier-orange .rc-tier-difficulty { color: #ffdcb0; }
.rc-tier-bronze { background: linear-gradient(160deg, #a05a2c, #7c4420); }
.rc-tier-bronze .rc-tier-difficulty { color: #f0c9a3; }
.rc-tier-platinum { background: linear-gradient(160deg, #7d92a3, #4f6373); }
.rc-tier-platinum .rc-tier-difficulty { color: #e3ebf0; }
.rc-tier-silver { background: linear-gradient(160deg, #536575, #313d47); }
.rc-tier-silver .rc-tier-difficulty { color: #d8dde1; }
.rc-tier-gold { background: linear-gradient(160deg, #1f1f1f, #000000); }
.rc-tier-gold .rc-tier-difficulty { color: #e6c15c; }

/* -------------------------------------------------------------------- */
/* Closing CTA band — dark bookend to the mid-banner/tier cards above   */
/* it, last stop before the footer.                                     */
/* -------------------------------------------------------------------- */
.rc-cta-section {
  background: var(--rc-carbon);
  text-align: center;
}
.rc-cta-inner { padding: 64px 24px; }
.rc-cta-inner h2 { color: var(--rc-white); font-size: 26px; }
.rc-cta-inner p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin: 14px auto 0;
}
.rc-cta-btn {
  display: inline-block;
  width: auto;
  margin-top: 24px;
  padding: 14px 36px;
}

/* Renamed from .rc-landing-footer -- this now runs on every page (Matt's
   call), not just index.html where it started, so "landing" stopped being
   an accurate name. The footer BAR itself (background + border-top) still
   spans the full page width -- only the text inside is narrowed, via
   .rc-site-footer-inner below.
   background: var(--rc-white) added 2026-09-21 (Matt's ask: "make the
   foot background the same background color as the navbar background...
   I think it's white") -- previously unset here, so the footer just
   showed through body's own var(--rc-offwhite), reading slightly gray
   against the pure-white .rc-fixed-header up top. league.css's old
   body.rc-league-page .rc-site-footer override (which forced white just
   on that one page, since its body is dark) is now redundant and has
   been removed -- this is the sitewide default every page gets. */
.rc-site-footer {
  background: var(--rc-white);
  text-align: center;
  padding: 22px 24px;
  font-size: 12px;
  color: var(--rc-steel);
  border-top: 1px solid var(--rc-silver);
}
/* 2026-09-20, Matt's ask: "the copyright at the bottom to not span the
   whole width of the website but instead go as wide as the meet the grid
   cards" -- and his follow-up catches: the footer BAR should still run
   full width, only the note itself should narrow (so .rc-site-footer
   above stays full-bleed, this inner wrapper is what's capped), and the
   note should actually be as wide as league.html's Standings container
   (.rcl-main, 1180px), not the 960px .rc-landing-inner width it started
   at -- so this wrapper's max-width now matches .rcl-main instead. Added
   around each page's footer text/button (see index.html etc.). */
.rc-site-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
}
/* .rc-site-footer-legal split out from the old single-paragraph footer
   2026-09-21 (originally paired with a .rc-site-footer-copyright line
   below it -- "Copyright Race Club 2026..." / "Created and developed with
   the help of Claude AI." -- which Matt asked removed from every footer
   the same day, so this is now the footer's only line). Kept as its own
   class rather than folded back into .rc-site-footer-inner in case a
   second line comes back later. */
/* Footer "Legal Disclaimer" link (added 2026-09-20) -- a plain button
   styled as inline text so it sits naturally in the footer's copyright
   sentence rather than reading as a separate nav element; underlined red
   like the site's other text links (.rc-social-chip) so it's still
   obviously clickable against the muted footer text around it. */
.rc-footer-legal-link {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  font: inherit;
  font-size: 12px;
  color: var(--rc-red);
  text-decoration: underline;
  cursor: pointer;
}
.rc-footer-legal-link:hover { color: var(--rc-red-dark); }
/* Legal disclaimer modal body typography (added 2026-09-20) -- the modal
   shell itself (.rc-modal/.rc-modal-head/.rc-modal-body) is the same
   generic one every popup on the site uses; this just styles the
   section headings/paragraphs of the disclaimer text sitting inside it. */
.rc-legal-text h4 {
  margin: 18px 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rc-carbon);
}
.rc-legal-text h4:first-of-type { margin-top: 0; }
.rc-legal-text p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--rc-steel); }
.rc-legal-updated { font-size: 11px; color: var(--rc-steel); margin: 0 0 14px; font-style: italic; }

/* -------------------------------------------------------------------- */
/* Generic modal (Manage Users' Edit action) — centered card over a      */
/* dimmed backdrop, in place of the old click-to-expand-in-place panel.  */
/* -------------------------------------------------------------------- */
.rc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 23, 23, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2000;
}
/* Center popups over the content area, not the whole screen (2026-09-26,
   Matt's ask: "take the sidebar out of the equation" so every popup reads
   as centered to the right of it instead of dead-center of the browser
   window). Desktop only (matches .rc-sidebar's own 768px breakpoint --
   below that the sidebar is hidden behind the hamburger menu, so there's
   nothing to offset for). Backdrop still dims the sidebar too; only the
   popup's centering axis shifts, via extra left padding equal to the
   sidebar's 220px width plus the same 24px breathing room the backdrop
   already gives every other edge. */
@media (min-width: 769px) {
  .rc-modal-backdrop { padding-left: 244px; }
  /* Opt back out of the sidebar-offset centering above (2026-09-27,
     added for the Legal Disclaimer modal on league.html/index.html --
     see rcOpenLegalModal's comment, js/header.js). Only a modal that
     explicitly knows there's no sidebar to offset for adds this class;
     every other .rc-modal-backdrop keeps the offset unchanged. */
  .rc-modal-backdrop.rc-modal-backdrop-centered { padding-left: 24px; }
}
.rc-modal {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--rc-white);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(23, 23, 23, 0.25);
}
.rc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rc-silver);
  position: sticky;
  top: 0;
  /* z-index (2026-09-23, Matt's catch: "when scrolling up, I shouldn't
     see the list behind the CHOOSE YOUR TEAM header. It should be
     opaque.") -- this was already sticky with a solid white background,
     but with no z-index a sticky element has no stacking priority over
     later-in-DOM body content once it's pinned mid-scroll, so a card/row
     that scrolls up underneath it could paint on top instead of behind
     it. A plain z-index above the body's own stacking level fixes it for
     every popup on the site, not just this one. */
  z-index: 5;
  background: var(--rc-white);
  border-radius: 10px 10px 0 0;
}
.rc-modal-close {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: none;
  background: none;
  color: var(--rc-steel);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.rc-modal-close:hover { background: var(--rc-offwhite); color: var(--rc-carbon); }
/* Dimmed/unclickable while a save-in-progress state has the popup locked
   (2026-09-26, added for the Protests File/Edit/Withdraw in-flight work --
   the same X-dimming convention Finalize/Un-Finalize Results already
   applies via setFinalizeInProgress, now backed by a real CSS rule since
   none existed for this button before). */
.rc-modal-close:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.rc-modal-body { padding: 20px; }
/* Wider variant for content-heavy popups (currently just the Season
   Creation Wizard) -- the default 460px is right for a short form like
   Edit User, but far too narrow for a multi-page wizard with paired
   fields and per-race cards. Also used by the Season Format/Current Seat
   Info popups (2026-09-24) -- same 820px as league.html's own (non-wide)
   .rcl-modal-dialog, so the Season Format popup opens to the same width
   whether it's reached from Account.html or League Hub. */
.rc-modal-wide { max-width: 820px; }
/* Calendar popup only, 50px wider than the shared .rc-modal-wide (Matt's
   ask, 2026-09-24) -- see openCalendarModal, which adds this class
   alongside wide:true rather than changing .rc-modal-wide itself. */
.rc-modal-calendar-wide { max-width: 870px; }

/* Accent header variant -- opt-in via showModal(title, {accentHead:true}).
   Used by popups whose content reads as a full account-page "page" of its
   own (Season Format, Current Seat Info) rather than a short form, so
   their header matches the bold-uppercase / red-2px-underline treatment
   every other Account.html card and panel title already uses
   (.rc-dash-card-title, .rc-cal-season-head, etc.) instead of the plain
   small-text / thin-gray-line default every short form popup (Edit
   Profile, Add Track, ...) keeps unchanged. Compound-selected against
   .rc-modal-head for specificity, so it reliably wins over that class's
   own border-bottom regardless of source order. */
.rc-modal-head.rc-modal-head-accent { border-bottom: 2px solid var(--rc-red); }
.rc-modal-title-accent {
  margin: 0;
  font-family: var(--rc-font-heading);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rc-carbon);
}

/* Season Format popup -- group header pill + vertical list (2026-10-01,
   replacing the old bordered "bubble" stat tiles, Matt's ask: "remove the
   bubble data blocks in favor of this more traditional list format").
   .rc-seasonfmt-group-label is unchanged -- the same graphite pill this
   popup's "Season Format"/"Championship Points"/"Season Rules" headers
   (and, on the Calendar block below, its own group header) always used.
   The tiles that used to follow it are replaced by .rc-seasonfmt-list's
   plain label/value rows, built by buildSeasonFmtGroups_ (Account.html). */
.rc-seasonfmt-group { margin-top: 26px; }
.rc-seasonfmt-group:first-child { margin-top: 0; }
.rc-seasonfmt-group-label {
  display: inline-flex;
  align-items: center;
  /* Graphite fill (2026-09-24, Matt's ask) instead of the plain offwhite/
     silver-bordered pill every other group label on the site uses -- same
     dark-neutral token member badges use (--rc-graphite, see
     .rc-badge-graphite), white text for contrast against it. */
  background: var(--rc-graphite);
  color: var(--rc-white);
  border: 1px solid var(--rc-graphite);
  border-radius: 5px;
  padding: 3px 10px;
  font-family: var(--rc-font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* 6px, was 10px (2026-10-01, Matt's ask: "move the pills closer to the
     section they're labeling") -- paired with .rc-seasonfmt-list's own
     margin-top dropping to 0 the same day. */
  margin-bottom: 6px;
}
/* Season Format / Championship Points / Season Rules are each their own
   pill-headed .rc-seasonfmt-group now (2026-10-01 follow-up, Matt's ask:
   "Make CHAMPIONSHIP POINTS into a pill... add a SEASON RULES pill in the
   same style as SEASON FORMAT"), so .rc-seasonfmt-list only ever holds ONE
   pill section's own blocks at a time -- see buildSeasonFmtGroups_
   (Account.html) for how the sections themselves stack. */
.rc-seasonfmt-list { margin-top: 0; }
.rc-seasonfmt-block + .rc-seasonfmt-block { margin-top: 18px; }
/* Plain "Category: Value" line, left-aligned, NOT a two-column label/value
   layout (2026-10-01, Matt's catch: "I don't want the values to be on one
   side and the catagory on the other... category then a colon, then a
   space and then the value") -- a single text run per row, read top to
   bottom the way Matt's own spec was typed. */
.rc-seasonfmt-row {
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--rc-carbon);
}
.rc-seasonfmt-row-label { color: var(--rc-steel); font-weight: 600; }
.rc-seasonfmt-row-value { color: var(--rc-carbon); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Championship Points' own tier rows (Sprint/Medium/Long) don't use
   .rc-seasonfmt-row-value at all (2026-10-01, Matt's ask: "make the
   points... normal weight and keep the positions in front, bold") -- only
   the "Pn" position marker in front of each point value is bold; the
   point value itself inherits the row's own normal weight. */
.rc-seasonfmt-pos { font-weight: 700; color: var(--rc-carbon); }

/* Body scroll lock while ANY popup (showModal(), Account.html) is open --
   same iOS-Safari-safe pattern as .rc-scroll-locked (position: fixed, not
   just overflow: hidden, since plain overflow:hidden doesn't reliably
   stop touch-driven scrolling), but NOT scoped to a mobile media query
   like that one is, since a popup can open at any viewport width. The
   dynamic top offset that undoes the position:fixed jump is set/cleared
   by the JS (showModal()/its close()), not here. */
body.rc-modal-scroll-locked {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* -------------------------------------------------------------------- */
/* Season Creation Wizard (Account.html, openSeasonWizard()) — step      */
/* breadcrumb, page content, and a pinned Back/Next/Save & Close footer. */
/* -------------------------------------------------------------------- */
.rc-wizard-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rc-silver); }
.rc-wizard-step {
  font-family: var(--rc-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--rc-offwhite);
  color: var(--rc-steel);
}
.rc-wizard-step-active { background: var(--rc-red); color: var(--rc-white); }
.rc-wizard-step-done { background: var(--rc-carbon); color: var(--rc-white); }
/* Not-yet-reachable step -- dimmed and inert until Next successfully
   clears the current page's validation (Matt's call: pills "unlock" one
   at a time instead of being freely clickable ahead of where the admin
   actually is). */
.rc-wizard-step-locked { opacity: 0.35; cursor: default; }
.rc-wizard-content { max-height: 55vh; overflow-y: auto; padding-right: 4px; }
/* Blanket "shrink every text/number/select box" rule (Matt's call) --
   scoped to the wizard only so nothing outside it (Settings, Edit User,
   etc.) is affected. Individual fields override this inline with a
   smaller/larger max-width where a specific size was called out (Season
   Name/Password/Starting Balance at 1/4, the P1–P10 point cells staying
   full width) -- inline styles win over this class regardless of order. */
.rc-wizard-content input[type="text"],
.rc-wizard-content input[type="number"],
.rc-wizard-content input[type="password"],
.rc-wizard-content input[type="date"],
.rc-wizard-content input[type="time"],
.rc-wizard-content input[type="datetime-local"],
.rc-wizard-content select {
  max-width: 50%;
  height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}
/* Every wizField()-built field gets the SAME breathing room before it as
   .rc-field-pair gets (18px, collapsing with the field above's own
   margin-bottom rather than stacking) so the gap before a field is
   identical whether it's a solo field or a paired row -- this is what
   fixes the wizard's uneven spacing (notes sometimes tight against their
   box, sometimes floating a full row away). Hints themselves stay snug
   against their own field (see the sitewide .rc-hint margin-top:4px) and
   get a bit of bottom margin so there's still room before whatever's
   next, scoped to the wizard only (site-wide .rc-hint elsewhere, e.g.
   Settings, is untouched). */
.rc-wiz-field { margin-top: 18px; margin-bottom: 16px; }
.rc-wiz-field:first-child { margin-top: 0; }
.rc-wizard-content .rc-hint { margin-bottom: 16px; }
/* Paired row where EACH column carries its own label + field + hint
   (built by wizFieldPairRow()) instead of one hint floating below the
   whole row, unowned by either field -- this is the "why can't each have
   a note that lives directly underneath the box" fix. Reuses the same
   grid as .rc-field-pair; the columns are .rc-wiz-field so their hint
   spacing matches solo fields exactly. */
.rc-wiz-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 18px; }
.rc-wiz-field-pair:first-child { margin-top: 0; }
.rc-wiz-field-pair .rc-wiz-field { margin-top: 0; margin-bottom: 0; }
@media (max-width: 640px) {
  .rc-wiz-field-pair { grid-template-columns: 1fr; }
}
/* Four-column version (2026-09-02, the Wager form's Opponent/Race/
   Condition/Stake row -- Matt's call on exact widths: Opponent alone at
   1/4 width on its own row, then Race at 1/2 + Condition/Stake at 1/4
   each on the row below). Each field wrapper sets its own inline
   grid-column: span N (1 = a quarter, 2 = a half) rather than this class
   assuming a fixed shape, so the same row class covers both rows. */
.rc-wiz-field-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px; margin-top: 18px; }
.rc-wiz-field-row:first-child { margin-top: 0; }
.rc-wiz-field-row .rc-wiz-field { margin-top: 0; margin-bottom: 0; }
@media (max-width: 640px) {
  .rc-wiz-field-row { grid-template-columns: 1fr; }
  .rc-wiz-field-row .rc-wiz-field { grid-column: auto !important; }
}
/* Three-equal-column version (2026-09-08, the Protest form's Race/Lap
   Number/Infraction Type row and its Driver Involved 1/2/3 row) -- unlike
   .rc-wiz-field-row's 4-column grid with per-field spans, this is always
   exactly three equal columns, no spans needed. */
.rc-wiz-field-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; margin-top: 18px; }
.rc-wiz-field-row-3:first-child { margin-top: 0; }
.rc-wiz-field-row-3 .rc-wiz-field { margin-top: 0; margin-bottom: 0; }
@media (max-width: 640px) {
  .rc-wiz-field-row-3 { grid-template-columns: 1fr; }
}
.rc-wizard-subhead {
  font-family: var(--rc-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rc-red);
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rc-silver);
}
.rc-wizard-subhead:first-child { margin-top: 0; }
/* Plain divider between the round race cards and the Special Event cards
   (2026-09-27, Matt's ask: drop the "SPECIAL EVENTS" label and its "Fun
   races..." line, keep just the gray line with room around it) -- same
   line weight/color .rc-wizard-subhead's own border-bottom uses, just on
   its own with no label. */
.rc-wizard-divider { border: none; border-top: 1px solid var(--rc-silver); margin: 26px 0; }
.rc-wizard-race-card { margin-top: 12px; }
.rc-wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rc-silver);
}

/* Hard-stop validation ("every box has to be filled out" before Next
   advances -- Matt's call). A single invalid input gets the same red
   border/glow as the site's existing :focus state; a checkbox GROUP
   (e.g. "at least one class picked") has no single box to redden, so it
   gets a red left border on its wrapper instead. */
.rc-field-invalid, .rc-field-invalid:focus {
  border-color: var(--rc-red);
  box-shadow: 0 0 0 1px var(--rc-red);
}
/* Computed/inapplicable fields the admin can't type into -- a race's
   auto-calculated date (locked, Matt's call) and a class Season
   Registration Fee that
   doesn't apply this season (class or season box unchecked). Grayed out
   rather than merely disabled so it reads as "not editable" at a glance
   instead of just looking broken. */
.rc-field-locked, .rc-field-locked:disabled {
  background: var(--rc-offwhite);
  color: var(--rc-steel);
  cursor: not-allowed;
  opacity: 1;
}
/* Small inline label sitting next to a wizard field -- the day-of-week
   next to every date box, a timezone abbreviation next to real-world
   time fields, or "Sim Time" next to In-Game time fields (Matt's calls:
   "add the day of the week... for every date box", "make sure all times
   listed have a timezone behind it"). */
.rc-wiz-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--rc-steel);
  white-space: nowrap;
  flex-shrink: 0;
}
/* No negative margin here -- .rc-wizard-content sets overflow-y:auto,
   which per spec forces its overflow-x to compute as "auto" too (not
   "visible"), so anything pulled left of the box via negative margin
   gets silently clipped instead of overhanging into the gutter. Padding
   only, so the red accent stays inside the scroll container's own box. */
.rc-field-invalid-group {
  border-left: 3px solid var(--rc-red);
  padding-left: 10px;
}
@keyframes rc-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.rc-shake { animation: rc-shake 0.4s; }

/* -------------------------------------------------------------------- */
/* Account.html — branded "starting grid lights" loading indicator.      */
/* ".rc-inline-spinner-wrap" is the one loading+message style used       */
/* everywhere: the initial account load (static markup in <body>, right  */
/* of the sidebar in the normal main content flow), in-page first loads  */
/* like Admin/Data Management, and register.html's "already logged in,   */
/* redirecting" state. Previously the initial load used a separate       */
/* fixed, full-screen ".rc-loading-overlay" that dimmed the whole page   */
/* including the sidebar -- removed in favor of this same in-page        */
/* indicator (Matt's call), so the sidebar and header stay visible while */
/* the account loads instead of being washed out.                       */
/*                                                                       */
/* #rc-loading (the initial Account.html page load only -- not the       */
/* Data Management in-page state, which already sits under its own      */
/* heading, and not register.html's redirect state, which already lives */
/* inside .rc-auth-page's full-viewport centering) gets extra min-height */
/* so the lights sit closer to the middle of the page instead of        */
/* directly under the topbar (Matt's call).                             */
/*                                                                       */
/* Five lights, modeled on a real F1 start gantry: they light up red     */
/* one at a time left-to-right, all five hold lit for 1s once the last  */
/* one comes on, then every light cuts out together (the "lights out"    */
/* moment), stays dark for 1s, and the sequence repeats. Each light is   */
/* its own @keyframes rule sharing one 3.2s timeline so the on-times     */
/* stagger but the blackout instant lines up exactly across all five --  */
/* animation-delay can't do this alone since a delay would also push     */
/* back when THAT light cuts out, breaking the simultaneous "lights      */
/* out". The duplicated keyframe stops just before each color change     */
/* (e.g. "0%, 68.74%" then "68.75%, 100%") force an instant on/off cut   */
/* instead of the smooth color fade CSS would otherwise interpolate.     */
/* -------------------------------------------------------------------- */
.rc-inline-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 36px 46px;
  background: var(--rc-white);
  border: 1px solid var(--rc-silver);
  border-radius: 8px;
  width: fit-content;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  /* Same slight lift as .rc-dash-card (2026-08-30, Matt's call: "a global
     styling addition to all loading popups... a slight shadow behind them
     like the cards do") -- since this one rule backs every loading state
     sitewide (see the file comment above), this single line covers all of
     them at once rather than a per-usage patch. */
  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.10);
}
/* Inside a popup (the Season Wizard's loading states, the Data Management
   list popups) the modal card itself already reads as the container, so
   the spinner's own border is redundant double-framing -- drop it there
   (Matt's call). Page-level spinners (#rc-loading, Data Management's own
   in-page first-load state before this pass, etc.) keep the border above
   since they sit directly on the page background. The shadow added above
   follows the same rule (2026-08-30, Matt's call: "if there is no border
   around the loading sequence, don't add a shadow -- only when it's by
   itself") -- drop it here too, so a spinner inside an already-bordered
   container (the wizard, Data Management) never gets its own redundant
   shadow on top of the modal's. */
.rc-modal-body .rc-inline-spinner-wrap {
  border: none;
  box-shadow: none;
}
/* No more min-height:55vh -- that was stretching the card itself to fill
   most of the page. The card now sizes to its own content (the fit-
   content/max-width above) and is just pushed down from the top of the
   page with margin instead -- a generous top margin here specifically so
   it clearly sits BELOW the header/topbar rather than butted up against
   it.
   ".rc-inline-spinner-page" (not ID-scoped anymore) is the one shared
   top-of-page loading position: the initial Account.html load AND every
   later in-page loading state (Data Management, etc.) use this same
   class so every page's loading card sits at the exact same height,
   rather than each one drifting depending on whether a heading happened
   to render above it first. */
.rc-inline-spinner-page {
  margin-top: 180px;
}
/* 2026-08-30 (Matt's call): a housing around just the row of lights, not
   the loading text below it -- so the five lights read as one physical
   light bar (light gray panel + frame) instead of floating circles on
   the card's own white background. */
.rc-startlights {
  display: flex;
  gap: 7.5px;
  padding: 7px 9px;
  background: var(--rc-offwhite);
  /* A shade lighter than --rc-silver (#D8DDE1, 2026-08-30, Matt's call:
     "a little bit lighter" than the last pass) but still visibly darker
     than the --rc-offwhite (#F5F5F3) panel behind it, so the frame stays
     readable as a frame instead of blending into the pill. */
  border: 1.5px solid #e6e9eb;
  border-radius: 999px;
}
/* 2026-08-30 (Matt's call): lights sized to 75% of their original
   20px/2px/4px dimensions -- the whole gantry reads smaller without
   changing its layout, timing, or on/off behavior at all. */
.rc-startlight {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--rc-carbon);
  border: 1.5px solid #9a9a9a;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6);
  animation-duration: 3.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.rc-startlight:nth-child(1) { animation-name: rc-startlight-1; }
.rc-startlight:nth-child(2) { animation-name: rc-startlight-2; }
.rc-startlight:nth-child(3) { animation-name: rc-startlight-3; }
.rc-startlight:nth-child(4) { animation-name: rc-startlight-4; }
.rc-startlight:nth-child(5) { animation-name: rc-startlight-5; }
/* Off-state stops shared by every light below. */
@keyframes rc-startlight-1 {
  0%, 68.74% { background: var(--rc-red); border-color: var(--rc-red); box-shadow: 0 0 7.5px 1.5px var(--rc-red); }
  68.75%, 100% { background: var(--rc-carbon); border-color: #9a9a9a; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); }
}
@keyframes rc-startlight-2 {
  0%, 9.374% { background: var(--rc-carbon); border-color: #9a9a9a; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); }
  9.375%, 68.74% { background: var(--rc-red); border-color: var(--rc-red); box-shadow: 0 0 7.5px 1.5px var(--rc-red); }
  68.75%, 100% { background: var(--rc-carbon); border-color: #9a9a9a; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); }
}
@keyframes rc-startlight-3 {
  0%, 18.749% { background: var(--rc-carbon); border-color: #9a9a9a; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); }
  18.75%, 68.74% { background: var(--rc-red); border-color: var(--rc-red); box-shadow: 0 0 7.5px 1.5px var(--rc-red); }
  68.75%, 100% { background: var(--rc-carbon); border-color: #9a9a9a; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); }
}
@keyframes rc-startlight-4 {
  0%, 28.124% { background: var(--rc-carbon); border-color: #9a9a9a; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); }
  28.125%, 68.74% { background: var(--rc-red); border-color: var(--rc-red); box-shadow: 0 0 7.5px 1.5px var(--rc-red); }
  68.75%, 100% { background: var(--rc-carbon); border-color: #9a9a9a; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); }
}
@keyframes rc-startlight-5 {
  0%, 37.499% { background: var(--rc-carbon); border-color: #9a9a9a; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); }
  37.5%, 68.74% { background: var(--rc-red); border-color: var(--rc-red); box-shadow: 0 0 7.5px 1.5px var(--rc-red); }
  68.75%, 100% { background: var(--rc-carbon); border-color: #9a9a9a; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); }
}
.rc-loading-text {
  font-family: var(--rc-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rc-steel);
}

/* -------------------------------------------------------------------- */
/* Account.html dashboard — hero card (avatar + details + quick view)   */
/* -------------------------------------------------------------------- */
.rc-dashboard-hero { padding: 24px; position: relative; }
/* Register button's refresh icon -- pinned to the card's top-right corner
   (Matt's call) rather than sitting inline next to the button itself,
   however deep the button ends up nested inside Current Seat/registerButtonBlock's
   own markup. position:absolute positions against the nearest positioned
   ancestor (.rc-dashboard-hero above), not DOM depth, so this works
   without restructuring where registerButtonBlock actually builds it.
   Bug fix (2026-08-21): withTooltip() adds .rc-tooltip to this button
   (for the "Refresh" hover text), and .rc-tooltip sets its own
   `position: relative` later in this file -- same specificity as the
   plain `.rc-dash-refresh-btn` rule, and later in source order, so it was
   silently winning and leaving the icon sitting inline next to the
   Register button instead of pinned to the card corner. Scoped to
   `.rc-dashboard-hero .rc-dash-refresh-btn` so it outranks `.rc-tooltip`
   on specificity and always wins regardless of source order. */
.rc-dashboard-hero .rc-dash-refresh-btn { position: absolute; top: 24px; right: 24px; }
.rc-dash-hero-top { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.rc-dash-avatar {
  width: 300px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
  background: var(--rc-offwhite);
  border: 1px solid var(--rc-silver);
}
@media (max-width: 480px) {
  .rc-dash-avatar { width: 100%; }
  /* Scale down from the 38px desktop base for narrow phones -- long
     display names still need room to breathe here. Same ".rc-main"
     specificity bump as the base rule above -- needed here too or
     ".rc-main h2"'s 20px wins on mobile as well. */
  .rc-main .rc-name-line { font-size: 22px; gap: 8px; }
  .rc-country-badge { font-size: 10px; padding: 2px 6px; }
  .rc-role-badge { font-size: 10px; padding: 2px 6px; }
}

/* -------------------------------------------------------------------- */
/* Account.html dashboard — placeholder widget cards                    */
/*                                                                       */
/* Three explicit rows (see buildDashboardWidgets() in Account.html)    */
/* instead of one auto-flowing grid -- Row 1 is 1:1:2 units, Row 2 is    */
/* 1:1:1 (three equal wide cards), Row 3 is 1:2:2, and those don't       */
/* divide evenly against each other under one shared grid track. Each   */
/* .rc-dash-row is its own flex container instead; a plain widget card  */
/* is flex-basis 1 unit, .rc-widget-wide is 2 units, and they share      */
/* whatever width the row actually has -- same visual effect as the old */
/* grid-column pin, just per-row instead of page-wide.                  */
/* -------------------------------------------------------------------- */
.rc-dash-row { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.rc-dash-row:first-child { margin-top: 20px; }
.rc-widget-card { opacity: 0.9; flex: 1 1 220px; min-width: 0; }
.rc-widget-wide { flex: 2 1 320px; }
/* Team Details -- enlarged (Matt's call, 2026-08-21) now that it holds
   the team's actual bio on top of class/perks, not just a one-line
   header. */
.rc-widget-tall { min-height: 240px; }
/* Reputation, moved underneath the Bank Balance figure inside the same
   widget container (Matt's call, same pass) -- was its own separate
   widget card next to Bank Balance. */
.rc-dash-rep-section { margin-top: 16px; }
/* Matches .rc-widget-title's rendered look (font-size 12px, letter-
   spacing 0.05em; uppercase/bold/carbon/heading-font all inherited from
   the same base h4 rule near the top of this file) so "Reputation" reads
   the same size and color as "BANK BALANCE" directly above it. */
.rc-dash-rep-title { font-family: var(--rc-font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc-carbon); font-size: 12px; }
/* Small gap between the "Team Details" widget title and its body content
   (bio + perks) now that the manufacturer/class header line above them
   is gone -- Matt's ask. */
.rc-team-details-gap { margin-top: 10px; }
@media (max-width: 700px) {
  .rc-dash-row { flex-direction: column; }
  .rc-widget-card, .rc-widget-wide { flex: 1 1 auto; }
}
.rc-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-widget-title { font-size: 12px; letter-spacing: 0.05em; }
.rc-coming-soon-badge {
  flex: none;
  font-family: var(--rc-font-heading);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--rc-offwhite);
  color: var(--rc-steel);
  border: 1px solid var(--rc-silver);
  padding: 3px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.rc-widget-body { margin-top: 12px; }
.rc-widget-big { font-family: var(--rc-font-heading); font-size: 28px; color: var(--rc-carbon); }
.rc-widget-sub { font-size: 12px; color: var(--rc-steel); margin-top: 6px; }
.rc-meter { height: 8px; border-radius: 4px; background: var(--rc-offwhite); border: 1px solid var(--rc-silver); overflow: hidden; }
.rc-meter-fill { height: 100%; background: var(--rc-red); }
/* font-size bumped +2px (Matt: "really small for all checkbox options") --
   covers the Objectives widget on the dashboard and every checklist-style
   checkbox row in the wizard that doesn't set its own size. */
.rc-checklist { display: flex; flex-direction: column; gap: 7px; font-size: 15px; color: var(--rc-steel); }
.rc-checklist label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; text-transform: none; letter-spacing: normal; font-family: var(--rc-font-body); }
/* Checkbox sizing now comes from the sitewide input[type="checkbox"] rule
   above -- nothing left to override here. */

/* Wizard's Bonus Point Categories row -- same checklist behavior, but
   laid out horizontally (Matt's call: "put the +1 options in the same
   row") with larger checkboxes/text than the default checklist size so
   they read as the more prominent, higher-level toggle they are. */
.rc-bonus-checklist { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; font-size: 16px; }
.rc-bonus-checklist input[type="checkbox"] { width: 18px; height: 18px; }
.rc-widget-body table td { font-size: 12px; }

/* Simple centered "coming soon" panels — Calendar/Results/Career/etc. */
.rc-placeholder-panel { text-align: center; padding: 90px 20px; }
.rc-placeholder-panel p { margin-top: 10px; }

/* Whole-page "nothing to show" empty state (2026-09-18) -- replaces the
   old bordered .rc-panel + heading + sentence Calendar/Results/Career
   used to show for "no season"/"nothing on file." Big icon, a shade
   darker than the page's own off-white background, no box around it --
   reads as an intentional state, not another wall of text. */
.rc-empty-state { text-align: center; padding: 90px 20px; }
.rc-empty-state-icon { color: var(--rc-silver); margin: 0 auto 26px; }
.rc-empty-state-icon svg { width: 160px; height: 160px; }
.rc-empty-state-title { font-family: var(--rc-font-heading); font-size: 16px; font-weight: 700; color: var(--rc-steel); letter-spacing: 0.02em; }
.rc-empty-state-subtitle { font-size: 13px; color: var(--rc-steel); opacity: 0.75; margin-top: 8px; max-width: 360px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* Forced password-change lock screen (mustChangePassword) */
.rc-forced-password-wrap { max-width: 420px; margin: 60px auto; }
.rc-forced-password-wrap > p { color: var(--rc-steel); margin-bottom: 14px; }

/* Session-expired lock screen (2026-09-18) -- shown in place of the
   dashboard when the background token check comes back invalid, now
   that the header paints optimistically instead of waiting for that
   check first. Same shape as the password-change lock above (one
   centered panel, sidebar/topbar hidden) but with its own icon-circle +
   heading treatment since this is a dead end, not a form to fill out. */
.rc-session-locked-wrap { max-width: 380px; margin: 90px auto; text-align: center; }
.rc-session-locked-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--rc-offwhite);
  color: var(--rc-steel);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.rc-session-locked-icon svg { width: 26px; height: 26px; }
.rc-session-locked-wrap h2 { font-size: 19px; }
.rc-session-locked-wrap p { color: var(--rc-steel); margin-top: 8px; margin-bottom: 22px; line-height: 1.55; }
.rc-session-locked-wrap .rc-btn-primary { display: inline-block; text-decoration: none; }

/* -------------------------------------------------------------------- */
/* THEMED TOOLTIP -- generic, sitewide hover bubble. Add class          */
/* "rc-tooltip" plus a data-tooltip="..." attribute to any element and  */
/* it gets this bubble on hover/focus instead of the browser's plain    */
/* gray native tooltip (Matt's call: "make the tooltip themed similar   */
/* to our website"). See rcInitTooltips() in Account.html for the       */
/* actual show/hide/position logic.                                     */
/*                                                                       */
/* Rebuilt 2026-08-30 (Matt's call: "stop all tooltips from being cut    */
/* off when hovering over something in a popup") -- this used to be a   */
/* pure-CSS ::after/::before bubble absolutely positioned against the   */
/* hovered element itself. Raising its z-index (an earlier same-day     */
/* pass) never actually fixed the popup case: `.rc-modal` scrolls via   */
/* `overflow-y: auto`, and ANY ancestor with overflow other than        */
/* visible clips an absolutely-positioned descendant's overflowing      */
/* paint regardless of z-index -- a tooltip on a row near the top or    */
/* bottom of a scrollable popup list was getting sliced off by the      */
/* modal's own edge no matter how high its stacking order went. */
/* Rebuilt as ONE shared bubble, appended straight to <body> and        */
/* positioned with position:fixed + JS-measured coordinates -- fixed    */
/* positioning is computed relative to the viewport, not any scrolling  */
/* ancestor, so no ancestor's overflow can ever clip it again. The same */
/* JS also flips the bubble below its target (instead of above) and     */
/* clamps it horizontally when it would otherwise run off the top or a  */
/* side of the screen, so this also fixes tooltips cut off at the edge  */
/* of the browser window itself, not just inside popups.                */
/* -------------------------------------------------------------------- */
.rc-tooltip-bubble {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6000; /* above the signing sequence overlay's 5000 too */
  background: var(--rc-carbon);
  color: var(--rc-white);
  font-family: var(--rc-font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  padding: 7px 11px;
  border-radius: 6px;
  white-space: pre-line; /* preserves real newlines for multi-line
    tooltips (e.g. sponsor bonus/penalty details) while still wrapping
    normal runs of text like the old white-space:normal did */
  width: max-content;
  max-width: 260px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(23, 23, 23, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.rc-tooltip-bubble-visible { opacity: 1; visibility: visible; }
/* The arrow is a real child element, not a pseudo-element, so JS can
   slide it left/right independently of the bubble's own position --
   the bubble gets horizontally clamped to stay on-screen, but the arrow
   should still point at the actual hovered element underneath it. */
.rc-tooltip-bubble-arrow {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border: 5px solid transparent;
}
.rc-tooltip-bubble-above .rc-tooltip-bubble-arrow { top: 100%; border-top-color: var(--rc-carbon); }
.rc-tooltip-bubble-below .rc-tooltip-bubble-arrow { bottom: 100%; border-bottom-color: var(--rc-carbon); }

/* -------------------------------------------------------------------- */
/* Calendar -- one outer season container, N full-width race containers */
/* stacked inside it (Matt's spec: "all the race containers (100% width) */
/* will live within one larger container which will have the title of   */
/* the Season"). Reuses .rc-panel look-and-feel (white card, silver      */
/* border, radius) rather than inventing a new card style.               */
/* -------------------------------------------------------------------- */
.rc-cal-season { }
/* Now a flex row (2026-09-19, Matt's call: "move the class pills to the
   top right of the container, similar to how some cards on the dash have
   text or pills in the right corner") -- same shape as a Dashboard card's
   own .rc-dash-card-header-row, title on the left, corner content (class
   pills here) on the right. The red underline moved here from the title
   itself, so it spans the whole row including the pills, not just the
   text. */
/* align-items: center, not baseline (2026-09-19, Matt's call: "make the
   class pills vertically centered with the header") -- baseline aligned
   the pill row to the h3 title's text baseline, which sat the pills
   noticeably low against the title's own cap-height/line-box. */
.rc-cal-season-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--rc-red); }
.rc-cal-season-title { font-family: var(--rc-font-heading); font-size: 20px; font-weight: 800; color: var(--rc-carbon); margin: 0; }
/* Season-wide settings block (server password, classes, points tables,
   drop weeks, race day/frequency, track limits, private qualifying) --
   sits below the season name, above the race list, per Matt's call.
   Reuses .rc-cal-stats/.rc-cal-stat (the exact same chip component each
   race card uses) so this reads as one visual system with the cards
   below it, not a separate design. No border-top (Matt's call, 2026-08-29
   -- removed along with the "Times shown in your local timezone" sub-line
   that used to sit right above it) -- the title's own red underline above
   already separates the header from this block. */
.rc-cal-season-details { margin-top: 16px; }
.rc-cal-season-details-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc-steel); margin: 0 0 10px; }
/* Season Format grid (renamed from "Season Settings," 2026-09-19, Matt's
   call: "gives all the information of the league without using the
   pills that are currently there"). First built as one row per detail,
   which Matt caught the same day as "takes up an enormous amount of
   space" -- reworked into a wrapping grid of small tiles (several share
   a row, so ~13 details collapse from stacked lines down to 2-3 rows,
   well under a third of the old list's height), then finished as actual
   gray-bordered rounded-rectangle pills (same-day follow-up: "adding
   gray bordered, rounded rectangle pills to hold each information and
   centering the value in the pill would clean it up further... make the
   space in between each pill the same for the section and the padding
   the same within the pill") -- one uniform `gap` (equal horizontally
   and vertically, not the wider-between-columns-than-rows spacing the
   plain-tile version had) and one uniform `padding` (all four sides
   equal, not the tighter-vertical/looser-horizontal padding a text
   block would use) are both what "the same" means here. A tile with a
   longer detail (the Sprint/Medium/Long points lists) carries it in a
   hover tooltip via withTooltip rather than widening the pill. */
.rc-cal-format-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rc-cal-format-list + .rc-cal-format-list { margin-top: 10px; }

/* Sits right under the "Calendar" pill now (2026-09-27, Matt's ask: pull
   the race containers up closer to the pill) -- margin-top trimmed from
   18px to 4px so the gap reads the same tight, close-to-its-label spacing
   the "This Season"/"Season Format" stat rows above it already have
   (their own gap comes entirely from .rc-seasonfmt-group-label's own
   10px margin-bottom, no extra margin-top on the row itself). */
.rc-cal-race-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }

/* Bye week -- deliberately close to empty (Matt's call: "keep bye weeks
   off the details screen and just use blank containers within the
   schedule to convey a bye week") -- a dashed border and centered,
   muted text reads as "nothing scheduled here on purpose" rather than a
   missing race. */
.rc-cal-bye {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 20px;
  border-style: dashed;
  color: var(--rc-steel);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase; /* "BYE WEEK" (2026-08-30, Matt's call) -- markup text stays normal-case, same pattern as .rc-cal-completed-badge's "Completed" */
  background: var(--rc-offwhite);
}
.rc-cal-bye-date { font-size: 11px; font-weight: 400; text-transform: none; } /* the date stays normal-case even though .rc-cal-bye above it is all-caps */

/* Race row -- redesigned 2026-09-24 (Matt's ask: "make the race calendar
   layout look identical to the league.html calendar race layout, ...
   keep the same colors as the current account calendar but I want the
   font and layout and text weight to all match the league page"). Same
   flex "round-number bar + body" shape league.html's own .rcl-cal-row
   uses (see css/league.css), just in Account's own light-page tokens
   (--rc-carbon/--rc-steel/--rc-red/--rc-silver-dark/--rc-white/--rc-gold)
   instead of league's dark theme. position: relative so nothing needs to
   pin to a corner overlay any more -- the old full-card dimmed
   "Completed" overlay is gone, replaced by fading the row's own content
   (see .rc-cal-finished below), same as league.html's own
   .rcl-cal-row-finished. */
.rc-cal-race {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  /* 2px, not 1px (2026-08-30, Matt's call: "make each race container have
     a gray border similar to the size of the gold special event border").
     --rc-silver-dark (2026-09-20, Matt's follow-up call to darken it
     slightly) instead of the standard --rc-silver every other hairline
     border on the site uses. */
  border: 2px solid var(--rc-silver-dark);
  border-radius: 8px;
  background: var(--rc-white);
  width: 100%;
}
/* UP NEXT row highlight -- a barely-there tint instead of league.html's
   translucent-white wash (which only reads against a dark background),
   same "identify it at a glance without the whole row shouting" intent. */
.rc-cal-race-next { background: var(--rc-offwhite); }
/* Special Events get a gold-tinted border (Matt's call: "stick out a
   little better") -- the round bar below reads gold too. */
.rc-cal-race-special { border-color: var(--rc-gold); }

/* Round-number bar -- back (2026-09-24) after being folded into a
   "ROUND N:" title prefix on 2026-09-19; same silver metallic gradient
   league.html's .rcl-cal-round uses for a normal round, gold for a
   Special Event, so the two read as different metals at a glance. */
.rc-cal-round-bar {
  flex: none;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e4e5e8 0%, #a6a8ae 100%);
  font-family: var(--rc-font-heading);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: #1c1d20;
  text-align: center;
  user-select: none;
}
.rc-cal-round-bar-special {
  background: linear-gradient(135deg, #f0d879 0%, #c9a227 100%);
  color: #241b04;
}
/* Short ("R1")/long ("ROUND 1") pair (2026-09-30) -- long form stays
   hidden except at the mobile breakpoint below, same pattern league.html
   uses for its own round bar (.rcl-cal-round-short/-long, league.css). */
.rc-cal-round-bar-long { display: none; }

.rc-cal-race-body { flex: 1 1 auto; min-width: 0; padding: 14px 16px; }
@media (max-width: 640px) {
  .rc-cal-race-body { min-width: 220px; }
  /* Round bar moves to the top of the card, full width (2026-09-30, Matt's
     ask: "make the round header in the calendar race events on the
     dashboard popup extend across the top of the event container... make
     it say ROUND N instead of R1" -- mobile only) -- same layout switch
     league.html's own mobile calendar makes for .rcl-cal-round (league.css),
     just keeping THIS bar's own existing style (silver/gold gradient,
     font, color) untouched, per Matt's explicit "keep the same style that
     it already has." .rc-cal-race's flex-direction switches to column so
     the bar stacks above .rc-cal-race-body instead of sitting beside it
     (replacing the old flex-wrap:wrap, which only let the two pieces wrap
     rather than reliably stacking); the bar itself swaps from a small
     centered square to a full-width, left-aligned strip with the same
     padding league's own mobile round bar uses (8px 0 8px 14px,
     .rcl-cal-round's mobile override) so the two pages' mobile calendars
     match. */
  .rc-cal-race { flex-direction: column; }
  .rc-cal-round-bar {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    padding: 8px 0 8px 14px;
  }
  .rc-cal-round-bar-short { display: none; }
  .rc-cal-round-bar-long { display: inline; }
}

.rc-cal-race-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* Combined "<event> at <track>: <layout>" line, same three-piece shape
   league.html's own .rcl-cal-event uses -- event name bold, track normal
   weight, layout normal weight but dimmer, all in Account's own ink
   colors instead of league's white/gray. */
/* Bumped from 15px (2026-09-24, Matt's ask: "increase the size of the
   event/track/layout name by a little to make it more pronounced"),
   same proportional bump as league.html's own .rcl-cal-event. */
.rc-cal-race-event { font-size: 16.5px; }
.rc-cal-race-event-name { font-weight: 800; color: var(--rc-carbon); }
.rc-cal-race-event-track { font-weight: 500; color: var(--rc-carbon); }
.rc-cal-race-event-layout { font-weight: 500; color: var(--rc-steel); }
.rc-cal-race-star { display: inline-flex; align-items: center; color: var(--rc-gold); margin-left: 6px; }
/* Special Events read one uniform gold across the whole event line, same
   as league.html's .rcl-cal-row-special treatment. */
.rc-cal-race-special .rc-cal-race-event,
.rc-cal-race-special .rc-cal-race-event-name,
.rc-cal-race-special .rc-cal-race-event-track,
.rc-cal-race-special .rc-cal-race-event-layout {
  color: var(--rc-gold);
}

/* Status word, upper-right of the row -- UP NEXT/SCHEDULED/COMPLETED
   (Matt's exact wording), same font-heading/uppercase/letter-spacing
   treatment as league.html's .rcl-cal-status. The results-posted note
   stacks BELOW it as its own line (Matt's ask) rather than league's one
   combined "COMPLETED · OFFICIAL RESULTS POSTED" string. */
.rc-cal-race-status-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; }
.rc-cal-race-status {
  font-family: var(--rc-font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rc-steel);
}
.rc-cal-race-status-up { color: var(--rc-red); }
/* The results-posted note line (.rc-cal-race-status-note*) that used to
   render under the status word was removed (2026-09-26, Matt's ask: "just
   keep the race status") along with its call site in Account.html's
   raceCard(). */

/* Faded row once a round's start time has passed (2026-09-24, matching
   league.html's .rcl-cal-row-finished) -- dims the round bar/event/meta/
   in-game line, but deliberately NOT the status word, so the COMPLETED
   status stays fully legible against the row. */
.rc-cal-race.rc-cal-finished .rc-cal-round-bar,
.rc-cal-race.rc-cal-finished .rc-cal-race-datetime,
.rc-cal-race.rc-cal-finished .rc-cal-race-event,
.rc-cal-race.rc-cal-finished .rc-cal-race-meta {
  opacity: 0.5;
}

/* Day/date/time the race starts -- plain text above the event title
   (2026-09-24, Matt's ask), not a pill. Sits above .rc-cal-race-head. */
.rc-cal-race-datetime { font-size: 12px; font-weight: 600; color: var(--rc-steel); margin-bottom: 4px; }

/* Meta chip row -- race length, In-Game Event Time, Weather, and (when
   set) Password Override, reusing the site's shared .rc-cal-stat chip
   (below) same as every other pill row on the site. */
.rc-cal-race-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }


.rc-cal-datetime { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--rc-carbon); margin-top: 10px; }
.rc-cal-datetime span { display: inline-flex; align-items: center; gap: 5px; }
.rc-cal-datetime svg { color: var(--rc-steel); flex-shrink: 0; }

/* Practice/Qualifying in-game times, trailing the In-Game Race Start time
   on the same line (Matt's call, 2026-08-30 -- previously their own row
   below). Muted gray/normal-weight so Race Start still reads as the
   primary figure on that line. */
.rc-cal-igtimes-extra { color: var(--rc-steel); font-weight: 400; }

/* Stat chips -- tires / wear / fuel multiplier / setup / weather / points
   tier. Small icon + value, same flat-stroke icon language as the rest
   of the site, laid out as a wrapping row so it degrades gracefully on
   narrow widths. */
.rc-cal-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rc-cal-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--rc-offwhite);
  border: 1px solid var(--rc-silver);
  font-size: 12px;
  color: var(--rc-carbon);
}
.rc-cal-stat svg { color: var(--rc-steel); flex-shrink: 0; }
/* Extra breathing room after the Qualifying-length chip, before the
   Sprint/Medium/Long race-length chips in Season Settings (2026-08-30,
   Matt's call) -- marks that boundary without widening .rc-cal-stats' own
   8px gap between every chip in the row. */
.rc-cal-stat-gap-after { margin-right: 22px; }

/* -------------------------------------------------------------------- */
/* Account.html's Help section (renderHelpSection()) -- redesigned        */
/* 2026-09-18 (Matt's call: "make the styling of the containers           */
/* consistent with the rest of the website account pages... add icons    */
/* for sections that show icons on the page... more human-friendly, not  */
/* a container of boring text"). Every panel now uses "rc-panel rc-dash- */
/* card" + "rc-dash-card-title", the same featured-panel chrome (red     */
/* underline, checkered corner) Calendar/Results/League Management/      */
/* Admin already use, instead of a plain unstyled box. This briefly      */
/* lived as its own page (help.html) so the Rulebook would have room to  */
/* grow, but that page dropped the sidebar/nav chrome entirely -- Matt's */
/* call to fold it back into Account.html as an ordinary section        */
/* instead, same shell as every other link. ".rc-rulebook-section"'s     */
/* scroll-margin-top (76px) happens to already clear the site's 70px     */
/* fixed header with a little room to spare.                             */
/* -------------------------------------------------------------------- */
.rc-help-panel-note { font-size: 13px; color: var(--rc-steel); line-height: 1.6; margin: 0 0 16px; }

/* "Need More Help?" -- icon-led contact rows, same shape as index.html's
   "What You'll Need" list, instead of a plain bulleted <ul>. Panel now
   sits below the main Help content (2026-09-26, Matt's call); the old
   "About Race Club" panel and its .rc-about-blurb/.rc-about-signature
   rules were removed entirely along with it. */
.rc-help-contact-list { display: flex; flex-direction: column; gap: 14px; }
.rc-help-contact-row { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--rc-carbon); line-height: 1.55; }
.rc-help-contact-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--rc-red);
  color: var(--rc-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-help-contact-icon svg { width: 15px; height: 15px; }

/* "How To Use This Site" -- one icon card per page, replacing the old
   stacked h4/p walkthrough. Lighter treatment than .rc-highlight-card
   (offwhite fill, no shadow/hover-lift) since these already sit inside a
   featured rc-dash-card panel -- a shadowed card inside a shadowed card
   would read as heavy, not polished. */
.rc-help-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .rc-help-guide-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rc-help-guide-grid { grid-template-columns: 1fr; }
}
.rc-help-guide-card {
  background: var(--rc-offwhite);
  border: 1px solid var(--rc-silver);
  border-radius: 8px;
  padding: 16px;
}
.rc-help-guide-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(160deg, var(--rc-carbon), #2c2c2c);
  color: var(--rc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.rc-help-guide-icon svg { width: 17px; height: 17px; }
.rc-help-guide-card h4 { font-family: var(--rc-font-heading); font-size: 13.5px; color: var(--rc-carbon); margin: 0 0 6px; letter-spacing: 0.02em; }
.rc-help-guide-card p { font-size: 12.5px; color: var(--rc-steel); line-height: 1.55; margin: 0; }

/* Rulebook "Jump To A Section" quick-nav (2026-09-18, replaces the old
   single-column .rc-rulebook-index list) -- a wider chip grid so more of
   the table of contents is visible at once, sitting right under the
   intro note instead of blending into it. */
.rc-rulebook-nav {
  padding: 16px;
  border: 1px solid var(--rc-silver);
  border-radius: 8px;
  background: var(--rc-offwhite);
  margin-bottom: 24px;
}
.rc-rulebook-nav-title { font-family: var(--rc-font-heading); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rc-steel); margin-bottom: 10px; }
.rc-rulebook-nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; }
/* Categories shown in red (Matt's call: "categories in the HELP menu
   should be red to distinguish them") -- each link gets real padding and
   a rounded hit area instead of sitting flush against its neighbors, so
   the grid reads as a set of distinct chips, not one cramped block of
   text. Draft (not-yet-written) sections stay muted steel so the two
   states stay easy to tell apart at a glance. */
.rc-rulebook-nav-link {
  font-size: 13px;
  color: var(--rc-red);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 5px;
}
.rc-rulebook-nav-link:hover { color: var(--rc-red-dark); background: var(--rc-white); }
.rc-rulebook-nav-link.rc-rulebook-draft { color: var(--rc-steel); }
.rc-rulebook-nav-link.rc-rulebook-draft:hover { color: var(--rc-carbon); background: var(--rc-white); }

/* scroll-margin-top clears the modal's sticky header (see .rc-modal-head)
   -- without it, jumping here from the index puts the section heading
   directly UNDER the sticky bar instead of just below it. */
.rc-rulebook-section { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--rc-silver); scroll-margin-top: 76px; }
.rc-rulebook-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.rc-rulebook-section h3 { font-family: var(--rc-font-heading); font-size: 17px; color: var(--rc-carbon); margin: 0 0 12px; }
.rc-rulebook-section h4 { font-family: var(--rc-font-heading); font-size: 14px; color: var(--rc-carbon); margin: 18px 0 8px; }
.rc-rulebook-section p, .rc-rulebook-section li { font-size: 13px; color: var(--rc-carbon); line-height: 1.6; }
.rc-rulebook-section p { margin: 0 0 12px; }
.rc-rulebook-section ul { margin: 8px 0 12px; padding-left: 20px; }
.rc-rulebook-section table { margin: 12px 0; }
/* Top-align every cell (2026-09-27, Matt's ask) -- without this, the
   Glossary's "Class" row (its term cell is a single short line, its
   description cell now holds the term text plus five nested class-type
   sub-rows) defaults to the browser's vertical-align: middle for <td>,
   which centers "Class" against that much taller cell instead of
   keeping it flush with the first line of its own description. */
.rc-rulebook-section table td { vertical-align: top; }
/* Class pill row -- Section 2.2's "Classes" list (2026-09-27, Matt's ask:
   "make the classes look like the class pills that we designed"). Same
   .rc-badge-chip pills used everywhere else on the site, just laid out in
   a wrapping flex row with breathing room instead of the bare inline text
   list this used to be. */
.rc-rulebook-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
/* Glossary's per-class rows (2026-09-27) reuse the same pill markup
   directly inside the term column -- vertical-align keeps a short pill
   from sitting low against the description column's taller text. */
.rc-rulebook-section table .rc-badge-chip { vertical-align: middle; }
/* Sections 5.1 (Tier/Penalty/Effect) and 5.3 (Tier/Example Incident) both
   auto-size their columns off table width:100% (2026-09-27, Matt's ask:
   match the Tier-to-second-column gap between the two, and tighten
   Penalty-to-Effect in 5.1). Left to itself, table auto-layout gives the
   Tier badge column a DIFFERENT width in each table depending on how many
   other columns are competing for the leftover space (5.1 has 3 columns,
   5.3 has 2), so the visual gap after the badge doesn't match between the
   two even though the badge itself is the same size. Pinning the Tier
   column to one fixed width on both tables keeps that gap identical; the
   .rc-rulebook-penalty-table rule below also caps 5.1's own Penalty
   column so Effect isn't left with an oversized gap of its own. */
.rc-rulebook-tier-table td:first-child { width: 44px; }
.rc-rulebook-penalty-table td:nth-child(2) { width: 190px; }

.rc-rulebook-callout {
  margin: 14px 0;
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--rc-offwhite);
  border-left: 3px solid var(--rc-red);
  font-size: 12px;
  color: var(--rc-steel);
}
.rc-rulebook-callout ul { margin: 6px 0 0; padding-left: 18px; }

/* CAREER PAGE removed entirely (2026-09-24, Matt's call: it never got
   real content beyond a prototype, and career stats will instead live on
   a future public driver profile page). The old .rc-career-* rules
   (card shell, hero row, stat groups, discipline incident lines, the
   registration-status pill) lived here. */

.rc-rulebook-draft-note { font-size: 13px; color: var(--rc-steel); font-style: italic; }

/* Penalty tier badges (Rulebook Section 5.1/5.3) -- a square pill with its
   own container color per tier, escalating green (Tier 1, mildest) to red
   (Tier 7, most severe) so the severity reads at a glance without having
   to read the row text (2026-09-26, Matt's ask). Bold white numerals on a
   solid fill rather than colored text on the card background, since a
   filled container reads more clearly as a status/severity chip. */
.rc-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 5px;
  font-weight: 800;
  font-size: 13px;
  color: var(--rc-white);
  line-height: 1;
}
.rc-tier-badge.rc-tier-1 { background: #2e8b3f; }
.rc-tier-badge.rc-tier-2 { background: #6a9c2e; }
.rc-tier-badge.rc-tier-3 { background: #a8a02e; }
.rc-tier-badge.rc-tier-4 { background: #c9962e; }
.rc-tier-badge.rc-tier-5 { background: #d9702e; }
.rc-tier-badge.rc-tier-6 { background: #d9502e; }
.rc-tier-badge.rc-tier-7 { background: #c62828; }