/* ============================================================================
   BestFightOdds redesign — Phase 0: design tokens + app shell.
   Loaded only when the redesign preview flag is on (body.rd), layered on top
   of bfo.min.css. Hand-authored CSS (not part of the SCSS build) so it serves
   directly and can never affect the live (non-redesign) stylesheet.
   ========================================================================== */

:root {
  /* Brand / accent */
  --rd-red: #d4202f;
  --rd-red-grad-a: #e23142;
  --rd-red-grad-b: #c41626;
  --rd-red-tint: #fdecee;
  --rd-down: #e0566b;
  --rd-up: #2fa66a;
  --rd-gold: #f5a623;
  --rd-kalshi: #16c98d;

  /* Ink / text */
  --rd-ink: #1d1d1f;
  --rd-body: #2f2f34;
  --rd-muted: #6e6e73;
  --rd-subtle: #86868b;
  --rd-faint: #a1a1a6;
  --rd-disabled: #b0b0b5;

  /* Surfaces / borders */
  --rd-canvas: #eef0f3;
  --rd-content: #fbfbfd;
  --rd-tint: #f5f5f7;
  --rd-tint2: #fbfbfc;
  --rd-card-border: #ececef;
  --rd-hairline: #f0f0f3;
  --rd-hairline2: #f4f4f6;
  --rd-rule: #e8e8ed;
  --rd-dark: #2e2e33;

  /* Type / radii / shadow */
  --rd-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Helvetica Neue', sans-serif;
  --rd-radius-card: 14px;
  --rd-radius-inner: 12px;
  --rd-radius-pill: 11px;
  --rd-shadow: 0 4px 20px rgba(20, 23, 28, .08);
  --rd-shadow-hover: 0 8px 26px rgba(20, 23, 28, .12);
}

/* ---- Base ---------------------------------------------------------------- */
body.rd {
  margin: 0;
  background: var(--rd-canvas);
  font-family: var(--rd-font);
  color: var(--rd-ink);
  -webkit-font-smoothing: antialiased;
}
body.rd a { color: inherit; text-decoration: none; }

/* Hide the legacy shell pieces if they ever render alongside (safety). */
body.rd .flex-header,
body.rd .flex-nav,
body.rd #mobile-search-box,
body.rd #bottom-container { display: none; }

/* ---- Canvas + app card --------------------------------------------------- */
.rd-canvas { min-height: 100vh; background: var(--rd-canvas); padding: 0 20px 28px; box-sizing: border-box; }
.rd-card {
  max-width: 1180px;
  margin: 0 auto;
  background: #fff;
  border-radius: 0 0 var(--rd-radius-card) var(--rd-radius-card);
  box-shadow: var(--rd-shadow);
  overflow: hidden;
}

/* ---- Header -------------------------------------------------------------- */
.rd-header { display: flex; align-items: center; gap: 16px; padding: 20px 28px; border-bottom: 1px solid var(--rd-hairline); background: #fff; text-align: left; }
.rd-logo-tile {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--rd-radius-pill);
  background: linear-gradient(135deg, var(--rd-red-grad-a), var(--rd-red-grad-b));
  display: flex; align-items: center; justify-content: center;
}
.rd-logo-img { width: 30px; height: 30px; object-fit: contain; display: block; }
.rd-wordmark { font-size: 22px; font-weight: 700; letter-spacing: -.7px; color: var(--rd-ink); line-height: 1; }
.rd-tagline { font-size: 11.5px; color: var(--rd-subtle); margin-top: 4px; letter-spacing: -.1px; }
.rd-search { margin-left: auto; display: flex; align-items: center; gap: 9px; background: var(--rd-tint); border-radius: var(--rd-radius-pill); padding: 11px 15px; width: 300px; box-sizing: border-box; position: relative; }
.rd-search svg { color: var(--rd-subtle); flex: none; }
.rd-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--rd-ink); width: 100%; }
.rd-search input::placeholder { color: var(--rd-subtle); }
/* Type-ahead suggestions dropdown */
.rd-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--rd-card-border); border-radius: var(--rd-radius-inner); box-shadow: var(--rd-shadow-hover); z-index: 60; overflow: hidden; display: none; }
.rd-suggest.show { display: block; }
.rd-suggest a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--rd-ink); font-size: 14px; border-bottom: 1px solid var(--rd-hairline); }
.rd-suggest a:last-child { border-bottom: 0; }
.rd-suggest a.active, .rd-suggest a:hover { background: var(--rd-tint); }
.rd-suggest .rd-sug-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-suggest .rd-sug-type { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--rd-subtle); }

/* ---- Nav ----------------------------------------------------------------- */
.rd-nav { display: flex; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--rd-hairline); background: #fff; }
.rd-nav-scroll { display: flex; align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; }
.rd-nav-item { display: block; padding: 8px 14px; margin: 9px 2px; font-size: 14.5px; font-weight: 500; color: var(--rd-muted); border-radius: 9px; white-space: nowrap; transition: color .12s, background .12s; }
.rd-nav-item:hover { color: var(--rd-ink); }
.rd-nav-item.is-active { color: var(--rd-red); background: var(--rd-red-tint); font-weight: 600; }
.rd-header-controls { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }

/* Reused functional controls (parlay / settings dropdown) restyled for the light nav */
.rd-header-controls #parlay-mode-container,
.rd-header-controls #format-container,
.rd-header-controls #auto-refresh-container { position: relative; }
.rd-header-controls #parlay-mode-box { display: flex; align-items: center; gap: 7px; color: var(--rd-muted); font-size: 13px; }
.rd-header-controls #parlay-mode-box .bfo-check-box { width: 15px; height: 15px; border: 1.5px solid #d2d2d7; border-radius: 5px; color: transparent; font-size: 11px; line-height: 14px; text-align: center; }
.rd-header-controls .dropdown, .rd-header-controls .dropdown li { list-style: none; margin: 0; padding: 0; }
.rd-header-controls #format-toggle-text { color: var(--rd-muted); font-size: 13px; }
/* The legacy nav dropdown is dark: it colours the <li>s (ul.dropdown ul li),
   the links (#fff), and the open toggle (li.hover) via element/ID selectors
   that out-specify a plain .sub_menu rule. Override with #format-container scope
   so the Settings menu reads as a light popover. */
