/* ============================================================================
   EdgeRanked v2 (ER2) design system — single authoritative source.

   STATUS: foundation only. No live template links this file yet.
   Served (once a page opts in) at /static/er2/er2.css.

   ISOLATION
   - Every rule is scoped under `.er2`. Nothing here can restyle a page that does
     not put class="er2" on a wrapper element (normally <body> or <div class="er2">).
   - Tokens are custom properties declared on `.er2` only, never on :root.
   - Component classes use the `er2-` prefix, so they cannot collide with the five
     legacy CSS systems (base.html, base_home.html, render_layout, board_ui, wnba).
   - Do not copy these tokens into other files. Pages attach this sheet.

   DIRECTION
   Sports-data product: dark nav, white content, one strong blue, thin rules,
   4-8px radii, no glow / glass / gradients, no logos or photography.
   Team identity is a text abbreviation badge only.

   BREAKPOINTS (mobile-first, min-width)
   base  <430   375 / 390 phones
   430          large phones: slightly roomier rows
   768          tablet: tables replace stacked rows, header grows
   1024         desktop: 2-column shell (main + rail)
   1440         wide desktop: wider container, same density
   ========================================================================== */

.er2 {
  /* ---- colour: brand --------------------------------------------------- */
  --er2-blue: #1f6feb;          /* primary: active nav, tabs, CTA, links, probability */
  --er2-blue-hover: #1858c4;    /* hover / pressed */
  --er2-blue-soft: #e8f0fe;     /* selected row / tint on light surfaces */
  --er2-blue-on-dark: #5b9bff;  /* blue text/underline on the dark header (AA on #0b0f17) */

  /* ---- colour: surfaces ------------------------------------------------ */
  --er2-nav: #0b0f17;           /* dark header + league nav + bottom nav */
  --er2-nav-2: #151b27;         /* raised element on dark (menus, hover) */
  --er2-nav-line: #263042;      /* divider on dark */
  --er2-nav-text: #eef2f8;
  --er2-nav-muted: #9aa6b8;
  --er2-bg: #f3f5f8;            /* page background behind panels */
  --er2-surface: #ffffff;       /* primary content surface */
  --er2-surface-2: #f8f9fb;     /* table header, zebra, quiet fill */

  /* ---- colour: text ---------------------------------------------------- */
  --er2-text: #14181f;          /* charcoal */
  --er2-text-2: #4b5563;        /* secondary */
  --er2-text-3: #646d7b;        /* metadata (>= 4.5:1 on white and on surface-2) */

  /* ---- colour: rules --------------------------------------------------- */
  --er2-line: #dde1e7;          /* thin divider / table rule */
  --er2-line-2: #c6ccd5;        /* panel border, input border */

  /* ---- colour: semantic (use only for real direction / change) --------- */
  --er2-pos: #137a43;
  --er2-pos-soft: #e6f4ec;
  --er2-neg: #b42318;
  --er2-neg-soft: #fdecea;
  --er2-warn: #8a5a00;
  --er2-warn-soft: #fdf3dc;

  /* ---- type ------------------------------------------------------------ */
  --er2-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --er2-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --er2-fs-h1: 26px;            /* page / hero title */
  --er2-fs-h2: 18px;            /* section header */
  --er2-fs-h3: 15px;            /* panel / row title */
  --er2-fs-body: 14px;
  --er2-fs-meta: 12px;          /* captions, timestamps */
  --er2-fs-data: 13px;          /* table / row numbers */
  --er2-fs-micro: 11px;         /* column labels, badges — never smaller */
  --er2-lh: 1.4;

  /* ---- spacing (mobile-first) ----------------------------------------- */
  --er2-gut: 16px;              /* page side padding (14-18) */
  --er2-sec: 20px;              /* between sections (16-24) */
  --er2-row-h: 48px;            /* compact row (44-60) */
  --er2-row-h-lg: 58px;         /* two-line row */
  --er2-cell-x: 10px;
  --er2-cell-y: 8px;
  --er2-gap: 8px;
  --er2-gap-lg: 14px;

  /* ---- radii: small only ---------------------------------------------- */
  --er2-r: 6px;                 /* panels, inputs */
  --er2-r-sm: 4px;              /* buttons, badges, tabs */

  /* ---- layout ---------------------------------------------------------- */
  --er2-maxw: 1200px;
  --er2-rail: 320px;            /* desktop right column */
  --er2-hdr-h: 52px;
  --er2-lg-h: 40px;
  --er2-bnav-h: 56px;

  --er2-focus: 0 0 0 2px #fff, 0 0 0 4px var(--er2-blue);

  margin: 0;
  font-family: var(--er2-font);
  font-size: var(--er2-fs-body);
  line-height: var(--er2-lh);
  color: var(--er2-text);
  background: var(--er2-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 430px)  { .er2 { --er2-gut: 18px; --er2-row-h: 50px; } }
@media (min-width: 768px)  { .er2 { --er2-gut: 20px; --er2-sec: 24px; --er2-hdr-h: 56px; --er2-fs-h1: 30px; --er2-fs-h2: 19px; --er2-cell-x: 12px; } }
@media (min-width: 1024px) { .er2 { --er2-gut: 24px; } }
@media (min-width: 1280px) { .er2 { --er2-rail: 340px; } }
@media (min-width: 1440px) { .er2 { --er2-maxw: 1320px; --er2-rail: 380px; } }

/* ---- reset, contained to the scope ---------------------------------------- */
.er2 *, .er2 *::before, .er2 *::after { box-sizing: border-box; }
.er2 a { color: var(--er2-blue); text-decoration: none; }
.er2 a:hover { color: var(--er2-blue-hover); text-decoration: underline; }
.er2 :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; padding: 0; }
.er2 :where(ul, ol) { list-style: none; }
.er2 img { max-width: 100%; display: block; }
.er2 :where(a, button, [role="tab"], input, select):focus-visible { outline: none; box-shadow: var(--er2-focus); border-radius: var(--er2-r-sm); }
.er2 .er2-num { font-variant-numeric: tabular-nums; }
.er2 .er2-mono { font-family: var(--er2-mono); font-variant-numeric: tabular-nums; }
.er2 .er2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.er2 [hidden] { display: none !important; }

/* ============================================================================
   PAGE SHELL
   ========================================================================== */
.er2 .er2-page { min-height: 100vh; display: flex; flex-direction: column; }
.er2 .er2-wrap { width: 100%; max-width: var(--er2-maxw); margin: 0 auto; padding: 0 var(--er2-gut); }
.er2 .er2-main { flex: 1 1 auto; padding-bottom: calc(var(--er2-bnav-h) + 12px); }   /* clear the bottom nav */
.er2 .er2-section { padding-top: var(--er2-sec); }
.er2 .er2-stack > * + * { margin-top: var(--er2-sec); }
.er2 .er2-title { font-size: var(--er2-fs-h1); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.er2 .er2-sub { margin-top: 4px; font-size: var(--er2-fs-body); color: var(--er2-text-2); }

/* Desktop two-column shell: main 65-70% + right rail. Stacks below 1024. */
.er2 .er2-cols { display: block; }
.er2 .er2-cols__rail > * { margin-top: var(--er2-sec); }
@media (min-width: 1024px) {
  .er2 .er2-main { padding-bottom: 32px; }
  .er2 .er2-cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--er2-rail); column-gap: 28px; align-items: start; }
  .er2 .er2-cols__rail > :first-child { margin-top: 0; }
}

/* ============================================================================
   DARK SPORTS HEADER + LEAGUE NAV
   ========================================================================== */
