/* ==========================================================================
   APEX MOTO — Elementor widget stylesheet (handle: stepfox-moto-elementor)
   --------------------------------------------------------------------------
   OWNERSHIP
   - This file owns ALL `moto-el-*` styling (every class in SPEC §6).
   - The theme (apex-elementor) owns `ax-*` chrome/editorial styling.
   - assets/moto.css owns ONLY state/keyframes/light-scheme preset remaps.
     Never add design rules there; never style `ax-*` here.

   RULES
   1. Every colour/gradient/font is read ONCE into the `--mx-*` bridge below
      (preset first, dark literal from SPEC §3 as fallback) and consumed ONLY
      through `--mx-*`. Literal hexes appear only inside var() fallback slots,
      plus: white-on-brand text (#fff), podium place ink (#14141a), the
      silver/bronze medals and a few measured rgba() accents from DESIGN
      (track/glow tints) that have no preset.
   2. The bridge is declared on BOTH `:root` and
      `.elementor-widget[class*="elementor-widget-moto-"]` — widgets rendered
      by the theme's PHP fallbacks have no .elementor-widget wrapper, so
      :root covers them; the wrapper copy lets the per-widget "Apex Tokens"
      style controls override tokens on {{WRAPPER}}.
   3. Breakpoints: max-width 1024 / 768 / 600, grouped in the RESPONSIVE
      section at the bottom of this file.
   4. All transitions/animations added here are disabled under
      prefers-reduced-motion: reduce.
   ========================================================================== */

/* ==========================================================================
   1. TOKEN BRIDGE
   ========================================================================== */