body.rd #format-container ul.dropdown > li.hover { background: var(--rd-tint); border-radius: 9px; }
body.rd #format-container .sub_menu { background: #fff; border: 1px solid var(--rd-card-border); border-radius: var(--rd-radius-inner); box-shadow: var(--rd-shadow-hover); padding: 8px; margin-top: 8px; right: 0; min-width: 224px; }
body.rd #format-container .sub_menu li { background: #fff; color: var(--rd-ink); height: auto; border-radius: 8px; margin: 2px 0; }
body.rd #format-container .sub_menu li:hover { background: var(--rd-tint); }
body.rd #format-container .sub_menu li a { color: var(--rd-ink); border-right: 0; display: block; padding: 10px 16px 10px 38px; font-size: 14px; position: relative; }
body.rd #format-container .sub_menu li a:hover { color: var(--rd-ink); }
/* checkmark in a fixed left gutter so every label lines up */
body.rd #format-container .sub_menu li a span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; font-size: 11px; color: var(--rd-red); }
/* "Return on $ [amount]" row: inline so the input sits beside the label */
body.rd #format-container .sub_menu li[style] { display: flex; align-items: center; gap: 2px; padding: 8px 16px 10px 38px; margin-bottom: 4px; border-bottom-color: var(--rd-hairline) !important; }
body.rd #format-container .sub_menu li[style] a { display: inline !important; padding: 0; }
body.rd #format-container .sub_menu li[style] a span { position: static; transform: none; margin-right: 4px; }
body.rd #format-amount-box1 { border: 1px solid #d2d2d7; border-radius: 7px; padding: 5px 8px; width: 56px; font-size: 13px; margin-left: 6px; color: var(--rd-ink); background: #fff; }
body.rd #format-amount-box1:focus { outline: 0; border-color: var(--rd-red); }

/* ---- Content area -------------------------------------------------------- */
/* text-align:left resets the base site's body{text-align:center}, which the
   redesign content would otherwise inherit (centered breadcrumbs/titles). */
.rd-content { background: var(--rd-content); padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 10px; text-align: left; }

/* ---- Footer -------------------------------------------------------------- */
.rd-footer { text-align: center; padding: 26px 18px 30px; border-top: 1px solid var(--rd-hairline); background: #fff; }
.rd-footer .rd-foot-links { font-size: 13px; color: var(--rd-muted); line-height: 2; }
.rd-footer .rd-foot-links a { color: var(--rd-muted); }
.rd-footer .rd-foot-links a:hover { color: var(--rd-red); }
.rd-footer .rd-foot-sep { color: var(--rd-disabled); margin: 0 8px; }
.rd-footer .rd-foot-rg { margin-top: 12px; font-size: 12px; color: var(--rd-faint); }
.rd-footer .rd-foot-rg a { color: var(--rd-faint); text-decoration: underline; }

/* ---- Section header bar motif (shared, used by later phases) ------------- */
.rd-bar { display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 20px; background: var(--rd-tint); border-left: 4px solid var(--rd-red); border-bottom: 1px solid var(--rd-hairline); }
.rd-bar h2, .rd-bar .rd-bar-title { font-size: 19px; font-weight: 700; letter-spacing: -.4px; color: var(--rd-ink); margin: 0; }

/* ---- Responsive (foundation; refined in a later phase) ------------------- */
@media (max-width: 1024px) {
  .rd-canvas { padding: 0 12px 16px; }
  .rd-search { width: 220px; }
}
@media (max-width: 768px) {
  .rd-header { flex-wrap: wrap; padding: 14px 16px; gap: 12px; }
  /* Free up the row so Parlay/Settings fit beside the wordmark: drop the
     tagline and shrink the wordmark on small screens. */
  .rd-tagline { display: none; }
  .rd-wordmark { font-size: 19px; }
  .rd-search { margin-left: 0; width: 100%; order: 3; }
  /* Parlay/Settings live in the header top-right (inline, no separate row);
     the nav links scroll horizontally in a single row. */
  .rd-nav { padding: 0; }
  .rd-nav-scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 5px 10px; scrollbar-width: none; }
  .rd-nav-scroll::-webkit-scrollbar { display: none; }
  .rd-nav-item { flex: none; margin: 4px 1px; padding: 7px 12px; }
  .rd-header-controls { gap: 12px; }
  .rd-content { padding: 16px; }
}

/* ============================================================================
   Phase 1 — Content & news surfaces. Re-skins the existing news_index (.nx-*),
   news_post (.na-*) and author (.au-*) components to the redesign tokens.
   Scoped under body.rd so it overrides each template's inline <style> (higher
   specificity) and never affects the live view.
   ========================================================================== */