.er2 .er2-hdr { background: var(--er2-nav); color: var(--er2-nav-text); position: sticky; top: 0; z-index: 50; }
.er2 .er2-hdr__bar { display: flex; align-items: center; gap: 10px; height: var(--er2-hdr-h); }
.er2 .er2-hdr__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--er2-nav-text); font-weight: 800; font-size: 18px; letter-spacing: 0.01em; font-style: italic; }
.er2 .er2-hdr__brand:hover { color: #fff; text-decoration: none; }
.er2 .er2-hdr__brand img { width: 26px; height: 26px; }
.er2 .er2-hdr__word { display: inline-block; }   /* wrap "Edge<b>Ranked</b>" so flex gap does not split it */
.er2 .er2-hdr__brand b { font-weight: 800; color: var(--er2-blue-on-dark); }   /* "RANKED" half of the wordmark */
.er2 .er2-hdr__spacer { flex: 1 1 auto; }
.er2 .er2-hdr__actions { display: inline-flex; align-items: center; gap: 4px; }
.er2 .er2-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 0; border-radius: var(--er2-r-sm); color: var(--er2-nav-text); cursor: pointer; font: inherit; }
.er2 .er2-iconbtn:hover { background: var(--er2-nav-2); color: #fff; text-decoration: none; }
.er2 .er2-iconbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* League nav: NFL | MLB | NBA | WNBA | UFC | PGA. Scrolls sideways if it ever must. */
.er2 .er2-lg { background: var(--er2-nav); border-top: 1px solid var(--er2-nav-line); border-bottom: 1px solid var(--er2-nav-line); }
.er2 .er2-lg__in { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.er2 .er2-lg__in::-webkit-scrollbar { display: none; }
.er2 .er2-lg__a { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; height: var(--er2-lg-h); padding: 0 12px; color: var(--er2-nav-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; border-bottom: 3px solid transparent; }
.er2 .er2-lg__a:hover { color: #fff; text-decoration: none; }
.er2 .er2-lg__a[aria-current="page"], .er2 .er2-lg__a.is-active { color: var(--er2-blue-on-dark); border-bottom-color: var(--er2-blue); }
@media (min-width: 768px) { .er2 .er2-lg__a { flex: 0 0 auto; padding: 0 16px; } }

/* ============================================================================
   SECTION HEADERS
   ========================================================================== */
.er2 .er2-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.er2 .er2-sh__t { font-size: var(--er2-fs-h2); font-weight: 800; line-height: 1.2; letter-spacing: -0.005em; }
.er2 .er2-sh__more { font-size: var(--er2-fs-meta); font-weight: 700; white-space: nowrap; }
.er2 .er2-kicker { font-size: var(--er2-fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--er2-text-3); }

/* ============================================================================
   BUTTONS (4-6px radius, compact)
   ========================================================================== */
.er2 .er2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--er2-r-sm); font: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; }
.er2 .er2-btn:hover { text-decoration: none; }
.er2 .er2-btn--primary { background: var(--er2-blue); border-color: var(--er2-blue); color: #fff; }
.er2 .er2-btn--primary:hover { background: var(--er2-blue-hover); border-color: var(--er2-blue-hover); color: #fff; }
.er2 .er2-btn--secondary { background: var(--er2-surface); border-color: var(--er2-line-2); color: var(--er2-text); }
.er2 .er2-btn--secondary:hover { border-color: var(--er2-blue); color: var(--er2-blue); }
.er2 .er2-btn--on-dark { background: transparent; border-color: var(--er2-nav-line); color: var(--er2-nav-text); }
.er2 .er2-btn--on-dark:hover { background: var(--er2-nav-2); color: #fff; }
.er2 .er2-btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.er2 .er2-btn--block { display: flex; width: 100%; }
.er2 .er2-btn[disabled], .er2 .er2-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ============================================================================
   TABS (Pitchers | Hitters | Matchups ... ; Overview | Projections ...)
   ========================================================================== */
.er2 .er2-tabs { display: flex; overflow-x: auto; scrollbar-width: none; background: var(--er2-surface); border-bottom: 1px solid var(--er2-line); }
.er2 .er2-tabs::-webkit-scrollbar { display: none; }
.er2 .er2-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 10px; color: var(--er2-text-2); font-size: 14px; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.er2 .er2-tab:hover { color: var(--er2-text); text-decoration: none; }
.er2 .er2-tab[aria-selected="true"], .er2 .er2-tab[aria-current="page"], .er2 .er2-tab.is-active { color: var(--er2-blue); border-bottom-color: var(--er2-blue); font-weight: 700; }
@media (min-width: 430px) { .er2 .er2-tab { padding: 0 14px; } }
@media (min-width: 768px) { .er2 .er2-tab { flex: 0 0 auto; padding: 0 18px; } }

/* Filter bar: native selects, compact */
.er2 .er2-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
.er2 .er2-select { flex: 1 1 0; min-width: 96px; height: 36px; padding: 0 28px 0 10px; font: inherit; font-size: 13px; color: var(--er2-text); background: var(--er2-surface); border: 1px solid var(--er2-line-2); border-radius: var(--er2-r-sm); }

/* ============================================================================
   BADGES
   ========================================================================== */
/* Team abbreviation badge: text only, square-ish, identical across sports. */
.er2 .er2-tm { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 28px; padding: 0 2px; border-radius: var(--er2-r-sm); background: var(--er2-blue); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.er2 .er2-tm--sm { width: 34px; height: 22px; font-size: 11px; }
.er2 .er2-tm--lg { width: 56px; height: 40px; font-size: 16px; }
.er2 .er2-tm--dark { background: var(--er2-nav); }
.er2 .er2-tm--outline { background: var(--er2-surface); color: var(--er2-text); box-shadow: inset 0 0 0 1px var(--er2-line-2); }

/* Status / signal badge. Colour never carries meaning alone: always print the word. */
.er2 .er2-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: var(--er2-r-sm); background: var(--er2-surface-2); color: var(--er2-text-2); box-shadow: inset 0 0 0 1px var(--er2-line); font-size: var(--er2-fs-micro); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.er2 .er2-badge--blue { background: var(--er2-blue-soft); color: var(--er2-blue-hover); box-shadow: none; }
.er2 .er2-badge--live { background: var(--er2-blue); color: #fff; box-shadow: none; }
.er2 .er2-badge--pos { background: var(--er2-pos-soft); color: var(--er2-pos); box-shadow: none; }
.er2 .er2-badge--neg { background: var(--er2-neg-soft); color: var(--er2-neg); box-shadow: none; }
.er2 .er2-badge--warn { background: var(--er2-warn-soft); color: var(--er2-warn); box-shadow: none; }

/* Edge value (e.g. +12.4%): blue by default; sign colour is opt-in. */
.er2 .er2-signal { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--er2-blue); }
.er2 .er2-signal--pos { color: var(--er2-pos); }
.er2 .er2-signal--neg { color: var(--er2-neg); }
.er2 .er2-signal--flat { color: var(--er2-text-3); font-weight: 600; }

/* Four-segment strength meter (the ▮▮▮▯ in the mockup). Set --er2-fill: 0-4 via .is-1..is-4. */
.er2 .er2-meter { display: inline-flex; gap: 2px; vertical-align: middle; }
.er2 .er2-meter i { width: 5px; height: 12px; border-radius: 1px; background: var(--er2-line-2); }
.er2 .er2-meter.is-1 i:nth-child(-n+1), .er2 .er2-meter.is-2 i:nth-child(-n+2),
.er2 .er2-meter.is-3 i:nth-child(-n+3), .er2 .er2-meter.is-4 i:nth-child(-n+4) { background: var(--er2-blue); }

/* ============================================================================
   PANELS, DIVIDERS
   ========================================================================== */
.er2 .er2-panel { background: var(--er2-surface); border: 1px solid var(--er2-line); border-radius: var(--er2-r); }
.er2 .er2-panel__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px var(--er2-cell-x); border-bottom: 1px solid var(--er2-line); }
.er2 .er2-panel__t { font-size: var(--er2-fs-h3); font-weight: 800; }
.er2 .er2-panel__bd { padding: 12px var(--er2-cell-x); }
.er2 .er2-panel__ft { padding: 10px var(--er2-cell-x); border-top: 1px solid var(--er2-line); font-size: var(--er2-fs-meta); font-weight: 700; }
/* Flat variant: no box, only a top rule — "not every section needs a container". */
.er2 .er2-flat { border-top: 1px solid var(--er2-line); padding-top: var(--er2-sec); }
.er2 .er2-rule { height: 1px; border: 0; margin: 0; background: var(--er2-line); }
.er2 .er2-bleed { margin-left: calc(var(--er2-gut) * -1); margin-right: calc(var(--er2-gut) * -1); border-radius: 0; border-left: 0; border-right: 0; }
@media (min-width: 768px) { .er2 .er2-bleed { margin-left: 0; margin-right: 0; border-radius: var(--er2-r); border-left: 1px solid var(--er2-line); border-right: 1px solid var(--er2-line); } }

/* ============================================================================
   LISTS, ROWS, MATCHUP ROWS
   ========================================================================== */
.er2 .er2-list > li, .er2 .er2-row { display: flex; align-items: center; gap: 10px; min-height: var(--er2-row-h); padding: 6px var(--er2-cell-x); border-bottom: 1px solid var(--er2-line); font-size: var(--er2-fs-data); }
.er2 .er2-list > li:last-child { border-bottom: 0; }
.er2 .er2-row--lg { min-height: var(--er2-row-h-lg); }
.er2 a.er2-row, .er2 .er2-list a.er2-row { color: inherit; }
.er2 a.er2-row:hover { background: var(--er2-surface-2); text-decoration: none; }
.er2 .er2-row.is-selected { background: var(--er2-blue-soft); }
.er2 .er2-row__main { flex: 1 1 auto; min-width: 0; }
.er2 .er2-row__t { display: block; font-size: var(--er2-fs-h3); font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.er2 .er2-row__m { display: block; margin-top: 1px; font-size: var(--er2-fs-meta); color: var(--er2-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.er2 .er2-row__end { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; color: var(--er2-text-2); }

/* Matchup row:  SD  @  MIL            4:05 PM */
.er2 .er2-match { display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: 8px; min-height: var(--er2-row-h); padding: 6px var(--er2-cell-x); border-bottom: 1px solid var(--er2-line); color: var(--er2-text); }
.er2 .er2-match:last-child { border-bottom: 0; }
.er2 a.er2-match:hover { background: var(--er2-surface-2); text-decoration: none; }
.er2 .er2-match__tm { min-width: 34px; font-size: 15px; font-weight: 800; letter-spacing: 0.01em; }
.er2 .er2-match__at { color: var(--er2-text-3); font-size: var(--er2-fs-meta); font-weight: 600; text-align: center; }
.er2 .er2-match__when { text-align: right; font-size: var(--er2-fs-data); color: var(--er2-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Update / note feed row: leading arrow, headline, one line of meta. Real data only. */
.er2 .er2-note { display: flex; gap: 10px; padding: 10px var(--er2-cell-x); border-bottom: 1px solid var(--er2-line); }
.er2 .er2-note:last-child { border-bottom: 0; }
.er2 .er2-note__i { flex: 0 0 18px; font-weight: 800; color: var(--er2-text-3); text-align: center; }
.er2 .er2-note__i.is-up { color: var(--er2-pos); }
.er2 .er2-note__i.is-down { color: var(--er2-neg); }
.er2 .er2-note__t { font-weight: 700; font-size: var(--er2-fs-body); line-height: 1.25; }
.er2 .er2-note__m { margin-top: 1px; font-size: var(--er2-fs-meta); color: var(--er2-text-2); }

/* ============================================================================
   STAT CELLS + SUMMARY STRIP
   ========================================================================== */
.er2 .er2-stat { text-align: center; padding: 10px 6px; min-width: 0; }
.er2 .er2-stat__v { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.er2 .er2-stat__l { margin-top: 3px; font-size: var(--er2-fs-micro); font-weight: 600; color: var(--er2-text-3); line-height: 1.2; }
.er2 .er2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--er2-surface); border: 1px solid var(--er2-line); border-radius: var(--er2-r); }
.er2 .er2-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.er2 .er2-stats--2 > .er2-stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.er2 .er2-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.er2 .er2-stats > .er2-stat { border-right: 1px solid var(--er2-line); border-bottom: 1px solid var(--er2-line); }
.er2 .er2-stats > .er2-stat:last-child { border-right: 0; }
.er2 .er2-stats--4 > .er2-stat:nth-child(2n) { border-right: 0; }
@media (min-width: 768px) { .er2 .er2-stats--4 > .er2-stat:nth-child(2n) { border-right: 1px solid var(--er2-line); } .er2 .er2-stats--4 > .er2-stat:last-child { border-right: 0; } }
@media (min-width: 768px) { .er2 .er2-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Summary strip: SLATE | UPDATED | MODEL. Cells with no real value are removed by the template. */
.er2 .er2-strip { display: flex; background: var(--er2-surface); border-top: 1px solid var(--er2-line); border-bottom: 1px solid var(--er2-line); }
.er2 .er2-strip__c { flex: 1 1 0; min-width: 0; padding: 10px var(--er2-cell-x); border-right: 1px solid var(--er2-line); }
.er2 .er2-strip__c:last-child { border-right: 0; }
.er2 .er2-strip__k { font-size: var(--er2-fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-strip__v { margin-top: 2px; font-size: 15px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.er2 .er2-strip__s { margin-top: 1px; font-size: var(--er2-fs-meta); color: var(--er2-text-2); }

/* Quick-nav: Projections / Matchups / Trends ... icon + label, selected = blue. */
.er2 .er2-quick { background: var(--er2-surface); border-bottom: 1px solid var(--er2-line); }
.er2 .er2-quick__in { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-top: 0; padding-bottom: 0; }
.er2 .er2-quick__in::-webkit-scrollbar { display: none; }
.er2 .er2-quick__a { flex: 1 0 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; color: var(--er2-text); font-size: var(--er2-fs-meta); font-weight: 600; line-height: 1.2; text-align: center; }
.er2 .er2-quick__a:hover { color: var(--er2-blue); text-decoration: none; }
.er2 .er2-quick__a[aria-current="page"], .er2 .er2-quick__a.is-active { color: var(--er2-blue); }
.er2 .er2-quick__a svg { width: 22px; height: 22px; color: var(--er2-blue); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.er2 .er2-btn svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================================
   BOARD: responsive row layout on mobile, true table from 768.
   Markup contract (see design_system/er2/specimen.html):
     <div class="er2-board"> <div class="er2-board__hd">…labels…</div>
       <div class="er2-board__r"> <div class="er2-board__id">badge + name + meta</div>
         <div class="er2-board__c" data-l="Proj K">6.6</div> … </div> </div>
   Mobile shows identity + up to four labelled value cells; no horizontal scroll.
   ========================================================================== */
.er2 .er2-board { background: var(--er2-surface); border: 1px solid var(--er2-line); border-radius: var(--er2-r); overflow: hidden; }
.er2 .er2-board__hd { display: none; }
.er2 .er2-board__r { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, minmax(44px, auto)); align-items: center; column-gap: 10px; min-height: var(--er2-row-h-lg); padding: 8px var(--er2-cell-x); border-bottom: 1px solid var(--er2-line); font-size: var(--er2-fs-data); }
.er2 .er2-board__r:last-child { border-bottom: 0; }
.er2 a.er2-board__r { color: inherit; }
.er2 a.er2-board__r:hover { background: var(--er2-surface-2); text-decoration: none; }
.er2 .er2-board__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.er2 .er2-board__c { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* Narrow phones: label each value cell so columns stay self-explanatory without a header row. */
.er2 .er2-board__c::before { content: attr(data-l); display: block; white-space: normal; line-height: 1.2; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--er2-text-3); }
@media (max-width: 479.98px) {
  /* 375 / 390 / 430: identity on its own line, values in an even row beneath. */
  .er2 .er2-board__r { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 6px; }
  .er2 .er2-board__id { grid-column: 1 / -1; }
  .er2 .er2-board__c { text-align: left; }
}
@media (min-width: 768px) {
  .er2 .er2-board__hd, .er2 .er2-board__r { grid-template-columns: minmax(180px, 2.2fr) repeat(var(--er2-cols, 4), minmax(72px, 1fr)); }
  .er2 .er2-board__hd { display: grid; align-items: center; column-gap: 10px; padding: 8px var(--er2-cell-x); background: var(--er2-surface-2); border-bottom: 1px solid var(--er2-line-2); font-size: var(--er2-fs-micro); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--er2-text-3); }
  .er2 .er2-board__hd > :not(:first-child) { text-align: right; }
  .er2 .er2-board__r { min-height: var(--er2-row-h); row-gap: 0; }
  .er2 .er2-board__id { grid-column: auto; }
  .er2 .er2-board__c { text-align: right; }
  .er2 .er2-board__c::before { display: none; }
}

/* Plain data table for desktop-only surfaces. */
.er2 .er2-table { width: 100%; border-collapse: collapse; background: var(--er2-surface); font-size: var(--er2-fs-data); font-variant-numeric: tabular-nums; }
.er2 .er2-table th { padding: 8px var(--er2-cell-x); text-align: right; background: var(--er2-surface-2); border-bottom: 1px solid var(--er2-line-2); font-size: var(--er2-fs-micro); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--er2-text-3); white-space: nowrap; }
.er2 .er2-table td { padding: var(--er2-cell-y) var(--er2-cell-x); text-align: right; border-bottom: 1px solid var(--er2-line); }
.er2 .er2-table :is(th, td):first-child { text-align: left; }
.er2 .er2-table tbody tr:hover { background: var(--er2-surface-2); }
.er2 .er2-table tr.is-selected { background: var(--er2-blue-soft); }

/* Key/value list (Projection Details). */
.er2 .er2-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px var(--er2-cell-x); border-bottom: 1px solid var(--er2-line); font-size: var(--er2-fs-data); }
.er2 .er2-kv > div:last-child { border-bottom: 0; }
.er2 .er2-kv dt { color: var(--er2-text-2); }
.er2 .er2-kv dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================================
   MOBILE BOTTOM NAV
   Items are flex:1, so 3, 4 or 5 entries all fill the bar. A destination with no
   backing route (My Board, News) is simply not rendered; nothing reflows.
   ========================================================================== */
.er2 .er2-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; height: calc(var(--er2-bnav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--er2-nav); border-top: 1px solid var(--er2-nav-line); }
.er2 .er2-bnav__a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--er2-nav-muted); font-size: 10.5px; font-weight: 600; text-decoration: none; }
.er2 .er2-bnav__a:hover { color: #fff; text-decoration: none; }
.er2 .er2-bnav__a[aria-current="page"], .er2 .er2-bnav__a.is-active { color: var(--er2-blue-on-dark); }
.er2 .er2-bnav__a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) { .er2 .er2-bnav { display: none; } }

/* ============================================================================
   OPTIONAL / EMPTY STATES
   A module whose source is missing is not rendered at all (preferred). When a
   page must keep the slot, mark it .er2-optional[hidden]; it takes no space.
   .er2-empty is for a genuinely empty-but-expected list (e.g. no games today).
   ========================================================================== */
.er2 .er2-optional[hidden] { display: none !important; }
.er2 .er2-empty { padding: 20px var(--er2-cell-x); text-align: center; color: var(--er2-text-3); font-size: var(--er2-fs-data); }

/* ============================================================================
   PAGE PRIMITIVES ADDED IN PHASE 2 (homepage): shield mark, menu, hero,
   matchup meta line, link grid, footer, note line.
   ========================================================================== */

/* Shield mark: the production /brand/logo.png is a 1024x571 canvas with the shield in
   x 35-68%, y 17-95%. This crops to the shield (same asset and route the current header
   uses, no new file), on the white chip the asset is opaque-white for. */
.er2 .er2-hdr__mk { width: 22px; height: 28px; flex: none; border-radius: 3px; background: #fff url('/brand/logo.png') no-repeat; background-size: 58.4px 32.3px; background-position: -19.2px -4.2px; }

/* CSS-only menu (works without JavaScript): hidden checkbox + :checked sibling. */
.er2 .er2-menu__tgl { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.er2 .er2-menu { display: none; background: var(--er2-nav-2); border-top: 1px solid var(--er2-nav-line); max-height: calc(100vh - var(--er2-hdr-h)); overflow-y: auto; }
.er2 .er2-menu__tgl:checked ~ .er2-menu { display: block; }
.er2 .er2-menu__tgl:focus-visible ~ .er2-hdr__bar label[for] { box-shadow: var(--er2-focus); }
.er2 .er2-menu__lbl { margin: 14px 0 6px; font-size: var(--er2-fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--er2-nav-muted); }
.er2 .er2-menu__sports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.er2 .er2-menu a { color: var(--er2-nav-text); }
.er2 .er2-menu a:hover { color: #fff; text-decoration: none; }
.er2 .er2-menu__sports a { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; padding: 0 12px; background: var(--er2-nav); border: 1px solid var(--er2-nav-line); border-radius: var(--er2-r-sm); font-weight: 700; font-size: 14px; }
.er2 .er2-menu__sports small { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--er2-nav-muted); }
.er2 .er2-menu__links { padding-bottom: 14px; }
.er2 .er2-menu__links a { display: flex; align-items: center; justify-content: space-between; min-height: 46px; border-bottom: 1px solid var(--er2-nav-line); font-size: 14px; font-weight: 600; }
.er2 .er2-menu__links a:last-child { border-bottom: 0; }
.er2 .er2-menu svg { width: 16px; height: 16px; fill: none; stroke: var(--er2-nav-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.er2 .er2-hdr .er2-btn { min-height: 34px; padding: 0 12px; font-size: 13px; }

/* Hero: compact, dark, original line motif per sport. Never a photograph or a logo. */
.er2 .er2-hero { position: relative; overflow: hidden; background: var(--er2-nav); color: var(--er2-nav-text); padding: 14px 0 18px; }
.er2 .er2-hero > .er2-wrap { position: relative; }
.er2 .er2-hero__k { font-size: var(--er2-fs-micro); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--er2-nav-muted); }
.er2 .er2-hero__t { margin-top: 6px; font-size: 28px; line-height: 1.08; font-weight: 800; letter-spacing: -0.015em; color: #fff; }
.er2 .er2-hero__t em { display: block; font-style: normal; color: var(--er2-blue-on-dark); }
.er2 .er2-hero__s { margin-top: 8px; max-width: 30ch; font-size: 13.5px; line-height: 1.4; color: #c3ccda; }
.er2 .er2-hero .er2-btn { margin-top: 14px; }

/* Matchup row with a second meta line (venue / conditions / status). */

/* Report rows (latest results): name + opponent on the left, projected -> actual and delta right. */
.er2 .er2-fine { padding: 9px var(--er2-cell-x); font-size: var(--er2-fs-meta); line-height: 1.4; color: var(--er2-text-3); }

/* Access strip (price discovery): one line, one subline, one button. Text comes from the plan config. */
.er2 .er2-access { display: flex; flex-direction: column; gap: 10px; padding: 14px var(--er2-cell-x); background: var(--er2-surface); border: 1px solid var(--er2-line); border-left: 3px solid var(--er2-blue); border-radius: var(--er2-r); }
.er2 .er2-access__t { font-size: var(--er2-fs-h3); font-weight: 800; }
.er2 .er2-access__s { margin-top: 2px; font-size: var(--er2-fs-meta); line-height: 1.4; color: var(--er2-text-2); }

/* Footer: plain link grid on the dark nav colour. */
.er2 .er2-foot { margin-top: 0; padding: 18px 0 8px; background: var(--er2-nav); color: var(--er2-nav-muted); }
.er2 .er2-foot a { color: #c3ccda; font-size: 13px; font-weight: 600; }
.er2 .er2-foot a:hover { color: #fff; }
.er2 .er2-foot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.er2 .er2-foot__grid a { display: flex; align-items: center; min-height: 40px; border-bottom: 1px solid var(--er2-nav-line); }
.er2 .er2-foot__h { margin: 0 0 4px; font-size: var(--er2-fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--er2-nav-muted); }
.er2 .er2-foot__h--gap { margin-top: 16px; }
.er2 .er2-foot__fine { margin-top: 16px; font-size: var(--er2-fs-meta); line-height: 1.5; }
.er2 .er2-page--foot .er2-main { padding-bottom: 0; }
.er2 .er2-foot { padding-bottom: calc(var(--er2-bnav-h) + 16px + env(safe-area-inset-bottom, 0px)); }   /* clear the fixed bottom nav */
@media (min-width: 1024px) { .er2 .er2-foot { padding-bottom: 20px; } }
@media (min-width: 768px) { .er2 .er2-foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .er2 .er2-hero__t { font-size: 34px; } .er2 .er2-hero__s { max-width: 46ch; } }

/* ============================================================================
   PHASE 2 REFINEMENT: denser phone presentation. Scoped to < 768px so the tablet
   and desktop treatment is unchanged.
   ========================================================================== */
@media (max-width: 767.98px) {
  .er2 .er2-hero { padding: 8px 0 10px; }
  .er2 .er2-hero__t { margin-top: 3px; line-height: 1.04; }
  .er2 .er2-hero__s { margin-top: 4px; max-width: none; }
  .er2 .er2-hero .er2-btn { margin-top: 8px; min-height: 34px; }

  .er2 .er2-quick__a { flex: 1 1 0; min-width: 0; gap: 3px; padding: 7px 2px 6px; }
  .er2 .er2-quick__a svg { width: 20px; height: 20px; }


  .er2 .er2-menu__lbl { margin: 10px 0 5px; }
  .er2 .er2-menu__sports { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .er2 .er2-menu__sports a { min-height: 38px; padding: 0 10px; font-size: 13.5px; }
  .er2 .er2-menu__links { padding-bottom: 6px; }
  .er2 .er2-menu__links a { min-height: 40px; }
}

/* ============================================================================
   PHASE 3: PAGE LAYOUT + DESKTOP HOMEPAGE
   One DOM, two layouts. Below 1024px the two column wrappers are `display:contents`
   and `order` reproduces the approved phone sequence (quick, strip, boards, results,
   performance, access) exactly. From 1024px they become the main column and right rail.
   ========================================================================== */
.er2 .er2-home { display: flex; flex-direction: column; }
.er2 .er2-home__main, .er2 .er2-home__rail { display: contents; }
.er2 .er2-o-quick { order: 1; } .er2 .er2-o-strip { order: 2; } .er2 .er2-o-board { order: 3; } .er2 .er2-o-hr { order: 4; }
.er2 .er2-o-games { order: 5; } .er2 .er2-o-results { order: 6; } .er2 .er2-o-perf { order: 7; } .er2 .er2-o-access { order: 8; }
.er2 .er2-home--nfl .er2-o-games { order: 3; } .er2 .er2-home--nfl .er2-o-board { order: 4; } .er2 .er2-home--nfl .er2-o-hr { order: 5; }
/* Phone/tablet: quick links and the strip are full-bleed bands (they sit inside the wrap, so cancel its gutter). */
.er2 .er2-o-quick, .er2 .er2-o-strip { margin-left: calc(var(--er2-gut) * -1); margin-right: calc(var(--er2-gut) * -1); }
.er2 .er2-rail__h { display: none; }
.er2 .er2-quick__a .er2-quick__chev { display: none; }
.er2 .er2-hdr__links { display: none; }

@media (min-width: 1024px) {
  .er2 { --er2-hdr-h: 52px; --er2-lg-h: 38px; }

  /* ---- header: one compact bar; text links replace the drawer ---- */
  .er2 .er2-hdr__bar > label.er2-iconbtn { display: none; }
  .er2 .er2-menu, .er2 .er2-menu__tgl:checked ~ .er2-menu { display: none; }
  .er2 .er2-hdr__links { display: flex; gap: 2px; margin-right: 8px; }
  .er2 .er2-hdr__links a { display: inline-flex; align-items: center; height: 34px; padding: 0 10px; border-radius: var(--er2-r-sm); color: var(--er2-nav-muted); font-size: 13px; font-weight: 600; }
  .er2 .er2-hdr__links a:hover { background: var(--er2-nav-2); color: #fff; text-decoration: none; }
  .er2 .er2-hdr .er2-btn { min-height: 30px; padding: 0 12px; font-size: 13px; }
  .er2 .er2-hdr .er2-iconbtn { width: 34px; height: 34px; }
  .er2 .er2-lg__in { gap: 2px; }
  .er2 .er2-lg__a { padding: 0 16px; font-size: 13px; }

  /* ---- hero: compact band, text left, CTA right ---- */
  .er2 .er2-hero { padding: 14px 0 16px; }
  .er2 .er2-hero > .er2-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
  .er2 .er2-hero__k, .er2 .er2-hero__t, .er2 .er2-hero__s { grid-column: 1; }
  .er2 .er2-hero__t { margin-top: 3px; font-size: 30px; line-height: 1.1; }
  .er2 .er2-hero__t em { display: inline; margin-left: 0.3em; }
  .er2 .er2-hero__s { margin-top: 4px; max-width: none; }
  .er2 .er2-hero .er2-btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }

  /* ---- two columns ---- */
  .er2 .er2-home { display: grid; grid-template-columns: minmax(0, 1fr) var(--er2-rail); column-gap: 28px; align-items: start; padding-top: 20px; padding-bottom: 28px; }
  .er2 .er2-home__main, .er2 .er2-home__rail { display: flex; flex-direction: column; min-width: 0; }
  .er2 .er2-home__main > .er2-section { padding-top: 0; margin-bottom: 24px; }
  .er2 .er2-home__rail > * { margin: 0 0 22px; }
  .er2 .er2-home__rail > .er2-section { padding-top: 0; }
  .er2 .er2-home__rail > .er2-o-strip { order: 1; } .er2 .er2-home__rail > .er2-o-perf { order: 2; }
  .er2 .er2-home__rail > .er2-o-quick { order: 3; } .er2 .er2-home__rail > .er2-o-access { order: 4; }

  /* ---- projections: a true table with a separate Matchup column ---- */

  /* ---- results: columns instead of an inline "6.0 -> 10" ---- */

  /* ---- rail: status, performance, quick links, access ---- */
  .er2 .er2-home__rail .er2-strip { flex-direction: column; background: var(--er2-surface); border: 1px solid var(--er2-line); border-radius: var(--er2-r); }
  .er2 .er2-home__rail .er2-strip__c { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--er2-line); }
  .er2 .er2-home__rail .er2-strip__c:last-child { border-bottom: 0; }
  .er2 .er2-home__rail .er2-strip__k { grid-column: 1; grid-row: 1; }
  .er2 .er2-home__rail .er2-strip__v { grid-column: 2; grid-row: 1; margin-top: 0; }
  .er2 .er2-home__rail .er2-strip__s { grid-column: 2; grid-row: 2; }
  .er2 .er2-home__rail .er2-quick { background: var(--er2-surface); border: 1px solid var(--er2-line); border-radius: var(--er2-r); }
  .er2 .er2-rail__h { display: block; margin: 0; padding: 10px 12px; font-size: 16px; font-weight: 800; border-bottom: 1px solid var(--er2-line); }
  .er2 .er2-home__rail .er2-quick__in { display: block; max-width: none; margin: 0; padding: 0; overflow: visible; }
  .er2 .er2-home__rail .er2-quick__a { flex-direction: row; justify-content: flex-start; gap: 10px; width: 100%; min-height: 42px; padding: 0 12px; border-bottom: 1px solid var(--er2-line); font-size: 13.5px; text-align: left; }
  .er2 .er2-home__rail .er2-quick__a:last-child { border-bottom: 0; }
  .er2 .er2-home__rail .er2-quick__a:hover { background: var(--er2-surface-2); }
  .er2 .er2-quick__a span { flex: 1 1 auto; }
  .er2 .er2-quick__a .er2-quick__chev { display: block; width: 14px; height: 14px; color: var(--er2-text-3); }

  /* ---- footer ---- */
  .er2 .er2-foot__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ============================================================================
   CONTENT SYSTEM (everything below the hero). One component language for every sport:
     er2-sec      section: header (title / secondary label / action) + content
     er2-proj     projection board: name + context, ONE dominant number, a secondary tier
     er2-lead     leaders list (badge, name, tier)
     er2-games    matchup rows: away - home - time/status - chevron
     er2-resx     results: projected (secondary), actual (bold), difference
     er2-rep      stat report: label/caption left, figure right
   Principles: white sheet, hairline row dividers instead of boxes, alignment and type
   weight for hierarchy, blue only on the primary figure / links, no nested cards.
   ========================================================================== */
.er2 .er2-main { background: var(--er2-surface); }
.er2 .er2-home { padding-bottom: 24px; }
.er2 .er2-go { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- shared section header ---- */
.er2 .er2-sec__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.er2 .er2-sec__tt { min-width: 0; }
.er2 .er2-sec__t { font-size: 19px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.er2 .er2-sec__s { margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--er2-text-3); }
.er2 .er2-sec__a { flex: none; display: inline-flex; align-items: center; gap: 1px; padding-top: 3px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.er2 .er2-sec .er2-fine { padding: 10px 0 0; }
.er2 .er2-sec .er2-fine a { display: inline-flex; align-items: center; font-weight: 700; }
.er2 .er2-sec .er2-fine--lead { padding: 0 0 6px; }

/* ---- projection board ---- */
.er2 .er2-proj__hd { display: none; }
.er2 .er2-proj__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id p" "sec sec"; column-gap: 12px; row-gap: 5px; padding: 11px 0 10px; border-top: 1px solid var(--er2-line); }
.er2 .er2-proj__hd + .er2-proj__r { border-top-color: var(--er2-line-2); }
.er2 .er2-proj__id { grid-area: id; display: flex; align-items: center; gap: 9px; min-width: 0; }
.er2 .er2-proj__nm { display: flex; flex-direction: column; min-width: 0; }
.er2 .er2-proj__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 1.2; font-weight: 700; }
.er2 .er2-proj__ctx { font-size: 12px; line-height: 1.3; color: var(--er2-text-3); }
.er2 .er2-proj__mu { display: none; }
.er2 .er2-proj__p { grid-area: p; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; line-height: 1; }
.er2 .er2-proj__p b { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--er2-blue); font-variant-numeric: tabular-nums; }
.er2 .er2-proj__p span { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-proj__sec { grid-area: sec; display: flex; flex-wrap: wrap; gap: 2px 16px; padding-left: 43px; list-style: none; }
.er2 .er2-proj__sec li { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.er2 .er2-proj__sec li span { font-size: 11.5px; color: var(--er2-text-3); }
.er2 .er2-proj__sec li b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- leaders list ---- */
.er2 .er2-lead { list-style: none; }
.er2 .er2-lead__r { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid var(--er2-line); }
.er2 .er2-lead__nm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.er2 .er2-lead__nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.25; }
.er2 .er2-lead__nm span, .er2 .er2-lead__t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-lead__t { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.er2 .er2-lead__t b { font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--er2-blue); }

/* ---- games ---- */
.er2 .er2-g { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; row-gap: 1px; padding: 11px 0; border-top: 1px solid var(--er2-line); color: inherit; }
.er2 .er2-g--static { grid-template-columns: minmax(0, 1fr) auto; }
.er2 a.er2-g:hover { background: var(--er2-surface-2); color: inherit; text-decoration: none; }
.er2 .er2-g__m { display: flex; align-items: baseline; gap: 8px; font-size: 17px; line-height: 1.2; }
.er2 .er2-g__m b { min-width: 34px; font-weight: 800; letter-spacing: 0.01em; }
.er2 .er2-g__m i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--er2-text-3); }
.er2 .er2-g__w { font-size: 13px; text-align: right; white-space: nowrap; color: var(--er2-text-2); font-variant-numeric: tabular-nums; }
.er2 .er2-g__w em { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--er2-blue); }
.er2 .er2-g .er2-go { color: var(--er2-text-3); }
.er2 .er2-g__x { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-g__x b { font-weight: 700; color: var(--er2-text-2); }

/* ---- results ---- */

/* ---- results ---- */
.er2 .er2-resx__hd, .er2 .er2-resx__r { display: grid; grid-template-columns: minmax(0, 1fr) 40px 46px 48px; align-items: center; column-gap: 6px; }
.er2 .er2-resx__hd { padding: 6px 0; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-resx__hd > :not(:first-child), .er2 .er2-resx__p, .er2 .er2-resx__a, .er2 .er2-resx__d { text-align: right; }
.er2 .er2-resx__r { padding: 9px 0; border-top: 1px solid var(--er2-line); }
.er2 .er2-resx__hd + .er2-resx__r { border-top-color: var(--er2-line-2); }
.er2 .er2-resx__nm { display: flex; flex-direction: column; min-width: 0; }
.er2 .er2-resx__nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.25; }
.er2 .er2-resx__nm span { font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-resx__p { font-size: 14px; color: var(--er2-text-3); font-variant-numeric: tabular-nums; }
.er2 .er2-resx__a { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.er2 .er2-resx__d { font-size: 13px; font-weight: 700; color: var(--er2-text-2); font-variant-numeric: tabular-nums; }
.er2 .er2-resx__d.is-up { color: var(--er2-pos); }
.er2 .er2-resx__d.is-down { color: var(--er2-neg); }

/* ---- stat report ---- */
.er2 .er2-rep__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 12px 0; border-top: 1px solid var(--er2-line); }
.er2 .er2-rep dt b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.er2 .er2-rep dt span { display: block; margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--er2-text-3); }
.er2 .er2-rep dd { margin: 0; text-align: right; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.er2 .er2-rep dd small { margin-left: 2px; font-size: 12px; font-weight: 700; color: var(--er2-text-3); }

/* ---- status strip, rail links and access: unboxed ---- */
.er2 .er2-strip { background: transparent; }
.er2 .er2-access { background: transparent; border: 0; border-top: 1px solid var(--er2-line-2); border-radius: 0; padding: 14px 0 0; }

@media (min-width: 768px) {
  .er2 .er2-sec__t { font-size: 20px; }
  .er2 .er2-resx__hd, .er2 .er2-resx__r { grid-template-columns: minmax(0, 1fr) 96px 96px 80px; }
}

@media (min-width: 1024px) {
  /* projection board: aligned columns, the primary column tinted and bold */
  .er2 .er2-proj__hd, .er2 .er2-proj__r { grid-template-columns: minmax(205px, 2.4fr) minmax(84px, 1fr) minmax(84px, 1fr) repeat(3, minmax(70px, 1fr)); grid-template-areas: none; column-gap: 0; align-items: center; }
  .er2 .er2-proj__hd { display: grid; padding: 8px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--er2-text-3); white-space: nowrap; }
  .er2 .er2-proj__hd > .er2-proj__mu { font-size: 11px; font-weight: 700; color: var(--er2-text-3); }
  .er2 .er2-proj__hd > :nth-child(n+3) { text-align: right; }
  .er2 .er2-proj__hd > :nth-child(3) { padding-right: 12px; color: var(--er2-blue); }
  .er2 .er2-proj__r { padding: 0; row-gap: 0; min-height: 52px; }
  .er2 a.er2-proj__r:hover, .er2 .er2-proj__r:hover { background: var(--er2-surface-2); }
  .er2 .er2-proj__id, .er2 .er2-proj__mu, .er2 .er2-proj__p, .er2 .er2-proj__sec { grid-area: auto; }
  .er2 .er2-proj__id { padding: 8px 8px 8px 0; }
  .er2 .er2-proj__n { font-size: 15px; }
  .er2 .er2-proj__ctx { display: none; }
  .er2 .er2-proj__mu { display: block; font-size: 13px; font-weight: 600; color: var(--er2-text-2); }
  .er2 .er2-proj__p { flex-direction: row; justify-content: flex-end; align-self: stretch; align-items: center; padding-right: 12px; background: rgba(31, 111, 235, 0.06); }
  .er2 .er2-proj__p b { font-size: 21px; }
  .er2 .er2-proj__p span { display: none; }
  .er2 .er2-proj__sec { display: contents; }
  .er2 .er2-proj__sec li { display: block; font-size: 14px; text-align: right; }
  .er2 .er2-proj__sec li span { display: none; }
  .er2 .er2-resx__hd, .er2 .er2-resx__r { grid-template-columns: minmax(0, 1fr) 110px 110px 90px; }
  .er2 .er2-resx__r { padding: 10px 0; }
  .er2 .er2-g { padding: 12px 0; }

  /* rail: hairlines, no boxes */
  .er2 .er2-home__rail { gap: 0; }
  .er2 .er2-home__rail .er2-strip { border: 0; border-top: 1px solid var(--er2-line-2); border-bottom: 1px solid var(--er2-line); border-radius: 0; }
  .er2 .er2-home__rail .er2-quick { border: 0; border-radius: 0; background: transparent; }
  .er2 .er2-home__rail .er2-rail__h, .er2 .er2-rail__h { padding: 0 0 8px; font-size: 19px; border-bottom: 0; }
  .er2 .er2-home__rail .er2-quick__a { padding: 0; border-top: 1px solid var(--er2-line); border-bottom: 0; }
  .er2 .er2-home__rail .er2-sec__t { font-size: 17px; }
}

@media (min-width: 1280px) {
  /* related modules side by side: HR tiers next to the slate */
  .er2 .er2-home__main--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; align-items: start; }
  .er2 .er2-home__main--pair > .er2-o-board, .er2 .er2-home__main--pair > .er2-o-results { grid-column: 1 / -1; }
}

/* ============================================================================
   INNER-PAGE SHELL (MLB product pages): section tabs, slate strip, page body, auth links.
   ========================================================================== */
.er2 .er2-subnav { background: var(--er2-surface); border-bottom: 1px solid var(--er2-line); }
.er2 .er2-subnav .er2-tabs { background: transparent; border-bottom: 0; }
.er2 .er2-subnav .er2-tab { flex: 0 0 auto; height: 42px; padding: 0 12px; font-size: 13.5px; }
.er2 .er2-subnav .er2-tabs--sub { border-top: 1px solid var(--er2-line); }
.er2 .er2-subnav .er2-tabs--sub .er2-tab { height: 36px; font-size: 12.5px; }
.er2 .er2-strip--page { border-top: 0; }
.er2 .er2-strip__v--accent { color: var(--er2-blue); }
.er2 .er2-pagebody { padding-top: 20px; padding-bottom: 28px; min-height: 40vh; }
@media (min-width: 1024px) { .er2 .er2-subnav .er2-tab { padding: 0 16px; } }

/* signed-in state (set by the shared auth script; same hooks as the legacy shell) */
.er2 .mobile-auth-signed-in { display: none !important; }
.er2.auth-signed-in .mobile-auth-signed-in { display: flex !important; }
.er2.auth-signed-in .mobile-auth-anonymous { display: none !important; }
.er2 .er2-menu__links button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 0; background: none; border: 0; border-top: 1px solid var(--er2-nav-line); color: var(--er2-nav-text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
/* links the auth script appends to the header ("Account", "Logout") */
.er2 .er2-hdr .er-auth-link { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; background: none; border: 0; border-radius: var(--er2-r-sm); box-shadow: none; color: var(--er2-nav-text); font-size: 13px; font-weight: 600; text-decoration: none; transform: none; }
.er2 .er2-hdr .er-auth-link:hover { background: var(--er2-nav-2); color: #fff; }

/* ============================================================================
   MLB PAGE COMPONENTS (same grammar as the homepage system; used by every migrated MLB body)
   ========================================================================== */
.er2 .er2-sec--first { padding-top: 0; }
.er2 .er2-notice { margin: 0 0 14px; padding: 9px 12px; background: var(--er2-blue-soft); border-left: 3px solid var(--er2-blue); font-size: 13px; line-height: 1.4; }
.er2 .er2-strip--inline { margin: 0 0 8px; border-top: 1px solid var(--er2-line-2); border-bottom: 1px solid var(--er2-line); background: transparent; }
.er2 .er2-strip--inline .er2-strip__c { padding-left: 0; }
.er2 .er2-strip--inline .er2-strip__c + .er2-strip__c { padding-left: var(--er2-cell-x); }
.er2 .er2-strip--inline .er2-strip__v { margin-top: 0; font-size: 16px; }
.er2 .er2-strip--inline .er2-strip__s { margin-top: 0; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-fresh { margin: 0 0 14px; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-listhd { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-proj__rk { flex: none; min-width: 14px; font-size: 12px; font-weight: 700; text-align: right; color: var(--er2-text-3); font-variant-numeric: tabular-nums; }
.er2 .er2-proj__n a { color: inherit; }
.er2 .er2-proj__n a:hover { color: var(--er2-blue); text-decoration: underline; }
.er2 .er2-proj__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; padding-left: 43px; font-size: 12px; font-weight: 600; }
.er2 .er2-proj__sec li.is-na { display: none; }
.er2 .er2-proj__sec li.is-na b { color: var(--er2-text-3); }
.er2 .er2-access--board { margin-top: 18px; }
.er2 .er2-access__t .er2-kicker { margin-right: 4px; color: var(--er2-blue); }
.er2 .er2-access__s span { display: block; margin-top: 2px; color: var(--er2-text-3); }
.er2 .er2-acct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 16px 0 0; padding: 10px 0 0; border-top: 1px solid var(--er2-line); font-size: 12px; line-height: 1.4; color: var(--er2-text-3); }
.er2 .er2-acct a { font-weight: 700; }
.er2 .er2-linklist { list-style: none; }
.er2 .er2-linklist a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-top: 1px solid var(--er2-line); color: var(--er2-text); font-size: 14px; font-weight: 600; }
.er2 .er2-linklist a:hover { color: var(--er2-blue); text-decoration: none; }
.er2 .er2-linklist .er2-go { color: var(--er2-text-3); }
.er2 .er2-prose { max-width: 76ch; }
.er2 .er2-prose h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.25; font-weight: 800; }
.er2 .er2-prose h3 { margin: 22px 0 8px; font-size: 16px; line-height: 1.3; font-weight: 800; }
.er2 .er2-prose p, .er2 .er2-prose li { font-size: 14px; line-height: 1.65; color: var(--er2-text-2); }
.er2 .er2-prose p { margin: 0 0 12px; }
.er2 .er2-prose ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.er2 .er2-prose li { margin-bottom: 6px; }
.er2 .er2-prose a { text-decoration: underline; }
.er2 .er2-empty--board { padding: 22px 0; font-size: 14px; color: var(--er2-text-2); text-align: left; }
.er2 .er2-empty--board b { display: block; margin-bottom: 4px; color: var(--er2-text); font-size: 16px; }
.er2 .er2-empty--board p { margin: 0; }
@media (min-width: 768px) { .er2 .er2-linklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1024px) {
  .er2 .er2-proj__act { display: none; }
  .er2 .er2-proj__sec li.is-na { display: block; }
  .er2 .er2-proj__rk { margin-right: -3px; }
}

/* inner pages: the section note gets the full width under the title row */
.er2 .er2-pagebody .er2-sec__hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.er2 .er2-pagebody .er2-sec__tt { display: contents; }
.er2 .er2-pagebody .er2-sec__t { grid-column: 1; }
.er2 .er2-pagebody .er2-sec__a { grid-column: 2; grid-row: 1; }
.er2 .er2-pagebody .er2-sec__s { grid-column: 1 / -1; margin-top: 4px; }

/* inner pages reuse the homepage's two-column structure (.er2-home); er2-oN = phone order */
.er2 .er2-o1 { order: 1; } .er2 .er2-o2 { order: 2; } .er2 .er2-o3 { order: 3; } .er2 .er2-o4 { order: 4; } .er2 .er2-o5 { order: 5; }
.er2 .er2-o6 { order: 6; } .er2 .er2-o7 { order: 7; } .er2 .er2-o8 { order: 8; } .er2 .er2-o9 { order: 9; }
.er2 .er2-pagebody > .er2-home--inner, .er2 .er2-pagebody > .er2-home--inner { padding-top: 0; padding-bottom: 0; }
.er2 .er2-pagebody .er2-sec:not(.er2-sec--first) { padding-top: 22px; }
.er2 .er2-pagebody .er2-sec:not(.er2-sec--first)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--er2-sep-h, 1px); background: var(--er2-sep); opacity: .55; pointer-events: none; }
.er2 .er2-pagebody .er2-sec { position: relative; }
@media (min-width: 1024px) {
  .er2 .er2-home--inner .er2-home__main > * { margin-bottom: 22px; }
  .er2 .er2-home--inner .er2-home__rail > .er2-o8 { padding-top: 22px; }
  .er2 .er2-home--inner .er2-home__rail > .er2-o5 .er2-access { margin-top: 0; }
}

@media (min-width: 1024px) { .er2 .er2-home__rail .er2-linklist { display: block; } }

/* hitter boards: team filter, text secondary columns, locked-preview skeleton rows */
.er2 .er2-filters--board { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 4px 0 8px; }
.er2 .er2-field { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--er2-text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.er2 .er2-field .er2-select { flex: none; min-width: 150px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.er2 .er2-filters__sum { margin: 0; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-proj__p .pcard-prob { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--er2-blue); font-variant-numeric: tabular-nums; }
.er2 .er2-proj__p .pcard-prob-label { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--er2-text-3); text-align: right; }
.er2 .er2-proj__sec li.is-desk { display: none; }
.er2 .er2-proj--text .er2-proj__sec li b { font-weight: 600; }
.er2 .er2-linklist a.is-current { color: var(--er2-blue); }
.er2 .er2-proj__r--skel { display: flex; align-items: center; gap: 10px; min-height: 58px; opacity: .6; }
.er2 .er2-skel { display: inline-block; border-radius: 4px; background: var(--er2-line); }
.er2 .er2-skel--b { width: 34px; height: 22px; }
.er2 .er2-skel--l { flex: 1; max-width: 160px; height: 12px; }
.er2 .er2-skel--p { width: 48px; height: 22px; margin-left: auto; }
@media (min-width: 1024px) {
  .er2 .er2-proj--text .er2-proj__hd, .er2 .er2-proj--text .er2-proj__r { grid-template-columns: minmax(210px, 2.2fr) minmax(100px, 1fr) minmax(96px, 0.9fr) minmax(130px, 1.3fr) minmax(90px, 0.8fr) minmax(130px, 1.5fr); }
  .er2 .er2-proj--text .er2-proj__sec li { text-align: left; padding-left: 12px; }
  .er2 .er2-proj--text .er2-proj__hd > :nth-child(n+4) { text-align: left; padding-left: 12px; }
  .er2 .er2-proj__sec li.is-desk { display: block; }
  .er2 .er2-proj__p .pcard-prob { font-size: 21px; }
  .er2 .er2-proj__p .pcard-prob-label { display: none; }
  .er2 .er2-proj__r--skel { min-height: 46px; }
}

.er2 .er2-strip--page { display: block; padding: 0; }
.er2 .er2-strip--page .er2-strip__in { display: flex; padding-top: 0; padding-bottom: 0; }
.er2 .er2-strip--page .er2-strip__c:first-child { padding-left: 0; }
@media (min-width: 1024px) {
  .er2 .er2-proj--text .er2-proj__hd, .er2 .er2-proj--text .er2-proj__r { grid-template-columns: minmax(200px, 2fr) minmax(96px, 0.9fr) minmax(92px, 0.8fr) minmax(0, 1.1fr) minmax(70px, 0.6fr) minmax(0, 1.8fr); }
  .er2 .er2-proj--text .er2-proj__sec li { white-space: normal; padding-right: 8px; }
  .er2 .er2-proj--text .er2-proj__sec li b { overflow-wrap: anywhere; }
}

/* ============================================================================
   LEGACY BODY SKIN (compat tier)
   MLB pages whose body has not been rebuilt with ER2 components yet still render their original markup
   (so no data, link or control is lost) inside the ER2 shell. The legacy stylesheet was written for a
   dark theme, so that body is rendered through a colour inversion scope: dark panels become the white
   ER2 sheet, light text becomes charcoal, hues are preserved. Panels and cards are then flattened to
   hairlines. Native ER2 bodies never use this scope.
   ========================================================================== */
.er2 .er2-legacy { background: #000; color: #e8e9ec; filter: invert(1) hue-rotate(180deg); }
.er2 .er2-legacy img, .er2 .er2-legacy video, .er2 .er2-legacy canvas, .er2 .er2-legacy iframe { filter: invert(1) hue-rotate(180deg); }
.er2 .er2-legacy * { box-shadow: none !important; text-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.er2 .er2-legacy .panel { background: transparent !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.er2 .er2-legacy .panel::before, .er2 .er2-legacy .panel::after { display: none !important; }
.er2 .er2-legacy :where([class*="card"], [class*="tile"]):not([class*="pcard"]) { background: transparent !important; border-radius: 4px !important; }
.er2 .er2-legacy .eyebrow { letter-spacing: 0.1em; font-size: 11px; }
.er2 .er2-legacy a { text-underline-offset: 2px; }
/* the legacy shell chrome never renders here, but module CSS can still reference these */
.er2 .er2-legacy .cta-btn { border-radius: 4px; }

/* tier-word boards (home run threats): the primary signal is a published word, not a number */
.er2 .er2-proj--word .er2-proj__p b { font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.er2 .er2-proj__x { display: none; }
.er2 .er2-proj__tg, .er2 .er2-proj__rk2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 12px; padding-left: 43px; font-size: 12px; line-height: 1.4; color: var(--er2-text-3); }
.er2 .er2-proj__rk2 span { color: var(--er2-warn); font-weight: 700; }
.er2 .er2-meta { margin: 0 0 6px; font-size: 13px; color: var(--er2-text-2); }
@media (min-width: 1024px) {
  .er2 .er2-proj--x .er2-proj__hd, .er2 .er2-proj--x .er2-proj__r { grid-template-columns: minmax(190px, 2fr) minmax(90px, 0.9fr) minmax(130px, 1.2fr) minmax(88px, 0.9fr) repeat(3, minmax(80px, 0.9fr)); }
  .er2 .er2-proj--x .er2-proj__hd > :nth-child(3) { text-align: left; }
  .er2 .er2-proj--x .er2-proj__hd > :nth-child(n+4) { text-align: right; }
  .er2 .er2-proj--x .er2-proj__x { display: block; font-size: 13px; color: var(--er2-text-2); padding-right: 8px; }
  .er2 .er2-proj--x .er2-proj__hd .er2-proj__x { color: inherit; font-size: 11px; }
  .er2 .er2-proj--x .er2-proj__hd > :nth-child(4) { padding-right: 12px; color: var(--er2-blue); }
  .er2 .er2-proj--word .er2-proj__p b { font-size: 14px; }
  .er2 .er2-proj__tg, .er2 .er2-proj__rk2 { padding: 0 0 8px; }
}

@media (min-width: 1024px) { .er2 .er2-proj--x .er2-proj__hd > :nth-child(3) { color: var(--er2-text-3); padding-right: 0; } }

@media (min-width: 1024px) {
  .er2 .er2-proj--x .er2-proj__hd, .er2 .er2-proj--x .er2-proj__r { grid-template-columns: minmax(230px, 2.4fr) minmax(86px, 0.8fr) minmax(120px, 1.1fr) minmax(84px, 0.8fr) repeat(3, minmax(100px, 1fr)); }
  .er2 .er2-proj--x .er2-proj__hd > :nth-child(n+5), .er2 .er2-proj--x .er2-proj__sec li { text-align: left; padding-left: 14px; }
}

/* results archive + shared conversion CTA fragment (.er-cta is emitted by conversion_cta.py for several sports) */
.er2 .er2-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 10px; font-size: 13px; font-weight: 700; }
.er2 .er2-pager span { flex: 1; }
.er2 .er2-pager a:nth-child(2) { color: var(--er2-text-2); }
.er2 .er2-resx--r3 .er2-resx__hd, .er2 .er2-resx--r3 .er2-resx__r { grid-template-columns: minmax(0, 1fr) 54px 86px; }
.er2 .er2-resx--r3 .er2-resx__s { text-align: right; font-size: 12px; font-weight: 700; color: var(--er2-text-3); }
.er2 .er2-resx--r3 .er2-resx__s.is-yes { color: var(--er2-text); }
.er2 .er2-resx__rk { margin-right: 2px; font-size: 12px; font-weight: 700; color: var(--er2-text-3); }
.er2 .er2-resx__nm a { color: inherit; }
.er2 .er2-resx__nm a:hover { color: var(--er2-blue); text-decoration: underline; }
.er2 .er2-resx__nm span a { color: var(--er2-text-3); }
.er2 .er2-resx__t { display: block; margin-top: 1px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-hl h3 { margin: 14px 0 4px; font-size: 14px; font-weight: 800; }
.er2 .er2-hl ul { list-style: none; }
.er2 .er2-hl li { padding: 6px 0; border-top: 1px solid var(--er2-line); font-size: 13.5px; color: var(--er2-text-2); }
.er2 .er2-hl li a { color: var(--er2-text); font-weight: 700; }
.er2 .er2-hl__best { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--er2-line-2); font-size: 13.5px; color: var(--er2-text-2); }
.er2 .er2-lede { margin: 0; font-size: 14px; line-height: 1.6; color: var(--er2-text-2); max-width: 76ch; }
.er2 .er2-datelist { list-style: none; }
.er2 .er2-datelist a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; border-top: 1px solid var(--er2-line); color: var(--er2-text); font-size: 14px; font-weight: 700; }
.er2 .er2-datelist a:hover { color: var(--er2-blue); text-decoration: none; }
.er2 .er2-datelist__m { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--er2-text-3); font-variant-numeric: tabular-nums; }
.er2 .er-cta { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--er2-line-2); }
.er2 .er-cta__eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--er2-blue); }
.er2 .er-cta__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--er2-blue); }
.er2 .er-cta__title { margin: 4px 0 0; font-size: 16px; font-weight: 800; line-height: 1.25; }
.er2 .er-cta__desc { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--er2-text-2); }
.er2 .er-cta__note { margin: 4px 0 0; font-size: 12px; color: var(--er2-text-3); }
.er2 .er-cta__btn, .er2 .er2-skin .er-cta__btn { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--er2-r-sm); background: var(--er2-blue); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.er2 .er-cta__btn:hover, .er2 .er2-skin .er-cta__btn:hover { background: var(--er2-blue-hover); color: #fff; text-decoration: none; }
@media (min-width: 1024px) { .er2 .er2-resx--r3 .er2-resx__hd, .er2 .er2-resx--r3 .er2-resx__r { grid-template-columns: minmax(0, 1fr) 90px 120px; } }

/* ============================================================================
   LEGACY PRIMITIVES, SKINNED (.er2-skin)
   The shared building blocks older MLB bodies are made of (panel, metric cards, tables, notices, resource
   links, sparkline, guide prose, the .er-cta conversion block). Markup is untouched, so every value and link
   stays; presentation follows the ER2 section/row/report grammar. er2_mlb.SKIN_CLASSES lists exactly these.
   ========================================================================== */
.er2 .er2-skin { --accent: var(--er2-blue); --accent-2: var(--er2-pos); --line: var(--er2-line); --text: var(--er2-text); --text-muted: var(--er2-text-3); --border: var(--er2-line); --bg: #fff; }
.er2 .er2-skin > * + * { margin-top: 0; }
.er2 .er2-skin .panel, .er2 .er2-skin .empty-panel { margin: 0; padding: 22px 0 6px; border-top: 1px solid var(--er2-line); }
.er2 .er2-skin > .panel:first-child, .er2 .er2-skin > :first-child > .panel:first-child, .er2 .er2-skin > .analytics-crumbs + .panel { border-top: 0; padding-top: 0; }
.er2 .er2-skin .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.er2 .er2-skin .eyebrow, .er2 .er2-skin .intel-section-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--er2-blue); }
.er2 .er2-skin h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
.er2 .er2-skin h3 { margin: 18px 0 6px; font-size: 16px; line-height: 1.3; font-weight: 800; }
.er2 .er2-skin p, .er2 .er2-skin li { font-size: 14px; line-height: 1.6; }
.er2 .er2-skin p { margin: 0 0 10px; color: var(--er2-text-2); }
.er2 .er2-skin .muted { color: var(--er2-text-3); }
.er2 .er2-skin a { color: var(--er2-blue); }
.er2 .er2-skin a:hover { color: var(--er2-blue-hover); text-decoration: underline; }
.er2 .er2-skin strong { font-weight: 700; color: var(--er2-text); }
.er2 .er2-skin .analytics-crumbs { margin: 0 0 14px; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-skin .analytics-crumbs a { font-weight: 600; }
.er2 .er2-skin .notice-banner, .er2 .er2-skin .intel-status-banner { margin: 0 0 14px; padding: 9px 12px; background: var(--er2-blue-soft); border-left: 3px solid var(--er2-blue); font-size: 13px; line-height: 1.4; color: var(--er2-text); }
.er2 .er2-skin .badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-skin .badge-pending { color: var(--er2-warn); }
.er2 .er2-skin .sub-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.er2 .er2-skin .sub-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--er2-line-2); border-radius: 18px; font-size: 13px; font-weight: 700; color: var(--er2-text); }
.er2 .er2-skin .sub-link.active { background: var(--er2-blue); border-color: var(--er2-blue); color: #fff; }
.er2 .er2-skin .sport-premium-pga, .er2 .er2-skin .pga-overview { display: block; }
.er2 .er2-skin .resource-meta { margin-top: 4px; font-size: 12px; color: var(--er2-text-3); }
/* projection explorer (search / team / player filters + selected-profile card) */
.er2 .er2-skin .filter-toolbar { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8px 0 12px; }
.er2 .er2-skin .filter-field { display: grid; gap: 4px; min-width: 0; }
.er2 .er2-skin .filter-field > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-skin .filter-field input, .er2 .er2-skin .filter-field select { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--er2-line-2); border-radius: 4px; background: var(--er2-surface); font: inherit; font-size: 16px; color: var(--er2-text); }
.er2 .er2-skin .filter-reset-btn { min-height: 44px; cursor: pointer; }
.er2 .er2-skin .player-profile-card:empty { display: none; }
.er2 .er2-skin .player-profile-card { margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--er2-line); }
.er2 .er2-skin .profile-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.er2 .er2-skin .profile-field-group h3 { margin: 12px 0 4px; font-size: 14px; }
.er2 .er2-skin .profile-field-grid { display: grid; grid-template-columns: 1fr; }
.er2 .er2-skin .profile-field { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--er2-line); font-size: 13px; }
.er2 .er2-skin .profile-field span { color: var(--er2-text-3); }
.er2 .er2-skin .profile-field strong { text-align: right; font-variant-numeric: tabular-nums; }
.er2 .er2-skin .pga-golfer-link { font-weight: 700; }
.er2 .er2-skin .badge-high { color: var(--er2-pos); }
.er2 .er2-skin .badge-medium { color: var(--er2-warn); }
.er2 .er2-skin .badge-win { color: var(--er2-pos); }
.er2 .er2-skin .badge-loss { color: var(--er2-neg); }
.er2 .er2-skin .badge-low { color: var(--er2-warn); }
.er2 .er2-skin .sport-premium-nba { display: block; }
/* metric cards -> report rows */
.er2 .er2-skin .metric-grid { display: grid; grid-template-columns: 1fr; margin: 6px 0 0; }
.er2 .er2-skin .metric-card { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(62%); column-gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--er2-line); background: none; }
.er2 .er2-skin .metric-label { grid-column: 1; grid-row: 1; font-size: 13.5px; font-weight: 700; line-height: 1.25; text-transform: none; letter-spacing: 0; color: var(--er2-text); }
.er2 .er2-skin .metric-caption { grid-column: 1; grid-row: 2; margin: 1px 0 0; font-size: 12px; line-height: 1.35; color: var(--er2-text-3); }
.er2 .er2-skin .metric-value { grid-column: 2; grid-row: 1 / span 2; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; text-align: right; white-space: normal; overflow-wrap: anywhere; min-width: 0; font-variant-numeric: tabular-nums; }
.er2 .er2-skin .stat-grid { display: grid; grid-template-columns: 1fr; margin: 6px 0 0; }
.er2 .er2-skin .stat-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--er2-line); background: none; }
.er2 .er2-skin .stat-card > span { grid-column: 1; grid-row: 1; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--er2-text); }
.er2 .er2-skin .stat-card > p { grid-column: 1; grid-row: 2; margin: 1px 0 0; font-size: 12px; line-height: 1.35; color: var(--er2-text-3); }
.er2 .er2-skin .stat-card > strong { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; text-align: right; font-variant-numeric: tabular-nums; }
.er2 .er2-skin .pa-star--off { color: var(--er2-line-2); }
.er2 .er2-skin .wnba-player-link { color: inherit; }
.er2 .er2-skin .sport-premium-wnba { display: block; }
/* tables */
.er2 .er2-skin table { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.er2 .er2-skin th { padding: 8px 10px 8px 0; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--er2-text-3); border-bottom: 1px solid var(--er2-line-2); white-space: nowrap; }
.er2 .er2-skin td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--er2-line); vertical-align: top; color: var(--er2-text); }
.er2 .er2-skin tbody tr:hover td { background: var(--er2-surface-2); }
.er2 .er2-skin .table-shell { overflow-x: auto; }
.er2 .er2-skin .ph-form-list { margin: 8px 0 0; padding: 0; list-style: none; }
.er2 .er2-skin .ph-form-list li { padding: 8px 0; border-bottom: 1px solid var(--er2-line); color: var(--er2-text-2); }
.er2 .er2-skin .ph-form-list li:last-child { border-bottom: 0; }
.er2 .er2-skin .ph-spark { display: block; width: 100%; height: auto; margin-top: 10px; }
.er2 .er2-skin .ph-spark-caption { margin: 6px 0 0; font-size: 12px; color: var(--er2-text-3); }
/* resource links */
.er2 .er2-skin .resource-grid { display: grid; grid-template-columns: 1fr; margin-top: 6px; }
.er2 .er2-skin .resource-card { display: block; padding: 14px 0; border-top: 1px solid var(--er2-line); color: inherit; text-decoration: none; }
.er2 .er2-skin .resource-card:hover { text-decoration: none; }
.er2 .er2-skin .resource-card strong { display: block; font-size: 15px; color: var(--er2-text); }
.er2 .er2-skin .resource-card:hover strong { color: var(--er2-blue); }
.er2 .er2-skin .resource-card p { margin: 2px 0 0; font-size: 13.5px; color: var(--er2-text-3); }
/* buttons */
.er2 .er2-skin .cta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.er2 .er2-skin .cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--er2-line-2); border-radius: var(--er2-r-sm); background: var(--er2-surface); color: var(--er2-text); font-size: 14px; font-weight: 700; text-decoration: none; }
.er2 .er2-skin .cta-btn:hover { border-color: var(--er2-blue); color: var(--er2-blue); text-decoration: none; }
.er2 .er2-skin .cta-btn.primary { background: var(--er2-blue); border-color: var(--er2-blue); color: #fff; }
.er2 .er2-skin .cta-btn.primary:hover { background: var(--er2-blue-hover); color: #fff; }
/* guide prose */
.er2 .er2-skin .guide-body { max-width: 76ch; }
.er2 .er2-skin .guide-lede { font-size: 16px; line-height: 1.6; color: var(--er2-text); }
.er2 .er2-skin .guide-def { margin: 0 0 14px; }
.er2 .er2-skin .guide-related, .er2 .er2-skin .guide-cta { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--er2-line); }
.er2 .er2-skin .analytics-intro { max-width: 76ch; }
@media (max-width: 767.98px) {
  /* data tables the legacy shell stacked on phones (td[data-label]) keep that behaviour: label left, value right */
  .er2 .er2-skin table:has(td[data-label]) { display: block; }
  .er2 .er2-skin table:has(td[data-label]) thead { display: none; }
  .er2 .er2-skin table:has(td[data-label]) tbody, .er2 .er2-skin table:has(td[data-label]) tr { display: block; }
  .er2 .er2-skin table:has(td[data-label]) tr { padding: 8px 0; border-top: 1px solid var(--er2-line); }
  .er2 .er2-skin td[data-label] { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .er2 .er2-skin td[data-label]::before { content: attr(data-label); flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--er2-text-3); text-align: left; }
  /* wide plain tables scroll inside themselves instead of widening the page */
  .er2 .er2-skin table:not(:has(td[data-label])) { display: block; max-width: 100%; overflow-x: auto; }
}
@media (min-width: 768px) {
  .er2 .er2-skin .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .er2 .er2-skin .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .er2 .er2-skin .filter-toolbar { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
  .er2 .er2-skin .profile-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .er2 .er2-skin .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 1024px) { .er2 .er2-skin .metric-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the v2 board vocabulary (bd-*), used by the team strikeout dashboard: rendered as the ER2 projection row */
.er2 .er2-skin .panel-head { display: block; }
.er2 .er2-skin .panel-head p { margin: 6px 0 0; }
.er2 .er2-skin .bd-sec-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 6px; }
.er2 .er2-skin .bd-sec-hd h2 { margin: 0; }
.er2 .er2-skin .bd-sec-hd .more { font-size: 13px; font-weight: 700; white-space: nowrap; }
.er2 .er2-skin .bd-note, .er2 .er2-skin .td-note { margin: 0 0 8px; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-skin .bd-controls, .er2 .er2-skin .td-controls { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.er2 .er2-skin .bd-chip { min-height: 32px; padding: 0 12px; border: 1px solid var(--er2-line-2); border-radius: var(--er2-r-sm); background: var(--er2-surface); color: var(--er2-text-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.er2 .er2-skin .bd-chip:hover { border-color: var(--er2-blue); color: var(--er2-blue); }
.er2 .er2-skin .bd-chip.active, .er2 .er2-skin .bd-chip.is-active, .er2 .er2-skin .bd-chip[aria-pressed="true"] { background: var(--er2-blue); border-color: var(--er2-blue); color: #fff; }
.er2 .er2-skin .td-summary { margin: 0 0 6px; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-skin .bd-list { display: block; }
.er2 .er2-skin .bd-item { padding: 11px 0 10px; border-top: 1px solid var(--er2-line); background: none; }
.er2 .er2-skin .bd-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 9px; }
.er2 .er2-skin .bd-row .rk { min-width: 14px; font-size: 12px; font-weight: 700; color: var(--er2-text-3); text-align: right; }
.er2 .er2-skin .bd-tm { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 22px; border: 0; border-radius: var(--er2-r-sm); background: var(--er2-blue); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.er2 .er2-skin .bd-row .who { display: flex; flex-direction: column; min-width: 0; }
.er2 .er2-skin .bd-row .nm { font-size: 16px; font-weight: 700; line-height: 1.2; }
.er2 .er2-skin .bd-row .nm a { color: var(--er2-text); }
.er2 .er2-skin .bd-row .nm a:hover { color: var(--er2-blue); }
.er2 .er2-skin .bd-row .mu { font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-skin .bd-row .big { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--er2-blue); text-align: right; font-variant-numeric: tabular-nums; }
.er2 .er2-skin .bd-mets { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 5px 0 0; padding-left: 43px; }
.er2 .er2-skin .bd-mets .m { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: 5px; font-size: 12.5px; }
.er2 .er2-skin .bd-mets .mv { font-weight: 700; font-variant-numeric: tabular-nums; }
.er2 .er2-skin .bd-mets .ml { font-size: 11.5px; color: var(--er2-text-3); }
.er2 .er2-skin .bd-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 4px 0 0; padding-left: 43px; font-size: 12px; font-weight: 600; }
.er2 .er2-skin .bd-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--er2-text-2); }
.er2 .er2-skin .bd-tag.t-warn { color: var(--er2-warn); }
.er2 .er2-skin .bd-acct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--er2-line); font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-skin .bd-acct a { font-weight: 700; }
.er2 .er2-skin .bd-rel { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 4px 0; font-size: 14px; font-weight: 600; }
.er2 .er2-skin .bd-empty { padding: 22px 0; font-size: 14px; color: var(--er2-text-2); }
.er2 .er2-skin .bd-empty strong { display: block; margin-bottom: 4px; font-size: 16px; }
@media (min-width: 1024px) { .er2 .er2-skin .bd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; } }

/* MLB analytics preview (landing) family: pa-* */
.er2 .er2-skin .preview-page { display: block; }
.er2 .er2-skin .pa-status { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-skin .pa-status li { font-size: 12px; line-height: 1.5; }
.er2 .er2-skin .pa-status .is-live { color: var(--er2-blue); font-weight: 700; }
.er2 .er2-skin .pa-coverage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 12px 0 14px; padding: 0; list-style: none; border-top: 1px solid var(--er2-line-2); }
.er2 .er2-skin .pa-coverage li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--er2-line); font-size: 13px; }
.er2 .er2-skin .pa-coverage b { order: 2; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.er2 .er2-skin .pa-coverage span { order: 1; color: var(--er2-text-3); }
.er2 .er2-skin .pa-section__head { margin: 0 0 8px; }
.er2 .er2-skin .pa-section__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--er2-blue); }
.er2 .er2-skin .pa-section__title { margin: 2px 0 0; }
.er2 .er2-skin .pa-grid { display: block; }
.er2 .er2-skin .pa-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 6px; padding: 14px 0; border-top: 1px solid var(--er2-line); background: none; }
.er2 .er2-skin .pa-card__head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.er2 .er2-skin .pa-card__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-skin .pa-chip { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-skin .pa-chip--elite { color: var(--er2-blue); }
.er2 .er2-skin .pa-id { grid-column: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.er2 .er2-skin .pa-pill { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 24px; border-radius: var(--er2-r-sm); background: var(--er2-blue) !important; color: #fff; font-size: 11px; font-weight: 800; }
.er2 .er2-skin .pa-id__text { min-width: 0; }
.er2 .er2-skin .pa-name { margin: 0; font-size: 16px; line-height: 1.2; font-weight: 700; }
.er2 .er2-skin .pa-name a { color: var(--er2-text); }
.er2 .er2-skin .pa-name a:hover { color: var(--er2-blue); }
.er2 .er2-skin .pa-matchup { margin: 1px 0 0; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-skin .pa-vs { color: var(--er2-text-3); }
.er2 .er2-skin .pa-metric { grid-column: 2; grid-row: 2; text-align: right; }
.er2 .er2-skin .pa-metric__value { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: var(--er2-blue); }
.er2 .er2-skin .pa-metric__label { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-skin .pa-conf { grid-column: 1 / -1; font-size: 12.5px; }
.er2 .er2-skin .pa-conf__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.er2 .er2-skin .pa-stars { font-size: 12px; letter-spacing: 1px; color: var(--er2-blue); }
.er2 .er2-skin .pa-conf__grade { font-weight: 700; }
.er2 .er2-skin .pa-conf__score { margin-left: auto; font-weight: 700; color: var(--er2-text-2); }
.er2 .er2-skin .pa-conf__score span { font-weight: 600; color: var(--er2-text-3); }
.er2 .er2-skin .pa-meter { height: 3px; margin: 6px 0; background: var(--er2-line); border-radius: 2px; overflow: hidden; }
.er2 .er2-skin .pa-meter i { display: block; height: 100%; background: var(--er2-blue); }
.er2 .er2-skin .pa-conf__note { font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-skin .pa-insights { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; }
.er2 .er2-skin .pa-insights li { font-size: 12.5px; color: var(--er2-text-2); }
.er2 .er2-skin .pa-locked__rows { margin-top: 4px; }
.er2 .er2-skin .pa-lrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--er2-line); font-size: 14px; color: var(--er2-text-3); }
.er2 .er2-skin .pa-lrow--veiled { opacity: 0.55; user-select: none; }
.er2 .er2-skin .pa-lrow__meta { display: block; font-size: 12px; }
.er2 .er2-skin .pa-lrow__value { font-weight: 700; }
.er2 .er2-skin .pa-locked__gate { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--er2-line-2); }
.er2 .er2-skin .pa-locked__title { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--er2-text); }
.er2 .er2-skin .pa-locked__copy { margin: 0 0 12px; }
.er2 .er2-skin .pa-unlock { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: var(--er2-r-sm); background: var(--er2-blue); color: #fff; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; }
.er2 .er2-skin .pa-unlock:hover { background: var(--er2-blue-hover); color: #fff; text-decoration: none; }
.er2 .er2-skin .board-freshness { margin: 0 0 12px; font-size: 12px; color: var(--er2-text-3); }
/* gated player page + pitcher outlook pages + stadium directory */
.er2 .er2-skin .premium-locked { border-left: 3px solid var(--er2-blue); padding-left: 14px; }
.er2 .er2-skin .premium-unlock-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 4px; padding: 0; list-style: none; }
.er2 .er2-skin .premium-unlock-list li { font-size: 13.5px; font-weight: 600; color: var(--er2-text); }
.er2 .er2-skin .pso-matchup { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--er2-text); }
.er2 .er2-skin .pso-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin-top: 10px; border-top: 1px solid var(--er2-line-2); }
.er2 .er2-skin .pso-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--er2-line); }
.er2 .er2-skin .pso-stat span { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-skin .pso-stat strong { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.er2 .er2-skin .pso-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.er2 .er2-skin .st-dir { display: grid; grid-template-columns: 1fr; gap: 0 32px; }
.er2 .er2-skin .st-dir ul { margin: 0; padding: 0; list-style: none; }
.er2 .er2-skin .st-dir li a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--er2-line); color: var(--er2-text); font-weight: 700; }
.er2 .er2-skin .st-dir .meta { font-size: 12px; font-weight: 600; color: var(--er2-text-3); }
.er2 .er2-skin .st-related { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 18px; font-size: 14px; font-weight: 600; }
.er2 .er2-skin input[type="search"] { width: 100%; max-width: 420px; min-height: 40px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--er2-line-2); border-radius: var(--er2-r-sm); background: var(--er2-surface); color: var(--er2-text); font: inherit; font-size: 14px; }
@media (min-width: 768px) {
  .er2 .er2-skin .pa-coverage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .er2 .er2-skin .st-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .er2 .er2-skin .pa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
}

