/* ============================================================================
   PFL BRAND REBRAND · COMPONENT OVERRIDES
   ----------------------------------------------------------------------------
   This file restyles the existing `pfl-dashboard-deploy` components to match
   Claude Design's pixel target (screenshots 01-05 in the handoff). It loads
   AFTER /brand/styles.css so the design tokens (--accent, --highlight,
   --font-display, etc.) are already available as CSS custom properties.

   Approach: progressive override, not rewrite.
     - The original <style> block in index.html stays intact (fallback)
     - This file uses higher-specificity / later-cascade selectors to win
     - Removing this <link> would restore the original UI exactly

   Sections, top-to-bottom:
     1. :root semantic alias remap (legacy var names → new tokens)
     2. Global type system (Druk display, Eurostile body)
     3. Header (PFL chip + "FIGHT CARDS 2026" + LIVE + Synced)
     4. Series tabs (red underline on active)
     5. Stats bar (massive Druk numerals + Eurostile labels)
     6. Status legend chips
     7. Event chips (selector cards)
     8. Event card (vertical EV# tab + 3px red spear bar)
     9. Bout table (flag · NAME in Druk · ranks · chips · record)
    10. Status badges (ANNOUNCED green / IN PROGRESS amber / NOT ANNOUNCED dark)
    11. Announcement Calendar modal
    12. Mobile breakpoint
    13. Print / Cageside PDF
   ============================================================================ */


/* ─── 1 · semantic alias remap ────────────────────────────────────────────── */
/* Bridge the legacy variables to the new brand tokens. Existing inline styles
   keep working; component selectors below pull values via the new names too. */