/* ---- News index --------------------------------------------------------- */
body.rd .nx { padding: 0; }
body.rd .nx-head { border-bottom: 1px solid var(--rd-hairline); padding: 4px 0 18px; }
body.rd .nx-head h1 { font-size: 32px; font-weight: 700; letter-spacing: -.9px; color: var(--rd-ink); }
body.rd .nx-head p { color: var(--rd-subtle); font-size: 14px; }
body.rd .nx-grid { gap: 22px; }
body.rd .nx-card { border: 1px solid var(--rd-card-border); border-radius: var(--rd-radius-card); background: #fff; box-shadow: var(--rd-shadow); transition: box-shadow .15s, transform .15s; }
body.rd .nx-card:hover { box-shadow: var(--rd-shadow-hover); transform: translateY(-2px); }
body.rd .nx-thumb-ph { background: linear-gradient(135deg, #3a3a40, #1d1d22); }
body.rd .nx-cat { background: var(--rd-red-tint); color: var(--rd-red); font-weight: 700; letter-spacing: .4px; border-radius: 6px; }
body.rd .nx-title { font-size: 18px; font-weight: 700; color: var(--rd-ink); line-height: 1.3; }
body.rd .nx-card:hover .nx-title { color: var(--rd-red); }
body.rd .nx-excerpt { color: var(--rd-muted); }
body.rd .nx-meta { color: var(--rd-subtle); border-top: 1px solid var(--rd-hairline); padding-top: 14px; margin-top: 14px; }
body.rd .nx-pager .cur { background: var(--rd-red); border-color: var(--rd-red); }
body.rd .nx-pager a:hover { border-color: var(--rd-red); color: var(--rd-red); }

/* ---- Article ------------------------------------------------------------ */
body.rd .na-crumbs, body.rd .na-crumbs a { color: var(--rd-subtle); }
body.rd .na-crumbs a:hover { color: var(--rd-red); }
body.rd .na-cat { background: var(--rd-red-tint); color: var(--rd-red); font-weight: 700; letter-spacing: .5px; }
body.rd .na-title { font-size: 38px; font-weight: 700; letter-spacing: -1.2px; color: var(--rd-ink); line-height: 1.1; }
body.rd .na-meta { color: var(--rd-subtle); }
body.rd .na-meta strong { color: var(--rd-body); }
body.rd .na-hero { background: linear-gradient(135deg, #3a3a40, #1d1d22); border-radius: var(--rd-radius-card); }
body.rd .na-body { font-size: 16px; line-height: 1.78; color: var(--rd-body); }
body.rd .na-body h2 { font-size: 23px; font-weight: 700; letter-spacing: -.5px; color: var(--rd-ink); border-left: 4px solid var(--rd-red); border-bottom: 0; padding: 0 0 0 14px; margin: 40px 0 16px; }
body.rd .na-body a { color: #2a5da8; }
body.rd .na-body blockquote { border-left: 3px solid var(--rd-red); background: var(--rd-tint); color: var(--rd-body); border-radius: 0 8px 8px 0; }
body.rd .na-body th { background: var(--rd-dark); }
body.rd .na-author { background: var(--rd-tint); border: 1px solid var(--rd-card-border); border-radius: var(--rd-radius-inner); }
body.rd .na-author-avatar { background: linear-gradient(135deg, var(--rd-red-grad-a), var(--rd-red-grad-b)); }
body.rd .na-author-name { color: var(--rd-ink); }
body.rd .na-author-role { color: var(--rd-subtle); }
body.rd .na-author-bio { color: var(--rd-muted); }
body.rd .na-back { color: var(--rd-red); }
body.rd .na-disc { color: var(--rd-faint); border-top: 1px solid var(--rd-hairline); }
body.rd .na-author .au-social { box-shadow: none; }

/* ---- Author page -------------------------------------------------------- */
body.rd .au-header { border-bottom: 1px solid var(--rd-hairline); }
body.rd .au-avatar { background: linear-gradient(135deg, var(--rd-red-grad-a), var(--rd-red-grad-b)); }
body.rd .au-name { font-size: 30px; font-weight: 700; letter-spacing: -.8px; color: var(--rd-ink); }
body.rd .au-title { color: var(--rd-subtle); }
body.rd .au-bio { color: var(--rd-muted); }
body.rd .au-sub { color: var(--rd-subtle); }
body.rd .au-post { border-bottom: 1px solid var(--rd-hairline); }
body.rd .au-post a.au-post-title { font-size: 18px; font-weight: 700; color: var(--rd-ink); }
body.rd .au-post a.au-post-title:hover { color: var(--rd-red); }
body.rd .au-post-meta { color: var(--rd-subtle); }
body.rd .au-post-ex { color: var(--rd-muted); }
body.rd .au-pager .cur { background: var(--rd-red); border-color: var(--rd-red); }
body.rd .au-pager a:hover { border-color: var(--rd-red); color: var(--rd-red); }

/* ---- Content / guide pages (.cp-*) — Prediction Markets, guides --------- */
body.rd .cp a { color: #2a5da8; }
body.rd .cp-crumbs, body.rd .cp-crumbs a { color: var(--rd-subtle); }
body.rd .cp-crumbs { padding: 2px 0 4px; }
body.rd .cp-crumbs a:hover { color: var(--rd-red); }
/* Tighter header: less gap between the nav and the title */
body.rd .cp-title { font-size: 32px; font-weight: 700; letter-spacing: -.9px; color: var(--rd-ink); margin: 6px 0 6px; }
body.rd .cp-meta { color: var(--rd-subtle); }
/* Section headings: redesign uses a red left-rule, not a bottom border */
body.rd .cp h2 { font-size: 23px; font-weight: 700; letter-spacing: -.5px; color: var(--rd-ink); border-bottom: 0; border-left: 4px solid var(--rd-red); padding: 0 0 0 14px; margin: 40px 0 16px; }
body.rd .cp h3 { color: var(--rd-ink); }
/* Key takeaways: green-left callout */
body.rd .cp-takeaways { background: #f4fbf7; border: 1px solid #d8ede2; border-left: 4px solid var(--rd-up); border-radius: 0 12px 12px 0; }
body.rd .cp-takeaways-title { color: var(--rd-ink); }
body.rd .cp-takeaways-title::before { color: var(--rd-up); }
body.rd .cp-takeaways li::before { color: var(--rd-up); }
/* Callout / tip blocks */
body.rd .cp-callout { background: var(--rd-tint); border-left: 3px solid var(--rd-dark); border-radius: 0 8px 8px 0; }
body.rd .cp-callout strong { color: var(--rd-dark); }
body.rd .cp-tip { background: #fff8e9; border-left: 3px solid var(--rd-gold); }
/* Comparison + inline tables */
body.rd .cp-tbl thead th, body.rd .cp-main th { background: var(--rd-tint); color: var(--rd-subtle); border-bottom: 1px solid var(--rd-hairline); }
body.rd .cp-tbl .hl { background: var(--rd-red-tint); }
/* Generic content tables (raw WP <table>) -> clean prototype style: light
   header, horizontal-only hairlines, bold first column, rounded card; drop the
   heavy 1px cell grid. (:not(.cp-tbl) leaves the dedicated comparison tables.) */
body.rd .cp-main table:not(.cp-tbl) { border-collapse: separate; border-spacing: 0; border: 1px solid var(--rd-card-border); border-radius: 12px; overflow: hidden; font-variant-numeric: tabular-nums; }
body.rd .cp-main table:not(.cp-tbl) th, body.rd .cp-main table:not(.cp-tbl) td { border: 0; border-bottom: 1px solid var(--rd-hairline); padding: 13px 16px; text-align: left; vertical-align: top; line-height: 1.5; }
body.rd .cp-main table:not(.cp-tbl) thead th { background: var(--rd-tint); color: var(--rd-subtle); font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; white-space: normal; border-bottom: 1px solid var(--rd-card-border); }
body.rd .cp-main table:not(.cp-tbl) tbody td { font-size: 14px; color: var(--rd-body); font-weight: 400; }
body.rd .cp-main table:not(.cp-tbl) tbody td:first-child { color: var(--rd-ink); font-weight: 600; }
body.rd .cp-main table:not(.cp-tbl) tbody tr:nth-child(even) { background: var(--rd-tint2); }
body.rd .cp-main table:not(.cp-tbl) tbody tr:hover { background: var(--rd-tint); }
body.rd .cp-main table:not(.cp-tbl) tbody tr:last-child td { border-bottom: 0; }
/* Featured-platforms table */
body.rd .cp-fp { border: 1px solid var(--rd-card-border); border-radius: var(--rd-radius-inner); box-shadow: var(--rd-shadow); }
body.rd .cp-fp::before { background: linear-gradient(90deg, var(--rd-red-grad-b), var(--rd-red), #e6404e); }
body.rd .cp-fp-stars-val { color: var(--rd-red); }
body.rd .cp .cp-fp-cta { background: var(--rd-red); }
body.rd .cp .cp-fp-cta:hover { background: var(--rd-red-grad-b); box-shadow: 0 4px 14px rgba(212,32,47,.28); }
body.rd .cp-fp-name { color: var(--rd-ink); }
body.rd a.cp-fp-name:hover { color: var(--rd-red); }
/* FAQ accordion */
body.rd .cp-faq-item.open .cp-faq-icon { background: var(--rd-dark); }
/* Sticky TOC */
body.rd .cp-toc { background: var(--rd-tint); border: 1px solid var(--rd-hairline); border-radius: var(--rd-radius-inner); }
body.rd .cp-toc li.active::before { border-color: var(--rd-red); background: var(--rd-red); }
body.rd .cp-toc li.active a { color: var(--rd-ink); }
body.rd .cp-toc a:hover { color: var(--rd-red); }
body.rd .cp-toc-top a { color: #2a5da8; }
/* Author card */
body.rd .cp-author { border: 1px solid var(--rd-card-border); border-radius: var(--rd-radius-inner); }
body.rd .cp-author-avatar { background: linear-gradient(135deg, var(--rd-red-grad-a), var(--rd-red-grad-b)); }
body.rd .cp-author-name { color: var(--rd-ink); }
body.rd .cp-disc { color: var(--rd-faint); }
/* Child-page cards (explore by state) */
body.rd #related-pages a:hover { border-color: var(--rd-red); }

/* ---- Article two-column layout + sticky sidebar widgets ----------------- */
body.rd .rd-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; max-width: 1160px; margin: 0 auto; }
body.rd .rd-article-grid .na { max-width: none; margin: 0; padding: 0; }
body.rd .rd-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }
body.rd .rd-widget { border: 1px solid var(--rd-card-border); border-radius: var(--rd-radius-inner); background: #fff; overflow: hidden; }
body.rd .rd-widget-head { padding: 14px 18px; background: var(--rd-tint); border-left: 4px solid var(--rd-red); border-bottom: 1px solid var(--rd-hairline); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--rd-ink); }
body.rd .rd-widget-news { list-style: none; margin: 0; padding: 6px 0; }
body.rd .rd-widget-news li { display: flex; gap: 10px; padding: 9px 18px; align-items: baseline; }
body.rd .rd-widget-num { color: var(--rd-disabled); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
body.rd .rd-widget-news-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--rd-ink); line-height: 1.35; }
body.rd .rd-widget-news a:hover .rd-widget-news-t { color: var(--rd-red); }
body.rd .rd-widget-news-d { display: block; font-size: 11.5px; color: var(--rd-subtle); margin-top: 2px; }
body.rd .rd-widget-sites, body.rd .rd-widget-events { padding: 6px 0; }
body.rd .rd-site, body.rd .rd-event { display: flex; align-items: center; gap: 10px; padding: 9px 18px; }
body.rd .rd-site-logo { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--rd-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
body.rd .rd-site-name, body.rd .rd-event-t { font-size: 13.5px; font-weight: 600; color: var(--rd-ink); line-height: 1.3; }
body.rd .rd-site-name:hover { color: var(--rd-red); }
body.rd .rd-event-t:hover { color: var(--rd-red); }
body.rd .rd-site-rate { margin-left: auto; font-size: 12px; color: var(--rd-gold); white-space: nowrap; }
body.rd .rd-event-info { min-width: 0; }
body.rd .rd-event-d { display: block; font-size: 11.5px; color: var(--rd-subtle); }
body.rd .rd-site-get, body.rd .rd-event-odds { background: var(--rd-red); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 8px; white-space: nowrap; }
body.rd .rd-event-odds { margin-left: auto; flex: none; }
body.rd .rd-site-get:hover, body.rd .rd-event-odds:hover { background: var(--rd-red-grad-b); }
@media (max-width: 900px) {
  body.rd .rd-article-grid { grid-template-columns: 1fr; }
  body.rd .rd-side { position: static; }
}

/* ---- Kalshi promo (.rv-*) — green-frame hero + body reskin --------------- */
body.rd .rv a { color: #2a5da8; }
body.rd .rv-crumbs, body.rd .rv-crumbs a, body.rd .rv-meta { color: var(--rd-subtle); }
body.rd .rv-crumbs { padding: 0 0 4px; }
body.rd .rv-crumbs a:hover { color: var(--rd-red); }
body.rd .rv-title { font-size: 28px; font-weight: 700; letter-spacing: -.6px; color: var(--rd-ink); margin: 4px 0 8px; }
/* Green-frame hero: .rv-hero becomes the green frame; its children form the inner card */
body.rd .rv-hero { background: var(--rv-accent, var(--rd-kalshi)); padding: 14px; border: 0; border-radius: 16px; box-shadow: none; overflow: visible; }
body.rd .rv-hero-top { background: var(--rd-dark); border-radius: 9px 9px 0 0; }
body.rd .rv-hero-body { background: #fff; }
body.rd .rv-hero-footer { background: #fff; border-radius: 0 0 9px 9px; }
body.rd .rv-hero-stars { color: var(--rd-gold); }
body.rd .rv-hero-tag { background: var(--rd-red); border-radius: 999px; letter-spacing: .6px; }
body.rd .rv-hero-offer strong { color: var(--rd-red); }
body.rd .rv-hero-badge { background: #f1f2f4; border-radius: 999px; color: var(--rd-muted); }
body.rd .rv-code-copy { background: var(--rd-dark); }
body.rd .rv-code-copy:hover { background: #44444a; }
body.rd .rv-code-copy.copied { background: var(--rd-up); border-color: var(--rd-up); }
body.rd .rv .rv-cta-btn { background: var(--rd-red); color: #fff; }
body.rd .rv .rv-cta-btn:hover { background: var(--rd-red-grad-b); }
/* Body sections */
body.rd .rv-main h2 { border-bottom: 0; border-left: 4px solid var(--rd-red); padding: 0 0 0 14px; letter-spacing: -.5px; }
body.rd .rv-callout { background: var(--rd-tint); border-left: 4px solid var(--rd-red); border-radius: 0 8px 8px 0; }
body.rd .rv-tbl thead th { background: var(--rd-dark); }
body.rd .rv-chk-icon { color: var(--rd-up); }
body.rd .rv-pc-pro { background: #f0fdf4; border: 1px solid #bbf7d0; }
body.rd .rv-pc-con { background: #fef2f2; border: 1px solid #fecaca; }
body.rd .rv-faq-item.open .rv-faq-icon { background: var(--rd-dark); }
body.rd .rv-toc { background: var(--rd-tint); border: 1px solid var(--rd-hairline); border-radius: var(--rd-radius-inner); }
body.rd .rv-toc a:hover { color: var(--rd-red); }
body.rd .rv-author { border: 1px solid var(--rd-card-border); border-radius: var(--rd-radius-inner); }
body.rd .rv-author-avatar { background: linear-gradient(135deg, var(--rd-red-grad-a), var(--rd-red-grad-b)); }
body.rd .rv-author-name { color: var(--rd-ink); }
body.rd .rv-disc { color: var(--rd-faint); }
/* In-article CTA blocks reuse the green-frame treatment */
body.rd .rv-cta-box { background: var(--rv-accent, var(--rd-kalshi)); padding: 14px; border: 0; border-radius: 16px; }
body.rd .rv-cta-box .rv-code-copy { background: var(--rd-dark); }
/* Hero name to prototype size; clean the in-article "Use code" chip (markup
   uses .rv-cta-code — a dashed grey pill the green-frame override didn't reach) */
body.rd .rv-hero-top-name { font-size: 24px; }
body.rd .rv-cta-code { background: #fff; border: 1px solid var(--rd-card-border); border-radius: 8px; color: var(--rd-muted); }
body.rd .rv-cta-code:hover { background: var(--rd-tint); }
body.rd .rv-cta-code strong { color: var(--rd-ink); }

/* ---- Reviews index (.rvs-*) — promos grid ------------------------------- */
body.rd .rvs-card { border: 1px solid var(--rd-card-border); border-radius: var(--rd-radius-card); transition: box-shadow .15s, transform .15s; }
body.rd .rvs-card:hover { box-shadow: var(--rd-shadow-hover); transform: translateY(-2px); }
body.rd .rvs-stars { color: var(--rd-gold); }
body.rd .rvs-logo { border-radius: 11px; }
body.rd .rvs .rvs-cta { background: var(--rd-red); border-radius: 9px; }
body.rd .rvs .rvs-cta:hover { background: var(--rd-red-grad-b); }
body.rd .rvs-disc { color: var(--rd-faint); }

/* ============================================================================
   Phase 2 — Fighter page (gen_teampage.php: .team-stats-*). CSS-only reskin
   (the page content is server-generated/cached, so styling is flag-driven in
   <head>, never baked into the cached HTML).
   ========================================================================== */
body.rd #page-wrapper { max-width: 980px !important; margin: 0 auto; }
/* Data/list pages use more of the width (prose pages keep their narrower inline
   width for readability). Fighter history -> wider; search/archive -> wider plus
   a multi-column grid so the short result rows fill the space instead of a sparse
   single column. Scoped via :has(.archive_search_button) so the alerts matchup
   list (also .content-list) is left as a normal table. */
body.rd #page-wrapper:has(.team-stats-table) { max-width: 1080px !important; }
body.rd #page-wrapper:has(.archive_search_button) { max-width: 1040px !important; }
body.rd #page-wrapper:has(.archive_search_button) .content-list { display: block; }
body.rd #page-wrapper:has(.archive_search_button) .content-list tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 26px; }
body.rd #page-wrapper:has(.archive_search_button) .content-list tbody tr { display: block; border-bottom: 1px solid var(--rd-hairline); padding: 9px 2px; }
body.rd #page-wrapper:has(.archive_search_button) .content-list tbody tr:hover { background: var(--rd-tint); }
body.rd #page-wrapper:has(.archive_search_button) .content-list tbody td { display: inline; padding: 0; border: 0; }
body.rd #page-wrapper:has(.archive_search_button) .content-list tbody td.content-list-date:not(:empty) { color: var(--rd-subtle); font-size: 12px; margin-right: 8px; }
/* Hero bar (fighter name) */
body.rd .team-stats-header { background: var(--rd-tint); border: 1px solid var(--rd-card-border); border-left: 4px solid var(--rd-red); border-radius: 14px 14px 0 0; padding: 18px 20px; margin: 0; }
body.rd #team-name { font-size: 26px; font-weight: 700; letter-spacing: -.4px; color: var(--rd-ink); margin: 0; }
/* History table card */
body.rd #team-stats-container { display: block !important; border: 1px solid var(--rd-card-border); border-top: 0; border-radius: 0 0 14px 14px; overflow-x: auto; }
body.rd .team-stats-table { width: 100%; border-collapse: collapse; font-family: var(--rd-font); }
body.rd .team-stats-table thead th { background: var(--rd-tint2); color: var(--rd-subtle); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 12px 10px; border-bottom: 1px solid var(--rd-hairline); }
body.rd .team-stats-table td, body.rd .team-stats-table th { font-size: 14px; }
body.rd .team-stats-table .oppcell a { color: var(--rd-ink); font-weight: 600; }
body.rd .team-stats-table .oppcell a:hover { color: var(--rd-red); }
body.rd .team-stats-table .moneyline { font-variant-numeric: tabular-nums; color: var(--rd-body); }
/* Bolder divider before each fight's first row */
body.rd .team-stats-table .main-row th, body.rd .team-stats-table .main-row td { border-top: 2px solid var(--rd-rule); }
/* Event sub-row */
body.rd .team-stats-table .event-header td { background: var(--rd-tint); color: var(--rd-muted); font-size: 12.5px; font-weight: 600; padding: 8px 12px; }
body.rd .team-stats-table .event-header a { color: var(--rd-muted); }
body.rd .team-stats-table .event-header a:hover { color: var(--rd-red); }
body.rd .header-movement { white-space: nowrap; }
/* Hero: avatar in the tinted bar + a stat-tile row (Fights tracked / With odds /
   Biggest move). Markup ships hidden via inline display:none so the cached page
   is identical for legacy; body.rd reveals it (no cache-key change needed). */
body.rd .team-stats-header { display: flex; align-items: center; gap: 14px; }
body.rd .rd-fh-avatar { display: flex !important; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--rd-red-grad-a), var(--rd-red-grad-b)); color: #fff; font-weight: 700; font-size: 18px; letter-spacing: .5px; }
body.rd .rd-fh-stats { display: flex !important; gap: 10px; padding: 14px 20px; background: #fff; border-left: 1px solid var(--rd-card-border); border-right: 1px solid var(--rd-card-border); border-bottom: 1px solid var(--rd-hairline); }
body.rd .rd-fh-tile { flex: 1; background: var(--rd-tint); border: 1px solid var(--rd-hairline); border-radius: 10px; padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; }
body.rd .rd-fh-val { font-size: 20px; font-weight: 700; color: var(--rd-ink); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
body.rd .rd-fh-lbl { font-size: 11px; font-weight: 600; color: var(--rd-subtle); text-transform: uppercase; letter-spacing: .4px; }
/* Movement % arrows: recolor off the bright legacy inline hexes to the tokens */
body.rd .team-stats-table .mv-up { color: var(--rd-up) !important; }
body.rd .team-stats-table .mv-down { color: var(--rd-down) !important; }
@media (max-width: 600px) {
  body.rd .rd-fh-stats { flex-wrap: wrap; padding: 12px 14px; }
}

/* ============================================================================
   Phase 3 — Odds grids (Home + Event) + line-movement / outcome charts.
   CSS-only reskin of the server-generated, cached odds HTML
   (partials/event.php, gen_oddspage.php, gen_eventpage.php). Flag-driven from
   <head>, never baked into cached markup, so it is cache-safe. Only colour,
   surface, border and radius change — font-sizes and column widths the odds JS
   measures (format toggle, parlay, charts, alerts, bookie reorder) are left
   exactly as the build ships them.
   ========================================================================== */

/* ---- Event card frame ---------------------------------------------------- */
/* table-outer-wrapper is a flex child of .rd-content (which already pads/gaps),
   so drop its 0 15px gutter and let each event be a clean full-width card. */
body.rd .table-outer-wrapper { padding: 0; }
body.rd .table-div {
  box-shadow: none;
  border: 1px solid var(--rd-card-border);
  border-radius: var(--rd-radius-card);
  overflow: hidden;
}

/* Header bar: dark #393B42 strip -> tinted, red-left section bar */
body.rd .table-div .table-header {
  background: var(--rd-tint);
  border-left: 4px solid var(--rd-red);
  border-bottom: 1px solid var(--rd-hairline);
  color: var(--rd-ink);
  height: auto;
  padding: 13px 16px 13px 16px;
  align-items: center;
}
body.rd .table-header a { color: var(--rd-ink); font-weight: 700; }
body.rd .table-header a:hover { color: var(--rd-red); }
body.rd .table-header h1 { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
body.rd .table-header { gap: 8px; }
body.rd .table-header-date { color: var(--rd-muted); font-size: 13px; padding-top: 0; flex: none; white-space: nowrap; }
/* Long event titles ellipsize instead of colliding with the date / label / share. */
body.rd .table-header > a { min-width: 0; overflow: hidden; }
body.rd .table-header h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.rd .table-div:not(.event-collapsed) .table-header { padding-right: 44px; }
/* On the home listing the share is hidden, so drop that reserved right padding
   — lets the hint go truly flush-right, aligned with the "View card" labels.
   (The event page keeps 44px to clear its visible share button.) */
body.rd .table-div:not(.event-collapsed) .table-header:has(.rd-view-odds) { padding-right: 16px; }
/* Collapsed-event label: in-flow (no absolute overlap) + legible on the light bar. */
body.rd .event-collapsed .event-collapsed-label { color: var(--rd-muted); position: static; transform: none; right: auto; top: auto; margin-left: auto; flex: none; padding-left: 10px; }
body.rd .event-collapsed .event-toggle-caret { border-top-color: var(--rd-muted); }
/* Share button: more visible on the light header bar (was faint at .3 opacity) */
body.rd .share-area { right: 14px; }
/* share_3.png is a white icon (built for the dark legacy bar); recolor it black
   for the light redesign header so it's visible. */
body.rd .share-button { opacity: .7; filter: brightness(0); }
body.rd .share-button:hover { opacity: 1; }
/* "View <event> Odds (<date>)" hint on the home listing — ships hidden (so the
   shared cached oddspage is unchanged for legacy) and is revealed only here. */
body.rd .rd-view-odds { display: inline-block !important; margin-left: auto; margin-right: 0; color: var(--rd-muted); font-size: 12.5px; white-space: nowrap; }
/* not bold + don't shrink, so margin-left:auto reliably right-aligns the long
   text (beat the bold/shrinking .table-header > a rules) */
/* Match the "View card" labels: muted grey, 11px / 400, no uppercase (the hint
   is an .table-header a, which otherwise forces ink color + uppercase). */
body.rd .table-header a.rd-view-odds { color: var(--rd-muted); font-size: 11px; font-weight: 400; text-transform: none; flex: none; overflow: visible; }
body.rd .table-header a.rd-view-odds:hover { color: var(--rd-red); }
/* On a collapsed event the hint stays hidden ("View card" shows instead); it
   appears once the card is expanded — so after clicking "No odds yet · View
   card" you get the "View <event> Odds" link too. */
body.rd .table-div.event-collapsed:not(.event-expanded) .rd-view-odds { display: none !important; }
/* Both the hint and the "View card" labels sit flush-right (aligned): drop the
   home-listing share icon on desktop so the hint owns the far-right edge. Share
   still shows on the event page (no hint there) and on mobile (hint hidden). */
@media (min-width: 769px) { body.rd .table-header:has(.rd-view-odds) .share-area { display: none; } }
@media (max-width: 768px) { body.rd .rd-view-odds { display: none !important; } }
/* Promo banners between header and grid */
body.rd .event-banners { background: var(--rd-tint); }

/* ---- Odds table: head ---------------------------------------------------- */
body.rd .odds-table thead tr { background: var(--rd-tint2); }
/* Top-align so every book name sits on the same line; the bonus subtitle (or
   the &nbsp; placeholder) then tucks underneath without pushing Polymarket /
   Kalshi up relative to the books that have no bonus. */
body.rd .odds-table thead th { border-bottom: 1px solid var(--rd-hairline); vertical-align: top; padding-top: 6px; }
body.rd .odds-table thead th a { color: var(--rd-body); text-decoration: none; font-weight: 600; }
body.rd .odds-table thead th a:hover { color: var(--rd-red); text-decoration: none; }
body.rd .odds-table thead th.table-prop-header { color: var(--rd-muted); }
/* Book promo subtitle (e.g. "$50 Bonus", "$10 Free") in the brand red */
/* Promo subtitles ("$50 Bonus", "$10 Free"): subtle red text with a thin red
   underline accent — catches the eye without a background. */
body.rd .bookie-bonus-badge {
  display: inline-block;
  margin-top: 2px;
  padding-bottom: 1px;
  background: none;
  color: var(--rd-red);
  border-bottom: 1.5px solid var(--rd-red);
  border-radius: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}
body.rd .bookie-bonus-badge:hover { color: var(--rd-red-grad-b); border-bottom-color: var(--rd-red-grad-b); text-decoration: none; }

/* ---- Odds table: fighter rows ------------------------------------------- */
body.rd .odds-table tbody th a { color: var(--rd-ink); }
body.rd .odds-table tbody th a:hover { color: var(--rd-red); }
/* Two rows per fight: top row shaded, bottom row white with a bolder rule that
   reads as the divider between fights (the last fight's rule is killed inline). */
body.rd .odds-table tbody tr { background: var(--rd-tint2); }
body.rd .odds-table tbody tr:nth-child(2n) { background: #fff; border-bottom: 1px solid var(--rd-hairline); }
/* Prop sub-rows (revealed on expand) stay visually subordinate */
body.rd .odds-table tbody tr.pr { background: var(--rd-tint); }
body.rd .odds-table tbody tr.pr:nth-child(2n) { background: var(--rd-tint2); border-bottom: 1px solid var(--rd-hairline); }
body.rd .odds-table tbody tr.eventprop { background: var(--rd-tint); border-top: 1px solid var(--rd-rule); }

/* Best price -> red pill on a tinted red field */
body.rd .odds-table tbody td .bestbet {
  background: var(--rd-red-tint);
  color: var(--rd-red);
  border-radius: 5px;
  padding: 1px 5px;
  font-weight: 700;
}
/* Movement arrows: redesign green up / soft-red down (age opacity preserved) */
body.rd .aru { color: var(--rd-up); }
body.rd .ard { color: var(--rd-down); }
body.rd .odds-table tbody td span.na { color: var(--rd-subtle); }
/* Cell hover */
@media not screen and (max-width: 767px) {
  body.rd .odds-table tbody td:hover:not(.button-cell):not(.chart-cell):not(.prop-cell):not(:empty) { background-color: var(--rd-tint); }
  body.rd .odds-table tbody tr.pr td:hover:not(.button-cell):not(.chart-cell):not(.prop-cell):not(:empty) { background-color: var(--rd-hairline2); }
}
/* Parlay / alert / expand glyphs */
body.rd .svg-i { color: var(--rd-muted); }
body.rd .prop-cell a { color: var(--rd-muted); }
body.rd .prop-cell a:hover { color: var(--rd-red); }

/* No-odds + last-changed footer */
body.rd .no-odds { color: var(--rd-muted); }
body.rd .no-odds a { color: var(--rd-red); }
/* "Last change" is a sibling of the event card, so the .rd-content flex gap
   (18px) sits between them. Pull it up tight under its card (the gap before the
   NEXT event is unaffected). */
body.rd .table-last-changed { color: var(--rd-faint); padding-right: 2px; padding-top: 0; margin-top: -6px; }

/* ---- Line-movement / expected-outcome chart cards (event page) ----------- */
/* They sit side by side on desktop. The wrapper is a generic .table-outer-wrapper,
   so target the one holding the charts and lay it out as a grid (deterministic —
   the legacy 45/55 inline-block broke once the cards gained a 1px border under
   the content-box default). Stack on mobile. */
body.rd .table-outer-wrapper:has(> #event-swing-area) { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 18px; align-items: start; }
body.rd #event-swing-area,
body.rd #event-outcome-area {
  box-shadow: none;
  border: 1px solid var(--rd-card-border);
  border-radius: var(--rd-radius-card);
  overflow: hidden;
  box-sizing: border-box;
  width: auto;
  margin: 0;
  display: block;
}
@media (max-width: 768px) {
  body.rd .table-outer-wrapper:has(> #event-swing-area) { grid-template-columns: 1fr; }
}
/* Chart title bar: dark -> tinted, red-left section bar */
body.rd .content-header {
  background: var(--rd-tint);
  color: var(--rd-ink);
  border-left: 4px solid var(--rd-red);
  border-bottom: 1px solid var(--rd-hairline);
  height: auto;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
}
body.rd .content-header a { color: var(--rd-ink); }
body.rd #event-swing-picker-menu { color: var(--rd-muted); font-weight: 400; }
body.rd .event-swing-picker { color: var(--rd-muted); }
body.rd .event-swing-picker:hover { color: var(--rd-ink); }
body.rd .event-swing-picker.picked { color: var(--rd-red); font-weight: 700; }
body.rd .event-swing-expand { color: var(--rd-muted); }
body.rd .event-swing-expand:hover { color: var(--rd-red); }

/* Event custom (SEO) content block -> card */
body.rd .event-custom-content {
  box-shadow: none;
  border: 1px solid var(--rd-card-border);
  border-radius: var(--rd-radius-card);
  margin: 0;
  padding: 20px 22px;
}

/* ---- "Latest MMA News" module (home + event + fighter) ------------------- */
body.rd .bfo-news-mod { margin: 6px auto 0; }
body.rd .bfo-news-mod-card { border-color: var(--rd-card-border); border-radius: var(--rd-radius-inner); }
body.rd .bfo-news-mod-head { background: var(--rd-tint); border-left: 4px solid var(--rd-red); border-bottom: 1px solid var(--rd-hairline); }
body.rd .bfo-news-mod-head a { color: var(--rd-red); }
body.rd .bfo-news-mod-list a:hover { background: var(--rd-tint); color: var(--rd-red); }
body.rd .bfo-news-mod-list li { border-bottom-color: var(--rd-hairline); }

/* ============================================================================
   Phase 4 — remaining utility/legal pages, shared popups, and the full
   responsive/mobile pass. Promos index (.rvs-*) was done in Phase 1d; reviews
   render from those classes. Dark mode is intentionally NOT carried into the
   redesign: the format menu's dark-mode toggle is disabled and darkmode.css is
   never loaded under the flag, so the redesign is light-only by design.
   ========================================================================== */

/* ---- Shared content shell: alerts, archive, search, terms, privacy,
        responsible-gaming, widget (all use #page-container/#page-content) ---- */
body.rd #page-wrapper { margin: 0 auto; }
body.rd #page-container {
  background: #fff;
  box-shadow: none;
  border: 1px solid var(--rd-card-border);
  border-radius: var(--rd-radius-card);
  margin: 0;
  overflow: hidden;
}
body.rd #page-inner-wrapper { padding: 22px 24px; }
body.rd #page-content { font-size: 14px; color: var(--rd-body); }
body.rd #page-content p { line-height: 1.7; }
body.rd #page-content a { color: #2a5da8; }
body.rd #page-content a:hover { color: var(--rd-red); }
/* Section headings use the redesign red-left rule */
body.rd #page-content h1 { font-size: 22px; font-weight: 700; letter-spacing: -.4px; color: var(--rd-ink); border-left: 4px solid var(--rd-red); padding: 0 0 0 14px; margin: 26px 0 12px; }
body.rd #page-content h1:first-child { margin-top: 4px; }
body.rd #page-content h2 { font-size: 17px; font-weight: 700; color: var(--rd-ink); padding-top: 8px; }

/* Form controls -> rounded, light, red focus + red submit buttons */
body.rd #page-content input[type="text"],
body.rd #page-content select,
body.rd #page-content textarea {
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  height: auto;
  min-height: 38px;
  padding: 8px 11px;
  font-size: 14px;
  color: var(--rd-ink);
  background: #fff;
  vertical-align: middle;
  box-sizing: border-box;
}
body.rd #page-content textarea { min-height: 0; }
body.rd #page-content input[type="text"]:focus,
body.rd #page-content select:focus,
body.rd #page-content textarea:focus { outline: 0; border-color: var(--rd-red); }
body.rd #page-content input[type="submit"],
body.rd .archive_search_button {
  background: var(--rd-red);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px 16px;
  height: auto;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
body.rd #page-content input[type="submit"]:hover,
body.rd .archive_search_button:hover { background: var(--rd-red-grad-b); }

/* List tables (archive / search / alerts matchups) */
body.rd .content-list tr { border-bottom: 1px solid var(--rd-hairline); }
body.rd .content-list tr:hover { background: var(--rd-tint); }
body.rd .content-list td a { color: var(--rd-ink); }
body.rd .content-list td a:hover { color: var(--rd-red); }
body.rd .content-vs-cell { color: var(--rd-subtle); }

/* Inline action buttons ("Add alert", reset-to-default, etc.) */
body.rd .button { background: var(--rd-red); color: #fff; border: 0; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; }
body.rd .button:hover { background: var(--rd-red-grad-b); }

/* Sidebar helper note + widget labels */
body.rd .content-sidebar { color: var(--rd-muted); font-size: 12.5px; }
body.rd .content-sidebar a { color: var(--rd-body); }
body.rd .content-sidebar a:hover { color: var(--rd-red); }
body.rd .links-line { color: var(--rd-ink); font-weight: 600; }

/* ---- Shared popups: chart / parlay / bookie-settings / alert windows ----- */
/* (JS-driven scale/opacity transitions are left untouched — colour only.) */
body.rd .popup-window { border-radius: var(--rd-radius-inner); box-shadow: var(--rd-shadow-hover); overflow: hidden; }
body.rd .popup-header { background: var(--rd-tint); color: var(--rd-ink); border-left: 4px solid var(--rd-red); border-bottom: 1px solid var(--rd-hairline); font-weight: 700; padding: 11px 14px; }
body.rd .popup-header a:hover { color: var(--rd-red); }
body.rd .cd-popup-close { color: var(--rd-muted); }
body.rd .cd-popup-close:hover { color: var(--rd-red); }
/* Parlay window exit (×): the toggle lives in the nav which scrolls out of
   reach on mobile, and #parlay-header's innerHTML is JS-overwritten, so the
   close sits as a sibling and triggers the existing parlay toggle to exit. */
body.rd #parlay-window .popup-header { padding-right: 34px; }
body.rd .rd-parlay-close { position: absolute; top: 9px; right: 11px; z-index: 3; font-size: 14px; line-height: 1; color: var(--rd-muted); padding: 2px 5px; }
body.rd .rd-parlay-close:hover { color: var(--rd-red); }
body.rd .highlighted-button, body.rd #chart-link { background: var(--rd-red); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 600; }
body.rd .highlighted-button:hover, body.rd #chart-link:hover { background: var(--rd-red-grad-b); }
body.rd #bookie-order-items li { background: var(--rd-tint); border: 1px solid var(--rd-card-border); border-radius: 7px; margin-bottom: 5px; height: auto; padding: 7px 8px; }
body.rd #bookie-order-items li.sortable-chosen { background: var(--rd-red-tint); }
body.rd #parlay-area, body.rd #alert-area, body.rd #bookie-settings-area { color: var(--rd-body); }

/* ---- Responsive / mobile pass ------------------------------------------- */
/* Event cards rely on .rd-content's gap, not legacy bottom margin */
body.rd .table-outer-wrapper { margin-bottom: 0; }

/* Odds grid on phones: the legacy layout shows a sticky left fighter-name
   column (.odds-table-responsive-header) and blanks the names in the scrolling
   table. Re-assert that blanking under body.rd so the Phase-3 ink colour (equal
   specificity, later in the cascade) doesn't make the names reappear/double. */
@media only screen and (max-width: 961px) {
  body.rd .odds-table:not(.odds-table-responsive-header) tbody tr th,
  body.rd .odds-table:not(.odds-table-responsive-header) tbody tr th a { color: transparent; }
}

/* Collapsed events ("No odds yet · View card") expose the mobile sticky
   left-name column when expanded, via the legacy
   .event-collapsed.event-expanded rule that forces display:block at ALL widths.
   On desktop that column overlaps the main grid (the broken expand). The sticky
   column is only needed on mobile, so keep it hidden above the breakpoint. */
@media only screen and (min-width: 962px) {
  body.rd .event-collapsed.event-expanded .odds-table-responsive-header { display: none; }
}

/* Small phones: tighten the shell + scale down oversized display headings */
@media (max-width: 600px) {
  body.rd .rd-canvas { padding: 0 7px 10px; }
  body.rd .rd-card { border-radius: 0 0 12px 12px; }
  body.rd .rd-content { padding: 12px; }
  body.rd #page-inner-wrapper { padding: 16px 15px; }
  body.rd .na-title { font-size: 27px; letter-spacing: -.7px; }
  body.rd .nx-head h1, body.rd .cp-title, body.rd .rv-title { font-size: 23px; }
  body.rd .au-name { font-size: 24px; }
  body.rd .rd-header { padding: 13px 14px; gap: 10px; }
  body.rd .rd-wordmark { font-size: 18px; }
}

/* ===== Native featured-odds CTA (book-linked banner) ===== *
 * A banner with a featured sportsbook renders as a slim, single-row odds +
 * payout bar for the event's main fight. Ships hidden in the cached HTML;
 * revealed only in the redesign. Accent comes from the banner's BG/Text colors
 * via the inline --cta-accent / --cta-on custom properties. Odds + payout text
 * stay dark ink so they're readable against any accent the admin picks. Uses
 * width, not height: one row on desktop, wraps gracefully when narrow.        */
body.rd .rd-odds-cta {
  display: block !important;
  background: #fff;
  border: 1px solid var(--rd-card-border);
  border-radius: 12px;
  margin: 0 0 12px;
  font-family: var(--rd-font);
  text-align: left;
  overflow: hidden;
}
body.rd .rd-cta-row { display: flex; align-items: center; gap: 9px 16px; flex-wrap: wrap; padding: 9px 14px; }
body.rd .rd-cta-pickline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
body.rd .rd-cta-book { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--rd-subtle); }
body.rd .rd-cta-fighter { font-size: 17px; font-weight: 600; color: var(--rd-ink); letter-spacing: -.2px; }
body.rd .rd-cta-odds { font-size: 17px; font-weight: 600; color: var(--rd-ink); }
body.rd .rd-cta-sub { font-size: 12px; color: var(--rd-muted); }
body.rd .rd-cta-calc { display: flex; align-items: center; gap: 7px; background: var(--rd-tint); border-radius: 9px; padding: 5px 11px; flex: none; }
body.rd .rd-cta-stake-wrap { display: inline-flex; align-items: center; gap: 1px; margin: 0; }
body.rd .rd-cta-calc-lbl { font-size: 13px; color: var(--rd-muted); margin-right: 3px; }
body.rd .rd-cta-dollar { font-size: 14px; color: var(--rd-muted); }
body.rd .rd-cta-stake {
  width: 52px; font-size: 14px; font-weight: 600; color: var(--rd-ink);
  border: 1px solid var(--rd-rule); border-radius: 6px; background: #fff; padding: 3px 6px;
  -moz-appearance: textfield;
}
body.rd .rd-cta-stake:focus { outline: none; border-color: var(--cta-accent, var(--rd-red)); }
body.rd .rd-cta-stake::-webkit-outer-spin-button,
body.rd .rd-cta-stake::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.rd .rd-cta-arrow { color: var(--rd-faint); font-size: 14px; }
body.rd .rd-cta-profit { font-size: 17px; font-weight: 600; color: var(--rd-ink); }
body.rd .rd-cta-win-lbl { font-size: 12px; color: var(--rd-muted); }
body.rd .rd-cta-total { color: var(--rd-faint); }
body.rd .rd-cta-bonus-add { font-size: 16px; font-weight: 600; color: var(--rd-up); white-space: nowrap; }
body.rd .rd-cta-bonus-add-lbl { font-size: 11px; font-weight: 400; }
body.rd .rd-cta-action { display: flex; align-items: center; gap: 10px; flex: none; }
body.rd .rd-cta-bonus { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--rd-body); white-space: nowrap; }
body.rd .rd-cta-gift { color: var(--rd-up); flex: none; }
body.rd .rd-cta-btn {
  display: inline-block; text-decoration: none; white-space: nowrap;
  background: var(--cta-accent, var(--rd-red)); color: var(--cta-on, #fff);
  border-radius: 8px; padding: 8px 18px; font-size: 14px; font-weight: 600; letter-spacing: .1px;
  transition: filter .15s ease;
}
body.rd .rd-cta-btn:hover { filter: brightness(.94); }
body.rd .rd-cta-btn-disabled { opacity: .6; cursor: default; }
body.rd .rd-cta-legal { font-size: 10px; line-height: 1.4; color: var(--rd-faint); padding: 0 14px 7px; }
body.rd .rd-cta-foot { font-size: 11px; line-height: 1.5; color: var(--rd-faint); padding: 1px 14px 8px; }
body.rd .rd-cta-offer { color: var(--rd-body); font-weight: 500; white-space: nowrap; }
body.rd .rd-cta-offer .rd-cta-gift { vertical-align: -2px; margin-right: 3px; }
body.rd .rd-cta-flag { color: var(--rd-faint); }
body.rd .rd-cta-terms { display: inline; }
body.rd .rd-cta-terms > summary { display: inline; cursor: pointer; color: var(--rd-muted); text-decoration: underline; list-style: none; }
body.rd .rd-cta-terms > summary::-webkit-details-marker { display: none; }
body.rd .rd-cta-terms > summary::after { content: " \25BE"; text-decoration: none; font-size: 9px; }
body.rd .rd-cta-terms[open] > summary::after { content: " \25B4"; }
body.rd .rd-cta-terms-body { display: block; margin-top: 5px; color: var(--rd-faint); font-size: 10.5px; line-height: 1.5; max-width: 820px; }
@media (max-width: 760px) {
  body.rd .rd-cta-action { width: 100%; justify-content: space-between; }
  body.rd .rd-cta-btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 480px) {
  body.rd .rd-cta-calc { width: 100%; justify-content: flex-start; }
}