/* premium gate (MLB): one centred access block, same grammar as the access strip */
.er2 .er2-gate { max-width: 560px; margin: 0 auto; padding: 8px 0 24px; }
.er2 .er2-gate__k { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--er2-blue); }
.er2 .er2-gate__copy { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--er2-text-2); }
.er2 .er2-gate__act { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--er2-line-2); }
.er2 .er2-gate__act .er2-btn { min-height: 48px; font-size: 15px; }
.er2 .er2-gate__terms { margin: 0; font-size: 13px; line-height: 1.6; text-align: center; color: var(--er2-text-3); }
.er2 .er2-gate__terms b { color: var(--er2-text); }
.er2 .er2-gate__pv { margin: 14px 0 0; text-align: center; font-size: 14px; font-weight: 700; }
.er2 .er2-gate__meta { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--er2-text-3); overflow-wrap: anywhere; }
.er2 .er2-gate__meta code { padding: 1px 5px; border-radius: 4px; background: var(--er2-surface-2); color: var(--er2-text-2); }

/* names wrap rather than clip (long surnames, hyphenated names, long team labels) */
.er2 .er2-proj__n, .er2 .er2-lead__nm b, .er2 .er2-resx__nm b, .er2 .er2-row__t, .er2 .er2-lead__nm span, .er2 .er2-resx__nm span, .er2 .er2-proj__ctx { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.er2 .er2-proj__mu, .er2 .er2-proj__x { overflow-wrap: anywhere; }
.er2 .er2-g__m b { overflow-wrap: anywhere; }
.er2 .er2-g__x { white-space: normal; overflow: visible; text-overflow: clip; }

/* metric cards the legacy pages use as navigation tiles (label + link) read as link rows */
.er2 .er2-skin .metric-card:has(.metric-value a) .metric-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-skin .metric-card:has(.metric-value a) .metric-value { font-size: 16px !important; font-weight: 700; text-align: right; white-space: normal; }
.er2 .er2-skin .metric-card:has(.metric-value a) { grid-template-columns: minmax(0, 1fr) auto; }

/* ============================================================================
   NFL PAGE SKIN (.er2-skin, NFL document vocabulary)
   The NFL public pages are a standalone document with their own class set (pcard/prow, gcard, card.hero, filterbar,
   pager, linkrow, nameindex, prose). Markup is untouched; these rules map it onto the ER2 projection-row, games-row
   and section grammar. er2_mlb._DOC_ENDPOINTS lists the same classes so the page is skinned, not inverted.
   ========================================================================== */
.er2 .er2-sport-nfl .er2-skin .statusline { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-sport-nfl .er2-skin .statusline b { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--er2-blue); }
.er2 .er2-sport-nfl .er2-skin .statusline .pending { padding: 2px 8px; background: var(--er2-warn-soft); color: var(--er2-warn); border-radius: 3px; font-weight: 600; }
.er2 .er2-sport-nfl .er2-skin section { margin: 0; padding: 16px 0 4px; border-top: 1px solid var(--er2-line); }
.er2 .er2-sport-nfl .er2-skin > section:first-of-type { border-top: 0; padding-top: 4px; }
.er2 .er2-sport-nfl .er2-skin .sub { margin: 0 0 10px; font-size: 13px; color: var(--er2-text-3); }
.er2 .er2-sport-nfl .er2-skin .grouphead { margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-sport-nfl .er2-skin .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* projection rows */
.er2 .er2-sport-nfl .er2-skin .players, .er2 .er2-sport-nfl .er2-skin .grid { display: block; margin: 0; padding: 0; }
.er2 .er2-sport-nfl .er2-skin .pcard { margin: 0; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--er2-line); border-radius: 0; }
.er2 .er2-sport-nfl .er2-skin .prow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: var(--er2-row-h-lg); padding: 8px 0; }
.er2 .er2-sport-nfl .er2-skin .pos { display: inline-block; justify-self: start; min-width: 34px; padding: 3px 0; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--er2-blue); background: var(--er2-blue-soft); border-radius: 3px; }
.er2 .er2-sport-nfl .er2-skin .pmain { min-width: 0; }
.er2 .er2-sport-nfl .er2-skin .pmain h3 { margin: 0; font-size: 15px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.er2 .er2-sport-nfl .er2-skin .pmain h3 a { color: var(--er2-text); }
.er2 .er2-sport-nfl .er2-skin .pmain p { margin: 2px 0 0; font-size: 12px; line-height: 1.3; color: var(--er2-text-3); }
.er2 .er2-sport-nfl .er2-skin .plink, .er2 .er2-sport-nfl .er2-skin .gc-cta { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 2px; font-size: 13px; font-weight: 700; color: var(--er2-blue); white-space: nowrap; }
.er2 .er2-sport-nfl .er2-skin .arrow { font-weight: 700; }
/* game cards -> games rows */
.er2 .er2-sport-nfl .er2-skin .card { position: relative; margin: 0; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--er2-line); border-radius: 0; }
.er2 .er2-sport-nfl .er2-skin .card.hero { padding: 14px 14px 10px; border: 1px solid var(--er2-line-2); border-radius: 6px; background: var(--er2-surface-2); margin-bottom: 10px; }
.er2 .er2-sport-nfl .er2-skin .gc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.er2 .er2-sport-nfl .er2-skin .gc-title { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 800; }
.er2 .er2-sport-nfl .er2-skin h2.gc-title { margin: 0; }
.er2 .er2-sport-nfl .er2-skin .gc-teams { margin: 4px 0 0; font-size: 13px; color: var(--er2-text-2); overflow-wrap: anywhere; }
.er2 .er2-sport-nfl .er2-skin .kick { font-size: 12px; font-weight: 600; color: var(--er2-text-3); font-variant-numeric: tabular-nums; }
.er2 .er2-sport-nfl .er2-skin .gcard .gc-link { position: absolute; inset: 0; z-index: 1; }
.er2 .er2-sport-nfl .er2-skin .gcard:hover { background: var(--er2-blue-soft); }
.er2 .er2-sport-nfl .er2-skin .rows { list-style: none; margin: 8px 0 0; padding: 0; }
.er2 .er2-sport-nfl .er2-skin .rows li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--er2-line); font-size: 13px; }
.er2 .er2-sport-nfl .er2-skin .badge.ok { color: var(--er2-pos); background: var(--er2-pos-soft); padding: 2px 7px; border-radius: 3px; }
.er2 .er2-sport-nfl .er2-skin .badge.soft { color: var(--er2-warn); background: var(--er2-warn-soft); padding: 2px 7px; border-radius: 3px; }
/* filters, pager */
.er2 .er2-sport-nfl .er2-skin .filterbar { margin: 0 0 12px; }
.er2 .er2-sport-nfl .er2-skin .teamsel > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--er2-line-2); border-radius: 4px; background: var(--er2-surface); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.er2 .er2-sport-nfl .er2-skin .flabel { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-sport-nfl .er2-skin .teamsel-menu, .er2 .er2-sport-nfl .er2-skin .filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
.er2 .er2-sport-nfl .er2-skin .teamsel-menu a, .er2 .er2-sport-nfl .er2-skin .filters a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 36px; padding: 0 10px; border: 1px solid var(--er2-line-2); border-radius: 4px; font-size: 12px; font-weight: 700; color: var(--er2-text); }
.er2 .er2-sport-nfl .er2-skin .teamsel-menu a.wide { padding: 0 14px; }
.er2 .er2-sport-nfl .er2-skin .teamsel-menu a[aria-current], .er2 .er2-sport-nfl .er2-skin .filters a[aria-current] { background: var(--er2-blue); border-color: var(--er2-blue); color: #fff; }
.er2 .er2-sport-nfl .er2-skin .pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; font-size: 13px; }
.er2 .er2-sport-nfl .er2-skin .pager a, .er2 .er2-sport-nfl .er2-skin .pager .off { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--er2-line-2); border-radius: 4px; font-weight: 700; }
.er2 .er2-sport-nfl .er2-skin .pager .off { color: var(--er2-text-3); opacity: .6; }
.er2 .er2-sport-nfl .er2-skin .pager .count { color: var(--er2-text-3); font-weight: 600; }
/* link lists, prose, name index, CTA */
.er2 .er2-sport-nfl .er2-skin .linkrow { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: 13px; color: var(--er2-text-3); }
.er2 .er2-sport-nfl .er2-skin .linkrow a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
.er2 .er2-sport-nfl .er2-skin .teamgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 14px; }
.er2 .er2-sport-nfl .er2-skin .teamgrid a { padding: 9px 0; border-bottom: 1px solid var(--er2-line); font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.er2 .er2-sport-nfl .er2-skin .nameindex { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--er2-line); }
.er2 .er2-sport-nfl .er2-skin .nameindex h3 { margin: 0 0 6px; font-size: 13px; }
.er2 .er2-sport-nfl .er2-skin .nameindex p { font-size: 12px; line-height: 1.8; color: var(--er2-text-3); }
.er2 .er2-sport-nfl .er2-skin .prose h3 { font-size: 14px; margin: 14px 0 4px; }
.er2 .er2-sport-nfl .er2-skin .cta-wrap { margin: 0; padding: 16px 14px; background: var(--er2-surface-2); border: 1px solid var(--er2-line-2); border-radius: 6px; }
.er2 .er2-sport-nfl .er2-skin .cta-wrap p { margin: 0 0 10px; color: var(--er2-text); font-weight: 600; }
.er2 .er2-sport-nfl .er2-skin a.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 4px; background: var(--er2-blue); color: #fff; font-weight: 700; font-size: 14px; }
.er2 .er2-sport-nfl .er2-skin a.cta:hover { background: var(--er2-blue-hover); color: #fff; text-decoration: none; }
.er2 .er2-sport-nfl .er2-skin .stadium-identity { margin: 0 0 8px; font-size: 13px; color: var(--er2-text-3); }
/* entitled view: numbers, ranges, hit chances */
.er2 .er2-sport-nfl .er2-skin .prow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.er2 .er2-sport-nfl .er2-skin .prow .pmain { flex: 1 1 140px; }
.er2 .er2-sport-nfl .er2-skin .rank { min-width: 18px; font-size: 12px; font-weight: 700; color: var(--er2-text-3); font-variant-numeric: tabular-nums; text-align: right; }
.er2 .er2-sport-nfl .er2-skin .fp { display: grid; justify-items: end; margin-left: auto; line-height: 1.15; }
.er2 .er2-sport-nfl .er2-skin .fp b { font-size: 17px; font-weight: 800; color: var(--er2-text); font-variant-numeric: tabular-nums; }
.er2 .er2-sport-nfl .er2-skin .fp > span { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--er2-text-3); }
.er2 .er2-sport-nfl .er2-skin .stats { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; padding: 2px 0 6px 50px; }
.er2 .er2-sport-nfl .er2-skin .stats > div, .er2 .er2-sport-nfl .er2-skin .pair > div { display: grid; gap: 1px; }
.er2 .er2-sport-nfl .er2-skin .stats span, .er2 .er2-sport-nfl .er2-skin .score-team > span:first-child, .er2 .er2-sport-nfl .er2-skin .pair span:first-child { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-sport-nfl .er2-skin .stats b, .er2 .er2-sport-nfl .er2-skin .score-team b, .er2 .er2-sport-nfl .er2-skin .pair b { font-size: 15px; font-weight: 800; color: var(--er2-text); font-variant-numeric: tabular-nums; }
.er2 .er2-sport-nfl .er2-skin .stats.secondary b { font-weight: 700; color: var(--er2-text-2); }
.er2 .er2-sport-nfl .er2-skin .thr { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 0 0 8px 50px; font-size: 12px; color: var(--er2-text-2); font-variant-numeric: tabular-nums; }
.er2 .er2-sport-nfl .er2-skin .thr-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-sport-nfl .er2-skin .band { display: block; font-size: 11px; font-weight: 500; color: var(--er2-text-3); text-transform: none; letter-spacing: 0; }
.er2 .er2-sport-nfl .er2-skin .band em { font-style: normal; font-weight: 600; margin-right: 4px; }
.er2 .er2-sport-nfl .er2-skin .margin-context { display: block; font-size: 11px; color: var(--er2-text-3); }
.er2 .er2-sport-nfl .er2-skin .gc-body { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 8px; }
.er2 .er2-sport-nfl .er2-skin .score { display: flex; gap: 24px; }
.er2 .er2-sport-nfl .er2-skin .score-team { display: grid; gap: 1px; min-width: 56px; }
.er2 .er2-sport-nfl .er2-skin .pair { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.er2 .er2-sport-nfl .er2-skin .card.hero .gc-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--er2-line); }
.er2 .er2-sport-nfl .er2-skin .gcard .gc-body { position: relative; }
@media (min-width: 1024px) {
  .er2 .er2-sport-nfl .er2-skin .players--detail, .er2 .er2-sport-nfl .er2-skin .stadium-games .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
}