:root {
  /* Legacy → new */
  --red:           var(--accent);
  --red-bg:        rgba(237, 28, 36, .12);
  --blue:          var(--link, #2E8FE0);
  --blue-bg:       rgba(46, 143, 224, .12);
  --dark:          var(--bg);
  --mid:           var(--surface);
  --surface:       var(--surface-raised);
  --border:        var(--border, #2A2E36);
  --border-light:  var(--divider, #1C1F24);
  --text:          var(--text);
  --muted:         var(--text-muted);
  --radius:        var(--radius-md, 4px);

  /* Status chip palettes — semantic to new brand */
  --ann-bg:        rgba(61, 220, 151, .15);
  --ann-text:      #6FE0B0;
  --ann-border:    rgba(61, 220, 151, .35);

  --prog-bg:       rgba(255, 196, 0, .15);
  --prog-text:     #FFD66B;
  --prog-border:   rgba(255, 196, 0, .35);

  --noann-bg:      rgba(138, 143, 153, .12);
  --noann-text:    var(--text-muted, #B8BCC4);
  --noann-border:  rgba(138, 143, 153, .25);

  --rank-bg:       rgba(255, 196, 0, .15);
  --rank-text:     var(--highlight, #FFC400);
  --rank-border:   rgba(255, 196, 0, .35);

  --champ-bg:      rgba(255, 196, 0, .25);
  --champ-text:    var(--highlight, #FFC400);
  --champ-border:  rgba(255, 196, 0, .55);

  /* Carbon scale (used throughout for layered surfaces) */
  --carbon-0:  #0A0A0B;
  --carbon-1:  #15171A;
  --carbon-2:  #1C1F24;
  --carbon-3:  #2A2E36;
  --carbon-4:  #3A3F48;
  --carbon-5:  #5A606B;
}


/* ─── 2 · global type ─────────────────────────────────────────────────────── */
html, body {
  background: var(--carbon-0);
}
body {
  font-family: var(--font-body, "Eurostile", system-ui, sans-serif);
  color: #ECECEC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display = Druk for fighter names, event titles, stat numerals */
.site-title,
.stat-num,
.ev-head h2,
.ev-chip-main strong,
.bout-table .name,
.bout-card .name,
.cal-modal-head h2,
.cal-side-name,
.section-bar,
.tab-label,
.ev-num {
  font-family: var(--font-display, "Druk", "Impact", sans-serif);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: .92;
  text-transform: uppercase;
}

/* Label = Eurostile Extended for eyebrows, stats labels, nav */
.stat-label,
.tab-eyebrow,
.bout-table th,
.section-bar,
.cal-leg-item,
.ev-chip-num,
.live-badge,
.legend-label,
.legend-item {
  font-family: var(--font-label, "Eurostile Ext", "Eurostile", sans-serif);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}


/* ─── 3 · header ──────────────────────────────────────────────────────────── */
.site-header {
  background: linear-gradient(180deg, #000, var(--carbon-900, var(--carbon-0)) 92%) !important;
  border-bottom: 3px solid var(--accent) !important;
  padding: 12px 22px !important;
  gap: 16px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 30;
}
.site-header .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-header .header-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.site-header .header-right {
  margin-left: auto;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-header .header-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label, "Eurostile Ext", sans-serif);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--chrome-400, var(--carbon-5));
  margin-top: 0;
  flex-wrap: wrap;
}
.site-header .header-meta .live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--win, #3DDC97);
}
.site-header .header-meta .user-info,
.site-header .header-meta .user-email { color: var(--chrome-300) !important; }
.site-header .header-meta .sync-lbl { color: var(--chrome-400, var(--carbon-5)); }
.site-header .header-meta .live-dot {
  width: 5px !important;
  height: 5px !important;
  background: var(--win, #3DDC97) !important;
  border-radius: 50% !important;
  animation: pflBlink 2s infinite;
}
@keyframes pflBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* Theme toggle button — slightly smaller, square */
.action-btn.theme-toggle {
  padding: 6px 8px !important;
  min-width: auto;
}
.action-btn.theme-toggle svg { display: block; }
[data-theme="light"] .action-btn.theme-toggle { color: var(--pfl-gold) !important; border-color: var(--pfl-gold) !important; }

/* PFL chip logo — replace the red <div> with a styled chip that matches
   brand/assets/logos/pfl-chip.png. Keeps the existing <div> shape so we
   don't need to touch the markup. */
.pfl-logo {
  width: 64px;
  height: 64px;
  background: var(--carbon-0) url("/brand/assets/logos/pfl-chip.png") center/contain no-repeat;
  border: 1px solid var(--carbon-3);
  border-radius: 2px;
}
.pfl-logo span { display: none; } /* hide the placeholder "PFL" text */

.site-title {
  font-size: 28px;
  letter-spacing: .01em;
  color: #FFFFFF;
}
.site-sub {
  font-family: var(--font-label, "Eurostile Ext", sans-serif);
  font-size: 10px;
  color: var(--carbon-5);
  letter-spacing: .12em;
  margin-top: 4px;
}

.live-badge {
  font-size: 9px;
  color: #3DDC97;
  letter-spacing: .14em;
}
.live-dot {
  background: #3DDC97;
  box-shadow: 0 0 8px rgba(61, 220, 151, .6);
}

.user-info {
  font-family: var(--font-label, "Eurostile Ext", sans-serif);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--carbon-5);
}
.user-info .user-email { color: #ECECEC; }

/* Top-right toolbar buttons — spec from FightCards.jsx ToolBtn:
   font 10px/.04em weight 700, padding 6px 10px, border-radius 4px,
   border-color matches button color, transparent bg default. */
.action-btn,
.sp-link {
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  background: transparent !important;
  color: var(--chrome-300) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: border-color 160ms cubic-bezier(.2,.7,.3,1), background 160ms cubic-bezier(.2,.7,.3,1);
}
.action-btn:hover, .sp-link:hover {
  background: rgba(255, 255, 255, .06) !important;
}
/* Per-button accent colors (matches FightCards.jsx ToolBtn `color` prop) */
.action-btn.toggle-btn,
.action-btn#completed-toggle,
.action-btn#ann-toggle {
  color: var(--pfl-gold, #FFC400) !important;
  border-color: var(--pfl-gold, #FFC400) !important;
}
.action-btn.sched-btn,
.action-btn#sched-toggle {
  color: #c4b5fd !important;
  border-color: #c4b5fd !important;
}
.action-btn.announce-cal-btn,
.action-btn#announce-cal-toggle {
  color: var(--chrome-300) !important;
  border-color: var(--carbon-600, var(--carbon-3)) !important;
}
.action-btn.email-subscribe-btn {
  color: #fca5a5 !important;
  border-color: #fca5a5 !important;
  background: transparent !important;
}
.action-btn.email-subscribe-btn.is-subscribed {
  color: var(--win, #3DDC97) !important;
  border-color: var(--win, #3DDC97) !important;
}
.action-btn.bug-btn {
  color: var(--chrome-400) !important;
  border-color: var(--carbon-600) !important;
}


/* ─── 4 · series tabs (PFL GLOBAL / AFRICA / MENA) ────────────────────────── */
/* Tabs use existing markup — the original CSS class is `.tab` or `.series-tab`.
   We restyle them with a red underline on active state. */
.tab,
.series-tab,
.section-tabs button,
[data-series-tab] {
  font-family: var(--font-label, "Eurostile Ext", sans-serif);
  font-size: 12px;
  letter-spacing: .14em;
  padding: 14px 18px 12px;
  background: transparent;
  color: var(--carbon-5);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 160ms cubic-bezier(.2,.7,.3,1);
}
.tab:hover,
.series-tab:hover,
.section-tabs button:hover,
[data-series-tab]:hover {
  color: #ECECEC;
}
.tab.active,
.series-tab.active,
.section-tabs button.active,
[data-series-tab].active {
  color: #FFFFFF;
  border-bottom-color: var(--accent);
}


/* ─── 5 · stats bar ───────────────────────────────────────────────────────── */
.stats-bar {
  background: var(--carbon-1);
  border-bottom: 1px solid var(--carbon-3);
  padding: 18px 24px;
  gap: 40px;
}
.stat { gap: 5px; }
.stat-num {
  font-family: var(--font-display, "Druk", sans-serif) !important;
  font-size: 30px !important;       /* spec: 30px not 48 */
  line-height: 1 !important;
  color: var(--chrome-100, #FFFFFF);
}
.stat-label {
  font-size: 9px !important;        /* spec: 9px */
  letter-spacing: .12em !important; /* spec: .12em */
  color: var(--chrome-400, #9AA1AB);
  margin-top: 5px;
  text-transform: uppercase;
  font-family: var(--font-label, "Eurostile Ext", sans-serif);
  font-weight: 500;
}
/* Per-status numeral colors */
.stat-num.ann   { color: var(--win, #3DDC97) !important; }
.stat-num.prog  { color: var(--pfl-gold, #FFC400) !important; }
.stat-num.noann { color: var(--chrome-400, #9AA1AB) !important; }


/* ─── 5b · sources bar — REMOVED per design README ────────────────────────── */
/* Per the brand handoff README, the sources bar no longer exists. Status
   legend + Tapology key + rankings link only. Hide the whole thing. */
.source-bar,
#source-bar,
.sources-bar { display: none !important; }

/* ─── 5c · kill any remaining white bands behind tabs + events strip ──────── */
.section-tabs,
.series-tabs,
.tab-strip,
.tabs-wrap,
.ev-selector,
.ev-selector-header,
.ev-selector-grid,
.search-wrap,
.search-bar,
.search-input,
.legend,
main, body > div, section {
  background: var(--carbon-0) !important;
}
.ev-selector-grid { background: transparent !important; }
.search-input {
  background: var(--carbon-1) !important;
  color: #ECECEC !important;
  border: 1px solid var(--carbon-3) !important;
  border-radius: 2px !important;
}
.ev-selector-title { color: var(--carbon-5) !important; }


/* ─── 6 · status legend ───────────────────────────────────────────────────── */
.legend {
  background: transparent;
  padding: 12px 24px;
  border-bottom: 1px solid var(--carbon-3);
  font-family: var(--font-label, "Eurostile Ext", sans-serif);
  font-size: 10px;
  letter-spacing: .14em;
}


/* ─── 7 · event chips — spec from FightCards.jsx EventChip ────────────────── */
.ev-chip {
  background: var(--surface, var(--carbon-1)) !important;
  border: 1px solid var(--border, var(--carbon-3)) !important;
  border-radius: 4px !important;       /* spec radius-md */
  padding: 10px 12px !important;       /* spec */
  width: 210px !important;             /* spec */
  flex-shrink: 0;
  transition: border-color 160ms cubic-bezier(.2,.7,.3,1);
}
.ev-chip:hover { border-color: var(--info, #2E8FE0) !important; }
.ev-chip.is-selected,
.ev-chip[aria-pressed="true"],
.ev-chip.on {
  border-color: var(--info, #2E8FE0) !important;
  background: rgba(46, 143, 224, .08) !important;
}
.ev-chip-num {
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--info, #2E8FE0) !important;
  letter-spacing: .04em !important;
}
.ev-chip-loc {
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: var(--text-strong, #FFFFFF) !important;
  margin-top: 3px;
}
.ev-chip-date {
  font-family: var(--font-body, "Eurostile", sans-serif) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-top: 2px;
}
.ev-chip-main {
  font-family: var(--font-body, "Eurostile", sans-serif) !important;
  font-size: 11px !important;
  color: var(--text-subtle) !important;
  margin-top: 4px;
}


/* ─── 8 · event card · the meat ───────────────────────────────────────────── */
.ev-card {
  background: var(--card-top, var(--carbon-1)) !important;
  border: 1px solid var(--carbon-3) !important;
  border-radius: 4px !important;
  margin: 22px 0 !important;       /* spec: margin-bottom: 22px */
  overflow: hidden;
  position: relative;
  color: var(--text, #ECECEC) !important;
}

/* Vertical EV # tab on the left edge — spec: padding 0 6px, font 11px */
.ev-card::before {
  content: "EV # " attr(data-num);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: var(--carbon-900, var(--carbon-0));
  color: var(--chrome-300);
  font-family: var(--font-label, "Eurostile Ext", sans-serif);
  font-size: 11px;                  /* spec: 11px not 10 */
  font-weight: 700;
  letter-spacing: .1em;             /* spec: .1em not .14 */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--carbon-3);
}
.ev-card > * { margin-left: 24px; }

.ev-head {
  padding: 16px 18px;
  background: var(--carbon-1);
  border-bottom: 1px solid var(--carbon-3);
}
.ev-head h2 {
  font-family: var(--font-display, "Druk", sans-serif) !important;
  font-size: 24px !important;       /* spec: 24px */
  line-height: 0.9 !important;
  color: var(--text-strong, #FFFFFF) !important;
  letter-spacing: .01em;
  text-transform: uppercase !important;
  white-space: nowrap;
}
.ev-meta,
.ev-meta-top {
  font-family: var(--font-label, "Eurostile Ext", sans-serif);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--carbon-5);
  margin-top: 6px;
}

/* Section bars — spec: padding 6px 14px, font 9px/.16em weight 800 */
.section-bar,
.main-card-bar,
[data-section-bar="main"] {
  background: var(--pfl-red, var(--accent)) !important;
  color: #FFFFFF !important;
  padding: 6px 14px !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  border-top: 0 !important;
  position: relative;
}
.prelims-bar,
[data-section-bar="prelims"] {
  background: var(--carbon-700, var(--carbon-0)) !important;
  color: var(--chrome-300, var(--carbon-5)) !important;
  padding: 6px 14px !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--carbon-3) !important;
}


/* ─── 8b · event card body sub-pieces (times row + header columns) ────────── */
/* The times row — spec: var(--inset) bg, 15px Eurostile Ext values */
.ev-times-wrap {
  background: var(--inset, rgba(0,0,0,.18)) !important;
  border-top: 1px solid var(--divider, var(--carbon-3)) !important;
  border-bottom: 1px solid var(--divider, var(--carbon-3)) !important;
  color: var(--text, #ECECEC);
  padding: 12px 20px !important;
}
.ev-times-table .ett-header {
  color: var(--text-subtle, var(--carbon-5)) !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border-bottom: 0 !important;
  padding: 0 0 8px !important;
}
.ett-row td { border-bottom: 0 !important; color: var(--text, #ECECEC); padding: 5px 0 !important; }
.ett-row-label {
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.ett-time {
  color: var(--text, #ECECEC) !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums;
}
.ett-muted { color: var(--text-muted) !important; font-style: italic; }
.ett-main .ett-time,
.ett-main .ett-row-label,
.ett-row.ett-main td { color: var(--pfl-red, var(--accent)) !important; }
.ev-num-col {
  background: var(--carbon-0) !important;
  color: var(--carbon-5) !important;
  border-right: 1px solid var(--carbon-3) !important;
}
.ev-title { color: #FFFFFF; font-family: var(--font-display, "Druk", sans-serif); font-size: 22px; letter-spacing: .01em; text-transform: uppercase; }
.ev-subtitle, .ev-meta-top, .ev-meta { color: var(--carbon-5); }
.ev-resources {
  background: var(--carbon-1) !important;
  border-bottom: 1px solid var(--carbon-3) !important;
}

/* Corner column zebra striping (red/blue light tints in legacy) → flat dark */
.bout-row td,
.bout-row .red-corner,
.bout-row .blue-corner,
.bout-table tbody tr td,
.corner-red,
.corner-blue {
  background: var(--carbon-1) !important;
}
.bout-row:hover td { background: var(--carbon-2) !important; }


/* ─── 9 · bout table / cards ──────────────────────────────────────────────── */
.bout-table,
.bouts-container {
  background: var(--carbon-1) !important;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.bout-table th {
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 8.5px !important;          /* spec */
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: var(--text-subtle, var(--carbon-5)) !important;
  text-transform: uppercase;
  padding: 8px !important;              /* spec */
  border-bottom: 1px solid var(--divider, var(--carbon-3)) !important;
  background: var(--carbon-1) !important;
}
/* Red Corner / Blue Corner specific colors per spec */
.bout-table th.col-red,
.bout-table th[data-col="red"],
.bout-table .red-corner-h { color: var(--pfl-red) !important; }
.bout-table th.col-blue,
.bout-table th[data-col="blue"],
.bout-table .blue-corner-h { color: var(--info, #2E8FE0) !important; }
.bout-table td {
  padding: 11px 8px !important;         /* spec: 11px 8px */
  border-bottom: 1px solid var(--divider, var(--carbon-3)) !important;
  vertical-align: middle;
}
.bout-table tr:last-child td { border-bottom: 0; }

/* Fighter name — Druk uppercase */
.bout-table .name,
.bout-card .name,
.corner .name {
  font-family: var(--font-display, "Druk", sans-serif);
  font-size: 16px;
  letter-spacing: .01em;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: .95;
}

/* Record (W-L-D) — muted Eurostile */
.record,
.bout-table .record {
  font-family: var(--font-body, "Eurostile", sans-serif);
  font-size: 12px;
  color: var(--carbon-5);
  letter-spacing: .04em;
}

/* Rank badge — gold pill */
.rank,
.rank-badge {
  background: rgba(255, 196, 0, .15);
  color: var(--highlight, #FFC400);
  border: 1px solid rgba(255, 196, 0, .35);
  font-family: var(--font-label, "Eurostile Ext", sans-serif);
  font-size: 10px;
  letter-spacing: .08em;
  padding: 2px 6px;
  border-radius: 2px;
}
.champ {
  background: rgba(255, 196, 0, .25);
  border-color: rgba(255, 196, 0, .55);
  color: var(--highlight, #FFC400);
}

/* Action chips (T / IG / photo / play) */
.bout-table .chip,
.bout-card .chip,
.corner .chip,
[data-action-chip] {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--carbon-3);
  background: var(--carbon-2);
  color: var(--carbon-5);
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: .04em;
  text-decoration: none;
  margin: 0 2px;
  transition: border-color 120ms, color 120ms;
}
.bout-table .chip:hover,
.bout-card .chip:hover {
  border-color: var(--accent);
  color: #ECECEC;
}


/* ─── 9b · text-color rescue (the names + tab labels were invisible) ──────── */
/* The legacy CSS sets:
     .bout-row td       → color falls through to body's --text (dark)
     .fighter-link      → color: inherit  (so picks up that dark)
     .fname             → no color (inherits)
     .bout-row.is-title .fname → #78350f (dark amber, invisible on dark)
     .tab.active        → color: #c0392b (dark red, hard to read on dark)
   Force them all to light. */
.bout-row td,
.bout-row.is-main td,
.bout-row.is-title td,
.bout-row.has-result.is-title td {
  color: #ECECEC !important;
}
/* CORRECTION: design uses Eurostile MN Extended Bold @ 12px for fighter
   names (per BoutRow.jsx — `fontFamily: var(--font-label)`). Druk is reserved
   for big display headlines (FIGHT CARDS 2026, event titles). */
/* Fighter name font — Saira Regular per design direction. Saira is a clean
   modern grotesque that reads bigger and tighter than Eurostile Extended,
   especially in uppercase short names like "AJ MCKEE". */
.fighter-link,
.fighter-link .fname,
.bout-row .fname,
.bout-row.is-title .fname,
.bout-row.is-main .fname,
.fighter-cell .fname,
.fname {
  color: var(--text-strong, #FFFFFF) !important;
  font-family: "Saira", "Eurostile Ext", "Eurostile", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .fname, .bout-row .fname { font-size: 12px !important; }
}

/* Action chips — spec: 13×13 (was 16×16) */
.tap-link, .ig-link, .play-link, .photo-link,
.audio-link, .dropbox-link, .ig-link-empty,
.bout-row a.tap-link, .bout-row a.ig-link, .bout-row a.play-link, .bout-row a.photo-link {
  width: 13px !important;
  height: 13px !important;
  font-size: 7px !important;
}

/* Action chips on each bout row — the actual class names are .tap-link,
   .ig-link, .pron-link, .shoot-link. Legacy CSS painted them light grey.
   Force them all to carbon with brand-coloured hovers. */
.tap-link, .ig-link, .pron-link, .shoot-link, .photo-link,
.play-link, .audio-link, .dropbox-link, .ig-link-empty,
.bout-row a.tap-link, .bout-row a.ig-link {
  background: var(--carbon-700, var(--carbon-2)) !important;
  border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  color: var(--chrome-400, var(--carbon-5)) !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 2px !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.tap-link span { line-height: 1; letter-spacing: 0; }
/* Hover specificity must match or exceed the default rule's specificity.
   .bout-row a.tap-link (0,2,1) was beating .tap-link:hover (0,2,0), so the
   red hover never showed. Bump hover selectors to match. */
.tap-link:hover,
.bout-row a.tap-link:hover {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
}
.ig-link:hover,
.bout-row a.ig-link:hover {
  background: #C13584 !important;
  color: #FFFFFF !important;
  border-color: #C13584 !important;
}
.pron-link:hover, .play-link:hover, .audio-link:hover,
.bout-row a.pron-link:hover, .bout-row a.play-link:hover, .bout-row a.audio-link:hover {
  background: var(--info, #2E8FE0) !important;
  color: #FFFFFF !important;
  border-color: var(--info, #2E8FE0) !important;
}
.shoot-link:hover, .dropbox-link:hover, .photo-link:hover,
.bout-row a.shoot-link:hover, .bout-row a.dropbox-link:hover, .bout-row a.photo-link:hover {
  background: #0061FF !important;
  color: #FFFFFF !important;
  border-color: #0061FF !important;
}
/* The pronunciation play-arrow uses CSS triangle — recolor for dark */
.pron-link::before {
  border-left-color: currentColor !important;
}
.pron-link.is-playing { background: var(--info, #2E8FE0) !important; border-color: var(--info, #2E8FE0) !important; color: #fff !important; }
/* SVG icons inside chips */
.tap-link svg, .ig-link svg, .pron-link svg, .shoot-link svg,
.photo-link svg, .audio-link svg, .dropbox-link svg {
  color: currentColor;
  width: 8px;
  height: 8px;
}
.fighter-link:hover .fname,
.bout-row:not(.is-title) .fighter-link:hover .fname {
  color: var(--accent) !important;
}
/* Winner/loser stay semantic but in dark-mode tints */
.fighter-cell.is-winner .fname { color: #3DDC97 !important; }
.fighter-cell.is-loser .fname  { color: var(--carbon-5) !important; font-weight: 600; }

/* Active series tab — force white so it's readable */
.tab.active,
.series-tab.active,
.section-tabs button.active,
[data-series-tab].active {
  color: #FFFFFF !important;
  border-bottom-color: var(--accent) !important;
}

/* Event chip title + main-event subtitle */
.ev-chip-loc { color: #FFFFFF !important; }
.ev-chip-main { color: #ECECEC !important; }
.ev-chip-date { color: var(--carbon-5) !important; }
.ev-selector-title { color: #ECECEC !important; }

/* Title bouts had a yellow tint background that fights with dark mode */
.bout-row.is-title td {
  background: rgba(255, 196, 0, .06) !important;
  border-bottom: 1px solid rgba(255, 196, 0, .15) !important;
}
.bout-row.is-title td.td-wc { color: var(--highlight, #FFC400) !important; }


/* ─── 10 · status badges — sized to FIT the status column comfortably ────── */
/* JSX spec is 8.5px but the deployed dashboard uses a narrower status cell
   than the JSX prototype's 132px grid column. Use legacy size (8px, .04em,
   2x6 padding) to match what shipped before — plenty of room for "NOT
   ANNOUNCED" / "IN PROGRESS" / "ANNOUNCED" at any common screen width. */
.status-badge,
.bout-row .status-badge,
.bout-table .status-badge,
td .status-badge {
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 8px !important;
  letter-spacing: .04em !important;
  padding: 2px 6px !important;
  border-radius: 2px !important;
  text-transform: uppercase !important;
  border: 1px solid !important;
  white-space: nowrap !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}
/* Legend badges can be a touch bigger since the legend has room */
.legend .status-badge,
.legend-item .status-badge {
  font-size: 9px !important;
  padding: 3px 7px !important;
}
.status-badge.status-ANNOUNCED,
.status-ANNOUNCED {
  background: rgba(22, 101, 52, .22) !important;
  color: #5fcf86 !important;
  border-color: rgba(34, 160, 90, .5) !important;
}
.status-badge.status-IN-PROGRESS,
.status-IN-PROGRESS {
  background: rgba(133, 77, 14, .25) !important;
  color: #f0c044 !important;
  border-color: rgba(180, 120, 30, .5) !important;
}
.status-badge.status-NOT-ANNOUNCED,
.status-NOT-ANNOUNCED {
  background: var(--carbon-900, var(--carbon-0)) !important;
  color: #FFFFFF !important;
  border-color: var(--carbon-700, var(--carbon-2)) !important;
}


/* ─── 11 · announcement calendar modal — FULL dark-mode brand port ─────── */
.cal-modal { background: rgba(10, 10, 11, .85) !important; }
.cal-modal-box {
  background: var(--carbon-900, var(--carbon-0)) !important;
  color: var(--text, #ECECEC) !important;
  border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  border-radius: 4px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .8) !important;
}
.cal-modal-head {
  background: var(--carbon-800, var(--carbon-1)) !important;
  border-bottom: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  padding: 14px 18px !important;
}
.cal-modal-head h3 {
  font-family: var(--font-display, "Druk", sans-serif) !important;
  font-size: 18px !important;
  color: var(--text-strong, #FFFFFF) !important;
  text-transform: uppercase !important;
  letter-spacing: .01em !important;
}
.cal-modal-actions { gap: 6px !important; }
.cal-modal-actions button {
  background: var(--carbon-700, var(--carbon-2)) !important;
  color: var(--text, #ECECEC) !important;
  border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  border-radius: 4px !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-weight: 700 !important;
}
.cal-modal-actions button:hover {
  background: var(--carbon-800, var(--carbon-1)) !important;
  border-color: var(--accent) !important;
}

/* Legend + filter row */
.cal-legend {
  background: var(--carbon-800, var(--carbon-1)) !important;
  border-bottom: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  color: var(--text-muted, var(--carbon-5)) !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.cal-leg-item { color: var(--text-muted, var(--carbon-5)) !important; }
.cal-leg-dot.announce { background: var(--info, #2E8FE0) !important; }
.cal-leg-dot.event { background: var(--win, #3DDC97) !important; }
.cal-leg-dot.today {
  background: transparent !important;
  border: 2px solid var(--text-strong, #FFFFFF) !important;
}
.cal-filter-label { color: var(--text-muted, var(--carbon-5)) !important; }
.cal-filter {
  background: var(--carbon-700, var(--carbon-2)) !important;
  color: var(--text, #ECECEC) !important;
  border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  border-radius: 4px !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-weight: 700 !important;
}
.cal-filter:hover { border-color: var(--accent) !important; }
.cal-filter:focus { outline: 2px solid var(--accent) !important; border-color: var(--accent) !important; }

/* Month tiles */
.cal-month {
  background: var(--carbon-900, var(--carbon-0)) !important;
  border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  border-radius: 4px !important;
  padding: 10px 12px 12px !important;
}
.cal-month-name {
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-strong, #FFFFFF) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}
.cal-dow {
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  color: var(--text-subtle, var(--carbon-5)) !important;
  font-size: 9px !important;
  letter-spacing: .04em !important;
}

/* Day cells — DARK by default (was #fff). Subtle carbon tile. */
.cal-day {
  background: var(--carbon-800, var(--carbon-1)) !important;
  color: var(--text, #ECECEC) !important;
  border: 1px solid transparent !important;
  border-radius: 2px !important;
  font-family: var(--font-body, "Eurostile", sans-serif) !important;
  font-size: 11px !important;
}
.cal-day.empty { background: transparent !important; }
.cal-day.past { color: var(--text-subtle, var(--carbon-5)) !important; opacity: .6; }
.cal-day.today {
  border: 2px solid var(--text-strong, #FFFFFF) !important;
  font-weight: 700 !important;
}
.cal-day.has-event {
  background: rgba(61, 220, 151, .18) !important;
  color: var(--win, #3DDC97) !important;
  font-weight: 700 !important;
}
.cal-day.has-announce {
  background: rgba(46, 143, 224, .18) !important;
  color: var(--info, #2E8FE0) !important;
}
.cal-day.has-event.has-announce {
  background: linear-gradient(135deg,
    rgba(61, 220, 151, .18) 0,
    rgba(61, 220, 151, .18) 49%,
    rgba(46, 143, 224, .18) 51%,
    rgba(46, 143, 224, .18) 100%) !important;
}
.cal-day.has-announce:hover { outline: 2px solid var(--info, #2E8FE0) !important; }
.cal-day.selected { outline: 2px solid var(--text-strong, #FFFFFF) !important; }
.cal-day-badge {
  background: var(--info, #2E8FE0) !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--carbon-900, var(--carbon-0)) !important;
}

/* Right side panel */
.cal-side {
  background: var(--carbon-800, var(--carbon-1)) !important;
  border-left: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  color: var(--text, #ECECEC) !important;
}
.cal-side-empty {
  color: var(--text-subtle, var(--carbon-5)) !important;
  font-family: var(--font-body, "Eurostile", sans-serif) !important;
}
.cal-side-day {
  color: var(--text-strong, #FFFFFF) !important;
  border-bottom: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
.cal-side-event {
  background: rgba(61, 220, 151, .15) !important;
  color: var(--win, #3DDC97) !important;
  border: 1px solid rgba(61, 220, 151, .35) !important;
}
.cal-side-label {
  color: var(--text-muted, var(--carbon-5)) !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
}
.cal-side-bout {
  background: var(--carbon-700, var(--carbon-2)) !important;
  border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  border-radius: 4px !important;
}
.cal-side-bout-ev { color: var(--text-muted, var(--carbon-5)) !important; }
.cal-side-bout-vs { color: var(--text, #ECECEC) !important; }
.cal-side-fighter { color: var(--text-strong, #FFFFFF) !important; }
.cal-side-name {
  color: var(--text-strong, #FFFFFF) !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-weight: 700 !important;
}
.cal-side-vs-row { color: var(--text-subtle, var(--carbon-5)) !important; }
.cal-side-bout-status.s-ANNOUNCED {
  background: rgba(22, 101, 52, .35) !important;
  color: #5fcf86 !important;
}
.cal-side-bout-status.s-NOT-ANNOUNCED {
  background: var(--carbon-900, var(--carbon-0)) !important;
  color: var(--text, #FFFFFF) !important;
  border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
}


/* ─── 12 · mobile (≤720px) — full dark-mode port for stacked bout cards ──── */
@media (max-width: 720px) {
  .site-title { font-size: 20px; }
  .pfl-logo { width: 48px; height: 48px; }
  .stats-bar { gap: 20px; padding: 14px 16px; }
  .stat-num { font-size: 28px !important; }
  .ev-head h2 { font-size: 18px; }

  /* ── EV# vertical strip — hide on mobile (saves precious width) ─────── */
  .ev-card::before { display: none !important; }
  .ev-card > * { margin-left: 0 !important; }
  .ev-num-col, .ev-head .ev-num-col { display: none !important; }

  /* ── Event header — ABSOLUTE-POSITION broadcaster top-right so it sits at
     the very top regardless of where it appears in markup, with title and
     subtitle flowing full width in the space below ──────────────────────── */
  .ev-head {
    padding: 12px 14px !important;
    display: block !important;
    position: relative !important;       /* anchor for the absolutely-placed .net-col */
  }
  .ev-meta {
    padding: 0 !important;
    display: block !important;
    padding-right: 110px !important;     /* reserve room so title doesn't overlap the broadcaster */
    min-height: 56px !important;         /* matches broadcaster stack height so nothing is cut */
  }
  .ev-meta-top {
    display: block !important;
  }
  /* Broadcaster pinned to TOP RIGHT, Last updated pinned to BOTTOM RIGHT
     (so it doesn't overlap the venue name). */
  .net-col, .ev-head .net-col {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0 !important;
    z-index: 2;
  }
  .net-col .net-badge,
  .net-col .espn-badge { margin-bottom: 0 !important; }
  /* Move .last-updated-pill OUT of the top-right stack down to the bottom of
     the event header — uses absolute positioning. */
  .net-col .last-updated-pill,
  .ev-head .last-updated-pill {
    position: absolute !important;
    top: auto !important;
    bottom: -28px !important;        /* sits at bottom edge of .ev-head */
    right: 0 !important;
    margin: 0 !important;
  }
  /* Give .ev-head bottom padding so the last-updated pill has room and
     the meta block doesn't ride into the resources row */
  .ev-head {
    padding-bottom: 30px !important;
  }
  /* Shrink the padding-right reserve since we no longer need room for the
     last-updated pill on the top row */
  .ev-meta {
    padding-right: 100px !important;
    min-height: 38px !important;
  }
  /* Title + subtitle flow full width, wrapping naturally under broadcaster */
  .ev-title, .ev-subtitle {
    width: auto !important;
    margin-top: 4px !important;
  }
  .ev-title { font-size: 18px !important; line-height: 1.05 !important; }
  .ev-subtitle { font-size: 11px !important; line-height: 1.4 !important; }
  .ev-tag { flex-shrink: 0 !important; vertical-align: middle; }
  /* Resource buttons row sits CLEAR of the floated broadcaster — full width */
  .ev-resources {
    clear: both !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 14px !important;
  }
  .ev-resources .res-btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    justify-content: center !important;
    font-size: 10px !important;
    padding: 8px 8px !important;
    text-align: center !important;
  }

  /* ── Times area — unified text size, labels slightly bigger ────────── */
  .ev-times-wrap {
    padding: 8px 12px !important;
  }
  .ev-times-table { width: 100% !important; }
  .ev-times-table .ett-header {
    font-size: 8px !important;            /* LOCAL / ET column headers */
    letter-spacing: .12em !important;
    padding: 0 6px 5px !important;
  }
  .ett-row td { padding: 4px 6px !important; }
  /* Labels (PRELIMS / MAIN CARD / EST. END) — slightly BIGGER than times */
  .ett-row-label {
    font-size: 12px !important;
    letter-spacing: .06em !important;
    font-weight: 700 !important;
  }
  /* All times — SAME SIZE across Prelims, Main Card, Est. End */
  .ett-time,
  .ett-muted {
    font-size: 11px !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
  }
  .ett-muted { font-style: italic !important; font-weight: 500 !important; }
  /* Force column alignment: label left, local center, ET right */
  .ev-times-table .ett-header:nth-child(1),
  .ett-row .ett-row-label { text-align: left !important; }
  .ev-times-table .ett-header:nth-child(2),
  .ett-row td:nth-child(2) { text-align: center !important; }
  .ev-times-table .ett-header:nth-child(3),
  .ett-row td:nth-child(3) { text-align: right !important; }
  .ett-et-cell {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* Broadcaster pills in times row stay compact */
  .ett-et-cell .net-badge,
  .ett-et-cell .espn-badge {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }

  /* Resource buttons — full-width row, 2-per-row max on narrow */
  .ev-resources {
    padding: 10px 14px !important;
    gap: 6px !important;
  }
  .ev-resources .res-btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    justify-content: center !important;
    font-size: 10px !important;
    padding: 8px 8px !important;
    text-align: center !important;
  }

  /* ─── MOBILE STACKED BOUT CARDS (.bout-card.mobile) ────────────────── */
  /* Legacy CSS painted them #fff/#fafbff/#fffbeb with #111827 text.
     Brand-port to carbon dark for the new dashboard. */
  .bout-card,
  .bout-card.mobile,
  .bout-card.is-main,
  .bout-card.is-title {
    background: var(--carbon-700, var(--carbon-1)) !important;
    border-bottom: 1px solid var(--carbon-600, var(--carbon-3)) !important;
    color: var(--text, #ECECEC) !important;
    padding: 10px 12px !important;             /* tighter side padding so record fits */
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .bout-card.is-title {
    background: rgba(255, 196, 0, .06) !important;
    border-bottom-color: rgba(255, 196, 0, .25) !important;
  }
  .bout-card.has-result {
    background: rgba(61, 220, 151, .04) !important;
    border-bottom-color: rgba(61, 220, 151, .2) !important;
  }
  .bout-card:last-child { border-bottom: 0 !important; }

  /* Header row (bout # + weight class + status badge) */
  .mb-head, .bout-card .mb-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  .mb-num,
  .bout-card .mb-num {
    background: var(--carbon-900, var(--carbon-0)) !important;
    color: var(--chrome-300) !important;
    border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
    border-radius: 2px !important;
    padding: 2px 6px !important;
    font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
  }
  .bout-card.is-title .mb-num {
    background: rgba(255, 196, 0, .15) !important;
    border-color: rgba(255, 196, 0, .4) !important;
    color: var(--pfl-gold, #FFC400) !important;
  }
  .mb-wc, .bout-card .mb-wc {
    color: var(--text-muted, var(--carbon-5)) !important;
    font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
  }
  .bout-card.is-title .mb-wc {
    color: var(--pfl-gold, #FFC400) !important;
  }

  /* Corner rows — single flex row, name truncates with ellipsis so chips
     and record stay on the right edge regardless of name length. */
  .mb-fighter,
  .bout-card .mb-fighter {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 0 !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  .mb-fighter + .mb-fighter {
    border-top: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  }
  /* Name link takes available space and SHRINKS aggressively so the chips +
     record after it never get pushed off the right edge. */
  .mb-fighter .mb-name-link {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  .mb-fighter .mb-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }
  /* All trailing items pin to the right with flex-shrink: 0 */
  .mb-fighter .mb-corner-dot,
  .mb-fighter .rank-badge,
  .mb-fighter .tap-link,
  .mb-fighter .ig-link,
  .mb-fighter .pron-link,
  .mb-fighter .shoot-link,
  .mb-fighter .photo-link,
  .mb-fighter .audio-link,
  .mb-fighter .play-link,
  .mb-fighter .win-badge,
  .mb-fighter .weight-badge {
    flex-shrink: 0 !important;
  }
  .mb-fighter .rec,
  .mb-fighter .record {
    flex-shrink: 0 !important;
    margin-left: 4px !important;
    padding-right: 2px !important;        /* small gap before card edge so last digit isn't clipped */
    color: var(--text-muted, var(--carbon-5)) !important;
    font-family: var(--font-body, "Eurostile", sans-serif) !important;
    font-size: 11px !important;
    font-style: italic !important;
    white-space: nowrap !important;
  }
  /* (chips + record handled above via grid + order) */
  .bout-card.is-title .mb-fighter + .mb-fighter {
    border-top: 1px solid rgba(255, 196, 0, .2) !important;
  }
  .mb-corner-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  .mb-corner-dot.red { background: var(--pfl-red, var(--accent)) !important; }
  .mb-corner-dot.blue { background: var(--info, #2E8FE0) !important; }
  .mb-name-link {
    color: inherit !important;
    text-decoration: none !important;
  }
  .mb-name,
  .bout-card .mb-name,
  .mb-name-link .mb-name {
    color: var(--text-strong, #FFFFFF) !important;
    font-family: "Saira", "Eurostile Ext", "Eurostile", sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
  }
  .bout-card.is-title .mb-name { color: var(--pfl-gold, #FFC400) !important; }
  .mb-name.tbd, .mb-fighter.mb-tbd .mb-name {
    color: var(--text-subtle) !important;
    text-transform: none !important;
    font-style: italic !important;
    font-weight: 400 !important;
  }
  .mb-fighter.is-winner .mb-name { color: var(--win, #3DDC97) !important; }
  .mb-fighter.is-loser .mb-name { color: var(--text-muted) !important; }
  .mb-vs, .bout-card .mb-vs {
    color: var(--text-subtle, var(--carbon-5)) !important;
    font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
    font-size: 9px !important;
    letter-spacing: .1em !important;
    text-align: center !important;
    padding: 2px 0 !important;
  }
  .mb-record, .bout-card .mb-record {
    color: var(--text-muted, var(--carbon-5)) !important;
    font-family: var(--font-body, "Eurostile", sans-serif) !important;
    font-size: 11px !important;
    font-style: italic !important;
  }

  /* Status badge in mobile bout-card header */
  .bout-card .status-badge,
  .bout-card .mb-status {
    margin-left: auto !important;
  }

  /* Bout table fallback (if it's still showing) */
  .bout-table .name,
  .bout-card .name { font-size: 13px !important; }
}


/* ═════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE README PASS · everything spec'd in the design handoff that
   wasn't already covered by sections 1–12 above.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── 14 · (handled in section 3 — header layout) ──────────────────────────── */

/* ─── 15 · action buttons (Narratives / Research / Schedule / Photos / PDF) ─ */
/* Make them pop more — taller, larger Druk-uppercase label, carbon hairline. */
.ev-resources .ev-res-btn,
.ev-resources a,
.ev-resources button,
.ev-resources .res-btn,
[data-resource-btn] {
  background: var(--surface, var(--carbon-1)) !important;
  border: 1px solid var(--border, var(--carbon-3)) !important;
  color: var(--text, #ECECEC) !important;
  padding: 8px 12px !important;            /* spec */
  border-radius: 4px !important;           /* spec radius-md */
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;        /* spec */
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: border-color 160ms cubic-bezier(.2,.7,.3,1), background 160ms cubic-bezier(.2,.7,.3,1);
}
.ev-resources a:hover,
.ev-resources button:hover,
.ev-resources .res-btn:hover {
  border-color: var(--accent) !important;
  background: var(--carbon-2) !important;
}
/* DISABLED state — when a resource link is not yet available it renders as
   <span class="res-btn disabled">. Make that visually distinct: dim text,
   muted border, no hover affordance, not-allowed cursor. */
.ev-resources .res-btn.disabled,
.ev-resources span.res-btn.disabled,
.ev-resources a[aria-disabled="true"],
.ev-resources a.is-disabled,
.ev-resources button:disabled,
.ev-resources .res-btn.is-disabled {
  opacity: .45 !important;
  color: var(--text-subtle, var(--carbon-5)) !important;
  background: var(--carbon-900, var(--carbon-0)) !important;
  border: 1px dashed var(--carbon-600, var(--carbon-3)) !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}
.ev-resources .res-btn.disabled svg,
.ev-resources span.res-btn.disabled svg {
  color: var(--text-subtle, var(--carbon-5)) !important;
  opacity: .7;
}
/* Hide the trailing download/external arrow on disabled buttons — there's
   nothing to click. */
.ev-resources .res-btn.disabled .res-action,
.ev-resources span.res-btn.disabled .res-action { display: none !important; }
.ev-resources .res-btn:hover.disabled,
.ev-resources span.res-btn.disabled:hover {
  border-color: var(--carbon-600, var(--carbon-3)) !important;
  background: var(--carbon-900, var(--carbon-0)) !important;
}

/* ─── 16 · status badges — sized to fit the STATUS column ────────────────── */
.status-badge {
  padding: 4px 8px !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  border-radius: 2px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  white-space: nowrap;
}

/* ─── 17 · action chips (play / T / IG / photo) — slightly bigger ────────── */
.bout-table .chip,
.bout-card .chip,
.corner .chip,
.fighter-cell .chip,
[data-action-chip] {
  width: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
  border-radius: 2px !important;
}

/* ─── 18 · rank chips — slightly punchier gold ───────────────────────────── */
.rank, .rank-badge {
  font-size: 11px !important;
  padding: 3px 7px !important;
  font-weight: 700 !important;
}
.champ {
  background: rgba(255, 196, 0, .35) !important;
  border-color: rgba(255, 196, 0, .65) !important;
  color: #FFE17A !important;
}

/* ─── 19 · weight class column — readable on dark, same for main + prelims ─ */
.bout-table .td-wc,
.bout-row .td-wc,
.bout-card .td-wc,
.bout-row td.td-wc {
  color: #B8BCC4 !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
/* The bout-number column (#) should also be readable */
.bout-table td:first-child,
.bout-row td:first-child {
  color: #B8BCC4 !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 11px !important;
}

/* ─── 20 · bout-row hover + odd/even rhythm ──────────────────────────────── */
.bout-row td { background: var(--carbon-1) !important; }
.bout-row:nth-child(even) td { background: var(--carbon-1) !important; }
.bout-row:hover td { background: var(--carbon-2) !important; }
.bout-row.is-title td { background: rgba(255, 196, 0, .05) !important; }
.bout-row.is-title:hover td { background: rgba(255, 196, 0, .12) !important; }
.bout-row.has-result.is-title td { background: rgba(61, 220, 151, .06) !important; }

/* ─── 21 · "Subject to change" italic — keep but mute ────────────────────── */
.ev-subtitle em, .ev-subtitle i,
.ev-meta em, .ev-meta i { color: var(--carbon-5); font-style: italic; }

/* ─── 22 · broadcaster pills (ESPN2 / ESPN APP / ESPN+ etc) ──────────────── */
/* Keep the shape/typography uniform — but DON'T force a background colour,
   so the existing per-network colours (ESPN App = blue, ESPN 2 = green,
   ESPN+ = blue, StarzPlay etc.) keep their semantic shade. */
.net-badge, .espn-badge, .broadcaster-pill {
  color: #FFFFFF !important;
  border-radius: 2px !important;
  padding: 4px 10px !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  font-weight: 700 !important;
  border: 0 !important;
}

/* ─── 23 · "Last updated" stamp — spec: carbon-900 bg, chrome-300 fg, 10px */
.last-updated, .ev-last-updated {
  background: var(--carbon-900, var(--carbon-0)) !important;
  color: var(--chrome-300) !important;
  padding: 3px 8px !important;
  border: 0 !important;
  border-radius: 2px !important;
  font-family: var(--font-body, "Eurostile", sans-serif) !important;
  font-size: 10px !important;
  letter-spacing: normal !important;
}

/* ─── 24 · UPCOMING / COMPLETED / TENTATIVE pill — spec: FULL PILL not 2px */
.ev-tag {
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 9px !important;            /* spec */
  letter-spacing: .1em !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;      /* radius-pill — full */
  border: 0 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ev-tag-upcoming   { background: rgba(46, 143, 224, .18) !important; color: var(--info, #2E8FE0) !important; }
.ev-tag-completed  { background: rgba(61, 220, 151, .18) !important; color: var(--win, #3DDC97) !important; }
.ev-tag-tentative  { background: rgba(255, 196, 0, .18) !important; color: var(--pfl-gold, #FFC400) !important; }

/* ─── 25 · "Subject to change" + meta dim text ───────────────────────────── */
.ev-subtitle, .ev-subtitle-extra, .ev-meta-top {
  color: var(--carbon-5) !important;
  font-family: var(--font-body, "Eurostile", sans-serif) !important;
  font-size: 12px !important;
}
.ev-subtitle strong, .ev-meta-top strong { color: #ECECEC !important; font-weight: 600 !important; }

/* ─── 26 · search field rest state ──────────────────────────────────────── */
.search-input::placeholder { color: var(--carbon-5) !important; }
.search-input:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(237, 28, 36, .25) !important;
}

/* ─── 27 · Roster / Rankings buttons ─────────────────────────────────────── */
.roster-btn, .rankings-btn,
[data-roster-btn], [data-rankings-btn] {
  background: var(--carbon-1) !important;
  border: 1px solid var(--carbon-3) !important;
  color: #ECECEC !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  border-radius: 2px !important;
}
.roster-btn:hover, .rankings-btn:hover { border-color: var(--accent) !important; }


/* ─── 27 · flag hover tooltip — brand-port from generic dark grey ────────── */
/* Per design spec the country-name tooltip uses carbon-900 bg, hairline
   border, Eurostile Extended label, refined shadow. The legacy version had
   #1f2937 bg + Arial 11px. */
.flag-wrap[data-tooltip]::after,
.flag-stack[data-tooltip]::after {
  background: var(--carbon-900, var(--carbon-0)) !important;
  color: var(--text-strong, #FFFFFF) !important;
  border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  padding: 5px 11px !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  border-radius: 999px !important;        /* full pill shape per design */
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5) !important;
  bottom: calc(100% + 8px) !important;
}


/* ─── 28 · World Clock popover (tz-popover) — legacy was light-mode only ─── */
/* The clock popover next to event times had hardcoded #fff bg, dark text,
   and a cream "your-time" highlight row. Brand-port to carbon dark. */
.tz-popover {
  background: var(--carbon-900, var(--carbon-0)) !important;
  border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  border-radius: 4px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.6) !important;
  color: var(--text, #ECECEC) !important;
  padding: 14px 16px !important;
  width: 300px !important;
}
.tz-popover-title {
  color: var(--text-strong, #FFFFFF) !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.tz-popover-sub {
  color: var(--text-muted, var(--carbon-5)) !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.tz-popover-row {
  padding: 4px 0 !important;
  color: var(--text, #ECECEC) !important;
}
.tz-popover-row.your-tz {
  /* The highlighted "your time" row — was cream/yellow in legacy.
     Brand it as a subtle gold accent on carbon-800. */
  font-weight: 700 !important;
  color: var(--text-strong, #FFFFFF) !important;
  background: rgba(255, 196, 0, .08) !important;
  border: 1px solid rgba(255, 196, 0, .25) !important;
  padding: 6px 10px !important;
  margin: 0 -10px 8px !important;
  border-radius: 2px !important;
}
.tz-popover-city {
  color: var(--text, #ECECEC) !important;
  font-family: var(--font-body, "Eurostile", sans-serif) !important;
  font-size: 13px !important;
}
.tz-popover-row.your-tz .tz-popover-city {
  color: var(--text-strong, #FFFFFF) !important;
  font-weight: 700 !important;
}
.tz-popover-time {
  color: var(--text-strong, #FFFFFF) !important;
  font-family: var(--font-label, "Eurostile Ext", sans-serif) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  font-size: 12px !important;
}
.tz-popover-row.your-tz .tz-popover-time {
  color: var(--pfl-gold, #FFC400) !important;
}
.tz-popover-divider {
  height: 1px !important;
  background: var(--carbon-600, var(--carbon-3)) !important;
  margin: 8px -16px !important;
}
.tz-popover-search {
  background: var(--carbon-800, var(--carbon-1)) !important;
  border: 1px solid var(--carbon-600, var(--carbon-3)) !important;
  border-radius: 4px !important;
  color: var(--text, #ECECEC) !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  font-family: var(--font-body, "Eurostile", sans-serif) !important;
}
.tz-popover-search::placeholder { color: var(--text-subtle, var(--carbon-5)) !important; }
.tz-popover-search:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(237, 28, 36, .25) !important;
}
.tz-popover-empty {
  color: var(--text-subtle, var(--carbon-5)) !important;
  font-style: italic;
  font-size: 11px !important;
}
.tz-popover-results .tz-popover-row { padding: 3px 0 !important; }
/* The clock button that opens the popover */
.tz-clock-btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  padding: 2px;
}
.tz-clock-btn:hover { color: var(--text-strong) !important; }


/* ═════════════════════════════════════════════════════════════════════════
   CAGESIDE PDF · README-spec print layout
   ─────────────────────────────────────────────────────────────────────────
   "A4 landscape, one event per page, repainted to white paper; hides the
   header chrome, action chips, world-clock buttons, and the STATUS column;
   prints only flag · name · ranking · record + times + section bars.
   print-color-adjust:exact keeps the red bars/badges/flags."
   ═════════════════════════════════════════════════════════════════════════ */

/* Force A4 landscape with comfortable margins. Body padding (from legacy
   @page margin:0 + body padding) handles the actual content insets. */
@page { size: A4 landscape; margin: 0; }

@media print {
  /* ─── 1 · canvas: white paper, black ink, exact colour fidelity ─────── */
  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    font-family: var(--font-body, "Eurostile", "Helvetica", sans-serif) !important;
  }
  body { padding: 8mm 12mm 8mm 10mm !important; }   /* balanced — flags fit, page fills */

  /* ─── 2 · hide dashboard chrome — KEEP UPCOMING + Last updated + broadcaster
         per the design mockup which shows all three in the printed header. */
  .site-header, .stats-bar, .legend, .ev-selector,
  .source-bar, .series-tabs, .tab, .series-tab, [data-series-tab],
  .search-wrap, .search-input, .roster-btn, .rankings-btn,
  .action-btn, .sp-link,
  .toggle-btn, .sched-btn, .announce-cal-btn, .email-subscribe-btn, .bug-btn,
  .theme-toggle, #theme-toggle,
  .cal-modal, .bug-modal, .tz-popover, .tz-clock-btn,
  .ev-resources,                                  /* Narratives/Research/PDF row */
  .ev-subtitle-extra,
  .header-meta, .live-badge, .user-info, .sync-lbl,
  .no-print {
    display: none !important;
  }
  /* Keep visible per mockup: */
  .ev-tag, .ev-tag-upcoming, .ev-tag-completed, .ev-tag-tentative,
  .last-updated-pill, .ev-last-updated, .last-updated,
  .net-badge, .espn-badge, .broadcaster-pill {
    display: inline-flex !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ─── 3 · hide action chips on each fighter row ─────────────────────── */
  .tap-link, .ig-link, .pron-link, .shoot-link, .photo-link,
  .play-link, .audio-link, .dropbox-link, .ig-link-empty,
  .bout-row a.tap-link, .bout-row a.ig-link {
    display: none !important;
  }

  /* ─── 4 · hide STATUS column entirely (spec) ────────────────────────── */
  .bout-table th:last-child,
  .bout-table td:last-child,
  .status-badge,
  .status-ANNOUNCED, .status-IN-PROGRESS, .status-NOT-ANNOUNCED, .status-COMPLETED,
  th.td-status, td.td-status,
  [data-col="status"],
  .announce-tag, .ann-tag {
    display: none !important;
  }

  /* ─── 5 · event card: one per page, white paper ────────────────────── */
  body .ev-card,
  .ev-card {
    background: #FFFFFF !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }
  /* Last card doesn't force an extra blank page */
  .ev-card:last-child { page-break-after: auto; break-after: auto; }
  /* The bouts-container holds the bout-table. Add explicit right padding
     so there's visible whitespace between the flag (last cell content) and
     the card's right border. */
  body .bouts-container,
  .bouts-container {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 24px !important;          /* <-- gutter between flag & card border */
  }
  /* The times-wrap and section-bar areas also need matching right padding
     so the layout looks consistent — but they already extend to the card
     border (the red MAIN CARD bar is supposed to). Only the bout rows need
     the inset. */
  /* No truncation — let names render at full length. Right-side safe area
     handled via body padding + cell padding-right (NOT table margin, which
     combined with width:100% pushes content past the container). */
  body .bout-table,
  .bout-table {
    box-sizing: border-box !important;
  }
  body .bout-table .fighter-cell,
  body .fighter-cell {
    flex-wrap: nowrap !important;
  }
  body .bout-table .fname,
  body .fname {
    white-space: nowrap !important;
  }

  /* ─── 6 · EV # tab — narrower per design mockup ─────────────────────── */
  .ev-card::before {
    background: #FFFFFF !important;
    color: #888888 !important;
    border-right: 1px solid #DDDDDD !important;
    width: 14px !important;
    font-size: 8px !important;
    letter-spacing: .15em !important;
  }
  .ev-card > * { margin-left: 14px !important; }

  /* ─── 7 · event header (title + meta) — match mockup ─────────────────── */
  .ev-head {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E5E5 !important;
    padding: 10px 14px !important;
  }
  .ev-head h2, .ev-title {
    color: #000000 !important;
    font-family: var(--font-display, "Druk", "Impact", sans-serif) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }
  .ev-meta, .ev-meta-top, .ev-subtitle {
    color: #666666 !important;
    font-size: 10.5px !important;
    font-style: normal !important;
    margin-top: 4px !important;
  }
  .ev-subtitle strong, .ev-meta-top strong { color: #222222 !important; }
  /* UPCOMING / COMPLETED pill in printed header */
  .ev-tag {
    border-radius: 999px !important;
    padding: 2px 8px !important;
    font-size: 8px !important;
    letter-spacing: .1em !important;
  }
  .ev-tag-upcoming { background: rgba(46, 143, 224, .18) !important; color: #1666B3 !important; }
  .ev-tag-completed { background: rgba(61, 220, 151, .18) !important; color: #0E5536 !important; }
  /* Broadcaster pill on the right of the header */
  .net-badge, .espn-badge, .broadcaster-pill {
    padding: 3px 8px !important;
    font-size: 9px !important;
    border-radius: 2px !important;
  }
  /* Last updated stamp on the right under broadcaster */
  .last-updated-pill {
    background: #000000 !important;
    color: #FFFFFF !important;
    font-size: 8.5px !important;
    padding: 2px 6px !important;
    border-radius: 2px !important;
  }

  /* ─── 8 · times table — white per mockup (not grey) ─────────────────── */
  .ev-times-wrap {
    background: #FFFFFF !important;
    border-top: 1px solid #E5E5E5 !important;
    border-bottom: 1px solid #E5E5E5 !important;
    color: #000000 !important;
    padding: 8px 14px !important;
  }
  .ev-times-table .ett-header {
    color: #666666 !important;
    border-bottom: 0 !important;
    padding: 0 0 4px !important;
    font-size: 8px !important;
  }
  .ett-row td { border-bottom: 0 !important; color: #000000 !important; padding: 2px 0 !important; }
  .ett-row-label { color: #000000 !important; font-size: 10px !important; }
  .ett-time { color: #000000 !important; font-size: 12px !important; }   /* was 14px */
  .ett-muted { color: #777777 !important; }
  .ett-main .ett-time,
  .ett-main .ett-row-label { color: #ED1C24 !important; }

  /* ─── 9 · section bars — RED MAIN, BLACK PRELIMS — tighter ──────────── */
  .section-bar, .main-card-bar, [data-section-bar="main"] {
    background: #ED1C24 !important;
    color: #FFFFFF !important;
    border-top: 0 !important;
    padding: 3px 12px !important;     /* was 5px */
    font-size: 8px !important;        /* was 9px */
    letter-spacing: .16em !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .prelims-bar, [data-section-bar="prelims"] {
    background: #000000 !important;
    color: #FFFFFF !important;
    border-bottom: 0 !important;
    padding: 3px 12px !important;
    font-size: 8px !important;
    letter-spacing: .16em !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ─── 10 · bout table — flag · name · rank · record only ────────────── */
  /* Specificity-buster selectors: `body .bout-table tbody tr td` beats the
     `.bout-table tbody tr td` rule that paints the dark-mode carbon-1 bg. */
  body .bout-table,
  body .bouts-container,
  .bout-table, .bouts-container {
    background: #FFFFFF !important;
    color: #000000 !important;
    width: 100% !important;
  }
  body .bout-table th,
  .bout-table th {
    color: #555555 !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #000000 !important;
    font-size: 7.5px !important;
    letter-spacing: .1em !important;
    padding: 4px 6px !important;
  }
  /* Bout-number column (#) — narrow, centred; spec uses 28px */
  /* Use fixed layout so column widths obey us strictly — prevents the
     blue-corner flag from being pushed past the right edge of the page. */
  body .bout-table,
  .bout-table {
    table-layout: fixed !important;
    width: 100% !important;
  }
  body .bout-table th:first-child,
  body .bout-table td:first-child,
  body .bout-row td:first-child,
  .bout-table th:first-child,
  .bout-table td:first-child {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    text-align: center !important;
    padding: 3px 2px !important;
    font-size: 9px !important;
    color: #888888 !important;
  }
  /* Weight class column (2nd col) — narrower, fit on one line */
  body .bout-table th:nth-child(2),
  body .bout-table td:nth-child(2),
  body .bout-row td:nth-child(2),
  .bout-table th:nth-child(2),
  .bout-table td:nth-child(2) {
    width: 95px !important;
    max-width: 95px !important;
    padding: 3px 6px !important;
  }
  /* Red and blue corner cells share the remaining width 50/50 */
  body .bout-table th:nth-child(3),
  body .bout-table td:nth-child(3),
  body .bout-table th:nth-child(4),
  body .bout-table td:nth-child(4),
  .bout-table th:nth-child(3),
  .bout-table td:nth-child(3),
  .bout-table th:nth-child(4),
  .bout-table td:nth-child(4) {
    width: auto !important;
    padding: 3px 8px !important;          /* breathing room left + right */
  }
  /* Pad the right edge of the blue corner so the flag has visible breathing
     room — modest amount now that the page padding gives the main safety */
  body .bout-table td:nth-child(4),
  body .bout-table th:nth-child(4),
  .bout-table td:nth-child(4) {
    padding-right: 14px !important;
  }
  /* Space between fighter NAME and FLAG so they don't touch */
  body .bout-table .fighter-cell,
  body .fighter-cell {
    gap: 8px !important;
  }
  body .bout-table .flag,
  body .bout-table .flag-wrap,
  body .bout-table .flag-stack {
    margin-right: 4px !important;
  }
  body .bout-table .fighter-cell.right .flag,
  body .bout-table .fighter-cell.right .flag-wrap,
  body .bout-table .fighter-cell.right .flag-stack {
    margin-left: 4px !important;
    margin-right: 0 !important;
  }
  body .bout-table th.col-red,
  .bout-table th.col-red,
  .bout-table .red-corner-h { color: #ED1C24 !important; }
  body .bout-table th.col-blue,
  .bout-table th.col-blue,
  .bout-table .blue-corner-h { color: #2E8FE0 !important; }
  /* High-specificity white-paint — wins against any legacy carbon overrides */
  body .bout-table tbody tr td,
  body .bout-table tbody .bout-row td,
  body .bout-row td,
  body .bout-row.is-main td,
  body .bout-row.is-title td,
  body .bout-row.has-result.is-title td,
  .bout-table tbody tr td,
  .bout-row td {
    border-bottom: 1px solid #E5E5E5 !important;
    padding: 3px 6px !important;       /* tight — fits more bouts per page */
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  body .bout-row.is-title td { background: #FFF9E0 !important; }
  /* Fighter names — specificity-buster selectors to beat the non-print rule
     `.bout-row .fname { color: #FFFFFF }` (0,2,1) that was making the
     names render white-on-white = invisible in v=13/14. */
  body .ev-card .bout-row .fname,
  body .ev-card .bout-row .fighter-link,
  body .ev-card .bout-row .fighter-link .fname,
  body .ev-card .bout-table .name,
  body .ev-card .bout-card .name,
  body .ev-card .corner .name,
  body .bout-row .fname,
  body .bout-row .fighter-link,
  body .bout-row.is-main .fname,
  body .bout-row.is-title .fname,
  body .fighter-cell .fname,
  body .bout-table .name, body .bout-card .name, body .corner .name,
  body .fighter-link, body .fname,
  .bout-table .name, .bout-card .name, .corner .name,
  .fighter-link, .fname {
    color: #000000 !important;
    font-family: "Saira", "Eurostile Ext", sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;        /* slightly smaller to fit one page */
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline !important;        /* defeat any display:none cascade */
    visibility: visible !important;
  }
  body .ev-card .fighter-link .fname,
  body .fighter-link .fname {
    color: #000000 !important;
  }
  /* Defeat any winner/loser colors from non-print rules */
  body .fighter-cell.is-winner .fname { color: #0E5536 !important; }
  body .fighter-cell.is-loser .fname  { color: #666666 !important; }
  body .record, .record, .bout-table .record {
    color: #666666 !important;
    font-style: italic;
    font-size: 10px !important;
  }
  /* Weight class — small + thin so it reads more legibly */
  body .td-wc, .td-wc,
  body .bout-table td.td-wc {
    color: #555555 !important;
    font-family: var(--font-body, "Eurostile", sans-serif) !important;
    font-size: 7.5px !important;
    font-weight: 400 !important;                 /* thin not bold */
    text-transform: none !important;             /* Title Case */
    letter-spacing: .015em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ─── 11 · rank chips keep their gold — brand signature ─────────────── */
  .rank, .rank-badge {
    background: rgba(255, 196, 0, .25) !important;
    color: #8B6914 !important;
    border: 1px solid rgba(255, 196, 0, .55) !important;
    font-size: 9px !important;
    padding: 1px 5px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .champ {
    background: rgba(255, 196, 0, .45) !important;
    border-color: rgba(255, 196, 0, .8) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ─── 12 · flags keep their colour ──────────────────────────────────── */
  .bout-row img, .bout-row svg, .fighter-cell img,
  .flag-icon, .flag, .stack-flag {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ─── 13 · broadcaster pills next to times keep their colour ────────── */
  .net-badge, .espn-badge, .broadcaster-pill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: #FFFFFF !important;
  }

  /* ─── 14 · result chips (when COMPLETED) keep the green ─────────────── */
  .result-chip, .bout-result {
    background: rgba(61, 220, 151, .25) !important;
    color: #0E5536 !important;
    border: 1px solid rgba(61, 220, 151, .55) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}