:root,
.elementor-widget[class*="elementor-widget-moto-"] {
	/* ---- palette (SPEC §3) ---- */
	--mx-base:     var(--wp--preset--color--base, #0a0a0c);
	--mx-panel:    var(--wp--preset--color--panel, #131317);
	--mx-panel-2:  var(--wp--preset--color--panel-2, #1c1c22);
	--mx-line:     var(--wp--preset--color--line, rgba(244, 242, 238, 0.10));
	--mx-ink:      var(--wp--preset--color--ink, #f5f3ef);
	--mx-muted:    var(--wp--preset--color--muted, #9c9ca6);
	--mx-accent:   var(--wp--preset--color--accent, #e10600);
	--mx-accent-2: var(--wp--preset--color--accent-2, #ff3b2f);
	--mx-gold:     var(--wp--preset--color--gold, #d4af37);
	--mx-glass:    var(--wp--preset--color--glass, rgba(10, 10, 12, 0.82));
	--mx-glass-2:  var(--wp--preset--color--glass-2, rgba(19, 19, 23, 0.72));

	/* medals — literals by design, no preset exists (SPEC §3 semantics) */
	--mx-silver: rgb(220, 219, 219);
	--mx-bronze: rgb(217, 111, 34);

	/* ---- gradients (SPEC §3) ---- */
	--mx-g-brand:         var(--wp--preset--gradient--brand, linear-gradient(100deg, #e10600 0%, #ff3b2f 100%));
	--mx-g-hairline:      var(--wp--preset--gradient--hairline, linear-gradient(90deg, rgba(225, 6, 0, 0.85) 0%, rgba(255, 59, 47, 0.45) 42%, rgba(244, 242, 238, 0) 100%));
	--mx-g-panel-sheen:   var(--wp--preset--gradient--panel-sheen, linear-gradient(163deg, #1e1e22 0%, #131317 46%, #131317 100%));
	--mx-g-panel-sheen-2: var(--wp--preset--gradient--panel-sheen-2, linear-gradient(163deg, #2d2d32 0%, #1c1c22 46%, #1c1c22 100%));
	--mx-g-accent-wash:   var(--wp--preset--gradient--accent-wash, linear-gradient(90deg, rgba(225, 6, 0, 0.15) 0%, rgba(225, 6, 0, 0.03) 46%, rgba(225, 6, 0, 0) 72%));
	--mx-g-accent-bar:    var(--wp--preset--gradient--accent-bar, linear-gradient(90deg, rgba(225, 6, 0, 0.45) 0%, #e10600 72%, #ff3b2f 100%));
	--mx-g-gold-wash:     var(--wp--preset--gradient--gold-wash, linear-gradient(90deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.04) 40%, rgba(212, 175, 55, 0) 70%));
	--mx-g-gold-crown:    var(--wp--preset--gradient--gold-crown, linear-gradient(180deg, #443c27 0%, #1c1c22 62%, #1c1c22 100%));
	--mx-g-hero-glow:     var(--wp--preset--gradient--hero-glow, radial-gradient(620px 260px at 8% -20%, rgba(225, 6, 0, 0.20) 0%, rgba(225, 6, 0, 0) 70%), radial-gradient(520px 240px at 100% 120%, rgba(255, 59, 47, 0.12) 0%, rgba(255, 59, 47, 0) 70%), #131317);
	--mx-g-card-glow:     var(--wp--preset--gradient--card-glow, radial-gradient(300px 160px at 50% -30%, rgba(225, 6, 0, 0.26) 0%, rgba(225, 6, 0, 0) 70%), radial-gradient(240px 150px at 100% 4%, rgba(255, 59, 47, 0.18) 0%, rgba(255, 59, 47, 0) 74%), #131317);

	/* ---- fonts ---- */
	--mx-f-display: var(--wp--preset--font-family--oswald, Oswald, 'Arial Narrow', Impact, sans-serif);
	--mx-f-body:    var(--wp--preset--font-family--roboto, Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	--mx-f-mono:    var(--wp--preset--font-family--plex-mono, 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace);

	/* ---- radius ladder ---- */
	--mx-r:      14px;   /* cards + panels   */
	--mx-r-lg:   18px;   /* heroes           */
	--mx-r-in:   9px;    /* inner rows/tiles */
	--mx-r-sm:   5px;    /* badges/plates    */
	--mx-pill:   999px;  /* pills/bars       */

	/* ---- shadows (SPEC §3) ---- */
	--mx-ring:       inset 0 0 0 1px var(--mx-line);
	--mx-glow1:      0 1px 2px rgba(10, 10, 12, 0.40), 0 8px 20px rgba(10, 10, 12, 0.30);
	--mx-glow2:      0 2px 6px rgba(10, 10, 12, 0.48), 0 12px 30px rgba(10, 10, 12, 0.44);
	--mx-glow3:      0 4px 10px rgba(10, 10, 12, 0.55), 0 18px 38px rgba(10, 10, 12, 0.62);
	--mx-accentglow: 0 0 0 1px rgba(225, 6, 0, 0.55), 0 0 24px rgba(225, 6, 0, 0.32), 0 10px 28px rgba(225, 6, 0, 0.28);
	--mx-goldglow:   0 0 0 2px rgba(212, 175, 55, 0.55), 0 0 26px rgba(212, 175, 55, 0.30), 0 -10px 30px rgba(212, 175, 55, 0.22);
}

/* ==========================================================================
   2. SHARED ROOT / UTILITIES
   ========================================================================== */

.moto-el {
	font-family: var(--mx-f-body);
	color: var(--mx-ink);
	font-size: 15px;
	letter-spacing: -0.003em;
}

.moto-el a {
	text-decoration: none;
	color: inherit;
}

.moto-el h1,
.moto-el h2,
.moto-el h3,
.moto-el p,
.moto-el ol,
.moto-el ul,
.moto-el figure {
	margin: 0;
}

.moto-el img {
	max-width: 100%;
}

.moto-el-mono {
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
}

.moto-el-empty {
	color: var(--mx-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

/* Editor-only hint box (render_notice) */
.moto-el-notice {
	border: 1px dashed var(--mx-line);
	border-radius: var(--mx-r-in);
	color: var(--mx-muted);
	font-size: 12px;
	line-height: 1.5;
	padding: 10px 14px;
}

/* Shared eyebrow label (rider-form blocks, pick panel) */
.moto-el-label {
	display: block;
	font-family: var(--mx-f-display);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mx-muted);
}

/* Scheme-toggle wrapper — the button itself is plugin chrome (moto.css) */
.moto-el-scheme {
	display: inline-flex;
	align-items: center;
}

/* ==========================================================================
   3. ROW FAMILY
   --------------------------------------------------------------------------
   Shared by .moto-el-standings, .moto-el-team-standings, .moto-el-leaders,
   .moto-el-fanboard and .moto-el-calendar — those roots need no rules of
   their own beyond this family (calendar's extras live in section 6).
   ========================================================================== */

.moto-el-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.moto-el-rows > li {
	margin: 0;
}

.moto-el-row {
	padding: 12px 4px;
	border-bottom: 1px solid var(--mx-line);
	transition: background 0.18s ease;
}

.moto-el-row:hover {
	background: var(--mx-g-accent-wash);
}

/* Championship leader row: wash + 3px accent left stub */
.moto-el-row.is-leader {
	background: var(--mx-g-accent-wash);
	box-shadow: inset 3px 0 0 var(--mx-accent);
	border-radius: 6px;
}

.moto-el-row-link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

/* -- position chip 34x26 ------------------------------------------------- */
.moto-el-pos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 26px;
	flex-shrink: 0;
	border-radius: var(--mx-r-sm);
	background: var(--mx-panel-2);
	box-shadow: inset 0 -2px 0 var(--mx-accent);
	font-size: 14px;
	font-weight: 700;
}

.moto-el-pos.is-p1 {
	background: var(--mx-g-brand);
	color: #fff;
	box-shadow: 0 0 18px rgba(225, 6, 0, 0.60);
}

/* -- name column ---------------------------------------------------------- */
.moto-el-who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.moto-el-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.moto-el-sub {
	display: block;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mx-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* -- points bar 5px ------------------------------------------------------- */
.moto-el-bar {
	flex: 0 1 420px;
	max-width: 420px;
	height: 5px;
	border-radius: var(--mx-pill);
	background: rgba(245, 243, 239, 0.07);
	overflow: hidden;
}

.moto-el-bar > i {
	display: block;
	height: 100%;
	border-radius: var(--mx-pill);
	background: var(--mx-g-accent-bar);
	box-shadow: 0 0 12px rgba(225, 6, 0, 0.45);
}

/* -- last-five form chips -------------------------------------------------- */
.moto-el-form {
	display: flex;
	align-items: center;
	gap: 3px;
	flex-shrink: 0;
}

.moto-el-form > b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 2px 3px;
	border-radius: 3px;
	background: var(--mx-panel-2);
	font-size: 10px;
	font-weight: 700;
	color: var(--mx-muted);
	text-align: center;
}

.moto-el-form > b.is-dnf {
	opacity: 0.55;
}

/* -- gap / points columns -------------------------------------------------- */
.moto-el-gap {
	flex-shrink: 0;
	min-width: 58px;
	text-align: right;
	font-size: 12px;
	color: var(--mx-muted);
}

.moto-el-pts {
	flex-shrink: 0;
	min-width: 62px;
	text-align: right;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* leaders widget value (points / times / top speed) */
.moto-el-val {
	flex-shrink: 0;
	min-width: 62px;
	text-align: right;
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 15px;
	font-weight: 700;
}

/* -- fanboard avatar ------------------------------------------------------- */
.moto-el-ava {
	flex-shrink: 0;
	display: inline-flex;
}

.moto-el-ava img {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   4. RIDER FORM PANEL (moto-el-rider-form)
   ========================================================================== */

.moto-el-rider-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.moto-el-form-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* bigger chips inside the panel */
.moto-el-rider-form .moto-el-form > b {
	min-width: 26px;
	padding: 4px 5px;
	font-size: 12px;
}

.moto-el-bar--wide {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
}

.moto-el-form-gap {
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

/* points row: wide bar + value side by side */
.moto-el-form-block .moto-el-bar--wide + .moto-el-pts,
.moto-el-rider-form .moto-el-pts {
	text-align: left;
	min-width: 0;
}

/* ==========================================================================
   5. SEASON TILES (moto-el-season-tiles)
   ========================================================================== */

.moto-el-season-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.moto-el-tile {
	border-radius: 4px;
	background: var(--mx-g-panel-sheen);
	border: 1px solid var(--mx-line);
	padding: 18px;
	transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.26s ease;
}

.moto-el-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 52px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(225, 6, 0, 0.30);
}

.moto-el-tile-val {
	display: block;
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.moto-el-tile-label {
	display: block;
	margin-top: 8px;
	font-family: var(--mx-f-display);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mx-muted);
}

.moto-el-tile-sub {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--mx-muted);
}

/* ==========================================================================
   6. CALENDAR (moto-el-calendar)
   ========================================================================== */

.moto-el-calendar--c2 .moto-el-rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 30px;
}

.moto-el-calendar .moto-el-row.is-next {
	background: var(--mx-g-accent-wash);
}

/* round chip 42x26 */
.moto-el-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 26px;
	flex-shrink: 0;
	border-radius: var(--mx-r-sm);
	background: var(--mx-panel-2);
	box-shadow: inset 0 -2px 0 var(--mx-accent);
	color: var(--mx-accent);
	font-size: 15px;
	font-weight: 700;
}

.moto-el-calendar .moto-el-name {
	font-family: var(--mx-f-display);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
}

.moto-el-date {
	flex-shrink: 0;
	min-width: 132px;
	text-align: right;
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	color: var(--mx-muted);
}

/* winner: gold = won this race (never the leader) */
.moto-el-winner {
	color: var(--mx-gold);
	font-size: 13px;
	font-weight: 600;
}

.moto-el-calendar .moto-el-winner {
	flex-shrink: 0;
	min-width: 150px;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   7. CARD FAMILY (moto-el-cards / race-cards / rider-grid / team-grid)
   ========================================================================== */

.moto-el-cards {
	display: grid;
	gap: 20px;
}

.moto-el-cards--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.moto-el-cards--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.moto-el-cards--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.moto-el-cards--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

.moto-el-card {
	position: relative;
	top: 0;
	border-radius: var(--mx-r);
	background: var(--mx-g-panel-sheen);
	border: 1px solid var(--mx-line);
	box-shadow: var(--mx-glow1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: top 0.26s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.26s ease;
}

/* signature 3px accent-bar top edge */
.moto-el-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--mx-g-accent-bar);
	border-radius: var(--mx-r) var(--mx-r) 0 0;
	z-index: 2;
	pointer-events: none;
}

.moto-el-card:hover {
	top: -4px;
	box-shadow: var(--mx-glow3), 0 0 0 1px rgba(225, 6, 0, 0.40);
}

.moto-el-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--mx-r) var(--mx-r) 0 0;
}

.moto-el-card-media img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}

.moto-el-card-media-empty {
	display: block;
	width: 100%;
	height: 190px;
	background: var(--mx-panel-2);
}

/* component-specific media heights (DESIGN bands 2/5, §6) */
.moto-el-race-cards .moto-el-card-media img,
.moto-el-race-cards .moto-el-card-media-empty { height: 200px; }

.moto-el-rider-grid .moto-el-card-media img,
.moto-el-rider-grid .moto-el-card-media-empty { height: 210px; }

/* riders ARCHIVE renders at 4 columns (front grid is c5) — photo 230 */
.moto-el-rider-grid.moto-el-cards--c4 .moto-el-card-media img,
.moto-el-rider-grid.moto-el-cards--c4 .moto-el-card-media-empty { height: 230px; }

.moto-el-team-grid .moto-el-card-media img,
.moto-el-team-grid .moto-el-card-media-empty { height: 180px; }

.moto-el-card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	flex: 1 1 auto;
}

.moto-el-card-title {
	font-family: var(--mx-f-display);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.18;
}

.moto-el-card-title a {
	color: inherit;
	transition: color 0.15s ease;
}

.moto-el-card-title a:hover {
	color: var(--mx-accent-2);
}

.moto-el-card-sub {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mx-accent);
}

.moto-el-eyebrow {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mx-accent);
}

.moto-el-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 4px;
	font-size: 12px;
	color: var(--mx-muted);
}

/* -- number plates --------------------------------------------------------- */
.moto-el-plate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	min-width: 34px;
	padding: 0 6px;
	flex-shrink: 0;
	border-radius: var(--mx-r-sm);
	background: var(--mx-panel-2);
	box-shadow: inset 0 -2px 0 var(--mx-accent);
	font-size: 13px;
	font-weight: 700;
}

.moto-el-plate--overlay {
	position: absolute;
	bottom: 10px;
	left: 10px;
	height: 32px;
	min-width: 38px;
	font-size: 18px;
	background: var(--mx-glass);
	box-shadow: inset 0 -3px 0 var(--mx-accent);
	z-index: 2;
}

/* ==========================================================================
   8. FUSED STAT STRIPS (moto-el-strip) + HERO FACTS (moto-el-facts)
   ========================================================================== */

.moto-el-strip,
.moto-el-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1px;
	background: var(--mx-line);
	border-radius: var(--mx-r-in);
	overflow: hidden;
	box-shadow: var(--mx-ring), var(--mx-glow1);
}

/* explicit column count via inline --mx-cols (mx_columns control) */
.moto-el-strip[style*="--mx-cols"] {
	grid-template-columns: repeat(var(--mx-cols), minmax(0, 1fr));
}

.moto-el-facts {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.moto-el-cell,
.moto-el-fact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	background: var(--mx-panel);
	padding: 15px 14px;
}

.moto-el-cell-label,
.moto-el-fact-label {
	font-family: var(--mx-f-display);
	font-size: 9.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--mx-muted);
}

.moto-el-cell-val,
.moto-el-fact-val {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --lg: big mono values (career numbers, team season) */
.moto-el-strip--lg .moto-el-cell-val {
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
}

/* --mini: 3-cell strip inside rider cards */
.moto-el-strip--mini .moto-el-cell {
	padding: 8px 10px;
	gap: 2px;
}

.moto-el-strip--mini .moto-el-cell-val {
	font-size: 15px;
	font-weight: 700;
}

.moto-el-strip--mini .moto-el-cell-label {
	font-size: 9.5px;
}

/* ==========================================================================
   9. HEROES (moto-el-hero: rider / team / race)
   ========================================================================== */

.moto-el-hero {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

.moto-el-hero-media {
	flex: 0 0 32%;
	min-width: 0;
}

.moto-el-hero-media img {
	display: block;
	width: 100%;
	border-radius: var(--mx-r-in);
	object-fit: cover;
	background: var(--mx-panel-2);
}

.moto-el-rider-hero .moto-el-hero-media img { height: 380px; }
.moto-el-race-hero  .moto-el-hero-media img { height: 300px; }
.moto-el-team-hero  .moto-el-hero-media img { height: 260px; }

.moto-el-hero-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.moto-el-hero-brow {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* rider race-number */
.moto-el-hero-num {
	font-family: var(--mx-f-display);
	font-size: 42px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--mx-accent);
}

/* race hero: small "ROUND" label + modest round number */
.moto-el-hero-label {
	font-family: var(--mx-f-display);
	font-size: 9.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--mx-muted);
}

.moto-el-race-hero .moto-el-hero-num {
	font-size: 15px;
	letter-spacing: 0;
}

.moto-el-hero-title {
	font-family: var(--mx-f-display);
	font-size: 48px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.02;
}

.moto-el-race-hero .moto-el-hero-title {
	font-size: 46px;
}

.moto-el-hero-sub {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.10em;
	color: var(--mx-accent-2);
	text-decoration: none;
}

/* class-term pill (tint + red inset ring) */
.moto-el-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: var(--mx-pill);
	background: rgba(225, 6, 0, 0.12);
	box-shadow: inset 0 0 0 1px rgba(225, 6, 0, 0.45);
	color: var(--mx-accent-2);
	font-family: var(--mx-f-display);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	white-space: nowrap;
}

/* ==========================================================================
   10. COUNTDOWN (moto-el-countdown / hero cd-row)
   ========================================================================== */

.moto-el-countdown,
.moto-el-cd-row {
	display: flex;
	gap: 10px;
}

.moto-el-cd-tile {
	background: var(--mx-panel-2);
	border-radius: 4px;
	min-width: 66px;
	padding: 10px 14px;
	text-align: center;
}

.moto-el-countdown .moto-el-cd-tile {
	flex: 1 1 auto;
}

.moto-el-cd-tile .sfmoto-cd {
	display: block;
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.moto-el-cd-label {
	display: block;
	margin-top: 5px;
	font-family: var(--mx-f-display);
	font-size: 9.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--mx-muted);
}

/* ==========================================================================
   11. RACE RESULTS (moto-el-race-results)
   ========================================================================== */

.moto-el-rrow {
	padding: 11px 0;
	border-bottom: 1px solid var(--mx-line);
	transition: background 0.18s ease;
}

.moto-el-rrow:hover {
	background: var(--mx-panel-2);
}

.moto-el-rrow .moto-el-row-link {
	gap: 12px;
}

.moto-el-rpos {
	width: 34px;
	flex-shrink: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--mx-muted);
}

.moto-el-rpos.is-dnf {
	font-size: 10px;
	letter-spacing: 0.06em;
}

/* results plate: accent-2 number on panel-2 */
.moto-el-rrow .moto-el-plate {
	color: var(--mx-accent-2);
	font-size: 12px;
}

.moto-el-time {
	flex-shrink: 0;
	min-width: 118px;
	text-align: right;
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 12.5px;
	color: var(--mx-accent-2);
}

.moto-el-rrow .moto-el-pts {
	min-width: 48px;
	font-size: 16px;
}

/* ==========================================================================
   12. PODIUM (moto-el-podium)
   --------------------------------------------------------------------------
   Base = the .moto-el-podium--steps layout (staggered 120/98/78 blocks,
   DOM order P2-P1-P3); .moto-el-podium--cards overrides to equal heights.
   ========================================================================== */

.moto-el-podium {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	align-items: end;
}

.moto-el-podium--cards {
	align-items: stretch;
	gap: 18px;
}

.moto-el-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: var(--mx-g-panel-sheen);
	border-radius: var(--mx-r);
	padding: 14px;
	text-align: center;
}

.moto-el-step-face {
	display: block;
	border-radius: 50%;
	flex-shrink: 0;
}

.moto-el-step-face img {
	display: block;
	border-radius: 50%;
	object-fit: cover;
	width: 68px;
	height: 68px;
}

.moto-el-step--p1 .moto-el-step-face img {
	width: 84px;
	height: 84px;
	box-shadow: var(--mx-goldglow);
}

.moto-el-step--p2 .moto-el-step-face img {
	box-shadow: 0 0 0 2px var(--mx-silver);
}

.moto-el-step--p3 .moto-el-step-face img {
	box-shadow: 0 0 0 2px var(--mx-bronze);
}

.moto-el-step-name {
	font-family: var(--mx-f-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.15;
}

.moto-el-step-name a {
	color: inherit;
}

/* the stepped column */
.moto-el-step-block {
	position: relative;
	width: 100%;
	margin-top: auto;
	border-radius: 9px 9px 13px 13px;
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.moto-el-step--p1 .moto-el-step-block {
	height: 120px;
	background: var(--mx-g-gold-crown);
	box-shadow: inset 0 3px 0 var(--mx-gold);
}

.moto-el-step--p2 .moto-el-step-block {
	height: 98px;
	background: var(--mx-g-panel-sheen-2);
	box-shadow: inset 0 3px 0 var(--mx-silver);
}

.moto-el-step--p3 .moto-el-step-block {
	height: 78px;
	background: var(--mx-g-panel-sheen-2);
	box-shadow: inset 0 3px 0 var(--mx-bronze);
}

.moto-el-step-place {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #14141a;
	font-size: 15px;
	font-weight: 700;
}

.moto-el-step--p1 .moto-el-step-place { background: var(--mx-gold); }
.moto-el-step--p2 .moto-el-step-place { background: var(--mx-silver); }
.moto-el-step--p3 .moto-el-step-place { background: var(--mx-bronze); }

.moto-el-step-time {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 2px 10px;
	border-radius: var(--mx-pill);
	background: rgba(10, 10, 12, 0.45);
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	font-weight: 600;
}

.moto-el-step-pts {
	font-size: 11px;
	color: var(--mx-muted);
}

/* --cards: race-page layout, equal heights (faces 112, blocks 82) */
.moto-el-podium--cards .moto-el-step-face img {
	width: 112px;
	height: 112px;
}

.moto-el-podium--cards .moto-el-step-block {
	height: 82px;
}

/* ==========================================================================
   13. SESSIONS (moto-el-sessions wrapping ul.sfmoto-sessions)
   ========================================================================== */

.moto-el-sessions .sfmoto-sessions {
	list-style: none;
	margin: 0;
	padding: 8px 12px;
	background: var(--mx-g-panel-sheen-2);
	border-radius: var(--mx-r-in);
}

.moto-el-sessions .sfmoto-sessions li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	line-height: 2.4;
}

.moto-el-sessions .sfmoto-sessions li.is-past {
	opacity: 0.55;
}

.moto-el-sessions .sfmoto-sessions li.is-live {
	color: var(--mx-accent-2);
}

.moto-el-sessions .sfmoto-sessions li.is-next {
	color: var(--mx-ink);
	font-weight: 600;
}

.moto-el-sessions .sfmoto-sessions time {
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	color: var(--mx-muted);
}

/* ==========================================================================
   14. TRACK SVG (moto-el-track)
   ========================================================================== */

.moto-el-track {
	color: var(--mx-accent-2); /* sfmoto-track strokes currentColor */
}

.moto-el-track svg {
	display: block;
	width: 100%;
	height: auto;
}

/* circuit-outline watermark: expects a positioned ancestor */
.moto-el-track--watermark {
	position: absolute;
	width: 42%;
	right: -5%;
	top: 24%;
	color: rgba(255, 59, 47, 0.30);
	filter: drop-shadow(0 0 16px rgba(225, 6, 0, 0.45));
	pointer-events: none;
	z-index: 0;
}

/* ==========================================================================
   15. TICKER (moto-el-ticker)
   ========================================================================== */

.moto-el-ticker {
	display: flex;
	align-items: center;
	gap: 10px;
	overflow-x: auto;
	padding: 7px 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.moto-el-ticker::-webkit-scrollbar {
	display: none;
}

.moto-el-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 15px;
	border-radius: var(--mx-pill);
	box-shadow: var(--mx-ring), var(--mx-glow1);
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: box-shadow 0.2s ease;
}

a.moto-el-chip:hover {
	box-shadow: inset 0 0 0 1px rgba(225, 6, 0, 0.70), 0 0 16px rgba(225, 6, 0, 0.25), var(--mx-glow1);
}

.moto-el-chip--live {
	background: var(--mx-accent);
	color: #fff;
	font-family: var(--mx-f-display);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	box-shadow: 0 0 18px rgba(225, 6, 0, 0.45);
}

.moto-el-live-ic {
	display: inline-flex;
	width: 12px;
	height: 12px;
	font-style: normal;
	align-items: center;
	justify-content: center;
}

.moto-el-chip--next {
	box-shadow: inset 0 0 0 1px rgba(225, 6, 0, 0.45), var(--mx-glow1);
}

.moto-el-chip--last {
	box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55), var(--mx-glow1);
}

/* .moto-el-chip--podium and .moto-el-chip--stand keep the default hairline
   ring — their identity comes from chip-pos / chip-pos--ghost inside. */

.moto-el-chip-key {
	font-family: var(--mx-f-display);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mx-accent-2);
}

.moto-el-chip b {
	font-size: 12.5px;
	font-weight: 600;
}

.moto-el-chip-sub {
	font-size: 11px;
	color: var(--mx-muted);
}

.moto-el-chip-time {
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--mx-accent-2);
}

.moto-el-chip-pos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 9px;
	border-radius: var(--mx-pill);
	background: var(--mx-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	box-shadow: 0 0 12px rgba(225, 6, 0, 0.45);
}

.moto-el-chip-pos--ghost {
	background: transparent;
	color: var(--mx-accent-2);
	box-shadow: inset 0 0 0 1px rgba(225, 6, 0, 0.45);
}

.moto-el-chip-pts {
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	font-weight: 600;
}

.moto-el-chip .sfmoto-cd {
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	font-weight: 600;
}

/* ==========================================================================
   16. FANTASY PICK PANEL (moto-el-pick)
   ========================================================================== */

.moto-el-pick .moto-el-label {
	margin-bottom: 10px;
}

.moto-el-pick-rows,
.moto-el-pick-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 560px;
	overflow: auto;
	margin: 0;
}

.moto-el-pick-row {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--mx-g-panel-sheen-2);
	border-radius: var(--mx-r-in);
	padding: 9px 11px;
	box-shadow: var(--mx-ring);
	color: var(--mx-ink);
	font-family: var(--mx-f-body);
	font-size: 12px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.18s ease, background 0.18s ease;
}

.moto-el-pick-row:hover {
	background: var(--mx-g-accent-wash), var(--mx-g-panel-sheen-2);
	box-shadow: inset 0 0 0 1px rgba(225, 6, 0, 0.45);
}

.moto-el-pick-row[aria-pressed="true"] {
	background: var(--mx-g-accent-wash), var(--mx-g-panel-sheen-2);
	box-shadow: inset 0 0 0 1px var(--mx-accent), 0 0 16px rgba(225, 6, 0, 0.20);
}

.moto-el-pick-num {
	flex-shrink: 0;
	min-width: 24px;
	text-align: right;
	font-family: var(--mx-f-mono);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	font-weight: 700;
	color: var(--mx-accent);
}

.moto-el-pick-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.moto-el-pick-share {
	flex-shrink: 0;
	font-size: 10px;
	color: var(--mx-muted);
}

/* locked race: rows inert */
.moto-el-pick form[data-locked="1"] .moto-el-pick-row,
.moto-el-pick-form[data-locked="1"] .moto-el-pick-row {
	opacity: 0.55;
	pointer-events: none;
}

.moto-el-pick-note {
	margin-top: 10px;
	font-size: 12px;
	color: var(--mx-muted);
}

/* ==========================================================================
   17. RESPONSIVE — 1024 / 768 / 600
   ========================================================================== */

@media (max-width: 1024px) {
	/* card grids collapse */
	.moto-el-cards--c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.moto-el-cards--c4,
	.moto-el-cards--c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* standings rows: form chips off, bars narrow (DESIGN band 3) */
	.moto-el-row .moto-el-form { display: none; }
	.moto-el-row .moto-el-bar { flex-basis: 18%; max-width: 18%; }

	/* calendar: one column, winner column off */
	.moto-el-calendar--c2 .moto-el-rows { grid-template-columns: minmax(0, 1fr); }
	.moto-el-calendar .moto-el-winner { display: none; }

	/* tiles + heroes step down */
	.moto-el-tile-val { font-size: 28px; }
	.moto-el-hero { gap: 24px; }
	.moto-el-hero-title { font-size: 40px; }
	.moto-el-race-hero .moto-el-hero-title { font-size: 38px; }
}

@media (max-width: 768px) {
	/* card grids collapse further */
	.moto-el-cards--c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.moto-el-cards--c4,
	.moto-el-cards--c3,
	.moto-el-cards--c2 { grid-template-columns: minmax(0, 1fr); }

	/* rows: bars + gap column hidden (rider-form's --wide bar is NOT
	   inside a .moto-el-row, so it survives) */
	.moto-el-row .moto-el-bar { display: none; }
	.moto-el-row .moto-el-gap { display: none; }

	/* calendar date + results time columns hidden */
	.moto-el-date { display: none; }
	.moto-el-time { display: none; }

	/* season tiles 2-up */
	.moto-el-season-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.moto-el-tile-val { font-size: 26px; }

	/* heroes stack, media full width */
	.moto-el-hero { flex-direction: column; gap: 18px; }
	.moto-el-hero-media { flex: 0 0 auto; width: 100%; }
	.moto-el-hero-title { font-size: 30px; }
	.moto-el-race-hero .moto-el-hero-title { font-size: 29px; }
	.moto-el-hero-num { font-size: 32px; }
	.moto-el-race-hero .moto-el-hero-num { font-size: 15px; }

	/* hero facts 2-up */
	.moto-el-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* ticker chips shrink; LIVE chip off */
	.moto-el-chip { height: 36px; padding: 0 12px; }
	.moto-el-chip--live { display: none; }

	/* countdown digits step down */
	.moto-el-cd-tile .sfmoto-cd { font-size: 24px; }
}

@media (max-width: 600px) {
	/* tighten the smallest layouts */
	.moto-el-cards { gap: 14px; }
	.moto-el-podium { gap: 8px; }
	.moto-el-step { padding: 10px; }
	.moto-el-step-name { font-size: 15px; }
	.moto-el-step--p1 .moto-el-step-face img { width: 68px; height: 68px; }
	.moto-el-podium--cards .moto-el-step-face img { width: 84px; height: 84px; }
	.moto-el-cd-tile { min-width: 56px; padding: 8px 10px; }
	.moto-el-cd-tile .sfmoto-cd { font-size: 20px; }
	.moto-el-hero-media img { max-height: 300px; }
	.moto-el-strip,
	.moto-el-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.moto-el-strip[style*="--mx-cols"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   18. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.moto-el,
	.moto-el *,
	.moto-el *::before,
	.moto-el *::after {
		transition: none !important;
		animation: none !important;
	}

	.moto-el-card:hover { top: 0; }
	.moto-el-tile:hover { transform: none; }
}

/* ==========================================================================
   19. Reconciliation — classes the widget agents emitted after the main
   sections were written (rider-grid filter bar, ticker countdown group,
   race-hero season).
   ========================================================================== */

.moto-el-filterbar {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--mx-panel-2);
	border-radius: var(--mx-r);
	box-shadow: var(--mx-ring), var(--mx-glow2);
	padding: 18px;
	margin-bottom: 20px;
}
.moto-el-filter-group {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.moto-el-filter-label {
	font-family: var(--mx-f-display);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mx-muted);
	min-width: 44px;
}
.moto-el-filter-search {
	flex: 1 1 220px;
	min-width: 180px;
	background: var(--mx-panel);
	border: 1px solid var(--mx-line);
	border-radius: var(--mx-pill);
	padding: 10px 16px;
	color: var(--mx-ink);
	font-family: var(--mx-f-body);
	font-size: 13px;
	outline: none;
}
.moto-el-filter-search:focus { border-color: rgba(225, 6, 0, 0.45); }
.moto-el-filter-search::placeholder { color: var(--mx-muted); }
.moto-el-filter-pill {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--mx-pill);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--mx-line);
	color: var(--mx-muted);
	font-family: var(--mx-f-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.moto-el-filter-pill:hover { color: var(--mx-ink); box-shadow: inset 0 0 0 1px rgba(225, 6, 0, 0.45); }
.moto-el-filter-pill.is-active,
.moto-el-filter-pill[aria-pressed="true"] {
	background: var(--mx-g-brand);
	color: #fff;
	box-shadow: 0 0 0 1px rgba(225, 6, 0, 0.55), 0 0 20px rgba(225, 6, 0, 0.32);
}
.sfmoto-filter-count {
	margin-left: auto;
	font-family: var(--mx-f-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--mx-accent-2);
	white-space: nowrap;
}
.moto-el .sfmoto-noresults {
	width: 100%;
	padding: 24px 0;
	text-align: center;
	color: var(--mx-muted);
	font-size: 13.5px;
}
.moto-el .sfmoto-noresults[hidden] { display: none; }

/* Ticker: the NEXT chip's compact countdown group. */
.moto-el-chip-cd {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-family: var(--mx-f-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--mx-ink);
}
.moto-el-chip-cd i {
	font-style: normal;
	font-size: 10px;
	color: var(--mx-muted);
	margin-right: 4px;
}

/* Race hero brow: season year after the round number. */
.moto-el-hero-season {
	font-size: 12px;
	color: var(--mx-muted);
	font-family: var(--mx-f-mono);
}

/* Race status pill, pushed to the brow's right edge (demo: "SCHEDULED"). */
.moto-el-hero-status {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: var(--mx-pill);
	background: var(--mx-g-brand);
	color: #fff;
	font-family: var(--mx-f-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: 0 0 20px rgba(225, 6, 0, 0.42);
}

@media (max-width: 768px) {
	.moto-el-filterbar { padding: 14px; }
	.moto-el-filter-label { min-width: 100%; }
}

/* ==========================================================================
   20. Elementor-reset overrides. Elementor's frontend stylesheet loads after
   this one and resets `img { border-radius:0; box-shadow:none }` and link
   box-shadows at (0,1,1) — every rule here exists to outrank that reset, so
   each selector deliberately carries 2+ classes. Do not "simplify" them.
   ========================================================================== */

/* Ticker chips are anchors: re-assert their rings. */
.moto-el-ticker a.moto-el-chip,
.moto-el-ticker span.moto-el-chip {
	box-shadow: var(--mx-ring), var(--mx-glow1);
}
.moto-el-ticker .moto-el-chip--live {
	box-shadow: 0 0 18px rgba(225, 6, 0, 0.45);
}
.moto-el-ticker .moto-el-chip--next {
	box-shadow: inset 0 0 0 1px rgba(225, 6, 0, 0.45), var(--mx-glow1);
}
.moto-el-ticker .moto-el-chip--last {
	box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55), var(--mx-glow1);
}
.moto-el-ticker a.moto-el-chip:hover {
	box-shadow: inset 0 0 0 1px rgba(225, 6, 0, 0.70), 0 0 18px rgba(225, 6, 0, 0.28), var(--mx-glow1);
}
/* Demo podium chips read "P1 / P2 / P3"; standings chips stay bare numbers. */
.moto-el-chip--podium .moto-el-chip-pos::before {
	content: "P";
}

/* Podium faces: circular crop + medal rings, clipped on the anchor. */
.moto-el-podium .moto-el-step-face {
	overflow: hidden;
	border-radius: 50%;
}
.moto-el-podium .moto-el-step-face img {
	border-radius: 50%;
	box-shadow: none;
}
.moto-el-podium .moto-el-step--p1 .moto-el-step-face {
	box-shadow: var(--mx-goldglow);
}
.moto-el-podium .moto-el-step--p2 .moto-el-step-face {
	box-shadow: 0 0 0 2px var(--mx-silver);
}
.moto-el-podium .moto-el-step--p3 .moto-el-step-face {
	box-shadow: 0 0 0 2px var(--mx-bronze);
}

/* Rounded media that carried its radius on the img. */
.moto-el-hero .moto-el-hero-media {
	border-radius: 9px;
	overflow: hidden;
}
.moto-el-hero .moto-el-hero-media img {
	border-radius: 9px;
}
.moto-el-fanboard .moto-el-ava img {
	border-radius: 50%;
}

/* Fantasy pick rows in the logged-out state are anchors. */
.moto-el-pick a.moto-el-pick-row {
	box-shadow: inset 0 0 0 1px var(--mx-line);
}
.moto-el-pick a.moto-el-pick-row:hover {
	box-shadow: inset 0 0 0 1px rgba(225, 6, 0, 0.55);
}

/* ==========================================================================
   21. track-svg root class. The widget's root is `moto-el-track-svg` (from
   the slug), not `moto-el-track` — these mirror section 14 for the class the
   markup actually carries.
   ========================================================================== */

.moto-el-track-svg {
	color: var(--mx-accent-2);
}
.moto-el-track-svg svg {
	display: block;
	width: 100%;
	height: auto;
}
.moto-el.moto-el-track--watermark {
	position: absolute;
	width: 42%;
	right: -5%;
	top: 24%;
	color: rgba(255, 59, 47, 0.30);
	filter: drop-shadow(0 0 16px rgba(225, 6, 0, 0.45));
	pointer-events: none;
	z-index: 0;
}

/* ==========================================================================
   22. Scheme toggle chrome: the plugin button ships unstyled.
   ========================================================================== */

.moto-el-scheme-toggle .sfmoto-toggle-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--mx-line);
	color: var(--mx-muted);
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.moto-el-scheme-toggle .sfmoto-toggle-btn:hover {
	background: var(--mx-panel-2);
	box-shadow: inset 0 0 0 1px rgba(225, 6, 0, 0.45);
	color: var(--mx-ink);
}
.moto-el-scheme-toggle .sfmoto-toggle-btn svg {
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   23. Standings row: the name column must never truncate before the bar has
   given up its slack — the bar flexes, the name doesn't.
   ========================================================================== */

.moto-el-row-link .moto-el-who {
	flex: 0 1 auto;
	min-width: 130px;
}
.moto-el-row-link .moto-el-bar {
	flex: 1 1 60px;
	min-width: 50px;
	max-width: 420px;
}

/* ==========================================================================
   24. Card fixes: the kit paints every h3 Oswald UPPERCASE at (0,1,1), which
   beats a single class — sport-card titles are sentence case in the design.
   And the 3-cell mini strip must never auto-wrap into ragged columns.
   ========================================================================== */

.moto-el-cards .moto-el-card-title,
.moto-el-card .moto-el-card-title {
	text-transform: none;
	letter-spacing: 0;
}
.moto-el-card .moto-el-strip--mini {
	grid-template-columns: repeat(3, 1fr);
}
.moto-el-strip--mini .moto-el-cell {
	min-width: 0;
}

/* Small third line inside a fused-strip cell (corner split, record holder). */
.moto-el-cell-sub {
	display: block;
	font-size: 10px;
	line-height: 1.3;
	color: var(--mx-muted);
	margin-top: 2px;
}

/* Team line under a podium name. */
.moto-el-step-team {
	display: block;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mx-muted);
	margin-top: 2px;
	max-width: 100%;
}