/* ============================================================================
   UFC PAGE SKIN (.er2-skin, UFC analytics vocabulary)
   The UFC product is fight-card shaped, not team shaped: card -> bouts -> two fighters with style tags, measured
   indicators and a premium edge row. Markup is untouched (every bout, fighter, tag, indicator and link stays); these
   rules lay it out as ER2 sections and rows. Scoped to the UFC page so no other sport inherits it.
   ========================================================================== */
.er2 .er2-sport-ufc .er2-skin .uap { display: block; }
.er2 .er2-sport-ufc .er2-skin .uap-hero { padding: 4px 0 14px; }
.er2 .er2-sport-ufc .er2-skin .uap-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--er2-blue); }
.er2 .er2-sport-ufc .er2-skin .uap-hero h2 { margin: 4px 0 8px; font-size: 22px; line-height: 1.2; }
.er2 .er2-sport-ufc .er2-skin .uap-note, .er2 .er2-sport-ufc .er2-skin .uap-sub { margin: 0 0 8px; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-sport-ufc .er2-skin .uap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.er2 .er2-sport-ufc .er2-skin .uap-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--er2-line-2); border-radius: 14px; background: var(--er2-surface-2); font-size: 12px; font-weight: 600; color: var(--er2-text-2); }
.er2 .er2-sport-ufc .er2-skin a.uap-chip { min-height: 36px; color: var(--er2-text); }
.er2 .er2-sport-ufc .er2-skin a.uap-chip:hover { background: var(--er2-blue-soft); border-color: var(--er2-blue); text-decoration: none; }
.er2 .er2-sport-ufc .er2-skin .uap-chip.t-high { color: var(--er2-pos); background: var(--er2-pos-soft); border-color: transparent; }
.er2 .er2-sport-ufc .er2-skin .uap-crumbs { margin: 0 0 12px; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-sport-ufc .er2-skin .uap-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0 0 6px; }
.er2 .er2-sport-ufc .er2-skin .uap-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid var(--er2-line); }
.er2 .er2-sport-ufc .er2-skin .uap-stat-val { order: 2; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.er2 .er2-sport-ufc .er2-skin .uap-stat-label { order: 1; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-sport-ufc .er2-skin .uap-section { margin: 0; padding: 18px 0 4px; border-top: 1px solid var(--er2-line); }
.er2 .er2-sport-ufc .er2-skin .uap-section > h2 { margin: 0 0 4px; font-size: 18px; }
.er2 .er2-sport-ufc .er2-skin .uap-list { display: block; }
.er2 .er2-sport-ufc .er2-skin .uap-fight { padding: 12px 0; border-top: 1px solid var(--er2-line); }
.er2 .er2-sport-ufc .er2-skin .uap-fight-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.er2 .er2-sport-ufc .er2-skin .uap-fight-bout { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-sport-ufc .er2-skin .uap-fight-cta { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; font-weight: 700; }
.er2 .er2-sport-ufc .er2-skin .uap-fight-fighters { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px; margin: 6px 0; }
.er2 .er2-sport-ufc .er2-skin .uap-ff-name { font-size: 16px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.er2 .er2-sport-ufc .er2-skin .uap-ff.r { text-align: right; }
.er2 .er2-sport-ufc .er2-skin .uap-ff.r .uap-ff-arch { justify-content: flex-end; }
.er2 .er2-sport-ufc .er2-skin .uap-ff-mid { padding-top: 2px; font-size: 12px; font-weight: 700; color: var(--er2-text-3); text-transform: uppercase; }
.er2 .er2-sport-ufc .er2-skin .uap-ff-arch { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.er2 .er2-sport-ufc .er2-skin .uap-ff-tag { padding: 2px 7px; border-radius: 3px; background: var(--er2-blue-soft); font-size: 11px; font-weight: 600; color: var(--er2-blue-hover); }
.er2 .er2-sport-ufc .er2-skin .uap-fight-summary { margin: 0 0 6px; font-size: 13px; color: var(--er2-text-2); }
.er2 .er2-sport-ufc .er2-skin .uap-ind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0; }
.er2 .er2-sport-ufc .er2-skin .uap-ind-item { display: grid; gap: 1px; }
.er2 .er2-sport-ufc .er2-skin .uap-ind-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-sport-ufc .er2-skin .uap-ind-val { font-size: 13px; font-weight: 700; }
.er2 .er2-sport-ufc .er2-skin .uap-edge { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; background: var(--er2-surface-2); border: 1px dashed var(--er2-line-2); border-radius: 4px; }
.er2 .er2-sport-ufc .er2-skin .uap-edge-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--er2-text-3); }
.er2 .er2-sport-ufc .er2-skin .uap-edge-val { font-size: 13px; font-weight: 700; }
.er2 .er2-sport-ufc .er2-skin .uap-edge-blur { filter: blur(4px); user-select: none; }
.er2 .er2-sport-ufc .er2-skin .uap-grid { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
.er2 .er2-sport-ufc .er2-skin .uap-card { display: block; padding: 11px 0; border-top: 1px solid var(--er2-line); color: var(--er2-text); }
.er2 .er2-sport-ufc .er2-skin .uap-card:hover { text-decoration: none; background: var(--er2-blue-soft); }
.er2 .er2-sport-ufc .er2-skin .uap-card h3 { margin: 0; font-size: 14px; }
.er2 .er2-sport-ufc .er2-skin .uap-card-meta { font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-sport-ufc .er2-skin .uap-lock { margin: 14px 0; padding: 16px; background: var(--er2-surface-2); border: 1px solid var(--er2-line-2); border-radius: 6px; }
.er2 .er2-sport-ufc .er2-skin .uap-lock h3 { margin: 6px 0; font-size: 16px; }
.er2 .er2-sport-ufc .er2-skin .uap-lock-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; background: var(--er2-blue-soft); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--er2-blue-hover); }
.er2 .er2-sport-ufc .er2-skin .uap-unlock { margin: 8px 0; padding-left: 18px; columns: 1; list-style: disc; }
.er2 .er2-sport-ufc .er2-skin a.uap-lock-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 4px; background: var(--er2-blue); color: #fff; font-size: 14px; font-weight: 700; }
.er2 .er2-sport-ufc .er2-skin a.uap-lock-cta:hover { background: var(--er2-blue-hover); color: #fff; text-decoration: none; }
.er2 .er2-sport-ufc .er2-skin .uap-lock-terms { margin: 8px 0 0; font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-sport-ufc .er2-skin .uap-panel { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--er2-line); }
.er2 .er2-sport-ufc .er2-skin .uap-methodology ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.er2 .er2-sport-ufc .er2-skin .uap-search { display: flex; gap: 8px; margin: 0 0 14px; }
.er2 .er2-sport-ufc .er2-skin .uap-search input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--er2-line-2); border-radius: 4px; font: inherit; font-size: 16px; }
.er2 .er2-sport-ufc .er2-skin .uap-search button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 4px; background: var(--er2-blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.er2 .er2-sport-ufc .er2-skin .uap-results { display: grid; grid-template-columns: 1fr; gap: 0 20px; margin: 6px 0 14px; }
.er2 .er2-sport-ufc .er2-skin .uap-rcard { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--er2-line); color: var(--er2-text); }
.er2 .er2-sport-ufc .er2-skin .uap-rcard:hover { text-decoration: none; background: var(--er2-blue-soft); }
.er2 .er2-sport-ufc .er2-skin .uap-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--er2-nav); color: #fff; font-size: 13px; font-weight: 800; }
.er2 .er2-sport-ufc .er2-skin .uap-rcard-name { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.er2 .er2-sport-ufc .er2-skin .uap-rcard-nick, .er2 .er2-sport-ufc .er2-skin .uap-rcard-meta, .er2 .er2-sport-ufc .er2-skin .uap-rcard-sum { font-size: 12px; color: var(--er2-text-3); }
.er2 .er2-sport-ufc .er2-skin .uap-rcard-body { min-width: 0; }
.er2 .er2-sport-ufc .er2-skin .uap-empty { padding: 14px 0; color: var(--er2-text-2); }
@media (min-width: 768px) {
  .er2 .er2-sport-ufc .er2-skin .uap-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .er2 .er2-sport-ufc .er2-skin .uap-grid, .er2 .er2-sport-ufc .er2-skin .uap-results { grid-template-columns: 1fr 1fr; }
  .er2 .er2-sport-ufc .er2-skin .uap-unlock { columns: 2; }
}

/* ER2:SPORT-ART:START  (generated by design_system/er2/sport_art.py: edit that file, not this block) */
/* Sport identity tokens. Original vector art only: no photographs, no logos, no league or team marks. */
.er2 .er2-sport-mlb { --er2-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 300'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.36' cy='.3' r='.9'%3E%3Cstop offset='0' stop-color='%233a4d75'/%3E%3Cstop offset='.55' stop-color='%231b2640'/%3E%3Cstop offset='1' stop-color='%230b101a'/%3E%3C/radialGradient%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .72 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3CclipPath id='c'%3E%3Ccircle cx='352' cy='150' r='168'/%3E%3C/clipPath%3E%3C/defs%3E %3Cg clip-path='url(%23c)'%3E%3Ccircle cx='352' cy='150' r='168' fill='url(%23b)'/%3E%3Crect width='560' height='300' filter='url(%23n)' opacity='.55'/%3E%3C/g%3E %3Ccircle cx='352' cy='150' r='168' fill='none' stroke='%235b9bff' stroke-opacity='.28' stroke-width='2'/%3E %3Cg fill='none' stroke='%235b9bff'%3E %3Cpath d='M236 34 C 292 86 292 214 236 266' stroke-opacity='.45' stroke-width='1.6'/%3E%3Cpath d='M468 34 C 412 86 412 214 468 266' stroke-opacity='.45' stroke-width='1.6'/%3E %3Cpath d='M236 34 C 292 86 292 214 236 266' stroke-opacity='.7' stroke-width='9' stroke-dasharray='2.2 8.4'/%3E %3Cpath d='M468 34 C 412 86 412 214 468 266' stroke-opacity='.7' stroke-width='9' stroke-dasharray='2.2 8.4'/%3E %3C/g%3E %3Cg fill='none' stroke='%235b9bff' stroke-opacity='.3' stroke-width='1.4'%3E %3Crect x='44' y='62' width='100' height='132'/%3E%3Cpath d='M77.3 62V194M110.6 62V194M44 106H144M44 150H144'/%3E %3Cpath d='M96 232 L146 282 L96 332 L46 282 Z' stroke-opacity='.22'/%3E%3Cpath d='M96 232 V282'/%3E %3C/g%3E %3Ccircle cx='96' cy='282' r='3' fill='%235b9bff' fill-opacity='.4'/%3E%3C/svg%3E"); --er2-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .68 0 0 0 0 1 0 0 0 .30 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3Cg stroke='%235b9bff' stroke-opacity='.14' stroke-width='1' fill='none' stroke-dasharray='2 6'%3E%3Cpath d='M0 100H200M100 0V200'/%3E%3C/g%3E%3C/svg%3E"); --er2-sep: repeating-linear-gradient(90deg,#5b9bff 0 6px,transparent 6px 11px); --er2-sep-h: 1px; --er2-art-filter: none; }
.er2 .er2-sport-nfl { --er2-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 300'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.36' cy='.3' r='.9'%3E%3Cstop offset='0' stop-color='%233a4d75'/%3E%3Cstop offset='.55' stop-color='%231b2640'/%3E%3Cstop offset='1' stop-color='%230b101a'/%3E%3C/radialGradient%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .72 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3CclipPath id='e'%3E%3Cellipse cx='340' cy='150' rx='182' ry='100'/%3E%3C/clipPath%3E%3C/defs%3E %3Cg stroke='%235b9bff' stroke-opacity='.11' stroke-width='1.6' fill='none'%3E%3Cpath d='M24 0V300'/%3E%3Cpath d='M72 0V300'/%3E%3Cpath d='M120 0V300'/%3E%3Cpath d='M168 0V300'/%3E%3Cpath d='M216 0V300'/%3E%3Cpath d='M264 0V300'/%3E%3Cpath d='M312 0V300'/%3E%3Cpath d='M360 0V300'/%3E%3Cpath d='M408 0V300'/%3E%3Cpath d='M456 0V300'/%3E%3Cpath d='M504 0V300'/%3E%3Cpath d='M552 0V300'/%3E%3C/g%3E %3Cg stroke='%235b9bff' stroke-opacity='.16' stroke-width='1.2' fill='none'%3E%3Cpath d='M24 262v14M24 24v14'/%3E%3Cpath d='M36 262v14M36 24v14'/%3E%3Cpath d='M48 262v14M48 24v14'/%3E%3Cpath d='M60 262v14M60 24v14'/%3E%3Cpath d='M72 262v14M72 24v14'/%3E%3Cpath d='M84 262v14M84 24v14'/%3E%3Cpath d='M96 262v14M96 24v14'/%3E%3Cpath d='M108 262v14M108 24v14'/%3E%3Cpath d='M120 262v14M120 24v14'/%3E%3Cpath d='M132 262v14M132 24v14'/%3E%3Cpath d='M144 262v14M144 24v14'/%3E%3Cpath d='M156 262v14M156 24v14'/%3E%3Cpath d='M168 262v14M168 24v14'/%3E%3Cpath d='M180 262v14M180 24v14'/%3E%3Cpath d='M192 262v14M192 24v14'/%3E%3Cpath d='M204 262v14M204 24v14'/%3E%3Cpath d='M216 262v14M216 24v14'/%3E%3Cpath d='M228 262v14M228 24v14'/%3E%3Cpath d='M240 262v14M240 24v14'/%3E%3Cpath d='M252 262v14M252 24v14'/%3E%3Cpath d='M264 262v14M264 24v14'/%3E%3Cpath d='M276 262v14M276 24v14'/%3E%3Cpath d='M288 262v14M288 24v14'/%3E%3Cpath d='M300 262v14M300 24v14'/%3E%3Cpath d='M312 262v14M312 24v14'/%3E%3Cpath d='M324 262v14M324 24v14'/%3E%3Cpath d='M336 262v14M336 24v14'/%3E%3Cpath d='M348 262v14M348 24v14'/%3E%3Cpath d='M360 262v14M360 24v14'/%3E%3Cpath d='M372 262v14M372 24v14'/%3E%3Cpath d='M384 262v14M384 24v14'/%3E%3Cpath d='M396 262v14M396 24v14'/%3E%3Cpath d='M408 262v14M408 24v14'/%3E%3Cpath d='M420 262v14M420 24v14'/%3E%3Cpath d='M432 262v14M432 24v14'/%3E%3Cpath d='M444 262v14M444 24v14'/%3E%3Cpath d='M456 262v14M456 24v14'/%3E%3Cpath d='M468 262v14M468 24v14'/%3E%3Cpath d='M480 262v14M480 24v14'/%3E%3Cpath d='M492 262v14M492 24v14'/%3E%3Cpath d='M504 262v14M504 24v14'/%3E%3Cpath d='M516 262v14M516 24v14'/%3E%3Cpath d='M528 262v14M528 24v14'/%3E%3Cpath d='M540 262v14M540 24v14'/%3E%3Cpath d='M552 262v14M552 24v14'/%3E%3C/g%3E %3Cg transform='rotate(-20 340 150)'%3E %3Cg clip-path='url(%23e)'%3E%3Cellipse cx='340' cy='150' rx='182' ry='100' fill='url(%23b)'/%3E%3Crect width='560' height='300' filter='url(%23n)' opacity='.6'/%3E%3C/g%3E %3Cellipse cx='340' cy='150' rx='182' ry='100' fill='none' stroke='%235b9bff' stroke-opacity='.3' stroke-width='2'/%3E %3Cg fill='none' stroke='%235b9bff' stroke-opacity='.4' stroke-width='5'%3E%3Cpath d='M196 98 C 208 130 208 170 196 202'/%3E%3Cpath d='M186 108 C 196 134 196 166 186 192'/%3E %3Cpath d='M484 98 C 472 130 472 170 484 202'/%3E%3Cpath d='M494 108 C 484 134 484 166 494 192'/%3E%3C/g%3E %3Cpath d='M254 150H426' stroke='%235b9bff' stroke-opacity='.55' stroke-width='3'/%3E %3Cg stroke='%235b9bff' stroke-opacity='.75' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M262 133v34'/%3E%3Cpath d='M286 133v34'/%3E%3Cpath d='M310 133v34'/%3E%3Cpath d='M334 133v34'/%3E%3Cpath d='M358 133v34'/%3E%3Cpath d='M382 133v34'/%3E%3Cpath d='M406 133v34'/%3E%3C/g%3E %3C/g%3E %3Cg fill='none' stroke='%235b9bff' stroke-opacity='.4' stroke-width='2'%3E%3Cpath d='M20 20h38M20 20v38'/%3E%3Cpath d='M460 280h-38M460 280v-38'/%3E%3C/g%3E%3C/svg%3E"); --er2-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .68 0 0 0 0 1 0 0 0 .30 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3Cg stroke='%235b9bff' stroke-opacity='.1' stroke-width='1.4'%3E%3Cpath d='M0 50H200M0 150H200'/%3E%3C/g%3E%3C/svg%3E"); --er2-sep: repeating-linear-gradient(90deg,#5b9bff 0 1px,transparent 1px 22px); --er2-sep-h: 6px; --er2-art-filter: none; }
.er2 .er2-sport-nba { --er2-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 300'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.36' cy='.3' r='.9'%3E%3Cstop offset='0' stop-color='%233a4d75'/%3E%3Cstop offset='.55' stop-color='%231b2640'/%3E%3Cstop offset='1' stop-color='%230b101a'/%3E%3C/radialGradient%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .72 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3CclipPath id='c'%3E%3Ccircle cx='362' cy='150' r='160'/%3E%3C/clipPath%3E%3C/defs%3E %3Cg fill='none' stroke='%235b9bff' stroke-opacity='.26' stroke-width='1.6'%3E %3Crect x='-4' y='100' width='116' height='100'/%3E%3Ccircle cx='112' cy='150' r='42'/%3E%3Cpath d='M-4 20H40A130 130 0 0 1 40 280H-4'/%3E %3Cpath d='M20 130v40' stroke-width='3'/%3E %3C/g%3E%3Ccircle cx='26' cy='150' r='7' fill='none' stroke='%235b9bff' stroke-opacity='.4' stroke-width='2'/%3E %3Cg fill='%235b9bff' fill-opacity='.38'%3E%3Ccircle cx='70' cy='70' r='4'/%3E%3Ccircle cx='96' cy='104' r='3'/%3E%3Ccircle cx='58' cy='130' r='5'/%3E%3Ccircle cx='120' cy='70' r='3'/%3E%3Ccircle cx='150' cy='118' r='4'/%3E%3Ccircle cx='84' cy='188' r='4'/%3E%3Ccircle cx='130' cy='214' r='3'/%3E%3Ccircle cx='176' cy='176' r='5'/%3E%3Ccircle cx='40' cy='220' r='3'/%3E%3Ccircle cx='188' cy='96' r='3'/%3E%3Ccircle cx='112' cy='150' r='5'/%3E%3Ccircle cx='160' cy='244' r='3'/%3E%3Ccircle cx='60' cy='262' r='4'/%3E%3C/g%3E %3Cg clip-path='url(%23c)'%3E%3Ccircle cx='362' cy='150' r='160' fill='url(%23b)'/%3E%3Crect width='560' height='300' filter='url(%23n)' opacity='.55'/%3E%3C/g%3E %3Cg fill='none' stroke='%23070a11' stroke-opacity='.75' stroke-width='3.4'%3E %3Cpath d='M362 -10V310'/%3E%3Cpath d='M202 150H522'/%3E %3Cpath d='M266 22 C 322 100 322 200 266 278'/%3E %3Cpath d='M458 22 C 402 100 402 200 458 278'/%3E %3C/g%3E %3Ccircle cx='362' cy='150' r='160' fill='none' stroke='%235b9bff' stroke-opacity='.3' stroke-width='2'/%3E%3C/svg%3E"); --er2-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .68 0 0 0 0 1 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3C/svg%3E"); --er2-sep: radial-gradient(circle,#5b9bff 1.1px,transparent 1.6px) 0 0/9px 5px repeat-x; --er2-sep-h: 5px; --er2-art-filter: none; }
.er2 .er2-sport-wnba { --er2-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 300'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.36' cy='.3' r='.9'%3E%3Cstop offset='0' stop-color='%233a4d75'/%3E%3Cstop offset='.55' stop-color='%231b2640'/%3E%3Cstop offset='1' stop-color='%230b101a'/%3E%3C/radialGradient%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .72 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3CclipPath id='c'%3E%3Ccircle cx='362' cy='150' r='160'/%3E%3C/clipPath%3E%3C/defs%3E %3Cg fill='none' stroke='%235b9bff' stroke-opacity='.26' stroke-width='1.6'%3E %3Crect x='-4' y='100' width='116' height='100'/%3E%3Ccircle cx='112' cy='150' r='42'/%3E%3Cpath d='M-4 20H40A130 130 0 0 1 40 280H-4'/%3E %3Cpath d='M20 130v40' stroke-width='3'/%3E %3C/g%3E%3Ccircle cx='26' cy='150' r='7' fill='none' stroke='%235b9bff' stroke-opacity='.4' stroke-width='2'/%3E %3Cg fill='%235b9bff' fill-opacity='.38'%3E%3Ccircle cx='70' cy='70' r='4'/%3E%3Ccircle cx='96' cy='104' r='3'/%3E%3Ccircle cx='58' cy='130' r='5'/%3E%3Ccircle cx='120' cy='70' r='3'/%3E%3Ccircle cx='150' cy='118' r='4'/%3E%3Ccircle cx='84' cy='188' r='4'/%3E%3Ccircle cx='130' cy='214' r='3'/%3E%3Ccircle cx='176' cy='176' r='5'/%3E%3Ccircle cx='40' cy='220' r='3'/%3E%3Ccircle cx='188' cy='96' r='3'/%3E%3Ccircle cx='112' cy='150' r='5'/%3E%3Ccircle cx='160' cy='244' r='3'/%3E%3Ccircle cx='60' cy='262' r='4'/%3E%3C/g%3E %3Cg clip-path='url(%23c)'%3E%3Ccircle cx='362' cy='150' r='160' fill='url(%23b)'/%3E%3Crect width='560' height='300' filter='url(%23n)' opacity='.55'/%3E%3C/g%3E %3Cg fill='none' stroke='%23070a11' stroke-opacity='.75' stroke-width='3.4'%3E %3Cpath d='M362 -10V310'/%3E%3Cpath d='M202 150H522'/%3E %3Cpath d='M266 22 C 322 100 322 200 266 278'/%3E %3Cpath d='M458 22 C 402 100 402 200 458 278'/%3E %3C/g%3E %3Ccircle cx='362' cy='150' r='160' fill='none' stroke='%235b9bff' stroke-opacity='.3' stroke-width='2'/%3E%3C/svg%3E"); --er2-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .68 0 0 0 0 1 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3C/svg%3E"); --er2-sep: radial-gradient(circle,#5b9bff 1.1px,transparent 1.6px) 0 0/9px 5px repeat-x; --er2-sep-h: 5px; --er2-art-filter: hue-rotate(-38deg) saturate(1.15); }
.er2 .er2-sport-ufc { --er2-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 300'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.36' cy='.3' r='.9'%3E%3Cstop offset='0' stop-color='%233a4d75'/%3E%3Cstop offset='.55' stop-color='%231b2640'/%3E%3Cstop offset='1' stop-color='%230b101a'/%3E%3C/radialGradient%3E%3CclipPath id='o'%3E%3Cpolygon points='509.1,215.1 417.1,307.1 286.9,307.1 194.9,215.1 194.9,84.9 286.9,-7.1 417.1,-7.1 509.1,84.9'/%3E%3C/clipPath%3E%3C/defs%3E %3Cg clip-path='url(%23o)'%3E%3Cpolygon points='509.1,215.1 417.1,307.1 286.9,307.1 194.9,215.1 194.9,84.9 286.9,-7.1 417.1,-7.1 509.1,84.9' fill='url(%23b)'/%3E%3Cg stroke='%235b9bff' stroke-opacity='.16' stroke-width='1.3' fill='none'%3E%3Cpath d='M-300 0L0 300'/%3E%3Cpath d='M0 0L-300 300'/%3E%3Cpath d='M-274 0L26 300'/%3E%3Cpath d='M26 0L-274 300'/%3E%3Cpath d='M-248 0L52 300'/%3E%3Cpath d='M52 0L-248 300'/%3E%3Cpath d='M-222 0L78 300'/%3E%3Cpath d='M78 0L-222 300'/%3E%3Cpath d='M-196 0L104 300'/%3E%3Cpath d='M104 0L-196 300'/%3E%3Cpath d='M-170 0L130 300'/%3E%3Cpath d='M130 0L-170 300'/%3E%3Cpath d='M-144 0L156 300'/%3E%3Cpath d='M156 0L-144 300'/%3E%3Cpath d='M-118 0L182 300'/%3E%3Cpath d='M182 0L-118 300'/%3E%3Cpath d='M-92 0L208 300'/%3E%3Cpath d='M208 0L-92 300'/%3E%3Cpath d='M-66 0L234 300'/%3E%3Cpath d='M234 0L-66 300'/%3E%3Cpath d='M-40 0L260 300'/%3E%3Cpath d='M260 0L-40 300'/%3E%3Cpath d='M-14 0L286 300'/%3E%3Cpath d='M286 0L-14 300'/%3E%3Cpath d='M12 0L312 300'/%3E%3Cpath d='M312 0L12 300'/%3E%3Cpath d='M38 0L338 300'/%3E%3Cpath d='M338 0L38 300'/%3E%3Cpath d='M64 0L364 300'/%3E%3Cpath d='M364 0L64 300'/%3E%3Cpath d='M90 0L390 300'/%3E%3Cpath d='M390 0L90 300'/%3E%3Cpath d='M116 0L416 300'/%3E%3Cpath d='M416 0L116 300'/%3E%3Cpath d='M142 0L442 300'/%3E%3Cpath d='M442 0L142 300'/%3E%3Cpath d='M168 0L468 300'/%3E%3Cpath d='M468 0L168 300'/%3E%3Cpath d='M194 0L494 300'/%3E%3Cpath d='M494 0L194 300'/%3E%3Cpath d='M220 0L520 300'/%3E%3Cpath d='M520 0L220 300'/%3E%3Cpath d='M246 0L546 300'/%3E%3Cpath d='M546 0L246 300'/%3E%3Cpath d='M272 0L572 300'/%3E%3Cpath d='M572 0L272 300'/%3E%3Cpath d='M298 0L598 300'/%3E%3Cpath d='M598 0L298 300'/%3E%3Cpath d='M324 0L624 300'/%3E%3Cpath d='M624 0L324 300'/%3E%3Cpath d='M350 0L650 300'/%3E%3Cpath d='M650 0L350 300'/%3E%3Cpath d='M376 0L676 300'/%3E%3Cpath d='M676 0L376 300'/%3E%3Cpath d='M402 0L702 300'/%3E%3Cpath d='M702 0L402 300'/%3E%3Cpath d='M428 0L728 300'/%3E%3Cpath d='M728 0L428 300'/%3E%3Cpath d='M454 0L754 300'/%3E%3Cpath d='M754 0L454 300'/%3E%3Cpath d='M480 0L780 300'/%3E%3Cpath d='M780 0L480 300'/%3E%3Cpath d='M506 0L806 300'/%3E%3Cpath d='M806 0L506 300'/%3E%3Cpath d='M532 0L832 300'/%3E%3Cpath d='M832 0L532 300'/%3E%3Cpath d='M558 0L858 300'/%3E%3Cpath d='M858 0L558 300'/%3E%3C/g%3E%3C/g%3E %3Cpolygon points='509.1,215.1 417.1,307.1 286.9,307.1 194.9,215.1 194.9,84.9 286.9,-7.1 417.1,-7.1 509.1,84.9' fill='none' stroke='%235b9bff' stroke-opacity='.5' stroke-width='3.4' stroke-linejoin='round'/%3E %3Cpolygon points='479.5,202.8 404.8,277.5 299.2,277.5 224.5,202.8 224.5,97.2 299.2,22.5 404.8,22.5 479.5,97.2' fill='none' stroke='%235b9bff' stroke-opacity='.28' stroke-width='1.6' stroke-linejoin='round'/%3E %3Cpolygon points='376.0,159.9 361.9,174.0 342.1,174.0 328.0,159.9 328.0,140.1 342.1,126.0 361.9,126.0 376.0,140.1' fill='%235b9bff' fill-opacity='.22'/%3E %3Cg fill='%235b9bff' fill-opacity='.14'%3E%3Cpolygon points='0,196 124,128 140,152 16,222'/%3E%3Cpolygon points='0,236 150,152 166,176 16,262'/%3E%3Cpolygon points='34,276 178,196 194,220 50,300'/%3E%3C/g%3E %3Cg stroke='%235b9bff' stroke-opacity='.3' stroke-width='1.4'%3E%3Cpath d='M28 40H130'/%3E%3Cpath d='M28 52H96'/%3E%3Cpath d='M28 64H116'/%3E%3C/g%3E%3C/svg%3E"); --er2-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .68 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3Cg stroke='%235b9bff' stroke-opacity='.16' stroke-width='1' fill='none'%3E%3Cpath d='M0 0L200 200M0 100L100 200M100 0L200 100M0 200L200 0M0 100L100 0M100 200L200 100'/%3E%3C/g%3E%3C/svg%3E"); --er2-sep: repeating-linear-gradient(135deg,#5b9bff 0 2px,transparent 2px 8px); --er2-sep-h: 4px; --er2-art-filter: none; }
.er2 .er2-sport-pga { --er2-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 300'%3E%3Cdefs%3E%3C/defs%3E %3Cg fill='none' stroke='%235b9bff' stroke-width='1.5'%3E%3Cellipse cx='344' cy='168' rx='46' ry='30' transform='rotate(-14 344 168)' stroke-opacity='0.38'/%3E%3Cellipse cx='344' cy='168' rx='84' ry='56' transform='rotate(-14 344 168)' stroke-opacity='0.30'/%3E%3Cellipse cx='344' cy='168' rx='122' ry='82' transform='rotate(-14 344 168)' stroke-opacity='0.26'/%3E%3Cellipse cx='344' cy='168' rx='162' ry='108' transform='rotate(-14 344 168)' stroke-opacity='0.22'/%3E%3Cellipse cx='344' cy='168' rx='204' ry='136' transform='rotate(-14 344 168)' stroke-opacity='0.18'/%3E%3Cellipse cx='344' cy='168' rx='248' ry='164' transform='rotate(-14 344 168)' stroke-opacity='0.14'/%3E%3Cellipse cx='344' cy='168' rx='296' ry='192' transform='rotate(-14 344 168)' stroke-opacity='0.10'/%3E%3C/g%3E %3Cellipse cx='344' cy='168' rx='46' ry='30' transform='rotate(-14 344 168)' fill='%231a2740' fill-opacity='.7'/%3E %3Cg stroke='%235b9bff' stroke-opacity='.55'%3E%3Cpath d='M344 168V66' stroke-width='2.4'/%3E%3C/g%3E %3Cpolygon points='344,66 388,82 344,98' fill='%235b9bff' fill-opacity='.7'/%3E %3Ccircle cx='344' cy='168' r='5' fill='%2305070c' stroke='%235b9bff' stroke-opacity='.6' stroke-width='1.5'/%3E %3Cg stroke='%235b9bff' stroke-opacity='.3' stroke-width='1.4'%3E%3Cpath d='M0 268H560'/%3E%3Cpath d='M16 268v10'/%3E%3Cpath d='M48 268v10'/%3E%3Cpath d='M80 268v10'/%3E%3Cpath d='M112 268v10'/%3E%3Cpath d='M144 268v10'/%3E%3Cpath d='M176 268v10'/%3E%3Cpath d='M208 268v10'/%3E%3Cpath d='M240 268v10'/%3E%3Cpath d='M272 268v10'/%3E%3Cpath d='M304 268v10'/%3E%3Cpath d='M336 268v10'/%3E%3Cpath d='M368 268v10'/%3E%3Cpath d='M400 268v10'/%3E%3Cpath d='M432 268v10'/%3E%3Cpath d='M464 268v10'/%3E%3Cpath d='M496 268v10'/%3E%3Cpath d='M528 268v10'/%3E%3C/g%3E %3Cg stroke='%235b9bff' stroke-opacity='.26' stroke-width='1.4'%3E%3Cpath d='M28 40H128'/%3E%3Cpath d='M28 52H98'/%3E%3C/g%3E%3C/svg%3E"); --er2-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .68 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3C/svg%3E"); --er2-sep: repeating-linear-gradient(90deg,#5b9bff 0 1px,transparent 1px 14px); --er2-sep-h: 5px; --er2-art-filter: none; }
.er2 .er2-sport-neutral { --er2-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 300'%3E%3Cdefs%3E%3C/defs%3E%3Cg fill='none' stroke='%235b9bff' stroke-opacity='.2' stroke-width='2'%3E%3Ccircle cx='350' cy='150' r='80'/%3E%3Ccircle cx='350' cy='150' r='125'/%3E%3Ccircle cx='350' cy='150' r='170'/%3E%3Cpath d='M350 0V300'/%3E%3C/g%3E%3C/svg%3E"); --er2-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='1' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .68 0 0 0 0 1 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3C/svg%3E"); --er2-sep: linear-gradient(#5b9bff,#5b9bff); --er2-sep-h: 1px; --er2-art-filter: none; }
/* Phones only (< 768px): clean text zone for the heroes whose copy runs to two lines. */
@media (max-width: 767.98px) {
  .er2 .er2-sport-nfl { --er2-art-mask: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, #000 0, #000 56px, transparent 84px, transparent 132px, #000 158px, #000 100%), linear-gradient(90deg, transparent 0, transparent 91%, #000 100%); --er2-tex-mask: linear-gradient(90deg, transparent 28%, #000 100%), linear-gradient(180deg, #000 0, #000 56px, transparent 84px, transparent 132px, #000 158px, #000 100%), linear-gradient(90deg, transparent 0, transparent 91%, #000 100%); }
  .er2 .er2-sport-nba { --er2-art-mask: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, #000 0, #000 56px, transparent 84px, transparent 132px, #000 158px, #000 100%), linear-gradient(90deg, transparent 0, transparent 91%, #000 100%); --er2-tex-mask: linear-gradient(90deg, transparent 28%, #000 100%), linear-gradient(180deg, #000 0, #000 56px, transparent 84px, transparent 132px, #000 158px, #000 100%), linear-gradient(90deg, transparent 0, transparent 91%, #000 100%); }
  .er2 .er2-sport-wnba { --er2-art-mask: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, #000 0, #000 56px, transparent 84px, transparent 132px, #000 158px, #000 100%), linear-gradient(90deg, transparent 0, transparent 91%, #000 100%); --er2-tex-mask: linear-gradient(90deg, transparent 28%, #000 100%), linear-gradient(180deg, #000 0, #000 56px, transparent 84px, transparent 132px, #000 158px, #000 100%), linear-gradient(90deg, transparent 0, transparent 91%, #000 100%); }
}

/* Shared consumers of the tokens above: written once, driven by the active sport. */
.er2 .er2-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--er2-tex) 0 0 / 200px 200px repeat; opacity: .55; -webkit-mask-image: var(--er2-tex-mask, linear-gradient(90deg, transparent 28%, #000 100%)); mask-image: var(--er2-tex-mask, linear-gradient(90deg, transparent 28%, #000 100%)); -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; }
.er2 .er2-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 70%; pointer-events: none; background: var(--er2-art) right -190px center / auto 140% no-repeat; filter: var(--er2-art-filter, none); -webkit-mask-image: var(--er2-art-mask, linear-gradient(90deg, transparent 0, #000 45%)); mask-image: var(--er2-art-mask, linear-gradient(90deg, transparent 0, #000 45%)); -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; }
.er2 .er2-hero > .er2-wrap { z-index: 1; }
/* Section separators: a 1-2px pattern strip on the top edge, absolutely positioned so it never changes layout. */
.er2 .er2-home .er2-section:not(.er2-o-board):not(.er2-o-access) { position: relative; }
.er2 .er2-home .er2-section:not(.er2-o-board):not(.er2-o-access)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--er2-sep-h, 1px); background: var(--er2-sep); opacity: .55; pointer-events: none; }
.er2 .er2-home--nfl .er2-o-games::before { display: none; }
/* Footer: very faint art on the dark band, kept away from the link text by a strong fade. */
.er2 .er2-foot { position: relative; overflow: hidden; }
.er2 .er2-foot::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 60%; pointer-events: none; background: var(--er2-art) right center / auto 140% no-repeat; opacity: .12; filter: var(--er2-art-filter, none); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60%); mask-image: linear-gradient(90deg, transparent 0, #000 60%); }
.er2 .er2-foot > .er2-wrap { position: relative; }
@media (min-width: 768px) { .er2 .er2-hero::after { width: 60%; background-position: right -80px center; } }
@media (min-width: 1024px) {
  .er2 .er2-hero { padding: 22px 0 24px; }
  .er2 .er2-hero::after { --er2-art-mask: linear-gradient(90deg, transparent 0, #000 45%); right: max(0px, calc((100% - var(--er2-maxw)) / 2)); width: 52%; background-position: right 190px center; background-size: auto 170%; }
  .er2 .er2-hero::before { opacity: .7; -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 100%); mask-image: linear-gradient(90deg, transparent 18%, #000 100%); }
  .er2 .er2-home__main > .er2-section:not(.er2-o-board), .er2 .er2-home__rail > .er2-section:not(.er2-o-access) { padding-top: 12px; }
}
/* ER2:SPORT-ART:END */

/* ============================================================================
   MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) { .er2 * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }